/*
Theme Name: Diaba Coach
Theme URI: https://www.diaba-coach.com/
Author: Diaba Coach
Description: Thème bloc sur mesure pour Diaba Coach, coaching émotionnel et développement personnel. Construit à partir de la maquette validée : toutes les pages sont en blocs natifs, modifiables dans l’éditeur.
Version: 1.0.47
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: diaba-coach
Tags: block-theme, full-site-editing
*/

/* Diaba Coach — maquette d'accueil
   Registre : Elevare (une sans-serif, blanc froid + gris clair, un seul accent jaune,
   cartes arrondies, pilules, ronds, titres alternés droite / gauche). */

/* Satoshi (Indian Type Foundry, licence ITF Free Font — usage commercial libre), hébergée localement */
@font-face { font-family: 'Satoshi'; src: url('assets/fonts/satoshi-500.woff2') format('woff2'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('assets/fonts/satoshi-700.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('assets/fonts/satoshi-900.woff2') format('woff2'); font-weight: 800 900; font-display: swap; }

:root {
  --jaune: #F6D76B;
  --noir: #121212;
  --gris-fond: #F2F2F0;
  --gris-ligne: #E4E4E1;
  --texte-doux: #6E6E6B;
  --blanc: #FFFFFF;
  --verre: rgba(255, 255, 255, .16);
  --verre-bord: rgba(255, 255, 255, .28);
  /* noir et blanc légèrement doré : chaleureux sans virer au rouge */
  --grain-photo: sepia(.28) saturate(.9) contrast(1.04);

  --police: 'Satoshi', 'Helvetica Neue', Arial, sans-serif;
  --rayon: 22px;
  --gouttiere: 40px;
  --largeur: 1360px;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
figure, p, h1, h2, h3 { margin: 0; }
h1, h2, h3 { font-weight: 500; hyphens: none; text-wrap: balance; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ---------- Éléments communs ---------- */

.titre {
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 800px;
}
.titre-droite { margin-left: auto; text-align: right; }

.wp-block-button.pilule > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.wp-block-button.pilule-jaune > .wp-block-button__link { background: var(--jaune); color: var(--noir); }
.wp-block-button.pilule-jaune > .wp-block-button__link:hover { background: #F1CB45; }
.wp-block-button.pilule-blanche > .wp-block-button__link { background: var(--blanc); color: var(--noir); }
.wp-block-button.pilule-blanche > .wp-block-button__link:hover { background: var(--jaune); }
.wp-block-button.pilule-contour > .wp-block-button__link { border-color: var(--gris-ligne); color: var(--noir); }
.wp-block-button.pilule-contour > .wp-block-button__link:hover { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.wp-block-button.pilule-pleine > .wp-block-button__link { width: 100%; }

/* ---------- En-tête ---------- */

.entete {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 26px var(--gouttiere);
  color: var(--blanc);
}
.logo { display: inline-flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.logo-marque { width: 24px; height: 24px; fill: var(--jaune); }
nav.menu { display: flex; gap: 2px; }
nav.menu a {
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  transition: background-color .2s, color .2s;
}
nav.menu a:hover { background: var(--verre); }
nav.menu a.actif { background: var(--blanc); color: var(--noir); }
.entete-droite { justify-self: end; display: flex; align-items: center; gap: 22px; }
.burger { display: none; }

/* ---------- Hero ---------- */

/* Disposition validée par la cliente (version du 30/09) :
   - la phrase en haut à gauche et le bloc « réserver » en haut à droite, tous deux à 27 % de la hauteur ;
   - « Diaba » en bas, centré, les lettres posées sur le bord inférieur.
   Le nom suit la largeur (36vw) mais ne descend jamais plus haut que 24 px sous la phrase :
   sur un écran large et bas, c'est la hauteur qui le limite. */
.hero {
  --hero-h: clamp(640px, 100vh, 920px);
  --titre-t: clamp(28px, 2.2vw, 36px);
  /* haut de la phrase à 27 %, 3 lignes de 1,1, puis 24 px d'air ; le nom mesure 0,75 × sa taille */
  --nom-t: min(36vw, calc((var(--hero-h) * .73 - var(--titre-t) * 3.3 - 24px) / .75));
  position: relative;
  height: var(--hero-h);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #070707;
  color: var(--blanc);
}

/* Photo : portrait vertical placé en hauteur et centré (au lieu d'être étiré sur toute la largeur,
   ce qui ne montrait que les yeux sur un écran large). Ses bords se fondent dans le fond noir du studio.
   Le filtre est posé sur le conteneur pour que le fond et la photo aient exactement la même teinte. */
.hero-media { position: absolute; inset: 0; background: #070707; filter: var(--grain-photo); }
.hero-media img {
  position: absolute;
  top: 0;
  left: 50%;
  height: calc(var(--hero-h) * 1.2);
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
/* lisibilité : haut (menu) et bas (nom) */
.hero-media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 50%, rgba(0,0,0,.35) 100%);
}

.hero-bloc {
  flex: 1;
  position: relative;
  z-index: 3;
  margin: 0 var(--gouttiere);
  padding-top: calc(var(--hero-h) * .27);
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr 300px;
  grid-template-rows: auto 1fr auto;
}
.hero-titre {
  grid-area: 1 / 1 / 2 / 2;
  align-self: start;
  max-width: 11.5em;   /* toujours trois lignes */
  /* même style que les grands titres de section (.titre) : graisse moyenne */
  font-size: var(--titre-t);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
/* le bloc « réserver » passe par-dessus les lettres sans jamais pousser le nom vers le bas */
.hero-carte { position: absolute; top: calc(var(--hero-h) * .27); right: 0; width: 300px; z-index: 5; }
.hero-carte-titre { margin-bottom: 16px; font-size: 17px; font-weight: 500; line-height: 1.3; }
.champ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 13px 16px;
  border: 1px solid var(--verre-bord);
  border-radius: 12px;
  background: var(--verre);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 500;
  transition: background-color .2s;
}
.champ:hover { background: rgba(255, 255, 255, .26); }
.champ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; flex: none; }
.hero-carte .wp-block-button.pilule > .wp-block-button__link { margin-top: 6px; padding: 14px 22px; }

.hero-nom {
  grid-area: 3 / 1 / 4 / 4;
  justify-self: center;
  position: relative;
  z-index: 4;
  font-size: var(--nom-t);
  font-weight: 700;
  /* avec 0,75 d'interligne, la boîte colle exactement aux lettres (du haut du b à la ligne de base) */
  line-height: .75;
  letter-spacing: -0.05em;
  white-space: nowrap;
  margin-bottom: .012em;
  color: var(--jaune);
  pointer-events: none;
  user-select: none;
}

/* ---------- Chiffres ---------- */

.chiffres {
  max-width: calc(var(--largeur) + 2 * var(--gouttiere));
  margin: 0 auto;
  padding: 120px var(--gouttiere) 130px;
}
.chiffres-grille {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
.grand-chiffre { font-size: 104px; font-weight: 500; line-height: 1; letter-spacing: -0.05em; }
.grand-chiffre-legende { margin-top: 12px; font-size: 17px; font-weight: 500; }
.ronds {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, 176px);
  gap: 10px;
}
.ronds img { width: 176px; height: 176px; border-radius: 50%; object-fit: cover; }
.ronds img:nth-child(1) { object-position: 70% 30%; }
.ronds img:nth-child(3) { object-position: 30% 20%; }
.ronds img:nth-child(4) { object-position: 50% 16%; }
.chiffres-droite { padding-top: 168px; }
.chiffres-texte { max-width: 440px; font-size: 21px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }
.stats { margin-top: 84px; display: grid; grid-template-columns: 1fr 1fr; max-width: 520px; }
.stat + .stat { border-left: 1px solid var(--gris-ligne); padding-left: 32px; }
.stat-valeur { font-size: 52px; font-weight: 500; line-height: 1; letter-spacing: -0.04em; }
.stat-nom { margin-top: 12px; font-size: 14px; font-weight: 600; }
.stat-detail { margin-top: 4px; max-width: 210px; font-size: 12px; line-height: 1.45; color: var(--texte-doux); }

/* ---------- Approche : onglets + carte photo ---------- */

.approche {
  background: var(--gris-fond);
  padding: 40px max(var(--gouttiere), calc((100% - var(--largeur)) / 2));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.carte { position: relative; min-height: 560px; border-radius: var(--rayon); overflow: hidden; }
.carte-onglets {
  background: var(--blanc);
  padding: 30px 34px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 60px;
}
.onglets { display: flex; flex-wrap: wrap; gap: 8px; }
.onglet {
  padding: 9px 18px;
  border: 1px solid var(--gris-ligne);
  border-radius: 999px;
  background: var(--blanc);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.onglet:hover { border-color: var(--noir); }
.onglet.actif { background: var(--jaune); border-color: var(--jaune); }
.panneaux { display: grid; }
.panneau { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s; align-self: end; }
.panneau.actif { opacity: 1; visibility: visible; }
.panneau-titre { max-width: 420px; font-size: 40px; line-height: 1.1; letter-spacing: -0.025em; }
.panneau p { margin-top: 20px; max-width: 420px; font-size: 14px; color: var(--texte-doux); }

.carte-photo { color: var(--blanc); }
.carte-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.carte-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.62) 100%);
}
.carte-photo-haut { position: absolute; z-index: 1; top: 20px; right: 20px; display: flex; gap: 8px; }
.etiquette {
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--verre);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 500;
}
.carte-photo-bas { position: absolute; z-index: 1; left: 30px; right: 30px; bottom: 28px; }
.carte-photo-texte { max-width: 480px; font-size: 25px; font-weight: 500; line-height: 1.22; letter-spacing: -0.015em; }
.signature { margin-top: 24px; display: flex; align-items: center; gap: 12px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.signature-nom { font-size: 13px; font-weight: 600; }
.signature-role { font-size: 12px; opacity: .72; }
.signature .wp-block-button.pilule > .wp-block-button__link { margin-left: auto; }

/* ---------- Chemins : volets ---------- */

.chemins {
  max-width: calc(var(--largeur) + 2 * var(--gouttiere));
  margin: 0 auto;
  padding: 120px var(--gouttiere) 0;
}
.chemins-entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.chemins-entete .titre { max-width: 640px; }
.volets { margin-top: 48px; display: flex; gap: 14px; height: 560px; }
.volet {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  color: var(--blanc);
  cursor: pointer;
  transition: flex-grow .6s cubic-bezier(.3, .7, .2, 1);
}
.volet.actif { flex-grow: 4.4; cursor: default; }
.volet > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 25%; }
.volet::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.12) 32%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.74) 100%);
}
/* recadrage sur Diaba, sans l'écran de présentation */
.volet-atelier > img { object-position: 0% 30%; transform: scale(1.5); transform-origin: 0% 25%; }
.volet-haut { position: absolute; z-index: 1; top: 18px; left: 18px; display: flex; align-items: center; gap: 10px; }
.volet-num {
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--verre);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 600;
}
.volet-etiquette { font-size: 12px; font-weight: 500; opacity: 0; transition: opacity .3s; white-space: nowrap; }
.volet-vertical {
  position: absolute;
  z-index: 1;
  left: 22px;
  bottom: 26px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity .3s;
}
.volet-bas {
  position: absolute;
  z-index: 1;
  left: 26px;
  right: 26px;
  bottom: 26px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s;
}
.volet-titre { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
.volet-texte { margin-top: 10px; max-width: 380px; font-size: 14px; opacity: .88; }
.volet.actif .volet-etiquette { opacity: 1; transition-delay: .25s; }
.volet.actif .volet-vertical { opacity: 0; }
.volet.actif .volet-bas { opacity: 1; visibility: visible; transition-delay: .25s; }

/* ---------- Témoignages ---------- */

.temoignages {
  max-width: calc(var(--largeur) + 2 * var(--gouttiere));
  margin: 0 auto;
  padding: 140px var(--gouttiere) 140px;
}
.initiales { margin-top: 44px; display: flex; }
.initiales span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 3px solid var(--blanc);
  border-radius: 50%;
  font-size: 15px;
  font-weight: 600;
}
.initiales span + span { margin-left: -12px; }
.initiales span:nth-child(odd) { background: var(--noir); color: var(--blanc); }
.initiales span:nth-child(even) { background: var(--jaune); }
.initiales span:nth-child(3) { background: var(--gris-fond); color: var(--noir); }
.initiales-legende { margin-top: 12px; font-size: 14px; font-weight: 500; }
.avis-grille { margin-top: 32px; display: grid; grid-template-columns: 400px 1fr; gap: 20px; min-height: 400px; }
.avis-photo { border-radius: var(--rayon); overflow: hidden; }
.avis-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.avis-carte {
  background: var(--gris-fond);
  border-radius: var(--rayon);
  padding: 46px 52px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
.avis-liste { display: grid; }
.avis { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .4s; }
.avis.actif { opacity: 1; visibility: visible; }
.avis blockquote { margin: 0; font-size: 27px; font-weight: 500; line-height: 1.32; letter-spacing: -0.015em; }
.avis figcaption { margin-top: 26px; text-align: right; font-size: 14px; color: var(--texte-doux); }
.avis figcaption strong { color: var(--noir); font-weight: 600; }
.avis-nav { display: flex; justify-content: flex-end; gap: 12px; }
.rond-fleche {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--blanc);
  cursor: pointer;
  transition: background-color .2s;
}
.rond-fleche:hover { background: var(--jaune); }
.rond-fleche svg { width: 20px; height: 20px; fill: none; stroke: var(--noir); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Pied de page sur photo ---------- */

.pied {
  position: relative;
  overflow: hidden;
  padding: 150px var(--gouttiere) var(--gouttiere);
  color: var(--blanc);
  background: #050505;
}
/* même traitement que le hero : portrait vertical placé en hauteur et centré, bords fondus dans le noir */
.pied-media { position: absolute; inset: 0; background: #050505; filter: var(--grain-photo); }
/* le visage tient entre le champ « liste d'attente » (≈ 235 px) et le panneau (≈ 560 px) */
.pied-media img {
  position: absolute;
  top: 170px;
  left: 50%;
  height: 1000px;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.pied-media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.1) 40%, rgba(0,0,0,.45) 100%);
}
.attente { position: relative; z-index: 3; max-width: 560px; margin: 0 auto; text-align: center; }
.attente-label { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 500; opacity: .85; }
.attente-champ {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--verre-bord);
  border-radius: 999px;
  background: var(--verre);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.attente-champ input {
  flex: 1;
  min-width: 0;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: var(--blanc);
  font: inherit;
  font-size: 14px;
  outline: none;
}
.attente-champ input::placeholder { color: rgba(255, 255, 255, .75); }

