/* Lorne & Vale, laboratoires de la page securite.
   Prefixe sx- pour ne rien percuter dans site.css.
   Chaque module herite des tokens du site: memes rayons, memes accents,
   memes regles de mouvement. prefers-reduced-motion coupe toute animation. */

/* ---------- socle commun ---------- */
.sx{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);
  box-shadow:var(--shadow-md);padding:28px;overflow:hidden}
.dk .sx{background:var(--dcard);border-color:var(--dline2);box-shadow:var(--dshadow)}
.sx__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.sx__title{font-size:17px;font-weight:600;letter-spacing:-.01em}
.sx__live{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink2);
  border:1px solid var(--line);border-radius:var(--pill);padding:4px 11px}
.dk .sx__live{color:var(--dink2);border-color:var(--dline)}
.sx__live i{width:7px;height:7px;border-radius:50%;background:var(--good);display:inline-block}
@media (prefers-reduced-motion: no-preference){
  .sx__live i{animation:sxPulse 2.2s ease-in-out infinite}
  @keyframes sxPulse{0%,100%{opacity:1}50%{opacity:.35}}
}
.sx__note{font-size:12.5px;line-height:1.55;color:var(--ink3);margin-top:16px}
.dk .sx__note{color:var(--dink3)}
.sx__btn{appearance:none;border:1px solid var(--line);background:var(--bg);color:var(--ink);
  border-radius:var(--pill);padding:9px 18px;font:inherit;font-size:14px;font-weight:500;cursor:pointer;
  transition:transform .15s ease,border-color .15s ease}
.sx__btn:hover{border-color:var(--ink3)}
.sx__btn:focus-visible{outline:2px solid var(--acc1);outline-offset:2px}
.sx__btn:active{transform:scale(.98)}
.sx__btn--acc{background:var(--accg);border:none;color:#fff}
.dk .sx__btn{background:transparent;border-color:var(--dline);color:var(--dink)}
.dk .sx__btn--acc{background:var(--accg);border:none;color:#fff}
.sx__btn[disabled]{opacity:.45;cursor:default}
.sx__row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sx__mono{font-family:var(--mono);font-size:12.5px;line-height:1.7;word-break:break-all}

/* ---------- 1. sceller un secret ---------- */
.sx-seal__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:760px){.sx-seal__grid{grid-template-columns:1fr}}
.sx-seal__pane{border:1px solid var(--line2);border-radius:var(--r-md);padding:18px;min-height:170px;
  display:flex;flex-direction:column;gap:10px;position:relative}
.dk .sx-seal__pane{border-color:var(--dline2)}
.sx-seal__lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3)}
.dk .sx-seal__lbl{color:var(--dink3)}
.sx-seal__in{width:100%;flex:1;border:none;background:transparent;color:inherit;font:inherit;
  font-size:15px;line-height:1.6;resize:none;outline:none;min-height:84px}
.sx-seal__ct{flex:1;color:var(--ink2);min-height:84px;
  mask-image:linear-gradient(180deg,#000 62%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent)}
.dk .sx-seal__ct{color:var(--dink2)}
.sx-seal__badge{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;border-radius:var(--pill);padding:4px 10px;
  background:rgba(49,162,76,.12);color:var(--good)}
.sx-seal__badge.is-locked{background:rgba(10,132,255,.12);color:var(--acc1)}
.sx-seal__badge.is-bad{background:rgba(224,64,46,.12);color:var(--hot)}
.sx-seal__badge svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sx-seal__meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink3)}
.dk .sx-seal__meta{color:var(--dink3)}
.sx-seal__out{font-size:14.5px;line-height:1.6;min-height:22px}
.sx-seal__out.is-bad{color:var(--hot);font-weight:500}
.sx-seal__out.is-good{color:var(--good);font-weight:500}
@media (prefers-reduced-motion: no-preference){
  .sx-seal__pane.is-flash{animation:sxFlash .5s ease}
  @keyframes sxFlash{0%{border-color:var(--acc1)}100%{border-color:var(--line2)}}
}

