:root {
    --bg-nuit: #171B36;
    --bg-nuit-fonce: #0F1226;
    --bg-or: #F2A93B;
    --bg-or-fonce: #D68F1F;
    --bg-fond: #F7F5F2;
    --texte-principal: #1A1D29;
    --texte-mute: #6B7280;
    --font-serif: 'Fraunces', serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-fond);
    color: var(--texte-principal);
}

h1, h2, h3, h4, .brand-title {
    font-family: var(--font-serif);
}

/* --- Sidebar --- */
.sidebar {
    width: 260px;
    background: linear-gradient(180deg, var(--bg-nuit) 0%, var(--bg-nuit-fonce) 100%);
    color: #fff;
    min-height: 100vh;
}
.sidebar .brand-title {
    font-weight: 700;
    font-size: 1.35rem;
    color: #fff;
}
.sidebar .nav-link {
    color: rgba(255,255,255,0.78);
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    font-size: 0.92rem;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    color: #fff;
    background: rgba(255,255,255,0.08);
}
.sidebar .nav-link.active {
    border-left: 3px solid var(--bg-or);
}
.org-badge {
    background: rgba(242,169,59,0.15);
    border-left: 3px solid var(--bg-or);
    color: #EFE7DC;
    font-size: 0.82rem;
    padding: 8px 10px;
    border-radius: 6px;
    display: block;
    text-decoration: none;
}
.org-badge:hover { color: #fff; }

.project-badge {
    border-left: 3px solid #6c757d;
    color: #EFE7DC;
    font-size: 0.82rem;
    padding: 8px 10px;
    border-radius: 6px;
    display: block;
    text-decoration: none;
    background: rgba(255,255,255,0.06);
}
.project-badge:hover { color: #fff; }
.project-badge-green { border-left-color: #2fbf71; background: rgba(47,191,113,0.15); }
.project-badge-orange { border-left-color: #F2A93B; background: rgba(242,169,59,0.15); }
.project-badge-red { border-left-color: #e5484d; background: rgba(229,72,77,0.15); }

.sidebar .chevron-toggle { transition: transform 0.15s ease; }
.sidebar .nav-link[aria-expanded="true"] .chevron-toggle { transform: rotate(180deg); }
/* Le menu parent (le toggle) ne porte plus de style "actif" quand il est
   ouvert — seul le sous-menu réellement consulté/cliqué doit ressortir
   visuellement (cf. règle .nav-link.active plus haut, qui s'applique aux
   sous-liens). Le chevron qui pivote suffit à indiquer qu'un menu est ouvert. */

.contenu-principal { padding: 2rem; }

/* --- Cartes / boutons --- */
.btn-primary {
    background-color: var(--bg-nuit);
    border-color: var(--bg-nuit);
}
.btn-primary:hover {
    background-color: var(--bg-nuit-fonce);
    border-color: var(--bg-nuit-fonce);
}
.card-stat {
    border: none;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* --- Page de connexion / inscription (split-screen) --- */
.auth-split { min-height: 100vh; display: flex; }
.auth-marque {
    flex: 1 1 42%;
    background: linear-gradient(180deg, var(--bg-nuit) 0%, var(--bg-nuit-fonce) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}
.auth-marque-contenu { max-width: 380px; }
.auth-sceau {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--bg-or);
    margin-bottom: 22px;
}
.auth-marque h1 {
    font-weight: 700;
    font-size: 32px;
    color: #fff;
    margin: 0 0 6px;
}
.auth-marque p { color: rgba(255,255,255,0.75); font-size: 14.5px; margin: 0; }
.auth-ligne { height: 3px; width: 56px; background: var(--bg-or); margin: 22px 0 26px; }
.auth-points { list-style: none; padding: 0; margin: 0; }
.auth-points li {
    font-size: 13.5px;
    color: rgba(255,255,255,0.85);
    padding: 8px 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    display: flex; align-items: center; gap: 10px;
}
.auth-points li:first-child { border-top: none; }
.auth-points i { color: var(--bg-or); font-size: 16px; }

.auth-formulaire {
    flex: 1 1 58%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 32px;
}
.auth-carte {
    width: 100%;
    max-width: 400px;
    position: relative;
}
.auth-carte::before {
    content: "";
    position: absolute;
    top: -20px; left: 0; right: 0;
    height: 3px;
    background: var(--bg-or);
}
.auth-carte h4 { font-family: var(--font-serif); font-weight: 600; color: var(--bg-nuit); }
.auth-pied { margin-top: 16px; font-size: 12.5px; color: var(--texte-mute); text-align: center; }

@media (max-width: 767.98px) {
    .auth-split { flex-direction: column; }
    .auth-marque { padding: 32px 24px; flex: none; }
    .auth-marque-contenu { max-width: none; }
    .auth-points { display: none; }
    .contenu-principal { padding: 1rem; }
}


/* =========================================================
   RESPONSIVE MOBILE — application de gestion
   Cible : téléphones 320px à 767px
   ========================================================= */

html {
    overflow-x: hidden;
}

body {
    min-width: 0;
    overflow-x: hidden;
}

main.contenu-principal,
.contenu-principal,
#zone-htmx {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 767.98px) {
    /* --- Base / typographie --- */
    html {
        font-size: 14px;
    }

    body {
        font-size: 0.875rem;
        line-height: 1.45;
    }

    h1, .h1 {
        font-size: 1.45rem !important;
        line-height: 1.2;
    }

    h2, .h2 {
        font-size: 1.25rem !important;
        line-height: 1.25;
    }

    h3, .h3 {
        font-size: 1.10rem !important;
        line-height: 1.3;
    }

    h4, .h4 {
        font-size: 1rem !important;
        line-height: 1.3;
    }

    h5, .h5 {
        font-size: 0.95rem !important;
        line-height: 1.35;
    }

    h6, .h6 {
        font-size: 0.9rem !important;
    }

    p {
        font-size: 0.875rem;
    }

    .small {
        font-size: 0.75rem !important;
    }

    /* Empêche les très longs textes de casser la largeur */
    .text-break,
    .card,
    .alert,
    .modal-content,
    .dropdown-menu,
    .form-control,
    .form-select {
        overflow-wrap: anywhere;
    }

    /* --- Barre mobile supérieure --- */
    body > .d-md-none,
    .sticky-top.d-md-none {
        min-height: 52px;
        padding: 0.45rem 0.65rem !important;
        z-index: 1040;
    }

    body > .d-md-none .brand-title,
    .sticky-top .brand-title {
        font-size: 1rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* --- Sidebar mobile --- */
    .sidebar {
        --bs-offcanvas-width: 285px;
        width: 285px !important;
        max-width: 86vw;
        padding: 0.75rem !important;
    }

    .sidebar .brand-title {
        font-size: 1rem !important;
    }

    .sidebar .nav-link {
        font-size: 0.84rem !important;
        padding: 0.48rem 0.65rem !important;
        line-height: 1.3;
    }

    .sidebar .org-badge,
    .sidebar .project-badge {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.6rem !important;
    }

    .sidebar .offcanvas-body {
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* --- Contenu principal --- */
    .contenu-principal {
        padding: 0.75rem !important;
        width: 100%;
    }

    .contenu-principal > #zone-htmx {
        width: 100%;
    }

    /* --- En-têtes de pages --- */
    .contenu-principal .d-flex.justify-content-between,
    .contenu-principal .d-flex.align-items-center.justify-content-between {
        flex-wrap: wrap !important;
        gap: 0.6rem !important;
    }

    .contenu-principal .d-flex.justify-content-between > :first-child,
    .contenu-principal .d-flex.align-items-center.justify-content-between > :first-child {
        min-width: 0;
    }

    /* --- Boutons --- */
    .btn {
        font-size: 0.78rem !important;
        padding: 0.42rem 0.62rem !important;
        line-height: 1.25 !important;
        white-space: normal;
    }

    .btn-sm {
        font-size: 0.72rem !important;
        padding: 0.34rem 0.5rem !important;
    }

    .btn-group {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .btn-group > .btn {
        border-radius: 0.375rem !important;
    }

    /* Les zones de boutons passent proprement à la ligne */
    .d-flex.gap-2,
    .d-flex.gap-3 {
        flex-wrap: wrap !important;
    }

    /* --- Cartes et indicateurs --- */
    .card {
        border-radius: 9px;
    }

    .card-body {
        padding: 0.8rem !important;
    }

    .card-header {
        padding: 0.65rem 0.8rem !important;
    }

    .card-stat {
        min-height: 0 !important;
    }

    .card-stat .display-1,
    .card-stat .display-2,
    .card-stat .display-3,
    .card-stat .display-4,
    .card-stat .display-5,
    .card-stat .display-6 {
        font-size: 1.45rem !important;
    }

    /* --- Grilles Bootstrap : une colonne sur petit écran --- */
    .row {
        --bs-gutter-x: 0.8rem;
        --bs-gutter-y: 0.8rem;
    }

    /* Les colonnes explicitement larges deviennent lisibles */
    .row > [class*="col-"] {
        min-width: 0;
    }

    /* --- Formulaires --- */
    .form-label {
        font-size: 0.78rem !important;
        margin-bottom: 0.25rem;
    }

    .form-control,
    .form-select {
        font-size: 0.82rem !important;
        min-height: 38px;
        padding: 0.42rem 0.55rem !important;
    }

    textarea.form-control {
        min-height: 80px;
    }

    .input-group-text {
        font-size: 0.78rem !important;
        padding: 0.42rem 0.5rem !important;
    }

    /* --- Tables : défilement horizontal au lieu de casser la page --- */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .table {
        font-size: 0.72rem !important;
        margin-bottom: 0;
    }

    .table th,
    .table td {
        padding: 0.42rem 0.5rem !important;
        vertical-align: middle;
        white-space: nowrap;
    }

    /* Tables qui ne sont pas déjà dans .table-responsive */
    #zone-htmx > table,
    #zone-htmx .card-body > table,
    #zone-htmx .table-wrapper > table {
        display: block;
        width: 100% !important;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Badges --- */
    .badge {
        font-size: 0.68rem !important;
        line-height: 1.2;
        white-space: normal;
    }

    /* --- Modales --- */
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-title {
        font-size: 1rem !important;
    }

    .modal-body {
        padding: 0.75rem !important;
    }

    /* --- Alertes --- */
    .alert {
        font-size: 0.78rem !important;
        padding: 0.65rem 0.75rem !important;
    }

    /* --- Pagination --- */
    .pagination {
        flex-wrap: wrap;
        gap: 0.15rem;
    }

    .pagination .page-link {
        font-size: 0.72rem;
        padding: 0.35rem 0.5rem;
    }

    /* --- Images / graphiques --- */
    img,
    svg,
    canvas {
        max-width: 100%;
    }

    /* --- Code / références longues --- */
    code,
    pre {
        max-width: 100%;
        overflow-x: auto;
        font-size: 0.72rem;
    }

    /* --- Espacements Bootstrap trop grands sur mobile --- */
    .py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
    .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .my-5 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; }
    .mb-5 { margin-bottom: 1.25rem !important; }
    .mt-5 { margin-top: 1.25rem !important; }

    /* --- Pages avec contenu très large --- */
    .overflow-auto {
        max-width: 100%;
    }

    /* Les titres de projet longs restent dans l'écran */
    .project-badge,
    .org-badge {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 575.98px) {
    html {
        font-size: 13.5px;
    }

    .contenu-principal {
        padding: 0.6rem !important;
    }

    h1, .h1 {
        font-size: 1.3rem !important;
    }

    h2, .h2 {
        font-size: 1.15rem !important;
    }

    h3, .h3 {
        font-size: 1rem !important;
    }

    .btn {
        font-size: 0.74rem !important;
    }

    .btn-lg {
        font-size: 0.82rem !important;
        padding: 0.5rem 0.7rem !important;
    }

    .card-body {
        padding: 0.65rem !important;
    }

    /* Sur très petit écran, les groupes d'actions prennent toute la largeur. */
    .mobile-stack > .btn,
    .mobile-stack > a.btn,
    .mobile-stack > button.btn {
        width: 100%;
    }
}