/*
 * hero/bande-photo — transposition de `.heros` (maquette Astro ADJ) : titre et
 * phrase sur le fond de la page, puis une bande photo pleine largeur sans voile.
 * Le haut reserve la barre flottante (`--ivy-bar-offset`, 82 px par defaut).
 * Engagement 5 : aucun hexadecimal. Les boutons ne lisent pas `.elementor-button`.
 */
.ivy-hero--bande-photo {
	--ivy-page-gutter: clamp( 20px, 5vw, 64px );
	padding-top: calc( var( --ivy-bar-offset, 82px ) + clamp( 56px, 7vw, 96px ) );
	/* La convention du rayon (`ivy_hero_min_height`, 100vh par defaut) : une bande qui se dimensionne sur son contenu pose 0. */
	min-height: var( --ivy-hero-min-height, 100vh );
}

.ivy-hero--bande-photo .ivy-hero__inner {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 48px;
	align-items: end;
	width: 100%;
	max-width: calc( 1280px + 2 * var( --ivy-page-gutter ) );
	margin-inline: auto;
	padding: 0 var( --ivy-page-gutter ) clamp( 40px, 5vw, 64px );
}

.ivy-hero--bande-photo .ivy-hero__eyebrow {
	display: block;
	margin-bottom: 14px;
	color: var( --ivy-eyebrow-color, var( --ivy-accent-text, var( --ivy-accent, currentcolor ) ) );
	font-size: var( --ivy-font-label );
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.ivy-hero--bande-photo .ivy-hero__title {
	margin: 0;
	color: var( --ivy-title-color, var( --ivy-accent, currentcolor ) );
	font-family: var( --ivy-font-titre, inherit );
	font-weight: 400;
	line-height: 1.12;
}

.ivy-hero--bande-photo .ivy-hero__text { color: var( --ivy-text-color, var( --ivy-ink, currentcolor ) ); font-size: var( --ivy-font-body ); }
.ivy-hero--bande-photo .ivy-hero__text p { margin: 0; font-size: inherit; }

.ivy-hero--bande-photo .ivy-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 24px; }

.ivy-hero--bande-photo .ivy-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 24px;
	border: 0;
	border-radius: var( --ivy-radius-action, 999px );
	background: var( --ivy-cta-background-color, var( --ivy-accent, currentcolor ) );
	color: var( --ivy-cta-color, var( --ivy-on-accent, rgb( 255 255 255 ) ) );
	font-size: var( --ivy-font-body );
	font-weight: 500;
	line-height: 1.6;
	text-decoration: none;
	transition: background-color 200ms ease, transform 200ms cubic-bezier( .22, 1, .36, 1 );
}
.ivy-hero--bande-photo .ivy-hero__cta:hover { background: var( --ivy-cta-background-color-hover, var( --ivy-line-accent, currentcolor ) ); }
.ivy-hero--bande-photo .ivy-hero__cta:active { transform: scale( .98 ); }
.ivy-hero--bande-photo .ivy-hero__cta:focus-visible { outline: 2px solid currentcolor; outline-offset: 3px; }

/* Le second bouton est un lien souligne d'un filet de la couleur d'appoint, qui se retire au survol. */
.ivy-hero--bande-photo .ivy-hero__cta--secondary {
	min-height: 44px;
	padding: 0;
	background: linear-gradient( var( --ivy-support, currentcolor ), var( --ivy-support, currentcolor ) ) left calc( 100% - 9px ) / 100% 1px no-repeat;
	color: var( --ivy-cta_secondary-color, var( --ivy-accent, currentcolor ) );
	transition: background-size 240ms cubic-bezier( .22, 1, .36, 1 );
}
.ivy-hero--bande-photo .ivy-hero__cta--secondary:hover { background-color: transparent; background-size: 0 1px; background-position: right calc( 100% - 9px ); }

.ivy-hero--bande-photo .ivy-hero__media { height: clamp( 300px, 46vw, 560px ); overflow: hidden; }
/* `media_ratio` : la bande suit la largeur de l'ecran (16:9 = 56 vw) entre 340 et 680 px ; `auto` garde la bande des pages interieures. */
.ivy-hero--bande-photo.ivy-hero--ratio-16-9 .ivy-hero__media { height: clamp( 340px, 56vw, 680px ); }
.ivy-hero--bande-photo.ivy-hero--ratio-4-3 .ivy-hero__media { height: clamp( 340px, 75vw, 680px ); }
.ivy-hero--bande-photo.ivy-hero--ratio-1-1 .ivy-hero__media { height: clamp( 340px, 100vw, 680px ); }
.ivy-hero--bande-photo.ivy-hero--ratio-3-4 .ivy-hero__media { height: clamp( 340px, 133vw, 680px ); }
.ivy-hero--bande-photo.ivy-hero--ratio-4-5 .ivy-hero__media { height: clamp( 340px, 125vw, 680px ); }
/*
 * Le point focal d'une BANDE : elle ne montre qu'une tranche de la photo, et le bon cadrage ne
 * va jamais aux extremes. `media_focus` y garde ses neuf noms, lus ici en pourcentages
 * mesures sur la maquette : haut 45 %, centre 50 %, bas 60 % (les diagonales, a gauche et a
 * droite, suivent le meme pas vertical).
 */
.ivy-hero--bande-photo .ivy-hero__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ivy-hero--bande-photo.ivy-hero--focus-top .ivy-hero__image { object-position: 50% 45%; }
.ivy-hero--bande-photo.ivy-hero--focus-bottom .ivy-hero__image { object-position: 50% 60%; }
.ivy-hero--bande-photo.ivy-hero--focus-left .ivy-hero__image { object-position: 0 50%; }
.ivy-hero--bande-photo.ivy-hero--focus-right .ivy-hero__image { object-position: 100% 50%; }
.ivy-hero--bande-photo.ivy-hero--focus-top-left .ivy-hero__image { object-position: 0 45%; }
.ivy-hero--bande-photo.ivy-hero--focus-top-right .ivy-hero__image { object-position: 100% 45%; }
.ivy-hero--bande-photo.ivy-hero--focus-bottom-left .ivy-hero__image { object-position: 0 60%; }
.ivy-hero--bande-photo.ivy-hero--focus-bottom-right .ivy-hero__image { object-position: 100% 60%; }

@media ( max-width: 960px ) {
	.ivy-hero--bande-photo { padding-top: calc( var( --ivy-bar-offset-mobile, 68px ) + 40px ); }
	.ivy-hero--bande-photo .ivy-hero__inner { grid-template-columns: 1fr; gap: 16px; }
	.ivy-hero--bande-photo .ivy-hero__media,
	.ivy-hero--bande-photo[class*='ivy-hero--ratio-'] .ivy-hero__media { height: 300px; }
}