/**
 * Dahu Theme Annad 2026 — pages composées dans l'éditeur de blocs (accueil et pages classiques).
 *
 * Cible le markup des blocs core générés par les compositions « Annad — Accueil » (patterns/) :
 * classes posées sur les blocs racines (.annad-hero, .annad-valeur…), styles de boutons
 * « Annad » (is-style-annad-*), cartes d’avis éditoriales.
 * Chargé en front sur les pages et dans l'éditeur (add_editor_style, inc/blocks.php).
 *
 * Mobile-first, breakpoints du thème : 40em / 64em. Couleurs : custom properties de header.css
 * (les classes de palette has-*-color viennent de theme.json). Page sur --color-surface, blocs sombres
 * sur --color-surface-2 : jamais les deux identiques, sinon la carte « Électrifiez » disparaît.
 */

:root {
	--annad-radius-small: 0.75rem;
	--annad-section-space: 3rem;
	/* Titres de section — réglables dans Personnaliser > Réglages Annad > Apparence */
	--annad-section-title-max: 2.75rem; /* taille maximale (écrans larges) */
	--annad-section-title-weight: 800;
	--annad-glass: color-mix(in srgb, var(--color-bg) 45%, transparent);
	--annad-glass-border: color-mix(in srgb, var(--color-on-surface) 30%, transparent);
}

@media (min-width: 64em) {
	:root {
		--annad-section-space: 5rem;
	}
}

/* Conteneur des pages : gouttières latérales (theme.json fixe les largeurs contenu / large) */
.annad-blocks {
	padding-inline: var(--gutter);
	padding-bottom: var(--annad-section-space);
	color: var(--color-on-surface);
	background-color: var(--color-surface); /* fond général des pages (maquette) */
}

.annad-blocks > .alignfull {
	margin-inline: calc(-1 * var(--gutter));
	padding-inline: var(--gutter);
}

/* ---------- Sections ---------- */

.annad-section {
	padding-block: var(--annad-section-space) 0;
}

.annad-title {
	margin-bottom: 2rem;
	font-family: var(--font-heading);
	font-size: clamp(min(1.75rem, var(--annad-section-title-max)), 1.1rem + 2.6vw, var(--annad-section-title-max));
	font-weight: var(--annad-section-title-weight);
	line-height: 1.15;
	text-align: center;
	text-wrap: balance;
}

/* Titre de section aligné à gauche depuis l'éditeur (Aligner le texte à gauche) : .annad-title
   centre par défaut et passait devant la classe du cœur, chargée plus tôt à spécificité égale. */
.annad-title.has-text-align-left {
	text-align: left;
}

/* Puce ronde verte devant un titre */
.annad-title--puce::before {
	content: "";
	display: inline-block;
	width: 0.35em;
	height: 0.35em;
	margin-right: 0.3em;
	vertical-align: middle;
	background-color: var(--color-brand-green);
	border-radius: 50%;
}

/* Même puce, APRÈS le titre (maquette « La société » : « Plongez dans l'univers ANNAD • ») */
.annad-title--puce-apres::after {
	content: "";
	display: inline-block;
	width: 0.35em;
	height: 0.35em;
	margin-left: 0.4em;
	vertical-align: middle;
	background-color: var(--color-brand-green);
	border-radius: 50%;
}

.annad-center {
	text-align: center;
}

/* Étiquette pilule (légende) */
.annad-pill {
	display: inline-block;
	padding: 0.375rem 1rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-on-accent);
	background-color: var(--color-accent);
	border-radius: 999px;
}

.annad-pill a {
	color: inherit;
	text-decoration: none;
}

/* Titre de page des gabarits standards (ex. modèle « Page avis ») */
.annad-page-title {
	padding-top: var(--annad-section-space);
	font-family: var(--font-heading);
	font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
	font-weight: 800;
	line-height: 1.1;
	text-align: center;
	text-wrap: balance;
}

/* Panier / Commande (page.php) : conteneur large (80rem), sans le contenu étroit de theme.json */
.annad-wc-page {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 0 var(--gutter) var(--annad-section-space);
}

.annad-wc-page > .annad-page-title {
	margin-bottom: 2rem;
}

/* Surtitre (ex. « COMMUNAUTÉ ANNAD ») */
.annad-eyebrow {
	margin-bottom: 0.5rem;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* Badge court en pastille, centré (ex. « Avis vérifiés ») */
.annad-avis-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: fit-content;
	margin: 0 auto 1.5rem;
	padding: 0.375rem 0.875rem;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	border: 1px solid var(--color-border);
	border-radius: 999px;
}

.annad-avis-badge::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	background-color: var(--color-brand-green);
	border-radius: 50%;
}

/* Séparateur de section */
.wp-block-separator.annad-separator {
	max-width: 48rem;
	margin-block: var(--annad-section-space);
	border: 0;
	border-top: 2px solid var(--color-border);
	opacity: 1;
}

/* ---------- Styles du bloc Bouton (register_block_style, inc/blocks.php) ---------- */

.wp-block-button[class*="is-style-annad-"] .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.75rem 1.75rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--annad-radius-small);
	transition: opacity var(--transition);
}

.wp-block-button[class*="is-style-annad-"] .wp-block-button__link:hover {
	opacity: 0.9;
}

.wp-block-button[class*="is-style-annad-"] .wp-block-button__link:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: 3px;
}

.wp-block-button.is-style-annad-accent .wp-block-button__link {
	color: var(--color-on-accent);
	background-color: var(--color-accent);
}

/* Vert plein — seul emploi de la maquette d'accueil : « Carte des revendeurs » */
.wp-block-button.is-style-annad-brand .wp-block-button__link {
	color: var(--color-on-brand-green);
	background-color: var(--color-brand-green);
}

.wp-block-button.is-style-annad-light .wp-block-button__link {
	color: var(--color-on-surface-light);
	background-color: var(--color-surface-light);
}

.wp-block-button.is-style-annad-outline .wp-block-button__link {
	color: var(--color-on-surface);
	background-color: var(--annad-glass);
	border-color: var(--annad-glass-border);
}

/* ---------- Hero (bloc Couverture) ---------- */

/* Hero : contenu dans la moitié basse, aligné à gauche (maquette) */
.annad-hero.wp-block-cover {
	align-items: flex-end;
	padding-block: 4rem 3.5rem;
	text-align: left;
}

.annad-hero.wp-block-cover > .wp-block-cover__inner-container {
	width: 100%;
}

/* Typographie du titre du hero, partagée avec la deuxième ligne animée : celle-ci n'est pas dans le
   <h1> (une liste ne peut pas l'être) mais doit s'afficher dans la même fonte et la même taille. */
