/* ==========================================================================
   corps.css — le CORPS des pages (tout ce qui est entre l'en-tête et le pied).
   ==========================================================================

   L'en-tête vit dans entete.css, le pied dans pied.css ; cette feuille porte
   ce que les pages elles-mêmes déclaraient autrefois en ligne : les deux blocs
   <style> que l'ancien constructeur de pages écrivait dans la tête de CHAQUE
   page (classes `c-N` à `!important`, marges des titres et des boutons).
   Chargée APRÈS layout.css (cf. base.njk) : ses règles gagnent à spécificité
   égale.

   --- Ce qui reste des classes `c-N` de l'ancien export ---------------------
   Trois éléments seulement en portent encore une dans les gabarits :
     .c-16  le titre du mot du président (accueil) — l'export lui donnait
            50 px de padding haut, qui s'ajoutaient aux 35 px du premier bloc
            de page (layout.css) : ~85 px de blanc au téléphone. Ramené à
            15 px, la valeur que l'export donnait à ses rangées de contenu
            (dont plus aucune ne porte de classe c-N : les autres pages n'ont
            que les 35 px).
     .c-31  le conteneur du bouton « Lire les anciens Organes » (accueil).
     .c-2   la rangée de couvertures d'une section d'année (organes).
   `.c-1` (la rangée de l'en-tête) est neutralisée par entete.css. Toutes les
   autres règles `.c-N` de l'export visaient des rangées qui ne portent plus
   la classe : elles sont supprimées, pas déplacées.
   ========================================================================== */
.do-custom-heading {
	margin-bottom: 0.625rem;
	margin-top: 0;
}

.do-btn {
	margin-bottom: 22px;
}

.c-16 {
	padding-top: 15px;
}

.c-31 {
	padding-top: 15px;
}

.row.c-2 {
	padding-bottom: 20px;
}

/* ==========================================================================
   Palette du corps — celle de l'en-tête et du pied (entete.css, pied.css).
   ========================================================================== */
:root {
	--rouge: #912222;
	--rouge-fonce: #7a1c1c;
	--texte: #2d2d2d;
	--gris-clair: #f0f0f0;
	--gris-filet: #d1d1d1;
}

/* ==========================================================================
   REPÈRES — le lien d'évitement et <main>.
   ==========================================================================

   `.lien-evitement` est le premier enfant de <body> (base.njk) : invisible
   tant qu'il n'a pas le focus (recette du 1×1 px découpé, la même que les
   libellés masqués de l'en-tête — jamais display:none, qui le retirerait de
   l'ordre de tabulation), il apparaît en haut à gauche au premier Tab et mène
   à <main id="contenu">. `main` est un enfant flexible de .content-wrapper
   (base.css) : `min-width: 0` pour qu'un tableau large ne l'élargisse pas.
   ========================================================================== */
.lien-evitement {
	position: absolute;
	left: 8px;
	top: 8px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	z-index: 1000;
	padding: 10px 16px;
	background: #fff;
	color: var(--rouge);
	font-family: 'ABeeZee', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	font-size: 14px;
	text-decoration: underline;
	border: 2px solid var(--rouge);
}

.lien-evitement:focus,
.lien-evitement:focus-visible {
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	overflow: visible;
	outline: 2px solid var(--rouge);
	outline-offset: 2px;
}

main {
	display: block;
	min-width: 0;
}

/* Les 35 px au-dessus du premier bloc de CHAQUE page. layout.css les posait
   par la chaîne `.row-has-fill + .row-full-width + .row` ; depuis que le
   corps est dans <main>, c'est la première rangée de <main> qui les reçoit. */
main > .row:first-child > .column > .column-inner {
	padding-top: 35px;
}

/* ==========================================================================
   TITRES — les familles et les tailles que l'ancien export écrivait en
   `style=` sur chaque titre, une fois pour toutes. Une classe par rôle ; les
   deux modificateurs d'alignement s'ajoutent (`titre-centre`, `titre-droite`).
   Seule différence avec l'export : le noir #000000 devient le #2d2d2d de
   l'en-tête et du pied.
   ========================================================================== */
.titre-page,
.titre-section,
.titre-bloc,
.titre-bloc-petit,
.titre-portrait {
	font-family: 'ABeeZee', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	font-weight: 400;
	font-style: normal;
	color: var(--texte);
	text-align: left;
}

.titre-page { font-size: 40px; }
.titre-section { font-size: 25px; }
.titre-bloc { font-size: 24px; }
.titre-bloc-petit { font-size: 20px; }
.titre-portrait { font-size: 15px; text-align: center; }

