/* Habillage « charte », pour le jeu de la Charte de la laïcité à l'école.
 *
 * Il reprend la charte graphique de l'affiche officielle : fond clair, aplats
 * pleins, contour net, aucun dégradé, aucune ombre portée. Ligne claire.
 *
 * Les six teintes sont relevées sur le JPEG de l'affiche et sont donc des
 * approximations : à confirmer sur le fichier source du ministère avant toute
 * mise en production définitive. */

:root[data-theme='charte'] {
  --charte-bleu: #1f3f7a;
  --charte-azur: #2f7dc0;
  --charte-framboise: #d8315b;
  --charte-prune: #7c3f8f;
  --charte-turquoise: #0f9aa3;
  --charte-vert: #6bb43a;
  --charte-orange: #ef8c22;

  --fond: #ffffff;
  --fond-carte: #f4f6fa;
  --fond-champ: #e8edf5;
  --encre: #16233d;
  --encre-douce: #5a6a86;
  --accent: var(--charte-azur);
  --accent-sombre: var(--charte-bleu);
  --ok: var(--charte-vert);
  --erreur: var(--charte-framboise);

  /* Les quatre réponses reprennent quatre pavés de la Charte. */
  --r1: var(--charte-framboise);
  --r2: var(--charte-azur);
  --r3: var(--charte-turquoise);
  --r4: var(--charte-prune);

  --rayon: 6px;
  --ombre: none;
}

/* Fond plat : la Charte n'a ni dégradé ni halo. */
:root[data-theme='charte'] body {
  background: var(--fond);
  color: var(--encre);
}

/* Contour net plutôt qu'ombre portée, sur tout ce qui fait carte ou pavé. */
:root[data-theme='charte'] .carte-quiz,
:root[data-theme='charte'] .apercu,
:root[data-theme='charte'] .reponse,
:root[data-theme='charte'] .resultat-perso,
:root[data-theme='charte'] .bilan-ligne {
  border: 2px solid var(--charte-bleu);
  box-shadow: none;
}

:root[data-theme='charte'] .marque {
  color: var(--charte-bleu);
  text-transform: none;
}

:root[data-theme='charte'] .bouton {
  border: 2px solid var(--charte-bleu);
  box-shadow: none;
}

/* Le pavé de la Charte : un repli plus sombre sur le bord, obtenu par une
 * bordure gauche de la même teinte assombrie. */
:root[data-theme='charte'] .reponse {
  border-left-width: 10px;
}

/* ---------- Bilan collectif, écran de fin du mode coopératif ---------- */

.bilan {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: min(60rem, 100%);
  text-align: left;
}

.bilan-ligne {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--rayon, 6px);
  background: var(--fond-carte);
}

.bilan-ligne .article {
  font-weight: 800;
  white-space: nowrap;
  color: var(--charte-bleu, var(--accent));
}

.bilan-ligne.manque {
  opacity: 0.72;
  border-style: dashed;
}

/* L'explication et le QIPM sont séparés par une ligne vide, écrite en texte. */
.explication { white-space: pre-line; }

.bilan-compteur {
  font-size: 1.6rem;
  font-weight: 800;
}