/*
 * Styles du thème ImpactOne.
 *
 * La palette, l'échelle typographique et le rythme vertical viennent de
 * theme.json : ce fichier ne redéclare aucune couleur ni aucune taille en dur,
 * il consomme les variables générées.
 *
 * Trois règles absolues, sans exception (rules/design-et-contenu.md) :
 *   border-radius: 0 · filets de 1 px · aucune ombre portée
 */

/* ── Jetons sémantiques ─────────────────────────────────────────────────────
 *
 * Les règles ci-dessous ne nomment JAMAIS une couleur de la palette : elles
 * nomment un rôle — fond, texte, filet. C'est ce qui rend le basculement
 * clair/sombre possible sans retoucher une seule règle.
 *
 * La palette reste fermée et verrouillée dans theme.json : ces jetons ne
 * créent aucune couleur, ils choisissent parmi celles qui existent.
 *
 * CONTRASTE — l'or ne peut pas servir de texte sur fond clair (2,27:1). Il est
 * donc toujours un FOND, avec du texte sombre par-dessus, dans les deux
 * thèmes. C'est la même contrainte que dans l'administration.
 * ------------------------------------------------------------------------ */

:root,
:root[data-theme="sombre"] {
	--au-fond: var(--wp--preset--color--sombre);
	--au-fond-alt: var(--wp--preset--color--entete);
	--au-texte: var(--wp--preset--color--blanc);
	--au-texte-doux: var(--wp--preset--color--gris-clair);
	--au-filet: rgb(255 255 255 / 12%);
	--au-accent: var(--wp--preset--color--accent);
	--au-sur-accent: var(--wp--preset--color--noir);
	/* La surface du bandeau de l'accroche. En thème sombre, le fond est DÉJÀ
	   anthracite : un bandeau de la même couleur serait invisible, et la
	   disposition disparaîtrait sans que rien ne le signale. Il prend donc la
	   surface alternée, qui s'en détache. */
	--au-bande: var(--au-fond-alt);
	color-scheme: dark;
}

:root[data-theme="clair"] {
	--au-fond: var(--wp--preset--color--blanc);
	--au-fond-alt: var(--wp--preset--color--fond-clair);
	--au-texte: var(--wp--preset--color--noir);
	/* Le gris clair de la charte est illisible sur blanc : le texte secondaire
	   passe à l'anthracite atténué, qui reste au-dessus du seuil. */
	--au-texte-doux: color-mix(in srgb, var(--wp--preset--color--sombre) 70%, white);
	--au-filet: rgb(29 29 32 / 16%);
	--au-accent: var(--wp--preset--color--accent);
	--au-sur-accent: var(--wp--preset--color--noir);
	/* En thème clair, le bandeau est la surface sombre de la charte : c'est le
	   contraste que le gabarit produit, et celui qui donne son poids à
	   l'accroche. */
	--au-bande: var(--wp--preset--color--sombre);
	color-scheme: light;
}

/* Sans choix explicite, on suit la préférence du système. */
@media (prefers-color-scheme: light) {
	:root:not([data-theme]) {
		--au-fond: var(--wp--preset--color--blanc);
		--au-fond-alt: var(--wp--preset--color--fond-clair);
		--au-texte: var(--wp--preset--color--noir);
		--au-texte-doux: color-mix(in srgb, var(--wp--preset--color--sombre) 70%, white);
		--au-filet: rgb(29 29 32 / 16%);
		--au-bande: var(--wp--preset--color--sombre);
		color-scheme: light;
	}
}

body {
	background: var(--au-fond);
	color: var(--au-texte);
}

/* ── Socle ──────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
	/* La règle est posée ici ET verrouillée dans theme.json. La redondance est
	   voulue : theme.json protège l'éditeur, cette ligne protège du CSS tiers. */
	border-radius: 0;
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* Une adresse ou un identifiant technique long ne doit pas élargir la page.
	   `overflow-x: hidden` sur body serait le réflexe — il CASSE
	   `position: sticky`, donc l'en-tête flottant. On traite la cause. */
	overflow-wrap: break-word;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* ── Conteneur ──────────────────────────────────────────────────────────── */

.au-conteneur {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1320px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

.au-principal {
	padding-block: var(--wp--preset--spacing--80);
}

/* ── Lien d'évitement ───────────────────────────────────────────────────── */

.au-evitement {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: var(--wp--preset--spacing--30);
	background: var(--au-accent);
	color: var(--au-sur-accent);
}

.au-evitement:focus {
	left: var(--wp--preset--spacing--30);
	top: var(--wp--preset--spacing--30);
}

/* ── En-tête ────────────────────────────────────────────────────────────── */

.au-entete {
	background: var(--au-fond-alt);
	border-bottom: 1px solid var(--au-filet);
}

.au-entete__interieur {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	min-height: 72px;
}

.au-entete__panneau {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	min-width: 0;
}

/* --- Bouton du menu ----------------------------------------------------- *
 * Il n'apparaît qu'avec JavaScript : sans lui, la navigation reste affichée.
 * On ne masque jamais du contenu sans garantie de pouvoir le révéler.
 *
 * 44 × 44 px minimum — la règle de cible tactile du design system. « Réduire
 * les boutons sur mobile » s'arrête à cette limite : en dessous, la cible
 * devient difficile à atteindre au pouce.
 * ---------------------------------------------------------------------- */

.au-menu-bouton {
	display: none;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--au-filet);
	color: var(--au-texte);
	cursor: pointer;
}

/* Le bouton n'apparaît QUE sous le point de repliement. Sans cette borne, il
   s'affichait à toutes les largeurs — y compris à côté d'une navigation déjà
   entièrement visible, où il ne sert à rien et laisse croire à un menu caché. */
@media (max-width: 1023px) {
	.au-js .au-menu-bouton { display: grid; }
}

.au-menu-bouton:hover,
.au-menu-bouton:focus-visible {
	border-color: var(--au-accent);
	color: var(--au-accent);
}

/* Trois filets de 1 px — le vocabulaire du site, jusque dans l'icône. */
.au-menu-bouton__barres,
.au-menu-bouton__barres::before,
.au-menu-bouton__barres::after {
	display: block;
	width: 18px;
	height: 1px;
	background: currentColor;
	transition: transform 160ms ease, opacity 160ms ease;
}

.au-menu-bouton__barres::before,
.au-menu-bouton__barres::after {
	content: "";
	position: relative;
}

.au-menu-bouton__barres::before { top: -5px; }
.au-menu-bouton__barres::after { top: 4px; }

.au-menu-bouton[aria-expanded="true"] .au-menu-bouton__barres {
	background: transparent;
}

.au-menu-bouton[aria-expanded="true"] .au-menu-bouton__barres::before {
	transform: translateY(5px) rotate(45deg);
}

.au-menu-bouton[aria-expanded="true"] .au-menu-bouton__barres::after {
	transform: translateY(-4px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
	.au-menu-bouton__barres,
	.au-menu-bouton__barres::before,
	.au-menu-bouton__barres::after { transition: none; }
}

/* --- Bureau intermédiaire ---------------------------------------------- *
 * Entre 1024 et 1200 px, cinq entrées plus la bascule plus l'appel à l'action
 * tiennent, mais serré : on réduit l'échelle plutôt que de replier trop tôt.
 * ---------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.au-entete__panneau { gap: var(--wp--preset--spacing--30); }
	.au-nav__liste { gap: var(--wp--preset--spacing--30); }

	.au-entete__cta {
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	}
}

/* --- Panneau replié --------------------------------------------------- *
 * Sous 1024 px, cinq ancres, la bascule et l'appel à l'action ne tiennent pas
 * sur une ligne — quelle que soit la taille des boutons. Le panneau se replie
 * et s'ouvre au bouton.
 * ---------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.au-js .au-entete__panneau {
		display: none;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
		background: var(--au-fond-alt);
		border-top: 1px solid var(--au-filet);
		border-bottom: 1px solid var(--au-filet);
		/* Un panneau plus haut que l'écran doit défiler, sans jamais déborder
		   horizontalement. */
		max-height: calc(100vh - 72px);
		overflow-y: auto;
		overflow-x: hidden;
	}

	.au-js .au-entete--ouvert .au-entete__panneau { display: flex; }

	.au-entete { position: sticky; }
	.au-entete__interieur { position: relative; }

	.au-js .au-nav__liste {
		flex-direction: column;
		gap: 0;
	}

	/* Chaque entrée devient une ligne pleine largeur, séparée par un filet, avec
	   une hauteur de cible confortable au pouce. */
	.au-js .au-nav__liste li { border-bottom: 1px solid var(--au-filet); }

	.au-js .au-nav__liste a {
		display: flex;
		align-items: center;
		min-height: 48px;
		font-size: var(--wp--preset--font-size--normal);
		text-transform: none;
		letter-spacing: 0;
	}

	.au-js .au-actions {
		justify-content: flex-start;
		padding-block: var(--wp--preset--spacing--30);
	}

	.au-js .au-entete__cta {
		display: block;
		text-align: center;
		padding: var(--wp--preset--spacing--30);
		font-size: var(--wp--preset--font-size--normal);
	}
}

/* Sur très petit écran, la marque cède la place avant les commandes. */
@media (max-width: 380px) {
	.au-marque { font-size: var(--wp--preset--font-size--h6); }
	.au-conteneur { padding-inline: var(--wp--preset--spacing--30); }
}

.au-marque {
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--h5);
	color: var(--au-texte);
	text-decoration: none;
	letter-spacing: 0.02em;
}

.au-nav__liste {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

.au-nav__liste a {
	color: var(--au-texte-doux);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--petit);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.au-nav__liste a:hover,
.au-nav__liste a:focus-visible {
	color: var(--au-accent);
}

/* ── Bouton ─────────────────────────────────────────────────────────────── */

.au-bouton {
	display: inline-block;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--au-accent);
	color: var(--au-sur-accent);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--petit);
	text-decoration: none;
	letter-spacing: 0.04em;
	border: 1px solid var(--au-accent);
}

