/* =================================================================
   Espace MBA8641 : composants propres à l'espace de cours.
   Hérite entièrement de styles.css : mêmes variables, mêmes fontes,
   mêmes patrons visuels. Aucune couleur ni fonte nouvelle.
   ================================================================= */

/* ---- chargement, messages ---- */
.mba-chargement,
.mba-erreur {
  font-family: var(--sans);
  color: var(--gris-moyen);
  font-size: 16px;
  text-align: center;
  padding: 120px 24px;
}
.mba-vide {
  color: var(--gris-moyen);
  font-size: 15px;
}

/* ---- écran verrou (non connecté, non membre) ---- */
.mba-verrou {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}
.mba-verrou__carte {
  max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  padding: 44px 40px;
  text-align: center;
}
.mba-verrou__titre {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 27px;
  line-height: 1.15;
  color: var(--noir);
  margin: 18px 0 12px;
}
.mba-verrou__texte {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gris-moyen);
  margin: 0 0 26px;
}

/* ---- boutons ---- */
.mba-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--encre);
  background: var(--ambre);
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, transform 0.05s;
}
.mba-btn:hover { background: var(--brique); color: var(--creme); }
.mba-btn:active { transform: translateY(1px); }
.mba-btn--filet {
  background: none;
  color: var(--gris-moyen);
  border: 1px solid var(--bordure);
}
.mba-btn--filet:hover { background: none; color: var(--accent); border-color: var(--accent); }
.mba-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 26px 0 0;
}

/* ---- vue générique ---- */
.mba-vue { padding: 64px 0 96px; }
.mba-vue .lead__title { margin-bottom: 22px; }
.mba-intro {
  font-size: 17px;
  line-height: 1.7;
  color: var(--gris-moyen);
  margin: 0 0 8px;
  max-width: 40em;
}
.mba-lien {
  font-family: var(--label);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.mba-lien:hover { text-decoration: underline; }

/* ---- bandeau de régime de visibilité ---- */
.regime {
  background: var(--creme-fonce);
  border-left: 3px solid var(--ambre);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin: 0 0 34px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--anthracite);
}

/* ---- avis (pénalité de retard, avertissements) ----
   Même marquage que le retard : texte brique sur fond ambre pâle. */
.mba-avis {
  background: var(--ambre-pale);
  color: var(--brique);
  border-radius: 10px;
  padding: 13px 17px;
  margin: 0 0 26px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.55;
}

/* ---- tableau de bord : la prochaine séance ---- */
.tb-seance {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  padding: 26px 28px;
}
.tb-seance__date {
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 10px;
}
.tb-seance__question {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 25px;
  line-height: 1.2;
  color: var(--noir);
  margin: 0 0 6px;
}
.tb-seance__horaire {
  font-size: 14px;
  color: var(--gris-moyen);
  margin: 0 0 18px;
}
.tb-avant {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.tb-avant li {
  padding: 9px 0;
  border-top: 1px solid var(--bordure);
  line-height: 1.5;
  font-size: 15.5px;
}
.tb-avant label { display: flex; gap: 12px; align-items: baseline; cursor: pointer; }
.tb-avant input { accent-color: var(--ambre); flex: none; width: 17px; height: 17px; }

/* ---- tableau de bord : échéances ---- */
.tb-echeance {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 12px 14px;
  border-bottom: 1px solid var(--bordure);
  font-size: 15.5px;
  line-height: 1.5;
}
.tb-echeance:last-child { border-bottom: 0; }
.tb-echeance .tb-date {
  flex: none;
  min-width: 150px;
  font-size: 13px;
  color: var(--gris-moyen);
  font-variant-numeric: tabular-nums;
}
.tb-echeance .tb-titre { flex: 1 1 auto; }
.tb-etat {
  flex: none;
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gris-clair);
  white-space: nowrap;
}
.tb-retard {
  background: var(--ambre-pale);
  border-radius: 8px;
  border-bottom: 0;
}
.tb-retard .tb-titre,
.tb-retard .tb-date,
.tb-retard .tb-etat { color: var(--brique); }

/* ---- tableau de bord : engagement en cours ---- */
.tb-engagement {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  padding: 22px 26px;
  font-size: 15.5px;
}
.tb-engagement blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--noir);
  border-left: 3px solid var(--ambre);
  margin: 12px 0 14px;
  padding: 2px 0 2px 18px;
}

