/**
 * DAHU COMPOSITE — feuille FONCTIONNELLE du configurateur.
 *
 * Toujours chargée, avec ou sans thème. Elle ne contient que ce sans quoi le
 * JavaScript ne fonctionnerait pas ou serait inutilisable :
 *  - la grille (trois colonnes, deux en mode vignettes) et la cellule du
 *    titre du produit ;
 *  - le repli / dépli du récapitulatif sous 64em ;
 *  - la taille de la colonne de droite (photo + description courte) ;
 *  - la taille des cartes d'option (carré fixe, ou vignette de 300 px) ;
 *  - le tiroir « Plus d'infos » (mode vignettes).
 *
 * AUCUNE couleur, AUCUNE typographie, AUCUN rayon, AUCUNE ombre ici : tout ce
 * qui relève de l'apparence est ailleurs.
 *  - avec le thème dahu-theme-annad-2026 : assets/css/product/dahu-kit.css DU THÈME,
 *    mis en file par annad_theme_dahu_kit_assets() ;
 *  - sans lui : assets/css/dahu-composite-front.css de cette extension, qui
 *    n'est mise en file que si le thème ne fournit pas la sienne
 *    (voir Dahu_Composite_Frontend::register_assets()).
 *
 * @package Dahu_Composite
 */

/* ---------- États d'attente ----------
   Deux moments distincts :
     .is-loading  le script n'a pas encore pris la main (état de départ
                  déposé dans la page, mais JS différé ou appareil lent) ;
     .is-busy     une action du client attend la réponse de /state.

   Pendant .is-busy, l'écran NE s'éteint PAS : l'option cliquée est déjà
   affichée comme choisie (le nom vient du schéma en mémoire). Seul le total
   attend vraiment le serveur, c'est donc le seul élément mis en retrait.
   Habillage volontairement neutre : le thème peut le remplacer. */

.dahu-kit__loading {
	display: flex;
	align-items: center;
	gap: .625rem;
	justify-content: center;
	min-height: 6rem;
}

.dahu-kit__spinner {
	display: inline-block;
	width: 1.125rem;
	height: 1.125rem;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	opacity: .55;
	animation: dahu-kit-spin .7s linear infinite;
}

@keyframes dahu-kit-spin {
	to { transform: rotate(360deg); }
}

.dahu-kit.is-busy {
	cursor: progress;
}

.dahu-kit.is-busy .dahu-kit__recap-total-price,
.dahu-kit.is-busy .dahu-kit__recap-total-weight,
.dahu-kit.is-busy .dahu-kit__recap-toggle-price,
.dahu-kit.is-busy .dahu-kit__total {
	opacity: .4;
	transition: opacity .15s linear;
}

/* Changement d'écran en attente (0.60.0) : petit cercle après le nom de
   l'étape, sous .is-advancing (réponse de /state à un geste du client, puis
   délai de l'avance automatique). N'apparaît qu'après 150 ms : une réponse
   rapide ne fait rien clignoter. La place est gardée (visibility), le
   titre ne bouge pas. */
.dahu-kit__step-loading {
	display: inline-flex;
	align-items: center;
	margin-left: .5em;
	vertical-align: middle;
	font-size: .85em;
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s linear, visibility 0s linear .15s;
}

.dahu-kit__step-loading .dahu-kit__spinner {
	width: 1em;
	height: 1em;
}

.dahu-kit.is-advancing .dahu-kit__step-loading {
	opacity: 1;
	visibility: visible;
	transition-delay: .15s, .15s;
}

@media (prefers-reduced-motion: reduce) {
	.dahu-kit__spinner {
		animation-duration: 2s;
	}
}

/* Bloc à droite de « Ajouter au panier » (0.60.0, filtre
   dahu_composite_summary_aside_html) : ses lignes l'une sous l'autre. */
.dahu-kit__cart-aside {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	min-width: 0;
}

/* ---------- Mise en page ----------
   Sous 64em : une colonne (titre, bandeau récapitulatif, picker, colonne de
   droite). Au-dessus :

     par défaut            "recap heading info"   récap | picker | 300 px
                           "recap panel   info"
     vignettes (.is-vignettes)  "recap heading"   récap | picker
                                "recap panel"

   Les colonnes latérales couvrent les deux rangées et s'étirent sur TOUTE la
   hauteur de la grille, quel que soit leur contenu ; c'est leur contenu
   (.dahu-kit__recap-body, .dahu-kit__info-inner) qui reste collant. La
   hauteur minimale de la grille (pleine fenêtre, par exemple) est l'affaire
   du thème. Rangée 2 en 1fr : la hauteur du picker n'agrandit jamais la
   rangée du titre. Sans titre confié par le thème (pas de .has-heading), la
   rangée du titre disparaît. */

.dahu-kit__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

.dahu-kit__info[hidden] {
	display: none;
}

@media (min-width: 64em) {
	.dahu-kit__layout {
		grid-template-columns: minmax(0, .8fr) minmax(0, 2fr) 300px;
		grid-template-areas: "recap panel info";
		column-gap: 2.5rem;
		row-gap: 1rem;
	}

	.dahu-kit__layout.has-heading {
		grid-template-areas:
			"recap heading info"
			"recap panel   info";
		grid-template-rows: auto 1fr;
	}

	.dahu-kit__layout.is-vignettes {
		grid-template-columns: minmax(0, .8fr) minmax(0, 3fr);
		grid-template-areas: "recap panel";
	}

	.dahu-kit__layout.is-vignettes.has-heading {
		grid-template-areas:
			"recap heading"
			"recap panel";
	}

	.dahu-kit__layout > .dahu-kit__heading { grid-area: heading; }
	.dahu-kit__layout > .dahu-kit__recap { grid-area: recap; }
	.dahu-kit__layout > .dahu-kit__panel { grid-area: panel; }
	.dahu-kit__layout > .dahu-kit__info { grid-area: info; }

	.dahu-kit__layout > .dahu-kit__recap,
	.dahu-kit__layout > .dahu-kit__info {
		align-self: stretch;
	}

	.dahu-kit__recap-body,
	.dahu-kit__info-inner {
		position: sticky;
		top: 1.5rem;
	}
}

