/* =========================================================
   PALETTE GLOBALE HEADER / FOOTER
   ========================================================= */
:root{
  --top-bg:#A9A3A2;
  --top-text:#0A203E;
  --top-icon:#0A203E;
  --top-icon-hover:#E4C276;
  --main-bg:#0A203E;
  --main-text:#fff;
  --main-muted:rgba(255,255,255,.85);
  --separator:rgba(255,255,255,.35);
  --accent:#E4C276;
  --ink:#0A203E;
  --shadow:0 24px 60px rgba(0,0,0,.25);
  --footer-bg:#0A203E;
  --footer-hr:rgba(255,255,255,.35);
}

/* =========================================================
   PRELOADER
   ========================================================= */
#preloader{
  position:fixed;
  inset:0;
  background:#0A203E;
  z-index:9999;
  display:grid;
  place-items:center;
  transition:opacity .35s ease,visibility .35s ease;
}
#preloader.hidden{
  opacity:0;
  visibility:hidden;
}
.preloader-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.preloader-logo{
  width:229px;
  height:50px;
  display:grid;
  place-items:center;
}
.preloader-spinner{
  width:28px;
  height:28px;
  border:3px solid rgba(255,255,255,.35);
  border-top-color:#E4C276;
  border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========================================================
   HEADER À DEUX NIVEAUX
   ========================================================= */



   
   
/* -------------------------
   TOPNAV
   ------------------------- */
.topnav{
  background:var(--top-bg);
  color:var(--top-text);
  font-size:.95rem;
}
.topnav .right-icons{
  display:inline-flex;
  align-items:center;
  gap:22px;
}
.icon-btn{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--top-icon);
  background:transparent;
  border:0;
  font-size:1.1rem;
  transition:transform .15s ease,color .15s ease;
}
.icon-btn:hover{
  color:var(--top-icon-hover);
  transform:scale(1.08);
}
.topnav .right-icons>*+*{
  position:relative;
}
.topnav .right-icons>*+*::before{
  content:"";
  position:absolute;
  left:-11px;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:18px;
  background:rgba(10,32,62,.35);
}
/* Bloc email à gauche */
.contact-email {
  font-size: .85rem;
  font-weight: 600;
  color: var(--top-text); /* #0A203E dans ta palette */
}

.contact-email i {
  font-size: 1rem;
  color: var(--top-icon); /* même couleur que les icônes top bar */
}

/* Lien email stylisé */
.email-link {
  color: var(--top-text);
  font-weight: 700;
  text-decoration: none;
  transition: color .25s ease;
}

.email-link:hover {
  color: var(--top-icon-hover); /* #E4C276 */
  text-decoration: underline;
}

/* Optionnel : amélioration de l’alignement vertical global */
.topnav .container {
  min-height: 32px;
}
/* -------------------------
   MAINNAV (barre bleue nuit)
   ------------------------- */


/* Logo */
.site-brand{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  color:#fff;
  text-decoration:none;
  font-weight:800;
}
.site-brand img{
  height:54px;
  width:auto;
  margin:15px 0;
}

/* Bouton Estimation */
.btn-estimation{
  border:1px solid var(--accent);
  color:var(--accent);
  background:transparent;
  border-radius:0;
  padding:.5rem 1rem;
  font-weight:400 !important;
  letter-spacing:.02em;
  text-transform: uppercase;
}
.btn-estimation:hover{
  filter:brightness(1.08);
  color:var(--accent);
}

/* =========================
   NAVBAR / BASE
   ========================= */

.navbar {
    position: relative;
    z-index: 1000;

    /* 🔵 Couleur demandée */
    background-color: var(--main-bg) !important;
    padding: 1.2rem 0rem;

}

/* Liens niveau 0 */
.navbar-dark .navbar-nav .nav-link {
    font-weight: 300;
    font-size: 14px;
    color: var(--main-text) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.8rem 1.2rem;
    position: relative;
}

/* Séparateur vertical */
.navbar-dark .navbar-nav .nav-item:not(:last-child) > .nav-link::after {
    content: "";
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background-color: var(--separator);
}

/* Couleur actif & hover */
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: var(--accent) !important;
}

/* Actif → sélecteur intact */
.navbar-dark .navbar-nav .nav-link.active::after,
.navbar-dark .navbar-nav .nav-link:hover::after {
    background-color: var(--separator);
}

.dropdown-menu {
    border-radius: 0;
    margin-top: 0.5rem;
}

