/* ── L'écran d'une proposition reçue (#13) ─────────────────────────────────
   Même grammaire que les quatre autres écrans : les jetons ci-dessus, aucune
   couleur en dur, aucune police de plus. Ce qui est propre à cet écran, c'est
   le TABLEAU — douze lignes qu'on corrige une à une —, et la hiérarchie entre
   ce qui bloque et ce qui se dit seulement.

   Aucun script : ce sont des `<form>`, des `<select>` et un `<details>`. */

.proposition-tete { margin: 1.5rem 0; }

.proposition-chiffres {
  display: flex; flex-wrap: wrap; gap: 2rem;
  padding: 1rem 1.25rem;
  background: var(--surface-creuse);
  border: 1px solid var(--trait);
  border-radius: 6px;
}
.proposition-chiffres dt {
  font-size: 0.8rem; color: var(--encre-tenue);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.proposition-chiffres dd {
  margin: 0.15rem 0 0; font-size: 1.35rem; color: var(--titre);
  font-variant-numeric: tabular-nums;
}

/* Les bloquants portent la couleur de refus, les signaux celle de l'accent.
   La distinction est dans la couleur ET dans le titre : « ce qui empêche de
   valider » contre « à regarder ». Une seule des deux ferait deviner. */
.proposition-bloquants, .proposition-signaux {
  margin: 1.25rem 0; padding: 0.9rem 1.1rem;
  border-radius: 6px; border-left: 3px solid;
}
.proposition-bloquants {
  background: var(--refus-fond); border-color: var(--refus-trait);
  color: var(--refus-encre);
}
.proposition-signaux {
  background: var(--accent-clair); border-color: var(--accent-trait);
  color: var(--encre-douce);
}
.proposition-bloquants h2, .proposition-signaux h2 {
  font-size: 0.9rem; margin: 0 0 0.4rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.proposition-bloquants ul, .proposition-signaux ul {
  margin: 0; padding-left: 1.1rem;
}
.proposition-bloquants li, .proposition-signaux li { margin: 0.2rem 0; }

/* Une ligne = un formulaire. En grille souple plutôt qu'en `<table>` : sur un
   téléphone, un tableau de sept colonnes déborde ou devient illisible, et cet
   écran s'ouvre souvent depuis Telegram. */
.ligne-proposee {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem;
  padding: 0.85rem 1rem; margin-bottom: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--trait); border-radius: 6px;
}
.ligne-signalee { border-left: 3px solid var(--accent-trait); }
.ligne-rang {
  flex: 0 0 100%; margin: 0 0 0.2rem;
  font-size: 0.8rem; color: var(--encre-tenue);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ligne-faite {
  margin-left: 0.5rem; color: var(--accent-texte); text-transform: none;
  letter-spacing: 0;
}
.ligne-proposee label {
  display: flex; flex-direction: column; gap: 0.2rem;
  font-size: 0.8rem; color: var(--encre-tenue);
}
.ligne-proposee input, .ligne-proposee select {
  padding: 0.35rem 0.45rem; font-size: 0.95rem;
  color: var(--encre); background: var(--surface);
  border: 1px solid var(--trait-fort); border-radius: 4px;
}
.ligne-proposee input[type="text"] { min-width: 9rem; }
.ligne-anomalie {
  flex: 0 0 100%; margin: 0.3rem 0 0;
  font-size: 0.85rem; color: var(--encre-douce);
}
.ligne-anomalie-bloquante { color: var(--refus-encre); }

.proposition-fin { margin: 2rem 0 3rem; }
.proposition-fin .note-bouton {
  margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--encre-tenue);
}
.proposition-fin button[disabled] {
  opacity: 0.45; cursor: not-allowed;
}

/* Replié, et discret. C'est un geste destructeur : il doit être atteignable
   sans être voisin du bouton de validation. */
.proposition-jeter { margin-top: 2rem; }
.proposition-jeter summary {
  cursor: pointer; font-size: 0.9rem; color: var(--encre-tenue);
}
.proposition-jeter p {
  margin: 0.6rem 0; font-size: 0.9rem; color: var(--encre-douce);
  max-width: 46rem;
}

/* ── Écran Proposition : ajouts après le premier essai réel ──────────────── */

/* Le module sous le nom de l'école : c'est l'école qui identifie la
   proposition, le module qui distingue les affaires d'une même école. */
.prop-module {
  margin: 0.3rem 0 0; color: var(--encre-douce); font-size: 1.05rem;
}

/* Le vide entre le bandeau des volumes et le bloc suivant était trop grand :
   les deux se lisent ensemble — combien est annoncé, et ce qui cloche. */
.proposition-tete { margin: 1.25rem 0 0.75rem; }
.proposition-bloquants, .proposition-signaux { margin: 0.75rem 0; }

/* Les actions groupées. Visuellement en retrait des lignes : ce n'est pas un
   cours, c'est un outil pour les remplir. */
.prop-groupe {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem;
  margin: 0 0 1rem; padding: 0.85rem 1rem;
  background: var(--surface-creuse);
  border: 1px dashed var(--trait-fort); border-radius: 6px;
}
.prop-groupe legend {
  padding: 0 0.4rem; font-size: 0.8rem; color: var(--encre-tenue);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.prop-groupe label {
  display: flex; flex-direction: column; gap: 0.2rem;
  font-size: 0.8rem; color: var(--encre-tenue);
}
.prop-groupe input, .prop-groupe select {
  padding: 0.35rem 0.45rem; font-size: 0.95rem;
  color: var(--encre); background: var(--surface);
  border: 1px solid var(--trait-fort); border-radius: 4px;
}
.prop-groupe-note {
  flex: 0 0 100%; margin: 0.2rem 0 0;
  font-size: 0.8rem; color: var(--encre-tenue);
}

/* Une croix, pas « ENREGISTRER CE COURS » douze fois. Discrète mais atteignable
   au doigt : cet écran s'ouvre depuis Telegram, donc souvent sur téléphone. */
.ligne-retirer {
  margin-left: auto; padding: 0.35rem 0.55rem;
  font-size: 0.95rem; line-height: 1;
  color: var(--encre-tenue); background: transparent;
  border: 1px solid var(--trait-fort); border-radius: 4px; cursor: pointer;
}
.ligne-retirer:hover {
  color: var(--refus-encre); border-color: var(--refus-trait);
}

.proposition-fin { display: flex; flex-wrap: wrap; gap: 1rem;
                   align-items: center; }
.proposition-fin .note-bouton { flex: 0 0 100%; }

/* ── Une proposition acceptée : l'écran change de nature ─────────────────
   Ce n'est plus un formulaire. Un bandeau plus voyant aurait traité le
   symptôme ; ce qui répond vraiment, c'est que l'écran dise ce qui existe
   maintenant et où le retrouver. */

.prop-faite {
  margin: 1.5rem 0; padding: 1.1rem 1.25rem;
  background: var(--accent-clair);
  border-left: 4px solid var(--accent-trait); border-radius: 6px;
  max-width: 46rem;
}
.prop-faite h2 {
  margin: 0 0 0.5rem; font-size: 1.15rem; color: var(--titre);
}
.prop-faite p { margin: 0.4rem 0; color: var(--encre); }
.prop-faite-liens { display: flex; gap: 1.5rem; margin-top: 0.8rem; flex-wrap: wrap; }
.prop-faite-liens a { color: var(--accent-texte); font-weight: 600; }

.prop-recap { list-style: none; margin: 0; padding: 0; }
.prop-recap li {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: 0.55rem 0; border-bottom: 1px solid var(--trait);
}
.prop-recap-quand {
  min-width: 11rem; color: var(--titre); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.prop-recap-quoi { flex: 1 1 14rem; color: var(--encre); }
.prop-recap-duree { color: var(--encre-tenue); font-size: 0.9rem; }
/* Une ligne sans séance après validation : la création s'est arrêtée en chemin.
   Le dire sur la ligne plutôt que de laisser croire que tout est passé. */
.prop-recap-manque {
  flex: 0 0 100%; color: var(--refus-encre); font-size: 0.85rem;
}

/* Ce que l'extraction n'a pas pu faire. En tête et lisible : une proposition
   sans ligne s'affiche autrement vide, et un écran vide se lit comme une panne
   plutôt que comme « le mail ne donnait pas de dates ». */
.prop-extraction {
  margin: 1.25rem 0; padding: 0.9rem 1.1rem;
  background: var(--surface-creuse);
  border-left: 3px solid var(--trait-fort); border-radius: 6px;
  max-width: 46rem;
}
.prop-extraction h2 {
  font-size: 0.9rem; margin: 0 0 0.4rem; color: var(--encre-tenue);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.prop-extraction p { margin: 0.3rem 0; color: var(--encre); }

/* --- Proposition ----------------------------------------------------- */

.proposition-lignes { display: grid; gap: 0.6rem; }