/*
 * Éléments — issue 07. Référence : planche 4, décisions du 25/09.
 *
 * Chaque brique existe une seule fois. Le balisage attendu, composant par
 * composant, est dans tests/elements.html, qui sert aussi de page de contrôle.
 *
 * Écarts à la planche, décidés ou ramenés à l'échelle :
 * - texte des badges en encre douce : le bronze n'y fait que 4,36:1 sur
 *   champagne pâle et 4,45:1 sur sable (décidé par Will) ;
 * - bordure des champs en gris chaud : le lin ne faisait que 1,31:1 sur blanc,
 *   il faut 3:1 pour repérer où taper (décidé par Will) ;
 * - 13 px (aide, erreur, badge) → 14 ; 15 px (étiquette cochable, étiquette de
 *   style) → 16 ; marges 6 → 8, 10 → 8, 14 → 16, 18 → 16.
 * Modificateurs de la table des classes jamais dessinés, donc pas intégrés :
 * pel-link--quiet, pel-tag--sm, pel-field--inline, --sm sur champ, liste et
 * quantité ; ni survol du bouton secondaire, ni champ désactivé.
 */

/* --- pel-btn -------------------------------------------------------------- */
.pel-btn {
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pel-space-2xs);
	min-height: var(--pel-cible);
	padding-inline: var(--pel-space-m);
	border: var(--pel-filet) solid transparent;
	border-radius: var(--pel-radius-pill);
	font-family: var(--pel-font-texte);
	font-size: var(--pel-fs-champ);
	font-weight: 600;
	line-height: var(--pel-lh-titre);
	text-decoration: none;
	cursor: pointer;
}

/* L'action principale : un seul bouton primaire visible par écran. */
.pel-btn--primary {
	border-color: var(--pel-terre-cuite);
	background: var(--pel-terre-cuite);
	color: var(--pel-blanc);             /* 4,51:1 : 16 px graisse 600 minimum */
}

.pel-btn--primary:hover {
	border-color: var(--pel-terre-foncee);
	background: var(--pel-terre-foncee);
}

.pel-btn--secondary {
	border-color: var(--pel-terre-foncee);
	background: transparent;
	color: var(--pel-terre-foncee);
}

/* Tertiaire : souligné, pour ne pas dépendre de la couleur. */
.pel-btn--ghost {
	background: transparent;
	color: var(--pel-terre-foncee);
	text-decoration: underline;
	text-underline-offset: var(--pel-soulignement);
}

/* --sm : 36 px dessinés, 44 de cible — la zone cliquable déborde. */
.pel-btn--sm {
	min-height: var(--pel-btn-sm-h);
	padding-inline: var(--pel-space-s);
	font-size: var(--pel-fs-small);
}

/* Le pseudo-élément se cale à l'intérieur de la bordure : on la compte, sinon
   la zone ne ferait que 42 px (mesuré). */
.pel-btn--sm::after {
	content: "";
	position: absolute;
	inset-inline: calc(var(--pel-filet) * -1);
	inset-block: calc((var(--pel-cible) - var(--pel-btn-sm-h)) / -2 - var(--pel-filet));
}

.pel-btn--lg {
	min-height: var(--pel-btn-lg-h);
	padding-inline: var(--pel-space-l);
	font-size: var(--pel-fs-body);
}

/* Désactivé : lisible (4,55:1), et jamais seul — une phrase adjacente, liée
   par aria-describedby, dit pourquoi. */
.pel-btn:disabled,
.pel-btn.is-disabled {
	border-color: var(--pel-lin);
	background: var(--pel-lin);
	color: var(--pel-gris-chaud);
	cursor: not-allowed;
}

/* En cours : le libellé change (« Envoi en cours… »), la roue tourne, et le
   bouton porte aria-busy="true". */
.pel-btn.is-loading {
	cursor: progress;
}

.pel-btn.is-loading::before {
	content: "";
	box-sizing: border-box;
	width: var(--pel-icone-s);
	height: var(--pel-icone-s);
	border: var(--pel-trait) solid var(--pel-roue-fond);
	border-top-color: currentColor;
	border-radius: var(--pel-radius-pill);
	animation: pel-roue var(--pel-duree-roue) var(--pel-courbe-lineaire) infinite;
}

@keyframes pel-roue {
	to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
	.pel-btn.is-loading::before {
		animation: none;
	}
}

/* --- pel-link ------------------------------------------------------------- */
.pel-link {
	color: var(--pel-terre-foncee);      /* 6,45:1 sur ivoire */
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: var(--pel-soulignement);
}

/* --- pel-badge : information portée par l'objet, non cliquable ------------ */
/* « Nouveau » et « Pack » sont le badge de base : une seule classe. */
.pel-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--pel-space-2xs);
	padding: var(--pel-space-3xs) var(--pel-space-xs);
	border: var(--pel-filet) solid transparent;
	border-radius: var(--pel-radius-pill);
	background: var(--pel-champagne-pale);
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
	font-weight: 600;
	line-height: var(--pel-lh-titre);
}

