/*
 * Feuille de style complémentaire du thème « Psychologue Classor ».
 *
 * theme.json porte la charte (couleurs, polices, tailles, espacements) : rien de
 * tout cela n'est redéfini ici. Ce fichier ne contient que ce que theme.json ne
 * sait pas exprimer : mise en page de l'en-tête rétractable, bandeaux animés,
 * cartes, grille d'articles, formulaire de contact et indicateurs de focus.
 *
 * Les couleurs sont appelées par leurs variables --wp--preset--* dès qu'elles
 * existent dans la palette ; les quelques valeurs hexadécimales restantes sont
 * des teintes relevées sur le site d'origine et absentes de la palette, ou des
 * teintes de service (succès, erreur) qui n'ont pas à polluer le sélecteur de
 * couleurs de la cliente.
 *
 * Sommaire
 *   1.  En-tête
 *   2.  Bandeaux (hero) et parallaxe
 *   3.  Liste des articles
 *   4.  Cartes de l'accueil
 *   5.  Cartes d'article et grille
 *   6.  Formulaire de contact
 *   7.  Pied de page
 *   8.  Composants introduits par les compositions
 *   9.  Apparition au défilement et survol des photographies
 *   10. Accessibilité : focus visible
 *   10 bis. Détails d'interface (ancres, sélection, filet des encadrés)
 *   11. Mouvement réduit
 */

/* ==========================================================================
   0. Jetons de la direction artistique
   ==========================================================================

   Une couche sémantique posée au-dessus des préréglages de theme.json.

   Les règles du thème appelaient jusqu'ici --wp--preset--* directement : un
   changement de parti pris obligeait à retoucher des dizaines d'endroits. Ces
   jetons nomment les INTENTIONS — une surface, un contour, un rayon, une ombre —
   et c'est à eux que se réfère tout ce qui suit. La palette reste définie une
   seule fois, dans theme.json ; rien n'est codé en dur ici.

   Géométrie : la maquette empilait des rectangles à angles vifs. Le thème
   adopte trois rayons seulement, du plus discret au plus généreux, et une
   échelle d'ombres très diffuses — jamais d'ombre portée franche, qui
   durcirait ce que la direction artistique cherche à adoucir.
*/

:root {
	/* Surfaces, de la plus claire à la plus soutenue. */
	--psy-surface:            var(--wp--preset--color--blanc-casse);
	--psy-surface-douce:      var(--wp--preset--color--ivoire);
	--psy-surface-sable:      var(--wp--preset--color--beige);
	--psy-surface-lin:        var(--wp--preset--color--lin);

	/* Traits et contours : toujours un filet, jamais une bordure. */
	--psy-filet:              var(--wp--preset--color--gris-clair);
	--psy-filet-marque:       var(--wp--preset--color--taupe);
	/*
	 * Couleur des petits traits décoratifs (filets sous les titres, filet de
	 * l'accroche, citations). Réglable d'un geste pour tout le site dans
	 * « Couleurs du site ». Chaque trait lit d'abord --psy-filet-couleur, que
	 * l'éditeur pose sur UN titre quand la cliente lui choisit une couleur
	 * (rubrique « Filet décoratif », voir inc/editeur.php) : un choix ponctuel
	 * l'emporte ainsi sur le réglage général, sans !important.
	 */
	--psy-filet-dore:         var(--wp--preset--color--dore-clair);
	/*
	 * Soulignement des onglets du menu. Variable à part plutôt que le slug de
	 * palette employé jusqu'ici : la cliente peut ainsi en changer la couleur sans
	 * déplacer le doré partout où il sert par ailleurs.
	 */
	--psy-soulignement-menu:  var(--wp--preset--color--dore);

	/* Écriture. */
	--psy-encre:              var(--wp--preset--color--texte);
	--psy-encre-douce:        var(--wp--preset--color--texte-doux);
	--psy-encre-dore:         var(--wp--preset--color--dore);

	/* Géométrie. */
	/*
	 * Intensité des voiles posés sur les photographies. 1 = l'étalonnage du thème,
	 * 0 = aucun voile. La page « Couleurs du site » ne fait que redéfinir cette
	 * variable : les valeurs propres à chaque bandeau, elles, ne bougent pas.
	 */
	/*
	 * Échelle des titres. 1 = les tailles dessinées pour le site. La page
	 * « Couleurs du site » ne redéfinit que cette valeur : chaque taille de titre
	 * la multiplie, si bien que les rapports voulus par la maquette — un titre de
	 * carte plus petit qu'un titre de chapitre — restent vrais à toutes les
	 * échelles, et que la version mobile suit d'elle-même.
	 */
	/*
	 * Teinte du voile des photographies, en composantes rouge/vert/bleu — cette
	 * forme permet de la réutiliser dans rgba() avec une opacité variable.
	 * Presque noire : plus sombre que le point le plus sombre des photographies
	 * du site, elle les assombrit donc toutes.
	 */
	--psy-voile-teinte:       14, 21, 18;

	--psy-echelle-titres:     1;

	--psy-voile-force:        1;

	--psy-rayon-fin:          6px;
	--psy-rayon:              22px;
	--psy-rayon-large:        28px;
	--psy-rayon-pastille:     999px;

	/* Ombres : diffuses et teintées de la couleur du texte, jamais du noir. */
	--psy-ombre-posee:        0 2px 18px rgba(48, 55, 47, 0.07);
	--psy-ombre-levee:        0 18px 44px rgba(48, 55, 47, 0.11);

	/* Mouvement : lent et régulier. */
	--psy-transition:         0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/*
 * Plus aucun décor de fond (ramure, cercle, ondulation) : la cliente demande
 * (septembre 2026) de « supprimer tous les effets d'arrière-fond tramé ». Les
 * sections reposent sur leurs seuls aplats de couleur.
 */

/* ==========================================================================
   1. En-tête
   ========================================================================== */

/*
 * L'en-tête reste visible pendant tout le défilement : la navigation et l'accès
 * au contact doivent être atteignables sans remonter la page.
 */
/*
 * En-tête collant.
 *
 * Le collage doit porter sur la PARTIE DE MODÈLE — l'élément <header> que
 * WordPress place directement dans .wp-site-blocks — et non sur le groupe qui
 * se trouve à l'intérieur. Un élément en position:sticky ne peut jamais sortir
 * des limites de son parent : posé sur le groupe intérieur, dont le <header>
 * épouse exactement la hauteur, il n'avait aucune marge de manœuvre et défilait
 * avec la page. Le menu disparaissait donc dès les premiers pixels de
 * défilement, alors que le thème le veut disponible en permanence.
 */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
}

.psyclassor-header {
	background-color: var(--wp--preset--color--blanc);
	transition: box-shadow 0.3s ease;
}

/*
 * La barre d'administration est en position fixe : sans ce décalage, l'en-tête
 * collant passerait dessous pour les personnes connectées.
 */
.admin-bar .wp-site-blocks > header {
	top: 32px;
}

@media (max-width: 782px) {

	.admin-bar .wp-site-blocks > header {
		top: 46px;
	}
}

/*
 * Hauteur de l'en-tête.
 *
 * Les 136 px relevés sur le site d'origine laissaient beaucoup de vide autour
 * d'un logo de 64 px. La barre est ramenée à une hauteur fluide : elle respire
 * encore sur grand écran, sans creuser le bandeau blanc qui la traverse.
 * Le repli en pixels borne les écrans extrêmes.
 */
.psyclassor-header__inner {
	min-height: clamp(84px, 7vw, 104px);
	transition: min-height 0.3s ease;
}

.psyclassor-header__identite {
	/* Empêche le bloc d'identité de repousser la navigation hors de l'écran. */
	min-width: 0;
}

/*
 * Respiration de la barre. La cliente trouvait le menu compacté : les entrées
 * s'écartent, et la navigation se cale à droite du logo, l'espace disponible
 * revenant à la gouttière entre les entrées plutôt qu'à un vide unique.
 */
@media (min-width: 901px) {

	.psyclassor-header__inner {
		gap: clamp(1rem, 2.5vw, 2.5rem);
	}

	.psyclassor-header__inner > .psyclassor-nav-principale {
		margin-left: auto;
	}
}

/*
 * L'attribut data-defile est posé par assets/js/header-scroll.js au-delà de
 * 60 px de défilement. Aucun style en ligne n'est écrit par le script : tout
 * l'état visuel est décrit ici.
 */
.psyclassor-header[data-defile="1"] .psyclassor-header__inner {
	min-height: clamp(68px, 5.5vw, 78px);
}

/*
 * Aucune ombre au défilement.
 *
 * L'en-tête portait une ombre portée dès qu'on défilait. Projetée sur les
 * 24 px d'espace qui le séparaient du bandeau, elle formait une bande grise
 * bien visible entre le menu et la photographie. Les deux causes sont levées :
 * l'ombre est supprimée, et l'espace l'est aussi (règle suivante). Le fond
 * blanc opaque de l'en-tête suffit à le détacher du contenu qui passe dessous.
 */
.psyclassor-header[data-defile="1"] {
	box-shadow: none;
}

/*
 * L'en-tête et le contenu se touchent.
 *
 * WordPress espace les blocs de premier niveau — en-tête, contenu, pied de
 * page — de l'écart global défini dans theme.json (1,5 rem). Entre l'en-tête et
 * le bandeau photographique, cet écart se voyait comme une bande blanche puis
 * grise. Le bandeau doit commencer immédiatement sous le menu.
 *
 * Seul cet écart-là est supprimé : celui qui précède le pied de page reste, il
 * sépare utilement le contenu du bloc sombre.
 */
.wp-site-blocks > header + main {
	margin-block-start: 0;
}

/*
 * Même chose au bas de la page. Le pied de page est un frère du contenu dans
 * .wp-site-blocks : l'espacement global des blocs (1,5 rem) s'intercalait donc
 * entre la dernière section et lui, et laissait une bande blanche en travers —
 * très visible quand la section se termine sur un aplat de couleur.
 */
.wp-site-blocks > main + footer {
	margin-block-start: 0;
}


/*
 * Logo du site.
 *
 * Le document « Page Home texte corrigé » demande le logo seul en haut à gauche.
 * parts/header.html conserve malgré tout le titre et le slogan, pour qu'une
 * installation sans logo ne se retrouve pas avec un en-tête vide : ce sont ces
 * deux règles qui les effacent dès qu'un logo est réellement affiché, de sorte
 * que le nom n'apparaisse jamais en double.
 *
 * :has() n'est pas un confort ici, c'est la condition « un logo existe » : sans
 * lui, aucun sélecteur CSS ne peut la formuler. Sur un navigateur qui l'ignore
 * — antérieur à 2023 — le nom réapparaît sous le logo : dégradation lisible,
 * jamais une page cassée.
 */
.psyclassor-header__identite:has( .wp-block-site-logo img ) .wp-block-site-title,
.psyclassor-header__identite:has( .wp-block-site-logo img ) .psyclassor-tagline {
	display: none;
}

/* Le logo rétrécit avec l'en-tête, comme le faisait le titre. */
.psyclassor-header__logo img {
	display: block;
	height: auto;
	transition: width 0.3s ease;
}

.psyclassor-header[data-defile="1"] .psyclassor-header__logo img {
	width: 44px;
}

/*
 * Titre du site — repli quand aucun logo n'a été déposé. Il est composé en
 * Palatino par theme.json — plus en écriture manuscrite — et rétrécit par
 * transformation plutôt que par changement de taille de police, ce qui
 * n'entraîne aucun recalcul de mise en page pendant l'animation.
 */
.psyclassor-header .wp-block-site-title {
	transform-origin: left center;
	transition: transform 0.3s ease;
}

.psyclassor-header[data-defile="1"] .wp-block-site-title {
	transform: scale(0.62);
}

.psyclassor-header .wp-block-site-title a {
	text-decoration: none;
}

/*
 * Slogan du site : petites capitales à interlettrage large, sous le titre, comme
 * les surtitres de la charte. Les capitales sont purement visuelles — le slogan
 * reste saisi normalement dans Réglages > Général, ce qui évite qu'un lecteur
 * d'écran ne l'épelle lettre à lettre.
 *
 * La classe est partagée avec le slogan du pied de page (section 7) : elle ne
 * porte que la typographie, jamais la couleur, qui dépend du fond.
 *
 * Aucune taille n'est fixée ici : elle vient du préréglage « petit » posé sur le
 * bloc, que le cœur génère avec !important (voir la note de la section 8). Une
 * déclaration de font-size serait ici sans effet : autant ne pas l'écrire.
 */
.psyclassor-tagline {
	margin: 0;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Sur le fond blanc de l'en-tête : gris de la charte #565555, soit 7,4:1. */
.psyclassor-header .psyclassor-tagline {
	color: var(--wp--preset--color--texte);
}

/*
 * Taille des entrées de menu, ajustée à la largeur de l'écran : 0,92 rem sur un
 * portable, jusqu'à 1,06 rem sur un grand écran. Le menu occupe ainsi la place
 * qui lui revient au lieu de flotter dans une barre trop vide.
 *
 * `!important` justifié : la composition pose le préréglage « petit », que le
 * cœur génère lui-même avec !important (WP_Theme_JSON::get_preset_classes).
 * Aucune déclaration ordinaire ne peut passer devant.
 */
/*
 * Sous-menu « Accompagnements ».
 *
 * Le cœur pose déjà l'ouverture au survol, au focus clavier et — sur les
 * appareils tactiles, où le survol n'existe pas — un bouton d'ouverture. On ne
 * réécrit donc aucun comportement : seule l'apparence est reprise, pour que le
 * panneau ressemble au reste du site plutôt qu'au gris par défaut de WordPress.
 *
 * Fond ivoire, filet doré très fin, ombre douce : le panneau se pose sur la
 * photographie du bandeau sans l'assombrir.
 */
/*
 * Le sous-menu s'ouvre dès que le focus clavier entre dans son parent — sans
 * attendre Entrée sur le bouton bascule, qui reste fonctionnel. :focus-within
 * couvre le lien parent, le bouton et les entrées elles-mêmes : le panneau ne
 * se referme pas pendant qu'on le parcourt.
 */
.psyclassor-nav-principale .wp-block-navigation-submenu:focus-within .wp-block-navigation__submenu-container {
	visibility: visible;
	opacity: 1;
	overflow: visible;
	min-width: 17.5rem;
	height: auto;
	width: auto;
}

.psyclassor-nav-principale .wp-block-navigation__submenu-container {
	/*
	 * Assez large pour que « Psychothérapie Enfants / Ados » tienne sur une
	 * seule ligne : coupé en deux, l'intitulé se lisait comme deux entrées.
	 */
	min-width: 17.5rem;
	padding-block: 0.4rem;
	border: 0;
	border-top: 2px solid var(--psy-filet-dore);
	border-radius: 6px;
	background-color: var(--wp--preset--color--blanc-casse);
	box-shadow: 0 10px 28px rgba(86, 85, 85, 0.16);
}

.psyclassor-nav-principale .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 1.1rem;
	/* Même corps que le premier niveau : le cœur ne l'hérite pas de lui-même. */
	font-size: var(--wp--preset--font-size--petit);
	white-space: nowrap;
}

.psyclassor-nav-principale .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	content: none;
}

.psyclassor-nav-principale .wp-block-navigation__submenu-container li:hover > .wp-block-navigation-item__content,
.psyclassor-nav-principale .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--beige);
}

/*
 * Dans le menu déroulant du téléphone, le panneau redevient une simple liste
 * indentée : ni ombre, ni fond, ni largeur minimale, qui déborderaient de
 * l'écran. Le décalage suffit à marquer la hiérarchie.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	min-width: 0;
	padding-left: 1rem;
	border: 0;
	background-color: transparent;
	box-shadow: none;
}

.psyclassor-nav-principale .wp-block-navigation-item__content {
	font-size: clamp(0.92rem, 0.86rem + 0.22vw, 1.06rem) !important;
	letter-spacing: 0.01em;
}

/*
 * Les liens de navigation ne sont pas soulignés au repos : le soulignement
 * global de theme.json convient au texte courant, pas à une barre de menu.
 * Le survol et la page courante restent signalés par un trait pêche.
 */
.psyclassor-nav-principale a {
	text-decoration: none;
}

/*
 * Soulignement au survol : un trait qui se déploie du centre vers les bords,
 * plutôt qu'un soulignement qui s'allume d'un coup. Le trait est un
 * pseudo-élément et non un text-decoration : lui seul peut être animé.
 *
 * Le lien reçoit position:relative pour servir de repère au trait ; l'entrée de
 * menu, elle, garde son affichage en ligne.
 */
.psyclassor-nav-principale a {
	position: relative;
}

.psyclassor-nav-principale a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -6px;
	left: 0;
	height: 2px;
	background-color: var(--psy-soulignement-menu);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.psyclassor-nav-principale a:hover::after,
.psyclassor-nav-principale a:focus-visible::after,
.psyclassor-nav-principale .current-menu-item > a::after,
.psyclassor-nav-principale a.psyclassor-nav-courante::after {
	transform: scaleX(1);
}

/*
 * Le soulignement natif est remplacé par ce trait : le laisser ferait doublon.
 * L'état actif reste donc signalé par un repère visible, comme l'exige la
 * règle « la couleur ne porte jamais seule l'information ».
 */
.psyclassor-nav-principale a:hover,
.psyclassor-nav-principale .current-menu-item > a,
.psyclassor-nav-principale a.psyclassor-nav-courante {
	text-decoration: none;
}

/*
 * Entrée du menu au chargement : les entrées se posent l'une après l'autre, de
 * gauche à droite. C'est la première chose que voit un visiteur, et le
 * mouvement est court — la dernière entrée est en place en moins d'une seconde.
 */
