/* ══════════ Polices auto-hébergées (RGPD : plus d'appel à Google Fonts) ══════════ */
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/lora-v37-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/lora-v37-latin-italic.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/lora-v37-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/lora-v37-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/lora-v37-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-v24-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-v24-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/caveat-v23-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/caveat-v23-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/caveat-v23-latin-700.woff2') format('woff2'); }

/* ═══════════════════════════════════════════════════════════
   Div'In Nature · Ysabel · Home v2
   Fidèle à la maquette de référence choisie par Ysabel :
   03_DIRECTION_ARTISTIQUE/references/700669009_…_n.jpg
   Palette : crème/ivoire, or doux, vert forêt, olive,
   touches teal / terracotta-rose des pastilles.
   Typo : Fraunces (titres, grands corps), Poppins 400/500
   (texte 17.5px), Great Vibes réservée aux accents script.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Palette v3 : couleurs exactes échantillonnées sur l'affiche d'Ysabel (07/07/2026) */
  --creme:        #FBF7F0;
  --creme-2:      #F3ECDE;
  --blanc:        #FDFBF6;
  --vert:         #44523C;
  --vert-fonce:   #37432F;
  --olive:        #7F8777;
  --olive-fonce:  #5E6852;
  --teal:         #4D626C; /* bleu pétrole : réservé au territoire Human Design (Brand Book) */
  --or:           #C58237; /* ocre / moutarde */
  --or-doux:      #C9A45C;
  --or-pale:      #E8D8B6;
  --terracotta:   #C57B61; /* chaleur, corps, toucher : la couleur du soin incarné */
  --brique:       #B35538;
  --prune:        #7E494E;
  --rose:         #D7B0A1;
  --beige-rose:   #EAD3C9;
  --encre:        #2E2C25;
  --texte:        #4E4D43;
  --titres: 'Lora', Georgia, serif;
  --sans:   'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --script: 'Caveat', cursive;
}

/* ── Base ── */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  overscroll-behavior: none;
  scrollbar-gutter: stable;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-padding-top: 100px; /* smooth géré en JS (clics même page uniquement) */
}

body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--texte);
  background: var(--creme);
  line-height: 1.72;
  font-size: 17.5px;
  overflow-x: clip; /* clip, pas hidden : évite le bug molette avec overscroll-behavior sur html */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

body.menu-ouvert { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }

.nowrap { white-space: nowrap; }
.br-mobile { display: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

h1, h2, h3 {
  font-family: var(--titres);
  font-optical-sizing: auto;
  color: var(--encre);
  font-weight: 600;
}

/* ══════════ TOPBAR ══════════ */
.topbar {
  background: var(--vert); /* même vert que le bouton CTA */
  font-size: 0.85rem;
}

.topbar-inner {
  max-width: 1680px;
  margin: 0 auto;
  padding: 8px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar-coords {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.topbar a {
  color: var(--creme);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.25s;
}

.topbar a:hover { color: var(--or-doux); }

.topbar svg { width: 16px; height: 16px; flex: 0 0 auto; }

.topbar-social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-social-label { color: rgba(251, 247, 240, 0.8); }

.topbar-social a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--creme);
}

.topbar-social a:hover { color: var(--or-doux); }

/* ══════════ HEADER / NAV (pattern JBC) ══════════ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(46, 74, 54, 0.1);
}

.nav {
  max-width: 1680px;
  margin: 0 auto;
  padding: 10px 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* colonnes latérales égales : menu centré sur l'axe de la page */
  align-items: center;
  column-gap: 18px;
}
.nav > .nav-logo { justify-self: start; }
.nav > .nav-cta-btn.nav-desktop-only { justify-self: end; }

/* Logo + wordmark : dimensions fixes (pas de saut de header) */
.nav-logo {
  text-decoration: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  width: 348px;
  height: 86px;
  flex: 0 0 auto;
  line-height: 1;
}

.nav-logo-img {
  width: 86px;
  height: 86px;
  object-fit: contain;
  mix-blend-mode: multiply; /* fond blanc du logo fondu dans le crème */
  flex: 0 0 auto;
}

.nav-logo-textes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}

.logo-script {
  font-family: var(--script);
  font-weight: 600;
  font-size: 2rem;
  color: var(--vert);
  white-space: nowrap;
  line-height: 1;
}

.logo-sub {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: var(--or);
  margin-top: 5px;
  line-height: 1.6;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: 24px;
  align-items: center;
  list-style: none;
  justify-self: center;
  min-width: 0;
  justify-content: center;
}

.nav-links a:not(.nav-cta-btn) {
  text-decoration: none;
  color: var(--encre);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  padding: 6px 1px;
  border-bottom: 3px solid transparent;
  transition: color 0.25s, border-color 0.25s;
  white-space: nowrap;
}

.nav-links a:not(.nav-cta-btn):hover,
.nav-links a.actif {
  color: var(--vert);
  border-bottom-color: var(--or); /* trait jaune du site */
}

.nav-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--vert);
  color: var(--creme);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  padding: 12px 18px;
  border-radius: 8px;
  min-height: 46px;
  transition: background 0.25s, transform 0.25s;
  white-space: nowrap;
}

.nav-cta-btn:hover { transform: translateY(-1px); }

.nav-mobile-only { display: none; }
.nav-desktop-only { display: inline-flex; align-items: center; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 8px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  align-items: center;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 2px;
  background: var(--vert);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

.hamburger.actif span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.actif span:nth-child(2) { opacity: 0; }
.hamburger.actif span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════ BOUTONS ══════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--sans);
  /* 0.9rem = taille des boutons des 5 cartes chemins, référence d'harmonie (Julien 20/07) */
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 8px;
  min-height: 48px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, transform 0.25s, border-color 0.25s;
  text-align: center;
}

.btn:hover { transform: translateY(-2px); }

.btn-olive { background: var(--olive-fonce); color: var(--blanc); }


.btn-blanc {
  background: var(--blanc);
  color: var(--encre);
  border-color: rgba(43, 43, 36, 0.35);
}


.btn-vert { background: var(--vert); color: var(--blanc); }


.btn-teal { background: var(--teal); color: var(--blanc); }


.btn-or { background: var(--or); color: var(--blanc); }


.btn-petit {
  /* même taille de texte que tous les boutons (harmonie Julien 20/07),
     seul le gabarit (padding/rayon) reste plus compact */
  font-size: 0.9rem;
  letter-spacing: 1.1px;
  padding: 11px 18px;
  min-height: 44px;
  border-radius: 7px;
}

/* ══════════ HERO ══════════ */
.hero {
  position: relative;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(230, 213, 174, 0.55), transparent 55%),
    linear-gradient(120deg, #F8F2E4 0%, #F3E9D2 55%, #EDDFBF 100%);
  overflow: hidden;
}

.hero-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 68px 28px 76px;
  display: grid;
  grid-template-columns: minmax(0, 53fr) minmax(0, 47fr);
  gap: 52px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.15rem, 4vw, 3.3rem);
  line-height: 1.14;
  font-weight: 600;
  color: var(--vert);
  letter-spacing: -0.3px;
}

.hero h1 .ligne-or { color: var(--or); }

.hero-accent {
  display: block;
  font-family: var(--script);
  font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  color: var(--brique);
  margin-top: 14px;
  line-height: 1.2;
  letter-spacing: 0;
}

.filet-or {
  width: 96px;
  height: 15px;
  margin-top: 18px;
  color: var(--or);
}

.hero-sub {
  margin-top: 22px;
  max-width: 560px;
  font-size: 1.06rem;
  line-height: 1.75;
}

/* Badges pictos */
.hero-badges {
  list-style: none;
  display: flex;
  align-items: stretch;
  margin-top: 32px;
  max-width: 580px;
}

.hero-badges li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  padding: 4px 10px;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--encre);
}

.hero-badges li + li { border-left: 1px solid rgba(46, 74, 54, 0.18); }

.hero-badges svg {
  width: 32px;
  height: 32px;
  color: var(--or);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* Photo + géométrie Human Design + encadré */
.hero-visuel { position: relative; }

.hero-photo {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
}

/* lumière dorée sur la vraie photo d'Ysabel */
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(200deg, rgba(224, 172, 82, 0.3) 0%, rgba(224, 172, 82, 0) 45%),
    linear-gradient(0deg, rgba(120, 84, 20, 0.12), rgba(120, 84, 20, 0));
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.hero-bodygraph {
  position: absolute;
  top: 22px;
  right: 20px;
  width: clamp(100px, 11vw, 150px);
  height: auto;
  color: var(--or-doux);
  opacity: 0.95;
  filter: drop-shadow(0 2px 10px rgba(80, 55, 10, 0.25));
  pointer-events: none;
}

.hero-encadre {
  position: absolute;
  right: -145px; /* plus de 50 % de la carte hors de la photo */
  top: 26px;
  bottom: auto;
  max-width: 262px;
  background: var(--blanc);
  border-radius: 16px;
  padding: 24px 24px 26px;
  font-family: var(--titres);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--encre);
}

.hero-encadre .feuille-or {
  width: 30px;
  height: 30px;
  color: var(--or-doux);
  margin-top: 10px;
  margin-left: auto;
}

/* ══════════ BANDE 6 RUBRIQUES ══════════ */
.rubriques { background: var(--blanc); padding: 56px 0 68px; }

.rubriques-grille {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  padding: 0 28px;
}

.rubrique { text-align: center; }

.rubrique-visuel {
  position: relative;
  aspect-ratio: 1 / 1.05;
  border-radius: 16px;
  overflow: hidden;
}

