/* ═══════════════════════════════════════════════════════════════════════════
   LA BOUTIQUE — catalogue, fiche produit, panier, tunnel, compte.
   Chargée UNIQUEMENT sur les pages de WooCommerce (voir `functions.php`).

   ⚠️ WooCommerce apporte sa propre feuille (`woocommerce-layout`, `-smallscreen`,
   `woocommerce`). On ne la désactive pas : elle porte des comportements
   (messages, chargement AJAX, formulaire de déclinaison) qu'il faudrait
   réécrire pour rien. On la RECOUVRE, sélecteur par sélecteur.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. La bannière ───────────────────────────────────────────────────────
   Le gabarit Elementor ouvrait sur 700 px de décor avant le premier produit.
   Ici : 200 px environ, le motif de la marque en fond, et on est dans le
   catalogue. Une boutique se juge au temps qu'il faut pour voir un produit. */
.ad-boutique__banniere {
	position: relative;
	overflow: hidden;
	padding-top: calc(var(--ad-entete-h) + var(--ad-annonce-h) + clamp(34px, 5vw, 58px));
	padding-bottom: clamp(30px, 4vw, 50px);
	background: var(--ad-prune);
	color: #fff;
}
/* Le motif en fond, très en retrait : il signe sans gêner la lecture. */
.ad-boutique__banniere::before {
	content: "";
	position: absolute;
	inset: 0;
	/* ⚠️ PAS `cover`. Le motif fait 3092 × 2024 : recadré en `cover` sur une
	   bande de 230 px, il n'en reste que trois taches géantes, méconnaissables.
	   À taille fixe et calé à droite, on retrouve la volute qui signe la marque. */
	background: url("/wp-content/uploads/2024/08/Motif-Arlette-Debo-1-01-1024x670.png")
		right -70px top -40px / 640px auto no-repeat;
	opacity: .2;
	pointer-events: none;
}
.ad-boutique__banniere > * { position: relative; }
.ad-boutique__titre {
	margin: 0;
	font-family: var(--ad-police-titre);
	font-weight: 600;
	font-size: clamp(30px, 5vw, 50px);
	color: #fff;
	letter-spacing: -.01em;
}
.ad-boutique__intro {
	max-width: 54ch;
	margin: 14px 0 0;
	color: var(--ad-lu-sombre);
	font-size: 15px;
	line-height: 1.7;
}
.ad-boutique__intro p:last-child { margin-bottom: 0; }

.ad-boutique { padding-bottom: clamp(56px, 8vw, 96px); }

/* ⚠️ La fiche produit n'a PAS de bannière : sa première ligne passerait donc
   derrière l'en-tête fixe. La réserve est posée ici, pas par une classe du
   `<body>` — voir la note de `style.css`. */
.ad-produit { padding-top: calc(var(--ad-entete-h) + var(--ad-annonce-h) + 14px); }

/* ── 2. Le fil d'Ariane ───────────────────────────────────────────────── */
.ad-fil {
	padding-block: 18px 4px;
	font-size: 12.5px;
	color: var(--ad-encre-douce);
}
.ad-fil a { color: var(--ad-encre-douce); }
.ad-fil a:hover { color: var(--ad-accent); }
.ad-fil__sep { margin-inline: 8px; opacity: .45; }

/* ── 3. La navigation par gamme ───────────────────────────────────────────
   LUE DANS LE CATALOGUE. Le gabarit précédent listait cinq gammes écrites à la
   main : une rubrique ajoutée n'apparaissait jamais. */
.ad-rubriques {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block: 22px 34px;
}
.ad-rubriques__lien {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 9px 16px;
	border: 1px solid var(--ad-filet);
	font-size: 13px;
	color: var(--ad-encre);
	transition: border-color .25s var(--ad-courbe), color .25s var(--ad-courbe), background-color .25s var(--ad-courbe);
}
.ad-rubriques__lien:hover { border-color: var(--ad-accent); color: var(--ad-accent); }
.ad-rubriques__lien.est-actif {
	background: var(--ad-accent);
	border-color: var(--ad-accent);
	color: #fff;
}
.ad-rubriques__nb { font-size: 11px; opacity: .6; }

/* ── 4. Le compte et le tri ───────────────────────────────────────────── */
.ad-boutique__barre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	padding-bottom: 16px;
	margin-bottom: 30px;
	border-bottom: 1px solid var(--ad-filet);
}
.woocommerce-result-count {
	margin: 0;
	font-size: 13px;
	color: var(--ad-encre-douce);
}
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select,
.ad-produit select,
.woocommerce select.orderby {
	padding: 9px 34px 9px 13px;
	border: 1px solid var(--ad-filet);
	border-radius: 0;
	background: var(--ad-blanc)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E5E68' stroke-width='1.4'/%3E%3C/svg%3E")
		right 13px center / 11px no-repeat;
	-webkit-appearance: none;
	appearance: none;
	font-size: 13px;
	color: var(--ad-encre);
	cursor: pointer;
}

/* ── 5. La grille ─────────────────────────────────────────────────────────
   `ul.products` est le balisage de WooCommerce ; on ne le change pas, on le
   remet en grille. Les images des produits sont CARRÉES : un cadrage 4/5
   couperait les bouchons de flacon. */
.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
	gap: 40px 28px;
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }
ul.products li.product {
	width: auto !important;   /* ⚠️ WooCommerce impose une largeur en pourcentage
	                             par colonne (`.columns-3 li { width: 30.75% }`),
	                             calculée pour un `float`. En grille elle produit
	                             des colonnes de 30 % dans des cellules de 100 %.
	                             C'est le seul endroit où sa règle doit céder. */
	float: none !important;
	margin: 0 !important;
	clear: none !important;
	text-align: left;
}
ul.products li.product::before,
ul.products li.product::after { content: none; }

