/* ==========================================================================
   Mégane Lemery Coaching — Design System
   Implémente DESIGN.md : couleurs, typographies, espacements, composants.
   Polices de marque (Tan Nightingale, Amsterdam Two, Marcellus, Quicksand)
   chargées en local depuis /assets/fonts si présentes ; sinon repli sur des
   polices systèmes proches, pour ne dépendre d'aucune ressource tierce.
   ========================================================================== */

/* ---- Polices de marque (auto-hébergées, fichiers fournis par Mégane) ---- */
@font-face {
  font-family: 'Tan Nightingale';
  src: url('../assets/fonts/TAN-NIGHTINGALE-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Amsterdam Two';
  src: url('../assets/fonts/amsterdam-two-ttf.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Marcellus';
  src: url('../assets/fonts/Marcellus-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Quicksand';
  src: url('../assets/fonts/Quicksand_Light.otf') format('opentype');
  font-weight: 300 700;
  font-display: swap;
}

/* ---- Design tokens (DESIGN.md §1,2,3) ---- */
:root {
  /* Couleurs de marque */
  --color-cream: #f7efe8;
  --color-cream-alt: #f6f1e9;
  --color-blush: #e7c6b6;
  --color-rose-mauve: #a8566a;
  --color-bordeaux: #771126;
  --color-bordeaux-deep: #5c0d1d;
  --color-brown-warm: #4a3f3a;
  /* Assombri le 2026-07-29 (#655441 → #5a4b3a) : le texte courant sur fond
     --color-cream passait déjà l'AA (6,37:1) mais restait borderline sur
     --color-blush (4,54:1, juste au-dessus du minimum WCAG de 4,5:1, donc
     fragile en usage réel). Nouvelle valeur à l'époque : 7,38:1 sur cream,
     5,26:1 sur blush.
     Réassombri le 2026-07-29 (#5a4b3a → #554737) : la valeur précédente
     dépassait déjà l'AA partout, mais restait jugée trop claire à la
     lecture (notamment en extérieur). 7,88:1 sur cream à l'époque.
     Réassombri une 3e fois le 2026-07-29 (#554737 → #332c29), à la
     demande explicite de prioriser la lisibilité maximale sur la
     cohérence stricte avec la palette : réutilise --color-brown-deep,
     déjà défini dans la charte mais jusque-là inutilisé, plutôt qu'une
     nouvelle couleur arbitraire. 12,05:1 sur cream, 12,18:1 sur cream-alt,
     8,58:1 sur blush — bien au-delà du seuil AAA partout. Ce ton est
     désormais plus foncé que --color-brown-warm (titres, 8,95:1) : la
     hiérarchie « titres plus foncés que le texte courant » qui prévalait
     jusqu'ici est donc inversée sur ce point précis — accepté sciemment
     ici, la consigne étant explicite (« même si cela s'éloigne des tons
     plus clairs utilisés jusqu'ici ») et --color-brown-warm reste
     inchangé pour ne pas toucher aux titres. */
  --color-brown-mid: #332c29;
  --color-brown-deep: #332c29;

  /* Familles de polices (avec repli système, aucune ressource externe) */
  --font-tan-nightingale: 'Tan Nightingale', Georgia, 'Times New Roman', serif;
  --font-marcellus: 'Marcellus', Georgia, 'Times New Roman', serif;
  --font-amsterdam-two: 'Amsterdam Two', 'Brush Script MT', cursive;
  --font-quicksand: 'Quicksand', 'Trebuchet MS', Verdana, sans-serif;

  /* Échelle typographique */
  --text-eyebrow: 0.8125rem;
  --text-caption: 0.875rem;
  --text-body: 1rem;
  --text-body-lg: 1.125rem;
  --text-button: 1rem;
  --text-heading-sm: 1.375rem;
  --text-heading: 2rem;
  --text-display: 3.5rem;
  --text-script: 2.5rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Espacements */
  --spacing-4: 0.25rem;
  --spacing-8: 0.5rem;
  --spacing-12: 0.75rem;
  --spacing-16: 1rem;
  --spacing-24: 1.5rem;
  --spacing-32: 2rem;
  --spacing-40: 2.5rem;
  --spacing-48: 3rem;
  --spacing-64: 4rem;
  --spacing-80: 5rem;
  --spacing-96: 6rem;
  --spacing-120: 7.5rem;

  /* Mise en page */
  --page-max-width: 1200px;
  /* Espacement entre les sections — point de réglage unique pour tout le site
     (voir .section / .section--tight). Réduit de 50% (2026-07-28) :
     4.5rem→2.25rem et 3rem→1.5rem, pour resserrer davantage les pages. */
  --section-gap: 2.25rem;
  --section-gap-mobile: 1.5rem;
  --section-gap-tight: 1.5rem;
  --section-gap-tight-mobile: 1rem;
  --card-padding: var(--spacing-32);

  /* Rayons */
  --radius-button: 9999px;
  --radius-badge: 9999px;
  --radius-input: 9999px;
  --radius-textarea: 16px;
  --radius-card: 20px;
  --radius-image: 20px;

  /* Ombre — usage restreint (carte tarifaire + nav sticky uniquement) */
  --shadow-soft: 0 8px 24px rgba(74, 63, 58, 0.08);
  --shadow-nav: 0 4px 20px rgba(74, 63, 58, 0.06);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; }

/* ---- Base ---- */
body {
  font-family: var(--font-quicksand);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-brown-mid);
  background-color: var(--color-cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  color: var(--color-brown-warm);
  font-weight: var(--font-weight-regular);
}

/* La police Tan Nightingale a un dessin très dense (empattements larges,
   crénage serré) qui fait paraître certaines paires de lettres collées
   (ex. "Pi" dans "Pilates", "Co" dans "Coaching") — vérifié : ce n'est pas
   un bug (police valide, pas de texte dupliqué dans le DOM), c'est le
   dessin de la police elle-même. `font-kerning: none` ne change rien
   (testé) ; seul un `letter-spacing` plus généreux aère visiblement les
   lettres. 0.105em est la valeur MAXIMALE commune à tous les H1 du site
   sans faire basculer un titre sur une ligne supplémentaire — le H1 de
   l'accueil ("Révélez votre force intérieure, en douceur") est le plus
   contraignant : il repasse à 4 lignes dès 0.11em. Au-delà, il faudrait
   accepter une accroche plus haute sur l'accueil pour aller plus loin. */
h1 {
  font-family: var(--font-tan-nightingale);
  font-size: var(--text-display);
  line-height: 1.08;
  letter-spacing: 0.105em;
  /* Filet de sécurité : certains mots du site sont longs et insécables
     (« accompagnement », « intérieure »). Sans cela, ils dépassaient la largeur
     de l'écran sur téléphone et provoquaient un défilement horizontal.
     `overflow-wrap` seul suffit (vérifié) — `hyphens: auto` a été retiré : il
     coupait des mots courants avec des tirets de césure visibles et inutiles
     (« ren-forcer », « profon-deur ») dès que le titre était un peu large. */
  overflow-wrap: break-word;
}

/* Titre principal des pages intérieures. Auparavant répété en style inline sur
   chaque page (donc impossible à adapter au mobile : un style inline l'emporte
   sur toute règle de media query). */
.page-title { font-size: 2.75rem; }

/* Échelle typographique mobile : redéfinit les tokens --text-* eux-mêmes
   (plutôt que chaque sélecteur un par un) pour que la réduction se
   propage automatiquement à tout ce qui les consomme (titres, boutons,
   légendes, texte courant...) sans toucher aux pages individuellement.
   --text-caption (14px) n'est pas touché : c'est déjà le plancher de
   lisibilité mobile visé pour le texte courant, --text-body (16px) est
   donc ramené à 15px plutôt que plus bas. Desktop/tablette (>700px)
   inchangés. */
@media (max-width: 700px) {
  :root {
    --text-eyebrow: 0.75rem;
    --text-body: 0.9375rem;
    --text-body-lg: 1.0625rem;
    --text-button: 0.9375rem;
    --text-heading-sm: 1.25rem;
    --text-heading: 1.75rem;
  }
  h1 { font-size: 2rem; }
  .page-title { font-size: 1.8rem; }
  .page-hero__kicker { font-size: 1.125rem; }
}
@media (max-width: 400px) {
  h1 { font-size: 1.7rem; }
  .page-title { font-size: 1.55rem; }
}
h2 { font-family: var(--font-marcellus); font-size: var(--text-heading); line-height: 1.2; }
h3 { font-family: var(--font-marcellus); font-size: var(--text-heading-sm); line-height: 1.3; }

p { max-width: 65ch; }
p.lead { font-size: var(--text-body-lg); }

.script-accent {
  font-family: var(--font-amsterdam-two);
  font-weight: 400;
  color: var(--color-bordeaux);
}

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-24);
}

.section {
  padding-block: var(--section-gap);
}
.section--tight { padding-block: var(--section-gap-tight); }
.section--cream-alt { background-color: var(--color-cream-alt); }
.section--blush { background-color: var(--color-blush); }
@media (max-width: 900px) {
  .section { padding-block: var(--section-gap-mobile); }
  .section--tight { padding-block: var(--section-gap-tight-mobile); }
}

.section-head {
  max-width: 700px;
  margin-bottom: var(--spacing-48);
}
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-quicksand);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-bordeaux);
  margin-bottom: var(--spacing-12);
}

