/* cookieadmin-style */
:root {
	--cookieadmin-primary-color: #001d39;
	--cookieadmin-primary-hover-color: #985e23;
	
	--cookieadmin-secondary-color: #0046b2;
	--cookieadmin-secondary-hover-color: #0065ff;
	
	--cookieadmin-txcolor: #0f172a;
	
	--cookieadmin-green-txtcolor: #3a8356;
	--cookieadmin-warning-txtcolor: #9c7930;
	--cookieadmin-red-txtcolor: #b55355;
	
	--cookieadmin-green-color: #15a448;
	--cookieadmin-warning-color: #e9b306;
	--cookieadmin-red-color: #dd2727;
}

/*  Consent page css */

.cookieadmin_cookie_modal label, .cookieadmin_cookie_modal input {
	padding: 5px;
	margin-right: 5px;
	font-size: 15px;
}

.cookieadmin_cookie_modal label{
	font-weight: 501;
}

.cookieadmin_bottom{
	bottom:20px;
}

.cookieadmin_top{
	top: 20px;
}

.cookieadmin_right{
	right: 15px;
}

.cookieadmin_left{
	left:15px;
}


 
/* Modal animations  */
@keyframes cookieadmin_slideUp {
	from {
		transform: translateY(100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes cookieadmin_slideSide {
	from {
		transform: translateX(-100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* Modal animations Ends */


/* Consent page css End*/


/* Website consent box  */

.cookieadmin_law_container{
	position: fixed;
	width: 25%;
	box-sizing: border-box;
	z-index: 99999;
	display: none;
}

.cookieadmin_consent_btns{
	align-content: center;
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

.cookieadmin_box{
	/*position: fixed;*/
	width: 25%;
	box-sizing: border-box;
	display: none;
}

.cookieadmin_notice_group{
	display: flex;
	flex-direction: column;
	gap: 10px; /* spacing between content and buttons */
	align-items: flex-start;
}


.cookieadmin_consent_inside{
	color: black;
	background-color: #FFFFFF;
	border: 1px solid #f4f4f4;
	padding:15px;
	border-radius: 4px;
	box-shadow:1px 3px 10px rgba(0, 0, 0, 0.2);
}

#cookieadmin_notice_title{
	font-weight: 601;
	margin: 0px;
	padding-left: 5px;
}

.cookieadmin_notice_con{
	font-size: initial;
	padding: 0px 6px;
	flex: 1;
}

.cookieadmin_cookie_modal{
	display: none;
	flex-direction: column;
	position: fixed;
	max-height: 80vh;
	background-color: #FFFFFF;
	border: 1px solid #F4F4F4;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	z-index: 999999;
}

.cookieadmin_center{
	top: 10%;
	left: 22%;
	max-width: 60vw;
}

.cookieadmin_side{
	flex-direction: column;
	position: fixed;
	width: 35vw;
	bottom: 0px;
	animation: 0.5s ease-out forwards cookieadmin_slideSide;
	max-height: 100vh;
	left: 0px;
	top: 0px;
	border-radius: 0px;
}

.cookieadmin_down{
	position: fixed;
	max-width: 100%;
	max-height: 55vh;
	bottom: 0px;
	animation: 0.5s ease-out forwards cookieadmin_slideUp;
}

.cookieadmin_modal_overlay{
	display: none; 
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); 
	z-index: 1000;
}

.cookieadmin_mod_head{
	display: flex;
	justify-content: space-between;
}

.cookieadmin_mod_head, .cookieadmin_wrapper{
	padding: 15px;
	border-bottom: 1px solid #CCCCCC;
}

.cookieadmin_close_pref{
	background: none;
	border: none;
	align-self: baseline;
	color: gray;
	cursor: pointer;
	padding: 0px;
}

.cookieadmin_preference_title{
	font-size: 20px;
	font-weight: 801;
	margin: 9px;
}

.cookieadmin_preference_details{
	padding: 0px 10px;
}

.cookieadmin_preference{
	overflow: auto;
	font-size: 15px;
	height: auto;
	padding: 10px 0px;
}

.cookieadmin_details_wrapper{
	padding: 0px 15px;
	height: calc(100% - 6%);
	overflow: auto;
	scrollbar-width: thin;
}

.cookieadmin_types{
	padding: 10px 10px;
	border-top: 1px solid #CCCCCC;
}

.cookieadmin_header{
	display: flex;
	justify-content: space-between;
}

.cookieadmin_header > span > label{
	cursor:pointer;
}

.cookieadmin_remark{
	display:none;
	justify-self:right;
}

.cookieadmin_act{
	display: inline;
	color: #1863dc;
}

.cookieadmin-modal-cookies-list{
	display:none;
	padding:1px;
	border-radius: 10px;
	margin: 0px 20px;
	margin-right: 4rem;
	font-size: smaller;
	font-size: 1rem;
	text-align: center;
}

.cookieadmin_desc{
	padding:5px 20px;
	font-size: 15px;
	padding-right: 4rem;
}

.cookieadmin_footer{
	left: 0px;
	padding: 15px;
	flex-wrap: wrap;
	width: 100%;
}

.cookieadmin_modal_footer{
	left: 0px;
	padding: 15px;
	flex-wrap: wrap;
	border-top: 1px solid #CCCCCC;
}

button.cookieadmin_btn{
	background-color: transparent;
	border: 1px solid gray;
	color: #1863dc;
	padding: 0.4rem 0.9rem;
	border-radius: 4px;
	margin: 2px 5px;
	cursor: pointer;
	flex: auto;
	text-wrap: auto;
}

.cookieadmin_btn:hover{
	opacity: 0.8;
}

.cookieadmin_show_pref_cookies{
	cursor: pointer;
	font-size: 18px;
	font-family: initial;
}

button.cookieadmin_re_consent{
	display: none;
	position: fixed;
	bottom: 15px;
	left: 15px;
	background-color: #374FD4;
	height: 50px;
	width: 50px;
	border-radius: 50% !important;
	cursor: pointer;
	border: 0px;
	z-index: 99999;
	padding: 5px !important;
	box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
	align-items: center;
	justify-content: center;
}

.cookieadmin-cookie-card {
	background: ghostwhite;
	border-radius: 10px;
	padding: 16px;
	font-family: 'Open Sans', 'Segoe UI', sans-serif;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	margin: 10px auto;
	text-align: left;
}

.cookieadmin-cookie-header {
	display: flex;
	justify-content: space-between;
	font-size: 1rem;
	margin-bottom: 6px;
}

.cookieadmin-cookie-name {
  font-weight: bold;
  color: #333;
}

.cookieadmin-cookie-duration {
  font-size: 0.85rem;
}

.cookieadmin-cookie-duration > b {
  font-weight: bold;
}

.cookieadmin-cookie-description {
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.cookieadmin-cookie-tags {
  display: flex;
  gap: 8px;
}

.cookieadmin-tag {
  background: #e0e0e0;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  color: #333;
}

/* Website consent box End*/





/* Checkbox switch Start */

.cookieadmin_toggle {
	position: relative;
	display: inline-block;
	width: 24px;
	height: 11px;
}

/* Hide the checkbox input */
.cookieadmin_toggle input{
	display: none;
}

/* Describe slider's look and position. */
.cookieadmin_slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 21px;
	width: 34px;
	background-color: gray;
	transition: .4s;
	border-radius: 34px;
}

/* Describe the white ball's location 
  and appearance in the slider. */
.cookieadmin_slider:before {
	position: absolute;
	content: "";
	height: 15px;
	width: 15px;
	left: 3.2px;
	bottom: 3.2px;
	background-color: white;
	transition: .2s;
	border-radius: 50%;
}

/* Modify the slider's background color to 
  green once the checkbox has been selected. */
input:checked+.cookieadmin_slider {
	background-color: #3582c4;
}

/* When the checkbox is checked, shift the 
  white ball towards the right within the slider. */
input:checked+.cookieadmin_slider:before {
	transform: translateX(13px);
}

/* Checkbox switch End */

.cookieadmin_law_container .cookieadmin-poweredby{
margin-top: 10px;
}

.cookieadmin_modal_footer_links .cookieadmin-poweredby{
margin-left: auto;
}

.cookieadmin-poweredby a img{
height: 15px;
}

.cookieadmin-poweredby a{
color : unset;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 11px;
gap: 2px;
text-decoration: none;
}

.cookieadmin_modal_footer .cookieadmin-poweredby a{
justify-content: end;
}

#cookieadmin-gpc-toast{
display:flex;
visibility: hidden;
position: fixed;
bottom: 24px;
right: 24px;
color: #ffffff;
padding: 10px 14px;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 14px;
z-index: 99999;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
line-height:1.5;
}

#cookieadmin_gpc_override{
padding-bottom:10px;
}

/* Policy Links */
.cookieadmin_policy_link_box{
	display: flex;
	justify-content: space-around;
	font-size: 13px;
	flex-wrap: wrap;
}

.cookieadmin_modal_policy_link_box{
	display: flex;
	gap: 5px;
	font-size: 13px;
	flex-wrap: wrap;
}

.cookieadmin_modal_footer_links{
	display:flex;
	justify-content:space-between;
	margin:9px 9px 0 9px;
}

/* CSS for phones only */
@media (max-width: 767px) {

	.cookieadmin_center{
		top: 10%;
		left: 5%;
		max-width: 90vw;
	}

	.cookieadmin_show_pref_cookies{
		font-size: 14px;
	}

	.cookieadmin_law_container, .cookieadmin_box{
		width: 90%;
	}
	
	.cookieadmin_side{
		width: 100%;
	}
}

/* CSS for tablet */
@media (min-width: 768px) and (max-width: 991px) {

	.cookieadmin_box{
		width: 45%;
	}
}

/* CSS for small laptop */
@media (min-width: 992px) and (max-width: 1199px) {

	.cookieadmin_box{
		width: 35%;
	}
	
}
/* CSS for HD TV screens */
@media (min-width: 1200px) and (max-width: 1360px) {

	.cookieadmin_box{
		width: 30%;
	}
}

/* Desktop Layout */
@media (min-width: 768px) {
	.cookieadmin_notice_group {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.cookieadmin_notice_con {
		flex: 1; /* take remaining space */
	}

	.cookieadmin_consent_btns {
		flex-shrink: 0;
	}
}

@media (max-width:480px){
	.cookieadmin_consent_inside .cookieadmin_btn {
		width: 100%;
		margin: 5px 0;
	}
	
	.cookieadmin_modal_footer{
		padding: 8px;
	}
}
.cookieadmin_remark, .cookieadmin_showmore { color: #1863dc !important; }input:checked+.cookieadmin_slider, input:disabled+.cookieadmin_slider { background-color: #3582C4 !important; }.cookieadmin_slider{ background-color: #808080 !important; }
/* asea-theme-button */
/**
 * Boutons - CDC §4.6.
 * Hauteur minimale 48 px (cible tactile), rayon unique, aucune valeur en dur.
 */

.asea-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--1);
	box-sizing: border-box;
	min-height: 48px;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	border: 0;
	border-radius: var(--border-radius-main);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.asea-btn--primary {
	background-color: var(--wp--preset--color--action);
	color: var(--wp--preset--color--paper);
}

.asea-btn--primary:hover,
.asea-btn--primary:focus-visible {
	background-color: var(--wp--preset--color--action-deep);
	color: var(--wp--preset--color--paper);
}

.asea-btn--secondary {
	background-color: transparent;
	border: 1.5px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

.asea-btn--secondary:hover,
.asea-btn--secondary:focus-visible {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.asea-btn--ghost {
	min-height: 0;
	padding: 0;
	background-color: transparent;
	color: var(--wp--preset--color--action-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.asea-btn--ghost .asea-icon,
.asea-btn-arrow {
	display: inline-block;
	margin-left: var(--wp--preset--spacing--1);
	transition: transform 150ms ease;
}

.asea-btn--ghost:hover .asea-icon,
.asea-btn--ghost:hover .asea-btn-arrow,
.asea-btn--ghost.is-hover .asea-btn-arrow {
	transform: translateX(4px);
}

/* États rejoués sur la page de démonstration interne. */
.asea-btn--primary.is-hover {
	background-color: var(--wp--preset--color--action-deep);
	color: var(--wp--preset--color--paper);
}

.asea-btn--secondary.is-hover {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.asea-btn.is-focus {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

.asea-btn.is-disabled,
.asea-btn[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.asea-btn--full {
	width: 100%;
}

@media (prefers-reduced-motion: no-preference) {

	.asea-btn:not(.asea-btn--ghost):hover {
		transform: translateY(-1px);
	}
}

/**
 * Boutons du cœur de WordPress alignés sur le même système : les patterns et les
 * pages éditoriales utilisent `wp:button`, il doit rendre exactement comme `.asea-btn`.
 */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1.5px solid var(--wp--preset--color--ink);
	background-color: transparent;
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* asea-theme-form */
/**
 * Champs de formulaire - CDC §4.6 et §11.2.
 * Hauteur 48 px, rayon unique, corps à 16 px minimum (empêche le zoom
 * automatique d'iOS), intitulé toujours visible au-dessus du champ.
 * L'état d'erreur ne repose jamais sur la seule couleur : filet, message
 * textuel et `aria-describedby`.
 */

.asea-field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
}

.asea-label {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.asea-label-hint {
	display: block;
	color: var(--wp--preset--color--ink-subtle);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.asea-input,
.asea-textarea,
.asea-select {
	box-sizing: border-box;
	width: 100%;
	padding: 0 var(--wp--preset--spacing--2);
	border: 1px solid var(--line);
	border-radius: var(--border-radius-main);
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	transition: border-color 150ms ease;
}

.asea-input,
.asea-select {
	height: 48px;
}

.asea-textarea {
	min-height: 144px;
	padding-block: var(--wp--preset--spacing--2);
	line-height: 1.6;
	resize: vertical;
}

.asea-input:hover,
.asea-textarea:hover,
.asea-select:hover,
.asea-input.is-hover {
	border-color: var(--line-strong);
}

.asea-input:disabled,
.asea-textarea:disabled,
.asea-select:disabled,
.asea-input.is-disabled {
	background-color: var(--wp--preset--color--paper-warm);
	color: var(--wp--preset--color--ink-subtle);
	cursor: not-allowed;
}

/* Erreur : filet d'accent + message textuel sous le champ. */
.asea-field.has-error .asea-input,
.asea-field.has-error .asea-textarea,
.asea-field.has-error .asea-select {
	border-color: var(--wp--preset--color--action);
	border-width: 2px;
}

.asea-field-error {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	color: var(--wp--preset--color--action-deep);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.asea-field-error::before {
	content: "";
	flex: 0 0 auto;
	width: 4px;
	height: 1em;
	border-radius: var(--border-radius-main);
	background-color: var(--wp--preset--color--action);
}

/* Consentement : case jamais pré-cochée, intitulé complet et cliquable. */
.asea-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--1);
}

.asea-checkbox,
.asea-radio {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--wp--preset--color--action);
}

.asea-consent-label {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

/* Pot de miel : hors champ visuel et hors ordre de tabulation. */
.asea-honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/**
 * Retour de soumission - étiquette apposée, prolongée d'un filet.
 *
 * Volontairement sans boîte ni fond teinté : le statut est porté par une
 * étiquette pleine, dans la typographie des sur-titres du site, suivie d'un
 * filet qui file jusqu'au bord. Le registre est celui du document tamponné -
 * reçu, attestation - plutôt que celui de la notification d'application.
 *
 * Le statut est écrit en toutes lettres dans l'étiquette : il ne repose jamais
 * sur la seule couleur. La palette du projet ne comporte pas de vert : la
 * confirmation prend la terre, l'erreur le rouge d'action.
 */
.asea-feedback:empty {
	display: none;
}

.asea-feedback {
	display: grid;
	grid-template-columns: auto minmax(var(--wp--preset--spacing--5), 1fr);
	align-items: center;
	column-gap: var(--wp--preset--spacing--2);
	row-gap: var(--wp--preset--spacing--2);
	margin-block: 0;
}

.asea-feedback::after {
	content: "";
	grid-column: 2;
	grid-row: 1;
	height: 1px;
	background-color: var(--line-strong);
}

.asea-feedback-tag {
	grid-column: 1;
	grid-row: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px var(--wp--preset--spacing--1);
	border-radius: var(--border-radius-main);
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.asea-feedback-tag .asea-icon {
	width: 13px;
	height: 13px;
}

.asea-feedback-text {
	grid-column: 1 / -1;
	grid-row: 2;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.asea-feedback.is-ok .asea-feedback-tag {
	background-color: var(--wp--preset--color--earth);
}

.asea-feedback.is-error .asea-feedback-tag {
	background-color: var(--wp--preset--color--action);
}

.asea-feedback.is-error .asea-feedback-text {
	color: var(--wp--preset--color--action-deep);
}

/* asea-theme-section */
/**
 * Sections, enveloppes et grilles - primitives partagées par tous les patterns.
 * CDC §4.4 (espacement), §4.2 (cadence des fonds), §4.5 (largeurs).
 *
 * Les patterns ne portent aucun style en ligne : ils se contentent de poser
 * ces classes, toutes adossées aux tokens de theme.json.
 */

/*
 * La gouttière horizontale appartient à l'enveloppe, pas à la section.
 * Sans cette remise à zéro, le remplissage que WordPress applique aux blocs
 * pleine largeur s'ajoute à celui de l'enveloppe et le texte se retrouve à
 * 62 px du bord sur un écran de 320 px, au lieu des 24 px prévus.
 */
.asea-section {
	padding-block: var(--section-padding-block);
	padding-inline: 0;
}

/*
 * L'écart de bloc du contenu glisserait une bande de 24 px entre chaque
 * section - visible dès que deux sections n'ont pas le même fond, ce qui est
 * précisément la cadence recherchée. Deux classes suffisent à passer devant.
 */
.wp-block-post-content > .asea-section,
.entry-content > .asea-section {
	margin-block: 0;
}

.asea-section--tight {
	padding-block: var(--wp--preset--spacing--7);
}

/* Enveloppe horizontale : gouttière 24 px sur mobile, 32 px au-delà de 768 px. */
.asea-wrap {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--3);
}

.asea-wrap > * {
	margin-block: 0;
}

/*
 * QUI NEUTRALISE REDECLARE.
 *
 * La regle ci-dessus met a zero les marges de TOUS les enfants de l'enveloppe.
 * Les composants reposent ensuite la leur ; la prose posee directement dans
 * l'enveloppe, elle, n'avait personne pour le faire : les paragraphes se
 * retrouvaient colles, zero pixel entre eux.
 *
 * Mesure le 9 octobre 2026, sonde des freres empiles sur 18 pages : 29 couples
 * de paragraphes a 0 px, dont la page « Notre but » que le client a signalee.
 */
.asea-wrap > p + p,
.asea-wrap > p + ul,
.asea-wrap > p + ol,
.asea-wrap > ul + p,
.asea-wrap > ol + p,
.asea-wrap > p + figure,
.asea-wrap > figure + p {
	margin-top: var(--wp--preset--spacing--3);
}

/* Un titre qui suit de la prose demande davantage que deux paragraphes entre eux. */
.asea-wrap > p + h2,
.asea-wrap > ul + h2,
.asea-wrap > ol + h2,
.asea-wrap > p + h3,
.asea-wrap > ul + h3,
.asea-wrap > ol + h3 {
	margin-top: var(--wp--preset--spacing--5);
}

/*
 * Aucun bridage de largeur : le contenu et les titres occupent la largeur
 * de leur conteneur. Demande client du 9 octobre 2026, valable sur tout le site.
 */
.asea-wrap--narrow > * {
	max-width: none;
}

/* Bloc délibérément centré - le témoignage mis en avant (CDC §8.1). */
/* L'enveloppe .asea-wrap garde seule la largeur : rien n'est reborne ici. */
.asea-wrap--center {
	text-align: center;
}

.asea-wrap--text {
	max-width: none;
}

/* En-tête de section : sur-titre, titre, chapô. */
.asea-section-head {
	max-width: none;
	margin-bottom: var(--wp--preset--spacing--6);
}

.asea-section-head > * {
	margin-block: 0;
}

.asea-section-head > * + * {
	margin-top: var(--wp--preset--spacing--2);
}

.asea-section-head--center {
	margin-inline: auto;
	text-align: center;
}

.asea-section-lead {
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.6;
}

/* Grilles. Une colonne par défaut : le mobile est le cas de base. */
.asea-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--5);
}

.asea-grid > * {
	margin-block: 0;
}

.asea-grid--gap-small {
	gap: var(--wp--preset--spacing--3);
}

/* Pied de section : lien ou bouton sous la grille. */
.asea-section-foot {
	margin-top: var(--wp--preset--spacing--6);
}

.asea-section-foot--center {
	display: flex;
	justify-content: center;
}

/* Filet d'accent, rouge de marque réservé aux micro-accents (CDC §4.2). */
.asea-rule {
	width: 48px;
	height: 3px;
	border: 0;
	margin: 0;
	background-color: var(--wp--preset--color--brand-red);
}

@media (min-width: 600px) {

	.asea-grid--2,
	.asea-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {

	.asea-wrap {
		padding-inline: var(--wp--preset--spacing--4);
	}
}

@media (min-width: 900px) {

	.asea-grid--3,
	.asea-grid--5 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.asea-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {

	.asea-grid--5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* ------------------------------------------------ Page introuvable et archives */

.asea-404 > * {
	margin-block: 0;
}

.asea-404 > * + * {
	margin-top: var(--wp--preset--spacing--3);
}

.asea-404 .asea-section-lead {
	max-width: none;
}

.asea-404-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.asea-404-links a {
	color: var(--wp--preset--color--action-deep);
	font-weight: 600;
}

.asea-404-search {
	max-width: 480px;
	margin-top: var(--wp--preset--spacing--5);
}

.asea-archive > * {
	margin-block: 0;
}

.asea-archive .asea-card-title a {
	color: inherit;
	text-decoration: none;
}

.asea-archive .asea-card-title a:hover {
	color: var(--wp--preset--color--action-deep);
	text-decoration: underline;
}

.asea-pagination {
	margin-top: var(--wp--preset--spacing--6);
	gap: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--small);
}

/* asea-theme-card */
/**
 * Cartes - CDC §4.6.
 * Fond papier, filet 1 px, rayon unique, padding 32 px, aucune ombre portée.
 * Au survol : le filet se renforce et la carte se translate de 2 px sur Y.
 * Sous « mouvement réduit », la translation disparaît, le filet seul change.
 *
 * Les classes d'état (.is-hover, .is-focus) existent pour la page de
 * démonstration interne : elles rejouent exactement les mêmes déclarations
 * que les pseudo-classes, sans les simuler à côté.
 */

.asea-card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100%;
	padding: var(--wp--preset--spacing--4);
	border: 1px solid var(--line);
	border-radius: var(--border-radius-main);
	background-color: var(--wp--preset--color--paper);
	transition: border-color 200ms ease, transform 200ms ease;
}

.asea-card:hover,
.asea-card.is-hover,
.asea-card:focus-within {
	border-color: var(--line-strong);
}

.asea-card > * {
	margin-block: 0;
}

.asea-card > * + * {
	margin-top: var(--wp--preset--spacing--2);
}

.asea-card--compact {
	padding: var(--wp--preset--spacing--3);
}

/*
 * Ligne de contexte d'une carte : une date, une rubrique. C'est une donnee, pas
 * un sur-titre - elle ne prend donc ni capitales, ni interlettrage, ni couleur
 * d'accent, les trois marqueurs que le client a fait deposer du site.
 */
.asea-card-meta {
	color: var(--wp--preset--color--ink-subtle);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.asea-card-title {
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 600;
	line-height: 1.3;
}

.asea-card-text {
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.6;
}

/* Le pied de carte se cale en bas : toutes les cartes d'une grille s'alignent. */
.asea-card-foot {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--3);
}

/* Média de carte : ratio fixe, jamais de saut de mise en page. */
.asea-card-media {
	margin: calc(var(--wp--preset--spacing--4) * -1);
	margin-bottom: var(--wp--preset--spacing--3);
	overflow: hidden;
	border-radius: var(--border-radius-main) var(--border-radius-main) 0 0;
}

.asea-card-media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Numérotation des cartes de pilier (CDC §7, pillars-grid). */
.asea-card-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--border-radius-main);
	background-color: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--earth);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Étiquette d'état (projet en cours / réalisé, niveau de partenaire…). */
.asea-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px var(--wp--preset--spacing--1);
	border: 1px solid var(--line);
	border-radius: var(--border-radius-main);
	background-color: var(--wp--preset--color--paper-warm);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.asea-badge--active {
	border-color: transparent;
	background-color: var(--wp--preset--color--earth);
	color: var(--wp--preset--color--paper);
}

@media (prefers-reduced-motion: no-preference) {

	.asea-card:hover,
	.asea-card.is-hover {
		transform: translateY(-2px);
	}
}

/* asea-theme-header */
/**
 * En-tête et navigation - CDC §5.1 et §5.2.
 * 80 px sur grand écran, 64 px sur mobile, collant au-delà de 400 px de défilement.
 */

/* ---------------------------------------------------------------- Coquille */

/*
 * En-tête collante.
 *
 * Le collage est porté par `position: sticky` sur l'enveloppe que WordPress
 * pose autour de la partie de gabarit, et non plus par un `position: fixed`
 * ajouté au défilement par le script. Trois raisons :
 *
 *   1. la barre reste visible même si le JavaScript échoue ou tarde ;
 *   2. l'élément reste dans le flux : plus de saut de mise en page au moment
 *      où il quitte le flux, donc plus de hauteur à réserver ;
 *   3. `sticky` doit porter sur un parent qui a de la course. Posé sur
 *      `.asea-header`, dont la coquille fait exactement sa hauteur, il n'aurait
 *      nulle part où coller - c'est le piège classique.
 *
 * Le script ne sert plus qu'à l'ombre : un détail, qui ne conditionne rien.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 30;
}

/* Connecté, la barre d'administration occupe le haut de l'écran : ne pas passer dessous. */
body.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/*
 * Avec la barre superieure, le collage commence a `-hauteur de la barre` :
 * elle defile hors champ et seule la barre de navigation reste a l'ecran.
 * Aucun script, aucun saut de mise en page. Sans `:has()`, la barre colle
 * avec le reste : c'est la degradation acceptable.
 */
.wp-site-blocks > header.wp-block-template-part:has(.asea-topbar) {
	top: calc(-1 * var(--topbar-height));
}

body.admin-bar .wp-site-blocks > header.wp-block-template-part:has(.asea-topbar) {
	top: calc(var(--wp-admin--admin-bar--height, 32px) - var(--topbar-height));
}

/* ------------------------------------------------------- Barre superieure */

/*
 * ⚠️ La barre de navigation est devenue le SECOND enfant de la coquille, et le
 * coeur pose `:root :where(.is-layout-flow) > * { margin-block: 24px 0 }` sur
 * tout enfant qui n'est pas le premier. Mesure : 24 px de jour entre les deux
 * barres, et la barre collee s'arretait a 24 px du bord. Deux classes.
 */
.asea-header-shell > .asea-header {
	margin-block: 0;
}

.asea-topbar {
	box-sizing: border-box;
	height: var(--topbar-height);
	overflow: hidden;
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.asea-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
	box-sizing: border-box;
	height: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--3);
}

.asea-topbar-inner > * {
	margin-block: 0;
}

/*
 * Groupe de gauche : le lien vers la page Contact. Il reste visible a toutes
 * les largeurs, contrairement aux reseaux : c'est le lien le plus demande, et
 * sous 600 px son libelle passe en lecture d'ecran seulement - masque a l'oeil
 * par le decoupage, jamais par `display: none`, qui lui oterait son nom
 * accessible.
 */
.asea-topbar-gauche {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
}

@media (max-width: 599px) {

	.asea-topbar-contact span {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Sous 720 px, la place manque pour les trois groupes : les reseaux restent au pied de page. */
.asea-topbar-reseaux {
	display: none;
	align-items: center;
}

.asea-topbar .asea-social {
	margin: 0;
	gap: var(--wp--preset--spacing--1);
}

.asea-topbar .asea-social .wp-social-link a {
	padding: 8px;
}

.asea-topbar-liens {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	margin-left: auto;
}

.asea-topbar-lien {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--topbar-height);
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.asea-topbar-lien:hover,
.asea-topbar-lien:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.asea-topbar-lien:focus-visible {
	outline: 2px solid var(--wp--preset--color--paper);
	outline-offset: -2px;
}

.asea-topbar-lien .asea-icon {
	flex: 0 0 auto;
	color: var(--wp--preset--color--sand);
}

/* Le nombre de postes a pourvoir : une donnee, sur une petite plaque sable. */
.asea-topbar-compte {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	padding: 0 6px;
	border-radius: var(--border-radius-main);
	background-color: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	line-height: 20px;
}

@media (min-width: 720px) {

	.asea-topbar-reseaux {
		display: flex;
	}
}

.asea-header-shell {
	position: relative;
	z-index: 20;
	min-height: var(--header-height-mobile);
}

.asea-header {
	position: relative;
	width: 100%;
	background-color: var(--wp--preset--color--paper);
	box-shadow: 0 1px 0 var(--line);
	transition: box-shadow 200ms ease;
}

/*
 * Une fois la page défilée, l'ombre discrète du CDC §5.2 detache la barre du
 * contenu qui passe dessous. La condition du script porte sur la position de
 * défilement, grandeur que cette classe ne touche pas : pas d'oscillation.
 */
.asea-header.is-stuck {
	box-shadow: 0 1px 0 var(--line), var(--shadow-menu);
}

.asea-header-inner {
	display: grid;
	/*
	 * `max-content` sur la colonne de marque, et non `auto` : une piste `auto`
	 * accepte de descendre sous la taille de son contenu quand la colonne
	 * centrale reclame de la place, et le logo se retrouvait comprime de 36 %
	 * en largeur - deforme, sans le moindre avertissement.
	 */
	grid-template-columns: max-content 1fr auto;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	box-sizing: border-box;
	min-height: var(--header-height-mobile);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--3);
}

.asea-header-inner > * {
	margin-block: 0;
}

.asea-header-actions > *,
.asea-nav-mobile-panel > * {
	margin-block: 0;
}

.asea-header-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--2);
}

/*
 * Le bouton de don ne se casse jamais en deux lignes. La piste de droite de la
 * barre est dimensionnee en `auto`, donc elle accepte de descendre sous la
 * largeur de son contenu : le libelle passait a la ligne et le bouton prenait
 * 66 px de haut au milieu d'une barre de 80. Avec `nowrap`, la piste reclame sa
 * largeur minimale et la colonne centrale cede les 19 px necessaires.
 */
.asea-header .asea-donation-button {
	white-space: nowrap;
}

/* ------------------------------------------------------------------- Logo */

.asea-brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
}

.asea-brand-image {
	width: auto;
	height: 40px;
	/*
	 * Garde-fou : quoi qu'il arrive a la largeur de la colonne, le logo garde
	 * ses proportions. `fill`, la valeur par defaut d'une image, les sacrifie.
	 */
	object-fit: contain;
}

.asea-brand-text {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
}

/* ------------------------------------------------- Navigation grand écran */

.asea-nav {
	display: none;
	justify-self: center;
}

.asea-nav-list,
.asea-nav-submenu {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.asea-nav-list {
	align-items: center;
	gap: var(--wp--preset--spacing--2);
}

.asea-nav-item {
	position: relative;
	display: flex;
	align-items: center;
}

.asea-nav-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	/*
	 * Un libelle de menu coupe en deux lignes casse l'alignement de la barre et
	 * se lit mal : chaque entree tient sur une ligne, et c'est la barre qui
	 * bascule en tiroir quand la place manque, pas le mot qui se casse.
	 */
	white-space: nowrap;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.asea-nav-link:hover,
.asea-nav-item.is-open > .asea-nav-link,
.asea-nav-item.is-ancestor > .asea-nav-link,
.asea-nav-item.is-current > .asea-nav-link {
	color: var(--wp--preset--color--action-deep);
}

.asea-nav-item.is-current > .asea-nav-link {
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--action);
}

.asea-nav-toggle,
.asea-mnav-toggle,
.asea-nav-burger,
.asea-nav-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.asea-nav-toggle {
	width: 24px;
	height: 44px;
	color: var(--wp--preset--color--ink-muted);
}

.asea-nav-toggle .asea-icon {
	transition: transform 150ms ease;
}

.asea-nav-item.is-open .asea-nav-toggle .asea-icon {
	transform: rotate(180deg);
}

.asea-nav-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	display: none;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 280px;
	padding: var(--wp--preset--spacing--1);
	border: 1px solid var(--line);
	border-radius: var(--border-radius-main);
	background-color: var(--wp--preset--color--paper);
	box-shadow: var(--shadow-menu);
}

.asea-nav-item:last-child .asea-nav-submenu {
	right: 0;
	left: auto;
}

.asea-nav-item.is-open > .asea-nav-submenu {
	display: flex;
}

.asea-nav-sublink {
	display: block;
	padding: var(--wp--preset--spacing--2);
	border-radius: var(--border-radius-main);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.asea-nav-sublink:hover,
.asea-nav-sublink[aria-current="page"] {
	background-color: var(--wp--preset--color--paper-warm);
	color: var(--wp--preset--color--action-deep);
}

/* -------------------------------------------------- Sélecteur de langue */

.asea-lang-list {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.asea-lang-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 36px;
	border-radius: var(--border-radius-main);
	color: var(--wp--preset--color--ink-subtle);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.asea-lang-link:hover {
	color: var(--wp--preset--color--action-deep);
}

.asea-lang-item.is-current .asea-lang-link {
	background-color: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--ink);
}

/* ------------------------------------------------------ Bouton d'ouverture */

.asea-nav-burger {
	width: 44px;
	height: 44px;
	margin-right: calc(var(--wp--preset--spacing--1) * -1);
}

.asea-nav-burger-bars {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 22px;
}

.asea-nav-burger-bars span {
	display: block;
	height: 2px;
	border-radius: var(--border-radius-main);
	background-color: var(--wp--preset--color--ink);
}

/* -------------------------------------------------------- Panneau mobile */

.asea-nav-mobile {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
}

.asea-nav-mobile.is-open {
	display: block;
}

.asea-nav-mobile-backdrop {
	position: absolute;
	inset: 0;
	background-color: var(--overlay);
}

.asea-nav-mobile-panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--3);
	overflow-y: auto;
	background-color: var(--wp--preset--color--paper);
}

.asea-nav-mobile-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--header-height-mobile);
	gap: var(--wp--preset--spacing--2);
}

.asea-nav-close {
	width: 44px;
	height: 44px;
	margin-right: calc(var(--wp--preset--spacing--1) * -1);
	color: var(--wp--preset--color--ink);
}

.asea-nav-close .asea-icon {
	width: 20px;
	height: 20px;
}

.asea-mnav {
	flex: 1 1 auto;
}

.asea-mnav-list,
.asea-mnav-submenu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.asea-mnav-item + .asea-mnav-item {
	border-top: 1px solid var(--line);
}

.asea-mnav-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--2);
}

