/**
 * Panier COD public — peau du panier (Phase 37).
 *
 * Chargée UNIQUEMENT si le gérant a activé le panier. Transitions à propriétés
 * NOMMÉES (jamais `all` — cliquet statique 18.1) ; `prefers-reduced-motion`
 * honoré (Phase 19 : le mouvement part, l'acquittement reste).
 *
 * 🚨 DEUX RÈGLES QUI ONT COÛTÉ UN BOUTON ILLISIBLE (contraste mesuré 1,05:1) :
 *
 * 1. **Le panier ne porte JAMAIS une classe du thème** (`button`, `wp-element-*`…).
 *    Astra imprime son CSS de boutons en `<style>` inline, donc APRÈS nos
 *    feuilles : à spécificité égale il gagne, et son fond de marque écrase le
 *    nôtre. D'où le réarmement `.aod-cart__drawer button` / `.aod-cart__box
 *    button` en (0,1,1) — il bat `button` (0,0,1) ET `.button` (0,1,0) quel que
 *    soit l'ordre des feuilles.
 * 2. **Aucun fond actionnable n'est `transparent`.** Un fond transparent fait
 *    dépendre le contraste de ce qu'il y a derrière, donc du thème du clone.
 *
 * Les tokens `--ac-*` recopient EXACTEMENT ceux du formulaire COD (`--sh-*`,
 * aod-cod-form.css). La duplication est assumée : cette feuille se charge sur
 * toute la boutique quand celle du formulaire ne se charge que sur la fiche
 * produit. Le cliquet `tests/unit/test-panier-peau.php` compare les deux et
 * rougit si elles divergent — la dérive est bruyante, pas silencieuse.
 */

:root {
	--ac-ink: #1a1a1a;
	--ac-ink-2: #616161;
	--ac-muted: #8a8a8a;
	--ac-line: #e1e3e5;
	--ac-line-soft: #f0f0f1;
	--ac-surface: #ffffff;
	--ac-surface-sub: #f6f6f7;
	--ac-accent: #008060;
	--ac-accent-dark: #006e52;
	--ac-accent-wash: #f0faf6;
	--ac-danger: #d72c0d;
	--ac-r-sm: 6px;
	--ac-r-md: 8px;
	--ac-r-lg: 12px;
	/* Surimpression des cartes (2026-09-08, demande owner) : blanc à 10 %
	 * d'opacité, en jeton plutôt qu'en littéral (porté de Template-Full). */
	--ac-quick-bg: rgba(255, 255, 255, .1);
}

/* `display:flex` écraserait le `display:none` que l'attribut `hidden` donne
 * par défaut : sans ces règles, le drawer « caché » resterait affiché ET
 * intercepterait les clics de toute la colonne droite. Trouvé par le témoin
 * 35.3 — pas par la relecture. */
.aod-cart__fab[hidden],
.aod-cart__overlay[hidden],
.aod-cart__drawer[hidden],
.aod-cart__box[hidden] {
	display: none;
}

/* ---- Réarmement défensif : le thème s'arrête ici ----
 *
 * Une classe À NOUS sur chaque bouton, jamais un sélecteur d'ancêtre. La
 * première version écrivait `.aod-cart__drawer button` (0,1,1) : ça battait
 * bien le thème, mais aussi **nos propres règles de composant** (0,1,0) — et
 * « Commander » est ressorti sans fond. Vu à l'écran, pas à la relecture.
 *
 * Ici tout le monde est à (0,1,0) — sauf `.aod-cart__qty button` (0,1,1), qui
 * a son homologue exact plus bas. Les règles de composant viennent APRÈS dans
 * la feuille : à spécificité égale, elles gagnent. Et (0,1,0) bat le `button`
 * nu (0,0,1) du thème quel que soit l'ordre des feuilles — la seule prise
 * qu'Astra avait, `.button` (0,1,0), a disparu de notre markup. */
