/*
Theme Name: Cœur de Soi
Author: Chamades
Description: Thème bloc (FSE) du réseau de cabinets partagés Cœur de Soi. Présentation uniquement : la charte vit dans theme.json, la logique métier dans le plugin coeur-de-soi-core.
Version: 0.7.2
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coeur-de-soi
*/

/* Reset accessible : pas de suppression d'outline, respect des préférences utilisateur. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
/* Ancres : l'en-tête est collant partout (voir plus bas), on réserve sa hauteur. */
html { scroll-padding-top: 6rem; } /* en-tête collant avec logo : ~88 px */
body { margin: 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
:where(p, li, figcaption) { overflow-wrap: break-word; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Focus visible : anneau 3 px bleu nuit (10:1 sur fond), décalé pour rester lisible sur fonds colorés. */
:focus-visible {
	outline: 3px solid var(--wp--preset--color--primaire);
	outline-offset: 3px;
	border-radius: 2px;
}
.wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--texte);
	box-shadow: 0 0 0 6px var(--wp--preset--color--fond);
}

/* Lien d'évitement : visible uniquement au focus. */
.cds-skip-link {
	position: absolute;
	left: 1rem;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--primaire);
	color: var(--wp--preset--color--fond);
	font-weight: 600;
	border-radius: 0 0 10px 10px;
	transform: translateY(-120%);
}
.cds-skip-link:focus { transform: translateY(0); color: var(--wp--preset--color--fond); }

/* Texte réservé aux technologies d'assistance (WordPress ne charge pas toujours sa propre règle). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Cible du lien d'évitement : pas d'anneau parasite sur le conteneur principal. */
main:focus { outline: none; }

/* Éléments communs : arrondi doux constant, cibles tactiles >= 44 px. */
.wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
/* Boutons centrés par défaut sur toutes les pages ; un alignement choisi dans l'éditeur (classe `is-content-justification-*`) prime. */
.wp-block-buttons:not([class*="is-content-justification"]) { justify-content: center; }
.wp-block-image img, .wp-block-post-featured-image img { border-radius: 10px; }

/* ===== Accueil et « Nous rejoindre » (patterns coeur-de-soi/accueil et coeur-de-soi/rejoindre) ===== */

/* Sections pleine largeur : gouttière latérale garantie même si WordPress n'ajoute pas le padding racine. */
.cds-section { padding-inline: var(--wp--preset--spacing--30); }

/* Hero : lisible sans image, dégradé doux gris clair -> blanc. */
.cds-hero { background-image: linear-gradient(160deg, var(--wp--preset--color--fond-alt) 0%, var(--wp--preset--color--fond) 100%); }
.cds-hero.has-fond-alt-background-color { background-color: var(--wp--preset--color--fond-alt); }
.cds-hero h1 { max-width: 22ch; text-wrap: balance; }
.cds-hero--page h1 { max-width: none; }
.cds-actions { gap: 0.75rem 1rem; }

/* Bouton secondaire (contour) : couleurs explicites, contrastes >= 4,5:1 sur fond et fond-alt. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primaire);
	border: 2px solid var(--wp--preset--color--primaire);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--primaire);
	color: var(--wp--preset--color--fond);
}

/* Visuel décoratif : groupe vide, aplat doux tant qu'aucune image n'est fournie. */
.cds-visuel {
	min-height: 12rem;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--wp--preset--color--bordure) 0%, var(--wp--preset--color--fond-alt) 60%, var(--wp--preset--color--fond) 100%);
}
@media (min-width: 782px) { .cds-visuel { min-height: 20rem; } }

/* Section « Le lieu » (DEV-240) : texte seul, centré, sur une largeur de lecture confortable. */
.cds-lieu { text-align: center; }
.cds-lieu__contenu { max-width: 44rem; margin-inline: auto; }

/* Avantages : cartes simples sur fond gris clair. */
.cds-avantage {
	background: #fff;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 10px;
	padding: 1.5rem;
}
.cds-avantage h3 { margin-top: 0; }
.cds-avantage p:last-child { margin-bottom: 0; }

/* Bloc tarif. */
.cds-tarif {
	background: #fff;
	border: 2px solid var(--wp--preset--color--primaire);
	border-radius: 10px;
	padding: 2rem 1.5rem;
	max-width: 32rem;
	margin-inline: auto;
	box-shadow: var(--wp--preset--shadow--douce);
}
.cds-tarif__montant {
	margin-top: 0;
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--tres-grand);
	line-height: 1.1;
	color: var(--wp--preset--color--primaire);
}

