/* Feuille des exercices, des corrigés et de l'accueil. Pensée pour le téléphone d'abord.
   Les couleurs viennent de theme.css. */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Noto Sans", system-ui, sans-serif; font-size: 17px; line-height: 1.45; color: var(--texte); background: var(--fond); max-width: 42em; margin: 0 auto; padding: 16px; }
a { color: var(--lien); }
h1 { font-size: 1.7em; color: var(--accent); line-height: 1.15; }
.sous { color: var(--gris); margin: 0.2em 0 0.8em; }
h2 { font-size: 1.15em; color: #fff; background: var(--bleu); padding: 0.25em 0.6em; border-radius: 0.45em; margin: 1.1em 0 0.5em; }
h2.vert { background: var(--vert); }
.temps { display: inline-block; margin-left: 0.5em; font-size: 0.8em; font-weight: 400; background: rgba(255,255,255,0.25); border-radius: 0.4em; padding: 0 0.4em; }
.mot { background: var(--surligne); color: var(--surligne-texte); font-weight: 700; padding: 0 0.2em; border-radius: 0.25em; }
p { margin: 0.4em 0; }
svg { max-width: 15em; height: auto; display: block; margin: 0.5em auto; }

/* Questions */
.question { border: 1px solid var(--bord); border-radius: 0.6em; padding: 0.7em 0.8em; margin: 0.7em 0; }
.question.juste { border-color: var(--vert); background: var(--fond-vert); }
.question.faux { border-color: var(--rouge); background: var(--fond-rouge); }
.enonce { font-weight: 700; }
.enonce .n { display: inline-block; min-width: 1.5em; height: 1.5em; line-height: 1.5em; text-align: center; border-radius: 50%; background: var(--orange); color: #fff; font-size: 0.85em; margin-right: 0.35em; }
.qcm label { display: block; padding: 0.35em 0.2em; }
.qcm input { width: 1.2em; height: 1.2em; vertical-align: -0.2em; margin-right: 0.4em; }
.qcm.juste label.attendu, .qcm.faux label.attendu { font-weight: 700; color: var(--vert-t); }
.court input { font-size: 1em; padding: 0.35em 0.5em; border: 1px solid var(--bord); border-radius: 0.4em; background: var(--carte); color: var(--texte); width: 11em; max-width: 100%; }
button { font-size: 0.95em; padding: 0.4em 0.9em; margin: 0.4em 0.4em 0 0; border: 0; border-radius: 0.5em; background: var(--bleu); color: #fff; cursor: pointer; }
button.oui { background: var(--vert); } button.non { background: var(--rouge); }
.explication, .correction { margin-top: 0.5em; padding: 0.5em 0.7em; background: var(--carte); border-left: 0.3em solid var(--orange); border-radius: 0.3em; }
.question.juste .verdict::before { content: "Juste ! "; color: var(--vert-t); font-weight: 700; }
.question.faux .verdict::before { content: "Pas encore. "; color: var(--rouge-t); font-weight: 700; }
.auto p { font-weight: 700; }

.revoir { font-size: 0.92em; margin: -0.1em 0 0.4em; }
.revoir::before { content: "\1F4D6  "; }

/* Bilan */
.bilan { margin-top: 1.4em; padding: 0.8em; background: var(--fond-orange); border-radius: 0.6em; text-align: center; }
#score { font-size: 1.4em; font-weight: 700; color: var(--accent); display: block; margin: 0.2em 0 0.4em; }
.retenir { margin-top: 1em; border-left: 0.4em solid var(--orange); background: var(--fond-orange); padding: 0.5em 0.8em; }

/* Accueil */
.semaine { display: grid; grid-template-columns: repeat(auto-fill, minmax(8em, 1fr)); gap: 0.5em; }
.jour { border: 1px solid var(--bord); border-radius: 0.6em; padding: 0.4em 0.6em; font-size: 0.93em; }
.jour .nom { font-weight: 700; color: var(--accent); text-transform: capitalize; margin: 0 0 0.2em; }
.jour ul { list-style: none; } .jour li { margin: 0.2em 0; }
.jour .type { display: inline-block; font-size: 0.8em; color: #fff; background: var(--vert); border-radius: 0.4em; padding: 0 0.4em; margin-left: 0.3em; }
.jour .type.fiche { background: var(--bleu); }
.jour .controle { color: var(--rouge-t); font-weight: 700; }
.jour.aujourdhui { border: 2px solid var(--orange); background: var(--fond-orange); }
.jour.passe { opacity: 0.55; }
h3.chapitre { font-size: 1em; color: var(--vert-t); margin: 0.9em 0 0.2em; }
.liste { list-style: none; }
.liste li { border: 1px solid var(--bord); border-radius: 0.6em; padding: 0.6em 0.8em; margin: 0.6em 0; }
.liste .date { color: var(--gris); font-size: 0.9em; }
.liste .type { display: inline-block; font-size: 0.8em; color: #fff; background: var(--vert); border-radius: 0.4em; padding: 0 0.4em; margin-left: 0.3em; }
.liste .type.fiche { background: var(--bleu); }
footer { margin-top: 2em; color: var(--gris); font-size: 0.85em; }