.aod-cart__close,
.aod-cart__order,
.aod-cart__remove,
.aod-cart__qty button {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

/* ---- Icônes du catalogue (37.2) ----
 * Mêmes SVG Phosphor que la sidebar de `/gestion`, rendus par `AOD_COD_Icon`.
 * `currentColor` : l'icône suit la couleur de son bouton, jamais l'inverse —
 * c'est ce qui permet au même fichier de servir sur fond vert et sur fond blanc.
 * `display:block` : sans lui, un SVG est en ligne et traîne l'espace de la
 * ligne de base, ce qui décentre le glyphe dans un bouton carré. */
.aod-i {
	display: block;
	flex: 0 0 auto;
	fill: currentColor;
}

/* ---- Bouton flottant ---- */

.aod-cart__fab {
	position: fixed;
	inset-block-end: 18px;
	inset-inline-end: 18px;
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 50%;
	background: var(--ac-accent);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
	transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.aod-cart__fab:hover { background: var(--ac-accent-dark); transform: scale(1.05); }
.aod-cart__fab:focus-visible { outline: 2px solid var(--ac-ink); outline-offset: 3px; }

/* Encre neutre, jamais rouge : un panier qui se remplit est une bonne
 * nouvelle, pas une alerte. Le rouge ne dit qu'une chose ici — indisponible. */
.aod-cart__badge {
	position: absolute;
	inset-block-start: -4px;
	inset-inline-end: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 9999px;
	background: var(--ac-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--ac-surface);
}

/* ---- Panneau ---- */

.aod-cart__overlay {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgba(0, 0, 0, .5);
}

.aod-cart__drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	width: min(92vw, 420px);
	background: var(--ac-surface);
	color: var(--ac-ink);
	box-shadow: 0 0 40px rgba(0, 0, 0, .20);
}
body.aod-cart-open { overflow: hidden; }

.aod-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px;
	border-bottom: 1px solid var(--ac-line);
}
.aod-cart__title {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ac-ink);
}

.aod-cart__close {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--ac-r-md);
	background: none;
	color: var(--ac-ink-2);
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
/* 🚨 `:focus` est OBLIGATOIRE ici, pas seulement `:focus-visible`. Le thème
 * porte un `button:focus{background:…}` en (0,1,1), qui bat notre (0,1,0) : à
 * l'ouverture du panneau le focus part sur ce bouton, et il ressortait en
 * rectangle bleu de marque. Mesuré, pas deviné. Nos états sont en (0,2,0). */
.aod-cart__close:hover,
.aod-cart__close:focus { background: var(--ac-surface-sub); color: var(--ac-ink); }
.aod-cart__close:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; }

.aod-cart__list {
	flex: 1;
	overflow-y: auto;
	padding: 4px 16px;
}
/* ---- Plafond de lignes atteint / dépassé (D35) ----
   UN seul habillage pour les DEUX producteurs : le bandeau du tiroir (refus
   qu'on vient d'opposer, posé par `open( note )`) et la ligne peinte par
   `paintInto()` quand le serveur a écrêté. Deux peaux pour un même message
   diraient au lecteur qu'il s'agit de deux choses. */
.aod-cart__cap {
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid var(--ac-line);
	border-inline-start: 3px solid var(--ac-danger);
	border-radius: var(--ac-r-sm);
	background: var(--ac-surface-sub);
	color: var(--ac-ink);
	font-size: 13px;
	line-height: 1.45;
}

.aod-cart__empty {
	margin: 0;
	padding: 32px 0;
	color: var(--ac-ink-2);
	text-align: center;
	font-size: 14px;
}

/* ---- Ligne de panier (panneau ET bloc — même composant) ----
 * DEUX colonnes, pas cinq : la grille à 5 colonnes écrasait le nom jusqu'à
 * « Bas… » dès 390 px. Cette structure tient sans média-query et se met en
 * miroir toute seule en RTL. */

.aod-cart__line {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 12px;
	align-items: start;
	padding: 12px 0;
	border-bottom: 1px solid var(--ac-line-soft);
}
.aod-cart__line:last-child { border-bottom: 0; }
.aod-cart__line.is-dead { opacity: .55; }

.aod-cart__img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--ac-r-md);
	background: var(--ac-surface-sub);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
	display: block;
}

.aod-cart__body { min-width: 0; }

.aod-cart__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

/* Deux lignes, jamais une ellipse : en arabe, une troncature ronge le DÉBUT
 * d'un nom latin (« …rban Flex ») et rend le produit méconnaissable. */
