* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: #fff;
    background-color: #000;
    padding-top: 100px; /* Espace pour le header fixe */
}

/* ============================================================
   HEADER STYLE PROJET (Rétabli sur PC + Adaptatif Mobile)
   ============================================================ */
header {
    height: 70px;
    display: flex;
    justify-content: space-between; /* Aligne les trois blocs de manière invisible */
    align-items: center;
    padding: 0 50px; /* On remet tes 50px d'origine */
    position: fixed;
    top: 0; left: 0; width: 100%;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Astuce Flexbox pour forcer le menu PILE au centre comme ton ancien Grid */
.logo, header::after {
    flex: 1; /* Prend une part égale à gauche et à droite */
    display: flex;
}

header::after { 
    content: ""; /* Bloc invisible à droite qui fait contrepoids pour centrer la nav */
}

.logo { justify-content: flex-start; }
.logo img { height: 70px; width: auto; display: block; }

nav { 
    justify-self: center; 
    display: flex; 
    gap: 10px; 
}

nav a {
    color: #fff;
    text-decoration: none;
    font-size: 14px; /* Remis à 14px comme avant */
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 16px; /* Remis à 16px comme avant */
    transition: 0.3s ease;
    border-radius: 4px;
}

nav a:hover {
    background-color: white; /* La couleur du texte reste gérée par ton script JS */
}

/* ============================================================
   SECTIONS & CAROUSELS
   ============================================================ */
.carousel-section {
    background: black;
    padding: 30px 20px;
    text-align: left;
}

.carousel-section h2 {
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-left: 3px solid #fff; /* Barre blanche comme sur Projet */
    padding-left: 15px;
    margin-bottom: 20px;
    display: block;
}

.carousel {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 15px;
    padding: 20px 0;
    scrollbar-width: none;
}

.carousel::-webkit-scrollbar { display: none; }

.carousel img, .video-landscape {
    flex-shrink: 0;
    border-radius: 8px;
    transition: transform 0.3s ease, border-color 0.1s ease;
    border: 4px solid transparent;
}

/* Tailles d'origine respectées */
.carousel img { height: 200px; width: auto; }
.carousel-section.tall .carousel img { height: 350px; }

.video-landscape {
    width: 500px;
    height: 281px;
    object-fit: cover;
}

.carousel img:hover, .video-landscape:hover {
    transform: scale(1.05);
    z-index: 1;
}

.dots { text-align: center; margin-top: 15px; }
.dot { display: inline-block; width: 12px; height: 12px; margin: 0 6px; background-color: #333; border-radius: 50%; cursor: pointer; }
.dot.active { background-color: #fff; }

/* ============================================================
   MEDIA QUERY SMARTPHONE (Bascule uniquement sur mobile)
   ============================================================ */
@media (max-width: 768px) {
    body {
        padding-top: 120px; /* Ajustement du haut de page pour le menu empilé */
    }

    header {
        height: auto; 
        flex-direction: column; /* Le logo passe au-dessus sur mobile */
        justify-content: center;
        gap: 12px;
        padding: 15px 0;
    }

    /* On désactive les contrepoids sur mobile pour pouvoir centrer */
    .logo, header::after {
        flex: none;
    }
    header::after { 
        display: none; 
    }

    .logo img {
        height: 45px; /* Plus compact sur mobile */
    }

    nav {
        width: 100%;
        justify-content: center;
        gap: 4px;
    }

    nav a {
        font-size: 12px;
        padding: 6px 12px;
    }
}