/*
 Theme Name:   Perinea & Sport
 Theme URI:    https://perinea-et-sport.fr
 Description:  Thème enfant GeneratePress pour Perinea & Sport (Levallois-Perret). Squelette du 27/08/2026 ; la direction artistique (palette nude, encre, blanc -- clients/perinea/palette-nude-2026-08-21.json) se compose dessus, jamais de couleur en dur hors tokens.
 Author:       Laurent Simon
 Author URI:   https://laurentsimon-seo.com/
 Template:     generatepress
 Version:      0.7.63
 Text Domain:  perinea-child
*/

/* ------------------------------------------------------------------------
   Forme des pages composées en blocs `ls/*`
   ------------------------------------------------------------------------
   Le corps de page reçoit `full-width-content` (functions.php) quand la page
   ouvre sur un `ls/hero`. Les sections `ls/*` portent elles-mêmes leur rythme
   vertical et leur conteneur interne : le thème ne doit ni les brider en
   largeur, ni ajouter de marge autour d'elles. Le texte courant, lui, garde
   une largeur de lecture -- une ligne pleine largeur est illisible.
   Retour de Monsieur, 03/09/2026 : « les pages ne sont pas en pleine largeur
   + il y a des marges en haut et en bas ».
   ------------------------------------------------------------------------ */

.full-width-content .site-content,
.full-width-content .content-area,
.full-width-content .site-main,
.full-width-content .inside-article {
	margin: 0;
	padding: 0;
	max-width: 100%;
}

/* ---- Rythme vertical -------------------------------------------------------
   Les blocs `ls/*` portent déjà leur propre `padding-block: var(--dt-space-section)` :
   entre deux d'entre eux, l'air existe. Ce qui manquait, c'est la respiration AUTOUR
   du texte courant, que la remise à zéro des marges avait supprimée -- deux sections
   se touchaient (retour de Monsieur, 04/09/2026). On rend donc au texte ses marges,
   et on ouvre franchement la jointure entre un bloc et le texte qui le suit ou le
   précède. */

.full-width-content .entry-content > [class*="dtb-"] {
	margin-block: 0;
}

/* Le texte qui suit une section, ou la section qui suit du texte : une respiration
   pleine, sinon la page se lit comme un seul pavé. */
.full-width-content .entry-content > [class*="dtb-"] + :not([class*="dtb-"]),
.full-width-content .entry-content > :not([class*="dtb-"]) + [class*="dtb-"] {
	margin-top: var(--dt-space-section);
}

/* Le fil d'Ariane appartient à ce qui le suit : il ne s'en détache pas. */
.full-width-content .entry-content > .dtb-breadcrumb + * {
	margin-top: var(--dt-space-2);
}

/* Le fil d'Ariane reste à gauche (« plus naturel ») mais sa bande se resserre en hauteur
   (retours de Monsieur, 05/09/2026 17h13 puis 17h43 : c'était la hauteur, pas la position).
   Préférence du site : le bloc garde son padding compact à la source. */
.full-width-content .entry-content > .dtb-breadcrumb {
	padding-block: var(--dt-space-1);
}

/* Le texte courant (titres, paragraphes, listes) garde sa largeur de lecture ;
   les sections `ls/*` gèrent la leur et sont exclues de cette contrainte.

   La colonne est en `rem`, JAMAIS en `ch` : l'unité `ch` dépend de la police de
   l'élément, si bien qu'un h2 en Montserrat 2,4rem prendrait presque le double de
   la largeur d'un paragraphe en Lora 1rem -- titres et texte se retrouveraient
   désalignés, chacun dans une colonne différente (mesuré à l'aperçu du 04/09). */
.full-width-content .entry-content > :not([class*="dtb-"]):not(.alignfull):not(.alignwide):not(.corps-section) {
	max-width: 44rem;
	margin-inline: auto;
	padding-inline: 1.5rem;
}

/* ---- Corps éditorial : colonne centrée et listes visuelles --------------------
   Historique : colonne centrée de 44 rem (04/09) ; grille titre à gauche / texte à droite (matin
   du 14/09) écartée ; texte aligné à gauche, lu comme « coupé au milieu » ; bandes alternées et
   silhouettes de mouvement en marge (fin d'après-midi du 14/09), écartées par Monsieur : « ça fait
   low cost ». Retenu, 14/09/2026 : fond uni ; chaque section du corps (`.corps-section`, fait
   `design.corps_en_sections`) a son titre centré et un bloc de texte centré de 46 rem aligné à
   gauche (UX-T1) ; les listes prennent la largeur du conteneur. */

.full-width-content .entry-content > .corps-section {
	box-sizing: border-box;
	max-width: calc(var(--dt-content-max) + 2 * var(--dt-space-3));
	margin-inline: auto;
	padding-inline: var(--dt-space-3);
}

/* WordPress enveloppe le contenu d'un groupe dans `.wp-block-group__inner-container` quand le
   thème ne déclare pas la mise en page des blocs (cas de GeneratePress), et GeneratePress lui
   donne 40 px de marge intérieure (colonne à 282 px en 390 px, mesuré le 14/09/2026). Le
   conteneur s'efface : ses enfants deviennent ceux du groupe. */
.full-width-content .entry-content > .corps-section > .wp-block-group__inner-container {
	display: contents;
}

.full-width-content .entry-content > .corps-section + .corps-section {
	/* Plus d'air entre deux sections (Monsieur, 14/09/2026 : « ça ne respire pas assez ») : 64 px devenaient
	   96 à 128 px selon la largeur. */
	margin-top: clamp(6rem, 4rem + 3vw, 8rem);
}

/* Une liste visuelle (cartes, étapes, tuiles, frise) se détache du texte qui l'annonce. */
.full-width-content .entry-content > .corps-section > .wp-block-group__inner-container > p + ul[class*="liste-"],
.full-width-content .entry-content > .corps-section > .wp-block-group__inner-container > p + .frise {
	margin-top: var(--dt-space-5);
}

