/* ============================================================
   05 — BOUTIQUE
   L'affiche est le contenant, la grille est le contenu. On ne
   fait jamais d'affiche d'un produit dans une liste : la page
   famille s'ouvre sur un pan, ensuite on vend.
   ============================================================ */

/* ------------------------------------------------------------
   Le texte reserve aux lecteurs d'ecran

   Bug systeme, corrige a la racine. Le theme retire les trois feuilles de
   WooCommerce (voir wrj_woo_retirer_styles) et definit son propre
   « .wrj-sr-only » dans 02-base.css. Mais WooCommerce, lui, emet sa
   PROPRE classe, « .screen-reader-text », que plus aucune feuille ne
   declarait : tout ce que WooCommerce reserve aux lecteurs d'ecran
   s'affichait a l'ecran.

   Le prix d'un produit en promotion en est l'exemple visible :
   wc_format_sale_price() sort un <del aria-hidden>, un <ins aria-hidden>
   et DEUX phrases en clair, « Le prix initial etait : 64,90 €. » et « Le
   prix actuel est : 38,88 €. ». Rendues en Syne 800 a 22px dans la carte
   produit, elles occupaient quatre lignes et sortaient de la carte de
   19px a 1440px ; sur la fiche a 320px, elles poussaient le montant
   10px hors de l'ecran. C'est la cause du debordement du tarif, et elle
   n'etait pas dans la mise en page du tarif.

   Meme recette que « .wrj-sr-only » : le texte reste dans l'arbre
   d'accessibilite et sort du flux visuel. */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------
   En-tete de rayon : l'unique affiche de la page
   ------------------------------------------------------------ */
.wrj-rayon {
  position: relative;
  background: var(--wrj-u);
  color: var(--wrj-u-sur);
  padding-block: var(--wrj-bloc-m) var(--wrj-bloc-m);
  overflow: hidden;
}
.wrj-rayon__titre {
  /* Echelle propre, plus basse que h1 : les noms de familles sont des
     mots francais longs et soudes (« RAQUETTES », « COLLECTIFS »), et a
     320px il ne reste que 280px utiles. Mesure : « RAQUETTES » fait
     368px a 36px, il faut descendre a 26px pour que le mot tienne. */
  font-size: clamp(1.625rem, 0.55rem + 5.4vw, 6.5rem);
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--wrj-u-sur);
  margin-block: var(--wrj-e-4) 0;
  overflow-wrap: break-word;
  hyphens: manual;
}
/* Le rayon est un aplat d'encre : le surtitre et le compte doivent
   basculer en clair, sinon ils disparaissent dans le fond. */
.wrj-rayon .wrj-label { color: var(--wrj-u-sur); }
.wrj-rayon .wrj-label__num { color: var(--wrj-u-sur); }
.wrj-rayon__desc { margin-top: var(--wrj-e-5); max-width: 52ch; font-size: var(--wrj-t-chapo); opacity: .9; }
.wrj-rayon__compte {
  margin-top: var(--wrj-e-5);
  font-size: var(--wrj-t-label); font-weight: 700;
  letter-spacing: var(--wrj-ls-label); text-transform: uppercase;
}

/* ------------------------------------------------------------
   La grille : une planche-contact, pas une galerie de cartes
   Les cellules se touchent presque, separees par des filets.
   ------------------------------------------------------------ */
.wrj-boutique { padding-block: var(--wrj-bloc-m) var(--wrj-section); }
.wrj-boutique__barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wrj-e-5); flex-wrap: wrap;
  padding-bottom: var(--wrj-e-5);
  margin-bottom: var(--wrj-bloc-s);
  border-bottom: 2px solid var(--wrj-u-encre);
  font-size: var(--wrj-t-label); font-weight: 700;
  letter-spacing: var(--wrj-ls-label); text-transform: uppercase;
  color: var(--wrj-encre-3);
}

/* ------------------------------------------------------------
   La barre d'outils du rayon

   Elle ne portait que le tri. Sur 48 references reparties en quatre
   pages, la seule facon de reduire la liste etait la barre de
   navigation, qui donne les six disciplines. La pointure, elle, ne se
   lisait nulle part avant d'ouvrir une fiche : c'est ce filtre-la qui
   manquait, et c'est la question du reassort.

   Le tri de WooCommerce est aspire dans cette barre par les accroches
   wrj_ouvrir_outils_rayon / wrj_fermer_outils_rayon : il garde son
   propre balisage, il change seulement de voisinage.
   ------------------------------------------------------------ */
.wrj-rayon-outils {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wrj-e-4) var(--wrj-e-5); flex-wrap: wrap;
  margin-bottom: var(--wrj-bloc-s);
  padding-bottom: var(--wrj-e-5);
  border-bottom: 1px solid var(--wrj-filet);
}
.wrj-filtre { display: flex; align-items: center; gap: var(--wrj-e-3); flex-wrap: wrap; min-width: 0; }
.wrj-filtre__cle {
  font-size: var(--wrj-t-label); font-weight: 700;
  letter-spacing: var(--wrj-ls-label); text-transform: uppercase;
  color: var(--wrj-encre-3);
  white-space: nowrap;
}
.wrj-filtre__choix { display: flex; gap: var(--wrj-e-2); flex-wrap: wrap; min-width: 0; }

/* Le jeton de filtre.
   Ce n'est pas une action : c'est un reperage, comme le numero de page.
   Il prend donc l'encre de discipline et jamais l'Ambre. L'etat retenu
   est un aplat d'encre avec du blanc dessus, exactement la recette de
   la pagination.

   Mesures du blanc #FAFDFF sur les six encres de discipline, calculees
   et non estimees, valeurs du 2026-08-14 : Lapis #1E0080 15.04:1,
   Hestia #9E42B3 5.29:1, Verdancy #0B7C64 5.04:1, Adonis #B74D07
   5.04:1, Atlas #C33E3E 5.04:1, Zephyr #926515 5.02:1. La plus basse
   passe le seuil AA.

   Les quatre encres chaudes ont ete assombries ce jour-la pour tenir
   aussi sur le puits #F0F1F9, ou elles tombaient sous 4.5:1 en encre de
   texte. Ce jeton-ci n'etait pas concerne, le blanc y passait deja ;
   il y gagne quand meme un demi-point. Voir la note des encres dans
   01-tokens. */
.wrj-jeton {
  display: inline-flex; align-items: center; justify-content: center;
  /* 40px et non 44 : le jeton est un lien de navigation dans une barre
     d'outils, pas une cible d'achat, et la rangee en compte sept. */
  min-height: 40px;
  padding: 0 0.95em;
  border: 1px solid var(--wrj-filet-fort);
  border-radius: var(--wrj-r-pill);
  background: var(--wrj-papier);
  font-family: var(--wrj-corps);
  font-size: var(--wrj-t-label); font-weight: 700;
  color: var(--wrj-encre-2);
  white-space: nowrap;
  transition: background-color var(--wrj-d-tap) var(--wrj-ease),
              border-color var(--wrj-d-tap) var(--wrj-ease),
              color var(--wrj-d-tap) var(--wrj-ease);
}
.wrj-jeton:hover { border-color: var(--wrj-u-encre); color: var(--wrj-u-encre); text-decoration: none; }
.wrj-jeton[aria-current="true"] {
  background: var(--wrj-u-encre); border-color: var(--wrj-u-encre); color: var(--wrj-blanc);
}
.wrj-jeton:focus-visible { outline: 2px solid var(--wrj-focus); outline-offset: 2px; border-radius: var(--wrj-r-pill); }

/* La rangee des disciplines prend sa propre ligne.
   Sept jetons de discipline, sept de pointure et le tri sur une seule
   rangee, c'est quinze objets qui se disputent 1248px : la barre se
   replie n'importe ou selon la longueur des noms. `flex: 1 0 100%`
   force la coupure a un endroit qui a un sens, entre les deux
   questions posees, et laisse la seconde ligne au couple pointure et
   tri, ou le `space-between` de la barre retrouve son role. */
.wrj-filtre--discipline { flex: 1 0 100%; }

/* Le nombre de references de la famille, dans le jeton.
   C'est la donnee qui evite d'ouvrir pour rien : « raquettes 5 » dit
   tout de suite qu'il n'y a pas de fond de rayon a explorer la. Elle
   est en tabulaire pour que les jetons ne dansent pas d'un chiffre a
   l'autre, et en encre-3 sur papier, 5.56:1. */
.wrj-jeton__compte {
  margin-left: 0.5em;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--wrj-encre-3);
}
/* Sur le jeton retenu, l'aplat est l'encre de la famille : le nombre
   repasse au blanc avec le reste du libelle, mesure a 5.02:1 au pire
   des six. */
.wrj-jeton[aria-current="true"] .wrj-jeton__compte { color: inherit; }
.wrj-jeton:hover .wrj-jeton__compte { color: inherit; }

/* Le tri : WooCommerce sort un select nu, colle au bord de la grille.
   On lui donne sa place dans la barre et la forme des autres champs. */
.woocommerce .woocommerce-ordering {
  /* Barre d'outils du rayon : le tri est pousse a droite et un filet la
     detache de la grille. Le rythme au-dessus vient de .wrj-boutique. */
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--wrj-e-3);
  margin: 0 0 var(--wrj-bloc-s);
  padding-bottom: var(--wrj-e-5);
  border-bottom: 1px solid var(--wrj-filet);
}
/* Une fois dans la barre d'outils, le filet et le rythme du bas
   appartiennent a la barre : laisses au tri, ils se repetaient a
   l'interieur d'elle-meme, et le second filet coupait la barre en deux.
   La regle doit venir APRES celle du dessus, a specificite egale. */
.wrj-rayon-outils .woocommerce-ordering { margin: 0; padding: 0; border-bottom: 0; }
.woocommerce .woocommerce-ordering::before {
  content: "Trier";
  font-size: var(--wrj-t-label); font-weight: 700;
  letter-spacing: var(--wrj-ls-label); text-transform: uppercase;
  color: var(--wrj-encre-3);
  white-space: nowrap;
}
.woocommerce .woocommerce-ordering select {
  min-height: 46px;
  padding: 0 2.6em 0 1.1em;
  background-color: var(--wrj-papier);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.15em top 52%, right 0.85em top 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  border: 1px solid var(--wrj-filet-fort);
  border-radius: var(--wrj-r-pill);
  color: var(--wrj-encre);
  font-family: var(--wrj-corps);
  font-size: var(--wrj-t-sm); font-weight: 600;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
}
.woocommerce .woocommerce-ordering select:hover { border-color: var(--wrj-u-encre); }
/* Le focus ne prend jamais l'aplat : Zephyr mesure 1.73:1 sur papier,
   un anneau de focus a ce contraste est un echec WCAG 2.4.7. */
.woocommerce .woocommerce-ordering select:focus { outline: 2px solid var(--wrj-focus); outline-offset: 1px; }

