/* ──────────────────────────────────────────────
   Theme Labaw — surcouche Bootstrap 5

   IDENTITÉ : confiance, modernité, accompagnement, très épuré.
   Marine dominant, turquoise en accent, blanc en fond, neutres froids.
   Les valeurs sont celles du logo (cf. public/images/logo.svg) pour que
   l'interface et le logo soient exactement raccord.

   Ratios de contraste WCAG 2.1 vérifiés (sur blanc sauf mention) :
     marine #06325C ......... 12,97:1  AAA  → titres, menu, boutons primaires
     turquoise #009A96 ....... 3,46:1  ⚠️   → JAMAIS de texte dessus/dedans :
                                             réservé aux aplats, filets, hover,
                                             dégradés et icônes décoratives (le
                                             seuil des éléments non textuels
                                             est 3:1, il est tenu).
     turquoise-ink #00736F ... 5,70:1  AA   → liens, boutons d'action, focus,
                                             icônes porteuses de sens
     texte #4A5568 ........... 7,53:1  AAA  (7,01:1 sur --lb-gray-bg)
     texte-muted #64748B ..... 4,76:1  AA
     turquoise-on-dark #3FB6AE 5,26:1  AA   (sur le marine : footer, hero)
   ────────────────────────────────────────────── */

:root {
    /* ── Marine : couleur principale ── */
    --lb-marine: #06325C;
    --lb-marine-hover: #04223F;
    --lb-marine-ink: #02132F;      /* navy du wordmark : aplats très appuyés */
    --lb-marine-light: #EAF0F6;    /* fond pâle marine */

    /* ── Turquoise : couleur d'accent ── */
    --lb-turquoise: #009A96;        /* décoratif uniquement (cf. note ci-dessus) */
    --lb-turquoise-ink: #00736F;    /* dès qu'il y a du texte ou du sens */
    --lb-turquoise-hover: #006B67;
    --lb-turquoise-on-dark: #3FB6AE; /* turquoise posé sur le marine */
    --lb-turquoise-light: #E6F4F3;

    /* ── Neutres ── */
    --lb-white: #ffffff;
    --lb-gray-bg: #F5F7FA;         /* sections alternées, cartes, fond admin */
    --lb-text: #4A5568;            /* texte courant */
    --lb-text-muted: #64748B;      /* texte secondaire */
    --lb-border: #E2E8F0;
    --lb-border-strong: #CBD5E0;

    /* ── États ── */
    --lb-success: #276749;         --lb-success-bg: #E8F5EE;
    --lb-danger: #C53030;          --lb-danger-bg: #FDECEC;
    --lb-warning: #8A5A00;         --lb-warning-bg: #FFF7E6;
    --lb-info: #2B6CB0;            --lb-info-bg: #EAF2FB;

    /* ── Formes ── */
    --lb-radius: 25px;
    --lb-radius-sm: 16px;

    /* ── Overrides Bootstrap ── */
    --bs-primary: var(--lb-marine);
    --bs-body-color: var(--lb-text);
    --bs-body-bg: var(--lb-white);
    --bs-link-color: var(--lb-turquoise-ink);
    --bs-link-hover-color: var(--lb-turquoise-hover);
    --bs-border-color: var(--lb-border);
    --bs-border-radius: var(--lb-radius-sm);
    --bs-border-radius-lg: var(--lb-radius);
    --bs-font-sans-serif: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ──────────────────────────────────────────────
   TYPOGRAPHIE — Nunito, la police du wordmark du logo.

   Identification faite par comparaison de silhouettes glyphe par glyphe entre le
   wordmark et 24 familles libres : Nunito 700 arrive premier (recouvrement 82,4 %,
   homogène sur les 5 lettres), et c'est la seule du peloton de tête à avoir les
   terminaisons arrondies et le « a » à simple étage du logo.

   Auto-hébergée (pas de CDN : transmission d'IP à un tiers évitée, et le cache
   HTTP est de toute façon partitionné par site depuis Chrome 86 / Safari 14).
   Un seul fichier variable couvre tous les poids de 200 à 1000.
   ────────────────────────────────────────────── */
@font-face {
    font-family: 'Nunito';
    src: url("../fonts/nunito-var-latin-jIB3bqF.woff2") format('woff2-variations');
    font-weight: 200 1000;   /* variable : le navigateur interpole le poids demandé */
    font-style: normal;
    font-display: swap;
    /* latin + latin étendu : les italiques ne sont pas embarquées (non utilisées) */
}

/* Titres en marine, légèrement resserrés comme le logotype (mesuré à −0,031 em
   sur le wordmark ; on reste un peu en deçà, un titre n'est pas un logo). */
h1, h2, h3, h4, h5, h6 {
    color: var(--lb-marine);
    letter-spacing: -.02em;
}

/* Anneau de focus visible au clavier, sur le turquoise conforme */
:focus-visible {
    outline: 2px solid var(--lb-turquoise-ink);
    outline-offset: 2px;
}

body {
    background: #ffffff;
    line-height: 1.65;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    background: var(--lb-white);   /* blanc dominant : rendu lumineux */
}

/* Section alternée — le gris clair sépare des blocs, il n'est pas un fond global.
   NB : le contraste blanc / #F5F7FA n'est que de 1,07:1 ; toute carte blanche posée
   dessus (ou l'inverse) a besoin de sa bordure --lb-border pour être perçue. */
.lb-section-alt { background: var(--lb-gray-bg); }

/* ── HEADER ── */
.lb-header {
    background: #ffffff;
    border-bottom: 1px solid var(--lb-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / .08);
}
/* Lockup horizontal (images/logo-h.svg) : ratio 1288/503 ≈ 2,56 */
.lb-header .navbar-brand img { height: 44px; width: auto; display: block; }
@media (max-width: 575.98px) {
    .lb-header .navbar-brand img { height: 36px; }
}
.lb-header .nav-link {
    padding: .5rem 1.1rem !important;
    border-radius: 999px;
    color: var(--lb-text-muted);
    font-size: .925rem;
    font-weight: 500;
    white-space: nowrap; /* un libellé de lien ne doit jamais casser sur 2 lignes */
    transition: color .15s, background .15s;
}
.lb-header .nav-link:hover { color: var(--lb-marine); background: var(--lb-gray-bg); }
.lb-header .nav-link.active {
    color: var(--lb-white) !important;
    background: var(--lb-marine);
    font-weight: 700;
}
.lb-header .nav-link.active:hover { background: var(--lb-marine-hover); }

/* Lien "Mon compte" : icône user (avec flèche dropdown conservée) */
.lb-header .nav-link.nav-account {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .4rem .6rem !important;
}
.lb-header .nav-link.nav-account svg { display: block; }
.lb-header .nav-link.nav-account::after { margin-left: .15rem; vertical-align: middle; }

/* Aux breakpoints où le menu se charge, on resserre pour éviter le retour à la ligne. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .lb-header .nav-link { padding: .35rem .55rem !important; font-size: .8rem; }
    .lb-header .navbar-nav { gap: .1rem; }
}

/* ── HERO ── */
.lb-hero {
    background: var(--lb-marine);
    color: white;
    position: relative;
    padding: 4rem 2rem 6rem;
    text-align: center;
}
.lb-hero::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 80px;
    background: var(--lb-white);   /* doit matcher le fond de <main> */
    clip-path: ellipse(60% 100% at 50% 100%);
}
.lb-hero h1 {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1rem;
    color: #ffffff;                /* le hero est sur fond marine */
    letter-spacing: -.031em;       /* tracking exact du wordmark du logo */
}
.lb-hero h1 em { font-style: normal; color: var(--lb-turquoise-on-dark); }
.lb-hero p {
    color: rgba(255,255,255,0.7);
    font-size: 1.05rem;
    max-width: 520px;
    margin: 0 auto;
}

