/*
 * CSS des blocs CiMo.
 *
 * SOMMAIRE
 *   1. La découpe à 45° — mécanique partagée
 *   2. Section
 *   3. Grille
 *   4. Boîtes — base commune
 *   5. Boîte croppée
 *   6. Boîte à coins arrondis
 *   7. Image & légende
 *   8. Textes
 *   9. Boutons
 *  10. Icônes
 *  11. Décors
 *  12. Héros fendu
 *  13. Empilement
 *  14. Alignements de texte
 *  15. Filet court
 *  16. En-tête de section et fil d'Ariane
 *  17. Modules de page
 */


/* ==========================================================================
   1. LA DÉCOUPE À 45° — MÉCANIQUE PARTAGÉE
   --------------------------------------------------------------------------
   Une seule implémentation, pilotée par des propriétés personnalisées, pour
   les trois blocs qui en ont besoin : boîte croppée, image et légende.

   Deux couches :
     • l'élément lui-même porte la COULEUR DE BORDURE et la découpe extérieure ;
     • .cimo-cut__fill, en retrait de l'épaisseur des bordures, porte le FOND
       et une découpe intérieure retraitée — c'est ce retrait qui fait que la
       bordure garde la même épaisseur dans l'angle que sur les côtés.

   Masquer un côté = lui donner une épaisseur nulle. Il n'y a donc pas de
   réglage « bord visible » séparé : c'est le même curseur.

   La profondeur se règle en px ou rem, JAMAIS en pourcentage : en %, les deux
   jambes de l'angle se rapportent à des dimensions différentes et l'angle
   cesse de valoir 45°.
   ========================================================================== */

.cimo-cut {
	--cut-tl: 0px;
	--cut-tr: 0px;
	--cut-br: 0px;
	--cut-bl: 0px;
	--bw-top: 0px;
	--bw-right: 0px;
	--bw-bottom: 0px;
	--bw-left: 0px;
	--cut-border: transparent;
	--cut-bg: transparent;

	position: relative;
	/* Confine la couche de fond : sans cela, son empilement pourrait la faire
	   passer sous le fond d'un ancêtre. */
	isolation: isolate;
	background-color: var( --cut-border );

	clip-path: polygon(
		var( --cut-tl ) 0,
		calc( 100% - var( --cut-tr ) ) 0,
		100% var( --cut-tr ),
		100% calc( 100% - var( --cut-br ) ),
		calc( 100% - var( --cut-br ) ) 100%,
		var( --cut-bl ) 100%,
		0 calc( 100% - var( --cut-bl ) ),
		0 var( --cut-tl )
	);
}

/*
 * Retrait de la découpe intérieure. Pour un angle, on prend la moyenne des
 * deux épaisseurs qui s'y rencontrent : c'est exact quand elles sont égales,
 * et c'est le meilleur compromis quand elles diffèrent.
 *
 * max( 0px, … ) : une bordure plus épaisse que la découpe n'a plus de biseau
 * intérieur du tout, et une valeur négative produirait un polygone retourné.
 */
.cimo-cut__fill {
	--in-tl: max( 0px, calc( var( --cut-tl ) - ( var( --bw-top ) + var( --bw-left ) ) / 2 * var( --cimo-bevel-k ) ) );
	--in-tr: max( 0px, calc( var( --cut-tr ) - ( var( --bw-top ) + var( --bw-right ) ) / 2 * var( --cimo-bevel-k ) ) );
	--in-br: max( 0px, calc( var( --cut-br ) - ( var( --bw-bottom ) + var( --bw-right ) ) / 2 * var( --cimo-bevel-k ) ) );
	--in-bl: max( 0px, calc( var( --cut-bl ) - ( var( --bw-bottom ) + var( --bw-left ) ) / 2 * var( --cimo-bevel-k ) ) );

	position: absolute;
	inset: var( --bw-top ) var( --bw-right ) var( --bw-bottom ) var( --bw-left );
	z-index: 0;
	overflow: hidden;
	background-color: var( --cut-bg );

	clip-path: polygon(
		var( --in-tl ) 0,
		calc( 100% - var( --in-tr ) ) 0,
		100% var( --in-tr ),
		100% calc( 100% - var( --in-br ) ),
		calc( 100% - var( --in-br ) ) 100%,
		var( --in-bl ) 100%,
		0 calc( 100% - var( --in-bl ) ),
		0 var( --in-tl )
	);
}