.pied-panneau {
  position: relative;
  z-index: 3;
  max-width: var(--largeur);
  margin: 330px auto 0;
  padding: 44px 48px 30px;
  border-radius: 26px;
  background: rgba(16, 13, 11, .6);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.pied-haut { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: 40px; }
.pied-appel p { max-width: 300px; font-size: 23px; font-weight: 500; line-height: 1.22; letter-spacing: -0.015em; }
.pied-appel .wp-block-button.pilule > .wp-block-button__link { margin-top: 24px; }
.pied-col { display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: rgba(255, 255, 255, .72); }
.pied-col a:hover { color: var(--jaune); }
.pied-titre { margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--blanc); }
.pied-bas {
  margin-top: 60px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.pied-marque { font-size: 104px; font-weight: 700; line-height: .82; letter-spacing: -0.05em; color: var(--jaune); }
.pied-legal { display: flex; gap: 28px; font-size: 12px; color: rgba(255, 255, 255, .72); }
.pied-legal a:hover { color: var(--blanc); }

/* ---------- Écran moyen ---------- */

@media (max-width: 1200px) {
  .titre { font-size: 40px; }
  .chiffres-grille { gap: 48px; }
  .pied-haut { grid-template-columns: repeat(4, 1fr); }
  .pied-appel { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
  .pied-appel .wp-block-button.pilule > .wp-block-button__link { margin-top: 0; }
}

/* liens réservés au menu mobile */
.menu-reserver { display: none; }

/* ---------- Tablette et mobile ---------- */

@media (max-width: 900px) {
  :root { --gouttiere: 20px; --rayon: 18px; }

  body { font-size: 16px; }
  a, button { -webkit-tap-highlight-color: transparent; }

  /* boutons à la taille du doigt (44 px minimum) */
  .wp-block-button.pilule > .wp-block-button__link { padding: 15px 24px; font-size: 14px; }

  /* En-tête fixe : transparent sur la photo, fond blanc dès qu'on descend */
  .entete {
    position: fixed;
    grid-template-columns: 1fr auto;
    padding: 14px var(--gouttiere);
    transition: background-color .3s, color .3s, box-shadow .3s;
  }
  .entete.defile, .entete.ouvert {
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: var(--noir);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
  }
  .entete-droite { display: none; }
  .burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 46px;
    height: 46px;
    padding: 0 13px;
    border: 0;
    border-radius: 50%;
    background: var(--blanc);
    cursor: pointer;
    transition: background-color .3s;
  }
  .burger span { display: block; height: 1.5px; background: var(--noir); transition: transform .3s, background-color .3s; }
  .entete.defile .burger, .entete.ouvert .burger { background: var(--noir); }
  .entete.defile .burger span, .entete.ouvert .burger span { background: var(--blanc); }
  .entete.ouvert .burger span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .entete.ouvert .burger span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

  nav.menu {
    position: absolute;
    top: calc(100% + 8px);
    left: var(--gouttiere);
    right: var(--gouttiere);
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border-radius: 20px;
    background: var(--blanc);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .2);
    display: none;
  }
  .entete.ouvert nav.menu { display: flex; }
  nav.menu a { color: var(--noir); padding: 14px 16px; font-size: 16px; }
  nav.menu a.actif { background: var(--gris-fond); }
  nav.menu .menu-reserver {
    display: block;
    margin-top: 8px;
    text-align: center;
    font-weight: 600;
    background: var(--jaune);
  }

  /* Hero : photo en grand, phrase + nom posés en bas à gauche, bloc « réserver » en dessous */
  .hero {
    --hero-h: clamp(580px, 86svh, 760px);
    --nom-t: calc((100vw - 2 * var(--gouttiere)) / 2.42);
    height: auto;
    display: block;
    background: var(--noir);
  }
  .hero-media { bottom: auto; height: var(--hero-h); }
  /* écran vertical : la photo remplit toute la largeur, sans fondu sur les côtés */
  .hero-media img {
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    object-fit: cover;
    object-position: 50% 10%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero-media::before {
    background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 44%, rgba(0,0,0,.5) 66%, rgba(0,0,0,.8) 100%);
  }
  .hero-bloc { margin: 0; padding: 0 var(--gouttiere); grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .hero-titre {
    grid-area: 1 / 1 / 2 / 2;
    display: flex;
    align-items: flex-end;
    box-sizing: content-box;
    /* bas de la phrase = haut du nom − 16 px ; bas du nom = bas de la photo − 14 px */
    padding-top: 96px;
    min-height: calc(var(--hero-h) - 96px - 16px - 14px - var(--nom-t) * .75);
    margin-bottom: 16px;
    max-width: 330px;
    font-size: 28px;
  }
  .hero-nom { grid-area: 2 / 1 / 3 / 2; justify-self: start; margin: 0 0 14px -0.078em; }
  .hero-carte {
    grid-area: 3 / 1 / 4 / 2;
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    margin: 0 calc(-1 * var(--gouttiere));
    padding: 26px var(--gouttiere) 40px;
    border: 0;
    border-radius: 0;
    background: var(--noir);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .hero-carte-titre { margin: 0 0 16px; font-size: 20px; }
  .champ { padding: 16px 18px; font-size: 15px; }
  /* Chiffres */
  .chiffres { padding-top: 80px; padding-bottom: 80px; }
  .titre { font-size: 31px; }
  .chiffres-grille { grid-template-columns: 1fr; gap: 0; margin-top: 44px; }
  .grand-chiffre { font-size: 76px; }
  .ronds { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 350px; }
  .ronds img { width: 100%; height: auto; aspect-ratio: 1; }
  .chiffres-droite { padding-top: 48px; }
  .chiffres-texte { font-size: 19px; }
  .stats { margin-top: 44px; }
  .stat + .stat { padding-left: 20px; }
  .stat-valeur { font-size: 42px; }
  .stat-detail { font-size: 13px; }

  /* Approche */
  .approche { grid-template-columns: 1fr; padding: 20px var(--gouttiere); gap: 14px; }
  .carte { min-height: 0; }
  .carte-onglets { padding: 22px 22px 30px; gap: 40px; }
  .onglets {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -22px;
    padding: 0 22px 4px;
    scrollbar-width: none;
  }
  .onglets::-webkit-scrollbar { display: none; }
  .onglet { flex: none; padding: 12px 18px; font-size: 14px; }
  .panneau-titre { font-size: 30px; }
  .panneau p { font-size: 15px; }
  .carte-photo { min-height: 540px; }
  .carte-photo-bas { left: 22px; right: 22px; bottom: 22px; }
  .carte-photo-texte { font-size: 21px; }
  .signature { flex-wrap: wrap; }

  /* Chemins */
  .chemins { padding-top: 80px; }
  .chemins-entete { flex-direction: column; align-items: flex-start; gap: 20px; }
  .volets { flex-direction: column; height: auto; gap: 10px; margin-top: 32px; }
  .volet { flex: none; height: 76px; transition: height .5s cubic-bezier(.3, .7, .2, 1); }
  .volet.actif { height: 460px; }
  .volet:not(.actif)::after { background: rgba(0, 0, 0, .5); }
  .volet-vertical { writing-mode: horizontal-tb; transform: none; left: 70px; bottom: auto; top: 26px; font-size: 16px; }
  .volet-bas { left: 20px; right: 20px; bottom: 20px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .volet-titre { font-size: 26px; }
  .volet-texte { font-size: 15px; }

  /* Témoignages */
  .temoignages { padding-top: 90px; padding-bottom: 90px; }
  .avis-grille { grid-template-columns: 1fr; min-height: 0; gap: 12px; }
  .avis-photo { height: 280px; }
  .avis-carte { padding: 30px 24px 22px; }
  .avis blockquote { font-size: 21px; }

  /* Pied de page */
  .pied { padding-top: 96px; }
  /* visage entier entre le champ e-mail (≈ 180 px) et le panneau (≈ 400 px) */
  .pied-media img { top: 150px; width: min(100%, 440px); height: auto; }
  .attente-champ input { font-size: 16px; }   /* 16 px : évite le zoom automatique d'iOS */
  .pied-panneau { margin-top: 220px; padding: 30px 22px 24px; }
  .pied-haut { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .pied-appel { grid-column: 1 / -1; display: block; }
  .pied-appel .wp-block-button.pilule > .wp-block-button__link { margin-top: 20px; }
  .pied-col { gap: 14px; font-size: 14px; }
  .pied-bas { flex-direction: column; align-items: flex-start; }
  .pied-marque { font-size: 68px; }
  .pied-legal { flex-wrap: wrap; gap: 10px 22px; font-size: 13px; }
}

/* ---------- Tablette seule : on garde deux colonnes là où la place le permet ---------- */

@media (min-width: 601px) and (max-width: 900px) {
  .hero { --hero-h: clamp(640px, 78svh, 820px); }
  .hero-titre { font-size: 34px; max-width: 400px; }
  .hero-carte { max-width: 560px; }
  .chiffres-grille { grid-template-columns: 1fr 1fr; gap: 40px; }
  .chiffres-droite { padding-top: 150px; }
  .stats { grid-template-columns: 1fr; gap: 28px; }
  .stat + .stat { border-left: 0; padding-left: 0; padding-top: 28px; border-top: 1px solid var(--gris-ligne); }
  .avis-grille { grid-template-columns: 280px 1fr; }
  .avis-photo { height: auto; min-height: 360px; }
}

/* ---------- Petits téléphones ---------- */

@media (max-width: 380px) {
  .hero-titre { font-size: 27px; }
  .titre { font-size: 28px; }
  .grand-chiffre { font-size: 66px; }
  .stat-valeur { font-size: 36px; }
  .panneau-titre { font-size: 27px; }
  .attente-champ .wp-block-button.pilule > .wp-block-button__link { padding: 15px 16px; }
  .pied-marque { font-size: 58px; }
}


/* =====================================================================
   PAGES INTERNES — mêmes jetons, mêmes formes que l'accueil
   ===================================================================== */

/* ---------- Haut de page ---------- */

/* Même principe que l'accueil : fond noir, photo, grand mot jaune posé en bas.
   --mot-ratio = largeur du mot en Satoshi gras / taille de police (mesurée),
   pour que le mot remplisse la largeur sans jamais dépasser 46 % de la hauteur. */
.page-hero {
  --ph-h: clamp(600px, 86vh, 820px);
  --mot-ratio: 3;
  position: relative;
  min-height: var(--ph-h);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #070707;
  color: var(--blanc);
}
/* La photo occupe les 62 % de droite. Le fondu vers le noir est posé sur le conteneur
   (qui n'est pas zoomé), sinon il grossirait avec la photo et sortirait du cadre.
   --fondu : part de la photo qui se fond dans le noir (plus large si le décor est chargé). */
.page-hero-media {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 calc(38% + var(--fondu, 32%) * .62));
  mask-image: linear-gradient(90deg, transparent 38%, #000 calc(38% + var(--fondu, 32%) * .62));
}
.page-hero-media img {
  position: absolute;
  top: 0;
  right: 0;
  width: 62%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 25%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--pos, 50% 25%);
  filter: grayscale(1) sepia(.28) contrast(1.05) brightness(var(--lumiere, .92));
}
.page-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%);
}
.page-hero-bloc {
  position: relative;
  z-index: 3;
  max-width: calc(640px + 2 * var(--gouttiere));
  padding: max(140px, calc(var(--ph-h) * .22)) var(--gouttiere) 0;
}
.fil {
  display: inline-flex;
  padding: 7px 14px;
  border: 1px solid var(--verre-bord);
  border-radius: 999px;
  background: var(--verre);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 600;
}
.page-titre {
  margin-top: 22px;
  font-size: clamp(36px, 3.8vw, 58px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.page-intro { margin-top: 20px; max-width: 490px; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.page-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.wp-block-button.pilule-verre > .wp-block-button__link {
  background: var(--verre);
  border-color: var(--verre-bord);
  color: var(--blanc);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.wp-block-button.pilule-verre > .wp-block-button__link:hover { background: rgba(255, 255, 255, .28); }
.page-mot {
  position: relative;
  z-index: 2;
  align-self: center;
  margin: auto 0 .012em;
  /* place pour un accent (É) et un peu d'air sous le texte */
  padding-top: .26em;
  font-size: min(calc((100vw - 2 * var(--gouttiere)) / var(--mot-ratio)), calc(var(--ph-h) * .46));
  font-weight: 700;
  line-height: .75;
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: var(--jaune);
  pointer-events: none;
  user-select: none;
}
/* mot avec une lettre qui descend sous la ligne (g, j, p, q, y) : on réserve sa place
   (0,25 × la taille en Satoshi gras), sinon le bas de la lettre est coupé par le bord de la photo */
.page-mot.descend { margin-bottom: .27em; }

/* ---------- Sections ---------- */

.section { padding: 120px max(var(--gouttiere), calc((100% - var(--largeur)) / 2)); }
.section:not(.fond-gris) + .section:not(.fond-gris) { padding-top: 0; }
.fond-gris { background: var(--gris-fond); }
.section-entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 56px; }
.section-entete .titre { max-width: 720px; }
.chapo { max-width: 430px; font-size: 16px; line-height: 1.55; color: var(--texte-doux); }
.etiquette-section {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--gris-ligne);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.etiquette-section strong {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--jaune);
  font-size: 11px;
  font-weight: 700;
}
.fond-gris .etiquette-section { background: var(--blanc); border-color: transparent; }

.deux-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.texte { font-size: 18px; line-height: 1.6; color: #3A3A37; }
.texte p + p { margin-top: 18px; }

/* ---------- Étapes ---------- */

.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.etape {
  display: flex;
  flex-direction: column;
  min-height: 290px;
  padding: 30px 30px 34px;
  border-radius: var(--rayon);
  background: var(--blanc);
}
.etape-num {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--jaune);
  font-size: 15px;
  font-weight: 700;
}
.etape h3 { margin-top: auto; padding-top: 48px; font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; }
.etape p { margin-top: 12px; font-size: 15px; color: var(--texte-doux); }

/* ---------- Thématiques ---------- */

.themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.theme {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
  min-height: 200px;
  padding: 24px 26px 28px;
  border-radius: var(--rayon);
  background: var(--gris-fond);
  transition: background-color .25s;
}
.theme:hover { background: var(--jaune); }
.theme-num { font-size: 13px; font-weight: 600; color: var(--texte-doux); }
.theme:hover .theme-num { color: var(--noir); }
.theme p { font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; }
.fond-gris .theme { background: var(--blanc); }
.fond-gris .theme:hover { background: var(--jaune); }

/* ---------- Pour qui : liste cochée ---------- */

.pour-qui { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
.pour-qui-gauche { position: sticky; top: 40px; }
.pour-qui-gauche .texte { margin-top: 20px; }
.pour-qui-gauche .wp-block-button.pilule > .wp-block-button__link { margin-top: 32px; }
.coches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.coches li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--gris-ligne);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
}
.coches li::before {
  content: '';
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--jaune) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10.5 3.2 3.2L15 7' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* ---------- Bénéfices / valeurs ---------- */

.benefices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.benefices-4 { grid-template-columns: repeat(4, 1fr); }
.benefice { display: flex; flex-direction: column; padding: 30px 30px 32px; border-radius: var(--rayon); background: var(--gris-fond); }
.fond-gris .benefice { background: var(--blanc); }
.benefice-num {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--noir);
  color: var(--jaune);
  font-size: 15px;
  font-weight: 700;
}
.benefice h3 { margin-top: 44px; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; }
.benefice p { margin-top: 10px; font-size: 15px; color: var(--texte-doux); }
.benefice-source { margin-top: auto; padding-top: 20px; font-size: 13px; font-weight: 600; }

/* ---------- Photo + texte ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.split-photo { position: relative; min-height: 580px; border-radius: var(--rayon); overflow: hidden; background: var(--gris-fond); }
.split-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); }
.split-texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 52px;
  border-radius: var(--rayon);
  background: var(--gris-fond);
}
.split-texte .texte { margin-top: 22px; }
.split-texte .wp-block-button.pilule > .wp-block-button__link { margin-top: 32px; align-self: flex-start; }

/* ---------- Bloc noir (approche, vision) ---------- */

.bloc-noir { padding: 64px 56px 56px; border-radius: 28px; background: var(--noir); color: var(--blanc); }
.bloc-noir .etiquette-section { border-color: rgba(255, 255, 255, .2); }
.bloc-noir .titre { max-width: 860px; }
.bloc-noir .titre em { font-style: normal; color: var(--jaune); }
.piliers { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.pilier { padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .18); }
.pilier-num { font-size: 14px; font-weight: 600; color: var(--jaune); }
.pilier h3 { margin-top: 14px; font-size: 24px; letter-spacing: -0.02em; }
.pilier p { margin-top: 10px; font-size: 15px; color: rgba(255, 255, 255, .68); }
.bloc-noir-citation {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.bloc-noir-citation span { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .6); }

/* ---------- Appel final ---------- */

.bandeau-cta {
  padding: 80px 56px;
  border-radius: 28px;
  background: var(--noir);
  color: var(--blanc);
  text-align: center;
}
.bandeau-ronds { display: flex; justify-content: center; margin-bottom: 28px; }
.bandeau-ronds img { width: 58px; height: 58px; border: 3px solid var(--noir); border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.bandeau-ronds img + img { margin-left: -14px; }
.bandeau-cta .titre { max-width: 780px; margin: 0 auto; font-size: 52px; }
.bandeau-cta p { max-width: 540px; margin: 18px auto 0; font-size: 17px; color: rgba(255, 255, 255, .72); }
.bandeau-actions { margin-top: 34px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.wp-block-button.pilule-contour-blanc > .wp-block-button__link { border-color: rgba(255, 255, 255, .3); color: var(--blanc); }
.wp-block-button.pilule-contour-blanc > .wp-block-button__link:hover { background: var(--blanc); color: var(--noir); }

/* ---------- À propos ---------- */

.histoire { display: grid; grid-template-columns: 4fr 7fr; gap: 80px; align-items: start; }
.histoire-gauche { position: sticky; top: 40px; }
.histoire-photo { margin-top: 32px; height: 420px; border-radius: var(--rayon); overflow: hidden; }
.histoire-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.texte-long { font-size: 21px; line-height: 1.55; letter-spacing: -0.005em; }
.texte-long p + p { margin-top: 22px; }
.citation {
  margin: 40px 0;
  padding: 36px 40px;
  border-radius: var(--rayon);
  background: var(--jaune);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.parcours { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.parcours-etape {
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: 26px 24px 28px;
  border-radius: var(--rayon);
  background: var(--blanc);
}
.parcours-etape .etape-num { width: 40px; height: 40px; font-size: 13px; }
.parcours-etape h3 { margin-top: auto; padding-top: 40px; font-size: 20px; line-height: 1.2; letter-spacing: -0.015em; }
.parcours-etape p { margin-top: 8px; font-size: 14px; color: var(--texte-doux); }
.parcours-etape.fort { background: var(--noir); color: var(--blanc); }
.parcours-etape.fort p { color: rgba(255, 255, 255, .7); }

.compteurs { display: grid; grid-template-columns: repeat(3, 1fr); }
.compteur { padding: 4px 32px 0; border-left: 1px solid var(--gris-ligne); }
.compteur:first-child { padding-left: 0; border-left: 0; }
.compteur-valeur { font-size: 88px; font-weight: 500; line-height: 1; letter-spacing: -0.05em; }
.compteur-nom { margin-top: 14px; font-size: 16px; font-weight: 600; }
.compteur-detail { margin-top: 4px; font-size: 14px; color: var(--texte-doux); }
.pastilles { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 10px; }
.pastille { display: inline-flex; align-items: center; gap: 10px; padding: 8px 20px 8px 8px; border-radius: 999px; background: var(--gris-fond); font-size: 15px; font-weight: 500; }
.pastille img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

/* ---------- Témoignages : mur filtrable ---------- */

.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.mur { columns: 3 320px; column-gap: 16px; }
.temoin {
  display: inline-block;
  width: 100%;
  margin-bottom: 16px;
  padding: 30px 30px 26px;
  border-radius: var(--rayon);
  background: var(--gris-fond);
  break-inside: avoid;
}
.temoin.cache { display: none; }
.temoin-type { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: var(--blanc); font-size: 12px; font-weight: 600; }
.temoin-type.ateliers { background: var(--jaune); }
.temoin blockquote { margin: 22px 0 0; font-size: 23px; font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; }
.temoin-texte { margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--texte-doux); }
.temoin-auteur { margin-top: 24px; display: flex; align-items: center; gap: 12px; font-size: 14px; }
.temoin-auteur strong { display: block; font-weight: 600; }
.temoin-auteur span { color: var(--texte-doux); font-size: 13px; }
.temoin-initiale {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--noir);
  color: var(--blanc);
  font-weight: 600;
}
.temoin.vedette { background: var(--noir); color: var(--blanc); }
.temoin.vedette blockquote { font-size: 29px; }
.temoin.vedette .temoin-texte, .temoin.vedette .temoin-auteur span { color: rgba(255, 255, 255, .7); }
.temoin.vedette .temoin-initiale { background: var(--jaune); color: var(--noir); }
.temoin.vedette .temoin-type { background: rgba(255, 255, 255, .14); color: var(--blanc); }
.temoin.appel { background: var(--jaune); }
.temoin.appel .temoin-texte { color: #3A3A37; }
.temoin.appel .wp-block-button.pilule > .wp-block-button__link { margin-top: 22px; }

/* ---------- Contact ---------- */

.contact-grille { display: grid; grid-template-columns: 5fr 7fr; gap: 20px; align-items: start; }
.contact-infos { display: grid; gap: 14px; }
.info-carte { padding: 30px; border-radius: var(--rayon); background: var(--gris-fond); }
.info-carte h2 { font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; }
.info-carte p { margin-top: 8px; font-size: 15px; color: var(--texte-doux); }
.info-carte.noire { background: var(--noir); color: var(--blanc); }
.info-carte.noire p { color: rgba(255, 255, 255, .7); }
.info-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.lien-mail { display: inline-block; margin-top: 14px; padding-bottom: 2px; border-bottom: 1px solid currentColor; font-size: 20px; font-weight: 500; }
.reseaux { margin-top: 18px; display: grid; gap: 8px; }
.reseau {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--blanc);
  font-size: 15px;
  font-weight: 500;
  transition: background-color .2s;
}
.reseau span { font-size: 13px; color: var(--texte-doux); }
.reseau:hover { background: var(--jaune); }
.reseau:hover span { color: var(--noir); }

/* ---------- Formulaires ---------- */

.formulaire { padding: 44px 44px 40px; border-radius: 28px; background: var(--gris-fond); }
.formulaire-titre { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
.formulaire-sous { margin-top: 8px; font-size: 15px; color: var(--texte-doux); }
.form-grille { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
.form-bloc-titre { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 16px; font-weight: 600; }
.form-bloc-titre strong { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--noir); color: var(--jaune); font-size: 12px; font-weight: 700; }
.form-bloc-titre:first-child { margin-top: 0; }
.champ-form { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.champ-form.large { grid-column: 1 / -1; }
.champ-form > span, .champ-form > legend { padding: 0; font-size: 13px; font-weight: 600; }
.champ-form > legend { margin-bottom: 8px; }
.champ-form input, .champ-form select, .champ-form textarea {
  width: 100%;
  padding: 15px 18px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--blanc);
  color: var(--noir);
  font: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .2s;
}
.champ-form input:focus, .champ-form select:focus, .champ-form textarea:focus { border-color: var(--noir); }
.champ-form textarea { min-height: 150px; resize: vertical; }
.champ-form ::placeholder { color: #9A9A96; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { position: relative; cursor: pointer; }
.puce input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.puce span {
  display: inline-flex;
  padding: 11px 16px;
  border: 1px solid var(--gris-ligne);
  border-radius: 999px;
  background: var(--blanc);
  font-size: 14px;
  font-weight: 500;
  transition: background-color .2s, border-color .2s;
}
.puce:hover span { border-color: var(--noir); }
.puce input:checked + span { background: var(--jaune); border-color: var(--jaune); }
.puce input:focus-visible + span { outline: 2px solid var(--noir); outline-offset: 2px; }
.consentement { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.45; color: var(--texte-doux); cursor: pointer; }
.consentement input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--noir); }
.consentement a { color: var(--noir); text-decoration: underline; }
.form-envoi { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 6px; }
.form-envoi .wp-block-button.pilule > .wp-block-button__link { padding: 17px 28px; font-size: 14px; }
.form-note { font-size: 13px; color: var(--texte-doux); }
.form-merci { display: none; padding: 30px 0 10px; }
.form-merci-icone {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--jaune) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10.5 3.2 3.2L15 7' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 30px no-repeat;
}
.form-merci h3 { margin-top: 26px; font-size: 30px; letter-spacing: -0.02em; }
.form-merci p { margin-top: 10px; max-width: 460px; font-size: 16px; color: var(--texte-doux); }
.form-merci .wp-block-button.pilule > .wp-block-button__link { margin-top: 24px; }
.formulaire.envoye .form-contenu { display: none; }
.formulaire.envoye .form-merci { display: block; }

/* ---------- Réservation ---------- */

.resa-grille { display: grid; grid-template-columns: 5fr 7fr; gap: 20px; align-items: start; }
.resa-info { position: sticky; top: 24px; padding: 40px 36px; border-radius: 28px; background: var(--noir); color: var(--blanc); }
.resa-info h2 { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
.resa-liste { list-style: none; margin: 28px 0 0; padding: 0; }
.resa-liste li { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.resa-liste b { display: block; margin-bottom: 2px; font-size: 16px; font-weight: 600; color: var(--blanc); }
.resa-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--jaune);
  color: var(--noir);
  font-size: 12px;
  font-weight: 700;
}
.resa-bon { margin-top: 24px; padding: 20px 22px; border-radius: 16px; background: rgba(255, 255, 255, .08); font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .75); }
.resa-bon b { color: var(--blanc); }
.resa-bon a { color: var(--blanc); text-decoration: underline; }

/* ---------- Pages internes : écran moyen ---------- */

@media (max-width: 1200px) {
  .themes { grid-template-columns: repeat(2, 1fr); }
  .parcours { grid-template-columns: repeat(3, 1fr); }
  .benefices-4 { grid-template-columns: repeat(2, 1fr); }
  .compteur-valeur { font-size: 72px; }
}

/* ---------- Pages internes : tablette et mobile ---------- */

@media (max-width: 900px) {
  /* Haut de page mobile, même principe que l'accueil : la photo reste dégagée, seuls le titre et
     le grand mot sont posés en bas de la photo ; l'introduction et les boutons passent dessous,
     sur fond noir. Grille : la 1re rangée (1fr) absorbe l'espace libre, si bien que titre + mot
     touchent toujours le bas de la photo, quelle que soit la longueur du titre. */
  .page-hero {
    --ph-photo: clamp(540px, 76svh, 700px);
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto auto;
    padding-bottom: 40px;
  }
  .page-hero-bloc { display: contents; }
  .page-hero-media {
    position: relative;
    inset: auto;
    grid-row: 1 / 4;
    grid-column: 1;
    min-height: var(--ph-photo);
    overflow: hidden;   /* la photo zoomée ne déborde pas sous l'introduction */
    -webkit-mask-image: none;
    mask-image: none;
  }
  .page-hero-media img {
    left: 0;
    width: 100%;
    height: 100%;
    object-position: var(--pos-mob, 50% 15%);
    transform: scale(var(--zoom-mob, 1));
    transform-origin: var(--pos-mob, 50% 15%);
  }
  .page-hero-media::after {
    background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 44%, rgba(0,0,0,.5) 66%, rgba(0,0,0,.85) 100%);
  }
  .fil { display: none; }
  .page-titre {
    grid-row: 2;
    grid-column: 1;
    position: relative;
    z-index: 3;
    margin: 0 var(--gouttiere) 16px;
    max-width: 330px;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.025em;
  }
  .page-mot {
    grid-row: 3;
    grid-column: 1;
    justify-self: start;
    align-self: end;
    margin: 0 0 14px var(--gouttiere);
    font-size: calc((100vw - 2 * var(--gouttiere)) / var(--mot-ratio));
    padding-top: .2em;
  }
  .page-mot.descend { margin-bottom: calc(.25em + 14px); }
  .page-intro { grid-row: 4; grid-column: 1; margin: 26px var(--gouttiere) 0; max-width: 560px; font-size: 16px; }
  .page-actions { grid-row: 5; grid-column: 1; margin: 22px var(--gouttiere) 0; }

  .section { padding-top: 72px; padding-bottom: 72px; }
  .section-entete { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 36px; }
  .deux-col, .pour-qui, .histoire, .split, .contact-grille, .resa-grille { grid-template-columns: 1fr; gap: 28px; }
  .pour-qui-gauche, .histoire-gauche, .resa-info { position: static; }
  .texte { font-size: 17px; }
  .etapes { grid-template-columns: 1fr; gap: 12px; }
  .etape { min-height: 0; }
  .etape h3 { padding-top: 32px; }
  .theme { min-height: 160px; }
  .theme p { font-size: 18px; }
  /* les mots longs (« émotionnellement ») ne doivent pas élargir la colonne sur les petits écrans */
  .themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme p { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
  .coches { grid-template-columns: 1fr; }
  .coches li { font-size: 16px; }
  .benefices, .benefices-4 { grid-template-columns: 1fr; gap: 12px; }
  .benefice h3 { margin-top: 28px; }
  .split { gap: 12px; }
  .split-photo { min-height: 380px; }
  .split-texte { padding: 36px 24px; }
  .bloc-noir { padding: 44px 24px 36px; border-radius: 22px; }
  .piliers { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  .bandeau-cta { padding: 56px 24px; border-radius: 22px; }
  .bandeau-cta .titre { font-size: 34px; }
  .histoire-photo { height: 360px; }
  .texte-long { font-size: 18px; }
  .citation { margin: 28px 0; padding: 26px 24px; font-size: 22px; }
  .parcours { grid-template-columns: 1fr 1fr; gap: 10px; }
  .parcours-etape { min-height: 200px; padding: 22px 20px; }
  .parcours-etape.fort { grid-column: 1 / -1; }
  .compteurs { grid-template-columns: 1fr; }
  .compteur { padding: 22px 0; border-left: 0; border-top: 1px solid var(--gris-ligne); }
  .compteur:first-child { padding-top: 0; border-top: 0; }
  .compteur-valeur { font-size: 64px; }
  .mur { columns: 1; }
  .temoin blockquote { font-size: 20px; }
  .temoin.vedette blockquote { font-size: 24px; }
  .filtres { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gouttiere)) 28px; padding: 0 var(--gouttiere) 4px; scrollbar-width: none; }
  .filtres::-webkit-scrollbar { display: none; }
  .filtres .onglet { flex: none; }
  .formulaire { padding: 30px 20px 28px; border-radius: 22px; }
  .formulaire-titre { font-size: 26px; }
  .form-grille { grid-template-columns: 1fr; }
  .champ-form input, .champ-form select, .champ-form textarea { font-size: 16px; }  /* pas de zoom automatique sur iPhone */
  .form-envoi .wp-block-button.pilule > .wp-block-button__link { width: 100%; }
  .resa-info { padding: 32px 24px; border-radius: 22px; }
}

