/* Styles personnalisés du thème — les tokens (couleurs, typo, espacements, ombres)
   et la mise en page (contentSize/wideSize) viennent de theme.json + tokens.css.
   Ici : reset minimal, utilitaires de marque et en-tête collant. Les composants
   spécifiques aux pages (héro, cartes, grilles, filtres…) s'ajoutent EN DESSOUS,
   calqués sur les maquettes du projet (classes posées via "className" dans les
   blocs, responsivité via les media queries de ce fichier). */

/* Reset : FSE ne pose PAS box-sizing:border-box globalement — sans lui, un
   élément width:100% + padding déborde de son conteneur. */
*, *::before, *::after { box-sizing: border-box; }

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

/* Chiffres ALIGNÉS dans les titres. Cormorant Garamond sert par défaut des
   chiffres elzéviriens (hauteur d'x, jambages sous la ligne) : dans un titre
   tout en capitales, le « 1 » de « 1. ÉDITEUR DU SITE » tombe à la taille d'un
   « ı » et se confond avec un I. Invisible avant le 2026-09-08 : Oswald n'a que
   des chiffres alignés. Sans effet sur les titres restés en --font-label. */
h1, h2, h3, h4, h5, h6 { font-variant-numeric: lining-nums; }

/* Constantes de gabarit du THÈME (≠ tokens du design system, qui vivent dans
   tokens.css) : hauteur de l'en-tête collant, réutilisée par la hauteur du héro
   et le décalage de défilement des ancres. */
:root { --header-h: 70px; }

/* Défilement doux (ancres du menu) — neutralisé si l'utilisateur a demandé
   moins d'animations. La marque est immobile : c'est la SEULE mise en mouvement
   du site, et elle n'est pas décorative (elle relie les ancres du menu). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Sur-titre (eyebrow) — capitales condensées espacées (Oswald), cf. DA 2026-07.
   ⚠️ Couleur : la terre cuite PLEINE (#B05C33) ne tient pas en texte de 12 px —
   4,00:1 sur sable-100 et 3,62:1 sur le sable-200 des sections alternées, sous
   le seuil AA (4,5:1). --text-accent pointe donc sur la terre cuite FONCÉE
   (#8E4726) : 5,74:1 sur sable-100 et 5,21:1 sur sable-200, même famille
   d'accent. Tous les libellés du site l'emploient. */
.eyebrow {
  display: block;
  font-family: var(--font-label);
  font-weight: var(--weight-regular);
  letter-spacing: var(--type-eyebrow-spacing);
  text-transform: uppercase;
  font-size: var(--type-eyebrow-size);
  color: var(--text-accent);
  margin: 0 0 var(--space-4);
}
.eyebrow.on-dark { color: var(--accent-300); }

/* Liste sans puces (footer, listes de liens) */
.list-plain { list-style: none; padding-left: 0; margin-left: 0; }

/* En-tête collant translucide */
header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }

/* Pas d'écart sous l'en-tête : le contenu (<main>/<div>) est le 2e enfant de
   .wp-site-blocks, il hérite donc du block-gap global (margin-block-start:24px).
   On le neutralise pour que le héro colle à l'en-tête.
   (Le block-gap reste piloté par theme.json → styles.spacing.blockGap.) */
.wp-site-blocks > header + * { margin-block-start: 0; }

/* MÊME MÉCANISME, généralisé à tous les composants à grille/flex CUSTOM posés
   sur un groupe FSE "layout":{"type":"default"} (is-layout-flow) : le cœur
   ajoute quand même margin-block-start:24px (blockGap) à tout enfant NON
   PREMIER de ce groupe — en plus du `gap` (grid/flex) déjà posé par le
   composant. Seul le 1er enfant y échappe (réservé par le cœur), donc :
   - sur une grille à 2+ colonnes, le 2e élément d'une même RANGÉE se
     retrouve décalé de 24px vers le bas par rapport au 1er (invisible en
     une seule colonne — mobile — donc invisible aux 3 largeurs de contrôle
     si on ne regarde pas les rangées de 2+ au pixel) ;
   - sur une liste en colonne (flex + gap), l'écart DOUBLE au lieu de rester
     celui du token (ex. .creds : 44px rendus pour un token de 20px).
   Repéré le 2026-09-19 sur .steps (« Au printemps » et « En été », même
   rangée, décalés l'un par rapport à l'autre) ; le même montage (groupe
   "default" + display:grid/flex perso) est réutilisé par tous les
   composants listés ci-dessous, sur la plupart des pages du site — d'où le
   correctif unique ici plutôt que huit correctifs locaux. */
.pills > .pill,
.tools > .gallery,
.steps > .step,
.about > .about-photo + *,
.gallery > .shot,
.places > .place,
.creds > .cred,
.infos > .info,
.tools .tool {
  margin-block-start: 0;
}

/* ⚠️ …mais SEULES les pages à héro doivent coller à l'en-tête. Ailleurs
   (mentions légales, 404, archives), le contenu démarre alors pile sous un
   en-tête COLLANT, et le titre passe dessous : avec --leading-tight (1,02) la
   boîte de ligne fait 36,7 px pour 36 px de police, alors que les capitales
   Oswald accentuées montent à ~53 px. Les ~9 px qui dépassent vers le haut se
   glissent sous l'en-tête et l'accent de « MENTIONS LÉGALES » est rogné.
   Invisible dans l'ancienne DA (serif, 1,2, pas de capitales forcées).
   Le sélecteur cible la présence d'un héro, pas un gabarit : une page qui en
   gagne un sera traitée correctement sans retoucher ce fichier. */
.wp-site-blocks > header + *:not(:has(.hero)) { padding-block-start: var(--space-12); }

/* En-tête (nav de la maquette) — 70 px, sable translucide, filet au défilement.
   Pas de blanc pur dans cette identité : le fond est le sable #F5EADC.
   ⚠️ Le flou et le fond vivent sur un ::before, PAS sur .site-header lui-même.
   `backdrop-filter` crée un containing block pour tout descendant
   `position:fixed` (spec CSS, comme `transform`/`filter`) : posé directement
   sur .site-header — ancêtre du menu mobile (wp:navigation, overlayMenu) —
   il piège la modale plein écran du cœur dans la hauteur de l'en-tête (~70px
   au lieu de 100dvh). Repéré le 2026-09-19 : le menu burger n'ouvrait qu'un
   bandeau de 70px avec « CONSULTATION » coupé, tout le reste invisible. Le
   ::before reproduit le même rendu (couche floutée derrière le contenu de
   l'en-tête) sans que .site-header porte lui-même le filtre. */
.site-header { position: relative; border-bottom: 1px solid transparent; transition: border-color var(--transition-base); }
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(245, 234, 220, 0.80);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background var(--transition-base);
}
.site-header.is-scrolled { border-bottom-color: var(--color-divider); }
.site-header.is-scrolled::before { background: rgba(245, 234, 220, 0.97); }
.site-header__inner { min-height: var(--header-h); }

