/* =========================================================
   WwW — Interface d'engagement
   Fondations du design system
   Source : charte graphique WwW + doc RGAA + recommandations Lorène
   Ce fichier est le CONTRAT entre la créa et le code.
   Toute modification ici se répercute sur toutes les pages.
   ========================================================= */

:root {
  /* ---- Couleurs de marque ---- */
  --www-bleu-fonce:  #000995; /* texte et actions, conforme sur blanc et sur les vives */
  --www-bleu-survol: #000672; /* survol d'une action primaire */
  /* MÊME VALEUR QUE --www-bleu-survol, ET C'EST TOUT L'INTÉRÊT. Demande de
     Lorène du 27/08 : elle veut distinguer le bleu des ACTIONS de celui des
     éléments graphiques secondaires, sans ajouter un bleu de plus à la charte.
     Deux jetons de même valeur et de noms différents font exactement ça — le
     jour où le bleu de survol change, les pictos ne bougent pas, et
     réciproquement. C'est la raison pour laquelle ce fichier nomme ses jetons
     par leur USAGE et jamais par leur teinte : sans ce doublon, employer
     --www-bleu-survol sur un picto statique coupleraient leurs couleurs pour
     toujours, et l'écart entre les deux bleus n'étant que de 1,16:1 (mesuré
     plus bas, au survol du bouton primaire), le couplage se paierait sans que
     personne ne voie ce qu'il achète.
     Conforme partout par construction, mesuré sur les fonds du site : 16,11:1
     sur --www-fond, 14,75:1 sur --www-fond-bloc, 10,88:1 sur --www-rose-bloc,
     9,16:1 sur --www-bleu-clair. Seule exception à connaître, la même que pour
     --www-bleu-fonce : 3,14:1 sur --www-vert-fonce, donc grand texte et
     composants d'interface seulement, jamais du texte courant. */
  --www-bleu-picto:  #000672; /* pictogrammes et éléments graphiques secondaires */
  --www-voile-bleu:  rgba(0, 9, 149, .07); /* survol d'une action secondaire */
  --www-vert-fonce:  #007C49; /* action secondaire, conforme sur blanc */
  --www-jaune:       #FFE200; /* fond et accent uniquement */
  --www-rose:        #FFA3E8; /* fond et accent uniquement */
  --www-bleu-clair:  #5BCDFF; /* fond et accent uniquement */
  /* LE ROSE DES BLOCS EST UNE COULEUR CALCULÉE, PAS UNE OPACITÉ, ET C'EST LA
     RÈGLE 7. Lorène a tranché le 21/08 : « tous les fonds roses à 70 %, tous
     les autres fonds à 100 % ». Posée en opacity ou en rgba, cette valeur rend
     tout ratio de contraste incalculable — il dépendrait de ce qu'il y a
     derrière, donc personne ne pourrait plus mesurer quoi que ce soit ni le
     vérifier automatiquement. La valeur ci-dessous est le mélange exact de
     --www-rose à 70 % sur --www-fond, recalculé le 25/08 : même rendu à l'œil,
     contraste mesurable.
     Mesuré dessus : l'encre à 11.86:1 (mieux qu'à 100 %, qui donnait 10.02:1),
     le bleu foncé à 9.37:1, et le VERT FONCÉ À 3.47:1 — celui-là ne passe donc
     qu'en grand texte, jamais en texte courant. Le bloc contre le fond de page
     ne fait que 1.48:1, et aucun seuil RGAA ne s'y applique : c'est un fond,
     pas une information. */
  --www-rose-bloc:   #FEBEED; /* --www-rose à 70 % sur --www-fond, en opaque */
  /* Ces quatre valeurs sont celles de la charte AU CARACTÈRE PRÈS. Elles ont été
     réalignées le 06/08 : le fichier portait #037B48, #EADF1A, #FBA7E7 et #5BCDF5,
     construits sur une autre source que le PDF de la charte. Comme ces quatre-là ne
     portent que des fonds et des accents, où aucun seuil de contraste ne s'applique,
     rien ne justifiait l'écart. Ne pas les « corriger » à nouveau : tout écart futur
     est une dérive, pas un arbitrage. */
  /* Le rouge de la charte, #F00000, est volontairement absent : 4.46:1 en bouton à
     texte blanc et 4.35:1 sur --www-fond, sous le seuil de 4.5:1 dans les deux cas ;
     et connotation erreur ou danger sur des boutons d'engagement. Décision du 24/07,
     prise alors sur la valeur #EC2D2D, issue de la même source erronée que les quatre
     écarts ci-dessus. La valeur était fausse, la conclusion tient. */

  /* ---- Nuances des couleurs principales ----
     Réponse à la demande de Lorène du 04/08. Chaque nuance est nommée par ce
     qu'elle a le DROIT de porter, jamais par un numéro : un jeton appelé
     « decor » ne se retrouve pas par accident sous un paragraphe, alors qu'un
     jeton appelé « bleu-400 » si. Même raisonnement que le filtre RGPD posé
     dans la vue SQL plutôt que dans le code.
     Les deux premières nuances de chaque famille sont calées exactement sur les
     seuils RGAA : ce sont les teintes LES PLUS CLAIRES encore conformes pour
     l'usage nommé. Ratios mesurés sur --www-fond.
     PROPOSÉES, PAS ENCORE EMPLOYÉES : Lorène pioche dedans, rien n'en dépend. */
  --www-bleu-texte:    #686DBF; /* 4.51:1 — texte courant, et tout usage plus permissif */
  --www-bleu-bordure:  #898ECC; /* 3.00:1 — gros texte (24px, ou 19px gras), bordures, icônes */
  --www-bleu-decor:    #BDBFE1; /* 1.75:1 — décor seul, jamais porteur d'information */
  --www-bleu-fond:     #E3E4F0; /* 1.23:1 — aplat de fond */
  --www-vert-texte:    #178556; /* 4.52:1 — texte courant, et tout usage plus permissif */
  --www-vert-bordure:  #4FA27F; /* 3.00:1 — gros texte, bordures, icônes */
  --www-vert-decor:    #BEDCCE; /* 1.43:1 — décor seul, jamais porteur d'information */
  --www-vert-fond:     #E3EFE8; /* 1.15:1 — aplat de fond */

  /* ---- Neutres ----
     Pas de blanc pur ni de noir pur à l'écran, le contraste maximal fatigue
     l'oeil en lecture longue. Recommandation Lorène, 27/07. */
  --www-fond:        #FCFCFA;
  --www-fond-alt:    #F2F1EC;
  --www-fond-bloc:   #F2F2EF; /* Retour Lorène du 04/08, valeurs retenues telles
     quelles. Fond des champs et des blocs encadrés au repos. Gris réchauffé,
     qui tire vers le beige pour s'accorder à --www-fond au lieu de jurer avec.
     Remplace #F0F0F0, neutre froid, lui-même successeur de #FEFEFC.
     RÉSERVE MAINTENUE, ET ELLE EST ASSUMÉE : l'écart avec le fond de page n'est
     que de 1.09:1, donc le bloc ne se distingue toujours pas par son fond. Mais
     Lorène a répondu à l'objection autrement, et mieux : elle a nettement
     renforcé la bordure, qui passe de 3.59:1 à 4.74:1 sur ce fond. La zone est
     donc délimitée par son contour, ce qui est le geste le plus lisible.
     Elle rappelle au passage, à juste titre, qu'aucun critère RGAA n'exige un
     contraste entre un bloc et son fond : c'est du confort, pas de la conformité. */
  --www-fond-bloc-actif: #E3E3DE; /* Retour Lorène du 04/08. Fond d'un champ
     survolé ou en cours de saisie. Écart de 1.15:1 avec l'état de repos, doublé
     d'un changement de bordure : le passage se voit sans reposer sur la couleur
     seule. Sert de repère « je suis ici » à la souris, là où l'outline de focus
     ne suffit pas — il ne se déclenche pas au clic sur un select. */
  --www-damier:      #D5D3CC; /* Case foncée du damier des vignettes du kit,
     dont la case claire est --www-fond. Posée le 27/08 avec les logos à fond
     transparent de Barbara. Le damier employait jusque-là --www-fond-alt, à
     1.13:1 du blanc : suffisant pour un visuel coloré, INVISIBLE pour un logo
     blanc, qui est l'un des sept. Une vignette invisible est pire que pas de
     vignette, elle dit que le fichier est vide.
     LA SEULE CONTRAINTE MESURABLE EST LE BLANC, et il a fallu se tromper une
     fois pour le voir. Le premier raisonnement disait qu'un damier plus foncé
     effacerait le rose de la charte, et les chiffres semblaient le confirmer
     (1.20:1 ici, 1.04:1 sur #C8C5BC). Ils mesuraient le rose contre la seule
     case foncée. Or un damier a DEUX cases : le rose ressort sur la claire,
     qui est --www-fond et ne bouge jamais — 1.75:1, quel que soit le gris
     retenu ici. Le compromis qu'on croyait arbitrer n'existait pas.
     Ce qui reste vrai : le blanc, lui, ne se détache que sur la case foncée,
     et c'est ce que la gate tient (1.50:1 à cette valeur, minimum 1.40). Le
     choix entre 1.50 et 2.50 est un jugement de rendu — un damier sombre
     domine le visuel qu'il porte — et il appartient à la créa.
     Aucun seuil RGAA n'est en jeu : ces vignettes sont décoratives (alt=""),
     le nom du fichier est déjà dans le lien à côté. */
  --www-encre:       #16161A;
  --www-encre-doux:  #4A4A52;
  --www-bordure:     #6E6B65; /* Retour Lorène du 04/08, valeur retenue telle
     quelle. Bordure des champs, des blocs et des fieldsets au repos.
     Conforme sur les QUATRE fonds, avec une marge confortable cette fois :
     5.17:1 sur --www-fond, 4.70:1 sur --www-fond-alt, 4.74:1 sur --www-fond-bloc,
     4.12:1 sur l'état actif. Aucun fond n'est interdit, il n'y a rien à retenir.
     Ses chiffres annoncés (4.15:1) sont exacts : elle mesure contre le fond le
     plus sombre, ce qui est la bonne méthode. */
  --www-bordure-forte: #5C5850; /* Retour Lorène du 04/08. Bordure d'un champ
     survolé ou en cours de saisie. De 5.50:1 à 6.89:1 selon le fond.
     Nommée « forte » et non « focus » : le survol l'emploie aussi. */

  /* ---- États ---- */
  --www-succes:      #007C49; /* le vert de la charte, aligné avec --www-vert-fonce */
  --www-erreur:      #9A1B1B; /* réservé aux messages d'erreur de formulaire,
                                 jamais comme couleur de marque */
  --www-focus:       #000995;
  --www-focus-epaisseur: 3px; /* épaisseur de l'indicateur de focus, RGAA */
  --www-focus-decalage:  2px;

  /* ---- Typographie ----
     Arbitrage de Lorène du 04/08 : Jean-Luc pour les titres, Montserrat pour le
     corps, Decoy écartée parce qu'elle suppose un abonnement Adobe actif — un
     fichier que personne ne peut plus ouvrir dans deux ans.
     Les deux polices sont AUTO-HÉBERGÉES, jamais servies depuis Google : une
     requête vers un tiers à chaque visite n'est déclarée nulle part sur la page
     données personnelles, et n'a pas à l'être puisqu'on peut s'en passer.
     Déclarations @font-face en bas de ce fichier. */
  --www-font-titre: "Jean-Luc", Georgia, serif;
  --www-font-corps: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Fraunces remplace la Decoy, écartée le 07/08 pour sa dépendance à un
     abonnement Adobe. Un seul emploi : la citation sous le titre de l'accueil. */
  --www-font-citation: "Fraunces", Georgia, "Times New Roman", serif;

  /* Échelle typographique, base 16px, ratio 1.25.
     ÉTENDUE PAR LE HAUT LE 25/08, PAS REMPLACÉE. Lorène a spécifié le 21/08 des
     titres à 61 / 49 / 39 px là où l'échelle s'arrêtait à 39. Deux crans
     s'ajoutent donc au-dessus, et les titres montent de deux rangs : le 39 px
     qui portait h1 porte maintenant h3, à la valeur près. Rien de ce qui
     employait déjà lg, xl ou 2xl ne bouge, et la planche d'échantillons reste
     lisible d'un cran à l'autre.
     TOUT EST EN REM ET JAMAIS EN PX : une taille en pixels ignore la préférence
     de taille de police du navigateur, ce qui est un défaut d'accessibilité et
     pas un détail — c'est le premier réglage qu'utilise quelqu'un qui voit mal. */
  --www-t-xs:   0.8rem;
  --www-t-sm:   0.9rem;
  --www-t-base: 1rem;      /* 16px — corps de texte, spec Lorène du 21/08 */
  --www-t-md:   1.25rem;   /* 20px — boutons, menu, pied de page, liens autonomes */
  --www-t-citation: 1.875rem; /* 30px — Fraunces, la citation sous le titre d'accueil */
  --www-t-lg:   1.563rem;  /* 25px */
  --www-t-xl:   1.953rem;  /* 31px */
  --www-t-2xl:  2.441rem;  /* 39px — plancher de h1 sur mobile, cible de h3 */
  --www-t-3xl:  3.063rem;  /* 49px — h2 au-delà de 1200px */
  --www-t-4xl:  3.813rem;  /* 61px — h1 au-delà de 1200px */

  --www-lh-serre:  1.2;
  --www-lh-normal: 1.6;

  /* ---- Espacements, base 4px ---- */
  --www-e-1: 0.25rem;
  --www-e-2: 0.5rem;
  --www-e-3: 0.75rem;
  --www-e-4: 1rem;
  --www-e-6: 1.5rem;
  --www-e-8: 2rem;
  --www-e-12: 3rem;
  --www-e-16: 4rem;
  /* Ajouté le 08/09 pour le padding droit du bloc rose : l'échelle s'arrêtait
     à 4rem, et doubler ce dernier cran est plus juste qu'une valeur isolée. */
  --www-e-32: 8rem;

  /* ---- Rayons et ombres ---- */
  --www-rayon-sm: 4px;
  --www-rayon-md: 8px;
  --www-rayon-pill: 999px;
  --www-ombre: 0 1px 3px rgba(22, 22, 26, 0.10), 0 4px 12px rgba(22, 22, 26, 0.06);

  /* ---- Divers ---- */
  --www-largeur-texte: 68ch;
  --www-largeur-page: 1120px;
  --www-cible-tactile: 44px; /* taille minimale d'une zone cliquable, RGAA */
}

/* =========================================================
   Polices
   Auto-hébergées dans styles/polices/. Voir le README de ce dossier pour les
   contraintes de licence, qui ne sont pas les mêmes pour les deux familles.
   font-display: swap — le texte s'affiche immédiatement dans la police de
   secours puis bascule. Sans lui, un réseau lent laisse une page blanche.
   ========================================================= */

/* Jean-Luc n'existe qu'en deux graisses, Thin et Bold. Elles sont déclarées
   sous une seule famille avec leur graisse réelle, pour que le navigateur
   choisisse le bon fichier au lieu d'en épaissir un artificiellement.
   Seul le .woff fourni par la fonderie est servi : la licence autorise le web
   avec les fichiers qu'ELLE fournit, et interdit toute modification — donc pas
   de conversion en .woff2, même si elle serait plus légère. */
@font-face {
  font-family: "Jean-Luc";
  src: url("/styles/polices/jeanlucweb-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jean-Luc";
  src: url("/styles/polices/jeanlucweb-thin.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/*
The Jean-Luc typeface was designed and made by Atelier Carvalho Bernau on the occasion of the 80th birthday of Jean-Luc Godard. It is available free of charge from http://www.carvalho-bernau.com/jlg/

Jean-Luc typeface Copyright (c) 2010 Atelier Carvalho Bernau
*/
/* ^ Ce commentaire n'est pas décoratif : la licence EXIGE qu'il figure dans le
   code source immédiatement sous le bloc @font-face. Ne pas le déplacer, ne pas
   le supprimer, ne pas le reformuler. */

/* Montserrat, fichier variable couvrant 400 à 700 en un seul chargement de
   35 Ko. Sous-ensemble latin uniquement : le cyrillique et le vietnamien que
   sert Google par défaut tripleraient le poids pour un site en français.
   Licence SIL Open Font, qui autorise explicitement l'auto-hébergement. */
@font-face {
  font-family: "Montserrat";
  src: url("/styles/polices/montserrat-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Fraunces SemiBold, instance statique, sous-ensemble latin étendu, 17 Ko.
   Licence SIL Open Font, qui autorise l'auto-hébergement : contrairement à
   Jean-Luc, le sous-ensemble et la conversion en woff2 sont permis, et
   contrairement à la Decoy qu'elle remplace, elle ne dépend d'aucun abonnement.
   Copyright 2020 The Fraunces Project Authors (github.com/undercasetype/Fraunces)
   « Google Font » ne veut pas dire « servie par Google » : le fichier a été
   récupéré une fois et vit ici. Aucune page n'appelle fonts.googleapis.com, et
   c'est ce que la page données personnelles promet. */
@font-face {
  font-family: "Fraunces";
  src: url("/styles/polices/fraunces-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   Base
   ========================================================= */

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

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

body {
  margin: 0;
  background: var(--www-fond);
  color: var(--www-encre);
  font-family: var(--www-font-corps);
  font-size: var(--www-t-base);
  line-height: var(--www-lh-normal);
}

/* Graisse 200, le Thin : arbitrage de Lorène confirmé par mail le 06/08, « elle
   est déjà très présente visuellement, pas besoin d'alourdir ». Sans cette
   ligne le navigateur applique le gras par défaut des titres et sert le Bold.
   Le Bold reste déclaré plus bas — il n'est pas téléchargé tant qu'aucune règle
   ne le demande, et la déclaration documente la police telle que la fonderie la
   fournit. Aucun effet sur le contraste : c'est la même couleur, et les trois
   niveaux font 25px et plus, donc du grand texte au sens RGAA quelle que soit
   la graisse. */
/* LES TITRES SONT VERTS DEPUIS LE 01/09, ET C'EST LA QUESTION DU 11/08 QUI SE
   FERME. Lorène posait ce jour-là que le bleu soit réservé aux éléments
   interactifs — liens, bouton primaire, focus — et la note d'alors disait que
   ça ne coûtait qu'une chose, les titres, mais que c'était un changement
   d'identité sur tout le site, à trancher explicitement plutôt qu'à laisser
   glisser. Sa spec du 01/09 le tranche : « pour les titres j'ai utilisé le
   vert : --www-vert-texte ». Le cran « texte » de la famille verte, donc
   conforme par construction — 4,52:1 sur le fond de page, et les trois niveaux
   font 25px et plus, donc du grand texte au sens RGAA de toute façon.
   Les blocs qui posent un aplat gardent leur propre couleur de titre, plus bas :
   le vert ne tient pas sur le rose (3,05:1) et n'aurait aucun sens sur le vert. */
h1, h2, h3 {
  font-family: var(--www-font-titre);
  font-weight: 200;
  line-height: var(--www-lh-serre);
  color: var(--www-vert-texte);
  margin: 0 0 var(--www-e-4);
}

/* TOUT CONTENEUR QUI POSE UN APLAT GARDE LE TITRE BLEU, ET CETTE RÈGLE EST CE
   QUI REND LE PASSAGE AU VERT TENABLE. Le bandeau de page est en bleu clair et
   porte le h1 de QUINZE pages : le vert y donne 2,57:1, sous le seuil de 3:1
   d'un grand texte, donc une régression d'accessibilité sur presque tout le
   site — et aucune gate ne peut la voir, puisque rien ne casse et qu'aucune
   valeur n'est en dur. Le bleu foncé y donne 7,89:1.
   Le pied n'a aujourd'hui aucun titre : il est dans la liste pour que celui
   qu'on y posera un jour naisse conforme, plutôt que de dépendre de quelqu'un
   qui repense à mesurer. Les messages sont là pour une autre raison — leur h2
   fait 20px, donc du texte courant au sens RGAA, seuil 4,5:1, que le vert
   raterait à 4,18:1 quand le bleu donne 12,86:1.
   Les blocs de contenu ont leurs propres overrides plus bas. */
.www-bandeau :is(h1, h2, h3),
.www-pied :is(h1, h2, h3),
.www-message :is(h1, h2, h3) { color: var(--www-bleu-fonce); }

/* LES TROIS TAILLES SONT FLUIDES, ET C'EST UNE DÉCISION PRISE EN L'ABSENCE DE
   LORÈNE, À LUI SOUMETTRE. Sa spec du 21/08 donne 61 / 49 / 39 px, mais ce sont
   des valeurs de maquette desktop : elle a dessiné des écrans mobiles sans
   donner d'échelle mobile. Un h1 à 61 px sur un écran de 375 px déborde, et
   Jean-Luc est une capitale condensée, donc le problème est de hauteur autant
   que de largeur.
   Chaque titre part donc du cran qu'il occupait avant (39 / 31 / 25 px) et
   atteint la valeur de Lorène vers 1200 px de large. Les bornes sont ses
   valeurs à elle, l'interpolation est de nous.
   POURQUOI clamp() ET PAS UN POINT DE RUPTURE : une taille en vw pure casse le
   zoom du navigateur, ce que le RGAA interdit. Le terme central garde une part
   en rem, donc le zoom continue d'agir, et les deux bornes sont en rem elles
   aussi. Vérifié : à 200 % de zoom les titres grandissent bien.
   Aucun ratio de contraste ne bouge : c'est la même couleur, et même au
   plancher les trois niveaux dépassent 24 px, donc restent du grand texte au
   sens RGAA. */
h1 { font-size: clamp(var(--www-t-2xl), 1.8125rem + 2.67vw, var(--www-t-4xl)); }
h2 { font-size: clamp(var(--www-t-xl),  1.4490rem + 2.15vw, var(--www-t-3xl)); }
h3 { font-size: clamp(var(--www-t-lg),  1.1650rem + 1.70vw, var(--www-t-2xl)); }

/* La citation de l'accueil. Un texte, pas un titre : Lorène a levé
   l'ambiguïté elle-même le 21/08, ses 30 px sont SOUS les trois niveaux de
   titre parce que ce bloc n'en est pas un. D'où une classe et pas un h4. */
/* LA CITATION EST EN BLEU PICTO, PAS EN VERT COMME LES TITRES. Spec de Lorène
   du 01/09 : « les titres avec la fausse Decoy (Fraunces) […] sont en
   --www-bleu-picto ». Ce jeton est nommé par son usage — éléments graphiques
   secondaires — et c'est exactement ce registre-là : la citation n'est pas un
   titre, elle accompagne. Mesuré 16,11:1 sur le fond de page et 10,88:1 sur le
   rose des blocs, les deux fonds où elle est posée aujourd'hui. */
.www-citation {
  color: var(--www-bleu-picto);
  font-family: var(--www-font-citation);
  font-weight: 600;
  font-size: var(--www-t-citation);
  line-height: var(--www-lh-serre);
  max-width: var(--www-largeur-texte);
  margin: 0 0 var(--www-e-6);
}

/* FRAUNCES EN SECOND REGISTRE, SOUS UN TITRE DE SECTION. Lorène l'appelle
   « fausse decoy » dans sa spec du 01/09 : la Decoy porte l'identité de la
   marque mais elle est écartée de l'interface depuis le 07/08 (licence liée à
   un abonnement Adobe actif, rendu web non garanti), et Fraunces la remplace.
   POURQUOI UN CRAN ET PAS LA CITATION TELLE QUELLE : la citation d'accueil fait
   30 px sous un h1 qui monte à 61, soit un rapport d'environ un demi. Sous un
   h3 qui monte à 39, la même proportion donne 20 px. Reprendre les 30 px ferait
   un texte d'accompagnement presque aussi gros que le titre qu'il accompagne.
   Mesuré sur les fonds où elle est employée : l'encre donne 9,99:1 sur le bloc
   ciel et 11,86:1 sur le bloc rose. */
.www-citation--sous-titre {
  font-size: var(--www-t-md);
  margin-bottom: var(--www-e-4);
}

p { margin: 0 0 var(--www-e-4); max-width: var(--www-largeur-texte); }

/* Les liens restent BLEUS ET SOULIGNÉS, jamais distingués par la seule couleur :
   règle RGAA, et Lorène l'a reconfirmée le 21/08. */
a { color: var(--www-bleu-fonce); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Un lien autonome : menu, pied de page, ou lien isolé qui n'est pas dans une
   phrase. 20 px, comme les boutons. Dans un paragraphe, un lien hérite des
   16 px du corps, et c'est voulu. */
/* LE MENU N'EST PAS SOULIGNÉ AU REPOS, ET IL LE REDEVIENT AU SURVOL.
   Spec de Lorène du 02/09 (« 20px semi-bold non souligné », header et pied).
   POURQUOI ÇA NE CASSE PAS LA RÈGLE DU 21/08 (« liens bleus ET soulignés,
   jamais la couleur seule ») : cette règle vient du RGAA 10.6, qui vise les
   liens NOYÉS DANS UN TEXTE, où rien d'autre ne signale qu'on peut cliquer.
   Dans un menu, la nature du lien est donnée par le contexte — c'est un bloc
   de navigation, tout y est cliquable. Le soulignement au survol et au focus
   est conservé par prudence : il ne coûte rien et il rend l'état actif
   lisible sans dépendre de la couleur. */
.www-lien-nav { font-size: var(--www-t-md); font-weight: 600; text-decoration: none; }
.www-lien-nav:hover,
.www-lien-nav:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; }

/* Focus visible et généreux, sur tous les éléments interactifs.
   Ne jamais supprimer cet outline sans le remplacer par un équivalent. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--www-focus-epaisseur) solid var(--www-focus);
  outline-offset: var(--www-focus-decalage);
  border-radius: var(--www-rayon-sm);
}

/* Lien d'évitement, obligatoire RGAA */
.www-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--www-bleu-fonce);
  color: #fff;
  padding: var(--www-e-3) var(--www-e-4);
  z-index: 100;
}
.www-skip:focus { left: 0; }

/* =========================================================
   Mise en page
   ========================================================= */

.www-page { max-width: var(--www-largeur-page); margin: 0 auto; padding: var(--www-e-6) var(--www-e-4) var(--www-e-16); }
.www-etroit { max-width: 720px; }
.www-bandeau { background: var(--www-bleu-clair); padding: var(--www-e-12) var(--www-e-4); }
.www-carte {
  background: var(--www-fond-bloc);
  border: 1px solid var(--www-bordure);
  border-radius: var(--www-rayon-md);
  padding: var(--www-e-6);
  box-shadow: var(--www-ombre);
}

/* =========================================================
   Boutons
   ========================================================= */

.www-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--www-e-2);
  min-height: var(--www-cible-tactile);
  padding: var(--www-e-3) var(--www-e-6);
  font-family: var(--www-font-corps);
  /* 20 px SemiBold, spec de Lorène du 21/08, confirmée le lendemain : les 20 px
     valent pour les boutons, le menu, le pied de page et les liens autonomes.
     Un lien AU MILIEU D'UN PARAGRAPHE reste à 16 px, sinon il ferait une bosse
     dans la ligne — c'est pour ça que la règle vit ici et sur .www-lien-nav, et
     pas sur le sélecteur « a » global. */
  font-size: var(--www-t-md);
  font-weight: 600;
  border-radius: var(--www-rayon-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
}

/* Le survol ne peut pas reposer sur le seul changement de bleu : mesuré, l'écart
   entre --www-bleu-fonce et --www-bleu-survol n'est que de 1.16:1, donc invisible.
   Lorène l'a signalé le 03/08 et proposait une animation. Une animation ne suffit
   pas : elle n'existe pas au doigt, or le 13 octobre le trafic sera très mobile,
   et prefers-reduced-motion la neutralise à juste titre pour qui la désactive.
   On révèle donc l'anneau de 2px déjà réservé en transparent sur .www-btn. C'est
   un changement de couleur, pas de mouvement : il survit aux deux cas, et ne
   décale rien puisque la bordure existe déjà, elle était seulement invisible. */
.www-btn--primaire { background: var(--www-bleu-fonce); color: #fff; }
.www-btn--primaire:hover {
  background: var(--www-bleu-survol);
  border-color: var(--www-bleu-clair); /* 9.16:1 sur le bleu de survol */
}

.www-btn--secondaire { background: transparent; color: var(--www-bleu-fonce); border-color: var(--www-bleu-fonce); }
.www-btn--secondaire:hover {
  background: var(--www-voile-bleu);
  box-shadow: inset 0 0 0 1px var(--www-bleu-fonce); /* épaissit sans décaler */
}

.www-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* =========================================================
   Formulaires
   ========================================================= */

.www-champ { margin-bottom: var(--www-e-6); max-width: 34rem; }

.www-label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--www-e-2);
}

.www-aide {
  display: block;
  font-size: var(--www-t-sm);
  color: var(--www-encre-doux);
  margin-bottom: var(--www-e-2);
}

.www-input, .www-select, .www-textarea {
  width: 100%;
  min-height: var(--www-cible-tactile);
  padding: var(--www-e-3);
  font-family: inherit;
  font-size: var(--www-t-base);
  color: var(--www-encre);
  background: var(--www-fond-bloc);
  border: 2px solid var(--www-bordure);
  border-radius: var(--www-rayon-sm);
}
.www-textarea { min-height: 7rem; resize: vertical; }

/* Survol et saisie partagent le même renforcement. Lorène décrivait le second
   état comme « actif (clic/focus) » le 03/08 puis comme « survol » le 04/08 :
   les deux sont traités pareil, ce qui est le plus simple à tenir et évite un
   troisième palier de gris. Le focus reste distingué par l'outline bleu posé
   par la règle globale, qui est l'indicateur exigé par le RGAA. */
.www-input:hover, .www-select:hover, .www-textarea:hover,
.www-input:focus, .www-select:focus, .www-textarea:focus {
  background: var(--www-fond-bloc-actif);
  border-color: var(--www-bordure-forte);
}

/* La saisie ajoute un signal de plus : la bordure paraît épaissie d'1px.
   L'épaisseur est SIMULÉE par une ombre interne, jamais par border-width, qui
   décalerait la mise en page à chaque clic dans un champ. Lorène a validé le
   procédé le 04/08 — « c'est souvent plus propre techniquement ».
   :focus et non :focus-visible, délibérément — au clic souris sur un select,
   :focus-visible ne se déclenche pas, et c'est précisément le trou signalé. */
.www-input:focus, .www-select:focus, .www-textarea:focus {
  box-shadow: inset 0 0 0 1px var(--www-bordure-forte);
}

/* L'erreur n'est jamais signalée par la couleur seule :
   bordure épaisse + message texte + aria-invalid. RGAA. */
.www-input[aria-invalid="true"],
.www-select[aria-invalid="true"],
.www-textarea[aria-invalid="true"] {
  border-color: var(--www-erreur);
  border-width: 3px;
}

.www-erreur-champ {
  display: block;
  margin-top: var(--www-e-2);
  color: var(--www-erreur);
  font-size: var(--www-t-sm);
  font-weight: 600;
}

.www-fieldset {
  border: 1px solid var(--www-bordure);
  border-radius: var(--www-rayon-md);
  padding: var(--www-e-4) var(--www-e-4) var(--www-e-2);
  margin: 0 0 var(--www-e-6);
}
.www-legend { font-weight: 700; padding: 0 var(--www-e-2); color: var(--www-bleu-fonce); }

/* SOUS-GROUPE DE QUESTIONS À L'INTÉRIEUR D'UN .www-fieldset. Il existe parce
   que les questionnaires d'individus (6.2 bénévoles, 3.2 Men) posent des
   questions à réponses multiples : un groupe de cases a besoin de son propre
   <fieldset> et de sa propre <legend> pour que le lecteur d'écran annonce à
   quoi les cases se rapportent — sans ça, onze cases s'énoncent sans jamais
   dire qu'elles répondent toutes à « votre niveau de responsabilité ».
   IL A ÉTÉ ÉCRIT LE 28/08 PARCE QUE LA CLASSE ÉTAIT EMPLOYÉE SANS EXISTER :
   benevole.html s'en sert depuis le 27/08, tokens.css ne la portait pas, donc
   ces trois groupes s'affichaient avec la bordure et les marges par défaut du
   navigateur — hors du design system, et invisible à toute revue de couleurs
   puisqu'aucune valeur n'était en dur nulle part. Une classe sans règle ne
   fait pas d'erreur, elle ne fait rien : c'est la famille de défauts des
   icônes invisibles du 26/08, où le balisage et la feuille de style ne se
   tenaient plus par leur nom.
   PAS DE BORDURE COMPLÈTE, pour ne pas emboîter deux cadres identiques : un
   filet à gauche suffit à rattacher le groupe à ce qui le précède. */
.www-groupe {
  border: 0;
  border-left: 3px solid var(--www-bordure);
  padding: 0 0 0 var(--www-e-4);
  margin: 0 0 var(--www-e-6);
}
.www-groupe > legend {
  font-weight: 600;
  padding: 0;
  color: var(--www-bleu-fonce);
  margin-bottom: var(--www-e-2);
}

.www-case { display: flex; gap: var(--www-e-3); align-items: flex-start; margin-bottom: var(--www-e-4); max-width: var(--www-largeur-texte); }
.www-case input[type="checkbox"] { width: 1.35rem; height: 1.35rem; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--www-bleu-fonce); }
.www-case label { font-size: var(--www-t-sm); }

.www-obligatoire { color: var(--www-erreur); font-weight: 700; }

/* =========================================================
   Messages
   ========================================================= */

.www-message {
  border-left: 6px solid;
  border-radius: var(--www-rayon-sm);
  padding: var(--www-e-4);
  margin-bottom: var(--www-e-6);
}
.www-message--succes { border-color: var(--www-succes); background: #EAF6F0; }
.www-message--erreur { border-color: var(--www-erreur); background: #FBEDED; }
.www-message h2 { font-size: var(--www-t-md); margin-bottom: var(--www-e-2); }
.www-message p:last-child { margin-bottom: 0; }

/* Signale ce que l'association doit encore fournir. Vivait en double, copié à
   l'identique dans collectivite.html et donnees-personnelles.html, au motif
   qu'une absence d'étape de build interdirait le partage entre pages. Le motif
   était faux : tokens.css est déjà chargé par toutes les pages, c'est
   exactement le partage qui manquait. Une troisième copie était sur le point
   d'être écrite pour /carte, d'où la remontée ici.
   Toujours doublé d'un mot, jamais signalé par la seule couleur, RGAA. */
.www-attente {
  border-left: 6px solid var(--www-erreur);
  background: var(--www-fond-alt);
  border-radius: var(--www-rayon-sm);
  padding: var(--www-e-3) var(--www-e-4);
  margin: 0 0 var(--www-e-6);
  max-width: var(--www-largeur-texte);
}
.www-attente p { margin: 0; font-size: var(--www-t-sm); }
.www-attente-titre {
  display: block;
  font-weight: 700;
  color: var(--www-erreur);
  font-size: var(--www-t-sm);
  margin-bottom: var(--www-e-1);
}

/* =========================================================
   Blocs de l'accueil
   =========================================================
   Nés de la maquette d'accueil de Lorène du 26/08. Ils vivent ici et pas dans
   la page, comme tout le reste : une valeur en dur dans un fichier HTML est une
   valeur que personne ne retrouve le jour où la charte bouge.

   LES FONDS SONT DES JETONS OPAQUES, JAMAIS DES OPACITÉS. C'est la décision du
   25/08 sur --www-rose-bloc, et elle vaut pour tous : un fond en opacité rend
   le contraste dépendant de ce qu'il y a derrière, donc incalculable, donc
   invérifiable. Chaque combinaison ci-dessous a été mesurée sur la maquette :
   rose 9,37:1 en bleu foncé et 11,86:1 en encre, vert 5,28:1 en blanc, ciel
   7,89:1 en bleu foncé. Le seul chiffre serré est le titre jaune sur vert à
   4,05:1, conforme en GRAND TEXTE seulement — d'où .www-bloc--vert h2 qui
   reste un h2, donc bien au-dessus de 24px à toutes les tailles d'écran. */

.www-bloc {
  border-radius: var(--www-rayon-md);
  padding: var(--www-e-8);
  margin-bottom: var(--www-e-12);
}
.www-bloc > :last-child { margin-bottom: 0; }
/* LES OVERRIDES PORTENT SUR LES TROIS NIVEAUX ET PAS SUR h2 SEUL. Ils ne
   visaient que h2 tant que la couleur de base était le bleu foncé, qui tenait
   partout ; depuis que la base est verte, un h1 ou un h3 oublié dans un bloc
   prendrait le vert sur un aplat où il ne tient pas — 3,05:1 sur le rose. Le
   défaut serait silencieux : rien ne casse, le texte pâlit. */
/* LE BLOC ROSE PREND LA LARGEUR DE LA PAGE, ARBITRAGE DE LORÈNE DU 07/09.
   Le matin même il avait été BORNÉ à la largeur du texte pour régler le défaut
   qu'elle signalait — les titres n'ont aucune borne et remplissaient la page
   quand les paragraphes s'arrêtaient à --www-largeur-texte, donc le titre était
   plus large que le texte et le cadre gardait un tiers vide à droite. Le bornage
   réglait ça, au prix qui avait été annoncé : « le cadre devient plus étroit que
   les cartes qui le suivent ». Elle répond que c'est ce prix qui gêne — « ils
   sont actuellement plus étroits que le contenu global, ce qui déséquilibre la
   lecture sur la version ordinateur » — et donne une capture d'écran en
   référence. Le bloc reprend donc la largeur de la page, et le texte qu'il
   contient perd son bornage inline pour que titre et paragraphes s'alignent :
   c'est ce que sa capture montre, et c'est l'autre façon de fermer le défaut
   d'origine.
   CE QUE ÇA COÛTE, MESURÉ ET DIT À LORÈNE : sur une page de 1120 px, le texte
   du bloc dispose de 1024 px, soit environ 126 caractères par ligne en
   Montserrat 16 px. Sa capture est prise sur une fenêtre plus étroite, où la
   même ligne fait environ 85 caractères. C'est un jugement de rendu qui lui
   appartient ; le chiffre est ici pour qu'il ne se redécouvre pas.
   POURQUOI PAS BORNER LES TITRES, question déjà tranchée le matin et gardée
   parce qu'elle resservira : --www-largeur-texte est en `ch`, une unité relative
   à la police de l'élément — 68ch de Montserrat 16 px font environ 730 px, 68ch
   de Jean-Luc à 49 px en font plus du double. La même valeur ne borne pas deux
   éléments à la même largeur, et c'est mesuré au rendu, pas supposé. */
.www-bloc--rose { background: var(--www-rose-bloc); }
/* ET LE TEXTE DU BLOC SUIT, SANS QUOI LE CADRE S'ÉLARGIT ET LE DÉFAUT REVIENT.
   La règle de base `p` borne TOUS les paragraphes du site à --www-largeur-texte ;
   sans cette exception, élargir le bloc rendrait simplement au titre les 1024 px
   que le paragraphe n'a pas, c'est-à-dire le défaut d'origine en plus large.
   Le bornage inline que les onze pages portaient a été retiré dans le même
   geste : une valeur inline l'emporte sur une classe, elle aurait annulé cette
   ligne sans rien dire. */
.www-bloc--rose p { max-width: none; }
/* LE TEXTE DU BLOC ROSE SE RACCOURCIT PAR LA DROITE, ARBITRAGE DE LORÈNE DU
   08/09, ET C'EST LA QUATRIÈME POSITION SUR CETTE QUESTION EN VINGT-QUATRE
   HEURES : borner le bloc le 07/09 au matin, le déborner le 07/09 à 15h parce
   que le cadre devenait plus étroit que les cartes, et maintenant garder le
   cadre pleine largeur en poussant le texte par un padding asymétrique. Elle
   écrit « après ça, on ne bougera plus le cadre ».
   POURQUOI UN PADDING ET PAS UN max-width SUR LE TEXTE : le fond doit garder
   toute la largeur, et --www-largeur-texte est en `ch`, une unité relative à la
   police de l'élément — la même valeur ne borne donc pas un titre en Jean-Luc
   49 px et un paragraphe en Montserrat 16 px à la même largeur. Un padding agit
   sur le conteneur, donc sur les deux à la fois.
   LE SEUIL EST CELUI DU PROJET, ET C'EST SA DEMANDE : sous 40rem le bloc garde
   son padding de 2rem, le mobile n'est pas touché. Les valeurs viennent de sa
   capture (48 px à gauche, 122 px à droite) ; 8rem vaut 128 px, et elle écrit
   que le pixel exact n'a pas d'importance. */
@media (min-width: 40rem) {
  .www-bloc--rose { padding-left: var(--www-e-12); padding-right: var(--www-e-32); }
}
.www-bloc--rose :is(h1, h2, h3) { color: var(--www-bleu-fonce); }
/* LE CHAPÔ D'UN BLOC ROSE EST EN SEMI-BOLD, PARTOUT, PAR UNE CLASSE. Lorène le
   demande le 03/09 (« uniformément en semi-bold ») après l'avoir constaté sur
   certaines pages seulement : cinq landings portaient font-weight:600 en style
   inline, l'accueil rien. Cinq copies d'une règle finissent par diverger, et
   elles avaient déjà divergé. La graisse vit ici, les pages ne portent que le
   nom. C'est la leçon de CHAMPS_BOOLEENS appliquée à une feuille de style,
   comme pour .www-picto le 02/09. */
.www-chapo { font-weight: 600; }
.www-bloc--vert { background: var(--www-vert-fonce); color: #fff; }
.www-bloc--vert :is(h1, h2, h3) { color: var(--www-jaune); }

/* LE CADRE REMPLACE L'APLAT CIEL, ET C'EST UNE CORRECTION DE LORÈNE DU 01/09 :
   « c'est juste la bordure en bleu clair (de 4 px) et non tout le fond en bleu,
   comme pour le compteur de la homepage ». Son argument est un argument de
   contraste, et il est juste : un lien bleu sur un aplat ciel se lit mal, là
   où le même lien sur le fond de page donne 13,88:1.
   Il n'y a donc plus qu'UN cadre, celui des compteurs, et les blocs qui
   portaient .www-bloc--ciel le prennent. Deux composants qui dessinent la même
   chose finissent par diverger — c'est la leçon de CHAMPS_BOOLEENS appliquée à
   une feuille de style.
   La bordure passe de 2 à 4 px, la valeur de sa spec. Ce n'est pas un aplat,
   donc aucun seuil de contraste ne s'applique au trait lui-même — il ne porte
   aucune information que le texte ne porte pas déjà. */
.www-bloc--cadre {
  background: var(--www-fond);
  border: 4px solid var(--www-bleu-clair);
}

/* Le bloc des réseaux sociaux, un cadre dont le titre passe en bleu picto —
   « le titre (réseaux sociaux) : "Donner de la force au mouvement" est en
   --www-bleu-picto », spec du 01/09. Même registre que la citation : ce titre
   annonce des pictogrammes. Mesuré 16,11:1 sur le fond de page. */
.www-bloc--reseaux :is(h1, h2, h3) { color: var(--www-bleu-picto); }

/* LE BLOC REDEVIENT UN APLAT CIEL, ET LES DEUX MOITIÉS VONT ENSEMBLE.
   Retour en arrière demandé par Lorène le 02/09 : « dans la maquette il y a le
   fond bleu clair, il est différent des blocs explicatifs, la première version
   était la bonne ». Le passage en cadre du 01/09 valait pour les blocs
   explicatifs, pas pour celui-ci.
   CE QUI SE CHANGE AVEC, ET SANS QUOI LE DÉFAUT DU 26/08 REVIENDRAIT : le
   disque de survol des icônes était passé au bleu clair le 01/09, précisément
   parce que le bloc était devenu un cadre posé sur le fond de page. Le remettre
   en ciel sans toucher au disque le rendrait invisible sur son propre fond.
   Il repasse donc au fond de page, ce qu'il était avant le 01/09.
   MESURÉ, ET C'EST SYMÉTRIQUE : le disque contre son bloc donne 1,76:1 dans un
   sens comme dans l'autre — disque ciel sur cadre clair hier, disque clair sur
   bloc ciel aujourd'hui. Rien ne se dégrade. Le glyphe, lui, reste à 7,89:1 sur
   le ciel et 13,88:1 sur le disque, donc l'icône est lisible avec ou sans
   survol : le disque renforce, il ne porte pas la lisibilité. */
.www-bloc--reseaux { background: var(--www-bleu-clair); border: 0; }

/* Le pictogramme d'un bloc : même famille que les icônes de réseaux, mais sans
   cible tactile ni survol — il n'est pas cliquable, il illustre. Sa couleur
   vient de www-icone-plein, sa taille d'ici. */
.www-picto { width: 48px; height: 48px; display: block; margin-bottom: var(--www-e-3); }
/* LE PICTO EST EN VERT ET À DROITE, ARBITRAGE DE LORÈNE DU 02/09 : elle
   l'avait posé en --www-vert-texte « pour plus d'harmonie » avec le titre du
   bloc, et à droite du texte. J'avais lu sa spec de la veille (« bleu-picto le
   bleu pour les pictos ») comme une règle générale ; c'en est une, mais elle
   garde la main sur les exceptions de sa maquette.
   MESURÉ AVANT DE SUIVRE : le vert texte sur le fond alterné donne 4,10:1, au-
   dessus du seuil de 3:1 d'un composant d'interface. Conforme, avec de la
   marge. C'est le même chiffre que le titre du bloc, ce qui est cohérent :
   l'harmonie qu'elle cherche est aussi une harmonie de contraste.
   LE FLOTTEMENT TOMBE SOUS 640px : à droite d'un texte étroit, le picto
   écraserait les lignes en colonnes de quelques mots. Il repasse au-dessus,
   comme il l'était ce matin. */
/* LE FLOTTEMENT VAUT POUR LES TROIS BLOCS, pas pour le seul bloc newsletter :
   la banque d'icônes du 02/09 pose un picto à droite dans chacun. Écrit une
   fois sur .www-picto plutôt que trois fois par bloc — trois copies d'une même
   règle finissent par diverger, c'est la leçon de CHAMPS_BOOLEENS appliquée à
   une feuille de style. Seule la COULEUR reste par bloc, parce que c'est elle
   qui change.
   LES TROIS COULEURS VIENNENT DE LORÈNE ET SONT MESURÉES, pas reprises sur
   parole : le vert texte sur le fond alterné du bloc newsletter donne 4,10:1,
   le jaune sur le vert du bloc 13/10 donne 4,05:1, et le bleu picto sur le
   bleu clair du bloc réseaux donne 9,16:1. Les trois passent le seuil de 3:1
   d'un composant d'interface, les deux premiers sans grande marge — donc
   aucune des trois ne se change sans remesurer. */
.www-picto { float: right; margin: 0 0 var(--www-e-4) var(--www-e-6); }
@media (max-width: 40rem) {
  .www-picto { float: none; margin: 0 0 var(--www-e-3) 0; }
}
.www-bloc--newsletter .www-icone-plein { fill: var(--www-vert-texte); }
.www-bloc--vert .www-icone-plein { fill: var(--www-jaune); }
/* LE SÉLECTEUR PASSE PAR .www-picto ET C'EST INDISPENSABLE ICI : le bloc
   réseaux contient DÉJÀ quatre www-icone-plein, celles des comptes sociaux.
   Une règle .www-bloc--reseaux .www-icone-plein les repeindrait toutes en bleu
   picto au lieu du bleu foncé, sans qu'aucune gate ne le voie — un contrôle de
   contenu ne lit pas une couleur calculée. */
.www-bloc--reseaux .www-picto .www-icone-plein { fill: var(--www-bleu-picto); }
/* Le mégaphone du bloc jaune du kit (Lorène, 04/09) : vert foncé sur jaune,
   4,05:1, seuil de 3:1 d'un composant. */
.www-bloc--jaune .www-picto .www-icone-plein { fill: var(--www-vert-fonce); }

/* Le bloc newsletter : fond alterné, bordure rose, titre vert. Spec du 01/09.
   ATTENTION AU SEUIL, C'EST LE SEUL CHIFFRE SERRÉ DE CE LOT : le vert sur le
   fond alterné donne 4,10:1, donc GRAND TEXTE seulement — le titre, qui est un
   h2, et le pictogramme, qui est un composant d'interface au seuil de 3:1. Le
   corps de ce bloc reste à l'encre, 15,96:1. Y poser du texte courant en vert
   serait sous le seuil de 4,5:1.
   La bordure rose ne porte rien, comme celle du cadre. */
.www-bloc--newsletter {
  background: var(--www-fond-alt);
  border: 4px solid var(--www-rose);
}

/* Les compteurs. auto-fit plutôt qu'un nombre de colonnes figé : la home en
   affiche quatre aujourd'hui, et le jour où une catégorie s'ajoute ou disparaît
   la grille suit sans qu'on y touche. */
.www-compteurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--www-e-6);
  margin: 0;
}
.www-compteur { text-align: center; margin: 0; }
.www-compteur-nombre {
  display: block;
  font-family: var(--www-font-titre);
  font-weight: 200;
  font-size: var(--www-t-3xl);
  line-height: 1.1;
  color: var(--www-bleu-fonce);
}
.www-compteur-libelle { display: block; font-size: var(--www-t-sm); margin-top: var(--www-e-2); }

/* Les cartes de rôle. Fond bleu, titre rose, bouton bleu clair : mesuré à
   9,19:1 pour le titre et 16,55:1 pour le corps, donc conforme partout — le
   rose est ici sur un fond très sombre, à l'inverse de l'emploi refusé le
   10/08 où il servait de titre sur du vert. */
.www-roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--www-e-6);
  margin-bottom: var(--www-e-12);
}
.www-role {
  background: var(--www-bleu-survol);
  color: #fff;
  border-radius: var(--www-rayon-md);
  padding: var(--www-e-6);
  display: flex;
  flex-direction: column;
}
/* L'ICÔNE EN HAUT À GAUCHE, LE TITRE À CÔTÉ, LE TEXTE SOUS LE TITRE — spec de
   Lorène du 02/09, capture à l'appui. La tête est une ligne, l'article reste une
   colonne : c'est ce qui garde le bouton en pleine largeur sous l'ensemble.
   LE TEXTE S'ALIGNE SUR LE TITRE ET PAS SUR L'ICÔNE, parce que le titre et le
   paragraphe sont dans le même conteneur. Sa maquette le montre ainsi.
   flex:1 remonte de p à la tête : c'est elle qui doit occuper la hauteur libre
   pour que les boutons de cartes voisines s'alignent, quelle que soit la
   longueur des textes. Posé sur p, il n'aurait plus poussé que dans sa colonne.
   MESURÉ AVANT D'ÊTRE POSÉ : le rose sur le fond de carte donne 9,19:1, très
   au-dessus du seuil de 3:1 d'un composant. C'est le chiffre du titre, ce qui
   est cohérent — elle demande la couleur du titre. */
.www-role-tete { display: flex; align-items: flex-start; gap: var(--www-e-4); flex: 1; }
.www-role-icone { width: 40px; height: 40px; flex: none; }
.www-role-icone .www-icone-plein { fill: var(--www-rose); }
.www-role h3 { color: var(--www-rose); font-size: var(--www-t-lg); margin-top: 0; }
.www-role p { margin-bottom: 0; }
/* L'ESPACE ENTRE LE TEXTE ET LE BOUTON, demande de Lorène du 04/09 : le bouton
   collait au paragraphe. Une marge sur le bouton plutôt qu'un padding en bas de
   la tête, pour que la tête garde flex:1 et que les boutons restent alignés. */
.www-role .www-btn { align-self: stretch; text-align: center; margin-top: var(--www-e-4); }

/* LE BLOC JAUNE, NÉ DE LA PAGE KIT DE LORÈNE (04/09) : fond --www-jaune, titre
   vert, texte encre, liseré bleu foncé. MESURÉ : encre sur jaune 13,86:1 ;
   vert foncé sur jaune 4,05:1, conforme en GRAND TEXTE seulement — d'où un
   titre qui reste un h2 (49 px fluide), jamais un h3 ni du texte courant en
   vert sur ce fond. Bleu foncé sur jaune : 10,95:1. */
.www-bloc--jaune { background: var(--www-jaune); border: 3px solid var(--www-bleu-fonce); }
.www-bloc--jaune :is(h1, h2, h3) { color: var(--www-vert-fonce); }

/* LES CARTES DU KIT, même page de Lorène : fond bleu clair, titre et liseré
   bleu foncé, texte encre, bouton primaire en pleine largeur. MESURÉ : bleu
   foncé sur bleu clair 7,89:1, encre sur bleu clair 9,99:1. LE TITRE N'EST PAS
   VERT : vert foncé sur bleu clair donne 2,92:1, sous le seuil même en grand
   texte — c'est le défaut du 01/09 sur les bandeaux, et la même parade. La
   grille et la colonne reprennent celles des cartes de rôle de l'accueil. */
.www-kit-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--www-e-6);
  margin-bottom: var(--www-e-12);
}
.www-kit-carte {
  background: var(--www-bleu-clair);
  border: 3px solid var(--www-bleu-fonce);
  border-radius: var(--www-rayon-md);
  padding: var(--www-e-6);
  display: flex;
  flex-direction: column;
}
.www-kit-carte h3 { color: var(--www-bleu-fonce); font-size: var(--www-t-lg); margin-top: 0; }
.www-kit-carte p { flex: 1; margin-bottom: 0; }
.www-kit-carte .www-btn { align-self: stretch; text-align: center; margin-top: var(--www-e-4); }