.section-head p { color: var(--color-brown-mid); margin-top: var(--spacing-16); }
.section-head--center p { margin-inline: auto; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  font-family: var(--font-quicksand);
  font-size: var(--text-button);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  border-radius: var(--radius-button);
  padding: 1rem 2rem;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }

.btn--primary {
  background-color: var(--color-bordeaux);
  color: var(--color-cream);
}
.btn--primary:hover { background-color: var(--color-bordeaux-deep); }

.btn--outline {
  background-color: transparent;
  color: var(--color-bordeaux);
  border: 1.5px solid var(--color-rose-mauve);
}
.btn--outline:hover { background-color: var(--color-rose-mauve); color: var(--color-cream); }

.btn--on-dark {
  background-color: var(--color-cream);
  color: var(--color-bordeaux);
}
.btn--on-dark:hover { background-color: var(--color-blush); }

.btn--sm { padding: 0.75rem 1.5rem; font-size: var(--text-caption); }

/* CTA du hero de l'accueil uniquement — texte un peu serré dans le padding
   `.btn` par défaut à cet endroit précis ; les autres boutons du site
   (Pilates, Gym maternité, Coaching privé, Contact, À propos...) gardent
   leur padding actuel, inchangé. */
.btn--hero { padding: 1.15rem 2.5rem; }

.text-link {
  font-family: var(--font-quicksand);
  font-weight: var(--font-weight-medium);
  color: var(--color-bordeaux);
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: border-color 0.2s ease;
}
.text-link:hover { border-bottom-color: var(--color-bordeaux); }

/* ---- Liens contextuels dans le texte courant ----
   Un <a> simple hérite de la couleur du texte et n'a pas de soulignement
   (cf. reset `a { color: inherit; text-decoration: none; }` plus haut) :
   invisible comme lien au milieu d'une phrase. Cette classe le rend
   identifiable au repos (gras + couleur + soulignement), pas seulement
   au survol. */
.link-inline {
  color: var(--color-bordeaux);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-rose-mauve);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
.link-inline:hover,
.link-inline:focus-visible { text-decoration-color: var(--color-bordeaux); }

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-quicksand);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-bordeaux);
  background-color: var(--color-blush);
  border-radius: var(--radius-badge);
  padding: 0.4rem 0.9rem;
}

/* ---- Header / Navigation ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-cream);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-nav);
  border-bottom-color: rgba(74, 63, 58, 0.06);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--spacing-24);
  gap: var(--spacing-24);
}

.nav__logo {
  font-family: var(--font-tan-nightingale);
  font-size: 1.5rem;
  color: var(--color-bordeaux);
  letter-spacing: 0.01em;
}
.nav__logo span { font-family: var(--font-amsterdam-two); color: var(--color-rose-mauve); }
.nav__logo-img { height: var(--spacing-64); width: auto; display: block; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--spacing-32);
}
.nav__links a {
  font-family: var(--font-quicksand);
  font-weight: var(--font-weight-medium);
  font-size: 0.9375rem;
  color: var(--color-brown-warm);
  position: relative;
  padding-block: var(--spacing-4);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background-color: var(--color-bordeaux);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--color-bordeaux); }

.nav__actions { display: flex; align-items: center; gap: var(--spacing-16); }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--spacing-8);
}
.nav__toggle span {
  width: 22px; height: 2px;
  background-color: var(--color-brown-warm);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Le bouton ne changeait jamais d'apparence à l'ouverture : rien ne signalait
   visuellement qu'un second clic referme le menu (seul `aria-expanded`
   changeait, invisible pour un utilisateur voyant). Les 3 barres deviennent
   un « X ». */
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav__links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background-color: var(--color-cream);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-24);
    gap: var(--spacing-20);
    box-shadow: var(--shadow-nav);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__toggle { display: flex; }
  .nav__actions .btn span.btn-full-label { display: none; }
}

/* ---- Hero ---- */
/* Accueil uniquement — enveloppe pleine largeur pour le fond animé
   "mesh gradient" : le fond déborde du conteneur centré (.hero), pour un
   effet d'ambiance plutôt qu'un encadré. Validé en aperçu le 2026-07-29. */
.hero-mesh-wrap { position: relative; overflow: hidden; isolation: isolate; }
.hero__mesh { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mesh-blob { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.mesh-blob--1 {
  width: 480px; height: 480px;
  top: -140px; left: -100px;
  background: var(--color-blush);
  opacity: 0.55;
  animation: mesh-drift-a 26s ease-in-out infinite;
}
.mesh-blob--2 {
  width: 420px; height: 420px;
  top: 30%; right: -120px;
  background: var(--color-rose-mauve);
  opacity: 0.32;
  animation: mesh-drift-b 32s ease-in-out infinite;
}
.mesh-blob--3 {
  width: 380px; height: 380px;
  bottom: -160px; left: 22%;
  background: var(--color-bordeaux);
  opacity: 0.13;
  animation: mesh-drift-c 22s ease-in-out infinite;
}
.mesh-blob--4 {
  width: 340px; height: 340px;
  top: 4%; left: 42%;
  background: var(--color-cream-alt);
  opacity: 0.6;
  animation: mesh-drift-a 30s ease-in-out infinite reverse;
}
@keyframes mesh-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.12); }
}
@keyframes mesh-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-55px, -50px) scale(0.9); }
}
@keyframes mesh-drift-c {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(45px, -35px) scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .mesh-blob { animation: none; }
}

.hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--spacing-48);
  padding-block: var(--spacing-32) var(--spacing-48);
}
.hero__content h1 { margin-bottom: var(--spacing-24); }
.hero__content p.lead { margin-bottom: var(--spacing-32); color: var(--color-brown-mid); }
.hero__visual { position: relative; max-width: 75%; margin-inline: auto; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-block: var(--spacing-16) var(--spacing-24); }
  /* Le texte (titre + CTA) reste avant la photo dans l'ordre du DOM, pour
     rester visible dès le premier écran mobile sans scroll. */
  .hero__visual { max-width: 60%; }
}

/* Page hero simple (pages intérieures) */
.page-hero {
  padding-block: var(--spacing-32) var(--spacing-24);
  max-width: 760px;
}
.page-hero .eyebrow { margin-bottom: var(--spacing-16); }
.page-hero p.lead { margin-top: var(--spacing-20); }

/* Variante Contact uniquement — ne modifie pas .page-hero utilisé sur FAQ,
   Coaching privé, Mentions légales et Politique de confidentialité. */
.page-hero--contact { max-width: 1000px; }
.page-hero--contact h1 { font-size: 2.6rem; }
.page-hero--contact p.lead { margin-top: var(--spacing-32); }
/* Pas de `white-space: nowrap` ici : combiné à la largeur de ce titre et au
   letter-spacing global des H1, il le faisait déborder de sa colonne sur les
   largeurs de bureau intermédiaires (~950–1150px). On laisse le titre se
   réenrouler, en équilibrant les lignes quand le navigateur le permet. */
.page-hero--contact h1 { text-wrap: balance; }
/* « accompagnement » est un mot long et insécable : à 2,6rem il dépasse la
   largeur d'un écran de téléphone et provoquait un défilement horizontal.
   La taille est donc réduite en dessous de 600px. */
@media (max-width: 600px) {
  .page-hero--contact h1 { font-size: 1.55rem; }
}

/* Variante FAQ uniquement — .page-hero p.lead (base) utilise --spacing-20,
   un token qui n'existe pas dans :root ; on corrige ici sans toucher la
   règle de base partagée avec Coaching privé. */
