/* === Palette Champagne (global pour ce fichier) === */
:root{
  --champagne:        #C8A86B;   /* couleur principale */
  --champagne-600:    #A88D53;   /* + foncé pour hover/active */
  --champagne-accent: #CBAF87;   /* variante douce (CTA) */
  --champagne-rgb:    200,168,107;

  /* Compat avec le CSS existant (qui utilise --copper) */
  --copper:    var(--champagne);
  --copper-600:var(--champagne-600);
}
/* FILE: css/header.css */
/* ===== Header minimal + Drawer (1ère définition exactement) ===== */
 /* ===== Header minimal : MENU | LOGO | RÉSERVATION — tout en TEXTE ===== */
.hero-min-header{
  position: fixed; inset-inline:0; top:0; z-index:10000;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* Menu | Logo | Bouton */
  align-items: center; /* Force l'alignement vertical parfait */
  padding: max(10px, env(safe-area-inset-top)) clamp(18px, 5vw, 44px) 18px; /* top plus haut */
  background: transparent; border: 0; box-shadow: none;
  pointer-events: none;
}

.hero-min-header .header-btn,
.hero-min-header .header-logo-center{ pointer-events: auto; }

/* Boutons → texte simple (plus grand), sans underline - INTER */
.header-btn{
  appearance:none; border:0; background:transparent;
  color: rgba(245,245,245,.96);
  font-family: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 700;
  letter-spacing:.01em;
  text-decoration:none;
  cursor:pointer;
  padding:.35rem .2rem;                 /* hit area discret */
  border-radius:6px; position:relative;
  /* tailles ↑ */
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1;
  transition: color .2s ease, opacity .2s ease, transform .2s ease;
  display: flex;
  align-items: center; /* Aligne le texte verticalement au centre */
}
.header-btn:hover,
.header-btn:focus-visible{
  color: var(--copper); outline:none; transform: translateY(-1px);
}

/* supprime totalement l'underline animé si présent */

.header-menu{ 
  justify-self: start; /* Aligne à gauche dans la grid */
}
.header-book{ 
  justify-self: end; /* Aligne à droite dans la grid */
  text-decoration: none; 
}
.header-logo-center{ 
  justify-self: center; /* Centre dans la colonne du milieu */
  display: inline-flex; 
  align-items: center;
}

/* Logo plus grand */
/* ===== Logo XXL (force la taille) ===== */
.header-logo-img{
  height: clamp(96px, 12vw, 180px) !important;  /* taille ++ */
  max-height: 22vh !important;                  /* sécurité */
  width: auto !important;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.45));
  opacity: 1 !important; visibility: visible !important; /* jamais invisible */
}
@media (max-width:640px){
  .header-logo-img{ height: clamp(64px, 24vw, 120px) !important; }
}


/* Mobile: garde une taille plus raisonnable */
@media (max-width: 640px){
  .header-logo-img{
    height: clamp(64px, 24vw, 120px) !important;
  }
}

/* léger voile au scroll pour séparer sans “carton” */
.hero-min-header.scrolled{
  background: linear-gradient(180deg, rgba(0,0,0,.26), transparent);
}

/* ===== Drawer : slide-in gauche, verre sombre, liens en TEXTE ===== */
.side-nav{
  position: fixed; top:0; left:0; height:100dvh; width:min(92vw, 380px);
  transform: translateX(-100%); transition: transform .42s cubic-bezier(.2,.8,.2,1);
  background: rgba(10,10,10,.86);
  backdrop-filter: blur(12px) saturate(118%); -webkit-backdrop-filter: blur(12px) saturate(118%);
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 60px rgba(0,0,0,.45);
  z-index: 10001; padding: 26px 24px 28px;
  isolation:isolate;
}
.side-nav.open{ transform: translateX(0); }
/* Edge glow pour éviter l’effet “carton” */
.side-nav::after{
  content:""; position:absolute; top:0; right:-28px; bottom:0; width:28px;
  background: linear-gradient(90deg, rgba(0,0,0,.26), transparent);
  pointer-events:none;
}

/* Close plus visible */
.side-nav__close{
  position:absolute; top:14px; right:14px;
  font-size: 28px; line-height:1;
  border:0; background:transparent; color:rgba(245,245,245,.92);
  cursor:pointer; transition: transform .2s ease, color .2s ease;
}
.side-nav__close:hover{ color: var(--copper); transform: rotate(90deg); }

