/* =========================================================
   TABEA SERENA — Feuille de style principale (v4)
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color .2s ease, opacity .2s ease; }
button { font: inherit; cursor: pointer; }

/* Petite flèche CSS propre pour signaler les liens externes (dans la couleur du texte) */
a.btn[target="_blank"]::after,
a.btn-link[target="_blank"]::after,
.external-arrow::after {
  content: '';
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-left: 0.45em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  vertical-align: middle;
  opacity: 0.85;
}
input, textarea, select { font: inherit; color: inherit; }

/* === PALETTE TABEA === */
:root {
  --plum:           #6B4560;   /* prune unifié (titres + boutons) */
  --plum-cta:       #6B4560;
  --plum-cta-hover: #56364D;
  --plum-dark:      #3D2233;   /* prune foncé conservé pour cas spécifiques (ombres, accents subtils) */
  --bg-hero-panel:  #e8efea;   /* vert très clair */
  --bg-quote:       #92b1a7;
  --bg-form:        #e8efea;
  --bg-footer:      #535356;
  --text:           #242425;
  --text-soft:      #6b5360;
  --line:           #e4dccd;
  --beige:          #f8f5ef;   /* beige d'alternance (sections + barre de menu) */
  --white:          #ffffff;

  --gutter: 1.5rem;
  --max-width: 1180px;
  --header-h: 112px;

  --shadow-soft:   0 4px 16px rgba(36, 36, 37, .08);
  --shadow-strong: 0 8px 28px rgba(36, 36, 37, .14);
}

/* === TYPOGRAPHIE === */
h1, h2, h3, .display {
  font-family: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  color: var(--plum);
  line-height: 1.15;
  margin: 0 0 .6em;
}
h1 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(2.2rem, 7vw, 5rem);
  letter-spacing: -0.015em;
  line-height: 1.08;
}
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.05rem, 1.8vw, 1.25rem); }
p { margin: 0 0 1em; }
em { font-style: italic; }
strong { font-weight: 600; }

.eyebrow {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: #3a3a3d;       /* gris foncé pour la lisibilité du sur-titre */
  margin-bottom: 1rem;
  opacity: 1;
}

/* Vignette ronde centrée au-dessus d'un titre de section (Espaces Vivants) */
.section-vignette {
  margin: 0 auto 2rem;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(36, 36, 37, .14);
}
.section-vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 800px) {
  .section-vignette { width: 220px; height: 220px; }
}

/* Cartes projets (Parcours — Espace Bosquets, Yelema, Yelema Creativ) */
.projets-grid {
  display: grid;
  gap: 2rem;
  margin: 2.5rem auto 0;
  max-width: 1080px;
}
@media (min-width: 780px) {
  .projets-grid { grid-template-columns: repeat(3, 1fr); }
}
.projet-card {
  text-align: center;
  padding: 1.5rem 1rem 1.75rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.projet-card__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  width: 100%;
  margin-bottom: 1.2rem;
  transition: transform .25s ease, opacity .25s ease;
}
.projet-card__logo:hover { transform: translateY(-2px); opacity: .85; }
.projet-card__logo img {
  max-height: 100%;
  max-width: 70%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.projet-card h3 { margin: 0 0 .5rem; }
.projet-card p { margin: 0 0 .6rem; color: var(--text); line-height: 1.55; }
.projet-card p:last-child { margin-bottom: 0; margin-top: .4rem; }

/* Liste éditoriale (formations, assistanats…) — pucée, aérée, centrée dans la largeur de lecture */
.prose-list {
  list-style: none;
  margin: 1.5rem auto 0;
  padding: 0;
  max-width: 720px;
}
.prose-list li {
  position: relative;
  padding: .55rem 0 .55rem 1.6rem;
  color: var(--text);
  line-height: 1.55;
  border-bottom: 1px solid var(--line);
}
.prose-list li:last-child { border-bottom: 0; }
.prose-list li::before {
  content: '';
  position: absolute;
  left: .2rem;
  top: 1.05rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--plum);
  opacity: .65;
}

/* === CONTAINER === */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* === BOUTONS — tous prune (var(--plum)) avec filet blanc 3px === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .9em 1.8em;
  border: 3px solid var(--white);
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .03em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .15s ease;
  min-height: 46px;
  white-space: nowrap;
  background: var(--bg-quote);   /* vert hero #92b1a7 (test) */
  color: var(--white);
}
.btn:hover, .btn:focus-visible {
  background: #7a968c;
  transform: translateY(-1px);
}
.btn--ghost {
  background: transparent;
  color: var(--plum-cta);
  border-color: var(--plum-cta);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--plum-cta);
  color: var(--white);
  border-color: var(--plum-cta);
}

.btn-link {
  display: inline-block;
  color: var(--plum);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  position: relative;
  padding-bottom: 2px;
  font-size: .92rem;
  line-height: 1.25;       /* trait souligné plus proche du texte */
}
/* On désactive l'ancien pseudo-élément de soulignement pour libérer ::after
   et permettre l'affichage propre de la flèche sur les liens externes */
.btn-link::after { content: none; }
.btn-link:hover { text-decoration-thickness: 1.5px; }

/* === ANCRES — compense la hauteur du header collant === */
:target { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* === NOTE DISCRÈTE (renvois vers un passage précis d'une autre page) === */
.note-soft {
  margin-top: 1.5rem;
  margin-bottom: 0;
  font-size: .92rem;
  font-style: italic;
  color: var(--text-soft);
}
.note-soft a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.note-soft a:hover { color: var(--plum); }

/* === HEADER — sans border, mais avec ombre douce pour différencier au scroll === */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--beige);   /* opaque : plus de backdrop-filter nécessaire */
  box-shadow: 0 6px 20px rgba(36, 36, 37, .08);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 var(--gutter);
  max-width: var(--max-width);
  margin: 0 auto;
}
.site-logo img { height: 96px; width: auto; }
.site-logo { display: inline-flex; align-items: center; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border: 0;
  background: transparent;
  color: var(--text);   /* anthracite, comme les liens du menu */
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  display: block;
  width: 30px; height: 2.5px;
  background: currentColor;
  transition: transform .25s, opacity .25s;
  border-radius: 2px;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -9px; left: 0; }
.nav-toggle span::after { position: absolute; top: 9px; left: 0; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
/* X de fermeture : on ramène les barres au centre (translateY de ±9px = leur décalage initial),
   puis on les croise à 45°. Les deux branches se rejoignent exactement au centre. */
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-9px) rotate(-45deg); }

.site-nav {
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(100dvh - var(--header-h));
  background: var(--beige);
  padding: 1.5rem var(--gutter);
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow-y: auto;
  z-index: 999;
  -webkit-overflow-scrolling: touch;
}
.site-nav[data-open="true"] { transform: translateX(0); }
.site-nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.site-nav a {
  display: block;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.25rem;
  color: var(--text);          /* anthracite : le menu recule, le logo porte la couleur */
  padding: .5rem 0;
}
.site-nav a:hover { color: var(--plum); }
/* Page active : DOUBLE signal — bascule en Abril Fatface ET passage en prune.
   Ne jamais retirer l'un des deux, ils se renforcent. */
