/* ===== Systeme de design Lkeria (aligne sur /outils/) =====
   Le CSS critique existant ci-dessus genere les classes .hentry/.property-* depuis
   function_cust_annonce_new.php, fichier que nous n'avons pas touche (trop de logique
   metier imbriquee pour restructurer sans pouvoir tester). On reskin ces classes ici
   plutot que de reecrire leur HTML. */
:root{
  --paper: #EFEAE0; --paper-card: #FBF8F2; --ink: #20261F; --ink-soft: #565C52;
  --pine: #2F4A34; --pine-dark: #1E3323; --pine-tint: #E3E9E1;
  --brass: #A9834F; --brass-light: #D8C39D; --brick: #9C4A3A; --rule: #D8D0BF; --radius: 3px;
}
body.page-right-sidebar{ background: var(--paper) !important; font-family:'Inter', sans-serif !important; }
.noo-wrapper{ background: transparent !important; }
.page-title, h1{ font-family:'Fraunces', serif !important; font-weight:600 !important; color: var(--pine-dark) !important; }
.breadcrumb{ background: var(--paper-card) !important; border:1px solid var(--rule); border-radius: var(--radius) !important; }
.breadcrumb > li > a{ color: var(--ink-soft) !important; }
.breadcrumb > li.active > a, .breadcrumb > li.active{ color: var(--pine-dark) !important; }

/* Barre de filtres (nouvelle disposition) */
.search-box{ background: var(--paper-card) !important; border-bottom:1px solid var(--rule) !important; padding: 18px 0 !important; }
.filters-row{ display:flex !important; gap:10px; align-items:flex-end; flex-wrap:wrap; margin:0 !important; }
.f-group{ display:flex; flex-direction:column; gap:5px; float:none !important; width:auto !important; padding:0 !important; }
.f-group label{
  font-family:'IBM Plex Mono', monospace !important; font-size:0.68rem !important; text-transform:uppercase; letter-spacing:0.06em; color: var(--ink-soft) !important;
  margin:0 !important;
}
.f-group .form-control{
  border:1px solid var(--rule) !important; border-radius: var(--radius) !important; background: var(--paper) !important;
  color: var(--ink) !important; box-shadow:none !important; height:40px !important; min-width:130px;
}
.f-surface .form-control{ width:110px !important; min-width:0 !important; }
.f-price .input-group{ display:flex !important; }
.f-price .form-control{ width:110px !important; min-width:0 !important; }
.f-price .input-group-addon{ background: var(--paper) !important; border:1px solid var(--rule) !important; color: var(--ink-soft) !important; height:40px; display:flex; align-items:center; }
.search-box #nb_pieces + .btn-group{ width:130px !important; max-width:130px !important; }
.search-box #nb_pieces + .btn-group .multiselect.dropdown-toggle{ width:100% !important; min-width:0 !important; max-width:130px !important; }
.f-submit{
  font-family:'Inter',sans-serif; font-weight:600; font-size:0.88rem; padding:0 22px; height:40px; border:none;
  border-radius: var(--radius); background: var(--pine-dark); color:#F4F1E8; cursor:pointer;
}
.f-submit:hover{ background: var(--pine); }

/* Filtres compacts sur mobile : masques par defaut, depliables via case a cocher (pas de JS) */
.lk-filters-toggle-input{
  position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}
.lk-filters-toggle-btn{ display:none; }
@media (max-width:767px){
  .filters-row{ display:none !important; flex-direction:column !important; align-items:stretch !important; margin-top:12px !important; }
  .filters-row .f-group{ width:100% !important; }
  .filters-row .f-group .form-control, .filters-row .f-group select{ min-width:0 !important; width:100% !important; }
  .lk-filters-toggle-btn{
    display:flex !important; align-items:center; gap:8px; background: var(--paper-card); border:1px solid var(--rule);
    border-radius: var(--radius); padding:12px 16px; font-family:'Inter',sans-serif; font-weight:600; font-size:0.9rem;
    color: var(--ink); cursor:pointer;
  }
  .lk-filters-toggle-input:checked ~ .filters-row{ display:flex !important; }
}

/* Multiselect (communes / pieces) - reskin du plugin JS */
.search-box .multiselect.dropdown-toggle{
  border:1px solid var(--rule) !important; border-radius: var(--radius) !important; background: var(--paper) !important;
  color: var(--ink) !important; box-shadow:none !important; height:40px !important; font-weight:400 !important; text-align:left !important;
}
.multiselect-container.dropdown-menu{
  border:1px solid var(--rule) !important; border-radius: var(--radius) !important; padding:6px !important;
  box-shadow: 0 12px 28px rgba(30,51,35,0.12) !important; font-family:'Inter', sans-serif !important;
  background-color: var(--paper-card) !important; background-image:none !important; opacity:1 !important; z-index:9999 !important;
}
.multiselect-container li{ padding:0 !important; }
.multiselect-container li a,
.multiselect-container li label{
  padding:8px 10px !important; font-size:0.88rem !important; color: var(--ink) !important; font-weight:400 !important;
  display:flex !important; align-items:center !important; gap:8px !important; border-radius: var(--radius) !important; cursor:pointer;
  background: none !important;
}
.multiselect-container li:hover,
.multiselect-container li a:hover{ background: var(--pine-tint) !important; }
.multiselect-container .multiselect-item.multiselect-all label{ font-weight:600 !important; text-transform:none !important; letter-spacing:0 !important; }
.multiselect-container input[type="checkbox"]{ margin:0 !important; accent-color: var(--pine); opacity:1 !important; position:static !important; }
.multiselect-container .divider{ border-top:1px solid var(--rule) !important; margin:4px 0 !important; }

