/* ==========================================================================
   Composants : cartes, listings, recherche, blocs liés
   ==========================================================================
   Le gris de texte secondaire --ir-texte-doux vivait ici, en doublon avec
   03-contenus.css qui le déclarait à une autre valeur, sous le seuil de
   contraste. Il est désormais unique, dans 01-socle.css avec les autres jetons.
   ========================================================================== */

/* ==========================================================================
   Cartes
   ==========================================================================
   Un seul jeu de composants, partagé par la carte article, la carte de fiche et
   la carte de page. Les trois se côtoient dans les archives et dans la
   recherche : une variante par rubrique casserait l'alignement.

   La boîte de visuel impose son rapport en CSS, en plus du recadrage
   automatique de la taille infrarouge-carte. Les deux plutôt qu'un seul : les
   médias déjà en base n'ont pas cette taille tant que les miniatures n'ont pas
   été régénérées, et WordPress sert alors l'image d'origine. Le rapport imposé
   tient dans tous les cas, y compris sans image du tout.

   Aucune requête de média dans cette section, et ce n'est pas un oubli. La
   grille passe de 1 à 2 puis 3 colonnes, mais la carte, elle, mesure toujours à
   peu près la même chose : 330 px environ en pleine largeur sur téléphone,
   306 px dans la grille à trois colonnes juste après 64rem, 368 px au plus large
   quand le conteneur plafonne à 1200 px. Soit une plage de 300 à 470 px sur
   toute l'étendue des tailles d'écran. Un seul réglage la couvre, et faire
   varier la typographie de la carte selon la fenêtre produirait des titres plus
   gros sur les cartes les plus étroites, exactement l'inverse de ce qu'on veut.
   ========================================================================== */

.carte {
	display: flex;
	height: 100%;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--ir-bordure);
	border-radius: var(--ir-arrondi-carte);
	background: var(--ir-fond);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.carte__lien {
	display: flex;
	height: 100%;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

/*
 * Le survol porte sur la carte entière, pas sur le lien : overflow hidden
 * découpe toute ombre posée à l'intérieur. :has remonte donc du lien vers la
 * carte. Réservé au pointeur fin, sans quoi l'état reste collé après un appui
 * au doigt.
 */
@media (hover: hover) {
	.carte:has(.carte__lien:hover) {
		border-color: var(--ir-bordure-forte);
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
	}
}

.carte:has(.carte__lien:focus-visible) {
	border-color: var(--ir-accent);
}

/* --- Visuel --- */

.carte__visuel {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--ir-rose);
}

.carte__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.carte__lien:hover .carte__visuel img,
.carte__lien:focus-visible .carte__visuel img {
	transform: scale(1.04);
}

/*
 * Aplat de remplacement quand l'image à la une manque. Le rose de la charte est
 * atténué : sur une grille de quarante fiches, quelques aplats à pleine
 * saturation attireraient l'œil plus que les vraies photos. Le pictogramme
 * remonte en revanche à une opacité où il se voit vraiment, sinon l'aplat passe
 * pour une image qui n'a pas fini de charger.
 */
/*
 * ⚠️ Cet aplat sert aussi aux visuels d'ouverture des articles et des fiches,
 * pas seulement aux cartes. Voir infrarouge_visuel_ouverture() : le pictogramme
 * de l'absence est le même partout, le lecteur n'a pas à en apprendre deux.
 *
 * Il se cale sur son conteneur, quel qu'il soit : la boîte de carte en 3/2, la
 * figure de fiche en 3/2, ou la bande d'article en 21/9.
 */
.carte__visuel-absent {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--ir-rose) 55%, var(--ir-fond));
	color: var(--ir-accent-fonce);
	opacity: 0.45;
}

/* --- Corps --- */

/*
 * Marges explicites plutôt qu'un gap unique. Un gap donnait le même écart entre
 * l'étiquette et le titre, entre le titre et l'extrait, et entre l'extrait et le
 * pied : rien ne disait au lecteur ce qui allait ensemble. Trois pas nets à la
 * place, 4 / 8 / 16, du plus serré au plus large. L'étiquette et le titre
 * forment un bloc, le pied s'en détache franchement.
 */
.carte__corps {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--ir-esp-3);
}

/*
 * L'étiquette de rubrique.
 *
 * Elle était en rouge vif et en capitales : sur une grille, quarante mots rouges
 * en capitales passaient avant les titres. Trois changements, dans cet ordre
 * d'importance : le rouge profond de la charte à la place du rouge vif, qui
 * passe de 3,6 à 6,4 pour 1 sur blanc et cesse d'être limite à cette taille ;
 * les capitales abandonnées, les noms de rubrique et de catégorie arrivent déjà
 * capitalisés depuis la base ; un court filet rouge devant, qui fait le repère
 * visuel que les capitales assuraient, sans le volume de texte.
 *
 * Ce même filet se retrouve en tête des archives : c'est la marque de section du
 * site, une seule fois apprise, lue partout.
 */
/*
 * ⚠️ Pastille pleine, et non le filet rouge. Décision révisée le 20/08/2026,
 * après comparaison des deux traitements côte à côte.
 *
 * Le filet court devant l'étiquette avait été retenu pour marquer la rubrique
 * sans le volume de texte des capitales rouges. Mis en regard de la maquette, il
 * ne tient pas : sur une grille de cartes, un trait de 20 px sur 2 se perd,
 * quand un aplat se repère au premier coup d'œil.
 *
 * ⚠️ Fond en rouge vif, celui du survol des titres de carte, demandé le
 * 20/08/2026. Le blanc dessus donne 4,1 pour 1, sous le seuil AA des textes
 * courants qui est à 4,5. Le rouge profond, précédemment employé, tenait
 * largement ce seuil. Arbitrage assumé au profit de la cohérence avec le survol.
 */
.carte__etiquette {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin-bottom: var(--ir-esp-2);
	padding: 0.25rem 0.5rem;
	border-radius: var(--ir-arrondi-bouton);
	background: var(--ir-accent);
	color: var(--ir-fond);
	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;
}

