/* ============================================================
   Formulaire offerte en 3 étapes (porté depuis leegmakenwoning.be)
   Auto-suffisant : variables scopées sur .full-form-card,
   aucune collision avec Tailwind / animations.css du site.
   ============================================================ */
.full-form-card{
  --navy:#2d4156; --navy2:#1a2d3d;
  --orange:#ff5a1f; --orange2:#e04a10; --orange-light:rgba(255,90,31,.08);
  --green:#16a34a; --green-light:#dcfce7;
  --light:#f8f9fa; --gray:#6c757d; --gray2:#adb5bd; --text:#2d4156;
  --border:#dee2e6; --radius:12px; --radius-sm:8px; --radius-lg:16px;
  --shadow-lg:0 16px 48px rgba(0,0,0,.12); --trans:.3s ease;
  background:#fff;border-radius:var(--radius-lg);padding:34px 30px;box-shadow:var(--shadow-lg);
  color:var(--text);font-family:inherit;text-align:left;max-width:560px;margin:0 auto;
}
.full-form-card *{box-sizing:border-box}

/* Header */
.ffc-header{margin-bottom:24px;text-align:center}
.ffc-header h3{font-size:1.2rem;font-weight:800;color:var(--navy);margin:10px 0 4px}
.ffc-header p{font-size:.85rem;color:var(--gray);font-weight:400;margin:0}
.full-form-card .badge{display:inline-flex;align-items:center;gap:7px;background:var(--orange-light);color:var(--orange);font-size:.72rem;font-weight:700;padding:6px 16px;border-radius:50px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}
.full-form-card .badge-green{background:var(--green-light);color:var(--green)}

