/*
 * Gabarits de pages : page abonnement, contenu éditorial long, accessibilité.
 *
 * Cinquième et dernière feuille de la chaîne, chargée après les autres : elle
 * peut donc s'appuyer sur tout ce qui précède sans avoir à forcer la priorité.
 */

/* ==========================================================================
   Page abonnement
   ==========================================================================
   Source : le handoff de design, écrans 1b (desktop 1280) et 1e (mobile 390).
   Il remplace le relevé Elementor qui gouvernait ce fichier jusqu'ici.

   ⚠️ Deux règles tiennent sur tout ce bloc, et elles ne se négocient pas
   écran par écran :

   1. Les titres se branchent sur les jetons de l'échelle, jamais sur les
      valeurs en ligne des maquettes. Celles-ci ont été composées page par
      page : leurs titres de section sont à 40 / 33 px, alors que T2 vaut
      34 / 27. Un h2 a le même corps partout, sinon l'échelle ne sert à rien
      et cette page redevient une page à part.
   2. Le contenu reste en base. Ce fichier ne décide de rien qui s'écrive :
      tarifs, avantages, notes et FAQ viennent des métadonnées de la page,
      lues par les accesseurs de inc/abonnement.php.

   Écarts assumés par rapport au handoff, tous documentés en regard de leur
   règle : fond de page, gris de rôle, corps de texte courant.
   ========================================================================== */

.abonnement {
	/*
	 * Le bordeaux n'est pas déclaré ici : c'est le jeton du socle, unifié sur
	 * la valeur relevée dans la mise en page d'origine. Les deux alias sont
	 * conservés pour que les règles de la page restent lisibles, mais ils ne
	 * portent plus de valeur propre.
	 */
	--abo-bordeaux: var(--ir-accent-fonce);
	/* Même teinte à 61 % d'opacité, celle des icônes et des coches. */
	--abo-bordeaux-doux: color-mix(in srgb, var(--ir-accent-fonce) 61%, transparent);

	/*
	 * Rayons propres à cette page : 15 px sur la carte d'offre et le bloc
	 * prix, 5 px sur l'encart de résiliation et les cartes de contact, contre
	 * 6 px et 4 px partout ailleurs. C'est le handoff qui tranche ainsi, et
	 * l'arbitrage reste à confirmer.
	 */
	--abo-rayon: 15px;
	--abo-rayon-bloc: 5px;

	/* Largeur de la carte d'offre. */
	--abo-carte: 400px;

	/*
	 * Largeur commune à l'encart de résiliation et à la grille de contact.
	 *
	 * Un seul jeton pour les deux : le handoff demande explicitement que
	 * l'encart s'aligne sur la grille de contact, et deux valeurs recopiées
	 * finiraient par diverger à la première retouche.
	 */
	--abo-largeur-bloc: 900px;

	/*
	 * Respiration de la page. Le handoff donne 64 px en haut et 96 px en bas
	 * sur grand écran, 40 et 56 sur mobile.
	 */
	padding-block: clamp(2.5rem, 1.75rem + 3vw, 4rem) var(--ir-rythme-section);
}

/*
 * ⚠️ Le fond de page du handoff, #EDECEC, n'est pas repris : le site porte
 * déjà --ir-fond-page (#f2f2f2) sur toutes les pages. Deux points d'écart ne
 * se voient pas, mais une page qui déclare son propre gris, si : elle
 * cesserait de suivre le jour où le jeton change. Ce même gris sert ci-dessous
 * de fond au bloc prix, ce qui est bien le rôle que le handoff lui donne.
 */

/* Le titre de la page, seul Display de cette page. */
.abonnement .page-titre {
	font-size: var(--ir-t-display);
	font-weight: var(--ir-w-display);
	letter-spacing: var(--ir-ls-display);
	line-height: var(--ir-lh-display);
	color: var(--ir-texte);
	text-align: center;
}

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

/*
 * Titres de section, tous au même niveau T2.
 *
 * Les maquettes les composent en 40 / 33 px. Le corps vient de l'échelle,
 * pas de la page.
 */
