@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Karla:ital,wght@0,400;0,500;0,700;1,400&display=swap");

/* ============================================================
   1H de Tranquillité — feuille de style commune aux 4 pages
   Palette et typographies conformes au cahier des charges v1.0
   ============================================================ */

:root {
  /* — Palette officielle — */
  --creme:        #FBF3E7;
  --creme-fonce:  #F3E7D4;
  --teal:         #125E6B;
  --teal-fonce:   #0B4048;
  --teal-clair:   #1C7F8F;
  --framboise:    #C7386A;
  --rose:         #E85D8A;
  --rose-pale:    #FCE4EC;
  --moutarde:     #F2A93B;
  --moutarde-pale:#FDF0D8;
  --encre:        #26201C;
  --encre-douce:  #5C524B;
  --blanc:        #FFFFFF;
  --postit:       #FFF6C9;
  --postit-ombre: #EFE3A4;

  --ombre-carte:  0 4px 0 rgba(11, 64, 72, .08), 0 10px 24px rgba(11, 64, 72, .10);
  --ombre-douce:  0 6px 18px rgba(11, 64, 72, .09);
  --rayon:        18px;
  --rayon-sm:     12px;
  --gouttiere:    20px;
  --max:          1120px;

  color-scheme: light;
}

/* — Reset partagé (aligne les pages autonomes sur la page d'accueil) — */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* `clip` et non `hidden` : `hidden` crée un conteneur de défilement
     et empêche l'en-tête collant de fonctionner. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: "Karla", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  overflow-x: clip;
  /* Pastille de mosaïque : le motif du produit, en très discret */
  background-image:
    radial-gradient(circle, rgba(18, 94, 107, .07) 1.6px, transparent 1.7px);
  background-size: 26px 26px;
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.12;
  color: var(--teal-fonce);
  text-wrap: balance;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2.1rem, 6.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 4.4vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2.6vw, 1.4rem); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--framboise); }

strong { font-weight: 700; color: var(--teal-fonce); }

:focus-visible {
  outline: 3px solid var(--framboise);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   Mise en page générale
   ============================================================ */

.conteneur {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: clamp(52px, 8vw, 88px); }
.section--serre { padding-block: clamp(38px, 5vw, 60px); }

.section--creme-fonce { background: var(--creme-fonce); }
.section--teal { background: var(--teal); color: var(--creme); }
.section--teal h2,
.section--teal h3 { color: var(--blanc); }

.section-entete {
  max-width: 54ch;
  margin: 0 auto clamp(30px, 5vw, 48px);
  text-align: center;
}
.section-entete p {
  color: var(--encre-douce);
  font-size: 1.05rem;
}
.section--teal .section-entete p { color: rgba(251, 243, 231, .85); }

.eyebrow {
  display: inline-block;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--framboise);
  margin-bottom: .6em;
}
.section--teal .eyebrow { color: var(--moutarde); }

.lead {
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  color: var(--encre-douce);
  max-width: 62ch;
}

/* ============================================================
   En-tête commun
   ============================================================ */

.entete {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--teal);
  color: var(--creme);
  box-shadow: 0 2px 0 var(--teal-fonce), 0 6px 18px rgba(11, 64, 72, .18);
}

.entete__barre {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  padding-block: 10px;
  flex-wrap: wrap;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--blanc);
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.32rem;
  line-height: 1.05;
  letter-spacing: -.01em;
  margin-right: auto;
}
.logo__pastille {
  display: grid;
  grid-template-columns: repeat(2, 9px);
  grid-template-rows: repeat(2, 9px);
  gap: 3px;
  padding: 6px;
  background: var(--creme);
  border-radius: 10px;
  flex: none;
}
.logo__pastille i { border-radius: 3px; display: block; }
.logo__pastille i:nth-child(1) { background: var(--framboise); }
.logo__pastille i:nth-child(2) { background: var(--moutarde); }
.logo__pastille i:nth-child(3) { background: var(--teal-clair); }
.logo__pastille i:nth-child(4) { background: var(--rose); }
.logo span small {
  display: block;
  font-family: "Karla", sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--moutarde);
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.nav a {
  color: rgba(251, 243, 231, .88);
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  padding: 8px 13px;
  border-radius: 999px;
  white-space: nowrap;
}
.nav a:hover { background: rgba(251, 243, 231, .13); color: var(--blanc); }
.nav a[aria-current="page"] {
  background: var(--creme);
  color: var(--teal-fonce);
}

a.prix-entete { text-decoration: none; transition: transform .12s ease, background-color .15s ease; }
a.prix-entete:hover { background: #FFBB55; transform: translateY(-1px); }
a.prix-entete:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(11, 64, 72, .28); }

.prix-entete {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  background: var(--moutarde);
  color: var(--teal-fonce);
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 1rem;
  box-shadow: 0 3px 0 rgba(11, 64, 72, .28);
  white-space: nowrap;
}
.prix-entete small {
  font-family: "Karla", sans-serif;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .8;
}

/* ============================================================
   Boutons à relief
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  padding: 15px 28px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}

.btn--primaire {
  background: var(--framboise);
  color: var(--blanc);
  box-shadow: 0 5px 0 #96234C, 0 12px 22px rgba(150, 35, 76, .28);
}
.btn--primaire:hover { background: var(--rose); transform: translateY(-2px); box-shadow: 0 7px 0 #96234C, 0 16px 26px rgba(150, 35, 76, .3); }
.btn--primaire:active { transform: translateY(3px); box-shadow: 0 2px 0 #96234C; }

.btn--moutarde {
  background: var(--moutarde);
  color: var(--teal-fonce);
  box-shadow: 0 5px 0 #C9871F, 0 12px 22px rgba(201, 135, 31, .28);
}
.btn--moutarde:hover { background: #FFBB55; transform: translateY(-2px); }
.btn--moutarde:active { transform: translateY(3px); box-shadow: 0 2px 0 #C9871F; }

.btn--fantome {
  background: transparent;
  color: var(--teal-fonce);
  border: 2.5px solid var(--teal-fonce);
  box-shadow: none;
  padding: 13px 26px;
}
.btn--fantome:hover { background: var(--teal-fonce); color: var(--creme); }

.section--teal .btn--fantome { color: var(--creme); border-color: var(--creme); }
.section--teal .btn--fantome:hover { background: var(--creme); color: var(--teal-fonce); }

.btn--large { font-size: 1.2rem; padding: 18px 38px; }
.btn--bloc { width: 100%; }

.sous-btn {
  font-size: .88rem;
  color: var(--encre-douce);
  margin-top: 12px;
}
.section--teal .sous-btn { color: rgba(251, 243, 231, .8); }

/* ============================================================
   Post-it
   ============================================================ */

