/* path: /assets/css/header.css */
/* ===== Header (scope strict) ===== */

#site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  color: var(--offwhite);
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: saturate(120%) blur(8px);
  background:
    radial-gradient(1200px 300px at 50% 0%, rgba(184,115,51,.10), transparent 60%),
    rgba(0,0,0,.55);
}

#site-header.header--solid {
  /* why: lisibilité après le hero */
  background:
    radial-gradient(1200px 300px at 50% 0%, rgba(184,115,51,.10), transparent 60%),
    var(--black);
}

#site-header .header-inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* Menu | Logo | Réservation */
  align-items: center;
  gap: 8px;
}

/* ===== Menu (texte pur) ===== */
#site-header .nav-toggle {
  justify-self: start;
  appearance: none;
  border: 0;
  background: none;
  padding: 6px 8px;
  font: inherit;
  color: var(--offwhite);
  line-height: 1;
  cursor: pointer;
  border-radius: 10px; /* focus ring */
  transition: color 220ms ease, text-shadow 220ms ease, transform 220ms ease;
}
#site-header .nav-toggle:hover {
  color: var(--copper);
  text-shadow: 0 0 12px rgba(184,115,51,.25);
  transform: translateY(-1px);
}
#site-header .nav-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(184,115,51,.65);
}
#site-header .nav-toggle[aria-expanded="true"] {
  text-shadow: 0 0 10px rgba(184,115,51,.20);
}

/* ===== Logo (centre) ===== */
#site-header .brand {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
#site-header .brand img { height: 30px; width: auto; display: block; }
#site-header .brand .brand-text { font-weight: 600; letter-spacing: .04em; font-size: 1.05rem; }

/* ===== CTA Réservation (texte pur) ===== */
#site-header .cta { justify-self: end; }
#site-header .cta .link-cta {
  display: inline-block;
  padding: 6px 8px;
  text-decoration: none;
  color: var(--offwhite);
  border-radius: 10px;
  transition: color 220ms ease, text-shadow 220ms ease, transform 220ms ease;
}
#site-header .cta .link-cta:hover {
  color: var(--copper);
  text-shadow: 0 0 12px rgba(184,115,51,.25);
  transform: translateY(-1px);
}
#site-header .cta .link-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(184,115,51,.65);
  color: var(--copper);
}

/* ===== On masque toute nav horizontale (on utilise le panneau) ===== */
#site-header .nav { display: none !important; }

/* ===== Panneau latéral (slide-in gauche) ===== */
#site-header .nav-panel {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(86vw, 340px);
  transform: translateX(-100%);
  background: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.80));
  border-right: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
  transition: transform 320ms cubic-bezier(.22,.61,.36,1);
  z-index: 60;
  display: grid;
  grid-auto-rows: min-content;
}
#site-header .nav-panel.open { transform: translateX(0); }

#site-header .nav-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px;
}
#site-header .nav-panel .panel-close {
  appearance: none;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: var(--offwhite);
  height: 36px; width: 36px; border-radius: 10px;
  cursor: pointer;
  transition: color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
#site-header .nav-panel .panel-close:hover {
  color: var(--copper);
  box-shadow: 0 0 0 2px rgba(184,115,51,.35), 0 8px 24px rgba(184,115,51,.18);
  transform: translateY(-1px);
}
#site-header .nav-panel .panel-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(184,115,51,.65);
}

#site-header .nav-panel nav { padding: 8px 16px 20px; }
#site-header .nav-panel ul {
  list-style: none;
  padding: 0; margin: 0;
  display: grid; gap: 8px;
}

/* ===== Liens du panneau: états corrects ===== */
#site-header .nav-panel a {
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  border-radius: 8px;
  color: var(--offwhite);
  transition: color 220ms ease, text-shadow 220ms ease, transform 220ms ease;
}

/* neutralise le visited qui pourrait rester cuivre */
#site-header .nav-panel a:visited { color: var(--offwhite); }

/* Hover & Focus */
#site-header .nav-panel a:hover {
  color: var(--copper);
  text-shadow: 0 0 12px rgba(184,115,51,.25);
  transform: translateY(-1px);
}
#site-header .nav-panel a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(184,115,51,.65);
  color: var(--copper);
}

