/* =====================================================
   MENU - LES RIVES DE LA DURENQUE
   Style moderne nature
   Inspiré navigation premium
===================================================== */


/* =====================================================
   CALQUE
===================================================== */


.menu-layer {

    position:absolute;

    top:0;

    left:0;

    width:100%;

    z-index:15;

}






/* =====================================================
   BARRE PRINCIPALE
===================================================== */


.navbar {

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);



    width:92%;

    max-width:1350px;



    background:

    rgba(255,255,255,.88);



    backdrop-filter:

    blur(14px);



    -webkit-backdrop-filter:

    blur(14px);



    border-radius:

    22px;



    box-shadow:

    0 8px 30px rgba(0,0,0,.12);



    transition:

    all .35s ease;


}







/* effet au défilement futur */

.navbar.scrolled {


    background:

    rgba(255,255,255,.96);



    box-shadow:

    0 10px 35px rgba(0,0,0,.18);


}








/* =====================================================
   CONTENEUR INTERNE
===================================================== */


.nav-container {


    display:flex;


    align-items:center;


    justify-content:space-between;



    gap:35px;



    padding:

    12px 30px;


}
/* =====================================================
   IDENTITE DU SITE
===================================================== */


.logo {

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

    color:#214d38;

}







/* IMAGE LOGO PNG */


.logo img {


    width:72px;


    height:72px;



    object-fit:contain;



    display:block;



}








/* BLOC TEXTE */


.brand {


    display:flex;


    flex-direction:column;



    line-height:1.05;


}








/* TITRE PRINCIPAL */


.brand strong {


    color:#214d38;



    font-size:1.25rem;



    letter-spacing:.5px;



    font-weight:800;


}







/* SOUS TITRE */


.brand small {


    color:#4f8a62;



    font-size:1rem;



    font-weight:600;


}








/* SLOGAN */


.brand em {


    margin-top:6px;



    color:#66786b;



    font-size:.70rem;



    font-style:normal;



    letter-spacing:.3px;


}
/* =====================================================
   NAVIGATION
===================================================== */


.nav-links {


    display:flex;


    align-items:center;



    gap:8px;



    list-style:none;



    margin:0;



    padding:0;


}







.nav-links li {


    position:relative;


}







.nav-links a {


    position:relative;



    display:block;



    padding:

    12px 14px;



    color:#214d38;



    text-decoration:none;



    font-weight:600;



    font-size:.95rem;



    transition:

    color .3s ease;


}








/* ligne naturelle sous les liens */


.nav-links a::after {


    content:"";



    position:absolute;



    left:50%;



    bottom:5px;



    width:0;



    height:3px;



    border-radius:5px;



    background:#4f8a62;



    transform:translateX(-50%);



    transition:

    width .3s ease;


}







.nav-links a:hover {


    color:#4f8a62;


}







.nav-links a:hover::after {


    width:70%;


}








/* lien actif */


.nav-links a.active {


    color:#214d38;


}





.nav-links a.active::after {


    width:70%;



    background:#79b59f;


}
/* =====================================================
   BOUTON ACTION
===================================================== */


.menu-action {


    display:flex;


    align-items:center;



    gap:8px;



    padding:

    12px 22px;



    background:#4f8a62;



    color:white;



    text-decoration:none;



    font-weight:700;



    border-radius:30px;



    white-space:nowrap;



    transition:

    all .3s ease;


}







.menu-action:hover {


    background:#214d38;



    transform:

    translateY(-2px);



    box-shadow:

    0 8px 20px rgba(0,0,0,.18);


}









/* =====================================================
   BOUTON MENU MOBILE
===================================================== */


.menu-toggle {


    display:none;



    background:none;



    border:none;



    color:#214d38;



    font-size:32px;



    cursor:pointer;



    padding:5px;


}







.menu-toggle:hover {


    color:#4f8a62;


}
.menu-toggle
.nav-links.active
/* =====================================================
   RESPONSIVE TABLETTE
===================================================== */


@media(max-width:1100px){


.navbar {


    width:94%;


}



.nav-container {


    padding:

    12px 20px;


}



.nav-links {


    gap:0;


}



.nav-links a {


    padding:

    10px 8px;



    font-size:.9rem;


}



.menu-action {


    padding:

    10px 16px;



    font-size:.9rem;


}


}









/* =====================================================
   MOBILE
===================================================== */


@media(max-width:900px){



.navbar {


    top:15px;



    width:94%;



    border-radius:18px;


}







.nav-container {


    padding:

    10px 18px;


}








.logo img {


    width:55px;


    height:55px;


}







.brand strong {


    font-size:1rem;


}







.brand small {


    font-size:.85rem;


}







.brand em {


    display:none;


}







.menu-toggle {


    display:block;


}








.menu-action {


    display:none;


}








.nav-links {


    position:absolute;



    top:78px;



    left:0;



    width:100%;



    display:none;



    flex-direction:column;



    align-items:center;



    gap:5px;






    padding:

    25px 20px;







    background:

    rgba(255,255,255,.96);







    backdrop-filter:

    blur(15px);







    -webkit-backdrop-filter:

    blur(15px);







    border-radius:

    18px;







    box-shadow:

    0 12px 35px rgba(0,0,0,.15);


}







.nav-links.active {


    display:flex;


}







.nav-links li {


    width:100%;


    text-align:center;


}







.nav-links a {


    width:100%;


    padding:

    12px;


}



}
/* =====================================================
   APPARITION DU MENU
===================================================== */


.navbar {


    animation:

    menuAppear .7s ease forwards;


}






@keyframes menuAppear {


    from {


        opacity:0;


        transform:

        translateX(-50%)

        translateY(-25px);


    }



    to {


        opacity:1;


        transform:

        translateX(-50%)

        translateY(0);


    }


}









/* =====================================================
   PETITE ELEVATION AU SURVOL DU MENU
===================================================== */


@media(min-width:901px){


.navbar:hover {


    box-shadow:

    0 12px 40px rgba(0,0,0,.16);


}



}
/* =====================================================
   PETITS ECRANS
===================================================== */


@media(max-width:600px){



.navbar {


    top:10px;


    width:96%;


}







.nav-container {


    gap:10px;


    padding:

    8px 15px;


}







.logo {


    gap:10px;


}







.logo img {


    width:48px;


    height:48px;


}







.brand strong {


    font-size:.9rem;


}







.brand small {


    font-size:.78rem;


}







.menu-toggle {


    font-size:28px;


}







.nav-links {


    top:70px;


}


}









/* =====================================================
   TRES PETITS ECRANS
===================================================== */


@media(max-width:380px){



.brand em {


    display:none;


}



.brand strong {


    font-size:.8rem;


}



.brand small {


    font-size:.7rem;


}



}
/* =====================================================
   ETAT MENU APRES DEFILEMENT
===================================================== */


.navbar.scrolled {


    background:

    rgba(255,255,255,.96);



    box-shadow:

    0 12px 35px rgba(0,0,0,.18);


}





.navbar.scrolled .brand em {


    opacity:.75;


}