.dahu-kit__heading {
	min-width: 0;
}

.dahu-kit__panel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}

.dahu-kit__recap-steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dahu-kit__recap-link,
.dahu-kit__recap-toggle {
	display: flex;
	align-items: center;
	gap: .75rem;
	width: 100%;
	text-align: left;
	cursor: pointer;
}

.dahu-kit__recap-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Une ligne de récapitulatif = un écran : un intitulé, puis une de ces lignes
   par composant de l'écran (choix à gauche, prix à droite). Un écran qui
   regroupe deux composants en affiche donc deux. */
.dahu-kit__recap-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0 .5rem;
}

/* Écran pas encore atteint : listé, mais pas actionnable. Ce n'est pas un
   bouton dans le balisage — la règle ci-dessous ne fait qu'éviter d'hériter
   du curseur de .dahu-kit__recap-link. */
.dahu-kit__recap-link--locked {
	cursor: default;
}

/* Récapitulatif : bandeau réductible sous 64em, colonne pleine hauteur
   au-dessus. C'est le pendant CSS du bouton piloté par le script. */
@media (max-width: 63.999em) {
	.dahu-kit__recap {
		position: sticky;
		top: 0;
		z-index: 2;
	}

	.dahu-kit__recap-body {
		display: none;
	}

	.dahu-kit__recap.is-expanded .dahu-kit__recap-body {
		display: block;
	}
}

@media (min-width: 64em) {
	.dahu-kit__recap-toggle {
		display: none;
	}
}

/* ---------- Colonne de droite : photo + description courte ----------
   300 px de large. Photo du produit en haut, dans un carré (image entière,
   jamais recadrée), puis son nom et sa description courte. Vide (résumé,
   impasse), elle reste en place, pleine hauteur. Sous 64em, elle passe sous
   le picker. */
/* Tailles fixes (colonne, cartes) retrait intérieur compris, quel que soit
   le thème. */
.dahu-kit__info,
.dahu-kit__option {
	box-sizing: border-box;
}

.dahu-kit__info {
	width: 300px;
	max-width: 100%;
	min-width: 0;
}

.dahu-kit__info-inner {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

/* Photo collée en haut de la colonne, bord à bord : les marges négatives
   annulent le retrait intérieur de la colonne et les coins du haut reprennent
   son arrondi. Le thème (ou l'habillage de repli) déclare les deux valeurs
   sur .dahu-kit__info : --dahu-kit-info-pad (son padding) et
   --dahu-kit-info-radius (son border-radius). Pas d'overflow: hidden sur la
   colonne : il casserait le contenu collant (.dahu-kit__info-inner). */
.dahu-kit__info-media {
	margin: calc(-1 * var(--dahu-kit-info-pad, 0px)) calc(-1 * var(--dahu-kit-info-pad, 0px)) 0;
	padding: 0;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--dahu-kit-info-radius, 0px) var(--dahu-kit-info-radius, 0px) 0 0;
}

.dahu-kit__info-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Barre d'icônes sous le texte de la colonne de droite : Description,
   Caractéristiques, puis la clé « produits fournis avec » poussée à droite
   (décorative pour l'instant). Couleurs et survol : habillage. */
.dahu-kit__info-tools {
	display: flex;
	align-items: center;
	gap: .25rem;
}

.dahu-kit__info-tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.dahu-kit__info-tool:disabled {
	cursor: default;
	opacity: .35;
}

.dahu-kit__info-tool--fournis {
	margin-left: auto;
	cursor: default;
	opacity: .35;
}

/* Tableau des caractéristiques : pleine largeur de la colonne. */
.dahu-kit__info-text--caracteristiques table {
	width: 100%;
	border-collapse: collapse;
}

/* Description d'un composant (champ admin « Description (HTML
   autorisé) »), sous son titre et au-dessus de ses cartes. Habillage
   (opacité, taille) : .dahu-kit__description, thème ou repli. Ici, le seul
   espacement ; les marges du premier et du dernier paragraphe saisis ne
   s'y ajoutent pas. */
.dahu-kit__step-description {
	margin: 0 0 1rem;
}

.dahu-kit__step-description > :first-child {
	margin-top: 0;
}

.dahu-kit__step-description > :last-child {
	margin-bottom: 0;
}

/* ---------- Options ----------
   Cartes en colonne : nom, prix, ligne de la variante, boutons en pied.

   Par défaut (--square) : carte de taille FIXE, 240 × 180 px
   (--dahu-kit-option-width / --dahu-kit-option-height, réglables par le thème). Les lignes vides (prix d'un embranchement,
   variante d'un produit simple) gardent leur hauteur : les boutons tombent
   au même endroit d'une carte à l'autre. Un clic sur la carte montre le
   produit dans la colonne de droite.

   Vignettes (--vignette) : 300 px de large, photo carrée en haut, hauteur
   selon le texte ; toute la largeur sur téléphone. */

.dahu-kit {
	--dahu-kit-option-width: 240px;
	--dahu-kit-option-height: 180px;
}

.dahu-kit__option {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	min-width: 0;
}

.dahu-kit__option-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.dahu-kit__option-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: auto;
}

.dahu-kit__option--square {
	width: var(--dahu-kit-option-width);
	height: var(--dahu-kit-option-height);
	overflow: hidden;
}

/* La carte entière sélectionne (clic n'importe où, zone .dahu-kit__option-hit
   au clavier). Pas la carte d'un composant « ajout » : là, seul le bouton
   « Ajouter » agit. Option en rupture : inerte. */
.dahu-kit__option {
	cursor: pointer;
}

.dahu-kit__option.dahu-kit__option--addon,
.dahu-kit__option.is-out-of-stock {
	cursor: auto;
}

/* Mode bouton (data-dahu-kit-select="button") : « Sélectionner » choisit ;
   le clic sur une carte carrée ne fait qu'un aperçu, et une vignette ou
   « Aucun » n'ont pas d'aperçu. */
.is-select-button .dahu-kit__option--vignette,
.is-select-button .dahu-kit__option--none {
	cursor: auto;
}

/* Zone principale de la carte (role="button") : même empilement que la
   carte, pour que photo, nom, prix et texte gardent leur disposition. */