/* Photo de fond. Elle vit DANS la couche de fond, donc à l'intérieur des
   bordures : une image ne recouvre jamais le filet qui l'encadre. */
.cimo-cut__fill > img,
.cimo-box__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: var( --media-opacity, 1 );
	transition: opacity 0.3s ease, transform 0.5s ease;
}

/* Voile dégradé : sans lui, un titre blanc posé sur une photo claire devient
   illisible. Monte depuis le bas, comme dans les maquettes. */
.cimo-cut__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		color-mix( in srgb, var( --cimo-dark ) 95%, transparent ) 10%,
		color-mix( in srgb, var( --cimo-dark ) 40%, transparent ) 60%,
		transparent 100%
	);
}


/* ==========================================================================
   2. SECTION
   ========================================================================== */

.cimo-section {
	--cols: 1;
	position: relative;
	width: 100%;
	display: grid;
	grid-template-columns: repeat( var( --cols ), minmax( 0, 1fr ) );
	gap: var( --cimo-gap, 1.5rem );
	align-content: var( --cimo-align-content, start );
	align-items: var( --cimo-align, stretch );
}

/* Largeur de lecture : la section reste pleine largeur, son CONTENU est
   centré. Déporter la limite sur le contenu permet à un décor de déborder. */
.cimo-section.is-measured {
	max-width: var( --cimo-measure );
	margin-inline: auto;
}

/* Hauteur d'écran pleine. 100svh et non 100vh : sur mobile, 100vh compte la
   barre d'adresse rétractable et la section dépasse de l'écran. */
.cimo-section.is-full-height {
	min-height: 100svh;
	align-content: center;
}

.cimo-section.is-half-height {
	min-height: 60svh;
	align-content: center;
}

/* Fond en image : posé sur la section, voilé si demandé. */
.cimo-section.has-bg-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.cimo-section.has-bg-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: color-mix( in srgb, var( --cimo-dark ) calc( var( --bg-veil, 0 ) * 1% ), transparent );
}


/* ==========================================================================
   3. GRILLE
   --------------------------------------------------------------------------
   Le nombre de colonnes réglé dans l'éditeur s'applique à partir de 1024 px.
   En dessous, la grille dégrade d'elle-même : 2 colonnes, puis 1. Il n'y a
   pas de réglage par palier — trois jeux de curseurs rendraient le panneau
   illisible pour un gain rare.
   ========================================================================== */

.cimo-grid {
	--cols: 3;
	--rows: 1;
	position: relative;
	display: grid;
	grid-template-columns: repeat( var( --cols ), minmax( 0, 1fr ) );
	gap: var( --cimo-gap, 1.5rem );
	width: 100%;
}

/* Rangées explicites : utile quand on veut des hauteurs égales plutôt que des
   hauteurs dictées par le contenu. Sans cette classe, les rangées sont
   libres. */
.cimo-grid.has-rows {
	grid-template-rows: repeat( var( --rows ), minmax( 0, 1fr ) );
}

/* Empan. La classe est posée par PHP d'après la valeur réglée, parce que ni
   repeat() ni span n'acceptent calc() ou min() sur leur compte. */
:is( .cimo-grid, .cimo-section ) > .cimo-span-2 { grid-column: span 2; }
:is( .cimo-grid, .cimo-section ) > .cimo-span-3 { grid-column: span 3; }
:is( .cimo-grid, .cimo-section ) > .cimo-span-4 { grid-column: span 4; }
:is( .cimo-grid, .cimo-section ) > .cimo-span-5 { grid-column: span 5; }
:is( .cimo-grid, .cimo-section ) > .cimo-span-6 { grid-column: span 6; }
:is( .cimo-grid, .cimo-section ) > .cimo-span-7 { grid-column: span 7; }
:is( .cimo-grid, .cimo-section ) > .cimo-span-8 { grid-column: span 8; }
:is( .cimo-grid, .cimo-section ) > .cimo-span-9 { grid-column: span 9; }
:is( .cimo-grid, .cimo-section ) > .cimo-span-10 { grid-column: span 10; }
:is( .cimo-grid, .cimo-section ) > .cimo-span-11 { grid-column: span 11; }
:is( .cimo-grid, .cimo-section ) > .cimo-span-12 { grid-column: span 12; }
:is( .cimo-grid, .cimo-section ) > .cimo-span-full { grid-column: 1 / -1; }
:is( .cimo-grid, .cimo-section ) > .cimo-rowspan-2 { grid-row: span 2; }
:is( .cimo-grid, .cimo-section ) > .cimo-rowspan-3 { grid-row: span 3; }
:is( .cimo-grid, .cimo-section ) > .cimo-rowspan-4 { grid-row: span 4; }