/* ---- échéancier ---- */
.ech-ligne {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 13px 14px;
  border-bottom: 1px solid var(--bordure);
  font-size: 15.5px;
  line-height: 1.5;
}
.ech-ligne:last-child { border-bottom: 0; }
.ech-date {
  flex: none;
  min-width: 160px;
  font-size: 13px;
  color: var(--gris-moyen);
  font-variant-numeric: tabular-nums;
}
.ech-titre { flex: 1 1 auto; }
.ech-poids {
  flex: none;
  font-family: var(--label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--creme);
  background: var(--encre);
  border-radius: 6px;
  padding: 3px 8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ech-ligne--passe { color: var(--gris-clair); }
.ech-ligne--passe .ech-date { color: var(--gris-clair); }
.ech-ligne--passe .ech-poids { background: var(--creme-fonce); color: var(--gris-moyen); }
.ech-ligne.tb-retard { border-bottom: 0; }

/* ---- cartes (séances, évaluations, instruments) ---- */
.cartes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 6px 0 0;
}
.carte {
  display: block;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  padding: 22px 24px;
  text-decoration: none;
  color: var(--anthracite);
  transition: border-color 0.15s;
}
.carte:hover { border-color: var(--ambre); }
.carte__etiquette {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 8px;
}
.carte__titre {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.25;
  color: var(--noir);
  margin: 0 0 8px;
}
.carte__meta {
  font-size: 13.5px;
  color: var(--gris-moyen);
  margin: 0;
  line-height: 1.5;
}

/* ---- le coffre à outils dans l'espace : sommaire des dix familles ----
   Les fiches elles-mêmes sont stylées par styles.css : ici, seulement la
   liste des familles et de leurs fiches. */
.coffre-familles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 44px;
  margin: 6px 0 0;
}
.coffre-famille__roman {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 4px;
}
.coffre-famille__nom {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  color: var(--noir);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bordure);
}
.coffre-fiche {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 7px 0;
  text-decoration: none;
  color: var(--anthracite);
  transition: color 0.15s;
}
.coffre-fiche:hover { color: var(--accent); }
.coffre-fiche__num {
  flex: none;
  min-width: 24px;
  font-family: var(--label);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.coffre-fiche__titre {
  display: block;
  font-size: 15px;
  line-height: 1.4;
}
.coffre-fiche__tagline {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--gris-clair);
}

/* ---- journal ---- */
.journal-pastilles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.journal-pastille {
  display: block;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: 16px 10px;
  text-decoration: none;
  color: var(--anthracite);
  transition: border-color 0.15s;
}
.journal-pastille:hover { border-color: var(--ambre); }
.journal-pastille__num {
  display: block;
  font-family: var(--label);
  font-size: 20px;
  font-weight: 700;
  color: var(--noir);
  font-variant-numeric: tabular-nums;
}
.journal-pastille__etat {
  display: block;
  margin-top: 4px;
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gris-clair);
}
.journal-remis {
  background: var(--ambre-pale);
  border-color: var(--ambre);
}
.journal-remis .journal-pastille__etat { color: var(--brique); }
.journal-compteur {
  font-family: var(--label);
  font-size: 12px;
  color: var(--gris-moyen);
  font-variant-numeric: tabular-nums;
}
.journal-compteur.est-depasse {
  color: var(--brique);
  font-weight: 600;
}

/* ---- journal : édition, remise, annotations ---- */
.journal-horodatage {
  font-family: var(--label);
  font-size: 13px;
  font-weight: 600;
  color: var(--gris-moyen);
  margin: 0 0 18px;
}
.journal-rappel {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--ambre);
  border-radius: 0 12px 12px 0;
  padding: 14px 18px;
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--anthracite);
}
.journal-champ { display: block; margin: 0 0 18px; }
.journal-champ__libelle {
  display: block;
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gris-moyen);
  margin: 0 0 8px;
}
.journal-editeur input[type="date"],
.journal-editeur textarea,
.engagement-carte input[type="date"],
.engagement-carte textarea,
.annotation-form textarea {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--anthracite);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: 12px 14px;
}
.journal-editeur textarea,
.engagement-carte textarea,
.annotation-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}
.journal-editeur textarea { min-height: 320px; }
.journal-editeur input[type="date"]:focus,
.journal-editeur textarea:focus,
.engagement-carte input[type="date"]:focus,
.engagement-carte textarea:focus,
.annotation-form textarea:focus {
  outline: none;
  border-color: var(--ambre);
}
.journal-barre {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 0;
}
.journal-enregistre {
  font-family: var(--label);
  font-size: 12px;
  color: var(--gris-moyen);
  font-variant-numeric: tabular-nums;
}
.journal-confirm {
  background: var(--ambre-pale);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 18px 0 0;
}
.journal-confirm__texte {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--brique);
}
.journal-erreur {
  margin: 12px 0 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--brique);
}
.journal-corps {
  white-space: pre-wrap;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  padding: 24px 28px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--anthracite);
  margin: 0 0 22px;
}
.annotation {
  border-left: 3px solid var(--ambre);
  padding: 4px 0 4px 16px;
  margin: 0 0 16px;
}
.annotation__date {
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 4px;
  font-variant-numeric: tabular-nums;
}
.annotation__corps {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--anthracite);
}
.annotation-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 6px 0 34px;
}

/* ---- courriel type (mini-360) ---- */
.courriel-type {
  background: var(--creme-fonce);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: 22px 26px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--anthracite);
  white-space: pre-wrap;
  margin: 0;
}