@media (min-width: 601px) and (max-width: 900px) {
  .themes, .benefices, .benefices-4 { grid-template-columns: repeat(2, 1fr); }
  .mur { columns: 2; }
  .page-hero { --ph-photo: clamp(620px, 72svh, 820px); }
  .page-titre { font-size: 34px; max-width: 420px; }
}

/* =====================================================================
   ADAPTATION AUX BLOCS GUTENBERG
   Le CSS de la maquette (au-dessus) s'applique tel quel grâce aux classes
   posées sur les blocs (className). Cette couche ne traite que ce que le
   balisage des blocs change : <figure> autour des images, conteneur des
   boutons, liste du menu, paragraphes à la place des <span>/<button>,
   formulaires Contact Form 7. Spécificité volontairement supérieure au
   CSS des blocs du cœur (imprimé après cette feuille).
   ===================================================================== */

/* ---------- Socle ---------- */

.wp-site-blocks > * { margin-block: 0; }
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }
.wp-block-image img { vertical-align: top; }
.wp-block-post-content { margin: 0; }
.admin-bar .entete { top: 32px; }
@media (max-width: 782px) { .admin-bar .entete { top: 46px; } }

/* ---------- Boutons : la classe .pilule est sur le conteneur div.wp-block-button ---------- */

.wp-block-buttons.wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.info-actions.info-actions { gap: 8px; }
.wp-block-button.pilule-contour > .wp-block-button__link,
.wp-block-button.pilule-contour-blanc > .wp-block-button__link { background: transparent; }
.wp-block-button.pilule > .wp-block-button__link { font-family: inherit; text-decoration: none; height: auto; word-break: normal; }
.wp-block-button.pilule-pleine,
.hero-carte-actions.hero-carte-actions { width: 100%; }

