/*
Theme Name: Doux cocon d'éveil
Theme URI: https://douxcocondeveil.fr
Author: Aurore André
Description: Thème bloc pour Doux cocon d'éveil, assistante maternelle agréée à Domancy (Haute-Savoie). Univers doux, naturel et montagnard : palette sauge et brun doré, titres Georgia, filets botaniques au trait, cartes plates et photographies encadrées.
Version: 1.1.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cocon-eveil
Tags: full-site-editing, block-patterns, blog, one-column, custom-colors, custom-menu
*/

:root {
	--cde-trait: var(--wp--custom--trait, 1px solid rgba(170, 170, 170, .55));
	--cde-trait-vert: var(--wp--custom--trait-vert, 1px solid rgba(138, 154, 123, .45));
	--cde-arrondi-vignette: var(--wp--custom--arrondi--vignette, 6px);
	--cde-arrondi-bouton: var(--wp--custom--arrondi--bouton, 8px);
	--cde-arrondi-carte: var(--wp--custom--arrondi--carte, 10px);
	--cde-transition: var(--wp--custom--transition, 220ms cubic-bezier(.25, .7, .4, 1));
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* WordPress ne pose box-sizing: border-box que sur ses propres blocs. Les
   sections du thème écrites en HTML brut combinent width:100% et un retrait
   latéral : sans cette règle, elles dépassent de la largeur du retrait et le
   texte se fait rogner. */
[class^="cde-"],
[class*=" cde-"],
[class^="cde-"]::before,
[class^="cde-"]::after {
	box-sizing: border-box;
}

::selection {
	background: var(--wp--preset--color--vert-clair);
	color: var(--wp--preset--color--creme);
}

/* Le site respire dans une fenêtre crème : une ombre à peine posée le décolle
   du fond sans jamais devenir un relief. */
.wp-site-blocks {
	box-shadow: 0 0 0 1px rgba(170, 170, 170, .18), 0 2px 40px -30px rgba(63, 58, 51, .35);
}

/* ==========================================================================
   Gouttières et largeur des sections
   ========================================================================== */

/* WordPress ne pose son retrait global que sur les blocs à fond coloré : une
   section posée sur le crème de la page se retrouvait collée aux deux bords de
   l'écran, et les gouttières alternaient d'une section à l'autre. On les pose
   nous-mêmes sur toutes les sections, avec la même valeur.
   Le fond des sections pleine largeur n'en souffre pas : le retrait rentre le
   contenu, le bloc reste bord à bord. */
main > .wp-block-group {
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

/* Et la largeur « large » doit rester plafonnée : sans cela les grilles
   s'étalent sur toute la fenêtre au-delà de 1200px. */
main .alignwide {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* ==========================================================================
   Surtitre de section : petit label majuscule précédé d'une feuille
   ========================================================================== */

.cde-surtitre {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .75rem;
	font-family: var(--wp--preset--font-family--georgia);
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--vert-clair);
}

/* La feuille est dessinée en CSS pour que le surtitre reste un simple
   paragraphe dans l'éditeur : aucun bloc à composer, aucune image à charger. */
.cde-surtitre::before {
	content: "";
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: var(--cde-feuille) center / contain no-repeat;
	mask: var(--cde-feuille) center / contain no-repeat;
}

:root {
	--cde-feuille: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20c0-8 5-14 16-16 0 11-6 16-16 16Z'/%3E%3Cpath d='M9 15c2.5-3 5-4.8 8-6'/%3E%3C/svg%3E");
}

/* Le surtitre centré ramène la feuille au-dessus du texte plutôt qu'à sa gauche */
.cde-surtitre.has-text-align-center {
	flex-direction: column;
	gap: .35rem;
}

/* ==========================================================================
   Filets décoratifs botaniques
   ========================================================================== */

/* La branche décorative en fond de section a été retirée. La classe
   `.cde-branche` reste posée sur plusieurs patterns : on garde le contexte de
   positionnement et le clip, mais plus aucun motif n'est dessiné. */
.cde-branche {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

/* Séparateur de section : un filet fin qui s'arrête avant les bords */
.cde-filet {
	border: 0;
	border-top: var(--cde-trait-vert);
	max-width: 6rem;
	margin-inline: 0;
}

.cde-filet.aligncenter {
	margin-inline: auto;
}

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

/* Un élément collant ne peut jamais sortir des limites de son parent. Le
   conteneur que WordPress pose autour d'une partie de modèle épouse exactement
   la hauteur de l'en-tête : celui-ci se décollait donc au premier pixel de
   défilement. En sortant ce conteneur du flux, l'en-tête devient enfant direct
   de .wp-site-blocks et colle sur toute la hauteur de la page. */
.cde-entete-hote {
	display: contents;
}

/* --cde-defile va de 0 (page en haut) à 1 (resserrement complet). C'est ui.js
   qui la fait varier au fil du défilement. Tout ce qui bouge dans l'en-tête en
   dérive : aucune bascule d'état, donc aucun à-coup au premier pixel.
   Repli si le script ne tourne pas : 0, soit l'en-tête au repos. */
.cde-entete {
	--cde-defile: 0;

	position: sticky;
	top: 0;
	z-index: 90;
	padding-block: calc(.8rem - .34rem * var(--cde-defile));
	border-bottom: 1px solid rgba(138, 154, 123, calc(.55 * var(--cde-defile)));
	box-shadow: 0 6px 22px -16px rgba(63, 58, 51, calc(.85 * var(--cde-defile)));
}

.cde-entete .wp-block-group {
	flex-wrap: nowrap;
}

/* Aucune largeur maximale ici : le contenu de l'en-tête occupe toute la barre,
   moins le retrait latéral. C'est l'espacement d'origine, retenu après essai
   d'une version plus resserrée.
   À savoir : la règle « main .alignwide » ne s'applique qu'au contenu des
   pages, donc l'en-tête est un peu plus large qu'elles et le logo n'est pas
   aligné sur leur marge de gauche. C'est assumé. */
.cde-entete-inner {
	min-height: 0;
}

/* --- La marque : renard, nom, baseline -------------------------------- */

.cde-marque {
	min-width: 0;
}

.cde-marque .wp-block-site-logo {
	flex: 0 0 auto;
	margin: 0;
}

/* Le logo est détouré : posé sur un disque crème, il retrouve le fond clair
   pour lequel il a été dessiné, et ses traits internes redeviennent lisibles. */
.cde-marque .wp-block-site-logo img {
	display: block;
	/* border-box explicite : l'image ne porte pas de classe cde-*, elle
	   échappe donc à la règle générale, et le retrait s'ajouterait à la
	   largeur déclarée. */
	box-sizing: border-box;
	width: calc(46px - 9px * var(--cde-defile));
	height: calc(46px - 9px * var(--cde-defile));
	padding: 4px;
	background: var(--wp--preset--color--creme);
	border-radius: 50%;
	object-fit: contain;
}

.cde-marque-texte {
	min-width: 0;
}

.cde-entete .wp-block-site-title {
	white-space: nowrap;
	margin: 0;
	line-height: 1.1;
}

/* La baseline se replie et s'efface avec le défilement.
   La hauteur est chiffrée, jamais automatique : on ne peut pas interpoler
   depuis « auto », et c'était la cause du repli sec au premier scroll.
   L'opacité s'éteint plus vite que la hauteur (facteur 1.7) pour que le texte
   ait disparu avant que la ligne ne se referme — sinon on voit un fil de
   caractères écrasés. */
.cde-marque-baseline {
	margin: .1rem 0 0;
	height: calc(1rem * (1 - var(--cde-defile)));
	overflow: hidden;
	font-size: .6875rem;
	line-height: 1;
	letter-spacing: .07em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: calc(1 - 1.7 * var(--cde-defile));
	color: rgba(242, 238, 226, .78);
}

/* --- Actions : navigation et bouton ----------------------------------- */

.cde-entete-actions {
	flex: 0 0 auto;
}

.cde-entete-cta .wp-block-button__link {
	padding: .5rem 1.05rem;
	font-size: .75rem;
	color: var(--wp--preset--color--creme);
	background: transparent;
	border: 1px solid rgba(250, 246, 236, .55);
}

.cde-entete-cta .wp-block-button__link:hover,
.cde-entete-cta .wp-block-button__link:focus {
	background: var(--wp--preset--color--creme);
	border-color: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--vert-fonce);
}

/* Sous 1100px, le bouton ferait déborder la ligne : la navigation suffit,
   « Contact » y figure déjà.
   Le sélecteur doit inclure .wp-block-buttons : WordPress pose
   « .wp-block-buttons.is-layout-flex { display: flex } », qui compte deux
   classes et l'emporterait sur une règle plus simple. */
@media (max-width: 1100px) {
	.cde-entete-cta.wp-block-buttons {
		display: none;
	}
}

@media (max-width: 520px) {
	.cde-marque-baseline {
		display: none;
	}

	.cde-entete .wp-block-site-title {
		font-size: 1.1rem;
	}
}

/* La couleur des liens du menu se pose sur le <nav>, pas plus bas.
   WordPress applique « color: inherit !important » au conteneur réactif tant
   que le menu est fermé — c'est ce qui réserve les couleurs de l'overlay à son
   ouverture. Toute règle posée sur ce conteneur ou sur les liens est donc sans
   effet ; en la posant au-dessus, l'héritage la fait descendre.
   Quand l'overlay s'ouvre, « .has-vert-fonce-color !important » reprend la
   main et le menu s'affiche bien en vert foncé sur crème. */
.cde-entete .cde-nav {
	color: var(--wp--preset--color--creme);
}

.cde-nav .wp-block-navigation-item__content {
	position: relative;
	padding-block: .3rem;
	font-size: .95rem;
}

.cde-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--wp--preset--color--vert-clair);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--cde-transition);
}

