:root {
  --fault-pluriel_nom-bg: #ffe0c2;
  --fault-accord_adj-bg: #d6e4f8;
  --fault-accord_sv-bg: #ead6f3;
  --fault-er_vs_e-bg: #e8dcd6;
  --fault-homophones-bg: #f8d0d0;
  --fault-ponctuation-bg: #e0e0e0;
  --fault-majuscules-bg: #fff3c2;
  --fault-lexique-bg: #d8f0dd;
  --fault-invariables-bg: #c9ece7;
  --fault-accord_pp-bg: #f8caca;

  --fault-pluriel_nom-color: #ef6c00;
  --fault-accord_adj-color: #1565c0;
  --fault-accord_sv-color: #6a1b9a;
  --fault-er_vs_e-color: #5d4037;
  --fault-homophones-color: #c62828;
  --fault-ponctuation-color: #212121;
  --fault-majuscules-color: #f9a825;
  --fault-lexique-color: #2e7d32;
  --fault-invariables-color: #00695c;
  --fault-accord_pp-color: #b71c1c;
}

/* =====================================================
   TEXTE DE LA DICTÉE
   ===================================================== */
#dicteeText {
  line-height: 2.4;
  font-size: 1.15rem;
}

/* =====================================================
   ITEMS DE DICTÉE
   ===================================================== */
.dictee-item {
  display: inline-flex;
  align-items: center;
  margin: 0 .35em;
  white-space: nowrap;
}

.dictee-input {
  width: 6.2em;
  min-width: 6.2em;
  height: 1.6em;
  padding: 0 .25em;
  text-align: center;
  font-size: 1em;
  border-radius: .35rem;
  border: 2px solid #adb5bd;
  background-color: white; /* neutre par défaut */
  background-clip: padding-box;
}

/* =====================================================
   ÉTATS DE RÉPONSE
   ===================================================== */
.empty {border-left: 8px solid #74c0fc;}   /* bleu clair */
.correct {border-left: 8px solid #51cf66;}   /* vert */
.wrong {border-left: 8px solid #ff6b6b;}   /* rouge */
.partial {border-left: 8px solid #fcd719;}   /* jaune */

/* =====================================================
   FAUTES (dynamiques)
   ===================================================== */
.fault-pluriel_nom  { background-color: var(--fault-pluriel_nom-bg);}
.fault-accord_adj   { background-color: var(--fault-accord_adj-bg);}
.fault-accord_sv    { background-color: var(--fault-accord_sv-bg);}
.fault-er_vs_e      { background-color: var(--fault-er_vs_e-bg);}
.fault-homophones   { background-color: var(--fault-homophones-bg);}
.fault-ponctuation  { background-color: var(--fault-ponctuation-bg);}
.fault-majuscules   { background-color: var(--fault-majuscules-bg);}
.fault-lexique      { background-color: var(--fault-lexique-bg);}
.fault-invariables  { background-color: var(--fault-invariables-bg);}
.fault-accord_pp    { background-color: var(--fault-accord_pp-bg);}


.legend-dot {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  margin-right: 1em;
  flex-shrink: 0;
  border: 1px solid #adb5bd;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05);
}

.legend-dot.fault-pluriel_nom {
  background: var(--fault-pluriel_nom-bg);
  border-color: var(--fault-pluriel_nom-color);
}

.legend-dot.fault-accord_adj {
  background: var(--fault-accord_adj-bg);
  border-color: var(--fault-accord_adj-color);
}

.legend-dot.fault-accord_sv {
  background: var(--fault-accord_sv-bg);
  border-color: var(--fault-accord_sv-color);
}

.legend-dot.fault-er_vs_e {
  background: var(--fault-er_vs_e-bg);
  border-color: var(--fault-er_vs_e-color);
}

.legend-dot.fault-homophones {
  background: var(--fault-homophones-bg);
  border-color: var(--fault-homophones-color);
}

.legend-dot.fault-ponctuation {
  background: var(--fault-ponctuation-bg);
  border-color: var(--fault-ponctuation-color);
}

.legend-dot.fault-majuscules {
  background: var(--fault-majuscules-bg);
  border-color: var(--fault-majuscules-color);
}

.legend-dot.fault-lexique {
  background: var(--fault-lexique-bg);
  border-color: var(--fault-lexique-color);
}

.legend-dot.fault-invariables {
  background: var(--fault-invariables-bg);
  border-color: var(--fault-invariables-color);
}

.legend-dot.fault-accord_pp {
  background: var(--fault-accord_pp-bg);
  border-color: var(--fault-accord_pp-color);
}

/* =====================================================
   AUDIO
   ===================================================== */
.audio-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.audio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2em;
  width: 2em;
  padding: 0;
  margin-left: 5px;
  font-size: .75em;
  line-height: 1;
  border-radius: .35rem;
  border: 1px solid #adb5bd;
  background: #f8f9fa;
  cursor: pointer;
  overflow: hidden;
}

.audio-btn-main {
  padding: .4em .7em;
  font-size: 1rem;
  border-radius: .5rem;
  cursor: pointer;
}

.rate-wrap {
  margin-top: .5rem;
  text-align: center;
}

#speechRate {
  width: 120px;
  font-size: .85rem;
  padding: .25em .4em;
}

/* =====================================================
   RÉSULTATS
   ===================================================== */
.result-box {
  margin-top: 1rem;
}

.cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: .35rem 0;
}

.bar {
  flex: 1;
  height: 10px;
  background: #e9ecef;
  border-radius: 999px;
  overflow: hidden;
}

.bar > span {
  display: block;
  height: 100%;
  background: #0d6efd;
  width: 0%;
}

.muted {
  color: #6c757d;
  font-size: .95rem;
}

#mode-info {
  display: none;
}

.mode-test #mode-info {
  display: block;
  margin: .75rem 0 1rem;
  padding: .5rem .75rem;
  font-size: .9rem;
  font-weight: 600;
  color: #842029;              /* rouge Bootstrap sombre */
  background-color: #f8d7da;   /* rouge clair */
  border-left: 5px solid #dc3545;
  border-radius: .25rem;
}