/**
 * Fiche produit — configurateur de kit (extension dahu-composite).
 *
 * POURQUOI CE FICHIER EST DANS LE THÈME
 * L'extension dahu-composite déclare un type de produit WooCommerce `dahu_kit`
 * dont la page est un configurateur construit en JavaScript. Elle embarque une
 * feuille strictement FONCTIONNELLE (grille des colonnes, repli du
 * récapitulatif, taille des cartes) et, pour rester distribuable seule, un
 * habillage de secours neutre. Sur ce site, l'habillage doit venir du thème
 * comme le reste de l'identité graphique : c'est ce fichier.
 *
 * BASCULE — l'extension teste `function_exists( 'annad_theme_dahu_kit_assets' )`
 * (déclarée dans inc/product.php) et, la fonction existant, n'enfile PAS son
 * habillage de secours. Renommer cette fonction ferait réapparaître deux
 * feuilles concurrentes.
 *
 * Mise en file : functions.php, sur une fiche produit dont
 * annad_theme_is_dahu_kit() est vrai. La classe `dahu-kit-page` sur <body> est
 * posée par l'extension (Dahu_Composite_Frontend::body_class()).
 *
 * La page kit est TOUJOURS claire (4.3.0 : plus de thème sombre, plus de
 * bouton « Thème clair »). Apparence réglée PAR PRODUIT dans le back-office
 * (boîte Apparence de dahu-composite, 4.13.0 — plus de bascule visiteur),
 * posée par le serveur en attributs sur .dahu-kit :
 *   data-dahu-kit-card-corners  square  : les deux colonnes latérales sans
 *                                         arrondi et collées aux bords (ex-
 *                                         « Thème solide ») ; leur contenu et
 *                                         le reste de la page gardent leurs
 *                                         rayons. rounded : arrondies.
 *   data-dahu-kit-card-style    vignette : options avec photo, génération,
 *                                         sous-titre et « Plus d'infos »,
 *                                         plus de colonne de droite (lu par
 *                                         l'extension, qui pose
 *                                         .dahu-kit__layout.is-vignettes) ;
 *                               card     : cartes de taille fixe.
 * Défauts : square + vignette, le rendu validé en production.
 *
 * Classes principales, côté extension :
 *   .dahu-kit              conteneur du configurateur
 *   .dahu-kit__layout      grille : récap | picker | colonne de droite
 *                          (.is-vignettes : récap | picker)
 *   .dahu-kit__heading     cellule du titre (bloc .annad-kit-heading du thème,
 *                          déplacé par le script) — au-dessus du picker
 *   .dahu-kit__recap       colonne de gauche (récapitulatif persistant)
 *   .dahu-kit__panel       colonne centrale ; porte aussi les classes du
 *                          buybox du thème (annad-buybox, summary…)
 *   .dahu-kit__info        colonne de droite : photo + description courte
 *   .dahu-kit__option      carte d'option : --square (par défaut) ou
 *                          --vignette
 *   .dahu-kit-drawer       tiroir « Plus d'infos » (vignettes), déplacé en fin
 *                          de <body> — hors de .dahu-kit et de #main
 */

/* ---------- Couleurs : page claire ----------
   Portée : le contenu de la page (#main) — en-tête et pied de page restent
   sombres, comme sur les autres pages claires du site (Mon compte, FAQ,
   panier : light-zone.css). On redéfinit les jetons de surface et de texte
   sur #main ; toutes les règles de ce fichier les lisent. Mêmes gris que la
   zone claire du site (--color-light-*, header.css).

   --dahu-kit-accent : vert des TEXTES, bordures et contours (étape courante,
   carte choisie, focus). Le vert Annad n'est pas lisible en texte ni en filet
   sur fond clair : vert olive foncé. Le vert Annad reste le FOND des boutons
   et des badges (texte sombre dessus).

   Piège : une variable qui en référence une autre est résolue là où elle est
   DÉCLARÉE. Les --annad-btn-* de buttons.css sont déclarées sur :root, avec
   les couleurs sombres : elles doivent être redéclarées ici, pas seulement
   les jetons qu'elles utilisent. */

body.dahu-kit-page {
	--dahu-kit-accent: #5b6800;
}

body.dahu-kit-page #main {
	--color-surface: var(--color-light-bg);
	--color-surface-2: var(--wp--preset--color--surface-claire);
	--color-surface-3: var(--color-light-field);
	--color-on-surface: var(--color-on-surface-light);
	--color-text: var(--color-on-surface-light);
	--color-border: color-mix(in srgb, var(--color-on-surface-light) 18%, transparent);
	--color-stars: #7a5c00; /* alerte : l'or des avis est illisible sur fond clair */

	/* Bouton secondaire (« Plus d'infos ») en version claire */
	--annad-btn-color: var(--color-on-surface-light);
	--annad-btn-bg: var(--color-light-field);
	--annad-btn-bg-hover: var(--wp--preset--color--surface-claire);
	--annad-btn-border: var(--color-border);
	--annad-btn-shadow: 0 1px 2px color-mix(in srgb, var(--color-on-surface-light) 12%, transparent);
	--annad-btn-shadow-hover: 0 2px 6px color-mix(in srgb, var(--color-on-surface-light) 18%, transparent);
	--annad-btn-shadow-active: none;

	color: var(--color-on-surface);
	background-color: var(--color-surface);
}

/* .annad-btn--outline redéclare son fond sur l'élément même (buttons.css) :
   il faut le reprendre à ce niveau. Le bouton vert (--brand) reste tel quel. */
body.dahu-kit-page #main .annad-btn--outline {
	--annad-btn-bg: var(--color-light-field);
}

/* ---------- Page ----------
   La page kit sort du conteneur standard : les colonnes latérales vont
   jusqu'aux bords de l'écran. Thème arrondis : un retrait de 1rem tout autour,
   pour que les angles arrondis restent visibles. Thème solide : aucun retrait,
   colonnes collées aux bords et au haut de la zone de contenu. Les autres
   fiches produit ne sont pas concernées (tout est sous body.dahu-kit-page). */

body.dahu-kit-page .annad-hero {
	max-width: none;
	padding: 0rem;
}

/* Pied de page collé au configurateur : pas de marge haute (4rem ailleurs,
   footer.css). */
body.dahu-kit-page .site-footer {
	margin-top: 0;
}

/* Hauteur de la zone de contenu : fenêtre moins l'en-tête (et la barre
   d'administration). Les colonnes latérales s'étirent sur toute la hauteur
   de la grille (feuille fonctionnelle de l'extension) : quel que soit leur
   contenu, elles occupent au moins cette hauteur. */
body.dahu-kit-page {
	--dahu-kit-viewport: calc(96vh - var(--header-height) - var(--wp-admin--admin-bar--height, 0px));
}

@media (min-width: 64em) {
	body.dahu-kit-page .annad-hero {
		/* Plus de galerie sur cette page (fiche-secondaire.php ne la rend
		   pas) : une seule colonne, occupée par le configurateur. */
		grid-template-columns: minmax(0, 1fr);
	}

	/* Récapitulatif (1 part, plancher de lisibilité) | picker (4 parts) |
	   photo + description courte (300 px). Vignettes : sans la troisième. */
	body.dahu-kit-page .dahu-kit__layout {
		grid-template-columns: minmax(15rem, 1fr) minmax(0, 4fr) 300px;
		min-height: calc(var(--dahu-kit-viewport) - 2rem);
	}

	body.dahu-kit-page .dahu-kit__layout.is-vignettes {
		grid-template-columns: minmax(15rem, 1fr) minmax(0, 4fr);
	}

	/* 4.13.0 — ici se trouvait un commentaire jamais refermé (« Titre du
	   produit, bascules et titre de l'étape au-dessus du picker, à… »), qui
	   avalait les deux règles « thème solide » suivantes jusqu'à la fermeture
	   du commentaire d'après : `.annad-hero { padding: 0 }` et
	   `.dahu-kit__layout { min-height: var(--dahu-kit-viewport) }`. Elles
	   n'ont donc JAMAIS été actives, y compris dans le rendu validé en
	   production. Retirées plutôt que réactivées : les réactiver changerait ce
	   rendu (hauteur de la grille), et .annad-hero est déjà à padding: 0
	   (« Page »). */

	/* Forme des coins « carré » (ex-« Thème solide ») + style « vignette » :
	   plus de colonne de droite, le picker irait jusqu'au bord de l'écran —
	   on lui rend une marge. */
	body.dahu-kit-page .dahu-kit[data-dahu-kit-card-corners="square"] .dahu-kit__layout.is-vignettes > :is(.dahu-kit__heading, .dahu-kit__panel) {
		padding-right: 1.5rem;padding-bottom: 1.5rem;
	}
}

/* Le buybox du thème ne doit pas réimposer sa colonne au configurateur. */
body.dahu-kit-page .annad-hero__buybox,
body.dahu-kit-page .annad-buybox__cart {
	min-width: 0;
}

/* ---------- Socle ---------- */

.dahu-kit {
	margin: 0;
	color: var(--color-on-surface);
	clear: both;
}

/* Attente d'une réponse serveur : l'écran entier n'est PAS assombri. Le
   choix du client apparaît immédiatement (son nom vient du schéma déjà en
   mémoire) ; seul le total est mis en retrait, par la feuille fonctionnelle
   de l'extension. */

/* ---------- Titre du produit ----------
   Bloc .annad-kit-heading (buybox-intro.php), placé par le script au-dessus
   du picker. Titre volontairement petit : c'est le titre de l'étape, juste
   dessous, qui porte la hiérarchie visuelle. */

.annad-kit-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem .75rem;
}

/* Rangée du titre, une fois le bloc déplacé par l'extension dans
   .dahu-kit__heading, qui y ajoute le titre de l'étape (h2) : sur une ligne,
   titre du produit → numéro d'étape → titre de l'étape, centré dans l'espace
   restant.
   Le bloc du thème s'efface (display: contents) pour que le h2 de
   l'extension puisse se glisser ENTRE le titre du produit et les bascules ;
   le h2, lui, reste un vrai élément (sémantique de titre intacte). Passe à
   la ligne sur écran étroit. */
.dahu-kit__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.25rem;
}

.dahu-kit__heading > .annad-kit-heading {
	display: contents;
}

.dahu-kit__heading .product_title {
	order: 1;
}

.dahu-kit__heading > .dahu-kit__step-title {
	order: 2;
	display: flex;
	flex: 1 1 16rem;
	flex-direction: row;
	align-items: center;
	gap: 1.25rem;
	min-width: 0;
	margin: 0;
}

.dahu-kit__heading > .dahu-kit__step-title[hidden] {
	display: none;
}

