/* Lorne & Vale · page Sécurité (v8). Chargé après lv.css et security.css.
   1. Pont de jetons : security.css a été écrit pour l'ancien site.css et lit des
      variables que lv.css ne définit pas. On les fournit ici, alignées sur le
      système v8 (un seul bleu d'accent, violet réservé au post-quantique comme
      dans l'application). 2. Composants propres à cette page. */
:root{
  --acc1:var(--acc); --acc2:#5e5ce6; --accg:var(--acc);
  --dline2:#2d2d2f; --dshadow:0 30px 80px rgba(0,0,0,.55); --shadow-md:var(--sh-1);
}

/* ---------- Hero ---------- */
.sxhero .hero__cta .btn--s{background:#fff}
.sxhero .stage__win{border-radius:var(--r-lg)}
.sxhero .stage__win.zoom img{max-width:none}
@media (max-width:900px){
  .sxhero .stage__win{display:none}
  .sxhero .stage{display:flex;justify-content:center}
  .sxhero .stage__phone{position:relative;right:auto;bottom:auto;margin:0 auto;--pw:min(60vw,250px)}
  .sxhero .stage__phone img{filter:drop-shadow(0 24px 48px rgba(0,0,0,.28))}
  @media (max-width:900px){.sxhero .stage__phone img{filter:drop-shadow(0 14px 26px rgba(0,0,0,.16))}}
}
@media (max-width:760px){.sxhero .stage__phone{margin:0 auto}}

/* ---------- Rail de chapitres ---------- */
/* Le rail vit après le hero, dans le flux : il ne se colle sous la barre de
   navigation qu'une fois atteint. Les ancres qu'il vise gardent une marge. */
#securite,#sx-sec-architecture,#sx-sec-labs,#sx-sec-limits,#sx-sec-shared,#pack{scroll-margin-top:calc(var(--nav-h) + 58px)}
.sxnav{background:rgba(255,255,255,.92)}

/* ---------- Schéma du cloisonnement ---------- */
.rls{background:#fff;border:1px solid var(--line2);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;max-width:560px;margin:0 auto;width:100%}
.rls__head{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line2);background:var(--soft);font-size:13px;color:var(--ink2)}
.rls__head .mono{color:var(--ink)}
.rls__row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line2);font-size:14.5px;color:var(--ink2)}
.rls__row:last-of-type{border-bottom:0}
.rls__row b{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.rls__row b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line);flex:none}
.rls__row.is-ok b::before{background:var(--good)}
.rls__row.is-no b{color:var(--ink3)}
.rls__foot{padding:12px 20px 14px;font-size:12.5px;line-height:1.5;color:var(--ink3);border-top:1px solid var(--line2);background:var(--soft)}

/* ---------- Avant / après : les jetons ---------- */
.tok{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%}
@media (max-width:640px){.tok{grid-template-columns:1fr}}
.tok__col{background:#fff;border:1px solid var(--line2);border-radius:var(--r-md);padding:20px 22px;box-shadow:var(--sh-1)}
.tok__col--ai{background:var(--ink);color:var(--dink);border-color:var(--ink)}
.tok__lbl{display:block;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.tok__col--ai .tok__lbl{color:var(--dink3)}
.tok p{font-size:14.5px;line-height:1.7;color:var(--ink2)}
.tok__col--ai p{color:var(--dink2)}
.tok mark{background:var(--soft2);color:var(--ink);padding:1px 5px;border-radius:5px;font-weight:500}
.tok code{font-family:var(--mono);font-size:.86em;background:rgba(255,255,255,.14);color:var(--dink);padding:2px 7px;border-radius:6px;white-space:nowrap}
.tok__cap{grid-column:1/-1;font-size:12.5px;color:var(--ink3);line-height:1.5}

/* ---------- Trajet d'un document (nœuds enchaînés, bande sombre) ---------- */
.flow{display:grid;gap:0;position:relative;max-width:760px;margin:0 auto}
.flow__node{background:var(--dcard);border:1px solid var(--dline2);border-radius:var(--r-md);padding:20px 22px;position:relative;transition:border-color .3s,box-shadow .3s}
.flow__node.is-on{border-color:rgba(245,245,247,.55);box-shadow:0 0 0 4px rgba(245,245,247,.08)}
.flow__node>b{display:block;font-size:16.5px;letter-spacing:-.01em}
.flow__node>p{font-size:14.5px;color:var(--dink2);margin-top:5px;line-height:1.55}
.flow__node .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.flow__node .chip{font-size:12.5px;padding:4px 10px;white-space:normal}
.flow__link{height:34px;width:2px;background:var(--dline2);margin:0 auto;position:relative;overflow:visible}
.flow__pulse{position:absolute;left:50%;top:0;width:8px;height:8px;border-radius:50%;background:var(--acc);transform:translate(-50%,-50%);opacity:0;box-shadow:0 0 12px rgba(0,113,227,.8)}
.flow.is-live .flow__pulse{animation:sxPulseDown 1.2s linear infinite}
@keyframes sxPulseDown{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
@media (prefers-reduced-motion:reduce){.flow.is-live .flow__pulse{animation:none;opacity:0}}
.flow__reveal p{font-size:14.5px;line-height:1.55;color:var(--dink2)}
.dk .card--note{background:transparent;border-color:var(--dline2)}
.dk .card--note p{color:var(--dink2)}

/* ---------- Laboratoires dans le système v8 ---------- */
.sx{padding:clamp(20px,3vw,30px)}
.sx__btn--acc,.dk .sx__btn--acc{background:var(--acc)}
.sx__btn--acc:hover{background:var(--acc-ink)}
.sx-scale__opt[aria-pressed="true"],.sx-cert__opt[aria-pressed="true"]{background:var(--ink);color:#fff}
.sx__note{color:var(--ink2)}
.sx+.sx{margin-top:24px}
.sx-seal__lbl,.sx-scale__lbl{color:var(--ink2)}
.sx-lock__sub,.sx-erase__sub,.sx-seal__meta,.sx-scale__cap,.sx-chain__seal span,.sx-erase__note{color:var(--ink2)}
.sx-cert__panel p{color:var(--ink2)}
.sx-erase__side h4{font-size:15px}
.sx-scale__num em{color:var(--ink3);font-weight:500}
.story .sx{width:100%}
.labs{max-width:960px;margin:0 auto}
.labs .sx+.sx{margin-top:28px}

/* ---------- Limites : lignes clés/valeurs ---------- */
.rows--w{max-width:960px}
.rows--w .row{grid-template-columns:240px 1fr}
@media (max-width:640px){.rows--w .row{grid-template-columns:1fr}}

/* ---------- Dossier sécurité ---------- */
.pack{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--line2);border-radius:var(--r-xl);padding:clamp(24px,4vw,40px);box-shadow:var(--sh-1)}
.pack ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin:18px 0 26px}
.pack li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--ink2)}
.pack li svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--ink)}
@media (max-width:600px){.pack ul{grid-template-columns:1fr}}
.pack .btn{width:100%}