/* 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-tokens */
/**
 * Tokens - alias courts vers les variables exposées par theme.json.
 * Source unique de vérité : theme.json. Aucune valeur littérale ici.
 */

:root {
	/* Rayons (theme.json → settings.custom) */
	--border-radius-main: var(--wp--custom--border-radius-main);
	--border-radius-avatar: var(--wp--custom--border-radius-avatar);

	/* Filets, focus, rythme vertical de section */
	--line: var(--wp--custom--line);
	--line-strong: var(--wp--custom--line-strong);
	--focus: var(--wp--custom--focus);
	--section-padding-block: var(--wp--custom--section-padding-block);

	/* Habillage : hauteurs d'en-tête, voile de la navigation mobile, ombre des menus */
	--header-height: var(--wp--custom--header-height);
	--header-height-mobile: var(--wp--custom--header-height-mobile);
	--topbar-height: var(--wp--custom--topbar-height);
	--overlay: var(--wp--custom--overlay);
	--trust-glow: var(--wp--custom--trust-glow);
	--hero-veil: var(--wp--custom--hero-veil);
	--agenda-card-veil: var(--wp--custom--agenda-card-veil);
	--card-veil: var(--wp--custom--card-veil);
	--card-warm: var(--wp--custom--card-warm);
	--impact-veil: var(--wp--custom--impact-veil);
	--footer-glow: var(--wp--custom--footer-glow);
	--text-on-dark: var(--wp--custom--text-on-dark);
	--text-on-dark-subtle: var(--wp--custom--text-on-dark-subtle);
	--glass-surface: var(--wp--custom--glass-surface);
	--glass-surface-strong: var(--wp--custom--glass-surface-strong);
	--glass-border: var(--wp--custom--glass-border);
	--glass-border-strong: var(--wp--custom--glass-border-strong);
	--shadow-menu: var(--wp--custom--shadow-menu);
}

/* asea-theme-reset */
/**
 * Reset moderne minimal.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	min-height: 100vh;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

ul[role="list"],
ol[role="list"] {
	list-style: none;
	padding: 0;
}

:where(:focus-visible) {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

/* asea-theme-base */
/**
 * Styles de base - éléments transverses et utilitaires fondamentaux.
 * Tout passe par les tokens theme.json (couleurs, tailles, espacements).
 */

/* Lien d'évitement (accessibilité) */
.asea-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border-radius: var(--border-radius-main);
	text-decoration: none;
}

.asea-skip-link:focus {
	left: var(--wp--preset--spacing--2);
	top: var(--wp--preset--spacing--2);
}

/* Contenu réservé aux technologies d'assistance */
.asea-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Un élément masqué le reste, quelle que soit la règle d'affichage de son composant */
[hidden] {
	display: none !important;
}

/*
 * L'écart de bloc du cœur fuit ENTRE LES RÉGIONS du gabarit : WordPress le pose
 * aussi entre l'en-tête, le contenu et le pied de page. Résultat, une bande
 * claire de 24 px sous la barre de navigation, juste avant le hero - visible
 * comme un défaut d'assemblage. L'espacement des régions appartient aux
 * sections elles-mêmes, jamais au squelette.
 */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block: 0;
}

/* Corps de page : de l'air entre l'en-tête, le titre et le contenu */
.asea-main {
	padding-block: var(--wp--preset--spacing--6) var(--section-padding-block);
}

.asea-page-header {
	margin-bottom: var(--wp--preset--spacing--5);
}

/* Page d'attente - provisoire, remplacée par l'accueil réel au lot 5 */
.asea-holding-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-holding-actions > *,
.asea-holding-actions .wp-block-buttons {
	margin-block: 0;
}

/* Rythme vertical de section */
.asea-section {
	padding-block: var(--section-padding-block);
}

/* Focus visible homogène sur tous les éléments interactifs */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Accueil : les sections portent leur propre rythme, le conteneur n'en ajoute pas */
.asea-main--flush {
	padding-block: 0;
}

/* 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-content */
/**
 * Fiches et archives - la présentation des contenus du modèle éditorial.
 *
 * Les données sont produites par les blocs de l'extension asea-content ; leur
 * mise en forme appartient au thème, comme tout le reste de la présentation.
 * Cette feuille n'est chargée que sur les vues qui en ont besoin.
 *
 * Aucune valeur littérale : couleurs, tailles, espacements et rayon viennent
 * tous des tokens de theme.json.
 */

/* ------------------------------------------------------------ Grilles de boucle */

