/* ============================================================
   LIGNE MARCHANDE

   Une seule carte pour le panier, le recapitulatif de commande et le
   tiroir. Elle remplace les trois tableaux differents de WooCommerce.

   Le liseré de gauche porte l'encre de la discipline : c'est la seule
   couleur de la ligne, et elle dit tout de suite de quelle famille vient
   la semelle qu'on a choisie.
   ============================================================ */

.wrj-lignes {
  display: grid;
  gap: var(--wrj-e-4);
  margin-bottom: var(--wrj-bloc-s);
}

.wrj-ligne {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto auto 44px;
  align-items: center;
  gap: var(--wrj-e-5);
  padding: var(--wrj-e-4);
  padding-left: calc(var(--wrj-e-4) + 4px);
  position: relative;
  background: var(--wrj-papier-2);
  border: 1px solid var(--wrj-filet);
  border-radius: var(--wrj-r-18);
}

/* Le liseré est un pseudo-element : sur une bordure gauche, le rayon de
   l'angle le coupait en biseau. */
.wrj-ligne::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: var(--wrj-r-18) 0 0 var(--wrj-r-18);
  background: var(--wrj-u-encre);
}

.wrj-ligne__media {
  width: 96px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--wrj-r-12);
  background: var(--wrj-papier);
}
.wrj-ligne__media img,
.wrj-ligne__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.wrj-ligne__corps { min-width: 0; }

.wrj-ligne__famille {
  display: flex;
  align-items: center;
  /* La discipline et le dossard se suivent tant qu'ils tiennent, et
     passent l'un sous l'autre sinon. Sans ce repli, la ligne imposait la
     somme de leurs largeurs minimales, soit 139 px, et debordait de la
     colonne du panier des 360 px de large. */
  flex-wrap: wrap;
  gap: var(--wrj-e-3);
  margin: 0 0 var(--wrj-e-2);
  font-size: var(--wrj-t-label);
  font-weight: 700;
  letter-spacing: var(--wrj-ls-label);
  text-transform: uppercase;
  color: var(--wrj-u-encre);
}

/* La reference, lue comme un numero de dossard sans en reprendre la
   forme : dans une ligne de panier, l'objet graphique complet ecrase la
   mise en page. */
.wrj-ligne__ref {
  font-family: var(--wrj-display);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--wrj-encre-3);
}
/* Pas de point separateur : la discipline et le dossard peuvent se
   retrouver sur deux lignes quand la carte est etroite, et le point se
   serait alors retrouve seul en tete de la seconde. L'ecart de la grille
   les separe deja. */

.wrj-ligne__nom {
  margin: 0;
  font-family: var(--wrj-display);
  font-weight: 700;
  font-size: var(--wrj-t-chapo);
  line-height: 1.1;
  color: var(--wrj-titre);
}
.wrj-ligne__nom a { color: inherit; text-decoration: none; }
.wrj-ligne__nom a:hover { text-decoration: underline; text-underline-offset: 3px; }

.wrj-ligne__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wrj-e-2);
  margin-top: var(--wrj-e-3);
}

/* ------------------------------------------------------------
   Pastilles d'attribut
   ------------------------------------------------------------ */
.wrj-pastille {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  padding: 4px 10px;
  font-size: var(--wrj-t-sm);
  background: var(--wrj-papier);
  border: 1px solid var(--wrj-filet);
  border-radius: 999px;
}
.wrj-pastille__cle {
  font-size: var(--wrj-t-label);
  font-weight: 700;
  letter-spacing: var(--wrj-ls-label);
  text-transform: uppercase;
  color: var(--wrj-encre-3);
}
.wrj-pastille__val { font-weight: 600; color: var(--wrj-titre); }

.wrj-ligne__prix {
  font-family: var(--wrj-display);
  font-weight: 800;
  font-size: var(--wrj-t-chapo);
  color: var(--wrj-titre);
  white-space: nowrap;
}
.wrj-ligne__prix .amount { font: inherit; color: inherit; }

/* La ligne porte son propre champ de quantite. Celui de la fiche produit
   fait 78 x 56 px a cote du bouton d'ajout : il n'a rien a faire ici, ou la
   colonne est plus etroite. L'habillage est donc repris en entier. */
.wrj-ligne__quantite .qty {
  width: 68px;
  min-height: 44px;
  padding: 0 var(--wrj-e-2);
  text-align: center;
  font-weight: 700;
  background: var(--wrj-papier);
  border: 1px solid var(--wrj-filet-fort);
  border-radius: var(--wrj-r-12);
  color: var(--wrj-encre);
}

.wrj-ligne__retirer a,
.wrj-ligne__retirer .remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--wrj-encre-3);
  text-decoration: none;
  transition: background var(--wrj-d-tap) var(--wrj-ease), color var(--wrj-d-tap) var(--wrj-ease);
}
.wrj-ligne__retirer a:hover,
.wrj-ligne__retirer .remove:hover {
  background: var(--wrj-atlas);
  color: var(--wrj-blanc);
}