/* Abril Fatface : /bls/ et /produits/ (la feuille est dans leur extraStyles).
   La taille suit le rôle, pas la balise, pour qu'un changement de niveau de
   titre (h3 -> h4) ne change pas la page. */
.titre-abril,
.titre-abril-grand,
.titre-abril-moyen,
.titre-abril-etape,
.titre-abril-sous,
.titre-prix {
	font-family: 'Abril Fatface', 'Roboto Slab', Georgia, serif;
	font-weight: 400;
	font-style: normal;
	color: var(--texte);
	text-align: left;
}

.titre-abril-grand { font-size: 2rem; }   /* ex-h2 de la boutique */
.titre-abril-moyen { font-size: 1.75rem; } /* ex-h3 : nom d'un produit */
.titre-abril-etape { font-size: 1.5rem; color: var(--rouge); } /* ex-h4 : étape BLS — le rouge #DD3333 de l'export rejoint la charte */
.titre-abril-sous { font-size: 1.25rem; margin-top: 0; margin-bottom: 0.625rem; line-height: 1.2; } /* ex-h5 : sous-titre BLS — les marges de .do-custom-heading, que le h5 portait */
.titre-prix { font-size: 1rem; margin-top: 0; margin-bottom: 0.625rem; line-height: 1.2; } /* ex-h6 : prix — mêmes marges (.do-custom-heading) */

.titre-centre { text-align: center; }
.titre-droite { text-align: right; }

/* ==========================================================================
   COULEURS DU CORPS — la charte de l'en-tête et du pied, appliquée au texte.
   ==========================================================================

   Le thème vendu (assets/theme/style.min.css) peint tout lien en rose
   `#c36` et le passe au bleu marine `#336` au survol : deux couleurs que
   rien d'autre sur le site n'emploie. Les liens du corps prennent le rouge
   de la charte, soulignés (la couleur seule ne suffit pas à distinguer un
   lien dans un paragraphe), et s'assombrissent au survol comme les boutons.

   PORTÉE : `main a` — le corps seulement. L'en-tête et le pied sont hors de
   <main> et gardent leurs propres règles (entete.css, pied.css). Les boutons
   (`.btn.btn-color-danger`, layout.css), les onglets (tabs.css) et les liens
   posés dans un titre (`.custom-heading a`, layout.css) ont tous une
   spécificité de classe : ils l'emportent sur `main a` (0,0,2) et ne
   changent pas. Le thème, lui, est à 0,0,1 (`a`) et 0,1,1 (`a:hover`) —
   `main a:hover` (0,1,2) le bat.

   L'anneau de focus clavier est celui de l'en-tête (2 px, rouge charte).
   ========================================================================== */
main a {
	color: var(--rouge);
	text-decoration: underline;
	text-underline-offset: 2px;
}