@keyframes psyclassor-nav-entree {

	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.psyclassor-nav-principale .wp-block-navigation-item {
	animation: psyclassor-nav-entree 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.psyclassor-nav-principale .wp-block-navigation-item:nth-child(1) { animation-delay: 0.10s; }
.psyclassor-nav-principale .wp-block-navigation-item:nth-child(2) { animation-delay: 0.17s; }
.psyclassor-nav-principale .wp-block-navigation-item:nth-child(3) { animation-delay: 0.24s; }
.psyclassor-nav-principale .wp-block-navigation-item:nth-child(4) { animation-delay: 0.31s; }
.psyclassor-nav-principale .wp-block-navigation-item:nth-child(5) { animation-delay: 0.38s; }
.psyclassor-nav-principale .wp-block-navigation-item:nth-child(6) { animation-delay: 0.45s; }

/*
 * Le logo précède le menu : il se pose en premier, puis reste FIXE — il ne
 * tourne plus au défilement, comme le demande la cliente (septembre 2026).
 * L'en-tête, lui, reste collé en haut de l'écran (règle ci-dessus).
 */
.psyclassor-header__logo img {
	animation: psyclassor-nav-entree 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

/*
 * Menu mobile : le panneau glisse depuis la droite au lieu d'apparaître d'un
 * bloc, et ses entrées se posent en cascade comme sur grand écran.
 */
.wp-block-navigation__responsive-container.is-menu-open {
	animation: psyclassor-panneau 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes psyclassor-panneau {

	from {
		opacity: 0;
		transform: translateX(24px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	animation: psyclassor-nav-entree 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Le bouton d'ouverture réagit au survol, comme les autres commandes du site. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-close:hover {
	opacity: 0.7;
	transform: scale(1.08);
}

/*
 * Les pictogrammes du menu mesurent 24 px, mais leur zone tactile doit rester
 * confortable. Le cadre invisible de 44 px évite une commande minuscule sur
 * téléphone sans grossir visuellement l'icône. Dans le panneau ouvert, le même
 * minimum s'applique à chaque destination, y compris aux deux sous-entrées.
 */
@media (max-width: 781px) {

	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	.psyclassor-nav-principale .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding-block: 0.55rem;
	}
}

/* --- 1.1 Téléphone : en-tête compact et menu plein écran ------------------- */

/*
 * En-tête. Les retraits de 2 rem posés en attribut de bloc et la hauteur
 * minimale de 84 px donnaient une barre de 148 px sur un écran de 844 px : un
 * cinquième de l'écran pour un logo et un bouton. Elle passe sous 80 px. Les
 * !important répondent aux styles en ligne écrits par les attributs du bloc.
 */
@media (max-width: 781px) {

	.psyclassor-header {
		padding-top: 0.6rem !important;
		padding-bottom: 0.6rem !important;
	}

	.psyclassor-header__inner,
	.psyclassor-header[data-defile="1"] .psyclassor-header__inner {
		min-height: 60px;
	}

	.psyclassor-header__logo img,
	.psyclassor-header[data-defile="1"] .psyclassor-header__logo img {
		width: 52px;
	}
}

/*
 * Menu plein écran (bouton « hamburger »).
 *
 * WordPress livre un panneau blanc dont les entrées héritent de la
 * justification à droite de la barre, espacées de l'écart de blocs de 2 rem :
 * huit mots dispersés sur la droite d'un écran vide, avec le trait de
 * soulignement de la page courante flottant sous le premier. Le panneau est
 * repris ici : fond ivoire, entrées calées à gauche, l'une sous l'autre,
 * séparées d'un filet, les deux sous-entrées en retrait et plus petites, la
 * page courante en doré. Le trait de soulignement de la barre n'y a pas
 * cours.
 *
 * La justification est une variable du cœur (--navigation-layout-
 * justification-column) : la redéfinir suffit, sans combattre ses règles.
 */
.psyclassor-nav-principale .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-column: flex-start;
	padding: 0 clamp(1.25rem, 6vw, 2rem) 2rem;
	background-color: var(--psy-surface);
}

.psyclassor-nav-principale .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4.5rem;
}

.psyclassor-nav-principale .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0;
}

.psyclassor-nav-principale .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--psy-filet);
}

.psyclassor-nav-principale .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	width: 100%;
	padding: 0.95rem 0;
	color: var(--psy-encre);
	font-family: var(--wp--preset--font-family--titre);
	font-size: 1.25rem !important;
	letter-spacing: 0;
	line-height: 1.3;
}

/* Le trait de soulignement de la barre ne s'affiche pas dans le panneau. */
.psyclassor-nav-principale .wp-block-navigation__responsive-container.is-menu-open a::after {
	content: none;
}

.psyclassor-nav-principale .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a,
.psyclassor-nav-principale .wp-block-navigation__responsive-container.is-menu-open a.psyclassor-nav-courante {
	color: var(--psy-encre-dore);
}

/*
 * Sous-menu « Accompagnements » : les deux entrées se lisent en retrait sous
 * leur parent, en corps courant, sans filet entre elles. Le bouton de bascule
 * du cœur n'a pas d'objet ici, le panneau montrant toujours le sous-menu.
 */
.psyclassor-nav-principale .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding: 0 0 0.6rem 1.25rem;
	border-left: 2px solid var(--psy-filet-dore);
	margin-bottom: 0.4rem;
}

.psyclassor-nav-principale .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.45rem 0;
	font-family: var(--wp--preset--font-family--corps);
	font-size: 1rem !important;
}

.psyclassor-nav-principale .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	display: none;
}

/* Le bouton de fermeture reste en haut à droite, à bonne distance du bord. */
.psyclassor-nav-principale .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 0.9rem;
	right: 1rem;
}

/* ==========================================================================
   2. Bandeaux (hero) et parallaxe
   ========================================================================== */

/*
 * Hauteur des bandeaux — règle commune du site.
 *
 * Le document « Page Home texte corrigé » demande de « réduire la dimension de
 * tous les bandeaux » pour qu'on « voie un peu de blanc en bas », et non de la
 * seule page d'accueil. Trois paliers, appliqués en attribut du bloc
 * « Bannière » dans les compositions — donc réglables page par page depuis
 * l'éditeur, sans toucher au code :
 *
 *   — accueil          62 vh  (le plus haut, ce que le document autorise)
 *   — pages intérieures 52 vh (Accompagnements, Qui suis-je, Mon approche,
 *                             Hypnose / Sophrologie, Contact, section-hero)
 *   — page Articles    420 px (bandeau court, réglé plus bas)
 *
 * Les valeurs sont exprimées en vh plutôt qu'en pixels : un bandeau garde ainsi
 * la même proportion d'un écran à l'autre, sans hauteur fixe qui couperait le
 * sujet sur les écrans bas. Deux garde-fous complètent la règle ci-dessous, pour
 * les cas que le vh seul traite mal : les écrans très bas et les téléphones.
 */
.psyclassor-hero {
	position: relative;
	overflow: hidden;
}

/*
 * Écran bas (ordinateur portable en 1440×700, fenêtre réduite) : 52 vh n'y font
 * plus que 364 px, trop peu pour que le titre et son ombrage respirent. Le
 * bandeau reprend alors un minimum en pixels. `!important` est nécessaire : la
 * hauteur est écrite en style en ligne par le bloc « Bannière », qu'aucune
 * déclaration ordinaire ne peut dépasser.
 */
@media (max-height: 760px) and (min-width: 782px) {

	.psyclassor-hero:not(.psyclassor-hero--articles) {
		min-height: 420px !important;
	}
}

/*
 * Téléphone : l'écran est étroit et haut, et 52 vh y donneraient un bandeau
 * disproportionné qui repousserait tout le contenu sous la ligne de flottaison.
 * La proportion est ramenée à une valeur plus basse, bornée en pixels pour que
 * le sujet de la photographie reste lisible.
 */
@media (max-width: 600px) {

	.psyclassor-hero:not(.psyclassor-hero--articles) {
		min-height: clamp(320px, 46vh, 420px) !important;
	}
}

/*
 * Titre du bandeau. Aucune police n'est déclarée ici : depuis l'adoption de la
 * charte, les titres sont composés en Palatino par theme.json (élément heading)
 * et non plus en écriture manuscrite. Ne reste que l'ombre portée, qui détache le
 * titre des zones claires de la photographie.
 */
.psyclassor-hero__titre {
	/*
	 * Un halo, non une ombre portée. Décalée de 2 px et 4 px, l'ancienne ombre
	 * se lisait comme un relief posé sur la photographie ; centrée et très
	 * étalée, elle ne fait plus que détacher les lettres du ciel.
	 */
	text-shadow: 0 2px 20px rgba(48, 55, 47, 0.62);
}

.psyclassor-hero__sous-titre {
	/* Même interlettrage de charte que le surtitre : 0,05 em. */
	letter-spacing: 0.05em;
	text-shadow: 2px 4px 12px rgba(0, 0, 0, 0.35);
	text-transform: uppercase;
}

/*
 * Le surtitre, l'accroche et le crédit photographique du bandeau sont décrits en
 * section 8 avec les autres composants apportés par les compositions.
 */

/*
 * Réserve de parallaxe.
 *
 * ACCUEIL : l'image est agrandie et remontée pour ménager 30 % de réserve en
 * haut, la marge que consomme le glissement (assets/js/hero-parallax.js), qui
 * ne déplace jamais l'image vers le haut. La cliente trouve ce bandeau parfait.
 *
 * AUTRES BANDEAUX : réserve SYMÉTRIQUE de 10 % en haut et en bas (image à
 * 120 %), pour un glissement plus court. Deux raisons, toutes deux demandées
 * par la cliente en septembre 2026 : une réserve symétrique laisse le sujet
 * cadré au CENTRE au repos (une réserve d'un seul côté le décalait), et un
 * agrandissement de 20 % au lieu de 30 % préserve la netteté de la
 * photographie. Le script parcourt 10 % de la hauteur du bandeau sur ces
 * pages, contre 30 % sur l'accueil : l'image ne découvre jamais de vide.
 */
.psyclassor-hero--accueil.wp-block-cover .wp-block-cover__image-background {
	top: -30%;
	height: 130%;
	will-change: transform;
}

.psyclassor-hero:not(.psyclassor-hero--accueil).wp-block-cover .wp-block-cover__image-background {
	top: -10%;
	height: 120%;
	will-change: transform;
}


/*
 * Le contenu du bandeau se peint au-dessus de l'ombrage porté décrit en section
 * 8.1 (z-index 1). Le cœur pose bien position:relative sur ce conteneur, mais
 * sans z-index : sans cette valeur explicite, l'ordre de peinture dépendrait de
 * l'ordre du balisage, que la cliente peut modifier depuis l'éditeur.
 */
.psyclassor-hero .wp-block-cover__inner-container {
	position: relative;
	/*
	 * !important justifié : le cœur pose `z-index: 1` sur ce conteneur par un
	 * sélecteur `body:not(…) .wp-block-cover:not(.wp-block-cover:has(…)) …` dont
	 * la spécificité dépasse tout ce qu'une classe de thème peut aligner sans
	 * empiler artificiellement des classes. Le texte doit être au-dessus du
	 * voile (z-index 1) : c'est le seul moyen propre de l'y mettre.
	 */
	z-index: 2 !important;
	will-change: opacity, transform;
	/*
	 * Le conteneur prend toute la hauteur du bandeau : c'est ce qui permet de
	 * poser le bloc de texte à MI-HAUTEUR de la photographie (section 8.1),
	 * quelle que soit la position de contenu choisie dans l'éditeur.
	 */
	align-self: stretch;
}

/* Bandeau de la page des articles : plus bas que ceux des pages de contenu. */
.psyclassor-hero--articles {
	min-height: 420px;
}

/*
 * Cadrage du bandeau de l'accueil.
 *
 * Le document « Page Home texte corrigé » demande d'« enlever un bout de la
 * partie herbe verte du bas » et de « mettre en valeur le haut de la photo et le
 * ruisseau ». La réserve de parallaxe de la règle précédente faisait exactement
 * l'inverse : en remontant l'image de 30 %, elle masquait le quart supérieur de
 * la photographie — le ciel et les sommets — pour montrer l'herbe du bas.
 *
 * L'image reprend donc ici toute la hauteur du bandeau, sans réserve, et se cale
 * sur son bord supérieur. Sur un écran d'ordinateur, le bandeau est plus
 * panoramique que la photographie : celle-ci est alors ajustée en largeur et
 * c'est bien le bas — l'herbe — qui sort du cadre. Sur un écran étroit, la
 * photographie est ajustée en hauteur, donc vue entière : object-position n'a
 * alors aucun effet, et rien n'est coupé du sujet.
 *
 * La parallaxe de ce bandeau est neutralisée en conséquence dans
 * assets/js/hero-parallax.js (vitesse nulle pour cette variante) : sans réserve,
 * un déplacement de l'image découvrirait une bande vide. Le texte, lui, continue
 * de s'effacer au défilement — le mouvement est conservé.
 */
.psyclassor-hero--accueil.wp-block-cover .wp-block-cover__image-background {
	/*
	 * La réserve de 30 % (règle générale ci-dessus) s'applique aussi ici : la
	 * photographie monte au défilement comme sur les autres pages, sans jamais
	 * découvrir de bande vide.
	 */
	/*
	 * Cadrage — ciel, montagnes, ruisseau.
	 *
	 * La photographie mesure 1536 × 1024, soit un rapport de 1,5 — nettement
	 * moins panoramique que la précédente (1,93). Conséquence directe : sur un
	 * écran d'ordinateur, le cadre du bandeau (environ 2,6) est BEAUCOUP plus
	 * large que l'image, qui est donc ajustée en largeur et rognée de près de
	 * moitié en hauteur. C'est une bonne nouvelle : le choix de ce qu'on montre
	 * devient large, là où l'ancienne image ne laissait qu'un quart de marge.
	 *
	 * Repères relevés bande par bande sur l'image :
	 *   ciel 0–33 % · crêtes et mer de nuages 22–40 % · ruisseau 44–68 %
	 *   prairie de premier plan au-delà de 70 %, sacrifiable.
	 *
	 * À 35 %, la fenêtre s'ouvre de 15 % à 73 % : on garde une bande de ciel
	 * franche, toute la ligne de crêtes avec sa brume, et le ruisseau sur
	 * l'intégralité de son parcours — tout en retirant le dernier quart de
	 * prairie, celui qui n'apporte rien.
	 */
	/*
	 * Depuis que la photographie porte la réserve de 30 % de la parallaxe, sa
	 * boîte dépasse le bandeau par le haut et seule sa partie basse est visible
	 * au repos : l'ancrage est donc très haut, ce qui replace ciel et crêtes
	 * dans la fenêtre — lignes 19 % à 77 % de l'image à 1440 px.
	 */
	object-position: 50% 8%;
}

@media (max-width: 1400px) {

	.psyclassor-hero--accueil.wp-block-cover .wp-block-cover__image-background {
		object-position: 50% 10%;
	}
}

/*
 * Tablette : le bandeau se raccourcit assez pour que le cadre redevienne
 * panoramique, ce qui rend l'axe vertical de nouveau utile.
 */
@media (max-width: 1024px) {

	.psyclassor-hero--accueil {
		min-height: clamp(340px, 42vh, 420px) !important;
	}

	/*
	 * Tablette : le cadre reste plus large que l'image, l'axe vertical garde
	 * donc la main et 82 % de la hauteur est visible.
	 */
	.psyclassor-hero--accueil.wp-block-cover .wp-block-cover__image-background {
		object-position: 55% 22%;
	}
}

@media (max-width: 600px) {

	/*
	 * Téléphone : le cadre devient carré, plus ÉTROIT que l'image. Le rognage
	 * bascule à l'horizontale, l'axe vertical n'a plus aucun effet, et c'est le
	 * décalage latéral qui cadre la diagonale du ruisseau — de sa naissance au
	 * tiers gauche jusqu'à sa sortie par le bord droit.
	 */
	.psyclassor-hero--accueil.wp-block-cover .wp-block-cover__image-background {
		object-position: 58% 50%;
	}

	/*
	 * Sur téléphone, aucun bandeau ne glisse : la réserve coûterait une part
	 * de la photographie pour un mouvement que le défilement tactile rend à
	 * peine perceptible. L'image reprend toute la hauteur du bandeau et reste
	 * immobile ; le script écrit bien sa translation en ligne, le !important
	 * la neutralise.
	 */
	.psyclassor-hero.wp-block-cover .wp-block-cover__image-background {
		top: 0;
		height: 100%;
		transform: none !important;
	}
}

/*
 * Cadrage des bandeaux intérieurs, demandé par la cliente (septembre 2026).
 * Seul le point d'ancrage de l'image change ; la hauteur reste un réglage du
 * bloc « Bannière ». La boîte d'image fait 120 % du bandeau, centrée (réserve
 * symétrique ci-dessus) : la fenêtre visible au repos en est le centre. La
 * valeur verticale se calcule ainsi, pour une image de hauteur H (mise à la
 * largeur du bandeau), une boîte B = 1,2 × h et une ligne de l'image c que
 * l'on veut au milieu : p = (c × H − 0,6 × h) / (H − B). Les valeurs ci-dessous
 * sont la moyenne entre un écran de 1440 et de 1920 px de large.
 *
 *   — La psychothérapie (labyrinthe) : « le centre du labyrinthe au milieu du
 *     bandeau ». Le centre est à 46 % de la hauteur de l'image.
 *   — Mon approche (aigrette) : « le centre du pissenlit au milieu ». La
 *     sphère est centrée à 46 %.
 *   — Enfants & adolescents (herbes au bord de l'eau) : « descendre un peu la
 *     photo pour mettre en valeur davantage d'eau » — l'eau occupe le tiers
 *     supérieur, l'ancrage remonte.
 *   — Qui suis-je (pissenlit en envol) : « descendre la photo pour faire
 *     apparaître un peu de ciel rose » — ancrage remonté vers le haut de
 *     l'image, où le ciel rosit ; la tête et un bout de tige restent visibles.
 *   — Accompagnements (canopée, image carrée) : la trouée de ciel au centre.
 *
 * Les variantes --contact, --articles et --hypnose-sophrologie gardent
 * l'ancrage central par défaut ; ce sont des points d'accroche par page, à
 * conserver dans les compositions même sans règle qui les vise.
 */
.psyclassor-hero--adultes.wp-block-cover .wp-block-cover__image-background {
	object-position: 52% 35%;
}

.psyclassor-hero--mon-approche.wp-block-cover .wp-block-cover__image-background {
	object-position: 50% 42%;
}