/* ---------- En-tête ---------- */

.logo a { display: inline-flex; align-items: center; gap: 9px; }
.logo a::before {
  content: '';
  width: 24px;
  height: 24px;
  background: var(--jaune);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2c1.6 6.2 3.8 8.4 10 10-6.2 1.6-8.4 3.8-10 10-1.6-6.2-3.8-8.4-10-10 6.2-1.6 8.4-3.8 10-10Z'/%3E%3Ccircle cx='25.5' cy='25.5' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2c1.6 6.2 3.8 8.4 10 10-6.2 1.6-8.4 3.8-10 10-1.6-6.2-3.8-8.4-10-10 6.2-1.6 8.4-3.8 10-10Z'/%3E%3Ccircle cx='25.5' cy='25.5' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* menu : core/navigation (liste ul > li > a) */
.entete nav.menu, .entete nav.menu .wp-block-navigation__container { gap: 2px; }
.entete nav.menu .wp-block-navigation__container { position: static; display: flex; flex-wrap: nowrap; padding: 0; margin: 0; background: none; box-shadow: none; border-radius: 0; }
.entete nav.menu .wp-block-navigation-item__content {
  display: block;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: inherit;
  transition: background-color .2s, color .2s;
}
.entete nav.menu .wp-block-navigation-item__content:hover { background: var(--verre); }
.entete nav.menu .current-menu-item > .wp-block-navigation-item__content { background: var(--blanc); color: var(--noir); }
.entete nav.menu .menu-reserver { display: none; }

/* burger : un paragraphe (le texte « Menu » reste lu par les lecteurs d'écran) */
.entete .burger { font-size: 0; color: transparent; user-select: none; }
.entete .burger::before, .entete .burger::after {
  content: '';
  display: block;
  height: 1.5px;
  background: var(--noir);
  transition: transform .3s, background-color .3s;
}

/* ---------- Accueil : hero ---------- */

.hero .wp-block-image.hero-media img { height: calc(var(--hero-h) * 1.2); max-width: none; }
.hero-carte .champ { display: block; padding: 0; }
.hero-carte .champ a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
}
.hero-carte .champ a::after {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat;
  mask: var(--icone) center / contain no-repeat;
}
.champ-communaute { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Ccircle cx='7' cy='8' r='3'/%3E%3Ccircle cx='14' cy='8' r='2.4'/%3E%3Cpath d='M1.5 17c.6-3 2.8-4.6 5.5-4.6s4.9 1.6 5.5 4.6M12.4 12.6c2.9-.3 5.3 1.2 6 4.4'/%3E%3C/svg%3E"); }
.champ-solo { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); }

/* ---------- Accueil : chiffres ---------- */

.ronds .wp-block-image img { width: 176px; height: 176px; border-radius: 50%; object-fit: cover; object-position: 50% 50%; }
.ronds .rond-1 img { object-position: 70% 30%; }
.ronds .rond-3 img { object-position: 30% 20%; }
.ronds .rond-4 img { object-position: 50% 16%; }

/* ---------- Accueil : approche ---------- */

.carte-photo > .carte-photo-img { position: absolute; inset: 0; }
.carte-photo > .carte-photo-img img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.signature .wp-block-image.avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; }
.signature .wp-block-image.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.signature > .wp-block-buttons { margin-left: auto; }

/* ---------- Accueil : volets ---------- */

.volet > .volet-img { position: absolute; inset: 0; }
.volet > .volet-img img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 25%; }
.volet-atelier > .volet-img img { object-position: 0% 30%; transform: scale(1.5); transform-origin: 0% 25%; }

/* ---------- Accueil : témoignages ---------- */

.initiales > p {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 3px solid var(--blanc);
  border-radius: 50%;
  font-size: 15px;
  font-weight: 600;
}
.initiales > p + p { margin-left: -12px; }
.initiales > p:nth-child(odd) { background: var(--noir); color: var(--blanc); }
.initiales > p:nth-child(even) { background: var(--jaune); }
.initiales > p:nth-child(3) { background: var(--gris-fond); color: var(--noir); }
.avis-grille .wp-block-image.avis-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.avis-citation { font-size: 27px; font-weight: 500; line-height: 1.32; letter-spacing: -0.015em; }
.avis-auteur { margin-top: 26px; text-align: right; font-size: 14px; color: var(--texte-doux); }
.avis-auteur strong { color: var(--noir); font-weight: 600; }
.avis-nav .rond-fleche { font-size: 0; color: transparent; user-select: none; }
.avis-nav .rond-fleche::before {
  content: '';
  width: 20px;
  height: 20px;
  background: var(--noir);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12m-5-5 5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12m-5-5 5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.avis-nav .fleche-prec::before { transform: scaleX(-1); }

/* ---------- Pied de page ---------- */

.pied .wp-block-image.pied-media img { height: 1000px; max-width: none; }
/* la ligne « Gratuit et sans engagement » (+31 px) sous la liste d'attente : la photo descend d'autant,
   pour que le visage reste entre le champ et le panneau */
.pied .wp-block-image.pied-media img { top: 201px; }
@media (max-width: 900px) { .pied .wp-block-image.pied-media img { top: 181px; } }
/* téléphone : deux pilules empilées (+68 px) et la note sur deux lignes (+50 px) */
@media (max-width: 600px) { .pied .wp-block-image.pied-media img { top: 268px; } }

/* formulaire « liste d'attente » (Contact Form 7) */
.attente .wpcf7-form { margin: 0; }
.attente-champ .wpcf7-form-control-wrap { flex: 1; min-width: 0; }
.attente-champ input[type="email"], .attente-champ input[type="text"] { display: block; width: 100%; }
/* prénom | e-mail [Je m'inscris] dans la même pilule, séparés par un filet */
.attente-prenom, .attente-email { display: flex; align-items: center; min-width: 0; }
.attente-prenom { flex: 0 0 38%; align-self: stretch; border-right: 1px solid var(--verre-bord); }
.attente-email { flex: 1; gap: 8px; }
/* les erreurs par champ casseraient la pilule : le message global suffit, le champ fautif rosit */
.attente .wpcf7-not-valid-tip { display: none; }
.attente-champ input.wpcf7-not-valid::placeholder { color: #FFB4A9; }
.attente-note { margin-top: 12px; font-size: 12px; opacity: .7; }
.attente-note a { color: inherit; text-decoration: underline; }
/* champ piège anti-robots, invisible et hors du parcours clavier */
.champ-piege { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Contact Form 7 : commun ---------- */

.wpcf7 .wpcf7-spinner { display: none; }
.wpcf7-form.submitting .pilule-submit { opacity: .6; pointer-events: none; }
input.pilule-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--jaune);
  color: var(--noir);
  font: 600 13px/1 var(--police);
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .2s;
}
input.pilule-submit:hover { background: #F1CB45; }
.attente-champ input.pilule-submit { flex: none; width: auto; padding: 12px 22px; border: 1px solid transparent; background: var(--jaune); color: var(--noir); font-size: 13px; }
.wpcf7 .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: #B3261E; }
.wpcf7 form .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 18px;
  border: 0;
  border-radius: 14px;
  background: #FDE8E4;
  color: #7A2414;
  font-size: 14px;
}
.wpcf7 form.sent .wpcf7-response-output { background: var(--jaune); color: var(--noir); }
.wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none; }

/* ---------- Contact Form 7 : formulaires des pages ---------- */

.champ-form > .wpcf7-form-control-wrap { display: block; font-size: 15px; font-weight: 400; }
.champ-form .champ-nom { font-size: 13px; font-weight: 600; }
.champ-form .wpcf7-radio, .champ-form .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 8px; }
.champ-form .wpcf7-list-item { display: block; margin: 0; }
.champ-form .wpcf7-list-item label { position: relative; display: block; cursor: pointer; }
.champ-form .wpcf7-list-item input { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; }
.champ-form .wpcf7-list-item-label {
  display: inline-flex;
  padding: 11px 16px;
  border: 1px solid var(--gris-ligne);
  border-radius: 999px;
  background: var(--blanc);
  font-size: 14px;
  font-weight: 500;
  transition: background-color .2s, border-color .2s;
}
.champ-form .wpcf7-list-item label:hover .wpcf7-list-item-label { border-color: var(--noir); }
.champ-form .wpcf7-list-item input:checked + .wpcf7-list-item-label { background: var(--jaune); border-color: var(--jaune); }
.champ-form .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label { outline: 2px solid var(--noir); outline-offset: 2px; }
.consentement .wpcf7-form-control-wrap, .consentement .wpcf7-list-item { display: block; margin: 0; }
.consentement label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.form-envoi input.pilule-submit { padding: 17px 28px; font-size: 14px; }
/* mention de consentement (remplace la case à cocher) : sous le bouton, sur toute la largeur */
.form-mention { grid-column: 1 / -1; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--texte-doux); }
.form-mention a { color: var(--noir); text-decoration: underline; }
.form-bloc-titre strong {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--noir);
  color: var(--jaune);
  font-size: 12px;
  font-weight: 700;
}
.form-merci::before {
  content: '';
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--jaune) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10.5 3.2 3.2L15 7' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 30px no-repeat;
}