.postit {
  background: var(--postit);
  border-radius: 3px;
  padding: 22px 24px 24px;
  transform: rotate(-2.2deg);
  box-shadow: 4px 6px 0 var(--postit-ombre), 0 14px 28px rgba(38, 32, 28, .14);
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 600;
  color: var(--encre);
  position: relative;
  max-width: 340px;
}
.postit::before {
  content: "";
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%) rotate(3deg);
  width: 84px; height: 26px;
  background: rgba(232, 93, 138, .45);
  box-shadow: 0 2px 5px rgba(38, 32, 28, .12);
}
.postit h3 {
  font-size: 1.02rem;
  color: var(--framboise);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .55em;
}
.postit ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 7px;
  font-size: .98rem;
  line-height: 1.35;
}
.postit li { padding-left: 24px; position: relative; }
.postit li::before {
  content: "✔";
  position: absolute; left: 0; top: 0;
  color: var(--framboise);
  font-weight: 700;
}

/* ============================================================
   Hero
   ============================================================ */

.hero { padding-block: clamp(36px, 6vw, 70px) clamp(48px, 7vw, 80px); }

.hero__grille {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.badge {
  display: inline-block;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .03em;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--blanc);
  color: var(--teal-fonce);
  border: 2px solid var(--teal-fonce);
}
.badge--rose { background: var(--framboise); color: var(--blanc); border-color: var(--framboise); }
.badge--moutarde { background: var(--moutarde); color: var(--teal-fonce); border-color: var(--teal-fonce); }

.hero h1 .surligne {
  background: linear-gradient(transparent 58%, var(--moutarde) 58%, var(--moutarde) 92%, transparent 92%);
  padding-inline: 2px;
}
.hero h1 em {
  font-style: normal;
  color: var(--framboise);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 26px;
}

.hero__visuel {
  position: relative;
  max-width: 430px;
  margin-inline: auto;
}
.hero__visuel img {
  width: 100%;
  height: auto;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  background: var(--blanc);
}
.hero__postit {
  position: absolute;
  right: -10px;
  bottom: -26px;
  max-width: 250px;
  font-size: .92rem;
  padding: 16px 18px;
  transform: rotate(3deg);
}
.hero__postit::before { width: 60px; height: 20px; top: -9px; }

.rassurance-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 2px dashed rgba(18, 94, 107, .28);
  font-size: .92rem;
  font-weight: 700;
  color: var(--teal-fonce);
}
.rassurance-ligne span { display: inline-flex; align-items: center; gap: 8px; }
.rassurance-ligne span::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 3px;
  background: var(--framboise);
  flex: none;
}
.rassurance-ligne span:nth-child(2)::before { background: var(--moutarde); }
.rassurance-ligne span:nth-child(3)::before { background: var(--teal-clair); }
.rassurance-ligne span:nth-child(4)::before { background: var(--rose); }

/* ============================================================
   Grilles de cartes
   ============================================================ */

.grille {
  display: grid;
  gap: 22px;
}
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }

.carte {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 26px 24px;
  box-shadow: var(--ombre-carte);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.carte p { color: var(--encre-douce); font-size: .99rem; }
.carte h3 { margin-bottom: 0; }

.carte--douleur {
  border-top: 6px solid var(--framboise);
}
.carte--douleur:nth-child(2) { border-top-color: var(--moutarde); }
.carte--douleur:nth-child(3) { border-top-color: var(--teal-clair); }
.carte--douleur:nth-child(4) { border-top-color: var(--rose); }

.carte__heure {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--framboise);
  font-variant-numeric: tabular-nums;
}
.carte--douleur:nth-child(2) .carte__heure { color: #B97D18; }
.carte--douleur:nth-child(3) .carte__heure { color: var(--teal); }
.carte--douleur:nth-child(4) .carte__heure { color: var(--rose); }

/* Bénéfices : pas de carte, juste une pastille + du texte */
.benefice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px;
}
.benefice__icone {
  width: 54px; height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--rose-pale);
  color: var(--framboise);
  margin-bottom: 6px;
}
.benefice:nth-child(2) .benefice__icone { background: var(--moutarde-pale); color: #B97D18; }
.benefice:nth-child(3) .benefice__icone { background: #DDF0F2; color: var(--teal); }
.benefice__icone svg { width: 28px; height: 28px; }
.benefice p { color: var(--encre-douce); font-size: .99rem; }
.section--teal .benefice p { color: rgba(251, 243, 231, .85); }
.section--teal .benefice__icone { background: rgba(251, 243, 231, .14); color: var(--moutarde); }
.section--teal .benefice:nth-child(2) .benefice__icone,
.section--teal .benefice:nth-child(3) .benefice__icone { background: rgba(251, 243, 231, .14); color: var(--moutarde); }

/* ============================================================
   Étapes
   ============================================================ */

.etape {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 26px 24px;
  box-shadow: var(--ombre-carte);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.etape__num {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--teal);
  color: var(--blanc);
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 0 var(--teal-fonce);
  font-variant-numeric: tabular-nums;
}
.etape:nth-child(4) .etape__num { background: var(--framboise); box-shadow: 0 4px 0 #96234C; }
.etape h3 { margin-bottom: 0; }
.etape p { color: var(--encre-douce); font-size: .99rem; }

/* ============================================================
   Témoignages
   ============================================================ */

.avis {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 26px 24px;
  box-shadow: var(--ombre-carte);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.avis__etoiles { color: var(--moutarde); font-size: 1.05rem; letter-spacing: 2px; }
.avis blockquote {
  margin: 0;
  font-size: 1.02rem;
  color: var(--encre);
  line-height: 1.6;
}
.avis blockquote::before { content: "« "; }
.avis blockquote::after  { content: " »"; }
.avis figcaption {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: .9rem;
  color: var(--encre-douce);
  border-top: 1px solid rgba(38, 32, 28, .1);
}
.avis__initiale {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--blanc);
  display: grid; place-items: center;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  flex: none;
}
.avis:nth-child(2) .avis__initiale { background: var(--framboise); }
.avis:nth-child(3) .avis__initiale { background: var(--moutarde); color: var(--teal-fonce); }
.avis figcaption strong { display: block; color: var(--teal-fonce); }

/* ============================================================
   Bloc offre — coupon à bordure pointillée
   ============================================================ */

.coupon {
  max-width: 620px;
  margin-inline: auto;
  background: var(--blanc);
  border: 3px dashed var(--framboise);
  border-radius: 24px;
  padding: clamp(28px, 5vw, 44px);
  text-align: center;
  box-shadow: var(--ombre-douce);
  position: relative;
}
.coupon__ruban {
  display: inline-block;
  background: var(--moutarde);
  color: var(--teal-fonce);
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  font-size: .88rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 20px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.coupon h2 { margin-bottom: .35em; }
.coupon__prix {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  margin: 18px 0 6px;
  flex-wrap: wrap;
}
.coupon__barre {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--encre-douce);
  text-decoration: line-through;
  text-decoration-color: var(--framboise);
  text-decoration-thickness: 3px;
}
.coupon__actuel {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: clamp(2.6rem, 7vw, 3.5rem);
  font-weight: 800;
  color: var(--framboise);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.coupon__eco {
  display: inline-block;
  background: var(--rose-pale);
  color: var(--framboise);
  font-weight: 700;
  font-size: .88rem;
  padding: 5px 14px;
  border-radius: 999px;
}
.coupon ul {
  list-style: none;
  margin: 22px 0;
  padding: 0;
  display: grid;
  gap: 10px;
  text-align: left;
  max-width: 380px;
  margin-inline: auto;
}
.coupon ul li {
  position: relative;
  padding-left: 30px;
  font-size: .99rem;
}
.coupon ul li::before {
  content: "✔";
  position: absolute; left: 0; top: -1px;
  color: var(--blanc);
  background: var(--teal);
  width: 21px; height: 21px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: .72rem;
}
.paiement-secu {
  margin: 12px 0 0;
  font-size: .8rem;
  color: var(--encre-douce);
}

.coupon__garantie {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 2px dashed rgba(199, 56, 106, .35);
  font-size: .92rem;
  color: var(--encre-douce);
}
.coupon__garantie strong { color: var(--framboise); }

/* — Deux offres côte à côte — */
.offres {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 920px;
  margin-inline: auto;
}
.offres .coupon { max-width: none; margin: 0; height: 100%; }
/* le libellé du bouton reste sur une seule ligne */
.offres .coupon .btn { font-size: 1.04rem; padding-inline: 18px; white-space: nowrap; }

.coupon--pack {
  border-color: var(--teal);
  background: linear-gradient(var(--blanc), var(--blanc)) padding-box;
  box-shadow: 0 6px 0 rgba(18, 94, 107, .12), 0 16px 34px rgba(11, 64, 72, .14);
}
.coupon--pack .coupon__ruban { background: var(--teal); color: var(--blanc); }
.coupon--pack .coupon__actuel { color: var(--teal); }
.coupon--pack .coupon__barre { text-decoration-color: var(--teal); }
.coupon--pack .coupon__eco { background: #DDF0F2; color: var(--teal); }
.coupon--pack .coupon__garantie { border-top-color: rgba(18, 94, 107, .35); }
.coupon--pack ul li::before { background: var(--framboise); }

.coupon__offert {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 2px;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--teal-fonce);
}
.coupon__boites {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 16px 0 4px;
}
.coupon__boites i {
  width: 36px; height: 44px;
  border-radius: 5px;
  background: var(--teal);
  box-shadow: inset 0 -7px 0 rgba(0, 0, 0, .14);
  display: block;
}
.coupon__boites i:nth-child(4) {
  background: var(--framboise);
  position: relative;
}
.coupon__boites i:nth-child(4)::after {
  content: "offerte";
  position: absolute;
  top: -19px; left: 50%;
  transform: translateX(-50%);
  font-family: "Karla", sans-serif;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--framboise);
}
.coupon__unite {
  font-family: "Karla", sans-serif;
  font-size: .95rem;
  color: var(--encre-douce);
  margin-top: 4px;
}

/* — Bandeau cadeau — */
.cadeau {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
  background: var(--blanc);
  border: 3px solid var(--moutarde);
  border-radius: 24px;
  padding: clamp(24px, 4vw, 38px);
  box-shadow: var(--ombre-carte);
}
.cadeau__noeud {
  align-self: start;
  width: 76px; height: 76px;
  border-radius: 20px;
  background: var(--moutarde-pale);
  color: #B97D18;
  display: grid; place-items: center;
  flex: none;
}
.cadeau__noeud svg { width: 40px; height: 40px; }
.cadeau h2 { margin-bottom: .3em; }
.cadeau p { color: var(--encre-douce); margin-bottom: 0; }
.cadeau__occasions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.cadeau__occasions span {
  background: var(--moutarde-pale);
  color: #7A5410;
  font-weight: 700;
  font-size: .86rem;
  padding: 5px 13px;
  border-radius: 999px;
}

@media (max-width: 860px) {
  .offres { grid-template-columns: 1fr; }
  .cadeau { grid-template-columns: 1fr; text-align: left; }
  .cadeau .btn { width: 100%; }
}

/* ============================================================
   FAQ (accordéon)
   ============================================================ */

.faq {
  max-width: 760px;
  margin-inline: auto;
  display: grid;
  gap: 12px;
}
.faq details {
  background: var(--blanc);
  border-radius: var(--rayon-sm);
  box-shadow: var(--ombre-douce);
  overflow: hidden;
  border-left: 5px solid var(--teal);
}
.faq details[open] { border-left-color: var(--framboise); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 52px 18px 22px;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--teal-fonce);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 20px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--framboise);
  font-weight: 700;
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { background: var(--creme); }
.faq__reponse {
  padding: 0 22px 20px;
  color: var(--encre-douce);
  font-size: .99rem;
}

/* ============================================================
   Bandeau CTA final
   ============================================================ */

.bandeau-cta {
  background: var(--teal-fonce);
  color: var(--creme);
  text-align: center;
  padding-block: clamp(48px, 7vw, 76px);
  background-image: radial-gradient(circle, rgba(251, 243, 231, .09) 1.7px, transparent 1.8px);
  background-size: 26px 26px;
}
.bandeau-cta h2 { color: var(--blanc); }
.bandeau-cta p { color: rgba(251, 243, 231, .85); max-width: 52ch; margin-inline: auto; }
.bandeau-cta .btn { margin-top: 24px; }

/* ============================================================
   Formulaire de contact
   ============================================================ */

.contact-grille {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(26px, 4vw, 44px);
  align-items: start;
}

.formulaire {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: clamp(24px, 4vw, 36px);
  box-shadow: var(--ombre-carte);
  display: grid;
  gap: 18px;
}
.champ { display: grid; gap: 7px; }
.champ label {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: .98rem;
  color: var(--teal-fonce);
}
.champ input,
.champ select,
.champ textarea {
  font-family: "Karla", sans-serif;
  font-size: 1rem;
  color: var(--encre);
  background: var(--creme);
  border: 2px solid rgba(18, 94, 107, .25);
  border-radius: var(--rayon-sm);
  padding: 12px 14px;
  width: 100%;
}
.champ textarea { resize: vertical; min-height: 140px; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--framboise);
  background: var(--blanc);
  outline: none;
}
.champ__aide { font-size: .84rem; color: var(--encre-douce); }

.note-maquette {
  background: var(--moutarde-pale);
  border: 2px dashed var(--moutarde);
  border-radius: var(--rayon-sm);
  padding: 14px 16px;
  font-size: .9rem;
  color: #7A5410;
}
.note-maquette strong { color: #7A5410; }

.infos-pratiques {
  display: grid;
  gap: 16px;
}
.info-bloc {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 22px 24px;
  box-shadow: var(--ombre-douce);
}
.info-bloc h3 { font-size: 1.1rem; margin-bottom: .4em; }
.info-bloc p { font-size: .96rem; color: var(--encre-douce); margin-bottom: 0; }
.info-bloc a { font-weight: 700; }

/* ============================================================
   Page Notre histoire
   ============================================================ */

.recit {
  max-width: 68ch;
  margin-inline: auto;
}
.recit p { font-size: 1.06rem; color: var(--encre-douce); }
.recit h2 { margin-top: 1.6em; }
.recit h2:first-child { margin-top: 0; }
.recit blockquote {
  margin: 30px 0;
  padding: 22px 26px;
  background: var(--blanc);
  border-left: 6px solid var(--moutarde);
  border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0;
  box-shadow: var(--ombre-douce);
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--teal-fonce);
  line-height: 1.4;
}

.valeur {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 26px 24px;
  box-shadow: var(--ombre-carte);
  border-bottom: 6px solid var(--moutarde);
}
.valeur:nth-child(2) { border-bottom-color: var(--framboise); }
.valeur:nth-child(3) { border-bottom-color: var(--teal-clair); }
.valeur h3 { margin-bottom: .35em; }
.valeur p { color: var(--encre-douce); font-size: .99rem; margin-bottom: 0; }

.duo-visuel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 660px;
  margin-inline: auto;
}
.duo-visuel img {
  width: 100%;
  height: auto;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  background: var(--blanc);
}