.annad-hero__title,
.annad-hero__rotator,
.annad-hero__line {
	font-family: var(--font-heading);
	font-size: clamp(2.25rem, 0.9rem + 5.5vw, 5rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	text-align: left;
	text-transform: uppercase;
}

.annad-hero__title {
	max-width: 20ch; /* force les 2 lignes de la maquette plutôt qu'un pavé de 4 lignes */
	line-height: 0.97;
	text-wrap: balance;
	margin-bottom: 2.5rem;
}

/* ---------- Hero de l'accueil : groupe centré, texte aligné à gauche (4.36.0) ----------
   Composition unique « Accueil — Hero ». Le contenu du bloc Couverture forme un groupe centré dans
   le hero, large comme sa plus longue ligne (la ligne « Réinventez » comptée avec le mot défilant
   le plus long, voir .annad-hero__rotator > ul plus bas) : rien ne bouge pendant le défilement. À
   l'intérieur, titre et ligne partent du même bord gauche ; le bouton suit la justification du bloc
   Boutons (voir plus bas).
   Posé ici, sur .annad-hero, et non par les réglages du bloc : un bloc inséré depuis une ancienne
   composition, ou réglé autrement dans l'éditeur (alignement du titre), s'affiche pareil.
   Exclu : le bandeau de page (.annad-hero--page, « La société »), qui garde son placement bas-gauche.
   Spécificités : 0-3-0 et plus, au-dessus des classes du cœur (.wp-block-cover.is-position-*,
   .wp-block-buttons.is-content-justification-*, 0-2-0) et des classes de mise en page générées
   (.wp-container-…, 0-1-0). */
.annad-hero.wp-block-cover:not(.annad-hero--page) {
	align-items: center;
	justify-content: center;
	padding-block: clamp(4rem, 2rem + 6vw, 7rem);
	text-align: left;
}

/* Le groupe : le conteneur intérieur de la Couverture, réduit à la largeur de son contenu
   (fit-content) et centré par la Couverture, jamais plus large que le hero. */
.annad-hero.wp-block-cover:not(.annad-hero--page) > .wp-block-cover__inner-container {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

/* Les mises en page « contraintes » du cœur limitent chaque enfant à la largeur de contenu (48rem) :
   levé ici, chaque ligne prend toute la largeur du groupe et part de son bord gauche. Le titre perd
   aussi sa limite de 20ch : il tient sur une ligne tant que l'écran le permet. */
.annad-hero.wp-block-cover:not(.annad-hero--page) :is(.wp-block-cover__inner-container, .annad-hero__headline) > * {
	max-width: none;
}

/* Tailles réduites sur mobile, 80px au plus au-dessus de ~1390px. Pente choisie pour que
   « Réinventez votre mobilité » (environ 15,6 em en 600) tienne sur une ligne dès 768px ; en
   dessous, ou avec un mot plus long, le mot passe sous « Réinventez ». */
.annad-hero.wp-block-cover:not(.annad-hero--page) :is(.annad-hero__title, .annad-hero__rotator, .annad-hero__line) {
	font-size: clamp(1.75rem, 0.3rem + 5.4vw, 5rem);
	text-align: left;
}

/* « Réinventez » + mot défilant : sur une ligne ; trop longue pour l'écran, le mot passe dessous,
   aligné à gauche lui aussi. */
.annad-hero.wp-block-cover:not(.annad-hero--page) .annad-hero__line {
	flex-wrap: wrap;
	justify-content: flex-start;
	row-gap: 0;
}

/* Dans la ligne, le mot reste collé au verbe (calé à gauche dans sa fenêtre). */
.annad-hero.wp-block-cover:not(.annad-hero--page) .annad-hero__line .annad-hero__rotator li {
	text-align: left;
}

/* Bouton : aucune règle de position ici (4.39.0). C'est le réglage « Justification » du bloc
   Boutons dans l'éditeur qui décide (gauche, centre, droite), dans la largeur du groupe ; le groupe
   étant centré dans le hero, « Centre » (réglage de la composition) centre le bouton dans le hero. */

/* Texte clair sur la photo. Avec une image claire, l'éditeur pose .is-light et le cœur passerait le
   texte en noir (.wp-block-cover.is-light .wp-block-cover__inner-container, 0-3-0). Les couleurs
   choisies dans l'éditeur (« Réinventez », mots défilants) restent les leurs. */
.annad-hero.wp-block-cover.is-light:not(.annad-hero--page) > .wp-block-cover__inner-container {
	color: var(--color-text);
}

/* ---------- Hero : deuxième ligne animée ----------
   Composition « Accueil — Hero » (ligne « Adaptez » + mot défilant) et, pour les blocs déjà
   insérés, anciennes « Accueil — Hero (phrases défilantes) » et « Accueil — Hero (mot fixe + fin
   animée) », retirées de l'éditeur en 4.32.0. Le défilement est posé en JS
   (assets/js/hero-rotator.js) ; tout le reste est ici. */

/* Le groupe porte l'espace avant le bouton : sans lui, la marge basse du titre s'intercalerait
   entre les deux lignes du hero. */
.annad-hero__headline {
	margin-bottom: 2.5rem;
}

.annad-hero__headline .annad-hero__title {
	margin-bottom: 0;
}

/* Les deux lignes du hero forment un seul titre : l'écart que le blockGap du cœur pose entre les
   enfants d'un groupe les séparerait visuellement. */
.annad-hero__headline > * + * {
	margin-block-start: 0;
}

/* Fenêtre d'une seule ligne. La hauteur est posée ici et non par le script : sans elle, le bloc
   serait plat jusqu'à l'exécution du JS et le bouton remonterait d'un cran au chargement. */
.annad-hero__rotator {
	overflow: hidden;
	height: 1.1em;
	line-height: 1.1;
}

/* La liste coulisse d'un bloc. Elle prend la largeur de son entrée la plus longue (largeur
   intrinsèque d'un conteneur flex en colonne) : la ligne garde donc la même emprise d'un texte à
   l'autre, et dans la variante « mot fixe + fin animée » le verbe ne bouge jamais. */
.annad-hero__rotator > ul,
.annad-hero__rotator > ol {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 0.6s var(--annad-ease);
}

.annad-hero__rotator li {
	flex: 0 0 auto;
	height: 1.1em;
	line-height: 1.1;
	white-space: nowrap;
}

/* Couleur des phrases animées : aucune règle ici. Elle se choisit dans l'éditeur (couleur de texte
   du bloc Liste, d'une entrée ou d'un mot) ; à défaut, c'est celle dont hérite le hero. */

/* Variante « mot fixe + fin animée » : le verbe et la fenêtre sur la même ligne de base. */
.annad-hero__line {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 0.25em;
	line-height: 1.1;
}

.annad-hero__line > p {
	margin: 0;
}

/* Graisse de la ligne : celle du groupe .annad-hero__line, réglée dans l'éditeur (Typographie >
   Apparence, attribut fontWeight ; 600 dans la composition). Le verbe et les mots en héritent ; sans
   réglage, la ligne garde le 800 du titre. */
.annad-hero__line > p,
.annad-hero__line .annad-hero__rotator {
	font-weight: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.annad-hero__rotator > ul,
	.annad-hero__rotator > ol {
		transition: none;
	}
}

/* Bouton du hero : nettement plus grand que les boutons courants */
.annad-hero .wp-block-button.annad-hero__cta .wp-block-button__link {
	min-height: 3.5rem;
	padding: 1rem 2.5rem;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Remplissage vert au survol : bouton du hero (« Configurer mon kit ») et bouton « Annad accent » de
   la section « Électrifiez votre vélo » (« Découvrir le moteur qu'il me faut »). Ciblés par leur
   section : le style de bouton seul est partagé par d'autres pages, qui ne doivent pas le recevoir.
   Le vert Annad remplit le bouton de gauche à droite. C'est un aplat (dégradé d'une seule couleur)
   dont on anime la largeur : le front qui avance est un bord net, pas un fondu. La couleur de fond
   du style choisi dans l'éditeur reste dessous, quelle qu'elle soit. background-origin : sans lui
   l'aplat s'arrêterait à 1px des bords (bordure du bouton). Durée : --annad-cta-fill (250 ms). */
.annad-hero .wp-block-button.annad-hero__cta .wp-block-button__link,
.annad-valeur .wp-block-button.is-style-annad-accent .wp-block-button__link {
	background-image: linear-gradient(var(--color-brand-green), var(--color-brand-green));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	background-origin: border-box;
	transition:
		background-size var(--annad-cta-fill, 250ms) var(--annad-ease),
		color var(--annad-cta-fill, 250ms) var(--annad-ease);
}

/* Même effet au clavier. opacity : annule l'atténuation commune des boutons « Annad » au survol, le
   vert doit rester plein. color en !important : une couleur de texte choisie dans l'éditeur
   (classe de palette du cœur, elle-même en !important) resterait claire sur le vert. */
.annad-hero .wp-block-button.annad-hero__cta .wp-block-button__link:hover,
.annad-hero .wp-block-button.annad-hero__cta .wp-block-button__link:focus-visible,
.annad-valeur .wp-block-button.is-style-annad-accent .wp-block-button__link:hover,
.annad-valeur .wp-block-button.is-style-annad-accent .wp-block-button__link:focus-visible {
	color: var(--color-on-brand-green) !important;
	background-size: 100% 100%;
	opacity: 1;
}

/* Mouvement réduit : le bouton passe au vert d'un coup. */
@media (prefers-reduced-motion: reduce) {
	.annad-hero .wp-block-button.annad-hero__cta .wp-block-button__link,
	.annad-valeur .wp-block-button.is-style-annad-accent .wp-block-button__link {
		transition: none;
	}
}

/* Variante « bandeau de page » du hero (composition « La société — Bandeau de tête ») : même bloc
   Couverture et même placement bas-gauche, mais titre en casse normale suivi d'un sous-titre, et
   plusieurs boutons de taille courante côte à côte. Les boutons ne demandent aucune règle : le bloc
   Boutons du cœur en aligne autant qu'on en ajoute, chacun avec son style « Annad ». */
.annad-hero--page .annad-hero__title {
	max-width: none;
	margin-bottom: 0.75rem;
	font-size: clamp(2.25rem, 1.1rem + 4.2vw, 4.5rem);
	line-height: 1.05;
	text-transform: none;
}

.annad-hero__subtitle {
	margin-bottom: 2.5rem;
	font-size: clamp(1.125rem, 0.9rem + 1vw, 1.75rem);
	line-height: 1.3;
}

.annad-hero--page .wp-block-buttons {
	gap: 1rem 1.5rem;
}

/* Contenu calé sur la largeur « large » (80rem) plutôt que sur la largeur de texte (48rem) : le
   titre s'aligne sur le bord gauche des sections suivantes, comme sur la maquette. La règle du
   cœur (.is-layout-constrained > :where(…), 0-1-0) cède à celle-ci (0-2-0), sans !important. */
.annad-hero--page .wp-block-cover__inner-container > * {
	max-width: var(--wp--style--global--wide-size, 80rem);
}

/* Filet de sécurité : un bloc Couverture sans image conserve une hauteur et un fond (sinon il
   s'effondre et chevauche le bloc précédent — constaté en staging). */
.annad-blocks .wp-block-cover,
.annad-blocks .wp-block-cover-image {
	min-height: 15rem;
	background-color: var(--color-surface-2);
}

/* ---------- Carte « Électrifiez votre vélo » ---------- */

.annad-valeur__card.wp-block-columns {
	gap: 0;
	/* Neutralise le padding cœur :where(.wp-block-columns.has-background) : l'image de droite touche les bords ;
	   l'espacement du texte est porté par .annad-valeur__content. */
	padding: 0;
	overflow: hidden;
	border-radius: var(--radius-large);
}

.annad-valeur__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 1.25rem;
	padding: 2rem var(--gutter);
}

@media (min-width: 64em) {
	.annad-valeur__content {
		padding: 3rem;
	}
}

.annad-valeur__title {
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
	font-weight: 500;
	line-height: 1.15;
}

.annad-valeur__title strong {
	font-weight: 800;
}

/* Petite barre verte sous le titre */
.annad-valeur__title::after {
	content: "";
	display: block;
	width: 15rem;
    height: 0.8rem;
	margin-top: 1.25rem;
	background-color: var(--color-brand-green);
	border-radius: 999px;
}

.annad-valeur__media .wp-block-image,
.annad-valeur__media .wp-block-image img {
	height: 100%;
	margin: 0;
}

.annad-valeur__media .wp-block-image img {
	width: 100%;
	object-fit: cover;
}

/* ---------- Kits sur-mesure ---------- */

.annad-kits__panel {
	overflow: hidden;
	border-radius: var(--radius-large);
}

.annad-kits__cards.wp-block-columns {
	gap: 1rem;
	margin: 0;
	padding: 2rem var(--gutter);
}

@media (min-width: 64em) {
	.annad-kits__cards.wp-block-columns {
		padding: 3rem 4.5rem;
	}
}

/* Rangée des cartes : défilement horizontal, carrousel, nombre de cartes visibles — dans
   kit-carousel.css (4.35.0), chargée seulement sur les pages qui portent ces cartes. Le chevron
   fixe à droite de l'ancienne rangée défilante (sous 64em) est retiré : le carrousel le remplace. */

.annad-kits__card.wp-block-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 1.25rem 1rem;
	text-align: center;
	border-radius: var(--annad-radius-small);
}

.annad-kits__card h3 {
	font-size: 1.125rem;
	font-weight: 800;
}

.annad-kits__card p {
	font-size: 0.9375rem;
	line-height: 1.5;
}

.annad-kits__photos.wp-block-columns {
	gap: 0;
	margin: 0;
}

.annad-kits__photo {
	position: relative;
	margin: 0;
	min-height: 14rem;
}

.annad-kits__photo img {
	width: 100%;
	height: 100%;
	min-height: 14rem;
	object-fit: cover;
}

@media (min-width: 64em) {
	.annad-kits__photo,
	.annad-kits__photo img {
		min-height: 20rem;
	}
}

.annad-kits__photo figcaption {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: 0.375rem 1rem;
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--color-on-accent);
	background-color: var(--color-accent);
	border-radius: 999px;
}