/* Dans le titre de l'étape (4.18.0), réordonné en CSS — les trois sont
   frères dans le h2, l'ordre du DOM (numéro, « i », nom) ne change pas :
     [ espace | nom de l'étape · « i » | espace ] [ Étape X / Y ]
   - nom et « i » centrés ENSEMBLE dans l'espace libre (marges auto de part
     et d'autre du couple), le « i » collé à droite du nom ;
   - numéro « Étape X / Y » au bout de la rangée, à la place des anciennes
     bascules (.annad-kit-heading__toggles, retirées en 4.17.0 : order 3 +
     margin-left auto). Le h2 occupant toute la place restante de la rangée,
     son dernier élément en est aussi le bord droit — sur écran étroit, le
     h2 passe à la ligne entier, le numéro reste à droite de sa ligne. */
.dahu-kit__heading .dahu-kit__step-name {
	order: 1;
	flex: 0 1 auto;
	min-width: 0;
	margin-inline-start: auto;
	text-align: center;
}

.dahu-kit__heading > .dahu-kit__step-title > .dahu-kit__hint-btn {
	order: 2;
	flex: 0 0 auto;
	margin-inline-end: auto;
}

.dahu-kit__heading .dahu-kit__step-index {
	order: 3;
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Sans « i » (écran sans texte d'info) : c'est le nom qui ferme le couple
   centré. Test sur le parent : dans le DOM, le « i » PRÉCÈDE le nom (un
   sélecteur ~ depuis le nom ne le verrait jamais). */
.dahu-kit__heading > .dahu-kit__step-title:not(:has(> .dahu-kit__hint-btn)) > .dahu-kit__step-name {
	margin-inline-end: auto;
}

body.dahu-kit-page .annad-kit-heading .product_title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.25;
}

/* Bascules de test (« Clic », « Icônes », « Latéral / Carte / Étendu »)
   retirées en 4.17.0 : ce sont des réglages du produit (boîte Apparence de
   dahu-composite 0.31.0), posés par le serveur sur le conteneur. */

/* ---------- Colonnes latérales : récapitulatif et colonne de droite ----------
   Même boîte pour les deux (fond, rayon, retrait intérieur) ; les cartes
   d'option reprennent la même bordure. Au-dessus de 64em, elles couvrent
   toute la hauteur de la grille, leur contenu reste collant. */

.dahu-kit__recap,
.dahu-kit__info {
	padding: 1rem;
	border-radius: var(--radius-large);
	background-color: var(--color-surface-2);
}

/* Colonne de droite : retrait et arrondi en variables, relus par la photo
   (.dahu-kit__info-media, feuille fonctionnelle de l'extension) pour se
   coller en haut, bord à bord. */
.dahu-kit__info {
	--dahu-kit-info-pad: 1rem;
	--dahu-kit-info-radius: var(--radius-large);
	padding: var(--dahu-kit-info-pad);
	border-radius: var(--dahu-kit-info-radius);
}

@media (min-width: 64em) {
	/* Retrait gauche plus marqué : la puce d'état ne colle pas au bord. */
	.dahu-kit__recap {
		padding: 1.25rem 1.25rem 1.25rem 2rem;
	}

	.dahu-kit__info {
		--dahu-kit-info-pad: 1.25rem;
	}
}

/* ---------- Récapitulatif ---------- */

.dahu-kit__recap-title {
	margin: 0 0 .5rem;
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .8;
}

.dahu-kit__recap-step {
	border-top: 1px solid var(--color-border);
}

.dahu-kit__recap-step:first-child {
	border-top: 0;
}

/* Hauteur (4.17.0, demande de Hugo : −50 px environ). Levier principal :
   le retrait vertical des lignes, multiplié par le nombre d'écrans
   (.6rem → .45rem : −4,8 px par ligne, −38 px sur 8 lignes) ; plus la marge
   sous le titre (.75rem → .5rem) et au-dessus du total (1rem → .5rem). */
.dahu-kit__recap-link {
	padding: .45rem 0;
	color: inherit;
	background: none;
	border: 0;
	transition: opacity var(--transition);
}

.dahu-kit__recap-link:focus-visible {
	outline: 2px solid var(--dahu-kit-accent);
	outline-offset: 2px;
}

.dahu-kit__recap-step.is-todo .dahu-kit__recap-link {
	opacity: .55;
}

.dahu-kit__recap-step.is-current .dahu-kit__recap-label {
	color: var(--dahu-kit-accent);
}

.dahu-kit__recap-bullet {
	flex: 0 0 auto;
	width: .6rem;
	height: .6rem;
	margin: 0 .95rem;
	border-radius: 50%;
	background-color: currentColor;
	opacity: .4;
}

.dahu-kit__recap-step.is-done .dahu-kit__recap-bullet {
	background-color: var(--dahu-kit-accent);
	opacity: 1;
}

.dahu-kit__recap-text {
	gap: .15rem;
}

.dahu-kit__recap-label {
	font-size: .8rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	opacity: .75;
}

.dahu-kit__recap-value {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.dahu-kit__recap-value--empty {
	font-weight: 400;
	opacity: .7;
}

/* Prix d'un choix, à droite de son nom (.dahu-kit__recap-head, extension) :
   même taille et même gris foncé que le prix des cartes. Depuis
   dahu-composite 0.12.0, une ligne de récapitulatif porte un écran entier :
   l'intitulé est seul sur sa ligne (.dahu-kit__recap-label) et il peut y
   avoir plusieurs couples nom + prix en dessous. */
.dahu-kit__recap-price {
	font-size: .9rem !important;
	color: var(--color-accent) !important;
	white-space: nowrap;
}

/* Prix par palier (compte professionnel) : deux prix étiquetés, trop longs pour
   tenir sur une ligne de la colonne (« Tarif de revente conseillé TTC 549,00 € » :
   470 px mesurés pour 269 px utiles, le texte sortait du cadre). Un prix par
   ligne, et le libellé peut passer à la ligne ; seul le montant reste insécable.
   Le prix simple (visiteur, particulier) garde le nowrap ci-dessus. */
.dahu-kit__recap-price:has(.dahu-kit-price__tier) {
	min-width: 0;
}

.dahu-kit__recap-price :is(.dahu-kit-price__public, .dahu-kit-price__tier) {
	display: block;
	white-space: normal;
}

.dahu-kit__recap-price .woocommerce-Price-amount {
	white-space: nowrap;
}

/* Écran pas encore atteint : listé mais inerte. Même effacement que .is-todo,
   auquel il s'ajoute toujours. */
.dahu-kit__recap-step.is-locked .dahu-kit__recap-link {
	opacity: .55;
}

.dahu-kit__recap-total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem;
	margin-top: .5rem;
	padding-top: .85rem;
	border-top: 1px solid var(--color-border);
}

.dahu-kit__recap-total-label {
	font-weight: 600;
}

.dahu-kit__recap-total-price {
	margin-left: auto;
	font-weight: 700;
}

/* Pied du récapitulatif en grille : « Total » | prix, puis poids | mention
   de livraison (span.dahu-kit__recap-total-note, texte fourni par le filtre
   dahu_composite_recap_note, inc/product.php). Colonnes posées
   explicitement : sans poids, la mention reste à droite. Le poids garde sa
   largeur (sans retour à la ligne) ; la mention prend le reste et passe sur
   deux lignes si la colonne est étroite (15rem au plus serré). */
.dahu-kit .dahu-kit__recap-total {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: .75rem;
	row-gap: .35rem;
}

.dahu-kit__recap-total-price {
	justify-self: end;
}

.dahu-kit__recap-total-weight {
	grid-column: 1;
	font-size: .85rem;
	white-space: nowrap;
	opacity: .75;
}

/* Camion : même tracé que le badge « Livraison sous 48h » de la fiche
   produit (fiche-principale.php), en masque pour prendre la couleur du texte. */
/* Icône dans le fil du texte (devant « Livraison ») : sur deux lignes, elle
   reste accrochée au premier mot au lieu de flotter seule. Poids et mention
   alignés sur leur première ligne. */
.dahu-kit__recap-total-weight,
.dahu-kit__recap-total-note {
	align-self: start;
}

.dahu-kit__recap-total-note {
	grid-column: 2;
	font-size: .85rem;
	opacity: .75;
	text-align: right;
	text-wrap: balance; /* « Livraison gratuite / en France », pas un mot seul */
}

.dahu-kit__recap-total-note::before {
	content: "";
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	margin-right: .35em;
	vertical-align: -.2em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 7h11v9H2zM13 10h4l3 3v3h-7z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 7h11v9H2zM13 10h4l3 3v3h-7z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Bandeau réductible (sous 64em) */

.dahu-kit__recap-toggle {
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
}

.dahu-kit__recap-toggle-step {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.dahu-kit__recap-toggle-price {
	margin-left: auto;
	font-weight: 700;
}

.dahu-kit__recap-toggle-icon {
	flex: 0 0 auto;
	width: .6rem;
	height: .6rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-.15rem, -.15rem);
	transition: transform var(--transition);
}

.dahu-kit__recap.is-expanded .dahu-kit__recap-toggle-icon {
	transform: rotate(-135deg) translate(-.15rem, -.15rem);
}

@media (max-width: 63.999em) {
	.dahu-kit__recap-body {
		margin-top: .85rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dahu-kit__recap-toggle-icon {
		transition: none;
	}
}

/* ---------- Colonne de droite : photo + description courte ----------
   Photo de la carte cliquée (sinon du produit choisi) en haut, dans un carré
   (image entière), puis son nom et sa description courte. Rien de choisi : la
   description du composant de l'écran. */

/* Photo de la colonne de droite : collée en haut, bord à bord, coins du
   haut arrondis comme la colonne (géométrie dans la feuille fonctionnelle
   de l'extension, à partir de --dahu-kit-info-pad / --dahu-kit-info-radius).
   Ici, seulement le fond qui borde une image non carrée. */
.dahu-kit__info-media {
	background-color: var(--color-surface-3);
}

.dahu-kit__info-name {
	margin: 0;
	font-weight: 600;
	line-height: 1.3;
}

/* Même rendu pour la description courte de la colonne de droite et le
   texte des vignettes (.dahu-kit__option-text : sous-titre du produit). */
:is(.dahu-kit__info-text, .dahu-kit__option-text) {
	font-size: .9rem;
	line-height: 1.5;
}

:is(.dahu-kit__info-text, .dahu-kit__option-text) > :first-child {
	margin-top: 0;
}

:is(.dahu-kit__info-text, .dahu-kit__option-text) > :last-child {
	margin-bottom: 0;
}

.dahu-kit__option-text {
	margin: 0;
}

.dahu-kit__info-text + .dahu-kit__info-name {
	margin-top: .5rem;
}

/* Barre d'icônes de la colonne de droite (Description, Caractéristiques,
   clé « produits fournis avec »). Icône active : fond léger. */
.dahu-kit__info-tool {
	border-radius: var(--annad-radius-small, .75rem);
	transition: background-color .15s ease, opacity .15s ease;
}

.dahu-kit__info-tool:not(:disabled):not(.is-soon):hover,
.dahu-kit__info-tool.is-active {
	background-color: var(--color-surface-3);
}

.dahu-kit__info-tool:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

/* Tableau des caractéristiques dans la colonne : lignes serrées. */
.dahu-kit__info-text--caracteristiques :is(th, td) {
	padding: .35rem 0;
	text-align: left;
	vertical-align: top;
}

.dahu-kit__info-text--caracteristiques th {
	padding-right: .75rem;
	font-weight: 600;
}

/* ---------- Colonne centrale : étape courante ----------
   Le panneau porte les classes du buybox (annad-buybox, summary,
   entry-summary) : titre, prix, sous-titre et zone de boutons héritent donc de
   buybox.css. Rien n'est redéclaré ici, hormis ce qui est propre aux étapes. */

.dahu-kit__step-title {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	margin: 0 0 .6rem;
}

/* Titre de l'étape (« Moteur », « Écran », « Batterie »…) en capitales,
   interligne 1.5 (4.28.0, retour de l'équipe Annad) — au lieu des 1.1 du
   titre du buybox (.annad-buybox__title, buybox.css), que le h2 porte aussi. */
body.dahu-kit-page .dahu-kit__step-title {
	line-height: 1.5;
	text-transform: uppercase;
}

.dahu-kit__step-index {
	font-size: .8rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .7;
}

.dahu-kit__component + .dahu-kit__component {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-border);
}

.dahu-kit__component-title {
	margin: 0 0 .75rem;
	font-family: var(--font-heading);
	font-size: 1.05rem;
}

/* ---------- Moteur + cassettes (composants « ajout ») ----------

   dahu-composite 0.25.0 puis 0.35.0 : TOUT ajout (cassette SRAM XD/XDR,
   cassette Shimano…) est un élément de la liste des moteurs, juste après
   une carte — à sa droite, à la ligne quand la place manque :
    - la carte déclarée (« Ancrer à côté de » : ar_moteur / Moteur
      TRAVERSANT pour la SRAM) ;
    - sinon la carte CHOISIE du premier composant produit de l'écran (la
      Shimano suit le moteur choisi, sans réglage).

     <div class="dahu-kit__options dahu-kit__options--vignettes dahu-kit__options--tiered">
       <div class="dahu-kit__option-cell">h4.dahu-kit__tier + .dahu-kit__option</div>
       …
       <div class="dahu-kit__option-cell">… Moteur TRAVERSANT</div>
       <div class="dahu-kit__component dahu-kit__component--addon dahu-kit__component--secondary
                   dahu-kit__component--anchored dahu-kit__slot is-visible" data-component="ar_cassette_srxd">…</div>
     </div>

   REPLI : tant qu'aucun moteur n'est choisi (ajout qui suit la carte
   choisie), ou carte d'ancrage introuvable (option masquée), l'ajout reste
   enfant direct de l'écran, APRÈS la liste des moteurs :

     <section class="dahu-kit__step dahu-kit__step--grouped" data-component="ar_moteur">
       <div class="dahu-kit__component dahu-kit__slot is-visible" data-component="ar_moteur">…</div>
       <div class="dahu-kit__component dahu-kit__component--addon dahu-kit__component--secondary
                   dahu-kit__slot is-visible" data-component="ar_cassette_shimano">…</div>
       <div class="dahu-kit__buttons dahu-kit__step-nav is-visible">button.dahu-kit__next</div>
     </section>

   Jusqu'à la 4.18.0, ce repli était une grille à deux colonnes (moteurs /
   cassette, trait de liaison) : c'est elle qui donnait les cassettes
   « enfants de premier niveau de la grille » (retour de Hugo). Avant tout
   choix, elle aurait en plus tassé les moteurs dans une demi-largeur. Le
   repli est désormais un simple empilement, sans le filet de séparation
   entre composants (qui se lirait « soit l'un soit l'autre »).

   - Un ajout n'a PAS de titre de composant (title_role « secondary »).
   - Il est TOUJOURS dans le DOM : masqué par un scénario (SRAM hors
     TRAVERSANT), son emplacement passe en .is-hidden (aria-hidden, inert).
   - La ligne « Suivant » (.dahu-kit__step-nav) est aussi toujours présente,
     .is-visible seulement quand un ajout attend encore d'être ajouté — ou
     sur un écran à choix multiple (Écran, Accessoires : dahu-composite
     0.35.0). */

.dahu-kit__step--grouped > .dahu-kit__component + .dahu-kit__component--addon {
	margin-top: 1rem;
	padding-top: 0;
	border-top: 0;
}

/* Révélation de la cassette et de la ligne « Suivant » (les autres
   emplacements ne sont pas animés : un changement d'écran reste sec). Ni
   l'un ni l'autre n'est jamais recréé,
   seule sa classe change. La feuille fonctionnelle de l'extension le passe en
   display: none une fois .is-hidden ; on anime le passage : fondu + léger
   glissement à l'entrée (@starting-style), fondu à la sortie (display gardé
   le temps du fondu grâce à allow-discrete). Navigateur sans ces deux
   fonctions : apparition sèche, rien de cassé.

   La cassette est ciblée où qu'elle soit : enfant direct de l'écran (repli)
   ou élément de la liste des moteurs (ancrée, dahu-composite 0.25.0 —
   l'extension ne la retire pas de cette liste d'un rendu à l'autre, le
   fondu ne se rejoue donc qu'à une vraie apparition). Exception voulue
   (0.35.0) : un ajout qui suit la carte CHOISIE change de place quand le
   client change de moteur ; il rejoue alors son entrée à côté du nouveau
   moteur, ce qui montre qu'il le suit. Spécificité inchangée (:is() prend
   celle de son argument le plus fort). */
:is(.dahu-kit__slot.dahu-kit__component--addon, .dahu-kit__step > .dahu-kit__step-nav) {
	transition:
		opacity .25s ease,
		transform .25s ease,
		display .25s allow-discrete;
}

:is(.dahu-kit__slot.dahu-kit__component--addon, .dahu-kit__step > .dahu-kit__step-nav).is-hidden {
	opacity: 0;
	transform: translateY(.5rem);
}

@starting-style {
	:is(.dahu-kit__slot.dahu-kit__component--addon, .dahu-kit__step > .dahu-kit__step-nav).is-visible {
		opacity: 0;
		transform: translateY(.5rem);
	}
}

/* ---------- Bouton « Suivant » (ajout en attente) ----------
   Même bouton que la navigation manuelle du parcours (.annad-btn--brand,
   ligne .dahu-kit__buttons) : rien de propre à cet écran, seulement sa place,
   à droite sous les deux colonnes. */
.dahu-kit__step-nav {
	justify-content: flex-end;
	margin-top: 1.5rem;
}

/* ---------- Question oui / non d'un ajout (dahu-composite 0.44.0, 0.45.0) ----------
   La cassette SRAM XD/XDR n'est plus une carte « Ajouter » posée à côté du
   Moteur TRAVERSANT : c'est une question portée par la carte du moteur choisi.
   Depuis dahu-composite 0.45.0 elle est au VERSO de cette carte, une rubrique
   comme la description : la carte se retourne d'elle-même quand la variante
   est choisie. Le recto n'en montre plus rien depuis dahu-composite 0.55.0.

     <div class="dahu-kit__option dahu-kit__option--vignette is-selected is-flipped"
          data-info-key="…" data-info-face="question">
       <div class="dahu-kit__option-flip">
         <div class="dahu-kit__option-face dahu-kit__option-face--front">
           … photo, nom, prix, variante …
           … pied de carte …
         </div>
         <div class="dahu-kit__option-face dahu-kit__option-face--back">
           <div class="dahu-kit__option-info">…</div>        (masquée sur cette rubrique)
           <div class="dahu-kit__option-question">
             <p class="dahu-kit__option-question-product">Moteur TRAVERSANT</p>
             <div class="dahu-kit__component dahu-kit__slot dahu-kit__component--question
                         dahu-kit__component--in-card is-visible" data-component="ar_cassette_srxd">
               <div class="dahu-kit__question" role="group">
                 <p class="dahu-kit__question-text">Avez-vous une cassette SRAM XD/XDR ?</p>
                 <div class="dahu-kit__question-answers">
                   <button class="annad-btn annad-btn--outline dahu-kit__answer dahu-kit__answer--yes">
                     <span class="dahu-kit__answer-label">Oui</span>
                     <span class="dahu-kit__answer-price price">+ 54,00 €</span></button>
                   <button class="… dahu-kit__answer dahu-kit__answer--no">Non</button>
                 </div>
                 <button class="dahu-kit__question-more">Plus d'infos</button>
               </div>
             </div>
           </div>
           … pied du verso …
         </div>
       </div>
     </div>

   Disposition (zone du verso, réponses de même largeur, prix sous « Oui »,
   retour à la ligne) : feuille fonctionnelle de l'extension. Ici : les
   tailles et la réponse donnée (.is-selected) — même vert atténué que
   « Ajouté », pour la même raison : un vert plein se lirait comme une action
   à faire.

   dahu-composite 0.55.0 (thème 4.28.0) : la ligne du recto
   (.dahu-kit__question-toggle) est retirée — le recto n'évoque plus la
   question ; « Sélectionner » sur le choix déjà fait retourne la carte. En
   tête du verso, le nom du produit choisi :
     <p class="dahu-kit__option-question-product">Moteur TRAVERSANT</p>
   dessiné comme le titre des rubriques du verso (petites capitales). */
.dahu-kit__option-question-product {
	padding-bottom: .5rem;
	font-size: .8rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface-light) 15%, transparent);
}

