body {
    overflow-x: hidden;
}

/* Lueur rouge décorative en haut de page : simple accent discret près du
   logo, la continuité menu/photo/texte vient surtout du dégradé noir sur
   la photo (voir .split-hero-image-overlay / .clients-hero-image-overlay). */
.page-glow {
    position: absolute;
    top: -260px;
    left: -220px;
    width: 700px;
    height: 700px;
    filter: blur(70px);
    pointer-events: none;
    z-index: 10000;
}

@media (max-width: 768px) {
    .page-glow {
        width: 460px;
        height: 460px;
        top: -200px;
        left: -220px;
    }
}

/* Conteneur fixe du menu */
.nav-wrapper {
    position: fixed;
    width: 100%;
    top: 5px;
    z-index: 9999;
    transition: top 0.35s;
}

/* Au scroll, le bandeau vient se coller tout en haut de l'écran. */
.nav-wrapper:has(.navbar.scrolled) {
    top: 0;
}

/* Style de la navbar */
.navbar {
    width: 92%;
    margin: auto;
    background: #0d0d0d;
    backdrop-filter: blur(18px);
    border-radius: 8px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
    transition: all 0.35s;
}

.navbar > .container {
    flex-wrap: nowrap;
}

.navbar-collapse {
    min-width: 0;
}

.navbar-nav {
    flex-wrap: nowrap;
    min-width: 0;
}

/* Effet réduction lors du scroll : fond blanc plein (non transparent),
   plaqué en haut de l'écran, sans coins arrondis. */
.navbar.scrolled {
    width: 100%;
    padding: 8px 0;
    background: #0d0d0d;
    backdrop-filter: none;
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* Liens du menu */
.nav-link {
    color: #ffffff;
    font-weight: 600;
    margin: 0 10px;
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-size: 12px;
    white-space: nowrap;
    position: relative;
    transition: all 0.3s;
    text-transform: uppercase;
}

/* Icône au-dessus du texte : masquée sur le menu desktop (texte seul en ligne),
   activée uniquement dans le menu flottant mobile (voir media query plus bas). */
.nav-icon-circle {
    display: none;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 2px;
    background: #C8102E;
    border-radius: 8px;
    transition: all 0.35s;
}

.nav-link:hover,
.navbar-nav .nav-link.active {
    color: #C8102E;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* Le caret Bootstrap par défaut (petite flèche indiquant le menu déroulant) est masqué :
   plus discret sans indicateur visuel supplémentaire. */
.nav-link.dropdown-toggle::after {
    display: none;
}

/* Dropdown menu */
.dropdown-menu {
    border: none;
    border-radius: 18px;
    margin-top: 18px;
    padding: 6px;
    min-width: 130px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.dropdown-item {
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item.active {
    background: #C8102E;
    color: #fff;
    border-radius: 12px;
}

/* Partie droite */
.right-menu {
    display: flex;
    align-items: center;
    gap: 15px;
}

.client {
    text-decoration: none;
    color: #f5f5f5;
    font-weight: 600;
    margin-right: 30px;
}

.btn-devis {
    background: #fd0000;
    color: #fcfcfc;
    padding: 12px 20px;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-devis:hover {
    background: #ff0202;
    color: #fefefe;
    transform: translateY(-3px);
}

.btn-devis:active {
    transform: translateY(-1px);
}

.btn-devis:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid #ff0000;
    outline-offset: 3px;
}

/* Hamburger */
.navbar-toggler {
    border: none;
    padding: 0;
}

.navbar-toggler span {
    display: block;
    width: 30px;
    height: 3px;
    background: #ff0000;
    margin: 6px 0;
    border-radius: 8px;
}

/* Responsive styles */
@media(max-width: 991px) {
    .navbar {
        width: 95%;
        /* backdrop-filter transforme .navbar en bloc de référence pour tout
           descendant en position fixed (dont le menu flottant), ce qui casse
           son positionnement par rapport à l'écran. On le désactive donc ici
           et on compense avec un fond moins transparent. */
        backdrop-filter: none;
        background: linear-gradient(90deg, rgba(28, 8, 8, 0.96) 0%, rgba(13, 13, 13, 0.96) 45%, rgba(13, 13, 13, 0.96) 100%);
    }

    /* Rangée logo / bouton hamburger : toujours sur une seule ligne,
       logo à gauche, hamburger fixe à droite. */
    .navbar > .container {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .navbar-toggler {
        margin-left: auto;
        flex-shrink: 0;
    }

    /* Le menu déroulant ne suit plus le flux normal : il flotte en bas
       de l'écran, détaché du bandeau du haut, quelle que soit la hauteur
       de son contenu. */
    .navbar-collapse {
        position: fixed;
        left: 4%;
        right: 4%;
        bottom: 20px;
        width: 92%;
        max-height: 70vh;
        overflow-y: auto;
        margin: 0;
        background: #0d0d0d;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
        z-index: 9998;
    }

    .nav-link {
        margin: 18px 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .nav-icon-circle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 2px solid #7a0a1c;
        background: rgba(200, 16, 46, 0.1);
        color: #C8102E;
    }

    .nav-icon-circle svg {
        width: 20px;
        height: 20px;
    }

    .right-menu {
        flex-direction: column;
        gap: 15px;
        margin-top: 20px;
    }

    .client {
        margin: 0 0 20px;
        text-align: center;
    }

    .btn-devis {
        text-align: center;
        margin: 0 auto;
    }

    /* Voile semi-transparent derrière le menu flottant */
    .mobile-nav-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 9997;
    }

    .mobile-nav-backdrop.show {
        display: block;
    }
}

@media(min-width: 992px) {
    .mobile-nav-backdrop {
        display: none !important;
    }
}

/* Tailwind (chargé globalement pour le JS de l'intro) définit un utilitaire
   ".collapse" (visibility:collapse, pour les lignes de tableau) qui entre
   en collision avec la classe ".collapse" de Bootstrap utilisée ici pour
   le menu repliable — le menu gardait sa taille (display:flex) mais son
   contenu devenait invisible (visibility:collapse). On force la visibilité normale. */
.navbar-collapse.collapse {
    visibility: visible !important;
}

/* Logo toujours visible dans le menu (l'ancien effet d'apparition lié à
   la fin de la vidéo d'accueil a été retiré : il rendait le logo invisible
   tant que la vidéo n'avait pas fini un premier cycle complet). */
#navbarLogo {
    opacity: 1;
    transform: translateY(0);
}