/* ============================================================
   Optiq — feuille de style commune à toutes les pages publiques
   ============================================================ */
/* ============================================================
   Jetons — identiques au Journal d'options et au Dashboard
   ============================================================ */
:root{
  --bg:#080C13;
  --panel:#111926;
  --panel-2:#18212F;
  --tile:#1B2534;
  --line:#243044;
  --text:#E8EEF5;
  --muted:#8A99AD;
  --dim:#5C6A7D;
  --green:#4CC85C;
  --green-soft:#1D3A26;
  --amber:#E3B341;
  --amber-soft:#3A2F14;
  --red:#F0716A;
  --blue:#5B9BFF;
  --blue-soft:#16233A;
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
.pos{color:var(--green)} .neg{color:var(--red)} .muted{color:var(--muted)}
.wrap{max-width:1240px;margin:0 auto;padding:0 22px}
section{scroll-margin-top:76px}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:14px;font-weight:600;line-height:1;
  padding:12px 20px;border-radius:10px;cursor:pointer;
  background:var(--panel-2);color:var(--text);border:1px solid var(--line);
  transition:background .16s,border-color .16s,color .16s,transform .16s;
}
.btn:hover{background:var(--tile);border-color:var(--dim)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.btn.cta{background:var(--blue);border-color:var(--blue);color:#08111F}
.btn.cta:hover{background:#7BAEFF;border-color:#7BAEFF}
.btn.ghost{background:transparent}
.btn.sm{padding:9px 15px;font-size:13px}
.btn.lg{padding:14px 24px;font-size:15px}

/* ---------- navigation ---------- */
.nav{position:sticky;top:0;z-index:40;border-bottom:1px solid transparent;transition:background .2s,border-color .2s,backdrop-filter .2s}
.nav.stuck{background:rgba(8,12,19,.82);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav-in{max-width:1240px;margin:0 auto;padding:0 22px;height:64px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15.5px;letter-spacing:-0.025em}
.brand i{width:10px;height:10px;border-radius:50%;background:var(--green);display:block}
.links{display:flex;gap:4px;margin-left:12px;flex:1}
.links a{font-size:13.5px;color:var(--muted);padding:8px 12px;border-radius:9px;transition:color .15s,background .15s}
.links a:hover{color:var(--text);background:var(--panel-2)}
.nav-act{display:flex;align-items:center;gap:9px}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:9px;color:var(--text);
  padding:8px 11px;font-size:15px;cursor:pointer}
.drawer{display:none}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:56px;align-items:center;
  padding:70px 0 76px}
.badge{
  display:inline-flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);
  background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 13px 6px 9px;margin-bottom:26px;
}
.badge b{display:flex;align-items:center;gap:5px;color:var(--green);font-weight:600}
.badge b::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green)}
h1{font-size:clamp(34px,4.4vw,52px);font-weight:800;letter-spacing:-0.04em;line-height:1.06;margin:0 0 20px}
h1 em{font-style:normal;color:var(--muted)}
.lede{font-size:16.5px;color:var(--muted);line-height:1.65;margin:0 0 30px;max-width:520px}
.hero-act{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.hero-note{font-size:12.5px;color:var(--dim);margin-top:16px}

/* ---------- titres de section ---------- */
.head{max-width:640px;margin-bottom:34px}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
h2{font-size:clamp(25px,3vw,34px);font-weight:700;letter-spacing:-0.03em;line-height:1.14;margin:0 0 13px}
.head p{margin:0;color:var(--muted);font-size:15px;line-height:1.65}
.sect{padding:74px 0}
.sect.alt{background:linear-gradient(180deg,transparent,rgba(17,25,38,.55),transparent)}

/* ---------- bande d'arguments ---------- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.strip div{padding:22px 20px;border-left:1px solid var(--line)}
.strip div:first-child{border-left:none;padding-left:0}
.strip h3{margin:0 0 5px;font-size:13.5px;font-weight:600}
.strip p{margin:0;font-size:12.5px;color:var(--dim);line-height:1.55}

/* ---------- grille fonctionnalités ---------- */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.feat{background:var(--panel);padding:24px 22px;transition:background .18s}
.feat:hover{background:var(--panel-2)}
.feat svg{width:18px;height:18px;color:var(--blue);margin-bottom:14px;display:block}
.feat h3{margin:0 0 7px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.feat .t{font-size:15px;font-weight:600;letter-spacing:-0.015em;margin-bottom:7px}
.feat p{margin:0;font-size:13px;color:var(--muted);line-height:1.6}

/* ---------- sections alternées ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:52px;align-items:center}
.split.rev > .txt{order:2}
.split .txt h2{margin-bottom:15px}
.split .txt > p{color:var(--muted);margin:0 0 22px;font-size:15px;line-height:1.65}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px;margin:0;padding:0;list-style:none}
.checks li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--muted)}
.checks svg{width:14px;height:14px;color:var(--green);flex-shrink:0;margin-top:3px}

/* ---------- maquettes ---------- */
.mock{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 22px 60px rgba(0,0,0,.42);overflow:hidden;
}
.mock-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);
  background:var(--panel-2)}
