/* ============================================================
   03 — COMPOSANTS
   ============================================================ */

/* ------------------------------------------------------------
   LE DOSSARD · element signature
   Chaque reference porte un numero fixe de 001 a 048. Ce n'est
   pas une decoration : c'est la reference produit, celle du SAV,
   de l'etiquette de colis et de la confirmation de commande.
   Un client dit « j'ai la 031 », comme on dit un dossard.
   ------------------------------------------------------------ */
.wrj-dossard {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* 116px, et non 88. La taille par defaut n'avait jamais servi : seules
     les variantes --sm et --xl etaient posees quelque part. Mise en
     service sur la fiche produit, elle s'est revelee trop etroite pour
     ce qu'elle est censee contenir. Mesure au Range sur « 005 », Syne
     800 a 44px, interlettrage -0.04em compris : 133,98px de glyphes pour
     64px utiles, soit un numero coupe des deux cotes par l'« overflow:
     hidden ». Un dossard porte TOUJOURS trois chiffres.
     116px de large donnent 92px utiles ; le numero descend a 28px, qui
     en demande 85,3. */
  width: 116px;
  min-height: 128px;
  padding: var(--wrj-e-4) var(--wrj-e-3) var(--wrj-e-3);
  background: var(--wrj-papier);
  border: 1px solid var(--wrj-filet);
  border-radius: var(--wrj-r-22);
  overflow: hidden;
  flex-shrink: 0;
}
/* Le bandeau de famille, en haut, pleine largeur */
.wrj-dossard::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--wrj-u);
}
/* Les quatre perforations : c'est ce detail qui fait lire
   « dossard » plutot que « badge arrondi ». */
.wrj-dossard::after {
  content: "";
  position: absolute; top: 15px; left: 0; right: 0;
  height: 6px;
  background-image: radial-gradient(circle at center, var(--wrj-filet) 2.5px, transparent 2.6px);
  background-size: 22px 6px;
  background-position: 11px 0;
  background-repeat: repeat-x;
  opacity: .9;
  pointer-events: none;
}
.wrj-dossard__num {
  font-family: var(--wrj-display);
  font-weight: 800;
  font-size: 1.75rem;  /* 28px : trois chiffres tiennent dans 92px utiles */
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--wrj-u-encre);
  margin-top: var(--wrj-e-3);
}
.wrj-dossard__marque {
  font-family: var(--wrj-corps);
  font-weight: 700;
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wrj-encre-3);
}

/* Version compacte pour la grille et le panier */
.wrj-dossard--sm {
  width: 50px; min-height: 44px;
  padding: 10px 6px 5px;
  border-radius: var(--wrj-r-12);
  gap: 0;
  justify-content: flex-end;
}
.wrj-dossard--sm::before { height: 5px; }
/* Sous 60px de haut, les perforations mangent la hauteur utile et
   rognent le numero : elles disparaissent, le bandeau suffit a
   identifier la famille. */
.wrj-dossard--sm::after { display: none; }
.wrj-dossard--sm .wrj-dossard__num { font-size: 1.0625rem; line-height: 1; margin-top: 0; }
.wrj-dossard--sm .wrj-dossard__marque { display: none; }

/* Version geante, pour la confirmation de commande et la 404 */
.wrj-dossard--xl { width: 200px; min-height: 236px; border-radius: 34px; }
.wrj-dossard--xl::before { height: 12px; }
.wrj-dossard--xl::after { top: 30px; height: 10px; background-size: 46px 10px; background-position: 23px 0;
  background-image: radial-gradient(circle at center, var(--wrj-filet) 4px, transparent 4.1px); }
.wrj-dossard--xl .wrj-dossard__num { font-size: 6rem; margin-top: var(--wrj-e-5); }
.wrj-dossard--xl .wrj-dossard__marque { font-size: 0.75rem; }

/* ------------------------------------------------------------
   LE HORS-REPÉRAGE
   En serigraphie, quand les ecrans sont mal cales, l'encre de
   couleur deborde du noir d'un ou deux millimetres. C'est le
   defaut le plus reconnaissable de l'affiche imprimee.
   Au repos l'affiche est calee ; elle se decale seulement le
   temps d'entrer dans le champ, puis se cale sous les yeux.
   Garde-fous : jamais sous 48px, un seul sens de decalage,
   jamais sur un aplat colore, trois occurrences par page maximum.
   ------------------------------------------------------------ */