.page-hero--faq p.lead { margin-top: var(--spacing-16); }

/* Variante Coaching privé uniquement — même correctif que FAQ ci-dessus
   (le --spacing-20 de la règle de base n'existe pas) : on aligne l'espace
   H1→intro sur celui utilisé par Pilates et Gym maternité (spacing-24). */
.page-hero--coaching .page-hero__kicker { margin-top: var(--spacing-24); }
.page-hero--coaching p.lead { margin-top: var(--spacing-12); }

/* "Chapeau" : courte phrase chaleureuse entre le H1 et le paragraphe
   descriptif. Distinct du texte courant par la police (Marcellus, comme
   les titres), l'italique et la couleur d'accent bordeaux — plus grand
   que le corps de texte mais nettement plus discret que le H1. */
.page-hero__kicker {
  font-family: var(--font-marcellus);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--color-bordeaux);
}
.page-hero--faq { padding-bottom: var(--spacing-8); }

/* FAQ uniquement — rapproche les onglets/catégories du texte d'intro,
   et rapproche le bloc "Une autre question ?" de la dernière réponse,
   sans modifier .section--tight utilisé ailleurs sur le site. */
.faq-section--list { padding-top: var(--spacing-24); padding-bottom: var(--spacing-32); }
.faq-cta--tight { padding-top: var(--spacing-24); }

/* ---- Placeholder imagery (aucune photo tierce — à remplacer par les
   photos de Mégane) ---- */
.ph-image {
  position: relative;
  border-radius: var(--radius-image);
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 15% 10%, rgba(247,239,232,0.9), transparent 55%),
    linear-gradient(155deg, var(--color-blush) 0%, var(--color-rose-mauve) 55%, var(--color-bordeaux) 130%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}
.ph-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,0.35) 0, transparent 40%),
    radial-gradient(circle at 80% 75%, rgba(51,44,41,0.18) 0, transparent 45%);
}
.ph-image__mark {
  position: relative;
  font-family: var(--font-amsterdam-two);
  font-size: 2.75rem;
  color: rgba(247, 239, 232, 0.85);
}
.ph-image--hero { aspect-ratio: 4 / 5; }
.ph-image--wide { aspect-ratio: 16 / 9; }
.ph-image--square { aspect-ratio: 1 / 1; }

/* ---- Real photography (replaces .ph-image once photos are supplied) ---- */
.photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-image);
}
.photo--hero { aspect-ratio: 4 / 5; }
.photo--wide { aspect-ratio: 16 / 9; }
.photo--square { aspect-ratio: 1 / 1; }

/* ---- Presentation / Text blocks ---- */
.prose { max-width: 720px; }
.prose p { margin-bottom: var(--spacing-20); color: var(--color-brown-warm); }
.prose p:last-child { margin-bottom: 0; }
.prose em { font-style: italic; color: var(--color-brown-warm); }

/* Encart mis en valeur, même traitement visuel que .credential-banner
   (bordure légère, fond cream-alt) mais en pleine largeur du texte pour
   accueillir un titre + un paragraphe plutôt qu'une ligne unique. */
.philosophy-block {
  margin-top: var(--spacing-32);
  padding: var(--spacing-32);
  border: 1px solid var(--color-blush);
  border-radius: var(--radius-card);
  background-color: var(--color-cream-alt);
}
.philosophy-block h2 { margin-bottom: var(--spacing-16); text-align: center; }
.philosophy-block p { margin: 0; color: var(--color-brown-warm); }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-64);
  align-items: center;
}
.two-col--reverse .ph-image,
.two-col--reverse .photo,
.two-col--reverse .about-photo-col { order: 2; }

/* Taille fixe en dur pour la photo de la page À propos, plutôt qu'un
   pourcentage/ratio de colonne — reste stable quel que soit le contenu
   de la colonne voisine. */
.about-photo-col img.about-photo {
  width: 320px;
  height: auto;
  object-fit: contain;
}

@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; gap: var(--spacing-32); }
  .two-col--reverse .ph-image,
  .two-col--reverse .photo,
  .two-col--reverse .about-photo-col { order: -1; }
  .about-photo-col img.about-photo {
    width: 80%;
    max-width: 320px;
  }
}

/* Photo cerceau aérien (section présentation) : seule image du site à
   porter une ombre, demandée explicitement pour la détacher du bloc de
   texte voisin sur fond crème. */
.about-cerceau-photo { box-shadow: var(--shadow-soft); }

/* Modifie uniquement ce .two-col : colonne photo ~38% / texte ~62%,
   plutôt que le partage 50/50 par défaut, sans affecter les autres
   usages de .two-col (ex. section Diplômes). */
.about-cerceau-layout { grid-template-columns: minmax(0, 38%) 1fr; }
@media (max-width: 900px) {
  .about-cerceau-layout { grid-template-columns: 1fr; }
}

/* ---- Service cards ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-32);
}
@media (max-width: 900px) { .card-grid { grid-template-columns: 1fr; } }

.service-card {
  background-color: var(--color-cream-alt);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.service-card__image { border-radius: 0; aspect-ratio: 4 / 3; }

/* Pilates et Gym maternité uniquement — illustrations affichées en entier
   (contain) avec un fond assorti à la carte, pour éviter tout recadrage qui
   coupe le sujet ; Coaching privé reste inchangé (cover). */
.service-card__image--contain {
  object-fit: contain;
  background-color: var(--color-cream-alt);
  padding: var(--spacing-24);
}
.service-card__body { padding: var(--spacing-32); display: flex; flex-direction: column; gap: var(--spacing-12); flex: 1; }
.service-card__body h3 { margin: 0; }
.service-card__body p { color: var(--color-brown-mid); font-size: var(--text-body); flex: 1; }
.service-card__body .text-link { align-self: flex-start; margin-top: var(--spacing-8); }

/* ---- Testimonials ---- */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-32);
}
@media (max-width: 900px) { .quote-grid { grid-template-columns: 1fr; } }

.quote-card {
  background-color: var(--color-blush);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}
.quote-card blockquote {
  font-family: var(--font-marcellus);
  font-style: italic;
  font-size: var(--text-heading-sm);
  line-height: 1.5;
  color: var(--color-brown-warm);
}
.quote-card cite {
  font-family: var(--font-quicksand);
  font-style: normal;
  font-size: var(--text-caption);
  color: var(--color-brown-warm);
}
.quote-card cite::before { content: '— '; color: var(--color-bordeaux); }

/* Coaching privé uniquement — icône ronde rose poudré au-dessus du titre de
   chaque objectif ("Des objectifs sur mesure"). Les images sources sont des
   icônes blanches à fond transparent, d'où le fond coloré nécessaire pour
   qu'elles restent visibles sur les cartes crème. */
.objective-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-rose-mauve);
  flex-shrink: 0;
}
.objective-icon img { width: 30px; height: 30px; display: block; }

/* Les 5 objectifs étaient des <strong> : ils ne figuraient donc pas dans la
   navigation par titres (lecteurs d'écran) ni dans la structure lue par les
   moteurs de recherche. Passés en h3, ils gardent ici l'apparence d'origine. */
.objective-title {
  font-family: var(--font-quicksand);
  font-size: var(--text-body);
  font-weight: var(--font-weight-bold);
  line-height: 1.6;
  color: var(--color-brown-warm);
  margin: 0;
}

/* Carte "objectif" : la section est déjà en --color-cream-alt, donc un
   fond de carte dans le même ton ne se détacherait pas assez (testé : à
   peine visible, seule l'ombre marquait la carte). --color-blush est le
   fond par défaut de .quote-card ailleurs sur le site (témoignages,
   carte tarifaire "populaire") — on le réutilise ici plutôt qu'une
   nouvelle couleur, pour un contraste net tout en restant dans la charte.
   + --shadow-soft pour le relief. Remplace le fond inline (--color-cream,
   quasi identique au fond de la section) qui rendait les cartes plates.
   Icône et titre centrés via align-self — le paragraphe reste étiré en
   pleine largeur (stretch, hérité de .quote-card) pour ne pas rétrécir le
   texte courant en un bloc étroit centré. */
.objective-card {
  background-color: var(--color-blush);
  box-shadow: var(--shadow-soft);
}
.objective-card .objective-icon,
.objective-card .objective-title {
  align-self: center;
  text-align: center;
}
.objective-card p { text-align: center; }

