/*
Theme Name: Interslide
Theme URI: https://interslide.ma
Author: Interslide
Author URI: https://interslide.ma
Description: Thème de blocs (Full Site Editing) du média indépendant marocain Interslide. Conçu pour le mobile, la lecture longue et une rédaction qui publie peu. Toute la présentation est pilotée par theme.json ; la logique métier vit dans le plugin interslide-core.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
Version: 0.8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: interslide
Tags: news, blog, one-column, full-site-editing, block-patterns, editor-style, accessibility-ready, translation-ready
*/

/*
 * Feuille de style du thème Interslide.
 *
 * Règle de travail : tout ce qui peut être exprimé dans theme.json doit l'être dans
 * theme.json, pour rester modifiable depuis l'éditeur de site sans toucher au code.
 * Ce fichier ne contient que ce que theme.json ne sait pas faire.
 *
 * Écrit en propriétés logiques (inline-start / block-end) : le jour où une version
 * arabe arrivera, la mise en page se retournera sans réécriture.
 */

/* -------------------------------------------------------------------------
 * 1. Socle
 * ---------------------------------------------------------------------- */

/* Empêche le mobile d'agrandir le texte tout seul en paysage. */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Césure du français : indispensable en colonne étroite sur mobile. */
.entry-content p,
.wp-block-post-content p,
.interslide-chapo {
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}

/* Chiffres tabulaires : dates, durées, temps de lecture s'alignent en colonne. */
.wp-block-post-date,
.interslide-meta,
.interslide-duree,
.interslide-temps-lecture,
time {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* -------------------------------------------------------------------------
 * 2. Accessibilité
 * ---------------------------------------------------------------------- */

/*
 * Anneau de focus unique et toujours visible. Le vermillon sur papier donne
 * un contraste suffisant, et le décalage évite qu'il se confonde avec un filet.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--vermillon-texte);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Lien d'évitement : caché tant qu'il n'a pas le focus clavier. */
.skip-link {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 999;
	padding: 0.75rem 1rem;
	background-color: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--papier);
	font-family: var(--wp--preset--font-family--plex-sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-120%);
}

.skip-link:focus {
	transform: translateY(0);
}

/* Contenu réservé aux lecteurs d'écran. */
.interslide-lecteur-ecran {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Cible de toucher confortable dans les zones denses (WCAG 2.5.8). */
.interslide-meta a,
.wp-block-post-terms a {
	display: inline-block;
	min-block-size: 24px;
}

@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;
	}
}

/* -------------------------------------------------------------------------
 * 3. Vocabulaire éditorial
 * ---------------------------------------------------------------------- */

/*
 * Étiquette : la surtitre rouge d'une une de journal (« À LA UNE », « DÉCRYPTAGE »).
 * Toujours en Plex, jamais en Newsreader : elle doit se lire comme une mention
 * technique, pas comme un titre.
 */
.interslide-etiquette {
	display: inline-block;
	font-family: var(--wp--preset--font-family--plex-sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--vermillon-texte);
	text-decoration: none;
}

/*
 * Quand l'étiquette est un bloc « Termes de l'article », les liens qu'il
 * contient sont visés par `.wp-block-post-terms a`, plus spécifique que la
 * classe du conteneur. Il faut donc les rattraper explicitement.
 */
.interslide-etiquette a,
.wp-block-post-terms.interslide-etiquette a {
	color: var(--wp--preset--color--vermillon-texte);
	border-block-end: 0;
	text-decoration: none;
}

.interslide-etiquette a:hover,
.interslide-etiquette a:focus-visible,
.wp-block-post-terms.interslide-etiquette a:hover,
.wp-block-post-terms.interslide-etiquette a:focus-visible {
	color: var(--wp--preset--color--vermillon-texte);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.interslide-etiquette--sourde {
	color: var(--wp--preset--color--gris);
}

.interslide-etiquette--prisme {
	color: var(--wp--preset--color--prisme);
}

/*
 * Chapô : 160 à 300 signes, en Newsreader italique. C'est le pont entre le titre
 * serif et le corps sans-serif ; il doit rester lisible seul, sans le titre.
 */
.interslide-chapo {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: var(--wp--preset--font-size--l);
	font-style: italic;
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--encre);
	margin-block: 0;
}

/* Ligne de métadonnées : auteur, date, mise à jour, temps de lecture. */
.interslide-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.75rem;
	font-family: var(--wp--preset--font-family--plex-sans);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
	color: var(--wp--preset--color--gris);
	margin-block: 0;
}

