/* =========================================================
   MINDSET THEME — Header CSS
   Surcharge / complète design-system.css (chargé après).
   ========================================================= */

/* ---------- A11Y-01 : Skip link ---------- */
/* Hors focus : hors de l'écran (non affiché, non masqué par display:none
   pour qu'il reste dans l'ordre de tabulation). */
.ms-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
  /* style visible au focus */
  background: var(--wp--preset--color--accent);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: .75rem 1.5rem;
  border-radius: 0 0 var(--ms-radius) var(--ms-radius);
  text-decoration: none;
  white-space: nowrap;
}

/* Au focus clavier : réapparaît en haut à gauche de l'écran */
.ms-skip-link:focus,
.ms-skip-link:focus-visible {
  position: fixed;
  left: 1rem;
  top: 0;
  width: auto;
  height: auto;
  overflow: visible;
  outline: 3px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

/* ---------- Header de base ---------- */
/* IMPORTANT : pas de backdrop-filter/filter/transform sur .ms-header lui-même —
   ça en ferait le containing block du panneau mobile position:fixed (qui se
   retrouverait coincé dans la zone du header). L'effet verre est déporté
   sur ::before, qui n'a pas de descendants. */
.ms-header {
  position: sticky;
  top: 0;
  z-index: 200;
  padding-block: .85rem;
  background: transparent;
  backdrop-filter: none;            /* neutralise la règle de design-system.css */
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 var(--ms-line);
  transition:
    box-shadow .35s var(--ms-ease),
    padding .35s var(--ms-ease);
}

.ms-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: color-mix(in srgb, var(--wp--preset--color--bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  transition: background .35s var(--ms-ease), opacity .3s var(--ms-ease);
}

/* Scrollé : fond plus opaque, ombre renforcée */
.ms-header.is-scrolled {
  padding-block: .6rem;
  box-shadow:
    0 1px 0 var(--ms-line),
    0 8px 28px -12px color-mix(in srgb, var(--wp--preset--color--primary-dark) 18%, transparent);
}
.ms-header.is-scrolled::before {
  background: color-mix(in srgb, var(--wp--preset--color--bg) 97%, transparent);
}

/* Panneau mobile ouvert : le bandeau header devient transparent au-dessus
   du panneau sombre — marque en blanc, croix blanche visible. */
body.ms-nav-open .ms-header { box-shadow: none; }
body.ms-nav-open .ms-header::before { opacity: 0; }
body.ms-nav-open .ms-brand b { color: #fff; }
body.ms-nav-open .ms-burger { border-color: rgba(255, 255, 255, .45); }

/* ---------- Inner ---------- */
.ms-header__inner {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  /* au-dessus du panneau mobile (z 190), frère dans le même header :
     la marque et la croix de fermeture restent visibles panneau ouvert */
  position: relative;
  z-index: 210;
}

/* ---------- Marque / logo ---------- */
.ms-brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
  text-decoration: none;
}

.ms-brand .custom-logo {
  height: 42px;
  width: auto;
  display: block;
  transition: opacity .3s var(--ms-ease);
}

.ms-brand:hover .custom-logo { opacity: .82; }

.ms-brand b {
  font-family: var(--wp--preset--font-family--display, inherit);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  white-space: nowrap;
}

/* ---------- Nav desktop ---------- */
.ms-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.ms-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 1.5vw, 1.8rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Menu généré par wp_page_menu : reset */
.ms-nav .page_item_has_children > a,
.ms-nav .wp-block-navigation__submenu-container { display: none; }

.ms-nav a {
  position: relative;
  display: inline-block;
  font-size: .93rem;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
  white-space: nowrap;
  padding-block: .35rem;
  text-decoration: none;
  /* soulignement animé */
  background-image: linear-gradient(
    var(--wp--preset--color--accent),
    var(--wp--preset--color--accent)
  );
  background-size: 0 2px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size .35s var(--ms-ease), color .2s;
}

.ms-nav a:hover,
.ms-nav .current-menu-item > a,
.ms-nav .current_page_item > a {
  color: var(--wp--preset--color--accent);
  background-size: 100% 2px;
}

/* ---------- Actions droite ---------- */
.ms-header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* Téléphone */
.ms-header__tel {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  font-weight: 800;
  font-size: .9rem;
  color: var(--wp--preset--color--primary);
  white-space: nowrap;
  text-decoration: none;
  transition: color .25s var(--ms-ease);
}

.ms-header__tel:hover { color: var(--wp--preset--color--accent); }
.ms-header__tel svg { flex-shrink: 0; }

/* CTA desktop */
.ms-header__cta {
  padding: .7rem 1.4rem;
  font-size: .88rem;
}

/* ---------- Burger ---------- */
.ms-burger {
  display: none; /* affiché en mobile via media query */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 4px;
  border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: border-color .25s var(--ms-ease);
  flex-shrink: 0;
}

.ms-burger:hover {
  border-color: var(--wp--preset--color--accent);
}

.ms-burger__bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--wp--preset--color--primary);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform .4s var(--ms-ease),
    opacity .25s var(--ms-ease),
    background .25s;
}

