/* ═══════════════════════════════════════════════════════════════════════════
   Abeille 3D — Mini-panier
   ═══════════════════════════════════════════════════════════════════════════

   RÈGLE DE FER : *tout* sélecteur de ce fichier contient la sous-chaîne
   « ab3d-mc- ». C'est ce que la safelist « Remove Unused CSS » de WP Rocket
   apparie en production (appariement en sous-chaîne du sélecteur). Un sélecteur
   qui ne la contient pas serait élagué pour les visiteurs ANONYMES uniquement,
   et le bug serait invisible en étant connecté. Vérifiable par un grep.

   SPÉCIFICITÉ : le CSS dynamique de Divi (.et_pb_section_N, et-cache/) est
   chargé APRÈS cette feuille ; à spécificité égale, Divi gagne. Les règles qui
   doivent battre une règle Divi de niveau id (par ex. `#page-container p`)
   portent donc le préfixe `body #page-container` (1,1,1).

   ⚠️ PIÈGE VÉCU — ce préfixe fait perdre la cascade à MES PROPRES règles d'état.
   `body #page-container .ab3d-mc-panel{visibility:hidden}` (1,1,1) battait
   `.ab3d-mc-root--hover:hover>.ab3d-mc-panel{visibility:visible}` (0,3,0) : le
   panneau ne s'ouvrait JAMAIS. Règle à respecter ici : dès qu'une règle de base
   est préfixée, TOUTE variante qui doit la surcharger (:hover, :last-child,
   :has(), --modificateur, requête média) doit porter le MÊME préfixe. Et on ne
   préfixe pas une règle que rien, chez Divi, ne vient contredire.

   !important : 5 dans tout le fichier, chacun FONCTIONNEL et commenté. La plupart ne
   servent qu'à reprendre la main sur des règles TIERCES qui en portent un elles-mêmes
   (style inline d'a3dpq, `a.remove{color:var(--wc-red)!important}` et son survol
   `color:#fff!important` chez WooCommerce) ou sur une valeur du gabarit Divi.
   ═══════════════════════════════════════════════════════════════════════════ */

.ab3d-mc-root {
	/* Jetons portés par le COMPOSANT : ni :root ni html -> zéro effet de bord
	   sur le reste du site. --ab3dmc-w est surchargée en style inline par le
	   rendu (réglage « largeur du panneau »). */
	--ab3dmc-w: 500px;
	--ab3dmc-gap: 10px;          /* décollement, = sous-menu riche de l'en-tête V2 */
	--ab3dmc-r: 14px;            /* rayon, idem */
	--ab3dmc-orange: #FD9644;
	--ab3dmc-orange-txt: #A85A12; /* 5,08:1 — l'orange pur ne fait que 2,18:1 */
	--ab3dmc-peche: #FAD7A0;
	--ab3dmc-ardoise: #2B2B2B;
	--ab3dmc-gris2: #6f6f6f;
	--ab3dmc-nuage: #E8E8E8;
	--ab3dmc-surface: #fff7ec;
	--ab3dmc-bord-chaud: #f0c887;
	--ab3dmc-brun: #8a5a1b;
	--ab3dmc-ombre: 0 18px 40px rgba(43, 43, 43, .13);

	position: relative;
	display: inline-flex;
	align-items: center;
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	line-height: 1.5;
	text-align: left;
}

/* ═══ CENTRAGE VERTICAL DANS L'EN-TÊTE ═══
   La colonne de l'en-tête est DÉJÀ en `align-items:center` : son centre est celui de
   la barre. Ce qui décalait l'icône de 8px vers le bas, c'est la marge haute de 20px
   du module Texte qui l'accueille — une valeur calée à l'époque sur le markup de
   BodyCommerce (un <span class="shop-cart"> plus haut que le nôtre). On la neutralise
   pour CE module uniquement, puis on centre l'icône dans la hauteur du module (35px).
   Mesuré : centre de l'icône = centre de la barre, à 0px près.

   !important FONCTIONNEL n°3 : la valeur vient du gabarit Divi (CSS générée, niveau
   id). Si tu remets un jour cette marge à 0 dans le Visual Builder, la règle devient
   sans effet mais reste inoffensive.
   Les deux sélecteurs contiennent bien `ab3d-mc-` (dans l'argument de `:has()`) —
   la règle de fer anti-RUCSS est respectée. */