/* ============================================================
   Tableau produit (fiche technique)
   ============================================================ */

.tableau-enveloppe { overflow-x: auto; }
.fiche-produit {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanc);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre-douce);
  font-size: .97rem;
  min-width: 420px;
}
.fiche-produit th,
.fiche-produit td {
  text-align: left;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(38, 32, 28, .09);
}
.fiche-produit th {
  font-family: "Baloo 2", system-ui, sans-serif;
  color: var(--teal-fonce);
  width: 42%;
  background: var(--creme);
}
.fiche-produit tr:last-child th,
.fiche-produit tr:last-child td { border-bottom: none; }
.fiche-produit td { color: var(--encre-douce); }

/* ============================================================
   PAGE DE VENTE — éléments de conversion
   ============================================================ */

/* — Bandeau d'annonce — */
.annonce {
  background: var(--framboise);
  color: var(--blanc);
  text-align: center;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: .95rem;
  padding: 9px 20px;
  padding-top: calc(9px + env(safe-area-inset-top, 0px));
  line-height: 1.35;
}
.annonce strong { color: var(--moutarde); }
@media (max-width: 640px) {
  .annonce { font-size: .85rem; padding-inline: 14px; }
  .annonce__plus { display: none; }
}

/* — En-tête de page de vente : aucune sortie — */
.entete--vente { top: 0; }
.entete--vente .entete__barre { min-height: 62px; }
.entete--vente .nav { margin-left: auto; }
.entete__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .86rem;
  color: rgba(251, 243, 231, .9);
  line-height: 1.2;
  white-space: nowrap;
}
/* La note laisse la place au menu et au bouton dès que ça serre */
@media (max-width: 1150px) {
  .entete__note { display: none; }
}
.entete__note b { color: var(--moutarde); letter-spacing: 1px; }
.entete .btn {
  font-size: .96rem;
  padding: 11px 20px;
}

/* — Hero de la page de vente : accroche / visuel / suite — */
.hero--vente { padding-block: clamp(26px, 4vw, 46px) clamp(40px, 6vw, 66px); }
.hero--vente .hero__grille {
  grid-template-columns: 1.06fr .94fr;
  grid-template-areas:
    "accroche visuel"
    "suite    visuel";
  align-items: start;
  row-gap: 0;
}
.hero__accroche { grid-area: accroche; }
.hero--vente .hero__visuel { grid-area: visuel; align-self: center; }
.hero__suite { grid-area: suite; }

