/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* BOUTON MOBILE */
.menu-btn {
  display:none;
  border:none;
  background:none;
}

.menu-btn i {
  font-size:30px;
  color:#0A2A6C;
}

/* MENU MOBILE */
.mobile-menu {
  display:none;
  flex-direction:column;
  width:100%;
  background:white;
  padding:1.5rem;
  gap:1rem;
  border-top:1px solid #eee;
}

.mobile-menu a {
  text-decoration:none;
  color:#0A2A6C;
  font-weight:500;
}

/* OUVERTURE */
.mobile-menu.open {
  display:flex;
}

/* RESPONSIVE */
@media(max-width:1232px){
  .nav-links { display:none; }
  .menu-btn { display:block; }
}

/* État normal desktop */
#navbar {
    /* background: linear-gradient(to bottom right, #0A2A6C, #0d3380, #0A2A6C); */
    transition: all .3s ease;
    position: relative;
    z-index: 999;
}


/* État scrollé */
#navbar.nav-scrolled {
    background: #ffffff !important;
    box-shadow: 0 2px 20px rgba(0,0,0,.08);
    position: fixed;
    top: 0;
    width: 100%;
}

/* Sécurité mobile : toujours visible */
@media(max-width: 992px) {

    #navbar {
        background: #ffffff !important;
        position: relative;
    }
}

.nav-link {
  text-decoration: none;
  font-weight: 500;
  color: #0A2A6C !important;
  transition: .3s;
}

.nav-link:hover,
.nav-link.active {
  color: #FF7A00 !important;
}

.btn-devis:hover {
  background: transparent;
  color: #FF7A00 !important;
  border-color: #FF7A00;
}


/* NAV INSIDE */
.nav-content {
    display: flex;
    flex-wrap: wrap; /* 👈 permet aux éléments de passer à la ligne si besoin */
    align-items: center;
    justify-content: space-between;
    /* padding: 1rem 0; */
    gap: 1rem; /* espace entre les lignes si wrapping */
}


/* LOGO */
.logo-image-box {
  width: 80px;
}

.logo-image-box img {
  width: 100%;
}

/* LINKS DESKTOP */
.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.nav-link {
  text-decoration: none;
  font-weight: 500;
  color: #0A2A6C; /* blanc au départ */
  transition: .3s;
}

.nav-link:hover,
.nav-link.active {
  color: #FF7A00; /* jaune */
}

/* BTN DEVIS */
.btn-devis {
  background: #FF7A00;
  color: white;
  padding: .6rem 1.4rem;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid #FF7A00;
}

.btn-devis:hover {
  background: transparent;
  color: #FF7A00;
  border-color: #FF7A00;
}

#navbar.nav-scrolled .nav-link {
  color: #0A2A6C !important; /* bleu au scroll */
}

#navbar.nav-scrolled .nav-link:hover,
#navbar.nav-scrolled .nav-link.active
 {
  color: #FF7A00 !important; /* jaune au hover/active */
}

/* RESPONSIVE */
@media(max-width:1232px){
  .nav-links { display:none; }
  .menu-btn { display:block; }
}

/* Lien actif mobile */
.mobile-menu a.active,
.mobile-menu .nav-link-mobile.active {
    color: #FF7A00 !important; /* jaune */
}

.nav-infos {
    display: flex;
    align-items: center;
    gap: 14px;
    /* font-size: 0.8rem; */
    color: #0A2A6C;
    white-space: nowrap;
}

.nav-infos i {
    color: #FF7A00;
    margin-right: 4px;
}

/* .nav-infos .secondary {
    opacity: .7;
} */
@media (max-width:1232px) {

    .nav-content {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    /* Logo à gauche */
    .nav-left {
        flex-shrink: 0;
    }

    /* Infos au centre */
    .nav-infos {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        /* flex-direction: column;  */
        align-items: center;
        text-align: center;
        /* gap: 4px; */
        white-space: normal;
        font-size: 0.75rem;
        color: #0A2A6C;
    }

    .nav-infos i {
        color: #FF7A00;
        margin-right: 4px;
    }

    .nav-infos span {
        display: block;
    }

    /* Menu burger à droite */
    .menu-btn {
        display: block;
    }

    /* Cacher le menu desktop */
    .nav-links {
        display: none;
    }
}
@media (max-width:895px) {

    .nav-content {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    /* Logo à gauche */
    .nav-left {
        flex-shrink: 0;
    }

    /* Infos au centre */
    .nav-infos {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column; 
        align-items: center;
        text-align: center;
        gap: 4px;
        white-space: normal;
        font-size: 0.75rem;
        color: #0A2A6C;
    }

    .nav-infos i {
        color: #FF7A00;
        margin-right: 4px;
    }

    .nav-infos span {
        display: block;
    }

    /* Menu burger à droite */
    .menu-btn {
        display: block;
    }

    /* Cacher le menu desktop */
    .nav-links {
        display: none;
    }
}