/* Steps progress bar */
.ffc-steps-bar{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:28px;padding:16px 18px;background:var(--light);border-radius:var(--radius);border:1px solid var(--border)}
.ffc-step-item{display:flex;align-items:center;gap:10px;font-size:.85rem;font-weight:600;color:var(--gray2);transition:all .3s;padding:0 6px}
.ffc-step-num{width:40px;height:40px;font-size:1rem;border-radius:50%;background:#fff;color:var(--gray);display:flex;align-items:center;justify-content:center;font-weight:800;transition:all .3s;flex-shrink:0;border:2.5px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.ffc-step-item.active .ffc-step-num{background:var(--orange);color:#fff;border-color:var(--orange);box-shadow:0 4px 16px rgba(255,90,31,.35);transform:scale(1.1)}
.ffc-step-item.active{color:var(--orange);font-weight:700}
.ffc-step-item.done .ffc-step-num{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 4px 12px rgba(22,163,74,.3)}
.ffc-step-item.done{color:var(--green)}
.ffc-step-line{width:46px;height:3px;margin:0 4px;background:var(--border);border-radius:2px;transition:background .3s;flex-shrink:0}
.ffc-step-line.done{background:var(--green)}
.ffc-step-label{display:none;font-size:.82rem;font-weight:600;color:var(--gray)}
.ffc-step-item.active .ffc-step-label{color:var(--orange)}
.ffc-step-item.done .ffc-step-label{color:var(--green)}
@media(min-width:480px){.ffc-step-label{display:inline}}

/* Steps */
.ffc-step{display:none}
.ffc-step.active{display:block;animation:ffcStepFade .3s ease-out}
@keyframes ffcStepFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.ffc-step-heading{font-size:1.02rem;font-weight:800;color:var(--navy);margin-bottom:18px;padding-bottom:12px;border-bottom:3px solid var(--orange)}

/* Fields */
.full-form-card .form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.full-form-card .form-field label{display:block;font-size:.8rem;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.06em}
.full-form-card .form-field input,.full-form-card .form-field select,.full-form-card .form-field textarea{border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;font-size:.9rem;color:var(--text);background:#fff;transition:border-color var(--trans),box-shadow var(--trans);outline:none;width:100%;font-family:inherit}
.full-form-card .form-field input:focus,.full-form-card .form-field select:focus,.full-form-card .form-field textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,90,31,.08)}
.full-form-card .form-field select{cursor:pointer}
.full-form-card .form-field textarea{resize:vertical;min-height:80px}
.full-form-card .form-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Radio / checkbox option pills */
.full-form-card .radio-group{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.full-form-card .radio-opt{display:flex;align-items:center;gap:8px;padding:9px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-size:.84rem;font-weight:500;transition:var(--trans);color:var(--text)}
.full-form-card .radio-opt span{color:var(--text);font-size:.84rem;font-weight:500}
.full-form-card .radio-opt:has(input:checked){border-color:var(--orange);background:var(--orange-light)}
.full-form-card .radio-opt:hover{border-color:var(--orange)}
.full-form-card .radio-opt input{accent-color:var(--orange);width:14px;height:14px;flex-shrink:0}
.full-form-card .check-group{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.full-form-card .check-opt{display:flex;align-items:center;gap:8px;padding:9px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-size:.84rem;font-weight:500;transition:var(--trans);color:var(--text)}
.full-form-card .check-opt span{color:var(--text);font-size:.84rem;font-weight:500}
.full-form-card .check-opt:has(input:checked){border-color:var(--orange);background:var(--orange-light)}
.full-form-card .check-opt:hover{border-color:var(--orange)}
.full-form-card .check-opt input{accent-color:var(--orange);width:14px;height:14px;flex-shrink:0}

/* Nav buttons */
.ffc-nav{display:flex;align-items:center;gap:8px;margin-top:16px}
.full-form-card .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:.92rem;padding:14px 28px;border-radius:50px;border:none;cursor:pointer;transition:var(--trans);white-space:nowrap;letter-spacing:.5px;text-transform:uppercase;font-family:inherit}
.full-form-card .btn-full{width:100%;font-size:1rem;padding:16px 30px}
.full-form-card .btn-orange{background:var(--orange);color:#fff}
.full-form-card .btn-orange:hover{background:var(--orange2);transform:scale(1.02);box-shadow:0 8px 32px rgba(255,90,31,.25)}
.ffc-btn-back{background:transparent;color:var(--gray);border:2px solid var(--border);border-radius:50px;font-weight:700;cursor:pointer;transition:var(--trans);font-family:inherit;padding:11px 22px;font-size:.9rem}
.ffc-btn-back:hover{border-color:var(--navy);color:var(--navy);transform:scale(1.02)}
.ffc-err{color:#e53e3e;font-size:.78rem;margin-top:4px;display:block;font-weight:500}
.form-privacy{text-align:center;font-size:.77rem;color:var(--gray2);margin-top:10px;display:flex;align-items:center;justify-content:center;gap:5px;font-weight:400}
.form-privacy i{color:var(--green)}

/* Responsive */
@media(max-width:560px){
  .full-form-card{padding:24px 18px}
  .full-form-card .form-2col,.full-form-card .check-group{grid-template-columns:1fr}
}

/* ─── Upload photos (formulaire offerte) ─── */
.ffc-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:2px dashed var(--border);border-radius:var(--radius-sm);padding:22px 16px;cursor:pointer;
  text-align:center;color:var(--gray);transition:border-color var(--trans),background var(--trans)}
.ffc-upload:hover{border-color:var(--orange);background:var(--orange-light)}
.ffc-upload i{font-size:1.5rem;color:var(--orange);margin-bottom:2px}
.ffc-upload .ffc-upload-txt{font-weight:600;color:var(--navy);font-size:.95rem}
.ffc-upload small{font-size:.78rem;color:var(--gray2)}
.ffc-photo-list{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.ffc-photo-item{display:flex;align-items:center;gap:8px;background:var(--light);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:7px 10px;font-size:.85rem;color:var(--text)}
.ffc-photo-item i{color:var(--orange)}
.ffc-photo-item .ffc-photo-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ffc-photo-item .ffc-photo-size{color:var(--gray2);font-size:.78rem}
.ffc-photo-item .ffc-photo-rm{cursor:pointer;color:var(--gray2);border:none;background:none;font-size:1rem;line-height:1;padding:0 2px}
.ffc-photo-item .ffc-photo-rm:hover{color:#e53e3e}
.ffc-photo-warn{color:#e53e3e;font-size:.8rem;margin-top:4px}