/*
Theme Name: Sci-Fi Club
Theme URI: https://scificlub.nc
Description: Thème du Sci-Fi Club de Nouvelle-Calédonie. Thème enfant de Twenty Twenty-Five,
  direction graphique « espace profond » avec les couleurs orange/rouge du logo du club.
  Polices auto-hébergées (Space Grotesk + Inter), pas d'appel à un CDN externe.
Author: DSI — pour le Sci-Fi Club NC
Template: twentytwentyfive
Version: 1.2.2
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: scifi-club
Tags: block-patterns, full-site-editing, one-column, custom-colors, custom-logo

⚠️ INCRÉMENTER « Version » À CHAQUE MODIFICATION DE CE FICHIER.
functions.php s'en sert comme paramètre `?ver=` lors du chargement de la
feuille de style. Sans changement de version, les navigateurs qui ont déjà
mis en cache l'ancien fichier continuent de l'utiliser : le correctif est
bien sur le serveur mais invisible pour les visiteurs de retour.
Constaté le 2026-07-27.
*/

/* ==========================================================================
   Les couleurs, polices, tailles et espacements sont définis dans theme.json.
   Ce fichier ne contient que ce qui n'est pas exprimable en theme.json.
   ========================================================================== */

/* ==========================================================================
   Accessibilité — contrastes et focus clavier (phase 4, 2026-07-27)
   Valeurs choisies par calcul du ratio WCAG, pas à l'œil. Seuil visé : 4,5:1
   pour le texte courant, 3:1 pour le texte large (≥ 24 px, ou 18,7 px gras).
   ========================================================================== */
:root {
	/* L'orange de marque #F3762A ne donne que 2,82:1 avec du texte blanc ou sur
	   fond blanc : il est inutilisable pour du texte. On garde donc deux jeux.

	   — dégradé « brand » (vif, inchangé) : réservé au TEXTE EN DÉGRADÉ posé sur
	     les fonds sombres, où il donne 6,97:1 et 4,15:1. Identité préservée.
	   — dégradé de contraste : pour les SURFACES portant du texte blanc
	     (boutons, pastilles de catégorie, pastilles de date). #C7520B est
	     l'orange le plus vif atteignant 4,5:1 avec du blanc — trouvé en
	     descendant la luminosité à teinte et saturation constantes. */
	--scifi-brand-contraste: linear-gradient(100deg, #C7520B, #E0231A);
	/* Orange assombri pour du texte sur fond CLAIR : 4,96:1 contre 2,82:1. */
	--scifi-orange-texte: #BC4E0B;
}

/* --- Focus clavier ------------------------------------------------------- */
/* Constaté avant correction : `outline-style: none` sur tous les éléments
   focusables — aucun repère visuel pour qui navigue à la tabulation
   (échec du critère WCAG 2.4.7). `:focus-visible` n'apparaît qu'au clavier :
   rien ne change pour l'usage à la souris. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
	border-radius: 4px;
}
/* Sur les fonds sombres, l'orange ressort mal contre le dégradé du héros :
   un anneau blanc doublé d'un liseré sombre reste lisible partout. */
.scifi-dark :where(a, button, [tabindex]):focus-visible,
.scifi-header :where(a, button, [tabindex]):focus-visible {
	outline-color: #fff;
	box-shadow: 0 0 0 5px rgba(7, 11, 20, .75);
}

/* --- Rythme général des gabarits ---------------------------------------- */
.scifi-header,
.scifi-footer { padding-inline: clamp(20px, 4vw, 40px); }

.scifi-main {
	padding-block: clamp(2.5rem, 6vw, 5rem);
	padding-inline: clamp(20px, 4vw, 40px);
}
.scifi-section-head { margin-bottom: 2.2rem; }
.scifi-footer { padding-block: 4rem 1.4rem; }
.scifi-footer-cols { margin-bottom: 2.6rem; }
.scifi-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .10);
	padding-top: 1.2rem;
	gap: 1rem;
}