.full-width-content .entry-content > .corps-section > .wp-block-group__inner-container > * {
	margin-block: 0;
}

.full-width-content .entry-content > .corps-section > .wp-block-group__inner-container > * + * {
	margin-top: 1rem;
}

/* Le titre ne dépasse pas la colonne de texte qu'il annonce : pleine largeur, un titre long
   (« Une prise en charge pour les femmes, les hommes et les enfants ») débordait de 1 152 px au-dessus
   d'un texte de 736 px (Monsieur, 14/09/2026 : « c'est étrange »). */
.full-width-content .entry-content > .corps-section > .wp-block-group__inner-container > h2 {
	max-width: 46rem;
	margin-inline: auto;
	font-size: clamp(1.7rem, 1rem + 1.6vw, 2.3rem);
	text-align: center;
	text-wrap: balance;
}

.full-width-content .entry-content > .corps-section > .wp-block-group__inner-container > h2 + * {
	margin-top: var(--dt-space-3);
}

/* Bloc de lecture centré, aligné à gauche ; le formulaire aussi (un champ de 1 150 px se remplit mal). */
.full-width-content .entry-content > .corps-section > .wp-block-group__inner-container > p,
.full-width-content .entry-content > .corps-section > .wp-block-group__inner-container > ul:not([class*="liste-"]),
.full-width-content .entry-content > .corps-section .wpcf7 {
	max-width: 46rem;
	margin-inline: auto;
}

.full-width-content .entry-content > .corps-section p,
.full-width-content .entry-content > .corps-section ul:not([class*="liste-"]) li {
	font-size: 1.125rem;
}

/* Retrait des listes à puces du contenu.
   GeneratePress remet `padding: 0` sur `ul`, `ol` et `li` dans son reset (main.min.css) ; la
   puce, peinte À L'EXTÉRIEUR de la boîte par défaut, tombe alors hors du cadre de lecture et
   se colle au bord de l'écran sur téléphone (relevé du 16/09/2026 à 390 px, page Gestion des
   cookies). Le retrait se repose donc ici, et SEULEMENT sur les listes de texte : les listes
   en composant (`liste-cartes`, `liste-etapes`, `dtb-*`) portent leur propre géométrie, qu'une
   règle générique écraserait en silence. */
.full-width-content .entry-content .corps-section :where(ul, ol):not([class*="liste-"]):not([class*="dtb-"]) {
	padding-inline-start: 1.5rem;
}

/* Intertitre d'une section (`corps.N.niveau` = 3) : centré comme le titre, plus discret, avec de l'air
   au-dessus pour séparer les sous-parties (formation initiale, complémentaires, certification, à venir). */
.full-width-content .entry-content > .corps-section > .wp-block-group__inner-container > h3 {
	margin-top: var(--dt-space-5);
	font-size: clamp(1.2rem, 1rem + 0.6vw, 1.45rem);
	text-align: center;
}

.full-width-content .entry-content > .corps-section > .wp-block-group__inner-container > h2 + h3 {
	margin-top: var(--dt-space-4);
}

.full-width-content .entry-content > .corps-section > .wp-block-group__inner-container > h3 + * {
	margin-top: var(--dt-space-2);
}

/* Citation du praticien (`corps.N.forme` = citation) : sa parole mise en avant, centrée, avec un grand
   guillemet en filigrane et sa signature (Monsieur, 14/09/2026). */
.full-width-content .entry-content > .corps-section blockquote.wp-block-quote {
	position: relative;
	box-sizing: border-box;
	max-width: 46rem;
	margin: var(--dt-space-3) auto 0;
	padding: var(--dt-space-5) var(--dt-space-4) var(--dt-space-4);
	border: 0;
	border-radius: var(--dt-radius-2);
	background: var(--dt-surface);
	text-align: center;
}

.full-width-content .entry-content > .corps-section blockquote.wp-block-quote::before {
	content: "\201C";
	position: absolute;
	top: -0.2rem;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--dt-font-heading);
	font-size: 5rem;
	line-height: 1;
	color: var(--dt-surface-accent);
}

.full-width-content .entry-content > .corps-section blockquote.wp-block-quote p {
	margin: 0;
	font-size: 1.2rem;
	font-style: italic;
	line-height: 1.6;
	color: var(--dt-text);
}

.full-width-content .entry-content > .corps-section blockquote.wp-block-quote p + p {
	margin-top: 1rem;
}

.full-width-content .entry-content > .corps-section blockquote.wp-block-quote cite {
	display: block;
	margin-top: var(--dt-space-3);
	font-family: var(--dt-font-heading);
	font-size: 0.85rem;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dt-text-muted);
}

/* Une ancre atteinte ne se cache pas sous le haut de l'écran (lien « écrire » vers #ecrire), ni
   sous l'en-tête collant (18/09/2026 : environ 7 rem de haut, mesuré 108 px à 1440 px). */