/* Puce de séparation, purement décorative : masquée aux lecteurs d'écran. */
.interslide-meta__sep {
	color: var(--wp--preset--color--filet);
}

.interslide-meta a {
	color: inherit;
	text-decoration-color: var(--wp--preset--color--filet);
	text-underline-offset: 0.18em;
}

.interslide-meta a:hover,
.interslide-meta a:focus-visible {
	color: var(--wp--preset--color--vermillon-texte);
	text-decoration-color: currentColor;
}

.interslide-meta__maj {
	font-weight: 600;
	color: var(--wp--preset--color--encre);
}

/* -------------------------------------------------------------------------
 * 4. Filets
 * ---------------------------------------------------------------------- */

/*
 * Le filet est le seul outil de séparation du site : pas de cartes encadrées,
 * pas d'ombres. Style de bloc appliqué à un groupe ou à une colonne.
 */
.is-style-interslide-filet-haut {
	border-block-start: var(--wp--custom--filet--style);
	padding-block-start: var(--wp--preset--spacing--40);
}

.is-style-interslide-filet-bas {
	border-block-end: var(--wp--custom--filet--style);
	padding-block-end: var(--wp--preset--spacing--40);
}

/* Filet épais : ouverture d'une grande section de la une. */
.is-style-interslide-filet-fort {
	border-block-start: 2px solid var(--wp--preset--color--encre);
	padding-block-start: var(--wp--preset--spacing--30);
}

/* Séparateur natif : un filet plein pleine largeur, jamais un tiret centré. */
.wp-block-separator:not(.is-style-dots) {
	border: 0;
	border-block-start: var(--wp--custom--filet--style);
	opacity: 1;
	inline-size: 100%;
	max-inline-size: none;
}

/* -------------------------------------------------------------------------
 * 5. Images
 * ---------------------------------------------------------------------- */

/*
 * Deux formats, jamais de carré : 3:2 pour l'éditorial, 9:16 pour la vidéo verticale.
 * Le ratio est porté par le conteneur pour éviter le décalage de mise en page (CLS)
 * avant le chargement de l'image.
 */
.is-style-interslide-3-2 img,
.interslide-visuel--3-2 img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	inline-size: 100%;
	block-size: auto;
}

.is-style-interslide-9-16 img,
.interslide-visuel--9-16 img {
	aspect-ratio: 9 / 16;
	object-fit: cover;
	inline-size: 100%;
	block-size: auto;
}

.is-style-interslide-16-9 img,
.interslide-visuel--16-9 img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	inline-size: 100%;
	block-size: auto;
}

/* Fond discret pendant le chargement, pour éviter le trou blanc sur papier. */
.wp-block-post-featured-image img,
.interslide-visuel img {
	background-color: var(--wp--preset--color--papier-2);
}

/* Légende : collée à l'image, pas flottante au milieu de rien. */
.wp-block-image figcaption,
.wp-block-post-featured-image figcaption {
	margin-block-start: 0.5rem;
	text-align: start;
}

/* -------------------------------------------------------------------------
 * 6. Colonne de lecture
 * ---------------------------------------------------------------------- */

/*
 * 42rem ≈ 68 à 72 signes au corps de texte : la mesure de lecture visée par le brief.
 * Les blocs « pleine largeur » d'un article la débordent volontairement.
 */
.interslide-mesure {
	max-inline-size: var(--wp--custom--mesure--lecture);
	margin-inline: auto;
}

/* Interligne un peu plus large dans le corps d'article que dans les listes. */
.wp-block-post-content > p,
.entry-content > p {
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * 7. Corrections de blocs natifs
 * ---------------------------------------------------------------------- */

/* Le titre d'article ne doit jamais être souligné, même en survol. */
.wp-block-post-title a {
	text-decoration: none;
}

.wp-block-post-title a:hover,
.wp-block-post-title a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.12em;
	color: var(--wp--preset--color--vermillon-texte);
}

/* Rubriques et pays : des étiquettes, pas une phrase. */
.wp-block-post-terms {
	font-family: var(--wp--preset--font-family--plex-sans);
	color: var(--wp--preset--color--gris);
}

.wp-block-post-terms a {
	color: var(--wp--preset--color--encre);
	text-decoration: none;
	border-block-end: 1px solid var(--wp--preset--color--filet);
}

.wp-block-post-terms a:hover,
.wp-block-post-terms a:focus-visible {
	color: var(--wp--preset--color--vermillon-texte);
	border-block-end-color: currentColor;
}

/* Champ de recherche : cohérent avec les filets du reste du site. */
.wp-block-search__input {
	border: var(--wp--custom--filet--style);
	border-radius: var(--wp--custom--rayon--max);
	background-color: transparent;
	padding: 0.6rem 0.75rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--encre);
}

