/* =====================================================================
   CLUB — les jetons.
   =====================================================================
   POUR QUI : un club de village. Football, gymnastique, trail, tennis,
   basket, randonnée. Une ou plusieurs sections, des créneaux, des
   licences, une saison qui commence au forum des associations.

   CE QU'ON Y CHERCHE, ET DANS CET ORDRE : à quelle heure, où, à partir
   de quel âge, combien. Un parent ouvre le site le mercredi soir pour
   inscrire son enfant ; il ne lit pas, il CHERCHE. Tout ce thème est
   réglé sur cette phrase-là.

   ---------------------------------------------------------------------
   LA DIRECTION : LE PANNEAU DU CLUB.

   Pas le site d'une marque de sport, pas une salle de fitness premium,
   pas un club professionnel. Le tableau vitré à l'entrée du stade : un
   fond clair, une couleur de club franche, des informations rangées en
   lignes, et de gros chiffres qu'on lit de loin.

   TROIS GESTES, ET PAS UN DE PLUS :

     1. LA BANDE DE CLUB. Un bandeau plein, dans la couleur du club, en
        tête de l'en-tête et au-dessus de chaque carte de section. C'est
        le maillot, et c'est ce qui fait qu'on reconnaît le club avant
        d'avoir lu son nom.

     2. LES ANGLES DROITS ET LE FILET. Rayon 2 px, bordures d'un pixel,
        aucune ombre. Un panneau d'affichage n'a pas de relief.

     3. LES CHIFFRES SONT ÉNORMES. Horaires, âges, tarifs, effectifs :
        ils prennent la taille d'un titre. C'est l'information qu'on
        vient chercher, elle doit se lire à un mètre.

   ---------------------------------------------------------------------
   CE QUE CE THÈME NE FAIT PAS, ET QUI LE DISTINGUE DES DEUX AUTRES :

     — aucun fond crème, aucune couleur terreuse ;
     — aucune serif, nulle part ;
     — aucun arrondi généreux ;
     — aucun grand vide décoratif : la densité est celle d'un tableau.

   ---------------------------------------------------------------------
   LES CONTRASTES SONT MESURÉS, PAS ESTIMÉS. Chaque couple porte son
   rapport, calculé selon WCAG 2.1. Rien sous 4,5:1 ne porte du texte
   courant ; rien sous 3:1 ne porte une bordure d'interface.
   ===================================================================== */

:root {
  /* LES FONDS. Blanc dominant, et un gris très légèrement bleuté pour
     les bandes. Aucune dominante chaude : un club n'est pas une maison
     d'hôtes. */
  --fond:        #FFFFFF;
  --fond-bande:  #F2F4F7;   /* la bande alternée */
  --fond-creux:  #E9EDF2;   /* les blocs d'information dans une bande */

  /* L'ENCRE.
     encre sur fond       : 16,1:1
     encre-douce sur fond :  6,3:1  (texte secondaire, au-dessus de 4,5) */
  --encre:       #12161C;
  --encre-douce: #59616D;
  --encre-clair: #FFFFFF;

  /* LES TRAITS. Un pour séparer, un pour border un champ.
     trait-champ sur fond : 3,3:1, seuil des éléments d'interface tenu. */
  --trait:       #DCE1E8;
  --trait-fort:  #B7C0CC;
  --trait-champ: #8A939F;

  /* LA COULEUR DU CLUB. C'est le seul endroit à changer pour qu'un club
     prenne la sienne : tout le thème la lit ici.
     club sur fond        : 8,6:1 — elle porte du texte
     fond sur club        : 8,6:1 — donc le bouton plein est lisible */
  --club:        #0B3B8C;
  --club-fonce:  #082C69;
  --club-pale:   #E7EDF8;   /* le fond des étiquettes */

  /* L'ACTION. Le rouge de l'inscription, et rien d'autre : un seul
     endroit dans la page où l'on appuie vraiment.
     action sur fond : 5,1:1 */
  --action:      #C62828;
  --action-fonce:#A31F1F;

  /* Les états. Le vert ne sert qu'aux confirmations, jamais au décor. */
  --oui:         #1B6B3A;   /* 5,4:1 */
  --alerte:      #A3271F;   /* 6,3:1 */

  /* LA TYPOGRAPHIE. Archivo pour tout : c'est une grotesque dessinée
     pour la signalétique et les gros titres, exactement le registre d'un
     panneau de club. Geist 800 ne sert QU'AUX CHIFFRES — un poids aussi
     lourd sur du texte courant serait illisible, sur un nombre il est
     ce qui se voit de plus loin. */
  --texte:   'Archivo', 'Archivo repli', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --chiffre: 'Geist', 'Geist repli', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* L'ÉCHELLE. Resserrée : le titre d'accueil ne dépasse pas 3,4 rem.
     Un titre gigantesque est un geste de magazine ; ici il volerait la
     place des horaires. */
  --t-display: clamp(2.1rem, 4.6vw, 3.4rem);
  --t-h2:      clamp(1.45rem, 2.6vw, 2rem);
  --t-h3:      clamp(1.1rem, 1.6vw, 1.32rem);
  --t-lead:    clamp(1.05rem, 1.3vw, 1.18rem);
  --t-body:    1rem;
  --t-petit:   0.875rem;
  --t-mention: 0.75rem;
  /* Le grand chiffre : tarifs, effectifs, âges. */
  --t-nombre:  clamp(1.7rem, 3.2vw, 2.4rem);

  --gouttiere: clamp(16px, 4vw, 56px);
  --large:     1180px;
  --lecture:   38rem;
  /* La densité d'un tableau, pas d'une revue : 88 px au maximum entre
     deux sections, là où un thème éditorial en met 120. */
  --section-y: clamp(36px, 4.4vh, 64px);

  /* LE RAYON, ET IL EST PRESQUE NUL. Deux pixels : assez pour qu'un
     bord ne coupe pas, pas assez pour adoucir quoi que ce soit. */
  --rayon:       2px;
  --rayon-petit: 2px;
  --rayon-plein: 999px;   /* les seules formes rondes : les pastilles */

  /* LA BANDE DE CLUB. Quatre pixels, la même partout. */
  --bande:     4px;

  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --survol: 120ms;
  --apparition: 400ms;

  --h-entete: 64px;
}

@media (max-width: 899px) { :root { --h-entete: 56px; } }