/* Encart de l'hébergeur (Lagoon) — obligation contractuelle, présent sur toutes
   les pages via parts/footer.html. */
.scifi-partner {
	gap: 1rem 1.4rem;
	padding: 1.4rem 0 2rem;
	border-top: 1px solid rgba(255, 255, 255, .10);
}
.scifi-partner-label {
	margin: 0;
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #7C89A1;
}
/* Le logo Lagoon est bleu foncé (#00539e) : illisible tel quel sur le pied de
   page bleu nuit. On le pose sur une pastille claire, ce qui préserve ses
   couleurs de marque tout en le rendant lisible. */
.scifi-partner-banner { margin: 0; }
.scifi-partner-banner a {
	display: inline-block;
	background: #fff;
	border-radius: 10px;
	padding: 12px 18px;
	line-height: 0;
	transition: transform .18s ease, box-shadow .18s ease;
}
.scifi-partner-banner a:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
}
.scifi-partner-banner img {
	display: block;
	width: 200px;
	max-width: 100%;
	height: auto;
}
@media (prefers-reduced-motion: reduce) {
	.scifi-partner-banner a, .scifi-partner-banner a:hover { transition: none; transform: none; }
}
.scifi-footer-bottom p { margin: 0; }

/* --- En-tête collant ---------------------------------------------------- */
.scifi-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid rgba(255, 255, 255, .10);
	padding-block: .7rem;
}
/* ⚠️ Le fond flouté est porté par ce pseudo-élément, PAS par .scifi-header.
   `backdrop-filter` (comme `filter` et `transform`) transforme l'élément en bloc
   conteneur pour ses descendants en `position: fixed`. Appliqué à l'en-tête, il
   enfermait le menu superposé mobile dans la hauteur de la barre : au lieu de
   couvrir l'écran, le menu s'affichait tronqué dans un cadre de 50 px.
   Constaté en production le 27/07. Sur ::before, le flou reste visible sans
   créer de bloc conteneur pour le menu. */
.scifi-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(7, 11, 20, .82);
	backdrop-filter: blur(14px);
}
.admin-bar .scifi-header { top: 32px; }

.scifi-header,
.scifi-header a:not(.wp-element-button) { color: #fff; text-decoration: none; }
.scifi-header .wp-block-site-title a:hover { color: #fff; }

/* Marque : logo + nom + baseline */
.scifi-brand { align-items: center; column-gap: 14px; }
.scifi-brand .wp-block-site-logo img { display: block; }
.scifi-tagline {
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #9AA7BF;
	margin: 0;
	line-height: 1.2;
}

/* Navigation */
.scifi-header .wp-block-navigation {
	font-size: .93rem;
	font-weight: 500;
}
.scifi-header .wp-block-navigation a { color: #D5DCEA; }
.scifi-header .wp-block-navigation a:hover { color: #fff; }
.scifi-header .wp-block-navigation .current-menu-item > a {
	color: #fff;
	box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--accent-1);
}
/* Sous-menus et menu superposé mobile.
   Les couleurs viennent des attributs `overlayBackgroundColor` / `overlayTextColor`
   du bloc Navigation (parts/header.html) : le CSS du cœur impose sinon
   `color: #000` sur .wp-block-navigation__submenu-container, avec une spécificité
   supérieure à nos sélecteurs — texte noir illisible sur le panneau sombre.
   Ici on ne fait que le décor. */
.scifi-header .wp-block-navigation__submenu-container {
	border-color: rgba(255, 255, 255, .12);
	border-radius: 12px;
	padding-block: .35rem;
}
.scifi-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .5rem .9rem; }
.scifi-header .wp-block-navigation__submenu-container .wp-block-navigation-item:hover { background: rgba(255, 255, 255, .07); }

/* Le bouton « Adhérer » ne doit jamais être comprimé : en tablette portrait, le
   menu déployé le réduisait à une pastille où le mot se cassait en « Ad hé rer ». */
.scifi-header-cta { flex: 0 0 auto; }
.scifi-header-cta .wp-block-button__link { white-space: nowrap; }

/* Le bloc Navigation bascule en menu superposé sous 600 px seulement (valeur du
   cœur). Trop tard ici : dès la tablette portrait, les 7 entrées passent sur deux
   lignes et écrasent le bouton. On avance donc la bascule à 980 px, en reprenant
   la mécanique d'affichage du cœur. */
@media (max-width: 980px) {
	.scifi-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.scifi-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.scifi-header .wp-block-navigation__responsive-container.is-menu-open { display: flex; }
}

/* --- Menu superposé mobile ---------------------------------------------- */
/* Le bloc Navigation est aligné à droite en barre horizontale ; sans correctif,
   le menu plein écran hérite de cet alignement et toutes les entrées se collent
   au bord droit, ce qui se lit mal. */
.scifi-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 4.5rem 1.5rem 2rem;
}
.scifi-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	gap: .2rem;
}
/* L'alignement à droite se propage à toutes les listes imbriquées : il faut le
   neutraliser sur l'ensemble des `ul`/`li` du menu ouvert, pas seulement sur le
   conteneur de premier niveau. */