.psyclassor-hero--enfants-ados.wp-block-cover .wp-block-cover__image-background {
	object-position: 50% 17%;
}

.psyclassor-hero--qui-suis-je.wp-block-cover .wp-block-cover__image-background {
	object-position: 50% 12%;
}

.psyclassor-hero--accompagnements.wp-block-cover .wp-block-cover__image-background {
	object-position: 50% 44%;
}

/* ==========================================================================
   3. Liste des articles
   ========================================================================== */

/*
 * Le bloc de liste remonte par-dessus le bandeau avec un arrondi supérieur :
 * la position relative et le z-index le placent au-dessus de l'image, l'en-tête
 * collant (z-index 100) restant lui-même au-dessus de l'ensemble.
 */
.psyclassor-liste-articles {
	position: relative;
	z-index: 10;
	margin-top: -40px;
	padding-top: 3rem;
	border-radius: 40px 40px 0 0;
	background-color: var(--wp--preset--color--blanc);
}

/* ==========================================================================
   4. Cartes de l'accueil
   ========================================================================== */

/*
 * La double classe est nécessaire, pas décorative : WordPress applique
 * `padding: 1.25em 2.375em` à tout `.wp-block-group.has-background`. Sans une
 * spécificité au moins égale, l'image de la carte se retrouve encadrée d'une
 * marge au lieu d'aller d'un bord à l'autre. Le retrait interne est porté par le
 * titre seul, comme sur le site d'origine.
 *
 * Le fond est blanc, et non plus gris clair : les compositions « Accueil » et
 * « Accompagnement » posent désormais les cartes dans un bandeau beige clair,
 * dont elles doivent se détacher. Les compositions déclarent le même blanc en
 * attribut de bloc ; il est répété ici pour que la classe reste autonome si la
 * cliente insère une carte à la main depuis l'éditeur.
 */
.wp-block-group.psyclassor-carte {
	position: relative;
	height: 100%;
	padding: 0;
	overflow: hidden;
	border-radius: 8px;
	background-color: var(--wp--preset--color--blanc);
	transition:
		box-shadow 0.3s cubic-bezier(0.2, 0.7, 0.3, 1),
		transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/*
 * Survol : la carte s'élève de quatre pixels et prend une ombre plus marquée. Le
 * déplacement est infime et la carte ne change pas de taille — rien ne bouge
 * autour d'elle, la grille reste immobile. :focus-within double :hover pour que
 * l'effet se produise aussi à la navigation au clavier.
 */
.psyclassor-carte:hover,
.psyclassor-carte:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--flottant);
}

.psyclassor-carte__image {
	margin: 0;
	overflow: hidden;
}

.psyclassor-carte__image a {
	display: block;
}

/*
 * Hauteur fixe et recadrage : trois visuels de proportions différentes doivent
 * produire trois cartes rigoureusement alignées.
 */
.psyclassor-carte .psyclassor-carte__image img {
	display: block;
	width: 100%;
	height: 360px;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/*
 * « Effet de mouvement au survol des photographies » demandé par la charte : la
 * photographie s'agrandit lentement à l'intérieur de son cadre, que l'overflow
 * hidden de la carte maintient inchangé. Aucune ligne de texte ne se déplace.
 */
.psyclassor-carte:hover .psyclassor-carte__image img,
.psyclassor-carte:focus-within .psyclassor-carte__image img {
	transform: scale(1.05);
}

.psyclassor-carte__titre {
	margin: 0;
	padding: 16px;
}

.psyclassor-carte__titre a {
	color: inherit;
	text-decoration: none;
}

/*
 * Toute la carte est cliquable : le lien du titre est étendu à la surface de la
 * carte. Un seul lien reste dans l'ordre de tabulation, et le survol de l'image
 * déclenche bien l'état de survol du lien.
 */
.psyclassor-carte__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Variante sans image (page « Accompagnement ») : la carte n'est alors qu'un encadré. */
.psyclassor-carte--texte {
	overflow: visible;
}

/*
 * Variante nue — les trois accès de la page d'accueil.
 *
 * Le document de la cliente demande d'« enlever l'encadrement gris et de les
 * mettre dans un bandeau coloré beige clair (cf. visuel de la Home par Gilles) ».
 * Sur ce visuel, les photographies sont posées à même le beige : ni fond blanc,
 * ni bordure, ni ombre — seule la photographie et son titre. La carte perd donc
 * ici tout habillage, et le titre se cale à gauche sous l'image, comme sur le
 * visuel.
 *
 * La variante est réservée à l'accueil : la page « Accompagnement » garde ses
 * cartes blanches, qu'aucun document ne demande de changer.
 */
.wp-block-group.psyclassor-carte--nue {
	background-color: transparent;
	box-shadow: none;
}

/*
 * Seule la photographie s'arrondit : le titre, posé sur le beige, n'a plus de
 * cadre à épouser.
 */
.psyclassor-carte--nue .psyclassor-carte__image img {
	border-radius: 8px;
}

/*
 * Au survol, la carte nue ne s'élève plus — sans fond ni ombre, une élévation
 * ne se verrait pas. Il ne reste que l'agrandissement de la photographie
 * (section 4), qui est précisément l'« effet de mouvement » demandé.
 */
.psyclassor-carte--nue:hover,
.psyclassor-carte--nue:focus-within {
	transform: none;
	box-shadow: none;
}

/* Titre calé à gauche sous la photographie, sans retrait latéral. */
.psyclassor-carte--nue .psyclassor-carte__titre {
	padding: 1rem 0 0;
}

/* ==========================================================================
   5. Cartes d'article et grille
   ========================================================================== */

.psyclassor-carte-article {
	height: 100%;
	overflow: hidden;
	border: 1px solid #e3e3e3; /* Gris de bordure relevé sur le site d'origine, absent de la palette. */
	border-radius: 6px;
	background-color: var(--wp--preset--color--blanc);
}

/* L'image coiffe la carte : aucun arrondi propre, c'est la carte qui rogne. */
.psyclassor-carte-article .wp-block-post-featured-image {
	margin: 0;
	border-radius: 0;
}

.psyclassor-carte-article .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	border-radius: 0;
	object-fit: cover;
}

.psyclassor-carte-article .wp-block-post-date {
	margin: 0;
	color: #5a6e8c; /* Bleu grisé du site d'origine, hors palette. */
	font-size: 0.8rem;
	font-style: italic;
}

.psyclassor-carte-article .wp-block-post-title {
	margin: 0;
	font-size: calc((1.3rem) * var(--psy-echelle-titres));
	line-height: 1.35;
}

.psyclassor-carte-article .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.psyclassor-carte-article .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--psy-soulignement-menu);
	text-underline-offset: 4px;
}

.psyclassor-carte-article .wp-block-post-excerpt {
	margin: 0;
}

/*
 * Le brun clair relevé sur le site d'origine (#a87654) ne donnait que 3,90:1 sur
 * le fond blanc de la carte : en deçà des 4,5:1 exigés pour ce corps de texte
 * (0,9 rem, soit 14 px). Le résumé reprend donc le gris de la charte, qui y donne
 * 7,4:1. Aucune couleur de la palette proche du brun ne tient le seuil — le pêche
 * et le pêche clair sont des fonds, pas des couleurs de texte.
 */
.psyclassor-carte-article .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--texte);
	font-size: 0.9rem;
}

.psyclassor-carte-article .wp-block-post-excerpt__more-text a {
	color: var(--wp--preset--color--vert-profond);
	font-size: 0.9rem;
}

/*
 * Grilles de boucles. WordPress écrit un nombre de colonnes fixe pour les
 * dispositions « grille » : ces règles rendent ce nombre adaptatif. Les
 * sélecteurs sont volontairement plus précis que ceux générés par le cœur pour
 * l'emporter sans !important.
 */

