@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --blue-night:#17263B;
    --blue:#243B5A;
    --gold:#D7B77A;
    --gold-dark:#b8925a;
    --ivory:#F7F3EA;
}

/* NAVBAR */

.navbar {
    position:fixed;
    top:24px;
    left:50%;
    transform:translateX(-50%);

    width:min(1180px,calc(100% - 80px));

    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:30px;

    padding:14px 26px;

    background:rgba(23,38,59,.88);
    backdrop-filter:blur(18px);

    border:1px solid rgba(247,243,234,.12);
    border-radius:18px;

    box-shadow:0 15px 45px rgba(0,0,0,.25);

    z-index:1000;

    transition:
        top .45s ease,
        width .45s ease,
        padding .45s ease,
        border-radius .45s ease,
        background .45s ease;
}


.navbar.scrolled {
    top:0;
    width:100%;
    padding:10px 45px;

    border-radius:0;
    border-left:0;
    border-right:0;
    border-top:0;

    background:rgba(23,38,59,.96);
}


.navbar::after {
    content:"";

    position:absolute;
    left:20%;
    right:20%;
    bottom:-1px;

    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--gold),
        transparent
    );

    opacity:0;
    transition:.4s;
}


.navbar.scrolled::after {
    opacity:1;
}

/* BRAND */

.brand-link {
    display:flex;
    align-items:center;
    gap:10px;

    text-decoration:none;
}


.brand-icon {
    width:28px;
    height:30px;
}


.brand-text {
    display:flex;
    flex-direction:column;
}


.brand-title {
    font-family:"Cormorant Garamond",serif;

    font-size:1.45rem;
    font-weight:600;

    letter-spacing:.09em;
    line-height:1;

    color:var(--ivory);
}


.brand-subtitle {
    margin-top:4px;

    font-family:"Inter",sans-serif;
    font-size:.52rem;

    letter-spacing:.25em;

    color:var(--gold);
}

/* MENU */

.nav-links {
    display:flex;
    justify-content:center;
    align-items:center;

    gap:26px;

    margin:0;
    padding:0;

    list-style:none;
}


.nav-links li {
    position:relative;
}


.nav-links a,
.dropdown-trigger {
    display:flex;
    align-items:center;
    gap:6px;

    background:none;
    border:0;
    padding:0;

    cursor:pointer;

    color:var(--ivory);

    text-decoration:none;

    font-family:"Inter",sans-serif;
    font-size:.8rem;
    font-weight:400;

    letter-spacing:.06em;
    text-transform:uppercase;

    transition:.3s ease;
}


.nav-links a:hover,
.nav-links li.active>a,
.nav-links li.active>.dropdown-trigger,
.dropdown.open>.dropdown-trigger {
    color:var(--gold);
}

/* DROPDOWN */

.dropdown::after {
    content:"";

    position:absolute;
    top:100%;
    left:0;

    width:100%;
    height:25px;
}


.dropdown-menu {
    position:absolute;

    top:calc(100% + 18px);
    left:50%;

    transform:
        translateX(-50%)
        translateY(10px);

    width:230px;

    padding:12px 0;
    margin:0;

    list-style:none;

    background:rgba(23,38,59,.98);

    border:1px solid rgba(215,183,122,.35);
    border-radius:16px;

    box-shadow:0 20px 45px rgba(0,0,0,.35);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:.25s ease;
}


.dropdown:hover .dropdown-menu,
.dropdown.open .dropdown-menu {
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:
        translateX(-50%)
        translateY(0);
}


.dropdown-menu li {
    opacity:0;
    transform:translateY(-5px);

    transition:.25s ease;
}


.dropdown:hover .dropdown-menu li,
.dropdown.open .dropdown-menu li {
    opacity:1;
    transform:translateY(0);
}


.dropdown-menu li:nth-child(1) {
    transition-delay:.05s;
}

.dropdown-menu li:nth-child(2) {
    transition-delay:.1s;
}

.dropdown-menu li:nth-child(3) {
    transition-delay:.15s;
}


.dropdown-menu a {
    display:block;

    padding:12px 25px;

    text-transform:none;
}


.dropdown-menu a:hover {
    background:rgba(215,183,122,.12);
}


.arrow {
    font-size:.7rem;
    transition:.25s;
}


