:root {
    --kb-orange: #f76f0d;
    /* Variante assombrie du orange de marque, réservée au texte blanc sur fond dégradé
       (.btn-kb-gradient) : #f76f0d donne un contraste ≈2.9:1 avec du blanc (sous le seuil AA
       4.5:1) — voir audit UX-01. Ne remplace pas --kb-orange ailleurs (icônes/texte sur fond
       clair, qui n'ont pas ce problème). */
    --kb-orange-cta: #b34a06;
    --kb-green: #1ea114;
    --kb-purple: #924cd2;
    --kb-navy: #14213d;
    --kb-danger: #dc3545;
    /* Fond du site public, volontairement plus chaud que le --kb-bg (#f4f6fb, bleu-gris) de
       l'admin (resources/views/layouts/admin.blade.php) : deux zones indépendantes, jamais
       chargées ensemble, avec une identité visuelle différenciée par choix (audit UX-10). */
    --kb-bg: #fbfaf7;
    --kb-border: #e7eaf1;
    /* Assombri depuis #6b7280 : sur --kb-muted-bg, l'ancienne valeur ne tenait qu'à ≈4.47:1,
       sous le seuil AA de 4.5:1 (audit UX-06). */
    --kb-muted: #5b6472;
    --kb-muted-bg: #f4f6fb;
    --kb-radius: 16px;
    --kb-shadow-soft: 0 12px 40px -12px rgba(20, 33, 61, .15);
    --kb-shadow-glow: 0 20px 60px -15px rgba(247, 111, 13, .45);
    --font-display: 'Clash Display', system-ui, sans-serif;
    --font-sans: 'Inter', system-ui, sans-serif;
}

/* Réserve toujours la place de la scrollbar verticale, même sur les pages/écrans assez courts
   pour ne pas en avoir besoin : sans ça, passer d'une page qui scrolle à une page qui ne scrolle
   pas (ou charger des images qui allongent la page après le premier rendu) fait apparaître/
   disparaître la scrollbar de Windows (~17px, non-overlay), ce qui recentre tout le contenu à
   max-width et donne l'impression que le nav, les bordures et le footer "bougent" pendant la
   navigation. `scrollbar-gutter` est sans rapport avec `overflow-x/-y` (contrairement à
   `overflow-y: scroll`) : elle ne déclenche donc pas le couplage de valeurs calculées qui casse
   position:sticky évoqué juste en dessous. */
html { scrollbar-gutter: stable; }

/* À poser sur une <section> (jamais sur body/html : overflow-x sur le root force overflow-y à
   'auto' d'après le spec CSS Overflow, ce qui casse position:sticky ailleurs sur le site — audit
   mobile) contenant des éléments décoratifs volontairement plus larges qu'elle (anneaux, mockup,
   chips flottants) pour empêcher leur débordement de créer un scroll horizontal de page. */
.kb-clip-x { overflow-x: hidden; }

body.kb-site {
    background: var(--kb-bg);
    color: var(--kb-navy);
    font-family: var(--font-sans);
}

.kb-site h1, .kb-site h2, .kb-site h3, .kb-site h4 {
    font-family: var(--font-display);
}

.kb-site .text-muted-soft { color: var(--kb-muted); }
.kb-site .min-w-0 { min-width: 0; }

