/*
 * hero/portal — engagement 5 : aucun hexadecimal, replis compris. Cadre sous
 * .ivy-hero--portal (PASSATION §3). L'ouverture derive de --ivy-stuck ; le
 * repli 0 laisse le cadre ferme sans JavaScript. Fiche R-03.
 *
 * La racine est plus HAUTE que son contenu visible : 520px, le meme nombre
 * que `data-ivy-stick` cote gabarit, pour que `.ivy-hero__stage` — collant,
 * epingle en haut du viewport — ne relache la section qu'une fois
 * `--ivy-stuck` a 1. Meme geometrie (racine haute + stage collant) que
 * `hero/ouverture`, et pour la meme raison : `assets/css/ivy-core.css`
 * reserve deja cette hauteur avant que cette feuille n'arrive (CLS), donc le
 * calcul y est DUPLIQUE a l'identique — piege deja paye la : `overflow:
 * hidden` doit rester sur le STAGE, jamais sur la racine, sinon elle devient
 * le conteneur de reference du `position: sticky` et le stage cesse de
 * coller.
 */
.ivy-hero--portal {
	--ivy-portal-inset: calc( ( 1 - var( --ivy-stuck, 0 ) ) * 7vmin );
	--ivy-portal-radius: calc( ( 1 - var( --ivy-stuck, 0 ) ) * 40px );

	position: relative;
	min-height: var( --ivy-hero-min-height, 100vh );
	min-block-size: calc( max( 100svh, var( --ivy-hero-min-height, 100vh ) ) + 520px );
	isolation: isolate;
}

.ivy-hero--portal .ivy-hero__stage {
	position: sticky;
	top: 0;
	display: grid;
	min-block-size: var( --ivy-hero-min-height, 100vh );
	overflow: hidden;
	background: transparent;
	color: var( --ivy-section-color, rgb( 255 255 255 ) );
	isolation: isolate;
}

/* clip-path : composite par le GPU, aucune remise en page. */
.ivy-hero--portal .ivy-hero__frame {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var( --ivy-frame-background-color, rgb( 14 18 22 ) );
	clip-path: inset( var( --ivy-portal-inset ) round var( --ivy-portal-radius ) );
}

.ivy-hero--portal .ivy-hero__media,
.ivy-hero--portal .ivy-hero__overlay { position: absolute; inset: 0; }
/* Aucun fond par defaut : la famille `background` l'ecrit seule. Voir la note
   de `hero/plein` — un repli en degrade est irretirable depuis le panneau. */
.ivy-hero--portal .ivy-hero__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var( --ivy-hero-focus, 50% 50% ); }

/* LE POINT FOCAL. Meme convention que hero/croise : center n'a aucune regle. */
.ivy-hero--portal.ivy-hero--focus-top-left { --ivy-hero-focus: 0% 0%; }
.ivy-hero--portal.ivy-hero--focus-top { --ivy-hero-focus: 50% 0%; }
.ivy-hero--portal.ivy-hero--focus-top-right { --ivy-hero-focus: 100% 0%; }
.ivy-hero--portal.ivy-hero--focus-left { --ivy-hero-focus: 0% 50%; }
.ivy-hero--portal.ivy-hero--focus-right { --ivy-hero-focus: 100% 50%; }
.ivy-hero--portal.ivy-hero--focus-bottom-left { --ivy-hero-focus: 0% 100%; }
.ivy-hero--portal.ivy-hero--focus-bottom { --ivy-hero-focus: 50% 100%; }
.ivy-hero--portal.ivy-hero--focus-bottom-right { --ivy-hero-focus: 100% 100%; }

/* `min-block-size` reprend directement la valeur du stage, jamais un
   pourcentage : min-block-size/min-height ne comptent pas comme une hauteur
   DEFINIE, donc un `100%` ici se resoudrait a `auto` (meme choix que
   `hero/ouverture`, `.ivy-hero__inner`). */
.ivy-hero--portal .ivy-hero__inner { display: flex; align-items: flex-end; width: min( 100%, 1400px ); min-block-size: var( --ivy-hero-min-height, 100vh ); margin-inline: auto; padding: clamp( 120px, 16vh, 200px ) clamp( 32px, 8vw, 120px ) clamp( 56px, 9vh, 112px ); }
.ivy-hero--portal .ivy-hero__content { max-width: 780px; }
.ivy-hero--portal .ivy-hero__eyebrow { display: block; margin: 0 0 18px; color: var( --ivy-eyebrow-color, rgb( 255 255 255 / 76% ) ); font-size: var( --ivy-font-label ); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.ivy-hero--portal .ivy-hero__title { margin: 0; color: var( --ivy-title-color, rgb( 255 255 255 ) ); font-weight: 500; line-height: .94; letter-spacing: -.035em; }
.ivy-hero--portal .ivy-hero__text { max-width: 52ch; margin: 26px 0 0; color: var( --ivy-text-color, rgb( 255 255 255 / 84% ) ); font-size: var( --ivy-font-body ); line-height: 1.6; }
.ivy-hero--portal .ivy-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.ivy-hero--portal .ivy-hero__cta { display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: .85em 1.45em; border: 1px solid var( --ivy-cta-border-color, transparent ); border-radius: var( --ivy-radius-action, 999px ); background: var( --ivy-cta-background-color, rgb( 255 255 255 ) ); color: var( --ivy-cta-color, rgb( 17 17 17 ) ); text-decoration: none; transition: transform 180ms cubic-bezier( .23, 1, .32, 1 ); }
.ivy-hero--portal .ivy-hero__cta--secondary { border-color: var( --ivy-cta_secondary-border-color, rgb( 255 255 255 / 45% ) ); background: var( --ivy-cta_secondary-background-color, transparent ); color: var( --ivy-cta_secondary-color, rgb( 255 255 255 ) ); }
.ivy-hero--portal .ivy-hero__cta:hover,
.ivy-hero--portal .ivy-hero__cta:focus-visible { transform: translateY( -2px ); }
.ivy-hero--portal .ivy-hero__cta:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

@media ( max-width: 640px ) {
	.ivy-hero--portal { --ivy-portal-inset: calc( ( 1 - var( --ivy-stuck, 0 ) ) * 4vmin ); --ivy-portal-radius: calc( ( 1 - var( --ivy-stuck, 0 ) ) * 28px ); }
	.ivy-hero--portal .ivy-hero__inner { padding: 112px 24px 48px; }
	.ivy-hero--portal .ivy-hero__content { max-width: 23rem; }
	.ivy-hero--portal .ivy-hero__text { margin-top: 20px; }
	.ivy-hero--portal .ivy-hero__actions { margin-top: 24px; }
}

/*
 * Le mouvement tombe ; le visiteur arrive directement au cadrage final. Sans
 * animation a attendre, l'epinglage n'a plus de raison d'etre : le retirer
 * evite de forcer un defilement a vide sur la distance qu'il reservait.
 */
@media ( prefers-reduced-motion: reduce ) {
	.ivy-hero--portal { --ivy-portal-inset: 0px; --ivy-portal-radius: 0px; min-block-size: var( --ivy-hero-min-height, 100vh ); }
	.ivy-hero--portal .ivy-hero__stage { position: relative; }
	.ivy-hero--portal .ivy-hero__cta { transition: none; }
}

/* L'image suit le rayon de son cadre — media-rayon.spec.ts. */
.ivy-hero--portal .ivy-hero__media img { border-radius: inherit; }

/* L'image suit le rayon de son cadre — media-rayon.spec.ts. */
.ivy-hero--portal .ivy-hero__media { border-radius: inherit; }