/* LE BOUTON CLAIR EST FAIT POUR LES CARTES DE RÔLE, ET SEULEMENT POUR ELLES.
   Texte encre sur bleu clair : 9,99:1. Bouton contre son fond de carte
   (--www-bleu-survol, pas --www-bleu-fonce) : 7,89:1 — le chiffre de 9,16:1
   écrit ici jusqu'au 31/08 était mesuré contre le mauvais bleu. Conforme dans
   les deux cas, mais un chiffre faux dans notre propre documentation se
   recopie, et c'est ce qui a laissé passer la suite.
   CE QU'IL NE FAUT PAS FAIRE : le reposer sur un autre fond sans remesurer.
   Sur le bloc vert il tombe à 2,92:1, sous le seuil de 3:1 des composants —
   défaut réel resté en ligne du 26/08 au 31/08, vu à l'œil par Lorène avant
   qu'aucun contrôle ne le voie. D'où le bouton jaune ci-dessous. */
.www-btn--clair { background: var(--www-bleu-clair); color: var(--www-encre); }
.www-btn--clair:hover { background: #8ADCFF; }

/* LE BOUTON JAUNE, POUR LES BLOCS VERTS. Fond --www-jaune, texte
   --www-bleu-fonce : 10,95:1 pour le texte, 4,05:1 entre le bouton et le bloc.
   C'est la proposition de Lorène du 31/08, et elle est meilleure que ce qu'elle
   remplace sur les deux critères à la fois.
   LE SURVOL ASSOMBRIT AU LIEU D'ÉCLAIRCIR, à l'inverse du bouton clair : le
   jaune de la charte est déjà presque au maximum de clarté, donc l'éclaircir
   ne se voit pas (#FFF04D est à un cheveu de #FFE200 à l'œil). Assombri, le
   changement est perceptible et les deux seuils tiennent — 10,05:1 pour le
   texte, 3,72:1 contre le bloc. */
/* UN BOUTON ISOLÉ ENTRE DEUX SECTIONS RESPIRE, demande de Lorène du 01/09 et
   son motif est l'usage au doigt : « cela rendra le bouton plus facilement
   cliquable sur la version mobile ». Le titre qui suivait collait au bouton,
   donc une cible de 44px bordée d'une zone où un pouce déclenche autre chose.
   La marge vit ici et pas en style d'attribut sur la page : les cinq couloirs
   suivants porteront le même bouton au même endroit. */
.www-action { margin: var(--www-e-6) 0 var(--www-e-12); }

.www-btn--jaune { background: var(--www-jaune); color: var(--www-bleu-fonce); }
.www-btn--jaune:hover { background: #F5D900; }

/* Navigation et pied de page. Les liens y sont à 20px (spec Lorène du 21/08),
   d'où .www-lien-nav plutôt qu'une règle sur le sélecteur a, qui grossirait
   aussi les liens au milieu d'un paragraphe. */
/* L'ALIGNEMENT PASSE DE BASELINE À CENTER AVEC LE LOGO DU 02/09, et c'est le
   genre de détail qui se paie sans erreur : la ligne de base d'une image de
   bloc est son BORD BAS, donc les liens du menu se seraient collés sous le
   logo au lieu de lui faire face. Rien n'aurait cassé, ça aurait juste été
   laid. Baseline était le bon choix tant que la marque était du texte. */
.www-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--www-e-6);
  padding: var(--www-e-6) var(--www-e-4);
  max-width: var(--www-largeur-page);
  margin: 0 auto;
}
/* LA HAUTEUR SUIT LE CADRAGE DU FICHIER, et celui de Lorène est bon : mesuré sur
   le canal alpha, son encre occupe 68 % de la hauteur du canvas (1632 x 726 dans
   2000 x 1075), là où le logo complet qui tenait la place n'en occupait que 37 %.
   60 px donnent donc un dessin de 41 px, quand il en fallait 96 pour en obtenir 36.
   C'est la démonstration de ce qui a été demandé pour le reste du kit : un
   ré-export recadré vaut mieux que n'importe quelle compensation en CSS. */
