/**
 * ET CTA — rendu des blocs.
 *
 * Cette feuille est chargée par le site ET par l'aperçu de l'administration :
 * ce qui est vu en réglant est ce qui sera publié, sans seconde
 * implémentation à maintenir.
 *
 * Les surfaces et les filets sont dérivés de `currentColor` plutôt que fixés
 * en gris : un bloc posé sur un thème sombre garde ainsi son contraste, sans
 * qu'on ait à décliner chaque présentation en deux versions. La première
 * déclaration sert de repli aux navigateurs sans `color-mix()`.
 */

.etc {
	--etc-accent: #ff7a1a;
	--etc-on-accent: #ffffff;

	--etc-surface: rgba( 128, 128, 128, 0.09 );
	--etc-surface: color-mix( in srgb, currentColor 7%, transparent );

	--etc-line: rgba( 128, 128, 128, 0.28 );
	--etc-line: color-mix( in srgb, currentColor 20%, transparent );

	--etc-muted: rgba( 128, 128, 128, 0.9 );
	--etc-muted: color-mix( in srgb, currentColor 68%, transparent );

	--etc-tint: rgba( 128, 128, 128, 0.06 );
	--etc-tint: color-mix( in srgb, var( --etc-accent ) 9%, transparent );

	--etc-radius: 14px;

	position: relative;
	margin: 2.2em 0;
	box-sizing: border-box;
}
.etc *,
.etc *::before,
.etc *::after {
	box-sizing: inherit;
}
.etc-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 28px;
}
.etc-body {
	flex: 1 1 260px;
	min-width: 0;
}
.etc-title {
	margin: 0 0 0.35em;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.25;
}
.etc-text {
	margin: 0 0 0.4em;
	line-height: 1.55;
}
.etc-text-2 {
	font-size: 0.9em;
	color: var( --etc-muted );
}
.etc-body > *:last-child {
	margin-bottom: 0;
}
.etc-action {
	flex: 0 0 auto;
}
/* --- Bouton --------------------------------------------------------- */

/*
 * Les couleurs portent `!important`, ce qui n'est pas anodin.
 *
 * Un thème colore presque toujours les liens de son contenu, avec une règle
 * bien plus spécifique que la nôtre — celle du thème de ce site pèse quatre
 * classes et un élément. Notre bouton étant un lien placé dans le contenu, il
 * héritait de cette couleur : du texte orange sur un fond orange, invisible.
 *
 * Monter la spécificité de notre côté demanderait un sélecteur artificiel et
 * illisible, et resterait un pari sur le thème suivant. Toutes les couleurs
 * de bouton sont donc marquées, y compris dans les présentations, sans quoi
 * la règle de base gagnerait sur elles.
 */

/*
 * La forme vient de la charte du site, avec la nôtre en repli — lue ici plutôt
 * qu'imposée de l'extérieur : à spécificité égale c'est la dernière feuille
 * écrite qui gagne, et l'ordre d'impression change dès qu'un greffon de cache
 * les regroupe.
 */
.etc-btn {
	display: inline-block;
	padding: var( --wia-btn-py, 0.85em ) var( --wia-btn-px, 1.6em );
	border: 0;
	border-radius: var( --wia-btn-radius, 999px );
	background: var( --etc-accent ) !important;
	font-size: 0.98em;
	font-weight: var( --wia-btn-weight, 700 );
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	color: var( --etc-on-accent ) !important;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
/*
 * Le survol soulève et porte une ombre. Il n'éclaircit pas : « brightness »
 * s'applique au bouton entier, libellé compris, et quand l'un des deux est
 * déjà borné — un texte blanc, un fond noir — seul l'autre bouge et le
 * contraste tombe. Mesuré sur l'accent qui est exactement à la limite :
 * 4,54 pour 1 au repos, 4,12 au survol. Un effet qui ne peut que retirer.
 */
.etc-btn:hover,
.etc-btn:focus-visible {
	transform: translateY( -2px );
	box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.18 );
	color: var( --etc-on-accent ) !important;
}
/* Un libellé sans adresse : le texte s'affiche, sans promesse de clic. */
.etc-btn.is-inert {
	cursor: default;
	opacity: 0.65;
}
.etc-btn.is-inert:hover {
	transform: none;
	box-shadow: none;
	filter: none;
}
/* --- Alignement et largeur ------------------------------------------ */

