/* ==========================================================================
   MOBILE STYLES - Optimisations responsive pour tablettes et mobiles
   Consolide les règles mobile pour une meilleure maintenabilité
   ========================================================================== */

/* ==========================================================================
   MOBILE RESPONSIVE FIX
   Corrections globales pour le responsive design sur mobile
   ========================================================================== */

/* ===== RESET ET BASE MOBILE ===== */

/* Viewport et base responsive */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  min-width: 320px;
}

/* Prévenir le zoom sur les inputs sur iOS */
input, select, textarea {
  font-size: 16px !important;
}

/* ===== NAVIGATION MOBILE FIXES ===== */

/* Overrides prioritaires pour annuler les conflits avec header-footer-unify.css */
@media (max-width: 768px) {
  /* Annulation des règles conflictuelles */
  nav.main-navigation {
    all: unset !important;
  }
  
  nav.main-navigation .logo {
    all: unset !important;
  }
  
  nav.main-navigation .logo img {
    all: unset !important;
  }
  
  .main-navigation-list-container {
    all: unset !important;
  }
  
  .main-navigation-list-container > ul {
    all: unset !important;
  }
}

/* Header mobile optimisé */
@media (max-width: 768px) {
  nav.main-navigation {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 11001 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }
  
  /* Logo mobile optimisé */
  nav.main-navigation .logo {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: auto !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
  
  nav.main-navigation .logo img {
    width: auto !important;
    height: 32px !important;
    max-height: 32px !important;
    min-width: 0 !important;
    object-fit: contain !important;
    filter: none !important;
    opacity: 1 !important;
    vertical-align: middle !important;
    display: block !important;
  }
  
  /* Menu de navigation mobile */
  .main-navigation-list-container {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  
  .main-navigation-list-container > ul {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    align-items: center !important;
    height: 100% !important;
  }
  
  .main-navigation-list-container > ul > li {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
  }
  
  .main-navigation-list-container > ul > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 8px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    color: #000 !important;
    border-radius: 16px !important;
    transition: background-color 0.2s ease !important;
    height: 32px !important;
    min-height: 32px !important;
    box-sizing: border-box !important;
  }
  
  .main-navigation-list-container > ul > li > a:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Body padding pour header fixe */
  body {
    padding-top: 56px !important;
  }
}

/* ===== GRID SYSTEM MOBILE ===== */

/* Grid responsif amélioré */
@media (max-width: 768px) {
  .grid .row {
    flex-direction: column !important;
    margin-bottom: 20px !important;
    min-height: auto !important;
  }
  
  .grid .column {
    flex: none !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }
  
  .grid .column:last-child {
    margin-bottom: 0 !important;
  }
}

/* ===== TYPOGRAPHIE MOBILE ===== */

@media (max-width: 768px) {
  .grid h1 {
    font-size: clamp(32px, 8vw, 48px) !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;
    padding: 20px !important;
    text-align: center !important;
    margin: 0 !important;
  }
  
  .grid h2 {
    font-size: clamp(24px, 6vw, 36px) !important;
    line-height: 1.2 !important;
    padding: 0 20px 16px 20px !important;
    text-align: center !important;
    margin: 0 !important;
  }
  
  .grid h3 {
    font-size: clamp(20px, 5vw, 28px) !important;
    line-height: 1.3 !important;
    padding: 0 20px 12px 20px !important;
    margin: 0 !important;
  }
  
  .grid h6 {
    font-size: 14px !important;
    line-height: 1.4 !important;
    padding: 0 20px 8px 20px !important;
    text-align: center !important;
    margin: 0 !important;
  }
  
  .grid p {
    font-size: 16px !important;
    line-height: 1.5 !important;
    padding: 0 20px !important;
    margin-bottom: 16px !important;
    text-align: left !important;
  }
}

/* ===== IMAGES ET MÉDIAS RESPONSIFS ===== */

@media (max-width: 768px) {
  img, video, iframe {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  
  /* Images dans le contenu */
  .grid img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin: 16px auto !important;
  }
  
  /* Videos responsives */
  video {
    width: 100% !important;
    height: auto !important;
  }
}

/* ===== BOUTONS ET INTERACTIONS MOBILE ===== */

@media (max-width: 768px) {
  /* Boutons optimisés pour le toucher */
  .button, button, [role="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 16px auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  
  /* Liens tactiles */
  a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px !important;
  }
}

/* ===== SECTIONS SPÉCIFIQUES MOBILE ===== */

@media (max-width: 768px) {
  /* Above fold section */
  .row.above-fold {
    height: auto !important;
    min-height: calc(100vh - 56px) !important;
    padding: 40px 0 !important;
  }
  
  .row.above-fold .column {
    justify-content: center !important;
    text-align: center !important;
  }
  
  /* Footer mobile */
  .footer-nav {
    margin-top: 60px !important;
    padding: 40px 20px !important;
  }
  
  .footer-nav .modern-grid {
    display: block !important;
  }
  
  .footer-nav .footer-social-inline {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
    text-align: center !important;
  }
}

/* ===== FIXES POUR LES MODULES SPÉCIAUX ===== */

@media (max-width: 768px) {
  /* Financing sections */
  .financing-header-image {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 !important;
  }
  
  .financing-rate-comparison {
    margin: 20px -20px !important;
    padding: 20px !important;
  }
  
  .financing-rate-comparison-option {
    padding: 20px !important;
    margin-bottom: 16px !important;
  }
  
  /* Insights sections */
  .insights-story-model-image {
    height: 200px !important;
  }
  
  /* Jobs sections */
  .jobs .wrapper > ul li {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px 0 !important;
  }
  
  .jobs .wrapper > ul li a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ===== UTILITAIRES MOBILE ===== */

@media (max-width: 768px) {
  /* Classes utilitaires pour mobile */
  .mobile-hide {
    display: none !important;
  }
  
  .mobile-show {
    display: block !important;
  }
  
  .mobile-center {
    text-align: center !important;
  }
  
  .mobile-full-width {
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Espacement mobile */
  .mobile-spacing {
    padding: 20px !important;
  }
  
  .mobile-no-padding {
    padding: 0 !important;
  }
}

/* ===== PERFORMANCES MOBILE ===== */

@media (max-width: 768px) {
  /* Optimisations des animations */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Réduction du motion pour les performances */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-delay: -1ms !important;
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      background-attachment: initial !important;
      scroll-behavior: auto !important;
      transition-delay: 0s !important;
      transition-duration: 0s !important;
    }
  }
}

/* ===== FIXES SPÉCIFIQUES SAFARI MOBILE ===== */

@supports (-webkit-appearance: none) {
  @media (max-width: 768px) {
    /* Fix pour les hauteurs en vh sur Safari */
    .row.above-fold {
      min-height: -webkit-fill-available !important;
    }
    
    /* Fix pour le zoom automatique des inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select {
      font-size: 16px !important;
      border-radius: 0 !important;
    }
  }
}

/* ===== LANDSCAPE ORIENTATION ===== */

@media (max-width: 768px) and (orientation: landscape) {
  nav.main-navigation {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 16px !important;
  }
  
  nav.main-navigation .logo {
    height: 36px !important;
  }
  
  nav.main-navigation .logo img {
    height: 28px !important;
    max-height: 28px !important;
  }
  
  .main-navigation-list-container {
    height: 48px !important;
  }
  
  .main-navigation-list-container > ul > li > a {
    height: 28px !important;
    min-height: 28px !important;
    padding: 4px 6px !important;
    font-size: 11px !important;
  }
  
  body {
    padding-top: 48px !important;
  }
  
  .row.above-fold {
    min-height: calc(100vh - 48px) !important;
    padding: 20px 0 !important;
  }
}

/* ========================================================================== */
/*   NAVIGATION MOBILE - Styles prioritaires pour la navbar                */
/* ========================================================================== */

/* NAVIGATION MOBILE SIMPLE ET FIABLE */

@media (max-width: 768px) {
  /* Variables pour effets glassmorphism (mobile) */
  :root {
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-bg-strong: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.45);
    --glass-shadow: 0 8px 24px rgba(16, 18, 27, 0.18), 0 2px 6px rgba(16, 18, 27, 0.12);
    --glass-shadow-soft: 0 6px 18px rgba(16, 18, 27, 0.14), 0 1px 4px rgba(16, 18, 27, 0.1);
    --glass-hover: rgba(255, 255, 255, 0.35);
    --glass-divider: rgba(0, 0, 0, 0.06);
    /* variantes sombres */
    --glass-bg-dark: rgba(15, 17, 23, 0.66);
    --glass-bg-dark-strong: rgba(15, 17, 23, 0.78);
    --glass-border-dark: rgba(255, 255, 255, 0.14);
    --glass-hover-dark: rgba(255, 255, 255, 0.08);
  }
  /* Forcer le fond global à blanc pour éviter le flash/bande noire (html héritait d'un fond noir) */
  html { background: #fff !important; }
  /* Masquer navigation desktop */
  .mobile-hidden {
    display: none !important;
  }
  
  /* Afficher navigation mobile */
  .desktop-hidden {
    display: block !important;
  }
  
  /* Navigation container */
  nav.main-navigation {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60px !important;
    background: rgba(255, 255, 255, 0.03) !important; /* quasi transparent */
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important; /* très flou, style frosted */
    backdrop-filter: blur(30px) saturate(180%) !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important; /* regrouper hamburger + logo côté gauche */
    gap: 0 !important; /* pas d'écart global entre items */
    padding: 0 20px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
  }
  
  /* Logo aligné à gauche, même ligne que le hamburger */
  nav.main-navigation .logo {
    order: 2 !important;
    position: static !important;
    transform: none !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    margin-left: 8px !important; /* léger espace depuis le bord gauche */
  }
  /* Supprimer tout padding du lien logo sur mobile */
  nav.main-navigation > a.logo {
    padding-left: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 0 !important; /* supprime les espaces inline */
  }
  /* Spécificité plus forte pour surclasser header-footer-unify.css sur certaines pages */
  body.menuiserie nav.main-navigation > a.logo {
    padding-left: 0 !important;
  }
  
  nav.main-navigation .logo img {
    height: 32px !important;
    width: auto !important;
    display: block !important;
  }
  
  /* Container mobile navigation à droite */
  .mobile-navigation {
    order: 3 !important; /* hamburger à droite */
    position: relative !important;
    z-index: 3 !important;
    margin-left: auto !important; /* pousse le hamburger au bord droit */
    align-self: stretch !important; /* occupe toute la hauteur du header */
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    top: auto !important;
    left: auto !important;
    opacity: 1 !important; /* toujours visible */
  }

  .mobile-navigation-active { opacity: 1 !important; }
  .mobile-navigation[data-index="0"] .mobile-navigation-inactive {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  /* Bouton hamburger à droite */
  .mobile-navigation-hamburger {
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border-radius: 12px !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    background: transparent !important; /* pas d'encadrement */
    border: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    margin-right: 8px !important; /* décale légèrement de la bordure droite */
  }
  
  .mobile-navigation-hamburger:hover { opacity: 0.8 !important; }
  .mobile-navigation-hamburger svg {
    display: block !important;
    transform: translateY(2px); /* ajuste légèrement vers le bas */
  }
  
  /* Menu principal masqué par défaut */
  .mobile-navigation-main {
    position: fixed !important;
    top: var(--mobile-header-height, calc(60px + env(safe-area-inset-top))) !important;
    left: 0 !important;
    right: auto !important;
    width: 280px !important;
    height: calc(100vh - var(--mobile-header-height, calc(60px + env(safe-area-inset-top)))) !important;
    z-index: 10000 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s ease !important;
    /* réduire le bandeau blanc en haut */
    padding: 16px 16px 24px !important;
    overflow-y: auto !important;
    /* Glassmorphism clair, plus flou (comme le header desktop) */
    background: rgba(255, 255, 255, 0.95) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: var(--glass-shadow) !important;
    border-top-right-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    color: #000 !important;
  }

  /* Menu ouvert */
  .mobile-navigation[data-index="1"] .mobile-navigation-main {
    transform: translateX(0) !important;
  }
  /* Surcharger les opacités/pointer-events du thème pour les panneaux actifs */
  .mobile-navigation[data-index="1"] .mobile-navigation-main,
  .mobile-navigation[data-index="2"] .mobile-navigation-models,
  .mobile-navigation[data-index="3"] .mobile-navigation-showrooms {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Sous-menu Expertises (mêmes styles que le principal) */
  .mobile-navigation-models {
    position: fixed !important;
    top: var(--mobile-header-height, calc(60px + env(safe-area-inset-top))) !important;
    left: 0 !important;
    right: auto !important;
    width: 280px !important;
    height: calc(100vh - var(--mobile-header-height, calc(60px + env(safe-area-inset-top)))) !important;
    z-index: 10000 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s ease !important;
    padding: 16px 16px 24px !important;
    overflow-y: auto !important;
    /* Glassmorphism clair, plus flou */
    background: rgba(255, 255, 255, 0.95) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: var(--glass-shadow) !important;
    border-top-right-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    color: #000 !important;
  }
  .mobile-navigation[data-index="2"] .mobile-navigation-models {
    transform: translateX(0) !important;
  }

  /* Sous-menu Professionnels */
  .mobile-navigation-showrooms {
    position: fixed !important;
    top: var(--mobile-header-height, calc(60px + env(safe-area-inset-top))) !important;
    left: 0 !important;
    right: auto !important;
    width: 280px !important;
    height: calc(100vh - var(--mobile-header-height, calc(60px + env(safe-area-inset-top)))) !important;
    z-index: 10000 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s ease !important;
    padding: 16px 16px 24px !important;
    overflow-y: auto !important;
    /* Glassmorphism clair, plus flou */
    background: rgba(255, 255, 255, 0.95) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: var(--glass-shadow) !important;
    border-top-right-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    color: #000 !important;
  }
  .mobile-navigation[data-index="3"] .mobile-navigation-showrooms {
    transform: translateX(0) !important;
  }
  
  /* Overlay */
  .mobile-navigation-overlay {
    position: fixed !important;
    top: var(--mobile-header-height, calc(60px + env(safe-area-inset-top))) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(10, 12, 16, 0.12) !important; /* moins sombre, plus de flou */
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    z-index: 9998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
  }

  /* Overlay visible quand un menu est ouvert - via classe JS */
  .mobile-navigation-overlay.visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Fallback avec :has() pour navigateurs modernes */
  @supports selector(:has(*)) {
    nav.main-navigation:has(.mobile-navigation[data-index="1"]) .mobile-navigation-overlay,
    nav.main-navigation:has(.mobile-navigation[data-index="2"]) .mobile-navigation-overlay,
    nav.main-navigation:has(.mobile-navigation[data-index="3"]) .mobile-navigation-overlay {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }
  }
  
  /* Bouton fermer */
  .mobile-navigation-close {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border-radius: 10px !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    background: transparent !important; /* pas d'encadrement */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  
  .mobile-navigation-close:hover { opacity: 0.85 !important; }
  
  /* Items du menu */
  .mobile-navigation-item {
    display: flex !important;
    align-items: center !important;
    padding: 14px 10px !important;
    color: #000 !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    cursor: pointer !important;
    border-radius: 10px !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
  }
  
  .mobile-navigation-item:hover {
    background: var(--glass-hover) !important;
    transform: translateX(2px) !important;
  }

  /* Icônes et chevrons en blanc sur fond sombre */
  .mobile-navigation-main svg,
  .mobile-navigation-models svg,
  .mobile-navigation-showrooms svg { filter: none !important; }
  .mobile-navigation-main svg path,
  .mobile-navigation-main svg line,
  .mobile-navigation-main svg polyline,
  .mobile-navigation-models svg path,
  .mobile-navigation-models svg line,
  .mobile-navigation-models svg polyline,
  .mobile-navigation-showrooms svg path,
  .mobile-navigation-showrooms svg line,
  .mobile-navigation-showrooms svg polyline { fill: #000 !important; stroke: #000 !important; }
  
  .mobile-navigation-item-icon {
    width: 30px !important;
    margin-right: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .mobile-navigation-item-title {
    flex: 1 !important;
    font-size: 16px !important;
  }

  /* Forcer couleurs lisibles (fond clair) */
  .inverted .mobile-navigation-main .mobile-navigation-item,
  .inverted .mobile-navigation-models .mobile-navigation-item,
  .inverted .mobile-navigation-showrooms .mobile-navigation-item,
  .inverted .mobile-navigation-main .mobile-navigation-logo { color: #000 !important; }
  .inverted .mobile-navigation-hamburger svg,
  .inverted .mobile-navigation-close,
  .inverted .mobile-navigation-item-chevron {
    filter: none !important;
  }
  .inverted .mobile-navigation-item-back { 
    filter: none !important; 
  }
  .inverted .mobile-navigation-item-icon img { filter: none !important; }
  
  /* L'espacement du header fixe est géré par header-footer-unify.css */
}
/* Supprimer la bande noire en haut (mobile, toutes pages sauf homepage) */
@media (max-width: 768px) {
  /* Étendre le fond du header dans la zone sûre iOS et éviter toute transparence supérieure */
  body:not([data-slug="/menuiserie"]) nav.main-navigation {
    background: #fff !important;
    padding-top: env(safe-area-inset-top) !important;
    padding-top: constant(safe-area-inset-top) !important; /* iOS < 11.2 */
  }

  /* Le décalage vertical sera géré en JS après l'injection du header pour éviter tout flash */
  body {
    background-color: #fff !important; /* évite de voir un fond sombre à travers le header */
    padding-top: 0 !important;
  }

  /* Supprimer/compresser les gros spacers tout en haut des pages internes */
  body:not([data-slug="/menuiserie"]) main > [class*="spacer-"]:first-child,
  body:not([data-slug="/menuiserie"]) .page > [class*="spacer-"]:first-child,
  body:not([data-slug="/menuiserie"]) article > [class*="spacer-"]:first-child,
  body:not([data-slug="/menuiserie"]) main > [class*="spacer-"]:nth-child(2),
  body:not([data-slug="/menuiserie"]) .page > [class*="spacer-"]:nth-child(2),
  body:not([data-slug="/menuiserie"]) article > [class*="spacer-"]:nth-child(2) {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
@media (max-width: 768px) {
  /* Styles de base pour .mobile-navigation dans tous les états */
  .mobile-navigation {
    display: flex !important;
    align-items: center !important;
    height: 60px !important; /* même hauteur que le header */
  }

  /* Hamburger toujours visible et cliquable */
  .mobile-navigation .mobile-navigation-inactive {
    position: static !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    height: 100% !important;
    gap: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 10001 !important; /* Au-dessus du menu */
  }

  /* Hamburger visible dans tous les états du menu */
  .mobile-navigation[data-index="1"] .mobile-navigation-inactive,
  .mobile-navigation[data-index="2"] .mobile-navigation-inactive,
  .mobile-navigation[data-index="3"] .mobile-navigation-inactive {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Cacher les éléments .desktop-hidden uniquement sur desktop/tablette */
@media (min-width: 769px) {
  .desktop-hidden { display: none !important; }
}


/* ========================================================================== */
/*   HOMEPAGE MOBILE - Optimisations spécifiques page d'accueil            */
/* ========================================================================== */

/* ==========================================================================
   HOMEPAGE MOBILE OPTIMIZATION - ULTRA SPECIFIC RESET
   Reconstruction complète avec sélecteurs ultra-spécifiques
   ========================================================================== */

@media (max-width: 768px) {
  /* ===== "Life with Backyard" — aligner mobile sur version PC (français) ===== */
  .slide.life-with-backyard svg {
    display: none !important; /* masque le visuel anglais vectorisé */
  }
  .slide.life-with-backyard .life-with-backyard-title-post {
    display: none !important; /* évite un espace vide après le titre */
  }
  .slide.life-with-backyard .life-with-backyard-title-pre {
    display: inline !important;
    font-family: 'TASA Explorer', Georgia, serif !important;
    font-size: clamp(28px, 7vw, 40px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: var(--color-text, #fff) !important;
    text-align: left !important;
  }

  /* Annuler la règle mobile globale qui masquait les spans (opacity: 0) */
  .life-with-backyard h1 span {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Forcer la largeur pleine du titre et masquer la seconde partie/trait */
  .life-with-backyard h1 .life-with-backyard-title-pre {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }
  .life-with-backyard h1 hr { display: none !important; }

  /* Réduire l'espace sous la phrase (mobile) */
  .life-with-backyard h1 {
    margin-bottom: 0 !important;
    gap: 0 !important;
  }
  .life-with-backyard-video {
    top: 52vw !important; /* rapprocher la vidéo du titre */
    /* Corriger la troncature à droite en équilibrant les marges */
    left: calc(var(--modern-grid-column-margin) * 0.5) !important;
    width: calc(100vw - var(--modern-grid-column-margin)) !important;
    right: auto !important;
    box-sizing: border-box !important;
  }
  
  /* ===== HERO SECTION - REBUILD TOTAL AVEC SPÉCIFICITÉ MAXIMALE ===== */
  
  /* Container principal - RESET COMPLET ULTRA-SPÉCIFIQUE */
  body.menuiserie .slide.xl-10,
  body.menuiserie.backyard .slide.xl-10,
  body.no-javascript.menuiserie.backyard .slide.xl-10 {
    /* ANNULATION TOTALE de tous les styles existants */
    all: initial !important;
    
    /* RECONSTRUCTION de zéro */
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* Dimensions */
    width: 100vw !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 60px 20px !important;
    box-sizing: border-box !important;
    
    /* Image de fond avec overlay moderne */
    background:
      linear-gradient(
        180deg,
        rgba(26, 26, 46, 0.2) 0%,
        rgba(22, 33, 62, 0.3) 40%,
        rgba(15, 52, 96, 0.4) 70%,
        rgba(233, 69, 96, 0.5) 100%
      ),
      url('/pictures/home.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    
    /* Style de base */
    color: #ffffff !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    text-align: center !important;
    overflow: visible !important;
    
    /* Reset des transforms et animations */
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  
  /* DESTRUCTION TOTALE des éléments d'animation - DÉSACTIVÉ pour afficher les images de fond */
  /* body.menuiserie .slide.xl-10 .xl-10-animation-container,
  body.menuiserie .slide.xl-10 .xl-10-parallax-container,
  body.menuiserie .slide.xl-10 .xl-10-back,
  body.menuiserie .slide.xl-10 .xl-10-front,
  body.menuiserie .slide.xl-10 .xl-10-title,
  body.menuiserie .slide.xl-10 .xl-10-birds,
  body.menuiserie .slide.xl-10 .xl-10-parallax {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
  } */
  
  /* TITRE PRINCIPAL - RECONSTRUCTION TOTALE */
  body.menuiserie .slide.xl-10 h2,
  body.menuiserie .slide.xl-10 .xl-10-small-living {
    /* Reset brutal */
    all: initial !important;
    
    /* Reconstruction */
    display: block !important;
    position: relative !important;
    z-index: 1000 !important;
    
    /* Dimensions */
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 0 32px 0 !important;
    padding: 0 10px !important;
    
    /* Typographie */
    font-family: 'TASA Explorer', Georgia, serif !important;
    font-size: clamp(26px, 7vw, 36px) !important;
    font-weight: 300 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
    
    /* Style */
    color: #ffffff !important;
    text-align: center !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
    
    /* Reset tout */
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  
  /* SOUS-TITRE - RECONSTRUCTION TOTALE */
  body.menuiserie .slide.xl-10 h1,
  body.menuiserie .slide.xl-10 .xl-10-introducing {
    /* Reset brutal */
    all: initial !important;
    
    /* Reconstruction */
    display: block !important;
    position: relative !important;
    z-index: 1000 !important;
    
    /* Dimensions */
    width: 100% !important;
    max-width: 380px !important;
    margin: 0 0 40px 0 !important;
    padding: 0 10px !important;
    
    /* Typographie */
    font-family: 'TASA Explorer', Georgia, serif !important;
    font-size: clamp(17px, 4.2vw, 21px) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    
    /* Style */
    color: #f0f0f0 !important;
    text-align: center !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.3) !important;
    
    /* Reset tout */
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  
  /* BOUTON CTA - RECONSTRUCTION TOTALE */
  body.menuiserie .slide.xl-10 a,
  body.menuiserie .slide.xl-10 h1 a,
  body.menuiserie .slide.xl-10 .xl-10-introducing a {
    /* Reset brutal */
    all: initial !important;
    
    /* Reconstruction */
    display: inline-flex !important;
    position: relative !important;
    z-index: 1000 !important;
    
    /* Layout */
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    
    /* Dimensions */
    margin: 24px auto 0 auto !important;
    padding: 16px 28px !important;
    min-height: 52px !important;
    min-width: 160px !important;
    
    /* Style */
    background: #ffffff !important;
    color: #1a1a2e !important;
    border: 2px solid #ffffff !important;
    border-radius: 12px !important;
    
    /* Typographie */
    font-family: 'TASA Explorer', Georgia, serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    text-align: center !important;
    
    /* Interactions */
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    
    /* Reset */
    transform: none !important;
    animation: none !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
  }
  
  /* HOVER du bouton */
  body.menuiserie .slide.xl-10 a:hover,
  body.menuiserie .slide.xl-10 h1 a:hover,
  body.menuiserie .slide.xl-10 .xl-10-introducing a:hover {
    background: #f8f8f8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2) !important;
  }
  
  /* ICÔNE SVG dans le bouton */
  body.menuiserie .slide.xl-10 a svg,
  body.menuiserie .slide.xl-10 h1 a svg,
  body.menuiserie .slide.xl-10 .xl-10-introducing a svg {
    width: 14px !important;
    height: 10px !important;
    fill: #1a1a2e !important;
    flex-shrink: 0 !important;
  }
  
  /* SPACER - suppression */
  body.menuiserie .slide.xl-10 .spacer-16,
  body.menuiserie .slide.xl-10 .mobile-hidden {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* BR - contrôle des retours à la ligne */
  body.menuiserie .slide.xl-10 br {
    content: " " !important;
    display: inline !important;
  }
  
  /* Reset complet de tous les autres éléments */
  body.menuiserie .slide.xl-10 * {
    box-sizing: border-box !important;
  }
  
  body.menuiserie .slide.xl-10 img:not(svg) {
    display: none !important;
  }

  /* Augmenter la lisibilité et réduire le morcellement des lignes */
  .backyard .slides .intro {
    display: block !important; /* neutralise la grille mobile par défaut */
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Stabiliser la largeur et le flux de texte de l'intro */
  .backyard .slides .intro-container {
    max-width: none !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;           /* centrage robuste des enfants */
    justify-items: center !important;   /* centre horizontalement */
    align-content: start !important;
    row-gap: 8px !important;
  }

  /* Forcer h1/h2 à occuper toute la largeur disponible et se centrer */
  .backyard .slides .intro-container h1,
  .backyard .slides .intro-container h2 {
    justify-self: stretch !important; /* occuper toute la largeur disponible */
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* H2 de l'intro: texte stable (pas de reflow agressif) */
  .backyard .slides .intro h2 {
    white-space: normal !important;
    font-family: 'TASA Explorer', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 500 !important;
    font-size: clamp(22px, 6.2vw, 28px) !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    margin: 0 auto 8px auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: auto !important;
    transform: none !important;
    justify-self: center !important;
  }

  /* S'assurer que les blocs titres occupent toute la largeur de la grille */
  .backyard .slides .intro h1,
  .backyard .slides .intro h2 {
    grid-column: 1 / -1 !important;
  }

  /* Réduire l'espace vertical entre le carrousel et sa description */
  .slide.intro-carousel-new .intro-carousel-container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .slide.intro-carousel-new .spacer-16 {
    height: 8px !important;
  }

  .slide.intro-carousel-new .intro-carousel-layout {
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  /* Supprimer le gap interne de 10px sous les images du carrousel */
  .intro-carousel-new img,
  .intro-carousel-new .infinite-slideshow-snapper {
    height: 100% !important;
  }

  /* Indicateurs de paging plus proches */
  .slide.intro-carousel-new .paging-indicator {
    margin-top: 8px !important;
  }

  /* ===== LOGOS "Ils nous font confiance :" — adaptation mobile ===== */
  .backyard .as-seen-in-container {
    grid-column: 1 / -1 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  .backyard .as-seen-in {
    display: block !important;
    width: 100% !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    white-space: normal !important;
    overflow: hidden !important;
    gap: 8px !important;
  }

  .backyard .as-seen-in .label {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .backyard .as-seen-in a {
    display: flex !important;
    flex-wrap: wrap !important;            /* autorise le retour à la ligne */
    align-items: center !important;
    justify-content: center !important;    /* centre les logos */
    gap: 10px 14px !important;            /* espace réduit et harmonisé */
    white-space: normal !important;
  }

  .backyard .as-seen-in a img {
    height: 14px !important;              /* taille maîtrisée des logos */
    max-height: 14px !important;
    width: auto !important;
    max-width: 28vw !important;           /* évite les dépassements */
    object-fit: contain !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* ===== "Des espaces sur mesure..." — OPTIMISATION MAXIMALE espace images/boutons ===== */
  
  /* Suppression complète de tous les espaces de réserve */
  .backyard.complete .slides .jealousy {
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Optimisation du container principal */
  .backyard .slides .jealousy {
    position: relative !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    /* Ratio plus compact pour moins d'espace vertical */
    aspect-ratio: 375/380 !important;
  }
  
  .backyard.complete .slides .jealousy {
    aspect-ratio: 375/380 !important;
  }
  
  /* Images optimisées pour meilleur cadrage */
  .backyard .slides .jealousy .images img {
    width: 115% !important;
    height: 115% !important;
    object-fit: cover !important;
    object-position: center 30% !important; /* Cadrage optimal */
    transform: none !important;
  }
  
  /* Container des images sans padding superflu */
  .backyard .slides .jealousy .images {
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  
  /* Colonne sans padding bas */
  .backyard .slides .jealousy .column {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    height: 100% !important;
  }
  
  /* Boutons repositionnés de manière optimale */
  .backyard .slides .jealousy ul {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: 12px !important; /* Plus proche des images */
    z-index: 10 !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    gap: 4px !important;
    background: rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Boutons individuels compacts */
  .backyard .slides .jealousy ul li {
    padding: 8px 12px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  
  /* Amélioration des états hover */
  .backyard .slides .jealousy ul li:hover {
    transform: scale(1.05) !important;
    transition: all 0.2s ease !important;
  }
  
  /* Suppression de tous les spacers dans la section */
  .backyard .slides .jealousy .spacer-16,
  .backyard .slides .jealousy .spacer-32,
  .backyard .slides .jealousy .m-spacer-16,
  .backyard .slides .jealousy .m-spacer-32 {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Réduire l'espace de fin sous le carrousel intérieur si besoin */
  .interior-carousel .m-spacer-72 { height: 32px !important; }

  /* ===== AVIS / TÉMOIGNAGES — adaptation mobile ===== */
  .testimonials-content {
    overflow: hidden !important; /* évite les débordements verticaux */
  }

  .testimonials-scroll {
    transform: translateY(0) !important; /* supprime le décalage vertical */
    padding: 8px 0 !important;
    min-height: 140px !important;
    max-height: 160px !important;
  }

  .testimonials-items {
    display: flex !important;                /* aligne les cartes côte à côte sans chevauchement */
    gap: 12px !important;
    align-items: stretch !important;
    height: auto !important;                /* hauteur auto, gérée par les cartes */
    padding: 12px 16px !important;          /* marges internes symétriques */
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;            /* défilement horizontal si nécessaire */
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .testimonials-item {
    position: static !important;            /* supprime le positionnement absolu */
    transform: none !important;             /* neutralise les transforms calculés */
    flex: 0 0 auto !important;              /* chaque carte garde sa largeur */
  }

  /* Ne jamais afficher la version complète sur mobile (ouverture en modal via JS) */
  .testimonials-item-full {
    display: none !important;
  }

  /* Carte compacte et lisible */
  .testimonials-item-preview {
    white-space: normal !important;             /* autorise les retours à la ligne */
    width: calc(100vw - 48px) !important;       /* carte à la largeur du viewport - padding/gaps */
    max-width: calc(100vw - 48px) !important;
    height: 140px !important;                   /* hauteur uniforme pour toutes les cartes */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;  /* texte en haut, détails en bas */
    padding: 12px 14px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    scroll-snap-align: center !important;
  }

  /* Corps du texte tronqué à 3 lignes avec ellipsis */
  .testimonials-item-preview .testimonials-item-body {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.35 !important;
    flex: 1 1 auto !important;
  }

  /* Ne pas afficher d'aperçu d'images dans les cartes d'avis */
  .testimonials-item-preview .testimonials-item-details-photos {
    display: none !important;
  }
  .testimonials-item-preview .testimonials-item-body p:has(img) {
    display: none !important;
  }
  /* Filet de sécurité: aucune image dans les avis en mode liste */
  #testimonials .testimonials-item-details-photos { display: none !important; }
  #testimonials .testimonials-item-body img { display: none !important; }
  #testimonials .testimonials-item-body p img { display: none !important; }

  /* Détails (avatar + nom) compacts */
  .testimonials-item-preview .testimonials-item-details {
    gap: 6px !important;
  }
  /* Masquer les photos de profil (avatars) sur mobile */
  .testimonials-item-avatar-image,
  #testimonials .testimonials-item-avatar-image {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Masquer les images intégrées éventuelles dans les previews */
  .testimonials-item-preview .testimonials-item-body img {
    display: none !important;
  }

  /* ===== FOOTER — centrage complet des éléments (mobile) ===== */
  .footer-nav { text-align: center !important; }
  .footer-nav .modern-grid { 
    display: block !important; 
    text-align: center !important; 
  }
  .footer-nav ul { 
    margin: 8px auto !important; 
    padding: 0 !important; 
    text-align: center !important; 
  }
  .footer-nav ul li, .footer-nav ul li a { 
    display: block !important; 
    text-align: center !important; 
  }
  .footer-contact { 
    align-items: center !important; 
  }
  .footer-contact button, 
  .footer-contact input[type="email"] { 
    width: auto !important; 
    max-width: 100% !important; 
    margin-left: auto !important; 
    margin-right: auto !important; 
  }
  .footer-legal { 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: center !important; 
    justify-content: center !important; 
    text-align: center !important; 
    padding-bottom: 16px !important; 
  }
  .footer-legal .column-9, 
  .footer-legal .m-column-6 { 
    width: 100% !important; 
    text-align: center !important; 
  }

  /* Alignement précis du bloc devis (2 lignes parfaitement à gauche) */
  .backyard .slides .intro .intro-cta {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 16px !important; /* garde la même marge droite que la section */
    box-sizing: border-box !important;
  }

  .backyard .slides .intro .intro-cta .not-in-ca {
    display: flex !important;
    flex-direction: column !important; /* force les 2 lignes */
    align-items: flex-start !important; /* aligne les deux lignes à gauche */
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .backyard .slides .intro .intro-cta .not-in-ca a {
    display: inline-flex !important; /* garde le texte et la flèche sur la même ligne */
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .backyard .slides .intro .intro-cta .not-in-ca a img {
    position: static !important; /* annule le left: 5px global */
    left: auto !important;
    margin-left: 6px !important; /* espacement naturel */
    flex: 0 0 auto !important;
    display: inline-block !important;
  }

  /* Supprimer animations/changements de couleur qui peuvent provoquer des sauts */
  .backyard .slides .intro h2 .part,
  .backyard .slides .intro h2 span[data-sentence] {
    transition: none !important;
  }

  /* Supprimer les retours forcés pour éviter trop de lignes */
  .backyard .slides .intro h2 br,
  .backyard .slides .intro h2 br.mobile { display: none !important; }

  /* Masquer les images décoratives dans la phrase "Ben Menuiserie : 20 ans ..." sur mobile */
  .backyard .slides .intro h2 .intro-elevation,
  .backyard .slides .intro h2 .intro-elevation img {
    display: none !important;
    visibility: hidden !important;
  }

  /* ===== PAGE RÉALISATIONS - GRILLE MOBILE OPTIMISÉE ===== */
  
  /* Container principal de la grille réalisations */
  .modern-grid.realisations-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  
  /* Cartes réalisations mobile - layout optimisé */
  .realisation-card {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 0 20px 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    color: inherit !important;
  }
  
  /* Image principale de la carte */
  .realisation-card-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/10 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  
  /* Caption au-dessus de l'image */
  .realisation-card-caption {
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Titre dans la caption */
  .realisation-card-caption h3 {
    margin: 0 0 6px 0 !important;
    font-family: 'TASA Explorer', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: #333 !important;
  }
  
  /* Sous-titre dans la caption */
  .realisation-card-caption p {
    margin: 0 !important;
    font-family: 'TASA Explorer', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #666 !important;
    opacity: 0.9 !important;
  }
  
  /* Hover effect pour les cartes */
  .realisation-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
    background: rgba(255, 255, 255, 0.95) !important;
  }
  
  /* Header de la page réalisations - mobile */
  .glass-panel {
    padding: 20px 24px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    margin: 0 20px !important;
  }
  
  /* Titre principal de la page */
  .glass-panel h1.type-60 {
    font-size: clamp(28px, 6vw, 36px) !important;
    margin-bottom: 12px !important;
  }
  
  /* Description sous le titre */
  .glass-panel p.type-18 {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }
  
  /* Espacement des sections */
  .slide[style*="padding: 120px 0 56px"] {
    padding: 80px 0 40px !important;
  }
  
  .slide[style*="padding: 12px 0 64px"] {
    padding: 20px 0 40px !important;
  }
  
  /* Grid responsive pour très petits écrans */
  @media (max-width: 480px) {
    .modern-grid.realisations-grid {
      padding: 0 16px !important;
      gap: 16px !important;
    }
    
    .realisation-card {
      margin: 0 0 16px 0 !important;
    }
    
    .glass-panel {
      margin: 0 16px !important;
      padding: 16px 20px !important;
    }
  }
}

/* ===== LANDSCAPE ET PETITS ÉCRANS ===== */

@media (max-width: 768px) and (orientation: landscape) {
  body.menuiserie .slide.xl-10 {
    min-height: calc(100vh - 50px) !important;
    padding: 40px 20px !important;
  }
  
  body.menuiserie .slide.xl-10 h2,
  body.menuiserie .slide.xl-10 .xl-10-small-living {
    font-size: clamp(22px, 6vw, 28px) !important;
    margin-bottom: 20px !important;
  }
  
  body.menuiserie .slide.xl-10 h1,
  body.menuiserie .slide.xl-10 .xl-10-introducing {
    font-size: clamp(15px, 3.8vw, 18px) !important;
    margin-bottom: 24px !important;
  }
}

@media (max-width: 480px) {
  body.menuiserie .slide.xl-10 {
    padding: 50px 15px !important;
  }
  
  body.menuiserie .slide.xl-10 h2,
  body.menuiserie .slide.xl-10 .xl-10-small-living {
    font-size: clamp(24px, 6.5vw, 30px) !important;
  }

/* ===== AFFICHAGE SIMPLIFIÉ DE L'IMAGE XL-10 SUR MOBILE ===== */
@media (max-width: 768px) {
  /* Cacher le titre et les éléments décoratifs */
  body.menuiserie .slide.xl-10 .xl-10-title,
  body.menuiserie .slide.xl-10 .xl-10-birds {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Afficher le conteneur d'animation */
  body.menuiserie .slide.xl-10 .xl-10-animation-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    margin: 20px 0 !important;
  }
  
  /* Premier conteneur parallax - afficher seulement celui-ci */
  body.menuiserie .slide.xl-10 .xl-10-parallax-container:first-of-type {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: 300px !important;
    left: auto !important;
    top: auto !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }
  
  /* Cacher le second conteneur parallax (xl-10-front) */
  body.menuiserie .slide.xl-10 .xl-10-parallax-container:last-of-type {
    display: none !important;
  }
  
  /* Afficher uniquement l'image de fond (xl-10-back) */
  body.menuiserie .slide.xl-10 .xl-10-back {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }
  
  /* Cacher l'image de premier plan */
  body.menuiserie .slide.xl-10 .xl-10-front {
    display: none !important;
  }
}