.www-nav-logo { height: 60px; width: auto; display: block; }
/* Le menu à droite, la marque à gauche — spec de Lorène du 02/09. Le
   margin-left auto pousse le groupe de liens au bout de la ligne sans figer
   de largeur, donc il retombe naturellement sous la marque quand la place
   manque, le flex-wrap étant déjà là. */
.www-nav-liens { display: flex; flex-wrap: wrap; gap: var(--www-e-6); margin: 0 0 0 auto; }
/* LE PIÈGE EST ICI, ET IL EST SILENCIEUX : [hidden] ne pose que display:none
   dans la feuille du navigateur, donc le display:flex de la ligne au-dessus le
   bat. Sans cette règle, le script replierait la liste et elle resterait
   affichée, sans erreur nulle part. */
.www-nav-liens[hidden] { display: none; }

/* LE MENU BURGER SOUS 40rem — demande de Lorène du 07/09, avec son picto.
   IL EST MASQUÉ PAR DÉFAUT ET C'EST DÉLIBÉRÉ. Il n'apparaît que sous .www-js,
   la classe que public/scripts/nav.js pose sur la racine : une page dont le
   script ne se charge pas garde sa navigation entière plutôt qu'un bouton qui
   n'ouvre rien. Le seuil de 40rem est le même que dans le script, et il est
   commenté des deux côtés parce que deux sources pour un seuil divergent.
   44px de cible tactile, minimum RGAA — le dessin en fait 28, la boîte
   complète la différence. */