/* Panel commun (classique + mega) en desktop */
.main-dropdown {
    background-color: #ffffff;
    color: #111827;
}

/* =========================
   MEGA MENU - DESKTOP
   ========================= */

.mega-parent.position-static {
    position: static !important;
}

@media (min-width: 992px) {
    .navbar .dropdown-menu.mega-menu {
        width: min(1100px, 100vw - 2rem);
        left: 50% !important;
        transform: translateX(-50%);
        right: auto !important;
        padding: 2rem 2.25rem;
    }
}

.mega-thumb-wrapper {
    margin-bottom: 0.75rem;
}

.mega-thumb {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 4px;
}

.mega-col {
    margin-bottom: 1.5rem;
}

.mega-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #111827;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    display: block;
}

/* =========================
   SOUS-MENUS (classique + mega)
   ========================= */

.submenu {
    list-style: none;
    margin: 0;
    padding-left: 0;
    display: none;
}

.submenu.submenu-open {
    display: block;
}

.submenu .dropdown-item,
.submenu a {
    font-size: 0.95rem;
    padding: 0.25rem 0;
    white-space: normal;
}

.submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    font-size: 0.95rem;
    padding: 0.35rem 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

/* Flèche à droite pour les menus avec sous-rubriques (desktop) */
@media (min-width: 992px) {
    .submenu-toggle {
        position: relative;
        padding-right: 22px !important; /* espace pour la flèche */
    }

    .submenu-toggle::after {
        content: "›";
        position: absolute;
        right: 8px; /* éloigne la flèche de la barre verticale */
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.8rem;
        opacity: 0.7;
        pointer-events: none; /* évite les conflits de clic */
    }
}

/* =========================
   RESPONSIVE (mobile)
   ========================= */

@media (max-width: 991.98px) {

    .main-dropdown {
        background-color: var(--main-bg) !important;
        color: var(--main-text) !important;
        width: 100%;
        left: 0 !important;
        right: auto !important;
        transform: none;
        padding: 0.75rem 1rem 1rem;
    }

    .main-dropdown .dropdown-item {
        color: var(--main-text) !important;
    }

    .main-dropdown .dropdown-item:hover {
        background-color: rgba(255,255,255,0.07);
    }

    .mega-thumb-wrapper { display:none; }
    .mega-row { display:block; }
    .mega-col {
        width:100%;
        max-width:100%;
    }

    .submenu-toggle {
        border-bottom: 1px solid rgba(255,255,255,0.35);
        padding: 0.4rem 0;
    }

    .submenu-toggle::after {
        content: "+";
        font-size: 0.85rem;
        opacity: 0.9;
    }

    .submenu-toggle.submenu-open::after {
        content: "−";
    }

    .submenu {
        padding-left: 0.75rem;
    }

    .navbar-dark .navbar-nav .nav-item > .nav-link::after {
        display:none;
    }
}

/* =========================
   GLOBAL ITEM
   ========================= */

.dropdown-item {
    font-size: 0.95rem;
}

/* Barre verticale — déplacée dans ::before pour ne plus entrer en conflit */
.navbar-dark .navbar-nav .nav-item:not(:last-child) > .nav-link::before {
  content: "";
  position: absolute;
  right: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background-color: var(--separator);
}
.navbar-dark .navbar-nav .nav-item:not(:last-child) > .nav-link::after {
  content: none !important;
}

/* Barre verticale entre les items */
/* Icône à droite */
.navbar-nav .nav-link .arrow-icon {
    margin-left: 8px;
    margin-right: 16px; /* avant la barre verticale */
    font-size: 0.75rem;
    transition: transform .2s ease;
}

/* Quand le parent a un sous-menu ouvert : flèche vers le bas */
.navbar-nav .nav-link.show .arrow-icon {
    transform: rotate(90deg); /* chevron-right → chevron-down */
}

.dropdown-item.active, .dropdown-item:active {
  color: #000;;/*var(--bs-dropdown-link-active-color);*/
  text-decoration: none;
  background-color: #FFF;/*var(--main-bg);*/
  padding: 5px 10px;
}

.lightbox-counter {
    position: absolute;
    top: -6px;
    right: -4px;
    padding: 2px 8px;

    background: #E4C276;
    color: #0A203E;

    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;

    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);

    transition: transform 0.2s ease;
}

.icon-btn:hover .lightbox-counter {
    transform: translateY(-2px);
}