/* ---------- 2. les deux serrures ---------- */
.sx-locks{display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:center}
@media (max-width:760px){.sx-locks{grid-template-columns:1fr}}
.sx-locks__doc{position:relative;margin:0 auto;width:150px}
.sx-locks__doc svg{width:100%;height:auto;display:block}
.sx-locks__doc .sx-doc-body{fill:var(--soft);stroke:var(--line);stroke-width:1.4}
.dk .sx-locks__doc .sx-doc-body{fill:var(--dsoft);stroke:var(--dline)}
.sx-locks__doc .sx-doc-line{stroke:var(--ink3);stroke-width:2;stroke-linecap:round}
.sx-locks__state{margin-top:12px;text-align:center;font-size:13.5px;font-weight:600}
.sx-locks__state.is-shut{color:var(--good)}
.sx-locks__state.is-open{color:var(--hot)}
.sx-lock{border:1px solid var(--line2);border-radius:var(--r-md);padding:16px 18px;display:flex;
  gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;transition:opacity .3s ease}
.dk .sx-lock{border-color:var(--dline2)}
.sx-lock+.sx-lock{margin-top:12px}
.sx-lock__id{display:flex;gap:12px;align-items:center;min-width:0}
.sx-lock__ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:rgba(10,132,255,.1)}
.sx-lock__ic svg{width:17px;height:17px;stroke:var(--acc1);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sx-lock--pq .sx-lock__ic{background:rgba(94,92,230,.12)}
.sx-lock--pq .sx-lock__ic svg{stroke:var(--acc2)}
.sx-lock__name{font-weight:600;font-size:14.5px}
.sx-lock__sub{font-size:12.5px;color:var(--ink3)}
.dk .sx-lock__sub{color:var(--dink3)}
.sx-lock.is-broken{opacity:.5}
.sx-lock.is-broken .sx-lock__ic{background:rgba(224,64,46,.12)}
.sx-lock.is-broken .sx-lock__ic svg{stroke:var(--hot)}
.sx-lock__tag{font-size:11.5px;font-weight:600;border-radius:var(--pill);padding:4px 10px;
  background:rgba(49,162,76,.12);color:var(--good)}
.sx-lock.is-broken .sx-lock__tag{background:rgba(224,64,46,.12);color:var(--hot)}
.sx-locks__verdict{margin-top:16px;font-size:14px;line-height:1.6}

/* ---------- 3. chaine d'audit ---------- */
.sx-chain__list{display:flex;flex-direction:column}
.sx-entry{display:grid;grid-template-columns:22px 1fr auto;gap:0 14px;align-items:stretch}
.sx-entry__rail{position:relative;display:flex;justify-content:center}
.sx-entry__dot{width:10px;height:10px;border-radius:50%;background:var(--good);margin-top:22px;z-index:1;transition:background .25s ease}
.sx-entry__rail::before{content:"";position:absolute;top:30px;bottom:-4px;width:2px;background:var(--line2);transition:background .25s ease}
.dk .sx-entry__rail::before{background:var(--dline2)}
.sx-entry:last-child .sx-entry__rail::before{display:none}
.sx-entry__card{border:1px solid var(--line2);border-radius:var(--r-md);padding:13px 16px;margin:6px 0;
  display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;transition:border-color .25s ease}
.dk .sx-entry__card{border-color:var(--dline2)}
.sx-entry__what{font-size:14px;font-weight:500;min-width:0}
.sx-entry__hash{font-family:var(--mono);font-size:12px;color:var(--ink3);transition:color .25s ease}
.dk .sx-entry__hash{color:var(--dink3)}
.sx-entry__act{align-self:center}
.sx-entry__tamper{appearance:none;border:none;background:none;color:var(--ink3);font:inherit;font-size:12.5px;
  cursor:pointer;padding:6px 10px;border-radius:var(--pill);transition:color .15s ease,background .15s ease}
.sx-entry__tamper:hover{color:var(--hot);background:rgba(224,64,46,.08)}
.sx-entry__tamper:focus-visible{outline:2px solid var(--acc1);outline-offset:2px}
.sx-entry.is-tampered .sx-entry__card{border-color:var(--hot)}
.sx-entry.is-tampered .sx-entry__what{color:var(--hot)}
.sx-entry.is-broken .sx-entry__dot{background:var(--hot)}
.sx-entry.is-broken .sx-entry__hash{color:var(--hot)}
.sx-entry.is-broken .sx-entry__rail::before{background:rgba(224,64,46,.4)}
.sx-chain__seal{margin-top:8px;display:flex;gap:12px;align-items:center;border:1px dashed var(--line);
  border-radius:var(--r-md);padding:14px 16px;transition:border-color .25s ease}
.dk .sx-chain__seal{border-color:var(--dline)}
.sx-chain__seal svg{width:20px;height:20px;flex:none;stroke:var(--good);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s ease}
.sx-chain__seal b{font-size:13.5px}
.sx-chain__seal span{font-size:12.5px;color:var(--ink3)}
.dk .sx-chain__seal span{color:var(--dink3)}
.sx-chain__seal.is-broken{border-color:var(--hot)}
.sx-chain__seal.is-broken svg{stroke:var(--hot)}
.sx-chain__seal.is-broken b{color:var(--hot)}

/* ---------- 4. effacement compare ---------- */
.sx-erase{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:760px){.sx-erase{grid-template-columns:1fr}}
.sx-erase__side{border:1px solid var(--line2);border-radius:var(--r-md);padding:18px}
.dk .sx-erase__side{border-color:var(--dline2)}
.sx-erase__side h4{font-size:14.5px;font-weight:600;margin:0 0 4px}
.sx-erase__sub{font-size:12.5px;color:var(--ink3);margin-bottom:14px}
.dk .sx-erase__sub{color:var(--dink3)}
.sx-file{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);
  border:1px solid var(--line2);margin-top:8px;font-size:13px;transition:opacity .3s ease,border-color .3s ease}