.au-bouton:hover,
.au-bouton:focus-visible {
	background: transparent;
	color: var(--au-accent);
}

/* ── En-tête de section — composant unique ──────────────────────────────── */

/* Le cadrage propre aux sections : un numéro d'ordre précédé d'un filet or, le
   titre en serif, l'introduction bornée à une largeur de lecture confortable.
   Le numéro est calculé, jamais saisi. */
.au-entete-section {
	max-width: var(--wp--style--global--content-size, 760px);
	margin-block-end: var(--wp--preset--spacing--70);
}

.au-entete-section__surtitre {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--au-accent);
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--petit);
	letter-spacing: 0.16em;
}

.au-entete-section__filet {
	display: block;
	width: 40px;
	height: 1px;
	background: var(--au-accent);
	flex: none;
}

.au-entete-section__titre {
	margin: 0;
	max-width: 30ch;
}

/* ── Le trait sous le titre ─────────────────────────────────────────────────
 *
 * Le gabarit pose un trait décoratif dessiné — un SVG au tracé irrégulier, façon
 * coup de crayon. Nous n'en reprenons que la FONCTION, avec notre vocabulaire :
 * un filet de 1 px.
 *
 * Le tracé lui-même n'est pas reproduit, et ce n'est pas un oubli : il demande
 * un fichier que nous n'avons pas, et un trait dessiné à la main contredit la
 * règle du filet de 1 px — celle-là même qui vient d'être confirmée. Reprendre
 * la disposition ne veut pas dire reprendre l'ornement.
 * ------------------------------------------------------------------------ */

.au-entete-section__titre::after {
	content: "";
	display: block;
	width: 64px;
	height: 1px;
	background: var(--au-accent);
	margin-top: var(--wp--preset--spacing--40);
}

.au-section--centre .au-entete-section__titre::after {
	margin-inline: auto;
}

.au-entete-section__intro {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--au-filet);
	max-width: 62ch;
	color: var(--au-texte-doux);
}

/* ── Listes et cartes ───────────────────────────────────────────────────── */

.au-liste {
	display: grid;
	/* `min(100%, 300px)` est la garde contre le débordement horizontal : sans
	   elle, la colonne réclame 300 px même sur un écran de 320 px avec
	   rembourrage, et la page devient plus large que l'écran. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: var(--wp--preset--spacing--60);
}

.au-carte {
	border: 1px solid var(--au-filet);
	padding: var(--wp--preset--spacing--40);
}

.au-carte__titre {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--h4);
}

.au-carte__titre a {
	color: var(--au-texte);
	text-decoration: none;
}

.au-carte__titre a:hover,
.au-carte__titre a:focus-visible {
	color: var(--au-accent);
}

.au-carte__extrait {
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--petit);
}

/* ── Pied de page ───────────────────────────────────────────────────────── */

.au-pied {
	background: var(--au-fond-alt);
	border-top: 1px solid var(--au-filet);
	padding-block: var(--wp--preset--spacing--70);
}

/* Trois colonnes en bureau : identité, contact, navigation. La grille se replie
   d'elle-même sous 640px — `auto-fit` évite un point de rupture à maintenir. */
.au-pied__interieur {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	align-items: start;
}

/* Les mentions courent sous les colonnes, séparées par un filet. */
.au-pied__mention,
.au-pied__marques {
	grid-column: 1 / -1;
}

.au-pied__mention {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--au-filet);
}

.au-pied__identite {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.au-pied__accroche {
	margin: 0;
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--petit);
	max-width: 34ch;
}

/* Contact et navigations s'empilent dans leur colonne plutôt que de courir
   en ligne : en trois colonnes, une liste horizontale se casse mal. */
.au-pied__contact,
.au-pied__liste {
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.au-pied__contact a,
.au-pied__liste a {
	color: var(--au-texte-doux);
	text-decoration: none;
}

.au-pied__contact a:hover,
.au-pied__contact a:focus-visible,
.au-pied__liste a:hover,
.au-pied__liste a:focus-visible {
	color: var(--au-accent);
}

/* Les deux menus de pied partagent la troisième colonne. */
.au-pied__nav,
.au-pied__legal {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.au-pied__nom {
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--h5);
	margin: 0;
}

.au-pied__contact {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--petit);
}

.au-pied__liste {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--petit);
}

.au-pied__mention,
.au-pied__marques {
	margin: 0;
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--petit);
}

/* ── Accessibilité ──────────────────────────────────────────────────────── */

:focus-visible {
	outline: 2px solid var(--au-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ── Bascule de thème ───────────────────────────────────────────────────────
 *
 * Deux icônes superposées, une seule visible selon le thème actif. Le choix se
 * fait en CSS et non en JavaScript : le bouton est donc correct dès le premier
 * rendu, y compris avant que le script ne soit exécuté.
 * ------------------------------------------------------------------------ */

.au-actions {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.au-bascule {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--au-filet);
	color: var(--au-texte-doux);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.au-bascule:hover,
.au-bascule:focus-visible {
	color: var(--au-accent);
	border-color: var(--au-accent);
}

/* Les deux icônes occupent la même cellule de grille : aucun décalage au
   basculement, et aucune hauteur de ligne à corriger. */
.au-bascule__icone {
	grid-area: 1 / 1;
}

/* Par défaut — thème sombre — on propose de passer au clair. */
.au-bascule__icone--clair { display: block; }
.au-bascule__icone--sombre { display: none; }

:root[data-theme="clair"] .au-bascule__icone--clair { display: none; }
:root[data-theme="clair"] .au-bascule__icone--sombre { display: block; }

@media (prefers-color-scheme: light) {
	:root:not([data-theme]) .au-bascule__icone--clair { display: none; }
	:root:not([data-theme]) .au-bascule__icone--sombre { display: block; }
}

/* ── Page d'accueil ─────────────────────────────────────────────────────────
 *
 * Sections en alternance de fond, séparées par des filets de 1 px. Aucune ombre,
 * aucun angle arrondi : le rythme vient de l'espacement et des filets.
 * ------------------------------------------------------------------------ */

/* Le RYTHME des sections est le seul espacement qui sorte de l'échelle fermée,
   et il n'en sort que par le haut : le gabarit de référence pose `py-120` sur
   presque toutes ses sections, là où notre échelle s'arrête à 96 px. L'écart se
   voyait — nos sections paraissaient tassées, et c'est une des dispositions que
   la reprise du gabarit devait corriger.

   Une seule valeur nouvelle, bornée, fluide entre les deux extrémités : 64 px
   sur téléphone, 120 px au-delà. Un `clamp` plutôt qu'une média-requête pour
   qu'il n'y ait pas de saut de rythme à la largeur de bascule. */
:root {
	--au-rythme: clamp(64px, 9vw, 120px);
}

.au-section {
	padding-block: var(--au-rythme);
	border-bottom: 1px solid var(--au-filet);
}

.au-section--alt {
	background: var(--au-fond-alt);
}

/* --- Accroche ----------------------------------------------------------- */

.au-hero {
	/* Presque aucun rembourrage en haut : l'accroche suit immédiatement l'en-tête
	   collant, et chaque pixel gagné au-dessus de la ligne de flottaison est un
	   pixel de discours visible sans défiler. */
	padding-block: var(--wp--preset--spacing--10) var(--au-rythme);
	border-bottom: 1px solid var(--au-filet);
}

/* La SCÈNE porte le bandeau, pas la section : posé sur la section entière, il
   courait derrière la bande de preuves et la coupait en deux — une moitié sur
   l'anthracite, l'autre sur le fond de page. */
.au-hero__scene {
	position: relative;
	/* Le bandeau est calé sur le bord gauche de la fenêtre, pas sur le
	   conteneur : sans cette coupe, il déborde et fait défiler la page
	   horizontalement sur les écrans étroits. */
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--60);
}

/* ── Le bandeau de l'accroche ───────────────────────────────────────────────
 *
 * Le gabarit pose une surface pleine hauteur sur 45 % de la largeur, à gauche,
 * derrière le visuel — 100 % de large et 50 % de haut en mobile. C'est ce qui
 * donne à l'accroche son poids : sans elle, le visuel flotte sur le même fond
 * que le texte et la page démarre sans arête.
 *
 * Une SURFACE, pas une ombre ni un dégradé : la règle des trois interdits tient,
 * et elle n'a jamais empêché cette disposition — c'est bien ce qui a été constaté
 * le 29/07/2026 en la reprenant à angles vifs.
 * ------------------------------------------------------------------------ */

.au-hero__scene::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 45%;
	background: var(--au-bande);
	z-index: 0;
}

/* Le contenu repasse au-dessus du bandeau. Sans `position`, `z-index` n'a aucun
   effet et le bandeau recouvrirait le visuel. */
.au-hero__scene > .au-conteneur {
	position: relative;
	z-index: 1;
}

/* Le gabarit garde le bandeau en mobile — 100 % de large, 50 % de haut, en haut.
   Nous ne le pouvons pas, et la raison est une décision antérieure : sous 900 px
   notre discours passe AVANT le visuel, pour que le message soit lisible sans
   défiler. Un bandeau ancré en haut se retrouverait donc derrière le texte, en
   anthracite sous du texte anthracite.
   Il disparaît plutôt que de rendre le discours illisible. */
@media (max-width: 900px) {
	.au-hero__scene::before { content: none; }

	.au-hero__scene { padding-block: 0; }
}

/* Deux colonnes en bureau, une seule en mobile. Les preuves courent sous les
   deux colonnes. */
/* ── L'inversion visuel / discours ──────────────────────────────────────────
 *
 * Le gabarit place le VISUEL À GAUCHE et le discours à droite ; nous avions
 * l'inverse. L'ordre du document reste pourtant discours d'abord : c'est celui
 * que lisent les lecteurs d'écran et celui que suit le clavier, et le message
 * doit y venir avant l'illustration.
 *
 * Seul l'ordre VISUEL est inversé, en bureau uniquement. L'écart entre ordre du
 * document et ordre affiché est une faute d'accessibilité dès qu'il touche des
 * éléments focalisables : ici la colonne déplacée ne contient qu'une image, sans
 * aucun élément focalisable. Le parcours au clavier est donc inchangé.
 * ------------------------------------------------------------------------ */

/* Le discours reprend la part large — 7 colonnes sur 12, la proportion que le
   gabarit emploie partout où un discours partage la ligne avec un visuel. La
   répartition précédente, presque à égalité, donnait une colonne de texte plus
   étroite que la mesure des sections situées plus bas : deux largeurs de lecture
   différentes sur une même page se remarquent au défilement. */
.au-hero__grille {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: var(--wp--preset--spacing--70);
}

@media (min-width: 901px) {
	.au-hero__visuel { order: -1; }

	/*
	 * Le discours OCCUPE sa colonne. Sa borne de 34 caractères datait du temps
	 * où il était la colonne large, à gauche ; conservée après l'inversion, elle
	 * laissait près de 270 px de vide à droite sur un écran de 1200 px — c'est le
	 * décalage constaté, et il venait de là, pas du bandeau.
	 *
	 * La mesure de lecture est reportée sur le SOUS-TITRE, seul texte assez long
	 * pour en avoir besoin : le sur-titre tient sur une ligne et le titre porte
	 * déjà la sienne.
	 */
	.au-hero__discours {
		max-width: none;
		padding-inline-start: var(--wp--preset--spacing--40);
	}

	/* Plus de borne de lecture ici : la colonne en tient lieu, et elle mesure
	   désormais à peu près la largeur de contenu des sections plus bas. */
	.au-hero__sous-titre { max-width: none; }

	/* Le VISUEL n'est pas touché : il garde son plafond de 460 px et son
	   centrage. C'est le discours qu'il fallait élargir, et lui seul — étirer le
	   visuel en même temps changeait la composition au lieu de corriger la
	   mesure. Sa colonne fait désormais 453 px : le plafond ne joue plus, et le
	   visuel s'affiche à la taille qu'il avait avant l'inversion. */
}

.au-hero__discours {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	max-width: 64ch;
	/* `minmax(0, …)` plus cette borne : une colonne de grille ne doit jamais
	   réclamer plus que sa part, sinon la page déborde. */
	min-width: 0;
}

.au-hero__surtitre {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	color: var(--au-accent);
	font-size: var(--wp--preset--font-size--petit);
	letter-spacing: 0.1em;
	max-width: 46ch;
}

.au-hero__surtitre::before {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	background: var(--au-accent);
	flex: none;
}

.au-hero__titre {
	margin: 0;
	font-size: var(--wp--preset--font-size--h1);
	max-width: 24ch;
}

.au-hero__visuel {
	min-width: 0;
	justify-self: center;
}

.au-hero__visuel img {
	width: 100%;
	max-width: 460px;
	height: auto;
	display: block;
}

.au-preuves {
	margin-top: var(--wp--preset--spacing--60);
}

@media (max-width: 900px) {
	.au-hero__grille {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
	}

	.au-hero__discours { max-width: 64ch; }

	/* Le visuel passe après le texte et se réduit : il illustre, il ne doit pas
	   repousser le discours sous la ligne de flottaison. */
	.au-hero__visuel img { max-width: 320px; }
}

.au-hero__sous-titre {
	margin: 0;
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--h5);
	line-height: 1.6;
}

