/* Imports removed - fichiers chargés directement dans le HTML pour éviter les problèmes de chargement */
/* @import "./layout/reset.css"; */
/* @import "./layout/variables.css"; */
/* @import "./components/header.css"; */
/* @import url("https://fonts.googleapis.com/css2?family=Mulish:wght@200;300;400;500;600;700;800;900&display=swap"); */

/* ============================================================
 * HEADER COMPONENT - Fait maison (remplace Webflow)
 * Intégré directement dans main.css pour éviter les problèmes de chargement
 * ============================================================ */

/* Variables spécifiques au header */
:root {
  --header-color-text: #ffffff;
  --header-color-text-dark: #1a1a1a;
  --header-color-accent: #d4a574;
}

/* Navigation principale */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: rgba(26, 26, 26, 0.95);
  backdrop-filter: blur(10px);
  padding: 1rem 0;
  transition: all 0.3s ease;
}

.navbar-container {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.navbar-logo img {
  height: 50px;
  width: auto;
}

.navbar-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-link {
  color: var(--header-color-text);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  padding: 0.5rem 0;
}

.navbar-link:hover {
  color: var(--header-color-accent);
}

.navbar-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--header-color-accent);
  transition: width 0.3s ease;
}

.navbar-link:hover::after {
  width: 100%;
}

/* Bouton menu mobile */
.navbar-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001;
}

.navbar-toggle span {
  width: 25px;
  height: 2px;
  background-color: var(--header-color-text);
  transition: all 0.3s ease;
}

.navbar-toggle.is-open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.navbar-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.navbar-toggle.is-open span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Menu mobile */
@media (max-width: 991px) {
  .navbar-toggle {
    display: flex;
  }

  .navbar-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 400px;
    height: 100vh;
    background-color: #1a1a1a;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 100px 2rem 1.5rem;
    gap: 1.5rem;
    transition: right 0.3s ease;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
  }

  .navbar-menu.is-open {
    right: 0;
  }

  .navbar-link {
    font-size: 1.125rem;
    width: 100%;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* Overlay pour menu mobile */
.navbar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.navbar-overlay.is-open {
  display: block;
  opacity: 1;
}

/* Header Hero Section */
.hero-header {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #000;
}

.hero-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--header-color-text);
}

.hero-title {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.hero-subtitle {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.hero-button {
  display: inline-block;
  padding: 1rem 3rem;
  background-color: var(--header-color-accent);
  color: var(--header-color-text-dark);
  text-decoration: none;
  font-family: var(--font-sans, 'Mulish', sans-serif);
  font-size: 1rem;
  font-weight: 600;
  border-radius: 4px;
  transition: all 0.3s ease;
  border: 2px solid var(--header-color-accent);
}

.hero-button:hover {
  background-color: transparent;
  color: var(--header-color-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
}

/* Responsive */
@media (max-width: 767px) {
  .hero-header {
    min-height: 100vh;
    min-height: 100dvh; /* Support mobile viewport */
  }

  .hero-content {
    padding: 2rem 1.5rem;
  }

  .hero-title {
    margin-bottom: 1rem;
  }

  .hero-subtitle {
    margin-bottom: 1.5rem;
  }
}

/* Social Links */
.navbar-social {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.social-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--header-color-text);
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 50%;
}

.social-link:hover {
  color: var(--header-color-accent);
  transform: scale(1.1);
}

.social-link svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* Espacement pour navbar fixe */
.page-wrapper {
  padding-top: 70px;
}

/* Base typography */
body {
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-sans);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--spacing-md);
}

/* Temporary helpers to ensure parity while we migrate away from Webflow classes */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 1px, 1px) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Bridge styles for existing Webflow menu while porting */
.w-nav-menu,
.navbar18_menu,
.navbar18_menu-2 {
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(-30px);
  opacity: 0;
}
.w-nav-menu.is-open,
.navbar18_menu.is-open,
.navbar18_menu-2.is-open {
  display: block !important;
  opacity: 1 !important;
  transform: translateY(0);
}

/* Burger menu icon animations */
.menu-icon4_line-top-2,
.menu-icon4_line-middle-top,
.menu-icon4_line-middle-base-2,
.menu-icon4_line-bottom-2 {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transform-origin: center;
}

/* When menu is open, transform burger to X */
.w-nav-button.is-open .menu-icon4_line-top-2 {
  transform: translateY(8px) rotate(45deg);
}

.w-nav-button.is-open .menu-icon4_line-middle-top {
  opacity: 0;
  transform: scale(0);
}

.w-nav-button.is-open .menu-icon4_line-middle-base-2 {
  opacity: 0;
  transform: scale(0);
}