body #page-container .et_pb_text:has(> .et_pb_text_inner > .ab3d-mc-root) {
	margin-top: 0 !important;
}
body #page-container .et_pb_text_inner:has(> .ab3d-mc-root) {
	display: flex;
	align-items: center;
	height: 100%;
}

/* ─────────────────────────────────────────────── déclencheur (icône + badge) */

.ab3d-mc-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	/* La hauteur du déclencheur suit EXACTEMENT celle de l'icône : c'est le centrage
	   vertical de l'en-tête (bloc ci-dessus) qui place l'ensemble. Une boîte plus
	   haute que l'icône décalerait l'icône vers le bas dans la barre — d'où la cible
	   tactile de 44px obtenue par un ::after superposé, hors flux, qui n'occupe
	   aucune place (WCAG 2.5.8). */
	height: 36px;
	color: var(--ab3dmc-orange);
	text-decoration: none;
	border-radius: 10px;
	/* AUCUN fond au survol (décision client) : une pastille derrière l'icône alourdit
	   l'en-tête. Seule la COULEUR de l'icône change — elle passe de l'orange de la
	   charte à sa déclinaison foncée, celle-là même qui sert aux liens du site. */
	background: none;
	transition: color .16s ease;
}
.ab3d-mc-toggle:hover,
.ab3d-mc-toggle:focus-visible {
	background: none;
	color: var(--ab3dmc-orange-txt);
}
/* L'anneau de focus reste, lui : c'est le repère des personnes au clavier, pas une
   décoration. Il suit le rayon de 10px ci-dessus. */
.ab3d-mc-toggle:focus-visible { outline: 2px solid var(--ab3dmc-orange-txt); outline-offset: 2px; }

/* Zone cliquable de 44x44 centrée sur l'icône, hors flux : elle agrandit la cible
   sans toucher à l'alignement de l'en-tête. */
.ab3d-mc-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}
.ab3d-mc-icon { width: 36px; height: 36px; fill: currentColor; display: block; }

/* Le badge se pose sur le COIN de l'icône et déborde vers l'extérieur : posé
   dessus (20px sur une icône de 30), il en masquait 45 % — mesuré. Il est en
   position absolue, donc ce débordement ne pousse rien dans l'en-tête. */
.ab3d-mc-count {
	position: absolute;
	top: -6px;
	/* ANCRAGE À GAUCHE, pas à droite : ancrée par la droite, la pastille grandissait
	   VERS L'ICÔNE à mesure que le nombre s'allongeait (recouvrement mesuré : 17 % à
	   un chiffre, 24 % à deux, 31 % à trois). Ancrée sur le bord droit de l'icône et
	   tirée de 12px vers la gauche, elle grandit désormais vers l'EXTÉRIEUR : le
	   recouvrement reste constant, quel que soit le nombre affiché. */
	left: 100%;
	right: auto;
	margin-left: -12px;
	min-width: 22px;
	height: 22px;
	/* CORRECTION OPTIQUE VERTICALE — mesurée, pas devinée.
	   Raleway a des métriques asymétriques : ascendante 0,94 em, descendante 0,235 em.
	   Avec `line-height:1`, la ligne de base tombe donc à 0,8525 em du haut de la boîte
	   de ligne, alors que les chiffres n'ont AUCUN jambage descendant (encre : 0,594 em
	   au-dessus de la base, 0 en dessous). Leur centre optique se retrouve à 0,556 em
	   au lieu de 0,5 : le nombre paraît 0,76 px trop bas dans une pastille de 22 px.
	   Un padding bas de 2 × 0,056 em réduit la zone de centrage par le bas et remonte
	   le texte d'exactement 0,056 em. Exprimé en em -> reste juste si la taille change.
	   ⚠️ Si la police du badge change un jour, cette valeur est à re-mesurer :
	   décalage = (asc_police − desc_police)/2 − asc_encre/2, en em. */
	--ab3dmc-badge-shift: 0.056em;
	padding: 0 5px calc(var(--ab3dmc-badge-shift) * 2);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ab3dmc-orange);
	color: var(--ab3dmc-ardoise);
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	border-radius: 999px;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(43, 43, 43, .18);
	font-variant-numeric: tabular-nums;
}
.ab3d-mc-count[hidden] { display: none; }

