/* ===== WORLDXPAT - CORRECTIFS MOBILE UNIQUEMENT ===== */
/* Ce fichier gère UNIQUEMENT la version mobile (≤768px) */
/* La version desktop (≥769px) n'est JAMAIS modifiée */

/* === HEADER MOBILE — ALIGNEMENT + CLIC === */
@media (max-width: 768px) {
  /* 1. Structure du header - FORCER l'alignement */
  header.navbar,
  header.navbar .container,
  header.navbar nav {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    justify-content: space-between !important;
  }
  
  /* 2. Logo à gauche - FORCER la position */
  header.navbar .logo,
  .navbar .logo,
  .brand {
    margin-right: auto !important;
    order: 1 !important;
    flex-shrink: 0 !important;
  }
  
  /* 3. Cacher menu desktop et sélecteur de langue - FORCER le masquage */
  .navbar .nav-links,
  .navbar .lang-switcher,
  .nav-links,
  .lang-switcher {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* 4. Bouton hamburger visible et cliquable à droite - FORCER la position */
  #mobile-menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    order: 999 !important;
    width: 44px !important;
    height: 44px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1000 !important;
    position: relative !important;
    flex-shrink: 0 !important;
  }
  
  #mobile-menu-btn i,
  #mobile-menu-btn svg {
    display: block !important;
    line-height: 1 !important;
    font-size: 1.25rem !important;
  }
  
  /* 5. Header plus petit en mobile */
  header.navbar nav {
    padding: 0.5rem 1rem !important;
  }
  
  /* 6. Ajuster l'espacement du contenu */
  #accueil {
    padding-top: 5rem !important;
  }
  
  /* 7. Empêcher le débordement horizontal */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  /* 8. Supprimer tout espace du wrapper flex */
  header.navbar .flex.items-center.justify-between {
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
    width: 100% !important;
    justify-content: space-between !important;
  }
  
  /* 9. FORCER la suppression de toute règle contradictoire */
  header.navbar *,
  .navbar * {
    order: unset !important;
  }
  
  /* 10. Règle ultime pour le hamburger */
  #mobile-menu-btn {
    order: 999 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    right: 0 !important;
    position: relative !important;
  }
}

/* === MENU MOBILE UNIFIÉ === */
@media (max-width: 768px) {
  /* 1. Overlay du menu mobile */
  #wxp-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 9998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
  }
  
  body.wxp-menu-open #wxp-menu-overlay {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* 2. Drawer du menu mobile */
  #wxp-mobile-menu {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    height: 100vh !important;
    width: 85vw !important;
    max-width: 320px !important;
    background: #fff !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
  }
  
  body.wxp-menu-open #wxp-mobile-menu {
    transform: translateX(0) !important;
  }
  
  /* 3. Header du menu mobile */
  #wxp-mobile-menu .menu-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #f9fafb !important;
  }
  
  #wxp-mobile-menu .menu-title {
    font-weight: 800 !important;
    font-size: 1.125rem !important;
    color: #111827 !important;
  }
  
  #wxp-mobile-menu .menu-close {
    font-size: 1.25rem !important;
    line-height: 1 !important;
    border: none !important;
    background: transparent !important;
    padding: 0.5rem !important;
    cursor: pointer !important;
    color: #6b7280 !important;
    border-radius: 0.375rem !important;
    transition: all 0.2s ease !important;
  }
  
  #wxp-mobile-menu .menu-close:hover {
    background: #e5e7eb !important;
    color: #374151 !important;
  }
  
  /* 4. Section sélecteur de langue */
  #wxp-mobile-menu .lang-section {
    padding: 1rem !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #f9fafb !important;
  }
  
  #wxp-mobile-menu .lang-title {
    margin-bottom: 0.75rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    font-size: 0.875rem !important;
  }
  
  #wxp-mobile-menu .lang-buttons {
    display: flex !important;
    gap: 0.5rem !important;
  }
  
  #wxp-mobile-menu .lang-btn {
    padding: 0.5rem 1rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    background: #fff !important;
    color: #374151 !important;
    font-size: 0.875rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex: 1 !important;
    text-align: center !important;
  }
  
  #wxp-mobile-menu .lang-btn:hover {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
  }
  
  #wxp-mobile-menu .lang-btn.active {
    background: #3b82f6 !important;
    color: #fff !important;
    border-color: #3b82f6 !important;
  }
  
  /* 5. Navigation du menu mobile */
  #wxp-mobile-menu .menu-nav {
    padding: 0.75rem !important;
  }
  
  #wxp-mobile-menu .menu-nav ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  #wxp-mobile-menu .menu-nav li {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  #wxp-mobile-menu .menu-nav a {
    display: block !important;
    padding: 0.875rem 1rem !important;
    border-radius: 0.5rem !important;
    color: #1f2937 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
  }
  
  #wxp-mobile-menu .menu-nav a:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
  }
  
  /* 6. Verrouillage du scroll quand le menu est ouvert */
  body.wxp-menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
}