.dk .sx-file{border-color:var(--dline2)}
.sx-file svg{width:15px;height:15px;flex:none;stroke:var(--ink3);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s ease}
.sx-file__st{margin-left:auto;font-size:11.5px;font-weight:600;border-radius:var(--pill);padding:3px 9px;
  background:rgba(217,147,11,.13);color:var(--warm);transition:background .3s ease,color .3s ease}
.sx-file.is-gone{opacity:.35}
.sx-file.is-gone .sx-file__st{background:var(--line2);color:var(--ink3)}
.sx-file.is-sealed .sx-file__st{background:rgba(49,162,76,.12);color:var(--good)}
.sx-file.is-sealed svg{stroke:var(--good)}
.sx-erase__note{margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--ink3);min-height:38px}
.dk .sx-erase__note{color:var(--dink3)}
.sx-erase__note b{color:var(--ink)}
.dk .sx-erase__note b{color:var(--dink)}

/* fallback sans JS ni WebCrypto: les laboratoires s'effacent proprement */
html:not(.js) .sx--needs-js{display:none}
.sx.is-unsupported{display:none}

/* crochet JS des boutons de casse; le style vient de sx__btn */
.sx-lock__break{}

/* ---------- 5. l'echelle de l'impossible ---------- */
.sx-scale__ctl{margin-bottom:6px}
.sx-scale__lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);display:block;margin:14px 0 8px}
.dk .sx-scale__lbl{color:var(--dink3)}
.sx-scale__seg{display:flex;gap:8px;flex-wrap:wrap}
.sx-scale__opt,.sx-cert__opt{appearance:none;border:1px solid var(--line);background:var(--bg);color:var(--ink);
  border-radius:var(--pill);padding:8px 15px;font:inherit;font-size:13.5px;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.dk .sx-scale__opt,.dk .sx-cert__opt{background:transparent;border-color:var(--dline);color:var(--dink)}
.sx-scale__opt[aria-pressed="true"],.sx-cert__opt[aria-pressed="true"]{background:var(--accg);border-color:transparent;color:#fff}
.sx-scale__opt:focus-visible,.sx-cert__opt:focus-visible{outline:2px solid var(--acc1);outline-offset:2px}
.sx-scale__bars{margin-top:22px;display:flex;flex-direction:column;gap:16px}
.sx-scale__bar b{font-size:13px;display:block;margin-bottom:7px}
.sx-scale__digits{display:flex;flex-wrap:wrap;gap:3px}
.sx-scale__digits i{width:9px;height:14px;border-radius:3px;background:var(--line2);transition:background .3s ease}
.dk .sx-scale__digits i{background:var(--dline2)}
.sx-scale__digits i.is-on{background:var(--acc1)}
.sx-scale__digits--all i{background:var(--acc2)}
.sx-scale__cap{font-size:12px;color:var(--ink3);margin-top:5px}
.dk .sx-scale__cap{color:var(--dink3)}
.sx-scale__pct{margin-top:20px;padding:16px 18px;border:1px solid var(--line2);border-radius:var(--r-md)}
.dk .sx-scale__pct{border-color:var(--dline2)}
.sx-scale__pct b{font-size:13px;display:block;margin-bottom:8px}
.sx-scale__num{font-family:var(--mono);font-size:15px;line-height:1.75;word-break:break-all;color:var(--ink)}
.dk .sx-scale__num{color:var(--dink)}
.sx-scale__num em{font-style:normal;color:var(--hot);font-weight:700}
.sx-scale__verdict{margin-top:14px;font-size:14.5px;line-height:1.65}
.sx-scale__q{margin-top:18px;border-top:1px solid var(--line2);padding-top:16px}
.dk .sx-scale__q{border-color:var(--dline2)}
.sx-scale__qbody{margin-top:12px;font-size:14px;line-height:1.65}
.sx-scale__qbody b{color:var(--acc2)}

/* ---------- 6. le trajet d'un document: "et si cette etape cedait?" ---------- */
.flow__reveal-q{margin-top:14px;padding-top:12px;border-top:1px solid var(--dline2)}
.flow__reveal-btn{appearance:none;border:none;background:none;color:var(--dink2);font:inherit;
  font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:2px 0}
.flow__reveal-btn:hover{color:var(--dink)}
.flow__reveal-btn:focus-visible{outline:2px solid var(--acc1);outline-offset:3px;border-radius:4px}
.flow__reveal-btn svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.flow__reveal-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.flow__reveal{margin-top:10px}
.flow__reveal p b{display:inline;font-size:inherit;font-weight:600;letter-spacing:normal;color:var(--dink)}
@media (prefers-reduced-motion: reduce){.flow__reveal-btn svg{transition:none}}

/* ---------- 7. quelles certifications, et pourquoi ---------- */
.sx-cert__row{display:flex;gap:8px;flex-wrap:wrap}
.sx-cert__detail{margin-top:18px;border:1px solid var(--line2);border-radius:var(--r-md);
  padding:20px 22px;min-height:150px}
.dk .sx-cert__detail{border-color:var(--dline2)}
.sx-cert__name{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:10px}
.sx-cert__panel p{font-size:14.5px;line-height:1.6;color:var(--ink2)}
.dk .sx-cert__panel p{color:var(--dink2)}
.sx-cert__panel p+p{margin-top:10px}
.sx-cert__lbl{display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink3);margin-bottom:3px}
.dk .sx-cert__lbl{color:var(--dink3)}

/* ---------- navigation de chapitres ---------- */
.sxnav{position:sticky;top:var(--nav-h);z-index:40;background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--line2)}
.sxnav__in{max-width:var(--wrap);margin:0 auto;display:flex;gap:8px;overflow-x:auto;
  padding:9px max(22px,env(safe-area-inset-right)) 9px max(22px,env(safe-area-inset-left));
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sxnav__in::-webkit-scrollbar{display:none}
.sxnav__a{flex:none;white-space:nowrap;font-size:13px;font-weight:500;color:var(--ink2);
  border:1px solid var(--line);border-radius:var(--pill);padding:7px 14px;min-height:34px;
  display:inline-flex;align-items:center;transition:color .15s ease,border-color .15s ease,background .15s ease}
.sxnav__a:hover{color:var(--ink);border-color:var(--ink3)}
.sxnav__a:focus-visible{outline:2px solid var(--acc1);outline-offset:2px}
.sxnav__a.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
[id^="sx-sec-"],#pack{scroll-margin-top:calc(var(--nav-h) + 58px)}

/* ---------- ergonomie tactile ---------- */
.sx__btn,.sx-scale__opt,.sx-entry__tamper,.sxnav__a,.sx-cert__opt,.flow__reveal-btn{touch-action:manipulation}
@media (max-width:760px){
  .sx{padding:18px;border-radius:var(--r-md)}
  .sx__btn{min-height:46px;padding:11px 17px;font-size:15px}
  .sx__row{gap:9px}
  .sx__row .sx__btn{flex:1 1 auto;justify-content:center;text-align:center}
  .sx-scale__opt,.sx-cert__opt{min-height:46px;flex:1 1 46%;text-align:center;justify-content:center;display:inline-flex;align-items:center;font-size:14px}
  .flow__reveal-btn{min-height:44px;padding:9px 0}
  /* 16px empeche le zoom automatique d'iOS a la prise de focus */
  .sx-seal__in{font-size:16px}
  .sx-seal__ct{max-height:150px;overflow-y:auto}
  .sx-entry{grid-template-columns:16px 1fr}
  .sx-entry__card{flex-direction:column;align-items:flex-start;gap:5px;padding:12px 14px}
  .sx-entry__act{grid-column:2;justify-self:end;margin-top:-4px;margin-bottom:6px}
  .sx-entry__tamper{min-height:40px;padding:8px 14px;color:var(--hot);background:rgba(224,64,46,.07);border-radius:var(--pill)}
  .sx-entry__dot{margin-top:18px}
  .sx-entry__rail::before{top:26px}
  .sx-scale__digits i{width:7px;height:12px}
  .sx-locks{gap:18px}
  .sx-locks__doc{width:110px}
  .sx-lock{padding:14px}
  .sx-lock .sx__row{width:100%;justify-content:space-between}
}

/* ---------- bande signature "20 years / post-quantum", page d'accueil ---------- */
.lv-horizon{position:relative;overflow:hidden}
.lv-horizon::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(245,245,247,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,245,247,.06) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 70% 100% at 50% 0%, #000 40%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 70% 100% at 50% 0%, #000 40%, transparent 85%)}
.lv-horizon__row{position:relative;display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:40px;align-items:start}
@media (max-width:900px){.lv-horizon__row{grid-template-columns:1fr}}
.lv-horizon__lede{max-width:380px}
.lv-horizon__marks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:760px){.lv-horizon__marks{grid-template-columns:1fr}}
.lv-horizon__mark{display:block;border:1px solid var(--dline2);border-radius:var(--r-md);padding:16px 18px;
  transition:border-color .2s ease,transform .2s ease;color:inherit}