/* zone d'annonce vocale — vit HORS du conteneur de fragment, sinon chaque
   remplacement la détruit et les annonces sont perdues */
.ab3d-mc-live {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ───────────────────────────────────────────────────────────────── panneau */

/* PAS de préfixe body #page-container ici : aucune règle Divi ne cible cette
   classe, et le préfixe ferait gagner cet état FERMÉ contre l'état OUVERT. */
.ab3d-mc-panel {
	position: absolute;
	/* --ab3dmc-drop = distance entre le BAS DE L'ICÔNE et le BAS DE L'EN-TÊTE, posée par
	   le JS (elle dépend de la hauteur réelle de la barre, qu'aucune valeur CSS ne peut
	   connaître). Le panneau s'ouvre ainsi en bordure d'en-tête, au même niveau que les
	   panneaux du menu, au lieu d'être collé sous l'icône.
	   Repli à 0px : sans JS on retrouve l'ancien placement — décalé, jamais cassé. */
	top: calc(100% + var(--ab3dmc-drop, 0px) + var(--ab3dmc-gap));
	right: 0;
	z-index: 60;
	width: var(--ab3dmc-w);
	/* le max() est un garde-fou : sur un viewport très étroit,
	   calc(100vw - 32px) devient négatif et réduirait le panneau à ses bordures */
	max-width: max(280px, calc(100vw - 32px));
	background: #fff;
	color: var(--ab3dmc-ardoise);
	border: 1px solid var(--ab3dmc-nuage);
	border-radius: var(--ab3dmc-r);
	box-shadow: var(--ab3dmc-ombre);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .18s ease, transform .22s ease, visibility .18s;
}

/* PONT DE SURVOL : le panneau étant décollé de 10px, la souris qui traverse
   l'interstice quitterait la zone et refermerait le panneau. Ce ::before absolu
   comble l'espace, invisible. Technique reprise du sous-menu riche (style.css:2711). */
.ab3d-mc-panel::before {
	content: "";
	position: absolute;
	left: 0; right: 0;
	/* le pont couvre TOUT l'espace entre l'icône et le panneau, décalage compris */
	top: calc((var(--ab3dmc-drop, 0px) + var(--ab3dmc-gap)) * -1 - 2px);
	height: calc(var(--ab3dmc-drop, 0px) + var(--ab3dmc-gap) + 2px);
}

/* Ouverture. Le survol n'est appliqué qu'en mode « hover » ; le focus clavier et
   la classe posée par le JS ouvrent dans les deux modes — sans quoi les liens du
   panneau seraient inatteignables à la tabulation. */
/* `:not(.ab3d-mc-is-dismissed)` est INDISPENSABLE : sans lui, Échap est inopérant.
   Le gestionnaire ferme le panneau puis rend le focus au déclencheur — or le focus
   revient DANS le composant, `:focus-within` se réactive, et le panneau se rouvre
   immédiatement. L'état « écarté » suspend l'ouverture tant que la souris ou le
   focus n'ont pas quitté le composant. */
.ab3d-mc-root--hover:not(.ab3d-mc-is-dismissed):hover > .ab3d-mc-panel,
.ab3d-mc-root:not(.ab3d-mc-is-dismissed):focus-within > .ab3d-mc-panel,
.ab3d-mc-root.ab3d-mc-is-open:not(.ab3d-mc-is-dismissed) > .ab3d-mc-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Repli « fixe » : utilisé seulement si un conteneur Divi rogne le panneau.
   Le JS pose alors top/left en pixels. */
.ab3d-mc-root--fixed > .ab3d-mc-panel { position: fixed; top: auto; right: auto; z-index: 2147483000; }

@media (prefers-reduced-motion: reduce) {
	.ab3d-mc-panel { transition: opacity .01s linear, visibility .01s; transform: none; }
	.ab3d-mc-root--hover:not(.ab3d-mc-is-dismissed):hover > .ab3d-mc-panel,
	.ab3d-mc-root:not(.ab3d-mc-is-dismissed):focus-within > .ab3d-mc-panel,
	.ab3d-mc-root.ab3d-mc-is-open:not(.ab3d-mc-is-dismissed) > .ab3d-mc-panel { transform: none; }
}

.ab3d-mc-inner { display: block; }

/* ───────────────────────────────────────────────── en-tête du panneau */

body #page-container .ab3d-mc-head,
.ab3d-mc-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px 13px;
	border-bottom: 1px solid var(--ab3dmc-nuage);
}
/* Divi compte ::after (clearfix) comme un 3e élément flex (style.css:4877) */