.au-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.au-lien-fleche {
	color: var(--au-texte);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--petit);
	border-bottom: 1px solid var(--au-accent);
	padding-bottom: 2px;
}

.au-lien-fleche:hover,
.au-lien-fleche:focus-visible {
	color: var(--au-accent);
}

/* --- Preuves calculées -------------------------------------------------- */

.au-preuves {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: var(--wp--preset--spacing--40) 0 0;
	list-style: none;
	border-top: 1px solid var(--au-filet);
}

.au-preuves__item {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	/* Le chiffre en haut, le libellé dessous, alignés sur la même ligne de base
	   d'un item à l'autre : `align-content: start` empêche un libellé de deux
	   lignes de décaler le chiffre de son voisin. */
	align-content: start;
}

/* Le chiffre est l'élément le plus gros de la section après le titre, et c'est
   voulu : ce sont les trois seuls chiffres durs de la page. À l'échelle de h3,
   ils se lisaient comme un intertitre — donc comme du texte, pas comme une
   preuve. L'échelle propre est plus grande que h2 en bureau et redescend sous
   h3 en mobile, où trois colonnes deviennent trois lignes. */
.au-preuves__chiffre {
	font-family: var(--wp--preset--font-family--titre);
	font-size: clamp(2.25rem, 3.4vw + 1rem, 4rem);
	color: var(--au-accent);
	line-height: 0.95;
	/* Les chiffres gardent la même largeur pendant le décompte : sans cela, le
	   libellé sous le chiffre tremble à chaque image. */
	font-variant-numeric: tabular-nums;
}

.au-preuves__libelle {
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.4;
	max-width: 22ch;
}

/* --- Créneau éditorial -------------------------------------------------- */

.au-editorial {
	max-width: var(--wp--style--global--content-size, 760px);
}

.au-editorial > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

/* --- Grilles de section ------------------------------------------------- */

.au-liste--deux { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.au-liste--trois { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.au-liste--quatre { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

.au-carte__secteur {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--au-accent);
	font-size: var(--wp--preset--font-size--petit);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.au-carte__promesse {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--au-texte-doux);
}

.au-carte__preuve,
.au-carte__impact {
	margin: 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--au-filet);
	font-family: var(--wp--preset--font-family--titre);
	color: var(--au-accent);
}

/* --- Offre phare ------------------------------------------------------- */

.au-offre {
	max-width: var(--wp--style--global--content-size, 760px);
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--au-accent);
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.au-offre__nom {
	margin: 0;
	font-size: var(--wp--preset--font-size--h3);
}

.au-offre__texte {
	margin: 0;
	color: var(--au-texte-doux);
}

.au-offre__conditions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--au-filet);
}

.au-offre__prix {
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--h4);
	color: var(--au-accent);
}

.au-offre__duree {
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--petit);
	align-self: center;
}

.au-offre .au-bouton {
	justify-self: start;
}

/* --- Équipe ------------------------------------------------------------ */

.au-membre {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.au-membre__portrait img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	filter: grayscale(1);
}

.au-membre__nom {
	margin: 0;
	font-size: var(--wp--preset--font-size--h6);
}

.au-membre__role {
	margin: 0;
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--petit);
}

/* --- Technologies ------------------------------------------------------ */

/* ── La stack : un INVENTAIRE, plus une nuée d'étiquettes ───────────────────
 *
 * Les technologies étaient des pastilles posées côte à côte, et leur niveau
 * n'était rendu que par un motif de bordure. Deux défauts pour le prix d'un : la
 * nuée d'étiquettes est exactement le « mur de logos indifférenciés » que la
 * documentation dit vouloir éviter, et le motif de bordure ne dit rien à qui
 * n'en connaît pas le code.
 *
 * Une liste de LIGNES, nom à gauche, niveau écrit à droite : c'est la forme d'un
 * inventaire technique, et c'est ce que la section prétend être. Elle occupe
 * aussi la largeur, là où les pastilles laissaient la moitié du bloc vide.
 * ---------------------------------------------------------------------- */

.au-technos {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--au-filet);
}

.au-technos__lien {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--au-filet);
	color: var(--au-texte);
	text-decoration: none;
	transition: border-color 160ms ease, color 160ms ease;
}

.au-technos__lien:hover,
.au-technos__lien:focus-visible {
	border-bottom-color: var(--au-accent);
	color: var(--au-accent);
}

.au-technos__nom {
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--h5);
	line-height: 1.2;
}

.au-technos__niveau {
	flex: none;
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--petit);
	letter-spacing: 0.04em;
	text-transform: lowercase;
}

/* La ligne « en production » porte un filet d'accent à gauche ; « en veille »
   reste sobre. Le marquage ne remplace plus le mot, il l'accompagne — et la
   limite reste assumée, écrite en toutes lettres. */
.au-technos__item[data-niveau="production"] .au-technos__lien {
	padding-inline-start: var(--wp--preset--spacing--30);
	border-left: 2px solid var(--au-accent);
}

.au-technos__item[data-niveau="veille"] .au-technos__nom {
	color: var(--au-texte-doux);
}

@media (prefers-reduced-motion: reduce) {
	.au-technos__lien { transition: none; }
}

/* --- Appel à l'action final -------------------------------------------- */

.au-appel {
	background: var(--au-fond-alt);
	border-bottom: none;
}

.au-appel__interieur {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	justify-items: start;
	max-width: 56ch;
}

.au-appel__titre {
	margin: 0;
}

.au-appel__texte {
	margin: 0;
	color: var(--au-texte-doux);
}

/* ── Effets ─────────────────────────────────────────────────────────────────
 *
 * Le CSS porte l'ÉTAT FINAL. Sans JavaScript, la page est complète et lisible :
 * les effets sont un enrichissement, jamais une condition d'affichage.
 *
 * Tout est enfermé dans `prefers-reduced-motion: no-preference`. Une animation
 * qu'on ne peut pas refuser est un défaut d'accessibilité, pas une finition.
 * ------------------------------------------------------------------------ */

/* --- Défilement par ancres --------------------------------------------- *
 * Nécessité fonctionnelle, pas décoration : le menu principal pointe vers des
 * ancres, et un en-tête collant masquerait la cible sans `scroll-margin-top`.
 * ---------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

[id] {
	scroll-margin-top: 88px;
}

/* --- En-tête collant --------------------------------------------------- */

