/* ==========================================================================
   Cours en scrollytelling : philosophie, psychologie, méthodes d'apprentissage
   Feuille commune aux fiches philosophie/*.html, psychologie/*.html, apprentissage/*.html.
   Préfixe pc-. Moteur de défilement : ../css/scrolly.css + ../js/scrolly.js ; outils : ../js/philo-cours.js.
   Direction : papier chaud, surfaces et schémas pastel, deux accents saturés par matière,
   Newsreader (titres, citations) + Outfit (texte, interface).
     body.pc-page.pc-philo  terre cuite + violet
     body.pc-page.pc-psy    framboise + violet
     body.pc-page.pc-appr   orange brûlé + violet

   Couleur (passe du 1er oct. 2026) : familles communes de ../css/couleurs.css (à charger dans la fiche),
   pêche, lilas et citron, avec un repli si la feuille manque.
     Bandes : chaque grande partie (main > section.pc-section) est une bande pastel pleine largeur ;
     les familles tournent pêche → lilas → citron, ou data-teinte="peche|lilas|citron" sur la section.
     Teinte courante, lisible partout dans la partie :
       --pc-fond (pastel)  --pc-moyen (remplissages)  --pc-fonce (petit texte, puces, élément actif : ≥ 4,5:1 sur pastel)
       --pc-nuit (texte posé sur un remplissage moyen)  --pc-vif (fond d'un élément actif, texte blanc)  --pc-fond2 / --pc-moyen2 / --pc-fonce2 / --pc-nuit2 (famille voisine)
     Encarts au code commun du site : définition ciel, exemple citron, piège rose, à savoir (retenir) menthe,
     débat (repère) lilas, citation pêche. Juste en vert menthe, faux en rose.
     Schémas : formes en ton moyen, traits et textes foncés, l'élément actif dans le ton foncé de la famille.
   ========================================================================== */

