/* Lartek — noir et or avec le rouge de l'écusson (logo officiel).
   Mise en page: texte aligné à gauche, grandes marges, une seule zone d'éclat (la fenêtre Nexus du hero). */
:root{
  --bg:#050505; --bg2:#0e0d0a; --bg3:#17150f;
  --line:#2a2412; --text:#f0e0b0; --muted:#b3a47e;
  --gold:#c8960c; --gold-hi:#e3b02a; --gold-lo:#a07808;
  --teal:#ff6a4d; --teal-lo:#c30101; /* rouge du logo Lartek (variables gardées sous l'ancien nom) */
  --ok:#22c55e; --warn:#e8a000; --info:#4a90d9;
  --f-display:"Sora","Segoe UI",system-ui,sans-serif;
  --f-body:"Figtree","Segoe UI",system-ui,sans-serif;
  --maxw:1120px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip;max-width:100%}
main,footer{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--f-body);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
h1,h2,h3{font-family:var(--f-display);line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:700}
h2{font-size:clamp(1.65rem,3vw,2.3rem);font-weight:600}
h3{font-size:1.15rem;font-weight:600;letter-spacing:-.01em}
p{margin:0}
.lead{font-size:1.2rem;color:var(--muted);max-width:56ch}
.muted{color:var(--muted)}

/* Navigation */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:rgba(5,5,5,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap;padding-block:8px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo img{display:block}
.logo img:first-child{height:44px;width:auto}
.logo img:last-child{height:20px;width:auto}
.nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav li a{display:block;padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--muted);font-weight:500}
.nav li a:hover{color:var(--text)}
.nav li a[aria-current="page"]{color:var(--bg);background:var(--gold)}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:10px;font:600 1rem var(--f-body);text-decoration:none;border:1px solid var(--gold);cursor:pointer;transition:background .15s,color .15s}
.btn-primary{background:var(--gold);color:#120d00}
.btn-primary:hover{background:var(--gold-hi)}
.btn-ghost{background:transparent;color:var(--text)}
.btn-ghost:hover{background:var(--bg3)}
.actions{display:flex;gap:12px;flex-wrap:wrap}

/* Hero */
.hero{padding-block:clamp(40px,7vw,96px) clamp(48px,7vw,88px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,64px);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:24px}
.hero h1 em{font-style:normal;color:var(--gold-hi)}
@media(max-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr)}}