/* ⚠️ LA CARTE PRODUIT EST DÉFINIE DANS `cadre.css`, PLUS ICI. Ses règles
   (proportion carrée, badge, gamme, prix) vivaient dans cette feuille — que
   l'accueil ne charge pas. Le rail de produits de la page d'accueil n'en
   recevait donc aucune : vignettes en 4/5 au lieu de carrées, gamme à la taille
   du corps de texte. Une règle employée par deux pages appartient à la feuille
   que les deux chargent.
   `.ad-fiche__promo` a disparu avec elles : le badge est désormais unique et
   calculé (voir `arlette_badge()`), l'ancienne pastille « Promo » en doublonnait
   le rôle. */

/* Le bouton d'ajout de la grille : défini dans `cadre.css` (`.ad-fiche
   .button`), commun à toutes les cartes. Il était ici un lien souligné de
   25 px de haut — retiré le 2026-10-01 (audit UX). */

.ad-boutique__vide { padding-block: 48px; }
.ad-boutique__vide p { color: var(--ad-encre-douce); margin-bottom: 20px; }

/* ── 6. La fiche produit ───────────────────────────────────────────────────
   REFAITE LE 2026-08-31, D'APRÈS LA FICHE DE PRODUCTION.
   Deux colonnes, mais pas deux colonnes dans une page : la GAUCHE va au bord de
   l'écran et empile les images ; la DROITE tient dans la gouttière et reste à
   l'écran pendant qu'on les fait défiler. C'est ce qui distingue une vitrine
   d'une fiche de catalogue — et c'était déjà le dispositif de la page qu'on
   reprend.

   ⚠️ LE HAUT SORT DE `.ad-largeur`. La version précédente enfermait tout dans
   la colonne centrée du site : la photo du flacon y recevait 500 px de large,
   dans un cadre, au milieu du blanc. Ici la colonne d'images commence au bord
   gauche de l'écran, comme la scène d'un soin sur une page de gamme.
   ─────────────────────────────────────────────────────────────────────────── */
.ad-produit__haut {
	display: grid;
	/* La colonne de droite fait la moitié de la colonne de texte du site, plus
	   sa gouttière : le bloc d'achat s'aligne ainsi sur le reste du site, alors
	   que les images n'ont aucune marge. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	/* ⚠️ `stretch` ET NON `start`, ET C'EST CE QUI FAIT COLLER LA COLONNE.
	   Mesuré à la sonde : avec `align-items: start`, le haut du bloc d'achat
	   passait de +122 px à −1678 px pendant le défilement — il ne collait pas du
	   tout. La raison n'est pas dans la règle `sticky`, elle est ici : un élément
	   de grille en `start` prend la hauteur de son CONTENU, pas celle de la
	   rangée. Son enfant collant n'a donc aucune course à parcourir, et
	   `position: sticky` sans course ne fait rien — silencieusement.
	   En `stretch`, `.ad-produit__infos` occupe toute la hauteur de la colonne
	   d'images, et `.ad-produit__colle` peut y glisser d'un bout à l'autre.
	   ⚠️ Une capture par `clip` ne peut PAS voir ce défaut : elle photographie le
	   document, où un élément collant reste à sa position de flux. Il faut une
	   capture de la FENÊTRE après défilement réel — voir `rendus/fenetre.js`. */
	align-items: stretch;
	gap: 0;
}
/* Les images : empilées, sans marge, sans cadre, sans gouttière. */
.ad-produit__media { display: flex; flex-direction: column; }
.ad-produit__vue {
	display: block;
	width: 100%;
	height: auto;
	/* ⚠️ PAS DE `aspect-ratio` ICI. Les visuels d'un même produit n'ont pas le
	   même format — le packshot est carré (1080 × 1080), le visuel de campagne
	   vertical (1920 × 2560). Leur imposer un cadre commun rognerait l'un ou
	   l'autre ; empilés à leur format, ils se suivent comme les planches d'un
	   catalogue. */
	background: var(--ad-ivoire);
}
.ad-produit__vide { aspect-ratio: 1; background: var(--ad-ivoire); }

/* ⚠️ LA COLONNE COLLANTE EST L'ENFANT, PAS LA COLONNE. `position: sticky` sur
   `.ad-produit__infos` ne collerait à rien : un élément de grille est déjà
   étiré sur toute la hauteur de sa rangée, il n'a donc nulle part où glisser.
   C'est `.ad-produit__colle`, à l'intérieur, qui colle. */
.ad-produit__infos { padding: 0 var(--ad-marge); }
/* ⚠️ ELLE OCCUPE LA HAUTEUR DE LA FENÊTRE, ET SON CONTENU EST CENTRÉ. Première
   version : un `sticky` calé sous l'en-tête, de la hauteur de son contenu. Le
   défaut ne se voit pas sur une capture — il se sent au défilement : un bloc
   collant plus COURT que la fenêtre commence par défiler normalement jusqu'à
   atteindre sa position de collage, puis se fige. On avait donc un
   soubresaut au premier tour de molette, alors que la colonne d'images, elle,
   part tout de suite.
   `min-height: 100vh` moins l'en-tête + `justify-content: center` règle les deux
   demandes d'un coup : le bloc est collé dès le premier pixel de défilement et
   reste immobile jusqu'à la fin de la colonne d'images, et son contenu se tient
   au milieu de la fenêtre au lieu d'être plaqué en haut.
   ⚠️ `min-height` ET NON `height` : sur un produit variable, le bloc porte en
   plus un sélecteur de modèle et un message d'erreur possible. À hauteur fixe,
   ce contenu déborderait sous le pli sans qu'on puisse l'atteindre. */
.ad-produit__colle {
	position: sticky;
	top: var(--ad-entete-h);
	min-height: calc(100vh - var(--ad-entete-h));
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: clamp(28px, 5vh, 64px);
	/* La colonne de droite ne dépasse jamais la moitié de la colonne du site :
	   au-delà, les lignes de texte deviennent trop longues à lire. */
	max-width: calc(var(--ad-large) / 2);
}

/* ⚠️ LE BADGE REDEVIENT `static` ICI. Il est écrit pour une CARTE de catalogue,
   où il se pose en absolu dans le coin de la vignette. Dans la fiche, cet
   `absolute` le faisait remonter en haut du bloc collant, au-dessus du fil
   d'Ariane — un signal qui flotte avant le chemin de navigation. */