.abonnement .carrousel-magazine__titre,
.abonnement .contact__titre,
.abonnement .faq__titre {
	margin-bottom: var(--ir-esp-5);
	font-size: var(--ir-t-2);
	font-weight: var(--ir-w-2);
	letter-spacing: var(--ir-ls-2);
	line-height: var(--ir-lh-2);
	color: var(--ir-texte);
	text-align: center;
}

/* ==========================================================================
   Couvertures en éventail
   ==========================================================================
   Trois couvertures posées en surimpression au-dessus de la carte d'offre,
   rotations -10, +2 et +11 degrés.

   ⚠️ Le balisage correspondant n'est pas encore rendu : il demande trois
   champs de visuel sur la page, qui relèvent de l'écran de saisie et non de
   ce fichier. Les règles sont prêtes et ne s'appliquent à rien tant que ces
   champs n'existent pas. Voir le point 4 du handoff.
   ========================================================================== */

.offre__couvertures {
	position: relative;
	width: 300px;
	height: 150px;
	/* Les couvertures débordent sur le haut de la carte. */
	margin: 0 auto -36px;
	z-index: 2;
	/* Décoratives : elles ne doivent pas intercepter le clic du bouton. */
	pointer-events: none;
}

/*
 * ⚠️ Ombre portée sur l'éventail, et sur lui seul. Demandé le 25/08/2026, ce
 * qui revient en partie sur la décision du même jour de retirer toute ombre des
 * couvertures.
 *
 * L'exception se tient : ailleurs, une couverture est posée seule sur une
 * surface, et une ombre y ferait un cadre autour d'un objet déjà détouré. Ici
 * les trois se chevauchent, et sans ombre on ne lit plus trois magazines
 * empilés mais un aplat découpé. L'ombre sert à les séparer les unes des
 * autres, pas à les décorer.
 *
 * Elle est donc plus marquée sous la couverture du centre, qui passe devant.
 */
.offre__couverture {
	position: absolute;
	top: 20px;
	width: 84px;
	height: auto;
	/* Géométrie ici, présentation commune dans 02-composants.css. */
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
}

.offre__couverture--gauche {
	left: 28px;
	transform: rotate(-10deg);
}

.offre__couverture--droite {
	right: 28px;
	transform: rotate(11deg);
}

/* Celle du centre passe devant les deux autres, et déborde un peu plus haut. */
.offre__couverture--centre {
	top: 0;
	left: 50%;
	width: 92px;
	transform: translateX(-50%) rotate(2deg);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
	z-index: 2;
}

/* ==========================================================================
   Carte d'offre
   ==========================================================================
   400 px de large, fond blanc, filet gris, rayon 15 px.

   ⚠️ Le filet remplace l'ombre douce qui tenait ce rôle jusqu'ici. L'ombre
   est désormais réservée au bloc prix, qui est le seul élément que le
   handoff détache ainsi.
   ========================================================================== */