/* Fenêtre Nexus (aperçu) */
.win{background:var(--bg2);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(200,150,12,.35)}
.win-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--bg3);border-bottom:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.win-bar i{width:10px;height:10px;border-radius:50%;background:#3a3320;display:block}
.win-bar span{margin-left:8px}
.win-body{display:grid;grid-template-columns:150px minmax(0,1fr);min-height:300px}
.side{background:#000;border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:2px;font-size:.85rem}
.side b{font-family:var(--f-display);color:var(--gold-hi);letter-spacing:.12em;padding:2px 8px 12px}
.side span{padding:7px 10px;border-radius:8px;color:var(--muted)}
.side span.on{background:var(--gold);color:#120d00;font-weight:600}
.main{padding:16px;display:flex;flex-direction:column;gap:14px;min-width:0}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tile{background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.tile small{display:block;color:var(--muted);font-size:.72rem;line-height:1.3}
.tile strong{font:600 1.4rem var(--f-display);font-variant-numeric:tabular-nums}
.rows{display:flex;flex-direction:column;font-size:.82rem}
.rows div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;padding:8px 2px;border-bottom:1px solid var(--line);align-items:center}
.rows div:last-child{border-bottom:0}
.rows em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--muted)}
.pill{font-size:.7rem;padding:2px 9px;border-radius:999px;font-weight:600}
.pill.ok{background:rgba(34,197,94,.15);color:#6ee7a0}
.pill.wait{background:rgba(232,160,0,.16);color:#f3c04e}
.caption{font-size:.82rem;color:var(--muted);margin-top:10px}
@media(max-width:560px){.win-body{grid-template-columns:minmax(0,1fr)}.side{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line)}.side b{width:100%}.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Sections */
section{padding-block:clamp(48px,7vw,88px)}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:40px}
.alt{background:var(--bg2);border-block:1px solid var(--line)}

/* Services: texte en deux colonnes */
.svc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px 48px;padding-block:28px;border-top:1px solid var(--line)}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc p{color:var(--muted);max-width:60ch}
@media(max-width:700px){.svc{grid-template-columns:minmax(0,1fr)}}

/* Applications (grille de l'accueil) */
.apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.app{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--bg);text-decoration:none;transition:border-color .15s,transform .15s}
.app:hover{border-color:var(--gold)}
.app p{color:var(--muted);font-size:.98rem}
.app.feat{grid-column:span 2;background:linear-gradient(135deg,#120e03,var(--bg));border-color:var(--gold-lo)}
.tag{align-self:flex-start;font-size:.78rem;font-weight:600;padding:3px 11px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.tag.gold{border-color:var(--gold-lo);color:var(--gold-hi)}
.tag.teal{border-color:var(--teal-lo);color:var(--teal)}
@media(max-width:860px){.apps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.app.feat{grid-column:span 2}}
@media(max-width:560px){.apps{grid-template-columns:minmax(0,1fr)}.app.feat{grid-column:auto}}

/* Démarche */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:flex;flex-direction:column;gap:8px}
.steps li::before{content:counter(s);font:600 2.3rem/1 var(--f-display);color:var(--gold)}
.steps p{color:var(--muted);font-size:.98rem}
@media(max-width:860px){.steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:480px){.steps{grid-template-columns:minmax(0,1fr)}}

/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.cbox{display:flex;flex-direction:column;gap:14px}
.crow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
.crow span{font-size:.85rem;color:var(--muted);display:block}
.crow strong{font:600 1.25rem var(--f-display);user-select:all;overflow-wrap:anywhere}
.copy{font:600 .9rem var(--f-body);color:var(--text);background:transparent;border:1px solid var(--line);border-radius:8px;padding:8px 14px;cursor:pointer}
.copy:hover{border-color:var(--gold)}
@media(max-width:800px){.contact{grid-template-columns:minmax(0,1fr)}}

footer{border-top:1px solid var(--line);padding-block:32px;color:var(--muted);font-size:.92rem}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Page Applications */
.page-head{padding-block:clamp(40px,6vw,72px) 24px;display:flex;flex-direction:column;gap:18px}
.filters{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:8px}
.chip{font:500 .95rem var(--f-body);color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--gold);color:#120d00;border-color:var(--gold);font-weight:600}
.detail{padding-block:48px;border-top:1px solid var(--line)}
.detail .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.detail[hidden]{display:none}
.dcopy{display:flex;flex-direction:column;gap:16px}
.dcopy ul{margin:0;padding-left:1.1em;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.dcopy li::marker{color:var(--gold)}
.stack{font-size:.9rem;color:var(--muted)}
.panel{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.panel h4{margin:0;font:700 1rem var(--f-display)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;font-size:.95rem}
.kv dt{color:var(--muted)}.kv dd{margin:0}
@media(max-width:860px){.detail .wrap{grid-template-columns:minmax(0,1fr)}}

/* Grille horaire (CinemaPlayer) */
.sched{display:grid;grid-template-columns:44px repeat(3,minmax(0,1fr));gap:4px;font-size:.78rem}
.sched .h{color:var(--muted);text-align:right;padding-right:6px;padding-top:4px}
.sched .d{text-align:center;color:var(--muted);font-weight:600;padding-bottom:4px}
.blk{border-radius:6px;padding:6px 8px;line-height:1.25;overflow:hidden}
.blk.f{background:rgba(200,150,12,.22);border-left:3px solid var(--gold)}
.blk.s{background:rgba(226,58,34,.16);border-left:3px solid var(--teal-lo)}
.blk.p{background:rgba(255,255,255,.07);border-left:3px solid #7a7360;color:var(--muted)}

/* ===== Effets modernes ===== */
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.glow{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(circle,rgba(200,150,12,.16),transparent 62%);pointer-events:none;z-index:0;transform:translate3d(var(--x,50vw),var(--y,30vh),0);will-change:transform}
main,footer{position:relative;z-index:1}
.nav{z-index:20}
.progress{position:fixed;top:0;left:0;width:100%;height:3px;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--gold),var(--teal));z-index:30}
.alt{background:rgba(12,11,8,.74);backdrop-filter:blur(3px)}

/* Hero */
.hero h1{font-size:clamp(2.3rem,5.4vw,4.2rem);letter-spacing:-.03em;line-height:1.12}
.rot{display:block;min-height:1.12em;background:linear-gradient(100deg,var(--gold-hi),#fff1bd 30%,var(--teal) 60%,var(--gold-hi));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite;transition:opacity .35s,transform .35s}
.rot.out{opacity:0;transform:translateY(-10px)}
@keyframes shine{to{background-position:-300% 0}}
.live{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted);align-self:flex-start;border:1px solid var(--line);border-radius:999px;padding:6px 14px;background:rgba(5,5,5,.5)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.stage{position:relative;isolation:isolate;animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.win{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out;will-change:transform}
.float-chip{position:absolute;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:rgba(14,13,10,.92);border:1px solid var(--gold-lo);font-size:.85rem;box-shadow:0 18px 40px -16px rgba(0,0,0,.8);animation:float2 6s ease-in-out infinite}
.float-chip b{color:var(--gold-hi)}
.float-chip.a{left:-14px;bottom:42px}
.float-chip.b{right:-6px;top:-18px;animation-delay:-2.5s;border-color:var(--teal-lo)}
.float-chip.b b{color:var(--teal)}
@keyframes float2{50%{transform:translateY(8px)}}
@media(max-width:900px){.float-chip{display:none}}
.tile strong,.rows em{transition:color .4s}
.flash{animation:flash 1.2s}
@keyframes flash{0%{background:rgba(200,150,12,.35)}100%{background:transparent}}
.tile.flash{animation:tflash 1.2s}
@keyframes tflash{0%{border-color:var(--gold-hi)}100%{border-color:var(--line)}}

/* Bandeau défilant */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:rgba(5,5,5,.6);padding-block:16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mtrack{display:flex;width:max-content;gap:0;animation:marq 38s linear infinite}
.mtrack span{font:600 1.25rem var(--f-display);color:var(--muted);padding-inline:26px;white-space:nowrap;display:flex;align-items:center;gap:52px}
.mtrack span::after{content:"";width:9px;height:9px;background:var(--gold);transform:rotate(45deg)}
@keyframes marq{to{transform:translateX(-50%)}}
section{padding-block:clamp(56px,8vw,112px)}

/* Cartes avec projecteur */
.app{position:relative;overflow:hidden;background:rgba(10,9,6,.72);backdrop-filter:blur(4px)}
.app::before{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(200,150,12,.22),transparent 60%);opacity:0;transition:opacity .25s;pointer-events:none}
.app:hover::before{opacity:1}
.app:hover{transform:translateY(-4px)}
.app>*{position:relative}
.app.feat{background:linear-gradient(135deg,rgba(40,28,4,.85),rgba(5,5,5,.8))}
.app .go{margin-top:auto;font-weight:600;color:var(--gold-hi);display:inline-flex;gap:6px;transition:gap .2s}
.app:hover .go{gap:12px}
.app h3{font-size:1.3rem}
.app.feat h3{font-size:1.7rem}

/* Apparition au défilement */
.fx .rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.fx .rv.in{opacity:1;transform:none}

/* Étapes reliées */
.steps{position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:22px;height:2px;background:var(--line)}
.steps::after{content:"";position:absolute;left:0;top:22px;height:2px;width:100%;background:linear-gradient(90deg,var(--gold),var(--teal));transform-origin:0 50%;transform:scaleX(var(--sp,0))}
.steps li{position:relative;z-index:1}
.steps li::before{display:inline-block;background:var(--bg);padding-right:14px;align-self:flex-start}
@media(max-width:860px){.steps::before,.steps::after{display:none}}

/* Contact et pied de page */
.cbox .crow{background:rgba(14,13,10,.8);transition:border-color .2s}
.cbox .crow:hover{border-color:var(--gold-lo)}
.brandfoot{padding-top:48px;text-align:center}
.brandfoot img{display:block;margin:0 auto;width:min(480px,86%);height:auto;animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{filter:drop-shadow(0 0 26px rgba(200,150,12,.45))}}
footer{background:linear-gradient(180deg,transparent,rgba(0,0,0,.8))}

/* Page Applications */
.detail{background:rgba(5,5,5,.5)}
.panel{background:rgba(14,13,10,.8);backdrop-filter:blur(4px)}
.blk{animation:pop .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*120ms + 200ms)}
@keyframes pop{from{opacity:0;transform:scale(.85)}}
.page-head h1{font-size:clamp(2.5rem,6.4vw,4.6rem);letter-spacing:-.03em}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .fx .rv{opacity:1;transform:none}
  .rot{color:var(--gold-hi);background:none}
}

/* Espace client, bandeau de confidentialité, liens existants */
.nav-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn-sm{padding:8px 16px;font-size:.92rem;border-radius:999px}
.overlay{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:16px}
.overlay.visible{display:flex}
.modal{width:min(420px,100%);background:var(--bg2);border:1px solid var(--gold-lo);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:16px;box-shadow:0 40px 90px -30px rgba(200,150,12,.4)}
.modal h3{font-size:1.3rem}
.modal label{display:flex;flex-direction:column;gap:6px;font-size:.92rem;color:var(--muted)}
.modal input{font:400 1rem var(--f-body);color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.modal input:focus{outline:2px solid var(--gold-hi);outline-offset:1px}
.err{color:#ff8a76;font-size:.92rem;min-height:1.2em}
.err[hidden]{display:none}
.modal .actions{justify-content:flex-end}
.consent{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;max-width:760px;margin-inline:auto;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:16px 20px;border:1px solid var(--gold-lo);border-radius:14px;background:rgba(14,13,10,.96);backdrop-filter:blur(8px);font-size:.9rem;color:var(--muted)}
.consent[hidden]{display:none}
.consent p{flex:1;min-width:220px}
.consent a{color:var(--gold-hi)}
.flinks{display:flex;gap:18px;flex-wrap:wrap}
.flinks a{color:var(--muted)}
.open{display:inline-flex;align-self:flex-start}