/* ====================================================================
   Les deux familles
   ====================================================================
   La famille décide de la place du bouton, la présentation de l'habillage.
   Séparer les deux évite de redire vingt fois la même disposition.
   ==================================================================== */

/* En longueur : le bouton reste à droite du discours. */
.etc-fam-long .etc-inner {
	flex-direction: row;
	justify-content: space-between;
}
/* Carré : le bouton passe sous le texte, et la carte cesse de s'étirer. */
.etc-fam-carre .etc-inner {
	flex-direction: column;
	align-items: flex-start;
}
.etc-fam-carre .etc-body {
	flex: 1 1 auto;
	width: 100%;
}
.etc-fam-carre .etc-action {
	width: 100%;
}
.etc-fam-carre.etc-align-center .etc-inner {
	align-items: center;
}
.etc-align-center .etc-inner {
	flex-direction: column;
	text-align: center;
}
.etc-align-center .etc-body {
	flex: 1 1 auto;
}
/*
 * Pleine largeur : les deux marges négatives sortent le bloc de la colonne
 * de lecture, et une marge intérieure lui rend sa gouttière — sans quoi le
 * texte viendrait toucher les bords de l'écran.
 */
.etc-width-full {
	max-width: 100vw;
	width: auto;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
}
.etc-width-full > .etc-inner {
	max-width: 1180px;
	margin: 0 auto;
}
/* ====================================================================
   Habillages partagés
   ====================================================================
   Neuf des vingt présentations reposent sur trois fonds seulement. Les
   décrire une fois évite vingt blocs presque identiques, et garantit qu'une
   retouche s'applique partout.
   ==================================================================== */

