/*
 * hero/carnet — l'ouverture de Chez Loeli, portee depuis la maquette Astro validee
 * (Hero de index.astro). Engagement 5 : aucun hexadecimal ; les teintes viennent des
 * jetons du site et se reglent par instance. Les tailles de titre viennent du kit
 * (balise ou reglage de la partie) : la feuille ne pose que la geometrie.
 */
.ivy-hero--carnet {
	--ivy-hero-focus: 50% 62%;
	/* Le voile est une couleur plate (reglable) dont ce masque fait un fondu : le panneau change la teinte sans retomber sur un degrade. */
	--ivy-hero-fade: linear-gradient( to bottom, rgb( 0 0 0 / .94 ) 0%, rgb( 0 0 0 / .84 ) 30%, rgb( 0 0 0 / .45 ) 50%, transparent 72% );
	--ivy-page-gutter: clamp( 20px, 5vw, 56px );
	position: relative;
	display: grid;
	align-items: start;
	min-height: var( --ivy-hero-min-height, 100vh );
	grid-template-rows: minmax( clamp( 500px, 45vw, 650px ), auto );
	overflow: clip;
	isolation: isolate;
	background: var( --ivy-surface-soft, rgb( 253 238 223 ) );
}
.ivy-hero--carnet .ivy-hero__media,
.ivy-hero--carnet .ivy-hero__overlay { position: absolute; inset: 0; }
.ivy-hero--carnet .ivy-hero__media { z-index: -3; }
.ivy-hero--carnet .ivy-hero__image { display: block; width: 100%; height: 100%; border-radius: 0; object-fit: cover; object-position: var( --ivy-hero-focus ); }
.ivy-hero--carnet .ivy-hero__overlay {
	z-index: -2;
	background-color: var( --ivy-veil );
	-webkit-mask-image: var( --ivy-hero-fade );
	mask-image: var( --ivy-hero-fade );
}

.ivy-hero--carnet .ivy-hero__inner {
	position: relative;
	box-sizing: border-box;
	width: min( 100% - 2 * var( --ivy-page-gutter ), 1200px );
	margin-inline: auto;
	padding-block: clamp( 40px, 6vw, 80px ) clamp( 90px, 14vw, 190px );
}
.ivy-hero--carnet .ivy-hero__content { display: grid; gap: 22px; justify-items: center; text-align: center; }

.ivy-hero--carnet .ivy-hero__eyebrow {
	margin: 0 0 -8px;
	color: var( --ivy-eyebrow-color, var( --ivy-ink ) );
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .2em;
	text-transform: uppercase;
}
.ivy-hero--carnet .ivy-hero__title { margin: 0; color: var( --ivy-title-color, var( --ivy-ink ) ); line-height: 1.06; }
.ivy-hero--carnet .ivy-hl { position: relative; display: inline-block; padding-inline: .04em; color: var( --ivy-script-color, var( --ivy-support ) ); font-family: var( --ivy-font-accent ); font-weight: 400; line-height: .9; letter-spacing: 0; white-space: nowrap; }
@media ( max-width: 380px ) { .ivy-hero--carnet .ivy-hl { white-space: normal; } }
/* Le trait sous le mot : un trace a main levee, peint a la couleur du mot. */
.ivy-hero--carnet .ivy-hl::after {
	content: '';
	position: absolute;
	inset-inline: 2% 0;
	inset-block-end: -.12em;
	block-size: .22em;
	background: currentColor;
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14c34-7 66-9 100-7 32 2 62 2 94-5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E" ) no-repeat center / 100% 100%;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14c34-7 66-9 100-7 32 2 62 2 94-5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E" ) no-repeat center / 100% 100%;
}
/* La mesure de lecture vit sur le PARENT : le socle donne a tout `__text` la largeur de son parent. */
.ivy-hero--carnet .ivy-hero__lede { max-width: 46ch; font-size: var( --ivy-font-lead ); }
.ivy-hero--carnet .ivy-hero__text { color: var( --ivy-text-color, var( --ivy-ink ) ); font-size: inherit; }
.ivy-hero--carnet .ivy-hero__text p { margin: 0; font-size: inherit; }

.ivy-hero--carnet .ivy-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 52px;
	padding: .85em 1.7em;
	border: 1.5px solid var( --ivy-cta-background-color, var( --ivy-accent ) );
	border-radius: var( --ivy-radius-action, 999px );
	background: var( --ivy-cta-background-color, var( --ivy-accent ) );
	color: var( --ivy-cta-color, var( --ivy-on-accent ) );
	font-size: var( --ivy-font-h6 ); font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.ivy-hero--carnet .ivy-hero__cta:hover { border-color: var( --ivy-line-accent ); background: var( --ivy-line-accent ); }
