/* Aeon Ops — module application : rail, sélecteur de profil, sections de l'accueil, panneau adaptatif. */
:root{--rail:76px}

/* ---------- RAIL ---------- */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:60;border-right:1px solid var(--line);
  background:rgba(8,9,12,.86);backdrop-filter:blur(12px);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:22px 0}
.mark{width:34px;height:34px}
.rail nav{display:flex;flex-direction:column;gap:6px}
.rail nav a{position:relative;width:44px;height:36px;display:grid;place-items:center;font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--dim);border-radius:8px;transition:color .2s,background .2s}
.rail nav a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.rail nav a.on{color:var(--text);background:rgba(255,255,255,.07)}
.rail nav a.on::before{content:'';position:absolute;left:-16px;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--gold)}
.rail nav a::after{content:attr(data-label);position:absolute;left:54px;white-space:nowrap;background:var(--card);border:1px solid var(--line2);padding:5px 10px;border-radius:7px;font-family:'Instrument Sans',sans-serif;font-size:.78rem;color:var(--text);opacity:0;pointer-events:none;transform:translateX(-4px);transition:opacity .15s,transform .15s}
.rail nav a:hover::after{opacity:1;transform:none}
.rail-foot{font-family:'IBM Plex Mono',monospace;font-size:.6rem;color:var(--dim);writing-mode:vertical-rl;letter-spacing:.14em}

/* ---------- SELECTEUR DE PROFIL ---------- */
.seg{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--line2);border-radius:12px;background:rgba(255,255,255,.03);overflow-x:auto}
.seg-l{font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:0 10px 0 8px;white-space:nowrap}
.seg button{font-size:.8rem;padding:7px 14px;border-radius:9px;color:var(--dim);transition:background .2s,color .2s;white-space:nowrap}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--text);color:var(--bg);font-weight:600}

/* ---------- HERO ---------- */
.hero{padding:96px 0 90px}
.hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.7rem,5.6vw,4.9rem);margin:22px 0 26px;font-weight:700}
.hero h1 em{background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;padding-bottom:2px}
.lead{color:var(--dim);font-size:1.14rem;max-width:50ch;margin-bottom:36px;min-height:5.2em}
.cta-row{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.micro{margin-top:26px;font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--dim);letter-spacing:.04em}
.micro b{color:var(--text);font-weight:500}