.cde-nav .wp-block-navigation-item__content:hover::after,
.cde-nav .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* La page courante et le survol doivent repasser devant le « inherit » du
   cœur : quatre classes suffisent. */
.cde-entete .cde-nav .current-menu-item > .wp-block-navigation-item__content,
.cde-entete .cde-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--blanc);
}

/* WordPress ne replie le menu qu'à 600px : trop tard pour quatre entrées
   accompagnées du titre du site. */
@media (max-width: 860px) {
	.cde-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.cde-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(1.5rem, 7vw, 4rem);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--georgia);
	font-size: clamp(1.4rem, 5vw, 2rem);
	color: var(--wp--preset--color--vert-fonce);
}

/* ==========================================================================
   Écriture manuscrite et boutons autonomes
   ========================================================================== */

/* Caveat sert uniquement aux très grands titres. Sa hauteur d'x est faible :
   à taille égale elle paraît deux fois plus petite que Georgia, d'où les
   tailles volontairement énormes et l'interligne resserré. */
.cde-manuscrite {
	font-family: var(--wp--preset--font-family--manuscrite);
	font-weight: 700;
	line-height: .92;
	letter-spacing: .005em;
	text-transform: none;
}

/* Boutons hors bloc core/button : les sections en HTML brut en ont besoin. */
.cde-bouton {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .8rem 1.6rem;
	font-family: var(--wp--preset--font-family--calibri);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--creme);
	background: var(--wp--preset--color--vert-fonce);
	border: 1px solid var(--wp--preset--color--vert-fonce);
	border-radius: var(--cde-arrondi-bouton);
	transition: background var(--cde-transition), color var(--cde-transition), border-color var(--cde-transition);
}

.cde-bouton:hover {
	background: var(--wp--preset--color--vert-clair);
	border-color: var(--wp--preset--color--vert-clair);
	color: var(--wp--preset--color--creme);
}

.cde-bouton .cde-picto {
	transition: transform var(--cde-transition);
}

.cde-bouton:hover .cde-picto {
	transform: translateX(3px);
}

/* Sur photo ou sur fond vert, le bouton s'inverse. */
.cde-bouton--clair {
	background: var(--wp--preset--color--creme);
	border-color: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--vert-fonce);
}

.cde-bouton--clair:hover {
	background: var(--wp--preset--color--creme-gris);
	border-color: var(--wp--preset--color--creme-gris);
	color: var(--wp--preset--color--vert-fonce);
}

.cde-bouton--fantome {
	background: transparent;
	border-color: rgba(250, 246, 236, .7);
	color: var(--wp--preset--color--creme);
}

.cde-bouton--fantome:hover {
	background: rgba(250, 246, 236, .14);
	border-color: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--creme);
}

/* Lien souligné qui se dessine au survol */
.cde-lien-souligne {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid currentColor;
	padding-bottom: .15rem;
	transition: gap var(--cde-transition), opacity var(--cde-transition);
}

.cde-lien-souligne:hover {
	gap: .8rem;
	opacity: .75;
}

/* ==========================================================================
   Héros plein cadre
   ========================================================================== */

.cde-heros-plein {
	position: relative;
	display: grid;
	align-items: end;
	min-height: min(88vh, 46rem);
	overflow: clip;
	isolation: isolate;
}

.cde-heros-plein-fond {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* La photo est une ambiance, pas un sujet : on la calme pour que le texte
	   passe devant sans lutter. */
	filter: saturate(.88);
}

.cde-heros-plein-voile {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(63, 58, 51, .5) 0%, rgba(63, 58, 51, .18) 32%, rgba(63, 58, 51, .72) 78%, rgba(63, 58, 51, .88) 100%),
		linear-gradient(90deg, rgba(95, 111, 82, .55) 0%, rgba(95, 111, 82, 0) 62%);
}

.cde-heros-plein-contenu {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--70) var(--wp--style--root--padding-right) var(--wp--preset--spacing--60) var(--wp--style--root--padding-left);
	color: var(--wp--preset--color--creme);
}

.cde-heros-plein-titre {
	display: flex;
	flex-direction: column;
	margin: .4rem 0 0;
	max-width: 18ch;
	font-family: var(--wp--preset--font-family--georgia);
	font-weight: 700;
	font-size: clamp(2.1rem, 5.2vw, 3.6rem);
	line-height: 1.08;
	letter-spacing: -0.005em;
	text-transform: none;
	color: var(--wp--preset--color--creme);
	text-shadow: 0 2px 24px rgba(63, 58, 51, .45);
}

/* La troisième ligne bascule en manuscrite, nettement plus grande pour
   compenser la faible hauteur d'x de Caveat. */
.cde-heros-plein-titre .cde-manuscrite {
	font-size: clamp(3.4rem, 9vw, 6.2rem);
	margin-top: .1em;
	max-width: none;
}

.cde-heros-plein-chapo {
	max-width: 42ch;
	margin: 1.1rem 0 0;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: rgba(250, 246, 236, .92);
}

.cde-heros-plein-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: var(--wp--preset--spacing--40);
}

.cde-surtitre--clair {
	color: var(--wp--preset--color--creme-gris);
	opacity: .95;
}

.cde-heros-plein-descendre {
	position: absolute;
	left: 50%;
	bottom: 1.1rem;
	translate: -50% 0;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	color: var(--wp--preset--color--creme);
	border: 1px solid rgba(250, 246, 236, .45);
	animation: cde-flotte 2.6s ease-in-out infinite;
}

.cde-heros-plein-descendre:hover {
	background: rgba(250, 246, 236, .16);
}

@keyframes cde-flotte {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(5px); }
}

@media (max-width: 600px) {
	.cde-heros-plein {
		min-height: min(80vh, 34rem);
	}

	.cde-heros-plein-descendre {
		display: none;
	}
}

/* ==========================================================================
   Bandeau d'annonce
   ========================================================================== */

.cde-bandeau-annonce {
	background: var(--wp--preset--color--vert-fonce);
	color: var(--wp--preset--color--creme);
}

.cde-bandeau-annonce-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--40) var(--wp--style--root--padding-right) var(--wp--preset--spacing--40) var(--wp--style--root--padding-left);
}

.cde-bandeau-annonce-picto {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(250, 246, 236, .12);
	color: var(--wp--preset--color--creme);
}

.cde-bandeau-annonce-texte {
	flex: 1 1 20rem;
	margin: 0;
	line-height: 1.5;
}

.cde-bandeau-annonce-texte strong {
	display: block;
	font-family: var(--wp--preset--font-family--georgia);
	font-size: 1.25rem;
	color: var(--wp--preset--color--creme);
}

.cde-bandeau-annonce-texte span {
	font-size: .9375rem;
	color: rgba(242, 238, 226, .82);
}

/* ==========================================================================
   Chiffres clés
   ========================================================================== */

.cde-chiffres {
	background: var(--wp--preset--color--creme);
	padding-block: var(--wp--preset--spacing--60);
}

.cde-chiffres-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--40);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

.cde-chiffre {
	position: relative;
	padding-left: var(--wp--preset--spacing--40);
	border-left: var(--cde-trait-vert);
}

.cde-chiffre:first-child {
	padding-left: 0;
	border-left: 0;
}

.cde-chiffre-nombre {
	display: flex;
	align-items: baseline;
	gap: .35rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--manuscrite);
	font-weight: 700;
	font-size: clamp(3.2rem, 6vw, 4.75rem);
	line-height: .9;
	color: var(--wp--preset--color--vert-fonce);
}

.cde-chiffre-unite {
	font-family: var(--wp--preset--font-family--calibri);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--vert-clair);
}

.cde-chiffre-texte {
	margin: .55rem 0 0;
	font-size: .875rem;
	line-height: 1.55;
	color: var(--wp--preset--color--texte);
}

@media (max-width: 900px) {
	.cde-chiffres-inner {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--preset--spacing--40);
	}

	/* Sur deux colonnes, c'est le premier de chaque rangée qui perd son filet. */
	.cde-chiffre:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 480px) {
	.cde-chiffres-inner {
		grid-template-columns: 1fr;
	}

	.cde-chiffre {
		padding-left: 0;
		border-left: 0;
		padding-top: var(--wp--preset--spacing--30);
		border-top: var(--cde-trait-vert);
	}

	.cde-chiffre:first-child {
		padding-top: 0;
		border-top: 0;
	}
}

/* ==========================================================================
   Grandes sections « valeurs »
   ========================================================================== */