.www-nav-burger { display: none; }
@media (max-width: 40rem) {
  .www-js .www-nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: 0 0 0 auto;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--www-rayon-sm);
    cursor: pointer;
  }
  .www-js .www-nav-burger:focus-visible { outline: 3px solid var(--www-bleu-fonce); outline-offset: 2px; }
  /* Déplié, la liste prend toute la ligne sous la marque plutôt que de se
     serrer à côté du bouton. */
  .www-js .www-nav-liens { flex-basis: 100%; flex-direction: column; gap: var(--www-e-4); margin: 0; }
}
/* LA COULEUR N'EST PAS DANS LE FICHIER SVG, ELLE EST ICI — convention du dépôt,
   posée le 26/08 sur les icônes de réseaux sociaux. Le fichier de Lorène arrive
   avec une couleur noire en attribut, qui n'est aucun de nos jetons ; il est dépouillé à
   l'intégration et rhabillé depuis le bleu foncé, mesuré 14,26:1 sur le fond de
   page, très au-dessus du seuil de 3:1 d'un composant d'interface. */
.www-nav-burger-icone { width: 28px; height: 28px; display: block; }
.www-nav-burger .www-icone-plein { fill: var(--www-bleu-fonce); }

/* Réseaux sociaux — icônes Tabler pleines, exportées par Lorène le 26/08.
   LES COULEURS NE SONT PAS DANS LES FICHIERS SVG, ELLES SONT ICI, et c'est la
   convention du dépôt appliquée à un format qui invite au contraire : un SVG
   livré porte ses couleurs en attribut, et un attribut de présentation se
   dérègle en silence le jour où le fond du bloc change. Ceux-ci ont été
   dépouillés de leur fill et de leur stroke à l'intégration ; les sélecteurs
   d'attribut ci-dessous les rhabillent depuis les jetons, une règle CSS
   l'emportant de toute façon sur un attribut de présentation.
   Mesuré sur les valeurs réelles : le bleu foncé sur le bloc ciel donne
   7,89:1, très au-dessus du seuil de 3:1 d'un composant d'interface. Le liseré
   au fond de page (1,76:1) ne porte rien, il détoure — c'est le remplissage
   qui porte le contraste, comme pour un point de carte.
   AU SURVOL, UN DISQUE PLUTÔT QU'UNE COULEUR : passer le glyphe en vert foncé
   le ferait tomber à 2,92:1, sous le seuil. Le disque, lui, ne touche pas au
   glyphe.
   LE DISQUE A CHANGÉ DE COULEUR LE 01/09, ET IL SERAIT DEVENU INVISIBLE SANS
   ÇA. Il était au fond de page parce que le bloc était un aplat ciel ; le bloc
   est devenu un cadre, donc son fond EST le fond de page, et un disque de la
   couleur du fond ne se voit pas. C'est le défaut du 26/08 sur le point de
   basculer une seconde fois — les icônes invisibles, qu'aucune gate ne pouvait
   voir. Le disque est donc ciel, ce qui reprend la couleur que le bloc vient de
   perdre, et le glyphe y donne 7,89:1.
   La cible fait 44px, minimum RGAA, alors que le dessin en fait 32 : c'est la
   zone cliquable qui doit être atteignable au doigt, pas l'icône. */