.rubrique-visuel img,
.rubrique-visuel .visuel-attente {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.rubrique:hover .rubrique-visuel img { transform: scale(1.05); }

/* bloc d'attente propre (visuel à générer ensuite) */
.visuel-attente {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #E9E4CF 0%, #C8CBAC 60%, #A9B18F 100%);
}

.visuel-attente svg {
  width: 44%;
  height: 44%;
  color: rgba(46, 74, 54, 0.5);
}

.visuel-attente-or { background: linear-gradient(160deg, #F3EAD3 0%, #E3D3A6 60%, #CBB273 100%); }
.visuel-attente-or svg { color: rgba(120, 84, 20, 0.55); }

/* Pastilles : cercle CSS (centrage parfait) + icône transparente teintée ivoire.
   Couleurs alignées sur les cartes accompagnements (olive / teal / or). */
.rubrique-pastille {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin: -44px auto 0;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--blanc);
  color: var(--blanc);
}

.rubrique-pastille img {
  width: 58%;
  height: 58%;
  object-fit: contain;
}

.pastille-vert { background: #5B6B3F; }
.pastille-teal { background: var(--teal); }
.pastille-or { background: var(--or); }

.rubrique h3 {
  font-size: 1.22rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 16px;
  line-height: 1.3;
}

.rubrique p {
  font-size: 0.88rem;
  line-height: 1.62;
  margin-top: 8px;
  padding: 0 6px;
}

/* ══════════ MES ACCOMPAGNEMENTS ══════════ */
.accompagnements {
  background: var(--creme);
  padding: 80px 28px 92px;
}

.titre-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 860px;
  margin: 0 auto 62px;
}

.titre-section h2 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
}

.titre-section .filet {
  flex: 1;
  height: 1px;
  background: rgba(43, 43, 36, 0.25);
}

.titre-section .losange { color: var(--or); font-size: 1rem; }

.accomp-grille {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
}

.carte-accomp {
  position: relative;
  background: var(--blanc);
  border: 2px solid rgba(68, 82, 60, 0.22);
  border-radius: 14px;
  padding: 46px 26px 30px;
  display: flex;
  flex-direction: column;
}

.carte-numero {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--titres);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--blanc);
  border: 3px solid var(--creme);
}

.numero-olive { background: #5B6B3F; }
.numero-teal { background: var(--teal); }
.numero-or { background: var(--or); }

.carte-accomp .icone-carte {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  object-fit: contain;
}

.carte-accomp h3 {
  font-size: 1.38rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  color: var(--vert);
}

.carte-teal h3 { color: var(--teal); }
.carte-or h3 { color: var(--or); }

.carte-accomp .sous-titre {
  font-family: var(--titres);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  text-align: center;
  color: var(--vert);
  margin-top: 6px;
}

.carte-teal .sous-titre { color: var(--teal); }
.carte-or .sous-titre { color: var(--or); }

.carte-accomp .intro {
  font-size: 0.92rem;
  line-height: 1.68;
  margin-top: 18px;
}

.liste-checks {
  list-style: none;
  margin-top: 16px;
  display: grid;
  gap: 9px;
}

.liste-checks li {
  position: relative;
  padding-left: 29px;
  font-size: inherit; /* = 17.5px, aligné sur les paragraphes */
  line-height: 1.6;
}

.liste-checks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 500;
  color: var(--vert);
}

.carte-teal .liste-checks li::before { color: var(--teal); }
.carte-or .liste-checks li::before { color: var(--or); }

.carte-accomp .mention {
  margin-top: auto;
  padding-top: 22px;
  font-size: 0.84rem;
  color: var(--texte);
  text-align: center;
}

.carte-accomp .mention span { display: block; }

/* 4e carte : citation sur visuel */
.carte-citation {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  background:
    linear-gradient(165deg, rgba(46, 74, 54, 0.92) 0%, rgba(46, 100, 114, 0.88) 60%, rgba(36, 57, 42, 0.94) 100%);
}

.carte-citation-fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.carte-citation::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(36, 57, 42, 0.74) 0%, rgba(36, 57, 42, 0.3) 100%);
  z-index: 1;
}