.full-width-content .entry-content h2[id] {
	scroll-margin-top: calc(7rem + var(--dt-space-3));
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ---- Listes mises en forme : socle commun --------------------------------------
   GeneratePress pose une marge gauche de 3 em sur toute liste : sans la retirer, les
   listes se décalaient de 48 px par rapport au texte (mesuré à l'épreuve du 14/09/2026). */
.full-width-content .entry-content .corps-section ul[class*="liste-"] {
	margin: var(--dt-space-4) 0 0;
	padding: 0;
	list-style: none;
}

.full-width-content .entry-content .corps-section ul[class*="liste-"] li {
	margin: 0;
}

/* Cartes : une idée par carte, icône dans une pastille nude (repère coché par défaut). */
.corps-section ul.liste-cartes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: var(--dt-space-3);
}

/* Six cartes (ou 3, 9) sur une grille de quatre laissaient une rangée de deux et deux trous (accueil,
   14/09/2026) : un compte multiple de 3 et pas de 4 passe à trois colonnes sur grand écran. */
@media (min-width: 64rem) {
	.corps-section ul.liste-cartes:has(> li:nth-child(3n):last-child):not(:has(> li:nth-child(4n):last-child)):not(:has(.liste-titre)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Icône et texte centrés sur la hauteur de la carte : les cartes d'une rangée prennent la hauteur
   de la plus remplie, et un contenu collé en haut laissait un vide inégal (Monsieur, 14/09/2026). */
.corps-section ul.liste-cartes li {
	display: flex;
	gap: 0.9rem;
	align-items: center;
	padding: 1.1rem 1.2rem;
	border: 1px solid var(--dt-border);
	border-radius: var(--dt-radius-2);
	background: var(--dt-surface);
	font-size: 1rem;
	line-height: 1.45;
}

.corps-section ul.liste-cartes li::before {
	content: "";
	flex: none;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background-color: var(--dt-surface-alt);
	background-image: var(--perinea-icone, var(--perinea-icone-check));
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.25rem;
}

/* Une petite série de cartes (trois au plus, ex. langues) se centre sous son titre centré au lieu de
   laisser la rangée à moitié vide à droite. */
.corps-section ul.liste-cartes:not(:has(li:nth-child(4))),
.corps-section ul.liste-formations:not(:has(li:nth-child(4))) {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 18rem));
	justify-content: center;
}

/* Cartes TITRÉES (`corps.N.liste_titres`, 14/09/2026 : « Avant / Après l'intervention », « Quand commencer ») :
   l'icône à gauche, le titre puis le texte empilés à sa droite ; colonnes plus larges (un paragraphe tenait
   dans 18rem avec le titre à côté, lisible à peine). */
/* Spécificité relevée : la règle des petites séries (`:not(:has(li:nth-child(4)))`) imposait 18rem. */
.corps-section ul.liste-cartes:has(.liste-titre):not(:has(li:nth-child(99))) {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	justify-content: stretch;
	max-width: 46rem;
	margin-inline: auto;
}

.corps-section ul.liste-cartes li:has(.liste-titre) {
	display: grid;
	grid-template-columns: 2.6rem minmax(0, 1fr);
	column-gap: 0.9rem;
	row-gap: 0.3rem;
	align-items: start;
}

/* Le pictogramme se centre sur la HAUTEUR de la carte (Monsieur, 21/09/2026) : il couvre les deux
   rangées -- titre et texte -- et s'y aligne au milieu, au lieu de rester collé à la première
   ligne du titre. Sur une carte à deux lignes de texte, l'écart se voyait. */
.corps-section ul.liste-cartes li:has(.liste-titre)::before {
	grid-row: 1 / span 2;
	align-self: center;
}

.corps-section ul.liste-cartes li:has(.liste-titre) .liste-titre,
.corps-section ul.liste-cartes li:has(.liste-titre) .liste-texte {
	display: block;
	grid-column: 2;
}

.corps-section ul.liste-cartes li:has(.liste-titre) .liste-texte {
	color: var(--dt-text-muted);
}

/* Trois cartes titrées ou plus (familles de pathologies, 18/09/2026) : sur grand écran, trois colonnes
   plus larges que la colonne de texte (64 rem au plus), pictogramme au-dessus du titre -- le modèle des
   encadrés montrés par Léa et Alvin. Mesuré avant : la règle des séries de 3 l'emportait et posait trois
   colonnes de 230 px dans les 736 px du texte, un texte de 15 caractères par ligne. */
@media (min-width: 64rem) {
	.corps-section ul.liste-cartes:has(.liste-titre):has(> li:nth-child(3)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-width: none;
		width: min(64rem, 100vw - 4rem);
		margin-inline: calc(50% - min(32rem, 50vw - 2rem));
	}

	.corps-section ul.liste-cartes:has(.liste-titre):has(> li:nth-child(3)) li {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.6rem;
		padding: 1.4rem 1.5rem;
	}

	/* EXACTEMENT quatre cartes titrées (matériel de la page Sport, 21/09/2026) : deux colonnes.
	   Mesuré avant : la règle des trois colonnes ci-dessus laissait la quatrième carte seule sur
	   sa rangée, deux tiers de vide à sa droite. Cinq cartes (matériel de la page pelvi) restent
	   en 3 + 2, une rangée incomplète de deux se lit. */
	.corps-section ul.liste-cartes:has(.liste-titre):has(> li:nth-child(4):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Étapes : un parcours numéroté, vertical sur mobile, en ligne sur grand écran. */
.corps-section ul.liste-etapes {
	display: grid;
	counter-reset: etape;
}

.corps-section ul.liste-etapes li {
	position: relative;
	display: grid;
	grid-template-columns: 3rem 1fr;
	column-gap: 1.2rem;
	align-items: center;
	padding-bottom: var(--dt-space-3);
	counter-increment: etape;
	font-size: 1.05rem;
	line-height: 1.45;
}

/* Pastille calée EN HAUT de l'étape (Monsieur, 15/09/2026 msg #10). Centrée, elle descendait dès
   que le texte dépassait sa hauteur, sous le départ du trait (top: 3rem) qui la traversait
   (/kine-du-sport/ et trois pages de soins à 360-390 px, relevé du 15/09 23h19). Le texte, lui,
   reste centré : une étape d'une ligne s'aligne sur le milieu de sa pastille. Les étapes TITRÉES
   (cartes en colonne, sans trait) gardent leur pastille centrée : `start` l'y pousserait à gauche. */
.corps-section ul.liste-etapes:not(:has(.liste-titre)) li::before {
	align-self: start;
}

.corps-section ul.liste-etapes li::before {
	content: counter(etape);
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--dt-primary);
	color: var(--dt-text-on-primary);
	font-family: var(--dt-font-heading);
	font-weight: 600;
}

.corps-section ul.liste-etapes li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 3rem;
	bottom: 0;
	left: 1.5rem;
	width: 1px;
	background: var(--dt-control-border);
}

@media (min-width: 64rem) {
	.corps-section ul.liste-etapes {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		column-gap: var(--dt-space-3);
	}

	.corps-section ul.liste-etapes li {
		grid-template-columns: 1fr;
		grid-template-rows: 3rem auto;
		row-gap: 0.9rem;
		align-items: start;
		padding-bottom: 0;
	}

	.corps-section ul.liste-etapes li:not(:last-child)::after {
		top: 1.5rem;
		right: 0.6rem;
		bottom: auto;
		left: 3.6rem;
		width: auto;
		height: 1px;
	}
}

/* Étapes TITRÉES (`corps.N.liste_titres`) : chaque étape devient une carte numérotée, titre puis texte,
   centrés -- le parcours se lit d'un coup d'œil (Monsieur, 14/09/2026, sur le modèle d'un « parcours de
   soin en 3 étapes »). Le filet entre les numéros reste sur grand écran, la carte le porte au-dessus. */
.corps-section ul.liste-etapes:has(.liste-titre) {
	gap: var(--dt-space-3);
}

.corps-section ul.liste-etapes:has(.liste-titre) li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
	padding: var(--dt-space-4) var(--dt-space-3);
	border: 1px solid var(--dt-border);
	border-radius: var(--dt-radius-2);
	background: var(--dt-surface);
	text-align: center;
}