.ab3d-mc-title {
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: var(--ab3dmc-ardoise);
	margin: 0;
	padding: 0;
	letter-spacing: -.005em;
}
.ab3d-mc-head-n {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ab3dmc-gris2);
	font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────── la liste */

body #page-container ul.ab3d-mc-list,
ul.ab3d-mc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 392px;    /* ~4 articles : en-tête, total et boutons restent visibles */
	overflow-y: auto;
	overflow-x: hidden;   /* un nom de fichier très long ne doit pas créer de défilement latéral */
}

body #page-container li.ab3d-mc-item,
li.ab3d-mc-item {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	column-gap: 13px;
	align-items: start;
	margin: 0;
	padding: 14px 18px;
	border-bottom: 1px solid var(--ab3dmc-nuage);
	position: relative;
	list-style: none;
	background: none;
}
body #page-container li.ab3d-mc-item:last-child,
li.ab3d-mc-item:last-child { border-bottom: 0; }

/* pas de vignette : la colonne disparaît proprement */
body #page-container li.ab3d-mc-item:has(> .ab3d-mc-thumb--none),
li.ab3d-mc-item:has(> .ab3d-mc-thumb--none) { grid-template-columns: 1fr auto; }
li.ab3d-mc-item > .ab3d-mc-thumb--none { display: none; }

.ab3d-mc-thumb {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--ab3dmc-surface);
	border: 1px solid var(--ab3dmc-bord-chaud);
	display: flex;
	align-items: center;
	justify-content: center;
}
/* !important FONCTIONNEL n°1 — a3dpq pose un style EN LIGNE sur ses vignettes
   (style="width:100%;height:auto;border-radius:6px", cart.php:1323). Un style
   inline bat toute règle CSS sauf !important : sans ça, la mise en page de la
   ligne explose. Ce !important disparaîtra quand a3dpq 2.54.0 aura retiré ses
   styles en ligne (§6 de PROPOSITION.md). */
.ab3d-mc-thumb img {
	width: 64px !important;
	height: 64px !important;
	max-width: 64px;
	object-fit: cover;
	display: block;
	border-radius: 0;
	margin: 0;
	padding: 0;
	box-shadow: none;
}

.ab3d-mc-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.ab3d-mc-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--ab3dmc-ardoise);
	line-height: 1.3;
	margin: 0;
	padding: 0;
	overflow-wrap: anywhere;   /* les noms de fichiers 3D sont longs et sans espaces */
}
/* a3dpq renvoie le nom sur deux lignes : le nom du produit, puis le nom de fichier
   dans un <small> contenant un <a> vers le fichier signé. Le rayon des <a> est
   forcé à 3px par Divi, on neutralise pour ce contexte. */
.ab3d-mc-name a { color: var(--ab3dmc-orange-txt); text-decoration: none; border-radius: 0; }
.ab3d-mc-name a:hover { text-decoration: underline; }
.ab3d-mc-name small {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ab3dmc-gris2);
}

/* Métadonnées : sortie de wc_get_formatted_cart_item_data() -> <dl class="variation">.
   ⚠️ On ne cible JAMAIS le TEXTE d'une clé (a3dpq_get_field_labels() les rend
   paramétrables en admin) : uniquement la structure. */
