/* ==========================================================
   SousToit — Navigation V5
   Header blanc + menu moderne + logo responsive
   ========================================================== */

:root {
    --nav-text: #0b2c52;
    --nav-text-muted: #667085;
    --nav-border: #dce3ea;
    --nav-hover: #f4f7fa;
    --nav-active-bg: #0b2c52;
    --nav-active-text: #ffffff;
    --nav-orange: #ff6b00;
}

/* Header principal */
.topbar,
body:not(.admin-space) .topbar {
    box-sizing: border-box;
    width: 100%;
    min-height: 86px;
    padding: 10px clamp(16px, 3vw, 42px);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 2.5vw, 34px);

    background: #ffffff !important;
    color: var(--nav-text) !important;
    border-bottom: 1px solid #e7ebf0;
    box-shadow: 0 3px 16px rgba(11, 44, 82, .07);

    position: sticky;
    top: 0;
    z-index: 1000;
}

/* L'administration garde volontairement son identité sombre. */
.admin-topbar,
.admin-space .topbar {
    background: #172332 !important;
    color: #ffffff !important;
}

/* Marque SousToit */
.topbar .brand,
.topbar .brand:visited {
    color: var(--nav-text) !important;
    text-decoration: none;
}

.topbar .brand.brand-soustoit {
    display: flex;
    align-items: center;
    gap: clamp(7px, 1vw, 12px);
    flex: 0 1 clamp(150px, 18vw, 255px);
    min-width: 125px;
    max-width: 255px;
    padding: 0;
    margin: 0;
}

.topbar .brand.brand-soustoit .soustoit-logo {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: clamp(48px, 6vw, 68px) !important;
    object-fit: contain;
    object-position: left center;
}

.topbar .brand.brand-soustoit .soustoit-space-label {
    flex: 0 0 auto;
    color: var(--nav-text-muted) !important;
    font-size: clamp(.68rem, .8vw, .78rem);
    line-height: 1.15;
    font-weight: 700;
    white-space: nowrap;
}

/* Navigation */
.topbar nav,
.admin-topbar nav {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.topbar nav > a,
.topbar nav > a:visited,
.topbar .nav-inline-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;

    border: 1px solid transparent;
    border-radius: 10px;

    color: var(--nav-text) !important;
    background: transparent !important;

    text-decoration: none;
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}

.topbar nav > a:hover,
.topbar nav > a:focus-visible,
.topbar .nav-inline-form button:hover,
.topbar .nav-inline-form button:focus-visible {
    color: var(--nav-text) !important;
    background: var(--nav-hover) !important;
    border-color: var(--nav-border);
    outline: none;
    transform: translateY(-1px);
}

/* Page active */
.topbar nav > a.active,
.topbar nav > a.active:visited {
    color: var(--nav-active-text) !important;
    background: var(--nav-active-bg) !important;
    border-color: var(--nav-active-bg) !important;
    box-shadow: 0 3px 9px rgba(11, 44, 82, .15);
}

/* Passage vers l'autre espace */
.topbar nav > a.nav-switch {
    color: var(--nav-text) !important;
    border-color: #b7c5d3 !important;
    background: #ffffff !important;
}

.topbar nav > a.nav-switch:hover,
.topbar nav > a.nav-switch:focus-visible {
    color: #ffffff !important;
    border-color: var(--nav-active-bg) !important;
    background: var(--nav-active-bg) !important;
}

/* Utilisateur connecté */
.topbar .nav-user {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 5px 10px;

    border: 1px solid var(--nav-border);
    border-radius: 999px;

    color: var(--nav-text-muted) !important;
    background: #ffffff !important;

    font-size: .82rem;
    font-weight: 800;
    line-height: 1;
}

.topbar .nav-inline-form {
    display: inline-flex;
    margin: 0;
}

.topbar .nav-inline-form button {
    cursor: pointer;
}

/* Administration : conserve texte blanc et comportement existant */
.admin-space .topbar .brand,
.admin-space .topbar nav a,
.admin-space .topbar nav button,
.admin-space .topbar .nav-user {
    color: #ffffff !important;
}

.admin-space .topbar nav > a:hover,
.admin-space .topbar nav > a:focus-visible,
.admin-space .topbar .nav-inline-form button:hover {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.30);
}

.admin-space .topbar nav > a.active {
    color: #172332 !important;
    background: #ffffff !important;
    border-color: #ffffff !important;
}

/* Tablette : le menu passe proprement sous la marque */
@media (max-width: 980px) {
    .topbar,
    body:not(.admin-space) .topbar {
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 16px;
        padding: 9px 16px 11px;
    }

    .topbar .brand.brand-soustoit {
        flex-basis: clamp(145px, 28vw, 210px);
        max-width: 210px;
    }

    .topbar nav,
    .admin-topbar nav {
        flex: 1 0 100%;
        justify-content: flex-start;
    }

    .topbar .brand.brand-soustoit .soustoit-space-label {
        display: none;
    }
}

