/* ==================================================
   HEADER COMMUN MCi
   ================================================== */

header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.3px;
}

.brand img{
  width:70px;
  height:70px;
  object-fit:contain;
  filter:drop-shadow(0 6px 16px rgba(14,165,233,.25));
  transition:
    transform .4s cubic-bezier(.34,1.56,.64,1),
    filter .3s ease;
}

.brand img:hover{
  transform:scale(1.15);
  filter:brightness(1.1);
}

/* Navigation ordinateur */

.nav-links{
  display:none;
  align-items:center;
  gap:20px;
  margin-left:0;
  font-size:14px;
  color:#334155;
}

.nav-links > a,
.nav-trigger{
  transition:color .2s ease;
}

.nav-links > a:hover,
.nav-trigger:hover{
  color:var(--blue-800);
}

/* Menu déroulant Services */

.nav-dropdown{
  position:relative;
}

.nav-trigger{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:10px 0;
}

.nav-trigger::after{
  content:"";
  width:6px;
  height:6px;
  margin-top:-3px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .2s ease;
}

.nav-dropdown:hover .nav-trigger::after,
.nav-dropdown:focus-within .nav-trigger::after{
  transform:rotate(225deg);
}

.services-dropdown{
  position:absolute;
  top:100%;
  left:50%;
  z-index:1100;
  min-width:260px;
  padding:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 18px 45px rgba(15,23,42,.14);

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,8px);

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease;
}

/* Évite que le menu se ferme entre le bouton et la liste */
.services-dropdown::before{
  content:"";
  position:absolute;
  right:0;
  bottom:100%;
  left:0;
  height:12px;
}

.services-dropdown a{
  display:block;
  padding:10px 12px;
  color:#334155;
  font-weight:700;
  white-space:nowrap;
  border-radius:10px;
}

.services-dropdown a:hover,
.services-dropdown a:focus{
  color:var(--blue-800);
  background:#f0f9ff;
  outline:none;
}

.nav-dropdown:hover .services-dropdown,
.nav-dropdown:focus-within .services-dropdown,
.nav-dropdown.open .services-dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}

/* Bouton menu mobile */

.burger{
  display:inline-flex;
  flex-direction:column;
  gap:4px;
  padding:9px 10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  cursor:pointer;
}

.burger span{
  display:block;
  width:19px;
  height:2px;
  background:var(--fg);
  transition:transform .2s ease, opacity .2s ease;
}

.burger[aria-expanded="true"] span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}

.burger[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

/* Navigation mobile */

.mobile-menu{
  display:none;
  padding:0 18px 14px;
}

.mobile-menu.open{
  display:grid;
  gap:2px;
}

.mobile-menu > a{
  padding:10px 0;
  border-bottom:1px solid var(--line);
}

.mobile-services{
  display:grid;
  gap:0;
  padding:2px 0 8px 14px;
  border-bottom:1px solid var(--line);
}

.mobile-services a{
  padding:8px 0;
  color:#334155;
  font-size:14px;
  border-bottom:0;
}

/* Affichage ordinateur */

@media(min-width:900px){

  .nav{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:20px;
  }

  .brand{
    justify-self:start;
  }

  .nav-links{
    display:flex;
    justify-self:center;
    margin:0;
  }

  .nav > .btn{
    justify-self:end;
  }

  .burger,
  .mobile-menu{
    display:none !important;
  }
}

/* Ajustements smartphone */

@media(max-width:899px){
  .nav{
    gap:10px;
  }

  .brand img{
    width:58px;
    height:58px;
  }

  .nav > .btn{
    display:none;
  }
}