.cde-valeur {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: min(78vh, 40rem);
}

.cde-valeur--photo-droite .cde-valeur-photo {
	order: 2;
}

.cde-valeur-photo {
	position: relative;
	overflow: hidden;
	min-height: 22rem;
}

/* Pas de zoom au survol : la photo n'est pas cliquable, le mouvement ne
   promettait rien et agitait la lecture. Elle reste posée. */
.cde-valeur-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cde-valeur-texte {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .75rem;
	padding: var(--wp--preset--spacing--60) clamp(1.5rem, 5vw, 4.5rem);
}

.cde-valeur-titre {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-family: var(--wp--preset--font-family--georgia);
	line-height: 1.1;
	text-transform: none;
	letter-spacing: 0;
}

.cde-valeur-titre .cde-manuscrite {
	font-size: clamp(3.2rem, 6.5vw, 5rem);
	color: var(--wp--preset--color--vert-fonce);
}

.cde-valeur-suite {
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	font-weight: 400;
	font-style: italic;
	color: var(--wp--preset--color--brun);
	margin-top: .1em;
}

.cde-valeur-corps {
	margin: .35rem 0 0;
	max-width: 46ch;
	font-size: 1rem;
	line-height: 1.75;
}

/* Une section peut tenir en plusieurs paragraphes : le .35rem du premier
   collerait les blocs entre eux. */
.cde-valeur-corps + .cde-valeur-corps {
	margin-top: .8rem;
}

.cde-valeur-points {
	list-style: none;
	padding: 0;
	margin: var(--wp--preset--spacing--30) 0 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.cde-valeur-points li {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	margin: 0;
	font-size: .9375rem;
	line-height: 1.5;
}

.cde-valeur-points .cde-picto {
	flex: 0 0 auto;
	margin-top: .18rem;
	color: var(--wp--preset--color--vert-clair);
}

.cde-valeur .cde-lien-souligne {
	align-self: flex-start;
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--vert-fonce);
}

/* Les trois fonds, qui rythment la descente dans la page. */
.cde-valeur--creme      { background: var(--wp--preset--color--creme); }
.cde-valeur--creme-gris { background: var(--wp--preset--color--creme-gris); }

/* ==========================================================================
   Bords ondulés des sections
   ========================================================================== */

/* Empilées, les sections de l'accueil ne se séparaient que par des lignes
   horizontales parfaitement droites. Chaque section pousse donc sa couleur
   vers le haut à travers un tracé irrégulier, dessiné à main levée : une
   seule ondulation par jointure, celle de la section du dessous.

   Le tracé sert de masque, et le fond du pseudo-élément est `inherit` : la
   vague prend automatiquement la couleur de sa section, sans avoir à décliner
   une règle par teinte. */
:root {
	--cde-vague: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 41c96-19 158 12 244 15 86 3 137-27 226-31 89-4 148 27 232 30 84 3 141-24 224-29 83-5 145 22 228 24 62 2 106-11 154-24 48-13 92-19 132-13V64H0Z'/%3E%3C/svg%3E");
	--cde-vague-hauteur: clamp(1.75rem, 3.4vw, 3.25rem);
}

.cde-valeur,
.cde-choses {
	position: relative;
	/* Le contexte d'empilement garde la vague au-dessus de la photo de sa
	   propre section, sans l'empêcher de déborder sur celle du dessus : les
	   sections suivantes se peignent de toute façon par-dessus. */
	isolation: isolate;
}

.cde-valeur::before,
.cde-choses::before {
	content: "";
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	/* Un pixel de recouvrement : sans lui, un filet de la section du dessus
	   reste visible entre les deux fonds. */
	top: calc(-1 * var(--cde-vague-hauteur) + 1px);
	height: var(--cde-vague-hauteur);
	background-color: inherit;
	-webkit-mask: var(--cde-vague) bottom center / 100% 100% no-repeat;
	mask: var(--cde-vague) bottom center / 100% 100% no-repeat;
	pointer-events: none;
}

/* Une jointure sur deux retourne le tracé : deux vagues identiques à la suite
   se remarquent tout de suite. */
.cde-valeur:nth-of-type(even)::before,
.cde-choses::before {
	transform: scaleX(-1);
}


.cde-valeur--vert-fonce {
	background: var(--wp--preset--color--vert-fonce);
	color: var(--wp--preset--color--creme-gris);
}

.cde-valeur--vert-fonce .cde-surtitre { color: var(--wp--preset--color--creme-gris); opacity: .8; }
.cde-valeur--vert-fonce .cde-valeur-titre .cde-manuscrite { color: var(--wp--preset--color--creme); }
.cde-valeur--vert-fonce .cde-valeur-suite { color: var(--wp--preset--color--vert-clair); }
.cde-valeur--vert-fonce .cde-valeur-points .cde-picto { color: var(--wp--preset--color--vert-clair); }
.cde-valeur--vert-fonce .cde-lien-souligne { color: var(--wp--preset--color--creme); }
.cde-valeur--vert-fonce :where(a, button):focus-visible { outline-color: var(--wp--preset--color--creme); }

@media (max-width: 860px) {
	.cde-valeur {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	/* Sur une colonne, la photo repasse toujours en tête : l'alternance
	   gauche/droite n'a plus de sens et inverserait l'ordre de lecture. */
	.cde-valeur--photo-droite .cde-valeur-photo {
		order: 0;
	}

	.cde-valeur-photo {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.cde-valeur-texte {
		padding: var(--wp--preset--spacing--50) var(--wp--style--root--padding-right) var(--wp--preset--spacing--50) var(--wp--style--root--padding-left);
	}
}

/* ==========================================================================
   Les petites choses qui font la différence
   ========================================================================== */

.cde-choses {
	background: var(--wp--preset--color--creme-gris);
	padding-block: var(--wp--preset--spacing--70);
}

.cde-choses-inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

.cde-choses-entete {
	max-width: 34rem;
	margin-bottom: var(--wp--preset--spacing--50);
}

.cde-choses-titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--georgia);
	font-size: clamp(1.6rem, 3.2vw, 2.25rem);
	line-height: 1.2;
	color: var(--wp--preset--color--vert-fonce);
}

.cde-choses-titre .cde-manuscrite {
	display: block;
	font-size: clamp(2.6rem, 5.5vw, 4rem);
	color: var(--wp--preset--color--brun);
}

.cde-choses-chapo {
	margin: .8rem 0 0;
	font-size: 1rem;
	line-height: 1.7;
}

.cde-choses-grille {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	list-style: none;
	padding: 0;
	margin: 0;
	/* Le fond fait office de filet : une seule ligne d'un pixel entre les
	   cases, sans doubles bordures aux jonctions. */
	background: rgba(170, 170, 170, .45);
	border: 1px solid rgba(170, 170, 170, .45);
	border-radius: var(--cde-arrondi-carte);
	overflow: hidden;
}

.cde-chose {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	margin: 0;
	padding: clamp(1rem, 2vw, 1.5rem);
	background: var(--wp--preset--color--creme);
	transition: background var(--cde-transition);
}

.cde-chose:hover {
	background: var(--wp--preset--color--blanc);
}

.cde-chose-picto {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: .35rem;
	border-radius: 50%;
	background: var(--wp--preset--color--creme-gris);
	color: var(--wp--preset--color--vert-fonce);
	transition: background var(--cde-transition), color var(--cde-transition);
}

.cde-chose:hover .cde-chose-picto {
	background: var(--wp--preset--color--vert-fonce);
	color: var(--wp--preset--color--creme);
}

.cde-chose-titre {
	font-family: var(--wp--preset--font-family--georgia);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--vert-fonce);
}

.cde-chose-texte {
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--texte);
}

