/* ==========================================================================
   Barre de navigation
   ==========================================================================
   Sticky et dans le flux : position sticky colle la barre en haut au
   défilement sans la sortir du flux, donc le contenu commence dessous et ne
   passe jamais dessous. C'est ce qui rend inutile le margin-top négatif que
   l'ancien thème injectait sur toutes les pages.

   Deux traitements, au choix dans l'outil de personnalisation. Le rouge
   translucide du site actuel est abandonné dans les deux cas : il n'a d'intérêt
   que si la barre déborde sur le contenu, ce qu'on ne veut plus.

   ⚠️ Ce fichier commençait sans son `/*` d'ouverture, avalé par le découpage de
   l'ancienne feuille unique. Conséquence : le navigateur prenait tout l'en-tête
   pour un prélude de règle et jetait la première déclaration du fichier, donc
   le `position: sticky` de la barre. La barre ne collait sur aucune page. Les
   feuilles 02, 03 et 05 souffrent du même défaut, à corriger de la même façon.
   ========================================================================== */

.site-entete {
	position: sticky;
	top: 0;
	z-index: 50;
	/*
	 * Ombre très basse : elle ne se voit pas quand la page est en haut, mais
	 * détache la barre du contenu qui défile dessous. Sans elle, un article qui
	 * passe sous la barre neutre donne l'impression de la traverser.
	 */
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.05);
}

/*
 * Contexte d'empilement autour de tout le contenu de page.
 *
 * Leaflet monte ses calques jusqu'à z-index 1000 : sur une fiche City Guide, la
 * carte passait par-dessus la barre collée. Plutôt que de surenchérir sur le
 * z-index de la barre, ce qui l'aurait fait passer devant le lien d'évitement
 * et le panneau, on enferme le contenu dans son propre contexte. Tout ce qui
 * vit dans <main> reste alors sous la barre, quel que soit son z-index.
 */
.site-contenu {
	position: relative;
	z-index: 0;
	/*
	 * ⚠️ Garde-fou du visuel d'article en pleine largeur.
	 *
	 * Ce visuel sort de sa colonne par la technique du 100vw. Or 100vw compte la
	 * barre de défilement, présente en permanence sous Windows : sans découpe, la
	 * page gagnerait une quinzaine de pixels de défilement horizontal sur toutes
	 * les pages d'article.
	 *
	 * clip et non hidden : hidden ferait de ce bloc un conteneur de défilement,
	 * ce qui casserait le position: sticky de tout élément collant à l'intérieur.
	 * La barre de navigation est en dehors de <main>, elle n'est pas concernée,
	 * mais la règle vaut pour la suite.
	 */
	overflow-x: clip;
	/*
	 * Le lien « Aller au contenu » vise cette ancre. Sans marge de défilement,
	 * l'atterrissage se fait sous la barre collée et les premières lignes sont
	 * masquées.
	 */
	scroll-margin-top: var(--ir-hauteur-barre);
}

/*
 * ⚠️ Neutralisation du rythme vertical du conteneur.
 *
 * .site-entete__barre porte aussi la classe .conteneur, pour hériter de sa
 * largeur et de ses gouttières. Or 01-socle.css pose sur tout conteneur la
 * règle « .conteneur > * + * { margin-top: var(--ir-rythme-section) } », qui
 * sépare les grandes sections d'une page. Appliquée ici, elle donnait au groupe
 * de boutons une marge haute allant jusqu'à 6 rem : le logo restait en haut,
 * les boutons descendaient, et la barre doublait de hauteur.
 *
 * C'est le prix de la double casquette de .conteneur, à la fois enveloppe de
 * page et barre en ligne. On annule donc la règle ici, là où elle n'a pas de
 * sens : dans une rangée, ce sont gap et align-items qui espacent.
 */
.site-entete__barre > * + * {
	margin-top: 0;
}

/*
 * Trois colonnes, 1fr auto 1fr.
 *
 * ⚠️ C'est la grille qui centre le logo, et elle seule. Les deux colonnes
 * latérales valant la même fraction, le logo tombe au milieu de la barre quel
 * que soit ce qu'on met à droite ou à gauche. Ne pas remplacer par des marges
 * automatiques : le centrage se décalerait à la première action ajoutée.
 *
 * La hauteur vient du jeton, employé ailleurs qu'ici : le carrousel de
 * l'accueil s'en sert pour occuper la fenêtre moins la barre, et les ancres
 * pour ne pas atterrir dessous.
 */
.site-entete__barre {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: var(--ir-esp-2);
	align-items: center;
	min-height: var(--ir-hauteur-barre);
	/*
	 * Pas de marge interne verticale : les boutons font déjà 2,75 rem de haut,
	 * la moindre marge s'ajouterait à leur hauteur au lieu de s'y fondre et
	 * regonflerait la barre.
	 */
	padding-block: 0;
}

@media (min-width: 64rem) {
	.site-entete__barre {
		gap: var(--ir-esp-4);
	}
}

.site-entete__gauche {
	display: flex;
	align-items: center;
	justify-self: start;
}

/*
 * En paysage sur un téléphone, la hauteur utile tombe sous 400 px. Une barre à
 * 56 px y mange près d'un sixième de l'écran : on la resserre sans descendre
 * sous la taille de cible tactile des boutons.
 */