/* La planche-contact. Les cellules se touchent, un filet les separe.
   La grille etait jusqu'ici une galerie de cartes : 32px de gouttiere
   entre douze rectangles blancs a coins arrondis et ombre de survol,
   tous de la meme taille, tous batis pareil. C'est l'interdit nomme du
   projet, et c'est ce qui fait lire « boutique parmi des milliers ».

   Le decalage dur du survol n'a plus besoin de gouttiere : la carte
   glisse par-dessus ses voisines, ce qui EST l'artefact de hors-reperage
   recherche, et « z-index: 1 » la met devant. */
.wrj-produits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  /* La planche-contact, cellules jointives sur une gouttiere de 1px, a
     ete essayee puis abandonnee : elle supprimait le rayon des cartes,
     qui est ce qui fait lire une carte comme un objet et non comme une
     case de tableau. On revient a la galerie, et le decalage
     d'impression du survol a de nouveau la place de sortir de la
     cellule sans mordre sur la voisine. */
  gap: var(--wrj-e-6);
  list-style: none; margin: 0; padding: 0;
}

/* ------------------------------------------------------------
   La carte produit
   Le puits reste clair en toutes circonstances : la bibliotheque
   melange des packshots detoures et des packshots a fond blanc
   opaque. Un puits teinte ferait apparaitre un rectangle blanc
   sur une partie du catalogue. La couleur de famille vit dans le
   dossard, jamais derriere le produit.
   ------------------------------------------------------------ */
/* La carte est un objet pose sur le papier : un rayon, un filet, et un
   fond qui se teinte au survol.

   Le filet reste un anneau d'ombre plutot qu'une bordure. Ce n'est pas un
   reste de la planche-contact, c'est la seule forme qui tienne ici : un
   outline en retrait se fait recouvrir, la CSS n'ordonnant pas de facon
   stable le trace d'un outline et celui du fond d'un descendant
   POSITIONNE, et Chromium peint le fond de « .wrj-produit__media »
   par-dessus. Constate a l'ecran, le filet n'existait alors que sur la
   moitie basse de la cellule. L'anneau, lui, est trace hors de la boite,
   aucun descendant ne peut passer devant, et il suit le rayon. */
.wrj-produit {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--wrj-papier);
  border: 0;
  border-radius: var(--wrj-r-18);
  /* Le puits doit suivre le rayon : sans cette coupe, l'image et le filet
     du bas du puits ressortent en angle droit dans les coins hauts. */
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--wrj-filet);
  transition: transform var(--wrj-d-etat) var(--wrj-ease),
              box-shadow var(--wrj-d-etat) var(--wrj-ease),
              background-color var(--wrj-d-etat) var(--wrj-ease);
}
/* Le survol fait trois choses d'un coup : le fond prend la teinte de la
   discipline en tres faible densite, la plaque de calage sort derriere,
   et la carte se decale contre elle. C'est le hors-reperage de la
   serigraphie, le meme geste que le titre du hero.

   Le decalage passe de 5 a 3 px et la plaque de 10 a 6 : le geste a ete
   signale comme trop violent, et sur une grille de douze cartes il l'est,
   la ou il tenait sur une carte isolee.

   Le fond au survol vaut « --wrj-u » a 7 % sur le papier. Mesure sur le
   cas le plus dense, le Lapis #1E0080 : le fond obtenu est #EFEEF9, sur
   lequel l'encre du corps tient 18.24:1 et l'encre-3 des metadonnees
   5.09:1. Aucun texte de la carte ne descend donc sous le seuil. */
.wrj-produit:hover,
.wrj-produit:focus-within {
  transform: translate(-3px, -3px);
  background-color: color-mix(in srgb, var(--wrj-u) 7%, var(--wrj-papier));
  box-shadow: 0 0 0 1px var(--wrj-u), 6px 6px 0 var(--wrj-u);
  z-index: 1;
}
/* Le packshot est cadre carre, sujet centre et petit. Le puits en 4/5
   ajoutait 72px de blanc sous une semelle de 288px de large sans rien
   montrer de plus : mesure a 1440px, la cellule passe de 688 a 616px de
   haut, et la rangee entiere devient lisible sans defiler. */
.wrj-produit__media {
  position: relative;
  aspect-ratio: 1;
  background: var(--wrj-papier);
  display: grid; place-items: center;
  padding: var(--wrj-e-4);
  border-bottom: 1px solid var(--wrj-filet);
}
.wrj-produit__media img { width: 100%; height: 100%; object-fit: contain; }
.wrj-produit__badges { position: absolute; top: var(--wrj-e-3); right: var(--wrj-e-3); z-index: 1; display: flex; flex-direction: column; gap: var(--wrj-e-2); }
.wrj-badge {
  display: inline-flex; align-items: center;
  padding: 0.35em 0.75em;
  border-radius: var(--wrj-r-pill);
  font-size: 0.6875rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.wrj-badge--action { background: var(--wrj-ambre); color: var(--wrj-noir); }
/* La mention de tarif professionnel, posee par wrj_woo_mention_tarif_pro().
   Le modificateur etait pose par le PHP et n'existait dans aucune feuille :
   le badge sortait sans aplat, en noir sur papier, et ne se distinguait
   plus d'une ligne de texte. Or c'est justement la ligne qui explique a un
   revendeur pourquoi il ne voit pas le prix public.
   Meme recette que --action : aplat Ambre #FFDC66, texte Noir #0A001E,
   15.20:1. C'est le seul emploi de l'Ambre hors bouton, et il reste dans
   sa regle : un aplat, sous du noir, qui valide un etat acquis. */
.wrj-badge--ambre { background: var(--wrj-ambre); color: var(--wrj-noir); }
.wrj-badge--creux { border: 1px solid var(--wrj-filet-fort); color: var(--wrj-encre-3); background: var(--wrj-papier); }

.wrj-produit__corps { display: flex; flex-direction: column; flex: 1; gap: var(--wrj-e-2); padding: var(--wrj-e-5); }
/* Ligne de meta : la famille a gauche, la reference a droite. La
   reference est un fait, pas un ornement : elle se lit, elle ne crie pas. */
.wrj-produit__meta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--wrj-e-3);
  font-size: var(--wrj-t-label); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.wrj-produit__famille { color: var(--wrj-u-encre); min-width: 0; }
.wrj-produit__ref {
  flex-shrink: 0;
  font-family: var(--wrj-display);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--wrj-encre-3);
}
.wrj-produit:hover .wrj-produit__ref { color: var(--wrj-u-encre); }
.wrj-produit__titre {
  font-family: var(--wrj-display); font-weight: 700;
  font-size: var(--wrj-t-chapo); line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
}
.wrj-produit__titre a { color: var(--wrj-encre); }
.wrj-produit__titre a:hover { color: var(--wrj-lapis); text-decoration: none; }
/* Toute la carte est cliquable : sur une semelle la pointure est
   obligatoire, un bouton d'ajout depuis la liste produirait un
   panier faux ou une modale parasite. Le geste de la grille est
   « regarder », pas « acheter ». */
.wrj-produit__titre a::after { content: ""; position: absolute; inset: 0; }
.wrj-produit__prix {
  margin-top: auto; padding-top: var(--wrj-e-4);
  font-family: var(--wrj-display); font-weight: 800;
  font-size: var(--wrj-t-chapo);
  color: var(--wrj-titre);
}
.wrj-produit__prix del { font-size: 0.7em; font-weight: 400; color: var(--wrj-encre-3); margin-right: 0.4em; }
.wrj-produit__prix ins { text-decoration: none; }
.wrj-produit .wrj-produit__action { display: none; }

/* La mention de tarif professionnel, dans la carte.
   Elle empruntait « .wrj-produit__famille », qui est un titre de famille :
   « tarif pro » sortait donc en Syne 800 a 22px et dans l'encre de la
   discipline, vert sur une carte Course. Une mention de statut n'est ni un
   titre ni une action : c'est une metadonnee, elle prend l'echelle et
   l'encre des metadonnees. Encre-3 #5762A5, 5.56:1 sur papier. */
.wrj-produit__pro {
  display: block;
  margin-top: var(--wrj-e-1);
  font-family: var(--wrj-corps);
  font-size: var(--wrj-t-label);
  font-weight: 700;
  letter-spacing: var(--wrj-ls-label);
  text-transform: uppercase;
  color: var(--wrj-encre-3);
}

/* ------------------------------------------------------------
   Le bloc d'achat de la carte

   Le rayon est derriere un mur professionnel : celui qui lit cette
   carte est un revendeur, et ce qu'il fait ici est du reassort. Il
   reprend les memes references, souvent depuis un salon, souvent sur
   telephone. Lui demander d'ouvrir une fiche par reference, c'est lui
   demander douze chargements de page pour douze lignes de commande.

   Le bloc porte deux choses que la grille ne disait pas :
   la serie de pointures du modele, et l'ajout.

   Aucune modale, aucun panneau, aucun survol : le choix est pose la ou
   il se lit, dans le flux de la carte, et il tient sans JavaScript.
   ------------------------------------------------------------ */
.wrj-produit__achat {
  /* Il doit passer PAR-DESSUS le calque de lien du titre, qui couvre
     toute la carte (« .wrj-produit__titre a::after { inset: 0 } »).
     Etant positionne et place apres lui dans le gabarit, il serait deja
     peint au-dessus ; le z-index le dit explicitement pour que la regle
     survive a un changement d'ordre du gabarit. */
  position: relative; z-index: 1;
  display: grid; gap: var(--wrj-e-3);
  margin-top: var(--wrj-e-4);
  padding-top: var(--wrj-e-4);
  border-top: 1px solid var(--wrj-filet);
}
.wrj-produit__cle {
  font-size: var(--wrj-t-label); font-weight: 700;
  letter-spacing: var(--wrj-ls-label); text-transform: uppercase;
  color: var(--wrj-encre-3);
}
/* La serie est une GRILLE et non une rangee qui se replie.
   Mesures des largeurs utiles de carte, relevees a l'ecran : 240px a
   1440, 222px a 1280, 289px a 768, 127px a 390 (deux colonnes), 232px
   a 320 (une colonne). Une rangee repliee y donnait des lignes
   irregulieres, et surtout UNE pastille par ligne a 390px, soit cinq
   lignes pour cinq pointures. La piste minimale de 56px donne quatre
   colonnes a 768, trois a 1440, 1280 et 320, deux a 390 : deux ou
   trois lignes partout, et des pastilles de largeur egale. */
.wrj-produit__pointures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: var(--wrj-e-2);
}

/* La pastille de carte.
   Plus compacte que celle de la fiche (66 x 48 a 15px) : la colonne
   d'achat d'une fiche fait plus de 500px, la ligne utile d'une carte
   de rayon tombe a 127px sur un telephone de 390px a deux colonnes.
   Elle passe donc a l'echelle de label, 13px, et garde 44px de haut,
   qui est le seuil de cible tactile retenu partout dans le theme.
   Le libelle est reduit aux deux bornes de la serie (« 35-37 » pour
   « 35 | 36 | 37 ») : c'est la forme deja employee par la reference
   interne du produit, ADON-VITAL-35-37. Le nom complet reste dans
   l'attribut « title ».

   Le selecteur porte son parent, ce qui n'est pas un ornement :
   « .wrj-pointure » est declaree plus BAS dans ce fichier, dans la
   section de la fiche produit, a specificite egale. A specificite
   egale, c'est l'ordre qui tranche : sans ce maillon, la pastille de
   carte reprenait les 66 x 48 px de la fiche. Mesure a 390px, ou la
   carte n'offre que 127px : deux pastilles de 66px plus la gouttiere
   demandaient 140px, et « overflow: hidden » de la carte coupait le
   debord au lieu de le montrer. */
