/* ==========================================================================
   Cours Business en scrollytelling : feuille commune aux 6 fiches du catalogue
   (marketing, gestion-projet, finance, entrepreneuriat-lean, droit-suisse,
   comptabilite-bases). Préfixe bc-. Moteur : ../css/scrolly.css + ../js/scrolly.js.
   Direction imposée pour la section : pastel rose-violet-bleu, Nunito + Fira Code,
   jamais d'orange ni de fond sombre. Deux accents saturés pour le texte important :
   rose #be185d et violet #6d28d9 ; le bleu #1d4ed8 sert aux repères.
   Passe couleur (1er oct. 2026) : bandes pastel rose, lilas et ciel (classes .bc-bande, .bc-rose,
   .bc-ciel), encarts au code commun de ../css/couleurs.css (définition ciel, exemple citron, piège rose,
   à retenir menthe, repère lilas). Les valeurs de secours permettent d'utiliser le kit sans couleurs.css.
   ========================================================================== */

body.bc-page {
    --bc-paper: #fcf9fe;
    --bc-lilas: #f5effb;
    --bc-ciel: #eef5fd;
    --bc-card: #ffffff;
    --bc-line: #ebe3f3;
    --bc-line-2: #d9cde8;
    --bc-ink: #221b33;
    --bc-ink-2: #4a4360;
    --bc-ink-3: #6b6480;
    --bc-rose: #db2777;
    --bc-rose-fort: #be185d;
    --bc-rose-doux: #fce7f3;
    --bc-rose-pale: #fdf2f8;
    --bc-violet: #7c3aed;
    --bc-violet-fort: #6d28d9;
    --bc-violet-doux: #ede9fe;
    --bc-violet-pale: #f5f3ff;
    --bc-bleu: #2563eb;
    --bc-bleu-fort: #1d4ed8;
    --bc-bleu-doux: #dbeafe;
    --bc-bleu-pale: #eff6ff;
    --bc-ok: #15803d;
    --bc-ok-doux: #dcfce7;
    --bc-ko: #be123c;
    --bc-ko-doux: #ffe4e6;
    --bc-sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bc-mono: 'Fira Code', ui-monospace, Menlo, monospace;
    margin: 0;
    min-height: 100vh;
    padding-bottom: 96px;
    background: var(--bc-paper);
    color: var(--bc-ink);
    font-family: var(--bc-sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.bc-page ::selection { background: var(--bc-rose-doux); color: var(--bc-ink); }
.bc-page a { color: var(--bc-rose-fort); text-underline-offset: 3px; }
.bc-page svg { max-width: 100%; }
.bc-page sub, .bc-page sup { line-height: 0; }
.bc-page .hidden { display: none !important; }
.bc-mono, .bc-page .bz-mono { font-family: var(--bc-mono); font-variant-numeric: tabular-nums; }
.bc-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------- Mise en page ---------------- */
.bc-wrap { max-width: 42rem; margin: 0 auto; padding: 0 16px; }
.bc-section { padding: 48px 0 10px; }
.bc-bande { background: var(--mk-lilas, #eee8fd); padding-bottom: 44px; margin-top: 28px; }
.bc-bande.bc-ciel { background: var(--mk-ciel, #e3f0fb); }
.bc-bande.bc-rose { background: var(--mk-rose, #fde7ef); }
/* deux bandes qui se suivent se touchent (le repère de progression de 4 px passe dessous) */
.bc-bande + .bc-bande, .bc-bande + .fiche-checkpoint + .bc-bande { margin-top: 0; }
.bc-bande + .fiche-checkpoint { margin-bottom: -4px; }

/* ---------------- Typographie ---------------- */
.bc-retour {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: 0 0 18px;
    color: var(--bc-ink-3); font-size: 0.9rem; font-weight: 800; text-decoration: none;
}
.bc-retour:hover { color: var(--bc-rose-fort); }
.bc-kicker {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 12px;
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bc-rose-fort);
}
.bc-kicker span { white-space: nowrap; }
.bc-kicker span + span::before { content: '·'; margin-right: 8px; color: var(--bc-line-2); }
.bc-h1 {
    margin: 0 0 14px; font-weight: 900; font-size: clamp(2.1rem, 9vw, 3.4rem); line-height: 1.04;
    letter-spacing: -0.02em; color: var(--bc-ink);
}
.bc-h1 em { font-style: normal; color: var(--bc-rose-fort); }
.bc-h2 {
    margin: 0 0 14px; font-weight: 900; font-size: clamp(1.6rem, 6.4vw, 2.2rem); line-height: 1.12;
    letter-spacing: -0.015em; color: var(--bc-ink);
}
.bc-h3 { margin: 26px 0 8px; font-size: 1.12rem; font-weight: 800; line-height: 1.3; color: var(--bc-ink); }
.bc-num { margin: 0 0 6px; font-size: 0.76rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; color: var(--bc-violet-fort); }
.bc-lead { margin: 0 0 18px; font-size: 1.14rem; line-height: 1.6; color: var(--bc-ink-2); }
.bc-page p { margin: 0 0 14px; }
.bc-prose p, .bc-prose li { color: var(--bc-ink-2); }
.bc-page strong, .bc-prose strong { color: var(--bc-ink); font-weight: 800; }
.bc-prose ul, .bc-liste { list-style: none; margin: 0 0 16px; padding: 0; }
.bc-prose ul li, .bc-liste li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.bc-prose ul li::before, .bc-liste li::before {
    content: ''; position: absolute; left: 3px; top: 0.66em; width: 7px; height: 7px; border-radius: 50%; background: var(--bc-rose);
}
.bc-prose ol, .bc-etapes { counter-reset: bc-e; list-style: none; margin: 0 0 16px; padding: 0; }
.bc-prose ol li, .bc-etapes li { counter-increment: bc-e; position: relative; padding-left: 36px; margin-bottom: 10px; }
.bc-prose ol li::before, .bc-etapes li::before {
    content: counter(bc-e); position: absolute; left: 0; top: 0.08em; width: 25px; height: 25px; border-radius: 8px;
    background: var(--bc-violet-doux); color: var(--bc-violet-fort); font-size: 0.8rem; font-weight: 900; line-height: 25px; text-align: center;
}
.bc-formule {
    margin: 16px 0; padding: 13px 16px; background: var(--bc-card); border: 1px solid var(--bc-line); border-radius: 16px;
    text-align: center; font-family: var(--bc-mono); font-size: 0.98rem; font-weight: 600; line-height: 1.6; color: var(--bc-violet-fort);
    font-variant-numeric: tabular-nums;
}
.bc-formule small { display: block; margin-top: 4px; font-family: var(--bc-sans); font-size: 0.86rem; font-weight: 600; color: var(--bc-ink-3); line-height: 1.45; }
.bc-ecriture { font-family: var(--bc-mono); font-weight: 600; color: var(--bc-violet-fort); white-space: nowrap; }

/* Encadrés : définition, exemple, piège, repère suisse (bordure entière, pas de bande latérale) */
.bc-def, .bc-ex, .bc-piege, .bc-suisse, .bc-note {
    margin: 18px 0; padding: 14px 16px; border-radius: 16px; border: 1px solid; font-size: 1rem; line-height: 1.6; color: var(--bc-ink-2);
}
.bc-def { background: var(--mk-ciel, #e3f0fb); border-color: var(--mk-ciel-m, #bcd9f5); }
.bc-ex { background: var(--mk-citron, #fff4cc); border-color: var(--mk-citron-m, #fbe38e); }
.bc-piege { background: var(--mk-rose, #fde7ef); border-color: var(--mk-rose-m, #f9c6d8); }
.bc-suisse { background: var(--mk-lilas, #eee8fd); border-color: var(--mk-lilas-m, #d4c8f7); }
.bc-note { background: var(--mk-menthe, #e2f5ea); border-color: var(--mk-menthe-m, #b6e5c8); }
.bc-def, .bc-ex, .bc-piege, .bc-suisse, .bc-note { border-width: 1.5px; }
/* un encart de la même famille que sa bande passe sur fond blanc pour rester visible */
.bc-rose .bc-piege, .bc-rose .bc-pieges li { background: var(--bc-card); }
.bc-ciel .bc-def { background: var(--bc-card); }
.bc-bande:not(.bc-rose):not(.bc-ciel) .bc-suisse { background: var(--bc-card); }
.bc-def > b:first-child, .bc-ex > b:first-child, .bc-piege > b:first-child, .bc-suisse > b:first-child, .bc-note > b:first-child {
    display: block; margin-bottom: 4px; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase;
}
.bc-def > b:first-child { color: var(--mk-ciel-f, #1d4ed8); }
.bc-ex > b:first-child { color: #854d0e; }
.bc-piege > b:first-child { color: var(--mk-rose-f, #be185d); }
.bc-suisse > b:first-child { color: var(--mk-lilas-f, #6d28d9); }
.bc-note > b:first-child { color: #166534; }
.bc-def p:last-child, .bc-ex p:last-child, .bc-piege p:last-child, .bc-suisse p:last-child, .bc-note p:last-child { margin-bottom: 0; }
.bc-suisse-drapeau { display: inline-block; width: 13px; height: 13px; margin-right: 6px; vertical-align: -1px; }

/* Tableaux : une carte par ligne sur téléphone */
.bc-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.95rem; background: var(--bc-card); border: 1px solid var(--bc-line); border-radius: 16px; overflow: hidden; }
.bc-table th { text-align: left; padding: 10px 12px; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bc-violet-fort); background: var(--mk-lilas, #eee8fd); }
.bc-table td { padding: 9px 12px; border-top: 1px solid var(--bc-line); vertical-align: top; color: var(--bc-ink-2); line-height: 1.5; }
.bc-table td:first-child { font-weight: 800; color: var(--bc-ink); }
.bc-table .bc-mono { white-space: nowrap; }
@media (max-width: 640px) {
    .bc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .bc-table, .bc-table tbody, .bc-table tr, .bc-table td { display: block; width: 100%; box-sizing: border-box; }
    .bc-table tr { padding: 9px 12px; border-top: 1px solid var(--bc-line); }
    .bc-table tr:first-child { border-top: 0; }
    .bc-table td { border: 0; padding: 2px 0; }
    .bc-table td[data-label]:not(:first-child)::before { content: attr(data-label) " : "; font-weight: 800; color: var(--bc-violet-fort); }
}

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

/* ---------------- Ouverture ---------------- */
.bc-hero { padding: 22px 0 36px; background: var(--mk-ciel, #e3f0fb); }
.bc-hero + main > .fiche-checkpoint:first-child + .bc-bande, .bc-hero + main > .bc-bande:first-child { margin-top: 0; }
.bc-hero + main > .fiche-checkpoint:first-child { margin-bottom: -4px; }
.bc-hero-fig { margin: 8px 0 20px; }
.bc-hero-fig svg { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 auto; }
.bc-objectifs { margin: 22px 0 0; padding: 16px 18px; background: var(--mk-lilas, #eee8fd); border: 1.5px solid var(--mk-lilas-m, #d4c8f7); border-radius: 18px; }
.bc-objectifs > p:first-child { margin: 0 0 8px; font-weight: 900; color: var(--bc-ink); }
.bc-objectifs ol { list-style: none; counter-reset: bc-o; margin: 0; padding: 0; }
.bc-objectifs li { counter-increment: bc-o; position: relative; padding-left: 32px; margin-bottom: 8px; color: var(--bc-ink-2); line-height: 1.5; }
.bc-objectifs li::before {
    content: counter(bc-o); position: absolute; left: 0; top: 0.05em; width: 22px; height: 22px; border-radius: 7px;
    background: #fff; color: var(--mk-lilas-f, #6d28d9); font-size: 0.76rem; font-weight: 900; line-height: 22px; text-align: center;
}
.bc-sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.bc-sommaire a {
    display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px; border-radius: 999px;
    border: 1px solid var(--bc-line-2); background: var(--bc-card); color: var(--bc-ink-2); font-size: 0.88rem; font-weight: 700; text-decoration: none;
}
.bc-sommaire a:hover { border-color: var(--bc-rose); color: var(--bc-rose-fort); }
.bc-saut { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-top: 14px; font-size: 0.92rem; font-weight: 800; color: var(--bc-violet-fort); text-decoration: none; }
.bc-saut:hover { text-decoration: underline; }

/* ---------------- Boutons et puces ---------------- */
.bc-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(--bc-rose-fort); color: #fff; font: 800 1rem/1.2 var(--bc-sans); cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.bc-btn:hover { background: #9d174d; }
.bc-btn:active { transform: translateY(1px); }
.bc-btn:disabled { opacity: 0.5; cursor: default; }
.bc-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(--bc-line-2); background: var(--bc-card); color: var(--bc-ink-2); font: 700 0.95rem/1.2 var(--bc-sans); cursor: pointer; text-decoration: none;
}
.bc-btn-ghost:hover { border-color: var(--bc-rose); color: var(--bc-rose-fort); }
.bc-btn-ghost:disabled { opacity: 0.45; cursor: default; }
.bc-puce {
    display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 40px; padding: 0 13px; border-radius: 999px;
    border: 1.5px solid var(--bc-line-2); background: var(--bc-card); color: var(--bc-ink-2); font: 700 0.88rem/1.1 var(--bc-sans); cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bc-puce:hover { border-color: var(--bc-rose); color: var(--bc-ink); }
.bc-puce[aria-pressed="true"] { background: var(--bc-violet-fort); border-color: var(--bc-violet-fort); color: #fff; }
.bc-page button:focus-visible, .bc-page a:focus-visible, .bc-page summary:focus-visible, .bc-page input:focus-visible, .bc-page [tabindex]:focus-visible {
    outline: 3px solid var(--bc-violet); outline-offset: 2px;
}
/* rangée de puces : une ligne qui défile de côté sur téléphone, le bouton actif se recentre */
.bc-rangee {
    display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 2px 4px; margin: 8px 0 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.bc-rangee::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .bc-rangee { flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; } }

/* ---------------- Scènes collées (mk-pin) ---------------- */
.bc-pin { --mk-pin-couleur: var(--bc-rose); --mk-pin-haut: 10px; --mk-pin-bas: 72px; margin: 22px 0 8px; }
.bc-pin > .mk-pin-scene { padding: 0 8px; }
.bc-scene { max-width: 36rem; margin: 0 auto; padding: 10px 10px 8px; background: var(--bc-card); border: 1px solid var(--bc-line); border-radius: 22px; color: var(--bc-ink); }
.bc-scene-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin: 2px 4px 6px; }
.bc-scene-tete h3, .bc-scene-tete p { margin: 0; }
.bc-scene-tete h3 { font-size: 1rem; font-weight: 900; line-height: 1.3; color: var(--bc-ink); }
.bc-scene-tete p { font-size: 0.86rem; font-weight: 800; color: var(--bc-violet-fort); font-variant-numeric: tabular-nums; }
.bc-scene .bc-rangee { margin-top: 6px; }
.bc-scene .mk-pin-indice { color: var(--bc-ink-3); margin-top: 8px; }
.bc-scene .mk-pin-barre { background: var(--bc-line); margin-top: 6px; }
.bc-lectures { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; margin: 6px 0 0; }
.bc-lecture { min-width: 0; padding: 5px 10px 6px; border-radius: 12px; background: #f7f4fe; border: 1px solid var(--mk-lilas-m, #d4c8f7); } /* lilas très clair : les valeurs vertes ou rouges gardent 4,5:1 */
.bc-lecture span { display: block; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; color: var(--bc-ink-3); }
.bc-lecture b { display: block; font-family: var(--bc-mono); font-size: 0.95rem; font-weight: 600; color: var(--bc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-explique { margin: 8px 4px 0; min-height: 3.1em; font-size: 0.93rem; line-height: 1.5; color: var(--bc-ink-2); }
.bc-explique b { color: var(--bc-ink); }

/* ---------------- Séquences pas à pas (mk-scrolly) ---------------- */
.bc-scrolly { --mk-card-bg: #ffffff; --mk-card-fg: #221b33; --mk-card-border: #e6dcf1; --mk-pin-couleur: #db2777; --mk-scrolly-bottom: 72px; --mk-graphic-h: auto; margin: 26px auto 10px; }
.bc-scrolly .mk-scrolly-graphic { padding: 0 8px; box-sizing: border-box; }
.bc-scrolly .mk-scrolly-graphic > svg { height: auto; max-height: 100%; background: var(--bc-card); border: 1px solid var(--bc-line); border-radius: 22px; }
.bc-scrolly .mk-step-card { font-size: 1rem; line-height: 1.55; }
.bc-scrolly .mk-step-card p { margin: 0 0 6px; color: var(--bc-ink-2); }
.bc-scrolly .mk-step-card p:last-child { margin-bottom: 0; }
.bc-scrolly .mk-step-card b, .bc-scrolly .mk-step-card strong { color: var(--bc-ink); }
.bc-etape { display: block; margin-bottom: 3px; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; color: var(--bc-rose-fort); }

/* ---------------- Petits exercices ---------------- */
.bc-exo { margin: 26px 0; padding: 16px 16px 14px; background: var(--bc-card); border: 1.5px dashed var(--bc-line-2); border-radius: 20px; }
.bc-exo-tag {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px;
    background: var(--bc-violet-doux); color: var(--bc-violet-fort); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
}
.bc-exo-q { margin: 0 0 10px; font-weight: 700; color: var(--bc-ink); line-height: 1.5; }
.bc-exo-opts { display: grid; gap: 8px; }
.bc-exo-opts button, .bc-classer-items button, .bc-bac-btn {
    min-height: 46px; padding: 10px 14px; border-radius: 14px; text-align: left; border: 1.5px solid var(--mk-ciel-m, #bcd9f5); background: var(--mk-ciel, #e3f0fb);
    color: var(--bc-ink); font: 700 0.98rem/1.35 var(--bc-sans); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.bc-exo-opts button:hover:not(:disabled), .bc-classer-items button:hover:not(:disabled), .bc-bac-btn:hover { border-color: var(--bc-rose); }
.bc-exo-opts button.bc-mono { font-family: var(--bc-mono); font-size: 0.9rem; font-weight: 600; }
.bc-page .is-ok { border-color: var(--bc-ok) !important; background: var(--bc-ok-doux) !important; color: #14532d !important; }
.bc-page .is-ko { border-color: var(--bc-ko) !important; background: var(--bc-ko-doux) !important; color: #881337 !important; }
.bc-exo-opts button:disabled { cursor: default; }
.bc-exo-chat .mk-chat { margin: 12px 0 0; }
.bc-exo-fin { margin-top: 10px; }
@keyframes bc-secoue { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.bc-secoue { animation: bc-secoue 0.32s ease; }
/* classer */
.bc-classer-items { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; min-height: 46px; }
.bc-classer-items button { text-align: center; }
.bc-classer-items button[aria-pressed="true"] { border-color: var(--bc-rose); background: var(--bc-rose-doux); box-shadow: 0 0 0 2px var(--bc-rose) inset; }
.bc-classer-bacs { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
.bc-bac { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 16px; background: var(--mk-lilas, #eee8fd); border: 1.5px dashed var(--mk-lilas-m, #d4c8f7); min-width: 0; }
.bc-bac.is-cible { box-shadow: 0 0 0 2px var(--bc-rose) inset; }
.bc-bac-btn { text-align: center; background: var(--bc-card); font-weight: 800; }
.bc-bac-liste { display: flex; flex-wrap: wrap; gap: 5px; min-height: 6px; }
.bc-bac-liste span {
    display: inline-flex; align-items: center; min-height: 30px; padding: 3px 10px; border-radius: 999px; background: var(--bc-ok-doux);
    border: 1px solid #b7e1c6; color: #14532d; font-size: 0.86rem; font-weight: 700; line-height: 1.25;
}
/* saisie numérique */
.bc-saisie-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bc-saisie-ligne input {
    width: 9rem; min-height: 46px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--mk-ciel-m, #bcd9f5); background: var(--mk-ciel, #e3f0fb);
    color: var(--bc-ink); font: 600 1.05rem/1 var(--bc-mono); font-variant-numeric: tabular-nums;
}
.bc-unite { font-weight: 800; color: var(--bc-ink-3); }
/* remettre dans l'ordre */
.bc-ordre-liste { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.bc-ordre-liste li {
    display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 14px; border: 1.5px solid var(--mk-ciel-m, #bcd9f5);
    background: var(--mk-ciel, #e3f0fb); color: var(--bc-ink); line-height: 1.4; font-weight: 700;
}
.bc-ordre-liste li > span:first-child { flex: 1; min-width: 0; }
.bc-ordre-btns { display: flex; gap: 4px; flex: none; }
.bc-ordre-btns button {
    width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--bc-line-2); background: var(--bc-card); color: var(--bc-ink-2);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.bc-ordre-btns button:disabled { opacity: 0.35; cursor: default; }

/* ---------------- Exercices corrigés ---------------- */
.bc-corriges { display: grid; gap: 10px; margin: 14px 0; }
details.bc-corrige { border: 1px solid var(--bc-line); border-radius: 16px; background: var(--bc-card); }
details.bc-corrige > summary { list-style: none; cursor: pointer; padding: 14px 16px; font-weight: 700; line-height: 1.5; color: var(--bc-ink); }
details.bc-corrige > summary::-webkit-details-marker { display: none; }
details.bc-corrige > summary::after {
    content: 'Voir le corrigé'; display: block; margin-top: 6px; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bc-rose-fort);
}
details.bc-corrige[open] > summary::after { content: 'Masquer le corrigé'; color: var(--bc-ink-3); }
.bc-corrige-sol { padding: 12px 16px 14px; border-top: 1px dashed var(--bc-line-2); color: var(--bc-ink-2); }
.bc-corrige-sol p { margin: 0 0 8px; }
.bc-corrige-sol p:last-child { margin-bottom: 0; }

/* ---------------- Pièges ---------------- */
.bc-pieges { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 10px; }
.bc-pieges li { position: relative; padding: 12px 14px 12px 46px; border-radius: 16px; background: var(--mk-rose, #fde7ef); border: 1.5px solid var(--mk-rose-m, #f9c6d8); color: var(--bc-ink-2); line-height: 1.55; }
.bc-pieges li::before {
    content: '!'; position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; border-radius: 8px;
    background: var(--mk-rose-m, #f9c6d8); color: var(--bc-rose-fort); font-weight: 900; line-height: 24px; text-align: center;
}
.bc-pieges b { color: var(--bc-ink); }

/* ---------------- Récapitulatif ---------------- */
.bc-recap { margin: 14px 0; padding: 6px 16px; background: var(--mk-menthe, #e2f5ea); border: 1.5px solid var(--mk-menthe-m, #b6e5c8); border-radius: 18px; }
.bc-recap div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--mk-menthe-m, #b6e5c8); }
.bc-recap div:last-child { border-bottom: 0; }
.bc-recap dt { font-size: 0.74rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: #166534; }
.bc-recap dd { margin: 0; color: var(--bc-ink); font-weight: 600; }
@media (min-width: 640px) { .bc-recap div { grid-template-columns: 11rem 1fr; gap: 16px; align-items: baseline; } }

/* ---------------- Jeux et ateliers restés libres (pas de défilement) ---------------- */
.bc-atelier { margin: 22px 0; padding: 16px 14px; background: var(--bc-card); border: 1px solid var(--bc-line); border-radius: 22px; }
.bc-atelier > h3 { margin: 0 0 4px; font-size: 1.08rem; font-weight: 900; }
.bc-atelier > p { font-size: 0.95rem; }

/* ---------------- Quiz ---------------- */
.bc-quiz { padding: 18px 16px 16px; background: var(--bc-card); border: 1px solid var(--bc-line); border-radius: 22px; }
.bc-quiz-tete { display: flex; justify-content: space-between; gap: 10px; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bc-ink-3); }
.bc-quiz-barre { height: 6px; margin: 8px 0 14px; border-radius: 999px; background: var(--bc-line); overflow: hidden; }
.bc-quiz-barre i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--bc-rose); transition: width 0.3s ease; }
.bc-quiz-q { margin: 0 0 12px; font-size: 1.18rem; font-weight: 800; line-height: 1.38; color: var(--bc-ink); }
.bc-quiz-opts { display: grid; gap: 8px; }
.bc-quiz-opts button {
    min-height: 48px; padding: 11px 14px; border-radius: 14px; text-align: left; border: 2px solid var(--mk-lilas-m, #d4c8f7); background: var(--mk-lilas, #eee8fd);
    color: var(--bc-ink); font: 700 0.98rem/1.4 var(--bc-sans); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.bc-quiz-opts button:hover:not(:disabled) { border-color: var(--bc-rose); }
.bc-quiz-opts button:disabled { cursor: default; }
.bc-quiz-opts button.correct { border-color: var(--bc-ok); background: var(--bc-ok-doux); color: #14532d; }
.bc-quiz-opts button.wrong { border-color: var(--bc-ko); background: var(--bc-ko-doux); color: #881337; }
.bc-quiz-expl { margin: 12px 0 0; font-size: 0.95rem; line-height: 1.55; color: var(--bc-ink-2); }
.bc-quiz-expl:not(:empty) { padding: 11px 13px; border-radius: 14px; background: var(--bc-paper); border: 1px solid var(--bc-line); }
.bc-quiz-suite { margin-top: 12px; width: 100%; }
.bc-quiz-note { margin: 4px 0 6px; text-align: center; font-size: 3rem; font-weight: 900; line-height: 1.05; color: var(--bc-rose-fort); }
.bc-quiz-label { margin: 0; text-align: center; font-size: 0.76rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bc-ink-3); }
.bc-centre { text-align: center; }

/* ---------------- Bas de page ---------------- */
.bc-page .mk-sources { color: var(--bc-ink-2); }
.bc-page .mk-sources-liste { list-style: decimal; }
.bc-avertissement { max-width: 46rem; margin: 0 auto; padding: 0 1.2rem; font-size: 0.82rem; color: var(--bc-ink-3); }

/* ---------------- Grand écran ---------------- */
@media (min-width: 900px) {
    .bc-hero { padding-top: 40px; }
    .bc-section { padding-top: 68px; }
    .bc-pin > .mk-pin-scene { padding: 0 24px; }
    /* scène en deux colonnes : la figure à gauche, lectures, texte et commandes à droite */
    .bc-scene {
        max-width: 60rem; padding: 14px 20px 14px;
        display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 26px; align-content: start; align-items: start;
    }
    .bc-scene > * { grid-column: 2; }
    .bc-scene > .bc-scene-tete { grid-column: 1 / -1; }
    .bc-scene > .bc-svg, .bc-scene > .bc-figure-scene { grid-column: 1; grid-row: 2 / span 12; align-self: center; }
    .bc-scene > .bc-rangee { margin-top: 10px; }
    .bc-scene > .mk-pin-indice, .bc-scene > .mk-pin-barre { justify-self: start; margin-left: 4px; }
}

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