.aod-cart__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ac-ink);
}
.aod-cart__opts {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--ac-ink-2);
}
.aod-cart__dead {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ac-danger);
}

.aod-cart__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 10px;
}

/* Pilule : un contrôle qu'on manipule au pouce doit dire « bouton » avant
 * d'être lu. 36 px de haut, cibles de 36×36. */
.aod-cart__qty {
	display: inline-flex;
	align-items: center;
	height: 36px;
	border: 1px solid var(--ac-line);
	border-radius: 9999px;
	background: var(--ac-surface-sub);
	overflow: hidden;
}
.aod-cart__qty button {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	color: var(--ac-ink);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.aod-cart__qty button:hover,
.aod-cart__qty button:focus { background: var(--ac-line); color: var(--ac-ink); }
.aod-cart__qty button:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: -2px; }
.aod-cart__qtyval {
	min-width: 28px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ac-ink);
}

.aod-cart__linetotal {
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--ac-ink);
}

.aod-cart__remove {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-block-start: -4px;
	margin-inline-end: -6px;
	border-radius: var(--ac-r-sm);
	background: none;
	/* Encre secondaire et non `--ac-muted` : mesuré à 3,45:1, le gris atténué
	 * ne tenait le seuil que si on classait cette icône en contenu NON textuel.
	 * L'ambiguïté ne vaut pas le gain visuel — #616161 donne 5,92:1. */
	color: var(--ac-ink-2);
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.aod-cart__remove:hover,
.aod-cart__remove:focus { background: var(--ac-surface-sub); color: var(--ac-danger); }
.aod-cart__remove:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; }

/* ---- Pied du panneau ---- */

.aod-cart__foot {
	padding: 14px 16px 16px;
	border-top: 1px solid var(--ac-line);
	background: var(--ac-surface);
}
.aod-cart__totalrow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	color: var(--ac-ink-2);
}
.aod-cart__totalrow strong {
	font-size: 16px;
	font-weight: 700;
	color: var(--ac-ink);
}
.aod-cart__note {
	margin: 6px 0 12px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--ac-ink-2);
}