.ab3d-mc-specs { font-size: 12.5px; color: var(--ab3dmc-gris2); line-height: 1.45; }
.ab3d-mc-specs dl.variation {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 6px;
	row-gap: 1px;
	margin: 0;
	padding: 0;
	border: 0;      /* Divi pose un cadre sur les <table>/<dl> */
	background: none;
}
.ab3d-mc-specs dl.variation dt,
.ab3d-mc-specs dl.variation dd {
	margin: 0; padding: 0; border: 0; background: none;
	font-size: 12.5px; line-height: 1.45; color: var(--ab3dmc-gris2);
}
/* Les clés portent DÉJÀ leur deux-points (« Procédé: »), fournis par
   wc_get_formatted_cart_item_data() : on n'en ajoute surtout pas un second. */
.ab3d-mc-specs dl.variation dt { font-weight: 700; }
.ab3d-mc-specs dl.variation dd p { margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
/* le commentaire client peut aller jusqu'à 2000 caractères : on le borne à 3
   lignes plutôt que de laisser la ligne du panier s'étirer */
.ab3d-mc-specs dl.variation dd p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ═══ DEMANDE ACCOMPAGNÉE : la liste de fichiers prend TOUTE la largeur ═══
   a3dpq rend les pièces jointes dans un <ul class="a3dpq-file-list"> (guided.php:279).
   Dans une grille « clé | valeur » de 2 colonnes, la colonne de droite fait ~110px :
   les noms de fichiers (« ChatGPT-Image-20-juil.-2026-10_23_50.png ») passaient sous
   leur propre puce et la ligne devenait illisible. On bascule donc CE dl en une seule
   colonne — exactement ce que fait a3dpq lui-même sur la page panier
   (`.woocommerce dl.variation:has(.a3dpq-file-list){display:block}`, guided.php:311).
   Le discriminant `:has(.a3dpq-file-list)` est celui d'a3dpq : on ne cible jamais le
   TEXTE d'une clé, qui est configurable en admin. */
.ab3d-mc-specs dl.variation:has(.a3dpq-file-list) { grid-template-columns: minmax(0, 1fr); }
.ab3d-mc-specs dl.variation:has(.a3dpq-file-list) dt { margin-top: 4px; }
.ab3d-mc-specs dl.variation:has(.a3dpq-file-list) dt:first-child { margin-top: 0; }

/* La description d'un projet est un texte long : dans ce contexte mono-colonne on la
   laisse respirer sur 5 lignes au lieu de 3. */
.ab3d-mc-specs dl.variation:has(.a3dpq-file-list) dd p { -webkit-line-clamp: 5; }

/* La liste elle-même : a3dpq pose ses puces et son retrait en style INLINE (pour être
   identique en e-mail) ; on ne règle ici que ce que l'inline ne peut pas faire — la
   largeur et la coupure des noms très longs. */
body #page-container .ab3d-mc-specs .a3dpq-file-list,
.ab3d-mc-specs .a3dpq-file-list {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	list-style-position: outside;
}
/* Préfixe `body #page-container` NÉCESSAIRE : Divi habille les <li> du contenu avec
   des règles de niveau id (list-style, padding) qui battaient sinon ces déclarations
   — mesuré : puce à `none` et lignes de 30px au lieu de 18. */
body #page-container .ab3d-mc-specs .a3dpq-file-list li,
.ab3d-mc-specs .a3dpq-file-list li {
	/* a3dpq écrit `list-style:disc;word-wrap:break-word` en style INLINE sur ses <li>
	   (guided.php:280) pour être auto-suffisant jusque dans les e-mails. Mais dans le
	   panier ces valeurs n'arrivent JAMAIS : wc_get_formatted_cart_item_data() passe
	   la valeur par wp_kses_post(), et l'allowlist CSS de WordPress ne contient ni
	   `list-style` ni `word-wrap` — seul `margin` survit (vérifié sur le rendu réel).
	   Ces deux déclarations sont donc indispensables, pas décoratives. */
	display: list-item;
	list-style: disc outside;
	overflow-wrap: anywhere;
	color: var(--ab3dmc-gris2);
	font-size: 12.5px;
	line-height: 1.45;
	padding: 0;
}

/* La colonne des prix est BORNÉE. Sans cela, une ligne remisée
   (« 5 × 236,52 € 224,69 € » + « 1 182,60 € 1 123,45 € », tout sur une ligne à cause
   du nowrap) élargissait la piste `auto` de la grille et écrasait la colonne des
   caractéristiques : « Standard (0.15 mm) » et « 800 × 400 × 15 mm » passaient sur
   deux lignes. Le max-width borne la contribution de l'élément à la piste. */
.ab3d-mc-figures {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
	padding-right: 22px;   /* place pour la croix de suppression */
	max-width: 128px;
	text-align: right;
	white-space: normal;
}

/* Prix barré / prix effectif : a3dpq renvoie `<del aria-hidden>ancien</del>
   <ins>nouveau</ins>` (le del est déjà masqué aux lecteurs d'écran). On les EMPILE
   au lieu de les laisser côte à côte. */
.ab3d-mc-figures del,
.ab3d-mc-figures ins {
	display: block;
	text-decoration: none;
	background: none;
	white-space: nowrap;
}
.ab3d-mc-figures del {
	font-size: 11.5px;
	color: #9a9a9a;
	text-decoration: line-through;
}

/* Sur la ligne « quantité × prix unitaire », on n'affiche QUE le prix effectif :
   l'ancien prix unitaire barré fait double emploi avec celui du total de ligne, qui
   est le montant réellement payé. Trois lignes de chiffres au lieu de cinq, et la
   remise reste parfaitement visible. */
.ab3d-mc-qty del { display: none; }
.ab3d-mc-qty ins { display: inline; }
.ab3d-mc-qty { font-size: 12.5px; color: var(--ab3dmc-gris2); font-variant-numeric: tabular-nums; }
.ab3d-mc-line { font-size: 14px; font-weight: 700; color: var(--ab3dmc-ardoise); font-variant-numeric: tabular-nums; line-height: 1.35; }
.ab3d-mc-line del { font-weight: 400; }
.ab3d-mc-quote-tag {
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ab3dmc-brun);
	background: var(--ab3dmc-peche);
	border-radius: 999px;
	padding: 3px 10px;
}

