/* ──────────────────────────────────────────────────────────────────────────
   Kredy — feuille de style de la landing bêta (temporaire)
   Les valeurs viennent du design validé (aiDocs/design_handoff_kredy_landing_beta).

   Pourquoi un troisième fichier plutôt qu'une variante de `landing.css` : les
   deux sites publics doivent coexister sans se toucher. La landing complète
   reste la référence produit, elle garde sa feuille intacte, et revenir à elle
   après la bêta ne demande qu'une ligne d'environnement — pas un tri dans un
   fichier commun. Les jetons sont recopiés ici pour la même raison qu'ils le
   sont dans `landing.css` : une trentaine de lignes contre une requête de plus
   sur une 3G.

   Ce fichier vit dans `assets/landing/` : `PrecacheManifest` y voit le préfixe
   et l'exclut du cache hors ligne de l'application.

   Écrite en mobile d'abord. Le design ne connaît que deux modes et bascule à
   900px — il n'y a donc qu'une seule requête média de mise en page.
   ────────────────────────────────────────────────────────────────────────── */

/* ─── Polices ─────────────────────────────────────────────────────────────
   Les mêmes fichiers que l'application et que la landing complète, déjà
   sous-ensemblés en latin. Aucun appel à Google Fonts.                     */
@font-face {
    font-family: 'Bricolage Grotesque';
    src: url("../fonts/bricolage-grotesque-latin-k0HXNf5.woff2") format('woff2');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url("../fonts/source-sans-3-latin-8PKsh_E.woff2") format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

/* ─── Jetons ──────────────────────────────────────────────────────────────
   Mêmes noms que dans `landing.css` quand la valeur est la même. Les hex sont
   le repli sRGB pour les vieilles WebView Android ; les navigateurs récents
   reçoivent l'oklch exact du design.                                       */
:root {
    --ink: #140B05;
    --ink-3: #372E27;
    --cream: #FCF4EB;
    --cream-dark: #F3ECE2;
    --surface: #FFFBF7;
    --amber: #A63C00;
    --amber-dark: #8A3200;
    --amber-brand: #D55C13;
    --olive: #5C6C14;
    --olive-text: #354000;
    --olive-icon: #3D4C00;
    --olive-mark: #7D9A48;
    --olive-pale: #C1E29F;
    --olive-chip: #33450A;
    --border: #E3DDD8;
    --border-2: #E5E0D9;
    --line-soft: #DFD9D3;
    --footer-line: #E1DBD5;
    --field: #D9D2CD;
    --handle: #D6D0CB;
    --sep: #CBC5C0;
    --text-1: #4F463D;
    --text-body: #554B42;
    --text-2: #5E534A;
    --text-3: #6C6158;
    --text-nav: #473E36;
    --text-micro: #665B52;
    --placeholder: #857A70;
    --on-ink-1: #CFC5BC;
    --on-ink-2: #DCD3CA;
    --on-ink-chip: #D5CBC3;
    --on-ink-3: #A89C92;
    --chip-on-ink: #3B322A;
    --tab-off: #7C7168;
    --status: #6C6158;

    --font-display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
    --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;

    --shadow-phone: 0 28px 60px rgb(20 11 5 / 28%);
    --shadow-card: 0 22px 50px rgb(8 5 2 / 35%);
    --shadow-fab: 0 6px 14px rgb(166 60 0 / 42%);
    --focus-ring: 0 0 0 3px rgb(166 60 0 / 14%);

    /* La hauteur de la barre collante. Elle sert au décalage de `#beta` :
       sans lui, l'ancre place le titre de la section sous la barre. */
    --nav-height: 72px;
}

@supports (color: oklch(0.5 0.1 60)) {
    :root {
        --ink: oklch(0.16 0.02 60);
        --ink-3: oklch(0.30 0.02 60);
        --cream: oklch(0.97 0.015 70);
        --cream-dark: oklch(0.94 0.014 70);
        --surface: oklch(0.99 0.008 70);
        --amber: oklch(0.50 0.17 42);
        --amber-dark: oklch(0.42 0.15 42);
        --amber-brand: oklch(0.62 0.17 45);
        --olive: oklch(0.50 0.11 120);
        --olive-text: oklch(0.35 0.10 120);
        --olive-icon: oklch(0.40 0.10 120);
        --olive-mark: oklch(0.62 0.11 120);
        --olive-pale: oklch(0.86 0.09 130);
        --olive-chip: oklch(0.33 0.09 120);
        --border: oklch(0.90 0.01 60);
        --border-2: oklch(0.91 0.01 60);
        --line-soft: oklch(0.88 0.01 60);
        --footer-line: oklch(0.89 0.01 60);
        --field: oklch(0.87 0.01 60);
        --handle: oklch(0.86 0.01 60);
        --sep: oklch(0.80 0.01 60);
        --text-1: oklch(0.38 0.02 60);
        --text-body: oklch(0.40 0.02 60);
        --text-2: oklch(0.45 0.02 60);
        --text-3: oklch(0.50 0.02 60);
        --text-nav: oklch(0.35 0.02 60);
        --text-micro: oklch(0.48 0.02 60);
        --placeholder: oklch(0.62 0.02 60);
        --on-ink-1: oklch(0.80 0.02 60);
        --on-ink-2: oklch(0.88 0.01 60);
        --on-ink-chip: oklch(0.85 0.01 60);
        --on-ink-3: oklch(0.70 0.02 60);
        --chip-on-ink: oklch(0.28 0.02 60);
        --tab-off: oklch(0.58 0.02 60);
        --status: oklch(0.45 0.02 60);

        --shadow-phone: 0 28px 60px oklch(0.16 0.02 60 / 28%);
        --shadow-card: 0 22px 50px oklch(0.05 0.02 60 / 35%);
        --shadow-fab: 0 6px 14px oklch(0.50 0.17 42 / 42%);
        --focus-ring: 0 0 0 3px oklch(0.50 0.17 42 / 14%);
    }
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Le défilement doux est demandé par le design pour les trois ancres.
       `prefers-reduced-motion` le retire plus bas. */
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    /* La page ne défile jamais horizontalement, y compris à 360px : c'est une
       condition du handoff, pas une précaution. */
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--amber);
    text-decoration: none;
}

