/* Page du programme : la liste des chapitres, avec la progression lue dans le navigateur. */
.intro{color:var(--encre-2); font-size:1rem; margin-top:8px}
.chapitres{display:flex; flex-direction:column; gap:12px; margin-top:20px}
.chap{display:block; text-decoration:none; color:inherit; border:1px solid var(--filet); background:var(--feuille); border-radius:var(--r); padding:16px 18px; box-shadow:var(--ombre)}
.chap:focus-visible{outline:3px solid var(--or); outline-offset:2px}
.chap .haut{display:flex; align-items:center; gap:12px}
.chap .num{flex:none; width:42px; height:42px; border-radius:50%; background:var(--rose-clair); color:var(--rose-texte); display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:1rem}
.chap.fini .num{background:var(--juste); color:var(--sur-accent)}
.chap h2{font-size:1.15rem; line-height:1.2}
.chap .item{font-size:1rem; color:var(--encre-3); font-family:var(--display); font-weight:600; letter-spacing:.06em; text-transform:uppercase}
.chap p{margin-top:10px; font-size:1rem; color:var(--encre-2)}
.chap .bas{display:flex; align-items:center; gap:10px; margin-top:12px; font-size:1rem; color:var(--encre-2)}
.chap .jauge{flex:1; margin-top:0}
.chap .etat{flex:none; font-weight:700; color:var(--encre)}
.chap .liens{display:flex; gap:10px; margin-top:12px}
.chap .liens a{flex:1; text-align:center; text-decoration:none; border-radius:999px; min-height:48px; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:1rem}
.chap .cours-lien{border:1px solid var(--or); background:var(--or-fond); color:var(--encre)}
.chap .exo-lien{background:var(--encre); color:var(--creme)}