.www-reseaux { display: flex; flex-wrap: wrap; gap: var(--www-e-3); margin: var(--www-e-6) 0; }
.www-reseau {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent;
}
.www-reseau svg { width: 32px; height: 32px; display: block; }
/* LE RÔLE DE CHAQUE TRACÉ EST DANS UNE CLASSE, PAS DANS UN ATTRIBUT DE COULEUR,
   et la première version de ces deux règles ciblait [fill] et [stroke] — des
   sélecteurs d'ATTRIBUT, qui ne matchent que les éléments portant réellement
   ces attributs. Or on venait justement de les retirer des fichiers : les
   règles ne matchaient plus rien, le fill="none" du <svg> était hérité par les
   tracés, et les quatre icônes étaient INVISIBLES au repos. Seul le disque de
   survol s'affichait, ce qui est exactement ce que Lorène a signalé.
   Aucune gate ne l'a vu : elles vérifiaient l'absence des couleurs en dur et la
   présence des liens, pas qu'un dessin s'affiche. Une gate de présence sur ces
   deux classes couvre désormais le cas — elle relie le balisage au crochet dont
   le CSS a besoin, ce qu'une gate d'absence ne peut pas faire. */
.www-reseau .www-icone-plein { fill: var(--www-bleu-fonce); }
/* Le trait est posé PAR-DESSUS le remplissage, il y creuse les détails du
   dessin : sa couleur est donc celle du fond de page quel que soit le fond du
   bloc, et le passage de l'aplat au cadre ne le concerne pas. */
