/* main.css — styles NON critiques (chargés en async).
   Le chrome (header/footer) et le critical sont inlinés ailleurs.
   Ce fichier accueillera les styles de contenu (archives, single, recherche…)
   au fil des sessions. Zéro couleur en dur : tokens uniquement. */


/* ═══ APPARITION AU DÉFILEMENT ═══════════════════════════════════════════════
   ⚠️ UNE SEULE DÉFINITION POUR TOUT LE SITE. Elle vivait dans `liste.css` ; la
   recopier ailleurs aurait fait diverger les durées et les distances au premier
   réglage — et deux animations proches mais différentes se remarquent.

   ⚠️ L'ÉTAT MASQUÉ EST POSÉ PAR LE SCRIPT, via `js-reveal` sur la racine. Sans
   lui — script en erreur, JavaScript coupé — les blocs resteraient invisibles
   pour toujours. Ici, ils s'affichent normalement et l'animation est absente.

   ⚠️ LE DÉCALAGE EST PLAFONNÉ. Au-delà de six éléments, l'attente deviendrait
   plus longue que le geste de défilement, et le dernier arriverait après que le
   visiteur l'a dépassé.
   ─────────────────────────────────────────────────────────────────────────── */
.js-reveal .reveal {
	opacity: 0;
	/* ⚠️ DISTANCE AUGMENTÉE AVEC LA DURÉE. Allonger seulement la durée donne un
	   mouvement lent sur une courte distance — ce qui se lit comme une hésitation,
	   pas comme de la fluidité. C'est le rapport entre les deux qui fait la
	   douceur. */
	transform: translateY(22px);
	transition:
		opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	/* ⚠️ LE DÉCALAGE ENTRE ÉLÉMENTS SUIT LA DURÉE. À 70 ms sur une animation de
	   750 ms, les cartes arrivent presque ensemble et l'effet d'escalier se perd.
	   110 ms les sépare sans allonger l'attente du dernier. */
	transition-delay: calc(var(--reveal-i, 0) * 85ms);
}
.js-reveal .reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ─── Apparition en cascade à l'intérieur d'un bloc ──────────────────────────
   ⚠️ LA CIBLE EST UNE CLASSE, PAS `> *`.
   Ma première version visait les enfants DIRECTS du bloc animé ; or le décalage
   était posé sur les enfants du PANNEAU, un niveau plus bas. Les deux ne se
   rencontraient jamais : le décalage existait, l'animation aussi, mais pas sur
   les mêmes éléments. Une classe posée par le script fonctionne à n'importe
   quelle profondeur.

   ⚠️ LE BLOC ENTRE D'ABORD, SON CONTENU ENSUITE — 180 ms, le temps qu'il se
   pose. L'inverse ferait clignoter un panneau vide pendant que ses éléments
   arrivent : on verrait la mécanique au lieu du résultat.

   ⚠️ LE DÉCALAGE INTERNE S'AJOUTE À CELUI DU BLOC : un élément de la troisième
   carte part plus tard qu'un élément de la première. C'est ce qui donne la
   diagonale, plutôt que trois cascades identiques déclenchées ensemble.
   ─────────────────────────────────────────────────────────────────────────── */
.js-reveal .reveal-item {
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	/* ⚠️ LE RETARD INTERNE SUIT LE DÉCALAGE DU BLOC, il ne s'en écarte pas. Les
	   deux valeurs doivent rester accordées : à 70 ms ici pour 85 ms sur le bloc,
	   le contenu de la deuxième carte partirait avant celui de la première. Le
	   décalage interne se lirait alors comme un désordre.

	   180 ms d'attente avant le premier élément : le bloc doit avoir commencé son
	   mouvement pour que l'arrivée du contenu se lise comme une suite, pas comme
	   un départ simultané. */
	transition-delay: calc(var(--reveal-i, 0) * 85ms + 180ms + var(--reveal-j, 0) * 60ms);
}
.js-reveal .is-visible .reveal-item {
	opacity: 1;
	transform: none;
}

/* ⚠️ EFFET « POP » RÉSERVÉ AUX PASTILLES. Elles sont rondes et petites : un
   glissement vertical y passe inaperçu, alors qu'un changement d'échelle se lit
   immédiatement. Le même effet sur un titre le ferait paraître élastique.

   La courbe dépasse légèrement 1 avant de revenir — c'est ce dépassement qui
   fait le « pop ». Sans lui, l'élément grossit et s'arrête, ce qui est plat. */
.js-reveal .reveal-pop {
	opacity: 0;
	transform: scale(0.7);
	transition:
		opacity 0.3s ease-out,
		transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
	transition-delay: calc(var(--reveal-i, 0) * 70ms + 240ms);
}
.js-reveal .is-visible .reveal-pop {
	opacity: 1;
	transform: none;
}

/* ⚠️ Variante LATÉRALE, réservée aux éléments qui entrent depuis un bord —
   colonnes du pied de page. Un déplacement vertical y donnerait l'impression
   que le bloc tombe, alors qu'il se met en place. */