.au-entete {
	position: sticky;
	top: 0;
	z-index: 50;
	/* Le fond doit être opaque : un en-tête translucide laisserait le texte
	   défiler par-dessous, et aucune ombre n'est disponible pour l'en séparer. */
	background: var(--au-fond-alt);
	transition: min-height 160ms ease;
}

.au-entete--condense .au-entete__interieur {
	min-height: 56px;
}

@media (prefers-reduced-motion: reduce) {
	.au-entete { transition: none; }
}

/* --- Révélation au défilement ------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	/* `.au-js` est posée par le script en ligne de l'en-tête. Sans elle, rien
	   n'est masqué : JavaScript désactivé ou en échec ne doit jamais produire
	   une page vide. */
	.au-js [data-au-revele] {
		opacity: 0;
		transform: translateY(12px);
		transition: opacity 420ms ease, transform 420ms ease;
	}

	.au-js [data-au-revele="vu"] {
		opacity: 1;
		transform: none;
	}

	/* Décalage léger entre les cartes d'une même grille : le regard suit la
	   lecture au lieu de recevoir tout le bloc d'un coup. */
	.au-js [data-au-revele] .au-carte:nth-child(2),
	.au-js [data-au-revele] .au-membre:nth-child(2) { transition-delay: 60ms; }
	.au-js [data-au-revele] .au-carte:nth-child(3),
	.au-js [data-au-revele] .au-membre:nth-child(3) { transition-delay: 120ms; }
	.au-js [data-au-revele] .au-carte:nth-child(4),
	.au-js [data-au-revele] .au-membre:nth-child(4) { transition-delay: 180ms; }
}

/* --- Rail tactile ------------------------------------------------------ *
 * Le substitut natif au carrousel, pour zéro octet de JavaScript. Sous 640 px,
 * les grilles de cartes défilent horizontalement avec accrochage. On garde la
 * lisibilité d'une grille en bureau, et le geste attendu sur mobile.
 * ---------------------------------------------------------------------- */

@media (max-width: 640px) {
	.au-liste--trois,
	.au-liste--quatre {
		grid-auto-flow: column;
		grid-auto-columns: 78%;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* AUCUNE marge négative ici. La version précédente sortait le rail du
		   conteneur pour un effet bord à bord, et rendait la PAGE plus large que
		   l'écran : on ne pouvait plus lire le contenu sans défilement
		   horizontal. Le rail reste dans le rembourrage. */
		padding-bottom: var(--wp--preset--spacing--20);
		scrollbar-width: none;
	}

	.au-liste--trois::-webkit-scrollbar,
	.au-liste--quatre::-webkit-scrollbar { display: none; }

	.au-liste--trois > *,
	.au-liste--quatre > * {
		scroll-snap-align: start;
	}
}

/* --- Survol des cartes ------------------------------------------------- *
 * Un filet qui passe à l'or : le seul retour visuel compatible avec « aucune
 * ombre portée ».
 * ---------------------------------------------------------------------- */

.au-carte {
	transition: border-color 160ms ease;
}

.au-carte:hover,
.au-carte:focus-within {
	border-color: var(--au-accent);
}

@media (prefers-reduced-motion: reduce) {
	.au-carte { transition: none; }
}

/* --- Visuel des cartes -------------------------------------------------- */

.au-carte__visuel {
	margin: calc(-1 * var(--wp--preset--spacing--40)) calc(-1 * var(--wp--preset--spacing--40)) var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--au-filet);
	background: var(--au-fond-alt);
	overflow: hidden;
}

/* L'image ne remplit plus la bande : elle en occupe 60 %, centrée. Le motif
   géométrique de repli n'est pas une photographie, et étiré bord à bord il se
   lisait comme une image réelle mal cadrée. La bande garde sa hauteur, donc les
   cartes restent alignées entre elles. */
.au-carte__visuel img {
	display: block;
	width: 60%;
	margin-inline: auto;
	aspect-ratio: 16 / 9;
	object-fit: contain;
}

/* La carte reprend le rembourrage en propre, sinon le visuel ne peut pas
   atteindre ses bords. */
.au-carte {
	padding: var(--wp--preset--spacing--40);
	overflow: hidden;
}

/* ── Visuel d'accroche ──────────────────────────────────────────────────────
 *
 * Le seul relief autorisé sans ombre portée : un filet or décalé derrière le
 * cadre de l'image. Il donne de la profondeur en six déclarations, et zéro
 * octet de JavaScript.
 * ------------------------------------------------------------------------ */

.au-hero__cadre {
	position: relative;
	margin: 0;
	padding: 0;
	border: 1px solid var(--au-filet);
	background: var(--au-fond-alt);
}

.au-hero__cadre::before {
	content: "";
	position: absolute;
	inset: 12px -12px -12px 12px;
	border: 1px solid var(--au-accent);
	/* Derrière l'image, et hors du flux d'accessibilité : c'est un ornement. */
	z-index: -1;
	pointer-events: none;
}

.au-hero__image {
	display: block;
	width: 100%;
	height: auto;
}

/* Le motif de repli n'est pas une photographie : il respire dans son cadre
   plutôt que de le remplir bord à bord. */
.au-hero__cadre--motif {
	padding: var(--wp--preset--spacing--40);
	border-color: var(--au-filet);
}

.au-hero__cadre--motif::before {
	inset: 8px -8px -8px 8px;
}

.au-hero__legende {
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--au-filet);
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--petit);
}

.au-hero__visuel {
	position: relative;
	/* Le décalage du filet sort du cadre de 12 px : sans cette marge, il
	   déborderait de la colonne et élargirait la page. */
	padding: 0 12px 12px 0;
	max-width: 520px;
	width: 100%;
}

@media (max-width: 900px) {
	.au-hero__visuel { max-width: 400px; }
}

/* ── Appels à l'action ──────────────────────────────────────────────────────
 *
 * Une seule forme pour les deux placements — relance de section et pied de
 * fiche. Encadrée d'un filet or, sans aplat : elle se distingue du corps de la
 * page sans crier.
 * ------------------------------------------------------------------------ */

.au-relance {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	justify-items: start;
	/* max-width: var(--wp--style--global--content-size, 760px); */
	margin-block-start: var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--au-accent);
}

.au-relance__titre {
	margin: 0;
	font-size: var(--wp--preset--font-size--h4);
}

.au-relance__texte {
	margin: 0;
	color: var(--au-texte-doux);
}

.au-relance__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

/* --- Barre d'action fixe sur mobile ------------------------------------- *
 * Aucun JavaScript : elle est dans le document, positionnée en `fixed` sous
 * 900 px et absente du rendu au-dessus. Sur une page longue lue au pouce, c'est
 * le placement le plus efficace.
 * ---------------------------------------------------------------------- */

.au-barre-action {
	display: none;
}

@media (max-width: 900px) {
	.au-barre-action {
		display: block;
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 60;
		background: var(--au-fond-alt);
		border-top: 1px solid var(--au-filet);
		padding-block: var(--wp--preset--spacing--20);
		/* Au-dessus de la barre système des navigateurs mobiles. */
		padding-bottom: max(var(--wp--preset--spacing--20), env(safe-area-inset-bottom));
	}

	.au-barre-action__interieur {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--30);
	}

	.au-barre-action__texte {
		color: var(--au-texte-doux);
		font-size: var(--wp--preset--font-size--petit);
		/* Le texte cède avant le bouton : c'est le bouton qui porte l'action. */
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.au-barre-action__bouton {
		flex: none;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* La barre masquerait la fin du document : on rend sa hauteur au pied de
	   page plutôt que de laisser du contenu inatteignable. */
	body:has(.au-barre-action) .au-pied {
		padding-bottom: calc(var(--wp--preset--spacing--70) + 72px);
	}
}

/* ── Fiches ─────────────────────────────────────────────────────────────────
 *
 * Une fiche est une page de LECTURE : la mesure de ligne est bornée, et rien ne
 * vient concurrencer le texte. Le bandeau de titre reprend le fond alterné, ce
 * qui pose l'en-tête sans y ajouter d'ornement.
 * ------------------------------------------------------------------------ */

.au-fiche__entete {
	background: var(--au-fond-alt);
	border-bottom: 1px solid var(--au-filet);
	padding-block: var(--wp--preset--spacing--70);
	margin-block-end: var(--wp--preset--spacing--70);
}

.au-fiche__surtitre {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--petit);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.au-fiche__surtitre::before {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	background: var(--au-accent);
	flex: none;
}

.au-fiche__surtitre a {
	color: var(--au-accent);
	text-decoration: none;
}

.au-fiche__surtitre a:hover,
.au-fiche__surtitre a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.au-fiche__titre {
	margin: 0;
	font-size: var(--wp--preset--font-size--h1);
	max-width: 28ch;
}

.au-fiche__chapeau {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--au-filet);
	max-width: 62ch;
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--h5);
	line-height: 1.6;
}

.au-fiche__visuel {
	margin-block-end: var(--wp--preset--spacing--70);
}

.au-fiche__visuel img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--au-filet);
}

/* Le corps et sa colonne latérale. La colonne passe SOUS le texte en mobile :
   les classements accompagnent la lecture, ils ne la précèdent pas. */
.au-fiche__grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
	gap: var(--wp--preset--spacing--70);
	align-items: start;
}

@media (max-width: 900px) {
	.au-fiche__grille {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
	}
}

.au-fiche__cote:empty {
	display: none;
}

.au-fiche__sous-titre {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--h6);
}

.au-classement + .au-classement {
	margin-top: var(--wp--preset--spacing--40);
}

.au-classement__titre {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--au-texte-doux);
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--petit);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 500;
}

.au-fiche__classements {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--au-filet);
}

.au-apparentes {
	padding-block: var(--wp--preset--spacing--70);
	border-top: 1px solid var(--au-filet);
	margin-block-start: var(--wp--preset--spacing--70);
}