.site-nav a[aria-current="page"] {
  font-family: 'Abril Fatface', Georgia, serif;
  color: var(--plum);
}
.site-nav .submenu {
  list-style: none;
  margin: .5rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--line);
  gap: .7rem;
}
.site-nav .submenu a { font-size: 1.05rem; color: var(--text); }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav {
    position: static;
    background: transparent;
    padding: 0;
    transform: none;
    overflow: visible;
    height: auto;
    z-index: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
  .site-nav > ul { flex-direction: row; gap: 2rem; align-items: center; }
  .site-nav > ul > li { position: relative; }
  .site-nav > ul > li > a { font-size: 1rem; padding: .5rem 0; }
  .site-nav > ul > li > a[aria-current="page"] {
    font-family: 'Abril Fatface', Georgia, serif;
    font-size: 1.2rem;
    line-height: 1;
  }
  /* Étend la zone hover du parent vers le bas pour rester sur le menu */
  .site-nav > ul > li.has-submenu { padding-bottom: 1rem; margin-bottom: -1rem; }

  .site-nav .submenu {
    position: absolute;
    top: 100%; left: 50%; transform: translateX(-50%);
    min-width: 300px;
    background: var(--beige);
    box-shadow: var(--shadow-strong);
    padding: 1rem;
    border-radius: 8px;
    border-left: 0;
    margin-top: .5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    transform: translate(-50%, -8px);
  }
  /* Pont invisible entre le parent et le sous-menu (évite que le hover saute) */
  .site-nav .submenu::before {
    content: '';
    position: absolute;
    top: -1rem;
    left: 0; right: 0;
    height: 1rem;
  }
  .site-nav > ul > li:hover > .submenu,
  .site-nav > ul > li:focus-within > .submenu {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
  .site-nav .submenu a {
    font-size: .95rem;
    padding: .4rem .6rem;
    border-radius: 4px;
    color: var(--text);
    display: block;
    width: 100%;     /* fixe la largeur pour éviter le saut au changement de police */
  }
  .site-nav .submenu a:hover {
    background: var(--bg-hero-panel);
    color: var(--plum);
    font-family: 'Abril Fatface', Georgia, serif;
  }
  /* La page active du sous-menu doit garder le DOUBLE signal (Abril + prune).
     Cette règle doit rester APRÈS « .site-nav .submenu a », qui a la même
     spécificité et écraserait sinon la couleur. */
  .site-nav .submenu a[aria-current="page"] { color: var(--plum); }
  .has-submenu > a::after {
    content: '▾';
    margin-left: .35em;
    font-size: .7em;
    opacity: .6;
  }
}

/* =========================================================
   HERO — bande verte aux dimensions exactes de l'image,
   parallaxe sur l'image, panneau bleu en-dessous
   ========================================================= */
.hero { padding-top: 0; background: var(--white); }

/* La bande verte n'apparaît QUE sur les côtés de l'image en desktop.
   Aucun padding-top : l'image colle directement au menu (pas de bande qui glisse au scroll). */
.hero__bg-band {
  background: var(--bg-quote);   /* #92b1a7 */
  padding-top: 0;
}
@media (max-width: 899px) {
  .hero__bg-band { background: var(--white); }
}

.hero__image {
  position: relative;
  width: 100%;
  height: clamp(400px, 44vw, 580px);   /* pleine largeur, hauteur maîtrisée */
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;   /* parallaxe desktop */
}
@media (max-width: 899px) {
  .hero__image {
    /* Hero ACCUEIL uniquement : plus haut pour laisser de l'air entre le CTA SMS et le dôme,
       même sur Android où les polices peuvent être plus généreuses */
    height: clamp(520px, 95vw, 640px);
    background-attachment: scroll;
  }
}
.hero__image > img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.hero__overlay .container { text-align: center; }
.hero__overlay .hero__cta { justify-content: center; }
.hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;     /* H1 vers le haut au lieu d'être centré */
  align-items: center;
  text-align: center;
  padding: clamp(3rem, 10vw, 7rem) var(--gutter) 2rem;
  /* Halo radial très léger : un soupçon de blanc au centre pour la lisibilité du H1, image quasi non filtrée */
  background: radial-gradient(ellipse 50% 60% at center 30%, rgba(255,255,255,.28) 0%, rgba(255,255,255,.10) 55%, rgba(255,255,255,0) 100%);
  color: var(--plum);
}
.hero__overlay h1 {
  color: var(--plum);
  margin-bottom: .5rem;
  text-shadow: 0 0 26px rgba(255,255,255,.95), 0 0 54px rgba(255,255,255,.7);
}
.hero__overlay .hero__subtitle {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--plum);
  margin: 0 0 1.8rem;
  text-shadow: 0 0 18px rgba(255,255,255,.95);
}
.hero__overlay .btn-link { text-shadow: 0 0 14px rgba(255,255,255,.9); }

/* Légende discrète sur une image section-block — ex. photo du cabinet */
.section-block__media--captioned { position: relative; }
.section-block__caption {
  position: absolute;
  bottom: 0.9rem;
  right: 0.9rem;
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.22);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
@media (max-width: 600px) {
  /* Sur mobile, la carte blanche du body chevauche le bas de l'image (-4rem)
     plus son ombre/blur visuel. On remonte la légende bien au-dessus, et on force
     un z-index plus élevé que la carte blanche (z=5) pour qu'elle s'affiche par-dessus. */
  .section-block__caption {
    bottom: 6rem;
    right: auto;
    left: 0.55rem;
    font-size: 0.7rem;
    padding: 0.25rem 0.55rem;
    z-index: 10;
  }
}
.hero__overlay .hero__cta {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  align-items: center;
}
.hero__overlay .btn-link {
  color: var(--plum);
}

@media (min-width: 900px) {
  .hero__overlay .hero__cta { flex-direction: row; gap: 1.5rem; }
}

/* Panneau d'accueil — fond blanc sans ombre (test) — pleine largeur */
.hero__panel {
  background: var(--white);
  padding: 3rem 1.8rem 2.2rem;
  max-width: 100%;
  margin: -14% auto 0;          /* ≈ 1/4 hauteur image (mobile) */
  position: relative;
  z-index: 5;
  text-align: center;
  border-radius: 50% 50% 0 0 / 22% 22% 0 0;   /* dôme arrondi en haut, plat en bas */
}
.hero__panel p {
  color: var(--text);
  margin-bottom: 1em;
}
/* Même largeur de lecture que les .intro-panel des autres pages (720px centré) */
.hero__panel .eyebrow,
.hero__panel h2,
.hero__panel p { margin-left: auto; margin-right: auto; max-width: 800px; }
.hero__panel p:last-child { margin-bottom: 0; }
.hero__panel--alt { background: var(--beige); }