.dahu-kit__question-text {
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.35;
}

.dahu-kit__answer {
	padding: .45rem .5rem;
	font-size: .9rem;
	line-height: 1.25;
	transition:
		background-color var(--transition),
		border-color var(--transition),
		box-shadow var(--transition);
}

body.dahu-kit-page #main .dahu-kit__answer.is-selected {
	--annad-btn-color: var(--color-on-surface-light);
	--annad-btn-bg: color-mix(in srgb, var(--color-brand-green) 35%, transparent);
	--annad-btn-bg-hover: color-mix(in srgb, var(--color-brand-green) 50%, transparent);
	--annad-btn-border: var(--color-brand-green);
}

/* Prix de « Oui » : plus petit que le libellé. !important et trois classes :
   la règle commune à tous les prix de la page (.dahu-kit :is(.price, …),
   plus bas) fixe .9rem en !important. */
.dahu-kit .dahu-kit__answer .dahu-kit__answer-price {
	font-size: .8rem !important;
	line-height: 1.3;
}

.dahu-kit__question-more {
	font-size: .8rem;
	opacity: .75;
}

.dahu-kit__question-more:is(:hover, :focus-visible) {
	opacity: 1;
}

/* ---------- Bouton « Ajouter » / « Ajouté » (composant ajout) ----------
   Couleur de validation : pas de jeton « succès » dans le thème. On reprend
   l'état « envoyé » existant (formulaire revendeur) : vert Annad à 35 % en
   fond, vert Annad en bordure, texte sombre — lisible sur la page claire et
   distinct du vert plein des boutons d'action (« Suivant », panier). Un vert
   plein ici ferait prendre l'état « ajouté » pour une action à faire.

   Coche : dessinée dans span.dahu-kit__add-icon (bordures pivotées), animée
   à l'entrée seulement. Au retrait, la coche s'efface sans animation et le
   bouton revient à l'état neutre par la transition de couleur d'.annad-btn. */
