/**
 * Wellfuz — charte graphique et styles propres au site
 *
 * 1. Variables du socle (gabarit du starter, en commentaire : la charte les pose plus bas)
 * 2. Styles Wellfuz : soins & praticiens, trouver mon soin, connexion…
 * 3. CHARTE WELLFUZ (design system, fin de fichier) : tokens, typographie, boutons, textures, motifs, animations,
 *    compositions de l'accueil. Documentation : docs/charte.md.
 *
 * @package Custom_Theme
 * @since 1.0.0
 */

/* ==========================================================================
   TYPOGRAPHIE
   ========================================================================== */

/**
 * Police principale
 *
 * 1. Importer la police Google Fonts dans functions.php ou ci-dessous
 * 2. Définir --font-main avec la police importée
 */

/* Exemple: Import Google Fonts */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); */

:root {
  /* Police — décommenter et modifier selon le client */
  /* --font-main: 'Inter', system-ui, sans-serif; */
}

/* ==========================================================================
   COULEURS
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------------
     Couleurs de fond
     ------------------------------------------------------------------------- */

  /* Fond principal (blanc par défaut) */
  /* --bg: #FFFFFF; */

  /* Fond atténué - cards, sections alternées */
  /* --bg-muted: #F8F9FA; */

  /* Fond inversé - sections sombres (problem, cta, solution card) */
  /* --bg-inverse: #1A1A2E; */

  /* Fond marque - header, footer, boutons */
  /* --bg-brand: #2D3436; */

  /* Fond accent - badges, highlights, hover states */
  /* --bg-accent: #6C5CE7; */

  /* -------------------------------------------------------------------------
     Couleurs de texte
     ------------------------------------------------------------------------- */

  /* Texte principal */
  /* --fg1: #1A1A2E; */

  /* Texte secondaire - descriptions, intros */
  /* --fg2: #4A4A68; */

  /* Texte tertiaire - métadonnées, placeholders */
  /* --fg3: #8888A0; */

  /* Texte sur fond sombre */
  /* --fg-inverse: #FFFFFF; */

  /* Texte marque - eyebrows, liens, accents */
  /* --fg-brand: #6C5CE7; */

  /* -------------------------------------------------------------------------
     Bordures
     ------------------------------------------------------------------------- */

  /* Bordure standard */
  /* --border: #E0E0E8; */

  /* Bordure marque - focus, active states */
  /* --border-brand: #6C5CE7; */

  /* -------------------------------------------------------------------------
     Autres
     ------------------------------------------------------------------------- */

  /* Border radius global */
  /* --radius: 12px; */
}

/* ==========================================================================
   PERSONNALISATIONS SPÉCIFIQUES AU CLIENT
   ========================================================================== */

/**
 * Ajoutez ici les styles spécifiques au client qui ne peuvent pas
 * être gérés par les variables CSS (cas rares).
 *
 * Exemples:
 * - Logo avec dimensions spécifiques
 * - Animations personnalisées
 * - Composants uniques au client
 */

/* ==========================================================================
   SOINS & PRATICIENS (single-soin.php, single-praticien.php)
   Mise en page fonctionnelle — design à venir.
   ========================================================================== */

.soin-section h2 {
  margin-bottom: var(--space-lg);
}

.soin-section .prose,
.soin-section > .container > p {
  max-width: 760px;
}

/* En-tête des fiches (soin, cours, cabinet) : image principale en fond + dégradé léger, comme .hero */
.soin-hero--image {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(420px, 65vh, 640px);
  overflow: hidden;
  color: var(--fg-inverse);
  background: var(--bg-inverse);
}

.soin-hero__bg {
  position: absolute;
  inset: 0;
}

.soin-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.soin-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.1) 100%);
}

.soin-hero__content {
  position: relative;
  width: 100%;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-2xl);
}

.soin-hero__title {
  margin: var(--space-lg) 0 var(--space-md);
}

.soin-hero--image .soin-hero__title {
  color: var(--fg-inverse);
  max-width: 820px;
}

.soin-hero__accroche {
  max-width: 640px;
}

/* Intros de section et textes courts en petite taille (2026-10-15 : « les gens ne lisent pas ») :
   toutes les intros sous un titre (.lead : chapitres et sections de l'accueil, « Trouver mon … », À propos, FAQ…),
   texte des appels à l'action sombres (pied de page, encart « Formules »), descriptions des cartes valeurs,
   « Pourquoi », À propos et chiffres clés, intro de la page Équipe.
   Restent à la taille courante : textes de lecture des fiches (définition, présentation, FAQ, variantes) et articles. */
.lead,
.cta__text,
.about-values__card-desc,
.about-why__text,
.about__text,
.numbers__desc,
.wf-equipe__intro,
.wf-equipe__intro p {
  font-size: var(--text-sm);
}

/* Exception : sous-titre des fiches praticien et coach (métier, sous le nom), gardé en grand */
.wf-hero .wf-hero__intro .lead:not(.soin-hero__accroche):not(.prose) {
  font-size: var(--text-lead);
}

/* Textes d'intro des en-têtes en petite taille : accroche des fiches soin et cours, intro de « Trouver mon … »,
   hero de l'accueil et de l'À propos, écrans partagés (connexion, espaces, contact). Pas le sous-titre des fiches praticien. */
.soin-hero__accroche,
.wf-hero__intro .lead.prose,
.wf-hero__intro .lead.prose p,
.hero .hero__intro,
.wf-split__panneau .lead {
  font-size: var(--text-sm);
}

.soin-hero--image .breadcrumb__item:not(:last-child)::after,
.soin-hero--image .breadcrumb__link {
  color: rgba(255, 255, 255, 0.75);
}

.soin-hero--image .breadcrumb__link:hover,
.soin-hero--image .breadcrumb__current {
  color: var(--fg-inverse);
}

.soin-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-lg);
}

@media (min-width: 1024px) {
  .soin-hero__overlay {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.05) 100%);
  }
}

.soin-besoins {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding: 0;
  list-style: none;
}

.soin-besoins__link {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--text-sm);
}

.soin-tarifs {
  width: 100%;
  max-width: 760px;
  border-collapse: collapse;
}

.soin-tarifs th,
.soin-tarifs td {
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

/* Lien « Réserver » en fin de ligne (tarifs de la fiche soin, planning de la fiche cours) : souligné */
.soin-tarifs__link {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.soin-tarifs__link:hover {
  text-decoration-thickness: 2px;
}

.soin-tarifs__infos {
  margin-top: var(--space-lg);
}

/* Planning des cours (fiche cours, fiche coach) : table .soin-tarifs.wf-planning */
.wf-planning__jour {
  font-weight: var(--fw-semi);
}

@media (max-width: 767px) {
  .wf-planning {
    font-size: var(--text-sm);
  }
}

.wf-essai {
  margin-top: var(--space-lg);
}

/* Bouton « Réserver » au fil de la fiche, vers le module de l'en-tête (#reserver) */
.wf-cta-reserver {
  margin-top: var(--space-xl);
}

/* Infos pratiques en rangée (fiche cours, « Bon à savoir » des ateliers) : icône, libellé, valeur ; 2 colonnes (aussi
   sur mobile : 2 lignes de 2), 4 colonnes à partir de 1024px ; filet vertical de 1px entre les colonnes */
.wf-infos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-md);
  padding: 0;
  list-style: none;
}

.wf-infos__item:nth-child(even) {
  padding-left: var(--space-md);
  border-left: 1px solid var(--border);
}

@media (min-width: 600px) {
  .wf-infos {
    column-gap: var(--space-xl);
  }

  .wf-infos__item:nth-child(even) {
    padding-left: var(--space-xl);
  }
}

@media (min-width: 1024px) {
  .wf-infos {
    grid-template-columns: repeat(4, 1fr);
  }

  .wf-infos__item + .wf-infos__item {
    padding-left: var(--space-xl);
    border-left: 1px solid var(--border);
  }
}

.wf-infos__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.wf-infos__icone {
  margin-bottom: var(--space-xs);
}

/* Fiches cours (niveau, intensité, matériel fourni, à apporter) : icônes agrandies, bleu canard, sans pastille (2026-10-27) */
.single-sport #infos .wf-infos__icone {
  width: 44px;
  height: 44px;
  color: var(--wf-bleu);
  stroke-width: 1.5;
}

/* Déroulé d'une séance (wf_seance_etapes()) : une étape par ligne, icône à gauche, nom de l'étape sur sa propre ligne */
.wf-etapes {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: 0;
  list-style: none;
}

.wf-etapes__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.wf-etapes__icone {
  flex-shrink: 0;
  margin-top: 0.1em;
}

.wf-etapes__nom {
  display: block;
  margin-bottom: var(--space-xs);
}

.praticien__photo {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
}

/* En-tête des fiches praticien, coach et soin (.wf-hero) : pleine largeur (marges du .container), fond gris clair,
   au moins la hauteur de l'écran (l'en-tête du site est fixe et recouvre le haut de la section) ;
   .wf-hero__intro à gauche, module de réservation (.wf-hero__reserver) à droite à partir de 1024px */
.wf-hero {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg-muted);
}

.wf-hero > .container {
  display: flex;
  flex-direction: column;
  max-width: none;
}

/* Fil d'Ariane : son .container imbriqué doublerait la marge */
/* Fil d'Ariane placé dans un conteneur (en-têtes des fiches, L'équipe, planning…) : son propre .container
   n'ajoute ni largeur ni marge, il s'aligne sur les titres */
.wf-hero .breadcrumb .container,
.container .breadcrumb .container {
  max-width: none;
  padding-inline: 0;
}

/* Pages qui commencent par une section avec fil d'Ariane (en-têtes .wf-hero des fiches, « Trouver mon … », Ateliers ;
   planning, équipe) : au moins la hauteur de l'en-tête fixe (80px, mega-menu.css) + une marge au-dessus, sinon sur
   mobile (--space-section = 48px) le fil d'Ariane passe sous le logo */
.wf-bandeau-infos,
.wf-equipe,
.wf-hero,
.site-main > :first-child:has(> .container > .breadcrumb),
.site-main > article:first-child > :first-child:has(> .container > .breadcrumb) { /* blog, articles, archives, recherche… */
  padding-top: max(var(--space-section), calc(80px + var(--space-lg)));
}

.wf-hero__grille {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2xl);
}

/* Photo agrandie, au-dessus du nom et du sous-titre */
.wf-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.wf-hero__grille .praticien__photo {
  width: 200px;
  height: 200px;
}

/* Fiche soin (et bientôt cours) : image en fond + dégradé (.soin-hero--image) dans l'en-tête .wf-hero */
.wf-hero.soin-hero--image {
  align-items: stretch;
  background: var(--bg-inverse);
}

.wf-hero.soin-hero--image > .container {
  position: relative;
}

/* Bloc « sur demande » (sur-demande.php) : à la place du module Amelia, même carte blanche */
.wf-sur-demande {
  padding: var(--space-2xl) var(--space-xl);
  border-radius: 12px;
  background: var(--bg);
  color: var(--color-text);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}

.wf-sur-demande p + p {
  margin-top: var(--space-md);
}

.wf-sur-demande__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.25em 0.75em;
  border-radius: 999px;
  background: var(--bg-muted);
  font-size: var(--text-sm);
}

.wf-sur-demande .wf-sur-demande__titre {
  margin: var(--space-lg) 0 var(--space-md);
  color: var(--color-text);
  font-size: var(--text-h3);
}

.wf-sur-demande__cta {
  margin-top: var(--space-xl);
}

/* Jours de présence, sous le sous-titre, précédés d'une icône agenda */
.wf-hero__intro .wf-hero__jours {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--space-sm);
}

/* Amelia met 100px de marge au-dessus et en dessous de son formulaire : retirée dans l'en-tête */
/* Résumé de paiement : le montant ne se fait pas recouvrir par le libellé du service */
.amelia-v2-booking #amelia-container .am-fs__payments-services-sub .am-amount {
  flex-shrink: 0;
  margin-left: var(--space-sm);
  white-space: nowrap;
}

.wf-hero__reserver .amelia-v2-booking #amelia-container.am-fs__wrapper {
  margin-block: 0;
}

@media (min-width: 1024px) {
  .wf-hero__grille {
    flex-direction: row;
    align-items: center;
  }

  .wf-hero__grille > * {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Réduite sur les écrans peu hauts (portables) pour tenir dans la hauteur */
  .wf-hero__grille .praticien__photo {
    width: clamp(200px, 38vh, 320px);
    height: clamp(200px, 38vh, 320px);
  }
}

/* Badge Amelia de l'employé (fiche praticien / coach : posé sur la photo) */
.praticien__badge {
  display: inline-block;
  padding: 0.25em 0.75em;
  border-radius: 999px;
  background: var(--bg-inverse);
  color: var(--fg-inverse);
  font-size: var(--text-sm);
}

.praticien__badge-icon {
  flex-shrink: 0;
}

/* CTA du pied de page : adresse du centre (lien itinéraire) sous le texte */
.cta__adresse {
  margin-top: calc(-1 * var(--space-md));
}

.cta__adresse a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Fiche coach : encart « Formules » (fond sombre de .cta__inner) */
.wf-formules__inner {
  max-width: none;
  color: var(--color-text);
}

.wf-formules__inner h2 {
  color: var(--color-text);
}

/* Filtre par famille : boutons inversés sur fond sombre */
.wf-formules .wf-publics {
  justify-content: center;
}

.wf-formules .wf-tms__filtre {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-text);
}

.wf-formules .wf-tms__filtre[aria-pressed="true"] {
  border-color: var(--fg-inverse);
  background: var(--fg-inverse);
  color: var(--bg-inverse);
}

.wf-formules__liste {
  max-width: 640px;
  margin: 0 auto var(--space-xl);
  padding: 0;
  list-style: none;
  text-align: left;
}

.wf-formules__ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.wf-formules__ligne[hidden] {
  display: none;
}

.wf-formules__detail {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.wf-formules__prix {
  flex-shrink: 0;
  font-weight: var(--fw-semibold, 600);
  white-space: nowrap;
}

.soin-avertissement {
  padding-block: var(--space-lg);
  background: var(--bg-muted);
  font-size: var(--text-sm);
}

/* Avertissement en encart sombre (fiches praticien, coach et soin ; même fond et même largeur que l'encart « Formules ») */
.soin-avertissement--encart {
  background: none;
}

/* Après une bande de fond (infos pratiques de la fiche cours) : même respiration qu'entre deux sections */
.bg-muted + .soin-avertissement--encart {
  padding-top: var(--space-section);
}

.soin-avertissement__encart {
  padding: var(--space-xl) var(--space-2xl);
  border-radius: 24px;
  background: var(--bg-inverse);
  color: var(--color-text);
  text-align: center;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.praticien__photo {
  width: 160px;
  height: 160px;
}

/* Taille du texte : classe globale .text-sm (certifications, infos pratiques, comment se passe un cours) */
.praticien__formations {
  padding-left: 1.2em;
  list-style: disc;
}

.praticien__formations li + li {
  margin-top: var(--space-xs);
}

.praticien__infos {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-sm) var(--space-lg);
}

.praticien__infos dt {
  font-weight: var(--fw-semi);
}

/* Fiche praticien / coach, sous l'en-tête : blocs les uns sous les autres (deux colonnes : .wf-duo) */
.praticien__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.praticien__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  min-width: 0;
}

/* Deux colonnes 60 / 40 (.wf-duo, colonne de droite à plusieurs blocs : .wf-duo__col) : fiches praticien,
   coach (présentation | qualifications…, cours | déroulé) et soin (définition | pour qui). Une colonne en dessous
   de 1024px ; bloc seul : pleine largeur. */
.wf-duo {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.wf-duo__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.wf-duo:not(:has(section)),
.wf-duo__col:not(:has(section)) {
  display: none;
}

@media (min-width: 1024px) {
  .wf-duo {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-2xl);
  }

  /* 1er bloc 60 %, le suivant 40 % */
  .wf-duo > * {
    flex: 2 1 0;
    min-width: 0;
  }

  .wf-duo > :first-child {
    flex: 3 1 0;
  }
}

.wf-bloc h2 {
  margin-bottom: var(--space-lg);
}

.wf-bloc .prose {
  max-width: 100%;
}

/* ==========================================================================
   TROUVER MON SOIN (page-trouver-mon-soin.php)
   ========================================================================== */

.wf-tms__titre {
  margin: var(--space-lg) 0 var(--space-md);
}

/* Barre : besoins (repliables) + recherche. Ouverte (.is-recherche), la recherche
   s'étire sur toute la largeur pendant que les besoins se replient (largeur + hauteur). */
.wf-tms__filtres {
  --wf-tms-duree: 0.45s;
  --wf-tms-courbe: cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: flex-start;
  margin: var(--space-2xl) 0 var(--space-lg);
}

.wf-tms__besoins-repli {
  display: grid;
  grid-template-rows: 1fr;
  flex: 1 1 0%;
  min-width: 0;
  transition:
    flex-grow var(--wf-tms-duree) var(--wf-tms-courbe),
    grid-template-rows var(--wf-tms-duree) var(--wf-tms-courbe),
    opacity calc(var(--wf-tms-duree) * 0.6) ease,
    visibility 0s linear 0s;
}

.wf-tms__besoins {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  min-height: 0;
  overflow: hidden;
}

/* Une rangée par axe de filtre (cabinets : durée, usage…) ; soins et cours : une seule rangée sans libellé */
.wf-tms__axes {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: 0;
  overflow: hidden;
}

.wf-tms__axe {
  align-self: center;
  min-width: 7rem;
  color: var(--fg2);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
}

.is-recherche .wf-tms__besoins-repli {
  flex-grow: 0;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    flex-grow var(--wf-tms-duree) var(--wf-tms-courbe),
    grid-template-rows var(--wf-tms-duree) var(--wf-tms-courbe),
    opacity calc(var(--wf-tms-duree) * 0.4) ease,
    visibility 0s linear var(--wf-tms-duree);
}

.wf-tms__filtre {
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg1);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.wf-tms__filtre[aria-pressed="true"] {
  background: var(--bg-inverse);
  border-color: var(--bg-inverse);
  color: var(--fg-inverse);
}

/* Fiche cabinet : filtre « Tarif auto-entrepreneur / société » (mêmes boutons que Trouver mon …) */
.wf-publics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.wf-publics[hidden],
.soin-tarifs tr[hidden] {
  display: none;
}

/* Recherche par nom : loupe au bout de la ligne des besoins, champ étiré à l'ouverture */
.wf-tms__recherche {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  box-sizing: border-box;
  height: 38px; /* = largeur fermée (bouton 36px + bordures) : cercle parfait */
  margin-left: var(--space-sm);
  border: 1px solid var(--bg-inverse);
  border-radius: 999px;
  background: var(--bg-inverse); /* Fermée : pastille sombre ; ouverte : champ clair */
  color: var(--fg-inverse);
  transition:
    flex-grow var(--wf-tms-duree) var(--wf-tms-courbe),
    margin var(--wf-tms-duree) var(--wf-tms-courbe),
    border-color var(--wf-tms-duree) ease,
    background-color var(--wf-tms-duree) ease,
    color var(--wf-tms-duree) ease;
}

.wf-tms__recherche[hidden] {
  display: none;
}

.is-recherche .wf-tms__recherche {
  flex-grow: 1;
  margin-left: 0;
  border-color: var(--fg1);
  background: var(--bg);
  color: var(--fg1);
}

.wf-tms__recherche:focus-within {
  outline: 2px solid var(--fg-brand);
  outline-offset: 2px;
}

/* Le contour est celui de la pastille (ci-dessus) : pas de second cadre rectangulaire autour du champ ni de la loupe
   (sinon apporté par la règle générale .wf-charte :focus-visible, plus spécifique que le outline: none du champ) */
.wf-charte .wf-tms__recherche :focus-visible {
  outline: none;
}

.wf-tms__recherche-bouton {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
}

/* Loupe ↔ croix en fondu-rotation */
.wf-tms__icone {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transition: opacity 0.25s ease, rotate 0.35s var(--wf-tms-courbe);
}

.wf-tms__icone--fermer,
.is-recherche .wf-tms__icone--loupe {
  opacity: 0;
  rotate: -90deg;
}

.is-recherche .wf-tms__icone--fermer {
  opacity: 1;
  rotate: 0deg;
}

.wf-tms__recherche-champ {
  flex: 1 1 0%;
  min-width: 0;
  width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  color: var(--fg1);
  font: inherit;
  font-size: var(--text-sm);
  outline: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, padding var(--wf-tms-duree) var(--wf-tms-courbe), visibility 0s linear 0.2s;
}

.is-recherche .wf-tms__recherche-champ {
  padding-right: var(--space-md);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease calc(var(--wf-tms-duree) * 0.4), padding var(--wf-tms-duree) var(--wf-tms-courbe), visibility 0s;
}

/* Cartes : apparition douce quand le filtre change */
[data-wf-tms-carte] {
  animation: wf-tms-apparition 0.3s ease both;
}

@keyframes wf-tms-apparition {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wf-tms__filtres *,
  [data-wf-tms-carte] {
    transition: none !important;
    animation: none !important;
  }
}

.wf-tms__intro {
  margin-bottom: var(--space-lg);
}

.wf-tms__compteur {
  margin-bottom: var(--space-md);
  color: var(--fg3);
  font-size: var(--text-sm);
}

/* « Trouver mon … » : bouton de l'en-tête vers les filtres (#filtres), sous l'en-tête fixe du site */
.wf-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

#filtres {
  scroll-margin-top: 80px;
}

/* « Trouver mon sport » : cartes à gauche, encart « Formules » à droite (sticky) à partir de 1024px ;
   en dessous, l'encart passe après les cartes. En-tête du site fixe (80px) : décalage du sticky et de l'ancre #formules. */
.wf-tms__duo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.wf-tms__formules .wf-formules {
  scroll-margin-top: 100px;
}

.wf-tms__formules .wf-formules__inner {
  padding: var(--space-xl) var(--space-lg);
}

/* « Autres formules disponibles » : prix remplacé par un lien vers le contact */
.wf-formules__lien {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Filtre de l'encart sur une seule ligne, boutons réduits */
.wf-tms__formules .wf-publics {
  flex-wrap: nowrap;
  gap: 4px;
}

.wf-tms__formules .wf-tms__filtre {
  padding: 4px 10px;
  font-size: var(--text-xs);
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .wf-tms__duo {
    flex-direction: row;
    align-items: flex-start;
  }

  .wf-tms__resultats {
    flex: 1;
    min-width: 0;
  }

  .wf-tms__formules {
    position: sticky;
    top: 100px;
    flex: 0 0 380px;
    max-height: calc(100svh - 120px);
    overflow-y: auto;
    border-radius: 24px; /* coins de .cta__inner gardés pendant le défilement interne */
  }
}

/* ==========================================================================
   CARTES (composant partagé .wf-cartes / .wf-carte)
   Soins, cours et cabinets (« Trouver mon … »), « Ses soins » (fiche praticien),
   praticiens et coachs (page Équipe, « Vos praticiens », « Ses collègues » : praticien-carte.php)
   ========================================================================== */

.wf-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-xl);
  padding: 0;
  list-style: none;
}

.wf-carte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.wf-carte[hidden],
.wf-equipe__section[hidden] {
  display: none;
}

.wf-carte__image {
  position: relative;
  display: block;
}

.wf-carte__image img {
  display: block;
  width: 100%;
  height: auto; /* l'attribut height des images WordPress (768×432…) primerait sur le ratio */
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Cartes praticien / coach : portrait au format d'origine (4:5, buste entier, sans recadrage sur le visage) ;
   grille habituelle (3 colonnes sur grand écran : équipe, collègues) */
.wf-carte__image .wf-carte__portrait {
  aspect-ratio: 4 / 5;
  object-position: 50% 0;
}

/* Fiches soin et cours (« Vos praticiens », « Vos coachs ») : mêmes cartes verticales que la page « Équipe »
   (2026-10-28 : les cartes horizontales tronquaient la présentation au survol) */

/* Badge Amelia posé sur la photo (cartes praticien / coach), même pastille que l'en-tête de fiche ;
   en haut à gauche (comme le repère des cartes cabinet), la description au survol occupant le bas de la photo */
.wf-carte__badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  padding: 0.25em 0.75em;
  border-radius: 999px;
  background: var(--bg-inverse);
  color: var(--fg-inverse);
  font-size: var(--text-xs);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.wf-carte__corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
}

.wf-carte__titre {
  font-size: var(--text-h4);
}

.wf-carte__extrait,
.wf-carte__meta {
  font-size: var(--text-sm);
  color: var(--fg2);
}

.wf-carte__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
}

.wf-carte__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: auto;
  padding-top: var(--space-sm);
}

/* ==========================================================================
   CONNEXION, ESPACES AMELIA & CONTACT (page-connexion.php, content-espace.php, sections/contact.php)
   ========================================================================== */

/* Écran partagé (.wf-split) : page « connexion », espaces Amelia (content-espace.php) et contact (sections/contact.php).
   Sous l'en-tête fixe (80px, reste sur fond blanc : logo et menu lisibles), deux colonnes pleine hauteur :
   panneau sombre à gauche (infos), fond clair à droite (formulaire / tableau de bord), contenus centrés.
   40/60 partout (connexion et espaces) ; espaces : infos fixes au défilement. */
.wf-split {
  display: flex;
  flex-direction: column;
  margin-top: 80px;
  /* Liens vers une ancre (#contact) : le haut de l'écran partagé reste visible sous l'en-tête fixe */
  scroll-margin-top: 80px;
  /* Filets fins : sépare l'écran partagé de l'en-tête et du pied de page */
  border-block: 1px solid var(--border);
}

.wf-split__panneau,
.wf-split__contenu {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) var(--space-lg);
}

.wf-split__panneau {
  background: var(--bg-inverse);
  color: var(--color-text-muted);
}

.wf-split__contenu {
  background: var(--bg);
}

.wf-split__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  width: 100%;
  max-width: 440px;
}

.wf-split__inner--large {
  max-width: none;
}

.wf-split__panneau .wf-split__titre {
  margin: var(--space-sm) 0 var(--space-md);
  color: var(--color-text);
}

.wf-split__panneau .lead {
  color: var(--color-text-muted);
}

/* Boutons sur fond sombre : principal en blanc, secondaire en contour clair */
.wf-split__panneau .btn-primary {
  background: var(--bg);
  border-color: var(--bg);
  color: var(--fg1);
}

.wf-split__panneau .btn-primary:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: transparent;
}