.wp-block-search__input::placeholder {
	color: var(--wp--preset--color--gris);
	opacity: 1;
}

/* Navigation : le sous-menu déroulant reprend le papier et un filet, pas une ombre. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--papier);
	border: var(--wp--custom--filet--style);
	border-radius: var(--wp--custom--rayon--max);
	box-shadow: none;
}

/* L'élément de menu actif porte un filet vermillon, pas un fond coloré. */
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current_page_item > a {
	box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--vermillon);
}

/* Pagination : chiffres tabulaires et page courante en encre. */
.wp-block-query-pagination {
	font-family: var(--wp--preset--font-family--plex-sans);
	font-size: var(--wp--preset--font-size--s);
	font-variant-numeric: tabular-nums;
}

.wp-block-query-pagination-numbers .current {
	font-weight: 600;
	color: var(--wp--preset--color--vermillon-texte);
}

/* -------------------------------------------------------------------------
 * 8. États vides
 * ---------------------------------------------------------------------- */

/*
 * Un média qui publie peu affiche souvent des listes vides. Un état vide honnête
 * vaut mieux qu'une section qui disparaît sans explication.
 */
.interslide-vide {
	border-block-start: var(--wp--custom--filet--style);
	padding-block: var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--gris);
	font-size: var(--wp--preset--font-size--s);
	max-inline-size: 34rem;
}

.interslide-vide p {
	margin-block: 0 0.5rem;
}

/* -------------------------------------------------------------------------
 * 9. Correctifs de contraste
 *
 * Le vermillon de la charte (#D8381E) donne 4,32:1 sur papier : suffisant
 * pour du grand texte, insuffisant pour du texte courant au sens de WCAG AA.
 * Le texte utilise donc « vermillon-texte » (#C5331B, 5,03:1), visuellement
 * indiscernable. Même logique pour le gris posé sur un encart.
 * ---------------------------------------------------------------------- */

.has-papier-2-background-color .interslide-meta,
.has-papier-2-background-color .wp-block-post-date,
.has-papier-2-background-color figcaption {
	color: var(--wp--preset--color--gris-texte);
}

/* -------------------------------------------------------------------------
 * 10. Bas d'article : sources, à lire aussi, newsletter
 * ---------------------------------------------------------------------- */

/*
 * Ces trois blocs se suivent en fin d'article. Ils partagent le même filet
 * d'ouverture, pour se lire comme trois temps d'une même sortie de lecture
 * plutôt que comme trois encadrés empilés.
 */
.interslide-sources,
.interslide-lies,
.interslide-newsletter {
	border-block-start: var(--wp--custom--filet--style);
	padding-block-start: var(--wp--preset--spacing--50);
	margin-block-start: var(--wp--preset--spacing--70);
}

.interslide-sources__titre,
.interslide-lies__titre-section,
.interslide-newsletter__titre {
	font-family: var(--wp--preset--font-family--plex-sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris);
	margin-block: 0 var(--wp--preset--spacing--40);
}

/* --- Sources ----------------------------------------------------------- */

.interslide-sources__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: source;
}

.interslide-sources__element {
	counter-increment: source;
	position: relative;
	padding-inline-start: 1.75rem;
	margin-block-end: 0.6rem;
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.45;
}

/*
 * Le numéro est décoratif : il ordonne visuellement sans rien ajouter à ce
 * qu'annonce un lecteur d'écran, qui énumère déjà les éléments de la liste.
 */
.interslide-sources__element::before {
	content: counter( source );
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.15em;
	font-size: var(--wp--preset--font-size--xs);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--vermillon-texte);
	font-weight: 600;
}

.interslide-sources__hote {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gris);
	word-break: break-word;
}

/* --- À lire aussi ------------------------------------------------------ */

.interslide-lies__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

/* Une colonne sur mobile, trois dès qu'il y a la place. */
@media (min-width: 46em) {
	.interslide-lies__liste {
		grid-template-columns: repeat( auto-fit, minmax( 14rem, 1fr ) );
		gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	}
}

.interslide-lies__element {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	border-block-start: var(--wp--custom--filet--style);
	padding-block-start: var(--wp--preset--spacing--30);
}

.interslide-lies__titre {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: var(--wp--preset--font-size--l);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--encre);
	text-decoration: none;
	text-wrap: balance;
}

.interslide-lies__titre:hover,
.interslide-lies__titre:focus-visible {
	color: var(--wp--preset--color--vermillon-texte);
	text-decoration: underline;
	text-underline-offset: 0.1em;
}

