/*!
 * Danz Studio : Boutique de l'école (module Articles), v1.24.831 → v1.24.838
 * Tuiles par couleur, barre de filtres, pastilles, boutons de taille ;
 * v1.24.838 : bouton d'ajout rapide sur les tuiles « taille unique » et
 * fiche estompée pendant la bascule vers une autre couleur.
 * Mobile-first : aucune largeur fixe, jamais de défilement horizontal,
 * zones tactiles de 44 px. Les jetons --danz-fe-* viennent du socle et
 * de la palette de l'école ; chacun a un repli.
 */

.danz-fe-articles {
	--danz-articles-cols: 3;
	--danz-articles-gap: 16px;
	--danz-articles-min: 220px;
	--danz-articles-primary: var(--danz-fe-primary, #6366f1);
	--danz-articles-primary-600: var(--danz-fe-primary-600, #4f46e5);
	--danz-articles-surface: var(--danz-fe-surface, #ffffff);
	--danz-articles-surface-2: var(--danz-fe-surface-2, #f9fafb);
	--danz-articles-text: var(--danz-fe-text, #111827);
	--danz-articles-muted: var(--danz-fe-text-muted, #6b7280);
	--danz-articles-border: var(--danz-fe-border, #e5e7eb);
	--danz-articles-radius: var(--danz-fe-radius, 12px);
	--danz-articles-shadow: var(--danz-fe-shadow, 0 2px 8px rgba(17, 24, 39, .08));
	--danz-articles-tap: var(--danz-fe-tap, 44px);
	color: var(--danz-articles-text);
	max-width: 100%;
	overflow-x: clip;
}
.danz-fe-articles *,
.danz-fe-articles *::before,
.danz-fe-articles *::after { box-sizing: border-box; }

/* Personnalisation posée par le widget du constructeur (--ds-*). */
.has-ds-accent .danz-fe-articles { --danz-articles-primary: var(--ds-accent); --danz-articles-primary-600: var(--ds-accent); }
.has-ds-bg .danz-fe-articles     { --danz-articles-surface: var(--ds-bg); --danz-articles-surface-2: var(--ds-bg); }
.has-ds-text .danz-fe-articles   { --danz-articles-text: var(--ds-text); --danz-articles-muted: var(--ds-text); }
.has-ds-border .danz-fe-articles { --danz-articles-border: var(--ds-border); }
.has-ds-radius .danz-fe-articles { --danz-articles-radius: var(--ds-radius); }

/* Texte pour les lecteurs d'écran seulement. */
.danz-fe-articles__sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
 * Barre de filtres (même dessin que celle du planning)
 * ============================================================ */
.danz-fe-articles__filters {
	background: var(--danz-articles-surface);
	border: 1px solid var(--danz-articles-border);
	border-radius: var(--danz-articles-radius);
	padding: 16px 18px;
	margin: 0 0 18px;
	max-width: 100%;
}
.danz-fe-articles__filters-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: flex-end;
}
.danz-fe-articles__filter {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	flex: 1 1 140px;
	margin: 0;
	padding: 0;
	border: 0;
}
.danz-fe-articles__filter-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--danz-articles-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 0;
}
.danz-fe-articles__filter-select {
	width: 100%;
	min-height: var(--danz-articles-tap);
	padding: 10px 12px;
	border: 1px solid var(--danz-articles-border);
	border-radius: 8px;
	background: var(--danz-articles-surface);
	color: var(--danz-articles-text);
	font-size: 16px; /* évite le zoom automatique sur iOS */
	line-height: 1.3;
}
.danz-fe-articles__filter-select:focus-visible {
	outline: 2px solid var(--danz-articles-primary);
	outline-offset: 1px;
	border-color: var(--danz-articles-primary);
}

/* Couleurs : des pastilles radio, 44 px de zone tactile. */
.danz-fe-articles__filter--couleurs { flex: 2 1 220px; }
.danz-fe-articles__swatch-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
.danz-fe-articles__swatch-opt {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--danz-articles-tap);
	min-height: var(--danz-articles-tap);
	cursor: pointer;
	border-radius: 999px;
}
.danz-fe-articles__swatch-opt input {
	position: absolute;
	opacity: 0;
	width: 1px; height: 1px;
	margin: 0;
	pointer-events: none;
}
.danz-fe-articles__swatch-opt--all {
	padding: 0 14px;
	border: 1px solid var(--danz-articles-border);
	background: var(--danz-articles-surface);
	font-size: 14px;
	font-weight: 600;
	color: var(--danz-articles-text);
}
.danz-fe-articles__swatch-opt--all input:checked + .danz-fe-articles__swatch-opt-text { color: var(--danz-articles-primary); }
.danz-fe-articles__swatch-opt input:checked ~ .danz-fe-articles__swatch,
.danz-fe-articles__swatch-opt--all:has(input:checked) { box-shadow: 0 0 0 2px var(--danz-articles-surface), 0 0 0 4px var(--danz-articles-primary); }
.danz-fe-articles__swatch-opt input:focus-visible ~ .danz-fe-articles__swatch,
.danz-fe-articles__swatch-opt--all:has(input:focus-visible) { outline: 2px solid var(--danz-articles-primary); outline-offset: 3px; }

/* La pastille elle-même (filtres, fiche). */
.danz-fe-articles__swatch {
	position: relative;
	display: inline-block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--c, #999);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
	flex: none;
}

.danz-fe-articles__filters-actions {
	display: flex;
	gap: 8px;
	margin-left: auto;
	align-items: center;
	flex-wrap: wrap;
}
.danz-fe-articles__filters-actions .danz-fe-btn {
	min-height: var(--danz-articles-tap);
	padding: 10px 16px;
	font-size: 14px;
	border-radius: 8px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}
.danz-fe-articles__filters-actions .danz-fe-btn--primary {
	background: var(--danz-articles-primary);
	border-color: var(--danz-articles-primary);
	color: #fff;
}
.danz-fe-articles__filters-actions .danz-fe-btn--primary:hover { background: var(--danz-articles-primary-600); border-color: var(--danz-articles-primary-600); }
.danz-fe-articles__filters-actions a.danz-fe-btn:not(.danz-fe-btn--primary) {
	background: transparent;
	border: 1px solid var(--danz-articles-border);
	color: var(--danz-articles-text);
}
.danz-fe-articles__filters-actions a.danz-fe-btn:not(.danz-fe-btn--primary):hover { background: rgba(128, 128, 128, .12); }

@media (max-width: 600px) {
	.danz-fe-articles__filter { flex: 1 1 calc(50% - 7px); }
	.danz-fe-articles__filter--couleurs { flex-basis: 100%; }
	.danz-fe-articles__filters-actions { width: 100%; margin-left: 0; margin-top: 4px; justify-content: flex-end; }
}

/* Pendant un rechargement sans changement de page (articles.js). */
.danz-fe-articles[aria-busy="true"] { opacity: .55; transition: opacity .15s ease; }

/* ============================================================
 * Grille et tuiles
 * ============================================================ */
.danz-fe-articles__empty {
	margin: 0;
	padding: 24px 16px;
	text-align: center;
	color: var(--danz-articles-muted);
	border: 1px dashed var(--danz-articles-border);
	border-radius: var(--danz-articles-radius);
}
.danz-fe-articles__empty a { color: var(--danz-articles-primary); font-weight: 600; }

/* Colonnes demandées sur grand écran, jamais moins de 220 px, jamais plus
   large que le conteneur : le nombre de colonnes descend tout seul. */
.danz-fe-articles__grid {
	display: grid;
	gap: var(--danz-articles-gap);
	grid-template-columns: repeat(
		auto-fill,
		minmax(
			min(100%, max(var(--danz-articles-min), calc((100% - (var(--danz-articles-cols) - 1) * var(--danz-articles-gap)) / var(--danz-articles-cols)))),
			1fr
		)
	);
	margin: 0;
	padding: 0;
	max-width: 100%;
}

.danz-fe-articles__tile {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--danz-articles-surface);
	border: 1px solid var(--danz-articles-border);
	border-radius: var(--danz-articles-radius);
	box-shadow: var(--danz-articles-shadow);
	overflow: hidden;
	margin: 0;
	transition: transform .15s ease, box-shadow .15s ease;
}
@media (hover: hover) {
	.danz-fe-articles__tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(17, 24, 39, .12); }
}

.danz-fe-articles__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	max-width: 100%;
	background: var(--danz-articles-surface-2);
	overflow: hidden;
	text-decoration: none;
}
.danz-fe-articles__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	object-position: center;
}
.danz-fe-articles__img--vide {
	background: linear-gradient(135deg, var(--c, #999) 0%, var(--c, #999) 60%, rgba(255, 255, 255, .25) 100%);
}
.danz-fe-articles__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #b91c1c;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}
/* Rupture : tuile grisée mais toujours cliquable (la fiche explique). */
.danz-fe-articles__tile.is-rupture .danz-fe-articles__img { filter: grayscale(.7); opacity: .75; }
.danz-fe-articles__tile.is-rupture .danz-fe-articles__name a { color: var(--danz-articles-muted); }

.danz-fe-articles__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px 16px;
	min-width: 0;
	flex: 1 1 auto; /* v1.24.838 : le corps prend la hauteur restante, le bouton d'ajout se cale en bas */
}
.danz-fe-articles__name {
	margin: 0;
	font-size: 16px;
	line-height: 1.3;
	font-weight: 600;
	overflow-wrap: anywhere;
}
.danz-fe-articles__name a {
	color: var(--danz-articles-text);
	text-decoration: none;
}
.danz-fe-articles__name a:hover,
.danz-fe-articles__name a:focus-visible { color: var(--danz-articles-primary); }
.danz-fe-articles__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--danz-articles-muted);
	overflow-wrap: anywhere;
}
.danz-fe-articles__price {
	margin: 2px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
}
.danz-fe-articles__amount {
	font-size: 18px;
	font-weight: 700;
	color: var(--danz-articles-text);
}
.danz-fe-articles__tva {
	font-size: 12px;
	color: var(--danz-articles-muted);
}