/* Puces de filtres actifs */
.active-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.chip{
  display:inline-flex; align-items:center; gap:6px; background: var(--pine-tint); color: var(--pine-dark) !important;
  font-size:0.8rem; padding:5px 10px 5px 12px; border-radius:100px; border:none; font-family:'Inter',sans-serif; cursor:pointer;
}
.chip .x{ opacity:0.6; font-weight:700; }
.chip:hover .x{ opacity:1; }
.chip-clear{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color: var(--brass) !important; align-self:center; cursor:pointer; background:none; border:none; }

/* En-tete resultats */
.properties-header{ display:flex !important; justify-content:space-between !important; align-items:center !important; flex-wrap:wrap; gap:14px; margin-bottom:22px !important; float:none !important; width:auto !important; }
.properties-header .page-title{ font-family:'Fraunces', serif !important; font-size:1.3rem !important; color: var(--pine-dark) !important; font-weight:600 !important; margin:0 !important; display:table-cell; width:auto !important; }
.properties-header .page-title small{ color: var(--ink-soft) !important; font-size:0.7em !important; }
.lk-nb-result{ color: var(--brass) !important; }
/* Le plugin tagsManager.js (alimente par get_tags()) affiche ses propres pastilles orange,
   doublon des puces .active-chips ajoutees plus haut. On masque son rendu visuel sans toucher
   au champ cache sous-jacent (potentiellement utilise ailleurs, ex: creer une alerte). */