/*
 * Le bloc de boucle du cœur rend une liste : ce sont les éléments de liste qui
 * deviennent les cases de la grille. Sans cette règle, les cartes ne s'étirent
 * pas et les grilles perdent leur alignement bas.
 */
.asea-grid.wp-block-post-template > li {
	display: flex;
	margin-block: 0;
}

.asea-grid.wp-block-post-template > li > * {
	width: 100%;
}

/* Le visuel de carte : figure du cœur, cadrée par le composant carte. */
.asea-card > .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 > .asea-card-media a {
	display: block;
}

/* ----------------------------------------------------------------- Étiquettes */

.asea-terms {
	color: var(--wp--preset--color--ink-subtle);
	font-size: var(--wp--preset--font-size--small);
}

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

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

/* Rubrique d'un article : une donnee de classement, pas un sur-titre. */
.asea-terms--meta {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.asea-terms--meta a {
	color: var(--wp--preset--color--ink-subtle);
}

.asea-terms--footer {
	margin-top: var(--wp--preset--spacing--5);
	padding-top: var(--wp--preset--spacing--3);
	border-top: 1px solid var(--line);
}

/* ------------------------------------------------- Informations d'un contenu */

/* En ligne : les repères qui accompagnent un titre, séparés par de l'air seul. */
.asea-meta--inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
}

.asea-meta-label {
	color: var(--wp--preset--color--ink-subtle);
}

/* En liste : le pavé de faits d'une fiche, posé à côté du texte. */
.asea-meta--list {
	box-sizing: border-box;
	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);
}

.asea-meta-title {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 600;
}

.asea-meta-rows {
	margin: 0;
}

.asea-meta--list .asea-meta-item + .asea-meta-item {
	margin-top: var(--wp--preset--spacing--3);
	padding-top: var(--wp--preset--spacing--3);
	border-top: 1px solid var(--line);
}

.asea-meta--list .asea-meta-label {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.asea-meta--list .asea-meta-value {
	margin: var(--wp--preset--spacing--1) 0 0;
	color: var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------------- Fiches */

.asea-single-media {
	margin: 0 0 var(--wp--preset--spacing--6);
	overflow: hidden;
	border-radius: var(--border-radius-main);
}

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

.asea-single-date {
	color: var(--wp--preset--color--ink-subtle);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Une seule colonne par défaut : c'est le cas mobile, et c'est aussi celui des
 * fiches sans informations latérales, où le texte doit occuper toute la largeur.
 */
.asea-single-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--6);
	align-items: start;
}

.asea-single-layout > * {
	margin-block: 0;
	min-width: 0;
}

/*
 * 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-single-body .wp-block-post-content > *:not(.alignwide):not(.alignfull) {
	max-width: none;
}

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

/* Un pavé de faits vide ne laisse rien derrière lui : la colonne disparaît. */
.asea-single-aside:not(:has(> *)) {
	display: none;
}

.asea-back-link {
	margin-top: var(--wp--preset--spacing--6);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

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

/* ------------------------------------------------------------ Bouton de champ */

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

.asea-action {
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--1);
}

.asea-action-meta {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	opacity: 0.85;
}

/* ------------------------------------------------------------------ Galerie */

.asea-gallery {
	margin-top: var(--wp--preset--spacing--7);
}

.asea-gallery-title {
	margin: 0 0 var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 600;
}

.asea-gallery-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--3);
}

/*
 * ⛔⛔ MARGES DU COEUR - a lire avant de toucher a la galerie.
 *
 * Quand la galerie est posee a la main dans une page (et non rendue par le bloc
 * `asea/content-gallery`), ses elements sont des blocs du coeur : WordPress
 * leur pose `margin-block-start: 24px` a partir du second, via
 * `:root :where(.is-layout-flow) > *`, qui vaut (0,1,0). Sur une grille, cette
 * marge decale les colonnes les unes par rapport aux autres.
 *
 * Les deux remises a zero portent DEUX classes : a une seule, elles seraient a
 * egalite avec la regle du coeur et perdraient sur l'ordre des feuilles.
 */
.asea-gallery .asea-gallery-grid > *,
.asea-section .asea-gallery > * {
	margin-block: 0;
}

.asea-gallery-item {
	margin: 0;
	overflow: hidden;
	border-radius: var(--border-radius-main);
	background-color: var(--wp--preset--color--sand);
}

