/* Feuille de style unique. Sobre, lisible, sans dépendance externe. */

:root {
  color-scheme: light;
  --encre: #1b2733;
  --encre-douce: #5a6b7b;
  --accent: #2a5d8f;
  --accent-fonce: #1f4569;
  --fond: #f6f7f9;
  --surface: #ffffff;
  --bordure: #dfe4ea;
  --ok: #1f7a4d;
  --attente: #8a6116;
  --alerte: #a83232;
  --rayon: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--encre);
  background: var(--fond);
}

a { color: var(--accent); }
a:hover { color: var(--accent-fonce); }

h1 { font-size: 1.6rem; margin: 0 0 1.2rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.8rem; }

/* En-tête et navigation ---------------------------------------------------- */
.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
}

.marque { font-weight: 600; text-decoration: none; color: var(--encre); }
.navigation { display: flex; flex-wrap: wrap; gap: 1rem; flex: 1; }
.navigation a { text-decoration: none; }
.navigation a:hover { text-decoration: underline; }
.deconnexion { display: flex; align-items: center; gap: 0.8rem; margin: 0; }
.identite { color: var(--encre-douce); font-size: 0.9rem; }

.contenu { max-width: 60rem; margin: 0 auto; padding: 1.5rem; }

.pied {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.5rem;
  color: var(--encre-douce);
  font-size: 0.85rem;
}

/* Blocs -------------------------------------------------------------------- */
.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1.2rem;
  margin-bottom: 1.2rem;
}

.carte-etroite { max-width: 30rem; margin-inline: auto; }