.asea-mnav-link {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-height: 56px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 600;
	text-decoration: none;
}

.asea-mnav-item.is-current > .asea-mnav-row > .asea-mnav-link,
.asea-mnav-item.is-ancestor > .asea-mnav-row > .asea-mnav-link {
	color: var(--wp--preset--color--action-deep);
}

.asea-mnav-toggle {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border: 1px solid var(--line);
	border-radius: var(--border-radius-main);
	color: var(--wp--preset--color--ink-muted);
}

.asea-mnav-toggle .asea-icon {
	transition: transform 150ms ease;
}

.asea-mnav-toggle[aria-expanded="true"] .asea-icon {
	transform: rotate(180deg);
}

.asea-mnav-submenu {
	display: none;
	padding-bottom: var(--wp--preset--spacing--2);
}

.asea-mnav-submenu.is-open {
	display: block;
}

.asea-mnav-sublink {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	min-height: 48px;
	padding-left: var(--wp--preset--spacing--2);
	border-left: 2px solid var(--line);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--body);
	text-decoration: none;
}

.asea-mnav-sublink[aria-current="page"] {
	border-left-color: var(--wp--preset--color--action);
	color: var(--wp--preset--color--action-deep);
}

.asea-nav-mobile-foot {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	padding-top: var(--wp--preset--spacing--3);
	border-top: 1px solid var(--line);
}