/* Gym maternité uniquement — cartes "Deux parcours" rendues cliquables,
   dépliant un panneau de contenu détaillé en pleine largeur sous la grille.
   Reste dans la continuité de la page (pas de sous-page, pas de nouvel
   onglet de navigation). Hauteur du panneau non figée en pixels (technique
   grid-template-rows 0fr/1fr) : s'adapte à n'importe quelle longueur de
   texte ou largeur d'écran, comme pour le rotateur de témoignages. */
.detail-card__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-16);
  background: none;
  border: none;
  padding: 0 0 3px;
  cursor: pointer;
  font-family: var(--font-quicksand);
  font-weight: var(--font-weight-medium);
  color: var(--color-bordeaux);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.detail-card__trigger:hover, .detail-card__trigger:focus-visible { border-bottom-color: var(--color-bordeaux); }
.detail-card__arrow {
  color: var(--color-rose-mauve);
  font-size: 1.1em;
  line-height: 1;
  transition: transform 0.3s ease, color 0.3s ease;
}
.detail-card__trigger[aria-expanded="true"] .detail-card__arrow { transform: rotate(90deg); color: var(--color-bordeaux); }

.detail-panel-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease, margin-top 0.4s ease;
  margin-top: 0;
}
.detail-panel-wrapper.is-open { grid-template-rows: 1fr; margin-top: var(--spacing-48); }
.detail-panel-inner { overflow: hidden; min-height: 0; }

/* Mise en page 2 colonnes des sous-sections détaillées : texte à gauche
   (~53%), photo à droite (~47%), alignées en haut. `.detail-layout--reverse`
   inverse l'ordre (photo à gauche) pour alterner visuellement entre
   Prénatal et Postnatal. Repli 1 colonne (photo au-dessus) sous 900px.
   Le texte est scindé en deux blocs : `__text-top` (à côté de la photo,
   dimensionné pour occuper à peu près la même hauteur qu'elle) et
   `__text-bottom` (une fois la photo terminée, repasse sur toute la
   largeur du bloc, réparti en 2 colonnes pour éviter l'effet "pleine
   largeur déséquilibrée"). `__extra` (encart + CTA) reste pleine largeur. */
.detail-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--spacing-32) var(--spacing-64);
  align-items: start;
}
.detail-layout__text-top { order: 1; }
.detail-layout__media { order: 2; }
.detail-layout--reverse .detail-layout__text-top { order: 2; }
.detail-layout--reverse .detail-layout__media { order: 1; }
.detail-layout__media img { width: 100%; height: auto; display: block; }

.detail-layout__text-bottom {
  grid-column: 1 / -1;
  order: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-32) var(--spacing-64);
}
.detail-layout__text-bottom.prose,
.detail-layout__extra.prose { max-width: none; }
.detail-layout__extra { grid-column: 1 / -1; order: 4; }

@media (max-width: 900px) {
  .detail-layout { grid-template-columns: 1fr; gap: var(--spacing-32); }
  .detail-layout__media,
  .detail-layout--reverse .detail-layout__media { order: -1; }
  .detail-layout__text-top,
  .detail-layout--reverse .detail-layout__text-top { order: 0; }
  .detail-layout__text-bottom { grid-template-columns: 1fr; gap: var(--spacing-32) 0; order: 1; }
  .detail-layout__extra { order: 2; }
}

.detail-content h4 {
  font-family: var(--font-quicksand);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-body-lg);
  color: var(--color-brown-warm);
  margin-top: var(--spacing-32);
  margin-bottom: var(--spacing-12);
}
.detail-content h4:first-child { margin-top: 0; }
.detail-content .icon-list { margin-bottom: var(--spacing-20); }
.detail-content__note {
  background-color: var(--color-cream);
  border-radius: var(--radius-card);
  padding: var(--spacing-24);
  margin-top: var(--spacing-32);
}
.detail-content__note h4 { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .detail-panel-wrapper { transition: none; }
  .detail-card__arrow { transition: none; }
}

/* Accueil uniquement — alternance des témoignages (remplace la grille
   statique par un affichage un à la fois, structure inspirée d'un
   composant tiers, réimplémentée en vanilla JS/CSS). Rendue plus compacte
   (padding, taille de police, hauteur de section) pour ne plus dominer
   visuellement la page d'accueil. */
.section--testimonials { padding-block: var(--spacing-12); }
.section--testimonials .section-head { margin-bottom: var(--spacing-16); }

.quote-rotator { max-width: 760px; margin-inline: auto; }
/* Grille à cellule unique : tous les témoignages se superposent dans la même
   case, et la hauteur de la rangée s'ajuste automatiquement au plus grand
   d'entre eux, à n'importe quelle largeur d'écran (aucune hauteur fixée en
   pixels, donc pas de texte tronqué sur mobile où les lignes sont plus
   nombreuses). */
.quote-rotator__track { display: grid; }
.quote-rotator__item {
  grid-area: 1 / 1;
  background-color: var(--color-blush);
  border-radius: var(--radius-card);
  padding: var(--spacing-24);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.quote-rotator__item.is-active { opacity: 1; transform: translateX(0); pointer-events: auto; }
.quote-rotator__item blockquote {
  font-family: var(--font-marcellus);
  font-style: italic;
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: var(--color-brown-warm);
}
.quote-rotator__item cite {
  font-family: var(--font-quicksand);
  font-style: normal;
  font-size: var(--text-caption);
  color: var(--color-brown-warm);
}
.quote-rotator__item cite::before { content: '— '; color: var(--color-bordeaux); }
.quote-rotator__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-4);
}
.quote-rotator__dots { display: flex; align-items: center; justify-content: center; }
/* Le point visible reste discret (10px) mais la zone cliquable fait 44x44,
   la cible tactile minimale recommandée : à 10px, viser juste au pouce sur un
   petit écran était difficile. */
.quote-rotator__dot {
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.quote-rotator__dot > span {
  display: block;
  height: 10px;
  width: 10px;
  border-radius: var(--radius-badge);
  background-color: var(--color-rose-mauve);
  opacity: 0.4;
  transition: width 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}
.quote-rotator__dot.is-active > span { width: 32px; opacity: 1; background-color: var(--color-bordeaux); }

/* Contrôle pause : le carrousel défile seul toutes les 6 s. Sans moyen de
   l'arrêter, c'est un obstacle pour qui lit lentement (WCAG 2.2.2). */
.quote-rotator__pause {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 50%;
  color: var(--color-bordeaux);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.quote-rotator__pause:hover { background-color: var(--color-cream); }
.quote-rotator__pause .quote-rotator__icon-play { display: none; }
.quote-rotator__pause[aria-pressed="true"] .quote-rotator__icon-pause { display: none; }
.quote-rotator__pause[aria-pressed="true"] .quote-rotator__icon-play { display: block; }
@media (prefers-reduced-motion: reduce) {
  .quote-rotator__item { transition: opacity 0.3s ease; transform: none; }
}

.quote-single {
  background-color: var(--color-blush);
  border-radius: var(--radius-card);
  padding: var(--spacing-48);
  max-width: 760px;
}
.quote-single blockquote {
  font-family: var(--font-marcellus);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--color-brown-warm);
  margin-bottom: var(--spacing-16);
}
.quote-single cite {
  font-family: var(--font-quicksand);
  font-style: normal;
  font-size: var(--text-caption);
  color: var(--color-brown-warm);
}
.quote-single cite::before { content: '— '; color: var(--color-bordeaux); }

/* ---- Icon lists ---- */
.icon-list { display: flex; flex-direction: column; gap: var(--spacing-16); }
.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  color: var(--color-brown-mid);
}
.icon-list .icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin-top: 2px;
  color: var(--color-rose-mauve);
}
.icon-list strong { color: var(--color-brown-warm); font-weight: var(--font-weight-semibold); }

.icon-list--cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-16) var(--spacing-32); }
@media (max-width: 700px) { .icon-list--cols-2 { grid-template-columns: 1fr; } }

/* Coaching privé uniquement — grille des objectifs&nbsp;: 3 cartes par ligne,
   la dernière ligne incomplète se centre automatiquement (flexbox + largeur
   figée), quel que soit le nombre de cartes.
   Avant : grille à 6 pistes avec des sélecteurs nth-child(4)/(5) codés en dur
   pour centrer la 2e ligne — ne fonctionnait que pour exactement 5 cartes et
   se cassait silencieusement dès qu'une 6e était ajoutée ou qu'une était
   retirée. Le flexbox ci-dessous n'a aucune hypothèse sur le nombre d'enfants. */
