/* redaction.css — Exercices de rédaction (géométrie) — mathsetmoi.fr
 * Autonome : ne dépend pas de math-notation.css (fractions rendues ici). */

.redaction {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1f2937;
  line-height: 1.6;
  max-width: 820px;
}

.red-titre {
  font-size: 1.15rem;
  color: #2874a6;
  margin: 0 0 .8rem;
}

/* ---------- Énoncé : figure + consigne ---------- */
.red-enonce {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.red-figure {
  flex: 0 0 240px;
  max-width: 240px;
}
.red-figure svg { width: 100%; height: auto; }
.red-figerr {
  border: 1px dashed #f59e0b;
  background: #fffbeb;
  color: #92400e;
  border-radius: 8px;
  padding: .6rem;
  font-size: .9rem;
  margin: 0;
}
.red-consigne { flex: 1 1 260px; min-width: 240px; }
.red-donnees { font-weight: 600; margin: .2rem 0 .4rem; }
.red-note { color: #1d4ed8; font-weight: 600; margin: 0 0 .5rem; }
.red-aide { color: #4b5563; font-size: .95rem; margin: 0; }

/* ---------- Liste de blocs déplaçables ---------- */
.red-list {
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  padding: .5rem;
  background: #f8fafc;
  margin-bottom: 1rem;
}
.red-bloc {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #fff;
  border: 1px solid #d7dee6;
  border-radius: 8px;
  padding: .55rem .7rem;
  margin: .4rem 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.red-handle {
  flex: 0 0 auto;
  cursor: grab;
  color: #94a3b8;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 .2rem;
  user-select: none;
  touch-action: none;    /* évite le scroll pendant le glisser tactile */
}
.red-handle:active { cursor: grabbing; }
.red-content { flex: 1 1 auto; }
.red-liaison { font-weight: 700; color: #2874a6; }

.red-dragging {
  box-shadow: 0 8px 20px rgba(15, 23, 42, .25);
  opacity: .96;
}
.red-placeholder {
  border: 2px dashed #38bdf8;
  border-radius: 8px;
  background: rgba(56, 189, 248, .08);
  margin: .4rem 0;
}

/* ---------- Champs de saisie ---------- */
.red-in {
  font: inherit;
  text-align: center;
  border: 1px solid #94a3b8;
  border-radius: 5px;
  padding: .1rem .2rem;
  background: #fff;
  text-transform: uppercase;
}
.red-in-1 { width: 2.1ch; }
.red-in-2 { width: 3.1ch; }
.red-in-mot { width: 9ch; text-transform: none; }
.red-select { text-transform: none; padding: .12rem .3rem; }
.red-in-num {
  width: 6ch;
  text-transform: none;
  text-align: right;
}
.red-in:focus { outline: 2px solid #38bdf8; outline-offset: 1px; }

/* ---------- Rapports (fractions) ---------- */
.red-ratios {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.red-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.red-frac .red-in { margin: 1px 0; }
.red-frac-bar {
  width: 100%;
  min-width: 3.1ch;
  border-top: 2px solid #1f2937;
}
.red-eq { font-weight: 600; }

/* ---------- Calcul + réponse ---------- */
.red-calcul { margin: .4rem 0 1rem; }
.red-calcul label,
.red-reponse label { font-weight: 600; margin-right: .4rem; }
.red-calcul-zone {
  display: block;
  width: 100%;
  margin-top: .3rem;
  font: inherit;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: .5rem;
  resize: vertical;
}
.red-reponse { font-size: 1.05rem; }
.red-unite { color: #4b5563; }

/* ---------- États de correction ---------- */
.red-ok {
  border-color: #16a34a !important;
  background: #dcfce7 !important;
}
.red-ko {
  border-color: #dc2626 !important;
  background: #fee2e2 !important;
}
.red-bloc.red-ok { box-shadow: inset 3px 0 0 #16a34a, 0 1px 2px rgba(15, 23, 42, .06); }
.red-bloc.red-ko { box-shadow: inset 3px 0 0 #dc2626, 0 1px 2px rgba(15, 23, 42, .06); }

/* ---------- Page de test autonome ---------- */
.red-page { max-width: 880px; margin: 1.5rem auto; padding: 0 1rem; }
.red-actions { margin: 1rem 0; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.red-actions button {
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  padding: .5rem 1rem;
  background: #3498db;
  color: #fff;
}
.red-actions button:hover { background: #2980b9; }
#btn-refaire { background: #64748b; }
#btn-refaire:hover { background: #475569; }
.red-verdict { font-weight: 700; margin-left: .4rem; }
.red-verdict-ok { color: #16a34a; }
.red-verdict-ko { color: #dc2626; }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .red-enonce { flex-direction: column; }
  .red-figure { flex-basis: auto; max-width: 100%; width: 220px; margin: 0 auto; }
}