/*
 * Composants partagés Animal-Rit - DA2 « L'Écurie »
 *
 * FICHIER GELÉ à la fin du chantier C1. Les chantiers de la vague 2
 * (boutique, éditorial, tunnel, compte) consomment ces composants et ne les
 * modifient pas : toute évolution d'un composant partagé remonte en demande,
 * sinon quatre chantiers parallèles se marchent dessus.
 *
 * Règles de couleur non négociables, héritées de la charte :
 *   - un seul niveau de CTA orange par vue, toute action secondaire est en
 *     contour (.btn--ghost) ;
 *   - le doré ne porte jamais de texte en thème clair, il passe par
 *     --c-deco-ink qui est sa version lisible ;
 *   - aucun composant ne référence --od-* en direct, uniquement --c-*.
 */

/* -------------------------------------------------------------------
 * BOUTONS
 * ------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	min-height: 44px;
	padding: var(--sp-3) var(--sp-6);
	border-radius: var(--r-sm);
	font-size: var(--t-micro);
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-align: center;
	background: var(--c-cta);
	color: var(--c-cta-ink);
	border: 1px solid transparent;
	transition: background-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.btn:hover { background: var(--c-cta-hover); transform: translateY(-2px); box-shadow: var(--c-shadow-md); }
.btn:active { transform: translateY(0); }

.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line-strong); }
.btn--ghost:hover { background: transparent; border-color: var(--c-ink); box-shadow: none; color: var(--c-ink); }

.btn--accent { background: var(--c-accent); color: var(--c-accent-ink); }
.btn--accent:hover { background: var(--c-accent); filter: brightness(1.1); }

.btn--block { width: 100%; }
.btn--sm { min-height: 38px; padding: var(--sp-2) var(--sp-4); }

.btn[disabled], .btn[aria-disabled="true"] {
	background: var(--c-muted);
	color: var(--c-ink-faint);
	border-color: var(--c-line);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Lien souligné au filet, qui s'étire au survol. Motif récurrent de la DA2. */
.lnk {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	min-height: 44px;
	font-size: var(--t-micro);
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--c-line-strong);
	transition: gap var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.lnk:hover { gap: var(--sp-5); color: var(--c-accent); border-color: var(--c-accent); }

/* -------------------------------------------------------------------
 * EN-TÊTE DE SECTION - numéro, titre, chapeau aligné à droite
 * ------------------------------------------------------------------- */

.sec-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-4);
	margin-bottom: clamp(1.5rem, 3.4vw, 3rem);
}
.sec-head__no { font-family: var(--od-serif); font-size: var(--t-small); color: var(--c-deco-ink); letter-spacing: .1em; }
.sec-head__aside { max-width: 32ch; font-size: var(--t-small); color: var(--c-ink-soft); }
@media (min-width: 64rem) { .sec-head__aside { margin-left: auto; text-align: right; } }

/* -------------------------------------------------------------------
 * CARTE PRODUIT
 *
 * Le catalogue mélange des packshots fournisseurs de qualité très inégale,
 * sur fonds blancs, gris ou transparents. La plaque ivoire les unifie : elle
 * reste claire dans les deux thèmes, ce qui évite un packshot sur fond blanc
 * posé au milieu d'une page sombre.
 * ------------------------------------------------------------------- */

.card { display: flex; flex-direction: column; min-width: 0; }

/* La plaque reste claire dans les DEUX thèmes. Conséquence à ne pas rater :
 * tout ce qui est posé DESSUS (numéro, pastille d'état, bouton d'ajout) ne
 * doit pas suivre le thème de la page, sinon en thème sombre on obtient du
 * doré sur ivoire et une pastille invisible. La plaque redéfinit donc
 * localement les tokens d'encre sur leurs valeurs de contexte clair. */
.card__plate {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--c-plate);
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	overflow: hidden;
	display: grid;
	place-items: center;

	--c-ink: var(--od-navy);
	--c-ink-soft: rgba(2, 6, 69, .68);
	--c-ink-faint: rgba(2, 6, 69, .46);
	--c-deco-ink: var(--od-gold-ink);
	--c-line: rgba(2, 6, 69, .14);
	--c-line-strong: rgba(2, 6, 69, .32);
	--c-muted: rgba(2, 6, 69, .06);
	--c-bg: var(--od-ivory);
}