/* Version compacte : le recapitulatif de commande n'a pas de champ de
   quantite, elle passe en pastille avec les attributs. */
/* La carte du recapitulatif fait environ 350px : le prix en typographie
   d'affiche y prenait un tiers de la largeur et renvoyait le nom du
   modele sur quatre lignes. Il repasse a la taille du texte courant, et
   la ligne tient sur deux lignes de nom au pire. */
/* Le prix passe sous le nom plutot qu'a cote : partages sur une seule
   ligne, ils se disputaient deux cents pixels et le nom du modele partait
   sur quatre lignes. */
.wrj-ligne--compacte {
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-areas:
    "media corps"
    "prix  prix";
  gap: 6px 10px;
  padding: 10px;
  padding-left: 14px;
  align-items: start;
}
.wrj-ligne--compacte .wrj-ligne__media { grid-area: media; width: 48px; }
.wrj-ligne--compacte .wrj-ligne__corps { grid-area: corps; }
.wrj-ligne--compacte .wrj-ligne__nom { font-size: 0.875rem; line-height: 1.25; }
.wrj-ligne--compacte .wrj-ligne__prix {
  grid-area: prix;
  font-size: 1rem;
  letter-spacing: 0;
  text-align: right;
  padding-top: 6px;
  border-top: 1px dashed var(--wrj-filet);
}

/* La colonne du recapitulatif fait un peu plus de deux cents pixels : le
   nom complet de la discipline y tenait sur trois lignes. Seule la
   reference reste, elle suffit a identifier le modele. */
.wrj-ligne--compacte .wrj-ligne__famille {
  margin-bottom: 2px;
  font-size: 0.625rem;
}
.wrj-ligne--compacte .wrj-ligne__famille > span:first-child { display: none; }
.wrj-ligne--compacte .wrj-ligne__ref::before { content: none; margin: 0; }

.wrj-ligne--compacte .wrj-ligne__meta { margin-top: var(--wrj-e-2); gap: 6px; }
.wrj-ligne--compacte .wrj-pastille { padding: 2px 8px; font-size: 0.75rem; }
/* Le libelle de l'attribut est deja porte par le contexte : dans une
   ligne de deux cents pixels, « POINTURE » vole la place a la valeur. */
.wrj-ligne--compacte .wrj-pastille__cle { display: none; }

/* ------------------------------------------------------------
   Totaux
   ------------------------------------------------------------ */
.wrj-totaux {
  display: grid;
  gap: var(--wrj-e-3);
  padding: var(--wrj-e-5);
  background: var(--wrj-papier-2);
  border: 1px solid var(--wrj-filet);
  border-radius: var(--wrj-r-18);
}
.wrj-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wrj-e-4);
  font-size: var(--wrj-t-sm);
}
.wrj-total__cle { color: var(--wrj-encre-2); }
.wrj-total__val { font-weight: 600; color: var(--wrj-titre); text-align: right; }
.wrj-total--fort {
  padding-top: var(--wrj-e-4);
  border-top: 1px solid var(--wrj-filet);
  font-size: var(--wrj-t-chapo);
}
.wrj-total--fort .wrj-total__cle,
.wrj-total--fort .wrj-total__val {
  font-family: var(--wrj-display);
  font-weight: 800;
  color: var(--wrj-titre);
}
.wrj-total--note { font-size: var(--wrj-t-label); color: var(--wrj-encre-3); }

/* ------------------------------------------------------------
   Page panier
   ------------------------------------------------------------ */
.wrj-panier { margin-bottom: var(--wrj-bloc-s); }

.wrj-panier__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wrj-e-4);
  padding-top: var(--wrj-e-5);
  border-top: 1px solid var(--wrj-filet);
}
.wrj-coupon { display: flex; gap: var(--wrj-e-3); flex: 1 1 280px; }
.wrj-coupon .wrj-champ { flex: 1 1 auto; min-width: 0; min-height: 44px; }

.wrj-panier__collaterals {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 480px;
  margin-left: auto;
}

/* Le recapitulatif garde un <table> pour ne pas laisser orphelines les
   lignes de livraison, que WooCommerce et ses extensions emettent en
   <tr>. On le met en page en liste. */
