/* ============================================================
   04 — SECTIONS
   Chaque page est une pile de pans pleine largeur, un pan par
   idee, numerotes en dossard, alternant encre pleine et papier.
   Aucune carte flottante, aucune ombre portee floue.
   ============================================================ */

/* En-tete de pan : le numero et le titre sont solidaires.
   Pas de max-width sur le conteneur : `ch` s'y calcule sur la taille du
   corps (17px), ce qui bornait le bloc a 370px alors que le titre qu'il
   contient fait 72px. « communaute » y mesurait 753px et debordait.
   La mesure est donc portee par chaque element, dans sa propre taille. */
.wrj-pan__entete { margin-bottom: var(--wrj-bloc-m); }
.wrj-pan__titre { margin-top: var(--wrj-e-5); max-width: 15ch; }
.wrj-pan__entete--large .wrj-pan__titre { max-width: 20ch; }
.wrj-pan__chapo {
  margin-top: var(--wrj-e-5);
  max-width: 52ch;
  font-size: var(--wrj-t-chapo);
  line-height: 1.45;
  color: var(--wrj-encre-2);
}
.wrj-drench .wrj-pan__chapo { color: var(--wrj-u-sur); opacity: .9; }

/* ============================================================
   LA PLAQUE · l'ouverture d'une page de contenu

   Aplat pleine largeur d'une couleur d'univers, titre en Syne
   noir cale en haut a gauche, nom du chapitre cale en bas a
   droite. C'est l'intercalaire de section de la charte, applique
   tel quel : elle ouvre la typographie sur un Hestia plein, les
   univers sur un Verdancy, le packaging sur un Adonis.

   Ce qu'elle repare, mesure sur la preprod avant intervention :
   sur une page de contenu en 1440px, la boite du titre faisait
   895px, la colonne de lecture 731px, et les 605px restants a
   droite etaient du papier blanc sur toute la hauteur du
   document, soit 42% de la largeur de l'ecran. Sur les
   « Mentions legales » ce vide courait sur 1500px de haut, sur
   les « Conditions generales de vente » sur 13009px.

   La colonne de lecture ne bouge pas d'un pixel : 58ch est une
   mesure, pas un reglage. C'est le FOND qui va au bord.
   ============================================================ */

/* Les six univers de la charte, valeurs dans 01-tokens.css. Rien
   n'est redefini ici : la classe designe seulement laquelle des
   six l'aplat consomme, avec l'encre texte et le « dessus » qui
   vont avec, tous deux mesures.

   `--wrj-u-sur` n'est pas un parti pris, c'est le plus contraste
   des deux sur l'aplat : noir sur les trois chauds, blanc sur les
   trois froids. Les ratios sont dans le fichier de tokens et dans
   DESIGN.md. */
.wrj-plaque--atlas    { --wrj-u: var(--wrj-u-atlas);    --wrj-u-encre: var(--wrj-u-atlas-encre);    --wrj-u-sur: var(--wrj-u-atlas-sur); }
.wrj-plaque--verdancy { --wrj-u: var(--wrj-u-verdancy); --wrj-u-encre: var(--wrj-u-verdancy-encre); --wrj-u-sur: var(--wrj-u-verdancy-sur); }
.wrj-plaque--adonis   { --wrj-u: var(--wrj-u-adonis);   --wrj-u-encre: var(--wrj-u-adonis-encre);   --wrj-u-sur: var(--wrj-u-adonis-sur); }
.wrj-plaque--zephyr   { --wrj-u: var(--wrj-u-zephyr);   --wrj-u-encre: var(--wrj-u-zephyr-encre);   --wrj-u-sur: var(--wrj-u-zephyr-sur); }
.wrj-plaque--hestia   { --wrj-u: var(--wrj-u-hestia);   --wrj-u-encre: var(--wrj-u-hestia-encre);   --wrj-u-sur: var(--wrj-u-hestia-sur); }
.wrj-plaque--lapis    { --wrj-u: var(--wrj-u-lapis);    --wrj-u-encre: var(--wrj-u-lapis-encre);    --wrj-u-sur: var(--wrj-u-lapis-sur); }