.pel-badge--stock {
	color: var(--pel-terre-foncee);      /* 5,63:1 */
}

.pel-badge--quote {
	border-color: var(--pel-champagne);  /* décoratif */
	background: var(--pel-sable);        /* encre douce : 8,12:1 */
}

/* Appartenance à une collection (planche 5 bis), sur une fiche ou une vignette. */
.pel-badge--collection {
	border-color: var(--pel-champagne);  /* décoratif ; encre douce : 7,96:1 */
}

/* --- pel-tag, pel-filter-chip : choix cliquable -------------------------- */
/* Même rendu, une seule règle (planche 4 : « pel-tag / pel-filter-chip »).
   pel-tag est un <button aria-pressed> ; pel-filter-chip, une case à cocher
   de formulaire (css/filtres.css). L'état actif ajoute une croix de retrait
   dans le libellé, pas seulement une couleur. */
.pel-tag,
.pel-filter-chip {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: var(--pel-space-2xs);
	min-height: var(--pel-cible);
	padding-inline: var(--pel-space-s);
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-pill);
	background: var(--pel-blanc);
	color: var(--pel-encre);
	font-family: var(--pel-font-texte);
	font-size: var(--pel-fs-champ);
	cursor: pointer;
}

/* Un lien pel-tag : pas de soulignement, comme le bouton. */
.pel-tag--lien {
	text-decoration: none;
}

.pel-tag.is-active,
.pel-filter-chip.is-active,
.pel-filter-chip:has(:checked) {
	border-color: var(--pel-terre-cuite);
	background: var(--pel-terre-cuite);
	color: var(--pel-blanc);
	font-weight: 600;
}

/* --- pel-field : étiquette au-dessus, jamais un placeholder seul ---------- */
.pel-field {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-2xs);
}

.pel-field__label {
	color: var(--pel-encre);
	font-size: var(--pel-fs-small);
	font-weight: 600;
}

/* Champ texte et liste déroulante native : une seule apparence. */
.pel-field__input,
.pel-select {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--pel-champ-h);
	padding-inline: var(--pel-space-s);
	border: var(--pel-filet) solid var(--pel-bord-champ);
	border-radius: var(--pel-radius-m);
	background: var(--pel-blanc);
	color: var(--pel-encre);
	font-family: var(--pel-font-texte);
	font-size: var(--pel-fs-champ);      /* 16 px : pas de zoom sur iOS */
}

/* Safari iOS : le champ date natif garde une largeur minimale à lui et
   ignore width et min-height (#253). Sans apparence native, il rentre dans
   son cadre et prend la hauteur des autres champs ; le calendrier s'ouvre
   toujours au toucher. */
.pel-field__input[type="date"] {
	display: block;
	min-width: 0;
	-webkit-appearance: none;
	appearance: none;
	text-align: start;
}

.pel-field__input[type="date"]::-webkit-date-and-time-value {
	min-height: 1lh;
	text-align: start;
}

/* Le calendrier natif avait l'air daté (Will, 16/10) : le champ entier
   l'ouvre (js/elements.js), et son icône prend la couleur du site — un
   masque, peint en terre cuite. Firefox garde son icône à lui. */
.pel-field__input[type="date"] {
	cursor: pointer;
}

.pel-field__input[type="date"]::-webkit-calendar-picker-indicator {
	width: var(--pel-space-m);
	height: var(--pel-space-m);
	margin-inline-start: var(--pel-space-xs);
	background: var(--pel-terre-cuite);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www%2Ew3%2Eorg/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www%2Ew3%2Eorg/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
	cursor: pointer;
}

.pel-field__input[type="date"]:hover {
	border-color: var(--pel-terre-cuite);
}

.pel-field__aide {
	color: var(--pel-gris-chaud);        /* 5,94:1 sur blanc, 5,61 sur ivoire */
	font-size: var(--pel-fs-small);
	line-height: var(--pel-lh-texte);
}

/* Erreur : la bordure change, mais le message écrit et son pictogramme
   portent l'information — jamais la couleur seule. */
.pel-field.is-invalid .pel-field__input,
.pel-field.is-invalid .pel-select,
.pel-field__input[aria-invalid="true"],
.pel-select[aria-invalid="true"] {
	border-color: var(--pel-terre-foncee);
}

.pel-field__erreur {
	display: flex;
	align-items: flex-start;
	gap: var(--pel-space-2xs);
	color: var(--pel-terre-foncee);
	font-size: var(--pel-fs-small);
	font-weight: 600;
}

.pel-field__icone {
	flex-shrink: 0;
	width: var(--pel-icone-s);
	height: var(--pel-icone-s);
	margin-top: var(--pel-space-3xs);
}

