/* ============================================================================
   paniers.css : Paniers thematiques (point 19, retours Thomas 28/08).
   Charge sur l'accueil, le hub /paniers-thematiques.html et les pages
   /panier-thematique-*.html (inc/header.inc.php). Aucune valeur de couleur ou
   de rayon en dur : tokens du :root de site.css. Maquette validee le 08/09 :
   docs/superpowers/specs/assets/maquette-p19.html (locale).
   Doctrine catalogue : le survol ne colore jamais une carte.
   ============================================================================ */

/* ---- grille de cartes de theme (accueil : 3, hub : 4) ---- */
.th-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.th-grid--4{grid-template-columns:repeat(4,1fr)}

/* ---- carte de theme : carte blanche + kick + see-all, composee ---- */
/* Ombre douce permanente et survol en LEVEE, jamais en couleur (retour Thomas du 12/09 :
   la carte manquait d'ame). Les valeurs sont celles de la carte du catalogue en mode lift
   (site.css:8303), pas des reglages inventes ici, et la levee vaut quel que soit le mode de
   survol choisi au back-office : l'or dit l'etat, pas le survol. */
.th-card{position:relative;display:flex;flex-direction:column;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius-m);overflow:hidden;color:inherit;text-decoration:none;
  box-shadow:0 2px 10px rgba(36,26,18,.05);transition:box-shadow .2s,transform .2s,border-color .2s}
/* 🔑 Lien ETIRE : depuis le 12/09 la carte porte un bouton d'ajout, et un <button> dans
   un <a> est du contenu interactif imbrique, invalide et ambigu au clic. La carte est donc
   un <div>, le titre porte le vrai lien, et ce lien s'etire sur toute la carte par un
   ::after en absolu. Toute la carte reste cliquable, le clavier n'a qu'une seule cible
   par carte au lieu d'un lien geant, et le bouton se pose AU DESSUS du calque. */
.th-card .th-link{color:inherit;text-decoration:none}
.th-card .th-link::after{content:"";position:absolute;inset:0;z-index:1}
.th-cta{position:relative;z-index:2;margin-top:14px;display:grid;gap:8px}
/* Le bouton du catalogue tel quel : sa grille 42px + texte cale le picto exactement comme
   sur une carte de vin. Ici il prend la largeur de la carte, faute de selecteur de
   quantite a sa gauche. */
/* Geometrie reprise du bouton de la carte catalogue (site.css:8559) : inline-flex centre
   avec un ecart de 8px, et surtout grid-template-columns:none, qui ANNULE la grille
   42px + texte du composant de base. Sans cette annulation le caddie reste cloue dans sa
   colonne de gauche pendant que le libelle se centre dans le reste, et les deux se
   separent d'autant plus que le bouton est large.
   ⚠ J'ai essaye l'inverse le 12/09, une colonne fixe pour aligner les caddies d'une carte
   a l'autre : REFUSE par Thomas, « il doit etre a proximite du texte ». Le picto accompagne
   son libelle, il ne fait pas colonne. Ne pas y revenir. */
.th-cta .cc-wine-card__cart-button{box-sizing:border-box;width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;grid-template-columns:none}
.th-cta .cc-wine-card__cart-icon{display:inline-flex;width:auto;height:auto;background:transparent;place-items:center}
/* 🔑 AUCUNE largeur plancher sur le libelle : le couple picto + texte est simplement
   centre dans son bouton, caddie compris (arbitrage Thomas du 12/09, dernier mot sur ce
   bouton : « ca doit etre centre, caddie inclus »).
   🧨 L'histoire vaut d'etre gardee, elle m'a coute trois allers-retours. J'avais pose un
   plancher de 14em pour aligner les caddies d'une carte a l'autre, valeur tiree d'un
   « Ajouter ce panier » mesure a 167,4px. Mais cette mesure INCLUAIT le padding de 0 10px
   que le composant de base pose sur ce span (site.css:3991), padding que j'ai supprime
   juste apres. Le texte seul ne fait que 147px : la boite se retrouvait 20px trop large, et
   ces 20px se rangeaient a droite du libelle. D'ou le « plus d'espace a droite qu'a gauche ».
   Sans plancher, chaque bouton centre son propre contenu. Les cartes verrouillees s'alignent
   entre elles puisqu'elles portent toutes le meme libelle ; celle d'un theme ouvert, dont le
   libelle est plus court, se centre sur elle meme. Le seul levier pour l'aligner avec les
   autres serait son libelle, pas sa mise en page.
   padding:0 conserve : sans lui, l'ecart picto/texte vaut 18px au lieu des 8 du conteneur. */
.th-cta .cc-wine-card__cart-button > span:last-child{padding:0}
/* 🧨 .cc-wine-card__cart-button pose display:grid, qui BAT la regle [hidden] de la
   feuille du navigateur : sans cette ligne les deux etats du bouton s'affichent l'un sous
   l'autre. Exactement le meme piege que sur le CTA de la page du theme, ou la meme regle
   existe pour .btn-primary. Constate a l'ecran des le premier deploiement. */
