/*!
 * Assur Travel — CSS compilé.
 * Généré depuis assets/scss/ (main.scss -> base/reset, layout, elements, templates).
 * Régénérer avec : npm run build   (theme.json reste la source de vérité des tokens)
 * Polices : DM Sans variable déclarée dans theme.json (fontFace) — pas de @font-face ici.
 */

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

body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Défilement doux vers les ancres (sommaire « Dans cet article »), sauf réduction des animations. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

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

svg { display: inline-block; vertical-align: middle; fill: currentColor; }

.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;
}

.at-skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: var(--wp--preset--spacing--10, 0.5rem) var(--wp--preset--spacing--20, 1rem);
	clip: auto;
	background: var(--wp--preset--color--paper, #fff);
	color: var(--wp--preset--color--brand-navy, #0e4b5a);
	box-shadow: 0 0 0 2px var(--wp--preset--color--brand-cyan, #12a6c6);
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-cyan, #12a6c6);
	outline-offset: 2px;
}

/* ---- base/layout ---- */
:root {
	--at-gutter: 20px;
	--at-shadow-hover: 0 0 15px rgba(0, 0, 0, 0.15);

	/* Tokens de surface (source unique, référencés par les bandes ET le contrat de fin de page,
	   jamais recopiés en hex). #e6f4fb = surface/blue/100 (confirmé Figma) ; #eff5fc = surface
	   bleue par défaut des bandes (nom d'échelle Figma à confirmer, provisoirement -50). */
	--at-surface-blue-50: #eff5fc;
	--at-surface-blue-100: #e6f4fb;

	/* Profondeur CONSTANTE du BAS de la carte pré-footer DANS le footer sombre — seule donnée
	   graphique du chevauchement. Dérivé du relevé : carte 232px, jonction 104px sous son haut
	   → profondeur dans le footer = 232 − 104 = 128px. */
	--at-prefooter-footer-overlap: 128px;

	/* Couleurs de marque relevées Figma sur l'Actu-Card (tokens introduits pour cette passe ;
	   pas de tokenisation générale). */
	--at-primary-900: #12678c; /* brand/primary/900 (date Actu-Card ; couleur dominante du site) */
	--at-primary-800: #00b4d8; /* brand/primary/800 (cyan — filet d'accent des cartes de sidebar ; = .at-btn--primary) */
	--at-primary-600: #2c7fa5; /* brand/primary/600 (titre + séparateur Actu-Card, eyebrow) */
	--at-accent-orange-500: #f4a261; /* accent/orange/500 (pastille Actu-Card) */
	--at-shadow-card-hover: 0 0 25px rgba(0, 0, 0, 0.15); /* ombre hover des cartes (Figma) */

	/* Contour subtil de carte/chip sur fond blanc (neutral/gray/200). Source unique : filtres,
	   pagination, prix hero, icard, Actu-Card standard. */
	--at-border-subtle: #dde3ea;

	/* Encre du corps de texte (neutral/gray/900). Source unique : prose éditoriale + fond « navy »
	   du hover .at-btn--primary + textes ink de composants. Le scrim dégradé et l'outline focus
	   restent en littéral (sémantiques distinctes : voile, anneau de focus). */
	--at-gray-900: #1a2332;
}

.at-container {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: var(--at-gutter);
}

.at-main { padding-block: var(--wp--preset--spacing--40, 2.5rem); }

.at-site-header { padding-block: var(--wp--preset--spacing--30, 1.5rem); }

.at-site-header { border-bottom: 1px solid var(--wp--preset--color--line, #dce6ea); }

/* Footer sombre — réf. Figma « FOOTER ». Pas de marge externe (enchaîne la section précédente).
   Le pré-footer n'est PAS un enfant du footer : c'est le DERNIER enfant de .at-main (voir contrat
   de fin de page). Le footer réserve seulement la profondeur de chevauchement + son espacement. */
.at-site-footer {
	background: #08364a;
	color: #fff;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	padding: 48px 20px 24px; /* mobile */
}

/* Avec pré-footer : le bas de la carte plonge de --at-prefooter-footer-overlap dans le footer ;
   on décale le contenu du footer de cette profondeur CONSTANTE + l'espacement haut normal (48px). */
.at-has-prefooter .at-site-footer {
	padding-top: calc(var(--at-prefooter-footer-overlap) + 48px);
}

.at-site-header__inner,
.at-site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30, 1.5rem);
}

.at-site-brand {
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--brand-navy, #0e4b5a);
}

.at-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.at-nav__list a { text-decoration: none; }

/* ---- base/elements ---- */
/* Prose éditoriale PARTAGÉE — blocs natifs (core/heading, core/paragraph, core/list, core/image).
   DEUX scopes, mêmes déclarations (zéro recopie) : la prose de l'article (.at-article__content, via
   the_content()) ET la zone texte du bloc « Média & texte » habillé (style « Section Assur Travel »).
   Rythme vertical UNIQUE de 24px. SCOPING STRICT en enfant direct (`>`) : ne stylise que les blocs
   natifs de 1er niveau, ne fuit pas dans un composant imbriqué. Typo Figma en dur (passe). */
.at-article__content > *,
.wp-block-media-text .wp-block-media-text__content > * {
	margin-block: 0;
}

.at-article__content > * + *,
.wp-block-media-text .wp-block-media-text__content > * + * {
	margin-block-start: 24px;
}

.at-article__content > h2,
.wp-block-media-text .wp-block-media-text__content > h2 {
	font-size: 36px;
	line-height: 44px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--at-primary-900);
}

.at-article__content > h3,
.wp-block-media-text .wp-block-media-text__content > h3 {
	font-size: 28px;
	line-height: 36px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--at-primary-900); /* display/h3 = navy #12678C (corrigé : était teal) */
}

/* Sous-titre (display/h4) — plus petit, teal (primary-600). Ex. « Une assistance disponible 24h/24 ». */
.at-article__content > h4,
.wp-block-media-text .wp-block-media-text__content > h4 {
	font-size: 18px;
	line-height: 22px;
	font-weight: 500;
	color: var(--at-primary-600);
}

.at-article__content > p,
.at-article__content > ul li,
.at-article__content > ol li,
.wp-block-media-text .wp-block-media-text__content > p,
.wp-block-media-text .wp-block-media-text__content > ul li,
.wp-block-media-text .wp-block-media-text__content > ol li {
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: var(--at-gray-900);
}

.at-article__content > ul,
.at-article__content > ol,
.wp-block-media-text .wp-block-media-text__content > ul,
.wp-block-media-text .wp-block-media-text__content > ol {
	padding-inline-start: 1.5em;
}

.at-article__content > ul li + li,
.at-article__content > ol li + li,
.wp-block-media-text .wp-block-media-text__content > ul li + li,
.wp-block-media-text .wp-block-media-text__content > ol li + li {
	margin-block-start: 8px;
}

.at-article__content > figure img,
.wp-block-media-text .wp-block-media-text__content > figure img {
	max-width: 100%;
	height: auto;
	border-radius: 16px;
}

.at-article__content > p a,
.at-article__content > ul li a,
.at-article__content > ol li a,
.wp-block-media-text .wp-block-media-text__content > p a,
.wp-block-media-text .wp-block-media-text__content > ul li a,
.wp-block-media-text .wp-block-media-text__content > ol li a {
	color: var(--at-primary-600);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---- base/templates ---- */
.at-article {
	max-width: none;
}

.at-article__header {
	max-width: var(--wp--style--global--content-size, 760px);
	margin-block-end: var(--wp--preset--spacing--30, 1.5rem);
}

/* --- Étiquettes (post_tag) — primitive NEUTRE réutilisable ---------------------------------------
   Pastille = calque visuel de la pastille Actu-Card `--standard` (contour accent/orange/500, caps),
   SANS hover. Neutre (`.at-tag`, pas `.at-cat`) car étiquettes ≠ catégories. À mutualiser avec
   l'Actu-Card lors d'une passe dédiée — pas de refactor de la carte gelée ici. */
.at-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.at-tag {
	font-size: 11px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--at-accent-orange-500);
	border: 1px solid var(--at-accent-orange-500);
	border-radius: 999px;
	padding: 4px 10px;
}