@media (max-width: 1000px) {
	.cde-choses-grille { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
	.cde-choses-grille { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 460px) {
	.cde-choses-grille { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Situation géographique
   ========================================================================== */

.cde-situation {
	background: var(--wp--preset--color--creme);
	padding-block: var(--wp--preset--spacing--70);
}

.cde-situation-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

.cde-situation-titre {
	margin: .2rem 0 .8rem;
	font-family: var(--wp--preset--font-family--georgia);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	line-height: 1.2;
	color: var(--wp--preset--color--vert-fonce);
}

.cde-situation-titre .cde-manuscrite {
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	color: var(--wp--preset--color--brun);
}

.cde-situation-liste {
	list-style: none;
	padding: 0;
	margin: var(--wp--preset--spacing--40) 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.cde-situation-liste li {
	display: flex;
	align-items: flex-start;
	gap: .8rem;
	margin: 0;
	font-size: .9375rem;
	line-height: 1.5;
}

.cde-situation-liste .cde-picto {
	flex: 0 0 auto;
	margin-top: .15rem;
	color: var(--wp--preset--color--vert-clair);
}

.cde-situation-carte {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.cde-situation-carte iframe {
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 0;
	border-radius: var(--cde-arrondi-carte);
	/* La carte est un objet froid au milieu d'une page chaude : le cadre
	   crème grisé la raccroche au reste. */
	outline: 10px solid var(--wp--preset--color--creme-gris);
	outline-offset: -10px;
}

/* Carte fixe : ni glissement, ni zoom, ni capture du défilement.
   Une carte manipulable posée au milieu d'une page avale la molette et
   l'utilisateur s'y retrouve bloqué. Le lien placé dessous, lui, reste
   cliquable et ouvre la version interactive. */
.cde-situation-carte iframe,
.cde-carte-page iframe {
	pointer-events: none;
}

@media (max-width: 860px) {
	.cde-situation-inner {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Apparition au défilement
   ========================================================================== */

/* Le contenu ne doit jamais dépendre d'une animation pour être lisible.
   Sans la classe « js » sur <html>, aucune règle ci-dessous ne s'applique et
   tout s'affiche normalement : c'est le comportement de repli. */
.js .cde-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity var(--wp--custom--apparition, 820ms ease), transform var(--wp--custom--apparition, 820ms ease);
}

/* Attention à la spécificité : « .js .cde-reveal » vaut deux classes, tout
   comme « .cde-reveal.est-visible ». À égalité, c'est la dernière règle du
   fichier qui gagne — donc celle qui masque. Il faut trois classes ici, sans
   quoi les sections restent invisibles pour de bon. */
.js .cde-reveal.est-visible {
	opacity: 1;
	transform: none;
}

/* Posée par ui.js quand la page n'est pas visible : le navigateur y gèle les
   transitions, l'état final doit donc s'appliquer d'un coup. */
.js .cde-reveal.sans-animation {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.js .cde-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.cde-heros-plein-descendre {
		animation: none;
	}
}

/* ==========================================================================
   Accueil éditoriale — en-tête d'identité
   ========================================================================== */

/* Pas de photo pleine hauteur : le visiteur sait où il est en trois lignes,
   puis descend dans les articles. */
.cde-edito-titre {
	margin: .3rem 0 0;
	font-size: clamp(2.3rem, 6vw, 3.6rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--wp--preset--color--vert-fonce);
}

.cde-edito-chapo {
	max-width: 40rem;
	margin: 1rem 0 0;
	font-size: 1.0625rem;
	line-height: 1.75;
}

.cde-filet--large {
	max-width: 100%;
	margin-top: var(--wp--preset--spacing--50);
}

/* Annonce de place disponible : l'information que les parents cherchent en
   premier. Encadrée pour se détacher du chapô sans crier. */
.cde-annonce {
	display: inline-block;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: .6rem 1rem;
	font-size: .9375rem;
	line-height: 1.6;
	background: var(--wp--preset--color--creme-gris);
	border-left: 2px solid var(--wp--preset--color--vert-clair);
	border-radius: 0 var(--cde-arrondi-vignette) var(--cde-arrondi-vignette) 0;
}

.cde-annonce strong {
	color: var(--wp--preset--color--vert-fonce);
}

/* ==========================================================================
   Article à la une
   ========================================================================== */

.cde-une-corps {
	align-items: center;
}

.cde-une-photo .wp-block-post-featured-image {
	margin: 0;
	padding: 10px;
	background: var(--wp--preset--color--creme-gris);
	border-radius: var(--cde-arrondi-carte);
}

.cde-une-photo img {
	width: 100%;
	border-radius: var(--cde-arrondi-vignette);
	transition: opacity var(--cde-transition);
}

.cde-une-photo a:hover img {
	opacity: .93;
}

/* Sans image de une, la colonne photo ne doit pas laisser un cadre vide. */
.cde-une-photo:not(:has(img)) {
	display: none;
}

.cde-une-texte {
	display: flex;
	flex-direction: column;
	gap: .7rem;
}

/* Dans la une, le surtitre sert d'étiquette : la feuille ferait doublon avec
   la pastille de catégorie posée juste à côté. */
.cde-surtitre--nu {
	margin: 0;
}

.cde-surtitre--nu::before {
	display: none;
}

.cde-une-texte .wp-block-post-terms {
	display: inline-flex;
	padding: .2rem .6rem;
	font-size: .6875rem;
	letter-spacing: .04em;
	color: var(--wp--preset--color--vert-fonce);
	background: var(--wp--preset--color--creme-gris);
	border-radius: 999px;
}

.cde-une-texte .wp-block-post-terms a {
	color: inherit;
}

.cde-une-titre {
	margin: 0;
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	line-height: 1.22;
}

.cde-une-titre a {
	color: inherit;
}

.cde-une-chapo {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
}

.cde-une-chapo .wp-block-post-excerpt__more-text {
	display: none;
}

.cde-une .cde-carte-meta {
	padding-top: .3rem;
}

/* ==========================================================================
   Le fil du journal — deux articles illustrés, une colonne de brèves
   ========================================================================== */

.cde-fil-entete {
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: var(--cde-trait-vert);
}

.cde-fil-entete .cde-surtitre {
	margin-bottom: 0;
}

.cde-fil-entete .cde-lien-fleche {
	margin-top: 0;
}

.cde-fil .cde-carte {
	background: var(--wp--preset--color--blanc);
}

/* Deux cartes côte à côte, une seule sous 900px.
   La colonne porte aussi .cde-grille, dont la règle à trois colonnes a la même
   spécificité et arrive plus loin dans le fichier : il faut un sélecteur plus
   fort, pas seulement un ordre différent. */
.cde-fil .cde-grille .wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

@media (max-width: 900px) {
	.cde-fil .cde-grille .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

/* Les brèves n'ont pas d'image : c'est ce qui crée le contraste avec les
   cartes et donne la densité d'un vrai sommaire. */
.cde-breves-titre {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--calibri);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--vert-clair);
}

.cde-breve {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding-block: .85rem;
	border-top: var(--cde-trait);
}

.cde-breves .wp-block-post-template > li:first-child .cde-breve {
	border-top: 0;
	padding-top: 0;
}

.cde-breve-cat {
	font-size: .6875rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--vert-clair);
}

.cde-breve-cat a {
	color: inherit;
}

.cde-breve-titre {
	margin: 0;
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.35;
}

.cde-breve-titre a {
	color: var(--wp--preset--color--vert-fonce);
}

.cde-breve:hover .cde-breve-titre a {
	color: var(--wp--preset--color--brun);
}

.cde-breve-date {
	font-size: .6875rem;
	color: var(--wp--preset--color--brun);
}

/* ==========================================================================
   Entrées par catégorie
   ========================================================================== */

.cde-portes-liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
	gap: 14px;
	list-style: none;
	padding: 0;
	margin: var(--wp--preset--spacing--40) 0 0;
}

.cde-portes-liste li {
	margin: 0;
}

.cde-porte {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	height: 100%;
	padding: 16px;
	background: var(--wp--preset--color--blanc);
	border: var(--cde-trait);
	border-radius: var(--cde-arrondi-carte);
	text-decoration: none;
	transition: border-color var(--cde-transition), background var(--cde-transition);
}

.cde-porte:hover {
	border-color: var(--wp--preset--color--vert-clair);
	background: var(--wp--preset--color--creme-gris);
}

.cde-porte-picto {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: .35rem;
	border-radius: 50%;
	background: var(--wp--preset--color--creme-gris);
	color: var(--wp--preset--color--vert-fonce);
}

.cde-porte:hover .cde-porte-picto {
	background: var(--wp--preset--color--blanc);
}

.cde-porte-nom {
	font-family: var(--wp--preset--font-family--georgia);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--wp--preset--color--vert-fonce);
}

.cde-porte-compte {
	font-size: .6875rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brun);
}

.cde-porte-texte {
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--texte);
}

/* ==========================================================================
   Encart « la structure », sur fond vert foncé
   ========================================================================== */

.cde-structure {
	color: var(--wp--preset--color--creme-gris);
}

.cde-structure h2 {
	margin: .2rem 0 0;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.22;
	color: var(--wp--preset--color--creme);
}

/* Sur fond vert, le vert clair du surtitre passe mal : on remonte au crème. */
.cde-structure .cde-surtitre {
	color: var(--wp--preset--color--creme-gris);
	opacity: .8;
}

.cde-structure-photo img {
	width: 100%;
	border-radius: var(--cde-arrondi-carte);
}

.cde-structure-reperes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--30);
	list-style: none;
	padding: var(--wp--preset--spacing--40) 0 0;
	margin: var(--wp--preset--spacing--40) 0 0;
	border-top: 1px solid rgba(250, 246, 236, .22);
}

.cde-structure-reperes li {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	margin: 0;
}

.cde-structure-picto {
	color: var(--wp--preset--color--vert-clair);
	margin-bottom: .2rem;
}

.cde-structure-cle {
	font-family: var(--wp--preset--font-family--georgia);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--creme);
}

.cde-structure-val {
	font-size: .8125rem;
	line-height: 1.45;
	color: rgba(242, 238, 226, .78);
}

/* Bouton posé sur fond vert : le vert foncé sur vert foncé disparaîtrait. */
.cde-bouton-clair .wp-element-button {
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--vert-fonce);
}

.cde-bouton-clair .wp-element-button:hover,
.cde-bouton-clair .wp-element-button:focus {
	background: var(--wp--preset--color--creme-gris);
	color: var(--wp--preset--color--vert-fonce);
}

