/* ═══════════════════════════════════════════════════════════════════════════
   La feuille de l'annuaire des associations
   ═══════════════════════════════════════════════════════════════════════════

   ⚠️ CETTE PALETTE EST UNE COPIE DE CELLE DE scripts/gen-regions.mjs.
   Les deux jeux de pages statiques (régions et annuaire) doivent se ressembler :
   un visiteur qui passe de /regions/ à /associations/ ne doit pas changer de
   site. Toute refonte de la charte se fait donc DANS LES DEUX, jamais dans un
   seul — sinon la moitié du site reste à l'ancienne teinte sans que rien ne le
   signale.

   ⚠️ ET ELLE HABILLE 43 372 PAGES DÉJÀ ÉCRITES SUR LE VPS. Changer ces jetons
   ne suffit pas : il faut relancer `npm run annuaire` pour que les pages
   reprennent la nouvelle feuille — elle est servie en fichier, donc un simple
   redéploiement de /associations/annuaire.css suffit en réalité, puisque les
   pages la référencent au lieu de l'inliner.

   Les jetons de couleur vivent dans le bloc `:root` ci-dessous, et nulle part
   ailleurs dans ce fichier. */


  :root{
    color-scheme: light;
    /* ── CHARTE KAKI (26/08/2026, elle fait foi) ───────────────────────────
       Maison « manafrance » : lumière haute à gauche, la référence du §7.8.

       ⚠️ ICI LE CONTENU VIT SUR UN CARTON CRÈME, ET CE N'EST PAS UN ÉCART.
       L'annuaire est du texte D'UNE DENSITÉ EXCEPTIONNELLE — jusqu'à quatre
       cents associations sur une seule page de commune. La charte pose que
       « tout visage repose sur un carton crème » et que le crème est la
       couleur qui porte ce qu'on lit ; à ce volume, le crème n'est pas un
       ornement, c'est la seule surface tenable. Le dégradé kaki porte la PAGE,
       le carton porte le TEXTE.

       ⚠️ ET LE FILET DE LA CHARTE NE VAUT PAS ICI. #B9BFAB est calibré pour
       les fonds SOMBRES (3:1 contre les huit lumières) ; posé sur un carton
       crème il tombe à 1,58:1 — invisible. Il lui faut son symétrique :
       #828C54, qui tient 3,01:1 sur le crème, même teinte kaki. Un jeton de
       charte n'est juste que sur le fond pour lequel il a été mesuré.

       Ratios mesurés sur le rendu, tous ≥ 4,5:1 :
       encre/crème 12,85 · kaki/crème 6,71 · kaki profond/crème 9,10 ·
       secondaire/crème 5,87 · crème sur la lueur du fond 5,52.

       ⚠️ CE BLOC EST COPIÉ dans public/livre-blanc/index.html et
       public/partenaires/index.html (gen-regions.mjs a été supprimé le 20/08).
       Toute retouche se fait DANS LES TROIS — sinon la moitié du site reste à
       l'ancienne teinte sans que rien ne le signale. */
    --terre:#4F5331; --terre-f:#3C3F24; --terre-pale:#E7EAD6;
    /* L'ocre est RÉSERVÉ au temps donné (§7.4) : le bouton passe en crème,
       encre par-dessus, et le filet kaki lui donne sa limite. */
    --safran:#F2EAD9; --safran-f:#828C54;
    --kaki:#4F5331; --kaki-f:#3C3F24; --kaki-pale:#E7EAD6;
    --ecume:#474C36; --carte:#F2EAD9; --creux:#D8DDC6;
    --encre:#23261C; --texte:#3C3F24; --brume:#5A5A48; --filet:#828C54; --sous:#4F5331;

    /* ⚠️ ET IL FAUT LE JEU SYMÉTRIQUE, car cette page a DEUX fonds. Les
       cartons sont crème, mais tout ce qui les entoure — titre, chapeau, fil
       d'Ariane, sur-titres — repose à même le dégradé sombre. Y poser les
       encres ci-dessus rend le titre de la page invisible (constaté en ligne
       le 26/08 : « Sport en Bretagne » en kaki sur du kaki).
       C'est la même règle que pour le filet, dans l'autre sens : un jeton
       n'est juste que sur le fond pour lequel il a été mesuré.
       Mesuré contre l'arrêt le plus CLAIR du dégradé (#5E5F3D), le pire :
       clair 5,52:1 · doux 4,74:1 · pâle 3,49:1 (non textuel, ≥3 suffit). */
    --sur-fond:#F2EAD9; --sur-fond-doux:#D8DDC6; --sur-fond-pale:#B9BFAB;
    --titre:'Archivo','Archivo Narrow',system-ui,sans-serif;
    --corps:'Archivo Narrow',system-ui,-apple-system,'Segoe UI Condensed','Roboto Condensed',sans-serif;
  }
  *{box-sizing:border-box}
  html{background:#2A2E21}
  body{margin:0;font-family:var(--corps);color:var(--encre);line-height:1.7;background:radial-gradient(120% 90% at 22% 0%, #5E5F3D 0%, #474C36 38%, #2A2E21 100%);background-attachment:fixed;min-height:100vh}
  /* Le grain de la charte : 2 %, invisible à l'œil, indispensable contre le
     banding des verts sombres (§7.4). Il remplace les deux halos chauds, qui
     n'avaient de sens que sur un sol de lin. */
  .wallpaper{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.02;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23b)'/%3E%3C/svg%3E")}
  main{position:relative;z-index:1;max-width:880px;margin:0 auto;padding:4rem 1.4rem 5rem}
  a{color:var(--sous)}
  .retour{font-size:.85rem;color:var(--sur-fond-doux);text-decoration:none;letter-spacing:.04em}
  .retour:hover{color:var(--sur-fond)}
  .sur{display:flex;align-items:center;gap:1rem;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--sur-fond);margin:2.6rem 0 1.1rem}
  .sur::before{content:"";display:inline-block;width:40px;height:1.5px;background:var(--sur-fond-pale);flex:none}
  h1{font-family:var(--titre);color:var(--sur-fond);font-weight:700;font-size:clamp(2.1rem,5.5vw,3.2rem);line-height:1.12;margin:.4rem 0 1rem}
  .grad{background:linear-gradient(110deg,var(--sur-fond) 0%,var(--sur-fond) 45%,var(--sur-fond-doux) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
  .soustitre{font-style:italic;font-size:clamp(1.05rem,2.2vw,1.3rem);color:var(--sur-fond-doux);max-width:52ch;margin:0 0 2.2rem}
  h2{font-family:var(--titre);color:var(--sur-fond);font-weight:700;font-size:1.25rem;margin:2.6rem 0 1rem}
  p{color:var(--texte)}
  .grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.9rem;margin:1.4rem 0;padding:0;list-style:none}
  .case{background:var(--carte);border:1px solid var(--filet);border-radius:16px;padding:1.05rem 1.2rem;transition:border-color .15s, box-shadow .15s}
  .case:hover{border-color:var(--terre);box-shadow:0 10px 30px rgba(42,33,28,.09)}
  .case{position:relative}
  .case a{text-decoration:none;color:var(--kaki);font-weight:700;font-size:1.02rem}
  .case a::after{content:"";position:absolute;inset:0}
  .case .nom{margin:0;font-weight:700;font-size:1.02rem;color:var(--kaki)}
  .case .code{font-family:var(--corps);font-size:.68rem;font-weight:700;letter-spacing:.1em;color:var(--sous)}
  .case .detail{margin:.25rem 0 0;font-size:.88rem;color:var(--brume);line-height:1.5}
  .encart{border-left:3px solid var(--sur-fond-pale);background:rgb(242 234 217 / .07);color:var(--sur-fond-doux);border-radius:0 14px 14px 0;padding:1.1rem 1.3rem;margin:1.6rem 0}
  .encart.actif{border-left-color:var(--sur-fond);background:rgb(242 234 217 / .12)}
  .encart p{margin:.3rem 0}
  .btn{display:inline-block;margin-top:.5rem;padding:.75rem 1.6rem;border-radius:999px;background:var(--carte);border:1px solid var(--filet);color:var(--encre);font-weight:700;font-size:.95rem;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.24)}
  .btn:hover{filter:brightness(1.08)}
  .fil{font-family:var(--corps);font-size:.8rem;color:var(--sur-fond-doux);margin:0 0 .4rem}
  .fil a{color:var(--sur-fond-doux);text-decoration:none}
  .fil a:hover{color:var(--sur-fond)}
  footer{position:relative;z-index:1;max-width:880px;margin:0 auto;padding:0 1.4rem 3rem;font-family:var(--corps);font-size:.8rem;color:var(--brume)}
  footer a{color:var(--brume)}

  /* — L'annuaire — */
  .assos{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.9rem}
  .assos li{border:1px solid var(--filet);border-radius:14px;padding:.9rem 1.1rem;background:var(--carte)}
  /* La ligne que la recherche vise : surlignée, et dégagée du bord haut. */
  .assos li:target{border-color:var(--sous);box-shadow:0 0 0 3px rgb(79 83 49 / .15);scroll-margin-top:2rem}
  .assos h3{margin:0;font-family:var(--titre);font-size:1.02rem;font-weight:700;line-height:1.35;color:var(--kaki)}
  .assos .meta{margin:.3rem 0 0;font-family:var(--corps);font-size:.78rem;color:var(--brume);display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
  .assos .an{font-weight:700;color:var(--sous)}
  .assos .th{padding:.1rem .55rem;border-radius:999px;background:rgb(79 83 49 / .10);color:var(--sous)}

  /* ── LES COULEURS DE THÈME ──────────────────────────────────────────────
     Quatorze teintes de terre, une par famille d'objet social du RNA. Elles
     ne remplacent JAMAIS le libellé : le nom du thème est toujours écrit en
     toutes lettres. La couleur seconde la lecture, elle ne la porte pas —
     sans quoi l'annuaire deviendrait illisible à qui distingue mal les
     couleurs, et muet pour un lecteur d'écran.

     ⚠️ MESURÉES, PAS CHOISIES À L'ŒIL. Chacune tient au moins 4,3:1 sur le
     lin (le minimum exigé pour un élément non textuel est 3:1 — on garde de
     la marge), et deux teintes quelconques sont séparées d'au moins ΔE 17
     dans l'espace Lab. « Cultes » a été refaite pour cela : sa première
     valeur n'était qu'à ΔE 15,0 de « École et jeunesse », deux gris-bleus
     qu'on aurait confondus.

     ⚠️ ELLES NE SERVENT PAS DE TEXTE SUR APLAT. La pastille porte la teinte
     à 12 % et le texte reste en encre : un mot écrit dans sa propre couleur
     de thème sur un fond de cette même couleur ne tiendrait aucun ratio. */
  /* ⚠️ LE REPLI D'ABORD. Ces sélecteurs ont tous la MÊME spécificité : si la
     règle générique venait après, elle écraserait les quatorze.

     Le critère du choix n'est PAS la seule fréquence : ce sont les familles
     qu'un habitant reconnaît et cherche — le sport, la culture, l'école, la
     santé, l'environnement. « Groupements d'employeurs » est plus fréquent que
     « Cultes » et n'a pourtant pas de teinte : c'est une catégorie
     administrative, que personne ne parcourt. Les quinze autres familles
     partagent le kaki de la charte — vingt-neuf couleurs ne feraient pas
     vingt-neuf repères, elles feraient un arc-en-ciel sans information. */
  /* ── Les quatorze thèmes ────────────────────────────────────────────────
     Ils portaient chacun leur teinte : magenta pour les fêtes, bleu pour
     l'école, teal pour l'entraide, rouge pour la santé. Quatorze couleurs
     saturées sur un site dont la charte est monochrome.

     ⚠️ C'EST UNE PERTE ASSUMÉE, PAS UN OUBLI. La couleur ne portait de toute
     façon jamais l'information seule : le nom du thème est écrit juste à côté,
     dans chaque carte et dans chaque puce (WCAG 1.4.1 était déjà satisfait par
     le texte). Ce qu'elle apportait, c'était un repère de balayage — et c'est
     ce repère qu'on échange contre l'unité de la maison. Si on veut le
     retrouver un jour, ce sera par la FORME ou l'ICÔNE, pas par la teinte :
     quatorze kakis distinguables n'existent pas.

     La variable --teinte reste, pour que le retour arrière tienne en une
     ligne. */
  [data-theme]{ --teinte:#4F5331; --teinte-rvb:79 83 49 }

  /* La pastille : la teinte en aplat léger, le texte en encre. */
  .assos .th[data-theme]{background:rgb(var(--teinte-rvb) / .13);color:var(--encre)}
  /* La carte de thème : un filet vertical, discret et net. */
  .case[data-theme]{border-left:3px solid var(--teinte)}
  .case[data-theme] .nom,.case[data-theme]>a{color:var(--teinte)}

  .assos .web{color:var(--sous)}
  /* L'adresse d'établissement (SIRENE) — une information, pas un lien. */
  .assos .adr{color:var(--brume)}
  .assos .objet{margin:.5rem 0 0;font-size:.92rem;color:var(--texte);line-height:1.6}
  .note{font-size:.95rem;color:var(--texte);background:var(--carte);border:1px dashed var(--filet);border-radius:14px;padding:.9rem 1.1rem}
  .grille .case a{font-weight:700;text-decoration:none}

  /* Le chemin du RETOUR — vers la carte, posée sur cette commune. Cuit ici à
     la régénération ; missions.js n'injecte le sien que si celui-ci manque. */
  .retour-carte{margin:0 0 .3rem;font-size:.85rem}
  .retour-carte a{font-weight:700;color:var(--sur-fond);text-decoration:none}
  .retour-carte a:hover{text-decoration:underline}