/* === CARROUSEL MOBILE — IMAGES EN PLEIN BLOC === */
@media (max-width: 768px) {
  /* 1. Retirer tous les fonds et bandes grises */
  .carousel-card,
  .carousel-slide,
  .carousel-wrapper,
  #worldxpat-carousel {
    background: transparent !important;
  }
  
  .carousel-slide::after,
  .carousel-card::after,
  .carousel-footer,
  .carousel-bottom,
  .carousel-gradient,
  .carousel-shadow,
  .slide-footer,
  .slide-meta {
    display: none !important;
    content: none !important;
    background: transparent !important;
  }
  
  /* 2. Images en plein bloc avec coins arrondis */
  #worldxpat-carousel img,
  .carousel-slide img,
  .carousel-image img {
    width: 100% !important;
    height: 200px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
  }
  
  .carousel-image,
  .carousel-slide [style*="background-image"] {
    width: 100% !important;
    height: 200px !important;
    border-radius: 12px !important;
    background-size: cover !important;
    background-position: center !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }
  
  /* 3. Cacher TOUS les éléments de navigation du carrousel */
  #carousel-prev,
  #carousel-next,
  .carousel-dots,
  .carousel-indicators,
  .carousel-indicator {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* 4. Supprimer TOUS les espaces autour du carrousel */
  #worldxpat-carousel {
    height: 100% !important;
    min-height: 220px !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }
  
  #worldxpat-carousel .carousel-slide,
  .carousel-slide {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  #worldxpat-carousel img,
  .carousel-slide img,
  .carousel-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }
  
  .carousel-image,
  .carousel-slide [style*="background-image"] {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }
  
  .carousel-wrapper,
  .carousel-container,
  .carousel-card {
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    gap: 0 !important;
  }
  
  /* 5. Cibler tous les conteneurs parents pour supprimer les espaces */
  #a-propos .container,
  #a-propos .max-w-6xl,
  #a-propos .relative,
  #a-propos .rounded-2xl,
  #a-propos .overflow-hidden,
  #a-propos .shadow-2xl {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }
  
  /* 6. Forcer le carrousel à prendre tout l'espace disponible */
  #a-propos .relative.rounded-2xl.overflow-hidden.shadow-2xl {
    height: 220px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* 7. Supprimer TOUS les espaces possibles SAUF pour le titre */
  #a-propos *:not(.text-center.mb-16):not(.text-center.mb-8) {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  
  /* 8. Forcer la section à-propos sans espaces */
  #a-propos {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* 9. RÈGLE SPÉCIFIQUE ET FORCÉE pour le titre "Pourquoi Worldxpat ?" */
  #a-propos h2.text-3xl.md\\:text-4xl.font-bold.text-gray-900.mb-8.text-center {
    margin-bottom: 2rem !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    margin-top: 2rem !important;
  }
  
  /* 10. RÈGLE ALTERNATIVE si la première ne fonctionne pas */
  #a-propos h2[data-i18n="why.title"] {
    margin-bottom: 2rem !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    margin-top: 2rem !important;
  }
  
  /* 11. Espacement du conteneur du carrousel */
  #a-propos .mb-16 + div .relative.rounded-2xl.overflow-hidden.shadow-2xl {
    margin-top: 2rem !important;
  }
}