.ad-produit__badge { margin: 0 0 16px; }
.ad-produit__badge .ad-badge { position: static; display: inline-block; }

/* Le fil d'Ariane : discret, et détaché du titre. Sans cette marge, les hampes
   de la manuscrite venaient croiser le chemin de navigation. */
.ad-produit__colle .woocommerce-breadcrumb {
	margin: 0 0 clamp(18px, 2.6vh, 28px);
	font-size: 12.5px;
	color: var(--ad-encre-douce);
}
.ad-produit__colle .woocommerce-breadcrumb a { color: var(--ad-encre-douce); }
.ad-produit__colle .woocommerce-breadcrumb a:hover { color: var(--ad-accent); }

/* ⚠️ LE NOM ENTIER EN MANUSCRITE, comme la fiche de production — voir la note
   du gabarit. `.ad-manuscrit` porte déjà la famille, le facteur 1,5em et les
   ligatures ; il ne reste ici que l'échelle et la couleur.
   La taille est généreuse : c'est le nom du produit, et sur cette page il n'a
   rien à disputer — l'image est dans l'autre colonne. */
.ad-produit__nom {
	margin: 0;
	font-size: clamp(30px, 3.9vw, 52px);
	line-height: 1.02;
	color: var(--ad-rose);
	/* ⚠️ LA RÉSERVE HAUTE EST CALCULÉE, PAS ESSAYÉE. Les majuscules de Hello
	   August montent à +1,09em au-dessus de la ligne de base (mesuré sur la
	   police). À `line-height: 1.02`, la ligne de base tombe à 0,73em du haut de
	   la boîte : la hampe dépasse donc de 0,36em, et sur un produit au fil
	   d'Ariane long — « Accueil / Gamme Capillaire / Djigen Karaw / Complément /
	   Pack Pousse » — le « P » de Pack traversait le chemin de navigation. */
	padding-top: .36em;
}
/* Le nombre d'articles d'un pack, à côté de son total. */
.ad-produit__prix-note {
	font-family: var(--ad-police);
	font-size: 13px;
	color: var(--ad-encre-douce);
}
.ad-produit__gamme { margin: 10px 0 0; font-size: 13.5px; color: var(--ad-encre-douce); }
.ad-produit__prix {
	margin-block: 20px 22px;
	font-size: 21px;
	color: var(--ad-accent);
}
.ad-produit__prix del { opacity: .5; font-size: .8em; margin-right: 8px; }
.ad-produit__prix ins { text-decoration: none; }
.ad-produit__prix .woocommerce-Price-amount { white-space: nowrap; }
.ad-produit__court {
	max-width: 46ch;
	color: var(--ad-encre-douce);
	line-height: 1.7;
}
.ad-produit__court p:last-child { margin-bottom: 0; }

/* Le formulaire d'achat. */
.ad-produit form.cart { margin-block: 28px 0; }
.ad-produit .quantity { display: inline-flex; }
.ad-produit .quantity input.qty,
.woocommerce .quantity input.qty {
	width: 68px;
	height: 50px;
	padding: 0 10px;
	border: 1px solid var(--ad-filet);
	border-radius: 0;
	background: var(--ad-blanc);
	text-align: center;
	font-size: 15px;
	/* Les flèches natives de `number` sont minuscules et changent d'un
	   navigateur à l'autre ; le champ se saisit très bien au clavier. */
	-moz-appearance: textfield;
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ad-produit form.cart .button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 14px 32px;
	border: 0;
	border-radius: 0;
	background: var(--ad-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .16em;
	transition: background-color .3s var(--ad-courbe);
}
.ad-produit form.cart .button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover { background: var(--ad-encre); color: #fff; }
.ad-produit form.cart .button[disabled],
.woocommerce button.button.alt[disabled] { opacity: .4; cursor: not-allowed; }
.ad-produit form.cart .quantity + .button { margin-left: 10px; }

/* Le choix de déclinaison. ⚠️ Sur l'ancienne fiche, l'étiquette « Modèle » et
   le menu se chevauchaient — le tableau de WooCommerce n'a pas de largeur de
   colonne et l'étiquette passait sous le champ. On sort du tableau. */
.woocommerce div.product form.cart table.variations {
	display: block;
	margin: 0 0 18px;
	border: 0;
}
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr { display: block; }
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	text-align: left;
}
.woocommerce div.product form.cart table.variations th label {
	display: block;
	margin-bottom: 7px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--ad-encre-douce);
}
.woocommerce div.product form.cart table.variations td.value { margin-bottom: 12px; }
.woocommerce div.product form.cart table.variations select { min-width: 220px; }
.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: 12.5px;
	color: var(--ad-encre-douce);
}
.woocommerce div.product form.cart .woocommerce-variation-price {
	margin-bottom: 14px;
	font-size: 19px;
	color: var(--ad-accent);
}

/* Le produit groupé : une ligne par article, pas un tableau de données. */
.woocommerce div.product form.cart .group_table { width: 100%; border: 0; margin-bottom: 20px; }
.woocommerce div.product form.cart .group_table tr { border-bottom: 1px solid var(--ad-filet); }
.woocommerce div.product form.cart .group_table td {
	padding: 12px 0;
	border: 0;
	vertical-align: middle;
	font-size: 14.5px;
}
.woocommerce div.product form.cart .group_table td.woocommerce-grouped-product-list-item__quantity { width: 88px; }
.woocommerce div.product form.cart .group_table td.woocommerce-grouped-product-list-item__price { text-align: right; color: var(--ad-accent); }
.woocommerce div.product form.cart .group_table .quantity input.qty { height: 42px; width: 62px; }

.ad-produit__promesses {
	margin: 30px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--ad-filet);
	list-style: none;
	font-size: 13.5px;
	color: var(--ad-encre-douce);
}
.ad-produit__promesses li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 11px;
}
.ad-produit__promesses .ad-icone { width: 17px; height: 17px; color: var(--ad-accent); flex: none; }