.wrj-produit__achat .wrj-pointure--carte {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 44px;
  padding: 0 0.35em;
  font-size: var(--wrj-t-label);
  cursor: pointer;
}
.wrj-produit__achat .wrj-pointure--carte:hover { border-color: var(--wrj-u-encre); color: var(--wrj-u-encre); }
/* Meme recette que la pastille de fiche : l'etat retenu doit se lire
   contre le papier, pas seulement contre son propre texte. Blanc sur
   l'encre de discipline, mesure a 4.51:1 au pire des six (Adonis
   #C45208), 15.04:1 au mieux (Lapis #1E0080).

   Le selecteur porte « .wrj-produit__achat », et ce n'est pas decoratif.
   Sans lui la regle pese (0,2,1) contre (0,3,0) pour le survol juste
   au-dessus, qui l'emportait donc sur la couleur du texte. Or on ne
   coche pas une pastille sans la survoler : apres le clic le pointeur
   reste dessus, le fond passait a l'encre de discipline pendant que le
   texte y passait aussi, et le libelle disparaissait purement et
   simplement, Lapis sur Lapis, 1:1. Constate a l'ecran sur la famille
   Marche. Avec le maillon parent la regle pese (0,4,1) et gagne.

   Le survol d'une pastille DEJA cochee est traite juste apres : sans
   cela, il ramenerait la bordure a l'encre de discipline, ce qu'elle est
   deja, mais surtout il n'aurait aucun effet visible, et une pastille
   cochee doit repondre au pointeur comme les autres. Elle repond par son
   fond, d'un cran plus clair. */
.wrj-produit__achat .wrj-pointure--carte:has(input:checked) {
  background: var(--wrj-u-encre); border-color: var(--wrj-u-encre); color: var(--wrj-blanc);
}
.wrj-produit__achat .wrj-pointure--carte:has(input:checked):hover {
  background: color-mix(in srgb, var(--wrj-u-encre) 86%, var(--wrj-blanc));
  color: var(--wrj-blanc);
}
.wrj-produit__achat .wrj-pointure--carte:has(input:disabled) {
  opacity: .35; text-decoration: line-through; cursor: not-allowed;
}
/* Le bouton radio est escamote a 1px : l'anneau de focus que 02-base lui
   pose existe bien, mais personne ne le voit. C'est la pastille qui doit
   le porter.
   « :focus-within » plutot que « :has(input:focus-visible) » : le seul
   element focusable de la pastille EST ce bouton radio, la condition est
   donc la meme, et elle s'ecrit avec une pseudo-classe native au lieu de
   dependre de « :has() » pour une fonction, l'accessibilite au clavier,
   qui ne doit dependre de rien.
   L'anneau est en retrait de 2px, donc trace HORS de la pastille, sur le
   papier de la carte : Lapis #1E0080 sur Papier #FAFDFF, 15.04:1. Pose a
   l'interieur, il serait tombe sur l'aplat de discipline de la pastille
   cochee, et sur la famille Marche, ou cet aplat EST le Lapis, il aurait
   ete purement invisible. */
.wrj-produit__achat .wrj-pointure--carte:focus-within {
  outline: 2px solid var(--wrj-focus);
  outline-offset: 2px;
}
/* Le bouton radio n'est escamote que la ou son etat coche peut etre
   reporte sur la pastille qui l'enveloppe. Sans « :has() », il reste
   visible : la selection continue de se voir, et le formulaire reste
   entier. Meme recette d'escamotage que « .wrj-sr-only ». */
@supports selector(:has(*)) {
  /* « .wrj-produit__achat » n'est pas decoratif dans ce selecteur :
     « input[type="radio"] » plus bas dans ce fichier impose 22 x 22 px,
     a specificite egale et en position plus tardive. Sans ce maillon, la
     boite escamotee faisait 22px de cote et decalait la pastille. */
  .wrj-produit__achat .wrj-pointure--carte input {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

/* L'action de la carte.
   Au repos elle ne peut rien faire : aucune pointure n'est choisie. Elle
   prend donc le troisieme niveau d'action du theme, le filet neutre, et
   non l'Ambre. Elle passe a l'Ambre au moment exact ou l'ajout devient
   possible : la couleur d'action n'apparait que quand il y a une action.
   Sur une reference sans pointure, l'ajout est possible d'emblee et
   l'Ambre l'est aussi.
   Provenance : --wrj-ambre #FFDC66, charte page « Logo & couleur »,
   texte --wrj-noir #0A001E a 15.20:1, filet Lapis #1E0080 comme
   « .wrj-btn--action ». */
.wrj-produit__achat:has(input:checked) .wrj-produit__ajout,
.wrj-produit__achat:not(:has(input[type="radio"])) .wrj-produit__ajout {
  background: var(--wrj-ambre);
  color: var(--wrj-noir);
  border-color: var(--wrj-lapis);
}
.wrj-produit__achat:has(input:checked) .wrj-produit__ajout:hover,
.wrj-produit__achat:not(:has(input[type="radio"])) .wrj-produit__ajout:hover {
  background: #FFE894; color: var(--wrj-noir);
}
/* Les deux libelles sont dans le HTML, le script ne bascule qu'un
   attribut : TranslatePress ne parcourt pas l'interieur des balises
   script, une chaine posee par le JavaScript resterait en francais. */
.wrj-produit__mot--ok { display: none; }
.wrj-produit__ajout[data-etat="ajoute"] .wrj-produit__mot--repos { display: none; }
.wrj-produit__ajout[data-etat="ajoute"] .wrj-produit__mot--ok { display: inline; }

/* La bande de respiration, apres la huitieme cellule.
   Elle etait decrite ici depuis le debut et rien ne l'emettait : la grille
   restait une suite ininterrompue de douze cellules identiques. Elle est
   posee par wrj_woo_respiration_rayon(), sur le rayon seulement.
   Aplat Lapis #1E0080, texte blanc #FAFDFF, 15.04:1. Un aplat n'a pas de
   rayon : l'encre va au bord de la cellule. */
.wrj-respiration {
  grid-column: 1 / -1;
  background: var(--wrj-lapis);
  color: var(--wrj-blanc);
  /* 32px et non 52 : la bande coupe la grille, elle ne la remplace pas.
     Mesuree a 52px de padding et 22ch de mesure, elle faisait 255px de
     haut sur quatre lignes, soit plus haut qu'une rangee de cartes. */
  padding: var(--wrj-e-6);
  display: flex; align-items: baseline; gap: var(--wrj-e-5); flex-wrap: wrap;
  /* Elle ferme la rangee du dessus et ouvre celle du dessous : sans ce
     recouvrement, le filet de la cellule voisine passait dessus. */
  position: relative; z-index: 1;
}
.wrj-respiration__label {
  flex: none;
  font-family: var(--wrj-corps); font-size: var(--wrj-t-label); font-weight: 700;
  letter-spacing: var(--wrj-ls-label); text-transform: uppercase;
  color: var(--wrj-blanc);
}
.wrj-respiration p {
  font-family: var(--wrj-display); font-weight: 800;
  font-size: clamp(1.375rem, 1.05rem + 1.1vw, 1.875rem); /* 22 → 30, plancher cale sur --wrj-t-chapo */
  line-height: 1.1;
  letter-spacing: var(--wrj-ls-affiche); text-transform: uppercase;
  /* 38ch : deux lignes pleines a 1440px. A 22ch la phrase en prenait
     quatre, et la coupure devenait un pan a elle seule. */
  color: var(--wrj-blanc); margin: 0; max-width: 38ch;
}

/* ------------------------------------------------------------
   Fiche produit
   ------------------------------------------------------------ */
.woocommerce div.product {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--wrj-bloc-m);
  align-items: start;
  padding-block: var(--wrj-bloc-m) var(--wrj-section);
}
.woocommerce div.product > .woocommerce-product-gallery { grid-column: 1; min-width: 0; }
.woocommerce div.product > .summary { grid-column: 2; min-width: 0; margin: 0; }
/* « .wrj-fil » remplace « .woocommerce-tabs » depuis le lot A. Sans lui
   dans cette liste, le fil devenait une cellule de grille ordinaire : la
   colonne d'achat tombait a une centaine de pixels et le titre du produit
   sortait a une lettre par ligne. */
/* Le « min-width: 0 » est aussi indispensable ici que sur les deux colonnes
   du haut, et il manquait. Une piste « 1fr » a pour minimum automatique le
   min-content de ses elements : le fil et les produits associes imposaient
   donc leur largeur intrinseque a la colonne unique du mobile. Mesure a
   390px : la colonne sortait a 475,6px pour 350px utiles, et « overflow-x:
   clip » de 02-base coupait le debord au lieu de le montrer, gallerie,
   titre et prix compris. Effet de bord : le bloc conteneur des elements
   fixes s'en trouvait elargi, et le tiroir panier, cale a droite, partait
   pour moitie hors de l'ecran a 320 et 360px. */
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .wrj-fil,
.woocommerce div.product > .related,
.woocommerce div.product > .upsells { grid-column: 1 / -1; min-width: 0; }

.woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; padding: 0; list-style: none; }
/* Le puits est une PLAQUE, pas une carte.
   Il portait un rayon de 22px et un fond Papier 2 #F0F1F9. Une partie de
   la bibliotheque est en packshot a fond blanc opaque : on voyait donc un
   rectangle blanc dans un puits bleute dans une carte arrondie, trois
   surfaces emboitees pour une seule semelle. Le fond repasse au Papier de
   la page, ce qui fait disparaitre le rectangle des packshots opaques, et
   le rayon tombe : la plaque se cale sur la grille au lieu de flotter
   dessus. Le filet suffit a dire ou elle commence. */
.woocommerce div.product .woocommerce-product-gallery .flex-viewport,
.woocommerce div.product .woocommerce-product-gallery__image:first-child {
  border-radius: 0;
  overflow: hidden;
  background: var(--wrj-papier);
  border: 1px solid var(--wrj-filet);
}
.woocommerce div.product .woocommerce-product-gallery__image { margin: 0; }
.woocommerce div.product .woocommerce-product-gallery__image img { width: 100%; height: auto; padding: 6%; }
.woocommerce div.product .flex-control-thumbs {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--wrj-e-2);
  list-style: none; margin: var(--wrj-e-3) 0 0; padding: 0;
}
.woocommerce div.product .flex-control-thumbs li { margin: 0; width: auto; float: none; }
.woocommerce div.product .flex-control-thumbs img {
  width: 100%; aspect-ratio: 1/1; object-fit: contain; padding: 10%;
  /* Meme raison que le puits : un fond bleute derriere un packshot a fond
     blanc opaque fait apparaitre un rectangle. */
  background: var(--wrj-papier);
  border: 1px solid var(--wrj-filet); border-radius: 0;
  cursor: pointer; opacity: .55;
  transition: opacity var(--wrj-d-tap) var(--wrj-ease), border-color var(--wrj-d-tap) var(--wrj-ease);
}
.woocommerce div.product .flex-control-thumbs img:hover { opacity: .85; }
.woocommerce div.product .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--wrj-u-encre); }