.hero--vente h1 { font-size: clamp(1.95rem, 4.3vw, 2.95rem); margin-bottom: .35em; }
.hero--vente .lead { font-size: clamp(1rem, 1.9vw, 1.1rem); margin-bottom: 0; }
.hero--vente .hero__badges { margin-bottom: 14px; }

@media (max-width: 900px) {
  .hero--vente .hero__grille {
    grid-template-columns: 1fr;
    grid-template-areas: "accroche" "visuel" "suite";
    row-gap: 24px;
  }
  .hero--vente .hero__visuel { order: 0; }
}

/* — Preuve sociale sous le titre — */
.preuve {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-size: .92rem;
  color: var(--encre-douce);
}
.preuve__etoiles { color: var(--moutarde); font-size: 1.1rem; letter-spacing: 2px; }
.preuve strong { color: var(--teal-fonce); }

/* — Arguments à puces du hero — */
.arguments {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.arguments li {
  position: relative;
  padding-left: 34px;
  font-size: 1.04rem;
  line-height: 1.45;
}
.arguments li::before {
  content: "✔";
  position: absolute;
  left: 0; top: 2px;
  width: 23px; height: 23px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--blanc);
  font-size: .74rem;
  display: grid;
  place-items: center;
}
.arguments strong { color: var(--teal-fonce); }

/* — Bloc prix inline du hero — */
.achat-inline {
  margin-top: 26px;
  padding: 20px 22px;
  background: var(--blanc);
  border: 3px dashed var(--framboise);
  border-radius: 20px;
  box-shadow: var(--ombre-douce);
}
.achat-inline__ligne {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.achat-inline__prix {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--framboise);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.achat-inline__barre {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 1.25rem;
  color: var(--encre-douce);
  text-decoration: line-through;
  text-decoration-color: var(--framboise);
  text-decoration-thickness: 2px;
}
.achat-inline__eco {
  background: var(--rose-pale);
  color: var(--framboise);
  font-weight: 700;
  font-size: .82rem;
  padding: 4px 12px;
  border-radius: 999px;
}
.achat-inline .sous-btn { text-align: center; }
.achat-inline__port {
  margin: -6px 0 14px;
  font-size: .89rem;
  color: var(--encre-douce);
}
.achat-inline__port b { color: var(--teal-fonce); }
.achat-inline__pack {
  display: block;
  margin-top: 12px;
  padding: 11px 16px;
  background: #DDF0F2;
  border: 2px dashed var(--teal);
  border-radius: var(--rayon-sm);
  text-align: center;
  text-decoration: none;
  color: var(--teal-fonce);
  line-height: 1.3;
}
.achat-inline__pack:hover { background: #CDE9EC; }
.achat-inline__pack b {
  display: block;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 1.02rem;
  color: var(--teal);
}
.achat-inline__pack span { font-size: .86rem; color: var(--encre-douce); }

/* — Barre de réassurance — */
.reassurance {
  background: var(--teal-fonce);
  color: var(--creme);
  padding-block: 18px;
}
.reassurance__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 24px;
}
.reassurance__item {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: .93rem;
  font-weight: 700;
  line-height: 1.25;
}
.reassurance__item svg {
  width: 24px; height: 24px;
  flex: none;
  color: var(--moutarde);
}

/* — Comparatif de prix — */
.comparatif {
  max-width: 640px;
  margin-inline: auto;
  display: grid;
  gap: 10px;
}
.comparatif__ligne {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  background: var(--blanc);
  border-radius: var(--rayon-sm);
  padding: 15px 20px;
  box-shadow: 0 2px 8px rgba(11, 64, 72, .07);
  font-size: 1rem;
}
.comparatif__ligne span:last-child {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.comparatif__ligne--nous {
  background: var(--teal);
  color: var(--blanc);
  box-shadow: 0 5px 0 var(--teal-fonce), 0 14px 26px rgba(11, 64, 72, .2);
  font-weight: 700;
  padding-block: 19px;
}
.comparatif__ligne--nous span:last-child { color: var(--moutarde); font-size: 1.25rem; }
.comparatif__note {
  text-align: center;
  font-size: .92rem;
  color: var(--encre-douce);
  margin-top: 6px;
}

/* — Sceau de garantie — */
.garantie {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 32px);
  align-items: center;
  max-width: 760px;
  margin-inline: auto;
  background: var(--blanc);
  border-radius: 24px;
  padding: clamp(24px, 4vw, 36px);
  box-shadow: var(--ombre-carte);
  border-top: 7px solid var(--teal);
}
.garantie__sceau {
  width: 112px; height: 112px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--blanc);
  display: grid;
  place-items: center;
  text-align: center;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.05;
  font-size: 1.5rem;
  box-shadow: 0 6px 0 var(--teal-fonce);
  flex: none;
}
.garantie__sceau small {
  display: block;
  font-family: "Karla", sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--moutarde);
  margin-top: 3px;
}
.garantie h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.garantie p { color: var(--encre-douce); margin-bottom: 0; }

/* — Barre d'achat fixe (mobile) — */
.barre-achat {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--blanc);
  border-top: 2px solid rgba(18, 94, 107, .16);
  box-shadow: 0 -6px 22px rgba(11, 64, 72, .16);
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  align-items: center;
  gap: 14px;
}
.barre-achat__prix {
  line-height: 1.1;
  flex: none;
}
.barre-achat__prix b {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 1.4rem;
  color: var(--framboise);
  display: block;
}
.barre-achat__prix small {
  font-size: .72rem;
  color: var(--encre-douce);
  text-decoration: line-through;
}
.barre-achat .btn { flex: 1; padding: 13px 18px; font-size: 1rem; }

/* — Pied de page réduit — */
.pied--vente { text-align: center; padding-block: 34px 26px; }
.pied--vente .pied__bas { justify-content: center; text-align: center; }