.dahu-kit__option-hit {
	display: flex;
	flex-direction: column;
	gap: inherit;
	min-width: 0;
}

.dahu-kit__addon-head {
	display: flex;
	flex-direction: column;
	gap: inherit;
	min-width: 0;
}

/* Emplacement de composant masqué par un scénario (.dahu-kit__slot, toujours
   présent dans le DOM de l'écran affiché, voir fillSlot()). Un thème qui
   veut animer l'apparition remplace ce display: none par sa propre
   transition (opacité, hauteur…) sur .is-hidden / .is-visible. */
.dahu-kit__slot.is-hidden {
	display: none;
}

/* Bouton « Suivant » d'un écran dont seul un ajout optionnel reste en
   attente (voir renderStepNav()). Même principe que les emplacements :
   toujours présent, .is-visible / .is-hidden. */
.dahu-kit__step-nav.is-hidden {
	display: none;
}

/* Largeur maximale de l'écran du configurateur (0.50.0) : sur grand écran,
   .dahu-kit__step (et la ligne de titre au-dessus) ne s'étire plus jusqu'au
   bord. Largeur large du thème (theme.json, settings.layout.wideSize, publiée
   par WordPress en --wp--style--global--wide-size), 80rem sans elle ; un
   thème peut la régler par --dahu-kit-step-max-width. Calé à gauche, contre
   le récapitulatif. */
.dahu-kit__step,
.dahu-kit__layout > .dahu-kit__heading {
	max-width: var(--dahu-kit-step-max-width, var(--wp--style--global--wide-size, 80rem));
}

/* 0.37.0 : la ligne « Suivant » est le dernier élément de la grille
   d'options (prepareStepNav()) — juste à droite de la dernière carte, à la
   ligne quand la place manque, et non plus plaquée au bord droit de
   l'écran. Centrée sur la hauteur des cartes ; marges et alignement de la
   ligne sous l'écran (thème : justify-content, margin-top) neutralisés. */
.dahu-kit__options > .dahu-kit__step-nav {
	flex: 0 0 auto;
	align-self: center;
	justify-content: flex-start;
	margin: 0;
}