.asea-gallery-item img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.asea-gallery-caption {
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * ------------------------------------------- La mosaique des actions (accueil)
 *
 * Le parti : une grille qui n'est PAS reguliere. Douze photographies de meme
 * taille se lisent comme un catalogue ; deux d'entre elles tenues sur quatre
 * cases donnent un rythme, et l'oeil entre par la. C'est le meme principe que
 * les postes d'un projet (postes.css) : des largeurs inegales, et jamais de
 * case vide.
 *
 * ⛔ PAS DE CASE VIDE, et c'est arithmetique, pas decoratif. A trois colonnes,
 *    deux grandes de 2x2 valent 8 cases et les dix autres en valent 10 : 18 au
 *    total, soit SIX rangees pleines. `dense` comble ensuite les creux que le
 *    placement laisserait. Changer le nombre de photographies ou de grandes
 *    casse ce compte : 12 photographies dont 2 grandes, ou refaire le calcul.
 *
 * ⛔ Sous 700 px les deux grandes PERDENT leur span : a deux colonnes, une
 *    image de 2x2 occuperait toute la largeur et ecraserait le rythme.
 */
.asea-mosaique {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: clamp(130px, 20vw, 210px);
	grid-auto-flow: dense;
	gap: var(--wp--preset--spacing--2);
}

/*
 * ⛔⛔ MARGES DU COEUR - meme regle que la galerie ci-dessus. Les elements sont
 *    des blocs du coeur : WordPress leur pose `margin-block-start` a partir du
 *    second via `:root :where(.is-layout-flow) > *`, qui vaut (0,1,0). Sur une
 *    grille, cette marge decale les colonnes. Les remises a zero portent DEUX
 *    classes pour ne pas etre a egalite avec la regle du coeur.
 */
.asea-gallery .asea-mosaique > *,
.asea-section .asea-mosaique > * {
	margin-block: 0;
}

.asea-mosaique-item {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--border-radius-main);
	background-color: var(--wp--preset--color--ink-muted);
}

.asea-mosaique-item img {
	display: block;
	width: 100%;
	height: 100%;
	/*
	 * Le cadrage remonte a 32 %, comme les heros et les cartes : sur une
	 * photographie de personnes, les visages sont dans le tiers haut, et un
	 * recadrage centre les coupe a mi-hauteur.
	 */
	object-fit: cover;
	object-position: center 32%;
	transition: transform 640ms ease, filter 400ms ease;
}

@media (min-width: 700px) {

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

	.asea-mosaique-grande {
		grid-column: span 2;
		grid-row: span 2;
	}
}

/*
 * Le survol : l'image respire et s'eclaircit legerement. Pas d'ombre portee ni
 * de lisere d'accent sur le bord - charte 4.6, comme les cartes de poste.
 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {

	.asea-mosaique-item:hover img,
	.asea-mosaique-item:focus-within img {
		transform: scale(1.06);
		filter: brightness(1.08);
	}
}

/*
 * ⛔⛔ QUI CHANGE LE FOND REDECLARE LES COULEURS. Cette section est la seule du
 *    site posee sur `ink` ; partout ailleurs ce composant vit sur du papier.
 *    Le lien de fin y heritait la couleur d'action (le rouge de la marque),
 *    pensee pour un fond clair : mesuree a **1,92** sur le noir, quand le
 *    plancher est 4,5. Autrement dit un lien que personne ne lit.
 *
 *    C'est le meme defaut qu'un composant colore descendu dans un pied de page
 *    sombre. Une couleur heritee n'est jamais sure : elle depend d'un contexte
 *    que la section vient justement de changer.
 *
 *    `sand` sur `ink` donne 15,6. Le survol passe au blanc pur.
 */
.asea-actions-galerie .asea-gallery-suite a {
	color: var(--wp--preset--color--sand);
	text-underline-offset: 0.2em;
}

.asea-actions-galerie .asea-gallery-suite a:hover,
.asea-actions-galerie .asea-gallery-suite a:focus-visible {
	color: var(--wp--preset--color--paper);
}

.asea-actions-galerie .asea-gallery-lead {
	margin-block: var(--wp--preset--spacing--2) var(--wp--preset--spacing--5);
}

.asea-actions-galerie .asea-gallery-suite {
	margin-block-start: var(--wp--preset--spacing--5);
}

/* ------------------------------------------------------------ Contenus liés */

.asea-related-title {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 600;
}