@media (max-width: 860px) {
  .reassurance__grille { grid-template-columns: repeat(2, 1fr); }
  .garantie { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

@media (max-width: 700px) {
  .barre-achat { display: flex; }
  body.a-barre-achat { padding-bottom: 82px; }
  .entete--vente .entete__note { display: none; }
  .entete--vente .btn { display: none; }
}

/* ============================================================
   Bloc PROBLÈME — la chronologie
   ============================================================ */

.chrono {
  max-width: 720px;
  margin-inline: auto;
  display: grid;
  gap: 0;
  position: relative;
}
.chrono__etape {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 20px;
  align-items: start;
  padding: 0 0 26px;
  position: relative;
}
.chrono__etape:last-child { padding-bottom: 0; }
/* le fil qui relie les étapes */
.chrono__etape::before {
  content: "";
  position: absolute;
  left: 108px; top: 30px; bottom: -4px;
  width: 3px;
  background: repeating-linear-gradient(var(--teal) 0 6px, transparent 6px 12px);
  opacity: .45;
}
.chrono__etape:last-child::before { display: none; }
.chrono__heure {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.12rem;
  color: var(--framboise);
  text-align: right;
  padding-top: 14px;
  font-variant-numeric: tabular-nums;
  position: relative;
}
.chrono__heure::after {
  content: "";
  position: absolute;
  right: -25px; top: 19px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--framboise);
  box-shadow: 0 0 0 4px var(--creme);
}
.chrono__texte {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 18px 22px;
  box-shadow: var(--ombre-carte);
}
.chrono__texte h3 { font-size: 1.1rem; margin-bottom: .3em; }
.chrono__texte p { color: var(--encre-douce); font-size: .98rem; margin-bottom: 0; }

.chrono__chute {
  text-align: center;
  max-width: 54ch;
  margin: 34px auto 0;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--teal-fonce);
  line-height: 1.4;
}

/* ============================================================
   Bloc AGITATION — ce que coûte l'inaction
   ============================================================ */

.cout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 880px;
  margin-inline: auto;
}
.cout__item {
  background: rgba(251, 243, 231, .08);
  border: 2px solid rgba(251, 243, 231, .2);
  border-radius: var(--rayon);
  padding: 24px 20px;
  text-align: center;
}
.cout__chiffre {
  display: block;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: clamp(2.1rem, 5vw, 2.7rem);
  font-weight: 800;
  color: var(--moutarde);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.cout__item p {
  color: rgba(251, 243, 231, .88);
  font-size: .95rem;
  margin: 8px 0 0;
}
.cout__total {
  max-width: 60ch;
  margin: 32px auto 0;
  text-align: center;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  font-weight: 600;
  color: var(--blanc);
  line-height: 1.45;
}
.cout__total b { color: var(--moutarde); }

@media (max-width: 760px) {
  .cout { grid-template-columns: 1fr; max-width: 420px; }
  .chrono__etape { grid-template-columns: 68px 1fr; gap: 16px; }
  .chrono__etape::before { left: 82px; }
  .chrono__heure { font-size: .98rem; }
  .chrono__heure::after { right: -22px; width: 13px; height: 13px; }
}

/* ============================================================
   Photos produit
   ============================================================ */

.photo-large {
  max-width: 980px;
  margin-inline: auto;
}
.photo-large img {
  width: 100%;
  height: auto;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  background: var(--blanc);
}
.photo-large figcaption {
  text-align: center;
  font-size: .92rem;
  color: var(--encre-douce);
  margin-top: 14px;
}

.animaux-liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 760px;
  margin: 26px auto 0;
}
.animaux-liste span {
  background: var(--blanc);
  color: var(--teal-fonce);
  font-weight: 700;
  font-size: .9rem;
  padding: 6px 15px;
  border-radius: 999px;
  box-shadow: 0 2px 7px rgba(11, 64, 72, .08);
}
.section--teal .animaux-liste span { background: rgba(251, 243, 231, .14); color: var(--creme); box-shadow: none; }

.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.galerie figure {
  margin: 0;
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 12px 12px 4px;
  box-shadow: var(--ombre-carte);
}
.galerie img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--rayon-sm);
  background: var(--creme-fonce);
}
.galerie figcaption {
  padding: 12px 6px 10px;
  font-size: .93rem;
  color: var(--encre-douce);
  line-height: 1.45;
}
.galerie figcaption b {
  display: block;
  font-family: "Baloo 2", system-ui, sans-serif;
  color: var(--teal-fonce);
  font-size: 1.02rem;
  margin-bottom: 2px;
}

