/* ═══════════════════════════════════════════════════════════════════
   LEGIS IMMO — Menus déroulants & calendrier sur-mesure
   Charte : marron #5C3A1E · or #C9A96E · crème #FEFCF9
   Les variables de backend.css sont réutilisées quand elles existent,
   avec repli explicite pour les pages publiques.
   ═══════════════════════════════════════════════════════════════════ */

/* Composants autonomes : ne dépendent pas du box-sizing de la page hôte */
.li-sel, .li-sel *, .li-sel-list, .li-sel-list *,
.li-cal, .li-cal *, .li-cal-field, .li-cal-field * { box-sizing: border-box; }

.li-sel, .li-cal, .li-cal-field, .li-sel-list {
  --_br:  var(--brown,   #5C3A1E);
  --_brd: var(--brown-d, #3D2400);
  --_gd:  var(--gold,    #C9A96E);
  --_gdd: var(--gold-d,  #A8844A);
  --_gbg: var(--gold-bg, #FBF7F0);
  --_ghv: var(--gold-hv, #F0E8D8);
  --_sf:  var(--surface, #FFFFFF);
  --_bd:  var(--border,  #EAE0D0);
  --_bdd: var(--border-d,#D4C0A8);
  --_tx:  var(--text,    #2C1A08);
  --_mu:  var(--muted,   #7A6048);
  --_li:  var(--light,   #A89070);
}

/* ══════════════════ MENUS DÉROULANTS ══════════════════ */
.li-sel { position: relative; display: block; width: 100%; min-width: 0; max-width: 100%; }
.li-sel-native {                      /* le <select> natif : présent mais invisible */
  position: absolute !important; opacity: 0 !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important;
  pointer-events: none !important; clip: rect(0 0 0 0); overflow: hidden;
}

.li-sel-btn {
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 14px;
  background: var(--_sf); color: var(--_tx);
  border: 1.5px solid var(--_bd); border-radius: 11px;
  font: inherit; font-size: .88rem; font-weight: 500;
  text-align: left; cursor: pointer;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.li-sel-btn:hover { border-color: var(--_bdd); background: var(--_gbg); }
.li-sel-btn:focus-visible { outline: none; border-color: var(--_gd); box-shadow: 0 0 0 3.5px rgba(201,169,110,.18); }
.li-sel.open .li-sel-btn {
  border-color: var(--_gd); background: var(--_sf);
  box-shadow: 0 0 0 3.5px rgba(201,169,110,.18);
}
.li-sel.is-disabled { opacity: .55; }
.li-sel.is-disabled .li-sel-btn { cursor: not-allowed; background: var(--_gbg); }

.li-sel-val {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.li-sel-val.is-empty { color: var(--_li); font-weight: 400; }

.li-sel-chev {
  width: 16px; height: 16px; flex: none; color: var(--_gdd);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.li-sel.open .li-sel-chev { transform: rotate(180deg); }

/* Variante compacte dans les tableaux */
.li-sel-pill .li-sel-btn {
  padding: 6px 10px 6px 12px; font-size: .78rem; border-radius: 99px;
}

/* La liste vit sur <body> : jamais rognée par une modale ou un tableau */
.li-sel-list {
  position: fixed; z-index: 4000;
  min-width: 180px; max-width: min(92vw, 380px);
  max-height: 292px; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px;
  background: var(--_sf);
  border: 1px solid var(--_bd); border-radius: 13px;
  box-shadow: 0 18px 44px -14px rgba(60,36,0,.30), 0 3px 10px rgba(60,36,0,.07);
  opacity: 0; transform: translateY(-6px) scale(.985);
  transition: opacity .16s ease, transform .16s cubic-bezier(.34,1.4,.64,1);
}
.li-sel-list.up { transform: translateY(6px) scale(.985); }
.li-sel-list.open { opacity: 1; transform: none; }
.li-sel-list::-webkit-scrollbar { width: 9px; }
.li-sel-list::-webkit-scrollbar-thumb { background: var(--_bdd); border-radius: 99px; border: 3px solid var(--_sf); }

.li-sel-opt {
  display: flex; align-items: center; width: 100%;
  padding: 9px 12px; margin: 1px 0;
  background: none; border: 0; border-radius: 9px;
  font: inherit; font-size: .86rem; color: var(--_tx);
  text-align: left; cursor: pointer;
  transition: background .13s, color .13s;
}
.li-sel-opt:hover:not(:disabled),
.li-sel-opt:focus-visible { background: var(--_gbg); outline: none; }
.li-sel-opt:focus-visible { box-shadow: inset 0 0 0 1.5px var(--_gd); }
.li-sel-opt.is-sel {
  background: var(--_ghv); color: var(--_brd); font-weight: 600;
}
.li-sel-opt.is-sel::after {
  content: ''; margin-left: auto; width: 15px; height: 15px; flex: none;
  background: currentColor;
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
          mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.li-sel-opt:disabled { opacity: .4; cursor: not-allowed; }

/* ══════════════════ CALENDRIER ══════════════════ */
.li-cal-field { position: relative; display: block; width: 100%; }
.li-cal-field input[type="text"] { width: 100%; cursor: pointer; padding-right: 40px; }
.li-cal-field.is-disabled { opacity: .55; }
.li-cal-field.is-disabled input { cursor: not-allowed; }

.li-cal-ico {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--_gdd);
  pointer-events: auto; cursor: pointer;
  transition: color .18s, transform .18s;
}
.li-cal-ico svg { width: 100%; height: 100%; display: block; }
.li-cal-field:hover .li-cal-ico { color: var(--_br); }
.li-cal-field.is-open .li-cal-ico { color: var(--_br); transform: translateY(-50%) scale(1.06); }

.li-cal {
  position: fixed; z-index: 4000; width: 306px; padding: 14px;
  background: var(--_sf);
  border: 1px solid var(--_bd); border-radius: 17px;
  box-shadow: 0 22px 52px -16px rgba(60,36,0,.34), 0 4px 12px rgba(60,36,0,.07);
  opacity: 0; transform: translateY(-8px) scale(.975);
  transition: opacity .18s ease, transform .18s cubic-bezier(.34,1.4,.64,1);
  font-size: .84rem;
}
.li-cal.up { transform: translateY(8px) scale(.975); }
.li-cal.show { opacity: 1; transform: none; }

.li-cal-head {
  display: flex; align-items: center; gap: 6px; margin-bottom: 12px;
}
.li-cal-nav {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: 9px;
  color: var(--_mu); cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.li-cal-nav svg { width: 17px; height: 17px; }
.li-cal-nav:hover { background: var(--_gbg); color: var(--_br); border-color: var(--_bd); }
.li-cal-title {
  flex: 1; padding: 7px 10px;
  background: none; border: 0; border-radius: 9px;
  font: inherit; font-size: .9rem; font-weight: 700; color: var(--_brd);
  text-transform: capitalize; letter-spacing: -.01em; cursor: pointer;
  transition: background .15s, color .15s;
}
.li-cal-title:hover { background: var(--_gbg); color: var(--_br); }

.li-cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 5px;
}
.li-cal-dow span {
  text-align: center; font-size: .66rem; font-weight: 700;
  color: var(--_li); text-transform: uppercase; letter-spacing: .06em;
  padding-bottom: 4px;
}
.li-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.li-cal-empty { display: block; }

.li-cal-day {
  aspect-ratio: 1; display: grid; place-items: center;
  background: none; border: 1.5px solid transparent; border-radius: 10px;
  font: inherit; font-size: .82rem; font-weight: 500; color: var(--_tx);
  cursor: pointer; transition: background .14s, color .14s, border-color .14s, transform .14s;
  animation: liDayIn .26s both cubic-bezier(.34,1.3,.64,1);
}
@keyframes liDayIn { from { opacity: 0; transform: translateY(4px) scale(.9); } to { opacity: 1; transform: none; } }
.li-cal-day:hover:not(:disabled) { background: var(--_gbg); border-color: var(--_bd); transform: translateY(-1px); }
.li-cal-day.is-wknd { color: var(--_mu); }
.li-cal-day.is-today { border-color: var(--_gd); color: var(--_brd); font-weight: 700; }
.li-cal-day.is-sel {
  background: var(--_br); border-color: var(--_br); color: #fff; font-weight: 700;
  box-shadow: 0 5px 14px -5px rgba(92,58,30,.65);
}
.li-cal-day.is-sel:hover { background: var(--_brd); border-color: var(--_brd); }
.li-cal-day.is-off { opacity: .28; cursor: not-allowed; }

.li-cal-years { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.li-cal-year {
  padding: 11px 4px; background: none; border: 1.5px solid transparent; border-radius: 10px;
  font: inherit; font-size: .82rem; font-weight: 500; color: var(--_tx);
  cursor: pointer; transition: background .14s, color .14s, border-color .14s;
}
.li-cal-year:hover:not(:disabled) { background: var(--_gbg); border-color: var(--_bd); }
.li-cal-year.is-mute { color: var(--_li); }
.li-cal-year.is-sel { background: var(--_br); border-color: var(--_br); color: #fff; font-weight: 700; }
.li-cal-year.is-off { opacity: .3; cursor: not-allowed; }

.li-cal-foot {
  display: flex; gap: 8px; margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--_bd);
}
.li-cal-act {
  flex: 1; padding: 8px 10px;
  background: var(--_gbg); border: 1px solid var(--_bd); border-radius: 9px;
  font: inherit; font-size: .76rem; font-weight: 600; color: var(--_br);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.li-cal-act:hover { background: var(--_ghv); border-color: var(--_bdd); }
.li-cal-act.is-clear { color: var(--_mu); }
.li-cal-act.is-clear:hover { color: #B91C1C; border-color: #FECACA; background: #FFF5F5; }

.fade-in    { animation: liFade .22s both; }
.slide-next { animation: liNext .24s both cubic-bezier(.3,.9,.4,1); }
.slide-prev { animation: liPrev .24s both cubic-bezier(.3,.9,.4,1); }
@keyframes liFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes liNext { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes liPrev { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* ══════════════════ MOBILE — confort tactile ══════════════════ */
@media (max-width: 640px) {
  .li-sel-btn { padding: 12px 12px 12px 14px; font-size: 16px; border-radius: 12px; }
  .li-sel-pill .li-sel-btn { padding: 8px 11px; font-size: .82rem; }
  .li-sel-list { max-height: 60vh; border-radius: 15px; }
  .li-sel-opt { padding: 12px 13px; font-size: .92rem; }
  .li-cal-field input[type="text"] { font-size: 16px; }   /* évite le zoom auto iOS */
  .li-cal { width: min(320px, calc(100vw - 16px)); padding: 14px; }
  .li-cal-day { font-size: .88rem; border-radius: 11px; }
  .li-cal-nav { width: 36px; height: 36px; }
  .li-cal-act { padding: 10px; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .li-sel-list, .li-cal, .li-cal-day, .li-cal-grid, .li-cal-years { transition: none; animation: none; }
}