.www-reseau .www-icone-trait { stroke: var(--www-fond); }
.www-reseau:hover,
.www-reseau:focus-visible { background: var(--www-fond); }

.www-pied { background: var(--www-bleu-clair); padding: var(--www-e-12) var(--www-e-4); margin-top: var(--www-e-16); }

/* LE LOGO EST À DROITE DES LIENS, comme la maquette validée du 02/09, et il
   passe SOUS eux plutôt que de les écraser quand la place manque. L'ordre du
   balisage reste celui de la lecture : les liens d'abord, le logo décoratif
   ensuite.
   IL EST EN BLEU FONCÉ ET PAS EN VERT, arbitrage de Lorène le 02/09 — « ça ne
   change pas grand-chose au design mais on améliore le contraste ». Elle a
   raison sur ses deux points : le vert sur le bleu clair du pied donne 2,92:1,
   sous le seuil de 3:1 même en grand texte, quand le bleu foncé y est à 7,89:1.
   Un logo est certes exempté des règles de contraste, mais un logo qu'on
   distingue mal reste un logo qu'on distingue mal.
   IL MÈNE À L'ACCUEIL depuis le 02/09, comme celui de l'en-tête, sa demande.
   Son alternative n'est donc PLUS VIDE : un lien sans intitulé accessible est un
   échec RGAA, et « Accueil » dit ce que le lien fait plutôt que de répéter le nom
   du mouvement, déjà écrit juste à côté dans la ligne de copyright. */
