:root{
  --brand: #0f766e;         /* teal-600 */
  --brand-strong: #115e59;  /* teal-700 */
  --bgTop: #f6fffd;
  --bgMid: #e8faf7;
  --bgBot: #e3f6f3;
  --cardBorder: #e5e7eb;
  --textSoft: #475569;
}

/* Fond bleu doux */
body{
  background: linear-gradient(180deg, var(--bgTop) 0%, var(--bgMid) 60%, var(--bgBot) 100%);
}

/* Formulaires */
input, select, textarea { outline: none; }

/* Animation générique */
.fade-in { animation: fadeIn 180ms ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: translateY(0);} }

/* Cards */
.ff-card{
  background: #ffffff;
  border: 1px solid var(--cardBorder);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

/* Badges */
.badge { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .55rem; border-radius:999px; font-weight:700; font-size:.75rem; }
.badge-gold { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
.badge-silver { background:#f1f5f9; color:#334155; border:1px solid #cbd5e1; }
.badge-bronze { background:#ffedd5; color:#9a3412; border:1px solid #fdba74; }

/* Barre score */
/* Barre score (contraste renforcé) */
.scorebar{
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.14);  /* teal-600 très light */
  border: 1px solid rgba(15, 118, 110, 0.18);
  overflow: hidden;
}
.scorebar > div{
  height: 100%;
  background: linear-gradient(90deg, var(--brand), #22c55e);
}


/* Boutons radio (Q1/Q2/Q3) */
input[type="radio"].sr-only:checked + span {
  border-color: rgba(15, 118, 110, .45);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
  background: rgba(15, 118, 110, .06);
}

/* Texte secondaire (corrigé: le fichier était tronqué) */
.ff-muted { color: var(--textSoft); }

/* Home hero: animation légère de remplissage du score */
.ff-hero-bar{
  height: 100%;
  border-radius: 9999px;
  background: var(--brand);
  width: 0;
  animation: ffHeroFill 900ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 120ms;
}

/* Barre principale un poil plus lente */
.ff-hero-bar-main{
  animation-duration: 1100ms;
}

/* Utilise une variable --w en % : style="--w:78" */
@keyframes ffHeroFill{
  from { width: 0; }
  to { width: calc(var(--w) * 1%); }
}

/* Respect des préférences d’accessibilité */
@media (prefers-reduced-motion: reduce) {
  .ff-hero-bar, .ff-hero-bar-main{
    animation: none;
    width: calc(var(--w) * 1%);
  }
}
/* Fond principal du site (hors header / footer) */
.main-bg {
  background-image: url("../assets/bg/bg-business-light.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;

  /* voile clair pour la lisibilité */
  position: relative;
}

.main-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(246, 255, 253, 0.92); /* voile clair teal */
  pointer-events: none;
}