/* Hauteur : `min(46vh, 420px)`, les deux bornes sont mesurees.

   420px vient du plus grand titre du site. « CONDITIONS
   GENERALES DE VENTE » occupe 158px de haut a 56px, releve sur
   la page ; avec le fil d'Ariane (20px de texte plus 24px de
   marge) et les deux fois 78px de padding, le contenu de la
   plaque atteint 358px. Une plaque doit toujours etre plus haute
   que ce qu'elle contient, sinon c'est le padding seul qui decide
   de sa hauteur et le titre le plus court, « FAQ » a 53px, la
   ramene a 253px : elle se lit alors comme un bandeau et plus
   comme une plaque. 420px est la premiere valeur ronde au-dessus
   de 358.

   46vh est le plafond en fenetre basse. A 900px de haut, la plus
   petite fenetre de bureau de la recette, la plaque et l'en-tete
   occupent 488px et laissent 412px : le premier paragraphe de la
   page reste visible sans defiler. */
.wrj-plaque {
  padding-block: var(--wrj-bloc-m);
  min-height: min(46vh, 420px);
  display: flex;
  align-items: stretch;
}
.wrj-plaque > .wrj-conteneur { width: 100%; }

/* Deux rangees, la premiere elastique : le bloc de titre reste en
   haut a gauche, le nom du chapitre tombe en bas a droite. C'est
   ce qui donne un pied a la plaque et l'empeche de se lire comme
   un texte pose sur un aplat trop grand. */
.wrj-plaque__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  column-gap: var(--wrj-e-6);
}
.wrj-plaque__texte { grid-column: 1; grid-row: 1 / -1; align-self: start; }
.wrj-plaque__chapitre {
  grid-column: 2; grid-row: 2;
  align-self: end; justify-self: end;
  margin: 0; max-width: none;
  font-size: var(--wrj-t-label);
  font-weight: 700;
  letter-spacing: var(--wrj-ls-label);
  text-transform: uppercase;
  color: var(--wrj-u-sur);
  text-align: right;
}
/* Le chapo de la plaque reprend le « dessus » plein, sans le voile
   de 10% que porte le chapo des pans d'encre.
   Mesure : sur l'Atlas #CC4141 de la 404, ce blanc a 90% tombe a
   4.07:1, sous le seuil de 4.5:1 exige d'un texte de 22px. A
   pleine valeur il tient 4.67:1. Les trois autres plaques
   passaient (5.25 sur Verdancy, 6.53 sur Adonis, 12.18 sur
   Lapis) : c'est le cas le plus dur qui fixe la regle, pas la
   moyenne. */
.wrj-plaque .wrj-pan__chapo { opacity: 1; }
/* Le fil d'Ariane est cale sur l'encre-3, une valeur de papier :
   sur un aplat Lapis il tombe a 1.05:1. Il repasse sur le
   « dessus » mesure de l'univers, comme tout le reste de la
   plaque. */
.wrj-plaque .wrj-ariane,
.wrj-plaque .wrj-ariane a { color: var(--wrj-u-sur); }
.wrj-plaque .wrj-ariane a:hover { color: var(--wrj-u-sur); }

/* Le pan qui suit la plaque repart sur le papier. C'est une
   coupure d'encre : elle garde sa respiration pleine, la ou deux
   pans de papier consecutifs se resserrent. 52px suffisaient
   quand l'en-tete etait blanc et se confondait avec la suite ;
   contre un aplat, le premier paragraphe collait au bord de
   l'encre. */
.wrj-entete-page + .wrj-pan,
.wrj-entete-page + .woocommerce,
.wrj-entete-page + section,
.wrj-article__media { padding-top: var(--wrj-bloc-m); }

/* La borne en `ch` est ce qui adapte le titre a sa propre longueur sans
   exception par page : elle se calcule sur la taille du titre, donc la
   boite tient toujours le meme nombre de caracteres par ligne, quelle
   que soit la largeur de fenetre. « FAQ » occupe une ligne courte,
   « CONDITIONS GENERALES DE VENTE » deux lignes pleines, et le
   text-wrap: balance herite du h1 repartit les mots entre elles.
   Cette borne etait inerte jusqu'ici : a 102.88px elle valait 1974px,
   soit bien plus que les 1248px du conteneur, et le titre prenait donc
   toujours toute la largeur, boite de 1248px pour une colonne de texte
   de 676px.
   Piege mesure ici : le `ch` se calcule sur la police de l'element, pas
   sur celle du corps. Le titre est en Syne 800, dont le « 0 » fait
   1.066em, contre 0.64em pour le Space Grotesk du texte. Un meme
   nombre de `ch` y vaut donc 1.66 fois plus large. 18ch faisait encore
   1075px a 56px.

   La borne est calee sur le MOT LE PLUS LONG du site, pas sur une
   proportion choisie. Releve sur les dix-neuf pages de contenu :
   « CONFIDENTIALITE » mesure 844px a 56px, « CONTACTEZ-NOUS » 889px
   (celui-la peut couper sur son trait d'union). Une boite de 11ch, soit
   657px, etait donc plus etroite que plusieurs titres du site, et
   « ENGAGEMENTS » se coupait en « ENGAGEMEN / TS ».

   15ch vaut 896px : aucun titre ne casse, et la boite reste tres en
   dessous des 1248px du conteneur, ce qui etait le probleme de depart. */
