/* NORYVA — GLP Funnel B — pharmacy green/white experiment.
   PALETTE STATUS: PROVISIONAL / UNMEASURED.
   home.medvi.org is egress-blocked in the build environment, so reference CSS
   could not be sampled. Values below are an internally-consistent pharmacy
   system, NOT measured from the reference. See REFERENCE_MAP.md. */
:root{
  --g-900:#06392a; --g-700:#0b6b4f; --g-600:#0e8a63; --g-500:#17a578;
  --g-100:#e6f4ee; --g-050:#f3faf7;
  --white:#fff; --offwhite:#f7f9f8;
  --ink:#10221c; --muted:#5a6b65; --border:#dce7e2;
  --amber:#b8860b;
  /* Tokens repris TELS QUELS du site NORYVA en ligne, assets/css/vp.css :root.
     Rien n'est invente ici, ce sont les valeurs de la marque. */
  --gold:#c4985c; --gold-lt:#e9ca9a; --plasma:#8b4ad6;
  --ease-nv:cubic-bezier(.22,1,.36,1);
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(6,57,42,.06),0 1px 3px rgba(6,57,42,.05);
  --sh-2:0 4px 12px rgba(6,57,42,.08);
  --sh-3:0 12px 32px rgba(6,57,42,.11);
  --maxw:1160px; --gutter:20px;
  --fs-h1:clamp(1.85rem,6.2vw,3.35rem);
  --fs-h2:clamp(1.45rem,4.2vw,2.3rem);
  --fs-h3:clamp(1.06rem,2.4vw,1.28rem);
  --fs-body:clamp(.98rem,1.7vw,1.06rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--fs-body);line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3{line-height:1.18;margin:0 0 .5em;letter-spacing:-.02em;font-weight:700}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3);letter-spacing:-.01em}
