/* ══════════════════════════════════════════════════════════════════════════
   NutriSound.re : la feuille de style du site public
   ══════════════════════════════════════════════════════════════════════════
   Mêmes couleurs que l'application (or, crème, violet, rose) pour qu'un
   visiteur qui passe du site à l'appli ne change pas de maison. Deux
   familles seulement : Fraunces pour les titres, dont l'axe optique donne
   aux grandes tailles un dessin plus organique, Montserrat pour le texte,
   qui est déjà celle de l'application.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --or:#866619; --or-clair:#a9841f; --or-pale:rgba(134,102,25,.09);
  --or-ligne:rgba(134,102,25,.22);
  --violet:#4a2a7a; --rose:#c93a76; --dore:#c69e2e;
  --fond:#f6eee2; --carte:#fffdf8; --encre:#2e2612; --gris:#7b7360;
  --vert:#5d7f18; --rouge:#b3261e;
  --ombre:0 10px 34px rgba(74,58,20,.10);
  --ombre-h:0 22px 60px rgba(74,58,20,.16);
  --r:20px; --r-s:13px;
  --spectre:linear-gradient(90deg,var(--violet),var(--rose) 52%,var(--dore));
  --large:1180px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{
  background:
    radial-gradient(120% 55% at 12% -8%, rgba(201,58,118,.08), transparent 62%),
    radial-gradient(110% 50% at 92% -2%, rgba(74,42,122,.08), transparent 60%),
    var(--fond);
  color:var(--encre);
  font:400 16.5px/1.62 Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:var(--or);text-decoration:none}
a:hover{text-decoration:underline}
[hidden]{display:none!important}
::selection{background:rgba(201,58,118,.2)}

/* ── Rythme général ──────────────────────────────────────────────────── */
.enveloppe{max-width:var(--large);margin:0 auto;padding:0 22px}
section{padding:clamp(56px,8vw,104px) 0;position:relative}
section + section{border-top:1px solid rgba(134,102,25,.13)}

h1,h2,h3,.chiffre{font-family:Fraunces,Georgia,serif;font-weight:600;
  letter-spacing:-.015em;line-height:1.08}
h1{font-size:clamp(34px,5.6vw,62px)}
h2{font-size:clamp(27px,3.6vw,42px)}
h3{font-size:clamp(19px,2vw,23px);line-height:1.22}
.kicker{font-family:Montserrat,sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--or);
  display:inline-flex;align-items:center;gap:9px;margin-bottom:16px}
.kicker::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--spectre)}
.chapo{font-size:clamp(17px,1.5vw,19.5px);color:#50482f;max-width:62ch}
.muted{color:var(--gris)}
.petit{font-size:13.5px;line-height:1.55}
.centre{text-align:center}
.centre .chapo{margin-left:auto;margin-right:auto}
.centre .kicker{justify-content:center}
.tete{margin-bottom:clamp(30px,4vw,52px)}

/* ── Boutons ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:600 15.5px/1 Montserrat,sans-serif;padding:16px 26px;border-radius:999px;
  border:1px solid var(--or);background:var(--or);color:#fff;cursor:pointer;
  text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,background .16s}
.btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 14px 30px rgba(134,102,25,.28)}
.btn:active{transform:translateY(0)}
.btn.clair{background:var(--carte);color:var(--or)}
.btn.clair:hover{background:#fff}
.btn.sm{padding:11px 18px;font-size:14px}
.btn.fin{background:transparent;border-color:var(--or-ligne);color:var(--encre)}
.btn:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{
  outline:2.5px solid var(--rose);outline-offset:3px}
.rangee{display:flex;flex-wrap:wrap;gap:13px;align-items:center}
.rangee.centre{justify-content:center}

/* ── Cartes ──────────────────────────────────────────────────────────── */
.carte{background:var(--carte);border:1px solid var(--or-ligne);
  border-radius:var(--r);padding:clamp(20px,2.4vw,30px);box-shadow:var(--ombre)}
.grille{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ── En-tête ─────────────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);
  background:rgba(246,238,226,.84);border-bottom:1px solid transparent;
  transition:border-color .2s,box-shadow .2s}
