/* ============================================================
   SoTransact — Mobile Responsive CSS
   Auteur : Antigravity — 24/03/2026
   Chargé après styles.css pour surcharger le desktop-first
   ============================================================ */

/* ----------------------------------------------------------
   VARIABLES & RESET TACTILE
   ---------------------------------------------------------- */
:root {
  --mobile-bottom-nav-height: 58px;
  --mobile-tap-size: 44px;
  --site-header-h: 92px; /* logo 79px + padding bandeau #heading */
}

/* Évite le zoom automatique sur focus input (iOS) — scoped mobile */
@media (max-width: 991.98px) {
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Tap targets : exclure bottom nav / icônes compactes */
  a:not(.mobile-bottom-nav a):not(.change-view-btn):not(.ag-carousel-nav):not(.ag-favoris-btn),
  button:not(.btn-close):not(.ag-carousel-nav):not(.ag-indicator):not(.ag-favoris-btn),
  .btn, .nav-link, .dropdown-item {
    touch-action: manipulation;
    min-height: var(--mobile-tap-size);
  }
}

/* ----------------------------------------------------------
   BOTTOM NAVIGATION BAR
   ---------------------------------------------------------- */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #fff;
  border-top: 1px solid #e0e0e0;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
  z-index: 1050;
}

.mobile-bottom-nav ul {
  display: flex;
  height: var(--mobile-bottom-nav-height);
  margin: 0;
  padding: 0 2px;
  list-style: none;
  align-items: stretch;
  width: 100%;
}

.mobile-bottom-nav ul li {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.mobile-bottom-nav ul li a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: #666;
  font-size: 9px;
  line-height: 1.1;
  text-decoration: none;
  gap: 2px;
  min-height: 0 !important;
  padding: 4px 2px 2px;
  box-sizing: border-box;
}

.mobile-bottom-nav ul li a span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 1px;
}

.mobile-bottom-nav ul li a i {
  font-size: 18px;
  line-height: 1;
}

.mobile-bottom-nav ul li a:hover,
.mobile-bottom-nav ul li a.active {
  color: #18ba60;
}

.mobile-bottom-nav ul li.nav-center {
  flex: 0 0 56px;
}

.mobile-bottom-nav ul li.nav-center a {
  color: #fff !important;
  background: #18ba60;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  margin: -8px auto 0;
  box-shadow: 0 4px 12px rgba(24, 186, 96, 0.4);
  gap: 0;
  padding: 0;
}

.mobile-bottom-nav ul li.nav-center a span {
  display: none; /* icône seule — évite chevauchement labels */
}

.mobile-bottom-nav ul li.nav-center a i {
  font-size: 22px;
}

/* Espace en bas pour ne pas cacher le contenu derrière la bottom nav */
body {
  padding-bottom: 0;
}

/* ----------------------------------------------------------
   HEADER — MOBILE
   ---------------------------------------------------------- */
@media (max-width: 991px) {
  .header-bottom.sticky-header {
    padding: 8px 12px !important;
    min-height: 77px; /* −10 % vs 85px */
  }

  .header-bottom .logo img {
    height: 68px; /* −10 % vs 75px */
    max-width: 122px; /* −10 % vs 136px */
    max-height: none;
  }

  /* Cacher le menu hamburger quand bottom nav est visible */
  .button-menu.d-lg-none {
    display: none !important;
  }

  /* Activer la bottom nav */
  .mobile-bottom-nav {
    display: flex;
  }

  body.has-bottom-nav {
    padding-bottom: var(--mobile-bottom-nav-height);
  }

  /* Sélecteur de pays + langue (header droite) */
  .header-locale {
    margin-left: auto;
  }

  #paysisouser {
    width: 80px !important;
    font-size: 13px !important;
  }

  #languecourantesite .btn {
    padding: 2px 4px;
    font-size: 13px;
  }

  #languecourantesiteflag {
    width: 22px;
  }

  /* En-tête : Séjours & Vacances centré */
  .header-center {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
    align-self: center !important;
    text-align: center;
  }
  .header-sejours-vacances {
    font-size: 0.78rem !important;
    padding: 4px 10px !important;
    align-self: center !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
}

/* ----------------------------------------------------------
   ACCUEIL — HOME PAGE (classes réelles)
   ---------------------------------------------------------- */
@media (max-width: 991px) {
  html, body {
    max-width: 100%;
    overflow-x: clip;
  }
}

