/*
 * Feuille de style du thème Infrarouge.
 *
 * Organisation : polices, jetons de design, socle, typographie, mise en page,
 * accessibilité. Les composants (cartes, carrousel, navigation) auront leurs
 * propres sections, ajoutées au fur et à mesure.
 *
 * Rendu pensé d'abord pour le mobile : les valeurs de base sont les valeurs
 * mobiles, et seules les grandes tailles s'élargissent avec la fenêtre.
 */

/* ==========================================================================
   Polices, auto-hébergées
   ==========================================================================
   Les fichiers .woff2 sont à déposer dans assets/fonts/. Voir le README de ce
   dossier pour la liste exacte. Charger ces polices depuis le CDN Google
   transmettrait l'adresse IP des visiteurs à Google, ce que la démarche de
   conformité du projet cherche précisément à éviter.
   ========================================================================== */

/* ==========================================================================
   Ruda, police unique du site
   ==========================================================================
   Seule famille du site, titres comme texte courant. Relevée sur les gabarits
   Elementor d'origine, où elle gouverne l'en-tête, le pied de page et la page
   abonnement.

   Quatre graisses : 400 pour le texte courant, 600 pour les sous-titres et les
   libellés de bouton, 800 pour les titres de section, 900 pour le Display et
   le titre de l'encart de résiliation.

   ⚠️ Ruda n'existe pas en italique. Ne jamais lui demander font-style: italic,
   le navigateur fabriquerait une fausse italique par inclinaison mécanique,
   toujours laide et jamais conforme au dessin de la police.

   Quatre graisses : 400 pour le texte courant et les notes, 600 pour les
   sous-titres, questions et libellés de bouton, 800 pour les titres, 900 pour
   le seul titre de l'encart de résiliation.
   ========================================================================== */

