/* ==========================================================================
   NORYVA — feuille de style
   Le site est une scene unique : une couche .stage fixe porte les objets 3D,
   les sections .act defilent par-dessus et pilotent la camera.
   ========================================================================== */
@import url("../fonts/fonts.css");

:root{
  /* --- identite de marque -------------------------------------------- */
  --night:#08070a;
  --night-2:#0d0c11;
  --ink:#f6f4f1;
  --muted:rgba(246,244,241,.56);
  --faint:rgba(246,244,241,.30);
  --line:rgba(246,244,241,.11);
  --gold:#c4985c;
  --gold-lt:#e9ca9a;
  --plasma:#8b4ad6;
  /* accent courant : pilote par le JS selon la reference affichee */
  --accent:#8b4ad6;
  --ease:cubic-bezier(.22,1,.36,1);
  --nav:68px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--night);color:var(--ink);
  font:400 16px/1.65 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:Outfit,Inter,sans-serif;font-weight:200;line-height:1.02;
  letter-spacing:.005em}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;line-height:1.6}
.gold{color:var(--gold-lt)}
.acc{color:var(--accent)}

/* ==========================================================================
   1. ATMOSPHERE — brume, lumiere volumetrique, grain
   ========================================================================== */
.stage{position:fixed;inset:0;z-index:1;overflow:hidden;perspective:1500px;
  perspective-origin:50% 46%;pointer-events:none}
.atmos{position:absolute;inset:0}
/* ATMOSPHÈRE — POURQUOI IL N'Y A PLUS UN SEUL `filter:blur()` ICI.
   Mesuré sur le site complet, à l'arrêt, sans la moindre interaction :
   1,2 image/s, 9,39 s de CPU en 6 s de temps réel, dont 0,06 s de JavaScript.
   Le script ne faisait rien. Tout partait dans la rasterisation.

   La cause : cinq calques flous, ~5 mégapixels au total, avec des rayons de
   48 a 90 px, deux d'entre eux en `mix-blend-mode:screen`. Un flou de 90 px
   est une convolution enorme, et un blend force le compositeur a relire le
   fond. Le tout etant anime a chaque image, la scene entiere etait
   re-rasterisee en permanence — y compris quand la page ne bougeait pas.

   Ce qui les remplace ne coute RIEN : un degrade radial est DEJA flou. Le
   flouter n'ajoutait presque rien a l'ecran et coutait tout au GPU. On elargit
   donc les butees du degrade, et on obtient la meme brume.
   PRODUIT > MARQUE > EFFETS D'ENVIRONNEMENT : c'est ce budget-la qu'on rend
   au produit, sous forme de resolution. */
.fog{position:absolute;border-radius:50%;will-change:transform}
/* bloom principal : derriere le produit, cote droit */
.fog-1{width:88vw;height:88vw;right:-22vw;top:-22vw;
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--accent) 62%,transparent) 0%,
    color-mix(in srgb,var(--accent) 26%,transparent) 34%,
    color-mix(in srgb,var(--accent) 7%,transparent) 62%,transparent 88%);
  opacity:.34}
.fog-2{width:84vw;height:84vw;left:-28vw;bottom:-30vw;
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--accent) 40%,transparent) 0%,
    color-mix(in srgb,var(--accent) 17%,transparent) 38%,
    color-mix(in srgb,var(--accent) 5%,transparent) 66%,transparent 90%);
  opacity:.28}
.fog-3{width:150vw;height:64vw;left:-25vw;top:26%;
  background:radial-gradient(closest-side,
    rgba(255,248,236,.11) 0%,rgba(255,248,236,.05) 40%,
    rgba(255,248,236,.015) 68%,transparent 90%);
  opacity:.46}
/* Le faisceau : le flou ne servait qu'a adoucir ses bords LATERAUX — le
   degrade s'occupait deja du haut vers le bas. Un masque horizontal fait
   exactement le meme travail pour une fraction du cout. `screen` sur un fond
   quasi noir revient a une composition alpha ordinaire : on le retire. */
.beam{position:absolute;left:50%;top:-30vh;width:52vw;height:150vh;
  transform:translateX(-50%) rotate(9deg);
  background:linear-gradient(to bottom,
    color-mix(in srgb,var(--accent) 46%,transparent) 0%,
    color-mix(in srgb,var(--accent) 18%,transparent) 34%,transparent 68%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 26%,#000 74%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 26%,#000 74%,transparent 100%);
  opacity:.46;will-change:transform}
#dust{position:absolute;inset:0;opacity:.55}
/* Le grain couvrait tout l'ecran en `mix-blend-mode:overlay` : un melange
   plein cadre a refaire des que quoi que ce soit bouge derriere. En alpha
   simple, avec un bruit plus sombre et une opacite plus basse, il tient le
   meme role de texture pour un cout de composition ordinaire. */
.grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.5'/></svg>")}
.vign{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(130% 96% at 50% 44%,transparent 54%,rgba(0,0,0,.62) 100%)}

/* ==========================================================================
   2. OBJETS DE LA SCENE
   ========================================================================== */
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.obj{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  will-change:transform,opacity;pointer-events:none}
#penGlow{width:min(64vw,780px);height:min(64vw,780px);border-radius:50%;
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--accent) 78%,transparent) 0%,
    color-mix(in srgb,var(--accent) 32%,transparent) 32%,
    color-mix(in srgb,var(--accent) 9%,transparent) 60%,transparent 86%);}

/* ==========================================================================
   3. INTERFACE FIXE
   ========================================================================== */