/* --- Corps rédactionnel ------------------------------------------------- *
 * La mesure de ligne est la seule décision qui compte sur une page de lecture :
 * au-delà de 70 caractères, l'œil perd la ligne suivante.
 * ---------------------------------------------------------------------- */

/* La mesure de lecture n'est plus posée ici. `.au-prose` sert désormais aussi
   dans des colonnes déjà bornées — le corps d'une fiche, la colonne d'offre, une
   réponse de FAQ — et une seconde borne y laissait un vide à droite sans que
   rien n'indique d'où il venait. La colonne qui accueille le texte décide de sa
   largeur ; `.au-prose` ne décide que du rythme vertical et du style. */
.au-prose {
	max-width: none;
}

.au-prose > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

.au-prose h2 {
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--au-filet);
	font-size: var(--wp--preset--font-size--h3);
}

.au-prose h3 {
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--h5);
}

.au-prose ul,
.au-prose ol {
	padding-left: var(--wp--preset--spacing--40);
}

.au-prose li + li {
	margin-top: var(--wp--preset--spacing--20);
}

.au-prose a {
	color: var(--au-texte);
	text-decoration: underline;
	text-decoration-color: var(--au-accent);
	text-underline-offset: 3px;
}

.au-prose a:hover,
.au-prose a:focus-visible {
	color: var(--au-accent);
}

.au-prose blockquote {
	margin: 0;
	padding-left: var(--wp--preset--spacing--40);
	border-left: 1px solid var(--au-accent);
	color: var(--au-texte-doux);
	font-family: var(--wp--preset--font-family--titre);
}

.au-prose strong {
	color: var(--au-texte);
	font-weight: 600;
}

/* ── Archives ───────────────────────────────────────────────────────────── */

.au-archive {
	padding-block-end: var(--wp--preset--spacing--70);
}

.au-vide {
	max-width: 62ch;
	color: var(--au-texte-doux);
}

.au-archive .wp-block-query-pagination,
.au-archive .navigation.pagination {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--au-filet);
}

.au-archive .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.au-archive .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	min-height: 40px;
	padding-inline: var(--wp--preset--spacing--20);
	border: 1px solid var(--au-filet);
	color: var(--au-texte-doux);
	text-decoration: none;
}

.au-archive .page-numbers:hover,
.au-archive .page-numbers:focus-visible {
	border-color: var(--au-accent);
	color: var(--au-accent);
}

.au-archive .page-numbers.current {
	background: var(--au-accent);
	border-color: var(--au-accent);
	color: var(--au-sur-accent);
	font-weight: 600;
}

/* ── Contact ────────────────────────────────────────────────────────────────
 *
 * Les coordonnées d'abord, le formulaire ensuite — un dirigeant qui veut
 * appeler ne doit pas remplir un formulaire pour trouver un numéro.
 * ------------------------------------------------------------------------ */

.au-contact {
	display: grid;
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--70);
	align-items: start;
}

@media (max-width: 900px) {
	.au-contact {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
	}
}

.au-contact__liste {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.au-contact__item {
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--au-filet);
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--petit);
}

.au-contact__item a {
	color: var(--au-texte);
	text-decoration: none;
}

.au-contact__item a:hover,
.au-contact__item a:focus-visible {
	color: var(--au-accent);
}

/* ── Formulaire ─────────────────────────────────────────────────────────────
 *
 * Champs à filets de 1 px, sans arrondi, sans ombre — le même vocabulaire que
 * le reste. Le focus est franc : un formulaire dont on perd le curseur au
 * clavier est un formulaire abandonné.
 * ------------------------------------------------------------------------ */

.au-formulaire {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	max-width: 640px;
}

.au-formulaire__champ {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.au-formulaire__etiquette {
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--petit);
	letter-spacing: 0.04em;
}

.au-formulaire__requis {
	color: var(--au-accent);
	margin-left: 0.25em;
}

/* Le sélecteur porte sur le CONTENEUR de champ, pas sur le formulaire.
   C'est ce qui permet à l'extension du diagnostic d'hériter exactement des mêmes
   champs sans que le thème la connaisse — et sans quoi ses coordonnées
   retombaient sur les champs par défaut du navigateur, deux fois plus compacts
   que les nôtres. */
/* ── Champs SOULIGNÉS, et non encadrés ──────────────────────────────────────
 *
 * La disposition du gabarit : ni cadre ni fond, un seul filet bas. C'est la
 * différence la plus visible entre notre formulaire et le sien, et elle n'a
 * jamais dépendu des angles ou des ombres — un champ encadré reste un rectangle
 * à angles vifs, il pèse simplement quatre fois plus à l'écran.
 *
 * Le rembourrage horizontal tombe à zéro : un champ souligné doit aligner sa
 * saisie sur son étiquette, sinon le texte paraît décalé vers la droite sans
 * raison visible.
 * ------------------------------------------------------------------------ */

.au-formulaire__champ input[type="text"],
.au-formulaire__champ input[type="email"],
.au-formulaire__champ input[type="tel"],
.au-formulaire__champ textarea {
	width: 100%;
	padding: var(--wp--preset--spacing--30) 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--au-filet);
	color: var(--au-texte);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--normal);
	/* Sous 16 px, les navigateurs mobiles zooment à la mise au point et la page
	   déborde ensuite horizontalement. */
	min-height: 44px;
}

/* Le filet s'épaissit à la saisie plutôt que de changer de couleur : sans cadre,
   un simple changement de teinte sur 1 px ne se remarque pas. */
.au-formulaire__champ input:hover,
.au-formulaire__champ textarea:hover {
	border-bottom-color: var(--au-texte-doux);
}

.au-formulaire__champ textarea {
	resize: vertical;
	min-height: 140px;
}

/* La mise au point garde un contour PLEIN et non un simple filet bas : le
   contour est ce qui rend le parcours au clavier suivable, et il ne doit pas
   être sacrifié à la disposition. */
.au-formulaire__champ input:focus,
.au-formulaire__champ textarea:focus {
	outline: 2px solid var(--au-accent);
	outline-offset: 2px;
	border-bottom-color: var(--au-accent);
}

.au-formulaire__champ--erreur input,
.au-formulaire__champ--erreur textarea {
	border-bottom-color: #ca2b2b;
	border-bottom-width: 2px;
}

.au-formulaire__erreur {
	margin: 0;
	color: #e06b6b;
	font-size: var(--wp--preset--font-size--petit);
}

.au-formulaire__case {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.5;
	cursor: pointer;
}

.au-formulaire__case input {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--au-accent);
}

.au-formulaire__mention {
	margin: 0;
	padding-left: var(--wp--preset--spacing--30);
	border-left: 1px solid var(--au-filet);
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--petit);
	max-width: 62ch;
}

.au-formulaire__envoyer {
	justify-self: start;
	min-height: 48px;
	border: 1px solid var(--au-accent);
	cursor: pointer;
	font-family: inherit;
}

/* Le champ leurre. Ni `display: none` ni `hidden` : certains robots ignorent
   les champs ainsi masqués, et le piège ne se refermerait pas. Il est sorti du
   cadre visible, retiré de l'ordre de tabulation et du flux d'accessibilité. */
.au-leurre {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Messages d'état ---------------------------------------------------- */

.au-message {
	max-width: 640px;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--au-filet);
	border-left-width: 3px;
}

.au-message--succes {
	border-left-color: var(--au-accent);
}

.au-message--echec {
	border-left-color: #ca2b2b;
}

/* ── Retour en haut ─────────────────────────────────────────────────────────
 *
 * Un anneau de 1 px, un arc or qui se remplit avec le défilement, une flèche
 * en deux filets. Aucune ombre, aucun arrondi sur le conteneur — le cercle est
 * dessiné en SVG, ce qui ne contredit pas la règle : `border-radius` reste à 0
 * partout, c'est une forme, pas un coin arrondi.
 *
 * Aucun écouteur de défilement : l'arc est animé par `animation-timeline`, et
 * la visibilité par la sentinelle déjà posée pour l'en-tête condensé.
 * ------------------------------------------------------------------------ */

.au-haut {
	position: fixed;
	right: var(--wp--preset--spacing--40);
	bottom: var(--wp--preset--spacing--40);
	z-index: 55;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	color: var(--au-texte);
	text-decoration: none;
	background: var(--au-fond-alt);
}

/* Avec JavaScript, le bouton n'apparaît qu'une fois l'en-tête dépassé. Sans
   JavaScript, il reste visible : un lien de retour en haut affiché en
   permanence ne gêne personne, et il fonctionne. */
.au-js .au-haut {
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}

.au-js .au-haut--visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.au-js .au-haut { transition: none; }
}

.au-haut__anneau {
	grid-area: 1 / 1;
	width: 48px;
	height: 48px;
	/* Le tracé démarre en haut du cercle plutôt qu'à droite. */
	transform: rotate(-90deg);
}

.au-haut__piste,
.au-haut__part {
	fill: none;
	stroke-width: 1.5;
	/* 2 × π × 46 ≈ 289 : la circonférence du cercle tracé. */
	stroke-dasharray: 289;
}

.au-haut__piste {
	stroke: var(--au-filet);
}

.au-haut__part {
	stroke: var(--au-accent);
	stroke-linecap: butt;
	/* Sans animation pilotée par le défilement, l'arc reste complet : le bouton
	   porte alors un anneau or plein, ce qui est un état neutre et lisible. */
	stroke-dashoffset: 0;
}

/* L'anneau se remplit à mesure du défilement du document. Là où
   `animation-timeline` n'existe pas, la règle est ignorée et l'anneau reste
   plein — l'information est décorative, la fonction ne dépend pas d'elle. */
@supports (animation-timeline: scroll()) {
	.au-haut__part {
		animation: au-progression linear;
		animation-timeline: scroll(root block);
	}

	@keyframes au-progression {
		from { stroke-dashoffset: 289; }
		to { stroke-dashoffset: 0; }
	}
}