.www-pied-contenu {
  max-width: var(--www-largeur-page); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--www-e-8);
}
.www-pied-liens { flex: 1 1 20rem; }
/* LE margin-left EST SUR LE LIEN ET PAS SUR L'IMAGE depuis que le logo est
   cliquable : c'est le lien qui est l'élément flex du pied, une marge auto posée
   sur l'image qu'il contient ne pousserait plus rien. Le genre de détail qui ne
   lève aucune erreur et se voit seulement à l'écran. */
.www-pied-contenu > a { display: block; margin-left: auto; }
.www-pied-logo { height: 160px; width: auto; display: block; }
.www-pied p { margin-bottom: var(--www-e-2); }

/* =========================================================
   Divers
   ========================================================= */

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ---- Liste de fichiers téléchargeables ----
   Posée le 27/08 avec la page /kit, quand les fichiers du kit de communication
   sont arrivés. Trois choix qui ne sont pas cosmétiques.

   LE FORMAT ET LE POIDS SONT DANS LE LIEN, pas à côté. Le RGAA demande que la
   nature d'un lien de téléchargement soit connue avant de cliquer, et une
   information posée hors du lien n'est pas lue par un lecteur d'écran qui
   parcourt la page lien par lien. D'où le span à l'intérieur du <a>.

   LA CIBLE FAIT TOUTE LA HAUTEUR DU BLOC et pas seulement le texte : cibles
   tactiles d'au moins 44 px, règle 3. C'est aussi pourquoi le <a> est en
   display:block.

   PAS DE PUCE ET PAS DE GRILLE D'IMAGES. Une vignette par fichier obligerait à
   charger quatre-vingts images de plusieurs méga-octets pour afficher une page
   de liens, et il n'existe pas de miniatures. Le nom et le poids suffisent à
   choisir. */
