/* ==========================================================================
   Capacités récentes de la plateforme web

   Tout ce qui suit est en amélioration progressive : un navigateur qui ne
   connaît pas ces règles sert exactement la même page, en les ignorant.
   Rien ici n'est nécessaire au fonctionnement du site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Transitions entre pages

   Le passage d'une page à l'autre devient un fondu au lieu d'un clignotement
   blanc. Sur un site WordPress classique — donc rechargé à chaque clic —
   c'est le seul moyen d'obtenir la fluidité d'une application, sans y basculer.
   -------------------------------------------------------------------------- */

@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: sema-sortie 180ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
	animation: sema-entree-page 320ms var(--courbe-entree) both;
}

@keyframes sema-sortie {
	to { opacity: 0; }
}

@keyframes sema-entree-page {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/*
 * L'en-tête et le pied de page sont identiques d'une page à l'autre :
 * les nommer les fait glisser d'une vue à l'autre au lieu d'être refondus.
 * L'effet est celui d'une barre de navigation qui ne bouge jamais.
 */
.site-header { view-transition-name: sema-entete; }
.site-footer { view-transition-name: sema-pied; }
.topbar      { view-transition-name: sema-topbar; }

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   2. Animations pilotées par le défilement

   `animation-timeline: view()` lie l'animation à la position de l'élément
   dans la fenêtre, sans JavaScript ni observateur. Le navigateur la calcule
   sur son fil de composition : elle reste fluide même quand le fil principal
   est occupé, ce qu'un IntersectionObserver ne garantit pas.

   L'IntersectionObserver du thème reste en place pour les navigateurs qui
   n'ont pas cette API. `@supports` évite que les deux se superposent.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.js .js-reveal {
			/* Neutralise la révélation par observateur : le défilement pilote. */
			opacity: 1;
			transform: none;
			transition: none;

			animation: sema-apparition-defilement linear both;
			animation-timeline: view();
			animation-range: entry 8% cover 26%;
		}

		@keyframes sema-apparition-defilement {
			from { opacity: 0; transform: translateY(26px); }
			to   { opacity: 1; transform: none; }
		}

		/* La galerie garde son décalage d'entrée, tuile après tuile. */
		.galerie__tuile {
			animation-range: entry 4% cover 22%;
		}
	}
}

/* --------------------------------------------------------------------------
   3. Rendu différé du contenu hors écran

   `content-visibility: auto` dit au navigateur de ne pas calculer la mise en
   page des sections qu'on ne voit pas. Sur cette page d'accueil — dix sections,
   vingt et une images — le gain au premier rendu est net.

   `contain-intrinsic-size` fournit une hauteur estimée : sans elle, la barre
   de défilement sauterait à mesure que les sections se calculent.
   -------------------------------------------------------------------------- */

.galerie,
.temoignages,
.contact,
.navigation-article {
	content-visibility: auto;
	contain-intrinsic-size: auto 720px;
}

/* --------------------------------------------------------------------------
   4. Requêtes de conteneur

   Les cartes d'action s'adaptent à la largeur de LEUR grille, pas à celle de
   la fenêtre. La même carte peut ainsi servir en pleine largeur sur une page
   et en colonne étroite sur une autre, sans point de rupture dédié.
   -------------------------------------------------------------------------- */

.actions__grille,
.soutenir__grille {
	container-type: inline-size;
}

@container (max-width: 560px) {
	.carte-action__corps { padding: var(--e-5); }
	.carte-action__numero { display: none; }
}