/* Mobile : boutons sur deux colonnes */
@media (max-width: 620px) {
    .topbar,
    body:not(.admin-space) .topbar {
        position: static;
        padding: 8px 12px 10px;
    }

    .topbar .brand.brand-soustoit {
        flex-basis: clamp(125px, 42vw, 165px);
        max-width: 165px;
    }

    .topbar nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 6px;
    }

    .topbar nav > a,
    .topbar .nav-inline-form,
    .topbar .nav-inline-form button {
        width: 100%;
        box-sizing: border-box;
    }

    .topbar nav > a,
    .topbar .nav-inline-form button {
        min-height: 38px;
        padding: 7px 8px;
        font-size: .84rem;
        white-space: normal;
        text-align: center;
    }

    .topbar .nav-user {
        grid-column: 1 / -1;
        justify-self: start;
    }
}


/* ==========================================================
   CORRECTION LOGO SousToit — v5.1
   Cette section est volontairement placée EN FIN DE FICHIER
   afin d'écraser d'éventuelles anciennes règles sur .brand img.
   ========================================================== */

.topbar a.brand,
.buyer-topbar a.brand {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
}

.topbar a.brand img,
.buyer-topbar a.brand img,
.topbar img.soustoit-logo,
.buyer-topbar img.soustoit-logo {
    display: block !important;

    /* Taille fluide : petit écran -> petit logo, grand écran -> plus grand */
    width: clamp(125px, 14vw, 195px) !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 70px !important;
    min-width: 0 !important;
    min-height: 0 !important;

    object-fit: contain !important;
    object-position: left center !important;

    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

@media (max-width: 900px) {
    .topbar a.brand img,
    .buyer-topbar a.brand img,
    .topbar img.soustoit-logo,
    .buyer-topbar img.soustoit-logo {
        width: clamp(120px, 24vw, 165px) !important;
        max-height: 58px !important;
    }
}

@media (max-width: 620px) {
    .topbar a.brand,
    .buyer-topbar a.brand {
        max-width: none !important;
    }

    .topbar a.brand img,
    .buyer-topbar a.brand img,
    .topbar img.soustoit-logo,
    .buyer-topbar img.soustoit-logo {
        width: clamp(165px, 46vw, 205px) !important;
        max-height: 76px !important;
    }
}


/* ==========================================================
   SousToit — ajustements mobile v5.3
   Logo plus présent + header plus compact
   ========================================================== */

@media (max-width: 620px) {
    .topbar,
    body:not(.admin-space) .topbar {
        padding: 10px 12px 12px !important;
        gap: 10px !important;
    }

    /* Logo centré et plus grand */
    .topbar .brand.brand-soustoit,
    .buyer-topbar .brand.brand-soustoit {
        width: 100% !important;
        max-width: none !important;
        justify-content: center !important;
        flex-basis: 100% !important;
    }

    .topbar a.brand img,
    .buyer-topbar a.brand img,
    .topbar img.soustoit-logo,
    .buyer-topbar img.soustoit-logo {
        width: clamp(190px, 58vw, 240px) !important;
        max-width: 240px !important;
        max-height: 92px !important;
        object-position: center center !important;
    }

    /* Menu plus compact */
    .topbar nav {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px 8px !important;
    }

    .topbar nav > a,
    .topbar .nav-inline-form button {
        min-height: 36px !important;
        padding: 6px 8px !important;
        font-size: .82rem !important;
        border-radius: 9px !important;
    }

    /* Réduit l'espace visuel du menu de langue */
    .language-menu {
        margin-left: auto !important;
    }

    .language-menu summary {
        padding: 5px 8px !important;
        min-height: 34px !important;
    }
}


/* ==========================================================
   SousToit — correction réelle du logo mobile v5.4
   Important : ces sélecteurs ont une spécificité supérieure
   aux anciennes règles .topbar .brand.brand-soustoit .soustoit-logo
   ========================================================== */

@media (max-width: 620px) {
    .topbar a.brand.brand-soustoit,
    .buyer-topbar a.brand.brand-soustoit {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        flex: 0 0 100% !important;
        flex-basis: 100% !important;

        margin: 0 !important;
        padding: 4px 0 6px !important;
        overflow: visible !important;
    }

    .topbar a.brand.brand-soustoit > img.soustoit-logo,
    .buyer-topbar a.brand.brand-soustoit > img.soustoit-logo {
        display: block !important;

        width: clamp(210px, 58vw, 245px) !important;
        max-width: 245px !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 auto !important;
        padding: 0 !important;

        object-fit: contain !important;
        object-position: center center !important;
    }
}