/*
 * compare/avant-apres — porte depuis la maquette Astro de Chez Loeli. Engagement 5 : aucun hexadecimal.
 */
.ivy-compare--avant-apres { padding-block: clamp( 72px, 9vw, 120px ); background-color: var( --ivy-surface-soft ); background-image: var( --ivy-grain, none ); color: var( --ivy-ink ); }
.ivy-compare--avant-apres .ivy-compare__inner { width: min( 100% - 2 * clamp( 20px, 5vw, 56px ), 1200px ); margin-inline: auto; }
.ivy-compare--avant-apres .ivy-compare__header { display: grid; gap: 16px; margin-block-end: clamp( 32px, 5vw, 56px ); }
.ivy-compare--avant-apres .ivy-compare__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-compare--avant-apres .ivy-compare__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-compare--avant-apres .ivy-compare__title { margin: 0; color: var( --ivy-title-color, var( --ivy-ink ) ); }
.ivy-compare--avant-apres .ivy-compare__table { display: grid; border-block-start: 1px solid var( --ivy-line ); }
.ivy-compare--avant-apres .ivy-compare__row { display: grid; gap: 8px 40px; padding-block: 22px; border-block-end: 1px solid var( --ivy-line ); }
.ivy-compare--avant-apres .ivy-compare__heads { display: none; gap: 8px 40px; padding-block: 14px; border-block-end: 1px solid var( --ivy-line ); color: var( --ivy-heads-color, var( --ivy-ink ) ); font-size: var( --ivy-font-label ); font-weight: 600; line-height: 1.6; letter-spacing: .2em; text-transform: uppercase; }
@media ( min-width: 800px ) {
	.ivy-compare--avant-apres .ivy-compare__heads, .ivy-compare--avant-apres .ivy-compare__row { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.2fr ); }
	.ivy-compare--avant-apres .ivy-compare__heads { display: grid; }
}
.ivy-compare--avant-apres .ivy-compare__left, .ivy-compare--avant-apres .ivy-compare__right { margin: 0; font-size: var( --ivy-font-body ); }
.ivy-compare--avant-apres .ivy-compare__left { color: var( --ivy-row_left-color, var( --ivy-muted ) ); }
.ivy-compare--avant-apres .ivy-compare__right { display: grid; grid-template-columns: 24px minmax( 0, 1fr ); gap: 12px; color: var( --ivy-row_right-color, inherit ); font-weight: 500; }
.ivy-compare--avant-apres .ivy-compare__right::before { content: ''; width: var( --ivy-row_icon-size, 22px ); height: var( --ivy-row_icon-size, 22px ); margin-top: 2px; background: var( --ivy-row_icon-color, var( --ivy-accent ) ); -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='M4.6 12.9c1.7 1.1 3 2.5 4.2 4.3 2.3-4.7 5.6-8.5 10.6-11.7'/%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='M4.6 12.9c1.7 1.1 3 2.5 4.2 4.3 2.3-4.7 5.6-8.5 10.6-11.7'/%3E%3C/svg%3E" ) center / contain no-repeat; }

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