/* ==========================================================================
   UNIFICATION DES BREAKPOINTS MOBILE
   Correction et standardisation de tous les breakpoints
   ========================================================================== */

/* ===== BREAKPOINTS STANDARDS ===== */
/*
   Mobile: max-width: 768px
   Tablet: 769px - 1024px  
   Desktop: min-width: 1025px
*/

/* ===== RESET DES CONFLITS DE BREAKPOINTS ===== */

/* Annulation des anciens breakpoints incohérents */
@media screen and (width <= 950px) and (orientation: portrait) {
  /* Reset des règles obsolètes */
  .grid .row,
  .grid .column,
  .grid h1, .grid h2, .grid h3, .grid h6 {
    all: unset !important;
  }
}

@media screen and (width <= 950px) and (orientation: landscape) {
  /* Reset des règles obsolètes */
  .grid h1 {
    all: unset !important;
  }
}

/* ===== NOUVEAU SYSTÈME MOBILE UNIFIÉ ===== */

@media (max-width: 768px) {
  /* Grid system mobile unifié */
  .grid .row {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
    margin-bottom: 20px !important;
    gap: 16px !important;
  }
  
  .grid .column {
    flex: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }
  
  /* Typographie mobile unifiée */
  .grid h1 {
    font-family: 'TASA Explorer', sans-serif !important;
    font-size: clamp(32px, 8vw, 48px) !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;
    padding: 20px !important;
    margin: 0 !important;
    text-align: center !important;
    font-weight: 400 !important;
  }
  
  .grid h2 {
    font-family: 'TASA Explorer', sans-serif !important;
    font-size: clamp(24px, 6vw, 36px) !important;
    line-height: 1.2 !important;
    padding: 0 20px 16px 20px !important;
    margin: 0 !important;
    text-align: center !important;
    font-weight: 400 !important;
  }
  
  .grid h3 {
    font-family: 'TASA Explorer', sans-serif !important;
    font-size: clamp(20px, 5vw, 28px) !important;
    line-height: 1.3 !important;
    padding: 0 20px 12px 20px !important;
    margin: 0 !important;
    margin-top: 0 !important;
    font-weight: 400 !important;
  }
  
  .grid h6 {
    font-family: 'TASA Explorer', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    padding: 0 20px 8px 20px !important;
    margin: 0 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
  }
  
  .grid p {
    font-family: 'TASA Explorer', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    padding: 0 20px !important;
    margin: 0 0 16px 0 !important;
    text-align: left !important;
  }
}

/* ===== CORRECTIONS POUR LES SECTIONS SPÉCIALISÉES ===== */