.cde-structure :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--creme);
}

/* ==========================================================================
   Héros — variante « split asymétrique »
   ========================================================================== */

.cde-heros-split .wp-block-columns {
	align-items: center;
}

.cde-heros-titre {
	margin: 0 0 1rem;
	text-transform: none;
	letter-spacing: 0;
	font-size: clamp(2.1rem, 5.4vw, 3.4rem);
	line-height: 1.12;
	color: var(--wp--preset--color--vert-fonce);
}

/* Le mot clé de la deuxième ligne bascule en italique brun doré */
.cde-heros-titre em {
	font-style: italic;
	color: var(--wp--preset--color--brun);
}

.cde-heros-photo {
	position: relative;
}

.cde-heros-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--cde-arrondi-carte);
}

/* Le dégradé fond la photo dans le crème de la page, comme sur la référence.
   Il ne doit jamais couvrir la citation posée par-dessus. */
.cde-heros-photo::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 42%;
	border-radius: 0 0 var(--cde-arrondi-carte) var(--cde-arrondi-carte);
	background: var(--wp--preset--gradient--fondu-creme);
	pointer-events: none;
}

/* Citation verticale dans un coin de la photo */
.cde-citation-verticale {
	position: absolute;
	z-index: 2;
	left: 1.1rem;
	bottom: 1.6rem;
	margin: 0;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--wp--preset--font-family--georgia);
	font-style: italic;
	font-size: .8125rem;
	letter-spacing: .04em;
	color: var(--wp--preset--color--creme);
	text-shadow: 0 1px 6px rgba(63, 58, 51, .55);
}

@media (max-width: 781px) {
	.cde-citation-verticale {
		display: none;
	}
}

/* Bouton à flèche : la flèche avance au survol */
.cde-bouton-fleche .wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
}

.cde-bouton-fleche .wp-element-button::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--cde-fleche) center / contain no-repeat;
	mask: var(--cde-fleche) center / contain no-repeat;
	transition: transform var(--cde-transition);
}

.cde-bouton-fleche .wp-element-button:hover::after {
	transform: translateX(3px);
}

:root {
	--cde-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Héros — variante « bandeau plein cadre »
   ========================================================================== */

.cde-heros-bandeau {
	position: relative;
}

.cde-heros-bandeau .wp-block-cover__image-background {
	object-fit: cover;
}

.cde-heros-bandeau .wp-block-cover__inner-container {
	align-self: flex-end;
	max-width: 34rem;
	margin: 0 auto 0 0;
	padding: clamp(1rem, 2.5vw, 1.6rem);
	background: rgba(63, 58, 51, .55);
	border-radius: var(--cde-arrondi-vignette);
}

.cde-heros-bandeau .wp-block-cover__inner-container :is(h1, h2, p) {
	font-family: var(--wp--preset--font-family--georgia);
	color: var(--wp--preset--color--creme);
}

/* ==========================================================================
   Trois piliers
   ========================================================================== */

.cde-piliers .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: .55rem;
}

.cde-pilier-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--cde-arrondi-vignette);
}

.cde-pilier-label {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin: .85rem 0 0;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--vert-clair);
}

.cde-pilier-label .cde-picto {
	flex: 0 0 auto;
}

.cde-piliers h3 {
	margin: 0;
}

/* Lien texte plutôt que bouton plein : le pilier reste ouvert, pas fermé
   comme une carte. */
.cde-lien-fleche {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: .35rem;
	font-size: .9375rem;
	color: var(--wp--preset--color--vert-clair);
}

.cde-lien-fleche a {
	color: inherit;
}

.cde-lien-fleche:hover {
	color: var(--wp--preset--color--vert-fonce);
}

/* ==========================================================================
   Bandeau de mots-clés
   ========================================================================== */

.cde-bandeau-mots {
	padding-block: 14px;
}

.cde-bandeau-mots p {
	margin: 0;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--creme);
	line-height: 2;
}

/* ==========================================================================
   Bloc newsletter
   ========================================================================== */

.cde-newsletter .wp-block-columns {
	align-items: stretch;
	gap: 0;
}

.cde-newsletter-photo img {
	width: 100%;
	height: 100%;
	min-height: 15rem;
	object-fit: cover;
	border-radius: var(--cde-arrondi-carte);
}

.cde-newsletter-texte {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.25rem, 3vw, 2.25rem);
}

.cde-newsletter-texte h2 {
	margin: 0 0 .5rem;
	font-size: 1.6rem;
}

/* Le formulaire reste utilisable même sans extension : un champ, un bouton,
   alignés, qui se replient sous 480px. */
.cde-champ-courriel {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 1rem;
}

.cde-champ-courriel input[type="email"] {
	flex: 1 1 12rem;
	min-width: 0;
	padding: .7rem .9rem;
	font-family: var(--wp--preset--font-family--calibri);
	font-size: .9375rem;
	color: var(--wp--preset--color--texte);
	background: var(--wp--preset--color--blanc);
	border: var(--cde-trait);
	border-radius: var(--cde-arrondi-bouton);
}

.cde-champ-courriel input[type="email"]::placeholder {
	color: var(--wp--preset--color--gris);
}

.cde-champ-courriel button {
	padding: .7rem 1.5rem;
	font-family: var(--wp--preset--font-family--calibri);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--creme);
	background: var(--wp--preset--color--vert-fonce);
	border: 0;
	border-radius: var(--cde-arrondi-bouton);
	cursor: pointer;
	transition: background var(--cde-transition);
}

.cde-champ-courriel button:hover {
	background: var(--wp--preset--color--vert-clair);
}

/* ==========================================================================
   Grille d'articles
   ========================================================================== */

.cde-grille .wp-block-post-template {
	gap: 22px;
	align-items: stretch;
}

/* Trois colonnes en desktop, comme la charte le demande. Le calcul de
   WordPress à partir de minimumColumnWidth en produit quatre dès 1200px. */
.cde-grille .wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.cde-grille .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.cde-grille .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

.cde-grille .wp-block-post-template > li {
	display: flex;
}

.cde-grille .cde-carte {
	width: 100%;
}

.cde-carte {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--blanc);
	border: var(--cde-trait);
	border-radius: var(--cde-arrondi-carte);
	overflow: hidden;
	transition: border-color var(--cde-transition), transform var(--cde-transition);
}

.cde-carte:hover {
	border-color: var(--wp--preset--color--vert-clair);
	transform: translateY(-2px);
}

/* L'image touche les bords de la carte : aucun padding autour d'elle. */
.cde-carte .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--creme-gris);
	flex-shrink: 0;
}

.cde-carte .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform 600ms var(--cde-transition);
}

.cde-carte:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

/* Deux activités n'ont pas encore de photo. Plutôt qu'une carte sans tête au
   milieu d'une grille illustrée, on pose un motif de feuillage au trait, aux
   couleurs de la charte. */
.cde-carte:not(:has(.wp-block-post-featured-image))::before {
	content: "";
	display: block;
	aspect-ratio: 4 / 3;
	flex-shrink: 0;
	background:
		var(--cde-feuille) center / 30% no-repeat,
		var(--wp--preset--color--creme-gris);
	opacity: .9;
}

.cde-carte-corps {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 15px;
	flex: 1;
}

/* Tag catégorie en pastille */
.cde-carte .wp-block-post-terms,
.cde-tag {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: .3rem;
	padding: .2rem .6rem;
	font-size: .6875rem;
	letter-spacing: .04em;
	color: var(--wp--preset--color--vert-fonce);
	background: var(--wp--preset--color--creme-gris);
	border-radius: 999px;
}

.cde-carte .wp-block-post-terms a {
	color: inherit;
}

.cde-carte .wp-block-post-title {
	margin: 0;
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.35;
}

.cde-carte .wp-block-post-title a {
	color: inherit;
}

/* Toute la carte devient cliquable, sans imbriquer de lien dans un lien. */
.cde-carte .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.cde-carte .wp-block-post-excerpt {
	margin: 0;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--texte);
}

.cde-carte .wp-block-post-excerpt__more-text {
	display: none;
}

/* Méta de carte : date et temps de lecture, brun doré, avec leurs pictos */
.cde-carte-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .9rem;
	margin-top: auto;
	padding-top: .55rem;
	font-size: .6875rem;
	color: var(--wp--preset--color--brun);
}

/* Le bloc shortcode enveloppe sa sortie dans un paragraphe : il ne doit
   pas rompre l'alignement de la ligne de méta. */
.cde-carte-meta p {
	margin: 0;
	line-height: inherit;
}

.cde-meta-item,
.cde-carte-meta .wp-block-post-date {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	margin: 0;
	font-size: inherit;
	color: inherit;
}

.cde-carte-meta .cde-picto {
	flex: 0 0 auto;
	opacity: .8;
}