.ad-produit__description {
	padding-block: clamp(40px, 6vw, 64px);
	border-top: 1px solid var(--ad-filet);
}
/* ⚠️ CETTE RÈGLE HABILLAIT « Le produit », le titre que la section portait
   avant le 2026-08-31 : 11 px, dilaté, en capitales grises — une étiquette de
   rayon. Elle est retirée plutôt que réécrite : le titre a désormais sa propre
   classe (`.ad-produit__recit`), et laisser un sélecteur d'élément
   (`.ad-produit__description > h2`, spécificité 0-1-1) écrasait silencieusement
   la classe (0-1-0). Le titre revenait en petites capitales grises sans
   qu'aucune de mes règles n'ait l'air fausse. */
.ad-produit__description .ad-article { margin-inline: 0; }

/* Les produits voisins.
   ⚠️ UNE RÉSERVE BASSE, ET ELLE EST ICI. Le bas était à 0 : les boutons des
   cartes touchaient le pied de page (2026-10-02, « collés au pied de page »).
   C'est la DERNIÈRE rubrique de la fiche : c'est à elle de laisser l'air avant
   le pied, pas au pied d'en ajouter partout. */
.related.products, .up-sells.products {
	max-width: var(--ad-large);
	margin-inline: auto;
	padding: clamp(40px, 6vw, 64px) var(--ad-marge) clamp(72px, 10vw, 128px);
	border-top: 1px solid var(--ad-filet);
}
/* Le nombre de cartes suit le catalogue (1 à 4, filtrées sur l'achetable) :
   `auto-fill` gardait quatre pistes pour trois produits et laissait un trou à
   droite. Les pistes vides sont repliées (`auto-fit`) et la rangée centrée.
   ⚠️ LA PISTE VAUT UN QUART, PAS « 280 px AU PLUS ». Avec un maximum fixe,
   `auto-fit` compte ses pistes sur ce MAXIMUM : 3 dans 1 144 px, et la
   quatrième carte passait seule à la ligne. */
.related.products ul.products,
.up-sells.products ul.products {
	grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - 3 * 28px) / 4)));
	justify-content: center;
}
/* Sous 1 000 px : deux colonnes, et jamais une carte seule sur sa rangée. */
@media (max-width: 1000px) {
	.related.products ul.products,
	.up-sells.products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.related.products li.product:last-child:nth-child(odd):not(:first-child),
	.up-sells.products li.product:last-child:nth-child(odd):not(:first-child) { display: none; }
}
/* ⚠️ EN MANUSCRITE, CENTRÉ — comme la fiche de production, et non en petites
   capitales grises. Le libellé précédent (11 px, dilaté, `uppercase`) était
   celui d'une étiquette de rayon : il annonçait une liste sans rien y ajouter.
   La production écrit « Produits similaires » en manuscrite rose au milieu de
   la page ; c'est ce qui fait la respiration entre la fiche et ce qui la suit.
   Le titre reste un `<h2>` rendu par WooCommerce : on ne l'habille que par la
   feuille, sans surcharger `related.php` pour un mot. */
.related.products > h2, .up-sells.products > h2 {
	margin-bottom: clamp(28px, 4vh, 44px);
	font-family: var(--ad-police-manuscrite);
	font-weight: 400;
	font-size: clamp(34px, 4.4vw, 58px);
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	color: var(--ad-rose);
	font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ── 7. Les messages ──────────────────────────────────────────────────────
   WooCommerce les rend avec un liseré vert et un fond gris. Ils annoncent un
   ajout au panier ou une erreur de saisie : ils doivent se voir, pas crier. */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin: 0 0 26px;
	padding: 15px 20px;
	border: 0;
	border-radius: 0;
	background: var(--ad-prune-voile);
	color: var(--ad-encre);
	font-size: 14px;
	list-style: none;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: none; }
.woocommerce-error { background: #FDECEF; color: #8C1D33; }
.woocommerce-message .button, .woocommerce-info .button {
	margin-left: auto;
	padding: 0;
	background: none;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	color: inherit;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .12em;
	line-height: 1.8;
}
.woocommerce-message .button:hover, .woocommerce-info .button:hover { background: none; color: var(--ad-accent); }

/* ── 8. Panier, tunnel, compte ────────────────────────────────────────────
   Ces trois pages tournaient sur des widgets Essential Addons
   (`eael-woo-cart`, `eael-woo-checkout`) posés dans des documents Elementor.
   Elles emploient désormais les gabarits de WooCommerce, qui sont corrects et
   traduits — les widgets, eux, laissaient « Subtotal » et « Total » en anglais
   au milieu d'un tunnel français. */
/* Le tunnel occupe toute la largeur du site, pas la colonne de lecture. */
.ad-woo .ad-woo__corps { max-width: none; margin-inline: 0; }
.ad-woo h1, .ad-woo h2 { font-family: var(--ad-police-titre); font-weight: 600; }
.ad-woo h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 28px; }
.ad-woo h2 { font-size: 19px; }
.ad-woo h3 { font-size: 16px; }

.woocommerce table.shop_table {
	width: 100%;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	font-size: 14.5px;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 16px 12px;
	border: 0;
	border-bottom: 1px solid var(--ad-filet);
	vertical-align: middle;
}
.woocommerce table.shop_table th {
	font-family: var(--ad-police);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--ad-encre-douce);
	text-align: left;
}
.woocommerce table.shop_table td.product-remove { width: 34px; padding-left: 0; }
.woocommerce table.shop_table td.product-thumbnail { width: 84px; }
.woocommerce table.shop_table td.product-thumbnail img { width: 68px; height: 68px; object-fit: cover; }
.woocommerce table.shop_table .product-name a { color: var(--ad-encre); }
.woocommerce table.shop_table .product-name a:hover { color: var(--ad-accent); }
.woocommerce a.remove {
	width: 22px; height: 22px; line-height: 20px;
	color: var(--ad-encre-douce) !important;
	font-size: 18px; font-weight: 400;
	border-radius: 50%;
}
.woocommerce a.remove:hover { background: var(--ad-prune-voile); color: var(--ad-accent) !important; }

