/* =============================================================================
   pg-bloc.css — bloc editorial (conteneur commun + variante texte seul)
   =============================================================================
   Repris de la maquette figee (style.css l. 1837-1844, 2763-2767). Les commentaires d'origine sont
   conserves : ils portent des motifs de conception qu'aucune autre source ne
   documente.

   ⚠️ TOUT le CSS de ce type de bloc vit ici — y compris ses @media. Rien dans
   le CSS d'une page : un bloc duplique vers une page vierge doit rester correct.
   ============================================================================= */

/* Conteneur commun a TOUS les blocs editoriaux. Fichier PARTAGE : d'autres types
   s'y mapperont (§2.4 du guide), d'ou un fichier nomme d'apres la classe et non
   d'apres un type de bloc. */
/* bloc éditorial texte + photo */
.pg-bloc{ background:var(--creme); }   /* le padding vient de section[id] */
/* Variante FOND BLANC — sert l'alternance blanc / creme des blocs d'Actions nature.
   ⚠️ Cette alternance NE SE STOCKE PAS pour les 8 associations : elle est une fonction
   exacte du rang (D101). Le champ « variante » du formulaire ne sert qu'aux blocs
   EDITORIAUX isoles, ou le fond est un choix et non une position. */
.pg-bloc--blanc{ background:var(--blanc); }
.pg-bloc__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,72px); align-items:center; }
.pg-bloc__titre{ text-align:left; margin:10px 0 22px; }
.pg-bloc__txt p:not(.eyebrow){ font-size:var(--fs-body); line-height:1.7; color:var(--noir-50); margin-bottom:16px; }
.pg-bloc__txt strong{ color:var(--noir); }
.pg-bloc__pic{ aspect-ratio:3/2; border-radius:22px; background:#241d12 center/cover no-repeat;
  box-shadow:0 28px 60px -20px rgba(0,0,0,.35); }

/* Variante TEXTE SEUL — une accroche centree, sans titre ni image. */
/* ---- PAGE ÉQUIPE (préfixe eq-) ---- */
.eq-intro{ max-width:900px; margin:0 auto; text-align:center; font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,2.6vw,38px); line-height:1.3; color:var(--noir); }
.eq-intro em{ font-style:italic; color:var(--jaune-d); }   /* même accent que .manifeste__lede */
.eq-intro strong{ font-weight:400; color:var(--noir); }

/* Variante INVERSEE — la photo passe a GAUCHE, et la colonne de texte retrecit
   legerement. Sert l'alternance des huit blocs d'Actions nature.
   ⚠️ AUCUN CONSOMMATEUR AUJOURD'HUI : ces regles attendent le lot Actions nature.
   Elles sont extraites des maintenant parce qu'elles vivent 60 lignes apres le reste
   du bloc dans `style.css` — les chercher plus tard, c'est risquer de les manquer une
   seconde fois (l'obturateur des pastilles a ete oublie exactement comme ca).
   ⚠️ Comme le fond blanc/creme, le cote de la photo sera une fonction EXACTE du rang
   (D101), calculee au rendu. Ce n'est PAS le champ « variante » du formulaire, qui ne
   sert qu'aux blocs editoriaux isoles. */
/* Variante PHOTO EN HAUT — pour un texte long (fiche animal), ou le centrage vertical
   laisse la photo flotter au milieu de la colonne. */
.pg-bloc__grid--haut{ align-items:start; }
/* Surtitre + titre AU-DESSUS de la grille (fiche animal) : la grille ne porte plus que le
   texte et la photo, qui partent ainsi de la meme ligne. */
.pg-bloc__head{ margin-bottom:4px; }
.pg-bloc__grid--rev{ grid-template-columns:.9fr 1.1fr; }
.pg-bloc__grid--rev .pg-bloc__pic{ order:-1; }

@media (max-width:900px){ .pg-bloc__grid{ grid-template-columns:1fr; } }
@media (max-width:900px){
  .pg-bloc__grid--rev{ grid-template-columns:1fr; }
  .pg-bloc__grid--rev .pg-bloc__pic{ order:0; }   /* mobile : texte puis photo, comme les blocs normaux */
}

/* style.css l. 3116 — le bouton FACULTATIF sous l'accroche (`intro_texte`, page Sur-mesure). */
.sm-cta{ margin-top:28px; text-align:center; }
/* mobile.css l. 1379 — « centrer les boutons sur la largeur, de manière globale » (Fix). La règle
   de la maquette groupe sept sélecteurs ; seul `.sm-cta` appartient à ce bloc. */
@media (max-width:1024px){
  .sm-cta{ justify-content:center; flex-wrap:wrap; }
}