.asea-nav-mobile-foot .asea-lang-list {
	justify-content: center;
}

/* Verrouillage du défilement quand le panneau est ouvert. */
html.asea-nav-locked,
html.asea-nav-locked body {
	overflow: hidden;
}

/* ------------------------------------------------------------ Grand écran */

@media (min-width: 1200px) {

	.asea-header-shell,
	.asea-header-inner {
		min-height: var(--header-height);
	}

	.asea-header-inner {
		gap: var(--wp--preset--spacing--4);
		padding-inline: var(--wp--preset--spacing--4);
	}

	.asea-brand-image {
		height: 48px;
	}

	.asea-nav {
		display: block;
	}

	.asea-nav-burger {
		display: none;
	}

	.asea-nav-mobile {
		display: none !important;
	}
}

@media (max-width: 1199px) {

	.asea-header .asea-lang {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {

	.asea-header-inner {
		padding-inline: var(--wp--preset--spacing--4);
	}
}

/*
 * Passe 1400 px, la barre respire : la gouttiere reprend sa valeur nominale et
 * le logo son plein format. En dessous, la place manque - une entree de menu
 * en graisse 600 est plus large, et la marge avant le bloc langue tombait a la
 * valeur de la gouttiere elle-meme.
 */
@media (min-width: 1400px) {

	.asea-nav-list {
		gap: var(--wp--preset--spacing--3);
	}

	.asea-brand-image {
		height: 56px;
	}
}

@media (max-width: 400px) {

	.asea-header .asea-donation-button {
		padding-inline: var(--wp--preset--spacing--2);
	}
}

/* ------------------------------------------------------------- Méga-menu */

/*
 * Écart assumé au CDC §5.1, demandé par le client. Le panneau court d'un bord
 * à l'autre de la barre, mais son contenu reste dans l'enveloppe du site :
 * ouvert, il partage exactement l'axe vertical du logo, des titres et du pied
 * de page. C'est ce qui distingue un méga-menu d'un tiroir posé au hasard.
 */

/* Pictogramme des sous-liens du panneau mobile. */
.asea-mnav-picto {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--border-radius-main);
	background-color: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--earth);
}