/*
 * ⚠️ C'est le **jeton** qu'on abaisse, pas la hauteur de la barre.
 *
 * Cette règle posait `min-height: 3rem` en direct. La barre rapetissait donc,
 * mais tout ce qui s'aligne sur elle continuait de lire le jeton : le panneau
 * s'ancrait quatre pixels trop bas et laissait voir la page entre la barre et
 * lui, et le carrousel de l'accueil retranchait une hauteur qu'il n'avait plus.
 * Un décalage invisible sur un écran d'ordinateur, systématique sur un
 * téléphone tenu à l'horizontale.
 *
 * En paysage sur un téléphone, la hauteur utile tombe sous 400 px : une barre à
 * 72 px y mangerait près d'un cinquième de l'écran. On la resserre donc, mais
 * sans descendre sous la taille de cible tactile des boutons.
 */
@media (orientation: landscape) and (max-height: 30rem) {
	:root {
		--ir-hauteur-barre: 3.25rem;
	}
}

.site-entete__marque {
	/* Doit pouvoir se comprimer : c'est le seul élément élastique de la barre. */
	min-width: 0;
	justify-self: center;
	text-align: center;
}

/*
 * Logo. Deux fichiers possibles, un pour fond clair et un pour fond sombre :
 * voir infrarouge_logo_contexte_id(). Le repli texte reprend la typographie des
 * titres, pour que le site reste identifiable même sans fichier déposé.
 */
.site-logo {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

/*
 * L'image est fournie par la cliente, on ne maîtrise ni ses proportions ni sa
 * définition : hauteur bornée, largeur libre, et jamais plus large que la place
 * disponible. object-fit évite l'écrasement si le fichier est très allongé.
 */
.site-logo__image {
	display: block;
	width: auto;
	max-width: 100%;
	/*
	 * ⚠️ La respiration autour du logo se règle des deux côtés : un peu moins de
	 * logo, un peu plus de barre. Tout prendre sur le logo le rendrait illisible
	 * sur mobile, tout mettre sur la hauteur donnerait une barre lourde qui
	 * mange la lecture à chaque page.
	 */
	max-height: 1.75rem;
	border-radius: 0;
	object-fit: contain;
}

.site-logo__texte {
	font-family: var(--ir-police-titre);
	font-size: var(--ir-t-m);
	font-weight: 700;
	line-height: 1.1;
}

/* La barre reste la seule zone où le logo est aussi une cible tactile. */
.site-logo--barre {
	min-height: 2.75rem;
}

@media (min-width: 48rem) {
	.site-logo__image {
		max-height: 2.125rem;
	}

	.site-logo__texte {
		font-size: var(--ir-t-3);
	}
}

@media (orientation: landscape) and (max-height: 30rem) {
	.site-logo--barre .site-logo__image {
		max-height: 1.75rem;
	}
}

.site-logo--panneau .site-logo__image {
	max-height: 3rem;
}

.site-logo--panneau .site-logo__texte {
	font-size: var(--ir-t-xl);
}

/*
 * Le logo du pied est un repère, pas une signature : il n'a pas à peser autant
 * que celui de la barre, qui est le point de retour du site.
 */
.site-logo--pied .site-logo__image {
	max-height: 2.25rem;
}

.site-logo--pied .site-logo__texte {
	font-size: var(--ir-t-4);
}

.site-entete__actions {
	display: flex;
	gap: var(--ir-esp-2);
	align-items: center;
	justify-self: end;
}

/*
 * Alignement vertical des trois éléments de la barre.
 *
 * Loupe et burger sont des <button>, « S'abonner » est un <a> : trois éléments
 * de nature différente, dont deux portent une icône et le troisième du texte.
 * Le centrage du conteneur ne suffit pas, chacun garde ses propres réglages
 * hérités (marge interne de .bouton, interligne, alignement de ligne de base).
 *
 * On force donc la même hauteur, le même centrage et le même interligne sur les
 * trois, plutôt que de compter sur align-items seul.
 */
.site-entete__actions > .entete-bouton,
.site-entete__actions > .bouton--abonnement {
	height: 2.75rem;
	align-self: center;
	margin: 0;
	padding-block: 0;
	line-height: 1;
}

@media (min-width: 48rem) {
	.site-entete__actions {
		gap: var(--ir-esp-3);
	}
}

/*
 * 2,75 rem, soit 44 px : le minimum pour être atteint au pouce sans viser.
 * L'icône fait 20 px, c'est la zone autour qui fait la cible, pas le dessin.
 */
.entete-bouton {
	display: inline-flex;
	min-width: 2.75rem;
	/*
	 * Hauteur ferme et non plancher. Avec min-height, le bouton d'abonnement
	 * gardait la marge verticale de .bouton et se retrouvait plus haut que les
	 * boutons d'icône : les deux boîtes étaient bien centrées l'une par rapport
	 * à l'autre, mais elles n'avaient pas la même taille, et le décalage se
	 * voyait sur le texte. Les deux partagent maintenant exactement 2,75 rem.
	 */
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: var(--ir-arrondi-bouton);
	background: none;
	color: inherit;
	cursor: pointer;
}

/*
 * L'état ouvert est déjà porté par aria-expanded, on s'en sert plutôt que
 * d'attendre une classe du script : la recherche dépliée se voit alors sans
 * avoir à chercher le champ des yeux.
 */
.entete-bouton:hover,
.entete-bouton[aria-expanded="true"] {
	background: rgba(0, 0, 0, 0.07);
}

/*
 * Le bouton d'abonnement est un produit, il reste visible à toutes les tailles.
 * Sur un écran de 320 px il doit cohabiter avec le logo, la recherche et le
 * burger : à sa taille de base, la ligne débordait. On le resserre plutôt que
 * de le masquer.
 */
.site-entete .bouton--abonnement {
	display: inline-flex;
	height: 2.75rem;
	align-items: center;
	/* La hauteur est portée par height, la marge verticale de .bouton s'annule. */
	padding-block: 0;
	padding-inline: var(--ir-esp-3);
	font-size: var(--ir-t-xs);
	line-height: 1;
	white-space: nowrap;
}

@media (min-width: 48rem) {
	.site-entete .bouton--abonnement {
		padding-inline: var(--ir-esp-4);
		font-size: var(--ir-t-s);
	}
}

/*
 * ⚠️ La navigation en ligne n'existe plus, ni en balisage ni en style.
 *
 * Le burger et son panneau servent à toutes les tailles, décision confirmée le
 * 21/08/2026 par les maquettes. Les règles .nav-principale étaient conservées
 * « au cas où » alors que header.php ne rend plus ce balisage : du style mort
 * qui laissait croire à une navigation repliable.
 *
 * Rétablir une navigation en ligne se ferait dans le panneau, qui a déjà ses
 * deux colonnes, pas en ressuscitant ce bloc.
 */

/*
 * Recherche repliée sous la barre. Elle fait partie de l'en-tête collé : elle
 * reste donc accessible pendant le défilement, sans rien recouvrir.
 */
.site-entete__recherche {
	padding-block: var(--ir-esp-3);
	border-top: 1px solid var(--ir-bordure);
}

/*
 * Le formulaire et la croix de fermeture sur une même ligne.
 *
 * ⚠️ La neutralisation du rythme vertical est obligatoire ici, et c'est le même
 * piège que sur la barre. .conteneur porte « > * + * { margin-top:
 * var(--ir-rythme-section) } » pour séparer les grandes sections d'une page :
 * avec deux enfants au lieu d'un, la croix se retrouvait plusieurs rem sous le
 * champ et la barre de recherche doublait de hauteur.
 */
.site-entete__recherche-rangee {
	display: flex;
	gap: var(--ir-esp-2);
	align-items: center;
}

.site-entete__recherche-rangee > * + * {
	margin-top: 0;
}

/* Le formulaire prend toute la place, la croix ne prend que la sienne. */
.site-entete__recherche-rangee .recherche {
	flex: 1 1 auto;
	min-width: 0;
}

.site-entete__recherche-fermer {
	flex: 0 0 auto;
}

/* ==========================================================================
   Variante rouge plein
   ==========================================================================
   L'accent secondaire de la charte, et non l'accent principal : en bandeau
   permanent, le rouge vif est trop présent et écrase les photos. Le rouge
   profond tient le même rôle d'identité sans occuper autant de place.
   Le panneau suit la barre, il en est le prolongement.
   ========================================================================== */

.site-entete--rouge {
	background: var(--ir-accent-fonce);
	color: var(--ir-fond);
}

.site-entete--rouge .entete-bouton:hover,
.site-entete--rouge .entete-bouton[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.16);
}