.interslide-lies__meta {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gris);
	font-variant-numeric: tabular-nums;
}

/* --- Newsletter -------------------------------------------------------- */

.interslide-newsletter {
	background-color: var(--wp--preset--color--papier-2);
	padding: var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--rayon--max);
}

/* Le fond de l'encart suffit à le détacher : pas besoin du filet en plus. */
.interslide-newsletter {
	border-block-start: 0;
}

.interslide-newsletter__texte {
	margin-block: 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.5;
	max-inline-size: 34rem;
}

.interslide-newsletter__ligne {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: stretch;
}

.interslide-newsletter__champ {
	flex: 1 1 14rem;
	min-inline-size: 0;
	padding: 0.7rem 0.85rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--encre);
	background-color: var(--wp--preset--color--papier);
	border: 1px solid var(--wp--preset--color--filet);
	border-radius: var(--wp--custom--rayon--max);
}

.interslide-newsletter__champ::placeholder {
	color: var(--wp--preset--color--gris-texte);
	opacity: 1;
}

.interslide-newsletter__bouton {
	flex: 0 0 auto;
	cursor: pointer;
	border: 0;
}

.interslide-newsletter__bouton[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.interslide-newsletter__mention {
	margin-block: 0.75rem 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gris-texte);
}

/*
 * Zone de réponse. Elle reste dans le flux même vide (`min-height`) pour que
 * l'apparition du message ne fasse pas sauter la page sous le doigt.
 */
.interslide-newsletter__statut {
	margin-block: 0.75rem 0;
	min-block-size: 1.4em;
	font-size: var(--wp--preset--font-size--s);
	font-weight: 500;
	color: var(--wp--preset--color--encre);
}

.interslide-newsletter__statut:empty {
	margin-block-start: 0;
}

.interslide-newsletter__avertissement {
	margin-block: var(--wp--preset--spacing--40) 0;
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px dashed var(--wp--preset--color--filet);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gris-texte);
}

/*
 * Champ piège anti-robot. Retiré de l'affichage, du parcours clavier et de
 * l'arbre d'accessibilité : une personne au clavier ou au lecteur d'écran ne
 * doit jamais pouvoir le remplir par accident et se voir refuser l'inscription.
 */
.interslide-piege {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * 11. Sections de liste
 *
 * Une section = un filet fort, un titre en petites capitales, un lien « tout
 * voir » aligné dessus. C'est le motif répété sur la une, dans les rubriques
 * et en pied d'article : le lecteur apprend la grammaire une seule fois.
 * ---------------------------------------------------------------------- */

.interslide-section {
	margin-block-start: var(--wp--preset--spacing--70);
}

.interslide-section__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	border-block-start: 2px solid var(--wp--preset--color--encre);
	padding-block-start: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--50);
}

.interslide-section__titre {
	font-family: var(--wp--preset--font-family--plex-sans);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	letter-spacing: 0.07em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--encre);
	margin: 0;
}

.interslide-section__titre a {
	color: inherit;
	text-decoration: none;
}

.interslide-section__titre a:hover,
.interslide-section__titre a:focus-visible {
	color: var(--wp--preset--color--vermillon-texte);
}

.interslide-section__suite {
	font-family: var(--wp--preset--font-family--plex-sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	color: var(--wp--preset--color--gris);
	text-decoration: none;
	white-space: nowrap;
}

.interslide-section__suite:hover,
.interslide-section__suite:focus-visible {
	color: var(--wp--preset--color--vermillon-texte);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * 12. Carte de contenu
 * ---------------------------------------------------------------------- */

.interslide-carte,
.interslide-carte__texte {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.interslide-carte__visuel {
	display: block;
	margin-block-end: 0.35rem;
	background-color: var(--wp--preset--color--papier-2);
	border-radius: var(--wp--custom--rayon--max);
	overflow: hidden;
}

.interslide-carte__visuel img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.interslide-carte__rubrique {
	align-self: flex-start;
}

.interslide-carte__titre {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: var(--wp--preset--font-size--l);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0;
	text-wrap: balance;
}

.interslide-carte__titre a {
	color: var(--wp--preset--color--encre);
	text-decoration: none;
}

.interslide-carte__titre a:hover,
.interslide-carte__titre a:focus-visible {
	color: var(--wp--preset--color--vermillon-texte);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.1em;
}

.interslide-carte__chapo {
	margin: 0;
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.5;
	color: var(--wp--preset--color--gris);
}

.interslide-carte__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.5rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--plex-sans);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gris);
	font-variant-numeric: tabular-nums;
}