.asea-mnav-picto .asea-picto {
	width: 18px;
	height: 18px;
}

/*
 * L'accent : un seul détail par pictogramme dans le rouge de marque, réservé
 * par le CDC §4.2 aux micro-accents graphiques. C'est lui qui fait la famille.
 */
.asea-picto-accent {
	stroke: var(--wp--preset--color--brand-red);
}

@media (min-width: 1200px) {

	/* L'entrée cesse d'être le repère de positionnement : c'est la barre qui l'est. */
	.asea-nav-item--mega {
		position: static;
	}

	.asea-nav-submenu.asea-mega {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 40;
		display: block;
		visibility: hidden;
		box-sizing: border-box;
		min-width: 0;
		max-height: calc(100vh - var(--header-height));
		padding: 0;
		overflow-y: auto;
		border: 0;
		border-top: 1px solid var(--line);
		border-radius: 0 0 var(--border-radius-main) var(--border-radius-main);
		opacity: 0;
		background-color: var(--wp--preset--color--paper);
		box-shadow: var(--shadow-menu);
		pointer-events: none;
	}

	.asea-nav-item--mega.is-open > .asea-nav-submenu.asea-mega {
		display: block;
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
	}

	.asea-mega-wrap {
		padding-block: var(--wp--preset--spacing--6);
	}

	/*
	 * L'enveloppe est plafonnee a la largeur du site : elargir les colonnes
	 * laterales retrecirait les cartes au lieu de les aerer. Les proportions
	 * sont donc calees une fois pour toutes, la colonne centrale prenant le
	 * reste - a 216 px les intitules se cassaient sur trois lignes.
	 */
	.asea-mega-grid {
		display: grid;
		grid-template-columns: 260px minmax(0, 1fr) 280px;
		gap: var(--wp--preset--spacing--5);
		align-items: start;
	}

	.asea-mega-grid > * {
		margin-block: 0;
	}

	/* ------------------------------------------- Colonne de gauche : le sujet */

	/*
	 * Fond discret : le papier chaud se distingue a peine du papier du panneau,
	 * assez pour poser la colonne comme un bloc, pas assez pour concurrencer les
	 * cartes laterales. La colonne a ete elargie de 220 a 260 px pour que son
	 * remplissage ne rogne pas la mesure du texte.
	 */
	.asea-mega-intro {
		box-sizing: border-box;
		padding: var(--wp--preset--spacing--4);
		border-radius: var(--border-radius-main);
		background-color: var(--wp--preset--color--paper-warm);
	}

	.asea-mega-intro > * {
		margin-block: 0;
	}

	.asea-mega-intro > * + * {
		margin-top: var(--wp--preset--spacing--2);
	}

	.asea-mega-title {
		color: var(--wp--preset--color--ink);
		font-size: var(--wp--preset--font-size--h-4);
		font-weight: 600;
		line-height: 1.3;
	}

	.asea-mega-text {
		color: var(--wp--preset--color--ink-muted);
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.55;
	}

	.asea-mega-more {
		margin-top: var(--wp--preset--spacing--3);
	}

	/* ------------------------------------------ Colonne centrale : les entrées */

	/*
	 * Une seule colonne, cartes pleine largeur. Sur deux colonnes, le corps de
	 * carte tombait a 174 px : l'intitule passait sur deux lignes et le resume
	 * sur trois. En pleine largeur, chacun tient sur une ligne.
	 */
	.asea-mega-links {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.asea-mega-links > * {
		margin-block: 0;
	}

	/*
	 * Un filet entre les entrees, jamais autour : le survol remplit la ligne,
	 * un cadre en plus ferait doublon avec la separation.
	 */
	.asea-mega-item + .asea-mega-item {
		border-top: 1px solid var(--line);
	}

	.asea-mega-link {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--2);
		box-sizing: border-box;
		height: 100%;
		padding: var(--wp--preset--spacing--2);
		border-radius: var(--border-radius-main);
		color: var(--wp--preset--color--ink);
		text-decoration: none;
		transition: background-color 180ms ease;
	}

	.asea-mega-link:hover,
	.asea-mega-link:focus-visible,
	.asea-mega-link[aria-current="page"] {
		background-color: var(--wp--preset--color--paper-warm);
	}

	.asea-mega-picto {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: var(--border-radius-main);
		background-color: var(--wp--preset--color--sand);
		color: var(--wp--preset--color--earth);
		transition: background-color 180ms ease, color 180ms ease;
	}

	/*
	 * Au survol, la pastille bascule dans la couleur d'action et l'accent passe
	 * en sable : le pictogramme reste à deux tons, il ne s'aplatit pas.
	 */
	.asea-mega-link:hover .asea-mega-picto,
	.asea-mega-link:focus-visible .asea-mega-picto,
	.asea-mega-link[aria-current="page"] .asea-mega-picto {
		background-color: var(--wp--preset--color--action);
		color: var(--wp--preset--color--paper);
	}

	.asea-mega-link:hover .asea-picto-accent,
	.asea-mega-link:focus-visible .asea-picto-accent,
	.asea-mega-link[aria-current="page"] .asea-picto-accent {
		stroke: var(--wp--preset--color--sand);
	}

	.asea-mega-body {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}

	.asea-mega-label {
		color: var(--wp--preset--color--ink);
		font-size: var(--wp--preset--font-size--body);
		font-weight: 600;
		line-height: 1.3;
	}

	.asea-mega-link:hover .asea-mega-label,
	.asea-mega-link:focus-visible .asea-mega-label,
	.asea-mega-link[aria-current="page"] .asea-mega-label {
		color: var(--wp--preset--color--action-deep);
	}

	.asea-mega-resume {
		color: var(--wp--preset--color--ink-muted);
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.45;
	}

	/* --------------------------------- Colonne de droite : la preuve, ou le don */

	.asea-mega-aside {
		box-sizing: border-box;
		padding: var(--wp--preset--spacing--4);
		border-radius: var(--border-radius-main);
	}

	.asea-mega-aside > * {
		margin-block: 0;
	}

	.asea-mega-aside > * + * {
		margin-top: var(--wp--preset--spacing--2);
	}

	/*
	 * Variante bleue. Le bleu vient du logo officiel - la meme source dont le
	 * CDC 4.2 a tire toute la palette - approfondi de #0858B0 a #0B4F94 pour
	 * porter du texte clair, exactement comme le rouge du logo a ete approfondi
	 * en couleur d'action. Le filet sombre n'a plus lieu d'etre sur un aplat.
	 */
	.asea-mega-aside--secondary {
		border: 0;
		background-color: var(--wp--preset--color--brand-blue);
	}

	.asea-mega-aside--secondary .asea-mega-aside-title {
		color: var(--wp--preset--color--paper);
	}

	.asea-mega-aside--secondary .asea-mega-aside-text {
		color: var(--wp--preset--color--sand);
	}

	/* Le bouton fantome sur fond bleu : filet et texte clairs, inversion au survol. */
	.asea-mega-aside--secondary .asea-mega-aside-cta {
		border-color: var(--wp--preset--color--paper);
		background-color: transparent;
		color: var(--wp--preset--color--paper);
	}

	.asea-mega-aside--secondary .asea-mega-aside-cta:hover,
	.asea-mega-aside--secondary .asea-mega-aside-cta:focus-visible {
		background-color: var(--wp--preset--color--paper);
		color: var(--wp--preset--color--brand-blue);
	}

	/*
	 * L'anneau de focus du theme est un bleu vif : sur ce fond bleu il tombe a
	 * 1,6:1, donc invisible, alors que le seuil est de 3:1 pour un indicateur.
	 * Il passe au blanc, qui remonte a 8,2:1.
	 */
	.asea-mega-aside--secondary a:focus-visible {
		outline-color: var(--wp--preset--color--paper);
	}

	/*
	 * Variante d'appel : fond encre. Le panneau « Nous soutenir » est le seul à
	 * la porter, ce qui en fait le point le plus contrasté de tout le menu.
	 */
	.asea-mega-aside--primary {
		background-color: var(--wp--preset--color--ink);
	}

	.asea-mega-aside-picto {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: var(--border-radius-main);
		background-color: var(--wp--preset--color--sand);
		color: var(--wp--preset--color--earth);
	}

	.asea-mega-aside--primary .asea-mega-aside-picto {
		background-color: var(--wp--preset--color--earth);
		color: var(--wp--preset--color--sand);
	}

	.asea-mega-aside-title {
		color: var(--wp--preset--color--ink);
		font-size: var(--wp--preset--font-size--h-4);
		font-weight: 600;
		line-height: 1.3;
	}

	.asea-mega-aside-text {
		color: var(--wp--preset--color--ink-muted);
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.55;
	}

	.asea-mega-aside--primary .asea-mega-aside-title {
		color: var(--wp--preset--color--paper);
	}

	.asea-mega-aside--primary .asea-mega-aside-text {
		color: var(--wp--preset--color--sand);
	}

	.asea-mega-aside-cta {
		margin-top: var(--wp--preset--spacing--3);
	}

	.asea-mega-aside--secondary .asea-mega-aside-cta {
		width: 100%;
	}
}

@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {

	.asea-nav-submenu.asea-mega {
		transform: translateY(-6px);
		transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
	}

	.asea-nav-item--mega.is-open > .asea-nav-submenu.asea-mega {
		transform: none;
	}
}


/* asea-theme-footer */
/**
 * Pied de page - CDC §5.3.
 *
 * Fond encre, comme demandé. Un pied de page sombre ferme la page au lieu de la
 * laisser se dissoudre dans le blanc, et il donne à la navigation secondaire un
 * plan distinct du contenu.
 *
 * Trois bandes, séparées par un filet clair :
 *
 *   1. l'ancrage - identité, coordonnées et appel au don d'un côté, lettre
 *      d'information de l'autre ;
 *   2. quatre colonnes de navigation, larges, sans intitulé sur deux lignes ;
 *   3. la signature, mince.
 *
 * ⚠️ Le logo est posé sur une plaque claire, jamais directement sur l'encre :
 * 57 % de ses pixels opaques sont sombres, plus de la moitié du logotype
 * disparaîtrait. La plaque conserve la marque telle qu'elle est, là où un filtre
 * de monochromie la dénaturerait.
 *
 * Les gris clairs viennent de deux tokens dédiés plutôt que d'une opacité posée
 * sur le texte : le contraste reste mesurable, et le même gris sert partout.
 */

.asea-footer {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/*
 * La nappe chaude, très basse en intensité : elle évite l'aplat noir mort sans
 * jamais devenir un décor. Même famille que le bandeau de réassurance.
 */
.asea-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--footer-glow);
	pointer-events: none;
}

