/* =========================================================
   FÉAL — LEAD FORM (Startup Glassy + Floating Chip System)
   ========================================================= */

/* ---------- Lead Card Container ---------- */
.lead-card {
    position: relative;
    padding: 1.25rem;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  }
  @media (min-width: 992px) {
    .lead-card { padding: 2rem; }
  }
  
  /* Halo tournant autour de la carte */
  .lead-card__ring {
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    pointer-events: none;
    background: conic-gradient(
      from var(--angle, 0deg),
      rgba(24,178,165,0) 0deg,
      rgba(24,178,165,.35) 80deg,
      rgba(207,161,36,.35) 160deg,
      rgba(24,178,165,0) 260deg
    );
    mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
    -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
    padding: 1px;
    animation: leadRing 6s linear infinite;
    opacity: .55;
  }
  @keyframes leadRing { to { --angle: 360deg; } }
  
  .lead-card__head { margin-bottom: .75rem; }
  
  /* ---------- Checkbox + Validation ---------- */
  .lead-check .form-check-input {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.25);
  }
  .lead-check .form-check-input:checked {
    background-color: var(--feal-primary);
    border-color: var(--feal-primary);
    box-shadow: 0 0 0 .2rem rgba(24,178,165,.25);
  }
  .lead-submit.is-loading { pointer-events: none; opacity: .85; }
  .lead-submit.is-loading .lead-submit__spinner { display: inline-block !important; }
  #lead .invalid-feedback { color: #ffb3b3; }


  /* =========================================================
   FÉAL — Floating Chip Inputs (remplace form-floating)
   ========================================================= */
.feal-field {
    position: relative;
    margin-bottom: 1rem;
  }
  
  /* ---------- Inputs ---------- */
  .feal-input {
    width: 100%;
    color: #fff;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: .9rem;
    padding: 1.15rem 1rem .8rem 1rem;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
  }
  textarea.feal-input {
    min-height: 130px;
    padding-top: 2rem; /* espace supplémentaire pour textarea */
    resize: vertical;
  }
  .feal-input::placeholder { color: transparent; }
  
  .feal-input:focus {
    border-color: var(--feal-primary);
    background: rgba(255,255,255,.08);
    box-shadow: 0 0 0 .25rem rgba(24,178,165,.25);
  }
  
  /* ---------- Chip Label ---------- */
  .feal-chip {
    position: absolute;
    left: 12px;
    top: 12px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border-radius: .6rem;
    background: rgba(24,178,165,.20);
    border: 1px solid rgba(24,178,165,.35);
    color: var(--feal-text);
    line-height: 1;
    pointer-events: none;
    transition:
      top .18s ease,
      left .18s ease,
      background .18s ease,
      color .18s ease,
      box-shadow .18s ease,
      border-color .18s ease;
  }
  
  /* Flottement automatique au focus ou quand champ rempli */
  .feal-input:focus + .feal-chip,
  .feal-input:not(:placeholder-shown) + .feal-chip {
    top: -10px;
    left: 10px;
    background: var(--feal-primary);
    color: #05201d;
    border-color: transparent;
    box-shadow: 0 0 8px rgba(24,178,165,.35);
  }
  
  /* ---------- États d’erreur ---------- */
  .is-invalid.feal-input {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 .2rem rgba(255,107,107,.15);
  }
  .is-invalid.feal-input + .feal-chip {
    background: #ffb3b3;
    color: #301b1b;
    border-color: transparent;
    box-shadow: none;
  }
  
  /* ---------- Autofill Chrome ---------- */
  input.feal-input:-webkit-autofill,
  textarea.feal-input:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    box-shadow: 0 0 0 1000px rgba(255,255,255,.12) inset !important;
    transition: background-color 9999s ease-out 0s;
  }
  
  /* Désactive les restes de Bootstrap form-floating */
  .form-floating, .form-floating > label { all: unset; }