.objectives-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-32); }
.objectives-grid > .quote-card { flex: 1 1 calc(33.333% - var(--spacing-32) * 2 / 3); min-width: 220px; }
@media (max-width: 900px) {
  .objectives-grid > .quote-card { flex-basis: calc(50% - var(--spacing-32) / 2); }
}
@media (max-width: 700px) {
  .objectives-grid > .quote-card { flex-basis: 100%; }
}

/* Pilates uniquement — bienfaits scindés en 2 colonnes (pendant / sur le
   long terme), séparées par une ligne verticale fine. Repli 1 colonne avec
   ligne horizontale sous 900px. */
.split-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-48) var(--spacing-64); }
/* Le titre était trop collé à la liste juste en dessous (20px, à peine plus
   que l'écart entre deux puces de la liste elle-même) — remonté à 32px,
   environ un saut de ligne de plus, pour que le titre respire visuellement
   avant son contenu. Règle unique pour les 2 blocs ("Pendant chaque séance"
   et "Sur le long terme"), qui partagent la même structure. */
.split-list h3 { margin-bottom: var(--spacing-32); }
.split-list > div:last-child { position: relative; }
.split-list > div:last-child::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--spacing-32) * -1);
  width: 1px;
  background-color: var(--color-blush);
}
@media (max-width: 900px) {
  .split-list { grid-template-columns: 1fr; gap: var(--spacing-32); }
  .split-list > div:last-child::before { display: none; }
  .split-list > div:last-child { border-top: 1px solid var(--color-blush); padding-top: var(--spacing-32); }
}

.numbered-list { display: flex; flex-direction: column; gap: var(--spacing-32); counter-reset: step; position: relative; }
.numbered-list li {
  display: flex;
  gap: var(--spacing-24);
  align-items: flex-start;
  background-color: var(--color-cream);
  border-radius: var(--radius-card);
  padding: var(--spacing-24);
  box-shadow: var(--shadow-soft);
  position: relative;
  z-index: 1;
}
.numbered-list li::before {
  counter-increment: step;
  content: counter(step);
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--color-bordeaux);
  color: var(--color-cream);
  font-family: var(--font-marcellus);
  border-radius: 50%;
}
/* h3 (et non h4) : la section parente est un h2, un h4 sautait un niveau. */
.numbered-list h3 { font-family: var(--font-quicksand); font-size: var(--text-body); font-weight: var(--font-weight-semibold); line-height: 1.6; color: var(--color-brown-warm); margin-bottom: var(--spacing-4); }
/* Pas de visuel en vis-à-vis dans cette section : on laisse le texte
   utiliser la largeur disponible plutôt que la limite de lecture (65ch)
   pensée pour du texte pleine largeur isolé. */
.numbered-list p { color: var(--color-brown-mid); max-width: none; }

/* Frise chronologique : ligne verticale reliant les puces entre elles,
   dans les interstices entre les cartes (elle passe derrière chaque carte,
   donc invisible à l'intérieur — seuls les segments dans les espaces entre
   cartes sont visibles). 44px = padding de carte (24px) + moitié du cercle
   numéroté (20px), pour centrer la ligne sous chaque numéro. */
.numbered-list::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 44px;
  width: 2px;
  background-color: var(--color-blush);
  z-index: 0;
}

/* Desktop uniquement : grille 2 colonnes plutôt qu'une colonne unique.
   Répartition en deux "demi-frises" indépendantes (étapes 1-3 à gauche,
   4-5 à droite, via grid-auto-flow: column) plutôt qu'un remplissage
   ligne par ligne (1-2 / 3-4 / 5) — chaque colonne garde ainsi sa propre
   ligne de connexion cohérente, sans segment qui traverserait dans le
   vide à côté de la 5e étape. */
@media (min-width: 900px) {
  .numbered-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: var(--spacing-32) var(--spacing-64);
  }
  /* Deux lignes indépendantes, une par colonne, positionnées via les lignes
     de grille elles-mêmes (grid-column/grid-row) plutôt qu'un calc() sur un
     pourcentage — chacune s'arrête exactement à la dernière carte de sa
     colonne, quelle que soit la hauteur du contenu. ::before reprend la
     ligne mobile pour la colonne 1 (étapes 1-3) ; ::after est dédié à la
     colonne 2 (étapes 4-5, seulement 2 lignes de grille). */
  .numbered-list::before { grid-column: 1; grid-row: 1 / 4; }
  .numbered-list::after {
    content: '';
    position: absolute;
    grid-column: 2;
    grid-row: 1 / 3;
    top: 0;
    bottom: 0;
    left: 44px;
    width: 2px;
    background-color: var(--color-blush);
    z-index: 0;
  }
}

/* ---- Pricing ---- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-32);
}
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
/* Repli progressif (3 → 2 → 1), comme .pricing-grid--4 juste en dessous —
   avant, cette grille passait directement de 3 colonnes à 1 sans palier
   intermédiaire, contrairement à sa voisine. En flexbox plutôt qu'en grid
   pour ce palier à 2 : avec 3 cartes, une grid à 2 colonnes laisserait la 3e
   seule et alignée à gauche ; le flexbox centre naturellement la ligne
   incomplète. */
.pricing-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) {
  .pricing-grid--3 { display: flex; flex-wrap: wrap; justify-content: center; }
  .pricing-grid--3 > .pricing-card { flex: 1 1 calc(50% - var(--spacing-32) / 2); min-width: 260px; }
}
@media (max-width: 640px) {
  .pricing-grid--3 > .pricing-card { flex-basis: 100%; }
}

/* Gym maternité uniquement — 4 formules sur une seule ligne en desktop,
   avec un repli progressif (2 colonnes en tablette, 1 colonne en mobile)
   pour ne jamais écraser le texte. N'affecte pas .pricing-grid--3 (Coaching
   privé, Pilates). */
.pricing-grid--4 { grid-template-columns: repeat(4, 1fr); align-items: stretch; }
@media (max-width: 1100px) { .pricing-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pricing-grid--4 { grid-template-columns: 1fr; } }

/* Gym maternité — 5 formules (essai + 4 déjà existantes). En flexbox plutôt
   qu'en grid : 3 par ligne sur desktop, la ligne incomplète de 2 se centre
   naturellement au lieu de rester collée à gauche comme le ferait une grid. */
.pricing-grid--5 { display: flex; flex-wrap: wrap; justify-content: center; }
.pricing-grid--5 > .pricing-card { flex: 1 1 calc(33.333% - var(--spacing-32) * 2 / 3); min-width: 240px; }
@media (max-width: 900px) { .pricing-grid--5 > .pricing-card { flex-basis: calc(50% - var(--spacing-32) / 2); } }
@media (max-width: 640px) { .pricing-grid--5 > .pricing-card { flex-basis: 100%; } }

.pricing-card {
  background-color: var(--color-cream-alt);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease;
}
.pricing-card.is-visible { opacity: 1; transform: translateY(0); }
.pricing-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(74, 63, 58, 0.14); }
.pricing-card.is-visible:hover { transform: translateY(-4px); }
.pricing-card__name { font-family: var(--font-marcellus); font-size: var(--text-heading-sm); color: var(--color-brown-warm); }
.pricing-card__badge { align-self: flex-start; }
.pricing-card__price { font-family: var(--font-tan-nightingale); font-size: 2.5rem; color: var(--color-bordeaux); line-height: 1; }
.pricing-card__price small { font-family: var(--font-quicksand); font-size: var(--text-caption); color: var(--color-brown-mid); font-weight: var(--font-weight-medium); }
.pricing-card__meta { font-size: var(--text-caption); color: var(--color-brown-mid); }
/* Option duo — volontairement séparée du prix solo (le prix qui doit
   dominer visuellement) par un filet plutôt que listée comme une puce au
   même niveau que les autres informations : c'est une alternative de tarif,
   pas une caractéristique de l'offre. */
.pricing-card__duo {
  margin-top: var(--spacing-8);
  padding-top: var(--spacing-8);
  border-top: 1px solid var(--color-rose-mauve);
  font-size: var(--text-caption);
  font-style: italic;
  color: var(--color-brown-mid);
}
.pricing-card--featured .pricing-card__duo { color: var(--color-brown-warm); }
.pricing-card ul { display: flex; flex-direction: column; gap: var(--spacing-8); margin-top: var(--spacing-8); }
.pricing-card ul li { display: flex; gap: var(--spacing-8); font-size: var(--text-caption); color: var(--color-brown-mid); }
.pricing-card ul li .icon { color: var(--color-rose-mauve); flex-shrink: 0; }
.pricing-card--unit { background-color: var(--color-cream); border: 1.5px solid var(--color-blush); }

