/* ═══════════════════════════════════════════════════════════════════════
   LA BOUTIQUE — PANIER, COMMANDE, COMPTE
   ═══════════════════════════════════════════════════════════════════════

   POURQUOI CETTE FEUILLE EXISTE À PART.

   WooCommerce charge ses propres feuilles — `wc-blocks.css`, `cart.css`,
   `all-products.css` — APRÈS celle du thème. À spécificité égale, c'est la
   dernière déclarée qui l'emporte : tout ce que le thème écrivait pour ces
   pages perdait, sans qu'aucune erreur ne le signale.

   Ce qu'on voyait : une vignette de produit large de 42 px, le texte de son
   bouton à la verticale une lettre par ligne, et le fond du bloc figé sur la
   couleur du mode sombre.

   Cette feuille déclare une dépendance à `wc-blocks-style`. WordPress la
   charge donc APRÈS, et elle gagne par l'ordre — pas par une course à la
   spécificité, pas par des `!important` qu'il faudrait ensuite surenchérir.

   Elle n'est chargée que sur les pages de la boutique.
   ═══════════════════════════════════════════════════════════════════════ */

/* LES VIGNETTES NE FONT PLUS 42 PX.

   WooCommerce leur pose `max-width:25%` — pensé pour une rangée en flottant
   à quatre colonnes. Dans une grille, ce pourcentage se calcule sur la
   COLONNE et non sur la rangée : 25 % de 166 px, soit 42 px. Le nom du
   produit passait à la verticale.

   La grille gère déjà la largeur des colonnes ; la vignette n'a donc aucune
   largeur à s'imposer. */
.wc-block-grid__product{width:auto;max-width:none;flex:none;
  margin:0;padding:0;text-align:left}

/* ── LE PANIER, LA COMMANDE ET LE COMPTE ─────────────────────────────
   WooCommerce écrit ces pages en blocs Gutenberg. On ne les réécrit pas —
   c'est un tunnel d'achat qui marche, et le réécrire, c'est le casser. On
   lui donne la grammaire du site : mêmes couleurs, même rayon, même pas de
   grille, mêmes boutons.

   Sans ces règles, ces pages arrivaient telles que WooCommerce les dessine :
   un emoji triste géant, une grille de produits sans rapport avec celle de
   la boutique, des champs blancs sur fond sombre. C'est la partie du site
   qu'on voit au moment de payer — celle qui doit le moins ressembler à un
   autre site. */

/* LES CONTENEURS NE PEIGNENT PAS LEUR PROPRE FOND.

   Ils prenaient une couleur héritée des styles globaux de WordPress, résolue
   une fois au chargement : elle ne suivait pas la bascule clair/sombre. En
   mode clair, du texte sombre se posait sur un fond de mode sombre — mesuré
   à 1,08:1.

   Une première version utilisait `:where()`, dont la spécificité est NULLE :
   elle perdait contre tout. Écrite en sélecteurs simples, elle gagne. */
.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout,
.wp-block-woocommerce-empty-cart-block,.wp-block-woocommerce-filled-cart-block,
.wc-block-grid,.wc-block-grid__products,.wc-block-grid__product,
.wc-block-cart,.wc-block-checkout{background:transparent}

/* ── LE PANIER VIDE ── */
.wp-block-woocommerce-empty-cart-block{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:calc(var(--pad) * 1.4) var(--pad);text-align:center}

/* L'emoji triste part. Un visage qui pleure pour dire « rien ici » est un
   reproche adressé à quelqu'un qui n'a encore rien choisi. */
.wp-block-woocommerce-empty-cart-block .with-empty-cart-icon::before{display:none}

.wc-block-cart__empty-cart__title{
  font-family:var(--serif);font-weight:400;font-size:var(--t-h2);
  letter-spacing:-.02em;color:var(--encre);margin:0;max-width:20ch}
.wp-block-woocommerce-empty-cart-block :where(p,li){
  color:var(--encre-doux);max-width:46ch;margin:0}

/* Le second titre — « Nouveau dans la boutique » — n'est pas de même rang
   que le premier : il annonce une suggestion, pas l'état de la page. */