.js-reveal .reveal--side { transform: translateX(-14px); }
.js-reveal .reveal--side.is-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.js-reveal .reveal-item,
	.js-reveal .reveal-pop,
	.js-reveal .reveal,
	.js-reveal .reveal--side {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* =============================================================================
   PAGE INTROUVABLE (404)
   -----------------------------------------------------------------------------
   ⚠️ FOND D'ACCENT, PAS DE ROUGE NI DE GRIS. Une page d'erreur n'est pas une
   panne : le visiteur a simplement suivi un lien périmé. La traiter comme un
   incident — bandeau rouge, ton d'excuse — dramatise ce qui n'est qu'un
   détour. Elle porte donc les couleurs du site, comme n'importe quelle page.

   Le thème de section `t-brand1` est posé sur le gabarit : contraste garanti
   par le couple, sans une seule couleur écrite ici.
   ============================================================================= */

.erreur404 {
	min-height: 60vh;
	display: grid;
	place-items: center;
	padding-block: clamp(3rem, 10vw, 7rem);
}

.erreur404__inner {
	text-align: center;
	max-width: 46rem;
}

/* ⚠️ LE NOMBRE EST UN DÉCOR, ET SA TAILLE LE DIT. Discret, il ressemblerait à
   une information ; démesuré, il se lit comme un motif — ce qu'il est. */
.erreur404__code {
	margin: 0;
	font-family: var(--ty-h1-font-family, var(--ff-headline, inherit)), ui-sans-serif, system-ui, sans-serif;
	font-size: clamp(5rem, 22vw, 13rem);
	line-height: 0.85;
	letter-spacing: -0.04em;
	opacity: 0.18;
	user-select: none;
}

.erreur404__titre {
	margin: clamp(-1rem, -2vw, -0.5rem) 0 var(--sp-4);
	font-size: clamp(1.75rem, 6vw, var(--ty-h1-font-size, 3rem));
	line-height: var(--lh-tight, 1.1);
}

.erreur404__texte {
	margin: 0 auto var(--sp-8);
	max-width: 34rem;
	font-size: var(--fs-lg, 1.1rem);
}
.erreur404__texte p { margin: 0 0 0.6em; }
.erreur404__texte a { text-decoration: underline; }

.erreur404__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.7em 1.4em;
	border-radius: var(--r-pill, 999px);
	background-color: var(--ink);
	color: var(--paper);
	text-decoration: none;
	font-size: var(--fs-base);
}

/* ─── Recherche ─────────────────────────────────────────────────────────────
   ⚠️ `min-width: 0` SUR LE CHAMP. Un `<input>` porte une largeur intrinsèque
   d'environ vingt caractères : dans un conteneur flex étroit, il refuse de
   descendre en dessous et fait déborder le formulaire. */
.erreur404__recherche {
	margin-top: var(--sp-8);
	display: flex;
	gap: var(--sp-2);
	justify-content: center;
	flex-wrap: wrap;
}

.erreur404__recherche input {
	flex: 1 1 18rem;
	min-width: 0;
	max-width: 24rem;
	padding: 0.65em 1em;
	border: 1px solid currentColor;
	border-radius: var(--r-pill, 999px);
	background: transparent;
	color: inherit;
	font: inherit;
}
.erreur404__recherche input::placeholder { color: inherit; opacity: 0.6; }

.erreur404__recherche button {
	flex: 0 0 auto;
	padding: 0.65em 1.4em;
	border: 0;
	border-radius: var(--r-pill, 999px);
	background-color: var(--ink);
	color: var(--paper);
	font: inherit;
	cursor: pointer;
}

@media (max-width: 560px) {
	/* En colonne, le bouton pleine largeur est plus facile à viser au pouce. */
	.erreur404__recherche input,
	.erreur404__recherche button { flex: 1 1 100%; max-width: none; }
}

/* =============================================================================
   PAGE INTERMÉDIAIRE — sous-pages en cartes
   -----------------------------------------------------------------------------
   Reprend la carte des films : visuel en tête, titre, bouton en pied.

   ⚠️ LA CARTE EST EN COLONNE AVEC `margin-top: auto` SUR LE PIED. Sans cela, un
   titre sur deux lignes décale son bouton et la rangée perd son alignement —
   c'est ce qui distingue une grille d'une juxtaposition.
   ============================================================================= */

/* ⚠️ DÉGAGEMENT PLUS GRAND EN BAS QU'EN HAUT. Le pied de page porte une pastille
   « Télécharger la brochure » qui déborde de 84 px sur le bloc précédent : sans
   cette marge, la dernière rangée de cartes passe dessous. */
/* Dégagement publié par le pied de page — voir `--footer-clearance`
   dans `header-footer.css`. */
.sous-pages {
	padding-top: clamp(2.5rem, 6vw, 4rem);
	padding-bottom: var(--footer-clearance, 200px);
}

