/* ══════════════════════════════════════════════════════════════════════════
   NutriSound.re : la page de vente
   ══════════════════════════════════════════════════════════════════════════
   Posée PAR-DESSUS site.css, qui garde les fondations (couleurs, boutons,
   cartes, démonstration, FAQ) et sert aussi le dossier scientifique. Ici,
   seulement ce qui fait vendre : l'ouverture, les téléphones, le contraste
   rouge / vert, la comparaison, le tarif et la barre d'appel du téléphone.

   La couleur du verdict est la même que dans l'application, du rouge au
   vert. C'est elle qui porte le message, sur la page comme à l'écran.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --verdict:linear-gradient(90deg,#b3261e,#d4622a 26%,#c9972a 50%,#7d9a22 74%,#4f8a1f);
  --v-rouge:#b3261e; --v-ocre:#b07d16; --v-vert:#4f8a1f;
}

.vente section + section{border-top:0}
.v-fond-doux{background:linear-gradient(180deg,rgba(255,253,248,.62),rgba(255,253,248,.34))}

/* ── Le bouton principal : plus grand, plus chaud, et il respire ─────────── */
.btn-xl{padding:19px 30px;font-size:16.5px;font-weight:700;
  background:linear-gradient(180deg,#9a7820,#7d5f15);border-color:#7a5c14;
  box-shadow:0 12px 28px -8px rgba(134,102,25,.55),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-xl:hover{box-shadow:0 18px 38px -10px rgba(134,102,25,.62),inset 0 1px 0 rgba(255,255,255,.22)}

/* ── Ouverture ───────────────────────────────────────────────────────── */
.v-hero{padding:clamp(34px,5vw,70px) 0 clamp(40px,6vw,84px);overflow:hidden}
.v-hero-grille{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,60px);
  align-items:center}
.v-hero h1{font-size:clamp(38px,5.9vw,70px);line-height:1.02;letter-spacing:-.025em}
.v-hero h1 em{font-style:normal;background:var(--verdict);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.v-hero .chapo{margin-top:22px;font-size:clamp(17px,1.45vw,19.5px)}
.v-hero .rangee{margin-top:30px}
.v-rassure{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:20px}
.v-rassure li,.v-coches li{list-style:none;position:relative;padding-left:24px;font-size:14px;
  font-weight:600;color:#4c442c}
.v-rassure li::before,.v-coches li::before{content:"";position:absolute;left:0;top:3px;width:16px;
  height:16px;border-radius:50%;background:var(--v-vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.3l2.3 2.3 4.9-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.v-coches{display:grid;gap:10px;margin:22px 0 26px}

/* Les deux téléphones : celui de derrière dit « rouge », celui de devant
   dit « vert ». Ils se chevauchent assez pour former une seule image. */
.v-hero-visuel{position:relative;height:clamp(520px,52vw,660px)}
.v-hero-visuel .iphone{position:absolute;top:50%;width:clamp(220px,21vw,286px)}
.iphone-arriere{left:2%;transform:translateY(-52%) rotate(-8deg) scale(.9);
  filter:saturate(.96);z-index:1}
.iphone-avant{right:4%;transform:translateY(-46%) rotate(4deg);z-index:2}
.v-bulle{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;
  padding:10px 15px;border-radius:999px;font-size:13px;font-weight:700;
  background:rgba(255,253,248,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 14px 32px -12px rgba(60,40,10,.35)}
.v-bulle i{width:10px;height:10px;border-radius:50%}
.v-bulle-rouge{left:0;bottom:15%;color:var(--v-rouge)}
.v-bulle-rouge i{background:var(--v-rouge);box-shadow:0 0 0 4px rgba(179,38,30,.16)}
.v-bulle-verte{right:0;top:12%;color:var(--v-vert)}
.v-bulle-verte i{background:var(--v-vert);box-shadow:0 0 0 4px rgba(79,138,31,.16)}
@media (prefers-reduced-motion:no-preference){
  .iphone-avant{animation:flotte 7s ease-in-out infinite}
  .v-bulle-verte{animation:flotte 7s ease-in-out -2.5s infinite}
  .v-bulle-rouge{animation:flotte 8s ease-in-out -1s infinite}
}
@keyframes flotte{50%{translate:0 -9px}}

/* ── Le cadre d'iPhone ──────────────────────────────────────────────────
   Dessiné en CSS : il reste net à toutes les tailles, et l'image ne porte
   que l'écran. Un liseré clair pour le bord en titane, un second pour le
   verre, l'ombre portée en deux couches pour la profondeur. */
.iphone{aspect-ratio:390/844;width:100%;max-width:300px;border-radius:15.5%/7.2%;
  padding:3.1%;background:linear-gradient(150deg,#3a3833,#121210 46%,#2a2825);
  box-shadow:inset 0 0 0 1.4px #6c685f,inset 0 0 0 3.5px #0b0b0a,
    0 46px 70px -34px rgba(58,38,10,.55),0 20px 34px -22px rgba(0,0,0,.45);
  position:relative;margin:0}
.iphone::before,.iphone::after{content:"";position:absolute;width:3px;border-radius:2px;
  background:linear-gradient(90deg,#2a2825,#56524a)}
.iphone::before{left:-2px;top:19%;height:7%;box-shadow:0 9.5em 0 #3a3732}
.iphone::after{right:-2px;top:25%;height:11%}
.iphone img{width:100%;height:100%;object-fit:cover;border-radius:13%/6%;display:block;
  background:#f3ebdf}

/* ── La bande de confiance ───────────────────────────────────────────── */
.v-confiance{background:#1f1a10;color:#efe6d2}
.v-confiance-in{display:flex;flex-wrap:wrap;justify-content:space-around;gap:12px 28px;
  padding-top:20px;padding-bottom:20px;font-size:14.5px;font-weight:500}
.v-confiance b{font-family:Fraunces,serif;font-size:24px;font-weight:600;color:#d9b54a;
  margin-right:7px;letter-spacing:-.02em}

/* ── Le problème ─────────────────────────────────────────────────────── */
.v-douleurs .carte{display:flex;flex-direction:column;gap:10px}
.v-num{align-self:flex-start;font:700 11.5px/1 Montserrat,sans-serif;letter-spacing:.06em;
  color:var(--v-rouge);background:rgba(179,38,30,.08);border:1px solid rgba(179,38,30,.18);
  padding:7px 11px;border-radius:999px}
.v-douleurs p{font-size:15px;color:#50482f}

/* ── Les trois gestes ────────────────────────────────────────────────── */
.v-etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,40px)}
.v-etape{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.v-etape .iphone{max-width:258px}
.v-etape h3{margin:12px 0 8px}
.v-etape p{font-size:15px;color:#50482f;max-width:34ch;margin:0 auto}
.v-pastille{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--or);color:#fff;font:600 18px Fraunces,serif;
  box-shadow:0 8px 18px -6px rgba(134,102,25,.55)}

/* ── La démonstration ────────────────────────────────────────────────── */
.v-demo-grille{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,4vw,60px);
  align-items:center}
.vente .demo{--jv:#c9972a}
.vente .demo::before{background:var(--verdict)}
.vente .jauge svg{max-width:300px}
.vente .hz{color:var(--jv);transition:color .5s}
.vente .bande{transition:background .5s}
.vente .bande.verdict{background:var(--jv);border-color:transparent;color:#fff;
  box-shadow:0 8px 20px -8px var(--jv)}
#demoArc{transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1)}
#aiguille{transform-origin:120px 120px;transform:rotate(-115deg);
  transition:transform 1.1s cubic-bezier(.34,1.32,.5,1)}
#demoHalo{transition:fill .5s}

/* ── Les photos de rayon ─────────────────────────────────────────────── */
.t-rouge{color:var(--v-rouge)!important}
.t-ocre{color:var(--v-ocre)!important}
.t-vert{color:var(--v-vert)!important}

/* ── La galerie d'écrans ─────────────────────────────────────────────── */
.v-galerie{display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:8px max(22px,calc((100vw - var(--large)) / 2 + 22px)) 34px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.v-galerie:focus-visible{outline:2.5px solid var(--rose);outline-offset:-4px}
.v-ecran{flex:none;width:250px;scroll-snap-align:center;margin:0}
.v-ecran .iphone{max-width:none}
.v-ecran figcaption{font-size:14px;color:#5c5338;line-height:1.5;margin-top:18px}
.v-ecran figcaption b{display:block;font:600 18px/1.25 Fraunces,serif;color:var(--encre);
  margin-bottom:5px}

/* ── La comparaison ──────────────────────────────────────────────────── */
.v-compare{max-width:880px;margin:0 auto;padding:8px 0;overflow:hidden}
.v-ligne{display:grid;grid-template-columns:1.25fr 1fr 1fr;align-items:center}
.v-ligne > span{padding:15px 20px;font-size:14.5px}
.v-ligne + .v-ligne{border-top:1px solid rgba(134,102,25,.12)}
.v-entete span{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris)}
.v-ligne [role=rowheader]{font-weight:600}
.v-nous{background:rgba(79,138,31,.07)}
.v-entete .v-nous{color:var(--v-vert)}
.v-oui,.v-non{position:relative;padding-left:44px!important}
.v-oui::before,.v-non::before{position:absolute;left:18px;top:50%;transform:translateY(-50%);
  font-weight:800;font-size:15px}
.v-oui::before{content:"\2713";color:var(--v-vert)}
.v-non::before{content:"\2715";color:#a8a08b}
.v-non{color:#8a826d}
.v-oui.v-nous{font-weight:600;color:#3c5a12}

/* ── La confiance ────────────────────────────────────────────────────── */
.v-gage svg{width:40px;height:40px;padding:9px;border-radius:12px;color:var(--or);
  background:var(--or-pale);border:1px solid var(--or-ligne);margin-bottom:14px}
.v-gage h3{margin-bottom:8px}
.v-gage p{font-size:14.5px;color:#50482f}
.v-science{display:flex;gap:26px;align-items:center;justify-content:space-between}
.v-science p{font-size:14.5px;color:#50482f;max-width:78ch}
.v-science .btn{flex:none}

/* ── Le tarif ────────────────────────────────────────────────────────── */
.vente .tarif.vedette{background:linear-gradient(180deg,#fffdf8,#fff8ea);
  border-width:1.5px}
.vente .tarif .eq{font-weight:600;color:var(--v-vert)}
.vente .tarif .prix span{margin-left:6px}

/* ── Le dernier appel ────────────────────────────────────────────────── */
.v-final{text-align:left}
.v-final-grille{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(26px,4vw,60px);
  align-items:center}
.v-final .photo{aspect-ratio:860/1075;object-fit:cover;max-height:560px}
.v-final h2{margin:0 0 16px;max-width:18ch}
.v-final .rangee{margin-top:24px}

/* ── La barre d'appel du téléphone ───────────────────────────────────── */
.v-barre{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:70;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 10px 10px 18px;border-radius:999px;font-size:13.5px;color:#3d3520;
  background:rgba(255,253,248,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--or-ligne);box-shadow:0 18px 40px -14px rgba(60,40,10,.4);
  transform:translateY(0);transition:transform .3s ease,opacity .3s ease}
.v-barre.cache{transform:translateY(140%);opacity:0;pointer-events:none}
.v-barre b{color:var(--encre)}
@media (min-width:861px){ .v-barre{display:none!important} }

/* ── Adaptations ─────────────────────────────────────────────────────── */
@media (max-width:980px){
  .v-hero-grille,.v-demo-grille,.v-final-grille{grid-template-columns:1fr}
  .v-hero-visuel{height:clamp(440px,108vw,600px);max-width:560px;width:100%;margin:0 auto}
  .v-hero-visuel .iphone{width:clamp(180px,46vw,262px)}
  .v-etapes{grid-template-columns:1fr;gap:48px}
  .v-etape{flex-direction:row;text-align:left;align-items:center}
  .v-etape .iphone{max-width:200px;flex:none}
  .v-etape p{margin:0}
  .v-science{flex-direction:column;align-items:flex-start}
  .v-final .photo{max-height:420px;width:100%}
}
@media (max-width:620px){
  .v-hero h1{font-size:clamp(34px,9.6vw,44px)}
  .v-hero .rangee .btn{width:100%}
  .v-rassure{flex-direction:column;gap:9px}
  .v-etape{flex-direction:column;text-align:center}
  .v-etape .iphone{max-width:230px}
  .v-etape p{margin:0 auto}
  .v-confiance-in{display:grid;grid-template-columns:1fr 1fr;font-size:13px}
  .v-confiance b{display:block;font-size:22px}
  .v-ligne{grid-template-columns:1fr 1fr}
  .v-ligne [role=rowheader],.v-entete span:first-child{grid-column:1 / -1}
  .v-ligne [role=rowheader]{padding-bottom:4px}
  .v-ligne > span{padding:11px 14px;font-size:13.5px}
  .v-oui,.v-non{padding-left:36px!important}
  .v-oui::before,.v-non::before{left:13px}
  .v-entete span:first-child{display:none}
  .v-galerie{gap:20px;padding-left:17px;padding-right:17px}
  .v-ecran{width:232px}
  .vente .tarif .btn-xl{padding:18px 16px}
}

/* Le chapeau sous un titre de section : sans cet écart, il collait au titre. */
.vente .tete h2 + .chapo{margin-top:14px}
/* La colonne NutriSound d'un seul tenant : le filet des lignes ne la coupe plus. */
.vente .v-ligne + .v-ligne{border-top:0;box-shadow:inset 0 1px 0 rgba(134,102,25,.12)}
.vente .v-ligne + .v-ligne > .v-nous{box-shadow:inset 0 1px 0 rgba(79,138,31,.10)}

/* Démo : paquet d'un produit au verdict défavorable, marque illisible. */
.vente .vignette.masquee{overflow:hidden}
.vente .vignette.masquee img{filter:blur(7px) saturate(.8)}

/* Démo : la photo entière, centrée et proportionnée dans son cadre.
   Dans la grille centrée de .vignette, height:100% se résolvait sur la
   hauteur propre de l'image : un paquet de 155 x 200 sortait du cadre de
   116 px et se faisait rogner en haut et en bas. */
.vente .vignette{position:relative;background:#fff}
.vente .vignette img{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:contain;object-position:50% 50%;padding:6px;box-sizing:border-box;background:#fff}

/* Le spectre, aux mesures de l'application. */
.vente .spectre{margin:16px 0 4px;padding:0}
.vente .spectre canvas{display:block;width:100%;height:124px;border-radius:14px;
  background:linear-gradient(180deg,#fffdf8,#f9f2e6);border:1px solid var(--or-ligne)}
.vente .spectre-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;
  margin-top:8px;font-size:10.5px;color:var(--gris);letter-spacing:.02em}
.vente .spectre-leg span{display:inline-flex;align-items:center;gap:5px}
.vente .spectre-leg span::before{content:'';width:8px;height:8px;border-radius:2px}
.vente .spectre-leg .s-fond::before{background:#c69e2e}
.vente .spectre-leg .s-cons::before{background:#5d7f18}
.vente .spectre-leg .s-diss::before{background:#b3261e}