@media ( max-width: 1023px ) {
	.cimo-grid {
		grid-template-columns: repeat( min( 2, var( --cols ) ), minmax( 0, 1fr ) );
	}

	:is( .cimo-grid, .cimo-section ) > [class*="cimo-span-"] {
		grid-column: span 2;
	}
}

@media ( max-width: 639px ) {
	.cimo-grid,
	.cimo-section {
		grid-template-columns: minmax( 0, 1fr );
	}

	:is( .cimo-grid, .cimo-section ) > [class*="cimo-span-"],
	:is( .cimo-grid, .cimo-section ) > [class*="cimo-rowspan-"] {
		grid-column: auto;
		grid-row: auto;
	}

	.cimo-grid.has-rows {
		grid-template-rows: none;
	}
}


/* ==========================================================================
   4. BOÎTES — BASE COMMUNE
   ========================================================================== */

.cimo-box {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cimo-box__body {
	display: flex;
	flex-direction: var( --box-dir, column );
	justify-content: var( --box-justify, flex-start );
	align-items: var( --box-align, stretch );
	gap: var( --box-gap, 0.5rem );
	flex: 1;
	min-width: 0;
}

/* Le lien couvre la carte sans l'envelopper. Envelopper rendrait le contenu
   inéditable dans le canevas — chaque clic suivrait le lien — et ferait
   annoncer par les lecteurs d'écran un titre et un paragraphe entiers comme
   intitulé du lien. Il est donc nommé par un aria-label. */
.cimo-box__link {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
}

/* Un lien posé DANS la carte reste atteignable : il repasse au-dessus du
   calque de clic. */
.cimo-box__body :where( a, button ) {
	position: relative;
	z-index: 3;
}

.cimo-box.is-hoverable {
	transition: transform 0.3s cubic-bezier( 0.4, 0, 0.2, 1 ), box-shadow 0.3s ease, border-color 0.3s ease;
}

.cimo-box.is-hoverable:hover {
	transform: translateY( -4px );
	box-shadow: 0 12px 30px rgba( 0, 0, 0, 0.5 );
}

.cimo-box.is-hoverable:hover .cimo-box__media {
	opacity: calc( var( --media-opacity, 1 ) + 0.2 );
	transform: scale( 1.03 );
}


/* ==========================================================================
   5. BOÎTE CROPPÉE
   ========================================================================== */

/*
 * Catégorie et mention sont posées DANS LE FLUX, en tête et en pied de la
 * carte, et non en position absolue dans un angle.
 *
 * C'était d'abord un choix d'implémentation : une étiquette en absolu doit
 * connaître le retrait de la carte pour s'aligner sur son contenu, or ce
 * retrait vient des réglages natifs de WordPress et le CSS ne peut pas le
 * lire. Mais c'est aussi le bon choix de fond : dans le flux, l'étiquette ne
 * peut pas recouvrir le texte quand celui-ci s'allonge, et elle est lue à sa
 * place par un lecteur d'écran.
 *
 * C'est d'ailleurs ce que font les maquettes : une rangée en tête, le contenu
 * poussé en bas par mt-auto.
 */
.cimo-box__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: var( --head-justify, flex-start );
	gap: 0.75rem;
	width: 100%;
}

.cimo-box__cat,
.cimo-box__note {
	margin: 0;
	max-width: 100%;
}

.cimo-box__note {
	align-self: var( --note-align, flex-start );
}

.cimo-box__cat {
	padding: 0.25rem 0.625rem;
	background-color: var( --cat-bg, var( --cimo-teal ) );
	color: var( --cat-color, var( --cimo-dark ) );
	font-size: var( --wp--preset--font-size--xxs );
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.4;
}

.cimo-box__note {
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--xxs );
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var( --note-color, var( --cimo-teal ) );
}

/* La carte croppée est une colonne : en-tête, contenu extensible, mention.
   Le contenu occupe tout l'espace restant, ce qui pousse la mention en bas
   sans calcul de hauteur. */
.cimo-box--cut {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}


/* ==========================================================================
   6. BOÎTE À COINS ARRONDIS
   ========================================================================== */

