/*
Theme Name: Humalya
Theme URI: https://humalyapro.fr
Author: Aymeric (dev) & Sophia (métier)
Description: Thème bloc sur mesure Humalya — RGAA-first, sécurité OWASP, dépendances minimales (ADR-0002). Design system accessible (ADR-0007).
Version: 0.37.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.3
License: Propriétaire — usage Humalya uniquement
Text Domain: humalya
*/

/* =============================================================================
   Humalya — CSS d'ACCESSIBILITÉ (Étape 3, ADR-0007)
   -----------------------------------------------------------------------------
   Volontairement MINIMAL : la palette, la typo et les couleurs viennent de
   theme.json (variables --wp--preset--color--*). Ce fichier ne fait QUE ce que
   theme.json ne peut pas : focus visible, cibles tactiles, liens soulignés,
   lien d'évitement, et le mode sombre (prefers-color-scheme).
   ========================================================================== */

/* --- 0. Reset box-sizing : padding/bordure inclus dans la largeur.
   Fondamental du responsive : évite qu'un width:100% + padding ne déborde. --- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Jeton de forme des boutons + liens de menu : coins doux unifiés (un seul point de contrôle,
   fini le « nombre magique » 999px). Changer ici = changer la rondeur partout. */
:root {
	--rayon-bouton: 8px;
}

/* --- 1. Lien d'évitement (skip link) : masqué, visible au focus clavier --- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.skip-link:focus,
#wp-skip-link:focus {
	position: fixed;
	top: 0.5rem; left: 0.5rem;
	z-index: 100000;
	width: auto; height: auto;
	padding: 0.75rem 1rem;
	clip: auto;
	background: var(--wp--preset--color--texte, #1C2734);
	color: var(--wp--preset--color--fond, #FFF);
	text-decoration: underline;
	border-radius: 4px;
}

/* --- 2. Focus visible PARTOUT (RGAA S4) : jamais supprimé sans mieux --- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-fonce, #840C10);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Repli pour les navigateurs sans :focus-visible (ne jamais laisser sans focus) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus {
	outline: 3px solid var(--wp--preset--color--accent-fonce, #840C10);
	outline-offset: 2px;
}

/* --- 3. Liens de contenu SOULIGNÉS (info jamais par la couleur seule) ---
   Les boutons (.wp-block-button__link/.wp-element-button) sont exclus des DEUX
   branches : sinon .wp-block-post-content a (spé 0,1,1) soulignait les boutons du
   contenu (hero, CTA de section) alors que le CTA du header, hors contenu, ne l'est
   pas → incohérence de rendu. On aligne : aucun bouton souligné, où qu'il soit. */
