/* ═══════════════════════════════════════════════════════════════════
   LEGIS IMMO — Labels flottants (façon contact.php sur legis-consulting.com)
   Le script assets/js/li-float-labels.js ajoute la classe .li-float à
   n'importe quel conteneur de champ (.form-group, .field, .cg…) qui
   contient un <label> + un champ de saisie, quelle que soit la page.
   Tout le style ci-dessous ne dépend que de cette classe ajoutée par
   script : aucune modification du HTML existant n'est nécessaire.
   ═══════════════════════════════════════════════════════════════════ */

.li-float{position:relative}

.li-float > label,
.li-float > .label,
.li-float > .lbl,
.li-float > .form-label,
.li-float > .cl{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  margin:0!important; padding:0 5px; z-index:2; pointer-events:none;
  font-size:.84rem; font-weight:500; color:var(--muted,#7A6048);
  background:transparent; max-width:calc(100% - 30px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:top .16s ease,font-size .16s ease,font-weight .16s ease,
             color .16s ease,background-color .16s ease,transform .16s ease;
}

/* État flottant : label remonté au-dessus du champ, plus petit, accent or */
.li-float.is-float > label,
.li-float.is-float > .label,
.li-float.is-float > .lbl,
.li-float.is-float > .form-label,
.li-float.is-float > .cl{
  top:0; font-size:.66rem; font-weight:700; letter-spacing:.02em;
  color:var(--muted,#7A6048); background:var(--surface,#fff);
}
.li-float.is-focus > label,
.li-float.is-focus > .label,
.li-float.is-focus > .lbl,
.li-float.is-focus > .form-label,
.li-float.is-focus > .cl{ color:var(--brown,#5C3A1E) }

/* Espace réservé en haut pour le label, tout en gardant le texte/placeholder
   visuellement centré (padding équilibré + hauteur minimale). */
.li-float input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.li-float select,
.li-float .li-sel-btn,
.li-float .li-cal-field input[type="text"]{
  padding-top:14px!important; padding-bottom:8px!important;
  min-height:46px;
}
.li-float textarea{padding-top:16px!important; padding-bottom:8px!important}

/* Colonne latérale (icône e-mail/œil dans .input-wrap) : ne pas chevaucher le label */
.li-float .input-wrap,.li-float .iw{position:relative}

@media(max-width:480px){
  .li-float > label,.li-float > .label,.li-float > .lbl,.li-float > .form-label,.li-float > .cl{
    font-size:.78rem;max-width:calc(100% - 24px)
  }
}