/* Boucles courantes (index, archives, recherche). */
@media (max-width: 600px) {

	.psyclassor-boucle .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 601px) and (max-width: 992px) {

	.psyclassor-boucle .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Page des articles : 5 colonnes, 3 sur tablette, 1 sur mobile. */
.psyclassor-liste-articles .psyclassor-boucle .wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 992px) {

	.psyclassor-liste-articles .psyclassor-boucle .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {

	.psyclassor-liste-articles .psyclassor-boucle .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   6. Formulaire de contact
   ========================================================================== */

/*
 * Les classes reprennent exactement celles produites par le bloc dynamique
 * inc/block-contact-form.php : __champ, __label, __saisie, __erreur, __case,
 * __leurre, __actions.
 */

.psyclassor-bloc-formulaire {
	/*
	 * Après envoi, le formulaire renvoie sur son propre ancrage : sans cette
	 * marge de défilement, l'en-tête collant recouvrirait le message de réponse.
	 */
	scroll-margin-top: 160px;
}

/*
 * Le formulaire est une grille : une colonne sur mobile, deux au-delà de 600 px
 * où seuls l'e-mail et le téléphone se partagent la ligne. Les champs cachés
 * (nonce, horodatage) ne créent aucune cellule, le navigateur les masque déjà.
 */
.psyclassor-formulaire {
	display: grid;
	/*
	 * Compact : la cliente demande de « bien réduire le formulaire en taille »
	 * (septembre 2026), sur le modèle des formulaires courts de ses références.
	 * Interlignes, hauteur des champs, corps des libellés : tout est resserré
	 * d'un cran, sans retirer un seul champ.
	 */
	gap: 0.8rem;
	grid-template-columns: minmax(0, 1fr);
	max-width: 520px;
	margin-top: 1rem;
	scroll-margin-top: 160px;
}

@media (min-width: 601px) {

	.psyclassor-formulaire {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Par défaut, chaque bloc occupe la largeur entière. */
	.psyclassor-formulaire > * {
		grid-column: 1 / -1;
	}
}

/*
 * Seuls l'e-mail et le téléphone se mettent côte à côte. La règle est isolée :
 * un navigateur sans :has() ignorerait la liste de sélecteurs entière, et les
 * deux champs resteraient simplement l'un sous l'autre — dégradation acceptable.
 */
@media (min-width: 601px) {

	.psyclassor-formulaire__champ:has( .psyclassor-formulaire__saisie[type="email"] ),
	.psyclassor-formulaire__champ:has( .psyclassor-formulaire__saisie[type="tel"] ) {
		grid-column: span 1;
	}
}

.psyclassor-formulaire__mention-requis {
	margin: 0;
	color: var(--psy-encre-douce);
	font-size: 0.78rem;
}

.psyclassor-formulaire__champ {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.psyclassor-formulaire__label {
	margin-bottom: 0.25rem;
	color: var(--wp--preset--color--noir);
	font-size: 0.85rem;
	font-weight: 500;
}

/*
 * L'astérisque est décoratif (aria-hidden) : la mention textuelle au-dessus du
 * formulaire et l'attribut required portent l'information pour tout le monde.
 */
.psyclassor-formulaire__requis {
	color: #8c1d18; /* Rouge sombre de service : 9,11:1 sur blanc. */
	font-weight: 700;
}

.psyclassor-formulaire__note {
	color: var(--wp--preset--color--texte);
	font-weight: 400;
}

.psyclassor-formulaire__saisie {
	/*
	 * Largeur calculée bordure comprise : sans cela, « 100 % » plus les marges
	 * internes et la bordure dépassaient de la colonne, et la page Contact
	 * débordait de 9 px sur téléphone — d'où une page « pas affichée en
	 * entier », que le navigateur laissait défiler de côté.
	 */
	box-sizing: border-box;
	width: 100%;
	min-height: 42px;
	padding: 0.5rem 0.85rem;
	/*
	 * Gris bleuté à 3,25:1 sur fond blanc : en deçà, la bordure d'un champ cesse
	 * d'être perceptible pour une partie des utilisateurs (WCAG 1.4.11).
	 */
	border: 2px solid #8a8f98;
	border-radius: 0;
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--texte);
	font-family: var(--wp--preset--font-family--corps);
	font-size: 0.95rem;
	line-height: 1.5;
}

.psyclassor-formulaire__saisie--zone {
	min-height: 120px;
	resize: vertical;
}

.psyclassor-formulaire__saisie:hover {
	border-color: var(--wp--preset--color--vert-eau);
}

.psyclassor-formulaire__saisie:focus {
	border-color: var(--wp--preset--color--noir);
}

/* La couleur ne porte jamais seule l'information : le message d'erreur reste écrit. */
.psyclassor-formulaire__saisie[aria-invalid="true"],
.psyclassor-formulaire__case[aria-invalid="true"] {
	border-color: #b3261e;
	outline-color: #b3261e;
}

.psyclassor-formulaire__erreur {
	display: block;
	margin-bottom: 0.4rem;
	color: #8c1d18;
	font-size: 0.9rem;
	font-weight: 600;
}

/*
 * Consentement : le message d'erreur occupe la ligne entière, la case et son
 * libellé se partagent la suivante. Le libellé contient un lien vers la
 * politique de confidentialité, d'où la colonne souple.
 */
.psyclassor-formulaire__champ--case {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 0.5rem 0.75rem;
}

.psyclassor-formulaire__champ--case .psyclassor-formulaire__erreur {
	grid-column: 1 / -1;
	margin-bottom: 0;
}

.psyclassor-formulaire__case {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.2rem 0 0;
	accent-color: var(--wp--preset--color--vert-eau);
}

.psyclassor-formulaire__label--case {
	margin-bottom: 0;
	font-size: 0.82rem;
	font-weight: 400;
	line-height: 1.5;
}

.psyclassor-formulaire__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

/*
 * Le bouton hérite de la charte des boutons définie dans theme.json grâce à la
 * classe wp-element-button : seule la hauteur minimale relevée sur le site
 * d'origine est ajoutée ici.
 */
.psyclassor-formulaire__bouton {
	min-height: 42px;
	border: 0;
	cursor: pointer;
}

/*
 * Messages de retour. Les contrastes texte/fond dépassent 7:1 : ils restent
 * lisibles pour une personne malvoyante comme en niveaux de gris. Ces teintes
 * de service ne figurent pas dans la palette, pour ne pas encombrer le
 * sélecteur de couleurs de l'éditeur.
 */
.psyclassor-formulaire__message {
	padding: 1rem 1.25rem;
	border-left: 4px solid transparent;
	font-size: 1rem;
	scroll-margin-top: 160px;
}

.psyclassor-formulaire__message p {
	margin: 0;
}

.psyclassor-formulaire__message--succes {
	border-left-color: #2f7a45;
	background-color: #e6f4ea;
	color: #14532d;
}

.psyclassor-formulaire__message--erreur {
	border-left-color: #b3261e;
	background-color: #fdecea;
	color: #8c1d18;
}

/*
 * Piège à robots. Il est déplacé hors de l'écran plutôt que masqué par
 * display:none ou visibility:hidden : certains robots ignorent précisément les
 * champs invisibles, et le piège deviendrait inopérant. Pour les lecteurs
 * d'écran, c'est l'attribut aria-hidden posé sur le conteneur qui l'écarte.
 * Le bloc répète ces règles en style en ligne — c'est volontaire : si cette
 * feuille ne se chargeait pas, le champ resterait visible et le formulaire
 * inutilisable. Les deux noms sont couverts, celui du bloc et celui du thème.
 */
.psyclassor-formulaire__leurre,
.psyclassor-formulaire__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*
 * Aperçu du bloc dans l'éditeur. Ces classes sont écrites par
 * assets/js/block-contact-form.js ; cette feuille étant aussi la feuille de
 * l'éditeur (add_editor_style dans inc/setup.php), les régler ici suffit. Le
 * site public, lui, ne contient jamais ces classes.
 */
.psyclassor-apercu-formulaire {
	padding: 1.25rem 1.5rem;
	border: 2px dashed var(--wp--preset--color--vert-eau);
	background-color: var(--wp--preset--color--gris-clair);
}

.psyclassor-apercu-formulaire__titre {
	margin: 0 0 0.5rem;
}

.psyclassor-apercu-formulaire__aide {
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
}

.psyclassor-apercu-formulaire__champs {
	margin: 0.75rem 0 0;
	padding-left: 1.25rem;
	font-size: 0.9rem;
	list-style: disc;
}

/* --- 6 bis. Bandeau d'accueil : les deux lignes ---------------------------- */

/*
 * Le bandeau ne porte plus que deux lignes (septembre 2026) : l'accroche,
 * devenue le titre de niveau 1, puis « Psychothérapie – Conscience corporelle –
 * Transmission » en petites capitales. Le nom a quitté le bandeau : il rejoindra
 * le logo que la cliente fait redessiner.
 *
 * L'accroche est composée en Palatino, droite, dans un corps de titre modéré,
 * et garde son filet doré vertical à gauche — que la cliente demande de
 * conserver. Le placement à mi-hauteur et l'apparition en cascade sont ceux de
 * tous les bandeaux (sections 8.1 et 9.4).
 */
.psyclassor-hero__accroche {
	margin: 0;
	padding-left: 1.1rem;
	border-left: 2px solid var(--psy-filet-couleur, var(--psy-filet-dore));
	color: var(--wp--preset--color--blanc);
	font-size: calc((clamp(1.45rem, 2.5vw, 2.3rem)) * var(--psy-echelle-titres));
	/* Droite, non italique : demande de la cliente, septembre 2026. */
	font-style: normal;
	font-weight: 400;
	line-height: 1.3;
	text-shadow: 0 2px 20px rgba(48, 55, 47, 0.62);
}

.psyclassor-hero__accroche strong {
	font-weight: 400;
}

.psyclassor-hero__professions {
	margin-top: 1.3rem;
	color: var(--wp--preset--color--blanc);
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	line-height: 1.8;
	opacity: 0.92;
	text-shadow: 0 2px 10px rgba(48, 55, 47, 0.42);
}

/*
 * Le bloc de texte occupe le tiers gauche du bandeau, comme sur la maquette :
 * le paysage — ruisseau, ciel, montagnes — respire sur les deux autres tiers.
 */
.psyclassor-hero--accueil .psyclassor-hero__contenu {
	max-width: clamp(400px, 34vw, 560px);
}

/* --- 6 ter. Composition de la page d'accueil ------------------------------ */

/*
 * Rythme de lecture. La colonne de texte tenait 84 signes par ligne à 1440 px,
 * bien au-delà du confort (65 à 75). Elle se resserre, et le bloc reste centré
 * dans la page comme sur la maquette.
 */
.psyclassor-accueil__intro > p,
.psyclassor-accueil__approche > p {
	max-width: 62ch;
	margin-inline: auto;
	/*
	 * Fer à gauche, sans césure : la cliente demande d'« éviter les coupures
	 * de mots » (septembre 2026). Plus de justification non plus — sans
	 * césure, elle creuserait des blancs entre les mots. « text-wrap: pretty »
	 * demande au navigateur d'équilibrer les fins de ligne (mots orphelins),
	 * là où il le sait faire ; ailleurs, la règle est simplement ignorée.
	 */
	text-align: left;
	hyphens: manual;
	-webkit-hyphens: manual;
	text-wrap: pretty;
}

/*
 * « Bienvenue ! ». La maquette le compose en petit, très espacé, sans gras :
 * une annonce, pas un titre de chapitre. Le filet doré sous le mot remplace
 * l'aplat que porterait une carte.
 */
.psyclassor-accueil__intro > .wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--50);
	font-size: calc((clamp(1.6rem, 2.4vw, 2rem)) * var(--psy-echelle-titres));
	letter-spacing: 0.01em;
	text-align: center;
}

.psyclassor-accueil__intro > .wp-block-heading::after {
	content: "";
	display: block;
	width: 54px;
	height: 2px;
	margin: 1.1rem auto 0;
	background-color: var(--psy-filet-couleur, var(--psy-filet-dore));
}

/*
 * La citation. C'est la respiration de la page : elle occupe une section à elle
 * seule, sur toute la largeur, avec l'ondulation en fond. Le texte reste
 * modeste — il ne s'agit pas d'écraser les paragraphes qui l'entourent — et
 * l'attribution passe nettement en dessous, en petit.
 */
.psyclassor-accueil__citation .wp-block-quote {
	max-width: 46rem;
	margin-inline: auto;
	padding: 0;
	/* Le filet de theme.json n'a pas cours ici : la citation est centrée. */
	border: 0 !important;
	text-align: center;
}

.psyclassor-accueil__citation .wp-block-quote p {
	font-size: clamp(1.1rem, 1.9vw, 1.4rem);
	line-height: 1.65;
}

.psyclassor-accueil__citation .wp-block-quote cite {
	display: block;
	margin-top: 1.4rem;
	color: var(--psy-encre-douce);
	font-size: 0.82rem;
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --- 6 quater. Les trois accès ------------------------------------------- */

/*
 * Trois accès, pas trois cartes.
 *
 * La consigne écarte l'aspect « trois cartes WordPress génériques ». Le cadre,
 * l'ombre et le fond blanc disparaissent donc : ne restent que la photographie,
 * arrondie, et son titre. Ce qui fait la composition, c'est le DÉCALAGE — la
 * colonne du milieu descend, celle de droite remonte légèrement — et le
 * mouvement lent de l'image au survol.
 *
 * Le décalage ne s'applique qu'au-delà de 900 px : empilées, les trois cartes
 * doivent retrouver un alignement franc.
 */
.psyclassor-acces-trio .wp-block-columns {
	max-width: 1180px;
	margin-inline: auto;
	gap: clamp(1.75rem, 3vw, 3rem);
}

.psyclassor-acces-trio .psyclassor-carte {
	border: 0;
	background: none;
	box-shadow: none;
}

.psyclassor-acces-trio .psyclassor-carte__image {
	/* Même raison qu'aux deux accès : voir le commentaire de la section 8.5 bis. */
	isolation: isolate;
	overflow: hidden;
	/*
	 * Arrondi léger, aligné sur le reste du site. Ces trois photographies étaient
	 * les seules à 22px quand toutes les autres tiennent entre 2 et 8px : sur la
	 * page d'accueil, l'écart se voyait. --psy-rayon-fin (6px) les remet dans la
	 * même famille que les cartes d'article et les vignettes de publication.
	 */
	border-radius: var(--psy-rayon-fin);
	box-shadow: var(--psy-ombre-posee);
	transform: translateZ(0);
}

/*
 * Cadre plus haut qu'auparavant (proportion proche du portrait, 5/6) : la
 * cliente demande de « dézoomer la photo portrait — sur l'originale on voit le
 * cou et une épaule ». À cette proportion, le portrait (850 × 1024) est vu
 * presque entier ; les deux autres photographies s'y recadrent sans dommage.
 */
.psyclassor-acces-trio .psyclassor-carte__image {
	height: clamp(300px, 30vw, 420px);
}

/*
 * Si la place manque (tablette), le rognage du portrait se fait par le HAUT —
 * le mur derrière la tête — jamais par les épaules.
 */
.psyclassor-acces-trio .wp-block-column:nth-child(3) .psyclassor-carte__image img {
	object-position: 50% 85%;
}

.psyclassor-acces-trio .psyclassor-carte__image a {
	display: block;
	width: 100%;
	height: 100%;
}

.psyclassor-acces-trio .psyclassor-carte__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.psyclassor-acces-trio .psyclassor-carte:hover .psyclassor-carte__image img,
.psyclassor-acces-trio .psyclassor-carte:focus-within .psyclassor-carte__image img {
	transform: scale(1.05);
}

/* Le titre : centré sur la photographie (section 8.5 sexies pour le reste). */
.psyclassor-acces-trio .psyclassor-carte__titre {
	padding: 1.1rem 0 0 !important;
	font-size: calc((clamp(1.15rem, 1.6vw, 1.32rem)) * var(--psy-echelle-titres));
	line-height: 1.35;
}



/*
 * Le crédit photographique passe sous l'image, en très petit. Il n'existe que
 * pour deux des trois accès ; une hauteur minimale réservée sur les trois aligne
 * malgré tout les titres, qui se décalaient de 22 px sans cela.
 */
.psyclassor-acces-trio .psyclassor-carte__credit {
	min-height: 1.5em;
	margin: 0;
	padding: 0.4rem 0 0;
	color: var(--psy-encre-douce);
	font-size: 0.7rem;
	text-align: right;
}

.psyclassor-acces-trio .psyclassor-carte:not(:has(.psyclassor-carte__credit)) .psyclassor-carte__titre {
	margin-top: calc(1.5em + 0.4rem);
}



/*
 * La bande verte « Faire un premier pas » qui concluait l'accueil est supprimée
 * (demande de septembre 2026) : la page se termine sur les trois accès.
 */

/* --- 6 quinquies Formulaire : adoucissement de la charte dorée ------------- */

/*
 * Les champs perdent leur bordure administrative grise au profit d'un trait
 * fin beige, s'arrondissent, et le bouton d'envoi devient la pilule de la
 * charte. Ces règles surchargent la section 6 : elles se lisent comme le
 * dernier mot de la cascade, c'est leur rôle.
 */
/*
 * Sur la page Contact, rien n'est doré : la cliente réserve cette couleur au
 * logo à venir et aux filets sous les titres. Le survol et le focus des champs
 * passent donc par la sauge de la charte.
 */
.psyclassor-formulaire__saisie {
	border: 1px solid var(--wp--preset--color--taupe);
	border-radius: 10px;
	background-color: var(--wp--preset--color--blanc);
	padding: 0.5rem 0.85rem;
}

.psyclassor-formulaire__saisie--zone {
	border-radius: 12px;
}

.psyclassor-formulaire__saisie:hover {
	border-color: var(--wp--preset--color--sauge);
}

.psyclassor-formulaire__saisie:focus {
	border-color: var(--wp--preset--color--sauge);
	outline: 2px solid var(--wp--preset--color--sauge);
	outline-offset: 2px;
	box-shadow: none;
}

.psyclassor-formulaire__bouton {
	border: 0;
	border-radius: var(--psy-rayon-pastille);
	background-color: var(--wp--preset--color--beige);
	color: var(--wp--preset--color--texte);
	padding: 0.6rem 1.8rem;
}

.psyclassor-formulaire__bouton:hover,
.psyclassor-formulaire__bouton:focus-visible {
	background-color: var(--wp--preset--color--taupe);
	color: var(--wp--preset--color--texte);
}

/*
 * L'avertissement sur les données de santé a été retiré du formulaire à la
 * demande de la cliente (inc/block-contact-form.php) : plus rien à styler.
 */

/* ==========================================================================
   7. Pied de page
   ========================================================================== */

/*
 * Pied de page épuré au maximum (septembre 2026) : une seule ligne centrée —
 * « © Sylvie Sicard · Mentions légales · Politique de confidentialité » — sur
 * le bleu profond de la palette. Ni navigation, ni coordonnées, ni signature
 * d'agence : la cliente les a retirés.
 *
 * Contraste sur #3a4652 : blanc cassé #f8f6ef, 11,4:1 ; blanc, 12,2:1. Les
 * liens sont soulignés : sur fond sombre, c'est le repère qui ne dépend pas
 * de la couleur (WCAG 1.4.1). Au survol, le souligné passe au doré.
 */
.psyclassor-footer__mentions {
	margin: 0;
	font-size: 0.82rem;
	letter-spacing: 0.02em;
	line-height: 1.9;
}

.psyclassor-footer a:where(:not(.wp-element-button)) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.psyclassor-footer a:where(:not(.wp-element-button)):hover,
.psyclassor-footer a:where(:not(.wp-element-button)):focus-visible {
	text-decoration-color: var(--psy-filet-dore);
	text-decoration-thickness: 2px;
}

@media (max-width: 781px) {

	.psyclassor-footer {
		padding-top: var(--wp--preset--spacing--30) !important;
		padding-bottom: var(--wp--preset--spacing--30) !important;
	}
}

/* ==========================================================================
   8. Composants introduits par les compositions
   ========================================================================== */

/*
 * Ces classes sont écrites par les patterns de page (patterns/*.php). Elles
 * décrivent ce que theme.json ne sait pas exprimer : crédits photographiques en
 * surimpression, encadrés pratiques, sections image/texte alternées, notices de
 * publication.
 *
 * Deux contraintes de WordPress reviennent d'un bout à l'autre de la section :
 *
 *   — les classes de préréglage écrites par l'éditeur (has-petit-font-size,
 *     has-blanc-color…) sont générées avec !important par le cœur
 *     (WP_Theme_JSON::get_preset_classes, wp-includes/class-wp-theme-json.php).
 *     Une taille de police ne peut donc les contredire qu'avec un !important à
 *     son tour : les deux seuls de cette feuille sont ci-dessous, chacun justifié ;
 *   — un bloc core/image n'accepte aucun bloc enfant. Un crédit photographique ne
 *     peut donc pas être écrit à l'intérieur de la figure : c'est toujours un
 *     paragraphe frère, ce dont le positionnement tient compte.
 */

/*
 * Les titres ne figent plus leur police dans la feuille du thème.
 *
 * Le bandeau et les titres de cartes la déclaraient en dur, avec une
 * spécificité de classe qui l'emportait sur le réglage « Police des titres ».
 * La cliente pouvait changer la police du site sans voir son grand titre suivre.
 *
 * Le défaut ne change pas : theme.json donne Palatino à tous les titres. Seule
 * la possibilité d'en changer s'ouvre. Un bloc portant son propre choix de
 * police continue, lui, de primer.
 */

/* --- 8.1 Bandeaux : ombrage, contenu, surtitre, accroche, crédit ---------- */

/*
 * Ombrage porté du bandeau — un voile léger, ancré à gauche.
 *
 * POURQUOI UN PSEUDO-ÉLÉMENT, ET PLUS UN BLOC.
 *
 * Le voile était jusqu'ici un bloc « Groupe » vide, écrit dans le contenu de la
 * page : `<div class="wp-block-group psyclassor-hero__ombre"></div>`. Un bloc
 * vide ne survit pas à l'édition — il n'a pas de contenu à afficher dans
 * l'éditeur, rien ne signale qu'il compte, et il se perd au premier remaniement
 * de la bannière ou de son texte. Le voile disparaissait alors de la page, sans
 * que personne comprenne pourquoi.
 *
 * Il est désormais porté par un pseudo-élément du bandeau lui-même. Il ne figure
 * plus dans le contenu, il n'est plus sélectionnable, et aucune manipulation de
 * blocs ne peut l'atteindre. theme.css étant déclarée en feuille d'éditeur
 * (add_editor_style, inc/setup.php), il s'affiche aussi pendant la rédaction :
 * ce qu'on voit en modifiant est ce qui sera publié.
 *
 * LE DESSIN.
 *
 * Un seul dégradé, horizontal, du bord gauche vers le centre, où le texte se
 * pose. Il s'éteint à 56 % de la largeur : la moitié droite de la photographie
 * reste intacte, ce que demande la charte (« pas de voile sombre sur les
 * photographies »). La teinte reste le vert profond #34443b plutôt qu'un noir
 * pur : à opacité égale, elle éteint moins les couleurs.
 *
 * L'OPACITÉ, ET CE QU'ELLE COÛTE.
 *
 * L'opacité est propre à chaque bandeau (voir plus bas) : une valeur unique ne
 * donne pas un voile égal, puisque plus une photographie est sombre, moins un
 * voile la change. Mesuré sur les photographies livrées, dans la zone exacte où
 * se pose le texte, le titre blanc conserve de 3,32:1 à 16,7:1 — au-dessus du
 * seuil de 3:1 des grands textes — sur les huit bandeaux. L'ombre portée du titre
 * (voir .psyclassor-hero__accroche) ajoute une marge que ce calcul, fait sur des
 * aplats, ne sait pas compter.
 *
 */
.psyclassor-hero.wp-block-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/*
	 * L'opacité du bord gauche est une variable : chaque bandeau la règle sur
	 * une ligne, plus bas. Les trois arrêts intermédiaires en dérivent, pour que
	 * la forme du dégradé reste la même quelle que soit l'intensité.
	 */
	--psy-voile: 0.48;
	background-image:
		linear-gradient(to right,
			rgba(var(--psy-voile-teinte), calc(var(--psy-voile) * var(--psy-voile-force))) 0%,
			rgba(var(--psy-voile-teinte), calc(var(--psy-voile) * var(--psy-voile-force) * 0.55)) 26%,
			rgba(var(--psy-voile-teinte), calc(var(--psy-voile) * var(--psy-voile-force) * 0.20)) 42%,
			rgba(var(--psy-voile-teinte), 0) 56%);
	/*
	 * Superposition simple, sans mix-blend-mode.
	 *
	 * Le voile a d'abord été fusionné en « produit » : c'était la seule façon
	 * d'assombrir des photographies plus sombres que lui, quand il reprenait le
	 * vert #34443b de la charte. Mais la fusion sur pseudo-élément au-dessus d'une
	 * image ne se comporte pas de la même manière dans tous les navigateurs, et le
	 * voile pouvait ne pas apparaître du tout.
	 *
	 * La teinte est donc devenue un presque-noir (#0e1512) : plus sombre que le
	 * point le plus sombre de toutes les photographies du site, il les assombrit
	 * toutes par simple superposition. Aucune fonctionnalité récente n'est requise,
	 * le rendu est le même partout.
	 */
	pointer-events: none;
}

/*
 * Intensité propre à chaque bandeau.
 *
 * Une opacité unique ne donne pas un voile égal : à 0,40, l'écart de clarté
 * perçu allait de 6,9 sur les pissenlits à 18,6 sur la page Articles, presque du
 * simple au triple. Plus la photographie est sombre, moins un voile la change —
 * et il en faut donc davantage pour obtenir le même effet.
 *
 * Ces valeurs sont calculées, photographie par photographie, pour un même écart
 * perçu (ΔL* ≈ 18, mesuré dans la bande gauche où se pose le texte), avec un
 * plancher : le titre blanc ne descend jamais sous 3:1. Elles sont à refaire si
 * une photographie de bandeau est remplacée.
 */
.psyclassor-hero--articles.wp-block-cover::after      { --psy-voile: 0.33; }
.psyclassor-hero--contact.wp-block-cover::after       { --psy-voile: 0.42; } /* photo la plus claire du lot : 3,32:1 pour le titre blanc */
.psyclassor-hero--accompagnements.wp-block-cover::after { --psy-voile: 0.46; }
.psyclassor-hero--accueil.wp-block-cover::after       { --psy-voile: 0.48; }
.psyclassor-hero--enfants-ados.wp-block-cover::after  { --psy-voile: 0.57; }
.psyclassor-hero--mon-approche.wp-block-cover::after  { --psy-voile: 0.90; }
.psyclassor-hero--adultes.wp-block-cover::after       { --psy-voile: 0.90; }
.psyclassor-hero--qui-suis-je.wp-block-cover::after   { --psy-voile: 0.90; }


/*
 * Neutralisation de l'ancien bloc décoratif.
 *
 * Les pages déjà publiées contiennent encore le `<div>` vide décrit plus haut :
 * il vit dans la base, et le déploiement du thème n'y touche pas. Sans cette
 * règle il resterait un conteneur en absolu par-dessus la photographie, qui
 * doublerait le voile là où il a survécu. On le masque donc, au lieu d'exiger
 * une réécriture du contenu de chaque page.
 *
 * À supprimer le jour où plus aucune page ne le porte.
 */
.psyclassor-hero__ombre {
	display: none;
}

/*
 * Le conteneur interne du bloc « Bannière » se réduit à la largeur de son contenu
 * dès que contentPosition est défini : le texte se retrouvait collé au bord de
 * l'écran, et le crédit photographique — positionné par rapport à lui — atterrissait
 * au milieu du bandeau au lieu du coin bas droit.
 *
 * On lui rend la largeur « wide » du site : le texte s'aligne alors sur la même
 * colonne que le reste des pages, et le crédit retrouve le coin droit du bandeau.
 */
/*
 * `!important` justifié. Dès qu'une position de contenu est choisie, le cœur écrit
 * `.wp-block-cover.has-custom-content-position.has-custom-content-position
 * .wp-block-cover__inner-container { margin: 0; width: auto }` : il double lui-même
 * la classe pour atteindre une spécificité de 0-4-0. L'égaler ne suffit pas, les
 * styles de blocs étant émis après les feuilles du thème ; la dépasser demanderait
 * d'empiler quatre classes redondantes, moins lisible que cette exception assumée.
 *
 * Sans cette règle, le conteneur se réduit à la largeur de son texte : le contenu
 * du bandeau collerait au bord de l'écran et le crédit photographique, positionné
 * par rapport à lui, atterrirait au milieu du bandeau au lieu du coin bas droit.
 */
/*
 * Le bandeau ne porte plus de remplissage vertical.
 *
 * Les compositions en posent un (spacing|60 ou |70, soit jusqu'à 120px de haut
 * comme de bas sur un grand écran). Le conteneur intérieur, qui s'étire dans la
 * boîte de contenu, s'arrêtait donc bien avant le bas du bandeau — et le crédit
 * photographique, calé sur CE bas, flottait au milieu de la photographie. Plus
 * l'écran était large, plus il remontait.
 *
 * Le retirer ne change ni la hauteur du bandeau — elle vient de min-height, et
 * le modèle de boîte est en border-box — ni la position du texte : le conteneur
 * était centré, son milieu était déjà celui du bandeau. Seul le crédit bouge,
 * et il retrouve le coin qui lui revient.
 */
.psyclassor-hero.wp-block-cover {
	/*
	 * !important : le remplissage est écrit en style en ligne par le bloc, et
	 * rien d'autre ne peut l'emporter sur lui.
	 */
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.psyclassor-hero .wp-block-cover__inner-container {
	width: 100% !important;
	max-width: var(--wp--style--global--wide-size) !important;
	margin-inline: auto !important;
	padding-inline: var(--wp--preset--spacing--30);
}

/*
 * Bloc de texte du bandeau — à gauche, à MI-HAUTEUR de la photographie.
 *
 * La cliente demande (septembre 2026) : « première ligne à gauche, à la moitié
 * de la photo, reste des titres en dessous ». Le bloc est donc positionné en
 * absolu dans le conteneur intérieur, que la section 2 étire sur toute la
 * hauteur du bandeau : son bord supérieur se cale à 50 %, remonté d'une demi-
 * ligne pour que la première ligne chevauche exactement le milieu, et le reste
 * s'écoule en dessous. Le placement ne dépend plus de la position de contenu
 * choisie dans l'éditeur ni des retraits du bloc « Bannière » — à condition que
 * ceux du haut et du bas restent égaux, ce que font toutes les compositions.
 *
 * `!important` est ici justifié, pour la raison exposée en section 8.5 :
 * WordPress centre les enfants d'un conteneur « constrained » avec
 * `.is-layout-constrained > :where(…) { margin-left: auto !important }`, et le
 * bloc « Bannière » du bandeau en est un.
 *
 * Le retrait gauche reprend celui du conteneur intérieur (règle précédente) :
 * le texte reste aligné sur la colonne du reste des pages.
 */
.psyclassor-hero .psyclassor-hero__contenu {
	position: absolute;
	top: 50%;
	right: var(--wp--preset--spacing--30);
	left: var(--wp--preset--spacing--30);
	max-width: 640px;
	margin: -0.8rem 0 0 !important;
	text-align: left;
}

/*
 * Ligne d'attaque au-dessus du titre du bandeau. La charte demande de petites
 * capitales italiques largement interlettrées : `font-variant: small-caps` ne
 * donne rien de fiable avec Open Sans (le rendu dépend de la présence des glyphes
 * dans la fonte), l'effet est donc obtenu par des capitales à taille réduite —
 * ici le préréglage « petit », un cran en dessous du texte courant.
 *
 * Les compositions posent déjà couleur et interlettrage en attributs de bloc ; les
 * valeurs sont reprises ici pour que la classe reste autonome lorsque la cliente
 * insère le composant à la main depuis l'éditeur.
 *
 * Interlettrage : la charte note « interlettrage 50 » sur ces petites lignes.
 * C'est une valeur de maquette, exprimée en millièmes de cadratin dans le logiciel
 * de mise en page — soit 0,05 em, et non 50 pixels ni 50 points. Les 0,18 em posés
 * auparavant, comme les 3 px qu'écrivaient les compositions, disloquaient le mot :
 * on revient à la valeur de la charte.
 */
.psyclassor-hero__surtitre {
	margin-bottom: 0;
	color: var(--wp--preset--color--blanc);
	font-size: var(--wp--preset--font-size--petit);
	/*
	 * Droit, et non italique. La charte compose ces petites lignes en italique,
	 * mais posées en capitales sur une photographie elles s'en trouvaient
	 * alourdies : la cliente demande de retirer l'italique des bandeaux des
	 * pages internes. Le caractère de la ligne tient désormais à la capitale et
	 * à l'interlettrage seuls.
	 */
	font-style: normal;
	letter-spacing: 0.05em;
	line-height: 1.4;
	text-shadow: 2px 4px 12px rgba(0, 0, 0, 0.35);
	text-transform: uppercase;
}

/*
 * « Marge basse réduite » : dans une mise en page de blocs, l'écart entre deux
 * blocs est porté par la marge haute du suivant (règle d'espacement générée par
 * le cœur, qui met justement margin-block-end à 0). C'est donc le titre qui doit
 * la recevoir, sans quoi la déclaration serait sans effet.
 */
.psyclassor-hero__surtitre + .psyclassor-hero__titre {
	margin-top: 0.35rem;
}

/* L'accroche du bandeau d'accueil est décrite en section 6 bis. */

/*
 * Crédit photographique du bandeau — angle inférieur droit.
 *
 * Le crédit est écrit HORS du conteneur intérieur, comme frère direct de
 * celui-ci dans le bloc « Bannière » (voir les compositions Accueil et
 * Accompagnements) : sa référence de positionnement est donc le bandeau
 * lui-même (.psyclassor-hero, en position relative), et non le conteneur de
 * texte que le script de parallaxe transforme et estompe au défilement. Le
 * crédit reste ainsi en place et visible quand le texte s'efface.
 */
.psyclassor-hero__credit {
	position: absolute;
	right: clamp(1rem, 3vw, 2.5rem);
	bottom: 0.9rem;
	left: auto;
	z-index: 2;
	margin: 0;
	color: var(--wp--preset--color--blanc);
	/*
	 * !important justifié : la composition écrit has-petit-font-size, généré par
	 * le cœur avec !important. C'est la seule façon d'obtenir les 0,72 rem
	 * attendus pour une mention de crédit, qui ne doit pas peser autant que le
	 * texte du bandeau.
	 */
	font-size: 0.72rem !important;
	opacity: 0.85;
	/* Ombre légère, pas celle du titre : le crédit s'efface, il ne s'affiche pas. */
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* --- 8.2 Crédit en surimpression sur une carte ---------------------------- */

/*
 * Le crédit est le paragraphe qui suit la figure, à l'intérieur de la carte : il
 * n'est pas un descendant de .psyclassor-carte__image et ne peut donc pas être
 * positionné par rapport à elle. La référence est la carte, déjà en position
 * relative et en overflow hidden (section 4). L'image coiffe la carte sur
 * exactement 360 px (même section) : caler le crédit sur cette limite puis le
 * remonter de sa propre hauteur le pose sur le bas de la photographie, quelle que
 * soit la longueur du titre en dessous.
 *
 * Aucun z-index : le crédit, positionné, se peint déjà au-dessus de l'image, et
 * la surface cliquable de la carte (::after du titre, z-index 1) reste au-dessus
 * de lui — le clic continue de suivre le lien, même sur le crédit.
 */
.psyclassor-carte__credit {
	margin: 0;
	padding: 0.35rem 1rem 0;
	text-align: right;
	/*
	 * La pastille noire posée sur la photographie était le dernier aplat sombre
	 * du site, et la cliente n'en veut plus. Le crédit passe donc SOUS l'image,
	 * dans le corps de la carte : plus rien ne recouvre la photographie, et la
	 * mention se lit en gris sur le blanc de la carte — 7,5:1, bien au-delà du
	 * seuil, sans avoir à voiler quoi que ce soit.
	 *
	 * Le positionnement absolu et le décalage laissent la place à un simple
	 * paragraphe dans le flux : voir la règle qui suit.
	 */
	background-color: transparent;
	color: var(--wp--preset--color--texte);
	/*
	 * !important justifié : même raison qu'au bandeau, la composition écrit
	 * has-petit-font-size (0,9 rem) que le cœur génère avec !important. Un crédit
	 * en surimpression sur une photographie doit rester une mention discrète.
	 */
	font-size: 0.7rem !important;
	line-height: 1.5;
}

/* --- 8.3 Conditions pratiques et introductions de page ----------------------- */

/*
 * Plus aucun encadré de texte (demande de septembre 2026, « sauf la page
 * Articles ») : les conditions pratiques de la page « La psychothérapie » et
 * les introductions des pages « Accompagnements », « Mon approche » et
 * « Hypnose / Sophrologie » sont du texte nu, centré.
 *
 * Conditions pratiques : plus discrètes qu'avant — corps réduit (préréglage
 * « petit » posé par la composition), aucun gras, encre douce, lignes serrées.
 */
.psyclassor-conditions {
	max-width: 40rem;
	margin-inline: auto;
	color: var(--psy-encre-douce);
}

.psyclassor-conditions > p {
	margin-block: 0.2rem;
	font-weight: 400;
}

/* Introduction de page : une colonne de lecture confortable, centrée. */
.psyclassor-intro-page,
.psyclassor-intro-page > p,
p.psyclassor-intro-page {
	max-width: 46rem;
	margin-inline: auto;
}

/*
 * Court filet doré sous un titre — le même signe que sous « Bienvenue ! » de
 * l'accueil et sous les titres de chapitre (la cliente y tient : « j'aime
 * beaucoup les petits traits sous les titres »).
 *
 * C'est aussi la classe que pose la rubrique « Filet décoratif » de l'éditeur
 * quand la cliente ajoute un trait sous un titre qui n'en avait pas : le trait
 * suit donc l'alignement du titre — centré sous un titre centré, à droite sous
 * un titre aligné à droite, à gauche sinon.
 */
.psyclassor-titre-filet::after {
	content: "";
	display: block;
	width: 54px;
	height: 2px;
	margin: 1.1rem 0 0;
	background-color: var(--psy-filet-couleur, var(--psy-filet-dore));
}

.psyclassor-titre-filet.has-text-align-center::after {
	margin-inline: auto;
}

.psyclassor-titre-filet.has-text-align-right::after {
	margin-left: auto;
}

/*
 * Trait retiré depuis la rubrique « Filet décoratif » de l'éditeur, sur un
 * titre qui en porte un par sa place dans la page (« Bienvenue ! », titres de
 * chapitre, « Coordonnées », accroche du bandeau d'accueil).
 *
 * !important justifié : les traits sont décrits par des sélecteurs de contexte
 * de spécificités diverses (jusqu'à 0-2-1). Une classe de retrait doit les
 * battre tous, y compris ceux qu'on ajoutera plus tard.
 */
.psyclassor-sans-filet::after {
	display: none !important;
}

.psyclassor-hero__accroche.psyclassor-sans-filet {
	padding-left: 0 !important;
	border-left: 0 !important;
}

/* --- 8.5 Sections alternées image / texte --------------------------------- */

/*
 * Composant unique de toutes les sections qui associent une photographie et un
 * bloc de texte. Deux classes suffisent, posées sur le groupe qui enveloppe un
 * bloc « Colonnes » à deux colonnes :
 *
 *   psyclassor-section-alternee              image à gauche, texte à droite
 *   psyclassor-section-alternee--inverse     texte à gauche, image à droite
 *
 * CONVENTION DE BALISAGE — la colonne qui porte l'image est TOUJOURS écrite en
 * premier, dans les deux variantes. Le modificateur « --inverse » se contente
 * de la renvoyer à droite sur grand écran. Deux bénéfices :
 *
 *   — sur téléphone, où les colonnes s'empilent, l'image se retrouve d'office
 *     au-dessus du texte qu'elle accompagne, sans aucune règle d'ordre ;
 *   — l'alternance se lit dans le balisage : une section est inversée ou elle
 *     ne l'est pas, la cliente peut la retourner depuis l'éditeur en ajoutant
 *     la classe, sans déplacer un seul bloc.
 *
 * Les sections écrites avant cette convention (texte d'abord) ne portent pas le
 * modificateur : elles gardent l'ordre de leur balisage, et la règle d'empilage
 * plus bas remonte quand même leur image en tête sur téléphone.
 */

/*
 * Gouttière entre les deux colonnes : de 40 px sur petit écran à 70 px sur
 * grand, la fourchette demandée par la cliente. La règle l'emporte volontiers
 * sur la classe de disposition générée par WordPress (spécificité 0-2-0 contre
 * 0-1-0) : l'écart entre les colonnes fait partie du rythme voulu pour le site,
 * ce n'est plus un simple repli. Les compositions ne fixent donc plus de
 * « blockGap » sur ces blocs « Colonnes » — cette déclaration en est l'unique
 * source.
 */
.psyclassor-section-alternee .wp-block-columns {
	max-width: 1120px;
	margin-inline: auto;
	gap: clamp(2.5rem, 4vw, 4.375rem);
}

/*
 * Le titre d'une section illustrée s'aligne sur le bord de ses colonnes, et
 * suit donc le même recentrage : sans cela il repartirait au bord de la zone
 * large et flotterait 85 px à gauche de son propre texte.
 */
.psyclassor-section-alternee > .wp-block-heading.alignwide {
	max-width: 1120px;
	margin-inline: auto;
}

/*
 * Respiration verticale. Les sections se suivaient sans marquer de pause, d'où
 * l'impression d'un empilement de blocs. L'espace entre deux sections illustrées
 * suit maintenant la largeur de l'écran.
 */
.psyclassor-section-alternee + .psyclassor-section-alternee {
	padding-top: clamp(1.5rem, 3vw, 3rem);
}

/*
 * Les photographies ne doivent plus dominer le texte qu'elles accompagnent :
 * la cliente demande des images « moins envahissantes », avec de la marge
 * autour.
 *
 * La réduction passe par la LARGEUR, jamais par un plafond de hauteur : borner
 * la hauteur obligerait à recadrer (object-fit: cover) et rognerait la
 * photographie — exactement ce que la consigne interdit. En agissant sur la
 * largeur, le rapport d'origine est conservé et la hauteur suit d'elle-même.
 *
 * La colonne d'image est en outre centrée : sur une image plus étroite que sa
 * colonne, l'espace se répartit des deux côtés au lieu de creuser un vide à
 * droite.
 */
.psyclassor-section-alternee .wp-block-image {
	max-width: 420px;
	margin-inline: auto;
}

/*
 * Alignement des deux colonnes sur leur bord haut. Quand le texte est plus long
 * que l'image — le cas de toutes les sections de présentation — un centrage
 * vertical décrochait le premier paragraphe du haut de la photographie, et
 * l'alternance perdait sa ligne de fuite. Le cœur écrit
 * `align-items: normal !important` sur .wp-block-columns : on passe donc par
 * align-self, colonne par colonne, plutôt que de surenchérir en !important.
 */
.psyclassor-section-alternee .wp-block-column {
	align-self: flex-start;
}

/*
 * Variante « --centree » (page « La psychothérapie ») : la photographie se
 * centre à la hauteur du texte — « centrer la photo », demande de septembre
 * 2026 — au lieu de se caler en haut. Le texte, lui, reste calé en haut de la
 * section quand il est plus long que l'image.
 */
.psyclassor-section-alternee--centree .wp-block-column:has( > .wp-block-image ) {
	align-self: center;
}

/*
 * Intertitre écrit DANS la colonne de texte (page « Qui suis-je »). Son bord
 * supérieur s'aligne alors sur celui de la photographie voisine : plus de
 * décalage entre la photo et le titre. Aucune marge au-dessus, et un peu
 * moins que l'écart de blocs en dessous.
 */
.psyclassor-section-alternee .wp-block-column > .psyclassor-titre-colonne {
	margin-top: 0 !important;
	margin-bottom: 0.4rem;
	line-height: 1.25;
}

/*
 * Variante inversée, sur grand écran uniquement. Sous 782 px le cœur empile les
 * colonnes : l'ordre doit alors revenir à celui du balisage, image en tête.
 */
@media (min-width: 782px) {

	.psyclassor-section-alternee--inverse > .wp-block-columns > .wp-block-column:first-child {
		order: 2;
	}
}

/*
 * Paragraphes des sections illustrées : fer à gauche, SANS césure. La
 * justification avec coupure des mots, demandée dans un premier temps, est
 * abandonnée : la cliente demande d'« éviter les coupures de mots à droite de
 * la colonne » (septembre 2026), et une colonne justifiée sans césure creuse
 * des blancs entre les mots. « text-wrap: pretty » équilibre les fins de
 * ligne là où le navigateur le sait faire.
 *
 * Seuls les paragraphes DIRECTEMENT enfants d'une colonne sont visés ; un
 * alignement choisi dans l'éditeur (centré, à droite) reste prioritaire.
 */
.psyclassor-section-alternee .wp-block-column > p:not([class*="has-text-align-"]) {
	text-align: left;
	hyphens: manual;
	-webkit-hyphens: manual;
	text-wrap: pretty;
}

/*
 * Photographies : jamais déformées. La largeur suit la colonne, la hauteur
 * reste libre, donc le rapport d'origine est conservé quelle que soit la
 * largeur de l'écran. Aucune bordure ni ombre n'est ajoutée : la cliente n'en
 * veut pas autour des images.
 */
.psyclassor-section-alternee .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Sections de texte sans illustration, intercalées entre des sections en colonnes
 * alternées. Sans cette règle, elles se recentrent sur la largeur de contenu
 * (750 px) et paraissent décalées vers la droite par rapport aux sections
 * illustrées, dont le texte occupe la colonne de gauche.
 *
 * `!important` est ici justifié : WordPress centre les enfants d'un groupe
 * « constrained » avec `.is-layout-constrained > :where(…) { margin-left: auto
 * !important }`. Aucune déclaration ordinaire, quelle que soit sa spécificité, ne
 * peut passer devant. C'est le seul moyen d'aligner ces sections à gauche sans
 * renoncer au layout contraint, dont la cliente a besoin dans l'éditeur.
 */
.wp-block-group.psyclassor-section-simple > * {
	max-width: 55%;
	margin-left: 0 !important;
	margin-right: auto !important;
}

@media (max-width: 781px) {

	.wp-block-group.psyclassor-section-simple > * {
		max-width: 100%;
	}
}

/*
 * Sous 782 px — le seuil auquel le cœur empile les colonnes — la colonne qui
 * porte l'image passe toujours en tête. Avec la convention de balisage décrite
 * plus haut, elle y est déjà : cette règle ne sert donc qu'aux sections écrites
 * avant elle, dont le texte vient en premier. :has() n'est pas indispensable :
 * là où il manque, les colonnes restent dans l'ordre du document, ce qui reste
 * lisible. La seconde forme sert aux compositions qui préfèrent marquer la
 * colonne d'image par une classe explicite.
 */
@media (max-width: 781px) {

	.psyclassor-section-alternee .wp-block-column:has( > .wp-block-image ),
	.psyclassor-section-alternee .psyclassor-section-alternee__image {
		order: -1;
	}
}

/* --- 8.5 bis 2 Chapitres de la page « Mon approche » ---------------------- */

/*
 * Les intermèdes de texte seul (« Le RITMO © ») s'alignent sur les colonnes
 * des sections illustrées qui les entourent : celles-ci se centrent dans
 * 1120 px, tandis que la section simple partait du bord de la zone large —
 * son titre flottait donc à 85 px à gauche de ses voisins. Le retrait latéral
 * recrée exactement la même géométrie ; en deçà de 1120 px, il disparaît.
 */
.psyclassor-chapitre .psyclassor-section-simple > * {
	/*
	 * Le retrait est porté par les ENFANTS et non par un padding de section :
	 * un pourcentage de padding se réfère au bloc conteneur du chapitre
	 * (1360 px ici), quand celui d'une marge d'enfant se réfère à la boîte
	 * large de la section (1290 px) — la même que celle des colonnes voisines.
	 * Le !important répond à celui du réglage général des sections simples,
	 * défini plus haut ; à spécificité égale, la dernière déclaration gagne.
	 */
	max-width: min(62ch, 1120px);
	margin-left: max(0px, calc((100% - 1120px) / 2)) !important;
}

/*
 * Les deux grands chapitres de la page : la psychologie des profondeurs, puis
 * les méthodes psycho-corporelles.
 *
 * Rien ne les distinguait — leurs titres se lisaient au même niveau que ceux
 * des méthodes, et la page se parcourait comme une suite de sections de même
 * poids. Chacun devient un bandeau pleine largeur, de teinte propre, ouvert par
 * son titre centré : on voit d'un coup d'œil que la page compte deux parties, et
 * où chacune commence.
 *
 * L'alternance des fonds — ivoire pour le premier, blanc cassé pour le second —
 * suffit à les séparer : aucun filet, aucun encadré, rien qui durcisse.
 */
.psyclassor-chapitre__titre {
	max-width: 22ch;
	margin-inline: auto;
	margin-bottom: var(--wp--preset--spacing--50);
	font-size: calc((clamp(1.6rem, 2.8vw, 2.1rem)) * var(--psy-echelle-titres));
	line-height: 1.25;
}

/*
 * Un filet doré très court sous le titre, comme sur « Bienvenue ! » de
 * l'accueil : c'est le même signe pour la même fonction — annoncer une partie.
 */
.psyclassor-chapitre__titre::after {
	content: "";
	display: block;
	width: 54px;
	height: 2px;
	margin: 1.2rem auto 0;
	background-color: var(--psy-filet-couleur, var(--psy-filet-dore));
}

/*
 * Les sections intérieures ne portent plus ni fond ni retrait horizontal : le
 * bandeau du chapitre s'en charge. Sans cela, on obtiendrait un aplat dans un
 * aplat, et la lecture des deux niveaux se brouillerait.
 */
.psyclassor-chapitre .psyclassor-section-alternee,
.psyclassor-chapitre .psyclassor-section-simple {
	background: none;
}

/*
 * Les sous-titres des méthodes descendent d'un cran : dans un chapitre qui
 * porte déjà son titre, ils annoncent une méthode, pas une partie.
 */
.psyclassor-chapitre--methodes h3 {
	font-size: calc((clamp(1.25rem, 1.9vw, 1.5rem)) * var(--psy-echelle-titres));
}

/* --- 8.5 ter Citation posée sous une photographie ------------------------- */

/*
 * Une citation qui accompagne une photographie ne se lit pas comme une citation
 * dans un flux de texte. Elle vit ici DANS la colonne de l'image, juste en
 * dessous : elle en épouse la largeur, s'aligne sur son bord gauche, et se lit
 * comme une légende de belle taille.
 *
 * Ni filet vertical ni retrait : le filet de theme.json, pensé pour une citation
 * isolée au fil du texte, la décalerait de l'image qu'elle commente.
 */
.psyclassor-citation-sous-image {
	/*
	 * La même largeur que la photographie, et le même centrage dans la colonne :
	 * sans cela la citation s'étalait sur toute la colonne et son premier mot
	 * commençait une trentaine de pixels à gauche du bord de l'image. Elle s'y
	 * aligne maintenant exactement.
	 */
	max-width: 420px;
	margin: 1.4rem auto 0;
	padding: 0;
	border: 0 !important;
	/* Centrée sous l'image (demande de septembre 2026). */
	text-align: center;
}

.psyclassor-citation-sous-image p {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.55;
}

.psyclassor-citation-sous-image cite {
	display: block;
	margin-top: 0.7rem;
	color: var(--psy-encre-douce);
	font-size: 0.78rem;
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --- 8.5 quater Page Contact : coordonnées et formulaire ------------------ */

/*
 * Deux colonnes inspirées des références transmises par la cliente :
 * beaucoup de blanc, un formulaire compact posé sur un simple fond crème
 * arrondi — ni carte massive, ni ombre appuyée.
 */
.psyclassor-contact__grille {
	max-width: 980px;
	margin-inline: auto;
	gap: clamp(2rem, 5vw, 4.5rem);
}

.psyclassor-contact__coordonnees h2 {
	margin-bottom: var(--wp--preset--spacing--40);
}

.psyclassor-contact__coordonnees h2::after {
	content: "";
	display: block;
	width: 54px;
	height: 2px;
	margin-top: 1rem;
	background-color: var(--psy-filet-couleur, var(--psy-filet-dore));
}

.psyclassor-contact__adresse {
	line-height: 1.85;
}

.psyclassor-contact__ligne {
	margin-block: 0.4rem;
}

/*
 * Téléphone et courriel : dans l'encre du texte, jamais en doré — la cliente
 * demande que « les écritures » de cette page ne soient pas dans le jaune doré
 * de son futur logo. Seul le filet sous le titre « Coordonnées » reste doré.
 */
.psyclassor-contact__ligne a {
	color: var(--psy-encre);
	text-decoration: underline;
	text-decoration-color: var(--psy-filet-marque);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.psyclassor-contact__ligne a:hover,
.psyclassor-contact__ligne a:focus-visible {
	color: var(--psy-encre);
	text-decoration-color: var(--psy-encre);
}

/* Le formulaire n'a plus d'encadré : il se pose nu, borné en largeur. */
.psyclassor-contact .psyclassor-bloc-formulaire {
	max-width: 520px;
	padding: 0;
}

.psyclassor-contact .psyclassor-bloc-formulaire > p {
	margin-bottom: 0.5rem;
	color: var(--psy-encre-douce);
}

/* --- 8.5 quinquies Les deux accès de la page Accompagnements --------------- */

/*
 * Deux vignettes crème strictement identiques, VOLONTAIREMENT PETITES, avec une
 * large marge de part et d'autre : « bien réduire la taille des vignettes,
 * laisser une bonne marge des deux côtés » (septembre 2026), puis, à la
 * livraison des illustrations, « des vignettes plus petites, toujours des
 * grandes marges sur les côtés ». La grille est bornée à 640 px, soit deux
 * cartes d'environ 300 px sur grand écran.
 *
 * Chaque vignette porte une ILLUSTRATION au trait doré fournie par la cliente,
 * et non plus une photographie : le dessin est affiché entier, centré, dans un
 * cadre de hauteur fixe. Ni bordure ni crédit.
 *
 * Les deux fichiers sont des dessins sur fond blanc ou crème, sans
 * transparence : posés tels quels, ils feraient un carré clair sur la carte.
 * Le mode de fusion « multiply » ne garde que le trait — un blanc multiplié
 * par le fond de la carte donne exactement ce fond — et le dessin semble
 * tracé directement sur la carte.
 */
/*
 * Le bloc « Colonnes » est en alignement large : le cœur lui écrit une largeur
 * de 1290 px avec une spécificité de 0,2,0. Trois classes suffisent à passer
 * devant, sans !important.
 */
.psyclassor-choix .psyclassor-choix__grille.alignwide {
	max-width: 640px;
	margin-inline: auto;
	gap: clamp(1.25rem, 3vw, 2.5rem);
}

.psyclassor-choix__carte {
	height: 100%;
	padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1rem, 1.6vw, 1.25rem) clamp(1.5rem, 2.5vw, 2rem);
	transition:
		box-shadow var(--psy-transition),
		transform var(--psy-transition);
}

.psyclassor-choix__carte:hover,
.psyclassor-choix__carte:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--psy-ombre-posee);
}

.psyclassor-choix__image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 200px;
	margin: 0 auto 0.5rem;
}

.psyclassor-choix__image a {
	display: block;
	height: 100%;
}

.psyclassor-choix__image img {
	display: block;
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	/*
	 * Le fond des dessins n'est pas un blanc pur (crème, grain de papier) : le
	 * filtre le pousse au blanc avant la fusion, sans quoi un carré à peine plus
	 * sombre que la carte restait visible. Le trait doré, lui, s'éclaircit à
	 * peine.
	 */
	filter: brightness(1.08) contrast(1.15);
	mix-blend-mode: multiply;
	transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.psyclassor-choix__carte:hover .psyclassor-choix__image img,
.psyclassor-choix__carte:focus-within .psyclassor-choix__image img {
	transform: scale(1.05);
}

.psyclassor-choix__titre {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: calc((clamp(1.25rem, 1.8vw, 1.5rem)) * var(--psy-echelle-titres));
}

.psyclassor-choix .wp-block-button__link {
	padding: 0.7rem 1.7rem;
	font-size: 0.88rem;
}

/* --- 8.5 sexies Cartes légendées de l'accueil ------------------------------ */

/*
 * Le titre vit DANS la photographie, posé sur son bord bas — c'est la
 * composition de la maquette retenue. Le dégradé ne couvre que le bas de
 * l'image, juste derrière le texte : jamais de voile sur toute la photo.
 */
/*
 * Les colonnes du trio ne s'étirent pas : par défaut, chaque colonne prend la
 * hauteur de la RANGÉE — c'est-à-dire celle de la colonne décalée du milieu
 * (photo + 52 px de décalage). La carte, qui remplit sa colonne, devenait plus
 * haute que sa photographie de la valeur du décalage des voisines, et le titre
 * ancré à son bas retombait sur le beige de la section. Chaque colonne garde
 * désormais sa hauteur propre : carte et photographie coïncident exactement.
 */
.psyclassor-acces-trio .wp-block-columns > .wp-block-column {
	align-self: flex-start;
	margin-top: 0;
}

.psyclassor-carte--legende {
	position: relative;
	height: auto;
	/*
	 * La carte épouse exactement la hauteur de la photographie : l'audit a
	 * montré 52 px de flux résiduel sous la figure (marges par défaut du bloc
	 * image), qui faisaient atterrir le titre — ancré au bas de la carte — sur
	 * le beige de la section au lieu du bas de la photo (1,46:1). Tout ce qui
	 * n'est pas la figure est hors flux ; la figure ne porte plus de marge.
	 */
	display: flex;
	flex-direction: column;
}

.psyclassor-carte--legende .psyclassor-carte__image,
.psyclassor-carte--legende figure {
	margin: 0 !important;
}

.psyclassor-carte--legende .psyclassor-carte__image {
	position: relative;
}

.psyclassor-carte--legende .psyclassor-carte__image::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 110px;
	/* Même force commune que les bandeaux : un seul réglage pour tout le site. */
	background-image: linear-gradient(to top,
		rgba(48, 55, 47, calc(0.55 * var(--psy-voile-force))) 0%,
		rgba(48, 55, 47, calc(0.28 * var(--psy-voile-force))) 55%,
		rgba(48, 55, 47, 0) 100%);
	pointer-events: none;
}

.psyclassor-carte--legende .psyclassor-carte__titre {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	margin: 0;
	padding: 0 1.4rem 1.1rem !important;
	color: var(--wp--preset--color--blanc);
	font-size: calc((clamp(1.2rem, 1.7vw, 1.45rem)) * var(--psy-echelle-titres));
	/* Centré sur la photographie (demande de septembre 2026). */
	text-align: center;
	text-shadow: 0 1px 12px rgba(48, 55, 47, 0.5);
}

.psyclassor-carte--legende .psyclassor-carte__titre a {
	color: inherit;
}

/*
 * Le crédit photographique se pose SUR la photographie, en haut à droite, en
 * tout petit blanc : il reste lisible (l'ombre l'y aide) sans occuper la ligne
 * du bas, où vit désormais le titre. Les cartes avec et sans crédit ont ainsi
 * exactement la même géométrie.
 */
.psyclassor-carte--legende .psyclassor-carte__credit {
	position: absolute;
	top: 0.55rem;
	right: 0.9rem;
	bottom: auto;
	left: auto;
	z-index: 1;
	min-height: 0;
	margin: 0;
	padding: 0;
	color: var(--wp--preset--color--blanc);
	font-size: 0.68rem;
	opacity: 0.85;
	text-shadow: 0 1px 8px rgba(48, 55, 47, 0.65);
}

/* La compensation de hauteur n'a plus d'objet : plus rien sous l'image. */
.psyclassor-acces-trio .psyclassor-carte--legende:not(:has(.psyclassor-carte__credit)) .psyclassor-carte__titre {
	margin-top: 0;
}

/* --- 8.6 Publication (page « Articles ») ---------------------------------- */

.psyclassor-publication {
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--gris-clair);
}

