/* 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-trust */
/**
 * Bandeau de reassurance - « Pourquoi nous faire confiance ? »
 *
 * Quatre plaques de verre sur fond encre. Le verre ne se voit que s'il a
 * quelque chose a filtrer : c'est le role des deux nappes chaudes peintes sous
 * les plaques. Sur un aplat noir uniforme, un `backdrop-filter` ne produit rien
 * de visible - la lecon coute cher a apprendre deux fois.
 *
 * Ces nappes sont MONOCHROMES, terre puis ocre. Un premier essai opposait le
 * rouge de marque au bleu : deux teintes franches et contraires sur du noir ne
 * font pas un fond haut de gamme, elles font un fond de jeu video. Deux valeurs
 * d'une meme famille chaude tiennent le registre institutionnel.
 *
 * Toutes les valeurs viennent des tokens de theme.json, y compris les surfaces
 * translucides du verre : aucune couleur en dur ici.
 */

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

/* Les lueurs : ce que le verre va filtrer. */
.asea-trust-glow {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--trust-glow);
	pointer-events: none;
}

/*
 * L'ecart entre l'introduction et les cartes est porte par le `gap` de la
 * grille, jamais par une marge : l'enveloppe du site remet a zero les marges
 * verticales de ses enfants directs (`.asea-wrap > *`), et cette remise a zero
 * s'appliquait APRES la marge posee ici - l'air tombait a zero sans que rien ne
 * le signale. Un `gap` echappe entierement a ce jeu de cascade.
 */
.asea-trust-inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--wp--preset--spacing--6);
}

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

.asea-trust-head {
	max-width: none;
}

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

/*
 * Pas de sur-titre : le titre porte seul la question, et la phrase qui suit y
 * repond. Une etiquette en capitales au-dessus n'ajouterait rien.
 */
.asea-trust-title {
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 600;
	line-height: 1.25;
}

.asea-trust-lead {
	margin-top: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--sand);
	line-height: 1.6;
}

.asea-trust-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

/* La plaque de verre. */
.asea-trust-card {
	position: relative;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--4);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius-main);
	background-color: var(--glass-surface);
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	transition: background-color 260ms ease, border-color 260ms ease, transform 260ms ease;
}

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

/*
 * Le reflet : une bande claire tres diffuse en haut de la plaque, qui donne au
 * verre son epaisseur. Un simple degrade, aucun filtre supplementaire.
 */
.asea-trust-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--border-radius-main);
	background-image: linear-gradient(160deg, var(--glass-surface-strong) 0%, transparent 46%);
	pointer-events: none;
}

.asea-trust-picto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--wp--preset--spacing--3);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius-main);
	background-color: var(--glass-surface-strong);
	color: var(--wp--preset--color--paper);
}

/*
 * Sur fond sombre, le rouge de marque de l'accent tombe sous le seuil : les
 * pictogrammes de cette section portent leur accent en sable.
 */
.asea-trust-picto .asea-picto-accent {
	stroke: var(--wp--preset--color--sand);
}

.asea-trust-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-trust-card-text {
	margin-top: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--sand);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