.etc-long-plein .etc-inner,
.etc-carre-plein .etc-inner {
	color: var( --etc-on-accent );
	background: var( --etc-accent );
}
.etc-long-degrade .etc-inner {
	color: var( --etc-on-accent );
	background: linear-gradient(
		90deg,
		var( --etc-accent ) 0%,
		color-mix( in srgb, var( --etc-accent ) 62%, #000 ) 100%
	);
}
.etc-carre-degrade .etc-inner {
	color: var( --etc-on-accent );
	background: linear-gradient(
		135deg,
		var( --etc-accent ) 0%,
		color-mix( in srgb, var( --etc-accent ) 62%, #000 ) 100%
	);
}
.etc-long-halo .etc-inner,
.etc-carre-halo .etc-inner {
	color: #f2f2f5;
	background: #0e0e12;
	border: 1px solid color-mix( in srgb, var( --etc-accent ) 45%, transparent );
	box-shadow:
		0 0 0 1px rgba( 255, 255, 255, 0.04 ),
		0 0 44px color-mix( in srgb, var( --etc-accent ) 22%, transparent );
}
/* Sur un fond déjà coloré, le bouton s'inverse pour rester détaché. */
.etc-long-plein .etc-btn,
.etc-carre-plein .etc-btn,
.etc-long-degrade .etc-btn,
.etc-carre-degrade .etc-btn {
	background: var( --etc-on-accent ) !important;
	color: var( --etc-accent ) !important;
}
.etc-long-plein .etc-text-2,
.etc-carre-plein .etc-text-2,
.etc-long-degrade .etc-text-2,
.etc-carre-degrade .etc-text-2 {
	color: inherit;
	opacity: 0.82;
}
.etc-long-halo .etc-title,
.etc-carre-halo .etc-title {
	color: #fff;
}
.etc-long-halo .etc-text-2,
.etc-carre-halo .etc-text-2 {
	color: rgba( 242, 242, 245, 0.62 );
}
/* Marges intérieures communes, par famille. */
.etc-fam-long .etc-inner {
	padding: 22px 28px;
	border-radius: var( --etc-radius );
}
.etc-fam-carre .etc-inner {
	padding: 30px;
	border-radius: 18px;
	gap: 18px;
}
/* ====================================================================
   En longueur — les dix
   ==================================================================== */

.etc-long-filet .etc-inner {
	border-left: 3px solid var( --etc-accent );
	background: var( --etc-surface );
}
.etc-long-carte .etc-inner {
	border: 1px solid var( --etc-line );
	background: var( --etc-surface );
	box-shadow: 0 12px 34px rgba( 0, 0, 0, 0.09 );
}
/* L'action occupe son propre panneau : la décision se détache de l'argument. */
.etc-long-carte .etc-action {
	padding: 18px;
	border-radius: 12px;
	background: var( --etc-tint );
	border: 1px solid var( --etc-line );
}
.etc-long-sobre .etc-inner {
	padding-left: 0;
	padding-right: 0;
	border-top: 1px solid var( --etc-line );
	border-bottom: 1px solid var( --etc-line );
	border-radius: 0;
}
/*
 * Sans fond, un bouton plein pèserait trop : un contour suffit.
 *
 * L'accent dessine le cadre ; c'est l'encre de la page qui écrit le mot.
 * Le libellé était de la couleur d'accent, posée sur le fond de la page —
 * une paire dont rien ne garantit qu'elle contraste, puisque l'extension
 * ne connaît pas ce fond. Un accent sombre sur une page sombre donnait
 * 1,01 pour 1, c'est-à-dire un bouton vide. « currentColor » se lit sur la
 * page par définition, et l'accent reste visible là où il porte le dessin
 * plutôt que le mot.
 */
.etc-long-sobre .etc-btn,
.etc-carre-sobre .etc-btn,
.etc-carre-cadre .etc-btn {
	border: 2px solid var( --etc-accent );
	background: transparent !important;
	color: currentColor !important;
}
.etc-long-sobre .etc-btn:hover,
.etc-carre-sobre .etc-btn:hover,
.etc-carre-cadre .etc-btn:hover {
	background: var( --etc-accent ) !important;
	color: var( --etc-on-accent ) !important;
}
.etc-long-ruban .etc-inner {
	border-left: 6px solid var( --etc-accent );
	border-radius: 0 var( --etc-radius ) var( --etc-radius ) 0;
	background: var( --etc-tint );
}
.etc-long-ruban .etc-title {
	color: var( --etc-accent );
}
/* Une pastille ouvre la ligne : l'œil s'y accroche avant de lire. */
.etc-long-pastille .etc-inner {
	background: var( --etc-surface );
	padding-left: 84px;
}
.etc-long-pastille .etc-inner::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 26px;
	width: 38px;
	height: 38px;
	margin-top: -19px;
	border-radius: 50%;
	background: var( --etc-accent );
	box-shadow: 0 0 0 8px color-mix( in srgb, var( --etc-accent ) 18%, transparent );
}
.etc-long-souligne .etc-inner {
	padding-left: 0;
	padding-right: 0;
	border-radius: 0;
}
.etc-long-souligne .etc-title {
	display: inline-block;
	padding-bottom: 0.25em;
	border-bottom: 3px solid var( --etc-accent );
}
/* ====================================================================
   Carré — les dix
   ==================================================================== */

.etc-carre-carte .etc-inner {
	border: 1px solid var( --etc-line );
	background: var( --etc-surface );
	box-shadow: 0 12px 34px rgba( 0, 0, 0, 0.09 );
}
.etc-carre-sobre .etc-inner {
	padding-left: 0;
	padding-right: 0;
	border-top: 1px solid var( --etc-line );
	border-bottom: 1px solid var( --etc-line );
	border-radius: 0;
}
.etc-carre-cadre .etc-inner {
	border: 3px solid var( --etc-accent );
	background: transparent;
}
/* Un bandeau d'accent en haut, comme une étiquette collée sur la carte. */
.etc-carre-coin .etc-inner {
	padding-top: 38px;
	border: 1px solid var( --etc-line );
	background: var( --etc-surface );
	overflow: hidden;
}
.etc-carre-coin .etc-inner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 10px;
	background: var( --etc-accent );
}
.etc-carre-eleve .etc-inner {
	border: 1px solid var( --etc-line );
	background: var( --etc-surface );
	box-shadow:
		0 24px 50px rgba( 0, 0, 0, 0.22 ),
		0 4px 12px rgba( 0, 0, 0, 0.12 );
}
/* Une lueur d'accent derrière le titre, sans image ni fond coloré. */
.etc-carre-lueur .etc-inner {
	padding: 48px 32px;
	border: 1px solid var( --etc-line );
	border-radius: 22px;
	background: var( --etc-surface );
	overflow: hidden;
}
.etc-carre-lueur .etc-inner::before {
	content: "";
	position: absolute;
	top: -40%;
	left: 50%;
	width: 620px;
	height: 420px;
	transform: translateX( -50% );
	background: radial-gradient(
		closest-side,
		color-mix( in srgb, var( --etc-accent ) 26%, transparent ),
		transparent
	);
	pointer-events: none;
}
.etc-carre-lueur .etc-body,
.etc-carre-lueur .etc-action {
	position: relative;
}
.etc-carre-lueur .etc-title {
	font-size: clamp( 1.4em, 3vw, 2em );
}
/*
 * Les pseudo-éléments décoratifs se placent par rapport à `.etc-inner` :
 * sans repère, ils se caleraient sur le bloc de mise en page le plus proche,
 * qui peut être le contenu entier de la page.
 */