.wrj-recap {
  padding: var(--wrj-e-6);
  background: var(--wrj-papier-2);
  border: 1px solid var(--wrj-filet);
  border-radius: var(--wrj-r-18);
}
.wrj-recap__titre {
  font-size: var(--wrj-t-chapo);
  text-transform: uppercase;
  margin-bottom: var(--wrj-e-5);
}
.wrj-recap__table,
.wrj-recap__table tbody,
.wrj-recap__table tr,
.wrj-recap__table th,
.wrj-recap__table td {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  text-align: left;
}
.wrj-recap__table tr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  /* Le libelle et le montant se replient quand ils ne tiennent plus cote a
     cote. « Total 462,48 € », en gros caracteres de titrage et avec un
     montant insecable, demande 267 px : sur un ecran de 360 px il sortait
     du recapitulatif. Replie, le montant passe dessous, et « margin-left »
     le maintient a droite dans les deux cas. */
  flex-wrap: wrap;
  gap: var(--wrj-e-4);
  padding-block: var(--wrj-e-3);
  border-bottom: 1px solid var(--wrj-filet);
}
.wrj-recap__table tr:last-child { border-bottom: 0; }
.wrj-recap__table th {
  width: auto;
  font-weight: 400;
  font-size: var(--wrj-t-sm);
  color: var(--wrj-encre-2);
}
.wrj-recap__table td {
  width: auto;
  margin-left: auto;
  text-align: right;
  font-weight: 600;
  color: var(--wrj-titre);
}
/* La livraison propose des modes : elle prend toute la largeur. */
.wrj-recap__table tr.woocommerce-shipping-totals,
.wrj-recap__table tr.shipping {
  display: block;
}
.wrj-recap__table tr.shipping td,
.wrj-recap__table tr.woocommerce-shipping-totals td { text-align: left; margin-top: var(--wrj-e-3); }

.wrj-recap__table tr.order-total {
  margin-top: var(--wrj-e-3);
  padding-top: var(--wrj-e-4);
  border-top: 2px solid var(--wrj-u-encre);
  border-bottom: 0;
}
.wrj-recap__table tr.order-total th,
.wrj-recap__table tr.order-total td {
  font-family: var(--wrj-display);
  font-weight: 800;
  font-size: var(--wrj-t-chapo);
  color: var(--wrj-titre);
}

.wrj-recap__suite { margin-top: var(--wrj-e-5); }
.wrj-recap__suite .checkout-button,
.wrj-recap__suite .button {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 52px;
}
.wrj-recap__note {
  display: flex; align-items: center; gap: var(--wrj-e-3);
  margin: var(--wrj-e-4) 0 0;
  font-size: var(--wrj-t-sm);
  color: var(--wrj-encre-2);
}
.wrj-recap__note svg { flex: none; color: var(--wrj-u-encre); }

/* ------------------------------------------------------------
   Page commande
   ------------------------------------------------------------ */
.wrj-commande__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: var(--wrj-bloc-s);
  align-items: start;
}
.wrj-commande__client { min-width: 0; }

.wrj-commande__recap {
  position: sticky;
  top: var(--wrj-e-5);
  padding: var(--wrj-e-6);
  background: var(--wrj-papier-2);
  border: 1px solid var(--wrj-filet);
  border-radius: var(--wrj-r-18);
}
.wrj-commande__titre {
  font-size: var(--wrj-t-chapo);
  text-transform: uppercase;
  margin-bottom: var(--wrj-e-5);
}

.wrj-lignes--compactes { gap: var(--wrj-e-3); margin-bottom: var(--wrj-e-5); }
.wrj-ligne__qte { font-weight: 700; color: var(--wrj-encre-2); white-space: nowrap; }

.wrj-recap-commande .wrj-recap__table,
.wrj-recap-commande .wrj-recap__table tfoot,
.wrj-recap-commande .wrj-recap__table tr {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  text-align: left;
}
/* Les cellules se dimensionnent sur leur contenu : dans une ligne en
   « space-between », une largeur de 100 % pousse le libelle et le montant
   l'un sur l'autre et etire le filet sous le seul montant. */
.wrj-recap-commande .wrj-recap__table th,
.wrj-recap-commande .wrj-recap__table td {
  display: block;
  width: auto;
  border: 0;
  padding: 0;
  background: none;
  text-align: left;
}
.wrj-recap-commande .wrj-recap__table tr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  /* Le libelle et le montant se replient quand ils ne tiennent plus cote a
     cote. « Total 462,48 € », en gros caracteres de titrage et avec un
     montant insecable, demande 267 px : sur un ecran de 360 px il sortait
     du recapitulatif. Replie, le montant passe dessous, et « margin-left »
     le maintient a droite dans les deux cas. */
  flex-wrap: wrap;
  gap: var(--wrj-e-4);
  padding-block: var(--wrj-e-3);
  border-bottom: 1px solid var(--wrj-filet);
}
.wrj-recap-commande .wrj-recap__table tr:last-child { border-bottom: 0; }
.wrj-recap-commande .wrj-recap__table th { font-weight: 400; font-size: var(--wrj-t-sm); color: var(--wrj-encre-2); }
.wrj-recap-commande .wrj-recap__table td { margin-left: auto; text-align: right; font-weight: 600; color: var(--wrj-titre); }
/* L'expedition ne tient pas sur une ligne : son libelle annonce un choix,
   les modes de livraison se posent dessous. */