/* Marque */
.nav-brand {
  font-family: var(--font-label);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  margin: 0;
}
.nav-brand a { color: var(--text-primary); text-decoration: none; }
/* ⚠️ Le rayon 24px de core/image (theme.json) est pensé pour des photos, pas
   des icônes de 32px : sur une image aussi petite, il dépasse la moitié de la
   largeur et arrondit le sceau en pilule/ovale au lieu du carré à coins
   arrondis du SVG — invisible avec l'ensō (déjà rond), visible avec le sceau. */
.nav-brand-mark.wp-block-image { margin: 0; flex: 0 0 auto; }
.nav-brand-mark img { border-radius: 0; }

/* Liens du menu */
.nav-links .wp-block-navigation-item__content {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
  /* « Qi Gong » est le seul libellé à 2 mots : sans ce verrou, c'est le
     premier à se replier sur 2 lignes quand la barre se resserre (5 liens +
     Réserver depuis l'ajout de Conseils, 2026-09-08) — vérifié : la barre
     tient sur une seule ligne jusqu'à 768 px sans ce filet, elle déborde
     seulement en dessous du seuil du menu burger. */
  white-space: nowrap;
}
.nav-links .wp-block-navigation-item__content:hover,
.nav-links .wp-block-navigation-item__content:focus { color: var(--text-primary); }

/* Sous-menu (« Qi Gong » → Visio / Ateliers) — premier du site, CSS jamais
   écrit jusqu'ici (barre à plat depuis la décision client du 2026-08-28,
   revenue le 2026-09-19 pour regrouper les deux pages Qi Gong sous un seul
   onglet). Le cœur fournit déjà le comportement (survol ET clic/clavier, via
   l'Interactivity API — data-wp-on--mouseenter/click sur le <li>) ; seul
   l'habillage manque : sans lui, le panneau sort en blanc pur, coins vifs,
   ce que la DA proscrit explicitement (« aucun blanc pur », « tout est
   arrondi »). Ne pas toucher position/opacity/visibility/z-index : c'est le
   cœur qui pilote l'ouverture, ce fichier n'habille que l'apparence.
   ⚠️ Habillage réservé au menu à PLAT (desktop, panneau flottant en hover) :
   `:not(.is-menu-open)` l'exclut du menu MOBILE, où le cœur affiche déjà ce
   même sous-menu en ligne, `position:static`, sans carte — lui appliquer le
   même fond/ombre/rayon y ferait flotter une carte détachée au milieu de la
   liste plutôt qu'un sous-groupe qui s'y intègre. */
/* ⚠️ `.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container`
   du cœur pose `background-color:#fff;border:1px solid #00000026` à (0,3,0) —
   plus spécifique que le simple `.nav-links .wp-block-navigation__…` (0,2,0)
   ci-dessous. Classe doublée + !important sur ces deux seules propriétés,
   même parade que `.site-footer.site-footer .wp-block-columns` documentée
   dans le socle (pieges/fse-blocs.md, « flex-wrap: nowrap !important »). */
.nav-links .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
  background: var(--surface-card) !important;
  border: none !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-2) 0;
  margin-top: var(--space-3);
  min-width: 176px;
}
/* Pont invisible entre le lien « Qi Gong » et son panneau : le margin-top
   ci-dessus laisse un vide de 12px qui n'appartient à aucun élément du <li>.
   Le cœur ouvre/ferme le sous-menu via mouseenter/mouseleave posés sur le
   <li> (Interactivity API, pas du :hover CSS) — traverser ce vide fait
   passer le curseur sur `.nav-links` (pas un descendant du <li>), ce qui
   déclenche closeMenuOnHover avant même d'atteindre « Visio »/« Ateliers ».
   Constaté à l'écran le 2026-09-20 : impossible de sélectionner les liens du
   sous-menu, il se referme au mouvement. Ce ::after comble exactement ce
   vide (même hauteur que le margin-top, même largeur/alignement que le
   panneau) pour que le curseur reste sur un descendant du <li> pendant la
   traversée. Toujours scopé au menu à PLAT comme le reste de ce bloc :
   absent en mobile, où le sous-menu est en ligne sans ce panneau flottant. */
