/* =====================================================================
   vue/header.php — styles du header (fichier externe)
   Chargé en dernier dans le <head>, après creative-navigation.css.
   ===================================================================== */

/* Contact : visible sur tous les écrans (mobile, tablette, desktop) */
header.topbar .syo-desktop-contact{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  white-space:nowrap;
  visibility:visible !important;
  opacity:1 !important;
}

/* =====================================================================
   HEADER « CAPSULE CENTRALE »
   Header transparent · logo à gauche · menu dans une capsule blanche
   centrée avec le bouton principal en pilule sombre · liens discrets à droite
   Charte SYO Web : Schibsted Grotesk · #FF8A3D / #F57323 · noir · blanc
   Chargé APRÈS toutes les autres feuilles du header (voir vue/header.php).
   ===================================================================== */

/* ---------- 1. Le header lui-même : transparent ---------- */
html body header.topbar.syo-hdr{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  transition:background .4s ease !important;
}
/* Au scroll : simple fondu du fond de page derrière la barre, pour la lisibilité */
html body.is-scrolled header.topbar.syo-hdr{
  background:linear-gradient(180deg, var(--bg,#fff) 35%, rgba(255,255,255,0)) !important;
}
html[data-theme="dark"] body.is-scrolled header.topbar.syo-hdr{
  background:linear-gradient(180deg, var(--bg,#000) 35%, rgba(0,0,0,0)) !important;
}

/* Trois zones : logo | capsule (vraiment centrée) | liens */
html body header.topbar.syo-hdr > div{
  display:grid !important;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}
html body header.topbar.syo-hdr .logo-wrap{ justify-self:start; }
html body header.topbar.syo-hdr .syo-hdr-right{ justify-self:end; }

/* ---------- 2. La capsule centrale ---------- */
/* Pas de position:relative ici : le méga-menu Services reste calé sur toute la largeur du header */
.syo-pill{
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 5px 5px 14px;
  border-radius:999px;
  background:#FFFFFF;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 28px -14px rgba(0,0,0,.22);
}
html body header.topbar.syo-hdr .syo-pill .mainnav{ gap:2px !important; }

/* Liens : gris doux, le lien actif et le survol en noir */
html body header.topbar.syo-hdr .syo-pill .nav-link,
html body header.topbar.syo-hdr .syo-pill .drop-toggle{
  color:#8E8E93 !important;
  font-family:"Schibsted Grotesk",system-ui,sans-serif !important;
  font-size:14px !important;
  font-weight:500 !important;
  letter-spacing:-.01em;
  padding:8px 10px !important;
  border-radius:999px;
  background:transparent !important;
  transition:color .25s ease !important;
}
html body header.topbar.syo-hdr .syo-pill .nav-link:hover,
html body header.topbar.syo-hdr .syo-pill .nav-link.is-active,
html body header.topbar.syo-hdr .syo-pill .nav-item:hover > .nav-link,
html body header.topbar.syo-hdr .syo-pill .nav-item.open > .nav-link{
  color:#000000 !important;
}
html body header.topbar.syo-hdr .syo-pill .caret{ width:12px; height:12px; opacity:.7; }

/* Bouton principal dans la capsule : pilule sombre */
.syo-pill-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 20px;
  margin-left:6px;
  border-radius:999px;
  background:#111111;
  color:#FFFFFF !important;
  font-family:"Schibsted Grotesk",system-ui,sans-serif !important;
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
  white-space:nowrap;
  text-decoration:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 14px -6px rgba(0,0,0,.55);
  transition:background .3s ease, color .3s ease, box-shadow .3s ease;
}
.syo-pill-cta:hover{
  background:linear-gradient(135deg,#FF8A3D,#F57323);
  color:#160B03 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 10px 22px -8px rgba(245,115,35,.7);
}

/* ---------- 3. Zone de droite : discrète ---------- */
html body header.topbar.syo-hdr .syo-hdr-right .lang-switch,
html body header.topbar.syo-hdr .syo-hdr-right .theme-switch{ opacity:.85; transition:opacity .25s ease; }
html body header.topbar.syo-hdr .syo-hdr-right .lang-switch:hover,
html body header.topbar.syo-hdr .syo-hdr-right .theme-switch:hover{ opacity:1; }

/* Le bouton Contact « classique » ne sert plus que sur tablette / mobile */
@media (min-width:1024px){
  html body header.topbar.syo-hdr .syo-hdr-right .cta-nav{ display:none !important; }
}

/* ---------- 4. Méga-menu et menus : ils partent sous la capsule ---------- */
@media (min-width:1024px){
  html body header.topbar.syo-hdr .dropdown{ top:calc(100% + 14px); }
  html body header.topbar.syo-hdr .syo-services-menu > .dropdown.sg-dropdown{ border-radius:20px !important; }
}

/* ---------- 5. Thème sombre ---------- */
html[data-theme="dark"] .syo-pill{
  background:#141414;
  border-color:rgba(255,255,255,.08);
  box-shadow:0 10px 28px -14px rgba(0,0,0,.9);
}
html[data-theme="dark"] body header.topbar.syo-hdr .syo-pill .nav-link:hover,
html[data-theme="dark"] body header.topbar.syo-hdr .syo-pill .nav-link.is-active,
html[data-theme="dark"] body header.topbar.syo-hdr .syo-pill .nav-item:hover > .nav-link,
html[data-theme="dark"] body header.topbar.syo-hdr .syo-pill .nav-item.open > .nav-link{ color:#FFFFFF !important; }
html[data-theme="dark"] .syo-pill-cta{ background:#FFFFFF; color:#000000 !important; }

/* ---------- 6. Desktop intermédiaire : capsule plus compacte ---------- */
@media (min-width:1024px) and (max-width:1249.98px){
  html body header.topbar.syo-hdr .syo-pill .nav-link,
  html body header.topbar.syo-hdr .syo-pill .drop-toggle{ font-size:13px !important; padding:8px 7px !important; }
  .syo-pill-cta{ padding:0 14px; font-size:13px; }
}

/* ---------- 7. Tablette et mobile : logo à gauche, contact + burger à droite ---------- */
@media (max-width:1023.98px){
  .syo-pill{ display:none !important; }
  html body header.topbar.syo-hdr > div{ grid-template-columns:1fr auto; }
  html body header.topbar.syo-hdr .cta-nav{ border-radius:999px !important; background:#111 !important; color:#fff !important; }
  html[data-theme="dark"] body header.topbar.syo-hdr .cta-nav{ background:#fff !important; color:#000 !important; }
}

/* =====================================================================
   MENUS DÉROULANTS — même typographie que la capsule (Schibsted Grotesk)
   Remplace la police d'affichage (Gliker) imposée par header-1.css et
   creative-navigation.css, uniquement dans le header.
   ===================================================================== */
html body header.topbar .dropdown,
html body header.topbar .dropdown *{
  font-family:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif !important;
  letter-spacing:-.01em;
}

/* ---------- Carte commune : blanche, arrondie, ombre douce ---------- */
@media (min-width:1024px){
  html body header.topbar.syo-hdr .dropdown{
    background:#FFFFFF !important;
    border:1px solid rgba(0,0,0,.06) !important;
    border-radius:22px !important;
    box-shadow:0 2px 6px rgba(0,0,0,.04), 0 28px 60px -24px rgba(0,0,0,.28) !important;
    transition:opacity .22s ease, transform .3s cubic-bezier(.16,1,.3,1), visibility .22s !important;
  }
  /* zone de survol invisible entre la capsule et la carte */
  html body header.topbar.syo-hdr .dropdown::before{ content:""; position:absolute; left:0; right:0; top:-20px; height:20px; }

  /* =========================== SYO WEB (petite liste) ========================= */
  html body header.topbar.syo-hdr .nav-item:not(.syo-services-menu) > .dropdown{
    width:300px; padding:8px !important;
    top:calc(100% + 18px) !important;
  }
  html body header.topbar.syo-hdr .nav-item:not(.syo-services-menu) .dd-grid{ gap:2px; }
  html body header.topbar.syo-hdr .ddl{
    display:flex; align-items:center; gap:12px;
    padding:10px 12px !important; border-radius:14px !important;
    transform:none !important; transition:background .2s ease !important;
  }
  html body header.topbar.syo-hdr .ddl:hover{ background:#F5F5F7 !important; }
  html body header.topbar.syo-hdr .ddi{
    width:36px; height:36px; border-radius:10px;
    background:#FFF3EA !important; color:#F57323 !important;
    transform:none !important; transition:background .2s ease, color .2s ease !important;
  }
  html body header.topbar.syo-hdr .ddl:hover .ddi{ background:#111 !important; color:#fff !important; }
  html body header.topbar.syo-hdr .ddt b{ font-size:14px !important; font-weight:600 !important; color:#111 !important; }
  html body header.topbar.syo-hdr .ddt i{ font-size:12.5px !important; font-weight:400 !important; color:#8E8E93 !important; margin-top:2px; }

  /* =========================== SERVICES (méga-menu) ========================== */
  html body header.topbar.syo-hdr .syo-services-menu > .dropdown.sg-dropdown{
    width:min(920px, calc(100% - 32px)) !important;
    top:calc(100% + 14px) !important;
    padding:0 !important;
    overflow:hidden !important;
  }
  html body header.topbar.syo-hdr .sg-mega{
    grid-template-columns:270px minmax(0,1fr) !important;
    min-height:0 !important;
  }

  /* Colonne de gauche : catégories */
  html body header.topbar.syo-hdr .sg-tabs{
    padding:12px !important;
    background:#FAFAFA !important;
    border-right:1px solid rgba(0,0,0,.06) !important;
  }
  html body header.topbar.syo-hdr .sg-tab{
    display:flex !important; align-items:flex-start; gap:12px;
    padding:12px 14px !important; margin:0 !important; min-height:0 !important;
    border-radius:14px !important;
    transition:background .2s ease, box-shadow .2s ease !important;
  }
  html body header.topbar.syo-hdr .sg-tab + .sg-tab{ margin-top:2px !important; }
  html body header.topbar.syo-hdr .sg-tab:hover{ background:rgba(0,0,0,.035) !important; }
  html body header.topbar.syo-hdr .sg-tab[aria-selected="true"]{
    background:#FFFFFF !important;
    box-shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 16px -10px rgba(0,0,0,.25) !important;
  }
  html body header.topbar.syo-hdr .sg-number{
    font-family:"JetBrains Mono",ui-monospace,monospace !important;
    font-size:11px !important; line-height:20px !important; font-weight:500;
    color:#AEAEB2; opacity:1 !important;
  }
  html body header.topbar.syo-hdr .sg-tab[aria-selected="true"] .sg-number{ color:#F57323; }
  html body header.topbar.syo-hdr .sg-tab b{ font-size:14px !important; font-weight:600 !important; line-height:1.45 !important; color:#111 !important; }
  html body header.topbar.syo-hdr .sg-tab:hover b,
  html body header.topbar.syo-hdr .sg-tab[aria-selected="true"] b{ color:#000 !important; }
  html body header.topbar.syo-hdr .sg-tab small{ font-size:12px !important; line-height:1.45 !important; color:#8E8E93 !important; margin-top:2px !important; }
  html body header.topbar.syo-hdr .sg-tab .sg-label{
    font-size:10.5px !important; font-weight:500; margin-left:8px !important;
    padding:1px 7px; border-radius:999px; background:#F0F0F2; color:#8E8E93 !important;
    vertical-align:1px; letter-spacing:0;
  }
  html body header.topbar.syo-hdr .sg-tab[aria-selected="true"] .sg-label{ background:#FFF3EA; color:#F57323 !important; }

  /* Colonne de droite : services */
  html body header.topbar.syo-hdr .sg-panels{ padding:22px 22px 22px 26px !important; }
  html body header.topbar.syo-hdr .sg-panel-head{
    margin:0 0 14px !important; padding:0 10px 14px !important;
    border-bottom:1px solid rgba(0,0,0,.06);
  }
  html body header.topbar.syo-hdr .sg-panel-head p{
    font-family:"JetBrains Mono",ui-monospace,monospace !important;
    font-size:11px !important; font-weight:500; letter-spacing:.12em !important;
    text-transform:uppercase; color:#F57323 !important;
  }
  html body header.topbar.syo-hdr .sg-panel-head .sg-overview{
    font-size:13px !important; font-weight:500; color:#8E8E93 !important; min-height:0 !important;
    transition:color .2s ease;
  }
  html body header.topbar.syo-hdr .sg-panel-head .sg-overview:hover{ color:#000 !important; }
  html body header.topbar.syo-hdr .sg-links{ gap:4px 10px !important; }
  html body header.topbar.syo-hdr .sg-link{
    align-items:center !important;
    padding:11px 12px !important; min-height:0 !important;
    border-radius:14px !important;
    transition:background .2s ease !important;
  }
  html body header.topbar.syo-hdr .sg-link:hover{ background:#F5F5F7 !important; }
  html body header.topbar.syo-hdr .sg-link b{ font-size:14px !important; font-weight:600 !important; line-height:1.4 !important; color:#111 !important; }
  html body header.topbar.syo-hdr .sg-link:hover b{ color:#000 !important; }
  html body header.topbar.syo-hdr .sg-link small{ font-size:12.5px !important; line-height:1.45 !important; color:#8E8E93 !important; margin-top:2px !important; }
  html body header.topbar.syo-hdr .sg-link i{
    display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
    font-size:14px !important; color:#111 !important; background:transparent;
    opacity:0; transform:translateX(-6px);
    transition:opacity .2s ease, transform .25s cubic-bezier(.16,1,.3,1), background .2s ease !important;
  }
  html body header.topbar.syo-hdr .sg-link:hover i{ opacity:1; transform:none; background:#FFFFFF; box-shadow:0 2px 6px rgba(0,0,0,.08); }

  /* ---------- Thème sombre ---------- */
  html[data-theme="dark"] body header.topbar.syo-hdr .dropdown{
    background:#141414 !important; border-color:rgba(255,255,255,.08) !important;
    box-shadow:0 28px 60px -24px rgba(0,0,0,.9) !important;
  }
  html[data-theme="dark"] body header.topbar.syo-hdr .sg-tabs{ background:#0F0F0F !important; border-right-color:rgba(255,255,255,.07) !important; }
  html[data-theme="dark"] body header.topbar.syo-hdr .sg-tab:hover{ background:rgba(255,255,255,.04) !important; }
  html[data-theme="dark"] body header.topbar.syo-hdr .sg-tab[aria-selected="true"]{ background:#1E1E1E !important; box-shadow:none !important; }
  html[data-theme="dark"] body header.topbar.syo-hdr .sg-tab b,
  html[data-theme="dark"] body header.topbar.syo-hdr .sg-link b,
  html[data-theme="dark"] body header.topbar.syo-hdr .ddt b,
  html[data-theme="dark"] body header.topbar.syo-hdr .sg-link i{ color:#F5F5F7 !important; }
  html[data-theme="dark"] body header.topbar.syo-hdr .sg-tab .sg-label{ background:#262626; }
  html[data-theme="dark"] body header.topbar.syo-hdr .sg-panel-head{ border-bottom-color:rgba(255,255,255,.07); }
  html[data-theme="dark"] body header.topbar.syo-hdr .sg-panel-head .sg-overview:hover{ color:#fff !important; }
  html[data-theme="dark"] body header.topbar.syo-hdr .sg-link:hover,
  html[data-theme="dark"] body header.topbar.syo-hdr .ddl:hover{ background:#1E1E1E !important; }
  html[data-theme="dark"] body header.topbar.syo-hdr .sg-link:hover i{ background:#2A2A2A; box-shadow:none; }
  html[data-theme="dark"] body header.topbar.syo-hdr .ddi{ background:rgba(255,138,61,.14) !important; }
  html[data-theme="dark"] body header.topbar.syo-hdr .ddl:hover .ddi{ background:#fff !important; color:#000 !important; }
}

/* Menu mobile : même typographie */
#mmenu, #mmenu *{ font-family:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif !important; }
#mmenu .mm-link{ font-weight:600 !important; letter-spacing:-.01em; }