:root{
  --yango-red:#ff2b2b;
  --dacars-teal:#1aa9b0;

  --bg:#0b0f14;
  --card:#0f1620;

  --text:#e9eef5;
  --muted: rgba(233,238,245,.72);

  --field-bg: rgba(255,255,255,.06);
  --field-border: rgba(255,255,255,.12);
  --field-border-focus: rgba(255,43,43,.65);
}

/* Base */
body{
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(255,43,43,.18), transparent 60%),
    radial-gradient(1000px 500px at 80% 10%, rgba(26,169,176,.14), transparent 55%),
    var(--bg);
  color:var(--text);
}

/* Navbar */
.nav-glass{
  background: rgba(10,14,20,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Buttons */
.btn-yango{
  background: var(--yango-red);
  border-color: var(--yango-red);
  color:#fff;
  box-shadow: 0 12px 30px rgba(255,43,43,.25);
}
.btn-yango:hover{ filter: brightness(.95); }

/* Badges */
.badge-teal{ background: rgba(26,169,176,.18); border:1px solid rgba(26,169,176,.35); color:#bff6f8; }
.badge-red{ background: rgba(255,43,43,.14); border:1px solid rgba(255,43,43,.35); color:#ffd0d0; }

/* Cards */
.card-soft{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

/* Titles */
.hero-title{
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
}

/* ✅ Forms (Bootstrap friendly) */
.form-label{
  color: var(--muted);
  font-weight: 600;
}

.form-text{
  color: rgba(233,238,245,.55) !important;
}

.form-control,
.form-select,
.form-control:disabled,
.form-select:disabled{
  background: var(--field-bg) !important;
  border: 1px solid var(--field-border) !important;
  color: var(--text) !important;
  border-radius: 14px;
  padding: .75rem .9rem;
}

.form-control::placeholder{
  color: rgba(233,238,245,.45) !important;
}

.form-control:focus,
.form-select:focus{
  border-color: var(--field-border-focus) !important;
  box-shadow: 0 0 0 .25rem rgba(255,43,43,.12) !important;
  background: rgba(255,255,255,.08) !important;
  color: var(--text) !important;
}

/* ✅ Select options visibility */
.form-select option{
  background: #0f1620;
  color: #e9eef5;
}

/* ✅ Textareas */
textarea.form-control{
  min-height: 110px;
  resize: vertical;
}

/* ✅ Checkbox / radio */
.form-check-input{
  background-color: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}
.form-check-input:checked{
  background-color: var(--yango-red);
  border-color: var(--yango-red);
}
.form-check-label{
  color: rgba(233,238,245,.85);
}

/* ✅ Fix Chrome autofill (le vrai coupable du blanc) */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,.06) inset !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

/* ✅ Input groups */
.input-group-text{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(233,238,245,.8);
  border-radius: 14px;
}

/* ✅ Tables (si tu en as côté public) */
.table{
  color: var(--text);
}
.table td, .table th{
  border-color: rgba(255,255,255,.08);
}

/* Success animation */
.success-check{ width: 92px; height: 92px; }
.check-svg{ width: 92px; height: 92px; }
.check-circle{
  fill: transparent;
  stroke: rgba(255,255,255,.25);
  stroke-width: 6;
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
  animation: circleDraw .8s ease forwards;
}
.check-mark{
  fill: none;
  stroke: var(--yango-red);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: checkDraw .5s ease forwards .7s;
}
@keyframes circleDraw{ to{ stroke-dashoffset: 0; } }
@keyframes checkDraw{ to{ stroke-dashoffset: 0; } }