body #page-container a.ab3d-mc-remove,
a.ab3d-mc-remove {
	position: absolute;
	top: 11px;
	right: 13px;
	/* woocommerce.css pose aussi `a.remove{position:absolute;top:0;left:0}` : sans ce
	   `left:auto`, la croix peut basculer à GAUCHE de la ligne (en positionnement
	   absolu sur-contraint, `left` l'emporte sur `right`). */
	left: auto;
	width: 28px;             /* cible WCAG 2.5.8 */
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* !important FONCTIONNEL n°4 — woocommerce.css impose
	   `.woocommerce a.remove { color: red !important }` : la croix sortait ROUGE au
	   repos. Un !important ne se bat qu'avec un !important. */
	color: var(--ab3dmc-gris2) !important;
	text-decoration: none;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	/* AUCUN fond, ni au repos ni au survol (décision client) : une pastille autour de
	   la croix mange trop de place dans une ligne de panier. Seule la couleur change. */
	background: none;
	transition: color .14s ease;
}
body #page-container a.ab3d-mc-remove:hover,
body #page-container a.ab3d-mc-remove:focus-visible,
a.ab3d-mc-remove:hover,
a.ab3d-mc-remove:focus-visible {
	/* !important requis ici aussi, pour deux raisons : la déclaration de repos
	   ci-dessus en porte un, ET woocommerce.css impose
	   `a.remove:hover{color:#fff!important;background:var(--wc-red)}` — sans quoi la
	   croix repasserait blanche sur fond rouge. */
	color: #a02824 !important;
	background: none;
}
body #page-container a.ab3d-mc-remove:focus-visible,
a.ab3d-mc-remove:focus-visible { outline: 2px solid var(--ab3dmc-orange-txt); outline-offset: 0; }

/* ─────────────────────────────────────────── délai, total, boutons */

body #page-container p.ab3d-mc-delay,
p.ab3d-mc-delay {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 11px 18px;
	border-bottom: 1px solid var(--ab3dmc-nuage);
	background: var(--ab3dmc-surface);
	font-size: 13px;
	color: var(--ab3dmc-brun);
	line-height: 1.4;
}
p.ab3d-mc-delay svg { width: 15px; height: 15px; fill: var(--ab3dmc-orange-txt); flex: 0 0 auto; }
p.ab3d-mc-delay b { color: var(--ab3dmc-brun); font-weight: 700; }