.site-entete--rouge .bouton--abonnement {
	background: var(--ir-fond);
	color: var(--ir-accent-fonce);
}

/*
 * Survol du bouton d'abonnement : agrandissement discret, pas de changement de
 * teinte.
 *
 * Le fond passait au rose pâle de la charte. Sur le bordeaux du bandeau, ce
 * saut de teinte est plus voyant qu'élégant, et il attire l'œil sur une
 * couleur plutôt que sur l'action.
 *
 * Le blanc est conservé. Le gris de fond de page a été mesuré comme variante :
 * #f2f2f2 sur le bordeaux donne environ 8 pour 1, contre 8,8 pour 1 en blanc pur.
 * Les deux passent AA, mais l'écart entre les deux états est trop faible pour
 * se voir, la variation ne servirait donc à rien. Le mouvement dit mieux que la
 * teinte que l'élément répond.
 */
.site-entete .bouton--abonnement {
	transition: transform 0.15s ease;
}

@media (hover: hover) {
	.site-entete .bouton--abonnement:hover {
		transform: scale(1.05);
	}
}

/* Le focus clavier doit se voir sans dépendre du survol. */
.site-entete .bouton--abonnement:focus-visible {
	transform: scale(1.05);
}

.site-entete--rouge .bouton--abonnement:hover,
.site-entete--rouge .bouton--abonnement:focus {
	background: var(--ir-fond);
	color: var(--ir-accent-fonce);
}

/*
 * Un agrandissement au survol n'a rien à faire chez qui a demandé moins
 * d'animation : le bouton reste alors strictement immobile.
 */
@media (prefers-reduced-motion: reduce) {
	.site-entete .bouton--abonnement,
	.site-entete .bouton--abonnement:hover,
	.site-entete .bouton--abonnement:focus-visible {
		transform: none;
		transition: none;
	}
}

/*
 * Le bouton du formulaire de recherche est un .bouton, donc rouge vif : posé
 * sur le rouge profond de la barre, il était illisible. Même traitement que le
 * bouton d'abonnement, c'est le seul contraste tenable sur ce fond.
 */
.site-entete--rouge .recherche__bouton {
	background: var(--ir-fond);
	color: var(--ir-accent-fonce);
}

.site-entete--rouge .recherche__bouton:hover,
.site-entete--rouge .recherche__bouton:focus {
	background: var(--ir-rose);
	color: var(--ir-accent-fonce);
}

.site-entete--rouge .site-entete__recherche {
	border-top-color: rgba(255, 255, 255, 0.25);
}

.site-entete--rouge :focus-visible {
	outline-color: var(--ir-fond);
}

