/* ==========================================================================
   Numbers v2 - fondations
   Tokens, polices, reset et primitives partages par toutes les sections.

   Deux heritages se rencontrent ici :
   - l'habillage vient de numbers.sh (polices Hw Cigars et Inter, palette creme
     et encre, pilule sombre de navigation) ;
   - le squelette vient de l'architecture du modele de reference : conteneur centre a
     1220px, echelle typographique en graisses 400 et 500 avec interlettrage
     negatif, et un rythme vertical beaucoup plus large.

   Les valeurs marquees "relevee" viennent des styles calcules du modele de reference
   a 1440px (la verite terrain home-1440.json) ou des captures produit de
   assets/img/. Aucune n'est inventee.
   ========================================================================== */

/* --------------------------------------------------------------- polices */
/* Blocs @font-face repris tels quels du jumeau : memes fichiers, memes
   plages Unicode. Ne pas y toucher. */

@font-face {
  font-family: "Hw Cigars";
  src: url("../fonts/HwCigars-Regular.woff2") format("woff2"),
       url("../fonts/HwCigars-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Inter variable, decoupe latin-ext puis latin (l'ordre compte : la derniere
   regle qui couvre un caractere gagne, on met donc latin en dernier). */
@font-face {
  font-family: Inter;
  src: url("../fonts/Inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Inter;
  src: url("../fonts/Inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Uxumgrotesque;
  src: url("../fonts/UxumGrotesque-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: Uxumgrotesque;
  src: url("../fonts/UxumGrotesque-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: fallback;
}

/* ==========================================================================
   TOKENS
   ========================================================================== */

:root {
  /* ------------------------------------------------------------- palette */

  /* encres, reprises du jumeau */
  --ink: #1c1e21;          /* fonds sombres, pilule de navigation */
  --ink-strong: #0e0f11;   /* titres */
  --ink-soft: #333;        /* texte courant */
  --ink-muted: #282a2e;
  --grey: #6f6f6f;         /* herite du jumeau : etat de repos des liens animes */
  /* Le gris du jumeau plafonne a 4,5 pour 1 sur blanc mais tombe a 4,5 juste
     en dessous sur le fond creme. Le texte secondaire utilise donc une nuance
     a peine plus sombre, qui tient l'AA sur les deux fonds : 5,6 sur blanc,
     5,0 sur creme. */
  --grey-texte: #686868;

  /* fonds, repris du jumeau */
  --white: #fff;
  --cream: #f3f2ed;        /* fond des cartes et des sections claires */
  --cream-light: #f6f5ef;  /* fond de la section blog */
  /* --blue-pale et --blue ont ete retires : ils tenaient les etiquettes de
     categorie du blog, la courbe de tresorerie et la matrice de cohortes,
     soit une QUATRIEME teinte a cote des trois accents. Ces trois emplois
     sont passes au mauve ou au vert selon leur sens. Les tokens sont
     supprimes plutot que laisses inertes : un bleu disponible finit toujours
     par etre repris, et la page redeviendrait quadrichrome. */

  /* traits. Le liseré doit rester lisible aussi bien sur blanc que sur creme,
     d'ou une valeur intermediaire entre les deux fonds. */
  --trait: #e4e2da;
  --trait-fort: #d4d2c8;

  /* ================================================================ accents

     Palette de trois couleurs. Leurs roles ne sont pas interchangeables : ils
     decoulent de contrastes mesures, pas d'un gout.

                        creme    sombre   blanc pose dessus
       #355146 vert      7,75     1,92          8,69
       #FF7759 corail    2,33     6,39          2,61
       #D18EE2 mauve     2,16     6,90          2,42

     Ce que cela impose :
     - le VERT est le seul des trois qui puisse porter du texte sur fond clair,
       et le seul sur lequel du blanc reste lisible. Il est donc l'accent
       principal : texte accentue, boutons pleins, serie positive des graphiques.
     - le CORAIL et le MAUVE tombent a 2,3 et 2,2 sur creme : ils ne portent
       JAMAIS de texte sur fond clair, uniquement des aplats, des barres et des
       traits. En revanche ils passent a 6,4 et 6,9 sur le bloc sombre, ou ils
       deviennent d'excellentes couleurs de texte.
     - aucun des deux ne supporte du blanc pose dessus (2,6 et 2,4). Une
       pastille corail ou mauve porte donc du texte SOMBRE, jamais du blanc.

     Les declinaisons -sombre existent pour les cas ou le corail ou le mauve
     doivent malgre tout porter du texte sur fond clair. */

  --vert: #355146;         /* accent principal : texte, aplats, serie positive */
  --vert-texte: #355146;   /* meme valeur : ce vert est deja lisible en texte */
  --vert-clair: #e6ece9;   /* fond de pastille positive */

  --corail: #ff7759;       /* aplats et barres seulement sur fond clair */
  --corail-sombre: #a83a20;/* porte du texte sur creme : 5,7 */
  --corail-clair: #ffece7; /* fond de pastille d'alerte */

  --mauve: #d18ee2;        /* aplats et barres seulement sur fond clair */
  --mauve-sombre: #7b3f8c; /* porte du texte sur creme : 6,4 */
  --mauve-clair: #f7edfa;  /* fond de pastille tierce */

  /* Le rouge de variation negative devient le corail assombri : la page n'a
     plus besoin d'une quatrieme teinte pour dire la meme chose. */
  --rouge: #ff7759;
  --rouge-texte: #a83a20;
  --rouge-clair: #ffece7;

  /* ================================================== teintes du degrade

     Les six couleurs du degrade de la banniere, promues en tokens pour que
     les schemas d'interface parlent la meme langue que le haut de la page.
     Elles ne remplacent pas les trois accents ci-dessus, elles s'y ajoutent.

     Contrastes mesures, en rapport :

                       creme   blanc   sur l'encre   blanc pose   encre posee
       #f3d94e jaune    1,26    1,41         11,81         1,41         11,81
       #f1d257 or       1,33    1,49         11,21         1,49         11,21
       #c9e6b7 menthe   1,21    1,36         12,32         1,36         12,32
       #a8d8ec bleu     1,37    1,53         10,90         1,53         10,90
       #f69b73 peche    1,90    2,13          7,84         2,13          7,84
       #f1856b corail   2,26    2,53          6,61         2,53          6,61

     Ce que ces mesures imposent, sans exception :
     - AUCUNE ne porte de texte sur fond clair. La meilleure des six, le
       corail, plafonne a 2,26 sur le creme, donc sous le seuil de 3 reserve
       aux grands corps. Elles ne servent qu'a des APLATS : barres, aires de
       courbe, jauges, cases de matrice, fonds de pastille.
     - AUCUNE ne supporte du blanc pose dessus, de 1,36 a 2,53. Une pastille
       teintee porte donc du texte en ENCRE, jamais du blanc : l'encre y tient
       entre 6,6 et 12,3 pour 1, tres au-dessus du seuil.
     - un trait fin teinte de l'une d'elles disparait sur fond clair. Les
       traces de courbe, les filets, les puces de quelques pixels gardent
       --vert ou --ink : ces six teintes remplissent, elles ne dessinent pas.

     Le vert reste donc l'accent de texte du site : c'est le seul des neuf
     tokens de couleur a etre lisible en lettres sur creme comme sur blanc. */

  --vif-jaune: #f3d94e;   /* mises en avant, jauge de progression */
  --vif-or: #f1d257;      /* meme famille que le jaune, un ton plus chaud */
  --vif-menthe: #c9e6b7;  /* serie positive, ce qui est produit */
  --vif-bleu: #a8d8ec;    /* serie tierce, donnee ni bonne ni mauvaise */
  --vif-peche: #f69b73;   /* serie negative, niveaux legers */
  --vif-corail: #f1856b;  /* serie negative, niveau le plus lourd */

  /* ---------------------------------------------------------------- typo */

  --font-display: "Hw Cigars", "Times New Roman", sans-serif;
  --font-sans: Inter, sans-serif;
  /* Uxum Grotesque ne sert que sur l'index du blog et les articles. */
  --font-titre-blog: Uxumgrotesque, sans-serif;

  /* Echelle relevee sur le modele de reference. Regle du modele : jamais de graisse 700
     sur un titre, uniquement 400 ou 500, et toujours un interlettrage negatif
     proportionnel au corps (environ -3 % du corps). C'est ce couple graisse
     faible plus interlettrage serre qui donne le ton. */
  --t-accroche: 64px;
  --t-accroche-lh: 64px;
  --t-accroche-ls: -1.92px;

  --t-section: 48px;
  --t-section-lh: 48px;
  --t-section-ls: -1.44px;

  --t-grand: 40px;
  --t-grand-lh: 48px;
  --t-grand-ls: -0.99px;

  --t-carte: 24px;
  --t-carte-lh: 28.8px;
  --t-carte-ls: -0.6px;

  /* Texte courant. Inter, graisse 400, pas d'interlettrage negatif : le
     resserrement est reserve aux gros corps. */
  --t-corps: 17px;
  --t-corps-lh: 26px;
  --t-petit: 15px;
  --t-petit-lh: 24px;
  --t-micro: 13px;
  --t-micro-lh: 18px;

  /* ---------------------------------------------------------- mise en page */

  /* Le changement structurant par rapport au jumeau : celui-ci ecartait le
     contenu avec padding 0 7% (un pourcentage de la fenetre), ici le contenu
     vit dans un conteneur centre a largeur maximale fixe.
     A 1440px de fenetre, 1220px de contenu laissent 110px de chaque cote,
     exactement la mesure relevee sur le modele. */
  --conteneur: 1220px;
  --marge: 24px;

  /* Rythme vertical. Le modele respire nettement plus que numbers.sh : ses
     sections ont 80px de padding vertical, 90 a 100px pour les plus amples,
     et 40 a 80px entre le titre d'une section et son contenu. */
  --sp-section: 100px;      /* respiration d'une section ample */
  --sp-section-court: 80px; /* respiration par defaut */
  --sp-bloc: 64px;          /* entre l'en-tete d'une section et son contenu */
  --sp-titre: 24px;         /* entre sur-titre, titre et chapo */
  --sp-grille: 24px;        /* gouttiere de la grille de cartes */

  /* Echelle d'espacement pour les composants internes des sections. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 56px;

  /* Rayons relevés sur le modele : 12, 16, 20, 30, 32, 45px, plus la pilule. */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 30px;
  --r-2xl: 32px;
  --r-3xl: 45px;
  --r-pill: 999px;

  /* Ombres. Volontairement tres douces : les schemas d'interface doivent se
     detacher du fond creme sans donner un effet de carte flottante. */
  --ombre-carte: 0 1px 2px rgba(28, 30, 33, 0.04), 0 8px 24px rgba(28, 30, 33, 0.06);
  --ombre-relief: 0 1px 3px rgba(28, 30, 33, 0.08);

  /* Duree de transition unique, alignee sur celle du jumeau. */
  --transition: 300ms;
}

/* Ruptures : les memes trois que le jumeau et que le site d'origine.
   Une accroche de 64px reste illisible sur un telephone, toute l'echelle est
   donc redescendue palier par palier, en conservant le rapport corps sur
   interligne et un interlettrage toujours proche de -3 % du corps. */

@media screen and (max-width: 991px) {
  :root {
    --t-accroche: 52px;
    --t-accroche-lh: 54px;
    --t-accroche-ls: -1.56px;

    --t-section: 40px;
    --t-section-lh: 42px;
    --t-section-ls: -1.2px;

    --t-grand: 34px;
    --t-grand-lh: 40px;
    --t-grand-ls: -0.85px;

    --t-carte: 22px;
    --t-carte-lh: 26.4px;
    --t-carte-ls: -0.55px;

    --sp-section: 80px;
    --sp-section-court: 64px;
    --sp-bloc: 48px;
    --sp-titre: 20px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --t-accroche: 42px;
    --t-accroche-lh: 44px;
    --t-accroche-ls: -1.26px;

    --t-section: 34px;
    --t-section-lh: 36px;
    --t-section-ls: -1.02px;

    --t-grand: 28px;
    --t-grand-lh: 34px;
    --t-grand-ls: -0.7px;

    --t-carte: 20px;
    --t-carte-lh: 25px;
    --t-carte-ls: -0.5px;

    --t-corps: 16px;
    --t-corps-lh: 25px;

    --marge: 20px;

    --sp-section: 64px;
    --sp-section-court: 56px;
    --sp-bloc: 40px;
    --sp-titre: 16px;
  }
}

@media screen and (max-width: 479px) {
  :root {
    --t-accroche: 34px;
    --t-accroche-lh: 36px;
    --t-accroche-ls: -1.02px;

    --t-section: 28px;
    --t-section-lh: 30px;
    --t-section-ls: -0.84px;

    --t-grand: 24px;
    --t-grand-lh: 29px;
    --t-grand-ls: -0.6px;

    --t-carte: 18px;
    --t-carte-lh: 23px;
    --t-carte-ls: -0.45px;

    /* 16px de marge laissent 343px de contenu sur une fenetre de 375px. */
    --marge: 16px;

    --sp-section: 48px;
    --sp-section-court: 40px;
    --sp-bloc: 32px;
    --sp-titre: 14px;
  }
}

/* ==========================================================================
   RESET
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Aucun lissage de police n'est force : le poser sur le corps amincit tous les
   glyphes et fait deriver le rendu du texte. */
body {
  margin: 0;
  min-height: 100%;
  background-color: var(--white);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: var(--t-corps);
  font-weight: 400;
  line-height: var(--t-corps-lh);
  /* Le contenu ne doit jamais provoquer de defilement horizontal, y compris
     quand un schema d'interface deborde le conteneur en attendant son repli. */
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  vertical-align: middle;
  border: 0;
}

img {
  display: inline-block;
  height: auto;
}

a {
  color: inherit;
}

/* Les titres n'ont plus de marge implicite ni de graisse 700 : dans ce modele
   c'est la classe de niveau (.t-accroche, .t-section...) qui pose corps,
   graisse et interlettrage, et c'est le conteneur qui pose l'espacement. */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding-left: 0;
}

figure,
blockquote {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
}

/* Anneau de focus visible et uniforme, indispensable des lors que les liens du
   pied de page et de la navigation n'ont pas de soulignement. */
:focus-visible {
  outline: 2px solid var(--vert-texte);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   PRIMITIVES DE MISE EN PAGE
   ========================================================================== */

/* Conteneur centre. La largeur maximale porte sur la boite de bordure, on y
   ajoute donc les deux marges pour que le contenu utile plafonne bien a
   1220px et non a 1220 moins les marges.
   Consequence voulue : au-dela de 1268px de fenetre la mise en page cesse de
   s'elargir et se centre, contrairement au jumeau qui derivait a 1920px. */
.conteneur {
  width: 100%;
  max-width: calc(var(--conteneur) + 2 * var(--marge));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--marge);
  padding-right: var(--marge);
}

/* Variante etroite pour les blocs de lecture (chapo, texte de la section
   "Qui suis-je", appel a l'action). */
.conteneur--etroit {
  max-width: calc(880px + 2 * var(--marge));
}

/* Bande pleine largeur. Le fond se pose sur .section, jamais sur .conteneur,
   pour qu'il aille bien d'un bord a l'autre de la fenetre. */
.section {
  position: relative;
  padding-top: var(--sp-section-court);
  padding-bottom: var(--sp-section-court);
}

/* La navigation est en position fixe et haute de 96px (80px sous 768px) : sans
   marge de defilement, un saut depuis le menu vers #outils ou #apropos amenerait
   le sur-titre de la section sous la pilule, invisible. La valeur couvre la
   hauteur du bandeau plus une respiration. Elle vaut pour toutes les sections,
   c'est pourquoi elle vit ici et non dans une feuille de section. */
main[id],
main > section[id] {
  scroll-margin-top: 128px;
}

@media screen and (max-width: 767px) {
  main[id],
  main > section[id] {
    scroll-margin-top: 104px;
  }
}

/* Section ample : la grille des outils et le bloc des objectifs, qui portent
   beaucoup de contenu et ont besoin de plus d'air autour. */
.section--ample {
  padding-top: var(--sp-section);
  padding-bottom: var(--sp-section);
}

.section--creme {
  background-color: var(--cream);
}

.section--encre {
  background-color: var(--ink);
  color: var(--white);
}

/* En-tete de section : sur-titre, titre, chapo. Le gabarit vient du modele,
   ou chaque section ouvre sur ce meme triptyque espace de 24px. */
.section__entete {
  display: flex;
  flex-direction: column;
  gap: var(--sp-titre);
  margin-bottom: var(--sp-bloc);
}

.section__entete--centre {
  align-items: center;
  text-align: center;
}

/* ==========================================================================
   PRIMITIVES TYPOGRAPHIQUES
   ========================================================================== */

/* Accroche : un seul usage par page, le h1. */
.t-accroche {
  font-family: var(--font-display);
  font-size: var(--t-accroche);
  font-weight: 400;
  line-height: var(--t-accroche-lh);
  letter-spacing: var(--t-accroche-ls);
  color: var(--ink-strong);
}

.t-section {
  font-family: var(--font-display);
  font-size: var(--t-section);
  font-weight: 400;
  line-height: var(--t-section-lh);
  letter-spacing: var(--t-section-ls);
  color: var(--ink-strong);
}

.t-grand {
  font-family: var(--font-sans);
  font-size: var(--t-grand);
  font-weight: 500;
  line-height: var(--t-grand-lh);
  letter-spacing: var(--t-grand-ls);
  color: var(--ink-strong);
}

.t-carte {
  font-family: var(--font-sans);
  font-size: var(--t-carte);
  font-weight: 500;
  line-height: var(--t-carte-lh);
  letter-spacing: var(--t-carte-ls);
  color: var(--ink-strong);
}

/* Sur-titre : petite etiquette qui annonce la section. Le seul endroit ou
   l'interlettrage est positif. */
.t-surtitre {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: var(--t-micro-lh);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--grey-texte);
}

.t-chapo {
  font-family: var(--font-sans);
  font-size: var(--t-corps);
  font-weight: 400;
  line-height: var(--t-corps-lh);
  color: var(--ink-soft);
  max-width: 62ch;
}

.t-corps {
  font-size: var(--t-corps);
  line-height: var(--t-corps-lh);
  color: var(--ink-soft);
}

.t-petit {
  font-size: var(--t-petit);
  line-height: var(--t-petit-lh);
  color: var(--grey-texte);
}

/* Mise en valeur d'un fragment d'accroche, comme la seconde ligne du titre
   d'accueil. */
.t-accent {
  color: var(--vert-texte);
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */

/* Le bouton sert dans l'accroche et dans l'appel a l'action final, il vit donc
   dans les fondations. La pilule de navigation garde son propre traitement. */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--t-petit);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition) ease,
              border-color var(--transition) ease,
              color var(--transition) ease,
              transform var(--transition) ease;
}

.bouton:hover {
  transform: translateY(-1px);
}

.bouton--primaire {
  background-color: var(--ink);
  color: var(--white);
}

.bouton--primaire:hover {
  background-color: var(--vert-texte);
}

.bouton--secondaire {
  background-color: transparent;
  border-color: var(--trait-fort);
  color: var(--ink-strong);
}

.bouton--secondaire:hover {
  border-color: var(--ink);
  background-color: var(--white);
}

/* Fleche du bouton. Le SVG d'origine est noir, on le teinte en blanc par
   filtre pour le bouton primaire plutot que de dupliquer le fichier. */
.bouton__fleche {
  width: 16px;
  height: 16px;
}

.bouton--primaire .bouton__fleche {
  filter: invert(1);
}

/* ==========================================================================
   PASTILLES DE VARIATION
   ========================================================================== */

/* Les quatre schemas d'interface affichent tous des ecarts en pourcentage.
   La forme est mutualisee ici pour qu'ils restent coherents entre eux. */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: var(--t-micro-lh);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Les fonds passent aux teintes du degrade, le texte reste en encre. Les
   anciens fonds etaient des versions delavees de l'accent (--vert-clair a
   1,05 pour 1 sur le blanc de la carte) : la pastille se voyait a peine.
   La menthe et la peche se detachent nettement plus tout en gardant, sous
   l'encre, 12,3 et 7,8 pour 1. Poser du blanc dessus aurait donne 1,4 et
   2,1 : c'est la raison pour laquelle le texte reste sombre. */
