/*
 * intro/collage — porte depuis l'« a propos » de l'accueil de la maquette Astro de Chez Loeli.
 * Engagement 5 : aucun hexadecimal. Les tailles de titre viennent du kit ; la mesure de lecture
 * vit sur le PARENT (`__text` prend toute la largeur de son parent : socle).
 */
.ivy-intro--collage {
	--ivy-roof-height: clamp( 22px, 3.6vw, 52px );
	position: relative;
	padding-block: clamp( 72px, 9vw, 120px );
	background-color: var( --ivy-surface-soft );
	background-image: var( --ivy-grain, none );
	color: var( --ivy-ink );
}
.ivy-intro--collage.ivy-intro--roofed {
	margin-block-start: calc( -1 * var( --ivy-roof-height ) );
	padding-block-start: calc( clamp( 72px, 9vw, 120px ) + var( --ivy-roof-height ) );
	clip-path: polygon( 0 var( --ivy-roof-height ), 50% 0, 100% var( --ivy-roof-height ), 100% 100%, 0 100% );
}
/* Le filet du toit : un chevron plat, a la couleur du jeton d'appui. */
.ivy-intro--collage .ivy-intro__roof {
	position: absolute;
	inset: 16px 0 auto;
	height: var( --ivy-roof-height );
	background: var( --ivy-roof-color, var( --ivy-support ) );
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10 50 0l50 10' fill='none' stroke='%23000' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E" ) center / 100% 100% no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10 50 0l50 10' fill='none' stroke='%23000' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E" ) center / 100% 100% no-repeat;
	pointer-events: none;
}

.ivy-intro--collage .ivy-intro__inner {
	display: grid;
	gap: clamp( 28px, 5vw, 72px );
	align-items: center;
	width: min( 100% - 2 * clamp( 20px, 5vw, 56px ), 1200px );
	margin-inline: auto;
}
@media ( min-width: 900px ) { .ivy-intro--collage .ivy-intro__inner { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ); } }
.ivy-intro--collage .ivy-intro__copy { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.ivy-intro--collage .ivy-intro__eyebrow { margin: 0; color: var( --ivy-eyebrow-color, var( --ivy-ink ) ); font-size: var( --ivy-font-label ); font-weight: 600; line-height: 1.6; letter-spacing: .2em; text-transform: uppercase; }
.ivy-intro--collage .ivy-intro__eyebrow::before { content: ''; display: inline-block; width: 24px; height: 11px; margin-inline-end: 12px; vertical-align: -1px; background: var( --ivy-support ); -webkit-mask: var( --ivy-roof-mask ) center / contain no-repeat; mask: var( --ivy-roof-mask ) center / contain no-repeat; }
.ivy-intro--collage .ivy-intro__title { margin: 0; color: var( --ivy-title-color, var( --ivy-ink ) ); }
.ivy-intro--collage .ivy-intro__text { color: var( --ivy-text-color, var( --ivy-muted ) ); }
.ivy-intro--collage .ivy-intro__text > * { margin: 0; }
.ivy-intro--collage .ivy-intro__text > * + * { margin-block-start: 18px; }
.ivy-intro--collage .ivy-intro__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-block-start: 6px;
	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-intro--collage .ivy-intro__cta:hover { border-color: var( --ivy-line-accent ); background: var( --ivy-line-accent ); }
.ivy-intro--collage .ivy-intro__cta:active { transform: translateY( 1px ); }
.ivy-intro--collage .ivy-intro__cta:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.ivy-intro--collage .ivy-intro__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-intro--collage .ivy-intro__cta:hover::after { transform: translateX( 3px ); }

/* Deux tirages poses l'un sur l'autre, la note et sa fleche. */
.ivy-intro--collage .ivy-collage { position: relative; padding-block-end: 16%; padding-inline-start: 10%; }
.ivy-intro--collage .ivy-collage__big img { aspect-ratio: 4 / 3; }
.ivy-intro--collage .ivy-collage__small { position: absolute; inset-inline-start: 0; inset-block-end: 0; z-index: 2; width: 36%; }
.ivy-intro--collage .ivy-collage__small img { aspect-ratio: 4 / 5; }
.ivy-intro--collage .ivy-collage__note {
	position: absolute;
	inset-inline-end: -2%;
	inset-block-end: 4%;
	z-index: 3;
	box-sizing: border-box;
	max-width: min( 78%, 17rem );
	margin: 0;
	padding: 14px 20px 16px;
	border-radius: calc( var( --ivy-radius-surface, 18px ) * 14 / 18 );
	background: var( --ivy-note-background-color, var( --ivy-surface ) );
	box-shadow: 0 18px 40px -24px color-mix( in srgb, var( --ivy-line-accent ) 50%, transparent );
	color: var( --ivy-note-color, var( --ivy-accent ) );
	font-family: var( --ivy-font-accent );
	line-height: 1.05;
	rotate: -2.5deg;
}
.ivy-intro--collage .ivy-collage__arrow {
	position: absolute;
	inset-inline-end: 43%;
	inset-block-end: 9%;
	z-index: 3;
	display: block;
	width: 70px;
	height: 46px;
	overflow: visible;
	transform: scaleX( -1 ) rotate( -12deg );
	pointer-events: none;
}
.ivy-intro--collage .ivy-collage__arrow path { fill: none; stroke: var( --ivy-arrow-color, var( --ivy-support ) ); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media ( max-width: 719px ) { .ivy-intro--collage .ivy-collage__arrow { display: none; } }
@media ( prefers-reduced-motion: no-preference ) {
	.ivy-motion-ready .ivy-intro--collage [data-ivy-in] .ivy-collage__arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier( .65, 0, .35, 1 ) 850ms; }
	.ivy-motion-ready .ivy-intro--collage [data-ivy-in].ivy-in .ivy-collage__arrow path { stroke-dashoffset: 0; }
}

/* Un mot en `{{ }}` dans ce titre : la maquette le pose en <span class="script">, qui n'y change ni la police ni la couleur mais coupe l'espacement des lettres. */
.ivy-intro--collage .ivy-hl { color: inherit; letter-spacing: 0; }
.ivy-intro--collage .ivy-intro__cta--secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .85em 1.7em; border: 1.5px solid currentColor; border-radius: var( --ivy-radius-action, 999px ); background-color: var( --ivy-cta_secondary-background-color, transparent ); color: var( --ivy-cta_secondary-color, var( --ivy-accent ) ); font-size: var( --ivy-font-h6 ); font-weight: 600; text-decoration: none; transition: background-color 200ms ease, color 200ms ease; }
.ivy-intro--collage .ivy-intro__cta--secondary:hover { background-color: var( --ivy-accent ); border-color: var( --ivy-accent ); color: var( --ivy-on-accent ); }
.ivy-intro--collage .ivy-intro__cta--secondary::after { display: none; }