.woocommerce .cart-collaterals { margin-top: 40px; }
.woocommerce .cart_totals { max-width: 420px; margin-left: auto; }
.woocommerce .cart_totals h2 {
	font-family: var(--ad-police);
	font-size: 11px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .18em;
	color: var(--ad-encre-douce);
	margin-bottom: 14px;
}
.woocommerce .cart_totals .order-total .amount { font-size: 19px; color: var(--ad-accent); }
.woocommerce .wc-proceed-to-checkout { padding-top: 18px; }
.woocommerce .wc-proceed-to-checkout .button { width: 100%; }

.woocommerce .coupon { display: flex; gap: 10px; align-items: center; }
.woocommerce form .form-row { margin-bottom: 16px; padding: 0; }
.woocommerce form .form-row label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--ad-encre-douce);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row .select2-container .select2-selection {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--ad-filet);
	border-radius: 0;
	background: var(--ad-blanc);
	font-size: 15px;
	transition: border-color .25s var(--ad-courbe);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { border-color: var(--ad-accent); outline: none; }
.woocommerce form .form-row textarea { min-height: 110px; }

/* Le tunnel en DEUX colonnes : la saisie à gauche, le récapitulatif à droite,
   collant. Empilés, il faut faire défiler 2 500 px entre le dernier champ et le
   total qu'on valide — on ne voit jamais ensemble ce qu'on paie et ce qu'on donne.

   ⚠️ LA GRILLE EST SUR `form.checkout`, PAS SUR SON PARENT. Première tentative :
   `display: contents` sur le formulaire pour faire remonter ses enfants dans la
   grille du conteneur. Le titre « Votre commande » et le tableau devenaient
   alors DEUX éléments de grille dans deux rangées différentes — et la première
   rangée est haute comme le formulaire de facturation. Résultat mesuré : 850 px
   de vide entre le titre et le tableau qu'il annonce. Ici, `#customer_details`
   occupe les deux rangées de la colonne de gauche, le titre et le tableau se
   suivent dans celle de droite. */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	gap: 6px clamp(30px, 4vw, 60px);
	align-items: start;
}
.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
.woocommerce-checkout #order_review {
	grid-column: 2;
	grid-row: 2;
	position: sticky;
	top: calc(var(--ad-entete-h) + 20px);
}

/* Dans la colonne de gauche, facturation et informations complémentaires
   s'EMPILENT. WooCommerce les fait flotter à 47 % chacune : dans une colonne
   déjà réduite de moitié, cela donnait deux colonnes de 320 px. */
.woocommerce-checkout .col2-set { display: block; width: auto; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	float: none;
	width: auto;
	margin-bottom: 30px;
}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
	margin-bottom: 18px;
	font-family: var(--ad-police);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--ad-encre-douce);
}

#customer_details { margin-bottom: 34px; }
#order_review_heading {
	margin-bottom: 16px;
	font-family: var(--ad-police);
	font-size: 11px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .18em;
	color: var(--ad-encre-douce);
}
.woocommerce-checkout #payment {
	background: var(--ad-prune-voile);
	border-radius: 0;
	padding: 22px;
}
.woocommerce-checkout #payment ul.payment_methods {
	padding: 0 0 16px;
	border-bottom: 1px solid var(--ad-filet);
	list-style: none;
}
.woocommerce-checkout #payment div.payment_box {
	background: var(--ad-blanc);
	font-size: 13.5px;
	color: var(--ad-encre-douce);
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--ad-blanc); }
.woocommerce-checkout #payment .place-order { padding: 18px 0 0; }
.woocommerce-checkout #payment #place_order { width: 100%; }

/* Le compte. */
.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 220px;
	float: left;
	margin-right: 44px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--ad-filet); }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 0;
	font-size: 14px;
	color: var(--ad-encre-douce);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--ad-accent); }
.woocommerce-account .woocommerce-MyAccount-content { overflow: hidden; }
.woocommerce-account .woocommerce-MyAccount-content p { color: var(--ad-encre-douce); }
.woocommerce-account form.login, .woocommerce-account form.register {
	max-width: 460px;
	padding: 26px;
	border: 1px solid var(--ad-filet);
	border-radius: 0;
}

.woocommerce .button:not(.alt):not(.add_to_cart_button) {
	min-height: 48px;
	padding: 13px 24px;
	/* Contour lisible (≥ 3 : 1) : à 12 % il ne se voyait pas (audit 2026-10-01). */
	border: 1px solid var(--ad-encre-douce);
	border-radius: 0;
	background: transparent;
	color: var(--ad-encre);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .14em;
	transition: border-color .25s var(--ad-courbe), color .25s var(--ad-courbe);
}
.woocommerce .button:not(.alt):not(.add_to_cart_button):hover {
	background: transparent;
	border-color: var(--ad-accent);
	color: var(--ad-accent);
}