.lv-horizon__mark:hover{border-color:rgba(245,245,247,.5);transform:translateY(-2px)}
.lv-horizon__mark b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  background:var(--accg);-webkit-background-clip:text;background-clip:text;color:transparent}
.lv-horizon__mark span{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--dink3)}
.lv-horizon__more{position:relative;display:inline-flex;margin-top:28px;font-size:13.5px}

/* ---------- chapitres pleine largeur, page securite ---------- */
/* Le conteneur utilise tout l'ecran; un paragraphe de prose garde une
   largeur de lecture confortable a l'interieur. Titres, grilles de cartes
   et laboratoires interactifs, eux, profitent pleinement de l'espace: ils
   ne sont pas des <p>, donc cette regle ne les touche pas. */
.wrap:not(.wrap--n) > p.rv,
.wrap:not(.wrap--n) > p.lead{max-width:760px}
.wrap:not(.wrap--n) .sec-head:not(.sec-head--left) > p.lead{max-width:640px;margin-left:auto;margin-right:auto}

/* ---------- reseau cristallin: signature visuelle du hero securite ---------- */
.lv-lat{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lv-lat__e{stroke:rgba(245,245,247,.09);stroke-width:1}
.lv-lat__p{fill:rgba(245,245,247,.22)}
.lv-lat__pulse{fill:none;stroke:url(#lv-lat-grad);stroke-width:2.4;stroke-linecap:round;
  stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(10,132,255,.65))}
@media (prefers-reduced-motion: no-preference){
  .lv-lat__pulse{stroke-dasharray:26 900;stroke-dashoffset:900;animation:lvLatFlow 5.4s cubic-bezier(.4,0,.2,1) infinite}
  @keyframes lvLatFlow{
    0%{stroke-dashoffset:900;opacity:0}
    6%{opacity:1}
    55%{stroke-dashoffset:0;opacity:1}
    68%{opacity:0}
    100%{opacity:0;stroke-dashoffset:0}
  }
}
@media (prefers-reduced-motion: reduce){.lv-lat__pulse{opacity:0}}

.lv-securehero{position:relative;overflow:hidden;padding-top:88px;padding-bottom:64px}
.lv-securehero .wrap{position:relative;z-index:2}
.lv-securehero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 60% 90% at 50% 8%, transparent 0%, transparent 35%, var(--dbg) 78%),
             linear-gradient(180deg, transparent 55%, var(--dbg) 100%)}