.carte-citation-corps {
  position: relative;
  z-index: 2;
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.carte-citation .guillemets {
  font-family: var(--titres);
  font-size: 3.6rem;
  line-height: 0.6;
  color: var(--blanc);
  margin-bottom: 24px;
}

.carte-citation p {
  font-family: var(--titres);
  font-weight: 500;
  font-size: 1.62rem;
  line-height: 1.42;
  color: var(--blanc);
}

.carte-citation .feuille-or {
  width: 60px;
  height: 60px;
  color: rgba(253, 251, 245, 0.8);
  margin-top: auto;
  margin-left: auto;
}

/* ══════════ BANDE 4 TUILES ══════════ */
.offres {
  background: var(--creme-2);
  padding: 68px 28px 76px;
}

.offres-grille {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}

/* Tuile : photo pleine largeur en haut (sans bord), corps texte dessous */
.tuile {
  background: var(--blanc);
  border-radius: 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tuile-corps {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  flex: 1;
}

.tuile h3 {
  font-size: 1.18rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  line-height: 1.3;
}

.tuile p { font-size: 0.88rem; line-height: 1.62; }

.tuile-visuel {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  flex: 0 0 auto;
}

.tuile-visuel img,
.tuile-visuel .visuel-attente {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.tuile:hover .tuile-visuel img { transform: scale(1.05); }

.tuile .liste-checks { margin-top: 2px; gap: 7px; }
.tuile .liste-checks li { font-size: 0.86rem; }
.tuile .liste-checks li::before { color: var(--teal); }

.tuile-prix {
  list-style: none;
  display: grid;
  gap: 4px;
  font-size: 0.92rem;
  color: var(--encre);
  font-weight: 500;
}

.tuile-prix .prix-note { font-size: 0.82rem; color: var(--texte); font-weight: 400; }

.tuile .btn { margin-top: auto; align-self: flex-start; }
.tuile-corps .btn { margin-top: auto; }

.tuile-deco-feuille {
  width: 44px;
  height: 44px;
  color: var(--olive);
  opacity: 0.5;
  align-self: flex-end;
  margin-top: -8px;
}

/* ══════════ NEWSLETTER ══════════ */
.newsletter {
  position: relative;
  background: #7A7E58;
  padding: 56px 28px;
  overflow: hidden;
}

/* Ornements botaniques or (calques transparents générés) */
.newsletter-deco {
  position: absolute;
  width: clamp(200px, 22vw, 320px);
  height: auto;
  bottom: -6%;
  opacity: 0.5;
  pointer-events: none;
}

.newsletter-deco-gauche { left: -40px; }
.newsletter-deco-droite { right: -40px; transform: scaleX(-1); }

.newsletter-inner {
  position: relative;
  z-index: 2;
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: 44px;
  align-items: center;
}

.newsletter-texte {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.newsletter-icone {
  flex: 0 0 auto;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  background: var(--or);
  border: 3px solid rgba(253, 251, 245, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blanc);
}

.newsletter-icone img {
  width: 58%;
  height: 58%;
  object-fit: contain;
}

.newsletter h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blanc);
  line-height: 1.3;
}

.newsletter-texte p {
  margin-top: 10px;
  font-size: 0.94rem;
  color: rgba(253, 251, 245, 0.88);
}

.newsletter-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.newsletter-form input {
  font-family: var(--sans);
  font-size: 16px; /* anti-zoom iOS */
  font-weight: 400;
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid rgba(43, 43, 36, 0.15);
  border-radius: 8px;
  padding: 13px 16px;
  min-height: 50px;
  width: 100%;
}

.newsletter-form input:focus {
  outline: 2px solid var(--or);
  outline-offset: 1px;
}

.newsletter-form .btn {
  grid-column: 1 / -1;
  width: 100%;
}

.newsletter-rgpd {
  grid-column: 1 / -1;
  font-size: 0.76rem;
  color: rgba(253, 251, 245, 0.68);
  text-align: center;
}

/* Newsletter : honeypot (jamais affiché, pas de left:-9999px qui fait scroller mobile)
   et message de statut après envoi (newsletter.js) */
.newsletter-form .nl-hp { display: none; }
.newsletter-statut {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.92rem;
  color: var(--or-pale);
  text-align: center;
}
.newsletter-statut.err { color: #F1C5C0; }

/* ══════════ FOOTER (sticky : body flex + main flex 1) ══════════ */
/* Refonte du 01/09/2026 (demande Julien) : le footer recoit un vrai sol vert
   fonce qui ferme la page (comme les sites d'Isabelle Olivrie et de Damien
   Doussot), les infos pratiques et les liens passent au premier plan, les
   trois valeurs deviennent une bande fine, et l'ornement botanique + le grain
   papier du hero donnent la texture. */
.footer {
  position: relative;
  background: var(--vert-fonce);
  color: rgba(247, 242, 232, 0.88);
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: multiply;
  pointer-events: none;
}


.footer-inner {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  padding: 70px 28px 54px;
  display: grid;
  grid-template-columns: 1.35fr 0.9fr 1.15fr 1.1fr;
  gap: 44px;
}

/* Colonne marque : logo centré au-dessus du pitch (retour Ysabel 13/09, lecture Julien 15/09) */
.footer-marque { max-width: 330px; }

.footer-logo-pastille {
  margin: 0 auto;
  width: 134px;
  height: 134px;
  background: var(--creme);
  border-radius: 18px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-pitch {
  font-style: italic;
  font-size: 0.9rem;
  margin-top: 18px;
  max-width: 330px;
  color: rgba(247, 242, 232, 0.85);
}

.footer-devise {
  font-family: var(--titres);
  font-style: italic;
  font-weight: 500;
  font-size: 1.04rem;
  line-height: 1.5;
  color: var(--or-pale);
  margin-top: 20px;
  max-width: 270px;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(251, 247, 240, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--creme);
  transition: transform 0.25s;
}

@media (hover: hover) {
  .footer-social a:hover { transform: translateY(-3px); }
}

.footer-social svg { width: 17px; height: 17px; }

.footer-titre {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--or-pale);
  margin-bottom: 14px;
}

.footer-titre svg {
  width: 27px;
  height: 27px;
  color: var(--or-doux);
  flex: 0 0 auto;
}

.footer-liens {
  list-style: none;
  display: grid;
  gap: 8px;
}

.footer-liens a {
  color: rgba(247, 242, 232, 0.82);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.25s;
}

.footer-liens a:hover { color: var(--or-pale); }

.footer-infos {
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 0.9rem;
}

.footer-infos a { color: rgba(247, 242, 232, 0.82); text-decoration: none; transition: color 0.25s; }
.footer-infos a:hover { color: var(--or-pale); }

.footer-cta { margin-top: 20px; }

.footer-valeurs {
  position: relative;
  border-top: 1px solid rgba(232, 216, 182, 0.22);
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px 28px 22px;
  display: flex;
  justify-content: center;
  gap: 10px 46px;
  flex-wrap: wrap;
  font-size: 0.86rem;
  color: rgba(247, 242, 232, 0.75);
  text-align: center;
}

.footer-valeurs .losange-mini { color: var(--or-doux); margin-right: 7px; }
.footer-valeurs strong { color: var(--or-pale); font-weight: 500; }

.footer-bas {
  position: relative;
  background: #2A3424;
  color: rgba(247, 242, 232, 0.72);
  font-size: 0.8rem;
}

.footer-bas-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 15px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-bas a { color: rgba(247, 242, 232, 0.88); text-decoration: none; }
.footer-bas a:hover { color: var(--or-pale); }

/* ══════════ Texture papier (grain très léger, hero + newsletter) ══════════ */
.hero::before,
.newsletter::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

.hero-inner { position: relative; z-index: 2; }

/* ══════════ Animations ══════════ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible { opacity: 1; transform: none; }

/* La vague qui suit un élément .reveal apparaît EN MÊME TEMPS que lui
   (sinon elle est déjà là pendant que le titre se révèle autour) */
.reveal + .filet-vague {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible + .filet-vague { opacity: 1; transform: none; }

.reveal-delai { transition-delay: 0.12s; }

/* Apparition en cascade des grilles */
.rubriques-grille > :nth-child(2), .accomp-grille > :nth-child(2), .offres-grille > :nth-child(2) { transition-delay: 0.08s; }
.rubriques-grille > :nth-child(3), .accomp-grille > :nth-child(3), .offres-grille > :nth-child(3) { transition-delay: 0.16s; }
.rubriques-grille > :nth-child(4), .accomp-grille > :nth-child(4), .offres-grille > :nth-child(4) { transition-delay: 0.24s; }
.rubriques-grille > :nth-child(5) { transition-delay: 0.32s; }
.rubriques-grille > :nth-child(6) { transition-delay: 0.4s; }

/* Pastilles : petit pop après l'apparition de la carte */
.rubrique .rubrique-pastille {
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.4s ease 0.3s, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
}

.rubrique.visible .rubrique-pastille { opacity: 1; transform: none; }

/* Bodygraph du hero : flottement doux */
@keyframes flotter {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

.hero-bodygraph { animation: flotter 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal + .filet-vague { opacity: 1; transform: none; transition: none; }
  .btn, .nav-cta-btn, .carte-accomp, .nav-links { transition: none; }
  .rubrique .rubrique-pastille { opacity: 1; transform: none; transition: none; }
  .hero-bodygraph { animation: none; }
  .rubrique-visuel img { transition: none; }
  .rubrique:hover .rubrique-visuel img { transform: none; }
}

/* ═══════════ Responsive ═══════════ */

@media (max-width: 1180px) {
  .accomp-grille { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .offres-grille { grid-template-columns: repeat(2, 1fr); }
  .carte-citation { min-height: 320px; }
}

@media (max-width: 1024px) {
  .topbar-inner { padding: 7px 20px; }
  .topbar-social-label { display: none; }

  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }

  .nav-links {
    position: fixed;
    inset: 0;
    /* justify-self s'applique aussi aux boîtes fixed : le center du desktop
       rétrécissait et centrait le panneau (bandes visibles sur iPhone) */
    justify-self: stretch;
    width: 100%;
    padding: 150px 36px 44px;
    background: var(--creme);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    gap: 6px;
    transform: translateX(100%);
    /* visibility différée : le panneau fermé n'existe plus pour iOS
       (sinon Safari étend la page vers le panneau hors écran : menu fantôme à droite) */
    visibility: hidden;
    transition: transform 0.35s ease, visibility 0s linear 0.35s;
    z-index: 90;
    flex: initial !important;
    overflow-y: auto;
  }

  .nav-links.ouvert {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.35s ease;
  }

  .nav-links a:not(.nav-cta-btn) {
    font-size: 1.25rem;
    font-family: var(--titres);
    padding: 9px 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .nav-mobile-only { display: list-item !important; margin-top: 18px; }
  .nav-desktop-only { display: none !important; }
  .hamburger { display: flex; position: relative; z-index: 95; }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 46px;
    padding: 48px 24px 62px;
  }

  .hero-visuel { max-width: 580px; margin: 0 auto; width: 100%; }
  .hero-encadre { right: 10px; }

  .rubriques-grille { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .rubriques { padding-top: 44px; }

  .newsletter-inner { grid-template-columns: 1fr; gap: 30px; }

  .footer-inner { grid-template-columns: 1fr 1fr; gap: 38px; }
  .footer-valeurs { flex-direction: column; gap: 10px; }
}

@media (max-width: 600px) {
  body { font-size: 16.5px; }

  .br-desktop { display: none; }
  .br-mobile { display: inline; }

  .topbar-inner {
    justify-content: center;
    padding: 6px 14px;
  }
  .topbar-coords { gap: 14px; justify-content: center; }
  .topbar-social { display: none; }

  .nav { padding: 8px 16px; }
  .nav-logo { width: 258px; height: 66px; gap: 10px; }
  .nav-logo-img { width: 64px; height: 64px; }
  .logo-script { font-size: 1.6rem; }
  .logo-sub { font-size: 0.5rem; letter-spacing: 2.4px; }

  .hero-inner { padding: 38px 20px 54px; }
  .hero-badges { flex-wrap: wrap; max-width: none; }
  .hero-badges li { flex: 1 1 40%; padding: 10px 8px; }
  .hero-badges li + li { border-left: none; }
  .hero-badges li:nth-child(even) { border-left: 1px solid rgba(46, 74, 54, 0.18); }
  .hero-ctas .btn { width: 100%; }
  .hero-photo img { min-height: 350px; }
  .hero-encadre {
    position: static;
    max-width: none;
    margin-top: 16px;
  }

  .rubriques { padding: 40px 0 54px; }
  .rubriques-grille { grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 0 18px; }
  .rubrique-pastille { width: 74px; height: 74px; margin-top: -37px; border-width: 3px; }

  .newsletter-deco { display: none; }
  .newsletter-icone { width: 84px; height: 84px; }

  .accompagnements { padding: 62px 18px 74px; }
  .titre-section { gap: 12px; margin-bottom: 54px; }
  .titre-section h2 { white-space: normal; text-align: center; }
  .accomp-grille { grid-template-columns: 1fr; gap: 38px; }

  .offres { padding: 54px 18px 62px; }
  .offres-grille { grid-template-columns: 1fr; }

  .newsletter { padding: 46px 20px; }
  .newsletter-texte { flex-direction: column; align-items: center; text-align: center; }
  .newsletter-form { grid-template-columns: 1fr; }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 48px 22px 40px;
  }
  .footer-marque { max-width: none; }
  .footer-logo-pastille { margin: 0; }
  .footer-pitch { max-width: none; }

  .footer-bas-inner { flex-direction: column; text-align: center; }
}


/* ═══════════════════════════════════════════════════════════
   PAGES INTERNES (mon-histoire, accompagnements, massages,
   séjours, ateliers, musique des plantes)
   ═══════════════════════════════════════════════════════════ */

.page-hero {
  position: relative;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(230, 213, 174, 0.55), transparent 55%),
    linear-gradient(120deg, #F8F2E4 0%, #F3E9D2 55%, #EDDFBF 100%);
  overflow: hidden;
  text-align: center;
  padding: 64px 28px 58px;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.page-hero-inner { position: relative; max-width: 880px; margin: 0 auto; }

.page-hero .surtitre {
  font-family: var(--script);
  font-size: clamp(1.7rem, 2.9vw, 2.2rem);
  color: var(--or);
  display: block;
  margin-bottom: 6px;
}

.page-hero h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  line-height: 1.15;
  font-weight: 650;
  color: var(--vert);
  letter-spacing: -0.3px;
}

.page-hero .page-hero-sub {
  margin: 18px auto 0;
  max-width: 700px;
  font-size: 1.2rem; /* +15 % */
  line-height: 1.75;
}

.page-hero .filet-or { margin: 20px auto 0; display: block; }

/* Sections génériques */
.section-page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 52px 28px 52px; /* bas non nul : plus jamais de contenu collé au bloc suivant */
}

.section-page:last-of-type { padding-bottom: 84px; }

.section-page h2 {
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--vert);
  line-height: 1.3;
  margin-bottom: 20px;
}

.section-page h2 .h2-script {
  display: block;
  font-family: var(--script);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 1.4em;
  color: var(--or);
  margin-bottom: 2px;
}

/* Deux colonnes texte / photo, alternées */
.deux-col {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: 56px;
  align-items: center;
}

.deux-col.col-inverse { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); }
.deux-col.col-inverse .deux-col-texte { order: 2; }
.deux-col.col-inverse .deux-col-photo { order: 1; }

.deux-col-texte p + p { margin-top: 14px; }
.deux-col-texte .liste-checks { margin-top: 18px; }
.deux-col-texte .liste-checks + p { margin-top: 20px; }

.deux-col-photo { position: relative; }

.photo-cadre {
  border-radius: 20px;
  overflow: hidden;
}

.photo-cadre img { width: 100%; height: auto; display: block; }

.legende {
  margin-top: 12px;
  font-size: 0.84rem;
  font-style: italic;
  color: var(--texte);
  text-align: center;
}

/* Citation pleine largeur */
.citation-page {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 28px 72px; /* plus d'air sous la citation avant le bloc suivant (Julien 21/09) */
}

.citation-page blockquote {
  font-family: var(--titres);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.5;
  color: var(--or);
}

.citation-page .losange { display: block; color: var(--or); margin-bottom: 14px; font-size: 1rem; }

/* Grille des langages / points clés avec icônes */
.grille-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}

/* Variante carrée (4 cartes en 2x2, centrées) : évite la carte orpheline */
.grille-points.grille-carree {
  grid-template-columns: repeat(2, 1fr);
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.point-carte {
  background: var(--blanc);
  border: 1px solid rgba(195, 146, 46, 0.3);
  border-radius: 14px;
  padding: 26px 24px;
  text-align: center;
}

.point-carte .point-icone {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.point-carte .point-icone img { width: 58%; height: 58%; object-fit: contain; }

.point-carte h3 {
  font-size: 1.08rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--vert);
  line-height: 1.35;
}

.point-carte p { font-size: 1rem; line-height: 1.65; margin-top: 8px; }

/* Cartes 1-2-3 (avant / pendant / après) */
.cartes-etapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}

.carte-etape {
  background: var(--blanc);
  border-radius: 14px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* texte centré verticalement : pas de blanc mort en bas */
  border-top: 4px solid var(--or);
}

.carte-etape.etape-verte { border-top-color: #5B6B3F; }
.carte-etape.etape-teal { border-top-color: var(--teal); }

.carte-etape h3 {
  font-family: var(--titres);
  font-style: italic;
  font-weight: 600;
  font-size: 1.22rem;
  color: var(--vert);
  text-transform: none;
  letter-spacing: 0;
}

.carte-etape p { font-size: 1rem; line-height: 1.68; margin-top: 10px; }

/* Bande CTA verte de fin de page */
.bande-cta {
  position: relative;
  background: linear-gradient(150deg, #3A5A44 0%, #2E4A36 55%, #4E5A33 100%);
  overflow: hidden;
  margin-top: 84px;
  padding: 60px 28px;
  text-align: center;
}

.bande-cta .newsletter-deco { opacity: 0.35; }

.bande-cta-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }

.bande-cta h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blanc);
  line-height: 1.35;
}