.mock-bar i{width:8px;height:8px;border-radius:50%;background:var(--line);display:block}
.mock-bar span{margin-left:8px;font-size:11px;color:var(--dim)}
.mk{padding:18px}
.mk-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.mk-k{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.mk-v{font-size:31px;font-weight:800;letter-spacing:-0.04em;line-height:1;font-family:'IBM Plex Mono',monospace}
.mk-d{font-size:12px;margin-top:8px}
.chips{display:flex;gap:3px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:3px}
.chips span{font-size:10.5px;padding:4px 8px;border-radius:5px;color:var(--dim)}
.chips span.on{background:var(--tile);color:var(--text)}
.spark{display:block;width:100%;height:auto}
.mk-tiles{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin-top:14px}
.mk-tile{padding:12px 14px;border-left:1px solid var(--line)}
.mk-tile:first-child{border-left:none}
.mk-tile .k{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.mk-tile .v{font-size:15px;font-weight:700;font-family:'IBM Plex Mono',monospace;letter-spacing:-0.02em}
.mk-rows{padding-top:4px}
.mk-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.mk-row:last-child{border-bottom:none}
.mk-row .t{font-weight:600}
.mk-row .s{color:var(--dim);font-size:11.5px}
.mk-row .a{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-weight:600}
.pill{font-size:10px;font-weight:600;padding:3px 8px;border-radius:999px;white-space:nowrap}
.pill.green{background:var(--green-soft);color:var(--green)}
.pill.amber{background:var(--amber-soft);color:var(--amber)}
.pill.blue{background:var(--blue-soft);color:var(--blue)}
.pill.grey{background:var(--tile);color:var(--muted)}

/* maquette journal : bandeau + jauge, comme la vraie fiche */
.jband{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line)}
.jband .who h4{margin:0;font-size:18px;font-weight:700;letter-spacing:-0.025em;display:flex;align-items:center;gap:8px}
.jband .who p{margin:4px 0 0;font-size:11.5px;color:var(--muted)}
.jband .amt{margin-left:auto;text-align:right}
.jband .amt .v{font-size:25px;font-weight:800;letter-spacing:-0.035em;font-family:'IBM Plex Mono',monospace}
.jband .amt .k{font-size:10.5px;color:var(--muted);margin-top:4px}
.gauge{position:relative;width:62px;height:62px;flex-shrink:0}
.gauge svg{transform:rotate(-90deg);display:block}
.gauge b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;font-family:'IBM Plex Mono',monospace}
.jtable{width:100%;border-collapse:collapse;font-size:12px}
.jtable th{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600;
  text-align:left;padding:11px 14px 9px;border-bottom:1px solid var(--line)}