a:hover {
    color: var(--amber-dark);
}

:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

.lb-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 22px;
}

/* Le pot de miel. Hors de l'écran plutôt que `display: none` : certains robots
   ignorent les champs masqués, et c'est justement eux qu'on attend ici. */
.lb-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ─── Boutons ─────────────────────────────────────────────────────────────
   Une seule définition pour les trois : nav, hero, envoi. Le design ne leur
   donne que des tailles différentes.                                       */
.lb-btn {
    display: inline-block;
    border: 0;
    border-radius: 14px;
    font-family: var(--font-body);
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease, opacity 120ms ease;
}

.lb-btn--amber {
    background: var(--amber);
    color: #FFF;
}

.lb-btn--amber:hover {
    background: var(--amber-dark);
    color: #FFF;
    transform: translateY(-1px);
}

.lb-btn--amber:active {
    transform: translateY(0);
    opacity: 0.92;
}

.lb-btn--ghost {
    background: transparent;
    border: 1.5px solid var(--handle);
    border-radius: 13px;
    color: var(--ink);
    font-size: 15.5px;
    padding: 14px 24px;
}

.lb-btn--ghost:hover {
    color: var(--ink);
    transform: translateY(-1px);
}

/* ─── 1. Nav ─────────────────────────────────────────────────────────────── */
.lb-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    background: rgb(252 244 235 / 92%);
    border-bottom: 1px solid var(--border-2);
    backdrop-filter: blur(10px);
}

@supports (color: oklch(0.5 0.1 60)) {
    .lb-nav {
        background: oklch(0.97 0.015 70 / 92%);
    }
}

.lb-nav__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -0.03em;
}

