/* ==========================================================
   Sisméo - synchronisation du header/nav WordPress avec le
   header des pages statiques (racine du site : includes/header.php
   + assets/sismeo-pages.css).

   Fichier volontairement autonome (pas de .scss) : le thème est
   compilé via Prepros (voir package.json) et ce fichier ne doit
   pas être écrasé par une recompilation SCSS. Pour le modifier,
   éditer directement ce fichier CSS.

   IMPORTANT - unités en PX et non en rem :
   le thème définit `:root{font-size:125%}` (style.css) alors que
   les pages statiques restent en 16px par défaut. Des rem ici
   donneraient un nav ~1.25x plus grand que sur les pages statiques
   (ex. 8rem = 160px ici contre 128px là-bas) => décalage visuel au
   changement de page. On fige donc les hauteurs en px, identiques
   aux pages statiques, quelle que soit la taille de police racine.

   Charger APRES style.css (voir functions.php) : ce fichier
   redéfinit --nav-height-full / --nav-height-scrolled, utilisées
   ailleurs dans le thème (cf. scss/_main_header.scss) pour caler le
   contenu sous le nav fixe - donc pas de retouche nécessaire là-bas.
   ========================================================== */

:root {
  --nav-height-full: 128px;
  --nav-height-scrolled: 57.6px;
}

#main_nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--nav-height-full);
  background: transparent;
  border-bottom: 1px dashed transparent;
  transition: .33s cubic-bezier(.6,0,.4,1);
  box-sizing: border-box;
}
#main_nav * { box-sizing: border-box; }

/* Neutralise les anciennes règles génériques du thème qui ciblent
   n'importe quel <nav>/<ul>/<li>/<a> sous #main_nav (héritées de
   l'ancien markup nav.menu/#buttons - voir style.css). Sans ce reset
   elles fuitent sur nav.dmenu / nav.header-cta : padding sur les
   icônes tél/mail, max-height qui écrase le menu déroulant, etc.
   Les règles plus précises ci-dessous reprennent la main ensuite. */
#main_nav nav,
#main_nav nav a,
#main_nav nav ul,
#main_nav nav li {
  height: auto;
  max-height: none;
  padding: 0;
  margin: 0;
}

#main_nav .mid {
  max-width: 1140px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(130px, auto) 1fr max-content;
  column-gap: 32px;
  align-items: center;
}

#main_nav .logo { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
#main_nav .logo img { max-width: 250px; width: 100%; height: auto; transition: max-width .5s cubic-bezier(.6,0,.4,1); }
#main_nav .logo .baseline {
  color: #9b9b9b;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: .5px;
  height: 24px;
  overflow: hidden;
  transition: height .5s cubic-bezier(.6,0,.4,1);
}

#main_nav nav.dmenu { justify-self: end; height: 100%; display: flex; align-items: center; }
#main_nav nav.dmenu > ul { display: flex; gap: 25.6px; list-style: none; align-items: center; margin: 0; padding: 0; }
#main_nav nav.dmenu > ul > li { position: relative; }
#main_nav nav.dmenu > ul > li > a { color: #1b1b1b; font-size: 18px; font-weight: 400; padding: 14px 2px; display: inline-block; }
#main_nav nav.dmenu > ul > li > a:hover { color: #f0338d; }
#main_nav nav.dmenu > ul > li.current-menu-item > a,
#main_nav nav.dmenu > ul > li.current-menu-ancestor > a { color: #f0338d; }
#main_nav nav.dmenu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 320px;
  background: #2b2b2b;
  padding: 8px 24px;
  list-style: none;
  display: none;
  z-index: 60;
  margin: 0;
}
#main_nav nav.dmenu li:hover > .sub-menu,
#main_nav nav.dmenu li:focus-within > .sub-menu { display: block; }
#main_nav nav.dmenu .sub-menu li { border-bottom: none; }
#main_nav nav.dmenu .sub-menu a { display: block; color: #fff; font-size: 15px; padding: 11px 0; border-bottom: 1px dashed #555; white-space: nowrap; }
#main_nav nav.dmenu .sub-menu li:last-child a { border-bottom: none; }
#main_nav nav.dmenu .sub-menu a:hover { color: #f0338d; }

