/* ══════════════════════════════════════════════════════════════════
   Latoniccia — style inspiré SB Admin 2, Bootstrap 5
   ══════════════════════════════════════════════════════════════════ */

/* ── Variables ───────────────────────────────────────────────────── */
:root {
    --sidebar-width:         225px;
    --sidebar-collapsed:     6.5rem;
    --sidebar-bg-from:       #4e73df;
    --sidebar-bg-to:         #224abe;
    --sidebar-text:          rgba(255,255,255,.8);
    --sidebar-text-active:   #fff;
    --sidebar-divider:       rgba(255,255,255,.15);
    --topbar-height:         4.375rem;
    --page-bg:               #f8f9fc;
    --card-shadow:           0 .15rem 1.75rem rgba(58,59,69,.15);
}

/* ── Reset / Base ────────────────────────────────────────────────── */
body { background-color: var(--page-bg); }

/* ── Layout wrapper ──────────────────────────────────────────────── */
#wrapper { display: flex; }

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════════════ */
#sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: linear-gradient(180deg, var(--sidebar-bg-from) 10%, var(--sidebar-bg-to) 100%);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width .2s ease;
    z-index: 1000;
}

/* ── Brand ───────────────────────────────────────────────────────── */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem .9rem;
    text-decoration: none;
    border-bottom: 1px solid var(--sidebar-divider);
}
.sidebar-brand img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}
.sidebar-brand-text {
    color: var(--sidebar-text-active);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .03em;
    white-space: nowrap;
    overflow: hidden;
}
.sidebar-version {
    font-size: .7rem;
    color:rgb(209, 208, 208);
    line-height: 1.35;
    padding: .4rem .9rem .55rem;
    border-bottom: 1px solid var(--sidebar-divider);
    white-space: nowrap;
}

/* ── Navigation items ────────────────────────────────────────────── */
.sidebar-nav {
    list-style: none;
    padding: .5rem 0;
    margin: 0;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1rem;
    color: var(--sidebar-text);
    font-size: .85rem;
    font-weight: 600;
    border-radius: 0;
    transition: color .15s;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
}
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
    color: var(--sidebar-text-active);
}
.sidebar-nav .nav-link i {
    font-size: 1rem;
    flex-shrink: 0;
    width: 1.2rem;
    text-align: center;
}

/* ── Divider + heading ───────────────────────────────────────────── */
.sidebar-divider {
    border-top: 1px solid var(--sidebar-divider);
    margin: .5rem 1rem;
}
.sidebar-heading {
    padding: .4rem 1rem .2rem;
    color: rgba(255,255,255,.4);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
}

/* ── Submenu (accordion collapse) ───────────────────────────────── */
.sidebar-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: rgba(0,0,0,.12);
}
.sidebar-submenu .nav-link {
    font-size: .8rem;
    font-weight: 400;
    padding: .55rem 1rem .55rem 2.7rem;
}
.sidebar-submenu .nav-link i {
    font-size: .75rem;
}

/* Chevron rotation */
.sidebar-nav .nav-link[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}
.sidebar-nav .nav-link .bi-chevron-down {
    margin-left: auto;
    font-size: .75rem;
    transition: transform .2s;
    flex-shrink: 0;
}

/* ── Toggle button (bottom of sidebar, desktop) ──────────────────── */
.sidebar-toggle-wrap {
    padding: .75rem 1rem;
    text-align: center;
    border-top: 1px solid var(--sidebar-divider);
    margin-top: auto;
}
#sidebarToggle {
    width: 2rem;
    height: 2rem;
    background: rgba(255,255,255,.2);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
#sidebarToggle:hover { background: rgba(255,255,255,.35); }

/* ── Collapsed sidebar (desktop) ─────────────────────────────────── */
@media (min-width: 768px) {
    #wrapper.sidebar-toggled #sidebar {
        width: var(--sidebar-collapsed) !important;
    }
    #wrapper.sidebar-toggled .sidebar-brand-text,
    #wrapper.sidebar-toggled .sidebar-version,
    #wrapper.sidebar-toggled .sidebar-heading,
    #wrapper.sidebar-toggled .nav-link span,
    #wrapper.sidebar-toggled .nav-link .bi-chevron-down {
        display: none !important;
    }
    #wrapper.sidebar-toggled .sidebar-nav .nav-link {
        justify-content: center;
        padding: .85rem .5rem;
    }
    #wrapper.sidebar-toggled .sidebar-nav .nav-link i {
        width: auto;
        font-size: 1.15rem;
    }
    #wrapper.sidebar-toggled .sidebar-submenu {
        display: none !important;
    }
    #wrapper.sidebar-toggled #sidebarToggle i {
        transform: rotate(180deg);
    }
}