.asea-footer-haut,
.asea-footer-nav,
.asea-footer-bas {
	position: relative;
	z-index: 1;
}

/*
 * ⛔⛔ MARGES DU COEUR - le cas le plus vicieux rencontre sur ce site.
 *
 * `.asea-footer` est un groupe du coeur : WordPress pose
 * `margin-block-start: 24px` sur CHACUN de ses enfants, via
 * `:root :where(.is-layout-flow) > *`. Et comme le pied porte
 * `overflow: hidden`, il forme un contexte de formatage : les marges ne
 * FUSIONNENT pas avec celles du parent, elles creusent un ecart a l'interieur.
 *
 * Ces trois ecarts de 24 px existaient depuis le debut sans se voir : de
 * l'encre sur de l'encre. Le jour ou le haut de pied a recu une photographie,
 * ils sont apparus comme DEUX BANDES NOIRES, au-dessus et au-dessous d'elle.
 *
 * ⭐ La lecon : une marge invisible sur un aplat devient visible des qu'une
 *    image arrive. Les remettre a zero avant de poser un fond, pas apres.
 *
 * Deux classes au selecteur : a une seule, la remise a zero serait a egalite
 * avec la regle du coeur et perdrait sur l'ordre des feuilles.
 */
.asea-footer > .asea-footer-haut,
.asea-footer > .asea-footer-nav,
.asea-footer > .asea-footer-bas {
	margin-block: 0;
}

/* ----------------------------- La photographie de fond du haut de pied */

/*
 * Elle est DECORATIVE : alternative vide, et un voile tres dense par-dessus.
 *
 * ⛔⛔ Le pied porte les textes les plus pales du site : `--text-on-dark` vaut
 *    rgba(255,255,255,0.74) et `--text-on-dark-subtle` rgba(255,255,255,0.55).
 *    Ces couleurs sont TRANSLUCIDES : elles se composent avec ce qu'il y a
 *    derriere, si bien qu'un fond qui s'eclaircit degrade DEUX fois - il
 *    eclaircit le fond ET le texte. Le voile est calcule pour qu'une zone
 *    blanche de la photographie reste sous le seuil.
 *
 * Voile retenu : 0,72 a 0,84. La densite a ete choisie sur le composite reel,
 * texte compose sur son fond.
 *
 * ⛔⛔ Le chiffre de 4,93 note ici le 14/10 NE SE REPRODUIT PAS : remesure le
 *    meme jour, la ligne la plus pale donnait 4,58 a 1440 px et 4,24 a 1024 px.
 *    La mesure d'origine n'avait ete prise qu'a UNE largeur, et le pied change
 *    de hauteur avec la largeur - donc le degrade ne tombe pas au meme endroit
 *    sur les memes lignes. ⭐ Mesurer un voile vertical a au moins deux
 *    largeurs, toujours.
 *
 * Le point bloquant etait `.asea-footer-ancien-nom` ; il est traite sur la
 * regle de cette ligne, plus bas, et non sur le voile.
 */
.asea-footer-media {
	position: absolute;
	z-index: 0;
	inset: 0;
	margin: 0;
	pointer-events: none;
}

.asea-footer-media .wp-block-image,
.asea-footer-media figure {
	height: 100%;
	margin: 0;
}

.asea-footer-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
}

.asea-footer-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(180deg, rgba(20, 20, 20, 0.72) 0%, rgba(20, 20, 20, 0.84) 100%);
}

/*
 * ⛔⛔ JAMAIS DEUX SECTIONS DU MEME TYPE A LA SUITE.
 *
 * Le bandeau d'appel se termine en photographie voilee de sombre sur 14 pages.
 * Le pied en porte une aussi : bout a bout, les deux ne font plus qu'une seule
 * masse sombre, et la coupure entre le corps de page et le pied disparait.
 *
 * La photographie du pied ne sert donc que sur les pages ou la derniere section
 * est un aplat : ailleurs, le pied revient a l'encre pleine et c'est le bandeau
 * qui porte l'image.
 *
 * ⛔ L'etat par defaut est SANS photographie, et c'est `:has()` qui la REND
 *    visible - jamais l'inverse. Un navigateur qui ignore `:has()` ne ferait
 *    pas disparaitre la regle de masquage : il ignorerait la regle d'affichage,
 *    et retomberait sur le pied a l'encre. Le defaut de prise en charge donne
 *    le resultat prudent, pas la superposition qu'on cherche a eviter.
 *
 * ⛔ La condition porte sur la PRESENCE d'un bandeau photographique dans la
 *    page, pas sur sa position. Un bandeau place ailleurs qu'en fin de page
 *    ferait simplement perdre au pied son image - sans consequence visible.
 *    L'ancrer sur `:last-child` serait plus fin, mais le jour ou la position
 *    change, la faute reapparait a l'ecran. On prefere l'echec discret.
 */
.asea-footer .asea-footer-media {
	display: none;
}

@supports selector(:has(*)) {

	body:not(:has(.asea-cta-band--photo)) .asea-footer .asea-footer-media {
		display: block;
	}
}

/*
 * Le contenu repasse devant la photographie.
 *
 * ⛔⛔ Et sa marge est remise a zero, pour une raison qui ne saute pas aux yeux :
 *    en ajoutant la couche image, ce conteneur est devenu le SECOND enfant de
 *    la section et a donc recu les 24 px du coeur. Comme la section n'a ni
 *    marge interieure ni bordure, cette marge TRAVERSE l'element (fusion des
 *    marges) et pousse la section entiere vers le bas : une bande d'encre
 *    apparait au-dessus de la photographie.
 *
 *    Le piege est muet : `getComputedStyle(section).marginTop` renvoie 0, parce
 *    que la marge appartient a l'enfant. Seule une sonde de hauteur nulle posee
 *    en tete du pied le montre.
 */
.asea-footer-haut > .asea-footer-haut-inner {
	position: relative;
	z-index: 1;
	margin-block: 0;
}

.asea-footer .asea-wrap > * {
	margin-block: 0;
}

/* ------------------------------------------------------- Bande 1 : ancrage */

.asea-footer-haut-inner {
	display: grid;
	gap: var(--wp--preset--spacing--6);
	padding-block: var(--wp--preset--spacing--7);
}

.asea-footer-identite > * {
	margin-block: 0;
}

/* La plaque claire qui porte le logotype. */
.asea-footer-logo {
	display: inline-flex;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	border-radius: var(--border-radius-main);
	background-color: var(--wp--preset--color--paper);
}

.asea-footer .asea-brand-image {
	height: 44px;
}

.asea-footer-pitch {
	margin-top: var(--wp--preset--spacing--4);
	color: var(--text-on-dark);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
}

/*
 * L'ancien nom de l'association. C'est une ligne de fait, pas une accroche :
 * elle se pose plus discrete que la presentation, sans italique ni couleur
 * d'accent - deux marqueurs que le client a fait deposer du site.
 *
 * ⛔ DEUX classes sur le selecteur : la remise a zero des marges voisine
 *    (`.asea-footer-identite > *`) vaut (0,1,0) comme la regle du coeur, et
 *    se decide sur l'ordre des feuilles. A une seule classe, la marge
 *    sauterait au prochain changement d'ordre.
 */
/*
 * ⛔⛔ Cette ligne etait en `--text-on-dark-subtle`, blanc a 55 %, et c'est
 *    ELLE SEULE qui tenait le plancher de contraste du pied sous le seuil :
 *    4,24 a 1024 px, 4,58 a 1440 px, quelle que soit la photographie de fond.
 *    Toutes les autres lignes, en blanc a 74 %, sont a 5,7 et au-dela.
 *
 * ⭐ On a longtemps cherche la reponse du cote du VOILE, et du cote du choix de
 *    la photographie. Les deux etaient de mauvaises pistes : six images
 *    candidates donnent toutes entre 4,16 et 4,56 sur cette ligne, et assombrir
 *    le voile revenait sur un reglage que le client avait valide. Le seul
 *    parametre qui la fait passer, c'est son propre gris.
 *
 * Elle reste plus discrete que la presentation par sa TAILLE et son poids,
 * pas par un gris illisible - sans italique ni couleur d'accent, deux marqueurs
 * que le client a fait deposer du site.
 *
 * ⛔ DEUX classes sur le selecteur : la remise a zero des marges voisine
 *    (`.asea-footer-identite > *`) vaut (0,1,0) comme la regle du coeur, et
 *    se decide sur l'ordre des feuilles. A une seule classe, la marge
 *    sauterait au prochain changement d'ordre.
 */
.asea-footer .asea-footer-ancien-nom {
	margin-top: var(--wp--preset--spacing--2);
	color: var(--text-on-dark);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.asea-footer-engagement {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	margin-top: var(--wp--preset--spacing--4);
}

.asea-footer-engagement > * {
	margin-block: 0;
}

/* ------------------------------------------------------------- Coordonnées */

.asea-footer .asea-contact {
	margin: var(--wp--preset--spacing--4) 0 0;
	padding: 0;
	list-style: none;
}

/*
 * ATTENTION - ces trois selecteurs habillent le bloc `asea/contact-details`,
 * qui vit dans le pied de page MAIS AUSSI dans la carte « Le siege » de la page
 * Contact, sur fond creme. Leur couleur par defaut doit donc etre celle d'un
 * fond CLAIR ; c'est la variante sombre qui est redeclaree plus bas, dans le
 * pied de page et dans toute section encre.
 *
 * Avant correction, ces valeurs sortaient en rgba(255,255,255,0.74) sur un fond
 * a rgb(250,248,245) : 1,06:1. L'adresse, les deux telephones et l'adresse de
 * courriel etaient invisibles, et le titre juste au-dessus, lui, se lisait -
 * la signature exacte d'une couleur heritee d'un autre contexte.
 */
.asea-contact-item {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.asea-contact-item + .asea-contact-item {
	margin-top: var(--wp--preset--spacing--2);
}

/*
 * Alignement de l'icone sur la PREMIERE LIGNE du texte, par construction.
 *
 * L'ancienne version posait `margin-top: 3px` - un nombre cale a l'oeil sur un
 * seul cas. Mesure le 9 octobre 2026 : l'icone tombait 2 px trop bas sur
 * l'adresse et 4 px trop haut sur les telephones et le courriel, parce que ces
 * deux-la sont des liens centres dans une cible tactile de 32 px.
 *
 * La parade : donner a l'icone la hauteur d'une ligne de texte (1.5em, soit la
 * hauteur de ligne declaree sur l'item). Le SVG, qui porte un `viewBox` et le
 * `preserveAspectRatio` par defaut, se centre tout seul dans cette boite. Le
 * centre du glyphe tombe alors exactement sur le centre de la ligne, quelle que
 * soit la taille de police - aucun nombre a recaler.
 */
.asea-contact-item .asea-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 1.5em;
	margin-top: 0;
	color: var(--wp--preset--color--ochre);
}

.asea-contact-value,
.asea-contact-phone {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	transition: color 160ms ease;
}

/* Sur fond sombre, la couleur est redeclaree - jamais laissee a l'heritage. */
.asea-footer .asea-contact-item,
.has-ink-background-color .asea-contact-item {
	color: var(--text-on-dark);
}

.asea-footer .asea-contact-value,
.asea-footer .asea-contact-phone,
.has-ink-background-color .asea-contact-value,
.has-ink-background-color .asea-contact-phone {
	color: var(--text-on-dark);
}

/* Ces liens mesuraient 17 à 21 px de haut : sous la cible tactile minimale. */
a.asea-contact-value,
.asea-contact-phone,
.asea-legal-list a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

/*
 * Dans la liste de coordonnees, la cible tactile grandit VERS LE BAS : le texte
 * reste sur sa premiere ligne, en face de son icone. Centre dans les 32 px, il
 * descendait de 7 px et rompait l'alignement de la colonne.
 */
.asea-contact-item a.asea-contact-value,
.asea-contact-item .asea-contact-phone {
	align-items: flex-start;
}

a.asea-contact-value:hover,
a.asea-contact-value:focus-visible,
.asea-contact-phone:hover,
.asea-contact-phone:focus-visible {
	color: var(--wp--preset--color--action-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.asea-footer a.asea-contact-value:hover,
.asea-footer a.asea-contact-value:focus-visible,
.asea-footer .asea-contact-phone:hover,
.asea-footer .asea-contact-phone:focus-visible,
.has-ink-background-color a.asea-contact-value:hover,
.has-ink-background-color a.asea-contact-value:focus-visible,
.has-ink-background-color .asea-contact-phone:hover,
.has-ink-background-color .asea-contact-phone:focus-visible {
	color: var(--wp--preset--color--paper);
}

.asea-contact-phones {
	display: flex;
	flex-direction: column;
}

/* ------------------------------------------- Bande 1, à droite : la lettre */

/*
 * Le formulaire est posé sur une plaque de verre : sur un aplat sombre, un champ
 * blanc isolé flotte sans attache. La plaque lui donne un contenant, et la bande
 * gagne son deuxième point d'appui.
 */
/*
 * La plaque s'etire a la hauteur de la colonne d'identite et centre son contenu :
 * sans cela elle s'arretait 130 px plus haut et laissait un trou au bas de la
 * bande, exactement le defaut que le client a signale sur la version claire.
 */
.asea-footer-lettre {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--5);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius-main);
	background-color: var(--glass-surface);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.asea-footer-lettre > * {
	margin-block: 0;
}

.asea-footer-lettre-titre {
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 600;
	line-height: 1.3;
}

.asea-footer-lettre-lead {
	margin-top: var(--wp--preset--spacing--2);
	color: var(--text-on-dark);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.asea-footer .asea-newsletter {
	margin-top: var(--wp--preset--spacing--4);
}

.asea-footer .asea-feedback:empty {
	display: none;
}

.asea-footer .asea-newsletter-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--2);
}

.asea-footer .asea-label {
	color: var(--text-on-dark);
}

.asea-footer .asea-consent-label {
	color: var(--text-on-dark-subtle);
}

.asea-footer .asea-consent-label a {
	color: var(--text-on-dark);
}

/* Bouton clair sur fond sombre : le rouge reste à l'appel au don, au-dessus. */
.asea-footer .asea-newsletter-form .asea-btn {
	justify-self: start;
	border: 0;
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

.asea-footer .asea-newsletter-form .asea-btn:hover,
.asea-footer .asea-newsletter-form .asea-btn:focus-visible {
	background-color: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--ink);
}

/* ---------------------------------------------- Bande 2 : colonnes de liens */

.asea-footer-nav {
	border-top: 1px solid var(--glass-border);
}

.asea-footer-nav-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--5) var(--wp--preset--spacing--4);
	padding-block: var(--wp--preset--spacing--6);
}