#main_nav .header-cta { display: flex; align-items: center; gap: 10px; justify-self: end; height: 100%; }
/* Le thème cache tout <nav> sous #main_nav en mode burger (ancien menu
   plein écran, cf. style.css : body.burger_mode #main_nav nav /
   body.menuToggled #main_nav nav). nav.header-cta est aussi un <nav> :
   sans ce contre-réglage (plus spécifique), il hérite de
   opacity:0/visibility:hidden/position:fixed/height:0 et disparaît en
   mobile. On le force à rester affiché normalement dans tous les cas. */
body.burger_mode #main_nav .header-cta,
body.menuToggled #main_nav .header-cta {
  opacity: 1;
  visibility: visible;
  position: static;
  height: 100%;
  overflow: visible;
}
#main_nav .header-cta a.ico {
  width: 35px; height: 35px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(27,27,27,.7);
  border-radius: 3px;
  color: #1b1b1b;
  transition: .2s;
}
#main_nav .header-cta a.ico svg { width: 18px; height: 18px; fill: #1b1b1b; transition: .2s; }
#main_nav .header-cta a.ico:hover { border-color: #f0338d; }
#main_nav .header-cta a.ico:hover svg { fill: #f0338d; }

body.scrolled #main_nav { height: var(--nav-height-scrolled); background: #fff; border-bottom: 1px dashed #c9c9c9; }
body.scrolled #main_nav .logo img { max-width: 100px; }
body.scrolled #main_nav .logo .baseline { height: 0; }

@media (max-width: 1150px) { #main_nav nav.dmenu { display: none; } }
@media (min-width: 1151px) { #main_nav .header-cta .burger { display: none; } }

@media (max-width: 640px) {
  :root { --nav-height-full: 102.4px; --nav-height-scrolled: 54.4px; }
  #main_nav .mid { padding: 0 16px; column-gap: 12px; }
  #main_nav .header-cta { gap: 8px; }
  #main_nav .header-cta a.ico { width: 32px; height: 32px; }
  #main_nav .logo img { max-width: 160px; }
  body.scrolled #main_nav .logo img { max-width: 90px; }
  #main_nav .logo .baseline { font-size: 12px; height: 19.2px; }
}

/* Menu burger + tiroir mobile (identique aux pages statiques) */
.burger { width: 44px; height: 44px; border: none; background: transparent; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 8px; }
.burger span { display: block; height: 3px; width: 100%; background: #111; border-radius: 2px; transition: .25s; }
.burger.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.mobmenu {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  max-width: 85vw;
  height: 100vh;
  background: #111111;
  z-index: 100;
  transition: right .3s;
  padding: 90px 34px 34px;
  overflow-y: auto;
  box-sizing: border-box;
}
.mobmenu.open { right: 0; box-shadow: -8px 0 30px rgba(0,0,0,.35); }
.mobmenu a { display: block; color: #fff; font-weight: 700; font-size: 19px; padding: 13px 0; border-bottom: 1px solid #2a2a2a; }
.mobmenu a:hover { color: #f0338d; }
.mobmenu details { border-bottom: 1px solid #2a2a2a; }
.mobmenu details summary { color: #fff; font-weight: 700; font-size: 19px; padding: 13px 0; cursor: pointer; list-style: none; position: relative; }
.mobmenu details summary::-webkit-details-marker { display: none; }
.mobmenu details summary::after { content: "+"; position: absolute; right: 0; color: #f0338d; font-weight: 900; }
.mobmenu details[open] summary::after { content: "\2013"; }
.mobmenu details a { font-size: 16px; font-weight: 400; padding: 9px 0 9px 14px; border-bottom: none; color: #ccc; }
.mobmenu a.mob-cta {
  margin-top: 26px;
  border-bottom: none;
  padding: 15px 34px;
  text-align: center;
  background: #f0338d;
  border-radius: 40px;
  font-weight: 700;
}
.mobmenu a.mob-cta:hover { background: #111; }

.menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 99; opacity: 0; pointer-events: none; transition: .3s; }
.menu-overlay.open { opacity: 1; pointer-events: auto; }