.aod-cart__order {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 14px 16px;
	border-radius: var(--ac-r-md);
	background: var(--ac-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .15s ease, opacity .15s ease;
}
.aod-cart__order:hover,
.aod-cart__order:focus { background: var(--ac-accent-dark); color: #fff; }
.aod-cart__order:focus-visible { outline: 2px solid var(--ac-ink); outline-offset: 2px; }
.aod-cart__order[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- Surimpression « Ajouter au panier » sur les cartes produit ----
 * Pilule BLANCHE et non bande sombre translucide : ce template vend aussi
 * bien des baskets sur fond jaune que des parfums sur fond noir, et la bande
 * sombre devenait illisible sur les photos sombres. */

.aod-cart__qwrap { position: relative; display: block; }

/* Groupe empilé : « Ajouter au panier » PUIS « Commander » (2026-09-08, demande
 * owner).
 *
 * 🚨 DEUX EMPLACEMENTS SELON L'APPAREIL (2026-09-08, demande owner) — décidé par
 * le JS à la construction (`initQuickAdd`, `(hover: none)`), jamais par une media
 * query CSS :
 *   · souris (`hover: hover`) — le groupe reste nesté dans `.aod-cart__qwrap` et
 *     flotte SUR l'image, révélé au survol (voir plus bas) ;
 *   · tactile (`hover: none`) — le groupe est un enfant DIRECT de la carte,
 *     APRÈS `.astra-shop-summary-wrap` (donc après le prix).
 * Ce bloc ne porte que ce que les DEUX emplacements partagent. */
.aod-cart__quickgrp {
	display: flex;
	flex-direction: column;
	gap: 6px;
	transition: opacity .18s ease;
}
/* ---- Emplacement SOURIS : surimpression sur l'image ---- */
.aod-cart__qwrap .aod-cart__quickgrp {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 10px;
	z-index: 2;
}
/* ---- Emplacement TACTILE : bloc statique, sous le prix ----
 * ⛔ Marge et écart réduits (2026-09-08, demande owner). */
li.product > .aod-cart__quickgrp,
.aod-cart__sugcard > .aod-cart__quickgrp {
	margin-block-start: 8px;
	gap: 4px;
}
/*
 * ⚠️ Le groupe porte la POSITION ; chaque bouton garde SA peau dans SON PROPRE
 * bloc `{ … }` — R3 de `test-panier-peau.php` lit le sélecteur `quickadd`
 * ISOLÉ (jamais combiné par une virgule) pour vérifier qu'il déclare un fond
 * explicite ; un bloc combiné le rendrait introuvable.
 *
 * ⛔ PLEINE LARGEUR (demande owner) : chaque bouton égale la largeur de son
 * groupe, donc de la carte.
 * 🎨 Blanc transparent, opacité 10 % (demande owner, ajustée deux fois — 70 %
 * puis 10 %), au lieu de 94 %.
 * ⛔ Coins DROITS par défaut (demande owner) — nécessaire à la souris : les
 * boutons touchent les deux bords de l'IMAGE.
 * 🎨 Coins ARRONDIS au doigt (demande owner, 2026-09-08) — le groupe ne touche
 * plus l'image mais la carte, sous un texte : l'arrondi y est attendu. */
.aod-cart__quickadd {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border-radius: 0;
	background: var(--ac-quick-bg);
	color: var(--ac-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .18s ease, color .18s ease;
}
/* Même peau que « Ajouter » : une paire, pas deux boutons étrangers. */
.aod-cart__quickorder {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border-radius: 0;
	background: var(--ac-quick-bg);
	color: var(--ac-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .18s ease, color .18s ease;
}
/* 🎨 COULEUR + PADDING RÉDUIT au doigt (2026-09-08, demande owner) — le blanc
 * à 10 % devenait quasi invisible sous le prix (fond blanc de la carte). Fond
 * plein `--ac-accent`. `display:flex` + centrage : nécessaire pour que le
 * texte reste centré si un plancher de hauteur s'ajoute plus tard. */
li.product > .aod-cart__quickgrp .aod-cart__quickadd,
li.product > .aod-cart__quickgrp .aod-cart__quickorder,
.aod-cart__sugcard > .aod-cart__quickgrp .aod-cart__quickadd,
.aod-cart__sugcard > .aod-cart__quickgrp .aod-cart__quickorder {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	border-radius: var(--ac-r-md);
	background: var(--ac-accent);
	color: #fff;
	box-shadow: none;
}
li.product > .aod-cart__quickgrp .aod-cart__quickadd:hover,
li.product > .aod-cart__quickgrp .aod-cart__quickorder:hover,
.aod-cart__sugcard > .aod-cart__quickgrp .aod-cart__quickadd:hover,
.aod-cart__sugcard > .aod-cart__quickgrp .aod-cart__quickorder:hover {
	background: var(--ac-accent-dark);
	color: #fff;
}
.aod-cart__quickadd:hover,
.aod-cart__quickorder:hover { background: var(--ac-accent); color: #fff; }
.aod-cart__quickadd:focus-visible,
.aod-cart__quickorder:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; }
.aod-cart__quickadd.is-added,
.aod-cart__quickadd.is-added:hover {
	background: var(--ac-accent-wash);
	color: var(--ac-accent-dark);
}

/* Le survol n'existe qu'à la souris : au tactile le groupe est PERMANENT
 * (mobile d'abord — l'apparition au survol est la variante desktop). */
@media (hover: hover) {
	.aod-cart__qwrap .aod-cart__quickgrp { opacity: 0; pointer-events: none; }
	li.product:hover .aod-cart__quickgrp,
	.aod-cart__sugcard:hover .aod-cart__quickgrp,
	.aod-cart__qwrap:hover .aod-cart__quickgrp,
	.aod-cart__quickgrp:focus-within { opacity: 1; pointer-events: auto; }
}

/* ---- Bouton natif WooCommerce des grilles, retiré (2026-09-08, demande owner) ----
 * `.aod-loop-cta` (posé par `AOD_COD_No_Tunnel::loop_cta_args`) est un TROISIÈME
 * « Commander » sous le prix, en plus des deux boutons de `.aod-cart__quickgrp`
 * sur l'image — panier actif, ils couvrent déjà « Ajouter au panier » et
 * « Commander ». Porté de Template-Full.
 * ⛔ Cette feuille n'est chargée QUE si `AOD_COD_Form::cart_enabled()` : la
 * règle ne s'applique jamais sur un clone au panier éteint, où `.aod-loop-cta`
 * reste le seul contrôle d'achat de la grille.
 * ⚠️ SPÉCIFICITÉ (0,2,2) : un simple `.aod-loop-cta` (0,1,0) perd contre le CSS
 * inline d'Astra (`.woocommerce-js a.button`, (0,2,1)) — mesuré, le bouton
 * restait affiché. */
body a.aod-loop-cta.aod-loop-cta { display: none; }

/* ---- Panneau de variantes INLINE dans la carte (refonte 2026-09-10) ----
 * Remplace la fenêtre flottante (tiroir bas puis boîte centrée, Phases 35-37,
 * retirées) : le choix s'ouvre DANS la carte de la grille, sous les infos
 * produit — jamais un composant à part, jamais de fenêtre.
 *
 * Technique d'expansion : `grid-template-rows: 0fr → 1fr` sur le conteneur
 * externe, pas une hauteur mesurée en JS — le panneau s'ouvre juste, quelle
 * que soit la longueur du texte (une traduction AR plus longue, une section
 * de plus) sans qu'aucun script n'ait à la mesurer. `.aod-cart__inline-clip`
 * est la seule cellule de la grille et porte le SEUL `overflow:hidden` : sans
 * lui, `0fr` ne clippe rien et le contenu déborderait pendant la transition. */
.aod-cart__inline {
	display: grid;
	grid-template-rows: 0fr;
	margin-block-start: 10px;
	transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1);
}
.aod-cart__inline.is-open { grid-template-rows: 1fr; }
.aod-cart__inline-clip { overflow: hidden; min-height: 0; }
.aod-cart__inline-body {
	padding-block-start: 14px;
	border-block-start: 1px solid var(--ac-line-soft);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .24s ease .05s, transform .24s ease .05s;
}
.aod-cart__inline.is-open .aod-cart__inline-body { opacity: 1; transform: translateY(0); }
.aod-cart__inline-load {
	margin: 0;
	padding: 8px 0;
	color: var(--ac-ink-2);
	font-size: 12.5px;
	text-align: center;
}

.aod-cart__inline-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
}
.aod-cart__inline-add {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 16px;
	border: 0;
	border-radius: var(--ac-r-md);
	background: var(--ac-accent);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .01em;
	cursor: pointer;
	transition: background-color .18s ease, transform .12s ease;
}
.aod-cart__inline-add:hover,
.aod-cart__inline-add:focus { background: var(--ac-accent-dark); }
.aod-cart__inline-add:focus-visible { outline: 2px solid var(--ac-accent-dark); outline-offset: 2px; }
.aod-cart__inline-add:active { transform: scale(.98); }
/* État « chargement » : le libellé s'efface, un anneau prend sa place — le
 * bouton garde sa taille (l'anneau est en position absolue, pas en flux). */
.aod-cart__inline-add.is-loading .aod-cart__inline-add-label { opacity: 0; }
.aod-cart__inline-add.is-loading { cursor: default; }
.aod-cart__inline-add.is-loading::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .4);
	border-block-start-color: #fff;
	animation: aod-cart-spin .6s linear infinite;
}
.aod-cart__inline-add.is-added { background: var(--ac-accent-dark); cursor: default; pointer-events: none; }
@keyframes aod-cart-spin { to { transform: rotate(360deg); } }

.aod-cart__inline-msg {
	margin: 8px 0 0;
	min-height: 1.2em;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ac-danger);
}
.aod-cart__inline-msg:empty { min-height: 0; }
/* Confirmation discrète, sous le bouton — pas une bannière : « Article ajouté
 * au panier. », déjà traduite FR/AR (même chaîne que `added_short`, la variante
 * courte du LIBELLÉ du bouton). */