.side-nav__list{
  display:flex; flex-direction:column;
  gap: 18px; margin-top: 52px;
}

/* Liens : texte pur (plus grand), sans soulignement - INTER */
.side-link{
  display:block;
  color: rgba(245,245,245,.96);
  text-decoration:none !important;
  font-family: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight:700; letter-spacing:.25em !important;
  font-size: clamp(18px, 1.8vw, 24px);   /* ↑ taille */
  padding: 8px 2px;
  border: 0; background: transparent;
  transition: color .18s ease, opacity .18s ease;
}
.side-link:hover,
.side-link:focus-visible{
  color: rgba(245,245,245,.96) !important;
  outline:none;
}

/* tuer toute ancienne underline animée */
.side-link::after{ content:none !important; }

/* Lien “Réservation” = même style, juste accent couleur par défaut */
.side-link--cta{
  color: var(--copper) !important; font-weight:900;
  background: transparent !important; border:0 !important; box-shadow:none !important;
}

/* Overlay subtil (la vidéo reste visible) */
.side-nav-overlay{
  position: fixed; inset:0; z-index: 10000;
  background: radial-gradient(120% 100% at 20% 50%, rgba(0,0,0,.22), transparent 60%);
  opacity:0; pointer-events:none; transition: opacity .35s ease;
}
.side-nav-overlay.show{ opacity:1; pointer-events:auto; }

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .side-nav{ transition:none !important; }
  .header-btn, .side-link, .side-nav__close{ transition:none !important; }
}

/* ====== Header minimal + Drawer (2ème définition exactement) ====== */
:root{
  --copper:    #C8A86B;  /* hover/actifs */
  --copper-600:#A88D53;  /* hover plus appuyé si besoin */
  --offwhite:  #F5F5F5;
}/* Focus ring */
.header-btn:focus-visible,
.side-link:focus-visible,
.side-nav__close:focus-visible{
  outline: 2px solid var(--copper) !important;
  outline-offset: 4px !important;
  border-radius: 6px !important;
}


/* Header : MENU | LOGO | RÉSERVATION (texte only) */
/* REMPLACE ENTIEREMENT votre .hero-min-header actuel par ceci */
.hero-min-header{
  position: fixed; inset-inline:0; top:0; z-index: 10000;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  /* ⬇️ Top plus serré, bottom normal → texte plus haut, logo inchangé */
  padding: 10px clamp(18px, 5vw, 44px) 18px;
  background: transparent; border: 0; box-shadow: none;
  pointer-events: none;
}
/* ALIGNEMENT PARFAIT: Menu et Réservation alignés avec le logo */
.header-menu,
.header-book{
  position: relative;
  top: 0; /* Alignement parfait sur la même ligne */
}
@media (max-width:640px){
  .header-menu, .header-book{ top: 0; } /* ALIGNEMENT PARFAIT sur mobile */
}


@media (max-width: 640px){
  .header-menu,
  .header-book{ top: 0; } /* ALIGNEMENT PARFAIT sur mobile */
}

.hero-min-header .header-btn,
.hero-min-header .header-logo-center{ pointer-events:auto; }

.header-btn{
  appearance:none; border:0; background:transparent; cursor:pointer;
  color: rgba(245,245,245,.96);
  font-family: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight:700; letter-spacing:.01em; text-decoration:none;
  padding:.35rem .2rem; border-radius:6px;
  font-size: clamp(16px, 1.6vw, 22px); line-height:1;
  transition: color .2s ease, transform .2s ease;
}
.header-btn:hover, .header-btn:focus-visible{
  color: var(--copper); outline:none; transform: translateY(-1px);
}
.header-menu{ justify-self:start; }
.header-book{ justify-self:end; text-decoration:none; }
.header-logo-center{ justify-self:center; display:inline-flex; align-items:center; }

/* Logo toujours visible (sécurité anti-état bloqué) */
.header-logo-img{
  height: clamp(56px, 6.8vw, 82px); width:auto;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.45));
  opacity:1 !important; visibility:visible !important;
}

/* Voile léger au scroll */
.hero-min-header.scrolled{
  background: linear-gradient(180deg, rgba(0,0,0,.26), transparent);
}