body #page-container .ab3d-mc-total,
.ab3d-mc-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 18px;
	background: var(--ab3dmc-peche);
	color: var(--ab3dmc-ardoise);
}
.ab3d-mc-total-l { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ab3d-mc-total-v {
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 22px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}
.ab3d-mc-total-v .amount, .ab3d-mc-total-v bdi { color: inherit; font: inherit; }

body #page-container .ab3d-mc-actions,
.ab3d-mc-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 14px 18px 16px;
}
body #page-container .ab3d-mc-actions--single,
.ab3d-mc-actions--single { grid-template-columns: 1fr; }

/* ═══ BOUTONS ═══
   Couleurs, survol, rayon, graisse et taille viennent du THÈME : nos liens portent
   `button` (primaire) et `button wc-backward` (secondaire), donc les règles du thème
   enfant s'appliquent telles quelles, `!important` compris. On ne redéclare RIEN de
   tout ça — sinon le mini-panier divergerait le jour où la charte des boutons bouge.
   Rappel du système (style.css, §« BOUTONS PAR DÉFAUT DU SITE ») :
     primaire   : #FD9644 / blanc   -> survol #FAD7A0 / #2B2B2B
     secondaire : #FAD7A0 / #2B2B2B -> survol #FFF7EC / #A85A12 + bordure #FD9644

   Ce qui reste ici est UNIQUEMENT ce que le thème ne couvre pas dans ce contexte : la
   mise en page dans la grille, et le FIGEAGE DE LA GÉOMÉTRIE AU SURVOL. Divi réinjecte
   au survol une bordure et son padding « place pour la flèche », ce qui faisait
   légèrement rétrécir « Commander » au passage de la souris. Le thème applique déjà ce
   correctif au mini-panier BodyCommerce (« figer AUSSI la géométrie au survol ») : on
   fait pareil, avec la bordure 1.5px de sa règle de base. */
body #page-container a.ab3d-mc-btn,
a.ab3d-mc-btn,
body #page-container a.ab3d-mc-btn:hover,
a.ab3d-mc-btn:hover,
body #page-container a.ab3d-mc-btn:focus,
a.ab3d-mc-btn:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.25;
	cursor: pointer;
	/* géométrie IDENTIQUE au repos et au survol -> plus aucun saut de hauteur */
	padding: 10px 20px;
	border-width: 1.5px;
	border-style: solid;
}
/* Divi ajoute une flèche ::after au survol de ses boutons : neutralisée dans les deux
   états, sinon elle élargit le bouton. */
a.ab3d-mc-btn::after,
a.ab3d-mc-btn:hover::after { content: none; display: none; }

/* Aucune couleur de bouton ici : elles viennent du thème via les classes `button` et
   `button.wc-backward`. Les modificateurs --ghost / --primary ne servent plus qu'à la
   lisibilité du markup et à d'éventuels ajustements de mise en page. */
a.ab3d-mc-btn:focus-visible { outline: 2px solid var(--ab3dmc-orange-txt); outline-offset: 2px; }

/* ═══ NEUTRALISATION DES CLEARFIX — piège vécu, à ne pas alléger ═══
   On conserve volontairement les classes WooCommerce `cart_list`,
   `product_list_widget` et `woocommerce-mini-cart-item` (le JS du cœur s'en sert
   pour la suppression AJAX). On hérite donc de la règle de woocommerce.css :

       .woocommerce ul.cart_list li::before { content:" "; display:table }   (0,2,2)

   `display:table` transforme ces DEUX pseudo-éléments en VRAIS éléments de
   grille : ils décalent tout d'une cellule (la vignette passait en colonne 2, les
   prix repassaient à la ligne, et dans le <dl> les clés et les valeurs
   s'échangeaient de colonne). Un neutralisant `li.ab3d-mc-item::before` (0,1,1)
   perd contre WooCommerce -> le préfixe `body #page-container` (1,1,1) est
   NÉCESSAIRE ici.

   ⚠️ Ne JAMAIS inclure `.ab3d-mc-panel::before` dans cette liste : c'est le pont
   de survol, il doit rester. */