/* Wrapper beige full-width pour contenu beige (hero__panel + spirale, ou intro-panel + spirale) */
.beige-band {
  width: 100%;
  background-color: var(--beige);
  margin: 0;
  padding: 0;
}
.hero__panel-eyebrow {
  text-align: center;
  color: var(--plum);
  margin-bottom: 3.2rem;
  font-size: .88rem;
}
.hero__panel .opener,
.welcome-words .opener {
  font-family: 'Abril Fatface', Georgia, serif;
  font-weight: 400;
  font-size: 1.18em;
  color: var(--plum);
  margin-right: .15em;
}

@media (min-width: 900px) {
  .hero__panel {
    max-width: 100%;
    padding: 4.5rem 3rem 3rem;
    margin: -10% auto 0;       /* superposition modérée sur le bas de l'image */
    border-radius: 0;           /* on remplace le border-radius par un clip-path circulaire */
    /* clip-path en pixels fixes (comme .intro-panel) : le panneau d’accueil est devenu court
       depuis le 26.08.2026, une ellipse en % se refermerait sur le texte du haut. */
    clip-path: ellipse(70% 400px at 50% 400px);
  }
}

/* =========================================================
   STRUCTURE 4 SECTIONS BLOC IDENTIQUES (alternance gauche/droite)
   Toutes sur fond blanc, image verticale + texte côté
   ========================================================= */
.section-block {
  padding: 2.4rem 0;
  background: var(--white);
}
.section-block--alt { background: var(--beige); }   /* beige (alternance accueil) */
.section-block__grid {
  display: grid;
  gap: 2rem;
  align-items: start;
}
.section-block__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-shadow: 0 12px 28px rgba(36, 36, 37, .10);
}
.section-block__media img { width: 100%; height: 100%; object-fit: cover; }
/* Variante portrait : pas d'aspect-ratio forcé, l'image garde ses proportions naturelles */
.section-block__media--portrait { aspect-ratio: auto; }
.section-block__media--portrait img { height: auto; }

/* Conclusion posée en bas de l'image sur desktop (encart blanc translucide) ;
   simple paragraphe sous l'image sur mobile, où un encart serait illisible. */
.media-note {
  margin: 1.1rem 1.1rem 1.2rem;
  text-wrap: pretty;
}
@media (min-width: 900px) {
  .media-note {
    position: absolute;
    left: clamp(1rem, 2.2vw, 1.75rem);
    right: clamp(1rem, 2.2vw, 1.75rem);
    bottom: clamp(1rem, 2.2vw, 1.75rem);
    margin: 0;
    padding: clamp(1.1rem, 1.8vw, 1.5rem);
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow: 0 12px 32px rgba(36, 36, 37, .16);
    color: #242425;
    /* pas de font-size ni de line-height : le texte garde la taille courante du site */
  }
}
.section-block__body { padding: 1rem 0; }
.section-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 1.5rem;
}

@media (min-width: 900px) {
  .section-block { padding: 3rem 0; }
  .section-block__grid {
    grid-template-columns: 5fr 7fr;
    gap: 4rem;
    align-items: start;
  }
  .section-block__body { padding-top: 0; }
  /* Variante : image à droite */
  .section-block--reverse .section-block__grid {
    grid-template-columns: 7fr 5fr;
  }
  .section-block--reverse .section-block__media { order: 1; }
  /* Variante : vignette réduite (~1/3,5) + texte élargi */
  .section-block--narrow-media .section-block__grid {
    grid-template-columns: 2fr 7fr;
  }
  .section-block--reverse.section-block--narrow-media .section-block__grid {
    grid-template-columns: 7fr 2fr;
  }
  /* Aligne le haut du titre avec le haut de la vignette */
  .section-block--narrow-media .section-block__body { padding-top: 0; }
  /* Image recadrée pour épouser exactement la hauteur du texte : les deux colonnes
     se terminent à la même ligne, quelle que soit la plus longue. Desktop uniquement —
     sur mobile l'image reprend sa hauteur naturelle (règle hors de ce media-query). */
  .section-block--media-fill .section-block__media {
    align-self: stretch;
    aspect-ratio: auto;
    position: relative;
    overflow: hidden;
  }
  .section-block--media-fill .section-block__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .section-block--media-fill .media-note { z-index: 2; }
}

/* =========================================================
   PARALLAX
   ========================================================= */
.parallax {
  width: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.parallax--separator { height: clamp(320px, 42vw, 540px); }
.parallax--quote    { height: clamp(260px, 35vw, 480px); }
.parallax--footer   { height: clamp(260px, 32vw, 460px); }

@media (max-width: 900px) {
  .parallax { background-attachment: scroll; }
}

/* =========================================================
   DUO Approche + Parcours — superposé au parallax au-dessus
   ========================================================= */
.duo {
  padding: 0 0 3rem;
  margin-top: -120px;
  position: relative;
  z-index: 5;
}
.duo__grid {
  display: grid;
  gap: 2.5rem;
  max-width: 880px;
  margin: 0 auto;
}
.duo__card { text-align: left; }
.duo__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 1.5rem;
  box-shadow: 0 12px 28px rgba(36, 36, 37, .10);
}
.duo__media img { width: 100%; height: 100%; object-fit: cover; }
.duo__text {
  background: var(--white);
  padding: .5rem 0 0;
}
.duo__card h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: .8rem; }
.duo__card p { color: var(--text); margin-bottom: 1.2rem; }
.duo__card .btn-link { font-size: inherit; }   /* même taille que le texte courant */

@media (min-width: 720px) {
  .duo__grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
@media (min-width: 900px) {
  .duo { margin-top: -180px; }
}

/* =========================================================
   CITATION
   ========================================================= */
.quote {
  width: 100%;
  background: var(--bg-quote);
  color: var(--white);
  padding: 3.5rem 0;
  text-align: center;
}
.quote h2, .quote blockquote { color: var(--white); }
/* Citation discrète, calée sur le bloc citation de reflexologie.html
   (.parallax-card__box) : police courante en italique, 1.2 rem maximum. */
.quote blockquote {
  margin: 0 auto;
  max-width: 780px;
  padding: 0 var(--gutter);
  font-size: clamp(1.05rem, 1.9vw, 1.2rem);
  line-height: 1.55;
  font-style: italic;
}
.quote cite {
  display: block;
  margin-top: 1.5rem;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .85rem;
  font-style: normal;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .85;
}

/* =========================================================
   FORMULAIRE DE CONTACT
   ========================================================= */
.contact-inline {
  padding: 3.5rem 0;
  background: var(--beige);
  color: #242425;
  text-align: center;
}
.contact-inline h2 {
  color: var(--plum);
  max-width: none;
  margin: 0 auto 1rem;
  white-space: nowrap;
  font-size: clamp(1.2rem, 2.6vw, 2rem);
}
@media (max-width: 720px) {
  .contact-inline h2 { white-space: normal; font-size: clamp(1.5rem, 6vw, 2rem); }
}
.contact-inline > .container > p { color: #242425; max-width: 540px; margin: 0 auto 2.5rem; }

.contact-form {
  max-width: 580px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  text-align: left;
}
.contact-form__row {
  display: grid;
  gap: 1rem;
}
@media (min-width: 600px) {
  .contact-form__row { grid-template-columns: 1fr 1fr; }
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: .9rem 1rem;
  background: var(--white);
  border: 1px solid #d6d2c8;
  border-radius: 6px;
  font-size: 1rem;
  color: #242425;
  transition: border-color .2s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--plum-cta);
}
.contact-form textarea { min-height: 140px; resize: vertical; }

.contact-form__checks {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  align-items: flex-start;
  margin-top: .25rem;
}
.contact-form__checks label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: #242425;
  font-size: .94rem;
  cursor: pointer;
  line-height: 1.5;
}
.contact-form__checks input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  width: 18px; height: 18px;
  accent-color: var(--plum-cta);
  margin-top: 3px;
}
.contact-form__submit { justify-self: center; margin-top: .5rem; }
.contact-form__legal {
  font-size: .92rem;
  color: #242425;
  text-align: center;
  opacity: .85;
  margin-top: .6rem;
}