.asea-single-aside .asea-partners-logos {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --------------------------------------------------------------- Agenda */

.asea-agenda-group + .asea-agenda-group {
	margin-top: var(--wp--preset--spacing--7);
}

.asea-agenda-group-title {
	margin: 0 0 var(--wp--preset--spacing--5);
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 600;
}

/*
 * Les rendez-vous passés forment une bande à eux, sur le sable : la page ne
 * montre jamais deux sections de même fond l'une sous l'autre (`paper-warm`,
 * à un cheveu du blanc, ne se verrait qu'au colorimètre).
 *
 * Le bloc rend les deux groupes dans UNE section : la bande pleine largeur est
 * donc fabriquée sur le groupe lui-même. Un `box-shadow` étalé de 100vmax
 * peint le fond de part et d'autre de l'enveloppe, et `clip-path` le recoupe
 * aux bords haut et bas du groupe - une ombre déborde dans les quatre
 * directions, et sans ce recoupage elle teindrait aussi la section voisine.
 * Contrairement à un pseudo-élément large, elle ne crée aucun défilement
 * horizontal : une ombre n'entre pas dans le débordement défilable.
 *
 * ⛔ La section parente perd son espace bas : le sable va jusqu'à son pied,
 *    et c'est le groupe qui porte l'espace de section. Sans cela, une bande de
 *    papier de 80 à 120 px sépare le sable du pied de page.
 */
.asea-agenda:has(.asea-agenda-group--passes) {
	padding-bottom: 0;
}

.asea-agenda-group.asea-agenda-group--passes {
	padding-block: var(--section-padding-block);
	background-color: var(--wp--preset--color--sand);
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--sand);
	clip-path: inset(0 -100vmax);
}

/* ------------------------------------------------------------- Ressources */

.asea-resource-group + .asea-resource-group {
	margin-top: var(--wp--preset--spacing--7);
}

.asea-resource-group-title {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 600;
}

/* --------------------------------------------------------------- Recherche */

.asea-search-form {
	margin-top: var(--wp--preset--spacing--4);
	max-width: 520px;
}

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

.asea-result {
	padding-block: var(--wp--preset--spacing--4);
	border-bottom: 1px solid var(--line);
}

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

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

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

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

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

/* ------------------------------------------------- Absence de contenu */

/*
 * Une archive vide reste une page demandée par le visiteur : elle lui doit une
 * phrase, pas une page blanche. C'est l'inverse des sections d'une page composée,
 * qui disparaissent entièrement faute de contenu.
 */
.asea-empty {
	max-width: none;
	color: var(--wp--preset--color--ink-muted);
}

/* Un champ lié resté vide ne laisse aucune trace visible. */
.asea-quote-text:empty,
.asea-quote-author:empty {
	display: none;
}

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

.asea-quote--card {
	margin: 0;
}

/*
 * Le séparateur du cœur impose sa largeur de 100 px par une règle à trois
 * classes ; le filet d'accent du projet en fait 48. Combiner les deux classes
 * suffit à passer devant, sans recourir à une déclaration impérative.
 */
.wp-block-separator.asea-rule {
	width: 48px;
	height: 3px;
	border: 0;
	background-color: var(--wp--preset--color--brand-red);
}

/* ------------------------------------- Emplacement préparé, éditeur seulement */

/*
 * Ces règles ne servent que dans l'éditeur : sur le site, le bloc ne rend rien
 * tant que la section n'a pas été déclarée prête. Elles rendent le chantier
 * visible au rédacteur sans jamais l'exposer au visiteur.
 */
.asea-editor-draft {
	padding: var(--wp--preset--spacing--3);
	border: 1px dashed var(--line-strong);
	border-radius: var(--border-radius-main);
	background-color: var(--wp--preset--color--sand);
}

.asea-editor-draft-flag {
	margin: 0 0 var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--earth);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.asea-editor-draft-note {
	margin: 0 0 var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
}

@media (min-width: 600px) {

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

@media (min-width: 1000px) {

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

	/*
	 * La colonne latérale n'apparaît que sur grand écran, et seulement si elle a
	 * quelque chose à porter : `:has` évite une colonne fantôme sur les fiches
	 * dont aucun champ n'est renseigné.
	 */
	.asea-single-layout:has(> .asea-single-aside > *) {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--wp--preset--spacing--6);
	}
}


/* ========================================================== RUBRIQUE ACTUALITÉS */

/* ------------------------------------------------------- Repères sur photographie */