/* ---------- Innovation technologique ---------- */

.annad-tech__grid.wp-block-columns {
	gap: 1.5rem;
}

.annad-tech__media {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	height: 100%;
	min-height: 16rem;
	padding: 2rem;
	border-radius: var(--radius-large);
}

.annad-tech__image {
	margin: 0;
}

.annad-tech__image img {
	max-height: 20rem;
	width: auto;
	object-fit: contain;
}

.annad-tech__badges {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: 1fr; /* les 4 vignettes à la hauteur de la plus haute : rien ne bouge au retournement */
	gap: 1rem;
	height: 100%;
}

@media (min-width: 40em) {
	.annad-tech__badges {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.annad-tech__badges > * {
	margin: 0 !important; /* neutralise l'espacement vertical des blocs enfants */
}

/* Badges retournables (composition « Accueil — Innovation technologique »).
   Structure : .annad-tech__badge (perspective) > .annad-tech__badge-inner (pivot) > 2 faces.
   Les deux faces sont superposées dans une grille 1×1 : la hauteur de la vignette est donc celle
   de la face la plus longue (le verso), sans hauteur écrite en dur. grid-auto-rows: 1fr aligne
   ensuite les 4 vignettes sur la plus haute : la grille 2×2 ne bouge pas au retournement.
   Retournement : survol, focus clavier (:focus-within) et classe .is-flipped posée au clic /
   à l'appui tactile par assets/js/tech-flip.js. */
.annad-tech__badge {
	perspective: 1000px;
	min-height: 8rem;
	background: none;
	border: 0;
	padding: 0;
}

.annad-tech__badge-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	height: 100%;
	transform-style: preserve-3d;
	/* Retournement ralenti (token local) : la rotation 3D d'une vignette de cette
	   taille est illisible à 300 ms — on la lit, on ne la subit pas. Le token
	   global --annad-transition-base reste inchangé pour le reste du thème. */
	transition: transform var(--annad-tech-flip-duration, 900ms) var(--annad-ease);
}

.annad-tech__badge:hover .annad-tech__badge-inner,
.annad-tech__badge:focus-within .annad-tech__badge-inner,
.annad-tech__badge.is-flipped .annad-tech__badge-inner {
	transform: rotateY(180deg);
}

/* Faces superposées (même cellule de grille) : l'arrière est caché quand il fait face au fond */
.annad-tech__face {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	min-width: 0;
	padding: 1.5rem;
	/* Dégradé gris posé à 0.8 d'opacité via rgba() : seul le fond est translucide, le texte reste opaque */
	background: #3b3b3b;
	background: linear-gradient(90deg, rgba(59, 59, 59, 0.8) 0%, rgba(102, 101, 101, 0.8) 100%);
	border: 1px solid var(--color-border);
	border-radius: var(--annad-radius-small);
	backface-visibility: hidden;
}

/* Les faces sont des groupes de blocs frères dans .annad-tech__badge-inner (disposition « flow ») :
   WordPress donne au second, le verso, la marge du block gap (`:root :where(.is-layout-flow) > *`,
   margin-block-start: 24px). Sans cette remise à zéro, le verso est décalé de 24px (en position
   absolue : 24px de hauteur perdus ; dans la grille : 24px de hauteur de carte ajoutés pour rien).
   Spécificité 0-2-0 > 0-1-0 de la règle core. */
.annad-tech__badge-inner > .annad-tech__face {
	margin: 0;
}

/* Verso : légèrement éclairci pour signaler le changement de face (texte long, plus dense).
   Il reste DANS la cellule de grille du recto (grid-area de .annad-tech__face) : la vignette prend
   la hauteur de la face la plus longue et les deux faces sont étirées à cette même hauteur. Pas de
   défilement : c'est la carte qui grandit, recto compris. Un verso sorti du flux (position absolue
   sur le recto) débordait à presque toutes les largeurs — jusqu'à 109px juste au-dessus de 782px,
   où les colonnes se placent côte à côte et les vignettes ne font que ~170px de large. */
.annad-tech__face--back {
	/* Centrage vertical du texte ; « safe » cale en haut un texte plus haut que la face. */
	justify-content: center;
	justify-content: safe center;
	transform: rotateY(180deg);
	/* Verso : même dégradé, éclairci d'un cran pour signaler le changement de face */
	background: #666565;
	background: linear-gradient(90deg, rgba(80, 80, 80, 0.8) 0%, rgba(122, 121, 121, 0.8) 100%);
}

.annad-tech__badge-label {
	font-size: 1.2rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-brand-green);
}