/* Les packshots fournisseurs arrivent presque tous détourés sur fond blanc
 * plein. Sans fusion, on obtient un rectangle blanc franc au milieu de la
 * plaque ivoire. Le mode multiply fait disparaître ce blanc dans l'ivoire.
 * Il fonctionne dans les deux thèmes précisément parce que la plaque, elle,
 * ne change pas. */
.card__plate img {
	width: 82%;
	height: 82%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform var(--dur-3) var(--ease);
}
.card:hover .card__plate img { transform: scale(1.06); }

.card__no {
	position: absolute;
	top: var(--sp-3);
	left: var(--sp-3);
	font-size: var(--t-micro);
	letter-spacing: .18em;
	color: var(--c-deco-ink);
}

/* Bouton d'ajout : apparaît au survol, mais reste TOUJOURS accessible au
 * clavier et sur écran tactile, où il n'y a pas de survol. */
.card__add {
	position: absolute;
	right: var(--sp-3);
	bottom: var(--sp-3);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--c-ink);
	color: var(--c-bg);
	display: grid;
	place-items: center;
	font-size: 1.25rem;
	line-height: 1;
	opacity: 0;
	transform: translateY(10px) scale(.8);
	transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.card:hover .card__add,
.card__add:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .card__add { opacity: 1; transform: none; } }

/* Titre borné à deux lignes : sans cela, un titre long décale le prix vers le
 * bas et les lignes de prix ne s'alignent plus d'une carte à l'autre dans la
 * grille. Le titre complet reste disponible en attribut title. */
.card__title {
	margin: var(--sp-4) 0 var(--sp-1);
	font-size: 1.02rem;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.25em * 2);
}
.card__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--sp-3);
	margin-top: auto;
	padding-top: var(--sp-2);
	border-top: 1px solid var(--c-line);
}
.card__cat {
	font-size: var(--t-micro);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-ink-soft);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Le prix ne se coupe jamais : un « 38,00 » suivi d'un « € » à la ligne est
 * un défaut visible immédiatement sur une grille de catalogue. */
.card__price { font-weight: 500; font-size: .98rem; white-space: nowrap; flex: 0 0 auto; }
.card__price del { color: var(--c-ink-faint); font-weight: 300; margin-right: var(--sp-2); }

/* Pastilles d'état posées sur la plaque */
.badge {
	position: absolute;
	top: var(--sp-3);
	right: var(--sp-3);
	padding: var(--sp-1) var(--sp-3);
	border-radius: var(--r-pill);
	font-size: var(--t-micro);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--c-ink);
	color: var(--c-bg);
}
/* Posées sur la plaque claire, les pastilles utilisent des valeurs de marque
 * fixes et non les tokens de thème : une pastille « Rupture » en gris de
 * thème sombre serait invisible sur l'ivoire. */
.badge--new { background: var(--od-eblue); color: var(--od-white); }
.badge--out { background: var(--od-ivory); color: var(--od-navy); border: 1px solid rgba(2, 6, 69, .32); }

/* -------------------------------------------------------------------
 * RAIL PANORAMIQUE (A5)
 * Le rayon défile latéralement pendant que la page descend. Sans JS, ou en
 * mouvement réduit, il redevient un simple défilement horizontal au doigt.
 * ------------------------------------------------------------------- */

.shelf { position: relative; overflow: hidden; margin-inline: calc(var(--pad-x) * -1); padding-inline: var(--pad-x); }
.shelf__track { display: flex; gap: clamp(.875rem, 1.8vw, 1.625rem); will-change: transform; }
.shelf__track > * { flex: 0 0 clamp(12.5rem, 22vw, 17.625rem); }

