/* =============================================================================
   GLASSORA — LE BON À GRAVER (composant du panier)

   « Bon à graver » n'est pas un libellé technique : c'est un ENGAGEMENT. Le
   client déclare que ce qu'il voit est ce qu'il veut voir gravé, et rien ne
   part en production avant. Le bloc doit donc se lire comme un document qu'on
   approuve — texte gravé mis en valeur, une seule action forte, une phrase qui
   dit ce qu'on engage — puis, une fois signé, se taire : l'état validé
   rassure, il ne réclame plus rien.

   BALISAGE : produit par Glassora_Cart::render_bat_block()
   (includes/class-glassora-cart.php), hook `woocommerce_after_cart_item_name`.
   Ce fichier ne fait que l'habiller ; aucune classe n'y est inventée.
       .glassora-bat[data-glassora-bat]
         └ .glassora-bat__title        « Votre bon à graver »
         └ .glassora-bat__faces        les aperçus (recto, et verso s'il existe)
              └ figure.glassora-bat__face > img.glassora-bat__apercu + figcaption
         └ .glassora-bat__file         fichier client éventuel
         └ .glassora-bat__actions
              ├ a.glassora-bat__download            télécharger le BAT
              ├ a.glassora-bat__download.__edit     modifier la gravure
              ├ span.glassora-bat__seal > .__seal-mark      (validé)
              └ span.glassora-bat__pending                  (à valider)
                   ├ button.glassora-bat__validate
                   └ span.glassora-bat__hint
   `assets/js/glassora-bat.js` injecte en plus, le temps d'un aller-retour,
   `span.glassora-bat__badge.glassora-bat__badge--ok` avant de recharger la
   page : il est habillé ici aussi, sinon la seconde qui suit le clic est laide.

   JETONS : ceux du thème (base.css) pour les couleurs, et l'échelle `--gc-*`
   posée par `glassora-cart-page.css`. Des valeurs de repli accompagnent chaque
   `--gc-*` : cette feuille est chargée AVANT l'autre (elle en est la
   dépendance), et elle doit rester lisible même seule.
   Règle de maison rappelée : or sur fond clair = --gold-ink, jamais --gold.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   LE DOCUMENT
   Voile champagne, filet champagne : la même matière que les cartouches de
   l'atelier. Il se détache de la carte blanche sans la trouer.
-------------------------------------------------------------------------------- */
.woocommerce-cart .glassora-bat {
  display: flex;
  flex-direction: column;
  gap: var(--gc-2, 8px);
  margin: 0;
  padding: var(--gc-4, 16px) var(--gc-5, 24px);
  border: 1px solid var(--champ);
  border-radius: var(--r-field, 12px);
  background: var(--gc-tint, #FAF7EF);
}

/* Une fois signé, le document se calme : fond blanc, filet champagne dilué.
   Plus de voile doré qui appelle l'œil — il n'y a plus rien à y faire.
   `:has()` évite de demander au gabarit de rejouer une décision métier qui
   vit dans le plugin (l'empreinte de configuration compte dans la validité). */
.woocommerce-cart .glassora-bat:has(.glassora-bat__seal),
.woocommerce-cart .glassora-bat:has(.glassora-bat__badge--ok) {
  border-color: var(--gc-rule-gold, rgba(200, 169, 106, .38));
  background: var(--gc-surface, #ffffff);
}

/* -----------------------------------------------------------------------------
   L'INTITULÉ
   Étiquette d'atelier : capitales fines, or lisible, précédée d'un filet.
-------------------------------------------------------------------------------- */
.woocommerce-cart .glassora-bat__title {
  display: flex;
  align-items: center;
  gap: var(--gc-2, 8px);
  margin: 0;
  font-family: var(--head);
  font-size: var(--gc-fs-micro, 11px);
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.woocommerce-cart .glassora-bat__title::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 1px;
  background: var(--gold);
}

/* LA GRAVURE — le texte gravé n'est plus recopié sous les aperçus : il se lit
   dans les aperçus eux-mêmes, à la place qu'il occupera sur le verre. Les
   règles `.glassora-bat__engraving` sont donc parties avec lui. */

.woocommerce-cart .glassora-bat__file {
  margin: 0;
  font-family: var(--head);
  font-size: var(--gc-fs-fine, 12px);
  line-height: 1.5;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* -----------------------------------------------------------------------------
   LES ACTIONS
   Ordre de lecture ET ordre de tabulation identiques, volontairement :
   examiner (télécharger) → corriger (modifier) → approuver (valider).
   L'engagement arrive en dernier, seul sur sa ligne, avec sa mise en garde.
-------------------------------------------------------------------------------- */
.woocommerce-cart .glassora-bat__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gc-2, 8px) var(--gc-3, 12px);
  margin-top: var(--gc-2, 8px);
}

/* Actions secondaires : contour, jamais de aplat — elles ne doivent pas
   entrer en concurrence avec la validation. */
.woocommerce-cart .glassora-bat__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--gc-tap, 44px);
  padding: 0 var(--gc-4, 16px);
  border: 1px solid var(--line);
  border-radius: var(--r-btn, 14px);
  background: var(--gc-surface, #ffffff);
  color: var(--ink) !important; /* `.woocommerce a` du cœur force sa couleur de lien */
  font-family: var(--head);
  font-size: var(--gc-fs-sm, 13px);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.woocommerce-cart .glassora-bat__download:hover,
.woocommerce-cart .glassora-bat__download:focus-visible {
  border-color: var(--gold);
  color: var(--gold-ink) !important;
}

/* -----------------------------------------------------------------------------
   L'ENGAGEMENT
   Pleine largeur : c'est la seule chose qui reste à faire sur cette pièce, et
   sur mobile c'est aussi la plus facile à atteindre.
-------------------------------------------------------------------------------- */
.woocommerce-cart .glassora-bat__pending {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gc-2, 8px);
  flex: 1 0 100%;
  margin-top: var(--gc-1, 4px);
  padding-top: var(--gc-3, 12px);
  border-top: 1px solid var(--gc-rule-gold, rgba(200, 169, 106, .38));
}
.woocommerce-cart .glassora-bat__validate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--gc-tap, 44px);
  padding: 0 var(--gc-6, 32px);
  border: 1px solid var(--ink);
  border-radius: var(--r-btn, 14px);
  background: var(--ink);
  color: var(--gc-on-ink, #ffffff); /* base.css n'a pas de jeton « encre inversée » */
  font-family: var(--head);
  font-size: var(--gc-fs-md, 14px);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.2;
  cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.woocommerce-cart .glassora-bat__validate:hover:not(:disabled),
.woocommerce-cart .glassora-bat__validate:focus-visible:not(:disabled) {
  background: var(--lux);
  border-color: var(--lux);
}
.woocommerce-cart .glassora-bat__validate:disabled {
  opacity: .55;
  cursor: wait;
}

/* La mise en garde. Elle n'est pas un détail : c'est elle qui rend la
   validation consciente (« votre pièce sera gravée à l'identique »), et c'est
   elle qui explique le retour à l'état « à valider » quand la gravure a
   changé après coup. */
.woocommerce-cart .glassora-bat__hint {
  display: block;
  font-family: var(--head);
  font-size: var(--gc-fs-fine, 12px);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

/* -----------------------------------------------------------------------------
   LE SCEAU
   État validé. Un cachet d'atelier : filet champagne, double liseré intérieur,
   étoile or. Il ne bouge pas, il ne clique pas — il atteste.
-------------------------------------------------------------------------------- */
.woocommerce-cart .glassora-bat__seal,
.woocommerce-cart .glassora-bat__badge--ok {
  display: inline-flex;
  align-items: center;
  gap: var(--gc-2, 8px);
  flex: 0 1 auto;
  min-height: var(--gc-tap, 44px);
  padding: 0 var(--gc-5, 24px);
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--gc-surface, #ffffff);
  box-shadow: inset 0 0 0 3px var(--gc-tint, #FAF7EF);
  color: var(--gold-ink);
  font-family: var(--head);
  font-size: var(--gc-fs-sm, 13px);
  font-weight: 700;
  line-height: 1.3;
}
.woocommerce-cart .glassora-bat__seal-mark {
  font-size: var(--gc-fs-lg, 16px);
  line-height: 1;
  color: var(--gold);
}

/* -----------------------------------------------------------------------------
   MOBILE
   Les deux actions secondaires partagent une ligne, l'engagement prend toute
   la largeur : une cible impossible à manquer au pouce.
-------------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .woocommerce-cart .glassora-bat {
    padding: var(--gc-4, 16px);
  }
  .woocommerce-cart .glassora-bat__download {
    flex: 1 1 auto;
    padding: 0 var(--gc-3, 12px);
  }
  .woocommerce-cart .glassora-bat__validate {
    width: 100%;
    padding: 0 var(--gc-4, 16px);
  }
  .woocommerce-cart .glassora-bat__seal,
  .woocommerce-cart .glassora-bat__badge--ok {
    flex: 1 1 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce-cart .glassora-bat *,
  .woocommerce-cart .glassora-bat *::before {
    transition: none !important;
    animation: none !important;
  }
}

/* --- Caracteristiques du bon a graver -------------------------------------
   Memes lignes que dans la fenetre flottante (elles viennent de la meme
   fonction serveur, bat_rows) : l'habillage differe, jamais le contenu.
   Ici on est dans le flux de la page, la ou le client relit son panier avant
   de payer — le bloc peut donc respirer un peu plus.
   -------------------------------------------------------------------------- */
.glassora-bat__specs {
	margin: 12px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var( --line, rgba( 17, 24, 39, .1 ) );
	display: grid;
	gap: 7px;
}

.glassora-bat__spec {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	font-size: .82rem;
	line-height: 1.4;
}

.glassora-bat__spec dt {
	margin: 0;
	color: var( --muted, #5F6470 );
}

.glassora-bat__spec dd {
	margin: 0;
	color: var( --ink, #111827 );
	font-weight: 600;
	text-align: right;
	/* Chiffres de meme chasse : les cotes se comparent en colonne. */
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.glassora-bat__spec--fort dt { color: var( --ink, #111827 ); }

.glassora-bat__spec--fort dd {
	color: var( --gold-ink, #7A6224 );
	font-size: .94rem;
	font-weight: 700;
}

/* Ce que « valider » engage. Discret mais present : le laser ne se reprend
   pas, et le client doit le lire AVANT de cliquer, pas le decouvrir apres. */
.glassora-bat__mention {
	margin: 10px 0 0;
	color: var( --muted, #5F6470 );
	font-size: .76rem;
	line-height: 1.45;
}

/* -----------------------------------------------------------------------------
   QUAND LE BOUTON SERT LE VRAI DOCUMENT

   Le bouton « Télécharger le BAT » servait un JPG d'aperçu ; il sert désormais
   le bon à tirer complet — gabarit à l'échelle 1:1, réglette en mm, cartouche
   de signature — dès qu'un dépôt existe pour la ligne (voir
   Glassora_Bat_Pdf::lien_telechargement()). Son libellé s'allonge d'un
   « · PDF 1:1 » : cette mention n'est pas décorative, c'est ce qui distingue un
   document imprimable et mesurable d'une image.

   Aucune classe n'est inventée ici non plus : le balisage vient toujours de
   render_bat_block(), qui ne pose que `.glassora-bat__download`. On distingue
   donc le téléchargement de la retouche par `:not(.glassora-bat__edit)`, seule
   différence réelle entre les deux ancres.
-------------------------------------------------------------------------------- */

/* Le libellé plus long doit pouvoir passer à la ligne SANS déborder ni écraser
   son voisin : sur une ancre en `inline-flex`, un texte qui revient à la ligne
   se centre mal et les deux boutons de la rangée cessent d'avoir la même
   hauteur. Les deux réglages ci-dessous referment ce cas. */
.woocommerce-cart .glassora-bat__actions {
	align-items: stretch;
}

.woocommerce-cart .glassora-bat__download {
	padding-top: 6px;
	padding-bottom: 6px;
	text-align: center;
	text-wrap: balance;
}

/* Une seule nuance dorée pour signaler le document qui engage — or sur fond
   clair = --gold-ink, jamais --gold. Le survol continue de tout dorer : cet
   état-ci ne fait que dire, au repos, lequel des deux boutons est le document. */
.woocommerce-cart .glassora-bat__download:not( .glassora-bat__edit ) {
	border-color: var( --gc-rule-gold, rgba( 200, 169, 106, .38 ) );
}

@media ( max-width: 720px ) {
	/* Le document prend la rangée entière : à deux par ligne, « Télécharger le
	   BAT · PDF 1:1 » se casse en trois lignes sur un téléphone étroit. */
	.woocommerce-cart .glassora-bat__download:not( .glassora-bat__edit ) {
		flex: 1 1 100%;
	}
}

/* -----------------------------------------------------------------------------
   CE QUE LE SCRIPT AJOUTE

   `assets/js/glassora-bat.js` est le SEUL à poser les trois nœuds ci-dessous.
   Ils n'existent pas dans render_bat_block() parce qu'ils n'ont de sens qu'à
   l'exécution — un échec qu'on vient de subir, un document qu'on constate
   absent, un panier incomplet qu'on relit à chaque redessin de WooCommerce.
   Habillés ici, faute de quoi ils apparaîtraient nus au pire moment : celui où
   le client ne comprend déjà plus ce qui se passe.

   Le jour où le PHP les rendra lui-même (ce serait mieux : ils survivraient au
   rafraîchissement AJAX et existeraient sans JS), ces règles n'auront pas à
   changer — elles ne portent que sur des classes, jamais sur l'origine du nœud.
-------------------------------------------------------------------------------- */

/* Un nœud masqué doit VRAIMENT disparaître : les règles de ce fichier posent
   des `display` explicites, qui l'emportent sur le `[hidden]` de la feuille du
   navigateur. Sans cette ligne, masquer reviendrait à ne rien faire. */
.woocommerce-cart .glassora-bat [hidden],
.woocommerce-cart .glassora-bat-gate[hidden] {
	display: none !important;
}

/* -----------------------------------------------------------------------------
   L'ÉCHEC DE VALIDATION
   Le client vient de cliquer sur le seul bouton qui engage, et ça n'a pas
   marché. Le message se pose SOUS ce bouton — là où il regardait — dans la
   famille d'alerte de la page panier, jamais un rouge de navigateur.
   `role="alert"` est posé par le script : ce texte doit être annoncé sans
   qu'on ait à le chercher.
-------------------------------------------------------------------------------- */
.woocommerce-cart .glassora-bat__echec {
	/* PLEINE LARGEUR, HAUTEUR AU CONTENU.
	   `.glassora-bat__pending` empile en COLONNE : dans ce sens, `flex-basis`
	   regle la HAUTEUR, pas la largeur. Le `flex: 1 0 100%` ecrit ici demandait
	   donc une hauteur de base egale a celle du bloc, plus le droit de grandir —
	   la boite gonflait et passait par-dessus le prix. La pleine largeur, dans
	   une pile verticale, s obtient par l axe TRANSVERSE. */
	align-self: stretch;
	flex: 0 0 auto;
	margin: 0;
	padding: var( --gc-3, 12px ) var( --gc-4, 16px );
	border: 1px solid var( --gc-alert-line, #D9BFBF );
	/* Le filet gauche appuyé : la même signature que les notices de la page. */
	border-left: 3px solid var( --gc-alert, #8A2B2B );
	border-radius: var( --r-field, 12px );
	background: var( --gc-alert-bg, #FBF1F1 );
	color: var( --gc-alert-ink, #7A2424 );
	font-family: var( --head );
	font-size: var( --gc-fs-fine, 12px );
	line-height: 1.55;
	text-wrap: pretty;
}

/* -----------------------------------------------------------------------------
   L'APERÇU QUI MANQUE
   Ni le PDF ni l'image n'ont pu être conservés : il n'y a rien à approuver.
   Le bouton d'engagement a été retiré par le script, et ce bloc prend sa
   place. Il n'est PAS traité en alerte rouge — rien n'est cassé du côté du
   client, sa gravure existe toujours ; c'est une étape à refaire, pas une
   faute. Voile champagne, donc, et un chemin de sortie en pleine largeur.
-------------------------------------------------------------------------------- */
.woocommerce-cart .glassora-bat__manquant {
	flex: 1 0 100%;
	margin: 0;
	font-family: var( --head );
	font-size: var( --gc-fs-fine, 12px );
	line-height: 1.55;
	color: var( --muted );
	text-wrap: pretty;
}

/* Devenu la seule action de la ligne, ce lien prend l'habit de l'engagement
   qu'il remplace : même hauteur, même cible, même poids. Un lien discret
   passerait pour une option, alors que c'est le seul chemin qui reste. */
.woocommerce-cart .glassora-bat__reprendre {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var( --gc-tap, 44px );
	padding: 6px var( --gc-6, 32px );
	border: 1px solid var( --ink );
	border-radius: var( --r-btn, 14px );
	background: var( --ink );
	color: var( --gc-on-ink, #ffffff ) !important; /* `.woocommerce a` force sa couleur de lien */
	font-family: var( --head );
	font-size: var( --gc-fs-md, 14px );
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	text-wrap: balance;
	transition: background .3s var( --ease ), border-color .3s var( --ease );
}

.woocommerce-cart .glassora-bat__reprendre:hover,
.woocommerce-cart .glassora-bat__reprendre:focus-visible {
	background: var( --lux );
	border-color: var( --lux );
}

.woocommerce-cart .glassora-bat__reprendre:focus-visible {
	outline: 2px solid var( --gold-ink, #7A6224 );
	outline-offset: 2px;
}

@media ( max-width: 720px ) {
	.woocommerce-cart .glassora-bat__reprendre {
		width: 100%;
		padding-left: var( --gc-4, 16px );
		padding-right: var( --gc-4, 16px );
	}
}

/* -----------------------------------------------------------------------------
   LA PORTE DE CAISSE
   Ce qui manque avant de commander, dit AVANT le formulaire de commande et
   non après. Le script pose ce paragraphe juste au-dessus du pied d'action —
   sous 981 px ce pied est une barre fixée dont la hauteur est réservée par
   `--gc-bar-h` : rien ne doit y être ajouté, sinon la barre recouvre le panier.
   Le bouton, lui, n'est jamais grisé : il annonce l'étape qui manque et y
   emmène. Ce texte n'est donc pas un refus, c'est la légende du bouton.
-------------------------------------------------------------------------------- */
.woocommerce-cart .glassora-bat-gate {
	display: block;
	margin: var( --gc-3, 12px ) 0 0;
	padding: var( --gc-3, 12px ) var( --gc-4, 16px );
	border: 1px solid var( --gc-rule-gold, rgba( 200, 169, 106, .38 ) );
	/* Filet doré appuyé à gauche, et AUCUNE puce : l'étoile ✦ appartient au
	   sceau, elle dit « validé ». La réutiliser ici pour dire l'inverse
	   brouillerait le seul signe que le client a appris à lire sur cette page. */
	border-left: 3px solid var( --gold-ink, #7A6224 );
	border-radius: var( --r-field, 12px );
	background: var( --gc-tint, #FAF7EF );
	color: var( --ink );
	font-family: var( --head );
	font-size: var( --gc-fs-fine, 12px );
	line-height: 1.55;
	text-wrap: pretty;
}

@media ( prefers-reduced-motion: reduce ) {
	.woocommerce-cart .glassora-bat__reprendre {
		transition: none !important;
	}
}

/* --- Les faces du bon a graver, en image --------------------------------
   Ce bloc decrivait la gravure sans jamais la montrer, alors que c'est ici
   que le client valide. Sur une gravure recto/verso il ne voyait que la
   vignette du recto : il pouvait s'engager sans avoir vu le verso.

   Deux faces cote a cote, une seule pleine largeur mais bridee : l'apercu
   doit etre REGARDABLE sans pour autant pousser le bouton de validation
   hors de l'ecran — c'est le defaut qu'on a mesure sur la loupe.
   ------------------------------------------------------------------------ */
.glassora-bat__faces {
	display: flex;
	gap: 10px;
	margin: 10px 0 12px;
	align-items: flex-start;
}

.glassora-bat__face {
	margin: 0;
	flex: 0 1 auto;
	min-width: 0;
}

.glassora-bat__faces--duo .glassora-bat__face { flex: 1 1 0; }

/* SPECIFICITE : le bloc est repete a dessein. WooCommerce impose
   `.woocommerce img { height: auto }` (une classe + un element), qui bat une
   classe seule — la hauteur figee plus bas etait donc ignoree, la boite
   s'ecrasait a 2 px avant chargement et la page sautait. Deux classes
   suffisent a reprendre la main ; inutile d'aller jusqu'a !important. */
.glassora-bat .glassora-bat__apercu {
	display: block;
	width: 100%;
	max-width: 150px;
	/* CENTRAGE : sans ces marges auto, l'image bridee a `max-width` restait
	   collee a gauche de sa figure, tandis que la legende, elle, se centrait
	   sur la figure entiere. RECTO et VERSO tombaient donc a cote de leur
	   verre. Image et legende partagent desormais le meme axe. */
	margin-inline: auto;
	/* Le cadre ne doit jamais deformer la gravure : mieux vaut du vide
	   autour qu'un verre etire. */
	object-fit: contain;
	/* Hauteur FIXE, pas un maximum. Une image en chargement differe n'a pas
	   encore de dimensions : avec un simple maximum, la boite s'ecrasait a
	   2 px, la page sautait a l'arrivee de l'image, et les deux faces ne
	   s'alignaient pas. La regle object-fit: contain garantit qu'une boite
	   fixe ne deforme rien — c'est la seule facon d'avoir les deux a la fois. */
	height: 210px;
	border: 1px solid var( --line, rgba( 17, 24, 39, .1 ) );
	border-radius: var( --r-field, 12px );
	/* BLANC, et non le creme de la page. La photo du verre est sur fond
	   blanc et le cadre est plus large qu'elle : tout fond colore se voyait
	   donc en deux bandes verticales de part et d'autre du verre. Le filet
	   suffit a delimiter l'apercu. */
	background: #fff;
}

.glassora-bat__face figcaption {
	margin-top: 5px;
	color: var( --muted, #5F6470 );
	font-size: .72rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: center;
}

/* La planche de gauche ayant disparu, l'apercu du bon a graver est desormais
   la SEULE image de la carte : il peut prendre la place qu'elle occupait.
   C'est le document qu'on demande au client d'examiner avant de s'engager —
   90 px de large ne permettent de verifier ni une date ni une orthographe.
   En dessous de 720 px on garde 210 px : la barre d'action y est ancree en
   bas d'ecran, et une image plus haute repousserait le reste hors de vue. */
@media ( min-width: 721px ) {
	.glassora-bat .glassora-bat__apercu {
		height: 300px;
		max-width: 220px;
	}
}

/* -----------------------------------------------------------------------------
   « C'EST ICI » — la raison, posée à côté de l'action.

   Le message « un bon à graver reste à valider » vit dans le récapitulatif, en
   haut à droite. Le clic sur le bouton de commande grisé emmène pourtant le
   client EN BAS, devant un bouton qu'il n'a pas demandé, et l'explication est
   restée hors de l'écran. Remonté d'une bêta : « c'est très flou, un client
   qui clique par erreur est rapidement perdu. »

   Ton d'INFORMATION et non d'alerte : rien n'a échoué, on répond à « pourquoi
   suis-je ici ». D'où l'or de la maison plutôt que le rouge de `__echec`, qui
   doit rester réservé à ce qui s'est mal passé.
-------------------------------------------------------------------------------- */
.woocommerce-cart .glassora-bat__pourquoi {
	/* PLEINE LARGEUR, HAUTEUR AU CONTENU.
	   `.glassora-bat__pending` empile en COLONNE : dans ce sens, `flex-basis`
	   regle la HAUTEUR, pas la largeur. Le `flex: 1 0 100%` ecrit ici demandait
	   donc une hauteur de base egale a celle du bloc, plus le droit de grandir —
	   la boite gonflait et passait par-dessus le prix. La pleine largeur, dans
	   une pile verticale, s obtient par l axe TRANSVERSE. */
	align-self: stretch;
	flex: 0 0 auto;
	margin: var( --gc-2, 8px ) 0 0;
	padding: var( --gc-3, 12px ) var( --gc-4, 16px );
	border: 1px solid var( --gold-line, #E4D2AE );
	border-left: 3px solid var( --gold, #C9A227 );
	border-radius: var( --r-field, 12px );
	background: var( --gold-bg, #FCF7EC );
	color: var( --gold-ink, #7A6224 );
	font-family: var( --head );
	font-size: var( --gc-fs-fine, 12px );
	line-height: 1.55;
	text-wrap: pretty;
}

/* Le bouton visé par ce renvoi : deux battements, puis plus rien. Assez pour
   attirer l'oeil, trop court pour agacer. L'ombre porte l'animation plutôt que
   la taille — un bouton qui grossit pousse le texte autour de lui. */
@keyframes glassora-bat-visee {
	0%   { box-shadow: 0 0 0 0 rgba( 201, 162, 39, .55 ); }
	70%  { box-shadow: 0 0 0 10px rgba( 201, 162, 39, 0 ); }
	100% { box-shadow: 0 0 0 0 rgba( 201, 162, 39, 0 ); }
}
.woocommerce-cart .glassora-bat__validate.is-visee {
	animation: glassora-bat-visee 1.1s ease-out 2;
}
/* Qui a demandé moins de mouvement garde le repère, sans le battement : le
   contour reste, il ne pulse pas. */
@media ( prefers-reduced-motion: reduce ) {
	.woocommerce-cart .glassora-bat__validate.is-visee {
		animation: none;
		box-shadow: 0 0 0 3px rgba( 201, 162, 39, .55 );
	}
}