.scifi-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content :is(ul, li) {
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
	width: 100%;
}
/* Cibles tactiles d'au moins 44 px de haut (recommandation d'accessibilité). */
.scifi-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	display: block;
	padding: .6rem 0;
	min-height: 44px;
	font-size: 1.05rem;
}
/* Hiérarchie : les sous-entrées sont décalées et légèrement atténuées. */
.scifi-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
	padding-left: 1.1rem;
	margin-left: .2rem;
	border-left: 1px solid rgba(255, 255, 255, .14);
	border-radius: 0;
}
.scifi-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: .97rem;
	color: #C3CDDF;
	padding: .45rem 0;
	min-height: 40px;
}

/* --- Sections sombres --------------------------------------------------- */
.scifi-dark {
	background-color: var(--wp--preset--color--accent-3);
	color: #fff;
}
.scifi-dark :is(h1, h2, h3, h4, p, li) { color: inherit; }
.scifi-dark .wp-block-post-date,
.scifi-dark .scifi-muted { color: #93A0B8; }
.scifi-dark a:not(.wp-element-button) { color: var(--wp--preset--color--accent-1); }

/* Surtitre de section */
.scifi-eyebrow {
	font-size: .78rem !important;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
	margin-bottom: .6rem;
}

/* Texte en dégradé (chiffres clés, mots mis en avant).
   Le sélecteur double est nécessaire : `.scifi-dark :is(h1,h2,h3,h4,p,li)`
   ci-dessus vaut (0,1,1) et écraserait un simple `.scifi-gradient-text` (0,1,0),
   ce qui rendrait le texte blanc au lieu de laisser voir le dégradé. */
.scifi-gradient-text,
.scifi-dark .scifi-gradient-text {
	background: var(--wp--preset--gradient--brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	padding-left: 2px; /* le « 1 » de Space Grotesk déborde légèrement à gauche */
}

/* --- Sections jointives ------------------------------------------------- */
/* Le blockGap du thème insère une marge entre blocs frères. Sur les conteneurs
   de premier niveau, cela produit des bandes blanches : entre l'en-tête et le
   contenu, entre deux bandeaux sombres, et avant le pied de page.
   Chaque section porte déjà sa propre respiration verticale (padding-block),
   on neutralise donc ces marges — au niveau racine ET dans l'accueil. */
.wp-site-blocks > *,
.scifi-home > * { margin-block: 0; }

/* --- Héros -------------------------------------------------------------- */
.scifi-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3.5rem, 8vw, 6rem);
	padding-inline: clamp(20px, 4vw, 40px);
	background-image:
		radial-gradient(900px 420px at 78% 18%, rgba(243, 118, 42, .24), transparent 62%),
		radial-gradient(700px 380px at 12% 88%, rgba(224, 35, 26, .20), transparent 60%),
		var(--wp--preset--gradient--deep-space);
}
/* Champ d'étoiles décoratif, purement CSS (aucune image à charger) */
.scifi-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	background-image:
		radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent),
		radial-gradient(1.2px 1.2px at 28% 68%, #fff, transparent),
		radial-gradient(1.6px 1.6px at 44% 14%, #fff, transparent),
		radial-gradient(1.1px 1.1px at 58% 52%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 71% 80%, #fff, transparent),
		radial-gradient(1.2px 1.2px at 84% 34%, #fff, transparent),
		radial-gradient(1.3px 1.3px at 92% 62%, #fff, transparent),
		radial-gradient(1px 1px at 36% 90%, #fff, transparent),
		radial-gradient(1px 1px at 66% 8%, #fff, transparent),
		radial-gradient(1.1px 1.1px at 6% 54%, #fff, transparent);
}
.scifi-hero > * { position: relative; }
.scifi-hero-lead { color: #C3CDDF; max-width: 52ch; }
.scifi-hero-cta { margin-top: 1.8rem; gap: .9rem; }
.scifi-hero-visual img { filter: drop-shadow(0 26px 60px rgba(224, 35, 26, .42)); }

/* Bouton secondaire sur fond sombre */
.scifi-btn-ghost .wp-block-button__link {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .28);
	color: #fff;
}
.scifi-btn-ghost .wp-block-button__link:hover { background: rgba(255, 255, 255, .09); }

/* Chiffres clés */
.scifi-facts {
	margin-top: 2.6rem;
	padding-top: 1.6rem;
	border-top: 1px solid rgba(255, 255, 255, .10);
	gap: 2.2rem;
}
.scifi-fact { gap: 0; }
.scifi-fact-number {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	font-size: 1.9rem;
	line-height: 1.12;
	margin: 0;
}
.scifi-fact-label {
	font-size: .82rem;
	letter-spacing: .04em;
	margin: .2rem 0 0;
}
.scifi-dark .scifi-fact-label { color: #9AA7BF; }

/* --- Bandeau agenda ----------------------------------------------------- */
.scifi-agenda {
	padding-block: clamp(2.8rem, 6vw, 4rem);
	padding-inline: clamp(20px, 4vw, 40px);
	background-color: var(--wp--preset--color--space-mid);
	border-block: 1px solid rgba(255, 255, 255, .10);
}
.scifi-agenda-head { margin-bottom: 1.8rem; gap: 1rem; }
.scifi-agenda-link { margin: 0; font-weight: 600; font-size: .92rem; }
.scifi-agenda-link a { text-decoration: none; border-bottom: 1px solid var(--wp--preset--color--accent-1); }
.scifi-agenda-cols { gap: 18px; }
/* Les colonnes servent de cartes : voir .scifi-event plus bas. */
.scifi-event > .wp-block-group { gap: 16px; align-items: flex-start; }
.scifi-event h3 { font-size: 1rem; line-height: 1.35; margin: 0 0 .35rem; }
.scifi-event p { margin: 0; }
.scifi-event-day { font-size: 1.5rem; margin: 0; }
.scifi-event-month {
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin: .15rem 0 0;
}

/* --- Section actualités de l'accueil ------------------------------------ */
.scifi-news {
	padding-block: clamp(3rem, 7vw, 5rem);
	padding-inline: clamp(20px, 4vw, 40px);
	scroll-margin-top: 90px; /* l'ancre #actualites doit dégager l'en-tête collant */
}
.scifi-section-link { margin: 0; font-weight: 600; font-size: .92rem; }
.scifi-section-link a { text-decoration: none; }

/* --- Piliers ------------------------------------------------------------ */
.scifi-pillars {
	padding-block: clamp(3rem, 7vw, 5rem);
	padding-inline: clamp(20px, 4vw, 40px);
	background-color: var(--wp--preset--color--accent-5);
	border-top: 1px solid var(--light-line, #E3E8F0);
}
.scifi-pillar-cols { gap: 22px; margin-top: 2rem; }
.scifi-pillar {
	background: var(--wp--preset--color--base);
	border: 1px solid #E3E8F0;
	border-radius: 16px;
	padding: 28px;
}
.scifi-pillar h3 { margin-bottom: .5rem; }
.scifi-pillar p { color: var(--wp--preset--color--accent-4); }

/* --- Bandeau mécénat ---------------------------------------------------- */
.scifi-mecenat {
	padding-block: clamp(3rem, 7vw, 4.5rem);
	padding-inline: clamp(20px, 4vw, 40px);
	background-image: linear-gradient(120deg, #0B1120 0%, #151E33 55%, #26130F 100%);
}
/* `:not(.scifi-gradient-text)` est indispensable : sans lui, cette règle (plus
   spécifique) écrase le `color: transparent` qui révèle le dégradé. */
.scifi-mecenat p:not(.scifi-eyebrow):not(.scifi-fact-label):not(.scifi-gradient-text) { color: #C3CDDF; }
/* Le titre du bandeau doit tenir sur une seule ligne en grand écran, comme dans
   la maquette (2 rem). La taille x-large du thème (jusqu'à 2,4 rem) le faisait
   déborder sur deux lignes. Les nombres du texte utilisent des espaces
   insécables, pour qu'aucun retour ne coupe « 5 000 F » ni « 1 000 F ». */
.scifi-mecenat h2 { font-size: clamp(1.35rem, 2.6vw, 2rem); }
.scifi-mecenat .wp-block-buttons { margin-top: 1.6rem; gap: .9rem; }
.scifi-mecenat-figure { text-align: center; }
.scifi-big-number {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	font-size: clamp(2.6rem, 6vw, 3.4rem);
	line-height: 1.1;
	margin: 0;
}
.scifi-mecenat .scifi-fact-label {
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-top: .4rem;
}

/* --- Grille d'actualités ------------------------------------------------ */
.scifi-cards.wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
.scifi-cards > li {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	border: 1px solid #E3E8F0;
	border-radius: 16px;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.scifi-cards > li:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -20px rgba(11, 18, 32, .35);
}
/* Vignette */
.scifi-cards .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #101828, #1E2A44);
}
.scifi-cards .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Repli quand l'article n'a pas d'image à la une (19 articles concernés) */
.scifi-cards > li:not(:has(.wp-block-post-featured-image))::before {
	content: "Sci-Fi Club";
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #101828, #1E2A44);
	color: #5C6B88;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: .8rem;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.scifi-card-body {
	padding: 20px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.scifi-card-body .wp-block-post-title { font-size: 1.12rem; line-height: 1.3; }
.scifi-card-body .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--contrast); }
.scifi-card-body .wp-block-post-title a:hover { color: var(--wp--preset--color--accent-2); }
.scifi-card-body .wp-block-post-excerpt {
	font-size: .92rem;
	color: var(--wp--preset--color--accent-4);
	margin: 0;
}
.scifi-card-body .wp-block-post-excerpt__more-text { margin-top: auto; }
.scifi-card-body .wp-block-post-excerpt__more-link {
	font-size: .88rem;
	font-weight: 700;
	text-decoration: none;
}
/* Métadonnées : catégorie en pastille + date */
.scifi-card-meta { align-items: center; column-gap: 10px; font-size: .76rem; }
.scifi-card-meta .wp-block-post-terms a {
	color: #fff;
	background: var(--wp--preset--gradient--brand);
	padding: 3px 9px;
	border-radius: 999px;
	text-decoration: none;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: .72rem;
}
.scifi-card-meta .wp-block-post-date {
	text-transform: uppercase;
	letter-spacing: .04em;
	font-weight: 600;
}

/* --- Cartes d'agenda (section sombre) ----------------------------------- */
.scifi-event {
	background: var(--wp--preset--color--space-panel);
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 16px;
	padding: 18px;
	transition: border-color .18s ease, transform .18s ease;
}
.scifi-event:hover {
	border-color: rgba(243, 118, 42, .55);
	transform: translateY(-3px);
}
.scifi-event-date {
	flex: 0 0 62px;
	text-align: center;
	border-radius: 12px;
	background: var(--wp--preset--gradient--brand);
	padding: 9px 0;
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	line-height: 1;
	color: #fff;
}

/* --- Pagination --------------------------------------------------------- */
.scifi-pagination {
	margin-top: 3rem;
	padding-top: 1.6rem;
	border-top: 1px solid #E3E8F0;
	font-weight: 600;
	font-size: .92rem;
}

/* --- Article et page ---------------------------------------------------- */
.scifi-article-head { margin-bottom: 1.6rem; }
.scifi-article-terms a {
	color: #fff;
	background: var(--wp--preset--gradient--brand);
	padding: 3px 10px;
	border-radius: 999px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .72rem;
}
.scifi-article-meta {
	column-gap: 12px;
	color: var(--wp--preset--color--accent-4);
	font-size: .88rem;
	margin-top: .8rem;
}
/* Couverture d'article : affichée seulement quand elle ne répète pas une image
   du contenu (voir scifi_club_masquer_image_a_la_une_redondante() dans
   functions.php). Calibrée sobrement — largeur du contenu, hauteur plafonnée —
   pour introduire l'article sans lui voler la vedette. */
.scifi-article-cover { margin-bottom: 2.2rem; }
/* Pas de recadrage : on plafonne la hauteur et on laisse le ratio d'origine.
   Un `object-fit: cover` amputerait les visuels de type logo ou affiche, très
   fréquents ici. */
.scifi-article-cover img {
	border-radius: 16px;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 340px;
	margin-inline: auto;
}
.scifi-article-foot { margin-top: 2.4rem; font-size: .9rem; color: var(--wp--preset--color--accent-4); }
/* Navigation entre articles : deux cartes plutôt que deux lignes de liens.
   ⚠️ Le bloc Groupe applique son propre `display: flex` via une classe générée
   (`.wp-container-core-group-is-layout-…`). Un sélecteur d'une seule classe ne
   suffit donc pas : il faut doubler pour reprendre la main sur la disposition.
   Avant, les titres longs faisaient s'empiler les deux liens et l'ensemble se
   lisait comme du texte brut souligné. */
.scifi-single .scifi-post-nav,
.scifi-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-top: 3.5rem;
}
.scifi-post-nav .wp-block-post-navigation-link {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	padding: 18px 20px;
	border: 1px solid #E3E8F0;
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.scifi-post-nav .wp-block-post-navigation-link:hover {
	transform: translateY(-2px);
	border-color: rgba(199, 82, 11, .5);
	box-shadow: 0 14px 30px -22px rgba(11, 18, 32, .6);
}
.scifi-post-nav .post-navigation-link__label {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4);
}
.scifi-post-nav a {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.scifi-post-nav a:hover { color: var(--scifi-orange-texte); }
/* Le lien « suivant » se lit de droite à gauche. */
.scifi-post-nav .post-navigation-link-next { text-align: right; align-items: flex-end; }
/* En début ou fin de série, un seul lien existe : il garde sa place logique. */
.scifi-post-nav .post-navigation-link-next:only-child { grid-column: 2; }
@media (max-width: 620px) {
	.scifi-post-nav { grid-template-columns: 1fr; }
	.scifi-post-nav .post-navigation-link-next { text-align: left; align-items: flex-start; }
	.scifi-post-nav .post-navigation-link-next:only-child { grid-column: 1; }
}

/* Confort de lecture. Mesure avant correction : 720 px à 17 px = ~80 caractères
   par ligne, au-dessus de la fourchette confortable (60-75). Élargir la colonne
   aurait donc AGGRAVÉ la lecture. On augmente plutôt le corps du texte : à
   18 px, la même largeur retombe à ~75 caractères, et le texte occupe mieux sa
   colonne. */
.wp-block-post-content {
	font-size: 1.125rem;
	line-height: 1.75;
}
.wp-block-post-content :where(img) { border-radius: 12px; }

/* Les visuels restent alignés sur la colonne de texte : essai de débordement
   jusqu'à 1000 px écarté le 27/07, l'alignement strict étant préféré. */
.wp-block-post-title a { text-decoration: none; }

/* --- Page 404 ----------------------------------------------------------- */
.scifi-404 { text-align: center; padding-block: clamp(3rem, 9vw, 7rem); }
.scifi-404 .wp-block-search,
.scifi-404 .wp-block-buttons { justify-content: center; margin-top: 1.6rem; }
.scifi-404 .wp-block-search__inside-wrapper { max-width: 460px; margin-inline: auto; }

/* --- Pied de page ------------------------------------------------------- */
/* Le fond sombre vient de .scifi-dark, présent sur le même élément. */
.scifi-footer { border-top: 1px solid rgba(255, 255, 255, .10); }
.scifi-footer h2, .scifi-footer h3, .scifi-footer h4 {
	font-size: 1rem;
	color: #fff;
	margin-bottom: .8rem;
}
.scifi-footer, .scifi-footer p, .scifi-footer li { color: #A9B5C9; font-size: .93rem; }
/* Spécificité volontairement égale à .scifi-dark a:not(...) — sinon les liens
   du pied de page héritent de l'orange des sections sombres. */
.scifi-footer a:not(.wp-element-button) { color: #A9B5C9; text-decoration: none; }
.scifi-footer a:not(.wp-element-button):hover { color: #fff; text-decoration: underline; }
.scifi-footer ul { list-style: none; padding-left: 0; }

/* --- Adaptation aux petits écrans -------------------------------------- */
@media (max-width: 980px) {
	.scifi-cards.wp-block-post-template { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
	.scifi-cards.wp-block-post-template { grid-template-columns: 1fr; }
	.scifi-tagline { display: none; }
}

/* Respect de la préférence « moins d'animations » */
@media (prefers-reduced-motion: reduce) {
	.scifi-cards > li, .scifi-event { transition: none; }
	.scifi-cards > li:hover, .scifi-event:hover { transform: none; }
}

/* ==========================================================================
   Accessibilité — application des couleurs de contraste (phase 4)
   Placé en fin de fichier pour primer sur les règles décoratives ci-dessus.
   ========================================================================== */

/* Boutons pleins : le dégradé vif ne donnait que 2,82:1 avec le texte blanc.
   `:not(.is-style-outline)` préserve les boutons fantômes, qui sont
   transparents et bordés. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.wp-element-button:not(.is-style-outline) {
	background: var(--scifi-brand-contraste);
}
.scifi-btn-ghost .wp-block-button__link { background: transparent; }

/* Pastilles de catégorie et de date : texte blanc sur le même dégradé. */
.scifi-card-meta .wp-block-post-terms a,
.scifi-article-terms a,
.scifi-event-date {
	background: var(--scifi-brand-contraste);
}

/* Surtitres : orange vif conservé sur fond sombre (6,97:1), assombri sur fond
   clair où il ne donnait que 2,82:1. */
.scifi-eyebrow { color: var(--scifi-orange-texte); }
.scifi-dark .scifi-eyebrow { color: var(--wp--preset--color--accent-1); }

/* Liens de section sur fond clair (« Toutes les activités → »). */
.scifi-news .scifi-section-link a { color: var(--scifi-orange-texte); }

/* Texte du visuel de repli des cartes : 3,31:1 → 5,16:1. */
.scifi-cards > li:not(:has(.wp-block-post-featured-image))::before { color: #7A8BAA; }