/* Drawer gauche translucide (blur) */
.side-nav{
  position: fixed; top:0; left:0; height:100dvh; width:min(92vw, 380px);
  transform: translateX(-100%); transition: transform .42s cubic-bezier(.2,.8,.2,1);
  background: rgba(10,10,10,.86);
  backdrop-filter: blur(12px) saturate(118%); -webkit-backdrop-filter: blur(12px) saturate(118%);
  border-right:1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 60px rgba(0,0,0,.45);
  z-index:10001; padding:26px 24px 28px; isolation:isolate;
}
.side-nav.open{ transform: translateX(0); }
.side-nav::after{
  content:""; position:absolute; top:0; right:-28px; bottom:0; width:28px;
  background: linear-gradient(90deg, rgba(0,0,0,.26), transparent); pointer-events:none;
}
.side-nav__close{
  position:absolute; top:14px; right:14px; font-size:28px; line-height:1;
  border:0; background:transparent; color:rgba(245,245,245,.92); cursor:pointer;
  transition: transform .2s ease, color .2s ease;
}
.side-nav__close:hover{ color:var(--copper); transform: rotate(90deg); }

.side-nav__list{ display:flex; flex-direction:column; gap:18px; margin-top:52px; }
.side-link{
  display:block; color: rgba(245,245,245,.96); text-decoration:none;
  font-family: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight:700; letter-spacing:.25em !important; font-size:clamp(18px,1.8vw,24px);
  padding:8px 2px; transition: color .18s ease;
  text-transform: uppercase;
}
.side-link:hover, .side-link:focus-visible{ color: rgba(245,245,245,.96); outline:none; }
.side-nav__close{ border:1px solid rgba(var(--champagne-rgb), .65); }

/* Overlay (la vidéo reste visible derrière) */
.side-nav-overlay{
  position: fixed; inset:0; z-index:10000;
  background: radial-gradient(120% 100% at 20% 50%, rgba(0,0,0,.22), transparent 60%);
  opacity:0; pointer-events:none; transition: opacity .35s ease;
}
.side-nav-overlay.show{ opacity:1; pointer-events:auto; }