.offre {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.offre__carte {
	width: 100%;
	max-width: var(--abo-carte);
	padding: var(--ir-esp-5) var(--ir-esp-4);
	border: 1px solid var(--ir-bordure);
	border-radius: var(--abo-rayon);
	background: var(--ir-fond);
	text-align: center;
}

@media (min-width: 48rem) {
	.offre__carte {
		padding: var(--ir-esp-5) var(--ir-esp-5) 40px;
	}
}

/*
 * La marge haute ne s'ouvre que si l'éventail est là pour l'occuper. Sans
 * lui, ces 60 px seraient un trou en haut de la carte.
 */
.offre__couvertures + .offre__carte {
	padding-top: 60px;
}

/*
 * « Magazine papier » : T3.
 *
 * ⚠️ Corps qui s'écarte : les maquettes le composent en 21 px desktop et
 * 20 px mobile, T3 vaut 25 / 20. C'est un titre de niveau, il suit l'échelle.
 */
.offre__titre {
	margin-bottom: var(--ir-esp-2);
	font-size: var(--ir-t-3);
	font-weight: var(--ir-w-3);
	letter-spacing: var(--ir-ls-3);
	line-height: var(--ir-lh-3);
	color: var(--ir-texte);
}

/*
 * Accroche de la carte.
 *
 * ⚠️ Corps qui s'écarte : 14 px dans les maquettes, comme tout le texte
 * courant de cette page. L'échelle n'a rien à 14 px, Petit vaut 15. C'est
 * l'écart le plus répété de la page, il vaut pour toutes les règles marquées
 * de la même façon ci-dessous.
 *
 * ⚠️ Gris : les maquettes distinguent #6b6b6b pour les mentions secondaires
 * et #757575 pour les réponses de la FAQ. Un point d'écart entre deux gris ne
 * se voit pas, --ir-texte-doux tient les deux rôles.
 */
.offre__accroche {
	margin: 0;
	font-size: var(--ir-t-petit);
	font-weight: 600;
	line-height: 1.55;
	color: var(--ir-texte-doux);
}

/* ==========================================================================
   Prix
   ==========================================================================
   ⚠️ Plus d'encart gris autour du prix et du bouton, arbitrage rendu le
   20/08/2026 contre les maquettes, qui posaient ici un bloc en surimpression
   sur fond #EDECEC avec ombre portée. Le tarif, la mention et le bouton
   restent, sans cadre : la carte est déjà un bloc détaché, un second cadre
   dedans redoublait la boîte sans rien hiérarchiser.

   Ne pas le réintroduire sans demande explicite.
   ========================================================================== */

.offre__prix {
	margin: var(--ir-esp-4) 0 0;
}

/*
 * Le tarif.
 *
 * ⚠️ Corps qui s'écarte, mais de peu : 17 px dans les maquettes, ce qui est
 * exactement Corps sur grand écran et 16 px sur mobile. La graisse 800 vient
 * des maquettes : ce n'est pas un titre de niveau, c'est le seul chiffre que
 * la page doit faire lire.
 */
.offre__montant {
	margin: 0;
	font-size: var(--ir-t-corps);
	font-weight: 800;
	line-height: 1.3;
	color: var(--ir-texte);
}

/*
 * Prix de référence.
 *
 * ⚠️ Volontairement non barré, comme dans les maquettes : le texte saisi dit
 * déjà « au lieu de », et un prix barré est une mention commerciale qui
 * engage. Corps Micro, mais ni la graisse ni l'interlettrage de ce niveau,
 * réservés aux étiquettes en capitales.
 */
.offre__reference {
	margin: 6px 0 0;
	font-size: var(--ir-t-micro);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
	color: var(--ir-texte-doux);
}

/*
 * Bouton de paiement : jamais pleine largeur, c'est explicitement demandé.
 *
 * Le survol n'est pas redéclaré : .bouton passe déjà au rouge vif, ce que
 * demande le handoff. La bascule d'échelle de l'ancien relevé Elementor est
 * retirée, elle ne figure dans aucune maquette.
 */
.abonnement .offre__bouton {
	margin-top: 18px;
	padding: 12px 40px;
	font-size: var(--ir-t-petit);
	line-height: 20px;
	transition: background-color 0.15s ease;
}

@media (min-width: 48rem) {
	.abonnement .offre__bouton {
		font-size: 1rem;
	}
}

/* ==========================================================================
   Liste des avantages
   ========================================================================== */

.offre__avantages {
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

/* ⚠️ Corps qui s'écarte : 13 px dans les maquettes, Petit vaut 15. */
.offre__avantage {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: var(--ir-t-petit);
	line-height: 1.4;
	color: var(--ir-texte);
}

.offre__avantage + .offre__avantage {
	margin-top: 10px;
}

/*
 * ⚠️ La coche se colore par color, pas par fill.
 *
 * Son tracé est en stroke: currentColor et son remplissage est nul : une
 * règle fill: ne l'atteint pas. Elle héritait donc de la couleur du texte,
 * et le bordeaux n'a jamais été appliqué depuis que ce composant existe.
 */
.offre__coche {
	flex: 0 0 auto;
	margin-top: 0.15em;
	color: var(--abo-bordeaux-doux);
}

/* ==========================================================================
   Notes de bas de page
   ==========================================================================
   ⚠️ Italique demandée le 21/08/2026, contre l'arbitrage précédent. À savoir
   avant de la retirer, ou de s'étonner du rendu :

   **Ruda n'a pas de fonte italique.** Le navigateur en fabrique donc une, par
   simple inclinaison mécanique des lettres droites. Ce n'est pas une italique
   dessinée : les lettres ne changent pas de forme, elles penchent. Le défaut
   se voit surtout sur les rondes, a, e, o, et sur les chiffres, ici « 5,90 € »
   et « 7 jours ».

   Deux lignes de mentions légales en petit corps sont le cas où cela se voit
   le moins, ce qui rend la demande tenable. Si le rendu déplaisait, la seule
   vraie solution serait une seconde famille pour ces deux lignes, ce qui
   contredirait la décision d'une police unique : à arbitrer à ce moment-là,
   pas avant.
   ========================================================================== */

.offre__notes {
	width: 100%;
	max-width: 40rem;
	margin: var(--ir-rythme-bloc) auto 0;
	text-align: center;
}

.offre__note {
	margin: 0;
	font-size: var(--ir-t-micro);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.7;
	color: var(--ir-texte-doux);
}

.offre__note + .offre__note {
	margin-top: var(--ir-esp-2);
}

/* ==========================================================================
   Carrousel du magazine
   ==========================================================================
   Défilement par accrochage CSS, sans JavaScript, décision actée.

   ⚠️ Les flèches ‹ › des maquettes ne sont donc pas rendues : elles
   supposeraient un script en façade, que cette page s'interdit. Le glissement
   au doigt, la molette et le clavier couvrent le même besoin.

   Hauteur fixe plutôt que rapport imposé : la cliente y met des couvertures
   en 3/4 comme des doubles pages en 16/10, et un rapport unique recadrerait
   les unes ou les autres. À hauteur commune, tout s'aligne sur la même ligne
   de base.
   ========================================================================== */

/*
 * Un visuel par écran sur mobile, deux au-delà de 48rem. C'est le nombre
 * visible qui commande la largeur d'un élément, d'où le calcul : la piste
 * moins les gouttières, divisée par ce nombre.
 */
/*
 * ⚠️ Pas de surface derrière le carrousel, décision du 25/08/2026.
 *
 * Une surface blanche y avait été posée pour une raison réelle : le fichier de
 * la double page porte **son propre fond blanc**, plus large que la page
 * photographiée, et ce fond se lit comme un rectangle franc sur le gris. Le
 * remède se voyait plus que le mal, la bande blanche coupant la page en deux.
 *
 * Le rectangle est donc assumé en attendant le seul vrai correctif : recadrer
 * les fichiers. Ne pas remettre de fond ici, c'est déjà essayé.
 */
.carrousel-magazine {
	--carrousel-visibles: 1;
}

@media (min-width: 48rem) {
	.carrousel-magazine {
		--carrousel-visibles: 2;
	}
}

.carrousel-magazine__cadre {
	display: flex;
	gap: var(--ir-esp-2);
	align-items: center;
}

@media (min-width: 48rem) {
	.carrousel-magazine__cadre {
		gap: var(--ir-esp-4);
	}
}

.carrousel-magazine__piste {
	align-items: flex-start;
	display: flex;
	flex: 1 1 auto;
	gap: var(--ir-esp-5);
	align-items: stretch;
	min-width: 0;
	padding-block: var(--ir-esp-1);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	/*
	 * ⚠️ Barre de défilement masquée, et c'est le seul endroit du site où on se
	 * l'autorise. Ailleurs, masquer une barre revient à cacher qu'il y a
	 * quelque chose à faire défiler. Ici, les deux flèches le disent, et une
	 * barre grise sous les couvertures se voyait plus que les visuels.
	 *
	 * Le contenu reste atteignable au doigt, à la molette et au clavier : c'est
	 * l'indicateur qui disparaît, pas le défilement.
	 */
	scrollbar-width: none;
}

.carrousel-magazine__piste::-webkit-scrollbar {
	display: none;
}

.carrousel-magazine__element {
	flex: 0 0 calc(
		(100% - (var(--carrousel-visibles) - 1) * var(--ir-esp-5)) / var(--carrousel-visibles)
	);
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}

/*
 * L'image occupe la case et se recadre : les visuels fournis mêlent des
 * couvertures en 3/4 et des doubles pages en 16/10, et sans rapport imposé
 * chaque case prendrait une hauteur différente.
 */
/*
 * ⚠️ Aucune hauteur imposée, aucun recadrage. Décision révisée le 20/08/2026.
 *
 * Les visuels sont hétérogènes par nature : certains sont des couvertures au
 * format portrait, d'autres des doubles pages en paysage. Une hauteur commune
 * avec object-fit: cover les ramenait au même gabarit en rognant les doubles
 * pages sur les côtés, c'est-à-dire en coupant précisément ce qu'elles montrent.
 *
 * Ils partagent donc la largeur de la case, fixée par .carrousel-magazine__element,
 * et gardent leur hauteur propre. L'accrochage du carrousel se fait sur la
 * largeur, il n'est pas gêné par des hauteurs inégales.
 */
.carrousel-magazine__element {
	/*
	 * Les visuels gardent leur hauteur propre, mais la case a une hauteur commune :
	 * une image plus courte que la plus haute se centre au lieu de rester collée
	 * en haut, ce qui donnait une rangée bancale.
	 */
	display: flex;
	align-items: center;
	justify-content: center;
}

.carrousel-magazine__element img {
	display: block;
	width: 100%;
	height: auto;
	/*
	 * ⚠️ Borne haute et non hauteur imposée. Sans elle, une double page en paysage
	 * poussait le bloc à occuper la moitié de l'écran. Avec, l'image garde son
	 * rapport et ne dépasse pas cette hauteur, quitte à être moins large que sa
	 * case.
	 */
	max-height: clamp(13rem, 10rem + 10vw, 18rem);
	width: auto;
	max-width: 100%;
	/* Présentation commune aux couvertures, voir 02-composants.css. */
}

/*
 * Flèches sans cadre, comme dans les maquettes : un simple chevron.
 *
 * La cible tactile fait tout de même 2,75 rem, sinon le dessin seul serait trop
 * petit pour être atteint au pouce.
 */
.carrousel-magazine__fleche {
	display: flex;
	flex: 0 0 auto;
	width: 3.5rem;
	height: 3.5rem;
	align-items: center;
	justify-content: center;
	/* L'écart avec les visuels : la flèche ne doit pas toucher la première image. */
	margin-inline: var(--ir-esp-2);
	padding: 0;
	border: 0;
	background: none;
	color: var(--ir-texte);
	font-size: 2.5rem;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s ease;
}

.carrousel-magazine__fleche:hover,
.carrousel-magazine__fleche:focus-visible {
	color: var(--ir-accent-fonce);
}

/*
 * ⚠️ Une flèche sans destination est désactivée, pas retirée du document.
 *
 * `hidden` aurait supprimé sa boîte : la piste se serait élargie et décalée
 * d'un demi-visuel chaque fois qu'on atteint une extrémité. `visibility` seule
 * garde la place mais **laisse le bouton atteignable au clavier**, ce qui
 * revient à faire tabuler sur un bouton invisible. L'attribut disabled règle
 * les deux : la place est gardée, le bouton sort du parcours.
 *
 * C'est aussi l'état de départ, avant le script : sans lui, aucune flèche
 * n'apparaît et la piste reste glissable.
 */
.carrousel-magazine__fleche:disabled {
	visibility: hidden;
	cursor: default;
}

/* ==========================================================================
   Encart de résiliation
   ==========================================================================
   Carte blanche à filet gris, alignée sur la grille de contact par le jeton
   de largeur commun.
   ========================================================================== */

.encart-resiliation {
	width: 100%;
	max-width: var(--abo-largeur-bloc);
	margin-inline: auto;
	padding: var(--ir-esp-4) var(--ir-esp-4);
	border: 1px solid var(--ir-bordure);
	border-radius: var(--abo-rayon-bloc);
	background: var(--ir-fond);
	text-align: center;
}

@media (min-width: 48rem) {
	.encart-resiliation {
		padding: 28px 32px;
	}
}

/*
 * ⚠️ Corps qui s'écarte : 19 px desktop et 17 px mobile dans les maquettes,
 * T4 vaut 19 / 18. La graisse 800 vient des maquettes : cette ligne est une
 * interpellation isolée au milieu de la page, pas un titre de carte.
 */
.encart-resiliation__titre {
	margin-bottom: var(--ir-esp-2);
	font-size: var(--ir-t-4);
	font-weight: 800;
	letter-spacing: var(--ir-ls-4);
	line-height: var(--ir-lh-4);
	color: var(--ir-texte);
}

/* ⚠️ Corps qui s'écarte : 14 px dans les maquettes, Petit vaut 15. */
.encart-resiliation p {
	margin: 0;
	font-size: var(--ir-t-petit);
	line-height: 1.55;
	color: var(--ir-texte);
}

/* ==========================================================================
   Blocs de contact
   ========================================================================== */

.contact__blocs {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ir-esp-4);
	width: 100%;
	max-width: var(--abo-largeur-bloc);
	margin-inline: auto;
}

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

.contact__bloc {
	padding: var(--ir-esp-4);
	border: 1px solid var(--ir-bordure);
	border-radius: var(--abo-rayon-bloc);
	background: var(--ir-fond);
	text-align: center;
}

@media (min-width: 48rem) {
	.contact__bloc {
		padding: var(--ir-esp-5);
	}
}

/*
 * ⚠️ Même remarque que pour la coche : ces icônes sont tracées en
 * stroke: currentColor, elles se colorent par color et non par fill.
 *
 * Le handoff mentionne un trait #e06070 en prose, mais sa propre liste de
 * jetons ne retient que deux rouges et donne ce bordeaux à 61 % pour les
 * icônes. C'est cette liste qui fait foi, elle est cohérente avec le reste
 * du site.
 */
.contact__icone {
	display: block;
	width: 28px;
	height: 28px;
	margin: 0 auto 10px;
	color: var(--abo-bordeaux-doux);
}

@media (min-width: 48rem) {
	.contact__icone {
		width: 32px;
		height: 32px;
		margin-bottom: 12px;
	}
}

/*
 * ⚠️ Corps qui s'écarte : 21 px desktop et 19 px mobile dans les maquettes,
 * T3 vaut 25 / 20.
 */
.contact__intitule {
	margin-bottom: var(--ir-esp-3);
	font-size: var(--ir-t-3);
	font-weight: var(--ir-w-3);
	letter-spacing: var(--ir-ls-3);
	line-height: var(--ir-lh-3);
	color: var(--ir-texte);
}

/* ⚠️ Corps qui s'écarte : 14 px dans les maquettes, Petit vaut 15. */
.contact__bloc p,
.contact__bloc address {
	margin: 0;
	font-size: var(--ir-t-petit);
	line-height: 1.55;
	font-style: normal;
	color: var(--ir-texte-doux);
}

/* ==========================================================================
   FAQ
   ==========================================================================
   Accordéon en details et summary natifs, sans JavaScript : c'est ce qui
   garantit le balisage FAQPage, dont Google exige que les réponses soient
   présentes et visibles dans la page.

   ⚠️ Deux colonnes par une grille, pas par des colonnes CSS.

   En multicolonne, ouvrir une entrée haute dans la première colonne repousse
   les suivantes dans la seconde : toute la liste se réorganise sous le doigt
   au moment du clic. La grille place chaque entrée une fois pour toutes ;
   l'ouverture pousse ce qui suit dans la même colonne, rien d'autre ne bouge.
   ========================================================================== */

.faq__liste {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 var(--ir-esp-6);
	align-items: start;
	width: 100%;
	max-width: 1100px;
	margin-inline: auto;
}

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

.faq__entree {
	border-bottom: 1px solid var(--ir-bordure);
}

/*
 * ⚠️ Le marqueur natif est retiré de trois façons, et les trois sont utiles :
 * display: flex suffit sous Chrome et Safari, list-style: none est ce que
 * comprend Firefox, et ::marker couvre le reste. En laisser une de côté, c'est
 * garder un triangle en plus du + / – sur un moteur ou l'autre.
 */
.faq__question {
	display: flex;
	gap: var(--ir-esp-3);
	align-items: center;
	justify-content: space-between;
	padding-block: 18px;
	list-style: none;
	font-size: var(--ir-t-4);
	font-weight: var(--ir-w-4);
	letter-spacing: var(--ir-ls-4);
	line-height: var(--ir-lh-4);
	color: var(--ir-texte);
	cursor: pointer;
}

.faq__question::marker,
.faq__question::-webkit-details-marker {
	display: none;
	content: "";
}

/*
 * Le + et le – sont posés en pseudo-élément et non écrits dans le balisage :
 * ils ne disent rien qu'un lecteur d'écran n'annonce déjà par l'état ouvert
 * ou fermé du details.
 */
.faq__question::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1;
	color: var(--ir-accent);
}

