/* =====================================================================
   TRIBUNE — les jetons.
   =====================================================================
   POUR QUI : une organisation qui défend une cause et agit
   concrètement. Protection d'un milieu, santé et prévention, droits,
   éducation, citoyenneté, plaidoyer local. Elle constate, elle agit,
   elle publie, et elle demande qu'on la rejoigne.

   CE QU'ON Y CHERCHE : quelle cause, ce qu'elle fait vraiment, ce que ça
   donne, et comment agir. Dans cet ordre.

   ---------------------------------------------------------------------
   LA DIRECTION : LA TRIBUNE.

   L'endroit d'où l'on prend position. Sérieux, dense, vérifiable. C'est
   le plus institutionnel des cinq thèmes, et il l'assume : une
   organisation qu'on prend au sérieux ne ressemble ni à un magazine, ni
   à une jeune pousse, ni à une plaquette d'entreprise.

   QUATRE GESTES, ET PAS UN DE PLUS :

     1. LA DENSITÉ UTILE. Ce thème accepte plus d'information que les
        quatre autres : positions, publications, actualités, actions.
        Un titre énorme suivi de quatre cents pixels de vide dirait
        qu'on n'a rien à montrer.

     2. LES CHIFFRES D'IMPACT, ÉNORMES. Geist 800, jusqu'à 4 rem, sur
        une rangée séparée de filets. C'est le composant signature :
        quarante-deux territoires, dix-huit mille personnes, cent
        vingt-six propositions.

     3. LE BLOC À LA UNE. Un aplat sombre, un seul par page, où
        l'organisation met la campagne, le rapport ou la mobilisation du
        moment. C'est ce qui rend le thème utile à une association de
        santé comme à un mouvement citoyen.

     4. LA RÈGLE ET LE LABEL. Des filets, des étiquettes en petites
        capitales, des listes éditoriales. Aucune carte flottante,
        aucune pastille, aucune ombre.

   ---------------------------------------------------------------------
   CE QUE CE THÈME NE FAIT PAS, ET IL FAUT LE DIRE :

     — aucun code écologique employé comme béquille graphique. Pas de
       feuille, pas de goutte, pas de dégradé vert, pas de texture
       kraft. L'environnement est le CONTENU de la démonstration, pas le
       système de design : une association de lutte contre une maladie
       doit pouvoir reprendre ce thème sans changer une règle ;
     — aucun beige, aucun crème, aucun terracotta, aucun pastel ;
     — aucun arrondi au-delà de deux pixels, aucune ombre, aucune carte
       flottante, aucun badge ;
     — aucune serif, aucune italique décorative.

   ---------------------------------------------------------------------
   LES CONTRASTES SONT MESURÉS. Rien de ce qui porte du texte ne descend
   sous 4,5:1, et les grands chiffres, qui sont l'argument, sont à 15:1.
   ===================================================================== */

:root {
  /* LES FONDS. Blanc, un gris de bande à peine teinté, et un anthracite
     pour les deux surfaces pleines : le bloc à la une et le pied. */
  --fond:        #FFFFFF;
  --fond-bande:  #F3F5F4;
  --fond-creux:  #E7ECEA;
  --fond-encre:  #14181A;

  /* L'ENCRE. Un anthracite légèrement froid, jamais noir.
     encre sur fond       : 15,3:1
     encre-douce sur fond :  6,0:1 */
  --encre:       #15191C;
  --encre-douce: #56605F;
  --encre-clair: #FFFFFF;

  --trait:       #D8DEDC;
  --trait-fort:  #A8B2AF;
  --trait-champ: #74807D;   /* 4,6:1 */
  --filet:       1px;

  /* L'ACCENT. Un vert FRANC et graphique, pas un vert de nature. Il est
     plus saturé et plus jaune que le vert-bleu du thème « permanence »,
     avec lequel il ne doit pas se confondre.
     vert sur fond : 4,9:1 — il porte du texte
     fond sur vert : 4,9:1 — donc le bouton plein est lisible */
  --vert:        #0B7A3B;
  --vert-fonce:  #085E2D;
  --vert-pale:   #E4F2E9;

  /* LA SECONDE COULEUR, FONCTIONNELLE ET RARE. Elle ne sert qu'aux
     étiquettes d'urgence — « mobilisation », « alerte », « pétition en
     cours ». Jamais un fond, jamais un titre.
     brique sur fond : 5,4:1 */
  --ocre:        #B23127;
  --ocre-fonce:  #8E251D;

  --oui:         #0B7A3B;
  --alerte:      #B23127;

  /* LA TYPOGRAPHIE. Geist : une grotesque contemporaine neutre, à grand
     œil, dessinée pour l'interface. Elle porte beaucoup de texte sans
     fatiguer, et sa graisse 800 donne aux chiffres d'impact une présence
     qu'aucune autre famille du dépôt ne peut leur donner.

     TROIS GRAISSES : 400 pour le texte, 500 pour les intitulés et les
     titres, 800 pour les chiffres et rien d'autre. */
  --texte:   'Geist', 'Geist repli', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --chiffre: var(--texte);

  /* L'ÉCHELLE. Serrée : ce thème doit tenir beaucoup d'information sur
     une page. Le titre d'accueil ne dépasse pas 3,3 rem — au-delà, il
     mange la place de ce qu'il annonce. */
  --t-display: clamp(1.95rem, 4vw, 3.3rem);
  --t-h2:      clamp(1.4rem, 2.3vw, 1.9rem);
  --t-h3:      clamp(1.1rem, 1.5vw, 1.28rem);
  --t-lead:    clamp(1.08rem, 1.4vw, 1.24rem);
  --t-body:    1rem;
  --t-petit:   0.875rem;
  --t-mention: 0.8125rem;
  /* LE CHIFFRE D'IMPACT. C'est le plus grand corps du thème, plus grand
     que le titre d'accueil : c'est l'argument, et il se voit de loin. */
  --t-nombre:  clamp(2.4rem, 5vw, 4rem);
  --t-date:    var(--t-petit);

  --gouttiere: clamp(18px, 4vw, 52px);
  --large:     1260px;
  --lecture:   42rem;
  --section-y: clamp(44px, 5.8vh, 80px);

  /* LE RAYON. Deux pixels, et jamais plus : assez pour qu'un champ n'ait
     pas l'air d'un formulaire administratif, pas assez pour faire une
     pastille. */
  --rayon:       2px;
  --rayon-petit: 2px;
  --rayon-plein: 2px;

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --survol: 130ms;
  --apparition: 480ms;

  --h-entete: 66px;
  --h-horaires: 0px;
}

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