/* les principales */

body {
    background:#111; 
    color:#fff;
    margin:0; 
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    font-weight: 400;
    color:#fff;
    background:#111;
    margin:0;
}
h1 { 
    text-align:center; 
    margin-bottom:30px; 
}
h2 {
    margin-left:5px;
    color:white;
    text-align:center;
}

/*Fin principales */

/* Navigation */

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 0px;
    background: Black;
    color: #fff;
    position: relative;
    font-family: 'Poppins', Helvetica, Arial, sans-serif;
    font-weight: 200; /* vraiment fin */
    letter-spacing: 0.7px; /* espacement léger pour l’aération */
}
/* LOGO */
.nav-logo img {
    max-height: 70px;
    margin-top: 1px;
    margin-left: 5px;
}
/* MENU (desktop) */
.nav-menu {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    padding-bottom:10px;
    margin-top:70px;
    margin-left:200px;
}
.nav-menu li a {
    display: flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    gap: 8px; /* espace entre icône et texte */
}
.nav-menu li a i {
    font-size: 18px; /* taille icône */
    vertical-align: middle;
    transition: color 0.2s;
    color: #fff; /* icône blanche par défaut */
}
.nav-menu li a:hover i {
    color: #ff3366; /* accent au survol */
}
/* ACTIONS bouton connexion inscription*/
.nav-actions {
    display: flex;
    gap: 10px;
    margin-top:-35px;
}
/* BOUTONS STYLE */
.btn-subscribe {
    background:rgb(225, 13, 113);
    color:#fff;
    padding: 8px 12px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    margin-top:25px;
}
.btn-subscribe:hover { 
    background:#A12782; 
}
.btn-login {
    color:#ff33cc; 
    background : black;
    padding: 10px 12px;
    border-radius: 20px;
    text-decoration: none;
    margin-top:25px;
}
.btn-login:hover { 
    color:#A12782; 
}
/* HAMBURGER */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 10px;
    margin-top:-20px;
    margin-right:20px;
}
.hamburger span {
    width: 25px;
    height: 3px;
    background: #fff;
    transition: all 0.3s;
}
/* CROIX (fermeture menu mobile) */
.close-btn {
    display: none;
    position: absolute;
    top: 0px;
    right: 20px;
    font-size: 50px;
    font-family: 'Poppins', Helvetica, Arial, sans-serif;
    font-weight: 200; /* vraiment fin */
    line-height: 1;
    color: red;
    cursor: pointer;
    z-index: 1100;
}
/* Boutons dans le menu mobile */
.nav-menu .mobile-actions {
    display: none;
}
/* Ajustement spécial version bureau */
@media (min-width: 769px) {
    .nav-links {
        display: flex;
        justify-content: center;   /* centre les liens horizontalement */
        align-items: center;       /* centre verticalement */
        gap: 30px; /* espace entre les liens */
        margin-top: 20px; /* décale un peu plus bas (comme un <br>) */
    }
    .nav-links a {
        text-align: center;
        line-height: 1.6;
    }
}
/* RESPONSIVE */
@media (max-width: 768px) {
    .nav-logo img {
        max-height: 60px;
        margin-top: 5px;
    }
    .nav-menu, .nav-actions {
        position: fixed;
        top: -60px;
        right: -100%;
        height: 100vh;
        width: 50%;
        background: #111;
        flex-direction: column;
        align-items: flex-start;
        padding: 60px 20px;
        gap: 15px;
        transition: right 0.3s ease-in-out;
        overflow-y: auto;
        z-index: 1000;
    }
    .nav-menu.show, .nav-actions.show {
        right: 0;
    }
    .nav-actions {
        align-items: flex-start;
        margin-top: auto;
        padding-bottom: 20px;
        flex-direction: column;
    }
    .hamburger {
        display: flex;
    }
    /* masquer boutons desktop */
    .navbar > .nav-actions {
        display: none;
    }
    /* montrer la croix */
    .close-btn.show {
        display: block;
    }
    .nav-menu .mobile-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
        text-align: center;
    }
    .nav-menu .mobile-actions a {
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
    }
}

/* Fin Navigation */