.asea-footer-col > * {
	margin-block: 0;
}

/*
 * Sous 720 px la colonne se replie. L'entete devient la commande : 48 px de
 * haut, chevron a droite. Au-dela, la feuille la neutralise et la colonne reste
 * ouverte - c'est le script qui la referme, jamais le balisage.
 */
.asea-footer-col-tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--2);
	min-height: 48px;
	cursor: pointer;
	list-style: none;
}

.asea-footer-col-tete::-webkit-details-marker {
	display: none;
}

.asea-footer-col-title {
	margin: 0;
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: 1.3;
}

.asea-footer-col-chevron {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--text-on-dark);
	transition: transform 200ms ease;
}

.asea-footer-col[open] > .asea-footer-col-tete .asea-footer-col-chevron {
	transform: rotate(180deg);
}

.asea-footer-col-tete:focus-visible {
	outline: 2px solid var(--wp--preset--color--paper);
	outline-offset: 3px;
}

.asea-footer-list {
	margin: var(--wp--preset--spacing--3) 0 0;
	padding: 0;
	list-style: none;
}

/*
 * La cible tactile fait 40 px de haut sans que l'interligne visuel ne s'écarte :
 * le remplissage vertical est porté par le lien, pas par la liste.
 */
.asea-footer-link {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: var(--text-on-dark);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	text-decoration: none;
	transition: color 160ms ease;
}

.asea-footer-link:hover,
.asea-footer-link:focus-visible {
	color: var(--wp--preset--color--paper);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------ Bande 3 : signature */

.asea-footer-bas {
	border-top: 1px solid var(--glass-border);
}

.asea-footer-bas-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	padding-block: var(--wp--preset--spacing--3);
}

.asea-footer-bas-inner > * {
	margin-block: 0;
}

.asea-legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.asea-legal-list a,
.asea-copyright {
	color: var(--text-on-dark-subtle);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	transition: color 160ms ease;
}

.asea-legal-list a:hover,
.asea-legal-list a:focus-visible {
	color: var(--wp--preset--color--paper);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Réseaux sociaux : rien ne s'affiche tant qu'aucune adresse n'est renseignée. */
.asea-footer .wp-block-social-links {
	gap: var(--wp--preset--spacing--1);
	margin: 0;
	padding: 0;
}

.asea-footer .wp-block-social-link {
	background-color: var(--glass-surface-strong);
}

/* Le contour de mise au point doit rester visible sur l'encre. */
.asea-footer :is(a, button):focus-visible {
	outline: 2px solid var(--wp--preset--color--paper);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------- Paliers */

@media (min-width: 480px) {

	.asea-footer-nav-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 600px) {

	/* Le champ et le bouton se rejoignent sur une ligne, le consentement dessous. */
	.asea-footer .asea-newsletter-form {
		grid-template-columns: minmax(0, 1fr) max-content;
		align-items: end;
	}

	.asea-footer .asea-newsletter-form .asea-field {
		grid-column: 1;
		grid-row: 1;
	}

	.asea-footer .asea-newsletter-form .asea-btn {
		grid-column: 2;
		grid-row: 1;
	}

	.asea-footer .asea-newsletter-form .asea-consent {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

@media (min-width: 720px) {

	/* Au-dela du palier, l'entete redevient un simple titre. */
	.asea-footer-col-tete {
		min-height: 0;
		cursor: default;
		pointer-events: none;
	}

	.asea-footer-col-chevron {
		display: none;
	}
}

@media (min-width: 900px) {

	.asea-footer-haut-inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--6);
		align-items: stretch;
		padding-block: var(--wp--preset--spacing--7);
	}

	.asea-footer-nav-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--6) var(--wp--preset--spacing--4);
		padding-block: var(--wp--preset--spacing--7);
	}
}

/* asea-theme-pattern-hero */
/**
 * Hero d'accueil et hero de page interieure.
 *
 * L'accueil pose la photographie en image de fond, sous un voile degrade : le
 * texte reste lisible a gauche, les visages restent visibles a droite. Sans
 * photographie, un degrade de la palette tient la place.
 */

/* ------------------------------------------------------ Hero de couverture */

.asea-hero--cover {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 68vh;
	overflow: hidden;
	isolation: isolate;
}

.asea-hero--cover > * {
	margin-block: 0;
}

/*
 * Page interieure a photographie : entre la couverture d'accueil (68/78 vh) et
 * le hero court des objectifs (42 vh). Deux classes : la regle de la
 * couverture a 900 px, ecrite plus bas, l'emporterait sinon par l'ordre.
 */
.asea-hero--cover.asea-hero--moyen {
	min-height: 54vh;
}

/*
 * Hero pleine hauteur.
 *
 * Il occupe ce qui RESTE sous les deux barres, pas 100 vh de plus : la barre
 * du haut fait 40 px et la barre de navigation 64 px sous 1200 px, 80 px
 * au-dela. Sans cette soustraction, le bas du hero passe sous le pli et les
 * boutons ne se voient pas.
 *
 * `svh` plutot que `vh` : sur mobile, la barre d'adresse du navigateur fait
 * varier `vh` au defilement, et le hero sauterait a chaque fois. `vh` reste
 * declare juste avant, pour les navigateurs qui ignorent `svh`.
 *
 * Deux classes, parce que la regle de couverture a 900 px ecrite plus bas
 * l'emporterait sinon par l'ordre de la cascade.
 */
.asea-hero--cover.asea-hero--plein {
	min-height: calc(100vh - var(--topbar-height, 40px) - var(--header-height-mobile, 64px));
	min-height: calc(100svh - var(--topbar-height, 40px) - var(--header-height-mobile, 64px));
}

/*
 * Le hero tient dans l'ecran, y compris quand son texte est long.
 *
 * Le bloc de texte est borne (voir plus bas) : le chapo de l'accueil, le plus
 * long du site, passe de deux a trois lignes. Avec le remplissage de section
 * (jusqu'a 120 px en haut ET en bas), le hero de l'accueil depassait de 9 px la
 * fenetre de 1474 x 686 - la fenetre sur laquelle le client le juge. Le
 * remplissage vertical est donc plafonne a 14 % de la hauteur de la fenetre : il
 * ne change rien tant que la fenetre est haute (14 % de 900 px depasse deja
 * 120 px), et il cede sur les fenetres courtes. Le texte est centre dans le hero :
 * seuls les heros dont le contenu remplit toute la hauteur en sont touches.
 *
 * Deux classes : `.asea-section` pose le remplissage et vient d'une autre feuille.
 */
.asea-section.asea-hero--cover {
	padding-block: min(var(--section-padding-block), 14vh);
	padding-block: min(var(--section-padding-block), 14svh);
}

/* Les deux actions du hero : cote a cote, et qui passent a la ligne sans deborder. */
.asea-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
}

.asea-hero-actions .wp-block-buttons {
	margin-block: 0;
}

/* Repli sans photographie : jamais de zone vide. */
.asea-hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	background-image: linear-gradient(
		135deg,
		var(--wp--preset--color--earth) 0%,
		var(--wp--preset--color--ink) 100%
	);
}

.asea-hero-media .wp-block-image,
.asea-hero-media figure {
	height: 100%;
	margin: 0;
}

.asea-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Le cadrage privilegie les visages, situes dans le tiers superieur. */
	object-position: center 32%;
}

/*
 * Cadrage haut, a poser au cas par cas.
 *
 * Le cadrage par defaut retire une bande EN HAUT du cliche - 32 % du
 * depassement. Sur une photographie ou les visages touchent deja le bord
 * superieur, cette bande emporte les tetes. Ce modificateur ne retire alors
 * plus rien en haut : tout le depassement est pris en bas.
 *
 * ⛔ Ce n'est pas un reglage general : sur une photographie cadree normalement
 *    il ferait remonter le sujet trop haut. Regarder l'image avant de poser la
 *    classe, et verifier le rendu apres.
 *
 * Trois classes sur le selecteur, contre deux a la regle de base : le
 * modificateur l'emporte quel que soit l'ordre des feuilles.
 */
.asea-hero--cover.asea-hero--cadrage-haut .asea-hero-media img {
	object-position: center top;
}

/*
 * LE voile : un seul pseudo-element, UNE seule couleur, UNIFORME.
 *
 * Decision du client : un voile plat sur toute la hauteur et toute la largeur du
 * hero, meme opacite en haut, au milieu et en bas, a gauche comme a droite. Il
 * remplace un degrade horizontal, un masque vertical, une lueur de marque en
 * `::before` et une bande dense, qui se composaient a 0,67 d'opacite sur le
 * texte. Un voile qui s'eteint quelque part se voit comme une tache sur les
 * aplats de la photographie (le ciel, un mur) : un voile plat n'a ni bord ni
 * degrade a surveiller. Il n'en reste qu'un, et c'est la valeur du jeton
 * `--hero-veil` (theme.json), rien d'autre.
 *
 * ⛔ Ne PAS lui remettre de degrade ni de masque, meme « leger » : la sonde
 *    `11-sonde-heros.mjs` verifie que l'opacite effective est la meme partout.
 *
 * ⛔ L'opacite n'est PAS un choix de gout. Mesure sur les 17 heros a
 *    photographie, a quatre largeurs, sur le pire pixel de chaque ligne (titre,
 *    chapo, fil d'Ariane, aux deux extremes de la respiration de l'image), le
 *    minimum uniforme qui tient 4,5 va de 0,56 a 0,63 selon la page : 0,63 est la
 *    valeur unique qui les tient tous. Le plancher est physique : un texte blanc
 *    sur un pixel blanc exige un fond a 117/255 au plus, soit 0,59 d'encre.
 *    Alleger sans toucher au texte fait passer des lignes sous 4,5. Le chapo ne
 *    s'agrandit pas : sa typographie ne bouge pas.
 */
.asea-hero--cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: var(--hero-veil);
}

.asea-hero--cover .asea-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
}

.asea-hero--cover .asea-hero-title {
	color: var(--wp--preset--color--paper);
	/*
	 * Pas de dernier mot seul : `pretty` evite l'orphelin sans redistribuer les
	 * lignes (`balance` les egaliserait). Le titre n'est borne ni en lignes ni en
	 * hauteur : il passe a la ligne autant qu'il faut.
	 */
	text-wrap: pretty;
}

