/* =============================================
   SMOOTHIE FUNNEL FR — v3
   Design tokens extraits du CSS source
   Polices : Oswald (display) + Open Sans (body) + Pacifico (script accent)
   ============================================= */

/* ---------- Variables (tokens exacts du source) ---------- */
:root {
  /* Palette extraite du CSS source */
  --color-pink: #db4596;            /* brand principal — nav, headings */
  --color-pink-dark: #cf2472;       /* dark-pink-text (emphasis) */
  --color-pink-soft: #d87ea4;       /* borders bonus/diet box */
  --color-magenta: #e8468a;         /* days section accent */
  --color-cta: #e20045;             /* CTA + top bar */
  --color-cta-shadow: #b80038;      /* offset shadow CTA */
  --color-cta-hover: #ff004e;
  --color-teal: #00c7d6;            /* days section bg */
  --color-teal-faq: #2dbac0;        /* FAQ accents */
  --color-teal-light: #d9eef0;      /* FAQ borders */
  --color-teal-bg: #f3f9fa;         /* FAQ panel-heading bg */
  --color-green: #96c148;           /* checks + green accents */
  --color-green-soft: #d4e7b1;      /* bonus box border */
  --color-cream: #fefaf1;           /* diet-container bg */
  --color-yellow: #ffffd1;          /* yellow-box bg */
  --color-text: #000000;
  --color-text-light: #555;
  --color-muted: #717171;
  --color-gray-bg: #fafafa;
  --color-author-bg: #f6f6f6;
  --color-author-border: #d9d9d9;
  --color-link: #1243cd;
  --color-bg: #ffffff;
  --color-placeholder: #d8d8d8;
  --color-placeholder-text: #6a6a6a;

  /* Typographie (extraite du source) */
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --font-script: 'Pacifico', cursive;       /* équivalent Google de 'relation-two' Adobe */

  /* Layout */
  --max-width: 1100px;
  --container-padding-x: clamp(16px, 4vw, 32px);

  /* Radii / shadows */
  --radius-sm: 8px;
  --radius-md: 13px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --shadow-cta-offset: 0 7px 0 var(--color-cta-shadow);
  --shadow-card: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-card-strong: 3px 3px 4px 0px rgba(204,204,204,0.62);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.625;        /* 26px / 16px = 1.625, valeur du source */
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
strong { font-weight: 700; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);   /* Oswald par défaut, valeur du source */
  font-weight: 400;
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding-x);
  position: relative;
}

