/*
 * Boutique Animal-Rit - DA2 « L'Écurie » (chantier C3)
 *
 * Consomme les tokens (assets/css/tokens.css) et les composants partagés
 * (assets/css/components.css, GELÉ) sans jamais redéfinir ces derniers : ce
 * fichier n'ajoute que ce qui manque pour les 10 écrans boutique (archive
 * générale, univers, sous-catégorie, fiche produit simple/variable/sans
 * description/rupture/chèque cadeau, Nouveautés, recherche/état vide).
 *
 * Règle du chantier : si un composant partagé (.card, .chip, .pager, .qty,
 * .notice, .empty...) devait changer de comportement, on ne le modifie pas
 * ici - on le signale et on contourne localement, ce que ce fichier fait
 * déjà pour la pagination WordPress (.pager .dots) et les liens en ligne
 * dans un message système (.notice a).
 */

/* -------------------------------------------------------------------
 * EN-TÊTE BOUTIQUE (template-parts/shop-filters.php)
 * Rythme vertical entre fil d'Ariane, titre, description et chips - les
 * composants eux-mêmes (.crumb, .u-measure, .filters/.chip) n'ont pas
 * d'opinion sur cet espacement, propre au contexte "en-tête de liste".
 * ------------------------------------------------------------------- */

.shop-head .crumb { margin-bottom: var(--sp-5); }
.shop-head h1 { margin-bottom: var(--sp-3); }
.shop-head__desc { margin-bottom: var(--sp-5); }
.shop-head__chips { margin-bottom: var(--sp-2); }

/* Fil d'Ariane de la fiche produit : pas de wrapper .shop-head, on le cale
   directement contre le bord haut de .shop-page. */
.shop-page > .crumb { margin-bottom: var(--sp-6); }

/* -------------------------------------------------------------------
 * BARRE DE TRI (dans .toolbar, composant partagé)
 * ------------------------------------------------------------------- */