.cimo-box--round {
	--radius: 12px;
	--corner-size: 20px;
	--corner-width: 4px;
	border-radius: var( --radius );
	border-style: solid;
	border-color: var( --cut-border, transparent );
	border-top-width: var( --bw-top, 1px );
	border-right-width: var( --bw-right, 1px );
	border-bottom-width: var( --bw-bottom, 1px );
	border-left-width: var( --bw-left, 1px );
	background-color: var( --cut-bg, transparent );
	padding: var( --box-pad, 1.75rem );
	overflow: hidden;
}

/* Équerre d'angle : le coin dont on épaissit la bordure. Un élément par coin
   plutôt que ::before/::after, qui n'en couvriraient que deux. */
.cimo-box__corner {
	position: absolute;
	width: var( --corner-size );
	height: var( --corner-size );
	border-style: solid;
	border-width: 0;
	border-color: var( --corner-color, var( --cimo-teal ) );
	pointer-events: none;
	z-index: 3;
}

.cimo-box__corner.at-top-left {
	top: calc( -1 * var( --bw-top, 1px ) );
	left: calc( -1 * var( --bw-left, 1px ) );
	border-top-width: var( --corner-width );
	border-left-width: var( --corner-width );
	border-top-left-radius: var( --radius );
}

.cimo-box__corner.at-top-right {
	top: calc( -1 * var( --bw-top, 1px ) );
	right: calc( -1 * var( --bw-right, 1px ) );
	border-top-width: var( --corner-width );
	border-right-width: var( --corner-width );
	border-top-right-radius: var( --radius );
}

.cimo-box__corner.at-bottom-right {
	bottom: calc( -1 * var( --bw-bottom, 1px ) );
	right: calc( -1 * var( --bw-right, 1px ) );
	border-bottom-width: var( --corner-width );
	border-right-width: var( --corner-width );
	border-bottom-right-radius: var( --radius );
}

.cimo-box__corner.at-bottom-left {
	bottom: calc( -1 * var( --bw-bottom, 1px ) );
	left: calc( -1 * var( --bw-left, 1px ) );
	border-bottom-width: var( --corner-width );
	border-left-width: var( --corner-width );
	border-bottom-left-radius: var( --radius );
}

/* Bord accentué : un seul côté prend une autre couleur. La bordure CSS le
   permet, la découpe en clip-path du bloc croppé non — c'est la différence
   entre les deux blocs. */
.cimo-box--round.has-accent-top { border-top-color: var( --accent-color ); }
.cimo-box--round.has-accent-right { border-right-color: var( --accent-color ); }
.cimo-box--round.has-accent-bottom { border-bottom-color: var( --accent-color ); }
.cimo-box--round.has-accent-left { border-left-color: var( --accent-color ); }

/* Dans une boîte arrondie, la photo de fond et le voile sont posés
   directement : il n'y a pas de couche de bordure à respecter. */
.cimo-box--round > .cimo-box__media,
.cimo-box--round > .cimo-cut__scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
}


/* ==========================================================================
   7. IMAGE & LÉGENDE
   ========================================================================== */

.cimo-figure {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
}

.cimo-figure.is-left,
.cimo-figure.is-right {
	width: 100%;
}

@media ( min-width: 768px ) {
	.cimo-figure.is-left {
		float: left;
		width: var( --fig-width, 33% );
		margin-right: 2rem;
		margin-bottom: 1rem;
	}

	.cimo-figure.is-right {
		float: right;
		width: var( --fig-width, 33% );
		margin-left: 2rem;
		margin-bottom: 1rem;
	}
}

.cimo-figure__media {
	display: block;
}

/* L'image remplit la découpe, elle ne la subit pas : c'est la couche de fond
   qui porte la silhouette, l'image se contente de la remplir. Elle est donc
   en flux, et non en absolu comme une photo de fond de carte. */
.cimo-figure__media .cimo-cut__fill > img {
	position: static;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 1;
}

/* Le cadre doit avoir une hauteur : sans elle, la couche de fond en absolu ne
   porte rien et le bloc s'écrase. On la tient du rapport demandé. */
.cimo-figure__media::before {
	content: "";
	display: block;
	aspect-ratio: var( --fig-ratio, 4 / 3 );
}

.cimo-figure__caption {
	padding: 1rem;
	font-size: var( --wp--preset--font-size--xs );
	line-height: 1.5;
	color: var( --caption-color, var( --cimo-cream ) );
}