/* Actif uniquement si marqué (par IO/JS) */
#site-header .nav-panel a[aria-current="true"],
#site-header .nav-panel a.is-active {
  color: var(--copper);
  text-shadow: 0 0 10px rgba(184,115,51,.18);
}

/* Sécurité: revient à offwhite si NON hover/focus/actif */
#site-header .nav-panel a:not(:hover):not(:focus-visible):not([aria-current="true"]):not(.is-active) {
  color: var(--offwhite);
}

/* ===== Scrim (optionnel) ===== */
#site-header .nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 55;
}
#site-header .nav-scrim.open { opacity: 1; pointer-events: auto; }

/* ===== Breakpoints ===== */
@media (min-width: 680px) {
  #site-header .header-inner { padding: 14px 20px; }
  #site-header .brand img { height: 32px; }
}
@media (min-width: 1024px) {
  #site-header .header-inner { padding: 16px 24px; }
  #site-header .brand img { height: 34px; }
}

/* ===== Motion safety ===== */
@media (prefers-reduced-motion: reduce) {
  #site-header *, #site-header *::before, #site-header *::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  /* EXCEPTION: #intro-cover doit pouvoir animer */
  #intro-cover,
  #intro-cover *,
  #intro-cover::before,
  #intro-cover::after {
    animation: revert !important;
    transform: revert !important;
    transition: revert !important;
  }
}
/* === Patch anti-:visited cuivre (priorité locale Header) === */

/* Panneau latéral */
#site-header .nav-panel a,
#site-header .nav-panel a:link,
#site-header .nav-panel a:visited {
  color: var(--offwhite) !important; /* surpasse a:visited global */
}



/* CTA “Réservation” du header (texte pur) */
#site-header .cta .link-cta,
#site-header .cta .link-cta:link,
#site-header .cta .link-cta:visited {
  color: var(--offwhite) !important;
}
#site-header .cta .link-cta:hover,
#site-header .cta .link-cta:focus-visible {
  color: var(--copper) !important;
}

/* Si un style cible le dernier item en cuivre, on le neutralise sauf actif */
#site-header .nav-panel li:last-child > a:not([aria-current="true"]):not(.is-active):not(:hover):not(:focus-visible) {
  color: var(--offwhite) !important;
}

/* Motion safety pour ce bloc */
@media (prefers-reduced-motion: reduce) {
  #site-header .nav-panel a,
  #site-header .cta .link-cta {
    transition: none !important;
    transform: none !important;
  }
}
/* === Active state GATED par le scroll (header solide) === */
/* Avant: on colorait toujours .is-active / [aria-current="true"] */
/* Maintenant: seulement quand le header a .header--solid (donc pas au tout début) */

#site-header.header--solid .nav-panel a[aria-current="true"],
#site-header.header--solid .nav-panel a.is-active {
  color: var(--copper) !important;
  text-shadow: 0 0 10px rgba(184,115,51,.18);
}

/* Sécurité: si le header n'est pas solide, on force neutre */
#site-header:not(.header--solid) .nav-panel a[aria-current="true"],
#site-header:not(.header--solid) .nav-panel a.is-active {
  color: var(--offwhite) !important;
  text-shadow: none !important;
}
/* 1) Hover/Focus — OK cuivre */
#site-header .nav-panel a:hover,
#site-header .nav-panel a:focus-visible {
  color: var(--copper) !important;
}

/* 2) Actif UNIQUEMENT quand le header est solide (après scroll) */
#site-header.header--solid .nav-panel a[aria-current="true"],
#site-header.header--solid .nav-panel a.is-active {
  color: var(--copper) !important;
  text-shadow: 0 0 10px rgba(184,115,51,.18);
}

/* 3) Tant que le header N'EST PAS solide → forcer neutre, même si aria-current est posé */
#site-header:not(.header--solid) .nav-panel a[aria-current="true"],
#site-header:not(.header--solid) .nav-panel a.is-active {
  color: var(--offwhite) !important;
  text-shadow: none !important;
}

/* 4) Pendant l'intro (logo plein écran) → neutre quoi qu'il arrive */
html.intro-running #site-header .nav-panel a[aria-current="true"],
html.intro-running #site-header .nav-panel a.is-active {
  color: var(--offwhite) !important;
}