/* ── Mobile sidebar (hidden by default) ──────────────────────────── */
@media (max-width: 767.98px) {
    #sidebar {
        position: fixed;
        left: -100%;
        transition: left .25s ease;
        height: 100%;
    }
    #wrapper.sidebar-mobile-open #sidebar {
        left: 0;
        box-shadow: .5rem 0 1.5rem rgba(0,0,0,.3);
    }
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 999;
    }
    #wrapper.sidebar-mobile-open .sidebar-overlay { display: block; }
}

/* ══════════════════════════════════════════════════════════════════
   CONTENT WRAPPER + TOPBAR
   ══════════════════════════════════════════════════════════════════ */
#content-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ── Topbar ──────────────────────────────────────────────────────── */
#topbar {
    height: var(--topbar-height);
    background: #fff;
    box-shadow: var(--card-shadow);
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    gap: .75rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

#topbarToggle {
    background: none;
    border: none;
    color: #858796;
    font-size: 1.2rem;
    cursor: pointer;
    padding: .25rem .5rem;
    border-radius: .25rem;
    line-height: 1;
    transition: color .15s;
}
#topbarToggle:hover { color: #5a5c69; }

.topbar-divider {
    width: 0;
    border-right: 1px solid #e3e6f0;
    height: 2rem;
    margin: 0 .5rem;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: #858796;
    font-size: .85rem;
    font-weight: 600;
}
.topbar-user i { font-size: 1.1rem; }

/* Garantir cursor pointer sur les boutons de la topbar */
#topbar button:not(:disabled) { cursor: pointer; }

/* Transition de grisage pour les cartes participants */
#cartesParticipants .card { transition: opacity .15s; }

/* ── Main content area ───────────────────────────────────────────── */
#content { flex: 1; }
#content .container-fluid { padding: 1.5rem; }

/* ══════════════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════════════ */
.card {
    box-shadow: var(--card-shadow);
    border: none;
}
.card-header {
    background: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
    font-weight: 700;
    color: #5a5c69;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── Tables admin ────────────────────────────────────────────────── */
.badge-role   { font-size: .75rem; }
.badge-brevet { font-size: .7rem; }
td .small     { line-height: 1.6; }

/* ── Édition personne ────────────────────────────────────────────── */
.role-check { width: 1.2em; height: 1.2em; cursor: pointer; }

/* ══════════════════════════════════════════════════════════════════
   PAGE LOGIN (standalone, pas de sidebar)
   ══════════════════════════════════════════════════════════════════ */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;        /* empile les cartes sur écran étroit */
    gap: 1.5rem;            /* sépare les deux cartes (login + prospect) */
    padding: 1.5rem;
    /* Fond par défaut (dégradé) ; l'image + voile sombre sont posés en ligne via th:style
       dans login.html, pour respecter le context-path (pas d'URL en dur). */
    background: linear-gradient(135deg, #4e73df 0%, #224abe 60%, #1a3a8f 100%);
}

.login-card {
    position: relative;
    width: 100%;
    max-width: 430px;
    border: none;
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.3);
}
.login-version {
    position: absolute;
    bottom: .5rem;
    right: 1rem;
    font-size: .7rem;
}

.login-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.login-logos img {
    height: 64px;
    width: auto;
    object-fit: contain;
}

.login-title {
    text-align: center;
    font-weight: 700;
    color: #4e73df;
    margin-bottom: 1.5rem;
}

/* ── Éditeur HTML réutilisable (fragments/editeur) ───────────────── */
.editeur-zone {
    min-height: 120px;
    overflow-y: auto;
}
.editeur-zone:focus {
    outline: none;
}
.editeur-toolbar .btn {
    --bs-btn-padding-y: .15rem;
    --bs-btn-padding-x: .5rem;
}