/*
 * faq/carnet — porte depuis la maquette Astro de Chez Loeli. Engagement 5 : aucun hexadecimal.
 */
.ivy-faq--carnet { padding-block: clamp( 72px, 9vw, 120px ); background-color: var( --ivy-surface-soft ); background-image: var( --ivy-grain, none ); color: var( --ivy-ink ); }
.ivy-faq--carnet .ivy-faq__inner { display: grid; gap: clamp( 28px, 5vw, 72px ); align-items: start; width: min( 100% - 2 * clamp( 20px, 5vw, 56px ), 1200px ); margin-inline: auto; }
@media ( min-width: 900px ) { .ivy-faq--carnet .ivy-faq__inner { grid-template-columns: minmax( 0, .8fr ) minmax( 0, 1.2fr ); } .ivy-faq--carnet .ivy-faq__header { position: sticky; inset-block-start: 112px; margin-block-end: 0; } }
.ivy-faq--carnet .ivy-faq__header { display: grid; gap: 16px; min-width: 0; margin-block-end: clamp( 32px, 5vw, 56px ); }
.ivy-faq--carnet .ivy-faq__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-faq--carnet .ivy-faq__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-faq--carnet .ivy-faq__title { margin: 0; color: var( --ivy-title-color, var( --ivy-ink ) ); }
.ivy-faq--carnet .ivy-faq__lede { max-width: 62ch; font-size: var( --ivy-font-lead ); }
.ivy-faq--carnet .ivy-faq__text { color: var( --ivy-text-color, var( --ivy-muted ) ); font-size: inherit; }
.ivy-faq--carnet .ivy-faq__text > * { margin: 0; font-size: inherit; }
.ivy-faq--carnet .ivy-faq__text a { color: var( --ivy-accent ); text-decoration: underline 1px; text-underline-offset: .22em; }
.ivy-faq--carnet .ivy-faq__list { display: grid; border-block-start: 1px solid var( --ivy-line ); min-width: 0; }
.ivy-faq--carnet .ivy-faq__item { border-block-end: 1px solid var( --ivy-line ); }
.ivy-faq--carnet .ivy-faq__question { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding-block: 14px; color: var( --ivy-question-color, var( --ivy-ink ) ); font-family: var( --ivy-font-titre ); line-height: 1.3; cursor: pointer; list-style: none; }
.ivy-faq--carnet .ivy-faq__question::-webkit-details-marker { display: none; }
.ivy-faq--carnet .ivy-faq__question:hover { color: var( --ivy-accent ); }
.ivy-faq--carnet .ivy-faq__sign { position: relative; flex: none; width: var( --ivy-sign-size, 36px ); height: var( --ivy-sign-size, 36px ); border: 1.5px solid var( --ivy-sign-color, var( --ivy-support ) ); border-radius: 50%; }
.ivy-faq--carnet .ivy-faq__sign::before, .ivy-faq--carnet .ivy-faq__sign::after { content: ''; position: absolute; inset: 50% auto auto 50%; width: 12px; height: 1.5px; background: var( --ivy-sign-color, var( --ivy-support ) ); transform: translate( -50%, -50% ); transition: transform 250ms ease; }
.ivy-faq--carnet .ivy-faq__sign::after { transform: translate( -50%, -50% ) rotate( 90deg ); }
.ivy-faq--carnet details[open] .ivy-faq__sign::after { transform: translate( -50%, -50% ) rotate( 0deg ); }
.ivy-faq--carnet .ivy-faq__answer { max-width: 62ch; padding-block-end: 22px; color: var( --ivy-answer-color, var( --ivy-muted ) ); font-size: var( --ivy-font-body ); }
.ivy-faq--carnet .ivy-faq__answer > * { margin: 0; font-size: inherit; }

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