.shop-sort { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.shop-sort .select { min-width: 11rem; }

/* -------------------------------------------------------------------
 * GRILLE DE PRODUITS
 * 2 cartes/ligne en mobile, 3 en tablette, 4 en desktop - cohérent avec la
 * grille de référence 4/8/12 colonnes de base.css (.l-grid).
 * ------------------------------------------------------------------- */

.shop-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-6) var(--sp-4);
	margin-bottom: var(--sp-7);
}
@media (min-width: 48rem) {
	.shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); }
}
@media (min-width: 64rem) {
	.shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Packshot dévitalisé en rupture de stock - discret, la pastille .badge--out
   suffirait seule mais l'image assombrie rend l'état visible en un coup
   d'œil dans une grille dense, sans dépendre de la lecture du texte. */
.card__plate--oos img { filter: grayscale(.35); opacity: .72; }

/* Pagination WordPress (paginate_links()) à l'intérieur du composant .pager
   partagé : WordPress sort ses propres classes (.page-numbers, .dots) que
   .pager ne connaît pas encore - .pager a/.pager span et [aria-current] du
   composant s'appliquent déjà correctement, il ne manque que les points de
   suspension, que le composant traite comme .is-gap. */
.pager .dots { border: 0; }

/* -------------------------------------------------------------------
 * BANDEAU UNIVERS/SOUS-CATÉGORIE (photos d'ambiance, chantier C7)
 * Placé par template-parts/shop-universe-hero.php, entre l'en-tête
 * (shop-filters.php) et la grille de produits, uniquement sur les univers
 * et sous-catégories qui ont une photo assignée dans
 * PLAN-EXECUTION-DA2-ECURIE-2026-07-30.md section 2. Le traitement de la
 * photo elle-même (filtre sombre, recadrage) reste entièrement dans
 * .ph/.ph--wide/.ph--tall (components.css, GELÉ) : ce bloc n'ajoute que la
 * mise en grille.
 * ------------------------------------------------------------------- */

.shop-hero { margin-bottom: var(--sp-7); }

.shop-hero--duo { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
.shop-hero--duo .ph--tall { aspect-ratio: 4 / 5; }
@media (min-width: 48rem) {
	.shop-hero--duo { grid-template-columns: 1.6fr 1fr; align-items: stretch; }
	.shop-hero--duo .ph { height: 100%; }
	.shop-hero--duo .ph--wide { aspect-ratio: auto; }
	.shop-hero--duo .ph--tall { aspect-ratio: auto; }
}

.shop-hero--single .ph--wide { aspect-ratio: 16 / 9; }
@media (min-width: 61rem) {
	.shop-hero--single .ph--wide { aspect-ratio: 21 / 8; }
}

/* Univers sans photo (Volailles et petits animaux) : traitement graphique
   plutôt qu'une image de banque - même esprit que .univ__th--graphic et
   .plate__im--graphic (aplat ivoire, filet doré, emblème), à l'échelle d'un
   bandeau et complété par une petite composition de packshots réels
   (abreuvoirs/mangeoires du catalogue, jamais une image inventée). */
.shop-hero--graphic {
	background: var(--c-plate);
	border: 1px solid var(--c-line-gold);
	border-radius: var(--r-sm);
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-6);

	--c-ink: var(--od-navy);
	--c-ink-soft: rgba(2, 6, 69, .68);
}
.shop-hero__emblem { width: clamp(3rem, 5vw, 4.25rem); aspect-ratio: 1; color: var(--od-navy); flex: none; }
.shop-hero__lead { flex: 1 1 16rem; min-width: 0; }
.shop-hero__lead .u-caps { margin-bottom: var(--sp-2); }
.shop-hero__packs { display: flex; gap: var(--sp-3); flex-wrap: wrap; flex: none; }
.shop-hero__pack {
	width: clamp(3.75rem, 7vw, 4.75rem);
	aspect-ratio: 1;
	background: var(--od-ivory);
	border: 1px solid rgba(2, 6, 69, .14);
	border-radius: var(--r-sm);
	display: grid;
	place-items: center;
	overflow: hidden;
	flex: none;
}
.shop-hero__pack img { width: 78%; height: 78%; object-fit: contain; mix-blend-mode: multiply; }

/* -------------------------------------------------------------------
 * MESSAGES SYSTÈME - lien en ligne dans un texte de .notice
 * (état "description non disponible", inc/woocommerce.php)
 * ------------------------------------------------------------------- */

.notice a { text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.notice a:hover, .notice a:focus-visible { color: var(--c-accent); }

/* -------------------------------------------------------------------
 * FICHE PRODUIT (single-product.php)
 * ------------------------------------------------------------------- */

.pdp {
	display: grid;
	gap: var(--sp-8);
	margin-bottom: var(--sp-2);
}
@media (min-width: 61rem) {
	.pdp { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-9); align-items: start; }
}

/* Galerie - la plaque ivoire réutilise .card__plate telle quelle (même
   traitement mix-blend-mode:multiply, même comportement dans les deux
   thèmes) : la fiche produit et la grille de cartes partagent le même
   langage visuel pour les packshots, à une taille différente seulement. */
.pdp-gallery__main img { width: 82%; height: 82%; object-fit: contain; }
.pdp-gallery__main--empty,
.pdp-gallery__main--gift { text-align: center; }
.pdp-gallery__main--gift .emblem { width: 42%; height: 42%; color: var(--c-ink); opacity: .82; }

.pdp-gallery__thumbs { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }
.pdp-gallery__thumb {
	display: inline-block;
	width: 4.5rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.pdp-gallery__thumb .card__plate { aspect-ratio: 1 / 1; }
.pdp-gallery__thumb .card__plate img { width: 82%; height: 82%; object-fit: contain; }
.pdp-gallery__thumb[aria-pressed="true"] .card__plate { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* Résumé */

.pdp-summary h1 { margin: var(--sp-3) 0 var(--sp-2); }

.pdp-price { font-size: 1.5rem; font-weight: 500; margin: var(--sp-4) 0 var(--sp-3); }
.pdp-price del { color: var(--c-ink-faint); font-weight: 300; margin-right: var(--sp-3); font-size: 1.05rem; }
.pdp-price ins { text-decoration: none; }

/* Pastille de stock - contexte en ligne (pas la corner .badge des cartes,
   qui est positionnée en absolu pour une plaque produit). */
.pdp-stock {
	display: inline-flex;
	align-items: center;
	padding: var(--sp-1) var(--sp-4);
	border-radius: var(--r-pill);
	font-size: var(--t-micro);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: var(--sp-5);
}
.pdp-stock--in { background: var(--c-muted); color: var(--c-ink-soft); }
.pdp-stock--out { background: color-mix(in srgb, var(--c-danger) 16%, transparent); color: var(--c-danger); }

.pdp-short { margin-bottom: var(--sp-5); font-size: var(--t-small); color: var(--c-ink-soft); }
.pdp-short p:not(:last-child) { margin-bottom: var(--sp-3); }

.pdp-sku { margin-top: var(--sp-5); font-size: var(--t-small); }

/* Formulaire d'ajout au panier - sortie coeur WooCommerce
   (woocommerce_template_single_add_to_cart(), gabarits
   single-product/add-to-cart/simple.php et variable.php) : on cible les
   classes stables du coeur plutôt que de dupliquer le gabarit, pour rester
   robuste aux mises à jour du plugin. Le sélecteur de quantité (.qty,
   boutons +/-) est une surcharge partagée avec le panier
   (woocommerce/global/quantity-input.php, chantier C5) déjà stylée par le
   composant .qty de components.css - rien à ajouter ici. */
.cart { margin-top: var(--sp-2); }

/* Un seul niveau de bouton orange par vue (règle de charte) : le bouton
   d'ajout au panier reproduit la recette visuelle de .btn (composant
   partagé) sans pouvoir porter sa classe - WooCommerce ne fournit aucun
   filtre pour ajouter une classe au bouton de fiche produit sans surcharger
   le gabarit coeur. */
.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	min-height: 44px;
	padding: var(--sp-3) var(--sp-6);
	margin-top: var(--sp-5);
	border-radius: var(--r-sm);
	border: 1px solid transparent;
	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);
	transition: background-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.single_add_to_cart_button:hover { background: var(--c-cta-hover); transform: translateY(-2px); box-shadow: var(--c-shadow-md); }
.single_add_to_cart_button:active { transform: translateY(0); }
.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled {
	background: var(--c-muted);
	color: var(--c-ink-faint);
	border-color: var(--c-line);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Variations (produits à poids/déclinaisons - Bonnet, Coussin Jerome...) */
.variations { width: 100%; margin-top: var(--sp-2); border-collapse: collapse; }
.variations tr { display: block; margin-bottom: var(--sp-4); }
.variations label {
	display: block;
	font-size: var(--t-micro);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-ink-soft);
	margin-bottom: var(--sp-2);
}
.variations select { max-width: 22rem; }
.reset_variations {
	display: inline-block;
	margin-left: var(--sp-4);
	font-size: var(--t-micro);
	color: var(--c-ink-faint);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.reset_variations:hover, .reset_variations:focus-visible { color: var(--c-ink); }

.woocommerce-variation-price { margin-bottom: var(--sp-4); font-size: 1.25rem; font-weight: 500; }
.woocommerce-variation-availability .stock { display: block; margin-top: var(--sp-2); font-size: var(--t-small); color: var(--c-ink-soft); }
.woocommerce-variation-availability .stock.out-of-stock { color: var(--c-danger); }

/* Description */

.pdp-description { border-top: 1px solid var(--c-line); padding-top: var(--sec-y); margin-top: var(--sec-y); }
.pdp-description h2 { margin-bottom: var(--sp-5); }
.pdp-description .entry-content p { margin-bottom: var(--sp-4); }
.pdp-description .entry-content p:last-child { margin-bottom: 0; }

/* Réassurance - composée localement (pas le template-part partagé avec la
   home), trois colonnes sobres sans icône, cohérent avec le reste de la
   fiche produit. */
.pdp-trust {
	border-top: 1px solid var(--c-line);
	padding-top: var(--sec-y);
	padding-bottom: var(--sec-y);
	display: grid;
	gap: var(--sp-6);
}
@media (min-width: 48rem) {
	.pdp-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pdp-trust__item p:first-child { margin-bottom: var(--sp-2); }

.pdp-related { border-top: 1px solid var(--c-line); padding-top: var(--sec-y); }
.pdp-related h2 { margin-bottom: var(--sp-6); }
.pdp-related .shop-grid { margin-bottom: 0; }