.faq__entree[open] > .faq__question::after {
	/* Tiret demi-cadratin, jamais le cadratin. */
	content: "\2013";
}

/* ⚠️ Corps qui s'écarte : 14 px dans les maquettes, Petit vaut 15. */
.faq__reponse {
	padding-bottom: 18px;
	font-size: var(--ir-t-petit);
	line-height: 1.55;
	color: var(--ir-texte-doux);
}

.faq__reponse p {
	margin: 0;
}

/* ==========================================================================
   Contenu éditorial long
   ==========================================================================
   Mentions légales, CGV, page contact. Largeur de lecture bornée : au-delà
   d'une soixantaine de signes par ligne, l'œil perd la ligne suivante en
   revenant à la marge.
   ========================================================================== */

/*
 * Classe propre au gabarit des pages fixes, et non .page-seule : cette
 * dernière est aussi portée par la page City Guide Paris, dont la grille de
 * vignettes serait écrasée par une largeur de lecture.
 */
/* ==========================================================================
   Page City Guide Paris
   ==========================================================================
   Trois choses, dans cet ordre : le titre, le sous-titre, la grille. Le
   contenu hérité de l'éditeur n'est pas rendu, voir le gabarit.

   ⚠️ La respiration en haut est indispensable, elle ne relève pas du goût.
   <main> n'a aucune marge verticale et la barre est collée : sans ce
   décrochage, le titre démarre sous la barre et s'en trouve amputé. Le même
   décrochage existe sur l'article et sur la fiche, pour la même raison.
   ========================================================================== */