/*
 * ⛔⛔ La rubrique et la date du héros d'article sont des `.asea-terms` et des
 *    `.asea-single-date` : deux composants dont la couleur est encrée, pensée
 *    pour du texte sur papier. Posés sur une photographie sombre, ils tombent à
 *    un contraste de l'ordre de 1,5 - lisibles nulle part.
 *
 * ⭐ La couleur est donc DÉCLARÉE ici pour ce contexte, jamais héritée : le
 *    sable est celui du chapô, déjà mesuré sur les quatorze héros du site.
 *
 * Deux classes au sélecteur, contre une à `.asea-terms` : le contexte l'emporte
 * quel que soit l'ordre des feuilles.
 */
.asea-hero--cover .asea-article-reperes,
.asea-hero--cover .asea-article-reperes a {
	color: var(--wp--preset--color--sand);
}

.asea-hero--cover .asea-article-reperes a:hover,
.asea-hero--cover .asea-article-reperes a:focus-visible {
	color: var(--wp--preset--color--paper);
	text-decoration: underline;
}

.asea-hero--cover .asea-article-reperes {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* ----------------------------------- Fiche d'évènement : repères sur photographie */

/*
 * ⛔⛔ Le type (`.asea-terms--meta`) et la date et le lieu (`.asea-meta--inline`)
 *    du héros d'une fiche d'évènement ont une couleur encrée, pensée pour du
 *    texte sur papier. Posés sur la photographie voilée, ils seraient
 *    illisibles, et un texte qui HÉRITE sa couleur d'un contexte clair devient
 *    invisible le jour où le contexte change.
 *
 * ⭐ La couleur est DÉCLARÉE ici pour ce contexte, jamais héritée : le sable du
 *    chapô, déjà mesuré sur les héros à photographie. Deux classes au sélecteur,
 *    contre une aux composants : le contexte l'emporte quel que soit l'ordre des
 *    feuilles.
 */
.asea-hero--cover .asea-terms--meta,
.asea-hero--cover .asea-terms--meta a,
.asea-hero--cover .asea-meta--inline,
.asea-hero--cover .asea-meta--inline .asea-meta-label,
.asea-hero--cover .asea-meta--inline .asea-meta-item {
	color: var(--wp--preset--color--sand);
}

.asea-hero--cover .asea-terms--meta a:hover,
.asea-hero--cover .asea-terms--meta a:focus-visible {
	color: var(--wp--preset--color--paper);
	text-decoration: underline;
}

/* ------------------------------------------------------- Carte d'actualité */

/*
 * La carte d'actualité est COURTE. Trois leviers, aucun bricolage :
 *
 *   1. une photographie plus basse - 16/9 au lieu de 16/10, soit un sixieme de
 *      hauteur en moins sur l'element le plus haut de la carte ;
 *   2. un titre en h4 plutot qu'en h3, borne a trois lignes ;
 *   3. un resume borne a trois lignes, et coupe a dix-huit mots a la source.
 *
 * ⛔ Les bornes de lignes ne REMPLACENT pas la coupe du resume : `line-clamp`
 *    cache le debordement, il ne l'empeche pas. Un resume de quarante mots
 *    resterait dans le document, lu par les moteurs et les lecteurs d'ecran.
 *    La coupe se fait d'abord a la source, dans le gabarit.
 *
 * ⛔ Aucun bridage de largeur ici : les trois lignes sont une hauteur, pas une
 *    mesure en caracteres. La carte, elle, occupe toute sa colonne.
 *
 * ⛔ Cette carte n'est PLUS celle de l'agenda. La carte d'evenement est une
 *    photographie pleine carte, decrite plus bas sous `asea-card--evenement` :
 *    les regles ci-dessous ne la nomment plus, et rien de ce qui est ecrit pour
 *    l'une ne doit atteindre l'autre. Le titre d'evenement, en particulier,
 *    n'est borne par rien.
 */
.asea-card.asea-card--article > .asea-card-media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

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

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

/*
 * Le corps prend la hauteur restante pour que la date puisse se caler en bas :
 * d'une carte a l'autre, les dates tombent alors sur la meme ligne, meme quand
 * les titres n'ont pas le meme nombre de lignes. C'est ce qui fait tenir la
 * rangee ensemble.
 */
.asea-card.asea-card--article > .asea-card-corps {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.asea-card.asea-card--article .asea-card-title {
	display: -webkit-box;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--h-4);
	line-height: 1.35;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
}

.asea-card.asea-card--article .asea-card-text {
	display: -webkit-box;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
}

.asea-card-rubrique {
	color: var(--wp--preset--color--action-deep);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

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

.asea-card-rubrique a:hover {
	text-decoration: underline;
}

/*
 * La date passe APRÈS le texte : sur une actualité, c'est une précision, pas une
 * entrée en matière. Le titre reste la première chose lue.
 */
.asea-card.asea-card--article .asea-card-meta {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--ink-subtle);
	font-size: var(--wp--preset--font-size--small);
}

/* -------------------------------------------------------- Carte d'évènement */

/*
 * La carte entière est le lien. Un seul `<a>` enveloppe la photographie, le
 * voile et le texte ; la structure est celle de la carte unique de La Loco,
 * a un ordre pres : le type se lit AU-DESSUS du titre.
 *
 *   a.asea-card--evenement
 *     span.asea-card-fond  > img.asea-card-img   (la photographie, alt vide)
 *     span.asea-card-voile                       (le voile, un element dedie)
 *     div.asea-card-txt    > rubrique, titre, date
 *
 * Tout est ecrit sous `asea-card--evenement`, jamais sur `.asea-card` nue :
 * le composant est partage avec les actualites.
 *
 * ⛔ La carte ne porte PAS `overflow: hidden`. Avec un rapport d'image, c'est
 *    ce qui lui donnerait une hauteur minimale nulle : un titre long ne
 *    l'agrandirait plus, il serait COUPE. Le rapport fixe la hauteur de base
 *    et la carte grandit quand le texte l'exige ; c'est la photographie, dans
 *    son cadre `asea-card-fond`, qui est rognee.
 *
 * ⛔ Le titre n'est borne ni en lignes ni en hauteur. Un titre coupe est un
 *    titre qu'on ne lit pas.
 *
 * ⛔ Le texte DECLARE sa couleur : il pose sur une photographie, et la couleur
 *    heritee du contexte clair de la carte d'actualite le rendrait illisible.
 *
 * ⛔ Le voile est unique, et c'est `--agenda-card-veil`, PROPRE a cette carte.
 *    Ce n'est pas `--card-veil` : celui-la est partage avec les cartes
 *    d'objectifs de l'accueil, mesurees entre 5,6 et 6,7 de contraste, donc sans
 *    exces a retirer. Un jeton alleger pour l'agenda aurait abime ces pages.
 *    Aucune autre couche ne se superpose a l'image.
 *
 * Deux classes sur chaque selecteur : les remises a zero de la carte nue
 * (`.asea-card > * + *`) et la regle du coeur valent une classe, et
 * l'emporteraient sinon sur l'ordre des feuilles.
 */
.asea-card.asea-card--evenement {
	position: relative;
	isolation: isolate;
	justify-content: flex-end;
	height: auto;
	padding: 0;
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

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

.asea-card.asea-card--evenement .asea-card-fond {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	overflow: hidden;
	border-radius: inherit;
	/* Repli sans photographie : jamais de zone vide. */
	background-image: linear-gradient(
		135deg,
		var(--wp--preset--color--earth) 0%,
		var(--wp--preset--color--ink) 100%
	);
}

.asea-card.asea-card--evenement .asea-card-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

.asea-card.asea-card--evenement .asea-card-voile {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	border-radius: inherit;
	background-image: var(--agenda-card-veil);
	pointer-events: none;
}

.asea-card.asea-card--evenement .asea-card-txt {
	position: relative;
	z-index: 2;
	padding: var(--wp--preset--spacing--3);
}

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

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

.asea-card.asea-card--evenement .asea-card-rubrique {
	color: var(--wp--preset--color--paper);
}

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

.asea-card.asea-card--evenement .asea-card-meta {
	margin-top: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Le rapport est le meme pour toutes les cartes a une largeur donnee : carre
 * sur une colonne, plus large sur deux, portrait sur trois. Il ne fait que
 * fixer la hauteur de depart.
 */
.asea-card.asea-card--evenement {
	aspect-ratio: 1 / 1;
}

@media (min-width: 600px) {

	.asea-card.asea-card--evenement {
		aspect-ratio: 16 / 10;
	}
}

@media (min-width: 900px) {

	.asea-card.asea-card--evenement {
		aspect-ratio: 4 / 5;
	}
}

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

	.asea-card.asea-card--evenement .asea-card-img {
		transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.asea-card.asea-card--evenement:hover .asea-card-img,
	.asea-card.asea-card--evenement:focus-visible .asea-card-img {
		transform: scale(1.04);
	}

	/* La couleur revient en fondu : c'est un changement de couleur, pas un mouvement. */
	.asea-agenda-group--passes .asea-card.asea-card--evenement .asea-card-img {
		transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 400ms ease;
	}
}

/*
 * Les rendez-vous passés : photographies en niveaux de gris, la couleur ne
 * revenant qu'au survol et au focus clavier (la carte entière est un lien).
 *
 * ⛔ La désaturation n'existe QUE là où un survol existe. Un téléphone n'a pas
 *    de survol : sans cette condition, un visiteur au doigt ne verrait jamais
 *    la couleur de ces photographies, et c'est le plus grand nombre. Au doigt,
 *    les images restent en couleur.
 *
 * ⛔ Sous « mouvement réduit », aucune durée : le changement de couleur se
 *    fait, instantané. La transition n'est déclarée que pour « mouvement non
 *    réduit », plus haut.
 *
 * Cela ne concerne que le groupe des passés : les prochains rendez-vous et les
 * actualités gardent leurs couleurs. Le voile et la couleur des textes sont
 * ceux de la carte, mesurés dans les DEUX états (gris et couleur) : un niveau
 * de gris éclaircit une zone sombre et saturée.
 */
@media (hover: hover) and (pointer: fine) {

	.asea-agenda-group--passes .asea-card.asea-card--evenement .asea-card-img {
		filter: grayscale(1);
	}

	.asea-agenda-group--passes .asea-card.asea-card--evenement:hover .asea-card-img,
	.asea-agenda-group--passes .asea-card.asea-card--evenement:focus-visible .asea-card-img {
		filter: none;
	}
}

/* --------------------------------------------------------- Fiche d'actualité */

/*
 * Une seule colonne par défaut : le sommaire et le partage viennent AVANT le
 * texte, dans l'ordre du document. C'est voulu - sur téléphone, un sommaire
 * placé après l'article n'a plus d'objet, et au clavier il donne accès aux
 * sections sans traverser tout le corps.
 */
.asea-article-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--6);
	align-items: start;
}

.asea-section .asea-article-layout > * {
	margin-block: 0;
	min-width: 0;
}

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

.asea-article-cote > * + * {
	margin-top: var(--wp--preset--spacing--5);
}

/* Les deux blocs du côté s'effacent quand ils n'ont rien à dire : la colonne suit. */
.asea-article-layout > .asea-article-cote:not(:has(> *)) {
	display: none;
}

/*
 * Aucun bridage de largeur : le texte occupe la largeur de sa colonne.
 * Demande client du 9 octobre 2026, valable sur tout le site.
 */
.asea-article-corps .wp-block-post-content > *:not(.alignwide):not(.alignfull) {
	max-width: none;
}

/*
 * ⛔ L'ancre d'un intertitre passe sous l'en-tête fixe si rien ne l'en écarte.
 *    `scroll-margin-top` déplace le point d'arrêt, pas l'élément : la mise en
 *    page n'en est pas touchée.
 */
.asea-article-corps :is(h2, h3)[id] {
	scroll-margin-top: calc(var(--header-height, 88px) + var(--wp--preset--spacing--4));
}

/* ------------------------------------------------------- Lectures voisines */

/*
 * ⛔ Pas de bandeau VIDE. La section `asea-voisins-section` est posée par le
 *    gabarit de l'article (`single-post.html`), le bloc qui la remplit rend `''`
 *    quand l'article n'a ni précédent ni suivant : la section gardait alors son
 *    fond sable, et se lisait comme un bandeau vide au-dessus du pied de page.
 *    Cela arrive dès que le site n'a qu'un seul article (c'est le cas depuis que
 *    les trois évènements ne sont plus des articles).
 *
 * ⭐ La section ne se rend pas quand elle ne contient rien. Même patron que le
 *    pied de page (`footer.css`) : la règle est dans `@supports selector(:has())`,
 *    et un navigateur qui ignore `:has()` retombe sur l'ancien comportement (le
 *    bandeau), jamais sur une section masquée à tort.
 */
@supports selector(:has(*)) {

	.asea-voisins-section:not(:has(.asea-voisins)) {
		display: none;
	}
}

.asea-voisins-titre {
	margin: 0 0 var(--wp--preset--spacing--5);
}

.asea-voisins-grille {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--4);
}