/* ── 9. Le téléphone ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
	/* ⚠️ LA GRILLE EST SUR `form.checkout` — C'EST ELLE QU'ON ANNULE, RANGÉES
	   COMPRISES. La règle visait `.ad-woo__corps > .woocommerce`, qui n'est pas
	   une grille : `form.checkout` gardait ses deux colonnes, et ses enfants
	   leurs `grid-row` (« 1 / span 2 » et « 1 »). Sur téléphone, « Votre
	   commande » passait PAR-DESSUS le formulaire (ERR-20261001-02). */
	.woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; position: static; }
	/* Sur une colonne, l'empilement des images précède le bloc d'achat, et rien
	   ne colle : il n'y a plus de seconde colonne le long de laquelle glisser. */
	.ad-produit__haut { grid-template-columns: 1fr; gap: 0; }
	.ad-produit__colle {
		position: static;
		max-width: none;
		min-height: 0;
		display: block;
		padding-top: clamp(24px, 4vh, 36px);
	}
	/* ⚠️ SUR UNE COLONNE, ON NE MONTRE PLUS TROIS IMAGES AVANT LE PRIX. Empilées
	   à pleine largeur sur un téléphone, elles font trois écrans à faire défiler
	   avant d'atteindre le bouton. Seule la première reste au-dessus ; les
	   autres passent SOUS le bloc d'achat, par l'ordre de la grille. */
	/* La colonne d'images devient une BANDE qui glisse (voir § 11) : la photo
	   du produit d'abord, puis le reste au doigt. L'ancien empilement mettait
	   le prix à 1 386 px et le bouton à 1 772 px (audit 2026-10-01). */
	.woocommerce-account .woocommerce-MyAccount-navigation { width: auto; float: none; margin: 0 0 28px; }
}
@media (max-width: 560px) {
	/* ⚠️ DEUX colonnes sur téléphone — et le préfixe `.woocommerce`, sans
	   lequel cette règle (0,1,1) perdait contre celle du bureau (0,2,1) : la
	   boutique restait sur UNE colonne, 14 150 px pour 26 produits (audit
	   2026-10-01). */
	.woocommerce ul.products,
	ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 12px; }
	.ad-boutique__barre { justify-content: flex-start; }
	.ad-produit form.cart .quantity + .button { margin-left: 0; margin-top: 10px; width: 100%; }
	.ad-produit .quantity { display: flex; }
	.ad-produit .quantity input.qty { width: 100%; }
}

/* Le code promo. Le champ par défaut fait 80 px — « Code promo » n'y tient
   même pas en entier, le libellé s'y coupe à « Code pro ». */
.woocommerce .coupon { flex-wrap: wrap; }
.woocommerce #coupon_code.input-text {
	width: auto;
	min-width: 210px;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--ad-filet);
	border-radius: 0;
	font-size: 15px;
}
.woocommerce .actions .button[name="update_cart"] { margin-left: auto; }

/* Dans une gamme groupée, un article VARIABLE n'a pas de champ de quantité :
   WooCommerce met un lien vers sa fiche à la place. Habillé comme le bouton
   d'achat, ce lien occupait la colonne de 88 px et s'y cassait en trois lignes
   (« CHOISIR / UN / MODÈLE »), plus voyant que le bouton d'achat de la page.
   C'est un renvoi, pas une commande : il en prend l'apparence. */
.woocommerce div.product form.cart .group_table td.woocommerce-grouped-product-list-item__quantity .button {
	display: inline;
	min-height: 0;
	padding: 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ad-filet);
	color: var(--ad-encre-douce);
	font-size: 11px;
	letter-spacing: .1em;
	line-height: 1.9;
	white-space: nowrap;
}
.woocommerce div.product form.cart .group_table td.woocommerce-grouped-product-list-item__quantity .button:hover {
	background: none;
	color: var(--ad-accent);
	border-color: var(--ad-accent);
}

/* ── 6 bis. Les vidéos de la fiche ─────────────────────────────────────────
   Une affiche, un bouton de lecture, et l'iframe qui prend sa place au clic.
   Voir `arlette_video_differee()` pour ce que ce détour évite : une intégration
   YouTube posée d'emblée charge des requêtes tierces sur chaque visite.
   ─────────────────────────────────────────────────────────────────────────── */

.ad-film { position: relative; margin: 0; overflow: hidden; background: var(--ad-prune-nuit); }
.ad-film__lien {
	display: block;
	position: relative;
	line-height: 0;   /* pas d'interligne fantôme sous l'affiche */
}
.ad-film__affiche { display: block; width: 100%; height: auto; }

/* ⚠️ L'AFFICHE EST ASSOMBRIE, ET C'EST UNE MESURE DE LISIBILITÉ. Le bouton est
   blanc ; posé sur le visuel de campagne de Sadiya — prune clair et rose — il
   tombait sous le seuil. Le voile ne fait pas joli, il rend le bouton visible
   sur n'importe quelle affiche. */
.ad-film__lien::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(28, 6, 21, .34);
	transition: background-color var(--ad-duree) var(--ad-courbe);
}
.ad-film__lien:hover::after { background: rgba(28, 6, 21, .18); }

.ad-film__jouer {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(58px, 6vw, 78px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--ad-prune);
	/* `padding-left` : le triangle de lecture n'est pas centré optiquement dans
	   son carré — sans ce décalage il paraît collé au bord gauche du rond. */
	padding-left: 3px;
	transition: transform var(--ad-duree) var(--ad-courbe),
	            background-color var(--ad-duree) var(--ad-courbe);
}
.ad-film__lien:hover .ad-film__jouer { transform: translate(-50%, -50%) scale(1.08); }

/* Le film de campagne, en bas de la colonne d'images : il en garde la largeur
   pleine, et son format est celui d'un « short » — vertical. */
.ad-film--colonne { aspect-ratio: 9 / 16; }
.ad-film--colonne .ad-film__affiche { height: 100%; object-fit: cover; }

/* Le film d'histoire, dans la colonne de lecture : 16/9, et la largeur du
   texte qu'il accompagne. */
.ad-film--recit {
	max-width: 760px;
	margin-inline: auto;
	margin-top: clamp(24px, 4vh, 40px);
	aspect-ratio: 16 / 9;
}
.ad-film--recit .ad-film__affiche { height: 100%; object-fit: cover; }

