/* =========================
   MD HEADER — rendu identique (sans Tailwind)
   ========================= */

/* Variables utiles */
:root{
  --night:#202B38;
  --overlay:#2F4159;
  --off:#F6F7F9;
  --beige:#E7DEC9;
  --beige2:#D8D0B8;
  --sage:#98A080;

  --shadow-soft: 0 10px 30px rgba(0,0,0,.22);
}

/* Skip link accessible */
.skip-link{
  position:absolute;
  left:-999px;
  top:12px;
  background: var(--beige);
  color:#1A2430;
  padding:10px 14px;
  border-radius:999px;
  z-index:1000;
  font-weight:700;
  box-shadow: var(--shadow-soft);
}
.skip-link:focus{ left:12px; }

/* Header look */
.md-header{
  background: rgba(32,43,56,.62);
  border-bottom: 1px solid rgba(246,247,249,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.md-header .icon-btn svg{ width:16px; height:16px; display:block; }
.md-header .icon-btn{ padding:0; } /* au cas où un style bouton ajoute du padding */

/* ✅ utilitaires manquants utilisés dans ton header */
.h-10{ height:2.5rem; }   /* 40px */
.w-10{ width:2.5rem; }    /* 40px */
.justify-center{ justify-content:center; }


/* Links */
.nav-link{
  position:relative;
  color: rgba(231,222,201,.92);
  text-decoration:none;
  transition: color .22s ease;
}
.nav-link:hover{ color: var(--beige); }
.nav-link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-8px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(231,222,201,.7), transparent);
  transform: scaleX(0);
  transform-origin:center;
  transition: transform .22s ease;
}
.nav-link:hover::after{ transform: scaleX(1); }

/* Icon buttons */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:999px;
  background: rgba(47,65,89,.22);
  border:1px solid rgba(246,247,249,.10);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.icon-btn:hover{
  transform: translateY(-1px);
  background: rgba(47,65,89,.30);
  border-color: rgba(231,222,201,.22);
}

.mini-icon{ width:16px; height:16px; opacity:.92; display:block; }
.text-offwhite{ color: var(--off); }

/* =========================
   “Mini Tailwind” (uniquement les classes utilisées dans TON header)
   ========================= */
.sticky{ position: sticky; }
.top-0{ top: 0; }
.z-50{ z-index: 50; }

.max-w-6xl{ max-width: 72rem; }
.mx-auto{ margin-left:auto; margin-right:auto; }

.px-4{ padding-left:1rem; padding-right:1rem; }

.h-16{ height:4rem; }
.h-9{ height:2.25rem; }
.w-9{ width:2.25rem; }

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

.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }

.gap-2{ gap:.5rem; }
.gap-3{ gap:.75rem; }
.gap-7{ gap:1.75rem; }

.rounded-full{ border-radius:9999px; }

.font-medium{ font-weight:500; }
.font-semibold{ font-weight:600; }

.tracking-tight{ letter-spacing:-.015em; }
.text-sm{ font-size:.875rem; line-height:1.25rem; }

.hidden{ display:none; }
.pb-4{ padding-bottom:1rem; }
.mt-2{ margin-top:.5rem; }

.flex-col{ flex-direction:column; }
.py-2{ padding-top:.5rem; padding-bottom:.5rem; }

/* Breakpoint md (Tailwind = 768px) */
@media (min-width:768px){
  .md\:flex{ display:flex; }
  .md\:hidden{ display:none; }
}

/* =========================
   FIX rendu header hors home
   ========================= */

/* Base: le header doit imposer sa couleur */
.md-header{
  color: var(--off);
  top: var(--wp-admin--admin-bar--height, 0px); /* évite le conflit avec la barre admin */
}

/* ✅ HOME = glass (comme avant) */
body.home .md-header{
  background: rgba(32,43,56,.62);
  border-bottom: 1px solid rgba(246,247,249,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ✅ AUTRES PAGES = même “look sombre” (sinon ça vire gris sur fond blanc) */
body:not(.home) .md-header{
  background: rgba(32,43,56,.92); /* <- clé du problème */
  border-bottom: 1px solid rgba(246,247,249,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Forcer les liens du header (pas de violet / souligné) */
.md-header a,
.md-header a:visited{
  color: inherit !important;
  text-decoration: none !important;
}

/* Forcer spécifiquement la nav */
.md-header .nav-link,
.md-header .nav-link:visited{
  color: rgba(231,222,201,.92);
  text-decoration: none !important;
}

/* Les boutons (évite les styles par défaut) */
.md-header button{
  font: inherit;
  color: inherit;
}