/* La flèche : deux filets de 1 px, comme le bouton de menu. */
.au-haut__fleche {
	grid-area: 1 / 1;
	display: block;
	width: 10px;
	height: 10px;
	border-top: 1px solid currentColor;
	border-left: 1px solid currentColor;
	transform: rotate(45deg) translate(1px, 1px);
}

.au-haut:hover,
.au-haut:focus-visible {
	color: var(--au-accent);
}

.au-haut:hover .au-haut__piste {
	stroke: var(--au-accent);
}

/* Sur mobile, la barre d'action occupe le bas de l'écran : le bouton remonte
   au-dessus d'elle plutôt que de la chevaucher. */
@media (max-width: 900px) {
	body:has(.au-barre-action) .au-haut {
		bottom: calc(var(--wp--preset--spacing--40) + 72px);
	}
}

/* ── Second visuel d'accroche ───────────────────────────────────────────────
 *
 * Le cliché superposé du gabarit de référence. Décoratif, donc absent du flux
 * d'accessibilité — et retiré sous 900 px, où il empiéterait sur le discours au
 * lieu de l'accompagner.
 * ------------------------------------------------------------------------ */

.au-hero__seconde {
	position: absolute;
	left: calc(-1 * var(--wp--preset--spacing--50));
	bottom: calc(-1 * var(--wp--preset--spacing--40));
	width: 42%;
	max-width: 200px;
	padding: 6px;
	background: var(--au-fond);
	border: 1px solid var(--au-accent);
}

.au-hero__seconde-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@media (max-width: 900px) {
	.au-hero__seconde { display: none; }
}

/* ── Visuel de section ──────────────────────────────────────────────────────
 *
 * Le même composant pour l'offre et l'appel final. Il n'existe QUE si une image
 * est configurée : un cadre vide est pire que l'espace qu'il prétend combler.
 * ------------------------------------------------------------------------ */

.au-section__visuel {
	min-width: 0;
	align-self: center;
	border: 1px solid var(--au-filet);
	padding: var(--wp--preset--spacing--20);
}

.au-section__image {
	display: block;
	width: 100%;
	height: auto;
}

/* Le motif de repli n'est pas une photographie : il respire dans un cadre filet
   plutôt que de remplir la colonne bord à bord, ce qui le ferait passer pour une
   image réelle mal cadrée. */
.au-section__image--motif {
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--au-filet);
	background: var(--au-fond-alt);
}

/* --- Offre en deux colonnes -------------------------------------------- */

/* ── Le contenu est RÉPARTI sur les deux colonnes ───────────────────────────
 *
 * Tout était empilé à gauche — en-tête, offre détaillée, quatre points — face à
 * une colonne de droite qui ne portait qu'une image. Un côté plein, l'autre à
 * peu près vide, et l'image flottant au milieu d'un vide de la hauteur du texte
 * d'en face.
 *
 * À gauche le CONTEXTE : ce que la section annonce, les quatre points qui la
 * résument, et le visuel qui ferme la colonne. À droite l'OFFRE elle-même, qui
 * est le bloc le plus haut. Les deux colonnes se remplissent, et chacune porte
 * une seule idée.
 * ---------------------------------------------------------------------- */

.au-offre__grille {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--wp--preset--spacing--70);
	align-items: start;
}

.au-offre__colonne {
	min-width: 0;
	display: grid;
	gap: var(--wp--preset--spacing--60);
	align-content: start;
}

/* L'en-tête n'y garde pas sa mesure de 760 px : il est déjà borné par sa
   colonne, et l'y borner deux fois recréerait le vide qu'on vient de retirer. */
.au-offre__colonne .au-entete-section {
	max-width: none;
	margin-block-end: 0;
}

/* Les quatre points passent sur UNE colonne : la leur en fait déjà moins de la
   moitié de la page, et deux points côte à côte y tiendraient sur trois lignes
   chacun. */
.au-offre__colonne .au-points {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
}

@media (max-width: 900px) {
	.au-offre__grille {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Le visuel passe en dernier : il illustre, il ne doit pas s'intercaler
	   entre les points et l'offre qu'ils résument. */
	.au-offre__visuel { order: 1; }
}

@media (max-width: 900px) {
	.au-offre__grille:has(.au-offre__visuel) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* L'offre encadrée d'or occupe sa colonne : sa mesure de lecture est celle de
   la colonne, pas une seconde borne posée par-dessus. */
.au-offre .au-prose,
.au-offre {
	max-width: none;
}

/* Les conditions passent EN TÊTE, sous le nom : la durée et le prix sont ce
   qu'on cherche en premier sur une offre, et les lire après vingt lignes de
   déroulé obligeait à redescendre. */
.au-offre__conditions {
	align-items: baseline;
	padding-top: 0;
	padding-bottom: var(--wp--preset--spacing--40);
	border-top: 0;
	border-bottom: 1px solid var(--au-filet);
}

/* ── Points d'une section — carré d'accent, intitulé, phrase ────────────────
 *
 * Disposition du gabarit : deux colonnes de deux, un carré de 70 px rempli
 * d'accent portant l'icône, l'intitulé et une phrase courte à côté.
 *
 * Le carré est un CARRÉ, pas une pastille : le gabarit l'arrondit, notre règle
 * l'interdit, et la disposition n'en dépendait pas — c'est exactement le constat
 * qui a fait retirer la levée des angles arrondis.
 *
 * Le contenu du carré est SOMBRE sur l'accent, jamais clair. La règle ne change
 * pas parce qu'il s'agit d'une icône : `brightness(0)` la ramène au noir quelle
 * que soit sa couleur d'origine.
 * ------------------------------------------------------------------------ */

.au-points {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	margin: 0;
	padding: 0;
	list-style: none;
}

.au-points__item {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}

.au-points__marque {
	display: grid;
	place-items: center;
	flex: none;
	width: 70px;
	height: 70px;
	background: var(--au-accent);
	color: var(--au-sur-accent);
}

.au-points__marque img {
	display: block;
	width: 36px;
	height: 36px;
	object-fit: contain;
	filter: brightness(0);
}

.au-points__rang {
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--h5);
	line-height: 1;
}

.au-points__corps {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	min-width: 0;
}

.au-points__titre {
	color: var(--au-accent);
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--h5);
	line-height: 1.3;
}

.au-points__texte {
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.6;
}

/* --- Appel final en deux colonnes -------------------------------------- */

.au-appel__grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
	gap: var(--wp--preset--spacing--70);
	align-items: center;
}

@media (max-width: 900px) {
	.au-appel__grille {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
	}
}

.au-appel__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

/* Le motif de repli respire dans son cadre plutôt que de le remplir : c'est un
   motif, il ne prétend pas être une photographie. */
.au-appel__visuel--motif {
	padding: var(--wp--preset--spacing--50);
	border-color: var(--au-filet);
	opacity: 0.85;
}

/* ── Cartes d'expertise ─────────────────────────────────────────────────────
 *
 * Composition reprise du gabarit : une icône encadrée, le titre et le texte
 * centrés, le lien de lecture en pied. Les cartes s'alignent par le bas — un
 * lien qui flotte à des hauteurs différentes d'une carte à l'autre se lit comme
 * un défaut de mise en page.
 * ------------------------------------------------------------------------ */

/* Proportions du gabarit : `padding: 70px 20px`, et 56 px entre l'icône et le
   contenu. Les deux sont ramenés aux valeurs de notre échelle fermée — 64/24 et
   48 — plutôt qu'écrits en dur : l'écart est de quelques pixels, l'échelle vaut
   plus que cette précision-là. C'est le RAPPORT qui manquait, pas la valeur
   exacte : nos cartes étaient tassées et se lisaient comme des vignettes. */
.au-carte--expertise {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	text-align: center;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
}

/* Les cartes s'alignent par le BAS de la rangée, comme dans le gabarit : le
   lien de lecture se retrouve alors à la même hauteur d'une carte à l'autre,
   quel que soit le nombre de lignes du texte. */
.au-liste--expertises {
	align-items: end;
}

.au-carte__icone {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	flex: none;
	border: 1px solid var(--au-accent);
	margin-bottom: var(--wp--preset--spacing--60);
	transition: background-color 200ms ease;
}

/* ── Le survol du gabarit ───────────────────────────────────────────────────
 *
 * La pastille se REMPLIT d'accent et l'icône s'inverse. C'était la seule
 * réaction au survol du gabarit que nous n'avions pas reprise, et c'est celle
 * qui dit qu'une carte est cliquable.
 *
 * `:focus-within` autant que `:hover` : la même carte atteinte au clavier doit
 * se signaler de la même façon, sans quoi le parcours au clavier traverse une
 * grille où rien ne bouge.
 *
 * L'icône devient SOMBRE sur l'accent, jamais claire — l'accent est un fond avec
 * du texte sombre par-dessus, et la règle ne change pas parce qu'il s'agit d'une
 * image. `brightness(0)` la ramène au noir quelle que soit sa couleur d'origine.
 * ------------------------------------------------------------------------ */

.au-carte--expertise:hover .au-carte__icone,
.au-carte--expertise:focus-within .au-carte__icone {
	background: var(--au-accent);
}

.au-carte--expertise:hover .au-carte__icone img,
.au-carte--expertise:focus-within .au-carte__icone img {
	filter: brightness(0);
}

.au-carte--expertise:hover .au-carte__rang,
.au-carte--expertise:focus-within .au-carte__rang {
	color: var(--au-sur-accent);
}

@media (prefers-reduced-motion: reduce) {
	.au-carte__icone { transition: none; }
}

.au-carte__icone img {
	display: block;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.au-carte__rang {
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--h4);
	color: var(--au-accent);
	line-height: 1;
}

.au-carte--expertise .au-carte__extrait {
	max-width: 34ch;
}

/* Le lien est poussé en pied de carte : `margin-top: auto` aligne les liens
   entre eux quel que soit le nombre de lignes du texte au-dessus. */