/* Filtres par catégorie, au-dessus de la grille du Journal */
.cde-filtres {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.cde-filtres li {
	margin: 0;
}

.cde-filtres a,
.cde-filtres .wp-block-categories-list a {
	display: inline-block;
	padding: .28rem .8rem;
	font-size: .8125rem;
	color: var(--wp--preset--color--vert-fonce);
	background: var(--wp--preset--color--creme-gris);
	border: var(--cde-trait);
	border-radius: 999px;
	transition: background var(--cde-transition), color var(--cde-transition);
}

.cde-filtres a:hover,
.cde-filtres .current-cat > a {
	background: var(--wp--preset--color--vert-fonce);
	color: var(--wp--preset--color--creme);
	border-color: var(--wp--preset--color--vert-fonce);
}

/* La pastille active retire le filtre : la croix dit que c'est un
   interrupteur, sans quoi rien ne distingue « filtrer » de « défiltrer ». */
.cde-filtre-croix {
	margin-left: .35rem;
	opacity: .75;
	font-size: .9em;
}

/* Étiquette réservée aux lecteurs d'écran : retirée du flux visuel sans être
   masquée pour les technologies d'assistance. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Pagination */
.cde-pagination {
	margin-top: var(--wp--preset--spacing--50);
	font-size: .875rem;
}

.cde-pagination .page-numbers {
	padding: .3rem .7rem;
	border-radius: 999px;
	transition: background var(--cde-transition), color var(--cde-transition);
}

.cde-pagination .page-numbers.current {
	background: var(--wp--preset--color--vert-fonce);
	color: var(--wp--preset--color--creme);
}

.cde-pagination a:hover {
	background: var(--wp--preset--color--creme-gris);
}

/* ==========================================================================
   Article détaillé
   ========================================================================== */

/* L'image de une n'est jamais une photo brute pleine largeur : elle est posée
   dans un carton crème grisé, avec 10px de marge tout autour. */
.cde-cadre-photo {
	padding: 10px;
	background: var(--wp--preset--color--creme-gris);
	border-radius: var(--cde-arrondi-carte);
}

/* Un article sans image de une ne doit pas laisser un bandeau crème vide. */
.cde-cadre-photo:not(:has(img)) {
	display: none;
}

.cde-cadre-photo .wp-block-post-featured-image,
.cde-cadre-photo .wp-block-image {
	margin: 0;
}

.cde-cadre-photo img {
	display: block;
	width: 100%;
	border-radius: var(--cde-arrondi-vignette);
}

.cde-legende {
	margin: .5rem 0 0;
	font-size: .75rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--wp--preset--color--brun);
}

.cde-contenu {
	text-align: justify;
	hyphens: auto;
	line-height: 1.65;
}

/* ==========================================================================
   Pages : mesure plus large et blocs de mise en page
   ========================================================================== */

/* Sur une page, la mesure passe à 52rem et le contenu accueille des tableaux
   et des grilles. Le texte justifié y creuse des rivières : on repasse au fer
   à gauche. La justification reste sur les articles, plus étroits. */
.cde-contenu--page {
	text-align: left;
	hyphens: manual;
	line-height: 1.7;
}

.cde-page-entete {
	padding-bottom: 0 !important;
}

.cde-page-titre {
	margin: 0;
	max-width: 20ch;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	line-height: 1.08;
	letter-spacing: 0;
	text-transform: none;
}

/* La photo d'en-tête de page s'étale en large, pas sur la mesure de lecture. */
.cde-page-photo {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	margin-bottom: var(--wp--preset--spacing--60);
}

/* Chapô : le premier paragraphe d'une page, plus grand que le reste. */
.cde-chapo {
	font-size: 1.1875rem;
	line-height: 1.75;
	color: var(--wp--preset--color--texte);
}

/* --- Héros de page : photo en fond, texte par-dessus ------------------ */

.cde-heros-page {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(20rem, 46vh, 28rem);
	margin-bottom: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--cde-arrondi-carte);
	overflow: hidden;
	isolation: isolate;
}

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

/* Le voile monte du bas : le texte reste lisible sans assombrir la photo
   entière. */
.cde-heros-page-voile {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(45, 42, 36, .82) 0%, rgba(45, 42, 36, .55) 45%, rgba(45, 42, 36, .12) 100%);
}

.cde-heros-page-contenu {
	max-width: 42rem;
	color: var(--wp--preset--color--creme);
}

.cde-heros-page-titre {
	margin: .2rem 0 0;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--creme);
}

.cde-heros-page-chapo {
	margin: .7rem 0 0;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--wp--preset--color--creme-gris);
}

/* Un lien dans le chapo prendrait la couleur de lien du site, illisible sur
   le voile sombre : il reste crème, et c'est le soulignement qui le signale. */
.cde-heros-page-chapo a {
	color: var(--wp--preset--color--creme);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.cde-heros-page-cles {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	padding: 0;
	margin: 1rem 0 0;
}

.cde-heros-page-cles li {
	margin: 0;
	padding: .25rem .75rem;
	font-size: .8125rem;
	color: var(--wp--preset--color--creme);
	background: rgba(250, 246, 236, .16);
	border: 1px solid rgba(250, 246, 236, .3);
	border-radius: 999px;
	backdrop-filter: blur(2px);
}

/* --- Sommaire ancré --------------------------------------------------- */

.cde-sommaire {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: var(--wp--preset--spacing--40);
}

.cde-sommaire a {
	padding: .3rem .85rem;
	font-size: .8125rem;
	color: var(--wp--preset--color--vert-fonce);
	background: var(--wp--preset--color--creme-gris);
	border: var(--cde-trait);
	border-radius: 999px;
	text-decoration: none;
	transition: background var(--cde-transition), color var(--cde-transition);
}

.cde-sommaire a:hover {
	background: var(--wp--preset--color--vert-fonce);
	color: var(--wp--preset--color--creme);
	border-color: var(--wp--preset--color--vert-fonce);
}

/* Sans cette marge, une ancre place le titre sous l'en-tête collant. */
.cde-bloc-titre {
	scroll-margin-top: 5.5rem;
}

/* --- Sections en panneaux --------------------------------------------- */

/* Une page de sept sections sur un fond uniforme se lit comme un seul pavé.
   Un panneau sur deux prend le crème gris : le défilement retrouve un rythme
   sans que rien ne parte en pleine largeur — le contenu reste dans la mesure
   large du gabarit. */
.cde-bloc {
	margin-block: var(--wp--preset--spacing--40);
}

.cde-bloc--gris {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) calc(var(--wp--preset--spacing--40) + .4rem);
	background: var(--wp--preset--color--creme-gris);
	border-radius: var(--cde-arrondi-carte);
}

.cde-bloc-titre {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--georgia);
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.15;
	color: var(--wp--preset--color--brun);
}

.cde-bloc-titre .cde-manuscrite {
	display: block;
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	color: var(--wp--preset--color--vert-fonce);
}

.cde-bloc-sous-titre {
	margin: var(--wp--preset--spacing--40) 0 .5rem;
	font-family: var(--wp--preset--font-family--georgia);
	font-size: 1.25rem;
	color: var(--wp--preset--color--vert-fonce);
}

.cde-bloc-intro,
.cde-bloc-note {
	max-width: 52rem;
	line-height: 1.7;
}

.cde-bloc-intro {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.cde-bloc-note {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: .9375rem;
}

/* Les grilles reprennent leur largeur : dans un panneau, elles ne passent
   plus par la mise en page « large » de WordPress. */
.cde-bloc .cde-triptyque,
.cde-bloc .cde-etapes,
.cde-bloc .cde-galerie-page {
	margin-block: 0;
}

.cde-bloc .cde-encadre {
	margin-bottom: 0;
}

/* --- Les quatre moments de la journée --------------------------------- */

.cde-moments {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.cde-moment {
	margin: 0;
	padding: 18px 20px;
	background: var(--wp--preset--color--creme-gris);
	border-radius: var(--cde-arrondi-carte);
}

.cde-moment-picto {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--vert-fonce);
}

.cde-moment-titre {
	display: block;
	margin: .6rem 0 .3rem;
	font-family: var(--wp--preset--font-family--georgia);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--wp--preset--color--vert-fonce);
}

.cde-moment p {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
}

@media (max-width: 782px) {
	.cde-moments { grid-template-columns: 1fr; }
}

/* La phrase de fin ne se lit plus comme un paragraphe de plus. */
.cde-chute {
	margin: var(--wp--preset--spacing--40) auto 0;
	max-width: 40rem;
	padding: 0;
	border: 0;
	text-align: center;
}

.cde-chute p {
	margin: 0;
	font-family: var(--wp--preset--font-family--manuscrite);
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	line-height: 1.35;
	color: var(--wp--preset--color--vert-fonce);
}

/* --- Activités : thème et pastilles ----------------------------------- */

.cde-theme {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .2rem .8rem;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 14px 18px;
	background: var(--wp--preset--color--creme-gris);
	border-left: 3px solid var(--wp--preset--color--vert-clair);
	border-radius: 0 var(--cde-arrondi-carte) var(--cde-arrondi-carte) 0;
}

.cde-theme-label {
	font-family: var(--wp--preset--font-family--calibri);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brun);
}

.cde-theme-valeur {
	font-family: var(--wp--preset--font-family--manuscrite);
	font-size: 1.75rem;
	line-height: 1.1;
	color: var(--wp--preset--color--vert-fonce);
}

.cde-listes-activites {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
}