/* Carte mise en avant (meilleure offre) — reprend le rôle "surface d'accent
   douce" du blush déjà défini dans la charte, plutôt qu'une nouvelle couleur. */
.pricing-card--featured { background-color: var(--color-blush); border: 2px solid var(--color-bordeaux); }
.pricing-card--featured .pricing-card__badge { background-color: var(--color-bordeaux); color: var(--color-cream); }
/* Sur le fond blush de la carte mise en avant, --color-brown-mid ne donne que
   4,54:1 : conforme AA, mais à 0,04 près, et ce sont les textes les plus petits
   de la page (0,875rem). --color-brown-warm monte à 6,37:1 pour un rendu très
   proche. Charte inchangée : token existant, aucune couleur ajoutée. */
.pricing-card--featured .pricing-card__meta,
.pricing-card--featured .pricing-card__price small,
.pricing-card--featured ul li { color: var(--color-brown-warm); }
@media (prefers-reduced-motion: reduce) {
  .pricing-card { opacity: 1; transform: none; transition: box-shadow 0.3s ease; }
  .pricing-card:hover { transform: none; }
}

/* ---- Planning ---- */
.planning-list { display: flex; flex-direction: column; }
/* padding-block référençait --spacing-20, un token qui n'existe pas dans
   :root (repéré ailleurs sur le site aussi — voir .page-hero p.lead) :
   le padding ne s'appliquait donc pas du tout, et "Mardis" démarrait
   collé au bord de la colonne. Corrigé en --spacing-24, qui a le double
   avantage de restaurer un vrai padding ET de correspondre exactement au
   padding de .location-card voisin. align-items passé de center à
   flex-start pour aligner le HAUT du texte sur celui de la carte adresse
   (align-items: center alignait leur CENTRE, pas leur sommet — sans
   incidence visuelle ici puisque jour et horaire sont sur une seule
   ligne de même hauteur). */
.planning-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-12);
  padding-block: var(--spacing-24);
  border-bottom: 1px solid var(--color-blush);
}
.planning-item:last-child { border-bottom: none; }
.planning-item__day { font-family: var(--font-quicksand); font-weight: var(--font-weight-semibold); color: var(--color-brown-warm); }
.planning-item__time { color: var(--color-brown-mid); }
.planning-item__place {
  display: flex; align-items: center; gap: var(--spacing-8);
  font-size: var(--text-caption); color: var(--color-brown-mid);
}
.planning-item__place .icon { color: var(--color-rose-mauve); width: 16px; height: 16px; flex-shrink: 0; }

.location-block { display: flex; flex-direction: column; gap: var(--spacing-24); }
.location-card {
  background-color: var(--color-cream-alt);
  border-radius: var(--radius-card);
  padding: var(--spacing-24);
  display: flex;
  gap: var(--spacing-16);
  align-items: flex-start;
}
.location-card .icon { color: var(--color-bordeaux); width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.location-card strong { color: var(--color-brown-warm); display: block; margin-bottom: 2px; }
.location-card span { display: block; color: var(--color-brown-mid); font-size: var(--text-caption); }

/* Bandeau de réassurance (diplôme / certification) — discret, encart
   centré à bordure légère, réutilisable sur n'importe quelle page. */
.credential-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-16);
  max-width: 700px;
  margin-inline: auto;
  padding: var(--spacing-24) var(--spacing-32);
  border: 1px solid var(--color-blush);
  border-radius: var(--radius-card);
  background-color: var(--color-cream-alt);
}
.credential-banner__icon { color: var(--color-bordeaux); width: 32px; height: 32px; flex-shrink: 0; }
.credential-banner p { margin: 0; color: var(--color-brown-warm); text-align: center; }
@media (max-width: 600px) {
  .credential-banner { flex-direction: column; padding: var(--spacing-24); }
}

/* Variante compacte — page Contact uniquement, ne modifie pas .location-card
   utilisé tel quel sur Pilates et Gym maternité. */
.location-block--compact { gap: var(--spacing-8); }
.location-block--compact .location-card { padding: var(--spacing-12); }
.location-block--compact .location-card strong { margin-bottom: 0; }
.location-block--compact .location-card span { display: block; }
.location-block--compact .location-card__map { margin-top: 2px; }
.location-card__map {
  display: inline-block;
  margin-top: var(--spacing-4);
  font-family: var(--font-quicksand);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-bordeaux);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.location-card__map:hover { border-bottom-color: var(--color-bordeaux); }

/* ---- CTA band ---- */
.cta-band {
  background-color: var(--color-bordeaux);
  border-radius: var(--radius-card);
  padding: var(--spacing-64);
  text-align: center;
  color: var(--color-cream);
}
.cta-band h2 { color: var(--color-cream); margin-bottom: var(--spacing-24); }
.cta-band p { color: var(--color-blush); max-width: 560px; margin-inline: auto; margin-bottom: var(--spacing-32); }

/* ---- Contact block ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-64);
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: var(--spacing-40); } }

/* Page Contact uniquement — sur mobile, l'ordre du DOM plaçait le formulaire à
   4 champs AVANT les liens directs « appeler »/WhatsApp : l'option la plus
   lente à utiliser passait avant la plus rapide. On inverse seulement l'ordre
   visuel (l'accueil, qui a déjà l'ordre inverse dans son propre HTML, n'est
   pas concerné par cette règle scopée à .contact-section--form). */
@media (max-width: 900px) {
  .contact-section--form .contact-form--page { order: 2; }
}

.contact-methods { display: flex; flex-direction: column; gap: var(--spacing-20); margin-top: var(--spacing-24); }
.contact-method { display: flex; align-items: center; gap: var(--spacing-16); }
.contact-method .icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--color-blush);
  border-radius: 50%;
  color: var(--color-bordeaux);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.contact-method__label { font-size: var(--text-caption); color: var(--color-brown-mid); }
.contact-method__value {
  font-weight: var(--font-weight-semibold);
  color: var(--color-brown-warm);
  line-height: 1;
  transition: color 0.2s ease;
}
.contact-method--link:hover .icon { background-color: var(--color-rose-mauve); color: var(--color-cream); }
.contact-method--link:hover .contact-method__value { color: var(--color-bordeaux); }

.social-links { display: flex; gap: var(--spacing-16); margin-top: var(--spacing-24); }
.social-links a {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--color-cream-alt);
  border-radius: 50%;
  color: var(--color-bordeaux);
  transition: background-color 0.2s ease;
}
.social-links a:hover { background-color: var(--color-blush); }

/* ---- Forms ---- */
.form-field { display: flex; flex-direction: column; gap: var(--spacing-8); margin-bottom: var(--spacing-20); }
.form-field label { font-family: var(--font-quicksand); font-weight: var(--font-weight-medium); font-size: var(--text-caption); color: var(--color-brown-warm); }
.form-field input, .form-field textarea {
  font-family: var(--font-quicksand);
  font-size: var(--text-body);
  color: var(--color-brown-warm);
  background-color: var(--color-cream-alt);
  border: 1px solid var(--color-blush);
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius-input);
  transition: border-color 0.2s ease;
}
.form-field textarea { border-radius: var(--radius-textarea); resize: vertical; min-height: 140px; }
.form-field input:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--color-bordeaux);
}
/* Le focus clavier ne se signalait que par une bordure de 1px changeant de
   couleur — quasi invisible, sur l'élément le plus stratégique du site. On
   garde le changement de bordure et on ajoute un halo net.
   `:focus-visible` : visible au clavier, sans cerner le champ à la souris.
   Cette règle doit rester APRÈS `:focus` : les deux ont la même spécificité,
   donc l'ordre décide — placée avant, elle était annulée par `outline: none`. */
.form-field input:focus-visible, .form-field textarea:focus-visible {
  outline: 2px solid var(--color-bordeaux);
  outline-offset: 2px;
  border-color: var(--color-bordeaux);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--color-brown-mid); opacity: 0.6; }
.contact-form { background-color: var(--color-cream-alt); border-radius: var(--radius-card); padding: var(--card-padding); }

/* Espacement supplémentaire avant le bouton d'envoi — utilisé sur la page
   Contact et sur le formulaire identique de l'Accueil. Ne modifie pas
   .section--tight utilisé ailleurs sur le site. */
