/* Le Bilan du héros. */
.bilan-scene { min-height: 320px; }
.bilan-scene h2, .bilan-scene h3 { margin: 0; font-family: var(--titre); }
.bilan-scene h2 { font-size: clamp(22px, 2.6vw, 28px); }
.bilan-scene h3 { margin-top: 10px; font-size: 22px; }
.bilan-accueil { display: flex; flex-direction: column; gap: 14px; }
.bilan-accueil > p { margin: 0; }
.bilan-regles { display: grid; gap: 8px; margin: 0; padding-left: 1.2em; }
.bilan-classes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.bilan-classes legend { margin-bottom: 8px; padding: 0; font-weight: 700; }
.bilan-classes legend small { font-weight: 400; color: var(--doux); }
.bilan-classes label { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; background: #fff; border: 1.5px solid var(--filet); border-radius: 999px; cursor: pointer; }
.bilan-classes label:has(input:checked) { color: #fff; background: var(--nuit); border-color: var(--nuit); }
.bilan-classes input { width: 18px; height: 18px; margin: 0; accent-color: var(--or); }
.bilan-aide { font-size: 15px; color: var(--doux); }
.bilan-precedent p { margin: 0; padding: 10px 14px; background: #fff; border-left: 4px solid var(--or); border-radius: 8px; }

/* Une question */
.bilan-tete { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; }
.bilan-numero { font-family: var(--titre); font-size: 20px; }
.bilan-domaine { padding: 2px 12px; font-size: 15px; color: #fff; background: var(--nuit); border-radius: 999px; }
.bilan-progres { height: 8px; overflow: hidden; background: rgba(34, 19, 64, .12); border-radius: 999px; }
.bilan-progres > div { height: 100%; background: linear-gradient(90deg, var(--filet), var(--or)); border-radius: inherit; transition: width .3s ease; }
.bilan-texte { margin: 0; padding: 14px 18px; font-size: 19px; line-height: 1.6; background: #fff; border-left: 4px solid var(--filet); border-radius: 0 10px 10px 0; }
.bilan-jsp { align-self: flex-start; min-height: 44px; padding: 0 16px; font: inherit; font-size: 16px; color: var(--doux); background: none; border: 1.5px dashed var(--doux); border-radius: 10px; cursor: pointer; }
.bilan-jsp:hover:not(:disabled) { color: var(--texte); border-style: solid; }
.bilan-scene .reviser-choix button:disabled { opacity: .7; }

/* Le résultat */
.bilan-resultat { display: flex; flex-direction: column; gap: 14px; }
.bilan-resultat > p { margin: 0; }
.bilan-surtitre { font-size: 15px; color: var(--doux); }
.bilan-score { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.bilan-points { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 140px; height: 140px; margin: 0; color: var(--nuit); background: radial-gradient(circle at 35% 30%, #FFF3C9, var(--or) 70%); border: 4px solid var(--filet); border-radius: 50%; box-shadow: 0 8px 22px rgba(34, 19, 64, .25); }
.bilan-points strong { font-family: var(--titre); font-size: 48px; line-height: 1; }
.bilan-points span { font-weight: 700; }
.bilan-score p { margin: 0; }
.bilan-titre { font-family: var(--titre); font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; }
.bilan-niveau { font-size: 20px; font-weight: 700; }
.bilan-marge { color: var(--doux); }
.bilan-comparaison, .bilan-evolution { padding: 10px 14px; background: #fff; border-radius: 10px; }
.bilan-regle { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); height: 46px; margin: 18px 0 8px; border-radius: 8px; }
.bilan-regle-palier { position: relative; display: flex; align-items: flex-end; padding: 0 0 2px 4px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .92); }
.bilan-regle-palier:first-child { border-radius: 8px 0 0 8px; }
.bilan-regle-palier:nth-child(7) { border-radius: 0 8px 8px 0; }
.bilan-regle-palier[data-palier="1"] { background: #8A8398; }
.bilan-regle-palier[data-palier="2"] { background: #6E7F94; }
.bilan-regle-palier[data-palier="3"] { background: #0F7A5C; }
.bilan-regle-palier[data-palier="4"] { background: #5B3CC4; }
.bilan-regle-palier[data-palier="5"] { background: #2F62D9; }
.bilan-regle-palier[data-palier="6"] { background: #A8321F; }
.bilan-regle-palier[data-palier="7"] { background: #7A541A; }
.bilan-regle-marge { position: absolute; top: -6px; bottom: -6px; background: rgba(255, 255, 255, .22); border: 2px solid var(--or); border-radius: 6px; }
.bilan-regle-curseur { position: absolute; top: -12px; bottom: -12px; width: 6px; margin-left: -3px; background: var(--nuit); border: 2px solid #fff; border-radius: 3px; box-shadow: 0 0 0 1px var(--nuit); }
.bilan-regle-attendu { position: absolute; bottom: -16px; width: 0; height: 0; margin-left: -8px; border: 8px solid transparent; border-bottom-color: var(--nuit); }
.bilan-resume { font-style: italic; }
.bilan-domaines { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bilan-domaine-ligne { display: grid; grid-template-columns: 140px 1fr 70px; grid-template-areas: "nom barre score" "nom degre degre" "nom detail detail"; align-items: center; gap: 2px 12px; padding: 10px 12px; background: #fff; border-radius: 10px; }
.bilan-domaine-nom { grid-area: nom; font-weight: 700; }
.bilan-domaine-barre { grid-area: barre; height: 12px; overflow: hidden; background: rgba(34, 19, 64, .1); border-radius: 999px; }
.bilan-domaine-barre span { display: block; height: 100%; background: var(--nuit); border-radius: inherit; }
.bilan-domaine-score { grid-area: score; font-weight: 700; text-align: right; }
.bilan-domaine-degre { grid-area: degre; font-weight: 700; }
.bilan-domaine-ligne small { grid-area: detail; color: var(--doux); }
[data-degre="1"] .bilan-domaine-degre, .bilan-degres [data-degre="1"] { color: #A8321F; }
[data-degre="2"] .bilan-domaine-degre, .bilan-degres [data-degre="2"] { color: #A15C00; }
[data-degre="3"] .bilan-domaine-degre, .bilan-degres [data-degre="3"] { color: #0F7A5C; }
[data-degre="4"] .bilan-domaine-degre, .bilan-degres [data-degre="4"] { color: #2F62D9; }
[data-degre="1"] .bilan-domaine-barre span { background: #A8321F; }
[data-degre="2"] .bilan-domaine-barre span { background: #C77700; }
[data-degre="3"] .bilan-domaine-barre span { background: #0F7A5C; }
[data-degre="4"] .bilan-domaine-barre span { background: #2F62D9; }
.bilan-suite { display: grid; gap: 6px; margin: 0; padding-left: 1.2em; }
.bilan-revue { padding: 12px 14px; background: #fff; border-radius: 10px; }
.bilan-revue summary { font-weight: 700; cursor: pointer; }
.bilan-revue ol { display: grid; gap: 14px; margin: 12px 0 0; padding-left: 1.4em; }
.bilan-revue li p { margin: 4px 0; }
.bilan-revue .bilan-texte { font-size: 16px; }
.bilan-revue-q { font-weight: 700; }
.bilan-revue-e { color: var(--doux); }
.bilan-faux { text-decoration: line-through; color: #A8321F; }
.bilan-juste { color: #0F7A5C; }
.bilan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bilan-imprimer, .bilan-salle { color: var(--nuit); background: #fff; border-color: var(--nuit); }
.bilan-lien-echelle { font-weight: 700; }

/* L'échelle */
.bilan-chapo { max-width: 60em; }
.bilan-echelle { display: grid; gap: 8px; margin: 18px 0; padding: 0; list-style: none; }
.bilan-palier details { background: var(--parchemin); border: 1.5px solid var(--filet); border-radius: 12px; }
.bilan-palier[data-ici] details { border: 3px solid var(--or); box-shadow: 0 0 0 4px rgba(245, 200, 76, .3); }
.bilan-palier summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 52px; padding: 8px 14px; cursor: pointer; }
.bilan-palier-points { min-width: 120px; padding: 2px 10px; font-weight: 700; text-align: center; color: #fff; border-radius: 999px; }
.bilan-palier[data-palier="1"] .bilan-palier-points { background: #8A8398; }
.bilan-palier[data-palier="2"] .bilan-palier-points { background: #6E7F94; }
.bilan-palier[data-palier="3"] .bilan-palier-points { background: #0F7A5C; }
.bilan-palier[data-palier="4"] .bilan-palier-points { background: #5B3CC4; }
.bilan-palier[data-palier="5"] .bilan-palier-points { background: #2F62D9; }
.bilan-palier[data-palier="6"] .bilan-palier-points { background: #A8321F; }
.bilan-palier[data-palier="7"] .bilan-palier-points { background: #7A541A; }
.bilan-palier details > :not(summary) { margin: 0 14px 12px; }
.bilan-palier dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; }
.bilan-palier dt { font-weight: 700; }
.bilan-palier dd { margin: 0; }
.bilan-sous-titre { margin: 26px 0 6px; font-family: var(--titre); font-size: 22px; }
.bilan-degres { display: grid; gap: 6px; padding-left: 1.2em; }
.bilan-degres span { font-weight: 700; }
.bilan-methode { margin-top: 18px; padding: 12px 16px; background: var(--parchemin); border: 1.5px solid var(--filet); border-radius: 12px; }
.bilan-methode summary { font-weight: 700; cursor: pointer; }
.bilan-methode p { max-width: 62em; }

@media (max-width: 640px) {
  .bilan-domaine-ligne { grid-template-columns: 1fr 64px; grid-template-areas: "nom score" "barre barre" "degre degre" "detail detail"; }
  .bilan-points { width: 112px; height: 112px; }
  .bilan-points strong { font-size: 38px; }
  .bilan-regle-palier { font-size: 0; }
  .bilan-palier dl { grid-template-columns: 1fr; gap: 2px; }
  .bilan-palier dd { margin-bottom: 6px; }
}

@media print {
  .entete, .pied, .heros, .bilan-actions, #echelle .bilan-methode, .lecteur, .regle-lecture, .bilan-revue summary { display: none !important; }
  .bilan-revue { display: block; }
  .bilan-revue[open] ol, .bilan-revue ol { display: grid; }
  body, .bilan-scene { background: #fff !important; }
  .bilan-scene { border: 0; padding: 0; }
  .bilan-regle-palier, .bilan-palier-points, .bilan-points { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}