.annad-tech__badge-label::before {
	content: "| ";
}

.annad-tech__face p {
	font-size: 1.1rem;
	color: var(--color-text-muted);
}

.annad-tech__face--back p {
	font-size: 1rem;
	line-height: 1.5;
}

/* Vignette rendue focusable par le script : même mise en évidence que les autres cibles clavier */
.annad-tech__badge:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: 3px;
}

/* Mouvement réduit : aucune rotation, simple bascule d'une face à l'autre en fondu */
@media (prefers-reduced-motion: reduce) {
	.annad-tech__badge-inner,
	.annad-tech__badge:hover .annad-tech__badge-inner,
	.annad-tech__badge:focus-within .annad-tech__badge-inner,
	.annad-tech__badge.is-flipped .annad-tech__badge-inner {
		transform: none;
		transition: none;
	}

	.annad-tech__face {
		backface-visibility: visible;
		transition: opacity var(--annad-transition-fast) var(--annad-ease);
	}

	.annad-tech__face--back {
		transform: none;
		opacity: 0;
	}

	.annad-tech__badge:hover .annad-tech__face--front,
	.annad-tech__badge:focus-within .annad-tech__face--front,
	.annad-tech__badge.is-flipped .annad-tech__face--front {
		opacity: 0;
	}

	.annad-tech__badge:hover .annad-tech__face--back,
	.annad-tech__badge:focus-within .annad-tech__face--back,
	.annad-tech__badge.is-flipped .annad-tech__face--back {
		opacity: 1;
	}
}