.wrj-entete-page .wrj-pan__titre {
  margin-top: var(--wrj-e-5);
  max-width: min(15ch, 100%);
  /* Un titre ne se coupe jamais N'IMPORTE OU. La regle de repli heritee
     (`overflow-wrap: break-word`) sert le texte courant, ou une URL trop
     longue vaut mieux coupee que debordante ; sur un titre en capitales,
     elle donne « ENGAGEMEN / TS », une faute de composition visible a dix
     metres.

     Mais l'interdire seule ne suffit pas : a 390px, « CONFIDENTIALITE »
     demande 482px pour 350 disponibles, aucun reglage de boite n'y peut
     rien. La cesure est la seule sortie correcte, et c'est une vraie
     cesure, au trait d'union, aux points ou la langue l'autorise. Le
     document est en `lang="fr"` : le navigateur applique le dictionnaire
     francais. */
  overflow-wrap: normal;
  word-break: normal;
}

/* La cesure ne sert que la ou elle est NECESSAIRE.

   Laissee active en grand, elle se declenche pour remplir la ligne meme
   quand le mot tient : « NOS ENGA- / GEMENTS » a 1440px, alors que
   « ENGAGEMENTS » (740px) entre sans peine dans la boite (896px). Deux
   lignes propres valent mieux qu'une cesure gratuite.

   Sous 900px, en revanche, elle n'est plus optionnelle : a 390px
   « CONFIDENTIALITE » demande 482px pour 350 disponibles. Aucun reglage
   de boite ne rattrape ca, et le seul autre choix serait la coupure
   arbitraire qu'on vient d'interdire. */
@media (max-width: 900px) {
  .wrj-entete-page .wrj-pan__titre {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}
/* ------------------------------------------------------------
   Rythme vertical des pages de contenu
   Toutes les pages internes empilaient des pans a 144/144 : 288px de
   vide entre chaque, partout, quel que soit le lien entre les deux
   idees. Un espacement unique n'est pas un rythme.
   La regle se deduit du voisinage et non d'une classe posee page par
   page : deux pans de papier qui se suivent appartiennent au meme
   souffle et se resserrent, une coupure d'encre garde sa respiration
   pleine parce que c'est elle qui marque le changement de sujet.
   Restreint aux pages qui ont un en-tete interne : l'accueil a deja
   son propre rythme, alterne a la main, et n'est pas concerne.
   ------------------------------------------------------------ */
.wrj-entete-page ~ .wrj-pan:not(.wrj-drench) + .wrj-pan:not(.wrj-drench) {
  padding-block-start: var(--wrj-bloc-m);
}
.wrj-entete-page ~ .wrj-pan:not(.wrj-drench):has(+ .wrj-pan:not(.wrj-drench)) {
  padding-block-end: var(--wrj-bloc-m);
}

/* Le numero de pan, ancre en haut a droite : c'est l'asymetrie
   qui empeche le rendu « pile centree » generique. */
.wrj-pan__num {
  position: absolute; top: var(--wrj-section); right: var(--wrj-gouttiere);
  pointer-events: none;
}

/* ============================================================
   HERO · un seul pan de drench, plafonne
   Une affiche qui ne vend pas avant deux ecrans est une affiche
   ratee : le hero est borne pour que le catalogue arrive vite.
   ============================================================ */
.wrj-hero {
  position: relative;
  min-height: min(88vh, 860px);
  display: flex;
  align-items: center;
  padding-block: var(--wrj-bloc-m);
  overflow: hidden;
}
/* Le titre occupe toute la largeur du conteneur : en taille affiche il
   ne tient dans aucune colonne de grille. Le reste s'organise dessous. */
/* Seul endroit du site qui porte l'echelle d'affiche. Elle n'est pas
   partagee avec les pages de contenu : un hero se lit d'un coup d'oeil
   a deux metres, une page de contenu se lit assis. Valeurs inchangees,
   l'accueil rend exactement comme avant. */
.wrj-hero__titre {
  font-size: var(--wrj-t-affiche);
  line-height: 0.86;
  margin-block: var(--wrj-e-5) var(--wrj-bloc-s);
  /* Un mot long comme « DISCIPLINE » ne doit jamais deborder */
  overflow-wrap: break-word;
  hyphens: manual;
}
/* Une seule colonne depuis le 2026-08-15.
   La colonne droite portait le nuancier du catalogue, retire ce jour-la :
   il redisait en petit et en noir et blanc ce que le pan 02 montre juste
   dessous en pleine hauteur et en couleur. La grille en `1fr 0.8fr`
   aurait laisse 45 % du hero vides, ce qui se lit comme un bloc qui n'a
   pas charge, pas comme une respiration. */
.wrj-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wrj-bloc-m);
  align-items: end;
  width: 100%;
}
.wrj-hero__chapo {
  font-size: var(--wrj-t-chapo);
  line-height: 1.45;
  max-width: 40ch;
  margin-bottom: var(--wrj-bloc-s);
}
.wrj-hero__actions { display: flex; gap: var(--wrj-e-3); flex-wrap: wrap; }
/* Le produit est pose en bas a droite, cale sur la ligne de base,
   sans ombre. Le puits reste clair : la bibliotheque melange des
   packshots detoures et des packshots a fond blanc opaque, un
   fond colore ferait apparaitre un rectangle sur les seconds. */