.aod-cart__inline-ok {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 10px 0 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ac-accent-dark);
	animation: aod-cart-fadein .2s ease;
}
.aod-cart__inline-ok .aod-i { width: 15px; height: 15px; flex: 0 0 auto; }
@keyframes aod-cart-fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---- Bloc de gestion sur la page du formulaire ----
 * Même largeur, même bordure, même rayon que `.aod-cod` : les deux cartes
 * doivent se lire comme une pile, pas comme deux blocs étrangers. */

.aod-cart__box {
	box-sizing: border-box;
	max-width: 560px;
	margin: 24px 0 -8px;
	padding: 16px;
	border: 1px solid var(--ac-line);
	border-radius: var(--ac-r-lg);
	background: var(--ac-surface);
	color: var(--ac-ink);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.aod-cart__box-title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ac-ink);
}
.aod-cart__box .aod-cart__list { padding: 0; }
.aod-cart__box .aod-cart__totalrow {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--ac-line);
}
.aod-cart__box .aod-cart__note { margin: 6px 0 0; }

/* ---- Panier + formulaire côte à côte, sur colonne assez large (2026-09-10,
 * demande owner) ----
 * `.aod-cart__checkout` (posé par `ensureBox()`) regroupe les deux cartes —
 * empilées par défaut (mobile ET tablette), côte à côte à partir d'un
 * viewport assez large.
 *
 * ⚠️ REVIREMENT (même jour) : la première version utilisait une REQUÊTE DE
 * CONTENEUR (`container-type` posé sur `.aod-cart__checkout` lui-même) plutôt
 * qu'un point de rupture viewport — parce que la colonne qui contient tout ça
 * (`.summary.entry-summary` sur Astra) empile galerie+résumé sous 922 px puis
 * les met côte à côte au-delà (cf. le commentaire en tête de `.aod-cod`,
 * aod-cod-form.css), donc sa largeur réelle ne suit pas le viewport de façon
 * monotone. L'idée tenait en théorie ; **mesurée par l'owner, elle est restée
 * empilée après un simple rechargement** — sans navigateur ici pour
 * diagnostiquer si la cause est un seuil trop haut ou un défaut de support de
 * `@container`, mieux vaut revenir à un point de rupture VIEWPORT classique :
 * la même technique que `.aod-cod` (922 px) juste au-dessus dans ce fichier,
 * déjà éprouvée sur ce gabarit précis. 1024 px, un cran au-dessus du
 * basculement galerie/résumé d'Astra, pour laisser le résumé déjà élargi
 * avant d'y ajouter une seconde colonne.
 * ⚠️ Seuil ENCORE estimé, pas mesuré (toujours aucun navigateur disponible
 * ici) — à confirmer en responsive sur le clone, cf. TEMPLATE.md §5. */