.jtable td{padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.jtable tr:last-child td{border-bottom:none}
.jtable .r{text-align:right}

/* ---------- étapes ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative}
.step{padding:0 26px;border-left:1px solid var(--line);position:relative}
.step:first-child{border-left:none;padding-left:0}
.step .no{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:9px;background:var(--panel);border:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;color:var(--blue);margin-bottom:15px;
}
.step h3{margin:0 0 7px;font-size:16px;font-weight:600;letter-spacing:-0.02em}
.step p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.6}

/* ---------- pour qui ---------- */
.who3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.who3 .c{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;
  transition:border-color .18s,background .18s}
.who3 .c:hover{border-color:var(--dim);background:var(--panel-2)}
.who3 .c h3{margin:0 0 8px;font-size:15.5px;font-weight:600;letter-spacing:-0.02em}
.who3 .c p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.6}
.who3 .tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:13px}

/* ---------- tarifs ---------- */
.price-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:center}
.switch{display:inline-flex;gap:3px;background:var(--panel);border:1px solid var(--line);
  border-radius:11px;padding:4px;margin-bottom:24px}
.switch button{background:none;border:none;padding:8px 16px;border-radius:8px;font-family:inherit;
  font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.switch button.on{background:var(--tile);color:var(--text)}
.switch .save{font-size:10.5px;color:var(--green);margin-left:6px}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.34)}
.plan-top{padding:26px 26px 22px;border-bottom:1px solid var(--line)}
.plan-name{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.plan-name h3{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.amount{display:flex;align-items:baseline;gap:9px}
.amount .n{font-size:46px;font-weight:800;letter-spacing:-0.045em;line-height:1;font-family:'IBM Plex Mono',monospace}
.amount .per{font-size:13.5px;color:var(--muted)}
.plan-sub{font-size:12.5px;color:var(--dim);margin-top:11px;min-height:19px}
.plan-list{list-style:none;margin:0;padding:22px 26px;display:grid;grid-template-columns:1fr 1fr;gap:11px 18px}
.plan-list li{display:flex;gap:9px;align-items:flex-start;font-size:13px}
.plan-list svg{width:14px;height:14px;color:var(--green);flex-shrink:0;margin-top:3px}
.plan-foot{padding:0 26px 26px}
.plan-foot .btn{width:100%}
.plan-foot p{margin:13px 0 0;font-size:11.5px;color:var(--dim);text-align:center}
.price-why li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--muted);margin-bottom:13px}
.price-why{list-style:none;margin:22px 0 0;padding:0}
.price-why svg{width:15px;height:15px;color:var(--blue);flex-shrink:0;margin-top:2px}

/* ---------- CTA ---------- */
.cta-box{
  background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:52px 40px;text-align:center;
  position:relative;overflow:hidden;
}
.cta-box::before{
  content:'';position:absolute;inset:-60% 20% auto 20%;height:200px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(91,155,255,.16),transparent);pointer-events:none;
}
.cta-box h2{margin:0 0 12px}
.cta-box p{margin:0 auto 26px;color:var(--muted);max-width:440px}
.cta-box .row{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.cta-box a.lnk{font-size:13.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.cta-box a.lnk:hover{color:var(--text)}

/* ---------- FAQ ---------- */
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:19px 40px 19px 0;position:relative;
  font-size:15px;font-weight:600;letter-spacing:-0.01em;transition:color .15s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue)}
.faq summary::after{
  content:'';position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .ans{padding:0 30px 21px 0;color:var(--muted);font-size:14px;line-height:1.7}

/* ---------- pied de page ---------- */
footer{border-top:1px solid var(--line);padding:48px 0 34px;margin-top:20px}
.foot{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:34px}
.foot .about p{margin:14px 0 0;font-size:13px;color:var(--dim);max-width:280px;line-height:1.6}
.foot h4{margin:0 0 14px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:9px}
.foot li a{font-size:13px;color:var(--dim);transition:color .15s}
.foot li a:hover{color:var(--text)}
.copy{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--dim)}