.th-cta .cc-wine-card__cart-button[hidden]{display:none}
@media (hover:hover){
  .cc-cardhover-lift .th-card:hover,.cc-cardhover-bplus .th-card:hover{
    box-shadow:0 14px 34px rgba(36,26,18,.14);transform:translateY(-4px);border-color:#d8cfbb}
}
/* padding haut 26px et non 16 (retour Thomas du 11/09 : les pastilles « mal disposees »
   sur l'accueil). Les bouteilles sont collees en BAS de la boite (align-items:flex-end) et
   mesurent 170px dans un contenu de 190 : elles commencaient donc 36px sous le haut du
   visuel, exactement ou finissait la rangee de pastilles, posee a 12px et haute de 26.
   Deux pixels de recouvrement, mesures au CSSOM. Augmenter le padding HAUT descend la boite
   de contenu sans deplacer les bouteilles, qui restent au fond : c'est de la place gagnee
   au dessus d'elles, et rien d'autre ne bouge. Dix pixels de degagement. */
/* Fond BLANC et non plus creme (arbitrage Thomas du 12/09). Ce n'est pas qu'une question de
   gout : les photos de bouteilles sont des JPEG a fond blanc, et sur l'aplat creme chacune
   se voyait posee sur son rectangle blanc. Trois cartons blancs sur du beige, c'est ca qui
   faisait plat. Sur du blanc, les rectangles disparaissent et il ne reste que les bouteilles
   et leur ombre portee. Meme fond que la carte du catalogue, ou l'effet est deja celui la.
   Le cas VIDE garde la teinte : sans bouteille ni photo, un cadre blanc dans une carte
   blanche se lirait comme un defaut d'affichage, pas comme un theme sans visuel. */
.th-visual{position:relative;height:190px;background:var(--c-surface);display:flex;align-items:flex-end;justify-content:center;padding:26px 18px 0;overflow:hidden}
/* min-width:0 + object-fit (retour Thomas 09/09) : les trois bouteilles de repli font
   128 + 134 + 128 px de large, moins 36px de marges negatives, soit 354px, dans un visuel
   qui n'en fait que 280 sur une carte de hub a quatre colonnes. Les deux bouteilles des
   bords debordaient donc de 42px chacune et se faisaient COUPER par l'overflow:hidden du
   cadre. Une image a hauteur fixe et largeur auto ne retrecit pas dans un flex : son
   min-width:auto l'en empeche. min-width:0 le lui rend, object-fit:contain garde ses
   proportions dans la boite retrecie, object-position:bottom la garde POSEE sur la ligne
   de base (sans lui, contain la centre verticalement et les trois bouteilles flottent au
   dessus du bord du cadre). Aucune valeur en dur : les bouteilles suivent la largeur de
   la carte, a trois comme a quatre colonnes. */
/* 🧨 PLUS de drop-shadow sur l'image (mesure du 12/09, cause des « rectangles » que
   Thomas voyait derriere chaque bouteille). Les photos sont des JPEG, donc SANS couche
   alpha : drop-shadow epouse alors la BOITE rectangulaire de l'image et dessine un
   rectangle d'ombre autour de chaque bouteille. Verifie en lisant les pixels du fichier
   sur dev, ses quatre coins sont a 255,255,255 : le rectangle ne venait pas de la photo.
   L'ancrage est rendu par une ombre au SOL, au pied du groupe, comme la carte du
   catalogue le fait deja (.wine-img::after, site.css:8350). Meme teinte, meme forme
   d'ellipse ecrasee, elargie a la rangee de trois bouteilles. */
.th-visual img{height:170px;width:auto;min-width:0;object-fit:contain;object-position:bottom;display:block;margin:0 -6px;position:relative;z-index:1}
.th-visual::after{content:"";position:absolute;left:18%;right:18%;bottom:10px;height:18px;
  border-radius:50%;background:radial-gradient(ellipse 70% 100% at 50% 50%, rgba(73,54,32,.18), rgba(73,54,32,0) 72%);
  pointer-events:none;z-index:0}
/* Le visuel PHOTO n'a pas de sol a dessiner : l'image occupe tout le cadre. */
.th-visual--photo::after,.th-visual--vide::after{content:none}
.th-visual img:nth-child(2){height:178px;z-index:1}
.th-visual--photo{padding:0;align-items:stretch}
.th-visual--photo img{height:100%;width:100%;object-fit:cover;object-position:center;margin:0;filter:none}
.th-visual--vide{align-items:center;background:var(--clr-bg-light)}
/* Les deux pastilles partagent UNE rangee posee en absolu sur le visuel, au lieu d'etre
   collees chacune dans son coin (retour Thomas du 10/09 : sur la carte etroite de l'accueil,
   « 6 vins » et « PANIER ENTIER » se rejoignaient). Le gap garantit l'ecart, et flex-wrap
   les empile plutot que de les laisser se chevaucher quand la carte est vraiment trop
   etroite. margin-left:auto tient le verrou a droite, y compris seul sur sa ligne. */
.th-pastilles{position:absolute;top:10px;left:12px;right:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;z-index:1}
/* 🔑 Plus de boite (arbitrage Thomas du 12/09). Deux etiquettes posees sur le visuel
   faisaient deux objets de plus a lire avant d'arriver aux bouteilles ; ce sont des
   annotations, elles se comportent comme telles. Meme graisse typographique que les
   sur titres d'appellation du site : capitales, 10,5px, interlettrage large.
   Le compte est en or, le panier entier en encre : l'or dit la quantite, l'encre dit la
   regle de vente. Deux tons, deux natures d'information. */
.th-count,.th-lock{display:inline-flex;align-items:center;gap:5px;background:none;border:0;border-radius:0;
  padding:0;font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap}
.th-count{color:var(--clr-or-text)}
.th-lock{margin-left:auto;color:var(--c-ink)}
.th-count .cc-i,.th-lock .cc-i{flex:0 0 auto}
/* ⚠ Sur un theme a PHOTO, le texte nu deviendrait illisible : la boite revient, mais
   seulement la, et en creme translucide pour laisser voir l'image dessous. */
.th-visual--photo .th-count,.th-visual--photo .th-lock{background:rgba(250,248,243,.93);border-radius:999px;padding:4px 9px}
.th-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.th-title{font-size:18px;font-weight:700;color:var(--c-text-strong);line-height:1.25}
/* Le contenu du panier, en appellations. Ce n'est pas un style de plus : ce sont les
   valeurs de .th-row-info .wc-appell (la meme information, sur la ligne d'un vin de la page
   theme), reprises a l'identique, famille, taille, graisse, interlettrage, couleur, casse.
   Seules deux choses changent, et pour une raison : la ligne de vin est en nowrap avec
   ellipse parce qu'elle tient dans une colonne, ici la liste doit pouvoir passer a la
   ligne, d'ou l'interligne. L'espacement vient du gap de .th-body, aucune marge posee. */
.th-appells{font-family:var(--ff-title);font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;line-height:1.7;color:var(--c-text)}
.th-accroche{font-size:14px;line-height:1.5;color:var(--c-text)}
.th-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--c-line);display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px;color:var(--c-text)}
/* .th-per (« 38 € la bouteille ») retire le 10/09 sur retour Thomas : sa regle part avec
   lui plutot que de rester en code mort. */