.shelf:not(.is-driven) { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.shelf:not(.is-driven) .shelf__track > * { scroll-snap-align: start; }
@media (max-width: 47.99rem) { .shelf__track > * { flex-basis: 66vw; } }

.shelf__hint { margin-top: var(--sp-5); }

/* -------------------------------------------------------------------
 * LIGNE DE LISTE UNIVERS (A6)
 * Remplace la grille de vignettes symétriques du site actuel.
 * ------------------------------------------------------------------- */

.univ { border-top: 1px solid var(--c-line); }
.univ__row {
	display: grid;
	grid-template-columns: 2.125rem minmax(0, 1fr) 4rem;
	align-items: center;
	gap: var(--sp-3) var(--sp-4);
	padding-block: var(--sp-4);
	border-bottom: 1px solid var(--c-line);
	transition: padding-left var(--dur-2) var(--ease);
}
.univ__row:hover { padding-left: var(--sp-4); }
.univ__idx { font-size: var(--t-micro); letter-spacing: .18em; color: var(--c-deco-ink); }
.univ__name {
	font-family: var(--od-serif);
	font-weight: 300;
	font-size: clamp(1.4rem, 3.4vw, 2.9rem);
	line-height: 1;
	letter-spacing: -.022em;
	transition: color var(--dur-2) var(--ease);
}
.univ__row:hover .univ__name { color: var(--c-accent); }
.univ__count { font-size: var(--t-micro); letter-spacing: .16em; color: var(--c-cta); vertical-align: super; margin-left: var(--sp-3); }
.univ__desc { grid-column: 2 / 4; font-size: var(--t-small); color: var(--c-ink-soft); max-width: 42ch; }
.univ__th { width: 4rem; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-sm); filter: grayscale(1) contrast(1.04); transition: filter var(--dur-2) var(--ease), transform var(--dur-3) var(--ease); }
.univ__row:hover .univ__th { filter: none; transform: scale(1.05); }
.univ__th img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 48rem) {
	.univ__row { grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr) 6.75rem; }
	.univ__desc { grid-column: auto; }
	.univ__th { width: 6.75rem; }
}

/* Univers sans photo (Volailles et petits animaux) : composition graphique
 * plutôt qu'une image de banque qui trancherait avec les photos du client. */
.univ__th--graphic {
	background: var(--c-plate);
	border: 1px solid var(--c-line-gold);
	display: grid;
	place-items: center;
	filter: none;
}
.univ__th--graphic .emblem { width: 58%; height: 58%; color: var(--od-navy); }

/* -------------------------------------------------------------------
 * PLANCHE GAMME (A7)
 * ------------------------------------------------------------------- */

.plates { display: grid; gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--r-sm); overflow: hidden; }
@media (min-width: 48rem) { .plates { grid-template-columns: 1fr 1fr; } }
.plate { background: var(--c-bg); padding: clamp(1.25rem, 2.6vw, 2.375rem); }
.plate__im { aspect-ratio: 16 / 11; overflow: hidden; border-radius: var(--r-sm); margin-bottom: var(--sp-5); }
.plate__im img { width: 100%; height: 100%; object-fit: cover; filter: var(--c-photo-filter); }
.plate h3 { margin: var(--sp-3) 0; }
.plate p { font-size: var(--t-small); color: var(--c-ink-soft); max-width: 40ch; }

/* -------------------------------------------------------------------
 * PHOTOGRAPHIE
 * ------------------------------------------------------------------- */

.ph { overflow: hidden; border-radius: var(--r-sm); }
.ph img { width: 100%; height: 100%; object-fit: cover; filter: var(--c-photo-filter); transition: filter var(--dur-2) var(--ease); }
.ph--tall { aspect-ratio: 3 / 4; }
.ph--wide { aspect-ratio: 16 / 9; }
.ph--square { aspect-ratio: 1; }
.ph__cap {
	display: inline-block;
	margin-top: var(--sp-2);
	font-size: var(--t-micro);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--c-ink-faint);
}

/* -------------------------------------------------------------------
 * FORMULAIRES (A8)
 * ------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label { font-size: var(--t-micro); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-soft); }
.field__hint { font-size: var(--t-small); color: var(--c-ink-faint); }
.field__err { font-size: var(--t-small); color: var(--c-danger); font-weight: 400; }

.input, .select, .textarea {
	width: 100%;
	min-height: 44px;
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-bg);
	color: var(--c-ink);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-sm);
	font-size: var(--t-body);
	font-weight: 300;
	transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--c-ink-faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-ink-soft); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 22%, transparent); outline: none; }
.textarea { min-height: 8rem; resize: vertical; line-height: var(--lh-body); }
.field[data-invalid] .input, .field[data-invalid] .select, .field[data-invalid] .textarea { border-color: var(--c-danger); }

.select {
	appearance: none;
	padding-right: var(--sp-8);
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 1.375rem center, right 1rem center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.check { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--t-small); cursor: pointer; min-height: 44px; }
.check input { width: 20px; height: 20px; margin-top: .28rem; accent-color: var(--c-accent); flex: 0 0 auto; }

/* Sélecteur de quantité */
.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); overflow: hidden; }
.qty button { width: 44px; min-height: 44px; display: grid; place-items: center; font-size: 1.1rem; color: var(--c-ink); transition: background-color var(--dur-1) var(--ease); }
.qty button:hover { background: var(--c-muted); }
.qty input { width: 3.25rem; border: 0; border-inline: 1px solid var(--c-line); text-align: center; background: transparent; font-weight: 500; }