.lb-nav__brand img {
    border-radius: 9px;
}

.lb-nav__right {
    display: flex;
    align-items: center;
    gap: 26px;
}

/* Le design ne garde que le bouton en mobile, et écarte explicitement le menu
   hamburger : l'ancre est de toute façon à un écran de défilement. */
.lb-nav__link {
    display: none;
    color: var(--text-nav);
    font-size: 15px;
    font-weight: 600;
    transition: color 120ms ease;
}

.lb-nav__link:hover {
    color: var(--ink);
}

.lb-nav__cta {
    border-radius: 11px;
    font-size: 14px;
    padding: 10px 14px;
}

/* ─── 2. Hero ────────────────────────────────────────────────────────────── */
.lb-hero {
    padding: 40px 0 44px;
}

.lb-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    padding: 7px 14px;
    border-radius: 22px;
    background: rgb(92 108 20 / 12%);
    color: var(--olive-chip);
    font-size: 13px;
    font-weight: 700;
}

@supports (color: oklch(0.5 0.1 60)) {
    .lb-badge {
        background: oklch(0.50 0.11 120 / 12%);
    }
}

.lb-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--olive);
}

.lb-hero__title,
.lb-hero__accent {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 36px;
    line-height: 1.02;
    letter-spacing: -0.04em;
    text-wrap: pretty;
}

.lb-hero__title {
    margin-bottom: 10px;
}

.lb-hero__accent {
    color: var(--amber);
    margin-bottom: 18px;
}

.lb-hero__lead {
    margin: 0 0 30px;
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--text-1);
}

.lb-hero__cta {
    display: block;
    font-size: 17px;
    padding: 18px 24px;
}

.lb-hero__reassure {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 0;
    font-size: 13.5px;
    color: var(--text-2);
}

.lb-hero__sep {
    color: var(--sep);
}

/* ─── 3. Avec Kredy ──────────────────────────────────────────────────────── */
.lb-verbs {
    padding: 10px 0 50px;
}

.lb-verbs__title {
    margin: 0 0 24px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 25px;
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-wrap: pretty;
}

.lb-verbs__grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.lb-verb {
    border-top: 2px solid var(--ink);
    padding-top: 15px;
}

.lb-verb__num {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 23px;
    line-height: 1;
    color: var(--amber);
}

.lb-verb__title {
    margin: 0 0 7px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17.5px;
    letter-spacing: -0.02em;
}

.lb-verb__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-body);
}

/* ─── 4. Aperçu ──────────────────────────────────────────────────────────── */
.lb-preview {
    padding: 48px 0;
    background: var(--cream-dark);
    border-top: 1px solid var(--border-2);
    border-bottom: 1px solid var(--border-2);
}

.lb-preview__grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.lb-preview__visual {
    display: flex;
    justify-content: center;
}

.lb-preview__text {
    min-width: 0;
}

.lb-label {
    margin: 0 0 13px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--amber);
}

.lb-preview__title {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.035em;
    text-wrap: pretty;
}

.lb-preview__lead {
    margin: 0 0 24px;
    max-width: 32rem;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--text-1);
}

/* La maquette du téléphone : du HTML, pas une image. Le texte reste net à
   toutes les densités et la page pèse quelques centaines d'octets de plus. */
.lb-phone {
    width: 300px;
    max-width: 100%;
    padding: 10px;
    border-radius: 38px;
    background: var(--ink);
    box-shadow: var(--shadow-phone);
    /* Le design réduit légèrement la maquette en mobile pour qu'elle tienne
       sans marge à 360px. */
    transform: scale(0.94);
    transform-origin: top center;
}

.lb-phone__screen {
    border-radius: 30px;
    background: var(--cream);
    overflow: hidden;
}

.lb-phone__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--status);
}

.lb-phone__body {
    padding: 6px 18px 18px;
}

.lb-phone__hello {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-3);
}