/* ------------------------------------------------------------
   Pagination du rayon

   Aucune regle ne la couvrait : WooCommerce sortait un <ul> nu, donc
   des puces de liste et des numeros sans surface cliquable, au bas de
   chaque page de catalogue. Sur telephone, la cible faisait moins de
   20px de haut.
   ------------------------------------------------------------ */
.woocommerce nav.woocommerce-pagination { margin: var(--wrj-bloc-m) 0 0; }
.woocommerce nav.woocommerce-pagination ul.page-numbers {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--wrj-e-2);
  list-style: none; margin: 0; padding: 0; border: 0;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li { margin: 0; border: 0; overflow: visible; }
/* « li > » est indispensable : WooCommerce pose la classe « page-numbers »
   sur le <ul> LUI-MEME autant que sur chaque numero. Sans ce maillon, la
   liste recevait l'habillage d'une puce et sortait en rectangle Papier 2
   de 1248px de large sous la grille, mesure a 1440px. */
.woocommerce nav.woocommerce-pagination li > .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  padding-inline: var(--wrj-e-3);
  font-family: var(--wrj-display); font-weight: 700; font-size: var(--wrj-t-sm);
  color: var(--wrj-titre);
  background: var(--wrj-papier-2);
  border: 1px solid var(--wrj-filet);
  border-radius: var(--wrj-r-12);
  text-decoration: none;
  transition: background var(--wrj-d-tap) var(--wrj-ease), color var(--wrj-d-tap) var(--wrj-ease);
}
.woocommerce nav.woocommerce-pagination li > a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination li > a.page-numbers:focus-visible {
  background: var(--wrj-u-encre); color: var(--wrj-blanc); border-color: var(--wrj-u-encre);
}
.woocommerce nav.woocommerce-pagination li > .page-numbers.current {
  background: var(--wrj-u-encre); color: var(--wrj-blanc); border-color: var(--wrj-u-encre);
}
.woocommerce nav.woocommerce-pagination li > .page-numbers.dots {
  background: transparent; border-color: transparent; min-width: 24px;
}

/* Tete de colonne d'achat : la famille a gauche, le dossard a droite.
   Le dossard est la reference que le client cite au SAV : sur la fiche du
   produit, c'est-a-dire la seule page ou il la releve, il ne figurait
   nulle part. Il n'apparaissait que dans la grille et dans le panier. */
.wrj-fiche__entete { display: flex; align-items: flex-start; gap: var(--wrj-e-5); margin-bottom: var(--wrj-e-5); }
.wrj-fiche__entete .wrj-dossard { margin-left: auto; }
.wrj-fiche__entete .wrj-fiche__famille { margin-bottom: 0; }
.wrj-fiche__famille { margin-bottom: var(--wrj-e-4); }
.woocommerce div.product .product_title {
  /* L'echelle --wrj-t-h2 est calee sur un titre pleine largeur : dans la
     colonne d'achat, qui ne fait qu'un peu plus de 500px, elle montait a
     72px et « RUNNING » ne tenait plus sur une ligne. Le titre se coupait
     alors au milieu du mot (« RUNNIN / G ULTRA – YS »), parce que la
     regle de repli overflow-wrap prenait la main. Cette echelle-ci est
     bornee a la largeur reelle de la colonne. */
  font-size: clamp(1.75rem, 1.1rem + 1.9vw, 3.25rem);
  line-height: 0.94;
  text-transform: uppercase;
  text-wrap: balance;
  margin-bottom: var(--wrj-e-5);
}
.woocommerce div.product p.price, .woocommerce div.product span.price {
  font-family: var(--wrj-display); font-weight: 800;
  /* Valeur explicite, et non « var(--wrj-t-h3) » : ce jeton n'est
     defini nulle part dans 01-tokens.css. La declaration etait donc
     invalide et le prix retombait sur la taille heritee, 17px, avec un
     prix barre a 5,14px (0,55em de 0,55em) : un pate illisible devant le
     montant. C'est le deuxieme element le plus lu de la fiche.
     L'echelle est calee sous celle du titre du produit, qui plafonne a
     52px : le prix en fait un peu plus de la moitie. */
  font-size: clamp(1.5rem, 1.19rem + 0.9vw, 1.875rem); /* 24 → 30 a 1440px */
  line-height: 1;
  letter-spacing: var(--wrj-ls-affiche);
  color: var(--wrj-titre);
  margin-bottom: var(--wrj-e-5);
}
/* Le « .55em » etait pose sur le <del> ET sur le « .amount » qu'il
   contient : la reduction s'appliquait donc deux fois, 0,55 x 0,55, et le
   prix barre sortait a 9,07px pour un prix courant de 30. Un revendeur
   doit pouvoir lire le prix public a cote du sien. La taille est portee
   par le <del> seul, le montant qu'il contient herite. */
.woocommerce div.product p.price del {
  color: var(--wrj-encre-3); font-weight: 400; font-size: .55em; text-decoration: line-through;
}
.woocommerce div.product p.price del .amount { font-size: 1em; color: inherit; }
.woocommerce div.product p.price ins { text-decoration: none; }

.wrj-dispo {
  display: inline-flex; align-items: center; gap: 0.6em;
  margin: 0 0 var(--wrj-e-5);
  font-size: var(--wrj-t-sm); font-weight: 600; color: var(--wrj-succes);
}
.wrj-dispo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.wrj-dispo--rupture { color: var(--wrj-encre-3); }

/* Pointures en pastilles */
.woocommerce div.product table.variations { display: block; margin-bottom: var(--wrj-e-5); }
.woocommerce div.product table.variations tbody,
.woocommerce div.product table.variations tr,
.woocommerce div.product table.variations th,
.woocommerce div.product table.variations td {
  display: block; width: 100%; padding: 0; border: 0;
  /* Un th est centre par defaut : sans ca, le libelle « Pointure »
     flotte au milieu au-dessus de ses pastilles. */
  text-align: left;
}
.woocommerce div.product table.variations th.label label {
  font-size: var(--wrj-t-label); font-weight: 700;
  letter-spacing: var(--wrj-ls-label); text-transform: uppercase;
  color: var(--wrj-encre-3); margin-bottom: var(--wrj-e-3);
}
.wrj-pointures { display: flex; flex-wrap: wrap; gap: var(--wrj-e-2); margin-bottom: var(--wrj-e-3); }
.wrj-pointure {
  min-width: 66px; min-height: 48px;
  padding: 0 1em;
  border: 1px solid var(--wrj-filet-fort);
  border-radius: var(--wrj-r-12);
  background: var(--wrj-papier);
  font-family: var(--wrj-corps);
  font-size: var(--wrj-t-sm); font-weight: 700;
  color: var(--wrj-encre);
  transition: all var(--wrj-d-tap) var(--wrj-ease);
}
.wrj-pointure:hover { border-color: var(--wrj-u-encre); color: var(--wrj-u-encre); }
/* L'etat selectionne doit se lire contre le papier, pas seulement
   contre son propre texte : l'aplat brut ne s'en detache pas. */
.wrj-pointure[aria-pressed="true"] { background: var(--wrj-u-encre); border-color: var(--wrj-u-encre); color: var(--wrj-blanc); }
.wrj-pointure[disabled] { opacity: .3; text-decoration: line-through; cursor: not-allowed; }
.wrj-variations-remplacees select { position: absolute; opacity: 0; pointer-events: none; height: 0; }

.woocommerce div.product form.cart { display: flex; gap: var(--wrj-e-3); align-items: stretch; margin-bottom: var(--wrj-e-5); }
.woocommerce div.product form.cart.variations_form { display: block; }
.woocommerce div.product .woocommerce-variation-add-to-cart { display: flex; gap: var(--wrj-e-3); align-items: stretch; }
.woocommerce div.product form.cart div.quantity { margin: 0; }
/* Ce selecteur de quantite est celui de la FICHE produit, a cote du bouton
   d'ajout : d'ou ses 78 x 56 px. Non restreint, il gagnait aussi sur la
   ligne du panier (« .wrj-ligne__quantite .qty », plus faible d'une classe),
   ou la colonne mobile ne fait que 72 px : le champ debordait de 6 px. */
.woocommerce div.product .quantity .qty {
  width: 78px; height: 56px;
  text-align: center; font-weight: 700;
  background: var(--wrj-papier-2);
  border: 1px solid var(--wrj-filet-fort);
  border-radius: var(--wrj-r-12);
  color: var(--wrj-encre);
}
.woocommerce div.product button.single_add_to_cart_button { flex: 1; min-height: 56px; }

.wrj-reassurance {
  list-style: none; margin: var(--wrj-e-5) 0 0; padding: var(--wrj-e-5) 0 0;
  border-top: 1px solid var(--wrj-filet);
  display: grid; gap: var(--wrj-e-3);
}
.wrj-reassurance li { display: flex; align-items: flex-start; gap: var(--wrj-e-3); margin: 0; font-size: var(--wrj-t-sm); color: var(--wrj-encre-2); }
.wrj-reassurance svg { flex-shrink: 0; color: var(--wrj-succes); margin-top: 2px; }

/* Onglets */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex; gap: var(--wrj-e-6);
  margin: 0 0 var(--wrj-bloc-s); padding: 0;
  list-style: none; border-bottom: 2px solid var(--wrj-u-encre);
  overflow-x: auto;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: none; border: 0; border-bottom: 3px solid transparent; margin: 0 0 -2px; padding: 0; border-radius: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  padding: 0 0 var(--wrj-e-4);
  font-family: var(--wrj-corps); font-weight: 700; font-size: var(--wrj-t-sm);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--wrj-encre-3);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--wrj-u-encre); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--wrj-encre); }
.woocommerce div.product .woocommerce-tabs .panel { max-width: 72ch; color: var(--wrj-encre-2); }
/* Meme jeton manquant : valeur explicite, calee sur --wrj-t-chapo x1.3. */
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 1.75rem; }

.woocommerce .related > h2, .woocommerce .upsells > h2 { font-size: 1.75rem; text-transform: uppercase; margin-bottom: var(--wrj-bloc-s); }

/* ------------------------------------------------------------
   Boutons WooCommerce
   ------------------------------------------------------------ */