.wrj-recap-commande .wrj-recap__table tr.woocommerce-shipping-totals,
.wrj-recap-commande .wrj-recap__table tr.shipping { display: block; }
.wrj-recap-commande .wrj-recap__table tr.woocommerce-shipping-totals th,
.wrj-recap-commande .wrj-recap__table tr.shipping th {
  width: 100%;
  margin-bottom: var(--wrj-e-3);
  font-size: var(--wrj-t-label);
  letter-spacing: var(--wrj-ls-label);
  text-transform: uppercase;
  color: var(--wrj-encre-3);
}
.wrj-recap-commande .wrj-recap__table tr.woocommerce-shipping-totals td,
.wrj-recap-commande .wrj-recap__table tr.shipping td { width: 100%; text-align: left; }
.wrj-recap-commande .wrj-recap__table tr.order-total {
  margin-top: var(--wrj-e-3);
  padding-top: var(--wrj-e-4);
  border-top: 2px solid var(--wrj-u-encre);
  border-bottom: 0;
}
.wrj-recap-commande .wrj-recap__table tr.order-total th,
.wrj-recap-commande .wrj-recap__table tr.order-total td {
  font-family: var(--wrj-display);
  font-weight: 800;
  font-size: var(--wrj-t-chapo);
  color: var(--wrj-titre);
}

/* Le code promo, replie, a cote du total qu'il fait bouger.
   Le « tr » est indispensable dans le selecteur : sans lui la regle perdait
   contre « .wrj-recap-commande .wrj-recap__table tr » juste au-dessus, et la
   ligne gardait son filet, qui doublait celui du total. */
.wrj-recap-commande .wrj-recap__table tr.wrj-coupon-ligne { display: block; border-bottom: 0; }
/* Le repli s'ouvre vers la droite : son chevron doit partir de la marge. */
.wrj-recap-commande .wrj-recap__table tr.wrj-coupon-ligne td { text-align: left; }
.wrj-coupon-repli summary {
  cursor: pointer;
  font-size: var(--wrj-t-sm);
  color: var(--wrj-encre-2);
  padding-block: var(--wrj-e-2);
}
.wrj-coupon-repli summary:hover { color: var(--wrj-u-encre); }
.wrj-coupon-repli .wrj-coupon { margin-top: var(--wrj-e-3); }

.wrj-commande__connexion {
  margin-top: var(--wrj-e-5);
  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-commande__connexion a { font-weight: 600; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .wrj-commande__grille { grid-template-columns: minmax(0, 1fr); }
  .wrj-commande__recap { position: static; }
}

/* ------------------------------------------------------------
   Connexion professionnelle

   C'est la premiere page d'un revendeur : le catalogue ferme renvoie ici
   tout visiteur non connecte. Elle doit convaincre, pas seulement
   authentifier.

   Trois defauts mesures sur la preprod, a 1440px :

   1. La page tenait dans 731px de large sur 1440. Le formulaire est rendu
      par un shortcode, donc dans « .wrj-prose », dont la largeur est
      bornee a la mesure de LECTURE (--wrj-mesure, 58ch, 730,6px releves).
      Cette borne est juste pour un paragraphe et fausse pour une
      interface : elle laissait 517px de papier vide a droite du panneau
      Lapis, sur toute la hauteur.
   2. 148px de vide entre le titre de page et le premier champ. Trois
      couches : le rythme haut de la section (52px, legitime), un
      paragraphe vide qui n'enveloppe qu'un commentaire de bloc laisse par
      l'editeur, et un « Connexion » en h2 qui repete mot pour mot le h1
      juste au-dessus.
   3. Les intitules du panneau heritaient de l'interlignage de lecture,
      1,7. En Syne 800 a 22px cela fait 37,4px de ligne : « Le catalogue
      complet » et « Vos commandes suivies » cassaient en deux lignes tres
      ecartees dans une colonne de 248px.
   ------------------------------------------------------------ */

/* 1. Le formulaire sort de la mesure de lecture. Le selecteur ne vise que
      la prose qui contient CETTE grille : les pages de contenu gardent
      leur colonne de 58ch. */
.wrj-prose:has(.wrj-connexion-pro) { max-width: none; }

/* 2. Le paragraphe vide de l'editeur et le titre en double.
      Le h1 de la page dit deja « Connexion a l'espace pro » : le h2
      « Connexion » de WooCommerce n'ajoute rien et coute 61px de hauteur.
      Il sort de la page, arbre d'accessibilite compris, parce qu'il
      dupliquerait le h1 pour un lecteur d'ecran comme pour un oeil. */
.wrj-prose:has(.wrj-connexion-pro) > p:first-child,
.woocommerce:has(.wrj-connexion-pro) > h2 { display: none; }

.wrj-connexion-pro {
  display: grid;
  /* Le panneau prend la plus grande part. Ce qui doit convaincre, c'est
     lui : deux champs et un bouton n'ont pas besoin de 628px, et un
     champ d'adresse e-mail de cette largeur signale surtout qu'on n'a
     rien mis a cote. */
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: var(--wrj-bloc-s);
  /* Le panneau prend toute la hauteur du formulaire au lieu de s'arreter
     sous son dernier argument : un aplat qui s'interrompt en cours de
     colonne se lit comme une carte posee, et c'est exactement ce que la
     page n'a pas les moyens de se permettre. */
  align-items: stretch;
  max-width: none;
}
/* 460px : la largeur au-dela de laquelle un champ d'identifiant ne gagne
   plus rien. La colonne, elle, garde sa part de grille. */
.wrj-connexion-pro__form { min-width: 0; max-width: 460px; }

/* Le mot de passe oublie est une sortie de secours, pas un titre. Il
   heritait de la taille de lecture, 19px souligne, et pesait autant que
   le bouton juste au-dessus. Encre-2 #33349E, 9.67:1 sur papier. */
.wrj-connexion-pro__form .lost_password { margin: var(--wrj-e-3) 0 0; }
.wrj-connexion-pro__form .lost_password a {
  font-size: var(--wrj-t-sm);
  color: var(--wrj-encre-2);
  text-underline-offset: 3px;
}

.wrj-acces-pro__args {
  display: flex;
  flex-direction: column;
  padding: var(--wrj-e-6);
  background: var(--wrj-lapis);
  color: var(--wrj-blanc);
  border-radius: var(--wrj-r-18);
}
/* Le label etait en Ambre. L'Ambre ne sert qu'a valider, jamais a
   ecrire : c'est une regle du systeme, elle ne souffre pas d'exception
   parce que le fond est sombre. Blanc #FAFDFF sur Lapis #1E0080,
   15.04:1. */
.wrj-acces-pro__args .wrj-label { color: var(--wrj-blanc); margin-bottom: var(--wrj-e-5); }
.wrj-acces-pro__args ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wrj-e-5); }
.wrj-acces-pro__args li { margin: 0; }
/* 3. L'interlignage d'un titre, pas celui d'un paragraphe. */
.wrj-acces-pro__cle {
  display: block;
  font-family: var(--wrj-display);
  font-weight: 700;
  font-size: var(--wrj-t-chapo);
  line-height: 1.1;
  text-wrap: balance;
  color: var(--wrj-blanc);
  margin-bottom: var(--wrj-e-2);
}
/* Pas d'opacite sur le texte : la hierarchie vient de la taille et de la
   graisse. Blanc #FAFDFF sur Lapis #1E0080, 15.04:1, comme l'intitule. */