/* Contact page: form fields + grid */
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.contact-form__field label {
  font-size: .92rem;
  color: #242425;
  font-weight: 500;
  letter-spacing: .01em;
}
.contact-form__hint {
  font-weight: 400;
  opacity: .65;
  font-size: .85rem;
  margin-left: .2rem;
}
.contact-form__rgpd {
  font-size: .76rem;
  color: #242425;
  opacity: .75;
  line-height: 1.5;
  text-align: center;
  max-width: 520px;
  margin: .6rem auto 0;
}
.contact-form__rgpd a { color: var(--plum-cta); text-decoration: underline; }

.contact-grid {
  display: grid;
  gap: 1.25rem;
  max-width: 720px;
  margin: 2rem auto 0;
}
@media (min-width: 640px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 800px) {
  .contact-grid--three { grid-template-columns: repeat(3, 1fr); max-width: 980px; }
}
.contact-card {
  background: var(--white);
  border: 1px solid #f1ece2;
  border-radius: 8px;
  padding: 1.6rem 1.4rem;
  text-align: center;
}
.contact-card h3 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--plum-cta);
  margin-bottom: .6rem;
}
.contact-card p { margin: 0; color: #242425; }
.contact-card a { color: var(--plum-cta); }
.contact-card a:hover { color: var(--plum-cta-hover); }

/* Contact: Où me trouver — 2 colonnes */
.lieux-grid {
  display: grid;
  gap: 1.5rem;
  max-width: 980px;
  margin: 2rem auto 0;
}
@media (min-width: 760px) {
  .lieux-grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
.lieux-stack {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}
.lieu-card {
  background: var(--white);
  border: 1px solid #f1ece2;
  border-radius: 8px;
  padding: 1.75rem 1.6rem;
}
.lieu-card h3 {
  color: var(--plum);
  margin: 0 0 .8rem;
  font-size: 1.4rem;
}
.lieu-card p { margin: 0 0 .8rem; color: #242425; line-height: 1.6; }
.lieu-card p:last-child { margin-bottom: 0; }
.lieu-card a.btn-link { color: var(--plum-cta); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--bg-footer);
  color: var(--white);
  padding: 4rem 0 2rem;
}
.site-footer a { color: var(--white); opacity: .88; }
.site-footer a:hover { opacity: 1; color: var(--bg-quote); }
.site-footer__grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 800px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.site-footer h3 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--white);
  margin-bottom: 1rem;
  opacity: .82;
}
.site-footer ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: .6rem;
}
.site-footer__brand img { height: 120px; margin-bottom: 1.2rem; }
.site-footer__brand p { opacity: .85; font-size: .92rem; max-width: 340px; }

/* Icônes sociales du footer */
.social-icons {
  display: flex;
  gap: .9rem;
  margin-top: 1.2rem;
  align-items: center;
}
.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 999px;
  color: var(--white);
  opacity: .9;
  transition: background .25s ease, opacity .25s ease, transform .15s ease, border-color .25s ease;
}
.social-icons a:hover {
  background: var(--white);
  color: var(--bg-footer);
  opacity: 1;
  border-color: var(--white);
  transform: translateY(-1px);
}
.social-icons svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
}
.site-footer__bottom {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .15);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: .82rem;
  opacity: .75;
}

/* =========================================================
   MOBILE (< 900px) — superposition systématique image/texte
   ========================================================= */
@media (max-width: 899px) {

  /* Hero panel reste sur z-index élevé pour pouvoir chevaucher l'image en-dessous */
  .hero__panel {
    position: relative;
    z-index: 6;
  }

  /* Première section (individuel) : l'image remonte sous le panneau bleu */
  .section-block.section-block--first { padding-top: 0; }
  .section-block.section-block--first .section-block__media {
    margin-top: -32vw;  /* ~1/3 de l'image cachée sous le panneau bleu */
  }
  /* MAIS : si le section-block--first suit une .section normale (titre intermédiaire),
     on annule l'overlap pour ne pas que l'image masque le titre */
  .section + .section-block.section-block--first .section-block__media {
    margin-top: 0;
  }

  /* Toutes les sections : sur mobile, l'image vient TOUJOURS en premier (order: -1) */
  .section-block__media {
    order: -1;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-self: stretch;
  }

  /* Le corps texte devient une carte blanche qui chevauche le bas de l'image */
  .section-block__body {
    background: var(--white);
    padding: 1.8rem 1.4rem 2rem;
    margin: -4rem auto 0;
    max-width: 86%;
    width: 86%;            /* sécurise le centrage dans la grille mobile */
    justify-self: center;  /* recentre la carte dans la cellule grid */
    position: relative;
    z-index: 5;
    text-align: center;
  }
  .section-block__body .eyebrow {
    text-align: center;
  }
  .section-block__actions {
    justify-content: center;
  }

  /* Titres et boutons centrés sur tous les blocs */
  .section-block h2,
  .colored-section h2,
  .duo h2 { text-align: center; }

  /* Boutons hero centrés (déjà fait par défaut) */

  /* Duo cards : alignement centré aussi */
  .duo__card { text-align: center; }
  .duo__card .btn-link { display: inline-block; }

  /* Footer : centrage propre */
  .site-footer { text-align: center; }
  .site-footer__brand img { margin-left: auto; margin-right: auto; }
  .site-footer__brand p { margin-left: auto; margin-right: auto; }
  .site-footer ul { align-items: center; }
  .social-icons { justify-content: center; }   /* icônes sociales centrées sur mobile */
  .site-footer__bottom {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}

/* =========================================================
   PAROLES D’ACCUEIL — bloc « Je t’accueille / Je t’offre… »
   déplacé du panneau du hero vers le milieu de l’accueil (26.08.2026)
   ========================================================= */
.welcome-words__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.welcome-words__inner p {
  color: var(--text);
  margin-bottom: 1em;
}
.welcome-words__inner p:last-child { margin-bottom: 0; }
.welcome-words .eyebrow {
  text-align: center;
  color: var(--plum);
  margin-bottom: 3.2rem;
  font-size: .88rem;
}

/* =========================================================
   PAGES INTÉRIEURES — hero simple (image + H1, sans panneau)
   ========================================================= */
.page-hero {
  padding-top: 0;
  background: var(--white);
  position: relative;
}
/* Panneau d'intro qui chevauche le bas de l'image — réplique EXACTE du .hero__panel de l'accueil.
   On force une hauteur minimum (équivalente au panneau de l'accueil) ET on utilise ry=100%, pour que
   la courbe couvre toute la hauteur (pas d'angles droits entre le dôme et le bas du panneau). */
.intro-panel {
  position: relative;
  z-index: 5;
  background: var(--white);
  max-width: min(1080px, calc(100% - 2 * var(--gutter)));
  margin: -14% auto 0;
  padding: 3rem 1.8rem 2.2rem;
  text-align: center;
  border-radius: 50% 50% 0 0 / 22% 22% 0 0;   /* dôme mobile (border-radius) */
}
@media (min-width: 900px) {
  .intro-panel {
    margin: -10% auto 0;
    padding: 4.5rem 3rem 3rem;
    border-radius: 0;
    /* clip-path en pixels fixes : la forme du chapeau reste identique quelle que soit
       la hauteur du panneau (rx=70%, ry=400px, centre 400px sous le haut du panneau) */
    clip-path: ellipse(70% 400px at 50% 400px);
  }
}
.intro-panel--alt { background: var(--beige); }

/* Panneau d'intro resserré (page Contact) : mesure de lecture plus courte sur grand écran */
@media (min-width: 900px) {
  .intro-panel--narrow p { max-width: 460px; }
}

/* Portrait rond entre le panneau d'intro et le formulaire (page Contact).
   Fond beige pour prolonger sans rupture le panneau et la section du formulaire. */
.portrait-band {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: var(--beige);
  padding: 1.6rem 0 0.4rem;
}
.portrait-band__img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
}
@media (max-width: 600px) {
  .portrait-band { padding: 1.2rem 0 0.2rem; }
  .portrait-band__img { width: 130px; height: 130px; }
}
/* Wrapper plein largeur autour d'un intro-panel--alt : étend le fond gris sur les côtés du panneau.
   display: flow-root crée un BFC qui empêche le margin-collapse entre la marge négative du
   panneau interne et le wrap lui-même (sans quoi le wrap remonterait dans l'image). */