/* Mobile: hide text "Menu" and show hamburger icon instead */
@media (max-width: 768px) {
  /* 🎯 HEADER MOBILE - VALEURS FIXES comme iPhone 14 pour TOUS */
  .hero-min-header {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 12px !important; /* FIXE - comme iPhone 14 */
    padding: 18px 20px 12px 20px !important; /* FIXE - comme iPhone 14 */
  }

  .header-menu {
    width: 44px !important; /* FIXE */
    height: 44px !important; /* FIXE */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative !important;
    top: 0 !important;
    z-index: 10002 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Hide text spans on mobile */
  .header-menu span {
    display: none;
  }

  /* Create hamburger icon using ::before - FIXE */
  .header-menu::before {
    content: "" !important;
    position: absolute;
    width: 22px !important; /* FIXE */
    height: 2px !important; /* FIXE */
    background: #ffffff;
    box-shadow: 0 7px 0 #ffffff, 0 14px 0 #ffffff !important; /* FIXE */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.28s cubic-bezier(.2,.9,.2,1);
    z-index: 10003 !important;
    border-radius: 2px;
  }

  /* Hamburger rotates when menu opens */
  .header-menu.open::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  /* CRITICAL: Override global rule that kills ::before on mobile only */
  .hero-min-header .header-btn.header-menu::before,
  .hero-min-header #openMenu::before {
    content: "" !important;
    display: block !important;
  }

  /* Bouton RÉSERVER - VALEURS FIXES comme iPhone 14 */
  .header-book {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 0 !important;
    padding: 10px 12px !important; /* FIXE */
    position: relative !important;
    top: 0 !important;
    font-size: 14px !important; /* FIXE - comme iPhone 14 */
    white-space: nowrap !important;
    letter-spacing: 0.02em !important;
  }

  /* Logo - alignement parfait au centre */
  .hero-min-header .header-logo-center {
    top: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Taille logo mobile - FIXE comme iPhone 14 */
  .header-logo-img {
    height: 75px !important; /* FIXE - taille iPhone 14 */
    width: auto !important;
  }

  /* Hide close button during intro */
  #intro-cover ~ .side-nav .side-nav__close,
  html:not(.intro-done) .side-nav__close {
    display: none !important;
  }
}


.header-btn{
text-shadow: 0 2px 10px rgba(0,0,0,.45);
min-height: 44px;
display:inline-flex; align-items:center;
}
/* Focus visible cuivre (header + drawer) */
.header-btn:focus-visible,
.side-link:focus-visible,
.side-nav__close:focus-visible{
  outline:2px solid var(--copper); outline-offset:4px; border-radius:6px;
}

/* Drawer close — REMPLACE ton .side-nav__close existant par ceci */
.side-nav__close{
  position:absolute; top:14px; right:14px;
  width:44px; height:44px; display:grid; place-items:center;
  font-size:22px; line-height:1; cursor:pointer;
  color:rgba(245,245,245,.92); background:transparent; border-radius:8px;
  border:1px solid rgba(203,175,135,.65);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.side-nav__close:hover{ color: var(--copper); border-color: var(--copper); }
/* Réservation mise en avant dans le drawer — REMPLACE/OVERRIDE si déjà présent */
.side-link--cta{ color:#CBAF87 !important; font-weight:900; text-shadow:0 2px 10px rgba(0,0,0,.35); }

/* Active link (exactement) */
.side-link.is-active{ color: var(--copper); }
/* === Header: no underline on links (scope strict) === */
#site-header a,
#site-header a:link,
#site-header a:visited,
#site-header a:hover,
#site-header a:focus,
#site-header a:focus-visible,
#site-header a:active {
  text-decoration: none !important; /* override global underline */
  -webkit-tap-highlight-color: transparent;
}

/* Conserve l’accessibilité du focus par le ring existant */
#site-header .nav-panel a:focus-visible,
#site-header .cta .link-cta:focus-visible,
#site-header .brand:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(184,115,51,.65);
}
/* === HERO MIN HEADER: enlever TOUT soulignement sur "Réservation" === */
.hero-min-header .header-book,
.hero-min-header .header-book:link,
.hero-min-header .header-book:visited,
.hero-min-header .header-book:hover,
.hero-min-header .header-book:focus,
.hero-min-header .header-book:active,
.hero-min-header .header-book:focus-visible {
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  background-image: none !important;   /* neutralise les underlines "gradient/border" */
  border-bottom: 0 !important;         /* neutralise les link-underline via border */
  box-shadow: none !important;         /* neutralise les link-underline via shadow */
}

/* tue les underlines animées via pseudo-éléments si existantes */
.hero-min-header .header-book::before,
.hero-min-header .header-book::after {
  content: none !important;
}

/* garde l’accessibilité focus via ring */
.hero-min-header .header-book:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 4px;
  border-radius: 6px;
}
/* ==== HOTFIX visibilité immédiate du bouton “Menu” ==== */
/* Force l’affichage à tous les états, même si un autre style tente de le masquer */
.hero-min-header .header-menu {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Pendant l’intro (#intro-cover / .intro-running), garder le bouton visible */
html.intro-running .hero-min-header .header-menu {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Si un attribut/une classe cache le bouton, on l’annule */
.hero-min-header .header-menu[hidden],
.hero-min-header .header-menu.hidden,
.hero-min-header .header-menu.is-hidden {
  display: inline-flex !important;
}

/* Neutralise toute animation retardant l’apparition (opacité/visibility) */
.hero-min-header .header-menu {
  transition-property: color, transform; /* pas d’opacité/visibility */
  animation: none !important;
}

/* Safety: si un style global cache les .header-btn, on les force visibles */
.hero-min-header .header-btn {
  opacity: 1 !important;
  visibility: visible !important;
}

/* S’assure que le header passe au-dessus de la vidéo (mais sous l’intro si elle existe) */
.hero-min-header { z-index: 10000 !important; }
/* =========================
   HEADER: remonter le logo
   ========================= */

/* Option 1 (simple, layout-aware): alignement parfait */
.hero-min-header .header-logo-center{
  position: relative;      /* crée le contexte pour top */
  top: 0;                  /* Aligné parfaitement avec Menu et Réserver */
}

/* Option 2 (alternative, sans reflow): décalage via transform
   Décommente si tu préfères, puis commente l'option 1
   .hero-min-header .header-logo-center{
     transform: translateY(-12px);
     will-change: transform;
   }
*/

/* Mobile: ALIGNEMENT PARFAIT - tous les éléments au même niveau */
@media (max-width:640px){
  .hero-min-header .header-logo-center{
    top: 0;              /* ALIGNÉ avec Menu et Réserver sur mobile */
  }
}

/* (Facultatif) resserrer un peu le padding top global du header */
.hero-min-header{
  padding-top: 6px;         /* avant: 10px ; monte tout le header d'encore 4px */
}

/* Nettoyage: doublon de règles pour .header-menu/.header-book — garde un seul bloc */
 /* Supprime la seconde répétition si présente:
.header-menu,
.header-book{
  position: relative;
  top: -12px;
}
*/

/* Sécurité: le logo ne doit pas être masqué si un overflow s’applique ailleurs */
.hero-min-header,
.header-logo-center{
  overflow: visible;
}

/* Hover & active – header + drawer (priorité max) */
.hero-min-header .header-btn:hover,
.hero-min-header .header-btn:focus-visible,
.side-link:hover,
.side-link:focus-visible,
.side-link.is-active,
.side-link--cta,
.side-link--cta:hover,
.side-link--cta:focus-visible,
.side-nav__close:hover{
  color: rgba(245,245,245,.96) !important;
  border-color: var(--copper) !important;
  text-shadow: none !important;
}

/* Focus ring (header + drawer) */
.header-btn:focus-visible,
.side-link:focus-visible,
.side-nav__close:focus-visible{
  outline: 2px solid var(--copper) !important;
  outline-offset: 4px !important;
  border-radius: 6px !important;
}

/* Réserver (header) un peu plus “pressé” au hover */
.header-book:hover,
.header-book:focus-visible{
  color: var(--copper-600) !important;
}
/* === POLISH PACK (append at end of css/header.css) === */

/* 1) Or un poil plus dense au hover pour le bouton Réserver (header) */
.hero-min-header .header-book:hover,
.hero-min-header .header-book:focus-visible{
  color: var(--copper-600) !important;
}

/* 2) Liens du drawer: état de base un chouïa atténué + hover full */
.side-link{
  color: rgba(245,245,245,.88);
  letter-spacing:.25em !important;
}
.side-link:hover,
.side-link:focus-visible{
  color: rgba(245,245,245,.96) !important;
  opacity: 1 !important;
}

/* 3) Renforcer l’actif (comme “Services” / “Contact & Location”) */
.side-link.is-active{
  color: var(--copper) !important;
  font-weight: 900;
}

/* 4) CTA “Réserver” dans le drawer: un peu plus premium */
.side-link--cta{
  color: var(--copper) !important;
  letter-spacing: .02em;
  text-shadow: 0 1px 10px rgba(0,0,0,.25);
}
.side-link--cta:hover{ color: var(--copper-600) !important; }

/* 5) Bouton X: halo cuivre au hover (déjà bien, on le rend plus net) */
.side-nav__close{
  border-color: rgba(200,168,107,.55);
}
.side-nav__close:hover{
  color: var(--copper) !important;
  border-color: var(--copper) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

/* 6) Overlay du drawer: +3% d’opacité pour les textes clairs sur vidéo */
.side-nav-overlay{
  background: radial-gradient(120% 100% at 20% 50%,
    rgba(0,0,0,.28), transparent 60%);
}
/* === HEADER + DRAWER — Overrides Champagne (fin de fichier) === */
.hero-min-header .header-btn:hover,
.hero-min-header .header-btn:focus-visible{
  color: var(--champagne) !important;
}

.side-link:hover,
.side-link:focus-visible,
.side-link.is-active{
  color: var(--champagne) !important;
}

.side-link--cta:hover,
.side-link--cta:focus-visible{
  color: var(--champagne-600) !important;
}

.side-nav__close:hover{
  color: var(--champagne) !important;
  border-color: var(--champagne) !important;
}

.header-btn:focus-visible,
.side-link:focus-visible,
.side-nav__close:focus-visible{
  outline: 2px solid var(--champagne) !important;
  outline-offset: 4px !important;
  border-radius: 6px !important;
}
/* === HEADER + DRAWER — Champagne final patch === */

/* 1) Bouton "Menu" (header) : base claire → champagne au hover/focus */
.hero-min-header .header-menu{ color: rgba(245,245,245,.96) !important; }
.hero-min-header .header-menu:hover,
.hero-min-header .header-menu:focus-visible{
  color: var(--champagne) !important;
  outline: 2px solid var(--champagne) !important;
  outline-offset: 4px !important;
  border-radius: 6px !important;
}
/* petit boost de lisibilité quand le header est voilé au scroll */
.hero-min-header.scrolled .header-menu{
  text-shadow: 0 0 10px rgba(0,0,0,.35);
}

/* 2) Drawer : neutraliser totalement :visited + états champagne */
.side-link,
.side-link:link,
.side-link:visited{
  color: rgba(245,245,245,.88) !important; /* jamais violet */
}
.side-link:hover,
.side-link:focus-visible,
.side-link.is-active{
  color: var(--champagne) !important;
}

/* CTA "Réserver" du drawer : base champagne douce + hover plus dense */
.side-link--cta{
  color: var(--champagne-accent) !important;
  letter-spacing: .02em;
  text-shadow: 0 1px 10px rgba(0,0,0,.25);
}
.side-link--cta:hover,
.side-link--cta:focus-visible{
  color: var(--champagne-600) !important;
}

/* 3) Focus rings (header + drawer) toujours champagne */
.header-btn:focus-visible,
.side-link:focus-visible,
.side-nav__close:focus-visible{
  outline: 2px solid var(--champagne) !important;
  outline-offset: 4px !important;
  border-radius: 6px !important;
}

/* 4) Bouton X du drawer : halo champagne cohérent */
.side-nav__close{
  border-color: rgba(var(--champagne-rgb), .55) !important;
}
.side-nav__close:hover{
  color: var(--champagne) !important;
  border-color: var(--champagne) !important;
}
/* === MENU: enlever l'encadré, garder le hover === */
.hero-min-header .header-menu{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  -webkit-tap-highlight-color: transparent;
}

/* garder juste la couleur au hover */
.hero-min-header .header-menu:hover{
  color: var(--champagne, var(--copper)) !important;
  transform: translateY(-1px); /* optionnel, retire si tu veux aucun lift */
}

/* tuer tout contour au focus/active (override de tes règles plus haut) */
.hero-min-header .header-menu:focus,
.hero-min-header .header-menu:active,
.hero-min-header .header-menu:focus-visible{
  border: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* (optionnel) un léger text-shadow au focus pour un hint sans encadré */
.hero-min-header .header-menu:focus-visible{
  text-shadow: 0 0 10px rgba(0,0,0,.28);
}
/* === KILL MENU OUTLINE/BORDER/BOX — keep only color on hover === */
.hero-min-header .header-btn.header-menu,
.hero-min-header #openMenu {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* also kill any pseudo-element frame */
.hero-min-header .header-btn.header-menu::before,
.hero-min-header .header-btn.header-menu::after {
  content: none !important;
}

/* keep hover color only (no frame) */
.hero-min-header .header-btn.header-menu:hover {
  color: var(--champagne, var(--copper)) !important;
  transform: translateY(-1px);
}

/* nuke all focus states (no encadré) */
.hero-min-header .header-btn.header-menu:focus,
.hero-min-header .header-btn.header-menu:active,
.hero-min-header .header-btn.header-menu:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  text-shadow: none !important;
}

/* Firefox inner focus padding */
.hero-min-header .header-btn.header-menu::-moz-focus-inner {
  border: 0 !important;
  padding: 0 !important;
}
/* === HEADER: forcer le texte en MAJUSCULES === */
.hero-min-header .header-btn {
  text-transform: uppercase;
  letter-spacing: .08em;        /* un peu d’espacement pour l’esthétique */
  font-weight: 900;             /* optionnel : un poil plus bold en caps */
}

/* Si tu veux aussi les liens du drawer en caps, décommente : */
/*
.side-link {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 900;
}
*/

/* Sur petit écran, resserre un peu la tracking si besoin */
@media (max-width:640px){
  .hero-min-header .header-btn { letter-spacing: .06em; }
  /* .side-link { letter-spacing: .04em; } */
}
/* === NAV (drawer) : forcer les titres en MAJUSCULES === */
.side-nav .side-link,
.side-nav .side-link--cta {
  text-transform: uppercase;
  letter-spacing: .08em;     /* lisibilité en caps */
  font-weight: 900;          /* look plus “titre” */
  word-spacing: .04em;       /* léger confort visuel */
}

/* états (garde ta couleur/hover existants, juste au cas où) */
.side-nav .side-link:hover,
.side-nav .side-link:focus-visible,
.side-nav .side-link.is-active {
  text-transform: uppercase;
}

/* mobile: tracking un peu plus serré */
@media (max-width:640px){
  .side-nav .side-link,
  .side-nav .side-link--cta {
    letter-spacing: .06em;
  }
}
/* === HEADER — Logo plus grand (override final) === */
.hero-min-header .header-logo-center .header-logo-img{
  height: clamp(120px, 14vw, 220px) !important;  /* ↑ taille desktop */
  max-height: 24vh !important;                   /* sécurité sur très grands écrans */
  width: auto !important;
}

/* Mobile : un peu plus grand aussi, mais raisonnable */
@media (max-width:640px){
  .hero-min-header .header-logo-center .header-logo-img{
    height: clamp(88px, 26vw, 140px) !important;
    max-height: 22vh !important;
  }
}

/* Alignement parfait Menu/Book avec le logo */
.hero-min-header .header-menu,
.hero-min-header .header-book{
  top: 0; /* Alignement parfait - pas de décalage */
}
/* === HEADER/DRAWER — FORCE INTER POUR MENU & RÉSERVER ==================== */
/* utilise la même variable que ton global */
:root{
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Boutons du header ("Menu" et "Réserver") */
.hero-min-header .header-btn,
.hero-min-header .header-btn *{
  font-family: var(--font-body) !important;
  font-weight: 800;                 /* garde le look “titres” */
  font-variant-caps: normal !important;
  font-feature-settings: normal !important;
}

/* Lien "Réserver" (si c’est un <a>) */
.hero-min-header .header-book{
  font-family: var(--font-body) !important;
}

/* Liens du drawer (menu latéral) */
.side-nav .side-link,
.side-nav .side-link *{
  font-family: var(--font-body) !important;
  font-weight: 900;                 /* optionnel: tu peux mettre 700 */
  font-variant-caps: normal !important;
}

/* CTA du drawer aussi */
.side-nav .side-link--cta{
  font-family: var(--font-body) !important;
}

/* (option) si tu veux garder les majuscules mais bien “Inter” */
.hero-min-header .header-btn,
.side-nav .side-link{ text-transform: uppercase; letter-spacing:.08em; }
/* Force Inter in header and drawer */
.hero-min-header .header-btn,
.side-nav .side-link {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}
/* === HEADER & DRAWER — INTER LOCK === */
.hero-min-header .header-btn,
.hero-min-header .header-menu,
.hero-min-header .header-book,
.side-nav .side-link,
.side-nav__close {
  font-family: var(--font-body) !important;
}

/* (optionnel) style en caps si tu le veux */
.hero-min-header .header-btn,
.side-nav .side-link {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}
/* Micro-tuning Inter en caps (header + hero) */
.hero-min-header .header-btn,
#hero h1, .hero h1 {
  font-weight: 700;             /* 600 si tu veux plus léger */
  letter-spacing: .08em;        /* .06em sur mobile */
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 1px 12px rgba(0,0,0,.30); /* lisible sur vidéo */
}

@media (max-width:640px){
  .hero-min-header .header-btn{ letter-spacing: .06em; }
}
/* === INTER OVERRIDE — header & drawer (append at end) === */
:root{
  --font-body: "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Header: MENU / RÉSERVER */
.hero-min-header .header-btn,
.hero-min-header .header-menu,
.hero-min-header .header-book,
.hero-min-header .header-btn *{
  font-family: var(--font-body) !important;
  font-weight: 800 !important;              /* 700 si tu veux plus light */
  font-variant-caps: normal !important;
  font-feature-settings: normal !important;
}

/* Drawer (menu latéral) */
.side-nav .side-link,
.side-nav .side-link *,
.side-nav__close{
  font-family: var(--font-body) !important;
  font-weight: 900 !important;              /* 700–800 si tu préfères */
  font-variant-caps: normal !important;
}

/* Sécurité: tue toute police injectée via pseudo/états */
.hero-min-header .header-btn::before,
.hero-min-header .header-btn::after,
.side-nav .side-link::before,
.side-nav .side-link::after{
  font-family: var(--font-body) !important;
}


/* FINAL MOBILE OVERRIDE: ensure header is fully transparent on small screens
   Placed at the end of this file to take precedence over earlier rules. */
@media (max-width: 768px) {
  header.hero-min-header,
  #siteHeader.hero-min-header,
  .hero-min-header,
  .hero-min-header.scrolled {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* (mobile hamburger CSS removed — restored previous state) */

/* ===== ESPACEMENT MENU - OVERRIDE GLOBAL ===== */
.side-nav .side-link,
.side-nav__list .side-link,
nav .side-link,
.side-link span,
.side-link .i18n-fr,
.side-link .i18n-en {
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-family: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* ===== NO HOVER COLOR CHANGE ON MENU LINKS ===== */
.side-link,
.side-link:hover,
.side-link:focus-visible,
.side-link:active,
.side-link.is-active,
.side-link span,
.side-link .i18n-fr,
.side-link .i18n-en,
.side-link:hover span,
.side-link:hover .i18n-fr,
.side-link:hover .i18n-en,
.side-link:focus-visible span,
.side-link:focus-visible .i18n-fr,
.side-link:focus-visible .i18n-en {
  color: rgba(245,245,245,.96) !important;
}

/* Kill any copper color on hover */
.side-nav .side-link:hover,
.side-nav .side-link:focus-visible {
  color: rgba(245,245,245,.96) !important;
}

.side-link:hover,
.side-link:focus-visible {
  color: rgba(245,245,245,.96) !important;
}


/* ============================================================
   🔥 FINAL MOBILE FIX - MAXIMUM PRIORITY - OVERRIDE ALL 🔥
   MUST BE LAST IN FILE - Valeurs FIXES comme iPhone 14
   ============================================================ */
@media (max-width: 768px) {

  /* 🎯 Logo size - FIXED 110px IDENTIQUE sur TOUS mobiles (override TOUT) */
  html body header.hero-min-header .header-logo-center .header-logo-img,
  html body #siteHeader.hero-min-header .header-logo-center .header-logo-img,
  html body .hero-min-header .header-logo-center .header-logo-img,
  body header.hero-min-header .header-logo-center .header-logo-img,
  body .hero-min-header .header-logo-center .header-logo-img,
  header.hero-min-header .header-logo-center .header-logo-img,
  .hero-min-header .header-logo-center .header-logo-img,
  .header-logo-img {
    height: 110px !important;
    max-height: 110px !important;
    min-height: 110px !important;
    width: auto !important;
  }

  /* 🎯 Logo center - ALIGNEMENT PARFAIT vertical (override line 497) */
  html body header.hero-min-header .header-logo-center,
  html body #siteHeader.hero-min-header .header-logo-center,
  html body .hero-min-header .header-logo-center,
  body header.hero-min-header .header-logo-center,
  body .hero-min-header .header-logo-center,
  header.hero-min-header .header-logo-center,
  .hero-min-header .header-logo-center {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 🎯 Menu & Book button - ALIGNEMENT PARFAIT (override line 829) */
  html body header.hero-min-header .header-menu,
  html body header.hero-min-header .header-book,
  body header.hero-min-header .header-menu,
  body header.hero-min-header .header-book,
  header.hero-min-header .header-menu,
  header.hero-min-header .header-book,
  .hero-min-header .header-menu,
  .hero-min-header .header-book {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* 🎯 Header container - HAUTEUR et DISPOSITION FIXES */
  html body header.hero-min-header,
  html body #siteHeader.hero-min-header,
  body header.hero-min-header,
  body .hero-min-header,
  header.hero-min-header,
  #siteHeader.hero-min-header,
  .hero-min-header {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 18px 20px 12px 20px !important;
    min-height: auto !important;
    height: auto !important;
  }

  /* 🎯 Book button - TAILLE FIXE */
  html body header.hero-min-header .header-book,
  body .hero-min-header .header-book,
  header.hero-min-header .header-book,
  .hero-min-header .header-book {
    padding: 10px 12px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-right: 0 !important;
    line-height: 1.2 !important;
  }

  /* 🎯 Menu hamburger - TAILLE FIXE */
  html body header.hero-min-header .header-menu,
  body .hero-min-header .header-menu,
  header.hero-min-header .header-menu,
  .hero-min-header .header-menu {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
  }
}