.bande-cta p {
  margin-top: 14px;
  color: rgba(253, 251, 245, 0.88);
  font-size: 0.98rem;
}

.bande-cta .hero-ctas { justify-content: center; margin-top: 28px; }

/* Carte « Calcule ta charte » (Design Humain), répétée sur les pages de contenu.
   Demande d'Ysabel (13/09/2026), GO Julien (15/09) : le même gabarit que le bandeau
   newsletter (icône dans une pastille or, titre, phrase, bouton), en bleu pétrole,
   la couleur du territoire Human Design. Une seule définition, mobile en fin de feuille. */
.carte-charte-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 28px; /* de l'air au-dessus et en dessous, quel que soit le voisin (Julien 15/09) */
}

.carte-charte-section + .bande-cta { margin-top: 0; }

/* Accueil : la carte vit À L'INTÉRIEUR du bloc « confiance » (même fond, aucun raccord),
   entre les tarifs et « Pourquoi me faire confiance » (retour Julien 15/09) */
.carte-charte-section--dans-bloc { padding: 0 0 64px; }
/* Pages intérieures : quand la carte suit la FAQ sur fond sable, elle prend le même fond (Julien 21/09), pleine largeur */
.carte-charte-section--sable {
  max-width: none;
  background: var(--creme-2);
  padding-left: max(28px, calc((100% - 1240px) / 2 + 28px));
  padding-right: max(28px, calc((100% - 1240px) / 2 + 28px));
}

.carte-charte {
  position: relative;
  overflow: hidden;
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 30px 36px;
  border-radius: 16px;
  background: linear-gradient(135deg, #4D626C 0%, #3E525B 100%);
  color: var(--blanc);
  box-shadow: 0 18px 40px -24px rgba(46, 44, 37, 0.5);
}

.carte-charte::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

.carte-charte > * { position: relative; z-index: 2; }

.carte-charte-icone {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--or);
  border: 3px solid rgba(253, 251, 245, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.carte-charte-icone img {
  width: 58%;
  height: 58%;
  object-fit: contain;
}

.carte-charte-kicker {
  font-family: var(--script);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--or-pale);
}

.carte-charte h2 {
  margin-top: 2px;
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blanc);
  line-height: 1.3;
}

.carte-charte-texte p:not(.carte-charte-kicker) {
  margin-top: 8px;
  font-size: 0.94rem;
  color: rgba(253, 251, 245, 0.88);
}

.carte-charte .btn { white-space: nowrap; }

/* Encadré vert (en une phrase) */
.encadre-phrase {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(150deg, #3A5A44 0%, #2E4A36 55%, #4E5A33 100%);
  padding: 46px 40px;
  text-align: center;
}

.encadre-phrase img.encart-feuilles {
  position: absolute;
  right: -26px;
  bottom: -30px;
  width: 150px;
  height: auto;
  opacity: 0.4;
  transform: rotate(14deg);
  pointer-events: none;
}

.encadre-phrase p {
  position: relative;
  font-family: var(--titres);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.55;
  color: var(--blanc);
  max-width: 720px;
  margin: 0 auto;
}

/* Galerie simple 2/3 colonnes */
.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.galerie figure { margin: 0; }

.galerie .photo-cadre { border-radius: 16px; }

/* Tarifs simples (massages) */
.tarifs-bloc {
  background: var(--blanc);
  border: 1px solid rgba(195, 146, 46, 0.35);
  border-radius: 14px;
  padding: 30px 28px;
  max-width: 440px;
}

.tarifs-bloc h3 {
  font-size: 1.2rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--vert);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.tarif-bloc-ico { width: 26px; height: 26px; color: var(--or); flex: none; }

.tarifs-bloc ul { list-style: none; display: grid; gap: 12px; }

.tarifs-bloc li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-size: 1.08rem;
  border-bottom: 2px dashed rgba(43, 43, 36, 0.25);
  padding-bottom: 12px;
}

.tarifs-bloc li:last-child { border-bottom: none; padding-bottom: 0; }

.tarifs-bloc .prix { font-weight: 600; color: var(--encre); white-space: nowrap; }

.tarifs-bloc .tarif-note {
  font-size: 0.92rem;
  color: var(--texte);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.tarifs-bloc .tarif-note .tarif-bloc-ico { width: 21px; height: 21px; }

/* Carte tarifs globale : infos à gauche, photo à droite, pleine largeur */
.tarifs-carte-globale {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--blanc);
  border: 2px solid rgba(195, 146, 46, 0.5);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 36px;
}

.tarifs-carte-globale .tarifs-bloc {
  background: none;
  border: none;
  border-radius: 0;
  max-width: none;
  padding: 40px 46px;
  align-self: center;
}

.tarifs-carte-photo { position: relative; min-height: 320px; }

.tarifs-carte-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) {
  .tarifs-carte-globale { grid-template-columns: 1fr; }
  .tarifs-carte-photo { min-height: 0; aspect-ratio: 16 / 10; }
  .tarifs-carte-globale .tarifs-bloc { padding: 28px 24px; }
}

/* Logo client (fond blanc fondu sur crème) */
.logo-client {
  mix-blend-mode: multiply;
  width: min(300px, 62vw);
  height: auto;
  margin: 0 auto 40px;
  display: block;
}