p{margin:0 0 1rem} a{color:var(--g-700)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);width:100%}
.sec{padding:52px 0}
.sec--tint{background:var(--g-050)}
.sec--pale{background:var(--g-100)}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g-700);margin:0 0 .6rem}
.lede{color:var(--muted);max-width:62ch}
.center{text-align:center}.center .lede{margin-left:auto;margin-right:auto}
/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:inherit;font-weight:700;border:0;cursor:pointer;text-decoration:none;
  padding:15px 26px;border-radius:var(--r-pill);min-height:52px;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.btn--primary{background:var(--g-600);color:#fff;box-shadow:var(--sh-2)}
.btn--primary:hover{background:var(--g-500);transform:translateY(-1px);box-shadow:var(--sh-3)}
.btn--ghost{background:transparent;color:var(--g-700);border:1.5px solid var(--border)}
.btn--ghost:hover{border-color:var(--g-600);background:var(--g-050)}
.btn--block{width:100%}
.btn--sm{padding:10px 18px;min-height:42px;font-size:.9rem}
/* header */
/* Le master ne pose PAS un bandeau blanc entre la promo et le hero : son
   en-tete a exactement le fond du haut du hero (#eef2ef), sans filet, donc les
   deux ne font qu'un seul bloc et il n'y a aucun vide blanc. On fait pareil.
   Bande mesuree sur le master a 1440 : y 60 -> 139, soit 80 de haut. */
.hdr{position:sticky;top:0;z-index:50;background:#eef2ef;
  -webkit-backdrop-filter:saturate(180%) blur(8px);backdrop-filter:saturate(180%) blur(8px)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px}
.wordmark{font-weight:800;letter-spacing:.2em;font-size:1.02rem;color:var(--g-900);text-decoration:none;white-space:nowrap}
.hdr__note{display:none;color:var(--muted);font-size:.82rem}
@media(min-width:860px){.hdr__note{display:block}}
/* hero */
.hero{background:linear-gradient(180deg,var(--g-050),var(--white));padding:34px 0 46px;border-bottom:1px solid var(--border)}
.hero__grid{display:grid;gap:26px;align-items:center}
.hero__vial{order:-1;justify-self:center;width:min(60vw,220px)}
.hero h1{margin-bottom:.35em}
/* Le master emploie LE MEME vert pour l'accent du titre et pour le bouton
   (mesure : rgb(99,156,128) et rgb(80,146,113)). Chez nous l'accent etait plus
   sombre que le bouton, ce qui faisait deux verts au lieu d'un. */
.hero h1 .tint{color:var(--g-600);display:block}
.pricerow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.price{font-size:clamp(1.9rem,6vw,2.5rem);font-weight:800;color:var(--g-900);letter-spacing:-.03em}
.price__unit{color:var(--muted);font-size:.92rem;font-weight:600}
.badge{display:inline-flex;align-items:center;gap:6px;background:var(--g-100);color:var(--g-700);font-size:.76rem;font-weight:700;padding:5px 11px;border-radius:var(--r-pill);letter-spacing:.03em}
.hero__cta{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ticks li{position:relative;padding-left:26px;color:var(--ink);font-size:.95rem}
.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:15px;height:8px;border-left:2.5px solid var(--g-600);border-bottom:2.5px solid var(--g-600);transform:rotate(-45deg)}
/* trust strip */
.strip{display:grid;gap:14px}
.strip__i{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);padding:16px;box-shadow:var(--sh-1)}
.strip__i h3{margin:0 0 .28em;font-size:1rem}
.strip__i p{margin:0;color:var(--muted);font-size:.9rem}
/* generic cards */
.cards{display:grid;gap:16px}
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-1)}
.step__n{width:38px;height:38px;border-radius:var(--r-pill);background:var(--g-600);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:12px}
/* offer */
.offer{display:grid;gap:22px;background:var(--white);border:1.5px solid var(--g-100);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-3)}
.offer__vial{justify-self:center;width:min(52vw,200px)}
.opt{display:flex;align-items:center;gap:12px;border:1.5px solid var(--border);border-radius:var(--r-md);padding:13px 15px;cursor:pointer;margin-bottom:10px;transition:border-color .15s,background .15s}
.opt:has(input:checked){border-color:var(--g-600);background:var(--g-050)}
.opt input{accent-color:var(--g-600);width:18px;height:18px;flex:none}
.opt__t{font-weight:700} .opt__p{margin-left:auto;font-weight:800;color:var(--g-900);white-space:nowrap}
/* evidence tiers */
.tier{border-left:4px solid var(--border);padding:2px 0 2px 16px;margin-bottom:20px}
.tier--est{border-left-color:var(--g-600)}
.tier--inv{border-left-color:var(--amber)}
.tier--prod{border-left-color:var(--g-900)}
.tier h3{margin-bottom:.3em}
.tier p{margin-bottom:.5rem;color:var(--muted);font-size:.95rem}
.src{font-size:.8rem;color:var(--muted)}
/* reviews */
.rev{display:grid;gap:14px}
.rev__c{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);padding:18px;box-shadow:var(--sh-1)}
.stars{color:var(--g-600);letter-spacing:.12em;font-size:.95rem}
.rev__m{color:var(--muted);font-size:.84rem;margin:10px 0 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.vfd{background:var(--g-100);color:var(--g-700);font-weight:700;font-size:.72rem;padding:3px 8px;border-radius:var(--r-pill)}
.notice{background:var(--g-050);border:1px dashed var(--g-600);border-radius:var(--r-md);padding:18px;color:var(--g-900)}
.notice strong{display:block;margin-bottom:.3em}
/* faq */
.faq__i{border-bottom:1px solid var(--border)}
.faq__q{width:100%;background:none;border:0;text-align:left;font:inherit;font-weight:700;color:var(--ink);
  padding:17px 40px 17px 0;cursor:pointer;position:relative;min-height:56px;display:block}
.faq__q::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;border-right:2.5px solid var(--g-600);border-bottom:2.5px solid var(--g-600);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq__q[aria-expanded="true"]::after{transform:translateY(-30%) rotate(-135deg)}
.faq__a{display:none;padding:0 0 18px;color:var(--muted)}
.faq__a p:last-child{margin-bottom:0}
.faq__i.is-open .faq__a{display:block}
/* final cta */
.final{background:var(--g-900);color:#fff;text-align:center}
.final h2{color:#fff}.final p{color:#cfe3da;max-width:56ch;margin-left:auto;margin-right:auto}
.final .btn--primary{background:var(--g-500)}.final .btn--primary:hover{background:#21c08d}
/* footer */
.ft{background:var(--offwhite);border-top:1px solid var(--border);padding:40px 0 28px;font-size:.9rem}
.ft__grid{display:grid;gap:22px;margin-bottom:24px}
.ft h3{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ft a{color:var(--ink);text-decoration:none}.ft a:hover{color:var(--g-700);text-decoration:underline}
.disc{border-top:1px solid var(--border);padding-top:18px;color:var(--muted);font-size:.8rem}
.disc p{margin-bottom:.6rem}
/* sticky mobile buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
  border-top:1px solid var(--border);padding:9px var(--gutter) calc(9px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:12px;transform:translateY(110%);transition:transform .25s ease;box-shadow:0 -4px 16px rgba(6,57,42,.09)}
.buybar.is-on{transform:translateY(0)}
.buybar__p{font-weight:800;color:var(--g-900);white-space:nowrap;font-size:.98rem;line-height:1.2}
.buybar__p small{display:block;font-weight:600;color:var(--muted);font-size:.7rem}
.buybar .btn{flex:1;padding:12px 16px;min-height:46px}
/* La barre d'achat collante porte le rappel de la remise pendant le
   defilement, a l'horizontale, sur toutes les largeurs. L'onglet vertical qui
   la remplacait au-dela de 1260 px a ete retire : le rappel du hero et cette
   barre disent la meme offre, jamais deux offres differentes. */
@media(min-width:900px){
  .buybar{padding-left:max(var(--gutter),calc((100% - 1104px) / 2));
          padding-right:max(var(--gutter),calc((100% - 1104px) / 2))}
  .buybar .btn{flex:0 0 auto;min-width:240px}
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:#fff;padding:10px 14px;border-radius:var(--r-sm);box-shadow:var(--sh-2)}
/* ---- tablet ---- */
@media(min-width:720px){
  :root{--gutter:28px}
  .sec{padding:68px 0}
  .strip{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr);gap:20px}
  .rev{grid-template-columns:repeat(2,1fr)}
  .ft__grid{grid-template-columns:repeat(3,1fr)}
  .hero__cta{flex-direction:row}.hero__cta .btn{flex:1}
}
/* ---- desktop ---- */
@media(min-width:1000px){
  .sec{padding:84px 0}
  .hero{padding:58px 0 70px}
  .hero__grid{grid-template-columns:1.06fr .94fr;gap:48px}
  .hero__vial{order:1;width:min(30vw,320px)}
  .hero__cta{max-width:470px}
  .strip{grid-template-columns:repeat(4,1fr)}
  .cards--3{grid-template-columns:repeat(3,1fr)}
  .rev{grid-template-columns:repeat(3,1fr)}
  .offer{grid-template-columns:.8fr 1.2fr;align-items:center;padding:36px}
  .offer__vial{width:min(22vw,250px)}
  .ft__grid{grid-template-columns:1.6fr 1fr 1fr 1fr}
  .faq__wrap{max-width:820px;margin:0 auto}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== plan selector ===== */
.plans{display:grid;gap:12px;max-width:560px;margin:0 auto}
.plan{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  border:2px solid var(--border);border-radius:var(--r-md);padding:15px 16px;cursor:pointer;background:var(--white);
  transition:border-color .15s,background .15s,box-shadow .15s}
.plan:hover{border-color:var(--g-500)}
.plan:has(input:checked){border-color:var(--g-600);background:var(--g-050);box-shadow:var(--sh-2)}
.plan input{accent-color:var(--g-600);width:20px;height:20px;flex:none;margin:0}
.plan__t{font-weight:700;line-height:1.3}
.plan__sub{display:block;font-weight:600;color:var(--muted);font-size:.82rem}
.plan__r{text-align:right;line-height:1.25}
.plan__pm{font-weight:800;color:var(--g-900);font-size:1.02rem;white-space:nowrap}
.plan__pmu{display:block;color:var(--muted);font-size:.74rem;font-weight:600}
.plan__save{display:inline-block;background:var(--g-100);color:var(--g-700);font-weight:800;
  font-size:.72rem;padding:3px 8px;border-radius:var(--r-pill);margin-top:4px;white-space:nowrap}
.plan__best{position:absolute;top:-10px;right:12px;background:var(--g-600);color:#fff;font-size:.66rem;
  font-weight:800;letter-spacing:.09em;padding:3px 9px;border-radius:var(--r-pill)}
.plan--best{border-color:var(--g-500)}
.welcome{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--g-600);color:#fff;
  font-weight:700;border-radius:var(--r-md);padding:11px 14px;margin:0 auto 16px;max-width:560px;text-align:center;font-size:.94rem}
.summary{max-width:560px;margin:16px auto 0;background:var(--g-050);border:1px solid var(--border);
  border-radius:var(--r-md);padding:16px}
.summary dl{display:grid;grid-template-columns:1fr auto;gap:7px 14px;margin:0}
.summary dt{color:var(--muted);font-size:.88rem}
.summary dd{margin:0;text-align:right;font-weight:700;font-size:.9rem}
.summary .big dd,.summary .big dt{font-size:1.06rem;color:var(--g-900)}
.summary__rule{border-top:1px solid var(--border);margin-top:12px;padding-top:11px;color:var(--muted);font-size:.8rem}
.summary__rule p{margin:0 0 .4rem}.summary__rule p:last-child{margin:0}
.pricewarn{max-width:560px;margin:0 auto 14px;background:#fff6e5;border:1px solid #e8c27a;color:#7a5200;
  border-radius:var(--r-md);padding:11px 14px;font-size:.85rem;font-weight:600}
/* ===== video testimonials ===== */
/* align-items:start : sans lui, la grille etire les cartes a la hauteur de la
   rangee et ecrase le cadre 9/16 de la video. Avec deux temoignages seulement,
   c'etait visible — le portrait devenait presque carre. */
.vidrail{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;overflow-x:auto;
  align-items:start;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 0 14px;
  scrollbar-width:thin}
.vidrail>*{scroll-snap-align:center}
.vid{margin:0;background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--sh-1)}
.vid__frame{position:relative;aspect-ratio:9/16;background:var(--g-900);display:flex;align-items:center;justify-content:center}
/* contain, pas cover : le cadre garde son 9/16, mais AUCUNE video n'est
   rognee. Les deux premieres sont en 512x910, la troisieme en 464x848 :
   sur un cadre commun, cover aurait coupe les bords de la troisieme. Le
   fond sombre du cadre absorbe le tres leger ecart. */
.vid__el{width:100%;height:100%;object-fit:contain;display:block}
.vid__frame--empty{flex-direction:column;gap:8px;background:linear-gradient(160deg,var(--g-100),var(--g-050));
  border-bottom:1px dashed var(--g-600)}
.vid__slotn{font-weight:800;color:var(--g-700);font-size:.8rem;letter-spacing:.06em}
.vid__await{color:var(--muted);font-size:.78rem}
.vid__play{position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:var(--r-pill);
  border:0;background:rgba(255,255,255,.94);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-2);transition:transform .15s}
.vid__play:hover{transform:scale(1.06)}
.vid__play span{width:0;height:0;border-left:16px solid var(--g-700);border-top:10px solid transparent;
  border-bottom:10px solid transparent;margin-left:4px}
.vid.is-playing .vid__play{display:none}
.vid__cap{padding:12px 14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.86rem}
.vid__h{flex-basis:100%;color:var(--muted)}
/* ===== reviews aggregate ===== */
.agg{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0 0;flex-wrap:wrap}
.agg__n{color:var(--muted);font-size:.9rem}
.rev__h{font-size:.98rem;margin:.4em 0 .3em}
.rev__s{color:var(--muted);font-size:.8rem}
@media(min-width:720px){
  .plans{max-width:640px}
  .vidrail{grid-auto-columns:38%}
}
@media(min-width:1000px){
  /* Le rail s'adapte au nombre de temoignages fournis : auto-fit replie les
     colonnes vides, donc deux videos donnent deux cartes centrees et pleine
     taille, pas deux vignettes perdues dans une grille de six. Le cadre garde
     le 9/16 des fichiers : aucune bande noire, aucun recadrage. */
  .vidrail{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(240px,320px));
    justify-content:center;overflow:visible;gap:18px}
  .vid__cap{font-size:.8rem;padding:10px}
}

/* ===== couche de citations =====
   Les regles .hero__stage / .hero__vial / .qlayer q d'une version precedente
   ont ete retirees : plus aucun markup ne les portait, et .qlayer q laissait
   fuir un position:absolute dans les citations de la section composition, qui
   ecrasait alors leurs figcaption. */
.qlayer{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}

/* ===== checkout ===== */
.steps{display:flex;gap:6px;margin:0 0 20px;list-style:none;padding:0}
.steps li{flex:1;font-size:.74rem;font-weight:700;color:var(--muted);text-align:center;
  padding-top:9px;border-top:3px solid var(--border);letter-spacing:.04em}
.steps li.is-on{color:var(--g-700);border-top-color:var(--g-600)}
.steps li.is-done{color:var(--g-700);border-top-color:var(--g-500)}
.field{margin-bottom:13px}
.field label{display:block;font-weight:700;font-size:.86rem;margin-bottom:5px}
.field input,.field select{width:100%;font:inherit;padding:12px 13px;border:1.5px solid var(--border);
  border-radius:var(--r-sm);background:#fff;min-height:48px}
.field input:focus,.field select:focus{outline:2px solid var(--g-500);outline-offset:1px;border-color:var(--g-600)}
.field .err{color:#a12;font-size:.8rem;font-weight:600;margin:5px 0 0;display:none}
.field.is-bad input{border-color:#a12}
.field.is-bad .err{display:block}
.row2{display:grid;gap:13px}
@media(min-width:560px){.row2{grid-template-columns:1fr 1fr}}
.paybtns{display:grid;gap:9px;margin-bottom:14px}
.paybtn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:var(--r-pill);
  border:1.5px solid var(--ink);background:var(--ink);color:#fff;font-weight:700;font:inherit;cursor:pointer;
  font-weight:700;padding:13px}
.paybtn--g{background:#fff;color:var(--ink)}
.provider{border:1px dashed var(--g-600);border-radius:var(--r-md);padding:16px;background:var(--g-050);
  color:var(--g-900);font-size:.88rem;margin-bottom:14px}
.provider strong{display:block;margin-bottom:.3em}

/* ===== preview banner (non-production build marker) ===== */
.pvbar{background:var(--g-900);color:#bcd9cc;font-size:.76rem;line-height:1.45;text-align:center;
  padding:9px 16px;font-weight:600;letter-spacing:.01em}
.pvbar strong{color:#fff;letter-spacing:.06em}

/* ===== hero : preuve sociale + visages ===== */
.tstat{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:700;font-size:.88rem;
  color:var(--g-700);background:var(--g-100);border-radius:var(--r-pill);padding:7px 14px;
  margin:0 0 16px;width:fit-content;max-width:100%}
.tstat__d{width:8px;height:8px;border-radius:50%;background:var(--g-600);flex:none}
.ppl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:16px 0 0}
.ppl__a{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #fff;
  box-shadow:var(--sh-1);margin-right:-12px;background:var(--g-100)}
.hero__re{color:var(--muted);font-size:.84rem;font-weight:600;margin:16px 0 0}

/* ===== hero : equilibre produit / CTA (le CTA doit rester au-dessus de la ligne de flottaison) ===== */
.hero{padding-top:24px}
.hero__vial{width:min(46vw,200px)}
.hero h1{margin-bottom:.3em}
.ticks li{font-size:.92rem}
@media(min-width:720px){ .hero__vial{width:min(34vw,250px)} }
@media(min-width:1000px){ .hero{padding-top:58px} .hero__vial{width:min(32vw,400px)} }

/* ===== bandeau presse ===== */
.press{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px}
.press__i{display:flex;align-items:center;justify-content:center;opacity:.72;filter:grayscale(1);
  transition:opacity .15s;text-decoration:none}
.press__i:hover{opacity:1;filter:none}
.press__n{font-weight:800;letter-spacing:.09em;color:var(--muted);font-size:.9rem;text-transform:uppercase}
.press__i--empty{border:1px dashed var(--g-600);border-radius:var(--r-sm);padding:9px 16px;
  color:var(--g-700);font-weight:800;font-size:.74rem;letter-spacing:.08em;opacity:1;filter:none}
/* ===== mosaique de profils ===== */
.mosaic{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mos__c{margin:0;position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--g-100);
  aspect-ratio:3/4}
.mos__c img{width:100%;height:100%;object-fit:cover;display:block}
.mos__c figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px;font-size:.78rem;
  color:#fff;background:linear-gradient(transparent,rgba(6,57,42,.82))}
.mos__c--empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1px dashed var(--g-600);background:linear-gradient(160deg,var(--g-100),var(--g-050))}
.mos__c--empty span{font-weight:800;color:var(--g-700);font-size:.76rem;letter-spacing:.06em}
.mos__c--empty figcaption{position:static;background:none;color:var(--muted);padding:0;font-size:.72rem}
@media(min-width:560px){.mosaic{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1000px){.mosaic{grid-template-columns:repeat(8,1fr);gap:12px}}
/* ===== questionnaire ===== */
.qz{max-width:560px;margin:0 auto;background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-2)}
.qz__bar{height:4px;background:var(--g-100);border-radius:var(--r-pill);overflow:hidden;margin-bottom:16px}
.qz__bar span{display:block;height:100%;background:var(--g-600);transition:width .25s ease}
.qz__n{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--g-700);margin:0 0 .5rem}
.qz__q{font-size:clamp(1.12rem,3vw,1.4rem);margin:0 0 16px}
.qz__opts{display:grid;gap:9px;margin-bottom:14px}
.qz__o{font:inherit;font-weight:600;text-align:left;background:var(--white);border:1.5px solid var(--border);
  border-radius:var(--r-md);padding:14px 16px;min-height:52px;cursor:pointer;transition:border-color .15s,background .15s}
.qz__o:hover{border-color:var(--g-500)}
.qz__o.is-on{border-color:var(--g-600);background:var(--g-050);box-shadow:inset 0 0 0 1px var(--g-600)}
.qz__help{color:var(--muted);font-size:.85rem;margin:0 0 16px}
.qz__nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.qz__nav .btn--primary{flex:1;max-width:220px;margin-left:auto}
.qz__nav .btn[disabled]{opacity:.45;cursor:not-allowed}
.qz__legal{color:var(--muted);font-size:.76rem;margin:16px 0 0;padding-top:12px;border-top:1px solid var(--border)}

/* ===== apparition au scroll (opt-in, jamais bloquante) ===== */
.has-reveal .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1)}
.has-reveal .reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .has-reveal .reveal{opacity:1!important;transform:none!important}
}