/* ---------- Pages internes ---------- */

/* Les numéros et liens étaient des <span>/<a> dans la maquette ; devenus des paragraphes,
   ils ne doivent pas hériter des règles « .carte p » écrites pour le texte courant. */
.etape .etape-num, .parcours-etape .etape-num, .benefice .benefice-num { margin-top: 0; }
.theme p.theme-num { font-size: 13px; font-weight: 600; line-height: 1.55; letter-spacing: normal; }
.info-carte .lien-mail { margin-top: 14px; font-size: 20px; font-weight: 500; color: inherit; }
.reseaux .reseau { margin-top: 0; }
.champ-form .wpcf7-form-control-wrap textarea { height: 150px; }
.champ-form .wpcf7-form-control-wrap > input, .champ-form .wpcf7-form-control-wrap > textarea { display: block; }

.page-hero .wp-block-image.page-hero-media img { height: 100%; max-width: none; }
/* cadrages : --pos/--zoom sur grand écran, --pos-mob/--zoom-mob pour la photo verticale du mobile */
.ph-services { --mot-ratio: 3.05; --pos: 16% 26%; --zoom: 1.9; --pos-mob: 22% 14%; --zoom-mob: 1.3; }
.ph-a-propos { --mot-ratio: 3.66; --pos: 50% 14%; --pos-mob: 50% 6%; }
.ph-temoignages { --mot-ratio: 5.63; --pos: 92% 40%; --zoom: 1.75; --fondu: 62%; --lumiere: .8; --pos-mob: 84% 22%; --zoom-mob: 1.6; }
.ph-contact { --mot-ratio: 3.05; --pos: 38% 30%; --zoom: 1.15; --pos-mob: 40% 18%; }
.ph-solo { --mot-ratio: 1.8; --pos: 50% 18%; --pos-mob: 55% 8%; }
.ph-ensemble { --mot-ratio: 4.05; --pos: 18% 34%; --zoom: 1.7; --pos-mob: 22% 14%; --zoom-mob: 1.3; }
.pos-sourire { --pos: 55% 30%; }
.ph-libre { --mot-ratio: 3.1; } /* haut de page ajouté depuis les compositions (grand mot de 7 à 8 lettres) */

.split .wp-block-image.split-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); }
.histoire figure.histoire-photo { margin-top: 32px; }
.histoire .wp-block-image.histoire-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.bandeau-ronds .wp-block-image img { width: 58px; height: 58px; border: 3px solid var(--noir); border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.bandeau-ronds .wp-block-image + .wp-block-image { margin-left: -14px; }
.pastille .wp-block-image { flex: none; }
.pastille .wp-block-image img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.bloc-noir-citation strong { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .6); }

/* témoignages */
.temoin-type { display: inline-flex; }
.temoin-citation { margin-top: 22px; font-size: 23px; font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; }
.temoin.vedette .temoin-citation { font-size: 29px; }
.temoin-nom { font-size: 13px; line-height: 21.7px; color: var(--texte-doux); }
.temoin-auteur .temoin-nom strong { display: inline; font-size: 14px; font-weight: 600; line-height: 1; color: var(--noir); }
.temoin.vedette .temoin-nom { color: rgba(255, 255, 255, .7); }
.temoin.vedette .temoin-nom strong { color: var(--blanc); }

/* contact */
.reseaux .reseau { display: block; padding: 0; }
.reseaux .reseau a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; }
.reseau em { font-style: normal; font-size: 13px; color: var(--texte-doux); }
.reseau:hover em { color: var(--noir); }

/* réservation */
.resa-liste { counter-reset: etape; }
.resa-liste li { position: relative; display: block; padding: 16px 0 16px 44px; counter-increment: etape; }
.resa-liste li::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 16px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--jaune);
  color: var(--noir);
  font-size: 12px;
  font-weight: 700;
}
.resa-liste li strong { display: block; margin-bottom: 2px; font-size: 16px; font-weight: 600; color: var(--blanc); }

/* réservation en ligne (raccourci [diaba_calendly]) : tant qu'aucun lien Calendly n'est renseigné,
   le raccourci affiche le formulaire avec son propre titre, et les titres prévus pour Calendly s'effacent */
.form-contenu:has(.resa-provisoire) > .formulaire-titre,
.form-contenu:has(.resa-provisoire) > .formulaire-sous { display: none; }
.resa-cgv { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--texte-doux); }
.resa-cgv a { color: var(--noir); text-decoration: underline; }
.resa-calendly { margin-top: 24px; min-height: 700px; overflow: hidden; border-radius: 20px; background: var(--blanc); }
.resa-calendly .calendly-inline-widget { min-width: 300px; height: 700px; }

/* ---------- Pages légales : en-tête noir sans photo, texte courant lisible ---------- */

.page-hero.page-hero-simple { min-height: 0; padding-bottom: 80px; }
.page-hero-simple .page-hero-bloc { max-width: calc(820px + 2 * var(--gouttiere)); padding-top: 170px; }
.texte-legal { max-width: 760px; font-size: 16px; line-height: 1.65; color: #3A3A38; }
.texte-legal h2 { margin-top: 56px; font-size: 26px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: var(--noir); }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal h3 { margin-top: 28px; font-size: 17px; font-weight: 600; color: var(--noir); }
.texte-legal p, .texte-legal ul { margin-top: 12px; }
.texte-legal ul { padding-left: 20px; }
.texte-legal li + li { margin-top: 6px; }
.texte-legal a { color: var(--noir); text-decoration: underline; text-underline-offset: 2px; }
.texte-legal strong { font-weight: 600; color: var(--noir); }

/* ---------- Coaching solo : deux formules, chacune vers sa page de réservation ---------- */

.offres { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; } /* une colonne qui peut rétrécir (320 px) */
.resa-grille > * { min-width: 0; }
.compte-zone .pmpro_btn-submit-checkout { max-width: 100%; white-space: normal; } /* « Continuer vers le paiement sécurisé » passe à la ligne sur très petit écran */
.offre { padding: 40px 40px 36px; border-radius: 28px; background: var(--gris-fond); }
.offre-etiquette { display: inline-flex; padding: 7px 13px; border-radius: 999px; background: var(--blanc); font-size: 12px; font-weight: 600; }
.offre-titre { margin-top: 18px; font-size: 30px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
.offre-infos { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.offre-infos strong { padding: 6px 12px; border: 1px solid var(--gris-ligne); border-radius: 999px; font-size: 13px; font-weight: 600; }
.offre-texte { margin-top: 16px; max-width: 540px; font-size: 16px; line-height: 1.5; color: var(--texte-doux); }
.offre .wp-block-buttons { margin-top: 26px; }
.offre .wp-block-button.pilule > .wp-block-button__link { padding: 17px 28px; font-size: 14px; }

/* ---------- Cercle du jeudi : liste d'attente, abonnement, espace membre ---------- */

/* le prix, affiché avant l'inscription */
.formulaire-info { margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: var(--blanc); font-size: 14px; line-height: 1.55; color: var(--texte-doux); }
.formulaire-info strong { color: var(--noir); }
.bandeau-test { margin-top: 18px; padding: 12px 16px; border: 1px dashed #D9B93F; border-radius: 14px; background: #FFF8DC; font-size: 13px; line-height: 1.5; color: #5C4A08; }
.bandeau-test strong { color: #3D3104; }
.rejoindre-accueil { margin-top: 22px; font-size: 17px; font-weight: 600; }
.rejoindre-note { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--texte-doux); }
.offre .rejoindre-etat .wp-block-buttons { margin-top: 18px; }
.offre .rejoindre-etat .offre-texte + .wp-block-buttons { margin-top: 22px; }

/* boutons générés par l'extension (même rendu que les boutons des pages) */
.espace .wp-block-buttons, .espace-ferme .wp-block-buttons, .compte-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.wp-block-button.pilule-contour > .wp-block-button__link { border: 1px solid var(--gris-ligne); background: transparent; color: var(--noir); }
.wp-block-button.pilule-contour > .wp-block-button__link:hover { border-color: var(--noir); background: var(--noir); color: var(--blanc); }
.espace .wp-block-button.pilule > .wp-block-button__link, .espace-ferme .wp-block-button.pilule > .wp-block-button__link, .compte-actions .wp-block-button.pilule > .wp-block-button__link { padding: 16px 26px; font-size: 14px; }

/* espace membre */
.espace-ferme { max-width: 720px; padding: 40px 40px 36px; border-radius: 28px; background: var(--gris-fond); }
.espace-ferme .offre-texte { max-width: 560px; }
.espace-bonjour { margin: 16px 0 28px; font-size: clamp(30px, 3vw, 40px); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
.espace-grille { display: grid; grid-template-columns: 7fr 5fr; gap: 20px; align-items: stretch; }
.espace-carte { padding: 36px 36px 32px; border-radius: 28px; background: var(--gris-fond); }
.espace-zoom { background: var(--noir); color: var(--blanc); }
.espace-label { display: inline-flex; padding: 7px 13px; border-radius: 999px; background: var(--blanc); font-size: 12px; font-weight: 600; color: var(--noir); }
.espace-zoom .espace-label { background: var(--jaune); }
.espace-carte h3 { margin-top: 18px; font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; }
.espace-carte p:not(.espace-label) { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--texte-doux); }
.espace-zoom p:not(.espace-label) { color: rgba(255, 255, 255, .75); }
.espace-liens { margin: 18px 0 0; padding: 0; list-style: none; }
.espace-liens li { padding: 10px 0; border-top: 1px solid var(--gris-ligne); font-size: 15px; }
.espace-liens a { color: var(--noir); text-decoration: underline; text-underline-offset: 3px; }
.espace-replays { margin-top: 56px; }
.espace-replays h2 { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; }
.replays { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 22px; }
.replay { padding: 26px 26px 24px; border: 1px solid var(--gris-ligne); border-radius: 22px; }
.replay-date { font-size: 13px; color: var(--texte-doux); }
.replay-titre { margin-top: 6px; font-size: 19px; font-weight: 500; line-height: 1.3; }
.replay .wp-block-buttons { margin-top: 18px; }
.espace-vide { margin-top: 16px; font-size: 15px; color: var(--texte-doux); }

/* pages de Paid Memberships Pro (paiement, compte, connexion…) aux couleurs du site */
.compte-zone { max-width: 760px; }
/* les variables de PMPro sont redéfinies sur body : sa feuille, chargée après celle du thème, les remet sur :root */
body, body .pmpro {
  --pmpro--color--accent: #121212;
  --pmpro--color--contrast: #121212;
  --pmpro--color--base-2: #F2F2F0;
  --pmpro--color--border: #D9D9D5;
  --pmpro--base--border-radius: 18px;
  --pmpro--btn--border-radius: 999px;
  --pmpro--btn--top-bottom-padding: 16px;
  --pmpro--btn--left-right-padding: 28px;
  --pmpro--box-shadow: none;
}
.compte-zone .pmpro_card { border: 1px solid var(--gris-ligne); border-radius: 22px; }
/* un champ trop large ne doit pas élargir la page sur mobile (les fieldset ont min-width: min-content par défaut) */
.pmpro_form_fieldset { min-width: 0; }
.pmpro_form_input { max-width: 100%; box-sizing: border-box; }
.compte-zone .pmpro_form_input, .compte-zone input[type="text"], .compte-zone input[type="email"], .compte-zone input[type="password"] { padding: 14px 16px; border-radius: 14px; font-size: 16px; }
.compte-zone .pmpro_btn { font-weight: 600; }
.compte-zone .pmpro_btn-submit-checkout, .compte-zone .pmpro_btn-submit, .compte-zone input[type="submit"].pmpro_btn { border-color: var(--jaune); background: var(--jaune); color: var(--noir); }
.compte-zone .pmpro_btn-submit-checkout:hover, .compte-zone .pmpro_btn-submit:hover { background: #F1CB45; }
/* l'identifiant est créé automatiquement à partir de l'adresse e-mail */
#pmpro_form .pmpro_form_field-username { display: none; }
/* barre de l'espace membre : Mon espace · Mes factures · Se déconnecter */
.nav-membre { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.nav-membre a { display: inline-flex; padding: 10px 18px; border: 1px solid var(--gris-ligne); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--noir); text-decoration: none; transition: border-color .2s, background-color .2s; }
.nav-membre a:hover { border-color: var(--noir); }
.nav-membre a.actif { border-color: var(--noir); background: var(--noir); color: var(--blanc); }
.nav-membre a:last-child { margin-left: auto; border-color: transparent; color: var(--texte-doux); text-decoration: underline; text-underline-offset: 3px; }
/* abonnement résilié, accès restant */
/* résiliée, accès en cours : information discrète (fond neutre, le jaune seulement en accent) */
.espace-avis { position: relative; margin: 0 0 24px; padding: 20px 24px 20px 46px; border-radius: 20px; background: var(--gris-fond); border: 1px solid var(--gris-ligne); }
.espace-avis::before { content: ''; position: absolute; left: 22px; top: 27px; width: 10px; height: 10px; border-radius: 50%; background: var(--jaune); box-shadow: 0 0 0 4px rgba(246, 215, 107, .25); }
.espace-avis-titre { font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: -0.005em; color: var(--noir); }
.espace-avis p:not(.espace-avis-titre) { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--texte-doux); }
.espace-avis strong { color: var(--noir); font-weight: 600; }
/* carte « Prochain atelier » : la date en grand */
.espace-zoom h3.espace-prochain { font-size: clamp(26px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.02em; }
.espace-zoom .wp-block-buttons { margin-top: 22px; }
/* carte « Mon abonnement » : statut en pastille, détails en lignes, phrase rassurante, réactivation */
.abo-details { margin: 20px 0 0; padding: 0; }
.abo-details > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--gris-ligne); }
.abo-details dt { font-size: 14px; color: var(--texte-doux); }
.abo-details dd { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--noir); text-align: right; }
.abo-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--blanc); font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--noir); white-space: nowrap; }
.abo-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }
.abo-badge--actif::before { background: #2E9E5B; box-shadow: 0 0 0 3px rgba(46, 158, 91, .18); }
.abo-badge--resilie::before { background: var(--jaune); box-shadow: 0 0 0 3px rgba(246, 215, 107, .35); }
.espace-carte p.abo-rassurance { margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: var(--blanc); font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--noir); }
.espace .espace-abonnement .wp-block-buttons { margin-top: 20px; }
.espace-carte p.abo-note { margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--texte-doux); }
.espace-abonnement .espace-liens { margin-top: 22px; }
/* Accompagnements : le tarif des ateliers, près de l'offre */
.offre-prix-ligne { display: inline-block; margin-top: 22px; padding: 12px 18px; border-radius: 999px; background: var(--gris-fond); font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--noir); }
.offre-prix-ligne strong { font-weight: 700; white-space: nowrap; }
.split-texte .offre-prix-ligne, .fond-gris .offre-prix-ligne { background: var(--blanc); }
.offre-prix-ligne::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; background: var(--jaune); vertical-align: 1px; }
/* page de paiement : case « J'accepte les Conditions générales de vente » (une ligne de texte, lien bien visible) */
#pmpro_tos_fields .pmpro_form_label { display: block; position: relative; margin: 0; padding: 16px 18px 16px 52px; border: 1px solid var(--gris-ligne); border-radius: 18px; background: var(--blanc); font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--noir); cursor: pointer; }
#pmpro_tos_fields input#tos { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; margin: -10px 0 0; accent-color: var(--noir); cursor: pointer; }
#pmpro_tos_fields .pmpro_form_label a { color: var(--noir); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#pmpro_tos_fields .pmpro_asterisk { display: none; }
/* page après paiement : introduction au ton du site */
.compte-zone .confirmation-titre { margin: 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--noir); }
.compte-zone .confirmation-texte { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--texte-doux); }
/* réactivation à 0 € : récapitulatif (pas de reçu « payé ») */
.reactivation-etiquette { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--gris-fond); font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--noir); }
.reactivation-etiquette::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #2E9E5B; box-shadow: 0 0 0 3px rgba(46, 158, 91, .18); }
.reactivation-details { margin-top: 24px; }
.reactivation-details > div:last-child { border-bottom: 1px solid var(--gris-ligne); }
/* bas de page pour une membre : lien vers son espace à la place de la liste d'attente */
.attente-champ-membre { justify-content: space-between; }
.attente-membre-texte { flex: 1; min-width: 0; padding: 0 12px 0 18px; font-size: 14px; color: var(--blanc); text-align: left; }
.attente-membre-bouton { flex: none; display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 999px; background: var(--jaune); color: var(--noir); font: 600 13px/1 var(--police); text-decoration: none; white-space: nowrap; transition: background-color .2s; }
.attente-membre-bouton:hover { background: #F1CB45; }
/* accès terminé */
.espace-termine .offre-titre { font-size: clamp(26px, 2.6vw, 34px); }
/* conditions de l'offre */
.offre-points { margin: 18px 0 0; padding: 0; list-style: none; }
.offre-points li { position: relative; padding: 8px 0 8px 26px; font-size: 15px; line-height: 1.5; color: #3A3A38; }
.offre-points li::before { content: ''; position: absolute; left: 0; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--jaune); }
.offre-points strong { color: var(--noir); }
.espace-deconnexion { margin-top: 18px; font-size: 14px; }
.espace-deconnexion a { color: var(--texte-doux); text-decoration: underline; text-underline-offset: 3px; }

/* page de connexion : formulaire dans une carte grise, colonne noire « ton espace » à côté */
.resa-grille.connexion-grille { grid-template-columns: 7fr 5fr; }
.connexion-carte { padding: 44px 44px 40px; border-radius: 28px; background: var(--gris-fond); }
.connexion-carte .offre-titre { margin-top: 18px; }
.connexion-carte .pmpro, .connexion-carte .pmpro_section { margin: 0; padding: 0; }
.connexion-carte .pmpro_card { margin: 26px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.connexion-carte .pmpro_card_content { padding: 0; }
.connexion-carte .pmpro_card_title { display: none; }
.connexion-carte form p { margin: 0 0 18px; }
.connexion-carte form label, .connexion-carte .pmpro_form_label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--noir); }
.connexion-carte input[type="text"], .connexion-carte input[type="email"], .connexion-carte input[type="password"] {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--blanc);
  font: inherit;
  font-size: 16px;
  color: var(--noir);
  outline: none;
  transition: border-color .2s;
}
.connexion-carte input[type="text"]:focus, .connexion-carte input[type="email"]:focus, .connexion-carte input[type="password"]:focus { border-color: var(--noir); }
.connexion-carte .login-password { position: relative; }
.connexion-carte .pmpro_form_field-password-toggle { position: absolute; top: 0; right: 0; }
.connexion-carte .pmpro_form_field-password-toggle .pmpro_btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--texte-doux); font-size: 13px; font-weight: 500; white-space: nowrap; }
.connexion-carte .pmpro_form_field-password-toggle .pmpro_icon svg { width: 18px; height: 18px; }
.connexion-carte .login-remember label { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 500; }
.connexion-carte .login-remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--noir); }
/* sélecteurs plus forts que ceux de PMPro (.pmpro .pmpro_section #loginform .login-submit .button) */
.connexion-carte .pmpro_section #loginform .login-submit .button,
.connexion-carte .pmpro_section #loginform .login-submit .button:focus,
.connexion-carte .pmpro .pmpro_section .pmpro_btn-submit,
.connexion-carte input[type="submit"], .connexion-carte .pmpro_btn-submit {
  width: 100%;
  margin-top: 4px;
  padding: 18px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--jaune);
  color: var(--noir);
  font: 600 15px/1 var(--police);
  cursor: pointer;
  transition: background-color .2s;
}
.connexion-carte .pmpro_section #loginform .login-submit .button:hover,
.connexion-carte .pmpro .pmpro_section .pmpro_btn-submit:hover,
.connexion-carte input[type="submit"]:hover, .connexion-carte .pmpro_btn-submit:hover { background: #F1CB45; color: var(--noir); }
.connexion-carte .pmpro_card_actions { margin-top: 6px; padding: 20px 0 0; border-top: 1px solid var(--gris-ligne); background: none; }
.connexion-carte .pmpro_actions_nav a { font-size: 14px; color: var(--noir); text-decoration: underline; text-underline-offset: 3px; }
.connexion-carte .pmpro_message { margin: 22px 0 0; border-radius: 14px; }
/* résiliation (PMPro) : question, conséquences, deux choix ; puis message de confirmation */
.resiliation-carte .pmpro_card_content > p { margin: 0 0 14px; font-size: 16px; line-height: 1.6; color: var(--texte-doux); }
.resiliation-carte .pmpro_card_content > p:first-child { font-size: 19px; font-weight: 500; line-height: 1.4; color: var(--noir); }
.resiliation-carte .pmpro_form_submit { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.resiliation-carte .pmpro .pmpro_section .pmpro_btn-cancel {
  display: block;
  padding: 17px 28px;
  border: 1px solid var(--gris-ligne);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--noir);
  font: 600 15px/1 var(--police);
  text-align: center;
  text-decoration: none;
  transition: border-color .2s;
}
.resiliation-carte .pmpro .pmpro_section .pmpro_btn-cancel:hover { border-color: var(--noir); background: var(--blanc); color: var(--noir); }
.resiliation-carte .pmpro_message.pmpro_success {
  margin: 26px 0 0;
  padding: 22px 24px 22px 66px;
  border: 0;
  border-radius: 18px;
  background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23F6D76B'/%3E%3Cpath d='m8.5 14.5 3.6 3.6L19.5 10' fill='none' stroke='%23121212' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 22px 22px / 28px no-repeat;
  color: var(--noir);
  font-size: 16px;
  line-height: 1.6;
}
.resiliation-carte .pmpro_actions_nav { margin-top: 20px; font-size: 14px; }
.resiliation-carte .pmpro_actions_nav a { color: var(--noir); text-decoration: underline; text-underline-offset: 3px; }
.resiliation-carte .pmpro_table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 15px; }
.resiliation-carte .pmpro_table th, .resiliation-carte .pmpro_table td { padding: 12px 0; border-bottom: 1px solid var(--gris-ligne); text-align: left; }
.resiliation-carte .pmpro_table a { color: var(--noir); text-decoration: underline; }
.resiliation-carte:has(.pmpro_success) > .offre-titre { font-size: 0; }
.resiliation-carte:has(.pmpro_success) > .offre-titre::after { content: 'Résiliation confirmée'; font-size: 30px; }

