/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  Header partagé — pages /features/*.html + fonctionnalites.html          ║
   ║                                                                          ║
   ║  ⚠️  STYLES DU HEADER A 2 COPIES — SYNCHRONISER                          ║
   ║  Jumeau : styles.css (lignes ~257-583, classes .hd-*) utilisé par        ║
   ║  landing.html (SPA React) + confidentialite.html + mentions-legales.html.║
   ║  Toute retouche visuelle du dropdown doit être faite dans les DEUX       ║
   ║  fichiers, sinon drift entre la landing et les pages statiques.          ║
   ║                                                                          ║
   ║  Adapté depuis styles.css (lignes 257-583) avec les tokens LOCAUX        ║
   ║  utilisés dans les pages features :                                      ║
   ║    --accent      → --terracotta                                          ║
   ║    --accent-d    → --terracotta-deep                                     ║
   ║    --bg          → --bg-main                                             ║
   ║    --paper       → --bg-paper                                            ║
   ║    --ink-mute    → --ink-faint                                           ║
   ║    --gutter      → --gutter-x                                            ║
   ║    --serif-alt   → --soft                                                ║
   ║    --ease-out    → cubic-bezier(0.22, 1, 0.36, 1)                        ║
   ║    --ease-in-out → cubic-bezier(0.65, 0, 0.35, 1)                        ║
   ║                                                                          ║
   ║  Markup injecté par features-header.js depuis data/features.js.          ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

/* ---------- header ---------- */
.hd {
  position: sticky; top: 0; z-index: 50;
  padding: 16px 0;
  background: color-mix(in oklab, var(--bg-main) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s cubic-bezier(0.22, 1, 0.36, 1), padding .3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hd[data-scrolled="true"] {
  border-bottom-color: var(--rule);
  padding: 10px 0;
}
.hd-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}

/* ──────────────────────────────────────────────────────────────
   LOGO Myweddoo — v32-e canonique
   ────────────────────────────────────────────────────────────── */
.hd .logo {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-variation-settings: "opsz" 144;
  letter-spacing: -.012em;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.hd .logo-em { color: var(--terracotta); }
.hd .logo-infty {
  display: inline-block;
  font-style: italic;
  font-weight: 700;
  font-size: 1.05em;
  color: var(--terracotta);
  letter-spacing: -.04em;
  transform: scaleY(.9) translateY(.06em);
  margin: 0 .02em 0 -.04em;
}
.hd-logo {
  font-size: 26px;
  display: inline-flex; align-items: baseline; gap: 4px;
}
.hd .visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- nav desktop ---------- */
.hd-nav { display: flex; align-items: center; gap: 4px; }
.hd-nav a {
  font-family: var(--sans);
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--ink-soft);
  position: relative;
  text-decoration: none;
  transition: color .2s, background .2s;
}
.hd-nav a:hover { color: var(--ink); background: rgba(0,0,0,.04); }

/* CTA primaire header — terracotta */
.hd-nav .nav-cta {
  margin-left: 8px;
  background: var(--terracotta);
  color: var(--bg-paper);
  padding: 10px 18px;
}
.hd-nav .nav-cta:hover,
.hd-nav .nav-cta:focus-visible { background: var(--terracotta-deep); }

/* ---------- CTA flottant (pages /features/ uniquement) ----------
   Calque sticky AU-DESSUS de la barre : permet à l'ornement floral
   (--floral-z 55, réglable via ?floral=edit) de passer devant la barre
   et ses liens (z 50) tout en restant derrière le bouton devis (z 60).
   Le ghost (span aria-hidden, visibility hidden) réserve la place du
   bouton dans la nav pour un layout identique. Markup injecté par
   features-header.js (FLOATING_CTA). */
.hd-cta-layer { position: sticky; top: 0; z-index: 60; height: 0; pointer-events: none; }
.hd-cta-row {
  display: flex; justify-content: flex-end;
  padding-top: 16px;
  transition: padding .3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hd-cta-layer[data-scrolled="true"] .hd-cta-row { padding-top: 10px; }
.hd-cta-float {
  pointer-events: auto;
  font-family: var(--sans);
  font-size: 14px;
  border-radius: 999px;
  text-decoration: none;
  padding: 10px 18px;
  background: var(--terracotta);
  color: var(--bg-paper);
  transition: background .2s;
}
.hd-cta-float:hover,
.hd-cta-float:focus-visible { background: var(--terracotta-deep); }
/* le ghost est un <span> : il n'hérite pas des règles .hd-nav a —
   on réplique la typo du bouton pour réserver exactement sa largeur */
.nav-cta-ghost { visibility: hidden; font-family: var(--sans); font-size: 14px; }
@media (max-width: 960px) { .hd-cta-layer { display: none; } }

/* ---------- dropdown Fonctionnalités ---------- */
.hd-dropdown-wrap { position: relative; }
.hd-dropdown-trigger {
  font-family: var(--sans);
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: transparent;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s, background .2s;
}
.hd-dropdown-trigger:hover,
.hd-dropdown-trigger:focus-visible {
  color: var(--ink);
  background: rgba(0,0,0,.04);
  outline: none;
}
.hd-dropdown-trigger[aria-expanded="true"] {
  color: var(--terracotta);
  background: color-mix(in oklab, var(--terracotta) 8%, transparent);
}
.hd-dropdown-caret {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  transition: transform .2s cubic-bezier(0.22, 1, 0.36, 1);
}
.hd-dropdown-trigger[aria-expanded="true"] .hd-dropdown-caret {
  transform: rotate(180deg);
}

.hd-dropdown-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 680px;
  max-width: 90vw;
  background: var(--bg-paper);
  border: 1px solid color-mix(in oklab, var(--terracotta-deep) 18%, transparent);
  border-radius: 6px;
  padding: 28px 32px 22px;
  box-shadow:
    0 18px 48px -10px rgba(107, 64, 36, 0.22),
    0 4px 10px -2px rgba(107, 64, 36, 0.10);
  z-index: 60;
  animation: hdDropdownIn .2s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes hdDropdownIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hd-dropdown-panel { animation: none; }
}

.hd-dropdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px 36px;
}
.hd-dropdown-col-title {
  font-family: var(--soft);
  font-style: italic;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  /* garde-fou spec 14-titres : terracotta plein illisible sous 24px (3.89:1) */
  color: var(--terracotta-deep, #8B5A40);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in oklab, var(--terracotta-deep) 15%, transparent);
}
.hd-dropdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hd-dropdown-list a {
  display: block;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  padding: 6px 0;
  text-decoration: none;
  transition: color .2s, padding-left .2s;
}
.hd-dropdown-list a:hover,
.hd-dropdown-list a:focus-visible {
  color: var(--terracotta);
  padding-left: 4px;
  outline: none;
}
.hd-dropdown-footer-link {
  display: block;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in oklab, var(--terracotta-deep) 12%, transparent);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--terracotta);
  text-decoration: none;
  text-align: right;
  transition: color .2s;
}
.hd-dropdown-footer-link:hover,
.hd-dropdown-footer-link:focus-visible {
  color: var(--terracotta-deep);
  outline: none;
}