.bandeau {
  padding: 0.7rem 1rem;
  border-radius: var(--rayon);
  margin: 0 0 1.2rem;
  border: 1px solid transparent;
}
.bandeau-info { background: #eaf2fa; border-color: #c3d8ec; }
.bandeau-erreur { background: #fbeeee; border-color: #eccaca; color: var(--alerte); }

/* Formulaires -------------------------------------------------------------- */
.formulaire { display: flex; flex-direction: column; gap: 0.4rem; }
.formulaire label { font-weight: 600; font-size: 0.9rem; margin-top: 0.6rem; }
.formulaire-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.formulaire-grille {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 0.6rem 1rem;
  align-items: center;
}
.formulaire-grille label { font-weight: 600; font-size: 0.9rem; }
.formulaire-grille button { grid-column: 2; justify-self: start; }
.case { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }

input[type="text"], input[type="email"], input[type="password"], input[type="date"], select {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  font: inherit;
  background: var(--surface);
  color: var(--encre);
  width: 100%;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input[readonly] { background: var(--fond); color: var(--encre-douce); }

.bouton {
  align-self: flex-start;
  margin-top: 1rem;
  padding: 0.55rem 1.1rem;
  border: 0;
  border-radius: var(--rayon);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.bouton:hover { background: var(--accent-fonce); }

.lien {
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* Tableaux ----------------------------------------------------------------- */
.tableau { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tableau th, .tableau td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--bordure); vertical-align: top; }
.tableau th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--encre-douce); }
.tableau tbody tr:hover { background: #fafbfc; }
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.actions form { margin: 0; }

/* Indicateurs -------------------------------------------------------------- */
.discret { color: var(--encre-douce); font-size: 0.9rem; }
.alerte { color: var(--alerte); font-weight: 600; }

.etiquette {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  background: #eef1f4;
  color: var(--encre-douce);
}
.etiquette-ok { background: #e6f4ec; color: var(--ok); }
.etiquette-attente { background: #fbf2e0; color: var(--attente); }
.etiquette-inactif { background: #eef1f4; color: var(--encre-douce); }
.etiquette-alerte { background: #fbeeee; color: var(--alerte); }

.grille-compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.compteur {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  text-decoration: none;
  color: inherit;
}
.compteur-valeur { font-size: 1.6rem; font-weight: 600; }
.compteur-libelle { color: var(--encre-douce); font-size: 0.85rem; }
.compteur-alerte { border-color: #eccaca; }

.grille-sujets { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.carte-sujet { text-decoration: none; color: inherit; display: block; }
a.carte-sujet:hover { border-color: var(--accent); }
.intitule { font-size: 1.05rem; margin: 0.3rem 0; }

.liste-simple, .liste-rejets { margin: 0; padding-left: 1.1rem; }
.liste-simple li, .liste-rejets li { margin-bottom: 0.3rem; }
.liste-etapes { margin: 0; padding-left: 1.3rem; }
.liste-etapes li { margin-bottom: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; }
.etape-titre { font-weight: 600; }
.etapes-demarrage li { margin-bottom: 0.4rem; }
.aide { color: var(--encre-douce); font-size: 0.9rem; }

@media (max-width: 40rem) {
  .entete { padding: 0.8rem 1rem; }
  .contenu { padding: 1rem; }
  .formulaire-grille { grid-template-columns: 1fr; }
  .formulaire-grille button { grid-column: 1; }
  .tableau { font-size: 0.9rem; }
}

/* Étapes du carnet ---------------------------------------------------------- */
.fil { color: var(--encre-douce); font-size: 0.9rem; margin: 0 0 0.6rem; }
.consigne { font-size: 1.05rem; margin: 0 0 0.8rem; }

.champ { margin-bottom: 1.4rem; }
.champ-libelle { display: block; font-weight: 600; margin-bottom: 0.2rem; }
.champ-sous-libelle { display: block; font-size: 0.85rem; color: var(--encre-douce); margin-bottom: 0.2rem; }
.champ .aide { margin: 0 0 0.4rem; }

textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  font: inherit;
  line-height: 1.5;
  background: var(--surface);
  color: var(--encre);
  resize: vertical;
}

.element-liste { margin-bottom: 0.8rem; }
.barre-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1rem; }
.barre-actions .bouton { margin-top: 0; }
.barre-actions .aide { flex: 1; min-width: 15rem; margin: 0; }

.tableau-defilant { overflow-x: auto; }
.tableau-saisie input, .tableau-saisie textarea { min-width: 8rem; }
.tableau-saisie td { vertical-align: top; }

.champ-lecture { margin-bottom: 1.5rem; }
.champ-lecture h3 { font-size: 1rem; margin: 0 0 0.4rem; color: var(--encre-douce); }
.texte-long { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 0.6rem; }
.liste-arguments li { margin-bottom: 0.6rem; }
.carte-mentale { max-width: 100%; border: 1px solid var(--bordure); border-radius: var(--rayon); }

/* Bloc enseignant ----------------------------------------------------------- */
.bloc-enseignant { border-left: 4px solid var(--accent); }
.avis { border-top: 1px solid var(--bordure); padding-top: 0.8rem; margin-top: 0.8rem; }
.avis:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.avis-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0 0 0.4rem; }
.note { font-weight: 600; }
.note-globale { font-size: 1.4rem; font-weight: 600; margin: 0 0 0.5rem; }
.choix-statut { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 0.6rem 0.9rem; margin-top: 1rem; }
.choix-statut legend { font-weight: 600; font-size: 0.9rem; padding: 0 0.3rem; }

.etiquette-valide, .etiquette-ok { background: #e6f4ec; color: var(--ok); }
.etiquette-a_revoir { background: #fbeeee; color: var(--alerte); }
.etiquette-vu, .etiquette-partiel { background: #eef1f4; color: var(--encre-douce); }
.etiquette-en_attente { background: #fbf2e0; color: var(--attente); }
.etiquette-vierge { background: #eef1f4; color: var(--encre-douce); }

.liste-etat { list-style: none; margin: 0.6rem 0; padding: 0; }
.liste-etat li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0; }
.etat-etape { color: var(--encre-douce); font-size: 0.9rem; }

/* Comparaison de versions --------------------------------------------------- */
.legende-diff { display: flex; gap: 1rem; font-size: 0.85rem; margin-bottom: 1rem; }
.diff { line-height: 1.8; }
.diff-ajout { background: #e6f4ec; color: var(--ok); text-decoration: none; padding: 0.05rem 0.2rem; border-radius: 3px; }
.diff-retrait { background: #fbeeee; color: var(--alerte); padding: 0.05rem 0.2rem; border-radius: 3px; }

/* Grille d'évaluation ------------------------------------------------------- */
.sous-domaine { font-size: 0.95rem; margin: 1rem 0 0.4rem; color: var(--encre-douce); }
.tableau-grille th[scope="col"] { font-size: 0.75rem; }
.tableau-grille .critere { font-weight: 400; max-width: 24rem; }
.cellule-niveau { text-align: center; }
.case-niveau { display: inline-flex; padding: 0.3rem; cursor: pointer; }
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pastille { font-size: 0.75rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: #eef1f4; }
.pastille-1 { background: #e6f4ec; color: var(--ok); }
.pastille-2 { background: #eaf2fa; color: var(--accent); }
.pastille-3 { background: #fbf2e0; color: var(--attente); }
.pastille-4 { background: #fbeeee; color: var(--alerte); }