/* ============================================================
   header.css : en-tête commun à toutes les pages (accueil, pages
   matières, pages légales), avec le méga-menu « Domaines ».
   Auto-suffisant et namespacé sous .site-header, comme footer.css.
   Le balisage est synchronisé par tools/sync_header.py.
   ============================================================ */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 18px 0; transition: padding .3s ease; font-family: "Inter", system-ui, sans-serif; line-height: 1.5; }
/* Fond porté par un pseudo-élément : le header ne devient jamais le bloc
   conteneur du tiroir mobile en position fixe (.hd-links). */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(15,31,58,.96); box-shadow: 0 6px 20px rgba(0,0,0,.25); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transition: opacity .3s ease; }
.site-header.scrolled::before, .site-header.mega-open::before { opacity: 1; }
.site-header.scrolled { padding: 12px 0; }
.site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; }
.site-header a { text-decoration: none; color: inherit; }
.site-header ul { list-style: none; margin: 0; padding: 0; }
.site-header svg { display: block; }
.site-header .hd-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.site-header .hd-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

/* Logo */
.site-header .hd-logo { display: flex; align-items: center; gap: 12px; color: #fff; line-height: 1.1; flex-shrink: 0; }
.site-header .hd-logo .mark { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid #b08d57; display: grid; place-items: center; color: #b08d57; font-family: "Cormorant Garamond", Georgia, serif; font-size: 19px; font-weight: 700; letter-spacing: .5px; }
.site-header .hd-logo b { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-size: 21px; font-weight: 700; }
.site-header .hd-logo small { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #b08d57; }

/* Liens */
.site-header .hd-links { display: flex; align-items: center; gap: 28px; }
.site-header .hd-links > a, .site-header .mega-toggle { color: rgba(255,255,255,.82); font-size: 15px; font-weight: 500; position: relative; white-space: nowrap; transition: color .2s; }
.site-header .hd-links > a::after, .site-header .mega-toggle::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: #b08d57; transition: width .25s ease; }
.site-header .hd-links > a:hover, .site-header .hd-links > a.active, .site-header .mega-toggle:hover, .site-header .mega-toggle.active, .site-header .has-mega.open .mega-toggle { color: #fff; }
.site-header .hd-links > a:hover::after, .site-header .hd-links > a.active::after, .site-header .mega-toggle.active::after, .site-header .has-mega.open .mega-toggle::after { width: 100%; }
.site-header .mega-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }
.site-header .mega-toggle svg { width: 15px; height: 15px; transition: transform .25s ease; }
.site-header .has-mega.open .mega-toggle svg { transform: rotate(180deg); }

/* Bouton rendez-vous + burger */
.site-header .hd-cta { display: flex; align-items: center; gap: 14px; }
.site-header .hd-reserve { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: 6px; background: #b08d57; color: #fff; box-shadow: 0 14px 32px -14px rgba(176,141,87,.6); white-space: nowrap; transition: transform .25s ease, background .25s ease; }
.site-header .hd-reserve:hover { transform: translateY(-2px); background: #8a6a3b; }
.site-header .hd-reserve svg { width: 18px; height: 18px; }
.site-header .burger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 6px; }
.site-header .burger span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .3s; }

/* ---------- Méga-menu (bureau) ---------- */
.site-header .mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 2px solid #b08d57; box-shadow: 0 30px 60px -25px rgba(15,31,58,.45); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease, visibility .22s; }
.site-header .has-mega.open .mega { opacity: 1; visibility: visible; transform: none; }
.site-header .mega-inner { display: grid; grid-template-columns: 280px 1fr; gap: 40px; padding-top: 32px; padding-bottom: 32px; }
.site-header .mega-intro { border-right: 1px solid #e8e4dc; padding-right: 32px; }
.site-header .mega-kicker { display: block; color: #8a6a3b; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
.site-header .mega-intro .mega-title { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.7rem; font-weight: 700; line-height: 1.15; color: #141821; margin: 0 0 10px; }
.site-header .mega-intro p { font-size: .9rem; color: #485063; margin: 0 0 18px; }
.site-header .mega-all { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: #8a6a3b; }
.site-header .mega-all svg { width: 16px; height: 16px; transition: transform .25s; }
.site-header .mega-all:hover svg { transform: translateX(4px); }
.site-header .mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start; }
.site-header .mega-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 12px; color: #141821; transition: background .2s; }
.site-header .mega-item:hover, .site-header .mega-item:focus-visible { background: #f4ede1; }
.site-header .mega-item[aria-current="page"] { background: #f8f6f2; box-shadow: inset 3px 0 0 #b08d57; }
.site-header .mega-ic { width: 42px; height: 42px; border-radius: 10px; background: #0f1f3a; color: #b08d57; display: grid; place-items: center; flex-shrink: 0; }
.site-header .mega-ic svg { width: 21px; height: 21px; }
.site-header .mega-item b { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.25rem; font-weight: 700; line-height: 1.2; margin-bottom: 3px; }
.site-header .mega-item small { display: block; font-size: .84rem; color: #7d8494; line-height: 1.45; }

/* ---------- Mobile : tiroir latéral ---------- */
@media (max-width: 1100px) {
  .site-header .hd-links { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: 86%; max-width: 360px; background: #172a4a; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; padding: 96px 28px 40px; overflow-y: auto; transform: translateX(100%); transition: transform .35s ease; box-shadow: -10px 0 40px rgba(0,0,0,.4); z-index: 105; }
  .site-header .hd-links.open { transform: translateX(0); }
  .site-header .hd-links > a, .site-header .mega-toggle { font-size: 18px; color: #fff; padding: 10px 0; width: 100%; text-align: left; }
  .site-header .hd-links > a::after, .site-header .mega-toggle::after { display: none; }
  .site-header .mega-toggle { justify-content: space-between; }
  .site-header .burger { display: flex; z-index: 110; }
  .site-header .burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header .burger.active span:nth-child(2) { opacity: 0; }
  .site-header .burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-header .mega { position: static; display: none; background: none; border: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .site-header .has-mega.open .mega { display: block; }
  .site-header .mega-inner { display: block; padding: 0 0 8px; }
  .site-header .mega-intro { display: none; }
  .site-header .mega-grid { grid-template-columns: 1fr; gap: 2px; }
  .site-header .mega-item { padding: 10px 8px; color: #fff; }
  .site-header .mega-item:hover, .site-header .mega-item:focus-visible { background: rgba(255,255,255,.06); }
  .site-header .mega-item[aria-current="page"] { background: rgba(255,255,255,.08); }
  .site-header .mega-ic { width: 34px; height: 34px; background: rgba(176,141,87,.15); }
  .site-header .mega-ic svg { width: 18px; height: 18px; }
  .site-header .mega-item b { font-size: 1.12rem; }
  .site-header .mega-item small { color: rgba(255,255,255,.6); font-size: .8rem; }
}
@media (max-width: 720px) {
  .site-header .hd-reserve { display: none; }
}