/* Le tiroir panier est monte dans l'en-tete, donc HORS du conteneur
   « .woocommerce » que WooCommerce pose autour du contenu boutique. Sans
   « .wrj-tiroir » dans cette liste, les boutons du mini-panier tombaient a
   nu : ni padding, ni rayon, ni hauteur, un simple lien de 26 px. La meme
   precaution vaut pour toute surface WooCommerce rendue hors du contenu. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #respond input#submit,
.wrj-tiroir a.button, .wrj-tiroir button.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 52px;
  padding: 0.95em 1.9em;
  border: 2px solid var(--wrj-u-encre);
  border-radius: var(--wrj-r-pill);
  background: transparent;
  color: var(--wrj-u-encre);
  font-family: var(--wrj-corps);
  font-size: var(--wrj-t-sm); font-weight: 700; line-height: 1;
  text-transform: none;
  transition: all var(--wrj-d-tap) var(--wrj-ease);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.wrj-tiroir a.button:hover, .wrj-tiroir button.button:hover {
  background: var(--wrj-u); color: var(--wrj-u-sur); border-color: var(--wrj-u);
}
/* L'unique Ambre : valider. Ajout au panier, commande, paiement, et
   la soumission des formulaires de compte, qui est l'action principale
   de son bloc. Partout ailleurs, le bouton est filaire. */
.woocommerce a.checkout-button.button, .woocommerce a.checkout-button.button.alt,
.woocommerce button#place_order.button, .woocommerce button#place_order.button.alt,
.woocommerce div.product button.button.alt.single_add_to_cart_button,
.woocommerce button.woocommerce-form-login__submit,
.woocommerce button.woocommerce-form-register__submit,
.woocommerce button.woocommerce-Button[name="save_account_details"],
.woocommerce button.woocommerce-Button[name="save_address"] {
  background: var(--wrj-ambre); color: var(--wrj-noir); border-color: var(--wrj-lapis);
}
/* Il n'y a PAS d'exception de famille sur l'action. Deux regles posaient
   ici « body[class*=wrj-f--] ... single_add_to_cart_button { background:
   var(--wrj-u) } », et deux autres la meme chose dans 03-composants.css
   sur « .wrj-btn--action ». Consequence mesuree sur
   /fr/produit/le-sport-au-feminin/ (famille Course) : fond du bouton
   d'ajout releve a rgb(12,153,118), soit le Verdancy #0C9976. Le bouton
   « Ajouter au panier » etait vert, et l'encre de discipline avait pris
   la place de la couleur d'action sur toute la page.

   L'Ambre #FFDC66 est la seule couleur d'action du site et il ne sert
   qu'a valider. L'encre de discipline dit OU l'on est (bandeau de rayon,
   liseré, tag de famille), jamais QUOI faire. Les deux systemes ne se
   melangent pas. Regles supprimees, pas neutralisees : une surcharge
   laissee en place se remet toujours a couler un jour. */
.woocommerce a.checkout-button.button:hover, .woocommerce button#place_order.button:hover,
.woocommerce div.product button.button.alt.single_add_to_cart_button:hover,
.woocommerce button.woocommerce-form-login__submit:hover,
.woocommerce button.woocommerce-form-register__submit:hover,
/* Ces trois-la etaient plus specifiques que le :hover generique et
   restaient donc figes au survol. */
.woocommerce button.woocommerce-Button[name="save_account_details"]:hover,
.woocommerce button.woocommerce-Button[name="save_address"]:hover,
.wrj-tiroir p.woocommerce-mini-cart__buttons a.checkout:hover { background: #FFE894; color: var(--wrj-noir); }

/* ------------------------------------------------------------
   Notices
   ------------------------------------------------------------ */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  display: flex; align-items: center; gap: var(--wrj-e-4); flex-wrap: wrap;
  list-style: none; margin: 0 0 var(--wrj-e-5);
  padding: var(--wrj-e-4) var(--wrj-e-5);
  border: 1px solid var(--wrj-filet-fort);
  border-radius: var(--wrj-r-12);
  background: var(--wrj-papier-2);
  color: var(--wrj-encre);
  font-size: var(--wrj-t-sm);
}
.woocommerce-message { border-color: var(--wrj-succes); }
.woocommerce-error { border-color: var(--wrj-erreur); color: var(--wrj-erreur); }
.woocommerce-message .button, .woocommerce-info .button { margin-left: auto; }

/* ------------------------------------------------------------
   Formulaires
   ------------------------------------------------------------ */
.woocommerce form .form-row { margin: 0 0 var(--wrj-e-5); padding: 0; }
.woocommerce form .form-row label {
  display: block; font-size: var(--wrj-t-label); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wrj-encre-3); margin-bottom: var(--wrj-e-2);
}
.woocommerce form .form-row .required { color: var(--wrj-erreur); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%; height: auto; min-height: 52px;
  padding: 0.85em 1.05em;
  background: var(--wrj-papier-2);
  border: 1px solid var(--wrj-filet-fort);
  border-radius: var(--wrj-r-12);
  color: var(--wrj-encre);
  font-family: var(--wrj-corps);
  font-size: var(--wrj-t-corps);
  line-height: 1.4;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { outline: 2px solid var(--wrj-lapis); outline-offset: 1px; border-color: var(--wrj-lapis); }
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--wrj-erreur); }
.woocommerce-form__label-for-checkbox {
  display: flex !important; align-items: flex-start; gap: var(--wrj-e-3);
  font-weight: 400 !important; font-size: var(--wrj-t-sm);
  text-transform: none !important; letter-spacing: 0 !important;
  color: var(--wrj-encre-2); cursor: pointer;
}
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; accent-color: var(--wrj-lapis); }

/* ------------------------------------------------------------
   Panier et commande
   Le tunnel est chromatiquement muet : aucune couleur de famille
   en aplat, aucun hors-reperage, aucun titre au-dela de 40px.
   L'affiche crie, la caisse chuchote.
   ------------------------------------------------------------ */
/* La commande a desormais sa propre grille, posee par le gabarit
   « checkout/form-checkout.php » (.wrj-commande__grille). La regle
   ci-dessous ne vaut donc plus que pour le panier : appliquee aussi au
   formulaire de commande, elle reservait une colonne de 400px vide et
   ecrasait la colonne de saisie a 230px. */
.woocommerce-cart .woocommerce {
  display: grid;
  grid-template-columns: 1fr 400px;
  /* Le gap ne vaut qu'entre les colonnes : applique aussi aux lignes, il
     decrochait le titre « Votre commande » de son panneau de 52px. */
  column-gap: var(--wrj-bloc-s);
  row-gap: 0;
  align-items: start;
}
/* Panier vide : la grille a deux colonnes n'a rien a organiser, elle
   ne faisait qu'ecarter le message de son bouton. */
.woocommerce-cart .woocommerce:has(.cart-empty),
.woocommerce-cart .woocommerce:has(.wc-empty-cart-message) { display: block; max-width: 46rem; }
.woocommerce-cart .cart-empty, .woocommerce-cart .wc-empty-cart-message {
  margin-bottom: var(--wrj-e-6);
  font-size: var(--wrj-t-chapo);
  color: var(--wrj-encre-2);
  background: none; border: 0; padding: 0;
}
.woocommerce-cart .return-to-shop { margin: 0; }
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart .woocommerce-cart-form { grid-column: 1; min-width: 0; margin: 0; }
.woocommerce-cart .cart-collaterals { grid-column: 2; width: 100%; float: none; }
.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; }
.woocommerce-cart .cart-collaterals .cross-sells { grid-column: 1 / -1; }
.woocommerce-checkout form.checkout #customer_details { min-width: 0; margin: 0; }
.woocommerce-checkout form.checkout #order_review { min-width: 0; }

/* Case des conditions generales : l'etiquette et son asterisque doivent
   rester solidaires, sur une seule ligne de lecture. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row { display: flex; align-items: flex-start; gap: var(--wrj-e-3); }
.woocommerce-checkout .woocommerce-form__label-for-checkbox span { flex: 1; }
.woocommerce-checkout .validate-required .required { margin-left: 0; }

.woocommerce table.shop_table { border: 0; border-collapse: separate; border-spacing: 0; width: 100%; margin: 0 0 var(--wrj-bloc-s); }
.woocommerce table.shop_table thead th {
  font-size: var(--wrj-t-label); font-weight: 700;
  letter-spacing: var(--wrj-ls-label); text-transform: uppercase;
  color: var(--wrj-encre-3);
  padding: var(--wrj-e-3);
  border-bottom: 2px solid var(--wrj-u-encre);
}
/* Le recapitulatif de commande est un tableau de totaux, pas un tableau de
   produits : il garde la classe « shop_table » parce que des extensions la
   cherchent, mais sa mise en page appartient a « 08-marchand.css ». Sans
   cette exclusion, cette regle (3 classes, 2 elements avec le :not)
   l'emportait sur « .wrj-recap-commande .wrj-recap__table td » et reposait
   un filet sous chaque montant. */
.woocommerce table.shop_table:not(.wrj-recap__table) td { padding: var(--wrj-e-4) var(--wrj-e-3); border-bottom: 1px solid var(--wrj-filet); vertical-align: middle; color: var(--wrj-encre-2); }
.woocommerce table.shop_table td.product-name a { font-family: var(--wrj-display); font-weight: 700; color: var(--wrj-encre); }
.woocommerce table.shop_table td.product-thumbnail img { width: 72px; border-radius: var(--wrj-r-12); background: var(--wrj-papier-2); }
.woocommerce table.shop_table .product-remove a.remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--wrj-filet-fort); background: transparent !important;
  color: var(--wrj-encre-3) !important; font-size: 1.05rem; line-height: 1;
}
.woocommerce table.shop_table .product-remove a.remove:hover { border-color: var(--wrj-erreur); color: var(--wrj-erreur) !important; }

/* « #order_review » n'est plus habille ici. Depuis le lot A, la carte du
   recapitulatif est portee par « .wrj-commande__recap », son parent. Les
   deux ensemble faisaient une carte dans une carte : deux bordures, deux
   rayons, et surtout deux paddings. Sur un mobile de 390 px, la colonne de
   350 px tombait ainsi a 218 px de contenu utile, et le mode de livraison,
   qui demande 293 px, debordait de 75 px. Idem pour le titre. */
.woocommerce .cart_totals {
  padding: var(--wrj-e-6);
  background: var(--wrj-papier-2);
  border: 1px solid var(--wrj-filet);
  border-radius: var(--wrj-r-18);
}
.woocommerce .cart_totals h2 { font-size: var(--wrj-t-chapo); text-transform: uppercase; margin-bottom: var(--wrj-e-4); }
/* Les totaux, au panier comme a la commande, sont mis en page par
   « .wrj-recap__table » dans 08-marchand.css, seule source depuis le lot A.
   Les regles qui visaient ici « .cart_totals table.shop_table » ont ete
   retirees : les deux gabarits surcharges n'emettent plus cette classe sur
   leur tableau de totaux, elles ne s'appliquaient donc plus a rien, tout en
   donnant a lire une mise en page concurrente qui n'existait pas.
   Ce qui suit ne depend pas de « shop_table » et reste vivant. */