.wrj-hero__media {
  position: relative;
  border-radius: var(--wrj-r-22);
  background: var(--wrj-papier);
  padding: var(--wrj-e-6);
  display: grid;
  place-items: center;
}
.wrj-hero__media img { width: 100%; max-width: 460px; }

/* ============================================================
   LES SIX FAMILLES · le seul ecran ou les six encres coexistent
   Six pans pleins cote a cote, sans gouttiere. Ce n'est pas une
   juxtaposition subie, c'est un nuancier.
   ============================================================ */
.wrj-familles {
  /* Flex et non grid : c'est ce qui permet au pan survole de prendre de
     la largeur en etriquant ses voisins, a section constante. */
  display: flex;
  width: 100%;
}
.wrj-famille {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 440px;
  padding: var(--wrj-e-6) var(--wrj-e-5);
  background: var(--wrj-u);
  color: var(--wrj-u-sur);
  overflow: hidden;
  /* La base est a 0 : c'est flex-grow seul qui repartit la largeur, donc
     la somme reste constante et la section ne bouge jamais. */
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow var(--wrj-d-panneau) var(--wrj-ease);
}
/* Des qu'un pan est survole, les autres se retractent... */
.wrj-familles:hover .wrj-famille,
.wrj-familles:focus-within .wrj-famille { flex-grow: 0.62; }
/* ...et celui-la s'ouvre. */
.wrj-familles .wrj-famille:hover,
.wrj-familles .wrj-famille:focus-visible { flex-grow: 2.9; }

/* Dans un pan retracte, le nom se replie sur plusieurs lignes plutot que
   de deborder : « Marche et Travail » fait 291px pour 119px utiles, il
   serait tranche en plein mot. */
.wrj-famille__nom { max-width: 100%; overflow-wrap: break-word; hyphens: manual; }
/* Surtout pas nowrap : pendant le survol d'un pan voisin, le pan
   retracte ne fait plus que 92px utiles et « 14 modeles » y serait
   tranche en plein mot. */
.wrj-famille__compte { overflow-wrap: break-word; }
.wrj-famille:hover { text-decoration: none; }
.wrj-famille__num {
  font-family: var(--wrj-display); font-weight: 800;
  font-size: var(--wrj-t-label); letter-spacing: 0.1em;
  margin-bottom: auto;
}
.wrj-famille__nom {
  font-family: var(--wrj-display);
  font-weight: 800;
  font-size: clamp(1.125rem, 1.5vw, 1.625rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--wrj-u-sur);
  margin-bottom: var(--wrj-e-3);
}
.wrj-famille__compte {
  font-size: var(--wrj-t-label); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.wrj-famille__fleche {
  margin-top: var(--wrj-e-4);
  transform: translateX(0);
  transition: transform var(--wrj-d-etat) var(--wrj-ease);
}
.wrj-famille:hover .wrj-famille__fleche { transform: translateX(6px); }

/* ============================================================
   LES ÉTAPES · filaires, aucune icone ronde
   ============================================================ */
.wrj-etapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wrj-e-6);
  list-style: none; margin: 0; padding: 0;
}
.wrj-etape { margin: 0; padding-top: var(--wrj-e-5); border-top: 2px solid var(--wrj-lapis); }
.wrj-etape__num {
  display: block;
  font-family: var(--wrj-display); font-weight: 800;
  font-size: var(--wrj-t-h3); line-height: 1;
  color: var(--wrj-u-encre);
  margin-bottom: var(--wrj-e-4);
}
.wrj-etape__titre { font-family: var(--wrj-display); font-weight: 700; font-size: var(--wrj-t-chapo); color: var(--wrj-titre); margin-bottom: var(--wrj-e-3); }
.wrj-etape__texte { font-size: var(--wrj-t-sm); color: var(--wrj-encre-2); margin: 0; }