/*
 * Le texte de la légende est enveloppé, et c'est nécessaire : la couche de
 * fond est un élément positionné, et un élément positionné — même à z-index 0
 * — se peint AU-DESSUS du texte en flux. Sans cette enveloppe, la légende
 * disparaîtrait derrière son propre fond.
 */
.cimo-figure__text {
	position: relative;
	z-index: 1;
	display: block;
}

.cimo-figure__caption strong {
	display: block;
	margin-bottom: 0.25rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Une légende sur fond coloré contient parfois un lien : il doit rester
   visible sans emprunter la couleur de marque, qui serait illisible. */
.cimo-figure__caption a {
	text-decoration: underline;
}


/* ==========================================================================
   8. TEXTES
   --------------------------------------------------------------------------
   Un rôle = une place dans la hiérarchie, pas une apparence figée : couleur,
   taille, police et graisse restent réglables bloc par bloc. Le rôle ne pose
   que ce qui fait l'identité du niveau.
   ========================================================================== */

.cimo-t {
	margin: 0;
}

.cimo-t--hero {
	font-size: var( --wp--preset--font-size--hero );
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.cimo-t--section {
	font-size: var( --wp--preset--font-size--xxl );
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.cimo-t--card {
	font-size: var( --wp--preset--font-size--xl );
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Le gros titre de carte des maquettes EAM : « IA & FAKE NEWS » sur deux
   lignes serrées. */
.cimo-t--card-xl {
	font-size: var( --wp--preset--font-size--xxxl );
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}

.cimo-t--eyebrow {
	display: block;
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	color: var( --cimo-teal );
}

/* Les deux barres obliques des maquettes sont une ponctuation graphique, pas
   du texte : elles n'ont pas à se retrouver dans le contenu saisi. */
.cimo-t--eyebrow.has-slashes::before {
	content: "// ";
}

.cimo-t--lead {
	font-size: var( --wp--preset--font-size--lg );
	line-height: 1.6;
	color: var( --wp--preset--color--gray-300 );
}

.cimo-t--body {
	font-size: var( --wp--preset--font-size--sm );
	line-height: 1.7;
	color: var( --wp--preset--color--gray-300 );
}

.cimo-t--small {
	font-size: var( --wp--preset--font-size--xs );
	line-height: 1.6;
	color: var( --wp--preset--color--gray-300 );
}

.cimo-t--meta {
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--xxs );
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var( --wp--preset--color--gray-400 );
}

/* La barre de mentions posée en haut à droite d'une tuile. */
.cimo-t--metabar {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	padding: 0.25rem 0.75rem;
	border: 1px solid var( --cimo-rule );
	background-color: color-mix( in srgb, var( --cimo-dark ) 80%, transparent );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--xxs );
	letter-spacing: 0.04em;
}

/* Chapeau d'article : le filet vertical de couleur des maquettes. */
.cimo-t--chapeau {
	padding-left: 1.25rem;
	border-left: 3px solid var( --cimo-teal );
	font-size: var( --wp--preset--font-size--md );
	line-height: 1.7;
	color: var( --wp--preset--color--gray-300 );
}

.cimo-t--quote {
	font-size: var( --wp--preset--font-size--xxl );
	font-weight: 900;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Le numéro d'étape dans un médaillon. */
.cimo-t--number {
	font-size: var( --wp--preset--font-size--xl );
	font-weight: 900;
	line-height: 1;
}

/*
 * Corps d'article. La section redevient un FLUX et non une grille : un
 * élément de grille ne flotte pas, et les images légendées restaient donc
 * empilées au lieu de s'habiller de texte. Rien ne le signalait — float est
 * simplement ignoré sur un enfant de grid.
 */
.cimo-section.cimo-prose {
	display: block;
}

/* Les paragraphes y respirent plus que dans une carte, et le conteneur
   reprend ses flottants. */
.cimo-prose p {
	margin: 0 0 1.5rem;
	font-size: var( --wp--preset--font-size--base );
	line-height: 1.8;
	color: var( --wp--preset--color--gray-300 );
}

.cimo-prose::after {
	content: "";
	display: block;
	clear: both;
}


/* ==========================================================================
   9. BOUTONS
   ========================================================================== */

.cimo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 2rem;
	border: 0;
	border-radius: 9999px;
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	/*
	 * justify-content centre la LIGNE dans le bouton ; dès que le libellé en
	 * fait deux, c'est text-align qui centre les mots entre elles. Sans cette
	 * ligne, « Productions audiovisuelles », trop long pour la largeur fixe
	 * de 14 rem, s'affichait aligné à gauche à côté d'un voisin centré.
	 */
	text-align: center;
	cursor: pointer;
	box-shadow: 0 8px 15px rgba( 0, 0, 0, 0.2 );
	transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
	/* Dans une colonne, un enfant s'étire par défaut sur toute la largeur. Un
	   bouton ne doit jamais le faire. fit-content plutôt que align-self :
	   ainsi, « centrer » reste possible depuis le parent. */
	width: fit-content;
	max-width: 100%;
}

.cimo-btn:hover {
	transform: scale( 1.05 );
}

.cimo-btn--teal {
	background-color: var( --cimo-teal );
	color: var( --cimo-dark );
}

.cimo-btn--coral {
	background-color: var( --cimo-coral );
	color: var( --wp--preset--color--white );
}

.cimo-btn--yellow {
	background-color: var( --cimo-yellow );
	color: var( --cimo-dark );
}

.cimo-btn--outline {
	background-color: transparent;
	border: 1px solid rgba( 255, 255, 255, 0.2 );
	color: var( --wp--preset--color--white );
	box-shadow: none;
}

.cimo-btn--outline:hover {
	border-color: rgba( 255, 255, 255, 0.5 );
	background-color: rgba( 255, 255, 255, 0.05 );
}

/* Variante carrée : l'appel à l'action des encadrés, où la pastille ronde
   jurerait avec les angles biseautés. */
.cimo-btn.is-square {
	border-radius: 4px;
}

/* Largeur fixe : les deux boutons du héros d'accueil sont de même largeur,
   quel que soit leur libellé. */
.cimo-btn.is-fixed-width {
	width: 14rem;
}

/* Étiquette de fil conducteur, en haut des pages de pôle. */
.cimo-tagline {
	display: inline-block;
	width: fit-content;
	max-width: 100%;
	padding: 0.25rem 0.75rem;
	border-radius: 2px;
	background-color: var( --tag-bg, var( --cimo-yellow ) );
	color: var( --tag-color, var( --cimo-dark ) );
	font-size: var( --wp--preset--font-size--xxs );
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.15em;
}


/* ==========================================================================
   10. ICÔNES
   ========================================================================== */

.cimo-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 0;
}

.cimo-icon > svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/*
 * Les icônes des maquettes V2 sont dessinées AU TRAIT, et non en aplat. Un
 * tracé au trait rendu avec fill:currentColor s'affiche en pâté : il faut
 * inverser les deux propriétés. Le mode est porté par le symbole lui-même,
 * pas par l'usage — une même icône est toujours du même type.
 */
.cimo-icon--stroke > svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Cercle : le médaillon des piliers EAM. */
.cimo-icon--circle {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background-color: var( --cimo-raised );
	border: 1px solid color-mix( in srgb, var( --cimo-teal ) 60%, transparent );
	box-shadow: inset 0 2px 8px rgba( 0, 0, 0, 0.3 );
}

/* Un libellé posé au centre du symbole : le numéro des médaillons d'étape. */
.cimo-icon {
	position: relative;
}

.cimo-icon__label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var( --wp--preset--font-size--xl );
	font-weight: 900;
	line-height: 1;
	color: var( --wp--preset--color--white );
}

