/* Normigo - Layout
   Navigation, main content, footer, responsive breakpoints */

/* === NAV — mobile-first (base = mobile, desktop via min-width: 768px) === */
nav {
    background: var(--blue); color:#fff;
    display:flex; align-items:center;
    padding:.5rem 1rem; position:sticky; top:0; z-index:1000;
    gap:.5rem;
}
.nav-brand {
    font-weight:700; font-size:1.1rem; cursor:pointer;
    display:flex; align-items:center; gap:.5rem;
    white-space:nowrap; flex-grow:1;
}
.logo {
    background:#fff; color:var(--blue); border-radius:6px;
    padding:.15rem .4rem; font-size:.85rem; font-weight:800;
}
.nav-burger {
    display:block; background:none; border:none; color:#fff;
    font-size:1.5rem; cursor:pointer;
    min-width:44px; min-height:44px; flex-shrink:0;
}
.nav-links { display:none; }

/* Menu ouvert sur mobile */
nav.open .nav-links {
    display:flex; position:absolute; top:100%; left:0; right:0;
    background:var(--blue); flex-direction:column; padding:.5rem;
    align-items:stretch; gap:.25rem;
    box-shadow:0 4px 6px rgba(0,0,0,.1);
    max-height:calc(100dvh - 60px - env(safe-area-inset-bottom, 0px)); overflow-y:auto;
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    padding-bottom:calc(.5rem + env(safe-area-inset-bottom, 0px));
}
.nav-functional { display:flex; flex-direction:column; align-items:stretch; gap:.25rem; }
.nav-link, .nav-top {
    color:rgba(255,255,255,.85); text-decoration:none;
    padding:.4rem .75rem; min-height:44px; display:inline-flex;
    align-items:center; border-radius:var(--radius); font-size:.9rem;
    transition: background .15s; background:none; border:none;
    cursor:pointer; font-family:inherit; white-space:nowrap;
}
.nav-link:hover, .nav-link.active,
.nav-top:hover, .nav-top.active { background:rgba(255,255,255,.15); color:#fff; }

/* Mobile : groupes depliant a plat, pas de dropdown */
.nav-group {
    position:relative; border-top:1px solid rgba(255,255,255,.15);
    margin-top:.25rem; padding-top:.25rem;
}
.nav-group:first-of-type { border-top:none; margin-top:0; padding-top:0; }
.nav-group-btn {
    width:100%; justify-content:flex-start; font-size:.7rem;
    font-weight:700; text-transform:uppercase; letter-spacing:.08em;
    opacity:.65; pointer-events:none; min-height:32px;
}
.nav-group-btn::after { display:none; }
.nav-group-menu {
    display:flex; position:static; background:transparent;
    border:none; box-shadow:none; padding:0; min-width:0;
    flex-direction:column; z-index:101;
}
.nav-group-menu .nav-link { padding:.5rem .75rem; min-height:40px; width:100%; }

/* Mon compte / user info dropdown */
@media (min-width: 768px) {
    .user-info-group .nav-group-menu {
        left:auto; right:0; /* Aligner a droite de l'ecran */
    }
}
@media (max-width: 767px) {
    .user-info-group { margin-top:.5rem; padding-top:.5rem; border-top:1px solid rgba(255,255,255,.15); }
}

/* Tablet / desktop : barre horizontale, burger cache, dropdowns actifs */
@media (min-width: 768px) {
    nav { gap:1.5rem; padding:.75rem 1.25rem; display:flex; align-items:center; }
    .nav-brand { flex-grow:0; flex-shrink:0; }
    .nav-burger { display:none; }
    .nav-links { display:contents; }
    .nav-functional {
        display:flex; flex-direction:row; align-items:center;
        gap:.25rem; margin:0 auto;
    }
    .nav-search-btn { order:2; margin-left:auto; }
    .user-info-group { order:3; margin-left:.5rem; }
    .nav-group { border-top:none; margin-top:0; padding-top:0; }
    .nav-group-btn {
        width:auto; justify-content:center; font-size:.9rem;
        font-weight:400; text-transform:none; letter-spacing:normal;
        opacity:1; pointer-events:auto; min-height:44px;
    }
    .nav-group-btn::after {
        content:''; display:inline-block; margin-left:.4rem;
        border:4px solid transparent; border-top-color:currentColor;
        border-bottom:0; transform:translateY(2px);
    }
    .nav-group-menu {
        display:none; position:absolute; top:100%; left:0;
        min-width:180px; background:var(--blue); border:1px solid rgba(255,255,255,.15);
        border-radius:var(--radius); padding:.25rem; box-shadow:0 6px 18px rgba(0,0,0,.25);
    }
    .nav-group[data-open="true"] .nav-group-menu {
        display:flex;
    }
    .nav-group-menu .nav-link {
        color: #fff;
        padding: .5rem .75rem;
        border-radius: var(--radius);
    }
    .nav-group-menu .nav-link:hover {
        background: rgba(255,255,255,.15);
    }
}

/* Centrage sur grands ecrans : flex-grow pour rester dans le flux */
@media (min-width: 1024px) {
    nav { position:relative; }
    .nav-brand { flex-shrink:0; }
    .nav-functional {
        position:static; transform:none; left:auto;
        flex:1; justify-content:center;
    }
    .nav-search-btn { margin-left:auto; }
}

/* Recherche globale */
.nav-search-btn {
    background:rgba(255,255,255,.15); border:none; color:#fff;
    font-size:1rem; min-width:44px; min-height:44px;
    border-radius:var(--radius); cursor:pointer;
    padding:0 .6rem; display:flex; align-items:center; justify-content:center;
    margin-left:auto;
}
.nav-search-btn:hover { background:rgba(255,255,255,.25); }
.nav-search-btn:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

.search-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:500;
    display:flex; align-items:flex-start; justify-content:center; padding-top:80px;
}
.search-panel {
    background:#fff; border-radius:10px; width:100%; max-width:560px;
    box-shadow:0 8px 32px rgba(0,0,0,.25); overflow:hidden; margin:0 1rem;
}
.search-input-wrap {
    display:flex; align-items:center; padding:.75rem 1rem;
    border-bottom:1px solid var(--border); gap:.6rem;
}
.search-icon { font-size:1.1rem; flex-shrink:0; }
.search-input {
    flex:1; border:none; outline:none; font-size:1rem;
    background:transparent; color:var(--text);
}
.search-esc {
    font-size:.7rem; padding:.15rem .4rem; border:1px solid var(--border);
    border-radius:4px; color:var(--text-muted); flex-shrink:0;
}
.search-results { max-height:400px; overflow-y:auto; padding:.5rem 0; }
.search-hint { padding:.75rem 1rem; color:var(--text-muted); font-size:.9rem; margin:0; }
.search-section { padding:.25rem 0; }
.search-section-label {
    padding:.3rem 1rem; font-size:.75rem; font-weight:700;
    color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em;
}
.search-result-row {
    display:flex; flex-direction:column; padding:.5rem 1rem; gap:.1rem;
    cursor:pointer; text-decoration:none; color:var(--text);
}
.search-result-row:hover, .search-result-row:focus { background:var(--blue-light); outline:none; }
.search-result-label { font-size:.95rem; font-weight:500; }
.search-result-sub { font-size:.8rem; color:var(--text-muted); }
@media print { .nav-search-btn, .search-overlay { display:none !important; } }

/* === MAIN === */
main {
    max-width:960px; margin:0 auto;
    padding:var(--space-5) var(--space-4);
}
@media (max-width: 374px) {
    main { padding:var(--space-3) var(--space-2); }
}

/* === APP FOOTER === */
.app-footer {
    max-width:960px; margin:2rem auto 0; padding:1rem;
    text-align:center; font-size:.8rem; color:var(--text-muted);
    border-top:1px solid var(--border);
    display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap;
}
.app-footer a { color:var(--text-muted); text-decoration:none; }
.app-footer a:hover { color:var(--blue); text-decoration:underline; }