@media (max-width: 768px) {
  /* Hero : section principale avec le slider et la barre de recherche */
  section.listing.blog.details.sectSwip {
    padding: 0 !important;
    min-height: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
  }

  /* Accueil mobile : 3px STRICTS aux bords — le détail est dans home-accueil-laptop-typo.css (chargé après) */
  body.site-accueil {
    --mobile-edge: 3px;
  }
  body.site-accueil section.listing.blog.details.sectSwip {
    padding-left: 3px !important;
    padding-right: 3px !important;
    box-sizing: border-box !important;
  }

  /* Barre de recherche — home : 100% du parent déjà inset de 3px */
  body.site-accueil .search-box {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
    border-radius: 12px !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  /* Pages internes : 5px EXACTS entre header et barre filtre (pas de translate négatif) */
  body.inner-pages:not(.site-accueil) .search-box,
  body:not(.site-accueil) .search-box {
    display: flex !important;
    align-items: center;
    gap: 6px;
    position: sticky !important;
    top: calc(var(--site-header-h, 56px) + env(safe-area-inset-top, 0px) + 5px);
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin-top: calc(var(--site-header-h, 56px) + env(safe-area-inset-top, 0px) + 5px) !important;
    margin-bottom: 5px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 8px 10px !important;
    border-radius: 40px !important;
    background: #1f1f1f !important;
    z-index: 1020;
    box-sizing: border-box;
  }
  body.inner-pages:not(.site-accueil) .search-box .search-txt,
  body:not(.site-accueil) .search-box .search-txt {
    float: none !important;
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    color: #fff !important;
    background: transparent !important;
    font-size: 13px !important;
    line-height: 36px !important;
  }
  body.inner-pages:not(.site-accueil) .search-box .search-btn,
  body:not(.site-accueil) .search-box .search-btn {
    float: none !important;
    flex-shrink: 0;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .search-txt {
    font-size: 14px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  /* Slider annonces vedettes */
  .slider-body {
    padding: 0 !important;
  }

  .slider-item {
    border-radius: 0 !important;
  }

  .slider-info {
    padding: 10px 12px !important;
  }
  /* Vitrine accueil : pleine largeur texte/prix, 5px aux bords */
  .slider-body.vitrine-accueil .slider-info {
    padding: 5px !important;
  }

  .slider-info h3, .slider-info h4 {
    font-size: 1rem !important;
  }

  /* Boutons du hero */
  .flex-column.flex-lg-row.d-lg-flex {
    flex-direction: column !important;
    gap: 8px;
  }

  .flex-column.flex-lg-row.d-lg-flex .btn {
    width: 100%;
  }

  /* Section "Comment ça marche" */
  section.how-it-works {
    padding: 20px 12px !important;
  }

  section.how-it-works .serv {
    margin-bottom: 20px !important;
  }

  section.how-it-works .art-1 img {
    max-width: 60px;
  }

  /* Section "Annonces populaires" */
  section.popular.portfolio.freelancers {
    padding: 16px 0 !important;
  }

  /* Catégories vedettes (incluses via categories-vedettes.jspf) */
  .feature-categories .single-category,
  .all-categories .single-category {
    padding: 10px !important;
  }

  /* Section tarifs */
  .pricing-item, .pricing-box {
    margin-bottom: 16px !important;
  }

  /* Section "Villes les plus visitées" */
  .city-photo {
    height: 140px !important;
  }

  /* On parle de nous (témoignages) */
  .testimonials-item {
    margin-bottom: 16px;
  }

  /* Lazy loading placeholder */
  img[loading="lazy"]:not([src]) {
    min-height: 80px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }

  @keyframes shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
  }
}


/* ----------------------------------------------------------
   LISTE ANNONCES + GRILLE (mobile / tablette)
   ---------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* Titre liste : icône compacte, pas de débordement */
  .inner-pages .blog .block-heading {
    height: auto !important;
    min-height: 44px;
    margin-bottom: 12px !important;
  }
  .inner-pages .blog .block-heading h4 {
    line-height: 1.3 !important;
    font-size: 1rem !important;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 8px !important;
  }
  .inner-pages .blog .block-heading .heading-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 0 !important;
  }
  .inner-pages .blog .block-heading .heading-icon .fa {
    line-height: 1 !important;
  }
  .inner-pages .blog .block-heading .change-view-btn {
    min-height: 36px !important;
    min-width: 36px;
    padding: 6px;
  }

  /* Critères : texte lisible, pas de tables trop larges */
  #criteresrecherche {
    font-size: 0.88rem;
    padding: 0 4px 8px;
    overflow-wrap: anywhere;
  }
  #criteresrecherche table {
    width: 100%;
    max-width: 100%;
  }
  #ag-resultats-entete {
    font-size: 0.95rem;
    padding: 0 4px;
  }

  /* Cartes annonces : pleine largeur */
  .ag-grid {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: 100%;
  }
  .ag-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin: 0 !important;
  }
  .ag-carousel-container {
    height: clamp(180px, 48vw, 220px) !important;
  }
  .ag-card-title {
    font-size: 1.05rem !important;
    margin: 8px 0 6px !important;
  }
  .category-tag {
    font-size: 12px !important;
    padding: 4px 8px !important;
  }

  .mobile-filter-btn {
    display: flex !important;
    position: fixed;
    bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 12px);
    right: 12px;
    background: #18ba60;
    color: white;
    border: none;
    border-radius: 24px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(24, 186, 96, 0.35);
    z-index: 1040;
    gap: 8px;
    align-items: center;
    min-height: 44px;
  }

  /* Conteneurs pages — plus de padding 111px ; pas de remontée négative sous la barre */
  body.inner-pages section.listings-grid-right,
  body:not(.site-accueil) section.listings-grid-right {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .listings-grid-right .container,
  section.portfolio .container,
  section.blog .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100% !important;
  }

  /* Détail / pages communes */
  .inner-pages .project-single,
  .inner-pages .blog-section {
    overflow-x: hidden;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  /* Recadrage et centrage du conteneur principal */
  .listings-grid-right .container,
  section.portfolio .container,
  section.blog .container,
  .inner-pages .container {
    max-width: 750px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Barre de recherche tablette : décalée de 5px sous le header et 5px au dessus du contenu */
  body.inner-pages:not(.site-accueil) .search-box,
  body:not(.site-accueil) .search-box {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: min(720px, calc(100% - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    position: sticky !important;
    top: calc(var(--site-header-h, 68px) + env(safe-area-inset-top, 0px) + 5px) !important;
    margin-top: calc(var(--site-header-h, 68px) + env(safe-area-inset-top, 0px) + 5px) !important;
    margin-bottom: 5px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 8px 14px !important;
    border-radius: 40px !important;
    background: #1f1f1f !important;
    z-index: 1020 !important;
    box-sizing: border-box !important;
  }

  /* 5px d'espace au-dessus du contenu sous la barre de recherche et 0px en bas */
  body.inner-pages section.listings-grid-right,
  body:not(.site-accueil) section.listings-grid-right {
    padding-top: 0 !important;
    margin-top: 5px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Le conteneur principal empile les sections (exact, elargi, suggestions) verticalement */
  #ag-annonces-container {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .ag-resultats-section {
    width: 100% !important;
    display: block !important;
    margin-bottom: 1.5rem !important;
  }

  .ag-resultats-section:last-child {
    margin-bottom: 0 !important;
  }

  .first-footer,
  .first-footer.first-footer--modern {
    margin-top: 5px !important;
  }

  /* ==========================================================================
     SYSTÈME DE DÉPLACEMENT EN CRABE (CRAB HORIZONTAL SWIPE) & EMPREINTE DE POUCE
     ========================================================================== */
  .ag-crabe-wrapper {
    position: relative;
    width: 100%;
    overflow: visible;
  }

  .ag-grid.ag-crabe-grid,
  .ag-resultats-section .ag-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch;
    gap: 14px !important;
    padding: 6px 4px 14px 4px !important;
    width: 100% !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .ag-grid.ag-crabe-grid::-webkit-scrollbar,
  .ag-resultats-section .ag-grid::-webkit-scrollbar {
    display: none !important;
  }

  .ag-grid.ag-crabe-grid .ag-card,
  .ag-resultats-section .ag-grid .ag-card {
    flex: 0 0 calc(84vw - 20px) !important;
    width: calc(84vw - 20px) !important;
    max-width: 320px !important;
    min-width: 260px !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  .ag-carousel-container {
    height: 210px !important;
  }
}

/* Boutons Empreinte de pouce flottants (Crabe Navigation) */
.ag-crabe-btn {
  position: absolute;
  top: 48%;
  transform: translateY(-50%);
  z-index: 30;
  background: linear-gradient(135deg, #18ba60 0%, #0d8343 100%);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 30px;
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(24, 186, 96, 0.5), 0 2px 8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  outline: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  user-select: none;
  backdrop-filter: blur(4px);
}

.ag-crabe-btn:hover,
.ag-crabe-btn:active {
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 6px 20px rgba(24, 186, 96, 0.65), 0 3px 10px rgba(0, 0, 0, 0.35);
  background: linear-gradient(135deg, #1bd36d 0%, #129d50 100%);
}

.ag-crabe-btn--left {
  left: 2px;
}

.ag-crabe-btn--right {
  right: 2px;
  animation: pulseCrabeThumb 2.2s infinite ease-in-out;
}

.ag-crabe-btn i.fa-fingerprint {
  font-size: 17px;
  color: #ffffff;
}

@keyframes pulseCrabeThumb {
  0% {
    box-shadow: 0 4px 16px rgba(24, 186, 96, 0.5), 0 0 0 0 rgba(24, 186, 96, 0.7);
  }
  70% {
    box-shadow: 0 4px 16px rgba(24, 186, 96, 0.5), 0 0 0 12px rgba(24, 186, 96, 0);
  }
  100% {
    box-shadow: 0 4px 16px rgba(24, 186, 96, 0.5), 0 0 0 0 rgba(24, 186, 96, 0);
  }
}

@media (max-width: 768px) {
  /* Masquer la vue grille legacy sur mobile — liste uniquement */
  .grid-view-container {
    display: none !important;
  }

  /* Card annonce en liste (legacy) */
  .listing-item, .property-item, .annonce-card {
    flex-direction: column !important;
    margin-bottom: 16px;
  }

  .listing-item .listing-img,
  .property-item .property-img,
  .annonce-card .card-img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover;
  }

  /* Filtres legacy */
  .filter-sidebar, .sidebar-widget {
    display: none !important;
  }

  /* Carte Leaflet — réduite sur mobile */
  .map-container, #map, .leaflet-container {
    height: 220px !important;
    max-width: 100% !important;
  }

  /* Contrôles carte plus grands pour tactile */
  .leaflet-control-zoom a {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 18px !important;
  }

  /* Pagination */
  .pagination .page-link {
    padding: 8px 12px;
    font-size: 14px;
  }
}

/* Desktop : 5px EXACTS entre bas du header (#heading) et barre filtre */
@media (min-width: 992px) {
  body.inner-pages:not(.site-accueil) .search-box,
  body:not(.site-accueil) .search-box {
    display: flex !important;
    align-items: center;
    gap: 8px;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: min(920px, calc(100% - 32px)) !important;
    max-width: calc(100vw - 32px);
    /* --site-header-h mesuré en JS ; fallback 92px (logo 79px + padding bandeau) */
    margin-top: calc(var(--site-header-h, 92px) + env(safe-area-inset-top, 0px) + 5px) !important;
    margin-bottom: 5px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 10px 14px !important;
    border-radius: 40px !important;
    background: #1f1f1f !important;
    z-index: 1020;
    box-sizing: border-box;
  }
  body.inner-pages:not(.site-accueil) .search-box .search-txt,
  body:not(.site-accueil) .search-box .search-txt {
    float: none !important;
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    color: #fff !important;
  }
  body.inner-pages:not(.site-accueil) .search-box .search-btn,
  body:not(.site-accueil) .search-box .search-btn {
    float: none !important;
    flex-shrink: 0;
  }
  body.inner-pages section.listings-grid-right,
  body:not(.site-accueil) section.listings-grid-right {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* ----------------------------------------------------------
   DÉTAIL ANNONCE
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  /* Carousel images plein écran */
  .property-slider, .annonce-slider {
    width: 100% !important;
    margin: 0 -12px;
  }

  /* Prix sticky */
  .property-price-sticky {
    position: sticky;
    top: 0;
    background: white;
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    z-index: 100;
    font-size: 1.3rem;
    font-weight: 700;
  }

  /* Onglets → accordéon vertical */
  .nav-tabs {
    display: none !important;
  }

  .tab-content .tab-pane {
    display: block !important;
    opacity: 1 !important;
    border-bottom: 1px solid #e0e0e0;
    padding: 12px 0;
  }

  .tab-pane-title {
    display: block;
    font-weight: 700;
    padding: 10px 0;
    cursor: pointer;
  }

  /* CTA contacter agence — fixe en bas */
  .contact-agency-sticky {
    position: fixed;
    bottom: var(--mobile-bottom-nav-height);
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #eee;
    padding: 10px 16px;
    z-index: 1000;
    display: flex;
    gap: 10px;
  }

  .contact-agency-sticky .btn {
    flex: 1;
  }
}

/* ----------------------------------------------------------
   DASHBOARD CLIENT
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  /* Sidebar dashboard masquée sur mobile */
  .dashboard-sidebar, .page-sidebar {
    display: none !important;
  }

  .dashboard-content, .page-content-wrapper {
    width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
  }

  /* KPIs en cards horizontales */
  .dashboard-stat-card {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px !important;
    margin-bottom: 10px;
  }

  .dashboard-stat-card .stat-icon {
    font-size: 28px;
    min-width: 40px;
  }

  .dashboard-stat-card .stat-value {
    font-size: 1.4rem;
    font-weight: 700;
  }

  /* Tabs du dashboard — scrollables horizontalement */
  .dashboard-tabs, .nav-tabs-dashboard {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .dashboard-tabs::-webkit-scrollbar {
    display: none;
  }

  .dashboard-tabs .nav-item {
    flex-shrink: 0;
  }

  /* Tables → scroll horizontal sur mobile */
  .table-responsive-mobile {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table.dataTable {
    min-width: 600px;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    width: 100%;
    text-align: left;
    margin-bottom: 8px;
  }
}



/* ----------------------------------------------------------
   PHASE 4 — SIDEBAR DASHBOARD → BARRE HORIZONTALE
   ---------------------------------------------------------- */
@media (max-width: 991px) {
  /* Sidebar → barre horizontale au-dessus du contenu */
  .user-page .col-lg-3 {
    width: 100% !important;
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 !important;
    margin-bottom: 12px;
  }

  .user-profile-box {
    display: flex;
    flex-direction: column;
    margin-bottom: 0 !important;
  }

  /* En-tête profil — compact sur mobile */
  .user-profile-box .header {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    gap: 12px;
  }

  .user-profile-box .header h2 {
    font-size: 1.1rem !important;
    margin: 0;
    flex: 1;
  }

  .user-profile-box .header h4 {
    font-size: 0.8rem !important;
    margin: 0;
  }

  .user-profile-box .profile-img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50%;
    order: -1;
  }

  /* Menu → scroll horizontal */
  .user-profile-box .detail {
    border-top: 1px solid #eee;
    padding: 0 !important;
  }

  .user-profile-box .detail ul.menu {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    padding: 0 8px;
    margin: 0;
  }

  .user-profile-box .detail ul.menu::-webkit-scrollbar {
    display: none;
  }

  .user-profile-box .detail ul.menu li {
    flex-shrink: 0;
  }

  .user-profile-box .detail ul.menu li a {
    white-space: nowrap;
    padding: 10px 14px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-bottom: 2px solid transparent;
    min-height: unset;
  }

  .user-profile-box .detail ul.menu li a.active {
    border-bottom-color: #1a73e8;
    color: #1a73e8;
    font-weight: 600;
  }

  .user-profile-box .detail ul.menu li a i {
    font-size: 16px;
  }

  /* Zone de contenu — pleine largeur */
  .user-page .col-lg-9 {
    width: 100% !important;
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 8px !important;
  }
}

/* ----------------------------------------------------------
   PHASE 4 — FORMULAIRE ANNONCE (dynamic-tabs → wizard mobile)
   ---------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* 1) 2px d'écart seulement aux bords gauche et droit pour maximiser la zone de saisie */
  .royal-add-property-area .container,
  .royal-add-property-area .container-fluid,
  .royal-add-property-area,
  .single-add-property,
  .property-form-group {
    padding-left: 2px !important;
    padding-right: 2px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .property-form-group .row {
    margin-left: -2px !important;
    margin-right: -2px !important;
  }

  .property-form-group .row > [class*="col-"] {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  /* Section globale : 5px d'écart sous le bloc menu header */
  .royal-add-property-area,
  .inner-pages .royal-add-property-area {
    margin-top: calc(var(--site-header-h, 56px) + env(safe-area-inset-top, 0px) + 5px) !important;
    padding-top: 5px !important;
    padding-bottom: 12px !important;
  }

  .single-add-property > h3,
  .single-add-property .modal-title,
  h5.modal-title,
  h3.modal-title {
    font-size: 1.05rem !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    padding-bottom: 4px !important;
    text-transform: uppercase;
    font-weight: 700 !important;
  }

  /* 2) Tous les boutons d'Etat (En ligne / Hors ligne) et Statut (Classique / Gold / Platinium) SUR UNE SEULE LIGNE */
  .single-add-property .flex-column.flex-lg-row > .d-flex.align-items-center.flex-wrap:first-child,
  .single-add-property .d-flex.align-items-center.flex-wrap:first-of-type {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    width: 100% !important;
    margin-bottom: 8px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .single-add-property .btn-group[role="group"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    margin-bottom: 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  }

  .single-add-property .btn-group[role="group"]:first-child {
    flex: 0 0 38% !important;
    max-width: 38% !important;
  }

  .single-add-property .btn-group[role="group"]:last-child {
    flex: 0 0 60% !important;
    max-width: 60% !important;
  }

  .single-add-property .btn-group[role="group"] .btn {
    flex: 1 1 0 !important;
    width: auto !important;
    margin-bottom: 0 !important;
    padding: 4px 2px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    white-space: nowrap !important;
    border-radius: 0 !important;
    height: 30px !important;
    line-height: 20px !important;
  }

  .single-add-property .btn-group[role="group"] .btn:first-of-type {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
  }

  .single-add-property .btn-group[role="group"] .btn:last-of-type {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
  }

  /* 3) Les 2 interrupteurs (Exclusivité & Adresse détaillée) SUR UNE SEULE LIGNE */
  .single-add-property .flex-column.flex-lg-row > .d-flex.align-items-center.flex-wrap:last-child,
  .single-add-property .d-flex.align-items-center.flex-wrap:nth-of-type(2) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 2px !important;
    margin-bottom: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .single-add-property .form-check.form-switch {
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
  }

  .single-add-property .form-check-label {
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    margin-left: 4px !important;
  }

  /* 4) Boutons AI (Microsoft & Google) et Editeur Summernote compacts pour mobile/tablette */
  .ai-btn-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
  }

  .ai-btn-group .btn,
  .btn-ai-generate,
  #btnDescriptifAIMicrosoft,
  #btnDescriptifAIGoogle {
    flex: 1 1 50% !important;
    width: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 4px 6px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    height: 32px !important;
    line-height: 20px !important;
    border-radius: 6px !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
  }

  .ai-btn-group .btn i,
  .btn-ai-generate i,
  #btnDescriptifAIMicrosoft i,
  #btnDescriptifAIGoogle i {
    font-size: 0.8rem !important;
  }

  /* Editeur Summernote compact */
  .note-editor.note-frame {
    border-radius: 8px !important;
    border-color: #ced4da !important;
    margin-bottom: 8px !important;
  }

  .note-toolbar {
    padding: 3px 2px !important;
    background: #f8f9fa !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
  }

  .note-toolbar .note-btn-group {
    margin-right: 2px !important;
    margin-bottom: 2px !important;
  }

  .note-toolbar .note-btn {
    padding: 3px 5px !important;
    font-size: 0.72rem !important;
    height: 28px !important;
    line-height: 20px !important;
    border-radius: 4px !important;
  }

  .note-toolbar .note-current-fontname,
  .note-toolbar .note-current-fontsize {
    font-size: 0.7rem !important;
  }

  .note-editable {
    padding: 8px !important;
    min-height: 120px !important;
    font-size: 0.85rem !important;
  }

  /* Onglets du formulaire → scrollables horizontalement */
  .dynamic-tabs .tabs-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    border-bottom: 2px solid #e2e8f0 !important;
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
    width: 100% !important;
  }

  .dynamic-tabs .tabs-list::-webkit-scrollbar {
    display: none !important;
  }

  .dynamic-tabs .tabs-list li {
    flex: 0 0 auto !important;
    padding: 10px 14px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    border-bottom: 3px solid transparent !important;
    text-align: center !important;
    cursor: pointer !important;
  }

  .dynamic-tabs .tabs-list li.active,
  .dynamic-tabs .tabs-list li[class*="active"] {
    border-bottom-color: #18ba60 !important;
    color: #18ba60 !important;
    font-weight: 700 !important;
  }

  /* Contenu des tabs & formulaires */
  .dynamic-tabs .tabs-content {
    padding: 10px 0 !important;
  }

  .property-form-group,
  .inner-pages .property-form-group {
    padding: 0 !important;
  }

  .property-form-group label {
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    margin-top: 6px !important;
    margin-bottom: 4px !important;
    color: #2d3748 !important;
  }

  .property-form-group input.form-control,
  .property-form-group select.form-control,
  .property-form-group textarea.form-control {
    font-size: 0.9rem !important;
    padding: 8px 12px !important;
    height: auto !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    margin-bottom: 8px !important;
  }

  /* Boutons IA Microsoft & Google compacts */
  #btnDescriptifAIMicrosoft,
  #btnDescriptifAIGoogle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 12px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    margin-right: 6px !important;
    margin-bottom: 6px !important;
    width: auto !important;
  }

  /* Upload images — FileInput Krajee */
  .file-input-container,
  .file-input {
    min-height: 120px !important;
  }

  .krajee-default .file-preview-frame {
    width: 90px !important;
    height: 70px !important;
    margin: 4px !important;
  }

  /* Summernote éditeur texte */
  .note-editor {
    min-height: 140px !important;
  }

  .note-toolbar {
    flex-wrap: wrap;
  }

  .note-toolbar .note-btn-group {
    margin-bottom: 2px;
  }
}

/* ----------------------------------------------------------
   PHASE 4 — MODALS CONNEXION / INSCRIPTION (améliorées)
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  /* Modal connexion */
  #connexion-modal .modal-dialog,
  #inscription-modal .modal-dialog,
  .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    min-height: 100vh;
  }

  /* Slide-up animation */
  .modal.fade .modal-dialog {
    transform: translateY(30px) !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
    opacity: 0;
  }

  .modal.show .modal-dialog {
    transform: translateY(0) !important;
    opacity: 1;
  }

  .modal-content {
    border: none !important;
    border-radius: 16px 16px 0 0 !important;
    min-height: 50vh;
  }

  .modal-header {
    padding: 14px 16px !important;
    border-bottom: 1px solid #f0f0f0;
  }

  .modal-body {
    padding: 16px !important;
    overflow-y: auto;
    max-height: 70vh;
  }

  /* Inputs optimisés pour clavier mobile */
  .modal .form-control,
  .modal .form-select {
    height: 48px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    padding: 8px 14px;
  }

  .modal textarea.form-control {
    height: auto !important;
    min-height: 80px;
  }

  .modal .btn {
    height: 48px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    width: 100%;
    margin-top: 8px;
  }

  .modal .form-check {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .modal .form-check-label {
    font-size: 14px;
    line-height: 1.4;
  }
}


/* ----------------------------------------------------------
   UTILITAIRES GLOBAUX MOBILE
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  /* Padding de section */
  .section_100 { padding: 40px 0 !important; }
  .section_70  { padding: 28px 0 !important; }
  .section_50  { padding: 20px 0 !important; }

  /* Titres */
  h1 { font-size: 1.6rem !important; }
  h2 { font-size: 1.35rem !important; }
  h3 { font-size: 1.15rem !important; }

  /* Container padding */
  .container { padding-left: 12px !important; padding-right: 12px !important; }

  /* Cacher les éléments non essentiels sur mobile */
  .d-none-mobile { display: none !important; }
  .d-block-mobile { display: block !important; }

  /* Images lazy */
  img[data-src], img.lazy {
    min-height: 40px;
    background: #f0f0f0;
  }
}