.www-fichiers {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--www-e-8);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--www-e-3);
}
.www-fichier a {
  display: block;
  padding: var(--www-e-4);
  background: var(--www-fond-bloc);
  border: 1px solid var(--www-bordure);
  border-radius: var(--www-rayon-md);
  text-decoration: none;
  color: var(--www-encre);
  font-weight: 600;
  height: 100%;
}
.www-fichier a:hover,
.www-fichier a:focus-visible {
  background: var(--www-voile-bleu);
  border-color: var(--www-bleu-fonce);
  text-decoration: underline;
}
.www-fichier-nom { display: block; }
.www-fichier-meta {
  display: block;
  margin-top: var(--www-e-1);
  font-weight: 400;
  font-size: var(--www-t-sm);
  color: var(--www-encre-doux);
}

/* ---- Aperçus ----
   Ajoutés le 27/08 à la demande de Barbara, et sa remarque était juste :
   quatre-vingts cases identiques ne disent rien quand ce qu'elles portent est
   un visuel. Une vignette dit en un coup d'œil ce qu'un nom de fichier ne dira
   jamais.
   LES VIGNETTES SONT GÉNÉRÉES, PAS LES FICHIERS EUX-MÊMES : 480 px de large en
   webp, 12 ko en moyenne, 1,1 Mo pour les soixante-dix-sept — à comparer aux 94 Mo
   des originaux, qu'il aurait fallu charger entiers pour afficher une page de
   liens. C'est la raison pour laquelle la première version n'en avait pas ; la
   réponse n'était pas de renoncer aux aperçus mais de fabriquer des miniatures.
   L'IMAGE EST DÉCORATIVE, alt="" : le nom du fichier est déjà dans le lien,
   juste à côté. Lui donner un texte alternatif ferait annoncer deux fois la
   même chose à un lecteur d'écran — c'est le défaut classique d'une vignette
   posée dans un lien qui porte déjà son libellé.
   Fond en damier : plusieurs de ces visuels sont sur fond transparent ou
   blanc, et sans repère visuel ils flottent dans le vide. Sa case foncée est
   --www-damier, et le raisonnement de sa valeur est écrit là-bas : un damier
   trop clair laisse un logo blanc invisible, et c'est la seule contrainte que
   la mesure impose. */
.www-fichiers--apercus { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.www-fichier--apercu a { padding: var(--www-e-3); }
.www-fichier--apercu img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background:
    linear-gradient(45deg, var(--www-damier) 25%, transparent 25%, transparent 75%, var(--www-damier) 75%),
    linear-gradient(45deg, var(--www-damier) 25%, var(--www-fond) 25%, var(--www-fond) 75%, var(--www-damier) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  border-radius: var(--www-rayon-sm);
  margin-bottom: var(--www-e-3);
}