header{position:fixed;top:0;left:0;right:0;height:var(--nav);z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(18px,3.4vw,44px)}
.lockup{position:absolute;left:50%;transform:translateX(-50%);display:flex;
  align-items:center;gap:11px}
.lockup svg{width:26px;height:26px}
.lockup b{font-family:Outfit;font-weight:300;font-size:15px;letter-spacing:.36em;
  text-transform:uppercase;padding-left:.36em}
/* Le nom se compose d'un seul mot, dans l'or de la marque — comme le logo
   officiel. Le style à deux teintes de l'ancienne marque n'a plus d'objet. */
.lockup b{color:var(--gold-lt)}
.lockup b i{font-style:normal;color:var(--gold)}
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);
  border-radius:999px;padding:11px 22px;transition:.4s var(--ease);
  font-family:"JetBrains Mono";font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.btn:hover{background:var(--ink);color:var(--night);border-color:var(--ink)}
.btn-acc{border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  background:color-mix(in srgb,var(--accent) 15%,transparent)}
.btn-acc:hover{background:var(--accent);border-color:var(--accent);color:#fff}
#bar{position:fixed;top:0;left:0;height:2px;width:0;z-index:35;
  background:linear-gradient(90deg,transparent,var(--accent));box-shadow:0 0 16px var(--accent)}

/* pastilles de reference, colonne de droite */
#dots{position:fixed;right:clamp(12px,2vw,26px);top:50%;transform:translateY(-50%);
  z-index:30;display:grid;gap:12px}
#dots button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;transition:.45s var(--ease);opacity:0}
#dots button i{width:5px;height:5px;border-radius:50%;background:var(--faint);
  transition:.45s var(--ease)}
#dots.on button{opacity:1}
#dots button.sel{border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
#dots button.sel i{background:var(--accent);width:8px;height:8px}

/* ==========================================================================
   4. CONTENU
   ========================================================================== */
.content{position:relative;z-index:3}
.act{position:relative;min-height:100vh;padding:0 clamp(20px,5vw,90px)}
/* le bloc de texte reste tenu pendant toute la traversee de l'acte :
   la camera bouge, le cadrage du texte ne bouge pas. */
.hold{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;padding:12vh 0}
/* section longue (tableau + tuiles) : on laisse le flux normal */
.hold--flow{position:static;min-height:auto;padding:18vh 0}
#acquire .hold{padding:8vh 0}
.act--tall{min-height:230vh}
#system{min-height:520vh}
#range{min-height:340vh}
#pack{min-height:210vh}
.col{max-width:430px}
.eyebrow{color:var(--accent);margin-bottom:20px}
h1{font-size:clamp(40px,5.6vw,88px);font-weight:200;letter-spacing:-.012em;text-wrap:balance}
h2{font-size:clamp(34px,4.6vw,72px)}
h3{font-size:clamp(24px,2.5vw,38px);font-weight:300}
.lead{margin-top:22px;color:var(--muted);font-size:clamp(15px,1.25vw,18px);max-width:42ch}
.lead b{color:var(--ink);font-weight:500}
.lead--lead{color:var(--ink);font-size:clamp(17px,1.5vw,21px);margin-top:26px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px}

/* hero */
#hero{min-height:112vh}
#hero .col{max-width:none}
#hero h1{max-width:12ch}
#hero .lead{max-width:48ch}
#hero .tagline{margin-top:22px}
.tagline{margin-top:26px;color:var(--gold-lt);font-family:"JetBrains Mono";
  font-size:10px;letter-spacing:.34em;text-transform:uppercase}
.scrollcue{position:absolute;left:clamp(20px,5vw,90px);bottom:7vh;color:var(--faint);
  display:flex;align-items:center;gap:12px}
.scrollcue span{display:block;width:44px;height:1px;background:currentColor;
  transform-origin:left;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleX(.3)}50%{transform:scaleX(1)}}

/* bandeau de repères du hero : quatre faits, aucune promesse */
.trust{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  max-width:660px}
.trust li{background:rgba(12,11,16,.90);padding:15px 16px;
  display:grid;gap:4px}
.trust b{font-weight:400;font-size:13.5px}
.trust span{color:var(--muted);font-size:11.5px;line-height:1.5}

/* etapes du systeme */
.steps{display:grid;gap:26px;margin-top:34px}
.step{display:grid;grid-template-columns:34px 1fr;gap:18px;opacity:.32;
  transition:opacity .5s var(--ease)}
.step.on{opacity:1}
.step b{font-family:"JetBrains Mono";font-size:10px;letter-spacing:.16em;color:var(--accent)}
.step p{color:var(--muted);font-size:14px;margin-top:5px}

/* echange de contenu dans la fiche : animation CSS a etat final garanti
   (un fondu pilote par tween peut rester bloque si l'echange est relance) */
@keyframes swapIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.swap{animation:swapIn .5s var(--ease) both}

/* fiche produit */
.sheet{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;max-width:520px;margin-top:34px}
.sheet section{background:rgba(11,10,15,.95);padding:22px 24px}
.sheet h4{margin:0 0 9px;font-family:"JetBrains Mono";font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);font-weight:400}
.sheet p{font-size:14px;color:var(--muted)}
.sheet strong{color:var(--ink);font-weight:500}

/* niveau de preuve */
.evid{display:flex;align-items:center;gap:10px;margin-top:12px}
.evid i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.10)}
.evid i.f{background:var(--accent)}
.evid b{font-family:"JetBrains Mono";font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}