.dropdown.open .arrow {
    transform:rotate(180deg);
}

/* ACTIONS */

.nav-actions {
    display:flex;
    align-items:center;
    gap:18px;
}


/* LANGUAGE */

.language-toggle {
    position:relative;

    display:flex;
    align-items:center;

    width:68px;
    height:34px;

    padding:3px;

    background:rgba(0,0,0,.25);

    border:1px solid rgba(215,183,122,.35);
    border-radius:30px;

    cursor:pointer;
}


.lang-knob {
    position:absolute;

    top:3px;
    left:3px;

    width:31px;
    height:26px;

    border-radius:20px;

    background:linear-gradient(
        160deg,
        var(--gold),
        var(--gold-dark)
    );

    transition:.3s;
}


.language-toggle[data-lang="de"] .lang-knob {
    transform:translateX(31px);
}


.lang-label {
    position:relative;
    z-index:2;

    flex:1;

    text-align:center;

    font-family:"Inter";
    font-size:.7rem;
    font-weight:600;

    color:rgba(247,243,234,.55);
}


.language-toggle[data-lang="fr"] .lang-fr,
.language-toggle[data-lang="de"] .lang-de {
    color:var(--blue-night);
}

/* BOUTON MOBILE */

.menu-toggle {
    display:none;

    border:0;
    background:none;

    color:var(--ivory);

    font-size:24px;

    cursor:pointer;
}


/* =========================
   RESPONSIVE
========================= */

@media(max-width:1100px) {

    .navbar {
        width:calc(100% - 24px);

        top:12px;

        grid-template-columns:auto 1fr auto;

        gap:15px;

        padding:12px 16px;

        border-radius:18px;
    }


    .navbar.scrolled {
        top:0;
        padding:10px 16px;
        border-radius:0;
    }


    .brand-icon {
        width:22px;
        height:25px;
    }


    .brand-title {
        font-size:1.15rem;
    }


    .brand-subtitle {
        font-size:.48rem;
        letter-spacing:.22em;
    }


    .menu-toggle {
        display:flex;

        align-items:center;
        justify-content:center;

        width:36px;
        height:36px;
    }


    .nav-links {
        position:absolute;

        top:calc(100% + 10px);

        left:0;
        right:0;

        width:100%;

        flex-direction:column;
        align-items:stretch;

        gap:0;

        padding:10px 0;

        background:rgba(23,38,59,.98);

        border:1px solid rgba(215,183,122,.25);
        border-radius:18px;

        box-shadow:0 20px 45px rgba(0,0,0,.35);

        max-height:0;

        overflow:hidden;

        opacity:0;
        visibility:hidden;

        transform:translateY(-10px);

        transition:.3s ease;
    }


    .nav-links.open {
        max-height:calc(100vh - 120px);

        overflow-y:auto;

        opacity:1;
        visibility:visible;

        transform:translateY(0);
    }


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


    .nav-links a,
    .dropdown-trigger {
        width:100%;

        box-sizing:border-box;

        justify-content:space-between;

        padding:15px 22px;

        font-size:.9rem;
    }


    .dropdown {
        width:100%;
    }


    .dropdown::after {
        display:none;
    }


    .dropdown-menu {
        position:static !important;

        width:100% !important;

        padding:0;
        margin:0;

        transform:none !important;

        background:rgba(0,0,0,.18);

        border:0;
        border-radius:0;

        box-shadow:none;

        max-height:0;

        overflow:hidden;

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        transition:max-height .35s ease;
    }


    .dropdown.open .dropdown-menu {
        max-height:500px;

        padding:5px 0 10px;
    }


    .dropdown-menu li {
        opacity:1;
        transform:none;
    }


    .dropdown-menu a {
        width:100%;

        padding:13px 25px 13px 45px;

        font-size:.85rem;

        text-align:left;
    }


    .nav-actions {
        justify-content:flex-end;
        gap:10px;
    }

}


@media(max-width:500px) {

    .navbar {
        width:calc(100% - 16px);
    }


    .brand-subtitle {
        display:none;
    }


    .brand-title {
        font-size:1rem;
    }


    .language-toggle {
        width:60px;
        height:32px;
    }


    .lang-knob {
        width:27px;
        height:24px;
    }

}