/**
 * Junspro — renforts responsive mobile & tablette
 * Chargé après responsive.css pour éviter débordements et améliorer le confort tactile.
 */

/* Base : éviter zoom font iOS, pas de scroll horizontal parasite */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
}

/* Dashboard freelance : jamais plus large que l'écran */
@media (max-width: 1023.98px) {
  .freelance-dashboard-wrapper {
    padding-left: max(0.5rem, env(safe-area-inset-left));
    padding-right: max(0.5rem, env(safe-area-inset-right));
  }

  .freelance-dashboard-container {
    max-width: 100%;
    box-sizing: border-box;
  }
}

.main-wrapper {
  overflow-x: clip;
  max-width: 100vw;
}

img,
video,
iframe,
svg {
  max-width: 100%;
  height: auto;
}

/* Tableaux & formulaires larges */
.table-responsive,
.premium-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Bootstrap / grilles : pas de min-width qui force le scroll sur petits écrans */
@media (max-width: 991.98px) {
  .container,
  .container-fluid {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  .row {
    margin-left: -8px;
    margin-right: -8px;
  }

  .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* En-tête & zones pleine largeur */
@media (max-width: 1199.98px) {
  .header-area .container,
  .header-area .container-fluid {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
}

/* Footer lisible sur téléphone */
@media (max-width: 767.98px) {
  .footer-area .widget,
  .footer-area .footer-widget {
    text-align: center;
  }
}

/* Cibles tactiles confortables (liens / boutons dans le contenu) */
@media (max-width: 991.98px) and (pointer: coarse) {
  .btn:not(.btn-sm),
  .nav-link,
  a.btn-premium {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Zone encoche : nav freelance seulement (évite de rétrécir tout le body) */
@supports (padding: env(safe-area-inset-bottom)) {
  .freelance-dashboard-nav {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Home index-v3 : hero pleine largeur sans scroll horizontal (grille Bootstrap) */
@media (max-width: 991.98px) {
  .hero-modern {
    overflow-x: clip;
    max-width: 100%;
  }

  .hero-modern .container {
    max-width: 100%;
  }

  .hero-modern .row {
    --bs-gutter-x: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .hero-modern .row > [class*="col"] {
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
    max-width: 100%;
  }
}

/* ================================================================
   PREMIUM MOBILE & TABLETTE — Navbar identique PC (sans hamburger)
   Couvre jusqu'à 1199.98px car style.css montre .main-responsive-nav
   jusqu'à @media (max-width: 1199.98px)
   ================================================================ */
@media (max-width: 1199.98px) {
  /* Cacher définitivement le drawer mobile et la barre hamburger */
  .header-area .main-responsive-nav,
  .header-area .main-responsive-nav .menu-toggler {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 1199.98px) {
  /* Afficher la navbar PC (masquée par style.css jusqu'à 1200px) */
  .header-area .main-navbar {
    display: block !important;
    overflow: visible !important;
  }
}

@media (max-width: 991.98px) {
  /* Glassmorphisme premium sur mobile */
  .header-area .main-navbar {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(24px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.08) !important;
    box-shadow: 0 2px 20px rgba(76, 29, 149, 0.07) !important;
  }

  /* Cadre plus haut — respiration premium */
  .header-area .main-navbar .container-fluid,
  .header-area .main-navbar .navbar {
    min-height: 72px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    overflow: visible !important;
  }

  /* JUNSPRO — gradient marque premium sur fond blanc */
  .header-area .junspro-logo-text {
    font-size: 28px !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 60%, #5b21b6 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }

  /* Icône infinity — alignée avec JUNSPRO, légèrement agrandie */
  .header-area .junspro-logo-icon {
    height: 46px !important;
    width: auto !important;
    transform: none !important;
    filter: drop-shadow(0 4px 10px rgba(124, 58, 237, 0.25)) !important;
    position: relative !important;
    z-index: 2 !important;
    vertical-align: middle !important;
  }

  /* Masquer la barre décorative (logo-line) sur mobile */
  .header-area .junspro-logo-line {
    display: none !important;
  }

  /* Aligner logo + texte sur la même ligne */
  .header-area .junspro-logo-top {
    align-items: center !important;
    overflow: visible !important;
    gap: 8px !important;
  }
}

/* Tablette & mobile (768px–991px) : nav compacte identique Image 3 */
@media (max-width: 991.98px) {
  /* Cacher les liens de navigation — garder seulement logo + more-option */
  .header-area .main-navbar .navbar-collapse {
    display: none !important;
  }
  /* Navbar en flex row : logo à gauche, more-option à droite */
  .header-area .main-navbar .navbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  /* More-option sur une seule ligne sans retour */
  .header-area .main-navbar .more-option {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
  }
}

/* ================================================================
   PREMIUM MOBILE — Sections & Typographie
   max-width 767.98px
   ================================================================ */
@media (max-width: 767.98px) {

  /* Titres de section */
  .section-title-modern {
    font-size: clamp(1.5rem, 5.5vw, 1.9rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
  }

  /* Padding vertical uniforme pour toutes les sections */
  .featured-services-section,
  .top-freelancers-section,
  .blog-section-modern,
  .pause-souffle-section,
  .testimonials-section,
  .stats-section {
    padding-top:    3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  /* Blog cards : défilables horizontalement, visibles à ~80vw */
  .blog-card-premium {
    flex: 0 0 82vw !important;
    min-width: 82vw !important;
  }

  /* Cartes de service : pleine largeur, pas de texte débordant */
  .featured-service-card,
  .service-card-premium {
    border-radius: 20px !important;
  }

  .featured-service-title {
    font-size: 1rem !important;
    line-height: 1.45 !important;
  }

  /* Catégories nav : défilable horizontal */
  .categories-nav-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 6px !important;
    scrollbar-width: none !important;
  }

  .categories-nav-wrapper::-webkit-scrollbar { display: none !important; }

  .category-nav-link {
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
    font-size: 0.85rem !important;
    padding: 7px 14px !important;
  }

  /* CTA section rounded (moins de padding sur mobile) */
  .cta-section-modern {
    border-radius: 24px !important;
    padding: 56px 24px !important;
  }

  /* Footer : colonnes centrées */
  .footer-area .widget,
  .footer-area .footer-widget {
    text-align: left !important;
  }

  /* Freelances du mois : flèches overlay sur mobile */
  #fl-prev-btn {
    display: flex !important;
    left: 4px !important;
  }
  #fl-next-btn {
    display: flex !important;
    right: 4px !important;
  }

  /* Header mobile : éléments sous le logo */
  .main-navbar .navbar.navbar-expand-lg {
    flex-wrap: wrap !important;
    row-gap: 6px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .main-navbar .navbar-brand.junspro-logo-brand {
    width: 100% !important;
    justify-content: flex-start;
    margin-bottom: 0 !important;
  }
  .main-navbar .more-option.mobile-item {
    width: 100% !important;
    justify-content: flex-start;
    padding-left: 2px;
  }

  /* Nos Univers : flèches overlay sur mobile */
  .univers-carousel-row {
    position: relative;
  }
  .univers-arrow-btn {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5;
    width: 36px !important;
    height: 36px !important;
    background: rgba(255,255,255,0.92) !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: #374151 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important;
  }
  .univers-carousel-row > button:first-child { left: 6px !important; }
  .univers-carousel-row > button:last-child  { right: 6px !important; }

  /* Nos Rituels en Vedette : 1 carte propre + flèches overlay sur mobile */
  .rituals-carousel-section .rituals-carousel-row {
    position: relative;
    overflow: hidden !important;
    padding-right: 0 !important;
  }
  .rituals-carousel-section .rituals-viewport {
    overflow: hidden !important;
  }
  .rituals-carousel-section .rituals-arrow-btn {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5;
    width: 36px !important;
    height: 36px !important;
    background: rgba(255,255,255,0.92) !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: #374151 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important;
  }
  .rituals-carousel-section .rituals-carousel-row > button:first-child {
    left: 6px !important;
  }
  .rituals-carousel-section .rituals-carousel-row > button:last-child {
    right: 6px !important;
  }
}