body.dahu-kit-page #main .dahu-kit__option--addon .dahu-kit__add.is-added {
	--annad-btn-color: var(--color-on-surface-light);
	--annad-btn-bg: color-mix(in srgb, var(--color-brand-green) 35%, transparent);
	--annad-btn-bg-hover: color-mix(in srgb, var(--color-brand-green) 50%, transparent);
	--annad-btn-border: var(--color-brand-green);
}

.dahu-kit__option--addon .dahu-kit__add {
	transition:
		background-color var(--transition),
		border-color var(--transition),
		box-shadow var(--transition),
		transform var(--transition);
}

.dahu-kit__option--addon .dahu-kit__add-icon {
	display: none;
}

.dahu-kit__option--addon .dahu-kit__add.is-added .dahu-kit__add-icon {
	display: inline-block;
	width: .35em;
	height: .7em;
	margin: -.2em .15em 0 .1em;
	border: solid var(--dahu-kit-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	animation: dahu-kit-check-in .3s ease-out both;
}

@keyframes dahu-kit-check-in {
	from {
		opacity: 0;
		transform: rotate(45deg) scale(.2);
	}
	60% {
		opacity: 1;
		transform: rotate(45deg) scale(1.2);
	}
	to {
		transform: rotate(45deg) scale(1);
	}
}

/* ---------- Focus des cartes cliquables ----------
   La zone bouton de la carte (.dahu-kit__option-hit, role="button") reçoit
   le focus ; le contour est porté par la carte entière, qui est ce que le
   client voit comme « le bouton ». Même contour que les liens du
   récapitulatif (.dahu-kit__recap-link:focus-visible), vert olive de la
   page — le vert Annad des boutons du site serait illisible sur fond clair. */
.dahu-kit__option-hit:focus-visible {
	outline: none;
}

/* Zone enfant directe (latéral) ou dans le recto (carte / étendu). */
.dahu-kit__option:has(> .dahu-kit__option-hit:focus-visible, > .dahu-kit__option-flip > .dahu-kit__option-face--front > .dahu-kit__option-hit:focus-visible) {
	outline: 2px solid var(--dahu-kit-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	:is(.dahu-kit__slot.dahu-kit__component--addon, .dahu-kit__step > .dahu-kit__step-nav),
	:is(.dahu-kit__slot.dahu-kit__component--addon, .dahu-kit__step > .dahu-kit__step-nav).is-hidden {
		transition: none;
		transform: none;
	}

	.dahu-kit__option--addon .dahu-kit__add.is-added .dahu-kit__add-icon {
		animation: none;
	}
}

.dahu-kit__description {
	opacity: .8;
}

/* Sous-en-têtes de gamme (champ « tier » d'une option) */
.dahu-kit__tier {
	margin: 1.25rem 0 .5rem;
	font-size: .95rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .8;
}

.dahu-kit__option-groups > .dahu-kit__tier:first-child {
	margin-top: 0;
}

/* Affichage des gammes (dahu-composite 0.55.0, réglages du composant dans
   l'éditeur du kit, indépendants) — couleur de la gamme posée sur la carte
   (--dahu-kit-tier-color, --dahu-kit-tier-ink) :
     « Badge »       : span.dahu-kit__option-tier à droite du nom, dans
                       span.dahu-kit__option-heading ;
     « Fond coloré » : .dahu-kit__option.has-tier-tint ;
     « À la ligne »  : div.dahu-kit__tier-break, rien à habiller.
   Badge : même pastille que le badge d'option (.dahu-kit__option-badge),
   sur la couleur de la gamme. Fond : le fond clair de la couleur
   (--dahu-kit-tier-bg, #dedfea pour le bleu), à la place de
   --color-surface-2 — y compris au survol et une fois choisie, où l'ombre
   suffit à marquer l'état. */
.dahu-kit__option-heading {
	gap: .2rem .45rem;
}

.dahu-kit__option-tier {
	padding: .1rem .5rem;
	font-size: .7rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-radius: 1rem;
}

.dahu-kit__option.has-tier-tint,
.dahu-kit__option.has-tier-tint.is-selected,
.dahu-kit__option.has-tier-tint.is-selected:hover,
.dahu-kit__layout.is-vignettes .dahu-kit__option.has-tier-tint:not(.is-out-of-stock):not(.dahu-kit__option--addon):hover {
	background-color: var(--dahu-kit-tier-bg, color-mix(in srgb, var(--dahu-kit-tier-color) var(--dahu-kit-tier-tint, 17%), #fff));
}

/* ---------- Bulle d'info : « i » et panneau sous l'en-tête ----------
   dahu-composite 0.21.0 rend le balisage et le comportement :
     button.dahu-kit__hint-btn[data-hint-key][aria-expanded]
       > svg.dahu-kit__hint-icon (cercle, point, trait en currentColor)
       — étape : dans h2.dahu-kit__step-title, après .dahu-kit__step-index ;
       — gamme : dans h4.dahu-kit__tier.has-hint, après .dahu-kit__tier-label ;
       — vignettes : « i » fantôme (.dahu-kit__hint-btn--placeholder) dans
         les lignes vides des cartes suivantes, pour garder la hauteur.
     div.dahu-kit__hint(.is-open) > .dahu-kit__hint-inner > .dahu-kit__hint-box
       > .dahu-kit__hint-body (.is-changing = fondu) + button.dahu-kit__hint-close
   Premier enfant de .dahu-kit__panel : il pousse le contenu vers le bas.
   Repli, masquage et fondu : feuille fonctionnelle de l'extension, réglés
   ici par ses variables. Tout en noir (--color-on-surface-light, le texte
   des titres sur fond clair) : aucune couleur. */

.dahu-kit__hint {
	--dahu-kit-hint-duration: var(--transition-duration);
	--dahu-kit-hint-easing: var(--annad-ease);
	--dahu-kit-hint-fade: var(--annad-transition-fast);
}

/* « i » : dessin à la taille du texte voisin (1.15em), zone tactile de
   2.75rem au doigt (pointer: coarse) par un pseudo-élément, sans grossir
   le dessin. */
.dahu-kit__hint-btn {
	position: relative;
	width: 1.15em;
	height: 1.15em;
	padding: 0;
	margin: 0;
	color: var(--color-on-surface-light);
	background: none;
	border: 0;
	border-radius: 50%;
	transition: color var(--transition), background-color var(--transition);
}

@media (pointer: coarse) {
	.dahu-kit__hint-btn::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 2.75rem;
		height: 2.75rem;
		transform: translate(-50%, -50%);
	}
}

.dahu-kit__hint-btn .dahu-kit__hint-icon {
	display: block;
	width: 100%;
	height: 100%;
}

.dahu-kit__hint-icon > circle:first-of-type {
	transition: stroke-width var(--transition);
}

/* Survol : trait plus épais. Ouvert : inversion (disque noir, « i » couleur
   du fond de la page). */
.dahu-kit__hint-btn:hover .dahu-kit__hint-icon > circle:first-of-type {
	stroke-width: 3;
}

.dahu-kit__hint-btn[aria-expanded="true"] {
	color: var(--color-surface);
	background-color: var(--color-on-surface-light);
}

.dahu-kit__hint-btn[aria-expanded="true"] .dahu-kit__hint-icon > circle:first-of-type {
	stroke: none;
}

/* Contour de focus : épaisseur et retrait des cartes, en noir (pas de
   couleur ajoutée ; même noir que la croix du tiroir). Retrait réduit à
   1px : le titre de gamme d'une vignette coupe ce qui dépasse de sa ligne. */
.dahu-kit__hint-btn:focus-visible {
	outline: 2px solid var(--color-on-surface-light);
	outline-offset: 1px;
}

/* Étape : à la taille du numéro (.8rem), à .5rem de lui (le titre d'étape
   espace ses enfants de 1.25rem). */
.dahu-kit__step-title > .dahu-kit__hint-btn {
	font-size: 1rem;
	margin-inline-start: -.75rem;
}

/* Gamme : le « i » reste noir plein, seul le libellé garde l'atténuation
   des titres de gamme. */
.dahu-kit__tier.has-hint {
	gap: .4rem;
	opacity: 1;
}

.dahu-kit__tier.has-hint > .dahu-kit__tier-label {
	opacity: .8;
}

/* Vignettes : ligne de titre des cellules à hauteur FIXE (titre, titre avec
   « i », ligne vide avec « i » fantôme) — les cartes restent alignées.
   Jeton porté par la liste : la cassette ancrée (dahu-composite 0.25.0,
   élément de la liste sans ligne de titre) réserve la même hauteur, plus
   l'écart sous le titre (.5rem, feuille fonctionnelle de l'extension). */
.dahu-kit__options--tiered {
	--annad-kit-tier-row: 1.5rem;
	--dahu-kit-tier-offset: calc(var(--annad-kit-tier-row) + .5rem);
}

.dahu-kit__option-cell > .dahu-kit__tier {
	box-sizing: border-box;
	height: var(--annad-kit-tier-row);
	font-size: .95rem;
	line-height: var(--annad-kit-tier-row);
}

/* Panneau : bloc clair des colonnes (--color-surface-2, --radius-large),
   compact, texte courant. */
.dahu-kit__hint-box {
	gap: .5rem;
	padding: .75rem .75rem .75rem 1.25rem;
	font-size: .95rem;
	line-height: 1.5;
	color: var(--color-on-surface-light);
	background-color: var(--color-surface-2);
	border-radius: var(--radius-large);
}

.dahu-kit__hint-body {
	padding-block: .25rem;
}

.dahu-kit__hint-text > :first-child,
.dahu-kit__hint-section > :first-child {
	margin-top: 0;
}

.dahu-kit__hint-text > :last-child {
	margin-bottom: 0;
}

.dahu-kit__hint-section + .dahu-kit__hint-section {
	margin-top: .75rem;
}

.dahu-kit__hint-title {
	margin: 0 0 .25rem;
	font-weight: 700;
}

.dahu-kit__hint-text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .2em;
	text-decoration-thickness: 1px;
}

.dahu-kit__hint-text a:hover {
	text-decoration-thickness: 2px;
}

.dahu-kit__hint-text a:focus-visible {
	outline: 2px solid var(--color-on-surface-light);
	outline-offset: 2px;
}

/* Croix : même famille que le « i » (trait noir, plus épais au survol),
   2.75rem de zone tactile, repliée dans le retrait du panneau. */
.dahu-kit__hint-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: -.5rem -.5rem -.5rem 0;
	padding: 0;
	font-size: 1.1rem;
	color: var(--color-on-surface-light);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.dahu-kit__hint-close path {
	transition: stroke-width var(--transition);
}

.dahu-kit__hint-close:hover path {
	stroke-width: 3;
}

.dahu-kit__hint-close:focus-visible {
	outline: 2px solid var(--color-on-surface-light);
	outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
	.dahu-kit__hint-btn,
	.dahu-kit__hint-icon > circle:first-of-type,
	.dahu-kit__hint-close path {
		transition: none;
	}
}

/* ---------- Gammes : « ? » et sa popup (dahu-composite 0.52.0) ----------
   L'extension remplace le « i » des gammes par un « ? » qui ouvre une petite
   popup flottante (texte, image ou vidéo), système distinct de la bulle
   d'étape ci-dessus :
     button.dahu-kit__tier-help[data-tier-help-key][aria-expanded]
       > svg.dahu-kit__tier-help-icon (cercle, « ? », point en currentColor)
       — dans h4.dahu-kit__tier.has-hint ; fantôme
         .dahu-kit__tier-help--placeholder dans les lignes vides (vignettes)
     div.dahu-kit-popover(.is-open, .has-media) — enfant de <body>, hors de
       #main : les jetons clairs de la page y sont redéclarés
       > .dahu-kit-popover__box > __media, __content (__head (__title +
         __close), __text)
   Position, entrée en fondu et tailles des médias : feuille fonctionnelle de
   l'extension. Ici : le « ? » dessiné comme le « i » (noir, inversé quand la
   popup est ouverte) et la popup comme le panneau de la bulle (fond clair
   des colonnes, --radius-large), flottante : ombre --shadow et filet.
   4.28.0 (dahu-composite 0.55.0) : la popup est FIXE, centrée dans la
   fenêtre, en paysage ; le média est bord à bord (plus de marge, de fond ni
   d'arrondi propre : les coins de la boîte le coupent), la marge intérieure
   passe à la colonne du texte ; plus de pointe. Au-dessus du header : elle
   n'est plus attachée à un « ? » qui défilerait dessous. Gamme sans texte :
   texte d'attente (.dahu-kit-popover__placeholder), atténué. */

.dahu-kit__tier-help {
	position: relative;
	width: 1.15em;
	height: 1.15em;
	padding: 0;
	margin: 0;
	color: var(--color-on-surface-light);
	background: none;
	border: 0;
	border-radius: 50%;
	transition: color var(--transition), background-color var(--transition);
}

@media (pointer: coarse) {
	.dahu-kit__tier-help::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 2.75rem;
		height: 2.75rem;
		transform: translate(-50%, -50%);
	}
}

.dahu-kit__tier-help-icon > circle:first-of-type {
	transition: stroke-width var(--transition);
}

.dahu-kit__tier-help:hover .dahu-kit__tier-help-icon > circle:first-of-type {
	stroke-width: 3;
}

.dahu-kit__tier-help[aria-expanded="true"] {
	color: var(--color-surface);
	background-color: var(--color-on-surface-light);
}

.dahu-kit__tier-help[aria-expanded="true"] .dahu-kit__tier-help-icon > circle:first-of-type {
	stroke: none;
}

.dahu-kit__tier-help:focus-visible {
	outline: 2px solid var(--color-on-surface-light);
	outline-offset: 1px;
}

body.dahu-kit-page .dahu-kit-popover {
	--dahu-kit-popover-z: calc(var(--z-header) + 1);
	--dahu-kit-popover-duration: var(--annad-transition-fast, .15s);
	--dahu-kit-popover-surface: var(--wp--preset--color--surface-claire);
	--dahu-kit-popover-line: color-mix(in srgb, var(--color-on-surface-light) 18%, transparent);
}

body.dahu-kit-page .dahu-kit-popover__box {
	font-size: .95rem;
	line-height: 1.5;
	color: var(--color-on-surface-light);
	background-color: var(--dahu-kit-popover-surface);
	border: 1px solid var(--dahu-kit-popover-line);
	border-radius: var(--radius-large);
	box-shadow: var(--shadow);
}

body.dahu-kit-page .dahu-kit-popover__content {
	padding: .75rem .75rem 1rem 1.25rem;
}

body.dahu-kit-page .dahu-kit-popover__head {
	gap: .5rem;
}

/* Titre : le libellé de la gamme, à la manière des titres de gamme (petites
   capitales espacées), en noir plein. */
body.dahu-kit-page .dahu-kit-popover__title {
	padding-top: .35rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Croix : celle du panneau de la bulle. */
body.dahu-kit-page .dahu-kit-popover__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin: -.25rem -.25rem 0 0;
	padding: 0;
	font-size: 1.1rem;
	color: var(--color-on-surface-light);
	background: none;
	border: 0;
	border-radius: 50%;
}

body.dahu-kit-page .dahu-kit-popover__close path {
	transition: stroke-width var(--transition);
}

body.dahu-kit-page .dahu-kit-popover__close:hover path {
	stroke-width: 3;
}

body.dahu-kit-page .dahu-kit-popover__close:focus-visible {
	outline: 2px solid var(--color-on-surface-light);
	outline-offset: -2px;
}

/* Média bord à bord (4.28.0) : ni marge ni arrondi propre. Fond clair des
   champs derrière une image transparente ou une vidéo qui charge. */
body.dahu-kit-page .dahu-kit-popover__media {
	background-color: var(--color-light-field);
}

body.dahu-kit-page .dahu-kit-popover__text {
	margin: .6rem .5rem 0 0;
}

body.dahu-kit-page .dahu-kit-popover__placeholder {
	opacity: .6;
}

body.dahu-kit-page .dahu-kit-popover__text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .2em;
	text-decoration-thickness: 1px;
}