.ivy-hero--carnet .ivy-hero__cta:active { transform: translateY( 1px ); }
.ivy-hero--carnet .ivy-hero__cta:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.ivy-hero--carnet .ivy-hero__cta::after { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: var( --ivy-arrow-mask ) center / contain no-repeat; mask: var( --ivy-arrow-mask ) center / contain no-repeat; transition: transform 200ms ease; }
.ivy-hero--carnet .ivy-hero__cta:hover::after { transform: translateX( 3px ); }

/* La branche d'olivier du logo, dans l'angle haut droit. */
.ivy-hero--carnet .ivy-hero__branch {
	position: absolute;
	inset-block-start: -50px;
	inset-inline-end: clamp( -30px, 1vw, 24px );
	z-index: -1;
	display: block;
	width: var( --ivy-branch-width, clamp( 80px, 11vw, 150px ) );
	height: auto;
	overflow: visible;
	opacity: .9;
	transform: rotate( 168deg ) scaleX( -1 );
	pointer-events: none;
}
.ivy-hero--carnet .ivy-branch__stem { fill: none; stroke: var( --ivy-branch-color, var( --ivy-accent ) ); stroke-width: 2; stroke-linecap: round; }
.ivy-hero--carnet .ivy-branch__leaf { stroke: none; }
.ivy-hero--carnet .ivy-branch__leaf--0 { fill: var( --ivy-deep ); }
.ivy-hero--carnet .ivy-branch__leaf--1 { fill: var( --ivy-branch-color, var( --ivy-accent ) ); opacity: .88; }
.ivy-hero--carnet .ivy-branch__leaf--2 { fill: var( --ivy-deep ); opacity: .7; }
.ivy-hero--carnet .ivy-branch__vein { fill: none; stroke: var( --ivy-surface ); stroke-width: 1; stroke-linecap: round; opacity: .6; }

/* La photo se pose, le texte monte, le mot s'ecrit puis se souligne. Rien en mouvement reduit. */
@media ( prefers-reduced-motion: no-preference ) {
	.ivy-hero--carnet .ivy-hero__image { animation: ivy-carnet-pose 2.6s cubic-bezier( .22, 1, .36, 1 ) both; }
	.ivy-hero--carnet .ivy-hero__content > * { animation: ivy-carnet-monte .9s cubic-bezier( .22, 1, .36, 1 ) both; }
	.ivy-hero--carnet .ivy-hero__content > :nth-child( 2 ) { animation-delay: .35s; }
	.ivy-hero--carnet .ivy-hero__content > :nth-child( 3 ) { animation-delay: .5s; }
	.ivy-hero--carnet .ivy-hl { clip-path: inset( -30% 100% -40% -6% ); animation: ivy-carnet-ecrit 1.5s .55s cubic-bezier( .55, 0, .35, 1 ) forwards; }
	.ivy-hero--carnet .ivy-hl::after { clip-path: inset( 0 100% 0 0 ); animation: ivy-carnet-trait 1.1s 1.75s cubic-bezier( .65, 0, .35, 1 ) forwards; }
}
@keyframes ivy-carnet-pose { from { transform: scale( 1.08 ); } }
@keyframes ivy-carnet-monte { from { opacity: 0; transform: translateY( 22px ); } }
@keyframes ivy-carnet-ecrit { to { clip-path: inset( -30% -6% -40% -6% ); } }
@keyframes ivy-carnet-trait { to { clip-path: inset( 0 0 0 0 ); } }

.ivy-hero--carnet.ivy-hero--focus-top-left { --ivy-hero-focus: 0% 0%; }
.ivy-hero--carnet.ivy-hero--focus-top { --ivy-hero-focus: 50% 0%; }
.ivy-hero--carnet.ivy-hero--focus-top-right { --ivy-hero-focus: 100% 0%; }
.ivy-hero--carnet.ivy-hero--focus-left { --ivy-hero-focus: 0% 50%; }
.ivy-hero--carnet.ivy-hero--focus-right { --ivy-hero-focus: 100% 50%; }
.ivy-hero--carnet.ivy-hero--focus-bottom-left { --ivy-hero-focus: 0% 100%; }
.ivy-hero--carnet.ivy-hero--focus-bottom { --ivy-hero-focus: 50% 100%; }
.ivy-hero--carnet.ivy-hero--focus-bottom-right { --ivy-hero-focus: 100% 100%; }