.interslide-carte__video {
	font-weight: 600;
	color: var(--wp--preset--color--encre);
}

/* La carte principale de la une porte le seul très grand titre de la page. */
.interslide-carte--principale .interslide-carte__titre {
	font-size: var(--wp--preset--font-size--xl);
}

@media (min-width: 46em) {
	.interslide-carte--principale .interslide-carte__titre {
		font-size: var(--wp--preset--font-size--xxl);
		line-height: 1.05;
	}
}

.interslide-carte--principale .interslide-carte__chapo {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: var(--wp--preset--font-size--l);
	font-style: italic;
	color: var(--wp--preset--color--encre);
	line-height: 1.4;
	max-inline-size: 38rem;
}

.interslide-carte--secondaire .interslide-carte__titre,
.interslide-carte--grille .interslide-carte__titre {
	font-size: var(--wp--preset--font-size--m);
}

.interslide-carte--liste .interslide-carte__titre {
	font-size: var(--wp--preset--font-size--xl);
}

/* -------------------------------------------------------------------------
 * 13. À la une
 * ---------------------------------------------------------------------- */

.interslide-une__principal {
	margin-block-end: var(--wp--preset--spacing--60);
}

.interslide-une__secondaires {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.interslide-une__secondaires .interslide-carte {
	border-block-start: var(--wp--custom--filet--style);
	padding-block-start: var(--wp--preset--spacing--30);
}

/*
 * Au-delà de 52em, la une passe en deux colonnes : le contenu principal à
 * gauche, les trois secondaires en rail vertical à droite, séparés par un
 * filet. C'est la disposition d'une manchette de journal.
 */
@media (min-width: 52em) {
	.interslide-une {
		display: grid;
		grid-template-columns: minmax(0, 1.9fr) minmax(15rem, 1fr);
		column-gap: var(--wp--preset--spacing--60);
	}

	/*
	 * L'en-tête occupe toute la largeur ; le placement automatique met ensuite
	 * le principal et les secondaires côte à côte sur la ligne suivante. Forcer
	 * une ligne explicite ferait entrer les trois en collision.
	 */
	.interslide-une > .interslide-section__entete {
		grid-column: 1 / -1;
	}

	.interslide-une__principal {
		margin-block-end: 0;
	}

	.interslide-une__secondaires {
		border-inline-start: var(--wp--custom--filet--style);
		padding-inline-start: var(--wp--preset--spacing--60);
		align-content: start;
	}

	/* Le premier secondaire n'a pas besoin d'un filet : la colonne le porte. */
	.interslide-une__secondaires .interslide-carte:first-child {
		border-block-start: 0;
		padding-block-start: 0;
	}
}

/* -------------------------------------------------------------------------
 * 14. Listes
 * ---------------------------------------------------------------------- */

.interslide-liste--liste {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.interslide-liste--liste .interslide-carte {
	border-block-start: var(--wp--custom--filet--style);
	padding-block-start: var(--wp--preset--spacing--30);
	max-inline-size: 46rem;
}

.interslide-liste--grille {
	display: grid;
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	grid-template-columns: repeat( auto-fill, minmax( 15rem, 1fr ) );
}

/*
 * Rail vidéo. Défilement horizontal avec accroche : sur mobile c'est le geste
 * naturel, sur desktop cela évite d'étirer des vignettes 9:16 sur toute la
 * largeur. Les cartes restent des liens ordinaires, donc la tabulation les
 * fait défiler d'elle-même — aucun piège clavier.
 */
.interslide-liste--rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax( 10.5rem, 12rem );
	gap: var(--wp--preset--spacing--40);
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: inline mandatory;
	padding-block-end: var(--wp--preset--spacing--30);
	scrollbar-width: thin;
}

.interslide-liste--rail .interslide-carte {
	scroll-snap-align: start;
}

.interslide-liste--rail .interslide-carte__titre {
	font-size: var(--wp--preset--font-size--s);
}

@media (min-width: 46em) {
	.interslide-liste--rail {
		grid-auto-columns: minmax( 12rem, 14rem );
	}
}

/* -------------------------------------------------------------------------
 * 15. Filtres d'archive
 * ---------------------------------------------------------------------- */

.interslide-filtres {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	align-items: baseline;
	border-block: var(--wp--custom--filet--style);
	padding-block: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--60);
	font-family: var(--wp--preset--font-family--plex-sans);
}

.interslide-filtres__groupe {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 0.75rem;
	min-inline-size: 0;
}

.interslide-filtres__libelle {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris);
}