.wrj-acces-pro__val {
  display: block;
  font-size: var(--wrj-t-sm);
  line-height: 1.45;
  color: var(--wrj-blanc);
}

/* Le pied du panneau : les trois chiffres du catalogue, cales en bas.
   « margin-top: auto » est ce qui occupe la hauteur gagnee par le
   « stretch » sans etirer les arguments. */
.wrj-acces-pro__chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wrj-e-5) var(--wrj-e-6);
  margin: var(--wrj-bloc-s) 0 0;
  padding-top: var(--wrj-e-5);
  margin-top: auto;
  /* Filet de 1px en blanc a 30% : un aplat Lapis n'accepte pas un filet
     plein sans decouper le panneau en deux. Meme recette que le pied de
     page. */
  border-top: 1px solid color-mix(in srgb, var(--wrj-blanc) 30%, transparent);
}
.wrj-acces-pro__chiffres > div { min-width: 0; }
.wrj-acces-pro__chiffres dt {
  font-family: var(--wrj-display);
  font-weight: 800;
  font-size: 2rem;          /* 32px : le plancher de l'echelle d'affiche */
  line-height: 1;
  letter-spacing: var(--wrj-ls-affiche);
  color: var(--wrj-blanc);
}
.wrj-acces-pro__chiffres dd {
  margin: var(--wrj-e-2) 0 0;
  font-size: var(--wrj-t-label);
  font-weight: 700;
  letter-spacing: var(--wrj-ls-label);
  text-transform: uppercase;
  color: var(--wrj-blanc);
}

@media (max-width: 860px) {
  .wrj-connexion-pro { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------
   Fiche produit : le fil

   La barre d'onglets de WooCommerce disparait. Les sections se
   deroulent a la suite, une sous-navigation collante dit ou l'on en
   est. Rien n'est masque : sur une semelle technique, le drop et
   l'epaisseur sont exactement ce qu'on vient chercher.
   ------------------------------------------------------------ */
.wrj-fil { margin-top: var(--wrj-bloc-m); }

.wrj-fil__nav {
  position: sticky;
  /* L'en-tete du site est lui aussi collant : sans ce decalage, la
     sous-navigation se glissait dessous et devenait illisible. La
     hauteur reelle est mesuree par assets/js/fiche.js, la valeur ici
     n'est qu'un repli avant l'execution du script. */
  top: var(--wrj-h-entete, 68px);
  /* Sous l'en-tete, jamais devant. */
  z-index: calc(var(--wrj-z-nav) - 1);
  margin-bottom: var(--wrj-bloc-s);
  padding-block: var(--wrj-e-3);
  background: var(--wrj-papier);
  border-bottom: 1px solid var(--wrj-filet);
}
.wrj-fil__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wrj-e-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.wrj-fil__liste li { margin: 0; }
.wrj-fil__liste a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--wrj-t-label);
  font-weight: 700;
  letter-spacing: var(--wrj-ls-label);
  text-transform: uppercase;
  color: var(--wrj-encre-3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--wrj-d-tap) var(--wrj-ease), border-color var(--wrj-d-tap) var(--wrj-ease);
}
.wrj-fil__liste a:hover { color: var(--wrj-u-encre); }
.wrj-fil__liste a[aria-current="true"] {
  color: var(--wrj-u-encre);
  border-bottom-color: var(--wrj-u-encre);
}