@media (max-width: 700px) {
	.cde-listes-activites { grid-template-columns: 1fr; }
}

.cde-liste-activites-titre {
	margin: 0 0 .6rem;
	font-family: var(--wp--preset--font-family--calibri);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--vert-clair);
}

.cde-pastilles {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.cde-pastilles li {
	margin: 0;
	padding: .25rem .75rem;
	font-size: .8125rem;
	color: var(--wp--preset--color--vert-fonce);
	background: var(--wp--preset--color--creme-gris);
	border: var(--cde-trait);
	border-radius: 999px;
}

/* --- Partenaires ------------------------------------------------------ */

.cde-partenaires {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .7rem;
}

.cde-partenaires li {
	margin: 0;
	padding-left: .9rem;
	border-left: 2px solid var(--wp--preset--color--vert-clair);
}

.cde-partenaire-nom {
	display: block;
	font-family: var(--wp--preset--font-family--georgia);
	font-size: .9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--vert-fonce);
}

.cde-partenaire-detail {
	display: block;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--wp--preset--color--brun);
}

/* --- Bandeau « Qui j'accueille » -------------------------------------- */

/* Le texte porteur à gauche, les deux places à droite. Rien ne dépasse en
   hauteur : les deux blocs se répartissent la largeur au lieu de laisser un
   vide. Sous 782 px la grille s'empile, les dates restent côte à côte tant
   qu'elles tiennent. */
.cde-places {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	margin-block: var(--wp--preset--spacing--40);
	padding: 22px 26px;
	background: var(--wp--preset--color--vert-fonce);
	border-radius: var(--cde-arrondi-carte);
	color: var(--wp--preset--color--creme-gris);
}

.cde-places-titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--calibri);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--vert-clair);
}

.cde-places-fort {
	margin: .45rem 0 0;
	font-family: var(--wp--preset--font-family--georgia);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--creme);
}

.cde-places-liste {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.2rem;
}

.cde-places-liste li {
	margin: 0;
	padding-left: .9rem;
	border-left: 2px solid var(--wp--preset--color--vert-clair);
}

.cde-places-date {
	display: block;
	font-family: var(--wp--preset--font-family--georgia);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--creme);
}

.cde-places-detail {
	display: block;
	margin-top: .1rem;
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--wp--preset--color--vert-clair);
}

@media (max-width: 900px) {
	.cde-places {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
		align-items: start;
	}
}

@media (max-width: 480px) {
	.cde-places-liste {
		grid-template-columns: 1fr;
		gap: .8rem;
	}
}

/* --- Duo photo / texte, aligné large --------------------------------- */

.cde-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	margin-block: var(--wp--preset--spacing--60);
}

.cde-duo--texte-droite .cde-duo-photo { order: 0; }
.cde-duo--texte-gauche .cde-duo-photo { order: 2; }

.cde-duo-photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--cde-arrondi-carte);
}

.cde-duo-texte > :first-child { margin-top: 0; }
.cde-duo-texte > :last-child  { margin-bottom: 0; }

.cde-duo-texte h2,
.cde-duo-texte h3 {
	margin-top: 0;
}

@media (max-width: 780px) {
	.cde-duo {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
	}

	/* Sur une colonne, la photo repasse toujours devant le texte. */
	.cde-duo--texte-gauche .cde-duo-photo { order: 0; }
}

/* --- Jalons du parcours ---------------------------------------------- */

.cde-jalons {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	list-style: none;
	padding: 0;
	margin-block: var(--wp--preset--spacing--40);
}

.cde-jalon {
	margin: 0;
	padding: 16px;
	background: var(--wp--preset--color--blanc);
	border: var(--cde-trait);
	border-radius: var(--cde-arrondi-carte);
}

.cde-jalon-annee {
	display: block;
	font-family: var(--wp--preset--font-family--manuscrite);
	font-weight: 700;
	font-size: 2.6rem;
	line-height: .9;
	color: var(--wp--preset--color--vert-clair);
}

.cde-jalon-titre {
	display: block;
	margin-top: .35rem;
	font-family: var(--wp--preset--font-family--georgia);
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--vert-fonce);
}

.cde-jalon-detail {
	display: block;
	margin-top: .2rem;
	font-size: .8125rem;
	line-height: 1.45;
	color: var(--wp--preset--color--brun);
}

@media (max-width: 700px) {
	.cde-jalons { grid-template-columns: 1fr; }
}

/* --- Frise des emplois ----------------------------------------------- */

/* Les diplômes sont trois jalons datés, donc une grille. Les emplois forment
   une suite continue sans dates : un trait vertical raconte mieux
   l'enchaînement qu'une rangée de cartes. */
.cde-frise {
	position: relative;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .95rem;
	padding: .2rem 0 .2rem 1.5rem;
	margin-block: var(--wp--preset--spacing--40);
	border-left: 2px solid var(--wp--preset--color--vert-clair);
}

.cde-frise-etape {
	position: relative;
	margin: 0;
}

/* La pastille chevauche le trait : l'anneau crème le masque derrière elle. */
.cde-frise-etape::before {
	content: "";
	position: absolute;
	left: calc(-1.5rem - 1px);
	top: .45rem;
	width: 9px;
	height: 9px;
	margin-left: -4.5px;
	border-radius: 50%;
	background: var(--wp--preset--color--vert-clair);
	box-shadow: 0 0 0 3px var(--wp--preset--color--creme);
}

.cde-frise-titre {
	display: block;
	font-family: var(--wp--preset--font-family--georgia);
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--vert-fonce);
}

.cde-frise-detail {
	display: block;
	margin-top: .15rem;
	font-size: .8125rem;
	line-height: 1.45;
	color: var(--wp--preset--color--brun);
}

/* --- Étapes numérotées (adaptation) ---------------------------------- */

.cde-etapes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	list-style: none;
	padding: 0;
	margin-block: var(--wp--preset--spacing--40);
	counter-reset: cde-etape;
}

.cde-etape {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .3rem;
	margin: 0;
	padding: 18px 16px 16px;
	background: var(--wp--preset--color--creme-gris);
	border-radius: var(--cde-arrondi-carte);
	counter-increment: cde-etape;
}

.cde-etape::before {
	content: counter(cde-etape);
	font-family: var(--wp--preset--font-family--manuscrite);
	font-weight: 700;
	font-size: 2.4rem;
	line-height: .85;
	color: var(--wp--preset--color--vert-clair);
}

/* La dernière étape n'est pas un jour d'adaptation mais son aboutissement. */
.cde-etape--fin {
	background: var(--wp--preset--color--vert-fonce);
	color: var(--wp--preset--color--creme-gris);
}

.cde-etape--fin::before { color: var(--wp--preset--color--vert-clair); }
.cde-etape--fin .cde-etape-titre { color: var(--wp--preset--color--creme); }

.cde-etape-titre {
	font-family: var(--wp--preset--font-family--georgia);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--vert-fonce);
}

.cde-etape-duree {
	font-size: .6875rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brun);
}

/* Le vert clair passe mal sur le fond vert foncé : le libellé disparaissait. */
.cde-etape--fin .cde-etape-duree { color: var(--wp--preset--color--creme-gris); }

.cde-etape-texte {
	font-size: .875rem;
	line-height: 1.5;
}

@media (max-width: 900px) { .cde-etapes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cde-etapes { grid-template-columns: 1fr; } }

/* --- Triptyque du quotidien pratique --------------------------------- */

.cde-triptyque {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	list-style: none;
	padding: 0;
	margin-block: var(--wp--preset--spacing--40);
}

.cde-volet {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	margin: 0;
	padding: 20px 18px;
	background: var(--wp--preset--color--blanc);
	border: var(--cde-trait);
	border-radius: var(--cde-arrondi-carte);
}

.cde-volet-picto {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: .3rem;
	border-radius: 50%;
	background: var(--wp--preset--color--creme-gris);
	color: var(--wp--preset--color--vert-fonce);
}

.cde-volet-titre {
	font-family: var(--wp--preset--font-family--georgia);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--wp--preset--color--vert-fonce);
}

.cde-volet p {
	margin: 0;
	font-size: .875rem;
	line-height: 1.6;
}

.cde-volet p + p { margin-top: .5rem; }

/* Variantes de colonnage du même composant. */
.cde-triptyque--duo    { grid-template-columns: repeat(2, 1fr); }
.cde-triptyque--quatre { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) {
	.cde-triptyque--quatre { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
	.cde-triptyque,
	.cde-triptyque--duo { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.cde-triptyque--quatre { grid-template-columns: 1fr; }
}

/* Volet compact : pour les coordonnées et les canaux de contact, où le texte
   est court et le picto porte l'essentiel. */
.cde-volet--compact {
	padding: 16px;
	gap: .25rem;
}

.cde-volet--compact .cde-volet-picto {
	width: 40px;
	height: 40px;
}

.cde-volet--compact .cde-volet-titre {
	font-size: .9375rem;
}

.cde-volet--compact p {
	font-size: .8125rem;
}

.cde-volet a {
	color: var(--wp--preset--color--vert-fonce);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--vert-clair);
	text-underline-offset: 3px;
}

/* --- Carte dans le contenu d'une page -------------------------------- */

.cde-carte-page {
	margin-block: var(--wp--preset--spacing--50);
}

/* Le second sélecteur n'est pas une redondance : « .cde-contenu iframe » est
   défini plus bas dans ce fichier, à spécificité égale, et l'emportait donc
   silencieusement. Il faut deux classes pour reprendre la main. */
.cde-carte-page iframe,
.cde-contenu .cde-carte-page iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--cde-arrondi-carte);
	outline: 10px solid var(--wp--preset--color--creme-gris);
	outline-offset: -10px;
}