/*
 * text-wrap: balance répartit les lignes d'un titre court au lieu de laisser un
 * mot seul en dernière ligne, ce qui arrive sans arrêt sur une carte de 300 px.
 * break-word protège des noms d'établissement d'un seul tenant.
 *
 * Le titre n'est volontairement pas borné en lignes : couper une manchette de
 * magazine sur des points de suspension coûte plus cher au lecteur qu'une rangée
 * un peu plus haute.
 */
.carte__titre {
	margin: 0 0 var(--ir-esp-2);
	font-size: var(--ir-t-4);
	font-weight: var(--ir-w-4);
	letter-spacing: var(--ir-ls-4);
	line-height: var(--ir-lh-4);
	overflow-wrap: break-word;
	text-wrap: balance;
	transition: color 0.2s ease;
}

.carte__lien:hover .carte__titre,
.carte__lien:focus-visible .carte__titre {
	color: var(--ir-accent);
}

/*
 * Extrait borné à trois lignes. Sans cela, deux cartes voisines n'ont pas la
 * même hauteur de texte selon la longueur de l'accroche, et comme la grille
 * étire toutes les cartes d'une rangée sur la plus haute, une seule accroche
 * bavarde creuse un vide sous toutes les autres.
 */
.carte__extrait {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	-webkit-box-orient: vertical;
	/* Deux lignes d'après les maquettes, trois auparavant. */
	-webkit-line-clamp: 2;
	line-clamp: 2;
	color: var(--ir-texte-doux);
	font-size: var(--ir-t-s);
	line-height: 1.5;
}

/* --- Pied de carte : infos de fiche, ou date d'article --- */

/*
 * Le pied est poussé en bas par margin-top: auto. Sans cela, deux cartes
 * voisines dont l'une a un extrait plus court afficheraient leur pied à des
 * hauteurs différentes, et l'alignement de la rangée se verrait immédiatement.
 *
 * Les fiches n'ont pas de date et les articles n'ont pas d'infos : le sélecteur
 * porte sur la position dans le corps, pas sur le type de carte, pour que les
 * deux se calent pareil.
 */
.carte__infos,
.carte__date {
	margin-top: auto;
	padding-top: var(--ir-esp-3);
	color: var(--ir-texte-doux);
	font-size: var(--ir-t-xs);
	line-height: 1.4;
}

/* Remise à zéro des marges et du retrait propres à ul, que le pied de carte
   n'a que faire de conserver. */
.carte__infos {
	display: grid;
	gap: var(--ir-esp-1);
	margin-bottom: 0;
	padding-inline-start: 0;
	list-style: none;
}

.carte__info {
	min-width: 0;
}

/* Le type de cuisine qualifie l'adresse, il passe avant elle. */
.carte__info--cuisine {
	color: var(--ir-texte);
	font-weight: 600;
}