.asea-hero--cover .asea-hero-lead {
	color: var(--wp--preset--color--sand);
	/*
	 * Les lignes du chapo se repartissent : une borne de largeur seule laisse un
	 * mot ou deux (« 7. ») sur la derniere ligne selon la longueur du texte, et
	 * aucune largeur unique ne l'evite pour dix-sept chapos. Le navigateur qui ne
	 * connait pas `balance` garde le retour a la ligne ordinaire. Au-dela de six
	 * lignes (l'accueil sur un telephone) la repartition ne s'applique plus : limite
	 * du navigateur, consignee par la sonde.
	 */
	text-wrap: balance;
}

/* ------------------------------------------------------------- Corps commun */

.asea-hero-inner > * {
	margin-block: 0;
}

.asea-hero-body > * {
	margin-block: 0;
}

.asea-hero-body > * + * {
	margin-top: var(--wp--preset--spacing--3);
}

/*
 * Aucune mesure sur le titre : il casse ses lignes sur la largeur disponible,
 * sans borne en caracteres et sans `text-wrap: balance`, qui redistribuait les
 * lignes et reproduisait l'effet de colonne etroite.
 */
.asea-hero-title {
	max-width: none;
}

.asea-hero--page .asea-hero-title {
	max-width: none;
}

.asea-hero-lead {
	max-width: none;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
}

.asea-hero--page .asea-hero-lead {
	color: var(--wp--preset--color--ink-muted);
}

.asea-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin-top: var(--wp--preset--spacing--5);
}

.asea-hero-actions > *,
.asea-hero-actions .wp-block-buttons {
	margin-block: 0;
}

/*
 * Les reperes : deux ou trois faits verifiables poses sous le chapo, chacun
 * sur sa plaque. Ce sont des donnees (une date, un effectif, un numero
 * d'enregistrement), pas des sur-titres : ni capitales, ni couleur d'accent.
 * Deux classes, parce que `.asea-hero-body > * + *` en a une.
 */
.asea-hero-body .asea-hero-reperes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin: var(--wp--preset--spacing--4) 0 0;
	padding: 0;
	list-style: none;
}

.asea-hero-reperes .asea-hero-repere {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 6px var(--wp--preset--spacing--2);
	border: 1px solid var(--line);
	border-radius: var(--border-radius-main);
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* Sur une photographie, la plaque passe en verre et assombrit ce qu'elle couvre. */
.asea-hero--cover .asea-hero-repere {
	border-color: var(--glass-border);
	background-color: var(--glass-surface);
	color: var(--wp--preset--color--paper);
	backdrop-filter: blur(10px) brightness(0.6);
	-webkit-backdrop-filter: blur(10px) brightness(0.6);
}

/*
 * Fil d'Ariane masque : retire de l'affichage, conserve dans le balisage.
 *
 * Le client a demande de le supprimer de la fiche d'evenement (comme du
 * diaporama de l'agenda). Il reste lu par les moteurs de recherche et par les
 * lecteurs d'ecran : technique « lecteur d'ecran », jamais `display: none`.
 * Meme regle que `.asea-evt-hero__entete` (agenda-hero.css), sans marge
 * negative : la boite d'un pixel reste a l'interieur du hero.
 */
.asea-hero-fil-masque {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------ Fil d'Ariane */

.asea-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	margin-bottom: var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--ink-subtle);
	font-size: var(--wp--preset--font-size--small);
}

.asea-breadcrumb a {
	color: var(--wp--preset--color--ink-muted);
	text-decoration: none;
}

.asea-breadcrumb a:hover {
	color: var(--wp--preset--color--action-deep);
	text-decoration: underline;
}

.asea-breadcrumb-sep {
	color: var(--wp--preset--color--ink-subtle);
}

/*
 * Sur une photographie, le fil d'Ariane passe en clair. Mesure sur les pixels
 * composites de « Notre histoire » : 1,26:1 en gris encre, illisible.
 */
.asea-hero--cover .asea-breadcrumb,
.asea-hero--cover .asea-breadcrumb-sep {
	color: var(--wp--preset--color--sand);
}

.asea-hero--cover .asea-breadcrumb a {
	color: var(--wp--preset--color--paper);
}

.asea-hero--cover .asea-breadcrumb a:hover {
	color: var(--wp--preset--color--paper);
}

@media (min-width: 900px) {

	.asea-hero--cover {
		min-height: 78vh;
	}

	/*
	 * Le bloc de texte est BORNE (decision du client, sur la capture de
	 * « Mobilisation des ressources » : le chapo courait sur presque toute la
	 * largeur et laissait « 7. » seul sur sa seconde ligne - « reduis ce
	 * conteneur pour que les contenus tombent sur deux lignes »). Elle remplace
	 * la regle « aucun bridage », que le client a levee pour les heros.
	 *
	 * 55 rem (880 px) : le plus petit bloc ou les chapos de deux lignes y
	 * tiennent TOUS, sauf celui de l'accueil, qui en fait trois. La valeur n'est
	 * pas calculee : elle est le resultat d'un releve du nombre de lignes rendu
	 * (11-sonde-heros.mjs), a 1440 et 1024 px. En rem et non en pixels : le chapo
	 * grandit avec la police de l'utilisateur, le bloc aussi.
	 *
	 * Le titre n'est pas borne en lignes : il passe a la ligne autant qu'il faut.
	 * Sous 900 px le bloc garde toute la largeur de l'enveloppe.
	 *
	 * ⛔ Ce n'est plus le voile qui « porte la ligne » : le voile est uniforme sur
	 *    tout le hero, quelle que soit la largeur du texte.
	 */
	.asea-hero--cover .asea-hero-body {
		max-width: 55rem;
	}
}

/*
 * Respiration continue de l'image, propre au hero pleine hauteur.
 *
 * ⚠️ Le nom est DIFFERENT de `asea-hero-respire`, qui existe deja plus bas pour
 * la pose en douceur du hero d'accueil. Deux `@keyframes` de meme nom ne
 * cohabitent pas : la derniere declaree ecrase l'autre, en silence, et les deux
 * heros se retrouvent avec le meme mouvement.
 *
 * Ce n'est pas du parallaxe - rien n'est pilote par le defilement - et sous
 * « mouvement reduit » l'image ne bouge pas.
 *
 * L'entree du titre, du chapo et des actions n'est pas redeclaree ici : la
 * cascade `asea-hero-monte` du hero de couverture s'en charge deja, en CSS pur.
 * C'est volontaire : le H1 ne doit pas dependre d'un observateur pour
 * apparaitre.
 */
@media (prefers-reduced-motion: no-preference) {

	/*
	 * Trois classes, pas deux : la regle du hero de couverture, ecrite plus
	 * bas, vaut (0,2,1) comme celle-ci en aurait valu. A specificite egale
	 * c'est l'ordre qui tranche, et la sienne gagnait - mesure faite, l'image
	 * jouait encore la pose en 16 s au lieu de la respiration continue.
	 */
	.asea-hero--cover.asea-hero--plein .asea-hero-media img {
		animation: asea-hero-respire-continue 26s ease-in-out infinite alternate;
		will-change: transform;
	}
}

@keyframes asea-hero-respire-continue {

	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.07);
	}
}

@media (min-width: 1200px) {

	.asea-hero--cover.asea-hero--plein {
		min-height: calc(100svh - var(--topbar-height, 40px) - var(--header-height, 80px));
	}
}

/* --------------------------------------- Hero d'accueil : couleur et mouvement */

/*
 * Le CDC §4.7 fixe le vocabulaire et les limites : fondu et translation de
 * 12 px, aucun parallaxe, aucun defilement pilote, tout mouvement enveloppe
 * dans `prefers-reduced-motion: no-preference`, et surtout - la regle qui
 * decide de tout - l'etat par defaut du DOM est l'etat final. Sous « mouvement
 * reduit », rien ne bouge, et rien ne manque : les animations ci-dessous sont
 * toutes declarees en dehors de la cascade de base.
 *
 * Aucune de ces animations n'est liee au defilement : ce sont des entrees, pas
 * du parallaxe.
 */

/* Le contenu passe devant le voile, qui est la seule couche posee sur la photographie. */
.asea-hero--cover .asea-hero-inner {
	z-index: 2;
}

@media (prefers-reduced-motion: no-preference) {

	/*
	 * Respiration lente de la photographie : elle entre legerement agrandie et
	 * se pose. Seize secondes, une seule fois - assez lent pour ne jamais
	 * attirer l'oeil, assez present pour que l'image ne soit pas figee.
	 */
	.asea-hero--cover .asea-hero-media img {
		animation: asea-hero-respire 16s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}

	@keyframes asea-hero-respire {

		from {
			transform: scale(1.08);
		}

		to {
			transform: scale(1);
		}
	}

	/* Arrivee en cascade : chaque element monte de 12 px en apparaissant. */
	.asea-hero--cover .asea-hero-title,
	.asea-hero--cover .asea-hero-lead,
	.asea-hero--cover .asea-hero-actions {
		animation: asea-hero-monte 700ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}

	.asea-hero--cover .asea-hero-lead {
		animation-delay: 90ms;
	}

	.asea-hero--cover .asea-hero-actions {
		animation-delay: 180ms;
	}

	@keyframes asea-hero-monte {

		from {
			opacity: 0;
			transform: translateY(12px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	/* Les deux appels a l'action se soulevent au survol. */
	.asea-hero-actions .asea-btn,
	.asea-hero-actions .wp-block-button__link {
		transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
	}

	.asea-hero-actions .asea-btn:hover,
	.asea-hero-actions .wp-block-button__link:hover {
		transform: translateY(-2px);
	}
}

/* asea-theme-pattern-donation-tax */
/**
 * Appel au don et avantage fiscal - deux colonnes sur grand écran.
 */

.asea-tax-inner > * {
	margin-block: 0;
}

.asea-tax-body > * {
	margin-block: 0;
}

.asea-tax-body > * + * {
	margin-top: var(--wp--preset--spacing--3);
}

.asea-tax-note {
	padding-left: var(--wp--preset--spacing--2);
	border-left: 3px solid var(--wp--preset--color--ochre);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.asea-tax-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin-top: var(--wp--preset--spacing--4);
}

.asea-tax-actions > *,
.asea-tax-actions .wp-block-buttons {
	margin-block: 0;
}

.asea-tax-panel {
	margin-top: var(--wp--preset--spacing--5);
}

.asea-tax-list {
	padding-left: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.6;
}

.asea-tax-list li + li {
	margin-top: var(--wp--preset--spacing--1);
}

.asea-tax-list::marker,
.asea-tax-list li::marker {
	color: var(--wp--preset--color--brand-red);
}

@media (min-width: 900px) {

	.asea-tax-inner {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		align-items: start;
		gap: var(--wp--preset--spacing--6);
	}

	.asea-tax-panel {
		margin-top: 0;
	}
}

/* asea-theme-pattern-cta-band */
/**
 * Bandeau d'appel à l'action - fond encre, sur-titre ocre, titre blanc.
 * Le contraste du bouton fantôme sur fond sombre est traité explicitement :
 * les classes de palette du cœur ne suffisent pas.
 */

/* Largeur heritee de .asea-wrap, pose sur le meme element : aucune borne ici. */
.asea-cta-band-inner {
	text-align: center;
}

.asea-cta-band-inner > * {
	margin-block: 0;
}

.asea-cta-band-inner > * + * {
	margin-top: var(--wp--preset--spacing--3);
}

.asea-cta-band-title {
	color: var(--wp--preset--color--paper);
}

.asea-cta-band-lead {
	margin-inline: auto;
	max-width: none;
	color: var(--wp--preset--color--sand);
	line-height: 1.6;
}

/* ------------------------------------------------ Bandeau sur photographie */

/*
 * Meme construction que le hero : une couche image en fond, un voile par
 * dessus, le contenu au-dessus des deux.
 *
 * Le voile reste plus dense que le voile d'ensemble du hero, parce que le
 * texte du bandeau est centre, occupe toute la largeur et n'a aucun cote
 * sombre ou se refugier. Il ne peut pas non plus recevoir de bande : le texte
 * remplit la hauteur du bandeau.
 *
 * Il etait en revanche trop dense. Mesure sur les pixels composites reels,
 * boites de ligne serrees via Range :
 *   avant  0,74 a 0,68  plancher 6,65 (1 440 px) et 6,50 (390 px)
 *   apres  0,66 a 0,60  plancher 5,09 (1 440 px) et 4,95 (390 px)
 * soit une opacite moyenne de 0,63 au lieu de 0,71, la norme AA restant
 * tenue sur le titre, le chapo et le bouton.
 */
.asea-cta-band--photo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.asea-cta-band-media {
	position: absolute;
	z-index: 0;
	inset: 0;
	margin: 0;
}

.asea-cta-band-media .wp-block-image,
.asea-cta-band-media figure {
	height: 100%;
	margin: 0;
}

.asea-cta-band-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
}

.asea-cta-band--photo::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background-image: linear-gradient(
		180deg,
		rgba(20, 20, 20, 0.66) 0%,
		rgba(20, 20, 20, 0.6) 100%
	);
}

.asea-cta-band--photo .asea-cta-band-inner {
	position: relative;
	z-index: 2;
}

.asea-cta-band-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	margin-top: var(--wp--preset--spacing--5);
}