/* 5) Sans toucher au JS : si l'intro est visible (#intro-cover.play), on neutralise via :has() */
html:has(#intro-cover.play) #site-header .nav-panel a[aria-current="true"],
html:has(#intro-cover.play) #site-header .nav-panel a.is-active {
  color: var(--offwhite) !important;
}

/* 6) Sécurité : neutralise a:visited hérité */
#site-header .nav-panel a,
#site-header .nav-panel a:link,
#site-header .nav-panel a:visited {
  color: var(--offwhite) !important;
}
/* INTRO STYLES MOVED TO index.html - DO NOT ADD INTRO CSS HERE *//* Logo du header caché au début */
.hero-min-header .header-logo-center {
  opacity: 0;
  transform: translateY(-4px) scale(0.96);
}

/* Quand l'intro est terminée → animation avec 1s de délai */
html.intro-done .hero-min-header .header-logo-center {
animation: header-logo-in 0.7s cubic-bezier(.16,.76,.34,1) 0s forwards;
}

/* Make the animation GPU-friendly and hint the browser for smoother compositing */
.hero-min-header .header-logo-center {
  will-change: transform, opacity;
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  html.intro-done .hero-min-header .header-logo-center {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-min-header .header-logo-center {
    will-change: auto !important;
  }
}

/* Keyframes de l'animation du logo */
@keyframes header-logo-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 🔒 SÉCURITÉ : Animation STRICTEMENT identique sur tous les appareils */
@media (max-width: 900px) {
  /* Force les mêmes valeurs d'animation sur mobile */
  html.intro-done .hero-min-header .header-logo-center {
    animation: header-logo-in 0.7s cubic-bezier(.16,.76,.34,1) 0s forwards !important;
  }

  .hero-min-header .header-logo-center {
    will-change: transform, opacity;
  }
}
/* === HERO — FULL SCREEN, NO SHRINK === */
.hero{
  position: relative;
  min-height: calc(var(--vh, 1vh) * 100);   /* plein écran fiable iOS/Android */
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  overscroll-behavior: contain;             /* 🔒 Empêche le scroll de sortir de la hero */
  touch-action: pan-y;                      /* 🔒 Permet swipe vertical mais contrôlé */
}

.hero__video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;                       /* toujours sans bandes */
  object-position: 50% 42%;                /* ajuste le cadrage si besoin */
}

/* Sécurité: annule tout scale qu’on aurait testé avant */
@media (max-width: 1024px){
  .hero__video{ transform: none !important; }
}
/* Activer en ajoutant la classe .hero--contain sur la section hero */
.hero.hero--contain .hero__video{
  object-fit: contain;
  background: transparent;                 /* pas de bande “solide” */
  position: relative; z-index: 1;
}

