/* ============================================================
   Hôtel La Miséricorde — menu premium réorganisé + responsive
   (surcouche par-dessus le composant React, styles inline)
   ============================================================ */

/* Une fois le JS prêt : on masque la nav d'origine, la mienne prend le relais */
body.hm-ready #root header nav:not(.hm-nav){ display:none !important; }

/* --- Ma barre de navigation --- */
.hm-nav{ display:flex; align-items:center; gap:6px; font-family:"Jost","Helvetica Neue",Arial,sans-serif; }
.hm-nav .hm-links{ display:flex; align-items:center; gap:4px; }

.hm-link{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:0; cursor:pointer;
  padding:10px 15px; border-radius:999px;
  font:600 13.5px/1 "Jost",Arial,sans-serif; letter-spacing:.01em;
  color:var(--hm-beige-300,#E4D8C4); white-space:nowrap;
  transition:color .18s ease, background .18s ease, transform .18s ease;
}
.hm-link svg{ width:17px; height:17px; opacity:.9; }
.hm-link .caret{ width:14px; height:14px; opacity:.7; transition:transform .2s ease; }
.hm-link:hover{ color:var(--hm-gold-300,#F3D9A4); background:rgba(212,162,76,.10); transform:translateY(-1px); }
.hm-link.active{ color:var(--hm-gold-400,#E8C177); }
.hm-link.active::after{
  content:""; position:absolute; left:15px; right:15px; bottom:4px; height:2px;
  border-radius:2px; background:linear-gradient(90deg,transparent,var(--hm-gold-500,#D4A24C),transparent);
}

/* --- Groupes déroulants --- */
.hm-drop{ position:relative; }
.hm-drop:hover > .hm-link .caret,
.hm-drop.open > .hm-link .caret{ transform:rotate(180deg); }
.hm-panel{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(-8px);
  min-width:290px; padding:8px; border-radius:18px; z-index:1200;
  background:rgba(16,12,9,.97); backdrop-filter:blur(16px);
  border:1px solid rgba(212,162,76,.26);
  box-shadow:0 28px 70px rgba(8,6,4,.6);
  opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease;
}
.hm-panel::before{ content:""; position:absolute; top:-14px; left:0; right:0; height:14px; } /* pont anti-flicker */
.hm-drop:hover > .hm-panel,
.hm-drop.open > .hm-panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.hm-panel a{
  display:flex; align-items:center; gap:13px; text-decoration:none;
  padding:11px 12px; border-radius:12px; cursor:pointer;
  color:var(--hm-ivory-100,#F8F4EC); transition:background .14s ease;
}
.hm-panel a:hover{ background:rgba(212,162,76,.14); }
.hm-panel a .pic{ width:38px; height:38px; flex:none; border-radius:10px; display:grid; place-items:center;
  background:rgba(212,162,76,.14); color:var(--hm-gold-400,#E8C177); }
.hm-panel a .pic svg{ width:19px; height:19px; }
.hm-panel a .txt{ display:flex; flex-direction:column; gap:2px; }
.hm-panel a .txt b{ font:600 14px/1.15 "Jost",Arial,sans-serif; }
.hm-panel a .txt small{ font:400 11.5px/1.3 "Jost",Arial,sans-serif; color:var(--hm-stone-300,#98897C); }

/* --- Compte + CTA --- */
.hm-account{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid rgba(239,224,198,.18); color:var(--hm-beige-300,#E4D8C4);
  cursor:pointer; transition:all .18s ease; }
.hm-account svg{ width:18px; height:18px; }
.hm-account:hover{ background:rgba(212,162,76,.16); color:var(--hm-gold-300,#F3D9A4); transform:translateY(-1px); }
.hm-cta{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:0;
  padding:12px 22px; border-radius:999px; margin-left:6px;
  font:700 12.5px/1 "Jost",Arial,sans-serif; letter-spacing:.09em; text-transform:uppercase;
  color:#0F0C09; background:linear-gradient(135deg,#F3D9A4,#D4A24C 55%,#B8863A);
  box-shadow:0 8px 22px rgba(184,134,58,.42), inset 0 0 0 1px rgba(255,255,255,.25);
  transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease;
}
.hm-cta svg{ width:16px; height:16px; }
.hm-cta:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 12px 30px rgba(184,134,58,.55); }

/* --- Hamburger (mobile) --- */
.hm-burger{ display:none; width:46px; height:46px; border-radius:14px; cursor:pointer;
  background:rgba(20,16,12,.5); border:1px solid rgba(212,162,76,.3); color:var(--hm-gold-300,#F3D9A4);
  align-items:center; justify-content:center; }
.hm-burger svg{ width:24px; height:24px; }

/* ============================================================
   RESPONSIVE : sous 1024px → hamburger + tiroir plein écran
   ============================================================ */
@media (max-width:1024px){
  .hm-nav .hm-burger{ display:inline-flex; }
  .hm-nav .hm-links{
    position:fixed; inset:0 0 0 auto; width:min(86vw,380px); height:100vh; z-index:3000;
    flex-direction:column; align-items:stretch; gap:4px; justify-content:flex-start;
    padding:88px 18px 28px; overflow-y:auto;
    background:linear-gradient(180deg,#14100C,#0F0C09); border-left:1px solid rgba(212,162,76,.25);
    box-shadow:-30px 0 80px rgba(0,0,0,.6);
    transform:translateX(105%); transition:transform .32s cubic-bezier(.16,1,.3,1);
  }
  body.hm-drawer .hm-nav .hm-links{ transform:translateX(0); }
  body.hm-drawer::after{ content:""; position:fixed; inset:0; z-index:2900; background:rgba(8,6,4,.55); backdrop-filter:blur(2px); }
  .hm-links .hm-link{ width:100%; justify-content:flex-start; padding:14px 16px; font-size:15px; }
  .hm-links .hm-link.active::after{ display:none; }
  .hm-drop{ width:100%; }
  .hm-drop > .hm-link{ width:100%; }
  /* en tiroir : les panneaux s'affichent en accordéon, en flux */
  .hm-panel{ position:static; transform:none; opacity:1; visibility:visible; min-width:0; width:100%;
    background:transparent; border:0; box-shadow:none; backdrop-filter:none; padding:2px 0 6px 10px;
    display:none; }
  .hm-drop.open > .hm-panel{ display:block; }
  .hm-panel a{ padding:10px 10px; }
  .hm-panel a .pic{ width:32px; height:32px; }
  .hm-account{ width:auto; height:auto; border-radius:12px; padding:14px 16px; justify-content:flex-start; gap:12px; }
  .hm-account::after{ content:"Mon séjour"; font:600 15px/1 "Jost",Arial,sans-serif; }
  .hm-cta{ width:100%; justify-content:center; margin:8px 0 0; padding:15px; font-size:14px; }
}
@media (min-width:1025px){
  .hm-account::after{ display:none; }
}

/* ============================================================
   Lanceur « Espace Pro » (inchangé, fixe top-right)
   ============================================================ */
#hm-pro{ position:fixed; top:16px; right:18px; z-index:2147483000; font-family:"Jost",Arial,sans-serif; }
#hm-pro-btn{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; padding:11px 18px; border:0; border-radius:999px;
  font:600 13px/1 "Jost",Arial,sans-serif; letter-spacing:.04em; text-transform:uppercase; color:#0F0C09;
  background:linear-gradient(135deg,#F3D9A4,#D4A24C 55%,#B8863A); text-decoration:none;
  box-shadow:0 8px 24px rgba(184,134,58,.42), inset 0 0 0 1px rgba(255,255,255,.25);
  transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease; }
#hm-pro-btn:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 12px 30px rgba(184,134,58,.55); }
#hm-pro-btn svg{ width:17px; height:17px; }
#hm-pro-btn .hm-pro-dot{ width:7px; height:7px; border-radius:50%; background:#1E7A3D; box-shadow:0 0 0 3px rgba(30,122,61,.25); }
#hm-pro-menu{ position:absolute; top:calc(100% + 10px); right:0; min-width:262px;
  background:rgba(20,16,12,.97); backdrop-filter:blur(14px); border:1px solid rgba(212,162,76,.28);
  border-radius:16px; padding:8px; box-shadow:0 24px 64px rgba(8,6,4,.55); display:none;
  transform:translateY(-6px); opacity:0; transition:opacity .16s ease, transform .16s ease; }
#hm-pro.open #hm-pro-menu{ display:block; opacity:1; transform:translateY(0); }
#hm-pro-menu .hm-pro-head{ font:600 10px/1 "Jost",Arial,sans-serif; letter-spacing:.22em; text-transform:uppercase; color:#D4A24C; padding:10px 12px 8px; }
#hm-pro-menu a, #hm-pro-menu span.item{ display:flex; align-items:center; gap:12px; text-decoration:none;
  padding:11px 12px; border-radius:11px; color:#F8F4EC; font:500 14px/1.2 "Jost",Arial,sans-serif; transition:background .14s ease; }
#hm-pro-menu a:hover{ background:rgba(212,162,76,.14); }
#hm-pro-menu .ic{ width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; background:rgba(212,162,76,.14); color:#E8C177; }
#hm-pro-menu .ic svg{ width:18px; height:18px; }
#hm-pro-menu small{ display:block; color:#98897C; font-size:11.5px; font-weight:400; margin-top:2px; }
#hm-pro-menu .soon{ opacity:.5; cursor:default; }
#hm-pro-menu .soon .badge{ margin-left:auto; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#D2C2A8; border:1px solid rgba(210,194,168,.3); border-radius:999px; padding:2px 7px; }
#hm-pro.back #hm-pro-btn{ background:linear-gradient(135deg,#F8F4EC,#E4D8C4); }
@media (max-width:1024px){ #hm-pro{ top:12px; right:70px; } #hm-pro-btn{ padding:10px 13px; } #hm-pro-btn .label{ display:none; } }