/* --- pel-fieldset --------------------------------------------------------- */
.pel-fieldset {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-s);
	margin: 0;
	padding: var(--pel-space-s);
	border: var(--pel-filet) solid var(--pel-lin);   /* regroupement, décoratif */
	border-radius: var(--pel-radius-m);
}

.pel-fieldset__legende {
	padding-inline: var(--pel-space-2xs);
	color: var(--pel-bronze);            /* 5,29:1 sur blanc */
	font-size: var(--pel-fs-small);
	font-weight: 600;
	letter-spacing: var(--pel-capitales-legende);
	text-transform: uppercase;
}

/* --- pel-checkbox : le libellé fait partie de la cible, 44 px de haut ----- */
.pel-checkbox {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--pel-space-2xs);
	min-height: var(--pel-cible);
	color: var(--pel-encre);
	font-size: var(--pel-fs-champ);
	cursor: pointer;
}

/* La vraie case reste dans le document, lue et cochée au clavier ; la case
   dessinée la suit par :checked et :focus-visible. */
.pel-checkbox__input {
	position: absolute;
	width: var(--pel-filet);
	height: var(--pel-filet);
	margin: 0;
	opacity: 0;
}

.pel-checkbox__case {
	box-sizing: border-box;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: var(--pel-case);
	height: var(--pel-case);
	border: var(--pel-filet) solid var(--pel-encre-douce);   /* 9,67:1 */
	border-radius: var(--pel-radius-s);
	background: var(--pel-blanc);
	color: var(--pel-blanc);
}

.pel-checkbox__coche {
	display: none;
	width: var(--pel-coche);
	height: var(--pel-coche);
}

.pel-checkbox__input:checked + .pel-checkbox__case {
	border-color: var(--pel-terre-cuite);
	background: var(--pel-terre-cuite);
}

.pel-checkbox:has(.pel-checkbox__input:checked) .pel-checkbox__coche {
	display: block;
}

.pel-checkbox__input:focus-visible + .pel-checkbox__case {
	outline: var(--pel-focus-epaisseur) solid var(--pel-focus-couleur);
	outline-offset: var(--pel-focus-decalage);
}

/* --- pel-qty : trois parties, un seul bloc -------------------------------- */
.pel-qty {
	display: inline-flex;
	align-items: stretch;
	overflow: hidden;
	border: var(--pel-filet) solid var(--pel-bord-champ);
	border-radius: var(--pel-radius-pill);
	background: var(--pel-blanc);
}

/* Le signe au centre : la base de Bricks impose text-align: inherit aux
   boutons, et Safari élargissait les parties (#255). */
.pel-qty__minus,
.pel-qty__plus {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--pel-cible);
	height: var(--pel-cible);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--pel-encre);
	font-family: var(--pel-font-texte);
	font-size: var(--pel-fs-h3);
	line-height: 1;
	text-align: center;
	cursor: pointer;
}

.pel-qty__minus:disabled,
.pel-qty__plus:disabled {
	color: var(--pel-gris-chaud);
	cursor: not-allowed;
}

.pel-qty__input {
	box-sizing: border-box;
	flex: none;
	width: var(--pel-qty-champ);
	min-width: 0;
	border: 0;
	border-inline: var(--pel-filet) solid var(--pel-lin);
	background: var(--pel-blanc);
	color: var(--pel-encre);
	font-family: var(--pel-font-texte);
	font-size: var(--pel-fs-champ);
	font-weight: 600;
	text-align: center;
}

/* Le bloc coupe ce qui dépasse (coins arrondis) : le contour de focus de ses
   parties passe à l'intérieur, sinon il serait rogné. */
.pel-qty__minus:focus-visible,
.pel-qty__input:focus-visible,
.pel-qty__plus:focus-visible {
	outline-offset: calc(var(--pel-focus-epaisseur) * -1);
}

/* --- pel-cta-band ------------------------------------------------------------ */
/* Bandeau d'appel de fin de page, sur sable (planche 3). Deux actions au plus :
   c'est le bouton qui porte l'accent, pas le bloc. */
.pel-cta-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pel-space-m);
	padding: var(--pel-space-xl);
	border: var(--pel-filet) solid var(--pel-champagne);   /* décoratif */
	border-radius: var(--pel-radius-l);
	background: var(--pel-sable);
}

.pel-cta-band__texte {
	flex: 1 1 calc(var(--pel-container) * 0.35);
	max-width: calc(var(--pel-container) * 0.5);
}

.pel-cta-band__titre {
	margin: 0 0 var(--pel-space-xs);
}

.pel-cta-band__phrase {
	margin: 0;
	color: var(--pel-encre-douce);
	line-height: var(--pel-lh-texte);
}

.pel-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pel-space-xs);
	margin: 0;
}

@media (max-width: 767px) {
	.pel-cta-band {
		padding: var(--pel-space-m);
	}
}