/*
 * Barre d'onglets + menu « ⋮ Plus » — commun à TOUT l'espace web.
 * Autonome (tokens propres, indépendants d'appui.css et style.css) pour
 * fonctionner aussi bien sur les pages « app » que sur les pages Bootstrap.
 * Mode sombre = uniquement si data-theme="dark" (jamais par défaut).
 */
:root {
    --nav-bg:#FBF6EF; --nav-surface:#F3ECE0; --nav-ink:#241D17; --nav-muted:#6B5F52;
    --nav-border:#E4D9C8; --nav-accent:#fc6c38; --nav-danger:#c0392b; --nav-secondary:#2E3F6E;
}
:root[data-theme="dark"] {
    --nav-bg:#171310; --nav-surface:#1E1913; --nav-ink:#F1E9DC; --nav-muted:#A99C8B;
    --nav-border:#362E24; --nav-accent:#ff8452; --nav-danger:#e0796b; --nav-secondary:#4A5FA0;
}

body.has-bottom-nav { padding-bottom: 76px; }

.bottom-nav {
    position:fixed; bottom:0; left:0; right:0; display:flex; justify-content:space-around;
    background:var(--nav-bg); border-top:1px solid var(--nav-border);
    padding:8px 0 max(8px, env(safe-area-inset-bottom)); z-index:1000;
}
.bottom-nav a, .bottom-nav button {
    display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--nav-muted);
    font-size:10.5px; min-width:56px; text-decoration:none; background:none; border:none;
    cursor:pointer; font-family:inherit; padding:0;
}
.bottom-nav a i, .bottom-nav button i { font-size:19px; }
.bottom-nav a.active { color:var(--nav-accent); }
.bottom-nav a:hover, .bottom-nav button:hover { color:var(--nav-accent); }

/* Feuille « Plus » (bottom sheet) */
.more-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; visibility:hidden;
    transition:opacity .2s ease; z-index:1001;
}
.more-backdrop.open { opacity:1; visibility:visible; }
.more-sheet {
    position:fixed; left:0; right:0; bottom:0; background:var(--nav-bg);
    border-top:1px solid var(--nav-border); border-radius:16px 16px 0 0;
    padding:8px 8px max(16px, env(safe-area-inset-bottom)); z-index:1002;
    transform:translateY(100%); visibility:hidden;
    transition:transform .25s ease, visibility .25s ease; max-height:82vh;
    overflow-y:auto; box-shadow:0 -8px 30px rgba(0,0,0,.18);
}
.more-sheet.open { transform:translateY(0); visibility:visible; }
@media (min-width:560px) {
    .more-sheet { left:auto; right:16px; bottom:84px; width:320px; border-radius:16px; }
}
.more-grip { width:40px; height:4px; border-radius:999px; background:var(--nav-border); margin:6px auto 8px; }
.more-title { font-family:'Spectral', Georgia, serif; font-weight:600; font-size:15px; padding:4px 16px 8px; color:var(--nav-ink); }
.more-item {
    display:flex; align-items:center; gap:14px; padding:13px 16px; color:var(--nav-ink);
    text-decoration:none; font-size:15px; font-weight:500; border-radius:10px; width:100%;
    background:none; border:none; cursor:pointer; font-family:inherit; text-align:left;
}
.more-item:hover { background:var(--nav-surface); color:var(--nav-accent); }
.more-item i { font-size:18px; width:22px; text-align:center; color:var(--nav-muted); flex:0 0 22px; }
.more-item:hover i { color:var(--nav-accent); }
.more-item.danger { color:var(--nav-danger); }
.more-item.danger i { color:var(--nav-danger); }
.more-sep { height:1px; background:var(--nav-border); margin:6px 12px; }

/* ================================================================
   Menu classique en haut — GRAND ÉCRAN uniquement (≥1024px).
   Sous 1024px : masqué (la barre d'onglets du bas prend le relais).
   ================================================================ */