/* ---- fiches d'engagement de codéveloppement ---- */
.engagement-carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  padding: 24px 28px;
  margin: 0 0 26px;
}
.engagement-carte textarea { min-height: 88px; }
.engagement-carte textarea:disabled {
  background: var(--creme-fonce);
  color: var(--gris-clair);
  cursor: not-allowed;
  resize: none;
}
.engagement-carte .mba-actions { margin-top: 14px; }
.engagement-note {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gris-clair);
  margin-left: 8px;
}
/* Le miroir d'impression ne vit qu'à l'impression. */
.engagement-impression { display: none; }

/* ---- minuteur de codéveloppement (rempli à la tâche 10) ---- */
.minuteur {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  padding: 26px 28px;
  text-align: center;
}
.minuteur__no {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 6px;
}
.minuteur__etape {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 23px;
  color: var(--noir);
  margin: 0 0 6px;
}
.minuteur__consigne {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gris-moyen);
  max-width: 38em;
  margin: 0 auto 14px;
}
.minuteur__temps {
  font-family: var(--label);
  font-size: 52px;
  font-weight: 700;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.minuteur__temps.est-depasse { color: var(--brique); }
.minuteur__total {
  font-family: var(--label);
  font-size: 13px;
  color: var(--gris-moyen);
  font-variant-numeric: tabular-nums;
  margin: 8px 0 0;
}
.minuteur__encart {
  background: var(--ambre-pale);
  color: var(--brique);
  border-radius: 10px;
  padding: 13px 17px;
  margin: 16px 0 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.55;
}
.minuteur__boutons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 18px 0 0;
}
.minuteur__liste {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  text-align: left;
}
.minuteur__liste li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 2px;
  border-top: 1px solid var(--bordure);
  font-size: 14.5px;
  color: var(--gris-clair);
  font-variant-numeric: tabular-nums;
}
.minuteur__liste li.est-courante { color: var(--noir); font-weight: 600; }
.minuteur__liste li.est-faite { text-decoration: line-through; }

/* ---- responsive ---- */
@media (max-width: 700px) {
  .cartes { grid-template-columns: 1fr; }
  .coffre-familles { grid-template-columns: 1fr; }
  .journal-pastilles { grid-template-columns: repeat(2, 1fr); }
  .tb-echeance, .ech-ligne { flex-wrap: wrap; gap: 4px 14px; }
  .tb-echeance .tb-date, .ech-date { min-width: 0; width: 100%; }
}

/* =================================================================
   IMPRESSION : la vue courante (protocole, fiche, journal) sort sur
   une page Lettre US propre, comme les fiches du coffre.
   ================================================================= */
@media print {
  .mba-vue { padding: 0; font-size: 11pt; }
  .mba-actions, .mba-btn, .regime, .mba-lien, .minuteur,
  .journal-confirm, .journal-barre, .annotation-form { display: none !important; }
  .mba-vue .lead__title { font-size: 24pt; margin-bottom: 12pt; }
  .mba-intro { font-size: 11pt; margin-bottom: 8pt; }
  .mba-avis { padding: 8pt 12pt; margin-bottom: 12pt; }
  .tb-seance, .tb-engagement, .carte, .journal-pastille, .annotation,
  .tb-echeance, .ech-ligne, .courriel-type, .vnum li, .vlist li, .tbl {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .cartes { display: block; }
  .carte { margin-bottom: 10pt; }
  .tb-avant input { display: none; }
  .courriel-type { padding: 12pt 14pt; }
  .mba-avis, .tb-retard, .journal-remis {
    background: var(--ambre-pale) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Impression des fiches d'engagement : les champs de formulaire sont
   remplacés par leur miroir ; « Imprimer la fiche » ne sort que la
   carte marquée, sur une page Lettre US propre. */
@media print {
  .imprime-une-fiche .engagement-carte { display: none; }
  .imprime-une-fiche .engagement-carte.fiche-imprimee { display: block; }
  .engagement-carte {
    break-inside: avoid;
    page-break-inside: avoid;
    border: none;
    padding: 0;
    margin: 0 0 14pt;
  }
  .engagement-carte input[type="date"],
  .engagement-carte textarea,
  .engagement-note { display: none !important; }
  .engagement-carte .journal-champ { margin: 0 0 12pt; }
  .engagement-impression {
    display: block;
    white-space: pre-wrap;
    min-height: 1em;
    font-size: 11pt;
    line-height: 1.6;
    color: var(--anthracite);
  }
}

/* Fiches du recueil de lectures (vueLectures) */
.recueil { display: flex; flex-direction: column; gap: 14px; margin: 0 0 22px; }
.recueil-fiche {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--ambre);
  border-radius: 8px;
}
.recueil-fiche__titre { margin: 0 0 4px; font-family: var(--serif); font-size: 17px; color: var(--noir); }
.recueil-fiche__no {
  font-family: var(--label); font-size: 12px; font-weight: 700;
  color: var(--brique); background: var(--ambre-pale);
  padding: 2px 7px; border-radius: 999px; margin-right: 4px;
}
.recueil-fiche__meta { margin: 0 0 6px; font-size: 13px; color: var(--gris-moyen); }
.recueil-fiche__note { margin: 0; font-size: 14px; line-height: 1.55; color: var(--anthracite); }
@media print { .recueil-fiche { break-inside: avoid; } }