@media (max-width: 860px) {
  .galerie { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

/* ============================================================
   Pages légales
   ============================================================ */

.sommaire-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 760px;
  margin-inline: auto;
}
.sommaire-legal a {
  background: var(--blanc);
  color: var(--teal-fonce);
  text-decoration: none;
  font-weight: 700;
  font-size: .92rem;
  padding: 9px 18px;
  border-radius: 999px;
  box-shadow: var(--ombre-douce);
}
.sommaire-legal a:hover { background: var(--teal); color: var(--blanc); }

.legal {
  max-width: 74ch;
  margin-inline: auto;
  font-size: .99rem;
}
.legal h2 {
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  margin-top: 2em;
  padding-top: 1em;
  border-top: 3px solid rgba(18, 94, 107, .18);
  scroll-margin-top: 130px;
}
.legal h3 {
  font-size: 1.08rem;
  color: var(--framboise);
  margin-top: 1.7em;
}
.legal p, .legal li { color: var(--encre-douce); }
.legal ul { padding-left: 20px; display: grid; gap: 9px; margin: 0 0 1em; }
.legal strong { color: var(--teal-fonce); }
.legal__maj {
  font-size: .88rem;
  font-style: italic;
}

.a-completer {
  background: var(--moutarde-pale);
  border: 2px dashed var(--moutarde);
  border-radius: var(--rayon-sm);
  padding: 15px 18px;
  font-size: .92rem;
  color: #7A5410;
  margin: 24px 0;
}
.a-completer strong { color: #7A5410; }

/* ============================================================
   Avis — crédibilité
   ============================================================ */

.avis__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.avis__date {
  font-size: .8rem;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
}
.avis__verifie {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .76rem;
  font-weight: 700;
  color: var(--teal);
  background: #DDF0F2;
  padding: 3px 10px;
  border-radius: 999px;
  margin-top: 4px;
}
.avis__verifie::before { content: "✔"; font-size: .66rem; }

.note-globale {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 18px 26px;
  box-shadow: var(--ombre-douce);
  max-width: 560px;
  margin: 0 auto clamp(26px, 4vw, 38px);
}
.note-globale__chiffre {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--teal-fonce);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.note-globale__detail { font-size: .92rem; color: var(--encre-douce); line-height: 1.35; }
.note-globale__detail b { display: block; color: var(--moutarde); font-size: 1.05rem; letter-spacing: 2px; }

/* ============================================================
   Capture d'e-mail (filet de récupération)
   ============================================================ */

.filet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 4vw, 44px);
  align-items: center;
  background: var(--teal);
  color: var(--creme);
  border-radius: 26px;
  padding: clamp(26px, 4vw, 44px);
  box-shadow: 0 6px 0 var(--teal-fonce), 0 18px 36px rgba(11, 64, 72, .2);
}
.filet h2 { color: var(--blanc); font-size: clamp(1.5rem, 3vw, 2.05rem); }
.filet p { color: rgba(251, 243, 231, .88); margin-bottom: 0; }
.filet .eyebrow { color: var(--moutarde); }
.filet__liste {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: .95rem;
}
.filet__liste li { padding-left: 24px; position: relative; }
.filet__liste li::before {
  content: "✔";
  position: absolute; left: 0; top: 0;
  color: var(--moutarde);
  font-size: .8rem;
}
.filet__form {
  background: var(--blanc);
  border-radius: 20px;
  padding: clamp(20px, 3vw, 28px);
  display: grid;
  gap: 13px;
}
.filet__form label {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 700;
  color: var(--teal-fonce);
  font-size: .96rem;
}
.filet__form input {
  font-family: "Karla", sans-serif;
  font-size: 1rem;
  background: var(--creme);
  border: 2px solid rgba(18, 94, 107, .25);
  border-radius: var(--rayon-sm);
  padding: 12px 14px;
  width: 100%;
  color: var(--encre);
}
.filet__form input:focus { border-color: var(--framboise); background: var(--blanc); outline: none; }
/* spécificité volontaire : doit l'emporter sur `.filet p` (texte crème) */
.filet .filet__form .filet__rgpd {
  font-size: .78rem;
  color: var(--encre-douce);
  line-height: 1.4;
  margin: 0;
}
.filet__rgpd a { color: var(--framboise); }

@media (max-width: 860px) {
  .filet { grid-template-columns: 1fr; }
}

/* ============================================================
   Les fondateurs
   ============================================================ */

.fondateurs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 4vw, 38px);
  align-items: center;
  max-width: 780px;
  margin-inline: auto;
  background: var(--blanc);
  border-radius: 24px;
  padding: clamp(22px, 4vw, 34px);
  box-shadow: var(--ombre-carte);
}
.fondateurs__portrait {
  width: 168px;
  border-radius: 20px;
  background: var(--creme-fonce);
  display: block;
}
.fondateurs h3 { margin-bottom: .3em; }
.fondateurs p { color: var(--encre-douce); margin-bottom: 0; font-size: .99rem; }
.fondateurs__signature {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 700;
  color: var(--framboise);
  margin-top: 10px !important;
}

@media (max-width: 640px) {
  .fondateurs { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* ============================================================
   Pied de page
   ============================================================ */

.pied {
  background: var(--teal-fonce);
  color: rgba(251, 243, 231, .82);
  padding-block: 46px 30px;
  font-size: .93rem;
}
.pied__haut {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(251, 243, 231, .18);
}
.pied h4 {
  color: var(--moutarde);
  font-size: .86rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied a { color: rgba(251, 243, 231, .82); text-decoration: none; }
.pied a:hover { color: var(--moutarde); text-decoration: underline; }
.pied__marque {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--blanc);
  margin-bottom: 8px;
}
.pied__bas {
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: space-between;
  font-size: .85rem;
  color: rgba(251, 243, 231, .6);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
  /* le menu se resserre pour rester sur une seule ligne */
  .nav { gap: 0; }
  .nav a { padding: 7px 9px; font-size: .88rem; }
  .entete--vente .btn { font-size: .88rem; padding: 10px 14px; }
  .hero__grille { grid-template-columns: 1fr; }
  .hero__visuel { order: -1; max-width: 460px; margin-inline: auto; }
  .hero__postit { right: 4px; bottom: -20px; max-width: 210px; }
  .grille--4 { grid-template-columns: repeat(2, 1fr); }
  .grille--3 { grid-template-columns: repeat(2, 1fr); }
  .contact-grille { grid-template-columns: 1fr; }
  .pied__haut { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .entete__barre { min-height: 0; padding-block: 12px; row-gap: 10px; }
  .logo { font-size: 1.15rem; }
  .nav { order: 3; width: 100%; justify-content: space-between; gap: 0; }
  .nav a { padding: 6px 9px; font-size: .82rem; }
  .prix-entete { font-size: .92rem; padding: 6px 13px; }
  .grille--2,
  .grille--3,
  .grille--4 { grid-template-columns: 1fr; }
  .duo-visuel { grid-template-columns: 1fr; }
  .pied__haut { grid-template-columns: 1fr; gap: 24px; }
  .hero__actions .btn { width: 100%; }
  .postit { max-width: 100%; }
  .hero__postit { position: static; margin: 24px auto 0; transform: rotate(-1.5deg); max-width: 100%; }
}

@media (max-width: 400px) {
  .nav a { padding: 5px 6px; font-size: .73rem; }
  .logo { font-size: 1.05rem; }
  .conteneur { padding-inline: 16px; }
  /* la pastille de prix reste sur la ligne du logo */
  .prix-entete { font-size: .85rem; padding: 5px 11px; }
  .prix-entete small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   VERSION RUPTURE DE STOCK — liste d'attente
   ============================================================ */

/* — Pastille d'information, posée au-dessus des boutons d'achat — */
.rupture-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--moutarde-pale);
  color: #7A5410;
  border: 2px solid var(--moutarde);
  border-radius: 999px;
  padding: 6px 15px;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: .86rem;
  line-height: 1.2;
  margin-bottom: 12px;
}
.rupture-chip::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--moutarde);
  flex: none;
}
.section--teal .rupture-chip,
.bandeau-cta .rupture-chip {
  background: rgba(242, 169, 59, .18);
  color: var(--moutarde);
}

