/* =============================================================================
   associations.css — les huit associations soutenues (page Actions nature)
   =============================================================================
   Repris de la maquette figee : style.css l. 1916-1928, plus les deux regles
   tactiles de mobile.css l. 1356-1367. Les commentaires d'origine sont conserves.

   ⚠️ FICHIER SECOND D'UNE PAIRE (§2.5 du guide). Le bloc rend des sections
   `.pg-bloc` : la mise en page vient de `pg-bloc.css`, y compris l'alternance de
   fond (`--blanc`) et la grille inversee (`--rev`). Ici, uniquement ce qui est
   PROPRE aux associations. Ne rien y redupliquer de `pg-bloc.css`.

   ⚠️ LE LOGO TIENT LIEU DE TITRE. Le nom de l'association est un `<h2>` rendu
   SEULEMENT quand le logo manque — decide COTE SERVEUR chez nous, alors que la
   maquette s'en remettait a un `onerror` dans l'attribut. Son propre commentaire
   dit pourquoi elle faisait ainsi : « recolte en cours », les fichiers n'etaient
   pas tous la. Nous, nous savons avant de rendre. Voir `associations.php`.

   ⚠️ `--sombre` EST LA COLONNE `logo_clair`, PAS UNE FONCTION DU RANG. Elle pose
   une plaque NOIRE derriere un logo pale, qui disparaitrait sinon. Mesure : les
   deux concernes sont Wildlife Angel (rang 2, fond creme) et WildCRU (rang 7,
   fond blanc) — deux fonds differents, donc le rang ne peut pas le deviner. C'est
   tout l'objet de D101, et c'est ce qui la distingue de l'alternance, qui se
   calcule, elle.

   ⚠️ `.pg-bloc:has(.pg-asso__logo) .eyebrow` grossit le surtitre UNIQUEMENT sur
   les blocs qui portent un logo. C'est ce qui fait du theme un titre sur cette
   page sans toucher aux blocs editoriaux de Presentation. Remplacer ce `:has()`
   par une classe posee a la main marcherait aussi — mais il faudrait alors y
   penser a chaque bloc, et l'oubli ne se verrait pas.
   ============================================================================= */

/* LOGO officiel de l'association (demande Fix 06/07) : carte blanche au-dessus du nom.
   Masqué automatiquement (onerror) tant que le fichier n'existe pas (récolte en cours). */
.pg-asso__logo{ display:block; height:72px; width:auto; max-width:260px; object-fit:contain;
  background:var(--blanc); border:1px solid var(--creme-2); border-radius:8px;
  padding:10px 18px; margin-bottom:18px; box-sizing:content-box; }   /* le logo fait office de titre (nom texte masqué, fallback si logo cassé) */
.pg-asso__logo--sombre{ background:var(--noir); border-color:var(--noir); }   /* logos blancs (Wildlife Angel, WildCRU) */

/* lien vers le site de l'association = BOUTON (Fix 09/07) : .btn gere la forme/couleur/anim pattes,
   on ajoute juste l'espace au-dessus. */
.pg-asso__site{ margin-top:18px; }
/* eyebrow des blocs ASSO (ceux qui ont un logo) = TITRE plus GROS (Fix 09/07). :has() cible
   uniquement actions-nature, pas les blocs pg-bloc de presentation/equipe. */
.pg-bloc:has(.pg-asso__logo) .eyebrow{ font-size:clamp(20px, 2vw, 26px); letter-spacing:.04em; margin-bottom:18px; }

/* ---- Ecran tactile / colonne unique -------------------------------------- */
/* En colonne unique, un element isole se centre — meme logique que les boutons
   de fin de section. Le texte de la colonne, lui, reste aligne a gauche. */
@media (max-width:1024px){
  .pg-asso__site{ display:flex; width:fit-content; margin-inline:auto; }
  .pg-asso__logo{ margin-inline:auto; }
}