/* grilles diverses */
.grid3{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  margin-top:40px;max-width:900px}
.tile{border:1px solid var(--line);border-radius:14px;padding:24px 22px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008))}
.tile h4{margin:0 0 8px;font-family:Outfit;font-weight:300;font-size:19px}
.tile p{font-size:13px;color:var(--muted)}
.tile .mono{color:var(--accent);margin-bottom:14px}

/* tableau de lot / COA */
.coa{width:100%;max-width:760px;margin-top:34px;border-collapse:collapse;font-size:13.5px}
.coa th,.coa td{text-align:left;padding:15px 14px;border-bottom:1px solid var(--line)}
.coa th{font-family:"JetBrains Mono";font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);font-weight:400}
.coa td:last-child{color:var(--faint);font-family:"JetBrains Mono";font-size:11px}

/* footer */
footer{position:relative;z-index:3;border-top:1px solid var(--line);
  padding:70px clamp(20px,5vw,90px) 46px;background:var(--night)}
.fgrid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  max-width:1100px}
footer p,footer li{color:var(--muted);font-size:13px}
footer ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.legal{margin-top:52px;padding-top:26px;border-top:1px solid var(--line);
  color:var(--faint);font-size:11.5px;max-width:780px;line-height:1.75}

/* ==========================================================================
   5. MODE REVUE — balise tout ce qui doit passer au contrôle juridique
   ========================================================================== */
#review{position:fixed;right:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:36;
  display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;
  padding:9px 15px;background:rgba(11,10,15,.93);
  font-family:"JetBrains Mono";font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
#review i{width:7px;height:7px;border-radius:50%;background:var(--faint);transition:.3s}
body.review #review i{background:#ffb43c;box-shadow:0 0 10px #ffb43c}
body.review [data-review]{outline:1px dashed rgba(255,180,60,.62);outline-offset:7px;
  border-radius:3px}
body.review [data-review]::after{content:attr(data-review);position:absolute;
  left:0;top:100%;margin-top:9px;z-index:39;
  font:400 9px/1 "JetBrains Mono";letter-spacing:.13em;text-transform:uppercase;
  color:#100c04;background:#ffb43c;padding:5px 7px;border-radius:3px;white-space:nowrap}
[data-review]{position:relative}

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  /* le texte reste tenu, mais compacte pour tenir dans un ecran */
  .hold{padding:9vh 0}
  .hold--flow{padding:13vh 0}
  /* dans la gamme : produit en haut, fiche calee en bas */
  #range .hold{justify-content:flex-end;padding-bottom:12vh}
  .steps{gap:18px;margin-top:26px}
  .step p{font-size:13px}
  .lead{margin-top:20px}
  .cta-row{margin-top:26px}
  #dots{top:auto;bottom:14px;left:50%;right:auto;transform:translateX(-50%);
    grid-auto-flow:column;gap:9px}
  #dots button{width:28px;height:28px}
  .sheet section{padding:17px 19px}
  .sheet p{font-size:13px}
  #penSeq{width:min(52vw,240px);height:56vh}
  .vial{width:clamp(78px,20vw,130px)}
  #vialRow{gap:clamp(30px,10vw,70px)}
  #packRow img{width:min(70vw,340px)}
  .act{padding:12vh 22px}
  #dots{right:10px}
  .scrollcue{bottom:5vh}
}
@media (max-width:760px){
  .lockup b{display:none}            /* evite la collision avec le CTA */
  .btn{padding:9px 15px;font-size:9px}
}
@media (max-width:640px){
  .stage{perspective:900px}
  #penRow img{width:52px}
  h1{font-size:clamp(40px,11vw,64px)}
}

/* ==========================================================================
   7. MOUVEMENT REDUIT
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .grain,.beam{display:none}
  .scrollcue span{animation:none}
  *{transition-duration:.01ms !important}
}

/* ==========================================================================
   8. ACQUISITION — achat ponctuel / réapprovisionnement
   Volontairement sobre : deux options, pas de compte à rebours, pas de
   pastille « économisez ». L'abonnement doit rassurer, pas pousser.
   ========================================================================== */
.acq{display:grid;gap:10px;margin-top:26px;max-width:440px}
.acq-card{position:relative;display:grid;gap:6px;padding:18px 22px;cursor:pointer;
  border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  transition:border-color .4s var(--ease),background .4s var(--ease)}
.acq-card:hover{border-color:rgba(246,244,241,.24)}
.acq-card input{position:absolute;opacity:0;pointer-events:none}
.acq-card:has(input:checked){border-color:color-mix(in srgb,var(--accent) 62%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%,transparent),rgba(255,255,255,.01))}
.acq-card input:focus-visible + .acq-head{outline:2px solid var(--accent);outline-offset:4px}
.acq-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.acq-head b{font-family:Outfit;font-weight:300;font-size:20px}
.acq-head em{font-style:normal;font-family:Outfit;font-weight:300;font-size:20px;
  color:var(--ink);font-variant-numeric:tabular-nums}
.acq-sub{color:var(--muted);font-size:13.5px}
.acq-iv{display:flex;gap:7px;flex-wrap:wrap;margin-top:5px}
.acq-iv .iv{border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  font-family:"JetBrains Mono";font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);transition:.35s var(--ease)}
.acq-iv .iv.on{border-color:var(--accent);color:var(--ink);
  background:color-mix(in srgb,var(--accent) 18%,transparent)}
.acq-promise{color:var(--faint);font-size:12.5px;line-height:1.65;margin-top:4px;
  padding-top:12px;border-top:1px solid var(--line)}
