/* Héro diaporama de l'accueil (cnd/hero-slides, v0.35.0). S'ajoute à la feuille de cnd/hero (mise en page
   « immersive », chargée par block.json) ; toutes les règles portent la classe propre .cnd-hero-slides : le
   héro des autres pages ne change pas.

   Plein écran : hauteur de la fenêtre moins l'en-tête (89 px sous 900 px, 121 px au-delà, mesurés sur le
   staging le 06/11) et les 16 px de marge haute et basse. La hauteur est fixée en CSS, avant toute photo :
   aucun décalage au chargement (CLS). svh : la barre d'adresse mobile ne fait pas sauter la hauteur. */
.cnd.cnd-hero.cnd-hero--immersive.cnd-hero-slides {
	--cnd-hs-offset: 153px;
	min-height: max(520px, calc(100vh - var(--cnd-hs-offset)));
	min-height: max(520px, calc(100svh - var(--cnd-hs-offset)));
	padding-bottom: 56px;
}

/* Fondu enchaîné : toutes les photos sont superposées, seule la photo active est opaque. */
.cnd.cnd-hero.cnd-hero-slides .cnd-hero-slides__image {
	opacity: 0;
	transition: opacity 1s ease-in-out;
}
.cnd.cnd-hero.cnd-hero-slides .cnd-hero-slides__image.is-active {
	opacity: 1;
}
/* Photos suivantes : une image paresseuse dans la fenêtre se charge tout de suite, même transparente. Masquée,
   elle attend que le script la demande (loading="eager", après le chargement de la page) : rien ne concurrence
   la 1re photo (LCP). Elle est alors affichée transparente plusieurs secondes avant son fondu. */
.cnd.cnd-hero.cnd-hero-slides .cnd-hero-slides__image[loading="lazy"]:not(.is-active) {
	display: none;
}

/* Voile : le texte est calé en bas. Contraste AA garanti pour du texte blanc, même sur un pixel blanc de la
   photo : voile #1D2327 à 66 % au moins dès 35 % de la hauteur, soit 5,0:1 au pire (4,5:1 exigé) ; 74 % en
   bas, sous les boutons. En haut, 45 % seulement : rien n'y est écrit, sauf le bouton pause, qui a son fond. */
.cnd.cnd-hero.cnd-hero--immersive.cnd-hero-slides .cnd-hero-slides__overlay {
	background: linear-gradient(180deg, rgba(29, 35, 39, .45) 0%, rgba(29, 35, 39, .66) 35%, rgba(29, 35, 39, .74) 100%);
}
/* Surtitre et texte en blanc plein : en 12 px, la couleur Réseau du surtitre tombe à 2:1 sur une zone claire de
   la photo malgré le voile, et le blanc à 90 % du texte à 4,5:1 tout juste (5,1:1 en blanc plein). */
.cnd.cnd-hero.cnd-hero--immersive.cnd-hero-slides :is(.cnd-hero__eyebrow, .cnd-hero__text) {
	color: var(--on-image);
}

/* Bouton pause : en haut à droite de la photo, toujours visible, cible de 44 px. */
.cnd.cnd-hero.cnd-hero-slides button.cnd-hero-slides__toggle {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: var(--r-pill);
	background: rgba(29, 35, 39, .72);
	color: var(--on-image);
	box-shadow: none;
	cursor: pointer;
}
.cnd.cnd-hero.cnd-hero-slides button.cnd-hero-slides__toggle[hidden] {
	display: none;
}
.cnd.cnd-hero.cnd-hero-slides button.cnd-hero-slides__toggle:hover,
.cnd.cnd-hero.cnd-hero-slides button.cnd-hero-slides__toggle:focus {
	background: rgba(29, 35, 39, .9);
	color: var(--on-image);
	border-color: var(--on-image);
}
.cnd.cnd-hero.cnd-hero-slides button.cnd-hero-slides__toggle:focus-visible {
	outline: 2px solid var(--on-image);
	outline-offset: 2px;
}
.cnd.cnd-hero.cnd-hero-slides .cnd-hero-slides__icon-play,
.cnd.cnd-hero.cnd-hero-slides button.cnd-hero-slides__toggle[aria-pressed="true"] .cnd-hero-slides__icon-pause {
	display: none;
}
.cnd.cnd-hero.cnd-hero-slides button.cnd-hero-slides__toggle[aria-pressed="true"] .cnd-hero-slides__icon-play {
	display: block;
}

@media (max-width: 899px) {
	.cnd.cnd-hero.cnd-hero--immersive.cnd-hero-slides {
		--cnd-hs-offset: 121px;
		min-height: max(500px, calc(100vh - var(--cnd-hs-offset)));
		min-height: max(500px, calc(100svh - var(--cnd-hs-offset)));
		padding-top: 72px;
		padding-bottom: 32px;
	}
	.cnd.cnd-hero.cnd-hero-slides button.cnd-hero-slides__toggle {
		top: 12px;
		right: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cnd.cnd-hero.cnd-hero-slides .cnd-hero-slides__image {
		transition: none;
	}
}