.pastille--positive {
  background-color: var(--vif-menthe);
  color: var(--ink-strong);
}

.pastille--negative {
  background-color: var(--vif-peche);
  color: var(--ink-strong);
}

/* Neutre au sens propre : ce n'est pas une categorie de donnee mais une
   mention de service, "Exemple", "3 priorites". Elle reste grise, une mention
   ne doit pas ressembler a une serie. */
.pastille--neutre {
  background-color: var(--cream);
  color: var(--grey-texte);
}

/* La troisieme categorie, celle qui n'est ni la bonne ni la mauvaise
   nouvelle : un statut "a lancer" a cote d'un "valide" et d'un "en cours".
   C'est l'emploi du bleu du degrade, la voix tierce de la palette.
   Meme regle que les deux precedentes : le bleu plein ne porterait pas de
   texte clair, 1,5 pour 1 sous du blanc, mais l'encre y tient a 10,9. */
.pastille--tierce {
  background-color: var(--vif-bleu);
  color: var(--ink-strong);
}

/* Les chiffres des schemas doivent s'aligner en colonne : chasse fixe. */
.chiffre {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   UTILITAIRES
   ========================================================================== */

.u-hidden {
  display: none;
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Listes sans puce, tres frequentes dans les cartes. */
.u-liste-nue {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Lien d'evitement : la navigation est en position fixe, un utilisateur au
   clavier doit pouvoir sauter directement au contenu. */
.lien-evitement {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 10000;
  transform: translate(-50%, -200%);
  padding: 10px 18px;
  background-color: var(--ink);
  color: var(--white);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: var(--t-petit);
  text-decoration: none;
}

.lien-evitement:focus {
  transform: translate(-50%, 0);
}