/* ============================================================
   AMBASSADEURS · un pan de drench dans l'encre de l'athlete
   ============================================================ */
.wrj-athlete {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wrj-bloc-m);
  align-items: center;
}
.wrj-athlete__media { border-radius: var(--wrj-r-22); overflow: hidden; background: var(--wrj-papier-2); }
.wrj-athlete__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.wrj-athlete__nom { font-size: var(--wrj-t-h2); line-height: 0.94; margin-bottom: var(--wrj-e-3); }
.wrj-athlete__role {
  font-size: var(--wrj-t-label); font-weight: 700;
  letter-spacing: var(--wrj-ls-label); text-transform: uppercase;
  margin-bottom: var(--wrj-bloc-s);
}
.wrj-athlete__citation {
  font-family: var(--wrj-display); font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.3;
  margin-bottom: var(--wrj-bloc-s);
  max-width: 32ch;
}

/* Le mur, quand les trois sont montres ensemble sur papier */
.wrj-voix { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wrj-e-5); }
.wrj-voix__item { padding-top: var(--wrj-e-5); border-top: 4px solid var(--wrj-u-encre); }
.wrj-voix__citation {
  font-family: var(--wrj-display); font-weight: 700;
  font-size: 1.0625rem; line-height: 1.4;
  color: var(--wrj-encre); margin-bottom: var(--wrj-e-5);
}
.wrj-voix__nom { font-weight: 700; font-size: var(--wrj-t-sm); color: var(--wrj-titre); }
.wrj-voix__role { font-size: var(--wrj-t-label); color: var(--wrj-encre-3); text-transform: uppercase; letter-spacing: 0.06em; }

/* ============================================================
   BANDE · une ligne, pleine largeur, contenu utile
   ============================================================ */
.wrj-bande { padding-block: var(--wrj-bloc-s); }
.wrj-bande__texte {
  font-family: var(--wrj-display); font-weight: 800;
  font-size: var(--wrj-t-h3);
  line-height: 1.1;
  letter-spacing: var(--wrj-ls-affiche);
  text-transform: uppercase;
  color: var(--wrj-u-sur);
  margin: 0; max-width: none;
}

/* ============================================================
   APPEL FINAL
   ============================================================ */
.wrj-appel { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: var(--wrj-bloc-s) var(--wrj-bloc-m); align-items: end; }
.wrj-appel__titre { font-size: var(--wrj-t-h2); line-height: 0.94; margin-top: var(--wrj-e-5); overflow-wrap: break-word; }
.wrj-appel__actions { align-self: end; justify-content: flex-end; }
.wrj-appel__actions { display: flex; gap: var(--wrj-e-3); flex-wrap: wrap; }

/* ============================================================
   CHRONOLOGIE, FAQ, CARTES, SPLIT, CONTACT, CHIFFRES
   ============================================================ */
.wrj-chrono { display: grid; gap: 0; }
.wrj-chrono__item {
  /* La colonne de date est dimensionnee en rem, pas en ch : le `ch` se
     calcule sur la taille du conteneur (17px) alors que la date est en
     40px, ce qui faisait chevaucher « 1999 – 2001 » sur son titre. */
  display: grid; grid-template-columns: minmax(8rem, 10rem) 1fr; gap: var(--wrj-e-6);
  padding: var(--wrj-e-6) 0;
  border-top: 1px solid var(--wrj-filet);
  align-items: start;
}
.wrj-chrono__date {
  font-family: var(--wrj-display); font-weight: 800;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  line-height: 1.05; letter-spacing: -0.02em;
  color: var(--wrj-u-encre);
  overflow-wrap: break-word;
}
.wrj-chrono__titre { font-family: var(--wrj-display); font-weight: 700; font-size: var(--wrj-t-chapo); color: var(--wrj-titre); margin-bottom: var(--wrj-e-3); }
.wrj-chrono__texte { color: var(--wrj-encre-2); margin: 0; }