/* L'adresse tient sur une ligne : sur deux, les hauteurs se remettraient à varier. */
.carte__info--adresse {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/*
 * Chiffres à chasse fixe : les dates d'une même rangée s'alignent au pixel au
 * lieu de danser d'un ou deux points selon les chiffres qu'elles contiennent.
 */
.carte__date {
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Listings : en-tête, navigation, filtres, pagination
   ==========================================================================
   Le rythme suit les trois jetons et rien d'autre. En-tête et navigation
   forment l'ouverture du listing, séparés entre eux par --ir-rythme-bloc ; la
   pagination clôt la page et s'en détache par --ir-rythme-section. C'est cet
   écart franc entre les deux niveaux qui manque au site actuel, où tout est à
   la même distance de tout.
   ========================================================================== */

.archive-entete {
	margin-block: var(--ir-rythme-bloc);
}

/* Le filet de section, le même que sur l'étiquette de carte. */
.archive-entete::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-bottom: var(--ir-esp-3);
	border-radius: 2px;
	background: var(--ir-accent);
}

/*
 * Surtitre de rubrique parente, sur les sous-catégories.
 *
 * Il situe la page sans lui disputer la vedette : petites capitales grises,
 * corps réduit, collé au titre qu'il introduit. Le rouge est réservé au survol,
 * un surtitre rouge permanent ferait un second titre.
 *
 * Le mot est un lien vers la rubrique, c'est là tout son intérêt : les archives
 * ne portent pas de fil d'Ariane, sans lui rien ne ramène d'un cran au-dessus.
 */
.archive-surtitre {
	margin: 0 0 var(--ir-esp-1);
	color: var(--ir-texte-doux);
	font-size: var(--ir-t-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.archive-surtitre__lien {
	color: inherit;
	text-decoration: none;
}

.archive-surtitre__lien:hover,
.archive-surtitre__lien:focus-visible {
	color: var(--ir-accent-fonce);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.archive-titre {
	margin-bottom: var(--ir-esp-2);
	text-wrap: balance;
}

/* Bornée à la largeur de lecture : une description d'archive sur 1200 px de
   large se lit mal, l'œil perd la ligne suivante en revenant à la marge. */
.archive-description {
	max-width: var(--ir-largeur-lecture);
	margin: 0;
	color: var(--ir-texte-doux);
	font-size: var(--ir-t-m);
}

.archive-description > :last-child {
	margin-bottom: 0;
}

.archive-compte {
	margin: var(--ir-esp-2) 0 0;
	color: var(--ir-texte-doux);
	font-size: var(--ir-t-xs);
	font-variant-numeric: tabular-nums;
}

.nav-rubriques,
.filtres,
.filtres-groupe {
	margin-bottom: var(--ir-rythme-bloc);
}

/* Deux facettes qui se croisent se lisent comme un seul dispositif : elles sont
   rapprochées, et c'est le groupe qui porte l'écart avec la grille de cartes. */
.filtres-groupe {
	display: grid;
	gap: var(--ir-esp-3);
}

.filtres-groupe .filtres {
	margin-bottom: 0;
}

.nav-rubriques__liste,
.filtres__liste {
	display: flex;
	gap: var(--ir-esp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ==========================================================================
   Repli sur deux lignes, puis dépliage
   ==========================================================================
   Mécanisme commun à deux bandeaux : les rubriques d'articles
   (.nav-rubriques) et le filtre par destination des fiches (.filtres--pliable),
   qui compte quatre-vingt-treize entrées. Les sélecteurs sont donc appariés,
   comme le reste de cette feuille l'est déjà pour les pastilles. Le balisage
   des deux blocs reste distinct, seul le mécanisme est partagé, et l'état
   posé par le script est une classe neutre, .is-replie, qui n'appartient à
   aucun des deux.

   Le défilement latéral était un pansement, posé quand la liste sortait encore
   les 103 catégories du site. Il masquait la moitié des entrées derrière un
   geste que rien n'annonce, et se comportait mal au doigt : un défilement
   horizontal dans une page qui défile verticalement part de travers une fois
   sur deux.

   La liste est désormais réduite côté PHP aux seules rubriques qui affinent la
   page. Elle revient donc à la ligne, bornée à deux lignes, avec un lien pour
   tout déplier.

   ⚠️ La hauteur est portée par le CSS, pas par un nombre d'entrées coupé côté
   serveur : combien de pastilles tiennent sur deux lignes dépend de la longueur
   des libellés et de la largeur de l'écran, ce que le serveur ne peut pas
   savoir.
   ========================================================================== */

.nav-rubriques,
.filtres--pliable {
	/*
	 * Deux rangées de pastilles, plus l'écart qui les sépare. La hauteur est
	 * calculée sur la taille réelle des pastilles et non arrondie à 6rem, qui
	 * laissait dépasser un liseré de troisième ligne au pointeur fin.
	 */
	--ir-repli-deux-lignes: calc(2 * 2.75rem + var(--ir-esp-2));

	position: relative;
}

.nav-rubriques__liste {
	flex-wrap: wrap;
}

/*
 * La case à cocher pilote le dépliage sans script. Masquée à l'œil mais pas au
 * clavier : display:none la sortirait du parcours de tabulation et le lien
 * deviendrait inatteignable autrement qu'à la souris.
 */
.nav-rubriques__bascule,
.filtres__bascule {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * ⚠️ Le repli est porté par .is-replie, classe posée par le script, et non par
 * une classe écrite dans le gabarit.
 *
 * Le gabarit ne peut pas savoir si la liste déborde : cela dépend de la longueur
 * des libellés et de la largeur de la fenêtre. Quand il posait lui-même le repli,
 * une liste qui tenait sur une ligne était quand même bornée à deux lignes, et
 * sans JavaScript elle restait bornée sans qu'aucun lien ne permette de la
 * dérouler. Le script mesure, puis ne garde le repli que s'il coupe vraiment
 * quelque chose. Sans script, aucun repli et la liste s'affiche en entier.
 */
.is-replie .nav-rubriques__liste,
.is-replie .filtres__liste {
	max-height: var(--ir-repli-deux-lignes);
	overflow: hidden;
}

.nav-rubriques__bascule:checked ~ .nav-rubriques__liste,
.filtres__bascule:checked ~ .filtres__liste {
	max-height: none;
}

/*
 * ⚠️ Cette règle n'est pas une redondance avec l'attribut hidden, elle le rend
 * opérant.
 *
 * hidden ne masque que par la feuille du navigateur, `[hidden] { display: none }`,
 * qui perd contre n'importe quelle déclaration d'auteur. Le display: inline-block
 * ci-dessous l'écrasait donc : le lien restait visible en permanence, quel que
 * soit le résultat de la mesure de débordement. C'était la vraie cause du
 * « Voir tout » affiché sur des listes qui tenaient déjà à l'écran.
 */
.nav-rubriques__voir[hidden],
.filtres__voir[hidden] {
	display: none;
}

.nav-rubriques__voir,
.filtres__voir {
	display: inline-block;
	margin-top: var(--ir-esp-2);
	padding: var(--ir-esp-1) 0;
	color: var(--ir-accent);
	font-size: var(--ir-t-xs);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.nav-rubriques__voir:hover,
.filtres__voir:hover {
	color: var(--ir-accent-fonce);
}

/* Le focus porte sur la case masquée : il doit se voir sur le lien. */
.nav-rubriques__bascule:focus-visible ~ .nav-rubriques__voir,
.filtres__bascule:focus-visible ~ .filtres__voir {
	outline: 2px solid var(--ir-accent);
	outline-offset: 2px;
}

/* Un seul des deux libellés est montré, selon l'état. */
.nav-rubriques__voir-moins,
.filtres__voir-moins,
.nav-rubriques__bascule:checked ~ .nav-rubriques__voir .nav-rubriques__voir-plus,
.filtres__bascule:checked ~ .filtres__voir .filtres__voir-plus {
	display: none;
}

.nav-rubriques__bascule:checked ~ .nav-rubriques__voir .nav-rubriques__voir-moins,
.filtres__bascule:checked ~ .filtres__voir .filtres__voir-moins {
	display: inline;
}

/* Retour à la ligne plutôt que défilement latéral : les catégories tiennent en
   six entrées, et la longue liste des destinations est bornée à deux lignes par
   le mécanisme de repli ci-dessus. */
.filtres__liste {
	flex-wrap: wrap;
}

/*
 * Hauteur minimale de 44 px sur mobile, la taille d'une pulpe de pouce. Au-delà
 * de 64rem on est au pointeur fin et la précision n'est plus le sujet : les
 * pastilles reviennent à une taille de lecture, ce qui allège d'autant une
 * navigation qui en compte cent.
 */
.nav-rubriques__lien,
.filtres__lien {
	display: inline-flex;
	gap: var(--ir-esp-2);
	min-height: 2.75rem;
	align-items: center;
	padding: var(--ir-esp-1) var(--ir-esp-3);
	border: 1px solid var(--ir-bordure);
	border-radius: var(--ir-arrondi-bouton);
	color: var(--ir-texte);
	font-size: var(--ir-t-xs);
	line-height: 1.2;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

/*
 * Survol : une seule couleur pour le trait et pour le texte.
 *
 * Les deux étaient dépareillés, le trait en rouge vif et le libellé en
 * bordeaux : sur une rangée de pastilles, la différence se lisait comme deux
 * états au lieu d'un. Le rouge vif est retenu pour les deux, il tranche avec le
 * bordeaux du reste du chrome.
 *
 * ⚠️ Le rouge vif sur blanc plafonne à 3,6 pour 1, sous le seuil AA de 4,5.
 * C'est tenable ici, et seulement ici : l'état de repos est en gris de texte à
 * 12 pour 1, le survol ne fait que teinter un libellé déjà lu, et il disparaît
 * dès que le pointeur s'éloigne. Ne pas reprendre cette couleur pour du texte
 * au repos, c'est précisément ce que l'étiquette des cartes a corrigé.
 */
.nav-rubriques__lien:hover,
.nav-rubriques__lien:focus,
.filtres__lien:hover,
.filtres__lien:focus {
	border-color: var(--ir-accent);
	color: var(--ir-accent);
}

/*
 * L'état courant est un aplat rouge. Le rouge vif de la charte et non le rouge
 * profond : ici la couleur est portée par un fond de 44 px de haut, pas par du
 * texte de 14 px, le contraste du blanc dessus est de 4,1 pour 1 sur un aplat,
 * et c'est le rouge que les lecteurs reconnaissent.
 */
.nav-rubriques__lien.is-courant,
.filtres__lien.is-courant {
	border-color: var(--ir-accent);
	background: var(--ir-accent);
	color: var(--ir-fond);
	font-weight: 600;
}

.nav-rubriques__lien.is-courant:hover,
.nav-rubriques__lien.is-courant:focus,
.filtres__lien.is-courant:hover,
.filtres__lien.is-courant:focus {
	border-color: var(--ir-accent-fonce);
	background: var(--ir-accent-fonce);
	color: var(--ir-fond);
}

/* Le compteur passe par l'opacité et non par une couleur : il reste lisible
   aussi bien sur le fond blanc que sur l'aplat rouge de l'état courant. */
.filtres__compte {
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}

@media (min-width: 64rem) {
	.nav-rubriques__lien,
	.filtres__lien {
		min-height: 2.25rem;
	}

	/* Les pastilles ayant rétréci, la hauteur de repli doit suivre, sinon deux
	   lignes en laissent apparaître une troisième coupée en son milieu. */
	.nav-rubriques,
	.filtres--pliable {
		--ir-repli-deux-lignes: calc(2 * 2.25rem + var(--ir-esp-2));
	}
}

/* --- Sorties d'une page de destination --- */

/*
 * Deux boutons au plus, centrés sous la liste des adresses. Ils s'empilent
 * quand la place manque plutôt que de se comprimer : « Retour au City Guide
 * Paris » ne tient pas à côté d'un second bouton sur un téléphone.
 *
 * En contour et non pleins : ce sont des sorties de secours, elles ne doivent
 * pas peser autant que les cartes qu'elles surmontent.
 */
.nav-destination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ir-esp-2);
	justify-content: center;
	margin-block: var(--ir-rythme-bloc);
}

/* --- Pagination --- */

.pagination {
	margin-block: var(--ir-rythme-section) var(--ir-rythme-bloc);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ir-esp-2);
	align-items: center;
	justify-content: center;
}

/*
 * 44 px de côté, minimum d'une cible tactile. L'archive des fiches compte 31
 * pages : c'est le composant du site le plus manipulé au pouce, et des chiffres
 * de 36 px collés les uns aux autres font rater la page visée une fois sur
 * trois.
 */
.pagination .page-numbers {
	display: inline-flex;
	min-width: 2.75rem;
	min-height: 2.75rem;
	align-items: center;
	justify-content: center;
	padding: var(--ir-esp-1) var(--ir-esp-3);
	border: 1px solid var(--ir-bordure);
	border-radius: var(--ir-arrondi-bouton);
	color: var(--ir-texte);
	font-size: var(--ir-t-xs);
	line-height: 1.2;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.pagination .page-numbers:hover,
.pagination .page-numbers:focus {
	border-color: var(--ir-accent);
	color: var(--ir-accent-fonce);
}

.pagination .page-numbers.current {
	border-color: var(--ir-accent);
	background: var(--ir-accent);
	color: var(--ir-fond);
	font-weight: 600;
}

/* Les points de suspension ne sont pas cliquables : ni cadre, ni cible. */
.pagination .page-numbers.dots {
	min-width: 1.5rem;
	border-color: transparent;
	padding-inline: 0;
	color: var(--ir-texte-doux);
}

/* Précédent et suivant portent un mot, pas un chiffre : ils respirent
   davantage et se distinguent ainsi de la série de numéros. */
.pagination .prev,
.pagination .next {
	padding-inline: var(--ir-esp-4);
	font-weight: 600;
}

/* --- Listing vide --- */

/*
 * Bordure pleine et non plus tiretée. Le tireté est le signe convenu d'un
 * emplacement à remplir : sur une recherche sans résultat, il laisse croire à un
 * défaut d'affichage alors que la page fonctionne.
 *
 * Le bloc est tantôt un p contenant une seule phrase, tantôt un div contenant un
 * message et un formulaire de recherche : la grille tient les deux cas. Le
 * centrage passe par text-align et non par justify-items, car le texte nu d'un p
 * forme une boîte anonyme que justify-items dimensionnerait sur max-content,
 * donc débordante sur un écran étroit.
 */
.liste-vide {
	display: grid;
	gap: var(--ir-rythme-element);
	margin-block: var(--ir-rythme-bloc) var(--ir-rythme-section);
	padding: var(--ir-esp-5) var(--ir-esp-3);
	border: 1px solid var(--ir-bordure);
	border-radius: var(--ir-arrondi-carte);
	background: color-mix(in srgb, var(--ir-bordure) 22%, var(--ir-fond));
	text-align: center;
}

/* margin-block seulement : le formulaire de recherche garde ses marges
   latérales automatiques, qui sont ce qui le centre. */
.liste-vide > * {
	max-width: 100%;
	margin-block: 0;
}

/* ==========================================================================
   Formulaire de recherche
   ==========================================================================
   Le même gabarit sert dans le panneau de l'en-tête, où le fond peut être
   rouge. Aucune couleur n'est donc posée ici : tout est hérité, et 04-chrome.css
   reste seul maître de l'habillage de la barre.
   ========================================================================== */

.recherche {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ir-esp-2);
	align-items: flex-end;
	max-width: 32rem;
	margin-inline: auto;
}

.recherche__libelle {
	flex: 1 0 100%;
	font-size: var(--ir-t-xs);
	font-weight: 600;
}

/* Champ et bouton à la même hauteur de cible tactile, sans quoi le bouton
   dépasse du champ d'un ou deux pixels et l'ensemble paraît de travers. */
.recherche__champ {
	flex: 1 1 12rem;
	min-width: 0;
	min-height: 2.75rem;
}

.recherche__bouton {
	flex: 0 0 auto;
	min-height: 2.75rem;
}

/* ==========================================================================
   Blocs de contenus liés
   ==========================================================================
   « À lire aussi » sous un article, « Découvrir d'autres adresses » sous une
   fiche. Le filet horizontal marque une rupture de lecture : ce qui suit n'est
   plus le contenu qu'on était venu lire. C'est pour cela qu'il s'agit ici d'un
   trait pleine largeur et non du petit filet rouge des en-têtes d'archive,
   lequel annonce au contraire ce qui vient.
   ========================================================================== */

/*
 * ⚠️ .section-liee et .section-liee__titre ne sont plus déclarées ici.
 *
 * Elles vivaient à trois endroits, ici et deux fois dans 03-contenus.css, et se
 * corrigeaient mutuellement sans qu'aucune ne dise le rendu final. Elles sont
 * réunies dans 03-contenus.css : ces blocs ne servent que sous un article ou une
 * fiche, leur place est avec les contenus.
 */

/* ==========================================================================
   Page de démonstration des cartes, page de travail
   ========================================================================== */

.demo-serie {
	margin-block: var(--ir-rythme-section) 0;
	padding-top: var(--ir-rythme-bloc);
	border-top: 1px solid var(--ir-bordure);
}

.demo-serie__titre {
	margin-bottom: var(--ir-esp-1);
	font-size: var(--ir-t-xl);
}

.demo-serie__legende {
	margin-bottom: var(--ir-rythme-bloc);
	color: var(--ir-texte-doux);
	font-size: var(--ir-t-xs);
}

/* ==========================================================================
   Couvertures de magazine
   ==========================================================================
   Trois endroits les affichent : le pied de page, le panneau de menu et
   l'éventail de la page abonnement. La présentation était écrite trois fois,
   avec trois valeurs différentes : pas d'ombre en pied, une ombre à 30 % dans
   le panneau, deux ombres encore différentes sur l'éventail. Elle vit ici
   désormais, les trois fichiers ne portent plus que la géométrie.

   ⚠️ Ni fond, ni bordure, ni ombre. Une couverture est un objet imprimé
   photographié : tout ce qu'on ajoute autour se lit comme un cadre.

   ⚠️ Cela ne suffit pas à retirer un cadre visible : les fichiers de la
   médiathèque sont pour la plupart des mises en situation, la couverture y
   étant déjà posée sur un fond blanc avec ombre portée. Cette partie-là ne se
   corrige qu'en recadrant le fichier. Voir CLAUDE.md.
   ========================================================================== */

.magazine__visuel,
.panneau__numero img,
.offre__couverture,
.carrousel-magazine__element img {
	border: 0;
	/*
	 * ⚠️ Angles vifs, décision du 25/08/2026. Les maquettes posaient un rayon
	 * de 4 px, et l'éventail comme le carrousel montaient à celui des cartes.
	 * Un magazine imprimé a des angles droits : les arrondir le fait lire
	 * comme une vignette d'interface plutôt que comme un objet photographié.
	 */
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* ==========================================================================
   Sections de la page d'accueil
   ==========================================================================
   Une rubrique, son sous-titre, trois cartes, un bouton. Ces classes étaient
   émises par les gabarits sans être stylées nulle part : le titre de section
   sortait à la taille par défaut d'un h2, sans rien pour le distinguer du reste.
   ========================================================================== */

.section-entete {
	margin-bottom: var(--ir-rythme-bloc);
}

/*
 * Le même filet rouge court que sur les étiquettes de carte. Marque de section
 * apprise une fois, lue partout, et qui évite d'avoir à grossir le titre pour
 * qu'il se remarque.
 */
.section-titre {
	margin-bottom: var(--ir-esp-2);
	font-size: var(--ir-t-2);
	font-weight: var(--ir-w-2);
	letter-spacing: var(--ir-ls-2);
	line-height: var(--ir-lh-2);
	text-wrap: balance;
}

/* Filet court SOUS le titre, comme sur le site actuel. */
.section-titre::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-top: var(--ir-esp-3);
	background: var(--ir-accent);
}

/*
 * Pas de largeur de lecture ici, contrairement aux pages éditoriales : ces
 * sous-titres tiennent en une ligne, et un plafond à 42rem les cassait en deux
 * au milieu de la page, avec un vide à droite qui se lisait comme une marge
 * mal réglée. Le sous-titre suit la largeur du conteneur, aligné sur le titre
 * qu'il prolonge.
 */
.section-sous-titre {
	margin: 0;
	color: var(--ir-texte-doux);
	font-size: var(--ir-t-m);
	line-height: var(--ir-interligne-texte);
	text-wrap: pretty;
}

/*
 * Le bouton est séparé de la grille par un écart de bloc, pas de section : il
 * appartient encore à la rubrique qu'il prolonge. C'est le rythme de section,
 * porté par le conteneur, qui le détache de la rubrique suivante.
 */
.section-action {
	margin: var(--ir-rythme-bloc) 0 0;
	text-align: center;
}

/*
 * Sur mobile, un bouton centré de la largeur de son texte est une petite cible
 * au milieu du vide. Il prend toute la largeur, comme les appels à l'action du
 * panneau de navigation.
 */
.section-action .bouton {
	display: block;
	padding-block: var(--ir-esp-3);
}

@media (min-width: 48rem) {
	.section-action .bouton {
		display: inline-block;
		padding-block: var(--ir-esp-2);
	}
}

/*
 * Dernière section de la page d'accueil. Le fond teinté lui donne un pied : la
 * succession de grilles s'arrête sur quelque chose plutôt que dans le vide.
 *
 * ⚠️ Le fond va d'un bord à l'autre de la fenêtre, le contenu reste dans la
 * largeur du conteneur. Ce n'est pas la même chose que de déborder de la
 * gouttière, ce que faisait la règle précédente : elle annulait le rembourrage
 * de .conteneur, donc le fond s'arrêtait à 1200 px, et l'on obtenait une boîte
 * teintée posée dans la boîte de la page. La double bordure se voyait, sans rien
 * apporter.
 *
 * Le montage tient en deux valeurs qui se compensent exactement. La marge
 * négative étale l'élément sur toute la largeur de la fenêtre, sa largeur
 * devenant 100vw. Le rembourrage ramène ensuite le contenu très précisément là
 * où il était, sur le bord de la colonne des autres sections. Le fond et les
 * bordures suivent la boîte, le texte et les cartes suivent le rembourrage.
 *
 * ⚠️ Ne pas ajouter de gouttière à ce rembourrage, elle y est déjà. Sur un écran
 * plus étroit que 1200 px, 50vw moins la demi-largeur du conteneur vaut
 * exactement la gouttière ; l'ajouter une seconde fois la compterait deux fois
 * sur mobile et décalerait la section de ses voisines sur grand écran.
 *
 * Le débordement horizontal est découpé par .site-contenu, voir 04-chrome.css :
 * 100vw compte la barre de défilement.
 */
.section-rubrique--teintee {
	margin-inline: calc(50% - 50vw);
	padding-block: var(--ir-rythme-bloc);
	padding-inline: calc(50vw - 50%);
	background: color-mix(in srgb, var(--ir-fond-page) 55%, var(--ir-fond));
	border-block: 1px solid color-mix(in srgb, var(--ir-bordure) 60%, var(--ir-fond));
}

/*
 * Les cartes portent le blanc des surfaces. Sans cette couleur explicite elles
 * seraient transparentes et se confondraient avec le gris de la page, ce qui
 * annulerait l'effet recherché par le fond teinté.
 */
.carte,
.carte--article,
.carte--city-guide,
.carte--page {
	background: var(--ir-fond);
}

/* ==========================================================================
   Phrase d'accroche de la page d'accueil
   ========================================================================== */

/*
 * Elle domine les titres de section, et l'écart qui l'en sépare le dit.
 *
 * Deux défauts se cumulaient. En --ir-t-xl, soit 24 à 30 px, elle était plus
 * petite que .section-titre qui vaut --ir-t-2xl, 28 à 42 px : la promesse
 * éditoriale de la page passait sous le premier intertitre venu. Et sa marge
 * basse était nulle, si bien qu'elle touchait presque « Nos coups de cœur à
 * Paris », les deux se lisant comme un même bloc.
 *
 * Elle monte donc d'un cran au-dessus des titres de section, en --ir-t-3xl, et
 * reçoit un écart de section en dessous. C'est le plus grand des trois jetons
 * de rythme : cette phrase ferme l'ouverture de la page, elle n'introduit pas
 * la section qui la suit.
 */
/*
 * Calibrage de l'accroche.
 *
 * Elle était en --ir-t-3xl, soit jusqu'à 54 px, sur 48 rem de large : à cette
 * taille elle pesait autant qu'un titre de section et coupait la page en deux
 * juste sous le carrousel. C'est une promesse éditoriale, pas un titre : elle
 * doit se lire d'un trait sans revendiquer la hiérarchie.
 *
 * Deux crans en dessous, et une largeur resserrée à 34 rem sous 64rem pour
 * qu'elle tienne en deux lignes courtes, égalisées par text-wrap: balance.
 * ⚠️ Au-delà, la décision a changé : une seule ligne, voir plus bas.
 */
.accroche-accueil {
	max-width: 34rem;
	margin: var(--ir-rythme-bloc) auto var(--ir-rythme-section);
	padding-inline: var(--ir-gouttiere);
	color: var(--ir-texte);
	font-family: var(--ir-police-titre);
	font-size: var(--ir-t-3);
	/* 600 dans les maquettes, la graisse manquait : l'accroche se lisait en 400. */
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-wrap: balance;
}

/*
 * Une seule ligne à partir de 64rem (retours du 23/09/2026).
 *
 * La phrase actuelle, environ 80 signes, mesure 956 px en Ruda 600 à 25 px :
 * elle tient à 1024 px de fenêtre, gouttières déduites, avec une dizaine de
 * pixels de marge. Sur tablette elle ne tiendrait qu'en réduisant la police,
 * ce qu'on ne fait pas : text-wrap: balance donne alors deux lignes égales.
 *
 * ⚠️ Pas de white-space: nowrap. La phrase se règle en back-office : plus
 * longue, elle doit revenir à la ligne, équilibrée, et non déborder. La
 * largeur maximale est celle du contenu, pas celle de la fenêtre.
 */
@media (min-width: 64rem) {
	.accroche-accueil {
		max-width: var(--ir-largeur-contenu);
	}
}

/* ==========================================================================
   Carrousel hero
   ==========================================================================
   Il n'avait aucun style de façade : le balisage sortait en liste brute, titres
   et boutons empilés les uns sous les autres, sans image ni superposition.

   Défilement par accrochage CSS, comme le carrousel de la page abonnement :
   glissement au doigt sur mobile, molette et clavier ailleurs. Les flèches de
   theme.js ne font que pousser la piste, et le carrousel reste parcourable si
   le script ne se charge pas.
   ========================================================================== */

/*
 * ⚠️ Aucun écart au-dessus, décision actée.
 *
 * Le carrousel portait une marge haute, pensée comme une respiration sous la
 * barre de navigation. Elle laissait voir le gris de la page entre la barre et
 * le visuel, soit un bandeau parasite en ouverture : la barre est collée en
 * haut, l'image doit démarrer immédiatement dessous. Ne pas la réintroduire.
 *
 * La marge basse est conservée, elle sépare le carrousel de la phrase
 * d'accroche.
 */
.hero-carrousel {
	position: relative;
	margin-block: 0 var(--ir-rythme-bloc);
	background: var(--ir-texte);
}

/*
 * ⚠️ Fondu enchaîné, et non défilement latéral. Changé le 25/08/2026.
 *
 * Le carrousel était une piste à accrochage horizontal : les flèches la
 * faisaient glisser d'une largeur d'écran. Deux défauts, dont le second était
 * le plus visible :
 *
 * - le glissement d'une photo pleine page à l'autre est brutal, et n'a rien de
 *   la douceur qu'on attend en ouverture d'un magazine ;
 * - le retour du premier au dernier ne pouvait pas être animé, il aurait fallu
 *   faire défiler toute la série à rebours. Il se faisait donc d'un saut
 *   instantané, si bien qu'**une flèche se comportait autrement que les
 *   autres**, ce qui se lisait comme un défaut.
 *
 * Les diapositives sont maintenant superposées et se relaient en opacité. Le
 * retour au premier visuel devient un fondu comme les autres : le bouclage
 * cesse d'être un cas particulier.
 *
 * ⚠️ Le glissement au doigt n'est plus porté par le CSS, il est repris dans
 * theme.js. Sans lui, le carrousel serait inutilisable sur mobile.
 */
.hero-carrousel__liste {
	position: relative;
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Toutes les diapositives occupent la même case de grille : elles se
 * superposent exactement, et la hauteur du bloc est celle de la plus haute.
 * C'est ce qui évite que la page tressaute d'un visuel à l'autre.
 */
.hero-carrousel__slide {
	position: relative;
	grid-area: 1 / 1;
	display: flex;
	min-width: 0;
	align-items: flex-end;
	opacity: 0;
	/*
	 * Retirée du parcours au clavier et de la lecture d'écran tant qu'elle
	 * n'est pas à l'écran : sans cela, la tabulation traverse les liens de
	 * quatre diapositives invisibles.
	 */
	visibility: hidden;
	/*
	 * Fondu long et régulier, 1,1 s au lieu de 0,6.
	 *
	 * ⚠️ Deux choses changent, et la seconde compte autant que la durée.
	 * `ease` démarre vite puis freine : sur une image plein écran, ce départ
	 * brusque se lit comme un basculement plutôt que comme un fondu.
	 * `ease-in-out` étale le mouvement aux deux bouts.
	 *
	 * ⚠️ La visibilité est transitionnée elle aussi, avec un délai égal à la
	 * durée du fondu. Sans ce délai, elle bascule à `hidden` dès la première
	 * image : la diapositive sortante disparaissait d'un coup et seule
	 * l'entrante se fondait, par-dessus le fond de page. Les deux se croisent
	 * maintenant vraiment.
	 */
	transition: opacity 1.1s ease-in-out, visibility 0s linear 1.1s;
	/*
	 * ⚠️ Le carrousel occupe seul le premier écran, décision actée.
	 *
	 * Il était borné à 34rem au plus, pour laisser voir qu'il y avait du contenu
	 * dessous. Choix inverse désormais : rien d'autre ne doit être visible avant
	 * de faire défiler.
	 *
	 * La hauteur de la barre est retranchée parce qu'elle est collée en haut mais
	 * reste dans le flux : sans cela, le bas du carrousel passerait sous la ligne
	 * de flottaison et la page s'ouvrirait déjà décalée.
	 *
	 * svh et non vh : sur mobile, vh vaut la fenêtre barre d'adresse rétractée,
	 * donc plus que la place réellement disponible à l'ouverture. Le carrousel
	 * dépasserait de quelques dizaines de pixels, et la page s'ouvrirait avec une
	 * amorce de défilement, exactement ce qu'on cherche à éviter.
	 */
	min-height: calc(100svh - var(--ir-hauteur-barre));
}

.hero-carrousel__slide.est-active {
	opacity: 1;
	visibility: visible;
	/* Elle, en revanche, devient visible tout de suite : c'est l'opacité qui la révèle. */
	transition: opacity 1.1s ease-in-out, visibility 0s linear 0s;
	/* Au-dessus des sortantes, pour que le fondu se fasse par-dessus. */
	z-index: 1;
}

/*
 * Sans JavaScript, la première diapositive reste visible : le carrousel se
 * réduit à une image d'ouverture, ce qui est un repli acceptable. Les flèches,
 * elles, restent masquées puisqu'elles ne commanderaient rien.
 */
.hero-carrousel__liste:not(.est-pilotee) .hero-carrousel__slide:first-child {
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	.hero-carrousel__slide {
		transition: none;
	}
}

.hero-carrousel__visuel {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/*
 * ⚠️ display: block n'est pas une commodité, c'est la correction.
 *
 * object-fit: cover était déjà posé et faisait son travail : ce n'est pas le
 * recadrage qui laissait des bandes vides. L'image était rendue en ligne, donc
 * posée sur une ligne de texte, et l'espace réservé sous la ligne de base
 * découvrait le fond du bloc sur quelques pixels en bas du visuel. Le composant
 * carte pose display: block pour cette raison exacte, le carrousel l'avait
 * oublié.
 *
 * Le recadrage est assumé : le visuel remplit le bloc quel que soit le rapport
 * du fichier, plutôt que de laisser du vide.
 */
.hero-carrousel__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
}

/*
 * Voile en dégradé et non en aplat : la photo reste lisible en haut, le texte
 * garde son contraste en bas. Un voile plein éteindrait tout le visuel.
 */
.hero-carrousel__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 75%);
}

/* Sans visuel, le dégradé n'a rien à assombrir : un aplat de la charte prend le relais. */
.hero-carrousel__slide--sans-visuel {
	background: var(--ir-accent-fonce);
}

.hero-carrousel__slide--sans-visuel::after {
	display: none;
}

/*
 * Le bloc de texte est aligné en bas de la diapositive, mais décollé du bord.
 *
 * Depuis que la diapositive occupe tout l'écran, un simple écart de bloc laissait
 * le titre, le sous-titre et le bouton presque posés sur l'arête inférieure. Le
 * rembourrage bas les remonte dans le tiers inférieur de l'image, là où l'œil les
 * attend sur une ouverture de magazine.
 *
 * La valeur est proportionnelle à la fenêtre et non fixe : la diapositive fait
 * elle-même une hauteur d'écran, un retrait de 4 rem qui convient à un portable
 * ne pèse plus rien sur un grand moniteur. Les bornes du clamp évitent les deux
 * extrêmes, texte collé en bas sur un écran très court, texte remonté au milieu
 * sur un écran très haut.
 */
.hero-carrousel__corps {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--ir-largeur-contenu);
	margin-inline: auto;
	padding-block: var(--ir-rythme-bloc) clamp(2rem, 15svh, 9rem);
	padding-inline: var(--ir-gouttiere);
	color: var(--ir-fond);
}

.hero-carrousel__titre {
	max-width: 20ch;
	margin-bottom: var(--ir-esp-2);
	color: var(--ir-fond);
	font-size: var(--ir-t-display);
	font-weight: var(--ir-w-display);
	letter-spacing: var(--ir-ls-display);
	line-height: var(--ir-lh-display);
	text-wrap: balance;
}

.hero-carrousel__sous-titre {
	max-width: 46ch;
	margin-bottom: var(--ir-esp-4);
	color: var(--ir-fond);
	font-size: var(--ir-t-m);
}

.hero-carrousel__lien {
	background: var(--ir-fond);
	color: var(--ir-texte);
}

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

/*
 * Flèches latérales. Cachées sous 48rem : au doigt on fait glisser, et deux
 * pastilles posées sur un visuel de téléphone mangent l'image.
 */
/*
 * Discrètes au repos, franches au survol.
 *
 * La pastille blanche opaque en faisait l'élément le plus contrasté de la page
 * d'ouverture, devant le titre de l'article. Le fond plein disparaît, le trait
 * s'affine, et l'opacité de repos les fait passer derrière l'image. Elles
 * reviennent à pleine opacité au survol et au focus, où l'on cherche à les
 * atteindre.
 *
 * L'ombre portée remplace le fond : sans elle, un chevron blanc posé sur une
 * photo à dominante claire deviendrait invisible.
 */
/*
 * Flèches latérales : chevron seul, sans cadre.
 *
 * La pastille sombre tenait le contraste mais posait deux blocs opaques sur la
 * photo. Le chevron est agrandi et repose sur une ombre portée, qui le détache
 * d'un ciel clair comme d'un fond noir sans rien masquer de l'image.
 *
 * ⚠️ La cible tactile reste à 2,75rem, soit 44 px, alors que le dessin visible
 * en fait davantage. Grossir le dessin sans la zone cliquable, ou l'inverse,
 * sont deux erreurs distinctes.
 */
.hero-carrousel__fleche {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: none;
	width: 4.5rem;
	height: 4.5rem;
	align-items: center;
	justify-content: center;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	/*
	 * ⚠️ Chevron simple, sans pastille, comme le carrousel de la page abonnement.
	 * Décision du 20/08/2026, la pastille sombre est abandonnée.
	 *
	 * Le dessin est plus grand pour rester repérable sans son fond, et
	 * translucide au repos pour ne pas concurrencer le titre de la diapositive.
	 * L'ombre portée remplace la pastille : sur une photo claire, un chevron
	 * blanc seul disparaîtrait.
	 */
	border-radius: 0;
	background: none;
	color: var(--ir-fond);
	opacity: 0.6;
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
	cursor: pointer;
	transition: opacity 0.2s ease, color 0.2s ease, filter 0.2s ease;
}

.hero-carrousel__fleche svg {
	width: 3rem;
	height: 3rem;
}

/*
 * Au survol, le chevron passe en noir plein et son ombre s'inverse : le
 * contraste bascule franchement, ce qui signale la cible sans ajouter de cadre.
 */
.hero-carrousel__fleche:hover,
.hero-carrousel__fleche:focus-visible {
	background: none;
	color: var(--ir-texte);
	opacity: 1;
	filter: drop-shadow(0 1px 4px rgba(255, 255, 255, 0.7));
}

@media (prefers-reduced-motion: reduce) {
	.hero-carrousel__fleche,
	.hero-carrousel__fleche:hover,
	.hero-carrousel__fleche:focus-visible {
		transition: none;
		transform: translateY(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-carrousel__fleche,
	.hero-carrousel__fleche:hover,
	.hero-carrousel__fleche:focus-visible {
		transition: none;
		transform: translateY(-50%);
	}
}

.hero-carrousel__fleche[disabled] {
	opacity: 0.35;
	cursor: default;
}

.hero-carrousel__fleche--precedent {
	left: var(--ir-gouttiere);
}

.hero-carrousel__fleche--suivant {
	right: var(--ir-gouttiere);
}

@media (min-width: 48rem) {
	.hero-carrousel__fleche:not([hidden]) {
		display: flex;
	}
}