.acq-go{justify-self:start;margin-top:6px}
.acq-go[disabled]{opacity:.42;cursor:not-allowed}
.acq-note{color:var(--faint);font-size:12px;line-height:1.6;max-width:42ch}
.acq--closed{border:1px solid var(--line);border-radius:16px;padding:26px 24px;
  display:grid;gap:12px;justify-items:start;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.006))}
.acq--closed .mono{color:var(--accent)}
.acq-foot{margin-top:26px;font-size:13px;color:var(--muted)}
.acq-foot a{border-bottom:1px solid var(--line);padding-bottom:2px}
.acq-foot a:hover{border-color:var(--accent);color:var(--ink)}

/* ==========================================================================
   9. MENTIONS RÉGLEMENTAIRES
   Elles ne sont pas décoratives : leur présence est décidée par le statut du
   SKU, et elles apparaissent partout où une décision d'achat se prend.
   ========================================================================== */
.warn{display:grid;gap:5px;border-radius:12px;padding:14px 16px;margin-bottom:10px;
  border:1px solid rgba(255,180,60,.30);background:rgba(255,180,60,.07)}
.warn b{font-family:"JetBrains Mono";font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#ffc978;font-weight:400}
.warn span{color:var(--muted);font-size:12.5px;line-height:1.6}
.warn--info{border-color:var(--line);background:rgba(255,255,255,.03)}
.warn--info b{color:var(--faint)}
#heroWarn .warn{max-width:520px}

/* ==========================================================================
   10. TRUST CENTER
   Un dossier, pas une page de réassurance. Ce qui manque est affiché comme
   manquant : c'est ce qui rendra crédible ce qui sera présent.
   ========================================================================== */
#trustDlg{border:1px solid var(--line);border-radius:22px;background:#0a090d;color:var(--ink);
  padding:0;width:min(1000px,calc(100vw - 28px));max-height:min(88vh,900px);overflow:hidden}
#trustDlg::backdrop{background:rgba(4,4,7,.82);backdrop-filter:blur(10px)}
.tc{display:grid;grid-template-columns:236px 1fr;max-height:inherit}
.tc-side{border-right:1px solid var(--line);padding:26px 20px;display:flex;flex-direction:column;
  gap:20px;background:linear-gradient(180deg,rgba(255,255,255,.028),transparent)}
.tc-side h3{font-size:26px}
.tc-side .mono{color:var(--accent)}
#tcNav{display:grid;gap:2px}
#tcNav button{text-align:left;padding:10px 12px;border-radius:10px;display:grid;gap:3px;
  transition:.3s var(--ease);font-size:14px}
#tcNav button em{font-style:normal;color:var(--faint);font-size:10.5px;line-height:1.4}
#tcNav button:hover{background:rgba(255,255,255,.04)}
#tcNav button.on{background:color-mix(in srgb,var(--accent) 14%,transparent);
  box-shadow:inset 2px 0 0 var(--accent)}
.tc-main{overflow-y:auto;padding:26px 30px 40px;scroll-behavior:smooth}
.tc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  margin-bottom:22px}
.tc-head h2{font-size:clamp(26px,3vw,40px)}
.tc-sec{padding-top:26px;margin-top:26px;border-top:1px solid var(--line)}
.tc-sec:first-of-type{border-top:0;margin-top:0;padding-top:0}
.tc-sec h4{margin:0 0 14px;font-family:"JetBrains Mono";font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);font-weight:400}
.tc-dl{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.tc-dl > div{background:rgba(10,9,13,.92);padding:14px 16px}
.tc-dl dt{color:var(--faint);font-size:11px;margin-bottom:5px}
.tc-dl dd{margin:0;font-size:14.5px}
.tc-empty{color:rgba(255,180,60,.72);font-family:"JetBrains Mono";font-size:11.5px}
.tc-note{margin-top:12px;color:var(--muted);font-size:12.5px;line-height:1.65;max-width:62ch}
.tc-docs{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tc-docs li{background:rgba(10,9,13,.92);padding:13px 16px;display:flex;
  justify-content:space-between;align-items:center;gap:12px;font-size:14px}
.tc-docs em{font-style:normal;color:rgba(255,180,60,.72);font-family:"JetBrains Mono";font-size:10px;
  letter-spacing:.14em;text-transform:uppercase}
.tc-tab{width:100%;border-collapse:collapse;font-size:13.5px}
.tc-tab th,.tc-tab td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.tc-tab th{font-family:"JetBrains Mono";font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);font-weight:400}
.tc-trace{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tc-trace li{display:flex;justify-content:space-between;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:14px}
.tc-trace b{font-weight:400}
.tc-qr{display:flex;align-items:center;gap:16px;margin-top:16px;padding:14px;
  border:1px solid var(--line);border-radius:12px;position:relative}
.tc-qr svg{width:88px;height:88px;color:rgba(246,244,241,.34);flex:0 0 auto}
.tc-qr span{color:var(--faint);font-size:11.5px;line-height:1.5}
.tc-close{position:absolute;top:16px;right:20px;font-size:24px;line-height:1;color:var(--muted);
  z-index:2}
.tc-close:hover{color:var(--ink)}
@media (max-width:820px){
  .tc{grid-template-columns:1fr}
  .tc-side{border-right:0;border-bottom:1px solid var(--line);padding:20px}
  #tcNav{grid-auto-flow:column;overflow-x:auto;gap:6px}
  #tcNav button em{display:none}
  .tc-main{padding:20px}
}

/* ==========================================================================
   11. SOCIAL PROOF — emplacements
   Les tuiles sont hachurées et étiquetées : impossible de les confondre avec
   un contenu réel, y compris sur une capture d'écran.
   ========================================================================== */
.ugc{margin-top:64px}
.ugc-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap;margin-bottom:22px}
.ugc-head h3{font-size:clamp(22px,2.4vw,32px)}
.pill-demo{font-family:"JetBrains Mono";font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#ffb43c;border:1px solid rgba(255,180,60,.34);
  background:rgba(255,180,60,.08);border-radius:999px;padding:6px 12px}
.ugc-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  grid-auto-rows:150px}
.ugc-tile{margin:0;border:1px dashed rgba(255,180,60,.26);border-radius:14px;
  display:grid;place-content:center;gap:7px;padding:18px;text-align:center;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 8px,
    transparent 8px 16px)}