.top.colle{border-bottom-color:rgba(134,102,25,.16);box-shadow:0 6px 24px rgba(74,58,20,.06)}
.top-in{max-width:var(--large);margin:0 auto;padding:11px 22px;
  display:flex;align-items:center;gap:18px}
.marque{display:flex;align-items:center;gap:10px;font-family:Fraunces,serif;
  font-size:21px;font-weight:600;color:var(--encre);letter-spacing:-.02em}
.marque:hover{text-decoration:none}
.marque svg{width:30px;height:30px;flex:none}
.marque i{font-family:Montserrat,sans-serif;font-style:normal;font-size:10px;
  font-weight:700;letter-spacing:.12em;color:var(--gris);text-transform:uppercase;
  border-left:1px solid var(--or-ligne);padding-left:9px;margin-left:2px}
.top .top-nav{margin-left:auto;display:flex;gap:4px}
.top .top-nav a{font-size:14px;font-weight:500;color:#4c442c;padding:9px 12px;border-radius:999px}
.top .top-nav a:hover{background:var(--or-pale);text-decoration:none;color:var(--or)}
.top-act{display:flex;align-items:center;gap:10px}
.top-act .lien{font-size:14px;font-weight:600}
.burger{display:none;background:none;border:1px solid var(--or-ligne);border-radius:12px;
  width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:2px;background:var(--encre);
  border-radius:2px;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;
  width:18px;height:2px;background:var(--encre);border-radius:2px}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.menu-mobile{display:none;border-top:1px solid var(--or-ligne);background:var(--carte)}
.menu-mobile.ouvert{display:block}
.menu-mobile a{display:block;padding:14px 22px;font-size:15px;font-weight:500;color:#4c442c;
  border-bottom:1px solid rgba(134,102,25,.1)}

/* ── Ouverture ───────────────────────────────────────────────────────── */
.hero{padding-top:clamp(40px,5vw,64px)}
.hero-grille{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,4vw,56px);
  align-items:center}
.hero h1 em{font-style:normal;background:var(--spectre);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.hero .chapo{margin-top:20px}
.hero .rangee{margin-top:28px}
.sous-btn{font-size:13px;color:var(--gris);margin-top:14px}
.preuves{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.puce{display:inline-flex;align-items:center;gap:7px;background:var(--carte);
  border:1px solid var(--or-ligne);border-radius:999px;padding:7px 14px;
  font-size:12.5px;font-weight:600;color:#554c31}
.puce b{color:var(--or);font-weight:700}

/* ── La démonstration vivante ────────────────────────────────────────── */
.demo{background:var(--carte);border:1px solid var(--or-ligne);border-radius:26px;
  box-shadow:var(--ombre-h);padding:clamp(18px,2vw,24px);position:relative;overflow:hidden}
.demo::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--spectre)}
.demo-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:14px;padding-top:4px}
.demo-tete b{font-size:13.5px}
.vivant{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--vert)}
.vivant::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--vert);
  box-shadow:0 0 0 0 rgba(93,127,24,.5);animation:pouls 2s infinite}