/* Bouton filtre mobile masqué par défaut */
.mobile-filter-btn {
  display: none;
}

/* ----------------------------------------------------------
   DATATABLES — MOBILE
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  /* Wrapper scrollable autour des DataTables */
  .dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dataTables_wrapper .dataTables_length select {
    width: auto;
    display: inline-block;
  }

  /* Profil utilisateur sidebar → dessus sur mobile */
  .user-page .col-lg-9 {
    padding: 0 8px !important;
  }

  .user-profile-box {
    margin-bottom: 16px;
  }

  /* Tabs du dashboard (ul.nav-tabs chargées dynamiquement) */
  #section .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: none;
    gap: 4px;
    padding-bottom: 4px;
  }

  #section .nav-tabs::-webkit-scrollbar { display: none; }

  #section .nav-tabs .nav-link {
    white-space: nowrap;
    border-radius: 20px !important;
    padding: 6px 14px !important;
    font-size: 13px;
    border: 1px solid #ddd;
    min-height: unset;
  }

  #section .nav-tabs .nav-link.active {
    background: #1a73e8;
    color: white;
    border-color: #1a73e8;
  }
}

/* ===========================================================
   PHASE 5 — PERFORMANCE MOBILE
   =========================================================== */

/* GPU-accelerated scroll pour les containers overflow-x */
.user-profile-box .detail ul.menu,
.dynamic-tabs .tabs-list,
#section .nav-tabs,
.dataTables_wrapper {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: scroll-position;
}