.etc-long-pastille .etc-inner,
.etc-carre-coin .etc-inner,
.etc-carre-lueur .etc-inner {
	position: relative;
}
/* Minimal : ni cadre, ni bouton plein. Un lien assumé comme tel. */
.etc-carre-minimal .etc-inner {
	padding: 6px 0;
	border-radius: 0;
	background: transparent;
}
/* Même règle que le contour : l'accent souligne, l'encre de la page écrit. */
.etc-carre-minimal .etc-btn {
	padding: 0;
	border: 0;
	border-bottom: 2px solid var( --etc-accent );
	border-radius: 0;
	background: transparent !important;
	color: currentColor !important;
}
/*
 * Le souligné s'épaissit. Il s'effaçait à 75 % d'opacité, ce qui ne pouvait
 * que réduire le contraste du libellé : un survol qui rend le texte plus
 * difficile à lire fait le contraire de ce qu'on lui demande. Un survol
 * ajoute.
 */
.etc-carre-minimal .etc-btn:hover,
.etc-carre-minimal .etc-btn:focus-visible {
	transform: none;
	box-shadow: none;
	background: transparent !important;
	border-bottom-width: 4px;
	color: currentColor !important;
}
/* Le bouton d'un bloc carré s'étire : il devient la cible évidente. */
.etc-fam-carre .etc-btn {
	width: 100%;
}
.etc-carre-minimal .etc-btn,
.etc-fam-carre.etc-align-center .etc-btn {
	width: auto;
}
/* ====================================================================
   Barre fixe
   ==================================================================== */

.etc-long-barre {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 90;
	margin: 0;
	border-top: 1px solid var( --etc-line );
	background: rgba( 20, 20, 24, 0.94 );
	color: #f4f4f5;
	backdrop-filter: blur( 10px );
	box-shadow: 0 -8px 30px rgba( 0, 0, 0, 0.25 );
}
.etc-long-barre .etc-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 12px 56px 12px 20px;
	gap: 12px 22px;
	border-radius: 0;
}
.etc-long-barre .etc-title {
	margin: 0;
	font-size: 1em;
}
.etc-long-barre .etc-text {
	margin: 0;
	font-size: 0.9em;
}
.etc-long-barre .etc-btn {
	padding: 0.65em 1.3em;
	font-size: 0.92em;
}
.etc-close {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY( -50% );
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.1 );
	font-size: 18px;
	line-height: 1;
	color: inherit;
	cursor: pointer;
}
.etc-close:hover {
	background: rgba( 255, 255, 255, 0.2 );
}
/* Refermée, la barre ne revient pas : le choix du visiteur est mémorisé. */
.etc-long-barre.is-closed {
	display: none;
}
/* ====================================================================
   Écrans étroits et mouvement réduit
   ==================================================================== */