.woocommerce .cart_totals tr.order-total { border-bottom: 0; padding-top: var(--wrj-e-4); }
.woocommerce .cart_totals tr.order-total th, .woocommerce .cart_totals tr.order-total td {
  font-family: var(--wrj-display); font-size: var(--wrj-t-chapo); font-weight: 800; color: var(--wrj-titre);
}

/* La mention de TVA est une precision, pas un montant : elle ne prend pas
   la taille du total et se pose sur sa propre ligne. */
.woocommerce .cart_totals tr.order-total td small,
.woocommerce .cart_totals tr.order-total td .includes_tax,
.woocommerce-checkout tr.order-total td small,
.woocommerce-checkout tr.order-total td .includes_tax {
  display: block;
  margin-top: var(--wrj-e-2);
  font-family: var(--wrj-corps);
  font-size: var(--wrj-t-label);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--wrj-encre-3);
}

/* Livraison et paiement : cartes cliquables */
.woocommerce ul#shipping_method, .woocommerce-checkout #payment ul.payment_methods {
  display: grid; gap: var(--wrj-e-2); list-style: none; margin: 0; padding: 0; border: 0;
}
.woocommerce ul#shipping_method li, .woocommerce-checkout #payment ul.payment_methods li {
  position: relative; display: block; margin: 0; padding: 0;
  border: 1px solid var(--wrj-filet-fort);
  border-radius: var(--wrj-r-12);
  background: var(--wrj-papier);
  transition: border-color var(--wrj-d-tap) var(--wrj-ease), background-color var(--wrj-d-tap) var(--wrj-ease);
}
.woocommerce ul#shipping_method li:hover, .woocommerce-checkout #payment ul.payment_methods li:hover { border-color: var(--wrj-lapis); }
.woocommerce ul#shipping_method li input[type="radio"],
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  position: absolute; top: 50%; left: var(--wrj-e-5); transform: translateY(-50%);
  width: 20px; height: 20px; margin: 0;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { top: 20px; transform: none; }
.woocommerce ul#shipping_method li label, .woocommerce-checkout #payment ul.payment_methods li label {
  display: flex; align-items: center; justify-content: space-between; gap: var(--wrj-e-4);
  min-height: 56px; margin: 0;
  padding: var(--wrj-e-4) var(--wrj-e-5) var(--wrj-e-4) calc(var(--wrj-e-5) + 34px);
  font-size: var(--wrj-t-sm); font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--wrj-encre);
  cursor: pointer; text-align: left;
}
.woocommerce ul#shipping_method li:has(input:checked),
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
  border-color: var(--wrj-lapis); border-width: 2px; background: var(--wrj-papier-2);
}
/* Le libelle et le prix tiennent sur une ligne tant qu'il y a la place, et
   passent l'un sous l'autre quand il n'y en a plus. Sans cela, la ligne
   imposait sa largeur minimale (34 px de puce + les deux marges + le mot le
   plus long + le montant insecable, soit 291 px) et debordait du
   recapitulatif sur un mobile de 390 px. */
.woocommerce ul#shipping_method li label,
.woocommerce-checkout #payment ul.payment_methods li label { flex-wrap: wrap; }
/* 7rem est une largeur SOUHAITEE, pas un minimum. Elle sert a decider du
   retour a la ligne : tant que le libelle et le montant tiennent ensemble,
   ils restent cote a cote ; des que 7rem + le montant ne rentrent plus, le
   montant passe dessous plutot que de hacher le libelle en trois lignes.
   « min-width: 0 » reste indispensable : sans lui, 7rem redevient un
   plancher dur et le bloc deborde sous 360 px. */
.wrj-livraison__nom { flex: 1 1 7rem; min-width: 0; }
.wrj-livraison__prix { font-family: var(--wrj-display); font-weight: 800; color: var(--wrj-titre); white-space: nowrap; }
.wrj-livraison__offert { font-size: var(--wrj-t-label); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wrj-succes); }
.woocommerce-checkout #payment { background: transparent; }
.woocommerce-checkout #payment div.payment_box {
  margin: 0 var(--wrj-e-5) var(--wrj-e-4); padding: var(--wrj-e-4);
  background: var(--wrj-papier-2); border-radius: var(--wrj-r-12);
  font-size: var(--wrj-t-sm); color: var(--wrj-encre-2);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* Le fil du tunnel */
.wrj-tunnel { display: flex; align-items: center; gap: var(--wrj-e-3); list-style: none; margin: 0 0 var(--wrj-bloc-s); padding: 0; flex-wrap: wrap; }
.wrj-tunnel__etape { display: flex; align-items: center; gap: var(--wrj-e-3); margin: 0; font-size: var(--wrj-t-sm); font-weight: 600; color: var(--wrj-encre-3); }
.wrj-tunnel__etape + .wrj-tunnel__etape::before { content: ""; width: clamp(20px, 5vw, 56px); height: 2px; background: var(--wrj-filet); }
.wrj-tunnel__puce {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--wrj-filet-fort);
  font-size: var(--wrj-t-label); font-weight: 800;
}
.wrj-tunnel__etape--courante { color: var(--wrj-encre); }
.wrj-tunnel__etape--courante .wrj-tunnel__puce { background: var(--wrj-lapis); border-color: var(--wrj-lapis); color: var(--wrj-blanc); }
.wrj-tunnel__etape--faite { color: var(--wrj-succes); }
.wrj-tunnel__etape--faite .wrj-tunnel__puce { background: var(--wrj-succes); border-color: var(--wrj-succes); color: var(--wrj-blanc); }

/* Barre d'achat collante */
.wrj-barre-achat {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: calc(var(--wrj-z-nav) + 1);
  display: none; align-items: center; justify-content: space-between; gap: var(--wrj-e-4);
  padding: var(--wrj-e-3) var(--wrj-gouttiere);
  background: var(--wrj-papier);
  border-top: 2px solid var(--wrj-lapis);
  transform: translateY(110%);
  transition: transform var(--wrj-d-etat) var(--wrj-ease);
}
.wrj-barre-achat[data-visible="true"] { transform: translateY(0); }
.wrj-barre-achat__infos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wrj-barre-achat__nom { font-size: var(--wrj-t-label); color: var(--wrj-encre-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrj-barre-achat__prix { font-family: var(--wrj-display); font-weight: 800; font-size: var(--wrj-t-chapo); color: var(--wrj-titre); }
.wrj-barre-achat__prix del { display: none; }
/* Elle se pose au-dessus de la barre d'onglets, encoche comprise. */
@media (max-width: 900px) { .wrj-barre-achat { display: flex; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); } }

/* ------------------------------------------------------------
   Tiroir panier

   Le tiroir est la premiere piece du tunnel. Comme le panier et la
   commande, il n'appartient plus a une famille : il sort de la page
   de rayon ou de produit et doit garder la meme identite d'un bout a
   l'autre, sinon le client voit son « Voir le panier » passer du vert
   Verdancy au rouge Atlas selon la fiche d'ou il vient. On remet donc
   les trois variables de famille a plat des la racine du tiroir : tout
   ce qui est dedans, y compris les boutons WooCommerce habilles plus
   haut par « --wrj-u-encre », retombe sur le Lapis de marque.

   Mesures, sur Papier #FAFDFF : Lapis #1E0080 = 15.04:1, et blanc sur
   Lapis 15.04:1 egalement. Sur Papier 2 #F0F1F9, le Lapis tient
   13.65:1.
   ------------------------------------------------------------ */
.wrj-tiroir {
  --wrj-u:       var(--wrj-lapis);
  --wrj-u-encre: var(--wrj-lapis);
  --wrj-u-sur:   var(--wrj-blanc);
  position: fixed; inset: 0; z-index: var(--wrj-z-panneau); visibility: hidden;
}
.wrj-tiroir[data-ouvert="true"] { visibility: visible; }
.wrj-tiroir__voile { position: absolute; inset: 0; background: rgb(10 0 30 / .5); opacity: 0; transition: opacity var(--wrj-d-panneau) var(--wrj-ease); }
.wrj-tiroir[data-ouvert="true"] .wrj-tiroir__voile { opacity: 1; }
.wrj-tiroir__panneau {
  position: absolute; top: 0; right: 0; bottom: 0;
  /* « 100% » se mesurait sur le bloc conteneur fixe, que le moindre
     debordement horizontal de la page suffit a elargir : le panneau
     sortait a 367px sur un ecran de 320. Le viewport, lui, ne ment pas. */
  width: min(430px, 100vw);
  display: flex; flex-direction: column;
  background: var(--wrj-papier);
  border-left: 2px solid var(--wrj-lapis);
  /* L'ombre porte le panneau au-dessus de la page au lieu de l'y coller :
     c'est ce qui separe un tiroir d'une colonne. */
  box-shadow: -30px 0 60px -32px rgb(10 0 30 / .45);
  transform: translateX(100%);
  transition: transform var(--wrj-d-panneau) var(--wrj-ease);
}
.wrj-tiroir[data-ouvert="true"] .wrj-tiroir__panneau { transform: translateX(0); }

.wrj-tiroir__entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wrj-e-4);
  /* 10px en haut et en bas : la cible de fermeture de 44px fixe la hauteur
     de la bande a 64px, et le titre s'y aligne. */
  padding: 10px var(--wrj-e-5);
  border-bottom: 2px solid var(--wrj-lapis);
}
/* Le titre est le seul texte du tiroir que le JS reecrit : il passe de
   « Votre panier » au libelle de confirmation a chaque ajout. En Syne 800 a
   22px capitales, la version longue faisait deux lignes et ecrasait le bouton
   de fermeture. L'echelle de la marque n'a de toute facon pas de Syne dans
   cette zone : entre le label de 13px et l'affiche de 40px, il n'y a rien.

   Le titre redevient donc ce qu'il est, la barre de titre d'un panneau, et il
   reprend exactement la recette de « .wrj-label » : Space Grotesk 700, 13px,
   interlettrage 0.11em, capitales. Mesure du libelle long a 320px d'ecran :
   306px en Syne 800 pour 210px utiles (deux lignes), 178px en Space Grotesk
   (une seule ligne, a toutes les largeurs). Le poids visuel du tiroir est
   porte par le total, pas par sa barre de titre. */
.wrj-tiroir__titre {
  margin: 0; min-width: 0;
  font-family: var(--wrj-corps); font-weight: 700;
  font-size: var(--wrj-t-label);
  letter-spacing: var(--wrj-ls-label);
  line-height: 1.2;
  text-wrap: balance;
  text-transform: uppercase;
  color: var(--wrj-titre);
}
.wrj-tiroir__corps {
  flex: 1; overflow-y: auto;
  /* Arrive en bout de liste, la molette ne doit pas embrayer sur la page
     restee derriere le voile. */
  overscroll-behavior: contain;
  display: flex; flex-direction: column;
  padding: var(--wrj-e-2) var(--wrj-e-5) var(--wrj-e-5);
}
/* Avec un seul article, le sous-total et les deux boutons flottaient au tiers
   du panneau, suivis d'un demi-ecran de vide : le tiroir avait l'air inacheve.
   La liste prend la place restante et pousse le recapitulatif en bas, contre
   le pied. Des que le panier deborde, tout reprend son flux et defile.
   WooCommerce remplace le noeud « .widget_shopping_cart_content » a chaque
   rafraichissement de fragment, mais il en garde la classe : la regle tient. */