/* -------------------------------------------------------------------
 * PAGINATION (A8)
 * ------------------------------------------------------------------- */

.pager { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: center; margin-top: var(--sp-7); }
.pager a, .pager span {
	min-width: 44px; min-height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	padding-inline: var(--sp-3);
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	font-size: var(--t-small);
	transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.pager a:hover { border-color: var(--c-ink); }
.pager [aria-current="page"] { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); font-weight: 500; }
.pager .is-gap { border: 0; }

/* -------------------------------------------------------------------
 * FIL D'ARIANE (A9)
 * ------------------------------------------------------------------- */

.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-faint); }
.crumb a { border-bottom: 1px solid transparent; transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.crumb a:hover { color: var(--c-ink); border-color: var(--c-line-strong); }
.crumb__sep { opacity: .55; }
.crumb [aria-current="page"] { color: var(--c-ink-soft); }

/* -------------------------------------------------------------------
 * FILTRES ET TRI (A10)
 * ------------------------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	min-height: 44px;
	padding: var(--sp-2) var(--sp-4);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	font-size: var(--t-small);
	white-space: nowrap;
	transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.chip:hover { border-color: var(--c-ink); }
.chip[aria-pressed="true"], .chip.is-on { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }

.toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; padding-block: var(--sp-4); border-bottom: 1px solid var(--c-line); }
.toolbar__count { font-size: var(--t-small); color: var(--c-ink-soft); }

/* -------------------------------------------------------------------
 * MESSAGES SYSTÈME (A11)
 * ------------------------------------------------------------------- */

.notice {
	display: flex; gap: var(--sp-3); align-items: flex-start;
	padding: var(--sp-4) var(--sp-5);
	border: 1px solid var(--c-line-strong);
	border-left-width: 3px;
	border-radius: var(--r-sm);
	background: var(--c-bg-elev);
	font-size: var(--t-small);
}
.notice--ok { border-left-color: var(--c-success); }
.notice--err { border-left-color: var(--c-danger); }
.notice--info { border-left-color: var(--c-accent); }
.notice__t { font-weight: 500; display: block; margin-bottom: var(--sp-1); }

/* État vide : catégorie sans produit, panier vide, recherche infructueuse.
 * Jamais un trou dans la page, toujours une sortie proposée. */
.empty { text-align: center; padding: clamp(2.5rem, 7vw, 5rem) var(--pad-x); border: 1px dashed var(--c-line-strong); border-radius: var(--r-md); }
.empty .emblem { width: 4rem; height: 4rem; margin: 0 auto var(--sp-5); color: var(--c-deco); opacity: .55; }
.empty h3 { margin-bottom: var(--sp-3); }
.empty p { color: var(--c-ink-soft); max-width: 46ch; margin: 0 auto var(--sp-5); font-size: var(--t-small); }

/* -------------------------------------------------------------------
 * TABLEAU (commandes, panier, adresses)
 * ------------------------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.table th, .table td { padding: var(--sp-4) var(--sp-3); text-align: left; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.table th { font-size: var(--t-micro); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-soft); }
.table__wrap { overflow-x: auto; }

/* -------------------------------------------------------------------
 * EMBLÈME
 * Masque CSS plutôt que balise image : la couleur suit currentColor, donc
 * le thème, sans avoir à maintenir deux fichiers SVG.
 * ------------------------------------------------------------------- */

.emblem {
	-webkit-mask: var(--emblem-src) center / contain no-repeat;
	mask: var(--emblem-src) center / contain no-repeat;
	background: currentColor;
	flex: 0 0 auto;
}

/* Filet doré décoratif, motif récurrent de la DA2 */
.rule-gold { height: 1px; border: 0; background: linear-gradient(90deg, var(--c-line-gold), transparent); }