/* Reduce paint cost : content-visibility sur les sections below the fold */
@media (max-width: 768px) {
  section.how-it-works,
  section.popular.portfolio.freelancers,
  .footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
  }
}

/* Respect utilisateur : reduce motion si demandé */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Smooth scroll natif (sauf si prefers-reduced-motion) */
@media (max-width: 768px) {
  html {
    scroll-behavior: smooth;
  }
}

/* Print : masquer la bottom nav et les éléments interactifs */
@media print {
  .mobile-bottom-nav,
  .mobile-filter-btn,
  .contact-agency-sticky {
    display: none !important;
  }
}

/* ----------------------------------------------------------
   OPTIMISATION RESPONSIVE : VILLES LES PLUS VISITÉES & POPULAR BUTTONS
   ---------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* Buttons de filtrage rapides sur l'accueil (Par localités, Par types de biens, Par commodités) */
  section.popular .sec-title .flex-column {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  section.popular .sec-title .flex-column > div {
    margin: 0 !important;
    flex: 1 1 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
  }

  section.popular .sec-title .btn {
    width: 100% !important;
    padding: 8px 10px !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    text-align: center !important;
  }

  /* Page Villes les plus visitées (villes-les-plus-visitees.jsp) */
  .listing.blog.details.sectDetails {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #tabs-villeslesplusvisitees {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-top: 5px !important;
  }

  #tabs-villeslesplusvisitees > ul,
  #tabs-villeslesplusvisitees.ui-tabs .ui-tabs-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
    padding: 6px 2px !important;
    margin-bottom: 12px !important;
    border: none !important;
    background: transparent !important;
    scrollbar-width: none !important;
  }

  #tabs-villeslesplusvisitees > ul::-webkit-scrollbar {
    display: none !important;
  }

  #tabs-villeslesplusvisitees > ul > li,
  #tabs-villeslesplusvisitees.ui-tabs .ui-tabs-nav li {
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1.5px solid #18ba60 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    top: 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  }

  #tabs-villeslesplusvisitees > ul > li > a,
  #tabs-villeslesplusvisitees.ui-tabs .ui-tabs-nav li a {
    display: inline-block !important;
    padding: 7px 15px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #18ba60 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    float: none !important;
  }

  #tabs-villeslesplusvisitees > ul > li.ui-tabs-active,
  #tabs-villeslesplusvisitees > ul > li.ui-state-active,
  #tabs-villeslesplusvisitees.ui-tabs .ui-tabs-nav li.ui-tabs-active,
  #tabs-villeslesplusvisitees.ui-tabs .ui-tabs-nav li.ui-state-active {
    background: #18ba60 !important;
    border-color: #18ba60 !important;
  }

  #tabs-villeslesplusvisitees > ul > li.ui-tabs-active > a,
  #tabs-villeslesplusvisitees > ul > li.ui-state-active > a,
  #tabs-villeslesplusvisitees.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
  #tabs-villeslesplusvisitees.ui-tabs .ui-tabs-nav li.ui-state-active a {
    color: #ffffff !important;
  }

  #tabs-villeslesplusvisitees .ui-tabs-panel {
    padding: 10px 6px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    overflow-x: auto !important;
  }

  #tabs-villeslesplusvisitees table.dataTable {
    width: 100% !important;
    font-size: 0.82rem !important;
  }
}

/* ----------------------------------------------------------
   CENTRAGE MODALE DE CHOIX ANNONCE (Horizontalement & Verticalement)
   ---------------------------------------------------------- */
#publier-annonce-choix-modal.show,
#publier-annonce-choix-modal.in {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#publier-annonce-choix-modal:not(.show):not(.in) {
  display: none !important;
  pointer-events: none !important;
}

#publier-annonce-choix-modal .modal-dialog,
.modal-dialog-publier-choix {
  margin: auto !important;
  width: calc(100% - 24px) !important;
  max-width: 520px !important;
}

.publier-choix-modal-content {
  margin: auto !important;
  width: 100% !important;
}