/* Quiz, auto-évaluation et constellation.

   RÈGLE DE BASE : rien n'est écrit en dur ici qui existe déjà en réglage.
   Les cartes vivent dans la zone de conversation (.altair-conversation), donc
   elles héritent de la police, de la taille, de l'interlignage et du couple
   fond/texte choisis par le parent dans l'espace parents. Les seules couleurs
   propres à ce fichier sont dérivées de ce couple (--altair-surface,
   --altair-bordure), jamais des teintes fixes : une carte qui garderait un
   fond blanc en mode sombre serait illisible exactement pour les élèves à qui
   le mode sombre servait.

   PAS D'ANIMATION D'APPARITION. Aucune carte n'arrive en fondu, en glissement
   ou en rebond. Un mouvement dans le champ de vision pendant qu'on lit coûte
   le fil de la lecture, et c'est un coût qu'une partie du public de ce produit
   paie très cher. */

/* ---------- Constellation (barre de la porte d'entrée directe) ---------- */

.constellation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
  min-height: 2.1rem;
}

.constellation-vide {
  margin: 0;
  font-size: 0.85rem;
  color: #666;
}

.constellation-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.etoile {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem 0.25rem 0.5rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}

.etoile:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}

.etoile:disabled {
  opacity: 0.45;
  cursor: default;
}

.etoile-glyphe {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
}

.etoile-constellation .etoile-glyphe {
  width: 1.5em;
}

.etoile-nom {
  white-space: nowrap;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Cartes (dans le fil de la conversation) ---------- */

.eval-carte {
  align-self: stretch;
  border: 1px solid var(--altair-bordure, #cfcecb);
  border-radius: 0.8rem;
  background: var(--altair-surface, #eceae7);
  color: var(--altair-text-color, #2d2d2d);
  padding: 0.9rem 1rem;
  /* Une carte n'est pas une bulle : elle tient sur toute la largeur utile,
     avec une barre à gauche qui la rattache visuellement à Altaïr sans
     imiter sa bulle. */
  border-left: 4px solid var(--altair-text-color, #2d2d2d);
}

/* L'en-tête d'une carte est un vrai élément <header>, et style.css habille
   tous les <header> de la page en barre blanche (celle du haut de l'écran).
   Sans cette remise à zéro, l'en-tête du quiz s'affichait en bloc blanc au
   milieu de la carte - illisible dès que le parent choisit un fond sombre. */
.eval-entete {
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 0.6rem;
}

.eval-surtitre,
.eval-notion,
.eval-duree {
  margin: 0;
}

.eval-surtitre {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

.eval-notion {
  font-weight: 600;
  font-size: 1.05em;
}

.eval-duree {
  font-size: 0.85em;
  opacity: 0.8;
  margin-top: 0.15rem;
}

/* ---------- Avancement ---------- */

/* display:flex l'emporterait sur l'attribut hidden : sans cette règle, la
   barre d'avancement resterait affichée sur l'écran de bilan, à indiquer
   « Question 4 sur 4 » alors que le quiz est terminé. */
.eval-avancement[hidden] {
  display: none;
}

.eval-avancement {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

.eval-avancement-texte {
  margin: 0;
  font-size: 0.85em;
  opacity: 0.85;
}

.eval-avancement-barre {
  display: flex;
  gap: 0.2rem;
}

.eval-case {
  width: 0.9rem;
  height: 0.35rem;
  border-radius: 0.2rem;
  border: 1px solid currentColor;
  opacity: 0.35;
}

.eval-case.faite {
  background: currentColor;
  opacity: 0.7;
}

/* ---------- Questions et choix ---------- */

.eval-question {
  margin: 0 0 0.7rem;
  font-weight: 600;
}

.eval-choix-liste {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.eval-choix {
  /* Alignés à gauche et sur toute la largeur : une proposition longue ne doit
     jamais être plus visible qu'une courte. */
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.8rem;
  border-radius: 0.5rem;
  border: 1px solid var(--altair-bordure, #cfcecb);
  background: var(--altair-bg-color, #fff);
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
}

.eval-choix:hover:not(:disabled) {
  border-color: currentColor;
}

.eval-choix:disabled {
  cursor: default;
}

/* L'état juste/écarté est doublé par une mention écrite (.eval-mention) :
   l'épaisseur du trait et la mention suffisent à comprendre sans distinguer
   les couleurs. */
.eval-choix.juste {
  border-width: 2px;
  border-color: #2f6b4f;
  opacity: 1;
}

.eval-choix.ecarte {
  border-style: dashed;
  opacity: 0.6;
}

.eval-mention {
  font-size: 0.85em;
  opacity: 0.9;
}

.eval-retour {
  margin-top: 0.6rem;
  font-size: 0.95em;
}

.eval-retour:empty {
  margin-top: 0;
}

/* ---------- Auto-évaluation ---------- */

.eval-affirmation {
  border: none;
  border-top: 1px solid var(--altair-bordure, #cfcecb);
  margin: 0;
  padding: 0.7rem 0 0;
}

.eval-affirmation:first-child {
  border-top: none;
  padding-top: 0;
}

.eval-affirmation-texte {
  padding: 0;
  font-weight: 600;
}

.eval-echelle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.eval-niveau {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--altair-bordure, #cfcecb);
  background: var(--altair-bg-color, #fff);
  color: inherit;
  font-family: inherit;
  font-size: 0.9em;
  cursor: pointer;
}

.eval-niveau.choisi {
  border-width: 2px;
  border-color: currentColor;
  font-weight: 600;
}

/* ---------- Bilan, proposition, traces ---------- */

.eval-bilan-liste {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.eval-bilan-etat {
  opacity: 0.8;
}

.eval-proposition-titre {
  margin: 0;
  font-weight: 600;
}

.eval-proposition-detail {
  margin: 0.25rem 0 0;
  font-size: 0.9em;
  opacity: 0.85;
}

.eval-attente-texte {
  margin: 0;
  opacity: 0.85;
}

.eval-trace {
  align-self: center;
  margin: 0;
  font-size: 0.85em;
  opacity: 0.7;
  font-style: italic;
}

.eval-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.eval-btn {
  padding: 0.45rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid currentColor;
  font-family: inherit;
  font-size: 0.95em;
  cursor: pointer;
}

.eval-btn-principal {
  background: var(--altair-eleve-bg, #4c4c4b);
  color: var(--altair-eleve-text, #fdfbf7);
  border-color: transparent;
}

.eval-btn-discret {
  background: transparent;
  color: inherit;
  opacity: 0.85;
}

.eval-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Cible tactile confortable sur petit écran (doigt, tremblement, précision
   variable) : les boutons s'étirent plutôt que de rester minuscules. */
@media (max-width: 600px) {
  .eval-carte {
    align-self: stretch;
  }

  .eval-btn,
  .eval-niveau {
    min-height: 2.6rem;
  }

  .etoile-nom {
    max-width: 9rem;
  }
}