/* Responsive pages internes */
@media (max-width: 1024px) {
  .deux-col, .deux-col.col-inverse { grid-template-columns: 1fr; gap: 34px; }
  .deux-col.col-inverse .deux-col-texte { order: 1; }
  .deux-col.col-inverse .deux-col-photo { order: 2; }
  .deux-col-photo { max-width: 560px; margin: 0 auto; width: 100%; }
  .grille-points { grid-template-columns: repeat(2, 1fr); }
  .cartes-etapes { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .carte-charte { grid-template-columns: auto minmax(0, 1fr); }
  .carte-charte .btn { grid-column: 1 / -1; justify-self: start; }
}

/* ══════════ Durcissement responsive JBC (moulinette iOS) ══════════ */

/* Pas de gouttière de scrollbar sur mobile (bande vide à droite sinon) */
@media (max-width: 640px) {
  html { scrollbar-gutter: auto; }

  /* Touch targets 44px */
  .footer-social a { width: 44px; height: 44px; }
  .topbar a { min-height: 32px; }
}

/* iOS : les hovers persistent après un tap, on les coupe sur tactile */
@media (hover: none) {
  .btn:hover, .nav-cta-btn:hover { transform: none; }
  .point-carte:hover, .tarif-carte:hover { transform: none; }
  .rubrique:hover .rubrique-visuel img,
  .tuile:hover .tuile-visuel img,
  .chemin-carte:hover .chemin-photo img,
  .lieu-carte:hover .lieu-fond { transform: none; }
}

@media (max-width: 600px) {
  .page-hero { padding: 46px 20px 44px; }
  .section-page { padding: 40px 20px 40px; }
  .section-page:last-of-type { padding-bottom: 64px; }
  .citation-page { padding-top: 54px; }
  .grille-points { grid-template-columns: 1fr; }
  /* La variante 2x2 doit aussi repasser en 1 colonne (spécificité supérieure sinon) */
  .grille-points.grille-carree { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: 1fr; }
  .bande-cta { margin-top: 64px; padding: 48px 20px; }
  .bande-cta .hero-ctas .btn { width: 100%; }
  .carte-charte-section { padding: 44px 20px; }
  .carte-charte { grid-template-columns: 1fr; gap: 18px; padding: 30px 22px; text-align: center; justify-items: center; }
  .carte-charte .btn { width: 100%; white-space: normal; }
  .carte-charte h2 { font-size: 1.1rem; letter-spacing: 1px; }
  .carte-charte-kicker { font-size: 1.7rem; }
  .carte-charte-section--dans-bloc { padding: 0 0 44px; }
  .carte-charte-section--sable { padding-left: 20px; padding-right: 20px; }
  .encadre-phrase { padding: 36px 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   v3 (20/07/2026) : composants issus de l'affiche de référence d'Ysabel
   ═══════════════════════════════════════════════════════════════ */

/* Boutons complémentaires */
.btn-terracotta { background: var(--terracotta); color: #fff; }

.btn-prune { background: var(--prune); color: #fff; }


/* Chip kicker du hero */
.chip-kicker {
  display: inline-block;
  background: var(--vert); /* vert forêt, comme le CTA */
  color: var(--creme);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 18px;
}

/* Timeline Avant / Pendant / Après (colonne hero) */
.hero-timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 26px;
}
.timeline-etape {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.timeline-pastille {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.timeline-pastille img { width: 60%; height: 60%; object-fit: contain; }
.timeline-pastille svg { width: 52%; height: 52%; color: var(--creme); }
.pastille-sauge-bg { background: var(--olive); }
.pastille-prune-bg { background: var(--prune); }
.pastille-terracotta-bg { background: var(--terracotta); }
.timeline-etape h3 {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.timeline-etape.t-avant h3 { color: var(--vert); }
.timeline-etape.t-pendant h3 { color: var(--prune); }
.timeline-etape.t-apres h3 { color: var(--brique); }
.timeline-etape p { font-size: 1rem; line-height: 1.65; }
.timeline-fleche {
  width: 58px;
  text-align: center;
  color: var(--encre);
  font-size: 1.05rem;
  line-height: 1;
  padding: 2px 0;
}
.timeline-phrase {
  font-family: var(--script);
  font-weight: 600;
  font-size: 1.9rem;
  color: var(--encre);
  margin-top: 18px;
  text-align: center;
}

/* 5 chemins pour revenir à toi */
.chemins { background: var(--blanc); padding: 52px 28px 86px; }
.chemins-inner { max-width: 1560px; margin: 0 auto; position: relative; z-index: 2; }
.chemins-intro { text-align: center; margin-bottom: 44px; }
.chemins-intro h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  color: var(--vert);
  letter-spacing: 1px;
}
.chemins-intro h2 .chiffre-or { color: var(--or); font-size: 1.35em; }
.chemins-intro h2 .h2-script-inline {
  font-family: var(--script);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--brique);
  font-size: 1.35em;
}
.chemins-intro p { margin-top: 10px; color: var(--texte); }
.chemins-grille {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
}
/* Cartes chemins : langage des rubriques v2 (photo pleine largeur en haut,
   pastille ronde à cheval, titre capitales), structure de l'affiche d'Ysabel */
.chemin-carte {
  background: var(--creme);
  border: 2px solid rgba(68, 82, 60, 0.22);
  border-radius: 16px;
  padding: 0 18px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.chemin-photo {
  width: calc(100% + 38px);
  margin: 0 -19px;
  border-radius: 15px 15px 0 0;
  overflow: hidden;
  aspect-ratio: 1 / 1.02;
}
.chemin-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.chemin-carte:hover .chemin-photo img { transform: scale(1.05); }
.chemin-pastille {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin: -44px auto 0;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--creme);
  flex: none;
}
.chemin-pastille img { width: 58%; height: 58%; object-fit: contain; }
.chemin-numero {
  font-family: var(--titres);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--or);
  margin-top: 2px;
}
.chemin-carte h3 {
  font-family: var(--titres);
  font-size: 1.24rem;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--encre);
  line-height: 1.4;
}
.chemin-carte p { font-size: 1.06rem; line-height: 1.7; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.chemin-carte .btn { width: 100%; min-height: 56px; padding: 12px 14px; line-height: 1.45; font-size: 0.9rem; letter-spacing: 1.1px; }

/* Parcours en 4 étapes */
.parcours { background: var(--creme); padding: 78px 28px; }
.parcours-inner {
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
  background: var(--blanc);
  border: 2px solid rgba(195, 146, 46, 0.5); /* même liseré or que la carte tarifs */
  border-radius: 22px;
  padding: 54px 46px 58px;
}
.parcours-inner > p.parcours-sub { margin: 8px 0 40px; }
.parcours-etapes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.parcours-fleche {
  color: var(--encre);
  font-size: 1.5rem;
  line-height: 1;
  padding-top: 32px;
  text-align: center;
}
.parcours-etape { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.parcours-pastille {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--beige-rose);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.parcours-pastille img { width: 54%; height: 54%; object-fit: contain; }
.parcours-pastille svg { width: 44%; height: 44%; color: var(--or); }
.parcours-etape h3 {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--vert);
}
.parcours-etape p { font-size: 1rem; line-height: 1.65; }

/* Lieux d'accueil */
.lieux-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-top: 36px;
}
.lieu-carte {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  text-align: center;
}
.lieu-fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.lieu-carte:hover .lieu-fond { transform: scale(1.05); }
.lieu-carte::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(38, 46, 33, 0.18) 0%, rgba(38, 46, 33, 0.78) 100%);
  z-index: 1;
}
.lieu-corps {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 26px 22px 26px;
  color: var(--creme);
}
.lieu-corps svg { width: 34px; height: 34px; color: var(--or-pale); margin-bottom: 10px; }
.lieu-corps h3 {
  font-family: var(--titres);
  font-size: 1.14rem;
  color: var(--creme);
  margin-bottom: 6px;
}
.lieu-corps p { font-size: 1rem; line-height: 1.65; color: rgba(251, 247, 240, 0.9); }

/* Tarifs 2026 */
.tarifs { background: var(--blanc); padding: 78px 28px 60px; }
.tarifs-inner { max-width: 1470px; margin: 0 auto; position: relative; z-index: 2; }
.tarifs-grille {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  margin-top: 44px;
  align-items: stretch;
}
.tarif-carte {
  position: relative;
  border: 2px solid rgba(68, 82, 60, 0.22);
  border-radius: 16px;
  padding: 26px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.tarif-carte h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  line-height: 1.45;
}
.tarif-prune { background: #F1E3E1; }
.tarif-prune h3 { color: var(--prune); }
.tarif-prune .tarif-prix { color: var(--prune); }
.tarif-vert { background: #E9EEE1; }
.tarif-olive { background: #EDEEE3; }
.tarif-teal { background: #E3EAEC; }
.tarif-terracotta { background: #F7E7DF; }
.tarif-or { background: #F8EDD9; }
.tarif-vert h3 { color: var(--vert); }
.tarif-olive h3 { color: var(--olive-fonce); }
.tarif-teal h3 { color: var(--teal); }
.tarif-terracotta h3 { color: var(--brique); }
.tarif-or h3 { color: var(--or); }
.tarif-carte .tarif-detail { font-size: 1rem; line-height: 1.65; flex: 1; }
.tarif-prix { margin-top: auto; }
.tarif-prix {
  font-family: var(--titres);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--vert);
}
.tarif-vert .tarif-prix { color: var(--vert); }
.tarif-olive .tarif-prix { color: var(--olive-fonce); }
.tarif-teal .tarif-prix { color: var(--teal); }
.tarif-terracotta .tarif-prix { color: var(--brique); }
.tarif-or .tarif-prix { color: var(--or); }
.tarif-note { font-size: 0.82rem; color: var(--texte); min-height: 1.35em; }
.tarif-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--brique);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.tarifs-mentions {
  text-align: center;
  margin-top: 30px;
  font-size: 0.95rem;
  color: var(--texte);
}
.tarifs-mentions a { color: var(--vert); font-weight: 500; text-decoration: none; }
.tarifs-mentions a:hover { text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 3px; }

/* Pourquoi me faire confiance + teaser histoire */
.confiance {
  background:
    radial-gradient(ellipse at 18% 12%, rgba(230, 213, 174, 0.55), transparent 55%),
    linear-gradient(120deg, #F8F2E4 0%, #F3E9D2 55%, #EDDFBF 100%); /* même fond que le hero */
  padding: 78px 28px;
}
.confiance-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px;
  align-items: stretch;
}
.confiance-inner { max-width: 1320px; }
.confiance-bloc {
  background: var(--vert);
  color: var(--creme);
  border-radius: 18px;
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
}
.confiance-bloc h2 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--or-pale);
  margin-bottom: 20px;
}
.confiance-bloc ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.confiance-bloc li {
  position: relative;
  padding-left: 28px;
  font-size: 1rem;
  line-height: 1.55;
}
.confiance-bloc li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--or-doux);
}
.histoire-teaser {
  background: var(--beige-rose);
  border-radius: 18px;
  overflow: hidden;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 0;
  align-items: stretch;
}
.histoire-teaser > div:first-child { padding: 40px 36px; align-self: center; }
.histoire-teaser .photo-cadre {
  border-radius: 0;
  height: 100%;
  box-shadow: none;
}
.histoire-teaser h2 {
  font-family: var(--titres);
  font-size: 1.5rem;
  color: var(--vert);
  margin-bottom: 12px;
}
.histoire-teaser h2 .h2-script-inline {
  font-family: var(--script);
  font-weight: 600;
  color: var(--brique);
  display: block;
  font-size: 1.6em;
}
.histoire-teaser p { line-height: 1.75; margin-bottom: 12px; }
.histoire-teaser .photo-cadre img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Bande finale écosystème */
.ecosysteme {
  /* Vit À L'INTÉRIEUR de .confiance (21/09) : un seul dégradé continu, plus de démarcation entre les deux blocs */
  color: var(--creme);
  text-align: center;
  padding: 44px 0 0;
}
.ecosysteme-carte {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 80px 40px;
}
.eco-fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.eco-voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(30, 37, 26, 0.85) 0%, rgba(30, 37, 26, 0.78) 100%);
  z-index: 1;
}
.eco-corps { position: relative; z-index: 2; }
.ecosysteme h2 {
  font-family: var(--titres);
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--creme);
  line-height: 1.5;
}
.ecosysteme h2 .ligne-or { color: var(--or-doux); }
.ecosysteme p {
  margin-top: 16px;
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(251, 247, 240, 0.85);
}
.ecosysteme .script-fin {
  display: block;
  margin-top: 22px;
  font-family: var(--script);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--or-doux);
}