body.dahu-kit-page .dahu-kit-popover__text a:hover {
	text-decoration-thickness: 2px;
}

body.dahu-kit-page .dahu-kit-popover__text a:focus-visible {
	outline: 2px solid var(--color-on-surface-light);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.dahu-kit__tier-help,
	.dahu-kit__tier-help-icon > circle:first-of-type,
	body.dahu-kit-page .dahu-kit-popover__close path {
		transition: none;
	}
}

/* ---------- Cartes d'option ----------
   Taille et disposition dans la feuille fonctionnelle de l'extension :
   carré fixe par défaut, vignette de 300 px en mode vignettes. Ici,
   l'habillage : MÊME bordure que la colonne de droite (.dahu-kit__info) —
   même fond, même rayon, aucun filet visible. Le filet transparent réserve la
   place du contour gris au survol ; l'option choisie a l'effet du mega menu.
   La carte entière se clique (dahu-composite 0.14.0), plus de bouton
   « Sélectionner ». */

.dahu-kit__options {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 1rem;
	margin: 0;
}

.dahu-kit__options > .dahu-kit__option {
	flex: 0 0 auto;
}

.dahu-kit__option {
	/* Retrait intérieur en jeton : la photo des vignettes le compense
	   (voir .dahu-kit__option--vignette > .dahu-kit__option-media). */
	--dahu-kit-option-pad: 1rem;
	padding: var(--dahu-kit-option-pad);
	border: 1px solid transparent;
	border-radius: var(--radius-large);
	background-color: var(--color-surface-2);
	transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.dahu-kit__option--square:not(.dahu-kit__option--none):hover {
	border-color: var(--color-border);
}

/* Bascule « Clic » : carte montrée en aperçu dans la colonne de droite, pas
   choisie — le contour du survol, maintenu. */
.dahu-kit__option.is-previewed {
	border-color: var(--color-border);
}

/* Option choisie : même effet que la catégorie active / survolée du mega
   menu (.mega-cat__head, mega-menu.css) — fond clair et ombre --shadow, pas
   de contour. Le fond est le blanc cassé du thème (preset « Texte clair »,
   #F5F5F5) : --color-on-surface, qu'utilise le mega menu, est redéfini en
   couleur de texte sombre sur cette page claire. */
.dahu-kit__option.is-selected,
.dahu-kit__option.is-selected:hover,
/* Vignettes : au survol, une carte prend l'effet de l'option choisie (fond
   clair + ombre), que la bascule « Clic » soit active ou non (demande de
   Hugo, 4.12.1 — avant : seulement sans .is-select-button). Pas sur une carte
   en rupture (inerte), ni sur un composant « ajout », où seul le bouton
   « Ajouter » agit. */
.dahu-kit__layout.is-vignettes .dahu-kit__option:not(.is-out-of-stock):not(.dahu-kit__option--addon):hover {
	border-color: transparent;
	background-color: var(--wp--preset--color--texte-clair);
	box-shadow: var(--shadow);
}

/* Rupture : carte estompée. Carte retournable (dahu-composite 0.23.0, la
   carte est le pivot 3D) : l'opacité posée sur la carte, ou sur
   .dahu-kit__option-flip, aplatirait la 3D et la carte retournée montrerait
   son recto en miroir — elle est donc portée par chaque face (voir
   « Plus d'infos en carte retournée »). */
.dahu-kit__option.is-out-of-stock:not([data-info-key]) {
	opacity: .55;
}

.dahu-kit__option-body {
	gap: .15rem;
}

.dahu-kit__option-name {
	font-weight: 600;
	line-height: 1.3;
}

/* Prix plus petit que le nom, en gris foncé du thème (--color-accent,
   #3B3B3B, preset « Accent » de theme.json). */
.dahu-kit__option-price {
	font-size: .9rem !important;
	color: var(--color-accent) !important;
}

/* Vignettes : photo du produit en haut (carré, image entière — taille dans
   la feuille fonctionnelle de l'extension), même habillage que la photo de
   la colonne de droite. */
.dahu-kit__option-media {
	border-radius: var(--annad-radius-small, .75rem);
	background-color: var(--color-surface-3);
}

/* Vignette : la photo épouse le haut de la carte — bord à bord en haut, à
   gauche et à droite, sans retrait. Marges négatives = retrait intérieur +
   filet transparent de 1px de la carte ; arrondi du haut = celui de la carte
   (même rayon extérieur), bas droit. Pas d'overflow: hidden sur la carte :
   il couperait au bord intérieur du filet et laisserait un liseré.
   Deux emplacements : enfant direct de la carte (affichage latéral), ou
   dans le recto (.dahu-kit__option-face--front) en affichage carte / étendu
   (dahu-composite 0.19.0) — le recto commence au même bord intérieur que la
   carte, les mêmes marges négatives s'appliquent. */
.dahu-kit__option--vignette > .dahu-kit__option-media,
.dahu-kit__option--vignette > .dahu-kit__option-flip > .dahu-kit__option-face--front > .dahu-kit__option-media {
	margin: calc(-1 * var(--dahu-kit-option-pad) - 1px) calc(-1 * var(--dahu-kit-option-pad) - 1px) .25rem;
	border-radius: var(--radius-large) var(--radius-large) 0 0;
}

.dahu-kit__option-badge {
	align-self: flex-start;
	padding: .1rem .5rem;
	font-size: .75rem;
	font-weight: 600;
	color: var(--color-on-brand-green);
	background-color: var(--color-brand-green);
	border-radius: 1rem;
}

.dahu-kit__option-stock {
	font-size: .8rem;
	opacity: .8;
}

/* Variante dans la carte : liste compacte. */
.dahu-kit__option-variation .dahu-kit__select {
	padding: .35rem .5rem;
	font-size: .8rem;
}

.dahu-kit__option-variation .dahu-kit__any-attribute {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	margin-top: .35rem;
	font-size: .8rem;
}

/* Boutons des cartes : plus compacts que les autres ; « Sélectionner »
   occupe toute la largeur d'une carte carrée. */
body .dahu-kit .dahu-kit__option-actions button.button.annad-btn.annad-btn {
	min-height: 2.5rem;
	padding: .5rem 1rem;
	font-size: .9rem;
}

.dahu-kit__option--square .dahu-kit__option-actions > .dahu-kit__choose {
	flex: 1 1 auto;
}

.dahu-kit__dropdown .dahu-kit__option-actions {
	margin-top: 0;
}

/* ---------- « Plus d'infos » en carte retournée / étendue ----------
   dahu-composite 0.19.0+ ; depuis 0.31.0, réglages « Affichage des infos »
   (bureau / mobile) du produit, boîte Apparence — plus de bascule ici ;
   vignettes seulement. Structure fonctionnelle (pivot, faces, colonne) dans
   dahu-composite-core.css ; ici l'habillage. Tout est sous
   .dahu-kit__option[data-info-key], attribut absent en affichage latéral :
   rien ici ne touche le latéral ni les cartes carrées.

   Retournement : durée = deux fois le jeton de transition (0,5 s) — vif pour
   les allers-retours entre rubriques ; les badges de l'accueil (900 ms)
   seraient trop lents ici. Seul l'état posé par l'extension (.is-flipped)
   retourne la carte : aucun déclenchement au survol. Changer de rubrique
   carte ouverte ne la retourne plus (0.31.0) : fondu du seul contenu,
   --dahu-kit-info-fade = fondu court du thème (voir ci-dessous).

   dahu-composite 0.23.0 : c'est la CARTE qui pivote (transform posé sur
   .dahu-kit__option[data-info-key]), surface, contenu et pied compris ;
   .dahu-kit__option-flip ne fait plus qu'empiler les faces. Sur la carte :
   rien qui aplatisse la 3D (opacity < 1, filter, overflow, clip-path,
   mix-blend-mode, isolation), sinon la carte retournée montre son recto en
   miroir. */

/* `transform` reste dans la liste, mais à la durée du retournement : la
   déclaration du thème remplace EN ENTIER celle de l'extension (même
   spécificité, chargée après) — sans `transform` ici, plus aucune transition
   de transform et le retournement serait instantané. */
.dahu-kit__option[data-info-key] {
	--dahu-kit-flip-duration: calc(2 * var(--transition-duration));
	transition:
		border-color var(--transition),
		background-color var(--transition),
		box-shadow var(--transition),
		transform var(--dahu-kit-flip-duration) var(--annad-ease),
		filter var(--transition);
}

/* Affichage étendu : le glissement d'ancrage de la carte (translateX posé
   par l'extension) garde la durée du dépliement de la colonne. Carte
   retournée (repli de l'étendu faute de place) : durée du retournement. */
.dahu-kit__layout.is-info-extended .dahu-kit__option[data-info-key]:not(.is-flipped) {
	transition:
		border-color var(--transition),
		background-color var(--transition),
		box-shadow var(--transition),
		transform var(--transition),
		filter var(--transition);
}

/* Rupture : estompée face par face (pas sur la carte ni sur le flip, voir
   plus haut) ; la surface de la carte garde son fond. */
.dahu-kit__option[data-info-key].is-out-of-stock > .dahu-kit__option-flip > .dahu-kit__option-face {
	opacity: .55;
}

/* Verso : encart posé dans la carte (fond du champ clair, petit rayon), texte
   petit, défilement interne — le verso a la taille exacte du recto (feuille
   fonctionnelle), la carte ne bouge pas. L'encart est le contenu qui défile
   (.dahu-kit__option-info) : le pied du verso reste dessous, hors encart, à
   la place de celui du recto. Gouttière de défilement réservée : pas de saut
   de largeur quand le contenu change de rubrique. */
.dahu-kit__option[data-info-key] .dahu-kit__option-face--back > .dahu-kit__option-info {
	padding: .75rem;
	border-radius: var(--annad-radius-small, .75rem);
	scrollbar-gutter: stable;
	scrollbar-width: thin;
}

/* Contenu commun au verso et à la colonne étendue. */
/* Changement de rubrique carte ouverte (dahu-composite 0.31.0) : fondu du
   contenu, même durée que la bulle d'info (--annad-transition-fast, 150 ms). */
.dahu-kit {
	--dahu-kit-info-fade: var(--annad-transition-fast);
}

.dahu-kit__option-info {
	font-size: .8rem;
	line-height: 1.45;
}

.dahu-kit__option-info-title {
	margin: 0 0 .5rem;
	font-size: .7rem;
	font-weight: 600;
	text-transform: uppercase;
	opacity: .7;
}

.dahu-kit__option-info-body > :first-child {
	margin-top: 0;
}

.dahu-kit__option-info-body > :last-child {
	margin-bottom: 0;
}

.dahu-kit__option-info-body :is(p, ul, ol) {
	margin: 0 0 .5em;
}

:is(.dahu-kit__option-info-loading, .dahu-kit__option-info-empty, .dahu-kit__option-info-error) {
	margin: 0;
	opacity: .7;
}

/* Caractéristiques : tableau serré, comme dans la colonne de droite. */
.dahu-kit__option-info-body table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.dahu-kit__option-info-body :is(th, td) {
	padding: .25rem 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--color-border);
}