/* --- Hero Article — bannière PLEINE LARGEUR (hors .at-container) ----------------------------------
   Données natives : image à la une (cover) + date + H1 + étiquettes. Aucun CTA (conversion :
   « Partez assuré »). Mobile (< 64rem) par défaut ; desktop (>= 64rem) en media query. Relevés
   Figma. Couleurs = tokens existants (primary-900 haut du gradient, accent orange sur pastilles). */
.at-hero-article {
	position: relative;
	min-height: 375px; /* mobile (frame « TEMPLATE ARTICLE BLOG — Mobile ») */
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: var(--at-gutter); /* 20px (bord canonique) ; contenu centré verticalement */
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
	overflow: hidden;
	text-align: center;
	color: #fff;
}

.at-hero-article__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.at-hero-article::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--at-primary-900) 0%, rgba(3, 42, 94, 0) 116.85%);
	z-index: 1;
}

.at-hero-article__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 844px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px; /* Figma Frame 525 */
}

.at-hero-article__date {
	margin: 0;
	font-size: 10px;
	line-height: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: #fff;
	padding-bottom: 4px;
	border-bottom: 1px dashed #fff;
}

.at-hero-article__title {
	margin: 0;
	font-size: 32px;
	line-height: 40px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #fff;
}

.at-hero-article__tags {
	justify-content: center;
}

@media (min-width: 64rem) {
	.at-hero-article {
		min-height: 540px;
		padding-inline: 80px;
	}

	.at-hero-article__title {
		font-size: 48px;
		line-height: 56px;
	}
}

/* Rythme vertical du corps d'article — porté par le WRAPPER `.at-article` (padding), pour que Caroline
   n'ait RIEN à gérer manuellement :
     - HAUT : respiration après le Hero (restitue l'espace de l'ancien en-tête, désormais dans le Hero) ;
     - BAS : respiration avant la bande « À lire aussi » (.at-actus.at-band, enfant de .at-main après le
       conteneur), sinon la bande colle au contenu ET à la sidebar sticky.
   Contenu ET sidebar (tous deux dans .at-article) sont espacés ENSEMBLE ; le `top` du sticky et l'aside
   sont inchangés. `padding` (pas `margin`) → aucune dépendance au margin-collapse à travers .at-container.
   Scopé `.single` (n'affecte pas le `.at-article` générique d'index.php). Uniforme desktop + mobile.
   Valeur space/40 — à confirmer si Figma spécifie un écart différent au niveau template. */
.single .at-article {
	padding-block: 2.5rem;
}

/* Article — mise en page contenu + sidebar (FONCTIONNEL ; l'habillage Figma des deux cartes est
   la passe suivante). DOM : .at-article__layout > (aside.at-article__aside PREMIER, .at-article__content).
   Aside premier → mobile/tablette : les deux cartes passent au-dessus du contenu. Un seul DOM. */
.at-article__aside {
	display: flex;
	flex-direction: column;
	gap: 20px; /* écart « Partez assuré » ↔ « Dans cet article » (relevé) */
	margin-bottom: var(--wp--preset--spacing--40, 2.5rem); /* mobile : séparation avant le contenu */
}

@media (min-width: 64rem) {
	.at-article__layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 302px; /* contenu | sidebar (relevé) */
		column-gap: var(--wp--preset--spacing--40, 2.5rem);
		align-items: start;
	}

	.at-article__content {
		grid-column: 1;
		grid-row: 1; /* MÊME ligne que l'aside → contenu démarre au ras du média (pas en ligne 2) */
		max-width: var(--wp--style--global--content-size, 760px);
	}

	.at-article__aside {
		grid-column: 2;
		grid-row: 1; /* même ligne que le contenu ; la ligne fait la hauteur du contenu → sticky OK */
		margin-bottom: 0;
		position: sticky;
		top: var(--wp--preset--spacing--40, 2.5rem); /* marge haute du sticky */
	}
}

/* ============================================================================
   Cartes de sidebar Article (habillage Figma). Deux familles :
   - .at-partez-assure : carte CTA sombre (recommandation produit).
   - .at-sidenav : carte-liste claire RÉUTILISABLE (navigation de sidebar). .at-toc en est l'usage
     « sommaire » ; une future « Pages utiles » (menu WP) réutilisera .at-sidenav sans duplication.
   En-tête commun .at-sidehead (eyebrow caps + filet cyan) ; couleur du label héritée de la carte.
   ============================================================================ */

/* En-tête partagé : eyebrow caps + filet cyan 40×2. */
.at-sidehead {
	display: flex;
	flex-direction: column;
	gap: 16px; /* space/16 (uniforme dans la carte) */
}

.at-sidehead__label {
	margin: 0;
	font-size: 11px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: inherit; /* blanc sur carte sombre, marine sur carte claire */
}

.at-sidehead__line {
	width: 40px;
	height: 2px;
	background: var(--at-primary-800);
}

/* --- Carte « Partez assuré » (CTA sombre) --- */
.at-partez-assure {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px 24px;
	border-radius: 16px;
	background: var(--at-primary-900);
	color: #fff;
}

.at-partez-assure__body {
	display: flex;
	flex-direction: column;
	gap: 8px; /* titre ↔ texte (Frame 577) */
}

.at-partez-assure__title {
	margin: 0;
	font-size: 18px;
	line-height: 26px;
	font-weight: 500; /* display/h5 Medium */
	color: #fff;
}

.at-partez-assure__text {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--at-border-subtle); /* neutral/gray/200 sur fond sombre */
}

.at-partez-assure__cta {
	align-self: flex-start; /* CTA en hug, aligné à gauche (relevé : 241px hug) */
}

/* --- Primitive « carte-liste de sidebar » (RÉUTILISABLE : TOC, futures Pages utiles) --- */
.at-sidenav {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border-radius: 16px;
	background: var(--at-surface-blue-50);
	color: var(--at-primary-900);
}

.at-sidenav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.at-sidenav__item + .at-sidenav__item {
	border-top: 1px solid var(--at-border-subtle); /* séparateur entre entrées */
}

.at-sidenav__link {
	display: block;
	padding-block: 16px; /* space/16 de chaque côté → 16 avant/après le séparateur (relevé) */
	font-size: 14px;
	line-height: 20px;
	color: var(--at-primary-900);
	text-decoration: none;
}

/* Première/dernière entrée à fleur du gap de carte (pas de double espace haut/bas). */
.at-sidenav__item:first-child .at-sidenav__link {
	padding-top: 0;
}

.at-sidenav__item:last-child .at-sidenav__link {
	padding-bottom: 0;
}

.at-sidenav__link:hover {
	text-decoration: underline;
}

/* --- Usage « sommaire » (.at-toc) : flèche à gauche + ancrage. (Une future « Pages utiles »
   mettrait plutôt sa flèche à droite : usage distinct, primitive .at-sidenav inchangée.) --- */
.at-toc .at-sidenav__link {
	position: relative;
	padding-left: 24px;
}

.at-toc .at-sidenav__link::before {
	content: "\2192"; /* → */
	position: absolute;
	left: 0;
	color: inherit;
}

/* Ancre de sommaire : léger décalage pour que le titre ciblé ne colle pas au bord haut du viewport
   (aucun header fixe/sticky ne recouvre le contenu ; purement cosmétique). */
.at-article__content > h2,
.at-article__content > h3 {
	scroll-margin-top: 1.5rem;
}

/* ============================================================================
   Actu-Card — carte article DE RÉFÉRENCE (unique). Réf. Figma « Actu-Card ».
   Réutilisée : archives, catégorie feuille, recherche, articles liés, bloc ACTUS.
   Horizontale par défaut (image gauche ~40% + date/filet pointillé/pastille/titre) ;
   variante --featured (image plein cadre + overlay bas). Couleurs de marque en dur (H0).
   ============================================================================ */
.at-actu-card {
	display: grid;
	grid-template-columns: 40% 1fr;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 14px rgba(18, 65, 90, 0.07);
}

.at-actu-card__media {
	display: block;
}

.at-actu-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.at-actu-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px 24px;
	justify-content: center;
}