/* ==========================================================================
   Variante neutre
   ==========================================================================
   Le rouge ne sert plus qu'au bouton et aux survols.
   ========================================================================== */

.site-entete--neutre {
	border-bottom: 1px solid var(--ir-bordure);
	background: var(--ir-fond);
	color: var(--ir-texte);
}

.site-entete--neutre .entete-bouton:hover,
.site-entete--neutre .entete-bouton[aria-expanded="true"] {
	color: var(--ir-accent);
}

/* ==========================================================================
   Burger
   ========================================================================== */

.burger {
	display: block;
	width: 1.375rem;
}

.burger__trait {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.burger__trait + .burger__trait {
	margin-top: 5px;
}

/*
 * Le burger devient une croix quand le panneau est ouvert.
 *
 * C'est ce qui permet au panneau de n'avoir aucun bouton de fermeture à lui :
 * la barre reste visible au-dessus, et le bouton qui a ouvert referme. Deux
 * fermetures à l'écran en même temps ne font qu'ajouter une hésitation.
 *
 * L'état est lu sur aria-expanded, déjà tenu à jour par le script pour les
 * lecteurs d'écran. Une classe de plus serait un second état à synchroniser,
 * donc une occasion de les voir diverger.
 *
 * Les trois traits sont conservés : celui du milieu s'efface, les deux autres
 * se rejoignent. Le mouvement dit ce qui vient de se passer, là où un dessin
 * remplacé par un autre ne dit rien.
 */
.entete-bouton--burger .burger__trait {
	transition: transform 0.2s ease, opacity 0.15s ease;
}

.entete-bouton--burger[aria-expanded="true"] .burger__trait:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.entete-bouton--burger[aria-expanded="true"] .burger__trait:nth-child(2) {
	opacity: 0;
}

.entete-bouton--burger[aria-expanded="true"] .burger__trait:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/*
 * ⚠️ Le fond de survol est retiré sur le burger ouvert, contrairement aux
 * autres boutons d'en-tête : la croix est déjà l'état actif, un aplat en plus
 * la ferait passer pour un bouton enfoncé.
 */
.site-entete .entete-bouton--burger[aria-expanded="true"],
.site-entete--rouge .entete-bouton--burger[aria-expanded="true"],
.site-entete--neutre .entete-bouton--burger[aria-expanded="true"] {
	background: none;
}

@media (prefers-reduced-motion: reduce) {
	.entete-bouton--burger .burger__trait {
		transition: none;
	}
}

/* ==========================================================================
   Panneau déroulant
   ==========================================================================
   ⚠️ Le panneau n'occupe plus tout l'écran. Il se déroule depuis le haut, sous
   la barre, sur la hauteur de son seul contenu, et laisse le reste de la page
   visible en dessous. Un plein écran pour une dizaine de rubriques coupe la
   lecture plus qu'il ne l'aide, et oblige à refermer pour se resituer.

   Il garde le rouge profond de la barre, dont il est le prolongement, et sa
   typographie.

   Une hauteur maximale reste posée, en fraction de la fenêtre : sans elle, un
   menu à trente entrées redeviendrait un plein écran par accident.
   ========================================================================== */

/* ==========================================================================
   Voile derrière le panneau
   ==========================================================================
   ⚠️ Le blocage du défilement n'était pas implémenté.

   navigation.js pose et retire une classe `panneau-ouvert` sur <html> depuis le
   premier jour, avec un commentaire disant qu'elle bloque le défilement de la
   page. Aucune feuille ne la lisait : le doigt continuait de faire défiler
   l'article derrière le panneau. La classe existait, l'effet non.

   Les deux règles vivent ici parce qu'elles vont ensemble : ce qui assombrit la
   page est aussi ce qui l'immobilise.
   ========================================================================== */

.panneau-ouvert {
	overflow: hidden;
}

.panneau-voile {
	display: none;
}

.panneau-ouvert .panneau-voile {
	display: block;
	position: fixed;
	inset: 0;
	/*
	 * Sous la barre (50) et sous le panneau (100), au-dessus du contenu de page
	 * (0). C'est ce qui laisse l'en-tête à sa couleur pendant que le reste
	 * s'assombrit.
	 */
	z-index: 40;
	background: rgba(0, 0, 0, 0.45);
}

.panneau {
	position: fixed;
	/*
	 * ⚠️ La hauteur vient du jeton, jamais d'une valeur recopiée.
	 *
	 * Elle l'était : 3rem ici, 3,5rem dans un bloc de média, tous deux figés au
	 * moment où la barre mesurait cela. Quand la barre est passée à 3,5 puis
	 * 4rem, le panneau a continué de démarrer à l'ancienne hauteur et **il
	 * recouvrait les huit derniers pixels de la barre**. Le chevauchement se
	 * lisait comme une couture, et l'on croyait à deux rouges différents alors
	 * que les deux surfaces sont exactement #8D0726, mesuré au pixel.
	 */
	top: var(--ir-hauteur-barre);
	right: 0;
	left: 0;
	z-index: 100;
	max-height: min(70vh, 34rem);
	overflow-y: auto;
	/* Le défilement du panneau ne doit pas entraîner la page derrière lui. */
	overscroll-behavior: contain;
	background: var(--ir-accent-fonce);
	color: var(--ir-fond);
	/*
	 * ⚠️ L'ombre ne doit rien peindre au-dessus du panneau.
	 *
	 * Avec `0 12px 24px`, elle s'étendait de 12 - 24/2 = 0, c'est-à-dire jusqu'au
	 * bord supérieur : le panneau passant devant la barre, elle assombrissait ses
	 * quatre derniers pixels. Mesuré au pixel, #8a0625 contre #8d0726. De là
	 * l'impression de deux bordeaux différents alors que les deux surfaces
	 * portent exactement le même jeton.
	 *
	 * L'étalement négatif rentre l'ombre : elle ne commence que sous le panneau,
	 * là où elle a un sens, le panneau étant posé sur la page et non sur la barre.
	 */
	/*
	 * ⚠️ Deux ombres, et la première est un filet, pas une ombre.
	 *
	 * `inset 0 1px 0` pose une ligne claire d'un pixel sur le bord haut du
	 * panneau. Elle sert à démarquer le panneau de la barre, demandé le
	 * 25/08/2026 : les deux surfaces portant le même bordeaux et se touchant
	 * sans écart, rien ne disait plus où finissait l'une et où commençait
	 * l'autre.
	 *
	 * ⚠️ Un filet clair, et non un second rouge. La règle du site est un seul
	 * bordeaux, `--ir-accent-fonce` : éclaircir le panneau rouvrirait la
	 * question des deux rouges réglée le 10/08. Une ligne blanche très diluée
	 * se lit comme un pli entre deux surfaces d'une même couleur, ce qui est
	 * exactement ce qu'on veut dire ici.
	 *
	 * La seconde ombre reste rentrée par son étalement négatif, pour ne rien
	 * peindre au-dessus du panneau. Voir plus haut.
	 */
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		0 14px 22px -6px rgba(0, 0, 0, 0.28);
}

/*
 * Bandeau ancré sous la barre, en deux colonnes.
 *
 * ⚠️ Ce n'est pas un panneau plein écran. La décision du 10/08 qui l'imposait à
 * toutes les tailles est caduque depuis le 21/08 : les maquettes montrent un
 * bandeau pleine largeur sous la barre, et c'est ce que le thème rendait déjà.
 *
 * Rubriques à gauche sur deux colonnes, derniers numéros et bouton
 * d'abonnement à droite. Sur mobile, tout s'empile dans cet ordre : les
 * rubriques d'abord, puisque c'est ce qu'on vient chercher.
 */
.panneau__interieur {
	display: flex;
	flex-direction: column;
	gap: var(--ir-rythme-bloc);
	padding-block: var(--ir-esp-4);
	padding-bottom: calc(var(--ir-esp-4) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 48rem) {
	.panneau__interieur {
		flex-direction: row;
		gap: clamp(2rem, 1rem + 5vw, 4.5rem);
		align-items: flex-start;
		padding-block: 28px 24px;
	}
}

.panneau__nav {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Deux colonnes de rubriques dès qu'il y a la place, une seule sur mobile.
 *
 * La borne de 560 px vient des maquettes : au-delà, les deux colonnes
 * s'écartent tellement que l'œil ne les rattache plus l'une à l'autre.
 */
.panneau__liste {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ir-esp-2) var(--ir-esp-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48rem) {
	.panneau__liste {
		grid-template-columns: 1fr 1fr;
		gap: 14px 40px;
		max-width: 560px;
	}
}

/*
 * Lien en bloc avec marge interne : la zone cliquable court sur toute la
 * largeur de sa colonne au lieu de s'arrêter à la fin du mot. C'est ce qui rend
 * un menu utilisable en marchant.
 *
 * Corps T4, qui vaut exactement les 18 px des maquettes sur mobile comme sur
 * grand écran. Survol en rose pâle, la seule couleur claire de la charte qui
 * tienne sur ce bordeaux.
 */
.panneau__liste a {
	display: block;
	padding-block: var(--ir-esp-2);
	color: var(--ir-fond);
	font-family: var(--ir-police-titre);
	font-size: var(--ir-t-4);
	font-weight: var(--ir-w-4);
	letter-spacing: var(--ir-ls-4);
	line-height: var(--ir-lh-4);
	text-decoration: none;
	transition: color 0.15s ease;
}

@media (min-width: 48rem) {
	.panneau__liste a {
		padding-block: 0;
	}
}

.panneau__liste a:hover,
.panneau__liste a:focus,
.panneau__liste .current-menu-item > a,
.panneau__liste .current-menu-ancestor > a {
	color: var(--ir-rose);
}

/*
 * Colonne de droite : étiquette, trois couvertures, bouton d'abonnement.
 *
 * Elle ne s'étire pas, sa largeur est celle de ses couvertures. Sur mobile, en
 * revanche, elle prend toute la place pour que le bouton reste pleine largeur.
 */
.panneau__aside {
	display: flex;
	flex-direction: column;
	gap: var(--ir-esp-3);
	align-items: stretch;
}

@media (min-width: 48rem) {
	.panneau__aside {
		flex: 0 0 auto;
		gap: 12px;
		align-items: flex-start;
	}
}

/*
 * ⚠️ Corps qui s'écarte : 11 px dans les maquettes, Micro vaut 13. Un libellé
 * en capitales interlettrées sous 13 px devient difficile à lire, et c'est
 * exactement ce que le niveau Micro protège.
 */
.panneau__etiquette {
	margin: 0;
	color: rgba(255, 255, 255, 0.55);
	font-size: var(--ir-t-micro);
	font-weight: var(--ir-w-micro);
	letter-spacing: var(--ir-ls-micro);
	line-height: var(--ir-lh-micro);
	text-transform: uppercase;
}

.panneau__numeros {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Les couvertures mènent à l'offre, dans le panneau comme dans le pied de page.
 *
 * ⚠️ Le lien enveloppe la couverture **et** son mois : la cible fait alors la
 * hauteur du bloc entier, ce qui compte au pouce sur une image de 72 px de
 * large. Le mois est en aria-hidden, le nom accessible du lien étant porté par
 * son aria-label, qui dit où l'on va.
 *
 * ⚠️ Aucun effet au survol, retiré le 25/08/2026. La couverture se soulevait de
 * deux pixels : mouvement gratuit sur une image qui ne change pas d'état, et le
 * curseur suffit à dire que c'est cliquable. Ne pas le réintroduire.
 */
.panneau__numero-lien,
.magazine__lien {
	display: flex;
	flex-direction: column;
	gap: inherit;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

/*
 * ⚠️ La largeur est dictée par le mois, pas par la couverture.
 *
 * Les maquettes donnaient 78 px, la largeur du visuel. Or c'est le texte en
 * dessous qui commande : « Septembre 2026 » ne tient pas dans 78 px et passait
 * sur deux lignes, ce qui décalait la ligne des trois mois et déséquilibrait le
 * bloc. Le plus long des douze mois fixe donc la largeur, et la couverture s'y
 * adapte : elle garde son rapport 3/4 quoi qu'il arrive.
 */
.panneau__numero {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
	width: 88px;
}

@media (min-width: 48rem) {
	.panneau__numero {
		width: 96px;
	}
}

/*
 * Rapport 3/4 imposé à la couverture : les fichiers déposés par la rédaction
 * n'ont pas tous les mêmes proportions, et trois couvertures de hauteurs
 * différentes désalignent la ligne des mois en dessous.
 */
.panneau__numero img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	/* Présentation commune aux trois endroits, voir 02-composants.css. */
}

.panneau__parution {
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--ir-t-micro);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.3;
	text-align: center;
	/*
	 * Une seule ligne, toujours. La largeur ci-dessus est calculée pour le plus
	 * long des mois ; si un texte plus long était saisi, mieux vaut qu'il
	 * déborde visiblement que de casser l'alignement des trois colonnes en
	 * silence.
	 */
	white-space: nowrap;
}

/*
 * Bouton d'abonnement du panneau : blanc sur bordeaux, l'inverse du bouton de
 * la barre. Il prend toute la largeur de sa colonne.
 *
 * ⚠️ Corps qui s'écarte : 12 px dans les maquettes, Micro vaut 13.
 */
.panneau__abonnement {
	display: flex;
	min-height: 2.75rem;
	align-items: center;
	justify-content: center;
	padding: 11px var(--ir-esp-4);
	/* Voir le survol plus bas : le filet est posé dès ici pour ne rien décaler. */
	border: 1px solid transparent;
	border-radius: var(--ir-arrondi-bouton);
	background: var(--ir-fond);
	color: var(--ir-accent-fonce);
	font-size: var(--ir-t-micro);
	font-weight: 800;
	letter-spacing: var(--ir-ls-micro);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

@media (min-width: 48rem) {
	.panneau__abonnement {
		width: 100%;
	}
}

/*
 * Survol : le bouton se vide et le panneau reparaît derrière, texte et filet en
 * blanc. C'est l'inverse exact de l'état de repos, donc un changement qu'on ne
 * peut pas manquer.
 *
 * ⚠️ Choisi pour le contraste, pas pour l'effet. Le survol précédent posait le
 * bordeaux sur le rose pâle : 6,4 pour 1, ce qui passe la norme mais reste deux
 * rouges l'un sur l'autre, et le texte s'y noyait. Blanc sur le bordeaux du
 * panneau donne 9,6 pour 1.
 *
 * ⚠️ Le rouge vif n'aurait pas convenu : blanc sur #e83f53 tombe à 4 pour 1,
 * sous le seuil, et l'étiquette fait 13 px, trop petite pour bénéficier de la
 * tolérance accordée aux grands corps.
 *
 * Le filet transparent est posé dès le repos : ajouté au seul survol, il
 * décalerait le texte d'un pixel au passage de la souris.
 */
.panneau__abonnement:hover,
.panneau__abonnement:focus {
	border-color: var(--ir-fond);
	background: transparent;
	color: var(--ir-fond);
}

.panneau :focus-visible {
	outline-color: var(--ir-fond);
}

/*
 * ⚠️ Le blocage du défilement est revenu, et l'aller-retour vaut d'être connu.
 *
 * Il avait été posé pour un panneau plein écran, puis retiré quand le panneau
 * est devenu un bandeau : la page restait visible derrière et devait rester
 * parcourable, faute de quoi le site paraissait figé.
 *
 * Le voile change la donne. La page est maintenant assombrie et le panneau se
 * déclare aria-modal : laisser défiler un fond qu'on vient de désigner comme
 * inactif est la seule option incohérente des trois. La règle vit avec le
 * voile, en tête de ce chapitre.
 */

/* ==========================================================================
   Pied de page
   ==========================================================================
   Trois colonnes d'après les maquettes : marque et liens à gauche, derniers
   numéros au centre, réseaux à droite, puis un filet et la mention légale.

   Sur mobile tout s'empile dans cet ordre, la marque d'abord : c'est elle qui
   dit où l'on se trouve quand on arrive en bas d'un article.
   ========================================================================== */

.site-pied {
	margin-top: var(--ir-rythme-section);
	padding-block: var(--ir-rythme-bloc) var(--ir-esp-5);
	background: var(--ir-texte);
	color: var(--ir-fond);
}

@media (min-width: 62rem) {
	.site-pied {
		padding-block: 48px 24px;
	}
}

.site-pied__haut {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ir-rythme-bloc);
	align-items: start;
}

/*
 * 1fr auto 1fr : les couvertures prennent la place qu'il leur faut, les deux
 * colonnes de texte se partagent le reste à parts égales. C'est ce qui garde
 * le bloc central au milieu du pied quel que soit le nombre de liens.
 */
@media (min-width: 62rem) {
	.site-pied__haut {
		grid-template-columns: 1fr auto 1fr;
		gap: 48px;
	}
}

.site-pied__colonne {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

@media (min-width: 62rem) {
	.site-pied__colonne--reseaux {
		align-items: flex-end;
		justify-self: end;
		text-align: right;
	}
}

.site-pied__logo {
	margin: 0;
}

/*
 * Liens du pied : une colonne, rose pâle, blanc au survol.
 *
 * ⚠️ Corps qui s'écarte : 14 px dans les maquettes, Petit vaut 15. Tout le
 * texte des maquettes est composé un cran sous l'échelle, c'est l'écart le plus
 * répété du handoff.
 */
.site-pied__liens {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.site-pied__liens ul {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-pied__lien,
.site-pied__liens a {
	color: var(--ir-rose);
	font-size: var(--ir-t-petit);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: color 0.15s ease;
}

.site-pied__lien:hover,
.site-pied__lien:focus,
.site-pied__liens a:hover,
.site-pied__liens a:focus {
	color: var(--ir-fond);
	text-decoration: none;
}

/*
 * Étiquette de colonne, reprise du « Suivez-nous » des maquettes et appliquée
 * aussi au titre des couvertures : deux colonnes voisines annoncées de deux
 * façons différentes se liraient comme deux natures de contenu.
 *
 * ⚠️ Corps qui s'écarte : 12 px dans les maquettes, Micro vaut 13. Des
 * capitales interlettrées sous 13 px se lisent mal, c'est ce que ce niveau
 * protège.
 */
.site-pied__etiquette,
.magazines__titre {
	margin: 0;
	color: #9a9a9a;
	font-size: var(--ir-t-micro);
	font-weight: var(--ir-w-micro);
	letter-spacing: var(--ir-ls-micro);
	line-height: var(--ir-lh-micro);
	text-transform: uppercase;
}

/*
 * Ligne de bas de page : mention légale d'un côté, gestion des cookies de
 * l'autre.
 *
 * ⚠️ Plus de filet horizontal au-dessus, retiré le 25/08/2026. Il séparait deux
 * choses qui n'avaient pas besoin d'être séparées, sur un fond déjà sombre où
 * un trait clair se remarque plus que ce qu'il délimite. L'écart suffit à faire
 * la coupure, et il est augmenté pour cela.
 *
 * ⚠️ Les deux éléments sont écartés l'un de l'autre, jamais collés bout à bout.
 * Le bouton de gestion était ajouté à la suite du texte, séparé d'une simple
 * espace : cela se lisait comme une phrase, « Tous droits réservés. Gérer les
 * cookies », où l'action passait pour la fin de la mention légale.
 */
.site-pied__bas {
	display: flex;
	flex-wrap: wrap;
	/*
	 * Écart court : le lien se tient à côté de la mention, pas à l'autre bout de
	 * la ligne. Assez pour qu'on ne lise pas une seule phrase, assez peu pour
	 * que les deux forment le même bas de page.
	 */
	gap: var(--ir-esp-2) var(--ir-esp-3);
	align-items: baseline;
	margin-top: var(--ir-rythme-section);
}

.site-pied__bas p {
	margin: 0;
	color: #9a9a9a;
	font-size: var(--ir-t-micro);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
}

/* ==========================================================================
   Réseaux sociaux
   ==========================================================================
   ⚠️ Les maquettes composent ici trois liens en toutes lettres, Instagram,
   Facebook et X, là où le thème pose les logos en SVG inline. On garde les
   icônes, décision antérieure, et l'écart est signalé plutôt que tranché seul.

   L'étiquette « Suivez-nous » des maquettes, elle, est reprise : sans elle,
   trois pictogrammes dans un coin ne disent pas ce qu'ils sont.
   ========================================================================== */

.reseaux__liste {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48rem) {
	.reseaux__liste {
		gap: 0;
	}
}

/* Cible tactile pleine, le cercle ne fait pas 36 px de large par hasard. */
/*
 * ⚠️ Les icônes étaient invisibles, et elles l'ont toujours été.
 *
 * Elles portaient `color: var(--ir-texte)`, soit #303030, exactement la
 * couleur de fond du pied de page. Trois pastilles cerclées de gris, vides.
 * Le défaut ne se voyait qu'une fois des comptes renseignés dans l'outil de
 * personnalisation, ce qui n'était pas le cas en local : le bloc entier ne
 * sortait pas, donc rien à remarquer.
 *
 * Blanc sur le fond sombre, rose pâle au survol, comme les liens de la colonne
 * voisine. Le cercle gris est retiré : les maquettes ne l'ont pas, et il
 * n'apportait qu'un contour de plus autour d'un dessin déjà lisible.
 *
 * La cible reste à 2,75 rem, c'est le minimum pour être atteinte au pouce.
 */
/*
 * ⚠️ Case carrée de 2,75 rem abandonnée : elle dimensionnait un pictogramme, or
 * le lien porte désormais le nom du réseau en toutes lettres. Une largeur fixe
 * y couperait « Instagram ». La hauteur de cible tactile est conservée par le
 * rembourrage vertical.
 */
/*
 * ⚠️ Même traitement typographique que les entrées du menu de pied.
 *
 * Le lien de réseau héritait du corps courant quand le menu employait un autre
 * corps : dans deux colonnes voisines du même pied, deux tailles de texte se
 * répondaient sans raison. Une seule règle porte désormais les deux.
 */
.site-pied__lien,
.site-pied__liens a,
.reseaux__lien {
	font-family: var(--ir-police-texte);
	font-size: var(--ir-t-s);
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.6;
}

.reseaux__lien {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
	padding-block: var(--ir-esp-2);
	color: var(--ir-fond);
	text-decoration: none;
	transition: color 0.15s ease;
}

.reseaux__lien:hover,
.reseaux__lien:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.reseaux__lien:hover,
.reseaux__lien:focus {
	color: var(--ir-rose);
}

.reseaux__lien svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* ==========================================================================
   Bloc des trois derniers numéros
   ==========================================================================
   Largeur bornée dans les deux sens. Sans borne haute, trois colonnes étalées
   sur 1 200 px donnaient des couvertures de 380 px de large en pied de page,
   plus imposantes que n'importe quelle image d'article. Sans gouttière
   resserrée en bas, elles tombaient sous les 100 px sur un téléphone.
   ========================================================================== */

/*
 * Colonne centrale du pied.
 *
 * ⚠️ Plus de filet ni de marge au-dessus : le bloc était posé sous les liens,
 * en pleine largeur, séparé par une règle horizontale. Il est maintenant une
 * colonne parmi trois, et un filet à l'intérieur d'une grille couperait la
 * ligne au milieu.
 *
 * Le titre est composé comme l'étiquette « Suivez-nous » de la colonne
 * voisine, voir plus haut : deux colonnes annoncées de deux façons
 * différentes se liraient comme deux natures de contenu.
 */
.magazines {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.magazines__liste {
	display: flex;
	gap: var(--ir-esp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 62rem) {
	.magazines__liste {
		gap: var(--ir-esp-5);
	}
}

/*
 * 140 px par couverture dans les maquettes, mais jamais au prix d'un
 * débordement : sur un téléphone, trois couvertures à 140 px demandent 468 px
 * avec les gouttières. La largeur suit donc la place disponible et plafonne à
 * la valeur des maquettes.
 */
.magazine {
	display: flex;
	flex: 1 1 0;
    flex-direction: column;
	gap: 10px;
	align-items: center;
	max-width: 140px;
	min-width: 0;
}

.magazine__visuel {
	display: block;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	/* Présentation commune aux trois endroits, voir 02-composants.css. */
}

.magazine__visuel img {
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
}

/* Interligne resserré : la date passe souvent sur deux lignes en colonne étroite. */
/*
 * Interligne resserré : la date passe souvent sur deux lignes en colonne
 * étroite. Gris clair et non le gris de texte, le pied étant sur fond sombre.
 *
 * ⚠️ Corps qui s'écarte : 14 px dans les maquettes, Petit vaut 15.
 */
.magazine__parution {
	/*
	 * ⚠️ Une seule ligne, imposée. « Septembre 2026 » passait sur deux lignes dans
	 * une colonne d'un tiers de la largeur du bloc, et les trois libellés ne
	 * s'alignaient plus. Le non-retour force la colonne à faire au moins la
	 * largeur du mois le plus long : ce sont les couvertures qui se resserrent,
	 * pas le texte qui se casse.
	 */
	white-space: nowrap;
	margin: 0;
	color: #cfcfcf;
	font-size: var(--ir-t-petit);
	line-height: 1.3;
	text-align: center;
}

/* ==========================================================================
   Bannières sponsorisées
   ==========================================================================
   ⚠️ Un seul format, décision actée : 1200 × 400 px, rapport 3:1. Les visuels
   sont à fournir en 2400 × 800 px pour rester nets sur les écrans à haute
   densité.

   Les trois hauteurs précédentes, 120, 250 et 400 px, servaient une grille
   tarifaire différenciée qui n'a pas été retenue. Elles sont retirées d'ici
   comme de l'écran de réglage. La mécanique de format reste entière : ajouter
   un format demande une entrée dans le filtre infrarouge_banniere_formats et
   une règle .banniere--{cle} ici, rien de plus.

   Rapport plutôt que hauteur fixe : le bloc suit la largeur disponible au lieu
   de laisser des bandes vides à gauche et à droite sur mobile. object-fit
   recadre le visuel, ce qui évite qu'un fichier mal calibré fourni par un
   annonceur déforme la page.
   ========================================================================== */

.banniere {
	--banniere-rapport: 3 / 1;

	margin-block: var(--ir-rythme-bloc);
}

.banniere__lien {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--ir-arrondi-carte);
	background: var(--ir-bordure);
	color: var(--ir-fond);
	text-decoration: none;
}

.banniere__visuel {
	display: block;
	width: 100%;
	aspect-ratio: var(--banniere-rapport);
}

.banniere__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
}

/*
 * La mention doit rester lisible sur n'importe quel visuel : fond plein et non
 * simple texte posé sur l'image, dont on ne maîtrise ni les couleurs ni le
 * contraste puisqu'il vient de l'annonceur.
 */
.banniere__mention {
	position: absolute;
	top: var(--ir-esp-2);
	right: var(--ir-esp-2);
	padding: 0.15rem var(--ir-esp-2);
	border-radius: var(--ir-arrondi-bouton);
	background: rgba(0, 0, 0, 0.75);
	color: var(--ir-fond);
	font-size: var(--ir-t-xs);
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}