/* État ouvert */
.ms-burger[aria-expanded="true"] .ms-burger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background: var(--wp--preset--color--white, #fff);
}
.ms-burger[aria-expanded="true"] .ms-burger__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.ms-burger[aria-expanded="true"] .ms-burger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  background: var(--wp--preset--color--white, #fff);
}

/* ---------- Panneau mobile ---------- */
.ms-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--wp--preset--color--primary-dark);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2rem;
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1.4rem, 6vw, 3rem);
  /* Animation d'entrée */
  transform: translateX(100%);
  opacity: 0;
  transition:
    transform .45s var(--ms-ease),
    opacity .35s var(--ms-ease);
  /* masqué par défaut via l'attribut hidden — on surcharge l'affichage */
}

/* Quand JS retire hidden et ajoute is-open */
.ms-mobile-nav.is-open {
  transform: translateX(0);
  opacity: 1;
}

/* hidden = panneau réellement retiré du rendu (le JS retire hidden AVANT
   d'ajouter is-open, via double rAF, donc la transition d'entrée joue quand même).
   Sans display:none, le panneau fixe translateX(100%) double la largeur du document. */
.ms-mobile-nav[hidden] { display: none !important; }

.ms-mobile-nav__nav ul,
.ms-mobile-nav__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 0;
  margin: 0;
}

.ms-mobile-nav__nav a,
.ms-mobile-nav__list a {
  display: block;
  font-family: var(--wp--preset--font-family--display, inherit);
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  font-weight: 700;
  color: rgba(255, 255, 255, .88);
  line-height: 1.2;
  padding-block: .4rem;
  letter-spacing: -.02em;
  text-decoration: none;
  transition: color .25s var(--ms-ease), transform .3s var(--ms-ease);
}

.ms-mobile-nav__nav a:hover,
.ms-mobile-nav__list a:hover,
.ms-mobile-nav__nav .current-menu-item > a,
.ms-mobile-nav__list .current_page_item > a {
  color: var(--wp--preset--color--accent);
  transform: translateX(6px);
}

/* Ligne séparatrice décorative */
.ms-mobile-nav__nav::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 1.4rem;
  background: color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent);
}

.ms-mobile-nav__tel {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  transition: color .25s;
}

.ms-mobile-nav__tel:hover { color: #fff; }

.ms-mobile-nav__cta {
  margin-top: .5rem;
}

/* Norme DECOR-01 : pas de glow radial décoratif (signature "généré par IA"). */

/* ---------- Body scroll lock ---------- */
body.ms-nav-open {
  overflow: hidden;
}

/* ---------- Breakpoints ---------- */

/* ≤ 900 px — on affiche le burger, on cache la nav desktop */
@media (max-width: 900px) {
  .ms-nav,
  .ms-header__tel,
  .ms-header__cta {
    display: none;
  }

  .ms-burger {
    display: inline-flex;
  }
}

/* ≤ 640 px — header plus compact */
@media (max-width: 640px) {
  .ms-header {
    padding-block: .7rem;
  }

  .ms-brand .custom-logo {
    height: 34px;
  }
}

/* ---------- STICKY-01 : sur mobile le header cède sa position sticky à
   la barre bottom. Norme : 1 sticky par bord max. ---------- */
@media (max-width: 767px) {
  .ms-header {
    position: static;
  }
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ms-header,
  .ms-nav a,
  .ms-burger__bar,
  .ms-mobile-nav,
  .ms-header__tel,
  .ms-brand .custom-logo {
    transition: none !important;
    animation: none !important;
  }

  .ms-mobile-nav {
    transform: none;
  }
}