/* Encadré partenaire (séjours) */
.encadre-partenaire {
  background: var(--creme-2);
  border-left: 4px solid var(--or);
  border-radius: 0 14px 14px 0;
  padding: 22px 26px;
  margin-top: 22px;
}
.encadre-partenaire p { font-size: 0.97rem; line-height: 1.7; }
.encadre-partenaire .btn { margin-top: 14px; }

/* Responsive v3 */
@media (max-width: 1024px) {
  .chemins-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarifs-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parcours-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .confiance-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .chemins { padding: 56px 20px 62px; }
  .parcours { padding: 56px 20px; }
  .tarifs { padding: 56px 20px 48px; }
  .confiance { padding: 56px 20px; }
  .chemins-grille { grid-template-columns: 1fr; }
  .tarifs-grille { grid-template-columns: 1fr; }
  .parcours-etapes { grid-template-columns: 1fr; }
  .lieux-grille { grid-template-columns: 1fr; }
  .histoire-teaser { grid-template-columns: 1fr; }
  .histoire-teaser > div:first-child { padding: 30px 22px; }
  .histoire-teaser .photo-cadre { max-width: none; margin: 0; }
  .histoire-teaser .photo-cadre img { aspect-ratio: 4 / 3; }
  .timeline-etape { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .timeline-pastille { width: 48px; height: 48px; }
  .timeline-fleche { width: 48px; }
}

/* Pastilles couleur (chemins, timelines) */
.p-olive { background: var(--olive); }
.p-teal { background: var(--teal); }
.p-or { background: var(--or); }
.p-vert { background: var(--vert); }
.p-terracotta { background: var(--terracotta); }
.p-prune { background: var(--prune); }

/* Bande Avant / Pendant / Après sous le hero */
.bande-etapes { background: var(--blanc); border-top: 1px solid rgba(68, 82, 60, 0.1); padding: 54px 28px 10px; }
.bande-etapes-inner { max-width: 1240px; margin: 0 auto; }
.bande-etapes-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
@media (max-width: 900px) {
  .bande-etapes-grille { grid-template-columns: 1fr; gap: 22px; }
}

/* Titres des sections parcours / tarifs */
.parcours h2 {
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--vert);
  line-height: 1.35;
}
.script-sur {
  font-family: var(--script);
  font-weight: 600;
  color: var(--brique);
  display: block;
  font-size: 1.4em;
  text-transform: none;
  letter-spacing: 0;
}
.tarifs .titre-section h2 {
  white-space: normal;
  text-align: center;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
}

.chemins-intro h2 { text-transform: uppercase; }
.chemins-intro h2 .h2-script-inline { text-transform: none; }


/* Retouches fidélité affiche (20/07 après-midi) */
.chemins { position: relative; overflow: hidden; }
.tarifs { position: relative; overflow: hidden; }
.tarifs-sub { text-align: center; margin: 4px auto 0; font-size: 1.05rem; color: var(--texte); position: relative; z-index: 2; }
.tarif-icone { width: 62px; height: 62px; object-fit: contain; margin-bottom: 4px; flex: none; }
.ecosysteme .newsletter-deco { opacity: 0.28; }
@media (max-width: 1024px) {
  .parcours-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .parcours-fleche { display: none; }
}
@media (max-width: 640px) {
  .parcours-etapes { grid-template-columns: 1fr; }
}


@media (max-width: 640px) {
  .parcours-inner { padding: 40px 22px 44px; }
}

/* Séparateur vague (version épaisse et simple, retour Julien 20/07) */
.filet-or { width: 110px; height: 20px; }
.filet-vague {
  display: block;
  width: 112px;
  height: 20px;
  color: var(--or);
  margin: 14px auto 20px;
}
.filet-vague.filet-gauche { margin: 12px 0 20px; }

/* Mise en valeur « À chaque étape, tu n'es pas seule. » */
.bande-etapes .timeline-phrase {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: min(1100px, 94%);
  margin: 60px auto 0;
  padding: 44px 56px;
  border-radius: 18px;
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  color: var(--creme);
}
.phrase-fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.phrase-voile {
  position: absolute;
  inset: 0;
  background: rgba(38, 46, 33, 0.55);
  z-index: 1;
}
.phrase-texte { position: relative; z-index: 2; }
.bande-etapes .timeline-phrase::before,
.bande-etapes .timeline-phrase::after {
  content: "✦";
  font-family: var(--sans);
  font-size: 0.45em;
  color: var(--or-doux);
  transform: translateY(2px);
  position: relative;
  z-index: 2;
}
@media (max-width: 640px) {
  .bande-etapes .timeline-phrase { gap: 12px; font-size: 1.55rem; padding: 18px 24px; }
}

/* Section lieux d'accueil : fond vert foncé, hors de la carte parcours */
.lieux {
  position: relative;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(201, 164, 92, 0.16), transparent 55%),
    linear-gradient(120deg, #46543C 0%, #37432F 55%, #2C3625 100%);
  padding: 74px 28px 80px;
}
.lieux-inner { max-width: 1240px; margin: 0 auto; text-align: center; }
.lieux h2 {
  font-family: var(--titres);
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--creme);
}
.lieux .filet-vague { color: var(--or-doux); margin-bottom: 34px; }
.lieux .lieux-grille { margin-top: 0; }
@media (max-width: 640px) {
  .lieux { padding: 54px 20px 60px; }
}


/* Titre tarifs : vague au lieu des losanges */
.tarifs-titre {
  text-align: center;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.35;
  margin-bottom: 0;
}
.tarifs .filet-vague { margin: 16px auto 18px; }

/* Survol des cartes tarifs / soins : légère élévation.
   Pas de hover sur les cartes accompagnements (choix Julien 20/07) : seuls leurs boutons réagissent. */
@media (hover: hover) {
  .tarif-carte {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .point-carte {
    transition: opacity 0.7s ease, transform 0.3s ease;
  }
  .tarif-carte:hover {
    transform: translateY(-6px);
  }
  .point-carte:hover {
    transform: translateY(-6px);
  }
}


/* Logo image dans le footer */
.footer-logo-img {
  display: block;
  width: 118px;
  height: 118px;
  object-fit: contain;
  mix-blend-mode: multiply;
}


/* L'encadré hero ne doit pas sortir de l'écran sur les largeurs moyennes */
@media (max-width: 1560px) {
  .hero-encadre { right: -60px; }
}
@media (max-width: 1360px) {
  .hero-encadre { right: -18px; }
}


/* Hover du bouton newsletter : élévation seule, pas de changement de couleur */


/* Sous-menu « Être accompagné » */
.nav-item-sous { position: relative; }
.nav-caret { font-size: 0.6em; margin-left: 5px; vertical-align: 2px; }
.sous-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #FFFFFF;
  border: 1px solid rgba(68, 82, 60, 0.14);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(43, 43, 36, 0.14);
  padding: 10px 0;
  min-width: 236px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 60;
}
.nav-item-sous:hover .sous-menu,
.nav-item-sous:focus-within .sous-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.sous-menu li a {
  display: block;
  margin: 0 10px;
  border-radius: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--encre);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.sous-menu li a:hover { color: var(--vert); background: var(--creme); }
.sous-menu li a.actif { color: var(--or); background: transparent; }
.sous-menu li a.actif:hover { background: var(--creme); }

@media (max-width: 1024px) {
  /* dans le burger : sous-menu toujours déplié, indenté */
  .sous-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 4px 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .nav-caret { display: none; }
}


.carte-cta { margin-top: 16px; width: 100%; }