.wrj-faq { display: grid; gap: 0; max-width: 68rem; border-top: 1px solid var(--wrj-filet); }
.wrj-faq__item { border-bottom: 1px solid var(--wrj-filet); }
.wrj-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--wrj-e-5);
  padding: var(--wrj-e-5) 0;
  cursor: pointer; list-style: none;
  font-family: var(--wrj-display); font-weight: 700; font-size: var(--wrj-t-chapo);
  color: var(--wrj-titre);
}
.wrj-faq__q::-webkit-details-marker { display: none; }
.wrj-faq__q::after {
  content: ""; flex-shrink: 0;
  width: 12px; height: 12px;
  border-right: 2px solid var(--wrj-u-encre); border-bottom: 2px solid var(--wrj-u-encre);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--wrj-d-etat) var(--wrj-ease);
}
.wrj-faq__item[open] .wrj-faq__q::after { transform: rotate(225deg) translate(-2px, -2px); }
.wrj-faq__r { padding-bottom: var(--wrj-e-6); color: var(--wrj-encre-2); }
.wrj-faq__r > :last-child { margin-bottom: 0; }

.wrj-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wrj-e-6); }
.wrj-carte { padding-top: var(--wrj-e-5); border-top: 4px solid var(--wrj-u-encre); }
.wrj-carte__glyphe {
  display: inline-block;
  font-family: var(--wrj-display); font-weight: 800; font-size: var(--wrj-t-h3);
  color: var(--wrj-u-encre); margin-bottom: var(--wrj-e-4);
}
.wrj-carte__titre { font-family: var(--wrj-display); font-weight: 700; font-size: var(--wrj-t-chapo); color: var(--wrj-titre); margin-bottom: var(--wrj-e-3); }
.wrj-carte__texte { font-size: var(--wrj-t-sm); color: var(--wrj-encre-2); margin: 0; }
.wrj-carte__lien { display: inline-block; margin-top: var(--wrj-e-4); font-size: var(--wrj-t-sm); font-weight: 700; }

.wrj-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wrj-bloc-m); align-items: center; }
.wrj-split--inverse .wrj-split__media { order: -1; }
.wrj-split__media { border-radius: var(--wrj-r-22); overflow: hidden; background: var(--wrj-papier-2); }
.wrj-split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.wrj-split__titre { font-size: var(--wrj-t-h2); margin-bottom: var(--wrj-e-5); }

.wrj-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wrj-e-6); }
.wrj-chiffre { padding-top: var(--wrj-e-5); border-top: 2px solid var(--wrj-lapis); }
.wrj-chiffre__valeur {
  font-family: var(--wrj-display); font-weight: 800;
  font-size: var(--wrj-t-h2); line-height: 0.9;
  letter-spacing: var(--wrj-ls-affiche);
  color: var(--wrj-u-encre); margin: 0 0 var(--wrj-e-4);
}
.wrj-chiffre__libelle { font-size: var(--wrj-t-sm); color: var(--wrj-encre-2); margin: 0; max-width: 26ch; }