/* Médaillon d'étape : le disque sombre où tourne une lame du diaphragme. */
.cimo-icon--badge {
	position: relative;
	width: 7.5rem;
	height: 7.5rem;
	border-radius: 50%;
	background-color: var( --cimo-dark );
	border: 2px solid currentColor;
	box-shadow: 0 10px 25px rgba( 0, 0, 0, 0.6 );
}

/* Dans un médaillon, le symbole occupe presque tout le disque. */
.cimo-icon--badge > svg {
	width: 85%;
	height: 85%;
}

/* Filigrane : l'icône devient une masse de fond, très atténuée. */
.cimo-icon--watermark {
	position: absolute;
	right: 0;
	bottom: 0;
	opacity: 0.08;
	pointer-events: none;
}


/* ==========================================================================
   11. DÉCORS
   --------------------------------------------------------------------------
   Le positionnement vient du § 3 de style.css. Ici : les remplissages.
   ========================================================================== */

/*
 * Image découpée dans une forme de FICHIER. L'adresse du masque arrive par la
 * propriété personnalisée --cimo-mask, et c'est obligatoire :
 * get_block_wrapper_attributes() fait passer l'attribut style par
 * safecss_filter_attr(), dont l'allowlist ne contient ni mask-image, ni
 * -webkit-mask-image, ni mask-size. Les trois sont supprimées sans message.
 * Les propriétés personnalisées, elles, traversent le filtre.
 *
 * Une forme à TRACÉ LIBRE ne passe pas par ici : elle n'a pas de fichier à
 * masquer, et utilise un <clipPath> inline — voir render.php.
 */