/* Sous-menu : neutraliser les styles hérités des liens du menu (soulignés, padding) */
.header, .nav { overflow: visible; }
.nav-links .sous-menu a,
.nav-links .sous-menu a:hover,
.nav-links .sous-menu a.actif {
  border-bottom: none;
  padding: 10px 14px;
  white-space: nowrap;
}
.sous-menu { overflow: hidden; } /* les fonds des items respectent les coins arrondis */


/* Alignement des cartes accompagnements : sous-titres sur hauteur fixe,
   les intros et listes démarrent au même niveau dans les 3 colonnes */
.carte-accomp .sous-titre { min-height: 2.9em; display: flex; align-items: center; justify-content: center; }

/* Icône de titre de section (style GPT Image 2 teinté) */
.titre-icone { width: 46px; height: 46px; object-fit: contain; margin-bottom: 10px; }

/* ═══ Durcissement mobile v3 (audit 20/07) ═══ */

/* Sous-menu dans le burger : lisible et touch targets 44px */
@media (max-width: 1024px) {
  .nav-links .sous-menu a,
  .nav-links .sous-menu a:hover,
  .nav-links .sous-menu a.actif {
    font-size: 1.05rem;
    font-family: var(--titres);
    text-transform: none;
    letter-spacing: 0.4px;
    padding: 8px 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    background: transparent;
  }
  .nav-links .sous-menu { padding-left: 0; }
}

/* Carte écosystème : padding raisonnable sur mobile */
@media (max-width: 640px) {
  .ecosysteme { padding: 32px 0 0; }
  .ecosysteme-carte { padding: 52px 24px; border-radius: 18px; }
}

/* Très petits écrans (iPhone SE, 320-380px) : le header ne déborde pas */
@media (max-width: 390px) {
  .nav-logo { width: 212px; height: 58px; gap: 8px; }
  .nav-logo-img { width: 52px; height: 52px; }
  .logo-script { font-size: 1.35rem; }
  .logo-sub { font-size: 0.45rem; letter-spacing: 2px; }
  .topbar-coords a:first-child { display: none; } /* email masqué, tel suffit */
}


/* Titre secondaire de page (bandeau séjours) : même voix que les h1 de hero, un cran en dessous */
.page-hero .titre-page-secondaire {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.2;
  font-weight: 650;
  color: var(--vert);
  letter-spacing: -0.2px;
}


/* Liens de contenu (dans les textes) : couleur du site, pas le violet navigateur */
main p a:not([class]),
main li a:not([class]) {
  color: var(--vert);
  font-weight: 500;
  text-decoration: none;
}
main p a:not([class]):hover,
main li a:not([class]):hover {
  color: var(--olive-fonce);
  text-decoration: underline;
  text-decoration-color: var(--or);
  text-underline-offset: 3px;
}

/* Photo pleine hauteur dans une section deux colonnes */
.deux-col-stretch { align-items: stretch; }
.deux-col-stretch .deux-col-photo { display: flex; }
.photo-pleine { height: 100%; width: 100%; }
.photo-pleine img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 460px;
}
@media (max-width: 640px) {
  .photo-pleine img { min-height: 0; height: auto; }
}

/* Photo avec cadre décalé (met en valeur les photos larges dans les colonnes) */
.photo-decalee {
  position: relative;
  z-index: 0;
  margin: 22px 22px 0 0;
  box-shadow: none;
}
.photo-decalee::before {
  content: "";
  position: absolute;
  top: -22px;
  right: -22px;
  bottom: 22px;
  left: 22px;
  background: var(--or-pale);
  border-radius: 16px;
  z-index: -1;
}
@media (max-width: 640px) {
  .photo-decalee { margin: 16px 16px 0 0; }
  .photo-decalee::before { top: -16px; right: -16px; bottom: 16px; left: 16px; }
}

/* Variante : colonne photo dominante (photos larges type groupe) */
.deux-col-large-photo { grid-template-columns: minmax(0, 9fr) minmax(0, 12fr); }
.deux-col-large-photo .photo-decalee img {
  width: 100%;
  aspect-ratio: 9 / 5;
  object-fit: cover;
}
@media (max-width: 1024px) {
  .deux-col-large-photo { grid-template-columns: 1fr; }
}

/* Liste de contact (page contact) */
.contact-liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 6px 0 22px;
}
.contact-liste li { display: flex; align-items: flex-start; gap: 14px; }
.contact-liste svg { width: 24px; height: 24px; color: var(--olive-fonce); flex: none; margin-top: 3px; }

/* Zoom doux des photos au survol, dans leur cadre (le cadre ne bouge pas) */
@media (hover: hover) {
  .photo-cadre img, .hero-photo img {
    transition: transform 0.6s ease;
  }
  .photo-cadre:hover img, .hero-photo:hover img {
    transform: scale(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  .photo-cadre img, .hero-photo img { transition: none; }
  .photo-cadre:hover img, .hero-photo:hover img { transform: none; }
}

/* Bande photo de séparation avant le footer */
.bande-photo {
  /* Carte arrondie alignée sur la carte « Calcule ta charte », pour que le fond crème
     reste unifié autour des éléments (retour Julien 15/09) */
  position: relative;
  overflow: hidden;
  width: calc(100% - 56px);
  max-width: 1140px;
  margin: 64px auto 0; /* de l'air au-dessus, elle suit un bloc plein (Julien 21/09) */
  border-radius: 16px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 70px 28px;
}
.bande-photo-fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.bande-photo-voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(30, 37, 26, 0.72) 0%, rgba(30, 37, 26, 0.62) 100%);
  z-index: 1;
}
.bande-photo-corps { position: relative; z-index: 2; }
.bande-photo blockquote {
  font-family: var(--titres);
  font-style: italic;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.55;
  color: var(--creme);
}
@media (max-width: 640px) {
  .bande-photo { width: calc(100% - 40px); min-height: 240px; padding: 52px 20px; margin-top: 44px; }
}