.wrj-contact { display: grid; grid-template-columns: minmax(0, 26rem) 1fr; gap: var(--wrj-bloc-m); align-items: start; }
.wrj-contact__liste { display: grid; gap: var(--wrj-e-5); margin: var(--wrj-bloc-s) 0 0; padding: 0; list-style: none; }
.wrj-contact__liste li { margin: 0; }
.wrj-contact__cle { display: block; 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-contact__valeur { font-size: var(--wrj-t-chapo); font-style: normal; color: var(--wrj-titre); }

/* ============================================================
   PROSE
   ============================================================ */
/* La prose est le seul bloc du site fait pour etre lu en continu : elle
   prend la taille de lecture et non la taille d'interface. La boite
   reste un peu plus large que ses paragraphes pour que les images et
   les titres intermediaires respirent. */
.wrj-prose { color: var(--wrj-encre-2); font-size: var(--wrj-t-lecture); max-width: 60ch; }
/* La fiche produit fait exception : sa colonne d'achat ne depasse pas
   ~500px et l'onglet Description y partage la place avec le tableau
   technique. Ce n'est pas de la lecture longue, elle garde le corps. */
.woocommerce .wrj-prose,
.product .wrj-prose,
.wrj-fiche .wrj-prose { font-size: var(--wrj-t-corps); }
.wrj-prose > * + * { margin-top: var(--wrj-e-5); }
.wrj-prose h2 { font-size: var(--wrj-t-h3); margin-top: var(--wrj-bloc-m); }
.wrj-prose h3 { font-size: var(--wrj-t-chapo); margin-top: var(--wrj-bloc-s); }
.wrj-prose h2:first-child, .wrj-prose h3:first-child { margin-top: 0; }
/* Mesure propre a la lecture. Comptee en caracteres et non en pixels :
   56ch en donne 71, la ou l'ancienne valeur en donnait 79. La largeur
   physique de la colonne, elle, ne bouge pas (682px contre 676px). */
.wrj-prose p, .wrj-prose li { max-width: var(--wrj-mesure-lecture); line-height: 1.7; }
.wrj-prose a { text-decoration: underline; text-underline-offset: 0.18em; }
.wrj-prose img { border-radius: var(--wrj-r-18); }
/* L'ancre d'un titre de sommaire ne doit pas se ranger sous l'en-tete
   collante : elle mesure 68px de haut (--wrj-hauteur-nav) et masquerait
   le titre vise. Un cran de grille en plus, pour que le titre ne soit
   pas colle au bord de la barre. */
.wrj-prose h2 { scroll-margin-top: calc(var(--wrj-hauteur-nav) + var(--wrj-e-5)); }

/* ============================================================
   LA COLONNE DE LECTURE ET SON SOMMAIRE

   Deuxieme moitie du meme probleme. La plaque donne un fond a la
   largeur au-dessus du texte ; sous le texte, il reste une bande
   de papier a droite de la colonne, et sur les pages juridiques
   elle court sur des milliers de pixels : 13009px sur les
   « Conditions generales de vente », 7071px sur les « Conditions
   d'achat », 4571px sur la « Politique de confidentialite ».

   On ne la remplit pas de decor. On y met la seule chose qu'une
   page de dix-sept articles reclame vraiment : son sommaire, tire
   du contenu lui-meme et non saisi a la main. Trois titres de
   niveau 2 au minimum, sinon il n'y a rien a indexer et la page
   garde sa mise en page d'avant.
   ============================================================ */
/* La colonne est bornee a `minmax(0, 1fr)` et non laissee en `auto`.
   Mesure : sur la « Politique de confidentialite », une piste de
   grille en `auto` se dimensionne sur le contenu le plus large et
   la colonne passait de 350px a 504px sur un ecran de 390px, tout
   le texte partant sous le bord droit. `minmax(0, ...)` autorise
   la piste a descendre sous la largeur minimale de son contenu,
   ce qui est exactement ce qu'on veut ici : c'est le conteneur qui
   commande, pas le mot le plus long. */
.wrj-lecture__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wrj-bloc-s); }
.wrj-lecture__corps, .wrj-index { min-width: 0; }

/* Le seuil est calcule, pas choisi. La colonne de lecture fait
   46rem (736px) et l'ecart entre les deux colonnes 130px ; pour
   que le sommaire dispose de 240px, largeur en dessous de
   laquelle le plus long intitule des CGV, « Article 6 »,
   « Passation de la commande », part sur quatre lignes, il faut
   736 + 130 + 240 =
   1106px utiles dans le conteneur. La gouttiere vaut 4vw de
   chaque cote, donc 8% de la fenetre : 1106 / 0.92 = 1202px.
   Sous ce seuil le sommaire repasse au-dessus du texte, ce qui
   reste sa place naturelle sur un telephone. */
@media (min-width: 1202px) {
  .wrj-lecture__grille {
    grid-template-columns: minmax(0, 46rem) minmax(0, 1fr);
    column-gap: var(--wrj-bloc-l);
    align-items: start;
  }
  .wrj-lecture__corps { grid-column: 1; grid-row: 1; }
  .wrj-index {
    grid-column: 2; grid-row: 1;
    position: sticky;
    top: calc(var(--wrj-hauteur-nav) + var(--wrj-e-6));
    /* Dix-sept articles font 578px de haut a 15px sur deux lignes
       moyennes. La colonne collante ne doit jamais depasser la
       fenetre, sinon sa fin devient inatteignable. */
    max-height: calc(100vh - var(--wrj-hauteur-nav) - var(--wrj-bloc-s));
    overflow-y: auto;
  }
}

.wrj-index__titre { display: block; margin: 0 0 var(--wrj-e-4); }
.wrj-index__liste { list-style: none; margin: 0; padding: 0; }
/* Un filet de grille par entree, 1px, la meme regle que la
   chronologie et la FAQ. Pas de puce, pas de pastille, pas de
   carte : un index est une liste de titres, il se compose comme
   un ours de magazine. */