/* ---------- apparition au scroll ---------- */
.rise{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rise.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .hero{grid-template-columns:1fr;gap:44px;padding:52px 0 60px}
  .split,.split.rev,.price-wrap{grid-template-columns:1fr;gap:36px}
  .split.rev > .txt{order:0}
  .feats{grid-template-columns:1fr 1fr}
  .strip{grid-template-columns:1fr 1fr}
  .strip div:nth-child(3){border-left:none;padding-left:0}
  .strip div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:760px){
  .links{display:none}
  .nav-act .btn.ghost{display:none}
  .burger{display:inline-flex}
  .drawer{display:none;position:fixed;inset:64px 0 auto;background:var(--panel);
    border-bottom:1px solid var(--line);padding:12px 22px 20px;z-index:39}
  .drawer.open{display:block}
  .drawer a{display:block;padding:12px 10px;border-radius:9px;font-size:14.5px;color:var(--muted)}
  .drawer a:hover{background:var(--panel-2);color:var(--text)}
  .drawer .btn{width:100%;margin-top:8px}
  .feats,.steps,.who3{grid-template-columns:1fr}
  .step{padding:0 0 0 0;border-left:none;border-top:1px solid var(--line);padding-top:22px;margin-top:22px}
  .step:first-child{border-top:none;margin-top:0;padding-top:0}
  .checks,.plan-list{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr;gap:28px}
  .sect{padding:56px 0}
  .cta-box{padding:38px 22px}
  .mk-tiles{grid-template-columns:1fr 1fr}
  .mk-tile:nth-child(3){border-left:none;border-top:1px solid var(--line)}
  .c-hide{display:none}
}
@media (max-width:440px){
  .strip{grid-template-columns:1fr}
  .strip div{border-left:none;padding-left:0;border-top:1px solid var(--line)}
  .strip div:first-child{border-top:none}
  .foot{grid-template-columns:1fr}
  .amount .n{font-size:38px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
  *{transition:none!important}
}

/* ============================================================
   COMPOSANTS DES PAGES SECONDAIRES
   (formulaires, pages légales, contact)
   ============================================================ */

/* ---------- gabarit de page ---------- */
.page{padding:56px 0 80px}
.page-head{max-width:720px;margin-bottom:34px}
.page-head h1{font-size:clamp(28px,3.6vw,40px);margin-bottom:12px}
.page-head p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.65}
.updated{
  display:inline-block;font-size:11.5px;color:var(--muted);background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;margin-bottom:20px;
}

/* ---------- authentification ---------- */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:52px;
  align-items:center;padding:44px 0 72px}
.auth-card{
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:32px;max-width:520px;width:100%;box-shadow:0 22px 60px rgba(0,0,0,.34);
}
.auth-card h1{font-size:27px;margin:0 0 9px;letter-spacing:-0.03em}
.auth-card .sub{color:var(--muted);font-size:14px;margin:0 0 26px}
.auth-foot{margin:20px 0 0;text-align:center;font-size:13.5px;color:var(--muted)}
.auth-foot a{color:var(--blue);font-weight:600}
.auth-foot a:hover{text-decoration:underline;text-underline-offset:3px}
.auth-side .quote{font-size:17px;line-height:1.6;color:var(--text);margin:0 0 22px;max-width:400px}
.auth-side .quote b{color:var(--green);font-weight:600}

/* ---------- formulaires ---------- */
.field{margin-bottom:16px}
.field > label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:7px}
.field .req{color:var(--dim);font-weight:400}
input[type=text],input[type=email],input[type=password],select,textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  color:var(--text);font-family:inherit;font-size:14.5px;padding:12px 13px;
  transition:border-color .15s,background .15s;
}
textarea{resize:vertical;min-height:132px;line-height:1.6}
select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238A99AD' stroke-width='1.4'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px;padding-right:34px}
input::placeholder,textarea::placeholder{color:var(--dim)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);background:var(--panel-2)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--red)}
.field .err{display:none;font-size:12px;color:var(--red);margin-top:6px}
.field.bad .err{display:block}
.field .hint{font-size:11.5px;color:var(--dim);margin-top:6px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}