.au-carte__lien {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

/* ── Cartes de référence : le chiffre d'abord ───────────────────────────────
 *
 * L'impact reçoit le traitement des preuves de l'accroche — grand, en serif —
 * parce qu'il a la même nature : c'est un chiffre mesuré. Le titre de mission
 * passe dessous, à la taille d'un texte courant.
 *
 * La méthode est en petit et juste sous le chiffre : assez près pour qu'on ne
 * puisse pas lire l'un sans voir l'autre, assez discrète pour ne pas concurrencer
 * la valeur.
 * ------------------------------------------------------------------------ */

.au-carte--reference {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.au-carte--reference .au-carte__secteur {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.au-carte__impact {
	margin: 0;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--h2);
	line-height: 1.1;
	color: var(--au-accent);
}

.au-carte__methode {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding-inline-start: var(--wp--preset--spacing--30);
	border-left: 1px solid var(--au-filet);
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.5;
}

/* Le titre est poussé en pied : les titres s'alignent entre les cartes quelle
   que soit la longueur de la méthode au-dessus. */
.au-carte--reference .au-carte__titre {
	margin: auto 0 0;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--au-filet);
	font-size: var(--wp--preset--font-size--normal);
	font-family: var(--wp--preset--font-family--titre);
}

/* ── Capacité à livrer : effectifs et stack ─────────────────────────────────
 *
 * Les effectifs sont des chiffres CALCULÉS : ils reçoivent le même traitement
 * que les preuves de l'accroche — grands, en serif, avec leur libellé dessous —
 * parce qu'ils ont la même nature. Un chiffre saisi et un chiffre compté ne
 * doivent pas se ressembler ; ici les deux sont comptés.
 * ------------------------------------------------------------------------ */

/* Deux colonnes : le DISCOURS à gauche, les PREUVES à droite. La section
   n'occupait qu'un peu plus de la moitié de la page — en-tête borné à 760 px,
   effectifs sur une ligne courte, technologies en pastilles — et la moitié
   droite restait vide sur toute sa hauteur. */
.au-capacite {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--wp--preset--spacing--80);
	align-items: start;
}

.au-capacite__discours,
.au-capacite__preuves {
	min-width: 0;
}

/* L'en-tête n'y garde pas sa mesure de 760 px : il est déjà borné par sa
   colonne, et l'y borner deux fois recréerait le vide qu'on vient de retirer. */
.au-capacite__discours .au-entete-section {
	max-width: none;
	margin-block-end: var(--wp--preset--spacing--50);
}

@media (max-width: 900px) {
	.au-capacite {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
	}
}

.au-effectifs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	gap: var(--wp--preset--spacing--50);
	margin: 0 0 var(--wp--preset--spacing--70);
	padding: 0;
	list-style: none;
}

.au-effectifs__item {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	padding-inline-start: var(--wp--preset--spacing--30);
	border-left: 1px solid var(--au-accent);
}

.au-effectifs__valeur {
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--h2);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.au-effectifs__libelle {
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--petit);
}

/* La mention de nommage est en retrait : elle explique, elle n'affirme pas. */
.au-capacite__mention {
	margin: 0;
	padding-inline-start: var(--wp--preset--spacing--30);
	border-left: 1px solid var(--au-filet);
	color: var(--au-texte-doux);
	max-width: 68ch;
}

.au-capacite__intertitre {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--h4);
}

.au-capacite__intro {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--au-texte-doux);
}

/* ── Page introuvable et page « bientôt disponible » ────────────────────────
 *
 * Deux dispositions du gabarit : la première centrée sur une colonne, la seconde
 * en deux colonnes avec le visuel à droite.
 * ------------------------------------------------------------------------ */

.au-404 {
	padding-block: var(--au-rythme);
	max-width: 68ch;
	text-align: center;
	display: grid;
	justify-items: center;
	gap: var(--wp--preset--spacing--40);
}

.au-404__visuel {
	width: 100%;
	max-width: 480px;
}

.au-404__visuel img {
	display: block;
	width: 100%;
	height: auto;
}

.au-404__titre,
.au-404__texte {
	margin: 0;
}

.au-404__texte {
	color: var(--au-texte-doux);
}

.au-bientot {
	padding-block: var(--au-rythme);
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--wp--preset--spacing--70);
	align-items: center;
}

.au-bientot__discours {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	min-width: 0;
}

.au-bientot__titre,
.au-bientot__sous-titre,
.au-bientot__texte {
	margin: 0;
}

.au-bientot__sous-titre {
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--h5);
	line-height: 1.6;
}

.au-bientot__filet {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--au-filet);
}

.au-bientot__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.au-bientot__visuel {
	min-width: 0;
}

.au-bientot__visuel img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Le compte à rebours ------------------------------------------------ */

.au-rebours {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
}

.au-rebours__unite {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	padding-inline-start: var(--wp--preset--spacing--30);
	border-left: 1px solid var(--au-accent);
}

.au-rebours__valeur {
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--h2);
	line-height: 1;
	/* Chiffres à chasse fixe : sans cela, la largeur du bloc saute à chaque
	   changement de minute, et toute la ligne se décale sous les yeux. */
	font-variant-numeric: tabular-nums;
}

.au-rebours__libelle {
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--petit);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@media (max-width: 900px) {
	.au-bientot {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Le visuel passe SOUS le discours : il illustre, il ne doit pas repousser
	   l'information sous la ligne de flottaison. */
	.au-bientot__visuel {
		order: 1;
		max-width: 420px;
	}
}

/* ── Rail défilant, avec ses commandes ──────────────────────────────────────
 *
 * Le gabarit emploie un carrousel de bibliothèque ; nous employons un
 * débordement horizontal avec accrochage natif. Il défile déjà au doigt, à la
 * molette et au clavier — les boutons ne l'ajoutent pas, ils l'exposent à la
 * souris, seul dispositif de pointage sans geste horizontal.
 *
 * La carte n'occupe JAMAIS toute la largeur : trois par écran en bureau, deux en
 * tablette, 82 % en téléphone — de sorte qu'une carte partiellement visible dise
 * qu'il y a une suite. C'est ce qui remplace l'indicateur d'un carrousel.
 * ------------------------------------------------------------------------ */

.au-rail__entete {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
}

.au-rail__entete .au-entete-section {
	margin-block-end: 0;
}

.au-rail__commandes {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	flex: none;
}

.au-rail__bouton {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--au-filet);
	background: transparent;
	color: var(--au-texte);
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.au-rail__bouton:hover:not(:disabled),
.au-rail__bouton:focus-visible:not(:disabled) {
	background: var(--au-accent);
	border-color: var(--au-accent);
	color: var(--au-sur-accent);
}

/* Le bouton en bout de course est INERTE et non masqué : un bouton qui
   disparaît déplace celui d'à côté sous le curseur, et l'on clique alors sur
   l'autre sens. */
.au-rail__bouton:disabled {
	opacity: 0.35;
	cursor: default;
}

/* La flèche est deux filets, comme la marque de la FAQ et le bouton de menu :
   le même vocabulaire partout plutôt qu'une police d'icônes. */
.au-rail__fleche {
	position: relative;
	width: 14px;
	height: 14px;
	border-top: 1px solid currentcolor;
	border-right: 1px solid currentcolor;
	transform: rotate(45deg);
	margin-inline-start: -4px;
}

.au-rail__bouton--precedent .au-rail__fleche {
	transform: rotate(-135deg);
	margin-inline: 4px 0;
}

.au-liste--solutions {
	grid-auto-flow: column;
	/* Trois cartes visibles, l'écart déduit : sans ce calcul, la troisième est
	   coupée en bureau et la grille ne dit plus combien elle en montre. */
	grid-auto-columns: calc((100% - 2 * var(--wp--preset--spacing--60)) / 3);
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: var(--wp--preset--spacing--20);
	scrollbar-width: none;
	margin-top: var(--wp--preset--spacing--60);
}

.au-liste--solutions::-webkit-scrollbar { display: none; }

.au-liste--solutions > * { scroll-snap-align: start; }

@media (max-width: 900px) {
	.au-liste--solutions {
		grid-auto-columns: calc((100% - var(--wp--preset--spacing--60)) / 2);
	}
}

@media (max-width: 640px) {
	.au-liste--solutions { grid-auto-columns: 82%; }

	.au-rail__entete {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.au-liste--solutions { scroll-behavior: auto; }

	.au-rail__bouton { transition: none; }
}

/* ── Cartes de solution ─────────────────────────────────────────────────────
 *
 * Disposition du gabarit : une carte sur surface sombre, ouverte par un carré
 * d'icône, refermée par un pied séparé d'un filet. Au survol, la carte ENTIÈRE
 * se remplit d'accent.
 *
 * Le carré est un carré et non une pastille arrondie — le gabarit lui pose un
 * rayon de 12 px, notre règle l'interdit, et la disposition n'en dépendait pas.
 *
 * Le texte passe au SOMBRE sur l'accent, jamais au blanc comme dans le gabarit :
 * les contrastes des quatre couples ont été mesurés dans ce sens-là.
 * ------------------------------------------------------------------------ */

.au-carte--solution {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	background: var(--au-fond-alt);
	transition: background-color 200ms ease, border-color 200ms ease;
}

.au-carte--solution .au-carte__icone {
	display: grid;
	place-items: center;
	width: 65px;
	height: 65px;
	flex: none;
	border: 1px solid var(--au-accent);
	margin-bottom: var(--wp--preset--spacing--30);
	transition: background-color 200ms ease;
}

.au-carte--solution .au-carte__icone img {
	display: block;
	width: 34px;
	height: 34px;
	object-fit: contain;
}

.au-carte--solution .au-carte__promesse {
	margin: 0;
	color: var(--au-texte-doux);
}

/* Le pied est poussé en bas : `margin-top: auto` aligne les filets entre les
   cartes quel que soit le nombre de lignes du texte au-dessus. */
.au-carte__pied {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--au-filet);
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.au-carte__pied .au-carte__preuve {
	margin: 0;
}

.au-carte__pied .au-carte__lien {
	margin-top: 0;
	padding-top: 0;
}

/* --- Le survol : la carte entière se remplit ---------------------------- */

.au-carte--solution:hover,
.au-carte--solution:focus-within {
	background: var(--au-accent);
	border-color: var(--au-accent);
	color: var(--au-sur-accent);
}

.au-carte--solution:hover .au-carte__titre a,
.au-carte--solution:focus-within .au-carte__titre a,
.au-carte--solution:hover .au-carte__promesse,
.au-carte--solution:focus-within .au-carte__promesse,
.au-carte--solution:hover .au-carte__preuve,
.au-carte--solution:focus-within .au-carte__preuve,
.au-carte--solution:hover .au-carte__lien a,
.au-carte--solution:focus-within .au-carte__lien a {
	color: var(--au-sur-accent);
}

.au-carte--solution:hover .au-carte__pied,
.au-carte--solution:focus-within .au-carte__pied {
	border-top-color: rgb(29 29 32 / 30%);
}

/* Le carré d'icône prend le fond de page : un carré d'accent sur une carte
   d'accent disparaîtrait. */
.au-carte--solution:hover .au-carte__icone,
.au-carte--solution:focus-within .au-carte__icone {
	background: var(--au-fond);
}

@media (prefers-reduced-motion: reduce) {
	.au-carte--solution,
	.au-carte--solution .au-carte__icone { transition: none; }
}

/* ── Questions fréquentes ───────────────────────────────────────────────────
 *
 * `<details>` natif : zéro octet de JavaScript, clavier-accessible par
 * construction, annoncé correctement par les lecteurs d'écran sans un seul
 * attribut ARIA.
 * ------------------------------------------------------------------------ */

/* La FAQ est CENTRÉE, en-tête comprise. C'est la seule section qui l'est, et la
   raison est fonctionnelle : un accordéon fermé n'est qu'une colonne de titres
   courts, et une colonne étroite collée à gauche sur un écran large se lit comme
   un bloc oublié plutôt que comme une section. */
.au-section--centre .au-entete-section {
	margin-inline: auto;
	text-align: center;
}

.au-section--centre .au-entete-section__surtitre {
	justify-content: center;
}

.au-section--centre .au-entete-section__titre {
	max-width: none;
}

.au-section--centre .au-entete-section__intro {
	margin-inline: auto;
}

/* ── Disposition reprise du gabarit, sauf le placement ──────────────────────
 *
 * Le gabarit pose une image de fond sur 47 % à gauche et pousse les questions
 * sur les six colonnes de droite. Nous NE le reprenons PAS, et c'est une
 * décision antérieure qui prime : la FAQ a été centrée à la demande de la
 * direction. Une disposition demandée l'emporte sur une disposition copiée.
 *
 * Ce qui est repris, parce que rien ne s'y oppose : les items ESPACÉS de 20 px
 * au lieu d'une pile bordée, et le panneau ouvert en APLAT. La pile bordée
 * faisait un bloc unique où l'on ne voyait plus quelle question était ouverte.
 * ------------------------------------------------------------------------ */

.au-faq {
	max-width: var(--wp--style--global--content-size, 760px);
	margin-inline: auto;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	text-align: start;
}

.au-faq__item {
	border: 1px solid var(--au-filet);
	padding-inline: var(--wp--preset--spacing--40);
	transition: border-color 200ms ease;
}

.au-faq__item:hover {
	border-color: var(--au-accent);
}

/* Le panneau OUVERT est un aplat d'accent avec du texte sombre par-dessus —
   jamais l'inverse. Le gabarit y met du texte blanc ; notre règle de contraste
   dit le contraire, et c'est elle qui a été mesurée. */
.au-faq__item[open] {
	background: var(--au-accent);
	border-color: var(--au-accent);
	color: var(--au-sur-accent);
}

@media (prefers-reduced-motion: reduce) {
	.au-faq__item { transition: none; }
}

.au-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--40);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--h5);
	line-height: 1.4;
	/* Le triangle par défaut du navigateur est remplacé par notre marque. */
	list-style: none;
}