.text-brand-gradient {
    background: linear-gradient(135deg, var(--kb-orange), var(--kb-purple));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bg-brand-gradient { background: linear-gradient(135deg, var(--kb-orange), var(--kb-purple)); }

.bg-hero-gradient {
    background:
        radial-gradient(circle at 20% 20%, rgba(247, 111, 13, .14), transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(30, 161, 20, .12), transparent 45%),
        radial-gradient(circle at 40% 90%, rgba(146, 76, 210, .12), transparent 45%);
}

.kb-shadow-soft { box-shadow: var(--kb-shadow-soft); }
.kb-shadow-glow { box-shadow: var(--kb-shadow-glow); }

/* ---------- Bandeau de coordonnées (au-dessus du menu principal) ---------- */
.kb-top-bar { background: var(--kb-navy); padding: .45rem 0; }
.kb-top-bar-info { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.kb-top-bar-link {
    display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
    color: rgba(255, 255, 255, .8); font-size: .74rem; text-decoration: none;
    transition: color .2s ease;
}
a.kb-top-bar-link:hover { color: #fff; }
.kb-top-bar-link i { font-size: .82rem; color: var(--kb-orange); flex-shrink: 0; }
.kb-top-bar-social { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.kb-top-bar-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: .78rem;
    background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .75);
    transition: background-color .2s ease, color .2s ease;
}
.kb-top-bar-social a:hover { background: var(--kb-orange); color: #fff; }
@media (max-width: 575.98px) {
    .kb-top-bar-info { gap: .75rem; overflow: hidden; }
    .kb-top-bar-link span { overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Nav ---------- */
.kb-site-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 1.1rem 0;
    transition: padding .35s cubic-bezier(.22, 1, .36, 1);
}

.kb-nav-shell {
    position: relative;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .25rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    box-shadow: none;
    transition: padding .35s cubic-bezier(.22, 1, .36, 1), background-color .35s ease,
        border-color .35s ease, box-shadow .35s ease;
}
.kb-site-nav.is-scrolled { padding: .55rem 0; }
.kb-site-nav.is-scrolled .kb-nav-shell {
    /* Capsule flottante translucide au scroll : signature des nav premium (Linear/Vercel), tout
       en gardant la teinte chaude --kb-bg de l'identité du site public. */
    background: rgba(251, 250, 247, .78);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-color: rgba(20, 33, 61, .07);
    box-shadow: 0 10px 32px -18px rgba(20, 33, 61, .28);
    padding: .4rem .5rem .4rem .9rem;
}
.kb-site-nav .kb-brand-logo { height: 78px; width: 78px; }
.kb-site-nav.is-scrolled .kb-brand-logo { height: 58px; width: 58px; }
.kb-site-nav.is-scrolled .kb-brand-word { font-size: 1.15rem; }

.kb-brand-logo {
    height: 60px; width: 60px; border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 2px rgba(251, 250, 247, 1), 0 0 0 4px rgba(247, 111, 13, .35);
    transition: box-shadow .25s ease, transform .25s ease, height .35s ease, width .35s ease;
}
.navbar-brand:hover .kb-brand-logo { transform: rotate(-8deg) scale(1.05); box-shadow: 0 0 0 2px rgba(251, 250, 247, 1), 0 0 0 4px rgba(247, 111, 13, .6); }
.kb-brand-word {
    font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: -.01em;
    background: linear-gradient(120deg, var(--kb-navy) 55%, var(--kb-orange-cta));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    transition: font-size .35s ease;
}

/* Links */
.kb-nav-links .nav-link {
    position: relative;
    color: var(--kb-muted);
    font-weight: 500;
    font-size: .93rem;
    padding: .5rem .9rem !important;
    border-radius: 999px;
    transition: color .2s ease, background-color .2s ease;
}
.kb-nav-links .nav-link::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: .28rem;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(135deg, var(--kb-orange), var(--kb-purple));
    transition: width .25s cubic-bezier(.22, 1, .36, 1);
}
.kb-nav-links .nav-link:hover { color: var(--kb-navy); background: rgba(20, 33, 61, .05); }
.kb-nav-links .nav-link:hover:not(.active)::before { width: 50%; }
.kb-nav-links .nav-link.active {
    color: var(--kb-navy);
    font-weight: 600;
    background: linear-gradient(135deg, rgba(247, 111, 13, .12), rgba(146, 76, 210, .12));
}

/* Séparateur discret entre les liens de nav et la zone compte/CTA. */
.kb-nav-actions { transition: border-color .35s ease; }
.kb-nav-actions .btn-kb-outline, .kb-nav-actions .btn-kb-gradient { white-space: nowrap; }
@media (min-width: 992px) {
    .kb-nav-actions { padding-left: 1rem; margin-left: .25rem; border-left: 1px solid var(--kb-border); }
}

/* Custom animated burger */
.kb-nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px; height: 40px;
    border: 1px solid var(--kb-border);
    border-radius: 50%;
    background: #fff;
    transition: background-color .2s ease, border-color .2s ease;
}
.kb-nav-burger:hover { background: var(--kb-muted-bg); }
.kb-nav-burger[aria-expanded="true"] { background: var(--kb-muted-bg); border-color: rgba(247, 111, 13, .35); }
.kb-nav-burger span {
    width: 18px; height: 2px; border-radius: 2px;
    background: var(--kb-navy);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, width .2s ease;
}
.kb-nav-burger:not(.collapsed) span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kb-nav-burger:not(.collapsed) span:nth-child(2) { opacity: 0; }
.kb-nav-burger:not(.collapsed) span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Focus clavier lisible sur les contrôles en forme de pilule/cercle du header. */
.kb-nav-links .nav-link:focus-visible,
.kb-nav-burger:focus-visible,
.navbar-brand:focus-visible,
.kb-user-chip:focus-visible,
.kb-notif-bell:focus-visible {
    outline: 2px solid var(--kb-orange);
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    .kb-nav-burger { display: inline-flex; }
    .navbar-collapse {
        margin-top: .6rem;
        padding: .6rem;
        background: rgba(251, 250, 247, .96);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(20, 33, 61, .08);
        border-radius: 20px;
        box-shadow: 0 16px 36px -18px rgba(20, 33, 61, .3);
        max-width: 100%; overflow-x: hidden;
    }
    .kb-nav-links .nav-link { padding: .75rem 1rem !important; }
    .kb-nav-links .nav-link::before { display: none; }
    .kb-nav-actions {
        border-left: none; padding-left: 0; margin-left: 0;
        border-top: 1px solid var(--kb-border); margin-top: .4rem; padding-top: .85rem;
        flex-wrap: wrap;
    }
    .kb-nav-actions:not(:has(.kb-user-chip)) { flex-direction: column; align-items: stretch; }
    .kb-nav-actions:not(:has(.kb-user-chip)) .btn-kb-outline,
    .kb-nav-actions:not(:has(.kb-user-chip)) .btn-kb-gradient { width: 100%; justify-content: center; }

    /* Apparition en cascade des entrées du menu mobile, en plus de l'ouverture Bootstrap. */
    .navbar-collapse.show .nav-item,
    .navbar-collapse.show .kb-nav-actions > * {
        animation: kb-nav-item-in .35s cubic-bezier(.22, 1, .36, 1) both;
    }
    .navbar-collapse.show .nav-item:nth-child(1) { animation-delay: .03s; }
    .navbar-collapse.show .nav-item:nth-child(2) { animation-delay: .07s; }
    .navbar-collapse.show .nav-item:nth-child(3) { animation-delay: .11s; }
    .navbar-collapse.show .nav-item:nth-child(4) { animation-delay: .15s; }
    .navbar-collapse.show .nav-item:nth-child(5) { animation-delay: .19s; }
    .navbar-collapse.show .nav-item:nth-child(6) { animation-delay: .23s; }
    .navbar-collapse.show .nav-item:nth-child(7) { animation-delay: .27s; }
    .navbar-collapse.show .kb-nav-actions > *:nth-child(1) { animation-delay: .3s; }
    .navbar-collapse.show .kb-nav-actions > *:nth-child(2) { animation-delay: .34s; }
}

@keyframes kb-nav-item-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Recherche du header ---------- */
.kb-nav-search {
    position: relative;
    width: 100%;
    margin: .35rem 0;
}
@media (min-width: 992px) {
    .kb-nav-search { flex: 1 1 380px; max-width: 560px; width: auto; margin: 0 1rem; }
}

.kb-search-form {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border: 1px solid var(--kb-border);
    border-radius: 999px;
    padding: .3rem .3rem .3rem 1rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.kb-search-form:focus-within {
    border-color: rgba(247, 111, 13, .45);
    box-shadow: 0 0 0 4px rgba(247, 111, 13, .12);
}
.kb-search-icon { color: var(--kb-muted); font-size: .95rem; flex-shrink: 0; }
.kb-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: .9rem;
    color: var(--kb-navy);
    padding: .5rem 0;
}
.kb-search-input::placeholder { color: var(--kb-muted); }
/* Masque la croix native des champs type="search" (Chrome/Edge) : on gère notre propre bouton. */
.kb-search-input::-webkit-search-cancel-button { display: none; }

.kb-search-clear {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border: none;
    border-radius: 50%;
    background: var(--kb-muted-bg);
    color: var(--kb-muted);
    font-size: .65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease;
}
.kb-search-clear:hover { background: var(--kb-border); color: var(--kb-navy); }

.kb-search-submit {
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    background: var(--kb-orange-cta);
    color: #fff;
    font-weight: 600;
    font-size: .85rem;
    white-space: nowrap;
    padding: .55rem 1.2rem;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.kb-search-submit:hover { transform: translateY(-1px); box-shadow: var(--kb-shadow-glow); }

.kb-search-panel {
    position: absolute;
    top: calc(100% + .6rem);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--kb-border);
    border-radius: 20px;
    box-shadow: var(--kb-shadow-soft);
    z-index: 1040;
    max-height: 70vh;
    overflow-y: auto;
}
.kb-search-panel[hidden] { display: none; }
.kb-search-panel-inner { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .9rem; }

.kb-search-section-title {
    margin: 0 0 .5rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--kb-muted);
}

.kb-search-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.kb-search-chip {
    border: 1px solid var(--kb-border);
    background: var(--kb-muted-bg);
    color: var(--kb-navy);
    font-size: .82rem;
    font-weight: 500;
    padding: .4rem .85rem;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.kb-search-chip:hover { background: #fff; border-color: rgba(247, 111, 13, .4); color: var(--kb-navy); transform: translateY(-1px); }

.kb-search-results { display: flex; flex-direction: column; gap: .3rem; }
.kb-search-result {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .55rem;
    border-radius: 12px;
    text-decoration: none;
    color: var(--kb-navy);
    transition: background-color .15s ease;
}
.kb-search-result:hover { background: var(--kb-muted-bg); }
.kb-search-result-media {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--kb-muted-bg);
    color: var(--kb-muted);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    font-size: 1rem;
}
.kb-search-result-media img { width: 100%; height: 100%; object-fit: cover; }
.kb-search-result-body { min-width: 0; display: flex; flex-direction: column; }
.kb-search-result-name {
    font-size: .87rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kb-search-result-meta { font-size: .76rem; color: var(--kb-muted); }

.kb-search-empty { margin: 0; padding: .4rem 0; font-size: .85rem; color: var(--kb-muted); text-align: center; }

@media (max-width: 991.98px) {
    .kb-search-submit { padding: .55rem .9rem; }
}

.btn-kb-gradient, .btn-kb-outline, .btn-kb-danger {
    text-decoration: none;
}

.btn-kb-gradient {
    background: var(--kb-orange-cta);
    color: #fff; border: none; border-radius: 999px; padding: .65rem 1.4rem; font-weight: 500;
    box-shadow: var(--kb-shadow-glow);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
    display: inline-flex; align-items: center; gap: .5rem;
}
.btn-kb-gradient:hover {
    color: #fff; background: var(--kb-orange); text-decoration: none;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 16px 34px -12px rgba(247, 111, 13, .55);
}
.btn-kb-gradient:active { transform: translateY(0) scale(.98); box-shadow: var(--kb-shadow-glow); }

.btn-kb-outline {
    border: 1px solid var(--kb-border); background: #fff; border-radius: 999px; padding: .65rem 1.4rem;
    font-weight: 500; color: var(--kb-navy);
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    display: inline-flex; align-items: center; gap: .5rem;
}
.btn-kb-outline:hover {
    background: var(--kb-muted-bg); color: var(--kb-navy); text-decoration: none;
    border-color: rgba(247, 111, 13, .3); box-shadow: var(--kb-shadow-soft); transform: translateY(-2px);
}
.btn-kb-outline:active { transform: translateY(0); box-shadow: none; }

.btn-kb-outline--on-dark {
    border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); color: #fff;
}
.btn-kb-outline--on-dark:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .1); color: #fff; box-shadow: none; }

.btn-kb-danger {
    background: var(--kb-danger); color: #fff; border: none; border-radius: 999px; padding: .6rem 1.3rem;
    font-weight: 500; transition: background-color .2s ease, transform .2s ease;
    display: inline-flex; align-items: center; gap: .5rem;
}
.btn-kb-danger:hover { background: #c62836; color: #fff; text-decoration: none; transform: translateY(-2px) scale(1.02); }
.btn-kb-danger:active { transform: translateY(0) scale(.98); }

/* ---------- Cards ---------- */
.kb-site-card {
    background: #fff; border: 1px solid var(--kb-border); border-radius: var(--kb-radius);
    box-shadow: var(--kb-shadow-soft); transition: box-shadow .25s ease, transform .25s ease;
}
.kb-site-card--hover:hover { box-shadow: var(--kb-shadow-glow); transform: translateY(-6px); }

.kb-space-card {
    position: relative; overflow: hidden; isolation: isolate;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.kb-space-card--orange { --kb-accent: var(--kb-orange); --kb-accent-soft: rgba(247, 111, 13, .14); }
.kb-space-card--purple { --kb-accent: var(--kb-purple); --kb-accent-soft: rgba(146, 76, 210, .14); }
.kb-space-card--green { --kb-accent: var(--kb-green); --kb-accent-soft: rgba(30, 161, 20, .14); }

.kb-space-card::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: var(--kb-accent); transform: scaleX(0); transform-origin: left;
    transition: transform .35s ease;
}
.kb-space-card::after {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    top: -4.5rem; right: -4.5rem; width: 13rem; height: 13rem; border-radius: 50%;
    background: var(--kb-accent); opacity: .07; filter: blur(30px);
    transition: opacity .3s ease, transform .35s ease;
}
.kb-space-card:hover { transform: translateY(-8px); border-color: var(--kb-accent); box-shadow: 0 26px 44px -22px var(--kb-accent); }
.kb-space-card:hover::before { transform: scaleX(1); }
.kb-space-card:hover::after { opacity: .14; transform: scale(1.12); }

.kb-space-card-number {
    position: absolute; z-index: -1; top: .75rem; right: 1.25rem;
    font-weight: 800; font-size: 3.25rem; line-height: 1; letter-spacing: -.02em;
    color: var(--kb-accent-soft); user-select: none; pointer-events: none;
}

.kb-space-card-icon { position: relative; transition: transform .35s ease, box-shadow .35s ease; }
.kb-space-card:hover .kb-space-card-icon { transform: scale(1.08) rotate(-4deg); box-shadow: 0 12px 22px -10px var(--kb-accent); }

.kb-space-card h3 { display: flex; align-items: center; gap: .55rem; letter-spacing: -.01em; }
.kb-space-card h3::before {
    content: ''; flex-shrink: 0; width: .55rem; height: .55rem; border-radius: 3px;
    background: var(--kb-accent); transition: transform .3s ease;
}
.kb-space-card:hover h3::before { transform: rotate(90deg); }

.kb-space-card ul li { transition: transform .2s ease; }
.kb-space-card ul li:hover { transform: translateX(3px); }
.kb-space-card ul li span { transition: color .2s ease; }
.kb-space-card ul li:hover span { color: var(--kb-navy); }
.kb-space-card ul li i.bi-check-lg {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 1.3rem; height: 1.3rem; margin-top: .05rem; border-radius: 50%; font-size: .7rem;
    background: var(--kb-accent-soft); color: var(--kb-accent);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.kb-space-card ul li:hover i.bi-check-lg { background: var(--kb-accent); color: #fff; transform: scale(1.12); }

.kb-space-intro-row { display: flex; align-items: flex-start; justify-content: center; gap: 2.25rem; margin-bottom: 1.5rem; }
.kb-space-intro-item { display: flex; flex-direction: column; align-items: center; gap: .65rem; }
.kb-space-intro-item-label { font-size: .85rem; font-weight: 600; color: var(--kb-navy); }
.kb-space-intro-avatar {
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    width: 5.5rem; height: 5.5rem; border-radius: 50%; color: #fff;
    border: 4px solid #fff; box-shadow: var(--kb-shadow-soft);
    transition: transform .25s ease, box-shadow .25s ease;
}
.kb-space-intro-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kb-space-intro-item:hover .kb-space-intro-avatar { transform: translateY(-4px); box-shadow: var(--kb-shadow-glow); }
.kb-space-intro-avatar--orange { background: var(--kb-orange); }
.kb-space-intro-avatar--purple { background: var(--kb-purple); }
.kb-space-intro-avatar--green { background: var(--kb-green); }
@media (max-width: 575.98px) {
    .kb-space-intro-row { gap: 1.25rem; }
    .kb-space-intro-avatar { width: 4.25rem; height: 4.25rem; border-width: 3px; }
    .kb-space-intro-item-label { font-size: .75rem; }
}

.kb-live-badge {
    display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
    padding: .4rem .9rem; border-radius: 999px; background: rgba(30, 161, 20, .1);
    color: var(--kb-green); font-size: .78rem; font-weight: 600;
}

.kb-title-accent { position: relative; display: inline-block; padding-bottom: 1rem; letter-spacing: -.01em; }
.kb-title-accent::after {
    content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 3.5rem; height: 4px; border-radius: 999px;
    background: linear-gradient(90deg, var(--kb-orange), var(--kb-purple), var(--kb-green));
    box-shadow: 0 2px 10px -2px rgba(146, 76, 210, .5);
}

.kb-space-cta { transition: background-color .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; }
.kb-space-cta:hover { background: var(--kb-orange-cta); border-color: var(--kb-orange-cta); color: #fff; }
.kb-space-cta:hover i { transform: translateX(2px); }
.kb-space-cta i { transition: transform .2s ease; }

.kb-icon-badge { width: 48px; height: 48px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.kb-icon-badge--orange { background: rgba(247, 111, 13, .15); color: var(--kb-orange); }
.kb-icon-badge--green { background: rgba(30, 161, 20, .15); color: var(--kb-green); }
.kb-icon-badge--purple { background: rgba(146, 76, 210, .15); color: var(--kb-purple); }
.kb-icon-badge--solid-orange { background: var(--kb-orange); color: #fff; }
.kb-icon-badge--solid-green { background: var(--kb-green); color: #fff; }
.kb-icon-badge--solid-purple { background: var(--kb-purple); color: #fff; }

.kb-dot { display: inline-block; height: .75rem; width: .75rem; border-radius: 50%; }
.kb-dot--orange { background: var(--kb-orange); }
.kb-dot--green { background: var(--kb-green); }
.kb-dot--purple { background: var(--kb-purple); }

.kb-text--orange { color: var(--kb-orange) !important; }
.kb-text--green { color: var(--kb-green) !important; }
.kb-text--purple { color: var(--kb-purple) !important; }

.kb-product-card {
    color: var(--kb-navy) !important; box-shadow: 0 14px 32px -10px rgba(20, 33, 61, .32) !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.kb-product-card:hover { transform: translateY(-4px); border-color: rgba(247, 111, 13, .3); box-shadow: var(--kb-shadow-glow); color: var(--kb-navy); }
.kb-product-card-media { position: relative; aspect-ratio: 1 / 1; background: var(--kb-muted-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kb-product-card-media img { width: 100%; height: 100%; object-fit: cover; }
.kb-product-card-media i { font-size: 1.75rem; color: var(--kb-border); }

/* Grilles de produits (accueil, boutique, produits liés) : carrousel glissable sur mobile au lieu
   de la grille qui s'empile — Bootstrap affiche déjà `.row` en flex, on bascule juste le wrap en
   défilement horizontal avec un léger "peek" de la carte suivante. */
@media (max-width: 767.98px) {
    .kb-product-grid {
        flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch; padding-bottom: .85rem; margin-bottom: -.35rem;
        scrollbar-width: thin;
    }
    .kb-product-grid > [class*="col-"] { flex: 0 0 auto; width: 44%; scroll-snap-align: start; }
    .kb-product-grid.kb-product-grid--wide > [class*="col-"] { width: 78%; }
}
@media (max-width: 400px) {
    .kb-product-grid > [class*="col-"] { width: 58%; }
    .kb-product-grid.kb-product-grid--wide > [class*="col-"] { width: 86%; }
}

.kb-product-sticker {
    position: absolute; top: .6rem; left: .6rem; z-index: 2;
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .32rem .6rem; border-radius: 999px;
    background: linear-gradient(135deg, var(--kb-orange), var(--kb-purple));
    color: #fff; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    box-shadow: 0 4px 12px -3px rgba(146, 76, 210, .55);
    animation: kb-sticker-pulse 2.4s ease-in-out infinite;
}
.kb-product-sticker i { font-size: .72rem; }
@keyframes kb-sticker-pulse {
    0%, 100% { box-shadow: 0 4px 12px -3px rgba(146, 76, 210, .55); }
    50% { box-shadow: 0 4px 16px -1px rgba(247, 111, 13, .65); }
}

/* ---------- Catégories (accueil marketplace) ---------- */
/* Mobile-first : grille 3 colonnes (toutes les catégories visibles d'un coup, pas de scroll
   horizontal à deviner) — remplace l'ancienne rangée à défilement latéral. */
.kb-category-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem;
}
.kb-category-chip {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: .9rem .4rem; text-align: center;
    background: #fff; border: 1px solid var(--kb-border); border-radius: var(--kb-radius);
    text-decoration: none; color: var(--kb-navy);
    box-shadow: var(--kb-shadow-soft);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kb-category-chip:hover { transform: translateY(-4px); box-shadow: var(--kb-shadow-glow); border-color: rgba(247, 111, 13, .3); color: var(--kb-navy); }
.kb-category-chip:focus-visible { outline: 2px solid var(--kb-orange); outline-offset: 2px; }
.kb-category-chip.is-active {
    border-color: var(--kb-orange); background: rgba(247, 111, 13, .07);
    box-shadow: 0 10px 24px -12px rgba(247, 111, 13, .4);
}
.kb-category-chip.is-active .kb-category-chip-label { color: var(--kb-orange-cta); }
.kb-category-chip-icon { width: 3.5rem; height: 3.5rem; border-radius: 14px; font-size: 1.4rem; overflow: hidden; }
.kb-category-chip-icon img { width: 100%; height: 100%; object-fit: cover; }
.kb-category-chip-label { font-size: .76rem; font-weight: 600; line-height: 1.2; }
.kb-category-chip-count { font-size: .66rem; color: var(--kb-muted); }

.kb-category-chip--soon { cursor: default; opacity: .55; box-shadow: none; }
.kb-category-chip--soon:hover { transform: none; box-shadow: none; border-color: var(--kb-border); }
.kb-category-chip--soon .kb-category-chip-icon { filter: grayscale(.4); }
.kb-category-chip-count--soon {
    font-weight: 600; color: var(--kb-muted); text-transform: uppercase; font-size: .6rem; letter-spacing: .04em;
}

@media (min-width: 576px) {
    .kb-category-row { grid-template-columns: repeat(4, 1fr); gap: .75rem; }
}
@media (min-width: 768px) {
    .kb-category-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }
    .kb-category-chip {
        flex-direction: column; width: 8.25rem; flex-shrink: 0; padding: 1.1rem .75rem;
    }
    .kb-category-chip-icon { width: 4.25rem; height: 4.25rem; border-radius: 16px; font-size: 1.6rem; }
    .kb-category-chip-label { font-size: .85rem; }
    .kb-category-chip-count { font-size: .72rem; }
}

/* ---------- Fiche produit (PDP) ---------- */
.kb-breadcrumb {
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: .4rem;
    max-width: 100%;
    background: #fff;
    border: 1px solid var(--kb-border);
    border-radius: 999px;
    padding: .55rem 1.15rem;
    font-size: .82rem;
    box-shadow: var(--kb-shadow-soft);
}
.kb-breadcrumb-link {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--kb-muted); font-weight: 500; text-decoration: none;
    transition: color .2s ease;
}
.kb-breadcrumb-link:hover { color: var(--kb-orange-cta); }
.kb-breadcrumb-link i { font-size: .8rem; color: var(--kb-orange-cta); }
.kb-breadcrumb-sep { font-size: .6rem; color: var(--kb-border); }
.kb-breadcrumb-current { color: var(--kb-navy); font-weight: 600; max-width: 20rem; }
@media (max-width: 575.98px) {
    .kb-breadcrumb { padding: .45rem .9rem; font-size: .78rem; }
    .kb-breadcrumb-current { max-width: 9rem; }
}

.kb-pdp-gallery-main {
    aspect-ratio: 1 / 1;
    background: var(--kb-muted-bg);
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.kb-pdp-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.kb-pdp-gallery-main i { font-size: 3rem; color: var(--kb-border); }

.kb-pdp-thumbs { display: flex; gap: .6rem; margin-top: .75rem; flex-wrap: wrap; }
.kb-pdp-thumb {
    width: 4rem; height: 4rem; border-radius: 10px; overflow: hidden; padding: 0;
    border: 2px solid transparent; background: var(--kb-muted-bg); cursor: pointer;
    transition: border-color .15s ease;
}
.kb-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.kb-pdp-thumb.is-active { border-color: var(--kb-orange-cta); }

.kb-share-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
    border-top: 1px solid var(--kb-border);
}
.kb-share-label { font-size: .82rem; font-weight: 600; color: var(--kb-muted); margin-right: .2rem; }
.kb-share-btn {
    width: 2.4rem; height: 2.4rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--kb-border); background: #fff; color: var(--kb-muted);
    font-size: 1.05rem;
    transition: transform .15s ease, border-color .15s ease, color .15s ease, background-color .15s ease;
}
.kb-share-btn:hover { transform: translateY(-2px); }
.kb-share-btn--facebook:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.kb-share-btn--twitter:hover { background: #000; border-color: #000; color: #fff; }
.kb-share-btn--whatsapp:hover { background: #25d366; border-color: #25d366; color: #fff; }

.kb-rating { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.kb-stars { position: relative; display: inline-flex; font-size: .9rem; line-height: 1; white-space: nowrap; color: var(--kb-border); }
.kb-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: #f5a623; }

.kb-star-picker { display: inline-flex; gap: .3rem; }
.kb-star-picker-btn {
    border: none; background: none; padding: 0; font-size: 1.6rem; line-height: 1;
    color: var(--kb-border); cursor: pointer;
    transition: color .15s ease, transform .15s ease;
}
.kb-star-picker-btn:hover { transform: scale(1.1); }
.kb-star-picker-btn.is-active { color: #f5a623; }

.kb-star-picker--sm { align-items: center; flex-wrap: wrap; gap: .5rem; }
.kb-star-picker--sm .kb-star-picker-btn { font-size: 1.15rem; }
.kb-star-picker-submit {
    border: none; border-radius: 999px; background: var(--kb-muted-bg); color: var(--kb-navy);
    font-size: .75rem; font-weight: 600; padding: .3rem .7rem; margin-left: .3rem;
    transition: background-color .15s ease;
}
.kb-star-picker-submit:hover { background: var(--kb-border); }

/* ---------- Filter bar (boutiques) ---------- */
.kb-filter-bar { background: #fff; border: 1px solid var(--kb-border); border-radius: var(--kb-radius); padding: 1rem; box-shadow: var(--kb-shadow-soft); }

/* ---------- Category sidebar (boutiques) ---------- */
.kb-boutique-layout { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.kb-boutique-main { min-width: 0; flex: 1 1 auto; width: 100%; }

.kb-category-sidebar { width: 100%; flex: 0 0 auto; }
.kb-category-sidebar__inner {
    overflow-x: auto; overflow-y: hidden; -ms-overflow-style: none; scrollbar-width: none;
}
.kb-category-sidebar__inner::-webkit-scrollbar { display: none; }
.kb-category-sidebar__title {
    position: relative;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--kb-navy); margin: 0 0 1rem; padding-bottom: .6rem;
}
.kb-category-sidebar__title::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 1.75rem; border-radius: 999px;
    background: linear-gradient(90deg, var(--kb-orange), var(--kb-purple));
}

.kb-category-list { display: flex; gap: .5rem; }
.kb-category-item {
    display: flex; align-items: center; gap: .6rem; flex: 0 0 auto;
    padding: .4rem .9rem .4rem .4rem; border-radius: 999px; border: 1px solid var(--kb-border); background: #fff;
    color: var(--kb-navy); text-decoration: none; font-size: .85rem; font-weight: 600;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
    white-space: nowrap;
}
.kb-category-item:hover { border-color: transparent; color: var(--kb-orange); box-shadow: var(--kb-shadow-soft); transform: translateY(-1px); }
.kb-category-item:hover .kb-category-item__icon { background: #fff; color: var(--kb-orange); box-shadow: 0 4px 10px -3px rgba(247, 111, 13, .35); }
.kb-category-item.is-active {
    border-color: transparent; color: #fff;
    background: var(--kb-orange);
    box-shadow: 0 10px 20px -10px rgba(247, 111, 13, .55);
}
.kb-category-item.is-active .kb-category-item__icon { background: rgba(255, 255, 255, .22); color: #fff; box-shadow: none; }
.kb-category-item__icon {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 2.15rem; height: 2.15rem; border-radius: 50%; overflow: hidden;
    background: var(--kb-muted-bg); color: var(--kb-navy); font-size: 1rem; line-height: 1;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.kb-category-item__icon img { width: 60%; height: 60%; object-fit: contain; }
.kb-category-item__label { line-height: 1.2; }
.kb-category-item__count {
    margin-left: auto;
    font-size: .68rem; font-weight: 700; color: var(--kb-navy); background: var(--kb-muted-bg);
    border-radius: 999px; padding: .1rem .45rem; min-width: 1.5rem; text-align: center;
}
.kb-category-item.is-active .kb-category-item__count { color: #fff; background: rgba(255, 255, 255, .22); }

@media (min-width: 768px) {
    .kb-boutique-layout { flex-direction: row; align-items: flex-start; }
    .kb-category-sidebar {
        width: 16rem; flex: 0 0 16rem; position: sticky; top: 5.5rem;
        background: #fff; border: 1px solid var(--kb-border); border-radius: 20px;
        padding: 1.25rem; box-shadow: var(--kb-shadow-soft);
    }
    .kb-category-sidebar__inner { overflow: visible; }
    .kb-category-list { flex-direction: column; gap: .25rem; }
    .kb-category-item { width: 100%; padding: .45rem .75rem .45rem .45rem; border-radius: 14px; }
    .kb-category-item:hover { transform: translateX(3px); }
    .kb-category-item.is-active { transform: translateX(0); }
    .kb-category-item__label { flex: 1 1 auto; }
}

/* ---------- Shop card ---------- */
.kb-shop-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

.kb-shop-card-cover { position: relative; aspect-ratio: 16 / 8; background: var(--kb-muted-bg); overflow: hidden; }
.kb-shop-card-cover-grid { display: grid; gap: 2px; height: 100%; }
.kb-shop-card-cover-grid--1,
.kb-shop-card-cover-grid--2 { grid-auto-flow: column; grid-auto-columns: 1fr; }
.kb-shop-card-cover-grid--3 { grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; }
.kb-shop-card-cover-grid--3 .kb-shop-card-cover-tile:first-child { grid-row: 1 / 3; }

.kb-shop-card-cover-tile {
    position: relative; overflow: hidden;
    background: var(--kb-muted-bg); color: var(--kb-border);
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.kb-shop-card-cover-tile img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.kb-site-card--hover:hover .kb-shop-card-cover-tile img { transform: scale(1.06); }

.kb-shop-card-cover-empty {
    height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: rgba(255, 255, 255, .9);
    background: linear-gradient(135deg, var(--kb-orange-cta), var(--kb-purple));
}

.kb-shop-card-badge {
    position: absolute; top: .6rem; right: .6rem;
    display: inline-flex; align-items: center; gap: .3rem;
    background: rgba(20, 33, 61, .78); backdrop-filter: blur(4px);
    color: #fff; font-size: .72rem; font-weight: 600;
    padding: .3rem .65rem; border-radius: 999px;
}
.kb-shop-card-badge i { color: var(--kb-green); }

.kb-shop-card-body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1 1 auto; }

.kb-shop-card-avatar {
    width: 3rem; height: 3rem; border-radius: 14px; flex-shrink: 0; overflow: hidden;
    background: linear-gradient(135deg, var(--kb-orange-cta), var(--kb-purple)); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: .9rem; text-transform: uppercase;
    margin-top: -2.05rem; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(20, 33, 61, .18);
    position: relative;
}
.kb-shop-card-avatar img { width: 100%; height: 100%; object-fit: cover; }

.kb-shop-card-desc {
    margin: .65rem 0 0; font-size: .82rem; line-height: 1.4; color: var(--kb-muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.kb-shop-card-footer {
    margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--kb-border);
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.kb-shop-card-cta { font-size: .82rem; font-weight: 600; color: var(--kb-orange-cta); white-space: nowrap; }
.kb-shop-card-cta i { transition: transform .2s ease; }
.kb-site-card--hover:hover .kb-shop-card-cta i { transform: translateX(3px); }

/* ---------- Merchant product rows ---------- */
.kb-product-row { display: flex; align-items: center; gap: .85rem; padding: .85rem 0; border-bottom: 1px solid var(--kb-border); }
.kb-product-row:last-child { border-bottom: none; }
.kb-product-row-media {
    width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; overflow: hidden;
    background: var(--kb-muted-bg); display: flex; align-items: center; justify-content: center; color: var(--kb-border);
}
.kb-product-row-media img { width: 100%; height: 100%; object-fit: cover; }
.kb-product-row-actions { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }
.kb-product-row-actions a, .kb-product-row-actions button {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--kb-border); border-radius: 9px; background: #fff; color: var(--kb-navy);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.kb-product-row-actions a:hover, .kb-product-row-actions button:hover { background: var(--kb-muted-bg); }
.kb-product-row-action--danger:hover { border-color: rgba(220, 53, 69, .4); color: var(--kb-danger); background: rgba(220, 53, 69, .06); }

.kb-available-card { transition: transform .2s ease, box-shadow .2s ease; }
.kb-available-card:hover { transform: translateY(-4px); box-shadow: var(--kb-shadow-glow); }

/* ---------- Corbeille de courses (livreur) ---------- */
.kb-delivery-card { padding: 1.5rem; transition: transform .2s ease, box-shadow .2s ease; }
.kb-delivery-card:hover { transform: translateY(-4px); box-shadow: var(--kb-shadow-glow); }
.kb-delivery-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.kb-delivery-card-fee { text-align: right; }
.kb-delivery-card-fee-value {
    font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--kb-green); margin: 0;
}
.kb-delivery-card-fee-value span { font-size: .8rem; font-weight: 500; opacity: .8; }
.kb-delivery-card-fee-label { font-size: .7rem; color: var(--kb-muted); margin: 0; }
.kb-delivery-card-meta {
    display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .75rem; padding-top: .75rem;
    border-top: 1px solid var(--kb-border); font-size: .78rem; color: var(--kb-muted);
}
.kb-delivery-card-meta i { color: var(--kb-orange-cta); margin-right: .25rem; }

/* ---------- Quick links (barre latérale des tableaux de bord) ---------- */
.kb-quick-link {
    display: flex; align-items: center; gap: .75rem; padding: .55rem .6rem; border-radius: 12px;
    color: var(--kb-navy); text-decoration: none; font-size: .88rem; font-weight: 500;
    transition: background-color .15s ease, transform .15s ease;
}
.kb-quick-link:hover { background: var(--kb-muted-bg); transform: translateX(2px); color: var(--kb-navy); }
.kb-quick-link .kb-icon-badge { width: 2.4rem; height: 2.4rem; border-radius: 11px; font-size: 1.05rem; }
.kb-quick-link > i:last-child { color: var(--kb-muted); font-size: .8rem; }

/* ---------- Plan cards (abonnement) ---------- */
.kb-plan-card { position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.kb-plan-card--premium { border-color: rgba(146, 76, 210, .35); box-shadow: var(--kb-shadow-glow); }
.kb-plan-card--premium:hover { transform: translateY(-4px); }
.kb-plan-card-ribbon {
    position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: .35rem;
    background: linear-gradient(135deg, var(--kb-orange-cta), var(--kb-purple)); color: #fff;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: .4rem .9rem; border-radius: 0 var(--kb-radius) 0 12px;
}

.kb-role-blob { position: absolute; top: -2.5rem; right: -2.5rem; height: 7rem; width: 7rem; border-radius: 50%; filter: blur(24px); }
.kb-role-blob--orange { background: rgba(247, 111, 13, .2); }
.kb-role-blob--green { background: rgba(30, 161, 20, .2); }
.kb-role-blob--purple { background: rgba(146, 76, 210, .2); }

/* ---------- Hero ---------- */
.kb-hero { position: relative; overflow: hidden; }
.kb-hero-badge {
    display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--kb-border);
    background: rgba(255, 255, 255, .6); backdrop-filter: blur(6px); border-radius: 999px;
    padding: .35rem .9rem; font-size: .78rem; font-weight: 500; color: var(--kb-muted);
}
.kb-hero-visual { position: relative; aspect-ratio: 1 / 1; max-width: 32rem; margin-inline: auto; transition: transform .18s ease-out; will-change: transform; }
.kb-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(247, 111, 13, .4); animation: kb-spin 40s linear infinite; }
.kb-ring--reverse { inset: 2rem; border-color: rgba(30, 161, 20, .4); animation: kb-spin-reverse 50s linear infinite; }
.kb-hero-logo {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    height: 14rem; width: 14rem; border-radius: 50%; background: #fff; box-shadow: var(--kb-shadow-glow);
    object-fit: cover; animation: kb-float 4s ease-in-out infinite;
}
.kb-chip {
    position: absolute; display: inline-flex; align-items: center; gap: .5rem; background: #fff;
    border: 1px solid var(--kb-border); border-radius: 999px; padding: .4rem .9rem;
    box-shadow: var(--kb-shadow-soft); font-size: .78rem; font-weight: 500; animation: kb-chip-float 3s ease-in-out infinite;
}
.kb-chip--1 { top: 4%; left: 2%; }
.kb-chip--2 { top: 32%; right: 2%; animation-delay: .4s; }
.kb-chip--3 { bottom: 12%; left: 4%; animation-delay: .8s; }
.kb-chip--4 { bottom: 4%; right: 6%; animation-delay: 1.2s; }
@media (min-width: 576px) {
    /* Décalage négatif réservé aux écrans assez larges pour l'absorber sans rogner le chip
       (audit UX-05 : sur mobile, .kb-hero-visual peut descendre sous ~330px de large). */
    .kb-chip--2 { right: -4%; }
}
.kb-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; z-index: 0; animation: kb-blob-move 11s ease-in-out infinite; }

/* ---------- Pages légales (politique de confidentialité, CGU) ---------- */
.kb-legal-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1090; background: transparent; }
.kb-legal-progress-fill {
    height: 100%; width: 0%; background: linear-gradient(90deg, var(--kb-orange), var(--kb-purple), var(--kb-green));
    transition: width .1s linear;
}

.kb-legal-hero {
    position: relative; overflow: hidden; isolation: isolate;
    background: linear-gradient(160deg, #faf7ff 0%, #f3ecff 55%, #fdf5fb 100%);
    border-bottom: 1px solid rgba(146, 76, 210, .12);
    color: var(--kb-navy);
}
.kb-legal-hero-mesh {
    position: absolute; inset: 0; z-index: -1; opacity: .5;
    background-image: radial-gradient(rgba(146, 76, 210, .18) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    mask-image: radial-gradient(65% 65% at 30% 20%, #000, transparent);
}
.kb-legal-hero-title {
    background: linear-gradient(120deg, var(--kb-navy) 35%, var(--kb-purple));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kb-legal-updated {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .4rem .9rem; border-radius: 999px; background: #fff;
    border: 1px solid rgba(146, 76, 210, .18);
    font-size: .78rem; color: var(--kb-muted); box-shadow: var(--kb-shadow-soft);
}

.kb-legal-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 992px) {
    .kb-legal-layout { grid-template-columns: 16rem 1fr; }
}

.kb-legal-toc {
    display: none;
    position: sticky; top: 5.5rem;
    background: #fff; border: 1px solid var(--kb-border); border-radius: var(--kb-radius);
    padding: 1.25rem; box-shadow: var(--kb-shadow-soft);
}
.kb-legal-toc-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--kb-muted); margin: 0 0 .75rem; }
.kb-legal-toc nav { display: flex; flex-direction: column; gap: .15rem; max-height: calc(100vh - 9rem); overflow-y: auto; }
.kb-legal-toc a {
    display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 10px;
    color: var(--kb-muted); text-decoration: none; font-size: .82rem; font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}
.kb-legal-toc a:hover { background: var(--kb-muted-bg); color: var(--kb-navy); }
.kb-legal-toc a.is-active { background: rgba(146, 76, 210, .1); color: var(--kb-purple); font-weight: 700; }
.kb-legal-toc-number {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--kb-muted-bg); font-size: .68rem; font-weight: 700;
}
.kb-legal-toc a.is-active .kb-legal-toc-number { background: var(--kb-purple); color: #fff; }
@media (min-width: 992px) { .kb-legal-toc { display: block; } }

.kb-legal-body { min-width: 0; }
.kb-legal-section { padding: 1.75rem 0; border-bottom: 1px solid var(--kb-border); scroll-margin-top: 5.5rem; }
.kb-legal-section:first-child { padding-top: 0; }
.kb-legal-section:last-child { border-bottom: none; }
.kb-legal-section-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.kb-legal-section-number {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 2.25rem; height: 2.25rem; border-radius: 10px; font-weight: 800; font-size: .9rem;
    background: linear-gradient(135deg, var(--kb-orange), var(--kb-purple)); color: #fff;
}
.kb-legal-section-head h2 { font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--kb-navy); }
.kb-legal-section p { color: var(--kb-muted); line-height: 1.75; font-size: .92rem; margin: 0 0 .9rem; }
.kb-legal-section p:last-child { margin-bottom: 0; }
.kb-legal-list { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.kb-legal-list:last-child { margin-bottom: 0; }
.kb-legal-list li { display: flex; align-items: flex-start; gap: .6rem; color: var(--kb-muted); font-size: .92rem; line-height: 1.6; }
.kb-legal-list li i { color: var(--kb-green); margin-top: .2rem; flex-shrink: 0; }

.kb-legal-contact-cta {
    margin-top: 1rem; padding: 1.25rem; border-radius: var(--kb-radius);
    background: var(--kb-muted-bg); display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
}
@media (min-width: 576px) { .kb-legal-contact-cta { flex-direction: row; align-items: center; } }

.kb-legal-back-to-top {
    position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1050;
    width: 3rem; height: 3rem; border-radius: 50%; border: none;
    background: var(--kb-navy); color: #fff; font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--kb-shadow-glow); transition: transform .2s ease, background-color .2s ease;
}
.kb-legal-back-to-top:hover { background: var(--kb-orange); transform: translateY(-3px); }
.kb-legal-back-to-top[hidden] { display: none; }

/* ---------- Panneau Contact (infos + formulaire) ---------- */
.kb-contact-panel {
    display: grid; grid-template-columns: 1fr; border-radius: 24px; overflow: hidden;
    box-shadow: var(--kb-shadow-soft); border: 1px solid var(--kb-border);
    position: relative;
}
@media (min-width: 992px) {
    .kb-contact-panel { grid-template-columns: 5fr 7fr; }
}

.kb-contact-panel-info {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 2.5rem 2rem; color: #fff;
    background: radial-gradient(120% 160% at 12% 0%, #1b2a4d 0%, var(--kb-navy) 45%, #0e1730 100%);
}
.kb-contact-ring { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.kb-contact-ring--1 { width: 10rem; height: 10rem; border: 3px solid rgba(247, 111, 13, .3); top: -3.5rem; right: -2.5rem; }
.kb-contact-ring--2 { width: 6rem; height: 6rem; background: rgba(146, 76, 210, .25); filter: blur(2px); bottom: -1.5rem; left: -1.5rem; }

.kb-contact-panel-eyebrow {
    position: relative; display: inline-flex; align-items: center; gap: .5rem;
    text-transform: uppercase; letter-spacing: .2em; font-size: .7rem; font-weight: 700;
    color: rgba(255, 255, 255, .55); margin-bottom: 1.75rem;
}
.kb-contact-panel-eyebrow::before { content: ''; width: 1.1rem; height: 2px; background: var(--kb-orange); border-radius: 999px; }
.kb-contact-panel-eyebrow--light { color: var(--kb-orange-cta); font-size: .78rem; margin-bottom: .5rem; }
.kb-contact-panel-eyebrow--light::before { background: var(--kb-orange-cta); }

.kb-contact-panel-item {
    display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.75rem;
    padding: .35rem; border-radius: 14px; margin-inline: -.35rem;
    transition: background-color .2s ease, transform .2s ease;
}
.kb-contact-panel-item:last-child { margin-bottom: 0; }
.kb-contact-panel-item:hover { background: rgba(255, 255, 255, .06); transform: translateX(3px); }
.kb-contact-panel-item-icon {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 2.75rem; height: 2.75rem; border-radius: 50%; font-size: 1.1rem;
    background: rgba(255, 255, 255, .12); color: #fff;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.kb-contact-panel-item:hover .kb-contact-panel-item-icon { background: var(--kb-orange); color: #fff; transform: scale(1.08); }
.kb-contact-panel-item-label {
    text-transform: uppercase; font-size: .68rem; font-weight: 700; letter-spacing: .07em;
    color: rgba(255, 255, 255, .55); margin-bottom: .2rem;
}
.kb-contact-panel-item-value { font-weight: 600; color: #fff; text-decoration: none; }
a.kb-contact-panel-item-value:hover { text-decoration: underline; }

.kb-contact-panel-social {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12);
}
.kb-contact-panel-social-link {
    display: flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem; border-radius: 50%; font-size: 1.05rem;
    background: rgba(255, 255, 255, .1); color: #fff;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.kb-contact-panel-social-link:hover { background: var(--kb-orange); color: #fff; transform: translateY(-3px); }

.kb-contact-panel-form { background: #fff; padding: 2.5rem 2rem; }

/* ---------- Hero photo + formulaire superposé en carte flottante côté droit — modèle partagé
   par Contact, Connexion et Inscription (Apparence > Photo section Contact / page Connexion /
   page Inscription). Photo masquée sur mobile (choix demandé) : seul le formulaire y reste
   affiché, en carte autonome. ---------- */
.kb-photo-hero {
    position: relative; display: flex; align-items: center; justify-content: flex-end; overflow: hidden;
    min-height: 34rem; border-radius: 24px; box-shadow: var(--kb-shadow-soft);
    /* "left center" plutôt que "center" : la photo attendue place son sujet (la personne) à
       gauche avec de l'espace vide à droite pour la carte — recadrer depuis la gauche garde le
       sujet dans le cadre au lieu de le couper, surtout sur les formats étroits (mobile). */
    background: var(--kb-muted-bg) left center / cover no-repeat;
}
.kb-photo-hero-scrim {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(270deg, rgba(20, 33, 61, .5) 0%, rgba(20, 33, 61, .18) 42%, transparent 62%);
}
.kb-photo-hero-card {
    position: relative; z-index: 1; width: 100%; max-width: 25rem;
    border-radius: 20px; margin: 2rem 2rem 2rem 0;
    box-shadow: 0 30px 60px -20px rgba(20, 33, 61, .45);
}
/* Formulaires plus larges (ex. inscription, champs sur 2 colonnes) : carte plus large que le
   gabarit par défaut, toujours superposée à droite de la photo. */
.kb-photo-hero-card--wide { max-width: 38rem; }
@media (max-width: 767.98px) {
    .kb-photo-hero {
        flex-direction: column; align-items: stretch; justify-content: flex-start;
        min-height: 0; border-radius: 18px; background-image: none !important;
    }
    .kb-photo-hero-scrim { display: none; }
    .kb-photo-hero-card {
        position: static; margin: 0; max-width: 100%; border-radius: 18px;
        box-shadow: var(--kb-shadow-soft); border: 1px solid var(--kb-border);
    }
}

/* ---------- Coordonnées (bande compacte sous la photo, remplace l'ancien panneau navy) ---------- */
.kb-contact-info-strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem 2.25rem;
    padding: 1.5rem 1.75rem; border-radius: 18px;
    background: var(--kb-muted-bg); border: 1px solid var(--kb-border);
}
.kb-contact-info-strip .kb-contact-panel-item-icon { background: #fff; color: var(--kb-orange-cta); box-shadow: 0 4px 10px -4px rgba(20, 33, 61, .18); }
.kb-contact-info-strip-item { display: flex; align-items: center; gap: .85rem; }
.kb-contact-info-strip-label {
    text-transform: uppercase; font-size: .66rem; font-weight: 700; letter-spacing: .07em;
    color: var(--kb-muted); margin-bottom: .15rem;
}
.kb-contact-info-strip-value { font-weight: 600; color: var(--kb-navy); text-decoration: none; }
a.kb-contact-info-strip-value:hover { color: var(--kb-orange-cta); text-decoration: underline; }
.kb-contact-info-strip-social { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-left: auto; }
.kb-contact-info-strip-social .kb-contact-panel-social-link { background: #fff; color: var(--kb-orange-cta); box-shadow: 0 4px 10px -4px rgba(20, 33, 61, .18); }
.kb-contact-info-strip-social .kb-contact-panel-social-link:hover { background: var(--kb-orange); color: #fff; }
@media (max-width: 575.98px) {
    .kb-contact-info-strip { gap: 1.25rem 1.5rem; }
    .kb-contact-info-strip-social { margin-left: 0; }
}
.kb-contact-panel-form .form-label { color: var(--kb-navy); margin-bottom: .35rem; }
.kb-contact-panel-form .form-control,
.kb-contact-panel-form .form-select {
    border: 1.5px solid var(--kb-border); border-radius: 12px; background: var(--kb-muted-bg);
    padding: .65rem .9rem; font-size: .92rem; color: var(--kb-navy);
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.kb-contact-panel-form .form-control:focus,
.kb-contact-panel-form .form-select:focus {
    border-color: var(--kb-orange); background: #fff;
    box-shadow: 0 0 0 .2rem rgba(247, 111, 13, .15);
}
.kb-contact-panel-form .form-control.is-invalid,
.kb-contact-panel-form .form-select.is-invalid { border-color: #dc3545; }
.kb-contact-panel-form textarea.form-control { resize: vertical; min-height: 8rem; }

/* ---------- Vitrine "Boîte connectée" ---------- */
.kb-box-showcase { position: relative; aspect-ratio: 1 / 1; max-width: 34rem; margin-inline: auto; display: flex; align-items: center; justify-content: center; }
/* Le cadre carré ci-dessus sert la maquette CSS (mock portrait centré) ; une vraie photo/vidéo
   (souvent 16:9) reprend son propre ratio pour que object-fit:contain n'ait plus de bandes vides
   à combler — élimine les bandeaux bleu marine au-dessus/en dessous du média. */
.kb-box-showcase--media { aspect-ratio: 16 / 9; }
.kb-box-showcase-photo {
    /* object-fit:contain (pas cover) : le média réel (ex. vidéo 16:9) est souvent bien plus large
       que le cadre carré de la vitrine — en "cover" ça rognait ~22% de chaque côté et coupait le
       texte incrusté près des bords (ex. "Statut en temps réel" devenait illisible). En "contain",
       le média entier reste visible ; le fond navy comble les bandes vides éventuelles en se
       fondant avec l'arrière-plan sombre typique des photos/vidéos du boîtier. */
    width: 100%; height: 100%; object-fit: contain; background: var(--kb-navy); border-radius: 1.75rem;
    box-shadow: 0 30px 60px -20px rgba(20, 33, 61, .45);
}
/* Voile permanent (vignette + bas assombri) au-dessus de la photo/vidéo : le texte incrusté dans
   le média (ex. bulles "Code à usage unique") reste lisible en continu, quelle que soit la scène
   affichée à un instant donné — y compris à la reprise d'une vidéo en boucle. */
.kb-box-showcase-scrim {
    position: absolute; inset: 0; border-radius: 1.75rem; pointer-events: none;
    background:
        linear-gradient(0deg, rgba(10, 15, 30, .48) 0%, transparent 32%),
        radial-gradient(circle at 50% 45%, transparent 45%, rgba(10, 15, 30, .32) 100%);
}
.kb-box-mock {
    position: relative; height: 18rem; width: 15rem; border-radius: 2rem; padding: 1.5rem;
    background: linear-gradient(155deg, var(--kb-navy), #1f2937);
    box-shadow: 0 30px 60px -20px rgba(20, 33, 61, .45);
    display: flex; flex-direction: column; justify-content: space-between;
}
.kb-box-mock-status { display: flex; align-items: center; justify-content: space-between; }
.kb-box-mock-dot, .kb-live-dot { height: .6rem; width: .6rem; border-radius: 50%; background: var(--kb-green); animation: kb-pulse-ring 2s ease-in-out infinite; }
.kb-live-dot--muted { background: var(--kb-muted); animation: none; }
.kb-box-mock-brand { font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: rgba(255, 255, 255, .45); }
.kb-box-mock-icon {
    margin-inline: auto; height: 4rem; width: 4rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .1); color: var(--kb-orange); font-size: 1.7rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.kb-box-mock-logo {
    width: 65%; height: 65%; object-fit: contain; border-radius: 50%;
    animation: kb-box-logo-pulse 2.4s ease-in-out infinite;
}
@keyframes kb-box-logo-pulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(247, 111, 13, 0)); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(247, 111, 13, .65)); }
}
.kb-box-mock-screen {
    position: relative; display: flex; align-items: center; justify-content: center; gap: .55rem;
    margin: .35rem 0 .6rem; padding: .6rem .75rem; border-radius: .7rem;
    background: linear-gradient(180deg, #05070d, #0d1220);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 2px 6px rgba(0, 0, 0, .5);
}
.kb-box-mock-screen::before {
    content: ''; position: absolute; left: .65rem; top: 50%; transform: translateY(-50%);
    width: .3rem; height: .3rem; border-radius: 50%; background: var(--kb-green);
    box-shadow: 0 0 5px rgba(30, 161, 20, .9);
    animation: kb-pulse-ring 2s ease-in-out infinite;
}
.kb-box-mock-dot-slot {
    width: .55rem; height: .55rem; border-radius: 50%; box-sizing: border-box;
    border: 1.5px solid rgba(255, 255, 255, .25); background: transparent;
    animation: kb-mock-dot-fill 5s ease-in-out infinite;
}
.kb-box-mock-dot-slot:nth-child(1) { animation-delay: 0s; }
.kb-box-mock-dot-slot:nth-child(2) { animation-delay: .35s; }
.kb-box-mock-dot-slot:nth-child(3) { animation-delay: .7s; }
.kb-box-mock-dot-slot:nth-child(4) { animation-delay: 1.05s; }
@keyframes kb-mock-dot-fill {
    0%, 6% { background: transparent; border-color: rgba(255, 255, 255, .25); transform: scale(1); box-shadow: none; }
    10% { background: var(--kb-orange); border-color: var(--kb-orange); transform: scale(1.3); box-shadow: 0 0 8px rgba(247, 111, 13, .85); }
    16%, 62% { background: var(--kb-orange); border-color: var(--kb-orange); transform: scale(1); box-shadow: 0 0 4px rgba(247, 111, 13, .5); }
    68%, 100% { background: transparent; border-color: rgba(255, 255, 255, .25); transform: scale(1); box-shadow: none; }
}
.kb-box-mock-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.kb-box-mock-key {
    background: rgba(255, 255, 255, .06); border-radius: .6rem; padding: .5rem 0; text-align: center;
    font-size: .72rem; font-weight: 600; color: rgba(255, 255, 255, .55);
    animation: kb-key-type 5s ease-in-out infinite;
}
/* Décalage par touche : simule une saisie de code qui parcourt le clavier puis marque une pause
   avant de reboucler (durée du cycle = 5s, 9 touches espacées de .35s ≈ 3.15s de "frappe"). */
.kb-box-mock-key:nth-child(1) { animation-delay: 0s; }
.kb-box-mock-key:nth-child(2) { animation-delay: .35s; }
.kb-box-mock-key:nth-child(3) { animation-delay: .7s; }
.kb-box-mock-key:nth-child(4) { animation-delay: 1.05s; }
.kb-box-mock-key:nth-child(5) { animation-delay: 1.4s; }
.kb-box-mock-key:nth-child(6) { animation-delay: 1.75s; }
.kb-box-mock-key:nth-child(7) { animation-delay: 2.1s; }
.kb-box-mock-key:nth-child(8) { animation-delay: 2.45s; }
.kb-box-mock-key:nth-child(9) { animation-delay: 2.8s; }
@keyframes kb-key-type {
    0%, 100% { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .55); box-shadow: none; transform: scale(1); }
    4% { background: var(--kb-orange); color: #fff; box-shadow: 0 0 10px rgba(247, 111, 13, .65); transform: scale(1.08); }
    10% { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .55); box-shadow: none; transform: scale(1); }
}
.kb-box-hero {
    border-radius: var(--kb-radius); padding: 1.5rem; color: #fff;
    background: linear-gradient(135deg, var(--kb-navy), var(--kb-purple));
    box-shadow: var(--kb-shadow-soft);
}
.kb-box-hero .text-muted-soft { color: rgba(255, 255, 255, .65) !important; }

.kb-box-chip--1 { top: 6%; left: -2%; }
.kb-box-chip--2 { top: 30%; right: -4%; animation-delay: .4s; }
.kb-box-chip--3 { bottom: 4%; left: 2%; animation-delay: .8s; }
@media (max-width: 575.98px) {
    /* Le padding vertical des sections (py-5 + container py-3/py-4) s'additionne sans se
       chevaucher visuellement comme sur desktop, laissant un vide énorme entre les cartes de
       profil et la boîte connectée juste en dessous (cf. capture utilisateur). On resserre les
       deux côtés de cette jonction plutôt que de toucher au padding desktop, qui reste correct. */
    .kb-section-profiles { padding-bottom: 1.25rem !important; }
    .kb-section-profiles > .container { padding-bottom: .5rem !important; }
    .kb-section-box { padding-top: 1.25rem !important; }
    .kb-section-box > .container { padding-top: .5rem !important; }

    /* Sur mobile, les chips flottantes autour de la boîte deviennent une liste bien lisible en
       dessous, plutôt que de rester en ligne avec elle (le parent flex les alignait côte à côte
       et les tassait sur la droite — cf. capture utilisateur). */
    .kb-box-showcase { flex-direction: column; gap: .55rem; aspect-ratio: auto; padding-bottom: 1rem; }
    .kb-box-showcase-photo { height: auto; aspect-ratio: 1 / 1; }
    .kb-box-showcase--media .kb-box-showcase-photo { aspect-ratio: 16 / 9; }
    .kb-box-chip--1, .kb-box-chip--2, .kb-box-chip--3 {
        position: static; width: 100%; max-width: 17rem; margin: 0; justify-content: flex-start;
        animation: none;
        gap: .75rem; padding: .6rem .9rem .6rem .8rem; font-weight: 600;
        border-left: 3px solid transparent;
    }
    /* Icône reprise en badge rond teinté (même codage couleur que la boîte au-dessus) plutôt
       qu'en simple glyphe, pour un rendu "liste de fonctionnalités" au lieu de pilules flottantes. */
    .kb-box-chip--1 i, .kb-box-chip--2 i, .kb-box-chip--3 i {
        flex-shrink: 0; width: 2.1rem; height: 2.1rem; border-radius: 10px;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 1rem; background: rgba(20, 33, 61, .08);
    }
    .kb-box-chip--1 { border-left-color: var(--kb-orange); }
    .kb-box-chip--1 i { background: rgba(247, 111, 13, .12); }
    .kb-box-chip--2 { border-left-color: var(--kb-green); }
    .kb-box-chip--2 i { background: rgba(30, 161, 20, .12); }
    .kb-box-chip--3 { border-left-color: var(--kb-purple); }
    .kb-box-chip--3 i { background: rgba(146, 76, 210, .12); }
}

/* ---------- Étapes "Boîte connectée" (timeline) ---------- */
.kb-step-item {
    position: relative; padding: .5rem; margin: -.5rem; border-radius: 14px;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.kb-step-item:hover,
.kb-step-item--touch-hover {
    background: rgba(30, 161, 20, .18);
    transform: translateX(8px);
    box-shadow: inset 4px 0 0 var(--kb-green);
}
.kb-step-item:not(:last-child)::before {
    content: ''; position: absolute; z-index: 0; left: calc(.5rem + 24px); top: calc(.5rem + 48px); bottom: -1.5rem;
    width: 2px; background: linear-gradient(var(--kb-green), transparent); transform: translateX(-50%);
}
.kb-step-icon { position: relative; z-index: 1; transition: transform .25s ease, box-shadow .25s ease; }
.kb-step-item:hover .kb-step-icon,
.kb-step-item--touch-hover .kb-step-icon { transform: scale(1.08); box-shadow: 0 10px 20px -10px var(--kb-green); }

/* Défilement automatique : chaque étape se met en avant à tour de rôle, de la 1re à la dernière,
   pour guider l'œil dans le parcours sans attendre un survol. Cycle de 8s = 4 étapes × 2s. */
.kb-step-list .kb-step-item {
    animation: kb-step-spotlight 8s ease-in-out infinite;
}
.kb-step-list .kb-step-item .kb-step-icon {
    animation: kb-step-icon-spotlight 8s ease-in-out infinite;
}
.kb-step-list .kb-step-item .kb-step-active-badge {
    animation: kb-step-badge-spotlight 8s ease-in-out infinite;
}
.kb-step-list .kb-step-item:nth-child(1),
.kb-step-list .kb-step-item:nth-child(1) .kb-step-icon,
.kb-step-list .kb-step-item:nth-child(1) .kb-step-active-badge { animation-delay: 0s; }
.kb-step-list .kb-step-item:nth-child(2),
.kb-step-list .kb-step-item:nth-child(2) .kb-step-icon,
.kb-step-list .kb-step-item:nth-child(2) .kb-step-active-badge { animation-delay: 2s; }
.kb-step-list .kb-step-item:nth-child(3),
.kb-step-list .kb-step-item:nth-child(3) .kb-step-icon,
.kb-step-list .kb-step-item:nth-child(3) .kb-step-active-badge { animation-delay: 4s; }
.kb-step-list .kb-step-item:nth-child(4),
.kb-step-list .kb-step-item:nth-child(4) .kb-step-icon,
.kb-step-list .kb-step-item:nth-child(4) .kb-step-active-badge { animation-delay: 6s; }
.kb-step-list .kb-step-item:hover,
.kb-step-list .kb-step-item:hover .kb-step-icon,
.kb-step-list .kb-step-item:hover .kb-step-active-badge,
.kb-step-list .kb-step-item--touch-hover,
.kb-step-list .kb-step-item--touch-hover .kb-step-icon,
.kb-step-list .kb-step-item--touch-hover .kb-step-active-badge,
.kb-step-list--interacted .kb-step-item,
.kb-step-list--interacted .kb-step-icon,
.kb-step-list--interacted .kb-step-active-badge { animation-play-state: paused; }

/* Une animation (même en pause) reste prioritaire sur une règle :hover classique, donc sans ces
   !important le survol pouvait rester figé sur la valeur du cycle automatique au lieu de réagir. */
.kb-step-list .kb-step-item:hover:not(.kb-step-item--selected),
.kb-step-list .kb-step-item--touch-hover:not(.kb-step-item--selected) {
    background: rgba(30, 161, 20, .18) !important;
    transform: translateX(8px) !important;
    box-shadow: inset 4px 0 0 var(--kb-green) !important;
}
.kb-step-list .kb-step-item:hover:not(.kb-step-item--selected) .kb-step-icon,
.kb-step-list .kb-step-item--touch-hover:not(.kb-step-item--selected) .kb-step-icon {
    transform: scale(1.08) !important;
    box-shadow: 0 10px 20px -10px var(--kb-green) !important;
}

/* ---------- Étape sélectionnée (clic / clavier) ---------- */
.kb-step-item { cursor: pointer; border: 1px solid transparent; padding: .75rem; margin: -.75rem; }
.kb-step-item:focus-visible { outline: 2px solid var(--kb-orange); outline-offset: 2px; border-radius: 14px; }
.kb-step-item--selected {
    background: rgba(30, 161, 20, .22) !important;
    border-color: var(--kb-green) !important;
    transform: translateX(6px) !important;
    box-shadow: inset 5px 0 0 var(--kb-green), 0 0 0 3px rgba(30, 161, 20, .18), 0 18px 34px -16px rgba(30, 161, 20, .65);
    animation: kb-step-select-pop .45s cubic-bezier(.34, 1.56, .64, 1);
}
.kb-step-item--selected .kb-step-icon {
    background: var(--kb-green) !important; color: #fff !important;
    transform: scale(1.2) !important;
    box-shadow: 0 0 0 8px rgba(30, 161, 20, .25), 0 16px 30px -8px var(--kb-green) !important;
}
.kb-step-item--selected .kb-step-number {
    background: #fff; color: var(--kb-green); box-shadow: 0 0 0 3px var(--kb-green);
}
.kb-step-item--selected p.fw-semibold { color: var(--kb-green); font-weight: 800; }
.kb-step-item--selected .kb-step-active-badge {
    opacity: 1 !important; transform: scale(1) translateX(0) !important; animation: none !important;
    background: var(--kb-green); color: #fff;
    box-shadow: 0 0 0 5px rgba(30, 161, 20, .25);
}
.kb-step-item--selected .kb-step-active-dot { background: #fff; }
@keyframes kb-step-select-pop {
    0% { transform: translateX(6px) scale(1); box-shadow: inset 5px 0 0 var(--kb-green), 0 0 0 0 rgba(30, 161, 20, .6); }
    40% { transform: translateX(6px) scale(1.04); box-shadow: inset 5px 0 0 var(--kb-green), 0 0 0 6px rgba(30, 161, 20, .3), 0 18px 34px -12px rgba(30, 161, 20, .8); }
    100% { transform: translateX(6px) scale(1); box-shadow: inset 5px 0 0 var(--kb-green), 0 0 0 3px rgba(30, 161, 20, .18), 0 18px 34px -16px rgba(30, 161, 20, .65); }
}
@keyframes kb-step-spotlight {
    0%, 4% { background: transparent; transform: translateX(0); }
    10%, 20% { background: var(--kb-muted-bg); transform: translateX(4px); }
    28%, 100% { background: transparent; transform: translateX(0); }
}
@keyframes kb-step-icon-spotlight {
    0%, 4% { transform: scale(1); box-shadow: none; }
    10%, 20% { transform: scale(1.1); box-shadow: 0 10px 20px -8px var(--kb-green); }
    28%, 100% { transform: scale(1); box-shadow: none; }
}
.kb-step-active-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .12rem .55rem; border-radius: 999px; background: rgba(30, 161, 20, .12); color: var(--kb-green);
    font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    opacity: 0; transform: scale(.85) translateX(-4px); transform-origin: left center;
}
.kb-step-active-dot { width: .35rem; height: .35rem; border-radius: 50%; background: var(--kb-green); flex-shrink: 0; }
@keyframes kb-step-badge-spotlight {
    0%, 4% { opacity: 0; transform: scale(.85) translateX(-4px); }
    10%, 20% { opacity: 1; transform: scale(1) translateX(0); }
    28%, 100% { opacity: 0; transform: scale(.85) translateX(-4px); }
}
.kb-step-number {
    position: absolute; top: -.3rem; right: -.3rem; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 1.3rem; height: 1.3rem; border-radius: 50%; font-size: .68rem; font-weight: 700;
    background: var(--kb-navy); color: #fff; box-shadow: 0 0 0 2px #fff;
}

@keyframes kb-spin { to { transform: rotate(360deg); } }
@keyframes kb-spin-reverse { to { transform: rotate(-360deg); } }
@keyframes kb-float { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 12px)); } }
@keyframes kb-chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes kb-blob-move { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(20px, 30px); } }
@keyframes kb-pulse-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(30, 161, 20, .5); } 50% { box-shadow: 0 0 0 6px rgba(30, 161, 20, 0); } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

/* ---------- Timeline (fonctionnement) ---------- */
.kb-timeline { position: relative; }
.kb-timeline::before {
    content: ''; position: absolute; left: 1.5rem; top: 0; bottom: 0; width: 1px;
    background: linear-gradient(to bottom, var(--kb-orange), var(--kb-green), var(--kb-purple)); opacity: .4;
}
.kb-timeline-num {
    flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 50%;
    background: linear-gradient(135deg, var(--kb-orange-cta), var(--kb-purple)); color: #fff;
    display: flex; align-items: center; justify-content: center; font-family: var(--font-display);
    font-weight: 700; box-shadow: var(--kb-shadow-glow); position: relative; z-index: 1;
}
@media (min-width: 576px) {
    .kb-timeline::before { left: 50%; }
    .kb-timeline-item { width: 50%; }
    /* row-reverse ramène le rond numéroté (premier enfant du flex) au bord le plus proche de la
       ligne centrale côté gauche — sans ça il se retrouve isolé au bord extérieur (audit UX-02). */
    .kb-timeline-item--left { padding-right: 3rem; flex-direction: row-reverse; }
    .kb-timeline-item--right { margin-left: auto; padding-left: 3rem; }
}

/* ---------- Footer ---------- */
.kb-site-footer {
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 160% at 12% 0%, #1b2a4d 0%, var(--kb-navy) 45%, #0e1730 100%);
    color: rgba(255, 255, 255, .68);
    isolation: isolate;
}
.kb-site-footer::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg, var(--kb-orange), var(--kb-purple), var(--kb-green));
    opacity: .8;
}
.kb-site-footer::after {
    content: '';
    position: absolute; z-index: -1; pointer-events: none;
    top: -8rem; right: -6rem; height: 22rem; width: 22rem; border-radius: 50%;
    background: radial-gradient(circle, rgba(247, 111, 13, .25), transparent 70%);
    filter: blur(10px);
}

.kb-site-footer__image {
    position: relative; width: 100%; overflow: hidden; line-height: 0; pointer-events: none;
}
.kb-site-footer__image-mask {
    width: min(98%, 72rem); margin-inline: auto;
    aspect-ratio: 999 / 174;
    background: var(--kb-navy);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: bottom center; mask-position: bottom center;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}

.kb-site-footer a { color: rgba(255, 255, 255, .68); text-decoration: none; transition: color .2s ease, transform .2s ease; }
.kb-site-footer a:hover { color: #fff; }

.kb-site-footer .kb-brand-word {
    background: linear-gradient(120deg, #fff 45%, var(--kb-orange));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kb-site-footer .kb-brand-word.fs-6 {
    background: none; color: rgba(255, 255, 255, .92);
    font-size: .8rem !important; text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.kb-site-footer .kb-brand-logo { box-shadow: 0 0 0 2px var(--kb-navy), 0 0 0 3.5px rgba(247, 111, 13, .55); }
.kb-site-footer .text-muted-soft { color: rgba(255, 255, 255, .55) !important; }

.kb-site-footer ul.list-unstyled li a { display: inline-flex; align-items: center; }
.kb-site-footer ul.list-unstyled li a:hover { transform: translateX(3px); }

.kb-site-footer .border-top {
    border-color: rgba(255, 255, 255, .1) !important;
    background: rgba(0, 0, 0, .15);
    position: relative;
}
.kb-site-footer .border-top a:hover { color: var(--kb-orange); }

.kb-footer-social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem; border-radius: 50%;
    background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .75);
    font-size: 1rem; transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.kb-footer-social-link:hover { background: var(--kb-orange); color: #fff; transform: translateY(-2px); }

.kb-footer-newsletter {
    display: flex; flex-direction: column; gap: 1rem;
}
@media (min-width: 576px) {
    .kb-footer-newsletter { flex-direction: row; align-items: center; justify-content: space-between; }
}
.kb-footer-newsletter-form {
    display: flex; gap: .5rem; width: 100%;
}
@media (min-width: 576px) {
    .kb-footer-newsletter-form { width: auto; }
}
.kb-footer-newsletter-input {
    min-width: 0; flex: 1;
    border-radius: 12px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .1);
    padding: .55rem .9rem; font-size: .88rem; color: #fff;
}
@media (min-width: 576px) { .kb-footer-newsletter-input { width: 15rem; } }
.kb-footer-newsletter-input::placeholder { color: rgba(255, 255, 255, .4); }
.kb-footer-newsletter-input:focus { outline: none; border-color: var(--kb-orange); background: rgba(255, 255, 255, .15); }
.kb-footer-newsletter-input.is-invalid { border-color: #ff8a8a; }
.kb-footer-newsletter-form .btn-kb-gradient { flex-shrink: 0; padding: .55rem 1.2rem; }

/* ---------- Auth (connexion / inscription) ---------- */
.kb-auth-section { position: relative; overflow: hidden; min-height: calc(100vh - 320px); display: flex; align-items: center; }
.kb-auth-card { width: 100%; max-width: 30rem; position: relative; z-index: 1; }
.kb-auth-card--wide { max-width: 42rem; }

.kb-role-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.kb-role-choice-label {
    display: flex; align-items: center; gap: .75rem; cursor: pointer;
    border: 1.5px solid var(--kb-border); border-radius: 16px; padding: .8rem 1rem;
    font-weight: 500; font-size: .88rem; color: var(--kb-navy); background: #fff;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.kb-role-choice-label i {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--kb-muted-bg); color: var(--kb-muted); font-size: 1.15rem;
    transition: background-color .2s ease, color .2s ease;
}
.kb-role-choice-label:hover { border-color: rgba(247, 111, 13, .4); transform: translateY(-2px); }
.kb-role-choice-input:checked + .kb-role-choice-label {
    color: #fff; border-color: transparent;
    background: var(--kb-orange-cta);
    box-shadow: var(--kb-shadow-glow);
}
.kb-role-choice-input:checked + .kb-role-choice-label i { background: rgba(255, 255, 255, .22); color: #fff; }
.kb-role-choice-input:focus-visible + .kb-role-choice-label { outline: 2px solid var(--kb-orange); outline-offset: 2px; }

@media (max-width: 575.98px) {
    /* 3 cartes compactes icône-au-dessus côte à côte plutôt que 3 lignes empilées pleine largeur
       — même geste que la grille de catégories, moins de scroll pour arriver au reste du
       formulaire. */
    .kb-role-choice { gap: .5rem; }
    .kb-role-choice-label { flex-direction: column; gap: .4rem; padding: .75rem .4rem; text-align: center; font-size: .76rem; }
    .kb-role-choice-label i { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
}

/* Champs du formulaire d'inscription/connexion : bootstrap par défaut n'a aucun style propre au
   site, on aligne sur le langage visuel des cartes (bordures douces, focus orange, radius 12). */
.kb-auth-section .form-label { color: var(--kb-navy); margin-bottom: .35rem; }
.kb-auth-section .form-control,
.kb-auth-section .form-select {
    border: 1.5px solid var(--kb-border); border-radius: 12px; background: var(--kb-muted-bg);
    padding: .65rem .9rem; font-size: .92rem; color: var(--kb-navy);
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.kb-auth-section .form-control:focus,
.kb-auth-section .form-select:focus {
    border-color: var(--kb-orange); background: #fff;
    box-shadow: 0 0 0 .2rem rgba(247, 111, 13, .15);
}
.kb-auth-section .form-control.is-invalid,
.kb-auth-section .form-select.is-invalid { border-color: #dc3545; }
.kb-auth-section .form-control:disabled,
.kb-auth-section .form-select:disabled { background: var(--kb-muted-bg); opacity: .55; }

.kb-field { position: relative; }
.kb-field > i.kb-field-icon {
    position: absolute; left: .95rem; top: 50%; transform: translateY(-50%);
    color: var(--kb-muted); font-size: .95rem; pointer-events: none; transition: color .2s ease;
}
.kb-field > .form-control,
.kb-field > .form-select { padding-left: 2.6rem; }
.kb-field:focus-within > i.kb-field-icon { color: var(--kb-orange); }

.kb-auth-section input[type="file"].form-control { padding-top: .5rem; padding-bottom: .5rem; }
.kb-auth-section input[type="file"].form-control::file-selector-button {
    border: none; border-radius: 999px; padding: .4rem 1rem; margin-right: .75rem;
    background: #fff; color: var(--kb-navy); font-weight: 500; font-size: .82rem;
    box-shadow: 0 0 0 1px var(--kb-border) inset; transition: background-color .2s ease;
}
.kb-auth-section input[type="file"].form-control::file-selector-button:hover { background: var(--kb-muted-bg); }

.kb-form-section-label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--kb-muted); margin: 1.85rem 0 .75rem;
}

.kb-alert-success, .kb-alert-notice {
    border: 1px solid var(--kb-border); border-radius: 14px; color: var(--kb-navy);
    padding: .75rem 1.1rem; font-size: .9rem;
}
.kb-alert-success { background: rgba(30, 161, 20, .1); border-color: rgba(30, 161, 20, .25); }
.kb-alert-success i { color: var(--kb-green); }
.kb-alert-notice { background: rgba(20, 33, 61, .05); }
.kb-alert-notice i { color: var(--kb-muted); }

/* ---------- Forum ---------- */
.kb-forum-topic-card { display: block; color: inherit; }
.kb-forum-topic-card:hover h2 { color: var(--kb-orange-cta); }
.kb-forum-excerpt {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Dashboard (mon-compte) ---------- */
.kb-dash-hero {
    background: #fff; border: 1px solid var(--kb-border); border-radius: var(--kb-radius);
    box-shadow: var(--kb-shadow-soft); overflow: hidden;
}
.kb-dash-hero-cover {
    height: 108px; position: relative; overflow: hidden;
    background: linear-gradient(120deg, var(--kb-orange) 0%, var(--kb-purple) 65%, var(--kb-green) 130%);
}
.kb-dash-hero-grid {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .35) 1px, transparent 1px);
    background-size: 16px 16px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent);
}
.kb-dash-hero-body {
    display: flex; align-items: flex-end; gap: 1.25rem; flex-wrap: wrap;
    padding: 0 1.75rem 1.5rem;
}
/* Seul l'avatar chevauche la bande de couverture (comme une photo de profil) : le texte reste
   toujours sur fond blanc, jamais sur le dégradé — sinon "Bonjour, {nom}" perd son contraste par
   endroits selon la couleur du dégradé sous lui. `top` (et non `margin-top`) pour que le décalage
   soit purement visuel et n'entraîne pas le texte voisin dans le calcul d'alignement flex. */
.kb-dash-avatar-wrap { position: relative; top: -42px; flex-shrink: 0; }
.kb-dash-avatar {
    width: 86px; height: 86px; border-radius: 50%;
    background: linear-gradient(135deg, var(--kb-orange-cta), var(--kb-purple));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1.7rem;
    border: 4px solid #fff; box-shadow: var(--kb-shadow-glow);
}
.kb-dash-avatar-status {
    position: absolute; bottom: 4px; right: 4px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--kb-green); border: 3px solid #fff;
}
.kb-dash-hero-meta {
    display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--kb-muted);
}
.kb-wave { display: inline-block; animation: kb-wave-hand 2.2s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes kb-wave-hand {
    0%, 60%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    40% { transform: rotate(10deg); }
}

.kb-pill {
    display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .8rem;
    border-radius: 999px; font-size: .78rem; font-weight: 600;
}
.kb-pill--orange { background: rgba(247, 111, 13, .12); color: var(--kb-orange-cta); }
.kb-pill--green { background: rgba(30, 161, 20, .12); color: var(--kb-green); }
.kb-pill--purple { background: rgba(146, 76, 210, .12); color: var(--kb-purple); }
.kb-pill--muted { background: var(--kb-muted-bg); color: var(--kb-muted); }

.kb-stock-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem 1rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
    border: 1px solid transparent;
}
.kb-stock-badge--in { background: rgba(30, 161, 20, .1); color: var(--kb-green); border-color: rgba(30, 161, 20, .25); }
.kb-stock-badge--out { background: var(--kb-muted-bg); color: var(--kb-muted); border-color: var(--kb-border); }
.kb-stock-badge--low {
    background: rgba(247, 111, 13, .1); color: var(--kb-orange-cta); border-color: rgba(247, 111, 13, .3);
    animation: kb-stock-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .kb-stock-badge--low { animation: none; }
}
@keyframes kb-stock-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(247, 111, 13, .22); }
    50% { box-shadow: 0 0 0 6px rgba(247, 111, 13, 0); }
}
.kb-stock-badge--sm { padding: .25rem .6rem; font-size: .72rem; gap: .3rem; }
.kb-stock-badge--sm i { font-size: .8rem; }

.kb-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.kb-product-price {
    font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
    color: var(--kb-orange-cta); line-height: 1; white-space: nowrap;
}
.kb-product-price small {
    font-family: var(--font-sans); font-size: .65rem; font-weight: 600;
    color: var(--kb-muted); margin-left: .2rem; letter-spacing: .02em;
}

.kb-stock-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--kb-muted-bg); color: var(--kb-muted);
    font-size: .72rem; font-weight: 600; white-space: nowrap;
    padding: .3rem .6rem .3rem .5rem; border-radius: 999px;
}
.kb-stock-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--kb-green); flex-shrink: 0; }

.kb-qty-input { width: 3.75rem; text-align: center; border-radius: 999px !important; }

.kb-btn-add-cart {
    flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    border: none; border-radius: 999px; padding: .5rem 1rem;
    background: var(--kb-orange-cta);
    color: #fff; font-weight: 600; font-size: .82rem; white-space: nowrap;
    box-shadow: 0 8px 20px -10px rgba(247, 111, 13, .5);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.kb-btn-add-cart:hover { color: #fff; background: var(--kb-orange); transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(247, 111, 13, .6); }
.kb-btn-add-cart:active { transform: translateY(0); }

/* ---------- En-tête boutique ---------- */
.kb-shop-header { position: relative; overflow: hidden; }
.kb-shop-header-avatar {
    position: relative; flex-shrink: 0;
    width: 4.25rem; height: 4.25rem; border-radius: 18px; overflow: visible;
    background: linear-gradient(135deg, var(--kb-orange-cta), var(--kb-purple)); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; text-transform: uppercase;
    box-shadow: 0 8px 20px -8px rgba(20, 33, 61, .3);
}
.kb-shop-header-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.kb-shop-header-badge {
    position: absolute; bottom: -4px; right: -4px;
    width: 1.4rem; height: 1.4rem; border-radius: 50%;
    background: #fff; color: var(--kb-green);
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; box-shadow: 0 2px 6px rgba(20, 33, 61, .25);
}

.kb-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.kb-stat-tile {
    background: #fff; border: 1px solid var(--kb-border); border-radius: 16px; padding: 1.25rem;
    transition: transform .2s ease, box-shadow .2s ease;
}
.kb-stat-tile:hover { transform: translateY(-3px); box-shadow: var(--kb-shadow-soft); }
.kb-stat-tile-icon {
    width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center;
    justify-content: center; font-size: 1.05rem; margin-bottom: .85rem;
}
.kb-stat-tile-label { font-size: .78rem; color: var(--kb-muted); margin-bottom: .2rem; }
.kb-stat-tile-value {
    font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; color: var(--kb-navy);
    margin-bottom: 0;
}
.kb-stat-tile-unit { font-size: .85rem; font-weight: 500; color: var(--kb-muted); }
.kb-stat-tile-link {
    display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600;
    color: var(--kb-orange-cta); text-decoration: none; margin-top: .6rem;
}
.kb-stat-tile-link:hover { color: var(--kb-navy); }

.kb-meter-track { height: 6px; border-radius: 999px; background: var(--kb-muted-bg); overflow: hidden; margin-top: .7rem; }
.kb-meter-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--kb-orange), var(--kb-green)); }

.kb-section-card {
    background: #fff; border: 1px solid var(--kb-border); border-radius: var(--kb-radius);
    padding: 1.5rem; box-shadow: var(--kb-shadow-soft);
}
.kb-section-title {
    display: flex; align-items: center; gap: .55rem; font-size: 1.02rem; font-weight: 700;
    margin-bottom: 1rem;
}
.kb-section-title i { color: var(--kb-orange-cta); }

.kb-activity-item {
    display: flex; align-items: center; gap: .85rem; padding: .8rem 0;
    border-bottom: 1px solid var(--kb-border);
}
.kb-activity-item:last-child { border-bottom: none; padding-bottom: 0; }
button.kb-activity-item { cursor: pointer; transition: background-color .15s ease; border-radius: 10px; }
button.kb-activity-item:hover, button.kb-activity-item:focus-visible { background: var(--kb-muted-bg); }
.kb-activity-icon {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: .95rem;
}

.kb-dispute-images { display: flex; flex-wrap: wrap; gap: .4rem; }
.kb-dispute-image {
    width: 3rem; height: 3rem; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--kb-border); display: block;
    transition: transform .15s ease, border-color .15s ease;
}
.kb-dispute-image img { width: 100%; height: 100%; object-fit: cover; }
.kb-dispute-image:hover { transform: translateY(-2px); border-color: rgba(247, 111, 13, .4); }

.kb-info-list { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin: 0; }
.kb-info-list dt { font-size: .78rem; color: var(--kb-muted); font-weight: 500; }
.kb-info-list dd { font-size: .85rem; color: var(--kb-navy); font-weight: 500; margin: 0; text-align: right; }

.kb-back-link {
    display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 500;
    color: var(--kb-muted); text-decoration: none; transition: color .2s ease, transform .2s ease;
}
.kb-back-link:hover { color: var(--kb-orange-cta); transform: translateX(-2px); }

/* ---------- Messagerie directe Client ↔ Commerçant (vue éclatée liste + fil) ---------- */
.kb-chat-app {
    display: flex; align-items: stretch;
    height: 72vh; min-height: 32rem; max-height: 46rem;
    background: #fff; border: 1px solid var(--kb-border); border-radius: 24px; overflow: hidden;
    box-shadow: var(--kb-shadow-glow);
}

.kb-chat-sidebar {
    display: flex; flex-direction: column; flex: 0 0 21rem; min-width: 0;
    border-right: 1px solid var(--kb-border); background: var(--kb-muted-bg);
}
.kb-chat-sidebar-header { padding: 1.35rem 1.35rem 1rem; }
.kb-chat-sidebar-header h1 { font-size: 1.15rem; font-weight: 800; color: var(--kb-navy); }
.kb-chat-sidebar-list { flex: 1 1 auto; overflow-y: auto; padding: 0 .6rem .6rem; }
.kb-chat-sidebar-item {
    display: flex; align-items: center; gap: .65rem; padding: .7rem .75rem; margin-bottom: .25rem;
    border-radius: 14px; text-decoration: none; color: inherit;
    transition: background-color .15s ease;
}
.kb-chat-sidebar-item:hover { background: #fff; }
.kb-chat-sidebar-item.is-active { background: #fff; box-shadow: var(--kb-shadow-soft); }
.kb-chat-sidebar-avatar {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 2.5rem; height: 2.5rem; border-radius: 50%; font-weight: 700; font-size: .82rem; color: #fff;
    background: linear-gradient(135deg, var(--kb-orange-cta), var(--kb-purple));
}
.kb-chat-sidebar-text { display: flex; flex-direction: column; flex: 1 1 auto; }
.kb-chat-sidebar-name { font-size: .86rem; font-weight: 600; color: var(--kb-navy); }
.kb-chat-sidebar-item.is-unread .kb-chat-sidebar-name { font-weight: 800; }
.kb-chat-sidebar-preview { font-size: .74rem; color: var(--kb-muted); }
.kb-chat-sidebar-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; flex-shrink: 0; }
.kb-chat-sidebar-time { font-size: .68rem; color: var(--kb-muted); white-space: nowrap; }
.kb-chat-sidebar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kb-orange-cta); align-self: flex-end; }
.kb-chat-sidebar-empty { padding: 1.5rem 1rem; text-align: center; color: var(--kb-muted); }
.kb-chat-sidebar-empty i { font-size: 1.5rem; display: block; margin-bottom: .5rem; opacity: .6; }
.kb-chat-sidebar-empty p { font-size: .78rem; line-height: 1.5; }

.kb-chat-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.kb-chat-main-empty {
    margin: auto; text-align: center; color: var(--kb-muted); padding: 2rem; max-width: 22rem;
}
.kb-chat-main-empty i { font-size: 2.5rem; display: block; margin-bottom: .75rem; opacity: .5; }
.kb-chat-mobile-back {
    display: none; align-items: center; justify-content: center; flex-shrink: 0;
    width: 2.2rem; height: 2.2rem; border-radius: 50%; color: var(--kb-navy);
}
.kb-chat-mobile-back:hover { background: var(--kb-muted-bg); }

.kb-chat-panel-header {
    display: flex; align-items: center; gap: .85rem; padding: 1.1rem 1.35rem;
    border-bottom: 1px solid var(--kb-border);
    background: linear-gradient(180deg, var(--kb-muted-bg), #fff);
}
.kb-chat-panel-avatar {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 2.9rem; height: 2.9rem; border-radius: 50%; font-weight: 700; font-size: .95rem; color: #fff;
    background: linear-gradient(135deg, var(--kb-orange-cta), var(--kb-purple));
    box-shadow: 0 8px 18px -6px rgba(146, 76, 210, .4);
}
.kb-chat-panel-name { margin: 0; font-weight: 800; font-size: 1.05rem; color: var(--kb-navy); }
.kb-chat-panel-sub {
    margin: .1rem 0 0; font-size: .75rem; color: var(--kb-green); font-weight: 500;
    display: flex; align-items: center; gap: .3rem;
}
.kb-chat-panel-link {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 2.4rem; height: 2.4rem; border-radius: 50%; font-size: 1rem;
    background: #fff; border: 1px solid var(--kb-border); color: var(--kb-navy);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.kb-chat-panel-link:hover { background: var(--kb-orange-cta); border-color: var(--kb-orange-cta); color: #fff; transform: translateY(-1px); }

.kb-chat-context-strip {
    display: flex; align-items: center; gap: .65rem; padding: .65rem 1.35rem;
    border-bottom: 1px solid var(--kb-border); background: #fff;
    transition: background-color .2s ease;
}
.kb-chat-context-strip:hover { background: var(--kb-muted-bg); }
.kb-chat-context-media {
    flex-shrink: 0; width: 2.35rem; height: 2.35rem; border-radius: 9px; overflow: hidden;
    background: var(--kb-muted-bg); display: flex; align-items: center; justify-content: center;
    color: var(--kb-muted); font-size: 1rem;
}
.kb-chat-context-media img { width: 100%; height: 100%; object-fit: cover; }
.kb-chat-context-strip-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.kb-chat-context-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--kb-muted); }
.kb-chat-context-name { font-size: .84rem; font-weight: 600; color: var(--kb-navy); }
.kb-chat-context-strip-chevron { color: var(--kb-muted); font-size: .8rem; flex-shrink: 0; }

.kb-chat-safety-ribbon {
    display: flex; align-items: center; gap: .55rem; padding: .55rem 1.35rem;
    background: rgba(247, 111, 13, .08); border-bottom: 1px solid rgba(247, 111, 13, .15);
    font-size: .74rem; color: var(--kb-orange-cta); font-weight: 500;
}
.kb-chat-safety-ribbon i { flex-shrink: 0; font-size: .9rem; }

.kb-chat-thread {
    display: flex; flex-direction: column; gap: .7rem; flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 1.25rem; background: var(--kb-muted-bg);
}
.kb-chat-bubble-row { display: flex; }
.kb-chat-bubble-row--mine { justify-content: flex-end; }
.kb-chat-bubble {
    max-width: 78%; padding: .7rem 1rem; border-radius: 16px;
    background: #fff; border: 1px solid var(--kb-border); box-shadow: var(--kb-shadow-soft);
}
.kb-chat-bubble--mine {
    background: linear-gradient(135deg, var(--kb-orange-cta), var(--kb-orange));
    color: #fff; border-color: transparent; border-bottom-right-radius: 4px;
}
.kb-chat-bubble--theirs { border-bottom-left-radius: 4px; }
.kb-chat-bubble-meta { display: block; font-size: .68rem; opacity: .75; }

.kb-chat-empty {
    margin: auto; text-align: center; color: var(--kb-muted);
}
.kb-chat-empty i { font-size: 1.75rem; display: block; margin-bottom: .5rem; opacity: .6; }
.kb-chat-empty p { font-size: .85rem; line-height: 1.5; }

.kb-chat-composer-wrap { border-top: 1px solid var(--kb-border); background: #fff; }
.kb-chat-composer {
    display: flex; align-items: flex-end; gap: .6rem; padding: .9rem 1.1rem;
}
.kb-chat-composer-attach {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer;
    width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 1.1rem; color: var(--kb-muted);
    background: var(--kb-muted-bg); transition: background-color .2s ease, color .2s ease;
}
.kb-chat-composer-attach:hover { background: rgba(247, 111, 13, .12); color: var(--kb-orange-cta); }
.kb-chat-composer-input {
    flex: 1 1 auto; resize: none; max-height: 120px; padding: .65rem 1rem;
    border: 1px solid var(--kb-border); border-radius: 18px; background: var(--kb-muted-bg);
    font-size: .9rem; line-height: 1.4; transition: border-color .2s ease, background-color .2s ease;
}
.kb-chat-composer-input:focus { outline: none; border-color: rgba(247, 111, 13, .4); background: #fff; }
.kb-chat-composer-input.is-invalid { border-color: var(--kb-danger); }
.kb-chat-composer-send {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 2.75rem; height: 2.75rem; border-radius: 50%; border: none; color: #fff; font-size: 1rem;
    background: linear-gradient(135deg, var(--kb-orange-cta), var(--kb-orange));
    box-shadow: var(--kb-shadow-glow);
    transition: transform .2s ease, box-shadow .2s ease;
}
.kb-chat-composer-send:hover { transform: translateY(-2px) scale(1.04); }
.kb-chat-composer-send:active { transform: translateY(0) scale(.97); }
.kb-chat-composer-error { padding: 0 1.1rem 1rem; font-size: .78rem; color: var(--kb-danger); }

.kb-chat-composer-preview { position: relative; display: inline-flex; padding: .85rem 1.1rem 0; max-width: 100%; }
.kb-chat-composer-preview img {
    width: 4rem; height: 4rem; object-fit: cover; border-radius: 12px; border: 1px solid var(--kb-border);
}
.kb-chat-composer-preview-file {
    display: inline-flex; align-items: center; gap: .5rem; max-width: 16rem; padding: .5rem .85rem;
    border: 1px solid var(--kb-border); border-radius: 12px; background: var(--kb-muted-bg);
    font-size: .8rem; color: var(--kb-navy);
}
.kb-chat-composer-preview-file i { color: var(--kb-orange-cta); font-size: 1.1rem; flex-shrink: 0; }
.kb-chat-composer-preview-remove {
    position: absolute; top: -.4rem; right: .6rem; display: flex; align-items: center; justify-content: center;
    width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid #fff; font-size: .65rem;
    background: var(--kb-navy); color: #fff;
}

.kb-chat-bubble-image {
    display: block; width: 100%; max-width: 14rem; border-radius: 12px; margin-bottom: .4rem;
}
.kb-chat-attachment-card {
    display: flex; align-items: center; gap: .6rem; padding: .55rem .85rem; margin-bottom: .3rem;
    border-radius: 12px; background: rgba(255, 255, 255, .18); text-decoration: none; color: inherit;
    max-width: 14rem;
}
.kb-chat-bubble--theirs .kb-chat-attachment-card { background: var(--kb-muted-bg); }
.kb-chat-attachment-card i { font-size: 1.2rem; flex-shrink: 0; }
.kb-chat-attachment-card span { font-size: .82rem; font-weight: 500; }

.kb-chat-bubble-audio { display: block; width: 15rem; max-width: 100%; margin-bottom: .3rem; height: 2.25rem; }

.kb-chat-composer-mic {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: none;
    width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 1.05rem; color: var(--kb-muted);
    background: var(--kb-muted-bg); transition: background-color .2s ease, color .2s ease;
}
.kb-chat-composer-mic:hover { background: rgba(247, 111, 13, .12); color: var(--kb-orange-cta); }

.kb-chat-recording-bar {
    display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem;
}
.kb-chat-recording-dot {
    width: .6rem; height: .6rem; border-radius: 50%; background: var(--kb-danger); flex-shrink: 0;
    animation: kb-recording-pulse 1.1s ease-in-out infinite;
}
@keyframes kb-recording-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.75); } }
.kb-chat-recording-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--kb-navy); font-size: .9rem; }
.kb-chat-recording-hint { flex: 1 1 auto; font-size: .82rem; color: var(--kb-muted); }
.kb-chat-recording-cancel, .kb-chat-recording-stop {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: none;
    width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 1rem;
    transition: transform .2s ease, box-shadow .2s ease;
}
.kb-chat-recording-cancel { background: var(--kb-muted-bg); color: var(--kb-muted); }
.kb-chat-recording-cancel:hover { background: rgba(220, 53, 69, .12); color: var(--kb-danger); }
.kb-chat-recording-stop {
    color: #fff; background: linear-gradient(135deg, var(--kb-orange-cta), var(--kb-orange));
    box-shadow: var(--kb-shadow-glow);
}
.kb-chat-recording-stop:hover { transform: translateY(-2px) scale(1.04); }

/* Sous md : une seule colonne visible à la fois — la liste par défaut, le fil quand un
   « .kb-chat-app--thread-open » (ajouté uniquement sur la page d'un fil ouvert) est présent. */
@media (max-width: 767.98px) {
    .kb-chat-app { height: auto; min-height: 0; max-height: none; border-radius: 20px; }
    .kb-chat-sidebar { flex-basis: 100%; border-right: none; }
    .kb-chat-main { display: none; }
    .kb-chat-app--thread-open { height: 78vh; }
    .kb-chat-app--thread-open .kb-chat-sidebar { display: none; }
    .kb-chat-app--thread-open .kb-chat-main { display: flex; }
    .kb-chat-mobile-back { display: inline-flex; }
    .kb-chat-panel-header, .kb-chat-context-strip { padding-left: 1rem; padding-right: 1rem; }
}

.kb-map-link {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: .75rem;
    font-size: .82rem; font-weight: 600; color: var(--kb-orange-cta); text-decoration: none;
    transition: transform .2s ease;
}
.kb-map-link:hover { transform: translateX(2px); color: var(--kb-orange-cta); }

.kb-wallet-hero {
    position: relative; overflow: hidden; display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem;
    padding: 1.75rem 2rem; border-radius: var(--kb-radius); color: #fff;
    background: radial-gradient(120% 160% at 0% 0%, #1b2a4d 0%, var(--kb-navy) 55%, #4a2a6e 130%);
    box-shadow: var(--kb-shadow-glow);
}
.kb-wallet-hero-icon {
    width: 62px; height: 62px; border-radius: 18px; flex-shrink: 0; font-size: 1.6rem;
    background: rgba(255, 255, 255, .14); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
}
.kb-wallet-hero-label {
    font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; opacity: .7;
    margin-bottom: .3rem; position: relative; z-index: 1;
}
.kb-wallet-hero-value {
    font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; margin: 0;
    position: relative; z-index: 1;
}
.kb-wallet-hero-value span { font-size: 1.05rem; font-weight: 500; opacity: .75; }

/* ---------- Score hero (anneau de score) ---------- */
.kb-score-hero {
    position: relative; overflow: hidden; display: flex; align-items: center; flex-wrap: wrap; gap: 1.75rem;
    padding: 1.75rem 2rem; border-radius: var(--kb-radius); color: #fff;
    background: radial-gradient(120% 160% at 0% 0%, #1b2a4d 0%, var(--kb-navy) 55%, #4a2a6e 130%);
    box-shadow: var(--kb-shadow-glow);
}
.kb-score-ring {
    position: relative; z-index: 1; flex-shrink: 0; width: 128px; height: 128px; border-radius: 50%;
    background: conic-gradient(var(--score-color, var(--kb-orange)) var(--score-percent, 0%), rgba(255, 255, 255, .16) 0);
    display: flex; align-items: center; justify-content: center;
}
.kb-score-ring-inner {
    width: 100px; height: 100px; border-radius: 50%; background: var(--kb-navy);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.kb-score-ring-value { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; margin: 0; line-height: 1; }
.kb-score-ring-max { font-size: .72rem; opacity: .65; margin: .15rem 0 0; }
.kb-score-hero-info { position: relative; z-index: 1; }
.kb-score-hero-band { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin: .15rem 0 0; }

.kb-wallet-hero-actions {
    position: relative; z-index: 1; display: flex; gap: .65rem; margin-left: auto;
}
@media (max-width: 575.98px) {
    .kb-wallet-hero-actions { margin-left: 0; width: 100%; }
    .kb-wallet-hero-actions > * { flex: 1; }
}

/* ---------- Modale de sécurité « Chat direct » (fiche produit) ---------- */
.kb-chat-modal-content { border: none; border-radius: 24px; overflow: hidden; box-shadow: var(--kb-shadow-glow); }
.kb-chat-modal-close { position: absolute; top: 1.1rem; right: 1.1rem; z-index: 2; }
.kb-chat-modal-hero {
    text-align: center; padding: 2.25rem 1.75rem 1.5rem;
    background:
        radial-gradient(120% 140% at 50% -10%, rgba(247, 111, 13, .16), transparent 60%),
        linear-gradient(180deg, var(--kb-muted-bg), #fff);
}
.kb-chat-modal-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 4rem; height: 4rem; border-radius: 50%; font-size: 1.75rem; color: #fff;
    background: linear-gradient(135deg, var(--kb-orange-cta), var(--kb-orange));
    box-shadow: 0 14px 30px -10px rgba(247, 111, 13, .55);
    margin-bottom: 1rem;
}
.kb-chat-modal-title { font-size: 1.2rem; font-weight: 800; margin: 0 0 .5rem; }
.kb-chat-modal-subtitle { font-size: .88rem; color: var(--kb-muted); margin: 0 auto; max-width: 26rem; }
.kb-chat-modal-body { padding: 1.5rem 1.75rem 1.75rem; }
.kb-chat-safety-list { display: flex; flex-direction: column; gap: 1rem; }
.kb-chat-safety-item { display: flex; align-items: flex-start; gap: .85rem; }
.kb-chat-safety-icon {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 2.35rem; height: 2.35rem; border-radius: 11px; font-size: 1.05rem;
}
.kb-chat-safety-icon--orange { background: rgba(247, 111, 13, .13); color: var(--kb-orange-cta); }
.kb-chat-safety-icon--amber { background: rgba(245, 166, 35, .16); color: #b7791f; }
.kb-chat-safety-icon--red { background: rgba(220, 53, 69, .12); color: var(--kb-danger); }
.kb-chat-safety-icon--green { background: rgba(30, 161, 20, .13); color: var(--kb-green); }
.kb-chat-safety-title { font-size: .88rem; font-weight: 700; color: var(--kb-navy); margin: 0 0 .15rem; }
.kb-chat-safety-text { font-size: .82rem; color: var(--kb-muted); margin: 0; line-height: 1.45; }

/* ---------- Wallet modal (déposer / retirer) ---------- */
.kb-wallet-modal-content { border: none; border-radius: 20px; overflow: hidden; box-shadow: var(--kb-shadow-glow); }
.kb-wallet-modal-header { border-bottom: none; padding: 1.5rem 1.5rem 0; }
.kb-wallet-modal-title { font-size: 1.1rem; font-weight: 700; }
.kb-wallet-modal-tabs { border-bottom: 1px solid var(--kb-border); padding: 0 1.5rem; margin-top: .75rem; gap: .5rem; }
.kb-wallet-modal-tabs .nav-link {
    border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: .7rem .25rem;
    margin-right: 1.25rem; font-weight: 600; font-size: .92rem; color: var(--kb-muted);
    display: inline-flex; align-items: center; gap: .45rem; transition: color .2s ease, border-color .2s ease;
}
.kb-wallet-modal-tabs .nav-link:hover { color: var(--kb-navy); }
.kb-wallet-modal-tabs .nav-link.active { color: var(--kb-orange-cta); border-color: var(--kb-orange-cta); background: none; }
.kb-wallet-modal-body { padding: 1.5rem; }

/* ---------- Profile tabs (mêmes codes visuels que les onglets de la modal portefeuille) ---------- */
.kb-profile-tabs { border-bottom: 1px solid var(--kb-border); margin-bottom: 1.5rem; gap: .5rem; }
.kb-profile-tabs .nav-link {
    border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 0 .25rem .8rem;
    margin-right: 1.5rem; font-weight: 600; font-size: .92rem; color: var(--kb-muted);
    display: inline-flex; align-items: center; gap: .45rem; transition: color .2s ease, border-color .2s ease;
}
.kb-profile-tabs .nav-link:hover { color: var(--kb-navy); }
.kb-profile-tabs .nav-link.active { color: var(--kb-orange-cta); border-color: var(--kb-orange-cta); background: none; }

/* ---------- Nav user chip ---------- */
.kb-nav-actions { gap: .85rem !important; }
.kb-user-chip {
    display: inline-flex; align-items: center; gap: .7rem; border: 1px solid var(--kb-border);
    background: #fff; border-radius: 999px; padding: .35rem 1.15rem .35rem .35rem;
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.kb-user-chip:hover, .kb-user-chip[aria-expanded="true"] {
    border-color: rgba(247, 111, 13, .35); box-shadow: 0 6px 18px -8px rgba(20, 33, 61, .22); transform: translateY(-1px);
}
.kb-user-chip-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--kb-orange-cta), var(--kb-purple));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: .92rem;
    box-shadow: 0 0 0 3px rgba(146, 76, 210, .12);
}
.kb-user-chip-name {
    font-size: 1rem; font-weight: 600; color: var(--kb-navy);
    max-width: 12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 1199.98px) { .kb-user-chip-name { max-width: 8rem; } }
.kb-user-chip-caret { font-size: .8rem; color: var(--kb-muted); transition: transform .2s ease; }
.kb-user-chip[aria-expanded="true"] .kb-user-chip-caret { transform: rotate(180deg); }

.kb-user-menu {
    border: 1px solid var(--kb-border); border-radius: 18px; box-shadow: var(--kb-shadow-soft);
    padding: .65rem; margin-top: .7rem !important; width: 18.5rem; max-width: 92vw;
    max-height: 80vh; overflow-y: auto;
}
@media (max-width: 991.98px) {
    /* Dans la nav mobile repliée, le chip utilisateur n'est plus collé au bord droit de l'écran
       comme sur desktop — dropdown-menu-end tentait quand même d'aligner le bord droit du menu
       sur celui du chip et le poussait hors écran (x négatif). En position statique, le menu
       s'affiche simplement sous le bouton, pleine largeur de la nav. */
    .kb-nav-actions .dropdown { width: 100%; }
    .kb-user-menu {
        position: static !important; inset: auto !important; transform: none !important;
        width: 100% !important; max-width: 100% !important; margin-top: .6rem !important;
    }
}
.kb-user-menu .dropdown-item {
    display: flex; align-items: center; gap: .8rem; border-radius: 11px; padding: .75rem .9rem;
    font-size: .93rem; font-weight: 500; color: var(--kb-navy);
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.kb-user-menu .dropdown-item i { color: var(--kb-orange-cta); font-size: 1.1rem; width: 1.3rem; text-align: center; flex-shrink: 0; }
.kb-user-menu .dropdown-item:hover, .kb-user-menu .dropdown-item:focus {
    background: var(--kb-muted-bg); transform: translateX(2px); text-decoration: none;
}
.kb-user-menu .dropdown-item:focus-visible { outline: 2px solid var(--kb-orange); outline-offset: -2px; }
.kb-user-menu .dropdown-item.active {
    background: rgba(247, 111, 13, .1); color: var(--kb-orange-cta);
}
.kb-user-menu .dropdown-item.active i { color: var(--kb-orange-cta); }
.kb-user-menu .dropdown-item.active:hover, .kb-user-menu .dropdown-item.active:focus {
    background: rgba(247, 111, 13, .16);
}
.kb-user-menu .dropdown-divider { margin: .5rem 0; border-color: var(--kb-border); }
.kb-user-menu-logout { width: 100%; text-align: left; background: none; border: none; }
.kb-user-menu-logout i { color: var(--kb-muted) !important; }
.kb-user-menu-logout:hover { background: rgba(247, 111, 13, .1) !important; color: var(--kb-orange-cta); transform: translateX(2px); }
.kb-user-menu-logout:hover i { color: var(--kb-orange-cta) !important; }

/* Apparition douce des menus déroulants du header (compte, notifications). */
.kb-user-menu.show, .kb-notif-menu.show { animation: kb-dropdown-in .18s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes kb-dropdown-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .kb-user-menu.show, .kb-notif-menu.show { animation: none; } }

/* ---------- Nav notification bell ---------- */
.kb-notif-bell {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--kb-border);
    background: #fff; color: var(--kb-navy); font-size: 1.25rem; transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.kb-notif-bell:hover, .kb-notif-bell[aria-expanded="true"] {
    border-color: rgba(247, 111, 13, .35); box-shadow: 0 6px 18px -8px rgba(20, 33, 61, .22); transform: translateY(-1px);
}
.kb-notif-badge {
    position: absolute; top: -3px; right: -3px; min-width: 21px; height: 21px; padding: 0 5px;
    display: flex; align-items: center; justify-content: center; border-radius: 999px;
    background: var(--kb-danger); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1;
    border: 2px solid #fff; box-shadow: 0 2px 6px -1px rgba(220, 53, 69, .5);
}

.kb-notif-menu {
    border: 1px solid var(--kb-border); border-radius: 14px; box-shadow: var(--kb-shadow-soft);
    padding: .5rem; margin-top: .6rem !important; width: 20rem; max-width: 90vw;
}
.kb-notif-menu-title {
    padding: .4rem .7rem; margin: 0; font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--kb-muted);
}
.kb-notif-item { border-radius: 10px; padding: .55rem .7rem; }
button.kb-notif-item { display: block; cursor: pointer; transition: background-color .15s ease; }
button.kb-notif-item:hover, button.kb-notif-item:focus-visible { background: var(--kb-muted-bg); }
.kb-notif-item--unread { background: rgba(247, 111, 13, .06); }
button.kb-notif-item--unread:hover, button.kb-notif-item--unread:focus-visible { background: rgba(247, 111, 13, .12); }
.kb-notif-item-title { margin: 0; font-size: .87rem; font-weight: 600; color: var(--kb-navy); }
.kb-notif-item-body {
    margin: .15rem 0 0; font-size: .78rem; color: var(--kb-muted); overflow: hidden;
    text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.kb-notif-item-time { margin: .25rem 0 0; font-size: .68rem; color: var(--kb-muted); }
.kb-notif-empty { padding: .7rem; margin: 0; font-size: .85rem; color: var(--kb-muted); text-align: center; }
.kb-notif-menu-link {
    display: block; margin-top: .3rem; border-radius: 9px; padding: .6rem .7rem; text-align: center;
    font-size: .85rem; font-weight: 600; color: var(--kb-orange-cta); text-decoration: none;
}
.kb-notif-menu-link:hover { background: var(--kb-muted-bg); }

/* ---------- Homepage v2 ---------- */
.btn-kb-lg { padding: .85rem 1.75rem; font-size: 1rem; }

.kb-hero-v2 { padding-bottom: 2.5rem; min-height: clamp(360px, 68vh, 720px); }
@media (max-width: 767.98px) {
    /* Sur mobile, une hauteur basée sur le viewport (portrait, étroit) ne correspond pas à la
       forme large d'une bannière (~16:9) : avec object-fit:cover, ça rognait la quasi-totalité
       de l'image en largeur pour remplir la hauteur — texte et logos de la bannière disparaissaient
       du cadre. On bascule sur un ratio d'aspect proche de celui de la bannière, avec
       object-fit:contain pour ne jamais couper son contenu (les bandes vides éventuelles gardent
       le dégradé de marque plutôt que du vide). */
    .kb-hero-v2 { min-height: 0; aspect-ratio: 5 / 2; padding-bottom: 0; }
    .kb-hero-v2 .kb-banner-img { object-fit: contain; background: var(--kb-bg); }
    .kb-hero-v2 .kb-blob { width: 10rem !important; height: 10rem !important; }
}
.kb-hero-grid-pattern {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(20, 33, 61, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 33, 61, .05) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(60% 55% at 50% 30%, rgba(0, 0, 0, .8), transparent);
    mask-image: radial-gradient(60% 55% at 50% 30%, rgba(0, 0, 0, .8), transparent);
}
.kb-hero-title { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.05; letter-spacing: -.01em; }
.kb-hero-badge-dot {
    display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--kb-green); box-shadow: 0 0 0 0 rgba(30, 161, 20, .5);
    animation: kb-pulse-ring 2s ease-in-out infinite;
}
.kb-hero-stat-value {
    font-family: var(--font-display); font-weight: 700; font-size: 1.7rem;
    background: linear-gradient(135deg, var(--kb-navy), var(--kb-orange-cta));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kb-hero-stat { display: flex; flex-direction: column; align-items: flex-start; }
.kb-hero-stat-icon {
    display: flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 10px; font-size: 1.05rem;
    margin-bottom: .5rem; transition: transform .2s ease;
}
.kb-hero-stat:hover .kb-hero-stat-icon { transform: translateY(-2px) scale(1.05); }
.kb-hero-stat-icon--orange { background: rgba(247, 111, 13, .13); color: var(--kb-orange); }
.kb-hero-stat-icon--purple { background: rgba(146, 76, 210, .13); color: var(--kb-purple); }
.kb-hero-stat-icon--green { background: rgba(30, 161, 20, .13); color: var(--kb-green); }
.kb-hero-stat-divider { align-self: stretch; width: 1px; background: var(--kb-border); flex-shrink: 0; }
.kb-hero-stats { min-width: 0; }
.kb-hero-stats .kb-hero-stat { min-width: 0; }
@media (max-width: 420px) {
    .kb-hero-stat-value { font-size: 1.35rem; }
    .kb-hero-stat-icon { width: 1.9rem; height: 1.9rem; font-size: .9rem; margin-bottom: .35rem; }
    .kb-hero-stats .small { font-size: .72rem; }
}
.kb-hero-live-card {
    position: absolute; left: 50%; bottom: -1.1rem; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: .65rem; background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .6); border-radius: 16px; padding: .65rem 1.1rem;
    box-shadow: var(--kb-shadow-soft); white-space: nowrap; animation: kb-chip-float 3s ease-in-out infinite;
}
.kb-hero-live-card-sub { font-size: .72rem; color: var(--kb-muted); }
@media (max-width: 575.98px) { .kb-hero-live-card { position: static; transform: none; margin: 1.5rem auto 0; width: fit-content; } }

.kb-hero-scroll-cue {
    position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
    align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--kb-border); color: var(--kb-muted); animation: kb-scroll-cue 2s ease-in-out infinite;
}

/* ---------- Carrousel de bannières en fond du hero (géré depuis l'admin « Apparence ») ---------- */
.kb-hero-banner-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.kb-hero-banner-bg .carousel-inner, .kb-hero-banner-bg .carousel-item { height: 100%; }
.kb-banner-img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.12); animation: kb-banner-kenburns 6.5s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes kb-banner-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
/* Léger dégradé bas : juste de quoi garder les indicateurs lisibles sur une image claire,
   sans assombrir la bannière (plus de texte à protéger, elle occupe tout le hero). */
.kb-hero-banner-scrim {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(0deg, rgba(20, 33, 61, .4) 0%, transparent 28%);
}
.kb-hero-banner-indicators { position: absolute; right: 1.5rem; bottom: 1.35rem; left: auto; margin: 0; gap: .4rem; z-index: 2; }
.kb-hero-banner-indicators [data-bs-target] {
    width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .55); opacity: 1;
    border: 0; transition: width .25s ease, background .25s ease;
}
.kb-hero-banner-indicators .active { width: 22px; background: #fff; }

/* Transition « cube » 3D entre les bannières : chaque image pivote comme une face de cube
   autour d'un axe vertical central au lieu du fondu/glissement par défaut de Bootstrap. On
   réécrit uniquement les transforms associées aux classes que le JS du carrousel bascule déjà
   (.active, .carousel-item-next/-prev, -start/-end) — aucun changement de comportement JS. */
.kb-banner-cube .carousel-inner { perspective: 1600px; }
.kb-banner-cube .carousel-item {
    position: absolute; inset: 0; float: none; margin-right: 0; display: none;
    backface-visibility: hidden;
    transition: transform 1s cubic-bezier(.645, .045, .355, 1);
}
.kb-banner-cube .carousel-item.active,
.kb-banner-cube .carousel-item-next,
.kb-banner-cube .carousel-item-prev {
    display: block;
}
.kb-banner-cube .carousel-item.active { transform: rotateY(0deg) translateZ(0); z-index: 2; }
.kb-banner-cube .carousel-item-next:not(.carousel-item-start) { transform: rotateY(90deg) translateZ(140px); z-index: 1; }
.kb-banner-cube .carousel-item-prev:not(.carousel-item-end) { transform: rotateY(-90deg) translateZ(140px); z-index: 1; }
.kb-banner-cube .active.carousel-item-end { transform: rotateY(-90deg) translateZ(140px); }
.kb-banner-cube .active.carousel-item-start { transform: rotateY(90deg) translateZ(140px); }
.kb-banner-cube .carousel-item-next.carousel-item-start,
.kb-banner-cube .carousel-item-prev.carousel-item-end { transform: rotateY(0deg) translateZ(0); }
@media (prefers-reduced-motion: reduce) {
    .kb-banner-cube .carousel-item { transition: opacity .3s ease; }
    .kb-banner-cube .carousel-item-next:not(.carousel-item-start),
    .kb-banner-cube .carousel-item-prev:not(.carousel-item-end),
    .kb-banner-cube .active.carousel-item-end,
    .kb-banner-cube .active.carousel-item-start { transform: none; opacity: 0; }
}

/* ---------- Marquee (bande d'annonces) ---------- */
.kb-marquee-section { background: var(--kb-navy); }
.kb-marquee-section .text-muted-soft { color: rgba(255, 255, 255, .6) !important; }
.kb-marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.kb-marquee-track { display: flex; align-items: center; gap: 2.5rem; width: max-content; animation: kb-marquee-scroll 22s linear infinite; }
.kb-marquee:hover .kb-marquee-track { animation-play-state: paused; }
.kb-marquee-item {
    display: inline-flex; align-items: center; gap: .65rem; font-weight: 600; font-size: 1.3rem;
    color: rgba(255, 255, 255, .85); white-space: nowrap; transition: color .2s ease;
}
.kb-marquee-item i { font-size: 1.55rem; color: var(--kb-orange); }
.kb-marquee:hover .kb-marquee-item { color: #fff; }
.kb-marquee--reverse .kb-marquee-track { animation-direction: reverse; }

/* ---------- Partenaires (logos page d'accueil, carrousel Swiper.js) ---------- */
.kb-partner-swiper {
    overflow: hidden; position: relative; padding: .5rem 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.kb-partner-swiper .swiper-wrapper { align-items: center; transition-timing-function: linear; }
.kb-partner-swiper .swiper-slide { width: auto; margin-right: 3.5rem; }
.kb-partner-logo-wrap { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kb-partner-logo {
    height: 76px; max-width: 220px; width: auto; object-fit: contain;
    transition: transform .2s ease, filter .2s ease;
}
.kb-partner-logo:hover { transform: scale(1.06); filter: drop-shadow(0 6px 14px rgba(20, 33, 61, .18)); }
@media (max-width: 575.98px) {
    .kb-partner-logo { height: 56px; max-width: 160px; }
    .kb-partner-swiper .swiper-slide { margin-right: 2.25rem; }
}

/* ---------- Bannière promotionnelle marketplace (accueil, gérée depuis l'admin) ---------- */
.kb-promo-banner {
    display: block; width: 100%; aspect-ratio: 1267 / 246; object-fit: cover;
    border-radius: 16px; box-shadow: var(--kb-shadow-soft);
}
@media (max-width: 575.98px) {
    /* Le ratio d'origine (~5.15:1) devient très écrasé sur mobile — on l'assouplit pour garder
       la bannière lisible plutôt que de forcer un bandeau de quelques dizaines de pixels de haut. */
    .kb-promo-banner { aspect-ratio: 16 / 9; border-radius: 12px; }
}

/* ---------- Value cards ("pourquoi rejoindre") ---------- */
.kb-value-card {
    border: 1px solid var(--kb-border); border-radius: var(--kb-radius); background: var(--kb-muted-bg);
    padding: 1.75rem; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.kb-value-card:hover { transform: translateY(-4px); box-shadow: var(--kb-shadow-soft); background: #fff; }

/* ---------- CTA band ---------- */
.kb-cta-band {
    position: relative; overflow: hidden; isolation: isolate;
    background: radial-gradient(120% 160% at 15% 0%, #1b2a4d 0%, var(--kb-navy) 50%, #3a1f5c 130%);
}

/* ---------- Panier (tiroir latéral) ---------- */
/* ---------- Cart page (panier complet) ---------- */
.kb-cart-line { display: flex; align-items: center; gap: .85rem; padding: .9rem 0; border-bottom: 1px solid var(--kb-border); }
.kb-cart-line:last-child { border-bottom: none; padding-bottom: 0; }
.kb-cart-line-media {
    width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0; overflow: hidden;
    background: var(--kb-muted-bg); display: flex; align-items: center; justify-content: center; color: var(--kb-border);
}
.kb-cart-line-media img { width: 100%; height: 100%; object-fit: cover; }
.kb-cart-line-form { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.kb-cart-line-stepper input { width: 4rem; text-align: center; }
.kb-cart-line-total { width: 6rem; text-align: right; font-weight: 600; font-size: .88rem; color: var(--kb-navy); }
.kb-cart-line-refresh {
    width: 32px; height: 32px; border: 1px solid var(--kb-border); border-radius: 50%; background: #fff;
    color: var(--kb-navy); transition: background-color .15s ease;
}
.kb-cart-line-refresh:hover { background: var(--kb-muted-bg); }

.kb-cart-trigger {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--kb-border);
    background: #fff; color: var(--kb-navy); font-size: 1.25rem; transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.kb-cart-trigger:hover { border-color: rgba(247, 111, 13, .35); box-shadow: 0 6px 18px -8px rgba(20, 33, 61, .22); transform: translateY(-1px); }
.kb-cart-trigger:active { transform: scale(.94); }
.kb-cart-badge {
    position: absolute; top: -3px; right: -3px; min-width: 21px; height: 21px; padding: 0 5px;
    display: flex; align-items: center; justify-content: center; border-radius: 999px;
    background: var(--kb-orange-cta); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1;
    border: 2px solid #fff; box-shadow: 0 2px 6px -1px rgba(247, 111, 13, .5);
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}

.kb-cart-drawer { --bs-offcanvas-width: 26rem; background: var(--kb-bg); border-left: 1px solid var(--kb-border); }
@media (max-width: 575.98px) { .kb-cart-drawer { --bs-offcanvas-width: 100vw; } }

.kb-cart-drawer-header {
    border-bottom: 1px solid var(--kb-border); padding: 1.1rem 1.25rem; background: #fff;
}
.kb-cart-drawer-title { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; font-weight: 700; margin: 0; }
.kb-cart-drawer-title i { color: var(--kb-orange-cta); }

.kb-cart-drawer-notice {
    margin: 1rem 1.25rem 0; padding: .7rem 1rem; border-radius: 12px; font-size: .85rem; font-weight: 500;
    background: rgba(30, 161, 20, .1); color: var(--kb-green); border: 1px solid rgba(30, 161, 20, .25);
    animation: kb-cart-notice-in .3s cubic-bezier(.22, 1, .36, 1) both;
}

.kb-cart-drawer-items { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
.kb-cart-drawer-items--enter { animation: kb-cart-fade-in .28s cubic-bezier(.22, 1, .36, 1) both; }

.kb-cart-drawer-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    height: 100%; padding: 2rem 1rem; color: var(--kb-muted);
}
.kb-cart-drawer-empty i { font-size: 2.4rem; color: var(--kb-border); margin-bottom: .75rem; }

.kb-cart-item {
    display: flex; gap: .85rem; padding: .9rem 0; border-bottom: 1px solid var(--kb-border);
    transition: opacity .2s ease;
}
.kb-cart-item:last-child { border-bottom: none; }
.kb-cart-item--busy { opacity: .5; pointer-events: none; }
.kb-cart-item-media {
    width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0; overflow: hidden;
    background: var(--kb-muted-bg); display: flex; align-items: center; justify-content: center; color: var(--kb-border);
}
.kb-cart-item-media img { width: 100%; height: 100%; object-fit: cover; }
.kb-cart-item-body { flex: 1; min-width: 0; }
.kb-cart-item-name { margin: 0; font-size: .9rem; font-weight: 600; color: var(--kb-navy); }
.kb-cart-item-desc {
    margin: .15rem 0 0; font-size: .76rem; color: var(--kb-muted); overflow: hidden;
    text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.kb-cart-item-price { margin: .2rem 0 0; font-size: .76rem; color: var(--kb-muted); }
.kb-cart-item-row { display: flex; align-items: center; gap: .6rem; margin-top: .55rem; }
.kb-cart-item-stepper {
    display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--kb-border);
    border-radius: 999px; padding: .15rem .5rem;
}
.kb-cart-step-btn {
    width: 20px; height: 20px; border: none; background: none; color: var(--kb-navy); font-weight: 700;
    line-height: 1; border-radius: 50%; transition: background-color .15s ease;
}
.kb-cart-step-btn:hover:not(:disabled) { background: var(--kb-muted-bg); }
.kb-cart-step-btn:disabled { color: var(--kb-border); }
.kb-cart-item-qty { font-size: .82rem; font-weight: 600; min-width: 1rem; text-align: center; }
.kb-cart-item-total { margin-left: auto; font-size: .85rem; font-weight: 700; color: var(--kb-navy); }
.kb-cart-item-remove {
    width: 28px; height: 28px; border: none; background: none; color: var(--kb-muted);
    border-radius: 50%; transition: background-color .15s ease, color .15s ease;
}
.kb-cart-item-remove:hover { background: rgba(220, 53, 69, .1); color: var(--kb-danger); }

.kb-cart-drawer-footer { border-top: 1px solid var(--kb-border); background: #fff; padding: 1.1rem 1.25rem; }
.kb-cart-drawer-box-warning {
    display: flex; align-items: flex-start; gap: .5rem; font-size: .78rem; color: var(--kb-orange-cta);
    background: rgba(247, 111, 13, .08); border-radius: 10px; padding: .6rem .75rem; margin: 0 0 .85rem;
}
.kb-cart-drawer-summary { display: flex; align-items: center; justify-content: space-between; font-size: .88rem; color: var(--kb-muted); margin-bottom: .85rem; }
.kb-cart-drawer-total { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--kb-navy); }
.kb-cart-drawer-actions { display: flex; flex-direction: column; gap: .6rem; }
.kb-cart-drawer-actions > * { width: 100%; }

/* ---------- Motion & accessibility ---------- */
@keyframes kb-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ---------- Bannière de consentement aux cookies ---------- */
.kb-cookie-banner {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1080;
    background: #fff; border-top: 1px solid var(--kb-border); box-shadow: 0 -10px 30px -15px rgba(20, 33, 61, .2);
    animation: kb-cookie-banner-in .35s ease both;
}
.kb-cookie-banner[hidden] { display: none; }
.kb-cookie-banner-inner {
    max-width: 1280px; margin-inline: auto; padding: 1.1rem 1.5rem;
    display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
.kb-cookie-banner-icon { font-size: 1.5rem; color: var(--kb-green); flex-shrink: 0; }
.kb-cookie-banner-text-wrap { flex: 1 1 20rem; }
.kb-cookie-banner-text { margin: 0; font-size: .85rem; color: var(--kb-navy); line-height: 1.5; }
.kb-cookie-banner-links { margin-top: .35rem; display: flex; flex-wrap: wrap; gap: .4rem; font-size: .76rem; }
.kb-cookie-banner-links a { color: var(--kb-orange-cta); font-weight: 600; text-decoration: none; }
.kb-cookie-banner-links a:hover { text-decoration: underline; }
.kb-cookie-banner-links span { color: var(--kb-muted); }
.kb-cookie-banner-actions { display: flex; gap: .6rem; flex-shrink: 0; }
@keyframes kb-cookie-banner-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 575.98px) {
    .kb-cookie-banner-inner { padding: 1rem; }
    .kb-cookie-banner-actions { width: 100%; }
    .kb-cookie-banner-actions .btn-kb-outline, .kb-cookie-banner-actions .btn-kb-gradient { flex: 1; justify-content: center; }
}

@keyframes kb-scroll-cue { 0%, 100% { transform: translate(-50%, 0); opacity: .5; } 50% { transform: translate(-50%, 6px); opacity: 1; } }
@keyframes kb-cart-notice-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kb-cart-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .kb-ring, .kb-hero-logo, .kb-chip, .kb-blob, .kb-box-mock-dot, .kb-live-dot,
    .kb-hero-badge-dot, .kb-hero-live-card, .kb-marquee-track, .kb-hero-scroll-cue, .kb-wave, .kb-banner-img,
    .navbar-collapse.show .nav-item, .navbar-collapse.show .kb-nav-actions > *,
    .kb-cart-drawer-notice, .kb-cart-drawer-items--enter, .kb-product-sticker, .kb-cookie-banner, .kb-box-mock-logo, .kb-box-mock-key, .kb-box-mock-dot-slot, .kb-box-mock-screen::before,
    .kb-step-list .kb-step-item, .kb-step-list .kb-step-icon, .kb-step-list .kb-step-active-badge, .kb-step-item--selected {
        animation: none !important;
    }
    .reveal { transition-duration: .01ms !important; }
}