.sous-pages__grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ⚠️ `min-width: 0` SUR L'ÉLÉMENT DE GRILLE. Sans lui, un titre long refuse de
   se couper : la colonne s'élargit au-delà de sa part et la grille déborde. Le
   défaut ne se voit qu'avec un intitulé de page à rallonge, donc rarement au
   moment où on écrit la règle. */
.sous-pages__item { min-width: 0; }

.sous-pages__carte {
	/* Référence du lien étendu posé sur le titre (voir plus bas). */
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: var(--sp-3);
	padding: var(--sp-3);
	border-radius: var(--r-lg);
	background-color: var(--accent);
	color: var(--on-accent);
}

/* ─── Visuel ─────────────────────────────────────────────────────────────────
   ⚠️ LE RATIO EST PORTÉ PAR LA BOÎTE, PAS PAR L'IMAGE. `aspect-ratio` sur un
   `<img>` est écrasé par le reset du thème (`height: auto`) — piège déjà
   rencontré sur les cartes de liste et les suggestions de fiche. */
.sous-pages__media {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--r-md);
}

.sous-pages__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sous-pages__media--vide {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background-color: var(--brand-2-fonce);
	color: var(--paper);
	opacity: 0.55;
}
.sous-pages__media--vide svg { width: 45%; height: auto; }

/* ─── Corps ──────────────────────────────────────────────────────────────── */
.sous-pages__corps {
	display: flex;
	flex-direction: column;
	flex: 1;
	/* L'écart minimal ; c'est `margin-top: auto` sur le bouton qui creuse le
	   reste et aligne tous les boutons d'une rangée. */
	gap: var(--sp-6);
	padding: var(--sp-2) var(--sp-2) var(--sp-3);
}

.sous-pages__titre {
	margin: 0;
	font-family: var(--ty-h3-font-family, var(--ff-headline, inherit)), ui-sans-serif, system-ui, sans-serif;
	/* Le clamp enveloppe la variable du kit, il n'en est pas le repli. */
	font-size: clamp(1.15rem, 3vw, var(--ty-h3-font-size, 1.4rem));
	font-weight: var(--ty-h3-font-weight, var(--fw-semibold, 600));
	line-height: var(--lh-tight, 1.15);
}

.sous-pages__titre a {
	color: inherit;
	text-decoration: none;
}

/* ⚠️ LA ZONE CLIQUABLE COUVRE TOUTE LA CARTE, depuis le titre. Un pseudo-élément
   étendu évite le second lien sur le visuel — une seule destination, un seul
   point d'arrêt au clavier, et la carte entière reste cliquable. */
.sous-pages__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* ─── Survol ─────────────────────────────────────────────────────────────────
   ⚠️ LA CARTE ENTIÈRE RÉAGIT, PAS LE TITRE SEUL. Un soulignement sur un titre
   déjà gras et large fait un trait épais qui alourdit la carte ; c'est le
   mouvement de l'ensemble qui indique que l'élément est cliquable.

   ⚠️ SOUS `@media (hover: hover)` : sur tactile, `:hover` s'active au tap et y
   reste — la dernière carte touchée resterait soulevée. */
@media (hover: hover) {
	.sous-pages__carte {
		transition:
			transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
			box-shadow 0.35s ease;
	}
	.sous-pages__carte:hover {
		transform: translateY(-6px);
		box-shadow: var(--shadow-lg);
	}

	/* Le visuel se rapproche légèrement : deux vitesses valent mieux qu'un bloc
	   qui se déplace d'un seul tenant. */
	.sous-pages__img {
		transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.sous-pages__carte:hover .sous-pages__img { transform: scale(1.04); }

}

/* ⚠️ LE FOCUS CLAVIER REÇOIT LE MÊME TRAITEMENT, hors requête média : il doit
   fonctionner sur tous les appareils, et rien ne se déclenche au doigt. */
.sous-pages__carte:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lg);
}

/* ─── Bouton ─────────────────────────────────────────────────────────────────
   ⚠️ AUCUN STYLE PROPRE : c'est le CTA standard du site, entièrement décrit par
   `.liste .maline-cta__link` dans `liste.css`. On ne pose ici que sa position
   dans la carte. Le redéfinir aurait donné un bouton qui ressemble aux autres
   sans en être un — et qui cesserait de leur ressembler au premier ajustement. */
.sous-pages__cta {
	margin-top: auto;
	align-self: flex-start;
}

/* ⚠️ LES ANIMATIONS DES CARTES SUIVENT LE RÉGLAGE SYSTÈME, comme le reste du
   thème. Une animation ajoutée après coup échappe au bloc `prefers-reduced-motion`
   déjà écrit : il faut y penser à chaque fois, sinon la préférence n'est
   respectée qu'à moitié — ce qui revient à ne pas la respecter.

   L'effet n'est pas supprimé, il devient instantané : la carte se soulève quand
   même, sans transition. On garde l'indication, on retire le mouvement. */
@media (prefers-reduced-motion: reduce) {
	.sous-pages__carte,
	.sous-pages__img {
		transition: none;
	}
	.sous-pages__carte:hover .sous-pages__img { transform: none; }
}