/*
 * cta/toit — porte depuis BandeauContact.astro de la maquette de Chez Loeli : le bord haut est un toit
 * tres plat doublé d'un filet ; la branche d'olivier, en bas a droite, se trace a l'arrivee de la page.
 * Engagement 5 : aucun hexadecimal.
 */
.ivy-cta--toit {
	--ivy-roof-height: clamp( 22px, 3.6vw, 52px );
	position: relative;
	overflow: hidden;
	padding-block: clamp( 72px, 9vw, 120px );
	background-color: var( --ivy-surface-soft );
	background-image: var( --ivy-grain, none );
	color: var( --ivy-ink );
}
.ivy-cta--toit.ivy-cta--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% );
}
.ivy-cta--toit .ivy-cta__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-cta--toit .ivy-cta__inner { position: relative; width: min( 100% - 2 * clamp( 20px, 5vw, 56px ), 1200px ); margin-inline: auto; }
.ivy-cta--toit .ivy-cta__copy { position: relative; z-index: 1; display: grid; gap: 20px; justify-items: start; max-width: 46rem; }
.ivy-cta--toit .ivy-cta__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-cta--toit .ivy-cta__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-cta--toit .ivy-cta__title { margin: 0; color: var( --ivy-title-color, var( --ivy-ink ) ); }
.ivy-cta--toit .ivy-cta__text { color: var( --ivy-text-color, var( --ivy-ink ) ); font-size: var( --ivy-font-lead ); }
.ivy-cta--toit .ivy-cta__text > * { margin: 0; font-size: inherit; }
.ivy-cta--toit .ivy-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.ivy-cta--toit .ivy-cta__button {
	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-color: 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, color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.ivy-cta--toit .ivy-cta__button:hover { border-color: var( --ivy-line-accent ); background-color: var( --ivy-line-accent ); color: var( --ivy-on-accent ); }
.ivy-cta--toit .ivy-cta__button:active { transform: translateY( 1px ); }
.ivy-cta--toit .ivy-cta__button:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.ivy-cta--toit .ivy-cta__button::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-cta--toit .ivy-cta__button:hover::after { transform: translateX( 3px ); }
/* Le second bouton : le telephone, en contour, avec le combine devant. */
.ivy-cta--toit .ivy-cta__button--secondary { border-color: var( --ivy-cta_secondary-border-color, var( --ivy-accent ) ); background-color: var( --ivy-cta_secondary-background-color, transparent ); color: var( --ivy-cta_secondary-color, var( --ivy-accent ) ); }
.ivy-cta--toit .ivy-cta__button--secondary:hover { border-color: var( --ivy-accent ); background-color: var( --ivy-accent ); color: var( --ivy-on-accent ); }
.ivy-cta--toit .ivy-cta__button--secondary::after { display: none; }
.ivy-cta--toit .ivy-cta__button--secondary::before { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 3.5h2.6l1.4 3.8-1.9 1.4a11 11 0 0 0 5.6 5.6l1.4-1.9 3.8 1.4v2.6a2 2 0 0 1-2 2A14.6 14.6 0 0 1 4.2 5.5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E" ) center / contain no-repeat; mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 3.5h2.6l1.4 3.8-1.9 1.4a11 11 0 0 0 5.6 5.6l1.4-1.9 3.8 1.4v2.6a2 2 0 0 1-2 2A14.6 14.6 0 0 1 4.2 5.5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E" ) center / contain no-repeat; }

/* La branche d'olivier, calee sur le bas du bandeau. */
.ivy-cta--toit .ivy-cta__branch { position: absolute; inset-block-end: calc( -1 * clamp( 72px, 9vw, 120px ) ); inset-inline-end: 2%; display: block; width: var( --ivy-branch-width, clamp( 120px, 20vw, 260px ) ); height: auto; overflow: visible; opacity: .5; pointer-events: none; }
@media ( max-width: 719px ) { .ivy-cta--toit .ivy-cta__branch { width: 110px; inset-inline-end: -14px; opacity: .3; } }
.ivy-cta--toit .ivy-branch__stem { fill: none; stroke: var( --ivy-branch-color, var( --ivy-accent ) ); stroke-width: 2; stroke-linecap: round; }
.ivy-cta--toit .ivy-branch__leaf { stroke: none; }
.ivy-cta--toit .ivy-branch__leaf--0 { fill: var( --ivy-deep ); }
.ivy-cta--toit .ivy-branch__leaf--1 { fill: var( --ivy-branch-color, var( --ivy-accent ) ); opacity: .88; }
.ivy-cta--toit .ivy-branch__leaf--2 { fill: var( --ivy-deep ); opacity: .7; }
.ivy-cta--toit .ivy-branch__vein { fill: none; stroke: var( --ivy-surface ); stroke-width: 1; stroke-linecap: round; opacity: .6; }
@media ( prefers-reduced-motion: no-preference ) {
	.ivy-cta--toit .ivy-branch__stem { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ivy-toit-trace 1.6s .2s cubic-bezier( .4, .1, .2, 1 ) forwards; }
	.ivy-cta--toit .ivy-branch__leaf, .ivy-cta--toit .ivy-branch__vein { opacity: 0; animation: ivy-toit-pousse .7s .9s ease-out forwards; }
}
@keyframes ivy-toit-trace { to { stroke-dashoffset: 0; } }
@keyframes ivy-toit-pousse { to { opacity: 1; } }

/* 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-cta--toit .ivy-hl { color: inherit; letter-spacing: 0; }