/* ---------- Logo ---------- */
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
  line-height: 1;
}
.logo-img {
  max-width: 112px;            /* mobile — réduit -30% vs 160px */
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .logo-img { max-width: 140px; }   /* desktop — réduit -30% vs 200px */
}
.logo-text {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.logo-prefix,
.logo-suffix {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  color: var(--color-text);
  text-transform: lowercase;
  letter-spacing: 0;
}
.logo-accent {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(3rem, 6vw, 4rem);
  color: var(--color-pink);
  line-height: 0.9;
  transform: translateY(0.05em);
}

/* ---------- Placeholders ---------- */
.img-placeholder, .vsl-placeholder {
  background: var(--color-placeholder);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-placeholder-text);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: 16px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 100%;
}
.img-placeholder .img-meta,
.vsl-placeholder .vsl-meta {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  color: #999;
  margin-top: 6px;
  font-weight: 400;
}
.img-placeholder--circle { border-radius: 50%; }
.vsl-placeholder {
  background: #1a1a1a;
  color: #f0f0f0;
  border: 8px solid #fff;        /* match du source : .vimeo-video-frame border */
  aspect-ratio: 16 / 9;
  font-weight: 700;
  position: relative;
  outline: 1px dashed #555;
  outline-offset: -10px;
}
.vsl-placeholder::before {
  content: '▶';
  font-size: 56px;
  margin-bottom: 12px;
  opacity: 0.7;
}
.vsl-placeholder .vsl-meta { color: #aaa; }

/* ---------- CTA principal (style source) ---------- */
.btn-cta {
  display: inline-block;
  border: 2px solid var(--color-cta);
  background: var(--color-cta);
  color: #fff;
  text-align: center;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  padding: 32px 56px 20px;
  border-radius: var(--radius-xl);
  text-decoration: none;
  line-height: 1;
  margin-bottom: 15px;
  box-shadow: var(--shadow-cta-offset);
  transition: background 0.4s ease, color 0.4s ease;
  position: relative;
}
.btn-cta:hover {
  background: var(--color-cta-hover);
  color: #fff;
  text-decoration: none;
}
.btn-cta .sub {
  display: block;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 400;
  margin-top: 12px;
  font-family: var(--font-body);
}
.btn-cta .sub del {
  text-decoration: line-through;
  opacity: 0.75;
  margin-right: 4px;
}
.btn-cta .sub del + {
  margin-left: 0;
}
.btn-cta.big {
  font-size: 56px;
  padding: 32px 80px 20px;
  border: 4px solid var(--color-cta-shadow);
}

/* ============================================= */
/* SECTION 1 — Top bar */
/* ============================================= */
.top-bar {
  background: var(--color-cta);
  color: #fff;
  font-size: 20px;
  height: 54px;
  line-height: 54px;
  font-family: var(--font-display);
  text-align: center;
}

/* ============================================= */
/* SECTION 2 — Hero (logo + tagline + 3-col VSL) */
/* ============================================= */
.hero {
  background: #ffffff;
  padding: 20px 0 0;        /* source header padding 20px 0 0 */
  text-align: center;
}
.hero-logo-wrap {
  margin-bottom: 0;
}
.hero-tagline {
  font-family: var(--font-display);   /* Oswald (header strong dans source) */
  font-weight: 400;
  font-size: 26px;
  color: var(--color-text);
  line-height: 36px;
  margin: 20px auto 0;
  padding: 0 90px;          /* source : padding 0 90px */
  max-width: 1100px;
}
.hero-tagline em {
  font-family: var(--font-script);
  font-style: normal;
  color: var(--color-pink);
  font-size: 1.3em;
}
.hero-media {
  max-width: 750px;
  margin: 25px auto 30px;        /* ajusté : ~30px de gap vers le diet-container (user) */
}
.hero-media .vsl-placeholder {
  width: 100%;
  aspect-ratio: 750 / 425;       /* dimensions exactes source */
  border: 4px solid #ffffff;
  border-radius: 3px;
  background: #000000;
  min-height: 220px;
  outline: 1px solid rgba(0,0,0,0.1);
}
/* Photos de smoothies derrière la VSL — PC UNIQUEMENT (comme l'original).
   La bannière ne couvre QUE le bandeau de la VSL (.hero-media) en pleine largeur :
   le logo + le sous-titre restent au-dessus, sur fond blanc. */
@media (min-width: 768px) {
  .hero-media {
    max-width: none;
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: url('../assets/images/smoothies-pictures.webp') center center / cover no-repeat;
    padding: 26px 0;
  }
  .hero-media .vsl-placeholder {
    max-width: 750px;
    margin: 0 auto;
  }
}

/* ============================================= */
/* SECTION 3 — CTA block */
/* ============================================= */
.cta-block {
  background: #ffffff;
  padding: 10px 0 50px;
  text-align: center;
}

/* ============================================= */
/* SECTION 4 — Témoignages "REAL PEOPLE, REAL RESULTS" */
/* ============================================= */
.testimonials {
  background: #fff;
  padding: 10px 0;          /* source .three-boxes : padding 10px 0 */
}
.testimonials-title {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 40px;
  color: var(--color-text);
  margin: 0 0 30px 0;
  text-transform: uppercase;
}
.three-boxes-list {
  max-width: 902px;
  margin: 0 auto;
}

/* --- Message-box (encadré de chaque témoignage) --- */
.message-box {
  width: 100%;
  background: #fafafa;
  border: 3px solid #ade7ea;
  border-radius: 13px;
  padding: 10px 11px 15px;
  margin: 0 0 30px 0;
  position: relative;
}
.message-box.testimonial { position: relative; }

/* Holder flex avec alternance d'ordre selon move-right/move-left */
.testimonial-holder {
  display: flex;
  align-items: center;       /* centrage vertical du texte par rapport à l'image */
  gap: 25px;
}
.testimonial.move-left .testimonial-holder {
  flex-direction: row-reverse;
}

/* Colonne image */
.testimonial-img-holder {
  flex: 0 0 350px;
  width: 350px;
  text-align: center;
  margin-top: 4px;
}
.testimonial-img-holder .testimonial-img {
  width: 100%;
  border-radius: 8px;
  display: block;
}
/* Variante placeholder (div) : aspect-ratio fixe + label centré */
.testimonial-img-holder div.testimonial-img {
  aspect-ratio: 7 / 6;
  background: var(--color-author-bg, #e8e8e8);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  display: flex;
}
/* Variante image réelle : hauteur naturelle + cover */
.testimonial-img-holder img.testimonial-img {
  height: auto;
  max-width: 100%;
  object-fit: cover;
}
.testimonial-img-holder .img-caption {
  display: block;
  font-size: 13px;
  font-style: italic;
  text-align: center;
  padding: 0 15px;
  margin-top: 5px;
  line-height: 16px;
  color: var(--color-text);
}

/* Colonne texte */
.testimonial-text-holder {
  flex: 1 1 480px;
  text-align: left;
  /* Padding-top desktop pour que la quote démarre sous la headline (qui déborde de la colonne image) */
  padding-top: 50px;
}
.testimonial h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 38px;
  font-weight: 400;
  text-transform: none;
  margin: 0 0 12px 0;
  color: var(--color-text);
}
/* Sur desktop, le H2 (côté image) doit tenir sur une seule ligne comme l'original.
   On le laisse déborder de sa colonne 350px si nécessaire — overflow visible sur le holder. */
.testimonial .testimonial-img-holder {
  overflow: visible;
}
.testimonial .testimonial-img-holder h2 {
  white-space: nowrap;
}
/* Sur move-left (image à droite), on ancre la headline en absolute top-right
   de l'img-holder pour qu'elle déborde vers la GAUCHE (côté text-holder)
   au lieu de la droite (hors de la box). */
.testimonial.move-left .testimonial-img-holder {
  position: relative;
  padding-top: 50px;          /* réserve l'espace occupé par la H2 absolute */
}
.testimonial.move-left .testimonial-img-holder h2 {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}
.testimonial-text-holder p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 26px;
  margin: 0 0 5px 0;
  color: var(--color-text);
  font-style: normal;
}
.testimonial-text-holder p strong { font-weight: 700; }

/* Classes utilitaires de couleur (source style6.css) */
.sky-blue-text { color: #2dbac0; }
.dark-pink-text { color: #cf2472; }

/* Disclaimer "*Vos résultats peuvent varier" */
.newdisclaimergrey {
  display: block;
  font-size: 10px !important;
  color: #777777;
  line-height: 12px;
  margin: 10px 0 0 0;
  padding: 0;
  text-align: left;
}

/* Toggles d'affichage selon viewport (mobile vs desktop) */
.hide-mobile { display: block; }
.hide-desktop { display: none; }

/* Section témoignage solo (Ouiem) : la box chevauche la lose-section (moitié haute
   sur le pink, moitié basse sur le blanc) — comme l'original avec Dawn. */
.solo-testimonial {
  background: transparent;     /* CRITIQUE : override du bg #fff de .testimonials qui masquait le chevauchement */
  padding: 0 0 50px;
  margin-top: -150px;          /* chevauchement bien visible sur le bandeau pink */
  position: relative;
  z-index: 2;
}
/* Note : le padding-bottom de .lose-section (220px) est défini dans sa règle principale
   plus bas dans le fichier — sinon le shorthand padding override notre valeur. */

/* Sur cette section, la headline va AU-DESSUS DU TEXTE (colonne gauche), pas
   au-dessus de la photo — c'est la structure de l'original Dawn.
   On inverse les toggles hide-mobile/hide-desktop juste pour .solo-testimonial. */
.solo-testimonial .testimonial-img-holder .hide-mobile { display: none; }
.solo-testimonial .testimonial-text-holder .hide-desktop { display: block; }
/* Plus besoin du padding-top de 50px (qui servait à éviter le débordement de
   la H2 nowrap depuis l'autre colonne) — la H2 est désormais dans le text-holder. */
.solo-testimonial .testimonial-text-holder { padding-top: 0; }
/* Le H2 dans le text-holder peut wrap naturellement (pas de nowrap forcé) */
.solo-testimonial .testimonial-text-holder h2 { white-space: normal; }

/* Crop de la photo Ouiem : aspect-ratio carré + cadrage en haut pour ne garder
   que tête + cou + épaules (au lieu de la photo en longueur). */
.solo-testimonial .testimonial-img-holder img.testimonial-img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
}

/* ============================================= */
/* SECTION 5 — "21 jours" (days) */
/* ============================================= */
.days {
  background: var(--color-teal);
  padding: 25px 0 40px;       /* padding-top réduit (40→25) : la section remonte vers les testimonials */
  color: #fff;
}
.days-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;   /* lady col plus étroite */
  gap: 50px;                                     /* gap plus large */
  align-items: end;
  min-height: 540px;
  text-align: center;
}
.days-content {
  max-width: 560px;
  margin: 0 auto;          /* centre le bloc texte dans sa colonne flex */
  padding-top: 20px;
}
.days-content h2 {
  /* source : 117.43px Open Sans 600, line-height 100px, letter-spacing -8px */
  font-family: var(--font-body);
  font-size: 117.43px;
  color: #fff;
  font-weight: 600;
  line-height: 100px;
  letter-spacing: -8px;
  margin: 0;
}
.days-content h3 {
  /* source : 39.23px Oswald, line-height 32px (source mais trop serré quand 2 lignes en FR) */
  font-family: var(--font-display);
  font-size: 39.23px;
  color: #fff;
  font-weight: 400;
  line-height: 44px;          /* élargi de 32→44px pour aérer les 2 lignes du sous-titre FR */
  text-transform: uppercase;
  margin: 25px 0 35px;
}
.days-content p {
  /* source : 18px, padding 0 35px, margin 15px 0 25px */
  font-size: 18px;
  color: #fff;
  margin: 15px 0 25px;
  line-height: 26px;
  padding: 0 35px;
}
.days-content p strong { font-weight: 700; }