.lv-securehero__kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  letter-spacing:.04em;color:var(--dink2);border:1px solid var(--dline);border-radius:var(--pill);
  padding:6px 14px 6px 10px;margin-bottom:22px}
.lv-securehero__kicker i{width:6px;height:6px;border-radius:50%;background:var(--acc1);
  box-shadow:0 0 8px var(--acc1);flex:none}
.lv-securehero h1{font-size:clamp(40px,6.2vw,76px);line-height:1.03}
.lv-securehero .lead{max-width:700px;margin-left:auto;margin-right:auto;font-size:clamp(16px,1.6vw,19px)}

/* ---------- bande "en un coup d'oeil" ---------- */
.lv-glance{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--dline2);
  border:1px solid var(--dline2);border-radius:var(--r-lg);overflow:hidden;margin-top:44px}
@media (max-width:860px){.lv-glance{grid-template-columns:repeat(2,1fr)}}
.lv-glance__cell{background:var(--dbg);padding:22px 20px;text-align:left}
.lv-glance__cell b{display:block;font-family:var(--mono);font-size:clamp(16px,1.9vw,21px);
  font-weight:600;letter-spacing:-.01em;background:var(--accg);-webkit-background-clip:text;
  background-clip:text;color:transparent;line-height:1.25}
.lv-glance__cell span{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--dink3)}