.th-foot .th-price{font-size:18px;font-weight:700;color:var(--c-accent-text)}
/* 🔑 Variante « prix mis en avant » (12/09), pilotee au back-office par
   selections_prix_fort_cartes. Un cran au dessus seulement : 22px, quand la page du theme
   en met 38. Une carte ne fait pas le meme travail qu'une page, elle sert a COMPARER un
   panier a ses voisins, et quatre prix de 38px alignes se battent entre eux et avec les
   titres. Simule dans le navigateur avant d'etre code, sur les quatre cartes du hub.
   La ligne d'economie est la vraie information ajoutee : le montant economise ne se lit
   nulle part ailleurs avant d'ouvrir le panier. */
.th-foot--fort .th-price{font-size:22px}
.th-foot--fort .th-price-old{font-size:14px;opacity:.8}
.th-foot--fort .th-eco{font-size:12px;font-weight:700;color:var(--clr-or-text);white-space:nowrap}
/* Prix barre du pied de carte. La barre oblique elle meme vient de site.css, ou
   .th-price-old est ajoutee au selecteur de .wine-card .wc-price-old : ici on ne fixe que
   la taille et la couleur, calees sur .th-bar-total .th-price-old (le meme prix barre, sur
   la page du theme), une taille en dessous parce que le prix a cote fait 18px et non 24. */
.th-foot .th-price-old{font-size:13px;font-weight:600;color:var(--c-text);opacity:.7;margin-right:2px}

/* ---- cc-kick et cc-see-all : site.css ne les style que sous #homepage-content
   (accueil). Les pages hub et theme vivent hors de ce conteneur : on reprend ici
   les MEMES declarations (memes tokens, memes valeurs, site.css:10411/10414),
   juste porte par nos propres classes .th-*, sinon ces libelles sortent en texte
   nu sur le hub et la page theme. Le soulignement est repris a l'identique de
   site.css:1628-1634 (#homepage-content .cc-see-all) : arbitrage Thomas, un lien
   de sortie porte son affordance dans son style, or ET souligne, sans regle de
   survol (doctrine catalogue : le survol ne repeint rien). ---- */
.th-foot .cc-see-all,.th-vide .cc-see-all{font-weight:600;font-size:13.5px;color:var(--clr-or-text);white-space:nowrap;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb, currentColor 45%, transparent)}

/* ---- hub et page theme : en-tete ---- */
/* 12px au dessus du fil d'Ariane, desktop comme mobile (retour Thomas 09/09). Mesure du
   09/09 en 1293px, ecart entre le bas de la nav et le fil : 12px sur /producteurs.html,
   16px sur /boutique.html, 6px sur une fiche vin, et 30px ici. On s'aligne sur
   producteurs, la page la plus proche par gabarit (meme fil a deux maillons, meme
   colonne de texte), et c'est deja la valeur retenue en mobile. */
.th-head{padding:12px 0 10px;max-width:760px}
.th-head h1{font-size:27px;font-weight:700;line-height:1.25;color:var(--c-text-strong);margin:6px 0 14px;position:relative;padding-bottom:12px;text-wrap:balance}
.th-head h1::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:3px;background:var(--c-accent)}
/* Theme SANS pitch. L'en-tete se resserre et le second filet or disparait : entre le
   filet du H1 et celui du bandeau il y avait 50 px de vide (14 de marge basse du H1, 10 de
   padding de l'en-tete, 26 de marge haute du bandeau), et deux filets identiques de 40 px
   se repondaient sans rien entre eux. Avec un pitch, ces 50 px portent du texte et les deux
   filets encadrent quelque chose : rien ne bouge dans ce cas.
   C'est le filet du BANDEAU qui cede, pas celui du H1 : le premier appartient au titre, il
   le souligne ; le second n'ouvrait qu'un bloc qui commence de toute facon par son propre
   prix, en gras et en or. */
.th-head--nu{padding-bottom:0}
.th-head--nu h1{margin-bottom:8px}
/* Selecteur adjacent, et il est sur ici : .th-bar est le SEUL element qui puisse suivre
   .th-head, trois lignes plus bas dans le meme gabarit (inc/panier-thematique.inc.php),
   sans rien d'optionnel entre les deux. Ce n'est pas une position devinee dans une liste,
   c'est la structure fixe de la page. */
.th-head--nu + .th-bar::before{content:none}
.th-pitch{font-size:16px;line-height:1.65;color:var(--c-text);max-width:66ch}
.th-pitch p{margin:0 0 12px}
.th-hub-sub{font-size:15px;line-height:1.6;max-width:66ch;margin:0 0 26px;color:var(--c-text)}
.th-hub-grid{padding-bottom:54px}
.th-vide{padding:20px 0 60px;font-size:15px;color:var(--c-text)}

/* ---- bandeau "Tout ajouter" ---- */
/* Bandeau sans boite, introduit par le filet or (arbitrage Thomas du 09/09, variante 1
   sur six maquettees a chaud sur dev). Il portait le fond --clr-bg-light, un filet
   --c-border-struct et --radius-m : exactement le gabarit des encarts de service du
   site, donc il se lisait comme un message systeme et non comme l'offre. Sans boite,
   il redevient une entree de section, et le seul bloc encadre de la page reste ce
   qui compte, le CTA.
   Le filet reprend AU PIXEL celui du H1 juste au dessus (.th-head h1::after, 40px sur
   3px, var(--c-accent)) : c'est la signature « filet or » du systeme, pas un ornement
   invente ici. Meme largeur, meme epaisseur, meme token.
   padding horizontal a ZERO, delibere : le bandeau, la liste et le titre partagent
   desormais le meme bord gauche, ce qu'une boite a 22px de padding rendait impossible. */