/*
 * Référence de parution. L'opacité plutôt qu'une couleur de service, absente de
 * la palette : le gris du texte à 85 % se compose en #6f6e6e sur blanc (5,08:1) et
 * en #6d6c6c sur le gris clair du fond réellement employé (4,55:1). Les deux
 * dépassent le 4,5:1 exigé pour du petit texte, mais de peu sur le gris clair :
 * ne pas descendre l'opacité en dessous de 0,85, sous peine de passer sous le
 * seuil. La mention s'efface derrière le titre sans devenir difficile à lire.
 */
.psyclassor-publication__source {
	color: var(--wp--preset--color--texte);
	font-size: var(--wp--preset--font-size--petit);
	font-style: italic;
	opacity: 0.85;
}

/*
 * Dernière ligne de la publication : le lien vers le texte, ou l'emplacement en
 * attente tant que la cliente n'a fourni ni adresse ni PDF. Elle est détachée du
 * résumé pour se repérer d'un coup d'œil, sans l'effacement appliqué à la
 * référence de parution : c'est la seule ligne de la carte qui deviendra
 * cliquable.
 */
.psyclassor-publication__lien {
	margin-top: var(--wp--preset--spacing--30);
	margin-bottom: 0;
}

/*
 * La publication est posée sur un fond gris clair : le vert profond des liens du
 * site n'y donne que 3,94:1, en deçà des 4,5:1 exigés pour ce petit texte. Le
 * bleu-gris de la charte — la couleur sombre la plus proche du vert profond dans
 * la palette — y donne 9,17:1. C'est la règle générale de la section 8.8 qui
 * l'applique ; elle est répétée ici pour que la classe reste juste même si la
 * cliente retire le fond de la carte (10,55:1 sur blanc).
 */
