/* Pages publiques des leçons (/lecons…), rendues par backend/app/routers/lecons_publiques.py.
   S'appuie sur les jetons et l'en-tête de vitrine.css ; rien d'autre que du texte à lire. */

.lecons .tete { position: sticky; top: 0; z-index: 5; }
.lecons-page { padding-block: var(--e6) var(--e8); max-width: 860px; }
.lecons-page h1 { font-family: var(--police-titre); font-size: clamp(1.9rem, 4.6vw, 2.9rem); line-height: 1.1; margin: var(--e4) 0 var(--e3); text-wrap: balance; }
.lecons-page h2 { font-family: var(--police-titre); font-size: 1.55rem; margin: var(--e6) 0 var(--e3); }
.lecons-page h3 { font-size: 1.1rem; margin: var(--e5) 0 var(--e2); color: var(--texte-2); }
.lecons-page .chapo { font-size: var(--t-chapo); color: var(--texte-2); margin: 0 0 var(--e5); }
.lecons-page a { color: var(--accent-texte); }
.lecons-page a.bouton.plein { color: var(--sur-accent); }
.lecons-page a.bouton.trait { color: var(--texte); }

.fil { font-size: var(--t-petit); color: var(--texte-3); }
.fil a { color: inherit; }

/* Les classes */
.classes { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.classes a { display: flex; flex-direction: column; gap: var(--e1); padding: var(--e4); min-height: var(--cible); border: 1px solid var(--filet); border-radius: var(--r); background: var(--surface); text-decoration: none; color: var(--texte); }
.classes a:hover { border-color: var(--accent); }
.classes b { font-family: var(--police-titre); font-size: 1.2rem; }
.classes span { font-size: var(--t-petit); color: var(--texte-3); }

/* Les leçons d'une classe */
.matiere ol { margin: 0; padding-left: 1.6em; }
.matiere li { padding: 6px 0; }
.matiere li a { text-decoration: none; }
.matiere li a:hover { text-decoration: underline; }

/* La leçon */
.lecon-meta { color: var(--texte-3); font-size: var(--t-petit); margin: 0 0 var(--e5); }
.lecon-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r); margin-bottom: var(--e6); }
.lecon-corps { font-size: var(--t-corps); line-height: 1.65; overflow-wrap: anywhere; }
.lecon-corps h1, .lecon-corps h2 { font-size: 1.5rem; margin: var(--e6) 0 var(--e3); }
.lecon-corps h3, .lecon-corps h4 { font-size: 1.2rem; margin: var(--e5) 0 var(--e2); color: var(--texte); }
.lecon-corps li { margin: 6px 0; }
.lecon-corps blockquote { margin: var(--e4) 0; padding: var(--e3) var(--e4); border-left: 4px solid var(--accent); background: var(--accent-doux); border-radius: 0 var(--r-petit) var(--r-petit) 0; }
.lecon-corps table { display: block; overflow-x: auto; border-collapse: collapse; margin: var(--e4) 0; }
.lecon-corps th, .lecon-corps td { border: 1px solid var(--filet-fort); padding: 6px 10px; text-align: left; }
.lecon-corps img, .lecon-corps svg { max-width: 100%; height: auto; }
.lecon-corps code { font-family: ui-monospace, monospace; font-size: .92em; }
/* vitrine.css donne à .formule l'allure d'une carte de forfait : ici c'est une formule de maths */
.lecon-corps .formule { all: unset; display: block; text-align: center; margin: .9em 0; font-size: 1.15em; }
.lecon-corps .frac { display: inline-flex; flex-direction: column; text-align: center; vertical-align: middle; margin: 0 .15em; line-height: 1.15; }
.lecon-corps .frac .num { border-bottom: 1.5px solid currentColor; padding: 0 .3em .05em; }
.lecon-corps .frac .den { padding: .05em .3em 0; }
.lecon-corps .s47-illu { margin: 1.3em auto; text-align: center; color: var(--texte); line-height: 0; }
.lecon-corps .s47-illu svg { width: auto; max-width: min(100%, 320px); max-height: 240px; overflow: visible; }
.lecon-corps .s47-illu figcaption { margin-top: 8px; font-weight: 700; font-size: .9rem; line-height: 1.3; color: var(--texte-2); }

/* La bannière d'abonnement : dit d'emblée ce qui est gratuit et ce qui ne l'est pas */
.abonnement { margin: var(--e7) 0 var(--e5); padding: var(--e5); border: 1px solid var(--accent); border-radius: var(--r-grand); background: var(--accent-doux); }
.abonnement h2 { margin: 0 0 var(--e3); font-size: 1.45rem; }
.abonnement ul { margin: 0 0 var(--e3); padding-left: 1.2em; }
.abonnement li { margin: 6px 0; }
.abonnement-prix { margin: 0 0 var(--e4); }
.abonnement-prix b { font-family: var(--police-titre); font-size: 1.6rem; }
.abonnement-gestes { display: flex; flex-wrap: wrap; gap: var(--e3); margin: 0; }
@media (max-width: 520px) { .abonnement-gestes .bouton { width: 100%; min-height: 48px; } }

.voisines { display: grid; gap: var(--e3); grid-template-columns: 1fr 1fr; }
.voisines a { display: flex; flex-direction: column; gap: 2px; padding: var(--e4); border: 1px solid var(--filet); border-radius: var(--r); background: var(--surface); text-decoration: none; color: var(--texte); }
.voisines a.apres { grid-column: 2; text-align: right; }
.voisines small { color: var(--texte-3); }
@media (max-width: 520px) { .voisines { grid-template-columns: 1fr; } .voisines a.apres { grid-column: 1; text-align: left; } }

.lecons .pied-base { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); align-items: center; }
.lecons .pied-base a { color: inherit; }