.ugc-tile > span:first-child{font-family:"JetBrains Mono";font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
.ugc-tile--wide{grid-column:span 2}
.ugc-tile--v{grid-row:span 2}
.ugc-tile--card{place-content:start;text-align:left;gap:8px}
.ugc-tile--card b{font-weight:400;font-size:15px}
.ugc-tile--card em{font-style:normal;color:var(--muted);font-size:12px;line-height:1.55}
.ugc-stars{color:rgba(255,180,60,.4);letter-spacing:.22em;font-size:15px}
.ugc-note{margin-top:16px;color:var(--faint);font-size:12.5px;line-height:1.7;max-width:62ch}
@media (max-width:700px){ .ugc-tile--wide,.ugc-tile--v{grid-column:auto;grid-row:auto} }

/* ==========================================================================
   12. PANIER — tiroir
   DOM pur : il s'ouvre en une image, sans toucher à la scène 3D.
   ========================================================================== */
#cartScrim{position:fixed;inset:0;z-index:44;background:rgba(4,4,7,.62);
  backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:.42s var(--ease)}
#cartDrawer.on ~ #cartScrim,#cartScrim.on{opacity:1;visibility:visible}
#cartDrawer{position:fixed;top:0;right:0;bottom:0;z-index:45;width:min(430px,100vw);
  background:#0a090d;border-left:1px solid var(--line);display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .48s var(--ease);will-change:transform}
#cartDrawer.on{transform:none;box-shadow:-30px 0 80px rgba(0,0,0,.6)}
.cart-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:22px 22px 16px;border-bottom:1px solid var(--line)}
.cart-head h3{font-size:22px}
#cartBody{flex:1;overflow-y:auto;padding:18px 22px}
.cart-empty{color:var(--muted);font-size:14px;padding:30px 0}
.cart-line{display:grid;grid-template-columns:56px 1fr auto;gap:14px;padding:16px 0;
  border-bottom:1px solid var(--line)}
.cart-thumb{width:56px;height:74px;border-radius:9px;border:1px solid var(--line);
  display:grid;place-items:center;background:linear-gradient(160deg,
    color-mix(in srgb,var(--accent) 22%,transparent),rgba(255,255,255,.02))}
.cart-thumb span{font-family:Outfit;font-weight:300;font-size:15px;color:var(--ink)}
.cart-info b{font-weight:400;font-size:15px;display:block}
.cart-info p{color:var(--muted);font-size:12px;margin-top:4px;display:flex;gap:8px;
  align-items:center;flex-wrap:wrap}
.cart-warn{color:#ffb43c;border:1px solid rgba(255,180,60,.3);border-radius:999px;
  padding:2px 7px;font-family:"JetBrains Mono";font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase}
.cart-mode{display:inline-flex;margin-top:9px;border:1px solid var(--line);border-radius:999px;
  overflow:hidden}
.cart-mode button{padding:6px 12px;font-family:"JetBrains Mono";font-size:9px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);transition:.3s var(--ease)}
.cart-mode button.on{background:color-mix(in srgb,var(--accent) 24%,transparent);color:var(--ink)}
.cart-iv{margin-top:8px;background:rgba(255,255,255,.04);border:1px solid var(--line);
  color:var(--ink);border-radius:8px;padding:6px 9px;font:inherit;font-size:12px}
.cart-right{text-align:right;display:grid;gap:8px;align-content:start}
.cart-qty{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);
  border-radius:999px;padding:4px 10px;justify-self:end}