.psyclassor-publication__lien a {
	font-weight: 600;
}

/* --- 8.7 Lien « En savoir plus » ------------------------------------------ */

/*
 * La classe est portée soit par un lien nu, soit — dans les compositions
 * actuelles — par un bloc core/button. Plus aucune flèche : la cliente demande
 * de « retirer la petite flèche » des boutons (septembre 2026). Sur un bouton,
 * la classe ne change donc plus rien ; sur un lien nu, elle ne règle que la
 * couleur et le soulignement.
 */
a.psyclassor-lien-savoir-plus {
	display: inline-flex;
	align-items: center;
	font-weight: 600;
	text-decoration: none;
}

a.psyclassor-lien-savoir-plus:hover,
a.psyclassor-lien-savoir-plus:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--psy-soulignement-menu);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* --- 8.8 Liens sur les fonds teintés de la charte ------------------------- */

/*
 * Cette section forçait la couleur des liens sur les fonds teintés. Elle est
 * retirée, pour deux raisons.
 *
 * D'abord, ses prémisses ne valent plus. Elle avait été écrite pour une palette
 * antérieure — vert profond #577d7d, beige #e8e1d3, gris clair #efefef, et deux
 * couleurs « pêche » qui n'existent plus — où la couleur des liens n'atteignait
 * pas 4,5:1 sur ces fonds. La palette actuelle a changé sans que la règle suive :
 * le vert profond #34443b donne aujourd'hui 10,31:1 sur le blanc, 9,54:1 sur le
 * blanc cassé, 8,22:1 sur le gris clair et 7,09:1 sur le beige. La correction
 * n'avait donc plus d'objet.
 *
 * Ensuite, elle produisait l'inverse de son intention. Le remplacement visait le
 * bleu-gris sombre #394044 ; la règle pointait sur le taupe de la palette, devenu
 * #c9b585 — une couleur claire, qui donnait 1,38:1 sur le beige et 2,01:1 sur le
 * blanc. Les liens concernés étaient illisibles.
 *
 * Les liens prennent maintenant partout la couleur réglée dans WordPress
 * (Apparence → Éditeur → Styles → Couleurs → Liens), ce qui les rend modifiables
 * par la cliente. Toute couleur de lien choisie doit rester au-dessus de 4,5:1
 * sur le blanc et sur le beige, les deux fonds courants du site.
 */