@media (min-width: 1024px) {
	.aod-cart__checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
		align-items: start;
		gap: 24px;
		/* `.aod-cod` perd son propre `margin: 24px auto` ci-dessous (il
		 * centrerait au lieu de remplir la colonne) : la coquille porte donc
		 * elle-même l'espace qui la séparait de ce qui précède. */
		margin-block-start: 24px;
		/* 🚨 CENTRÉ, PAS ÉTIRÉ (2026-09-10, retour owner) : sans plafond, la
		 * grille remplit toute la largeur de la colonne résumé — sur un
		 * conteneur large, le formulaire (qui prend tout l'espace restant,
		 * `1fr`) devient démesuré pendant que le panier reste collé au bord
		 * droit. 960px ≈ 640px de formulaire (son plafond historique en solo,
		 * cf. `.aod-cod` plus haut dans aod-cod-form.css) + 300px de panier +
		 * l'écart : les deux cartes gardent leur gabarit connu, juste
		 * accolées, et l'ensemble se centre dans ce qui reste de place.
		 * `margin-inline` : centré pareil en RTL, sans règle miroir. */
		max-width: 960px;
		margin-inline: auto;
	}
	/* Les deux cartes perdent leurs marges/plafonds pensés pour un empilement
	 * pleine largeur : en grille, c'est la colonne qui donne la largeur — une
	 * marge `auto` centrerait la carte AU LIEU de la faire remplir sa colonne.
	 * `order` place le formulaire à GAUCHE, le panier à DROITE quel que soit
	 * l'ordre du DOM (le panier reste avant le formulaire dans la source, pour
	 * l'empilement mobile — cf. `ensureBox()`). */
	.aod-cart__checkout .aod-cod {
		order: 1;
		margin: 0;
		max-width: none;
	}
	.aod-cart__checkout .aod-cart__box {
		order: 2;
		margin: 0;
		max-width: none;
	}
}