.nav-links .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item.has-child::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 176px;
  height: var(--space-3);
}
.nav-links .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: var(--space-3) var(--space-5);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nav-links .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.nav-links .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
  background: var(--color-sand-100);
}
.nav-links .wp-block-navigation-submenu__toggle svg { transition: transform var(--transition-fast); }
.nav-links .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Menu MOBILE (modale plein écran, overlayMenu:"mobile") — jamais habillé
   avant le 2026-09-19 (personne n'avait ouvert le menu burger au pixel).
   Le cœur pose background-color:inherit, qui remonte jusqu'au blanc du
   <body> (rien d'explicite entre les deux) — repeint ici au sable, comme
   partout ailleurs sur le site. items-justified-right (posé pour la barre à
   plat desktop) aligne aussi la liste plein écran à droite, illisible en
   pleine largeur : repasse à gauche uniquement dans cet état. Le padding du
   cœur est un clamp() sur --wp--style--root--padding-*, jamais défini par ce
   thème (pas de fonctionnalité « root padding » dans theme.json) : il se
   résout à 0, texte collé au bord de l'écran — reposé ici en dur. */
.wp-block-navigation__responsive-container.is-menu-open { background-color: var(--color-sand-100) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding: var(--space-8) var(--space-6) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open li.has-child {
  align-items: flex-start !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: var(--text-lg);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: var(--text-base);
  color: var(--text-secondary);
}

/* Marque (logo image) */
.logo-mark { margin: 0; }
.logo-mark img { height: 48px; width: auto; display: block; }

/* ==========================================================================
   BANNIÈRE COOKIES (RGPD) — composant générique de base, ne pas déplacer dans
   « Composants du projet » ci-dessous (voir functions.php + cookie-consent.js).
   ========================================================================== */
#latherapiedutao-cookie-consent[hidden] { display: none; }

.cookie-banner {
  position: fixed;
  left: var(--space-md);
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-md);
  background: var(--surface-card);
  color: var(--text-body);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__text { margin: 0; font-size: 14px; flex: 1 1 320px; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.cookie-panel {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.5);
}
.cookie-panel[hidden] { display: none; }
.cookie-panel__dialog {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-lg);
  background: var(--surface-card);
  color: var(--text-body);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.cookie-panel__title { margin-top: 0; }
.cookie-panel__item { margin-bottom: var(--space-sm); }
.cookie-panel__label { display: flex; align-items: center; gap: var(--space-xs); font-weight: 600; }
.cookie-panel__description { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.cookie-panel__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }

/* Symétrie CNIL : « Tout accepter » et « Tout refuser » partagent EXACTEMENT
   la même règle — ne jamais les différencier en poids visuel ou contraste. */
.cookie-btn {
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--transition-fast);
}
/* ⚠️ Fond en --accent-600 (terre cuite foncée) et NON --accent-500 : la terre
   cuite pleine avec un libellé sable-50 ne donne que 4,41:1, sous AA. La
   variante foncée remonte à 6,34:1 ; le survol passe au vert forêt (10,99:1). */
.cookie-btn--primary {
  border: 1px solid var(--accent-600);
  background: var(--accent-600);
  color: var(--neutral-0);
}
.cookie-btn--primary:hover { background: var(--accent-700); border-color: var(--accent-700); }
.cookie-btn--secondary {
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-body);
}
.cookie-btn--secondary:hover { background: var(--surface-alt); }

/* ==========================================================================
   LIENS SUR FOND SOMBRE (accessibilité)
   ==========================================================================
   La couleur de lien globale (theme.json → elements.link) est la terre cuite
   foncée #8E4726 : 5,74:1 sur sable (AA ✓), mais seulement 1,86:1 sur le vert
   forêt profond #212A1C du pied de page et des bandes sombres. La terre cuite
   douce #CE8A64 remonte à 5,27:1 en restant dans la famille d'accent ; le
   survol passe au sable clair (13,83:1).
   ⚠️ Le fond sombre DOIT rester le forest-deep #212A1C : sur le vert forêt
   standard #2F3B28, ce même #CE8A64 retombe à 4,19:1, sous le seuil AA.
   Mesurer tout nouveau couple couleur/fond AVANT de l'introduire. */
.has-inverse-background-color a:where(:not(.wp-element-button)),
.has-black-background-color a:where(:not(.wp-element-button)) {
  color: var(--color-terracotta-soft);
}
.has-inverse-background-color a:where(:not(.wp-element-button)):hover,
.has-inverse-background-color a:where(:not(.wp-element-button)):focus,
.has-black-background-color a:where(:not(.wp-element-button)):hover,
.has-black-background-color a:where(:not(.wp-element-button)):focus {
  color: var(--color-sand-50);
}

/* ==========================================================================
   COMPOSANTS DU PROJET — portage de la maquette d'accueil du projet Claude
   Design (ui_kits/website/index.html, DA 2026-07). Les classes sont posées
   par les blocs (patterns/accueil.php, parts/*.html) ; la maquette n'ayant
   AUCUNE règle responsive, les points de rupture sont écrits ici (section
   RESPONSIVE). Deux écarts DÉLIBÉRÉS avec les valeurs brutes de la maquette,
   pour l'accessibilité (cf. tokens.css et la règle ci-dessus) :
     — le fond du bloc « Prendre rendez-vous » emploie --color-forest-deep
       et non --color-forest brut (sinon les liens terre-cuite-douce retombent
       à 4,19:1) ;
     — tout texte de taille normale sur --color-ink-faint (libellés, légendes)
       emploie --text-muted à la place (3,25:1 → 6,78:1 sur sable).
   ========================================================================== */

/* Décalage des ancres du menu sous l'en-tête collant. */
.section, .hero { scroll-margin-top: calc(var(--header-h) + var(--space-2)); }

/* Rythme vertical des sections + alternance de fond sable/sable soutenu. */
.section {
  padding: var(--space-24) var(--space-10);
}
.section.alt { background-color: var(--color-sand-200); }
/* Bande de citation et section « Approche » : pas de double espace avec la
   section précédente (le bandeau/la photo suivent immédiatement). */
.section-banner { padding-top: 0; padding-bottom: var(--space-4); }
.section-top-flush { padding-top: 0; }

/* --------------------------------------------------------------------------
   HÉRO — ensō à l'encre, H1 en son cœur. Seul motif décoratif du héro
   (bambous et montagnes de l'ancienne identité retirés) ; le contenu de
   l'ensō est une vraie image (contenu éditable), pas un décor en CSS.
   -------------------------------------------------------------------------- */
.hero {
  padding: var(--space-12) var(--space-10) var(--space-20);
  background-color: var(--color-sand-100);
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-enso {
  position: relative;
  width: min(540px, 86vw);
  margin-top: var(--space-4);
}
.hero-enso-img { margin: 0; }
.hero-enso-img img { display: block; width: 100%; height: auto; opacity: 0.9; }
.hero-enso-core {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 13%;
  text-align: center;
}
.hero-title {
  margin: 0;
  font-size: var(--text-3xl);
}
/* Les articles ("La", "du") en plus petit que les mots pleins ("Thérapie", "Tao") —
   em pour suivre --text-3xl/2xl sans dupliquer le point de rupture mobile. */
.hero-title-sm { font-size: 0.55em; }
/* Sceau resserré sous "TAO" — la carte de visite le colle plus près du texte
   que l'espacement des lignes elles-mêmes, pas un intervalle de grille. */
.hero-seal { margin: var(--space-2) 0 0; }
.hero-seal img { display: block; border-radius: 0; }
.hero-script { margin-top: var(--space-2); }
.hero-cta { margin-top: var(--space-8); }
.hero-meta {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  justify-content: center;
  margin: var(--space-8) 0 0;
  font-family: var(--font-label);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   TITRAILLE DE SECTION — capitales condensées (contrat theme.json), le poids
   700 de la maquette est un cran au-dessus du 600 par défaut des <h2>/<h3>.
   -------------------------------------------------------------------------- */
.section-heading {
  font-size: clamp(1.75rem, 4vw, var(--text-2xl));
  font-weight: var(--weight-bold);
  margin: var(--space-3) 0 0;
}

/* Accent manuscrit (Caveat) — une demi-phrase, jamais un titre entier ni un
   paragraphe, une seule occurrence par bloc (règle DA 2026-07). */
.script {
  display: block;
  margin: 0;
  font-family: var(--font-script);
  font-weight: var(--weight-semibold);
  color: var(--color-terracotta);
  line-height: var(--leading-script);
  font-size: var(--text-xl);
}

/* Trait de pinceau sous le titre. Posé en MASQUE (SVG currentColor) et non en
   background-image : un masque laisse la couleur venir du background ci-dessous
   et suivre les tokens. Largeur ≈ 110 px, une seule fois par bloc. */
hr.wp-block-separator.brush-underline {
  width: 110px;
  max-width: 110px;
  height: 8px;
  border: 0;
  background: var(--color-forest);
  -webkit-mask: url(../img/brush-underline.svg) left center / contain no-repeat;
  mask: url(../img/brush-underline.svg) left center / contain no-repeat;
  opacity: 1;
  margin: var(--space-4) auto var(--space-2) 0;
}

.lead {
  margin: var(--space-6) 0 var(--space-10);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  color: var(--text-secondary);
  max-width: 46ch;
}
.lead-tools, .lead-about {
  margin: var(--space-6) 0 var(--space-10);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  max-width: none;
}
.lead-about em { font-style: normal; color: var(--text-accent); font-weight: var(--weight-bold); }

/* --------------------------------------------------------------------------
   PASTILLES D'ICÔNE — rondes, lavis sauge + icône forêt. Communes aux motifs
   de consultation, aux soins, aux credentials du praticien.
   -------------------------------------------------------------------------- */
.dot {
  flex: 0 0 auto;
  width: var(--dot-md);
  height: var(--dot-md);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-band);
  color: var(--color-forest);
}
.dot-sm { width: 40px; height: 40px; }
.dot-enso.wp-block-image { margin: 0; display: flex; align-items: center; justify-content: center; }
.dot-enso img { width: 26px; height: auto; }

/* --------------------------------------------------------------------------
   SECTION « MOTIFS DE CONSULTATION » — grille de pilules.
   -------------------------------------------------------------------------- */
.pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pill {
  background: var(--surface-card);
  border-radius: var(--radius-pill);
  padding: 10px 26px 10px 10px;
  column-gap: var(--space-5);
}
.section.alt .pill { background: var(--surface-card); }
.pill p { margin: 0; font-size: var(--text-base); color: var(--text-body); line-height: 1.35; }
.pill-wide { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   SECTION « LES SOINS » — liste d'outils + galerie de photos.
   -------------------------------------------------------------------------- */
.tools {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-16);
  align-items: start;
}
.tool { column-gap: var(--space-5); margin-bottom: var(--space-8); }
.tool h3 { margin: 0; }
.tool p { margin: 4px 0 0; font-size: var(--text-base); color: var(--text-secondary); }

.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.shot {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-sand-200);
  min-height: 190px;
}
.shot-span { grid-column: span 2; min-height: 240px; }
.shot-img { margin: 0; height: 100%; }
.shot-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.shot .tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  margin: 0;
  font-family: var(--font-label);
  font-weight: var(--weight-medium);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-forest);
  color: var(--color-sand-50);
}
/* Placeholder — à défaut de photo (jamais une image d'illustration générique). */
.ph {
  position: absolute;
  inset: 0;
  background: var(--color-sand-200);
  box-shadow: inset 0 0 0 1px var(--color-divider);
  display: flex;
  align-items: flex-end;
  padding: 14px;
}
.ph code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--surface-card);
  padding: 5px 9px;
  border-radius: var(--radius-xs);
}