.intro-panel-wrap { position: relative; display: flow-root; }
.intro-panel-wrap--alt { background: var(--beige); }
.intro-panel .eyebrow,
.intro-panel h2,
.intro-panel h3,
.intro-panel p { margin-left: auto; margin-right: auto; max-width: 760px; text-wrap: pretty; }
.intro-panel h2 { margin-bottom: 1rem; }
.intro-panel p { color: var(--text); margin-bottom: 1em; }
.intro-panel p:last-child { margin-bottom: 0; }

/* Citation italique en haut d'intro-panel — sur une seule ligne en desktop */
.intro-panel__quote {
  font-style: italic;
  color: var(--plum);
  max-width: none !important;
  white-space: nowrap;
  font-size: clamp(0.85rem, 1.45vw, 1.05rem);
  margin-bottom: 1.25rem !important;
}
@media (max-width: 900px) {
  .intro-panel__quote {
    white-space: normal;
    max-width: 720px !important;
    font-size: 1rem;
  }
}

/* Quand une section suit un .intro-panel, on la remonte pour compenser l'espace vide
   en bas du panneau (créé par le min-height qui maintient la forme du dôme).
   Le z-index supérieur empêche le panneau de masquer le contenu de la section. */
/* Empêche la section qui suit un .intro-panel d'être masquée par le panneau si elle remonte. */
.container:has(> .intro-panel) + .section,
.container:has(> .intro-panel) + .section-block,
.container:has(> .intro-panel--alt) + .section--alt,
.container:has(> .intro-panel--alt) + .section-block--alt {
  position: relative;
  z-index: 6;
}
.page-hero__band { background: var(--bg-quote); }
@media (max-width: 899px) { .page-hero__band { background: var(--white); } }
.page-hero__image {
  position: relative;
  width: 100%;
  height: clamp(400px, 44vw, 580px);    /* aligné sur .hero__image (accueil) */
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
@media (max-width: 899px) {
  .page-hero__image { height: clamp(360px, 60vw, 460px); background-attachment: scroll; }   /* aligné sur .hero__image mobile (réduit) */
}
/* Variante avec léger filtre éclaircissant (voile blanc subtil sur toute l'image) */
.page-hero__image--light::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .22);
  pointer-events: none;
  z-index: 1;
}
/* Variante sans halo radial blanc derrière le H1 — pour les images déjà claires */
.page-hero__image--no-halo > .page-hero__overlay {
  background: transparent;
}
.page-hero__image--light > .page-hero__overlay { z-index: 2; }

/* Variante pour image sombre — H1 en blanc + voile sombre pour lisibilité */
.page-hero__image--dark > .page-hero__overlay {
  background: radial-gradient(ellipse 62% 75% at center, rgba(0,0,0,.42) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,.05) 100%);
}
.page-hero__image--dark .page-hero__overlay h1 {
  color: var(--white);
  text-shadow: 0 2px 14px rgba(0,0,0,.55), 0 0 36px rgba(0,0,0,.35);
}
.page-hero__overlay .container { width: 100%; }
.page-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;             /* H1 empilé verticalement */
  align-items: center;
  justify-content: flex-start;        /* H1 en haut comme l'accueil */
  text-align: center;
  padding: clamp(3rem, 10vw, 7rem) var(--gutter) 2rem;
  background: radial-gradient(ellipse 58% 70% at center 30%, rgba(255,255,255,.60) 0%, rgba(255,255,255,.30) 55%, rgba(255,255,255,.06) 100%);
}
.page-hero__overlay h1 {
  color: var(--plum);
  margin: 0;
  text-shadow: 0 0 26px rgba(255,255,255,.95), 0 0 54px rgba(255,255,255,.7);
}

/* === Sections de contenu génériques === */
.section { padding: 3.5rem 0; background: var(--white); }
.section--alt { background: var(--beige); }

/* Section avec image en parallaxe en fond + voile blanc pour la lisibilité du texte */
.section--parallax {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  isolation: isolate;
}
.section--parallax::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .68);
  z-index: 0;
  pointer-events: none;
}
.section--parallax > .container { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .section--parallax { background-attachment: scroll; }
}
/* Section qui chevauche la parallaxe au-dessus (comme le duo de l'accueil) */
.section--overlap {
  background: transparent;
  margin-top: -120px;
  padding-top: 0;
  position: relative;
  z-index: 5;
}
@media (min-width: 900px) {
  .section--overlap { margin-top: -160px; }
}
.prose-center {
  max-width: 760px;
  margin: 0 auto 2.5rem;
}
.prose-center h2 { margin-bottom: 1rem; text-align: center; }
.prose-center .eyebrow { text-align: center; margin-bottom: .5rem; }
.prose-center p { color: var(--text); text-align: left; }
.prose-center h2 + h3 { margin-top: 2rem; }   /* espace plus large entre H2 et premier H3 */
/* Variante : titre de section aligné à gauche (parcours — formations, assistanats) */
.prose-center--left h2 { text-align: left; }
.section__cta { text-align: center; margin-top: 2.5rem; }

