/*
 * Bloc : Nos engagements (fond de section de l'accueil, composant propre au client)
 * Description : la section « Nos engagements » posée sur une photo floutée du cabinet, sous le voile teinté clair de la fondation média ; texte à l'encre, panneau ouvert translucide (tâche 5 du retour de Léa, version claire validée par Monsieur sur maquette le 29/09/2026)
 * Famille : contenu
 * Regles : UX-E1 (échelle d'espacement), UX-V7 (voile teinté clair de la fondation), UX-T1 (colonne de lecture)
 * Variantes : aucune
 * Tokens : consomme --dt-content-max, --dt-space-3, --dt-space-section, --dt-surface, --dt-bg, --dt-text, --dt-text-muted ; redéfinit --dt-text-muted dans la liste de la section (contraste sur photo)
 * Reduced-motion : N/A (rien ne bouge)
 * Statut : client
 * Inspirations : maquette A du 29/09/2026 ; bande « Nous joindre » de la page Contact
 * Reference : quête PERINEA-LOT-DE-RETOUCHES-DU-SITE-DU-29-09 (I5) ; racine et fond posés par engagements-perinea.php, réglage généré par clients/perinea/generer_engagements_perinea.py ; design/web-blocks/LIFECYCLE.md §7
 * Clients : PERINEA
 * Conteneurs : .entry-content > .corps-section (section composée par la fabrique)
 * Derogations : N/A
 *
 * La racine, le fond et le voile viennent de la fondation média partagée (`ls-media`) : consommés
 * ici, jamais redéclarés. Ce fichier ne règle que ce qui est propre à cette section.
 */

/* ---- Une bande pleine largeur ------------------------------------------ */
/* La photo couvre la largeur de la page ; le texte garde la colonne des autres sections
   (`--dt-content-max`), par la marge intérieure et non par la largeur de la section. */
.full-width-content .entry-content > .corps-section.perinea-engagements {
	max-width: none;
	padding-inline: max(var(--dt-space-3), calc((100% - var(--dt-content-max)) / 2));
	padding-block: var(--dt-space-section);
	/* Sur la photo, le brun doux (titres repliés sur grand écran, texte de l'accordéon sur téléphone)
	   tombait à 3,7:1 au pixel le plus sombre du fond sous le voile (mesuré le 29/09/2026, contre
	   6,3:1 sur le beige de la page). Dans cette section seulement, il s'assombrit d'un quart vers
	   l'encre : 4,8:1 au pire pixel. Le titre ouvert reste à l'encre : la hiérarchie demeure. */
	--perinea-engagements-doux: color-mix(in srgb, var(--dt-text-muted) 75%, var(--dt-text));
}
/* Le rôle se redéfinit un cran plus bas que là où il se calcule : sur la section même, il se
   citerait lui-même (cycle), et une nuance nommée de la palette ne suivrait pas un changement
   de palette (audit Itachi du 29/09/2026, M5). */
.corps-section.perinea-engagements ul.liste-depliable {
	--dt-text-muted: var(--perinea-engagements-doux);
}

/* ---- Le panneau ouvert, en verre dépoli (grand écran) ------------------- */
/* Même plage que la disposition en deux colonnes (style.css, liste dépliable) : sur téléphone,
   l'accordéon n'a pas de panneau. Sans `backdrop-filter`, le panneau reste plus opaque : le texte
   ne se lit jamais sur une photo nue. */
@media (min-width: 64rem) {
	.corps-section.perinea-engagements ul.liste-depliable.depliable-actif .liste-texte {
		background: color-mix(in srgb, var(--dt-surface) 88%, transparent);
		border: 1px solid color-mix(in srgb, var(--dt-bg) 55%, transparent);
		box-shadow: 0 12px 32px color-mix(in srgb, var(--dt-text) 12%, transparent);
	}
	@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.corps-section.perinea-engagements ul.liste-depliable.depliable-actif .liste-texte {
			background: color-mix(in srgb, var(--dt-surface) 62%, transparent);
			-webkit-backdrop-filter: blur(10px);
			backdrop-filter: blur(10px);
		}
	}
}