.tm-tag-list, ul.tm-tag-list, .tm-tag, .lk-hide-tags{ display:none !important; }
.properties-toolbar{ display:flex !important; align-items:center; gap:10px; float:none !important; width:auto !important; text-align:left !important; margin:0 !important; }
.properties-toolbar label{ display:none; }
#tri{ border:1px solid var(--rule) !important; border-radius: var(--radius) !important; background: var(--paper-card) !important; height:38px !important; font-size:0.85rem !important; }
.lk-view-toggle{ display:flex; border:1px solid var(--rule); border-radius: var(--radius); overflow:hidden; }
.lk-view-toggle button{ background: var(--paper-card); border:none; padding:0; width:38px; height:38px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lk-view-toggle button.lk-active{ background: var(--pine-dark); }
.lk-view-toggle button.lk-active span{ background: #fff; width:3px}
.lk-view-toggle button span{ background: var(--ink-soft); display:block; }
.lk-icon-grid{ display:grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap:3px; padding:10px !important; }
.lk-icon-grid span{ width:100%; height:100%; }
.lk-icon-list{ flex-direction:column; gap:4px; padding:12px 10px !important; }
.lk-icon-list span{ width:16px; height:2px; }

/* Reskin des cartes annonces (.hentry generees par get_result_recherche_new) */
.properties .hentry{ background: var(--paper-card) !important; border:1px solid var(--rule) !important; border-radius: var(--radius) !important; overflow:hidden; }
.properties .hentry .property-featured{ border-radius: 0 !important; }
.properties .hentry .property-label{ background: var(--pine-dark) !important; font-family:'IBM Plex Mono', monospace !important; font-weight:500 !important; }
.properties .hentry .property-category{ background: rgba(251,248,242,0.92) !important; color: var(--pine-dark) !important; }
.properties .hentry .property-title, .properties.list .property-title{ background: var(--paper-card) !important; font-family:'Fraunces', serif !important; font-weight:600 !important; color: var(--pine-dark) !important; }
.properties.list .property-wrap{ background: var(--paper-card) !important; }
.properties .hentry .property-info{ background: var(--pine-tint) !important; }
.properties .hentry .property-info .property-price{ color: var(--pine-dark) !important; font-family:'Fraunces', serif !important; }
.properties .hentry .property-info .property-action a{ background: var(--brass) !important; color:#fff !important; }
.properties .hentry .featured{ color: var(--brass) !important; }
a{ color: var(--pine) !important; }
.btn-warning, .btn-success{ background: var(--pine-dark) !important; border-color: var(--pine-dark) !important; color:#F4F1E8 !important; text-shadow:none !important; }

/* Nouvelle grille de cartes (structure lk-card generee par get_result_recherche_new) */
.properties-content{ display:grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; }
.properties-content:before, .properties-content:after{ display:none !important; content:none !important; }
@media (max-width:980px){ .properties-content{ grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width:640px){ .properties-content{ grid-template-columns: 1fr !important; } }
.properties-content.lk-view-list{ display:flex !important; flex-direction:column !important; }
.properties-content.lk-view-list .lk-card-link{ display:flex !important; }
.properties-content.lk-view-list .lk-card-photo{ width:220px !important; height:150px !important; flex-shrink:0; }
.properties-content.lk-view-list .lk-card-body{ flex:1; }
@media (max-width:600px){
  .properties-content.lk-view-list .lk-card-link{ flex-direction:column !important; }
  .properties-content.lk-view-list .lk-card-photo{ width:100% !important; height:180px !important; }
}
.lk-card{ position:relative; background: var(--paper-card); border:1px solid var(--rule); border-radius: var(--radius); overflow:hidden; transition: border-color .15s ease, transform .15s ease; }
.lk-card:hover{ border-color: var(--pine); transform: translateY(-2px); }
.lk-card-link{ display:block; color:inherit; text-decoration:none; }
.lk-card-photo{ height:180px; background: var(--pine-tint); position:relative; overflow:hidden; }
.lk-card-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.lk-card-tag{
  position:absolute; top:12px; left:12px; background: var(--pine-dark); color:#F4F1E8; font-family:'IBM Plex Mono', monospace;
  font-size:0.66rem; text-transform:uppercase; padding:5px 10px; border-radius: var(--radius); z-index:2;
}
.lk-card-pro{
  position:absolute; bottom:12px; left:12px; background:rgba(251,248,242,0.92); color: var(--pine-dark);
  font-size:0.7rem; padding:4px 9px; border-radius:100px; font-weight:600; z-index:2;
}
.lk-card-fav{ position:absolute; top:10px; right:10px; z-index:3; }
.lk-card-fav a{
  display:flex; width:30px; height:30px; border-radius:50%; background:rgba(251,248,242,0.9);
  align-items:center; justify-content:center; color: var(--brass); text-decoration:none;
}
.lk-card-body{ padding:16px; }
.lk-card-price{ font-family:'Fraunces', serif; font-weight:600; font-size:1.1rem; color: var(--pine-dark); }
.lk-card-price .amount{ font-family:'Fraunces', serif; }
.lk-card-title{ font-size:0.92rem; margin:4px 0 8px; color: var(--ink); }
.lk-card-facts{ display:flex; gap:12px; font-family:'IBM Plex Mono', monospace; font-size:0.75rem; color: var(--ink-soft); margin-bottom:8px; }
.lk-card-loc{ font-size:0.8rem; color: var(--brass); }
.properties-content > h2, .properties-content > article.hentry.center, .properties-content > nav.pagination-nav{ grid-column: 1 / -1; }

/* Pagination (paginate2 genere des classes .page-numbers / .page-numbers.current, pas du Bootstrap standard) */
.pagination-nav{ display:flex; justify-content:center; margin-top: 24px; }
.pagination-nav .pagination{
  display:flex !important; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px;
  list-style:none !important; margin:0 !important; padding:0 !important;
}
.pagination-nav .pagination li{ float:none !important; display:inline-flex; }
.pagination-nav .pagination .page-numbers{
  display:flex !important; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px;
  border:1px solid var(--rule) !important; border-radius: var(--radius) !important; background: var(--paper-card) !important;
  color: var(--ink) !important; font-family:'Inter', sans-serif; font-size:0.88rem; text-decoration:none !important;
}
.pagination-nav .pagination .page-numbers:hover{ border-color: var(--pine) !important; color: var(--pine-dark) !important; }
.pagination-nav .pagination .page-numbers.current{
  background: var(--pine-dark) !important; border-color: var(--pine-dark) !important; color:#F4F1E8 !important; font-weight:600;
}
.pagination-nav .pagination a.page-numbers[href="#"]{
  border:none !important; background:none !important; cursor:default; color: var(--ink-soft) !important; min-width:auto; padding:0 4px;
}
/* Tooltip d'aide - conversion million/DA */
.lk-info-tip{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  margin-left:6px;
  border-radius:50%;
  background:var(--brass, #b08d57);
  color:#fff;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  line-height:1;
  vertical-align:middle;
}
.lk-info-tip .lk-info-bubble{
  display:none;
  position:absolute;
  top:22px;
  left:50%;
  transform:translateX(-50%);
  width:220px;
  background:var(--pine-dark, #1f3d33);
  color:#fff;
  font-size:12px;
  font-weight:400;
  line-height:1.4;
  padding:8px 10px;
  border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
  z-index:50;
  text-align:left;
  white-space:normal;
}
.lk-info-tip .lk-info-bubble::after{
  content:"";
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-bottom-color:var(--pine-dark, #1f3d33);
}
.lk-info-tip.lk-open .lk-info-bubble,
.lk-info-tip:hover .lk-info-bubble{
  display:block;
}
@media (max-width:480px){
  .lk-info-tip .lk-info-bubble{
    width:180px;
    left:auto;
    right:-10px;
    transform:none;
  }
  .lk-info-tip .lk-info-bubble::after{
    left:auto;
    right:14px;
    transform:none;
  }
}