/* === Duo intro (En séance individuelle / En atelier de groupe) === */
.intro-duo {
  display: grid;
  gap: 2.5rem;
  max-width: 940px;
  margin: 0 auto;
}
.intro-duo__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 1.4rem;
  box-shadow: 0 12px 28px rgba(36, 36, 37, .10);
}
.intro-duo__media img { width: 100%; height: 100%; object-fit: cover; }
.intro-duo__body h3 { margin-bottom: .6rem; }
.intro-duo__body p { color: var(--text); }
@media (min-width: 720px) {
  .intro-duo { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

/* === Liste d'outils (vignette + texte) === */
.tool-list {
  display: grid;
  gap: 2rem;
  max-width: 880px;
  margin: 0 auto;
}
.tool-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.5rem;
  align-items: center;
}
.tool-row__media {
  width: 120px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(36, 36, 37, .10);
}
.tool-row__media img { width: 100%; height: 100%; object-fit: cover; }
.tool-row__body h3 { margin-bottom: .4rem; }
.tool-row__body p { color: var(--text); margin-bottom: .5rem; }
@media (min-width: 720px) {
  .tool-row { grid-template-columns: 160px 1fr; gap: 2rem; }
  .tool-row__media { width: 160px; }
}
@media (max-width: 540px) {
  .tool-row:not(.tool-row--full) { grid-template-columns: 90px 1fr; gap: 1.2rem; }
  .tool-row:not(.tool-row--full) .tool-row__media { width: 90px; }
}
/* Roue Celtique : pleine largeur, sans vignette */
.tool-row--full { grid-template-columns: 1fr; }

/* === Liste Où ? / Pour qui ? / Comment ? === */
.qa { margin: 1.2rem 0 1.5rem; }
.qa dt {
  font-weight: 600;
  color: var(--text);
  margin-top: .8rem;
}
.qa dd {
  margin: .15rem 0 0;
  color: var(--text);
}

/* === Addendum sessions de groupe — version très compacte pour l'Accueil === */
.group-addendum {
  padding: 2rem 0 2.8rem;
  background: var(--white);
}
.group-addendum__intro {
  text-align: center;
  margin-bottom: 1.5rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.group-addendum__intro h2 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-family: 'Abril Fatface', Georgia, serif;
  color: var(--plum);
  margin-bottom: .5rem;
}
.group-addendum__intro p {
  font-size: .95rem;
  color: var(--text);
  margin-bottom: 0;
}
.group-addendum__cards {
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: 1fr;
  max-width: 820px;
  margin: 0 auto;
}
.addendum-card {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1.2rem;
  align-items: start;
}
.addendum-card__media {
  width: 130px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(36,36,37,.10);
}
.addendum-card__media img { width: 100%; height: 100%; object-fit: cover; }
.addendum-card__body h3 {
  font-family: 'Abril Fatface', Georgia, serif;
  font-size: 1.15rem;
  color: var(--plum);
  margin: 0 0 .35rem;
}
.addendum-card__body p {
  font-size: .9rem;
  color: var(--text);
  margin: 0 0 .5rem;
}
.addendum-card__body .btn-link { font-size: .9rem; }

@media (min-width: 720px) {
  .group-addendum__cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .addendum-card { grid-template-columns: 90px 1fr; gap: 1rem; }
  .addendum-card__media { width: 90px; }
}

/* === Cartes compactes (sessions de groupe — plus petites pour signaler "complémentaire") === */
.group-cards {
  display: grid;
  gap: 2rem;
  max-width: 900px;
  margin: 2.5rem auto 0;
}
.group-card { display: flex; flex-direction: column; }
.group-card__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 1.2rem;
  box-shadow: 0 12px 28px rgba(36, 36, 37, .10);
}
.group-card__media img { width: 100%; height: 100%; object-fit: cover; }
.group-card__body h3 {
  font-family: 'Abril Fatface', Georgia, serif;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  color: var(--plum);
  margin-bottom: .5rem;
}
.group-card__body p { color: var(--text); margin-bottom: 1rem; }
.group-card__actions { margin-top: auto; }
.group-card__actions .btn { font-size: .9rem; padding: .75em 1.4em; }
@media (min-width: 720px) {
  .group-cards { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

/* === Parallaxe avec bloc blanc centré (ex : tutoiement) === */
.parallax-card {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: clamp(4.5rem, 10vw, 8rem) 0;   /* un peu plus haut */
  display: flex;
  align-items: center;
}

/* Légende discrète sur un parallax-card vide (ex. cabinet sur la page Contact) */
.parallax-card--captioned { position: relative; }
.parallax-card__caption {
  position: absolute;
  bottom: 0.9rem;
  right: 0.9rem;
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.22);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  z-index: 3;
}
@media (max-width: 600px) {
  .parallax-card__caption {
    bottom: 0.55rem;
    right: 0.55rem;
    font-size: 0.7rem;
    padding: 0.25rem 0.55rem;
  }
}
@media (max-width: 900px) {
  .parallax-card { background-attachment: scroll; }
}
.parallax-card__box {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, .78);   /* plus transparent */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  max-width: 840px;
  margin: 0 auto;
  padding: clamp(1.8rem, 4vw, 3rem);
  box-shadow: 0 16px 40px rgba(36, 36, 37, .18);
}
/* Témoignage dans un parallax-card — motif à dupliquer pour chaque nouveau
   témoignage (voir Témoignages.md à la racine du projet). Même échelle que les
   citations : italique, 1.2 rem au maximum. */
.testimonial { margin: 0; }
.testimonial p {
  font-size: clamp(1.05rem, 1.9vw, 1.2rem);
  font-style: italic;
  line-height: 1.6;
  margin: 0;
}
.testimonial cite {
  display: block;
  margin-top: 1.3rem;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .8rem;
  font-style: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--plum);
}

.parallax-card__box h2 { margin-bottom: 1rem; }
.parallax-card__box p { color: var(--text); }
.parallax-card__box p:last-child { margin-bottom: 0; }
/* Variantes : fenêtre plus haute (pour héberger une section complète) + box plus large */
.parallax-card--tall { padding: clamp(5rem, 12vw, 9rem) 0; }
.parallax-card__box--wide { max-width: 1000px; padding: clamp(2.5rem, 5vw, 4rem); }
.parallax-card__box--wide ul { color: var(--text); }
.parallax-card__box--wide ul li { margin-bottom: .6rem; line-height: 1.55; }

/* Mobile : sur une parallax--tall avec image, on rend l'image visible AVANT le box
   (sinon l'image est tronquée et le box couvre tout) */
@media (max-width: 899px) {
  .parallax-card--tall {
    background-attachment: scroll;
    background-position: top center;
    padding-top: 15vw;                /* juste un peu d'image visible, sans trou */
  }
  .parallax-card--tall .parallax-card__box {
    margin-top: 0;
  }
}

