/* ═══ LEX DESIGN — forms.css : champs en verre creusé ═══ */
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:700}
.form-input,
.field input,.field select,.field textarea{
  width:100%;background:var(--glass-bg);border:none;border-radius:15px;color:var(--text);
  font-size:14px;padding:10px 13px;outline:none;font-family:var(--font);
  box-shadow:inset 0 0 0 1px var(--glass-border),inset 0 2px 4px rgba(0,0,0,.14),inset 0 -1px 0 var(--hl-low);
  transition:box-shadow .2s}
.form-input:focus,
.field input:focus,.field select:focus,.field textarea:focus{
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent-app) 65%,transparent),
    0 0 0 4px color-mix(in srgb,var(--accent-app) 18%,transparent),
    inset 0 2px 4px rgba(0,0,0,.14)}
.form-input::placeholder,.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.55}
.field{display:grid;gap:5px;margin-bottom:12px}
.field label,.field span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.field textarea{resize:vertical;min-height:72px}

.pwd-wrap{position:relative;display:flex;align-items:center}
.pwd-wrap input{padding-right:42px}
.pwd-eye{position:absolute;right:10px;background:none;border:none;cursor:pointer;font-size:16px;padding:0;line-height:1;opacity:.5;transition:opacity .15s}
.pwd-eye:hover{opacity:1}

select{background:var(--glass-bg);border:none;border-radius:13px;color:var(--text);padding:9px 12px;font-size:14px;outline:none;
  cursor:pointer;font-family:var(--font);
  box-shadow:inset 0 0 0 1px var(--glass-border);transition:box-shadow .2s}
select:focus{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent-app) 60%,transparent)}
select option{background:var(--bg);color:var(--text)}

.rem-eq-checks{display:flex;flex-direction:column;gap:2px;max-height:180px;overflow-y:auto;border-radius:14px;padding:8px 10px;
  background:var(--glass-bg);box-shadow:inset 0 0 0 1px var(--glass-border)}
.rem-eq-item{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text);transition:background .12s}
.rem-eq-item:hover{background:rgba(255,255,255,.06)}
.rem-eq-item input[type=checkbox]{width:15px;height:15px;flex-shrink:0;accent-color:var(--accent-app);cursor:pointer}
input[type=checkbox]{accent-color:var(--accent-app)}

/* interrupteur iOS */
.switch{position:relative;width:48px;height:28px;border-radius:99px;background:var(--glass-bg);
  box-shadow:inset 0 0 0 1px var(--glass-border),inset 0 2px 4px rgba(0,0,0,.18);transition:all .25s;flex-shrink:0;cursor:pointer;border:none}
.switch::after{content:"";position:absolute;top:2.5px;left:2.5px;width:23px;height:23px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#dfe3ee);box-shadow:0 2px 7px rgba(0,0,0,.4),inset 0 1px 0 #fff;
  transition:left .25s cubic-bezier(.34,1.56,.64,1)}
.switch.on{background:color-mix(in srgb,var(--accent-app) 70%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-app) 55%,transparent),0 0 14px color-mix(in srgb,var(--accent-app) 30%,transparent)}
.switch.on::after{left:22.5px}

/* ═══ Champs des autres apps ═══ */
.input,textarea.input,.search,.g-search,.sb-select{
  background:var(--glass-bg)!important;border:none!important;color:var(--text);
  box-shadow:inset 0 0 0 1px var(--glass-border),inset 0 2px 4px rgba(0,0,0,.14)}
.input:focus,textarea.input:focus,.search:focus,.g-search:focus{
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent-app) 65%,transparent),
    0 0 0 4px color-mix(in srgb,var(--accent-app) 16%,transparent)!important;outline:none!important}

/* ═══ Champs SANS classe (toutes apps) : même verre creusé.
   :where() = spécificité nulle → les styles à classe gardent la main. ═══ */
input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]):not([type=hidden])),
textarea{
  background:var(--glass-bg);border:none;border-radius:14px;color:var(--text);
  font-family:var(--font);font-size:14px;padding:10px 13px;outline:none;
  box-shadow:inset 0 0 0 1px var(--glass-border),inset 0 2px 4px rgba(0,0,0,.14);
  transition:box-shadow .2s}
input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]):not([type=hidden])):focus,
textarea:focus{
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent-app) 65%,transparent),
    0 0 0 4px color-mix(in srgb,var(--accent-app) 18%,transparent),
    inset 0 2px 4px rgba(0,0,0,.14)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.55}

/* ── FIX CHAMPS DATE IOS (deploy103) ────────────────────────────────────
   Safari iOS impose aux input date/time une apparence + largeur natives :
   le champ devient plus large que les autres et déborde du .field/.modal.
   On neutralise l'apparence pour que width:100% s'applique partout. */
.field input[type=date], .field input[type=time],
.field input[type=datetime-local], .field input[type=month],
.form-input[type=date], .form-input[type=time],
.form-input[type=datetime-local], .form-input[type=month]{
  -webkit-appearance:none; appearance:none;
  min-width:0; max-width:100%; width:100%;
  display:block; min-height:43px; text-align:left;
}
.field input[type=date]::-webkit-date-and-time-value,
.form-input[type=date]::-webkit-date-and-time-value{
  text-align:left; margin:0;
}

/* ── FIX SWITCH TEXTE (deploy114) ───────────────────────────────────────
   .switch désigne DEUX choses : l'interrupteur iOS ci-dessus (forms.css)
   ET la ligne « changer de vue » des pages de connexion (Panel :
   « Pas encore de compte LEX ? / Mot de passe oublié ? »). L'interrupteur
   écrasait le texte en pilule 48×28 avec le bouton blanc par-dessus.
   Un .switch qui contient un lien <a> n'est PAS un interrupteur :
   on lui rend son apparence de texte. */
.switch:has(a){position:static;width:auto;height:auto;border-radius:0;
  background:none;box-shadow:none;transition:none;cursor:auto;flex-shrink:1}
.switch:has(a)::after{content:none}