.page-city-guide-paris {
	padding-block: var(--ir-rythme-bloc) var(--ir-rythme-section);
}

/*
 * Titre et sous-titre forment un seul bloc d'ouverture : ils se touchent
 * presque, et c'est l'écart sous eux qui les détache de la grille. C'est le
 * même rapport que sur l'en-tête de la grille d'accueil, à laquelle cette page
 * doit ressembler puisqu'elle en partage le composant.
 */
.page-city-guide-paris .page-entete {
	margin-bottom: var(--ir-rythme-bloc);
}

.page-city-guide-paris .page-titre {
	margin-bottom: var(--ir-esp-2);
}

.page-city-guide-paris .page-chapo {
	margin: 0;
	max-width: 44rem;
	color: var(--ir-texte-doux);
	font-size: var(--ir-t-4);
	line-height: 1.5;
}

/*
 * La grille suit immédiatement l'en-tête : sa marge haute de section ferait
 * double emploi avec l'écart déjà posé sous le sous-titre, et creuserait un
 * vide de plusieurs centaines de pixels au milieu de la page.
 */
.page-city-guide-paris .grille-vignettes {
	margin-block: 0;
}

/*
 * Titre centré sur les pages fixes.
 *
 * Les trois pages du gabarit sont concernées, contact, CGV et mentions
 * légales : elles partagent la même mise en page, et un titre centré sur deux
 * d'entre elles se lirait comme un défaut sur la troisième.
 */
