/*────────────────── 
         header et navigation
──────────────────*/

header{
        margin: 0 auto;
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center; 
        justify-content: space-around; 
        background: var(--main-header-background);
        position: fixed;
        top: 0;
        transition: 0.3s;
        z-index: 1000; /* Fortement augmenté pour s'assurer que le header est toujours au-dessus */
        box-shadow: 0 2px 10px rgba(93, 64, 55, 0.1); /* Légère ombre pour mettre en valeur la navbar */
}
.nav-show{
        opacity: 1;
}

header:hover{
        opacity: 1;
        background: var(--main-header-background);
}

.nav-bar{
        list-style:none;
        position: relative;
        display: inline-flex;
}

a.nav-link{
        margin: 2px;
        padding: 5px 10px;
        text-decoration: none;
        color: var(--main-fonts-color);
        font-family: var(--main-font-family);
        cursor: pointer;
        text-transform: uppercase;
}

.active{
        background: var(--main-decor-color);
}

.nav-link:hover {
        color: #000000;
        background: var(--main-decor-color);
}

/*────────────────── 
         hamburger
──────────────────*/
.hamburger {
        display: none;
}

.hamburger div{
        width: 30px;
        height: 3px;
        background: #5d4037;
        margin: 5px;
        transition:all 0.3s ease;
}

.toggle .line1{
        transform: rotate(-45deg) translate(-5px,6px);
}

.toggle .line2{
        opacity: 0;
}

.toggle .line3{
        transform: rotate(45deg) translate(-5px,-6px);
}

@keyframes navLinkFade{
        from{
                opacity:0;
                transform: translatex(50px);
        }
        to{
                opacity: 1;
                transform:translatex(0px);
        }
}