/* Liste des salles (shortcode [cds_salles_statuts]). */
.cds-salles {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.cds-salles-vide { color: var(--wp--preset--color--texte-secondaire); }
/* Carte de salle : image, titre, description, superficie, équipements, disponibilité. */
.cds-carte-salle {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	background: #fff;
	color: var(--wp--preset--color--texte);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 12px;
	box-shadow: 0 2px 6px rgba(23, 37, 42, 0.06), 0 10px 24px rgba(23, 37, 42, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cds-carte-salle:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(23, 37, 42, 0.08), 0 16px 32px rgba(23, 37, 42, 0.1); }
.cds-carte-salle__media {
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, var(--wp--preset--color--bleu-ciel) 0%, var(--wp--preset--color--fond-alt) 70%);
	border-bottom: 4px solid var(--cds-statut-couleur, var(--wp--preset--color--bordure));
}
.cds-carte-salle__image { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
.cds-carte-salle__corps { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; padding: 1.25rem 1.5rem 1.5rem; }
.cds-carte-salle__corps > * { margin: 0; }
.cds-carte-salle__titre { font-size: var(--wp--preset--font-size--moyen); color: var(--wp--preset--color--primaire); }
.cds-carte-salle__description { color: var(--wp--preset--color--texte); }
.cds-carte-salle__superficie,
.cds-carte-salle__libelle { font-size: var(--wp--preset--font-size--petit); color: var(--wp--preset--color--texte-secondaire); }
.cds-carte-salle__libelle { font-weight: 600; }
.cds-carte-salle__superficie .cds-carte-salle__libelle { font-size: inherit; }
.cds-carte-salle__equipements { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; list-style: none; }
.cds-carte-salle__equipements li {
	margin: 0;
	padding: 0.2rem 0.65rem;
	font-size: var(--wp--preset--font-size--petit);
	border-radius: 999px;
	background: var(--wp--preset--color--fond-alt);
	border: 1px solid var(--wp--preset--color--bordure);
}
.cds-carte-salle__statut { margin-top: auto !important; align-self: flex-start; }
.cds-carte-salle__note { font-size: var(--wp--preset--font-size--petit); color: var(--wp--preset--color--texte-secondaire); }
.cds-carte-salle--disponible { --cds-statut-couleur: #2F5A3E; }
.cds-carte-salle--quelques_jours,
.cds-carte-salle--un_jour { --cds-statut-couleur: #6E4A17; }
.cds-carte-salle--complete { --cds-statut-couleur: #4B4F49; }
.cds-carte-salle__titre a { color: inherit; text-decoration: none; }
.cds-carte-salle__titre a:hover, .cds-carte-salle__titre a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
.cds-carte-salle__visite a { display: inline-block; padding-block: 0.6rem; font-weight: 600; }

/* Page d'une salle (/nos-salles/<salle>/) */
.cds-salle-page__fil ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; font-size: var(--wp--preset--font-size--petit); color: var(--wp--preset--color--texte-secondaire); }
.cds-salle-page__fil li + li::before { content: "›" / ""; margin-right: 0.5rem; }
.cds-salle-page__titre { margin-bottom: 0.25rem; }
.cds-salle-page__lieu { margin-top: 0; font-size: var(--wp--preset--font-size--moyen); color: var(--wp--preset--color--texte-secondaire); }
.cds-salle-page__galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.cds-salle-page__galerie img { display: block; width: 100%; height: auto; border-radius: 12px; }
.cds-salle-page__caracteristiques { display: grid; gap: 0.75rem; margin: 0 0 1.5rem; }
.cds-salle-page__caracteristiques > div { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: 0.5rem 1rem; }
.cds-salle-page__caracteristiques dt { font-weight: 600; }
.cds-salle-page__caracteristiques dd { margin: 0; }
.cds-salle-page__equipements { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.cds-salle-page__equipements li { margin: 0; padding: 0.2rem 0.65rem; font-size: var(--wp--preset--font-size--petit); border-radius: 999px; background: var(--wp--preset--color--fond-alt); border: 1px solid var(--wp--preset--color--bordure); }
.cds-salle-page__note { font-size: var(--wp--preset--font-size--petit); color: var(--wp--preset--color--texte-secondaire); }
.cds-salle-page__action { margin: 2rem 0; }
.cds-salle-page__autres { padding-left: 1.25rem; }
@media (max-width: 600px) { .cds-salle-page__caracteristiques > div { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cds-carte-salle, .cds-carte-salle:hover { transition: none; transform: none; } }
/* Statut : pictogramme + libellé texte + bordure (jamais la couleur seule). Paires texte/fond >= 4,5:1. */
.cds-statut {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	align-self: flex-start;
	min-height: 2.25rem;
	margin: 0;
	padding: 0.25rem 0.875rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
}
.cds-statut--disponible { color: #2F5A3E; background: #E3EFE6; }
.cds-statut--quelques_jours,
.cds-statut--un_jour { color: #6E4A17; background: #F6E9D3; }
.cds-statut--complete { color: #4B4F49; background: #ECECE8; }
.cds-statut__icone { font-size: 1rem; line-height: 1; }

/* FAQ : blocs « Détails » natifs, en-tête cliquable >= 44 px et focus visible. */
.wp-block-details { border-bottom: 1px solid var(--wp--preset--color--bordure); padding: 0; }
.wp-block-details summary {
	min-height: 44px;
	padding: 0.75rem 0;
	font-weight: 600;
	cursor: pointer;
}
.wp-block-details[open] summary { padding-bottom: 0.25rem; }
.wp-block-details > :not(summary) { margin-block: 0 1rem; }

/* CTA final : séparé de la section précédente par un filet. */
.cds-cta-final { border-top: 1px solid var(--wp--preset--color--bordure); }

/* Étapes de la page « Nous rejoindre ». */
.cds-etapes { padding-left: 1.5rem; }
.cds-etapes li { margin-block: 0.5rem; padding-left: 0.25rem; }

/* Mobile : colonnes empilées avec un peu d'air ; desktop : formulaire visible à côté des étapes. */
.cds-demande__colonnes { gap: 2rem; }

@media (forced-colors: active) {
	.cds-statut, .cds-carte-salle, .cds-tarif, .cds-avantage { border: 1px solid CanvasText; }
}

/* ===== Navigation (menu principal et liens légaux) ===== */
.cds-menu__liste,
.cds-liens-legaux__liste,
.cds-lien-espace__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cds-liens-legaux__liste,
.cds-lien-espace__liste { justify-content: center; font-size: var(--wp--preset--font-size--petit, 0.9rem); }
/* Accès « Espace thérapeute » (DEV-131) : public précis, pas une information légale ; filet de séparation sous les liens légaux. */
.cds-lien-espace { margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid currentColor; }
.cds-liens-legaux a,
.cds-lien-espace a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--primaire, #303E7A);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.cds-lien-espace a[aria-current="page"] { font-weight: 600; text-decoration-thickness: 2px; }

/* Menu principal : liens sans souligné (c'est une barre de navigation, pas du texte courant). La page courante se repère
   par la graisse (et non par la couleur seule, RGAA 10.14) ; le survol assombrit ; le focus clavier garde son contour. */
.cds-menu a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--primaire, #303E7A);
	text-decoration: none;
}
.cds-menu a:is(:hover, :focus-visible) { color: var(--wp--preset--color--primaire-fonce, #202A54); }
.cds-menu a:is([aria-current="page"], [aria-current="true"]) { font-weight: 700; }

/* Burger : le bouton n'existe que si le script du thème l'a activé (classe `cds-menu--repliable`, posée par entete.js) et
   seulement sous 40em ; sans JavaScript, ou au-dessus, la liste reste toujours affichée. */
.cds-menu__bouton { display: none; }
@media (max-width: 39.99em) {
	.cds-entete__barre { position: relative; }
	.cds-menu--repliable .cds-menu__bouton {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		min-height: 44px;
		padding: 0.25rem 0.75rem;
		font: inherit;
		font-weight: 600;
		color: var(--wp--preset--color--primaire, #303E7A);
		background: transparent;
		border: 2px solid currentColor;
		border-radius: 0.5rem;
		cursor: pointer;
	}
	.cds-menu--repliable .cds-menu__bouton:is(:hover, :focus-visible) { color: var(--wp--preset--color--primaire-fonce, #202A54); }
	/* Trois barres dessinées en CSS (pas d'image) ; deviennent une croix quand le menu est ouvert. */
	.cds-menu__burger,
	.cds-menu__burger::before,
	.cds-menu__burger::after {
		display: block;
		width: 1.25rem;
		height: 2px;
		background: currentColor;
		border-radius: 1px;
		transition: transform 0.2s ease, background-color 0.2s ease;
	}
	.cds-menu__burger { position: relative; }
	.cds-menu__burger::before,
	.cds-menu__burger::after { content: ""; position: absolute; left: 0; }
	.cds-menu__burger::before { top: -6px; }
	.cds-menu__burger::after { top: 6px; }
	.cds-menu__bouton[aria-expanded="true"] .cds-menu__burger { background: transparent; }
	.cds-menu__bouton[aria-expanded="true"] .cds-menu__burger::before { transform: translateY(6px) rotate(45deg); }
	.cds-menu__bouton[aria-expanded="true"] .cds-menu__burger::after { transform: translateY(-6px) rotate(-45deg); }

	/* Liste ouverte : panneau pleine largeur sous la barre de l'en-tête. */
	.cds-menu--repliable:not(.cds-menu--ouvert) .cds-menu__liste { display: none; }
	.cds-menu--repliable .cds-menu__liste {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 60;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
		padding: 0.5rem var(--wp--preset--spacing--30, 1rem) 1rem;
		background: #FFFFFF;
		border-top: 1px solid rgba(23, 37, 42, 0.12);
		box-shadow: 0 10px 18px rgba(23, 37, 42, 0.14);
	}
	.cds-menu--repliable .cds-menu__liste a { display: flex; width: 100%; min-height: 48px; }
	.cds-menu--repliable .cds-menu__liste li + li { border-top: 1px solid rgba(23, 37, 42, 0.1); }
	.cds-menu--repliable .cds-menu__liste a:is([aria-current="page"], [aria-current="true"]) { box-shadow: inset 4px 0 0 currentColor; padding-left: 0.75rem; }
}
@media (forced-colors: active) {
	.cds-menu__burger, .cds-menu__burger::before, .cds-menu__burger::after { background: ButtonText; }
}

/* ===== Bandeau d'annonce ===== */
.cds-bandeau {
	margin: 0;
	padding: 0.75rem 1rem;
	text-align: center;
	font-weight: 600;
	color: #FFFFFF;
	background: var(--wp--preset--color--primaire, #303E7A); /* blanc sur bleu nuit : 10:1 */
}

/* =====================================================================
   En-tête collant (toutes les pages) et transparent en haut de l'accueil
   ===================================================================== */
/* Sous 40em le menu est replié en burger : l'en-tête reste compact (une à deux lignes), donc collant aussi sur mobile. */
header.wp-block-template-part {
	background: #FFFFFF;
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.cds-defile header.wp-block-template-part { box-shadow: 0 2px 14px rgba(23, 37, 42, 0.12); }
.cds-entete__barre { padding-inline: var(--wp--preset--spacing--30); align-items: center; }

/* Logo du cabinet (MS-06) : image choisie dans « Réglages > Identité du site » de chaque site (bloc Logo du site, absent
   si aucun logo n'est défini). Décoratif (le nom du cabinet est juste à côté). Posé directement sur l'en-tête, sans
   pastille (MS-21) ; sur l'en-tête transparent au-dessus de la photo, voir la règle du logo plus bas. */
.cds-marque { gap: 0.75rem; align-items: center; }
.cds-marque .wp-block-site-logo { line-height: 0; }
.cds-marque .wp-block-site-logo img {
	max-height: 3.5rem;
	width: auto;
	transition: filter 0.3s ease;
}

/* Avec JS : l'en-tête flotte au-dessus de la bannière, transparent, texte blanc, puis devient blanc au défilement
   (mobile compris). Menu burger ouvert ou focus clavier dans l'en-tête : il reste opaque (le panneau du menu est blanc). */
.cds-js body:has(.cds-hero--image) header.wp-block-template-part { position: fixed; left: 0; right: 0; }
.cds-js:not(.cds-defile):not(.cds-entete-focus) body:has(.cds-hero--image) header.wp-block-template-part:not(:has(.cds-menu--ouvert)) { background: transparent; }
.cds-js:not(.cds-defile):not(.cds-entete-focus) body:has(.cds-hero--image) header.wp-block-template-part:not(:has(.cds-menu--ouvert)) :is(a, .wp-block-site-title, .wp-block-site-title a, .cds-menu__bouton) { color: #FFFFFF; }
.cds-js:not(.cds-defile):not(.cds-entete-focus) body:has(.cds-hero--image) header.wp-block-template-part:not(:has(.cds-menu--ouvert)) :focus-visible { outline-color: #FFFFFF; }
.cds-js:not(.cds-defile):not(.cds-entete-focus) body:has(.cds-hero--image) header.wp-block-template-part:not(:has(.cds-menu--ouvert)) .wp-block-site-title a { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
/* Logo sur l'en-tête transparent (MS-21) : couleurs d'origine conservées, cernées d'un liseré blanc fin et d'un halo doux
   (comme un autocollant découpé). Un filtre « tout blanc » (brightness(0) invert(1)) écrasait le lotus de Nymphéas et la
   fleur des Fleurs de Soi en taches ; le liseré, lui, rend lisible le trait fin et les teintes sombres du mandala, quel que
   soit le logo posé dans les réglages du site (aucune donnée de cabinet ici). Le logo redevient normal dès que l'en-tête est blanc. */
.cds-js:not(.cds-defile):not(.cds-entete-focus) body:has(.cds-hero--image) header.wp-block-template-part:not(:has(.cds-menu--ouvert)) .cds-marque .wp-block-site-logo img {
	filter: drop-shadow(0 0 0.6px #FFFFFF) drop-shadow(0 0 0.6px #FFFFFF) drop-shadow(0 0 0.6px #FFFFFF) drop-shadow(0 0 3px rgba(255, 255, 255, 0.55));
}
/* Contraste élevé (Windows) : couleurs imposées par le système, pas d'effet sur le logo. */
@media (forced-colors: active) {
	.cds-js:not(.cds-defile):not(.cds-entete-focus) body:has(.cds-hero--image) header.wp-block-template-part:not(:has(.cds-menu--ouvert)) .cds-marque .wp-block-site-logo img { filter: none; }
}

/* =====================================================================
   Bannière d'accueil : photo plein écran + voile sombre uniforme (contraste du texte blanc >= 5,3:1)
   Photo : pivoines en boutons, Townsend Walton, licence Unsplash (assets/images/CREDITS.md).
   ===================================================================== */
.cds-hero--image {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding-top: var(--wp--preset--spacing--60) !important;
	color: #FFFFFF;
	text-align: center;
	background-color: var(--wp--preset--color--primaire-fonce, #202A54);
	background-image: url("assets/images/hero-pivoines-1920.jpg");
	background-image: image-set(url("assets/images/hero-pivoines-1920.webp") type("image/webp"), url("assets/images/hero-pivoines-1920.jpg") type("image/jpeg"));
	background-size: cover;
	background-position: center 40%;
}
/* Compensation de l'en-tête flottant (uniquement quand il est superposé, voir plus haut). */
.cds-hero--image { padding-top: calc(var(--wp--preset--spacing--60) + 4rem) !important; }
@media (max-width: 800px) {
	.cds-hero--image { background-image: url("assets/images/hero-pivoines-768.webp"); }
}
@media (min-width: 801px) and (max-width: 1300px) {
	.cds-hero--image { background-image: url("assets/images/hero-pivoines-1280.webp"); }
}
/* Bandeau par défaut du site (MS-19) : l'image de l'accueil du cabinet (option du plugin `cds_image_bandeau`, variables posées
   par functions.php) remplace le visuel du thème sur tous les bandeaux sans image propre. Sans la classe, rien ne change. */
body.cds-bandeau-site .cds-hero--image { background-image: var(--cds-bandeau-site-1920); }
@media (max-width: 800px) {
	body.cds-bandeau-site .cds-hero--image { background-image: var(--cds-bandeau-site-768); }
}
@media (min-width: 801px) and (max-width: 1300px) {
	body.cds-bandeau-site .cds-hero--image { background-image: var(--cds-bandeau-site-1280); }
}
/* Fiche avec sa propre photo de fond : l'image du site dessous ne servirait à rien (et serait téléchargée pour rien). */
body.cds-bandeau-site .cds-fiche-hero:has(.cds-hero__fond img[src]) { background-image: none; }
.cds-hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(32, 42, 84, 0.68); /* repli */
	background: color-mix(in srgb, var(--wp--preset--color--primaire-fonce, #202A54) 68%, transparent); /* voile uniforme (opacité 0,68 testée dans tools/contrastes-lib.php) : aucune zone plus claire de la photo sous le texte */
}
.cds-hero--image h1 { margin-inline: auto; color: #FFFFFF; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); }
.cds-hero--image p { margin-inline: auto; max-width: 40rem; color: #FFFFFF; }
.cds-hero--image .cds-actions { justify-content: center; }
.cds-hero--image .is-style-outline > .wp-block-button__link { color: #FFFFFF; border-color: #FFFFFF; }
.cds-hero--image .is-style-outline > .wp-block-button__link:hover { background: #FFFFFF; color: var(--wp--preset--color--primaire); }
.cds-hero--image :focus-visible { outline-color: #FFFFFF; }
.cds-hero--image .cds-bandeau {
	display: inline-block;
	margin: 0 auto 1.5rem;
	padding: 0.4rem 1rem;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--petit, 0.9rem);
	background: var(--wp--preset--color--primaire, #303E7A);
}
/* Contraste élevé (Windows) : les couleurs sont imposées, la photo et le voile calculé ne garantissent plus la lisibilité (RGAA 3.2). */
@media (forced-colors: active) {
	.cds-hero--image { background-image: none !important; color: CanvasText; }
	.cds-hero--image::before { background: Canvas; }
	.cds-hero--image h1, .cds-hero--image p, .cds-hero--image a { color: CanvasText; text-shadow: none; }
}
/* Accueil patients (DEV-231) : formulaire « Je recherche… » sur carte blanche, lien « tous nos thérapeutes » en blanc. */
.cds-hero--image .cds-recherche { width: 100%; margin-top: 1.5rem; }
.cds-hero--image .cds-recherche__formulaire :focus-visible { outline-color: var(--wp--preset--color--primaire, #303E7A); }
.cds-hero--image .cds-recherche__tous a { color: #FFFFFF; }

/* Vague au bas de tous les bandeaux (MS-22) : trois vagues de la couleur du fond de page (opacité 0,33 / 0,66 / 1), comme sur les
   anciens sites. Le dessin n'est qu'un masque (alpha) : la couleur vient de `--wp--preset--color--fond`, donc de la palette du
   cabinet. Purement décorative (aucun texte dedans) : le bas du bandeau reçoit en plus sa hauteur de remplissage. */
.cds-hero--image {
	--cds-vague: clamp(2.25rem, 6vw, 5rem);
	--cds-vague-forme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill-opacity='.33' d='M0 52C140 14 300 22 460 52S780 90 1000 38V100H0Z'/%3E%3Cpath fill-opacity='.66' d='M0 68C180 36 340 46 520 68S830 92 1000 58V100H0Z'/%3E%3Cpath d='M0 84C220 62 400 70 600 82S860 96 1000 78V100H0Z'/%3E%3C/svg%3E");
	padding-bottom: calc(var(--wp--preset--spacing--60) + var(--cds-vague)) !important;
}
.cds-hero--image::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px; /* évite un filet du fond du bandeau entre la vague et la section suivante */
	left: 0;
	z-index: -1;
	height: var(--cds-vague);
	background: var(--wp--preset--color--fond, #FFFFFF);
	-webkit-mask: var(--cds-vague-forme) bottom / 100% 100% no-repeat;
	mask: var(--cds-vague-forme) bottom / 100% 100% no-repeat;
	pointer-events: none;
}
.cds-hero--image.cds-hero--court { padding-bottom: calc(var(--wp--preset--spacing--50) + var(--cds-vague)) !important; }
@media (forced-colors: active) {
	.cds-hero--image::after { display: none; }
}

/* Bande de couleur (appel final) : blanc sur bleu nuit 10:1, bouton inversé. */
.cds-section--couleur { background: var(--wp--preset--color--primaire, #303E7A); color: #FFFFFF; }
.cds-section--couleur :is(h2, h3, p) { color: #FFFFFF; }
.cds-section--couleur .wp-block-button__link { background: var(--wp--preset--color--accent, #F66161); color: var(--wp--preset--color--texte, #17252A); }
.cds-section--couleur .wp-block-button__link:hover { background: var(--wp--preset--color--accent-clair, #FF8A8A); }
.cds-section--couleur :focus-visible { outline-color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
	header.wp-block-template-part { transition: none; }
}

/* L'en-tête fixe de l'accueil sort du flux : pas d'espacement de bloc au-dessus de la bannière. */
.cds-js body:has(.cds-hero--image) .wp-site-blocks > main { margin-block-start: 0; }
header.wp-block-template-part .cds-entete__barre { padding-inline: clamp(1rem, 4vw, 3rem) !important; max-width: none; }
.cds-tarif-section h2 { text-align: center; }

/* Bannière basse des pages intérieures (seule l'accueil a la grande bannière). */
.cds-hero--image.cds-hero--court {
	min-height: clamp(16rem, 42vh, 26rem);
	padding-top: var(--wp--preset--spacing--50) !important;
	padding-bottom: var(--wp--preset--spacing--50) !important;
	background-position: center 45%;
}
.cds-hero--image.cds-hero--court { padding-top: calc(var(--wp--preset--spacing--50) + 4.5rem) !important; }
.cds-hero--image :is(h1, .wp-block-post-title) { color: #FFFFFF; margin-inline: auto; text-wrap: balance; }
.cds-hero--image .wp-block-post-date { color: #FFFFFF; }
.cds-hero--image.cds-hero--court .wp-block-buttons { justify-content: center; }
/* Bouton plein sur la bannière : corail, texte encre (5,1:1). */
.cds-hero--image .wp-block-button:not(.is-style-outline) > .wp-block-button__link { background: var(--wp--preset--color--accent, #F66161); color: var(--wp--preset--color--texte, #17252A); }

/* Pied de page bleu nuit : liens blancs (13,8:1). */
.cds-pied a, .cds-pied .wp-block-site-title a { color: #FFFFFF; }
.cds-pied :focus-visible { outline-color: #FFFFFF; }
/* Bannière : image mise en avant de la page si elle existe (variables posées par functions.php). */
.cds-hero--image.cds-hero--photo-page { background-image: var(--cds-banniere) !important; }
@media (max-width: 800px) {
	.cds-hero--image.cds-hero--photo-page { background-image: var(--cds-banniere-mobile, var(--cds-banniere)) !important; }
}

/* Tableaux du contenu (politiques) : pas de débordement horizontal à 320 px. */
.entry-content table, .wp-block-post-content table, .cds-corps table { width: 100%; border-collapse: collapse; }
.entry-content :is(td, th), .wp-block-post-content :is(td, th), .cds-corps :is(td, th) {
	overflow-wrap: anywhere;
	text-align: left;
	vertical-align: top;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--bordure);
}
.cds-corps caption, .wp-block-post-content caption { caption-side: top; text-align: left; font-weight: 600; padding-bottom: 0.5rem; }

/* Recherche du pied de page : champ clair sur fond bleu nuit, bouton inversé (contrastes >= 4,5:1). */
.cds-pied__recherche { margin-bottom: 1.5rem; max-width: 32rem; margin-inline: auto; }
.cds-pied__recherche .wp-block-search__label { font-weight: 600; }
.cds-pied__recherche .wp-block-search__input { background: #FFFFFF; color: var(--wp--preset--color--texte, #17252A); border: 2px solid #FFFFFF; min-height: 44px; padding: 0 0.75rem; }
.cds-pied__recherche .wp-block-search__button { background: #FFFFFF; color: var(--wp--preset--color--primaire, #303E7A); border: 2px solid #FFFFFF; min-height: 44px; padding: 0 1rem; font-weight: 600; cursor: pointer; }

/* =====================================================================
   Fiche thérapeute personnalisée (DEV-219) : gabarit templates/cds-fiche-therapeute.html
   Photo de pratique en fond du bandeau (liaison « fond », sous le voile), portrait rond qui chevauche le bas
   du bandeau, pratiques en pastilles, approche et tarifs côte à côte sur grand écran.
   ===================================================================== */
.cds-fiche-hero { overflow: hidden; }
/* !important : la mise en page contrainte du bandeau (60rem, centrée) s'applique sinon à la photo. */
.cds-fiche-hero .cds-hero__fond { position: absolute; inset: 0; z-index: -2; width: 100%; max-width: none !important; margin: 0 !important; }
/* Le portrait rond chevauche le bas du bandeau : le texte du bandeau remonte d'autant. */
.cds-hero--image.cds-fiche-hero { padding-bottom: calc(var(--wp--preset--spacing--50) + var(--cds-vague)) !important; }
.cds-hero--image.cds-fiche-hero:has(+ .cds-fiche-identite .cds-fiche-portrait) { padding-bottom: calc(var(--wp--preset--spacing--50) + 4.5rem + var(--cds-vague)) !important; }
/* Nom en un seul mot long : retour à la ligne plutôt que coupé par le bandeau (overflow: hidden). */
.cds-fiche-hero h1 { overflow-wrap: anywhere; hyphens: auto; }
.cds-fiche-hero .cds-hero__fond img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Dégradé sur le bas de la photo : le texte blanc garde un contraste >= 4,5:1 quelle que soit la photo (voile du thème en plus). */
/* Posé sur le voile du thème (`::before`, même empilement qu'avant) : `::after` sert à la vague (MS-22). */
.cds-fiche-hero::before {
	background: linear-gradient(180deg, rgba(32, 42, 84, 0) 35%, rgba(32, 42, 84, 0.55) 100%), rgba(32, 42, 84, 0.68); /* repli */
	background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--wp--preset--color--primaire-fonce, #202A54) 55%, transparent) 100%), color-mix(in srgb, var(--wp--preset--color--primaire-fonce, #202A54) 68%, transparent);
}
.cds-fiche-hero .cds-fiche-titre { font-size: 1.125rem; font-weight: 600; }

.cds-form.cds-fiche-identite { max-width: none; margin-top: 0; padding: 0 var(--wp--preset--spacing--30); text-align: center; position: relative; z-index: 1; }
.cds-fiche-identite > * { margin-inline: auto; }
/* Le chevauchement n'existe que si le portrait existe : sans lui, le texte sombre resterait sur le voile bleu nuit du bandeau. */
.cds-form.cds-fiche-identite:has(.cds-fiche-portrait) { margin-top: -4.5rem; }
.cds-fiche-portrait { margin-top: 0; margin-bottom: 1rem; }
.cds-fiche-portrait img { width: 9rem; height: 9rem; object-fit: cover; border-radius: 50%; border: 4px solid var(--wp--preset--color--fond, #FFFFFF); background: var(--wp--preset--color--fond-alt, #F6F8FA); }
.cds-fiche-identite .cds-page-therapeute__pratiques-liste { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 .75rem; padding: 0; list-style: none; }
.cds-fiche-identite .cds-page-therapeute__pratiques-liste li { padding: .25rem .875rem; border-radius: 999px; background: var(--wp--preset--color--fond-alt, #F6F8FA); color: var(--wp--preset--color--primaire, #303E7A); font-weight: 600; font-size: .9375rem; border: 1px solid var(--wp--preset--color--primaire, #303E7A); }
.cds-fiche-identite .cds-fiche-jours { margin-block: 0 1rem; color: var(--wp--preset--color--texte-secondaire, #4B5563); }
.cds-fiche-contacts { gap: .75rem; }

.cds-form.cds-fiche-corps { max-width: 60rem; }
.cds-fiche-colonnes { display: grid; gap: 1.5rem; }
.cds-fiche-colonnes .cds-page-therapeute__section { border-top: 0; }
.cds-fiche-colonnes .cds-page-therapeute__section:has(.cds-page-therapeute__tarifs) { padding: 1.25rem; border: 1px solid var(--cds-f-bord); border-radius: var(--cds-f-rayon); background: var(--wp--preset--color--fond-alt, #F6F8FA); }
@media (min-width: 52em) {
	.cds-fiche-colonnes { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
	.cds-fiche-colonnes > .wp-block-shortcode:only-child { grid-column: 1 / -1; }
}

/* Boutons de contact : en ligne sous l'identité sur grand écran ; sur mobile, une barre Appeler / Écrire reste collée en bas de l'écran.
   La barre est le dernier enfant de <main> (un `sticky` ne tient que dans son parent) ; une seule des deux est affichée à la fois. */
.cds-fiche-contacts.cds-fiche-contacts--barre { display: none; }
@media (max-width: 40em) {
	.cds-fiche-contacts.cds-fiche-contacts--page { display: none; }
	.cds-fiche-contacts.cds-fiche-contacts--barre { display: flex; position: sticky; bottom: 0; z-index: 5; margin-block-start: 0; padding: .75rem .75rem calc(.75rem + env(safe-area-inset-bottom)); background: var(--wp--preset--color--fond, #FFFFFF); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15); }
	/* Un lien pris au clavier en bas d'écran ne doit pas rester sous la barre (WCAG 2.4.11). */
	html:has(.cds-fiche-contacts--barre) { scroll-padding-bottom: 5.5rem; }
	.cds-fiche-contacts--barre .wp-block-button { flex: 1 1 0; }
	.cds-fiche-contacts--barre .wp-block-button__link { width: 100%; text-align: center; }
}
@media (forced-colors: active) {
	.cds-fiche-contacts--barre { border-top: 1px solid CanvasText; }
	.cds-fiche-identite .cds-page-therapeute__pratiques-liste li, .cds-fiche-portrait img { border-color: CanvasText; }
}