.desktop-nav { display:none; }
.desktop-nav-inner { max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:24px; padding:12px 24px; }
.dn-brand { display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--nav-ink); font-family:'Spectral', Georgia, serif; font-weight:600; font-size:19px; flex:0 0 auto; }
.dn-links { display:flex; align-items:center; gap:4px; margin-right:auto; }
.dn-links a { color:var(--nav-muted); text-decoration:none; font-size:14.5px; font-weight:500; padding:8px 12px; border-radius:8px; }
.dn-links a:hover { color:var(--nav-accent); background:var(--nav-surface); }
.dn-links a.active { color:var(--nav-accent); }
.dn-right { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.dn-icon { width:38px; height:38px; border-radius:999px; border:1px solid var(--nav-border); background:var(--nav-surface); color:var(--nav-ink); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; }
.dn-icon:hover { border-color:var(--nav-accent); color:var(--nav-accent); }
.dn-link { color:var(--nav-muted); text-decoration:none; font-size:14.5px; font-weight:500; }
.dn-link:hover { color:var(--nav-accent); }
.dn-btn { background:var(--nav-accent); color:#fff; text-decoration:none; font-weight:600; font-size:14px; padding:9px 16px; border-radius:8px; }
.dn-btn:hover { color:#fff; opacity:.92; }
.dn-user { position:relative; }
.dn-trigger { background:none; border:none; padding:0; cursor:pointer; display:flex; }
.dn-avatar { width:38px; height:38px; border-radius:999px; background:var(--nav-secondary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.dn-menu { position:absolute; right:0; top:calc(100% + 8px); background:var(--nav-bg); border:1px solid var(--nav-border); border-radius:12px; box-shadow:0 10px 34px rgba(0,0,0,.16); min-width:230px; padding:6px; display:none; z-index:1100; }
.dn-menu.open { display:block; }
.dn-menu a { display:flex; align-items:center; gap:12px; padding:10px 12px; color:var(--nav-ink); text-decoration:none; font-size:14px; border-radius:8px; }
.dn-menu a:hover { background:var(--nav-surface); color:var(--nav-accent); }
.dn-menu a i { font-size:16px; width:20px; text-align:center; color:var(--nav-muted); }
.dn-menu a:hover i { color:var(--nav-accent); }
.dn-menu a.danger { color:var(--nav-danger); }
.dn-menu a.danger i { color:var(--nav-danger); }
.dn-menu hr { border:none; border-top:1px solid var(--nav-border); margin:6px 8px; }

@media (min-width: 1024px) {
    .desktop-nav { display:block; position:sticky; top:0; z-index:1000; background:var(--nav-bg); border-bottom:1px solid var(--nav-border); }
    /* Masquer la nav mobile (barre du bas + menu ⋮ + en-têtes mobiles) */
    .bottom-nav, .more-sheet, .more-backdrop { display:none !important; }
    body.has-bottom-nav { padding-bottom:0 !important; }
    .app-header, .top-header { display:none !important; }
    .navbar.mobile-nav { display:none !important; }
}

/* ================================================================
   Pied de page minimaliste — commun à tout l'espace web.
   (logo + nom, réseaux sociaux, copyright)
   ================================================================ */
.mini-footer {
    border-top:1px solid var(--nav-border); background:var(--nav-surface);
    padding:28px 16px; margin-top:32px;
}
.mini-footer-inner {
    max-width:1180px; margin:0 auto; display:flex; flex-direction:column;
    align-items:center; gap:14px; text-align:center;
}
.mini-footer-brand { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--nav-ink); }
.mini-footer-brand img { width:30px; height:30px; border-radius:7px; }
.mini-footer-brand span { font-family:'Spectral', Georgia, serif; font-weight:600; font-size:18px; }
.mini-footer-social { display:flex; align-items:center; gap:10px; }
.mini-footer-social a {
    width:38px; height:38px; border-radius:999px; border:1px solid var(--nav-border);
    background:var(--nav-bg); color:var(--nav-muted); display:flex; align-items:center;
    justify-content:center; font-size:17px; text-decoration:none; transition:.15s;
}
.mini-footer-social a:hover { border-color:var(--nav-accent); color:var(--nav-accent); }
.mini-footer-copy { font-size:12.5px; color:var(--nav-muted); }