/* ===== en-tete de section 2 colonnes (titre a gauche, texte + CTA a droite) ===== */
.sechead{display:grid;gap:18px;align-items:start;margin-bottom:28px}
.sechead h2{margin:0}
.sechead__r{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.sechead__r .lede{margin:0}
@media(min-width:900px){
  .sechead{grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
  .sechead h2{font-size:clamp(1.7rem,3.1vw,2.6rem)}
}
/* ===== rail video pleine largeur ===== */
.bleed{width:100vw;margin-left:calc(50% - 50vw);padding-left:var(--gutter);padding-right:var(--gutter)}
.bleed .vidrail{grid-auto-columns:72%}
@media(min-width:720px){.bleed .vidrail{grid-auto-columns:30%}}
@media(min-width:1000px){.bleed .vidrail{grid-template-columns:repeat(6,1fr)}}
/* ===== parcours vertical (timeline) ===== */
.jrn{display:grid;gap:30px}
.jrn__steps{position:relative;display:grid;gap:34px}
.jrn__steps::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:var(--border)}
.jrn__s{position:relative;padding-left:38px}
.jrn__s::before{content:"";position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:50%;
  background:var(--white);border:2px solid var(--border)}
.jrn__s.is-first::before{background:var(--g-100);border-color:var(--g-600)}
.jrn__s.is-first::after{content:"";position:absolute;left:6px;top:12px;width:8px;height:8px;
  border-radius:50%;background:var(--g-600)}
.jrn__s h3{margin:0 0 .4em}
.jrn__s p{color:var(--muted);margin:0}
@media(min-width:900px){
  .jrn{grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
  .jrn__intro{position:sticky;top:90px}
}

/* ===== echelle du flacon apres passage au modele NORYVA (ratio 360x660) ===== */
.hero__vial{width:min(42vw,175px)}
@media(min-width:720px){ .hero__vial{width:min(28vw,205px)} }
@media(min-width:1000px){ .hero__vial{width:min(30vw,380px)} }

/* ===== asset produit NORYVA (image fournie, non modifiee) =====
   Presentation neutre : panneau arrondi, aucune mention ajoutee autour. */
.prodcard{display:block;position:relative;z-index:2;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-3);background:var(--g-050);line-height:0}
.hero__vial{display:block;width:100%;height:auto}
.prodcard{width:min(58vw,240px)}
@media(min-width:720px){ .prodcard{width:min(34vw,290px)} }
@media(min-width:1000px){ .prodcard{width:min(30vw,370px)} }


/* ===== asset produit transparent : aucun panneau, aucun fond rectangulaire ===== */
.prodshot{display:block;position:relative;z-index:2;line-height:0;width:min(52vw,210px)}
.prodshot img{width:100%;height:auto;display:block;filter:drop-shadow(0 22px 34px rgba(6,57,42,.16))}
@media(min-width:720px){ .prodshot{width:min(30vw,250px)} }
@media(min-width:1000px){ .prodshot{width:min(28vw,380px)} }

/* ===== HERO aligne sur le master (reference_01) =====
   Master a 1440 : colonne de texte 464 px centree, portraits lateraux ~138 px (9.6%),
   AUCUN produit dans le hero. */
.hero__grid{display:block;position:relative;text-align:center}
.hero__col{max-width:480px;margin:0 auto}
.hero h1 .tint{display:block}
.hero .ticks{display:inline-grid;text-align:left;justify-items:start;margin:0 auto}
/* max-width seul calait ce bloc sur le bord gauche de la colonne : le bouton
   se retrouvait centre a x=621 au lieu de x=720. Les marges auto le recentrent. */
.hero .hero__cta{justify-content:center;align-items:center;margin-top:20px;
  margin-left:auto;margin-right:auto}
.hero .hero__cta .btn{min-width:210px;flex:0 0 auto}
.hero .tstat{margin-left:auto;margin-right:auto}
.hero .ppl{justify-content:center}
.hero__flank{display:none}
@media(min-width:1000px){
  .hero__flank{display:block;position:absolute;top:50%;transform:translateY(-38%);width:9.6%}
  .hero__flank--l{left:0}
  .hero__flank--r{right:0}
  .hero__flank .mos__c{aspect-ratio:3/4.4;border-radius:var(--r-lg)}
}

/* alignement fin sur le master : titre ~48px et accent en ligne (3 lignes, pas 5),
   portraits lateraux a 138px comme la reference */
.hero h1{font-size:clamp(1.85rem,4.4vw,3rem)}
.hero h1 .tint{display:inline}
.hero__col{max-width:520px}
@media(min-width:1000px){ .hero__flank{width:138px} }

/* ===== bandeau presse defilant (master reference_04) =====
   Bande pleine largeur bordee, wordmarks sans carte, boucle infinie sans saut. */
#press{padding:0}
#press .wrap{padding:0;max-width:none}
#press .eyebrow{padding:22px var(--gutter) 12px;text-transform:none;letter-spacing:.02em;
  font-weight:400;font-size:.86rem;color:var(--muted)}
.tk{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:22px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tk__track{display:flex;align-items:center;width:max-content;animation:tk 34s linear infinite}
.tk__i{flex:none;padding:0 38px;font-weight:800;letter-spacing:.1em;font-size:1rem;
  color:var(--muted);opacity:.62;white-space:nowrap;text-transform:uppercase}
.tk__i a{color:inherit;text-decoration:none}
.tk__i img{display:block;filter:grayscale(1)}
@keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.tk__track{animation:none}}
@media(min-width:720px){ .tk__i{padding:0 52px;font-size:1.15rem} }

/* ===== HERO : composition photographique du master (reference_01) =====
   Mesures relevees sur la capture a 1440 CSS : portraits 200 px de large,
   colonne de contenu ~476 px centree, rangee de portraits sous le CTA. */
.hero__col{max-width:476px}
.hero .ticks{gap:10px}

@media(min-width:1000px){
  .hero__flank{width:200px;top:auto;bottom:0;transform:none}
  .hero__flank .mos__c{aspect-ratio:200/330}

  /* decalage vertical du master : la rangee n'est pas alignee au cordeau */

  .hero{padding-bottom:0;overflow:hidden}
}

/* master : les grands portraits lateraux sont a hauteur de la checklist,
   la rangee passe dessous -> aucun chevauchement */
@media(min-width:1000px){
  .hero__flank{top:286px;bottom:auto}

}

