/* ===========================
   Menu MD Web Création — 2025
   =========================== */

/* Petites touches */
.dropdown-item.active,
.dropdown-item:active{ text-decoration:none; background:#e7e7e7; }

body{ font-family:sans-serif; overflow-x:hidden; }
a.menu-mob{ font-size:1.5rem; }
.spacer-80{ height:80px; }

/* ===========================
   NAVBAR (design conservé)
   =========================== */
.navbar{
  /* largeur fixe : on NE la modifie plus, on animera via scale() */
  width:95%;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:25px;

  /* Transitions fines (pas de all) */
  transition:
    transform .55s cubic-bezier(.22,.61,.36,1),
    padding .55s cubic-bezier(.22,.61,.36,1),
    border-radius .45s ease,
    box-shadow .35s ease,
    background-color .3s ease;
  will-change: transform, padding, border-radius, box-shadow;

  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px,
              rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;

  /* Centrage + variables pour composer la transform proprement */
  --nav-scale: 1;
  top:20px;
  left:50%;
  transform: translateX(-50%) translateY(0) scale(var(--nav-scale));
  transform-origin: top center;
}
.navbar .row{ height:100%; align-items:center; }
.container-menu {padding-left: 25px; padding-right: 25px;}

/* Effet réduit — Desktop (≥1200px) : scale au lieu de width */
@media (min-width:1200px){
  .navbar.scrolled{
    --nav-scale: .96;                 /* réduction douce ~4% */
    padding:0 20px;
    border-radius:25px;
    box-shadow:0 5px 15px rgba(0,0,0,.1);
  }
}

/* Mobile/Tablet (<1200px) : pas de réduction (scale=1) */
@media (max-width:1199.98px){
  .navbar.scrolled{
    --nav-scale: 1;
    padding:20px 40px;                /* conserve la même hauteur visuelle */
    border-radius:25px;
    box-shadow:0 5px 15px rgba(0,0,0,.1);
  }
}

/* Cache au scroll mais RESTE centré (garde le scale courant) */
.navbar-hidden{
  transform: translateX(-50%) translateY(calc(-100% - 20px)) scale(var(--nav-scale)) !important;
}

/* États et hover */
.nav-links{ list-style:none; display:flex; gap:20px; }
.nav-links li a{ text-decoration:none; color:#333; font-weight:700; font-size:1rem; transition:color .3s; }
.nav-links li a:hover{ color:#4f5795; }
a.dropdown-item.text-bleu.fw-bold.d-flex.align-items-center.justify-content-between.w-100:hover{
  background:#f8f9fa !important; border-radius:15px;
}

/* Logo verrouillé 200×55 partout (aucune réduction) */
.logo-img{ display:block; width:200px; height:55px; }

/* Ancien sélecteur éventuel : on annule la réduction si utilisé */
#logo{ height:50px; transition:height .4s ease-in-out; }
@media (min-width:1200px){
  .navbar.scrolled #logo{ height:40px; }           /* desktop : ok si #logo existe */
}
@media (max-width:1199.98px){
  .navbar.scrolled #logo{ height:50px; }           /* mobile/tablette : pas de réduction */
}

.navbar-toggler{ background:transparent; border:none; font-size:2rem; }
button.btn-close{ background:#000 !important; border-radius:50%; color:#fff !important; }
button.btn-close:hover{ background:#000 !important; border-radius:50%; color:#fff !important; }

/* ===========================
   DROPDOWN desktop : aligné GAUCHE
   =========================== */
.navbar .dropdown-menu{ left:0 !important; right:auto !important; }
.navbar .dropdown-menu[data-bs-popper]{ left:0 !important; right:auto !important; margin-top:0; }

/* ===========================
   SIDE MENU (mobile) — slide GAUCHE
   avec marge 20px + radius 25px
   =========================== */
.side-menu{
  position:fixed;
  top:0; left:-100%;
  width:100%; height:100%;
  background:transparent;             /* pour voir l’espace autour */
  z-index:99999999;
  overflow:hidden;                     /* évite scroll latéral au slide */
  transition:left .6s ease;            /* slide propre */
}

/* panneau interne : cadre avec marge 20px */
.menu-wrapper{
  position:absolute;
  inset:20px;                          /* marge tout autour */
  border-radius:25px;
  background:#4f5795;
  display:flex;
  width:auto; height:auto;
  overflow:hidden;                     /* l’image respecte le radius */
}

/* image de fond découpée par le radius */
.menu-wrapper::after{
  content:"";
  position:absolute; inset:0;
  background-image:url('/img/icons/menu-md.png');
  background-size:cover; background-position:center;
  z-index:1; opacity:1;
}

/* contenu par-dessus */
.menu-left,
.menu-right,
.close-btn{ position:relative; z-index:2; }

/* ouverture */
.side-menu.open{ left:0; }

/* Colonne gauche */
.menu-left{
  width:70%;
  padding:80px 40px;
  overflow-y:auto;
}
.menu-list{ list-style:none; }
.menu-list li{ margin-bottom:35px; font-size:3rem; display:flex; align-items:center; }
.menu-list a{
  color:#e0e0e0; text-decoration:none; transition:color .3s ease; padding:0 0 0 40px;
}
.menu-list a:hover{ color:#fff; }

.submenu-toggle{
  background:none; border:none; color:#e0e0e0;
  font-weight:300; font-size:2rem; margin-left:12px; cursor:pointer;
}
.submenu{ display:none; margin-top:12px; padding-left:40px; line-height:1.5rem; }
.submenu li{ font-size:1.5rem; margin-bottom:15px; }

/* Colonne droite */
.menu-right{
  width:30%;
  background:rgba(255,255,255,.05);
  display:flex; justify-content:center; align-items:center; text-align:center;
  padding:40px; color:#fff;
}
.info-block{ display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
.logo-menu{ max-width:400px; height:auto; }
.social-icons a{ color:#fff; font-size:2rem; margin:0 8px; text-decoration:none; }
.contact-info p{ margin:5px 0; font-size:1.1rem; color:#fff; }

/* Fermeture */
.close-btn{ position:absolute; top:20px; right:20px; z-index:3; text-decoration:none; }
.circle-bg{
  width:60px; height:60px; background:rgba(255,255,255,.2);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.close-icon{ color:#fff; font-size:36px; }

/* Bouton “Tous les services” à cheval */
a.btn-mdweb-inverse.menu{
  z-index:10; padding:10px 20px; width:100%;
  border-bottom-left-radius:25px !important; border-bottom-right-radius:25px !important;
  border-top-left-radius:0 !important; border-top-right-radius:0 !important; border:none;
}
a.btn-mdweb-inverse.menu:hover{ background:#4f5795 !important; color:#fff; }

/* ===========================
   Responsive
   =========================== */
@media (max-width:768px){
  .menu-right{ display:none; }
  .menu-left{ width:100%; }
  .menu-list li{ font-size:2.4rem; }
  .menu-list a {padding: 0px;}
  ul.menu-list {padding-left: 0px;}
  /* Plus AUCUNE règle ne modifie .logo-img : reste 200×55 */
}

@media (max-width:512px){
  .navbar.scrolled { padding:0px; }
  nav#navbar { top:0px; }
  .menu-list a {padding: 0px;}
  ul.menu-list {padding-left: 0px;}
}

/* ===== Mobile / Tablette : ne rien réduire quand .scrolled est actif ===== */
@media (max-width:1199.98px){
  /* Le contenu (container) garde la même densité */
  #navbar.scrolled .container{
    padding-left:25px !important;
    padding-right:25px !important;
  }

  /* Logo verrouillé 200×55, pas de shrink */
  #navbar .logo-img,
  #navbar.scrolled .logo-img{
    width:200px !important;
    height:55px !important;
  }
  /* Au cas où un ancien sélecteur jouerait encore */
  #navbar.scrolled #logo{ height:50px !important; }

  /* Boutons/zone de droite : pas de resserrement */
  #navbar .btn-wrapper,
  #navbar.scrolled .btn-wrapper{
    margin:0 !important;
  }
}

/* ===== Anti-flash bleu sur clic logo / liens du header ===== */
#navbar,
#navbar:active,
#navbar:focus,
#navbar:focus-within,
#navbar.scrolled,
#navbar.scrolled:focus-within{
  background: rgba(255,255,255,.6) !important;   /* arrière-plan stable */
  -webkit-tap-highlight-color: transparent;
}

/* Neutraliser tout repaint de fond déclenché par les liens */
#navbar a:active,
#navbar a:focus,
#navbar .navbar-brand:active,
#navbar .navbar-brand:focus,
#navbar .nav-link:active,
#navbar .nav-link:focus{
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Si un style global applique un fond au parent lors du focus */
#navbar *:focus-visible{
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Empêcher une transition visuelle de background pendant l’active */
#navbar, #navbar *{
  transition-property: background, background-color;
  transition-duration: 0s !important;
}