.w-nav-button.is-open .menu-icon4_line-bottom-2 {
  transform: translateY(-8px) rotate(-45deg);
}

/* Navigation links active/inactive states (only on pages other than homepage) */
body[data-page]:not([data-page="home"]) .navbar18_link-2 {
  color: rgba(255, 255, 255, 0.5) !important; /* Greyed out by default */
  transition: color 0.3s ease;
}

body[data-page]:not([data-page="home"]) .navbar18_link-2.is-active {
  color: #ffffff !important; /* White for active link */
  opacity: 1;
}

/* Gallery slider: keep original Webflow styles, only add JS functionality */
.gallery22_slider.accueil .gallery22_mask {
  transition: transform 0.5s ease;
}

/* Force square 1:1 images for "Une écurie pas comme les autres..." */
.gallery22_slider.accueil .gallery22_image-wrapper {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden;
  width: 100%;
}

.gallery22_slider.accueil .gallery22_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1 !important;
}

/* Adjust section height to fit square images - let images determine height */
.section_gallery .gallery22_slider.accueil {
  height: auto !important;
  min-height: auto !important;
}

.section_gallery .gallery22_component {
  height: auto !important;
}

.section_gallery .gallery22_slider.accueil .gallery22_mask {
  height: auto !important;
}

.section_gallery .gallery22_slider.accueil .gallery22_slide {
  height: auto;
}

/* Navigation dots styling */
.gallery22_slider.accueil .w-slider-dot {
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.gallery22_slider.accueil .w-slider-dot.w-active {
  opacity: 1;
  transform: scale(1.2);
}

/* Logo carousel infinite scroll - single line */
.section_logo3 {
  overflow: hidden;
  position: relative;
  width: 100%;
  /* Masque gauche/droite : on ne voit jamais le début ni la fin de la boucle */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
}

.logo3_component {
  display: flex;
  width: max-content;
  will-change: transform;
}

.logo3_list {
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  gap: 3rem;
  margin-right: 3rem;
}

.logo3_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0.75rem 0;
}

/* Logos en gris (section sous "Suivez-nous sur les réseaux") */
.section_logo3 .logo3_logo {
  max-height: 3.5rem;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(100%);
  opacity: 0.85;
}

/* Infinite scroll animation - boucle infinie (2 listes identiques = -50%) */
@keyframes logoScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.logo3_component {
  animation: logoScroll 40s linear infinite;
}

/* FAQ Accordion styling */
.faq1_question,
.faq5_question {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.faq1_question:hover,
.faq5_question:hover {
  opacity: 0.8;
}

.faq1_answer,
.faq5_answer {
  overflow: hidden;
  transition: height 0.3s ease;
}

.faq1_icon-wrapper,
.faq5_icon-wrapper {
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq1_accordion.is-open .faq1_icon-wrapper,
.faq5_accordion.is-open .faq5_icon-wrapper {
  transform: rotate(180deg);
}

/* Background video styles - ensure proper display - OVERRIDE Webflow styles */
/* 1. Conteneur parent : position relative et overflow hidden */
.section_header {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
}

.section_header.text-color-white {
  position: relative !important;
  overflow: hidden !important;
  height: 100vh !important;
  min-height: 100vh !important;
  width: 100% !important;
}

/* 2. Video wrapper : position absolute, remplit toute la section */
.header7_background-video-wrapper {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

/* 3. Background-video div : remplit le wrapper */
.header7_background-video-wrapper .background-video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
}

/* 4. Video element : object-fit cover pour couvrir tout l'espace */
.header7_background-video-wrapper .header7_background-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;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Video wrapper - z-index 0 (bottom layer) - fills entire section */
.header7_background-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0 !important;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
}

/* Overlay removed from header7_background-video-wrapper - using section_header::after instead to avoid stacking context issues */

.header7_background-video-wrapper .background-video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  z-index: 0 !important;
}