/* ── BADGE & BOUTONS ──
   Hiérarchie : .btn-lb (marine) = action principale · .btn-lb-action (turquoise)
   = action métier / CTA · .btn-lb-outline = action secondaire.
   Le turquoise vif #009A96 n'est PAS utilisable en fond de bouton (blanc dessus :
   3,46:1) — les boutons d'action prennent --lb-turquoise-ink (5,70:1). */
.btn-lb {
    background: var(--lb-marine);
    color: var(--lb-white);
    border: none;
    border-radius: 999px;
    padding: .5rem 1.1rem;
    font-weight: 700;
    font-size: .85rem;
}
.btn-lb:hover { background: var(--lb-marine-hover); color: var(--lb-white); }

.btn-lb-action {
    background: var(--lb-turquoise-ink);
    color: var(--lb-white);
    border: none;
    border-radius: 999px;
    padding: .5rem 1.1rem;
    font-weight: 700;
    font-size: .85rem;
}
.btn-lb-action:hover { background: var(--lb-turquoise-hover); color: var(--lb-white); }

.btn-lb-outline {
    background: #ffffff;
    color: var(--lb-marine);
    border: 1px solid var(--lb-marine);
    border-radius: 999px;
    padding: .5rem 1rem;
    font-weight: 600;
    font-size: .875rem;
    text-decoration: none;
}
.btn-lb-outline:hover { background: var(--lb-marine); color: #ffffff; }

/* Variante rouge — même forme/dimensions que .btn-lb-outline. Pour « Supprimer ». */
.btn-lb-danger-outline {
    background: #ffffff;
    color: var(--lb-danger);
    border: 1px solid var(--lb-danger);
    border-radius: 999px;
    padding: .5rem .75rem;   /* un peu plus serré horizontalement, prévu pour icône seule */
    font-weight: 600;
    font-size: .875rem;
}
.btn-lb-danger-outline:hover { background: var(--lb-danger); color: #ffffff; }

.lb-badge {
    display: inline-block;
    background: var(--lb-marine);
    color: var(--lb-white);
    font-size: .75rem;
    font-weight: 700;
    padding: .3rem .9rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .07em;
}

/* ── CARDS ── */
.lb-card {
    background: #ffffff;
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
    overflow: hidden;
    transition: box-shadow .25s, transform .25s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.lb-card:hover {
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    transform: translateY(-3px);
}
.lb-card-body { padding: 1.5rem 1.75rem; }
.lb-card-title { font-size: 1.15rem; font-weight: 700; line-height: 1.35; margin-bottom: .6rem; color: var(--lb-marine); }
.lb-card-excerpt { color: var(--lb-text-muted); font-size: .9rem; line-height: 1.55; }

/* ── SECTION LABEL ── */
.lb-section-label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--lb-text-muted);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.lb-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--lb-border);
}