/* Lady image : dans sa colonne grid 380px à droite, alignée en bas (align-items: end),
   déborde en bas (-40px) et en haut (-40px) comme l'original.
   Largeur calculée : 380px → hauteur naturelle = 380 / (646/1024) ≈ 603px. */
.days .days-container .lady {
  width: 100%;
  max-height: 620px;
  height: auto;
  display: block;
  margin-bottom: -40px;
  margin-top: -50px;          /* tête dépasse de ~25px au-dessus de la section teal (vérifié : ~15px de gap avec la box Aline) */
}

/* Tweet : sous le paragraphe, centré dans la colonne texte, max-width 455px (source spec) */
.days-content .twitter-post {
  display: block;
  max-width: 455px;
  width: 100%;
  height: auto;
  margin: 20px auto 0;
}

/* Ancien placeholder .days-img — neutralisé (la lady-img réelle a pris le relais) */
.days-img {
  display: none;
}

/* ============================================= */
/* SECTION 6 — Things-section (ce qui rend different) */
/* ============================================= */
.things-section {
  padding: 50px 0 30px;
  background: #fff;
  text-align: center;
}
.things-container {
  max-width: 750px;
  margin: 0 auto;
}
.things-container h2 {
  /* source : 41.61px Oswald 400, line-height 41px, margin 0 0 35px uppercase */
  font-family: var(--font-display);
  font-size: 41.61px;
  font-weight: 400;
  line-height: 41px;
  text-transform: uppercase;
  margin: 0 0 35px;
}
.things-container p {
  /* source : 18px line-height 29px, margin-bottom 40px */
  font-size: 18px;
  line-height: 29px;
  margin-bottom: 40px;
  text-align: left;
}
/* Photo coach ronde flottée à gauche du 1er paragraphe (source : .author-round-medium + .align-left) */
.author-round-medium {
  width: 160px;
  height: 160px;
  background: #f6f6f6;
  border: 2px solid #d9d9d9;
  border-radius: 100%;
  box-sizing: border-box;
  vertical-align: top;
  /* Centrage du label texte quand c'est un placeholder <span> (sans effet sur un <img>) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  color: #999;
  line-height: 1.3;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
/* Cadrage de la photo coach : object-fit cover + position haute pour garder visage + épaules
   dans le cercle (l'image source 1856×2304 est portrait, le sujet est dans la moitié haute). */
img.author-round-medium {
  object-fit: cover;
  object-position: center 25%;
}
.things-container .author-round-medium {
  margin-top: -15px;       /* source : décalage vers le haut pour alignement avec la baseline du texte */
}
.align-left {
  float: left;
  margin: 0 15px 15px 0;
}
.align-right {
  float: right;
  margin: 0 0 15px 15px;
}
/* Clearfix sur le container (pas sur chaque <p>) pour que le float .author-round-medium
   puisse s'étendre sur plusieurs paragraphes naturellement, mais reste contenu dans le bloc. */
.things-container::after {
  content: "";
  display: block;
  clear: both;
}
/* Style "u" pour l'emphase soulignée (comme <u>PAS</u> ou <u>NOT</u> du source) */
.things-container u {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ============================================= */
/* SECTION 7 — Pink section (tout ce que vous recevez) */
/* ============================================= */
.pink-section {
  background: var(--color-pink);
  padding: 45px 0 0;           /* source : padding 45px 0 0 */
  text-align: center;
  color: #fff;
}
.pink-container {
  max-width: 750px;
  margin: 0 auto;
}
.pink-container h2 {
  /* source : 54.86px Oswald line-height 52px / réduit à 46px + nowrap pour tenir sur 1 ligne en FR
     ("TOUT CE QUE VOUS RECEVEZ AUJOURD'HUI" = 35 chars vs "EVERYTHING YOU GET" = 18 chars) */
  font-family: var(--font-display);
  font-size: 46px;
  color: #fff;
  line-height: 50px;
  font-weight: 400;
  margin: 0 0 40px;
  text-transform: uppercase;
  white-space: nowrap;
}
.pink-container p {
  /* source : 18px line-height 29px (margin-bottom géré au cas par cas vu nos 3 paragraphes) */
  font-size: 18px;
  color: #fff;
  line-height: 29px;
  margin-bottom: 20px;          /* serré entre les 3 paragraphes */
  text-align: center;
}
.pink-container p:last-of-type {
  margin-bottom: 55px;          /* source : 55px avant le mockup */
}

/* Mockup ebook/bonus — source : .img-with-button .tablet-img (display inline-block) */
.pink-container .tablet-img {
  display: block;
  text-align: center;
  margin: 0 auto;
}
.pink-container .pink-mockup-img {
  display: block;
  width: 100%;
  max-width: 650px;
  height: auto;
  margin: 0 auto;
}

/* ============================================= */
/* SECTION 8 — Guide section (programme + 2 bonus) */
/* ============================================= */
.guide-section {
  background: #fff;
  padding: 40px 0 30px;        /* source : 40px 0 30px */
}
.guide-section h2 {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--color-green);
  font-weight: 400;
  text-align: center;
  margin: 0 0 30px;
  text-transform: uppercase;
}
.guide-section h2 span { color: var(--color-text); }
.guide-container {
  /* source : width 880px, margin 40px auto 15px */
  max-width: 880px;
  margin: 40px auto 15px;
  text-align: left;
}

/* Grid 2 colonnes : texte à gauche, bullets à droite (source : Bootstrap col-md-6 × 2) */
.guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* Colonne gauche (texte) — source : 17px line-height 26px, margin-bottom 30px */
.guide-text p {
  font-size: 17px;
  line-height: 26px;
  margin-bottom: 30px;
}
.guide-text u,
.check-list u {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Colonne droite (bullets ✓) */
.guide-bullets-header {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 22px;
  color: var(--color-green);
  margin: 0 0 22px;
  letter-spacing: 0.3px;
}
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.check-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 22px;
  font-size: 17px;
  line-height: 26px;
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -2px;
  color: var(--color-green);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

/* Ancien sélecteur conservé pour compatibilité bonus-box */
.guide-container p {
  margin-bottom: 24px;
  line-height: 26px;
  font-size: 17px;
}

.bonus-box {
  /* source : width 910px, bg #fff, border 3px #d4e7b1, padding 15px 20px, margin 0 auto 30px */
  max-width: 910px;
  margin: 0 auto 30px;
  background: #fff;
  border: 3px solid var(--color-green-soft);
  padding: 15px 20px;
  border-radius: var(--radius-lg);
  /* Grid 2-col desktop : mockup à gauche, texte à droite */
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 30px;
  align-items: center;
}
.bonus-box .bonus-box-img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto;
}
.bonus-box-text { text-align: left; }
.bonus-box h3 {
  /* source : 36px line-height 60px, margin 15px 0 0 0, uppercase */
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1.15;
  margin: 0 0 12px;
  text-transform: uppercase;
  font-weight: 400;
}
.bonus-box h3 .green-text { color: var(--color-green); }
.bonus-box p {
  /* source : 17px line-height 27px */
  font-size: 17px;
  line-height: 27px;
  margin-bottom: 12px;
}
.bonus-box p:last-child { margin-bottom: 0; }
.bonus-box-text u {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ============================================= */
/* SECTION 9 — Lose section (témoignage + garantie 60j) */
/* ============================================= */
.lose-section {
  /* Couleur custom #DA4B87 pour harmoniser avec le ton rose de la signature (au lieu du
     --color-pink global #db4596 — différence subtile mais visible côte à côte). */
  background: #DA4B87;
  /* padding-bottom: 220px → laisse de la place pour que la box .solo-testimonial
     chevauche le bandeau sans masquer la signature/photo coach */
  padding: 50px 0 220px;
  color: #fff;
  text-align: center;
}
.lose-container {
  /* source : width 860px, margin 0 auto.
     Grid-template-areas : permet d'inverser l'ordre écusson↔headline sur mobile
     sans dupliquer le HTML. */
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-areas:
    "head head"
    "image text";
  gap: 30px 40px;
  align-items: start;
}

/* Headline : source = 40px Oswald 400 line-height 53px white */
.lose-container h3 {
  grid-area: head;
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 53px;
  color: #fff;
  font-weight: 400;
  margin: 0 0 10px;
  text-align: center;
}
.lose-image-holder {
  grid-area: image;
  text-align: center;
  align-self: center;
}
.lose-text-holder {
  grid-area: text;
  text-align: left;
}
.lose-text-holder p {
  /* source : 17px line-height 29px white */
  color: #fff;
  font-size: 17px;
  line-height: 29px;
  margin: 0 0 24px;
}

/* Bloc signature (photo coach + signature + nom certifié) — source : .author-sign-holder */
.author-sign-holder {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.author-sign-holder .author-photo {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 25%;
  border: 2px solid rgba(255,255,255,0.5);
  flex-shrink: 0;
}
.signature-zone {
  display: flex;
  flex-direction: column;
  color: #fff;
  font-size: 13px;
  line-height: 16px;
}
.signature-zone .signature {
  max-width: 140px;
  height: auto;
  margin-bottom: 4px;
}
.signature-zone .signature-placeholder {
  font-family: var(--font-script);
  font-size: 24px;
  font-style: italic;
  color: rgba(255,255,255,0.7);
  margin-bottom: 2px;
}
.signature-zone .signature-name {
  font-weight: 600;
}

/* Écusson "Garantie 60 jours" — image transparente */
.guarantee-badge {
  width: 240px;
  height: auto;
  margin: 0 auto;
  display: block;
  /* drop-shadow retiré : créait un halo gris/clair visible sur le fond pink */
}

/* ============================================= */
/* SECTION 10 — YouTube section (regardez la vidéo) */
/* ============================================= */
.youtube-section {
  background: #7cc0cb;          /* bande teal clair — fidèle à l'original (texture youtube-bg) */
  padding: 50px 0;
  text-align: center;
}
.youtube-section h2 {
  color: #fff;
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.youtube-section h6 {
  color: #fff;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  margin: 0 0 30px;
}
/* Vidéo témoignage — format vertical 9:16 (type mobile/TikTok, 90% du trafic mobile) */
.vsl-vertical {
  width: 100%;
  max-width: 352px;            /* desktop : -20% vs 440 (demande utilisateur, trop gros sur PC) */
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  background: #000;
  border: 8px solid #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
  position: relative;
}
.vsl-vertical iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Facade click-to-play : vignette + pastille Play (player chargé au clic) */
.vsl-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background-color: #1a1a1a;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vsl-play {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
  position: relative;
  transition: transform 0.15s ease, background 0.15s ease;
}
.vsl-play::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #111;
}
.vsl-facade:hover .vsl-play,
.vsl-facade:focus-visible .vsl-play {
  transform: scale(1.08);
  background: #fff;
}

/* ============================================= */
/* SECTION 11 — FAQ */
/* ============================================= */
.faq {
  background: #fff;
  padding: 50px 0 25px;       /* padding-bottom réduit (50→25) pour rapprocher du CTA */
}
.faq-container {
  max-width: 900px;
  margin: 0 auto;
}
.faq h2 {
  text-align: center;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  color: var(--color-text);
  margin: 0 0 30px;
  text-transform: uppercase;
}
.faq-item {
  margin-bottom: 16px;
  border: 2px solid var(--color-teal-light);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.faq-item[open] {
  border-color: var(--color-teal-faq);
  background: #f4fbfb;
}
.faq-item summary {
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
  padding: 20px 24px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  color: var(--color-teal-faq);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item summary:hover { background: #f7fcfc; }
.faq-answer {
  padding: 10px 24px 22px;
  font-size: 17px;
  line-height: 26px;
  color: var(--color-text);
}
/* Espacement propre entre paragraphes multiples dans une réponse (la plupart des
   réponses font 2-4 paragraphes). Pas de margin extérieure parasite. */
.faq-answer p {
  margin: 0 0 14px 0;
}
.faq-answer p:last-child {
  margin-bottom: 0;
}
.faq-answer p strong {
  font-weight: 700;
}

/* ============================================= */
/* SECTION 12 — Offer section (.diet-container)   */
/* Source : .diet-container 900px, border 3px #d87ea4, bg #fefaf1, radius 15px */
/* ============================================= */
.offer-section {
  background: #fff;
  padding: 30px 0 60px;       /* padding-top réduit (60→30) pour rapprocher de la FAQ */
}
.offer-section--top {
  /* CTA principal juste après le hero — gap maîtrisé par hero-media margin */
  padding: 0 0 50px;
}

.diet-container {
  max-width: 900px;
  margin: 0 auto;
  background: var(--color-cream);              /* #fefaf1 */
  border: 3px solid var(--color-pink-soft);    /* #d87ea4 */
  border-radius: 15px;
  padding: 6px 30px 6px 6px;                   /* ultra-serré : mockup colle au top/left, espace pour CTA à droite */
  position: relative;
}

/* Wrapper du bouton CTA pour ancrer l'écusson 60j */
.btn-with-badge {
  position: relative;
  max-width: 640px;               /* bouton moins large que le container (-30% vs pleine largeur) */
  margin: 0 auto 6px;             /* centré horizontalement */
}

/* Écusson "Garantie 60 jours" — positionné en bas-droite du BOUTON (pas du container) */
.guarantee-corner {
  position: absolute;
  bottom: -22px;
  right: -22px;
  width: 85px;
  height: auto;
  z-index: 3;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

/* Layout interne : mockup | CTA */
.diet-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
.diet-mockup { text-align: center; }
.diet-mockup-img {
  /* Mockup encore agrandi (480→560, +17%) + bien plus remonté (-40→-70)
     pour réduire l'espace avec le texte de la promesse. */
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
  margin: -70px auto -45px;
}
.diet-cta {
  text-align: center;
}
/* Bouton CTA pleine largeur, taille proche de l'original "GET $20 OFF" */
.diet-cta .btn-cta {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-size: 60px;             /* "20€ OFFERT" : gros, occupe le bouton comme "GET $20 OFF" */
  line-height: 1;
  padding: 28px 20px 22px;     /* padding plus généreux */
  border: 4px solid var(--color-cta-shadow);
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.4);
  letter-spacing: -0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.diet-cta .btn-cta .sub {
  display: block;
  font-size: 22px;             /* agrandi de 17 → 22 pour matcher "Yes I Want To Lose Weight!" */
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 26px;
  margin-top: 10px;
  letter-spacing: normal;
  white-space: nowrap;
  text-transform: capitalize;  /* "Oui Je Veux Mincir Pour De Bon" — capitalize chaque mot */
}

/* Rangée des badges paiement */
.payment-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 0;          /* collé au bouton, l'espacement vient de .btn-with-badge */
}

/* OPTION A : image globale (recommandé, identique à l'original cards.png) */
.payments-image {
  display: block;
  max-width: 480px;             /* agrandie pour plus de présence */
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ========== Nouveaux blocs ajoutés au .diet-container (CTA final) ========== */

/* Promesse client en haut du diet-container : coche verte cercle + paragraphe */
.diet-promise {
  display: flex;
  align-items: flex-start;
  gap: 10px;                    /* gap réduit (14→10) pour gagner ~4px de largeur texte */
  padding: 18px 16px 4px;       /* padding gauche/droit réduit (24→16) pour gagner ~16px de largeur */
  text-align: left;
}
.diet-promise__check {
  flex-shrink: 0;
  width: 54px;                  /* légèrement réduit (58→54) pour gagner 4px de largeur texte */
  height: 54px;
  border-radius: 50%;
  border: 4px solid var(--color-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 700;
  color: var(--color-green);
  line-height: 1;
  background: #fff;
}
.diet-promise p {
  margin: 4px 0 0;
  font-size: 16px;              /* 17→16 : 1pt en moins pour gagner ~6% de chars par ligne */
  line-height: 23px;
  color: var(--color-text);
}
.diet-promise u {
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* "OFFRE LIMITÉE ! Seulement 47€ 27€" — au-dessus du bouton CTA */
.cta-limited-offer {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 12px;
  color: var(--color-text);
  font-weight: 400;
}
.cta-limited-offer del {
  text-decoration: line-through;
  opacity: 0.7;
  margin-right: 4px;
}
.cta-limited-offer .cta-price {
  color: var(--color-green);
  font-weight: 700;
}

/* Badges de confiance (60j money-back · checkout sécurisé · accès instantané) */
.diet-badges {
  margin: 30px auto 10px;
  padding: 0 20px;
  text-align: center;
}
.diet-badges-img {
  display: block;
  max-width: 820px;             /* +100px : badges plus visibles */
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ============================================= */
/* Sticky CTA bas — apparaît au scroll (PC + mobile) */
/* ============================================= */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: var(--color-cta);            /* #e20045 */
  padding: 12px 20px;
  text-decoration: none;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.28);
  transform: translateY(110%);             /* caché par défaut */
  transition: transform 0.35s ease;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__price {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.3px;
}
.sticky-cta__price del {
  opacity: 0.7;
  font-weight: 400;
  margin-right: 6px;
}
.sticky-cta__price strong { font-weight: 700; }
.sticky-cta__btn {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-cta);
  background: #fff;
  padding: 9px 28px;
  border-radius: 8px;
  white-space: nowrap;
}
/* le footer laisse la place au sticky pour ne pas masquer le copyright en bas de page */
footer.gap-footer { padding-bottom: 70px; }

/* ========================================================================
   OVERRIDES pour le CTA du HAUT (.offer-section--top)
   ───────────────────────────────────────────────────────────────────────
   Le CTA du haut doit conserver son ancien design (validé en session 9),
   tandis que le CTA du bas utilise les nouvelles valeurs (vertical, mockup
   agrandi, bouton 640px, etc.). Ces overrides annulent les modifs récentes
   uniquement pour le CTA du haut.
   ======================================================================== */

/* Mockup à 320px, marges négatives pour coller à la zone transparente du PNG */
.offer-section--top .diet-mockup-img {
  max-width: 320px;
  margin: -30px auto -30px;
}

/* Bouton conserve sa taille originale 36px (pas 48) et pas de max-width 640 */
.offer-section--top .btn-with-badge {
  max-width: none;
  margin: 0 0 6px 0;
}
.offer-section--top .diet-cta .btn-cta {
  font-size: 54px;
  padding: 22px 16px 14px;
}
.offer-section--top .diet-cta .btn-cta .sub {
  font-size: 17px;
  line-height: 22px;
  text-transform: none;        /* pas de capitalize */
  margin-top: 12px;
}

/* Grid 2 colonnes desktop comme avant (au lieu du nouveau layout vertical) */
@media (min-width: 768px) {
  .offer-section--top .diet-grid {
    grid-template-columns: 320px 1fr;
    gap: 36px;
  }
}

/* OPTION B : icônes Font Awesome fallback (en attendant l'image) */
.payment-icon {
  font-size: 44px;
  line-height: 1;
  color: #1a1a1a;
}
.fa-cc-visa { color: #1a1f71; }
.fa-cc-mastercard { color: #eb001b; }
.fa-apple-pay { color: #000000; }
.fa-google-pay { color: #4285f4; }
.payment-icon-svg {
  display: inline-block;
  height: 36px;
  width: auto;
  vertical-align: middle;
}

/* Shield AES sécurité (SVG vertical avec label) */
.payment-shield {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: var(--color-green);     /* #96c148 */
}
.payment-shield svg {
  display: block;
  width: 36px;
  height: 36px;
}
.payment-shield small {
  font-size: 8px;
  font-weight: 800;
  color: var(--color-green);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ============================================= */
/* SECTION 13 — Footer */
/* ============================================= */
footer.gap-footer {
  /* Couleur teal #2EC1CA (proche du source #2dc1ca) — harmonisée avec le bleu utilisé
     sur "questions ?" de la FAQ et les "+" des accordéons */
  background: #2EC1CA;
  color: #fff;
  padding: 45px 0 30px;
  text-align: center;
}
footer .footer-links {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
  font-size: 15px;
  font-family: var(--font-body);
}
footer .footer-links a {
  color: #fff;
  text-decoration: none;
}
footer .footer-links a:hover { text-decoration: underline; }
/* Séparateurs visuels entre liens (sauf après le dernier) */
footer .footer-links a:not(:last-child)::after {
  content: "|";
  margin-left: 20px;
  opacity: 0.6;
  display: inline-block;
}

/* Avertissement complet (3 paragraphes) */
footer .footer-text {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  font-size: 12px;
  line-height: 1.65;
  opacity: 0.92;
  text-align: left;
}
footer .footer-text p {
  margin: 0 0 12px;
}
footer .footer-text p:last-child { margin-bottom: 0; }

footer .copyright {
  font-size: 13px;
  opacity: 0.95;
  margin-top: 22px;
}

/* ============================================= */
/* RESPONSIVE — Tablet (≥ 768px) */
/* ============================================= */
@media (min-width: 768px) {
  .hero-media .vsl-placeholder { min-height: 380px; }

  /* .diet-container : 2 colonnes mockup | CTA */
  .diet-grid {
    /* Layout vertical (1 colonne) comme l'original : mockup au-dessus, CTA en dessous */
    grid-template-columns: 1fr;
    gap: 0;                       /* mockup et OFFRE LIMITÉE collés (espace géré par margin du mockup) */
    align-items: center;
  }
  /* (Override desktop retiré : on garde le max-width 280px défini dans la règle principale) */
  .diet-cta {
    text-align: left;
    padding-top: 40px;          /* descend le bouton pour mieux s'aligner avec le centre du mockup */
  }
  .payment-row { justify-content: center; }   /* centré horizontalement par rapport au bouton */
  /* Écusson positionné en bas-droite du BOUTON (via .btn-with-badge) */
  .guarantee-corner {
    width: 100px;
    bottom: -26px;
    right: -26px;
  }
}

/* ============================================= */
/* RESPONSIVE — Mobile (≤ 767px) — alignement source mobile */
/* ============================================= */
@media (max-width: 767px) {
  /* Hero — source : .video-holder padding 0, min-height auto */
  .hero { padding: 14px 0 0; }
  .hero-tagline {
    font-size: 18px;
    line-height: 24px;
    padding: 0 16px;
    margin-top: 14px;
  }
  .hero-media { margin: 16px auto 12px; }   /* gap VSL→CTA réduit (retour user : trop bas vs original) */
  .hero-media .vsl-placeholder {
    border-width: 0;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  /* CTA top (mobile) — retours user : mockup réduit + bouton "Profitez des 20€ offerts" sur 1 ligne */
  .offer-section--top .diet-mockup-img { max-width: 250px; }
  .offer-section--top .diet-cta .btn-cta { font-size: 36px; }
  .offer-section--top .diet-cta .btn-cta .sub { font-size: 15px; }  /* tient sur 1 ligne (47€ 27€) */
  /* Écusson descendu dans le coin pour dégager le prix "27€" du sous-texte (retour user) */
  .offer-section--top .guarantee-corner {
    width: 56px;
    bottom: -40px;
    right: -24px;
  }

  /* Days "21 jours" — source mobile : tailles réduites */
  /* Days section : stack vertical, lady passe sous le contenu (single column grid) */
  .days { padding-bottom: 0; overflow: visible; }   /* le tweet à cheval gère le bas, plus d'espace vide */
  .days-container {
    display: flex;              /* flex column : marges négatives fiables pour le straddle du tweet */
    flex-direction: column;
    align-items: center;
    min-height: 0;
    text-align: center;
  }
  .days-content { max-width: 100%; padding-top: 0; }
  .days .days-container .lady {
    width: 100%;
    max-width: 280px;
    max-height: none;
    margin: -30px auto 0;   /* remonte la lady : divise par ~2 l'espace tête↔texte (retour user) */
  }
  /* Le tweet desktop (dans .days-content) est masqué sur mobile — règle explicite car
     .days-content .twitter-post (base) bat .hide-mobile en spécificité. */
  .days-content .twitter-post { display: none; }
  /* Tweet mobile : sous la lady, à cheval sur la section suivante (comme l'original) */
  .twitter-post--mobile {
    display: block;
    width: 90%;
    max-width: 360px;
    margin: -50px auto -55px;    /* top -50 : tweet quasi collé à la lady (retour user) · bottom -55 : à cheval */
    position: relative;
    z-index: 3;
  }
  .days-content h2 {
    font-size: 56px;
    line-height: 56px;
    letter-spacing: -3px;
  }
  .days-content h3 {
    font-size: 24px;
    line-height: 1.2;
    margin: 16px 0 20px;
  }
  .days-content h4 {
    font-size: 38px;
    line-height: 1;
  }
  .days-content p { padding: 0 16px; font-size: 16px; line-height: 24px; }

  /* Testimonials */
  .testimonials { padding: 30px 0; }
  .testimonials-title { font-size: 30px; line-height: 32px; padding: 0 16px; }

  /* Stack message-box en colonne sur mobile (image en haut, texte en bas) */
  .testimonial-holder,
  .testimonial.move-left .testimonial-holder {
    flex-direction: column;
    gap: 0;
  }
  .testimonial-img-holder,
  .testimonial-text-holder {
    flex: 1 1 auto;
    width: 100%;
  }
  .testimonial-img-holder { margin-bottom: 15px; margin-top: 0; }
  /* move-left (Catherine, Ouiem) : annule le padding-top: 50px (réservé à la H2 absolue desktop,
     masquée sur mobile) qui créait un espace mort entre la headline et la photo. */
  .testimonial.move-left .testimonial-img-holder { padding-top: 0; }
  .testimonial-text-holder { padding-top: 0; }
  .testimonial h2 { font-size: 26px; line-height: 30px; text-align: center; margin-bottom: 14px; }

  /* Swap des titres : sur mobile, le titre passe au-dessus du paragraphe (côté texte) */
  .hide-mobile { display: none; }
  .hide-desktop { display: block; }

  /* Réordonnancement témoignages (retour user) : headline EN HAUT (.mob-head),
     puis image + légende, puis citation aérée. PC inchangé (.mob-head = hide-desktop). */
  .mob-head { margin: 0 0 14px; }
  .testimonial .mob-head .sky-blue-text { display: block; }   /* "X a perdu" puis le résultat (bleu) à la ligne */
  .testimonial-text-holder > h2 { display: none; }            /* on masque la headline interne (dupliquée en haut) */
  .solo-testimonial .testimonial-text-holder .hide-desktop { display: none; }  /* idem pour Ouiem (bat l'override desktop) */
  .testimonial-text-holder p { margin: 0 0 16px; }            /* aération : espace entre les paragraphes de la citation */
  .testimonial-text-holder p:last-child { margin-bottom: 0; }

  /* Things-section "différent" */
  .things-section { padding: 78px 0 20px; }   /* padding-top : laisse passer le tweet 21j qui déborde au-dessus */
  .things-container h2 { font-size: 30px; padding: 0 16px; }
  .things-container p { padding: 0 16px; font-size: 16px; }
  /* Retour user : photo coach centrée sous la headline (plus grosse), puis tout le texte */
  .things-container .author-round-medium {
    float: none;
    display: block;
    margin: 0 auto 18px;
    width: 200px;
    height: 200px;
  }

  /* Pink-section */
  .pink-section { padding: 36px 0 0; }
  .pink-container h2 {
    font-size: 30px;
    line-height: 36px;
    padding: 0 16px;
    white-space: normal;        /* mobile : autorise le wrap (impossible de tenir sur 1 ligne) */
  }
  .pink-container p { font-size: 16px; line-height: 26px; padding: 0 16px; margin-bottom: 18px; }
  .pink-container p:last-of-type { margin-bottom: 30px; }
  /* Mockup agrandi ~20% (retour user) : bleed jusqu'aux bords du viewport */
  .pink-container .tablet-img { margin-left: -16px; margin-right: -16px; }
  .pink-container .pink-mockup-img { max-width: 100%; }

  /* Guide-section */
  .guide-section { padding: 30px 0 125px; }   /* padding-bottom : espace blanc pour l'écusson garantie à cheval */
  .guide-section h2 { font-size: 30px; padding: 0 16px; }
  .guide-container { margin: 30px auto 15px; padding: 0 16px; }
  .guide-grid { grid-template-columns: 1fr; gap: 24px; }
  .guide-text p { font-size: 16px; line-height: 25px; margin-bottom: 22px; }
  .guide-bullets-header { font-size: 20px; }
  .check-list li { font-size: 16px; line-height: 25px; padding-left: 28px; }
  .check-list li::before { font-size: 22px; }

  /* Bonus-box (retour user) : ordre headline -> mockup centré -> texte, typo agrandie */
  .bonus-box {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px 18px;
    text-align: center;
  }
  .bonus-box-text h3 { display: none; }                 /* h3 interne masquée : la headline mobile passe en haut */
  .bonus-head-mobile { margin: 0 0 4px; font-size: 24px; line-height: 1.2; text-align: center; }
  .bonus-box .bonus-box-img {
    max-width: 230px;
    display: block;
    margin: 0 auto;
    transform: translateX(20px);   /* la tablette est à gauche dans le PNG (déco à droite) : on recentre visuellement */
  }
  .bonus-box-text { text-align: left; }
  .bonus-box p { font-size: 17px; line-height: 26px; }  /* typo agrandie (15 -> 17) */

  /* Lose-section */
  /* Lose section mobile : écusson EN HAUT (avant la headline), puis headline, puis texte
     — différent du desktop où la headline reste en haut.
     On utilise grid-template-areas pour réordonner sans toucher au HTML. */
  /* Écusson à cheval : positionnement ABSOLU (déterministe, hors flux grid).
     L'écusson chevauche la frontière guide(blanc)/garantie(pink) : ~110px au-dessus du pink. */
  .lose-section { position: relative; padding: 0 0 50px; overflow: visible; }
  .lose-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "text";
    gap: 20px;
    padding: 180px 16px 0;   /* padding-top : pousse la headline sous l'écusson absolu à cheval */
  }
  .lose-container h3 { font-size: 26px; line-height: 1.3; margin: 0; }
  .lose-text-holder { text-align: center; }
  .lose-text-holder p { font-size: 18px; line-height: 27px; margin-bottom: 18px; }  /* texte agrandi (retour user) */
  .lose-image-holder {
    position: absolute;
    top: -110px;            /* ~110px de l'écusson au-dessus du pink (dans le blanc) = à cheval */
    left: 0;
    right: 0;
    margin: 0;
    z-index: 2;
  }

  /* Author-sign-holder mobile : centré sous le texte, photo coach légèrement réduite */
  .author-sign-holder { justify-content: center; }
  .author-sign-holder .author-photo { width: 80px; height: 80px; }

  /* Solo-testimonial mobile : on annule le chevauchement (utile uniquement en desktop)
     et on remet un padding-bottom normal à la lose-section. */
  .lose-section { padding-bottom: 50px; }
  .solo-testimonial {
    margin-top: 0;
    padding: 30px 0;
  }
  /* Sur mobile, le H2 reste dans le text-holder (au-dessus du paragraphe) — déjà
     géré par les règles globales .hide-mobile/.hide-desktop, rien de spécial ici. */

  /* Youtube-section — vidéo verticale immersive (type TikTok), priorité mobile */
  .youtube-section { padding: 36px 0; }
  .youtube-section h2 { font-size: 28px; padding: 0 16px; }
  .vsl-vertical {
    max-width: 330px;
    border-width: 0;
    border-radius: 14px;
  }

  /* FAQ — source mobile : padding 16px 16px, font-size 18px, toggle 32px */
  .faq { padding: 36px 0 16px; }   /* padding-bottom réduit (retour user : espace FAQ↔CTA bas /2) */
  .faq h2 { font-size: 28px; padding: 0 16px; }
  .faq-item summary {
    padding: 16px 16px;
    font-size: 18px;
    gap: 12px;
  }
  .faq-item summary::after { font-size: 32px; }
  .faq-answer { padding: 10px 16px 18px; font-size: 16px; line-height: 24px; }

  /* Offer / CTA final (.diet-container) */
  .offer-section { padding: 40px 0; }
  .offer-section:not(.offer-section--top) { padding-top: 14px; }   /* espace FAQ↔CTA bas /2 (CTA haut intact) */
  .diet-container {
    padding: 6px 14px 6px 6px;       /* ultra-serré mobile aussi */
    border-radius: 12px;
  }
  .diet-cta .btn-cta {
    font-size: 24px;
    padding: 16px 16px 10px;
  }
  /* Fix débordement horizontal mobile : le nowrap du bouton + sous-texte forçait
     une largeur min-content (~379px) > colonne (332px) → toute la page débordait
     de 31px (écusson 60j compris). On autorise le wrap + on laisse le grid item rétrécir. */
  .diet-cta { min-width: 0; }
  .diet-cta .btn-cta,
  .diet-cta .btn-cta .sub { white-space: normal; }
  .payment-row { gap: 12px; }

  /* Nouveaux blocs mobile */
  .diet-promise {
    padding: 18px 16px 8px;
    gap: 14px;
  }
  .diet-promise__check {
    width: 44px;
    height: 44px;
    font-size: 22px;
    border-width: 3px;
  }
  .diet-promise p { font-size: 14px; line-height: 21px; }

  .cta-limited-offer { font-size: 20px; }

  .diet-badges { margin: 24px auto 6px; padding: 0 8px; }
  .diet-badges-img { max-width: 100%; }
  .payments-image { max-width: 320px; }
  /* Écusson positionné en bas-droite du BOUTON (via .btn-with-badge) */
  .guarantee-corner {
    width: 70px;
    bottom: -18px;
    right: -14px;
  }
  .guarantee-badge {
    width: 270px;   /* écusson agrandi (retour user) — était 140px ; règle effective sur mobile */
  }

  /* CTA buttons — réduire taille sur mobile */
  .btn-cta {
    font-size: 28px;
    padding: 18px 32px 14px;
  }
  .btn-cta.big {
    font-size: 30px;
    padding: 20px 40px 14px;
  }
  .btn-cta .sub { font-size: 16px; line-height: 1.3; }

  /* =====================================================================
     CTA BAS UNIQUEMENT (retours user) — le CTA haut (.offer-section--top)
     et tout le PC restent strictement figés.
     ===================================================================== */
  /* Texte promesse sur ~7 lignes comme l'original : on retire la box (bordure + cream)
     et le padding pour élargir le texte, et on aligne la typo (~16px). */
  .offer-section:not(.offer-section--top) .diet-container {
    border: 0;
    background: transparent;
    padding: 0;
  }
  /* gain de largeur (padding conteneur 16->10) pour une typo plus grande en restant sur ~7 lignes */
  .offer-section:not(.offer-section--top) > .container { padding: 0 10px; }
  /* l'élargissement pousse le bouton : on rentre l'écusson 60j pour éviter le débord (CTA bas only) */
  .offer-section:not(.offer-section--top) .guarantee-corner { right: -8px; }
  .offer-section:not(.offer-section--top) .diet-promise {
    padding: 0 0 10px;
    gap: 8px;
  }
  .offer-section:not(.offer-section--top) .diet-promise__check {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  .offer-section:not(.offer-section--top) .diet-promise p {
    font-size: 15px;          /* typo légèrement agrandie (retour user) en gardant ~7 lignes */
    line-height: 21px;
  }
  /* #2 headline bouton "20€ OFFERT" : grosse, occupe le bouton */
  .offer-section:not(.offer-section--top) .diet-cta .btn-cta { font-size: 42px; }
  /* #3 sous-texte plus petit, sur 1 ligne */
  .offer-section:not(.offer-section--top) .diet-cta .btn-cta .sub {
    font-size: 15px;
    white-space: nowrap;
  }
  /* #1 artefact : le mètre jaune du mockup chevauchait « OFFRE LIMITÉE » -> on supprime le débord bas.
     + on réduit le débord HAUT (-70 -> -42) pour aérer l'espace texte ↔ mockup (retour user). */
  .offer-section:not(.offer-section--top) .diet-mockup-img { margin-top: -42px; margin-bottom: 0; }

  /* Footer */
  footer.gap-footer { padding: 30px 0 64px; }   /* bottom : place pour le sticky CTA */

  /* Sticky CTA — typo réduite sur mobile pour tenir sur 1 ligne */
  .sticky-cta { gap: 12px; padding: 9px 12px; }
  .sticky-cta__price { font-size: 17px; letter-spacing: 0; }
  .sticky-cta__btn { font-size: 16px; padding: 8px 16px; }
}