/* =============================================================================
   ELMOUCHIR — ui-fix.css
   Correctifs UI / UX uniquement. Aucune logique métier n'est modifiée.
   À charger APRÈS all2.css et modern-ui.css.
   ============================================================================= */

:root{
  /* Hauteur réelle du header fixe — recalculée par ui-fix.js */
  --hdr-h: 112px;
  /* Hauteur de la barre de navigation mobile (dock) */
  --dock-h: 64px;
  /* Rythme vertical unique pour toutes les pages */
  --ui-gap:   clamp(1.75rem, 3.5vw, 3.25rem);
  --ui-gap-s: clamp(1rem, 2vw, 1.5rem);
  --ui-radius: 16px;
  --ui-green: #0a9c53;
  --ui-green-d: #07301e;
  --ui-line: rgba(10,60,38,.10);
}

/* -----------------------------------------------------------------------------
   1. ESPACEMENT SOUS LE HEADER FIXE  (bug principal)
   #ts-header est en position:fixed mais <main> n'avait que .pt-5 (48px) alors
   que le header mesure ~110px : tous les titres de page passaient dessous.
   Chaque page compensait avec un padding-top:6rem en style inline → incohérent.
-------------------------------------------------------------------------------*/
/* L'espace est réservé sur le conteneur : cela couvre aussi @yield('slide') */
#page-top.ts-page-wrapper{ padding-top: var(--hdr-h); }
#ts-main{
  padding-top: 0 !important;              /* annule .pt-5 (sélecteur #id) */
  /* évite que le footer remonte au milieu de l'écran sur les pages courtes */
  min-height: calc(100vh - var(--hdr-h) - 2rem);
}

/* Les ancres (#titre_page après une recherche) ne se cachent plus sous le header */
html{ scroll-padding-top: calc(var(--hdr-h) + 16px); }
[id]{ scroll-margin-top: calc(var(--hdr-h) + 16px); }

/* Neutralise les padding-top:6rem inline des pages et impose le même rythme */
#ts-main #page-title,
#ts-main #featured-properties,
#ts-main #items-listing-and-search{
  padding-top: var(--ui-gap-s) !important;
  padding-bottom: 0 !important;
}

/* Pas de scroll horizontal parasite */
.ts-page-wrapper{ overflow-x: hidden; overflow-x: clip; }
img{ max-width: 100%; height: auto; }

/* -----------------------------------------------------------------------------
   2. TITRE DE PAGE — un seul style pour toutes les pages
-------------------------------------------------------------------------------*/
#page-title h2,
#page-title #titre_page,
#featured-properties > .container > .ts-title h2{
  margin: 0 0 .35rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}
#page-title h2::after,
#featured-properties > .container > .ts-title h2::after{
  content:"";
  display:block;
  width: 56px; height: 4px;
  margin-top: .7rem;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--ui-green), #3ddc84);
}
#featured-properties > .container > .ts-title{
  margin-bottom: var(--ui-gap-s) !important;
}
#featured-properties > .container > .ts-title h2::after{ margin-inline: auto; }

/* Espace régulier entre les blocs d'une page */
#ts-main section:not(.ts-block){ margin-bottom: var(--ui-gap-s); }
#ts-main #search-form{ margin-bottom: var(--ui-gap-s); }
#ts-main #agencies-list{ padding-bottom: var(--ui-gap); }
#ts-footer{ margin-top: var(--ui-gap); }


/* -----------------------------------------------------------------------------
   4. CARTES SECTEUR — le titre était illisible sur la photo
      (texte noir posé directement sur l'image, sans voile)
-------------------------------------------------------------------------------*/
#featured-properties .row > [class*="col-"]{ display: flex; }
#featured-properties .row > [class*="col-"] > *{ width: 100%; }