.corps-section ul.liste-etapes:has(.liste-titre) li:not(:last-child)::after {
	display: none;
}

.corps-section ul .liste-titre {
	display: block;
	font-family: var(--dt-font-heading);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--dt-text);
}

.corps-section ul .liste-texte {
	display: block;
	font-size: 1rem;
	line-height: 1.5;
}

@media (min-width: 64rem) {
	/* Trois colonnes au plus : cinq étapes titrées sur une rangée donnaient des colonnes de 17 caractères. */
	.corps-section ul.liste-etapes:has(.liste-titre) {
		grid-auto-flow: row;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
		column-gap: var(--dt-space-3);
	}

	.corps-section ul.liste-etapes:has(.liste-titre) li {
		padding: var(--dt-space-4) var(--dt-space-3);
	}
}

/* Mention santé en prolongement du pied de page (Monsieur, 14/09/2026 : « discret plutôt qu'un bloc
   hétérogène très visible ») : posée en dernier sur les pages qui la portent, elle prend le fond du pied,
   son texte atténué et un filet qui la sépare des colonnes ; elle se lit comme la première ligne du pied. */
.dtb.dtb-disclaimer {
	padding-block: var(--dt-space-2);
	background: var(--dt-primary-strong);
	border-bottom: 1px solid color-mix(in srgb, var(--dt-text-on-primary) 15%, transparent);
}

.dtb.dtb-disclaimer .dtb-disclaimer-text {
	padding-block: 0;
	font-size: 0.8125rem;
	color: color-mix(in srgb, var(--dt-text-on-primary) 72%, transparent);
}

.dtb.dtb-disclaimer .dtb-disclaimer-link,
.dtb.dtb-disclaimer .dtb-disclaimer-link:visited,
.dtb.dtb-disclaimer .dtb-disclaimer-link:active {
	color: var(--dt-text-on-primary);
}

.dtb.dtb-disclaimer .dtb-disclaimer-link:hover,
.dtb.dtb-disclaimer .dtb-disclaimer-link:focus-visible {
	color: var(--dt-text-on-primary);
	text-decoration-thickness: 2px;
}

.dtb.dtb-disclaimer .dtb-disclaimer-link:focus-visible {
	outline-color: var(--dt-text-on-primary);
}

/* Bouton de fin de section (`corps.N.bouton`, 14/09/2026) : centré sous la section, avec de l'air ;
   le dessin est l'anatomie .dtb-btn-ghost, le thème ne fait que le placer. */
.full-width-content .entry-content > .corps-section > .wp-block-group__inner-container > p.corps-bouton {
	margin-top: var(--dt-space-4);
	text-align: center;
}

/* Pastilles : des mots courts, en tuiles égales alignées sur la colonne de texte (variante C de l'épreuve
   du 14/09/2026, choix de Monsieur). Avant : pastilles à contour centrées sur 72rem, débordant du texte,
   rangées bancales (6 puis 2) et lues comme des boutons alors qu'elles ne sont pas cliquables.
   Deux colonnes sur mobile, quatre dès 48rem ; teinte nude sans contour. */
.full-width-content .entry-content > .corps-section > .wp-block-group__inner-container > ul.liste-pastilles {
	max-width: 46rem;
	margin-inline: auto;
}