.wp-block-post-content a:where(:not(.wp-block-button__link, .wp-element-button)),
main a:where(:not(.wp-block-button__link, .wp-element-button)) {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* La navigation peut ne pas souligner (contexte explicite — cf. doc WP a11y). */

/* --- 4. Cibles tactiles >= 44x44px (WCAG 2.5.5) --- */
.wp-element-button,
.wp-block-button__link,
button,
input[type="submit"] {
	min-height: 44px;
	min-width: 44px;
	padding: 0.6rem 1.25rem;
}

/* Liens de navigation : zone cliquable confortable */
nav a {
	display: inline-block;
	padding: 0.5rem 0.25rem;
	min-height: 44px;
}

/* --- HEADER pro : logo à gauche, navigation à droite, une seule barre --- */

/* Collant au défilement (sticky = CSS pur, marche sans JS ; ombre via .is-scrolled). */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	border-bottom: 1px solid var(--wp--preset--color--decor-taupe, #CAAF91);
	background: var(--wp--preset--color--fond, #FFF);
}

.site-header__inner {
	max-width: 72rem;
	margin: 0 auto;
	padding: 0.75rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Marque : titre de site NATIF (core/site-title) — éditable dans les Réglages WP. */
.site-header__marque,
.site-header__marque a,
.wp-block-site-title a {
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 900;
	font-size: 1.6rem;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--texte, #1C2734);
	text-decoration: none;
}

/* --- MENU RESPONSIVE SANS JS (<details>) ---
   Desktop : menu en ligne, hamburger masqué. Mobile : hamburger (summary) qui ouvre le menu.
   Aucun JavaScript : <details> gère l'ouverture/fermeture nativement (clavier + souris). */

/* Le <details> ne casse pas la mise en page : il se comporte comme la zone de nav. */
.site-nav { position: relative; }

/* Retirer le marqueur triangle par défaut de <summary> (on met notre propre icône). */
.site-nav__toggle { list-style: none; cursor: pointer; }
.site-nav__toggle::-webkit-details-marker { display: none; }

/* La liste de liens : en ligne, alignée à droite. */
.site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.25rem 0.5rem;
}

/* Chaque lien : cible tactile 44px, forme cohérente avec les boutons (--rayon-bouton). */
.site-nav__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 0.85rem;
	color: var(--wp--preset--color--texte, #1C2734);
	text-decoration: none;
	font-weight: 600;
	border-radius: var(--rayon-bouton);
}
.site-nav__list a:not(.site-nav__cta):hover { background: rgb(28 39 52 / 6%); }

/* "Contact" mis en avant : mêmes codes visuels que les boutons principaux des pages
   (fond accent, texte clair, même rayon) — cohérence de design garantie.
   Sélecteur .site-nav__list a.site-nav__cta : même spécificité que le lien générique
   ci-dessus, donc le texte blanc gagne (sinon le marine s'appliquait → 2:1, illisible). */
.site-nav__list a.site-nav__cta {
	background: var(--wp--preset--color--accent, #B7031D);
	color: #fff;
}
.site-nav__list a.site-nav__cta:hover { background: var(--wp--preset--color--accent-fonce, #840C10); }

/* --- DESKTOP (≥48rem) : menu toujours en ligne, hamburger masqué ---
   Le <details open> (posé par theme.js sur desktop) peint son contenu ; il prend l'espace
   restant du header via flex:1 pour afficher la liste en ligne, alignée à droite. */
@media (width >= 48rem) {
	.site-nav__toggle { display: none; }           /* pas de hamburger sur desktop */

	/* Le <details open> peint son contenu ; il prend l'espace restant du header (flex:1)
	   pour que la liste s'affiche en ligne, alignée à droite. */
	.site-nav {
		flex: 1;
		min-width: 0;
	}

	.site-nav__panel { width: 100%; }

	.site-nav__list {
		flex-direction: row;                       /* liens EN LIGNE (pas empilés) */
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: 0.25rem 0.5rem;
	}
}

/* --- MOBILE (<48rem) : vrai menu mobile — hamburger → croix, panneau PLEINE LARGEUR --- */
@media (width < 48rem) {
	/* Le bouton hamburger : icône + libellé, cible tactile confortable. */
	.site-nav__toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		min-height: 44px;
		padding: 0.5rem 0.85rem;
		border-radius: var(--rayon-bouton);
		font-weight: 600;
		color: var(--wp--preset--color--texte, #1C2734);
	}
	.site-nav__toggle:hover { background: rgb(28 39 52 / 6%); }

	/* Icône : 3 barres (fermé). */
	.site-nav__toggle-icon {
		position: relative;
		display: block;
		width: 1.25rem;
		height: 2px;
		background: currentColor;
		transition: background 0.15s ease;
	}

	.site-nav__toggle-icon::before,
	.site-nav__toggle-icon::after {
		content: "";
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: currentColor;
		transition: transform 0.15s ease, top 0.15s ease;
	}
	.site-nav__toggle-icon::before { top: -6px; }
	.site-nav__toggle-icon::after { top: 6px; }

	/* OUVERT : les 3 barres deviennent une CROIX (✕). La barre centrale disparaît, les deux
	   autres se croisent. Piloté par l'état natif [open] du <details> — aucun JS. */
	.site-nav[open] .site-nav__toggle-icon { background: transparent; }
	.site-nav[open] .site-nav__toggle-icon::before { top: 0; transform: rotate(45deg); }
	.site-nav[open] .site-nav__toggle-icon::after  { top: 0; transform: rotate(-45deg); }

	/* Le libellé passe de « Menu » (fermé) à « Fermer » (ouvert) via ::after + contenu masqué. */
	.site-nav__toggle-label { display: none; }               /* on gère le texte en pseudo pour l'état */
	.site-nav__toggle::after { content: "Menu"; font-weight: 600; }
	.site-nav[open] .site-nav__toggle::after { content: "Fermer"; }

	/* PANNEAU PLEINE LARGEUR sous le header (vrai menu mobile, pas un petit encart).
	   Ancré au header entier (position sticky = contexte), déborde jamais. */
	.site-nav { position: static; }

	.site-nav__panel {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 1000;
		padding: 0.5rem 1.25rem 1rem;
		background: var(--wp--preset--color--fond, #FFF);
		border-top: 1px solid var(--wp--preset--color--decor-taupe, #CAAF91);
		box-shadow: 0 0.75rem 1.5rem rgb(28 39 52 / 12%);
	}

	/* Liens empilés, grande cible tactile, séparateurs discrets (navigation mobile confortable). */
	.site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.site-nav__list li + li { border-top: 1px solid rgb(28 39 52 / 8%); }

	.site-nav__list a {
		width: 100%;
		min-height: 3rem;               /* cible tactile généreuse (48px) */
		padding: 0.85rem 0.5rem;
		border-radius: 0;               /* pleine largeur, pas de pilule sur les liens de liste */
	}

	/* Le CTA garde sa pilule pour rester identifiable comme action. */
	.site-nav__list a.site-nav__cta {
		margin-top: 0.5rem;
		border-radius: var(--rayon-bouton);
		justify-content: center;
	}

	/* details fermé (défaut) → panneau caché ; clic sur le hamburger pour ouvrir (natif, sans JS). */
	.site-nav:not([open]) .site-nav__panel { display: none; }
}

/* --- Bouton bascule jour/nuit (progressive enhancement : masqué si pas de JS) ---
   Injecté par assets/js/theme.js ; cible tactile ≥44px ; icône décorative (aria-hidden),
   le libellé accessible est porté par aria-label + l'état par aria-pressed. */
.theme-toggle {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;              /* dans le header flex : ne s'écrase jamais, garde son cercle */
	width: 2.75rem;
	height: 2.75rem;
	margin-left: 0.5rem;
	padding: 0;
	border: 1.5px solid rgb(28 39 52 / 25%);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--texte, #1C2734);
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.theme-toggle:hover { border-color: var(--wp--preset--color--accent-fonce, #840C10); }
.theme-toggle__icon { pointer-events: none; }

/* En sombre, la bordure du bouton doit rester visible sur fond marine. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle {
		border-color: rgb(244 237 226 / 35%);
		color: var(--wp--preset--color--texte, #F4EDE2);
	}
}

:root[data-theme="dark"] .theme-toggle {
	border-color: rgb(244 237 226 / 35%);
	color: var(--wp--preset--color--texte, #F4EDE2);
}

/* --- FOOTER : bande marine, marque + colonnes de liens (S8) --- */

/* Footer : fond marine FIXE dans les deux modes (identité visuelle stable).
   On n'utilise PAS var(--texte) : elle s'inverse en dark (crème) → texte blanc illisible.
   Marine #14202E foncé → texte clair : contraste ≥ 12:1 en clair ET en sombre. */
.site-footer {
	background: #14202e;
	color: #fff;
	border-top: 4px solid var(--wp--preset--color--decor-dore, #EAD090);
}

.site-footer__inner {
	max-width: 72rem;
	margin: 0 auto;
	padding: 3.5rem 1.25rem 1.5rem;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 2.5rem;
}

.site-footer__nom {
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 900;
	font-size: 1.6rem;
	margin: 0 0 0.5rem;
}
.site-footer__baseline { margin: 0; max-width: 32ch; color: rgb(255 255 255 / 82%); }

.site-footer__titre {
	font-family: var(--wp--preset--font-family--systeme);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--decor-dore, #EAD090);
	margin: 0 0 0.75rem;
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }

.site-footer__col a {
	display: inline-block;
	padding: 0.4rem 0;
	color: #fff;
	text-decoration: none;
}
.site-footer__col a:hover { text-decoration: underline; text-underline-offset: 0.15em; }

.site-footer__legal {
	max-width: 72rem;
	margin: 0 auto;
	padding: 1.25rem;
	border-top: 1px solid rgb(255 255 255 / 15%);
	font-size: 0.85rem;
	color: rgb(255 255 255 / 70%);
	text-align: center;
}

@media (width <= 48rem) {
	.site-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* --- 5. Boutons : le rayon (--rayon-bouton) et les couleurs sont gérés plus bas dans le
   système de boutons + theme.json. Ici, juste le poids par sécurité. --- */
.wp-element-button,
.wp-block-button__link {
	font-weight: 600;
}


/* =============================================================================
   FORMULAIRES (contact, newsletter) — accessibles (ADR-0004, RGAA)
   ========================================================================== */
.humalya-form { max-width: 34rem; }
.humalya-form .champ { margin: 0 0 1.25rem; }

.humalya-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25rem;
	color: var(--wp--preset--color--texte, #1C2734);
}

.humalya-form input[type="text"],
.humalya-form input[type="email"],
.humalya-form textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	font: inherit;
	color: var(--wp--preset--color--texte, #1C2734);

	/* Surface + bordure pilotées par variables : valeurs claires par défaut, surchargées en
	   mode sombre (sinon la bordure marine-sur-marine devient invisible — WCAG 1.4.11). */
	background: var(--form-field-bg, #FFF);
	border: 1.5px solid var(--form-field-border, rgb(28 39 52 / 35%));
	border-radius: 8px;
	min-height: 44px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Au focus/survol : la bordure se renforce + halo doux (repère clair sans agressivité). */
.humalya-form input[type="text"]:hover,
.humalya-form input[type="email"]:hover,
.humalya-form textarea:hover {
	border-color: var(--form-field-border-hover, rgb(28 39 52 / 55%));
}

.humalya-form input[type="text"]:focus,
.humalya-form input[type="email"]:focus,
.humalya-form textarea:focus {
	border-color: var(--wp--preset--color--accent-fonce, #840C10);
	box-shadow: 0 0 0 3px var(--form-focus-ring, rgb(132 12 16 / 22%));
}

/* Case à cocher : label à côté, non au-dessus */
.humalya-form .champ--case {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}
.humalya-form .champ--case input { margin-top: 0.35rem; width: 1.25rem; height: 1.25rem; }
.humalya-form .champ--case label { font-weight: 400; margin: 0; }
.form-mentions { font-size: 0.9rem; }

/* Légende « champs obligatoires » avant le formulaire (RGAA 11.10). */
.form-legende { font-size: 0.9rem; margin: 0 0 1.25rem; }

/* Aide de saisie (format attendu), reliée au champ via aria-describedby (WCAG 3.3.2). */
.champ-aide {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--texte, #1C2734);
	opacity: 0.75;
}

/* Message d'erreur de champ (RGAA 11.11) : texte explicite + couleur (jamais la couleur seule). */
.champ-erreur {
	display: block;
	margin-top: 0.35rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-fonce, #840C10);
}

/* Champ en erreur : bordure + halo rouges (en plus du message texte). */
.humalya-form [aria-invalid="true"] {
	border-color: var(--wp--preset--color--accent-fonce, #840C10) !important;
	box-shadow: 0 0 0 3px rgb(132 12 16 / 18%);
}

/* Honeypot : totalement masqué (humains + lecteurs d'écran), présent pour les bots. */
.hp-champ {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px; overflow: hidden;
}

/* Messages de statut après soumission (role alert/status). */
.form-statut {
	padding: 0.75rem 1rem;
	border-radius: 4px;
	border-left: 4px solid;
	font-weight: 600;
}

.form-statut--ok {
	background: var(--wp--preset--color--fond-alt, #FAF6F0);
	border-left-color: #1B7A4B; /* vert foncé (succès), contraste vérifié */
	color: var(--wp--preset--color--texte, #1C2734);
}

.form-statut--erreur {
	background: var(--wp--preset--color--fond-alt, #FAF6F0);
	border-left-color: var(--wp--preset--color--accent, #B7031D);
	color: var(--wp--preset--color--texte, #1C2734);
}

/* --- Scène de formulaire : formulaire à gauche, réassurance à droite --- */
.form-scene__inner {
	max-width: 68rem;
	margin: 0 auto;
	padding: 3.5rem 1.25rem;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 3rem;
	align-items: start;
}

.form-scene__aside {
	background: var(--wp--preset--color--fond-alt, #FAF6F0);
	border-radius: 1rem;
	border-top: 4px solid var(--wp--preset--color--decor-dore, #EAD090);
	padding: 1.75rem;
}
.form-scene__titre { margin-top: 0; }
.form-scene__points { list-style: none; margin: 0; padding: 0; }
.form-scene__points li { margin-bottom: 1rem; }
.form-scene__points li:last-child { margin-bottom: 0; }

@media (width <= 48rem) {
	.form-scene__inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* =============================================================================
   DESIGN — épuré & chaleureux (v0.2.0). Palette de marque ADR-0007.
   Le hero met l'humain (Sophia) en avant ; filet doré = signature discrète.
   ========================================================================== */

/* Titre de section : Fraunces, généreux, centré sur un rythme vertical ample. */
.section__inner {
	max-width: 68rem;
	margin: 0 auto;
	padding: 4.5rem 1.25rem;
}

.section__titre {
	font-size: var(--wp--preset--font-size--x-large);
	max-width: 20ch;
	margin: 0 0 2rem;
}

/* --- SYSTÈME DE BOUTONS NATIF (core/button + block styles is-style-*) ---
   Le socle (pilule, padding, poids, cible ≥44px) vient de theme.json (elements.button).
   Ici : les 4 VARIANTES, chacune conforme RGAA (contraste AA + focus visible).
   Les variantes sont choisies dans l'éditeur (panneau Styles) — un seul système, cohérent. */

/* Base commune de rendu : forme pilule + cible tactile + transition. On pose le radius ICI
   (le border.radius de theme.json elements.button ne se propage pas de façon fiable à
   .wp-element-button sur cette version WP). Le padding/couleurs viennent bien de theme.json. */
.wp-block-button .wp-element-button {
	min-height: 44px;
	border-radius: var(--rayon-bouton); /* coins doux unifiés pour TOUS les boutons */
	transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

/* La variante navigation n'est pas un bouton plein → elle annule la pilule (voir plus bas). */

/* (Plus d'alias .bouton* custom : le hero utilise désormais des wp:button natifs is-style-*
   comme le reste du site. Système de boutons 100 % natif.) */

/* 1. PRINCIPAL (défaut) : rempli accent, texte clair. Couleurs déjà posées par theme.json ;
   on ne redéclare rien ici → hérite du socle. C'est l'action prioritaire. */

/* 2. SECONDAIRE (contour) : transparent + filet marine, texte marine. Contraste texte ≥12:1. */
.wp-block-button.is-style-secondaire .wp-element-button {
	background: transparent;
	color: var(--wp--preset--color--texte);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--texte);
}

.wp-block-button.is-style-secondaire .wp-element-button:hover,
.wp-block-button.is-style-secondaire .wp-element-button:focus {
	background: rgb(28 39 52 / 6%);
	color: var(--wp--preset--color--texte);
}

/* 3. DOUX (ton sur ton) : fond crème léger, texte marine. Action tertiaire discrète. */
.wp-block-button.is-style-doux .wp-element-button {
	background: var(--wp--preset--color--fond-alt);
	color: var(--wp--preset--color--texte);
	box-shadow: inset 0 0 0 1px rgb(28 39 52 / 15%);
}

.wp-block-button.is-style-doux .wp-element-button:hover,
.wp-block-button.is-style-doux .wp-element-button:focus {
	background: rgb(28 39 52 / 8%);
	color: var(--wp--preset--color--texte);
}

/* 4. NAVIGATION (lien fléché) : pas un bouton plein — un lien accentué + flèche.
   On neutralise l'aspect « bouton » (fond, padding, pilule) pour un vrai lien. */
.wp-block-button.is-style-navigation .wp-element-button {
	background: transparent;
	color: var(--wp--preset--color--accent-fonce);
	padding: 0.25rem 0;
	min-height: 0;
	border-radius: 0;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wp-block-button.is-style-navigation .wp-element-button::after {
	content: " \2192";                    /* flèche décorative (le texte porte le sens) */
	text-decoration: none;
}
.wp-block-button.is-style-navigation .wp-element-button:hover { color: var(--wp--preset--color--texte); }

/* Lien avec flèche : la flèche est décorative, le texte porte le sens. */
.lien-fleche {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-fonce);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.lien-fleche::after { content: "\2192"; text-decoration: none; }

/* --- HERO : deux colonnes, asymétrique --- */
.hero {
	background:
		radial-gradient(60rem 40rem at 85% -10%, rgb(234 208 144 / 35%), transparent 60%),
		var(--wp--preset--color--fond-alt);
}

/* .hero__inner est un wp:columns NATIF (flex) : les largeurs 56%/reste sont dans le markup.
   On ne pilote ici que la largeur de page, le centrage et l'espacement des colonnes. */
.hero__inner {
	max-width: 72rem;
	margin: 0 auto;
	padding: clamp(2.5rem, 6vw, 5rem) 1.25rem;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.hero__eyebrow {
	margin: 0 0 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-fonce);
}

.hero__titre {
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 1.25rem;
}

.hero__accroche {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	max-width: 34ch;
	margin: 0 0 2rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero__media {
	display: flex;
	justify-content: center;
	align-items: flex-end;   /* la silhouette découpée s'ancre en bas du hero */
	position: relative;
}

/* Halo doré doux DERRIÈRE la silhouette : ancre la photo détourée sans cadre */
.hero__media::before {
	content: "";
	position: absolute;
	inset: auto 0 0;
	z-index: 0;
	width: min(24rem, 90%);
	aspect-ratio: 1;
	margin-inline: auto;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(234 208 144 / 55%), transparent 70%);
	filter: blur(6px);
}

.hero__photo {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 28rem;
	height: auto;

	/* Photo détourée : pas de cadre ni de fond, juste une ombre portée sur la silhouette */
	filter: drop-shadow(0 1.25rem 1.75rem rgb(28 39 52 / 22%));
}

/* NOTE (v0.20.0) : les règles .parcours*, .carte*, .domaines*, .domaine, .etapes*, .etape*
   (hors .etape-num) ont été retirées — toutes les sections (accueil incluse) sont désormais
   en blocs NATIFS (Group + Grid, presets de theme.json). Seule la pastille numérotée garde
   du CSS déco (.etape-num, plus bas). Voir templates/front-page.html et assets/content/*.html. */

/* --- Pastille numérotée des étapes (structure 100 % native, ci le cercle en pur déco) ---
   Le numéro est un paragraphe natif (fond accent + texte fond posés dans l'éditeur). Ces
   3 propriétés le transforment en cercle centré : impossibles à régler dans l'UI Gutenberg,
   mais purement décoratives — l'ordre réel est porté par le texte, marqué aria-hidden. */
.etape-num.etape-num {           /* double classe : bat la spécificité de .wp-block-paragraph */
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	min-height: 2.75rem;
	margin: 0 0 0.75rem;         /* neutralise la marge de paragraphe : cercle collé à son titre */
	padding: 0;
	border-radius: 50%;          /* le cercle */
	font-size: 1.25rem;
	line-height: 1;
}

/* --- CTA final : bloc CHALEUREUX crème + halo doré (pas une bande sombre) --- */
.cta-final {
	background:
		radial-gradient(40rem 22rem at 50% -30%, rgb(234 208 144 / 45%), transparent 65%),
		var(--wp--preset--color--fond-alt, #FAF6F0);
}

.cta-final__inner {
	max-width: 40rem;                 /* colonne resserrée : bloc équilibré, pas étalé */
	text-align: center;
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

.cta-final .section__titre {
	color: var(--wp--preset--color--texte, #1C2734);
	max-width: none;
	margin: 0 auto 1rem;
	text-wrap: balance;               /* évite le « ? » orphelin sur sa ligne */
}

.cta-final p {
	margin: 0 auto 2rem;
	max-width: 34ch;
	font-size: var(--wp--preset--font-size--large);
}

/* Petit lien vers l'autre parcours, sous le bouton (discret). */
.cta-final__aparte {
	margin: 1.75rem auto 0;
	font-size: 1rem;
	color: var(--wp--preset--color--texte, #1C2734);
}
.cta-final__aparte a { color: var(--wp--preset--color--accent-fonce, #840C10); }

/* =============================================================================
   COMPOSANTS DE PAGE (entreprises, experts, contact, newsletter)
   ========================================================================== */

/* Hero de page : bandeau crème avec halo doré, titre Fraunces + accroche. */
.page-hero {
	background:
		radial-gradient(50rem 30rem at 90% -20%, rgb(234 208 144 / 30%), transparent 60%),
		var(--wp--preset--color--fond-alt, #FAF6F0);
	border-bottom: 1px solid var(--wp--preset--color--decor-taupe, #CAAF91);
}

.page-hero__inner {
	max-width: 72rem;
	margin: 0 auto;
	padding: clamp(2.5rem, 5vw, 4rem) 1.25rem;
	text-align: left;
}

/* Le hero de page est en layout constrained (WP centre ses enfants) : on aligne à gauche
   pour être cohérent avec le hero de l'accueil. !important neutralise margin-inline:auto de WP. */
.page-hero__inner > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.page-hero__eyebrow {
	margin: 0 0 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-fonce, #840C10);
}

.page-hero__titre {
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--display, 3.5rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
	max-width: 18ch;
}

.page-hero__accroche {
	font-size: var(--wp--preset--font-size--large, 1.5rem);
	line-height: 1.5;
	max-width: 46ch;
	margin: 0;
}

/* --- Cartes d'offre (page Experts) : les 3 prestations détaillées ---
   Empilées pleine largeur (pas en grille) car de longueurs très inégales (l'option 3
   contient 3 sous-modules). L'eyebrow « Option N » reprend le code visuel de .page-hero__eyebrow.
   Le tarif est mis en avant en bas de carte. Ces classes n'habillent QUE le texte : la carte,
   ses coins et son filet doré viennent des réglages natifs du bloc (theme.json / éditeur). */
.offre-numero {
	margin: 0 0 0.5rem;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent-fonce, #840C10);
}

.offre-tarif {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--decor-taupe, #CAAF91);
	font-size: var(--wp--preset--font-size--large, 1.25rem);
}

/* Liste des profils accompagnés (page Experts) : puces en 2 colonnes sur écran large,
   plus compacte et parcourable d'un coup d'œil qu'une longue colonne unique. */
.liste-profils {
	columns: 2;
	column-gap: 2.5rem;
}

@media (width <= 34rem) {
	.liste-profils { columns: 1; }
}

/* --- Édito de la fondatrice (accueil) : texte suivi à la 1re personne ---
   Colonne de lecture resserrée (contentSize:44rem posé sur le bloc) plutôt qu'une grille :
   c'est un mot personnel, pas une liste. L'eyebrow reprend le code visuel des autres eyebrows.
   La signature est une citation native (core/quote) mise en exergue par un filet d'accent. */
.edito__eyebrow {
	margin: 0 0 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-fonce, #840C10);
}

.edito p {
	font-size: var(--wp--preset--font-size--medium, 1.0625rem);
	line-height: 1.65;
}

/* Signature en exergue : filet d'accent à gauche, citation en Fraunces, auteur discret. */
.edito__signature {
	margin: 1rem 0 0;
	padding: 0.25rem 0 0.25rem 1.5rem;
	border-left: 4px solid var(--wp--preset--color--accent, #C1121F);
}

.edito__signature p {
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	font-style: italic;
	line-height: 1.4;
	margin: 0;
}

.edito__signature cite {
	display: block;
	margin-top: 0.75rem;
	font-style: normal;
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-fonce, #840C10);
}

/* NOTE : les anciennes règles .reassurance* ont été retirées (v0.19.0) — les sections de
   réassurance des pages Entreprises/Experts/Newsletter sont désormais en blocs NATIFS
   (Group + Grid), stylées via les presets de theme.json. Voir assets/content/*.html. */

/* Fiche légale : paires clé/valeur (éditeur, hébergeur) en TABLEAU natif (core/table).
   La 1re colonne (le champ) est mise en avant comme l'étaient les <dt> ; pas de bordures
   lourdes — on veut une fiche sobre, pas une grille de données. */
.fiche-legale { margin-left: 0; margin-right: 0; }
.fiche-legale table { border-collapse: collapse; width: 100%; max-width: 40rem; }

.fiche-legale caption {
	text-align: left;
	font-weight: 600;
	color: var(--wp--preset--color--accent-fonce, #840C10);
	margin-bottom: 0.5rem;
}

.fiche-legale td {
	padding: 0.4rem 1.25rem 0.4rem 0;
	vertical-align: top;
	border: 0;
}

/* 1re colonne = le champ (rôle des anciens <dt>) : gras + couleur d'accent. */
.fiche-legale td:first-child {
	font-weight: 600;
	color: var(--wp--preset--color--accent-fonce, #840C10);
	white-space: nowrap;
}

/* Empilé sur très petit écran (le tableau natif reste lisible, on resserre juste). */
@media (width <= 30rem) {
	.fiche-legale td { padding-right: 0.75rem; }
	.fiche-legale td:first-child { white-space: normal; }
}

/* Zone de contenu riche d'une page (largeur de lecture confortable). */
.page-corps { padding: 3.5rem 1.25rem; }
.page-corps__inner { max-width: 46rem; margin: 0 auto; }

/* --- Responsive : une colonne sur mobile ---
   (Les grilles natives se replient seules via minmax(min(X,100%),1fr) ; seul le hero,
   qui est en CSS custom avec sa photo, a besoin d'un repli explicite ici.) */
@media (width <= 48rem) {
	/* wp:columns natif se replie déjà en 1 colonne ; on force juste la photo au-dessus. */
	.hero__inner.hero__inner { flex-wrap: wrap; }
	.hero__media { order: -1; }          /* photo au-dessus du texte sur mobile */
	.hero__photo { max-width: 18rem; }

	/* Titres display : éviter tout débordement horizontal sur petit écran. */
	.hero__titre,
	.page-hero__titre {
		font-size: clamp(2rem, 8.5vw, 3rem);
		overflow-wrap: break-word;
		hyphens: auto;
	}
	.hero__actions .wp-block-button { flex: 1 1 auto; }
}

/* Garde-fou global : aucun débordement horizontal, images fluides. */
img { max-width: 100%; height: auto; }

/* =============================================================================
   PAGES LÉGALES : hero sobre + colonne de lecture confortable
   (documents longs : la lisibilité prime sur l'effet visuel)
   ========================================================================== */
.page-legale__entete {
	background: var(--wp--preset--color--fond-alt, #FAF6F0);
	border-bottom: 1px solid var(--wp--preset--color--decor-taupe, #CAAF91);
	padding-block: clamp(2rem, 4vw, 3rem);
	margin-bottom: 2.5rem;
}

.page-legale__entete h1 {
	font-size: var(--wp--preset--font-size--x-large, 2.25rem);
	margin: 0;
}
.page-legale__corps { padding-bottom: 4rem; }

/* Confort de lecture : interlignage généreux, titres d'articles espacés. */
.page-legale__corps p { line-height: 1.7; }

.page-legale__corps h2 {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 2px solid var(--wp--preset--color--decor-taupe, #CAAF91);
	font-size: 1.4rem;
}
.page-legale__corps h3 { margin-top: 1.75rem; font-size: 1.15rem; }

.page-legale__corps ul,
.page-legale__corps ol { line-height: 1.7; }
.page-legale__corps li { margin-bottom: 0.4rem; }

/* =============================================================================
   NEWSLETTER : liste des numéros (cartes) + lecture d'un numéro
   ========================================================================== */

/* NOTE : .numeros / .numeros__titre retirés (v0.20.0) — la section « numéros » est désormais
   un Group natif contenu à 68rem (voir newsletter.html), plus besoin de wrapper CSS dédié. */

/* Grille de cartes de numéros */
.numeros__liste {
	display: grid;

	/* Grille ADAPTATIVE : auto-fit effondre les colonnes vides → avec 1 numéro, une seule
	   colonne réellement CENTRÉE (auto-fill en laissait une vide à droite, carte collée à
	   gauche). Cartes bornées 18–24rem : compactes, jamais étirées démesurément. */
	grid-template-columns: repeat(auto-fit, minmax(18rem, 24rem));
	justify-content: center;
	align-items: stretch;             /* les items de la ligne à la MÊME hauteur */
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Le post-template de WP enveloppe chaque carte dans un <li> : il doit être un conteneur flex
   qui remplit sa piste, sinon l'article ne s'étire pas et les cartes se désalignent en hauteur.
   margin:0 neutralise le margin-block-start que `is-layout-flow` ajoute au 2e item et suivants
   (pensé pour un flux vertical) — en grille il décalait les cartes ; le `gap` gère l'espacement. */
.numeros__liste > li { display: flex; margin: 0; }

.numero-carte {
	display: flex;
	flex-direction: column;
	height: 100%;                     /* remplit le <li> → toutes les cartes à la même hauteur */
	width: 100%;
	overflow: hidden;                 /* l'image épouse les coins arrondis */
	background: var(--wp--preset--color--fond-alt, #FAF6F0);
	border-radius: 1rem;
	border-top: 4px solid var(--wp--preset--color--decor-dore, #EAD090);
}

/* Image à la une de la carte : ratio fixe, repli de marque si absente.
   position:relative → ancre le badge « Dernier numéro » de la 1re carte (voir plus bas). */
.numero-carte__image { margin: 0; position: relative; }

.numero-carte__image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Corps de carte : le padding est porté par le wrapper .numero-carte__corps (bloc natif,
   comme les cartes d'Entreprises/Experts). Les éléments sont donc à margin latérale 0 —
   plus de valeurs par élément, plus de date centrée : tout s'aligne sur le padding du corps.
   Le corps s'étire (flex:1) pour que le lien « Lire » reste en bas quelle que soit la hauteur. */
.numero-carte__corps {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.numero-carte__date {
	font-size: 0.85rem;
	color: var(--wp--preset--color--accent-fonce, #840C10);
	font-weight: 600;
	text-align: left;
}
.numero-carte__titre { font-size: 1.2rem; }
.numero-carte__titre a { text-decoration: none; color: var(--wp--preset--color--texte, #1C2734); }
.numero-carte__titre a:hover { text-decoration: underline; }
.numero-carte .wp-block-post-excerpt { display: flex; flex-direction: column; flex: 1; }
.numero-carte .wp-block-post-excerpt__more-text { margin-top: auto; padding-top: 0.75rem; }
.numero-carte .wp-block-post-excerpt__more-text a { font-weight: 600; }

/* Repli de marque quand un numéro n'a PAS d'image RÉELLE à la une : on affiche un fond
   dégradé de marque. On teste la présence d'un <img> (le conteneur peut exister vide). */
.numero-carte:not(:has(.numero-carte__image img))::before {
	content: "";
	display: block;
	aspect-ratio: 16 / 9;
	background:
		radial-gradient(20rem 12rem at 85% 10%, rgb(234 208 144 / 25%), transparent 60%),
		linear-gradient(135deg, #1C2734, #24303f);
}

/* --- Miniatures « une de magazine » (light/dark) ---
   Le <picture> émis par inc/newsletter-miniatures-afficher.php porte 2 sources : la sombre s'applique via
   prefers-color-scheme, la claire par défaut. Quand l'utilisateur FORCE un thème via le toggle
   (html[data-theme]), le <source media> ne suffit pas (il ne réagit qu'au système) : theme.js
   réécrit alors le src de l'<img>. Ces règles ne gèrent que la présentation. */
.numero-miniature { display: block; margin: 0; }

.numero-miniature__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* --- DERNIER NUMÉRO : même carte que les autres, distinguée par un badge ---
   Un seul modèle de carte (.numero-carte) sert tous les numéros ; le plus récent est la 1re
   carte de la grille (requête triée date desc). Un badge « Dernier numéro » est posé en CSS
   sur cette 1re carte — il suit donc automatiquement le numéro le plus récent, sans HTML dédié.
   Repère visuel : l'info essentielle (date récente + position en tête) reste portée par la carte. */
.numeros__liste > :first-child { position: relative; }

.numeros__liste > :first-child .numero-carte__image::after {
	content: "Dernier numéro";
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 1;
	padding: 0.25rem 0.75rem;
	background: var(--wp--preset--color--accent, #B7031D);
	color: #fff;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* --- Pagination des numéros : apparaît automatiquement dès qu'il y a plus de perPage (9)
   numéros. WordPress découpe alors en pages ; ces règles habillent les liens « Précédent /
   1 2 3 / Suivant » aux codes du thème (coins doux, accent, cible tactile), la page courante
   étant mise en évidence. Sans pagination (< 10 numéros), rien ne s'affiche. --- */
.numeros__query .wp-block-query-pagination {
	margin-top: 2.5rem;
	gap: 0.5rem;
	align-items: center;
}

/* Chaque lien / numéro de page : petit bouton à coins doux, cible tactile confortable. */
.numeros__query .wp-block-query-pagination a,
.numeros__query .wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.4rem 0.85rem;
	border-radius: var(--rayon-bouton);
	text-decoration: none;
	font-weight: 600;
	color: var(--wp--preset--color--texte, #1C2734);
}

.numeros__query .wp-block-query-pagination a:hover {
	background: rgb(28 39 52 / 8%);
}

/* Page courante : pastille pleine en accent (repère clair de « où je suis »). */
.numeros__query .wp-block-query-pagination .page-numbers.current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	border-radius: var(--rayon-bouton);
	background: var(--wp--preset--color--accent, #B7031D);
	color: #fff;
	font-weight: 700;
}

/* Flèches Précédent / Suivant : un poil plus marquées (poids + couleur d'accent). */
.numeros__query .wp-block-query-pagination-previous,
.numeros__query .wp-block-query-pagination-next {
	color: var(--wp--preset--color--accent-fonce, #840C10);
}

/* Lecture d'un numéro (même confort que les pages légales) */
.numero-lecture__entete {
	background: var(--wp--preset--color--fond-alt, #FAF6F0);
	border-bottom: 1px solid var(--wp--preset--color--decor-taupe, #CAAF91);
	padding-block: clamp(2rem, 4vw, 3rem);
	margin-bottom: 2.5rem;
}

.numero-lecture__date {
	color: var(--wp--preset--color--accent-fonce, #840C10);
	font-weight: 600;
}
.numero-lecture__entete h1 { font-size: var(--wp--preset--font-size--x-large, 2.25rem); margin: 0.25rem 0 0; }
.numero-lecture__corps { padding-bottom: 3.5rem; }
.numero-lecture__corps p { line-height: 1.7; }

/* Chapô : paragraphe d'accroche en tête d'un numéro, plus grand (convention éditoriale). */
.numero-chapo {
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	line-height: 1.55;
	color: var(--wp--preset--color--texte, #1C2734);
}

/* Citation dans un numéro : reprise du traitement de l'édito (filet d'accent + Fraunces). */
.numero-citation {
	margin: 2rem 0;
	padding: 0.5rem 0 0.5rem 1.5rem;
	border-left: 4px solid var(--wp--preset--color--accent, #B7031D);
}

.numero-citation p {
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	font-style: italic;
	line-height: 1.4;
	margin: 0;
}

.numero-citation cite {
	display: block;
	margin-top: 0.75rem;
	font-style: normal;
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-fonce, #840C10);
}

/* Bloc d'inscription en bas de la page newsletter : chaleureux, centré, mis en avant. */
.news-inscription {
	background:
		radial-gradient(40rem 22rem at 50% -30%, rgb(234 208 144 / 45%), transparent 65%),
		var(--wp--preset--color--fond-alt, #FAF6F0);
	border-top: 1px solid var(--wp--preset--color--decor-taupe, #CAAF91);
}

.news-inscription__inner {
	max-width: 40rem;
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 4.5rem) 1.25rem;
	text-align: center;
}

.news-inscription__titre {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--x-large, 2.25rem);   /* le titre porte la mise en avant */
}

/* Accroche à taille de LECTURE (plus le pavé 1.5rem sur 3 lignes) : discrète, laisse le
   titre et le formulaire respirer. Largeur de ligne confortable. */
.news-inscription__accroche {
	margin: 0 auto 2rem;
	max-width: 52ch;
	font-size: var(--wp--preset--font-size--medium, 1.0625rem);
	line-height: 1.6;
	color: var(--wp--preset--color--texte, #1C2734);
}

/* Le formulaire recentré (le champ e-mail + case tiennent au centre du bloc). */
.news-inscription__form { max-width: 26rem; margin: 0 auto; text-align: left; }
.news-inscription__form .humalya-form { max-width: none; }

@media (width <= 48rem) {
	.numeros__liste { grid-template-columns: 1fr; }
}

/* =============================================================================
   HEADER COLLANT au défilement (confort de navigation)
   (position sticky déclarée dans le bloc .site-header plus haut)
   ========================================================================== */

/* Ombre légère quand on a défilé (ajoutée par JS via .is-scrolled). */
.site-header.is-scrolled {
	box-shadow: 0 0.25rem 1rem rgb(28 39 52 / 10%);
}

/* =============================================================================
   6. MODE SOMBRE (prefers-color-scheme: dark) — sans JavaScript (ADR-0007)
   -----------------------------------------------------------------------------
   On surcharge les variables de couleur générées par theme.json. Tous les
   ratios de contraste ont été vérifiés (voir ADR-0007).
   ========================================================================== */

/* =============================================================================
   MODE SOMBRE — deux déclencheurs, mêmes styles (ADR-0007) :
   1. AUTOMATIQUE : @media (prefers-color-scheme: dark) — fonctionne SANS JS.
   2. MANUEL : :root[data-theme="dark"] — posé par le bouton jour/nuit (assets/js/theme.js).
   Le manuel PRIME sur l'auto (attribut > média). :root[data-theme="light"] force le clair
   même si le système est en sombre. Les styles dark sont mutualisés via la classe interne
   .humalya-dark (appliquée par les deux déclencheurs) pour éviter toute divergence.
   ========================================================================== */

/* Déclencheur 1 : préférence système, UNIQUEMENT si l'utilisateur n'a pas fait de choix manuel. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--wp--preset--color--texte: #F4EDE2;
		--wp--preset--color--fond: #141C26;
		--wp--preset--color--fond-alt: #1C2734;
		--wp--preset--color--accent: #F06A6A;
		--wp--preset--color--accent-fonce: #F4A6A6;

		/* Champs de formulaire : surface éclaircie + bordure crème visible (WCAG 1.4.11). */
		--form-field-bg: #24303F;
		--form-field-border: rgb(244 237 226 / 40%);
		--form-field-border-hover: rgb(244 237 226 / 65%);
		--form-focus-ring: rgb(240 106 106 / 35%);
	}
}

/* Déclencheur 2 : choix manuel « nuit » (prime sur tout). */
:root[data-theme="dark"] {
	--wp--preset--color--texte: #F4EDE2;      /* crème clair : texte (14.8:1) */
	--wp--preset--color--fond: #141C26;       /* marine très foncé : fond de page */
	--wp--preset--color--fond-alt: #1C2734;   /* marine : fond de section/carte */
	--wp--preset--color--accent: #F06A6A;     /* rouge éclairci : accent */
	--wp--preset--color--accent-fonce: #F4A6A6; /* rouge clair : liens/focus */

	/* Champs de formulaire : surface éclaircie + bordure crème visible (WCAG 1.4.11). */
	--form-field-bg: #24303F;
	--form-field-border: rgb(244 237 226 / 40%);
	--form-field-border-hover: rgb(244 237 226 / 65%);
	--form-focus-ring: rgb(240 106 106 / 35%);
}

/* --- Overrides de composants en mode sombre ---
   Chaque règle est listée DEUX fois : via `@media (dark) sauf data-theme=light` (auto, sans JS)
   et via `:root[data-theme="dark"]` (choix manuel). Les deux partagent les mêmes valeurs.
   `body` : fond/texte sombres. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) body {
		background-color: var(--wp--preset--color--fond);
		color: var(--wp--preset--color--texte);
	}

	/* Boutons PRINCIPAL + éléments à FOND accent (coral éclairci en sombre) : le texte blanc
	   n'atteint que 3:1 → texte marine foncé (--fond) ≈7:1 (WCAG 1.4.3). Les variantes
	   secondaire/doux/navigation utilisent des variables qui s'inversent seules → rien à faire. */
	:root:not([data-theme="light"]) .wp-block-button:not(.is-style-secondaire, .is-style-doux, .is-style-navigation) .wp-element-button,
	:root:not([data-theme="light"]) .site-nav__list a.site-nav__cta,
	:root:not([data-theme="light"]) .numeros__liste > :first-child .numero-carte__image::after,
	:root:not([data-theme="light"]) .numeros__query .wp-block-query-pagination .page-numbers.current {
		color: var(--wp--preset--color--fond) !important;
	}

	:root:not([data-theme="light"]) .site-header {
		background: var(--wp--preset--color--fond);
		border-bottom-color: rgb(244 237 226 / 12%);
	}
	:root:not([data-theme="light"]) .site-nav__list a:not(.site-nav__cta):hover { background: rgb(244 237 226 / 10%); }

	:root:not([data-theme="light"]) .cta-final {
		background: #24303f;
		border-top: 4px solid var(--wp--preset--color--decor-dore);
		border-bottom: 4px solid var(--wp--preset--color--decor-dore);
	}

	:root:not([data-theme="light"]) .cta-final .section__titre,
	:root:not([data-theme="light"]) .cta-final p { color: var(--wp--preset--color--texte); }
	:root:not([data-theme="light"]) .cta-final__aparte { color: var(--wp--preset--color--texte); }
	:root:not([data-theme="light"]) .cta-final__aparte a { color: var(--wp--preset--color--decor-dore); }
}

:root[data-theme="dark"] body {
	background-color: var(--wp--preset--color--fond);
	color: var(--wp--preset--color--texte);
}

/* Boutons PRINCIPAL + éléments à FOND accent : texte marine (--fond) ≈7:1. Les variantes
   secondaire/doux/navigation s'inversent seules via les variables → pas de surcharge. */
:root[data-theme="dark"] .wp-block-button:not(.is-style-secondaire, .is-style-doux, .is-style-navigation) .wp-element-button,
:root[data-theme="dark"] .site-nav__list a.site-nav__cta,
:root[data-theme="dark"] .numeros__liste > :first-child .numero-carte__image::after,
:root[data-theme="dark"] .numeros__query .wp-block-query-pagination .page-numbers.current {
	color: var(--wp--preset--color--fond) !important;
}

:root[data-theme="dark"] .site-header {
	background: var(--wp--preset--color--fond);
	border-bottom-color: rgb(244 237 226 / 12%);
}
:root[data-theme="dark"] .site-nav__list a:not(.site-nav__cta):hover { background: rgb(244 237 226 / 10%); }

:root[data-theme="dark"] .cta-final {
	background: #24303f;
	border-top: 4px solid var(--wp--preset--color--decor-dore);
	border-bottom: 4px solid var(--wp--preset--color--decor-dore);
}

:root[data-theme="dark"] .cta-final .section__titre,
:root[data-theme="dark"] .cta-final p { color: var(--wp--preset--color--texte); }
:root[data-theme="dark"] .cta-final__aparte { color: var(--wp--preset--color--texte); }
:root[data-theme="dark"] .cta-final__aparte a { color: var(--wp--preset--color--decor-dore); }

/* --- 7. Respect du "réduire les animations" (RGAA / vestibulaire) --- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}