.cart-qty button{width:18px;color:var(--muted);font-size:15px;line-height:1}
.cart-qty button:hover{color:var(--ink)}
.cart-right b{font-weight:400;font-size:15px}
.cart-save{font-style:normal;color:#5fd6a4;font-size:11.5px;font-family:"JetBrains Mono"}
#cartFoot{border-top:1px solid var(--line);padding:18px 22px 22px;display:grid;gap:14px}
.cart-promo{display:flex;gap:8px}
.cart-promo input{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:10px;padding:11px 13px;color:var(--ink);font:inherit;font-size:13px}
.cart-promo input::placeholder{color:var(--faint)}
.cart-tot{margin:0;display:grid;gap:8px;font-size:13.5px}
.cart-tot > div{display:flex;justify-content:space-between;gap:12px}
.cart-tot dt{color:var(--muted)} .cart-tot dd{margin:0}
.cart-tot-save dd{color:#5fd6a4}
.cart-tot-final{padding-top:10px;border-top:1px solid var(--line);font-size:17px}
.cart-tot-final dt{color:var(--ink)}
.cart-go{width:100%;justify-content:center}
.cart-go[disabled]{opacity:.45;cursor:not-allowed}
.cart-note{color:var(--faint);font-size:11.5px;line-height:1.6}
#cartBtn{position:relative}
#cartCount{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:999px;
  background:var(--accent);color:#fff;font-family:"JetBrains Mono";font-size:9px;
  display:grid;place-items:center;padding:0 4px}
@media (prefers-reduced-motion:reduce){ #cartDrawer{transition:none} }

/* ============ CAPTURE E-MAIL ============ */
.cap{border:1px solid var(--line);border-radius:14px;padding:22px 22px 18px;
  background:rgba(255,255,255,.02);max-width:680px}
.cap .eyebrow{margin-bottom:8px}
.cap-offer{font-size:17px;line-height:1.5;margin-bottom:14px;color:var(--ink)}
.cap-offer--plain{color:var(--muted)}
.cap-terms{font-size:12px;color:var(--faint);margin:-8px 0 14px}
.cap-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.cap-field{display:flex;flex-direction:column;gap:5px;flex:1 1 190px;min-width:0}
.cap-lab{font:500 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
.cap input[type=email],.cap input[type=text],.cap select{
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:9px;
  color:var(--ink);padding:11px 12px;font:400 14px/1.2 inherit;width:100%;
  transition:border-color .2s,background .2s}
.cap input:focus,.cap select:focus{outline:none;border-color:var(--gold);
  background:rgba(255,255,255,.06)}
.cap select{appearance:none;cursor:pointer}
.cap-go{flex:0 0 auto;padding:11px 22px}
.cap-consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;
  font-size:12.5px;line-height:1.55;color:var(--muted);cursor:pointer}
.cap-consent input{margin-top:2px;accent-color:var(--gold);flex:0 0 auto}
.cap-legal{font-size:11.5px;line-height:1.6;color:var(--faint);margin-top:10px}
.cap-legal a{color:var(--muted);text-decoration:underline}
.cap-msg{font-size:12.5px;line-height:1.55;color:var(--gold);margin-top:10px;min-height:1em}
.cap--done{border-color:rgba(196,152,92,.4)}
.cap--done .cap-row,.cap--done .cap-consent{opacity:.45}

#capModal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:rgba(4,4,6,.72);backdrop-filter:blur(5px);opacity:0;transition:opacity .28s}
#capModal.on{opacity:1}
.cap-box{position:relative;width:min(560px,calc(100vw - 32px));background:var(--night-2);
  border:1px solid var(--line);border-radius:18px;padding:8px}
.cap-box .cap{border:0;background:none;padding:26px 24px 20px}
.cap-x{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--faint);
  font-size:26px;line-height:1;cursor:pointer;padding:4px 8px}
.cap-x:hover{color:var(--ink)}
@media (max-width:560px){ .cap-go{width:100%} }
@media (prefers-reduced-motion:reduce){ #capModal{transition:none} }

/* ============ SÉLECTEUR DE LANGUE ============ */
.lang{position:relative;display:inline-flex}
.lang select{appearance:none;background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:999px;color:var(--ink);font:500 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;padding:9px 30px 9px 14px;cursor:pointer;transition:border-color .2s}
.lang select:hover{border-color:rgba(246,244,241,.25)}
.lang select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lang::after{content:"";position:absolute;inset-inline-end:12px;top:50%;width:5px;height:5px;
  border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.lang option{background:#0d0c11;color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ============ ÉCRITURE DE DROITE À GAUCHE ============
   L'arabe ne se traite pas en retournant la page. Ce qui change, ce sont les
   axes de LECTURE : le tiroir arrive du côté opposé, les alignements de texte
   suivent le sens d'écriture, la barre de progression avance vers la gauche.
   Ce qui NE CHANGE PAS : la scène 3D et les chiffres. Un produit ne se
   reflète pas parce que la langue s'écrit dans l'autre sens, et un dosage lu
   à l'envers serait une faute. */
[dir="rtl"] .coa th,[dir="rtl"] .coa td,
[dir="rtl"] .tc-tab th,[dir="rtl"] .tc-tab td,
[dir="rtl"] #tcNav button,[dir="rtl"] .ugc-tile--card{text-align:right}
[dir="rtl"] .cart-right{text-align:left}
[dir="rtl"] .tc-side{border-right:0;border-left:1px solid var(--line)}
[dir="rtl"] .tc-close{right:auto;left:20px}
[dir="rtl"] #cartDrawer{right:auto;left:0;border-left:0;border-right:1px solid var(--line);
  transform:translateX(-100%)}
[dir="rtl"] #cartDrawer.on{transform:none;box-shadow:30px 0 80px rgba(0,0,0,.6)}
[dir="rtl"] #cartCount{right:auto;left:-5px}
[dir="rtl"] #bar{left:auto;right:0}
[dir="rtl"] #dots{right:auto;left:clamp(12px,2vw,26px)}
[dir="rtl"] #review{right:auto;left:clamp(12px,2vw,24px)}
[dir="rtl"] .scrollcue{left:auto;right:clamp(20px,5vw,90px)}
[dir="rtl"] .cap-x{right:auto;left:12px}
[dir="rtl"] .lockup b{padding-left:0;padding-right:.36em}
/* La scène et les mesures restent dans le sens de lecture latin. */
[dir="rtl"] .stage,[dir="rtl"] .num,[dir="rtl"] .mono{direction:ltr}
[dir="rtl"] .mono{text-align:right}
@media (max-width:820px){
  [dir="rtl"] #dots{left:50%;right:auto}
}

/* ============ COMPRÉHENSION / SCIENCE ============ */
.lead--cat{font-size:clamp(16px,1.5vw,19px);color:var(--gold-lt);
  letter-spacing:.005em;margin-bottom:6px}
.btn-ghost{opacity:.72}

.edu{border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,34px);
  margin:34px 0 40px;background:rgba(255,255,255,.018)}
.edu h3{font-size:clamp(21px,2.2vw,27px);margin-bottom:14px;letter-spacing:-.01em}
.edu .edu-h2{margin-top:34px}
.edu-p{font-size:15px;line-height:1.72;color:var(--muted);margin-bottom:13px;max-width:74ch}
.edu-tabs{display:flex;gap:8px;margin:16px 0 18px}
.edu-tabs button{background:rgba(255,255,255,.04);border:1px solid var(--line);
  color:var(--muted);border-radius:999px;padding:9px 18px;cursor:pointer;
  font:500 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;
  text-transform:uppercase;transition:color .2s,border-color .2s,background .2s}
.edu-tabs button[aria-selected=true]{color:var(--night);background:var(--gold-lt);
  border-color:var(--gold-lt)}
.edu-det{border-top:1px solid var(--line);padding:14px 0}
.edu-det summary{cursor:pointer;font-weight:500;font-size:15px;color:var(--ink);
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.edu-det summary::after{content:"+";color:var(--gold);font-size:19px;line-height:1}
.edu-det[open] summary::after{content:"–"}
.edu-det p{margin-top:11px}
.edu-split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.edu-split>div{border:1px solid var(--line);border-radius:12px;padding:18px}
.edu-split b{display:block;font-size:15px;margin-bottom:8px;color:var(--gold-lt)}
.edu-split p{font-size:13.5px;line-height:1.65;color:var(--muted)}
.edu-limit{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
  color:var(--faint)!important;font-size:12.5px!important}
@media (max-width:760px){ .edu-split{grid-template-columns:1fr} }

/* --- niveau de preuve --- */
.ev{border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:24px}
.ev-scale{display:flex;gap:5px;margin-bottom:12px}
.ev-scale i{flex:1;height:5px;border-radius:3px;background:rgba(246,244,241,.10)}
.ev-scale i.on{background:var(--gold)}
.ev-label{font-size:16px;color:var(--gold-lt)}
.ev-means{font-size:13px;line-height:1.6;color:var(--muted);margin-top:7px}
.ev-src{font-size:11.5px;color:var(--faint);margin-top:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.ev-none{color:#e9ca9a}

/* --- fiche scientifique --- */
.sc-areas{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.sc-areas span{border:1px solid var(--line);border-radius:999px;padding:6px 13px;
  font-size:11.5px;color:var(--muted)}
.sc-sec{border-top:1px solid var(--line);padding:18px 0}
.sc-sec h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-bottom:9px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.sc-sec p{font-size:14.5px;line-height:1.72;color:var(--muted);max-width:72ch}
.sc-sec--limit h4{color:#e9ca9a}
.sc-note{font-size:12px!important;color:var(--faint)!important;margin-top:8px}
.sc-empty{font-size:13.5px;line-height:1.7;color:var(--faint);
  border-left:2px solid var(--line);padding-left:14px}
.sc-refs{list-style:none;display:grid;gap:18px}
.ref a{color:var(--ink);font-size:15px;line-height:1.5;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line)}
.ref a:hover{text-decoration-color:var(--gold)}
.ref-meta{font-size:11.5px;color:var(--faint);margin-top:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ref-reg{font-size:12.5px;color:#e9ca9a;margin-top:8px;
  border-left:2px solid rgba(233,202,154,.4);padding-left:10px}
.ref-reg--appr{color:#5fd6a4;border-left-color:rgba(95,214,164,.5)}
.ref-sum{font-size:13.5px;line-height:1.65;color:var(--muted);margin-top:8px}
.ref-lim{font-size:12.5px;line-height:1.6;color:var(--faint);margin-top:6px}
.ref--negative{border-left:2px solid rgba(255,143,107,.45);padding-left:14px}
.ref--mixed{border-left:2px solid rgba(233,202,154,.4);padding-left:14px}

#sciDlg{border:0;padding:0;background:transparent;max-width:none;max-height:none;
  width:100vw;height:100dvh}
#sciDlg::backdrop{background:rgba(4,4,6,.78);backdrop-filter:blur(6px)}
#sciNav{display:grid;gap:5px;margin:22px 0}
#sciNav button{background:none;border:0;color:var(--muted);text-align:left;
  padding:9px 12px;border-radius:9px;cursor:pointer;font-size:13.5px;
  transition:background .2s,color .2s}
#sciNav button:hover{background:rgba(255,255,255,.05);color:var(--ink)}
#sciNav button.on{background:rgba(196,152,92,.14);color:var(--gold-lt)}
#sciBody{padding:clamp(20px,3vw,38px)}
[dir="rtl"] #sciNav button{text-align:right}

/* ==========================================================================
   VISUELS PRODUIT PHOTORÉALISTES
   Ils passent AVANT la 3D temps réel. Une image ne recalcule ni le verre, ni
   la réfraction, ni les reflets à chaque image : c'est le même écran, en plus
   beau, pour une fraction du GPU.
   ========================================================================== */
.shot{position:relative;display:block;margin:0;z-index:3}
.shot picture{display:block}
.shot img{display:block;width:100%;height:auto;border-radius:3px}
/* La 3D était derrière un canvas plein écran ; ces visuels vivent DANS le flux,
   donc ils ont besoin de leur propre place dans la colonne. */
.act .shot{width:min(46vw,620px)}
.act--tall .shot{width:min(42vw,560px)}
.shot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
  width:min(46vw,620px)}
.shot-grid .shot{width:100%}
.shot figcaption,.shot-cap{margin-top:9px;font-family:"JetBrains Mono";
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* Emplacement réservé : il occupe la place réelle du visuel et nomme le
   fichier attendu. Volontairement sobre — ce n'est pas une erreur, c'est une
   pièce en attente. */
.shot-reserved{display:flex;flex-direction:column;justify-content:center;gap:7px;
  aspect-ratio:4/5;padding:20px;border:1px dashed var(--line);border-radius:3px;
  background:linear-gradient(160deg,rgba(139,74,214,.05),rgba(255,255,255,.012))}
.shot-reserved b{font-size:13px;font-weight:500;color:var(--ink)}
.shot-reserved span{font-size:10px;letter-spacing:.04em;color:var(--faint);
  word-break:break-all}
.shot-reserved em{font-style:normal;font-family:"JetBrains Mono";font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}

@media (max-width:900px){
  .act .shot,.act--tall .shot,.shot-grid{width:min(92vw,560px)}
}

/* Le texte et le visuel approuvé côte à côte. La 3D occupait tout le fond de
   l'écran ; ces visuels vivent dans le flux, donc l'acte devient une vraie
   mise en page à deux colonnes. */
/* `.hold` est une colonne ; il faut donc explicitement repasser en RANGÉE,
   sinon le visuel se retrouve sous le texte au lieu d'être à côté. */
.hold--split{position:sticky;top:0;min-height:100vh;display:flex;
  flex-direction:row;align-items:center;justify-content:space-between;
  gap:clamp(24px,5vw,72px);padding:12vh 0}
.hold--split > .col{flex:0 1 430px;max-width:430px}
/* le hero ouvre sa colonne de texte : #hero .col la libère, on la reborne */
#hero .hold--split > .col{max-width:560px}
.shot-stack{display:flex;flex-direction:column;gap:12px;
  width:min(46vw,620px);flex:0 0 auto}
.shot-stack .shot,.shot-stack .shot-grid{width:100%}
/* Bascule à 1100 px, pas à 900. À 1024 la mise en page à deux colonnes tenait
   « techniquement » — 430 px de texte plus 620 px de visuel — mais chaque mot
   traduit changeait la hauteur de la colonne étranglée, et c'est là que se
   concentrait le décalage cumulé de la page. Au-dessous de 1100, on empile :
   plus lisible, et plus stable. */
@media (max-width:1100px){
  .hold--split{flex-direction:column;align-items:stretch;justify-content:center;
    gap:24px;min-height:auto;padding:9vh 0;position:static}
  .hold--split > .col{flex:1 1 auto;max-width:none}
  .shot-stack{width:100%}
}
.shot--wide{width:min(92vw,1100px);margin:0 auto 40px}

/* ==========================================================================
   ACCESSIBILITÉ TACTILE ET LISIBILITÉ — écrans à doigt
   Mesuré sur 390 px : huit cibles sous 40 px et six textes sous 11 px. Un
   bouton de 30 px se rate une fois sur trois ; un texte de 9 px ne se lit pas
   à bout de bras. Ces règles ne s'appliquent qu'aux pointeurs GROSSIERS —
   sur un écran piloté à la souris, les mêmes tailles sont confortables et il
   n'y a aucune raison de gonfler l'interface.
   ========================================================================== */
@media (pointer: coarse){
  .btn,.iv,button,select,input[type="submit"],input[type="text"],input[type="email"]{min-height:44px}
  /* Les puces de navigation restent visuellement fines : c'est leur ZONE
     TOUCHABLE qu'on agrandit, avec un pseudo-élément transparent. Grossir la
     puce elle-même abîmerait le repère ; l'agrandir sous le doigt, non. */
  #dots button{position:relative}
  #dots button::after{content:"";position:absolute;inset:-14px}
  .cart-qty button{min-width:44px}
  .shot-reserved span,.shot-reserved em{font-size:11px}
  .btn,.iv{padding-top:11px;padding-bottom:11px}
  header .btn,#menuBtn{min-width:44px}
  .lockup{min-height:44px;display:inline-flex;align-items:center}
  /* Les libellés en petite chasse mono descendaient à 9 px : lisibles sur un
     écran de bureau à 50 cm, pas dans une main. */
  .mono,.eyebrow,.tagline,.btn,.acq-note,.cart-note{font-size:11px}
  .sheet h4,.tc-tab th{font-size:11.5px}
  #dots,.scrollcue{font-size:11px}
}

/* Le bloc de boutons du hero change de hauteur quand la langue change : trois
   boutons anglais tiennent sur deux lignes là où le français en prend trois.
   Tout ce qui suit se déplaçait alors — c'est le plus gros décalage mesuré de
   la page. Réserver la hauteur le supprime, sans rien figer d'autre. */
.cta-row{min-height:96px;align-content:flex-start}
@media (max-width:900px){ .cta-row{min-height:0} }

/* Les deux états du stylo, côte à côte. Ils sont volontairement de MÊME
   taille : montrer l'état ouvert plus grand que l'état vendu inverserait la
   hiérarchie du produit. */
.states{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  margin:40px 0 24px}
.states .shot{width:100%}
@media (max-width:760px){ .states{grid-template-columns:1fr} }
.shot-grid--six{grid-template-columns:repeat(3,1fr)}
@media (max-width:520px){ .shot-grid--six{grid-template-columns:repeat(2,1fr)} }
@media (pointer: coarse){
  /* Les derniers libellés sous 11 px : mentions réglementaires et étiquettes
     d'emplacement. Une mention qu'on ne peut pas lire ne remplit pas son rôle. */
  .warn b,.warn span,.tc-note,.acq-promise,.shot figcaption,.shot-cap{font-size:11px}
}