.pw-wrap{position:relative}
.pw-wrap input{padding-right:74px}
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--muted);font-family:inherit;font-size:12px;font-weight:600;
  padding:7px 9px;border-radius:7px;cursor:pointer;
}
.pw-toggle:hover{background:var(--tile);color:var(--text)}
.strength{margin-top:9px}
.strength .bars{display:flex;gap:4px}
.strength .bars i{flex:1;height:3px;border-radius:2px;background:var(--tile);transition:background .2s}
.strength .lbl{font-size:11.5px;color:var(--dim);margin-top:6px}

.consent{display:flex;gap:11px;align-items:flex-start;margin:6px 0 20px;font-size:13px;color:var(--muted)}
.consent input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--blue);flex-shrink:0;cursor:pointer}
.consent a{color:var(--blue)}
.consent a:hover{text-decoration:underline;text-underline-offset:3px}
.consent.bad{color:var(--red)}
.consent.bad input{outline:1.5px solid var(--red);outline-offset:2px}

.row-between{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:2px 0 20px;flex-wrap:wrap}
.remember{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--muted);cursor:pointer}
.remember input{width:15px;height:15px;accent-color:var(--blue);cursor:pointer}
.linkish{background:none;border:none;padding:0;font-family:inherit;font-size:13px;color:var(--blue);
  cursor:pointer;font-weight:600}
.linkish:hover{text-decoration:underline;text-underline-offset:3px}

.btn.block{width:100%}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn .spin{width:14px;height:14px;border:2px solid rgba(0,0,0,.25);border-top-color:currentColor;
  border-radius:50%;animation:turn .7s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}

.alert{display:none;gap:10px;align-items:flex-start;font-size:13px;line-height:1.6;
  border-radius:11px;padding:12px 14px;margin-bottom:20px}
.alert.on{display:flex}
.alert.info{background:var(--blue-soft);border:1px solid #24406B;color:#BFD6FF}
.alert.err{background:#3A1A1A;border:1px solid #5A2A28;color:#FFC4C0}
.alert.ok{background:var(--green-soft);border:1px solid #2C5B3C;color:#B6EEC1}
.alert b{display:block;margin-bottom:3px;color:inherit}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.75fr);gap:24px;align-items:start}
.side-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.side-card + .side-card{margin-top:14px}
.side-card h3{margin:0 0 10px;font-size:14.5px;font-weight:600}
.side-card p{margin:0 0 12px;font-size:13.5px;color:var(--muted);line-height:1.65}
.side-card p:last-child{margin-bottom:0}
.side-card .mail{font-family:'IBM Plex Mono',monospace;font-size:13.5px;color:var(--blue)}
.side-card .mail:hover{text-decoration:underline;text-underline-offset:3px}
.form-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px}

/* ---------- pages légales ---------- */
.legal{display:grid;grid-template-columns:222px minmax(0,1fr);gap:44px;align-items:start}
.toc{position:sticky;top:84px;max-height:calc(100vh - 110px);overflow-y:auto;
  border-left:1px solid var(--line);padding-left:16px}