/* Override Webflow's .background-video rule - ensure full height and width */
.header7_background-video-wrapper .background-video {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* Override global .background-video rule from Webflow CSS */
.background-video {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* Video - z-index 0 (bottom) - fills entire section with cover (100% width and height) */
.header7_background-video-wrapper .header7_background-video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
  z-index: 0 !important;
}

/* Force video to be visible - fills entire section (100% width and height) */
video.header7_background-video {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 0 !important;
}

/* Mobile responsive - ensure video covers entire viewport on mobile - OVERRIDE Webflow styles */
@media screen and (max-width: 767px) {
  /* Override Webflow .background-video which has fixed height: 100vh */
  .header7_background-video-wrapper .background-video {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }
  
  .section_header .header7_background-video-wrapper video.header7_background-video {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }
  
  .section_header {
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }
  
  .header7_background-video-wrapper {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }
}

/* Extra override for very small screens */
@media screen and (max-width: 480px) {
  .section_header .header7_background-video-wrapper .background-video video.header7_background-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* Overlay using ::after on section_header - single overlay to avoid stacking context issues */
.section_header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.3);
  pointer-events: none;
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Content - z-index 2 (top layer, above overlay and video) */
.section_header .padding-global-2,
.section_header .container-large,
.header7_content {
  position: relative !important;
  z-index: 2 !important;
}

/* Override Webflow's fixed height on header7_content - allow flexible height */
.header7_content {
  min-height: 100vh !important;
  height: auto !important;
}

/* Responsive adjustments */
@media screen and (max-width: 991px) {
  .logo3_logo {
    max-height: 3rem;
  }
  .section_logo3 .logo3_logo {
    max-height: 3rem;
  }
  
  /* Make all images responsive on mobile, except team images */
  img:not(.team5_image) {
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }
  
  /* Gallery images responsive */
  .gallery22_image,
  .gallery22_image-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  
  .gallery22_slider.accueil .gallery22_image-wrapper {
    aspect-ratio: 1 / 1 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  .gallery22_slider.accueil .gallery22_image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  
  /* Gallery mask responsive */
  .gallery22_mask {
    width: 100% !important;
  }
  
  .gallery22_slide {
    width: 100% !important;
    padding-right: 0 !important;
  }
  
  /* Card images responsive */
  .card_image,
  .card_image-wrapper,
  .layout298_item img,
  .layout240_item-2 img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  
  /* Background images responsive */
  .header5_background-image,
  .background-image {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
  
  /* Video responsive - exclude header video from auto height */
  video:not(.header7_background-video) {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  
  /* 5. Header7_content : hauteur minimale suffisante sur mobile */
  .header7_content {
    min-height: 100vh !important;
    height: 100vh !important;
    position: relative !important;
  }
  
  /* Section header : position relative et overflow hidden - CRITICAL */
  .section_header {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: none !important;
  }
  
  .section_header.text-color-white {
    position: relative !important;
    overflow: hidden !important;
    height: 100vh !important;
    min-height: 100vh !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Video wrapper : remplit toute la section - CRITICAL pour mobile */
  .section_header .header7_background-video-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: hidden !important;
    z-index: 0 !important;
  }
  
  /* Background-video div : remplit le wrapper - CRITICAL pour mobile */
  .section_header .header7_background-video-wrapper .background-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  
  /* Video element : object-fit cover pour couvrir tout l'espace - CRITICAL pour mobile */
  .section_header .header7_background-video-wrapper .header7_background-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: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
  
  /* Direct video selector - override all other rules - CRITICAL */
  .section_header.text-color-white .header7_background-video-wrapper video.header7_background-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: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
  
  video.header7_background-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: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
  
  /* Overlay on section_header fills entire section on mobile */
  .section_header::after {
    height: 100% !important;
    min-height: 100% !important;
  }
}

/* Extra small devices (phones, 480px and down) */
@media screen and (max-width: 480px) {
  img:not(.team5_image) {
    max-width: 100% !important;
    height: auto !important;
  }
  
  .gallery22_image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .gallery22_slide {
    width: 100% !important;
    min-width: 100% !important;
  }
  
  /* 5. Header7_content : hauteur minimale suffisante sur très petits écrans */
  .section_header.text-color-white .header7_content {
    min-height: 100vh !important;
    height: 100vh !important;
    position: relative !important;
  }
  
  /* Section header : position relative et overflow hidden - CRITICAL */
  .section_header.text-color-white {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: none !important;
  }
  
  /* Video wrapper : remplit toute la section - CRITICAL pour mobile */
  .section_header.text-color-white .header7_background-video-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: hidden !important;
    z-index: 0 !important;
  }
  
  /* Background-video div : remplit le wrapper - CRITICAL pour mobile */
  .section_header.text-color-white .header7_background-video-wrapper .background-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  
  /* Video element : object-fit cover pour couvrir tout l'espace - CRITICAL pour mobile */
  .section_header.text-color-white .header7_background-video-wrapper .header7_background-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: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
  
  /* Direct video selector - highest specificity - CRITICAL */
  .section_header.text-color-white .header7_background-video-wrapper video.header7_background-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: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
  
  video.header7_background-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: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
  
  /* Overlay on section_header fills entire section on extra small screens */
  .section_header.text-color-white::after {
    height: 100vh !important;
    min-height: 100vh !important;
  }
}