.page-editoriale .page-titre {
	text-align: center;
}

.page-editoriale {
	max-width: 42rem;
	margin-inline: auto;
	padding-block: var(--ir-esp-5) var(--ir-esp-6);
}

.contenu-editorial {
	font-size: var(--ir-t-m);
}

/*
 * Hiérarchie de titres lisible. L'écart au-dessus d'un titre est nettement plus
 * grand qu'en dessous : c'est ce qui rattache visuellement un titre au texte
 * qu'il annonce plutôt qu'à celui qui le précède.
 */
.contenu-editorial h2 {
	margin-top: var(--ir-esp-6);
	margin-bottom: var(--ir-esp-3);
	font-size: var(--ir-t-xl);
}

.contenu-editorial h3 {
	margin-top: var(--ir-esp-5);
	margin-bottom: var(--ir-esp-2);
	font-size: var(--ir-t-l);
}

.contenu-editorial h4 {
	margin-top: var(--ir-esp-4);
	margin-bottom: var(--ir-esp-2);
	font-size: var(--ir-t-m);
}

.contenu-editorial > *:first-child {
	margin-top: 0;
}

.contenu-editorial p,
.contenu-editorial ul,
.contenu-editorial ol {
	margin-bottom: var(--ir-esp-4);
}

.contenu-editorial ul,
.contenu-editorial ol {
	padding-left: var(--ir-esp-4);
}