/* Date + filet pointillé séparateur (maquette). */
.at-actu-card__date {
	font-size: 12px;
	line-height: 16px;
	color: #12678c;
	padding-bottom: 12px;
	border-bottom: 1px dotted #9fc0d4;
}

/* Pastilles = ÉTIQUETTES de l'article : rangée qui passe à la ligne proprement si plusieurs. */
.at-actu-card__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Pastille étiquette : CONTOUR orange (pas plein), caps. */
.at-actu-card__cat {
	align-self: flex-start;
	font-size: 11px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #eb7405;
	border: 1px solid #eb7405;
	border-radius: 999px;
	padding: 4px 12px;
}

.at-actu-card__title {
	margin: 0;
	font-size: 18px;
	line-height: 26px;
	font-weight: 700;
	color: #12678c;
}

.at-actu-card__title a {
	color: inherit;
	text-decoration: none;
}

.at-actu-card__title a:hover {
	text-decoration: underline;
}

/* ============================================================================
   Actu-Card STANDARD — calibration Figma (relevé Dev Mode). Porte TOUT le recalage sur le
   modifier `--standard` (override du socle par spécificité) → le socle .at-actu-card et la
   variante --featured restent intacts jusqu'à la passe featured. Carte entièrement cliquable
   (lien titre étiré, convention « cartes cliquables »). Tokens de marque relevés Figma.
   ============================================================================ */
.at-actu-card--standard {
	position: relative; /* ancre du lien étiré */
	grid-template-columns: 1fr 1fr; /* image ~50 % / texte ~50 % (Figma 241/241) */
	column-gap: 20px; /* space/20 */
	box-shadow: none; /* pas d'ombre au repos (Figma) */
	transition: box-shadow 0.3s ease-out; /* hover 300 ms ease-out */
}

/* Adaptation à la surface d'accueil (précédent DS : .at-btn--invert). La carte standard reste
   strictement Figma (aucun contour) ; --on-white ajoute UNIQUEMENT un filet subtil pour la
   matérialiser sur fond blanc. Demandé explicitement par la section (arg `surface: white`),
   jamais par détection de page. Contextes bleus (.at-band) : non appliqué → rendu Figma original. */
.at-actu-card--on-white {
	border: 1px solid var(--at-border-subtle);
}

/* Corps calé en haut ; paddings Figma (gauche = gap carte de 20). */
.at-actu-card--standard .at-actu-card__body {
	justify-content: flex-start;
	gap: 12px; /* pastille ↔ titre */
	padding: 12px 16px 8px 0;
}

/* Date : label/badge 10/14, 500, ls 2 %, brand/primary/900 ; séparateur dashed brand/primary/600. */
.at-actu-card--standard .at-actu-card__date {
	font-size: 10px;
	line-height: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--at-primary-900);
	padding-bottom: 4px; /* date → séparateur (space/4) */
	border-bottom: 1px dashed var(--at-primary-600);
}

/* Écart bloc-date → contenu = gap 12 + 8 = 20 (space/20). */
.at-actu-card--standard .at-actu-card__cats {
	margin-top: 8px;
}

/* Pastille : contour accent/orange/500, padding 4/10 ; se remplit au hover/focus carte. */
.at-actu-card--standard .at-actu-card__cat {
	color: var(--at-accent-orange-500);
	border-color: var(--at-accent-orange-500);
	padding: 4px 10px;
	transition: background-color 0.3s ease-out, color 0.3s ease-out;
}

/* Titre : display/h6-Bold 14/20, brand/primary/600. Lien titre = lien étiré (toute la carte). */
.at-actu-card--standard .at-actu-card__title {
	font-size: 14px;
	line-height: 20px;
	color: var(--at-primary-600);
}

.at-actu-card--standard .at-actu-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.at-actu-card--standard .at-actu-card__title a:hover {
	text-decoration: none; /* pas de soulignement au survol (Figma : hover = ombre + pastille pleine) */
}

.at-actu-card--standard .at-actu-card__title a:focus-visible {
	outline: none; /* l'anneau est porté par la carte */
}

/* Hover + focus clavier AU NIVEAU CARTE (convention) : ombre + pastille pleine. */
.at-actu-card--standard:has( a:focus-visible ) {
	outline: 3px solid var(--at-primary-600);
	outline-offset: 2px;
	box-shadow: var(--at-shadow-card-hover);
}

.at-actu-card--standard:has( a:focus-visible ) .at-actu-card__cat {
	background: var(--at-accent-orange-500);
	color: #fff;
}

@media (hover: hover) {
	.at-actu-card--standard:hover {
		box-shadow: var(--at-shadow-card-hover);
	}

	.at-actu-card--standard:hover .at-actu-card__cat {
		background: var(--at-accent-orange-500);
		color: #fff;
	}
}

/* Mobile (< 40rem) : la carte standard reste HORIZONTALE (vignette + texte), conforme à la maquette
   dans TOUS ses usages (blog, archives, Sélection). L'image occupe ~40 %. */
@media (max-width: 39.999rem) {
	.at-actu-card--standard {
		grid-template-columns: 40% 1fr;
	}
}

/* --- Variante « featured » (relevés Figma « Actu UNE ») : image plein cadre + overlay dégradé +
   contenu ancré en bas. Overlays en PSEUDO-ÉLÉMENTS (aucun changement de markup) : ::before = défaut
   (fondu transparent → navy primary-900) ; ::after = hover (plus sombre/couvrant → gray-900), révélé
   en fondu 300ms (= smart-animate Figma). Hover pastille (fond orange plein + texte blanc) = petites cartes. */
.at-actu-card--featured {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--at-primary-900); /* repli sans image */
}

/* Hauteur : AUCUN ratio/hauteur imposé en desktop. Le featured est TOUJOURS dans .at-actus__grid
   (align-items:stretch) → la carte s'étire à la hauteur de la colonne liste (les 2 petites cartes),
   et la suit donc toujours, quels que soient la longueur des titres OU le ratio des images
   (object-fit:cover recadre l'image sans influer sur la hauteur de la carte). Un aspect-ratio imposé
   la désalignait. En mobile/tablette (grid 1 colonne, pas de liste à côté), hauteur mini propre. */
@media (max-width: 63.999rem) {
	.at-actu-card--featured {
		min-height: 360px; /* à confirmer (pas de relevé featured mobile) */
	}
}

.at-actu-card--featured .at-actu-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.at-actu-card--featured::before,
.at-actu-card--featured::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.at-actu-card--featured::before {
	background: linear-gradient(180deg, rgba(18, 103, 140, 0) 41.37%, var(--at-primary-900) 100%);
}

.at-actu-card--featured::after {
	background: linear-gradient(180deg, rgba(18, 103, 140, 0) 8.26%, var(--at-gray-900) 100%);
	opacity: 0;
	transition: opacity 0.3s ease-out;
}

.at-actu-card--featured .at-actu-card__body {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding: 48px; /* inset du contenu (relevé) ; à confirmer sur mobile (pas de relevé featured mobile) */
	gap: 12px;
	color: #fff;
}

.at-actu-card--featured .at-actu-card__date {
	font-size: 10px;
	line-height: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: #fff;
	padding-bottom: 4px;
	border-bottom: 1px dashed #fff;
}

.at-actu-card--featured .at-actu-card__cat {
	color: var(--at-accent-orange-500);
	border-color: var(--at-accent-orange-500);
	padding: 4px 10px;
	transition: background-color 0.3s ease-out, color 0.3s ease-out;
}

.at-actu-card--featured .at-actu-card__title,
.at-actu-card--featured .at-actu-card__title a {
	color: #fff;
	font-size: 22px;
	line-height: 30px;
	font-weight: 700;
}

.at-actu-card--featured:has( a:focus-visible )::after {
	opacity: 1;
}

.at-actu-card--featured:has( a:focus-visible ) .at-actu-card__cat {
	background: var(--at-accent-orange-500);
	color: #fff;
}

@media (hover: hover) {
	.at-actu-card--featured:hover::after {
		opacity: 1;
	}

	.at-actu-card--featured:hover .at-actu-card__cat {
		background: var(--at-accent-orange-500);
		color: #fff;
	}
}

