/* ==========================================================
   HEADER — NAVIGATION MOBILE
   Bouton hamburger + panneau coulissant (accordéon),
   dans le même esprit que la navigation mobile de RELH.
========================================================== */

/* ==========================
   HAMBURGER
========================== */

.mobile-menu-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:flex-end;
    gap:6px;
    width:44px;
    height:44px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    z-index:1001;
}

.mobile-menu-toggle span{
    display:block;
    width:28px;
    height:2px;
    background:var(--primary);
    transition:.35s ease;
}

.mobile-menu-toggle span:nth-child(2){
    width:20px;
}

.mobile-menu-toggle:hover span{
    background:var(--gold);
}

/* ==========================
   OVERLAY
========================== */

.mobile-nav-overlay{
    position:fixed;
    inset:0;
    background:rgba(6,20,39,.55);
    backdrop-filter:blur(2px);
    opacity:0;
    visibility:hidden;
    transition:opacity .4s ease, visibility .4s ease;
    z-index:1002;
}

.mobile-nav-overlay.active{
    opacity:1;
    visibility:visible;
}

/* ==========================
   PANEL (glisse depuis la droite)
========================== */

.mobile-nav-panel{
    position:fixed;
    top:18px;
    right:18px;
    height:calc(100vh - 32px);
    width:min(420px,86vw);
    background:#FFFFFF;
    border-radius:14px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    transform:translateX(calc(100% + 18px));
    transition:transform .55s cubic-bezier(.22,.61,.36,1);
    z-index:1003;
    box-shadow:-20px 20px 60px rgba(0,0,0,.18);
}

.mobile-nav-panel.active{
    transform:translateX(0);
}

@media(max-width:576px){

    .mobile-nav-panel{
        top:1px;
        right:1px;
        bottom:1px;
        height:auto;
        width:calc(100vw - 2px);
        border-radius:10px;
    }
}

.mobile-nav-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:95px;
    padding:0 28px;
    border-bottom:1px solid rgba(0,0,0,.08);
    flex-shrink:0;
}

.mobile-nav-header .logo img{
    height:60px;
}

.mobile-nav-close{
    width:44px;
    height:44px;
    border:none;
    background:none;
    color:var(--primary);
    font-size:22px;
    cursor:pointer;
    transition:.3s;
}

.mobile-nav-close:hover{
    color:var(--gold);
}

/* ==========================
   LISTE / ACCORDÉON
========================== */

.mobile-nav-list{
    flex:1;
    overflow-y:auto;
    padding:10px 0 30px;
}

.mobile-nav-item{
    border-bottom:1px solid rgba(0,0,0,.06);
}

.mobile-nav-trigger{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 28px;
    background:none;
    border:none;
    text-align:left;
    font-family:"Playfair Display",serif;
    font-size:20px;
    font-weight:600;
    color:var(--primary);
    cursor:pointer;
}

.mobile-nav-trigger i{
    font-size:14px;
    color:var(--gold);
    transition:transform .35s ease;
}

.mobile-nav-item.open .mobile-nav-trigger i{
    transform:rotate(180deg);
}

.mobile-nav-submenu{
    display:flex;
    flex-direction:column;
    max-height:0;
    overflow:hidden;
    padding:0 28px;
    transition:max-height .45s ease, padding .45s ease;
}

.mobile-nav-item.open .mobile-nav-submenu{
    max-height:600px;
    padding:0 28px 24px;
}

.mobile-nav-submenu a{
    padding:10px 0;
    font-size:15px;
    color:#333;
    border-bottom:1px solid rgba(0,0,0,.04);
    transition:.3s;
}

.mobile-nav-submenu a:last-child{
    border-bottom:none;
}

.mobile-nav-submenu a:hover{
    color:var(--gold);
    padding-left:6px;
}

.mobile-nav-submenu a.mobile-nav-cta{
    margin-top:8px;
    color:var(--gold);
    font-weight:600;
    border-bottom:none;
}

/* ==========================
   FOOTER DU PANEL
========================== */

.mobile-nav-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 28px;
    border-top:1px solid rgba(0,0,0,.08);
    flex-shrink:0;
}

.mobile-nav-footer .contact-btn{
    padding:12px 24px;
}

/* ==========================
   HEADER AU SCROLL
========================== */

.header.scrolled{
    box-shadow:0 8px 30px rgba(0,0,0,.10);
}