.au-faq__question::-webkit-details-marker { display: none; }

.au-faq__question:hover {
	color: var(--au-accent);
}

/* Sur l'aplat, la question reprend la couleur sombre : la laisser en accent la
   rendrait invisible sur son propre fond. */
.au-faq__item[open] .au-faq__question {
	color: var(--au-sur-accent);
}

.au-faq__question:focus-visible {
	outline: 2px solid var(--au-accent);
	outline-offset: 2px;
}

/* La marque : deux filets qui forment un plus, et dont l'un disparaît à
   l'ouverture. Le même vocabulaire que le bouton de menu. */
.au-faq__marque {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
}

.au-faq__marque::before,
.au-faq__marque::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 1px;
	background: currentColor;
	transition: transform 160ms ease, opacity 160ms ease;
}

.au-faq__marque::after {
	transform: rotate(90deg);
}

.au-faq__item[open] .au-faq__marque::after {
	opacity: 0;
	transform: rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
	.au-faq__marque::before,
	.au-faq__marque::after { transition: none; }
}

.au-faq__reponse {
	padding-bottom: var(--wp--preset--spacing--40);
	max-width: 62ch;
}

/* La réponse hérite du sombre de l'aplat. `--au-texte-doux` y serait un gris
   sur or : au-dessous du seuil, et illisible en plein soleil sur téléphone. */
.au-faq__item[open] .au-faq__reponse {
	color: var(--au-sur-accent);
}

.au-faq__item[open] .au-faq__question:focus-visible {
	outline-color: var(--au-sur-accent);
}

/* Les liens de la réponse aussi : `--au-texte` est blanc en thème sombre, donc
   du blanc sur or — 2,3:1, sous le seuil. Et le survol les faisait passer à
   l'accent, c'est-à-dire à la couleur de leur propre fond. */
.au-faq__item[open] .au-prose a,
.au-faq__item[open] .au-prose a:hover,
.au-faq__item[open] .au-prose a:focus-visible {
	color: var(--au-sur-accent);
	text-decoration-color: currentColor;
}

.au-faq__item[open] .au-prose a:hover,
.au-faq__item[open] .au-prose a:focus-visible {
	text-decoration-thickness: 2px;
}

.au-faq__reponse > *:first-child { margin-top: 0; }

/* ── Formulaire en deux colonnes ────────────────────────────────────────── */

.au-formulaire__intertitre {
	margin: 0;
	font-size: var(--wp--preset--font-size--h5);
}

.au-formulaire__intertitre + .au-formulaire__paire,
.au-formulaire__intertitre + .au-formulaire__champ {
	margin-top: calc(-1 * var(--wp--preset--spacing--20));
}

.au-formulaire__paire {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: var(--wp--preset--spacing--40);
}

/* ── Points clés de l'accroche ──────────────────────────────────────────────
 *
 * Sous le discours, une grille de repères courts. Ils ne remplacent pas les
 * trois preuves chiffrées : les preuves disent ce que nous avons fait, les
 * points clés comment nous travaillons. Les mélanger ferait perdre au lecteur la
 * distinction entre ce qui est mesuré et ce qui est affirmé — d'où deux
 * traitements visuels nettement différents.
 * ------------------------------------------------------------------------ */

.au-hero__points {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin: 0;
	padding: var(--wp--preset--spacing--30) 0 0;
	border-top: 1px solid var(--au-filet);
	list-style: none;
}

.au-hero__point {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	color: var(--au-texte);
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.45;
}

/* La puce est un carré de 6 px tourné à 45° : un losange. Aucun arrondi, aucun
   caractère à charger, et il reprend l'accent. */
.au-hero__puce {
	flex: none;
	width: 6px;
	height: 6px;
	margin-top: 0.45em;
	background: var(--au-accent);
	transform: rotate(45deg);
}

/* ── Colonne latérale des fiches ────────────────────────────────────────────
 *
 * Une fiche se lisait en cul-de-sac. La navigation entre fiches sœurs est la
 * partie la plus utile de cette colonne, et elle passe donc en premier.
 * ------------------------------------------------------------------------ */

.au-fiche__cote > * + * {
	margin-top: var(--wp--preset--spacing--50);
}

.au-fiche__freres {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--au-filet);
}

.au-freres {
	margin: 0;
	padding: 0;
	list-style: none;
}

.au-freres__item {
	border-top: 1px solid var(--au-filet);
}

.au-freres__item:first-child {
	border-top: none;
}

.au-freres__item a,
.au-freres__item span {
	display: block;
	padding-block: var(--wp--preset--spacing--30);
	color: var(--au-texte-doux);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.4;
}

.au-freres__item a:hover,
.au-freres__item a:focus-visible {
	color: var(--au-accent);
}

/* La fiche courante RESTE dans la liste, marquée : la retirer ferait perdre au
   lecteur le repère de l'endroit où il se trouve. */
.au-freres__item--courante span {
	color: var(--au-texte);
	font-weight: 600;
	padding-left: var(--wp--preset--spacing--30);
	border-left: 2px solid var(--au-accent);
}

/* --- Carte d'appel de la colonne --------------------------------------- *
 * Le bloc encadré du pied de fiche est trop large pour 280 px : il s'y
 * comprimerait en une bande illisible. Seule raison d'une seconde forme, et
 * elle réutilise les mêmes réglages.
 * ---------------------------------------------------------------------- */

.au-carte-appel {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--au-accent);
}

.au-carte-appel__titre {
	margin: 0;
	font-size: var(--wp--preset--font-size--h6);
	line-height: 1.35;
}

.au-carte-appel__tel {
	margin: 0;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--h5);
}

.au-carte-appel__tel a {
	color: var(--au-accent);
	text-decoration: none;
}

.au-carte-appel__bouton {
	text-align: center;
}