/* ---- La fiche du produit-hôte s'efface derrière le panier (2026-09-09) ----
 * « Commander » n'a pas encore de page dédiée (Phase 77, absente ici) : il
 * atterrit sur la fiche du 1ᵉʳ article du panier. Sans cette règle, cette
 * fiche affichait SA PROPRE image/titre/prix au-dessus de `.aod-cart__box` —
 * qui peut lister PLUSIEURS produits différents. L'acheteur lisait deux
 * histoires contradictoires : « vous commandez CE produit » (en haut) et
 * « votre commande contient CES produits » (juste en dessous).
 * `body.aod-cart-checkout` (posée par `renderBox()`, jamais ailleurs) est vraie
 * exactement quand `.aod-cart__box` est visible — les mêmes sélecteurs que ceux
 * qui décideraient d'afficher le bloc décident ici de masquer la fiche.
 * Classes du CŒUR WooCommerce (pas du thème) : valable sur Astra comme sur tout
 * autre thème classique du catalogue (§4 de TEMPLATE.md).
 * ⚠️ Le formulaire (`.aod-cod`) et sa page (galerie/prix/titre) partagent le
 * MÊME état côté serveur — rien n'est retiré du DOM, seulement masqué : un
 * visiteur qui vide son panier retrouve la fiche intacte, sans rechargement
 * (`renderBox()` retire la classe symétriquement).
 * 🚨 `!important` DÉLIBÉRÉ, et mesuré : `.single-product-category` restait
 * affiché SANS lui. Astra la réarme via `.woocommerce-js div.product
 * div.summary .single-product-category` — spécificité (0,4,2), qui bat notre
 * (0,2,0) sans même parler d'ordre de feuilles. Un thème classique différent
 * (§4 : GeneratePress, Neve, Blocksy, Kadence) réarmera ces mêmes classes du
 * cœur Woo à SA propre spécificité, inconnue ici — courir après spécificité
 * par spécificité, thème par thème, ne finit jamais. Ce n'est pas un
 * composant qu'on habille (où l'on veut rester dépassable) : c'est une
 * consigne « ne s'affiche jamais dans cet état », le cas d'usage exact de
 * `!important`.
 * ⚠️ `.ast-onsale-card` est SPÉCIFIQUE À ASTRA (thème de référence du template,
 * §4) : sur la fiche produit, Astra ne rend PAS le badge `.onsale` générique du
 * cœur Woo — il le REMPLACE par ce markup à lui (mesuré : `.onsale` est absent
 * du HTML servi, seul `.ast-onsale-card` existe). Positionné en absolu au
 * coin de `#product-{id}` — pas dans la galerie — masquer la galerie seule le
 * laissait flotter, superposé au fil d'ariane. Un autre thème classique (§4)
 * qui réimplémente aussi son propre badge portera un autre nom : ce sélecteur
 * ne le couvrira pas, et c'est un residuel assumé plutôt qu'une course sans fin
 * derrière chaque thème possible. */
body.aod-cart-checkout .woocommerce-product-gallery,
body.aod-cart-checkout span.onsale,
body.aod-cart-checkout .ast-onsale-card,
body.aod-cart-checkout .single-product-category,
body.aod-cart-checkout .summary.entry-summary > .product_title,
body.aod-cart-checkout .summary.entry-summary > .price,
body.aod-cart-checkout .summary.entry-summary > .woocommerce-product-rating,
body.aod-cart-checkout .summary.entry-summary > .product_meta,
body.aod-cart-checkout .summary.entry-summary > .woocommerce-product-details__short-description {
	display: none !important;
}