.wp-block-woocommerce-empty-cart-block .wp-block-heading:not(.wc-block-cart__empty-cart__title){
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--encre-doux);
  margin:calc(var(--pad) * 1.2) 0 0}

.wp-block-woocommerce-empty-cart-block .wp-block-separator{
  width:min(220px,50%);border:0;border-top:1px solid var(--line);
  margin:6px auto;opacity:1}

/* ── LES VIGNETTES DE PRODUITS SUGGÉRÉS ──
   Elles prennent le pas de la boutique : même gouttière, même rayon, même
   façon de nommer un prix. Deux grilles différentes pour les mêmes produits,
   à deux endroits du même site, ça se remarque. */
.wc-block-grid__products{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:var(--gout);margin:0;padding:0;list-style:none;width:100%}
.wc-block-grid__product{margin:0;padding:0;text-align:left}
.wc-block-grid__product-image img{border-radius:var(--rayon-img);
  aspect-ratio:1;object-fit:cover;width:100%}
.wc-block-grid__product :where(.wc-block-grid__product-title,
  .wc-block-grid__product-link){font-family:var(--sans);
  font-size:var(--t-petit);font-weight:500;color:var(--encre);
  text-decoration:none;line-height:1.35}
.wc-block-grid__product-price{font-variant-numeric:tabular-nums;
  color:var(--encre-doux);font-size:var(--t-petit)}
/* L'étoile de notation sortait en jaune : le site n'en a pas. */
.wc-block-grid__product-rating{display:none}

/* ── LE PANIER PLEIN, ET LA COMMANDE ── */
.wc-block-cart-items__row,.wc-block-components-order-summary-item{
  border-color:var(--line)}
.wc-block-components-product-name{font-family:var(--sans);
  font-weight:500;color:var(--encre);text-decoration:none}
.wc-block-components-product-metadata,
.wc-block-components-product-details{color:var(--encre-doux)}
.wc-block-components-product-price,
.wc-block-components-totals-item__value{color:var(--encre);
  font-variant-numeric:tabular-nums}

/* Le total : c'est le chiffre qu'on cherche sur cette page. */
.wc-block-components-totals-footer-item{color:var(--encre);
  font-size:var(--t-lede);font-weight:600}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-size:var(--t-lede)}

/* Le sélecteur de quantité, aux dimensions du site : 44 px de cible. */
.wc-block-components-quantity-selector{border:1px solid var(--line);
  border-radius:999px;overflow:hidden}
.wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector__input{min-height:44px;
  background:transparent;color:var(--encre);border:0}

/* Les champs de la commande. En sombre ils sortaient en gris clair sur gris
   clair : le formulaire de paiement était illisible. */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__select,
.wc-block-components-combobox-control input{
  min-height:48px;padding:10px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--creme);color:var(--encre);
  font-family:var(--sans);font-size:var(--t-corps)}
.wc-block-components-text-input label,
.wc-block-components-checkout-step__title,
.wc-block-components-title{color:var(--encre);font-family:var(--sans)}
.wc-block-components-checkout-step__description{color:var(--encre-doux)}

/* ── LES BOUTONS ──
   Un seul dessin de bouton sur le site. Sans ça, la boutique en avait deux
   selon la page. */
:where(.wp-block-button__link,.wc-block-components-button,
  .wc-block-cart__submit-button,.wc-block-components-checkout-place-order-button){
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 26px;border:0;border-radius:999px;cursor:pointer;
  background:var(--brique);color:var(--on-ox);font-family:var(--sans);
  font-size:var(--t-petit);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none}
:where(.wp-block-button__link,.wc-block-components-button):hover{
  background:var(--ox);color:var(--on-ox)}

/* Le panier ne se lit pas comme des mentions légales : il se balaye. La
   largeur de lecture de 62 caractères, juste pour du texte long, le bridait
   à 682 px dans une case de 1200 — mesuré sur le site. Les pages de la
   boutique reprennent toute leur case. */
/* Cette feuille n'est PAS générée depuis la maquette : elle est écrite à la
   main, et ses classes de thème portent donc le préfixe `fgb-` en toutes
   lettres. Une classe de maquette laissée telle quelle ici ne viserait rien. */
.woo .fgb-prose{max-width:none}