.toc h4{margin:0 0 12px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.toc a{display:block;font-size:12.5px;color:var(--dim);padding:5px 0;line-height:1.45;transition:color .15s}
.toc a:hover{color:var(--text)}
.toc a.on{color:var(--blue)}
.doc{max-width:820px}
.doc section{scroll-margin-top:88px;margin-bottom:34px}
.doc h2{font-size:18px;font-weight:700;letter-spacing:-0.02em;margin:0 0 12px;
  display:flex;gap:11px;align-items:baseline}
.doc h2 .n{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--blue);font-weight:600;flex-shrink:0}
.doc h3{font-size:14.5px;font-weight:600;margin:22px 0 8px}
.doc p{margin:0 0 13px;color:var(--muted);font-size:14.5px;line-height:1.75}
.doc ul{margin:0 0 13px;padding-left:20px;color:var(--muted);font-size:14.5px;line-height:1.75}
.doc li{margin-bottom:6px}
.doc strong{color:var(--text);font-weight:600}
.doc .note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:11px;padding:15px 17px;margin:0 0 22px}
.doc .note p{margin:0;font-size:13.5px}
.ph{
  font-family:'IBM Plex Mono',monospace;font-size:.92em;color:var(--amber);
  background:var(--amber-soft);border:1px dashed #5A4A22;border-radius:5px;padding:1px 6px;
  white-space:nowrap;
}
.idcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:4px 18px;margin-bottom:22px}
.idcard dl{margin:0}
.idcard .l{display:flex;justify-content:space-between;gap:20px;padding:13px 0;
  border-bottom:1px solid var(--line);font-size:14px;flex-wrap:wrap}
.idcard .l:last-child{border-bottom:none}
.idcard dt{color:var(--muted);margin:0}
.idcard dd{margin:0;text-align:right}

@media (max-width:1040px){
  .auth{grid-template-columns:1fr;gap:36px;padding:32px 0 60px}
  .auth-side{order:-1}
  .legal{grid-template-columns:1fr;gap:26px}
  .toc{position:static;max-height:none;border-left:none;border-top:1px solid var(--line);
    padding:16px 0 0;columns:2;column-gap:26px}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .duo{grid-template-columns:1fr}
  .auth-card{padding:24px 20px}
  .form-card{padding:20px}
  .toc{columns:1}
  .page{padding:36px 0 60px}
  .idcard .l{flex-direction:column;gap:3px}
  .idcard dd{text-align:left}
}

/* ============================================================
   LOGO OPTIQ
   Un anneau ouvert — la lecture, la visée — traversé par une
   courbe ascendante. Géométrique, lisible à 18 px comme à 40.
   ============================================================ */
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--text)}
.logo svg{display:block;flex-shrink:0}
.logo .mot{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:-0.03em;font-size:16.5px}
.logo:hover .anneau{stroke:var(--green)}
.anneau{transition:stroke .2s}

/* ============================================================
   HERO PREMIUM — halo, grille en perspective, aperçu flottant
   ============================================================ */
.scene{position:relative;overflow:hidden;isolation:isolate}
.scene::before{               /* halo central, très diffus */
  content:'';position:absolute;left:50%;top:-180px;width:1100px;height:620px;
  transform:translateX(-50%);pointer-events:none;z-index:-2;
  background:
    radial-gradient(closest-side, rgba(91,155,255,.20), transparent 70%),
    radial-gradient(closest-side, rgba(126,110,255,.14), transparent 75%);
  filter:blur(18px);
}
.scene::after{                /* grille au sol, fuyante */
  content:'';position:absolute;left:-20%;right:-20%;bottom:-120px;height:520px;
  pointer-events:none;z-index:-2;opacity:.5;
  background-image:
    linear-gradient(rgba(91,155,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,155,255,.16) 1px, transparent 1px);
  background-size:72px 72px;
  transform:perspective(620px) rotateX(63deg);
  transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 72%);
  mask-image:linear-gradient(to top, #000 0%, transparent 72%);
}
.lueur-verte{
  position:absolute;right:-140px;top:120px;width:520px;height:420px;z-index:-2;
  background:radial-gradient(closest-side, rgba(76,200,92,.13), transparent 70%);
  filter:blur(20px);pointer-events:none;
}

.hero-pro{display:grid;grid-template-columns:minmax(0,1fr);gap:44px;
  padding:64px 0 76px;text-align:center;justify-items:center}