/* Grille d'articles (archives feuilles / recherche) : 3 / 2 / 1 colonnes. */
.at-actu-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 40rem) {
	.at-actu-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.at-actu-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- Composant « Sélection d'articles » (.at-actus) — layout PARTAGÉ -----------------------------
   Assemble la bande (.at-band) + l'en-tête de section + les Actu-Cards (grande carte « à la une » +
   liste). GLOBAL (au même niveau que .at-band / .at-actu-card, déjà globaux) car le composant est
   rendu à la fois par le bloc Gutenberg acf/at-articles-associes ET par le template Article
   (« À lire aussi ») : rendu front identique quel que soit l'appelant, sans enqueue conditionnel.
   L'aperçu éditeur reçoit ce CSS via add_editor_style(main.css). */
.at-actus .at-section-header {
	margin-bottom: 48px;
}

.at-actus__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 64rem) {
	.at-actus__grid {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		align-items: stretch;
	}
}

.at-actus__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.at-actus__foot {
	margin-top: 48px;
	text-align: center;
}

.at-actus-placeholder {
	margin: 0;
	padding: 24px;
	text-align: center;
	color: #6c7a89;
	background: #eff5fc;
	border-radius: 12px;
}

.at-prix {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--brand-navy, #0b2a4a);
}

.at-prix__prefix {
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	color: var(--wp--preset--color--muted, #5b6b70);
}

.at-prix__valeur {
	font-weight: 800;
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
}

.at-prix--hero .at-prix__valeur {
	font-size: var(--wp--preset--font-size--xl, 1.5rem);
}

.at-hero-produit {
	background: #eff5fc;
	margin-block-end: var(--wp--preset--spacing--50, 4rem);
}

.at-hero-produit__inner {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 64rem) {
	.at-hero-produit {
		position: relative;
		margin-block-end: 140px;
	}

	.at-hero-produit__inner {
		grid-template-columns: minmax(1.5rem, 1fr) minmax(0, 700px) minmax(0, 44vw);
		column-gap: 56px;
		align-items: stretch;
	}

	.at-hero-produit__col-text { grid-column: 2; }
	.at-hero-produit__col-media { grid-column: 3; }
}

.at-hero-produit__col-text {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 32px 24px;
}

@media (min-width: 64rem) {
	.at-hero-produit__col-text {
		padding: 48px 0 104px 0;
	}
}

.at-hero-produit__block {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.at-hero-produit__eyebrow {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #12678c;
}

.at-hero-produit__paren--l { color: #b0c700; }
.at-hero-produit__paren--r { color: #eb7405; }

.at-hero-produit__heading {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.at-hero-produit__title {
	margin: 0;
	font-size: clamp(2rem, 4vw, 48px);
	line-height: 1.16;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #12678c;
}

.at-hero-produit__accroche {
	margin: 0;
	font-size: 20px;
	line-height: 28px;
	font-weight: 400;
	color: #12678c;
}

.at-hero-produit__row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

@media (min-width: 40rem) {
	.at-hero-produit__row {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 24px;
	}
}

.at-hero-produit__atouts {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.at-hero-produit__atout {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	line-height: 20px;
	color: #00b4d8;
}

.at-hero-produit__atout::before {
	content: "\2714";
	color: #00b4d8;
}

.at-prix--hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--at-border-subtle);
	border-radius: 20px;
	background: #fff;
}

.at-prix--hero .at-prix__prefix {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: #12678c;
}

.at-prix--hero .at-prix__valeur {
	font-size: 28px;
	line-height: 36px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #12678c;
}

@media (min-width: 40rem) {
	.at-prix--hero {
		align-self: center;
	}
}

.at-hero-produit__cta {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

@media (min-width: 40rem) {
	.at-hero-produit__cta {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px;
	}
}

.at-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.at-btn--primary {
	background: #00b4d8;
	color: #fff;
}

@media (hover: hover) {
	.at-btn--primary:hover {
		background: var(--at-gray-900);
		border-color: var(--at-gray-900);
		box-shadow: var(--at-shadow-hover);
	}

	.at-btn--outline:hover {
		background: #306589;
		border-color: #306589;
		color: #fff;
		box-shadow: var(--at-shadow-hover);
	}
}

.at-btn--outline {
	background: transparent;
	color: #12678c;
	border-color: #12678c;
}

/* Contour inverse (blanc) pour fonds sombres (cartes catégorie, hero produit…). */
.at-btn--invert {
	background: transparent;
	color: #fff;
	border-color: #fff;
}

/* Au survol/focus il se REMPLIT (blanc plein, texte marine). Déclenché par le bouton
   lui-même OU par la carte cliquable qui le contient (convention « cartes cliquables »). */
.at-btn--invert:hover,
.at-btn--invert:focus-visible,
.at-cat-card:hover .at-btn--invert,
.at-cat-card:focus-visible .at-btn--invert {
	background: #fff;
	color: #12678c;
	border-color: #fff;
}

.at-btn:focus-visible {
	outline: 3px solid #12678c;
	outline-offset: 2px;
}

.at-eyebrow {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--at-primary-600); /* brand/primary/600 (même couleur que la date/titre Actu-Card) */
}

.at-eyebrow__paren--l { color: #b0c700; }
.at-eyebrow__paren--r { color: #eb7405; }

.at-section-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	text-align: center;
}

@media (min-width: 64rem) {
	.at-section-header {
		margin-bottom: 48px;
	}
}

.at-section-title {
	margin: 0;
	font-size: 36px;
	line-height: 44px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #12678c;
}

.at-section-subtitle {
	margin: 8px 0 0;
	font-size: 20px;
	line-height: 28px;
	font-weight: 400;
	color: var(--at-gray-900);
}

.at-icard {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding: 24px 20px;
	background: #fff;
	border: 1px solid var(--at-border-subtle);
	border-radius: 16px;
}

.at-icard__icon {
	flex: 0 0 auto;
	display: inline-flex;
}

.at-icard__icon svg {
	display: block;
}

.at-icard__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.at-icard__title,
.at-icard__text {
	margin: 0;
}

.at-icard--reassurance {
	background: rgba(255, 255, 255, 0.8);
}

.at-icard--reassurance .at-icard__icon {
	color: #00b4d8;
}

.at-icard--reassurance .at-icard__icon svg {
	width: auto;
	height: 40px;
}

.at-icard--reassurance .at-icard__title {
	font-size: 22px;
	line-height: 30px;
	font-weight: 700;
	color: #12678c;
}

.at-icard--reassurance .at-icard__text {
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: var(--at-gray-900);
}

.at-icard--point {
	padding-bottom: 16px;
}

.at-icard--point .at-icard__icon {
	color: #12678c;
}

.at-icard--point .at-icard__icon svg {
	width: 30px;
	height: 30px;
}

.at-icard--point .at-icard__title {
	font-size: 18px;
	line-height: 22px;
	font-weight: 500;
	color: #12678c;
}

.at-icard--point .at-icard__text {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: var(--at-gray-900);
}

.at-band {
	--at-band-color: var(--at-surface-blue-50); /* couleur de la bande (token de surface) */
	--at-band-shadow: 0 0 0 0 transparent; /* ombre PROPRE de la bande (composable, no-op par défaut) */
	background: var(--at-band-color);
	box-shadow: var(--at-band-shadow);
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-block: 48px;
}

@media (min-width: 64rem) {
	.at-band {
		padding-block: 80px;
	}
}

.at-band + .at-band {
	padding-top: 0;
}

.at-band__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 24px;
}

.at-band__inner--narrow {
	max-width: 1060px;
}

.wp-block-columns.at-cols-wide,
.wp-block-columns.at-cols-wide.is-layout-flex {
	column-gap: clamp(2rem, 9vw, 128px);
	padding-block: 40px;
}

.at-photoband {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	border-radius: 16px;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding: 120px 24px 80px;
	background-color: #eff5fc;
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.at-photoband > * {
	margin-block: 0;
}

.at-photoband::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1800 / 1141;
	z-index: -1;
	background: url(../img/faq-band-bg.jpg) top center / cover no-repeat;
	opacity: 0.3;
	-webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}

.at-photoband::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(270deg, #eff5fc 11.11%, rgba(239, 245, 252, 0) 47.15%, #eff5fc 83.19%),
		linear-gradient(180deg, rgba(239, 245, 252, 0) 52.98%, #ffffff 87.45%);
}

.at-photoband__col {
	width: 100%;
	max-width: var(--at-photoband-col, 680px);
	margin-inline: auto;
}

.at-photoband .at-faq__header {
	align-items: center;
	text-align: center;
}

@media (max-width: 39.999rem) {
	.at-photoband {
		padding: 64px 20px 48px;
		gap: 40px;
	}
}

.at-cards {
	--at-cards-cols: 1;
	--at-cards-gap: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--at-cards-gap);
}

.at-cards > * {
	flex: 0 1 calc((100% - (var(--at-cards-cols) - 1) * var(--at-cards-gap)) / var(--at-cards-cols));
}

@media (min-width: 40rem) {
	.at-cards {
		--at-cards-cols: 2;
	}
}

@media (min-width: 64rem) {
	.at-cards--3up {
		--at-cards-cols: 3;
	}
}

.at-carousel {
	--at-carousel-cols: 2;
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.at-carousel > * {
	flex: 0 0 80%;
	max-width: 340px;
	scroll-snap-align: start;
}

@media (min-width: 64rem) {
	.at-carousel {
		display: grid;
		grid-template-columns: repeat(var(--at-carousel-cols), 1fr);
		overflow: visible;
	}

	.at-carousel > * {
		flex: none;
		max-width: none;
	}
}

.at-hcarousel {
	position: relative;
}

.at-hcarousel__prev {
	position: absolute;
	left: -20px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	border: 1px solid #00b4d8;
	background: #fff;
	color: #12678c;
	font-size: 20px;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.at-hcarousel__prev:focus-visible {
	outline: 3px solid #12678c;
	outline-offset: 2px;
}

@media (max-width: 63.999rem) {
	.at-hcarousel__prev {
		display: none;
	}
}

.at-hcarousel__track {
	display: flex;
	align-items: stretch;
	gap: var(--at-hcarousel-gap, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.at-hcarousel__track > * {
	scroll-snap-align: start;
}

.at-illus {
	--at-illus-veil: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 94.61%);
	position: relative;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-block: 48px;
	background: #fff;
}


@media (min-width: 64rem) {
	.at-illus {
		padding-block: 80px;
		background-color: #eff5fc;
		background-image: var(--at-illus-bg);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.at-illus::before {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--at-illus-veil);
	}
}

.at-illus__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

@media (min-width: 64rem) {
	.at-illus__inner {
		flex-direction: row;
		align-items: flex-start;
		gap: 96px;
	}

	.at-illus__text {
		flex: 0 0 440px;
	}

	.at-illus__content {
		flex: 1 1 auto;
		min-width: 0;
	}

	.at-illus__text .at-section-header {
		align-items: flex-start;
		text-align: left;
	}
}


.at-hero-produit__col-media {
	position: relative;
	display: none;
	min-height: 240px;
}

@media (min-width: 64rem) {
	.at-hero-produit__col-media {
		display: grid;
		min-height: 320px;
		border-radius: 16px;
		overflow: hidden;
	}
}

.at-hero-produit__col-media > * {
	grid-area: 1 / 1;
}

.at-hero-produit__accent {
	align-self: start;
	height: 14px;
	z-index: 1;
	background: var(--at-accent, var(--wp--preset--color--accent-1));
}

.at-hero-produit__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.at-hero-produit__moteur {
	margin: 0;
	padding: 24px;
	border-radius: 0;
	background: #12678c;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

@media (min-width: 64rem) {
	.at-hero-produit__moteur {
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translate(-50%, 65%);
		z-index: 2;
		width: min(1280px, 88.9vw);
		padding: 32px 64px;
		border-radius: 16px;
	}
}

.at-hero-produit__moteur-titre { margin: 0; font-size: 24px; font-weight: 600; }
.at-hero-produit__moteur-note { margin: 0; opacity: 0.9; }

.at-produit {
	overflow-x: clip;
}

.at-produit__content {
	display: flex;
	flex-direction: column;
	gap: 0;
}

:where(.at-produit__content) > * {
	padding-block: 32px;
}

/* HARMONISATION MOBILE : une seule gouttière (--at-gutter = 20px) partout.
   1) les bandes full-bleed réalignent leur contenu sur la gouttière ;
   2) les blocs de contenu (déjà dans le conteneur) ne rajoutent PAS la leur (sinon double gouttière).
   Spécificité supérieure (.at-produit__content > …) pour battre le style propre du bloc. */
@media (max-width: 63.999rem) {
	.at-band__inner {
		padding-inline: var(--at-gutter);
	}

	.at-produit__content > .at-formules,
	.at-produit__content > .at-gar {
		padding-inline: 0;
	}

	.at-produit__content .at-docs__inner {
		padding-inline: 0;
	}
}

.at-produit-card {
	position: relative;
	display: grid;
	width: 100%;
	max-width: 340px;
	height: 412px;
	margin-inline: auto;
	border-radius: 16px;
	overflow: hidden;
	background: #12678c;
	transition: box-shadow 0.2s ease;
}

.at-produit-card > * {
	grid-area: 1 / 1;
}

.at-produit-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (hover: hover) {
	.at-produit-card:hover {
		box-shadow: 0 4px 15px rgba(18, 103, 140, 0.35);
	}

	.at-produit-card:hover .at-produit-card__scrim {
		background: linear-gradient(180deg, #12678c 12.86%, rgba(18, 103, 140, 0.7) 52.05%);
	}

	.at-produit-card:hover .at-produit-card__more {
		color: #fff;
	}
}

.at-produit-card__scrim {
	background: linear-gradient(
		180deg,
		#12678c 12.86%,
		rgba(85, 146, 172, 0.8) 35.19%,
		rgba(135, 178, 197, 0) 52.05%,
		#ffffff 91.99%
	);
}

.at-produit-card__accent {
	align-self: start;
	height: 14px;
	background: var(--at-accent, var(--wp--preset--color--accent-1));
}

.at-produit-card__content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding: 40px 32px 32px;
	text-align: center;
}

.at-produit-card__head {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
}

.at-produit-card__title {
	margin: 0;
	font-size: 28px;
	line-height: 36px;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-align: center;
	color: #ffffff;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.at-produit-card__link {
	color: inherit;
	text-decoration: none;
}

.at-produit-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.at-produit-card__accroche {
	margin: 0;
	font-size: 18px;
	line-height: 26px;
	font-weight: 400;
	color: #ffffff;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.at-produit-card__foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.at-produit-card .at-prix--card {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 36px;
	margin: 0;
	padding: 0 16px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.8);
}

.at-produit-card .at-prix--card .at-prix__prefix {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	text-transform: lowercase;
	color: #12678c;
}

.at-produit-card .at-prix--card .at-prix__valeur {
	font-size: 28px;
	line-height: 36px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #12678c;
}

.at-produit-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #12678c;
	transition: color 0.2s ease;
}

.at-produit-card__arrow {
	font-size: 11px;
}

.at-produit-card:focus-within {
	outline: 3px solid var(--at-accent, var(--wp--preset--color--accent-1));
	outline-offset: 2px;
}

.at-produit-card__link:focus-visible {
	outline: none;
}

.at-archive-header {
	margin-block: var(--wp--preset--spacing--30, 1.5rem);
}

.at-archive-desc {
	color: var(--wp--preset--color--muted, #5b6b70);
}

.at-related {
	margin-block-start: var(--wp--preset--spacing--50, 4rem);
	padding-block-start: var(--wp--preset--spacing--40, 2.5rem);
	border-top: 1px solid var(--wp--preset--color--line, #dce6ea);
}

.at-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: var(--wp--preset--spacing--30, 1.5rem);
	margin-block-start: var(--wp--preset--spacing--30, 1.5rem);
}

/* ============================================================================
   Carte catégorie (« Cat Card ») — index blog + listing de sous-catégories.
   Toute la carte est un lien. Image de fond + voile + N articles + nom + Découvrir.
   Couleurs de marque en dur (à tokeniser H0).
   ============================================================================ */
/* Carte catégorie — réf. Figma « Cat Cards » (relevé Dev Mode 11/08). */
.at-cat-card {
	position: relative;
	display: flex;
	flex-direction: column; /* le body remplit la hauteur → filet à offset fixe */
	min-height: 350px;
	border-radius: 16px; /* space/16 */
	overflow: hidden;
	background: #0e4b5a;
	color: #fff;
	text-decoration: none;
}

.at-cat-card__media {
	position: absolute;
	inset: 0;
}

.at-cat-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Voile dégradé bas (Rectangle 6). */
.at-cat-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(360deg, #12678c 24.26%, rgba(18, 103, 140, 0.05) 81.18%);
}

/* Survol/focus de la carte (convention « cartes cliquables » : hover + focus au niveau carte).
   Carte entièrement cliquable via le <a> englobant → :hover / :focus-visible portent l'état. */
.at-cat-card:hover::after,
.at-cat-card:focus-visible::after {
	background: linear-gradient(360deg, #1a2332 0%, rgba(26, 35, 50, 0.2) 100%);
}

.at-cat-card:focus-visible {
	outline: 3px solid #1a2332;
	outline-offset: 2px;
}

.at-cat-card__body {
	position: relative;
	z-index: 1;
	flex: 1; /* remplit la hauteur */
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* filet haut / nom centré / bouton bas (Figma) */
	gap: 12px; /* space/12 (gap minimal) */
	padding: 160px 24px 32px; /* desktop : top 160 / côtés 24 / bas 32 (relevé) */
}

/* « N articles » + filet pointillé pleine largeur (Frame 583). */
.at-cat-card__count {
	font-size: 10px;
	line-height: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-align: center;
	color: #fff;
	padding-bottom: 4px; /* space/4 texte → filet */
	border-bottom: 1px dashed #fff;
}

.at-cat-card__name {
	font-size: 22px;
	line-height: 30px; /* display/h4-Bold */
	font-weight: 700;
	text-align: center;
	color: #fff;
}

/* Bouton = primitive .at-btn.at-btn--outline.at-btn--invert ; centré horizontalement (bas via space-between). */
.at-cat-card__cta {
	align-self: center;
}

/* Mobile (< 40rem) : mêmes zones (haut/centre/bas), paddings du relevé mobile. */
@media (max-width: 39.999rem) {
	.at-cat-card__body {
		padding: 48px 12px 32px; /* top 48 / côtés 12 / bas 32 */
	}
}

/* Grille catégories : 4 colonnes desktop, gouttière 24px (relevé Figma). */
.at-cards--4up {
	--at-cards-gap: 24px;
}

@media (min-width: 64rem) {
	.at-cards--4up {
		--at-cards-cols: 4;
	}
}

/* Hero /blog + recherche — réf. Figma « HERO BLOG » (relevé Dev Mode 11/08). */
.at-blog-hero.at-band {
	--at-band-color: var(--at-surface-blue-100); /* surface/blue/100 (spécifique hero) */
	padding-block: 48px 40px; /* mobile */
	border-bottom-left-radius: 16px; /* radius/lg */
	border-bottom-right-radius: 16px;
}
.at-blog-hero .at-band__inner {
	max-width: 760px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 32px; /* Inner : space/32 entre eyebrow+titre / sous-titre / recherche */
}
.at-blog-hero__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px; /* eyebrow → titre (Frame 586) */
}
.at-blog-hero .at-section-subtitle {
	margin: 0;
	max-width: 620px;
	color: #12678c; /* brand/primary/900 (le sous-titre hero diffère du défaut #1a2332) */
}
.at-blog-hero__search { width: 100%; }

@media (min-width: 64rem) {
	.at-blog-hero.at-band { padding-block: 96px 80px; } /* Top 96 / Bottom 80 */
}

/* Section « Explorez par thème » — réf. Figma (padding 80 / gap header→grille 48). */
.at-blog-index { padding-block: 48px; } /* mobile */
.at-blog-archive { padding-block: 64px; }

.at-blog-index .at-section-header { margin-bottom: 48px; } /* header → grille (space/48) */
.at-blog-archive .at-archive-header { margin-bottom: 40px; }

@media (min-width: 64rem) {
	.at-blog-index { padding-block: 80px; } /* desktop (relevé) */
}

/* Section « À la une » (index blog) — bande #E6F4FB, en-tête titre gauche / onglets droite. */
.at-latest.at-band {
	--at-band-color: var(--at-surface-blue-100); /* surface/blue/100 */
	padding-block: 48px; /* mobile */
}

@media (min-width: 64rem) {
	.at-latest.at-band { padding-block: 80px; } /* desktop (relevé) */
}

.at-latest__head {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 48px; /* en-tête → grille (space/48) */
}

@media (min-width: 64rem) {
	.at-latest__head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 24px;
	}
}

.at-latest__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.at-latest__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Onglet de filtre (chip) — réf. Figma « Cat-Filtres ». Inactif = blanc/contour ; actif = survol = plein marine. */
.at-filter {
	font-family: inherit;
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #12678c;
	background: #fff; /* neutral/gray/0 */
	border: 1px solid var(--at-border-subtle); /* neutral/gray/200 */
	border-radius: 999px; /* radius/xl */
	padding: 4px 10px; /* relevé */
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Actif ET survol : plein marine, texte blanc (« Tous » = état actif/hover de la maquette). */
.at-filter.is-active {
	background: #12678c;
	border-color: #12678c;
	color: #fff;
}

@media (hover: hover) {
	.at-filter:hover {
		background: #12678c;
		border-color: #12678c;
		color: #fff;
	}
}

.at-filter:focus-visible {
	outline: 3px solid #12678c;
	outline-offset: 2px;
}

/* Groupes pré-rendus : seul le groupe actif est visible. `hidden` doit gagner sur display:grid. */
.at-latest__group[hidden] {
	display: none;
}

/* ============================================================================
   Hero de catégorie (archive Blog) — composition 2 colonnes (texte / image) INSPIRÉE du hero
   produit, montée sur les primitives existantes (.at-band + .at-band__inner + .at-section-title
   + at_eyebrow). Aucune reprise du CSS produit. Surface --at-surface-blue-100 (univers Blog).
   Image visible sur mobile, sous le contenu ; cadrage paysage via object-fit. Hauteur intrinsèque.
   ============================================================================ */
.at-cat-hero.at-band {
	--at-band-color: var(--at-surface-blue-100); /* rattache à l'univers Blog (comme le hero blog) */
}

/* Base (mobile + tablette + cas SANS image) : conteneur classique, texte seul.
   L'image est MASQUÉE sous le desktop (comme le hero produit) → cohérence blog. */
.at-cat-hero__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--at-gutter);
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
}

.at-cat-hero__text {
	display: flex;
	flex-direction: column;
	gap: 16px; /* eyebrow → H1 → description */
}

/* Description = description NATIVE du terme (peut contenir plusieurs paragraphes).
   Reprend l'échelle du sous-titre de section (20/28) + couleur brand du hero blog. */
.at-cat-hero__desc {
	font-size: 20px;
	line-height: 28px;
	color: #12678c;
}

.at-cat-hero__desc > :first-child { margin-top: 0; }
.at-cat-hero__desc > :last-child { margin-bottom: 0; }

/* Image masquée sur mobile ET tablette (affichée uniquement au desktop). */
.at-cat-hero__media {
	display: none;
}

.at-cat-hero__img {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: 16px; /* radius/lg — TOUS les coins arrondis (comme le hero produit) */
}

/* Desktop AVEC image : image affichée, en DÉBORD jusqu'au bord droit et pleine hauteur de la bande
   (aucune bande bleue au-dessus/dessous). Répartition texte/image et écart REPRIS À L'IDENTIQUE du
   hero produit — MÊMES valeurs : gouttière minmax(1.5rem,1fr) | texte 700 | image 44vw, gap 56px.
   Aucune nouvelle constante propre à ce hero. (Le hero produit lui-même n'est pas touché.) */
@media (min-width: 64rem) {
	.at-cat-hero.at-band:has( .at-cat-hero__media ) {
		padding-block: 0; /* la colonne texte porte le rythme vertical ; l'image remplit la hauteur */
	}

	.at-cat-hero__media {
		display: block;
	}

	.at-cat-hero__inner:has( .at-cat-hero__media ) {
		max-width: none;
		margin-inline: 0;
		padding-inline: 0;
		grid-template-columns: minmax(1.5rem, 1fr) minmax(0, 700px) minmax(0, 44vw);
		column-gap: 56px;
		row-gap: 0;
		align-items: stretch;
	}

	.at-cat-hero__inner:has( .at-cat-hero__media ) .at-cat-hero__text {
		grid-column: 2;
		padding-block: 80px;
	}

	.at-cat-hero__inner:has( .at-cat-hero__media ) .at-cat-hero__media {
		grid-column: 3;
	}

	.at-cat-hero__inner:has( .at-cat-hero__media ) .at-cat-hero__img {
		height: 100%; /* remplit la hauteur de la bande */
	}
}

/* ============================================================================
   Pagination d'archive — primitive TRANSVERSE (catégories feuilles, étiquettes, recherche…).
   Reprend le langage des chips .at-filter : contour neutre, actif/hover plein marine. Tokenisé.
   Aucun style propre à .at-cat-* : sert toutes les archives (the_posts_pagination).
   ============================================================================ */
.at-main .pagination {
	margin-top: 48px;
}

.at-main .pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.at-main .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--at-border-subtle); /* neutral/gray/200 (comme .at-filter) */
	border-radius: 999px;
	background: #fff;
	color: #12678c;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.at-main .page-numbers.current {
	background: #12678c;
	border-color: #12678c;
	color: #fff;
}

.at-main .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

@media (hover: hover) {
	.at-main a.page-numbers:hover {
		background: #12678c;
		border-color: #12678c;
		color: #fff;
	}
}

.at-main a.page-numbers:focus-visible {
	outline: 3px solid #12678c;
	outline-offset: 2px;
}

/* ============================================================================
   Pré-footer — DERNIER enfant de .at-main (dans le flux), à cheval sur le footer.
   Ancrage INVERSÉ : le BAS de la carte plonge d'une profondeur CONSTANTE
   (--at-prefooter-footer-overlap) dans le footer ; toute hauteur en plus (Devis, mobile) se
   développe vers le HAUT dans le flux → jamais de recouvrement, aucune dépendance à la hauteur.
   Le bandeau pleine largeur derrière la carte prend la surface de fin de page via le contrat
   --at-page-end-surface (voir « Contrat de fin de page »). Rien si variante « Aucun ».
   ============================================================================ */

/* Bandeau de réserve pleine largeur : prolonge la surface de fin de page sous la carte. */
.at-prefooter {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: var(--at-gutter);
	background: var(--at-page-end-surface, #fff);
	padding-top: var(--at-page-end-space, 64px); /* respiration de fin de page — portée par le pré-footer */
}

/* La carte plonge du token dans le footer (seul chevauchement). z-index : elle est dans .at-main
   (frère précédent du footer) et doit passer AU-DESSUS du fond sombre. */
.at-prefooter__card {
	position: relative;
	z-index: 1;
	margin-bottom: calc(-1 * var(--at-prefooter-footer-overlap));
	max-width: 1064px; /* relevé */
	margin-inline: auto;
	padding: 40px 24px;
	border-radius: 16px;
	background: #12678c;
	color: #fff;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.at-prefooter__title {
	margin: 0;
	max-width: 700px; /* relevé : titre sur 1 ligne (desktop) ; s'enroule sous 700 en mobile */
	font-size: 36px;
	line-height: 44px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #fff;
}

.at-prefooter__text {
	margin: 0;
	max-width: 46ch;
	font-size: 20px;
	line-height: 28px;
	color: #fff;
}

.at-prefooter .at-eyebrow {
	color: #fff; /* sur-titre lisible sur fond marine */
}

/* Newsletter : champ e-mail + bouton. */
.at-prefooter__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	max-width: 700px;
	margin-top: 8px;
}

.at-prefooter__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 56px;
	border: 0;
	border-radius: 12px;
	padding: 0 18px;
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	color: #12678c;
}

.at-prefooter__input::placeholder { color: #6c7a89; }
.at-prefooter__input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.at-prefooter__submit { flex: 0 0 auto; }

/* Devis : téléphone sous le bouton. */
.at-prefooter__tel {
	margin: 0;
	font-size: 15px;
	color: #fff;
}
.at-prefooter__tel a { color: #fff; text-decoration: underline; }

@media (min-width: 40rem) {
	.at-prefooter__form { flex-direction: row; }
}

@media (min-width: 64rem) {
	.at-prefooter__card { padding: 40px; }
}

/* ---- Footer sombre : structure (réf. Figma « FOOTER ») ---- */
.at-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.at-footer__main {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 20px;
}

.at-footer__brand {
	flex: 1 1 100%; /* mobile : pleine largeur, centré */
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
}

.at-footer__logo { width: 153px; height: auto; }
.at-footer__logo-text { font-size: 22px; font-weight: 700; color: #fff; }

.at-footer__baseline {
	margin: 0;
	font-size: 22px;
	line-height: 30px;
	font-weight: 700;
	color: #fff;
}

.at-footer__contact {
	display: flex;
	flex-direction: column; /* mobile empilé */
	align-items: center;
	gap: 8px;
}

.at-footer__contact-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
}
.at-footer__ico { width: 18px; height: 18px; flex: 0 0 auto; }

.at-footer__socials {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.at-footer__social {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 25px; /* cercle visible — relevé Figma */
	height: 25px;
	border: 1px solid #fff;
	border-radius: 999px;
	color: #fff;
}
/* Zone cliquable réelle ~44px (accessibilité) sans agrandir le cercle ni écarter les icônes. */
.at-footer__social::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}
.at-footer__social:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
.at-footer__social-ico { width: 12px; height: 12px; }

.at-footer__col { flex: 1 1 40%; } /* mobile : 2 colonnes côte à côte */

.at-footer__col-title {
	margin: 0 0 32px;
	font-size: 22px;
	line-height: 30px;
	font-weight: 700;
	color: #fff;
}
.at-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px; /* relevé : items gap 8 */
}
.at-footer__menu a {
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	line-height: 24px;
}

.at-footer__divider {
	width: 100%;
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid #d6dee5;
}

.at-footer__bottom {
	display: flex;
	flex-direction: column; /* mobile centré */
	align-items: center;
	gap: 8px;
	text-align: center;
}
.at-footer__copy {
	margin: 0;
	font-size: 12px;
	line-height: 16px;
	color: #fff;
}
.at-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	line-height: 16px;
}
.at-footer__legal a { color: #fff; text-decoration: none; }
.at-footer__legal li + li::before {
	content: "|";
	margin-right: 8px;
	color: rgba(255, 255, 255, 0.55);
}

@media (hover: hover) {
	.at-footer__menu a:hover,
	.at-footer__contact-item:hover,
	.at-footer__legal a:hover { text-decoration: underline; }
	.at-footer__social:hover { background: rgba(255, 255, 255, 0.15); }
}

@media (min-width: 64rem) {
	.at-site-footer { padding-right: 80px; padding-left: 80px; padding-bottom: 40px; }
	.at-footer__main { flex-wrap: nowrap; align-items: flex-start; }
	.at-footer__brand {
		flex: 1 1 auto;
		max-width: 846px;
		align-items: flex-start;
		text-align: left;
	}
	.at-footer__contact { flex-direction: row; gap: 32px; }
	.at-footer__col { flex: 0 0 197px; }
	.at-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
	.at-footer__legal { justify-content: flex-end; flex-wrap: nowrap; }
}

/* Barre de recherche — réf. Figma : boîte blanche = INPUT seul (radius/md2) + bouton btn/Primary séparé. */
.at-search {
	display: flex;
	align-items: center;
	gap: 12px; /* input ↔ bouton (séparés sur le fond bleu) */
	width: 100%;
	max-width: 700px;
	margin-inline: auto;
}
.at-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 56px; /* boîte blanche */
	background: #fff;
	border: 0;
	border-radius: 12px; /* radius/md2 */
	padding: 0 18px; /* pl 18 (placeholder) */
	font-family: inherit;
	font-size: 15px; /* DM Sans 400 15px */
	color: #12678c;
}
.at-search__input::placeholder { color: #6c7a89; } /* neutral/gray/600 */
.at-search__input:focus { outline: none; }
.at-search__submit { flex: 0 0 auto; white-space: nowrap; }

/* Fil d'Ariane — bande pleine largeur (réf. Figma « Breadcrumb »). Couleurs en dur (H0). */
.at-breadcrumb {
	border-top: 1px solid #eff5fc;
	border-bottom: 1px solid #eff5fc;
	padding: 8px 40px;
	font-size: 12px;
	line-height: 16px;
	color: #4a5568;
}

/* Bande flush sous l'en-tête : annule le padding-haut de .at-main quand le fil d'ariane ouvre la page. */
.at-main:has( > .at-breadcrumb ) {
	padding-top: 0;
}

/* Bande flush au-dessus du footer : SANS pré-footer, quand la page se TERMINE par une bande
   pleine largeur, pas de padding-bas du wrapper — la bande enchaîne directement le footer. */
body:not(.at-has-prefooter) .at-main:has( > .at-band:last-child ) {
	padding-bottom: 0;
}

/* ============================================================================
   Contrat de fin de page — surface ET respiration de transition derrière le pré-footer.
   Le bandeau .at-prefooter prolonge la dernière surface : blanc par défaut ; couleur de la
   bande si la page se termine par une .at-band pleine largeur. CSS pur et déterministe : une
   variable custom n'inhérite que vers le bas et un frère suivant ne peut pas lire le
   --at-band-color d'un frère précédent → le design-system mappe explicitement chaque surface
   de fin connue vers son token (aucune couleur recopiée en hex).

   STRUCTURE REQUISE (partie du contrat) : une surface colorée qui TERMINE une page est un
   .at-band ENFANT DIRECT de .at-main, placé juste avant .at-prefooter (cas /blog : .at-latest,
   rendu par the_content() directement dans .at-main). Une page dont le dernier bloc est imbriqué
   (article, fiche produit : contenu sous <article>/.at-container) se termine donc sur blanc. */
.at-main {
	--at-page-end-surface: #fff;   /* couleur de la respiration de fin de page (défaut : blanc) */
	--at-page-end-space: 64px;     /* distance avant la carte du pré-footer — mobile */
}
@media (min-width: 64rem) {
	.at-main { --at-page-end-space: 80px; } /* desktop (test) */
}
.at-main:has( > .at-band   + .at-prefooter ) { --at-page-end-surface: var(--at-surface-blue-50); }
.at-main:has( > .at-latest + .at-prefooter ) { --at-page-end-surface: var(--at-surface-blue-100); }

/* Contrat de fin de page : le PRÉ-FOOTER porte la respiration (--at-page-end-space) ; la dernière
   section ne l'ajoute pas (bord bas neutralisé) → même distance visuelle partout, dans la surface
   héritée, sans intervention éditoriale ni règle par template. */
.at-main > :has( + .at-prefooter ) { padding-bottom: 0; }                                    /* frère direct : bande, archive, blog… */
.at-container:has( + .at-prefooter ) > .at-article { padding-bottom: 0; }                    /* article sans bande (wrapper imbriqué) */
.at-produit:has( + .at-prefooter ) .at-produit__content > :last-child { padding-bottom: 0; } /* produit : bord du dernier bloc */

/* Avec pré-footer, .at-main ne réserve rien en bas : la carte est dans le flux et plonge
   d'elle-même dans le footer (margin-bottom). On neutralise le padding-bas du wrapper pour que
   le bas du bandeau coïncide avec le haut du footer. */
.at-has-prefooter .at-main {
	padding-bottom: 0;
}


.at-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.at-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #4a5568;
}

.at-breadcrumb__item:not(:last-child)::after {
	content: ">";
	color: #4a5568;
	font-size: 13px;
	line-height: 1;
}

.at-breadcrumb__item a {
	color: #4a5568;
	text-decoration: none;
}

.at-breadcrumb__item a:hover {
	text-decoration: underline;
}

.at-breadcrumb__item [aria-current="page"] {
	color: #12678c;
}

/* Affiché UNIQUEMENT en desktop (≥ 64rem), conforme à la maquette. Masqué mobile + tablette.
   Le JSON-LD BreadcrumbList (hors <nav>) reste émis quelle que soit la taille d'écran. */
@media (max-width: 63.999rem) {
	.at-breadcrumb {
		display: none;
	}
}

/* Résumé « L'essentiel en 30 secondes » — PROPRIÉTÉ de l'article (champ ACF `resume`), rendu par
   single.php AVANT the_content() via at_the_resume(). Langage graphique « Bon à savoir » sans icône. */
.at-resume {
	padding: 20px 24px;
	border-inline-start: 4px solid var(--at-primary-800);
	border-radius: 16px;
	background: var(--at-surface-blue-50);
}

.at-resume__title {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 26px;
	font-weight: 500;
	color: var(--at-primary-900);
}

.at-resume__content {
	font-size: 14px;
	line-height: 20px;
	color: var(--at-gray-900);
}

.at-resume__content > :first-child { margin-top: 0; }
.at-resume__content > :last-child { margin-bottom: 0; }
.at-resume__content p { margin: 0; }

.at-resume__content p + p,
.at-resume__content p + ul,
.at-resume__content p + ol,
.at-resume__content ul + p,
.at-resume__content ol + p { margin-top: 8px; }

.at-resume__content ul,
.at-resume__content ol { margin: 0; padding-inline-start: 1.25em; }

.at-resume__content li + li { margin-top: 4px; }

.at-resume__content a {
	color: var(--at-primary-600);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ============================================================
   core/media-text — habillage GLOBAL VOLONTAIRE (ciblé sur .wp-block-media-text, sans style ni variation).
   POURQUOI global et non scopé à une classe : le bloc n'est autorisé QUE sur les fiches produit
   (voir at_allowed_blocks_produit dans inc/blocks.php), où l'on veut TOUJOURS ce même rendu. On évite
   ainsi un style de bloc à sélectionner — rappel : register_block_style + is_default N'ÉCRIT PAS la
   classe dans post_content (le défaut = absence de classe), donc ni fiable ni stable pour scoper le CSS.
   Si un jour core/media-text est autorisé ailleurs avec d'autres designs : introduire alors un
   style/variation explicite (classe persistée) et migrer les blocs produit existants. Sections « texte + image ».
   Mobile-first : UNE colonne, TOUJOURS texte puis image, quelle que soit la position
   desktop. Desktop (>= 64rem) : deux colonnes 50/50, image à gauche ou à droite selon
   le réglage natif (choix explicite, pas de nth-child). Colonnes/gap/rayon imposés ;
   padding interne natif (0 8%) retiré. mediaWidth neutralisé (colonnes forcées).
   ============================================================ */
.wp-block-media-text {
	grid-template-columns: 100% !important; /* neutralise le style inline mediaWidth + le 2-col natif (mobile) */
	gap: 24px; /* Figma (panneau Layout) */
}

.wp-block-media-text > .wp-block-media-text__content {
	grid-column: 1 !important;
	grid-row: 1 !important; /* TEXTE en premier (mobile) */
	padding: 0 !important; /* retire le padding: 0 8% natif */
	align-self: center !important; /* texte centré verticalement (annule le réglage vertical natif) */
}

.wp-block-media-text > .wp-block-media-text__media {
	grid-column: 1 !important;
	grid-row: 2 !important; /* IMAGE ensuite (mobile) */
	align-self: center !important; /* image CENTRÉE verticalement (impression d'alignement avec le texte, colonne G ou D) */
}

.wp-block-media-text .wp-block-media-text__media :is(img, video) {
	border-radius: 16px; /* radius/lg — comme le hero produit */
}

@media (min-width: 64rem) {
	.wp-block-media-text {
		grid-template-columns: 1fr 1fr !important; /* 50/50 Figma */
		align-items: start;
		column-gap: 48px; /* space/48 entre colonnes (Figma) */
	}

	.wp-block-media-text > .wp-block-media-text__media {
		grid-column: 1 !important;
		grid-row: 1 !important; /* image à gauche (défaut) */
	}

	.wp-block-media-text > .wp-block-media-text__content {
		grid-column: 2 !important;
		grid-row: 1 !important;
	}

	.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
		grid-column: 2 !important; /* image à droite */
	}

	.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
		grid-column: 1 !important;
	}
}