.corps-section ul.liste-pastilles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 48rem) {
	.corps-section ul.liste-pastilles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* Un compte multiple de 3 et pas de 4 (3, 6, 9) passe à trois colonnes : six tuiles en 4 + 2 laissaient
	   deux trous sur l'accueil (mesuré le 14/09/2026). Les autres comptes gardent quatre colonnes. */
	.corps-section ul.liste-pastilles:has(> li:nth-child(3n):last-child):not(:has(> li:nth-child(4n):last-child)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.corps-section ul.liste-pastilles li {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.6rem;
	margin: 0;
	padding: 0.6rem 0.8rem;
	border-radius: var(--dt-radius-2);
	background: var(--dt-surface-alt);
	font-family: var(--dt-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	color: var(--dt-text);
}

/* Frise des formations (`liste_forme` = frise, 14/09/2026, Monsieur : « une ligne du temps qui défile
   latéralement […] comme netflix ») : une rangée de cartes à défilement horizontal, ancrées une à une ;
   un filet court sur toute la rangée, un repère rond par carte, la date (ou « à venir ») en tête. Les
   flèches sont posées par frise-perinea.js et n'apparaissent que si la rangée déborde. */
.corps-section .frise {
	position: relative;
	margin-top: var(--dt-space-3);
}

/* Spécificité alignée sur `.full-width-content .entry-content .corps-section ul[class*="liste-"]`, qui
   remet le padding à zéro et effaçait l'espace du filet et des repères (mesuré le 14/09/2026). */
.full-width-content .entry-content .corps-section ul.liste-frise {
	display: flex;
	gap: var(--dt-space-2);
	margin: 0;
	padding: 1.6rem 0.25rem var(--dt-space-2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0.25rem;
	scrollbar-width: thin;
	list-style: none;
	background: linear-gradient(var(--dt-border), var(--dt-border)) left 0.55rem / 100% 1px no-repeat;
}

.corps-section ul.liste-frise:focus-visible {
	outline: 2px solid var(--dt-primary);
	outline-offset: 4px;
}

.corps-section ul.liste-frise li {
	position: relative;
	display: flex;
	flex: 0 0 min(78%, 16rem);
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
	padding: 1rem 1.1rem;
	scroll-snap-align: start;
	border: 1px solid var(--dt-border);
	border-radius: var(--dt-radius-2);
	background: var(--dt-surface);
	font-size: 0.98rem;
	line-height: 1.4;
}

.corps-section ul.liste-frise li::before {
	content: "";
	position: absolute;
	top: -1.3rem;
	left: 1.1rem;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--dt-text-muted);
}

.corps-section ul.liste-frise .liste-date {
	font-family: var(--dt-font-heading);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dt-text-muted);
}

.corps-section .frise-fleche {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--dt-control-border);
	border-radius: 50%;
	background: var(--dt-surface);
	box-shadow: var(--dt-shadow-2);
	font-size: 1.6rem;
	line-height: 1;
	color: var(--dt-text);
	cursor: pointer;
	transform: translateY(-40%);
}

.corps-section .frise-deborde .frise-fleche {
	display: grid;
}

.corps-section .frise-fleche:hover {
	background: var(--dt-btn-ghost-hover-bg);
}

.corps-section .frise-fleche:focus-visible {
	outline: 2px solid var(--dt-primary);
	outline-offset: 2px;
}

.corps-section .frise-fleche:disabled {
	opacity: 0;
	pointer-events: none;
}

.corps-section .frise-fleche-prec {
	left: -0.75rem;
}

.corps-section .frise-fleche-suiv {
	right: -0.75rem;
}

@media (max-width: 47.99rem) {
	.corps-section .frise-fleche {
		display: none !important;
	}
}

/* Grand écran : les flèches sortent dans la marge, elles couvraient le texte des cartes de bord (1440 px). */
@media (min-width: 80rem) {
	.corps-section .frise-fleche-prec {
		left: -3.75rem;
	}

	.corps-section .frise-fleche-suiv {
		right: -3.75rem;
	}
}

/* Formations : la date en évidence, l'intitulé dessous. */
.corps-section ul.liste-formations {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: var(--dt-space-2);
}

.corps-section ul.liste-formations li {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1rem 1.1rem;
	border-left: 3px solid var(--dt-surface-accent);
	border-radius: var(--dt-radius-1);
	background: var(--dt-surface);
	font-size: 0.98rem;
	line-height: 1.4;
}

.corps-section ul.liste-formations .liste-date {
	font-family: var(--dt-font-heading);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--dt-text-muted);
}

/* L'intitulé de la formation, puis l'organisme qui la donne, sur deux lignes : sans cette
   distinction, « Sujet – Organisme » se lisait d'un trait et l'oeil ne savait pas où finissait
   le nom de la formation (Monsieur, 21/09/2026). L'organisme prend une pastille nude -- variante
   retenue sur maquette, contre la mise en petites capitales et le simple changement de couleur.
   Le TEXTE ne change pas : seul son balisage se dédouble (seo/fabrique/sections._sujet_organisme). */
.corps-section ul.liste-formations .liste-libelle {
	font-weight: 600;
	color: var(--dt-text);
}

/* L'organisme est le PIED de la carte, sous un filet fin : l'intitulé occupe le haut, le nom de
   l'école se lit en dernier, comme une provenance. Format retenu par Monsieur le 21/09/2026 sur
   quatre maquettes posées sur le rendu servi (surtitre, bandeau, pied, signature) -- la pastille
   essayée d'abord, centrée en tête, a été écartée. `space-between` colle ce pied au bas même
   quand la rangée étire la carte : sans lui, une carte à intitulé court laissait son filet
   flotter au milieu. */
.corps-section ul.liste-formations li {
	justify-content: space-between;
}

.corps-section ul.liste-formations .liste-organisme {
	margin-top: 0.55rem;
	padding-top: 0.45rem;
	border-top: 1px solid var(--dt-border);
	font-size: 0.82rem;
	color: var(--dt-text-muted);
}

/* ---- La carte répond au survol (Monsieur, 21/09/2026) ------------------------
   Léa et Alvin veulent « de l'interaction avec le site, mais pas trop de mouvement sur les
   images » (appel du 16/09, section 11). Le mouvement va donc sur le TEXTE : toute carte du
   corps -- cartes, cartes titrées, étapes titrées, formations -- se soulève et voit son filet
   prendre la couleur d'accent quand le curseur la touche. Une règle unique pour toutes : un
   survol qui ne répondrait que sur certaines cartes se remarquerait aussitôt.

   Pourquoi le survol plutôt qu'un dépliable au clic, qui était la piste d'origine pour
   « Comment se déroule la première séance ? » (compte rendu 85:34) : cette section s'adresse
   à qui hésite encore à prendre rendez-vous, souvent pour un motif intime. Replier le déroulé
   derrière cinq clics ajouterait une friction là où la page rassure. Rien n'est caché, donc
   l'absence de survol au tactile ne retire rien -- l'animation est un supplément, jamais un
   moyen d'accès. Les étapes NON titrées (parcours en ligne de /kine-du-sport/) ne sont pas
   des cartes : elles n'ont ni fond ni filet à animer, et restent hors de cette règle.

   Le focus clavier reçoit le même retour, pour que la page réponde aussi sans souris. */
.corps-section ul.liste-cartes li,
.corps-section ul.liste-formations li,
.corps-section ul.liste-etapes:has(.liste-titre) li {
	transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
		box-shadow 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
		border-color 200ms ease;
}