/* --------------------------------------------------------------------------
   SECTION « COMPRENDRE » — parcours de consultation en 4 étapes.
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12) var(--space-16);
  margin-top: var(--space-12);
}
.step { column-gap: var(--space-6); }
.step .num {
  flex: 0 0 auto;
  width: var(--dot-md);
  height: var(--dot-md);
  margin: 0;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-label);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  background: var(--surface-band);
  color: var(--color-forest);
}
.step h3 { margin: 0; }
.step p { margin: 6px 0 0; font-size: var(--text-base); color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   BANDEAU DE CITATION — lavis sauge, respiration entre deux sections denses.
   -------------------------------------------------------------------------- */
.banner {
  column-gap: var(--space-10);
  background: var(--surface-band);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-12);
}
.banner-enso.wp-block-image { margin: 0; flex: 0 0 auto; }
.banner-enso img { width: 64px; height: auto; opacity: 0.45; }
.banner-quote {
  margin: 0;
  color: var(--color-forest);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   SECTION « APPROCHE » — vision du praticien.
   -------------------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.about-photo.wp-block-image {
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--color-sand-200);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }

.creds { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-8); }
.cred { column-gap: var(--space-5); }
.cred h3 { margin: 0; }
.cred p { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   SECTION « CONTACT » — carte sombre arrondie.
   ⚠️ Fond forest-deep (PAS le forest standard de la maquette brute) : les liens
   terre-cuite-douce de ce bloc ne passent l'AA (5,27:1) que sur le forest-deep
   (#212A1C) ; sur le vert forêt standard ils retombent à 4,19:1.
   -------------------------------------------------------------------------- */
.contact {
  background: var(--color-forest-deep);
  color: var(--color-sand-50);
  border-radius: var(--radius-xl);
  padding: var(--space-16);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
/* Classe doublée : le blockGap du cœur, servi après le thème à spécificité
   égale, poserait sinon 24px au-dessus de la 2e colonne. */
.contact.contact > * { margin-block-start: 0; }
.contact .section-heading,
.contact .eyebrow { color: var(--color-sand-50); }
.eyebrow--honey { color: var(--color-honey); }
.contact .script { color: var(--color-terracotta-soft); }
.contact-lead { margin-top: var(--space-6); max-width: 34ch; color: rgba(245, 234, 220, 0.78); }
.contact-cta { margin-top: var(--space-8); }
.contact a:where(:not(.wp-element-button)) { color: var(--color-terracotta-soft); }
.contact a:where(:not(.wp-element-button)):hover,
.contact a:where(:not(.wp-element-button)):focus { color: var(--color-sand-50); }

/* Panneau de réservation : un groupe par lieu, plus le cours en ligne. Les
   libellés de boutons se répètent d'un groupe à l'autre (« Séance 1 h »), d'où
   l'aria-label qui porte le lieu — au lecteur d'écran, l'intertitre ne suffit
   pas à lever l'ambiguïté. */
.contact-book { display: flex; flex-direction: column; gap: var(--space-8); }
.contact-book > .contact-book-group { margin-block-start: 0; }
.contact-book .eyebrow { margin: 0; }
.contact-book .wp-block-buttons { margin-block-start: var(--space-4); gap: var(--space-3); }
/* Le contour est dessiné pour un fond clair (vert forêt sur transparent) :
   posé tel quel sur le forest-deep du bloc, il serait invisible. */
.contact .btn-outline .wp-block-button__link {
  color: var(--color-sand-50);
  border-color: rgba(245, 234, 220, 0.45);
}
.contact .btn-outline .wp-block-button__link:hover,
.contact .btn-outline .wp-block-button__link:focus {
  background: var(--color-sand-50);
  color: var(--color-forest-deep);
}

.infos { display: flex; flex-direction: column; gap: var(--space-5); }
.info { column-gap: var(--space-4); font-size: var(--text-base); }
.info p { margin: 0; }
.info .k {
  width: 38px;
  height: 38px;
  margin: 0;
  border-radius: var(--radius-full);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 234, 220, 0.1);
  color: var(--color-sand-100);
  font-family: var(--font-label);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   BOUTONS — la base (encre, petites capitales) vient de theme.json ;
   ici les variantes de la maquette : plein / contour.
   -------------------------------------------------------------------------- */
.btn .wp-block-button__link {
  padding: 15px var(--space-10);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  line-height: 1;
  border-radius: var(--radius-pill);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.btn-outline .wp-block-button__link {
  background: transparent;
  color: var(--color-forest);
  border: 1px solid var(--color-forest);
}
.btn-outline .wp-block-button__link:hover,
.btn-outline .wp-block-button__link:focus {
  background: var(--color-forest);
  color: var(--color-sand-50);
}
.nav-cta-wrap.wp-block-buttons,
.nav-cta.wp-block-button { flex: 0 0 auto; }
.nav-cta .wp-block-button__link { padding: 10px var(--space-6); white-space: nowrap; }

/* --------------------------------------------------------------------------
   PIED DE PAGE (fond encre)
   -------------------------------------------------------------------------- */
.site-footer { color: var(--color-sand-300); }
.site-footer .footer-inner {
  padding-bottom: 36px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(176, 168, 160, 0.15);
}
.footer-brand-name {
  margin: 0 0 var(--space-2);
  font-size: 1.1rem;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
}
.site-footer .footer-brand-name a { color: var(--color-sand-50); text-decoration: none; }
.footer-brand-sub {
  margin: 0;
  font-family: var(--font-label);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-terracotta-soft);
}
.footer-col-label {
  display: block;
  margin: 0 0 var(--space-4);
  font-family: var(--font-label);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-terracotta-soft);
}
.site-footer .footer-links { margin: 0; font-size: var(--text-sm); }
.site-footer .footer-contact-item {
  margin: 0 0 10px;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-border);
}
/* Liens du pied de page : sable sourd (8,70:1 sur le forest-deep) → sable clair
   au survol. Prime sur la règle générique « liens sur fond sombre » plus haut. */
.site-footer .footer-links a,
.site-footer .footer-contact-item a,
.site-footer .footer-copy a { color: var(--color-border); text-decoration: none; }
.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus,
.site-footer .footer-contact-item a:hover,
.site-footer .footer-contact-item a:focus,
.site-footer .footer-copy a:hover,
.site-footer .footer-copy a:focus { color: var(--color-sand-50); }

/* Colonne « Où me trouver » — un bloc par lieu : nom cliquable, adresse, jours.
   Le nom passe en sable clair pour se détacher de l'adresse, qui reste en sable
   sourd ; sans ça les trois blocs forment un pavé gris illisible. */
.site-footer .footer-place { margin-bottom: var(--space-5); }
.site-footer .footer-place a { text-decoration: none; }
.site-footer .footer-place strong {
  font-family: var(--font-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-sand-50);
}
.site-footer .footer-place a:hover strong,
.site-footer .footer-place a:focus strong { color: var(--color-terracotta-soft); }
.footer-place-when {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-terracotta-soft);
}