/* ── FLASH ── */
.lb-flash {
    padding: 1rem 1.25rem;
    border-radius: 999px;
    margin: 1rem auto;
    max-width: 1100px;
    font-size: .9rem;
}
.lb-flash-success { background: var(--lb-success-bg); color: var(--lb-success); border: 1px solid #CBE7D8; }
.lb-flash-error   { background: var(--lb-danger-bg);  color: var(--lb-danger);  border: 1px solid #F7CFCF; }
.lb-flash-warning { background: var(--lb-warning-bg); color: var(--lb-warning); border: 1px solid #F2E0BC; }
.lb-flash-info    { background: var(--lb-info-bg);    color: var(--lb-info);    border: 1px solid #CBDDF3; }

/* ── FOOTER ── */
.lb-footer {
    background: var(--lb-marine);
    color: rgba(255,255,255,0.5);
    text-align: center;
    padding: 2.5rem 1rem;
    font-size: .85rem;
}
.lb-footer strong { color: #ffffff; font-weight: 700; }
.lb-footer a { color: rgba(255,255,255,0.45); font-size: .75rem; text-decoration: none; }
.lb-footer a:hover { color: var(--lb-turquoise-on-dark); } /* 5,26:1 sur le marine */

/* ── TRI : liens cliquables (listes front) ── */
.lb-sort-links {
    font-size: .9rem;
    color: var(--lb-text-muted);
    margin: 1rem 0 1.5rem;
    display: flex; align-items: center; flex-wrap: wrap; gap: .35rem;
}
.lb-sort-links .lb-sort-label { font-weight: 500; margin-right: .25rem; }
.lb-sort-links .lb-sort-link {
    color: var(--lb-marine);
    text-decoration: none;
    padding: .15rem .35rem;
    border-radius: 4px;
    transition: color .15s, background .15s;
}
.lb-sort-links .lb-sort-link:hover { color: var(--lb-marine-ink); text-decoration: underline; }
.lb-sort-links .lb-sort-link.is-active {
    color: var(--lb-marine);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--lb-turquoise);
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}
.lb-sort-links .lb-sort-sep { color: var(--lb-text-muted); margin: 0 .15rem; }

/* ── PAGINATION (KnpPaginator + Bootstrap) ──
   flex-wrap + center : la pagination passe à la ligne au lieu de déborder sur petit écran. */
.pagination { gap: .2rem; flex-wrap: wrap; justify-content: center; }
@media (max-width: 480px) {
    .pagination .page-link { padding: .3rem .55rem; font-size: .8rem; }
}
.pagination .page-link {
    color: var(--lb-marine);
    background: #ffffff;
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm) !important;
    padding: .4rem .75rem;
    font-size: .9rem;
    font-weight: 600;
    transition: background .15s, color .15s, border-color .15s;
}
.pagination .page-link:hover {
    color: var(--lb-marine);
    background: var(--lb-marine-light);
    border-color: var(--lb-border-strong);
    z-index: 1;
}
.pagination .page-link:focus {
    box-shadow: 0 0 0 .2rem rgba(6, 50, 92, .25);
    outline: none;
}
.pagination .page-item.active .page-link {
    color: var(--lb-white);
    background: var(--lb-marine);
    border-color: var(--lb-marine);
    font-weight: 700;
}
.pagination .page-item.disabled .page-link {
    color: var(--lb-text-muted);
    background: var(--lb-gray-bg);
    border-color: var(--lb-border);
    cursor: not-allowed;
}

/* ── ONGLETS FRONT (lb-tabs) — conteneur blanc arrondi + pills ── */
.lb-tabs {
    display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
    background: #fff;
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    padding: .5rem;
    margin-bottom: 1.25rem;
}
.lb-tabs .lb-tab {
    padding: .55rem 1.2rem; font-weight: 600; font-size: .9rem;
    color: var(--lb-text-muted); text-decoration: none;
    border-radius: 999px;
    transition: color .15s, background .15s;
}
.lb-tabs .lb-tab:hover { color: var(--lb-marine); background: var(--lb-gray-bg); }
.lb-tabs .lb-tab.is-active { color: var(--lb-white); background: var(--lb-marine); font-weight: 700; }

/* ── BANDEAU D'APPEL À L'ACTION ── */
.lb-cta-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    /* turquoise pâle bordé de turquoise : accroche l'œil sans porter de texte
       sur le turquoise vif (marine dessus : 11,49:1) */
    background: var(--lb-turquoise-light); border: 1px solid var(--lb-turquoise);
    border-radius: var(--lb-radius-sm); padding: 1rem 1.5rem;
    margin-bottom: 1.25rem;
    text-decoration: none; color: var(--lb-marine);
    transition: box-shadow .2s;
}
.lb-cta-banner:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); color: var(--lb-marine); }
.lb-cta-banner .lb-cta-titre { font-weight: 700; font-size: 1rem; }
@media (max-width: 600px) {
    .lb-cta-banner { flex-direction: column; align-items: flex-start; }
}