.wrj-index__liste li { margin: 0; border-top: 1px solid var(--wrj-filet); }
.wrj-index__liste li:last-child { border-bottom: 1px solid var(--wrj-filet); }
.wrj-index__lien {
  display: block;
  padding: var(--wrj-e-3) 0;
  font-size: var(--wrj-t-sm);
  line-height: 1.35;
  /* 9.67:1 sur papier. L'encre-3 (5.56:1) serait passante mais un
     sommaire se lit en diagonale, il n'a pas a etre plus pale que
     le texte qu'il annonce. */
  color: var(--wrj-encre-2);
  text-decoration: none;
}
.wrj-index__lien:hover,
.wrj-index__lien:focus-visible { color: var(--wrj-encre); text-decoration: underline; text-underline-offset: 0.18em; }
/* Sur un pan d'encre, l'encre-2 tombe a 1.63:1 comme le reste de la
   prose. Le sommaire repasse sur le « dessus » mesure, et ses filets
   sur le blanc a 26% deja employe par la FAQ et la chronologie. */
.wrj-drench .wrj-index__lien { color: var(--wrj-u-sur); }
.wrj-drench .wrj-index__liste li { border-color: rgb(250 253 255 / .26); }

/* ============================================================
   MOUVEMENT RÉDUIT
   Le site reste entierement comprehensible sans une seule
   animation : c'est le seul test valable.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .wrj-js .wrj-calage[data-cale="non"] { --wrj-reg: 0em; }
  .wrj-calage { transition: none; }
  .wrj-famille, .wrj-famille__fleche { transition: none; }
  .wrj-familles:hover .wrj-famille,
  .wrj-familles .wrj-famille:hover { flex-grow: 1; }
}

/* ============================================================
   RÉPONSIF
   ============================================================ */
@media (max-width: 1100px) {
  /* Sous 1100px l'accordeon n'a plus de sens : il n'y a pas de survol au
     doigt, et six pans ne tiennent pas en largeur. On repasse en grille. */
  .wrj-familles { display: grid; grid-template-columns: repeat(3, 1fr); }
  .wrj-famille { min-height: 300px; flex: none; }
  .wrj-familles:hover .wrj-famille,
  .wrj-familles .wrj-famille:hover { flex-grow: 0; }
}
@media (max-width: 900px) {
  .wrj-hero { min-height: 0; padding-block: var(--wrj-bloc-m); }
  .wrj-hero__inner { grid-template-columns: 1fr; gap: var(--wrj-bloc-s); }
  .wrj-hero__media { order: -1; }
  .wrj-hero__media img { max-width: 300px; }
  .wrj-athlete, .wrj-split, .wrj-appel, .wrj-contact { grid-template-columns: 1fr; gap: var(--wrj-bloc-s); }
  .wrj-split--inverse .wrj-split__media { order: 0; }
  .wrj-etapes, .wrj-cartes, .wrj-voix, .wrj-chiffres { grid-template-columns: 1fr; gap: var(--wrj-e-6); }
  .wrj-pan__num { display: none; }

  /* Le nom du chapitre passe sous le titre, et la plaque perd sa
     hauteur plancher.

     Mesure : a 768px, la colonne de droite prenait 142px des 706px
     utiles du conteneur, et « NOS ENGAGEMENTS » passait de deux
     lignes (94px) a trois (140px). Le seuil est celui que le reste
     du fichier emploie deja pour repasser en une colonne.

     La hauteur plancher tombe au meme endroit et pour la meme
     raison : elle n'existe que pour occuper la moitie droite restee
     vide a cote du titre. Des que le titre prend toute la largeur,
     cette moitie n'existe plus, et 420px imposes ne feraient plus
     que de l'aplat vide, mesure a 373px pour le seul mot « FAQ ». */
  .wrj-plaque { min-height: 0; }
  .wrj-plaque__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .wrj-plaque__texte { grid-column: 1; grid-row: 1; }
  .wrj-plaque__chapitre {
    grid-column: 1; grid-row: 2;
    justify-self: start; text-align: left;
    margin-top: var(--wrj-bloc-s);
  }
}

@media (max-width: 620px) {
  /* Sur telephone, la plaque se resserre. 78px de padding en haut
     et en bas coutent 156px, soit 18% de la hauteur d'un iPhone 13,
     pour une plaque dont le titre en fait 90. 52px suffisent a
     detacher le titre du bord de l'encre. */
  .wrj-plaque { padding-block: var(--wrj-bloc-s); }
  .wrj-familles { display: grid; grid-template-columns: repeat(2, 1fr); }
  .wrj-famille { min-height: 210px; padding: var(--wrj-e-5) var(--wrj-e-4); }
  .wrj-chrono__item { grid-template-columns: 1fr; gap: var(--wrj-e-3); }
  .wrj-hero__actions .wrj-btn { width: 100%; }
}