/* ============================================================
   JETONS
   Rien d'autre que des variables. Aucune règle de rendu ici.
   ============================================================ */
:root{
  --blanc:#ffffff;
  --sable:#f4f5f9;
  --gris:#d1d3d4;
  --noir:#221f20;
  --orange:#dd5e00;
  /* Le même orange, à peine plus profond, pour les grands aplats qui portent
     du texte blanc : 4,50:1 avec le blanc, là où l'orange de marque fait 3,70.
     Points, traits, ronds et logo gardent l'orange de marque. */
  --orange-fond:#c85200;
  /* Le seul gris de texte du site : 5,20:1 sur blanc, 4,77:1 sur sable. Il
     remplace les six gris qu'on obtenait par des opacités de 45 à 65 %. */
  --gris-texte:#6f6c6d;

  --largeur:90%;
  --retrait:.75rem;          /* écart fixe autour du bouton dans la barre */
  --barre-y:1.1rem;          /* ce qui sépare la barre du haut de l'écran */

  --pad:180px; --padm:90px; --pads:3rem;
  --ease:cubic-bezier(.215,0,.355,1);
  --font:'Outfit','Outfit Repli',system-ui,-apple-system,sans-serif;

  --corps:clamp(1.02rem,1.32vw,1.32rem);   /* paragraphe, ancres et bouton du menu */

  --rature-y:.72em;                        /* la hauteur où la rature croise le chiffre */

  /* Mesuré sur l'Outfit 500 : la barre horizontale du « H » fait .105em.
     Le trait qui raye ou souligne un titre a donc exactement l'épaisseur
     du trait de la lettre qu'il croise. */
  --rature-e:.105em;
  --mascotte-opacite:.4;

  /* La taille de la mascotte, et la part d'elle-même qu'elle laisse dépasser
     du premier écran. Le conteneur qui la rogne se réserve exactement ce
     débord : les deux valeurs ne peuvent donc pas se désaccorder. */
  --tete:min(42.9vw,715px,60.5vh);
  --tete-debord:.2;
  /* L'encre de la mascotte s'arrête à 89,72 % de sa boîte (mesuré au getBBox) :
     ce qui reste dessous est du vide. La section suivante remonte d'autant
     pour que son étiquette se pose sur le bas visible du dessin. */
  --tete-vide:.1028;

  /* Le bouton à pastille. Sa hauteur se déduit du reste : elle n'est jamais
     écrite, et le rond y est donc centré par construction. */
  --jeton-py:.45rem;
  --jeton-rond:1.8rem;
  --jeton-ecart:.85rem;
  --jeton-pr:1.3rem;
  --jeton-h:calc(2 * var(--jeton-py) + var(--jeton-rond));

  /* Boutons et pastilles partagent la même géométrie.
     Le diamètre du rond se déduit de la hauteur d'un bouton, donc la pastille
     fait exactement la même hauteur, à tous les formats, sans valeur en dur. */
  --btn-py:1.05rem;          /* retrait vertical d'un bouton */
  --btn-px:1.95rem;          /* retrait horizontal d'un bouton */
  --pil-py:.5rem;            /* retrait vertical d'une pastille */
  --interligne:1.15;
  --badge:calc(2 * var(--btn-py) + var(--interligne) * 1em - 2 * var(--pil-py));
  /* La hauteur d'un bouton. C'est elle qui donne sa hauteur à la barre de
     navigation : le logo s'y aligne, et l'écart autour du bouton devient
     alors le même sur les quatre côtés. */
  --haut-btn:calc(2 * var(--btn-py) + var(--interligne) * var(--corps));
  /* La place que la barre prend en haut de l'écran : son décalage, sa hauteur,
     et le même air en dessous qu'au-dessus. Ce qui se colle sous elle s'y
     réfère plutôt que de la mesurer. */
  --haut-barre:calc(2 * var(--barre-y) + 2 * var(--retrait) + var(--haut-btn));

  /* L'étiquette de section, et la place qu'elle occupe au-dessus du titre.
     Une colonne voisine qui veut s'aligner sur le titre descend d'autant. */
  --etiquette:.92rem;
  --etiquette-interligne:1.5;
  --etiquette-ecart:clamp(1.6rem,3vw,2.6rem);
  --haut-etiquette:calc(var(--etiquette-interligne) * var(--etiquette) + var(--etiquette-ecart));

  --verre:rgba(255,255,255,.93);
  --flou:blur(22px) saturate(1.8);
  --ombre-barre:
    0 0 0 1px rgba(93,94,94,.07),
    0 1px 1px -.5px rgba(70,71,74,.03),
    0 2px 2px -1px rgba(69,70,74,.04),
    0 3px 3px -1.5px rgba(66,68,71,.04),
    0 5px 5px -2.5px rgba(42,51,70,.03),
    0 10px 10px -5px rgba(62,64,66,.03),
    0 24px 24px -8px rgba(58,59,61,.03);

  /* Le rayon des grands blocs suit celui de la barre en mode replié :
     un seul arrondi de famille pour tout ce qui n'est pas une pastille. */
  --rayon:1.7rem;
  /* L'arrondi de ce qui est plus petit qu'une carte : champs, blocs de la
     frise, éclats. Un seul, au lieu de quatre valeurs voisines. */
  --rayon-petit:.6rem;

  /* Une flèche, en masque, pour qu'elle prenne la couleur du texte. */
  --fleche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
@media (max-width:1390px){ :root{ --pad:8rem; --padm:5rem; --pads:3rem; } }
@media (max-width:790px) { :root{ --pad:5rem; --padm:3rem; --pads:2rem; } }
@media (max-width:490px) { :root{ --pad:2rem; --padm:2.5rem; --pads:1.5rem; } }

@media (max-width:900px){ :root{ --retrait:.5rem; --tete:min(104vw,450px,92vh); --tete-debord:.35; } }
@media (max-width:490px){ :root{ --btn-py:.95rem; --btn-px:1.6rem; --tete:min(108vw,378px,92vh); } }

/* Portables courts, puis très grands écrans — dans cet ordre, le second
   devant l'emporter quand les deux s'appliquent. */
@media (min-width:901px) and (max-height:800px){ :root{ --tete:min(39.6vw,715px,52.8vh); } }
@media (min-width:1920px){ :root{ --tete:min(61.6vw,1023px,85.8vh); } }