@media (max-width: 700px) {
	.cde-carte-page iframe,
	.cde-contenu .cde-carte-page iframe {
		aspect-ratio: 4 / 3;
	}
}

/* --- Renvoi vers une autre page --------------------------------------- */

.cde-renvoi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--50);
	padding: 20px;
	background: var(--wp--preset--color--vert-fonce);
	color: var(--wp--preset--color--creme-gris);
	border-radius: var(--cde-arrondi-carte);
}

.cde-renvoi-picto {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(250, 246, 236, .12);
	color: var(--wp--preset--color--creme);
}

.cde-renvoi-texte {
	flex: 1 1 18rem;
}

.cde-renvoi-titre {
	display: block;
	font-family: var(--wp--preset--font-family--georgia);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wp--preset--color--creme);
}

.cde-renvoi p {
	margin: .2rem 0 0;
	font-size: .875rem;
	line-height: 1.55;
}

.cde-renvoi :where(a):focus-visible {
	outline-color: var(--wp--preset--color--creme);
}

/* --- Encadré d'appui -------------------------------------------------- */

.cde-encadre {
	margin-block: var(--wp--preset--spacing--40);
	padding: 18px 20px;
	background: var(--wp--preset--color--creme-gris);
	border-left: 3px solid var(--wp--preset--color--vert-clair);
	border-radius: 0 var(--cde-arrondi-carte) var(--cde-arrondi-carte) 0;
}

.cde-encadre > :first-child { margin-top: 0; }
.cde-encadre > :last-child  { margin-bottom: 0; }

.cde-encadre p {
	font-size: .9375rem;
	line-height: 1.65;
}

/* --- Galerie de page -------------------------------------------------- */

.cde-galerie-page {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-block: var(--wp--preset--spacing--40);
}

.cde-galerie-page img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--cde-arrondi-vignette);
}

@media (max-width: 620px) {
	.cde-galerie-page { grid-template-columns: repeat(2, 1fr); }
}

/* --- Titres de section dans une page --------------------------------- */

.cde-contenu--page h2 {
	margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
	font-size: clamp(1.5rem, 3vw, 2rem);
}

.cde-contenu--page h2 .cde-manuscrite {
	display: block;
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	color: var(--wp--preset--color--vert-fonce);
}

.cde-contenu--page h3 {
	margin-block: var(--wp--preset--spacing--40) .4rem;
}

.cde-contenu--page > :first-child {
	margin-top: 0;
}

.cde-contenu p {
	margin-block: 0 1.3em;
}

.cde-contenu :is(h2, h3) {
	text-align: left;
	margin-block: 2em .5em;
}

.cde-contenu img {
	max-width: 100%;
	height: auto;
	border-radius: var(--cde-arrondi-vignette);
}

.cde-contenu figcaption {
	text-align: left;
	font-size: .75rem;
	font-style: italic;
	color: var(--wp--preset--color--brun);
}

.cde-contenu a:not(.wp-element-button) {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--vert-clair);
	text-underline-offset: 3px;
}

.cde-contenu iframe {
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--cde-arrondi-vignette);
}

.cde-contenu table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9375rem;
}

/* Journée type : la colonne des horaires reste étroite et ne se coupe pas.
   Le texte justifié du corps d'article n'a pas de sens dans une cellule. */
.cde-journee table {
	text-align: left;
}

.cde-journee td:first-child {
	width: 9rem;
	white-space: nowrap;
	vertical-align: top;
	font-family: var(--wp--preset--font-family--georgia);
	color: var(--wp--preset--color--brun);
}

@media (max-width: 600px) {
	.cde-journee td:first-child {
		width: auto;
		white-space: normal;
	}
}

.cde-contenu :is(td, th) {
	padding: .55rem .75rem;
	border-bottom: var(--cde-trait);
	text-align: left;
}

/* Navigation article précédent / suivant */
.cde-nav-article {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	justify-content: space-between;
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--cde-trait-vert);
	font-size: .875rem;
}

.cde-nav-article .post-navigation-link-next {
	margin-left: auto;
	text-align: right;
}

.cde-nav-article .post-navigation-link__label {
	display: block;
	margin-bottom: .2rem;
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--vert-clair);
}

.cde-nav-article a {
	font-family: var(--wp--preset--font-family--georgia);
	color: var(--wp--preset--color--vert-fonce);
}

/* ==========================================================================
   Repères pratiques : pictogrammes au trait sur pastille crème grisé
   ========================================================================== */

.cde-reperes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--40);
	list-style: none;
	padding: 0;
	margin: 0;
}

.cde-repere {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .55rem;
	margin: 0;
	text-align: center;
}

.cde-repere-picto {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--wp--preset--color--creme-gris);
	color: var(--wp--preset--color--vert-fonce);
	transition: background var(--cde-transition);
}

.cde-repere:hover .cde-repere-picto {
	background: var(--wp--preset--color--vert-clair);
	color: var(--wp--preset--color--creme);
}

.cde-repere-titre {
	font-family: var(--wp--preset--font-family--georgia);
	font-size: .9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--vert-fonce);
}

.cde-repere-texte {
	display: block;
	margin: 0;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--texte);
}

/* Le repère sert aussi de lien dans le bloc d'accès rapide. */
a.cde-repere {
	text-decoration: none;
}

a.cde-repere:hover .cde-repere-titre {
	color: var(--wp--preset--color--vert-clair);
}

/* ==========================================================================
   Médiathèque
   ========================================================================== */

.cde-mediatheque .wp-block-gallery,
.cde-mediatheque.wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(7.5rem, 100%), 1fr));
	gap: 8px;
}

.cde-mediatheque .wp-block-image {
	margin: 0;
	width: 100% !important;
}

.cde-mediatheque img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--cde-arrondi-vignette);
	transition: opacity var(--cde-transition);
}

.cde-mediatheque img:hover {
	opacity: .88;
}

/* ==========================================================================
   Pied de page
   ========================================================================== */

.cde-pied {
	color: var(--wp--preset--color--creme-gris);
}

.cde-pied :is(h2, h3, .wp-block-site-title) {
	color: var(--wp--preset--color--creme);
}

/* Le pied reprend le titre du site : il l'annonce, il ne le rejoue pas en
   taille d'accueil. */
.cde-pied .wp-block-site-title {
	font-size: 1.3rem;
	line-height: 1.2;
}

/* Sur grand écran, quatre colonnes étalées sur toute la largeur laissent des
   vides plus grands que les listes elles-mêmes : on les regroupe au centre. */
.cde-pied .wp-block-columns {
	max-width: 58rem;
	margin-inline: auto;
}

.cde-pied a {
	color: var(--wp--preset--color--creme-gris);
}

.cde-pied a:hover {
	color: var(--wp--preset--color--blanc);
}

.cde-pied-baseline {
	margin: .2rem 0 0;
	font-family: var(--wp--preset--font-family--georgia);
	font-style: italic;
	font-size: .875rem;
	color: var(--wp--preset--color--creme-gris);
}

.cde-pied-colonne h3 {
	margin: 0 0 .45rem;
	font-family: var(--wp--preset--font-family--calibri);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--vert-clair);
}

.cde-pied-liens {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .22rem;
	font-size: .8125rem;
	line-height: 1.45;
}

.cde-pied-liens li {
	margin: 0;
}

/* Le filet vert clair sépare les colonnes de la ligne des réseaux */
.cde-pied-reseaux {
	display: flex;
	justify-content: center;
	gap: .6rem;
	padding-top: var(--wp--preset--spacing--20);
	border-top: var(--cde-trait-vert);
}

.cde-pied-reseaux a {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: var(--wp--preset--color--creme);
	transition: background var(--cde-transition);
}

.cde-pied-reseaux a:hover {
	background: rgba(250, 246, 236, .12);
}

.cde-copyright {
	margin: 0;
	font-size: .75rem;
	color: rgba(242, 238, 226, .7);
}

/* ==========================================================================
   Accessibilité
   ========================================================================== */

:where(a, button, input, select, textarea, .wp-block-navigation-item__content):focus-visible {
	outline: 2px solid var(--wp--preset--color--brun);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Sur fond vert foncé, le brun ne détache pas assez : on repasse en crème. */
.cde-entete :where(a, button):focus-visible,
.cde-pied :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--creme);
}

.cde-saut-contenu {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: .7rem 1.2rem;
	background: var(--wp--preset--color--vert-fonce);
	color: var(--wp--preset--color--creme);
	border-radius: 0 0 var(--cde-arrondi-vignette) 0;
}

.cde-saut-contenu:focus {
	left: 0;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}