/* stage: deux couches */
.stage{position:relative;height:490px;--mx:0;--my:0}
.layer{position:absolute;border:1px solid var(--line2);border-radius:20px;background:linear-gradient(180deg,#14171F,#0E1117);box-shadow:0 40px 90px rgba(0,0,0,.55);overflow:hidden;transition:transform .25s ease-out}
.layer .bar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--dim);letter-spacing:.06em}
.tag{font-style:normal;padding:3px 9px;border-radius:20px;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase}
.tag.v{background:var(--gold-soft);color:var(--gold)}
.tag.o{background:var(--blue-soft);color:var(--blue)}
.front{left:0;top:0;width:76%;height:290px;z-index:2;transform:translate(calc(var(--mx)*-14px),calc(var(--my)*-10px))}
.back{right:0;bottom:0;width:80%;height:318px;transform:translate(calc(var(--mx)*10px),calc(var(--my)*8px))}
.search{margin:16px 18px 12px;padding:11px 14px;border:1px solid var(--line2);border-radius:11px;font-size:.88rem;display:flex;align-items:center;gap:8px;min-height:44px;background:rgba(255,255,255,.02)}
.search svg{flex-shrink:0;opacity:.55}
.caret{width:1.5px;height:1.05em;background:var(--gold);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.result{margin:0 18px 10px;padding:10px 12px;border-radius:10px;border-left:2px solid var(--gold);background:var(--gold-soft)}
.result small{display:block;font-family:'IBM Plex Mono',monospace;font-size:.62rem;color:var(--dim)}
.result h4{font-size:.98rem;font-weight:600;margin:2px 0 2px;letter-spacing:-.01em}
.result p{font-size:.78rem;color:var(--dim);line-height:1.4}
.skel{margin:0 18px 8px;height:8px;border-radius:5px;background:rgba(255,255,255,.07)}
.skel.s{width:62%}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px 0}
.tile{border:1px solid var(--line);border-radius:12px;padding:11px 12px 6px;background:rgba(255,255,255,.02)}
.tile b{display:block;font-weight:500;font-size:.72rem;color:var(--dim);margin-bottom:4px}
.tile svg{width:100%;height:34px;display:block}
.tile polyline{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240;animation:draw 2.4s ease forwards .4s}
@keyframes draw{to{stroke-dashoffset:0}}
.autos{margin:10px 16px 0;border:1px solid var(--line);border-radius:12px;padding:6px 12px}
.auto{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;padding:7px 0;border-bottom:1px solid var(--line)}
.auto:last-child{border-bottom:0}
.tg{width:26px;height:14px;border-radius:9px;background:#272c37;position:relative;flex-shrink:0;animation:tgBg 6s ease-in-out infinite}
.tg::after{content:'';position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#fff;animation:tgDot 6s ease-in-out infinite}
.auto:nth-child(2) .tg,.auto:nth-child(2) .tg::after{animation-delay:1.3s}
.auto:nth-child(3) .tg,.auto:nth-child(3) .tg::after{animation-delay:2.6s}
@keyframes tgBg{0%,15%{background:#272c37}30%,85%{background:var(--blue)}100%{background:#272c37}}
@keyframes tgDot{0%,15%{left:2px}30%,85%{left:14px}100%{left:2px}}
.pill{position:absolute;z-index:3;left:44%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line2);border-radius:30px;padding:8px 14px;font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.04em;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);animation:pulse 1.6s infinite}
.stage-cap{position:absolute;left:0;bottom:-2px;font-family:'IBM Plex Mono',monospace;font-size:.62rem;color:var(--dim);letter-spacing:.06em}

/* ---------- PILIERS ---------- */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pillar{border:1px solid var(--line);border-radius:22px;padding:38px 34px;background:linear-gradient(180deg,var(--card),var(--bg2));position:relative;overflow:hidden;transition:border-color .25s,transform .25s}
.pillar:hover{transform:translateY(-4px)}
.pillar.v:hover{border-color:rgba(242,193,78,.5)}
.pillar.o:hover{border-color:rgba(91,140,255,.5)}
.pillar::before{content:'';position:absolute;top:-80px;right:-80px;width:220px;height:220px;border-radius:50%;filter:blur(60px);opacity:.35}
.pillar.v::before{background:var(--gold)}
.pillar.o::before{background:var(--blue)}
.pillar .num{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.12em;margin-bottom:18px;display:block}
.pillar.v .num{color:var(--gold)}
.pillar.o .num{color:var(--blue)}
.pillar h3{font-size:1.9rem;margin-bottom:10px}
.pillar .sub{color:var(--dim);margin-bottom:24px}
.pillar ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px}
.pillar li{display:flex;gap:12px;font-size:.96rem}
.pillar li::before{content:'';width:6px;height:6px;margin-top:.62em;border-radius:2px;flex-shrink:0;transform:rotate(45deg)}
.pillar.v li::before{background:var(--gold)}
.pillar.o li::before{background:var(--blue)}
.pillar .ex{font-size:.86rem;color:var(--dim);padding-top:20px;border-top:1px solid var(--line)}
.pillar .ex b{color:var(--text);font-weight:500}
body[data-lean="o"] .pillars .pillar.o{order:-1}
body[data-lean="o"] .pillar.o{border-color:rgba(91,140,255,.45)}
body[data-lean="v"] .pillar.v{border-color:rgba(242,193,78,.45)}
.bridge{margin-top:22px;border:1px dashed var(--line2);border-radius:16px;padding:20px 26px;display:flex;gap:16px;align-items:center;color:var(--dim);font-size:.98rem}
.bridge strong{color:var(--text);font-weight:500}
.bridge svg{flex-shrink:0}

/* ---------- DIAGNOSTIC ---------- */
.dg{border:1px solid var(--line2);border-radius:24px;background:linear-gradient(180deg,var(--card),var(--bg2));overflow:hidden;max-width:880px}
.dg-top{display:flex;justify-content:space-between;align-items:center;padding:16px 26px;border-bottom:1px solid var(--line);font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--dim);letter-spacing:.08em}
.dg-prog{display:flex;gap:6px}
.dg-prog i{width:30px;height:3px;border-radius:2px;background:rgba(255,255,255,.1);transition:background .3s}
.dg-prog i.on{background:var(--gold)}
.dg-body{padding:38px 34px 34px;min-height:340px}
.dg-body h3{font-size:1.65rem;margin-bottom:26px;max-width:24ch}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opts button{text-align:left;padding:18px 20px;border:1px solid var(--line2);border-radius:14px;font-size:.98rem;background:rgba(255,255,255,.02);transition:border-color .2s,background .2s,transform .2s}
.opts button:hover{border-color:var(--gold);background:var(--gold-soft);transform:translateY(-2px)}
.dg-back{margin-top:22px;font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--dim);border-bottom:1px solid var(--line2)}
.dg-back:hover{color:var(--text)}
.res-tag{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.res-name{font-family:'Bricolage Grotesque',sans-serif;font-size:3.1rem;font-weight:700;margin:6px 0 8px;letter-spacing:-.03em}
.res-desc{color:var(--dim);max-width:52ch;margin-bottom:24px}
.leaks{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.leaks li{display:flex;gap:12px;font-size:.95rem;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.leaks li::before{content:'!';font-family:'IBM Plex Mono',monospace;color:var(--gold);flex-shrink:0}
.res-note{font-size:.8rem;color:var(--dim);margin-top:16px}

/* ---------- FORMULES ---------- */
.formules{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fcard{position:relative;border:1px solid var(--line);border-radius:22px;padding:32px 26px;background:linear-gradient(180deg,var(--card),var(--bg2));display:flex;flex-direction:column;transition:border-color .25s,transform .25s}
.fcard:hover{transform:translateY(-4px);border-color:var(--line2)}
.fcard .fn{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.12em;color:var(--dim)}
.fcard h3{font-size:2.1rem;margin:8px 0 6px}
.fcard .ft{color:var(--dim);font-size:.9rem;margin-bottom:22px;min-height:2.8em}
.frow{border-top:1px solid var(--line);padding:16px 0}
.frow small{display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.frow small::before{content:'';width:7px;height:7px;border-radius:2px;transform:rotate(45deg)}
.frow.v small{color:var(--gold)}
.frow.v small::before{background:var(--gold)}
.frow.o small{color:var(--blue)}
.frow.o small::before{background:var(--blue)}
.frow p{font-size:.92rem}
.badge-match{display:none;position:absolute;top:-12px;left:24px;background:var(--gold);color:#1F1602;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.06em;padding:5px 12px;border-radius:20px;font-weight:500}
.fcard.match{border-color:rgba(242,193,78,.6);background:linear-gradient(180deg,rgba(242,193,78,.09),var(--bg2))}
.fcard.match .badge-match{display:block}
.fnote{margin-top:22px;color:var(--dim);font-size:.9rem}
.fnote b{color:var(--text);font-weight:500}
.missions{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.missions span{border:1px solid var(--line2);border-radius:30px;padding:10px 18px;font-size:.88rem;transition:border-color .2s,background .2s}
.missions span:hover{border-color:var(--blue);background:var(--blue-soft)}

/* ---------- METHODE ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.step{padding:34px 30px;background:var(--card)}
.step+.step{border-left:1px solid var(--line)}
.step .sn{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.12em;color:var(--gold);margin-bottom:16px;display:block}
.step h3{font-size:1.45rem;margin-bottom:12px}
.step p{color:var(--dim);font-size:.95rem}

/* ---------- PREUVE ---------- */
.proof{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.proof h2{font-size:clamp(2rem,3.4vw,2.8rem);margin:18px 0 18px}
.proof p{color:var(--dim);margin-bottom:14px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kpi{border:1px solid var(--line);border-radius:16px;padding:22px 20px;background:var(--card)}
.kpi small{display:block;font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.kpi b{font-family:'Bricolage Grotesque',sans-serif;font-size:1.25rem;font-weight:600;letter-spacing:-.01em}

/* ---------- CONTACT ---------- */
.final{text-align:center;padding:130px 0 120px}
.final .kicker{justify-content:center}
.final h2{font-size:clamp(2.2rem,4.8vw,3.8rem);max-width:17ch;margin:22px auto 20px}
.final p{color:var(--dim);max-width:52ch;margin:0 auto 38px;font-size:1.08rem;min-height:3.2em}
.final .cta-row{justify-content:center}

/* ---------- SIGNAL PANEL ---------- */
.signal{position:fixed;left:calc(var(--rail) + 18px);bottom:18px;z-index:70;max-width:330px}
.sig-toggle{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line2);border-radius:30px;padding:10px 16px;font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.05em;box-shadow:0 14px 40px rgba(0,0,0,.5);transition:border-color .2s}
.sig-toggle:hover{border-color:var(--gold)}
.sig-toggle i{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.sig-toggle b{font-weight:500;color:var(--gold)}
.sig-panel{display:none;margin-bottom:10px;background:var(--card);border:1px solid var(--line2);border-radius:18px;padding:20px 20px 16px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.signal.open .sig-panel{display:block}
.sig-panel h4{font-size:1.02rem;margin-bottom:12px}
.sig-panel ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.sig-panel li{font-size:.82rem;color:var(--text);padding-left:14px;position:relative}
.sig-panel li::before{content:'';position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--blue)}
.sig-note{font-size:.74rem;color:var(--dim);margin-bottom:12px}
.sig-reset{font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--dim);border-bottom:1px solid var(--line2)}
.sig-reset:hover{color:var(--text)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1020px){
  .hero .wrap{grid-template-columns:1fr}
  .proof{grid-template-columns:1fr}
  .formules{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step+.step{border-left:0;border-top:1px solid var(--line)}
  .pillars{grid-template-columns:1fr}
  body[data-lean="o"] .pillars .pillar.o{order:0}
}
@media (max-width:900px){
  .rail{display:none}
  .shell{margin-left:0}
  .signal{left:14px;bottom:14px}
  .seg-l{display:none}
}
@media (max-width:680px){
  .home .brand{display:none}
  .opts{grid-template-columns:1fr}
  .dg-body{padding:28px 20px}
  .stage{height:430px}
  .front{width:88%}
  .back{width:90%}
  .pill{left:50%}
}
@media (prefers-reduced-motion:reduce){
  .tile polyline{stroke-dashoffset:0}
}

/* ---------- LOGO ---------- */
.rail .mark{display:block;width:40px;height:40px}
.brand{display:flex;align-items:center}
.brand img{display:block;width:auto;height:26px}
.brand .brand-full{display:none}
@media (max-width:900px){
  .brand .brand-name{display:none}
  .brand .brand-full{display:block;height:38px}
}