/* CTA du pied de page : le bouton plein reste le vert forêt du thème, illisible
   sur le forest-deep du pied de page — on le repasse en sable, texte forêt. */
.footer-cta { margin-top: var(--space-6); }
.footer-cta .wp-block-button__link {
  background: var(--color-sand-50);
  color: var(--color-forest);
}
.footer-cta .wp-block-button__link:hover,
.footer-cta .wp-block-button__link:focus {
  background: var(--color-terracotta-soft);
  color: var(--color-forest-deep);
}

.footer-bottom { row-gap: var(--space-4); }
.footer-copy {
  margin: 0;
  font-family: var(--font-label);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-border);
}
.footer-seal { margin: 0; opacity: 0.5; }
.footer-seal img { display: block; }

/* --------------------------------------------------------------------------
   BRIQUES DES PAGES INTERNES — la maquette d'accueil ne couvre que ses 7
   sections. Ce qui suit est le socle commun des 10 pages reprises de l'ancien
   site (voir contenus/ et scripts/architecture.json → composants_a_creer).
   Écrit EN UNE FOIS, avant le portage de la première page : .prose et
   .page-hero servent à eux seuls 9 pages sur 12, et les laisser émerger page
   par page produirait autant de variantes divergentes.
   -------------------------------------------------------------------------- */

/* HÉRO DE PAGE INTERNE — titraille seule, aligné à gauche, sans l'ensō géant
   (réservé à l'accueil).

   ⚠️ TOUJOURS poser LES DEUX classes : class="hero page-hero".
   La règle `.wp-site-blocks > header + *:not(:has(.hero))` plus haut ajoute une
   respiration sous l'en-tête COLLANT à toute page dépourvue de héro. Elle teste
   la classe `.hero`, pas la notion de héro : une page dont le héro ne porterait
   que `.page-hero` ne serait PAS reconnue, collerait à l'en-tête, et l'accent de
   son titre en capitales se ferait rogner (« À PROPOS DE BAPTISTE HONOREZ »).
   C'est invisible sur un titre sans accent — vérifier au pixel, pas au grep. */