@media ( max-width: 600px ) {

	/*
	 * Sous cette largeur, la famille « en longueur » n'a plus la place de
	 * poser son bouton à droite : elle adopte la disposition du carré.
	 */
	.etc-inner,
	.etc-fam-long .etc-inner {
		flex-direction: column;
		align-items: stretch;
	}
	.etc-action,
	.etc-btn {
		width: 100%;
	}
	.etc-carre-minimal .etc-btn {
		width: auto;
	}
	.etc-long-pastille .etc-inner {
		padding-left: 28px;
	}
	.etc-long-pastille .etc-inner::before {
		display: none;
	}
}
@media ( prefers-reduced-motion: reduce ) {

	.etc-btn {
		transition: none;
	}
	.etc-btn:hover,
	.etc-btn:focus-visible {
		transform: none;
	}
}

/* --- Image ou logo ---------------------------------------------------- */

/*
 * L'image est un élément de la rangée, au même titre que le discours et le
 * bouton : c'est la famille du bloc qui décide du sens — en ligne pour « en
 * longueur », en colonne pour « carré ». « Avant le texte » veut donc dire à
 * gauche dans l'une, au-dessus dans l'autre, et c'est ainsi que la place est
 * nommée à l'écran.
 */
/*
 * `flex: 0 1 auto` et non `0 0 auto` : l'image doit pouvoir rétrécir. Sans
 * cela, elle garde la largeur demandée dans une carte plus étroite qu'elle,
 * déborde, et les présentations qui masquent leur débordement la coupent — le
 * bord gauche intact, le droit tranché.
 *
 * `min-width: 0` est nécessaire en plus : un élément flexible refuse par
 * défaut de descendre sous la largeur de son contenu, et l'image est son
 * contenu.
 */
.etc-media {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	line-height: 0;
}

/*
 * La largeur réglée est une largeur souhaitée, plafonnée par la place
 * disponible : c'est le seul sens qu'elle puisse avoir dans une carte dont on
 * ne connaît pas d'avance la mesure.
 *
 * `object-fit: contain` ne sert à rien tant que rien n'impose de hauteur —
 * mais si un thème ou une présentation en impose une un jour, l'image se
 * réduira au lieu d'être rognée. C'est une garantie, pas un effet.
 */
/*
 * Le lien n'entoure qu'une image : il ne doit rien ajouter d'un lien de texte.
 * Le thème souligne les liens de son contenu avec une règle bien plus
 * spécifique que la nôtre, et le trait passerait sous l'image.
 */
.etc-media-link {
	display: block;
	line-height: 0;
	text-decoration: none !important;
	border: 0;
	box-shadow: none;
}

.etc-image {
	display: block;
	width: var( --etc-image-w, 120px );
	max-width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: var( --etc-image-radius, 0 );
}

/* Au-dessus du titre : l'image est dans le discours, et suit son alignement. */
.etc-body > .etc-media {
	margin-bottom: 14px;
}
.etc-align-center .etc-body > .etc-media .etc-image {
	margin-left: auto;
	margin-right: auto;
}

/*
 * Devant le titre : l'image se pose sur la ligne, à sa hauteur. La largeur
 * réglée ne s'y applique pas — un logo de cent vingt pixels sur une ligne de
 * texte casserait l'interligne — et l'écran le dit sous le champ.
 */
.etc-title > .etc-media {
	display: inline-block;
	vertical-align: -0.22em;
	margin-right: 0.5em;
}
.etc-title > .etc-media .etc-image {
	width: auto;
	height: 1.5em;
}

/*
 * Aucune règle particulière pour les écrans étroits : la rangée passe en
 * colonne d'elle-même, et le plafond à cent pour cent suffit désormais. Une
 * limite en `vw` réduirait l'image plus que la place ne l'exige.
 */