/* ═══════════════════════════════════════
   AMPF — NAVBAR
   File: public/assets/css/navbar.css
═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

:root {
    --ampf-orange: #E8761A;
    --ampf-green:  #2E9E4F;
    --ampf-blue:   #1B6BB5;
    --navy:        #0a1628;
    --navy-mid:    #112240;
    --white:       #ffffff;
    --gray:        #64748b;
}

/* ─── BASE ──────────────────────────────────── */
#navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 0 48px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background .4s ease, height .3s ease, box-shadow .3s ease;
    background: #0a1628;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: 'DM Sans', sans-serif;
}

#navbar.scrolled {
    background: rgba(10,22,40,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.07);
    height: 66px;
}

/* ─── LOGO ──────────────────────────────────── */
.nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }

.nav-logo-img {
    height: 70px; width: auto; object-fit: contain;
    transition: opacity .3s ease, height .3s ease;
}

#navbar.scrolled .nav-logo-img { height: 54px; }
.nav-logo-white { display: block; opacity: 1; }
.nav-logo-black { display: none; opacity: 0; }

/* ─── LINKS ─────────────────────────────────── */
.nav-links {
    display: flex; align-items: center; gap: 2px;
    list-style: none; margin: 0; padding: 0;
}

.nav-links > li > a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: 14px; font-weight: 400;
    padding: 8px 14px; border-radius: 8px;
    transition: all .2s; display: block;
    white-space: nowrap; position: relative;
}

.nav-links > li > a:hover { color: white; background: rgba(255,255,255,0.08); }

.nav-links > li > a.active { color: white; background: rgba(27,107,181,0.18); }

.nav-links > li > a.active::after {
    content: ''; position: absolute; bottom: 4px; left: 50%;
    transform: translateX(-50%);
    width: 16px; height: 2px;
    background: var(--ampf-blue); border-radius: 2px;
}

/* ─── DROPDOWN (DESKTOP hover) ───────────────── */
.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
    display: flex !important; align-items: center; gap: 6px; cursor: pointer;
}

.nav-dropdown-toggle .fa-chevron-down {
    font-size: 10px; transition: transform .25s; color: rgba(255,255,255,0.4);
}

.nav-dropdown:hover .fa-chevron-down { transform: rotate(180deg); }

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%; transform: translateX(-50%) translateY(-8px);
    background: var(--navy-mid);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px; padding: 8px;
    list-style: none; min-width: 190px;
    opacity: 0; visibility: hidden;
    transition: all .25s ease;
    box-shadow: 0 20px 48px rgba(0,0,0,0.45);
}

.nav-dropdown-menu::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--ampf-orange), var(--ampf-green), var(--ampf-blue));
    border-radius: 14px 14px 0 0;
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu li a {
    display: flex; align-items: center; gap: 10px;
    color: rgba(255,255,255,0.65);
    text-decoration: none; font-size: 13px;
    padding: 10px 14px; border-radius: 8px;
    transition: all .2s; white-space: nowrap;
}

/* ── Notre Vision dots ─────────────────────── */
.nav-dropdown-menu:not(.nav-dropdown-menu--commissions) li:nth-child(1) a::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ampf-orange); flex-shrink: 0; }
.nav-dropdown-menu:not(.nav-dropdown-menu--commissions) li:nth-child(2) a::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ampf-green);  flex-shrink: 0; }
.nav-dropdown-menu:not(.nav-dropdown-menu--commissions) li:nth-child(3) a::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ampf-blue);   flex-shrink: 0; }

.nav-dropdown-menu li a:hover { color: white; background: rgba(255,255,255,0.06); padding-left: 18px; }

/* ── Commissions dropdown — plus large ─────── */
.nav-dropdown-menu--commissions {
    min-width: 280px;
    left: 0;
    transform: translateX(0) translateY(-8px);
}

.nav-dropdown:hover .nav-dropdown-menu--commissions {
    transform: translateX(0) translateY(0);
}

.nav-dropdown-menu--commissions li a {
    gap: 12px;
}