/* Styles pour menu mobile */
@media only screen and (max-width: 768px) {
        /* Positionnement des images Laure sur mobile */
        .navbar-laure-gallery {
                position: fixed;
                top: 10px; /* Mieux aligné avec le hamburger */
                left: 0;
                width: 85%; /* Largeur maximale pour mobile */
                height: 25px; /* Hauteur fixe réduite */
                z-index: 30;
                display: flex !important;
                justify-content: space-between !important; /* Espace égal entre les éléments */
                align-items: center !important;
                padding-left: 2px;
                white-space: nowrap !important;
                overflow: hidden !important;
                /* Force une seule ligne */
                flex-direction: row !important;
                flex-wrap: nowrap !important;
        }
        
        .navbar-laure-gallery::-webkit-scrollbar {
                display: none; /* Masquer la barre de défilement */
        }
        
        .navbar-laure-gallery .laure-item {
                width: 19px !important; /* Images très petites */
                height: 19px !important;
                margin: 0 !important; /* Aucune marge */
                padding: 0 !important;
                flex: 0 0 auto !important; /* Empêche les éléments de s'agrandir/rétrécir */
                display: block !important;
        }
        
        /* Force la dernière image à rester visible */
        .navbar-laure-gallery .laure-item:last-child {
                margin-right: 10px !important;
        }

        /* Menu hamburger amélioré */
        .hamburger {
                display: block !important;
                position: fixed;
                top: 15px;
                right: 15px;
                cursor: pointer;
                z-index: 9999; /* S'assurer qu'il est au-dessus de tout */
                background-color: rgba(240, 231, 219, 0.85); /* Beige assorti au menu */
                padding: 8px;
                border-radius: 5px;
                transition: all 0.3s ease;
                box-shadow: 0 2px 5px rgba(93, 64, 55, 0.2); /* Ombre légère */
        }
        
        .hamburger:hover {
                background-color: rgba(226, 215, 200, 0.95); /* Beige légèrement plus foncé au survol */
        }
        
        .hamburger div {
                width: 25px;
                height: 2px; /* Lignes plus fines */
                background: var(--main-fonts-color); /* Utiliser la couleur des fontes principales (marron) */
                margin: 6px 0; /* Espacement légèrement augmenté */
                transition: all 0.3s ease;
                border-radius: 2px; /* Bordures arrondies pour un look plus doux */
        }
        
        /* Animation du hamburger */
        .toggle .line1 {
                transform: rotate(-45deg) translate(-5px, 6px);
                background-color: var(--main-decor-color);
        }
        
        .toggle .line2 {
                opacity: 0;
        }
        
        .toggle .line3 {
                transform: rotate(45deg) translate(-5px, -6px);
                background-color: var(--main-decor-color);
        }
        
        .nav-bar {
                position: fixed;
                top: 0;
                right: -100%;
                width: min(300px, 80%); /* Largeur responsive avec une valeur maximum */
                height: 100vh;
                background: rgba(240, 231, 219, 0.95); /* Beige plus foncé et légèrement plus opaque */
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transition: right 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0);
                z-index: 98;
                box-shadow: -5px 0 15px rgba(93, 64, 55, 0.15); /* Ombre plus subtile dans les tons marrons */
                padding: 60px 0 20px 0; /* Padding haut et bas pour meilleur espacement */
                opacity: 1;
                visibility: visible;
                backdrop-filter: blur(5px); /* Effet de flou pour plus de sophistication */
                -webkit-backdrop-filter: blur(5px);
                display: flex; /* Assurer que c'est toujours flexbox */
                overflow-y: auto; /* Permettre le défilement si nécessaire */
        }
        
        .nav-bar.open {
                right: 0;
        }
        
        .nav-bar li {
                opacity: 0;
                text-align: center;
                margin: 15px 0;
        }
        
        .nav-bar li:nth-child(1) {
                transition: all 0.5s ease 0.2s;
        }
        
        .nav-bar li:nth-child(2) {
                transition: all 0.5s ease 0.4s;
        }
        
        .nav-bar li:nth-child(3) {
                transition: all 0.5s ease 0.6s;
        }
        
        .nav-bar li:nth-child(4) {
                transition: all 0.5s ease 0.8s;
        }
        
        .nav-bar li:nth-child(5) {
                transition: all 0.5s ease 1.0s;
        }
        
        .nav-bar li:nth-child(6) {
                transition: all 0.5s ease 1.2s;
        }
        
        .nav-bar li:nth-child(7) {
                transition: all 0.5s ease 1.4s;
        }
        
        li.fade {
                opacity: 1;
        }
        
        .nav-bar li a {
                font-size: clamp(16px, 4.5vw, 20px); /* Taille de police responsive */
                padding: 15px;
                display: block;
                width: 100%;
                text-align: center;
                color: var(--main-fonts-color); /* Cohérence avec la palette de couleurs du site */
                font-weight: 600; /* Un peu moins lourd que bold */
                text-shadow: 0px 0px 1px rgba(93, 64, 55, 0.5); /* Ombre plus subtile */
                letter-spacing: 0.5px; /* Meilleure lisibilité */
                position: relative;
                border-radius: 3px;
                transition: all 0.25s ease;
                margin: 8px 0;
                overflow: hidden; /* Pour l'effet glitch */
        }
        
        /* Effet hacker subtil sur les liens */
        .nav-bar li a::before {
                content: attr(href);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: transparent;
                color: var(--main-decor-color);
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transform: translateY(100%);
                transition: transform 0.2s ease, opacity 0.1s ease;
                pointer-events: none;
        }
        
        .nav-bar li a:hover {
                background-color: rgba(161, 136, 127, 0.15); /* Fond légèrement coloré au survol */
                color: #5d4037; /* Couleur plus foncée au survol */
                transform: translateY(-2px); /* Léger effet de survol */
        }
        
        .nav-bar li a:hover::before {
                opacity: 0.1;
                transform: translateY(0);
                animation: glitchText 0.4s ease-out forwards;
        }
        
        @keyframes glitchText {
                0% { clip-path: inset(0 0 0 0); }
                20% { clip-path: inset(20% 0 0 0); }
                40% { clip-path: inset(40% 0 40% 0); }
                60% { clip-path: inset(0 0 60% 0); }
                80% { clip-path: inset(80% 0 20% 0); }
                100% { clip-path: inset(0 0 0 0); }
        }
}