.lb-total {
    position: relative;
    margin-bottom: 12px;
    padding: 18px;
    border-radius: 20px;
    background: var(--ink);
    overflow: hidden;
}

.lb-total__mark {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 4px;
    opacity: 0.5;
}

.lb-total__mark i {
    width: 3px;
    height: 22px;
    border-radius: 2px;
    background: var(--amber-brand);
}

.lb-total__mark i:last-child {
    background: var(--olive-mark);
}

.lb-total__label {
    margin: 0 0 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-ink-3);
}

.lb-total__value {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--cream);
}

.lb-total__currency {
    margin: 2px 0 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--amber-brand);
}

.lb-chip {
    display: inline-block;
    margin: 14px 0 0;
    padding: 5px 10px;
    border-radius: 18px;
    background: var(--chip-on-ink);
    color: var(--on-ink-chip);
    font-size: 11px;
}

.lb-phone__actions {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.lb-mini {
    flex: 1;
    padding: 13px 0;
    border-radius: 12px;
    color: #FFF;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.lb-mini--amber {
    background: var(--amber);
}

.lb-mini--olive {
    background: var(--olive);
}

.lb-phone__label {
    margin: 0 0 8px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--status);
}

.lb-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.lb-line--last {
    border-bottom: 0;
}

.lb-line__left {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.lb-line__bar {
    flex-shrink: 0;
    width: 4px;
    height: 28px;
    border-radius: 2px;
    background: var(--ink);
}

.lb-line__bar--olive {
    background: var(--olive-text);
}

.lb-line__name {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.lb-line__meta {
    display: block;
    font-size: 11px;
    color: var(--text-3);
}

.lb-line__amount {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
}

.lb-line__amount--olive {
    color: var(--olive-text);
}

.lb-tabs {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 9px 18px 14px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.lb-tabs__item {
    font-size: 9px;
    font-weight: 700;
    text-align: center;
    color: var(--tab-off);
}

.lb-tabs__item svg {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0 auto 3px;
}

.lb-tabs__item.is-active {
    color: var(--amber);
}

.lb-tabs__item--note {
    font-weight: 800;
    color: var(--ink);
    transform: translateY(-13px);
}

.lb-tabs__disc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 3px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: var(--shadow-fab);
    color: #FFF;
    font-size: 22px;
    font-style: normal;
}

/* Le calcul : trois lignes, et le résultat en gros. C'est la promesse de la
   page, réduite à sa plus petite démonstration. */
.lb-calc {
    margin-bottom: 20px;
    padding: 20px 24px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
}

.lb-calc__row,
.lb-calc__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    font-size: 15.5px;
    color: var(--text-1);
}

.lb-calc__row {
    padding: 9px 0;
}

.lb-calc__row--last {
    border-bottom: 2px solid var(--ink);
}

.lb-calc__amount {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 19px;
    color: var(--ink);
}

.lb-calc__amount--olive {
    color: var(--olive-text);
}

.lb-calc__total {
    padding: 15px 0 3px;
    color: var(--ink);
    font-weight: 700;
}

.lb-calc__value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 29px;
    letter-spacing: -0.03em;
    color: var(--amber);
}

.lb-offline {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--cream-dark);
}

.lb-offline__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: rgb(92 108 20 / 14%);
    color: var(--olive-icon);
}

@supports (color: oklch(0.5 0.1 60)) {
    .lb-offline__icon {
        background: oklch(0.50 0.11 120 / 14%);
    }
}

.lb-offline__title {
    margin: 0 0 4px;
    font-size: 14.5px;
    font-weight: 700;
}

.lb-offline__text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-body);
}

/* ─── 5. Formulaire bêta ─────────────────────────────────────────────────── */
.lb-beta {
    padding: 50px 0;
    background: var(--ink);
    /* Le décalage de l'ancre : sans lui, la barre collante recouvre le titre
       de la section quand on arrive depuis un des deux CTA. */
    scroll-margin-top: var(--nav-height);
}

.lb-beta__grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.lb-beta__text {
    min-width: 0;
}