.wrj-calage { --wrj-reg: 0em; }
.wrj-js .wrj-calage[data-cale="non"] { --wrj-reg: 0.055em; }
/* L'ombre doit differer du texte, sinon le decalage epaissit la lettre
   au lieu de se voir. Le titre est en Lapis sur papier : l'ombre prend
   l'encre de la famille, et l'Ambre sur les aplats d'encre. */
.wrj-calage {
  text-shadow: var(--wrj-reg) var(--wrj-reg) 0 var(--wrj-calage-encre);
  transition: text-shadow var(--wrj-d-calage) var(--wrj-ease);
}
.wrj-drench .wrj-calage { text-shadow: var(--wrj-reg) var(--wrj-reg) 0 var(--wrj-ambre); }

/* ------------------------------------------------------------
   Boutons
   Une seule couleur d'action sur tout le site, toujours la meme
   forme. L'Ambre mesure 1.31:1 sur papier : il ne peut donc
   exister qu'en aplat, sous du Noir (15.20:1), et il est double
   d'un filet Lapis pour rester perceptible contre le papier.
   ------------------------------------------------------------ */
.wrj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 52px;
  padding: 0.95em 1.9em;
  border: 2px solid transparent;
  border-radius: var(--wrj-r-pill);
  font-family: var(--wrj-corps);
  font-size: var(--wrj-t-sm);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition: background-color var(--wrj-d-tap) var(--wrj-ease),
              color var(--wrj-d-tap) var(--wrj-ease),
              border-color var(--wrj-d-tap) var(--wrj-ease),
              transform var(--wrj-d-tap) var(--wrj-ease);
}
.wrj-btn:hover { text-decoration: none; }
.wrj-btn:active { transform: scale(0.985); }
/* Le focus global de 02-base pose « border-radius: 2px », qui n'habille pas
   l'outline : il ecrase le rayon de l'element. Un bouton pilule prenait donc
   des angles droits le temps de la tabulation. On reaffirme la pilule. */
.wrj-btn:focus-visible {
  outline: 2px solid var(--wrj-focus);
  outline-offset: 2px;
  border-radius: var(--wrj-r-pill);
}

/* Action principale : le seul Ambre du site.
   Provenance : --wrj-ambre = #FFDC66, charte page « Logo & couleur ».
   Texte en --wrj-noir #0A001E, 15.20:1 sur l'Ambre. Le filet Lapis
   #1E0080 double l'aplat, qui ne mesure que 1.31:1 contre le papier.

   L'ENCRE DE DISCIPLINE NE PREND JAMAIS CETTE PLACE. Deux regles
   posaient ici, et deux autres dans 05-boutique.css, un
   « body[class*=wrj-f--] .wrj-btn--action { background: var(--wrj-u) } » :
   sur une fiche de la famille Course, l'action passait au Verdancy
   #0C9976 et le bouton « Ajouter au panier » etait vert. Mesure faite sur
   /fr/produit/le-sport-au-feminin/ : fond releve rgb(12,153,118). Le
   symptome se voyait sur le bouton d'ajout, la cause frappait TOUTES les
   actions de la page, en-tete comprise. L'action principale est l'Ambre,
   sur tout le site, sans exception de page : c'est la seule facon pour un
   client de savoir ou cliquer sans relire la couleur de la rubrique. */