/* ---------- burger + mobile drawer ---------- */
.hd-burger { display: none; }
.hd-mobile { display: none; }

@media (max-width: 960px) {
  .hd-nav { display: none; }
  .hd-burger {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--rule);
    background: var(--bg-paper);
    border-radius: 999px;
    cursor: pointer;
    padding: 0;
  }
  .hd-burger span {
    width: 16px; height: 1.5px; background: var(--ink);
    position: relative;
    display: block;
  }
  .hd-burger span::before, .hd-burger span::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink);
  }
  .hd-burger span::before { top: -5px; }
  .hd-burger span::after  { top:  5px; }

  .hd-mobile {
    /* z 56 : au-dessus de l'ornement floral éventuel (--floral-z 55) */
    position: fixed; inset: 64px 0 0; z-index: 900;
    background: var(--bg-main);
    padding: 32px var(--gutter-x) calc(32px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: 8px;
    transform: translateY(-110%);
    transition: transform .45s cubic-bezier(0.65, 0, 0.35, 1);
    overflow-y: auto;
  }
  .hd-mobile[data-open="true"] { transform: translateY(0); }
  .hd-mobile a {
    font-family: var(--serif);
    font-size: 32px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    text-decoration: none;
  }
  /* CTA mobile en haut du drawer */
  .hd-mobile a.hd-mobile-cta {
    order: -1;
    margin-bottom: 16px;
    padding: 16px 20px;
    background: var(--terracotta);
    color: var(--bg-paper);
    border-bottom: none;
    border-radius: 4px;
    font-family: var(--sans);
    font-size: 16px; /* échelle 15-texte (était 17px) */
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.01em;
  }
  .hd-mobile a.hd-mobile-cta:hover,
  .hd-mobile a.hd-mobile-cta:focus-visible {
    background: var(--terracotta-deep);
  }

  /* Accordéon Fonctionnalités mobile */
  .hd-mobile-details {
    border-bottom: 1px solid var(--rule);
  }
  .hd-mobile-details > summary {
    font-family: var(--serif);
    font-size: 32px;
    padding: 14px 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--ink);
  }
  .hd-mobile-details > summary::-webkit-details-marker { display: none; }
  .hd-mobile-details > summary > span {
    font-family: var(--sans);
    font-size: 24px;
    font-weight: 300;
    color: var(--ink-faint);
    transition: transform .2s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .hd-mobile-details[open] > summary > span {
    transform: rotate(45deg);
  }
  .hd-mobile-details-content {
    padding: 8px 0 20px;
  }
  .hd-mobile-details-group {
    margin-bottom: 18px;
  }
  .hd-mobile-details-group:last-of-type {
    margin-bottom: 12px;
  }
  .hd-mobile-details-title {
    font-family: var(--soft);
    font-style: italic;
    font-size: 14px;
    font-weight: 500;
    /* garde-fou spec 14-titres : terracotta plein illisible sous 24px (3.89:1) */
    color: var(--terracotta-deep, #8B5A40);
    margin: 0 0 6px;
    letter-spacing: 0.04em;
  }
  .hd-mobile-details-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .hd-mobile-details-group li a {
    display: block;
    font-family: var(--sans);
    font-size: 16px; /* échelle 15-texte (était 17px) */
    color: var(--ink);
    padding: 8px 0;
    border-bottom: none;
  }
  .hd-mobile-details-footer {
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in oklab, var(--terracotta-deep) 15%, transparent);
    border-bottom: none !important;
    font-family: var(--sans) !important;
    font-size: 14px !important;
    color: var(--terracotta) !important;
    text-align: right;
  }
}