.page-hero { padding-bottom: var(--space-12); }
.page-hero-inner {
  max-width: var(--container-lg);
  margin: 0 auto;
}
.page-hero-title {
  margin: var(--space-3) 0 0;
  font-size: clamp(1.875rem, 5vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  max-width: 22ch;
  /* ⚠️ ÉCART DÉLIBÉRÉ avec --leading-tight (1,02) hérité de theme.json.
     Vérifié au pixel : sur « CABINET LA THÉRAPIE DU TAO — MÉDECINE CHINOISE À
     VILLENAVE D'ORNON », les accents de MÉDECINE, À et È percutent la ligne du
     dessus. C'est le même débordement de boîte de ligne que sous l'en-tête
     collant, mais À L'INTÉRIEUR du titre : les capitales Oswald accentuées
     montent à ~1,45 em alors que la boîte en fait 1,02. Les titres de pages
     internes sont longs et accentués — ils passent à la ligne par défaut, là
     où le H1 de l'accueil (« LA THÉRAPIE DU TAO ») est court et validé tel quel.
     On ne touche PAS au token : on choisit une autre valeur pour ce composant. */
  line-height: var(--leading-snug);
}
.page-hero .lead { margin-bottom: 0; max-width: 54ch; }
.page-hero .script { margin-top: var(--space-3); }

/* FIL D'ARIANE — latherapiedutao_breadcrumb_items() produit déjà le
   BreadcrumbList JSON-LD ; rien ne l'affichait. Séparateur : le point médian,
   vocabulaire de la DA. Vit dans le template, pas dans la composition. */
.breadcrumb {
  max-width: var(--container-lg);
  margin: 0 auto var(--space-6);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb li + li::before {
  content: "·";
  margin-right: var(--space-2);
  color: var(--color-ink-faint);
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover,
.breadcrumb a:focus { color: var(--text-accent); }
.breadcrumb [aria-current="page"] { color: var(--text-heading); }

/* ⚠️ Layout « constrained » de FSE : le cœur pose sur CHAQUE enfant direct
   `max-width:<content-size>` + `margin-left/right:auto !important`. Ne pas tenter
   de neutraliser ces marges (même en !important) : les enfants seraient sortis de
   la colonne centrée et iraient buter contre le padding de la section, alors que
   le titre, lui, resterait dans la colonne. La bonne réponse est structurelle et
   c'est celle des compositions : envelopper le contenu de la section dans UN
   groupe `layout:default` (voir .tools et .about dans patterns/accueil.php).
   À l'intérieur, plus aucun centrage automatique : .prose, .faq, .compare et le
   trait de pinceau s'alignent à gauche d'eux-mêmes. */

/* GALERIE DE DOCUMENTS — variante de .gallery/.shot pour les pièces qui se
   LISENT (certificats, diplômes). `.shot` est pensé pour des photos : son
   object-fit:cover recadre, ce qui sur un document en bandeau ne laisse qu'une
   bande illisible. Ici l'image est montrée entière et la carte s'adapte. */
.gallery-docs { grid-template-columns: repeat(3, 1fr); align-items: start; }
.shot-doc { min-height: 0; background: var(--surface-card); }
.shot-doc .shot-img { height: auto; }
.shot-doc .shot-img img {
  position: static;
  height: auto;
  object-fit: contain;
}

/* CORPS DE TEXTE LONG — mentions légales, page MTC, Yin Shiatsu, article de
   blog. `.lead` ne sert qu'aux chapôs de quelques lignes ; il n'existait rien
   pour du texte suivi. */
.prose {
  max-width: 68ch;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
}
.prose > * + * { margin-top: var(--space-5); }
.prose h2,
.prose h3 {
  color: var(--text-heading);
  /* ⚠️ ÉCART DÉLIBÉRÉ avec --leading-tight (1,02), qui vient de la DA et reste
     la valeur des grands titres d'affichage. Ici les titres sont plus petits et
     BEAUCOUP plus susceptibles de passer à la ligne (« Yin Shiatsu, Shiatsu et
     Tui Na : quelles différences ? »). En capitales à 1,02, les accents de la
     2e ligne chevauchent la 1re — le même débordement de boîte de ligne que
     sous l'en-tête collant, mais à l'intérieur du titre. On ne touche PAS au
     token : on choisit une autre valeur pour ce composant précis. */
  line-height: var(--leading-snug);
}
.prose h2 {
  margin-top: var(--space-10);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}
.prose h3 {
  margin-top: var(--space-8);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}
.prose ul,
.prose ol { padding-left: var(--space-6); }
.prose li + li { margin-top: var(--space-2); }
.prose strong { font-weight: var(--weight-bold); color: var(--text-heading); }
.prose a { color: var(--text-accent); }
.prose blockquote {
  margin-left: 0;
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--color-terracotta-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--surface-band);
  color: var(--text-body);
}
.prose blockquote p { margin: 0; }
.prose figure { margin: var(--space-8) 0; }
.prose img { border-radius: var(--radius-lg); }

/* TABLEAU COMPARATIF — seul contenu tabulaire du site (Yin Shiatsu / Shiatsu /
   Tui Nā). Le conteneur défile horizontalement : en 390 px, 4 colonnes ne
   tiennent pas, et le body ne doit JAMAIS défiler horizontalement. */
.compare {
  overflow-x: auto;
  margin: var(--space-8) 0;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}
.compare table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}
.compare th,
.compare td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-divider);
}
.compare thead th {
  background: var(--surface-alt);
  font-family: var(--font-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-heading);
}
.compare tbody tr:last-child td { border-bottom: 0; }

/* QUESTIONS FRÉQUENTES — bâti sur le bloc NATIF wp:details (un wp:html
   s'afficherait sans styles dans l'éditeur). Le chevron est un trait fin de
   1,4 px, cohérent avec les icônes de la DA.
   ⚠️ AUCUNE transition sur la rotation : la DA n'autorise que les transitions
   de SURVOL. L'ouverture est instantanée, volontairement. */
.faq { max-width: 68ch; }
.faq .wp-block-details {
  margin-top: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}
.faq .wp-block-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-label);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-heading);
  transition: color var(--transition-base);
}
.faq .wp-block-details summary:hover,
.faq .wp-block-details summary:focus { color: var(--text-accent); }
.faq .wp-block-details summary::-webkit-details-marker { display: none; }
.faq .wp-block-details summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.faq .wp-block-details[open] summary::after { transform: rotate(-135deg); }
.faq .wp-block-details[open] summary { margin-bottom: var(--space-4); }
.faq .wp-block-details > :not(summary) { color: var(--text-body); }

/* CARTE (Google Maps) — pages cabinet.
   🚨 RGPD : l'iframe DOIT être émis par latherapiedutao_gated_iframe(), donc
   SANS attribut src (seulement data-cookie-src). Tant que la catégorie n'est
   pas consentie, le navigateur ne charge rien et l'iframe reste vide — d'où
   l'état « bloqué » ci-dessous, sans lequel l'emplacement serait un rectangle
   vide et blanc, ce que la DA proscrit (« aucun blanc pur »).
   Le sélecteur reflète le contrat réel du JS : cookie-consent.js pose .src au
   consentement et conserve data-cookie-src. */
.map-embed {
  position: relative;
  /* Hauteur fluide plutôt qu'aspect-ratio : un 16/9 en pleine largeur fait
     810 px de haut sur 1440 et chasse le reste de la page sous la ligne de
     flottaison. Et le plafonner par max-height ne l'aplatit PAS — avec
     aspect-ratio, c'est la LARGEUR qui se réduit pour tenir le rapport. */
  height: clamp(240px, 34vw, 440px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-alt);
}
/* Dans une section alternée, --surface-alt est DÉJÀ le fond de la section :
   l'emplacement de la carte s'y fondait entièrement et son message de blocage
   flottait sur rien. Vérifié à l'écran sur la page Villenave. */
.section.alt .map-embed,
.section.alt .map-embed:has(iframe[data-cookie-src]:not([src]))::after { background: var(--surface-card); }
.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.map-embed:has(iframe[data-cookie-src]:not([src]))::after {
  content: attr(data-blocked-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
  background: var(--surface-alt);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* PAGES CABINET — fiches de lieu (adresse, horaires, accès).

   POURQUOI DES CLASSES NEUVES plutôt que .infos : .infos et .info .k sont nés
   DANS la carte .contact, sur fond forest-deep — leur pastille est un voile de
   sable à 10 % d'opacité, invisible sur le sable des pages internes. Les
   réutiliser ici demanderait de les redéfinir sous un parent, c'est-à-dire d'en
   faire deux composants qui partagent un nom : la panne est alors invisible au
   grep (cf. CLAUDE.md, « lire la cascade calculée, pas le nom de classe »). */
.places {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
  align-items: start;
}
.place {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}
.section.alt .place { background: var(--surface-card); }
.place-head { column-gap: var(--space-4); align-items: center; }
.place h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
.place p { margin: var(--space-4) 0 0; font-size: var(--text-base); color: var(--text-body); }
.place p + p { margin-top: var(--space-3); }
.place strong { color: var(--text-heading); }
.place a:where(:not(.wp-element-button)) { color: var(--text-accent); }

/* Horaires — deux colonnes (jour / créneaux) alignées sur une grille plutôt
   qu'une liste : les créneaux sont de longueurs très inégales (« Fermé » contre
   « 09h00 – 13h00 · 14h00 – 20h00 ») et un simple flex les ferait danser d'une
   ligne à l'autre. */
.hours { margin-top: var(--space-5); list-style: none; padding-left: 0; }
.hours li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--space-3);
  padding: 7px 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-divider);
}
.hours li:last-child { border-bottom: 0; }
.hours .day {
  font-family: var(--font-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-heading);
}
.hours .closed { color: var(--text-muted); }