.ts-item.ts-item__lg .card-img2,
#featured-properties .card-img2{
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 12rem;
  overflow: hidden;
  border-radius: var(--ui-radius) var(--ui-radius) 0 0;
  background-color: var(--ui-green-d);   /* fond de secours si pas d'image */
  background-size: cover;
  background-position: center;
}
.ts-item.ts-item__lg .card-img2::after,
#featured-properties .card-img2::after{
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(4,26,16,.90) 0%,
              rgba(4,26,16,.45) 45%,
              rgba(4,26,16,0)   80%);
}
.ts-item.ts-item__lg .card-img2 h4,
#featured-properties .card-img2 h4{
  position: relative; z-index: 2;
  margin: 0;
  padding: .95rem 1.1rem;
  width: 100%;
  color: #fff !important;
  font-weight: 700;
  font-size: 1.05rem !important;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* Liste « Les activités » : hauteur régulière + dégradé de fin de liste */
#featured-properties .scrollbar3{
  max-height: 11rem;
  padding-inline-end: .5rem;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}
#featured-properties .scrollbar3 li{ line-height: 1.9; }

/* Bouton « Load more » centré, sans le grand vide au-dessus */
#featured-properties .container .container{ margin-top: var(--ui-gap-s) !important; }
#load-more{
  margin-top: 0;
  border-radius: 99px;
  padding: .7rem 1.9rem;
  font-weight: 700;
}
.auto-load{ padding: .5rem 0; }

/* -----------------------------------------------------------------------------
   5. BANDEAU « ABONNEMENT REQUIS » — contraste illisible (blanc sur orange)
-------------------------------------------------------------------------------*/
#ts-main .alert[style*="ff9800"]{
  box-shadow: 0 18px 40px -18px rgba(255,152,0,.6) !important;
  border-radius: var(--ui-radius) !important;
  max-width: 820px;
  margin-inline: auto !important;
}
#ts-main .alert[style*="ff9800"] .alert-heading,
#ts-main .alert[style*="ff9800"] h5{
  color: #3d2400 !important;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: .25rem;
}
#ts-main .alert[style*="ff9800"] .d-flex{ align-items: center; gap: .75rem; flex-wrap: wrap; }
#ts-main .alert[style*="ff9800"] .btn{
  background: #3d2400 !important;
  border-color: #3d2400 !important;
  color: #fff !important;
  border-radius: 99px;
  padding: .45rem 1.15rem;
  font-weight: 600;
}
#ts-main .alert[style*="ff9800"] .btn:hover{ background:#201300 !important; border-color:#201300 !important; }

/* -----------------------------------------------------------------------------
   6. MOBILE — le dock fixe masquait le bas de page et le bouton « haut de page »
-------------------------------------------------------------------------------*/
@media (max-width: 991.98px){
  .ts-page-wrapper{
    padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 8px);
  }
  #back-to-top{
    bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 14px) !important;
    right: 14px !important;
  }
  #ts-main{ min-height: calc(100svh - var(--hdr-h) - 2rem); }
  #featured-properties .card-img2{ height: 10rem; }
}

/* Le sélecteur de langue et le switch mode sombre se chevauchaient < 400px */
@media (max-width: 400px){
  #ts-secondary-navigation .dark{ margin-left: 1rem !important; margin-right: 1rem !important; }
  #ts-secondary-navigation .custom-select{ padding-left: .35rem; padding-right: 1.1rem; }
}

/* -----------------------------------------------------------------------------
   7. RETOUR VISUEL DE NAVIGATION
      Les pages « wilaya / secteur / entreprises » mettent plusieurs secondes
      côté serveur : sans indicateur, l'utilisateur croit que le clic est perdu.
-------------------------------------------------------------------------------*/
.uifx-progress{
  position: fixed; inset-inline: 0; top: 0;
  height: 3px; z-index: 20000;
  pointer-events: none;
  opacity: 0; transition: opacity .2s ease;
}
.uifx-progress.is-on{ opacity: 1; }
.uifx-progress i{
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--ui-green), #3ddc84);
  box-shadow: 0 0 10px rgba(61,220,132,.75);
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.uifx-toast{
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translate(-50%, 14px);
  z-index: 20000;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .6rem 1.1rem;
  border-radius: 99px;
  background: rgba(7,22,14,.92);
  color: #eafaf1;
  font-size: .82rem; font-weight: 600;
  box-shadow: 0 16px 34px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.uifx-toast.is-on{ opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.uifx-toast::before{
  content:""; width: 14px; height: 14px; flex: none;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #3ddc84;
  animation: uifx-spin .7s linear infinite;
}
@keyframes uifx-spin{ to{ transform: rotate(360deg); } }
@media (max-width: 991.98px){
  .uifx-toast{ bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 14px); }
}
body.uifx-busy, body.uifx-busy a{ cursor: progress; }

/* -----------------------------------------------------------------------------
   8. SOCLE QUALITÉ : focus clavier visible + mouvement réduit
-------------------------------------------------------------------------------*/
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 3px solid rgba(10,156,83,.55);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .uifx-toast::before{ animation: none !important; }
}