.cimo-decor--image {
	overflow: hidden;
	-webkit-mask-image: var( --cimo-mask );
	mask-image: var( --cimo-mask );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-position: center;
	mask-position: center;
}

.cimo-decor--image > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cimo-decor--grayscale > img,
.cimo-decor--grayscale image {
	filter: grayscale( 1 );
}

/* Miroir : sur un aplat il suffit de retourner l'élément, mais sur une
   photographie cela retournerait aussi le sujet — visages inversés, texte à
   l'envers. La photo est donc contre-retournée, de sorte que seule la
   SILHOUETTE change de sens. */
.cimo-decor--flip > img {
	transform: scaleX( -1 );
}

/* L'ombre portée passe par une classe : `filter` ne survit pas non plus à
   safecss_filter_attr(). */
.cimo-decor--shadow {
	filter: drop-shadow( 0 18px 30px rgba( 0, 0, 0, 0.35 ) );
}


/* ==========================================================================
   12. HÉROS FENDU
   --------------------------------------------------------------------------
   Deux photographies découpées par une forme, et le contenu par-dessus.
   Toute la découpe se joue dans le SVG produit par inc/hero-split.php : il
   n'y a ici que le cadre, la remontée du calque et le rognage.

   LA REMONTÉE ET LE ROGNAGE SONT DEUX ÉLÉMENTS DISTINCTS

   Le calque est remonté pour que la pointe de la forme tombe derrière le
   titre et non dessus. Dans la première version du héros d'accueil, c'est
   l'élément REMONTÉ qui portait overflow: hidden — il n'y avait donc plus
   rien pour rogner ce qui dépassait en haut, et la photo de droite passait
   par-dessus la barre de navigation. L'enveloppe rogne, le calque remonte.
   ========================================================================== */

.cimo-herosplit {
	position: relative;
	width: 100%;
	display: grid;
	align-content: center;
	overflow: hidden;
	/* Pile de couches propre à ce bloc : les z-index du calque et du contenu
	   ne vont pas se mesurer à ceux du reste de la page. */
	isolation: isolate;
}

.cimo-herosplit.is-full-height {
	min-height: 100svh;
}

.cimo-herosplit.is-half-height {
	min-height: 60svh;
}

/*
 * Le calque déborde en haut de la hauteur de la remontée, et l'enveloppe le
 * rogne. La hauteur est donc celle du héros PLUS la remontée, faute de quoi
 * il manquerait autant en bas.
 */
.cimo-herosplit__stage {
	position: absolute;
	left: 0;
	top: calc( var( --hs-rise, 0% ) * -1 );
	width: 100%;
	height: calc( 100% + var( --hs-rise, 0% ) );
	z-index: 0;
	pointer-events: none;
	/* Ce SVG porte ses propres dimensions : il échappe au bridage à 50 px des
	   SVG sans dimensions, posé au § 2 de style.css. */
	max-height: none;
}

.cimo-herosplit__photos {
	opacity: var( --hs-photo-opacity, 1 );
}

/* Le noir et blanc passe par une classe : safecss_filter_attr() supprime
   `filter` d'un style en ligne, sans le moindre message. */
.cimo-herosplit.is-grayscale .cimo-herosplit__photos {
	filter: grayscale( 1 );
}

.cimo-herosplit__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var( --hs-measure, 72rem );
	margin-inline: auto;
}


/* ==========================================================================
   13. EMPILEMENT
   ========================================================================== */

.cimo-stack {
	display: flex;
	flex-direction: var( --stack-dir, column );
	gap: var( --stack-gap, 1rem );
	align-items: var( --stack-align, stretch );
	justify-content: var( --stack-justify, flex-start );
	flex-wrap: wrap;
	min-width: 0;
}

.cimo-stack.is-nowrap {
	flex-wrap: nowrap;
}

/* Un empilement en colonne ne doit pas étirer ses enfants au-delà de sa
   largeur de lecture quand une largeur maximale est posée. */
.cimo-stack > * {
	min-width: 0;
}