/* Fonds colorés doux réutilisables (comme les cartes tarifs) */
.point-carte.fond-or, .point-carte.fond-vert, .point-carte.fond-teal,
.point-carte.fond-prune, .point-carte.fond-terracotta {
  border: 2px solid rgba(68, 82, 60, 0.18);
}
.point-carte.fond-or { background: #F8EDD9; }
.point-carte.fond-vert { background: #E9EEE1; }
.point-carte.fond-teal { background: #E3EAEC; }
.point-carte.fond-prune { background: #F1E3E1; }
.point-carte.fond-terracotta { background: #F7E7DF; }

/* Variante : photo alignée en haut sur le texte (pas centrée verticalement) */
.deux-col-haut { align-items: start; }

/* ═══════════════════════════════════════════════════════════════
   Modal « Appel découverte offert » (assets/js/appel.js)
   ═══════════════════════════════════════════════════════════════ */
body.amodal-open { overflow: hidden; }
.amodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.amodal[hidden] { display: none; }
.amodal-overlay { position: absolute; inset: 0; background: rgba(46, 44, 37, 0.55); backdrop-filter: blur(3px); }
.amodal-card {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: var(--blanc);
  border: 1px solid rgba(195, 146, 46, 0.35);
  border-radius: 18px;
  padding: 38px 34px 30px;
}
.amodal-close {
  position: absolute; top: 14px; right: 16px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--vert); color: var(--creme);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.amodal-pastille {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--or-pale);
  display: grid; place-items: center; margin: 0 auto 14px;
}
.amodal-card h3 { font-family: var(--titres); color: var(--vert); font-size: 1.45rem; text-align: center; }
.amodal-sub { margin-top: 8px; font-size: 0.94rem; color: var(--texte); line-height: 1.55; text-align: center; }
#amodalForm { margin-top: 18px; }
.amodal-field { margin-bottom: 14px; }
.amodal-field label { display: block; font-weight: 500; font-family: var(--sans); color: var(--vert); font-size: 0.9rem; margin-bottom: 6px; }
.amodal-field label .opt { font-weight: 400; color: var(--texte); font-size: 0.82rem; }
.amodal-field input, .amodal-field select, .amodal-field textarea {
  width: 100%;
  border: 1px solid rgba(68, 82, 60, 0.25);
  border-radius: 12px;
  padding: 11px 14px;
  font: inherit; font-size: 16px;
  color: var(--encre); background: var(--blanc);
}
.amodal-field input:focus, .amodal-field select:focus, .amodal-field textarea:focus {
  outline: 2px solid var(--or-doux); outline-offset: 1px; border-color: var(--or-doux);
}
.amodal-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.amodal-submit { width: 100%; margin-top: 4px; }
.amodal-rgpd { margin-top: 12px; font-size: 0.78rem; color: var(--texte); line-height: 1.5; text-align: center; }
.amodal-status { margin-top: 12px; font-size: 0.92rem; line-height: 1.5; display: none; text-align: center; }
.amodal-status.ok, .amodal-status.err { display: block; }
.amodal-status.ok { color: var(--vert); font-size: 1rem; }
.amodal-status.err { color: var(--brique); }
.amodal-status.err a { color: var(--brique); text-decoration: underline; }
@media (max-width: 720px) {
  .amodal-card { padding: 30px 22px 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   Module calculateur de charte Human Design (design-humain.html)
   ═══════════════════════════════════════════════════════════════ */
/* Carte formulaire : fond rosé de la carte « Mon histoire » de la landing,
   largeur contenue pour rester élégante (retour Julien 20/07) */
.hd-form-carte {
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  background: var(--beige-rose);
  border: none;
  border-radius: 18px;
  padding: 38px 36px;
}
.hd-champ input { border-color: rgba(126, 73, 78, 0.22); }
.hd-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 22px; }
.hd-champ-large { grid-column: 1 / -1; }
.hd-champ label {
  display: block; font-weight: 500; font-family: var(--sans);
  color: var(--vert); font-size: 0.9rem; margin-bottom: 6px;
}
.hd-champ input {
  width: 100%; border: 1px solid rgba(68, 82, 60, 0.25); border-radius: 12px;
  padding: 11px 14px; font: inherit; font-size: 16px;
  color: var(--encre); background: var(--blanc);
}
.hd-champ input:focus { outline: 2px solid var(--or-doux); outline-offset: 1px; border-color: var(--or-doux); }
#hdStatus.err { color: var(--brique); }

/* Carte résultat : fond vert dégradé du site, sépare la charte du footer */
.hd-resultat-carte {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(201, 164, 92, 0.16), transparent 55%),
    linear-gradient(120deg, #46543C 0%, #37432F 55%, #2C3625 100%);
  padding: 46px 44px;
  margin-top: 40px;
  color: var(--creme);
}
.hd-resultat-carte h3 {
  font-family: var(--titres);
  font-size: 1.35rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--creme);
}
.hd-resultat-carte .filet-vague { color: var(--or-doux); margin: 14px 0 24px; }
.hd-resultat-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
#hdInfos { display: grid; gap: 10px; }
#hdInfos > div {
  display: flex; justify-content: space-between; gap: 16px;
  border-bottom: 1px dashed rgba(247, 242, 232, 0.28);
  padding-bottom: 9px;
}
#hdInfos dt { color: rgba(247, 242, 232, 0.78); }
#hdInfos dd { font-weight: 600; color: var(--or-pale); text-align: right; }
.hd-resultat-carte p { color: rgba(247, 242, 232, 0.88); }
.hd-bodygraph {
  background: var(--creme);
  border-radius: 14px;
  padding: 18px;
}
.hd-bodygraph img { width: 100%; height: auto; display: block; }
.hd-bodygraph .hd-loader { color: var(--texte); text-align: center; padding: 40px 0; }

/* Lead magnet : recevoir sa charte en PDF par mail */
.hd-pdf { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(232, 216, 182, 0.35); }
.hd-pdf-titre {
  font-family: var(--titres);
  font-weight: 600;
  font-size: 1.12rem;
  color: #F7F2E8;
  margin-bottom: 6px;
}
.hd-pdf-sous { font-size: 0.95rem; margin-bottom: 14px; }
.hd-pdf-form { display: flex; gap: 10px; flex-wrap: wrap; }
.hd-pdf-form input {
  flex: 1;
  min-width: 180px;
  padding: 12px 14px;
  border: 1px solid rgba(232, 216, 182, 0.4);
  border-radius: 10px;
  background: var(--blanc);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 16px;
}
.hd-pdf-form input:focus { outline: 2px solid var(--or-doux); outline-offset: 1px; }
.hd-pdf-statut { margin-top: 12px; font-size: 0.92rem; color: var(--or-pale); }
.hd-pdf-statut.err { color: #F1C5C0; }
.hd-pdf-rgpd { font-size: 0.8rem; color: rgba(247, 242, 232, 0.62) !important; margin-top: 12px; }
@media (max-width: 640px) {
  .hd-pdf-form { flex-direction: column; }
  .hd-pdf-form .btn { width: 100%; }
}
@media (max-width: 720px) {
  .hd-grille, .hd-resultat-grille { grid-template-columns: 1fr; }
  .hd-resultat-carte { padding: 32px 22px; }
}


/* ══════════ Harmonisation des pages de recit (01/09/2026, demande Julien) ══════════
   Le fond creme etait un seul aplat continu : les sections se suivaient toutes
   dans le meme habit. Une section sur deux passe sur une bande sable pleine
   largeur avec le grain papier du hero, et certains cadres photo prennent
   l'arche du carrousel d'origine pour varier les formes. */

.section-page--sable {
  max-width: none;
  background: var(--creme-2);
  position: relative;
  padding-left: max(28px, calc((100% - 1240px) / 2 + 28px));
  padding-right: max(28px, calc((100% - 1240px) / 2 + 28px));
}

.section-page--sable::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Cadre photo en arche (la forme du carrousel def de la DA) */
.photo-cadre--arche { border-radius: 250px 250px 20px 20px; }

@media (max-width: 768px) {
  .section-page--sable {
    padding-left: max(20px, calc((100% - 1240px) / 2 + 20px));
    padding-right: max(20px, calc((100% - 1240px) / 2 + 20px));
  }
  .photo-cadre--arche { border-radius: 170px 170px 16px 16px; }
}

/* ══════════ Échelle mobile des titres de récit (01/09/2026) ══════════
   Mesuré à 320 px : les h2 en capitales Lora gardaient ~25 px et se
   repliaient en mots seuls (« plantes », « écosystème », « pas »...).
   On descend d'un cran sous 640 px pour que les lignes de sens tiennent. */
@media (max-width: 640px) {
  .section-page h2 { font-size: 1.22rem; letter-spacing: 1px; }
  .section-page h2 .h2-script { font-size: 1.25em; }
  .page-hero h1 { font-size: 1.9rem; }
  .citation-page blockquote { font-size: 1.22rem; }
  .bande-cta h2 { font-size: 1.35rem; }
  .newsletter h2 { font-size: 1.3rem; }
}

/* Un email, un SIRET ou une URL insecables ne doivent jamais elargir la page
   (mesure 01/09 : contact et mentions legales debordaient a 320 px) */
.section-page p,
.section-page li,
.footer-infos li { overflow-wrap: anywhere; }

/* ══════════ TÉMOIGNAGES (20/09/2026) ══════════
   Avis transmis par Ysabel le 20/09 : 2 avis de sa fiche Google
   « Ysabel Div'In Nature » + 4 avis de la page Jeûne & Bien-être
   Haut Limousin (séjours au Moulin des Combes). Textes mot pour mot.
   La section n'a PAS de fond propre : elle prend celui du bloc qui
   l'accueille (accueil : le dégradé sable de « confiance » ; pages
   intérieures : le crème). Évite le raccord de dégradé du 15/09.
   Une seule définition, ses 2 media queries juste en dessous. */
.temoignages {
  padding: 74px 0 0; /* elle vit dans un bloc qui a deja ses marges laterales */
}

.temoignages-inner {
  max-width: 1320px;
  margin: 0 auto;
}

.temoignages-icone {
  width: 46px;
  height: 46px;
  object-fit: contain;
  margin: 0 auto 10px;
}

.temoignages-titre {
  text-align: center;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.35;
  margin-bottom: 0;
}

.temoignages-sub {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
  font-size: 1.05rem;
  color: var(--texte);
}

.temoignages-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.temoignage {
  min-width: 0;
  background: var(--blanc);
  border: 2px solid rgba(68, 82, 60, 0.18);
  border-radius: 16px;
  padding: 30px 26px 26px;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.temoignage-texte {
  font-size: 1rem;
  line-height: 1.72;
  color: var(--texte);
  margin: 0 0 20px;
}

.temoignage-signature {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-style: normal;
}

.temoignage-signature::before {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  background: var(--or-doux);
  margin-bottom: 14px;
}

.temoignage-nom {
  font-family: var(--titres);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--vert);
  line-height: 1.3;
}

.temoignage-source {
  font-size: 0.78rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--olive);
  line-height: 1.5;
}

.temoignages-lien {
  text-align: center;
  margin: 34px auto 0;
  font-size: 0.95rem;
}

.temoignages-lien a {
  color: var(--vert);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--or-doux);
  padding-bottom: 2px;
}

.temoignages-lien a:hover {
  border-bottom-color: var(--or);
}

/* Rappel sur les pages intérieures : 3 avis sur le fond crème */
.temoignages--page {
  padding: 78px 28px 8px;
}

/* ══════════ FAQ (21/09/2026, SEO / GEO) ══════════
   Accordéon natif <details> : aucune dépendance JS, une seule définition. */
.faq { text-align: center; padding-bottom: 96px; } /* bloc au milieu de la page, plus d'air en bas (Julien 21/09) */
.faq .faq-liste { max-width: 860px; margin: 10px auto 0; text-align: left; }
.faq-item { border-top: 2px solid var(--or-pale); }
.faq-item:last-child { border-bottom: 2px solid var(--or-pale); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  font-family: var(--titres);
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--vert);
  transition: color .2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--or);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--or);
  transition: transform .25s ease;
}
.faq-item summary:hover { color: var(--or); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-reponse { padding: 0 46px 20px 0; max-width: 760px; overflow: hidden; transition: height .35s ease, opacity .3s ease; } /* hauteur animée par faq.js */
.faq-reponse p + p { margin-top: 10px; }

@media (max-width: 1024px) {
  .temoignages { padding: 60px 0 0; }
  .temoignages--page { padding: 64px 24px 8px; }
  .temoignages-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 640px) {
  .temoignages { padding: 48px 0 0; }
  .temoignages--page { padding: 52px 20px 8px; }
  .temoignages-grille { grid-template-columns: 1fr; gap: 18px; }
  .temoignages-titre { font-size: 1.22rem; letter-spacing: 1px; }
  .temoignages-sub { font-size: 1rem; margin-bottom: 30px; }
  .temoignage { padding: 26px 22px 22px; }
  .faq { padding-bottom: 72px; }
  .faq-item summary { font-size: 1.02rem; padding: 15px 0; gap: 12px; }
  .faq-reponse { padding-right: 0; }
}