.dahu-kit__option-info-body tr:last-child > :is(th, td) {
	border-bottom: 0;
}

.dahu-kit__option-info-body th {
	padding-right: .5rem;
	font-weight: 600;
}

/* Produits fournis : une ligne compacte par produit. */
.dahu-kit__bundled {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.dahu-kit__bundled-photo {
	width: 2rem;
	height: 2rem;
	border-radius: var(--annad-radius-small, .75rem);
	background-color: var(--color-surface-2);
}

.dahu-kit__bundled-name {
	overflow-wrap: anywhere;
}

.dahu-kit__bundled-qty {
	flex: 0 0 auto;
	font-weight: 600;
	white-space: nowrap;
	opacity: .8;
}

.dahu-kit__bundled-item.is-optional {
	opacity: .7;
}

/* Pied de carte (un par face depuis dahu-composite 0.23.0 : sélecteurs
   descendants, pas d'enfant direct) : [caractéristiques] [Plus d'infos /
   Retour] [produits fournis], puis la ligne du choix. Hauteur CONSTANTE,
   carte ouverte ou fermée :
   - carte entière cliquable : « Choisir » (visible infos ouvertes) prend
     place à côté de « Retour », sur la même ligne ;
   - mode bouton (.is-select-button) : « Choisir » remplace « Sélectionner »
     sur sa ligne (l'extension échange les deux par hidden).
   Cassette : ses contrôles sont dans span.dahu-kit__addon-more, rendu
   transparent à la mise en page pour suivre le même ordre ; « Ajouter » garde
   sa ligne. */
.dahu-kit__option[data-info-key] .dahu-kit__option-actions {
	align-items: center;
}

.dahu-kit__option[data-info-key] .dahu-kit__addon-more {
	display: contents;
}

.dahu-kit__option[data-info-key] .dahu-kit__option-tool--specs {
	order: 0;
	flex: 0 0 auto;
}

.dahu-kit__option[data-info-key] .dahu-kit__option-actions :is(.dahu-kit__more, .dahu-kit__option-tool--choose) {
	flex: 1 1 0;
}

/* Préfixe long : doit passer devant la taille des boutons de carte
   (body .dahu-kit .dahu-kit__option-actions button.button.annad-btn.annad-btn). */
body .dahu-kit .dahu-kit__option[data-info-key] .dahu-kit__option-actions button.button.annad-btn.annad-btn:is(.dahu-kit__more, .dahu-kit__option-tool--choose, .dahu-kit__choose, .dahu-kit__info-back) {
	min-width: 0;
	padding-inline: .5rem;
	white-space: nowrap;
}

.dahu-kit__option[data-info-key] .dahu-kit__more {
	order: 1;
}

.dahu-kit__option[data-info-key] .dahu-kit__option-tool--choose {
	order: 2;
}

.dahu-kit__option[data-info-key] .dahu-kit__option-tool--bundled {
	order: 3;
	flex: 0 0 auto;
}

/* « Ajouter » de la cassette : sa propre ligne. */
.dahu-kit__option[data-info-key] .dahu-kit__option-actions > .dahu-kit__add {
	order: 4;
	flex: 1 1 100%;
}

/* « Plus d'infos » et « Sélectionner » sur la MÊME ligne en carte / étendu,
   comme en latéral (4.15.0 — avant : « Sélectionner » du mode bouton sur
   une ligne à lui, flex-basis 100 %). Moitié / moitié, comme « Retour » et
   « Sélectionner » des infos ouvertes. */
.dahu-kit__option[data-info-key] .dahu-kit__option-actions > .dahu-kit__choose,
.is-select-button .dahu-kit__option[data-info-key] .dahu-kit__option-tool--choose {
	order: 2;
	flex: 1 1 0;
	min-width: 0;
}

/* ---------- Icônes (grille .is-icons, 4.15.0 ; réglage produit en 4.17.0) ----------
   réglage « Icônes » du produit (data-dahu-kit-icons sur le conteneur), indépendant de l'affichage
   (latéral, carte, étendu) : le pied n'a que [i] [caractéristiques]
   [produits fournis], puis le bouton de choix (« Sélectionner »,
   « Sélectionner » des infos ouvertes, « Retour » du verso, « Ajouter » de
   la cassette) sur la place restante — UNE ligne. Vaut aussi en latéral
   (cartes sans data-info-key), d'où les sélecteurs sur toute carte.
   min-height = hauteur des boutons de carte : pied d'icônes seules aussi
   haut qu'avec le bouton qui apparaît à l'ouverture, la carte ne grandit
   pas. Remplace l'affichage « Vignette » (.is-info-vignette, 4.12.0). */
.is-icons .dahu-kit__option .dahu-kit__option-actions {
	flex-wrap: nowrap;
	align-items: center;
	min-height: 2.5rem;
}

.is-icons .dahu-kit__option .dahu-kit__option-tool--description {
	order: 1;
	flex: 0 0 auto;
}

.is-icons .dahu-kit__option .dahu-kit__option-tool--specs {
	order: 2;
	flex: 0 0 auto;
}

.is-icons .dahu-kit__option .dahu-kit__option-tool--bundled {
	order: 3;
	flex: 0 0 auto;
}

.is-icons .dahu-kit__option .dahu-kit__option-actions > :is(.dahu-kit__choose, .dahu-kit__add, .dahu-kit__info-back),
.is-icons .dahu-kit__option .dahu-kit__option-actions .dahu-kit__option-tool--choose {
	order: 4;
	flex: 1 1 auto;
	min-width: 0;
}

/* Onglets du panneau ouvert, sans icônes (verso, colonne étendue) : les
   rubriques au niveau du titre, même typographie ; l'active pleinement
   lisible et soulignée dans le vert olive de la page. Remise à zéro du
   bouton : feuille fonctionnelle de l'extension. */
.dahu-kit__option-info-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem .75rem;
	margin: 0 0 .5rem;
}