/* ── RESPONSIVE TWEAKS ── */
@media (max-width: 680px) {
    .lb-hero h1 { font-size: 1.9rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE D'ACCUEIL
   Registre « tech sobre et lumineux » : blanc dominant, grille en filigrane,
   halo turquoise, grandes typographies, apparitions douces au défilement.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Rythme des sections ── */
.lb-section { padding: 5.5rem 0; }
@media (max-width: 767.98px) { .lb-section { padding: 3.5rem 0; } }

.lb-eyebrow {
    font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
    color: var(--lb-turquoise-ink); margin-bottom: .75rem;
}
.lb-section-title {
    font-size: clamp(1.75rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.15;
    margin-bottom: 1rem;
}
.lb-section-intro { color: var(--lb-text); font-size: 1.05rem; max-width: 62ch; }

/* ── HERO ── */
.lb-tech-hero {
    position: relative; overflow: hidden; background: var(--lb-white);
    padding: 5rem 0 6rem; isolation: isolate;
}
@media (max-width: 767.98px) { .lb-tech-hero { padding: 3rem 0 3.5rem; } }

/* grille en filigrane : deux dégradés répétés, atténués vers le bas */
.lb-tech-grid {
    position: absolute; inset: 0; z-index: -2;
    background-image:
        linear-gradient(to right, rgba(6,50,92,.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(6,50,92,.06) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(120% 80% at 50% 0%, #000 35%, transparent 78%);
}
/* halo turquoise diffus, dans l'angle où part le dégradé du logo */
.lb-tech-glow {
    position: absolute; top: -22%; right: -12%; width: 46rem; height: 46rem; z-index: -1;
    background: radial-gradient(circle, rgba(0,154,150,.20) 0%, rgba(0,154,150,0) 68%);
    pointer-events: none;
}

.lb-pill {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--lb-turquoise-light); border: 1px solid var(--lb-turquoise);
    color: var(--lb-marine); text-decoration: none;
    padding: .4rem .9rem .4rem .7rem; border-radius: 999px;
    font-size: .82rem; font-weight: 700; margin-bottom: 1.5rem;
    transition: box-shadow .2s, transform .2s;
}
.lb-pill:hover { color: var(--lb-marine); box-shadow: 0 6px 18px rgba(0,154,150,.18); transform: translateY(-1px); }
.lb-pill-dot {
    width: .5rem; height: .5rem; border-radius: 50%; background: var(--lb-turquoise);
    box-shadow: 0 0 0 3px rgba(0,154,150,.25);
}

.lb-tech-title {
    font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight: 800; line-height: 1.08;
    letter-spacing: -.031em;   /* tracking du wordmark */
    margin-bottom: 1.25rem;
}
/* dégradé de texte marine → turquoise : les deux extrémités restent foncées,
   donc le titre demeure lisible même si le navigateur ignore background-clip */
.lb-tech-title em {
    font-style: normal;
    color: var(--lb-turquoise-ink);
    background: linear-gradient(100deg, var(--lb-marine) 10%, var(--lb-turquoise-ink) 90%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lb-tech-lead { font-size: 1.15rem; color: var(--lb-text); max-width: 54ch; }
.lb-tech-note { font-size: .85rem; color: var(--lb-text-muted); }

/* ── Maquette de boutique ── */
.lb-mockup {
    background: var(--lb-white); border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm); overflow: hidden;
    box-shadow: 0 24px 60px -20px rgba(6,50,92,.28), 0 8px 20px -12px rgba(6,50,92,.12);
    transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
}
@media (max-width: 991.98px) { .lb-mockup { transform: none; } }
.lb-mockup-bar {
    display: flex; align-items: center; gap: .35rem;
    background: var(--lb-gray-bg); border-bottom: 1px solid var(--lb-border); padding: .6rem .8rem;
}
.lb-mockup-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--lb-border-strong); }
.lb-mockup-url {
    flex: 1; margin-left: .5rem; background: var(--lb-white); border: 1px solid var(--lb-border);
    border-radius: 999px; font-size: .7rem; color: var(--lb-text-muted);
    padding: .15rem .7rem; text-align: center;
}
.lb-mockup-body { padding: 1rem; }
.lb-mockup-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.lb-mockup-logo {
    width: 4.5rem; height: 1.1rem; border-radius: 4px;
    background: linear-gradient(100deg, var(--lb-turquoise), var(--lb-marine));
}
.lb-mockup-nav { display: flex; gap: .4rem; }
.lb-mockup-nav i { display: block; width: 1.6rem; height: .45rem; border-radius: 999px; background: var(--lb-border); }
.lb-mockup-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.lb-mockup-card { border: 1px solid var(--lb-border); border-radius: 10px; padding: .5rem; }
.lb-mockup-img {
    height: 3.2rem; border-radius: 6px; margin-bottom: .45rem;
    background: linear-gradient(135deg, var(--lb-gray-bg), #E3EEF2);
}
.lb-mockup-line { height: .35rem; border-radius: 999px; background: var(--lb-border); margin-bottom: .3rem; }
.lb-mockup-btn { height: .8rem; border-radius: 999px; background: var(--lb-turquoise); opacity: .85; margin-top: .5rem; }

/* ── Bandeau de réassurance ── */
.lb-trust { background: var(--lb-gray-bg); border-block: 1px solid var(--lb-border); padding: 2.5rem 0; }
.lb-trust-item { position: relative; padding-left: 0; }
.lb-trust-mark {
    display: block; width: 2rem; height: .28rem; border-radius: 999px; margin: 0 auto .9rem;
    background: linear-gradient(100deg, var(--lb-turquoise), var(--lb-marine));
}
@media (min-width: 768px) { .lb-trust-mark { margin-left: 0; } }
.lb-trust-title { font-size: 1rem; font-weight: 800; margin-bottom: .35rem; }
.lb-trust-text { font-size: .9rem; color: var(--lb-text-muted); margin: 0; }

/* ── Blocs de fonctionnalités ── */
.lb-feature {
    height: 100%; background: var(--lb-white); border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm); padding: 1.5rem;
    transition: box-shadow .25s, transform .25s, border-color .25s;
}
.lb-feature:hover {
    border-color: var(--lb-turquoise); transform: translateY(-3px);
    box-shadow: 0 14px 34px -18px rgba(6,50,92,.30);
}
.lb-feature-title {
    font-size: 1.05rem; font-weight: 800; margin-bottom: .9rem; padding-bottom: .75rem;
    border-bottom: 1px solid var(--lb-border);
}
.lb-feature-list { list-style: none; padding: 0; margin: 0; }
.lb-feature-list li {
    position: relative; padding-left: 1.5rem; margin-bottom: .55rem;
    font-size: .9rem; color: var(--lb-text); line-height: 1.45;
}
.lb-feature-list li::before {
    content: '✓'; position: absolute; left: 0; top: -.05rem;
    color: var(--lb-turquoise-ink); font-weight: 800;
}

/* ── Étapes ── */
.lb-step { position: relative; padding-top: .5rem; height: 100%; }
.lb-step-num {
    display: block; font-size: 2.6rem; font-weight: 800; line-height: 1;
    color: transparent; -webkit-text-stroke: 1.5px var(--lb-turquoise);
    margin-bottom: .6rem;
}
.lb-step-title { font-size: 1.1rem; font-weight: 800; margin-bottom: .5rem; }
.lb-step-text { color: var(--lb-text); font-size: .95rem; margin: 0; }

/* ── Tarifs ── */
.lb-price {
    position: relative; height: 100%; text-align: center;
    background: var(--lb-white); border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius); padding: 2.25rem 1.5rem 1.75rem;
    transition: box-shadow .25s, transform .25s;
}
.lb-price.is-active {
    border-color: var(--lb-turquoise); border-width: 2px;
    box-shadow: 0 18px 44px -22px rgba(0,154,150,.55);
    transform: translateY(-4px);
}
.lb-price.is-done { opacity: .55; }
.lb-price-flag {
    position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%);
    background: var(--lb-turquoise-ink); color: var(--lb-white);
    font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    padding: .3rem .8rem; border-radius: 999px; white-space: nowrap;
}
.lb-price-flag-done { background: var(--lb-text-muted); }
.lb-price-value {
    font-size: 3.4rem; font-weight: 800; line-height: 1; color: var(--lb-marine);
    letter-spacing: -.03em;
}
.lb-price-value span { font-size: 1.5rem; margin-left: .1rem; }
.lb-price-label { font-weight: 700; margin: .75rem 0 .15rem; }
.lb-price-sub { color: var(--lb-text-muted); font-size: .85rem; margin: 0; }

.lb-price-included {
    background: var(--lb-gray-bg); border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm); padding: 1.75rem;
}
.lb-check { position: relative; padding-left: 1.5rem; font-size: .92rem; display: inline-block; }
.lb-check::before { content: '✓'; position: absolute; left: 0; color: var(--lb-turquoise-ink); font-weight: 800; }
.lb-price-note { font-size: .85rem; color: var(--lb-text-muted); }

/* ── FAQ ── */
.lb-faq .accordion-item {
    border: 1px solid var(--lb-border); border-radius: var(--lb-radius-sm) !important;
    margin-bottom: .6rem; overflow: hidden; background: var(--lb-white);
}
.lb-faq .accordion-button {
    font-weight: 700; color: var(--lb-marine); background: var(--lb-white);
    padding: 1.05rem 1.25rem;
}
.lb-faq .accordion-button:not(.collapsed) { background: var(--lb-turquoise-light); color: var(--lb-marine); }
.lb-faq .accordion-button:focus { box-shadow: none; border-color: transparent; }
.lb-faq .accordion-button::after { filter: none; }
.lb-faq .accordion-body { color: var(--lb-text); padding-top: .5rem; }

/* ── Formulaire de demande ── */
.lb-demande { background: var(--lb-white); }
.lb-form-legend {
    font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
    color: var(--lb-text-muted); padding-bottom: .5rem; margin-bottom: 1rem;
    border-bottom: 1px solid var(--lb-border);
}
.lb-req { color: var(--lb-danger); }
.lb-demande .form-control, .lb-demande .form-select { border-radius: 12px; padding: .6rem .85rem; }
.lb-demande .form-control:focus, .lb-demande .form-select:focus {
    border-color: var(--lb-turquoise); box-shadow: 0 0 0 .2rem rgba(0,154,150,.18);
}
/* champ piège : retiré du flux sans display:none, que certains robots détectent */
.lb-honeypot {
    position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* ── Apparition au défilement ──
   La classe n'est active que si le script a pu s'exécuter (html.lb-reveal-ready) :
   sans JavaScript, tout le contenu reste visible. */
.lb-reveal-ready .lb-reveal {
    opacity: 0; transform: translateY(14px);
    transition: opacity .55s ease-out, transform .55s ease-out;
}
.lb-reveal-ready .lb-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .lb-reveal-ready .lb-reveal { opacity: 1; transform: none; transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PROGRESSION DU PARCOURS DE CRÉATION — .lb-etapes
   ─────────────────────────────────────────────────────────────────────────────

   Cette classe manquait. Les trois pages du parcours l'utilisaient déjà, si bien que le
   navigateur affichait SA numérotation automatique de <ol> EN PLUS des pastilles du gabarit :
   « 1. 1 Vos informations ». Un doublon visible par tout visiteur.

   Le balisage reste un <ol> et non une suite de <div>, parce que c'est bien une liste ordonnée :
   un lecteur d'écran annonce « 1 sur 3 » sans qu'on ait à le lui souffler. On masque donc le
   marqueur natif plutôt que d'abandonner la sémantique.

   Trois états, et le « fait » se distingue du « en cours » par la FORME autant que par la
   couleur — une coche contre un chiffre. Se reposer sur la seule couleur laisserait un visiteur
   daltonien sans repère. */
.lb-etapes {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.75rem;
    /* Neutralise le marqueur natif : c'est LUI qui doublait les pastilles. */
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.lb-etapes li {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .93rem;
    font-weight: 600;
    color: var(--lb-text-muted);
    /* Aucun contenu généré : ni ::before ni counter, pour ne pas recréer le doublon. */
}

.lb-etapes li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    border: 2px solid var(--lb-border-strong);
    background: var(--lb-white);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1;
}

/* Étape en cours : pleine, contrastée, c'est là que le visiteur se trouve. */
.lb-etapes li.is-current {
    color: var(--lb-marine);
}

.lb-etapes li.is-current > span {
    border-color: var(--lb-marine);
    background: var(--lb-marine);
    color: var(--lb-white);
}

/* Étape franchie : la coche du gabarit suffit, la pastille reste discrète. */
.lb-etapes li.is-done {
    color: var(--lb-success);
}

.lb-etapes li.is-done > span {
    border-color: var(--lb-success);
    background: var(--lb-success);
    color: var(--lb-white);
}

/* Sous 480 px, une étape par ligne : trois libellés côte à côte se coupent au milieu d'un mot. */
@media (max-width: 479px) {
    .lb-etapes {
        gap: .4rem;
    }

    .lb-etapes li {
        flex: 0 0 100%;
    }
}

/* ── Page de remerciement ─────────────────────────────────────────────────── */
.lb-merci {
    text-align: center;
    margin-bottom: 1rem;
}

.lb-merci-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--lb-success-bg);
    color: var(--lb-success);
    font-size: 1.75rem;
    font-weight: 700;
}

/* Suite des opérations, sur la page de remerciement : une vraie liste ordonnée, dont on garde
   ici la numérotation native — il n'y a pas de pastille dans le gabarit, donc pas de doublon. */
.lb-suite {
    padding-left: 1.25rem;
    margin: 0 0 1.25rem;
}

.lb-suite li {
    margin-bottom: .75rem;
    line-height: 1.55;
}

.lb-suite li:last-child {
    margin-bottom: 0;
}

/* ── Récapitulatif avant paiement ─────────────────────────────────────────── */

/* L'adresse est mise en avant parce qu'elle est la seule information irréversible du parcours. */
.lb-recap-adresse {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--lb-border);
    border-left: 4px solid var(--lb-turquoise);
    border-radius: var(--lb-radius);
    background: var(--lb-gray-bg);
}