@media (min-width:900px){
  .page{max-width:1000px}
  .chapitres{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .chap{display:flex; flex-direction:column} .chap p{flex:1}
}

/* Mes revisions (repetition espacee locale) */
#revisions{margin-top:22px; padding:16px 18px; background:var(--feuille); border:1px solid var(--filet); border-radius:var(--r)}
.revs{list-style:none; margin:12px 0 0; padding:0}
.revs li + li{margin-top:8px}
.rev{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; padding:10px 14px; border-radius:var(--r-s); background:var(--or-fond); color:var(--encre); text-decoration:none}
.rev b{font-family:var(--display); display:block}
.rev .d{display:block; font-size:1rem; color:var(--encre-2); margin-top:2px}
.rev .go{flex:none; font-weight:700; color:var(--rose-texte)}

/* Une collection de chapitres, avec le rythme d'un carnet. */
.programme{padding-bottom:40px}
.programme-entete{position:relative;padding:24px 0 12px}
.programme-entete>.etiq{color:var(--rose-texte);max-width:32ch}
.programme-entete h1{font-size:clamp(3.2rem,7vw,5rem);margin-top:14px;max-width:10ch;font-weight:800;line-height:.98}
.programme-entete .intro{font-size:1.125rem;line-height:1.65;margin-top:20px}
.programme-entete .dit{margin-block:32px 18px}
.chapitres{display:flex;flex-direction:column;gap:24px;margin-top:32px}
.chap{position:relative;isolation:isolate;overflow:hidden;padding:24px 20px;border-radius:28px;box-shadow:var(--ombre);background:var(--feuille)}
.chap::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 100% 0%,var(--rose-clair),transparent 65%);opacity:.35;pointer-events:none}
.chap:nth-child(3n + 2)::before{background:radial-gradient(ellipse at 100% 0%,var(--or-fond),transparent 65%);opacity:.8}
.chap .haut{align-items:flex-start;gap:16px}
.chap .num{width:58px;height:auto;min-height:62px;background:none;color:var(--rose-texte);font-size:3.8rem;font-weight:200;letter-spacing:-.075em;line-height:1}
.chap h2{font-size:1.65rem;line-height:1.12;margin-top:6px}
.chap .item{font-size:1rem;letter-spacing:.025em;line-height:1.4;display:block}
.chap p{font-size:1.125rem;line-height:1.6;margin-top:18px}
.chap .bas{flex-wrap:wrap;gap:12px;margin-top:24px;font-size:1rem}
.chap .jauge{order:3;flex:1 0 100%;height:6px}
.chap .etat{margin-left:auto;font-size:1rem}
.chap .liens{margin-top:22px;gap:10px}
.chap .liens a{min-height:52px;font-size:1.125rem;padding:10px 8px}
.chap .cours-lien{display:block;align-content:center}
.chap .cours-lien::first-letter{font-size:0}
.chap .exo-lien{box-shadow:0 3px 0 var(--filet-2)}
.chap.fini{border-color:var(--juste)}
.chap.fini .num{width:58px;height:58px;min-height:58px;font-size:2rem;background:var(--juste);color:var(--sur-accent);border-radius:50%;box-shadow:0 0 0 5px var(--juste-fond)}
.chap.fini .etat{background:var(--juste-fond);color:var(--encre);padding:4px 12px;border-radius:999px}
.chap.fini .jauge i{background:var(--juste)}
#revisions{padding:26px 20px;background:linear-gradient(120deg,var(--or-fond),var(--feuille));border:1px solid var(--or);box-shadow:var(--relief);margin-top:28px;border-radius:28px}
#revisions>.etiq{color:var(--encre-2)}
#revisions h2{font-size:1.8rem}#revisions .intro{font-size:1.125rem;margin-top:12px}
.rev{padding:16px;background:var(--feuille);border:1px solid var(--filet-2);box-shadow:var(--ombre);align-items:flex-start;flex-wrap:wrap}
.rev .d{font-size:1rem}.rev .go{font-size:1rem}
.prochains{margin-top:32px;font-size:1.125rem;box-shadow:none}
@media(min-width:900px){
 .programme{max-width:1160px}
 .programme-entete{display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:72px;padding-top:36px;align-items:start}
 .programme-entete>.etiq,.programme-entete>h1,.programme-entete>.intro{grid-column:1}
 .programme-entete .dit{grid-column:2;grid-row:1 / span 3;flex-direction:column;margin:0;align-items:flex-start;gap:22px;padding-top:12px}
 .programme-entete .dit img{width:112px;height:112px}
 .programme-entete .bulle::before{left:40px;top:-7px}
 .chapitres{gap:20px;margin-top:48px}
 .chap{display:grid;grid-template-columns:minmax(0,1fr) 290px;column-gap:48px;padding:32px}
 .chap .haut{grid-column:1;grid-row:1;gap:24px}
 .chap .num{width:74px;font-size:4.8rem}
 .chap h2{font-size:2rem}
 .chap p{grid-column:1;grid-row:2;margin-left:98px;margin-top:12px}
 .chap .bas{grid-column:2;grid-row:1;align-self:end;margin-top:0}
 .chap .liens{grid-column:2;grid-row:2;align-self:start;margin-top:20px}
 .chap::after{content:"";position:absolute;z-index:-1;inset:0 auto 0 0;width:130px;background-image:linear-gradient(90deg,color-mix(in srgb,var(--feuille) 88%,transparent),var(--feuille)),var(--chap-image);background-size:cover;background-position:center;pointer-events:none}
}
@media(prefers-reduced-motion:no-preference){.chap,.chap .liens a,.rev{transition:transform var(--duree) var(--aisance),box-shadow var(--duree),border-color var(--duree)}}
@media(hover:hover){.chap:hover{border-color:var(--or);box-shadow:var(--relief)}.chap .liens a:hover,.rev:hover{transform:translateY(-2px);box-shadow:var(--ombre-bouton)}}
@media(prefers-reduced-motion:reduce){.chap .liens a:hover,.rev:hover{transform:none}}

.chap:has(a[href="/os/cours/"]){--chap-image:url("/img/cours/os-hero.webp")}
.chap:has(a[href="/muscles/cours/"]){--chap-image:url("/img/cours/muscles-hero.webp")}
.chap:has(a[href="/eau/cours/"]){--chap-image:url("/img/cours/eau-hero.webp")}
.chap:has(a[href="/cellule/cours/"]){--chap-image:url("/img/cours/cellule-hero.webp")}
.chap:has(a[href="/tissus/cours/"]){--chap-image:url("/img/cours/tissus-hero.webp")}
.chap:has(a[href="/peau/cours/"]){--chap-image:url("/img/cours/peau-hero.webp")}
.chap:has(a[href="/vascularisation/cours/"]){--chap-image:url("/img/cours/vascularisation-hero.webp")}
.chap:has(a[href="/vieillissement/cours/"]){--chap-image:url("/img/cours/vieillissement-hero.webp")}
.chap:has(a[href="/dermatoses/cours/"]){--chap-image:url("/img/cours/dermatoses-hero.webp")}
.chap:has(a[href="/biocontamination/cours/"]){--chap-image:url("/img/cours/biocontamination-hero.webp")}