@keyframes pouls{70%{box-shadow:0 0 0 7px rgba(93,127,24,0)}100%{box-shadow:0 0 0 0 rgba(93,127,24,0)}}
.choix{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.choix button{font:600 12.5px/1 Montserrat,sans-serif;padding:9px 13px;border-radius:999px;
  border:1px solid var(--or-ligne);background:transparent;color:#554c31;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.choix button:hover{background:var(--or-pale)}
.choix button[aria-pressed=true]{background:var(--or);border-color:var(--or);color:#fff}
.demo-corps{display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:start}
.vignette{width:118px;height:118px;border-radius:var(--r-s);background:var(--or-pale);
  border:1px solid var(--or-ligne);display:grid;place-items:center;overflow:hidden}
.vignette img{width:100%;height:100%;object-fit:contain;background:#fff}
.vignette span{font-size:11px;color:var(--gris);text-align:center;padding:8px}
.fiche-nom{font-family:Fraunces,serif;font-size:19px;font-weight:600;line-height:1.2}
.fiche-marque{font-size:12.5px;color:var(--gris);margin-top:3px}
.jauge{margin-top:12px}
.jauge svg{width:100%;max-width:280px;margin:0 auto}
.hz{font-family:Fraunces,serif;font-size:clamp(38px,5vw,52px);font-weight:600;
  line-height:1;text-align:center;letter-spacing:-.03em}
.hz small{font-family:Montserrat,sans-serif;font-size:16px;font-weight:600;
  color:var(--gris);margin-left:5px;letter-spacing:0}
.hz-note{text-align:center;font-size:12.5px;color:var(--gris);margin-top:5px}
.bande{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;padding:6px 13px;border-radius:999px;
  border:1px solid var(--or-ligne);background:var(--or-pale);color:#554c31}
.bande.b-tres-basse,.bande.b-basse{background:rgba(179,38,30,.09);
  border-color:rgba(179,38,30,.22);color:#8e2018}
.bande.b-haute,.bande.b-tres-haute{background:rgba(93,127,24,.11);
  border-color:rgba(93,127,24,.25);color:#4b6714}
.demo-bas{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  justify-content:center;border-top:1px solid rgba(134,102,25,.13);padding-top:15px}
.demo-saisie{display:flex;gap:8px;margin-top:12px}
.demo-saisie input{flex:1;min-width:0;font:400 14px Montserrat,sans-serif;padding:12px 14px;
  border:1px solid var(--or-ligne);border-radius:999px;background:#fff;color:var(--encre)}
.facteurs{margin-top:14px;display:grid;gap:7px}
.facteurs li{list-style:none;display:flex;gap:10px;align-items:flex-start;font-size:13.5px}
.facteurs .s{flex:none;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:#fff;margin-top:2px}
.facteurs .p .s{background:var(--vert)}
.facteurs .m .s{background:var(--rouge)}
.facteurs em{font-style:normal;color:var(--gris);font-size:12.5px;display:block}
.demo-note{font-size:12px;color:var(--gris);margin-top:14px;line-height:1.5}
.onde{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:26px;margin-top:10px}
.onde i{width:4px;border-radius:2px;background:var(--spectre);
  height:calc(5px + var(--h) * 4px);transition:height .08s linear;opacity:.8}

/* ── Le principe : l'échelle ─────────────────────────────────────────── */
.echelle{margin-top:30px}
.echelle-barre{height:16px;border-radius:999px;background:var(--spectre)}
.echelle-reperes{display:flex;justify-content:space-between;margin-top:9px;
  font-size:12px;color:var(--gris)}
.echelle-pts{position:relative;height:72px;margin-top:6px}
.echelle-pt{position:absolute;top:0;transform:translateX(-50%);text-align:center;width:94px}
.echelle-pt::before{content:"";display:block;width:1px;height:14px;
  background:var(--or-ligne);margin:0 auto 6px}
.echelle-pt b{display:block;font-size:13px}
.echelle-pt span{font-size:11.5px;color:var(--gris)}

/* ── Chapitres du fondement ──────────────────────────────────────────── */
.chap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,54px);
  align-items:center;padding:clamp(28px,4vw,46px) 0}
.chap + .chap{border-top:1px solid rgba(134,102,25,.13)}
.chap.inverse .chap-fig{order:-1}
.chiffre{font-size:clamp(48px,6vw,78px);line-height:.85;color:transparent;
  -webkit-text-stroke:1.4px rgba(134,102,25,.45);margin-bottom:10px;display:block}
.chap-fig{background:var(--carte);border:1px solid var(--or-ligne);border-radius:var(--r);
  padding:20px;box-shadow:var(--ombre)}
.chap-fig figcaption{font-size:12.5px;color:var(--gris);margin-top:12px;line-height:1.5}
.chap p + p{margin-top:13px}
.chap .source{font-size:12.5px;color:var(--gris);margin-top:14px;
  padding-left:13px;border-left:2px solid var(--or-ligne)}

/* ── Les deux moteurs ────────────────────────────────────────────────── */
.moteur{position:relative;overflow:hidden}
.moteur::before{content:"";position:absolute;inset:0 0 auto;height:4px}
.moteur.m1::before{background:linear-gradient(90deg,var(--or),var(--dore))}
.moteur.m2::before{background:var(--spectre)}
.moteur h3{margin:8px 0 6px}
.moteur .tag{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris)}
.moteur ul{margin-top:14px;display:grid;gap:9px}
.moteur li{list-style:none;position:relative;padding-left:22px;font-size:14.5px}
.moteur li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  border-radius:50%;background:var(--or)}
.moteur.m2 li::before{background:var(--spectre)}
.niveau{margin-top:18px;background:var(--or-pale);border-radius:var(--r-s);
  padding:13px 15px;font-size:13px;line-height:1.55}
.niveau b{display:block;margin-bottom:3px;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--or)}

/* ── Le parcours ─────────────────────────────────────────────────────── */
.etapes{counter-reset:e;display:grid;gap:16px}
.etape{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;
  background:var(--carte);border:1px solid var(--or-ligne);border-radius:var(--r);
  padding:20px 22px;box-shadow:var(--ombre)}
.etape::before{counter-increment:e;content:counter(e);font-family:Fraunces,serif;
  font-size:26px;font-weight:600;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;background:var(--or-pale);color:var(--or);
  border:1px solid var(--or-ligne)}
.etape h3{font-size:19px;margin-bottom:5px}
.etape p{font-size:14.5px;color:#50482f}

/* ── Les écrans ──────────────────────────────────────────────────────── */
.ecrans{display:flex;gap:26px;overflow-x:auto;padding:6px 22px 28px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.ecrans::-webkit-scrollbar{height:9px}
.ecrans::-webkit-scrollbar-thumb{background:var(--or-ligne);border-radius:9px}
.ecran{flex:none;width:286px;scroll-snap-align:center}
.ecran-lg{font-family:Fraunces,serif;font-size:19px;font-weight:600;margin:16px 0 5px}
.ecran p{font-size:13.5px;color:var(--gris);line-height:1.5}
.tel{width:286px;height:574px;border-radius:40px;background:#17150f;padding:9px;
  box-shadow:var(--ombre-h);position:relative}
.tel::after{content:"";position:absolute;top:19px;left:50%;transform:translateX(-50%);
  width:62px;height:5px;border-radius:5px;background:rgba(255,255,255,.22)}
.tel-ecran{width:100%;height:100%;border-radius:32px;overflow:hidden;position:relative;
  background:
    radial-gradient(120% 55% at 12% -8%, rgba(201,58,118,.10), transparent 62%),
    radial-gradient(110% 50% at 92% -2%, rgba(74,42,122,.10), transparent 60%),
    var(--fond);
  font-size:12px;padding:34px 13px 13px;display:flex;flex-direction:column;gap:9px}
.tel-barre{position:absolute;top:0;left:0;right:0;height:28px;display:flex;
  align-items:center;justify-content:space-between;padding:0 16px;font-size:9.5px;
  font-weight:700;color:#6b6350}
.tel-tete{display:flex;align-items:center;gap:7px;font-family:Fraunces,serif;
  font-size:14px;font-weight:600}
.tel-tete svg{width:17px;height:17px;flex:none}
.mc{background:var(--carte);border:1px solid var(--or-ligne);border-radius:13px;
  padding:11px 12px;box-shadow:0 5px 16px rgba(74,58,20,.07)}
.mc h4{font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--or);margin-bottom:7px}
.mc p{font-size:11px;line-height:1.45;color:#50482f}
.mc .mini{font-size:10px;color:var(--gris);line-height:1.4}
.m-hz{font-family:Fraunces,serif;font-size:31px;font-weight:600;text-align:center;line-height:1}
.m-hz small{font-family:Montserrat,sans-serif;font-size:11px;color:var(--gris);font-weight:600}
.m-bande{display:block;text-align:center;font-size:9px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin-top:6px}
.m-lst{display:grid;gap:5px;margin-top:2px}
.m-lst li{list-style:none;display:flex;gap:7px;font-size:10.5px;line-height:1.35;
  align-items:flex-start}
.m-lst .s{flex:none;width:14px;height:14px;border-radius:50%;color:#fff;font-size:9px;
  font-weight:700;display:grid;place-items:center;margin-top:1px}
.m-lst .p .s{background:var(--vert)}
.m-lst .m .s{background:var(--rouge)}
.m-btn{display:block;text-align:center;background:var(--or);color:#fff;border-radius:999px;
  padding:9px;font-size:11px;font-weight:600}
.m-btn.clair{background:var(--carte);color:var(--or);border:1px solid var(--or-ligne)}
.m-viseur{flex:1;border-radius:15px;background:linear-gradient(160deg,#2b2a24,#14130f);
  position:relative;display:grid;place-items:center;overflow:hidden}
.m-coins{position:absolute;inset:16%}
.m-coins i{position:absolute;width:26px;height:26px;border:2.5px solid rgba(255,255,255,.9);
  border-radius:4px}
.m-coins i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.m-coins i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.m-coins i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.m-coins i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.m-barres{display:flex;gap:2px;align-items:flex-end;height:46px}
.m-barres i{width:3px;background:#fff;border-radius:1px}
.m-laser{position:absolute;left:14%;right:14%;height:2px;background:var(--rose);
  box-shadow:0 0 12px var(--rose);top:48%}
.m-pastille{display:inline-block;font-size:9.5px;font-weight:700;padding:4px 9px;
  border-radius:999px;background:var(--or-pale);color:var(--or);border:1px solid var(--or-ligne)}
.m-organe{display:flex;gap:9px;align-items:center}
.m-organe .rond{flex:none;width:34px;height:34px;border-radius:50%;background:var(--spectre);
  display:grid;place-items:center;color:#fff;font-family:Fraunces,serif;font-size:14px;
  font-weight:600}
.m-alt{display:flex;gap:7px;align-items:center;font-size:10.5px;padding:6px 0}
.m-alt + .m-alt{border-top:1px solid rgba(134,102,25,.13)}
.m-alt b{margin-left:auto;font-family:Fraunces,serif;font-size:13px}

/* ── Photographies ───────────────────────────────────────────────────── */
.photo{width:100%;height:auto;display:block;border-radius:var(--r);
  border:1px solid var(--or-ligne);box-shadow:var(--ombre);background:var(--or-pale)}
.photo-lg{font-size:12.5px;color:var(--gris);margin-top:11px;line-height:1.5}
.photo-lg b{color:var(--encre);font-weight:700}
.rayons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:clamp(28px,4vw,44px)}
.duo .photo{aspect-ratio:860/1075;object-fit:cover}

/* ── Indépendance ────────────────────────────────────────────────────── */
.indep{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(24px,4vw,46px);
  align-items:center}
.indep ul{display:grid;gap:11px;margin-top:18px}
.indep li{list-style:none;position:relative;padding-left:28px;font-size:15px;line-height:1.55}
.indep li::before{content:"\2715";position:absolute;left:0;top:0;color:var(--rouge);
  font-weight:700;font-size:15px}
.indep li.oui::before{content:"\2713";color:var(--vert)}

/* ── Science ─────────────────────────────────────────────────────────── */
.pub{display:flex;flex-direction:column;gap:9px}
.pub .revue{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--or)}
.pub h3{font-size:18.5px}
.pub p{font-size:14px;color:#50482f;flex:1}
.pub a{font-size:13.5px;font-weight:600}
.cadre{background:linear-gradient(180deg,rgba(74,42,122,.05),rgba(201,58,118,.05));
  border:1px solid var(--or-ligne);border-radius:var(--r);padding:clamp(22px,3vw,34px);
  margin-top:28px}
.cadre h3{margin-bottom:14px}
.deux-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:18px}
.deux-col ul{display:grid;gap:9px}
.deux-col li{list-style:none;position:relative;padding-left:26px;font-size:14.5px;line-height:1.5}
.deux-col li::before{position:absolute;left:0;top:0;font-weight:700;font-size:15px}
.oui li::before{content:"\2713";color:var(--vert)}
.non li::before{content:"\2715";color:var(--rouge)}
.deux-col h4{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:11px;color:#554c31}

/* ── Données, confidentialité ────────────────────────────────────────── */
.source-carte{display:flex;gap:14px;align-items:flex-start}
.source-carte .ic{flex:none;width:42px;height:42px;border-radius:12px;background:var(--or-pale);
  border:1px solid var(--or-ligne);display:grid;place-items:center}
.source-carte .ic svg{width:21px;height:21px}
.source-carte b{display:block;font-size:15px;margin-bottom:3px}
.source-carte span{font-size:13.5px;color:#50482f;line-height:1.5}

/* ── Tarif ───────────────────────────────────────────────────────────── */
.tarifs{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:800px;margin:0 auto}
.tarif{text-align:center;position:relative}
.tarif.vedette{border-color:var(--or);box-shadow:0 20px 56px rgba(134,102,25,.18)}
.tarif .etiq{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--or);color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 15px;border-radius:999px;white-space:nowrap}
.tarif .prix{font-family:Fraunces,serif;font-size:50px;font-weight:600;line-height:1;
  margin:14px 0 4px;letter-spacing:-.03em}
.tarif .prix span{font-family:Montserrat,sans-serif;font-size:15px;font-weight:600;
  color:var(--gris)}
.tarif .eq{font-size:13px;color:var(--gris)}
.tarif ul{margin:20px 0;display:grid;gap:9px;text-align:left}
.tarif li{list-style:none;position:relative;padding-left:25px;font-size:14px;line-height:1.5}
.tarif li::before{content:"\2713";position:absolute;left:0;top:-1px;color:var(--vert);
  font-weight:700}
.tarif .btn{width:100%}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq{max-width:820px;margin:0 auto;display:grid;gap:11px}
.faq details{background:var(--carte);border:1px solid var(--or-ligne);
  border-radius:var(--r-s);overflow:hidden}
.faq summary{cursor:pointer;padding:17px 50px 17px 20px;font-weight:600;font-size:15.5px;
  position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:14px;font-size:22px;
  color:var(--or);font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .rep{padding:0 20px 19px;font-size:14.5px;color:#50482f;line-height:1.6}
.faq .rep p + p{margin-top:11px}

/* ── Appel final, pied ───────────────────────────────────────────────── */
.final{text-align:center;background:
  radial-gradient(90% 120% at 50% 0%, rgba(201,58,118,.09), transparent 65%)}
.final h2{max-width:22ch;margin:0 auto 18px}
.signature{font-family:Fraunces,serif;font-size:clamp(17px,2vw,21px);color:var(--or);
  margin-top:26px;font-style:italic}
.pied{border-top:1px solid var(--or-ligne);padding:44px 0 36px;font-size:13.5px;
  color:var(--gris)}
.pied-grille{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:28px}
.pied b{display:block;color:var(--encre);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:11px}
.pied a{color:#554c31;display:block;padding:3px 0}
.pied .avert{margin-top:30px;padding-top:22px;border-top:1px solid rgba(134,102,25,.13);
  font-size:12.5px;line-height:1.6}

/* ── Apparition au défilement ────────────────────────────────────────── */
.ap{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.ap.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ap{opacity:1;transform:none;transition:none}
  .vivant::before{animation:none}
}

/* ── Adaptations ─────────────────────────────────────────────────────── */
@media (max-width:980px){
  .hero-grille,.chap,.g4,.deux-col,.indep{grid-template-columns:1fr}
  .rayons{grid-template-columns:1fr 1fr}
  .chap.inverse .chap-fig{order:0}
  .g3,.g2{grid-template-columns:1fr 1fr}
  .top .top-nav{display:none}
  .burger{display:flex}
  .pied-grille{grid-template-columns:1fr 1fr}
}
/* Sous 420 px, l'en-tête doit tenir sur UNE ligne : la marque, le bouton
   et le menu. Sans cela, « Essayer 7 jours » se coupait en deux. */
@media (max-width:420px){
  .top-in{gap:10px;padding:10px 16px}
  .marque{font-size:18px}
  .marque svg{width:26px;height:26px}
  .top-act .btn.sm{padding:10px 13px;font-size:13px;white-space:nowrap}
  .burger{width:38px;height:38px}
}

@media (max-width:620px){
  body{font-size:16px}
  .rayons,.duo{grid-template-columns:1fr}
  .g2,.g3,.tarifs{grid-template-columns:1fr}
  .demo-corps{grid-template-columns:1fr}
  .vignette{width:100%;height:150px}
  .top-act .lien{display:none}
  .marque i{display:none}
  .echelle-pt{width:74px}
  .echelle-pt b{font-size:12px}
  .echelle-pt span{font-size:10.5px}
  .pied-grille{grid-template-columns:1fr}
  .enveloppe{padding:0 17px}
  .ecrans{padding-left:17px;padding-right:17px;gap:18px}
}