body #page-container .ab3d-mc-head::before,      body #page-container .ab3d-mc-head::after,
body #page-container ul.ab3d-mc-list::before,    body #page-container ul.ab3d-mc-list::after,
body #page-container li.ab3d-mc-item::before,    body #page-container li.ab3d-mc-item::after,
body #page-container .ab3d-mc-body::before,      body #page-container .ab3d-mc-body::after,
body #page-container .ab3d-mc-specs::before,     body #page-container .ab3d-mc-specs::after,
body #page-container .ab3d-mc-specs dl.variation::before,
body #page-container .ab3d-mc-specs dl.variation::after,
/* …y compris sur les <li> de la liste de fichiers d'a3dpq : mesuré, ces deux
   pseudo-éléments en `display:table` ajoutaient 13px à CHAQUE ligne (31px au lieu
   de 18 pour une seule ligne de texte). */
body #page-container .ab3d-mc-specs .a3dpq-file-list li::before,
body #page-container .ab3d-mc-specs .a3dpq-file-list li::after,
body #page-container .ab3d-mc-figures::before,   body #page-container .ab3d-mc-figures::after,
body #page-container p.ab3d-mc-delay::before,    body #page-container p.ab3d-mc-delay::after,
body #page-container .ab3d-mc-total::before,     body #page-container .ab3d-mc-total::after,
body #page-container .ab3d-mc-actions::before,   body #page-container .ab3d-mc-actions::after {
	content: none;
	display: none;
}

/* Les <dt>/<dd> héritent aussi d'un `float:left` de woocommerce.css. Sans effet sur
   des éléments de grille, mais on le retire pour que la grille reste lisible si le
   display change un jour. */
body #page-container .ab3d-mc-specs dl.variation dt,
body #page-container .ab3d-mc-specs dl.variation dd { float: none; }

/* ─────────────────────────────────────────────────────── état vide */

.ab3d-mc-empty { padding: 30px 24px 24px; text-align: center; }
.ab3d-mc-empty-art { width: 64px; height: 64px; margin: 0 auto 14px; display: block; color: var(--ab3dmc-bord-chaud); }
.ab3d-mc-empty-t {
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 16px; font-weight: 700; color: var(--ab3dmc-ardoise); margin: 0 0 5px; padding: 0;
}
.ab3d-mc-empty-p { font-size: 13.5px; color: var(--ab3dmc-gris2); margin: 0 0 18px; padding: 0; }
.ab3d-mc-empty .ab3d-mc-actions { padding: 0; }

/* ──────────────────────────────────────────── état de rafraîchissement */

.ab3d-mc-root.ab3d-mc-is-busy .ab3d-mc-inner { opacity: .55; transition: opacity .15s ease; }
.ab3d-mc-root.ab3d-mc-is-busy .ab3d-mc-list { pointer-events: none; }

/* ─────────────────────────────────────────── bouton flottant (secours) */

.ab3d-mc-float {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 2147483000;
	background: #fff;
	border: 1px solid var(--ab3dmc-nuage);
	border-radius: 999px;
	box-shadow: var(--ab3dmc-ombre);
	padding: 4px;
}
.ab3d-mc-float .ab3d-mc-panel { top: auto; bottom: calc(100% + var(--ab3dmc-gap)); }
.ab3d-mc-float .ab3d-mc-panel::before { top: auto; bottom: calc(var(--ab3dmc-gap) * -1 - 2px); }

/* ─────────────────────────────────────────────────────── responsive */

/* Sous 980px la colonne du panier est masquée par une décision client
   (style.css:2862) : le panneau n'a donc pas de cas mobile dans l'en-tête. Le
   bouton flottant, lui, peut exister partout -> on l'adapte. */
@media (max-width: 600px) {
	.ab3d-mc-float .ab3d-mc-panel { width: calc(100vw - 36px); right: 0; }
	body #page-container .ab3d-mc-float ul.ab3d-mc-list,
	.ab3d-mc-float ul.ab3d-mc-list { max-height: 50vh; }
}

@media (forced-colors: active) {
	.ab3d-mc-panel { border: 1px solid CanvasText; }
	.ab3d-mc-count { border-color: CanvasText; }
}