.lb-beta__title {
    margin: 0 0 14px;
    max-width: 20rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 29px;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--cream);
    text-wrap: pretty;
}

.lb-beta__lead {
    margin: 0 0 26px;
    max-width: 26rem;
    font-size: 16px;
    line-height: 1.65;
    color: var(--on-ink-1);
}

.lb-proofs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lb-proof {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 15.5px;
    color: var(--on-ink-2);
}

.lb-proof__icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--olive-pale);
}

.lb-proof__icon svg {
    display: block;
    width: 17px;
    height: 17px;
}

.lb-card {
    padding: 24px 20px;
    border-radius: 22px;
    background: var(--cream);
    box-shadow: var(--shadow-card);
}

.lb-card__title {
    margin: 0 0 20px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.025em;
}

/* Les deux faces de la carte. Le fondu croisé de 200ms demandé par le design
   ne joue que sur la face qui arrive : l'autre est retirée du document par
   `hidden`, et une page sans JavaScript ne voit jamais la transition. */
.lb-card__face[hidden] {
    display: none;
}

.lb-card__face {
    animation: lb-fade 200ms ease;
}

@keyframes lb-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.lb-field {
    margin-bottom: 16px;
}

.lb-field--last {
    margin-bottom: 22px;
}

.lb-label--field {
    display: block;
    margin: 0 0 7px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink-3);
}

.lb-label__hint {
    font-weight: 400;
    color: var(--text-2);
}

.lb-input {
    width: 100%;
    padding: 15px 16px;
    border: 1.5px solid var(--field);
    border-radius: 13px;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    /* 16px au minimum : en dessous, iOS zoome au focus et la page part de
       travers. */
    font-size: 16.5px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.lb-input::placeholder {
    color: var(--placeholder);
}

.lb-input:focus {
    outline: none;
    border-color: var(--amber);
    box-shadow: var(--focus-ring);
}

.lb-input.is-wrong {
    border-color: var(--amber);
}

.lb-error {
    margin: 7px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--amber);
}

.lb-error--network {
    margin-top: 12px;
}

.lb-error[hidden] {
    display: none;
}

.lb-submit {
    width: 100%;
    font-size: 17px;
    padding: 18px 0;
}

.lb-submit[disabled] {
    opacity: 0.7;
    cursor: default;
    transform: none;
}

.lb-micro {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-micro);
}

.lb-done {
    padding: 14px 4px;
    text-align: center;
}

.lb-done__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgb(92 108 20 / 14%);
    color: var(--olive-icon);
}

@supports (color: oklch(0.5 0.1 60)) {
    .lb-done__icon {
        background: oklch(0.50 0.11 120 / 14%);
    }
}

.lb-done__icon svg {
    width: 28px;
    height: 28px;
}

.lb-done__title {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.03em;
}

.lb-done__text {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-1);
}

.lb-done__text + .lb-done__text {
    margin-bottom: 24px;
}

/* ─── 6. Mini FAQ ────────────────────────────────────────────────────────── */
.lb-faq {
    padding: 46px 0;
}

.lb-faq__grid {
    display: flex;
    flex-direction: column;
}

.lb-faq__item {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.lb-faq__q {
    margin: 0 0 7px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16.5px;
    letter-spacing: -0.02em;
    text-wrap: pretty;
}

.lb-faq__a {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-body);
}

/* ─── 7. Footer ──────────────────────────────────────────────────────────── */
.lb-footer {
    padding: 28px 0 24px;
    background: var(--cream-dark);
    border-top: 1px solid var(--border-2);
}

.lb-footer__top {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--footer-line);
}

.lb-footer__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.03em;
}

.lb-footer__brand img {
    border-radius: 8px;
}

.lb-footer__baseline {
    margin: 0;
    font-size: 14px;
    color: var(--text-2);
}

.lb-footer__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lb-footer__links a {
    font-size: 14px;
    color: var(--text-body);
}

.lb-footer__links a:hover {
    color: var(--ink);
}

