/* Reading and listening comprehension (js/lecture.js). Uses the variables of css/jeu.css and the
   exercise screen of css/matieres.css (.exo, .exo-barre, the 'trous' question type). */
.lec-corps { flex: 1; display: grid; grid-template-columns: minmax(300px, 46%) 1fr; gap: 20px; padding: 18px; align-items: start; max-width: 1400px; width: 100%; margin: 0 auto; }
.lec-carte { background: #fff; border-radius: var(--rayon); padding: 22px 26px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.lec-chargement { padding: 30px; text-align: center; color: var(--doux); }
.lec-langue { margin-left: auto; font-size: .9rem; padding: 4px 12px; border-radius: 999px; background: #eef3ff; color: #4a5a8a; font-weight: 600; }
.lec-vide, .lec-fin, .lec-trous-carte { grid-column: 1 / -1; max-width: 900px; width: 100%; margin: 0 auto; text-align: center; }

/* the text */
.lec-texte { position: sticky; top: 12px; max-height: calc(100vh - 110px); overflow: auto; }
.lec-titre { margin: 4px 0 12px; color: var(--accent-2); text-align: center; }
.lec-texte p, .lec-revoir p { font-size: 1.25rem; line-height: 1.75; margin: 0 0 12px; }
.lec-source, .lec-carte p.lec-source { font-size: .85rem !important; color: var(--doux); font-style: italic; text-align: right; margin-top: 14px; }
.lec-illustration { display: flex; justify-content: center; gap: 6px; padding: 8px; margin: 0 auto 8px; background: linear-gradient(180deg, #eef7ff, #fff8ec); border-radius: 18px; width: fit-content; }
.lec-svg { width: 130px; height: auto; }
.lec-emoji { font-size: 4.2rem; line-height: 1.2; display: inline-block; padding: 0 10px; }
.lec-svg.petit { width: 74px; }
.lec-emoji.petit { font-size: 2.6rem; padding: 0; }

/* oral: the player */
.lec-lecteur { position: sticky; top: 12px; text-align: center; display: grid; gap: 12px; }
.lec-lecteur p { margin: 0 0 6px; font-size: 1.15rem; }
.lec-avant, .lec-pendant, .lec-apres { display: grid; gap: 10px; justify-items: center; }
.lec-commencer, .lec-lu { font-size: 1.35rem; padding: 14px 30px; }
.lec-etat { font-weight: 700; color: var(--accent-2); animation: lec-respire 1.6s ease-in-out infinite; }
@keyframes lec-respire { 50% { opacity: .55; } }
.lec-barre { width: 100%; max-width: 360px; height: 16px; background: #eee6da; border-radius: 999px; overflow: hidden; }
.lec-barre span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-2), var(--bon)); border-radius: 999px; transition: width .6s ease; }
.lec-apres p:first-child { color: var(--bon); font-weight: 700; font-size: 1.3rem; }
.lec-revoir { text-align: left; margin-top: 8px; }
.lec-revoir summary { cursor: pointer; font-weight: 700; color: var(--accent-2); padding: 6px 0; }
.lec-consigne { text-align: center; display: grid; gap: 8px; justify-items: center; position: sticky; top: 12px; }
.lec-consigne p { font-size: 1.25rem; margin: 0; }

/* questions */
.lec-questions h2 { margin: 0 0 8px; }
.lec-questions ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; counter-reset: q; }
.lec-q { counter-increment: q; border: 3px solid #f1e8da; border-radius: 18px; padding: 12px 14px; transition: border-color .2s; }
.lec-q.repondu { border-color: #cfe0ff; }
.lec-q.q-bon { border-color: var(--bon); background: #f1fbf5; }
.lec-q.q-mauvais { border-color: var(--mauvais); background: #fff4f3; }
.lec-q-texte { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; font-weight: 600; margin-bottom: 10px; }
.lec-q-texte::before { content: counter(q); flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-2); color: #fff; display: grid; place-items: center; font-size: 1rem; }
.lec-dire { padding: 4px 10px; flex: none; }
.lec-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.lec-choix.avec-images { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.lec-rep { font-size: 1.05rem; padding: 10px 12px; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 3px solid transparent; }
.lec-rep.choisi { background: #fff3c4; border-color: var(--jaune); box-shadow: 0 4px 0 #d4a73d; }
.lec-rep.bon { background: var(--bon); color: #fff; box-shadow: 0 4px 0 #1f8a52; }
.lec-rep.mauvais { background: var(--mauvais); color: #fff; box-shadow: 0 4px 0 #b13a33; }
.lec-rep.montre { border: 3px dashed var(--bon); background: #e9f8ef; }
.lec-rep:disabled { opacity: 1; }
.lec-pied { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; position: sticky; bottom: 0; background: #fff; padding: 10px 0 2px; }
.lec-compte { color: var(--doux); }
.lec-valider, .lec-suite { font-size: 1.3rem; padding: 12px 30px; }
.lec-bilan { font-size: 1.3rem; color: var(--doux); }
.lec-bilan b { font-size: 1.9rem; color: var(--accent-2); margin-right: 8px; }
.lec-bilan.parfait b { color: var(--bon); }

/* summary with gaps (question type 'trous') */
.lec-trous.exo-question { box-shadow: none; padding: 8px 0 0; min-height: 0; }
.lec-trous .exo-texte-trous { font-size: 1.45rem; line-height: 2.3; }

/* end */
.lec-fin h2 { font-size: 2rem; margin: 6px 0; }
.lec-fin-titre { font-size: 1.3rem; color: var(--accent-2); font-weight: 700; }
.lec-fin ul { list-style: none; padding: 0; font-size: 1.3rem; }
.lec-fin .lec-revoir { max-width: 760px; margin: 12px auto 18px; }

@media (max-width: 860px) {
  .lec-corps { grid-template-columns: 1fr; padding: 12px; }
  .lec-texte, .lec-lecteur, .lec-consigne { position: static; max-height: none; }
  .lec-carte { padding: 16px; }
}

/* poems and recipes: one line per 
 inside a paragraph */
.lec-texte p, .lec-revoir p { white-space: pre-line; }