/* =====================================================================
   PERMANENCE — les jetons.
   =====================================================================
   POUR QUI : une association qui rend un service à des gens. Épicerie
   solidaire, aide alimentaire, accompagnement, secours, jardin partagé,
   entraide de quartier, association de parents. Des permanences, des
   bénévoles, des bénéficiaires, des dons.

   CE QU'ON Y CHERCHE, ET C'EST TOUJOURS LA MÊME CHOSE : quand est-ce
   ouvert, où, est-ce que c'est pour moi, comment je peux aider. Ce
   thème répond à ces quatre questions AVANT de raconter quoi que ce
   soit.

   ---------------------------------------------------------------------
   LA DIRECTION : LA PORTE OUVERTE.

   Pas une ONG internationale, pas une brochure institutionnelle, pas un
   cabinet médical, pas un site d'entreprise. Une porte sur laquelle on
   a écrit les horaires en grand, avec quelqu'un derrière.

   TROIS GESTES, ET PAS UN DE PLUS :

     1. LE BLOC D'INFORMATION ENCADRÉ. Horaires, adresse, conditions :
        des cadres nets, posés en haut, avant tout récit. C'est ce qu'on
        vient chercher, et ça ne se cherche pas.

     2. LA GRANDE LECTURE. Corps à 17,5 px, interligne 1,72, colonne de
        34 rem. C'est le site des trois qui doit être le plus lisible :
        il s'adresse à des gens qui lisent parfois mal, souvent vite, et
        parfois dans une langue qui n'est pas la leur.

     3. LE VERT PROFOND, ET RIEN D'AUTRE. Un seul accent, sur beaucoup
        de blanc. Ni bleu médical, ni orange humanitaire, ni pastel :
        un vert-bleu sombre, sérieux et calme, qui ne fait pitié à
        personne.

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

     — aucun misérabilisme : pas de photo cadrée sur une détresse, pas de
       gris triste, pas de typographie compatissante ;
     — aucun code institutionnel : pas de bleu ministériel, pas de
       colonne de logos en tête ;
     — aucun pastel enfantin ;
     — aucun fond crème, aucune serif de titre, aucun arrondi généreux.

   ---------------------------------------------------------------------
   LES CONTRASTES SONT MESURÉS, ET LE SEUIL EST PLUS HAUT QUE LA NORME.
   Rien de ce qui porte du texte ne descend sous 5:1, là où WCAG AA
   demande 4,5 — parce que ce site-ci sera lu sur un téléphone à
   l'extérieur, par quelqu'un qui n'a pas le temps.
   ===================================================================== */

:root {
  /* LES FONDS. Blanc à quatre-vingt-cinq pour cent, et un gris-vert
     très pâle pour les blocs d'information. Aucune dominante chaude. */
  --fond:        #FFFFFF;
  --fond-bande:  #F1F5F3;
  --fond-creux:  #E4EDE9;

  /* L'ENCRE.
     encre sur fond       : 15,9:1
     encre-douce sur fond :  6,7:1 — au-dessus du seuil qu'on s'est donné */
  --encre:       #15201C;
  --encre-douce: #4E5C57;
  --encre-clair: #FFFFFF;

  --trait:       #D8E2DD;
  --trait-fort:  #A9B8B2;
  --trait-champ: #7C8C86;   /* 3,6:1 — seuil des éléments d'interface tenu */

  /* L'ACCENT. Un vert-bleu profond : sérieux sans être institutionnel,
     chaleureux sans être tendre.
     vert sur fond  : 7,2:1 — il porte du texte
     fond sur vert  : 7,2:1 — donc le bouton plein est lisible */
  --vert:        #0E5A4B;
  --vert-fonce:  #0A4539;
  --vert-pale:   #E4EDE9;

  /* L'action — donner, aider. Un ocre profond, jamais un orange vif :
     l'orange humanitaire est une couleur d'affiche de campagne.
     ocre sur fond : 5,3:1 */
  --ocre:        #8A5410;
  --ocre-fonce:  #6F4309;

  --oui:         #0E5A4B;
  --alerte:      #A02A20;   /* 6,0:1 */

  /* LA TYPOGRAPHIE. Alegreya Sans : une humaniste d'origine
     calligraphique, dessinée pour la lecture longue. Elle a la
     chaleur qu'il faut sans être décorative, et sa chasse étroite fait
     tenir une adresse sur une ligne à 390 px — ce qui compte quand
     l'adresse est l'information principale.

     TROIS GRAISSES, TOUTES EMPLOYÉES : 300 pour les grands titres, où
     un poids normal ferait lourd ; 400 pour le texte ; 500 pour ce qui
     doit ressortir d'un bloc. */
  --texte: 'Alegreya Sans', 'Alegreya Sans repli', 'Gill Sans', Optima, sans-serif;

  /* L'ÉCHELLE EST GRANDE, ET C'EST LE POINT. Le corps est à 1,09 rem —
     17,5 px — là où les deux autres thèmes sont à 17. Sur une année de
     lecture, c'est ce qui distingue un site qu'on lit d'un site qu'on
     abandonne. */
  --t-display: clamp(2rem, 4.2vw, 3.1rem);
  --t-h2:      clamp(1.45rem, 2.4vw, 1.95rem);
  --t-h3:      clamp(1.15rem, 1.6vw, 1.35rem);
  --t-lead:    clamp(1.12rem, 1.4vw, 1.28rem);
  --t-body:    1.125rem;
  --t-petit:   1rem;
  --t-mention: 0.8125rem;
  /* Le grand nombre : les chiffres clés, ce que finance un don. */
  --t-nombre:  clamp(1.8rem, 3vw, 2.5rem);

  --gouttiere: clamp(22px, 6vw, 72px);
  --large:     1160px;
  /* Une colonne de lecture COURTE — 34 rem, soit environ 62 signes.
     C'est la mesure d'un texte qu'on lit vite et mal. */
  --lecture:   34rem;
  --section-y: clamp(76px, 10.5vh, 156px);

  /* LE RAYON. Quatre pixels : assez pour qu'un cadre n'ait pas l'air
     d'un tableau administratif, pas assez pour faire une pastille. */
  --rayon:       4px;
  --rayon-petit: 4px;
  --rayon-plein: 999px;

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --survol: 140ms;
  --apparition: 500ms;

  --h-entete: 66px;
  /* La barre des horaires, collée sous l'en-tête : c'est le geste
     signature de ce thème, et sa hauteur entre dans la réserve d'ancre. */
  --h-horaires: 0px;
}

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