.wrj-tiroir__corps .widget_shopping_cart_content { flex: 1; display: flex; flex-direction: column; }
.wrj-tiroir__corps ul.woocommerce-mini-cart { flex: 1; }

.wrj-tiroir__pied { padding: var(--wrj-e-5); padding-bottom: calc(var(--wrj-e-5) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--wrj-filet); background: var(--wrj-papier-2); }
/* Le libelle passe a deux lignes des 390px : la coche se cale sur la premiere
   ligne, pas au milieu du bloc. */
.wrj-tiroir__note { display: flex; align-items: flex-start; gap: var(--wrj-e-2); margin: 0 0 var(--wrj-e-4); font-size: var(--wrj-t-sm); line-height: 1.45; color: var(--wrj-encre-2); }
.wrj-tiroir__note svg { color: var(--wrj-succes); flex-shrink: 0; margin-top: 3px; }

.wrj-tiroir ul.woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }
/* 48px reserves a droite : c'est la cible de retrait de 44px, plus sa garde. */
.wrj-tiroir ul.woocommerce-mini-cart li { position: relative; display: block; margin: 0; padding: var(--wrj-e-4) 48px var(--wrj-e-4) 0; border-bottom: 1px solid var(--wrj-filet); }
/* Le dernier filet doublait celui du total, deux traits a 16px d'ecart. */
.wrj-tiroir ul.woocommerce-mini-cart li:last-child { border-bottom: 0; }
.wrj-tiroir ul.woocommerce-mini-cart li > a:not(.remove) {
  display: block; position: relative; min-height: 64px; padding-left: 80px;
  font-family: var(--wrj-display); font-weight: 700; font-size: var(--wrj-t-sm); line-height: 1.3; color: var(--wrj-encre);
  transition: color var(--wrj-d-tap) var(--wrj-ease);
}
.wrj-tiroir ul.woocommerce-mini-cart li > a:not(.remove):hover { color: var(--wrj-lapis); text-decoration: none; }
.wrj-tiroir ul.woocommerce-mini-cart li img {
  position: absolute; left: 0; top: 0; width: 64px; height: 64px; object-fit: contain;
  padding: 6px; border-radius: var(--wrj-r-12);
  background: var(--wrj-papier-2); border: 1px solid var(--wrj-filet);
}
.wrj-tiroir ul.woocommerce-mini-cart li dl.variation { display: none; }
.wrj-tiroir ul.woocommerce-mini-cart li .quantity { display: block; margin-left: 80px; margin-top: var(--wrj-e-2); font-size: var(--wrj-t-sm); font-weight: 600; color: var(--wrj-encre-3); }
.wrj-tiroir ul.woocommerce-mini-cart li .quantity .amount { color: var(--wrj-titre); }
/* Le « × » de retrait mesurait 32x32, sous le seuil de 44 (WCAG 2.5.8), et
   son seul etat etait le repos : ni survol, ni focus lisible. La cible passe
   a 44x44 sans grossir le dessin : la pastille visible reste un disque de
   32px, portee par un pseudo-element, et les 6px de garde tout autour
   comptent dans la cible. Le disque garde son alignement d'origine sur le
   haut de la vignette, d'ou le retrait de 6px sur « top ». */
.wrj-tiroir ul.woocommerce-mini-cart li a.remove {
  position: absolute; top: 10px; right: 0;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: transparent !important;
  color: var(--wrj-encre-2) !important;
  font-size: 1.25rem; line-height: 1; text-decoration: none;
  transition: color var(--wrj-d-tap) var(--wrj-ease);
}
.wrj-tiroir ul.woocommerce-mini-cart li a.remove::before {
  content: "";
  position: absolute; inset: 6px;
  border-radius: 50%;
  border: 1px solid var(--wrj-filet-fort);
  background: transparent;
  transition: border-color var(--wrj-d-tap) var(--wrj-ease),
              background-color var(--wrj-d-tap) var(--wrj-ease);
}
/* Retirer est une action destructrice : elle s'annonce en rouge d'etat
   (#B03636, 6.00:1 sur papier) au survol, pas en encre courante. */
.wrj-tiroir ul.woocommerce-mini-cart li a.remove:hover,
.wrj-tiroir ul.woocommerce-mini-cart li a.remove:focus-visible { color: var(--wrj-erreur) !important; }
.wrj-tiroir ul.woocommerce-mini-cart li a.remove:hover::before,
.wrj-tiroir ul.woocommerce-mini-cart li a.remove:focus-visible::before {
  border-color: var(--wrj-erreur);
  background: color-mix(in srgb, var(--wrj-erreur) 8%, transparent);
}
/* Le focus doit epouser le disque, pas le carre de 44 : sans cela l'anneau
   flottait a 6px du dessin et sortait du panneau sur le bord droit. */
.wrj-tiroir ul.woocommerce-mini-cart li a.remove:focus-visible {
  outline: 0;
}
.wrj-tiroir ul.woocommerce-mini-cart li a.remove:focus-visible::before {
  outline: 2px solid var(--wrj-focus);
  outline-offset: 2px;
}

/* Ni le libelle ni le montant ne se coupent : ce sont deux blocs entiers.
   Quand ils ne tiennent plus cote a cote (panier a trois chiffres sur un
   ecran de 320), le montant descend d'une ligne et reste cale a droite,
   plutot que de couper « Sous-total : » en deux ou de sortir du panneau. */
.wrj-tiroir p.woocommerce-mini-cart__total {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  column-gap: var(--wrj-e-4); row-gap: var(--wrj-e-1);
  margin: var(--wrj-e-4) 0 0; padding-top: var(--wrj-e-4);
  border-top: 2px solid var(--wrj-lapis);
  font-family: var(--wrj-display); font-weight: 800; font-size: var(--wrj-t-corps);
}
.wrj-tiroir p.woocommerce-mini-cart__total strong { white-space: nowrap; }
.wrj-tiroir p.woocommerce-mini-cart__total .amount {
  margin-left: auto;
  font-size: var(--wrj-t-chapo); color: var(--wrj-titre); white-space: nowrap;
}
.wrj-tiroir p.woocommerce-mini-cart__buttons { display: grid; gap: var(--wrj-e-3); margin: var(--wrj-e-5) 0 0; }
.wrj-tiroir p.woocommerce-mini-cart__buttons a { width: 100%; }
.wrj-tiroir p.woocommerce-mini-cart__buttons a.checkout { background: var(--wrj-ambre); color: var(--wrj-noir); border-color: var(--wrj-lapis); order: -1; }
/* Meme correctif de rayon que sur « .wrj-btn » : le focus global de 02-base
   ecrasait la pilule en angles droits. */
.wrj-tiroir a.button:focus-visible, .wrj-tiroir button.button:focus-visible {
  outline: 2px solid var(--wrj-focus);
  outline-offset: 2px;
  border-radius: var(--wrj-r-pill);
}
.wrj-tiroir p.woocommerce-mini-cart__empty-message { padding: var(--wrj-bloc-m) 0; text-align: center; color: var(--wrj-encre-2); }

/* Compte et connexion */
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--wrj-bloc-s); align-items: start; }
/* « minmax(0, 1fr) » et non « 1fr », pour la raison deja ecrite plus
   haut a propos de la grille produits : une piste « 1fr » a pour minimum
   automatique le min-content de son contenu. Ici c'est le widget
   Turnstile, une iframe de 300px que le plugin pose en dur, qui fixait
   ce minimum. Mesure a 390px le 2026-08-15 : la piste sortait a
   359,56px pour 350px utiles, et les deux blocs de compte depassaient
   de 10px a droite, ce qui se lisait comme un defaut de centrage. */
.woocommerce-account:not(.logged-in) .woocommerce { grid-template-columns: minmax(0, 1fr); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin-bottom: 2px; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block; padding: 0.8em 1.1em; border-radius: var(--wrj-r-12);
  font-size: var(--wrj-t-sm); font-weight: 600; color: var(--wrj-encre-2);
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--wrj-papier-2); color: var(--wrj-lapis); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--wrj-lapis); color: var(--wrj-blanc); }

/* `margin-inline: auto`, et c'est le correctif du 2026-08-15.
   Le bloc est borne a 1000px et vivait dans un conteneur de 1248 : les
   248px de reste tombaient TOUS a droite. Mesure sur /fr/compte/ a
   1440px, les deux formulaires occupaient 96 a 1096 dans un conteneur
   allant de 96 a 1344. Un bloc borne qui ne se centre pas ne se lit pas
   comme un parti pris de composition, il se lit comme un defaut. Meme
   correction sur le bandeau pro juste dessous, qui portait la meme
   borne et le meme oubli. */