.th-bar{margin:26px 0 4px;padding:22px 0 20px;position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.th-bar::before{content:"";position:absolute;left:0;top:0;width:40px;height:3px;background:var(--c-accent)}
.th-bar-total{display:flex;flex-direction:column;gap:2px}
/* 🔑 Le prix paye est la vedette (12/09). 38px : la mesure vient de la FICHE VIN, ou
   l'entier du prix est en 42px au dessus d'un H1 de 27 (releve au CSSOM sur dev). Le site
   assume donc deja un prix plus gros que son titre, et le panier se place juste en dessous
   de ce reperage, un cran sous une bouteille seule. Le prix separement le coiffe, barre,
   dans la taille d'une ligne de detail ; l'economie se dit en or texte, une fois ; le
   compte de bouteilles ferme le bloc en gris. */
.th-bar-sep{font-size:14px;color:var(--c-text);line-height:1.3}
.th-bar-sep .th-price-old{font-size:16px;font-weight:600;color:var(--c-text);opacity:.75;margin-right:3px}
.th-bar-paye{line-height:1.05;margin:2px 0 1px}
.th-bar-paye .th-price{font-size:38px;font-weight:700;color:var(--c-accent-text);letter-spacing:-.01em}
.th-bar-eco{font-size:14px;font-weight:700;color:var(--clr-or-text)}
.th-bar-nb{font-size:13px;color:var(--c-text)}
.th-bar-total span{font-size:13px;color:var(--c-text)}
@media (max-width:720px){
  .th-bar-paye .th-price{font-size:32px}
}
/* cursor et ombre : .btn-primary (site.css) a ete ecrit pour des <a>, qui sont en
   cursor:pointer par defaut, et ne pose donc AUCUN cursor. Ici le CTA est un
   <button>, dont le defaut navigateur est cursor:default : mesure du 09/09 sur dev,
   la fleche ne changeait pas au survol, et le seul retour restant etait le passage
   de --c-ink a --c-ink-hover, soit #241a12 vers #140d06, invisible a l'oeil sur du
   quasi-noir. Retour Thomas : « on ne voit pas que c'est cliquable ».
   Le depot a deja ce cas exact et sa reponse : .cc-cb-pay (tunnel.css:552), primaire
   encre rendu en <button>, pose cursor:pointer ET une ombre qui GRANDIT au survol
   (0 2px 8px -> 0 4px 14px). On reprend les deux, aux memes valeurs, plutot que
   d'inventer un troisieme comportement de survol pour le CTA le plus fort de la page. */
/* Capitales et interlettrage repris du bouton AJOUTER des lignes (.cc-wine-card__cart-button,
   mesure sur dev : uppercase, 11px, 1,76px d'interlettrage, soit 0,16em), retour Thomas du
   12/09. L'interlettrage est dit en em pour suivre la taille, qui n'est pas la meme ici. */
/* 🧨 inline-FLEX et non inline-block (retour Thomas du 12/09 : « centre l'interieur du
   cta desactive »). .btn-primary est un inline-block avec min-height : la boite de ligne
   se pose EN HAUT et la hauteur restante tombe en dessous. Tant que le picto faisait 24px
   la ligne remplissait les 48px et personne ne voyait rien ; la coche du bouton desactive
   fait 16px, sa ligne est plus basse, et le contenu s'est retrouve colle en haut.
   En flex centre sur les deux axes, le contenu est au milieu quelle que soit la taille du
   picto, aujourd'hui comme demain. */
.th-bar .btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--btn-lg-min-h);padding:var(--btn-lg-pad);font-size:12px;
  text-transform:uppercase;letter-spacing:.16em;cursor:pointer;transition:background .2s,box-shadow .2s}
/* 🧨 .btn-primary pose display:inline-block (site.css:8252), qui BAT la regle [hidden]
   de la feuille du navigateur : sans cette ligne les deux etats du bouton s'affichent
   cote a cote. Specificite (0,3,0) contre (0,1,0), elle passe. */
.th-bar .btn-primary[hidden]{display:none}
/* Le bouton et sa ligne d'explication, en colonne alignee a droite : .th-bar est un flex
   en space-between, sans ce conteneur la ligne se posait A COTE du bouton. */