.dahu-kit__option-info-tabs > .dahu-kit__option-info-tab {
	margin: 0;
	padding-bottom: .15rem;
	border-bottom: 2px solid transparent;
	opacity: .55;
	transition: opacity var(--transition), border-color var(--transition);
}

.dahu-kit__option-info-tabs > .dahu-kit__option-info-tab:hover,
.dahu-kit__option-info-tabs > .dahu-kit__option-info-tab.is-active {
	opacity: 1;
}

.dahu-kit__option-info-tabs > .dahu-kit__option-info-tab.is-active {
	border-bottom-color: var(--dahu-kit-accent);
}

.dahu-kit__option-info-tabs > .dahu-kit__option-info-tab:focus-visible {
	outline: 2px solid var(--dahu-kit-accent);
	outline-offset: 2px;
}

/* Icônes du pied : habillage de la barre de la colonne de droite
   (.dahu-kit__info-tool : rayon, fond au survol et à l'état actif) ; actif
   en plus dans le vert olive de la page ; focus = contour des cartes. */
.dahu-kit__option-tool.is-active {
	color: var(--dahu-kit-accent);
}

.dahu-kit__option-tool:focus-visible {
	outline: 2px solid var(--dahu-kit-accent);
	outline-offset: 2px;
}

/* Étendue : la carte passe au-dessus de ses voisines (sous l'en-tête du
   site et ses menus : pas de jeton de superposition « dans le contenu », on
   se place juste sous --z-header), ombre marquée portée par l'ensemble carte
   + colonne (drop-shadow suit la silhouette des deux, box-shadow ne
   dessinerait que la carte). Coins droits de la carte à angle vif : la
   colonne s'y raccorde. Spécificité renforcée : la feuille fonctionnelle
   pose un z-index sur .dahu-kit__option.is-extended. */
.dahu-kit .dahu-kit__option.is-extended {
	z-index: calc(var(--z-header) - 1);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	filter: drop-shadow(var(--shadow)) drop-shadow(var(--shadow));
}

.dahu-kit__option--vignette.is-extended > .dahu-kit__option-flip > .dahu-kit__option-face--front > .dahu-kit__option-media {
	border-top-right-radius: 0;
}

/* Colonne : même surface que la carte (fond hérité, feuille fonctionnelle),
   bord à bord avec son bord extérieur (le filet transparent de 1px de la
   carte est sauté : la largeur posée par l'extension part de ce bord),
   filet discret de séparation, coins droits arrondis comme la carte.
   Hauteur fixée par la carte, défilement interne et gouttière réservée : le
   changement de rubrique ne fait rien sauter.
   Ouverture : la colonne se déplie depuis la carte (clip-path), pendant que
   la carte glisse à sa place d'ancrage (transform posé par l'extension :
   rien en « right », deux cartes en « left », le juste nécessaire en
   « shift ») — l'ensemble finit collé au bord qui reste libre. */
.dahu-kit .dahu-kit__option.is-extended > .dahu-kit__option-extension {
	top: -1px;
	bottom: -1px;
	left: calc(100% + 1px);
	padding: var(--dahu-kit-option-pad, 1rem);
	border-left: 1px solid var(--color-border);
	border-radius: 0 var(--radius-large) var(--radius-large) 0;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	animation: dahu-kit-extend-in var(--transition-duration) var(--annad-ease);
}

.dahu-kit__option.is-extended .dahu-kit__option-extension .dahu-kit__option-info {
	font-size: .85rem;
}