.interslide-filtres__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.9rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.interslide-filtres__choix {
	display: inline-block;
	min-block-size: 24px;
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--encre);
	text-decoration: none;
	border-block-end: 1px solid transparent;
}

.interslide-filtres__choix:hover,
.interslide-filtres__choix:focus-visible {
	color: var(--wp--preset--color--vermillon-texte);
	border-block-end-color: currentColor;
}

/*
 * Le filtre actif est marqué par `aria-current`, pas par une classe : la même
 * information sert au style et au lecteur d'écran, sans risque de divergence.
 */
.interslide-filtres__choix[aria-current] {
	font-weight: 600;
	color: var(--wp--preset--color--vermillon-texte);
	border-block-end-color: currentColor;
}

.interslide-filtres__reset {
	margin-inline-start: auto;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gris);
}

/* -------------------------------------------------------------------------
 * 16. Encart Prisme
 * ---------------------------------------------------------------------- */

/*
 * Prisme est un produit distinct, hébergé ailleurs. Il porte donc sa propre
 * couleur et un filet à sa couleur : le lecteur doit comprendre qu'il quitte
 * le journal, pas qu'il ouvre une rubrique de plus.
 */
.interslide-prisme {
	margin-block-start: var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--60);
	background-color: var(--wp--preset--color--papier-2);
	border-radius: var(--wp--custom--rayon--max);
	border-block-start: 2px solid var(--wp--preset--color--prisme);
}

.interslide-prisme__titre {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
	line-height: 1.15;
	margin-block: 0.35rem 0.5rem;
}

.interslide-prisme__texte {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.5;
	max-inline-size: 34rem;
}

.interslide-prisme__action {
	margin-block: var(--wp--preset--spacing--40) 0;
}

.interslide-prisme__bouton {
	background-color: var(--wp--preset--color--prisme);
	color: var(--wp--preset--color--papier);
	text-decoration: none;
}

.interslide-prisme__bouton:hover,
.interslide-prisme__bouton:focus-visible {
	background-color: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--papier);
}

/* -------------------------------------------------------------------------
 * 17. En-tête : marque, filet, menu, filet
 *
 * Trois étages et deux filets. La marque en haut — logo téléversé ou wordmark
 * — avec les liens de service à sa droite. Puis un filet. Puis le menu, seul
 * sur sa ligne, sur toute la largeur. Puis le filet de fermeture.
 *
 * Donner sa propre ligne au menu règle d'un coup le problème des largeurs
 * intermédiaires : il n'a plus à partager la place avec la marque, donc il n'a
 * plus besoin de rétrécir ni de retomber sur deux lignes.
 * ---------------------------------------------------------------------- */

.interslide-manchette {
	border-block-end: var(--wp--custom--filet--style);
}

.interslide-manchette__marque {
	min-inline-size: 0;
}

/* Le logo téléversé remplace le wordmark, et réciproquement. */
.interslide-a-un-logo .interslide-manchette .wp-block-site-title {
	display: none;
}

.interslide-sans-logo .interslide-manchette .wp-block-site-logo {
	display: none;
}

.wp-block-site-logo img {
	display: block;
	max-block-size: 3.25rem;
	inline-size: auto;
	max-inline-size: 100%;
}

@media (min-width: 46em) {
	.wp-block-site-logo img {
		max-block-size: 4rem;
	}
}

/* -------------------------------------------------------------------------
 * 18. Le menu
 * ---------------------------------------------------------------------- */

.interslide-barre-menu {
	min-inline-size: 0;
}

.wp-block-navigation .wp-block-navigation__container {
	row-gap: 0.35rem;
}

@media (max-width: 62em) {
	.wp-block-navigation:not(.is-menu-open) .wp-block-navigation__container {
		gap: 0.35rem var(--wp--preset--spacing--40);
	}
}

/*
 * Séparateur de groupe. Posez la classe `interslide-nav-groupe` sur une entrée
 * du menu et un filet vertical s'ouvre devant elle : c'est ce qui permet de
 * distinguer les rubriques éditoriales des outils de parcours sans multiplier
 * les barres de navigation.
 */
.wp-block-navigation .interslide-nav-groupe,
.wp-block-navigation .interslide-nav-externe,
.wp-block-navigation .interslide-nav-direct {
	border-inline-start: var(--wp--custom--filet--style);
	padding-inline-start: var(--wp--preset--spacing--40);
	margin-inline-start: 0.15rem;
}

/* Deux entrées d'un même groupe ne portent qu'un seul filet, en tête. */
.wp-block-navigation .interslide-nav-groupe + .interslide-nav-groupe,
.wp-block-navigation .interslide-nav-externe ~ .interslide-nav-externe {
	border-inline-start: 0;
	padding-inline-start: 0;
	margin-inline-start: 0;
}