.corps-section ul.liste-cartes li:hover,
.corps-section ul.liste-cartes li:focus-within,
.corps-section ul.liste-formations li:hover,
.corps-section ul.liste-formations li:focus-within,
.corps-section ul.liste-etapes:has(.liste-titre) li:hover,
.corps-section ul.liste-etapes:has(.liste-titre) li:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--dt-shadow-2);
	border-color: var(--dt-surface-accent);
}

/* Le filet gauche d'une formation EST sa bordure de couleur : au survol, c'est lui qui
   s'épaissit, sinon le changement de teinte se perdrait sur trois pixels déjà accentués. */
.corps-section ul.liste-formations li:hover,
.corps-section ul.liste-formations li:focus-within {
	border-left-color: var(--dt-primary);
}

/* La pastille numérotée d'une étape titrée suit le mouvement, à peine. */
.corps-section ul.liste-etapes:has(.liste-titre) li::before {
	transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.corps-section ul.liste-etapes:has(.liste-titre) li:hover::before,
.corps-section ul.liste-etapes:has(.liste-titre) li:focus-within::before {
	transform: scale(1.06);
}

/* Réglage système de ceux que le mouvement gêne : le retour visuel demeure, le déplacement non. */
@media (prefers-reduced-motion: reduce) {
	.corps-section ul.liste-cartes li,
	.corps-section ul.liste-formations li,
	.corps-section ul.liste-etapes:has(.liste-titre) li,
	.corps-section ul.liste-etapes:has(.liste-titre) li::before {
		transition: border-color 200ms ease;
	}

	.corps-section ul.liste-cartes li:hover,
	.corps-section ul.liste-cartes li:focus-within,
	.corps-section ul.liste-formations li:hover,
	.corps-section ul.liste-formations li:focus-within,
	.corps-section ul.liste-etapes:has(.liste-titre) li:hover,
	.corps-section ul.liste-etapes:has(.liste-titre) li:focus-within,
	.corps-section ul.liste-etapes:has(.liste-titre) li:hover::before,
	.corps-section ul.liste-etapes:has(.liste-titre) li:focus-within::before {
		transform: none;
	}
}

.full-width-content .entry-content > h2:not([class*="dtb-"]) {
	margin-top: 3rem;
}

.full-width-content .entry-content > h3:not([class*="dtb-"]) {
	margin-top: 2rem;
}

.full-width-content .entry-content > p:not([class*="dtb-"]),
.full-width-content .entry-content > ul:not([class*="dtb-"]),
.full-width-content .entry-content > ol:not([class*="dtb-"]) {
	margin-top: 1rem;
}

/* Le pied de page a besoin d'air au-dessus de lui. Une SECTION `ls/*` porte son propre
   padding et se colle légitimement au pied ; du TEXTE courant, lui, y touche -- c'est le
   cas des pages légales, qui se terminent toutes sur un paragraphe (relevé par Monsieur,
   04/09/2026). On distingue donc les deux, au lieu de tout coller à zéro. */
.full-width-content .entry-content > [class*="dtb-"]:last-child {
	margin-bottom: 0;
}

.full-width-content .entry-content > :not([class*="dtb-"]):last-child {
	margin-bottom: var(--dt-space-section);
}

/* ---- Formulaire de contact (Contact Form 7) ----------------------------------
   Relevé du 13/09/2026 : bordures des champs presque invisibles (nude-100 sur le fond
   nude-50 -- un élément ne porte jamais le fond de sa section), bouton resté dans le
   gris de GeneratePress hors palette, champs courts moins larges que le message.
   Les champs prennent toute la colonne, tracés par la limite de contrôle de la
   palette (3:1, WCAG 1.4.11) ; le bouton reprend l'action de conversion de la
   bibliothèque, TOUS ses états déclarés (le thème reprend un état laissé vacant). */

.wpcf7-form p {
	margin-block: 0 var(--dt-space-3);
}

.wpcf7-form label {
	display: block;
	font-weight: 500;
}

.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.4rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--dt-control-border);
	border-radius: var(--dt-radius-1);
	background: var(--dt-surface);
	color: var(--dt-text);
	font: inherit;
	font-size: 1rem;
	line-height: 1.5;
}

.wpcf7-form textarea {
	min-height: 10rem;
	resize: vertical;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	border-color: var(--dt-primary);
	outline: 2px solid var(--dt-primary);
	outline-offset: 1px;
	background: var(--dt-surface);
	color: var(--dt-text);
}

/* Contact Form 7 décale chaque case d'1 em : elle quittait l'alignement des champs. */
.wpcf7-form .wpcf7-list-item {
	margin: 0;
}

.wpcf7-form .wpcf7-acceptance label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-weight: 400;
}

.wpcf7-form input[type="checkbox"] {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.3rem;
	accent-color: var(--dt-primary);
}

.wpcf7-form input.wpcf7-submit,
.wpcf7-form input.wpcf7-submit:visited,
.wpcf7-form input.wpcf7-submit:focus {
	min-height: var(--dt-btn-min-h);
	padding: var(--dt-btn-pad);
	border: 1px solid var(--dt-cta);
	border-radius: var(--dt-btn-radius);
	background: var(--dt-cta);
	color: var(--dt-text-on-cta);
	font-family: var(--dt-font-heading);
	font-size: var(--dt-fs-body);
	font-weight: var(--dt-btn-weight);
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: transform var(--motion-fast, 200ms) var(--ease-standard, ease),
	            box-shadow var(--motion-fast, 200ms) var(--ease-standard, ease),
	            background-color var(--motion-fast, 200ms) var(--ease-standard, ease);
}

.wpcf7-form input.wpcf7-submit:hover,
.wpcf7-form input.wpcf7-submit:focus-visible,
.wpcf7-form input.wpcf7-submit:active {
	border-color: var(--dt-cta-strong);
	background: var(--dt-cta-strong);
	color: var(--dt-text-on-cta);
	box-shadow: var(--dt-btn-shadow-hover);
	transform: translateY(var(--dt-btn-lift));
}