.wf-split__liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Infos secondaires du panneau, séparées par un filet */
.wf-connexion__aide {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.wf-connexion__aide p + p {
  margin-top: var(--space-xs);
}

.wf-connexion__aide a,
.wf-connexion__aide strong {
  color: var(--color-text);
}

.wf-connexion__aide a {
  text-decoration: underline;
}

.wf-connexion__aide-titre {
  margin-bottom: var(--space-sm);
  color: var(--color-text);
  font-size: var(--text-h4);
}

/* Encart des clients (soins et cours) sur le panneau sombre : carte rose poudré (couleur des parcours clients, comme
   « Venez découvrir le centre »), icône dans une pastille blanche, texte et bouton bleu canard plein (7,0:1 sur rose) */
.wf-connexion__client {
  --color-text: var(--wf-bleu);
  --color-text-muted: var(--wf-bleu);
  --color-border: rgba(0, 59, 77, 0.25);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-lg);
  border-radius: 20px;
  background: var(--wf-rose);
  color: var(--wf-bleu);
  font-size: var(--text-sm);
}

.wf-connexion__client-icone {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--wf-bleu);
}

.wf-connexion__client .wf-connexion__aide-titre {
  margin-bottom: var(--space-xs);
  color: var(--wf-bleu);
}

.wf-connexion__client p + p {
  margin-top: var(--space-sm);
}

/* Praticien qui a deux comptes (inc/comptes-lies.php) : bandeau au-dessus du module Amelia pour passer de l'espace
   client à l'espace praticien et inversement. Même carte des deux côtés : sauge dans l'espace praticien, rose poudré
   dans l'espace client (--rose) ; texte et bouton bleu canard plein (2026-11-10, Anaïs). */
.wf-espace-passage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: 20px;
  background: var(--wf-sauge);
  color: var(--wf-bleu);
  font-size: var(--text-sm);
}

.wf-espace-passage__texte {
  flex: 1 1 18rem;
  margin: 0;
}

.wf-espace-passage__texte strong {
  display: block;
  font-weight: var(--fw-semi);
}

.wf-espace-passage__texte span {
  color: var(--wf-bleu);
}

.wf-espace-passage__btn {
  flex: 0 0 auto;
}

/* Côté espace client (« Vous cherchez vos rendez-vous ? ») : rose poudré, comme l'encart client de la page connexion.
   Bouton bleu canard plein dans les deux cas (7,0:1 sur rose, 7,7:1 sur sauge). */
.wf-espace-passage--rose {
  background: var(--wf-rose);
}

.wf-charte .wf-espace-passage .btn.wf-espace-passage__btn {
  background: var(--wf-bleu);
  border-color: var(--wf-bleu);
  color: #ffffff;
  text-decoration: none;
}

.wf-charte .wf-espace-passage .btn.wf-espace-passage__btn:hover {
  background: #0b5068;
  border-color: #0b5068;
  color: #ffffff;
}

.wf-espace-passage :focus-visible {
  outline-color: var(--wf-bleu);
}

/* Module Amelia collé au bandeau : Amelia pose 100px de marge au-dessus de son tableau de bord (am-cap__wrapper). */
.wf-split--espace .wf-split__inner:has(> .wf-espace-passage) .amelia-v2-booking #amelia-container.am-cap__wrapper {
  margin-top: 0;
}

/* Bouton bleu canard : ni le blanc du panneau sombre, ni la couleur de l'univers (illisible sur rose). Sélecteur en
   .btn.btn-primary : il doit passer devant « .wf-charte.wf-univers :is(.theme-dark, .hero) .btn-primary », plus loin */
.wf-charte .wf-split__panneau .wf-connexion__client .btn.btn-primary {
  background: var(--wf-bleu);
  border-color: var(--wf-bleu);
  color: #ffffff;
  text-decoration: none;
}

.wf-charte .wf-split__panneau .wf-connexion__client .btn.btn-primary:hover {
  background: #0b5068;
  border-color: #0b5068;
  color: #ffffff;
}

/* Focus : contour bleu canard (le jaune du fond sombre ne se verrait pas sur rose) */
.wf-connexion__client :focus-visible {
  outline-color: var(--wf-bleu);
}

@media (max-width: 400px) {
  .wf-connexion__client {
    grid-template-columns: 1fr;
    padding: var(--space-md);
  }
}

.wf-connexion__carte-titre {
  font-size: var(--text-h3);
}

.wf-connexion__submit {
  width: 100%;
  justify-content: center;
}

/* Renvoi des clients sous le formulaire (sur mobile, le formulaire passe avant l'encart rose du panneau) */
.wf-connexion__renvoi {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.wf-connexion__renvoi a {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: underline;
}

/* Mobile et tablette : colonnes empilées, formulaire en premier (connexion ; contact depuis le 2026-11-09) */
@media (max-width: 1023px) {
  .wf-split:is(.wf-split--connexion, .wf-split--contact) .wf-split__contenu {
    order: -1;
  }
}

@media (min-width: 1024px) {
  .wf-split {
    flex-direction: row;
    min-height: calc(100vh - 80px);
    min-height: calc(100svh - 80px);
  }

  /* 40/60 : panneau sombre 40 %, formulaire / tableau de bord 60 % */
  .wf-split > * {
    min-width: 0;
    padding-inline: var(--space-2xl);
  }

  .wf-split__panneau {
    flex: 0 0 40%;
  }

  .wf-split__contenu {
    flex: 0 0 60%;
  }

  /* Espaces : tableau de bord calé en haut ; infos en haut du panneau, qui défile avec la page
     (jamais d'ascenseur dans le panneau) */
  .wf-split--espace .wf-split__contenu {
    align-items: flex-start;
  }

  .wf-split--espace .wf-split__panneau {
    align-items: flex-start;
  }
}

/* Écran assez haut pour tout le panneau : infos centrées dans la hauteur de l'écran, fixes au défilement */
@media (min-width: 1024px) and (min-height: 820px) {
  .wf-split--espace .wf-split__panneau {
    position: sticky;
    top: 80px;
    align-self: flex-start;
    align-items: center;
    height: calc(100vh - 80px);
    height: calc(100svh - 80px);
  }
}

/* Espaces : panneau plus compact que celui de la connexion (liens, coordonnées, déconnexion) ;
   espacements réduits sur les écrans peu hauts */
.wf-split--espace .wf-split__panneau {
  padding-block: clamp(var(--space-xl), 6vh, var(--space-3xl));
}

.wf-split--espace .wf-split__panneau .wf-split__inner {
  gap: clamp(var(--space-md), 3vh, var(--space-xl));
}

.wf-split--espace .wf-split__titre {
  margin-bottom: var(--space-sm);
}

/* Page contact (sections/contact.php) dans l'écran partagé : coordonnées sur le panneau sombre,
   formulaire plus large que celui de la connexion (champs par deux) */
.wf-split .contact__info,
.wf-split .contact__form-wrapper {
  width: 100%;
}

.wf-split__inner.contact__form-wrapper {
  max-width: 640px;
}

.wf-split__panneau .contact__details {
  margin: 0;
}

.wf-split__panneau .contact__icon {
  background: rgba(255, 255, 255, 0.08);
}

.wf-split__panneau .contact__icon svg {
  color: var(--color-text);
}

.wf-split__panneau .contact__item-label {
  color: var(--color-text-subtle);
}

.wf-split__panneau .contact__item-value {
  color: var(--color-text);
}

.wf-split__panneau a.contact__item-value:hover {
  color: var(--color-text-muted);
}

/* Espaces Amelia : coordonnées (partials/coordonnees.php) dans « Une question ? », même rendu que sur /contact/,
   en plus compact (icônes 40px, lignes resserrées) */
.wf-connexion__aide .contact__details {
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.wf-connexion__aide .contact__item {
  align-items: center;
  gap: var(--space-sm);
}

.wf-connexion__aide .contact__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.wf-connexion__aide .contact__icon svg {
  width: 18px;
  height: 18px;
}

.wf-connexion__aide .contact__item-content {
  gap: 0;
}

.wf-connexion__aide .contact__item-value {
  font-size: var(--text-sm);
  text-decoration: none;
}

.wf-espace__ecrire {
  margin-top: var(--space-md);
}

/* Espaces Amelia : formulaire d'Amelia (connexion / « recevoir un lien d'accès », .am-asi) au style du formulaire
   de /connexion/ : sans carte ni ombre, aligné à gauche, police du site, champs et bouton du thème.
   Seule l'apparence change (fonctionnement d'Amelia intact). Amelia pose ses couleurs et sa police en style en ligne
   sur le composant : variables surchargées avec !important ; sélecteurs préfixés comme les siens (#amelia-container). */
.wf-split--espace .amelia-v2-booking #amelia-container .am-asi {
  --am-font-family: var(--font-main) !important;
  --am-c-main-text: var(--fg1) !important;
  --am-c-main-heading-text: var(--fg1) !important;
  --am-c-primary: var(--bg-brand) !important;
  --am-c-inp-border: var(--border) !important;
  --am-c-inp-text: var(--fg1) !important;
  --am-rad-inp: var(--radius) !important;
  max-width: 440px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* Formulaire ou confirmation affichés (pas encore le tableau de bord) : centrés dans la colonne, comme /connexion/ */
.wf-split--espace .wf-split__contenu:has(.am-asi) {
  align-items: center;
}

.wf-split--espace .amelia-v2-booking #amelia-container .am-asi__top {
  align-items: flex-start;
  margin-bottom: var(--space-lg);
}

.wf-split--espace .amelia-v2-booking #amelia-container .am-asi__header {
  margin-bottom: var(--space-sm);
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

.wf-split--espace .amelia-v2-booking #amelia-container .am-asi__text,
.wf-split--espace .amelia-v2-booking #amelia-container .am-asi__email {
  text-align: left;
  font-size: var(--text-body);
  color: var(--fg2);
}

.wf-split--espace .amelia-v2-booking #amelia-container .am-asi__form .am-ff__item-label,
.wf-split--espace .amelia-v2-booking #amelia-container .am-asi__form .el-form-item__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--fg1);
}

.wf-split--espace .amelia-v2-booking #amelia-container .am-asi__form .el-form-item {
  margin-bottom: var(--space-md);
}

/* Champ : comme .wf-connexion__champ input (filet, arrondi du thème, sans ombre) */
.wf-split--espace .amelia-v2-booking #amelia-container .am-asi .am-input-wrapper .am-input {
  box-shadow: none;
}

/* Bouton : comme .btn.btn-primary (noir, texte blanc, pleine largeur) */
.wf-split--espace .amelia-v2-booking #amelia-container .am-asi .am-asi__btn.am-button {
  --am-c-btn-first: var(--bg-brand) !important;
  --am-c-btn-first-op80: var(--fg2) !important;
  --am-c-btn-first-op30: rgba(0, 0, 0, 0.15) !important;
  --am-c-btn-second: var(--fg-inverse) !important;
  --am-h-btn: auto;
  --am-padd-btn: var(--space-md) var(--space-lg);
  --am-rad-btn: var(--radius);
  --am-fs-btn: var(--text-body);
  --am-fw-btn: var(--fw-semi);
  margin: var(--space-sm) 0 var(--space-md);
}

/* Confirmation « lien d'accès envoyé » (titre #am-sals-title) : textes centrés, icône e-mail au-dessus
   (même carré que les icônes de coordonnées, .contact__icon) */
.wf-split--espace .amelia-v2-booking #amelia-container .am-asi:has(#am-sals-title) .am-asi__top {
  align-items: center;
}

.wf-split--espace .amelia-v2-booking #amelia-container .am-asi:has(#am-sals-title) .am-asi__top::before {
  content: "";
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-md);
  border-radius: 12px;
  background: var(--bg-muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E") center / 26px no-repeat;
}

.wf-split--espace .amelia-v2-booking #amelia-container .am-asi:has(#am-sals-title) .am-asi__header,
.wf-split--espace .amelia-v2-booking #amelia-container .am-asi:has(#am-sals-title) .am-asi__text,
.wf-split--espace .amelia-v2-booking #amelia-container .am-asi:has(#am-sals-title) .am-asi__email {
  text-align: center;
}

.wf-split--espace .amelia-v2-booking #amelia-container .am-asi:has(#am-sals-title) .am-asi__footer {
  justify-content: center;
}

/* Liens du pied (« Mot de passe oublié ? », « Renvoyer ») : soulignés, couleur du texte */
.wf-split--espace .amelia-v2-booking #amelia-container .am-asi__footer {
  justify-content: flex-start;
}

.wf-split--espace .amelia-v2-booking #amelia-container .am-asi__footer .am-button {
  --am-c-btn-first: var(--fg1) !important;
  color: var(--fg1);
  text-decoration: underline;
}

/* Amelia met 100px de marge au-dessus et en dessous de son module : retirée dans l'écran partagé */
.wf-split .amelia-v2-booking #amelia-container.am-fs__wrapper {
  margin-block: 0;
}

.wf-connexion__info {
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--wf-rose);
  background: var(--bg-muted);
  font-size: var(--text-sm);
}

.wf-connexion__erreur {
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid currentColor;
  background: var(--bg-muted);
  color: #b42318;
  font-size: var(--text-sm);
}

.wf-connexion__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.wf-connexion__champ {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.wf-connexion__champ label {
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
}

.wf-connexion__champ input {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
}

.wf-connexion__options {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--text-sm);
}


/* Espace Amelia après « Déconnexion » : module masqué pendant le retour vers /connexion/
   (sinon le formulaire d'Amelia apparaît le temps du chargement ; wf_espace_deconnexion_script()). */
.wf-deconnexion .amelia-v2-booking {
  visibility: hidden;
}

/* ==========================================================================
   MEGA MENU « TROUVER MON SOIN » / « PRATICIENS » (groupes générés par inc/soins.php)
   mega-menu.css est chargé après ce fichier : sélecteurs plus spécifiques.
   ========================================================================== */

.mega-center > li.mega-groupe {
  flex-direction: column;
  gap: var(--space-xs);
}

.mega-center > li.mega-groupe > .sub-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega-center > li.mega-groupe > .sub-menu a {
  font-size: 13px;
  color: var(--fg2);
  text-decoration: none;
}

.mega-center > li.mega-groupe > .sub-menu a:hover,
.mega-center > li.mega-groupe > .sub-menu .current-menu-item > a {
  color: var(--fg-brand);
}

.mega-center > li.mega-tous {
  grid-column: 1 / -1;
}

/* « Trouver mon soin » : besoin + descriptif court en dessous */
.mega-center > li.mega-besoin {
  flex-direction: column;
  gap: 0;
}

.mega-center > li.mega-tous > a::after {
  content: " →";
}

/* « Trouver mon sport » : 3 colonnes ; les deux catégories les plus fournies (en premier, voir
   wf_menu_sports()) occupent chacune une colonne, les suivantes s'empilent dans la 3e.
   Rangée 2 en 1fr : la hauteur des grandes colonnes n'écarte pas les catégories empilées. */
.mega-center--colonnes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
}

.mega-center--colonnes > li.mega-categorie:nth-child(-n + 2) {
  grid-row: span 2;
}

.mega-center--colonnes > li.mega-categorie {
  align-self: start;
}

/* « Trouver mon sport » : 1re catégorie (la plus fournie, Yoga) sur toute la 1re colonne, 2e (Fitness & cardio) en haut de
   la 2e, 3e et 4e empilées dans la 3e, les suivantes (Relaxation) sous la 2e (2026-10-27) ; « Tous les cours » sous la 1re */
.mega-panel--cours .mega-center--colonnes {
  grid-template-rows: auto auto 1fr auto;
}

.mega-panel--cours .mega-center--colonnes > li.mega-categorie:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / 4;
}

.mega-panel--cours .mega-center--colonnes > li.mega-categorie:nth-child(2) {
  grid-column: 2;
  grid-row: 1 / 3;
}

.mega-panel--cours .mega-center--colonnes > li.mega-categorie:nth-child(3),
.mega-panel--cours .mega-center--colonnes > li.mega-categorie:nth-child(4) {
  grid-column: 3;
  grid-row: auto;
}

.mega-panel--cours .mega-center--colonnes > li.mega-categorie:nth-child(n + 5) {
  grid-column: 2;
  grid-row: 3;
}

.mega-panel--cours .mega-center--colonnes > li.mega-tous {
  grid-column: 1;
  grid-row: 4;
}

@media (max-width: 1119px) {
  /* Mobile : soins visibles sous chaque besoin, en retrait */
  .nav-menu .mega-groupe > .sub-menu {
    display: block;
    padding: 4px 0 0 var(--space-md);
  }

  .nav-menu .mega-groupe > .sub-menu li {
    padding: 4px 0;
  }
}

/* ==========================================================================
   ÉQUIPE (page-template-equipe.php : /lequipe/, /nos-professeurs/)
   Cartes : composant partagé .wf-cartes / .wf-carte (section CARTES).
   ========================================================================== */

.wf-equipe__entete {
  margin-bottom: var(--space-2xl);
}

.wf-equipe__section + .wf-equipe__section {
  margin-top: var(--space-3xl);
}

.wf-equipe__categorie {
  margin-bottom: var(--space-xl);
  font-size: var(--text-h3);
}

.mega-center > li.mega-groupe > .sub-menu .mega-voir-tout > a {
  font-weight: var(--fw-semi);
  color: var(--fg1);
}

.mega-center > li.mega-groupe > .sub-menu .mega-voir-tout > a::after {
  content: " →";
}

/* ==========================================================================
   ACCUEIL (page-template-home.php) : liens dans les cartes des sections du starter
   ========================================================================== */

.services__card-title a,
.problem__card-title a {
  color: inherit;
  text-decoration: none;
}

.services__card-title a:hover,
.problem__card-title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.services__card-lien {
  display: inline-block;
  margin-top: var(--space-md);
  color: var(--fg-brand);
  font-weight: var(--fw-semi);
  text-decoration: none;
}

/* « Ce qui vous amène » : cartes avec image (à la place du numéro) et pastilles des autres besoins */
.problem__card--image {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.problem__card-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.problem__card-corps {
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
}

.problem__liens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
}

.problem__liens-label {
  width: 100%;
  margin-bottom: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.problem__lien {
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  font-size: var(--text-sm);
  text-decoration: none;
}

.problem__lien:hover {
  border-color: var(--color-text);
}

/* « Notre accueil » : photo en fond de la carte sombre, dégradé pour la lisibilité du texte */
.solution__card--image {
  position: relative;
  overflow: hidden;
}

.solution__card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solution__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0.45) 100%);
}

.solution__card--image .solution__grid {
  position: relative;
}

/* Accueil, « Vous êtes praticien ? » : changement de public marqué (badge, question, chiffres) ; noir et blanc */
.comparison--audience .comparison__header {
  max-width: 720px;
}

.comparison__badge {
  display: inline-block;
  margin-bottom: var(--space-lg);
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-text);
  border-radius: 999px;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.comparison--audience .comparison__title {
  font-size: var(--text-hero);
}

.comparison__sous-titre {
  margin-bottom: var(--space-md);
  color: var(--color-text);
  font-size: var(--text-h3);
}

.comparison__chiffres {
  display: grid;
  gap: var(--space-md);
  margin: 0 0 var(--space-2xl);
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .comparison__chiffres {
    grid-template-columns: repeat(3, 1fr);
  }
}

.comparison__chiffre {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-align: center;
}

.comparison__chiffre-valeur {
  color: var(--color-text);
  font-size: var(--text-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

/* Chiffres clés après le tableau */
.comparison__preuves {
  margin-top: var(--space-2xl);
  text-align: center;
}

.comparison__preuves-titre {
  margin-bottom: var(--space-lg);
  color: var(--color-text);
  font-size: var(--text-h4);
}

.comparison__chiffres--preuves {
  margin-bottom: 0;
}

.comparison__chiffres--preuves .comparison__chiffre-valeur {
  font-size: var(--text-h2);
}

.comparison__chiffre-libelle {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Chiffres prix (rangée du haut) : le plus grand possible sur une ligne, d'après la largeur de leur cadre
   (unités de conteneur : ~17 caractères en gras tiennent dans 9,5 % de la largeur par caractère) */
.comparison__chiffres:not(.comparison__chiffres--preuves) .comparison__chiffre {
  container-type: inline-size;
}

.comparison__chiffres:not(.comparison__chiffres--preuves) .comparison__chiffre-valeur {
  font-size: clamp(1.25rem, 9.5cqi, 2.75rem);
}

/* Bandeau défilant (cases.php + defilement.js) : zone défilable, flèches sur les bords, boutons dessous */
.cases__defilement {
  position: relative;
}

.cases__marquee.is-defilable {
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
}

.cases__marquee.is-defilable::-webkit-scrollbar {
  display: none;
}

.cases__marquee.is-defilable .cases__track {
  animation: none;
}

.cases__marquee.is-glisse {
  cursor: grabbing;
  user-select: none;
}

.cases__marquee.is-glisse .cases__card {
  pointer-events: none;
}

.cases__fleche {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--bg);
  color: var(--fg1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transform: translateY(-50%);
}

.cases__fleche[hidden] {
  display: none;
}

.cases__fleche--precedent {
  left: var(--space-md);
}

.cases__fleche--suivant {
  right: var(--space-md);
}

.cases__fleche:hover {
  background: var(--bg-muted);
}

.cases__fleche:focus-visible {
  outline: 2px solid var(--fg-inverse);
  outline-offset: 3px;
}

.cases__ctas {
  margin-top: var(--space-2xl);
}

/* Section chiffres (fond sombre) : chiffres en blanc (le starter utilise --bg-accent, sombre en noir et blanc) */
.numbers__value {
  color: var(--color-text);
}

/* ==========================================================================
   TÉMOIGNAGES DE PRATICIENS (partials/temoignages-praticiens.php + temoignages.js)
   Couleurs par variables --color-text* : fond sombre (accueil) comme clair. Noir et blanc.
   ========================================================================== */

.wf-temoignages {
  margin-top: var(--space-3xl);
}

.wf-temoignages__titre {
  margin-bottom: var(--space-xl);
  color: var(--color-text);
  font-size: var(--text-h3);
  text-align: center;
}

.wf-temoignages__fenetre {
  display: grid;
  gap: var(--space-2xl);
}

/* Avec JS : une diapositive à la fois, superposées dans la même cellule (hauteur = la plus haute) */
.wf-temoignages.is-slider .wf-temoignages__fenetre > .wf-temoignage {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.wf-temoignages.is-slider .wf-temoignages__fenetre > .wf-temoignage.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease;
}

/* JS actif mais carrousel pas encore démarré (temoignages.js, chargé en fin de page) : même état que le carrousel
   (cartes superposées, la première seule visible) pour éviter le flash des autres avis au chargement.
   Sans JS (scripting: none), tous les avis restent affichés les uns sous les autres. */
@media (scripting: enabled) {
  .wf-temoignages:not(.is-slider) .wf-temoignages__fenetre > .wf-temoignage {
    grid-area: 1 / 1;
  }

  .wf-temoignages:not(.is-slider) .wf-temoignages__fenetre > .wf-temoignage:not(:first-child) {
    visibility: hidden;
  }
}

.wf-temoignage {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin: 0;
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-muted);
}

/* Photo bien visible : grande, portrait */
.wf-temoignage__photo {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
}

.wf-temoignage__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}

.wf-temoignage__badge {
  position: absolute;
  left: var(--space-md);
  bottom: var(--space-md);
  padding: 0.25em 0.75em;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg1);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
}

.wf-temoignage__corps {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-lg);
}

/* Gros guillemets en CSS */
.wf-temoignage__avis {
  position: relative;
  margin: 0;
  padding-top: 3.5rem;
  color: var(--color-text);
  font-size: var(--text-lead);
  line-height: var(--lh-body);
}