.lb-footer__bottom {
    margin: 0;
    padding-top: 18px;
    font-size: 13px;
    color: var(--text-3);
}

/* ─── Pages légales ──────────────────────────────────────────────────────── */
.lb-legal {
    padding: 36px 0 48px;
}

.lb-legal__inner {
    max-width: 44rem;
}

.lb-legal__title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.lb-legal__date {
    margin: 0 0 28px;
    font-size: 14px;
    color: var(--text-3);
}

.lb-legal h2 {
    margin: 30px 0 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -0.025em;
}

.lb-legal p {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-1);
}

/* ─── Desktop ────────────────────────────────────────────────────────────
   Le design ne connaît que deux modes, et bascule à 900px. Il n'y a donc
   qu'une seule requête média de mise en page — pas de palier intermédiaire à
   entretenir.                                                             */
@media (min-width: 900px) {
    .lb-container {
        padding: 0 48px;
    }

    .lb-nav {
        padding: 14px 48px;
    }

    .lb-nav__link {
        display: inline;
    }

    .lb-nav__cta {
        font-size: 15px;
        padding: 11px 18px;
    }

    .lb-hero {
        padding: 80px 0 76px;
    }

    .lb-hero__inner {
        max-width: 44rem;
        text-align: center;
    }

    .lb-hero__title,
    .lb-hero__accent {
        font-size: 56px;
    }

    .lb-hero__accent {
        margin-bottom: 24px;
    }

    .lb-hero__lead {
        max-width: 32rem;
        margin-left: auto;
        margin-right: auto;
        font-size: 19px;
    }

    .lb-hero__cta {
        display: inline-block;
        font-size: 18px;
        padding: 19px 34px;
    }

    .lb-hero__reassure {
        justify-content: center;
        font-size: 14.5px;
    }

    .lb-verbs {
        padding: 20px 0 82px;
    }

    .lb-verbs__title {
        margin-bottom: 34px;
        max-width: 26rem;
        font-size: 34px;
    }

    .lb-verbs__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .lb-verb {
        padding-top: 18px;
    }

    .lb-verb__num {
        font-size: 28px;
    }

    .lb-verb__title {
        font-size: 19px;
    }

    .lb-verb__text {
        font-size: 15.5px;
    }

    .lb-preview {
        padding: 82px 0;
    }

    .lb-preview__grid {
        display: grid;
        grid-template-columns: 0.85fr 1fr;
        gap: 56px;
        align-items: center;
    }

    .lb-preview__title {
        font-size: 30px;
    }

    .lb-preview__lead {
        font-size: 17px;
    }

    .lb-phone {
        transform: none;
    }

    .lb-beta {
        padding: 86px 0;
    }

    .lb-beta__grid {
        display: grid;
        grid-template-columns: 1fr 0.92fr;
        gap: 56px;
        align-items: center;
    }

    .lb-beta__title {
        font-size: 40px;
    }

    .lb-beta__lead {
        font-size: 18px;
    }

    .lb-card {
        padding: 30px 30px 28px;
    }

    .lb-faq {
        padding: 76px 0;
    }

    .lb-faq__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 36px;
    }

    .lb-faq__item {
        padding: 18px 0 0;
        border-top: 1px solid var(--line-soft);
        border-bottom: 0;
    }

    .lb-faq__q {
        font-size: 17.5px;
    }

    .lb-faq__a {
        font-size: 15.5px;
    }

    .lb-footer {
        padding: 38px 0 30px;
    }

    .lb-footer__top {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 30px;
        padding-bottom: 24px;
    }

    .lb-footer__links {
        flex-direction: row;
        gap: 24px;
    }

    .lb-legal {
        padding: 64px 0 80px;
    }

    .lb-legal__title {
        font-size: 40px;
    }
}

/* ─── Mouvement réduit ───────────────────────────────────────────────────
   Le handoff le demande explicitement : toutes les transitions non
   essentielles tombent, le défilement doux compris.                       */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}