/* =========================================================
   Menu burger responsive ≤1024px
   N'affecte rien au-dessus de 1024px (sidebar normale)
   ========================================================= */

/* Bouton burger : créé en JS, masqué par défaut sur desktop */
#kdBurgerBtn {
    display: none;
    position: fixed;
    top: calc(10px + env(safe-area-inset-top));
    left: 12px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%);
    color: #fff;
    font-size: 22px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10001;
    box-shadow: 0 4px 14px rgba(30, 58, 138, 0.35);
    transition: transform 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
#kdBurgerBtn:active {
    transform: scale(0.92);
    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.45);
}

/* Backdrop : créé en JS */
#kdBurgerBackdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* ============== Mobile + Tablette (≤1024px) ============== */
@media (max-width: 1024px) {

    /* Bouton burger visible */
    #kdBurgerBtn {
        display: flex;
    }

    /* Cache l'ancien bouton mobile (DISABLED dans kdDivers.js) pour éviter doublon */
    .buttonMenuMobile {
        display: none !important;
    }

    /* Sidebar transformée en drawer overlay */
    #mainMenu,
    .mainMenu,
    .mainMenuClose {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: 85vw !important;
        max-width: 320px !important;
        min-width: 260px !important;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 9999;
        background: #fff;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: calc(70px + env(safe-area-inset-top)); /* laisse la place au burger */
    }

    /* Le contenu principal prend toute la largeur (le menu n'occupe plus de place) */
    .mainContenu {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* ===== Header adapté ===== */

    /* Décalage du header pour libérer la place du burger */
    #header,
    .mainContenu > .header {
        padding-left: 64px !important;
        box-sizing: border-box;
    }

    /* Titre : limite la taille et tronque proprement (évite le wrap sur 3 lignes) */
    .titreHeader {
        font-size: 16px !important;
        min-width: 0 !important;
        overflow: hidden;
    }
    .titreHeader > * {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        display: inline-block;
        vertical-align: middle;
    }

    /* Cache la palette de couleur (peu utile sur mobile/tablette) */
    #optionPalette {
        display: none !important;
    }

    /* Compactage du headerUser */
    .headerUser {
        gap: 6px;
    }
    .headerUser > div {
        font-size: 13px;
    }

    /* ===== État ouvert du drawer ===== */

    body.kdBurgerOpen #mainMenu,
    body.kdBurgerOpen .mainMenu,
    body.kdBurgerOpen .mainMenuClose {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
    }

    body.kdBurgerOpen #kdBurgerBackdrop {
        display: block;
        opacity: 1;
    }

    /* Empêche le scroll de la page derrière quand le menu est ouvert */
    body.kdBurgerOpen {
        overflow: hidden;
    }

    /* Animation icône burger → croix */
    #kdBurgerBtn .iconBurger { transition: opacity 0.15s, transform 0.15s; }
    #kdBurgerBtn .iconClose { display: none; }
    body.kdBurgerOpen #kdBurgerBtn .iconBurger { display: none; }
    body.kdBurgerOpen #kdBurgerBtn .iconClose { display: inline; }
}

/* ============== Smartphone (≤768px) ============== */
@media (max-width: 768px) {
    /* nom user = 3e <div> en partant de la fin (dropdown=1, logout=2, nom=3) */
    .headerUser > div:nth-last-child(3) {
        display: none !important;
    }
    .titreHeader {
        font-size: 14px !important;
    }
}

/* ============== Smartphone étroit (≤600px) ============== */
@media (max-width: 600px) {
    #mainMenu,
    .mainMenu,
    .mainMenuClose {
        width: 88vw !important;
    }
}