.th-bar-cta{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
/* La ligne « Déjà dans votre panier », sous le bouton d'etat de la page du theme. Elle
   emprunte .vin-already a la fiche vin (site.css:2583) pour le ton et le lien ; il ne reste
   ici qu'a annuler la marge basse de la fiche, ou elle precede un pave de garanties. */
.th-bar .th-deja{margin:0;text-align:right}
.th-bar .th-deja[hidden]{display:none}
.th-bar .btn-primary:hover,
.th-bar .btn-primary:focus-visible{background:var(--c-ink-hover);box-shadow:0 4px 14px rgba(36,26,18,.26)}
.th-bar .btn-primary[disabled]{opacity:.55;cursor:default}
/* Le picto du CTA. site.css porte une liste de selecteurs qui met le SVG des CTA encre
   en or (".cc-wine-card__cart-button svg, .order-btn-primary svg, .cart-drawer-cta svg,
   .btn-ap-primary svg..." : fill et stroke a var(--clr-or)). C'est la convention de la
   maison : le picto d'un bouton encre est dore, plein. Le .btn-primary generique n'est
   pas dans cette liste, seul #compte-content .btn-primary y est : le bandeau echappait
   donc a la regle et rendait un caddie BLANC au trait, quand le bouton « Ajouter » de
   chaque ligne, lui, en rend un dore plein (mesure du 09/09 : stroke blanc contre
   rgb(184,138,62)). Retour Thomas : les deux pictos doivent se ressembler.
   Les deux declarations sont reprises telles quelles ; leur place est dans cette liste
   de site.css le jour ou elle est retouchee.
   18px et non les 24px par defaut de cc_icon() : c'est la taille que .cc-cb-pay
   (tunnel.css) donne au sien pour un libelle de 15px, la seule autre reference de gros
   CTA encre du depot. 24px pesait le double du libelle de 12px d'a cote. */
.th-bar .btn-primary svg,
.th-bar .btn-primary svg *{fill:var(--clr-or);stroke:var(--clr-or)}
.th-bar .btn-primary svg{width:18px;height:18px}
.th-apercu{margin:14px 0 0;padding:10px 14px;background:var(--fb-wa-bg);border:1px solid var(--fb-wa-bd);color:var(--fb-wa-tx);border-radius:var(--radius-s);font-size:13px}

/* ---- lignes de la page theme ---- */
/* Mesure des bandeaux et des lignes. Le gabarit pleine largeur de cette page donne un
   .container de 1248px : les lignes faisaient 1200px pour trois lignes de texte court
   et un bloc d'achat de 222px, soit 650px de vide entre le nom du vigneron et le prix
   (mesure du 09/09, retour Thomas : « de grandes lignes vides »). 980px ramene ce vide
   a ~430px sans desaligner quoi que ce soit : bandeaux, lignes et .th-head partagent
   le meme bord gauche, et la page garde une seule colonne de lecture, celle du titre
   et du pitch. Pose sur les DEUX (bandeau et liste) : les desolidariser ferait flotter
   le bandeau au dessus d'une liste plus courte.
   box-sizing conserve sur .th-bar : son padding horizontal est nul depuis la variante
   sans boite, mais la garde reste juste le jour ou on lui en redonne (avant, ses 22px
   s'ajoutaient au max-width et le sortaient 46px plus large que la liste). */
.th-bar,.th-list{max-width:980px;box-sizing:border-box}
/* margin-bottom 44px : c'est le bandeau du bas qui portait cet air sous la liste
   (.th-bar--bottom{margin:18px 0 44px}, supprimee avec lui le 09/09). Sans elle la
   derniere ligne colle au bloc newsletter. */
.th-list{list-style:none;margin:10px 0 44px;padding:0;border-top:1px solid var(--c-line)}
.th-row{display:grid;grid-template-columns:120px 1fr 230px;gap:26px;padding:22px 0;border-bottom:1px solid var(--c-line);align-items:center}
.th-row-photo{height:150px;display:flex;align-items:center;justify-content:center}
.th-row-photo img{height:150px;width:auto;display:block}
.th-row-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.th-row-step{font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--c-accent-text);font-weight:700}
/* wc-appell / wc-dot / wc-title / wc-name / wc-vigneron : composant partage avec la
   carte catalogue, mais TOUTES ses regles sont ecrites ".wine-card .wc-xxx" dans
   site.css (verifie le 08/09, premier rendu reel de cette feuille : sans ceci la
   ligne sortait en texte brut non stylise, pastille couleur invisible). On ne pose
   PAS la classe .wine-card ici : elle porte tout le chrome de carte (fond, bordure,
   overflow:hidden) ET le survol qui recolore la carte au hover
   (body.cc-cardhover-bplus .wine-card:hover), ce que la doctrine catalogue interdit
   explicitement pour une ligne (le survol ne colore jamais une carte NI une ligne).
   Ces quelques regles reprennent donc les MEMES valeurs, memes tokens, sous
   .th-row-info au lieu de .wine-card. .wc-dot lit --wine-accent directement (pose
   par les classes .wc-rouge/.wc-blanc/... deja utilisees hors wine-card ailleurs,
   cf. inc/catalogue_filtre.inc.php : "source de verite unique... l'autocompletion
   de recherche lit aussi ici"), plutot que --wine (qui n'existe que via .wine-card). */