/*
 * « En direct » : le seul endroit du menu qui bouge en continu, donc le seul
 * qui mérite une pastille. Elle bat lentement — et pas du tout si le lecteur a
 * demandé moins d'animation.
 */
.wp-block-navigation .interslide-nav-direct > a::before {
	content: "";
	display: inline-block;
	inline-size: 0.45rem;
	block-size: 0.45rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--vermillon-texte);
	margin-inline-end: 0.4rem;
	vertical-align: 0.1em;
	animation: interslide-pulsation 2.4s ease-in-out infinite;
}

@keyframes interslide-pulsation {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .interslide-nav-direct > a::before {
		animation: none;
	}
}

.wp-block-navigation .interslide-nav-prisme a {
	color: var(--wp--preset--color--prisme);
}

/* Dans le menu déplié en pile, les filets verticaux n'ont plus de sens. */
.wp-block-navigation.is-menu-open .interslide-nav-groupe,
.wp-block-navigation.is-menu-open .interslide-nav-externe,
.wp-block-navigation.is-menu-open .interslide-nav-direct {
	border-inline-start: 0;
	padding-inline-start: 0;
	margin-inline-start: 0;
}

/* Entrée courante : un filet vermillon sous le mot, jamais un fond coloré. */
.wp-block-navigation a[aria-current="page"] {
	box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--vermillon-texte);
}

/* -------------------------------------------------------------------------
 * 19. Encart Prisme
 * ---------------------------------------------------------------------- */

.interslide-prisme {
	margin-block-start: var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--60);
	background-color: var(--wp--preset--color--papier-2);
	border-radius: var(--wp--custom--rayon--max);
	border-block-start: 2px solid var(--wp--preset--color--prisme);
}

.interslide-prisme__titre {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
	line-height: 1.15;
	margin-block: 0.35rem 0.5rem;
}

.interslide-prisme__texte {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.5;
	max-inline-size: 34rem;
}

.interslide-prisme__action {
	margin-block: var(--wp--preset--spacing--40) 0;
}

.interslide-prisme__bouton {
	background-color: var(--wp--preset--color--prisme);
	color: var(--wp--preset--color--papier);
	text-decoration: none;
}

.interslide-prisme__bouton:hover,
.interslide-prisme__bouton:focus-visible {
	background-color: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--papier);
}

/* -------------------------------------------------------------------------
 * 20. Index des pays
 * ---------------------------------------------------------------------- */

.interslide-pays__region {
	margin-block-start: var(--wp--preset--spacing--60);
}

.interslide-pays__titre {
	font-family: var(--wp--preset--font-family--plex-sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris);
	border-block-start: var(--wp--custom--filet--style);
	padding-block-start: var(--wp--preset--spacing--30);
	margin-block: 0 var(--wp--preset--spacing--40);
}

.interslide-pays__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem var(--wp--preset--spacing--50);
	grid-template-columns: repeat( auto-fill, minmax( 13rem, 1fr ) );
}

.interslide-pays__element {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem;
	line-height: 1.3;
}

.interslide-pays__element a {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: var(--wp--preset--font-size--l);
	font-weight: 600;
	color: var(--wp--preset--color--encre);
	text-decoration: none;
}

.interslide-pays__element a:hover,
.interslide-pays__element a:focus-visible {
	color: var(--wp--preset--color--vermillon-texte);
	text-decoration: underline;
	text-underline-offset: 0.1em;
}

.interslide-pays__compte {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gris);
	font-variant-numeric: tabular-nums;
}

/*
 * Un pays sous le seuil de couverture est affiché, mais en retrait : la page
 * doit dire ce qui n'a pas été couvert sans le présenter comme une rubrique.
 */
.interslide-pays__element--maigre a {
	font-weight: 500;
	color: var(--wp--preset--color--gris);
}

/* -------------------------------------------------------------------------
 * 21. Listes illustrées
 *
 * Les listes étaient entièrement textuelles. C'est cohérent avec une
 * hiérarchie portée par la typographie, mais sur une page de rubrique qui
 * aligne douze titres, l'œil n'a aucun point d'accroche. La carte de liste
 * devient donc horizontale : une vignette étroite à gauche, le texte à droite.
 * L'image aide à repérer, elle ne prend pas le pas sur le titre.
 * ---------------------------------------------------------------------- */