@media (min-width: 600px) {

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

@media (min-width: 1000px) {

	.asea-trust-inner {
		gap: var(--wp--preset--spacing--7);
	}

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

/*
 * Mouvement. Le CDC §4.7 impose que l'etat par defaut du DOM soit l'etat final :
 * c'est le script qui pose `is-revealing` sur la section, et lui seul. Sans
 * JavaScript, ou sous « mouvement reduit », tout est visible d'emblee.
 */
@media (prefers-reduced-motion: no-preference) {

	.asea-trust.is-revealing [data-asea-reveal] {
		opacity: 0;
		transform: translateY(12px);
		transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.asea-trust.is-revealing [data-asea-reveal].is-visible {
		opacity: 1;
		transform: none;
	}

	/* La cascade : chaque plaque suit la precedente d'un dixieme de seconde. */
	.asea-trust.is-revealing [data-asea-reveal-rang="1"] {
		transition-delay: 60ms;
	}

	.asea-trust.is-revealing [data-asea-reveal-rang="2"] {
		transition-delay: 160ms;
	}

	.asea-trust.is-revealing [data-asea-reveal-rang="3"] {
		transition-delay: 260ms;
	}

	.asea-trust.is-revealing [data-asea-reveal-rang="4"] {
		transition-delay: 360ms;
	}

	.asea-trust-card:hover {
		border-color: var(--glass-border-strong);
		background-color: var(--glass-surface-strong);
		transform: translateY(-2px);
	}
}

/* Sous « mouvement reduit », le survol change la matiere, jamais la position. */
@media (prefers-reduced-motion: reduce) {

	.asea-trust-card:hover {
		border-color: var(--glass-border-strong);
		background-color: var(--glass-surface-strong);
	}
}

/* asea-blocks */
/**
 * Styles des trois blocs ASEA.
 *
 * Tout passe par les tokens exposés par theme.json : la feuille ne fixe ni
 * couleur, ni taille de police, ni espacement en dur, et suit donc la charte
 * sans la dupliquer.
 */

/* ------------------------------------------------ Simulateur de coût du don */

.asea-calc {
	padding: var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--custom--line);
	border-radius: var(--wp--custom--border-radius-main);
	background-color: var(--wp--preset--color--paper);
}

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

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

/*
 * Le titre interne du simulateur est depose : chaque page qui pose ce bloc
 * porte deja son H2 au-dessus, et le visiteur lisait la meme phrase deux fois.
 */

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

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

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

/* Le résultat est la raison d'être du bloc : il porte le poids typographique. */
.asea-calc-result:empty {
	display: none;
}

.asea-calc-result {
	padding: var(--wp--preset--spacing--3);
	border-radius: var(--wp--custom--border-radius-main);
	background-color: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 500;
	line-height: 1.45;
}

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

/* Barème complet : visible sans script, replié lorsque le simulateur prend le relais. */
.asea-calc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.asea-calc-table caption {
	margin-bottom: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--ink-subtle);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-align: left;
	text-transform: uppercase;
}

.asea-calc-table th,
.asea-calc-table td {
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--2);
	border-bottom: 1px solid var(--wp--custom--line);
	text-align: left;
	vertical-align: top;
}

.asea-calc-table thead th {
	color: var(--wp--preset--color--ink-subtle);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.asea-calc-table tbody th {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.asea-calc-table td {
	color: var(--wp--preset--color--ink-muted);
}

.asea-calc-table.is-folded tbody {
	display: none;
}

.asea-calc-table.is-folded thead {
	display: none;
}

/* ------------------------------------------------ Carte des implantations */

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

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

.asea-map-frame {
	position: relative;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--wp--custom--line);
	border-radius: var(--wp--custom--border-radius-main);
	background-color: var(--wp--preset--color--sand);
}

.asea-map-preview,
.asea-map-placeholder,
.asea-map-embed {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.asea-map-preview {
	object-fit: cover;
}

/*
 * Cadre neutre tant qu'aucune image n'est fournie : un dégradé sobre de la
 * palette, jamais une fausse carte - le site ne dessine pas une géographie
 * qu'il ne connaît pas.
 */
.asea-map-placeholder {
	background-image: linear-gradient(
		135deg,
		var(--wp--preset--color--sand) 0%,
		var(--wp--preset--color--paper-warm) 100%
	);
}

.asea-map-trigger {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.asea-map-consent {
	padding: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--ink-subtle);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	text-align: center;
}

.asea-map-frame.is-loaded .asea-map-consent {
	display: none;
}

.asea-map-caption {
	padding: 0 var(--wp--preset--spacing--2) var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--ink-subtle);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.asea-map-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.asea-map-item {
	padding-left: var(--wp--preset--spacing--2);
	border-left: 2px solid var(--wp--preset--color--brand-red);
}

.asea-map-label {
	display: block;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	line-height: 1.3;
}

.asea-map-place {
	display: block;
	color: var(--wp--preset--color--ink-subtle);
	font-size: var(--wp--preset--font-size--small);
}

/* ------------------------------------------------ Compteur d'impact */

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

.asea-counter-value {
	color: var(--wp--preset--color--earth);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.asea-counter-label {
	margin-top: var(--wp--preset--spacing--1);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 600;
	line-height: 1.3;
}

.asea-counter-note {
	margin-top: var(--wp--preset--spacing--1);
	color: var(--wp--preset--color--ink-subtle);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

@media (min-width: 600px) {

	.asea-calc-controls {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	}

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

@media (min-width: 900px) {

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