.lb-recap-adresse-label {
    margin: 0 0 .25rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lb-text-muted);
}

.lb-recap-adresse-url {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--lb-marine);
    /* Un sous-domaine long ne doit pas déborder sur mobile. */
    overflow-wrap: anywhere;
}

.lb-recap-adresse-url span {
    color: var(--lb-text-muted);
    font-weight: 600;
}

.lb-recap-adresse-note {
    margin: .6rem 0 0;
    font-size: .85rem;
    color: var(--lb-text-muted);
}

.lb-recap-table th {
    font-weight: 600;
    color: var(--lb-text);
}

.lb-recap-table td,
.lb-recap-table th {
    vertical-align: top;
}

/* Le délai de mise en ligne : annoncé AVANT le paiement, donc visuellement impossible à rater. */
.lb-recap-delai {
    padding: 1.1rem 1.35rem;
    border: 1px solid var(--lb-warning);
    border-radius: var(--lb-radius);
    background: var(--lb-warning-bg);
}

.lb-recap-delai h2 {
    margin-bottom: .4rem;
}

/* ── Choix de la forme juridique, dans le tunnel ──────────────────────────────
   Deux boutons radio présentés comme des cartes cliquables, pour deux raisons.

   La zone cliquable d'abord : un radio nu fait viser un cercle de 16 px, et le
   commerçant remplit souvent ce formulaire au téléphone. Toute la carte répond.

   L'égalité de traitement ensuite : les deux options ont le même poids visuel,
   parce qu'aucune n'est présélectionnée. Une option qui « ressemble au défaut »
   se ferait choisir par habitude, et une société se retrouverait devant un
   formulaire Stripe qui ne lui correspond pas — après le paiement. */
.lb-choix-forme {
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius);
    padding: .85rem 1rem .85rem 2.4rem;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.lb-choix-forme:hover {
    border-color: var(--lb-turquoise-ink);
    background: var(--lb-turquoise-light);
}

.lb-choix-forme .form-check-input {
    margin-left: -1.55rem;
    margin-top: .3rem;
}

.lb-choix-forme .form-check-label {
    cursor: pointer;
    display: block;
}

/* L'option retenue est visible SANS s'appuyer sur la seule couleur : la bordure
   change d'épaisseur autant que de teinte. Un daltonien voit la sélection. */
.lb-choix-forme:has(.form-check-input:checked) {
    border-color: var(--lb-turquoise-ink);
    box-shadow: inset 0 0 0 1px var(--lb-turquoise-ink);
    background: var(--lb-turquoise-light);
}

/* Le focus clavier reste visible sur la carte entière, et non sur le seul rond. */
.lb-choix-forme:has(.form-check-input:focus-visible) {
    outline: 2px solid var(--lb-marine);
    outline-offset: 2px;
}