/* === PHOTOS DE PROFIL — CERCLES PARFAITS === */
@media (max-width: 768px) {
  .profile-image,
  .team-member img,
  .founder-image,
  .founder-profile img,
  .team-member,
  .founder,
  .profile,
  .member-photo {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center top !important;
    margin: 0 auto !important;
    display: block !important;
  }
  
  /* Team section: ensure perfect circles on mobile */
  #about-us img.rounded-full {
    width: 160px !important;
    height: 160px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
}

/* === BOUTONS DE COMMUNAUTÉ — CERCLES === */
@media (max-width: 768px) {
  .community-link,
  .community-link span {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    text-decoration: none !important;
  }
  
  .community-link span:first-child {
    font-size: 2rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .community-link span:last-child {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }
  
  /* Icônes des services en forme de rond */
  .w-16.h-16.bg-blue-100,
  .w-16.h-16.bg-purple-100,
  .w-16.h-16.bg-green-100 {
    border-radius: 50% !important;
    width: 80px !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 1rem !important;
  }
  
  /* Espacement des cartes de services */
  .grid.md\\:grid-cols-3.gap-8.mt-12 {
    gap: 1.5rem !important;
    margin-top: 2rem !important;
  }
}

/* === FOOTER MOBILE — COLONNES CENTRÉES === */
@media (max-width: 768px) {
  footer > div > div {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2rem !important;
  }
  
  footer [style*="text-align: right;"] {
    text-align: center !important;
    align-items: center !important;
  }
  
  footer [style*="max-width: 320px;"] {
    max-width: 100% !important;
    text-align: center !important;
  }
  
  footer a,
  footer p,
  footer h3 {
    text-align: center !important;
  }
  
  /* Centrer le logo Worldxpat avec son texte en mobile */
  footer .flex.items-center.gap-4 {
    justify-content: center !important;
    text-align: center !important;
  }
  
  footer .flex.items-center.gap-4 > div {
    text-align: center !important;
  }
  
  /* Centrer spécifiquement la section contact en mobile */
  footer .text-center.mb-8 {
    text-align: center !important;
  }
  
  /* Centrer le titre "Contact" et son contenu */
  footer h3[data-i18n="footer.contact.title"],
  footer h3:contains("Contact") {
    text-align: center !important;
  }
  
  /* Centrer la colonne centrale (contact) */
  footer > div > div > div:nth-child(2) {
    text-align: center !important;
    align-items: center !important;
  }
  
  /* Centrer tous les éléments de la section contact */
  footer .text-center {
    text-align: center !important;
  }
  
  /* FORCER le centrage du logo Worldxpat dans la section contact */
  footer .flex.items-center.gap-4 {
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  
  /* Centrer le conteneur du logo et texte */
  footer .flex.items-center.gap-4 > div {
    text-align: center !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Centrer le logo et le texte individuellement */
  footer .flex.items-center.gap-4 .w-9.h-9,
  footer .flex.items-center.gap-4 .text-white {
    margin: 0 auto !important;
    text-align: center !important;
  }
  
  /* Centrer la tagline sous le logo */
  footer .text-gray-400 {
    text-align: center !important;
    margin: 0 auto !important;
  }
  
  /* RÈGLES ULTRA-FORCÉES pour centrer le logo Worldxpat */
  footer div[style*="display: flex; flex-direction: column; gap: 1.5rem; flex: 1;"] {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Cibler directement la première colonne (logo + tagline) */
  footer > div > div > div:first-child {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
  
  /* Forcer le centrage de tous les éléments flex dans la première colonne */
  footer > div > div > div:first-child .flex {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  /* Centrer spécifiquement le logo et le texte Worldxpat */
  footer > div > div > div:first-child .flex.items-center.gap-4 {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  
  /* Centrer le conteneur du logo */
  footer > div > div > div:first-child .flex.items-center.gap-4 > div {
    text-align: center !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
}