/* =========================================================================
   Bloc « Hero » — front + éditeur
   -------------------------------------------------------------------------
   Ouverture plein écran : vidéo ou image de fond, voile dégradé montant,
   puis logo, baseline et dates qui entrent ensemble, chacun dans sa
   direction. L'en-tête de la page d'accueil est fixe et transparent :
   le contenu réserve donc sa hauteur en marge haute.
   ========================================================================= */

.egal-hero {
	--egal-hero-fond:     var( --wp--preset--color--dark-blue, #000548 );
	--egal-hero-texte:    var( --wp--preset--color--base, #FFFFFF );
	--egal-hero-accent:   var( --wp--preset--color--yellow, #F9C444 );

	--egal-hero-duree:    900ms;
	--egal-hero-courbe:   cubic-bezier( 0.16, 0.84, 0.44, 1 );
	--egal-hero-distance: 3rem;

	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	background-color: var( --egal-hero-fond );
	color: var( --egal-hero-texte );
}

.egal-hero--plein {
	min-height: 100vh;
	min-height: 100dvh;
}

.egal-hero--grande {
	min-height: 80vh;
	min-height: 80dvh;
}



/* --- Fond ---------------------------------------------------------------- */

.egal-hero__media,
.egal-hero__voile {
	position: absolute;
	inset: 0;
}

.egal-hero__poster,
.egal-hero__video,
.egal-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* La vidéo se superpose à l'image de fond et reste invisible jusqu'à sa
   première image : pas de cadre noir pendant le chargement, ni de saut de
   cadrage puisque l'image de fond est cette première image. */
.egal-hero__video {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 400ms ease;
}

.egal-hero__video.is-lancee {
	opacity: 1;
}

/* Voile montant : il assoit le logo et les dates sans noircir le ciel du
   visuel. Le haut reste dégagé, l'en-tête a son propre voile. */
.egal-hero__voile {
	background: linear-gradient(
		to top,
		rgba( 0, 5, 72, 1 ) 0%,
		rgba( 0, 5, 72, 0.55 ) 38%,
		rgba( 0, 5, 72, 0.15 ) 70%,
		rgba( 0, 5, 72, 0 ) 100%
	);
}

/* --- Contenu ------------------------------------------------------------- */

/* Positionné : il se peint après les deux couches de fond, sans z-index. */
.egal-hero__contenu {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp( 1rem, 2.5vw, 2rem );
	width: min( 100%, 60rem );
	/* La marge haute dégage l'en-tête fixe, la basse laisse la place à la flèche. */
	padding: clamp( 7rem, 16vh, 11rem ) var( --wp--preset--spacing--30, 1.5rem ) clamp( 5rem, 12vh, 8rem );
	text-align: center;
}

/* Les hauteurs sont bornées en unités d'écran : quelles que soient les
   dimensions des fichiers fournis, l'ensemble tient dans la fenêtre et la
   flèche reste visible sans faire défiler. */
.egal-hero__logo {
	width: min( 78vw, 34rem );
	height: auto;
	max-height: 34vh;
	object-fit: contain;
}

.egal-hero__baseline {
	width: min( 60vw, 22rem );
	height: auto;
	max-height: 12vh;
	object-fit: contain;
}

.egal-hero__dates--image {
	width: min( 55vw, 18rem );
	height: auto;
	max-height: 10vh;
	object-fit: contain;
}

p.egal-hero__dates {
	margin: 0;
	padding: 0.45rem 1.5rem;
	border-radius: 0;
	background: var( --egal-hero-accent );
	color: var( --egal-hero-fond );
	font-family: var( --wp--preset--font-family--parisinenarrow, inherit );
	font-size: var( --wp--preset--font-size--large, 1.5rem );
	font-weight: 900;
	line-height: 1.25;
}

/* Écrans peu hauts (portables 13 pouces, fenêtre réduite) : sans ce
   resserrement, logo, baseline, dates, boutons et mention dépassent la fenêtre
   et la mention vient buter sur l'indicateur de défilement. */
@media ( max-height: 820px ) {

	.egal-hero__contenu {
		gap: clamp( 0.75rem, 1.5vh, 1.25rem );
		padding-block: clamp( 6.5rem, 14vh, 9rem ) clamp( 4rem, 10vh, 6rem );
	}

	.egal-hero__logo {
		max-height: 14vh;
	}

	.egal-hero__baseline {
		max-height: 9vh;
	}

	.egal-hero__dates--image {
		max-height: 8vh;
	}
}

/* Téléphone à l'horizontale : logo réduit à 75 % (largeur et hauteur
   maximales de la règle précédente × 0,75). */
@media ( orientation: landscape ) and ( max-height: 500px ) {

	.egal-hero__logo {
		width: min( 58.5vw, 25.5rem );
		max-height: 14vh;
	}
}

/* --- Entrées : tout part en même temps, chacun dans sa direction ---------- */

@keyframes egal-hero-descend {
	from { opacity: 0; transform: translateY( calc( var( --egal-hero-distance ) * -1 ) ); }
	to   { opacity: 1; transform: none; }
}

@keyframes egal-hero-monte {
	from { opacity: 0; transform: translateY( var( --egal-hero-distance ) ); }
	to   { opacity: 1; transform: none; }
}

@keyframes egal-hero-apparait {
	from { opacity: 0; transform: translateX( var( --egal-hero-distance ) );}
	to   { opacity: 1; transform: none;  }
}

/* Repli pour les animations réduites : aucun déplacement, seulement le fondu. */
@keyframes egal-hero-fondu {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.egal-hero__logo {
	animation: egal-hero-descend var( --egal-hero-duree ) var( --egal-hero-courbe ) both;
}

.egal-hero__baseline {
	--egal-hero-distance: 2rem;
	animation: egal-hero-apparait var( --egal-hero-duree ) var( --egal-hero-courbe ) both;
}

.egal-hero__dates,
.egal-hero__actions,
.egal-hero__mention {
	--egal-hero-distance: 3rem;
	animation: egal-hero-monte var( --egal-hero-duree ) var( --egal-hero-courbe ) both;
}

/* --- Appels à l'action ---------------------------------------------------- */

.egal-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1rem;
}

.egal-hero__cta .wp-block-button__link {
	display: inline-block;
	padding: 0.7rem 1.75rem;
	font-family: var( --wp--preset--font-family--inter, system-ui, sans-serif );
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
}

/* Le style « Plein jaune » du thème masque le débord : le contour de focus est
   porté par l'enveloppe, sinon il serait rogné. */
.egal-hero__cta:has( :focus-visible ) {
	outline: 3px solid var( --egal-hero-accent );
	outline-offset: 3px;
}

.egal-hero__cta :focus-visible {
	outline: none;
}

/* Secondaire : contour blanc sur le visuel, plein au survol. */
.egal-hero__cta--secondaire {
	border: 2px solid var( --egal-hero-texte );
	border-radius: 999px;
	background: none;
	transition: background-color 180ms ease;
}

.egal-hero__cta--secondaire .wp-block-button__link {
	background: none;
	color: var( --egal-hero-texte );
	transition: color 180ms ease;
}

.egal-hero__cta--secondaire:hover {
	background: var( --egal-hero-texte );
}

.egal-hero__cta--secondaire:hover .wp-block-button__link {
	color: var( --egal-hero-fond );
}

.egal-hero__mention {
	max-width: 36rem;
	margin: 0;
	font-size: var( --wp--preset--font-size--small, 1rem );
	line-height: 1.5;
}

/* Texte réservé aux lecteurs d'écran (mention de nouvelle fenêtre). */
.egal-hero__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* --- Commandes ----------------------------------------------------------- */

.egal-hero__lecture,
.egal-hero__defilement {
	position: absolute;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: var( --egal-hero-texte );
	cursor: pointer;
	transition: background-color 180ms ease;
}

.egal-hero__lecture {
	right: clamp( 1rem, 3vw, 2rem );
	bottom: clamp( 1rem, 3vh, 2.5rem );
	width: 44px;
	height: 44px;
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	background: rgba( 0, 5, 72, 0.55 );
}

.egal-hero__lecture:hover {
	background: rgba( 0, 5, 72, 0.8 );
}

/* Deux barres : la vidéo tourne, le bouton la met en pause. */
.egal-hero__lecture-icone {
	position: relative;
	width: 12px;
	height: 14px;
}

.egal-hero__lecture-icone::before,
.egal-hero__lecture-icone::after {
	content: "";
	position: absolute;
	top: 0;
	width: 4px;
	height: 14px;
	background: currentColor;
}

.egal-hero__lecture-icone::before { left: 0; }
.egal-hero__lecture-icone::after  { right: 0; }

/* Triangle : la vidéo est arrêtée, le bouton la relance. */
.egal-hero__lecture[data-lecture="play"] .egal-hero__lecture-icone::before {
	left: 1px;
	width: 0;
	height: 0;
	background: none;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 12px solid currentColor;
}

.egal-hero__lecture[data-lecture="play"] .egal-hero__lecture-icone::after {
	display: none;
}

/* Souris et bille, aux proportions de l'icône déjà utilisée par le thème
   (.mouse / .mouse-wheel dans style.css), ici en bouton cliquable. */
.egal-hero__defilement {
	left: 50%;
	bottom: clamp( 1rem, 3vh, 2.5rem );
	width: 34px;
	height: 50px;
	background: none;
	transform: translateX( -50% );
}

.egal-hero__souris {
    width: 20px;
    height: 35px;
    border: 1px solid currentColor;
    border-radius: 999px;
    position: relative;
    transition: border-color 180ms ease;
}

.egal-hero__bille {
	position: absolute;
	top: 8px;
	left: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	transform: translateX( -50% );
	animation: egal-hero-bille 2s cubic-bezier( 0.3, 0, 0.2, 1 ) infinite;
}

.egal-hero__defilement:hover .egal-hero__souris,
.egal-hero__defilement:hover .egal-hero__bille {
	color: var( --egal-hero-accent );
}

@keyframes egal-hero-bille {
	0%        { transform: translate( -50%, 0 ); opacity: 0; }
	15%       { opacity: 1; }
	70%       { transform: translate( -50%, 6px ); opacity: 1; }
	100%      { transform: translate( -50%, 8px ); opacity: 0; }
}

/* Contour de focus — RGAA 10.7 */
.egal-hero :where( button ):focus-visible {
	outline: 3px solid var( --egal-hero-accent );
	outline-offset: 3px;
}

/* --- Message d'administration -------------------------------------------- */

.egal-hero__vide {
	margin: 0;
	padding: 2rem;
	font-style: italic;
	text-align: center;
	color: var( --wp--preset--color--dark-blue, #000548 );
}

/* --- Animations réduites --------------------------------------------------
   Plus de mouvement : les éléments se contentent d'apparaître, la flèche
   reste immobile et view.js ne lance pas la vidéo. */

@media ( prefers-reduced-motion: reduce ) {

	.egal-hero__logo,
	.egal-hero__baseline,
	.egal-hero__dates,
	.egal-hero__actions,
	.egal-hero__mention {
		animation: egal-hero-fondu 300ms ease both;
	}

	.egal-hero__cta--secondaire,
	.egal-hero__cta--secondaire .wp-block-button__link {
		transition: none;
	}

	/* La bille reste posée en haut de la souris, sans mouvement. */
	.egal-hero__bille {
		animation: none;
		opacity: 1;
	}

	.egal-hero__lecture,
	.egal-hero__defilement {
		transition: none;
	}
}