/* Mobile : empilement image PUIS bloc blanc, au lieu de la superposition.
   Pour les parallax-card dont l'image dit quelque chose (le cabinet sur
   contact.html) — sinon le box opaque mange presque toute la photo.
   --band = hauteur de la bande image laissée visible. */
.parallax-card--stack-mobile {
  --band: clamp(220px, 55vw, 320px);
  /* Hauteur qu'occupe l'image une fois calée sur la largeur de l'écran :
     100vw × (hauteur ÷ largeur du fichier). contact-cabinet.webp = 1920 × 1419
     → 73.9vw. ⚠ à recalculer si on remplace l'image par une autre. */
  --img-h: 73.9vw;
}
@media (max-width: 899px) {
  .parallax-card--stack-mobile {
    display: block;
    background-attachment: scroll;
    background-size: 100% auto;
    background-repeat: no-repeat;
    /* On cale le BAS de la photo sur le bas de la bande : le matelas, la
       desserte et les fauteuils restent visibles, on ne coupe que le haut du mur. */
    background-position: center calc(var(--band) - var(--img-h));
    padding: var(--band) 0 0;
    min-height: 0 !important;   /* neutralise le min-height inline du desktop */
  }
  .parallax-card--stack-mobile .container { padding: 0; }
  .parallax-card--stack-mobile .parallax-card__box {
    background: var(--white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    max-width: none;
    margin: 0;
    padding: 2.2rem var(--gutter);
  }
  /* la légende revient au bas de la bande image, pas sur le bloc blanc */
  .parallax-card--stack-mobile .parallax-card__caption {
    top: calc(var(--band) - 2.4rem);
    bottom: auto;
  }
}

/* Tarifs en 2 colonnes — bascule en colonne unique sur mobile */
.tarifs-grid {
  display: grid;
  gap: 2rem;
  margin: 2rem auto;
  max-width: 820px;
  text-align: left;
}
@media (min-width: 720px) {
  .tarifs-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.tarifs-col h3 { margin-top: 0; }
.tarifs-col ul { padding-left: 1.5rem; margin: .8rem 0 0; }
.tarifs-col ul li { margin-bottom: .4rem; }
/* Phrase « budget » mise en évidence */
.tarifs-budget {
  background: var(--bg-hero-panel);
  border-left: 3px solid var(--plum);
  padding: 1.2rem 1.4rem;
  margin: 2.5rem auto 1rem;
  max-width: 720px;
  font-style: italic;
  color: var(--text);
  line-height: 1.55;
}

/* === Parallax avec texte (Tu as une question ?) === */
.parallax-text {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: clamp(360px, 44vw, 520px);
  display: flex;
  align-items: center;
}
@media (max-width: 900px) {
  .parallax-text { background-attachment: scroll; }
}
.parallax-text__scrim {
  position: absolute;
  inset: 0;
  background: rgba(36, 36, 37, .42);
}
.parallax-text__content {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  color: var(--white);
}
.parallax-text__content h2 { color: var(--white); }
.parallax-text__content p {
  color: rgba(255, 255, 255, .95);
  max-width: 560px;
  margin: 0 auto 1.8rem;
}

/* === ACCESSIBILITÉ === */
:focus-visible {
  outline: 2px solid var(--plum-cta);
  outline-offset: 3px;
}
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   MOBILE — Passe d'optimisation v2 (mai 2026)
   Lisibilité, dôme aplati, vignettes empilées, marges raisonnables
   ========================================================= */

@media (max-width: 900px) {

  /* --- Tailles de texte plus généreuses sur mobile --- */
  body { font-size: 17px; }
  h2 { font-size: 1.75rem; }   /* H2 légèrement plus grand pour bien le distinguer du H3 */
  h3 { font-size: 1.3rem; }    /* H3 un peu plus grand */
  p { font-size: 1.08rem; line-height: 1.65; }

  /* --- Eyebrow : restreindre la largeur pour qu'il reste dans la zone du dôme,
         tout en gardant 1 ou 2 lignes maximum (pas 3) --- */
  .eyebrow {
    max-width: 40ch;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
  }

  /* Boutons : plus de présence physique au toucher.
     Sur petits écrans (et navigateurs Android avec grandes polices), le texte peut
     être plus long que le conteneur. On autorise le wrap et on respecte la largeur. */
  .btn {
    font-size: 1.05rem;
    padding: 0.95rem 1.4rem;
    max-width: 100%;
    white-space: normal;
    text-wrap: balance;
    line-height: 1.25;
    text-align: center;
  }
  .btn-link {
    font-size: 1.05rem;
  }

  /* Burger toujours cliquable au-dessus du nav fermé */
  .nav-toggle {
    position: relative;
    z-index: 1001;
  }

  /* --- Dôme du panneau d'accueil et des panneaux d'intro ---
     Valeurs en pixels fixes pour la hauteur de l'arc, garantissant
     une forme identique sur toutes les pages quel que soit le contenu. */
  .hero__panel,
  .intro-panel {
    border-radius: 50% 50% 0 0 / 70px 70px 0 0;
    /* Élargir le panneau : pas de double gutter sur mobile */
    max-width: 100% !important;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
  .hero__panel { padding-top: 2.5rem; padding-bottom: 2rem; }
  .intro-panel { padding-top: 2.5rem; padding-bottom: 2rem; }

  /* Le container des panneaux à dôme : quasi bord à bord pour un arc plus large */
  .container:has(> .intro-panel),
  .container:has(> .hero__panel) {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  /* Largeur de texte dans les panneaux : laisser respirer */
  .intro-panel h2,
  .intro-panel h3,
  .intro-panel p { max-width: 100%; }

  /* --- Tool-row : garder le 2-col compact (image gauche, texte droite),
         mais aligner l'image en haut du texte plutôt que centrée --- */
  .tool-row,
  .tool-row:not(.tool-row--full) {
    align-items: flex-start;
  }
  .tool-row__body h3 { margin-top: 0; line-height: 1.2; }

  /* --- Parallax-card __box : moins de marges internes pour laisser le texte respirer --- */
  .parallax-card__box {
    padding: 1.8rem 1rem;
    background: rgba(255, 255, 255, 0.62);   /* plus transparent sur mobile */
  }
  .parallax-card__box ul {
    padding-left: 1.2rem !important;
  }
  /* Titre centré dans la carte parallaxe (ex. "Pourquoi je favorise le tutoiement") */
  .parallax-card__box h2 {
    text-align: center;
  }

  /* --- Listes à puces TOUJOURS alignées à gauche sur mobile,
         même à l'intérieur d'un bloc à texte centré (section-block__body, parallax-card__box, etc.) --- */
  ul, ol {
    text-align: left;
  }
  .section-block__body ul,
  .section-block__body ol,
  .parallax-card__box ul,
  .parallax-card__box ol,
  .intro-panel ul,
  .intro-panel ol,
  .prose-center ul,
  .prose-center ol {
    text-align: left;
    max-width: 36ch;        /* limite la largeur pour un retour à la ligne propre */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.2rem;
  }
  .section-block__body li,
  .parallax-card__box li,
  .intro-panel li,
  .prose-center li {
    text-align: left;
  }

  /* --- Section-block : aligner le bord du texte avec celui de l'image au-dessus --- */
  .section-block .container {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
  .section-block__body {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* --- Btn-link : meilleur wrap des lignes (texte équilibré) + espace au-dessus --- */
  .btn-link {
    text-wrap: balance;
    display: inline-block;
    margin-top: 0.8rem;
  }

  /* Espace entre la fin du texte et le btn-link dans les cartes — un peu d'air */
  .section-block__body .btn-link,
  .parallax-card__box .btn-link {
    margin-top: 1rem;
  }

  /* --- H1 hero un peu plus aéré --- */
  .hero__overlay h1,
  .page-hero__overlay h1 {
    line-height: 1.1;
  }

  /* --- Hero accueil : laisser de l'air entre le CTA/sous-CTA et le dôme blanc.
         Avec le hero plus haut (520-640px), on peut remettre un overlap plus marqué
         pour bien VOIR l'arc du dôme, sans recoller au SMS link. --- */
  .hero__panel,
  .intro-panel {
    margin-top: -11%;   /* sweet spot : arc bien visible, mais loin du SMS link */
  }

  /* --- Réduire les marges/paddings de section verticaux pour un site plus compact --- */
  .section { padding: 2.5rem 0; }
  .section-block { padding: 2rem 0; }

  /* Air entre un titre de section (.prose-center h2) et le bloc image qui suit
     (compense les paddings inline sur l'Accueil : "Mon accompagnement thérapeutique" → image) */
  .section + .section-block.section-block--first {
    padding-top: 1.5rem !important;
  }
  .section .prose-center h2 {
    margin-bottom: 0.6rem;
  }
}

/* Petit écran spécifique (téléphone portrait <500px) */
@media (max-width: 500px) {
  .hero__panel,
  .intro-panel {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .parallax-card__box {
    padding: 1.5rem 1rem;
  }
}


/* =========================================================
   LECTEUR AUDIO — méditations guidées
   Motif réutilisable : vignette + titre + description (.tool-row),
   puis une ligne à deux colonnes — lecteur à gauche, liens à droite.
   Lecteur natif du navigateur : bouton lecture explicite, pas d'iframe
   tierce, et preload="none" pour ne rien télécharger avant le clic.
   ========================================================= */
.audio-row {
  display: grid;
  gap: .9rem 1.8rem;
  align-items: end;
  margin-top: 1rem;
}
@media (min-width: 820px) {
  .audio-row { grid-template-columns: minmax(0, 1fr) auto; }
}
.audio-row__label {
  margin: 0 0 .45rem;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--plum);
}
.audio-player {
  display: block;
  width: 100%;
  height: 42px;
}
.audio-row__links {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  font-size: .95rem;
  white-space: nowrap;
}
.audio-row__hint {
  font-size: .85rem;
  color: var(--text-soft);
  margin-top: .8rem;
}

/* =========================================================
   MODALE LÉGÈRE (motif réutilisable)
   Ouverte par tout lien portant data-modal="id-de-la-modale".
   Le href reste une vraie page : sans JS, la navigation se fait
   normalement (fallback + SEO).
   ========================================================= */
.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: rgba(36, 36, 37, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.modal[data-open="true"] {
  opacity: 1;
  visibility: visible;
}
.modal__box {
  position: relative;
  background: var(--white);
  width: 100%;
  max-width: 620px;
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  box-shadow: 0 16px 40px rgba(36, 36, 37, .28);
  transform: translateY(14px);
  transition: transform .25s ease;
}
.modal[data-open="true"] .modal__box { transform: translateY(0); }
.modal__box h2 {
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  margin-bottom: 1rem;
  padding-right: 2.5rem;
}
.modal__box p { color: var(--text); }
.modal__box p:last-child { margin-bottom: 0; }
.modal__close {
  position: absolute;
  top: .7rem;
  right: .7rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--plum);
  font-size: 1.7rem;
  line-height: 1;
  border-radius: 50%;
  transition: background .2s ease, color .2s ease;
}
.modal__close:hover { background: var(--beige); color: var(--plum-cta-hover); }
.modal__close:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
.modal__more {
  margin-top: 1.6rem;
  font-size: .92rem;
  font-style: italic;
  color: var(--text-soft);
}
.modal__more a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.modal__more a:hover { color: var(--plum); }
body.modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .modal, .modal__box { transition: none; }
}

/* =========================================================
   MOBILE — Alignements de lecture
   Règle : sur mobile, tous les H2 sont CENTRÉS et tous les
   textes courants sont alignés à GAUCHE (y compris les
   paragraphes d'intro, qui étaient centrés jusqu'ici).
   Bloc placé en fin de feuille pour primer sur les règles
   d'alignement des media queries précédentes.
   ========================================================= */
@media (max-width: 900px) {

  /* --- Titres H2 : toujours centrés --- */
  .intro-panel h2,
  .section-block__body h2,
  .parallax-card__box h2,
  .prose-center h2,
  .prose-center--left h2,
  .section h2 {
    text-align: center;
  }

  /* --- Sur-titres (eyebrow) : centrés avec leur H2 --- */
  .intro-panel .eyebrow,
  .section-block__body .eyebrow,
  .parallax-card__box .eyebrow,
  .prose-center .eyebrow {
    text-align: center;
  }

  /* --- Textes courants : alignés à gauche ---
     SAUF sur l'accueil (body.home-page), où Tabea préfère
     que tout le texte reste centré. --- */
  body:not(.home-page) .intro-panel p:not(.eyebrow),
  body:not(.home-page) .section-block__body p:not(.eyebrow),
  body:not(.home-page) .parallax-card__box p:not(.eyebrow),
  body:not(.home-page) .prose-center p:not(.eyebrow) {
    text-align: left;
  }

  /* Les H3 suivent le texte, pas les H2 (ce sont des intertitres de liste) */
  body:not(.home-page) .prose-center h3 {
    text-align: left;
  }
}

/* =========================================================
   SÉPARATEUR SPIRALE
   ========================================================= */
.spiral-separator {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0.25rem 0;  /* très réduit : espacement minimal */
  margin: 0;
  box-sizing: border-box;
}

.spiral-separator__icon {
  width: 80px;
  height: auto;
  max-width: 100%;
  opacity: 0.9;
}

/* Spirale sur fond beige */
.spiral-separator--alt {
  background-color: var(--beige);
  padding: 0.25rem 0;
  margin: 0;
}

/* Spirale à l'intérieur d'un bandeau citation : respiration entre le texte et la spirale */
.quote > .spiral-separator {
  margin-top: 2.5rem;
  padding: 0;
}

@media (max-width: 900px) {
  .spiral-separator {
    padding: 0.125rem 0;
  }

  .spiral-separator--alt {
    padding: 0.125rem 0;
  }

  .spiral-separator__icon {
    width: 60px;
  }

  .quote > .spiral-separator {
    margin-top: 1.75rem;
  }
}