/* ===== tuiles neutres en attente d'asset : tiennent la composition, sans etiquette ===== */
.mos__c--tone{background:linear-gradient(155deg,#e9f2ee 0%,#dcebe4 45%,#cfe3da 100%);
  border:0;position:relative;overflow:hidden}
.mos__c--tone::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 18%,rgba(255,255,255,.55),transparent 62%)}
.ppl__a--tone{background:linear-gradient(155deg,#e9f2ee,#cfe3da);border:2px solid #fff}
.vid--tone{box-shadow:var(--sh-1)}
.vid__frame--tone{background:linear-gradient(155deg,#e9f2ee 0%,#dcebe4 45%,#cfe3da 100%);
  border-bottom:0;position:relative}
.vid__frame--tone::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 70% at 50% 16%,rgba(255,255,255,.5),transparent 60%)}
.tk__tone{display:block;width:132px;height:20px;border-radius:4px;
  background:linear-gradient(90deg,#dfe7e4,#eef3f1,#dfe7e4)}
/* couche citation : barres neutres tant qu'aucun temoignage reel n'est branche */
/* Couronne de cartes d'avis autour de la fiole. Ce sont de VRAIES cartes —
   meme cadre, meme avatar rond, meme bloc de citation que la section d'avis
   plus bas — posees aux positions exactes des fragments du master, trois a
   gauche, trois a droite. La fiole (z-index 2) passe devant elles (z-index 1)
   et en masque une partie, comme dans le master. Aucun mot, aucune note,
   aucun nom n'est fabrique tant qu'aucun avis reel n'est branche. */
/* Geometrie de la couronne : six fragments, trois a gauche, trois a droite,
   decales, et la couche resserree a 912 px pour que le verre en recouvre une
   partie de chaque cote — c'est ce recouvrement qui fait la profondeur. */
.qlayer--wait,.qlayer--policy{overflow:visible}
.qlayer--wait .qf,.qlayer--policy .qf{width:344px}
.qlayer--wait .qf--l[data-q="1"],.qlayer--policy .qf--l[data-q="1"]{left:-42px}
.qlayer--wait .qf--l[data-q="3"],.qlayer--policy .qf--l[data-q="3"]{left:24px}
.qlayer--wait .qf--l[data-q="5"],.qlayer--policy .qf--l[data-q="5"]{left:-20px}
.qlayer--wait .qf--r[data-q="2"],.qlayer--policy .qf--r[data-q="2"]{right:-38px}
.qlayer--wait .qf--r[data-q="4"],.qlayer--policy .qf--r[data-q="4"]{right:26px}
.qlayer--wait .qf--r[data-q="6"],.qlayer--policy .qf--r[data-q="6"]{right:-16px}

/* Format du master pour un fragment d'avis en attente : deux lignes de
   citation en grand, puis la mention dessous. Meme echelle que les vrais
   fragments, donc la composition se lit comme de la preuve sociale. Aucun mot
   n'est fabrique, et aucun argument produit ou laboratoire n'entre ici. */
.qf--wait q{display:block;quotes:none}
.qf--wait q::before,.qf--wait q::after{content:"";display:block;height:30px;
  border-radius:15px;margin-bottom:12px;
  background:linear-gradient(90deg,rgba(6,57,42,.085),rgba(6,57,42,.035))}
.qf--wait q::after{width:64%;margin-bottom:0}
.qf--wait figcaption{display:block;height:13px;width:168px;border-radius:7px;
  margin-top:16px;background:linear-gradient(90deg,rgba(6,57,42,.07),rgba(6,57,42,.03))}
.qf--l.qf--wait q::after{margin-left:36%}
.qf--l.qf--wait figcaption{margin-left:auto}
/* En pile, six cartes empilees feraient une colonne interminable sous la
   fiole. On en garde TROIS, pleine largeur : la composition se lit encore —
   « il y a plusieurs temoignages » — sans allonger la page. */
@media(max-width:899px){
  .qlayer--wait .qf,.qlayer--policy .qf{width:100%;left:auto;right:auto}
  .qlayer--wait .qf[data-q="5"],.qlayer--wait .qf[data-q="6"],
  .qlayer--policy .qf[data-q="5"],.qlayer--policy .qf[data-q="6"]{display:none}
  .qf--wait q::before,.qf--wait q::after{height:22px;margin-bottom:9px}
}
.tstat__tone{display:block;width:150px;height:12px;border-radius:6px;
  background:linear-gradient(90deg,#e4ece9,#f2f6f4,#e4ece9)}

/* ===== bonus application =====================================================
   Quatre cartes au trait, dans les tons NORYVA : blanc, vert, un filet dore.
   Rien d'une application de sport bon marche — meme retenue que le reste du
   tunnel. */
.bonus{max-width:960px;margin:0 auto;text-align:center}
.bcards{display:grid;gap:16px;margin:30px auto 0;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.bcard{background:#fff;border-radius:20px;padding:26px 22px;margin:0;text-align:left;
  border:1px solid rgba(12,42,32,.07);box-shadow:0 12px 30px rgba(6,57,42,.06);
  position:relative}
.bcard::after{content:"";position:absolute;inset:0;border-radius:20px;
  border:1px solid rgba(196,152,92,.26);pointer-events:none}
.bcard__i{width:26px;height:26px;display:block;margin-bottom:16px;
  fill:none;stroke:var(--g-600);stroke-width:1.35;
  stroke-linecap:round;stroke-linejoin:round}
.bcard__t{margin:0 0 7px;font-size:.78rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--g-900)}
.bcard__d{margin:0;font-size:.92rem;line-height:1.5;color:var(--muted)}
.bonus .bonus__foot{margin:26px 0 0;font-weight:700;color:var(--g-900);
  font-size:1.02rem}
.bonus .bonus__legal{margin-top:12px}
@media(max-width:759px){
  .bcards{grid-template-columns:1fr;gap:12px}
  .bcard{padding:20px 18px}
}
/* rappel compact pres du choix du plan : trois lignes, rien de plus */
.bonusmini{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;
  margin:16px auto 0;max-width:620px}
.bonusmini li{list-style:none;display:flex;align-items:center;gap:8px;
  font-size:.86rem;font-weight:600;color:var(--g-700)}
.bonusmini li::before{content:"";width:15px;height:15px;border-radius:50%;
  background:var(--g-600);flex:none;position:relative}
.bonusmini li span{position:relative}
.bonusmini li::after{content:"";position:absolute;left:4px;top:6px;width:7px;height:3.5px;
  border-left:1.8px solid #fff;border-bottom:1.8px solid #fff;transform:rotate(-45deg)}
.bonusmini li{position:relative}
.bonus .bonus__eye{font-size:.76rem;letter-spacing:.14em}
.bonus h2{margin-bottom:.35em}
.bonus .lede{margin-left:auto;margin-right:auto}
.bonus__list{display:inline-grid;text-align:left;justify-items:start;gap:11px;margin:22px auto 0}
.bonus__list li{font-weight:600}
.bonus__foot{margin-top:22px}

/* =======================================================================
   GEOMETRIE MASTER — references 05, 07, 09, 10, 11, 12, 13, 14, 15
   Toutes les mesures sont relevees sur les captures a 1440 px de large
   (captures 2880x1800 en DPR 2, divisees par 2).
   ======================================================================= */

/* ---- reference_05 : mosaique 4 colonnes, 7 tuiles, colonnes a hauteur egale ---- */
.mosaic__head{max-width:760px;margin:0 auto 26px}
.pmos{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.pmos__c{display:flex;flex-direction:column;gap:10px}
.pmos__t{margin:0;border-radius:22px;overflow:hidden;background:var(--g-050);
  position:relative;box-shadow:0 10px 26px rgba(6,57,42,.08)}
/* Liseré dore NORYVA sur chaque carte : discret, mais c'est lui qui sort la
   galerie du registre « photos de sport » et la rattache a la marque. */
.pmos__t::after{content:"";position:absolute;inset:0;border-radius:22px;
  border:1px solid rgba(196,152,92,.34);pointer-events:none}
.pmos__t img{width:100%;height:100%;object-fit:cover;display:block}
/* Cadres HAUTS : cette section doit laisser lire une morphologie, pas un
   visage. Une carte trop carree oblige a zoomer sur la tete ; une carte haute
   laisse tenir le corps entier sans agrandir l'image. */
.pmos__t--s{aspect-ratio:273/215}
.pmos__t--m{aspect-ratio:300/420}
.pmos__t--l{aspect-ratio:273/440}
.pmos__t--xl{aspect-ratio:273/670}
.pmos__t--full{aspect-ratio:470/744}
/* Le cadrage se fait par le haut : si la carte est un peu moins haute que
   l'image, on coupe les pieds, jamais la tete. */
.pmos__t img{object-position:50% 12%}
.pmos__t--tone{background:linear-gradient(155deg,#e9f2ee 0%,#dcebe4 45%,#cfe3da 100%);position:relative}
.pmos__t--tone::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 70% at 50% 16%,rgba(255,255,255,.5),transparent 60%)}
/* Composition du master : deux colonnes de deux cartes, puis une grande carte
   verticale a droite. La colonne de droite est plus large et sa carte prend
   toute la hauteur des deux autres — c'est ce desequilibre qui fait la
   composition editoriale, pas une rangee de cinq vignettes egales. */
@media(min-width:760px){
  /* La colonne de droite est la moitie plus large que les deux autres : c'est
     ce desequilibre qui fait la composition. La grande carte domine, les
     quatre petites l'equilibrent. */
  /* Quatre colonnes comme le master : la troisieme (1.5fr) porte la grande
     carte qui domine la composition, les trois autres alternent des tuiles
     hautes et basses. Chaque fichier est decoupe au ratio exact de sa tuile,
     donc object-fit ne rogne rien de plus — la silhouette reste entiere. */
  .pmos{grid-template-columns:.92fr .92fr 1.5fr .92fr;gap:14px;
    width:min(100% - 2 * var(--gutter), 1120px);margin:0 auto}
  /* la grande carte de droite s'etire sur la hauteur de sa colonne */
  .pmos__c:last-child{height:100%}
  .pmos__t--full{flex:1 1 auto;aspect-ratio:auto;min-height:0}
}
@media(min-width:1200px){ .pmos{gap:16px;width:min(100% - 2 * var(--gutter),1080px)} }
/* Sous 760 la mosaique se replie sur deux colonnes. La grande carte ne peut
   pas rester seule en bas d'une colonne : elle prend toute la largeur et
   devient la bande qui referme la composition. */
@media(max-width:759px){
  .pmos__c:last-child{grid-column:1 / -1}
  /* Cadre moins large que 16/10, et ancre en haut : sinon object-fit:cover
     centre la decoupe sur un portrait vertical et coupe la tete. */
  .pmos__t--full{aspect-ratio:5/4}
  .pmos__t--full img{object-position:50% 8%}
}

/* ---- reference_07 : quatre cartes chiffrees, 258x208, gouttiere 10, rayon 34 ---- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:28px}
.stat{background:#f2f5ea;border-radius:34px;min-height:208px;margin:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:22px 18px}
.stat__n{font-size:clamp(2.4rem,7vw,3.4rem);font-weight:800;letter-spacing:-.04em;
  color:var(--ink);margin:0 0 8px;line-height:1}
.stat__u{color:var(--g-600);font-weight:700}
.stat__l{margin:0;font-size:.96rem;line-height:1.35;max-width:210px}
.stat--tone{background:#f2f5ea}
@media(min-width:1000px){ .stats{grid-template-columns:repeat(4,1fr)} }

/* ---- reference_09 : une image par etape du parcours, 465x265, rayon 24 ---- */
.jrn__img{margin-top:18px;border-radius:24px;overflow:hidden;aspect-ratio:465/265;background:var(--g-050)}
.jrn__img img{width:100%;height:100%;object-fit:cover;display:block}
.jrn__img--tone{background:linear-gradient(155deg,#e9f2ee 0%,#dcebe4 45%,#cfe3da 100%);position:relative}
.jrn__img--tone::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 70% at 50% 16%,rgba(255,255,255,.5),transparent 60%)}

/* ---- panneaux encadres du master (references 10, 13, 14) ---- */
.panel{border-radius:44px;margin:0 auto;max-width:1380px}
.panel--cream{background:#f8f4f1}
.panel--warm{background:#fefaf1;border:1px solid #f0dfba;max-width:940px}
.panel__in{padding:34px var(--gutter)}
.panel__in--narrow{max-width:700px;margin:0 auto}
@media(min-width:1000px){ .panel__in{padding:56px 46px} }

/* ---- reference_10 : texte a gauche, deux portraits decales a droite ---- */
.support{display:grid;gap:28px;align-items:center}
.support__txt{max-width:400px}
.support__imgs{display:grid;grid-template-columns:repeat(2,1fr);gap:19px;align-items:start}
.support__i{margin:0;border-radius:22px;overflow:hidden;aspect-ratio:271/372;background:var(--g-050)}
.support__i img{width:100%;height:100%;object-fit:cover;display:block}
.support__i--tone{background:linear-gradient(155deg,#efe8e2,#e3d8cf);position:relative}
.support__i--tone::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 70% at 50% 16%,rgba(255,255,255,.5),transparent 60%)}
/* le second portrait descend de 32 px, comme sur le master */
.support__i:nth-child(2){margin-top:32px}
@media(min-width:1000px){ .support{grid-template-columns:1fr 561px} }

/* ---- reference_11 : deux rails horizontaux, sens opposes, cartes 399x231 ---- */
.revhead{max-width:760px;margin:0 auto}
.revhead .agg{justify-content:center;margin-top:12px}
.rrails{display:grid;gap:20px;margin-top:34px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.rrail{overflow:hidden}
.rrail__t{display:flex;gap:20px;width:max-content;animation:rr 62s linear infinite}
.rrail--r .rrail__t{animation-direction:reverse}
@keyframes rr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.rrail__t{animation:none}}
.rc,.rp{width:min(80vw,399px);min-height:231px;border-radius:22px;margin:0;flex:none}
.rc{background:#f2f5ea;padding:22px 24px;display:flex;flex-direction:column}
.rrail--r .rc{background:#fafafa}
.rc__h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.rc__a{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.rc__a--tone{background:linear-gradient(155deg,#e9f2ee,#cfe3da);display:block}
/* Vignette ronde d'une carte sans photo de profil : l'initiale du nom de la
   carte, dans les tons NORYVA. Elle occupe exactement la place du portrait,
   donc le dessin de la carte ne bouge pas. */
.rc__a--mono{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(155deg,#e9f2ee,#d3e5dc);color:var(--g-700);
  font-weight:800;font-size:.92rem;letter-spacing:.01em;
  box-shadow:inset 0 0 0 1px rgba(196,152,92,.34)}
.rrail--r .rc__a--mono{background:linear-gradient(155deg,#f3f1ec,#e7e3da)}
.rc__n{font-weight:700}
.rc__h .stars{margin-left:auto}
.rc__q{margin:0;line-height:1.55;font-size:.97rem}
.rc__s{margin:auto 0 0;padding-top:12px;color:var(--muted);font-size:.82rem}
/* --- NOTE TRUSTPILOT ---------------------------------------------------------
   Nom, etoiles, note. Rien d'autre, rien de cliquable. Les etoiles sont deux
   rangees superposees : la grise en dessous, la verte au-dessus, coupee a la
   proportion exacte de la note — une demi-etoile reelle, pas un arrondi. */
.tp{display:inline-flex;align-items:center;gap:12px;margin:18px 0 0;
  padding:9px 16px;border-radius:999px;background:#fff;
  border:1px solid rgba(12,42,32,.08);
  box-shadow:0 10px 26px rgba(6,57,42,.07)}
/* Dans le hero, le bloc est centre comme la colonne de texte et garde un
   petit intervalle avec la ligne « Join 100,000+ » : les deux lignes ne se
   touchent pas. L'espace entre cette ligne et le titre ne bouge pas. */

/* Au-dessus du choix du plan : le bloc respire au-dessus de la barre verte
   de l'offre de bienvenue, qu'il ne doit jamais toucher. */
.tp--c{margin:14px auto 28px}
/* Dans le hero le bloc ouvre la composition : aucune marge au-dessus, et
   l'intervalle avec la ligne « Join 100,000+ » vient de sa marge basse. */
.tp--hero{margin-top:0}
.tp__n{font-weight:800;font-size:.84rem;letter-spacing:.01em;color:var(--ink-900,#0d2a20)}
.tp__s{position:relative;display:inline-block;line-height:1;font-size:1.02rem;
  letter-spacing:.06em;white-space:nowrap}
.tp__s-b{color:#dcdcd7}
.tp__s-f{position:absolute;left:0;top:0;overflow:hidden;color:#00b67a;
  white-space:nowrap}
.tp__v{font-size:.84rem;color:var(--muted)}
.tp__v strong{color:var(--ink-900,#0d2a20);font-weight:800}
@media(max-width:640px){
  .tp{gap:9px;padding:8px 13px}
  .tp__n,.tp__v{font-size:.78rem}
  .tp__s{font-size:.95rem}
}
/* Ligne de statut de la carte d'avis : meme pastille et meme registre que
   la ligne posee sous les fragments autour de la fiole. */
.rc__st{display:flex;align-items:center;gap:7px;margin:12px 0 0;
  font-size:.78rem;color:var(--muted)}
.rc__st .vtick{width:15px;height:15px}
.rc__st--ok{color:var(--g-700)}
.rc--tone{background:linear-gradient(155deg,#f2f5ea,#e8efdd)}
.rrail--r .rc--tone{background:linear-gradient(155deg,#fafafa,#f0f0ee)}
.rp{overflow:hidden;background:var(--g-050)}
.rp img{width:100%;height:100%;object-fit:cover;display:block}
.rp--tone{background:linear-gradient(155deg,#e9f2ee 0%,#dcebe4 45%,#cfe3da 100%);position:relative}
.rp--tone::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 70% at 50% 16%,rgba(255,255,255,.5),transparent 60%)}

/* ---- reference_13 : marque, texte, bouton ambre ---- */
.gt{display:grid;gap:26px;align-items:center;text-align:center}
.gt__mark{justify-self:center}
.gt__mark svg{width:156px;height:156px;fill:none;stroke:#dda448;stroke-width:7}
.gt__mark .tick{stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.gt__eye{color:#b98a3d;font-weight:700;margin:0 0 6px}
.gt h2{margin-bottom:12px}
.btn--warm{background:linear-gradient(90deg,#dda448,#e8c169);color:#fff;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;font-size:.86rem;box-shadow:var(--sh-2)}
@media(min-width:1000px){
  .gt{grid-template-columns:auto 1fr;gap:74px;text-align:left}
  .gt__mark{justify-self:start}
}

/* ---- reference_14 : panneau creme, reponses en cartes blanches ---- */
#qualify-section .qz__q{text-align:center}
#qualify-section .opt{background:var(--white);border:1px solid #ece7e2;border-radius:14px;
  min-height:70px;padding:0 24px;box-shadow:var(--sh-1)}

/* ---- reference_15 : bandeau confiance 4 colonnes avec separateurs ---- */
.ftbar{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);margin-bottom:34px}
.ftbar__i{display:flex;align-items:center;gap:14px;padding:22px var(--gutter);
  font-weight:600;color:var(--ink);font-size:.95rem;line-height:1.3}
.ftbar__i+.ftbar__i{border-left:1px solid var(--border)}
.ftbar__i svg{width:30px;height:30px;flex:none;fill:none;stroke:var(--g-900);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.ftbar__i .tick{stroke:var(--g-600);stroke-width:2}
.ft{padding-top:0}
@media(min-width:1000px){ .ftbar{grid-template-columns:repeat(4,1fr)} }

/* ---- corrections de fidelite relevees sur les captures (05, 07, 09, 10) ---- */
/* accent vert sur une partie de titre, comme le master (hors hero, ou il est en bloc) */
h2 .tint{color:var(--g-700)}
/* reference_05 : la mosaique est sur fond blanc dans le master */
#mosaic{background:var(--white)}
/* reference_07 : le bandeau chiffre est inscrit dans 1060 px, pas 1120 */
.stats{max-width:1060px;margin-left:auto;margin-right:auto}
/* reference_10 : marges laterales larges dans le panneau support */
@media(min-width:1000px){ #support .panel__in{padding:56px min(13.2vw,190px)} }
/* reference_09 : colonne d'etapes de 465 px, pastille pleine, trait vert jusqu'a l'etape active */
@media(min-width:1000px){ .jrn__steps{max-width:465px} }
.jrn__steps::before{background:var(--border)}
.jrn__s::before{width:14px;height:14px;left:3px;top:9px;border:0;background:#c8ccc9}
.jrn__s.is-first::before{background:var(--g-600);box-shadow:0 0 0 8px rgba(14,138,99,.16)}
.jrn__s.is-first::after{display:none}

/* ---- reference_14 : le questionnaire vit A MEME le panneau creme, pas dans une seconde carte.
   Options blanches de 480 x 70, rayon 14, bouton pleine largeur sous les reponses. ---- */
#qualify-section .panel{max-width:940px}
#qualify-section .qz{background:transparent;border:0;box-shadow:none;max-width:480px;padding:0}
#qualify-section .qz__n,#qualify-section .qz__help{text-align:center}
#qualify-section .qz__o{background:var(--white);border:1px solid #ece7e2;border-radius:14px;
  min-height:70px;padding:0 24px;display:flex;align-items:center;box-shadow:var(--sh-1)}
#qualify-section .qz__opts{gap:10px;margin-bottom:18px}
#qualify-section .qz__nav{flex-direction:column;align-items:stretch}
#qualify-section .qz__nav .btn--primary{flex:none;max-width:none;margin-left:0;width:100%}
#qualify-section .qz__nav .btn--ghost{order:2}
.vid__poster{width:100%;height:100%;object-fit:cover;display:block}

/* ---- reference_07/08 : la colonne d'intro du parcours reste EN HAUT.
   Sans align-self, la grille etire l'element et sticky n'a plus de course. ---- */
@media(min-width:1000px){ .jrn__intro{align-self:start} }

/* ---- reference_12 : la FAQ du master ouvre sur un "+", pas un chevron ---- */
.faq__q::after{width:14px;height:14px;border:0;transform:none;
  background:
    linear-gradient(var(--g-600),var(--g-600)) center/14px 2px no-repeat,
    linear-gradient(var(--g-600),var(--g-600)) center/2px 14px no-repeat;
  transition:transform .2s;margin-top:-7px}
.faq__q[aria-expanded="true"]::after{transform:rotate(90deg);
  background:linear-gradient(var(--g-600),var(--g-600)) center/14px 2px no-repeat}

/* ---- bonus application : une capacite non livree se lit comme telle ---- */
.bonus__list li.is-planned{color:var(--muted)}
.bonus__list li.is-planned::before{border-color:#b9c6c0}
.bonus__tag{display:inline-block;margin-left:10px;background:var(--offwhite);color:var(--muted);
  border:1px solid var(--border);font-size:.68rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 8px;border-radius:var(--r-pill);vertical-align:1px}
.bonus__legal{margin-top:14px}
.bonus__flow{display:block;font-weight:600;font-size:.84rem;color:var(--muted);margin-top:4px}

/* ---- reference_06 : second panneau creme, images A GAUCHE, texte a droite.
   Le decalage est inverse par rapport au 10 : ici c'est la seconde image qui monte. ---- */
.why{display:grid;gap:28px;align-items:center}
.why__txt{max-width:400px}
.why__imgs{display:grid;grid-template-columns:repeat(2,1fr);gap:19px;align-items:start}
.why__i{margin:0;border-radius:22px;overflow:hidden;aspect-ratio:272/374;background:var(--g-050)}
.why__i img{width:100%;height:100%;object-fit:cover;display:block}
.why__i--tone{background:linear-gradient(155deg,#efe8e2,#e3d8cf);position:relative}
.why__i--tone::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 70% at 50% 16%,rgba(255,255,255,.5),transparent 60%)}
.why__i:nth-child(1){margin-top:28px}
@media(min-width:1000px){
  .why{grid-template-columns:563px 1fr}
  #why .panel__in{padding:56px min(13.2vw,190px) 56px 190px}
}

/* ---- reference_02 : les cartes video du master font 302 de large, pas 217 ---- */
@media(min-width:1000px){ .vidrail{grid-auto-columns:302px;gap:20px} }


/* ===== reference_02 — le rail, mesures relevees a 1440 ======================
   Cartes de 292 de large, ecart 20, format 9/16 : soit 292 x 519. La piste
   deborde a droite et se fait defiler, elle n'est pas une grille de six
   colonnes egales comme elle l'etait devenue.
   ========================================================================== */
@media(min-width:1000px){
  .bleed .vidrail{grid-auto-flow:column;grid-template-columns:none;
    grid-auto-columns:292px;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-inline:calc((100% - min(100% - 2 * var(--gutter),1063px)) / 2)}
}

/* ===== reference_04 — bandeau presse, mesures relevees a 1440 ===============
   Bande blanche pleine largeur, filet en haut et en bas, 142 de haut. Intitule
   en italique gris centre, corps 12, a 15 sous le filet. Puis la ligne de logos :
   hauteur de casse 28, environ 190 entre deux centres, defilement horizontal
   continu, boucle sans couture (la piste est dupliquee et translatee de -50%).

   NORYVA n'a aucune mention presse verifiee. Les emplacements gardent la place,
   la hauteur et la largeur d'un logo de magazine. Des qu'une mention autorisee
   est branchee, elle prend la place sans toucher au CSS.
   ========================================================================== */
#press{padding:0;background:#fff;border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)}
#press > .wrap{padding-top:15px;padding-bottom:0}
.presseye{font-style:italic;color:#8b8b88;font-size:.78rem;margin:0 0 6px}
#press .tk{border:0;min-height:104px}
#press .tk__i{padding:0 30px}
/* un emplacement de logo : les largeurs varient comme les vrais logotypes */
.tk__tone{display:block;height:28px;width:150px;border-radius:5px;
  background:linear-gradient(90deg,#dcdcd6,#e9e9e3,#dcdcd6)}
.tk__i:nth-child(7n+1) .tk__tone{width:112px}
.tk__i:nth-child(7n+2) .tk__tone{width:168px}
.tk__i:nth-child(7n+3) .tk__tone{width:128px}
.tk__i:nth-child(7n+4) .tk__tone{width:146px}
.tk__i:nth-child(7n+5) .tk__tone{width:196px}
.tk__i:nth-child(7n+6) .tk__tone{width:224px}
.tk__i:nth-child(7n+7) .tk__tone{width:158px}
@media(max-width:719px){
  #press .tk{min-height:96px}
  .tk__tone{height:22px}
  #press .tk__i{padding:0 26px}
}

/* La carte du rail de la section 02 redevient un emplacement video : cadre
   9/16, coins arrondis du master, prete a recevoir le fichier. */
.vid--slot{border:0;background:none;box-shadow:none}
.vid--slot .vid__frame{background:var(--g-050);border-radius:var(--r-md);overflow:hidden}
/* ===== reference_01 — HERO : geometrie relevee au pixel sur le master =========
   Mesures faites sur reference_01 ramene a 1440 px CSS (2880/2), origine = haut
   du bandeau promo. Elles remplacent les deux generations "compacite verticale"
   qui avaient ramene le H1 de 52 a 35 px pour faire tenir les cinq portraits
   au-dessus de la ligne de flottaison. Le master ne les y fait pas tenir non
   plus : ses tuiles sont coupees par le bas de la fenetre. On reprend donc son
   echelle typographique, et non ce critere-la.

   promo          hauteur 60, texte 17
   en-tete        hauteur 80, conteneur 1063 comme la rangee de portraits
   preuve sociale ligne simple y 177-187 — ni pastille, ni pastille de couleur
   H1             4 lignes, corps 52, interligne 55, colonne de 670 centree
   liste          5 items, pas de 33, pastille de 21, texte a 32 de la pastille
   bouton         220 x 43
   tuiles         5 x 200, ecart 16, x 188 -> 1252
                  flancs   : haut a 550, soit 410 sous le haut du hero
                  centrales: haut a 750, soit 200 plus bas que les flancs
   Les couleurs restent celles de NORYVA : on reprend la composition du master,
   pas sa marque.
   ============================================================================ */
.pvbar{padding:4px 14px;font-size:.66rem}
.hdr{padding:9px 0}
.hdr .wrap{max-width:calc(1063px + 2 * var(--gutter))}
/* pastille du master : 150 de large, 42 de haut, encre y 79-120, et NOIRE.
   On prend l'encre NORYVA (--g-900), qui tient le meme role neutre. */
.hdr .btn--sm{min-width:150px;min-height:42px;font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;padding-left:18px;padding-right:18px}
/* --- selecteur de langue ------------------------------------------------------
   Un seul composant : le globe, le bouton, et le menu ancre dessous. Le menu
   est aligne sur le BORD DROIT du bouton comme lui sur l'en-tete, ne descend
   jamais sous sa largeur, et reste dans l'ecran. Il passe au-dessus du reste
   (z-index) sans jamais chevaucher le bouton, puisqu'il commence sous lui. */
.hdr{position:relative;z-index:30}
.hdr__r{display:flex;align-items:center;gap:14px}
/* Le composant s'etire sur la HAUTEUR DE LA RANGEE, pas sur celle de son
   bouton : sinon le menu, ancre a 100 % du composant, commencerait plus
   haut que le bas de GET STARTED, qui est plus grand, et le chevaucherait
   sur mobile. */
.lang{display:inline-flex;align-items:center;align-self:stretch;gap:6px;position:relative}
.lang[data-mode="empty"]{display:none}
.lang__i{width:17px;height:17px;flex:none;fill:none;stroke:var(--g-900);
  stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:.72}
.lang__btn{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;
  font:inherit;font-size:.82rem;font-weight:700;color:var(--g-900);letter-spacing:.02em;
  padding:7px 4px 7px 2px;border-radius:10px;cursor:pointer;line-height:1}
.lang__btn:hover{color:var(--g-700)}
.lang__btn:focus-visible,.lang__opt:focus-visible{outline:2px solid var(--g-600);outline-offset:2px}
.lang__flag{font-size:1rem;line-height:1}
.lang__caret{width:0;height:0;flex:none;margin-left:1px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.62;transition:transform .16s var(--ease,ease)}
.lang.is-open .lang__caret{transform:rotate(180deg)}
/* Le menu : ancre sous le bouton, bord droit aligne, largeur au moins celle du
   bouton. Il ne peut donc ni deborder de l'en-tete ni couvrir GET STARTED. */
.lang__menu{position:absolute;top:calc(100% + 8px);right:0;z-index:40;
  min-width:max(100%,178px);padding:6px;margin:0;
  background:#fff;border-radius:14px;border:1px solid rgba(12,42,32,.09);
  box-shadow:0 18px 40px rgba(6,57,42,.14);display:flex;flex-direction:column;gap:2px}
.lang__menu[hidden]{display:none}
.lang__opt{display:flex;align-items:center;gap:9px;width:100%;
  border:0;background:transparent;font:inherit;font-size:.86rem;font-weight:600;
  color:var(--g-900);text-align:left;padding:9px 11px;border-radius:9px;cursor:pointer;
  line-height:1.2;white-space:nowrap}
.lang__opt:hover{background:var(--g-050,#eef4f1)}
.lang__opt.is-on{background:var(--g-050,#eef4f1);font-weight:800}
.lang__tick{width:13px;flex:none;position:relative}
.lang__opt.is-on .lang__tick::after{content:"";position:absolute;left:1px;top:2px;
  width:8px;height:4px;border-left:2px solid var(--g-600);border-bottom:2px solid var(--g-600);
  transform:rotate(-45deg)}
.lang__name{flex:1 1 auto}
@media(max-width:759px){
  .hdr__r{gap:9px}
  .lang__btn{font-size:.78rem;gap:6px;padding-left:0}
  .lang__i{width:15px;height:15px}
  /* sur un petit ecran le menu se recale sur la droite de l'en-tete et garde
     sa gouttiere : il ne sort jamais du viewport */
  .lang__menu{right:-6px;min-width:172px}
}
.hdr .btn--primary{background:var(--g-900)}
.hdr .btn--primary:hover{background:#052c20}
/* Le bloc central remonte : la bande vide entre l'en-tete et la note Trustpilot
   se reduit, et toute la composition suit d'un seul tenant. Les intervalles
   internes — Trustpilot, 100,000+, titre, puces, bouton — ne changent pas. */
.hero{padding-top:12px;
  background:linear-gradient(180deg,#eef2ef 0%,#f2f4f1 26%,#f6f8f5 62%,#f8faf8 100%)}
/* display:flex faisait de "Join", du nombre et du reste trois elements de
   flex separes par le gap : trois blocs au lieu d'une phrase. Retour au flux
   de texte normal, comme le master.                                          */
.tstat{display:block;background:none;border:0;padding:0;border-radius:0;
  font-size:1.06rem;font-weight:400;color:#2a2a28;margin:0 0 6px;line-height:26px}
.tstat strong{font-weight:700;color:#1d1d1b}
/* Mesure de l'epaisseur de trait du H1 au milieu des capitales : master 7,0 px,
   NORYVA 9,6 px a poids 700, soit 37 % plus gras. C'est ce qui faisait le plus
   « autre page » a l'ecran, bien plus que les coordonnees. Poids 600 ramene le
   trait sur celui du master. Le H1 du hero seulement : les autres titres du
   tunnel ne bougent pas. */
.hero h1{font-size:52px;line-height:55px;letter-spacing:-.02em;margin:0 0 20px;
  font-weight:600}
.hero .ticks{margin:0 auto 29px;max-width:470px}
.hero .ticks li{font-size:1rem;line-height:20px;margin-bottom:13px;padding-left:32px}
.hero .ticks li:last-child{margin-bottom:0}
.hero .ticks li::before{width:21px;height:21px;top:0}
.hero .ticks li::after{left:6px;top:7px}
/* Le bouton du hero du master est en capitales espacees, 220 x 43. */
.btn--hero{min-width:220px;min-height:43px;padding:11px 26px;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.08em}
/* sous 1200 la colonne se resserre : le corps suit, l'interligne reste a 1.06 */
@media(max-width:1199px){ .hero h1{font-size:clamp(2.1rem,3.6vw,3.25rem);line-height:1.06} }
@media(max-width:759px){
  .promo{min-height:48px;font-size:.94rem}
  .hero{padding-top:18px}
  .hero h1{font-size:clamp(1.9rem,7.4vw,2.6rem);line-height:1.08;margin:0 0 16px}
  .tstat{font-size:.98rem;margin:0 0 10px}
  .hero .ticks li{margin-bottom:9px}
  .hdr .btn--sm{min-width:auto;padding:10px 18px}
}
/* Trois regles plus anciennes gagnaient par specificite : le bouton du hero
   restait a 210 de large et la colonne CTA gardait sa marge haute de 20.      */
.hero .hero__cta{margin-top:0;margin-bottom:0}
.hero .hero__cta .btn--hero{min-width:220px}
.hdr .btn--sm{min-width:150px}
/* Un portrait qui echouerait malgre tout le dit, au lieu de laisser du blanc. */

/* ===== HERO — la rangee de portraits suit la hauteur de la fenetre ===========
   A 1440x900, la fenetre du master, rien ne bouge : flancs a 380 sous le haut
   du hero, centrales 200 plus bas, exactement les valeurs relevees sur
   reference_01. En dessous de 880 de haut — le cas d'un panneau d'Artifact —
   les portraits remontent, sinon ils passent sous la ligne de flottaison et il
   ne reste qu'une grande zone claire a leur place.

   Les trois tuiles centrales se calent alors 18 px sous le bas du bouton. Ce
   releve a chaque palier. Rien d'autre ne change : ni le corps du titre, ni la
   checklist, ni le bouton, ni les ratios des tuiles.
   ============================================================================ */

/* ===== HERO — les portraits en flux normal, plus aucune superposition =======
   Pendant dix iterations les portraits se sont affiches ici et pas chez la
   proprietaire, alors que la section "why", plus bas, a toujours fonctionne
   chez elle. La difference n'etait pas l'image : c'etait le conteneur. Le hero
   superposait deux enfants dans la meme cellule de grille, avec z-index,
   margin-top de 380 et overflow:hidden sur la section. La section "why", elle,
   est une grille ordinaire en flux normal.

   On reprend donc exactement sa mecanique. Une seule grille de 5 colonnes :
     colonne 1     : grand portrait gauche, sur les deux rangees
     colonnes 2-4  : le bloc de texte, inchange
     colonne 5     : grand portrait droit, sur les deux rangees
     rangee 2      : les trois portraits du milieu, en colonnes 2, 3 et 4
   Aucun z-index, aucun recouvrement, aucun rognage, aucune decision JavaScript.
   La position verticale des portraits reste la seule chose qui s'adapte.
   ========================================================================== */
.hero{overflow:visible}
@media(min-width:760px){

  .hero__col{grid-column:2 / 5;grid-row:1}
  /* hauteurs du master, par leur ratio : 199x420 sur les flancs, 290/360/310 au centre */

}
/* Le bloc de texte garde sa largeur du master (670) : il deborde legerement sur
   les gouttieres de la grille, comme sur reference_01, sans jamais croiser les
   colonnes 1 et 5 ou sont les grands portraits. */
@media(min-width:760px){
  /* Une largeur fixe deformerait les colonnes de la grille et donc les portraits.
     Le bloc mord simplement sur les deux gouttieres qui l'encadrent : il retrouve
     les 670 du master sans toucher a la taille des colonnes.                   */
  .hero__col{margin-inline:-19.5px}
}
/* Fenetre courte : les grands portraits remontent pour etre vraiment vus, et la
   rangee du milieu suit le texte de pres au lieu de laisser une zone claire. */

/* Mobile : le texte passe devant. Les portraits le suivent en deux colonnes,
   comme avant — ils sont maintenant ecrits avant lui dans le balisage. */
@media(max-width:759px){
  .hero__col{order:-1;grid-column:1 / -1}
}

/* ===== HERO — les portraits, reconstruits a zero ============================
   Dix iterations ont echoue chez la proprietaire alors que tout s'affichait
   ici. On arrete de chercher laquelle des mecaniques tombe chez elle : on les
   retire toutes. Ce qui suit est la totalite du code des portraits du hero.

   Cinq <img> nus dans une rangee flex. Largeur et hauteur en pixels sur
   l'element. Pas de figure, pas de grille, pas d'aspect-ratio, pas de
   grid-row, pas de z-index, pas de superposition, pas de overflow, pas de
   variable CSS, pas de manifeste, pas de JavaScript, pas de lazy, pas de
   reveal, pas d'opacite conditionnelle, pas de transform.

   La rangee remonte le long du texte par une marge negative ordinaire, comme
   sur le master ou les deux grands portraits encadrent la colonne de texte.
   Le pire defaut possible est desormais un decalage — plus rien ne peut faire
   disparaitre une photo.

   Master a 1440 : rangee de 5, largeur 199, ecart 17, de x=188 a x=1252.
   Flancs hauts de 420, haut a y=573. Centrales 290/360/310, haut a y=773.
   ========================================================================== */
.heroppl{display:flex;flex-wrap:wrap;justify-content:center;gap:17px;
  width:min(100% - 2 * var(--gutter),1240px);margin:24px auto 0}
.hp{display:block;flex:none;border-radius:20px;object-fit:cover;object-position:center top;
  background:#e9efec;width:calc(50% - 9px);height:340px}

@media(min-width:760px){
  .heroppl{flex-wrap:nowrap;margin-top:calc(-1 * var(--remontee))}
  /* cinq colonnes egales dans la largeur disponible : 199 au palier du
     master, et jamais de debordement quand la fenetre est plus etroite */
  .hp{width:calc((100% - 68px) / 5)}
  /* hauteurs relevees d'un sixieme : les corps et les morphologies doivent
     se lire depuis le premier ecran, pas seulement les visages. */
  .hp--l,.hp--r{height:489px}
  .hp--a{height:338px}
  .hp--b{height:419px}
  .hp--c{height:361px}
  /* les trois du milieu descendent sous le bouton, comme sur le master */
  .hp--a,.hp--b,.hp--c{margin-top:228px}
  /* la rangee remonte : les portraits doivent entrer dans le premier ecran,
     pas seulement depasser de deux tetes en bas. Les flancs passent au-dessus
     du bouton, les trois du milieu restent dessous — c'est le rapport du
     master, et deux controles de geometrie le verifient. */
  .hero{--remontee:200px}
}
/* Fenetre courte : les grands portraits remontent davantage pour etre vraiment
   vus, et la rangee du milieu se resserre au lieu de laisser une zone claire. */
/* Le master a ete mesure dans une fenetre de 812 de haut : flancs a y=549,
   centrales a y=745, ce que donne --remontee:125. Le premier palier court
   commencait a 879 et ecrasait donc la geometrie du master a 812. Il demarre
   maintenant sous 800, ou la fenetre est reellement trop basse. */
@media(min-width:760px) and (max-height:879px){
  .hero{--remontee:265px}  .hp--a,.hp--b,.hp--c{margin-top:280px}
}
@media(min-width:760px) and (max-height:719px){
  .hero{--remontee:310px}  .hp--a,.hp--b,.hp--c{margin-top:306px}
}
@media(min-width:760px) and (max-height:639px){
  .hero{--remontee:355px}  .hp--a,.hp--b,.hp--c{margin-top:344px}
}

/* Sous 1100 de large les tuiles retrecissent : leurs hauteurs suivent, sinon le
   cadrage s'etire. Valeurs du master reduites dans la meme proportion. */
@media(min-width:760px) and (max-width:1099px){
  .hp--l,.hp--r{height:370px}
  .hp--a{height:255px}
  .hp--b{height:317px}
  .hp--c{height:273px}
}

/* Le bloc de texte partage exactement le conteneur des portraits, et sa largeur
   suit les colonnes : trois colonnes plus les deux gouttieres, plus le leger
   debord du master. A 1440 cela redonne 670. Aux largeurs plus etroites il se
   resserre en meme temps que les tuiles, si bien que le texte et les deux
   grands portraits ne se croisent jamais, meme quand la rangee remonte. */
@media(min-width:760px){
  .hero > .wrap{width:min(100% - 2 * var(--gutter),1063px);max-width:none;
    padding:0;margin:0 auto}
  .hero__col{max-width:calc(3 * ((100% - 68px) / 5) + 72px);margin:0 auto}
}

/* ===== reference_07 — cartes chiffrees, mesures relevees a 1440 =============
   Quatre cartes de 257 de large, ecart 11, hauteur 202, rayon 28, fond vert
   tres pale. Le nombre fait 62, l'unite est verte, la legende 13 en gras sous
   le nombre. Tant qu'aucun chiffre verifie n'est fourni, la carte garde cette
   composition sans rien afficher : NORYVA n'invente pas de donnee.
   ========================================================================== */
@media(min-width:1000px){
  .stats{grid-template-columns:repeat(4,1fr);gap:11px;max-width:1061px}
  .stat{min-height:202px;border-radius:28px}
}
.stat__ntone{display:block;width:min(104px,56%);height:44px;border-radius:10px;
  background:linear-gradient(90deg,#d8e2c7,#e6eed9,#d8e2c7)}
.stat__ltone{display:block;height:10px;border-radius:5px;margin-top:8px;
  background:linear-gradient(90deg,#d8e2c7,#e6eed9,#d8e2c7);width:min(148px,82%)}
.stat__ltone--s{width:min(96px,58%)}

/* L'en-tete est collant : sans cette marge, une ancre — et un clic — atterrit
   sous lui. Le master a le meme en-tete collant et la meme reserve. */
html{scroll-padding-top:96px}
@media(max-width:719px){ html{scroll-padding-top:84px} }

/* Le bouton radio doit rester le premier element sous le pointeur : la carte et
   son badge "BEST VALUE" passaient devant lui. */
.plan input{position:relative;z-index:2}

/* ===== reference_13 — garantie, mesures relevees a 1440 =====================
   Panneau creme de 937 x 396, filet dore, rayon 40. Cercle de 156 a gauche,
   colonne de droite a 669 : intitule dore, titre sur deux lignes, corps sur
   deux lignes, pastille doree de 280 x 43. Tant que l'engagement commercial
   n'est pas fourni, la composition reste et n'annonce rien.
   ========================================================================== */
.gt__tone{display:block;height:13px;border-radius:6px;
  background:linear-gradient(90deg,#f1e4c7,#faf2e2,#f1e4c7)}
.gt__tone--eye{width:148px;height:11px}
.gt__tone--h{width:min(272px,92%);height:26px;margin-top:6px}
.gt__tone--h2{width:min(236px,80%);height:26px;margin-top:9px}
.gt__tone--b{width:min(310px,96%);margin-top:6px}
.gt__tone--b2{width:min(268px,86%);margin-top:8px}

/* ===== reference_08 / 09 — parcours, mesures relevees a 1440 ================
   Fond blanc. Colonne de gauche a x=238, colonne des etapes a x=735, ligne
   verticale a x=656. Titre d'etape 21, corps 15 sur trois lignes, puis une
   image de 464 x 270, rayon 22. Pastille active : cercle vert pale de 36 avec
   un point fonce au centre ; les suivantes, un point gris de 14.
   ========================================================================== */
#journey{background:#fff}
@media(min-width:1000px){
  /* le master resserre ce bloc : de x=238 a x=1199, soit 961 */
  #journey > .wrap{max-width:calc(961px + 2 * var(--gutter))}
  .jrn{grid-template-columns:418px 464px;gap:79px}
  /* la ligne verticale et les pastilles vivent dans la gouttiere, a x=656,
     et non a l'interieur de la colonne des etapes comme auparavant */
  .jrn__s{padding-left:0}
  .jrn__steps::before{left:-72px}
  .jrn__s::before{left:-79px}
  .jrn__s.is-first::before{left:-87px;width:30px;height:30px;top:2px;
    background:var(--g-100);box-shadow:none}
  .jrn__s.is-first::after{display:block;content:"";position:absolute;left:-77px;top:12px;
    width:10px;height:10px;border-radius:50%;background:var(--g-700)}
  .jrn__s h3{font-size:1.32rem}
  .jrn__img{width:464px;max-width:100%;aspect-ratio:464/270;border-radius:22px;margin-top:22px}
  .jrn__steps{gap:48px}
}

/* Carte d'avis en attente (master reference_11) : meme cadre, meme fond, meme
   avatar rond, meme bloc de citation. Aucune etoile : une note est une
   affirmation, elle n'apparait qu'avec un avis reel. */
.rc--wait .rc__h{margin-bottom:16px}
.rc__tone{display:block;height:12px;border-radius:6px;
  background:linear-gradient(90deg,#dde5d1,#ebf0e2,#dde5d1)}
.rrail--r .rc__tone{background:linear-gradient(90deg,#e6e6e3,#f1f1ee,#e6e6e3)}
.rc__tone--n{width:96px;height:14px}
.rc__tone--q{width:100%;margin-bottom:11px}
.rc__tone--last{width:64%;margin-bottom:0}

/* La disponibilite tient en une phrase sous la liste, plutot qu'en une
   etiquette repetee sur chaque ligne. */
.bonus__avail{max-width:640px;margin:16px auto 0;text-align:center}
.bonus__list li.is-planned{opacity:1}

/* Les wordmarks du master sont des logotypes noirs, pas des capitales espacees.
   On garde la casse fournie par la donnee et on remonte le contraste. */
#press .tk__i{text-transform:none;color:#1f1f1d;font-weight:700;letter-spacing:-.012em;
  font-size:1.42rem}
#press .tk__i a{color:inherit}
@media(max-width:719px){ #press .tk__i{font-size:1.1rem} }

/* Le master ecrit le nombre en 62 et la legende en 13 gras. */
@media(min-width:1000px){
  .stat__n{font-size:62px;line-height:1;margin-bottom:14px}
  .stat__l{font-size:.82rem;font-weight:700;color:#1f1f1d;max-width:200px}
}

/* La liste du hero : le pas du master est 33, soit 20 d'interligne et 13 de
   marge. La grille ajoutait en plus son propre ecart de 10. */
.hero .ticks{gap:0}

/* Le bas du H1 au haut de la liste : 20 sur le master, 26 chez nous. */
/* Echelle verticale relevee sur le master a 1440x812 :
     preuve sociale encre 176-190, H1 209-411 (4 lignes, pas de 55),
     checklist 452/485/518/551/584, bouton 633-675, flancs a 549.
     Ces trois marges sont ce qui place cette echelle. */
@media(min-width:1200px){ .hero h1{margin-bottom:26px} }

/* ===== haut de page et hero — reglages mobiles =============================
   Le grand nettoyage du CSS des portraits avait emporte au passage la regle de
   base du bandeau promo et le centrage du hero. Ils sont retablis ici.
   ========================================================================== */
/* ===== bandeau promotionnel (master reference_01) ===========================
   Mesures relevees sur le master a 1440 : bande blanche haute de 60 px, une
   seule ligne centree, encre y 22-39 (corps 15), largeur de ligne 381 px,
   debut colore puis suite en noir. On reprend la composition, pas la marque :
   le vert est celui de NORYVA et le contenu vient de notre offre.
   ========================================================================== */
.promo{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;
  text-align:center;background:#fff;min-height:60px;padding:8px var(--gutter);
  font-size:17px;line-height:1.3;color:var(--ink)}
/* « SUMMER Sale! » du master : premier mot en capitales grasses, suite dans la
   meme couleur mais en graisse normale. */
.promo__lead{font-weight:600;color:var(--g-600);letter-spacing:.01em}
.promo__lead b{font-weight:800;text-transform:uppercase;letter-spacing:.02em}
/* Le master n'emphase PAS son prix : « Only $149 + Fast, Free Shipping » est
   d'un seul tenant, en noir et en graisse normale. Seule l'ouverture est
   coloree. On fait pareil. */
.promo__price{font-weight:400;color:var(--ink)}
/* sans mention d'offre, le prix prend l'accent colore d'ouverture du master */
.promo__price--lead{color:var(--ink)}
.promo__rest{font-weight:400;color:var(--ink)}
.promo__sep{color:#b9c4bd;font-weight:400}

/* ===== rappel de la remise pendant le defilement ============================
   La meme offre que le bandeau du haut, jamais une seconde promotion.
   Desktop : onglet vertical pose dans la gouttiere GAUCHE, comme sur l'autre
   site de la proprietaire. A 1440 le contenu fait 1104 px centres, donc 168 px
   de marge de chaque cote : un onglet de
   39 px a 14 px du bord gauche ne touche aucun contenu. Le seuil est 1260 :
   c'est la largeur a partir de laquelle le bord droit de l'onglet (14 + 39)
   reste a gauche du bord gauche du contenu ((W - 1104) / 2), avec une marge.
   En dessous, l'onglet disparait et la barre d'achat collante prend le relais.
   Il ne capte pas le pointeur, ne porte aucun compte a rebours et n'annonce
   rien d'autre que le prix de reference et la remise premiere commande.
   ========================================================================== */
/* ---- rappel de la remise, dans le hero -----------------------------------
   Une ligne horizontale, centree sous le bouton, encadree de deux filets
   fins : lisible d'un coup d'oeil, elegante, integree a la composition. Ce
   n'est plus une languette verticale collee au bord de l'ecran, et elle ne
   flotte plus au-dessus des photos. Aucun prix n'y figure. */
.hpromo{display:flex;align-items:center;justify-content:center;gap:14px;
  margin:24px auto 0;max-width:460px;color:var(--g-600);
  font-size:.82rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.hpromo__t{white-space:nowrap}
.hpromo__d{flex:1 1 auto;height:1px;background:var(--border);min-width:18px}
@media(max-width:479px){
  .hpromo{gap:10px;font-size:.72rem;letter-spacing:.1em;max-width:340px}
}

/* la barre d'achat collante porte le meme prix et la meme remise */
.buybar__p b{font-weight:800;color:var(--g-900)}
.buybar__p small{color:var(--g-600);font-weight:700;letter-spacing:.04em}
.hero{text-align:center}
.hero__col{margin-left:auto;margin-right:auto;text-align:center}
.hero .tstat{text-align:center}
/* la pastille ronde du master, y compris en mobile.
   Le master ne met PAS ses coches en vert : elles sont dorees, et son vert ne
   sert qu'a deux endroits (accent du titre et bouton). Chez nous le vert etait
   partout — bandeau, pastille d'en-tete, coches, accent, bouton — ce qui
   alourdissait tout le haut. On reprend la repartition du master avec l'or
   NORYVA, celui qui sert deja aux etoiles de la section produit. */
.hero .ticks li{position:relative;padding-left:32px;text-align:left}
.hero .ticks li::before{content:"";position:absolute;left:0;top:0;width:21px;height:21px;
  border-radius:50%;background:#d9b45f;border:0;transform:none}
.hero .ticks li::after{content:"";position:absolute;left:6px;top:7px;width:8px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);
  border-radius:0}
@media(max-width:759px){
  /* le bouton d'en-tete reprend sa largeur naturelle */
  .hdr .btn--sm{min-width:auto;padding:11px 18px}
  .promo{min-height:48px;font-size:.94rem;padding:7px var(--gutter)}
  .hero .ticks{max-width:100%}
}

/* ===== reference_03 — composition produit, mesures relevees a 1440 ==========
   preuve sociale  y  87-98    x 638-800   gras 15, centree
   etoiles         y 141-155   x 598-841   244 de large, cinq etoiles dorees
   grande citation y 177-224   x 274-1166  une ligne, corps 46
   client verifie  y 245-261   x 933-1124  13, a droite du centre
   fiole           x 550-950   soit 400 de large, haut a y 251, elle descend
                   sous le pli et domine toute la scene, legerement inclinee
   citations       de x 258 a x 1194, trois a gauche trois a droite, gris tres
                   clair, corps 30, chacune suivie d'une petite mention
   ========================================================================== */
#composition{padding-top:33px;padding-bottom:0;overflow:hidden}
.comp__head{text-align:center;position:relative;z-index:3}
.comp__eye{font-weight:700;font-size:.94rem;color:#1f1f1d;margin:0 0 14px}
.comp__stars{display:flex;justify-content:center;margin:0 0 1px}
.comp__stars .stars{font-size:2.95rem;letter-spacing:.3em;color:#d9b45f;line-height:1}
.comp__q{font-size:clamp(1.9rem,3.72vw,3.35rem);line-height:1.12;letter-spacing:-.02em;
  max-width:920px;margin:0 auto;color:var(--ink)}
/* le master ne centre pas cette mention : elle est posee sous la fin de la
   citation, a droite (x 933-1124 pour un titre qui va jusqu'a 1166) */
.comp__vfd{display:flex;align-items:center;justify-content:flex-end;gap:8px;
  font-size:.86rem;color:var(--ink);margin:16px auto 0;max-width:920px;
  padding-right:56px}
.vtick{width:17px;height:17px;border-radius:50%;background:var(--g-600);flex:none;
  position:relative}
.vtick::after{content:"";position:absolute;left:5px;top:5px;width:7px;height:3.5px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

/* ===== la scene : la fiole domine, les citations l'entourent =================
   Mesures relevees sur le master a 1440 (capture redimensionnee, chrome retire) :

     fiole        etiquette verte large de 291 px sur une ligne horizontale,
                  bord gauche qui derive de 56 px sur 240 px de hauteur, soit
                  une inclinaison de 13 deg ; l'etiquette occupe 73,3 % de la
                  largeur de l'image, donc image rendue = 291*cos13/0,733 = 387
                  -> 400 px. Sommet du bouchon a y 283, la fiole descend sous
                  le pli et n'est jamais entierement dans l'ecran.
     citations    bande de x 255 a x 1197. Colonne gauche alignee a droite,
                  bord droit x 605, largeur utile 350. Colonne droite alignee a
                  gauche, bord gauche x 860, largeur utile 337. Corps 30,
                  interligne 35,4 (1,18), gris tres clair. Chaque fragment est
                  suivi d'une mention 13 px.
     profondeur   la fiole passe DEVANT les citations : dans le master la
                  mention de la premiere citation est coupee par le verre.
   ========================================================================== */
.comp{position:relative;display:block;height:760px;margin-top:14px}


/* l'axe de la fiole n'est pas l'axe de la page : dans le master le bouchon
   est centre sur x 675 pour un viewport de 1440, soit 45 px a gauche du centre */
.comp__prod{position:absolute;z-index:2;top:-5px;left:50%;display:block;
  width:400px;line-height:0;margin-left:-242px;
  --vr:13deg;--vs:1;--vy:0px;
  transform:translateY(var(--vy)) rotate(var(--vr)) scale(var(--vs));
  transform-origin:50% 42%}
.comp__prod img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 34px 52px rgba(6,57,42,.20))}

/* la bande de citations est centree sur l'axe de la fiole, pas sur la page */
.comp .qlayer{position:absolute;top:0;left:calc(50% + 6px);width:912px;height:100%;
  transform:translateX(-50%);z-index:1;pointer-events:none;overflow:visible}
.qf{position:absolute;margin:0}
.qf q{display:block;position:static;quotes:none;font-size:30px;line-height:1.18;letter-spacing:-.01em;
  color:#c9c9c4;font-weight:400}
.qf figcaption{display:flex;align-items:center;gap:7px;margin-top:10px;
  font-size:13px;color:#d0d0cb}
.qf figcaption .vtick{width:15px;height:15px;background:#dcdcd7}
.qf figcaption .vtick::after{left:4px;top:4.5px;width:6px;height:3px;border-width:1.7px}
/* Colonne gauche : bord gauche fixe a x 255 comme le master ; la largeur
   diminue d'un etage a l'autre pour suivre la diagonale de la fiole, sinon le
   texte tomberait sur la partie opaque de l'etiquette et disparaitrait.
   Colonne droite : bord gauche fixe a x 885, la valeur du master. */
.qf--l{left:0;width:350px;text-align:right}
.qf--l figcaption{justify-content:flex-end}
.qf--r{right:0;width:312px;text-align:left}
.qf--l[data-q="3"]{width:284px}
.qf--l[data-q="5"]{width:251px}
.qf[data-q="1"]{top:101px}
.qf[data-q="2"]{top:149px}
/* le master decale la rangee du milieu : la droite est PLUS HAUTE que la gauche */
.qf[data-q="3"]{top:303px}
.qf[data-q="4"]{top:280px}
.qf[data-q="5"]{top:473px}
.qf[data-q="6"]{top:492px}

/* ----- animation de la fiole -------------------------------------------------
   Deux couches qui ne se marchent pas dessus :
     .comp__prod      (conteneur) porte le DEFILEMENT, via --vr/--vs/--vy que
                      le script met a jour. Valeurs par defaut = geometrie
                      master, donc sans script la fiole est deja bien posee.
     .comp__prod img  porte l'ENTREE : une transition CSS declenchee une seule
                      fois quand la section entre dans l'ecran.
   data-motion n'est pose que par le script ; tout ce qui suit est donc inerte
   si le script ne tourne pas. */
.comp[data-motion="on"] .comp__prod{will-change:transform}
.comp[data-motion="on"] .comp__prod img{opacity:0;
  transform:translateY(42px) rotate(8deg) scale(.88);transform-origin:50% 42%}
.comp[data-motion="on"][data-seen="1"] .comp__prod img{opacity:1;
  transform:none;
  transition:opacity .62s ease-out, transform .92s cubic-bezier(.22,.68,.32,1)}
.comp[data-motion="on"] .qf{--qy:0px;transform:translateY(var(--qy))}

@media(prefers-reduced-motion:reduce){
  /* aucun mouvement. Le script se retire de lui-meme ; cette regle couvre le
     cas ou la preference change apres la pose des attributs. */
  .comp[data-motion="on"] .comp__prod img{opacity:1;transform:none;transition:none}
  .comp[data-motion="on"] .comp__prod{transform:rotate(13deg)}
  .comp[data-motion="on"] .qf{transform:none}
}

@media(max-width:1199px){
  .comp{height:calc(352px + 26vw)}
  .comp__prod{width:28vw;margin-left:-16.8vw}
  .comp .qlayer{width:calc(100% - 2 * var(--gutter))}
  .qf{width:29%}
  .qf q{font-size:2.3vw}
  .qf figcaption{font-size:12px}
}
@media(max-width:899px){
  /* sous 900 il n'y a plus de place pour trois colonnes : la fiole passe au
     centre d'une pile, les fragments se lisent dessous, aucun recouvrement */
  .comp{height:auto;display:flex;flex-direction:column;align-items:center}
  /* en pile, la mention reprend l'axe central : le decalage du master n'a de
     sens que sous un titre large */
  .comp__vfd{justify-content:center;padding-right:0}
  .comp__prod{order:-1;position:relative;top:0;left:auto;margin:0 auto 30px;
    width:min(66vw,300px);transform:rotate(9deg)}
  .comp[data-motion="on"] .comp__prod{transform:rotate(9deg)}
  .comp[data-motion="on"] .comp__prod img{opacity:1;transform:none;transition:none}
  .comp .qlayer{position:static;width:100%;height:auto;transform:none;
    display:grid;gap:20px;padding:0 var(--gutter) 6px}
  .qf{position:static;width:100%;text-align:center}
  /* les largeurs par etage n'ont de sens qu'en superposition : ici on les annule
     avec la meme specificite, sinon elles decalent les fragments hors de l'axe */
  .qf--l,.qf--r,.qf--l[data-q="3"],.qf--l[data-q="5"]{left:auto;right:auto;width:100%;
    text-align:center}
  .qf[data-q="1"],.qf[data-q="2"],.qf[data-q="3"],
  .qf[data-q="4"],.qf[data-q="5"],.qf[data-q="6"]{top:auto}
  .qf--l figcaption,.qf figcaption{justify-content:center}
  .qf q{font-size:1.15rem;color:#b9b9b3}
}
@media(max-width:539px){
  .comp__prod{width:min(72vw,240px)}
  .qf q{font-size:1.04rem}
}


/* Mention d'echantillon : visible, jamais confondable avec un avis reel.
   Elle n'existe que dans /design-preview/ — la construction de production
   retire le jeu de donnees qui porte le drapeau sample. */
.rc__s--sample{color:var(--gold);font-weight:800;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase}


/* ---- mention d'echantillon sur une carte d'avis --------------------------
   Une carte d'echantillon garde TOUT le dessin de la carte d'avis — avatar,
   prenom, etoiles, commentaire — et remplace la mention de verification par
   celle-ci. Elle ne peut donc pas se lire comme un client verifie. */
.rc__s--sample{color:var(--gold);font-weight:800;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;margin:12px 0 0}
.qf--sample figcaption{color:#c9ab7d}