/* Fond flou via poster */
.hero.hero--contain::before{
  content: "";
  position: absolute; inset: -20px; z-index: 0;
  background: var(--hero-poster, #000) center/cover no-repeat;
  filter: blur(18px) brightness(.85);
  transform: scale(1.06);
}
/* === CLEAN MOBILE HERO — FULLSCREEN & STATIONARY === */
@media (max-width: 900px){
  /* Ensure body and html don't add any spacing */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    overflow-x: hidden !important;
  }

  /* Hero container: fullscreen on mobile */
  #hero,
  #panelOverlay .overlay-panel #hero{
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    min-height: calc(var(--vh, 1vh) * 100) !important;
    height: 100vh !important;
    height: 100dvh !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    background: #000 !important;
    overflow: hidden !important;
  }
  
  /* Accessibility: disable transformative funnel animation for users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    #intro-cover .intro-title,
    #intro-cover .intro-title * {
      animation: none !important;
      transition: none !important;
      transform: none !important;
      opacity: 1 !important;
      letter-spacing: normal !important;
    }
  }

  /* Video: cover the screen, no movement, no transform */
  #hero video,
  #hero .hero__video,
  #panelOverlay .overlay-panel #hero video,
  #panelOverlay .overlay-panel #hero .hero__video{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
    background: #000 !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
  }

  /* Overlay panel must be fullscreen */
  #panelOverlay .overlay-panel{
    height: 100dvh !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    overflow-y: auto !important;  /* Allow vertical scrolling for non-hero sections */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }

  /* When hero is in overlay, remove padding and prevent panel scroll */
  #panelOverlay .overlay-panel:has(#hero){
    padding: 0 !important;
    overflow: hidden !important;
  }

  #panelOverlay .overlay-panel main#overlayMain{
    margin: 0 !important;
    min-height: 100%;
  }

  /* Hero in overlay: no padding, fills viewport */
  #panelOverlay .overlay-panel main#overlayMain:has(#hero){
    padding: 0 !important;
    height: 100% !important;
  }

  /* Other sections in overlay: responsive spacing across all device widths */
  #panelOverlay .overlay-panel main#overlayMain > section:not(#hero){
    padding: clamp(80px, 15vh, 120px) clamp(20px, 5vw, 32px) clamp(60px, 10vh, 100px) !important;
    min-height: auto !important;
    max-width: 100% !important;
  }

  /* Responsive typography that scales smoothly from small phone to tablet */
  #panelOverlay .overlay-panel h1 {
    font-size: clamp(28px, 7vw, 48px) !important;
    margin-top: 0 !important;
    margin-bottom: clamp(16px, 4vw, 28px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
  }

  #panelOverlay .overlay-panel h2 {
    font-size: clamp(24px, 6vw, 38px) !important;
    margin-top: 0 !important;
    margin-bottom: clamp(14px, 3.5vw, 24px) !important;
    line-height: 1.2 !important;
  }

  #panelOverlay .overlay-panel h3 {
    font-size: clamp(20px, 5vw, 30px) !important;
    margin-top: 0 !important;
    margin-bottom: clamp(12px, 3vw, 20px) !important;
    line-height: 1.25 !important;
  }

  #panelOverlay .overlay-panel p {
    font-size: clamp(15px, 3.8vw, 18px) !important;
    margin-bottom: clamp(14px, 3vw, 20px) !important;
    line-height: 1.65 !important;
    max-width: 65ch !important;
  }

  /* Better spacing for lists and content */
  #panelOverlay .overlay-panel ul,
  #panelOverlay .overlay-panel ol {
    padding-left: 24px !important;
    margin-bottom: clamp(20px, 4vw, 32px) !important;
  }

  #panelOverlay .overlay-panel li {
    margin-bottom: 12px !important;
  }

  /* Premium buttons and interactive elements - 48px minimum tap target */
  #panelOverlay .overlay-panel button,
  #panelOverlay .overlay-panel .btn,
  #panelOverlay .overlay-panel a.button,
  #panelOverlay .overlay-panel [role="button"] {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: clamp(12px, 3vw, 16px) clamp(24px, 6vw, 32px) !important;
    font-size: clamp(15px, 3.5vw, 18px) !important;
    border-radius: 8px !important;
    margin: clamp(8px, 2vw, 12px) 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important; /* Prevents double-tap zoom */
    -webkit-tap-highlight-color: rgba(200, 168, 107, 0.2) !important;
  }

  /* Links within content also need good tap targets */
  #panelOverlay .overlay-panel a:not(.button):not([class*="btn"]) {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 0 !important;
    touch-action: manipulation !important;
  }

  /* Cards and content blocks with better spacing */
  #panelOverlay .overlay-panel .card,
  #panelOverlay .overlay-panel [class*="card"],
  #panelOverlay .overlay-panel .benefit-card,
  #panelOverlay .overlay-panel .service-card {
    margin-bottom: clamp(20px, 5vw, 40px) !important;
    padding: clamp(20px, 5vw, 32px) !important;
    border-radius: 12px !important;
  }

  /* Images with proper spacing */
  #panelOverlay .overlay-panel img:not(.header-logo-img) {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin: clamp(16px, 4vw, 28px) 0 !important;
  }

  /* Better form inputs on mobile - prevent iOS zoom */
  #panelOverlay .overlay-panel input,
  #panelOverlay .overlay-panel textarea,
  #panelOverlay .overlay-panel select {
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
    border-radius: 8px !important;
    margin-bottom: 16px !important;
    touch-action: manipulation !important;
  }

  #panelOverlay .overlay-panel textarea {
    min-height: 120px !important;
    resize: vertical !important;
  }

  /* Improved readability for small text */
  #panelOverlay .overlay-panel small,
  #panelOverlay .overlay-panel .text-small {
    font-size: clamp(13px, 3vw, 15px) !important;
    line-height: 1.5 !important;
  }

  /* Ensure videos and iframes are responsive */
  #panelOverlay .overlay-panel video:not(.hero__video),
  #panelOverlay .overlay-panel iframe {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
  }

  /* Tables should scroll horizontally on small screens */
  #panelOverlay .overlay-panel table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  /* DISABLED - Was blocking intro positioning changes
  #intro-cover,
  #intro-cover *{
    animation: revert !important;
    transform: revert !important;
  }
  */
}