.wf-temoignage__avis::before {
  content: "\201C";
  position: absolute;
  top: -1.25rem;
  left: -0.25rem;
  color: var(--color-text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 7rem;
  line-height: 1;
  opacity: 0.35;
}

.wf-temoignage__auteur {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wf-temoignage__nom {
  color: var(--color-text);
  font-size: var(--text-h4);
  font-weight: var(--fw-semi);
}

.wf-temoignage__nom a {
  color: inherit;
  text-decoration: none;
}

.wf-temoignage__nom a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.wf-temoignage__metier {
  color: var(--color-text-muted);
}

.wf-temoignage__detail {
  margin-top: var(--space-xs);
  color: var(--color-text-subtle, var(--color-text-muted));
  font-size: var(--text-sm);
}

@media (min-width: 768px) {
  .wf-temoignage {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xl);
    padding: var(--space-2xl);
  }

  .wf-temoignage__photo {
    width: 280px;
    margin-inline: 0;
  }
}

/* Navigation : flèches + points */
.wf-temoignages__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.wf-temoignages__nav[hidden] {
  display: none;
}

.wf-temoignages__fleche {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.wf-temoignages__fleche:hover {
  border-color: var(--color-text);
}

.wf-temoignages__points {
  display: flex;
  gap: var(--space-xs);
}

.wf-temoignages__point {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid var(--color-text);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.wf-temoignages__point[aria-current="true"] {
  background: var(--color-text);
}

/* Témoignages en section à part (fin de « Trouver mon cabinet ») */
.wf-temoignages-section .wf-temoignages {
  margin-top: 0;
}

/* « Trouver mon cabinet » : bandeau de chiffres clés en bas de l'en-tête (fond sombre) */
.wf-hero__kpis {
  display: grid;
  gap: var(--space-md);
  margin: var(--space-2xl) 0 0;
  padding: var(--space-lg) 0 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

/* Autant de colonnes que de chiffres (3 sur « Trouver mon cabinet », 4 sur l'accueil) ; 2 par ligne en mobile */
.wf-hero__kpis {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .wf-hero__kpis {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

.wf-hero__kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wf-hero__kpi-valeur {
  color: var(--color-text);
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.wf-hero__kpi-libelle {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Avantages de la location : grille 3 colonnes sur grand écran (about-guarantees en a 2) */
@media (min-width: 1024px) {
  .about-guarantees:has(+ .wf-temoignages-section) .about-guarantees__grid,
  .about-guarantees:has(+ #filtres) .about-guarantees__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Bandeau de chiffres de l'en-tête : centrés, séparateur vertical entre les chiffres (à partir de 768px) */
.wf-hero__kpi {
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .wf-hero__kpis {
    gap: 0;
  }

  .wf-hero__kpi {
    padding-inline: var(--space-md);
  }

  .wf-hero__kpi + .wf-hero__kpi {
    border-left: 1px solid var(--color-border);
  }
}

/* Mobile, bandeau de 3 chiffres (« Trouver mon cabinet ») : sur une seule ligne, chiffres et libellés plus petits,
   même séparateur vertical (à 4 chiffres, comme sur l'accueil, on garde 2 par ligne) */
@media (max-width: 767px) {
  .wf-hero__kpis:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .wf-hero__kpis:has(> :nth-child(3):last-child) .wf-hero__kpi {
    padding-inline: var(--space-xs);
  }

  .wf-hero__kpis:has(> :nth-child(3):last-child) .wf-hero__kpi + .wf-hero__kpi {
    border-left: 1px solid var(--color-border);
  }

  .wf-hero__kpis:has(> :nth-child(3):last-child) .wf-hero__kpi-valeur {
    font-size: 1.5rem;
  }

  .wf-hero__kpis:has(> :nth-child(3):last-child) .wf-hero__kpi-libelle {
    font-size: var(--text-xs);
    line-height: 1.35;
  }
}

/* Boutons « Trouver mon cabinet ↓ » sous les sections avantages et témoignages */
.about-guarantees__ctas,
.wf-temoignages-section__ctas {
  margin-top: var(--space-2xl);
}

/* ==========================================================================
   MENU SUR EN-TÊTE SOMBRE (body.wf-entete-sombre, inc/soins.php)
   Avant défilement, en-tête transparent sur la photo : logo, liens et burger en blanc.
   Au défilement (.scrolled, fond blanc) ou menu ouvert (mega-open, menu-open) : couleurs d'origine (noir).
   mega-menu.css est chargé après ce fichier : sélecteurs plus spécifiques.
   ========================================================================== */

body.wf-entete-sombre:not(.mega-open):not(.menu-open) .header-main:not(.scrolled) .site-logo,
body.wf-entete-sombre:not(.mega-open):not(.menu-open) .header-main:not(.scrolled) .nav-menu > li > a {
  color: var(--fg-inverse);
}

body.wf-entete-sombre:not(.mega-open):not(.menu-open) .header-main:not(.scrolled) .site-logo:hover,
body.wf-entete-sombre:not(.mega-open):not(.menu-open) .header-main:not(.scrolled) .nav-menu > li > a:hover {
  color: rgba(255, 255, 255, 0.7);
}

body.wf-entete-sombre:not(.mega-open):not(.menu-open) .header-main:not(.scrolled) .burger span {
  background: var(--fg-inverse);
}

/* Logo (header.php) : deux fichiers superposés ; en couleurs par défaut, blanc sur l'en-tête transparent des pages
   à en-tête sombre (mêmes conditions que les liens ci-dessus). 110px de large : taille minimale web du logo avec
   baseline (charte). */
.site-logo--wellfuz {
  display: inline-grid;
  flex-shrink: 0;
}

.site-logo--wellfuz .site-logo__img {
  grid-area: 1 / 1;
  display: block;
  width: 110px;
  height: auto;
}

.site-logo--wellfuz .site-logo__img--blanc {
  visibility: hidden;
}

body.wf-entete-sombre:not(.mega-open):not(.menu-open) .header-main:not(.scrolled) .site-logo__img--blanc {
  visibility: visible;
}

body.wf-entete-sombre:not(.mega-open):not(.menu-open) .header-main:not(.scrolled) .site-logo__img--couleurs {
  visibility: hidden;
}

/* Pied de page : logo blanc en petit au-dessus de la baseline */
.footer__logo-svg {
  display: inline-block;
  margin-bottom: var(--space-md);
}

.footer__logo-svg img {
  display: block;
  width: 140px;
  height: auto;
}

/* Barre de navigation sur toute la largeur de l'écran : logo calé à gauche, bouton Contact calé à droite (au lieu du
   conteneur de 1280 px du starter, mega-menu.css, chargé après ce fichier : d'où .header-main devant), marge latérale
   qui suit la largeur */
.header-main .header-inner {
  max-width: none;
  padding-inline: clamp(16px, 3vw, 48px);
}

/* Menu centré sur l'écran (desktop ; en mobile, le menu est un panneau) : grille à 3 colonnes, les deux colonnes
   latérales de même largeur (1fr) quel que soit l'écart de largeur entre le logo et le bouton Contact */
@media (min-width: 1120px) {
  .header-main .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .header-inner .site-logo {
    justify-self: start;
  }

  .header-inner .header__cta {
    justify-self: end;
    margin-left: 0;
  }
}

/* « Trouver mon … » : en-tête de la section filtres + liste (eyebrow, H2, sous-titre, intro), centré */
.wf-tms__liste-entete {
  max-width: 720px;
  margin: 0 auto var(--space-2xl);
  text-align: center;
}

.wf-tms__liste-titre {
  margin-bottom: var(--space-xs);
}

.wf-tms__liste-sous-titre {
  margin-bottom: var(--space-md);
  color: var(--fg2);
  font-size: var(--text-h4);
}

/* Titre des témoignages en H2 (section à part) */
.wf-temoignages__titre--h2 {
  font-size: var(--text-h2);
}

/* Appel à l'action du pied de page (« Venez découvrir le centre ») : photo en fond + voile sombre.
   Classe propre (.cta__inner--image) : les encarts Formules / Tarifs, qui partagent .cta__inner, ne sont pas concernés. */
.cta__inner--image {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.cta__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.6);
}


/* Pied de page : logo en très grand avant le copyright, décoratif, dégradé blanc léger qui s'efface vers le bas */
.footer__marque {
  margin-top: var(--space-2xl);
  overflow: hidden;
  text-align: center;
  user-select: none;
  pointer-events: none;
}

.footer__marque-texte {
  display: block;
  font-family: var(--font-main);
  font-size: clamp(4rem, 19vw, 18rem);
  font-weight: var(--fw-bold);
  line-height: 0.85;
  letter-spacing: -0.04em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.footer__marque-img {
  display: block;
  width: 90%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  opacity: 0.15;
  filter: brightness(0) invert(1);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}

/* Hero avec bandeau de chiffres (accueil) : le bandeau est calé en bas de la section (hauteur d'écran),
   le contenu reste centré dans l'espace au-dessus */
.hero--bandeau {
  align-items: stretch;
}

.hero--bandeau .hero__content {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  padding-bottom: var(--space-xl);
}

.hero--bandeau .hero__content > .container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.hero--bandeau .hero__grid {
  margin-top: auto;
}

.hero--bandeau .wf-hero__kpis {
  margin-top: auto;
}

/* Hero centré (accueil) : tout le texte centré, pleine largeur */
.hero--centre .hero__col--content {
  width: 100%;
}

.hero--centre .hero__inner {
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}

.hero--centre .hero__intro {
  margin-inline: auto;
  max-width: 640px;
}

.hero--centre .hero__ctas,
.hero--centre .hero__metrics {
  justify-content: center;
}

/* Hero : trois parcours en cartes-boutons translucides sur la photo, blanches au survol */
.hero__choix-label {
  margin-bottom: var(--space-sm);
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.hero__choix {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .hero__choix {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
}

.hero__choix-lien {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: var(--space-lg) var(--space-md);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--fg-inverse);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.hero__choix-lien:hover,
.hero__choix-lien:focus-visible {
  background: var(--bg);
  color: var(--fg1);
  transform: translateY(-2px);
}

.hero__choix-lien:focus-visible {
  outline: 2px solid var(--fg-inverse);
  outline-offset: 3px;
}

.hero__choix-icone svg {
  display: block;
  width: 28px;
  height: 28px;
  margin-bottom: var(--space-xs);
}

.hero__choix-titre {
  font-size: var(--text-h4);
  font-weight: var(--fw-semi);
}

.hero__choix-titre::after {
  content: " →";
}

.hero__choix-sous-titre {
  font-size: var(--text-sm);
  opacity: 0.75;
}

/* ==========================================================================
   ACCUEIL : TROIS CHAPITRES (page-template-home.php), un par cible, mise en page propre à chacun
   01 Soins : deux colonnes, gauche fixe · 02 Cours : noir pleine largeur · 03 Praticiens : panneau en retrait.
   Repère : grand numéro + libellé vertical fixe dans la marge (grands écrans). Noir et blanc.
   ========================================================================== */

.wf-chapitre {
  position: relative;
  scroll-margin-top: 80px;
}

.wf-chapitre__numero {
  display: block;
  margin-bottom: var(--space-sm);
  color: var(--color-text, var(--fg1));
  font-size: clamp(4rem, 9vw, 7rem);
  font-weight: var(--fw-bold);
  line-height: 0.85;
  letter-spacing: -0.04em;
  opacity: 0.12;
}

.wf-chapitre__titre {
  margin-bottom: var(--space-md);
}

/* Libellé vertical fixe dans la marge, le long du chapitre (là où la marge le permet) */
.wf-chapitre__rail {
  display: none;
}

@media (min-width: 1440px) {
  .wf-chapitre__rail {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 24px;
    z-index: 2;
    width: 24px;
    pointer-events: none;
  }

  .wf-chapitre__rail span {
    position: sticky;
    top: 40vh;
    display: block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: var(--color-text-muted, var(--fg2));
    font-size: var(--text-xs);
    font-weight: var(--fw-semi);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
  }
}

/* ---------- 01 Soins : deux colonnes, la gauche reste fixe pendant que la droite défile ---------- */
.wf-chapitre--soins {
  background: var(--bg);
}

.wf-chapitre__grille {
  display: grid;
  gap: var(--space-2xl);
}

@media (min-width: 1024px) {
  .wf-chapitre__grille {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-3xl);
    align-items: start;
  }

  .wf-chapitre__fixe {
    position: sticky;
    top: 110px;
  }
}

.wf-chapitre__etapes {
  display: grid;
  gap: var(--space-sm);
  margin: var(--space-xl) 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}

.wf-chapitre__etapes li {
  position: relative;
  padding-left: 2.25rem;
  counter-increment: etape;
}

.wf-chapitre__etapes li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 0.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--fg1);
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
}

.wf-chapitre__etapes strong {
  display: block;
}

.wf-chapitre__etapes span {
  color: var(--fg2);
  font-size: var(--text-sm);
}

.wf-chapitre__ctas {
  justify-content: flex-start;
}

/* Besoins : grandes cartes image + texte, 2 par ligne */
.wf-besoins {
  display: grid;
  gap: var(--space-xl) var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .wf-besoins {
    grid-template-columns: repeat(2, 1fr);
  }
}

.wf-besoin__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  transition: transform 0.3s ease;
}

.wf-besoin__image {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
}

.wf-besoin:hover .wf-besoin__image img {
  transform: scale(1.03);
}

.wf-besoin__titre {
  margin: var(--space-md) 0 var(--space-xs);
  font-size: var(--text-h4);
}

.wf-besoin__titre a {
  color: inherit;
  text-decoration: none;
}

.wf-besoin__titre a::after {
  content: " →";
}

.wf-besoin__desc {
  color: var(--fg2);
  font-size: var(--text-sm);
}

.wf-pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.wf-pastille {
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg1);
  font-size: var(--text-sm);
  text-decoration: none;
}

.wf-pastille:hover {
  border-color: var(--fg1);
}

.wf-chapitre__photo {
  margin: var(--space-2xl) 0 0;
}

.wf-chapitre__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}

.wf-chapitre__photo figcaption {
  margin-top: var(--space-sm);
  color: var(--fg2);
  font-size: var(--text-sm);
}

/* ---------- 02 Cours : noir, pleine largeur, en-tête en ligne (titre | chiffres), bandeau bord à bord ---------- */
.wf-chapitre--cours {
  padding-top: var(--space-section);
  background: var(--bg-inverse);
  color: var(--color-text);
}

.wf-chapitre__entete-ligne {
  display: grid;
  gap: var(--space-xl);
  align-items: end;
}

@media (min-width: 1024px) {
  .wf-chapitre__entete-ligne {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-3xl);
  }
}

.wf-chapitre__kpis {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wf-chapitre__kpis li {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  padding-inline: var(--space-md);
  text-align: center;
}

.wf-chapitre__kpis li + li {
  border-left: 1px solid var(--color-border);
}

.wf-chapitre__kpi-valeur {
  color: var(--color-text);
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.wf-chapitre__kpi-libelle {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.wf-chapitre--cours .cases {
  padding-top: var(--space-2xl);
  background: transparent;
}

/* ---------- 03 Praticiens : panneau arrondi en retrait des bords, grille asymétrique ---------- */
.wf-chapitre--praticiens {
  padding: var(--space-section) var(--space-md);
  background: var(--bg);
}

.comparison--panneau {
  max-width: 1360px;
  margin: 0 auto;
  border-radius: 32px;
}

.comparison--panneau .comparison__header {
  max-width: 760px;
  margin: 0 0 var(--space-2xl);
  text-align: left;
}

@media (min-width: 1024px) {
  .comparison--panneau > .container {
    display: grid;
    grid-template-columns: 4fr 8fr;
    grid-template-areas:
      "entete entete"
      "chiffres tableau"
      "ctas tableau"
      "preuves preuves"
      "temoignages temoignages"
      "fin fin";
    column-gap: var(--space-2xl);
    align-items: start;
  }

  .comparison--panneau .comparison__header { grid-area: entete; }
  .comparison--panneau .comparison__chiffres:not(.comparison__chiffres--preuves) {
    grid-area: chiffres;
    grid-template-columns: 1fr;
    margin-bottom: var(--space-lg);
  }
  .comparison--panneau .comparison__card { grid-area: tableau; }
  .comparison--panneau .comparison__preuves { grid-area: preuves; }
  .comparison--panneau .wf-temoignages { grid-area: temoignages; }
  .comparison--panneau .section__ctas:not(.comparison__ctas-fin) {
    grid-area: ctas;
    flex-direction: column;
    align-items: stretch;
    margin-top: 0;
  }

  .comparison--panneau .section__ctas .btn {
    text-align: center;
  }

  .comparison--panneau .comparison__ctas-fin { grid-area: fin; }
}

/* Cartes de l'en-tête vers un chapitre de la page : flèche vers le bas */
.hero__choix-lien[href^="#"] .hero__choix-titre::after {
  content: " ↓";
}

/* Comparatif en liste (comparison.php, presentation « liste ») : une ligne par critère, sans encadré */
.comparison__liste {
  margin: 0;
}

.comparison__ligne {
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border);
}

.comparison__ligne:last-child {
  border-bottom: 1px solid var(--color-border);
}

.comparison__critere {
  margin-bottom: 4px;
  color: var(--color-text-subtle, var(--color-text-muted));
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.comparison__nous {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-h4);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
}

.comparison__ailleurs {
  margin: 4px 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

@media (min-width: 1024px) {
  .comparison--panneau .comparison__liste {
    grid-area: tableau;
  }
}

/* Boutons répétés en bas du panneau praticiens */
.comparison__ctas-fin {
  margin-top: var(--space-2xl);
}

/* ==========================================================================
   CARTES : étiquette sur la photo, infos en lignes avec icône, étiquettes d'usage, pied en 2 colonnes
   (fiche-carte.php, praticien-carte.php, « Ses soins » de la fiche praticien ; pied : partials/carte-pied.php)
   ========================================================================== */

/* Prix d'appel / premier cours offert, posé sur la photo : style translucide de l'en-tête */
.wf-carte__etiquette {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  padding: 0.3em 0.8em;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--fg1);
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  line-height: 1.4;
}

.wf-carte__infos {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--fg2);
  font-size: var(--text-sm);
}

.wf-carte__infos li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wf-carte__infos svg {
  flex-shrink: 0;
  color: var(--fg1);
}

/* « Avec … » : vignettes rondes des praticiens, légèrement superposées ; seul sur sa ligne, au-dessus de la durée */
.wf-carte__infos .wf-carte__avec {
  flex-basis: 100%;
}

.wf-carte__avatars {
  display: flex;
  flex-shrink: 0;
}

.wf-carte__infos .wf-carte__avatar {
  width: 32px;
  height: 32px;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 20%;
  border: 2px solid var(--bg);
  border-radius: 50%;
}

.wf-carte__avatar + .wf-carte__avatar {
  margin-left: -8px;
}

.wf-carte__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wf-carte__tags li {
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg2);
  font-size: var(--text-xs);
}

/* Carte soin / cours / cabinet (fiche-carte.php), type boutique en ligne : toute la carte mène à la fiche
   (lien du titre étiré ; effet de survol seulement si lien : pas de fiche cabinet), infos sous le titre,
   extrait sur deux lignes, prix + bouton « Réserver » en bas */
.wf-carte:has(.wf-carte__achat) {
  position: relative;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.wf-carte:has(.wf-carte__lien):hover {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.wf-carte:has(.wf-carte__lien:focus-visible) {
  outline: 2px solid var(--fg1);
  outline-offset: 2px;
}

.wf-carte:has(.wf-carte__achat) .wf-carte__image {
  overflow: hidden;
}

.wf-carte:has(.wf-carte__achat) .wf-carte__image img {
  transition: transform 0.4s ease;
}

.wf-carte:has(.wf-carte__lien):hover .wf-carte__image img {
  transform: scale(1.04);
}

.wf-carte__lien {
  color: inherit;
  text-decoration: none;
}

.wf-carte__lien:focus-visible {
  outline: none;
}

/* Lien étiré : couvre toute la carte (le bouton « Réserver » passe au-dessus) */
.wf-carte__lien::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Praticien(s) puis durée, sous le titre */
.wf-carte__infos--ligne {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px var(--space-md);
}

.wf-carte:has(.wf-carte__achat) .wf-carte__extrait {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Cartes : repère (1, A, A+B) en pastille sur la photo (cabinets), et description complète au survol (toutes les cartes :
   soin, cours, cabinet, praticien, coach)
   (photo assombrie) ; les deux laissent passer le clic vers le lien étiré de la carte */
.wf-carte__repere {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25em;
  height: 2.25em;
  padding: 0 0.6em;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg1);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

/* Badge Amelia (cartes praticien / coach) visible au-dessus du calque de description */
.wf-carte__image .wf-carte__badge {
  z-index: 2;
}

.wf-carte__survol {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  margin: 0;
  padding: var(--space-lg);
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.72);
  color: var(--fg-inverse);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

@media (hover: hover) {
  .wf-carte:hover .wf-carte__survol,
  .wf-carte:focus-within .wf-carte__survol {
    opacity: 1;
  }

  /* Description lisible au survol : pas de version dans la carte */
  .wf-carte__extrait--survol {
    display: none;
  }
}

/* Écrans tactiles (pas de survol) : description entière dans la carte, pas de calque */
@media (hover: none) {
  .wf-carte__survol {
    display: none;
  }

  .wf-carte .wf-carte__extrait--survol {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }
}

/* Fiche cours : onglets « Réserver un cours / Acheter une carte » de l'en-tête (WF_SPORT_CARTES_ONGLETS) */
.wf-onglets__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* comme le module Amelia, centré dans sa colonne (largeur variable selon l'étape) */
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  scroll-margin-top: 100px;
}

.wf-onglets [role="tab"][aria-selected="true"] {
  background: var(--bg-inverse);
  border-color: var(--bg-inverse);
  color: var(--fg-inverse);
}

/* Sur l'en-tête sombre (photo des fiches cours) : onglets inversés, sélectionné en blanc.
   En-tête clair (fiche praticien mixte, onglets Cours | Soins sur fond grège) : styles de base ci-dessus. */
.wf-hero.theme-dark .wf-onglets [role="tab"] {
  border-color: rgba(255, 255, 255, 0.4);
  background: transparent;
  color: var(--fg-inverse);
}

.wf-hero.theme-dark .wf-onglets [role="tab"][aria-selected="true"] {
  border-color: var(--bg);
  background: var(--bg);
  color: var(--fg1);
}

.wf-onglets__liste[hidden],
.wf-onglets__panneau[hidden] {
  display: none;
}

.wf-onglets__panneau + .wf-onglets__panneau {
  margin-top: var(--space-xl);
}

/* Fiche cours : module « Acheter une carte » sous l'encart « Formules » (formules-sport.php, arg acheter) */
.wf-formules__achat {
  margin-top: var(--space-xl);
  scroll-margin-top: 100px;
}

.wf-formules__achat[hidden] {
  display: none;
}

.wf-formules__achat .amelia-v2-booking #amelia-container.am-fs__wrapper {
  margin-block: var(--space-md) 0;
}

.wf-carte__achat {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* prix (ou « Premier cours offert ») et bouton centrés verticalement */
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.wf-carte__prix {
  display: flex;
  flex-direction: column;
  margin: 0;
  line-height: 1.15;
}

.wf-carte__prix-des {
  color: var(--fg2);
  font-size: var(--text-xs);
}

.wf-carte__prix-valeur {
  color: var(--fg1);
  font-size: var(--text-h4);
  font-weight: var(--fw-bold);
}

.wf-carte__prix--offre {
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
}

.wf-carte__reserver {
  position: relative;
  z-index: 2;
  margin-left: auto;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
}

/* Pied : deux colonnes sous un filet, sans bouton ; lien 40 % | action 60 % (« Prendre rendez-vous » est long),
   un lien seul occupe toute la largeur ; l'action en gras, remplie au survol */
.wf-carte__pied {
  display: flex;
  border-top: 1px solid var(--border);
}

.wf-carte__pied-lien {
  flex: 2 1 0;
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  color: var(--fg1);
  font-size: var(--text-sm);
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.wf-carte__pied-lien + .wf-carte__pied-lien {
  border-left: 1px solid var(--border);
}

.wf-carte__pied-lien:hover,
.wf-carte__pied-lien:focus-visible {
  background: var(--bg-muted);
}

.wf-carte__pied-lien--action {
  flex-grow: 3;
  font-weight: var(--fw-semi);
}

.wf-carte__pied-lien--action::after {
  content: " →";
}

.wf-carte__pied-lien--action:hover,
.wf-carte__pied-lien--action:focus-visible {
  background: var(--bg-inverse);
  color: var(--fg-inverse);
}

/* ##########################################################################
   CHARTE WELLFUZ (design system) : tout le site
   ##########################################################################
 * Posée sur body.wf-charte (inc/charte.php, toutes les pages) : le préfixe .wf-charte garde la priorité sur les
 * styles de base (input.css) et sur les styles Wellfuz ci-dessus. Documentation : docs/charte.md.
 *
 * Direction : une couleur de la charte par parcours, du hero jusqu'au chapitre :
 *   Soins = rose poudré · Cours = jaune soleil (sur bleu canard) · Praticiens = vert sauge.
 * Texte et boutons en bleu canard (à la place du noir) ; fond blanc ; pas d'orange ni de terracotta (contraste).
 * Typo : Questrial partout (titres, texte, boutons) ; mots en <em> des titres en Great Vibes (écriture manuscrite).
 *   Questrial n'existe qu'en Regular : titres et boutons en 400, hiérarchie par la taille ; seul <strong> garde un gras simulé.
 * Contrastes (WCAG) : bleu canard sur blanc 12,1 ; sur rose 7,0 ; sur jaune 6,6 ; sur sauge 7,7 ; jaune sur bleu 6,6.
 */

/* ==========================================================================
   1. TOKENS (charte)
   ========================================================================== */

.wf-charte {
  /* Polices */
  --font-main: 'Questrial', system-ui, sans-serif;
  --font-heading: 'Questrial', system-ui, sans-serif;
  --font-accent: 'Questrial', system-ui, sans-serif;

  /* Couleurs de la charte */
  --wf-bleu: #003b4d;
  --wf-jaune: #f5b335;
  --wf-rose: #e3baca;
  --wf-rose-fonce: #c77595;     /* même teinte que le rose poudré, plus foncé (bordures au survol) */
  --wf-sauge: #c4d4a4;
  --wf-grege: #d6d1ca;

  /* Tokens du thème rebranchés sur la charte */
  --fg1: var(--wf-bleu);
  --fg2: #2f5a68;               /* 7,6:1 sur blanc */
  --fg3: #3a6472;               /* 6,5:1 sur blanc */
  --fg-brand: var(--wf-bleu);
  --bg: #ffffff;
  --bg-muted: #efece8;          /* grège éclairci */
  --bg-inverse: var(--wf-bleu);
  --bg-brand: var(--wf-bleu);
  --bg-accent: var(--wf-jaune);
  --border: var(--wf-grege);
  --radius: 12px;

  font-family: var(--font-main);
  color: var(--fg1);
}

/* Couleurs contextuelles du socle : déclarées dans :root à partir du noir (input.css), elles ne suivent pas --fg1
   redéfini ici ; on les redéclare en bleu canard (fonds clairs). Les sections sombres redéfinissent les leurs. */
.wf-charte,
.wf-charte .theme-light {
  --color-text: var(--wf-bleu);
  --color-text-muted: #2f5a68;            /* 7,6:1 sur blanc */
  --color-text-subtle: #45707e;           /* 5,4:1 sur blanc */
  --color-accent: var(--wf-bleu);         /* pas de texte jaune sur fond clair (1,9:1) */
  --color-border: rgba(0, 59, 77, 0.15);
  --color-surface: #ffffff;
  --color-surface-muted: rgba(0, 59, 77, 0.05);
}

/* Sections sombres (dont le hero photo des pages, .hero) : texte blanc, accents jaunes */
.wf-charte .theme-dark,
.wf-charte .hero,
.wf-charte .cases,
.wf-charte .cta__inner {
  --color-accent: var(--wf-jaune);
}

/* Intitulés au-dessus des titres sur fond sombre : jaune (le bleu de la règle générale y serait illisible) */
.wf-charte :is(.theme-dark, .hero) .eyebrow {
  color: var(--wf-jaune);
}

/* ==========================================================================
   2. TYPOGRAPHIE
   ========================================================================== */

.wf-charte :is(h1, h2, h3, .hero__title, .wf-chapitre__titre, .cta__title) {
  font-family: var(--font-heading);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
}

.wf-charte h1,
.wf-charte h2 {
  line-height: 1.08;
}

/* Mots en <em> des titres en écriture manuscrite (Great Vibes) : plus grande que le reste du titre
   (une écriture manuscrite paraît petite à taille égale), sans agrandir l'interligne */
.wf-charte :is(h1, h2, h3) em {
  font-family: 'Great Vibes', cursive;
  font-size: 1.4em;   /* œil plus petit que Questrial : ~1,4× pour une hauteur visuelle proche */
  font-style: normal;
  font-weight: 400;
  line-height: 0;
  letter-spacing: 0;
  color: inherit;
  padding-inline: 0.04em;
}

/* Interligne nul : les jambes de l'écriture (g, p…) descendent sous le titre ; on leur garde la place */
.wf-charte :is(h1, h2, h3):has(em) {
  padding-bottom: 0.35em;
}

/* Questrial n'existe qu'en Regular : seul <strong> garde un gras (simulé par le navigateur), pour l'emphase */
.wf-charte :is(strong, b) {
  font-weight: 700;
}

/* Intitulés au-dessus des titres : police et couleur ; casse et taille (capitales espacées, très petit) : section 7,
   règle commune aux petits titres et intitulés */
.wf-charte .eyebrow {
  font-family: var(--font-main);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg2);
}

/* Chiffres en Questrial Regular (pas de faux gras) */
.wf-charte :is(.wf-hero__kpi-valeur, .wf-chapitre__kpi-valeur, .comparison__chiffre-valeur) {
  font-family: var(--font-heading);
  font-weight: 400;
}

/* ==========================================================================
   3. BOUTONS ET LIENS
   ========================================================================== */

.wf-charte .btn {
  font-family: var(--font-accent);
  font-weight: 400;
  letter-spacing: 0;
  border-radius: 999px;
}

.wf-charte .btn-primary {
  background: var(--wf-bleu);
  border-color: var(--wf-bleu);
  color: #ffffff;
}

.wf-charte .btn-primary:hover {
  background: #0b5068;
  border-color: #0b5068;
}

.wf-charte .btn-secondary {
  border-color: var(--wf-bleu);
  color: var(--wf-bleu);
}

/* Sur fond bleu canard : bouton principal jaune, texte bleu (6,6:1) */
.wf-charte :is(.theme-dark, .hero, .cases, .cta__inner) .btn-primary {
  background: var(--wf-jaune);
  border-color: var(--wf-jaune);
  color: var(--wf-bleu);
}

.wf-charte :is(.theme-dark, .hero, .cases, .cta__inner) .btn-primary:hover {
  background: #f8c560;
  border-color: #f8c560;
}

/* Pied de page (fond bleu canard) : « Nous contacter » en jaune, comme les boutons principaux sur fond sombre.
   Sélecteur en .footer .footer__cta.btn.btn-primary : sur les pages à univers, la règle des boutons du pied de page
   (« .wf-charte.wf-univers :is(… .footer .btn-primary …) ») le passait en bleu canard, sur le bleu (corrigé le 2026-11-06) */
.wf-charte .footer .footer__cta.btn.btn-primary {
  background: var(--wf-jaune);
  border-color: var(--wf-jaune);
  color: var(--wf-bleu);
}

.wf-charte .footer .footer__cta.btn.btn-primary:hover {
  background: #f8c560;
  border-color: #f8c560;
  color: var(--wf-bleu);
}

.wf-charte :is(.theme-dark, .hero, .cases, .cta__inner) .btn-secondary {
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}

/* Carte claire posée dans une zone sombre (ex. carte de réservation blanche dans le haut de page photo,
   .wf-sur-demande.theme-light) : boutons bleu canard, comme sur fond clair */
.wf-charte .theme-light .btn-primary {
  background: var(--wf-bleu);
  border-color: var(--wf-bleu);
  color: #ffffff;
}

.wf-charte .theme-light .btn-primary:hover {
  background: #0b5068;
  border-color: #0b5068;
}

.wf-charte .theme-light .btn-secondary {
  border-color: var(--wf-bleu);
  color: var(--wf-bleu);
}

.wf-charte .theme-light :focus-visible {
  outline-color: var(--wf-bleu);
}

.wf-charte :focus-visible {
  outline: 3px solid var(--wf-bleu);
  outline-offset: 3px;
}

.wf-charte :is(.theme-dark, .hero, .cases, .cta__inner) :focus-visible {
  outline-color: var(--wf-jaune);
}

/* Modules et fenêtres Amelia : cartes blanches, même posées dans un en-tête sombre (.wf-hero.theme-dark) → focus bleu
   canard, pas jaune ; champs de saisie : pas de contour ajouté, Amelia affiche son propre état actif (bordure du champ) */
.wf-charte :is(.amelia-v2-booking, .am-dialog-popup, .el-popper) :focus-visible {
  outline-color: var(--wf-bleu);
}

.wf-charte :is(.amelia-v2-booking, .am-dialog-popup, .el-popper) :is(input, textarea, select, [contenteditable="true"]):focus-visible {
  outline: none;
}

/* Pas de flèches ajoutées aux liens */
.wf-charte :is(.hero__choix-titre, .wf-besoin__titre a)::after {
  content: none;
}

/* ==========================================================================
   4. EN-TÊTE DU SITE : blanc sur la photo du hero (wf-entete-sombre), bleu canard au défilement
   ========================================================================== */

.wf-charte .site-logo {
  font-family: var(--font-heading);
  color: var(--wf-bleu);
}

/* ==========================================================================
   5. HERO ARBRE DE VIE (page-template-home.php, section #hero .wf-ah)
   Fond bleu canard uni ; arbre du logo en blanc (négatif autorisé par la charte sur fond coloré) ; pratiques en orbite
   fixes sur deux ellipses inclinées, pastilles de la couleur du parcours (rose = soin, jaune = cours) avec une
   petite icône ; mise en avant au défilement (assets/js/charte-orbite.js) ;
   H1 en petit, devise « Corps, esprit & énergies » en très grand ; trois parcours à cheval sur le bas du hero.
   ========================================================================== */

.wf-charte .wf-ah {
  position: relative;
  overflow-x: clip;
  padding: calc(80px + var(--space-xl)) 0 calc(5rem + var(--space-2xl));
  background: var(--wf-bleu);
  color: #ffffff;
}

.wf-charte .wf-ah__grille {
  display: grid;
  grid-template-areas:
    "h1"
    "haut"
    "nuage"
    "bas"
    "texte";
  row-gap: var(--space-lg);
}

/* La devise est un seul paragraphe ; ses deux moitiés se placent dans la grille autour de l'arbre */
.wf-charte .wf-ah__devise {
  display: contents;
}

@media (min-width: 1024px) {
  .wf-charte .wf-ah__grille {
    grid-template-columns: 5fr 6fr;
    grid-template-areas:
      "h1    h1"
      "haut  haut"
      "texte nuage"
      ".     bas";
    column-gap: var(--space-3xl);
    row-gap: var(--space-md);
  }
}

.wf-charte .wf-ah__h1 {
  grid-area: h1;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-main);
  font-size: var(--text-lead);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
}

.wf-charte :is(.wf-ah__devise-haut, .wf-ah__devise-bas) {
  display: block;
  color: rgba(255, 255, 255, 0.8);   /* légèrement en retrait ; le « & » jaune reste plein */
  font-family: var(--font-heading);
  font-size: clamp(3.25rem, 10vw, 9.5rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
}

.wf-charte :is(.wf-ah__devise-haut, .wf-ah__devise-bas) {
  position: relative;
  z-index: 0;   /* derrière l'arbre et les orbites */
}

.wf-charte .wf-ah__devise-haut {
  grid-area: haut;
}

.wf-charte .wf-ah__devise-bas {
  grid-area: bas;
  justify-self: end;
  text-align: right;
  white-space: nowrap;   /* « & énergies » sur une seule ligne */
}

.wf-charte .wf-ah__et {
  color: var(--wf-jaune);
  font-family: 'Great Vibes', cursive;
  font-size: 0.9em;
  line-height: 0;
  letter-spacing: 0;
  padding-right: 0.05em;
}

.wf-charte .wf-ah__texte {
  grid-area: texte;
  align-self: end;
}

.wf-charte .wf-ah__intro {
  max-width: 34ch;
  margin: 0 0 var(--space-lg);
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* Arbre et pratiques : repère 600 × 400 (comme les orbites du script) ; les pastilles sont placées en % */
.wf-charte .wf-ah__nuage {
  grid-area: nuage;
  position: relative;
  z-index: 1;   /* au-dessus de la devise « Corps, esprit & énergies » */
  justify-self: center;
  width: min(100% - 2rem, 760px);
  aspect-ratio: 3 / 2;
  margin-block: -14% -10%;   /* mobile : chevauche « Corps, esprit » et « & énergies » */
}

/* Grand écran : l'arbre couvre la hauteur de la devise (de « Corps, esprit » à « & énergies ») et passe devant ;
   les orbites débordent un peu de leur colonne (le hero coupe ce qui dépasse) */
@media (min-width: 1024px) {
  .wf-charte .wf-ah__nuage {
    grid-area: auto;
    grid-column: 2;
    grid-row: 2 / 5;
    align-self: center;
    width: 118%;
    max-width: 820px;
    margin-block: 0;
  }

  .wf-charte .wf-ah__devise-haut {
    align-self: start;
  }

  .wf-charte .wf-ah__devise-bas {
    align-self: end;
  }
}

.wf-charte .wf-ah__orbites {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.wf-charte .wf-ah__orbites ellipse {
  vector-effect: non-scaling-stroke;
}

/* Arbre en blanc, au centre, entre les pastilles de derrière (z 1) et celles de devant (z 3) */
.wf-charte .wf-ah__centre {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 52%;
  translate: -50% -55%;
}

.wf-charte .wf-ah__arbre {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.wf-charte .wf-ah__arbre path {
  fill: #ffffff;
}

/* Arbre en retrait : il structure la composition sans voler la vedette à la devise ni aux pratiques */
.wf-charte .wf-ah__arbre {
  opacity: 0.35;
}

.wf-charte .wf-ah__pratiques {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wf-charte .wf-ah__pratique {
  position: absolute;
  z-index: 1;
  translate: -50% -50%;
  transform-origin: center;
}

/* Profondeur figée : derrière l'arbre (haut des ellipses), plus petite et plus pâle */
.wf-charte .wf-ah__pratique:not(.est-devant) {
  opacity: 0.6;
  scale: 0.86;
}

/* Pratique mise en avant au défilement (assets/js/charte-orbite.js), au survol ou au focus : grande, pleine, au premier plan */
.wf-charte .wf-ah__pratique {
  transition: scale 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.5s ease;
}

.wf-charte .wf-ah__pratique.est-active {
  z-index: 4;
  opacity: 1;
  scale: 1.4;
}

.wf-charte .wf-ah__pratique.est-active a {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);   /* garde sa couleur ; se détache par l'ombre */
}

@media (prefers-reduced-motion: reduce) {
  .wf-charte .wf-ah__pratique {
    transition: none;
  }
}

/* Mobile (2026-11-09) : les pastilles de l'arrière (Yoga, Pilates par défaut) étaient cachées par celles de devant
   (Sophrologie, Massages), trop proches sur un écran étroit : remontées d’environ une hauteur de pastille (1,5em). */
@media (max-width: 767px) {
  .wf-charte .wf-ah__pratique:not(.est-devant) {
    translate: -50% calc(-50% - 1.5em);
  }
}

.wf-charte .wf-ah__pratique.est-devant,
.wf-charte .wf-ah__pratique:focus-within {
  z-index: 3;
}

.wf-charte .wf-ah__pratique a {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.45em 1em 0.45em 0.8em;
  border-radius: 999px;
  background: var(--wf-rose);       /* soin */
  color: var(--wf-bleu);            /* 7,0:1 sur rose, 6,6:1 sur jaune */
  font-size: var(--text-sm);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.wf-charte .wf-ah__pratique--cours a {
  background: var(--wf-jaune);      /* cours */
}

/* Survol : ni changement de couleur ni soulignement ; la pastille passe en avant (assets/js/charte-orbite.js) */
.wf-charte .wf-ah__pratique a:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

.wf-charte .wf-ah__icone {
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
}

/* Les trois parcours, à cheval sur le bas du hero (moitié sur le bleu, moitié sur la section suivante) */
.wf-charte .wf-ah__parcours {
  position: relative;
  z-index: 3;
  margin-top: -5rem;
}

.wf-charte .wf-ah__parcours ul {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .wf-charte .wf-ah__parcours ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

.wf-charte .wf-ah__porte a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: var(--space-lg) var(--space-xl);
  border-radius: 24px;
  background: var(--wf-rose);
  color: var(--wf-bleu);
  text-decoration: none;
  box-shadow: 0 18px 40px rgba(0, 59, 77, 0.18);
  transition: transform 0.25s ease;
}

.wf-charte .wf-ah__porte--cours a { background: var(--wf-jaune); }
.wf-charte .wf-ah__porte--cabinet a { background: var(--wf-sauge); }

.wf-charte .wf-ah__porte a:hover,
.wf-charte .wf-ah__porte a:focus-visible {
  transform: translateY(-4px);
}

/* Flèche dans une pastille bleu canard, en haut à droite : ↗ au repos, → au survol / au focus (lien vers la page « Trouver mon … ») */
.wf-charte .wf-ah__porte-fleche {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--wf-bleu);
  color: #ffffff;
}

.wf-charte .wf-ah__porte-fleche svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wf-charte .wf-ah__porte a:hover .wf-ah__porte-fleche svg,
.wf-charte .wf-ah__porte a:focus-visible .wf-ah__porte-fleche svg {
  transform: rotate(45deg);
}

.wf-charte .wf-ah__porte-titre {
  padding-right: 3.5rem;   /* place de la flèche */
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: 1.15;
}

.wf-charte .wf-ah__porte-texte {
  font-size: var(--text-sm);
}

.wf-charte .wf-ah__porte-chiffre {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(0, 59, 77, 0.2);
  font-size: var(--text-sm);
}

@media (prefers-reduced-motion: reduce) {
  .wf-charte .wf-ah__porte a,
  .wf-charte .wf-ah__porte-fleche svg {
    transition: none;
  }

  .wf-charte .wf-ah__porte a:hover,
  .wf-charte .wf-ah__porte a:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   6. CHAPITRES : la couleur remplace les numéros (les trois publics ne sont pas une suite)
   ========================================================================== */

.wf-charte :is(.wf-chapitre__rail, .wf-chapitre__numero) {
  display: none;
}

/* Soins : étapes numérotées avec filets à gauche ; à droite, cartes blanches (photo en retrait) sur un aplat rose */
.wf-charte .wf-insecable {
  white-space: nowrap;   /* « bien-être » jamais coupé en fin de ligne */
}

/* Étapes : vraie suite, numéros « 01 » à « 04 » en colonne, filet fin entre chaque étape */
.wf-charte .wf-chapitre__etapes {
  gap: 0;
  margin: var(--space-xl) 0;
}

.wf-charte .wf-chapitre__etapes li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: var(--space-md);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border);
}

.wf-charte .wf-chapitre__etapes li:last-child {
  border-bottom: 1px solid var(--color-border);
}

.wf-charte .wf-chapitre__etapes li::before {
  content: counter(etape, decimal-leading-zero);
  position: static;
  grid-row: 1 / 3;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  color: var(--wf-bleu);
  font-size: var(--text-h3);
  line-height: 1.1;
}

.wf-charte .wf-chapitre__etapes strong {
  color: var(--wf-bleu);
}

.wf-charte .wf-chapitre__etapes span {
  color: var(--fg2);
}

/* Aplat rose, cartes blanches */
.wf-charte .wf-chapitre--soins .wf-chapitre__flux {
  padding: var(--space-md);
  border-radius: 28px;
  background: var(--wf-rose);
}

@media (min-width: 1024px) {
  .wf-charte .wf-chapitre--soins .wf-chapitre__flux {
    padding: var(--space-lg);
  }
}

.wf-charte .wf-besoins {
  gap: var(--space-md);
}

.wf-charte .wf-besoin {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 10px var(--space-lg);
  border-radius: 18px;
  background: #ffffff;
}

.wf-charte .wf-besoin__image,
.wf-charte .wf-besoin__image img {
  border-radius: 12px;
}

.wf-charte .wf-besoin__image img {
  aspect-ratio: 16 / 10;
}

.wf-charte .wf-besoin__titre {
  margin: var(--space-md) var(--space-sm) var(--space-xs);
  color: var(--wf-bleu);
  font-size: var(--text-h4);
}

/* Toute la carte mène au besoin (lien du titre étiré) */
.wf-charte .wf-besoin__titre a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
}

.wf-charte .wf-besoin__desc {
  margin: 0 var(--space-sm);
  color: var(--fg2);
}

.wf-charte .wf-besoin:hover .wf-besoin__titre a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Autres besoins : intitulé discret, pastilles blanches sur le rose */
.wf-charte .wf-pastilles {
  margin-top: var(--space-lg);
}

.wf-charte .wf-pastilles__titre {
  flex-basis: 100%;
  margin: 0 0 var(--space-xs);
  color: var(--wf-bleu);
  font-size: var(--text-sm);
}

.wf-charte .wf-pastille {
  border-color: transparent;
  background: #ffffff;
  color: var(--wf-bleu);
}

.wf-charte .wf-pastille:hover {
  border-color: var(--wf-rose-fonce);
  background: #ffffff;
}

/* Cours : fond bleu canard, accents jaune soleil */
.wf-charte .wf-chapitre--cours .eyebrow,
.wf-charte .wf-chapitre--cours .wf-chapitre__kpi-valeur {
  color: var(--wf-jaune);
}

.wf-charte .wf-chapitre--cours .wf-chapitre__kpis li + li {
  border-left-color: rgba(245, 179, 53, 0.35);
}

/* Cours : cartes photo du défilement, construites avec les mêmes règles que le reste de la page
   (arrondi 18px comme les cartes soin, voile bleu canard, étiquette jaune = cours comme les pastilles du hero,
   pastille flèche ↗ comme les cartes de parcours, qui pivote vers → au survol / au focus) */
.wf-charte .wf-chapitre--cours .cases__card {
  border-radius: 18px;
}

.wf-charte .wf-chapitre--cours .cases__card-overlay {
  background: linear-gradient(to top, rgba(0, 59, 77, 0.9) 0%, rgba(0, 59, 77, 0.35) 45%, rgba(0, 59, 77, 0) 70%);
}

.wf-charte .wf-chapitre--cours .cases__card-tag {
  padding: 0.3em 0.85em;
  border-radius: 999px;
  background: var(--wf-jaune);
  color: var(--wf-bleu);       /* 6,6:1 */
  font-size: var(--text-xs);
  font-weight: 400;
}

.wf-charte .wf-chapitre--cours .cases__card-title {
  color: #ffffff;
  font-weight: 400;
}

/* Pastille flèche (disque jaune, flèche bleue) en haut à droite ; le disque pivote, la flèche passe de ↗ à → */
.wf-charte .wf-chapitre--cours .cases__card::after {
  content: "";
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--wf-jaune) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003b4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / 1.25rem no-repeat;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wf-charte .wf-chapitre--cours .cases__card:hover::after,
.wf-charte .wf-chapitre--cours .cases__card:focus-visible::after {
  transform: rotate(45deg);
}

.wf-charte .wf-chapitre--cours .cases__card:focus-visible {
  outline: 3px solid var(--wf-jaune);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .wf-charte .wf-chapitre--cours .cases__card::after {
    transition: none;
  }
}

/* Praticiens : panneau vert sauge (au lieu du noir) */
.wf-charte .comparison--panneau {
  background: var(--wf-sauge);
  --color-text: var(--wf-bleu);
  --color-text-muted: #2f5a68;  /* 4,8:1 sur sauge */
  --color-text-subtle: #2f5a68;
  --color-accent: var(--wf-bleu);
  --color-border: rgba(0, 59, 77, 0.2);
  --color-surface-muted: rgba(255, 255, 255, 0.35);
  color: var(--wf-bleu);
}

.wf-charte .comparison--panneau .eyebrow {
  color: var(--wf-bleu);
}

/* Dans le panneau sauge, les boutons repassent en bleu (le jaune est la couleur des cours) */
.wf-charte .comparison--panneau .btn-primary {
  background: var(--wf-bleu);
  border-color: var(--wf-bleu);
  color: #ffffff;
}

.wf-charte .comparison--panneau .btn-secondary {
  border-color: var(--wf-bleu);
  color: var(--wf-bleu);
}

/* « Ils exercent chez nous » : à la taille d'un titre de section (reste un h3 dans la section), « nous » en manuscrite */
.wf-charte .comparison--panneau .wf-temoignages__titre {
  font-size: var(--text-h2);
  line-height: 1.08;
}

/* ==========================================================================
   7. PRATICIENS : panneau vert sauge réorganisé (mélange de la disposition existante et de la maquette)
   En-tête à gauche + trois cartes de prix à droite (« Charges comprises » en bleu canard) ; comparatif en une
   seule colonne (critère | valeur WellFuz + ailleurs en petit) ; chiffres clés en cartes claires ; boutons ;
   témoignages avec photos à part, sous un filet (boutons non répétés après).
   ========================================================================== */

/* En-tête */
.wf-charte .comparison--panneau .comparison__badge {
  margin-bottom: var(--space-md);
  padding: 0;
  border: 0;
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.wf-charte .comparison--panneau .comparison__title {
  margin-bottom: var(--space-md);
  font-weight: 400;
}

.wf-charte .comparison--panneau .comparison__sous-titre {
  margin-bottom: var(--space-sm);
  font-size: var(--text-lead);
}

/* Cartes de prix : blanches, la dernière (charges comprises) en bleu canard */
.wf-charte .comparison--panneau .comparison__chiffres:not(.comparison__chiffres--preuves) .comparison__chiffre {
  justify-content: space-between;
  padding: var(--space-lg);
  border: 0;
  border-radius: 18px;
  background: #ffffff;
  text-align: left;
}

.wf-charte .comparison--panneau .comparison__chiffres:not(.comparison__chiffres--preuves) .comparison__chiffre:last-child {
  background: var(--wf-bleu);
  --color-text: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.85);
}

.wf-charte .comparison--panneau .comparison__chiffre-valeur {
  font-weight: 400;
  white-space: normal;
}

/* Comparatif : une seule colonne, une ligne par critère */
.wf-charte .comparison--panneau .comparison__liste {
  margin: var(--space-xl) 0 0;
}

@media (min-width: 768px) {
  .wf-charte .comparison--panneau .comparison__ligne {
    display: grid;
    grid-template-columns: minmax(10rem, 3fr) 9fr;
    column-gap: var(--space-xl);
    align-items: baseline;
  }

  .wf-charte .comparison--panneau .comparison__critere {
    grid-row: 1 / 3;
  }

  .wf-charte .comparison--panneau .comparison__nous,
  .wf-charte .comparison--panneau .comparison__ailleurs {
    grid-column: 2;
  }
}

.wf-charte .comparison--panneau .comparison__critere {
  color: var(--wf-bleu);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.wf-charte .comparison--panneau .comparison__nous {
  font-weight: 400;
}

/* Chiffres clés : cartes claires, alignées à gauche */
.wf-charte .comparison--panneau .comparison__preuves {
  text-align: left;
}

.wf-charte .comparison--panneau .comparison__chiffres--preuves .comparison__chiffre {
  padding: var(--space-lg);
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
  text-align: left;
}

/* Boutons alignés à gauche, une seule fois (pas répétés après les témoignages) */
.wf-charte .comparison--panneau .section__ctas {
  justify-content: flex-start;
}

.wf-charte .comparison--panneau .comparison__ctas-fin {
  display: none;
}

/* Témoignages avec photos : à part, sous un filet */
.wf-charte .comparison--panneau .wf-temoignages {
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid rgba(0, 59, 77, 0.2);
}

/* Grand écran : en-tête | prix, puis pleine largeur pour le reste */
@media (min-width: 1024px) {
  .wf-charte .comparison--panneau > .container {
    grid-template-columns: 5fr 7fr;
    grid-template-areas:
      "entete      chiffres"
      "tableau     tableau"
      "preuves     preuves"
      "ctas        ctas"
      "temoignages temoignages";
    align-items: end;
  }

  .wf-charte .comparison--panneau .comparison__header {
    margin-bottom: 0;
  }

  .wf-charte .comparison--panneau .comparison__chiffres:not(.comparison__chiffres--preuves) {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 0;
  }

  .wf-charte .comparison--panneau .comparison__liste {
    margin-top: var(--space-2xl);
  }

  .wf-charte .comparison--panneau .section__ctas:not(.comparison__ctas-fin) {
    flex-direction: row;
    align-items: center;
    margin-top: var(--space-2xl);
  }
}

/* Icônes des cartes de prix et des chiffres clés : pastille ronde comme les flèches des cartes de parcours
   (bleu canard, icône blanche ; jaune, icône bleue sur la carte bleue « Charges comprises ») — tracés Lucide */
/* En haut à droite, par-dessus : la hauteur des cartes ne change pas ; la valeur garde une marge à droite
   pour ne jamais passer sous l'icône */
.wf-charte .comparison--panneau .comparison__chiffres:not(.comparison__chiffres--preuves) .comparison__chiffre,
.wf-charte .comparison--panneau .comparison__chiffres--preuves .comparison__chiffre {
  position: relative;
}

.wf-charte .comparison--panneau .comparison__chiffres:not(.comparison__chiffres--preuves) .comparison__chiffre::before,
.wf-charte .comparison--panneau .comparison__chiffres--preuves .comparison__chiffre::before {
  content: "";
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--wf-bleu) center / 1.25rem no-repeat;
}

.wf-charte .comparison--panneau .comparison__chiffres:not(.comparison__chiffres--preuves) .comparison__chiffre .comparison__chiffre-valeur,
.wf-charte .comparison--panneau .comparison__chiffres--preuves .comparison__chiffre .comparison__chiffre-valeur {
  padding-right: 3.25rem;
}

/* Cartes de prix : l'icône n'est pas par-dessus mais au-dessus du prix, dans le flux, à droite */
.wf-charte .comparison--panneau .comparison__chiffres:not(.comparison__chiffres--preuves) .comparison__chiffre::before {
  position: static;
  align-self: flex-end;
  margin-bottom: var(--space-sm);
}

.wf-charte .comparison--panneau .comparison__chiffres:not(.comparison__chiffres--preuves) .comparison__chiffre .comparison__chiffre-valeur {
  padding-right: 0;
}

.wf-charte .comparison--panneau .comparison__chiffres:not(.comparison__chiffres--preuves) .comparison__chiffre:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23ffffff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%2710%27/%3E%3Cpolyline points=%2712 6 12 12 16 14%27/%3E%3C/svg%3E"); }
.wf-charte .comparison--panneau .comparison__chiffres:not(.comparison__chiffres--preuves) .comparison__chiffre:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23ffffff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273%27 y=%274%27 width=%2718%27 height=%2718%27 rx=%272%27/%3E%3Cpath d=%27M16 2v4M8 2v4M3 10h18%27/%3E%3C/svg%3E"); }
.wf-charte .comparison--panneau .comparison__chiffres:not(.comparison__chiffres--preuves) .comparison__chiffre:last-child::before { background-color: var(--wf-jaune); background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23003b4d%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6 9 17l-5-5%27/%3E%3C/svg%3E"); }
.wf-charte .comparison--panneau .comparison__chiffres--preuves .comparison__chiffre:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23ffffff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z%27/%3E%3C/svg%3E"); }
.wf-charte .comparison--panneau .comparison__chiffres--preuves .comparison__chiffre:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23ffffff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%272%27 y=%274%27 width=%2720%27 height=%2716%27 rx=%272%27/%3E%3Cpath d=%27m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7%27/%3E%3C/svg%3E"); }
.wf-charte .comparison--panneau .comparison__chiffres--preuves .comparison__chiffre:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23ffffff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 22h14M5 2h14M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2%27/%3E%3C/svg%3E"); }

/* Chiffres des cartes de prix et des chiffres clés : beaucoup plus gros et gras (maquette), en Questrial.
   Questrial n'existe qu'en Regular : gras synthétisé par le navigateur (acceptable en grande taille) ;
   à remplacer par la vraie graisse quand la police définitive (sous licence) sera choisie. */
.wf-charte .comparison--panneau .comparison__chiffre-valeur {
  font-weight: 700;
  font-synthesis: weight;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Prix (« dès 20 € / h ») : taille d'après la largeur de la carte, plus grande qu'avant */
.wf-charte .comparison--panneau .comparison__chiffres:not(.comparison__chiffres--preuves) .comparison__chiffre-valeur {
  font-size: clamp(1.75rem, 12cqi, 2.75rem);
}

/* Chiffres clés (« +3 000 », « 18 mois ») */
.wf-charte .comparison--panneau .comparison__chiffres--preuves .comparison__chiffre-valeur {
  font-size: clamp(2.5rem, 5.5vw, 4rem);
}

.wf-charte .comparison--panneau .comparison__chiffre-libelle {
  margin-top: var(--space-xs);
}

/* Cartes de prix : intitulé (« À l'heure », « Au mois », « Tout inclus ») à gauche et icône à droite sur la même
   ligne, puis le prix en grand et son libellé ; en minuscules, comme les autres intitulés de l'accueil */
.wf-charte .comparison--panneau .comparison__chiffres:not(.comparison__chiffres--preuves) .comparison__chiffre {
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: start;
  column-gap: var(--space-sm);
}

.wf-charte .comparison--panneau .comparison__chiffres:not(.comparison__chiffres--preuves) .comparison__chiffre::before {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin-bottom: 0;
}

.wf-charte .comparison--panneau .comparison__chiffres:not(.comparison__chiffres--preuves) .comparison__chiffre .comparison__chiffre-surtitre {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.wf-charte .comparison--panneau .comparison__chiffres:not(.comparison__chiffres--preuves) .comparison__chiffre .comparison__chiffre-valeur,
.wf-charte .comparison--panneau .comparison__chiffres:not(.comparison__chiffres--preuves) .comparison__chiffre .comparison__chiffre-libelle {
  grid-column: 1 / -1;
}

.wf-charte .comparison--panneau .comparison__chiffres:not(.comparison__chiffres--preuves) .comparison__chiffre .comparison__chiffre-valeur {
  margin-top: var(--space-md);
}

/* Intitulés et petits titres en majuscules espacées (demandé le 2026-10-15) : intitulés de section, « Espace
   praticiens », critères du comparatif, intitulés des cartes de prix, « Autres besoins ». Pas de gras synthétique
   à cette taille : c'est l'espacement qui les distingue. Le H1 du hero n'est pas concerné. */
.wf-charte .eyebrow,
.wf-charte .comparison--panneau .comparison__badge,
.wf-charte .comparison--panneau .comparison__critere,
.wf-charte .comparison--panneau .comparison__chiffre-surtitre,
.wf-charte .wf-pastilles__titre {
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Comparatif : réponses WellFuz (« À l'heure, en carte ou au mois »…) en gras (synthétique : Questrial Regular seul) */
.wf-charte .comparison--panneau .comparison__nous {
  font-weight: 700;
  font-synthesis: weight;
}

/* ==========================================================================
   8. QUI SOMMES-NOUS (sections/about.php) : grande photo à gauche, coins arrondis ; texte dans une carte blanche à droite,
   plus petite, qui déborde sur la photo et descend un peu plus bas ; année dans un rectangle jaune aux coins arrondis,
   sur le coin bas gauche de la photo.
   ========================================================================== */

.wf-charte .about {
  overflow-x: clip;
  background: var(--bg);   /* fond blanc (la carte blanche se détache par son ombre) */
}

.wf-charte .about__grid {
  gap: 0;
}

/* Photo : coins arrondis, format paysage léger */
.wf-charte .about__image {
  position: relative;
}

.wf-charte .about__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 30%;   /* portrait serré (photo d'Isabelle) : cadré sur le visage */
  border-radius: 28px;
  box-shadow: none;
}

/* Année : rectangle jaune aux coins arrondis, posé sur le coin bas gauche de la photo */
.wf-charte .about__annee {
  position: absolute;
  left: -1.5rem;
  bottom: -2rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  border-radius: 18px;
  background: var(--wf-jaune);
  color: var(--wf-bleu);
  box-shadow: 0 14px 30px rgba(0, 59, 77, 0.18);
}

.wf-charte .about__annee-valeur {
  font-size: clamp(2.25rem, 4vw, 2.75rem);
  font-weight: 700;
  font-synthesis: weight;
  letter-spacing: -0.03em;
  line-height: 1;
}

.wf-charte .about__annee-libelle {
  margin-top: 4px;
  font-size: var(--text-xs);
  line-height: 1.25;
}

/* Texte dans une carte blanche encadrée, au premier plan */
.wf-charte .about__content {
  position: relative;
  z-index: 3;
  margin-top: -44px;   /* mobile : remonte sur le bas de la photo (-64px coupait le visage d’Isabelle) */
  padding: var(--space-xl);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 24px 50px rgba(0, 59, 77, 0.12);
}

.wf-charte .about__text:last-of-type {
  margin-bottom: var(--space-lg);
}

/* Grand écran : grande photo à gauche, carte de texte à droite qui déborde de 80px sur la photo (au-dessus)
   et descend plus bas qu'elle */
@media (min-width: 1024px) {
  .wf-charte .about__grid {
    align-items: flex-start;
  }

  .wf-charte .about__image {
    order: 1;
    width: 62%;
    margin: 0;
  }

  .wf-charte .about__content {
    order: 2;
    width: calc(38% + 80px);
    margin: var(--space-3xl) 0 calc(-1 * var(--space-2xl)) -80px;
    padding: var(--space-2xl);
  }
}

/* Mobile et tablette : la carte remonte sur le bas de la photo ; la feuille de l'année passe en haut à droite */
@media (max-width: 1023px) {
  .wf-charte .about__annee {
    top: -1.5rem;
    right: -0.5rem;
    bottom: auto;
    left: auto;
  }

  .wf-charte .about__annee-valeur {
    font-size: 1.9rem;
  }
}


/* ==========================================================================
   9. « VENEZ DÉCOUVRIR LE CENTRE » (sections/cta.php, pied de page) : carte rose poudré, sans photo ;
   titre et texte centrés, les deux boutons côte à côte en dessous ; texte et boutons bleu canard ;
   la carte est pile entre le grège de la FAQ et le bleu du pied de page (même geste que les parcours du hero).
   ========================================================================== */

.wf-charte .cta {
  /* Pile entre deux fonds : moitié haute grège (comme la FAQ au-dessus), moitié basse bleu canard (comme le pied
     de page) ; marges haute et basse égales, donc la ligne de partage passe au milieu de la carte */
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  background: linear-gradient(to bottom, var(--bg-muted) 0, var(--bg-muted) 50%, var(--wf-bleu) 50%, var(--wf-bleu) 100%);
}

.wf-charte .cta__inner--image {
  --color-text: var(--wf-bleu);
  --color-text-muted: var(--wf-bleu);   /* sur rose : bleu plein (le bleu atténué descend sous 4,5:1) */
  --color-border: rgba(0, 59, 77, 0.25);
  display: grid;
  gap: var(--space-md);
  max-width: 1120px;
  padding: var(--space-3xl) var(--space-xl);
  border-radius: 28px;
  background: var(--wf-rose);
  color: var(--wf-bleu);
  box-shadow: 0 24px 50px rgba(0, 59, 77, 0.15);
  isolation: auto;
  justify-items: center;
  text-align: center;
}

/* Sans photo (ni voile) */
.wf-charte .cta__inner--image :is(.cta__bg, .cta__overlay) {
  display: none;
}

.wf-charte .cta__inner--image .cta__title,
.wf-charte .cta__inner--image .cta__text {
  margin: 0;
  color: var(--wf-bleu);
}

.wf-charte .cta__inner--image .cta__text {
  max-width: 52ch;
}

.wf-charte .cta__inner--image .cta__buttons {
  justify-content: center;
  margin-top: var(--space-sm);
}

/* Boutons bleu canard sur le rose */
.wf-charte .cta__inner--image .btn-primary {
  background: var(--wf-bleu);
  border-color: var(--wf-bleu);
  color: #ffffff;
}

.wf-charte .cta__inner--image .btn-secondary {
  border-color: var(--wf-bleu);
  color: var(--wf-bleu);
}

/* Survol identique aux autres boutons bleus (sans quoi la règle des fonds sombres le passe en jaune) */
.wf-charte :is(.cta__inner--image, .comparison--panneau) .btn-primary:hover {
  background: #0b5068;
  border-color: #0b5068;
}

/* Trait blanc qui traverse le bas de la carte : une vague nouée par les 3 feuilles du logo
   (assets/img/trait-feuilles.svg), derrière le texte, coupé par les coins arrondis de la carte */
.wf-charte .cta__inner--image {
  position: relative;
  isolation: isolate;
}

.wf-charte .cta__inner--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: url("../img/trait-feuilles.svg") right bottom / 100% auto no-repeat;
  pointer-events: none;
}

/* Trait dessiné en direct (assets/js/charte-trait.js) : le même SVG inséré dans la carte remplace l'image de fond ;
   il se trace à chaque arrivée de la carte à l'écran */
.wf-charte .cta__inner--trait-anime::after {
  background: none;
}

.wf-charte .cta__trait {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.wf-charte .cta__trait svg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
}

.wf-charte .cta__trait path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;   /* sans transition ici : le trait s'efface d'un coup quand la carte sort de l'écran */
}

.wf-charte .cta__trait.est-dessine path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.8s cubic-bezier(0.45, 0, 0.25, 1);
}

@media (prefers-reduced-motion: reduce) {
  .wf-charte .cta__trait.est-dessine path {
    transition: none;
  }
}

/* Mobile : trait agrandi (180 %) et recadré sur sa partie droite (le nœud de feuilles), sous les boutons */
@media (max-width: 767px) {
  .wf-charte .cta__inner--image {
    padding-bottom: calc(var(--space-xl) + 64px); /* place du nœud de feuilles du trait, sous les boutons */
  }

  .wf-charte .cta__inner--image::after {
    background-size: 180% auto;
    background-position: 88% bottom;
  }

  /* même recadrage pour le trait dessiné : 88 % de l'écart entre la carte et le trait, comme l'image de fond */
  .wf-charte .cta__trait svg {
    right: auto;
    left: calc((100% - 180%) * 0.88);
    width: 180%; /* 260 % : le nœud de feuilles remontait derrière les boutons */
    max-width: none; /* sinon le max-width: 100% général des svg garde la largeur de la carte : trait décalé hors champ */
  }
}

/* Grand écran : un peu plus d'air dans la carte */
@media (min-width: 1024px) {
  .wf-charte .cta__inner--image {
    padding: calc(var(--space-3xl) * 1.5) var(--space-3xl);
  }
}

.wf-charte .cta__inner--image :focus-visible {
  outline-color: var(--wf-bleu);
}

/* ==========================================================================
   10. FAQ (sections/faq.php) : deux colonnes sur grand écran — à gauche l'intitulé, le titre et les boutons
   ; à droite les questions. Mobile : empilé, comme avant.
   ========================================================================== */

@media (min-width: 1024px) {
  .wf-charte .faq > .container {
    display: grid;
    grid-template-columns: 5fr 7fr;
    grid-template-rows: auto 1fr;
    column-gap: var(--space-3xl);
    align-items: start;
  }

  .wf-charte .faq__header {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    margin: 0 0 var(--space-xl);
    text-align: left;
  }

  .wf-charte .faq .section__ctas {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 0;
  }

  .wf-charte .faq .section__ctas .btn {
    width: auto;
  }

  .wf-charte .faq__list {
    grid-column: 2;
    grid-row: 1 / 3;
    max-width: none;
    margin: 0;
  }
}

/* FAQ sur fond grège : chaque question dans une carte blanche ; question en gras ; flèche dans une pastille ronde
   (grège, jaune quand la question est ouverte) ; pas de fond sombre au survol */
.wf-charte .faq {
  background: var(--bg-muted);
}

.wf-charte .faq__list {
  gap: var(--space-sm);
}

.wf-charte .faq__item {
  border: 0;
  border-radius: 18px;
  background: #ffffff;
}

.wf-charte .faq__question {
  padding: var(--space-lg) var(--space-lg);
  color: var(--wf-bleu);
  font-weight: 700;
  font-synthesis: weight;
}

.wf-charte .faq__question:hover {
  background: transparent;
  color: var(--wf-bleu);
}

.wf-charte .faq__icon,
.wf-charte .faq__question:hover .faq__icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.55rem;
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--wf-bleu);
}

.wf-charte .faq__question:hover .faq__icon {
  background: var(--wf-grege);
}

.wf-charte .faq__item[open] .faq__icon {
  background: var(--wf-jaune);
}

.wf-charte .faq__answer {
  padding: 0 calc(var(--space-lg) + 3rem) var(--space-lg) var(--space-lg);
}

.wf-charte .faq__answer p {
  color: var(--fg2);
}

/* Liens dans les réponses (rendez-vous d'orientation, tarifs…) : repérables dans le texte */
.wf-charte .faq__answer a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ==========================================================================
   11. VAGUES (séparateurs de fond) : double houle marquée (48 à 96px), la vague arrière à 50 %, la vague avant pleine,
   qui se balancent lentement en sens contraire (houle) ;
   la couleur de la section précédente « coule » sur le haut de la suivante (et l'inverse en bas, sens retourné).
   Placées à l'entrée et à la sortie de la section Cours (blanc ↔ bleu canard) et au passage de « Qui sommes-nous »
   (blanc) à la FAQ (grège), en haut de « Nos engagements » (À propos, blanc → grège) et en bas de l'en-tête du planning des cours et des fiches praticien / coach (grège → blanc), en haut de « Ses collègues » des fiches (blanc → grège). Pas de vague là où un élément est déjà à cheval sur la limite (bas du hero, panneau
   praticiens, appel à l'action du pied de page).
   ========================================================================== */

.wf-charte .wf-chapitre--cours,
.wf-charte .faq,
.wf-charte .about-guarantees--empile,
.wf-charte .wf-collegues {
  position: relative;
}

.wf-charte .wf-chapitre--cours::before,
.wf-charte .wf-chapitre--cours::after,
.wf-charte .faq::before,
.wf-charte .about-guarantees--empile::before,
.wf-charte .wf-bandeau-infos::after,
.wf-charte .wf-hero--portrait::after,
.wf-charte .wf-collegues::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: clamp(48px, 6vw, 96px);
  background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1440 120%27 preserveAspectRatio=%27none%27%3E%3Cpath fill=%27%23ffffff%27 d=%27M0 0H1440V44C1210 104 960 0 720 54C480 108 240 12 0 64Z%27/%3E%3C/svg%3E") 50% 100% / 125% calc(100% + 1px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1440 120%27 preserveAspectRatio=%27none%27%3E%3Cpath fill=%27%23ffffff%27 fill-opacity=%270.5%27 d=%27M0 0H1440V78C1190 22 920 120 650 84C410 52 210 116 0 92Z%27/%3E%3C/svg%3E") 50% 100% / 125% calc(100% + 1px) no-repeat;
  pointer-events: none;
}

/* Houle : les deux vagues (dessin d'origine, élargi de 25 %) se balancent en sens contraire, aller-retour ; la vague
   de derrière monte et descend en plus (sa hauteur varie, calée en bas : son bord ondule de haut en bas), sur un
   autre rythme. Immobiles si l'appareil demande moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
  .wf-charte .wf-chapitre--cours::before,
  .wf-charte .wf-chapitre--cours::after,
  .wf-charte .faq::before,
  .wf-charte .about-guarantees--empile::before,
  .wf-charte .wf-bandeau-infos::after,
  .wf-charte .wf-hero--portrait::after,
  .wf-charte .wf-collegues::before {
    animation:
      wf-houle 9s ease-in-out infinite alternate,
      wf-houle-hauteur 5.5s ease-in-out infinite alternate;
  }
}

@keyframes wf-houle {
  from { background-position: 0% 100%, 100% 100%; }
  to { background-position: 100% 100%, 0% 100%; }
}

@keyframes wf-houle-hauteur {
  from { background-size: 125% calc(100% + 1px), 125% calc(100% + 1px); }
  to { background-size: 125% calc(100% + 1px), 125% 135%; }
}

/* Entrée de Cours : le blanc de Soins ondule sur le haut du bleu */
.wf-charte .wf-chapitre--cours::before {
  top: 0;
}

/* Sortie de Cours : le blanc de la section praticiens ondule sur le bas du bleu (sens retourné) */
.wf-charte .wf-chapitre--cours::after {
  bottom: 0;
  transform: scale(-1, -1);
}

/* Espace des sections à vague : l'espace normal de section + la hauteur de la vague (sinon le contenu la frôle) */
.wf-charte .wf-chapitre--cours {
  padding-top: calc(var(--space-section) + clamp(48px, 6vw, 96px));
  padding-bottom: calc(var(--space-section) / 2 + clamp(48px, 6vw, 96px));   /* + l'espace propre du défilement */
}

.wf-charte .faq {
  padding-top: calc(var(--space-section) + clamp(48px, 6vw, 96px));
}

/* Planning des cours : le blanc des plannings ondule sur le bas du bandeau grège de l'en-tête (sens retourné) */
.wf-charte .wf-bandeau-infos {
  position: relative;
  padding-bottom: calc(var(--space-section) + clamp(48px, 6vw, 96px));
}

.wf-charte .wf-bandeau-infos::after {
  bottom: 0;
  transform: scale(-1, -1);
}

/* Fiches praticien / coach : le blanc du contenu ondule sur le bas de l'en-tête grège (sens retourné) */
.wf-charte .wf-hero--portrait {
  position: relative;   /* repère de la vague (sinon calée sur l'écran) */
  padding-bottom: calc(var(--space-section) + clamp(48px, 6vw, 96px));
}

.wf-charte .wf-hero--portrait::after {
  bottom: 0;
  transform: scale(-1, -1);
}

/* Fiches praticien / coach, « Ses collègues » : le blanc ondule sur le haut du grège, qui continue dans la bande de
   l'appel à l'action du pied de page (« Venez découvrir le centre ») */
.wf-charte .wf-collegues {
  padding-top: calc(var(--space-section) + clamp(48px, 6vw, 96px));
  background: var(--bg-muted);
}

.wf-charte .wf-collegues::before {
  top: 0;
}

/* Cartes blanches sur le grège */
.wf-charte .wf-collegues .wf-carte {
  background: var(--bg);
}

/* FAQ : le blanc de « Qui sommes-nous » ondule sur le haut du grège (même vague que celles de Cours) */
.wf-charte .faq::before {
  top: 0;
}

/* À propos, « Nos engagements » : le blanc de « WellFuz en chiffres » ondule sur le haut du grège */
.wf-charte .about-guarantees--empile::before {
  top: 0;
}

.wf-charte .about-guarantees--empile {
  padding-top: calc(var(--space-section) + clamp(48px, 6vw, 96px));
}

/* ==========================================================================
   12. BRINS DE FEUILLES (formes fournies par la cliente, utilisées en masque : une couleur par section) :
   assets/img/feuilles-3.svg (3 feuilles) et feuilles-7.svg (7 feuilles, arc de l'arbre). Posés en superposition
   sur l'angle de cinq blocs (panneau praticiens, carte de texte de « Qui sommes-nous », carte rose du pied de page,
   encadré des tarifs des fiches soin, encart « Formules » des fiches cours), décalés, à moitié hors du cadre. Décoratifs (pseudo-éléments : ignorés des lecteurs
   d'écran, sans effet sur la mise en page ni sur les clics).
   ========================================================================== */

.wf-charte .comparison--panneau::after,
.wf-charte .about__content::after,
.wf-charte .cta__inner--image::before,
.wf-charte .wf-tarifs::after,
.wf-charte .wf-formules-cours::after {
  content: "";
  position: absolute;
  z-index: 4;
  background: var(--wf-jaune);
  -webkit-mask: url("../img/feuilles-3.svg") center / contain no-repeat;
  mask: url("../img/feuilles-3.svg") center / contain no-repeat;
  pointer-events: none;
}

/* Panneau praticiens (sauge) : 3 feuilles jaunes sur l'angle haut droit, débordent au-dessus du panneau */
.wf-charte .comparison--panneau {
  position: relative;
}

.wf-charte .comparison--panneau::after,
.wf-charte .comparison--panneau > .wf-brin {
  top: clamp(-64px, -5.5vw, -44px);
  right: clamp(24px, 5vw, 72px);
  width: clamp(90px, 9vw, 130px);
  aspect-ratio: 211.65 / 180.61;
}

/* Carte de texte de « Qui sommes-nous » : 7 feuilles jaunes calées sur son angle haut droit, en débordement */
.wf-charte .about__content::after,
.wf-charte .about__content > .wf-brin {
  top: clamp(-72px, -5.5vw, -48px);
  right: clamp(-48px, -3.5vw, -24px);
  width: clamp(150px, 16vw, 230px);
  aspect-ratio: 570.43 / 323.53;
  -webkit-mask-image: url("../img/feuilles-7.svg");
  mask-image: url("../img/feuilles-7.svg");
  rotate: 18deg;
}

/* Encadré « Tarifs et formules » des fiches soin (section 23) : 7 feuilles de la couleur foncée de l'univers (rose foncé,
   ton sur ton) sur son angle haut droit, inclinées et en débordement, comme « Qui sommes-nous » */
.wf-charte .wf-tarifs {
  position: relative;
}

.wf-charte .wf-tarifs::after,
.wf-charte .wf-tarifs > .wf-brin {
  top: clamp(-56px, -4.5vw, -36px);
  right: clamp(-36px, -2.5vw, -16px);
  width: clamp(120px, 12vw, 180px);
  aspect-ratio: 570.43 / 323.53;
  background: var(--wf-univers-fonce, var(--wf-rose-fonce));
  -webkit-mask-image: url("../img/feuilles-7.svg");
  mask-image: url("../img/feuilles-7.svg");
  rotate: 18deg;
}

/* Encart « Formules » des fiches cours (2026-10-27) : largeur réduite et centrée ; 7 feuilles jaunes (couleur de l'univers
   cours, sur le bleu canard de l'encart) sur son angle haut droit, inclinées et en débordement, comme les tarifs des soins */
.wf-charte .wf-formules-cours {
  position: relative;
  max-width: 860px;
  margin-inline: auto;
}

.wf-charte .wf-formules-cours::after,
.wf-charte .wf-formules-cours > .wf-brin {
  top: clamp(-56px, -4.5vw, -36px);
  right: clamp(-40px, -3vw, -20px);
  width: clamp(130px, 13vw, 190px);
  aspect-ratio: 570.43 / 323.53;
  background: var(--wf-univers, var(--wf-jaune));
  -webkit-mask-image: url("../img/feuilles-7.svg");
  mask-image: url("../img/feuilles-7.svg");
  rotate: 18deg;
}

.wf-charte .wf-formules-cours > .wf-brin {
  color: var(--wf-univers, var(--wf-jaune));
  background: none;
}

/* Carte rose « Venez découvrir le centre » : 3 feuilles rose foncé (ton sur ton) sur l'angle haut gauche, retournées.
   La carte laisse déborder (le trait blanc de la section 9 reste coupé par ses coins arrondis : il est dans son propre cadre) */
.wf-charte .cta__inner--image {
  overflow: visible;
}

.wf-charte .cta__inner--image::before,
.wf-charte .cta__inner--image > .wf-brin {
  top: clamp(-64px, -5vw, -44px);
  left: clamp(-40px, -3vw, -20px);
  width: clamp(90px, 9vw, 130px);
  aspect-ratio: 211.65 / 180.61;
  background: var(--wf-rose-fonce);
  scale: -1 1;
}

/* Brins animés (assets/js/charte-feuilles.js) : le SVG de la forme remplace le pseudo-élément, à la même place ;
   les feuilles apparaissent une à une en « pop » (léger dépassement puis retour), à chaque arrivée du bloc à l'écran */
.wf-charte .wf-brin-anime.comparison--panneau::after,
.wf-charte .wf-brin-anime.about__content::after,
.wf-charte .wf-brin-anime.cta__inner--image::before,
.wf-charte .wf-brin-anime.wf-tarifs::after,
.wf-charte .wf-brin-anime.wf-formules-cours::after {
  content: none;
}

.wf-charte .wf-brin {
  position: absolute;
  z-index: 4;
  display: block;
  color: var(--wf-jaune);
  pointer-events: none;
}

.wf-charte .cta__inner--image > .wf-brin {
  color: var(--wf-rose-fonce);
  background: none;   /* la règle partagée avec le pseudo-élément pose un fond : seule la couleur du SVG compte */
}

.wf-charte .wf-tarifs > .wf-brin {
  color: var(--wf-univers-fonce, var(--wf-rose-fonce));
  background: none;
}

.wf-charte .wf-brin svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: currentColor;
}

.wf-charte .wf-brin path {
  transform-box: fill-box;
  transform-origin: center;
  scale: 0;
  opacity: 0;   /* sans transition ici : repli instantané quand le bloc sort de l'écran */
}

.wf-charte .wf-brin.est-visible path {
  scale: 1;
  opacity: 1;
  transition:
    scale 0.6s cubic-bezier(0.34, 1.7, 0.64, 1) calc(var(--i) * 110ms),
    opacity 0.25s ease calc(var(--i) * 110ms);
}

@media (prefers-reduced-motion: reduce) {
  .wf-charte .wf-brin.est-visible path {
    transition: none;
  }
}

/* ==========================================================================
   13. ICÔNES DES BOUTONS ET SURVOL
   Une icône (tracés Lucide, en masque : elle prend la couleur du texte) choisie d'après la destination du bouton,
   sans toucher aux gabarits : visite, rendez-vous d'orientation (#rdv-orientation) et réservation (#reserver) = calendrier, cours d'essai = calendrier coché,
   téléphone, « Trouver mon … » (pages catalogue seulement, pas les fiches) = loupe, contact = bulle, planning des cours = horloge,
   PDF du planning = téléchargement, « En savoir plus » = flèche après le texte. Survol : le bouton se soulève d'un cran et
   l'icône bouge un peu (la flèche avance, les autres basculent). Rien en mouvement réduit.
   ========================================================================== */

.wf-charte .btn {
  --wf-btn-icone: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12h14m-7-7 7 7-7 7%27/%3E%3C/svg%3E");
  gap: 0.55em;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Icône seulement pour les destinations reconnues ci-dessous ; les autres boutons (dont les ancres dans la page,
   « Trouver mon … ↓ », qui ont déjà leur flèche dans le texte) n'en ont pas */
.wf-charte .btn::before,
.wf-charte .btn[href*="a-propos"]::after {
  content: none;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background: currentColor;
  -webkit-mask: var(--wf-btn-icone) center / contain no-repeat;
  mask: var(--wf-btn-icone) center / contain no-repeat;
  transition: transform 0.25s ease;
}

.wf-charte .btn:is([href*="sujet=visite"], [href="#rdv-orientation"]) { --wf-btn-icone: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect width=%2718%27 height=%2718%27 x=%273%27 y=%274%27 rx=%272%27/%3E%3Cpath d=%27M8 2v4M16 2v4M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01%27/%3E%3C/svg%3E"); }
.wf-charte .btn:is([href*="#reserver"], [href*="ameliaEventPopup="]):not([href*="sujet="]) { --wf-btn-icone: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect width=%2718%27 height=%2718%27 x=%273%27 y=%274%27 rx=%272%27/%3E%3Cpath d=%27M8 2v4M16 2v4M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01%27/%3E%3C/svg%3E"); }   /* réserver (module Amelia de la fiche) = calendrier */
.wf-charte .btn[href*="sujet=cours-essai"] { --wf-btn-icone: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect width=%2718%27 height=%2718%27 x=%273%27 y=%274%27 rx=%272%27/%3E%3Cpath d=%27M8 2v4M16 2v4M3 10h18m-12 6 2 2 4-4%27/%3E%3C/svg%3E"); }
.wf-charte .btn[href^="tel:"] { --wf-btn-icone: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z%27/%3E%3C/svg%3E"); }
.wf-charte .btn:is([href$="/soins-bien-etre/"], [href$="/nos-cours/"], [href$="/location-cabinet/"], [href*="/soins-bien-etre/?"], [href*="/nos-cours/?"], [href*="/location-cabinet/?"]) { --wf-btn-icone: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2711%27 cy=%2711%27 r=%278%27/%3E%3Cpath d=%27m21 21-4.3-4.3%27/%3E%3C/svg%3E"); }
.wf-charte .btn[href*="/contact/"]:not([href*="sujet=visite"]):not([href*="sujet=cours-essai"]) { --wf-btn-icone: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M7.9 20A9 9 0 1 0 4 16.1L2 22Z%27/%3E%3C/svg%3E"); }
.wf-charte .btn[href$="/planning-des-cours/"] { --wf-btn-icone: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%2710%27/%3E%3Cpath d=%27M12 6v6l4 2%27/%3E%3C/svg%3E"); }   /* planning des cours = horloge */
.wf-charte .btn[href*="/planning-des-cours/?pdf="] { --wf-btn-icone: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3%27/%3E%3C/svg%3E"); }   /* PDF du planning = téléchargement */
.wf-charte .btn[href$="/ateliers/"] { --wf-btn-icone: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2ZM13 5v2M13 17v2M13 11v2%27/%3E%3C/svg%3E"); }   /* page Ateliers & conférences = billet */

.wf-charte .btn:is([href*="sujet=visite"], [href="#rdv-orientation"], [href*="sujet=cours-essai"], [href^="tel:"], [href$="/soins-bien-etre/"], [href$="/nos-cours/"], [href$="/location-cabinet/"], [href*="/soins-bien-etre/?"], [href*="/nos-cours/?"], [href*="/location-cabinet/?"], [href*="#reserver"], [href*="ameliaEventPopup="], [href*="/contact/"], [href$="/planning-des-cours/"], [href*="/planning-des-cours/?pdf="], [href$="/ateliers/"]):not([href^="#"]:not([href="#rdv-orientation"]))::before,
.wf-charte .btn[href*="a-propos"]::after {
  content: "";
}

/* « En savoir plus » : flèche après le texte, pas d'icône devant */
.wf-charte .btn[href*="a-propos"]::before {
  content: none;
}

@media (prefers-reduced-motion: no-preference) {
  .wf-charte .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 59, 77, 0.18);
  }

  .wf-charte .btn:hover::before {
    transform: rotate(-12deg) scale(1.12);
  }

  .wf-charte .btn[href*="a-propos"]:hover::after {
    transform: translateX(4px);
  }
}

/* ==========================================================================
   14. GRAIN ET DÉGRADÉ VERTICAL SUR LE BLEU CANARD (bande basse de l'appel à l'action + pied de page, d'un seul
   tenant) : en haut, bleu plus clair et grain marqué ; en descendant, le bleu fonce et le grain s'efface (masque),
   plus de grain en bas. Grain : bruit SVG blanc, aucune image à charger.
   ========================================================================== */

.wf-charte {
  --wf-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .34 0 0 0 -.11'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --wf-bleu-haut: #145b6f;   /* départ du dégradé, commun à la bande de l'appel à l'action et au haut du pied de page */
  --wf-bleu-bas: #002533;
}

/* Appel à l'action : la moitié basse prend le bleu clair du haut du dégradé, avec le grain plein */
.wf-charte .cta {
  position: relative;
  background: linear-gradient(to bottom, var(--bg-muted) 0, var(--bg-muted) 50%, var(--wf-bleu-haut) 50%, var(--wf-bleu-haut) 100%);
}

.wf-charte .cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background: var(--wf-grain);
  background-size: 220px 220px;
  pointer-events: none;
}

.wf-charte .cta > .container {
  position: relative;
  z-index: 1;
}

/* Pied de page : du bleu clair au bleu profond ; grain plein en haut, effacé aux deux tiers */
.wf-charte .footer {
  isolation: isolate;
  background: linear-gradient(to bottom, var(--wf-bleu-haut) 0%, var(--wf-bleu) 45%, var(--wf-bleu-bas) 100%);
}

.wf-charte .footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wf-grain);
  background-size: 220px 220px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 35%, transparent 70%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 35%, transparent 70%);
  pointer-events: none;
}

/* Adresse du centre en lien vers l'itinéraire (wf_centre_adresse_lien()) : soulignée pour se voir comme un lien */
.wf-charte .wf-adresse-lien {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Réseaux sociaux du pied de page : pastilles aux couleurs des marques, icône blanche */
.wf-charte .footer__social {
  color: #fff;
}

.wf-charte .footer__social--facebook,
.wf-charte .footer__social--facebook:hover {
  background: #1877f2;
}

.wf-charte .footer__social--instagram,
.wf-charte .footer__social--instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

/* Hero : même texture, sens inverse (bleu profond et lisse en haut, sous le menu ; bleu clair et grain en bas,
   où les cartes de parcours sont à cheval) */
.wf-charte .wf-ah {
  isolation: isolate;
  background: linear-gradient(to top, var(--wf-bleu-haut) 0%, var(--wf-bleu) 45%, var(--wf-bleu-bas) 100%);
}

.wf-charte .wf-ah::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wf-grain);
  background-size: 220px 220px;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.55) 35%, transparent 70%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.55) 35%, transparent 70%);
  pointer-events: none;
}

/* Cours (« Pour bouger ») : même texture, centrée (bleu profond et lisse en haut et en bas, sous les vagues ;
   bleu clair et grain au milieu). ::before / ::after servent déjà aux vagues : le grain est un calque de fond,
   recouvert vers les bords par un voile du bleu profond qui l'efface. */
.wf-charte .wf-chapitre--cours {
  background:
    linear-gradient(to bottom, var(--wf-bleu-bas) 0%, rgba(0, 37, 51, 0) 38%, rgba(0, 37, 51, 0) 62%, var(--wf-bleu-bas) 100%),
    var(--wf-grain),
    linear-gradient(to bottom, var(--wf-bleu-bas) 0%, var(--wf-bleu) 25%, var(--wf-bleu-haut) 50%, var(--wf-bleu) 75%, var(--wf-bleu-bas) 100%);
  background-size: auto, 220px 220px, auto;
}

/* Hero : boule de lumière jaune posée sur l'arbre de vie, centrée sur le bas des feuilles (lueur qui éclaire
   les feuilles par-dessus, en mode additif : n'assombrit jamais) */
.wf-charte .wf-ah__centre::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 70%;
  aspect-ratio: 1;
  translate: -50% 42%;   /* centre de la lueur sur le bas du feuillage */
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 179, 53, 0.5) 0%, rgba(245, 179, 53, 0.22) 30%, rgba(245, 179, 53, 0.05) 55%, transparent 70%);   /* jaune soleil de la charte (comme le « & ») */
  mix-blend-mode: plus-lighter;   /* additionne la lumière : le jaune reste jaune sur le bleu (screen le verdissait) */
  filter: blur(6px);
  pointer-events: none;
}

/* Pulsation lente de la lumière (respiration) ; fixe si l'appareil demande moins d'animations */
@media (prefers-reduced-motion: no-preference) {
  .wf-charte .wf-ah__centre::after {
    animation: wf-lumiere 2.5s ease-in-out infinite alternate;
  }
}

@keyframes wf-lumiere {
  from { opacity: 0.45; scale: 0.84; }
  to { opacity: 1; scale: 1.12; }
}

/* ==========================================================================
   15. CODE COULEUR PAR TYPE DE PRODUIT (hors accueil, qui a ses propres compositions)
   Soins = rose poudré · Cours = jaune soleil · Cabinets (location, espace praticiens) = vert sauge.
   Univers de la page : body.wf-univers--{soins|cours|cabinets} (wf_charte_univers(), inc/charte.php) ; univers d'une
   carte : d'après son lien (grilles mélangées : L'équipe, soins liés…), sinon celui de la page, sinon rose.
   Touches : pastilles des photos, contour des cartes au survol, filtres actifs, boutons principaux de la page (sauf
   en-tête, pied de page et carte rose de l'appel à l'action), intitulés et prix sur les hauts de page photo. Texte toujours en bleu canard plein sur ces couleurs (7,0 / 6,6 / 7,7:1).
   ========================================================================== */

.wf-charte .wf-univers--soins,
.wf-charte.wf-univers--soins {
  --wf-univers: var(--wf-rose);
  --wf-univers-fonce: var(--wf-rose-fonce);
}

.wf-charte.wf-univers--cours {
  --wf-univers: var(--wf-jaune);
  --wf-univers-fonce: #d6951a;
}

.wf-charte.wf-univers--cabinets {
  --wf-univers: var(--wf-sauge);
  --wf-univers-fonce: #8ea76b;
}

/* Cartes : couleur de l'univers de la carte */
.wf-charte .wf-carte {
  --wf-carte-c: var(--wf-univers, var(--wf-rose));
  --wf-carte-cf: var(--wf-univers-fonce, var(--wf-rose-fonce));
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wf-charte .wf-carte:has(a[href*="/soins-bien-etre/"]) {
  --wf-carte-c: var(--wf-rose);
  --wf-carte-cf: var(--wf-rose-fonce);
}

.wf-charte .wf-carte:has(a[href*="/nos-cours/"]),
.wf-charte .wf-carte[data-univers="cours"] {
  --wf-carte-c: var(--wf-jaune);
  --wf-carte-cf: #d6951a;
}

.wf-charte .wf-carte:has(a[href*="location-cabinet"]) {
  --wf-carte-c: var(--wf-sauge);
  --wf-carte-cf: #8ea76b;
}

.wf-charte .wf-carte__badge {
  background: var(--wf-carte-c);
  color: var(--wf-bleu);
}

.wf-charte .wf-carte:hover,
.wf-charte .wf-carte:focus-within {
  border-color: var(--wf-carte-cf);
  box-shadow: 0 10px 24px rgba(0, 59, 77, 0.1);
}

/* Pastilles d'icône : rondes partout, comme les autres pastilles de la charte (flèches des cartes, FAQ) */
.wf-charte .icon-box {
  border-radius: 50%;
}

/* Pastilles d'icône claires (ex. « Tout ce qui est inclus » de « Trouver mon cabinet ») : fond de la couleur de
   l'univers, icône bleu canard */
.wf-charte.wf-univers .icon-box--light {
  background: var(--wf-univers);
}

.wf-charte.wf-univers .icon-box--light svg {
  color: var(--wf-bleu);
}

/* Filtres actifs des pages « Trouver mon … » */
.wf-charte.wf-univers .wf-tms__filtre[aria-pressed="true"] {
  background: var(--wf-univers);
  border-color: var(--wf-univers-fonce);
  color: var(--wf-bleu);
}

/* Hauts de page photo et panneaux sombres : bouton principal, intitulé et prix dans la couleur de l'univers */
.wf-charte.wf-univers :is(.theme-dark, .hero) .btn-primary {
  background: var(--wf-univers);
  border-color: var(--wf-univers);
  color: var(--wf-bleu);
}

.wf-charte.wf-univers :is(.theme-dark, .hero) .btn-primary:hover {
  background: color-mix(in srgb, var(--wf-univers) 78%, #ffffff);
  border-color: color-mix(in srgb, var(--wf-univers) 78%, #ffffff);
}

.wf-charte.wf-univers :is(.theme-dark, .hero) .eyebrow,
.wf-charte.wf-univers .soin-hero__prix strong {
  color: var(--wf-univers);
}

/* Boutons principaux de la page (cartes, réservation, sections, carte blanche du haut de page) : couleur de
   l'univers, texte bleu canard ; contour des boutons secondaires dans la teinte foncée de l'univers */
.wf-charte.wf-univers .btn-primary {
  background: var(--wf-univers);
  border-color: var(--wf-univers);
  color: var(--wf-bleu);
}

.wf-charte.wf-univers .btn-primary:hover {
  background: color-mix(in srgb, var(--wf-univers) 78%, #ffffff);
  border-color: color-mix(in srgb, var(--wf-univers) 78%, #ffffff);
  color: var(--wf-bleu);
}

/* … sauf ce qui est propre à WellFuz : bouton « Contact » de l'en-tête, pied de page, carte rose « Venez découvrir
   le centre » (un bouton rose y disparaîtrait) : bleu canard */
.wf-charte.wf-univers :is(.header__cta, .footer .btn-primary, .cta__inner--image .btn-primary) {
  background: var(--wf-bleu);
  border-color: var(--wf-bleu);
  color: #ffffff;
}

.wf-charte.wf-univers :is(.header__cta, .footer .btn-primary, .cta__inner--image .btn-primary):hover {
  background: #0b5068;
  border-color: #0b5068;
  color: #ffffff;
}

/* ==========================================================================
   16. MEGA MENU : CODE COULEUR PAR TYPE DE PRODUIT
   « Trouver mon soin » = rose, « Trouver mon sport » = jaune, « Trouver mon cabinet » = sauge (classes de menu
   mega-besoins / mega-sports / mega-cabinets ; panneau : mega-panel--{univers}, ajoutée par mega-menu.js).
   Ce qui est propre à WellFuz (Wellfuziens, À propos, Connexion, Contact) reste en bleu canard.
   Entrée du menu : trait de couleur sous le libellé au survol, panneau ouvert ou page en cours ; panneau : liseré
   du haut, encart principal plein (texte bleu), encart de droite et survol des liens en teinte claire.
   ========================================================================== */

.wf-charte .nav-menu > li.mega-besoins,
.wf-charte .mega-panel--soins {
  --wf-univers: var(--wf-rose);
  --wf-univers-fonce: var(--wf-rose-fonce);
}

.wf-charte .nav-menu > li.mega-sports,
.wf-charte .mega-panel--cours {
  --wf-univers: var(--wf-jaune);
  --wf-univers-fonce: #d6951a;
}

.wf-charte .nav-menu > li.mega-cabinets,
.wf-charte .mega-panel--cabinets {
  --wf-univers: var(--wf-sauge);
  --wf-univers-fonce: #8ea76b;
}

/* Entrées du menu : trait de la couleur de l'univers */
.wf-charte .nav-menu > li:is(.mega-besoins, .mega-sports, .mega-cabinets) > a {
  position: relative;
}

.wf-charte .nav-menu > li:is(.mega-besoins, .mega-sports, .mega-cabinets) > a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 2px;
  height: 3px;
  border-radius: 3px;
  background: var(--wf-univers);
  scale: 0 1;
  transition: scale 0.25s ease;
}

.wf-charte .nav-menu > li:is(.mega-besoins, .mega-sports, .mega-cabinets) > a:is(:hover, :focus-visible, [aria-expanded="true"])::after,
.wf-charte .nav-menu > li:is(.mega-besoins, .mega-sports, .mega-cabinets):is(.current-menu-item, .current-menu-ancestor, .is-expanded) > a::after {
  scale: 1 1;
}

/* Panneau */
.wf-charte .mega-panel:is(.mega-panel--soins, .mega-panel--cours, .mega-panel--cabinets) {
  border-top: 3px solid var(--wf-univers);
}

.wf-charte :is(.mega-panel--soins, .mega-panel--cours, .mega-panel--cabinets) .mega-promo--dark {
  background: var(--wf-univers);
}

.wf-charte :is(.mega-panel--soins, .mega-panel--cours, .mega-panel--cabinets) .mega-promo--dark :is(.mega-promo-title, .mega-promo-title em, .mega-promo-cta) {
  color: var(--wf-bleu);
}

.wf-charte :is(.mega-panel--soins, .mega-panel--cours, .mega-panel--cabinets) .mega-promo--dark .mega-promo-desc {
  color: var(--fg2);
}

.wf-charte :is(.mega-panel--soins, .mega-panel--cours, .mega-panel--cabinets) .mega-promo--dark .mega-promo-badge {
  color: var(--wf-bleu);
  border-color: rgba(0, 59, 77, 0.35);
}

.wf-charte :is(.mega-panel--soins, .mega-panel--cours, .mega-panel--cabinets) .mega-promo--dark .mega-promo-cta:hover {
  color: var(--wf-bleu);
  text-decoration: underline;
}

.wf-charte :is(.mega-panel--soins, .mega-panel--cours, .mega-panel--cabinets) .mega-promo--droite:not(.mega-promo--dark) {
  background: color-mix(in srgb, var(--wf-univers) 26%, #ffffff);
}

.wf-charte :is(.mega-panel--soins, .mega-panel--cours, .mega-panel--cabinets) .mega-center > li:hover {
  background: color-mix(in srgb, var(--wf-univers) 20%, #ffffff);
}


/* ==========================================================================
   17. VOILE DES HAUTS DE PAGE PHOTO (fiches, « Trouver mon … », hero de section « À propos ») : plus foncé et teinté du bleu canard profond
   (pas de noir) ; plus dense à gauche, sous le texte, pour la lisibilité sur les photos claires
   ========================================================================== */

.wf-charte .soin-hero__overlay,
.wf-charte .hero__overlay {
  background: linear-gradient(to top, rgba(0, 37, 51, 0.85) 0%, rgba(0, 37, 51, 0.55) 55%, rgba(0, 37, 51, 0.35) 100%);
}

@media (min-width: 1024px) {
  .wf-charte .soin-hero__overlay,
  .wf-charte .hero__overlay {
    background:
      linear-gradient(to top, rgba(0, 37, 51, 0.45) 0%, rgba(0, 37, 51, 0) 45%),
      linear-gradient(to right, rgba(0, 37, 51, 0.88) 0%, rgba(0, 37, 51, 0.65) 45%, rgba(0, 37, 51, 0.3) 100%);
  }
}


/* ==========================================================================
   18. PLANNING DES COURS (page-planning-des-cours.php, template-parts/partials/planning-grille.php)
   Mobile et tablette : liste par jour. Grand écran : grille jours × heures, chaque cours placé par son horaire
   (--debut, --duree en heures depuis le haut de la plage ; --piste / --pistes quand deux cours se chevauchent).
   Une teinte claire par famille de cours (catégories des fiches cours), texte en bleu canard plein ;
   mêmes teintes que le PDF (WF_PLANNING_FAMILLES, inc/planning.php).
   ========================================================================== */

.wf-charte .wf-planning--yoga                { --wf-pl-fond: color-mix(in srgb, var(--wf-jaune) 45%, #ffffff); --wf-pl-trait: var(--wf-jaune); }
.wf-charte .wf-planning--pilates             { --wf-pl-fond: color-mix(in srgb, var(--wf-bleu-haut) 20%, #ffffff); --wf-pl-trait: var(--wf-bleu-haut); }
.wf-charte .wf-planning--fitness-cardio      { --wf-pl-fond: color-mix(in srgb, var(--wf-rose) 70%, #ffffff); --wf-pl-trait: var(--wf-rose-fonce); }
.wf-charte .wf-planning--stretching-mobilite { --wf-pl-fond: color-mix(in srgb, var(--wf-sauge) 70%, #ffffff); --wf-pl-trait: #8ea76b; } /* sauge foncé (univers cabinets) */
.wf-charte .wf-planning--autres              { --wf-pl-fond: var(--bg-muted); --wf-pl-trait: var(--wf-grege); }
.wf-charte .wf-planning--evenement           { --wf-pl-fond: var(--wf-bleu); --wf-pl-trait: var(--wf-jaune); }

.wf-planning-page__onglets {
  justify-content: flex-start;
}

/* En-tête sur fond grège, en 50/50 sur grand écran : titre, intro et boutons | carte blanche « Bon à savoir » */
.wf-bandeau-infos__grille {
  display: grid;
  gap: var(--space-2xl);
  align-items: end; /* carte calée sur le bas des boutons */
}

.wf-bandeau-infos__grille .section__ctas {
  margin-top: var(--space-xl);
}

@media (min-width: 1024px) {
  .wf-bandeau-infos__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3xl);
  }
}

.wf-bon-a-savoir {
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius);
  background: var(--bg);
}

.wf-bon-a-savoir__titre {
  display: block;
  margin: 0 0 var(--space-md);
}

.wf-bon-a-savoir__liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.wf-bon-a-savoir__liste li {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.wf-bon-a-savoir__liste strong,
.wf-bon-a-savoir__liste span {
  display: block;
}

.wf-bon-a-savoir__liste span {
  color: var(--fg2);
}

.wf-bon-a-savoir__liste a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.wf-bon-a-savoir__icone {
  flex: none;
  color: var(--fg1); /* bleu canard : le jaune foncé de l'univers cours manque de contraste sur blanc */
}

.wf-planning-vue__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.wf-planning-vue__titre {
  margin: 0;
  font-size: var(--text-h3);
}

.wf-planning-vue__periode,
.wf-planning-vue__notes {
  margin: var(--space-xs) 0 0;
  color: var(--fg2);
}

.wf-planning-vue__notes {
  margin-top: var(--space-lg);
}

.wf-planning-vue__a-venir {
  margin-bottom: var(--space-lg);
  padding: var(--space-xl);
  border-radius: var(--radius);
  background: var(--bg-muted);
}

.wf-planning-vue__a-venir p {
  margin: 0;
}

.wf-planning-vue__a-venir p + p {
  margin-top: var(--space-sm);
}

/* Légende : pastille de la teinte de chaque famille */
.wf-planning-legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin: 0 0 var(--space-lg);
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.wf-planning-legende__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.wf-planning-legende__item::before {
  content: "";
  width: 0.9em;
  height: 0.9em;
  border: 1px solid var(--wf-pl-trait);
  border-radius: 3px;
  background: var(--wf-pl-fond);
}

/* Mobile et tablette : un jour sous l'autre, un cours par ligne (horaire | discipline, coach) */
.wf-planning-grille__heures {
  display: none;
}

.wf-planning-jour + .wf-planning-jour {
  margin-top: var(--space-lg);
}

.wf-planning-jour__titre {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-h4);
}

.wf-planning-jour__date {
  margin-left: 0.35em;
  color: var(--fg2);
  font-size: var(--text-sm);
}

.wf-planning-jour__ferie {
  margin: 0;
  color: var(--fg2);
}

.wf-planning-jour__cours {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wf-planning-cours__lien {
  display: grid;
  grid-template-columns: 8.5em 1fr;
  column-gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius); /* pas de barre verticale à gauche : aplat de couleur seul */
  background: var(--wf-pl-fond);
  color: var(--wf-bleu);
  font-size: var(--text-sm);
  line-height: 1.3;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}

.wf-planning-cours__lien > :not(.wf-planning-cours__heure) {
  grid-column: 2;
}

.wf-planning-cours__heure {
  grid-row: 1 / span 3;
  font-variant-numeric: tabular-nums;
}

.wf-planning-cours__complet {
  justify-self: start;
  margin-top: 0.2em;
  padding: 0 0.6em;
  border-radius: 999px;
  background: var(--wf-bleu);
  color: var(--fg-inverse);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wf-planning--evenement .wf-planning-cours__lien {
  color: var(--fg-inverse);
}

a.wf-planning-cours__lien:hover {
  box-shadow: inset 0 0 0 2px var(--wf-pl-trait);
}

a.wf-planning-cours__lien:focus-visible {
  outline: 3px solid var(--wf-bleu);
  outline-offset: 2px;
}

/* Grand écran : grille jours × heures (filets horaires en fond de chaque colonne) */
@media (min-width: 1024px) {
  .wf-planning-grille {
    --wf-pl-heure: 5rem;  /* 1 h = horaire + discipline sur 2 lignes + coach */
    --wf-pl-entete: 3.25rem;
    display: grid;
    grid-template-columns: 2.5rem repeat(var(--jours), minmax(0, 1fr));
    column-gap: var(--space-xs);
  }

  .wf-planning-grille__heures {
    display: block;
    position: relative;
    height: calc(var(--heures) * var(--wf-pl-heure));
    margin-top: calc(var(--wf-pl-entete) + var(--space-xs));
    color: var(--fg2);
    font-size: var(--text-xs);
  }

  .wf-planning-grille__heures span {
    position: absolute;
    top: calc(var(--h) * var(--wf-pl-heure) + 2px);
    left: 0;
  }

  .wf-planning-jour + .wf-planning-jour {
    margin-top: 0;
  }

  .wf-planning-jour__titre {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: var(--wf-pl-entete);
    margin: 0 0 var(--space-xs);
    border-radius: var(--radius);
    background: var(--bg-muted);
    font-size: var(--text-sm);
  }

  .wf-planning-jour__date {
    margin: 0;
    font-size: var(--text-xs);
  }

  .wf-planning-jour__cours,
  .wf-planning-jour__ferie {
    display: block;
    position: relative;
    height: calc(var(--heures) * var(--wf-pl-heure));
    background: repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px var(--wf-pl-heure));
  }

  .wf-planning-jour__ferie {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
    border-radius: var(--radius);
    background: var(--bg-muted);
    text-align: center;
  }

  .wf-planning-cours {
    position: absolute;
    top: calc(var(--debut) * var(--wf-pl-heure) + 2px);
    left: calc(100% / var(--pistes) * var(--piste));
    width: calc(100% / var(--pistes) - 2px);
    height: calc(var(--duree) * var(--wf-pl-heure) - 4px);
  }

  .wf-planning-cours__lien {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    overflow: hidden;
    padding: var(--space-xs);
    font-size: var(--text-xs);
    line-height: 1.25;
    text-align: center;
  }

  .wf-planning-cours__nom {
    font-size: var(--text-sm);
  }

  .wf-planning-cours__complet {
    justify-self: auto;
    padding: 0 0.5em;
    font-size: 0.85em;
  }

  .wf-planning-cours--court .wf-planning-cours__coach {
    display: none;
  }
}


/* ==========================================================================
   19. ATELIERS & CONFÉRENCES (page-ateliers.php, template-parts/partials/atelier-carte.php)
   En-tête partagé avec le planning (.wf-bandeau-infos, .wf-bon-a-savoir, section 18). Cartes .wf-carte :
   pastille de date en haut à gauche de la photo, « Complet » en haut à droite ; description complète dans un
   <details> (« En savoir plus », lisible sans JS) ; « Réserver » ouvre le module Amelia de l'événement dans une fenêtre.
   ========================================================================== */

.wf-atelier__date {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.5em;
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--wf-bleu);
  font-size: var(--text-xs);
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 37, 51, 0.15);
}

.wf-atelier__date strong {
  font-size: 1.9em;
  font-weight: 400;
  letter-spacing: 0;
}

.wf-atelier__complet {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 2;
  padding: 0.25em 0.75em;
  border-radius: 999px;
  background: var(--wf-bleu);
  color: var(--fg-inverse);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wf-atelier .wf-carte__infos {
  margin-bottom: var(--space-sm);
}

.wf-atelier__details {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
}

.wf-atelier__details summary {
  cursor: pointer;
  list-style: none;
  color: var(--fg2);
}

.wf-atelier__details summary::-webkit-details-marker {
  display: none;
}

.wf-atelier__plus {
  color: var(--wf-bleu);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

.wf-atelier__details[open] .wf-atelier__extrait {
  display: none;
}

.wf-atelier__details[open] .wf-atelier__plus::after {
  content: " (réduire)";
}

.wf-atelier__details .prose {
  margin-top: var(--space-sm);
}

.wf-atelier__details summary:focus-visible {
  outline: 3px solid var(--wf-bleu);
  outline-offset: 2px;
}

/* Planning des cours : « Prochains ateliers » sous la semaine type : les 3 prochains (6 semaines à venir), en cartes
   .wf-carte.wf-atelier de la page Ateliers ; titre de section (taille H2) et lien vers la page Ateliers sur une ligne */
.wf-prochains-ateliers {
  margin-top: var(--space-3xl);
}

.wf-prochains-ateliers__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.wf-charte .wf-prochains-ateliers__titre {
  margin: 0;
  font-size: var(--text-h2);
}

@media (min-width: 1024px) {
  .wf-prochains-ateliers__cartes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* En-tête : carte « Prochain atelier » à droite (carte claire sur la photo, boutons en bleu par .theme-light) */
.wf-prochain-atelier {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}

.wf-prochain-atelier__titre {
  margin: 0 0 var(--space-sm);
}

.wf-prochain-atelier .wf-cartes {
  grid-template-columns: 1fr;
}

.wf-prochain-atelier .wf-carte {
  background: var(--bg); /* sur la photo de l'en-tête, la carte n'hérite d'aucun fond */
  color: var(--wf-bleu);
}

.wf-prochain-atelier .wf-atelier__details {
  display: none; /* description complète : dans la carte de la liste, plus bas */
}

/* Module des événements Amelia : chargé seulement avec ?ameliaEventPopup, hors écran ; sa fenêtre (position fixe)
   s'ouvre par-dessus la page. Pas de display:none (le module ne se monterait pas) ni de transform (la fenêtre s'y accrocherait). */
.wf-ateliers__module {
  position: absolute;
  top: 0;
  left: -10000px;
  width: 600px;
}

/* Ateliers : contenu de l'en-tête encadré comme le reste de la page (même largeur que .container), et non en pleine
   largeur comme les en-têtes des fiches et de « Trouver mon … » (.wf-hero > .container { max-width: none }) */
.wf-ateliers-page .wf-hero > .container {
  max-width: 1280px;
}

/* Cartes d'ateliers : contour au survol en bleu canard (propres à WellFuz, sans univers ; la page n'en a pas et le rose
   s'appliquerait par défaut). Sélecteur renforcé : un lien de la description (/nos-cours/…) ne doit pas changer la couleur. */
.wf-charte .wf-cartes .wf-carte.wf-atelier {
  --wf-carte-cf: var(--wf-bleu);
}


/* ==========================================================================
   20. FICHES SOIN ET COURS : « Comment se passe une séance / un cours ? » (#seance, colonne de droite)
   Aplat de la couleur pleine de l'univers (rose poudré : soins, jaune soleil : cours), texte en bleu canard plein
   (7,0 / 6,6:1) ; étapes (wf_seance_etapes()) en cartes blanches, icône dans une pastille de la couleur de l'univers.
   Reste visible au défilement sur grand écran, si l'écran
   est assez haut pour l'afficher en entier.
   ========================================================================== */

.wf-charte .wf-seance {
  padding: var(--space-xl) var(--space-lg);
  border-radius: calc(var(--radius) * 2);
  background: var(--wf-univers, var(--wf-rose));
  color: var(--wf-bleu);
}

.wf-charte .wf-seance .eyebrow {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--wf-bleu); /* bleu plein sur rose et jaune */
}

.wf-charte .wf-seance h2 {
  margin-bottom: var(--space-lg);
  font-size: var(--text-h3);
  color: var(--wf-bleu);
}

.wf-charte .wf-seance .wf-etapes {
  position: relative;
  gap: var(--space-md);
  margin: 0;
}

.wf-charte .wf-seance .wf-etapes__item {
  position: relative;
  align-items: flex-start;
  padding: var(--space-md);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 4px 12px rgba(0, 37, 51, 0.06);
}

.wf-charte .wf-seance .wf-etapes__pastille {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--wf-univers, var(--wf-rose));
  color: var(--wf-bleu);
}

.wf-charte .wf-seance .wf-etapes__icone {
  margin: 0;
}

.wf-charte .wf-seance .wf-etapes__nom {
  margin: 0.4em 0 var(--space-xs);
  color: var(--wf-bleu);
}

.wf-charte .wf-seance .wf-etapes__item p {
  margin: 0;
  color: var(--fg2);
}

/* Contenu non découpé en étapes (wf_seance_etapes() rend alors le texte tel quel) : encart blanc sur l'aplat,
   comme les étapes */
.wf-charte .wf-seance > .prose {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 4px 12px rgba(0, 37, 51, 0.06);
  color: var(--fg2);
  font-size: var(--text-sm);
}

@media (min-width: 1024px) and (min-height: 820px) {
  .wf-charte .wf-seance {
    position: sticky;
    top: 100px;
  }
}


/* ==========================================================================
   21. FORMULES DES FICHES : variantes rattachées dans le tableau « Tarifs et formules » (soins, wf_soin_formules()) :
   titre de la variante, puis son texte en petit (plus de section par variante). Fiches cours : pas de liste des variantes
   (bloc « Les formats du cours » retiré le 2026-10-26), leurs créneaux sont dans « Les cours de la semaine »
   ========================================================================== */

.soin-tarifs__texte {
  max-width: 46ch;
  margin-top: 0.2em;
  color: var(--fg2);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.soin-tarifs__texte p {
  margin: 0;
}

.soin-tarifs td {
  vertical-align: top;
}


/* ==========================================================================
   22. FICHE SOIN : « Bon à savoir » (avertissement) en carte bleu canard dans la grille des praticiens
   (template-parts/partials/avertissement-carte.php) : occupe la place libre de la rangée (souvent un seul praticien).
   Dégradé du bleu canard (section 14), grande icône au trait de la couleur de l'univers (comme l'intitulé), texte blanc ;
   pas cliquable, donc pas d'effet de survol.
   ========================================================================== */

.wf-charte .wf-carte.wf-carte--avertissement {
  border-color: transparent;
  background: linear-gradient(160deg, var(--wf-bleu-haut) 0%, var(--wf-bleu) 55%, var(--wf-bleu-bas) 100%);
  color: var(--fg-inverse);
}

.wf-charte .wf-carte.wf-carte--avertissement:hover,
.wf-charte .wf-carte.wf-carte--avertissement:focus-within {
  border-color: transparent;
  box-shadow: none;
}

.wf-avertissement {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
  height: 100%;
  padding: var(--space-2xl) var(--space-xl);
}

.wf-avertissement__icone {
  color: var(--wf-univers, var(--wf-jaune)); /* même couleur que l'intitulé « Bon à savoir » (univers de la page) */
}

.wf-avertissement__titre {
  margin: 0;
}

.wf-avertissement__texte {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.6;
}


/* ==========================================================================
   23. FICHE SOIN : « Tarifs et formules » dans un encadré grège sur toute la largeur (.wf-tarifs)
   Tableau pleine largeur (sans la largeur maximale du tableau commun .soin-tarifs, partagé avec le planning),
   durée et prix alignés, « Réserver » en petit bouton secondaire à droite. Mobile : une formule sur deux lignes
   (nom, puis durée · prix · Réserver), en-têtes de colonnes masqués visuellement.
   ========================================================================== */

.wf-tarifs {
  padding: var(--space-2xl) var(--space-xl);
  border-radius: calc(var(--radius) * 2);
  background: var(--bg-muted);
}

.wf-tarifs .eyebrow {
  display: block;
  margin-bottom: var(--space-xs);
}

.wf-tarifs .soin-tarifs {
  max-width: none;
}

.wf-tarifs .soin-tarifs th,
.wf-tarifs .soin-tarifs td {
  padding-block: var(--space-md);
  vertical-align: middle;
}

.wf-tarifs .soin-tarifs td:first-child {
  width: 100%; /* la formule prend la place, les autres colonnes à leur taille */
}

.wf-tarifs .soin-tarifs th:not(:first-child),
.wf-tarifs .soin-tarifs td:not(:first-child) {
  white-space: nowrap;
  padding-left: var(--space-lg);
}

.wf-tarifs .soin-tarifs td:last-child {
  padding-right: 0;
  text-align: right;
}

.wf-tarifs .soin-tarifs tbody tr:last-child td {
  border-bottom: 0;
}

.wf-tarifs .soin-tarifs strong {
  font-size: var(--text-body);
}

.wf-charte .wf-tarifs .wf-tarifs__reserver {
  padding: 0.45em 1.1em;
  font-size: var(--text-sm);
}

@media (max-width: 767px) {
  .wf-tarifs {
    padding: var(--space-xl) var(--space-md);
  }

  .wf-tarifs .soin-tarifs thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .wf-tarifs .soin-tarifs tbody tr {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: var(--space-xs) var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border);
  }

  .wf-tarifs .soin-tarifs tbody tr:last-child {
    border-bottom: 0;
  }

  .wf-tarifs .soin-tarifs td,
  .wf-tarifs .soin-tarifs td:not(:first-child) {
    padding: 0;
    border: 0;
  }

  .wf-tarifs .soin-tarifs td:first-child {
    grid-column: 1 / -1;
    width: auto;
  }
}


/* ==========================================================================
   24. FICHES SOIN ET COURS : « Ces soins / cours pourraient vous plaire » dans un encadré de la couleur de l'univers
   adoucie (rose poudré ou jaune soleil à 35 %), dans la largeur du contenu, angles arrondis (comme l'encadré des tarifs,
   section 23) : casse l'enchaînement avec la grille des praticiens / coachs, et laisse un blanc avant la FAQ grège
   (pas de bande pleine largeur : rose puis grège se toucheraient). Cartes sur fond blanc ; texte en bleu canard plein.
   ========================================================================== */

.wf-charte .wf-plus-loin__encadre {
  padding: var(--space-2xl) var(--space-xl);
  border-radius: calc(var(--radius) * 2);
  background: color-mix(in srgb, var(--wf-univers, var(--wf-rose)) 35%, #ffffff);
}

.wf-charte .wf-plus-loin .eyebrow {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--wf-bleu); /* bleu plein sur fond teinté */
}

.wf-charte .wf-plus-loin .wf-carte {
  background: var(--bg);
  border-color: transparent;
}


/* « Trouver mon cabinet », témoignages « Ils exercent chez nous » (section à part, .wf-temoignages-section) : carte vert
   pâle comme sur l'accueil (là-bas, blanc à 35 % posé sur le panneau sauge ; ici, même teinte, opaque, sur fond blanc) */
.wf-charte .wf-temoignages-section .wf-temoignage {
  border-color: rgba(0, 59, 77, 0.2);
  background: color-mix(in srgb, var(--wf-sauge) 65%, #ffffff);
}


/* ==========================================================================
   25. MEGA MENU : encart « Atelier à venir » (inc/ateliers.php, wf_menu_ateliers() ; assets/js/mega-menu.js)
   Dans « Trouver mon soin » et « Trouver mon sport », sous l'encart de droite (colonne .mega-droite-pile) :
   prochain atelier du type du menu (WF_ATELIERS_MENU), absent s'il n'y en a pas.
   ========================================================================== */

.mega-droite-pile {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

/* Fond bleu canard (les ateliers sont propres à WellFuz) ; surtitre de la couleur de l'univers du panneau */
/* Menu L'équipe : encart gauche (« Qui sommes-nous »), zone centrale et encart droit (« Devenir praticien ») à la même
   hauteur, pour que la carte cadeau de la zone centrale s'aligne sur les deux encarts */
.mega-panel-inner.mega-panel-inner--egal { /* plus précis que .mega-panel-inner de mega-menu.css, chargé après */
  align-items: stretch;
}

/* Encart « Carte cadeau » du menu L'équipe (dernière colonne de la zone centrale) : encart promo (mêmes badge, titre,
   texte et lien que « Qui sommes-nous » et « Devenir praticien »), fond rose poudré, toute la hauteur, illustration en
   haut à droite (assets/js/mega-menu.js). Texte en bleu canard : 7:1 sur le rose */
.mega-center > .mega-promo.mega-promo--cadeau {
  grid-column: auto; /* .mega-promo (mega-menu.css) le mettrait en 1re colonne, donc à la ligne : il reste en 3e colonne */
  position: relative;
  align-self: stretch;
  justify-content: space-between;
  background: var(--wf-rose);
}

.mega-promo--cadeau .mega-promo-desc {
  color: var(--wf-bleu);
}

.mega-promo--cadeau .mega-promo-badge {
  border-color: rgba(0, 59, 77, 0.35);
}

.mega-promo--cadeau .mega-promo-title {
  padding-right: 56px; /* pas de texte sous l'illustration */
}

.mega-promo--cadeau .mega-promo-illu {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 56px;
  height: 56px;
  transform: rotate(8deg);
  pointer-events: none;
}

/* Encart « Atelier à venir » (menus Soins et Sport, assets/js/mega-menu.js buildAtelierBlock()) : structure et
   typographie des encarts promo (.mega-promo-badge, -title, -desc, -cta de mega-menu.css), fond bleu canard et texte
   blanc comme « Qui sommes-nous ». Sélecteurs doublés : mega-menu.css, qui pose le fond des .mega-promo, est chargé après */
.mega-promo.mega-atelier {
  background: var(--wf-bleu);
  color: #fff;
}

.mega-promo.mega-atelier :is(.mega-promo-title, .mega-promo-title em, .mega-promo-cta) {
  color: #fff;
}

.mega-promo.mega-atelier .mega-promo-desc {
  color: rgba(255, 255, 255, 0.8);
}

.mega-promo.mega-atelier .mega-promo-badge {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.mega-promo.mega-atelier a.mega-promo-title {
  text-decoration: none;
}

.mega-promo.mega-atelier a.mega-promo-title:hover,
.mega-promo.mega-atelier .mega-promo-cta:hover {
  text-decoration: underline;
}

/* ==========================================================================
   26. SECTION ABOUT EN CITATION SIGNÉE (arg « signature » : mot de la fondatrice sur « À propos », page-template-about.php)
   ========================================================================== */

.about__citation {
  margin: 0;
}

.about__citation blockquote {
  margin: 0;
  padding-left: var(--space-md);
  border-left: 3px solid var(--wf-sauge);
}

.about__signature {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: var(--space-md);
  color: var(--wf-bleu);
  font-size: var(--text-sm);
}

.about__signature span {
  color: var(--fg2);
}

/* Mot en Great Vibes d'un seul tenant (« soi-même » ne se coupe pas au trait d'union) */
.about__title em {
  white-space: nowrap;
}

/* ==========================================================================
   27. FRISE « NOTRE HISTOIRE » (template-parts/sections/about-timeline.php, animation : assets/js/main.js)
   Le trait va du premier au dernier rond (centres à 50 % / --etapes des bords, quel que soit le nombre d'étapes ; le
   starter supposait 3 étapes) et avance à vitesse constante ; chaque rond grossit quand le trait l'atteint, se colore
   en jaune, puis reprend sa taille.
   ========================================================================== */

.about-timeline__track {
  --wf-frise-pas: 0.55s; /* temps du trait entre deux ronds */
}

@media (min-width: 1024px) {
  .wf-charte .about-timeline__track::before,
  .wf-charte .about-timeline__track::after {
    left: calc(50% / var(--etapes, 3));
  }

  .wf-charte .about-timeline__track::before {
    right: calc(50% / var(--etapes, 3));
  }

  .wf-charte .about-timeline__track::after {
    transition: width calc(var(--wf-frise-pas) * (var(--etapes, 3) - 1)) linear;
  }

  .wf-charte .about-timeline__track.is-animated::after {
    width: calc(100% - 100% / var(--etapes, 3));
  }
}

/* Rond : gris tant que le trait ne l'a pas atteint, puis pulsation (sans le scale(1.2) permanent du starter) */
.wf-charte .about-timeline__step.is-visible .about-timeline__marker-dot {
  transform: none;
}

@keyframes wf-frise-rond {
  0%   { transform: scale(1);   background: var(--bg-muted);  border-color: var(--border); }
  45%  { transform: scale(1.8); background: var(--bg-accent); border-color: var(--bg-accent); }
  100% { transform: scale(1);   background: var(--bg-accent); border-color: var(--bg-accent); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Mobile : frise verticale, le rond pulse à l'apparition de son étape */
  .wf-charte .about-timeline__step.is-visible .about-timeline__marker-dot {
    animation: wf-frise-rond 0.7s ease-out 0.3s both;
  }

  /* Bureau : au passage du trait (rang × temps entre deux ronds) */
  @media (min-width: 1024px) {
    .wf-charte .about-timeline__step.is-visible .about-timeline__marker-dot {
      animation: none;
    }

    .wf-charte .about-timeline__track.is-animated .about-timeline__marker-dot {
      animation: wf-frise-rond 0.7s ease-out calc(var(--i, 0) * var(--wf-frise-pas)) both;
    }
  }
}

/* Section « WellFuz en chiffres » (À propos) : chiffres en jaune sur le bleu canard, comme le surtitre et le bouton */
.wf-charte .numbers .numbers__value {
  color: var(--wf-jaune);
}

/* ==========================================================================
   28. ENGAGEMENTS EMPILÉS (about-guarantees, arg « empile » ; « À propos ») : fond grège et cartes blanches du starter,
   icône au-dessus du titre, titre plus grand que le texte (en petit)
   ========================================================================== */

/* Icône au-dessus dès 768 px ; sur mobile, icône à gauche (cartes plus courtes : 6 cartes empilées) */
@media (min-width: 768px) {
  .wf-charte .about-guarantees--empile .about-guarantees__card {
    flex-direction: column;
    gap: var(--space-md);
  }
}

.wf-charte .about-guarantees--empile .about-guarantees__card-title {
  font-size: 1.25rem; /* --text-h4 de la charte ≈ taille du texte */
  line-height: 1.25;
}

.wf-charte .about-guarantees--empile .about-guarantees__card-desc {
  font-size: var(--text-sm);
}

/* ==========================================================================
   29. « CE QUI NOUS DISTINGUE » EN MISE EN PAGE ÉDITORIALE (about-values, arg « editorial » ; « À propos »)
   Titre et intro à gauche sur la photo en fond + voile bleu canard (panneau de la même hauteur que la liste sur grand écran) ;
   à droite, liste numérotée sans
   cartes : grand numéro en Great Vibes jaune, trait fin entre les points.
   ========================================================================== */

.about-values__editorial {
  display: grid;
  gap: var(--space-2xl);
}

@media (min-width: 1024px) {
  .about-values__editorial {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-3xl);
    align-items: stretch; /* panneau photo de la même hauteur que la liste */
  }
}

.wf-charte .about-values--editorial .about-values__header {
  max-width: none;
  margin: 0;
  text-align: left;
}

/* Panneau : photo en fond + voile bleu canard (texte clair, theme-dark), ou aplat sauge (texte bleu canard) ; contenu en bas */
.wf-charte .about-values--editorial .about-values__header--sauge {
  background: var(--wf-sauge);
}

/* Aplat sauge sur mobile : hauteur du texte (la hauteur minimale ne sert qu'à montrer la photo) */
@media (max-width: 1023px) {
  .wf-charte .about-values--editorial .about-values__header.about-values__header--sauge {
    min-height: 0;
  }
}

.wf-charte .about-values--editorial :is(.about-values__header--photo, .about-values__header--sauge) {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 420px;
  padding: var(--space-2xl) var(--space-xl);
  overflow: hidden;
  border-radius: 24px;
  isolation: isolate;
}

.about-values__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-values__header--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 40, 53, 0.92) 0%, rgba(0, 59, 77, 0.65) 55%, rgba(0, 59, 77, 0.35) 100%);
}

.wf-charte .about-values__header--photo :is(.about-values__title, .lead) {
  color: #fff;
}

.about-values__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-values__point {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--space-md);
  align-items: baseline;
  padding-block: var(--space-xl);
  border-top: 1px solid var(--wf-grege);
}

.about-values__point:last-child {
  border-bottom: 1px solid var(--wf-grege);
}

.about-values__numero {
  color: var(--wf-jaune);
  font-family: 'Great Vibes', cursive;
  font-size: 3.25rem;
  line-height: 1;
}

.wf-charte .about-values--editorial .about-values__card-title {
  margin-bottom: var(--space-xs);
  font-size: 1.35rem;
  line-height: 1.25;
}

.wf-charte .about-values--editorial .about-values__card-desc {
  margin: 0;
  color: var(--fg2);
  font-size: var(--text-sm);
}

/* ==========================================================================
   30. CHIFFRES SUR FOND CLAIR (section numbers, arg « clair » ; « WellFuz en chiffres » d'À propos)
   Fond de page, titre en bleu canard ; cartes rose poudré, chiffre, libellé et description en bleu canard ;
   boutons de la charte (plein bleu canard, secondaire en contour).
   ========================================================================== */

.wf-charte .numbers--clair {
  background: var(--bg);
  --color-text: var(--fg1);
  --color-text-muted: var(--fg2);
  --color-text-subtle: var(--fg2);
  --color-border: var(--wf-grege);
}

.wf-charte .numbers--clair .numbers__title {
  color: var(--wf-bleu);
}

.wf-charte .numbers--clair .numbers__title em {
  color: var(--wf-bleu);
}

.wf-charte .numbers--clair .numbers__card {
  background: var(--wf-rose);
}

.wf-charte .numbers.numbers--clair .numbers__value,
.wf-charte .numbers--clair :is(.numbers__label, .numbers__desc) {
  color: var(--wf-bleu);
}

/* ==========================================================================
   31. « POURQUOI WELLFUZ » SUR PHOTO (about-why, arg « fond_photo » ; « À propos ») : encadré arrondi de la largeur du
   contenu (pas de pleine largeur : un seul bloc photo bord à bord sur la page, le hero ; donc pas de vague), photo en
   fond + voile bleu canard (plus dense à gauche, sous le texte), texte clair (theme-dark), traits verticaux jaunes.
   ========================================================================== */

.wf-charte .about-why--photo {
  background: var(--bg);
}

.about-why__encadre {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--space-2xl) var(--space-lg);
  border-radius: 24px;
  background: var(--wf-bleu);
}

@media (min-width: 1024px) {
  .about-why__encadre {
    padding: var(--space-3xl) var(--space-3xl);
  }
}

.about-why__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

.about-why__encadre::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 40, 53, 0.82);
}

@media (min-width: 1024px) {
  .about-why__encadre::before {
    background: linear-gradient(to right, rgba(0, 40, 53, 0.94) 0%, rgba(0, 59, 77, 0.85) 50%, rgba(0, 59, 77, 0.35) 100%);
  }

  .wf-charte .about-why--photo .about-why__content {
    flex: 0 1 62%;
  }
}

.wf-charte .about-why--photo :is(.about-why__title, .about-why__label) {
  color: #fff;
}

.wf-charte .about-why--photo .about-why__text {
  color: rgba(255, 255, 255, 0.85);
}

.wf-charte .about-why--photo .about-why__block {
  border-left-color: var(--wf-jaune);
}

/* Cartes des chiffres avec photo (4e valeur de « cards ») : image en fond + voile bleu canard, plus dense en bas
   sous le texte ; chiffre en jaune, texte en blanc */
.wf-charte .numbers__card--photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--wf-bleu);
}

.numbers__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.numbers__card--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 40, 53, 0.95) 0%, rgba(0, 59, 77, 0.8) 55%, rgba(0, 59, 77, 0.55) 100%);
}

.wf-charte .numbers .numbers__card--photo .numbers__value {
  color: var(--wf-jaune);
}

.wf-charte .numbers .numbers__card--photo :is(.numbers__label, .numbers__desc) {
  color: #fff;
}

/* Chiffres sur fond clair : en-tête centré (comme les boutons), grille de 2 puis 4 cartes de même largeur */
.wf-charte .numbers--clair .numbers__header {
  text-align: center;
}

@media (min-width: 768px) {
  .wf-charte .numbers--clair .numbers__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .wf-charte .numbers--clair .numbers__card,
  .wf-charte .numbers--clair .numbers__card:last-child {
    width: auto;
  }
}

@media (min-width: 1200px) {
  .wf-charte .numbers--clair .numbers__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .wf-charte .numbers--clair .numbers__value {
    font-size: clamp(2.75rem, 3.6vw, 3.75rem);
  }
}

/* ==========================================================================
   32. À PROPOS : TEXTES PLUS LISIBLES SUR GRAND ÉCRAN (13 px par défaut dans la charte, .about__text, .about-why__text…)
   Mot de la fondatrice en grand (cœur de la page) ; « Pourquoi » et « Ce qui nous distingue » à 15 px.
   ========================================================================== */

@media (min-width: 1024px) {
  .wf-charte .about__citation .about__text {
    font-size: 1.0625rem;
    line-height: 1.75;
  }

  .wf-charte .about-why--photo .about-why__text,
  .wf-charte .about-values--editorial .about-values__card-desc {
    font-size: 0.9375rem;
    line-height: 1.7;
  }
}

/* « Trouver mon sport » : encart « Planning des cours » (inc/planning.php, wf_menu_planning() ; assets/js/mega-menu.js,
   buildPlanningBlock()) en carte bleu canard sous « Choisissez votre formule » (colonne .mega-gauche-pile, 2026-10-27 :
   le bandeau au milieu des colonnes repoussait la 3e colonne) */
.mega-gauche-pile {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

.mega-planning {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs) var(--space-sm);
  align-items: center;
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border-radius: 16px;
  background: var(--wf-bleu);
  color: #fff;
}

.mega-planning-icone {
  color: var(--wf-jaune);
}

/* Titre à côté de l'icône, texte et actions en pleine largeur de la carte */
.mega-planning-texte {
  display: contents;
}

.mega-planning-titre {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  line-height: 1.2;
}

.mega-planning-desc {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.mega-planning-desc {
  grid-column: 1 / -1;
}

.mega-planning-actions {
  grid-column: 1 / -1;
  margin-top: var(--space-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.mega-planning-actions .btn {
  width: 100%;
  justify-content: center;
  padding: 0.6em 1em;
  font-size: var(--text-sm);
  white-space: nowrap;
}

.mega-planning-pdf {
  color: #fff;
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ==========================================================================
   33. MENU MOBILE (≤ 1024 px, accordéon) : les encarts du mega menu (mega-promo, mega-aide, mega-atelier, mega-planning)
   gardaient leurs styles de bureau (aplats gris, hauteurs fixes, grille) dans la liste.
   - Soins, Cours, Louer un cabinet : encarts promo et aide masqués (doublons : « Tous les soins / cours / cabinets »
     termine la liste) ;
   - Le centre : encarts promo (Qui sommes-nous, Devenir praticien) en simples liens, seuls accès de la rubrique ;
   - atelier à venir et planning des cours : simples liens (« Atelier à venir : … »), sans texte ni sous-lien.
   En-tête : fond blanc quand le menu est ouvert (sinon transparent sur les en-têtes sombres).
   ========================================================================== */

@media (max-width: 1119px) {
  body.menu-open .header-main {
    background: var(--bg);
  }

  .nav-menu > li:is(.mega-besoins, .mega-sports, .mega-cabinets) .sub-menu > li:is([data-mega], .mega-promo, .mega-aide) {
    display: none;
  }

  .nav-menu .sub-menu > li:is(.mega-promo, .mega-aide, .mega-atelier, .mega-planning) {
    display: block;
    min-height: 0;
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
  }

  .nav-menu .sub-menu > li:is(.mega-promo, .mega-aide, .mega-atelier, .mega-planning) > a {
    padding: 0;
    background: none;
    color: var(--fg2);
    font-size: 14px;
  }

  .nav-menu .sub-menu > li:is(.mega-promo, .mega-aide, .mega-atelier, .mega-planning) :is(.menu-item-desc, .sub-menu) {
    display: none !important;
  }

  .nav-menu .sub-menu > li:is(.mega-atelier-tous, .mega-planning-pdf) {
    display: none;
  }

  .nav-menu .sub-menu > li.mega-atelier > a::before {
    content: "Atelier à venir : ";
  }
}

/* Entrée « Contact » du menu (inc/connexion.php) : mobile seulement, l'en-tête a son bouton sur ordinateur */
@media (min-width: 1120px) {
  .nav-menu > li.menu-item-contact-mobile {
    display: none;
  }
}

/* Menu mobile, code couleur des univers (2026-11-09, demande d'Anaïs) : le trait sous le libellé du bureau n'apparaît
   qu'au survol ; en mobile, barre verticale toujours visible à gauche de « Trouver mon soin / sport / cabinet »
   (rose, jaune, sauge : --wf-univers de la section 16), fond teinté quand la rubrique est ouverte. */
@media (max-width: 1119px) {
  .wf-charte .nav-menu > li:is(.mega-besoins, .mega-sports, .mega-cabinets) > a::after {
    top: 14px;
    bottom: 14px;
    left: 0;
    right: auto;
    width: 4px;
    height: auto;
    scale: 1 1;
  }

  .wf-charte .nav-menu > li:is(.mega-besoins, .mega-sports, .mega-cabinets):is(.is-expanded, :has(> .sub-menu.is-open)) {
    border-radius: 8px;
    background: color-mix(in srgb, var(--wf-univers) 18%, #ffffff);
  }
}

/* Menu mobile, raccourcis en tête de rubrique (2026-11-09, demande d'Anaïs) : « Tous les soins / cours / cabinets »,
   « Planning des cours » et « Offrir une carte cadeau » remontent en haut de leur sous-menu, en aplat de la couleur
   pleine de l'univers (rose, jaune, sauge ; carte cadeau en rose), texte bleu canard en demi-gras. */
@media (max-width: 1119px) {
  .wf-charte .nav-menu > li > .sub-menu.is-open {
    display: flex;
    flex-direction: column;
  }

  .wf-charte .nav-menu > li > .sub-menu > li:is(.mega-tous, .mega-planning, .mega-carte-cadeau) {
    order: -1;
    margin-bottom: 6px;
    padding: 0;
    border-radius: 8px;
    background: var(--wf-univers, var(--wf-rose));
  }

  .wf-charte .nav-menu > li > .sub-menu > li.mega-carte-cadeau {
    --wf-univers: var(--wf-rose);
  }

  .wf-charte .nav-menu > li > .sub-menu > li:is(.mega-tous, .mega-planning, .mega-carte-cadeau) > a {
    display: block;
    padding: 10px 14px;
    color: var(--wf-bleu);
    font-size: 15px;
    font-weight: var(--fw-semi);
  }

  .wf-charte .nav-menu > li > .sub-menu > li.mega-carte-cadeau > .menu-item-desc {
    display: block;
    padding: 0 14px 10px;
    margin-top: -6px;
    color: var(--wf-bleu);
    font-size: 13px;
  }

  .wf-charte .nav-menu > li > .sub-menu > li.mega-carte-cadeau > .sub-menu {
    display: none !important;
  }

  /* Atelier à venir (« Atelier à venir : … ») : en demi-gras, bleu plein, pour ressortir dans la liste */
  .wf-charte .nav-menu .sub-menu > li.mega-atelier > a {
    color: var(--wf-bleu);
    font-weight: var(--fw-semi);
  }
}


/* ==========================================================================
   34. FICHE PRATICIEN : colonne de droite en aplat de la couleur de l'univers, comme « Comment se passe une séance » des
   fiches soin (section 20) : texte en bleu canard plein (le bleu atténué passe sous 4,5:1 sur rose). Dedans, encarts
   blancs : qualifications en frise (année | intitulé + organisme, wf_formation_ligne()) et infos pratiques à icônes ;
   besoins en pastilles blanches fléchées directement sur la couleur ; bouton « Prendre rendez-vous » vers le module de
   l'en-tête. Conformité en carte « Bon à savoir » dans « Ses soins » (section 22). Toutes les fiches de l'équipe
   (content-praticien.php) : rose (praticiens, profils mixtes), jaune (coachs), selon l'univers de la page.
   ========================================================================== */

.wf-charte .praticien__panneau {
  gap: var(--space-xl);
  padding: var(--space-xl) var(--space-lg);
  border-radius: calc(var(--radius) * 2);
  background: var(--wf-univers, var(--wf-rose));
  color: var(--wf-bleu);
}

.wf-charte .praticien__panneau h2 {
  margin-bottom: var(--space-md);
  font-size: var(--text-h3);
  color: var(--wf-bleu);
}

/* Encarts blancs (frise, infos pratiques) */
.wf-charte .praticien__panneau :is(.wf-frise, .wf-pratiques) {
  margin: 0;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 4px 12px rgba(0, 37, 51, 0.06);
  list-style: none;
}

/* Frise des qualifications : une ligne par formation, filet entre les lignes (sans années depuis le 2026-11-09) */
.wf-frise__ligne {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
}

.wf-frise__ligne + .wf-frise__ligne {
  border-top: 1px solid var(--border);
}

.wf-frise__titre,
.wf-frise__organisme {
  display: block;
}

.wf-frise__titre {
  color: var(--wf-bleu);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.wf-frise__organisme {
  margin-top: 0.2em;
  color: var(--fg2);
  font-size: var(--text-xs);
  line-height: 1.4;
}

/* Infos pratiques : icône dans une pastille de la couleur de l'univers, intitulé en petites capitales */
.wf-pratiques__ligne {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
}

.wf-pratiques__ligne + .wf-pratiques__ligne {
  border-top: 1px solid var(--border);
}

.wf-pratiques__icone {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--wf-univers, var(--wf-rose));
  color: var(--wf-bleu);
}

.wf-pratiques__libelle,
.wf-pratiques__valeur {
  display: block;
}

.wf-pratiques__libelle {
  color: var(--fg2);
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wf-pratiques__valeur {
  color: var(--wf-bleu);
  font-size: var(--text-sm);
}

/* Besoins : pastilles blanches fléchées */
.wf-charte .praticien__panneau .soin-besoins {
  margin-top: 0;
}

.wf-charte .praticien__panneau .soin-besoins__link {
  border-color: transparent;
  background: var(--bg);
  color: var(--wf-bleu);
  text-decoration: none;
}

.wf-charte .praticien__panneau .soin-besoins__link::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.5em;
  transition: transform 0.2s ease;
}

.wf-charte .praticien__panneau .soin-besoins__link:hover,
.wf-charte .praticien__panneau .soin-besoins__link:focus-visible {
  border-color: var(--wf-bleu);
}

.wf-charte .praticien__panneau .soin-besoins__link:hover::after {
  transform: translateX(3px);
}

/* Bouton de réservation : pleine largeur, bleu canard (sur rose, le bouton de l'univers disparaîtrait) */
.praticien__panneau-cta {
  margin: 0;
}

.wf-charte .praticien__panneau-cta .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  border-color: var(--wf-bleu);
  background: var(--wf-bleu);
  color: var(--fg-inverse);
}

@media (prefers-reduced-motion: reduce) {
  .wf-charte .praticien__panneau .soin-besoins__link::after {
    transition: none;
  }
}


/* ==========================================================================
   35. FICHE PRATICIEN / COACH : EN-TÊTE PORTRAIT ROND (.wf-hero--portrait, content-praticien.php)
   Composition de « Qui sommes-nous » (accueil), plus décalée : portrait dans un rond parfait en haut à gauche, encart
   blanc (badge Amelia, nom, sous-titre, jours) décalé en bas à droite, posé sur le bord du cercle (il ne couvre pas le
   visage). Composition centrée dans la colonne de gauche ; module de réservation à droite (en dessous sous 1024px).
   Réglages : --rond (diamètre), --encart (largeur de l'encart), --decalage-x / --decalage-y (position de l'encart,
   en part du diamètre). Jours en ronds (L M M J V S D) : bleu canard plein = présent ; phrase complète pour les
   lecteurs d'écran.
   ========================================================================== */

.wf-hero--portrait .wf-hero__intro {
  align-items: center;
}

.praticien__composition {
  --rond: min(84vw, 380px);
  --decalage-x: 0.12;             /* mobile : encart presque pleine largeur, les 7 jours sur une ligne */
  --encart: min(calc(100vw - 2 * clamp(1rem, 5vw, 4rem) - var(--rond) * var(--decalage-x)), 22rem);
  --decalage-y: 0.8;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: calc(var(--rond) * var(--decalage-x) + var(--encart));
}

.praticien__rond {
  width: var(--rond);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--bg);
}

.praticien__rond-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  /* Léger zoom vers le visage : harmonise les portraits à mi-corps et les portraits serrés */
  transform: scale(1.3);
  transform-origin: 50% 22%;
}

.praticien__identite {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: var(--encart);
  margin-top: calc(var(--rond) * (var(--decalage-y) - 1));
  margin-left: calc(var(--rond) * var(--decalage-x));
  padding: var(--space-md);
  border-radius: calc(var(--radius) * 2);
  background: var(--bg);
  box-shadow: 0 20px 40px rgba(0, 37, 51, 0.12);
}

.wf-hero--portrait .praticien__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: 0 0 var(--space-sm);
  padding: 0.4em 0.9em;
}

.wf-hero--portrait .soin-hero__title {
  margin: 0;
  font-size: var(--text-h2);
}

.wf-hero--portrait .praticien__identite .lead {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
}

/* Jours en ronds */
.wf-hero--portrait .wf-hero__jours {
  display: block;
  margin-top: var(--space-lg);
}

.wf-hero__jours-titre {
  margin: 0 0 var(--space-xs);
  color: var(--fg2);
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wf-jours {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wf-jours__jour {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;               /* rond : largeur = hauteur */
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--fg2);
  font-size: 13px;
  font-weight: var(--fw-semi);
  line-height: 1;
  opacity: 0.55;
}

.wf-jours__jour--present {
  border-color: var(--wf-bleu);
  background: var(--wf-bleu);
  color: var(--fg-inverse);
  opacity: 1;
}

/* Grand écran : rond plus grand, encart plus large et plus décalé vers la droite */
@media (min-width: 1024px) {
  .praticien__composition {
    --rond: clamp(400px, 62vh, 560px);
    --encart: min(29rem, 50vw - 233px);   /* nom courant sur une ligne ; plus étroit sous 1440px pour ne pas toucher le module */
    --decalage-x: 0.39;           /* encart poussé à droite, à ~24px du module */
    --decalage-y: 0.7;            /* encart remonté sur la photo */
    margin-left: -48px;           /* photo poussée à gauche, dans la marge de la page */
  }

  /* Composition calée à gauche de sa colonne (plus centrée) */
  .wf-hero--portrait .wf-hero__intro {
    align-items: flex-start;
  }

  /* Encart poussé à droite : 144px (réglage validé le 2026-10-27) quand la place le permet, moins sur les écrans plus
     étroits pour rester à ~24px du module de réservation (jamais dessus) : 0 à 1440px, 144px dès ~1730px */
  .praticien__identite {
    width: var(--encart);
    padding: var(--space-lg);
    translate: clamp(0px, 50vw - 722px, 144px) 0;
  }

  /* Nom un peu plus petit dans l'encart affiné : un nom courant tient sur une ligne */
  .wf-hero--portrait .praticien__identite .soin-hero__title {
    font-size: clamp(32px, 3.4vw, 48px);
  }

  /* Composition calée en bas de la rangée, module de réservation en haut */
  .wf-hero--portrait .wf-hero__grille {
    align-items: flex-end;
  }

  .wf-hero--portrait .wf-hero__reserver {
    align-self: flex-start;
  }
}


/* ==========================================================================
   36. FICHE COACH : conformité en carte « Bon à savoir » (1/4, à gauche) et formules (3/4) sur une même rangée
   (.praticien__formules, content-praticien.php) ; l'une sous l'autre en dessous de 1024px
   ========================================================================== */

.praticien__formules {
  display: grid;
  gap: var(--space-lg);
}

.praticien__formules > * {
  min-width: 0;
  margin: 0;
}

/* Grand écran : carte à gauche (1/4), formules à droite (3/4), pour casser l'alignement de la page ; l'ordre du code
   (formules d'abord) reste celui de la lecture sur mobile et pour les lecteurs d'écran */
@media (min-width: 1024px) {
  .praticien__formules {
    grid-template-columns: 1fr 3fr;
    align-items: stretch;
  }

  .praticien__formules > .wf-carte--avertissement {
    order: -1;
  }
}


/* ==========================================================================
   37. FICHE PRATICIEN SANS SERVICE AMELIA (Doctolib ou contact) : carte blanche « Prise de rendez-vous » (même carte que
   « sur demande », .wf-sur-demande) centrée verticalement et horizontalement dans la colonne du module
   ========================================================================== */

.wf-hero__reserver--rdv {
  display: flex;
  justify-content: center;
}

.wf-hero__reserver--rdv .wf-sur-demande {
  width: 100%;
  max-width: 30rem;
  text-align: center;
}

.wf-hero__reserver--rdv .wf-sur-demande__cta {
  justify-content: center;
}

.wf-sur-demande__aide {
  margin-top: var(--space-md);
}

@media (min-width: 1024px) {
  .wf-hero--portrait .wf-hero__reserver.wf-hero__reserver--rdv {
    align-self: center;
  }
}

/* Conformité en pied de la carte « Prise de rendez-vous » (praticien sans soin en ligne), sous un filet */
.wf-sur-demande__conformite {
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
  color: var(--fg2);
  font-size: var(--text-xs);
  line-height: 1.5;
}


/* ==========================================================================
   38. MENU PRINCIPAL (6 entrées, dont « L’équipe & le centre », 2026-10-27) : intitulés sur une ligne et logo conservé ;
   resserré entre 1120 et 1279px ; menu burger sous 1120px (mega-menu.js BREAKPOINT, mega-menu.css) : en dessous, le
   bouton Contact sortait de l'écran
   ========================================================================== */

@media (min-width: 1120px) {
  .nav-menu > li > a {
    white-space: nowrap;
  }

  /* Colonnes latérales jamais plus étroites que le logo et le bouton Contact (sinon le logo s'écrase à 0) */
  .header-main .header-inner {
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  }

  .site-logo--wellfuz .site-logo__img {
    max-width: none;
  }
}

@media (min-width: 1120px) and (max-width: 1279px) {
  .header-main .header-inner {
    gap: 12px;
  }

  .site-logo--wellfuz .site-logo__img {
    width: 88px;
  }

  .nav-menu > li > a {
    padding-inline: 7px;
    font-size: 13.5px;
  }
}


/* ==========================================================================
   39. FENÊTRE « RENDEZ-VOUS D'ORIENTATION & VISITE » (inc/orientation.php, assets/js/orientation.js, 2026-10-27) :
   <dialog> ouvert par tout lien en #rdv-orientation ; sans habillage : le module Amelia seul (iframe vers la page
   ?wf-module=orientation, fond transparent) posé sur le site légèrement flouté sous un voile noir (comme les ateliers), bouton de fermeture au-dessus
   ========================================================================== */

.wf-popin {
  inset: 0;
  margin: auto;
  width: min(808px, 100vw); /* module 760px + marges de son ombre (page du module) */
  max-width: none;
  max-height: 100dvh;
  padding: 40px 0 0; /* place du bouton de fermeture */
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: auto;
  overscroll-behavior: contain;
}

.wf-popin::backdrop {
  /* Même voile que les fenêtres Amelia des ateliers (noir 50 %), avec un léger flou en plus */
  background: rgb(0 0 0 / 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.wf-popin__fermer {
  position: absolute;
  top: 0;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #fff; /* lisible sur le voile noir */
  color: var(--wf-bleu);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgb(0 59 77 / 0.25);
}

.wf-popin__fermer:hover {
  background: var(--wf-jaune);
  color: var(--wf-bleu);
}

.wf-popin__fermer:focus-visible {
  outline: 2px solid var(--wf-bleu);
  outline-offset: 3px;
}

.wf-popin__chargement {
  margin: 0;
  padding: 48px 16px;
  text-align: center;
  color: var(--wf-bleu);
}

.wf-popin__iframe {
  display: block;
  width: 100%;
  height: 600px; /* remplacée par la hauteur du contenu (orientation.js) */
  border: 0;
  background: transparent;
  color-scheme: normal;
}

/* Page du module (contenu de l'iframe) : rien autour du module, fond transparent */
html:has(> .wf-module-page),
.wf-module-page {
  margin: 0;
  padding: 0;
  background: transparent !important;
}

.wf-module-page__module {
  padding: 12px 24px 32px; /* l'ombre du module Amelia s'estompe avant les bords de l'iframe */
}

@media (max-width: 600px) {
  .wf-popin__fermer {
    right: 12px;
  }

  .wf-module-page__module {
    padding-inline: 12px;
  }
}

/* Marge d'Amelia autour de son module (100px en haut et en bas) : inutile dans la fenêtre */
.wf-module-page .amelia-v2-booking .am-fs__wrapper {
  margin-block: 0 !important;
}


/* ==========================================================================
   40. MICRO-COPY SOUS UN BOUTON (wf_bouton(), inc/charte.php, 2026-10-27) : « gratuit et sans engagement » sous
   « Planifier ma visite » ; bouton et texte empilés, rangée de boutons alignée en haut (le texte ne décale pas le voisin)
   ========================================================================== */

.wf-cta-micro {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.wf-cta-micro__texte {
  font-family: 'Great Vibes', cursive; /* 2e police de la charte (écriture manuscrite), lisible à partir de ~20px */
  font-size: 1.25rem;
  line-height: 1.1;
}

@media (min-width: 768px) {
  :is(.section__ctas, .hero__ctas, .cta__buttons):has(.wf-cta-micro) {
    align-items: flex-start;
  }
}

/* Mobile : boutons empilés pleine largeur, le bouton à micro-copy aussi */
@media (max-width: 767px) {
  .section__ctas > .wf-cta-micro,
  .section__ctas > .wf-cta-micro > .btn {
    width: 100%;
  }
}

/* Hero sur photo assombrie (À propos) : texte clair */
.hero .wf-cta-micro__texte {
  color: #fff;
}


/* ==========================================================================
   41. INDICATION GPS SOUS L'ADRESSE (wf_centre_gps(), inc/amelia-data.php, 2026-10-27) : pied de page, coordonnées
   ========================================================================== */

.footer__address .footer__gps,
.contact__item-note {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  line-height: 1.4;
  opacity: 0.8;
}

/* ==========================================================================
   Blog : article (2026-11-04)
   ========================================================================== */

/* Mobile et tablette : l'article d'abord, puis l'autrice et l'encart de l'accueil (le starter mettait la colonne avant) */
@media (max-width: 1023px) {
  .wf-charte .single-content__main { order: 1; }
  .wf-charte .single-content__sidebar { order: 2; }
}

/* Encart « Prendre soin de vous » : boutons à la ligne sur petit écran */
.wf-charte .single-content__cta-buttons {
  flex-wrap: wrap;
}

/* ==========================================================================
   NEWSLETTER DU PIED DE PAGE (inc/newsletter.php, 2026-11-06) : carte jaune soleil posée sur le bleu, même geste que la
   carte rose « Venez découvrir le centre » (coins de 28 px, ombre douce) ; jaune = accent de la charte sur fond bleu,
   distinct du rose juste au-dessus ; texte et bouton bleu canard plein (6,6:1 sur jaune) ; empilée sur mobile
   ========================================================================== */

.wf-charte .footer__newsletter {
  --color-text: var(--wf-bleu);
  --color-text-muted: var(--wf-bleu);
  display: grid;
  gap: var(--space-lg) var(--space-2xl);
  align-items: center;
  max-width: 1120px; /* même largeur que la carte rose « Venez découvrir le centre » (.cta__inner--image) */
  margin: 0 auto var(--space-3xl);
  padding: var(--space-xl) var(--space-lg);
  border-radius: 28px;
  background: var(--wf-jaune);
  color: var(--wf-bleu);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18);
}

.wf-charte .footer__newsletter-intro {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.wf-charte .footer__newsletter-icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--wf-bleu);
}

.wf-charte .footer__newsletter-titre {
  margin: 0 0 var(--space-xs);
  color: var(--wf-bleu);
  font-size: var(--text-h3);
  line-height: 1.15;
}

.wf-charte .footer__newsletter-texte {
  margin: 0;
  color: var(--wf-bleu);
  text-wrap: pretty; /* pas de mot seul en dernière ligne (« mois. ») */
}

.wf-charte .footer__newsletter-form {
  display: grid;
  gap: var(--space-sm);
}

.wf-charte .footer__newsletter-mentions {
  margin: 0;
  color: var(--wf-bleu);
  font-size: var(--text-sm);
}

.wf-charte .footer__newsletter-mentions a {
  color: var(--wf-bleu);
  text-decoration: underline;
}

.wf-charte .footer__newsletter-message {
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--wf-bleu);
  font-size: var(--text-sm);
}

.wf-charte .footer__newsletter-champ {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.wf-charte .footer__newsletter-champ input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 52px;
  padding: 0 var(--space-md);
  border: 1px solid rgba(0, 59, 77, 0.25);
  border-radius: 999px;
  background: #ffffff;
  color: var(--wf-bleu);
  font: inherit;
}

.wf-charte .footer__newsletter-champ input[type="email"]::placeholder {
  color: #45707e; /* 5,4:1 sur blanc */
}

/* Focus : contour bleu canard (le jaune du pied de page ne se verrait pas sur la carte) */
.wf-charte .footer__newsletter :focus-visible {
  outline: 2px solid var(--wf-bleu);
  outline-offset: 2px;
}

/* Bouton bleu canard sur le jaune, y compris sur les pages à univers (couleur de l'univers illisible sur jaune) */
.wf-charte .footer .footer__newsletter .btn.btn-primary {
  min-height: 52px;
  background: var(--wf-bleu);
  border-color: var(--wf-bleu);
  color: #ffffff;
}

.wf-charte .footer .footer__newsletter .btn.btn-primary:hover {
  background: #0b5068;
  border-color: #0b5068;
  color: #ffffff;
}

/* Piège à robots : hors écran (pas display:none, que certains robots repèrent) */
.footer__newsletter-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (min-width: 900px) {
  .wf-charte .footer__newsletter {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    padding: var(--space-2xl) var(--space-2xl);
  }
}

/* Formulaire de contact (2026-11-06) : cases RGPD et newsletter dans le même bloc, rapprochées ; message sur 3 lignes
   (agrandissable à la main) pour que la case newsletter n'allonge pas le formulaire */
.contact__field--checkbox {
  gap: var(--space-sm);
  margin-top: 0;
}

.contact__textarea {
  min-height: 96px;
}

/* FAQ (2026-11-10) : chaque question est un h3 dans la zone cliquable de l'accordéon (plan de la page, navigation par
   titres) ; il garde exactement l'aspect du texte de la question (template-parts/sections/faq.php, fiches soin et cours). */
.faq__question .faq__question-titre,
.wf-charte .faq__question .faq__question-titre {
  margin: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  text-transform: inherit;
}

/* SEO (2026-11-10) : éléments « inclus » en <p> (au lieu de h3) et titres des cartes de catalogue en h3 (au lieu de h2) :
   même aspect qu'avec l'ancienne balise. */
.wf-charte p.about-guarantees__card-title {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: var(--lh-heading);
}

.wf-charte h3.wf-carte__titre {
  line-height: 1.08;
  color: var(--fg1);
}

/* Pied de page (2026-11-10) : intitulés des colonnes (h3) et « On reste en contact ? » (h2) en <p> : pas des titres
   de la page, même aspect. */
p.footer__title {
  line-height: var(--lh-heading);
}

.wf-charte p.footer__title,
.wf-charte p.footer__newsletter-titre {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* « Venez découvrir le centre » (bandeau commun à toutes les pages, 2026-11-10) : <p> au lieu de h2 (pas un titre de la
   page), même aspect qu'un h2 de la charte, « centre » en écriture manuscrite. */
p.cta__title {
  font-size: var(--text-h2);
  line-height: 1.08;
}

.wf-charte p.cta__title em {
  font-family: 'Great Vibes', cursive;
  font-size: 1.4em;
  font-style: normal;
  font-weight: 400;
  line-height: 0;
  letter-spacing: 0;
  color: inherit;
  padding-inline: 0.04em;
}

.wf-charte p.cta__title:has(em) {
  padding-bottom: 0.35em;
}

/* Accueil (SEO, 2026-11-10) : copie du défilement des cours et intitulé « Un centre qui vit » en <p> au lieu de h3,
   même aspect qu'un h3 de la charte. */
p.cases__card-title,
p.comparison__preuves-titre {
  line-height: var(--lh-heading);
}

.wf-charte p.cases__card-title,
.wf-charte p.comparison__preuves-titre {
  font-family: var(--font-heading);
  letter-spacing: -0.015em;
}

.wf-charte p.comparison__preuves-titre {
  font-weight: 400;
}

/* L'équipe (SEO, 2026-11-10) : sous-titre du h1, porteur du mot-clé, à la taille d'un intertitre */
.wf-equipe__titre-sous {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--text-h4);
  line-height: var(--lh-heading);
  letter-spacing: 0;
  color: var(--color-text-muted, currentColor);
}

/* Fiches (SEO, 2026-11-10) : cartes « pourraient vous plaire » en <p> au lieu de h3, même aspect. */
.wf-charte p.wf-carte__titre {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: var(--fg1);
}

/* Fiche Wellfuzien (SEO, 2026-11-10) : métier et ville dans le h1, sous le nom, au style de l'ancien sous-titre (.lead) */
.soin-hero__title .praticien__metier {
  display: block;
  font-family: var(--font-main);
  letter-spacing: normal;
}