/* mot de passe oublié / nouveau mot de passe : le titre de la carte suit le formulaire affiché */
.connexion-carte:has(#lostpasswordform) > .offre-texte, .connexion-carte:has(#resetpassform) > .offre-texte { display: none; }
.connexion-carte:has(#lostpasswordform) > .offre-titre, .connexion-carte:has(#resetpassform) > .offre-titre { font-size: 0; }
.connexion-carte:has(#lostpasswordform) > .offre-titre::after { content: 'Mot de passe oublié'; font-size: 30px; }
.connexion-carte:has(#resetpassform) > .offre-titre::after { content: 'Nouveau mot de passe'; font-size: 30px; }

/* pages de réservation : en-tête noir compact, le calendrier Calendly arrive tout de suite */
.page-hero.page-hero-resa { padding-bottom: 56px; }
.page-hero-resa .page-hero-bloc { padding-top: 150px; }
.section.section-resa { padding-top: 40px; }
.resa-retour { margin-bottom: 24px; font-size: 14px; font-weight: 500; }
.resa-retour a { color: var(--blanc); text-decoration: underline; text-underline-offset: 3px; }
.resa-agenda { min-width: 0; }
.resa-agenda .resa-cgv { margin-top: 0; }
.resa-agenda .resa-calendly { margin-top: 12px; min-height: 0; overflow: visible; border-radius: 0; background: none; }
/* Calendly annonce d'abord une hauteur de 26 px pendant son chargement : sans plancher,
   le calendrier resterait replié ; il s'agrandit ensuite seul (data-resize) */
.resa-agenda .calendly-inline-widget { min-height: 600px; height: 700px; }

/* ---------- Gabarits sans photo (blog, 404) : en-tête foncé sur fond blanc ---------- */

.page-simple { max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto; padding: 170px var(--gouttiere) 120px; }
.page-simple .chapo { margin-top: 20px; }
.page-simple .wp-block-buttons { margin-top: 32px; }
.page-simple .wp-block-post-title { font-size: 32px; font-weight: 500; letter-spacing: -0.02em; margin-top: 40px; }
body:not(.page) .entete { color: var(--noir); }
body:not(.page) .entete nav.menu .wp-block-navigation-item__content:hover { background: var(--gris-fond); }
body:not(.page) .entete .burger { background: var(--noir); }
body:not(.page) .entete .burger::before, body:not(.page) .entete .burger::after { background: var(--blanc); }

/* ---------- Tablette et mobile ---------- */

@media (max-width: 900px) {
  /* le bouton « Espace membre » reste visible dans la barre, entre le logo et le burger */
  .entete { grid-template-columns: 1fr auto auto; column-gap: 10px; }
  .entete .logo { white-space: nowrap; }
  .entete .wp-block-buttons.entete-droite { display: flex; }
  .entete .entete-droite .wp-block-button.pilule > .wp-block-button__link { padding: 14px 18px; font-size: 13px; }
  .resa-grille.connexion-grille { grid-template-columns: 1fr; }
  .connexion-carte { padding: 30px 22px 26px; border-radius: 22px; }
  .connexion-carte:has(#lostpasswordform) > .offre-titre::after, .connexion-carte:has(#resetpassform) > .offre-titre::after,
  .resiliation-carte:has(.pmpro_success) > .offre-titre::after { font-size: 26px; }
  .resiliation-carte .pmpro_message.pmpro_success { padding: 20px 20px 20px 60px; background-position: 18px 20px; }
  /* garde-fou : une taille réglée dans l'éditeur sur les grands mots ne vaut que sur grand écran ;
     sur mobile ils gardent leur taille calculée sur la largeur de l'écran */
  .hero .hero-nom { font-size: var(--nom-t) !important; }
  .page-hero .page-mot { font-size: calc((100vw - 2 * var(--gouttiere)) / var(--mot-ratio)) !important; }
  .entete nav.menu .wp-block-navigation__container { flex-direction: column; align-items: stretch; width: 100%; }
  .entete nav.menu .wp-block-navigation-item { display: block; }
  .entete nav.menu .wp-block-navigation-item__content { padding: 14px 16px; font-size: 16px; color: var(--noir); }
  .entete nav.menu .current-menu-item > .wp-block-navigation-item__content { background: var(--gris-fond); }
  .entete nav.menu .menu-reserver { display: block; margin-top: 8px; }
  .entete nav.menu .menu-reserver > .wp-block-navigation-item__content { text-align: center; font-weight: 600; background: var(--jaune); }
  .entete .burger::before, .entete .burger::after { background: var(--noir); }
  .entete.defile .burger::before, .entete.defile .burger::after,
  .entete.ouvert .burger::before, .entete.ouvert .burger::after { background: var(--blanc); }
  .entete.ouvert .burger::before { transform: translateY(3.75px) rotate(45deg); }
  .entete.ouvert .burger::after { transform: translateY(-3.75px) rotate(-45deg); }

  .hero .wp-block-image.hero-media img { height: 100%; max-width: 100%; }
  .hero-carte .champ a { padding: 16px 18px; }
  .ronds .wp-block-image img { width: 100%; height: auto; aspect-ratio: 1; }
  .avis-citation { font-size: 21px; }
  .pied .wp-block-image.pied-media img { height: auto; }
  .attente-champ input[type="email"] { font-size: 16px; }
  .temoin-citation { font-size: 20px; }
  .temoin.vedette .temoin-citation { font-size: 24px; }
  .form-envoi input.pilule-submit { width: 100%; }
  .champ-form .wpcf7-form-control-wrap input, .champ-form .wpcf7-form-control-wrap textarea { font-size: 16px; }
  input.pilule-submit, .attente-champ input.pilule-submit { padding: 15px 24px; font-size: 14px; }

  /* le module Calendly prend toute la largeur de la carte (il lui faut au moins 300 px) */
  .formulaire .resa-calendly { margin: 22px -20px -28px; border-radius: 0 0 22px 22px; }
  .page-hero.page-hero-simple { display: block; padding: 130px 0 48px; }
  .page-hero-simple .page-hero-bloc { display: block; padding: 0; }
  .page-hero-simple .fil { display: inline-flex; margin-left: var(--gouttiere); }
  .page-hero-simple .page-titre { margin-top: 18px; max-width: none; }
  .page-hero-simple .page-intro { margin-top: 14px; font-size: 14px; }
  .texte-legal { font-size: 15px; }
  .texte-legal h2 { margin-top: 44px; font-size: 22px; }

  /* sur téléphone, les formules passent avant la colonne noire, boutons pleine largeur */
  .resa-grille .offres { order: -1; }
  .offre { padding: 30px 22px 26px; border-radius: 22px; }
  .offre-titre { font-size: 26px; }
  .offre .wp-block-button, .offre .wp-block-button.pilule > .wp-block-button__link { width: 100%; }
  .page-hero.page-hero-resa { padding: 112px 0 32px; }
  .page-hero-resa .fil { display: none; }
  .page-hero-resa .page-titre { margin-top: 0; }
  .page-hero-resa .page-intro { font-size: 15px; }
  .section.section-resa { padding-top: 20px; }
  .section-resa .resa-agenda { order: -1; }
  .espace-grille { grid-template-columns: 1fr; }
  .nav-membre { gap: 6px; margin-bottom: 22px; }
  .nav-membre a { padding: 9px 14px; font-size: 13px; }
  .espace-avis { padding: 18px 18px 18px 40px; }
  .espace-avis::before { left: 18px; top: 25px; }
  .espace-avis-titre { font-size: 16px; }
  .offre-prix-ligne { border-radius: 18px; font-size: 14px; }
  .espace-carte, .espace-ferme { padding: 30px 22px 26px; border-radius: 22px; }
  .abo-details > div { padding: 12px 0; }
  .espace-replays { margin-top: 44px; }
  .espace-replays h2 { font-size: 26px; }
  .espace .wp-block-button, .espace .wp-block-button.pilule > .wp-block-button__link,
  .espace-ferme .wp-block-button, .espace-ferme .wp-block-button.pilule > .wp-block-button__link { width: 100%; }
  /* le calendrier prend toute la largeur de l'écran */
  .resa-agenda .resa-calendly { margin-left: calc(-1 * var(--gouttiere)); margin-right: calc(-1 * var(--gouttiere)); }
}

@media (max-width: 600px) {
  /* sur téléphone, deux pilules l'une sous l'autre : prénom, puis e-mail + bouton */
  .attente-champ { flex-direction: column; align-items: stretch; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .attente-prenom, .attente-email {
    min-height: 60px;
    padding: 6px;
    border: 1px solid var(--verre-bord);
    border-radius: 999px;
    background: var(--verre);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .attente-prenom { flex: none; }
  /* version membre : une pilule de verre avec le texte, puis le bouton */
  .attente-champ.attente-champ-membre { gap: 8px; }
  .attente-membre-texte { min-height: 60px; display: flex; align-items: center; justify-content: center; padding: 10px 18px; border: 1px solid var(--verre-bord); border-radius: 999px; background: var(--verre); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-align: center; }
  .attente-membre-bouton { justify-content: center; min-height: 60px; font-size: 14px; }
}

@media (max-width: 380px) {
  .attente-champ input.pilule-submit { padding: 15px 16px; }
  .entete { column-gap: 8px; }
  .entete .logo { font-size: 16px; }
  .entete .logo a::before { width: 20px; height: 20px; }
  .entete .entete-droite .wp-block-button.pilule > .wp-block-button__link { padding: 13px 13px; font-size: 12.5px; }
}

/* ==========================================================================
   Chantier du 05/10/2026 : menu « Mon espace », espace membre, Mon compte, Mes paiements, mots de passe
   ========================================================================== */

/* En-tête, personne connectée : « Mon espace ▾ » (même menu sur ordinateur et téléphone) */
.menu-membre { position: relative; }
.menu-membre-details { position: relative; }
.menu-membre-details > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 14px 18px; border: 1px solid transparent; border-radius: 999px; background: var(--jaune); color: var(--noir); font: 600 13px/1 var(--police, inherit); white-space: nowrap; cursor: pointer; user-select: none; transition: background-color .2s; }
.menu-membre-details > summary::-webkit-details-marker { display: none; }
.menu-membre-details > summary:hover { background: #F1CB45; }
.menu-membre-details > summary:focus-visible { outline: 2px solid var(--blanc); outline-offset: 2px; }
.menu-membre-fleche { width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.menu-membre-details[open] .menu-membre-fleche { margin-top: 3px; transform: rotate(-135deg); }
.menu-membre-liste { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; display: flex; flex-direction: column; min-width: 220px; padding: 8px; border-radius: 20px; background: var(--blanc); box-shadow: 0 18px 50px rgba(18, 18, 18, .18); }
.menu-membre-liste a { display: block; padding: 12px 14px; border-radius: 12px; color: var(--noir); font-size: 14px; font-weight: 500; line-height: 1.3; text-decoration: none; white-space: nowrap; }
.menu-membre-liste a:hover, .menu-membre-liste a:focus-visible { background: var(--gris-fond); outline: none; }
.menu-membre-liste a[aria-current="page"] { font-weight: 700; }
.menu-membre-liste a.menu-membre-sortie { margin-top: 4px; border-top: 1px solid var(--gris-ligne); border-radius: 0 0 12px 12px; color: var(--texte-doux); }

/* Espace membre : actions de « Mon abonnement », encart « Gérer mon compte » */
.espace-carte p.abo-lien { margin-top: 14px; font-size: 14px; }
.espace-carte p.abo-lien a { color: var(--noir); text-decoration: underline; text-underline-offset: 3px; }
.espace-abonnement .wp-block-button.pilule-contour > .wp-block-button__link { background: var(--blanc); }
.espace-compte { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 40px; padding: 22px 26px; border: 1px solid var(--gris-ligne); border-radius: 22px; }
.espace-compte-titre { margin: 0; font-size: 16px; font-weight: 600; color: var(--noir); }
.espace-compte-liens { display: flex; flex-wrap: wrap; gap: 10px; }
.espace-compte-liens a { display: inline-flex; align-items: center; padding: 12px 20px; border: 1px solid var(--gris-ligne); border-radius: 999px; color: var(--noir); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.espace-compte-liens a:hover { background: var(--noir); border-color: var(--noir); color: var(--blanc); }

/* Mon compte */
.compte { display: grid; gap: 22px; }
.compte-carte { padding: 32px 32px 30px; border-radius: 26px; background: var(--gris-fond); }
.compte-titre { margin: 0 0 18px; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--noir); }
.compte-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.compte-champ { display: grid; gap: 7px; min-width: 0; margin-bottom: 14px; }
.compte-grille .compte-champ { margin-bottom: 0; }
.compte-champ label { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--noir); overflow-wrap: anywhere; }
.compte-facultatif { margin-left: 4px; font-weight: 400; color: var(--texte-doux); }
.compte-champ input { width: 100%; min-width: 0; box-sizing: border-box; padding: 14px 16px; border: 1px solid var(--gris-ligne); border-radius: 14px; background: var(--blanc); color: var(--noir); font: 16px/1.3 inherit; }
.compte-champ input:focus { outline: none; border-color: var(--noir); }
.compte-note, .compte-texte { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--texte-doux); }
.compte-texte { margin-top: 0; font-size: 15px; }
.compte-ok { margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; background: var(--blanc); font-size: 15px; font-weight: 500; color: var(--noir); border-left: 4px solid #2E9E5B; }
.compte-alerte { margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; background: #FDECEC; border-left: 4px solid #C0392B; }
.compte-alerte p { margin: 0; font-size: 15px; color: #7A1F17; }
.compte-alerte p + p { margin-top: 4px; }
.compte-boutons { margin-top: 22px; }
.compte-boutons .wp-block-button__link { border: 1px solid transparent; cursor: pointer; font-size: 14px; }
.compte-boutons button.wp-block-button__link { font-family: inherit; }
.compte-mdp { margin-top: 18px; }
.compte-mdp > summary { list-style: none; display: inline-flex; align-items: center; padding: 13px 20px; border: 1px solid var(--noir); border-radius: 999px; background: var(--blanc); color: var(--noir); font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; }
.compte-mdp > summary::-webkit-details-marker { display: none; }
.compte-mdp[open] > summary { margin-bottom: 20px; background: var(--noir); color: var(--blanc); }
.compte-retour { margin: 8px 0 0; font-size: 15px; }
.compte-retour a { color: var(--noir); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.compte-retour-haut { margin: 0 0 18px; }

/* Champ de mot de passe + « Afficher » : le bouton est à côté du champ, jamais par-dessus */
.champ-mdp { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--gris-ligne); border-radius: 14px; background: var(--blanc); overflow: hidden; }
.champ-mdp:focus-within { border-color: var(--noir); }
.champ-mdp input { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 0; }
.champ-mdp input:focus { border: 0; }
.champ-mdp-voir { flex: none; padding: 0 16px; border: 0; border-left: 1px solid var(--gris-ligne); background: transparent; color: var(--texte-doux); font: 500 13px/1 inherit; cursor: pointer; white-space: nowrap; }
.champ-mdp-voir:hover, .champ-mdp-voir:focus-visible { color: var(--noir); outline: none; }

/* Formulaires PMPro (connexion, nouveau mot de passe…) : « Voir le mot de passe » sur la ligne du libellé, le libellé
   passe à la ligne si la place manque ; plus aucune superposition, à toutes les largeurs et tous les zooms */
.connexion-carte .login-password,
.connexion-carte .pmpro_form_field-password:has(.pmpro_form_field-password-toggle),
.compte-zone .pmpro_form_field-password:has(.pmpro_form_field-password-toggle) { position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label toggle" "input input" "reste reste"; align-items: end; column-gap: 12px; row-gap: 8px; }
.connexion-carte .login-password > label,
.connexion-carte .pmpro_form_field-password:has(.pmpro_form_field-password-toggle) > label,
.compte-zone .pmpro_form_field-password:has(.pmpro_form_field-password-toggle) > label { grid-area: label; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.connexion-carte .login-password > input,
.connexion-carte .pmpro_form_field-password:has(.pmpro_form_field-password-toggle) > input,
.compte-zone .pmpro_form_field-password:has(.pmpro_form_field-password-toggle) > input { grid-area: input; width: 100%; min-width: 0; }
.connexion-carte .pmpro_form_field-password-toggle,
.compte-zone .pmpro_form_field-password-toggle { grid-area: toggle; position: static; justify-self: end; align-self: end; margin: 0; }
.connexion-carte .pmpro_form_field-password > :not(label):not(input):not(.pmpro_form_field-password-toggle),
.compte-zone .pmpro_form_field-password > :not(label):not(input):not(.pmpro_form_field-password-toggle) { grid-area: reste; }

/* Mes paiements */
.paiements { margin-bottom: 8px; }
.paiements-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.paiements-table th { padding: 0 12px 12px 0; border-bottom: 1px solid var(--gris-ligne); font-size: 13px; font-weight: 600; color: var(--texte-doux); text-align: left; }
.paiements-table td { padding: 16px 12px 16px 0; border-bottom: 1px solid var(--gris-ligne); vertical-align: middle; color: var(--noir); }
.paiement-ref { display: block; margin-top: 3px; font-size: 13px; color: var(--texte-doux); }
.paiement-actions { white-space: nowrap; }
.paiement-actions a { display: inline-block; margin: 2px 14px 2px 0; color: var(--noir); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.recu-pmpro { overflow-x: auto; }

@media (max-width: 900px) {
  .espace-compte { margin-top: 32px; padding: 20px 22px; }
}
@media (max-width: 700px) {
  .compte-grille { grid-template-columns: minmax(0, 1fr); }
  .compte-carte { padding: 26px 20px 24px; border-radius: 22px; }
  .compte-boutons .wp-block-button, .compte-boutons .wp-block-button__link { width: 100%; justify-content: center; }
  /* tableau des paiements : une carte par paiement */
  .paiements-table thead { display: none; }
  .paiements-table, .paiements-table tbody, .paiements-table tr, .paiements-table td { display: block; width: 100%; }
  .paiements-table tr { margin-bottom: 14px; padding: 16px 18px; border: 1px solid var(--gris-ligne); border-radius: 18px; }
  .paiements-table td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border: 0; text-align: right; }
  .paiements-table td::before { content: attr(data-libelle); flex: none; font-size: 13px; font-weight: 600; color: var(--texte-doux); text-align: left; }
  .paiement-actions { flex-wrap: wrap; justify-content: flex-end; white-space: normal; }
  .paiement-actions a { margin: 0 0 0 14px; }
  .espace-compte { flex-direction: column; align-items: flex-start; }
  .espace-compte-liens, .espace-compte-liens a { width: 100%; }
  .espace-compte-liens a { justify-content: center; }
}
@media (max-width: 600px) {
  .menu-membre-details > summary { padding: 13px 13px; font-size: 12.5px; }
  .menu-membre-liste { min-width: 200px; }
}

/* « À propos » : les étapes du parcours ne débordent jamais (à 360 px, la 2e colonne poussait la grille hors de
   l'écran) : les colonnes peuvent rétrécir, les mots longs passent à la ligne */
.parcours-etape { min-width: 0; }
.parcours-etape h3, .parcours-etape p { overflow-wrap: break-word; hyphens: auto; }
/* bouton « Voir le mot de passe » de PMPro : zone de clic de 44 px sans changer la mise en page */
.connexion-carte .pmpro_form_field-password-toggle .pmpro_btn, .compte-zone .pmpro_form_field-password-toggle .pmpro_btn { position: relative; }
.connexion-carte .pmpro_form_field-password-toggle .pmpro_btn::after, .compte-zone .pmpro_form_field-password-toggle .pmpro_btn::after { content: ''; position: absolute; inset: -12px; }

/* Formulaire « nouveau mot de passe » de PMPro : le libellé est DANS la barre « Voir le mot de passe » ; la barre
   occupe toute la largeur (libellé à gauche, œil à droite, retour à la ligne si la place manque) */
.connexion-carte .pmpro_form_field-password-toggle:has(> label),
.compte-zone .pmpro_form_field-password-toggle:has(> label) { grid-column: 1 / -1; grid-row: 1; justify-self: stretch; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 12px; }
.connexion-carte .pmpro_form_field-password-toggle:has(> label) > label,
.compte-zone .pmpro_form_field-password-toggle:has(> label) > label { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }

/* Carte « Rejoins le Cercle du jeudi » (page des ateliers, cercle ouvert) : titre, prix, avantages, bouton, puis la
   réassurance et la note du mode test, discrète. Même finition pour la membre (accès à son espace). */
.formulaire:has(.rejoindre-carte) { padding: 52px 48px 44px; }
.rejoindre-carte { display: flex; flex-direction: column; }
.rc-etiquette { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 15px 8px 12px; border-radius: 999px; background: var(--blanc); font-size: 12.5px; font-weight: 600; line-height: 1.2; letter-spacing: .01em; color: var(--noir); }
.rc-etiquette::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--jaune); box-shadow: 0 0 0 3px rgba(246, 215, 107, .35), inset 0 0 0 1px rgba(18, 18, 18, .12); }
.rejoindre-carte .rc-titre { margin: 22px 0 0; font-size: clamp(30px, 3vw, 38px); font-weight: 500; line-height: 1.08; letter-spacing: -0.025em; color: var(--noir); }
.rc-accueil { margin: 12px 0 0; font-size: 17px; font-weight: 600; color: var(--noir); }
.rc-prix { display: flex; align-items: baseline; gap: 4px; margin: 28px 0 0; padding-top: 26px; border-top: 1px solid rgba(18, 18, 18, .1); }
.rc-montant { font-size: clamp(50px, 5vw, 64px); font-weight: 600; line-height: .95; letter-spacing: -0.04em; color: var(--noir); }
.rc-periode { font-size: 18px; font-weight: 500; color: var(--texte-doux); }
.rejoindre-carte .rc-points { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.rejoindre-carte .rc-points li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 14px; border-radius: 999px; background: var(--blanc); font-size: 13.5px; font-weight: 600; line-height: 1.2; color: var(--noir); white-space: nowrap; }
.rejoindre-carte .rc-points li::marker { content: none; }
.rejoindre-carte .rc-points li::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--noir); }
.rejoindre-carte .rc-action { margin-top: 32px; }
.rejoindre-carte .rc-action .wp-block-button { width: 100%; }
.rejoindre-carte .rc-action .wp-block-button.pilule > .wp-block-button__link { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 21px 28px; font-size: 16px; font-weight: 600; line-height: 1.2; box-shadow: 0 14px 28px -16px rgba(18, 18, 18, .45); transition: background-color .2s, box-shadow .2s, transform .2s; }
.rejoindre-carte .rc-action .wp-block-button.pilule > .wp-block-button__link::after { content: '→'; font-size: 18px; line-height: 1; transition: transform .2s; }
.rejoindre-carte .rc-action .wp-block-button.pilule > .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 18px 32px -16px rgba(18, 18, 18, .5); }
.rejoindre-carte .rc-action .wp-block-button.pilule > .wp-block-button__link:hover::after { transform: translateX(3px); }
.rejoindre-carte .rc-action .wp-block-button.pilule > .wp-block-button__link:focus-visible { outline: 2px solid var(--noir); outline-offset: 3px; }
.rc-rassurance { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 16px 0 0; font-size: 13px; line-height: 1.45; color: var(--texte-doux); text-align: center; }
.rc-rassurance span { display: inline-flex; align-items: center; gap: 6px; }
.rc-rassurance span::before { content: ''; flex: none; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10.5 3.2 3.2L15 7' fill='none' stroke='%23121212' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.rc-test { margin: 26px 0 0; padding-top: 16px; border-top: 1px dashed rgba(18, 18, 18, .14); font-size: 12px; line-height: 1.5; color: var(--texte-doux); text-align: center; }
.rc-test strong { display: inline-block; margin-right: 8px; padding: 3px 8px; border-radius: 999px; background: #FFF3C4; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5C4A08; vertical-align: 1px; }
.rc-texte { max-width: 46ch; margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: var(--texte-doux); }
.rc-detail { display: flex; flex-direction: column; gap: 6px; margin: 26px 0 0; padding: 20px 22px; border-radius: 20px; background: var(--noir); color: var(--blanc); }
.rc-detail span { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--jaune); }
.rc-detail strong { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--blanc); }
@media (max-width: 600px) {
  .formulaire:has(.rejoindre-carte) { padding: 34px 22px 28px; }
  .rejoindre-carte .rc-titre { margin-top: 18px; }
  .rc-prix { margin-top: 22px; padding-top: 20px; }
  .rejoindre-carte .rc-points li { padding: 8px 12px; font-size: 13px; }
  .rejoindre-carte .rc-action { margin-top: 26px; }
  .rejoindre-carte .rc-action .wp-block-button.pilule > .wp-block-button__link { padding: 19px 22px; font-size: 15.5px; }
  .rc-rassurance { gap: 6px 14px; }
  .rc-detail strong { font-size: 19px; }
}

/* Cadrages des photos (bloc Image → Styles, réglables par Diaba dans l'éditeur) : ils remplacent le cadrage prévu
   pour l'emplacement (y compris le zoom des grandes photos de haut de page). */
.wp-block-image.is-style-cadrage-haut img { object-position: 50% 12% !important; transform: none !important; }
.wp-block-image.is-style-cadrage-haut-gauche img { object-position: 25% 12% !important; transform: none !important; }
.wp-block-image.is-style-cadrage-haut-droite img { object-position: 75% 12% !important; transform: none !important; }
.wp-block-image.is-style-cadrage-centre img { object-position: 50% 50% !important; transform: none !important; }
.wp-block-image.is-style-cadrage-bas img { object-position: 50% 88% !important; transform: none !important; }
/* gros plan : la photo est agrandie autour du visage (portrait : visage dans le haut, un peu à droite du centre) */
.wp-block-image.is-style-cadrage-visage img { display: block; object-position: 50% 0% !important; transform: scale(1.8) !important; transform-origin: 58% 28% !important; }
/* dans les photos rondes, le cercle est porté par le cadre de l'image (sinon il grossirait avec le zoom) */
.ronds .wp-block-image.is-style-cadrage-visage, .bandeau-ronds .wp-block-image.is-style-cadrage-visage, .pastille .wp-block-image.is-style-cadrage-visage { border-radius: 50%; overflow: hidden; isolation: isolate; box-sizing: border-box; }
.ronds .wp-block-image.is-style-cadrage-visage { width: 176px; height: 176px; }
.bandeau-ronds .wp-block-image.is-style-cadrage-visage { width: 58px; height: 58px; border: 3px solid var(--noir); }
.pastille .wp-block-image.is-style-cadrage-visage { width: 40px; height: 40px; }
.ronds .is-style-cadrage-visage img, .bandeau-ronds .is-style-cadrage-visage img, .pastille .is-style-cadrage-visage img { width: 100%; height: 100%; border: 0; border-radius: 0; }
@media (max-width: 900px) {
  .ronds .wp-block-image.is-style-cadrage-visage { width: 100%; height: auto; aspect-ratio: 1; }
}

/* Ancres (#mes-informations, #formulaire…) : la cible s'arrête sous l'en-tête fixe, jamais derrière */
html { scroll-padding-top: 96px; }
.espace-heure { white-space: nowrap; }

/* Espace membre, compte et factures sur téléphone (320 à 480 px) */
@media (max-width: 900px) {
  /* menu mobile : il défile s'il dépasse la hauteur visible (barres Safari / Chrome) */
  .entete nav.menu { max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 700px) {
  /* Mes factures : le numéro de reçu passe sous la description au lieu de la serrer */
  .paiements-table td { flex-wrap: wrap; }
  .paiements-table .paiement-ref { flex-basis: 100%; margin-top: 0; text-align: right; }
  .paiements-table td.paiement-actions { justify-content: flex-end; row-gap: 6px; }
  .paiements-table td.paiement-actions::before { margin-right: auto; }
  /* reçu PMPro en colonne : « Montant : 120 € » (espace après le libellé) */
  .recu-pmpro .pmpro_table td[data-title]::before { margin-right: 6px; }
}
@media (max-width: 600px) {
  /* « Prochain atelier » : la date, puis l'horaire sur sa propre ligne */
  .espace-prochain .espace-sep { display: none; }
  .espace-prochain .espace-heure { display: block; }
  /* reçu et page après paiement : « ← Mes factures » et « Retour à mon espace → » en vrais boutons */
  .recu-pmpro .pmpro_actions_nav, .pmpro-confirmation .compte-zone .pmpro_actions_nav { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
  .recu-pmpro .pmpro_actions_nav a, .pmpro-confirmation .compte-zone .pmpro_actions_nav a { display: flex; align-items: center; justify-content: center; min-height: 46px; box-sizing: border-box; padding: 12px 18px; border: 1px solid var(--gris-ligne); border-radius: 999px; background: var(--blanc); color: var(--noir); font-size: 15px; font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none; }
  /* liens d'action en texte : zone de toucher confortable */
  .compte-retour a, .espace-carte p.abo-lien a { display: inline-block; padding: 10px 0; }
  .recu-pmpro .pmpro_btn-print { padding-top: 10px; padding-bottom: 10px; }
  main .wp-block-button.pilule > .wp-block-button__link { white-space: normal; } /* texte long : retour à la ligne propre (pas dans l'en-tête) */
}
@media (max-width: 480px) {
  /* Mon abonnement et réactivation : libellé au-dessus de la valeur (« 120 €/mois, sans engagement » sur toute la largeur) */
  .abo-details > div { flex-direction: column; align-items: flex-start; gap: 3px; }
  .abo-details dd { text-align: left; }
}

/* Très petits téléphones (320 px) : l'en-tête tient dans l'écran */
@media (max-width: 350px) {
  .entete { padding-left: 14px; padding-right: 14px; column-gap: 6px; }
  .logo { font-size: 15px; }
  .logo a { gap: 6px; }
  .logo a::before { width: 20px; height: 20px; }
  .entete .entete-droite .wp-block-button.pilule > .wp-block-button__link, .menu-membre-details > summary { padding: 12px 11px; font-size: 12px; min-height: 40px; box-sizing: border-box; }
}

/* ==========================================================================
   Retouches du 07/10/2026 (après la vérification du parcours membre sur mobile)
   ========================================================================== */

/* Paiement, « Ton compte » : l'adresse e-mail avant le mot de passe (l'ordre du code HTML est aussi rétabli par app.js,
   pour la navigation au clavier ; le préremplissage et la validation de PMPro ne changent pas) */
#pmpro_user_fields .pmpro_form_field-bemail { order: -1; }

/* Espace membre : la zone Replays sur un fond gris chaud (cartes claires), « Gérer mon compte » en noir */
.espace-replays { margin-top: 20px; padding: 40px 40px 42px; border-radius: 28px; background: var(--gris-fond); }
.espace-replays h2 { margin: 0; }
.espace-replays .replays { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); } /* jamais plus large que le panneau (320 px) */
.espace-replays .replay { background: var(--blanc); border-color: transparent; }
.espace-replays .espace-vide { grid-column: 1 / -1; margin: 0; padding: 20px 24px; border-radius: 20px; background: var(--blanc); line-height: 1.55; }
.espace-compte { margin-top: 20px; padding: 26px 30px; border: 0; border-radius: 28px; background: var(--noir); }
.espace-compte-titre { font-size: 17px; color: var(--blanc); }
.espace-compte-liens a { border-color: rgba(255, 255, 255, .3); color: var(--blanc); }
.espace-compte-liens a:hover { background: var(--blanc); border-color: var(--blanc); color: var(--noir); }
.espace-compte-liens a:focus-visible { outline: 2px solid var(--jaune); outline-offset: 2px; }

/* Mon compte : « Retour à mon espace → » en vrai bouton (pleine largeur sur téléphone, comme les cartes) */
.compte .compte-boutons.compte-retour-bouton { margin-top: 2px; }

/* Mot de passe modifié : confirmation claire (pastille verte cochée, titre, texte) */
.compte-succes { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 20px; padding: 18px 20px; border-radius: 18px; background: var(--blanc); }
.compte-succes-icone { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #2E9E5B; box-shadow: 0 0 0 4px rgba(46, 158, 91, .15); }
.compte-succes-icone::after { content: ''; position: absolute; left: 11px; top: 7px; width: 6px; height: 12px; border-right: 2.5px solid var(--blanc); border-bottom: 2.5px solid var(--blanc); transform: rotate(45deg); }
.compte-succes-titre { margin: 3px 0 0; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--noir); }
.compte-succes-texte { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: var(--texte-doux); }

@media (max-width: 900px) {
  .espace-replays { margin-top: 20px; padding: 30px 22px 24px; border-radius: 22px; }
  .espace-compte { margin-top: 20px; padding: 26px 22px 22px; border-radius: 22px; }
}
@media (max-width: 700px) {
  .espace-replays .espace-vide { padding: 18px 20px; }
  .espace-compte { gap: 16px; }
}
@media (max-width: 600px) {
  /* page après paiement : « Accéder à mon espace membre » aligné sur les deux boutons du dessus (même largeur, même
     hauteur, centré) */
  .pmpro-confirmation .compte-zone > .compte-actions { display: flex; flex-direction: column; margin-top: 10px; }
  .pmpro-confirmation .compte-zone > .compte-actions .wp-block-button { width: 100%; }
  .pmpro-confirmation .compte-zone > .compte-actions .wp-block-button.pilule > .wp-block-button__link { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; box-sizing: border-box; padding: 12px 18px; font-size: 15px; font-weight: 600; line-height: 1.3; text-align: center; }
  .compte-succes { gap: 12px; padding: 16px; }
  .compte-succes-icone { width: 28px; height: 28px; }
  .compte-succes-icone::after { left: 10px; top: 6px; }
}
@media (max-width: 360px) {
  /* très petits écrans : pastille et titre sur une ligne, le texte sur toute la largeur du bloc */
  .compte-succes { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; }
  .compte-succes > div { display: contents; }
  .compte-succes-titre { margin: 0; }
  .compte-succes-texte { grid-column: 1 / -1; margin-top: 10px; }
}