body.pc-page {
    /* familles de la matière (pastel, moyen, foncé lisible en petit, encre sur moyen) */
    --pc-peche: var(--mk-peche, #FFEADB);   --pc-peche-m: var(--mk-peche-m, #FDCDAE);   --pc-peche-f: #9a3412;  --pc-peche-n: #7c2d12;
    --pc-lilas: var(--mk-lilas, #EEE8FD);   --pc-lilas-m: var(--mk-lilas-m, #D4C8F7);   --pc-lilas-f: #6D28D9;  --pc-lilas-n: #4c1d95;
    --pc-citron: var(--mk-citron, #FFF4CC); --pc-citron-m: var(--mk-citron-m, #FBE38E); --pc-citron-f: #854d0e; --pc-citron-n: #713f12;
    /* couleurs du code commun (encarts, juste, faux) */
    --pc-ciel: var(--mk-ciel, #E3F0FB);     --pc-ciel-m: var(--mk-ciel-m, #BCD9F5);     --pc-ciel-f: #1D4ED8;
    --pc-rose: var(--mk-rose, #FDE7EF);     --pc-rose-m: var(--mk-rose-m, #F9C6D8);     --pc-rose-f: #9d174d;
    --pc-menthe: var(--mk-menthe, #E2F5EA); --pc-menthe-m: var(--mk-menthe-m, #B6E5C8); --pc-menthe-f: #166534;
    /* teinte courante (redéfinie par chaque partie) */
    --pc-fond: var(--pc-peche);  --pc-moyen: var(--pc-peche-m);  --pc-fonce: var(--pc-peche-f);  --pc-nuit: var(--pc-peche-n);  --pc-vif: #C2410C;
    --pc-fond2: var(--pc-lilas); --pc-moyen2: var(--pc-lilas-m); --pc-fonce2: var(--pc-lilas-f); --pc-nuit2: var(--pc-lilas-n);

    --pc-papier: #f6f2ea;
    --pc-papier-2: #eee7da;
    --pc-carte: #fffdf8;
    --pc-trait: #e6ddcf;
    --pc-trait-2: #d3c6b3;
    --pc-encre: #1f2330;
    --pc-encre-2: #454a5b;
    --pc-encre-3: #5c5f6e;
    --pc-accent: #b1442a;
    --pc-accent-2: #93371f;
    --pc-accent-doux: var(--pc-peche);
    --pc-bleu: #6D28D9;
    --pc-bleu-doux: var(--pc-lilas);
    --pc-sable: #f0e4cc;
    --pc-sauge: #e0e9d8;
    --pc-beurre: var(--pc-citron-m);
    --pc-pierre: #e8e4dc;
    --pc-ok: var(--pc-menthe-f);
    --pc-ok-doux: var(--pc-menthe);
    --pc-ko: var(--pc-rose-f);
    --pc-ko-doux: var(--pc-rose);
    --pc-serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --pc-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    margin: 0;
    min-height: 100vh;
    padding-bottom: 96px;
    background: var(--pc-papier);
    color: var(--pc-encre);
    font-family: var(--pc-sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.pc-psy {
    --pc-papier: #f4f3ee;
    --pc-papier-2: #eae8e0;
    --pc-carte: #fefdfa;
    --pc-trait: #e1ded3;
    --pc-trait-2: #cbc6b8;
    --pc-accent: #a8324e;
    --pc-accent-2: #8b263f;
}
body.pc-appr {
    --pc-papier: #f7f3ec;
    --pc-papier-2: #efe8dc;
    --pc-accent: #a34a14;
    --pc-accent-2: #853b0e;
}
.pc-page ::selection { background: var(--pc-moyen); color: var(--pc-encre); }
.pc-page a { color: var(--pc-accent); text-underline-offset: 3px; }
.pc-page img, .pc-page svg { max-width: 100%; }
.pc-page sub, .pc-page sup { line-height: 0; }
.pc-page .hidden { display: none !important; }
.pc-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------- Mise en page ---------------- */
.pc-wrap { max-width: 42rem; margin: 0 auto; padding: 0 16px; }
.pc-wrap-large { max-width: 58rem; margin: 0 auto; padding: 0 16px; }
.pc-section { padding: 52px 0 44px; }
.pc-bande { padding-bottom: 44px; }

/* ---------------- Bandes : une partie = une famille ---------------- */
main > section.pc-section { background: var(--pc-fond); }
main > section.pc-section:nth-of-type(3n+1),
main > section.pc-section[data-teinte="peche"] {
    --pc-fond: var(--pc-peche);   --pc-moyen: var(--pc-peche-m);   --pc-fonce: var(--pc-peche-f);   --pc-nuit: var(--pc-peche-n);   --pc-vif: #C2410C;
    --pc-fond2: var(--pc-lilas);  --pc-moyen2: var(--pc-lilas-m);  --pc-fonce2: var(--pc-lilas-f);  --pc-nuit2: var(--pc-lilas-n);
}
main > section.pc-section:nth-of-type(3n+2),
main > section.pc-section[data-teinte="lilas"] {
    --pc-fond: var(--pc-lilas);   --pc-moyen: var(--pc-lilas-m);   --pc-fonce: var(--pc-lilas-f);   --pc-nuit: var(--pc-lilas-n);   --pc-vif: #6D28D9;
    --pc-fond2: var(--pc-citron); --pc-moyen2: var(--pc-citron-m); --pc-fonce2: var(--pc-citron-f); --pc-nuit2: var(--pc-citron-n);
}
main > section.pc-section:nth-of-type(3n),
main > section.pc-section[data-teinte="citron"] {
    --pc-fond: var(--pc-citron);  --pc-moyen: var(--pc-citron-m);  --pc-fonce: var(--pc-citron-f);  --pc-nuit: var(--pc-citron-n);  --pc-vif: #A16207;
    --pc-fond2: var(--pc-peche);  --pc-moyen2: var(--pc-peche-m);  --pc-fonce2: var(--pc-peche-f);  --pc-nuit2: var(--pc-peche-n);
}
/* data-teinte l'emporte sur la rotation automatique */
main > section.pc-section[data-teinte="peche"]:nth-of-type(n) {
    --pc-fond: var(--pc-peche);   --pc-moyen: var(--pc-peche-m);   --pc-fonce: var(--pc-peche-f);   --pc-nuit: var(--pc-peche-n);   --pc-vif: #C2410C;
    --pc-fond2: var(--pc-lilas);  --pc-moyen2: var(--pc-lilas-m);  --pc-fonce2: var(--pc-lilas-f);  --pc-nuit2: var(--pc-lilas-n);
}
main > section.pc-section[data-teinte="lilas"]:nth-of-type(n) {
    --pc-fond: var(--pc-lilas);   --pc-moyen: var(--pc-lilas-m);   --pc-fonce: var(--pc-lilas-f);   --pc-nuit: var(--pc-lilas-n);   --pc-vif: #6D28D9;
    --pc-fond2: var(--pc-citron); --pc-moyen2: var(--pc-citron-m); --pc-fonce2: var(--pc-citron-f); --pc-nuit2: var(--pc-citron-n);
}
main > section.pc-section[data-teinte="citron"]:nth-of-type(n) {
    --pc-fond: var(--pc-citron);  --pc-moyen: var(--pc-citron-m);  --pc-fonce: var(--pc-citron-f);  --pc-nuit: var(--pc-citron-n);  --pc-vif: #A16207;
    --pc-fond2: var(--pc-peche);  --pc-moyen2: var(--pc-peche-m);  --pc-fonce2: var(--pc-peche-f);  --pc-nuit2: var(--pc-peche-n);
}

/* ---------------- Typographie ---------------- */
.pc-kicker {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    margin: 0 0 12px;
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--pc-accent);
}
.pc-kicker span + span::before { content: '·'; margin-right: 10px; color: var(--pc-trait-2); }
.pc-h1 {
    margin: 0 0 6px;
    font-family: var(--pc-serif); font-weight: 600; font-optical-sizing: auto;
    font-size: clamp(2.3rem, 10vw, 3.7rem); line-height: 1.02; letter-spacing: -0.015em;
    color: var(--pc-encre);
}
.pc-sous-titre {
    margin: 0 0 16px;
    font-family: var(--pc-serif); font-style: italic; font-weight: 400;
    font-size: clamp(1.22rem, 5vw, 1.5rem); line-height: 1.3; color: var(--pc-encre-2);
}
.pc-h2 {
    margin: 0 0 14px;
    font-family: var(--pc-serif); font-weight: 600; font-optical-sizing: auto;
    font-size: clamp(1.65rem, 6.6vw, 2.3rem); line-height: 1.12; letter-spacing: -0.01em;
    color: var(--pc-encre);
}
.pc-h3 { margin: 26px 0 8px; font-size: 1.12rem; font-weight: 700; line-height: 1.3; color: var(--pc-encre); }
/* pastille de partie (« Notion 2 », « À retenir ») dans la couleur de la bande */
.pc-num {
    display: flex; width: fit-content; align-items: center; min-height: 28px; margin: 0 0 12px; padding: 0 12px;
    border-radius: 999px; background: var(--pc-moyen); color: var(--pc-nuit);
    font-size: 0.76rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1;
}
.pc-lead { margin: 0 0 18px; font-size: 1.16rem; line-height: 1.6; color: var(--pc-encre-2); }
.pc-page p { margin: 0 0 14px; }
.pc-prose p, .pc-prose li { color: var(--pc-encre-2); }
.pc-prose strong, .pc-page strong { color: var(--pc-encre); font-weight: 700; }
.pc-prose em { font-style: italic; }
.pc-prose ul, .pc-liste { list-style: none; margin: 0 0 16px; padding: 0; }
.pc-prose ul li, .pc-liste li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.pc-prose ul li::before, .pc-liste li::before {
    content: ''; position: absolute; left: 3px; top: 0.66em;
    width: 7px; height: 7px; border-radius: 50%; background: var(--pc-fonce);
}
.pc-prose ol, .pc-etapes { counter-reset: pc-e; list-style: none; margin: 0 0 16px; padding: 0; }
.pc-prose ol li, .pc-etapes li { counter-increment: pc-e; position: relative; padding-left: 36px; margin-bottom: 10px; }
.pc-prose ol li::before, .pc-etapes li::before {
    content: counter(pc-e); position: absolute; left: 0; top: 0.05em;
    width: 25px; height: 25px; border-radius: 50%;
    background: var(--pc-moyen); color: var(--pc-nuit);
    font-size: 0.8rem; font-weight: 800; line-height: 25px; text-align: center;
}
.pc-hl { background: var(--pc-citron-m); color: inherit; padding: 0 0.16em; border-radius: 0.22em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pc-nowrap { white-space: nowrap; }

/* Citation : le cœur d'un cours de philosophie (texte exact, œuvre, passage). Code commun : pêche. */
.pc-citation {
    position: relative;
    margin: 22px 0; padding: 18px 18px 14px 18px;
    background: var(--pc-peche); border: 1.5px solid var(--pc-peche-m); border-radius: 18px;
}
main > section.pc-section:nth-of-type(3n+1) .pc-citation,
main > section.pc-section[data-teinte="peche"] .pc-citation { background: var(--pc-carte); }
main > section.pc-section[data-teinte="lilas"] .pc-citation,
main > section.pc-section[data-teinte="citron"] .pc-citation { background: var(--pc-peche); }
.pc-citation blockquote { margin: 0; }
.pc-citation blockquote p {
    margin: 0 0 8px;
    font-family: var(--pc-serif); font-style: italic; font-weight: 400;
    font-size: 1.24rem; line-height: 1.45; color: var(--pc-encre);
}
.pc-citation blockquote p::before { content: '« '; color: var(--pc-peche-f); font-style: normal; }
.pc-citation blockquote p::after { content: ' »'; color: var(--pc-peche-f); font-style: normal; }
.pc-citation blockquote p.pc-suite::before, .pc-citation blockquote p.pc-sans-guillemets::before,
.pc-citation blockquote p.pc-sans-guillemets::after { content: none; }
.pc-citation figcaption, .pc-citation .pc-source {
    display: block; margin: 6px 0 0;
    font-size: 0.84rem; font-weight: 600; line-height: 1.45; color: var(--pc-encre-3);
}
.pc-citation figcaption cite, .pc-citation .pc-source cite { font-style: italic; }
.pc-citation-grande blockquote p { font-size: clamp(1.35rem, 5.4vw, 1.7rem); line-height: 1.35; }

/* Encadrés au code commun : définition (ciel), exemple (citron), piège (rose), à savoir (menthe), débat (lilas) */
.pc-def, .pc-ex, .pc-piege, .pc-note, .pc-debat {
    margin: 18px 0; padding: 14px 16px; border-radius: 16px; border: 1.5px solid;
    font-size: 1rem; line-height: 1.6; color: var(--pc-encre-2);
}
.pc-def { background: var(--pc-ciel); border-color: var(--pc-ciel-m); }
.pc-ex { background: var(--pc-citron); border-color: var(--pc-citron-m); }
.pc-piege { background: var(--pc-rose); border-color: var(--pc-rose-m); }
.pc-note { background: var(--pc-menthe); border-color: var(--pc-menthe-m); }
.pc-debat { background: var(--pc-lilas); border-color: var(--pc-lilas-m); }
/* même famille que la bande : l'encadré passe en carte claire, son liseré garde le code */
main > section.pc-section:nth-of-type(3n) .pc-ex,
main > section.pc-section[data-teinte="citron"] .pc-ex,
main > section.pc-section:nth-of-type(3n+2) .pc-debat,
main > section.pc-section[data-teinte="lilas"] .pc-debat { background: var(--pc-carte); }
main > section.pc-section[data-teinte="peche"] .pc-ex,
main > section.pc-section[data-teinte="lilas"] .pc-ex { background: var(--pc-citron); }
main > section.pc-section[data-teinte="peche"] .pc-debat,
main > section.pc-section[data-teinte="citron"] .pc-debat { background: var(--pc-lilas); }
.pc-def > b:first-child, .pc-ex > b:first-child, .pc-piege > b:first-child, .pc-note > b:first-child, .pc-debat > b:first-child {
    display: block; margin-bottom: 4px;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
}
.pc-def > b:first-child { color: var(--pc-ciel-f); }
.pc-ex > b:first-child { color: var(--pc-citron-f); }
.pc-piege > b:first-child { color: var(--pc-rose-f); }
.pc-note > b:first-child { color: var(--pc-menthe-f); }
.pc-debat > b:first-child { color: var(--pc-lilas-f); }
.pc-def p:last-child, .pc-ex p:last-child, .pc-piege p:last-child, .pc-note p:last-child, .pc-debat p:last-child { margin-bottom: 0; }

/* Deux colonnes qui s'opposent (thèse / objection, phénomène / noumène…) : une famille chacune */
.pc-duo { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 18px 0; }
.pc-duo > div { padding: 14px 16px; border-radius: 16px; background: var(--pc-carte); border: 1.5px solid var(--pc-moyen); color: var(--pc-encre-2); }
.pc-duo > div:nth-child(2) { background: var(--pc-fond2); border-color: var(--pc-moyen2); }
.pc-duo > div > b:first-child { display: block; margin-bottom: 4px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pc-fonce); }
.pc-duo > div:nth-child(2) > b:first-child { color: var(--pc-fonce2); }
.pc-duo p:last-child { margin-bottom: 0; }
@media (min-width: 640px) { .pc-duo { grid-template-columns: 1fr 1fr; } }

/* Tableaux */
.pc-table-wrap { margin: 16px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; background: var(--pc-carte); border: 1.5px solid var(--pc-moyen); }
.pc-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.pc-table th, .pc-table td { padding: 9px 8px; border-bottom: 1px solid var(--pc-trait); text-align: left; vertical-align: top; }
.pc-table th { background: var(--pc-fond); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pc-nuit); }
.pc-table td { color: var(--pc-encre-2); }
.pc-table td:first-child { font-weight: 600; color: var(--pc-encre); }
.pc-table tr:last-child td { border-bottom: 0; }

/* Figures statiques */
.pc-figure { margin: 18px 0; }
.pc-figure svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.pc-figure figcaption { margin-top: 8px; font-size: 0.9rem; line-height: 1.5; color: var(--pc-encre-3); text-align: center; }
.pc-svg text { font-family: var(--pc-sans); }
.pc-svg .pc-t-serif { font-family: var(--pc-serif); }

/* ---------------- En-tête de fiche ---------------- */
.pc-hero { padding: 76px 0 40px; }
.pc-hero .pc-wrap { position: relative; }
.pc-hero-fig { margin: 10px 0 20px; }
.pc-hero-fig svg { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 auto; }
.pc-identite { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 16px; padding: 0; list-style: none; font-size: 0.92rem; color: var(--pc-encre-3); }
.pc-identite li b { color: var(--pc-encre); font-weight: 600; }
.pc-objectifs {
    margin: 22px 0 0; padding: 16px 18px;
    background: var(--pc-peche); border: 1.5px solid var(--pc-peche-m); border-radius: 18px;
}
.pc-objectifs > p:first-child { margin: 0 0 8px; font-weight: 700; color: var(--pc-encre); }
.pc-objectifs ul { list-style: none; margin: 0; padding: 0; }
.pc-objectifs li { position: relative; padding-left: 26px; margin-bottom: 7px; color: var(--pc-encre-2); line-height: 1.5; }
.pc-objectifs li::before {
    content: ''; position: absolute; left: 2px; top: 0.22em; width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid var(--pc-peche-f); background: var(--pc-carte); box-sizing: border-box;
}
/* sommaire : chaque pastille prend la couleur de la partie où elle mène (même rotation que les bandes) */
.pc-sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.pc-sommaire a {
    display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px;
    border-radius: 999px; border: 1.5px solid var(--pc-peche-m); background: var(--pc-peche);
    color: var(--pc-peche-n); font-size: 0.86rem; font-weight: 600; text-decoration: none;
}
.pc-sommaire li:nth-child(3n+2) a { border-color: var(--pc-lilas-m); background: var(--pc-lilas); color: var(--pc-lilas-n); }
.pc-sommaire li:nth-child(3n) a { border-color: var(--pc-citron-m); background: var(--pc-citron); color: var(--pc-citron-n); }
.pc-sommaire a:hover { border-color: currentColor; }

/* Frise de vie et d'œuvres */
.pc-frise { list-style: none; margin: 18px 0; padding: 0; position: relative; }
.pc-frise::before { content: ''; position: absolute; left: 57px; top: 6px; bottom: 6px; width: 2px; background: var(--pc-moyen); }
.pc-frise li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 28px; padding: 6px 0; color: var(--pc-encre-2); line-height: 1.5; }
.pc-frise li > b { font-variant-numeric: tabular-nums; text-align: right; color: var(--pc-encre); font-weight: 700; }
.pc-frise li::after { content: ''; position: absolute; left: 52px; top: calc(6px + 0.5em); width: 12px; height: 12px; border-radius: 50%; background: var(--pc-moyen); border: 2px solid var(--pc-fonce); box-sizing: border-box; }
.pc-page .pc-frise li { padding-left: 0; margin-bottom: 0; counter-increment: none; }
.pc-page .pc-frise li::before { content: none; display: none; }

/* ---------------- Boutons et puces ---------------- */
.pc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 22px; border: 0; border-radius: 14px;
    background: var(--pc-accent); color: #fff;
    font: 700 1rem/1.2 var(--pc-sans); cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.pc-btn:hover { background: var(--pc-accent-2); }
.pc-btn:active { transform: translateY(1px); }
.pc-btn:disabled { opacity: 0.45; cursor: default; }
.pc-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 0 16px; border-radius: 12px;
    border: 1.5px solid var(--pc-moyen); background: var(--pc-carte); color: var(--pc-encre-2);
    font: 600 0.92rem/1.2 var(--pc-sans); cursor: pointer;
}
.pc-btn-ghost:hover { border-color: var(--pc-fonce); color: var(--pc-fonce); }
.pc-puces { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.pc-puce {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; padding: 0 13px; border-radius: 999px;
    border: 1.5px solid var(--pc-moyen); background: var(--pc-fond); color: var(--pc-encre-2);
    font: 600 0.88rem/1.1 var(--pc-sans); cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pc-puce:hover { border-color: var(--pc-fonce); color: var(--pc-encre); }
.pc-puce[aria-pressed="true"] { background: var(--pc-vif); border-color: var(--pc-vif); color: #fff; }
.pc-page button:focus-visible, .pc-page a:focus-visible, .pc-page summary:focus-visible, .pc-page input:focus-visible, .pc-page [tabindex]:focus-visible {
    outline: 3px solid var(--pc-accent); outline-offset: 2px;
}
/* Rangée de puces qui défile de côté (une seule ligne, le bouton actif se recentre) */
.pc-rangee { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 14px 4px; scroll-padding: 0 14px; margin: 8px 0 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
.pc-rangee::-webkit-scrollbar { display: none; }
.pc-rangee .pc-puce { flex: none; }
@media (min-width: 900px) { .pc-rangee { flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; } }

/* ---------------- Scènes collées (mk-pin) : carte claire, panneau du schéma dans la couleur de la bande ---------------- */
.pc-pin { --mk-pin-couleur: var(--pc-vif); --mk-pin-haut: 10px; --mk-pin-bas: 70px; margin: 22px 0 8px; }
.pc-pin > .mk-pin-scene { padding: 0 12px; }
.pc-scene {
    max-width: 34rem; margin: 0 auto; padding: 12px 12px 10px;
    background: var(--pc-carte); border: 1.5px solid var(--pc-moyen); border-radius: 22px;
    color: var(--pc-encre);
}
.pc-scene-titre { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin: 2px 4px 6px; }
.pc-scene-titre h3, .pc-scene-titre p { margin: 0; }
.pc-scene-titre h3 { font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.pc-scene-titre p { font-size: 0.86rem; font-weight: 700; color: var(--pc-fonce); }
.pc-scene svg { display: block; width: 100%; height: auto; background: var(--pc-fond); border-radius: 14px; }
.pc-scene .pc-puces { justify-content: center; margin-top: 8px; }
.pc-scene .mk-pin-indice { color: var(--pc-encre-3); }
.pc-scene .mk-pin-barre { background: var(--pc-fond); }
.pc-lectures { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; margin: 8px 0 0; }
.pc-lecture { min-width: 0; padding: 6px 10px 7px; border-radius: 12px; background: var(--pc-fond); }
.pc-lecture span { display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pc-encre-3); }
.pc-lecture b { display: block; font-size: 1.04rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pc-encre); overflow-wrap: anywhere; }
.pc-explique { margin: 8px 2px 0; min-height: 6em; font-size: 0.93rem; line-height: 1.5; color: var(--pc-encre-2); } /* 4 lignes : la scène ne grandit pas d'un palier à l'autre */
.pc-explique b { color: var(--pc-encre); }

/* ---------------- Séquences pas à pas (mk-scrolly) ---------------- */
.pc-scrolly { --mk-card-bg: #fffdf8; --mk-card-fg: #1f2330; --mk-card-border: var(--pc-moyen); --mk-pin-couleur: var(--pc-vif); --mk-scrolly-bottom: 72px; --mk-graphic-h: auto; margin: 26px auto 10px; }
.pc-scrolly .mk-scrolly-graphic { padding: 0 12px; box-sizing: border-box; }
.pc-scrolly .mk-scrolly-graphic > svg {
    height: auto; max-height: 100%;
    background: var(--pc-carte); border: 1.5px solid var(--pc-moyen); border-radius: 22px;
}
.pc-scrolly .mk-step-card { font-size: 1rem; line-height: 1.55; border-width: 1.5px; }
.pc-scrolly .mk-step-card p { margin: 0 0 6px; color: var(--pc-encre-2); }
.pc-scrolly .mk-step-card p:last-child { margin-bottom: 0; }
.pc-scrolly .mk-step-card em { font-family: var(--pc-serif); font-size: 1.06em; }
.pc-etape { display: block; margin-bottom: 4px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pc-fonce); }
.pc-scrolly .mk-scrolly-points span.is-active { background: var(--pc-vif); }

/* ---------------- Dialogue (maïeutique, débat) ---------------- */
.pc-dialogue { display: grid; gap: 8px; margin: 18px 0; }
.pc-replique { max-width: 88%; padding: 10px 14px; border-radius: 16px; background: var(--pc-carte); border: 1.5px solid var(--pc-moyen); color: var(--pc-encre-2); line-height: 1.5; }
.pc-replique b { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pc-fonce); margin-bottom: 2px; }
.pc-replique.pc-droite { justify-self: end; background: var(--pc-fond2); border-color: var(--pc-moyen2); }
.pc-replique.pc-droite b { color: var(--pc-fonce2); }

/* ---------------- Petits exercices : options dans le pastel de la bande, cases dans la famille voisine ---------------- */
.pc-exo {
    margin: 26px 0; padding: 16px 16px 14px;
    background: var(--pc-carte); border: 1.5px dashed var(--pc-moyen); border-radius: 20px;
}
.pc-exo-tag {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 3px 10px;
    border-radius: 999px; background: var(--pc-citron-m); color: var(--pc-citron-n);
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
.pc-exo-q { margin: 0 0 10px; font-weight: 600; color: var(--pc-encre); line-height: 1.5; }
.pc-exo-opts { display: grid; gap: 8px; }
.pc-exo-opts button, .pc-classer-items button, .pc-bac-btn, .pc-vf-btns button {
    min-height: 46px; padding: 10px 14px; border-radius: 14px; text-align: left;
    border: 1.5px solid var(--pc-moyen); background: var(--pc-fond); color: var(--pc-encre);
    font: 600 0.98rem/1.35 var(--pc-sans); cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.pc-exo-opts button:hover:not(:disabled), .pc-classer-items button:hover:not(:disabled), .pc-bac-btn:hover, .pc-vf-btns button:hover:not(:disabled) { border-color: var(--pc-fonce); }
.pc-page .is-ok { border-color: var(--pc-menthe-f) !important; background: var(--pc-menthe) !important; color: var(--pc-menthe-f) !important; }
.pc-page .is-ko { border-color: var(--pc-rose-f) !important; background: var(--pc-rose) !important; color: var(--pc-rose-f) !important; }
.pc-exo-opts button:disabled, .pc-vf-btns button:disabled { cursor: default; }
.pc-exo-chat .mk-chat { margin: 12px 0 0; }
.pc-exo-fin { margin-top: 10px; }
@keyframes pc-secoue { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.pc-secoue { animation: pc-secoue 0.32s ease; }
/* classer */
.pc-classer-items { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; min-height: 46px; }
.pc-classer-items button { text-align: center; }
.pc-classer-items button[aria-pressed="true"] { border-color: var(--pc-fonce); background: var(--pc-moyen); box-shadow: 0 0 0 2px var(--pc-fonce) inset; }
.pc-classer-bacs { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.pc-bac { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 16px; background: var(--pc-fond2); border: 1.5px solid var(--pc-moyen2); min-width: 0; }
.pc-bac.is-cible { box-shadow: 0 0 0 2px var(--pc-fonce2) inset; }
.pc-bac-btn { text-align: center; background: var(--pc-carte); border-color: var(--pc-moyen2); font-weight: 700; }
.pc-bac-btn:hover { border-color: var(--pc-fonce2); }
.pc-bac-liste { display: flex; flex-wrap: wrap; gap: 5px; min-height: 6px; }
.pc-bac-liste span {
    display: inline-flex; align-items: center; min-height: 30px; padding: 2px 10px; border-radius: 999px;
    background: var(--pc-menthe); border: 1px solid var(--pc-menthe-m); color: var(--pc-menthe-f); font-size: 0.86rem; font-weight: 600; line-height: 1.3;
}
/* vrai / faux */
.pc-vf-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pc-vf-liste > li { padding: 10px 12px; border-radius: 14px; background: var(--pc-fond); border: 1.5px solid var(--pc-moyen); }
.pc-vf-enonce { margin: 0 0 8px; font-weight: 600; color: var(--pc-encre); line-height: 1.45; }
.pc-vf-btns { display: flex; gap: 8px; }
.pc-vf-btns button { flex: 1; text-align: center; min-height: 42px; padding: 8px 10px; background: var(--pc-carte); }
.pc-vf-why { margin: 8px 0 0; font-size: 0.93rem; line-height: 1.5; color: var(--pc-encre-2); }
.pc-vf-why:empty { display: none; }
.pc-vf-score { margin: 10px 0 0; font-weight: 700; color: var(--pc-encre); }
/* saisie numérique */
.pc-saisie-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pc-saisie-ligne input {
    width: 9rem; min-height: 46px; padding: 0 12px; border-radius: 12px;
    border: 1.5px solid var(--pc-moyen); background: var(--pc-fond); color: var(--pc-encre);
    font: 600 1.05rem/1 var(--pc-sans); font-variant-numeric: tabular-nums;
}
.pc-unite { font-weight: 600; color: var(--pc-encre-3); }
/* remettre dans l'ordre */
.pc-ordre-liste { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.pc-ordre-liste li {
    display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 14px;
    border: 1.5px solid var(--pc-moyen); background: var(--pc-fond); color: var(--pc-encre); line-height: 1.4;
}
.pc-ordre-liste li > span:first-child { flex: 1; min-width: 0; }
.pc-ordre-btns { display: flex; gap: 4px; flex: none; }
.pc-ordre-btns button {
    width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--pc-moyen);
    background: var(--pc-carte); color: var(--pc-fonce); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.pc-ordre-btns button:disabled { opacity: 0.35; cursor: default; }

/* ---------------- Exercices corrigés ---------------- */
.pc-corriges { display: grid; gap: 10px; margin: 14px 0; }
details.pc-corrige { border: 1.5px solid var(--pc-moyen); border-radius: 16px; background: var(--pc-carte); padding: 0; overflow: clip; }
details.pc-corrige > summary {
    list-style: none; cursor: pointer; padding: 14px 16px; font-weight: 600; line-height: 1.5; color: var(--pc-encre);
}
details.pc-corrige > summary::-webkit-details-marker { display: none; }
details.pc-corrige > summary::after {
    content: 'Voir le corrigé'; display: table; margin-top: 8px; padding: 4px 10px; border-radius: 999px;
    background: var(--pc-fond); color: var(--pc-fonce);
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
details.pc-corrige[open] > summary::after { content: 'Masquer le corrigé'; background: var(--pc-moyen); color: var(--pc-nuit); }
.pc-corrige-sol { padding: 12px 16px 14px; background: var(--pc-fond); border-top: 1.5px dashed var(--pc-moyen); color: var(--pc-encre-2); }
.pc-corrige-sol p { margin: 0 0 8px; }
.pc-corrige-sol p:last-child { margin-bottom: 0; }

/* ---------------- Pièges (code commun : rose) ---------------- */
.pc-pieges { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 10px; }
.pc-page .pc-pieges li {
    position: relative; margin: 0; padding: 12px 14px 12px 48px; border-radius: 16px;
    background: var(--pc-rose); border: 1.5px solid var(--pc-rose-m); color: var(--pc-encre-2); line-height: 1.55;
}
.pc-page .pc-pieges li::before {
    content: '!'; position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; border-radius: 8px;
    background: var(--pc-rose-m); color: var(--pc-rose-f); font-size: 0.95rem; font-weight: 800; line-height: 24px; text-align: center;
}
.pc-pieges b { color: var(--pc-encre); }

/* ---------------- Récapitulatif ---------------- */
.pc-recap { margin: 14px 0; padding: 4px 16px; background: var(--pc-carte); border: 1.5px solid var(--pc-moyen); border-radius: 18px; }
.pc-recap div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 11px 0; border-bottom: 1px solid var(--pc-moyen); }
.pc-recap div:last-child { border-bottom: 0; }
.pc-recap dt { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pc-fonce); }
.pc-recap dd { margin: 0; color: var(--pc-encre); font-weight: 500; }
@media (min-width: 640px) { .pc-recap div { grid-template-columns: 11rem 1fr; gap: 16px; align-items: baseline; } }
.pc-liens { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.pc-liens a {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
    border: 1.5px solid var(--pc-moyen2); background: var(--pc-fond2); color: var(--pc-nuit2); font-weight: 600; font-size: 0.92rem; text-decoration: none;
}
.pc-liens a:hover { border-color: currentColor; }

/* ---------------- Quiz ---------------- */
.pc-quiz { padding: 18px 16px 16px; background: var(--pc-carte); border: 1.5px solid var(--pc-moyen); border-radius: 22px; }
.pc-quiz-tete { display: flex; justify-content: space-between; gap: 10px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pc-encre-3); }
.pc-quiz-barre { height: 6px; margin: 8px 0 14px; border-radius: 999px; background: var(--pc-fond); overflow: hidden; }
.pc-quiz-barre i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--pc-vif); transition: width 0.3s ease; }
.pc-quiz-q { margin: 0 0 12px; font-family: var(--pc-serif); font-size: 1.26rem; font-weight: 600; line-height: 1.35; color: var(--pc-encre); }
.pc-quiz-opts { display: grid; gap: 8px; }
.pc-quiz-opts button {
    min-height: 48px; padding: 11px 14px; border-radius: 14px; text-align: left;
    border: 2px solid var(--pc-moyen); background: var(--pc-fond); color: var(--pc-encre);
    font: 600 0.98rem/1.4 var(--pc-sans); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.pc-quiz-opts button:hover:not(:disabled) { border-color: var(--pc-fonce); }
.pc-quiz-opts button.correct { border-color: var(--pc-menthe-f); background: var(--pc-menthe); color: var(--pc-menthe-f); }
.pc-quiz-opts button.wrong { border-color: var(--pc-rose-f); background: var(--pc-rose); color: var(--pc-rose-f); }
.pc-quiz-expl { margin: 12px 0 0; font-size: 0.95rem; line-height: 1.55; color: var(--pc-encre-2); }
.pc-quiz-expl:not(:empty) { padding: 11px 13px; border-radius: 14px; background: var(--pc-fond2); border: 1.5px solid var(--pc-moyen2); }
.pc-quiz-note { margin: 4px 0 6px; text-align: center; font-family: var(--pc-serif); font-size: 3rem; font-weight: 600; line-height: 1.05; color: var(--pc-fonce); }
.pc-quiz-label { margin: 0; text-align: center; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pc-encre-3); }
.pc-quiz-erreurs { margin: 16px 0 6px; }
.pc-quiz-erreurs > p { margin: 0 0 8px; font-weight: 700; color: var(--pc-encre); }
.pc-quiz-erreurs ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pc-quiz-erreurs li { padding: 10px 12px; border-radius: 14px; background: var(--pc-fond); border: 1.5px solid var(--pc-moyen); font-size: 0.93rem; line-height: 1.5; color: var(--pc-encre-2); }
.pc-quiz-erreurs li b { display: block; color: var(--pc-encre); margin-bottom: 2px; }
.pc-quiz-erreurs li span { display: block; color: var(--pc-menthe-f); font-weight: 600; margin-bottom: 2px; }
.pc-centre { text-align: center; }

/* ---------------- Bas de page ---------------- */
.pc-page .mk-sources { color: var(--pc-encre-2); }
.pc-page .mk-sources-liste { list-style: decimal; }
.pc-page .capsule-arrow svg { width: 20px; height: 20px; display: block; margin: 0 auto; }

/* ---------------- Glossaire dans les cours ---------------- */
.pc-page .term {
    color: inherit; font-weight: 600; border-bottom: 0;
    text-decoration: underline dotted var(--pc-fonce); text-decoration-thickness: 2px; text-underline-offset: 3px;
    cursor: help;
}

/* ---------------- Grand écran ---------------- */
@media (min-width: 900px) {
    .pc-hero { padding-top: 104px; }
    .pc-section { padding-top: 72px; }
    .pc-pin > .mk-pin-scene { padding: 0 24px; }
    .pc-scene { padding: 16px 18px 14px; }
}

/* ---------------- Impression : pas de grands aplats ---------------- */
@media print {
    main > section.pc-section { background: none; }
}

/* ---------------- Animations réduites ---------------- */
@media (prefers-reduced-motion: reduce) {
    .pc-page *, .pc-page *::before, .pc-page *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}