.wrj-fil__section {
  padding-bottom: var(--wrj-bloc-s);
  /* Deux barres collantes se superposent en haut de fenetre : sans cette
     marge d'ancre, un clic dans la sous-navigation amenait le titre de
     section juste dessous, donc invisible. */
  scroll-margin-top: calc(var(--wrj-h-entete, 68px) + 72px);
}
.wrj-fil__section + .wrj-fil__section {
  padding-top: var(--wrj-bloc-s);
  border-top: 1px solid var(--wrj-filet);
}
.wrj-fil__titre {
  /* Jeton --wrj-t-h3 absent de 01-tokens.css : valeur explicite, calee
     sur --wrj-t-chapo x1.3, comme les autres titres de section boutique. */
  font-size: 1.75rem;
  text-transform: uppercase;
  margin-bottom: var(--wrj-e-5);
}
/* La colonne de lecture etait bornee par « .panel », classe retiree avec
   les onglets. Sans borne, la prose courait sur toute la largeur de la
   page et devenait illisible. */
.wrj-fil__section > *:not(.wrj-fil__titre):not(table) { max-width: 72ch; }
.wrj-fil__titre:focus-visible { outline: 2px solid var(--wrj-u-encre); outline-offset: 4px; }

/* Le tableau d'attributs devient un bloc de specifications : deux
   colonnes, l'intitule en petite capitale, la valeur en typographie de
   marque. Un tableau a bordures pour dire « Drop : 0mm » etait le dernier
   endroit de la fiche ou WooCommerce se voyait encore. */
.woocommerce div.product .wrj-fil table.woocommerce-product-attributes,
.woocommerce div.product .wrj-fil table.woocommerce-product-attributes tbody {
  display: grid;
  gap: 0;
  width: 100%;
  border: 0;
}
.woocommerce div.product .wrj-fil table.woocommerce-product-attributes tbody {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--wrj-e-4);
}
.woocommerce div.product .wrj-fil table.woocommerce-product-attributes tr {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--wrj-e-4);
  background: var(--wrj-papier-2);
  border: 1px solid var(--wrj-filet);
  border-radius: var(--wrj-r-12);
}
.woocommerce div.product .wrj-fil table.woocommerce-product-attributes th,
.woocommerce div.product .wrj-fil table.woocommerce-product-attributes td {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font-style: normal;
}
.woocommerce div.product .wrj-fil table.woocommerce-product-attributes th {
  font-size: var(--wrj-t-label);
  font-weight: 700;
  letter-spacing: var(--wrj-ls-label);
  text-transform: uppercase;
  color: var(--wrj-encre-3);
}
.woocommerce div.product .wrj-fil table.woocommerce-product-attributes td {
  font-family: var(--wrj-display);
  font-weight: 700;
  font-size: var(--wrj-t-chapo);
  color: var(--wrj-titre);
}
.woocommerce div.product .wrj-fil table.woocommerce-product-attributes td p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .wrj-fil__liste a { transition: none; }
}

/* ------------------------------------------------------------
   Repli
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  /* « POINTURE » est deja dit par le contexte : on est dans un panier de
     semelles, et la valeur suffit. Dans une carte de telephone, le libelle
     poussait la pastille sur deux lignes. */
  .wrj-ligne .wrj-pastille__cle { display: none; }

  .wrj-ligne,
  .wrj-ligne--compacte {
    grid-template-columns: 72px minmax(0, 1fr) 44px;
    grid-template-areas:
      "media corps retirer"
      "media meta  meta"
      "quantite prix prix";
    gap: var(--wrj-e-3) var(--wrj-e-4);
    align-items: start;
  }
  .wrj-ligne__media { grid-area: media; width: 72px; }
  .wrj-ligne__corps { grid-area: corps; }
  .wrj-ligne__retirer { grid-area: retirer; }
  .wrj-ligne__quantite { grid-area: quantite; }
  .wrj-ligne__prix { grid-area: prix; text-align: right; align-self: center; }
}

/* ------------------------------------------------------------
   Tres petits ecrans (iPhone SE et assimiles)

   A 320 px de large, la ligne marchande n'a plus que 94 px de colonne
   centrale. Trois elements y imposaient encore leur largeur minimale et
   sortaient de leur carte : la pastille de pointure (« 35 | 36 | 37 »
   tenue sur une ligne), le prix en typographie d'affiche, et la vignette
   de 72 px. Ils ne changent qu'ici : au-dessus de 380 px, la ligne tient
   sans rien sacrifier.
   ------------------------------------------------------------ */