.wrj-btn--action {
  background: var(--wrj-ambre);
  color: var(--wrj-noir);
  border-color: var(--wrj-lapis);
}
.wrj-btn--action:hover { background: #FFE894; color: var(--wrj-noir); }

/* Sur un aplat d'encre, deux choses changent.
   1. Le filet Lapis disparaitrait dans le fond : on le retire.
   2. `.wrj-drench a` a une specificite (0,1,1) superieure a
      `.wrj-btn--action` (0,1,0) et lui volait sa couleur de texte :
      le bouton se retrouvait en blanc sur Ambre, soit 1.31:1.
      On reaffirme donc la couleur, explicitement. */
.wrj-drench .wrj-btn--action {
  border-color: transparent;
  background: var(--wrj-ambre);
  color: var(--wrj-noir);
}
.wrj-drench .wrj-btn--action:hover { background: #FFE894; color: var(--wrj-noir); }

.wrj-drench .wrj-btn--encre { background: var(--wrj-blanc); color: var(--wrj-lapis); }
.wrj-drench .wrj-btn--encre:hover { background: var(--wrj-ambre); color: var(--wrj-noir); }

.wrj-btn--encre { background: var(--wrj-u); color: var(--wrj-u-sur); }
.wrj-btn--encre:hover { background: #2B00A8; color: var(--wrj-blanc); }

.wrj-btn--filaire {
  background: transparent;
  color: var(--wrj-u-encre);
  border-color: var(--wrj-u-encre);
}
.wrj-btn--filaire:hover { background: var(--wrj-u); color: var(--wrj-u-sur); }
.wrj-drench .wrj-btn--filaire { color: var(--wrj-u-sur); border-color: var(--wrj-u-sur); }
.wrj-drench .wrj-btn--filaire:hover { background: var(--wrj-u-sur); color: var(--wrj-u); }

/* Le troisieme niveau d'action : sortir du tunnel, appliquer un code promo.
   La classe etait posee dans trois gabarits (pied du tiroir, coupon du
   panier, coupon de la commande) mais n'avait jamais ete definie : le bouton
   tombait sur « .wrj-btn » nu, fond transparent et filet transparent. Il
   gardait sa hauteur et son padding mais n'avait plus aucune paroi, d'ou la
   lecture « bouton sans padding » alors que la mesure disait 52px.

   Il ne doit ni voler l'Ambre a l'action, ni le Lapis a l'action secondaire :
   il prend un filet neutre. Mesures sur le pied du tiroir, en Papier 2
   #F0F1F9 : filet #5762A5 = 5.05:1 (seuil 3:1 pour une limite de
   controle), texte #33349E = 8.78:1. Au survol, le Lapis a 13.65:1. */
.wrj-btn--fantome {
  background: transparent;
  color: var(--wrj-encre-2);
  border-color: var(--wrj-encre-3);
}
.wrj-btn--fantome:hover {
  background: var(--wrj-papier);
  color: var(--wrj-lapis);
  border-color: var(--wrj-lapis);
}
/* Sur un aplat d'encre, le filet neutre disparait : il passe en encre posee. */
.wrj-drench .wrj-btn--fantome { color: var(--wrj-u-sur); border-color: var(--wrj-u-sur); }
.wrj-drench .wrj-btn--fantome:hover { background: var(--wrj-u-sur); color: var(--wrj-u); }

.wrj-btn--bloc { display: flex; width: 100%; }
.wrj-btn--sm { min-height: 42px; padding: 0.7em 1.3em; font-size: var(--wrj-t-label); }
.wrj-btn--lg { min-height: 60px; padding: 1.15em 2.4em; font-size: var(--wrj-t-corps); }


/* ------------------------------------------------------------
   Labels et etiquettes
   Un label n'existe jamais seul au-dessus d'un titre : il est
   toujours accroche a un numero de pan. Cela evite le tic du
   petit label capitale repete comme grammaire de section.
   ------------------------------------------------------------ */
.wrj-label {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  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);
}
.wrj-drench .wrj-label { color: var(--wrj-u-sur); }
.wrj-label__num {
  font-family: var(--wrj-display);
  font-weight: 800;
  color: var(--wrj-u-encre);
  letter-spacing: 0;
}
.wrj-drench .wrj-label__num { color: var(--wrj-u-sur); }

.wrj-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.4em 0.9em;
  border-radius: var(--wrj-r-pill);
  border: 1px solid var(--wrj-u-encre);
  color: var(--wrj-u-encre);
  font-size: var(--wrj-t-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   En-tete
   Elle defile avec la page et ne colle pas : une affiche punaisee
   n'a pas de bandeau flottant. Elle revient au defilement inverse.
   ------------------------------------------------------------ */
.wrj-entete {
  position: sticky; top: 0;
  z-index: var(--wrj-z-nav);
  background: var(--wrj-papier);
  /* --wrj-u vaut le Lapis par defaut et bascule sur l'encre de la
     famille des que le body porte une classe .wrj-f--*, c'est-a-dire
     sur les pages de rayon et de produit. */
  border-bottom: 2px solid var(--wrj-u-encre);
  transition: transform var(--wrj-d-etat) var(--wrj-ease);
}
.wrj-entete[data-cache="true"] { transform: translateY(-100%); }
.wrj-entete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wrj-e-5);
  min-height: var(--wrj-hauteur-nav);
}
.wrj-entete__logo { display: inline-flex; align-items: center; flex-shrink: 0; }

.wrj-nav__liste {
  display: flex;
  align-items: center;
  gap: var(--wrj-e-5);
  list-style: none;
  margin: 0; padding: 0;
}
.wrj-nav__liste li { margin: 0; }
.wrj-nav__lien {
  display: inline-block;
  padding: var(--wrj-e-2) 0;
  font-size: var(--wrj-t-sm);
  font-weight: 600;
  color: var(--wrj-encre);
  border-bottom: 2px solid transparent;
}
.wrj-nav__lien:hover,
.wrj-nav__lien[aria-current] { color: var(--wrj-u-encre); border-bottom-color: var(--wrj-u); text-decoration: none; }

.wrj-outils { display: flex; align-items: center; gap: var(--wrj-e-3); }
/* La cible tactile de reference du site : 44x44 (WCAG 2.5.8). Le padding est
   nul par construction, la surface vient de width/height et l'icone est
   centree par le flex ; c'est voulu, un carre de 44 avec une icone de 22
   laisse 11px de garde de chaque cote.

   Ce qui ne l'etait pas : « .wrj-outil » est toujours pose en element flex
   (barre d'outils, entete du tiroir, entete du panneau mobile) et gardait le
   flex-shrink par defaut. Des que le voisin devenait long, le carre se faisait
   ecraser. Mesure dans le tiroir apres un ajout au panier, quand le titre
   passe de « Votre panier » au libelle de confirmation : 25,9x44 a 320px,
   31,3x44 a 1440px. L'icone touchait alors ses bords a 2px pres, et la cible
   tombait sous le seuil. Une cible tactile ne se negocie pas : elle ne
   retrecit pas. */
.wrj-outil {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: var(--wrj-r-12);
  color: var(--wrj-encre);
  transition: background-color var(--wrj-d-tap) var(--wrj-ease),
              color var(--wrj-d-tap) var(--wrj-ease);
}
/* Meme encre de survol que les liens de navigation : sur une page de famille
   c'est l'encre de la discipline, dans le tiroir c'est le Lapis, puisque le
   tiroir remet les variables de famille a plat. */
.wrj-outil:hover { background: var(--wrj-papier-2); color: var(--wrj-u-encre); }
/* Meme correctif de rayon que sur les boutons : le focus global aplatissait
   les angles du carre arrondi. */
.wrj-outil:focus-visible {
  outline: 2px solid var(--wrj-focus);
  outline-offset: 2px;
  border-radius: var(--wrj-r-12);
}
.wrj-outil__compteur {
  position: absolute; top: 4px; right: 2px;
  min-width: 19px; height: 19px;
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: 4px;
  border-radius: var(--wrj-r-pill);
  background: var(--wrj-u); color: var(--wrj-u-sur);
  font-size: 0.625rem; font-weight: 700;
}
.wrj-outil__compteur[hidden] { display: none; }

.wrj-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.wrj-burger__barres, .wrj-burger__barres::before, .wrj-burger__barres::after {
  display: block; width: 22px; height: 2px; background: var(--wrj-encre);
  transition: transform var(--wrj-d-tap) var(--wrj-ease);
}
.wrj-burger__barres { position: relative; }
.wrj-burger__barres::before { content: ""; position: absolute; top: -7px; }
.wrj-burger__barres::after  { content: ""; position: absolute; top: 7px; }

/* ------------------------------------------------------------
   Panneau mobile et recherche plein ecran
   ------------------------------------------------------------ */
.wrj-panneau, .wrj-recherche {
  position: fixed; inset: 0;
  z-index: var(--wrj-z-panneau);
  background: var(--wrj-papier);
  padding: var(--wrj-e-5) var(--wrj-gouttiere);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--wrj-d-etat) var(--wrj-ease), visibility var(--wrj-d-etat);
}
.wrj-panneau[data-ouvert="true"], .wrj-recherche[data-ouvert="true"] { visibility: visible; opacity: 1; }