/* icône couleur alternée pour chaque commission */
.nav-dropdown-menu--commissions li:nth-child(1) a i { color: var(--ampf-orange); }
.nav-dropdown-menu--commissions li:nth-child(2) a i { color: var(--ampf-green); }
.nav-dropdown-menu--commissions li:nth-child(3) a i { color: var(--ampf-blue); }
.nav-dropdown-menu--commissions li:nth-child(4) a i { color: var(--ampf-orange); }
.nav-dropdown-menu--commissions li:nth-child(5) a i { color: var(--ampf-green); }
.nav-dropdown-menu--commissions li:nth-child(6) a i { color: var(--ampf-blue); }

.nav-dropdown-menu--commissions li a i {
    font-size: 13px;
    width: 16px;
    flex-shrink: 0;
    text-align: center;
}

.nav-dropdown-menu--commissions li a:hover {
    color: white;
    background: rgba(255,255,255,0.06);
    padding-left: 18px;
}

/* ─── LANG ──────────────────────────────────── */
.nav-lang {
    display: flex; gap: 3px;
    background: rgba(255,255,255,0.06);
    padding: 3px; border-radius: 8px;
}

.lang-btn {
    background: none; border: none;
    color: rgba(255,255,255,0.5);
    font-size: 11px; font-weight: 600;
    padding: 5px 10px; border-radius: 6px;
    cursor: pointer; transition: all .2s;
    font-family: 'DM Sans', sans-serif;
    letter-spacing: .5px;
}

.lang-btn.active, .lang-btn:hover { background: var(--ampf-blue); color: white; }

/* ─── CTA ───────────────────────────────────── */
.nav-cta {
    background: var(--ampf-green) !important;
    color: white !important; font-weight: 600 !important;
    font-size: 13px !important; padding: 9px 20px !important;
    border-radius: 8px !important; letter-spacing: .2px;
    transition: all .2s !important; white-space: nowrap;
}
.nav-cta:hover {
    background: #37b85e !important; transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(46,158,79,0.4) !important;
}
.nav-cta.active::after { display: none !important; }

/* ─── BURGER ────────────────────────────────── */
.nav-burger {
    display: none; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer;
    padding: 8px; z-index: 1001;
}

.nav-burger span { display: block; width: 24px; height: 2px; background: white; border-radius: 2px; transition: all .3s; }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── OVERLAY ───────────────────────────────── */
.nav-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease; z-index: 999;
}
.nav-overlay.open { opacity: 1; pointer-events: auto; }

body.nav-open { overflow: hidden; }

/* ─── RESPONSIVE ────────────────────────────── */
@media (max-width: 1100px) {
    #navbar { padding: 0 20px; }
    .nav-burger { display: flex; }

    .nav-links {
        position: fixed; left: 0; right: 0; top: 76px;
        z-index: 998;
        background: rgba(10,22,40,0.98);
        backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
        flex-direction: column; align-items: flex-start;
        padding: 16px 20px 28px; gap: 4px;
        border-top: 1px solid rgba(255,255,255,0.06);
        transform: translateY(-12px); opacity: 0;
        pointer-events: none; visibility: hidden;
        transition: transform .25s ease, opacity .25s ease, visibility .25s ease;
        max-height: calc(100vh - 76px); overflow-y: auto;
    }

    #navbar.scrolled .nav-links { top: 66px; max-height: calc(100vh - 66px); }

    .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; visibility: visible; }

    .nav-links > li { width: 100%; }

    .nav-links > li > a { padding: 12px 14px; font-size: 15px; border-radius: 10px; }
    .nav-links > li > a.active::after { display: none; }

    /* dropdown mobile */
    .nav-dropdown-menu {
        position: static; transform: none !important;
        opacity: 1; visibility: visible;
        background: rgba(255,255,255,0.04);
        border: none; box-shadow: none;
        border-radius: 10px; margin: 6px 0 6px 14px;
        padding: 6px; display: none;
        min-width: unset;
    }
    .nav-dropdown.open .nav-dropdown-menu { display: block; }
    .nav-dropdown-menu::before { display: none; }
    .nav-dropdown.open .fa-chevron-down { transform: rotate(180deg); }

    /* commissions mobile — pas de décalage */
    .nav-dropdown-menu--commissions { left: 0; }

    .nav-lang { margin: 8px 14px; }

    .nav-cta {
        width: 100% !important; text-align: center !important;
        display: block !important; margin-top: 8px; padding: 13px 20px !important;
    }

    .nav-logo-img { height: 40px; }
}

@media (max-width: 480px) {
    .nav-logo-img { height: 70px; }
}