@media (max-width: 380px) {
  .wrj-ligne,
  .wrj-ligne--compacte {
    grid-template-columns: 56px minmax(0, 1fr) 44px;
    gap: var(--wrj-e-2) var(--wrj-e-3);
    padding: var(--wrj-e-3);
    padding-left: calc(var(--wrj-e-3) + 4px);
  }
  .wrj-ligne__media,
  .wrj-ligne--compacte .wrj-ligne__media { width: 56px; }

  /* La pastille se replie plutot que de pousser la carte. */
  .wrj-pastille { max-width: 100%; flex-wrap: wrap; }

  .wrj-ligne__prix { font-size: 1rem; letter-spacing: 0; }

  /* Le champ de quantite occupe sa colonne au lieu de lui imposer sa
     largeur : sous 380 px la colonne descend a 56 px, et un champ fixe de
     68 px en sortait. La hauteur de touche reste a 44 px. */
  .wrj-ligne__quantite .qty { width: 100%; max-width: 68px; }
}

/* ============================================================
   LE PAIEMENT, DANS LA COLONNE PRINCIPALE

   Il vivait dans le rail de droite, 354px de large. Le formulaire
   de carte de Stripe y empilait ses trois champs sur trois lignes
   de 180px, la mention Klarna debordait de son cadre et la case
   des conditions generales finissait dans un coin. `inc/marchand`
   le deplace desormais sous l'adresse ; ce bloc l'habille pour la
   largeur qu'il vient de gagner.
   ============================================================ */
/* L'espacement et le filet portent sur le TITRE, pas sur `#payment`.
   Poses sur le bloc, ils s'ajoutaient a la marge du titre et laissaient
   156px de vide entre « COMMENT VOUS PAYEZ » et le premier moyen de
   paiement, mesure en production le 2026-08-15. Le titre ouvre l'etape,
   c'est donc lui qui porte la coupure. */
.woocommerce-checkout .wrj-commande__client #payment {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  background: transparent;
}

/* Le titre du bloc, pose par le gabarit du theme. Meme forme que
   « OU ON VOUS LIVRE » juste au-dessus : le tunnel se lit alors
   comme deux etapes de meme rang, et non comme un formulaire suivi
   d'un appendice. */
.wrj-commande__paiement-titre {
  font-size: var(--wrj-t-chapo);
  text-transform: uppercase;
  margin: var(--wrj-bloc-s) 0 var(--wrj-e-5);
  padding-top: var(--wrj-bloc-s);
  border-top: 1px solid var(--wrj-filet);
}

/* La liste des moyens de paiement occupe toute la colonne. */
.woocommerce-checkout .wrj-commande__client #payment ul.payment_methods {
  display: grid;
  gap: var(--wrj-e-3);
  margin: 0 0 var(--wrj-e-5);
  padding: 0;
  border: 0;
  list-style: none;
}

/* Le cadre du moyen retenu contient desormais son formulaire :
   il prend le rembourrage d'un panneau, pas d'une ligne de liste. */
.woocommerce-checkout .wrj-commande__client #payment ul.payment_methods li {
  margin: 0;
  padding: var(--wrj-e-4) var(--wrj-e-5);
  background: var(--wrj-papier);
  border: 1px solid var(--wrj-filet-fort);
  border-radius: var(--wrj-r-12);
}

/* La boite de detail n'a plus a se recaler sur la marge de la liste :
   elle est dans le meme cadre que son moyen de paiement. Le
   « margin: 0 e-5 e-4 » d'origine la decalait de 24px vers la droite,
   ce qui se voyait des que le cadre etait large. */
.woocommerce-checkout .wrj-commande__client #payment div.payment_box {
  margin: var(--wrj-e-4) 0 0;
  padding: var(--wrj-e-5);
  background: var(--wrj-papier-2);
}

/* Les champs de Stripe se remettent cote a cote des qu'ils ont la
   place. Le plugin les pose dans sa propre grille ; on lui rend la
   largeur, il fait le reste. */
.woocommerce-checkout .wrj-commande__client #payment div.payment_box .wc-stripe-upe-element,
.woocommerce-checkout .wrj-commande__client #payment div.payment_box iframe { width: 100%; max-width: 100%; }

/* ------------------------------------------------------------
   LES CASES A COCHER DU TUNNEL

   Trois cases, trois rendus differents : « Me creer un compte »
   sortait en petit et pale, « Expedier a une adresse differente »
   en gras parce que WooCommerce l'enveloppe dans un `h3`, et les
   conditions generales en minuscule dans le rail. Elles disent
   pourtant toutes la meme chose : cochez si cela vous concerne.
   Une seule forme, donc, pour les trois.

   `align-items: flex-start` et non `center` : sur deux lignes de
   texte, une case centree verticalement flotte au milieu du
   paragraphe au lieu de marquer son debut.
   ------------------------------------------------------------ */