.wrj-panneau__entete, .wrj-recherche__entete {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--wrj-hauteur-nav);
  margin-bottom: var(--wrj-bloc-s);
}
.wrj-panneau__liste { list-style: none; margin: 0; padding: 0; }
.wrj-panneau__liste li { margin: 0; border-bottom: 1px solid var(--wrj-filet); }
.wrj-panneau__lien {
  display: flex; align-items: center; justify-content: space-between; gap: var(--wrj-e-4);
  padding: var(--wrj-e-5) 0;
  font-family: var(--wrj-display); font-weight: 800;
  font-size: 1.75rem; letter-spacing: -0.02em;
  color: var(--wrj-encre);
}
.wrj-panneau__lien:hover { color: var(--wrj-u-encre); text-decoration: none; }
.wrj-panneau__compte { font-family: var(--wrj-corps); font-size: var(--wrj-t-label); font-weight: 700; color: var(--wrj-encre-3); }
.wrj-panneau__barre { display: block; width: 100%; height: 4px; background: var(--wrj-u-encre); }

.wrj-recherche__form { display: flex; gap: var(--wrj-e-3); flex-wrap: wrap; }
.wrj-recherche__champ { flex: 1; min-width: 240px; }
.wrj-recherche__suggestions { display: flex; flex-wrap: wrap; gap: var(--wrj-e-2); margin-top: var(--wrj-bloc-s); }