/* L'iframe remplace le lien : elle occupe exactement le cadre, sans bord. */
.ad-film__iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
/* Une fois lancée, plus de voile ni de bouton à assombrir. */
.ad-film.is-joue { background: #000; }

/* « Histoire produit » : le même traitement que « Produits similaires » — c'est
   ce que fait la fiche de production, et deux titres de section sur une même
   page n'ont aucune raison de se distinguer l'un de l'autre. */
.ad-produit__recit {
	margin: 0 0 clamp(24px, 4vh, 40px);
	font-size: clamp(34px, 4.4vw, 58px);
	line-height: 1;
	text-align: center;
	color: var(--ad-rose);
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. AUDIT UX DU 2026-10-01 — vendre d'abord
   Le pourquoi de chaque règle : `audits/2026-10-01-audit-ux.md`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── L'en-tête de la boutique ───────────────────────────────────────────── */
.ad-boutique__nb { margin: 0; font-size: 13.5px; color: var(--ad-encre-douce); }
.ad-rubriques__lien { min-height: 44px; align-items: center; }
.ad-rubriques__nb { font-size: 12px; }

@media (max-width: 767px) {
	/* La bande titre prenait 165 px du premier écran : titre et une ligne. */
	.ad-boutique__banniere {
		padding-top: calc(var(--ad-entete-h) + var(--ad-annonce-h) + 22px);
		padding-bottom: 22px;
	}
	.ad-boutique__titre { font-size: 28px; }
	.ad-boutique__intro { margin-top: 6px; font-size: 14px; line-height: 1.55; }
	.ad-boutique .ad-fil { display: none; }
	/* Les pastilles sur UNE ligne qui glisse, de bord à bord : elles
	   prenaient trois lignes et repoussaient le premier produit sous l'écran. */
	.ad-rubriques {
		flex-wrap: nowrap;
		margin: 16px calc(-1 * var(--ad-marge)) 14px;
		padding: 0 var(--ad-marge) 4px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.ad-rubriques::-webkit-scrollbar { display: none; }
	.ad-rubriques__lien { flex: none; white-space: nowrap; }
	.ad-boutique__barre { flex-wrap: nowrap; margin-bottom: 18px; padding-bottom: 12px; }
	.woocommerce-ordering select, .woocommerce select.orderby { max-width: 190px; min-height: 44px; }
}

/* ── La fiche : le nom ──────────────────────────────────────────────────── */
.ad-produit__nom {
	font-family: var(--ad-police-titre);
	font-size: clamp(28px, 2.9vw, 40px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -.015em;
	color: var(--ad-encre);
	padding-top: 0;
}
.ad-produit__nom--duo { display: flex; flex-direction: column; }
.ad-produit__type {
	font-family: var(--ad-police-titre);
	font-weight: 300;
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.1;
	color: var(--ad-encre);
}
.ad-produit__prenom.ad-manuscrit {
	/* Le prénom, en manuscrite rose, GRAND : à 60 px le trait fin se lit, et
	   un texte de cette taille n'a besoin que de 3 : 1 (le rose en fait 3,2). */
	font-size: clamp(58px, 6vw, 88px);
	line-height: .95;
	color: var(--ad-rose);
	/* Les majuscules de Hello August montent au-dessus de leur boîte : la
	   réserve est sur le prénom, pas sur le type au-dessus (~/regles/02). */
	padding-top: .3em;
	margin-bottom: .04em;
}

/* ── La fiche : le prix ─────────────────────────────────────────────────── */
.ad-produit__prix {
	margin-block: 16px 6px;
	font-size: 28px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ad-accent);
}
.ad-des { font-size: .62em; font-weight: 400; color: var(--ad-encre-douce); }
.ad-produit form.cart { margin-block: 20px 0; }

/* ── La description courte, après le bouton ─────────────────────────────── */
.ad-produit__court { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--ad-filet); }
.ad-produit__court-titre {
	margin: 0 0 8px;
	font-family: var(--ad-police-titre);
	font-size: 17px;
	font-weight: 600;
	color: var(--ad-encre);
}
.ad-produit__promesses { margin-top: 22px; padding-top: 18px; }

/* ── Les modèles en boutons (cadre.js remplace la liste déroulante) ─────── */
.woocommerce div.product form.cart table.variations th label {
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ad-encre);
}
.ad-modeles { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-modele {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-height: 52px;
	padding: 7px 14px;
	border: 1px solid var(--ad-encre-douce);
	background: var(--ad-blanc);
	font-size: 14px;
	line-height: 1.3;
	text-align: left;
	color: var(--ad-encre);
	transition: border-color .2s var(--ad-courbe), background-color .2s var(--ad-courbe);
}
.ad-modele__prix { font-size: 13px; color: var(--ad-encre-douce); }
.ad-modele:hover { border-color: var(--ad-accent); }
.ad-modele[aria-checked="true"] {
	border-color: var(--ad-accent);
	box-shadow: inset 0 0 0 1px var(--ad-accent);
	background: var(--ad-prune-voile);
}
.ad-modele[disabled] { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.ad-modeles-actif select {
	position: absolute !important;
	width: 1px; height: 1px;
	opacity: 0;
	pointer-events: none;
}
.woocommerce div.product form.cart .reset_variations { display: none !important; }

/* ── La fiche sur téléphone : une bande d'images, puis l'achat ──────────── */
@media (max-width: 900px) {
	.ad-produit__media {
		display: flex;
		flex-direction: row;
		gap: 8px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.ad-produit__media::-webkit-scrollbar { display: none; }
	/* 86 % : la photo suivante dépasse au bord — c'est elle qui dit « glissez ». */
	.ad-produit__media > * {
		flex: 0 0 86%;
		/* ⚠️ `min-width: 0` : sans lui, une image carrée prend pour largeur
		   minimale celle que lui donne sa HAUTEUR (390 px) et ignore le 86 %
		   — la photo suivante ne dépassait plus, rien ne disait « glissez ». */
		min-width: 0;
		height: auto;
		aspect-ratio: 1 / 1;
		align-self: start;
		scroll-snap-align: start;
	}
	.ad-produit__media > :only-child { flex-basis: 100%; }
	.ad-produit__vue { object-fit: cover; }
	.ad-produit__media .ad-film--colonne { aspect-ratio: 1 / 1; }
	.ad-produit__colle { padding-top: 18px; }
	.ad-produit__colle .woocommerce-breadcrumb { margin-bottom: 12px; }
	.ad-produit__badge { margin-bottom: 8px; }
}
@media (max-width: 560px) {
	/* Quantité et bouton sur la MÊME ligne : empilés, ils prenaient 110 px. */
	.ad-produit form.cart:not(.grouped_form):not(.variations_form),
	.ad-produit .woocommerce-variation-add-to-cart { display: flex; align-items: stretch; gap: 10px; }
	.ad-produit form.cart .quantity { display: inline-flex; flex: none; }
	.ad-produit form.cart .quantity input.qty { width: 72px; }
	.ad-produit form.cart .quantity + .button { flex: 1; width: auto; margin: 0; }
	.ad-produit form.cart.grouped_form .button { width: 100%; }
}

/* ── La barre d'achat collante (téléphone) ──────────────────────────────── */
.ad-collant {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 40;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "nom bouton" "prix bouton";
	align-items: center;
	column-gap: 14px;
	padding: 10px var(--ad-marge) calc(10px + env(safe-area-inset-bottom));
	background: rgba(252, 250, 249, .97);
	box-shadow: 0 -6px 24px rgba(46, 31, 42, .1);
	transform: translateY(100%);
	transition: transform .3s var(--ad-courbe);
}
.ad-collant[hidden] { display: none; }
.ad-collant.est-visible { transform: none; }
.ad-collant__nom {
	grid-area: nom;
	overflow: hidden;
	font-family: var(--ad-police-titre);
	font-size: 14px;
	white-space: nowrap;
	text-overflow: ellipsis;   /* le prix, dessous, distingue déjà */
}
.ad-collant__prix { grid-area: prix; font-size: 15px; font-weight: 600; color: var(--ad-accent); }
.ad-collant__prix .ad-produit__prix-note { display: none; }
.ad-collant__bouton { grid-area: bouton; }
body.ad-collant-actif .ad-pied { padding-bottom: 76px; }
@media (min-width: 901px) { .ad-collant { display: none !important; } }

/* ── Le panier ──────────────────────────────────────────────────────────── */
.woocommerce .cart_totals h2,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
#order_review_heading {
	font-family: var(--ad-police-titre);
	font-size: 19px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ad-encre);
}
.woocommerce table.shop_table th { font-size: 12.5px; letter-spacing: .06em; }
.woocommerce a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: 22px;
}
/* Sur la page Panier, le message « … a été ajouté » propose « Voir le
   panier » : on y est. Le message reste, son bouton part. */
.woocommerce-cart .woocommerce-message .button.wc-forward { display: none; }

/* Mise à jour automatique (cadre.js) : le bouton n'a plus lieu d'être. Sans
   JavaScript (`.no-js`), il reste. */
/* ⚠️ `!important` : la feuille « petit écran » de WooCommerce pose
   `.woocommerce-page table.cart td.actions .button { display: block }`
   (0,4,2), plus lourd que toute règle raisonnable ici. */
html:not(.no-js) .woocommerce-cart button[name="update_cart"] { display: none !important; }
.woocommerce-cart table.cart td.actions { background: none; }
.ad-code { margin: 0; }
.ad-code__ouvrir { min-height: 44px; font-size: 14px; color: var(--ad-accent); text-decoration: underline; text-underline-offset: 3px; }
html:not(.no-js) .woocommerce-cart .coupon:not(.est-ouvert) > :not(.ad-code) { display: none; }

.ad-panier-plus { margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--ad-filet); list-style: none; font-size: 14px; color: var(--ad-encre-douce); }
.ad-panier-plus li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ad-panier-plus .ad-icone { width: 18px; height: 18px; color: var(--ad-accent); }
.ad-panier-suite { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 14px; color: var(--ad-accent); }