/* Boutons de navigation (Maps / Waze / Plans) : de simples liens, PAS l'iframe —
   ils ne déposent aucun cookie et restent donc disponibles sans consentement.
   C'est ce qui rend le blocage de la carte acceptable pour le visiteur. */
.place-links.wp-block-buttons { margin-top: var(--space-6); gap: var(--space-3); }
.place-links .wp-block-button__link { padding: 10px var(--space-6); font-size: var(--text-2xs); }

/* Galerie des lieux (page cabinet) — hauteur POSÉE, et non laissée à l'étirement
   de la grille. Dans .gallery, la hauteur d'une carte ne vient de rien : le tag
   et l'image sont tous deux en position:absolute, il ne reste aucun contenu dans
   le flux, et .shot retombe sur son min-height. Vérifié à l'écran ici : les deux
   cartes s'affichaient à 214 px et 190 px, décalant les étiquettes l'une par
   rapport à l'autre. Sur l'accueil le défaut ne se voit pas — quatre cartes dont
   une .shot-span, l'œil n'a pas de paire à comparer. Une hauteur explicite règle
   les deux cas d'un coup ; classe dédiée pour ne pas toucher à l'accueil. */
.gallery-places .shot { height: clamp(200px, 22vw, 300px); min-height: 0; }

/* Photo d'ouverture d'une page interne — bandeau pleine largeur sous le héro.
   Employée sur les pages cabinet, consultation, MTC, Qi Gong et contact : c'est
   la reprise des images à la une de l'ancien site, qui les affichait en couverture.
   Hauteur plafonnée : les photos de l'ancien site sont en 4/3, et à 1120 px de
   large un 4/3 fait 840 px de haut — la page s'ouvrirait sur une seule image,
   tout le reste sous la ligne de flottaison. Même raisonnement que .map-embed,
   et même remède : une hauteur fluide en clamp, pas un aspect-ratio (qui, lui,
   réduirait la LARGEUR pour tenir le rapport au lieu d'aplatir l'image). */
.place-shot.wp-block-image {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.place-shot img {
  display: block;
  width: 100%;
  height: clamp(240px, 32vw, 420px);
  object-fit: cover;
}
/* .eyebrow pose `margin: 0 0 …` — margin-top NUL, et sa spécificité (0,1,0)
   l'emporte sur le blockGap de FSE, écrit en `:where()` (0,0,0). Le libellé qui
   ouvre la section se retrouve donc collé sous la photo. Rétabli ici seulement
   pour ce voisinage, sans toucher au token de .eyebrow (utilisé partout). */
.place-shot + .eyebrow { margin-top: var(--space-10); }
/* Variante pour une photo de SUJET EN PIED (page Qi Gong) : le bandeau est
   panoramique, la source un 3/2 vertical d'occupation — `cover` centré coupe
   la tête. Aucune hauteur ne montrerait la silhouette entière (il y faudrait
   un 3/2 plein, soit 747 px de haut à 1120 de large : toute la page sous la
   ligne de flottaison). On cadre donc délibérément haut, sur le geste. */
.place-shot--top img { object-position: center 14%; }

/* CARTES D'ARTICLE — index /conseils/, archives et repli (templates/home.html,
   archive.html, index.html). Sélecteurs posés sur les blocs natifs de la
   boucle wp:query : wp:post-template > wp:group.post-card >
   post-featured-image / post-title / post-date / post-excerpt. */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-8);
}
.post-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.post-card:hover,
.post-card:focus-within { box-shadow: var(--shadow-md); }
/* Aucune vignette n'existe encore (trou consigné dans architecture.json →
   donnees_a_confirmer) : ratio fixe + recadrage pour que la grille reste
   alignée le jour où les photos arrivent, quel que soit leur format d'origine. */