/*
 * Exception : les cartes posent leur propre fond blanc à l'intérieur d'un bandeau
 * teint (accueil, accompagnement). Leur titre reste donc noir sur blanc — 21:1 —
 * comme le veut la charte, et non bleu-gris. La double classe passe devant la
 * règle ci-dessus sans recourir à !important.
 */
.psyclassor-carte .psyclassor-carte__titre a {
	color: inherit;
}

/* --- 8.9 Questions fréquentes : bloc « Détails » -------------------------- */

/*
 * Les règles visent le bloc core/details lui-même, et pas seulement la classe
 * psyclassor-faq posée par la composition : un accordéon que la cliente
 * insérerait à la main depuis l'éditeur reçoit ainsi la même mise en forme.
 *
 * Le repère natif (triangle) est remplacé par un « + » qui pivote en « × » à
 * l'ouverture : le glyphe est porté par un pseudo-élément, il n'est donc jamais
 * annoncé par les lecteurs d'écran — l'état ouvert/fermé reste porté par
 * l'élément details lui-même, que les lecteurs d'écran restituent nativement.
 */
.wp-block-details summary {
	position: relative;
	padding-right: 2.25rem;
	color: var(--wp--preset--color--noir);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	transition: color 0.25s ease;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary:hover {
	color: var(--wp--preset--color--vert-profond);
}

.wp-block-details summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 0.25rem;
	color: var(--wp--preset--color--vert-profond);
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1;
	transform: translateY(-50%);
	transition: transform 0.25s ease;
}

/* Le « + » pivote d'un quart de tour et devient « × » : signe de fermeture. */
.wp-block-details[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
}

/* Un peu d'air entre la question ouverte et sa réponse. */
.wp-block-details[open] summary {
	margin-bottom: 0.5rem;
}

/* --- 8.10 Frise des repères (page « Mon parcours ») ----------------------- */

/*
 * Une liste ordinaire, mise en forme en frise verticale : pastille vert d'eau,
 * filet beige entre les étapes. Sans cette feuille, elle redevient une liste à
 * puces parfaitement lisible — la structure ne dépend pas du décor.
 */
ul.psyclassor-parcours {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.psyclassor-parcours__etape {
	position: relative;
	margin: 0;
	padding: 0 0 1.75rem 2.25rem;
}

.psyclassor-parcours__etape:last-child {
	padding-bottom: 0;
}

/* La pastille, calée sur la première ligne de texte. */
.psyclassor-parcours__etape::before {
	content: "";
	position: absolute;
	top: 0.5em;
	left: 0;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--vert-eau);
}

/* Le filet qui relie la pastille à l'étape suivante. */
.psyclassor-parcours__etape::after {
	content: "";
	position: absolute;
	top: calc(0.5em + 1rem);
	bottom: 0.25rem;
	left: calc(0.375rem - 1px);
	width: 2px;
	background-color: var(--wp--preset--color--beige);
}

.psyclassor-parcours__etape:last-child::after {
	display: none;
}

/* L'intitulé de l'étape se détache du détail qui suit. */
.psyclassor-parcours__etape strong {
	color: var(--wp--preset--color--noir);
	font-weight: 600;
}

/* --- 8.11 Page 404 --------------------------------------------------------- */

/*
 * Le grand nombre est purement décoratif (aria-hidden dans le gabarit) : sa
 * couleur beige, très claire sur le fond blanc, est assumée — l'information
 * « Page introuvable » est portée par le titre qui suit.
 */
.psyclassor-404__code {
	margin: 0;
	color: var(--wp--preset--color--beige);
	font-family: var(--wp--preset--font-family--titre);
	font-size: clamp(6rem, 18vw, 10rem);
	font-weight: 700;
	line-height: 1;
	text-align: center;
}

/* Le champ de recherche ne s'étire pas sur toute la zone de contenu. */
.psyclassor-404 .wp-block-search {
	max-width: 480px;
	margin-inline: auto;
}

/* --- 8.11 quater Page de présentation « Qui suis-je ? » -------------------- */

/*
 * La cliente trouve le texte de présentation un peu gros et souhaite une
 * composition plus sobre : portrait à gauche, texte à droite, dans l'esprit des
 * pages de présentation d'autres praticiennes qu'elle a montrées.
 *
 * La réduction typographique est volontairement CONFINÉE à cette page, par la
 * classe psyclassor-presentation posée sur ses deux sections. Le reste du site
 * garde le corps de texte de la charte (1,125 rem, soit 18 px) : rien n'est
 * réduit globalement.
 *
 *   — ordinateur : 1,0625 rem = 17 px, interligne 1,7 (la fourchette demandée
 *     va de 1,65 à 1,75) ;
 *   — téléphone  : 1 rem = 16 px, même interligne.
 *
 * Les titres ne suivent pas cette réduction : la hiérarchie entre le titre du
 * bandeau, les intertitres et les paragraphes reste franche.
 */
.psyclassor-presentation p,
.psyclassor-presentation li {
	font-size: 1.0625rem;
	line-height: 1.7;
}

/*
 * Largeur de lecture. Une ligne trop longue fatigue : au-delà d'environ
 * soixante-dix signes, l'œil peine à retrouver le début de la suivante. La
 * colonne de texte est donc plafonnée, sans être centrée — elle reste calée à
 * gauche de sa colonne, contre le portrait.
 */
.psyclassor-presentation .wp-block-column p,
.psyclassor-presentation > p {
	max-width: 62ch;
}

/*
 * La spirale de galets n'est pas une photographie de reportage comme les
 * autres : c'est un motif détouré, sans fond, qui accompagne le texte sans
 * chercher à remplir sa colonne. À pleine largeur, elle écrasait la section.
 * Elle est donc plafonnée et centrée dans sa colonne.
 *
 * Aucun fond, aucune bordure, aucune ombre : la cliente demande « spirale sans
 * fond », et la moindre couleur posée derrière apparaîtrait au travers du
 * détourage sous la forme d'un carré.
 */
.psyclassor-presentation .psyclassor-spirale img {
	max-width: 300px;
	margin-inline: auto;
	background: none;
	border: 0;
	box-shadow: none;
}

/*
 * Sous 782 px, WordPress empile les colonnes : le portrait passe alors
 * naturellement au-dessus du texte. On lui donne une largeur maximale pour
 * qu'il ne s'étale pas sur toute la page, et le corps de texte descend à 16 px.
 */
@media (max-width: 781px) {

	.psyclassor-presentation .wp-block-column:first-child {
		max-width: 320px;
		margin-inline: auto;
	}

	.psyclassor-presentation p,
	.psyclassor-presentation li {
		font-size: 1rem;
	}

	/* Sur une colonne unique, la limite en ch n'a plus lieu d'être. */
	.psyclassor-presentation .wp-block-column p,
	.psyclassor-presentation > p {
		max-width: none;
	}
}

/* --- 8.11 ter Phrase d'accroche d'une page -------------------------------- */

/*
 * Les documents de la cliente ouvrent certaines pages — « La psychothérapie »
 * notamment — sur une phrase détachée du texte courant : centrée, en italique,
 * dans un corps un peu plus grand. Elle annonce la page, comme un chapô.
 *
 * La largeur est resserrée sous celle de la zone de texte : une accroche se lit
 * d'un souffle, elle ne doit pas courir sur toute la ligne.
 */
.psyclassor-accroche-page {
	max-width: 34em;
	margin-inline: auto;
	margin-bottom: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--texte);
	line-height: 1.6;
}

/* --- 8.11 bis Citation alignée à droite ----------------------------------- */

/*
 * Une citation alignée à droite portait deux filets à la fois : celui de la
 * charte, en pêche à gauche (theme.json, bloc core/quote), et celui que le cœur
 * déplace à droite pour cet alignement — `.wp-block-quote.has-text-align-right`
 * reçoit `border-right: 4px solid` en gris du texte. Les deux se peignaient de
 * part et d'autre, dépareillés, ce qu'aucun visuel de la cliente ne montre.
 *
 * Le filet passe donc du côté vers lequel le texte est aligné, et reprend le
 * pêche de la charte. Les citations alignées à gauche, elles, ne sont pas
 * touchées : elles gardent le filet de theme.json.
 */
.wp-block-quote.has-text-align-right {
	padding-right: 1.5rem;
	padding-left: 0;
	border-right: 3px solid var(--psy-filet-dore);
	border-left: 0;
}

/* --- 8.12 Cartes de publication (page « Articles ») ------------------------ */

/*
 * Grille des publications : trois colonnes, deux sur tablette, une sur
 * téléphone. Le pattern déclare une disposition « grid » pour que l'éditeur
 * montre une grille ; le nombre de colonnes réellement servi est tenu ici,
 * comme pour les grilles d'articles de la section 5. La double classe passe
 * devant les règles de disposition générées par le cœur (0,1,0) sans
 * !important.
 */
/*
 * Grille resserrée et centrée : la cliente demande d'« agrandir les marges sur
 * les côtés de la page » (septembre 2026). 960 px au lieu de la zone large de
 * 1290 px, soit environ 165 px de marge de chaque côté sur un écran de 1440 px.
 */
.wp-block-group.psyclassor-grille-publications {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	max-width: 960px;
	margin-inline: auto;
}

@media (max-width: 992px) {

	.wp-block-group.psyclassor-grille-publications {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {

	.wp-block-group.psyclassor-grille-publications {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * La carte. Même langage que les cartes de l'accueil (section 4) : blanc,
 * arrondi 8 px, ombre légère, élévation discrète au survol — mais un contenu
 * éditorial complet : couverture, titre, référence, description.
 *
 * La double classe garantit le retrait nul face au padding que le cœur
 * applique à tout groupe muni d'un fond (voir section 4).
 */
.wp-block-group.psyclassor-publication-carte {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--gris-clair);
	border-radius: 8px;
	background-color: var(--wp--preset--color--blanc);
	box-shadow: var(--wp--preset--shadow--carte);
	transition:
		box-shadow 0.3s cubic-bezier(0.2, 0.7, 0.3, 1),
		transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.psyclassor-publication-carte:hover,
.psyclassor-publication-carte:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--flottant);
}

/*
 * La couverture, AGRANDIE et SANS aplat de couleur (demandes de septembre
 * 2026) : « mettre en valeur uniquement les couvertures de revues et les rendre
 * lisibles ». Le panneau beige a disparu ; la couverture se pose sur le blanc
 * de la carte, seule son ombre portée lui donne l'épaisseur d'une revue.
 *
 * Quatre des cinq visuels sont les vraies couvertures en bonne définition
 * (7 septembre 2026) ; celle des Cahiers jungiens reste une numérisation de
 * 190 px, un peu douce — la cliente en est prévenue. Les couvertures sont
 * présentées entières (object-fit: contain), jamais recadrées ni déformées.
 */
.psyclassor-publication-carte .psyclassor-publication-carte__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 420px;
	margin: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	background-color: transparent;
}

.psyclassor-publication-carte__figure a {
	display: flex;
	align-items: center;
	justify-content: center;
	max-height: 100%;
	/* Le zoom du pointeur annonce l'agrandissement au clic. */
	cursor: zoom-in;
}

/*
 * Toutes les couvertures à la MÊME HAUTEUR (demande du 7 septembre 2026) :
 * la hauteur est fixée et la largeur suit le rapport de chaque couverture —
 * les revues et les livres ont des proportions voisines (0,67 à 0,70), les
 * largeurs ne diffèrent donc que de quelques pixels. Une numérisation plus
 * petite que ce cadre (les Cahiers jungiens, 190 px de large) est agrandie à
 * la même hauteur que les autres : un peu douce, mais alignée.
 */
.psyclassor-publication-carte__figure img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 350px;
	object-fit: contain;
	border-radius: 2px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.psyclassor-publication-carte__figure a:hover img,
.psyclassor-publication-carte__figure a:focus-visible img {
	transform: scale(1.04);
}

/*
 * Repli si une couverture manque en médiathèque : le plugin d'init écrit alors
 * une adresse vide. L'image cassée est masquée et le panneau beige porte une
 * mention sobre — la carte reste entière et lisible.
 */
.psyclassor-publication-carte__figure img[src=""] {
	display: none;
}

.psyclassor-publication-carte__figure:has(img[src=""])::after {
	content: "Couverture à venir";
	color: var(--wp--preset--color--texte);
	font-size: var(--wp--preset--font-size--petit);
	font-style: italic;
}

/*
 * Le corps de la carte. Le pattern annule l'espacement de blocs (blockGap 0) :
 * chaque élément règle sa propre marge, ce qui garde des cartes compactes et
 * identiques quelle que soit la longueur des textes. La colonne flexible
 * pousse le mot-dièse au pied de la carte.
 */
.psyclassor-publication-carte__corps {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1.5rem 1.5rem 1.6rem;
}

.psyclassor-publication-carte__titre {
	margin: 0 0 0.45rem;
	font-size: calc((1.35rem) * var(--psy-echelle-titres));
	line-height: 1.3;
}

.psyclassor-publication-carte .psyclassor-publication__source {
	margin: 0 0 0.95rem;
}

.psyclassor-publication-carte__description {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
}

/*
 * Mot-dièse : une signature discrète, pas un lien — il n'y a rien à suivre.
 * Vert profond de la charte : 4,53:1 sur blanc, le seuil exigé pour ce corps.
 */
.psyclassor-publication-carte__hashtag {
	margin: 0;
	margin-top: auto;
	padding-top: 1rem;
	color: var(--wp--preset--color--vert-profond);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Un texte suit toujours le descriptif : l'auto ne joue que s'il y a du mou. */
.psyclassor-publication-carte__description + .psyclassor-publication-carte__hashtag {
	margin-top: auto;
}

/*
 * Zone d'action, au pied de la carte. Deux formes s'y succèdent selon la
 * publication, et la différence doit se voir avant même de lire :
 *
 *   — un bouton plein pour les trois articles dont la cliente a fourni le tiré
 *     à part : le fichier est ici, le clic le télécharge ;
 *   — un simple lien fléché pour les deux autres, qui mènent au site de
 *     l'éditeur. C'est le composant décrit en section 9.9.
 *
 * Un bouton pour l'un, un lien pour l'autre : le visiteur sait donc s'il obtient
 * un document ou s'il quitte le site, sans avoir à survoler quoi que ce soit.
 *
 * `margin-top: auto` colle la zone au bas de la carte : quelle que soit la
 * longueur des descriptions, tous les boutons d'une même rangée s'alignent.
 */
.psyclassor-publication-carte__action {
	margin-top: auto;
	padding-top: 1.15rem;
}

.psyclassor-publication-carte__action .wp-block-button {
	width: 100%;
}

.psyclassor-publication-carte__action .wp-block-button__link {
	display: block;
	width: 100%;
	padding: 0.7rem 1rem;
	font-size: 0.78rem;
	text-align: center;
}

/*
 * Poids du fichier, sous le bouton. Une information de service : discrète, mais
 * présente avant le clic — sur un téléphone en itinérance, télécharger un
 * mégaoctet sans le savoir n'est pas anodin.
 */
.psyclassor-publication-carte__poids {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--texte);
	font-size: 0.8rem;
	text-align: center;
}

/* --- 8.13 Visionneuse d'images (lightbox) ---------------------------------- */

/*
 * Construite par assets/js/lightbox.js, jamais présente dans le balisage
 * initial : sans JavaScript, ces règles ne s'appliquent à rien et les liens
 * ouvrent directement le fichier image.
 *
 * Le fond sombre est volontairement presque opaque : c'est lui qui « assombrit
 * légèrement l'arrière-plan » et donne à la couverture toute la lumière. Le
 * blanc de la légende y garde un contraste supérieur à 12:1.
 */
.psyclassor-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3.5rem clamp(1rem, 6vw, 4.5rem);
	background-color: rgba(21, 26, 29, 0.88);
	animation: psyclassor-lightbox-entree 0.25s ease both;
}

.psyclassor-lightbox[hidden] {
	display: none;
}

@keyframes psyclassor-lightbox-entree {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.psyclassor-lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	margin: 0;
}

/*
 * L'image agrandie : entière, jamais recadrée, jamais plus grande que l'écran.
 * Le fond blanc évite qu'une image à zones transparentes ne se dissolve dans
 * le fond sombre.
 */
.psyclassor-lightbox__image {
	display: block;
	max-width: min(100%, 1000px);
	max-height: 76vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
	background-color: var(--wp--preset--color--blanc);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.psyclassor-lightbox__legende {
	margin-top: 1rem;
	color: var(--wp--preset--color--blanc);
	font-size: var(--wp--preset--font-size--petit);
	text-align: center;
}

/*
 * Les trois boutons : cibles de 44 px (WCAG 2.5.8), lisibles sur le fond
 * sombre, survol pêche conforme à la charte des boutons du site.
 */
.psyclassor-lightbox__bouton {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.14);
	color: var(--wp--preset--color--blanc);
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

/*
 * L'attribut hidden posé par le script (galerie d'une seule image) doit
 * l'emporter sur le display:flex ci-dessus : sans cette règle, le navigateur
 * peint quand même les flèches — c'est le comportement normal de hidden face à
 * un display explicite.
 */
.psyclassor-lightbox__bouton[hidden] {
	display: none;
}

.psyclassor-lightbox__bouton:hover {
	background-color: var(--wp--preset--color--dore);
	color: var(--wp--preset--color--noir);
}

/* Sur le fond sombre, c'est le liseré blanc qui rend le focus visible (section 10). */
.psyclassor-lightbox__bouton:focus-visible {
	outline: 2px solid var(--wp--preset--color--dore);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--blanc);
}

.psyclassor-lightbox__fermer {
	top: 1rem;
	right: 1rem;
}

.psyclassor-lightbox__precedent,
.psyclassor-lightbox__suivant {
	top: 50%;
	transform: translateY(-50%);
}

.psyclassor-lightbox__precedent {
	left: clamp(0.5rem, 2vw, 1.5rem);
}