/* Nom : deux lignes au plus, le carré ne grandit pas. */
.dahu-kit__option--square .dahu-kit__option-name {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.dahu-kit__option--square .dahu-kit__option-price {
	min-height: 1.3em;
}

.dahu-kit__option--square .dahu-kit__option-variation {
	min-height: 2.25rem;
}

.dahu-kit__option-variation .dahu-kit__select {
	max-width: 100%;
}

/* Option retenue sans variante (0.47.0) : le message sous la liste. Mise en
   place seulement — sa couleur est celle de .dahu-kit__error (habillage). */
.dahu-kit__variation-required {
	display: block;
	margin-top: .35em;
	font-size: .85em;
	line-height: 1.3;
}

.dahu-kit__option--vignette {
	width: 300px;
}

/* Vignettes d'embranchement (0.58.0, étape « Type de kit ») : cinq colonnes
   égales au bureau au lieu de 300 px (trois ou quatre par ligne), repli à la
   ligne sous 10rem ; une par ligne au téléphone (voir la requête 39.999em).
   Les vignettes produit gardent leurs 300 px. 10rem et non 11rem : à 1280 px
   de fenêtre, la liste n'a que 943 px à côté de la colonne de droite, soit
   175,8 px par colonne — 11rem (176 px) y laissait quatre cartes et une
   cinquième étirée sur toute la ligne. */
.dahu-kit__option--vignette.dahu-kit__option--path {
	flex: 1 1 calc((100% - 4 * 1rem) / 5);
	width: auto;
	min-width: 10rem;
}

.dahu-kit__option--vignette .dahu-kit__option-variation:empty {
	display: none;
}

/* Photo du produit en haut de la vignette : carré, image entière (jamais
   recadrée), comme dans la colonne de droite. */
.dahu-kit__option-media {
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
}

/* Image qui ouvre la Description (0.34.0, renderOptionMedia()) : main,
   y compris quand le reste de la carte ne se clique pas (« Clic » actif). */
.dahu-kit__option-media.is-info-trigger {
	cursor: pointer;
}

.dahu-kit__option-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Vignettes avec gammes : les gammes se suivent dans une seule liste (voir
   renderCards()). Chaque cellule empile la ligne du titre de gamme et la
   carte ; la ligne vide des cartes suivantes garde la même hauteur que le
   titre, pour que toutes les cartes d'une rangée restent alignées. */
.dahu-kit__option-cell {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	min-width: 0;
}

/* Le titre ne dicte pas la largeur de la cellule (celle de la carte) : un
   titre plus long est coupé par « … ». */
.dahu-kit__option-cell > .dahu-kit__tier {
	width: 0;
	min-width: 100%;
	margin: 0 0 .5rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dahu-kit__option-cell > .dahu-kit__tier--spacer {
	display: block;
	visibility: hidden;
}

.dahu-kit__option-cell > .dahu-kit__option {
	flex: 1 1 auto;
}

/* Ajout ancré à une carte (0.25.0, .dahu-kit__component--anchored) : son
   emplacement est un élément de la liste d'options, juste après la carte
   visée (renderCards()) — à sa droite, à la ligne quand la place manque.
   Dans une liste à gammes, il réserve au-dessus de sa carte la ligne du
   titre de gamme, pour rester aligné sur ses voisines :
   --dahu-kit-tier-offset = hauteur de cette ligne + son écart (le thème qui
   fixe la hauteur du titre fixe aussi ce jeton). Masqué : display: none
   (.dahu-kit__slot.is-hidden), aucune place prise dans la liste. */
.dahu-kit__options > .dahu-kit__component--anchored {
	flex: 0 0 auto;
	min-width: 0;
}

/* Même hauteur que les cartes de la rangée (comme une cellule). Pas sur
   .is-hidden : display: none doit l'emporter. */
.dahu-kit__options > .dahu-kit__component--anchored:not(.is-hidden) {
	display: flex;
	flex-direction: column;
}

.dahu-kit__options > .dahu-kit__component--anchored > .dahu-kit__option {
	flex: 1 1 auto;
}

.dahu-kit__options--tiered > .dahu-kit__component--anchored {
	padding-top: var(--dahu-kit-tier-offset, calc(1.2em + .5rem));
}

/* ---------- Libellé court du prix public (0.44.0) ----------
   Dahu_Composite_Pricing::price_html() rend le libellé complet
   (.dahu-kit-price__label-full) et, si le palier en a un, le libellé court
   (.dahu-kit-price__label-short). Le complet partout ; le court là où la
   place manque : récapitulatif (lignes, total, bandeau mobile) et question
   oui / non d'une carte. */
.dahu-kit-price__label-short {
	display: none;
}

:is(.dahu-kit__recap, .dahu-kit__question) .dahu-kit-price__label-full {
	display: none;
}

:is(.dahu-kit__recap, .dahu-kit__question) .dahu-kit-price__label-short {
	display: inline;
}

/* ---------- Ajout présenté en question oui / non (0.44.0) ----------
   questionBlock() : un texte et deux réponses, dans l'emplacement du
   composant (.dahu-kit__component--question). Vignettes : l'emplacement est
   porté par la carte choisie du composant d'ancrage (.dahu-kit__component--in-card),
   au VERSO depuis la 0.45.0 (.dahu-kit__option-question, plus bas) ; cartes
   carrées : élément de la liste, après la carte. Fonctionnel seulement :
   disposition, retour à la ligne. Réponse donnée : .is-selected + aria-pressed. */
.dahu-kit__question {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	min-width: 0;
}

.dahu-kit__question-text {
	margin: 0;
	overflow-wrap: anywhere;
}

.dahu-kit__question-answers {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: .5rem;
}

/* Deux réponses de même largeur ; le prix de « Oui » sous son libellé, et
   il passe à la ligne plutôt que d'élargir la carte. */
.dahu-kit__answer {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .15rem;
	min-width: 0;
	white-space: normal;
}

.dahu-kit__answer-price {
	max-width: 100%;
	font-weight: 400;
}

/* « + » devant le prix de « Oui » : un supplément, pas le prix du choix. */
.dahu-kit__answer-price > :first-child::before {
	content: "+\00a0";
}

/* Palier professionnel : deux prix étiquetés, un par ligne, et les deux
   réponses l'une sous l'autre — côte à côte, « Oui » serait trois fois plus
   haut que « Non ». */
.dahu-kit__question-answers:has(.dahu-kit-price__tier) {
	flex-direction: column;
}

/* Empilées : chacune à la hauteur de son contenu (flex-basis 0 vaudrait
   une hauteur nulle dans ce sens). */
.dahu-kit__question-answers:has(.dahu-kit-price__tier) > .dahu-kit__answer {
	flex: 0 0 auto;
}

.dahu-kit__answer-price :is(.dahu-kit-price__public, .dahu-kit-price__tier) {
	display: block;
}

.dahu-kit__question-more {
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* Contrôle du recto qui retournait la carte sur la question
   (.dahu-kit__question-toggle, 0.45.0 à 0.54.0) : retiré en 0.55.0, le recto
   n'évoque plus la question (voir openQuestion()). */

/* Élément de liste (cartes carrées) : pas plus large qu'une carte. */
.dahu-kit__options > .dahu-kit__component--question {
	max-width: 18rem;
	justify-content: center;
}

/* ---------- « Plus d'infos » : carte retournée / étendue ----------
   data-dahu-kit-info="card|extended" sur <body> (voir readInfoMode()).
   Fonctionnel seulement : pivot 3D, faces, défilement du verso, colonne
   étendue en superposition. Couleurs, ombres, durées : habillage (jeton
   --dahu-kit-flip-duration).

   Principe repris des badges retournables du thème (.annad-tech__badge :
   pivot > deux faces superposées, face cachée backface-visibility: hidden),
   sans lesquels rien ne tournerait.

   0.23.0 : le pivot est la CARTE elle-même (.dahu-kit__option[data-info-key]),
   pour que tout ce que l'utilisateur voit comme la carte tourne — contenu,
   pied (un par face) et surface (fond, filet, rayon, ombre, posés par le
   thème sur la carte). Perspective dans la transformation (perspective()),
   pas sur le parent : une perspective commune à la liste déformerait les
   cartes loin de son centre.

   Pièges pour le thème (rendu 3D aplati sinon, la carte retournée
   montrerait le recto en miroir) : sur la carte, ni opacity < 1, ni filter,
   ni overflow autre que visible, ni clip-path, ni mix-blend-mode, ni
   isolation — à porter sur les faces. Et ne pas redéclarer `transform` dans
   la liste `transition` de la carte avec une autre durée : le retournement
   suit --dahu-kit-flip-duration. */

.dahu-kit__option[data-info-key] {
	position: relative;
	transform-style: preserve-3d;
	transform: perspective(var(--dahu-kit-flip-perspective, 1200px)) rotateY(0deg);
	transition: transform var(--dahu-kit-flip-duration, .6s) ease;
}

.dahu-kit__option[data-info-key].is-flipped {
	transform: perspective(var(--dahu-kit-flip-perspective, 1200px)) rotateY(180deg);
}

/* Empile les faces (même cellule de grille) ; ne tourne pas lui-même, mais
   transmet l'espace 3D de la carte. */
.dahu-kit__option-flip {
	position: relative;
	display: grid;
	flex: 1 1 auto;
	gap: inherit;
	min-height: 0;
	transform-style: preserve-3d;
}

/* Face : tout le contenu de la carte, pied compris (.dahu-kit__option-actions
   est le dernier enfant de chaque face). Décollée d'1px du plan de la carte :
   sinon face et fond de la carte, dans le même plan, se disputent l'affichage
   pendant la rotation. */
.dahu-kit__option-face {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: inherit;
	min-width: 0;
	transform: translateZ(1px);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Verso : exactement la taille du recto (hors flux), la carte ne change
   jamais de taille. Le contenu défile (.dahu-kit__option-info), le pied
   reste en bas. */
.dahu-kit__option-face--back {
	position: absolute;
	inset: 0;
	transform: rotateY(180deg) translateZ(1px);
}

.dahu-kit__option-face--back > .dahu-kit__option-info {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
}

.dahu-kit__option-face--back > .dahu-kit__option-actions {
	flex: 0 0 auto;
}

/* Question d'un ajout (0.45.0) : une rubrique du verso, comme la
   description. Zone toujours présente dans le verso de la carte qui porte la
   question, affichée À LA PLACE de .dahu-kit__option-info quand la carte est
   ouverte sur la rubrique « question » (data-info-face, applyInfo()). Elle
   défile si la question est plus haute que la carte ; centrée sinon. */
.dahu-kit__option-face--back > .dahu-kit__option-question {
	display: none;
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
}

.dahu-kit__option[data-info-face="question"] .dahu-kit__option-face--back > .dahu-kit__option-question {
	display: flex;
	flex-direction: column;
}

.dahu-kit__option-question > .dahu-kit__slot {
	margin-block: auto;
}

/* Nom du produit choisi, en haut du verso de la question (0.55.0) ; la
   question reste centrée dans la place qui reste. */
.dahu-kit__option-question > .dahu-kit__option-question-product {
	flex: 0 0 auto;
	margin: 0;
	overflow-wrap: anywhere;
}

.dahu-kit__option[data-info-face="question"] .dahu-kit__option-face--back > .dahu-kit__option-info {
	display: none;
}

/* « Visuel d'aide » d'une option (0.54.0) : en haut du verso, rubrique
   Description seulement (le script le retire des autres rubriques), au-dessus
   de .dahu-kit__option-info. Il épouse la carte comme la photo du recto :
   bord à bord en haut, à gauche et à droite (retrait intérieur de la carte,
   --dahu-kit-option-pad, posé par le thème, + filet de 1px ; 0 sans thème),
   coins du haut au rayon de la carte. Jamais plus de la moitié du verso : le
   texte garde sa place ; l'image se réduit sans recadrage. */
.dahu-kit__option-help-visual {
	display: flex;
	flex-direction: column;
	min-height: 0;
	margin: 0;
	overflow: hidden;
	background-color: var(--color-surface-3, transparent);
}

.dahu-kit__option-help-visual img {
	display: block;
	flex: 0 1 auto;
	min-height: 0;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.dahu-kit__option-face--back > .dahu-kit__option-help-visual {
	flex: 0 1 auto;
	max-height: 50%;
	margin: calc(-1 * (var(--dahu-kit-option-pad, -1px) + 1px)) calc(-1 * (var(--dahu-kit-option-pad, -1px) + 1px)) 0;
	border-radius: var(--radius-large, 0px) var(--radius-large, 0px) 0 0;
}

.dahu-kit__option[data-info-face="question"] .dahu-kit__option-face--back > .dahu-kit__option-help-visual {
	display: none;
}

.dahu-kit__option-extension > .dahu-kit__option-help-visual,
.dahu-kit-drawer__pane > .dahu-kit__option-help-visual {
	margin: 0 0 .75em;
	border-radius: var(--annad-radius-small, 0px);
}

/* Changement de rubrique sur un panneau déjà ouvert (0.31.0,
   switchInfoFace()) : pas de nouveau retournement, le contenu s'efface puis
   revient. Durée : --dahu-kit-info-fade (le thème y met son fondu court).
   Opacité sur le contenu, pas sur la carte ni sur .dahu-kit__option-flip :
   la 3D n'est pas aplatie. */
.dahu-kit__option-info {
	transition: opacity var(--dahu-kit-info-fade, .15s) ease;
}

.dahu-kit__option-info.is-changing {
	opacity: 0;
}

/* « Sélectionner » des infos ouvertes et celui du mode bouton s'échangent
   par l'attribut hidden : il doit l'emporter sur le display des boutons. */
.dahu-kit__option-actions > [hidden] {
	display: none !important;
}

/* Onglets du panneau ouvert, sans la bascule « Icônes » (fillInfo()) :
   des boutons qui gardent la typographie du titre
   (.dahu-kit__option-info-title). Habillage (actif, survol) : thème. */
.dahu-kit__option-info-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem .75rem;
}

.dahu-kit__option-info-tab {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
	text-transform: inherit;
	cursor: pointer;
}

/* Colonne étendue : absente tant que la carte n'est pas étendue. */
.dahu-kit__option-extension {
	display: none;
}

/* Étendue : la carte garde sa place dans la grille (rien ne bouge autour)
   et sa colonne d'infos déborde sur les voisines, au-dessus d'elles.
   Posées par le script (extendedFit()) : --dahu-kit-extend-width (deux
   cartes et deux gouttières) et --dahu-kit-extend-shift (décalage de la
   carte vers la gauche pour rester dans le panneau : 0 si
   data-info-anchor="right", toute la colonne si "left", entre les deux
   si "shift"). Un décalage par transform ne bouge rien dans la grille. */
.dahu-kit__option[data-info-key].is-extended {
	z-index: 20;
	overflow: visible;
	transform: translateX(var(--dahu-kit-extend-shift, 0px));
}

.dahu-kit__option.is-extended > .dahu-kit__option-extension {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 100%;
	display: block;
	box-sizing: border-box;
	width: var(--dahu-kit-extend-width, 200%);
	overflow: auto;
	overscroll-behavior: contain;
	/* Fond de la carte (quel qu'il soit) : sans lui, la colonne serait
	   transparente au-dessus des cartes voisines. */
	background: inherit;
}


/* Produits fournis : une ligne par produit (vignette, nom, quantité). */
.dahu-kit__bundled {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.dahu-kit__bundled-photo {
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	object-fit: contain;
}

.dahu-kit__bundled-name {
	flex: 1 1 auto;
	min-width: 0;
}

/* Mouvement réduit : pas de rotation, une face remplace l'autre (l'étendu
   garde son décalage d'ancrage). */
@media (prefers-reduced-motion: reduce) {
	.dahu-kit__option[data-info-key]:not(.is-extended),
	.dahu-kit__option[data-info-key].is-flipped {
		transform: none;
		transition: none;
		animation: none;
	}

	.dahu-kit__option-face,
	.dahu-kit__option-face--back {
		transform: none;
		-webkit-backface-visibility: visible;
		backface-visibility: visible;
	}

	.dahu-kit__option-face--back {
		visibility: hidden;
	}

	.dahu-kit__option.is-flipped .dahu-kit__option-face--back {
		visibility: visible;
	}

	.dahu-kit__option.is-flipped .dahu-kit__option-face--front {
		visibility: hidden;
	}
}

/* ---------- Bulle d'info (étape, gamme) ----------
   Fonctionnel seulement : repli du panneau, masquage, alignements. Aucune
   couleur, aucune typographie : habillage du thème. Réglages exposés :
     --dahu-kit-hint-duration       durée d'ouverture / fermeture (.25s)
     --dahu-kit-hint-easing         courbe (ease)
     --dahu-kit-hint-fade           fondu au changement de texte (.15s)
     --dahu-kit-hint-gap            écart sous le panneau ouvert ; égal au
                                    gap du panneau (.dahu-kit__panel, 1rem)
     --dahu-kit-hint-scroll-margin  marge haute du défilement vers le panneau
                                    (1rem ; 4.5rem sous 64em, bandeau
                                    récapitulatif collant)

   Le panneau est le premier enfant de .dahu-kit__panel (colonne flex avec
   gap) : fermé, sa marge basse négative annule le gap qui le suit, il ne
   laisse aucun espace ; ouvert, l'espaceur interne (.dahu-kit__hint-box)
   rend cet écart sous le texte. Repli par grid-template-rows 0fr → 1fr,
   sans hauteur mesurée. Fermé : visibility hidden À LA FIN de la
   transition (délai), inert posé par le script. */
.dahu-kit__hint {
	display: grid;
	grid-template-rows: 0fr;
	min-width: 0;
	margin-bottom: calc(-1 * var(--dahu-kit-hint-gap, 1rem));
	scroll-margin-top: var(--dahu-kit-hint-scroll-margin, 1rem);
	transition: grid-template-rows var(--dahu-kit-hint-duration, .25s) var(--dahu-kit-hint-easing, ease);
}

.dahu-kit__hint.is-open {
	grid-template-rows: 1fr;
}

.dahu-kit__hint-inner {
	min-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: visibility 0s linear var(--dahu-kit-hint-duration, .25s);
}

.dahu-kit__hint.is-open > .dahu-kit__hint-inner {
	visibility: visible;
	transition-delay: 0s;
}

.dahu-kit__hint-box {
	display: flex;
	align-items: flex-start;
	margin-bottom: var(--dahu-kit-hint-gap, 1rem);
}

.dahu-kit__hint-body {
	flex: 1 1 auto;
	min-width: 0;
	transition: opacity var(--dahu-kit-hint-fade, .15s) ease;
}

.dahu-kit__hint-body.is-changing {
	opacity: 0;
}

.dahu-kit__hint-close {
	flex: 0 0 auto;
}

/* Changement d'écran : repli immédiat. */
.dahu-kit__hint.is-instant,
.dahu-kit__hint.is-instant > .dahu-kit__hint-inner {
	transition: none;
}

/* « i » : dans la ligne du titre (étape, gamme), sans habillage. */
.dahu-kit__hint-btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	cursor: pointer;
}

.dahu-kit__hint-btn--placeholder {
	visibility: hidden;
}

.dahu-kit__tier.has-hint {
	display: flex;
	align-items: center;
}

.dahu-kit__tier-label {
	min-width: 0;
}

/* Affichage des gammes (0.55.0, réglages du composant dans l'éditeur du
   kit), chacun indépendant des autres. Couleur de la gamme : choisie dans
   l'éditeur, sinon celle de la palette (DahuCompositeTiers.tierColor()),
   posée sur la carte par le script — --dahu-kit-tier-color, et
   --dahu-kit-tier-ink (noir ou blanc lisible dessus).
   - « À la ligne » : div.dahu-kit__tier-break entre deux gammes de la liste
     en vignettes, sur toute sa largeur — la gamme suivante commence une
     nouvelle ligne (cartes carrées : une liste par gamme, déjà le cas) ;
   - « Badge » : span.dahu-kit__option-tier (nom de la gamme) à droite du
     nom de la carte, dans span.dahu-kit__option-heading ;
   - « Fond coloré » : .has-tier-tint, fond clair de la couleur
     (--dahu-kit-tier-bg, fourni avec chaque couleur de la palette) ; code
     hors palette : la couleur mêlée de blanc (--dahu-kit-tier-tint, 17 %).
     Le thème qui peint les cartes (survol, choix) reprend la règle à son
     niveau. */
.dahu-kit__options > .dahu-kit__tier-break {
	flex: 0 0 100%;
	width: 100%;
	height: 0;
	margin: 0;
}

.dahu-kit__option-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem .5rem;
	min-width: 0;
	max-width: 100%;
}

.dahu-kit__option-tier {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	padding: 0 .6em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--dahu-kit-tier-ink, #fff);
	background-color: var(--dahu-kit-tier-color, #1d1d1b);
}

.dahu-kit__option.has-tier-tint {
	background-color: var(--dahu-kit-tier-bg, color-mix(in srgb, var(--dahu-kit-tier-color) var(--dahu-kit-tier-tint, 17%), #fff));
}

/* Vignettes : titre de gamme coupé par « … », le « i » reste visible. */
.dahu-kit__option-cell > .dahu-kit__tier.has-hint {
	display: flex;
}

.dahu-kit__option-cell > .dahu-kit__tier.has-hint > .dahu-kit__tier-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Popup « ? » d'une gamme (0.52.0 ; fixe et centrée en 0.55.0) ----------
   Fonctionnel seulement : déclencheur dans la ligne du titre, position,
   disposition, médias bord à bord, entrée en fondu. Couleurs, typographie,
   rayon, ombre, marges intérieures de la colonne du texte : habillage du
   thème (feuille de secours sinon).
   La popup est un enfant de <body> (hors de .dahu-kit). Réglages exposés :
     --dahu-kit-popover-width       largeur sans média (34rem)
     --dahu-kit-popover-text-width  colonne du texte à côté d'un média (20rem)
     --dahu-kit-popover-media-max   hauteur maximale d'un média (24rem)
     --dahu-kit-popover-inset       écart minimal aux bords de la fenêtre (16px)
     --dahu-kit-popover-z           plan (998 : sous le tiroir et son voile)
     --dahu-kit-popover-duration    entrée (.18s)
   --dahu-kit-popover-ratio (largeur / hauteur du média) : posé par le script.

   Depuis la 0.55.0, FIXE et centrée dans la fenêtre, au format paysage
   (0.52.0 à 0.54.0 : ancrée sous son « ? », au-dessus s'il manquait la
   place, avec une pointe) :
   - sans média : une colonne de texte de --dahu-kit-popover-width ;
   - avec un média, fenêtre de 40em et plus : média à GAUCHE, à la hauteur
     de la popup et à sa propre proportion — jamais recadré, bord à bord
     (haut, bas, gauche) ; texte à droite, qui défile s'il est plus long.
     Hauteur : --dahu-kit-popover-media-max, réduite pour que média et texte
     tiennent dans la largeur de la fenêtre ;
   - avec un média, téléphone : média en haut, à la largeur, bord à bord ;
     texte dessous, le tout défile. */
.dahu-kit__tier-help {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	cursor: pointer;
}

.dahu-kit__tier-help--placeholder {
	visibility: hidden;
}

.dahu-kit__tier-help-icon {
	display: block;
	width: 100%;
	height: 100%;
}

.dahu-kit-popover {
	--dahu-kit-popover-inset-x2: calc(2 * var(--dahu-kit-popover-inset, 16px));
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: var(--dahu-kit-popover-z, 998);
	box-sizing: border-box;
	width: min(var(--dahu-kit-popover-width, 34rem), calc(100vw - var(--dahu-kit-popover-inset-x2)));
	opacity: 0;
	transform: translate(-50%, -50%) scale(.98);
	transition: opacity var(--dahu-kit-popover-duration, .18s) ease, transform var(--dahu-kit-popover-duration, .18s) ease;
}

.dahu-kit-popover[hidden] {
	display: none;
}

.dahu-kit-popover.is-open {
	opacity: 1;
	transform: translate(-50%, -50%);
}

.dahu-kit-popover:focus {
	outline: none;
}

/* Défile en entier (téléphone, texte seul) ; coupe le média aux coins
   arrondis de l'habillage. */
.dahu-kit-popover__box {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - var(--dahu-kit-popover-inset-x2));
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.dahu-kit-popover__content {
	box-sizing: border-box;
	min-width: 0;
}

.dahu-kit-popover__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.dahu-kit-popover__title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.dahu-kit-popover__close {
	flex: 0 0 auto;
	cursor: pointer;
}

.dahu-kit-popover__media[hidden],
.dahu-kit-popover__text[hidden] {
	display: none;
}

/* Média bord à bord, à sa proportion : à la largeur de la popup (téléphone),
   ou à la hauteur de la popup (paysage, plus bas). Ni marge ni recadrage. */
.dahu-kit-popover__media {
	flex: 0 0 auto;
	line-height: 0;
}

.dahu-kit-popover__media img,
.dahu-kit-popover__media video {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

/* Vidéo intégrée (YouTube, Vimeo…) : 16/9, quelles que soient les
   dimensions posées par le fournisseur. */
.dahu-kit-popover__media iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}

.dahu-kit-popover__text > :first-child {
	margin-top: 0;
}

.dahu-kit-popover__text > :last-child {
	margin-bottom: 0;
}

.dahu-kit-popover__text img {
	max-width: 100%;
	height: auto;
}

/* Paysage avec média : largeur = média (hauteur × proportion) + colonne du
   texte, posée explicitement (une popup centrée par left: 50% ne se
   dimensionnerait que sur la moitié de la fenêtre). */
@media (min-width: 40em) {
	.dahu-kit-popover.has-media {
		--dahu-kit-popover-media-h: min(
			var(--dahu-kit-popover-media-max, 24rem),
			calc(100vh - var(--dahu-kit-popover-inset-x2)),
			calc((100vw - var(--dahu-kit-popover-inset-x2) - var(--dahu-kit-popover-text-width, 20rem)) / var(--dahu-kit-popover-ratio, 1))
		);
		width: calc(var(--dahu-kit-popover-media-h) * var(--dahu-kit-popover-ratio, 1) + var(--dahu-kit-popover-text-width, 20rem));
	}

	/* content-box : la hauteur posée est celle du média, filet de
	   l'habillage en plus — le média garde sa proportion exacte. */
	.dahu-kit-popover.has-media .dahu-kit-popover__box {
		box-sizing: content-box;
		flex-direction: row;
		height: var(--dahu-kit-popover-media-h);
		overflow: hidden;
	}

	.dahu-kit-popover.has-media .dahu-kit-popover__media {
		width: calc(var(--dahu-kit-popover-media-h) * var(--dahu-kit-popover-ratio, 1));
		height: 100%;
	}

	.dahu-kit-popover.has-media .dahu-kit-popover__media img,
	.dahu-kit-popover.has-media .dahu-kit-popover__media video,
	.dahu-kit-popover.has-media .dahu-kit-popover__media iframe {
		width: 100%;
		height: 100%;
	}

	/* La colonne du texte absorbe le filet de l'habillage (le média garde sa
	   proportion exacte) et défile si le texte est plus long. */
	.dahu-kit-popover.has-media .dahu-kit-popover__content {
		flex: 1 1 var(--dahu-kit-popover-text-width, 20rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dahu-kit-popover,
	.dahu-kit-popover.is-open {
		transition: none;
		transform: translate(-50%, -50%);
	}
}

@media (max-width: 63.999em) {
	.dahu-kit__hint {
		scroll-margin-top: var(--dahu-kit-hint-scroll-margin, 4.5rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dahu-kit__hint,
	.dahu-kit__hint-inner,
	.dahu-kit__hint-body,
	.dahu-kit__option-info {
		transition: none;
	}
}

/* Téléphone : une vignette par ligne, sur toute la largeur. */
@media (max-width: 39.999em) {
	.dahu-kit__option--vignette,
	.dahu-kit__option-cell,
	.dahu-kit__options > .dahu-kit__component--anchored {
		width: 100%;
	}

	/* Embranchements : la règle des cinq colonnes, plus lourde, l'emporterait
	   sur la ligne ci-dessus (deux ou trois par ligne entre 21 et 40em). */
	.dahu-kit__option--vignette.dahu-kit__option--path {
		flex: 1 1 100%;
	}

	/* Une carte par ligne : plus rien à aligner, la ligne vide disparaît
	   (et la réserve de l'ajout ancré avec elle). */
	.dahu-kit__option-cell > .dahu-kit__tier--spacer,
	.dahu-kit__option-cell > .dahu-kit__tier--spacer.has-hint {
		display: none;
	}

	.dahu-kit__options--tiered > .dahu-kit__component--anchored {
		padding-top: 0;
	}
}

/* ---------- Tiroir « Plus d'infos » (vignettes) ---------- */
/* Position fixe, glissement depuis la droite et verrouillage du défilement :
   sans ces règles, le tiroir s'afficherait dans le flux et le script n'aurait
   aucun effet visible. */

.dahu-kit-drawer__overlay {
	position: fixed;
	inset: 0;
	z-index: 999;
	opacity: 0;
	transition: opacity .25s ease;
}

body.dahu-kit-drawer-is-open .dahu-kit-drawer__overlay {
	opacity: 1;
}

.dahu-kit-drawer__overlay[hidden] {
	display: none;
}

body.dahu-kit-drawer-is-open {
	overflow: hidden;
}

.dahu-kit-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	transform: translateX(100%);
	transition: transform .3s ease-out;
}

.dahu-kit-drawer[hidden] {
	display: none;
}

.dahu-kit-drawer.is-open {
	transform: translateX(0);
}

@media (min-width: 40em) {
	.dahu-kit-drawer {
		width: min(28rem, 100%);
		padding: 1rem; /*vrai valeur voulue du padding*/
	}
}

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

.dahu-kit-drawer__inner {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.dahu-kit-drawer__close {
	position: absolute;
	top: .75rem;
	right: .75rem;
	z-index: 1;
	cursor: pointer;
}

/* Barre d'onglets : les boutons à gauche, « Sélectionner » poussé à droite. */
.dahu-kit-drawer__tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
}

.dahu-kit-drawer__tabs[hidden] {
	display: none;
}

.dahu-kit-drawer__pane[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.dahu-kit-drawer,
	.dahu-kit-drawer__overlay {
		transition: none;
	}
}

.dahu-kit__option-image {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Configurations sauvegardées (0.37.0) : bloc « Sauvegarder ma
   configuration » en pied du Résumé, tête d'une configuration rouverte et
   bandeau d'échec de réouverture. Mise en page seulement : couleurs et
   boutons viennent des classes existantes (.dahu-kit__message, .annad-btn). */
.dahu-kit__save {
	margin-top: 1.5em;
}

.dahu-kit__save-title,
.dahu-kit__restore-title {
	margin: 0 0 .5em;
	font-weight: 600;
}

.dahu-kit__save-form {
	flex-wrap: wrap;
	align-items: center;
}

.dahu-kit__save-name input {
	min-width: 14em;
	max-width: 100%;
}

/* Visiteur (0.49.0) : formulaire de création de compte du bloc de
   sauvegarde. Deux colonnes, une seule sous 480 px ; l'adresse prend toute
   la largeur. Les champs sont enveloppés dans .dahu-kit__save-name, comme le
   champ du nom : un thème qui habille celui-ci habille le formulaire. Ici,
   la disposition et le strict nécessaire pour qu'il soit lisible sans thème
   (libellé au-dessus, erreur sous le champ, case alignée sur sa mention). */
.dahu-kit__save-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75em 1em;
	margin: .75em 0;
}

.dahu-kit__save-field {
	min-width: 0;
}

.dahu-kit__save-field--address {
	grid-column: 1 / -1;
}

.dahu-kit__save-label {
	display: block;
	margin: 0 0 .25em;
	font-size: .9375em;
	font-weight: 600;
}

.dahu-kit__save-required {
	border: 0;
	text-decoration: none;
	cursor: inherit;
}

.dahu-kit__save-field .dahu-kit__save-name {
	display: block;
	max-width: none;
}

.dahu-kit__save-field .dahu-kit__save-name input {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
}

.dahu-kit__save-field.has-error .dahu-kit__save-name input {
	border-color: var(--color-error, #a00);
}

.dahu-kit__save-field-error {
	display: block;
	margin-top: .25em;
	font-size: .875em;
	color: var(--color-error, #a00);
}

.dahu-kit__save-consent {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .25em .6em;
	align-items: start;
	margin: .75em 0 .25em;
}

.dahu-kit__save-consent input {
	width: 1.25em;
	height: 1.25em;
	margin: .15em 0 0;
}

.dahu-kit__save-consent label {
	margin: 0;
	cursor: pointer;
}

.dahu-kit__save-consent .dahu-kit__save-field-error {
	grid-column: 2;
	margin-top: 0;
}

.dahu-kit__save-note {
	font-size: .875em;
}

/* Champ piège : jamais visible, jamais atteint au clavier. */
.dahu-kit__save-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.dahu-kit__save-cancel {
	min-height: 2.75rem;
	padding: 0 .5em;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
}

.dahu-kit__save-login-wrap {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6em;
}

.dahu-kit__save-exists .dahu-kit__buttons {
	margin-top: .75em;
}

@media (max-width: 480px) {
	.dahu-kit__save-fields {
		grid-template-columns: minmax(0, 1fr);
	}
}

.dahu-kit__restore {
	margin-bottom: 1em;
}

.dahu-kit__restore-intro {
	margin: 0 0 .25em;
}

.dahu-kit__restore-issues {
	margin: 0 0 0 1.2em;
}

.dahu-kit__start-notice {
	margin-bottom: 1em;
}

/* Carte « lien » d'un embranchement (0.57.0) : la carte renvoie vers une
   page (contact, carte des revendeurs…) au lieu d'être un choix ; toute la
   carte est cliquable, son bouton « Accéder » (.dahu-kit__choose--link,
   role="link") ouvre la page. */
.dahu-kit__option.dahu-kit__option--link,
.is-select-button .dahu-kit__option--link {
	cursor: pointer;
}