@media (min-width: 34em) {
	.interslide-carte--liste {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--40);
	}

	.interslide-carte--liste > .interslide-carte__visuel,
	.interslide-carte--liste > .wp-block-post-featured-image {
		flex: 0 0 11rem;
		margin-block-end: 0;
	}

	.interslide-carte--liste > .interslide-carte__texte {
		flex: 1 1 18rem;
		min-inline-size: 0;
	}
}

.interslide-carte--liste .wp-block-post-featured-image img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--wp--custom--rayon--max);
}

/* Articles liés : la vignette passe au-dessus, la carte reste en colonne. */
.interslide-lies__visuel {
	display: block;
	line-height: 0;
	margin-block-end: 0.35rem;
	border-radius: var(--wp--custom--rayon--max);
	overflow: hidden;
	background-color: var(--wp--preset--color--papier-2);
}

/* -------------------------------------------------------------------------
 * 22. Fil en direct
 * ---------------------------------------------------------------------- */

.interslide-fil__jour + .interslide-fil__jour {
	margin-block-start: var(--wp--preset--spacing--70);
}

.interslide-fil__date {
	font-family: var(--wp--preset--font-family--plex-sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris);
	border-block-start: 2px solid var(--wp--preset--color--encre);
	padding-block-start: var(--wp--preset--spacing--30);
	margin-block: 0 var(--wp--preset--spacing--40);
}

.interslide-fil__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.interslide-fil__element {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	align-items: flex-start;
	border-block-start: var(--wp--custom--filet--style);
	padding-block-start: var(--wp--preset--spacing--30);
}

.interslide-fil__visuel {
	flex: 0 0 5rem;
	display: block;
	line-height: 0;
	border-radius: var(--wp--custom--rayon--max);
	overflow: hidden;
	background-color: var(--wp--preset--color--papier-2);
}

.interslide-fil__visuel img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

@media (min-width: 34em) {
	.interslide-fil__visuel {
		flex-basis: 8rem;
	}
}

.interslide-fil__texte {
	min-inline-size: 0;
}

.interslide-fil__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.6rem;
	margin: 0 0 0.15rem;
	font-family: var(--wp--preset--font-family--plex-sans);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gris);
	font-variant-numeric: tabular-nums;
}

.interslide-fil__format {
	font-weight: 600;
	color: var(--wp--preset--color--encre);
}

.interslide-fil__titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: var(--wp--preset--font-size--l);
	font-weight: 600;
	line-height: 1.25;
	text-wrap: balance;
}

.interslide-fil__titre a {
	color: var(--wp--preset--color--encre);
	text-decoration: none;
}

.interslide-fil__titre a:hover,
.interslide-fil__titre a:focus-visible {
	color: var(--wp--preset--color--vermillon-texte);
	text-decoration: underline;
	text-underline-offset: 0.1em;
}

/* Annonce des nouvelles publications. Un bouton, jamais un rechargement subi. */
.interslide-fil__annonce {
	display: block;
	inline-size: 100%;
	margin-block-end: var(--wp--preset--spacing--50);
	padding: 0.7rem 1rem;
	font-family: var(--wp--preset--font-family--plex-sans);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	color: var(--wp--preset--color--papier);
	background-color: var(--wp--preset--color--vermillon-texte);
	border: 0;
	border-radius: var(--wp--custom--rayon--max);
	cursor: pointer;
}

.interslide-fil__annonce[hidden] {
	display: none;
}


/* INTERSLIDE-NAV-IMAGES-0.9 */
.interslide-navigation-editoriale .wp-block-navigation-item__content{padding:.52rem .78rem;border-radius:999px;font-family:var(--wp--preset--font-family--plex-sans);font-size:.83rem;font-weight:600;line-height:1;text-decoration:none}.interslide-navigation-editoriale .wp-block-navigation-item__content:hover,.interslide-navigation-editoriale .current-menu-item>.wp-block-navigation-item__content{background:var(--wp--preset--color--encre);color:var(--wp--preset--color--papier)}
.interslide-services__prisme{display:inline-flex;align-items:center;gap:.3rem;padding:.48rem .75rem;border-radius:999px;background:var(--wp--preset--color--prisme);color:#fff!important;font-weight:650;text-decoration:none!important}
.interslide-carte__visuel--source{display:block;margin-block-end:.9rem;overflow:hidden;background:var(--wp--preset--color--papier-2)}.interslide-carte__visuel--source img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 180ms ease}.interslide-carte__visuel--source:hover img{transform:scale(1.018)}
@media(max-width:782px){.interslide-barre-menu{overflow-x:auto;scrollbar-width:none}.interslide-barre-menu::-webkit-scrollbar{display:none}}