.contenu-editorial li + li {
	margin-top: var(--ir-esp-2);
}

.contenu-editorial blockquote {
	margin: var(--ir-esp-5) 0;
	padding-left: var(--ir-esp-4);
	border-left: 3px solid var(--ir-accent);
	font-style: italic;
}

.contenu-editorial hr {
	margin-block: var(--ir-esp-6);
	border: 0;
	border-top: 1px solid var(--ir-bordure);
}

/* Les tableaux de tarifs des CGV débordent sur mobile sans ce conteneur. */
.contenu-editorial table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin-bottom: var(--ir-esp-4);
	font-size: var(--ir-t-s);
}

.contenu-editorial th,
.contenu-editorial td {
	padding: var(--ir-esp-2);
	border: 1px solid var(--ir-bordure);
	text-align: left;
}

.contenu-editorial th {
	background: var(--ir-rose);
}

.contenu-editorial a {
	text-decoration: underline;
}

.page-pagination {
	margin-top: var(--ir-esp-5);
	color: var(--ir-bordure-forte);
	font-size: var(--ir-t-xs);
}

/* ==========================================================================
   Accessibilité
   ========================================================================== */

.lien-evitement {
	position: absolute;
	left: -9999px;
}

.lien-evitement:focus {
	position: fixed;
	top: var(--ir-esp-3);
	left: var(--ir-esp-3);
	z-index: 100;
	padding: var(--ir-esp-2) var(--ir-esp-3);
	border-radius: var(--ir-arrondi-bouton);
	background: var(--ir-fond);
	color: var(--ir-texte);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

:focus-visible {
	outline: 2px solid var(--ir-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Document téléchargeable d'une page fixe
   ========================================================================== */

/*
 * Le bloc de téléchargement est centré, comme le titre de ces pages : c'est la
 * dernière chose de la page, elle se pose au milieu de la colonne plutôt que de
 * s'aligner sur un bord.
 */
.page-document {
	display: flex;
	gap: var(--ir-esp-3);
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin-block: var(--ir-rythme-bloc) 0;
	text-align: center;
}

/*
 * ⚠️ .page-document__poids n'existe plus dans le balisage : le format et le
 * poids sont passés dans le nom accessible du bouton, voir page.php. La règle
 * est retirée plutôt que laissée en place « au cas où », c'est ainsi qu'on se
 * retrouve avec du style qui ne s'applique à rien.
 */