/* — La fenêtre de liste d'attente — */
.modale {
  border: none;
  padding: 0;
  max-width: 520px;
  width: calc(100% - 32px);
  border-radius: 26px;
  background: var(--creme);
  color: var(--encre);
  box-shadow: 0 24px 60px rgba(11, 64, 72, .35);
  overflow: visible;
}
.modale::backdrop {
  background: rgba(11, 64, 72, .62);
  backdrop-filter: blur(3px);
}
.modale__corps { padding: clamp(26px, 5vw, 38px); }

.modale__fermer {
  position: absolute;
  top: 12px; right: 12px;
  width: 38px; height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(38, 32, 28, .08);
  color: var(--teal-fonce);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.modale__fermer:hover { background: rgba(38, 32, 28, .16); }

.modale h2 {
  font-size: clamp(1.45rem, 4vw, 1.85rem);
  margin-bottom: .4em;
}
.modale p { color: var(--encre-douce); font-size: .99rem; }
.modale strong { color: var(--teal-fonce); }

.modale__retour {
  display: block;
  background: var(--blanc);
  border-left: 5px solid var(--teal);
  border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0;
  padding: 13px 16px;
  margin: 18px 0;
  font-size: .95rem;
  color: var(--encre-douce);
}
.modale__retour b { color: var(--teal-fonce); }

.modale__form { display: grid; gap: 13px; margin-top: 20px; }
.modale__form label {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--teal-fonce);
  display: block;
  margin-bottom: 6px;
}
.modale__form input {
  font-family: "Karla", sans-serif;
  font-size: 1rem;
  width: 100%;
  background: var(--blanc);
  border: 2px solid rgba(18, 94, 107, .25);
  border-radius: var(--rayon-sm);
  padding: 12px 14px;
  color: var(--encre);
}
.modale__form input:focus { border-color: var(--framboise); outline: none; }

.modale__rgpd { font-size: .78rem; color: var(--encre-douce); line-height: 1.45; margin: 0; }
.modale__rgpd a { color: var(--framboise); }

.modale__avantages {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: .95rem;
}
.modale__avantages li { position: relative; padding-left: 26px; color: var(--encre-douce); }
.modale__avantages li::before {
  content: "✔";
  position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--blanc);
  font-size: .62rem;
  display: grid;
  place-items: center;
}

/* — Confirmation — */
.modale__merci { text-align: center; }
.modale__merci .modale__coche {
  width: 72px; height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--blanc);
  display: grid;
  place-items: center;
  font-size: 2rem;
  box-shadow: 0 5px 0 var(--teal-fonce);
}

@media (max-width: 480px) {
  .modale { border-radius: 20px; }
}

/* ============================================================
   DEUX CIBLES — l'aiguillage
   ============================================================ */

.aiguillage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 900px;
  margin-inline: auto;
}
.aiguillage__carte {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--blanc);
  border: 3px solid var(--teal);
  border-radius: 24px;
  padding: clamp(24px, 4vw, 32px);
  text-decoration: none;
  color: var(--encre);
  box-shadow: 0 5px 0 rgba(18, 94, 107, .18), 0 14px 30px rgba(11, 64, 72, .1);
  transition: transform .14s ease, box-shadow .14s ease;
}
.aiguillage__carte:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 rgba(18, 94, 107, .18), 0 20px 36px rgba(11, 64, 72, .14);
}
.aiguillage__carte--cadeau { border-color: var(--framboise); box-shadow: 0 5px 0 rgba(199, 56, 106, .18), 0 14px 30px rgba(150, 35, 76, .1); }
.aiguillage__carte--cadeau:hover { box-shadow: 0 8px 0 rgba(199, 56, 106, .18), 0 20px 36px rgba(150, 35, 76, .14); }

.aiguillage__icone {
  width: 58px; height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #DDF0F2;
  color: var(--teal);
}
.aiguillage__carte--cadeau .aiguillage__icone { background: var(--rose-pale); color: var(--framboise); }
.aiguillage__icone svg { width: 30px; height: 30px; }

.aiguillage__carte h3 { font-size: clamp(1.2rem, 2.6vw, 1.45rem); margin-bottom: 0; }
.aiguillage__carte p { color: var(--encre-douce); font-size: 1rem; margin-bottom: 0; }
.aiguillage__fleche {
  margin-top: auto;
  padding-top: 8px;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  color: var(--teal);
}
.aiguillage__carte--cadeau .aiguillage__fleche { color: var(--framboise); }
.aiguillage__fleche::after { content: " →"; }

/* ============================================================
   Bloc CADEAU — les occasions
   ============================================================ */

.occasions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 920px;
  margin: 36px auto 0;
}
.occasion {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 22px 18px;
  box-shadow: var(--ombre-carte);
  border-top: 5px solid var(--framboise);
}
.occasion:nth-child(2) { border-top-color: var(--moutarde); }
.occasion:nth-child(3) { border-top-color: var(--teal-clair); }
.occasion:nth-child(4) { border-top-color: var(--rose); }
.occasion h4 {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 1.04rem;
  color: var(--teal-fonce);
  margin: 0 0 6px;
}
.occasion p { font-size: .94rem; color: var(--encre-douce); margin: 0; }

.cadeau-arguments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 920px;
  margin: 36px auto 0;
}
.cadeau-argument {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.cadeau-argument span {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--moutarde);
  color: var(--teal-fonce);
  display: grid;
  place-items: center;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  font-size: .9rem;
}
.cadeau-argument h4 {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 1.05rem;
  color: var(--teal-fonce);
  margin: 2px 0 5px;
}
.cadeau-argument p { font-size: .96rem; color: var(--encre-douce); margin: 0; }

@media (max-width: 860px) {
  .aiguillage { grid-template-columns: 1fr; max-width: 460px; }
  .occasions { grid-template-columns: repeat(2, 1fr); }
  .cadeau-arguments { grid-template-columns: 1fr; max-width: 460px; }
}
@media (max-width: 520px) {
  .occasions { grid-template-columns: 1fr; max-width: 420px; }
}