.psyclassor-lightbox__suivant {
	right: clamp(0.5rem, 2vw, 1.5rem);
}

/* Sur téléphone, l'image prend la largeur et les flèches descendent sous elle. */
@media (max-width: 600px) {

	.psyclassor-lightbox {
		padding: 3.5rem 1rem 4.5rem;
	}

	.psyclassor-lightbox__image {
		max-height: 66vh;
	}

	.psyclassor-lightbox__precedent,
	.psyclassor-lightbox__suivant {
		top: auto;
		bottom: 0.75rem;
		transform: none;
	}

	.psyclassor-lightbox__precedent {
		left: calc(50% - 60px);
	}

	.psyclassor-lightbox__suivant {
		right: calc(50% - 60px);
	}
}

/* Une visionneuse n'a aucun sens sur papier. */
@media print {

	.psyclassor-lightbox {
		display: none;
	}
}

/* ==========================================================================
   9. Apparition au défilement et survol des photographies
   ========================================================================== */

/* --- 9.1 Apparition progressive des sections ------------------------------ */

/*
 * assets/js/animations.js pose « psyclassor-anim » sur les sections principales
 * au chargement, puis « psyclassor-anim--visible » lorsqu'elles entrent dans
 * l'écran. Les deux classes viennent du script, jamais du balisage : une page
 * servie sans JavaScript n'en porte aucune et s'affiche entière. Même lorsque
 * JavaScript est actif, l'état initial reste parfaitement lisible : il est
 * seulement un peu atténué et décalé. Une panne de l'observateur ne peut donc
 * jamais transformer une section en grande zone blanche.
 *
 * La classe --visible n'est jamais retirée : une section déjà lue ne se
 * redissimule pas quand on remonte la page.
 *
 * Le mouvement est court et vertical, sans rebond ni rotation : la section monte
 * de douze pixels en gagnant légèrement en netteté, rien de plus.
 */
.psyclassor-anim {
	opacity: 0.88;
	transform: translateY(12px);
	/*
	 * Le retard vient du script, qui écrit --psyclassor-retard sur les éléments
	 * d'une même cascade. Sa valeur par défaut est nulle : une section isolée
	 * apparaît sans attendre.
	 */
	transition:
		opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--psyclassor-retard, 0ms),
		transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--psyclassor-retard, 0ms);
	will-change: opacity, transform;
}

.psyclassor-anim--visible {
	opacity: 1;
	transform: translateY(0);
	/* L'animation est jouée : le navigateur peut relâcher la couche dédiée. */
	will-change: auto;
}

/*
 * Les cartes montent d'un peu plus haut et s'agrandissent très légèrement en
 * arrivant : le mouvement se remarque sans jamais devenir une acrobatie.
 */
.psyclassor-carte.psyclassor-anim,
.psyclassor-publication-carte.psyclassor-anim,
.wp-block-column.psyclassor-anim {
	transform: translateY(16px);
}

.psyclassor-carte.psyclassor-anim--visible,
.psyclassor-publication-carte.psyclassor-anim--visible,
.wp-block-column.psyclassor-anim--visible {
	transform: translateY(0);
}

/*
 * Les images des sections alternées se dévoilent en montant, un peu plus
 * longtemps que le texte, ce qui donne de la profondeur sans retarder la
 * lecture.
 *
 * Elles se dévoilaient auparavant par un découpage animé (clip-path). C'est
 * abandonné : animer un découpage sur une image oblige le navigateur à la
 * rééchantillonner à chaque image, et le calque garde ensuite les traces de ce
 * rééchantillonnage — de petits rectangles visibles sur les aplats. La
 * translation et l'opacité obtiennent le même effet sans rien altérer.
 */
.psyclassor-section-alternee .wp-block-image.psyclassor-anim {
	transform: translateY(28px);
	transition:
		opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1) var(--psyclassor-retard, 0ms),
		transform 1s cubic-bezier(0.22, 0.61, 0.36, 1) var(--psyclassor-retard, 0ms);
}

.psyclassor-section-alternee .wp-block-image.psyclassor-anim--visible {
	transform: translateY(0);
}

/*
 * À l'impression, rien n'est jamais masqué : une page imprimée avant que
 * l'observateur n'ait révélé le bas du document sortirait autrement blanche.
 */
@media print {

	.psyclassor-anim {
		opacity: 1;
		transform: none;
	}
}

/* --- 9.2 Survol des photographies des sections alternées ------------------ */

/*
 * Même effet qu'au survol des cartes (section 4), pour les photographies des
 * sections image/texte : l'agrandissement est porté par l'image seule, le cadre
 * ne bouge pas. L'overflow hidden posé sur la figure est ce qui rend l'effet
 * possible sans que l'image déborde sur le texte voisin.
 *
 * :focus-within double :hover : une image cliquable doit réagir de la même façon
 * lorsqu'elle reçoit le focus au clavier. Sur une image sans lien, l'effet ne se
 * produit qu'au survol, ce qui est sans conséquence : il est purement décoratif.
 */
.psyclassor-section-alternee .wp-block-image {
	overflow: hidden;
}

.psyclassor-section-alternee .wp-block-image img {
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.psyclassor-section-alternee .wp-block-image:hover img,
.psyclassor-section-alternee .wp-block-image:focus-within img {
	transform: scale(1.05);
}

/* --- 9.3 Transitions des liens de navigation et des boutons --------------- */

/*
 * Les changements d'état — couleur, fond, trait de soulignement — s'installent en
 * un quart de seconde au lieu de claquer d'un coup. Aucune position n'est animée :
 * le pointeur ne peut pas « perdre » un lien qui se déplacerait sous lui.
 */
.psyclassor-nav-principale a,
.psyclassor-nav-pied a {
	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease,
		text-decoration-color 0.25s ease;
}

/* --- 9.4 Entrée du texte des bandeaux ------------------------------------- */

/*
 * À l'arrivée sur une page, les lignes du bandeau apparaissent l'une après
 * l'autre, en montant doucement — l'effet « en léger décalé » que la cliente
 * montre sur ses sites de référence. Mouvement strictement vertical, sans
 * rebond ; le décalage entre deux lignes est court, la dernière est en place
 * en moins de deux secondes. Le crédit photographique se pose en dernier.
 *
 * L'animation porte sur les ENFANTS de psyclassor-hero__contenu, jamais sur le
 * conteneur interne du bloc « Bannière » : c'est lui que hero-parallax.js
 * estompe et décale au défilement (l'effet de « disparition du texte », que
 * la cliente veut conserver) ; les deux effets ne se disputent donc pas la
 * même propriété. Neutralisée en section 11.
 */
@keyframes psyclassor-hero-ligne {

	from {
		opacity: 0;
		transform: translateY(22px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.psyclassor-hero__contenu > * {
	animation: psyclassor-hero-ligne 1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.psyclassor-hero__contenu > :nth-child(1) {
	animation-delay: 0.25s;
}

.psyclassor-hero__contenu > :nth-child(2) {
	animation-delay: 0.55s;
}

.psyclassor-hero__contenu > :nth-child(3) {
	animation-delay: 0.85s;
}

@keyframes psyclassor-hero-entree {

	from {
		opacity: 0;
	}

	to {
		opacity: 0.85;
	}
}

.psyclassor-hero__credit {
	animation: psyclassor-hero-entree 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 1.2s both;
}

/* --- 9.5 Boutons : couleur claire, d'un coup ------------------------------- */

/*
 * La cliente demande (septembre 2026) qu'au survol d'un bouton « une couleur
 * claire apparaisse d'un coup », sans « mouvement de gauche à droite » : le
 * balayage animé et le soulèvement sont retirés. Aucune transition : le
 * changement est immédiat, et aucune position n'est animée.
 *
 * Tous les boutons sont pleins, sans contour : la cliente demande de retirer
 * « le contour noir » des deux boutons de l'accueil, qui étaient les seuls en
 * style « contour ». La couleur de survol est celle de theme.json.
 */
.wp-element-button,
.wp-block-button__link {
	transition: none;
}

/* --- 9.6 Liens de texte : soulignement qui se déploie ---------------------- */

/*
 * Les liens du corps de texte gardent leur soulignement au repos — c'est ce qui
 * les distingue du texte, indépendamment de la couleur. Au survol, le trait
 * s'épaissit et s'éloigne doucement plutôt que de sauter.
 */
.wp-block-post-content a:where(:not(.wp-element-button)),
main a:where(:not(.wp-element-button):not(.psyclassor-nav-principale a)) {
	transition:
		color 0.25s ease,
		text-decoration-color 0.25s ease,
		text-underline-offset 0.25s ease;
}

main a:where(:not(.wp-element-button)):hover {
	text-underline-offset: 5px;
}

/* --- 9.7 Fil de progression de lecture ------------------------------------ */

/*
 * Posé par assets/js/interactions.js, jamais présent dans le balisage. Un trait
 * de trois pixels en haut de l'écran, dont seule la largeur change : aucune
 * mise en page n'est recalculée pendant le défilement.
 *
 * Il se peint au-dessus de l'en-tête collant (z-index 100) mais reste sous la
 * visionneuse (1000).
 */
.psyclassor-progression {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--vert-eau), var(--wp--preset--color--dore));
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}

/* La barre d'administration décale tout le haut de la page. */
.admin-bar .psyclassor-progression {
	top: 32px;
}

@media (max-width: 782px) {

	.admin-bar .psyclassor-progression {
		top: 46px;
	}
}

/* --- 9.8 Bouton « revenir en haut » --------------------------------------- */

/*
 * Posé lui aussi par assets/js/interactions.js. Il n'apparaît qu'après un écran
 * de défilement, en bas à droite, à distance des liens du pied de page.
 */
.psyclassor-haut {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 150;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 48 px : au-delà du minimum de 44 px exigé pour une cible tactile. */
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--taupe);
	color: var(--wp--preset--color--blanc);
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--wp--preset--shadow--flottant);
	animation: psyclassor-haut-entree 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.psyclassor-haut[hidden] {
	display: none;
}

@keyframes psyclassor-haut-entree {

	from {
		opacity: 0;
		transform: translateY(12px) scale(0.9);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Le pêche du survol donne 6,3:1 avec le noir : le contraste reste conforme. */
.psyclassor-haut:hover {
	background-color: var(--wp--preset--color--dore);
	color: var(--wp--preset--color--noir);
	transform: translateY(-3px);
}

/* --- 9.9 Cartes de publication ------------------------------------------- */

/*
 * Plus aucun lien vers le site des revues ou des éditeurs (demande de septembre
 * 2026). Ne restent que les liens vers les PDF fournis par la cliente : le
 * titre en prend la couleur au survol.
 */
/* Le titre de la carte mène à la même source : il en prend la couleur au survol. */
.psyclassor-publication-carte__titre a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}

.psyclassor-publication-carte__titre a:hover,
.psyclassor-publication-carte__titre a:focus-visible {
	color: var(--wp--preset--color--vert-profond);
}

/* La couverture est un lien : le pointeur l'annonce. */
.psyclassor-publication-carte__lien-image {
	cursor: pointer;
}

/* ==========================================================================
   10. Accessibilité : focus visible
   ========================================================================== */

/*
 * Indicateur de focus unique pour tous les éléments interactifs. Le contour
 * pêche est parfaitement visible sur les bandeaux sombres mais trop clair sur
 * fond blanc : le liseré noir collé à l'élément garantit le rapport de
 * contraste 3:1 exigé quel que soit l'arrière-plan.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.wp-block-navigation a:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--dore);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--noir);
}

/* Sur fond sombre — pied de page bleu-gris, bandeaux — c'est le liseré blanc qui assure le contraste. */
.psyclassor-footer a:focus-visible,
.psyclassor-hero a:focus-visible {
	box-shadow: 0 0 0 2px var(--wp--preset--color--blanc);
}

/* ==========================================================================
   10 bis. Détails d'interface
   ========================================================================== */

/*
 * Navigation par ancre — les liens de la page « Hypnose / Sophrologie » visent
 * les sections de « Mon approche ». Le défilement est adouci (remis à « auto »
 * par la règle générale de la section 11 quand le mouvement réduit est demandé),
 * et chaque titre porteur d'un identifiant s'arrête sous l'en-tête collant au
 * lieu de disparaître derrière lui : 160 px, comme le formulaire de contact.
 */
html {
	scroll-behavior: smooth;
}

:where(h1, h2, h3, h4, h5, h6)[id] {
	scroll-margin-top: 160px;
}

/*
 * Sélection de texte aux couleurs de la charte. Le noir sur pêche clair donne
 * 15,8:1 : très au-delà du seuil, quelle que soit la couleur du texte au repos.
 */
::selection {
	background-color: var(--wp--preset--color--beige);
	color: var(--wp--preset--color--noir);
}

/* ==========================================================================
   11. Mouvement réduit
   ========================================================================== */

/*
 * Une personne ayant demandé la réduction des animations ne doit percevoir
 * aucun mouvement : les scripts de parallaxe et d'en-tête s'arrêtent d'eux-mêmes,
 * ce bloc neutralise en plus tout ce que le CSS anime, y compris la réserve de
 * 30 % ménagée en haut des images de bandeau, devenue inutile.
 */
@media (prefers-reduced-motion: reduce) {

	/*
	 * Toutes les animations ajoutées pour la fluidité de la visite sont
	 * neutralisées d'un bloc : entrée du menu et du bandeau, cascade des
	 * sections et des cartes, respiration de la photographie, remplissage des
	 * boutons, dévoilement des images, apparition du bouton « revenir en haut ».
	 *
	 * Les éléments concernés doivent surtout rester VISIBLES : une animation
	 * neutralisée qui laisserait son état de départ (opacité nulle) rendrait la
	 * page vide. D'où les opacités et transformations remises à leur valeur
	 * d'arrivée, en plus de l'arrêt des animations.
	 */
	.psyclassor-nav-principale .wp-block-navigation-item,
	.psyclassor-header__logo img,
	.psyclassor-hero__contenu > *,
	.psyclassor-hero__credit,
	.wp-block-navigation__responsive-container.is-menu-open,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
	.psyclassor-haut {
		opacity: 1;
		transform: none;
		animation: none;
	}

	/* Le trait du menu est posé d'emblée sur la page courante, sans déploiement. */
	.psyclassor-nav-principale a::after {
		transition: none;
	}

	/* Le soulèvement du bouton « revenir en haut » est supprimé. */
	.psyclassor-haut:hover {
		transform: none;
	}

	/* Les images se montrent entières, sans rideau. */
	.psyclassor-section-alternee .wp-block-image.psyclassor-anim,
	.psyclassor-section-alternee .wp-block-image.psyclassor-anim--visible {
		transform: none;
	}

	/* Les cartes n'arrivent plus en cascade et ne changent pas d'échelle. */
	.psyclassor-carte.psyclassor-anim,
	.psyclassor-publication-carte.psyclassor-anim,
	.wp-block-column.psyclassor-anim {
		transform: none;
	}

	/*
	 * Le fil de progression reste affiché : ce n'est pas une animation mais un
	 * repère de position, au même titre que la barre de défilement. Seule sa
	 * transition disparaît, via la règle générale ci-dessous.
	 */

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms;
		animation-iteration-count: 1;
		scroll-behavior: auto;
		transition-duration: 0.001ms;
	}

	.psyclassor-header .wp-block-site-title,
	.psyclassor-header[data-defile="1"] .wp-block-site-title {
		transform: none;
	}

	/*
	 * Apparition des sections (section 9.1). animations.js ne pose déjà aucune
	 * classe lorsque cette préférence est active ; ces déclarations couvrent le cas
	 * où la préférence est modifiée alors que la page est ouverte, et celui d'une
	 * composition qui écrirait la classe à la main. Le contenu reste visible en
	 * toutes circonstances.
	 */
	.psyclassor-anim,
	.psyclassor-anim--visible {
		opacity: 1;
		transform: none;
	}

	/* Élévation et agrandissement au survol des cartes (sections 4, 8.12 et 9.2). */
	.psyclassor-carte:hover,
	.psyclassor-carte:focus-within,
	.psyclassor-carte:hover .psyclassor-carte__image img,
	.psyclassor-carte:focus-within .psyclassor-carte__image img,
	.psyclassor-publication-carte:hover,
	.psyclassor-publication-carte:focus-within,
	.psyclassor-publication-carte__figure a:hover img,
	.psyclassor-publication-carte__figure a:focus-visible img,
	.psyclassor-section-alternee .wp-block-image:hover img,
	.psyclassor-section-alternee .wp-block-image:focus-within img {
		transform: none;
	}

	/* Fondu d'ouverture de la visionneuse (section 8.13) : retiré tout à fait. */
	.psyclassor-lightbox {
		animation: none;
	}

	.psyclassor-hero.wp-block-cover .wp-block-cover__image-background {
		top: 0;
		height: 100%;
		transform: none;
		will-change: auto;
	}

	.psyclassor-hero .wp-block-cover__inner-container {
		opacity: 1;
		transform: none;
		will-change: auto;
	}

	/*
	 * Entrée du texte des bandeaux (section 9.4) : la durée d'animation est déjà
	 * quasi nulle par la règle générale, mais l'état « from » (invisible,
	 * décalé) pourrait clignoter un instant. L'animation est retirée tout à
	 * fait : le texte est là, immobile, dès le premier rendu.
	 */
	.psyclassor-hero__contenu > *,
	.psyclassor-hero__credit {
		animation: none;
		opacity: 1;
	}

	/* Le pivot du repère « + » des accordéons (section 8.9) devient instantané
	   par la règle générale ; l'état ouvert reste marqué par le « × ». */

	/* Les illustrations des deux accès (section 8.5 quinquies) ne s'agrandissent plus. */
	.psyclassor-choix__carte:hover .psyclassor-choix__image img,
	.psyclassor-choix__carte:focus-within .psyclassor-choix__image img,
	.psyclassor-choix__carte:hover,
	.psyclassor-choix__carte:focus-within {
		transform: none;
	}

	/*
	 * Rien à neutraliser pour le crédit des cartes (section 8.2) : sa
	 * transformation n'anime rien, elle le positionne. Aucune règle de ce bloc ne
	 * doit la remettre à none.
	 */
}