/* ------------------------------------------------------------
   Champs
   Etiquette toujours visible au-dessus, jamais de placeholder
   tenant lieu d'etiquette.
   ------------------------------------------------------------ */
.wrj-champ {
  width: 100%;
  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-size: var(--wrj-t-corps);
}
.wrj-champ::placeholder { color: var(--wrj-encre-3); }
.wrj-champ:focus { outline: 2px solid var(--wrj-lapis); outline-offset: 1px; border-color: var(--wrj-lapis); }

/* ------------------------------------------------------------
   Fil d'ariane
   ------------------------------------------------------------ */
.wrj-ariane { font-size: var(--wrj-t-label); color: var(--wrj-encre-3); margin-bottom: var(--wrj-e-5); }
/* Le fil d'Ariane ne porte pas son rythme haut lui-meme : il le tient de
   son conteneur. Les pages de contenu l'enveloppent dans
   « .wrj-entete-page », qui donne --wrj-bloc-m ; les pages boutique ne
   passent pas par la. Meme valeur ici, pour que le fil parte de la meme
   hauteur d'un bout a l'autre du site. */
.wrj-ariane-seule { padding-top: var(--wrj-bloc-m); }
.wrj-ariane a { color: var(--wrj-encre-3); }
.wrj-ariane a:hover { color: var(--wrj-lapis); }
.wrj-ariane__separateur { margin-inline: 0.5em; }

/* ------------------------------------------------------------
   Pied de page
   ------------------------------------------------------------ */
.wrj-pied { background: var(--wrj-u); color: var(--wrj-u-sur); padding-block: var(--wrj-bloc-l) var(--wrj-bloc-m); }
.wrj-pied a { color: var(--wrj-u-sur); }
.wrj-pied__haut {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--wrj-bloc-s) var(--wrj-e-6);
  padding-bottom: var(--wrj-bloc-m);
}
.wrj-pied__titre {
  font-family: var(--wrj-corps); font-size: var(--wrj-t-label); font-weight: 700;
  letter-spacing: var(--wrj-ls-label); text-transform: uppercase;
  /* Pas d'opacite : sur un pied Atlas ou Hestia elle fait tomber le
     texte sous 4.5:1, et ces deux encres n'ont aucune marge. Les
     capitales et l'interlettrage suffisent a distinguer le titre. */
  margin-bottom: var(--wrj-e-4);
}
.wrj-pied__liste { list-style: none; margin: 0; padding: 0; }
.wrj-pied__liste li { margin-bottom: var(--wrj-e-3); }
.wrj-pied__liste a { font-size: var(--wrj-t-sm); }
.wrj-pied__signature { margin-top: var(--wrj-e-5); font-size: var(--wrj-t-sm); max-width: 32ch; }
/* Les six encres, en pied : le rappel du systeme */
/* Les six encres, en pied. Sur une page de famille, le pied porte
   justement cette encre : sans anneau, la barre correspondante
   disparaitrait dans le fond. */
/* Les six encres du pied.
   Trois defauts corriges le 2026-08-14, tous sur le meme composant.

   1. CIBLE. Le lien mesurait 10px de haut, contre les 24px exiges par
      WCAG 2.5.8. La barre reste a 10px, c'est elle qui fait la marque ;
      c'est le LIEN qui grandit, par un rembourrage transparent de 7px de
      part et d'autre. Personne ne voit la difference, un pouce si.

   2. MOUVEMENT. Le survol animait `height`, une propriete de mise en
      page, contre la premiere des quatre regles dures de 07-mouvement.
      Six barres qui grandissent en meme temps forcaient six recalculs de
      pied de page. La barre est desormais un pseudo-element mis a
      l'echelle : le compositeur s'en charge seul.

   3. AFFORDANCE. Rien ne disait que ces barres menaient quelque part.
      Le nom de la famille, jusqu'ici reserve aux lecteurs d'ecran,
      apparait au survol et au clavier. */