.hero-pro h1{font-size:clamp(34px,5vw,58px);letter-spacing:-0.042em;line-height:1.05;margin:0 0 20px;max-width:15ch}
.hero-pro h1 .accent{
  background:linear-gradient(100deg,var(--blue) 10%,#9C8CFF 55%,var(--green) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-pro .lede{max-width:640px;margin:0 auto 30px;font-size:16.5px}
.hero-pro .hero-act{justify-content:center}
.badge-pro{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:24px;
  font-size:12px;color:var(--muted);padding:6px 14px 6px 10px;border-radius:999px;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,
             linear-gradient(100deg, rgba(91,155,255,.5), rgba(76,200,92,.35)) border-box;
  border:1px solid transparent;
}
.badge-pro b{color:var(--green);font-weight:600}

/* aperçu de l'application */
.apercu{
  position:relative;width:100%;max-width:1000px;
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(91,155,255,.07),
             0 -1px 0 rgba(255,255,255,.05) inset;
}
.apercu-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;
  border-bottom:1px solid var(--line);background:rgba(8,12,19,.5)}
.apercu-bar i{width:8px;height:8px;border-radius:50%;background:var(--line);display:block}
.apercu-bar span{margin-left:10px;font-size:11px;color:var(--dim);font-family:'IBM Plex Mono',monospace}
.apercu-corps{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:1px;background:var(--line)}
.apercu-col{background:var(--panel);padding:16px}
.ap-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:14px}
.ap-kpi div{background:var(--panel-2);padding:10px 11px}
.ap-kpi .k{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.ap-kpi .v{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:700;letter-spacing:-0.02em}
.ap-titre{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.ap-graph{display:flex;align-items:flex-end;gap:5px;height:72px;margin-bottom:14px}
.ap-graph i{flex:1;border-radius:3px 3px 0 0;display:block;opacity:.9}
.ap-ligne{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--line);font-size:11.5px}
.ap-ligne:last-child{border-bottom:none}
.ap-ligne .tk{font-weight:600;font-size:12px}
.ap-ligne .ds{color:var(--dim);font-size:10.5px}
.ap-ligne .mt{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-weight:600}
.ap-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.ap-cal span{aspect-ratio:1;border-radius:4px;background:var(--panel-2);display:flex;
  align-items:center;justify-content:center;font-size:9px;color:var(--dim);
  font-family:'IBM Plex Mono',monospace}
.ap-cal span.plein{background:var(--blue-soft);color:var(--blue);font-weight:600}
.ap-cal span.vert{background:var(--green-soft);color:var(--green);font-weight:600}
.ap-cal span.ambre{background:var(--amber-soft);color:var(--amber);font-weight:600}

/* pastilles flottantes autour de l'aperçu */
.flottant{
  position:absolute;display:flex;align-items:center;gap:8px;
  background:rgba(24,33,47,.92);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:11px;padding:9px 13px;
  font-size:12px;white-space:nowrap;box-shadow:0 14px 34px -12px rgba(0,0,0,.85);
}
.flottant b{font-family:'IBM Plex Mono',monospace;font-weight:600}
.flottant.f1{left:-26px;top:96px}
.flottant.f2{right:-22px;top:186px}
.flottant.f3{right:60px;bottom:-18px}
@media (max-width:1100px){ .flottant{display:none} }

/* aperçus secondaires dans les sections */
.mock-plein{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 26px 60px -28px rgba(0,0,0,.85)}
.ruban{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.ruban span{font-size:11.5px;color:var(--muted);background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px}
.secondaire{border-left:2px solid var(--line);padding-left:20px}
.secondaire h3{margin:0 0 8px;font-size:16px;font-weight:600;letter-spacing:-0.02em}
.secondaire p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.65}

@media (max-width:820px){
  .apercu-corps{grid-template-columns:1fr}
  .hero-pro{padding:44px 0 56px;gap:34px}
  .scene::after{height:340px;background-size:52px 52px}
}