main a:hover,
main a:focus,
main a:active {
	color: var(--rouge-fonce);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

main a:focus-visible {
	outline: 2px solid var(--rouge);
	outline-offset: 2px;
}

/* Les filets de séparation (`.separator`, layout.css) étaient en #EBEBEB,
   invisibles sur blanc : le gris des filets de la charte (#d1d1d1, celui
   que /folklore/ posait déjà en ligne sur ses séparateurs pointillés). */
.separator .sep-holder .sep-line,
.separator.sep-color-grey .sep-line {
	border-color: var(--gris-filet);
}

/* ==========================================================================
   TÉLÉPHONE — la grille des portraits et le retour en haut de page.
   ==========================================================================

   `.grille-portraits` (les rangées de /le-cercle/) : sous 768 px, les
   colonnes Bootstrap sont toutes à 100 % — quarante portraits les uns sous
   les autres, 23 000 px de page. Deux par rangée suffisent à la lecture et
   divisent la hauteur par deux. `aspect-ratio: 1/1` + `object-fit: cover`
   recadrent en carré les photos qui ne le sont pas (la consigne du CMS le
   demande, la moitié des fiches ne la suivent pas) : les images d'une même
   rangée ont la même hauteur à toutes les largeurs. Le logo d'attente
   (LOGO_SECOURS, eleventy.config.js) est `contain` : un logo ne se recadre
   pas.

   LA RANGÉE EST UNE BOÎTE FLEXIBLE, PAS UNE SUITE DE FLOTTANTS, et ce n'est
   pas négociable : les NOMS ne sont pas de même hauteur (« Marine Dominguez
   y Costa » tient sur trois lignes à 390 px, « Gwenaëlle Santerre » sur
   deux). Avec des `float:left` à 50 %, la cellule 3 ne peut pas passer sous
   une cellule 1 plus haute que la 2 : elle se cale sous la 2, à droite, et
   la 4 descend d'une cellule entière — mesuré sur la première rangée du
   bureau. En flex avec retour à la ligne, chaque ligne prend la hauteur de
   sa cellule la plus haute et rien ne se cale de travers. Les pseudo-
   éléments de clearfix de `.row` (layout.css) deviendraient des items
   flexibles vides : ils sont retirés sur ces rangées.
   ========================================================================== */
.grille-portraits {
	display: flex;
	flex-wrap: wrap;
}

.grille-portraits::before,
.grille-portraits::after {
	display: none;
}

/* `min-width: 0` : un item flexible ne descend pas sous la largeur de son
   contenu par défaut, et le contenu ici est une photo de 4 000 px — sans
   cette ligne la cellule s'élargit à la rangée entière et la voisine passe
   à la ligne. */
.grille-portraits .column {
	float: none;
	min-width: 0;
}

.grille-portraits .single-image {
	text-align: center;
}

/* PAS D'AGRANDISSEMENT (décision humaine, parley du 7 septembre 2026) : une
   photo plus petite que la colonne n'est pas étirée, une plus grande est
   plafonnée à la colonne, et le carré se fait sur cette largeur-là.

   La mécanique : les deux enveloppes (`.figure-wrap`, `.single-image-wrapper`,
   layout.css) sont des `inline-block` à `max-width: 100 %`, donc larges
   comme la photo NATURELLE (l'attribut width) sans dépasser la colonne ; la
   photo remplit son enveloppe (`width: 100 %`) et `aspect-ratio` en fait un
   carré. Une photo à `width: auto` ne suffirait pas : quand ses deux
   dimensions sont automatiques, le navigateur garde son rapport naturel et
   ignore `aspect-ratio`. */
.grille-portraits .single-image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.grille-portraits .single-image img[src="/media/2024-09-CM.png"] {
	object-fit: contain;
}

@media (max-width: 767.98px) {
	.grille-portraits .column {
		width: 50%;
	}
}

/* « Haut de page » : un lien ordinaire en fin de <main>, masqué au-dessus
   de 768 px (les pages y tiennent en quelques écrans et la molette suffit),
   fixé en bas à droite au téléphone. Mêmes couleurs que les boutons du
   corps ; `aria`-rien : c'est un lien avec un libellé, il se suffit. */
.retour-haut {
	display: none;
}

@media (max-width: 767.98px) {
	.retour-haut {
		display: inline-block;
		position: fixed;
		right: 12px;
		bottom: 12px;
		z-index: 900;
		padding: 8px 12px;
		background: #fff;
		color: var(--rouge);
		border: 2px solid var(--rouge);
		font-family: 'ABeeZee', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
		font-size: 13px;
		text-decoration: none;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	}

	.retour-haut:hover,
	.retour-haut:focus {
		background: var(--rouge);
		color: #fff;
		text-decoration: none;
	}
}

/* ==========================================================================
   .etape-bls — les 15 rangées d'étapes du guide BLS : icône (col-sm-3) +
   titre/texte (col-sm-9). Flex met l'icône au centre vertical du texte (au
   lieu de caler en haut). Seule la neutralisation des pseudo-éléments de
   clearfix de `.row` et des colonnes flottantes est reprise de
   .grille-portraits ci-dessus (`align-items: center` est propre à cette
   rangée-ci, .grille-portraits n'en a pas besoin) : les pseudo-éléments
   deviendraient sinon des items flexibles vides, et les colonnes
   flottantes sont neutralisées (`float: none; min-width: 0`) sans toucher à
   leur largeur en pourcentage, qui sert de base flexible. `.etape-bls-droite`
   inverse l'ordre VISUEL des deux colonnes sans toucher à l'ordre du DOM
   (cf. le commentaire de la macro dans bls.njk) : l'ordre de lecture reste
   icône puis texte sur toutes les tailles d'écran, y compris au téléphone où
   cette règle ne s'applique pas (flex commence à 768 px seulement, les
   colonnes reprennent leur empilement normal en dessous).

   `min-width` plutôt que le `max-width: 767.98px` des blocs voisins de ce
   fichier : ce n'est pas un correctif mobile mais une règle PROPRE au
   desktop, au même point de bascule que la grille elle-même (`.col-sm-*`
   passe au flottant à `min-width: 768px`, layout.css ligne 11) — en dessous,
   les colonnes s'empilent déjà normalement sans qu'aucune règle ne l'impose.
   ========================================================================== */
@media (min-width: 768px) {
	.etape-bls {
		display: flex;
		align-items: center;
	}

	.etape-bls::before,
	.etape-bls::after {
		display: none;
	}

	.etape-bls > .column {
		float: none;
		min-width: 0;
	}

	.etape-bls-droite {
		flex-direction: row-reverse;
	}
}