/* ---- Le sélecteur de variantes du produit-hôte s'efface aussi (2026-09-10,
 * demande owner) ----
 * ⚠️ REVIREMENT sur la règle du 2026-09-09 juste en dessous, qui gardait ce
 * bloc VISIBLE à dessein. La raison d'alors ne tient plus : `handle_submit()`
 * côté JS (`aod-cod-form.js`) lit déjà `window.aodCart.items()` dès que le
 * panier a des lignes (`usedCart`) — la sélection faite ICI, dans ce panneau,
 * n'a donc plus aucun effet sur ce qui part réellement en commande. L'acheteur
 * pouvait choisir une couleur, une quantité, cliquer « Confirmer la commande »,
 * et voir partir tout autre chose : les lignes de SON panier, pas son choix
 * ici. Une UI qui reste interactive sans rien piloter n'est pas un détail
 * visuel, c'est un mensonge sur ce que le clic va faire.
 * `#aod-options` — le pickhint, les cartes d'offres, les sections de
 * variantes — et son bouton `.aod-cod__addcart` (qui LISAIT cette sélection
 * pour ajouter le produit-hôte) partent donc ensemble : rien à choisir dans un
 * panneau invisible. Le récapitulatif (`.aod-cod__summary`, plus bas dans le
 * formulaire) reste, lui, INTACT — il est déjà piloté par
 * `window.aodCart.total()`, jamais par ce panneau. */
body.aod-cart-checkout #aod-options,
body.aod-cart-checkout .aod-cod__config-msg,
body.aod-cart-checkout .aod-cod__addcart {
	display: none !important;
}

/* ---- La colonne résumé reprend la place de la galerie masquée (2026-09-10,
 * retour owner : « le duo panier/formulaire n'est pas centré ») ----
 * `display:none` sur la galerie la retire du FLUX, mais pas de la MISE EN
 * PAGE : WooCommerce pose `div.summary{float:right;width:48%}` (core, pas
 * Astra — `woocommerce-layout.css`) INDÉPENDAMMENT de ce que fait la galerie.
 * `.aod-cart__checkout` se centrait donc correctement… dans les 48% de large
 * qui restaient, collé à un bord de la page plutôt que centré dessus. Une
 * fois la galerie réellement invisible, ses 48% sont un vide mort : on les
 * rend au résumé.
 * 🚨 `!important` DÉLIBÉRÉ, comme pour la galerie plus haut : la règle Woo
 * (`.woocommerce div.product div.summary`) est plus spécifique que la nôtre à
 * classes égales (deux `div` de plus) — sans lui, elle gagne et rien ne
 * bouge. Pas de `clearfix` à ajouter : un enfant non flottant contribue déjà
 * normalement à la hauteur de son parent, contrairement à un flottant. */
body.aod-cart-checkout .summary.entry-summary {
	float: none !important;
	width: 100% !important;
}

/* ---- « Complétez votre commande » ---- */

.aod-cart__suggest {
	max-width: 1080px;
	margin: 32px auto 40px;
	padding: 0 16px;
}
.aod-cart__suggest-title {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	color: var(--ac-ink);
}
.aod-cart__suggrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
@media (min-width: 768px) {
	.aod-cart__suggrid { grid-template-columns: repeat(4, 1fr); }
}
.aod-cart__sugcard {
	overflow: hidden;
	border: 1px solid var(--ac-line);
	border-radius: var(--ac-r-lg);
	background: var(--ac-surface);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	transition: box-shadow .18s ease, transform .18s ease;
}
.aod-cart__sugcard:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
	transform: translateY(-2px);
}
.aod-cart__suglink {
	display: block;
	color: inherit;
	text-decoration: none;
}
.aod-cart__sugimg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.aod-cart__sugtitle {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: 12px 12px 2px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ac-ink);
}
.aod-cart__sugprice {
	display: block;
	padding: 2px 12px 12px;
	font-size: 13px;
	color: var(--ac-ink-2);
}

@media (prefers-reduced-motion: reduce) {
	.aod-cart__fab,
	.aod-cart__close,
	.aod-cart__qty button,
	.aod-cart__remove,
	.aod-cart__order,
	.aod-cart__quickgrp,
	.aod-cart__quickadd,
	.aod-cart__quickorder,
	.aod-cart__sugcard,
	.aod-cart__inline,
	.aod-cart__inline-body,
	.aod-cart__inline-add {
		transition: none;
	}
	.aod-cart__fab:hover { transform: none; }
	/* Décor, pas du positionnement (piège Phase 19) : neutraliser est sûr. */
	.aod-cart__sugcard:hover { transform: none; }
	.aod-cart__inline-add:active { transform: none; }
	/* Panneau inline (2026-09-10) : l'expansion part, l'acquittement reste —
	 * le panneau s'ouvre directement dans son état final. */
	.aod-cart__inline-add.is-loading::after,
	.aod-cart__inline-ok { animation: none; }
}