@font-face {
	font-family: "Ruda";
	src: url("../fonts/ruda-v30-latin_latin-ext-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Ruda";
	src: url("../fonts/ruda-v30-latin_latin-ext-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Ruda";
	src: url("../fonts/ruda-v30-latin_latin-ext-800.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Ruda";
	src: url("../fonts/ruda-v30-latin_latin-ext-900.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Jetons de design
   ==========================================================================
   Valeurs relevées dans le CSS du thème enfant actuel. Le rouge et
   Ruda sont intouchables : ce sont eux qui font reconnaître le
   site. Les arrondis sont une décision nouvelle, 6 px sur les cartes et les
   images, 4 px sur les boutons et les champs.
   ========================================================================== */

:root {
	/* Couleurs */
	--ir-accent: #e83f53;
	/*
	 * ⚠️ Un seul bordeaux sur tout le site, décision actée.
	 *
	 * Il y en avait deux pour une même intention : #c20012 sur la barre de
	 * navigation et le panneau, #8D0726 sur le bouton de la page abonnement,
	 * relevé dans la mise en page d'origine. L'écart se voyait dès qu'on passait
	 * de l'un à l'autre.
	 *
	 * #8D0726 est retenu : c'est celui du bouton d'origine, donc la valeur de
	 * référence. Le changement passe par ce jeton et non par les règles une à
	 * une, ce qui couvre d'un coup la barre, le panneau, les boutons
	 * d'abonnement et les survols.
	 *
	 * L'accent principal #e83f53 ne bouge pas : liens, pastilles de rubrique et
	 * filets de section restent en rouge vif.
	 */
	--ir-accent-fonce: #8d0726;
	--ir-texte: #303030;
	--ir-bordure: #dfdfdf;
	--ir-bordure-forte: #c1c1c1;
	--ir-voile: rgba(0, 0, 0, 0.6);
	--ir-rose: #f2c9cd;

	/*
	 * Deux fonds, et c'est la distinction qui fait tout le rendu.
	 *
	 * --ir-fond est le blanc des surfaces : cartes, blocs, colonne d'article.
	 * --ir-fond-page est le gris très clair de la page elle-même. Le site actuel
	 * fonctionne ainsi, et c'est ce qui détache les cartes. Sur fond blanc, une
	 * carte blanche ne se distingue que par sa bordure et l'ensemble paraît plat.
	 *
	 * ⚠️ Ne pas remplacer --ir-fond par le gris : il sert de couleur de surface
	 * partout, y compris comme couleur de texte sur les fonds rouges.
	 */
	--ir-fond: #ffffff;
	--ir-fond-page: #f2f2f2;

	/*
	 * Familles.
	 *
	 * Une seule famille sur tout le site : Ruda.
	 *
	 * Décision actée le 19/08/2026, en remplacement de la décision Open Sans du
	 * 18/08. Ruda est relevée sur les gabarits Elementor d'origine, où elle
	 * gouverne l'en-tête, le pied de page et la page abonnement. Playfair
	 * Display, longtemps prise pour la police de titre du site, était un
	 * artefact de l'ancien thème.
	 *
	 * ⚠️ Ruda n'existe pas en italique. Ne jamais lui demander font-style:
	 * italic : le navigateur fabriquerait une fausse italique par inclinaison
	 * mécanique, jamais conforme au dessin de la police.
	 *
	 * Les deux jetons sont conservés bien qu'ils pointent vers la même pile.
	 * Chaque bascule est passée par eux, jamais règle par règle : c'est ce qui a
	 * permis de changer trois fois de police sans toucher une seule règle.
	 */
	--ir-police-texte: "Ruda", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ir-police-titre: var(--ir-police-texte);

	/*
	 * Échelle typographique, huit niveaux.
	 *
	 * Chaque niveau porte quatre valeurs solidaires : corps, graisse,
	 * interlettrage, interlignage. Les séparer, c'est se garantir qu'un titre
	 * finira quelque part avec le corps d'un niveau et l'interlettrage d'un autre.
	 *
	 * ⚠️ Interlettrage à zéro partout, sauf Micro.
	 *
	 * L'échelle précédente, calée sur Open Sans, portait un interlettrage négatif
	 * marqué sur les grands corps : il tenait une sans-serif large qui se
	 * délitait passé 40 px. Ruda est déjà étroite et contrastée, le même
	 * resserrement l'écraserait. Le handoff le dit d'ailleurs explicitement.
	 *
	 * Micro fait exception avec un interlettrage positif : des capitales
	 * composées serré se lisent mal, c'est l'inverse exact du besoin des titres.
	 *
	 * ⚠️ Graisses réparties sur les quatre fichiers chargés, 400, 600, 800 et
	 * 900. Le Display est la seule justification du quatrième fichier.
	 */

	/* Display : slides du carrousel, titre de la page abonnement. 36 vers 60. */
	--ir-t-display: clamp(2.25rem, 1.4rem + 4.25vw, 3.75rem);
	--ir-w-display: 900;
	--ir-ls-display: 0;
	--ir-lh-display: 1.05;

	/* T1 : titre d'article et de fiche. 32 vers 46. */
	--ir-t-1: clamp(2rem, 1.55rem + 2.25vw, 2.875rem);
	--ir-w-1: 800;
	--ir-ls-1: 0;
	--ir-lh-1: 1.1;

	/* T2 : titres de section de la page d'accueil. 27 vers 34. */
	--ir-t-2: clamp(1.6875rem, 1.47rem + 1.1vw, 2.125rem);
	--ir-w-2: 800;
	--ir-ls-2: 0;
	--ir-lh-2: 1.15;

	/* T3 : sous-titres et intertitres. 20 vers 25. */
	--ir-t-3: clamp(1.25rem, 1.11rem + 0.7vw, 1.5625rem);
	--ir-w-3: 800;
	--ir-ls-3: 0;
	--ir-lh-3: 1.25;

	/* T4 : titres de carte. 18 vers 19. */
	--ir-t-4: clamp(1.125rem, 1.09rem + 0.16vw, 1.1875rem);
	--ir-w-4: 600;
	--ir-ls-4: 0;
	--ir-lh-4: 1.3;

	/* Corps : texte courant. 16 vers 17. */
	--ir-t-corps: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
	--ir-w-corps: 400;
	--ir-ls-corps: 0;
	--ir-lh-corps: 1.6;

	/* Petit : métadonnées, dates, légendes. 15 px, fixe. */
	--ir-t-petit: 0.9375rem;
	--ir-w-petit: 400;
	--ir-ls-petit: 0;
	--ir-lh-petit: 1.5;

	/*
	 * Micro : étiquettes de rubrique, en capitales. 13 px, fixe.
	 * L'interlettrage est ici positif : des capitales composées serré se lisent
	 * mal, c'est l'inverse exact du besoin des gros titres.
	 */
	--ir-t-micro: 0.8125rem;
	--ir-w-micro: 600;
	--ir-ls-micro: 0.08em;
	--ir-lh-micro: 1.4;

	/*
	 * Anciens noms, conservés en alias.
	 *
	 * Ils sont employés par des centaines de règles dans les cinq feuilles. Les
	 * remplacer un par un serait long et risqué pour un gain nul : chaque alias
	 * pointe vers son équivalent de la nouvelle échelle, et le rendu suit.
	 * À résorber au fil des retouches, jamais en une passe.
	 */
	--ir-t-xs: var(--ir-t-petit);
	--ir-t-s: var(--ir-t-corps);
	--ir-t-m: var(--ir-t-4);
	--ir-t-l: var(--ir-t-3);
	--ir-t-xl: var(--ir-t-3);
	--ir-t-2xl: var(--ir-t-2);
	--ir-t-3xl: var(--ir-t-1);
	--ir-t-4xl: var(--ir-t-display);

	/* Interlignes hérités, alignés sur la nouvelle échelle. */
	--ir-interligne-titre: var(--ir-lh-2);
	--ir-interligne-texte: var(--ir-lh-corps);

	/* Espacements bruts, échelle de base. */
	--ir-esp-1: 0.25rem;
	--ir-esp-2: 0.5rem;
	--ir-esp-3: 1rem;
	--ir-esp-4: 1.5rem;
	--ir-esp-5: 2rem;
	--ir-esp-6: 3rem;
	--ir-esp-7: 4rem;

	/*
	 * Rythme vertical, trois niveaux et pas un de plus.
	 *
	 * Le défaut du site actuel n'est pas que les espacements soient mauvais,
	 * c'est qu'ils soient tous semblables : rien ne dit au lecteur où une
	 * section finit et où la suivante commence. Ces trois jetons portent la
	 * hiérarchie, et l'écart entre eux est volontairement franc, de l'ordre du
	 * double à chaque niveau.
	 *
	 * ⚠️ Employer ces jetons plutôt que les espacements bruts pour tout ce qui
	 * sépare des ensembles. Les --ir-esp-* restent réservés aux marges internes
	 * et aux petits écarts à l'intérieur d'un composant.
	 *
	 * Ils grandissent avec la fenêtre : sur mobile, un écart de 5rem entre
	 * sections ferait défiler dans le vide.
	 */
	--ir-rythme-section: clamp(3rem, 1.75rem + 5vw, 6rem);
	--ir-rythme-bloc: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	--ir-rythme-element: var(--ir-esp-3);

	/* Arrondis */
	--ir-arrondi-carte: 6px;
	--ir-arrondi-bouton: 4px;

	/* Mise en page */
	--ir-largeur-contenu: 1200px;

	/*
	 * Hauteur de la barre de navigation, reprise de .site-entete__barre.
	 *
	 * Elle est déclarée en jeton parce qu'elle sert ailleurs qu'à la barre : le
	 * carrousel de la page d'accueil doit occuper la fenêtre moins cette hauteur,
	 * la barre étant collée en haut et prise dans le flux. Recopier 3rem à
	 * plusieurs endroits, c'est se garantir d'en oublier un le jour où la barre
	 * change de taille.
	 */
	--ir-hauteur-barre: 3.75rem;

	/*
	 * Largeur de la colonne d'article, visuels compris. Assez au-dessus de la
	 * largeur de lecture pour que le débordement des médias se voie, assez en
	 * dessous de --ir-largeur-contenu pour que l'article reste un article et pas
	 * une page d'accueil.
	 *
	 * ⚠️ Déclarée ici et non sur .article-seul : les blocs liés qui suivent
	 * l'article, « À lire aussi » et « Découvrir d'autres adresses », sont ses
	 * frères dans .conteneur et non ses enfants. Une variable posée sur
	 * .article-seul ne leur parvient donc pas, et ils reprenaient la largeur du
	 * conteneur, soit 1200 px contre 1024 : les deux blocs ne démarraient pas au
	 * même endroit, décalage d'environ 88 px de chaque côté, immédiatement
	 * visible. La valeur doit rester commune aux deux.
	 */
	--ir-largeur-media: 64rem;

	/*
	 * Largeur de lecture : environ 65 signes par ligne en Ruda à cette
	 * taille. Au-delà, l'œil perd la ligne suivante en revenant à la marge, et
	 * c'est sur les articles longs que cela se paie.
	 */
	--ir-largeur-lecture: 42rem;

	/*
	 * Gouttière fluide. Fixe, elle laissait 16 px de marge sur un écran de
	 * 1440 px comme sur un téléphone : trop serré sur grand écran, et pas assez
	 * confortable au pouce sur petit.
	 */
	--ir-gouttiere: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

/*
 * La barre gagne un demi-rem au-delà de 64rem, voir 04-chrome.css. Le jeton suit,
 * sinon le carrousel de l'accueil dépasserait de la fenêtre sur grand écran.
 *
 * Valeurs des maquettes : 56 px sur mobile, 64 px à partir du grand écran.
 *
 * ⚠️ Relevées à 60 et 72 px depuis le 25/08/2026 : la barre était trop serrée
 * autour du logo. La respiration se prend des deux côtés, un peu de hauteur ici
 * et un peu de logo en moins dans 04-chrome.css. Les boutons font 2,75 rem, il
 * reste donc un demi-rem de dégagement au-dessus et au-dessous sur mobile.
 */
@media (min-width: 64rem) {
	:root {
		--ir-hauteur-barre: 4.5rem;
	}
}

/*
 * Défilement doux sur les sauts d'ancre, sauf si la personne a demandé moins
 * d'animations.
 *
 * ⚠️ Conditionné, jamais posé sans réserve. Un défilement animé sur plusieurs
 * milliers de pixels provoque des nausées chez une partie des personnes
 * sensibles au mouvement, et le réglage système existe précisément pour cela.
 * Sans la requête de média, le saut resterait animé malgré leur préférence.
 */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ==========================================================================
   Socle
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--ir-fond-page);
	color: var(--ir-texte);
	font-family: var(--ir-police-texte);
	font-size: var(--ir-t-corps);
	line-height: var(--ir-lh-corps);
	-webkit-text-size-adjust: 100%;
}

img,
video {
	max-width: 100%;
	height: auto;
}

img {
	border-radius: var(--ir-arrondi-carte);
}

/* ==========================================================================
   Typographie
   ========================================================================== */

/*
 * Marge haute nulle par défaut, marge basse courte. Le rattachement d'un titre
 * au texte qu'il annonce se règle dans chaque contexte, où l'on connaît le
 * rythme voulu, plutôt que par une règle globale qui serait à défaire partout.
 */
/*
 * Titres.
 *
 * Chaque niveau reprend les quatre valeurs solidaires de l'échelle : corps,
 * graisse, interlettrage, interlignage. Une seule famille désormais, mais le
 * jeton de titre est conservé, il pointe vers la même pile.
 */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--ir-esp-3);
	font-family: var(--ir-police-titre);
	/*
	 * Un titre long doit pouvoir se couper. Le besoin ne tenait pas aux
	 * jambages d'une serif : il vient des noms de fiches d'un seul tenant, du
	 * type « Beachcomber », qui débordent d'une carte de 300 px.
	 */
	overflow-wrap: break-word;
	text-wrap: balance;
}

h1 {
	font-size: var(--ir-t-1);
	font-weight: var(--ir-w-1);
	letter-spacing: var(--ir-ls-1);
	line-height: var(--ir-lh-1);
}

h2 {
	font-size: var(--ir-t-2);
	font-weight: var(--ir-w-2);
	letter-spacing: var(--ir-ls-2);
	line-height: var(--ir-lh-2);
}

h3 {
	font-size: var(--ir-t-3);
	font-weight: var(--ir-w-3);
	letter-spacing: var(--ir-ls-3);
	line-height: var(--ir-lh-3);
}

h4 {
	font-size: var(--ir-t-4);
	font-weight: var(--ir-w-4);
	letter-spacing: var(--ir-ls-4);
	line-height: var(--ir-lh-4);
}

h5,
h6 {
	font-size: var(--ir-t-4);
	font-weight: var(--ir-w-4);
	letter-spacing: var(--ir-ls-4);
	line-height: var(--ir-lh-4);
}
p {
	margin: 0 0 var(--ir-esp-3);
}

a {
	color: var(--ir-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover,
a:focus {
	color: var(--ir-accent-fonce);
}

/* ==========================================================================
   Formulaires et boutons
   ========================================================================== */

input,
textarea,
select,
button {
	font: inherit;
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="tel"],
textarea,
select {
	padding: var(--ir-esp-2);
	border: 1px solid var(--ir-bordure-forte);
	border-radius: var(--ir-arrondi-bouton);
	background: var(--ir-fond);
	color: var(--ir-texte);
	max-width: 100%;
}

/*
 * Boutons en bordeaux, pas en rouge vif.
 *
 * Le rouge clair passait pour rosé sur un aplat plein et manquait de poids
 * pour un appel à l'action. Le bordeaux est aussi celui de la barre et du
 * bouton d'abonnement : un seul rouge porte l'action sur tout le site, le
 * rouge vif restant aux liens, aux filets de section et aux survols.
 */
.bouton {
	display: inline-block;
	padding: var(--ir-esp-2) var(--ir-esp-4);
	border: 0;
	border-radius: var(--ir-arrondi-bouton);
	background: var(--ir-accent-fonce);
	color: var(--ir-fond);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}

.bouton:hover,
.bouton:focus {
	background: var(--ir-accent);
	color: var(--ir-fond);
}

/*
 * Bouton secondaire, en contour. Employé là où l'action est offerte sans être
 * l'action principale de la page : « Afficher plus d'articles » au bas d'une
 * section d'accueil ne doit pas peser autant que « S'abonner ».
 */
.bouton--secondaire {
	background: transparent;
	border: 1px solid var(--ir-accent-fonce);
	color: var(--ir-accent-fonce);
}

.bouton--secondaire:hover,
.bouton--secondaire:focus {
	background: var(--ir-accent-fonce);
	color: var(--ir-fond);
}

/*
 * Gris de texte secondaire, à sa place : le socle.
 *
 * Il était déclaré dans deux feuilles à la fois, avec deux valeurs différentes,
 * dont une à 4,0 pour 1, sous le seuil AA. Il était aussi remplacé ailleurs par
 * --ir-bordure-forte (#c1c1c1), une couleur de trait employée comme couleur de
 * texte : 1,9 pour 1 sur blanc, illisible.
 */
:root {
	--ir-texte-doux: color-mix(in srgb, var(--ir-texte) 72%, var(--ir-fond));
}

/* ==========================================================================
   Mise en page
   ========================================================================== */

.conteneur {
	width: 100%;
	max-width: var(--ir-largeur-contenu);
	margin-inline: auto;
	padding-inline: var(--ir-gouttiere);
}

/*
 * Rythme entre les grandes sections d'une page. Appliqué au conteneur plutôt
 * qu'à chaque section : les marges des sections voisines fusionnent et le
 * résultat devient imprévisible dès qu'un bloc conditionnel ne s'affiche pas.
 * Ici, l'espace est porté par le parent, il ne dépend plus de ce qui est rendu.
 */
/*
 * ⚠️ Le rythme ne s'applique QU'ENTRE SECTIONS, et c'est délibéré.
 *
 * La règle portait avant sur « .conteneur > * + * », donc sur n'importe quel
 * enfant d'un conteneur. Elle a produit trois bugs successifs, tous de même
 * nature et tous difficiles à rattacher à leur cause :
 *
 * - la barre de navigation, qui porte aussi .conteneur, poussait son groupe de
 *   boutons 6 rem plus bas que le logo et doublait de hauteur ;
 * - le pied d'article se retrouvait séparé de « À lire aussi » par un trou de
 *   plusieurs centaines de pixels ;
 * - sur les pages de catégorie, le titre, le bandeau de filtres et la grille de
 *   cartes étaient espacés comme trois sections indépendantes.
 *
 * Un sélecteur universel dans une feuille de socle finit toujours par toucher
 * quelque chose qu'on n'avait pas en tête. Le rythme de section est donc réservé
 * aux éléments <section>, qui sont précisément ce qu'il est censé séparer. Les
 * autres blocs portent leurs propres marges, là où on les lit.
 */
.conteneur > section + section {
	margin-top: var(--ir-rythme-section);
}

/* Une section vide ne doit pas creuser la page. */
.conteneur > *:empty {
	margin-top: 0;
}

.grille-cartes {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ir-esp-4);
}

@media (min-width: 48rem) {
	.grille-cartes {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.grille-cartes {
		grid-template-columns: repeat(3, 1fr);
	}
}