/* -----------------------------------------------------------------------------
   9. MODE SOMBRE — reprise des correctifs ci-dessus
-------------------------------------------------------------------------------*/
.navbar-dark #agencies-list .card.ts-item,
.navbar-dark #data .card.ts-item{
  border-color: rgba(255,255,255,.10);
  box-shadow: none;
}
.navbar-dark #agencies-list .card.ts-item .card-footer{ border-top-color: rgba(255,255,255,.10); }

/* -----------------------------------------------------------------------------
   10. RECHERCHE MULTICRITÈRE (searchAreaControl)
   Le widget se positionne en dur : width:1000px / left:50% / margin-left:-350px.
   Sous 1100px la fenêtre sortait de l'écran (correctif qui n'existait que sur
   la page « tous les secteurs » — il est ici appliqué à toutes les pages).
-------------------------------------------------------------------------------*/
.sac-ul{ font-size: 1em; line-height: 2; }
.sac-popup .sac-column-div > .sac-ul{ font-size: 14px; }
@media (max-width: 1100px){
  .sac-popup.sac-popup-visible{
    width: 92vw !important;
    left: 4vw !important;
    margin-left: 0 !important;
    max-height: 80vh;
    overflow: auto;
  }
  .sac-popup .sac-column-div{ width: 100% !important; }
}

/* -----------------------------------------------------------------------------
   11. ONGLETS ET LISTES LATÉRALES
-------------------------------------------------------------------------------*/
/* Barre d'onglets #category-select (monographie / entreprises / chambre / stats)
   Les 4 liens sont bien presents dans le DOM, mais un seul etait visible :
   chaque <a> prenait toute la largeur du conteneur (largeur heritee du theme,
   que `flex:none` ne neutralisait pas), les trois autres etaient donc pousses
   hors de l'ecran — et `scrollbar-width:none` masquait la barre de defilement,
   donc rien n'indiquait qu'il restait du contenu a droite.
   On force ici des liens dimensionnes sur leur texte. */
#category-select{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#category-select::-webkit-scrollbar{ display: none; }

#category-select > a{
  flex: 0 0 auto !important;      /* ni etire, ni comprime */
  width: auto !important;         /* neutralise une largeur imposee par le theme */
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .9rem 1.4rem;
  cursor: pointer;
}
#category-select > a.active{ font-weight: 700; }

/* Indique qu'il reste des onglets a droite quand la barre deborde vraiment */
#category-select{
  -webkit-mask-image: linear-gradient(to right, #000 92%, rgba(0,0,0,.35) 100%);
          mask-image: linear-gradient(to right, #000 92%, rgba(0,0,0,.35) 100%);
}

@media (max-width: 991.98px){
  #category-select > a{ padding: .75rem 1rem; font-size: .9rem; }
}

/* Liste des wilayas (monographies) : height:30rem en dur = trop haut sur mobile */
.cat-list.scrollbar2,
.list-group.scrollbar2{
  height: auto !important;
  max-height: 30rem;
  overflow-y: auto;
}
@media (max-width: 991.98px){
  .cat-list.scrollbar2,
  .list-group.scrollbar2{ max-height: 22rem; }
}
/* Barre de défilement de 16px remplacée par une barre fine */
.scrollbar2{ scrollbar-width: thin; }
.scrollbar2::-webkit-scrollbar{ width: 8px !important; }
.scrollbar2::-webkit-scrollbar-thumb{ border: 2px solid #fff !important; border-radius: 8px; }

/* Une .container imbriquée dans une colonne ajoutait une gouttière parasite */
[class*="col-"] > .container{ width: 100%; max-width: 100%; }