/* Make sure the header doesn't push the hero down visually */
.hero-min-header,
#siteHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
}

/* Mobile header adjustments for safe areas and clarity */
@media (max-width: 900px) {
  .hero-min-header {
    padding-top: max(16px, env(safe-area-inset-top, 16px)) !important;
    padding-bottom: 16px !important;
    padding-left: max(20px, env(safe-area-inset-left, 20px)) !important;
    padding-right: max(20px, env(safe-area-inset-right, 20px)) !important;
    background: rgba(13, 13, 13, 0.85) !important; /* Opaque background for mobile */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .hero-min-header.scrolled {
    background: rgba(13, 13, 13, 0.95) !important;
  }

  /* Ensure header buttons are properly sized for touch - 48px minimum per accessibility guidelines */
  .hero-min-header .header-btn {
    min-height: 48px !important;
    min-width: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 20px !important;
    font-size: clamp(16px, 4vw, 18px) !important;
  }

  .hero-min-header .header-logo-center {
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}
/* === INTER OVERRIDE — Header + Panel + Hero (append at end) === */
:root{
  --font-body: "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Header: bouton Menu, marque, CTA */
#site-header .nav-toggle,
#site-header .brand,
#site-header .brand .brand-text,
#site-header .cta .link-cta,
#site-header .nav-panel a,
#site-header .nav-panel .panel-close {
  font-family: var(--font-body) !important;
  font-variant-caps: normal !important;
  font-feature-settings: normal !important;
}

/* Poids conseillés (ajuste si tu veux plus léger) */
#site-header .nav-toggle,
#site-header .cta .link-cta { font-weight: 800 !important; }
#site-header .brand .brand-text { font-weight: 700 !important; }
#site-header .nav-panel a { font-weight: 900 !important; }  /* 700–800 si tu préfères */
#site-header .nav-panel .panel-close { font-weight: 700 !important; }

/* Option: style en CAPS pour matcher le “top” */
#site-header .nav-toggle,
#site-header .cta .link-cta,
#site-header .nav-panel a {
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* HERO: titres/texte en Inter aussi (si tu as du contenu texte) */
#hero h1, #hero h2, #hero h3,
#hero p,  #hero .kicker, #hero .btn,
.hero h1, .hero h2, .hero h3, .hero p {
  font-family: var(--font-body) !important;
}
#hero h1, .hero h1 { font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase; }
/* ALL INTRO STYLES REMOVED - Managed in index.html only */@media (max-width: 768px) {
  #intro-cover .intro-title {
    overflow: visible !important;
    white-space: nowrap !important;
    max-width: unset !important;
    text-align: center !important;
    /* Allow the intro keyframes from index.html to control letter-spacing on mobile */
    animation-fill-mode: forwards !important;
  }

  #intro-cover {
    overflow: visible !important;
  }
}
/* 📱 MOBILE FULLSCREEN FIX - Garantit vidéo plein écran sur TOUS les téléphones */
@media (max-width: 768px), (max-height: 900px) {
  /* Container hero: 100% de l'écran */
  .hero,
  #hero,
  section.hero,
  section#hero,
  .hero.hero--signature,
  #panelOverlay #hero {
    position: relative !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Vidéo: FULLSCREEN absolu, sans aucune coupure */
  .hero__video,
  #heroVideo,
  video.hero__video,
  video#heroVideo,
  .hero video,
  #hero video,
  #panelOverlay #hero video,
  #panelOverlay .hero__video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    object-fit: cover !important;
    object-position: center center !important; /* Centré parfait */
    background: #000 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
}