.th-row-info .wc-appell{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;min-height:15px;font-family:var(--ff-title);font-size:10px;letter-spacing:.22em;color:var(--c-text);text-transform:uppercase;font-weight:500;margin:0}
.th-row-info .wc-appell-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* fix round 1 (revue) : align-self et box-shadow manquaient. Valeurs relevees
   VERBATIM sur site.css:10064-10073 (".wine-card .wc-dot, .cc-ac-vin .wc-dot"),
   le double lisere (anneau noir fin dessus, halo tres pale dessous) qui rend la
   pastille lisible sur fond clair meme pour les teintes tres pales (blanc
   #F5E6A0, bulles #EFCF98) ou la couleur elle-meme ne suffit pas ; site.css:9980
   dit explicitement que c'est CETTE pastille, et elle seule, qui porte la
   couleur du vin sur la carte. La doctrine du depot (commentaire site.css:
   10058-10063) voudrait que .th-row-info soit ajoute AU SELECTEUR EXISTANT
   plutot que ces deux proprietes recopiees ici : c'est le bon reflexe partout
   ailleurs dans ce fichier, mais la spec de cette tache (6.2) interdit de
   toucher site.css pour ce chantier (aucun bump de son buster ni du $ver du
   blog), pour ne pas elargir la surface deployee par ce lot. rgba(0,0,0,.16)
   et rgba(0,0,0,.05) ne sont pas des couleurs choisies ici : c'est la
   definition du composant, noir pur, sans equivalent dans les tokens du
   :root (qui ne porte qu'un --btn-shadow, pour les boutons). Le jour ou
   site.css est retouche pour une autre raison, ces deux lignes devront y
   etre repliees dans le selecteur d'origine plutot que de rester une copie. */
/* margin-left:0 et NON auto, seule divergence assumee avec le composant d'origine.
   site.css:10066 pose margin-left:auto pour piner la pastille au bord DROIT de la
   carte, et 10253 l'etend au mobile (arbitrage Thomas du 15/07, qui revient sur le
   correctif L7 « point orphelin »). Cet arbitrage vaut pour un conteneur etroit :
   une carte de ~230px, une ligne de suggestion de ~420px, ou « a droite » reste a
   cote du libelle. Ici la colonne d'info fait 778px (mesure du 09/09 a 1400px) :
   auto posait la pastille a 650px de l'appellation qu'elle qualifie, collee au
   bloc de prix, ou elle se lit comme un element du prix. C'est le « point orphelin »
   que le correctif L7 nommait deja. Retour Thomas du 09/09 : « la couleur semble
   perdue a droite ». On la recolle donc au libelle ICI, et ICI SEULEMENT : ni la
   carte ni l'autocompletion ne changent. */
.th-row-info .wc-dot{margin-left:0;align-self:center;width:13px;height:13px;border-radius:50%;background:var(--wine-accent,var(--c-accent-text));flex-shrink:0;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.05)}
.th-row-info .wc-title{display:block;color:inherit;text-decoration:none}
.th-row-info .wc-name{font-family:var(--ff-title);font-weight:600;font-size:16px;line-height:1.25;color:var(--c-text-strong)}
.th-row-info .wc-vigneron{font-family:var(--ff-title);font-style:normal;font-weight:500;font-size:14px;color:var(--c-text)}
/* Le vigneron est passe DANS le lien du vin (arbitrage Thomas du 09/09, alignement sur la
   carte catalogue) : il n'est plus un lien lui meme, les trois regles qui le traitaient en
   lien secondaire sont supprimees plutot que laissees en code mort.
   La marge, elle, n'est pas decorative : .th-row-info est un flex column a gap:6px, et le
   nom du vigneron vient de SORTIR de cette pile pour entrer dans le lien, ou plus aucun gap
   ne s'applique a lui. 6px est donc la valeur du gap perdu, pas une valeur choisie ici. */
.th-row-info .wc-title .wc-vigneron{margin-top:6px}
.th-quote{margin:6px 0 0;font-size:15px;font-weight:500;line-height:1.5;color:var(--c-text-strong);max-width:60ch}
.th-quote .th-m{color:var(--c-accent);font-size:22px;line-height:0;vertical-align:-6px;font-weight:700;margin-right:3px}
.th-row-buy{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.th-row-buy .th-prices{display:flex;align-items:baseline;gap:8px}
.th-row-buy .th-price{font-size:20px;font-weight:700;color:var(--c-accent-text);line-height:29px}
.th-row-buy .th-unit{font-size:11px;color:var(--c-text)}
/* Le <form> d'achat d'une ligne reprend .cc-wine-card__actions (site.css:3881), qui
   n'est PAS un conteneur d'achat neutre : c'est la moitie CACHEE d'un composant a
   survol (position:absolute, opacity:0, pointer-events:none, translateY(100%)),
   revelee par .cc-wine-card:hover. Hors d'une carte, la regle de reveal ne matche
   jamais. Mesure du 08/09 sur dev, avant ce correctif : les trois blocs d'achat de la
   page etaient invisibles et inertes en desktop (getComputedStyle : opacity 0,
   pointer-events none), et en mobile ils redevenaient visibles mais gardaient
   position:absolute, donc s'empilaient tous les trois au meme point, PAR DESSUS le
   bandeau du bas (elementFromPoint sur « Tout ajouter » rendait un a.btn-cart de
   ligne). Le HTML etait bon depuis le debut, seul le rendu etait mort.
   La refonte a deja resolu ce cas pour sa propre carte : .wine-card .wc-actions
   (site.css:10148) neutralise les MEMES quatre proprietes. On reprend ses
   declarations a l'identique plutot que d'en inventer. Recopiees ici, et non ajoutees
   a leur selecteur d'origine, pour la meme raison que le bloc .wc-dot plus haut dans
   ce fichier : la spec 6.2 de ce lot interdit de toucher site.css (son buster est
   partage avec le blog). Le jour ou site.css est retouche pour une autre raison, ces
   trois regles doivent y etre repliees en ajoutant .th-row-buy form au selecteur
   .wine-card .wc-actions, plutot que de rester une copie. */
.th-row-buy form{display:flex;gap:8px;margin:0;width:100%;position:static;opacity:1;pointer-events:auto;transform:none}
/* Les deux memes enfants que .wine-card .wc-actions (site.css:10150-10156). Sans eux
   le select retombe sur le legacy .cc-wine-card__qty, dont le fond est #151515 : un
   pave noir a cote d'un bouton encre, sur une page creme. */
.th-row-buy .cc-wine-card__qty{display:flex;flex:0 0 64px;margin:0;background:none}
.th-row-buy .cc-wine-card__qty select{width:100%;border:1px solid var(--clr-border,#d8d4c8);border-radius:var(--radius-s);background:#fff;font-family:var(--ff-title);font-size:13px;font-weight:500;color:var(--clr-text-dark,#1a1a1a);padding:0 6px;height:44px;cursor:pointer}
/* Le bouton et son icone, comme le <form> juste au dessus, retombaient sur le LEGACY
   faute de conteneur .wine-card : .cc-wine-card__cart-button (site.css:3923) en grille
   42px + 1fr avec box-shadow, et surtout .cc-wine-card__cart-icon (site.css:3968) qui
   porte width:42px, height:40px et background:#fff, soit un carre BLANC dans un bouton
   encre. Retour Thomas du 09/09 : « les CTA paniers ont l'air casses ». La refonte
   neutralise deja tout cela sous .wine-card .wc-actions (site.css:10196-10210), on en
   reprend les declarations a l'identique, meme raison que le bloc .th-row-buy form
   plus haut : site.css est hors perimetre de ce lot. L'icone du theme est un <svg>
   inline (cc_icon), pas un <img> : c'est donc la regle svg de 10209 qui sert, et le
   color:#fff du conteneur qui blanchit les traits par currentColor, l'accent or du
   picto restant pose en dur dans le SVG. */
.th-row-buy .cc-wine-card__cart-button{box-sizing:border-box;flex:1;width:auto;min-width:150px;min-height:0;grid-template-columns:none;background:var(--clr-ink);color:#fff;border:0;border-radius:var(--radius-s);cursor:pointer;height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ff-title);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;text-decoration:none;padding:0 10px;box-shadow:none;transition:background .18s}
.th-row-buy .cc-wine-card__cart-button:hover,
.th-row-buy .cc-wine-card__cart-button:focus-visible{background:var(--clr-ink-dark);color:#fff}
.th-row-buy .cc-wine-card__cart-icon{display:inline-flex;width:auto;height:auto;background:transparent;place-items:center;color:#fff}
.th-row-buy .cc-wine-card__cart-icon svg{width:16px;height:16px}
.th-row-buy .cc-wine-card__cart-button span:last-child{padding:0;white-space:nowrap}
.th-row.is-out .th-row-photo,.th-row.is-out .th-row-info > *:not(.th-quote){opacity:.5}
/* width:100% sur les DEUX (retour Thomas 09/09) : le bouton « Epuise » se calait a droite
   mais ne faisait que 95px, quand le pied d'achat des lignes livrables en fait 222 (select
   64 + 8 + bouton 150). Bord droit aligne, bord gauche a 127px de decalage : le regard qui
   descend la colonne trouvait un trou. Les deux remplissent maintenant la colonne, donc se
   correspondent exactement a toutes les largeurs.
   Le width:100% du formulaire corrige au passage un debordement de 2px sous 1130px, ou la
   colonne vaut 220 et sa largeur intrinseque 222 : il mordait sur la colonne de texte. */
.th-row-buy .btn-primary.is-off{width:100%;opacity:.45;cursor:default;box-shadow:none}

/* ---- coquille : le hub tombe dans le gabarit 3 colonnes historique
   (#wrappeur / col-gauche / col-centre / col-droite), faute de gabarit dedie
   ($is_contenu, $is_catalogue... ne couvrent pas cette page). Meme correctif
   que la fiche vin avant sa propre refonte pleine largeur (site.css, bloc
   "#page-vin #col-gauche, #page-vin #col-droite") : on repasse en pleine
   largeur pour cette seule page, identifiee par l'id de body genere depuis
   $p (index.php : body id="page-<?php echo preg_replace('#.inc.php#','',$p) ?>").
   #breadcrumb : navigation.inc.php n'emet rien ici (aucune ligne "paniers-
   thematiques" en table menu, verifie en local le 08/09 : ni <ol
   class="cc-breadcrumb"> ni BreadcrumbList) sauf un "&nbsp;" vide ; meme
   traitement que la home (site.css : "#page-index #breadcrumb"). ---- */
/* tache 5 (08/09) : la page theme (id de body "page-panier-thematique", singulier,
   genere depuis $p par index.php) tombe dans le MEME gabarit 3 colonnes que le hub,
   pour la MEME raison. Ajoutee AU SELECTEUR EXISTANT (idiome deja suivi par site.css
   pour .wc-dot, cf. ".cc-ac-vin .wc-dot") plutot que recopiee : un correctif de gabarit
   qui existerait en deux exemplaires divergerait au premier changement de l'un des
   deux sans qu'on y pense. */
#page-paniers-thematiques #col-gauche,
#page-paniers-thematiques #col-droite,
#page-panier-thematique #col-gauche,
#page-panier-thematique #col-droite{display:none}
#page-paniers-thematiques #wrappeur,
#page-panier-thematique #wrappeur{display:block}
#page-paniers-thematiques #col-centre,
#page-panier-thematique #col-centre{width:100%;max-width:none;margin:0;padding:0;box-sizing:border-box}
#page-paniers-thematiques #breadcrumb,
#page-panier-thematique #breadcrumb{display:none}

/* ---- Le recapitulatif de « Tout ajouter », variante du toast ----
   #cart-toast est le toast d'ERREUR du site : fond var(--c-danger), le rouge #c0392b
   (site.css:7640), nowrap, et pointer-events:none. Tous ses autres appelants annoncent
   un echec ; « Tout ajouter » est le seul a l'utiliser pour un succes, et peignait donc
   « 3 bouteilles ajoutees » en rouge d'erreur (mesure du 09/09 : rgb(192,57,43)).
   La variante is-recap le rhabille en encre, la surface des CTA et de la nav, avec le
   filet or a gauche, la meme signature que le bandeau de la page. nowrap saute : la
   phrase nomme les vins refuses, elle grandit avec eux, et faisait 526px pour un seul
   nom (elle aurait deborde en mobile). Le clic ferme, d'ou pointer-events retabli.
   Regle posee ICI et non dans site.css, meme raison que les blocs precedents de cette
   feuille : la spec 6.2 du lot interdit d'y toucher. Sans effet ailleurs, is-recap n'est
   pose que par l'appel de « Tout ajouter » (scripts/cart-drawer.js), et paniers.css est
   servie sur les trois seules pages ou ce bouton existe. Le jour ou site.css est
   retouche, cette variante a sa place a cote de #cart-toast.
   width:max-content n'est pas decoratif : le toast est en position:fixed a left:50%,
   donc son shrink-to-fit ne dispose que de la MOITIE droite de l'ecran. Sans lui,
   max-width ne sert a rien et la boite tombe a 195px de large sur un ecran de 390.
   box-sizing:border-box pour la meme raison qu'ailleurs dans cette feuille : en
   content-box les 42px de padding et le filet de 3px s'AJOUTENT au max-width, la
   boite ressortait a 403px sur un ecran de 390 et debordait de 6px a gauche. ---- */
#cart-toast.is-recap{box-sizing:border-box;background:var(--c-ink);color:#fff;white-space:normal;pointer-events:auto;cursor:pointer;
  width:max-content;max-width:min(560px,calc(100vw - 32px));padding:14px 20px 14px 22px;text-align:left;line-height:1.45;
  border-left:3px solid var(--c-accent);border-radius:var(--radius-s);box-shadow:0 6px 22px rgba(36,26,18,.28)}


/* ---- La feuille de confirmation au PLURIEL (12/09) ----
   « Tout ajouter » ouvre desormais la meme feuille #cart-added qu'un ajout unitaire,
   avec N blocs produit au lieu d'un (cc_added_panel_payload_lot, ajax_panier.php).
   Regles posees ICI et non dans site.css, meme raison que les blocs precedents de
   cette feuille : la spec 6.2 du lot interdit d'y toucher. Sans effet ailleurs, ces
   classes ne sont emises que par le panneau d'un panier thematique, et paniers.css
   n'est servie que sur les trois pages ou le bouton existe.
   Valeurs RECOPIEES de la reference, pas choisies : .ap-appel (site.css:7446) pour le
   sur-titre, .ap-recap (7503) pour le fond et le filet, .ap-product (7425) pour le
   padding lateral de 18px. ---- */
.ap-lot-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  padding:13px 18px 11px;background:var(--clr-bg-light);border-bottom:1px solid var(--c-border-struct)}
.ap-lot-kicker{font-size:.625rem;text-transform:uppercase;letter-spacing:1.3px;
  color:var(--clr-or-text);font-weight:700}
.ap-lot-titre{flex:1 1 100%;font-size:.95rem;font-weight:700;color:var(--clr-text-dark);line-height:1.25}
.ap-lot-compte{font-size:.72rem;color:var(--clr-text)}

/* Variante compacte du bloc produit. La vignette descend de 58x76 a 44x58 et les tags
   disparaissent : ce n'est pas une economie de style, c'est ce qui rend la feuille
   lisible. Un theme de huit vins empilait huit blocs pleine taille, soit environ
   1000px de liste avant meme le recap, donc un CTA « Voir mon panier » hors de vue
   sur tout ecran d'ordinateur portable. Les tags (vigneron, couleur, format) restent
   sur la fiche et dans le tiroir ; ici, huit fois trois pastilles sont du bruit. */
.ap-product--lot{gap:11px;padding:11px 18px}
.ap-product--lot .ap-bottle{width:44px;height:58px;box-shadow:2px 3px 9px rgba(0,0,0,.10)}
.ap-product--lot .ap-tags{display:none}
.ap-product--lot .ap-name{font-size:.82rem;margin-bottom:5px}
.ap-product--lot .ap-appel{font-size:.58rem;letter-spacing:1.1px}

/* Ce qui n'a PAS pu entrer. Le resume (« 3 bouteilles ajoutees, 1 non ajoutee : X
   (epuise) ») partait jusqu'ici dans #cart-toast, en bas de l'ecran, a l'oppose du
   regard qui venait de cliquer un bouton en haut de page. Il se lit maintenant dans
   la feuille, sous les vins ajoutes. Encre sur creme et filet or, pas de rouge : ce
   n'est pas un echec, l'ajout a eu lieu. */
/* Rangee de remise du panier, sous les blocs de vins (13/09, Jean-Louis). Chaque bloc
   affiche desormais le tarif catalogue du vin : c'est ici, une seule fois, que se dit
   l'ecart. Fond blanc comme les blocs qu'elle resume, filet plein pour fermer la liste. */
.ap-lot-rem{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;
  padding:9px 13px;background:#fff;border-top:1px solid var(--c-line);
  font-size:12px;color:var(--c-text)}
.ap-lot-rem .ap-rem-mt{margin-left:auto;font-weight:700;color:var(--c-ink);
  white-space:nowrap}

.ap-lot-refus{display:flex;gap:9px;align-items:flex-start;
  padding:11px 18px;background:#fbf7ef;border-bottom:1px solid var(--c-border-struct);
  border-left:3px solid var(--c-accent);font-size:.76rem;line-height:1.45;color:var(--clr-text-dark)}
.ap-lot-refus svg{flex:none;margin-top:1px}

/* ---- mobile (breakpoint de reference du site : 1130px, puis 700px) ---- */
@media (max-width:1130px){
  .th-grid--4{grid-template-columns:repeat(2,1fr)}
  /* 230px comme au dessus de 1130 : a 220 la colonne etait plus etroite que la largeur
     intrinseque du pied d'achat (222), qui debordait donc de 2px sur le texte. */
  .th-row{grid-template-columns:100px 1fr 230px;gap:18px}
}
@media (max-width:700px){
  .th-grid,.th-grid--4{grid-template-columns:1fr}
  .th-visual{height:170px}
  .th-visual img{height:150px}
  .th-row{grid-template-columns:90px 1fr;gap:14px;padding:18px 0}
  .th-row-photo{height:120px}
  .th-row-photo img{height:120px}
  .th-row-buy{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .th-row-buy .cc-wine-card__cart-button{min-width:0}
  /* padding vertical seul : un padding horizontal ferait decrocher le bord gauche du
     bandeau de celui de la liste et du titre, que la variante sans boite aligne. */
  .th-bar{padding:18px 0 16px}
  /* Le pied d'achat prend la ligne entiere : c'est la meme reponse que le bandeau juste
     au dessus (.th-bar .btn-primary{width:100%}), et surtout min-width:0 retire au
     formulaire son min-width:auto d'element flex, la cause classique d'un enfant qui
     refuse de retrecir et deborde. Avec la ligne entiere pour lui, le bouton ne peut
     plus etre comprime au point de rogner son libelle. */
  .th-row-buy form{flex:1 1 100%;min-width:0}
  .th-bar .btn-primary{width:100%}
}
/* Mention du panier VERROUILLE (lot 2, spec 9.4). Elle explique pourquoi les lignes
   n'ont plus de bouton d'achat et ou trouver le vin a l'unite. Posee juste sous la
   barre de resume, dans son prolongement : meme largeur, meme colonne, une respiration
   au dessus de la liste. Registre discret, c'est une explication, pas une alerte. */
.th-verrou-note{margin:0 0 18px;font-size:13.5px;line-height:1.5;color:var(--c-text);
  max-width:66ch;border-left:3px solid var(--c-accent);padding-left:12px}
/* Prix d'une ligne sous VERROU (retour Thomas 09/09). Le prix barre est celui du
   catalogue : .th-price-old est ajoutee au selecteur de .wine-card .wc-price-old dans
   site.css, donc meme barre oblique en masque SVG. Ici, seulement sa taille et sa
   couleur, calees sur .th-price qui vit deux lignes plus haut. */
.th-row-buy--verrou{align-items:flex-end;gap:2px}
.th-row-buy .th-price-old{font-size:15px;font-weight:600;color:var(--c-text);opacity:.75}
/* « à l'unité » nomme le prix BARRE. Il se lit avec lui, pas sous le prix payé :
   c'est le nombre barré qui avait besoin d'un nom, l'autre s'en déduit. */
/* 🧨 PLUS d'empilement (retour Thomas du 12/09, constate sur Android Firefox : « le prix
   barre apparait a un endroit incongru »). L'empilement datait du temps ou le prix barre
   portait le mot « a l'unite », qui avait besoin de sa ligne ; ce mot n'existe plus qu'en
   version lue a voix haute. Restaient deux nombres empiles et alignes a DROITE, de
   largeurs tres differentes : « 40 € » (36px) au dessus de « 30 € / Bouteille » (109px en
   desktop, pres du triple en mobile ou la police grossit). Le barre se retrouvait donc
   suspendu au dessus du milieu de l'autre ligne, sans rapport visible avec lui.
   Une seule ligne, comme la carte du catalogue et comme les lignes NON verrouillees juste
   au dessus (l.285) : le barre precede le prix paye sur la meme ligne de base.
   flex-wrap en secours : si la place manque vraiment, il repasse a la ligne A GAUCHE,
   c'est a dire au meme bord que le prix paye, et non plus flottant a droite. */
.th-row-buy--verrou .th-prices{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:8px}
.th-row-buy--verrou .th-price-was,
.th-row-buy--verrou .th-price-now{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
/* Le total hors panier, dans le bandeau du haut : même composant barré que les
   lignes, un cran plus discret que le total payé qui reste la vedette. */
.th-bar-total .th-price-old{font-size:15px;font-weight:600;color:var(--c-text);opacity:.7;margin-right:2px}