/* =============================================
   SayLife Assurance Pro — questionnaire de devis v2 (v3.19, lot 9 : langage Apple)
   Charte saylife.fr : Poppins / Roboto · #237AFC · #001744 · #0D3276 · #21355C · #DEE9FA
   Une question à la fois, en conversation (lot 9b) : les réponses données restent au-dessus en fil (question en petit,
   réponse en bulle), la question suivante monte depuis le bas (transform + opacity seulement, interruptible).
   Tout sélecteur est porté par .slap-q:not(#\#) (bat le kit Elementor / le thème).
   ============================================= */

.slap-q:not(#\#) {
    --q-blue: #237AFC;
    --q-blue-press: #1366E8;
    --q-blue-deep: #0D3276;
    --q-navy: #001744;
    --q-slate: #21355C;
    --q-pale: #DEE9FA;
    --q-ink: #111A2E;
    --q-ink-soft: #4E5F80;
    --q-ink-mute: #8B98B3;
    --q-field: #F3F5F9;
    --q-field-hover: #ECEFF5;
    --q-grouped: #F5F6F9;
    --q-tint: #F4F8FF;
    --q-hair: rgba(0, 23, 68, 0.1);
    --q-sep: rgba(60, 60, 67, 0.12);
    --q-danger: #C53030;
    --q-success: #0E9F6E;
    --q-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --q-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --q-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --q-surface: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -14px rgba(17, 26, 46, 0.12);
    --q-float: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 24px 64px -16px rgba(17, 26, 46, 0.28);
    --q-ring: 0 0 0 4px rgba(35, 122, 252, 0.22);
    --q-pad: 48px;
    box-sizing: border-box;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--q-navy);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    container-type: inline-size;
    container-name: slapq;
}
.slap-q:not(#\#) *, .slap-q:not(#\#) *::before, .slap-q:not(#\#) *::after { box-sizing: border-box; }
.slap-q:not(#\#) h2, .slap-q:not(#\#) h3, .slap-q:not(#\#) p, .slap-q:not(#\#) dl, .slap-q:not(#\#) dd, .slap-q:not(#\#) fieldset { margin: 0; padding: 0; border: 0; }
.slap-q:not(#\#) h2, .slap-q:not(#\#) h3, .slap-q:not(#\#) button, .slap-q:not(#\#) input, .slap-q:not(#\#) select, .slap-q:not(#\#) textarea, .slap-q:not(#\#) a { font-family: inherit; letter-spacing: normal; text-transform: none; }
.slap-q:not(#\#) button, .slap-q:not(#\#) a, .slap-q:not(#\#) label { touch-action: manipulation; }
.slap-q:not(#\#) button { -webkit-user-select: none; user-select: none; }
.slap-q:not(#\#) .slap-q__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.slap-q:not(#\#) [hidden] { display: none !important; }
.slap-q:not(#\#) .slap-q__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ----- One card: header, the screen, then the fine print ----- */
.slap-q:not(#\#) .slap-q__shell {
    position: relative;
    border-radius: 28px;
    background: #fff;
    box-shadow: var(--q-surface);
}
.slap-q:not(#\#) .slap-q__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px 16px;
    padding: 30px var(--q-pad) 0;
}
.slap-q:not(#\#) .slap-q__eyebrow { grid-column: 1; grid-row: 1; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--q-blue); }
.slap-q:not(#\#) .slap-q__count { grid-column: 2; grid-row: 1; margin: 0; font-size: 13px; line-height: 1.3; color: var(--q-ink-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.slap-q:not(#\#) .slap-q__progress { grid-column: 1 / -1; grid-row: 2; height: 4px; margin: 0; border-radius: 999px; background: rgba(0, 23, 68, 0.07); overflow: hidden; }
/* The fill slides (transform), it never resizes: the rounded end stays round and nothing is laid out again */
.slap-q:not(#\#) .slap-q__bar { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--q-blue); transform: translateX(-100%); transition: transform 520ms var(--q-ease-out); }
.slap-q:not(#\#) .slap-q__notice { margin: 18px var(--q-pad) 0; padding: 12px 16px; border-radius: 14px; font-size: 14px; color: var(--q-danger); background: #FDF2F2; }
.slap-q:not(#\#) .slap-q__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.slap-q:not(#\#) .slap-q__reassure { margin: 0; padding: 18px var(--q-pad) 0; border-top: 0.5px solid var(--q-sep); font-size: 13px; line-height: 1.5; color: var(--q-ink-soft); text-align: center; }
.slap-q:not(#\#) .slap-q__reassure:last-child { padding-bottom: 22px; }
/* « Protection de vos données » : the notice stays in the page, in a bubble that pops from the « i » */
.slap-q:not(#\#) .slap-q__rgpd { position: relative; display: flex; justify-content: center; margin: 0; padding: 6px var(--q-pad) 18px; }
.slap-q:not(#\#) .slap-q__info { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; padding: 4px 12px 4px 6px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 13px; line-height: 1.3; color: var(--q-ink-soft); cursor: pointer; transition: background-color 150ms var(--q-ease-out), transform 140ms var(--q-ease-out); }
.slap-q:not(#\#) .slap-q__info:active { transform: scale(0.97); background: var(--q-grouped); }
.slap-q:not(#\#) .slap-q__info:focus-visible { outline: none; box-shadow: var(--q-ring); }
.slap-q:not(#\#) .slap-q__info-i { display: inline-flex; flex: 0 0 22px; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.25px var(--q-blue); font-size: 12.5px; font-weight: 700; font-style: normal; line-height: 1; color: var(--q-blue); transition: background-color 150ms var(--q-ease-out), color 150ms var(--q-ease-out); }
.slap-q:not(#\#) .slap-q__info[aria-expanded="true"] .slap-q__info-i { background: var(--q-blue); color: #fff; }
.slap-q:not(#\#) .slap-q__bubble {
    position: absolute; z-index: 40; left: 50%; bottom: calc(100% - 6px);
    width: min(440px, calc(100cqi - 24px)); margin: 0; padding: 16px 18px;
    border-radius: 16px; background: #fff; box-shadow: var(--q-float);
    font-size: 13px; line-height: 1.6; color: var(--q-ink-soft); text-align: left;
    transform-origin: 50% 100%; transform: translateX(-50%) scale(0.96); opacity: 0;
    transition: transform 180ms var(--q-ease-out), opacity 180ms var(--q-ease-out);
}
.slap-q:not(#\#) .slap-q__bubble.is-open { transform: translateX(-50%); opacity: 1; }
.slap-q:not(#\#) .slap-q__bubble::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; border-radius: 2px; background: #fff; transform: translateX(-50%) rotate(45deg); box-shadow: 3px 3px 6px -2px rgba(17, 26, 46, 0.12); }
.slap-q:not(#\#) .slap-q__bubble p { margin: 0; }
.slap-q:not(#\#) .slap-q__bubble a { color: var(--q-blue); text-decoration: underline; text-underline-offset: 2px; }

/* ----- The stage: one screen at a time, the button stays where it was ----- */
.slap-q:not(#\#) .slap-q__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 340px;
    margin: 0;
    padding: 30px var(--q-pad) 32px;
}
/* The page never jumps to keep something in view while the thread grows: the glide is ours */
.slap-q:not(#\#) .slap-q__stage { overflow-anchor: none; }
/* Only while a question drops away: clip it (clip keeps the sticky bar working where supported) */
.slap-q:not(#\#) .slap-q__stage.is-moving { overflow: hidden; overflow: clip; }
.slap-q:not(#\#) .slap-q__screen {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    min-width: 0;
}
/* The question rises from below: title first, then help, then the answers (stagger 70 ms) */
.slap-q:not(#\#) .slap-q__screen > * { transition: transform 420ms var(--q-ease-out), opacity 420ms var(--q-ease-out); }
.slap-q:not(#\#) .slap-q__screen > :nth-child(2) { transition-delay: 70ms; }
.slap-q:not(#\#) .slap-q__screen > :nth-child(n+3) { transition-delay: 140ms; }
.slap-q:not(#\#) .slap-q__screen.is-rising > * { opacity: 0; transform: translate3d(0, 32px, 0); transition: none; }
.slap-q:not(#\#) .slap-q__screen.is-falling > * { opacity: 0; transform: translate3d(0, -20px, 0); transition: none; }
.slap-q:not(#\#) .slap-q__stage.is-quick .slap-q__screen > * { transition-duration: 240ms; }
.slap-q:not(#\#) .slap-q__stage.is-quick .slap-q__screen > :nth-child(2) { transition-delay: 40ms; }
.slap-q:not(#\#) .slap-q__stage.is-quick .slap-q__screen > :nth-child(n+3) { transition-delay: 80ms; }
.slap-q:not(#\#) .slap-q__screen.is-leaving { position: absolute; z-index: 0; pointer-events: none; transition: transform 240ms var(--q-ease-out), opacity 140ms var(--q-ease-out); }

/* ----- The thread: each answer given, under its question, as a reply ----- */
.slap-q:not(#\#) .slap-q__thread { display: flex; flex-direction: column; gap: 2px; margin: 0 0 26px; padding: 0 0 18px; list-style: none; border-bottom: 0.5px solid var(--q-sep); }
.slap-q:not(#\#) .slap-q__said { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 18px; row-gap: 6px; margin: 0; padding: 6px 0; }
.slap-q:not(#\#) .slap-q__said-q { margin: 0; font-size: 14px; line-height: 1.4; color: var(--q-ink-mute); transition: opacity 260ms var(--q-ease-out); }
.slap-q:not(#\#) .slap-q__said-a { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; max-width: min(440px, 60cqi); margin: 0; padding: 0; border: 0; background: none; font: inherit; text-align: right; cursor: pointer; -webkit-user-select: none; user-select: none; }
.slap-q:not(#\#) .slap-q__said-edit { flex: 0 0 auto; font-size: 13px; font-weight: 500; color: var(--q-blue); transition: opacity 260ms var(--q-ease-out); }
.slap-q:not(#\#) .slap-q__said-text {
    display: inline-block; min-width: 0; padding: 8px 14px; border-radius: 18px 18px 6px 18px;
    background: var(--q-pale); color: var(--q-navy); font-size: 15px; font-weight: 500; line-height: 1.35; text-align: left; overflow-wrap: anywhere;
    transform-origin: 100% 100%;
    transition: transform 260ms var(--q-ease-out), opacity 220ms var(--q-ease-out), background-color 150ms var(--q-ease-out);
}
.slap-q:not(#\#) .slap-q__said-text.is-empty { background: var(--q-grouped); color: var(--q-ink-mute); font-weight: 400; }
.slap-q:not(#\#) .slap-q__said-a:active .slap-q__said-text { transform: scale(0.97); }
.slap-q:not(#\#) .slap-q__said-a:focus-visible { outline: none; }
.slap-q:not(#\#) .slap-q__said-a:focus-visible .slap-q__said-text { box-shadow: var(--q-ring); }
/* The answer just given lands in the thread */
.slap-q:not(#\#) .slap-q__said.is-new .slap-q__said-text { opacity: 0; transform: scale(0.96); transition: none; }
.slap-q:not(#\#) .slap-q__said.is-new .slap-q__said-q, .slap-q:not(#\#) .slap-q__said.is-new .slap-q__said-edit { opacity: 0; transition: none; }
@media (hover: hover) and (pointer: fine) {
    .slap-q:not(#\#) .slap-q__said-a:hover .slap-q__said-text { background-color: #D2E1F8; }
    .slap-q:not(#\#) .slap-q__said-a:hover .slap-q__said-text.is-empty { background-color: var(--q-field-hover); }
    .slap-q:not(#\#) .slap-q__info:hover { background: var(--q-grouped); }
}
.slap-q:not(#\#) .slap-q__title { display: block; font-size: clamp(26px, 4.8cqi, 34px); line-height: 1.12; font-weight: 600; color: var(--q-navy); letter-spacing: -0.025em; text-wrap: pretty; outline: none; }
.slap-q:not(#\#) .slap-q__help { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--q-ink-soft); text-wrap: pretty; }
.slap-q:not(#\#) .slap-q__fields { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 28px 0 0; }
.slap-q:not(#\#) .slap-q__field { position: relative; flex: 1 1 100%; min-width: 0; }
.slap-q:not(#\#) .slap-q__field--half { flex: 1 1 calc(50% - 7px); }
.slap-q:not(#\#) .slap-q__label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--q-slate); }
.slap-q:not(#\#) input[type="text"], .slap-q:not(#\#) input[type="email"], .slap-q:not(#\#) input[type="tel"],
.slap-q:not(#\#) input[type="date"], .slap-q:not(#\#) input[type="search"], .slap-q:not(#\#) select, .slap-q:not(#\#) textarea {
    display: block; width: 100%; min-height: 56px; margin: 0; padding: 14px 18px;
    border: 0; border-radius: 14px; background-color: var(--q-field); box-shadow: inset 0 0 0 1px transparent;
    font: inherit; font-size: 17px; line-height: 1.4; color: var(--q-ink); outline: none; appearance: none; -webkit-appearance: none;
    transition: box-shadow 180ms var(--q-ease-out), background-color 180ms var(--q-ease-out);
}
.slap-q:not(#\#) input[type="date"] { min-width: 0; }
.slap-q:not(#\#) input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.slap-q:not(#\#) textarea { min-height: 128px; resize: vertical; }
.slap-q:not(#\#) select { padding-right: 46px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234E5F80' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.slap-q:not(#\#) input::placeholder, .slap-q:not(#\#) textarea::placeholder { color: var(--q-ink-mute); opacity: 1; }
.slap-q:not(#\#) input:focus, .slap-q:not(#\#) select:focus, .slap-q:not(#\#) textarea:focus { background-color: #fff; box-shadow: inset 0 0 0 1.5px var(--q-blue), var(--q-ring); }
.slap-q:not(#\#) [aria-invalid="true"] { background-color: #FFF7F7; box-shadow: inset 0 0 0 1.5px var(--q-danger); }
.slap-q:not(#\#) [aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1.5px var(--q-danger), 0 0 0 4px rgba(197, 48, 48, 0.16); }
/* The message has its line booked: it appears without pushing anything */
.slap-q:not(#\#) .slap-q__error { min-height: 20px; margin: 6px 4px 6px; font-size: 13px; line-height: 20px; color: var(--q-danger); }
.slap-q:not(#\#) .slap-q__error:not(:empty) { animation: slapQMsg 180ms var(--q-ease-out) both; }
@keyframes slapQMsg { from { opacity: 0; transform: translateY(-3px); } }
.slap-q:not(#\#) .slap-q__error.is-ok { color: var(--q-success); }
.slap-q:not(#\#) .slap-q__unit { position: relative; }
.slap-q:not(#\#) .slap-q__unit.has-unit input { padding-right: 70px; }
.slap-q:not(#\#) .slap-q__unit span { position: absolute; top: 50%; right: 18px; transform: translateY(-50%); font-size: 16px; color: var(--q-ink-soft); pointer-events: none; }
.slap-q:not(#\#) .slap-q__unit input { font-variant-numeric: tabular-nums; }

/* ----- Choice cards: white, a hairline; chosen = blue ring and a filled tick ----- */
.slap-q:not(#\#) .slap-q__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.slap-q:not(#\#) .slap-q__choices--row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.slap-q:not(#\#) .slap-q__choice { position: relative; display: block; margin: 0; cursor: pointer; }
.slap-q:not(#\#) .slap-q__choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.slap-q:not(#\#) .slap-q__choice-box,
.slap-q:not(#\#) .slap-q__company {
    display: flex; align-items: center; gap: 14px; width: 100%; height: 100%; min-height: 64px; margin: 0; padding: 16px 18px;
    border: 0; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--q-hair);
    font: inherit; color: var(--q-navy); text-align: left; cursor: pointer;
    -webkit-user-select: none; user-select: none;
    transition: transform 140ms var(--q-ease-out), box-shadow 160ms var(--q-ease-out), background-color 160ms var(--q-ease-out);
}
.slap-q:not(#\#) .slap-q__choice:active .slap-q__choice-box, .slap-q:not(#\#) .slap-q__company:active { transform: scale(0.98); background-color: var(--q-grouped); }
.slap-q:not(#\#) .slap-q__choice input:focus-visible + .slap-q__choice-box, .slap-q:not(#\#) .slap-q__company:focus-visible { box-shadow: inset 0 0 0 1.5px var(--q-blue), var(--q-ring); outline: none; }
.slap-q:not(#\#) .slap-q__choice input:checked + .slap-q__choice-box { background-color: var(--q-tint); box-shadow: inset 0 0 0 2px var(--q-blue); }
.slap-q:not(#\#) .slap-q__choice input:checked:focus-visible + .slap-q__choice-box { box-shadow: inset 0 0 0 2px var(--q-blue), var(--q-ring); }
.slap-q:not(#\#) .slap-q__choice-icon { display: inline-flex; flex: 0 0 42px; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--q-grouped); color: var(--q-blue-deep); transition: background-color 160ms var(--q-ease-out), color 160ms var(--q-ease-out); }
.slap-q:not(#\#) .slap-q__choice input:checked + .slap-q__choice-box .slap-q__choice-icon { background: var(--q-pale); color: var(--q-blue); }
.slap-q:not(#\#) .slap-q__choice-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; gap: 3px; }
.slap-q:not(#\#) .slap-q__choice-text strong { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.006em; color: var(--q-navy); }
.slap-q:not(#\#) .slap-q__choice-text small { font-size: 13px; line-height: 1.45; color: var(--q-ink-soft); }
.slap-q:not(#\#) .slap-q__choice-tick { position: relative; display: inline-flex; flex: 0 0 24px; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(0, 23, 68, 0.2); transition: background-color 160ms var(--q-ease-out), box-shadow 160ms var(--q-ease-out); }
.slap-q:not(#\#) .slap-q__choice-tick svg { opacity: 0; transform: scale(0.85); transition: opacity 140ms var(--q-ease-out), transform 200ms var(--q-ease-out); }
.slap-q:not(#\#) .slap-q__choice input:checked + .slap-q__choice-box .slap-q__choice-tick { background: var(--q-blue); box-shadow: inset 0 0 0 1.5px var(--q-blue); }
.slap-q:not(#\#) .slap-q__choice input:checked + .slap-q__choice-box .slap-q__choice-tick svg { opacity: 1; transform: none; }
/* Radio = round tick, checkbox = rounded square (the shape tells « one » or « several ») */
.slap-q:not(#\#) .slap-q__choice input[type="checkbox"] + .slap-q__choice-box .slap-q__choice-tick { border-radius: 8px; }
.slap-q:not(#\#) .slap-q__company .slap-q__choice-tick { color: var(--q-ink-mute); box-shadow: none; }
.slap-q:not(#\#) .slap-q__company .slap-q__choice-tick svg { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
    .slap-q:not(#\#) .slap-q__choice:hover .slap-q__choice-box, .slap-q:not(#\#) .slap-q__company:hover { box-shadow: inset 0 0 0 1px rgba(0, 23, 68, 0.22); }
    .slap-q:not(#\#) .slap-q__choice:hover input:checked + .slap-q__choice-box { box-shadow: inset 0 0 0 2px var(--q-blue); }
    .slap-q:not(#\#) .slap-q__company:hover .slap-q__choice-tick { color: var(--q-blue); }
}

/* ----- Company search ----- */
.slap-q:not(#\#) .slap-q__search { margin: 28px 0 0; }
.slap-q:not(#\#) .slap-q__search-row { position: relative; }
.slap-q:not(#\#) .slap-q__search-row input { padding-left: 50px; }
.slap-q:not(#\#) .slap-q__search-row input::-webkit-search-cancel-button { -webkit-appearance: none; }
.slap-q:not(#\#) .slap-q__search-icon { position: absolute; top: 50%; left: 17px; display: inline-flex; color: var(--q-ink-mute); transform: translateY(-50%); pointer-events: none; }
.slap-q:not(#\#) .slap-q__error[data-slap-q-company-msg] { color: var(--q-ink-soft); }
.slap-q:not(#\#) .slap-q__error[data-slap-q-company-msg].is-error { color: var(--q-danger); }
.slap-q:not(#\#) .slap-q__results { display: grid; gap: 10px; margin: 4px 0 0; }
.slap-q:not(#\#) .slap-q__results:empty { display: none; }
.slap-q:not(#\#) .slap-q__company { animation: slapQRise 220ms var(--q-ease-out) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes slapQRise { from { opacity: 0; transform: translateY(6px); } }
.slap-q:not(#\#) .slap-q__company .slap-q__choice-text strong { overflow-wrap: anywhere; }
.slap-q:not(#\#) .slap-q__link { display: inline-block; align-self: flex-start; margin: 16px 0 0; padding: 6px 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--q-blue); text-align: left; text-decoration: none; cursor: pointer; transition: opacity 140ms var(--q-ease-out); }
.slap-q:not(#\#) .slap-q__link:active { opacity: 0.55; }
.slap-q:not(#\#) .slap-q__link:focus-visible { outline: none; border-radius: 6px; box-shadow: var(--q-ring); }

/* ----- Address completion (address-autocomplete.js) ----- */
.slap-q:not(#\#) .slap-addr-anchor { position: relative; }
.slap-q:not(#\#) .slap-addr-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; border-radius: 16px; background: #fff; box-shadow: var(--q-float); transform-origin: top center; overscroll-behavior: contain; }
.slap-q:not(#\#) .slap-addr-list:not([hidden]) { animation: slapQPop 160ms var(--q-ease-out) both; }
@keyframes slapQPop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.slap-q:not(#\#) .slap-addr-list li { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 15px; line-height: 1.35; color: var(--q-ink); cursor: pointer; }
.slap-q:not(#\#) .slap-addr-list li.is-active, .slap-q:not(#\#) .slap-addr-list li:active { background: var(--q-grouped); color: var(--q-blue-deep); }
@media (hover: hover) and (pointer: fine) {
    .slap-q:not(#\#) .slap-addr-list li:hover { background: var(--q-grouped); color: var(--q-blue-deep); }
}

/* ----- Navigation: Continuer always in the same place ----- */
.slap-q:not(#\#) .slap-q__navbar { position: relative; z-index: 5; padding: 0 var(--q-pad); }
.slap-q:not(#\#) .slap-q__nav { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; }
.slap-q:not(#\#) .slap-q__nav .slap-q__btn--primary { margin-left: auto; }
.slap-q:not(#\#) .slap-q__laterbar { display: flex; flex-direction: column; align-items: center; padding: 0 var(--q-pad) 26px; }
.slap-q:not(#\#) .slap-q__laterbar .slap-q__later-box { align-self: stretch; }
.slap-q:not(#\#) .slap-q__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; margin: 0; padding: 0 26px;
    border: 0; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: -0.006em; white-space: nowrap; text-decoration: none; cursor: pointer;
    -webkit-user-select: none; user-select: none;
    transition: transform 140ms var(--q-ease-out), background-color 180ms var(--q-ease-out), box-shadow 180ms var(--q-ease-out), opacity 180ms var(--q-ease-out);
}
.slap-q:not(#\#) .slap-q__btn:active { transform: scale(0.97); }
.slap-q:not(#\#) .slap-q__btn:focus-visible { outline: none; box-shadow: var(--q-ring); }
.slap-q:not(#\#) .slap-q__btn--primary { min-width: 180px; padding: 0 22px 0 28px; background: var(--q-blue); color: #fff; opacity: 0.42; }
.slap-q:not(#\#) .slap-q__btn--primary.is-ready, .slap-q:not(#\#) [data-slap-q-submit].slap-q__btn--primary, .slap-q:not(#\#) a.slap-q__btn--primary { opacity: 1; }
.slap-q:not(#\#) .slap-q__btn--primary:active { background: var(--q-blue-press); }
.slap-q:not(#\#) .slap-q__btn--primary i { display: inline-flex; align-items: center; justify-content: center; font-style: normal; }
.slap-q:not(#\#) .slap-q__btn--primary.is-busy { opacity: 0.85; cursor: progress; }
/* Sending can take a few seconds: the arrow becomes a spinner, so the wait reads as work in progress */
.slap-q:not(#\#) .slap-q__btn--primary.is-busy i svg { display: none; }
.slap-q:not(#\#) .slap-q__btn--primary.is-busy i::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: slapQSpin 700ms linear infinite; }
@keyframes slapQSpin { to { transform: rotate(360deg); } }
.slap-q:not(#\#) .slap-q__btn--ghost { padding: 0 18px 0 12px; background: transparent; color: var(--q-blue-deep); }
.slap-q:not(#\#) .slap-q__btn--ghost:active { background: var(--q-grouped); }
@media (hover: hover) and (pointer: fine) {
    .slap-q:not(#\#) .slap-q__btn--primary:hover { background: var(--q-blue-press); color: #fff; }
    .slap-q:not(#\#) .slap-q__btn--primary i { transition: transform 200ms var(--q-ease-out); }
    .slap-q:not(#\#) .slap-q__btn--primary:hover i { transform: translateX(2px); }
    .slap-q:not(#\#) .slap-q__btn--ghost:hover { background: var(--q-grouped); color: var(--q-blue-deep); }
    .slap-q:not(#\#) .slap-q__later:hover { color: var(--q-blue-deep); }
    .slap-q:not(#\#) .slap-q__link:hover { color: var(--q-blue-press); }
}
.slap-q:not(#\#) .slap-q__later { display: inline-flex; align-items: center; align-self: center; gap: 8px; min-height: 44px; margin: 14px 0 0; padding: 0 12px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 14px; color: var(--q-ink-soft); cursor: pointer; transition: opacity 140ms var(--q-ease-out); }
.slap-q:not(#\#) .slap-q__later:active { opacity: 0.55; }
.slap-q:not(#\#) .slap-q__later:focus-visible { outline: none; box-shadow: var(--q-ring); }
.slap-q:not(#\#) .slap-q__later-box { margin: 10px 0 0; padding: 18px; border-radius: 18px; background: var(--q-grouped); font-size: 14px; line-height: 1.5; color: var(--q-slate); }
.slap-q:not(#\#) .slap-q__later-box:not([hidden]) { animation: slapQRise 220ms var(--q-ease-out) both; }
.slap-q:not(#\#) .slap-q__later-box > * + * { margin-top: 10px; }
.slap-q:not(#\#) .slap-q__later-box .slap-q__error { min-height: 0; margin: 10px 0 0; }
.slap-q:not(#\#) .slap-q__later-box .slap-q__error:empty, .slap-q:not(#\#) .slap-q__later-box .slap-q__error:first-child { margin: 0; }
.slap-q:not(#\#) .slap-q__copy { display: flex; gap: 8px; }
.slap-q:not(#\#) .slap-q__copy input { min-height: 46px; padding: 10px 14px; font-size: 14px; background-color: #fff; }
.slap-q:not(#\#) .slap-q__later-box .slap-q__btn--ghost { min-height: 46px; padding: 0 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--q-hair); font-size: 14px; }

/* ----- Recap: an order summary (grouped list, whole row opens the question) ----- */
.slap-q:not(#\#) .slap-q__recap { display: grid; gap: 22px; margin: 26px 0 0; }
.slap-q:not(#\#) .slap-q__recap-group h3 { margin: 0 0 8px 18px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--q-ink-soft); }
.slap-q:not(#\#) .slap-q__recap-group dl { margin: 0; padding: 0 0 0 18px; border-radius: 16px; background: var(--q-grouped); overflow: hidden; }
.slap-q:not(#\#) .slap-q__recap-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; align-items: center; gap: 14px; min-height: 52px; padding: 12px 10px 12px 0; box-shadow: inset 0 0.5px 0 var(--q-sep); }
.slap-q:not(#\#) .slap-q__recap-row:first-child { box-shadow: none; }
.slap-q:not(#\#) .slap-q__recap-row::before { content: ''; position: absolute; top: 0; bottom: 0; left: -18px; right: 0; background: rgba(0, 23, 68, 0.05); opacity: 0; pointer-events: none; transition: opacity 120ms var(--q-ease-out); }
.slap-q:not(#\#) .slap-q__recap-row:active::before { opacity: 1; }
.slap-q:not(#\#) .slap-q__recap-row dt { font-size: 14px; line-height: 1.4; color: var(--q-ink-soft); }
.slap-q:not(#\#) .slap-q__recap-row dd { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--q-ink); text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.slap-q:not(#\#) .slap-q__recap-row dd em { font-style: normal; color: var(--q-danger); }
.slap-q:not(#\#) .slap-q__edit { position: static; display: inline-flex; align-items: center; gap: 2px; min-height: 32px; padding: 0 4px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 14px; color: var(--q-blue); cursor: pointer; }
.slap-q:not(#\#) .slap-q__edit svg { order: 2; color: var(--q-ink-mute); }
/* The chevron says « Modifier » (as in a settings list); the word stays for screen readers */
.slap-q:not(#\#) .slap-q__edit span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The button covers its row: the whole line is the target, as in a settings list */
.slap-q:not(#\#) .slap-q__edit::after { content: ''; position: absolute; inset: 0 0 0 -18px; }
.slap-q:not(#\#) .slap-q__edit:focus-visible { outline: none; }
.slap-q:not(#\#) .slap-q__edit:focus-visible::after { border-radius: 4px; box-shadow: inset 0 0 0 2px var(--q-blue); }
@media (hover: hover) and (pointer: fine) {
    .slap-q:not(#\#) .slap-q__recap-row:hover::before { opacity: 0.6; }
    .slap-q:not(#\#) .slap-q__recap-row:hover .slap-q__edit svg { color: var(--q-blue); }
    .slap-q:not(#\#) .slap-q__recap-row:active::before { opacity: 1; }
}

/* ----- Done: the one moment that celebrates (rare, once) ----- */
.slap-q:not(#\#) .slap-q__done { align-items: center; justify-content: center; gap: 16px; padding: 18px 0 6px; text-align: center; }
.slap-q:not(#\#) .slap-q__done-icon { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin: 0 0 4px; border-radius: 50%; background: var(--q-blue); color: #fff; animation: slapQSeal 300ms var(--q-ease-out) 40ms both; }
.slap-q:not(#\#) .slap-q__done-icon path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: slapQDraw 300ms var(--q-ease-out) 220ms forwards; }
@keyframes slapQSeal { from { opacity: 0; transform: scale(0.9); } }
@keyframes slapQDraw { to { stroke-dashoffset: 0; } }
.slap-q:not(#\#) .slap-q__done > :not(.slap-q__done-icon) { animation: slapQRise 280ms var(--q-ease-out) both; }
.slap-q:not(#\#) .slap-q__done > :nth-child(2) { animation-delay: 120ms; }
.slap-q:not(#\#) .slap-q__done > :nth-child(3) { animation-delay: 160ms; }
.slap-q:not(#\#) .slap-q__done > :nth-child(n+4) { animation-delay: 200ms; }
.slap-q:not(#\#) .slap-q__done .slap-q__help { max-width: 460px; margin: 0; }
.slap-q:not(#\#) .slap-q__ref { min-width: 260px; padding: 14px 28px 16px; border-radius: 18px; background: var(--q-grouped); }
.slap-q:not(#\#) .slap-q__ref small { display: block; font-size: 13px; font-weight: 500; color: var(--q-ink-soft); }
.slap-q:not(#\#) .slap-q__ref strong { display: block; margin-top: 2px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--q-navy); font-variant-numeric: tabular-nums; }
.slap-q:not(#\#) .slap-q__promise { max-width: 440px; font-size: 17px; font-weight: 600; line-height: 1.45; letter-spacing: -0.006em; color: var(--q-slate); text-wrap: balance; }
.slap-q:not(#\#) .slap-q__docs { display: flex; gap: 12px; max-width: 520px; padding: 14px 18px; border-radius: 16px; background: var(--q-grouped); text-align: left; font-size: 14px; line-height: 1.5; color: var(--q-ink-soft); }
.slap-q:not(#\#) .slap-q__docs > span { display: inline-flex; flex: 0 0 auto; color: var(--q-blue-deep); }
.slap-q:not(#\#) .slap-q__done .slap-q__btn { margin-top: 10px; }

/* ----- Phone ----- */
@container slapq (max-width: 560px) {
    /* A container query styles descendants only: the padding token is set on the card */
    .slap-q:not(#\#) .slap-q__shell { --q-pad: 20px; border-radius: 24px; }
    .slap-q:not(#\#) .slap-q__top { padding-top: 22px; gap: 12px; }
    .slap-q:not(#\#) .slap-q__stage { min-height: min(440px, 50svh); padding-top: 24px; padding-bottom: 24px; }
    .slap-q:not(#\#) .slap-q__title { font-size: 26px; line-height: 1.15; }
    .slap-q:not(#\#) .slap-q__fields { margin-top: 24px; }
    .slap-q:not(#\#) .slap-q__choices { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .slap-q:not(#\#) .slap-q__choice-box, .slap-q:not(#\#) .slap-q__company { gap: 12px; padding: 14px 16px; }
    .slap-q:not(#\#) .slap-q__choice-icon { flex-basis: 38px; width: 38px; height: 38px; border-radius: 11px; }
    .slap-q:not(#\#) .slap-q__field--half { flex-basis: 100%; }
    /* Bottom action bar: material, pinned while the screen scrolls, safe area kept clear */
    .slap-q:not(#\#) .slap-q__navbar {
        position: sticky; bottom: 0; z-index: 5;
        padding: 12px var(--q-pad) calc(12px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.8);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
    }
    .slap-q:not(#\#) .slap-q__nav .slap-q__btn--primary { flex: 1 1 auto; min-width: 0; padding: 0 18px; justify-content: center; }
    .slap-q:not(#\#) .slap-q__nav .slap-q__btn--ghost { flex: 0 0 52px; width: 52px; padding: 0; background: var(--q-grouped); }
    .slap-q:not(#\#) .slap-q__nav .slap-q__btn--ghost span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .slap-q:not(#\#) .slap-q__later { margin-top: 4px; }
    .slap-q:not(#\#) .slap-q__laterbar { padding-bottom: 18px; }
    .slap-q:not(#\#) .slap-q__recap-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
    .slap-q:not(#\#) .slap-q__recap-row dt { grid-column: 1; grid-row: 1; font-size: 13px; }
    .slap-q:not(#\#) .slap-q__recap-row dd { grid-column: 1; grid-row: 2; text-align: left; }
    .slap-q:not(#\#) .slap-q__recap-row .slap-q__edit { grid-column: 2; grid-row: 1 / 3; padding: 0 2px; }
    .slap-q:not(#\#) .slap-q__copy { flex-direction: column; }
    .slap-q:not(#\#) .slap-q__ref { min-width: 0; width: 100%; }
    .slap-q:not(#\#) .slap-q__done .slap-q__btn { align-self: stretch; }
}
@container slapq (max-width: 560px) {
    .slap-q:not(#\#) .slap-q__thread { margin-bottom: 20px; padding-bottom: 14px; }
    .slap-q:not(#\#) .slap-q__said { grid-template-columns: minmax(0, 1fr); }
    .slap-q:not(#\#) .slap-q__said-a { justify-self: end; max-width: 92%; }
}
@media (pointer: coarse) {
    .slap-q:not(#\#) input, .slap-q:not(#\#) select, .slap-q:not(#\#) textarea { font-size: 16px; }
}

/* ----- Accessibility ----- */
@media (prefers-reduced-motion: reduce) {
    /* Gentler, not nothing: opacity and colour stay, movement goes */
    .slap-q:not(#\#) .slap-q__screen > *, .slap-q:not(#\#) .slap-q__stage.is-quick .slap-q__screen > *,
    .slap-q:not(#\#) .slap-q__stage .slap-q__screen > :nth-child(n), .slap-q:not(#\#) .slap-q__stage.is-quick .slap-q__screen > :nth-child(n) { transition: opacity 200ms ease; transition-delay: 0ms; }
    .slap-q:not(#\#) .slap-q__stage .slap-q__screen.is-rising > :nth-child(n), .slap-q:not(#\#) .slap-q__stage .slap-q__screen.is-falling > :nth-child(n) { transition: none; }
    .slap-q:not(#\#) .slap-q__stage .slap-q__screen.is-rising > *, .slap-q:not(#\#) .slap-q__stage .slap-q__screen.is-falling > * { transform: none; }
    .slap-q:not(#\#) .slap-q__said-text, .slap-q:not(#\#) .slap-q__said.is-new .slap-q__said-text, .slap-q:not(#\#) .slap-q__said-a:active .slap-q__said-text { transform: none; }
    .slap-q:not(#\#) .slap-q__said-text { transition: opacity 200ms ease, background-color 150ms ease; }
    .slap-q:not(#\#) .slap-q__bubble, .slap-q:not(#\#) .slap-q__bubble.is-open { transform: translateX(-50%); transition: opacity 160ms ease; }
    .slap-q:not(#\#) .slap-q__info:active { transform: none; }
    .slap-q:not(#\#) .slap-q__bar { transition: transform 200ms ease; }
    .slap-q:not(#\#) .slap-q__choice-box, .slap-q:not(#\#) .slap-q__company, .slap-q:not(#\#) .slap-q__btn { transition-property: background-color, box-shadow, opacity; }
    .slap-q:not(#\#) .slap-q__choice:active .slap-q__choice-box, .slap-q:not(#\#) .slap-q__company:active, .slap-q:not(#\#) .slap-q__btn:active { transform: none; }
    .slap-q:not(#\#) .slap-q__choice-tick svg { transform: none; }
    .slap-q:not(#\#) .slap-q__error:not(:empty), .slap-q:not(#\#) .slap-q__company, .slap-q:not(#\#) .slap-q__later-box:not([hidden]), .slap-q:not(#\#) .slap-addr-list:not([hidden]),
    .slap-q:not(#\#) .slap-q__done > :not(.slap-q__done-icon), .slap-q:not(#\#) .slap-q__done-icon { animation: slapQFade 200ms ease both; animation-delay: 0ms; }
    .slap-q:not(#\#) .slap-q__done-icon path { animation: none; stroke-dashoffset: 0; }
    .slap-q:not(#\#) .slap-q__btn--primary.is-busy i::before { animation-duration: 1400ms; }
    @keyframes slapQFade { from { opacity: 0; } }
}
@media (prefers-reduced-transparency: reduce) {
    .slap-q:not(#\#) .slap-q__navbar { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    .slap-q:not(#\#) { --q-hair: rgba(0, 23, 68, 0.45); --q-sep: rgba(0, 23, 68, 0.4); --q-ink-soft: #2E3B55; --q-ink-mute: #4E5F80; }
    .slap-q:not(#\#) input[type="text"], .slap-q:not(#\#) input[type="email"], .slap-q:not(#\#) input[type="tel"],
    .slap-q:not(#\#) input[type="date"], .slap-q:not(#\#) input[type="search"], .slap-q:not(#\#) select, .slap-q:not(#\#) textarea { box-shadow: inset 0 0 0 1px var(--q-hair); }
}

/* ----- Page continuity: from a product page (opted in too), a soft crossfade instead of a cut ----- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 180ms cubic-bezier(0.23, 1, 0.32, 1) both slapQVtOut; }
::view-transition-new(root) { animation: 320ms cubic-bezier(0.23, 1, 0.32, 1) both slapQVtIn; }
@keyframes slapQVtOut { to { opacity: 0; } }
@keyframes slapQVtIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: ease; }
}