.post-card .wp-block-post-featured-image img {
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.post-card .wp-block-post-title {
  margin: var(--space-4) 0 0;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}
.post-card .wp-block-post-title a { color: var(--text-heading); text-decoration: none; }
.post-card .wp-block-post-title a:hover,
.post-card .wp-block-post-title a:focus { color: var(--text-accent); }
.post-card .wp-block-post-date {
  margin-top: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}
.post-card .wp-block-post-excerpt {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* PAGINATION — bas de /conseils/ et des archives de catégorie. */
.wp-block-query-pagination {
  margin-top: var(--space-10);
  gap: var(--space-3);
}
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.page-numbers {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  transition: color var(--transition-base), background var(--transition-base);
}
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover,
a.page-numbers:hover,
a.page-numbers:focus { color: var(--text-accent); background: var(--surface-card); }
.page-numbers.current {
  color: var(--color-sand-50);
  background: var(--color-terracotta-deep);
}

/* LISTE SOBRE « CONSEILS & ARTICLES » — teaser de l'accueil (#conseils dans
   patterns/accueil.php), volontairement SANS vignette : aucune photo
   saisonnière n'existe encore, et la DA interdit l'illustration générique
   (cf. « Placeholder — à défaut de photo » plus haut dans ce fichier). */
.post-list { display: flex; flex-direction: column; }
.post-list-item {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-divider);
  gap: var(--space-4);
}
.post-list-item:last-child { border-bottom: 0; }
.post-list-date {
  display: block;
  font-family: var(--font-label);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}
.post-list-title {
  margin: var(--space-1) 0 0;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}
.post-list-title a { color: var(--text-heading); text-decoration: none; }
.post-list-item:hover .post-list-title a,
.post-list-title a:hover,
.post-list-title a:focus { color: var(--text-accent); }
.post-list-arrow {
  flex: 0 0 auto;
  color: var(--text-muted);
  transition: transform var(--transition-base), color var(--transition-base);
}
.post-list-item:hover .post-list-arrow { color: var(--text-accent); transform: translateX(4px); }

/* Aucun article publié : la section entière disparaît plutôt que d'afficher un
   titre au-dessus du vide — même mécanique que header + *:not(:has(.hero)).
   ⚠️ À revérifier au pixel dans les DEUX états une fois des articles publiés. */
.section-conseils:has(.wp-block-query-no-results) { display: none; }

/* Date sous le H1 d'un article (templates/single.html, wp:post-date). */
.page-hero-date {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ICÔNES EN TRAIT FIN — les compositions inlinent leur SVG (aucun runtime
   d'icônes) et DOIVENT porter width/height en dur : sans CSS, un <svg> non
   dimensionné s'affiche à ~300 px. Ces règles ne font qu'affiner.
   Jeu de référence : assets/img/icons/ (à inliner, pas à référencer en <img>
   — un <img> ne suivrait pas currentColor). */
.icon {
  flex: 0 0 auto;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dot .icon,
.info .k .icon { color: inherit; }

/* ==========================================================================
   RESPONSIVE — la maquette ne fournit aucun point de rupture : ils sont
   définis ici. Vérifier le rendu au pixel en 1440 / 768 / 390 px.
   ========================================================================== */

/* Grands écrans étroits : on resserre gouttières et grilles à deux colonnes. */
@media (max-width: 1180px) {
  .tools { grid-template-columns: 1fr; gap: var(--space-10); }
  .about { grid-template-columns: 1fr; gap: var(--space-10); }
  .about-photo.wp-block-image { max-width: 420px; margin: 0 auto; }
}

/* Tablette : l'en-tête se resserre avant de basculer en menu superposé. */
@media (max-width: 960px) {
  .site-header { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
  .wp-block-group.site-header__inner { column-gap: var(--space-6); }
  .wp-block-group.nav-links { column-gap: var(--space-6); }
  .nav-links .wp-block-navigation__container { column-gap: var(--space-5); }

  .contact { grid-template-columns: 1fr; gap: var(--space-10); }
}

/* Le menu burger de wp:navigation (overlayMenu:"mobile") bascule à un seuil
   FIXE de 600 px, non déductible du CSS de ce thème (comportement du cœur
   WordPress) — en dessous, la barre plate n'a plus à tenir du tout. Entre ce
   seuil et ~820 px, elle doit encore tenir SEULE : resserrage supplémentaire
   pour cette zone morte, vérifié au pixel de 600 à 820 px sans débordement
   horizontal NI marque repliée sur 3 lignes.
   ⚠️ Seuil élargi de 660 à 820 px le 2026-09-19 : depuis le passage de « Qi
   Gong » à deux liens (Qi Gong / Matinées), .wp-block-navigation__container
   ne rétrécit plus jamais dans cette zone (largeur de contenu fixe, ~470-520
   px) — sans intervention, tout le rétrécissement de la fenêtre était donc
   absorbé par la marque « La Thérapie du TAO » seule (le flex la comprime
   jusqu'à son min-content, la largeur du plus long mot, « Thérapie ») : elle
   se repliait sur 3 lignes très étroites dès 781 px. Plutôt que la forcer à
   tenir à côté de la nav à tout prix, autoriser l'en-tête à passer sur deux
   rangées (marque en haut, nav en bas) en dessous d'un certain point : la
   marque retrouve alors sa largeur naturelle (1-2 lignes), et c'est la nav
   qui, seule sur sa rangée, a toute la largeur pour elle. */
@media (max-width: 820px) {
  .site-header { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  .wp-block-group.site-header__inner { column-gap: var(--space-4); flex-wrap: wrap; row-gap: var(--space-3); }
  .wp-block-group.nav-links { column-gap: var(--space-4); }
  .nav-links .wp-block-navigation__container { column-gap: var(--space-3); }
  .nav-brand .wp-block-site-title { font-size: var(--text-lg); }
}

/* Bas de la zone morte (601-640 px environ) : même juste seule sur sa
   rangée, la nav (6 liens + Réserver) ne tient plus depuis le passage de
   « Qi Gong » à deux liens (2026-09-19). Resserrer encore la gouttière et
   l'interlettrage, et en tout dernier recours laisser les liens eux-mêmes
   passer sur deux rangées (le bouton Réserver reste sur la première). */
@media (max-width: 640px) {
  .site-header { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
  .wp-block-group.site-header__inner { column-gap: var(--space-3); }
  .wp-block-group.nav-links { column-gap: var(--space-3); }
  .nav-links .wp-block-navigation__container { column-gap: var(--space-2); flex-wrap: wrap; row-gap: var(--space-1); }
  .nav-links .wp-block-navigation-item__content { letter-spacing: var(--tracking-wide); }
}

/* Tablette / mobile large : les grilles à 2 colonnes passent à 1. */
@media (max-width: 781px) {
  .section { padding: var(--space-16) var(--space-8) !important; }
  .site-header { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
  .site-footer { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }

  .hero { padding-left: var(--space-8); padding-right: var(--space-8); }
  .hero-enso { width: min(400px, 80vw); }
  .hero-title { font-size: var(--text-2xl); }

  .pills { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; row-gap: var(--space-8); }
  .gallery { grid-template-columns: 1fr; }
  .shot-span { grid-column: span 1; }
  .gallery-docs { grid-template-columns: 1fr 1fr; }

  .page-hero { padding-left: var(--space-8); padding-right: var(--space-8); }
  .breadcrumb { padding-left: var(--space-8); padding-right: var(--space-8); }
  .prose h2 { font-size: var(--text-lg); }

  .footer-inner { row-gap: var(--space-10); }
  .footer-bottom { justify-content: flex-start; }

  .cookie-banner { flex-direction: column; align-items: stretch; left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm); }
  .cookie-banner__actions,
  .cookie-panel__actions { flex-direction: column; }
  .cookie-btn { width: 100%; }
}

/* Petits mobiles : les CTA du héro et de la carte contact s'empilent. */
@media (max-width: 480px) {
  .section { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
  .site-header { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
  .site-footer { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
  .hero { padding-left: var(--space-6); padding-right: var(--space-6); }

  .hero-cta.wp-block-buttons,
  .contact-cta.wp-block-buttons,
  .contact-book .wp-block-buttons { flex-direction: column; align-items: stretch; }
  .hero-cta .wp-block-button__link,
  .contact-cta .wp-block-button__link,
  .contact-book .wp-block-button__link { display: block; text-align: center; }

  .contact { padding: var(--space-10) var(--space-6); border-radius: var(--radius-lg); }
  .cred, .step, .info { flex-wrap: wrap; }
  /* Les soins se replient en COLONNE, pas en flex-wrap : le wrap dépend de la
     largeur min-content du texte, donc il ne se déclenchait que sur 5 des 7
     items — deux gardaient l'icône à gauche, dans la même liste. */
  .tool { flex-direction: column; }

  .page-hero { padding-left: var(--space-6); padding-right: var(--space-6); }
  .breadcrumb { padding-left: var(--space-6); padding-right: var(--space-6); }
  .post-grid { grid-template-columns: 1fr; }
  .gallery-docs { grid-template-columns: 1fr; }
  /* Le tableau comparatif garde son défilement propre : c'est le seul contenu
     du site qui ne peut pas se replier en une colonne sans devenir illisible. */
  .compare table { min-width: 560px; }

  /* Sous 480 px, le site-title (26px, theme.json) + la pastille ensō ne
     tiennent plus à côté du menu burger et du bouton Réserver sans forcer
     la marque sur 3 lignes courtes. On retire la pastille : le texte
     retrouve sa largeur d'origine et son retour à la ligne habituel. */
  .nav-brand-mark { display: none; }
}