@keyframes dahu-kit-extend-in {
	from {
		clip-path: inset(0 100% 0 0);
	}

	to {
		clip-path: inset(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dahu-kit__option[data-info-key] {
		transition:
			border-color var(--transition),
			background-color var(--transition),
			box-shadow var(--transition);
	}

	.dahu-kit .dahu-kit__option.is-extended > .dahu-kit__option-extension {
		animation: none;
	}
}

/* ---------- Contrôles ---------- */

.dahu-kit__select {
	width: 100%;
	padding: .5rem;
	color: inherit;
	background-color: var(--color-surface-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.dahu-kit__quantity input {
	width: 5rem;
}

.dahu-kit__bundle {
	margin-top: 1rem;
	padding: .75rem;
	border-radius: var(--radius-large);
	background-color: var(--color-surface-3);
}

.dahu-kit__bundle-title {
	margin: 0 0 .5rem;
	font-weight: 600;
}

.dahu-kit__bundle-items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dahu-kit__bundle-item-label {
	display: flex;
	align-items: center;
	gap: .5rem;
}

/* ---------- Tous les prix de la page ----------
   Cartes, récapitulatif (lignes, total, bandeau mobile), tableau du résumé,
   prix par palier : .9rem, gris foncé du thème (--color-accent, #3B3B3B,
   preset « Accent »). Un seul endroit pour les deux réglages.
   !important : woocommerce.css colore (#958e09) et agrandit (1.25em)
   `.woocommerce:where(…) div.product span.price` / `p.price`, de
   spécificité (0-3-2) — :where() compte pour zéro, mais .woocommerce,
   .product et .price font trois classes. Le renfort par sélecteur de la 4.7.1
   (body.dahu-kit-page .dahu-kit :is(.price), 0-3-1) perdait d'un point. La graisse reste propre à
   chaque prix (total en gras, prix de ligne en normal). */
.dahu-kit :is(.price, .dahu-kit-price__tier) {
	font-size: .9rem !important;
	color: var(--color-accent) !important;
}

/* ---------- Prix par palier (Particulier / Professionnel) ---------- */

.dahu-kit-price__label {
	font-size: .75rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	opacity: .7;
}

/* Deux <span> depuis dahu-composite 0.42.0 (avant : <del> / <ins>, que
   woocommerce.css posait en inline-block et que le navigateur barrait). Le
   prix public est un tarif de revente conseillé : jamais barré.
   inline-block : même disposition qu'avant dans les cartes et le tableau. */
.dahu-kit-price__public,
.dahu-kit-price__tier {
	display: inline-block;
	text-decoration: none;
}

.dahu-kit-price__public {
	opacity: .65;
}

.dahu-kit-price__tier {
	font-weight: 700;
}

/* ---------- Résumé, messages, impasses ---------- */

.dahu-kit__table-wrap {
	overflow-x: auto;
}

.dahu-kit__summary-edit {
	color: inherit;
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
}

.dahu-kit__summary-path td {
	opacity: .85;
}

.dahu-kit__errors,
.dahu-kit__incomplete,
.dahu-kit__error {
	color: var(--color-stars); /* pas de token d'erreur dans le thème : l'or foncé sert d'alerte */
}

.dahu-kit__message {
	margin-top: 1rem;
	padding: .7rem 1rem;
	border-radius: var(--radius-large);
	background-color: var(--color-surface-3);
}

.dahu-kit__blocked-text,
.dahu-kit__coming-soon {
	margin: 0 0 1.25rem;
	padding: 1rem 1.25rem;
	border-radius: var(--radius-large);
	background-color: var(--color-surface-3);
	color: var(--color-on-surface);
}

/* ---------- Mise en page « En ligne » : ligne dépliable (dahu-composite 0.46.0) ----------
   Accessoires : une ligne par option ; un clic sur la ligne, sur son « i » ou
   sur la flèche ouvre le détail (photo + description courte) sous la ligne.
   Structure et animation de hauteur : feuille de l'extension (grille 0fr →
   1fr, comme .annad-accordion). Ici : durée et courbe des accordéons du site,
   flèche habillée comme les icônes d'infos, filet et typographie du détail. */
.dahu-kit {
	--dahu-kit-row-duration: var(--annad-transition-base);
	--dahu-kit-row-ease: var(--annad-ease);
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__row-toggle {
	border-radius: var(--annad-radius-small, .75rem);
	transition: background-color var(--annad-transition-fast) var(--annad-ease);
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__row-toggle:hover,
.dahu-kit .dahu-kit__component--style-row .dahu-kit__option.is-open .dahu-kit__row-toggle {
	background-color: var(--color-surface-3);
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__row-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__row-detail-body {
	margin-top: .6rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-border);
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__row-photo {
	border-radius: var(--annad-radius-small, .75rem);
	background-color: var(--color-surface-3);
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__row-text {
	font-size: .9375rem;
	line-height: 1.6;
	color: color-mix(in srgb, var(--color-on-surface-light) 80%, transparent);
}

/* ---------- Sauvegarde de la configuration (pied du Résumé) ----------
   .dahu-kit__save : titre, champ du nom + bouton, message. Le champ était
   celui du navigateur (bordure en relief, 30 px de haut à côté d'un bouton de
   44 px) : il reprend les champs de la zone claire (light-zone.css — fond
   blanc, filet, rayon, hauteur des boutons). Titre dans la police des titres,
   bloc séparé du panier par un filet ; lien du message dans la couleur du
   texte, souligné. */
.dahu-kit__save {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-border);
}

.dahu-kit .dahu-kit__save-title {
	margin: 0 0 .75rem;
	font-family: var(--font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
}

.dahu-kit__save-text {
	margin: 0;
	font-size: .9375rem;
	color: color-mix(in srgb, var(--color-on-surface-light) 65%, transparent);
}

.dahu-kit__save .dahu-kit__buttons {
	flex-wrap: wrap;
	align-items: stretch;
	margin-top: 0;
}

/* Texte avant ou après la ligne de boutons (visiteur : invitation puis
   « Se connecter » ; client : « terminez la configuration… » sous le champ). */
.dahu-kit__save-text + .dahu-kit__buttons,
.dahu-kit__save .dahu-kit__buttons + .dahu-kit__save-text {
	margin-top: .75rem;
}

/* Visiteur : « Se connecter » est un LIEN (a.button.annad-btn), que
   woocommerce.css peignait en gris carré — la règle « Boutons » plus bas ne
   vise que les <button>. Même bouton que ceux du configurateur. */
body .dahu-kit .dahu-kit__save a.button.annad-btn.annad-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.625rem 1.5rem;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	color: var(--annad-btn-color);
	background-color: var(--annad-btn-bg);
	background-image: none;
	border: 1px solid var(--annad-btn-border);
	border-radius: var(--annad-btn-radius);
	box-shadow: var(--annad-btn-shadow);
}

body .dahu-kit .dahu-kit__save a.button.annad-btn.annad-btn:hover {
	color: var(--annad-btn-color);
	background-color: var(--annad-btn-bg-hover);
	box-shadow: var(--annad-btn-shadow-hover);
}

.dahu-kit__save-name {
	display: flex;
	flex: 1 1 16rem;
	max-width: 26rem;
	margin: 0;
}

.dahu-kit__save-name input {
	width: 100%;
	min-width: 0;
	min-height: 2.75rem;
	padding: .625rem .875rem;
	font: inherit;
	color: var(--color-on-surface-light);
	background-color: var(--color-surface-3);
	border: 1px solid var(--color-border);
	border-radius: .625rem;
	box-shadow: none;
}

.dahu-kit__save-name input::placeholder {
	color: color-mix(in srgb, var(--color-on-surface-light) 55%, transparent);
	opacity: 1;
}

.dahu-kit__save-name input:focus-visible {
	outline: 2px solid var(--dahu-kit-accent);
	outline-offset: 1px;
}

.dahu-kit__save .dahu-kit__message a {
	font-weight: 600;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .15em;
}

.dahu-kit__save .dahu-kit__message a:is(:hover, :focus-visible) {
	text-decoration-thickness: 2px;
}

/* ---------- Panier / mini-panier : composants indentés sous le kit ---------- */

.dahu-kit-child .product-name,
.woocommerce-mini-cart-item.dahu-kit-child {
	padding-left: 1.5rem;
}

.dahu-kit-component-label {
	opacity: .8;
	font-size: .9rem;
}

/* ---------- Boutons ----------
   Les boutons du configurateur (« Sélectionner », « Plus d'infos »,
   « Ajouter au panier »…) sont des .annad-btn (buttons.css), mais ils portent
   aussi les classes WooCommerce .button / .alt : or woocommerce.css peint
   `.woocommerce button.button.alt` en violet avec des sélecteurs plus forts
   que .annad-btn (0-3-1, jusqu'à 0-6-1 pour :disabled:hover). On réapplique
   donc les variables .annad-btn* avec un sélecteur renforcé — même méthode
   que « Ajouter au panier » (buybox.css). Le tiroir est en fin de <body>,
   hors de .dahu-kit : il est nommé à part. */

body :is(.dahu-kit, .dahu-kit-drawer) button.button.annad-btn.annad-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.625rem 1.5rem;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--annad-btn-color);
	background-color: var(--annad-btn-bg);
	background-image: none;
	border: 1px solid var(--annad-btn-border);
	border-radius: var(--annad-btn-radius);
	box-shadow: var(--annad-btn-shadow);
	text-shadow: none;
}

body :is(.dahu-kit, .dahu-kit-drawer) button.button.annad-btn.annad-btn:hover {
	color: var(--annad-btn-color);
	background-color: var(--annad-btn-bg-hover);
	box-shadow: var(--annad-btn-shadow-hover);
}

/* Désactivé (option en rupture, « Ajouter au panier » tant que le kit est
   incomplet) : couleurs du thème, simplement estompées, sans survol. */
body :is(.dahu-kit, .dahu-kit-drawer) button.button.annad-btn.annad-btn:disabled,
body :is(.dahu-kit, .dahu-kit-drawer) button.button.annad-btn.annad-btn:disabled:hover {
	color: var(--annad-btn-color);
	background-color: var(--annad-btn-bg);
	box-shadow: var(--annad-btn-shadow);
	opacity: .5;
	transform: none;
	cursor: not-allowed;
}

/* Ligne de boutons des impasses (« Revenir à l'étape ») et du panier. */
.dahu-kit__buttons {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-top: 1rem;
}

.dahu-kit__cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 1rem;
}

/* Réassurance du Résumé (4.29.0, dahu-composite 0.60.0) : à droite de « Ajouter au panier »,
   en colonne — le partial des fiches moteurs (template-parts/product/reassurance.php),
   .annad-buybox__reassurance et .annad-badges de buybox.css. Ciblé par le conteneur du kit :
   la fiche moteur et le footer gardent leur disposition. Sous 40em : sous le bouton. */
body.dahu-kit-page .dahu-kit__cart-aside {
	gap: .4rem;
	padding-left: 1rem;
	border-left: 1px solid color-mix(in srgb, var(--color-on-surface) 15%, transparent);
}

body.dahu-kit-page .dahu-kit__cart-aside .annad-badges {
	flex-direction: column;
	gap: .4rem;
}

body.dahu-kit-page .dahu-kit__cart-aside :is(.annad-buybox__reassurance, .annad-badge) {
	font-size: .8125rem;
	line-height: 1.35;
}

body.dahu-kit-page .dahu-kit__cart-aside .annad-badge svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

@media (max-width: 39.999em) {
	body.dahu-kit-page .dahu-kit__cart-aside {
		flex-basis: 100%;
		padding-left: 0;
		border-left: 0;
	}
}

/* ---------- Forme des coins « carré » (ex-« Thème solide ») ----------
   Réglage du produit (boîte Apparence de dahu-composite), posé par le
   serveur : data-dahu-kit-card-corners="square" sur .dahu-kit. Seules les
   DEUX COLONNES LATÉRALES perdent leur arrondi, et elles sont collées aux
   bords (voir « Page »). Tout leur contenu et tout le reste de la page
   gardent leurs rayons habituels : puces, photos, cartes, boutons, onglets
   du tiroir… « rounded » : aucune règle, l'arrondi de base s'applique. */
body.dahu-kit-page .dahu-kit[data-dahu-kit-card-corners="square"] :is(.dahu-kit__recap, .dahu-kit__info) {
	--dahu-kit-info-radius: 0px;
	border-radius: 0;
}

/* ---------- Tiroir « Plus d'infos » (vignettes) ----------
   Même habillage que le tiroir d'onglets des fiches produit (tabs.css) : mêmes
   variables --annad-drawer-* (avec leurs valeurs par défaut en repli, tabs.css
   pouvant ne pas être chargé), même fond clair. Le positionnement et
   l'animation sont dans la feuille fonctionnelle de l'extension.

   Plus étroit et plus compact que le tiroir des fiches (4.8.1) : il se
   consulte à côté des vignettes, pas à la place de la page. Jetons locaux
   --dahu-kit-drawer-*, les --annad-drawer-* des fiches restent intacts. */

.dahu-kit-drawer__overlay {
	z-index: calc(var(--z-mobile-menu) - 1);
	background-color: var(--color-overlay);
	transition: opacity var(--transition);
}

.dahu-kit-drawer {
	--dahu-kit-drawer-width: 30rem;
	--dahu-kit-drawer-pad-x: 2.25rem;
	--dahu-kit-drawer-title-size: 1.6rem;
	--dahu-kit-drawer-text-size: .95rem;
	--dahu-kit-drawer-h3-size: 1.15rem;
	z-index: var(--z-mobile-menu);
	color: var(--color-on-surface-light);
	background-color: var(--color-surface-light);
	box-shadow: var(--shadow);
}

@media (min-width: 40em) {
	.dahu-kit-drawer {
		width: min(26rem, var(--dahu-kit-drawer-width), 100%);
	}
}

@media (min-width: 64em) {
	.dahu-kit-drawer {
		width: min(var(--dahu-kit-drawer-width), 100%);
	}
}

.dahu-kit-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	font-size: 1.5rem;
	line-height: 1;
	color: inherit;
	background-color: var(--color-surface-light);
	border: 0;
	border-radius: 50%;
}

.dahu-kit-drawer__close:focus-visible {
	outline: 2px solid var(--color-on-surface-light);
	outline-offset: -2px;
}

.dahu-kit-drawer__inner {
	padding: 4rem calc(var(--dahu-kit-drawer-pad-x) - 0.75rem) 2.5rem;
}

@media (min-width: 40em) {
	.dahu-kit-drawer__inner {
		padding: 4rem var(--dahu-kit-drawer-pad-x) 2.5rem;
	}
}

.dahu-kit-drawer__title {
	margin: 0 0 1.25rem;
	font-size: var(--dahu-kit-drawer-title-size);
	font-weight: var(--annad-drawer-title-weight, 600);
	line-height: 1.15;
}

.dahu-kit-drawer__title:focus {
	outline: none; /* cible de focus programmatique à l'ouverture */
}

.dahu-kit-drawer__tabs {
	margin-bottom: 1.5rem;
}

.dahu-kit-drawer__tab {
	padding: .4rem .85rem;
	font-size: .9rem;
	color: inherit;
	background: none;
	border: 1px solid currentColor;
	border-radius: 2rem;
	opacity: .65;
	cursor: pointer;
	transition: opacity var(--transition);
}

.dahu-kit-drawer__tab:hover {
	opacity: 1;
}

.dahu-kit-drawer__tab.is-active {
	opacity: 1;
	color: var(--color-on-brand-green);
	background-color: var(--color-brand-green);
	border-color: var(--color-brand-green);
}

.dahu-kit-drawer__tab:focus-visible {
	outline: 2px solid var(--color-on-surface-light);
	outline-offset: 2px;
}

.dahu-kit-drawer__body {
	font-size: var(--dahu-kit-drawer-text-size);
	line-height: 1.6;
}

.dahu-kit-drawer__body :where(p, div, h2, h3, h4, h5, ul, ol, blockquote, figure, table, pre)
	+ :where(p, div, h2, h3, h4, h5, ul, ol, blockquote, figure, table, pre) {
	margin-top: 1.25em;
}

.dahu-kit-drawer__body :where(* + h2, * + h3, * + h4) {
	margin-top: 1.75em;
}

.dahu-kit-drawer__body h3 {
	font-size: var(--dahu-kit-drawer-h3-size);
	font-weight: var(--annad-drawer-h3-weight, 600);
	line-height: var(--annad-drawer-h3-line-height, 1.45);
}

.dahu-kit-drawer__body table {
	width: 100%;
	border-collapse: collapse;
}

.dahu-kit-drawer__body th,
.dahu-kit-drawer__body td {
	padding: .6rem .75rem .6rem .6rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface-light) 18%, transparent);
}