.contact-form--page button[type="submit"] { margin-top: var(--spacing-32); }
.contact-section--form { padding-bottom: var(--spacing-32); }
.contact-section--cta { padding-top: var(--spacing-32); }
.form-note { font-size: var(--text-caption); color: var(--color-brown-mid); margin-top: var(--spacing-16); }

/* ---- FAQ accordion ---- */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--color-blush); }
.faq-item:first-child { border-top: 1px solid var(--color-blush); }
/* Chaque question est un vrai titre (patron d'accordéon W3C : le titre
   enveloppe le bouton). Sans cela, les ~28 questions n'apparaissaient pas dans
   la navigation par titres des lecteurs d'écran — la page où scanner compte le
   plus. Ce conteneur ne porte aucun style propre : le bouton garde le sien. */
.faq-item__heading { margin: 0; font: inherit; color: inherit; }

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding-block: var(--spacing-24);
  text-align: left;
  font-family: var(--font-marcellus);
  font-size: var(--text-heading-sm);
  color: var(--color-brown-warm);
}
.faq-item__icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-rose-mauve);
  position: relative;
}
.faq-item__icon::before, .faq-item__icon::after {
  content: '';
  position: absolute;
  background-color: currentColor;
  transition: transform 0.25s ease;
}
.faq-item__icon::before { width: 16px; height: 2px; }
.faq-item__icon::after { width: 2px; height: 16px; }
.faq-item__question[aria-expanded="true"] .faq-item__icon::after { transform: rotate(90deg); opacity: 0; }

/* Hauteur non figée en pixels (technique grid-template-rows 0fr/1fr, la même
   que les panneaux dépliables de Gym maternité) : s'adapte à n'importe quelle
   longueur de réponse et à n'importe quelle largeur d'écran. L'ancien
   `max-height: 600px` tronquait silencieusement les réponses les plus longues
   (« Pourquoi faire appel à une coach », confidentialité), d'autant plus sur
   mobile où le texte s'enroule sur davantage de lignes. */
.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.faq-item__answer-inner {
  overflow: hidden;
  min-height: 0;
  /* Padding nul à l'état fermé : `overflow: hidden` découpe à la boîte de
     padding, donc un padding-bottom permanent laissait une bande de 24px dans
     laquelle la première ligne de la réponse restait visible. */
  padding-bottom: 0;
  transition: padding-bottom 0.3s ease;
  color: var(--color-brown-mid);
  max-width: 70ch;
}
.faq-item.is-open .faq-item__answer { grid-template-rows: 1fr; }
.faq-item.is-open .faq-item__answer-inner { padding-bottom: var(--spacing-24); }
@media (prefers-reduced-motion: reduce) {
  .faq-item__answer, .faq-item__answer-inner { transition: none; }
}

.faq-item__answer-inner ul {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin-top: var(--spacing-16);
  padding-left: var(--spacing-24);
}
.faq-item__answer-inner p + p,
.faq-item__answer-inner p + ul,
.faq-item__answer-inner ul + p { margin-top: var(--spacing-16); }
.faq-item__answer-inner strong { color: var(--color-brown-warm); font-weight: var(--font-weight-semibold); }

/* ---- FAQ : onglets de catégories ---- */
.faq-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-40);
}
.faq-tab {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1.5px solid var(--color-rose-mauve);
  border-radius: var(--radius-button);
  background-color: transparent;
  padding: 0.65rem 1.5rem;
  font-family: var(--font-quicksand);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-brown-mid);
  cursor: pointer;
  transition: color 0.4s ease, border-color 0.4s ease;
}
.faq-tab__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-bordeaux);
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-tab.is-active { border-color: var(--color-bordeaux); color: var(--color-cream); }
.faq-tab.is-active .faq-tab__fill { transform: translateY(0); }

@keyframes faq-panel-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.faq-panel.is-active { animation: faq-panel-in 0.4s ease; }
@media (prefers-reduced-motion: reduce) {
  .faq-panel.is-active { animation: none; }
  .faq-tab__fill { transition: none; }
}

/* ---- Footer ---- */
.site-footer {
  background-color: var(--color-cream-alt);
  color: var(--color-brown-mid);
  border-top: 1px solid var(--color-blush);
  padding-block: var(--spacing-32) var(--spacing-16);
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-40);
  padding-bottom: var(--spacing-48);
}

/* Bloc gauche — logo (~25%) */
.footer-brand { flex: 5 1 220px; }
.footer-logo { height: var(--spacing-64); width: auto; display: block; }
.footer-tagline {
  font-family: var(--font-quicksand);
  font-size: var(--text-caption);
  letter-spacing: 0.03em;
  color: var(--color-brown-mid);
  margin-top: var(--spacing-12);
}

/* Bloc central — contact (~45%) et bloc droit — réseaux (~30%) */
.footer-col--contact { flex: 9 1 280px; }
.footer-col--social { flex: 6 1 200px; }

/* h3 (et non h4) : ces titres suivaient directement le dernier h2/h3 du
   contenu principal, sans niveau intermédiaire — un saut détecté par tout
   audit d'accessibilité automatisé (la hiérarchie des titres est évaluée sur
   tout le document, indépendamment des balises <footer>/<main>). */
.footer-col h3 {
  font-family: var(--font-quicksand);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-caption);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-bordeaux);
  margin-bottom: var(--spacing-16);
}

.footer-contact-list { display: flex; flex-direction: column; gap: var(--spacing-12); }
.footer-contact-list li,
.footer-contact-list a {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  color: var(--color-brown-mid);
  font-size: var(--text-body);
}
.footer-contact-list a { transition: color 0.2s ease; }
.footer-contact-list a:hover { color: var(--color-bordeaux); }
.footer-contact-list .icon {
  width: 20px; height: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-rose-mauve);
}

.footer-social { display: flex; gap: var(--spacing-12); }
.footer-social a {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--color-blush);
  border-radius: 50%;
  color: var(--color-bordeaux);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.footer-social a:hover { background-color: var(--color-rose-mauve); color: var(--color-cream); }

.footer-bottom {
  padding-top: var(--spacing-32);
  border-top: 1px solid var(--color-blush);
  font-size: var(--text-caption);
  color: var(--color-brown-mid);
}
.footer-bottom__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-12);
  text-align: center;
}
.footer-bottom__sep { color: var(--color-blush); }
.footer-bottom a { color: var(--color-brown-mid); transition: color 0.2s ease; }
.footer-bottom a:hover { color: var(--color-bordeaux); }

@media (max-width: 900px) {
  .footer-grid { flex-direction: column; align-items: center; text-align: center; }
  .footer-brand, .footer-col--contact, .footer-col--social { flex: none; width: 100%; }
  .footer-brand { display: flex; flex-direction: column; align-items: center; }
  .footer-contact-list li, .footer-contact-list a { justify-content: center; }
  .footer-social { justify-content: center; }
}

/* ---- Legal pages ---- */
.legal-content h2 { margin-top: var(--spacing-48); margin-bottom: var(--spacing-16); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { color: var(--color-brown-mid); margin-bottom: var(--spacing-16); }
.legal-note {
  background-color: var(--color-blush);
  border-radius: var(--radius-card);
  padding: var(--spacing-24);
  font-size: var(--text-caption);
  color: var(--color-brown-warm);
  margin-top: var(--spacing-48);
}

/* ---- Magic Text — révélation progressive au scroll ----
   Réimplémentation vanille (sans dépendance) d'un composant tiers collé en
   React/motion. Chaque mot n'existe qu'une seule fois dans le DOM (un span,
   un texte) : l'effet "mot fantôme -> mot plein" est obtenu en animant
   l'opacité de ce même span (0.16 -> 1), jamais en dupliquant le texte sur
   deux calques superposés — un doublon serait lisible tel quel par les
   robots d'indexation et les lecteurs d'écran. Contenu = COPY.md,
   couleurs/typo = tokens DESIGN.md. Voir CLAUDE.md. */
.magic-text {
  display: flex;
  flex-wrap: wrap;
  max-width: 760px;
  font-family: var(--font-marcellus);
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--color-brown-warm);
}
.magic-word {
  display: inline-block;
  margin: 0 0.28em 0.35em 0;
  opacity: 0.16;
}
@media (prefers-reduced-motion: reduce) {
  .magic-word { opacity: 1 !important; }
}