.woocommerce-checkout .wrj-commande__client label.checkbox,
.woocommerce-checkout .wrj-commande__client .woocommerce-form__label-for-checkbox,
.woocommerce-checkout #ship-to-different-address label {
  display: flex;
  align-items: flex-start;
  gap: var(--wrj-e-3);
  margin: 0;
  padding: 0;
  font-family: var(--wrj-corps);
  font-size: var(--wrj-t-corps);
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  color: var(--wrj-encre);
  cursor: pointer;
}

/* Le `h3` que WooCommerce pose autour de « Expedier a une adresse
   differente » ne doit plus peser comme un titre de section : il
   n'annonce rien, il pose une question. */
.woocommerce-checkout #ship-to-different-address {
  margin: var(--wrj-e-5) 0;
  font-size: var(--wrj-t-corps);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* La case elle-meme. 20px et une cible de 44px par le rembourrage du
   libelle : c'est la ligne entiere qui est cliquable, pas le carre. */
.woocommerce-checkout .wrj-commande__client input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--wrj-lapis);
}

.woocommerce-checkout .wrj-commande__client .woocommerce-form__label-for-checkbox span,
.woocommerce-checkout .wrj-commande__client label.checkbox span { flex: 1; min-width: 0; }

/* Les trois rangees respirent de la meme facon. */
.woocommerce-checkout .wrj-commande__client .woocommerce-account-fields,
.woocommerce-checkout .wrj-commande__client .woocommerce-terms-and-conditions-wrapper { margin-top: var(--wrj-e-5); }

/* ------------------------------------------------------------
   LE BOUTON DE COMMANDE

   Dans le rail il faisait 300px ; dans la colonne il ne doit pas
   pour autant filer sur 620px. Il garde la largeur d'une decision,
   et il est cale a gauche, sous ce qu'il valide.
   ------------------------------------------------------------ */
.woocommerce-checkout .wrj-commande__client #place_order {
  width: auto;
  min-width: 280px;
  margin-top: var(--wrj-e-5);
}

@media (max-width: 620px) {
  .woocommerce-checkout .wrj-commande__client #place_order { width: 100%; min-width: 0; }
  .woocommerce-checkout .wrj-commande__client #payment ul.payment_methods li { padding: var(--wrj-e-4); }
  .woocommerce-checkout .wrj-commande__client #payment div.payment_box { padding: var(--wrj-e-4); }
}

/* ------------------------------------------------------------
   LE PAIEMENT EXPRESS

   Apple Pay et Google Pay arrivent tout en haut du tunnel, avant
   l'adresse : c'est leur place, ils existent pour eviter de la
   saisir. Mais Stripe les pose nus, sans cadre et sans titre, et
   son separateur « OU » sortait a 632px de large sur une colonne
   de 776, donc visiblement decale.

   On leur donne un cadre et un intitule. Le bouton garde sa
   largeur de decision, pas celle de la colonne : un bouton noir
   de 776px de large en tete de tunnel prend le pas sur tout ce
   qui suit, y compris sur le formulaire qu'il est cense eviter.
   ------------------------------------------------------------ */
.woocommerce-checkout .wrj-commande__client #wc-stripe-express-checkout-element,
.woocommerce-checkout .wrj-commande__client .wc-stripe-express-checkout-element {
  max-width: 420px;
  margin: 0 0 var(--wrj-e-4);
}

/* Le separateur de Stripe. Il devient un vrai filet coupe par son
   mot, cale sur la meme largeur que le bouton qu'il separe. */
.woocommerce-checkout .wrj-commande__client #wc-stripe-express-checkout-button-separator,
.woocommerce-checkout .wrj-commande__client .wc-stripe-express-checkout-button-separator {
  display: flex;
  align-items: center;
  gap: var(--wrj-e-4);
  max-width: 420px;
  margin: 0 0 var(--wrj-bloc-s);
  font-size: var(--wrj-t-label);
  font-weight: 700;
  letter-spacing: var(--wrj-ls-label);
  text-transform: uppercase;
  color: var(--wrj-encre-3);
}
.woocommerce-checkout .wrj-commande__client #wc-stripe-express-checkout-button-separator::before,
.woocommerce-checkout .wrj-commande__client #wc-stripe-express-checkout-button-separator::after,
.woocommerce-checkout .wrj-commande__client .wc-stripe-express-checkout-button-separator::before,
.woocommerce-checkout .wrj-commande__client .wc-stripe-express-checkout-button-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--wrj-filet);
}

@media (max-width: 620px) {
  .woocommerce-checkout .wrj-commande__client #wc-stripe-express-checkout-element,
  .woocommerce-checkout .wrj-commande__client .wc-stripe-express-checkout-element,
  .woocommerce-checkout .wrj-commande__client #wc-stripe-express-checkout-button-separator,
  .woocommerce-checkout .wrj-commande__client .wc-stripe-express-checkout-button-separator { max-width: none; }
}