@media (max-width: 768px) {
	/* Une ligne par article : vignette, nom, prix, quantité, total.
	   WooCommerce empilait « Produit : / Prix : / Quantité : » sans image. */
	.woocommerce-cart table.cart thead { display: none; }
	.woocommerce-cart table.cart tr.cart_item {
		display: grid;
		grid-template-columns: 76px minmax(0, 1fr) auto;
		grid-template-areas:
			"vue nom   suppr"
			"vue prix  prix"
			"vue qte   total";
		column-gap: 14px;
		padding: 16px 0;
		border-bottom: 1px solid var(--ad-filet);
	}
	.woocommerce-cart table.cart tr.cart_item td {
		display: block !important;
		padding: 0 !important;
		border: 0 !important;
		text-align: left !important;
		background: none !important;
	}
	.woocommerce-cart table.cart tr.cart_item td::before { content: none !important; display: none !important; }
	.woocommerce-cart table.cart td.product-thumbnail { grid-area: vue; width: auto; }
	.woocommerce-cart table.cart td.product-thumbnail img { width: 76px; height: 76px; }
	.woocommerce-cart table.cart td.product-name { grid-area: nom; align-self: center; font-family: var(--ad-police-titre); font-size: 15.5px; }
	.woocommerce-cart table.cart td.product-remove { grid-area: suppr; margin: -10px -10px 0 0; }
	.woocommerce-cart table.cart td.product-price { grid-area: prix; font-size: 13.5px; color: var(--ad-encre-douce); }
	.woocommerce-cart table.cart td.product-quantity { grid-area: qte; margin-top: 8px; }
	.woocommerce-cart table.cart td.product-quantity input.qty { height: 44px; width: 64px; }
	.woocommerce-cart table.cart td.product-subtotal { grid-area: total; align-self: end; font-weight: 600; text-align: right !important; }
	.woocommerce-cart table.cart td.actions { padding: 16px 0 !important; }
	.woocommerce-cart table.cart td.actions .coupon { display: flex; flex-wrap: wrap; gap: 10px; }
	.woocommerce-cart table.cart td.actions .coupon .input-text { flex: 1; min-width: 0; width: auto; }
	.woocommerce .cart_totals { max-width: none; }
}

/* Le « Dès » d'une carte : lisible, pas une note de bas de page. */
.ad-fiche .ad-des { font-size: 13px; }

/* Le prix du modèle choisi : la couleur de la maison, pas l'olive par défaut
   de WooCommerce (`div.product span.price { color: #958e09 }`). */
.woocommerce div.product .woocommerce-variation-price .price,
.woocommerce div.product .woocommerce-variation-price .price .amount { color: var(--ad-accent); font-size: 22px; font-weight: 600; }