/* ============================================================
   02 — BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* clip et non hidden : hidden casse position:sticky */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--wrj-papier);
  color: var(--wrj-encre);
  font-family: var(--wrj-corps);
  font-size: var(--wrj-t-corps);
  line-height: 1.53;
  font-weight: 400;
  /* Sur ce site, tout chiffre est une reference, un prix ou une
     pointure : il doit s'aligner en colonne. */
  font-variant-numeric: tabular-nums;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--wrj-display);
  font-weight: 800;
  color: var(--wrj-titre);
  margin: 0;
  text-wrap: balance;
  letter-spacing: var(--wrj-ls-affiche);
}
/* Le h1 par defaut est celui d'une page de contenu, pas celui d'une
   affiche. L'affiche est un cas particulier, elle se declare la ou elle
   sert (.wrj-hero__titre), et le rayon comme la fiche produit portent
   deja leur propre echelle. L'interligne remonte de 0.88 a 0.94 : 0.88
   etait cale sur du 100px ou les lignes se touchent volontairement ; a
   56px il faisait mordre les jambages d'une ligne sur les capitales de
   la suivante. */
h1 { font-size: var(--wrj-t-titre-page); line-height: 0.94; text-transform: uppercase; overflow-wrap: break-word; }
h2 { font-size: var(--wrj-t-h2); line-height: 0.95; overflow-wrap: break-word; }
h3 { font-size: var(--wrj-t-h3); line-height: 1.10; font-weight: 700; letter-spacing: -0.015em; }
/* Le h4 avait son propre jeton depuis ce correctif, et non plus celui du
   chapo : a 22px fixes il passait sous le h3 des que l'ecran descendait
   sous 700px, ou le h3 fluide tombe a 21px. */
h4 { font-size: var(--wrj-t-h4); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0 0 var(--wrj-e-5); max-width: var(--wrj-mesure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--wrj-lien); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 2px; }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--wrj-e-5); padding-left: 1.25em; }
li { margin-bottom: var(--wrj-e-2); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

/* Focus visible partout, jamais supprime. Sur un aplat d'encre,
   il bascule en Ambre pour rester perceptible. */
:focus-visible {
  outline: 2px solid var(--wrj-focus);
  outline-offset: 2px;
  border-radius: 2px;
}
.wrj-drench :focus-visible,
.wrj-pied :focus-visible { outline-color: var(--wrj-ambre); }

::selection { background: var(--wrj-ambre); color: var(--wrj-noir); }

hr { border: 0; border-top: 1px solid var(--wrj-filet); margin: var(--wrj-bloc-s) 0; }

.wrj-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Le lien d'evitement sort par le haut et revient a la prise de focus.
   Il animait `top`, une propriete de mise en page, contre la premiere
   des quatre regles dures de 07-mouvement. L'element est fixe, donc le
   cout etait nul, mais une regle dure qui souffre une exception cesse
   d'etre une regle : c'est aussi ce qui rend l'audit du fichier possible
   au grep. Position finale posee en dur, deplacement en transform. */
.wrj-skip {
  position: fixed; top: var(--wrj-e-4); left: var(--wrj-e-4);
  z-index: 999;
  padding: var(--wrj-e-3) var(--wrj-e-5);
  background: var(--wrj-ambre); color: var(--wrj-noir);
  font-weight: 700; border-radius: var(--wrj-r-12);
  transform: translateY(calc(-100% - var(--wrj-e-4) - 8px));
  transition: transform var(--wrj-d-tap) var(--wrj-ease);
}
.wrj-skip:focus { transform: translateY(0); text-decoration: none; }

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

/* Le fige du defilement quand un panneau plein ecran est ouvert */
html.wrj-fige { overflow: hidden; }

/* ------------------------------------------------------------
   Conteneur
   ------------------------------------------------------------ */
.wrj-conteneur {
  width: 100%;
  max-width: var(--wrj-conteneur);
  margin-inline: auto;
  padding-inline: var(--wrj-gouttiere);
}
/* Borne en rem : `ch` se calcule sur la police du conteneur (17px) et
   ce bloc enveloppe un h1 qui monte a 132px. */
.wrj-conteneur--texte { max-width: 46rem; }

/* ------------------------------------------------------------
   Le pan : l'unite de composition du site
   Un pan par idee, coupe net, bord a bord. Jamais deux pans
   d'encre consecutifs : le papier est ce qui rend l'encre violente.
   ------------------------------------------------------------ */
.wrj-pan { padding-block: var(--wrj-section); position: relative; }
.wrj-pan--serre { padding-block: var(--wrj-bloc-m); }

/* Aplat pleine largeur. Aucun rayon : l'encre va au bord. */
.wrj-drench {
  background: var(--wrj-u);
  color: var(--wrj-u-sur);
}
.wrj-drench h1, .wrj-drench h2, .wrj-drench h3, .wrj-drench h4 { color: var(--wrj-u-sur); }
.wrj-drench a { color: var(--wrj-u-sur); }
/* Compensation sur trois axes : le texte clair sur fond dense
   lit plus maigre et plus serre qu'il ne l'est. */
.wrj-drench p, .wrj-drench li { font-weight: 500; line-height: 1.58; letter-spacing: 0.012em; }
/* La prose porte sa propre encre foncee : sur un aplat elle tombait a
   1.63:1, illisible. Tout ce qui est pose sur l'encre repasse en clair. */
.wrj-drench .wrj-prose,
.wrj-drench .wrj-prose p,
.wrj-drench .wrj-prose li,
.wrj-drench .wrj-pan__chapo,
.wrj-drench .wrj-chrono__texte,
.wrj-drench .wrj-carte__texte,
.wrj-drench .wrj-etape__texte,
.wrj-drench .wrj-chiffre__libelle,
.wrj-drench .wrj-faq__r,
.wrj-drench .wrj-doux { color: var(--wrj-u-sur); }
.wrj-drench .wrj-prose h2, .wrj-drench .wrj-prose h3,
.wrj-drench .wrj-chrono__titre, .wrj-drench .wrj-carte__titre,
.wrj-drench .wrj-etape__titre, .wrj-drench .wrj-faq__q { color: var(--wrj-u-sur); }
/* Les valeurs et dates prennent l'Ambre : c'est le seul endroit ou il
   peut servir d'accent, puisqu'il y tient 11.47:1. */
.wrj-drench .wrj-chiffre__valeur,
.wrj-drench .wrj-chrono__date,
.wrj-drench .wrj-carte__glyphe,
.wrj-drench .wrj-etape__num { color: var(--wrj-ambre); }
.wrj-drench .wrj-faq__item,
.wrj-drench .wrj-faq { border-color: rgb(250 253 255 / .26); }
.wrj-drench .wrj-chrono__item,
.wrj-drench .wrj-etape { border-color: rgb(250 253 255 / .32); }

/* Le pan pleine largeur prend le Lapis de la charte tel quel. C'est son
   emploi documente : la charte ne montre le Lapis qu'en aplat, avec le
   logo blanc dessus. Il n'existe pas de variante « profonde », elle
   avait ete inventee pour amortir un violet qui n'etait pas le bon. */
.wrj-drench--lapis { --wrj-u: var(--wrj-lapis); --wrj-u-sur: var(--wrj-blanc); }
.wrj-drench--noir  { --wrj-u: var(--wrj-noir);  --wrj-u-sur: var(--wrj-blanc); }