.asea-cta-band-actions > *,
.asea-cta-band-actions .wp-block-buttons {
	margin-block: 0;
}

/* Bouton fantôme posé sur fond sombre : filet et texte clairs, inversion au survol. */
.asea-btn-on-dark.wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--paper);
}

.asea-btn-on-dark.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.asea-btn-on-dark.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------- Parallaxe */

/*
 * La photographie du bandeau se decale lentement pendant que la section
 * traverse la fenetre.
 *
 * Aucun gestionnaire de defilement, aucune bibliotheque : c'est une animation
 * liee a la progression de la section dans la fenetre (`animation-timeline`).
 * Le navigateur la calcule sur le fil du compositeur ; un `scroll` ecoute en
 * JavaScript saccade des que la page travaille.
 *
 * ⛔ Tout est enferme dans `@supports` : la hauteur de 128 % n'a de sens que si
 *    le decalage existe. Sans la prise en charge, l'image reste a 100 % et le
 *    bandeau est celui d'avant - pas d'image etiree, pas de cadrage fausse.
 *
 * ⛔ Et sous « mouvement reduit », rien ne bouge : la regle entiere est dans la
 *    media query, pas seulement l'animation.
 */
@keyframes asea-parallaxe-bandeau {

	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-21.9%);
	}
}

@media (prefers-reduced-motion: no-preference) {

	@supports (animation-timeline: view()) {

		.asea-cta-band--photo .asea-cta-band-media img {
			height: 128%;
			animation: asea-parallaxe-bandeau linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
	}
}

/* asea-theme-pattern-don */
/**
 * Page « Faire un don » - un axe fixe et un flux mobile.
 *
 * Le parti : la colonne de gauche se fige pendant que les cinq objectifs
 * defilent a droite. La page cesse d'etre une pile de paragraphes de meme
 * largeur ; elle a une arete qui ne bouge pas et un contenu qui avance.
 *
 * ⛔⛔ MARGES DU COEUR - meme regle que formes.css.
 *
 * WordPress pose `margin-block-start: 24px` sur tout enfant a partir du second
 * via `:root :where(.is-layout-flow) > *`, qui vaut (0,1,0). Une remise a zero
 * ecrite en UNE classe est a EGALITE et perd sur l'ordre des feuilles. Toutes
 * les remises a zero ci-dessous portent donc DEUX classes.
 *
 * ⛔ Pas de lisere d'accent sur un bord, pas d'ombre portee : charte 4.6 et
 *    consigne client repetee quatre fois. Le survol est un lavis de fond, le
 *    meme vocabulaire que les cartes numerotees de `formes.css`, deja valide.
 */

/* --------------------------------------------------------------- Le flux */

.asea-don-flux > * {
	margin-block: 0;
}

.asea-don-intro > * {
	margin-block: 0;
}

.asea-don-intro > * + * {
	margin-top: var(--wp--preset--spacing--3);
}

/*
 * Le lien de la colonne fixe : souligne, jamais une fausse puce coloree. La
 * fleche est decorative et portee par un pseudo-element, pour qu'aucun
 * caractere parasite ne parte dans un lecteur d'ecran ni dans un copier-coller.
 */
.asea-don-lien {
	display: inline-block;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
	transition: color 200ms ease;
}

.asea-don-lien::after {
	content: "\2192";
	margin-left: 0.5em;
	text-decoration: none;
}

.asea-don-lien:hover,
.asea-don-lien:focus-visible {
	color: var(--wp--preset--color--brand-red);
}

/* ------------------------------------------------------------ Les cibles */

.asea-cibles {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: cible;
}

.asea-cibles > .asea-cible {
	margin-block: 0;
}

/*
 * Trois cases, pas quatre : l'ordinal et le titre partagent la premiere
 * rangee et sont alignes sur leur LIGNE DE BASE, le texte occupe la seconde
 * sous le titre. Aucun decalage cale a l'oeil - c'est la grille qui aligne.
 */
.asea-cible {
	position: relative;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	column-gap: var(--wp--preset--spacing--3);
	row-gap: var(--wp--preset--spacing--1);
	counter-increment: cible;
	padding: var(--wp--preset--spacing--4);
	border: 1px solid var(--line);
	border-radius: var(--border-radius-main);
	background-color: var(--wp--preset--color--paper-warm);
	overflow: hidden;
	transition: border-color 200ms ease, background-color 240ms ease;
}

/* Le lavis de survol vient du fond, il n'est pas pose sur un bord. */
.asea-cible::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	opacity: 0;
	background-image: radial-gradient(104% 84% at 0% 0%, rgba(237, 3, 3, 0.16) 0%, rgba(237, 3, 3, 0.02) 70%);
	transition: opacity 260ms ease;
}

.asea-cibles .asea-cible > * {
	position: relative;
	z-index: 1;
	margin-block: 0;
}

.asea-cible-rang {
	grid-column: 1;
	grid-row: 1;
	color: rgba(160, 103, 45, 0.48);
	font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
	line-height: 1;
	transition: color 240ms ease;
}

.asea-cible-rang::before {
	content: counter(cible, decimal-leading-zero);
}

.asea-cible-titre {
	grid-column: 2;
	grid-row: 1;
	color: var(--wp--preset--color--ink);
}

.asea-cible-titre a {
	color: inherit;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.asea-cible-titre a:hover,
.asea-cible-titre a:focus-visible {
	color: var(--wp--preset--color--brand-red);
}

.asea-cibles .asea-cible > .asea-cible-texte {
	grid-column: 2;
	grid-row: 2;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.6;
}

/* ------------------------------------------------------------- Survol */

@media (hover: hover) {

	.asea-cible:hover,
	.asea-cible:focus-within {
		border-color: rgba(237, 3, 3, 0.34);
		background-color: var(--wp--preset--color--sand);
	}

	.asea-cible:hover::after,
	.asea-cible:focus-within::after {
		opacity: 1;
	}

	.asea-cible:hover .asea-cible-rang,
	.asea-cible:focus-within .asea-cible-rang {
		color: var(--wp--preset--color--brand-red);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {

	.asea-cible {
		transition: border-color 200ms ease, background-color 240ms ease, transform 200ms ease;
	}

	.asea-cible:hover {
		transform: translateY(-2px);
	}
}

/* ------------------------------------------------------- Degrade anime */

/*
 * Le fond de section respire tres lentement : les deux foyers du degrade
 * derivent de quelques pour cent en trente-deux secondes. Aucune nouvelle
 * couleur, aucun mouvement perceptible a l'arret du regard - c'est ce qui
 * distingue une surface vivante d'un fond anime.
 *
 * Reserve au grand ecran et au mouvement non reduit : animer un fond plein
 * ecran sur telephone coute de la batterie pour un effet que personne ne voit.
 */
@keyframes asea-degrade-derive {

	from {
		background-position: 0% 0%, 100% 100%;
	}

	to {
		background-position: 22% 14%, 78% 86%;
	}
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {

	.asea-section--degrade.asea-degrade-anime {
		background-size: 170% 170%, 170% 170%;
		animation: asea-degrade-derive 32s ease-in-out infinite alternate;
	}
}

/* ------------------------------------------------------------- Paliers */

@media (min-width: 900px) {

	.asea-don-flux {
		display: grid;
		grid-template-columns: 5fr 7fr;
		gap: var(--wp--preset--spacing--6);
		align-items: start;
	}
}

/* asea-theme-pattern-dynamique */
/**
 * Vocabulaire dynamique du site - apparitions, colonne collante, frise animee.
 *
 * Reprend l'esprit des widgets « Scroll Accordion » et « Timeline Bullets »
 * d'Unlimited Elements, mais en blocs et CSS maison : aucune extension, aucune
 * bibliotheque, aucun defilement pilote image par image.
 *
 * REGLE DE FOND, heritee du CDC 4.7 et maintenue : l'etat par defaut du DOM est
 * l'etat final. Tout ce qui masque est pose par le script, et seulement sous
 * `prefers-reduced-motion: no-preference`. Script en panne, navigateur ancien,
 * mouvement reduit : la section est entiere et lisible, sans animation.
 */

/* ------------------------------------------------- Degrade de fond de section */

/*
 * Un degrade tres etale, pose en fond de section. Deux foyers seulement - le
 * sable chaud en haut a gauche, un souffle d'ocre en bas a droite - pour que la
 * section respire sans introduire de nouvelle couleur dans la charte.
 */
.asea-section--degrade {
	position: relative;
	isolation: isolate;
	background-image:
		radial-gradient(72% 60% at 4% 0%, rgba(242, 237, 229, 0.92) 0%, rgba(242, 237, 229, 0) 64%),
		radial-gradient(58% 54% at 100% 100%, rgba(160, 103, 45, 0.10) 0%, rgba(160, 103, 45, 0) 62%);
}

/* Sur fond encre, le meme principe avec les foyers de marque. */
.asea-section--degrade.has-ink-background-color {
	background-image:
		radial-gradient(64% 58% at 6% 4%, rgba(237, 3, 3, 0.16) 0%, rgba(237, 3, 3, 0) 62%),
		radial-gradient(60% 56% at 96% 100%, rgba(11, 79, 148, 0.22) 0%, rgba(11, 79, 148, 0) 64%);
}

/* ------------------------------------------------------- Colonne collante */

/*
 * La colonne de gauche se fige pendant que la colonne de droite defile. Elle ne
 * colle qu'a partir de 900 px, la ou les deux colonnes existent, et seulement
 * si elle est plus courte que la fenetre - sinon elle se bloquerait a mi-course.
 */
@media (min-width: 900px) {

	.asea-colonne-collante {
		position: sticky;
		top: calc(var(--header-height, 88px) + var(--wp--preset--spacing--5));
		align-self: start;
	}
}

/* --------------------------------------------------------- Frise animee */

/*
 * La frise se « remplit » au defilement : le filet de chaque jalon passe du gris
 * au rouge de marque quand le jalon entre dans le champ, et la pastille grandit.
 * L'effet est obtenu par une classe posee par l'observateur, pas par un calcul
 * de position au defilement : aucun gestionnaire de scroll, aucun à-coup.
 */
.asea-timeline--anime li {
	transition: border-left-color 520ms ease;
}

.asea-timeline--anime li::before {
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), background-color 420ms ease;
}

.asea-timeline--anime li.est-atteint {
	border-left-color: var(--wp--preset--color--brand-red);
}

.asea-timeline--anime li:last-child.est-atteint {
	border-left-color: transparent;
}

/* ------------------------------------------------------------ Apparitions */

@media (prefers-reduced-motion: no-preference) {

	/*
	 * `.asea-anime` est posee par le script sur le conteneur : sans script, les
	 * deux regles suivantes ne s'appliquent jamais et rien n'est masque.
	 */
	.asea-anime .asea-apparait {
		opacity: 0;
		transform: translateY(14px);
		transition:
			opacity 620ms ease,
			transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: calc(var(--asea-rang, 0) * 90ms);
	}

	.asea-anime .asea-apparait.est-visible {
		opacity: 1;
		transform: none;
	}

	/* La pastille de la frise naît du filet puis prend sa taille. */
	.asea-anime .asea-timeline--anime li::before {
		transform: scale(0.3);
		background-color: var(--line-strong);
	}

	.asea-anime .asea-timeline--anime li.est-atteint::before {
		transform: scale(1);
		background-color: var(--wp--preset--color--brand-red);
	}
}