.asea-voisins .asea-voisin {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--4);
	border-radius: var(--border-radius-main);
	background-color: var(--wp--preset--color--paper);
}

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

.asea-voisin-rubrique {
	color: var(--wp--preset--color--action-deep);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.asea-voisin-titre {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
}

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

.asea-voisin-titre a:hover,
.asea-voisin-titre a:focus-visible {
	color: var(--wp--preset--color--action-deep);
	text-decoration: underline;
}

.asea-voisin-date {
	margin-top: auto;
	color: var(--wp--preset--color--ink-subtle);
	font-size: var(--wp--preset--font-size--small);
}

@media (min-width: 700px) {

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

@media (min-width: 1000px) {

	/*
	 * Le côté passe à gauche et devient collant. `:has` évite la colonne
	 * fantôme sur un article trop court pour avoir un sommaire : dans ce cas
	 * les deux blocs sont vides et le texte reprend toute la largeur.
	 */
	.asea-article-layout:has(> .asea-article-cote > *) {
		grid-template-columns: 300px minmax(0, 1fr);
		gap: 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-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-offres */
/**
 * Offres d'emploi - la liste et la fiche.
 *
 * La carte reprend ce qu'un candidat lit en premier : l'etat de l'offre, le
 * poste, un resume, puis les faits (contrat, duree, lieu, teletravail,
 * deplacements, remuneration, date limite) en grille a deux colonnes, les
 * competences en etiquettes, et le lien vers la fiche. Deux cartes par rangee
 * sur grand ecran : trois ecraseraient la grille des faits.
 *
 * ⚠️ Les marges internes portent DEUX classes : la carte de base pose
 * `> * + * { margin-top }` a une classe, et un selecteur a une seule classe
 * ferait jeu egal avec elle.
 */

/* ------------------------------------------------------------------ Liste */

.asea-offres-groupe + .asea-offres-groupe {
	margin-top: var(--wp--preset--spacing--7);
}

.asea-offres-groupe-titre {
	margin: 0 0 var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 600;
	line-height: 1.25;
}

.asea-offres-liste {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--3);
}

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

/* ------------------------------------------------------------------ Carte */

.asea-offre .asea-offre-etat {
	margin: 0;
}

/* L'etat : une plaque. A pourvoir en ocre ; close ou pourvue en sable, sans accent. */
.asea-offre-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--sand);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

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

.asea-offre .asea-offre-titre {
	margin: var(--wp--preset--spacing--2) 0 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 600;
	line-height: 1.25;
}

.asea-offre-titre .asea-card-link {
	color: inherit;
	text-decoration: none;
}

.asea-offre-titre .asea-card-link:hover,
.asea-offre-titre .asea-card-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.asea-offre .asea-offre-resume {
	margin: var(--wp--preset--spacing--2) 0 0;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.6;
}

/* Les faits, en grille a deux colonnes sur la nappe chaude. */
.asea-offre .asea-meta--list {
	margin: var(--wp--preset--spacing--4) 0 0;
	padding: var(--wp--preset--spacing--3);
}

/* Une colonne sous 600 px : a 93 px, « Date limite de candidature » tenait sur trois lignes. */
.asea-offre .asea-meta-rows {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--2);
}

.asea-offre .asea-meta--list .asea-meta-item {
	margin: 0;
	padding: 0;
	border: 0;
}

.asea-offre .asea-meta--list .asea-meta-label {
	color: var(--wp--preset--color--ink-subtle);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.asea-offre .asea-meta--list .asea-meta-value {
	margin: 2px 0 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* Les competences : des etiquettes, jamais des liens. */
.asea-offre .asea-offre-etiquettes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--1);
	margin: var(--wp--preset--spacing--3) 0 0;
	padding: 0;
	list-style: none;
}

.asea-offre-etiquette {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 3px var(--wp--preset--spacing--1);
	border: 1px solid var(--line);
	border-radius: var(--border-radius-main);
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Le pied se cale en bas : tous les liens d'une rangee s'alignent. */
.asea-offre .asea-offre-pied {
	margin: auto 0 0;
	padding-top: var(--wp--preset--spacing--4);
}

.asea-offre-lien {
	display: inline-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;
	text-decoration: none;
}

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

.asea-offre-fleche {
	display: inline-block;
	transition: transform 200ms ease;
}

/* ------------------------------------------------------------------ Fiche */

/* Une offre close ou pourvue n'a pas de bouton : la plaque d'etat le dit. */
.asea-offre-fermee {
	margin: var(--wp--preset--spacing--3) 0 0;
}

.asea-single-aside .asea-offre-fermee {
	margin: 0;
}

/* -------------------------------------------------------------- Mouvement */

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

	.asea-offre:hover .asea-offre-fleche {
		transform: translateX(4px);
	}
}

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

@media (min-width: 600px) {

	.asea-offre .asea-meta-rows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--3);
	}
}

@media (min-width: 900px) {

	.asea-offres-liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--4);
	}
}

/* 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);
	}
}