/* ==========================================================================
   14. ALIGNEMENTS DE TEXTE
   --------------------------------------------------------------------------
   WordPress génère la classe has-text-align-* depuis le support
   typography.textAlign, mais ne fournit la règle correspondante que pour ses
   propres blocs. Sans ces trois lignes, le bouton d'alignement de la barre
   d'outils n'a aucun effet visible — et rien ne le signale.
   ========================================================================== */

.has-text-align-left { text-align: left; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }


/* ==========================================================================
   15. FILET COURT
   --------------------------------------------------------------------------
   Le petit trait de couleur sous l'icône des cartes « piliers ». C'est un bloc
   Séparateur du cœur, auquel on donne la classe cimo-rule : écrire un bloc
   pour deux lignes de CSS n'aurait rien apporté.
   ========================================================================== */

/*
 * Les deux :not() ne sont pas décoratifs. Le cœur pose
 * `.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { width: 100px }`
 * — trois classes de spécificité, contre deux à `.wp-block-separator.cimo-rule`
 * seul : le filet mesurait 100 px au lieu des 2,5 rem de la maquette. On reprend
 * donc le sélecteur du cœur en y ajoutant notre classe.
 */
.wp-block-separator.cimo-rule:not( .is-style-wide ):not( .is-style-dots ) {
	width: 2.5rem;
	height: 2px;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background-color: currentColor;
	opacity: 1;
}


/* ==========================================================================
   16. EN-TÊTE DE SECTION ET FIL D'ARIANE
   ========================================================================== */

/* Le filet sous le couple sur-titre + titre, sur les pages de thématique. */
.cimo-section-head.has-rule {
	padding-bottom: 1rem;
	border-bottom: 1px solid var( --cimo-rule );
}

.cimo-breadcrumb {
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--xs );
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var( --wp--preset--color--gray-400 );
}

.cimo-breadcrumb a:hover {
	color: var( --cimo-teal );
}


/* ==========================================================================
   17. MODULES DE PAGE
   --------------------------------------------------------------------------
   Le peu de CSS que les blocs ne savent pas produire : une illustration qui
   déborde volontairement de sa colonne, une frise dont les étapes alternent
   de part et d'autre d'une ligne. Tout le reste des pages est réglé dans
   l'éditeur.
   ========================================================================== */

/* Héros de pôle : l'illustration déborde de sa colonne, comme en maquette. */
.cimo-hero-illu {
	margin: 0;
	align-self: center;
}

.cimo-hero-illu img {
	display: block;
	width: 125%;
	max-width: none;
	margin: -12% 0 -10% -12%;
}

@media ( max-width: 639px ) {
	.cimo-hero-illu img {
		width: 100%;
		margin: 0;
	}
}

/* --- Frise des étapes ------------------------------------------------------
   Les étapes alternent au-dessus et en dessous d'une ligne. Le décalage est
   porté par la frise et non par chaque étape : sans quoi, changer le nombre
   d'étapes obligerait à rééditer chacune.
   -------------------------------------------------------------------------- */

.cimo-steps {
	position: relative;
	align-items: center;
}

.cimo-steps::before {
	content: "";
	position: absolute;
	inset-inline: 6%;
	top: 50%;
	border-top: 2px dashed rgba( 255, 255, 255, 0.15 );
	pointer-events: none;
}

.cimo-step {
	position: relative;
	z-index: 1;
	justify-content: flex-end;
}

.cimo-step.is-below {
	justify-content: flex-start;
	margin-top: 10rem;
}

@media ( max-width: 1023px ) {
	.cimo-steps::before {
		display: none;
	}

	.cimo-step.is-below {
		margin-top: 0;
	}
}

/* --- Fiche d'atelier ------------------------------------------------------- */

/* La colonne de droite du héros ne contient que des décors : sans hauteur
   propre, elle s'écraserait et les formes sortiraient de l'écran. */
.cimo-fiche-decor {
	position: relative;
	min-height: 16rem;
}

/* --- Article ---------------------------------------------------------------- */

.cimo-article-byline {
	padding-top: 1.5rem;
	border-top: 1px solid var( --cimo-rule );
}


/* Pied de page : les icônes sociales gardent par défaut la couleur de leur
   marque — quatre pastilles bariolées sous une page volontairement sobre. */
.cimo-footer .wp-block-social-links .wp-social-link {
	background-color: transparent;
	color: var( --wp--preset--color--gray-400 );
}

.cimo-footer .wp-block-social-links .wp-social-link:hover {
	color: var( --cimo-teal );
}