/* ---------- Conseils d'expert ---------- */

.annad-conseil__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	padding: 2.5rem var(--gutter);
	text-align: center;
	border-radius: var(--annad-radius-small);
}

.annad-conseil__card h2 {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	font-weight: 800;
}

/* ---------- Installateurs partenaires ---------- */

.annad-revendeurs .annad-title {
	margin-bottom: 1.5rem;
}

.annad-revendeurs p {
	margin-bottom: 2.5rem;
	opacity: 0.9;
}

.annad-revendeurs .wp-block-button__link {
	min-height: 3.25rem;
	padding-inline: 2.5rem;
	font-size: 1.125rem;
}

/* ---------- Carte photo générique (Couverture : Pro, Duo) ---------- */

.annad-pro__card.wp-block-cover,
.annad-duo__card.wp-block-cover {
	overflow: hidden;
	border-radius: var(--radius-large);
}

.annad-pro__card.wp-block-cover {
	justify-content: flex-start;
	padding: 2rem var(--gutter);
}

@media (min-width: 64em) {
	.annad-pro__card.wp-block-cover {
		padding: 3rem;
	}
}

/* Variante claire (composition « Accueil — Jantes FREYYA ») */
/* Le cœur force un texte noir sur les Couvertures claires (.is-light) : on repasse sur le token */
.annad-pro__card--light.wp-block-cover,
.annad-pro__card--light.wp-block-cover .wp-block-cover__inner-container {
	color: var(--color-on-surface-light);
}

.annad-pro__text {
	max-width: 48rem;
	margin-bottom: 1.5rem;
	font-size: 1rem;
	line-height: 1.6;
}

/* Carte claire : le texte reste sur la partie claire de la photo (4.40.0). Sur la photo des jantes
   FREYYA, la jante carbone noire commence vers 59 % de la largeur de la carte à hauteur du texte :
   des lignes de 48rem passaient dessus, texte sombre sur carbone noir, illisible.
   --annad-pro-text-max : longueur maximale des lignes du paragraphe (en % : de la largeur intérieure
   de la carte). À régler ici, ou sur la carte, sans toucher aux règles. Valeur mesurée : 29rem au
   plus (grand écran), 55 % de la carte en dessous, jamais moins de 18rem (sinon trop de lignes).
   Ce n'est pas un max-width : la mise en page « contrainte » du cœur centre chaque enfant
   (margin-inline: auto !important) et un paragraphe plus étroit que le titre se décalerait vers le
   centre. Le bloc garde sa colonne (même bord gauche que le titre et le bouton) ; une marge
   intérieure droite raccourcit les lignes. Titre et bouton ne sont pas touchés (ils restent loin de
   la jante). */
.annad-pro__card--light.wp-block-cover {
	--annad-pro-text-max: min(29rem, max(55%, 18rem));
	--annad-pro-image-position-mobile: 25% 80%;
}

.annad-pro__card--light .annad-pro__text {
	box-sizing: border-box;
	padding-inline-end: max(0px, min(48rem, 100%) - var(--annad-pro-text-max));
}

/* Sous 34em (544px), la carte est plus haute que large au regard de la photo (rapport < 1,6) : la
   photo est mise à l'échelle sur la hauteur et la jante entre par le coin bas-droit, sous les
   dernières lignes. Le cadrage choisi dans l'éditeur (point focal 53 % 80 %) est décalé vers la
   gauche de la photo, ce qui pousse la jante vers la droite. --annad-pro-image-position-mobile ;
   !important : le point focal est écrit en style en ligne sur l'image. */
@media (max-width: 33.9375em) {
	.annad-pro__card--light.wp-block-cover > .wp-block-cover__image-background {
		object-position: var(--annad-pro-image-position-mobile) !important;
	}
}

.annad-pro__card h2 {
	margin-bottom: 1.5rem;
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem);
	font-weight: 800;
	line-height: 1.1;
}

/* ---------- Duo « Une expertise unique » / « Born in France » ---------- */

.annad-duo .wp-block-columns {
	gap: 1.25rem;
}

.annad-duo__card.wp-block-cover {
	align-items: stretch;
	height: 100%;
	padding: 2rem var(--gutter);
}

@media (min-width: 64em) {
	.annad-duo__card.wp-block-cover {
		padding: 2.5rem 3rem;
	}
}

.annad-duo__card .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
}

.annad-duo__title {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem);
	font-weight: 800;
	line-height: 1;
}

.annad-duo__card--right .annad-duo__title {
	text-align: right;
	text-transform: uppercase;
}

.annad-duo__title s {
	text-decoration-thickness: 0.08em;
}

.annad-duo__text {
	max-width: 30rem;
	padding: 1rem 1.25rem;
	font-size: 0.9375rem;
	background-color: var(--annad-glass);
	border: 1px solid var(--annad-glass-border);
	border-radius: var(--annad-radius-small);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.annad-duo__card--right .annad-duo__text {
	margin-left: auto;
}

.annad-duo .wp-block-buttons {
	justify-content: center;
}

/* Puce verte devant les liens du duo */
.annad-duo .wp-block-button__link::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	background-color: var(--color-brand-green);
	border-radius: 50%;
}

/* ---------- Ils parlent de nous ---------- */

.annad-logos__row {
	gap: 1.25rem 2rem;
}

.annad-logos__row + .annad-logos__row {
	margin-top: 2.5rem;
}

.annad-logo {
	margin: 0;
}

.annad-logo img {
	width: auto;
	max-width: 12rem;
	max-height: 3rem;
	object-fit: contain;
}

/* Presse : badges clairs */
.annad-logos__row--presse .annad-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 4.5rem;
	padding: 0.75rem 1.5rem;
	background-color: var(--color-surface-light);
	border-radius: var(--annad-radius-small);
}

/* Rangée « partenaires » : plus affichée depuis 4.26.0 (logos passés dans le footer, filtre
   annad_theme_hide_partner_row() dans inc/blocks.php). */

@media (prefers-reduced-motion: reduce) {
	.wp-block-button[class*="is-style-annad-"] .wp-block-button__link {
		transition: none;
	}
}

/* ---------- Cartes d'avis ----------
   Compositions « Carte avis », « Accueil — Avis de la communauté » et « Page avis » : blocs natifs,
   contenu saisi dans l'éditeur. Toute la mise en forme est ici, sur les classes : les blocs ne
   portent aucun attribut de style, seule la couleur de fond d'une carte se choisit dans l'éditeur
   (la classe de palette has-*-background-color du cœur, en !important, passe devant le fond par
   défaut ci-dessous ; le padding du cœur sur .has-background, en :where(), cède au nôtre).
   Ces règles vivaient dans avis-card.css, feuille du bloc « Statistiques des avis » : WordPress ne
   la charge que sur les pages qui contiennent ce bloc, donc pas sur l'accueil. */