.wrj-pied__encres { display: flex; gap: 3px; margin-top: var(--wrj-e-6); }
.wrj-pied__encre {
  position: relative;
  display: block; flex: 1;
  /* 7 + 10 + 7 = 24px de cible pour 10px de barre. */
  padding-block: 7px;
}
.wrj-pied__encre::before {
  content: "";
  display: block; height: 10px;
  background: var(--wrj-u);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wrj-u-sur) 45%, transparent);
  transform-origin: 50% 100%;
  transition: transform var(--wrj-d-tap) var(--wrj-ease);
}
/* 1.6 : la barre passe de 10 a 16px, la valeur d'origine du survol. */
.wrj-pied__encre:hover::before,
.wrj-pied__encre:focus-visible::before { transform: scaleY(1.6); }

/* Le nom de la famille, en clair, au survol et au clavier. Il se pose
   au-dessus de la barre plutot qu'a cote : six libelles cote a cote ne
   tiendraient pas dans la colonne du pied. Le blanc mesure 15.04:1 sur
   le Lapis du pied, et le pied prend l'encre de la discipline sur une
   fiche produit, ou le « dessus » mesure de l'univers prend le relais. */
.wrj-pied__encre::after {
  content: attr(data-nom);
  position: absolute;
  bottom: calc(100% - 2px);
  left: 0;
  white-space: nowrap;
  font-size: var(--wrj-t-label);
  font-weight: 700;
  letter-spacing: var(--wrj-ls-label);
  text-transform: uppercase;
  color: currentColor;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--wrj-d-tap) var(--wrj-ease),
              transform var(--wrj-d-tap) var(--wrj-ease);
  pointer-events: none;
}
.wrj-pied__encre:hover::after,
.wrj-pied__encre:focus-visible::after { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .wrj-pied__encre::before,
  .wrj-pied__encre::after { transition: none; }
  .wrj-pied__encre:hover::before,
  .wrj-pied__encre:focus-visible::before { transform: none; }
}
.wrj-pied__bas {
  display: flex; justify-content: space-between; gap: var(--wrj-e-5); flex-wrap: wrap;
  padding-top: var(--wrj-e-6);
  border-top: 1px solid currentColor;
  border-top-color: color-mix(in srgb, currentColor 24%, transparent);
  font-size: var(--wrj-t-sm);
}

/* La signature de l'agence.
   Elle ferme la ligne du bas, apres l'engagement d'expedition. Elle
   n'est pas une information de marque : elle prend donc l'encre du pied
   a 70 %, assez pour se lire, pas assez pour rivaliser avec ce qui est
   a cote. Sur le Lapis du pied, le blanc mesure 15.04:1 et tient donc
   tres largement le seuil meme attenue.
   Sur mobile la ligne du bas s'empile : la signature passe en dernier,
   ce qui est sa place. */
.wrj-pied__signature-agence { color: color-mix(in srgb, currentColor 70%, transparent); }
.wrj-pied__signature-agence a { color: currentColor; text-underline-offset: 3px; }
.wrj-pied__signature-agence a:hover { color: inherit; text-decoration-thickness: 2px; }

/* ------------------------------------------------------------
   Barre d'onglets mobile
   ------------------------------------------------------------ */
.wrj-onglets {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--wrj-z-nav);
  display: none;
  background: var(--wrj-papier);
  border-top: 2px solid var(--wrj-u-encre);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.wrj-onglets__liste { display: flex; list-style: none; margin: 0; padding: 0; }
.wrj-onglets__liste li { flex: 1; margin: 0; }
.wrj-onglet {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 100%; min-height: 58px;
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--wrj-encre-3);
}
.wrj-onglet[aria-current] { color: var(--wrj-u-encre); }
.wrj-onglet:hover { text-decoration: none; color: var(--wrj-u-encre); }
.wrj-onglet__pastille {
  position: absolute; top: 6px; right: 50%; margin-right: -20px;
  min-width: 17px; height: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--wrj-r-pill);
  background: var(--wrj-u); color: var(--wrj-u-sur);
  font-size: 0.5625rem;
}

@media (max-width: 980px) {
  .wrj-nav { display: none; }
  .wrj-burger { display: inline-flex; }
  .wrj-onglets { display: block; }
  /* La barre d'onglets mesure 58px PLUS l'encoche : sans elle, les
     derniers pixels de contenu passaient dessous. */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .wrj-pied__haut { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .wrj-pied__haut { grid-template-columns: 1fr; }
}