.wrj-connexion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--wrj-e-5); max-width: 1000px; margin-inline: auto; }
.wrj-connexion--seule { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.wrj-connexion__bloc { padding: var(--wrj-e-6); background: var(--wrj-papier-2); border: 1px solid var(--wrj-filet); border-radius: var(--wrj-r-18); }
.wrj-connexion__titre { font-size: var(--wrj-t-chapo); text-transform: uppercase; margin-bottom: var(--wrj-e-2); }
.wrj-connexion__intro { font-size: var(--wrj-t-sm); color: var(--wrj-encre-2); margin-bottom: var(--wrj-e-5); }
.wrj-connexion__bas { display: flex; align-items: center; justify-content: space-between; gap: var(--wrj-e-4); flex-wrap: wrap; font-size: var(--wrj-t-sm); margin-top: var(--wrj-e-4); }
.wrj-connexion__actions { display: flex; gap: var(--wrj-e-3); flex-wrap: wrap; align-items: center; }
.wrj-connexion__note { font-size: var(--wrj-t-sm); color: var(--wrj-encre-3); margin: var(--wrj-e-4) 0 0; }

/* Sortie vers la demande de compte, sous chaque formulaire de connexion. */
.wrj-connexion__demande {
  margin: var(--wrj-e-4) 0 0;
  padding-top: var(--wrj-e-4);
  border-top: 1px solid var(--wrj-filet);
  font-size: var(--wrj-t-sm);
  color: var(--wrj-encre-2);
}
.wrj-connexion__demande a { font-weight: 600; text-underline-offset: 3px; }
.woocommerce .wrj-connexion form.login, .woocommerce .wrj-connexion form.register { padding: 0; border: 0; background: transparent; margin: 0; }

/* Le widget Cloudflare Turnstile.
   Il sort une iframe de 300px de large, une valeur fixe qu'il pose
   lui-meme en attribut. Sur une colonne de 302px utiles a 390px de
   fenetre, c'est elle qui fixait le minimum de la grille et faisait
   sortir le bloc de 10px hors de son conteneur. On la laisse retrecir :
   le widget est concu pour, il recadre son contenu.
   La regle est ecrite ici plutot que sur `.cf-turnstile` seul parce que
   le plugin enveloppe l'iframe d'un div sans classe stable. */
.cf-turnstile,
.cf-turnstile > *,
.cf-turnstile iframe { max-width: 100%; }

.wrj-acces-pro {
  display: flex; align-items: center; justify-content: space-between; gap: var(--wrj-bloc-s); flex-wrap: wrap;
  max-width: 1000px; margin-top: var(--wrj-bloc-m); margin-inline: auto;
  padding: var(--wrj-e-6);
  border-radius: var(--wrj-r-22);
  background: var(--wrj-lapis); color: var(--wrj-blanc);
}
.wrj-acces-pro__texte { min-width: 0; }
.wrj-acces-pro__titre { color: var(--wrj-blanc); font-size: var(--wrj-t-chapo); text-transform: uppercase; margin-bottom: var(--wrj-e-2); }
.wrj-acces-pro__chapo { color: var(--wrj-blanc); opacity: .85; font-size: var(--wrj-t-sm); margin: 0; max-width: 46ch; }
.wrj-acces-pro .wrj-label { color: var(--wrj-blanc); opacity: .7; }

/* Confirmation : le seul retour de l'affiche */
.wrj-merci { max-width: 62rem; }
.wrj-merci__entete { display: flex; align-items: center; gap: var(--wrj-bloc-s); flex-wrap: wrap; margin-bottom: var(--wrj-bloc-m); }
/* Idem pour --wrj-t-h2. Le titre de la confirmation de commande est le
   seul retour de l'affiche dans le tunnel : il ne peut pas sortir a
   17px. Meme echelle que le titre de page, --wrj-t-titre-page. */
.wrj-merci__titre { font-size: var(--wrj-t-titre-page); text-transform: uppercase; margin-bottom: var(--wrj-e-4); }
.wrj-merci__chapo { font-size: var(--wrj-t-chapo); color: var(--wrj-encre-2); }
.wrj-merci__sous-titre { font-size: var(--wrj-t-chapo); text-transform: uppercase; margin-bottom: var(--wrj-e-5); }
.wrj-merci__suite, .wrj-merci__recap { margin-bottom: var(--wrj-bloc-m); }
.wrj-etapes-suite { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wrj-e-5); }
.wrj-etape-suite { display: grid; grid-template-columns: 44px 1fr; gap: var(--wrj-e-5); align-items: start; margin: 0; padding-top: var(--wrj-e-4); border-top: 1px solid var(--wrj-filet); }
.wrj-etape-suite__num { font-family: var(--wrj-display); font-weight: 800; font-size: 1.75rem; line-height: 1; color: var(--wrj-lapis); }
.wrj-etape-suite__titre { font-family: var(--wrj-display); font-weight: 700; font-size: var(--wrj-t-chapo); color: var(--wrj-titre); margin-bottom: var(--wrj-e-2); }
.wrj-etape-suite__texte { font-size: var(--wrj-t-sm); color: var(--wrj-encre-2); margin: 0; }
.wrj-recap-cles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--wrj-e-5); margin: 0 0 var(--wrj-bloc-s);
  padding: var(--wrj-e-6);
  background: var(--wrj-papier-2); border: 1px solid var(--wrj-filet); border-radius: var(--wrj-r-18);
}
.wrj-recap-cles dt { font-size: var(--wrj-t-label); font-weight: 700; letter-spacing: var(--wrj-ls-label); text-transform: uppercase; color: var(--wrj-encre-3); margin-bottom: var(--wrj-e-2); }
.wrj-recap-cles dd { margin: 0; font-family: var(--wrj-display); font-weight: 700; color: var(--wrj-titre); }
.wrj-merci__actions { display: flex; gap: var(--wrj-e-3); flex-wrap: wrap; }
.wrj-merci--echec .wrj-merci__titre { color: var(--wrj-erreur); }

/* ------------------------------------------------------------
   Réponsif boutique
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .woocommerce-cart .woocommerce, .woocommerce-checkout form.checkout.woocommerce-checkout { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-checkout form.checkout #customer_details,
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review { grid-column: 1; grid-row: auto; }
  .woocommerce-cart .woocommerce-cart-form, .woocommerce-cart .cart-collaterals { grid-column: 1; }
  .woocommerce-account .woocommerce { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: var(--wrj-e-2); }
  .woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
}
@media (max-width: 900px) {
  .woocommerce div.product { grid-template-columns: 1fr; gap: var(--wrj-bloc-s); }
  .woocommerce div.product > .summary { grid-column: 1; }
  .wrj-connexion { grid-template-columns: minmax(0, 1fr); }
  .wrj-acces-pro { flex-direction: column; align-items: flex-start; }
  .wrj-acces-pro .wrj-btn { width: 100%; }
}
@media (max-width: 767px) {
  .woocommerce-cart-form table.shop_table,
  .woocommerce-cart-form table.shop_table tbody,
  .woocommerce-cart-form table.shop_table tr,
  .woocommerce-cart-form table.shop_table td { display: block; width: 100%; }
  .woocommerce-cart-form table.shop_table thead { display: none; }
  .woocommerce-cart-form table.shop_table tr.woocommerce-cart-form__cart-item { position: relative; padding: var(--wrj-e-5) 44px var(--wrj-e-5) 0; border-bottom: 1px solid var(--wrj-filet); }
  .woocommerce-cart-form table.shop_table td { display: flex; align-items: center; justify-content: space-between; gap: var(--wrj-e-4); padding: var(--wrj-e-2) 0; border: 0; text-align: right; }
  .woocommerce-cart-form table.shop_table td::before { content: attr(data-title); font-size: var(--wrj-t-label); font-weight: 700; color: var(--wrj-encre-3); text-align: left; }
  .woocommerce-cart-form table.shop_table td.product-thumbnail,
  .woocommerce-cart-form table.shop_table td.product-name { justify-content: flex-start; text-align: left; }
  .woocommerce-cart-form table.shop_table td.product-thumbnail::before,
  .woocommerce-cart-form table.shop_table td.product-name::before { display: none; }
  .woocommerce-cart-form table.shop_table td.product-remove { position: absolute; top: var(--wrj-e-5); right: 0; width: auto; padding: 0; }
  .woocommerce-cart-form table.shop_table td.actions::before { display: none; }
}
@media (max-width: 620px) {
  /* Le rembourrage des blocs de compte descend d'un cran.
     32px de chaque cote sur une colonne de 350px, c'est 64px pris sur
     286px utiles, soit pres d'un cinquieme de la largeur consacre a du
     vide. 20px laissent 310px au formulaire sans que le bloc cesse de
     se lire comme un bloc. Le rayon des angles suit : un grand rayon
     sur un petit rembourrage rogne visiblement le coin du contenu. */
  .wrj-connexion__bloc { padding: var(--wrj-e-5); border-radius: var(--wrj-r-12); }
  .wrj-acces-pro { padding: var(--wrj-e-5); }

  /* « minmax(0, 1fr) » et non « 1fr » : une piste « 1fr » a pour minimum
     automatique le min-content de son contenu, et la ligne de meta de la
     carte (« MARCHE ET TRAVAIL » plus le dossard, insecables l'un comme
     l'autre) en demandait 192px. Mesure a 320px : la grille sortait a
     385px pour 280px utiles, soit 105px hors de l'ecran, masques par
     l'« overflow-x: clip » de 02-base au lieu d'etre visibles. */
  .wrj-produits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* La famille et le dossard passent l'un sous l'autre plutot que
     d'imposer leur largeur a la colonne. */
  .wrj-produit__meta { flex-wrap: wrap; }
  /* Le prix public passe AU-DESSUS du prix pro au lieu d'a cote. Sur une
     grille tarifee, les deux montants partagent une ligne : mesure a
     360px, « 64,90 € 38,88 € » demande 153px pour 148px utiles, et le
     symbole euro du prix pro touchait le filet de la cellule. Empiles,
     chacun a sa ligne entiere a toutes les largeurs. */
  .wrj-produit__prix del { display: block; margin-right: 0; margin-bottom: 2px; }
  /* Et il redescend a la taille du texte courant. Mesure a 360px, la
     largeur la plus contrainte a deux colonnes : « 38,88 € » en Syne 800
     a 22px fait 137px pour 128px utiles, et mordait sur le padding de la
     cellule. A 17px il en fait 106. La hierarchie tient toujours : le
     titre est a 17px lui aussi, mais en graisse 700 contre 800 et sans
     l'echelle d'affiche. */
  .wrj-produit__prix { font-size: var(--wrj-t-corps); }
  .wrj-produit__corps { padding: var(--wrj-e-4); }
  .wrj-produit__titre { font-size: var(--wrj-t-corps); }
  /* A deux colonnes sur un telephone de 390px, la carte n'a plus que
     127px de ligne utile : la pastille descend a 42px de haut, ce qui
     reste au-dessus du seuil de cible tactile retenu dans le theme et
     rend deux crans sur la hauteur du bloc. */
  .wrj-produit__achat .wrj-pointure--carte { min-height: 42px; }
  .wrj-produit__achat { gap: var(--wrj-e-2); margin-top: var(--wrj-e-3); padding-top: var(--wrj-e-3); }
  /* Sept jetons de filtre a la suite ne tiennent pas sur une ligne : la
     cle passe au-dessus de sa rangee plutot que de la comprimer. */
  .wrj-filtre { align-items: flex-start; flex-direction: column; gap: var(--wrj-e-2); }
  .wrj-rayon-outils { align-items: stretch; }
  .woocommerce .woocommerce-ordering { justify-content: flex-start; }
  /* Pas de decalage d'impression sur telephone : il n'y a pas de survol,
     et le « :hover » d'un tap laisserait la carte decalee. L'anneau de
     filet, lui, reste : il tient la planche-contact. */
  .wrj-produit:hover { transform: none; box-shadow: 0 0 0 1px var(--wrj-filet); }
  .woocommerce div.product .flex-control-thumbs { grid-template-columns: repeat(4, 1fr); }
  .woocommerce form .form-row input.input-text, .woocommerce form .form-row select { font-size: 1rem; }
  .wrj-etape-suite { grid-template-columns: 36px 1fr; gap: var(--wrj-e-4); }
}

/* Sous 400px, la planche passe a une colonne.
   A deux colonnes sur un ecran de 320, la cellule ne fait que 139px, soit
   107px utiles une fois le padding retire. Mesure au Range : « 38,88 € »
   en Syne 800 a 22px demande 110px. Le montant, c'est-a-dire la seule
   chose qu'un revendeur vient chercher dans une grille tarifee, sortait
   donc de sa cellule, symbole euro coupe. Reduire le prix serait resoudre
   le symptome : c'est la cellule qui est trop etroite, pas le prix qui
   est trop gros. A une colonne elle fait 280px et tout y tient sans rien
   sacrifier.
   Le puits passe en 3/2 : un carre de 280px de cote pousserait la
   deuxieme reference sous le pli. */
@media (max-width: 359px) {
  .wrj-produits { grid-template-columns: minmax(0, 1fr); }
  .wrj-produit__media { aspect-ratio: 3 / 2; }
  .wrj-produit__meta { flex-wrap: nowrap; }
}