.annad-avis-card.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem;
	text-align: left;
	color: var(--color-on-surface);
	background-color: var(--color-surface-3);
	border: 1px solid var(--color-border);
	/* Maquette : panneau net, ~10px. Jeton des petites cartes (12px), pas --radius-large (20px). */
	border-radius: var(--annad-radius-small);
}

/* La carte et le bloc nom + date sont des groupes en mise en page « contrainte » : le cœur centre
   leurs enfants (margin auto, en !important) et les espace (blockGap). Dans une colonne flex, ces
   marges réduisent chaque enfant à son contenu et le centrent, et s'ajoutent au gap de la carte.
   Neutralisées : contenu aligné à gauche sur toute la largeur, espacement porté par gap seul. */
.annad-avis-card.wp-block-group > *,
.annad-avis-card__identity.wp-block-group > * {
	max-width: none;
	margin-block: 0;
	margin-inline: 0 !important;
}

.annad-avis-card__author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* Nom + date : prennent la place restante à côté de l'avatar et passent à la ligne plutôt que de
   pousser l'en-tête hors de la carte (carte étroite, nom long d'un seul tenant). */
.annad-avis-card__identity {
	flex: 1 1 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.annad-avis-card__name {
	font-weight: 700;
	font-size: 0.9rem;
}

.annad-avis-card__date {
	font-size: 0.8rem;
	color: var(--color-text-muted);
}

.annad-avis-card__title {
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.3;
}

.annad-avis-card__text {
	flex: 1 1 auto;
	font-size: 1rem; /* maquette : 19px, entre les tailles « Moyen » (18) et « Grand » (20) de theme.json */
	line-height: 1.55;
	overflow-wrap: anywhere;
}

/* Avatar : bloc Image, rond de 64px (maquette : ~63). Taille et arrondi sont ici, pas dans les
   attributs du bloc. */
.annad-avis-card__avatar.wp-block-image,
.annad-avis-card__avatar img {
	flex: 0 0 auto;
	/* !important : les cartes déjà publiées portent encore la taille en style en ligne sur <img>
	   (44px, composition d'avant la 4.21.3), qui passerait devant cette règle. */
	width: 4rem !important;
	height: 4rem !important;
	margin: 0;
	border-radius: 50%;
	object-fit: cover;
}

/* Pastille produit : bloc Bouton en petit format pilule grise. Maquettes (accueil et page avis) :
   gris #868686 en partie transparent (#747474 relevé sur la carte de l'accueil), liseré clair
   #BDBDBD, texte blanc 600 de 13px — l'ancienne pastille, 12px sur #3B3B3B sans liseré, ne se
   voyait plus sur les cartes. */
.wp-block-button.annad-avis-card__product .wp-block-button__link {
	min-height: 0;
	padding: 0.4375rem 1.375rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-on-surface);
	background-color: color-mix(in srgb, #868686 70%, transparent);
	border: 1px solid #bdbdbd;
	border-radius: 999px;
}

/* Pastille calée en bas de la carte et centrée (maquette). Après la règle « > * » ci-dessus, de
   même spécificité : margin-top: auto doit la suivre pour l'emporter. */
.annad-avis-card__buttons.wp-block-buttons {
	justify-content: center;
	margin-top: auto;
}

/* Étoiles saisies en texte (★) */
.annad-stars {
	font-size: 1.125rem;
	letter-spacing: 0.15em;
	line-height: 1;
	color: var(--color-stars);
}

/* Grille de cartes de la page avis : 1 → 2 → 3 colonnes */
.annad-avis-grid.wp-block-group {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	align-items: start;
}

@media (min-width: 40em) {
	.annad-avis-grid.wp-block-group {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.annad-avis-grid.wp-block-group {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- Accueil : avis de la communauté (composition dahu-theme-annad-2026/accueil-avis) ---------- */

/* Pas de fond de section (retiré en 4.28.4) : la section est transparente comme ses voisines et
   laisse voir la texture de la page. L'aplat --color-surface-2 posé en 4.22.0 venait d'une erreur
   de lecture du retour d'Annad (« un fond sur les avis » visait les cartes) ; sa marge haute et son
   retrait bas, qui n'existaient que pour lui, sont retirés avec lui. */

/* Cartes de l'accueil : fond #494949 et ombre douce (maquette), pour se détacher de la texture.
   Limité à l'accueil : la page avis garde ses cartes (maquette « Page avis » plus sombre). */
.annad-avis-accueil .annad-avis-card.wp-block-group {
	background-color: #494949;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Les cartes déjà publiées portent un préréglage sombre de la palette (Surface, Surface 2, Surface 3),
   en !important dans le cœur et devenu invisible sur cette section : #494949 passe devant, ici
   seulement. Une autre couleur choisie dans l'éditeur (claire, verte…) reste appliquée. */
.annad-avis-accueil .annad-avis-card.wp-block-group:is(.has-surface-background-color, .has-surface-2-background-color, .has-surface-3-background-color) {
	background-color: #494949 !important;
}

/* Texte de l'avis limité à 5 lignes, avec ellipse : les vrais avis sont bien plus longs que celui
   de la maquette. flex: 0 1 auto (au lieu de 1 1 auto) : le paragraphe ne s'étire plus pour remplir
   la carte, la pastille est calée en bas par sa propre marge automatique. */
.annad-avis-accueil .annad-avis-card__text {
	flex: 0 1 auto;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	overflow: hidden;
}

/* Grille plus étroite que les autres sections, volontairement (maquette : ~1131px, contre 80rem
   pour la largeur « large » de theme.json). Trois classes : passe devant la largeur que le cœur
   donne aux blocs .alignwide. Reste centrée par les marges automatiques du conteneur. */
.annad-avis-accueil .annad-avis-columns.wp-block-columns {
	max-width: 70.75rem;
}

/* 3 cartes côte à côte (bloc Colonnes), hauteur alignée */
.annad-avis-columns.wp-block-columns .annad-avis-card.wp-block-group {
	height: 100%;
}

/* Bouton « Découvrir plus d'avis », centré sous la grille. Les pastilles des cartes sont aussi des
   blocs Boutons : exclues, sinon cette marge remplaçait leur margin-top: auto et les décalait. */
.annad-avis-accueil .wp-block-buttons:not(.annad-avis-card__buttons) {
	justify-content: center;
	margin-top: 2.5rem;
}

/* Maquette : fond #333, texte blanc, liseré clair, rayon 12px (au lieu du verre du style « Contour »). */
.annad-avis-accueil__more.wp-block-buttons .wp-block-button .wp-block-button__link {
	color: var(--color-on-surface);
	background-color: #333;
	border: 1px solid color-mix(in srgb, var(--color-on-surface) 70%, transparent);
	border-radius: var(--annad-radius-small);
}

/* ---------- Contenu déjà publié : blocs sombres insérés avant l'inversion des fonds ----------
   Les compositions portaient la couleur de palette « Surface », désormais identique au
   fond des pages. Les compositions à jour utilisent « Surface 2 » ; ces règles rattrapent le
   contenu déjà inséré sans réinsertion (ciblage limité aux blocs des compositions Annad). */
.annad-kits__panel.has-surface-background-color,
.annad-valeur__card.has-surface-background-color,
.annad-pro__card .wp-block-cover__background.has-surface-background-color,
.annad-duo__card .wp-block-cover__background.has-surface-background-color {
	background-color: var(--color-surface-2) !important;
}

/* ---------- Trois photos à légende dépliable (composition devenir-photos) ---------- */
/* Composition partagée par « Devenir revendeur » et « Nos revendeurs » : une insertion par page,
   une seule feuille. Déplacée telle quelle de devenir-revendeur.css (4.21.15), qui n'est chargé
   qu'avec le modèle « Page Devenir revendeur ». Les classes gardent leur nom d'origine : le contenu
   déjà publié les porte. */

/* Premier ajout au déplacement : la largeur « large » (80rem, celle de theme.json) est écrite ici, pour
   que la rangée garde sa taille même si les alignements du bloc sont retirés dans l'éditeur. Avec
   les alignements d'origine, la valeur est la même : rendu inchangé. */
.annad-devenir__photos-section.wp-block-group {
	max-width: none;
}

.annad-devenir__photos.wp-block-group {
	max-width: var(--container-max);
	margin-inline: auto;
}


.annad-devenir__photos {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

@media (min-width: 48em) {
	.annad-devenir__photos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Format vertical 2/3 au lieu d'une hauteur fixe : la carte se dimensionne sur sa largeur, donc le
   ratio tient à toutes les tailles d'écran. Au repos elle occupe 80 % de sa colonne et se centre ;
   au survol (et au focus clavier, pour que l'effet ne soit pas réservé à la souris) elle passe à
   100 %. La hauteur suit la largeur via le ratio, d'où la transition sur `width` seule.
   Le texte déplié se superpose à la photo au lieu de la pousser (voir .annad-devenir__caption). */
.annad-devenir__photo {
	position: relative;
	width: 80%;
	margin-inline: auto;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background-position: center;
	background-size: cover;
	border-radius: var(--annad-radius-small);
	transition: width var(--annad-transition-base) var(--annad-ease);
}

.annad-devenir__photo:hover,
.annad-devenir__photo:focus-within {
	width: 100%;
}

/* Décalage de la maquette : la 2e carte remonte, les 1re et 3e descendent. Ciblage par position
   (:nth-child) : aucune classe à poser dans l'éditeur. Le décalage n'existe qu'à partir de 48em,
   c'est-à-dire quand les trois cartes sont côte à côte ; empilées, elles restent alignées.
   `align-items: start` empêche aussi l'agrandissement au survol de pousser les voisines. */
@media (min-width: 48em) {
	.annad-devenir__photos {
		align-items: start;
	}

	.annad-devenir__photo:nth-child(2) {
		margin-top: 0;
	}

	.annad-devenir__photo:nth-child(1),
	.annad-devenir__photo:nth-child(3) {
		margin-top: 1.5rem;
	}
}

.annad-devenir__caption {
	position: absolute;
	inset: auto 0 0;
	padding: 1rem;
	color: var(--color-on-surface);
}

/* Voile sombre sous la légende, étendu à toute la carte quand elle est ouverte */
.annad-devenir__caption::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--color-bg) 85%, transparent), transparent);
	transition: inset var(--annad-transition-base) var(--annad-ease);
}

.annad-devenir__caption[open] {
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.annad-devenir__caption > summary {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.annad-devenir__caption > summary::-webkit-details-marker {
	display: none;
}

.annad-devenir__caption > summary:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: 2px;
}

.annad-devenir__caption > summary::after {
	content: "+";
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1;
	color: var(--color-on-surface);
	background-color: color-mix(in srgb, var(--color-on-surface) 25%, transparent);
	border-radius: 50%;
}

.annad-devenir__caption[open] > summary::after {
	content: "\2212";
}

/* Second ajout au déplacement : carte étroite (trois colonnes juste au-dessus de 48em, soit moins
   de 222px de large). Un mot long du titre (« Développement ») ne tenait plus à côté du rond, qui
   sortait de la carte et était rogné. La légende se resserre alors (requête de conteneur sur la
   carte) ; à partir de 222px rien ne change. overflow-wrap : dernier filet, un mot encore trop long
   se coupe au lieu de pousser le rond. */
.annad-devenir__photo {
	container-type: inline-size;
}

.annad-devenir__caption > summary {
	overflow-wrap: anywhere;
}

@container (max-width: 13.85rem) {
	.annad-devenir__caption {
		padding: 0.75rem;
	}

	.annad-devenir__caption > summary {
		gap: 0.5rem;
		font-size: 0.875rem;
	}
}

/* Texte révélé : sous le titre, au-dessus du voile (ordre de la maquette) */
.annad-devenir__caption > :not(summary) {
	position: relative;
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
	.annad-devenir__caption::before,
	.annad-devenir__photo {
		transition: none;
	}
}

/* ---------- Accueil : compositions qui montent au défilement (assets/js/scroll-reveal.js) ----------
   Le script ne pose .annad-reveal que sur les compositions encore sous l'écran au chargement : sans
   script, ou pour ce qui est déjà visible, rien n'est masqué. .is-revealed rend transform: none, pour
   ne laisser aucun contexte d'empilement une fois la composition arrivée. La transition est portée
   par .is-revealed seulement : le masquage initial est immédiat, sans fondu sortant. */
.annad-blocks > .annad-reveal {
	opacity: 0;
	transform: translate3d(0, 3rem, 0);
}

.annad-blocks > .annad-reveal.is-revealed {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce), print {
	.annad-blocks > .annad-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- Page « Nos revendeurs » (maquette modeles/2026 V2.png) ---------- */
/* Ces règles vivaient dans revendeurs.css, mis en file avec le seul modèle « Page Nos revendeurs » :
   une page restée sur le modèle par défaut s'affichait sans elles, alors que l'éditeur les chargeait
   toujours. Elles sont ici pour être servies sur toute page, quel que soit son modèle.

   Les sections portent .annad-revendeurs, classe partagée avec « Installateurs partenaires » de
   l'accueil (plus haut) : tout ce qui suit cible un élément .annad-revendeurs__* ou une variante
   .annad-revendeurs--*, jamais .annad-revendeurs seul.

   Rien n'est attendu des attributs de blocs : largeurs, alignements et espacements sont ici. Les
   sélecteurs à deux classes passent devant la largeur de contenu que le cœur donne aux enfants d'un
   groupe « contraint », au cas où ce réglage serait activé dans l'éditeur. */

/* Section pleine largeur, même sans l'alignement « pleine largeur » du bloc */
.wp-block-group[class*="annad-revendeurs--"] {
	max-width: none;
}

/* Respirations de la maquette, plus amples que --annad-section-space */
.annad-section.annad-revendeurs--entete {
	padding-top: clamp(3.5rem, 2.5rem + 6vw, 8rem);
}

.annad-section.annad-revendeurs--contact,
.annad-section.annad-revendeurs--pro {
	padding-top: clamp(3.5rem, 2rem + 7vw, 8.5rem);
}

.annad-section.annad-revendeurs--pro {
	padding-bottom: clamp(0rem, -1rem + 5vw, 4rem);
}

/* ---------- En-tête : surtitre, titre, introduction ---------- */

.annad-revendeurs .annad-revendeurs__eyebrow {
	max-width: var(--container-max);
	margin: 0 auto 2rem;
	font-size: clamp(1rem, 0.9rem + 0.45vw, 1.25rem);
	font-style: italic;
	line-height: 1.5;
	text-align: center;
	color: var(--color-on-surface);
	opacity: 1;
}

/* Titre de la page (h1). Même corps que .annad-page-title. Les largeurs des titres sont en em :
   elles suivent le corps et redonnent les coupures de la maquette (trois lignes ici) sans saut de
   ligne saisi dans le texte. Pas de text-wrap: balance : il égaliserait les lignes et couperait
   ailleurs que la maquette (les titres de section, plus bas, ne l'utilisent que sous 40em). */
.annad-revendeurs .annad-revendeurs__title {
	max-width: 10em;
	margin: 0 auto 3rem;
	font-family: var(--font-heading);
	font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
	font-weight: 800;
	line-height: 1;
	text-align: center;
}

/* Bloc centré, texte aligné à gauche (maquette : 1232 px de large à 1440) */
.annad-revendeurs .annad-revendeurs__intro {
	max-width: 77rem;
	margin: 0 auto;
	font-size: clamp(1rem, 0.9rem + 0.45vw, 1.1875rem);
	line-height: 1.85;
	text-align: left;
	color: var(--color-on-surface);
	opacity: 1;
}

/* ---------- Carte des revendeurs (widget tiers, dans un bloc « HTML personnalisé ») ---------- */
/* Le thème ne dessine aucune carte : il donne à l'emplacement la taille de la maquette (1180 × 700
   à 1440) et l'iframe le remplit. Plus étroit que la largeur « large », volontairement. Tant que le
   groupe est vide, le fond de repli et le texte de :empty signalent l'emplacement. */

.annad-revendeurs .annad-revendeurs__map.wp-block-group {
	max-width: 73.75rem;
	height: clamp(28rem, 49vw, 43.75rem);
	min-height: 0;
	margin: 0 auto;
	overflow: hidden;
	border-radius: var(--annad-radius-small);
}

.annad-revendeurs__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.annad-revendeurs__map:empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	text-align: center;
	color: var(--color-on-surface-light);
	background-color: #d9d9d9; /* fond de repli de la maquette, uniquement quand la carte est absente */
}

.annad-revendeurs__map:empty::after {
	content: attr(data-annad-map-placeholder);
	max-width: 28rem;
	font-weight: 700;
}

/* ---------- Appels à l'action : titre à gauche sur la largeur « large », bouton dessous ou à droite ---------- */

.annad-revendeurs__contact.wp-block-group,
.annad-revendeurs__pro.wp-block-group {
	max-width: var(--container-max);
	margin-inline: auto;
}

.annad-revendeurs__contact.wp-block-group > *,
.annad-revendeurs__pro.wp-block-group > * {
	margin-block: 0;
	margin-inline: 0 !important; /* le cœur centre les enfants d'un groupe « contraint » en !important */
}

.annad-revendeurs .annad-revendeurs__ask {
	max-width: 18.5em;
	margin-bottom: clamp(1.75rem, 1rem + 2.8vw, 3.5rem);
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 1.1rem + 2.8vw, 3.125rem);
	font-weight: 800;
	line-height: 1.05;
	text-align: left;
	text-wrap: balance;
}

@media (min-width: 40em) {
	.annad-revendeurs .annad-revendeurs__ask {
		text-wrap: wrap; /* coupures de la maquette, voir le titre de la page */
	}
}

/* Bouton large de la maquette (375 × 59 à 1440), pleine largeur sur petit écran */
.annad-revendeurs__cta.wp-block-buttons {
	width: min(100%, 23.5rem);
	max-width: none;
}

.annad-revendeurs__cta .wp-block-button {
	width: 100%;
}

.annad-revendeurs__cta .wp-block-button .wp-block-button__link {
	width: 100%;
	min-height: 3.6875rem;
	padding-inline: 1.5rem;
	font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
	transition:
		background-color var(--annad-transition-base) var(--annad-ease),
		border-color var(--annad-transition-base) var(--annad-ease),
		color var(--annad-transition-base) var(--annad-ease);
}

/* Survol et focus clavier : le bouton se remplit de gris clair, texte sombre pour le contraste.
   Remplace l'effet commun des boutons « Annad » (opacité 0.9), peu visible sur ce bouton sombre.
   Instantané en mouvement réduit (--annad-transition-base y vaut 0s, header.css). */
.annad-revendeurs__cta .wp-block-button .wp-block-button__link:is(:hover, :focus-visible) {
	color: var(--color-on-surface-light);
	background-color: var(--color-surface-light);
	border-color: var(--color-surface-light);
	opacity: 1;
}

.annad-revendeurs .annad-revendeurs__pro .annad-revendeurs__ask {
	max-width: 14.3em;
	margin-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}

.annad-revendeurs .annad-revendeurs__pro p {
	max-width: 42.5rem;
	margin-bottom: 2rem;
	font-size: clamp(1rem, 0.9rem + 0.45vw, 1.1875rem);
	line-height: 1.85;
	color: var(--color-on-surface);
	opacity: 1;
}

@media (min-width: 64em) {
	/* Maquette : texte à gauche, bouton aligné à droite sur la même bande */
	.annad-revendeurs__pro.wp-block-group {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 23.5rem;
		align-items: center;
		column-gap: 3rem;
	}

	.annad-revendeurs__pro > .annad-revendeurs__ask {
		grid-column: 1 / -1;
	}

	.annad-revendeurs .annad-revendeurs__pro p {
		margin-bottom: 0;
	}
}