@media (max-width: 768px) {
  /* Above fold section standardisée */
  .row.above-fold {
    height: auto !important;
    min-height: calc(100vh - 60px) !important;
    margin-bottom: 0 !important;
    padding: 40px 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .row.above-fold .column {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 20px !important;
  }
  
  /* Bottom aligned sections */
  .row.bottom {
    align-items: center !important;
  }
}

/* ===== MODERN GRID SYSTEM OVERRIDE ===== */

@media (max-width: 768px) {
  /* Modern grid devient mobile-first */
  .modern-grid {
    display: block !important;
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }
  
  .modern-grid > [class*="column-"] {
    width: 100% !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    display: block !important;
  }
  
  .modern-grid > [class*="column-"]:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Colonnes spécifiques */
  .column-1, .column-2, .column-3, .column-4, .column-5, 
  .column-6, .column-7, .column-8, .column-9, .column-10,
  .column-11, .column-12 {
    width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
  }
  
  /* Classes large screen deviennent mobile */
  .l-column-2, .l-column-4, .l-column-6, .l-column-8 {
    width: 100% !important;
    margin: 0 0 16px 0 !important;
  }
}

/* ===== CORRECTIONS DES CLASSES DE TAILLE ===== */

@media (max-width: 768px) {
  /* Type sizes mobiles standardisées */
  .type-60 { font-size: clamp(32px, 8vw, 48px) !important; }
  .type-40 { font-size: clamp(24px, 6vw, 36px) !important; }
  .type-36 { font-size: clamp(20px, 5vw, 28px) !important; }
  .type-32 { font-size: clamp(18px, 4.5vw, 24px) !important; }
  .type-18 { font-size: 16px !important; }
  
  /* Mobile type sizes */
  .m-type-36 { font-size: clamp(20px, 5vw, 28px) !important; }
  .m-type-32 { font-size: clamp(18px, 4.5vw, 24px) !important; }
  
  /* Spacer classes mobiles */
  .spacer-50 { height: 30px !important; }
  .spacer-32 { height: 20px !important; }
  .spacer-16 { height: 12px !important; }
  
  .m-spacer-32 { height: 20px !important; }
}

/* ===== CORRECTIONS POUR LES SLIDES ===== */

@media (max-width: 768px) {
  /* Slide system mobile */
  .slide {
    padding: 40px 20px !important;
    min-height: auto !important;
    box-sizing: border-box !important;
  }
  
  .slide.xl-10 {
    padding: 40px 20px !important;
    min-height: calc(100vh - 60px) !important;
  }
  
  /* Classes spécifiques aux slides */
  .xl-10-small-living,
  .xl-10-introducing {
    text-align: center !important;
    margin: 20px 0 !important;
    padding: 0 !important;
  }
  
  .xl-10-small-living {
    font-size: clamp(24px, 6vw, 32px) !important;
    line-height: 1.2 !important;
  }
  
  .xl-10-introducing {
    font-size: clamp(18px, 4vw, 22px) !important;
    line-height: 1.4 !important;
  }
}

/* ===== FOOTER RESPONSIVE UNIFIÉ ===== */

@media (max-width: 768px) {
  .footer-nav {
    margin-top: 60px !important;
    padding: 40px 20px !important;
  }
  
  .footer-nav .modern-grid {
    display: block !important;
    text-align: center !important;
  }
  
  .footer-nav .footer-legal {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
  }
  
  /* Centrage horizontal des listes et liens */
  .footer-nav ul {
    margin: 8px auto !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: center !important;
  }
  .footer-nav ul li,
  .footer-nav ul li a {
    display: block !important;
    text-align: center !important;
  }
  
  /* Bloc contact centré */
  .footer-contact {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 12px !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-nav .footer-social-inline {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 16px !important;
    margin: 16px 0 !important;
  }
}

/* ===== BOUTONS ET INTERACTIONS STANDARDISÉS ===== */

@media (max-width: 768px) {
  /* Boutons tactiles standardisés */
  button, .button, [role="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
  }
  
  /* Liens tactiles */
  a {
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    padding: 4px 8px !important;
  }
  
  /* Liens dans la navigation */
  nav a {
    min-height: 44px !important;
    padding: 8px 12px !important;
  }
}

/* ===== CORRECTIONS POUR LES UTILITAIRES ===== */

@media (max-width: 768px) {
  /* Classes d'espacement mobile */
  .mobile-hidden { display: none !important; }
  .mobile-visible { display: block !important; }
  .mobile-center { text-align: center !important; }
  
  /* Corrections pour les débordements */
  .container, .wrapper, .content {
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
}

/* ===== TABLET RESPONSIVE (769px - 1024px) ===== */

@media (min-width: 769px) and (max-width: 1024px) {
  .grid .column {
    padding: 0 30px !important;
  }
  
  .grid h1 {
    font-size: clamp(48px, 6vw, 60px) !important;
  }
  
  .grid h2 {
    font-size: clamp(36px, 5vw, 48px) !important;
  }
  
  .modern-grid {
    padding: 0 30px !important;
  }
}

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

@media (max-width: 768px) and (orientation: landscape) {
  /* Ajustements spécifiques au landscape sur mobile */
  .row.above-fold {
    min-height: calc(100vh - 50px) !important;
    padding: 20px 0 !important;
  }
  
  .grid h1 {
    font-size: clamp(28px, 6vw, 36px) !important;
  }
  
  .grid h2 {
    font-size: clamp(20px, 4vw, 28px) !important;
  }
}

/* ===== PERFORMANCE ET OPTIMISATIONS ===== */

@media (max-width: 768px) {
  /* Réduction des animations pour les performances */
  *, *::before, *::after {
    animation-duration: 0.2s !important;
    transition-duration: 0.2s !important;
  }
  
  /* Optimisation du rendu */
  .slide, .page, .grid {
    will-change: auto !important;
    transform: translateZ(0) !important;
  }
}