/* ---- Focus clavier ----
   Repère de focus homogène sur tout ce qui est actionnable. Les navigateurs en
   fournissent un par défaut, mais il devient peu lisible sur les fonds crème et
   bordeaux de la charte. `:focus-visible` ne s'affiche qu'au clavier. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-bordeaux);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Sur fond bordeaux, un contour bordeaux serait invisible : on passe en crème. */
.cta-band a:focus-visible,
.btn--primary:focus-visible,
.faq-tab.is-active:focus-visible {
  outline-color: var(--color-cream);
  outline-offset: 3px;
}

/* ---- Utilities ---- */
.text-center { text-align: center; }
/* Empêche la césure d'un segment précis (ex. "Saint-Denis" dans un H1) sans
   bloquer le retour à la ligne du reste du titre. Nécessaire depuis l'ajout
   de `hyphens: auto` sur tous les H1 : la césure automatique française
   coupait "Saint-Denis" à l'intérieur même du mot ("Saint-De-nis"), au lieu
   de se limiter à un retour à la ligne après le tiret existant. */
.no-break { white-space: nowrap; hyphens: none; }
.mt-0 { margin-top: 0; }
.flow > * + * { margin-top: var(--spacing-16); }
/* Titres de sous-cartes/sous-sections plus petits qu'un H3 standard, sans
   dupliquer de tailles en dur dans le balisage (remplace les style="font-size:…"
   ad hoc trouvés sur plusieurs pages). */
.title-sm { font-size: 1.25rem; }
.title-compact { font-size: 1.5rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* ---- Page Accueil — raffinements (scopés à body.page-home, aucun autre
   page n'est affecté ; mêmes tokens DESIGN.md, aucune couleur ajoutée) ---- */

/* Lisibilité : paragraphes principaux passés de --color-brown-mid à
   --color-brown-warm (plus foncé, même charte). Les légendes/attributions
   (cite, meta) restent volontairement plus claires pour garder une hiérarchie. */
body.page-home .hero__content p.lead,
body.page-home .prose p,
body.page-home .service-card__body p,
body.page-home .contact-intro {
  color: var(--color-brown-warm);
}

/* Hiérarchie : petit repère bordeaux sous les titres de section pour mieux
   séparer et affirmer les titres principaux, sans surcharge. */
body.page-home .section-head h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--color-bordeaux);
  margin-top: var(--spacing-16);
}
body.page-home .section-head--center h2::after {
  margin-inline: auto;
}

/* Hiérarchie : CTA légèrement plus present au survol (déplacement, pas
   d'ombre — la transition existe déjà sur .btn). */
body.page-home .btn--primary:hover,
body.page-home .btn--on-dark:hover {
  transform: translateY(-2px);
}

/* Hiérarchie : les 3 prestations réagissent légèrement au survol pour
   inviter au clic, sans rompre le style plat du reste du site. */
body.page-home .service-card {
  transition: transform 0.25s ease;
}
body.page-home .service-card:hover {
  transform: translateY(-6px);
}
body.page-home .service-card__image {
  transition: transform 0.4s ease;
}
body.page-home .service-card:hover .service-card__image {
  transform: scale(1.05);
}

/* ---- Bandeau de consentement cookies (RGPD/CNIL) ----
   Mêmes tokens que le reste de la charte (bordeaux/blush/cream, Marcellus +
   Quicksand). "Tout refuser" et "Tout accepter" partagent volontairement le
   même style plein (.btn--primary) : la CNIL sanctionne les bandeaux où le
   refus est visuellement moins engageant que l'acceptation (petit lien gris
   à côté d'un gros bouton coloré) — les deux choix doivent être aussi
   simples et visibles l'un que l'autre. */
.cookie-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  background-color: var(--color-cream-alt);
  border-top: 1px solid var(--color-blush);
  box-shadow: 0 -8px 24px rgba(74, 63, 58, 0.12);
  padding: var(--spacing-24);
  max-height: 85vh;
  overflow-y: auto;
}
.cookie-consent__inner {
  max-width: var(--page-max-width);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-32);
  flex-wrap: wrap;
}
.cookie-consent__main { flex: 1 1 320px; }
.cookie-consent__title {
  font-family: var(--font-marcellus);
  font-size: 1.25rem;
  color: var(--color-brown-warm);
  margin-bottom: var(--spacing-8);
}
.cookie-consent__text {
  font-size: var(--text-caption);
  color: var(--color-brown-mid);
  max-width: 640px;
}
/* Variante courte réservée au mobile (voir media query plus bas) : cachée
   par défaut pour ne pas dupliquer le message sur desktop. */
.cookie-consent__text--compact { display: none; }
.cookie-consent__btn-label-short { display: none; }
.cookie-consent__actions {
  display: flex;
  gap: var(--spacing-12);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.cookie-consent__panel {
  max-width: var(--page-max-width);
  margin-inline: auto;
  margin-top: var(--spacing-24);
  padding-top: var(--spacing-24);
  border-top: 1px solid var(--color-blush);
}
.cookie-consent__category { padding-block: var(--spacing-16); border-bottom: 1px solid var(--color-blush); }
.cookie-consent__category:last-of-type { border-bottom: none; }
.cookie-consent__category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
}
.cookie-consent__category-name {
  font-family: var(--font-quicksand);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brown-warm);
}
.cookie-consent__category-desc {
  margin-top: var(--spacing-8);
  font-size: var(--text-caption);
  color: var(--color-brown-mid);
}
.cookie-consent__panel-actions { margin-top: var(--spacing-16); text-align: right; }

/* Case à cocher stylée en interrupteur — reprend les couleurs de la charte
   plutôt que la case native du navigateur. */
.cookie-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 46px;
  height: 28px;
  border-radius: var(--radius-badge);
  background-color: var(--color-blush);
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cookie-toggle::before {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background-color: var(--color-cream);
  box-shadow: 0 1px 3px rgba(74, 63, 58, 0.3);
  transition: transform 0.2s ease;
}
.cookie-toggle:checked { background-color: var(--color-bordeaux); }
.cookie-toggle:checked::before { transform: translateX(18px); }
.cookie-toggle:disabled { cursor: not-allowed; opacity: 0.85; }
.cookie-toggle:focus-visible {
  outline: 2px solid var(--color-bordeaux);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  /* Bandeau initial : compact, juste assez haut pour son contenu, plafonné
     à ~40% de l'écran pour laisser voir qu'on est bien sur le site. Le
     panneau "Personnaliser" (état .cookie-consent--expanded) déroge à ce
     plafond : c'est une lecture volontaire, elle doit rester scrollable
     plutôt que tronquée. */
  .cookie-consent {
    padding: var(--spacing-12);
    max-height: 40vh;
  }
  .cookie-consent--expanded { max-height: 85vh; }

  .cookie-consent__inner { flex-direction: column; align-items: stretch; gap: var(--spacing-8); }
  /* Sur desktop, flex: 1 1 320px sert de largeur préférée en layout ligne.
     En colonne (mobile), ce flex-basis devient une hauteur forcée : on
     l'annule pour que le bloc ne prenne que la hauteur de son contenu. */
  .cookie-consent__main { flex: 1 1 auto; }

  .cookie-consent__title { font-size: 1rem; margin-bottom: var(--spacing-4); }

  .cookie-consent__text--full { display: none; }
  .cookie-consent__text--compact { display: block; font-size: 0.8125rem; }

  .cookie-consent__actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-8);
    margin-top: var(--spacing-4);
  }
  .cookie-consent__actions .btn {
    flex: 1 1 80px;
    width: auto;
    padding: 0.55rem 0.5rem;
    font-size: 0.75rem;
  }
  .cookie-consent__btn-label-full { display: none; }
  .cookie-consent__btn-label-short { display: inline; }

  .cookie-consent__panel { margin-top: var(--spacing-16); padding-top: var(--spacing-16); }
  .cookie-consent__category { padding-block: var(--spacing-12); }

  .cookie-consent__panel-actions { text-align: stretch; }
  .cookie-consent__panel-actions .btn { width: 100%; }
}

/* Lien "Gérer mes cookies" du pied de page — même traitement que les liens
   Mentions légales / Politique de confidentialité voisins, mais en <button>
   (action JavaScript, pas une navigation). */
.footer-bottom button[data-cookie-settings] {
  font: inherit;
  color: var(--color-brown-mid);
  transition: color 0.2s ease;
}
.footer-bottom button[data-cookie-settings]:hover { color: var(--color-bordeaux); }