/* ===== Menus: public & admin ===== */
:root{ --header-bg:#fff }
.theme-dark{ --header-bg:#1f2937 }

/* Scope admin uniquement: définir les variables utilisées par les sous-menus
   sans impacter le thème global public (style.css s'en charge côté public) */
.admin-header{
    --text:#111827;
    --surface:#ffffff;
    --surface-2:#f8fafc;
    --border:#e5e7eb;
}

/* Public: hamburger base */
.hamburger{display:none}

/* Public: mobile nav (hamburger) */
@media (max-width: 576px){
    .hamburger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#111;gap:0;margin-left:auto}
    .hamburger span{display:block;width:22px;height:2px;background:#333;margin:3px 0;border-radius:2px}
    /* Transform to X when open */
    .hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
    .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
    .hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

    /* Off-canvas panel */
    .main-nav{position:fixed;top:0;right:0;width:80vw;max-width:320px;height:100vh;background:#fff;box-shadow:-6px 0 16px rgba(0,0,0,.1);transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;padding:16px;z-index:1100}
    .main-nav.is-open{transform:translateX(0)}
    .main-nav ul{flex-direction:column;align-items:stretch}
    .main-nav ul li{margin:0}
    .main-nav ul li a{display:block;padding:10px 12px}
    .main-nav ul li.has-children > .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none}

    /* Backdrop */
    .nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:1090}
    .nav-backdrop[hidden]{display:none}

    /* Header layout: align items */
    .header-container{gap:.5rem}
}

/* Public nav: chevron on parents */
li.has-children > a:after{
    content:'\25BE';
    display:inline-block;
    margin-left:6px;
    font-size:1em;           /* garder la ligne de base du texte */
    line-height:1;           /* éviter l'étirement vertical */
    transform:scale(1.3);    /* agrandir sans casser l'alignement */
    transform-origin:center;
    vertical-align:-0.05em;  /* micro-ajustement pour centrage */
}

/* Public nav: dropdown submenus */
nav ul li.has-children{position:relative}
nav ul li.has-children > .submenu{
    position:absolute;top:100%;left:0;display:flex;flex-direction:column;align-items:stretch;
    background-color:var(--surface-2);color:var(--text);min-width:180px;border:1px solid var(--border);box-shadow:0 2px 5px rgba(0,0,0,.2);
    opacity:0;visibility:hidden;transform:translateY(8px);
    transition:opacity .2s ease, visibility .2s ease, transform .2s ease;
    border-radius:0 0 6px 6px;z-index:200
}
nav ul li.has-children:hover > .submenu,
nav ul li.has-children:focus-within > .submenu{opacity:1;visibility:visible;transform:translateY(0)}
nav ul li .submenu li{margin:0}
nav ul li .submenu a{display:block;padding:.6rem .9rem;border-bottom:1px solid var(--border)}
nav ul li .submenu li:last-child a{border-bottom:none}

/* Public: notifications icon item */
nav ul li.nav-notifications a{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    transition: all .3s ease;
}
nav ul li.nav-notifications a:hover{
    background-color:#039e22;
    color:#f6feff;
    transition:all .3s ease;
    box-shadow:0 0 5px rgba(0,0,0,.2);
    transform:translateY(-.2rem);
}
/* Superscript-like badge without affecting parent layout */
#notif-badge{
    position: absolute;
    top: .05rem;           /* ancré dans le coin, très léger décalage intérieur */
    right: .05rem;
    transform: none;       /* plus de débordement excessif */
    min-width: .95rem;
    height: .95rem;
    padding: 0 .28rem;
    border-radius: 9999px;
    background: #dc2626; /* red */
    color: #fff;
    font-weight: 700;
    font-size: .70rem;
    line-height: .95rem;
    text-align: center;
    display: inline-block; /* visible si contenu, masqué sinon via :empty */
    box-shadow: 0 0 0 2px var(--header-bg, #fff); /* anneau pour bien marquer l’appartenance */
    pointer-events: none;       /* clics passent au parent */
}
/* Masquer automatiquement quand aucun contenu n'est présent */
#notif-badge:empty{ display: none; }

/* Public: user menu (top-right) */
.user-menu-connexion{position:relative;cursor:pointer}
.user-menu-connexion span{display:block;padding:.5rem .3rem;border:1px solid #333;border-radius:5px}
.user-menu-connexion span:hover{background-color:#333;color:#f6feff}
.user-menu-connexion .submenu{
    position:absolute;top:100%;right:0;left:auto;display:flex;flex-direction:column;align-items:stretch;
    background-color:var(--surface-2);color:var(--text);min-width:150px;border:1px solid var(--border);box-shadow:0 2px 5px rgba(0,0,0,.2);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .3s ease, visibility .3s ease, transform .3s ease;border-radius:0 0 5px 5px;z-index:100
}
.user-menu-connexion:hover .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.user-menu-connexion .submenu li{margin:0}
.user-menu-connexion .submenu li a{display:block;padding:.8rem 1rem;border-bottom:1px solid var(--border);color:var(--text)}
.user-menu-connexion .submenu > li > a:hover{background-color:var(--link-hover-bg); color:var(--link-hover-text);}
.user-menu-connexion .submenu > li:last-child > a{border-bottom:none}

/* Public: responsive submenu adjustments */
@media (max-width: 768px){
    nav ul{flex-wrap:wrap;justify-content:flex-start}
    nav ul li{margin:0 6px 6px 0}
    nav ul li.has-children > .submenu,
    .user-menu-connexion .submenu{position:static;left:auto;right:auto;min-width:100%;width:100%;transform:none;box-shadow:none}
    nav ul li.has-children:hover > .submenu,
    nav ul li.has-children:focus-within > .submenu,
    .user-menu-connexion:hover .submenu,
    .user-menu-connexion:focus-within .submenu{opacity:1;visibility:visible;transform:none}
    nav ul li.has-children > .submenu a,
    .user-menu-connexion .submenu a{padding:12px 14px}
}

/* ===== Admin menu ===== */
.admin-menu > li.has-children > a:after{
    content:'\25BE';
    display:inline-block;
    margin-left:6px;
    font-size:1em;
    line-height:1;
    transform:scale(1.3);
    transform-origin:center;
    vertical-align:-0.05em;
}
.admin-menu > li.has-children > .submenu{
    position:absolute;top:100%;left:0;background:var(--surface-2);border:1px solid var(--border);box-shadow:0 8px 18px rgba(16,24,40,.12);
    border-radius:8px;padding:6px 0;min-width:220px;opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;z-index:500;list-style:none;display:flex;flex-direction:column;align-items:stretch
}
.admin-menu > li.has-children:hover > .submenu,
.admin-menu > li.has-children:focus-within > .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.admin-menu > li.has-children > .submenu > li{margin:0}
.admin-menu > li.has-children > .submenu > li > a{display:block;padding:8px 12px;color:var(--text)}
.admin-menu > li.has-children > .submenu > li > a:hover{background:var(--surface); color:var(--text)}

/* Admin: responsive keep submenus static on small */
@media (max-width: 768px){
    .admin-nav .admin-menu{flex-wrap:wrap;justify-content:flex-start}
    .admin-menu > li{margin:0 6px 6px 0}
    .admin-menu > li.has-children > .submenu,
    .user-menu .submenu{position:static;left:auto;right:auto;min-width:100%;width:100%;transform:none;box-shadow:none}
    .admin-menu > li.has-children:hover > .submenu,
    .admin-menu > li.has-children:focus-within > .submenu,
    .user-menu:hover .submenu,
    .user-menu:focus-within .submenu{opacity:1;visibility:visible;transform:none}
    .admin-menu > li.has-children > .submenu > li > a,
    .user-menu .submenu a{padding:12px 14px}
}