/* ---------- telephone: moins compact, visuels adaptes au format portrait ---------- */
@media (max-width:760px){
  /* Le ratio serre qui flatte un grand ecran devient illisible sur trois
     lignes de telephone: les lignes se touchent presque. */
  .lv-securehero h1.d1{line-height:1.16}
  .d2{line-height:1.16}

  /* Bande "en un coup d'oeil": le texte de description etait trop petit
     pour une lecture confortable au telephone, et les cellules trop serrees. */
  .lv-glance{grid-template-columns:1fr;gap:1px}
  .lv-glance__cell{padding:20px 18px}
  .lv-glance__cell b{font-size:18px}
  .lv-glance__cell span{font-size:14.5px;line-height:1.55;margin-top:8px}

  /* Reseau cristallin: sans plafond, il s'etire sur toute la hauteur d'un
     hero empile verticalement (les elements du hero prennent facilement
     1000px en colonne unique), et ne montre plus qu'une fine tranche
     verticale du motif, peu lisible comme reseau. Le plafonner le garde
     comme texture d'ambiance en haut du hero, ou il a sa place. */
  .lv-lat{max-height:420px}
  .lv-securehero{padding-top:52px;padding-bottom:36px}
  .lv-securehero__kicker{font-size:11.5px;padding:6px 12px 6px 9px}
  .lv-securehero .lead{font-size:17px;line-height:1.6;max-width:none}

  /* Respiration generale de la prose et des cartes: la meme regle de
     largeur de lecture des chapitres larges, un peu plus d'air en dessous
     de chaque paragraphe et de chaque carte au format telephone. */
  .wrap:not(.wrap--n) > p.rv{line-height:1.65}
  .card p{font-size:15px;line-height:1.6}
  .card{padding:22px 20px}
}

/* --- prose sur toute la largeur du conteneur --- */
.wrap:not(.wrap--n) > p.rv,
.wrap:not(.wrap--n) > p.lead{max-width:none;margin-inline:0}
.wrap:not(.wrap--n) > div.rv[style]{max-width:none;margin-inline:0}
.sec-head--left{margin-inline:0}