/* Mini-pastilles des autres couleurs : 18 px visibles, 44 px au doigt. */
.danz-fe-articles__dots {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
	margin-left: -8px;
}
.danz-fe-articles__dot {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	text-decoration: none;
	flex: none;
}
.danz-fe-articles__dot::before {
	content: "";
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--c, #999);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}
.danz-fe-articles__dot::after {
	/* Zone tactile de 44 px sans agrandir la pastille. */
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: var(--danz-articles-tap);
	height: var(--danz-articles-tap);
	transform: translate(-50%, -50%);
}
.danz-fe-articles__dot.is-current::before { box-shadow: 0 0 0 2px var(--danz-articles-surface), 0 0 0 4px var(--danz-articles-primary); }
a.danz-fe-articles__dot:hover::before,
a.danz-fe-articles__dot:focus-visible::before { box-shadow: 0 0 0 2px var(--danz-articles-surface), 0 0 0 4px var(--danz-articles-border); }
a.danz-fe-articles__dot:focus-visible { outline: 2px solid var(--danz-articles-primary); outline-offset: 2px; }

/* ============================================================
 * v1.24.838 : ajout rapide (tuile « taille unique »)
 * ============================================================ */

/* Trois classes : l'emporte sur les états du bouton générique du socle
   (.danz-fe-btn:hover éclaircit le fond, ce qui rendrait ce bouton plein
   illisible) quel que soit l'ordre de chargement des feuilles. */
.danz-fe-articles .danz-fe-btn.danz-fe-articles__quick {
	position: relative; /* le nom de l'article (lecteur d'écran) se cale dans le bouton */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	min-height: var(--danz-articles-tap);
	margin: auto 0 0; /* calé en bas du corps (les tuiles d'une même rangée s'alignent), l'écart minimal est celui du corps */
	padding: 10px 14px;
	border: 1px solid var(--danz-articles-primary);
	border-radius: 10px;
	background: var(--danz-articles-primary);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	touch-action: manipulation;
	transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
.danz-fe-articles .danz-fe-btn.danz-fe-articles__quick:hover,
.danz-fe-articles .danz-fe-btn.danz-fe-articles__quick:active {
	background: var(--danz-articles-primary-600);
	border-color: var(--danz-articles-primary-600);
	color: #fff;
}
.danz-fe-articles .danz-fe-btn.danz-fe-articles__quick:focus-visible {
	outline: 3px solid var(--danz-articles-primary);
	outline-offset: 2px;
}
/* Pendant l'appel : estompé, curseur d'attente, mais toujours lisible.
   articles.js pose aria-disabled (et non disabled, qui ferait perdre le
   focus clavier) : la feuille suit cet attribut ; :disabled reste couvert
   au cas où un thème le poserait lui-même. */
.danz-fe-articles .danz-fe-btn.danz-fe-articles__quick[aria-disabled="true"],
.danz-fe-articles .danz-fe-btn.danz-fe-articles__quick:disabled {
	opacity: .7;
	cursor: progress;
	background: var(--danz-articles-primary);
	border-color: var(--danz-articles-primary);
	color: #fff;
}
/* « Ajouté ✓ » (deux secondes) : plein, pas estompé. */
.danz-fe-articles .danz-fe-btn.danz-fe-articles__quick.is-done,
.danz-fe-articles .danz-fe-btn.danz-fe-articles__quick.is-done[aria-disabled="true"],
.danz-fe-articles .danz-fe-btn.danz-fe-articles__quick.is-done:disabled {
	opacity: 1;
	cursor: default;
}
/* Zone aria-live de la tuile : invisible (lue par le lecteur d'écran), sauf
   pour une erreur, qui doit aussi se voir. */
.danz-fe-articles__quick-status {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.danz-fe-articles__quick-status.is-error {
	position: static !important;
	width: auto; height: auto;
	margin: 6px 0 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	font-size: 13px;
	line-height: 1.4;
	color: #b91c1c;
	overflow-wrap: anywhere;
}

/* ============================================================
 * Fiche d'un article (fiche standard de la boutique, habillée)
 * ============================================================ */

/* Le menu déroulant natif reste dans la page (le script de la boutique
   l'écoute) mais n'est plus vu : ce sont les boutons qui le pilotent. */
.danz-fe-articles__native {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
}
.danz-fe-articles__sizes-wrap { position: relative; max-width: 100%; }
.danz-fe-articles__sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 100%;
}
.danz-fe-articles__size {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--danz-fe-tap, 44px);
	min-height: var(--danz-fe-tap, 44px);
	padding: 0 16px;
	border: 2px solid var(--danz-fe-border, #e5e7eb);
	border-radius: 10px;
	background: var(--danz-fe-surface, #fff);
	color: var(--danz-fe-text, #111827);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	touch-action: manipulation;
	transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.danz-fe-articles__size:hover { border-color: var(--danz-fe-primary, #6366f1); }
.danz-fe-articles__size:focus-visible { outline: 2px solid var(--danz-fe-primary, #6366f1); outline-offset: 2px; }
.danz-fe-articles__size.is-on,
.danz-fe-articles__size[aria-pressed="true"] {
	border-color: var(--danz-fe-primary, #6366f1);
	background: var(--danz-fe-primary, #6366f1);
	color: #fff;
}
.danz-fe-articles__size.is-off,
.danz-fe-articles__size:disabled {
	border-style: dashed;
	border-color: var(--danz-fe-border, #e5e7eb);
	background: transparent;
	color: var(--danz-fe-text-muted, #6b7280);
	text-decoration: line-through;
	opacity: .55;
	cursor: not-allowed;
}

/* Les autres couleurs du modèle, entre le prix et le formulaire. */
.danz-fe-articles__couleurs { margin: 12px 0 16px; }
.danz-fe-articles__couleurs-label {
	margin: 0 0 8px;
	font-size: 14px;
	color: var(--danz-fe-text-muted, #6b7280);
}
.danz-fe-articles__couleurs-label strong { color: var(--danz-fe-text, #111827); }
.danz-fe-articles__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 100%;
}
.danz-fe-articles__swatches .danz-fe-articles__swatch {
	width: 32px;
	height: 32px;
	flex: none;
	text-decoration: none;
}
.danz-fe-articles__swatches .danz-fe-articles__swatch::after {
	/* Zone tactile de 44 px. */
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: var(--danz-fe-tap, 44px);
	height: var(--danz-fe-tap, 44px);
	transform: translate(-50%, -50%);
	border-radius: 50%;
}
.danz-fe-articles__swatches .danz-fe-articles__swatch.is-current {
	box-shadow: 0 0 0 2px var(--danz-fe-surface, #fff), 0 0 0 4px var(--danz-fe-primary, #6366f1);
}
.danz-fe-articles__swatches a.danz-fe-articles__swatch:hover,
.danz-fe-articles__swatches a.danz-fe-articles__swatch:focus-visible {
	box-shadow: 0 0 0 2px var(--danz-fe-surface, #fff), 0 0 0 4px var(--danz-fe-border, #e5e7eb);
}
.danz-fe-articles__swatches a.danz-fe-articles__swatch:focus-visible { outline: 2px solid var(--danz-fe-primary, #6366f1); outline-offset: 4px; }

/* v1.24.838 : bascule vers une autre couleur sans quitter la page
   (articles.js pose aria-busy sur la fiche le temps du chargement). */
div.product[aria-busy="true"] { opacity: .55; transition: opacity .15s ease; }
/* La pastille de la couleur affichée reçoit le focus après la bascule (span
   à tabindex -1) : pas d'anneau au clic, anneau au clavier seulement. */
.danz-fe-articles__swatches .danz-fe-articles__swatch.is-current:focus:not(:focus-visible) { outline: none; }
.danz-fe-articles__swatches .danz-fe-articles__swatch.is-current:focus-visible { outline: 2px solid var(--danz-fe-primary, #6366f1); outline-offset: 4px; }

/* Sous le bouton d'achat. */
.danz-fe-articles__pickup {
	display: block;
	flex-basis: 100%;
	width: 100%;
	clear: both;
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--danz-fe-text-muted, #6b7280);
}