.wpcf7-form input.wpcf7-submit:focus-visible {
	outline: 2px solid var(--dt-primary);
	outline-offset: 2px;
}

/* Désactivé tant que le consentement n'est pas coché (Contact Form 7) : un voile d'opacité
   rendait le bouton gris, le défaut même qu'on corrigeait. Il reste d'encre, en contour :
   lisible, et visiblement pas encore actionnable. */
.wpcf7-form input.wpcf7-submit:disabled,
.wpcf7-form input.wpcf7-submit:disabled:hover {
	border-color: var(--dt-control-border);
	background: transparent;
	color: var(--dt-text);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ---- Portrait du hero praticien : cadre, ombre, mouvement au survol --------------
   Monsieur, 14/09/2026 : la photo de Léa dans le même cadre que les photos du cabinet (carte claire,
   filet, arrondi), une ombre portée, et une animation au survol sur ordinateur. Le cadre et l'ombre
   valent partout ; le mouvement seulement avec un pointeur fin qui survole, et jamais si le visiteur a
   demandé moins de mouvement. */
.dtb-hero-fond-split .dtb-hero-media {
	box-sizing: border-box;
	padding: 0.75rem;
	border: 1px solid var(--dt-border);
	border-radius: var(--dt-radius-2);
	background: var(--dt-bg);
	box-shadow: var(--dt-shadow-2);
	overflow: hidden;
}

.dtb-hero-fond-split .dtb-hero-media img {
	border-radius: var(--dt-radius-1);
}

/* Inclinaison 3D très légère au survol (inclinaison-perinea.js, 14/09/2026) : l'élément suit la souris
   vite, et revient à plat en douceur. Elle REMPLACE l'élévation au survol des fiches : un seul mouvement. */
.incline {
	transform-style: preserve-3d;
	transition: transform 450ms var(--ease-standard, ease), box-shadow 200ms ease, border-color 200ms ease;
	will-change: transform;
}

.incline.incline-suit {
	transition: transform 90ms linear, box-shadow 200ms ease, border-color 200ms ease;
}

.dtb-cards-card.incline:hover,
.dtb-gallery-card.incline:hover {
	transform: none;
}

/* Plus d'effet au survol du portrait (Monsieur, 14/09/2026 : « on voit que le cadre est un élément dissocié
   de l'image […] l'animation de zoom n'est pas naturelle »). Le cadre montait de 6 px en 500 ms pendant que
   l'image zoomait à 1,04 en 700 ms ; et une image qui réagit au curseur promet un clic qu'elle ne tient pas. */

/* Hero de l'accueil sur téléphone (Monsieur, 15/09/2026 10h32) : tout centré, comme la
   bibliothèque le fait déjà à partir de 48rem, et le surtitre ramené de 16 à 13 px (mesuré sur
   le rendu servi à 390 px). Borné à l'accueil : les autres heros restent alignés à gauche. */
@media (max-width: 47.99rem) {
	.home .dtb-hero:not(.dtb-hero-gauche) {
		text-align: center;
	}
	.home .dtb-hero:not(.dtb-hero-gauche) .dtb-hero-actions {
		justify-content: center;
	}
	/* Espacement des capitales 0,2 -> 0,08 em (Monsieur, 15/09/2026 23h55) : « Kinésithérapie ·
	   Levallois-Perret » mesurait 357 px pour 312 px disponibles à 360 px et se coupait après le trait
	   d'union ; à 0,08 em il tient en 305 px, sur une ligne. */
	.home .dtb-hero .dtb-hero-eyebrow {
		font-size: 13px;
		letter-spacing: 0.08em;
	}
}

/* Pied de page sur téléphone : TOUT aligné à gauche, comme le pied de MM (Monsieur, 15/09/2026
   22h55 : « ça rend mieux que centrer »). La bibliothèque centre en mobile (choix BHK c143) : la
   dérogation reste propre à Perinea. Coordonnées (variante « V1 équilibré », 15/09 10h40) : icônes
   en colonne, textes sur un même bord, icône sur la PREMIÈRE ligne, lignes équilibrées au repli. */
@media (max-width: 47.99rem) {
	.dtb-footer .dtb-footer-cols,
	.dtb-footer .dtb-footer-bottom {
		align-items: flex-start;
		text-align: left;
	}
	.dtb-footer .dtb-footer-legal {
		justify-content: flex-start;
	}
	.dtb-footer .dtb-footer-item-icone {
		justify-content: flex-start;
		align-items: flex-start;
		gap: 0.75rem;
	}
	.dtb-footer .dtb-footer-item-icone > a,
	.dtb-footer .dtb-footer-item-icone > span {
		display: block;
		min-height: 0;
		padding-block: 0.3rem;
		text-wrap: balance;
	}
	.dtb-footer .dtb-footer-item-icone .dtb-icone {
		margin-top: calc(0.3rem + (1lh - 1.1rem) / 2);
	}
}

/* Bande d'appel : « Nous contacter » en aplat blanc cassé (nude-50) au lieu d'un contour transparent
   (Monsieur, 15/09/2026 23h50, quête PERINEA-CTA-BOUTON-SECONDAIRE-FOND-CLAIR). Texte encre 16,6:1 ;
   l'aplat ne se détache de la bande nude-300 qu'à 1,6:1, c'est le BORD encre (10,1:1) qui délimite le
   bouton (WCAG 1.4.11) -- il reste. Au survol, le voile nude-200 de la bibliothèque se confondrait
   avec la bande (1,25:1) : le bouton s'éclaircit en blanc. Bande claire (`dtb-cta-light`) exclue : un
   aplat nude-50 y porterait exactement le fond de sa section. Tous les états sont déclarés. */
.dtb-cta:not(.dtb-cta-light) .dtb-cta-ghost,
.dtb-cta:not(.dtb-cta-light) .dtb-cta-ghost:visited,
.dtb-cta:not(.dtb-cta-light) .dtb-cta-ghost:focus {
	background: var(--dt-bg);
	border-color: var(--dt-text-on-accent);
	color: var(--dt-text-on-accent);
}
.dtb-cta:not(.dtb-cta-light) .dtb-cta-ghost:hover,
.dtb-cta:not(.dtb-cta-light) .dtb-cta-ghost:focus-visible,
.dtb-cta:not(.dtb-cta-light) .dtb-cta-ghost:active {
	background: var(--dt-surface);
	border-color: var(--dt-text-on-accent);
	color: var(--dt-text-on-accent);
}

/* ---- Liste dépliable (`liste-depliable`, 18/09/2026) : « Nos engagements » ----------------------
   Sans script : titre puis texte, en entier. Équipée par depliable-perinea.js (`depliable-actif`) :
   accordéon sur téléphone ; sur grand écran, colonne de titres à gauche et texte ouvert à droite.
   Un seul texte ouvert, au clic seulement, qui apparaît en fondu (arbitrage du 17/09/2026). */
.corps-section ul.liste-depliable li {
	padding: var(--dt-space-2) 0;
	border-bottom: 1px solid var(--dt-border);
}

.corps-section ul.liste-depliable .liste-titre {
	display: block;
	font-family: var(--dt-font-heading);
	font-weight: 600;
}

.corps-section ul.liste-depliable .liste-texte {
	display: block;
	margin-top: 0.4rem;
	color: var(--dt-text-muted);
	line-height: 1.6;
}

.corps-section ul.liste-depliable.depliable-actif li {
	padding: 0;
}

/* `display: block` ci-dessus l'emporterait sur l'attribut `hidden` posé par le script. */
.corps-section ul.liste-depliable .liste-texte[hidden] {
	display: none;
}

.corps-section ul.liste-depliable .depliable-bouton {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: var(--dt-space-2);
	padding: 1rem 0;
	border: 0;
	background: none;
	color: var(--dt-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

/* Le titre suit la couleur du bouton (ouvert ou non) ; sa propre couleur l'emportait (relevé 15h55). */
.corps-section ul.liste-depliable .depliable-bouton .liste-titre {
	color: inherit;
}

.corps-section ul.liste-depliable .depliable-bouton::after {
	content: "+";
	flex: none;
	font-family: var(--dt-font-heading);
	font-size: 1.4rem;
	line-height: 1;
	color: var(--dt-primary);
	transition: transform 0.25s ease;
}

.corps-section ul.liste-depliable .depliable-ouvert .depliable-bouton::after {
	transform: rotate(45deg);
}

.corps-section ul.liste-depliable .depliable-bouton:focus-visible {
	outline: 2px solid var(--dt-primary);
	outline-offset: 2px;
}

.corps-section ul.liste-depliable.depliable-actif .liste-texte {
	margin: 0;
	padding: 0 0 1.1rem;
}

.corps-section ul.liste-depliable .depliable-ouvert .liste-texte {
	animation: depliable-fondu 0.35s ease both;
}

@keyframes depliable-fondu {
	from { opacity: 0; transform: translateY(0.4rem); }
	to   { opacity: 1; transform: none; }
}

@media (min-width: 64rem) {
	.corps-section ul.liste-depliable.depliable-actif {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		grid-template-rows: repeat(var(--depliable-n, 7), auto);
		column-gap: var(--dt-space-5);
		align-items: start;
	}

	.corps-section ul.liste-depliable.depliable-actif li {
		display: contents;
	}

	.corps-section ul.liste-depliable.depliable-actif .depliable-bouton {
		grid-column: 1;
		padding: 0.85rem 0;
		border-bottom: 1px solid var(--dt-border);
		color: var(--dt-text-muted);
	}

	.corps-section ul.liste-depliable.depliable-actif .depliable-ouvert .depliable-bouton {
		color: var(--dt-text);
	}

	/* Sur grand écran, le repère n'est plus un « + » mais une flèche vers le texte ouvert. */
	.corps-section ul.liste-depliable.depliable-actif .depliable-bouton::after {
		content: "→";
		font-size: 1.1rem;
		opacity: 0;
		transform: none;
		transition: opacity 0.25s ease;
	}

	.corps-section ul.liste-depliable.depliable-actif .depliable-ouvert .depliable-bouton::after {
		opacity: 1;
		transform: none;
	}

	/* Le texte s'ouvre EN FACE de la flèche de son élément, pas en haut de la colonne (demande de
	   Monsieur du 21/09/2026 : « à la hauteur de l'élément sélectionné »). `--depliable-i` est le
	   rang de l'élément, posé sur le `li` par depliable-perinea.js et hérité par ses enfants (le
	   `li` est en `display: contents`) ; le panneau part de cette ligne et court jusqu'au bas de
	   la grille, pour disposer de la hauteur restante sans décaler les titres. Sans script, la
	   liste se lit en entier et cette règle ne s'applique pas. Mesuré le 21/09 : sur les deux
	   derniers éléments, la carte descend sous la liste et rallonge la section d'environ 100 px. */
	/* Le panneau qui ne tient pas sous son titre s'ancre au bas de la colonne des titres plutôt
	   que de pousser la section (classe posée par le script, qui seul peut constater le débord). */
	.corps-section ul.liste-depliable.depliable-actif .depliable-ancre-bas .liste-texte {
		grid-row: 1 / -1;
		align-self: end;
	}

	.corps-section ul.liste-depliable.depliable-actif .liste-texte {
		grid-column: 2;
		grid-row: var(--depliable-i, 1) / -1;
		align-self: start;
		padding: var(--dt-space-4);
		border-radius: var(--dt-radius-2);
		background: var(--dt-surface);
		color: var(--dt-text);
		font-size: 1.15rem;
		line-height: 1.65;
	}
}

@media (prefers-reduced-motion: reduce) {
	.corps-section ul.liste-depliable .depliable-ouvert .liste-texte {
		animation: none;
	}
	.corps-section ul.liste-depliable .depliable-bouton::after {
		transition: none;
	}
}