/* bio-cours.css : socle visuel commun des cours de biologie en scrollytelling
   (biologie/alimentation, biologie-cellulaire, adn, evolution-darwin, systeme-immunitaire, sang).
   Fonds, surfaces et schémas pastel ; deux accents saturés : le vert forêt de la matière
   (celui de la barre de navigation des fiches) et le framboise des points d'attention.
   Titres en Fraunces, texte en Outfit. Préfixe bio-.
   Teinte d'en-tête propre à chaque fiche : <body class="bio-cours" data-bio-theme="sang">.
   Passe couleur (oct. 2026) : palette commune ../css/couleurs.css (familles de la biologie : menthe et
   citron). Les parties du cours sont des bandes pastel : <section class="bio-section mk-bande" data-teinte="menthe">.
   Encarts au code commun : .bio-def définition (ciel), .bio-note repère (lilas), .bio-piege piège (rose),
   .bio-formule à retenir (menthe), .bio-exo exercice (citron). Le kit marche aussi sans couleurs.css (valeurs de repli). */

.bio-cours {
    --bio-fond: #f5f8f0;
    --bio-fond-2: #ebf1e3;
    --bio-surface: #ffffff;
    --bio-bord: #dce5d1;
    --bio-bord-2: #c9d6bc;
    --bio-encre: #1d3328;
    --bio-texte: #33443a;
    --bio-doux: #56665b;
    --bio-vert: #2b5b44;
    --bio-vert-fonce: #1f4533;
    --bio-feuille: #569e60;
    --bio-menthe: var(--mk-menthe, #e2f5ea);
    --bio-menthe-m: var(--mk-menthe-m, #b6e5c8);
    --bio-sauge: #eaf1dc;
    --bio-framboise: #c5344d;
    --bio-framboise-fonce: #9c2439;
    --bio-rose: var(--mk-rose, #fde7ef);
    --bio-rose-m: var(--mk-rose-m, #f9c6d8);
    --bio-beurre: var(--mk-citron, #fff4cc);
    --bio-citron: var(--mk-citron, #fff4cc);
    --bio-citron-m: var(--mk-citron-m, #fbe38e);
    --bio-citron-texte: #854d0e;      /* --mk-citron-f (#a16207) ne fait que 4,47:1 sur le citron : texte plus foncé */
    --bio-peche: var(--mk-peche, #ffeadb);
    --bio-ciel: var(--mk-ciel, #e3f0fb);
    --bio-ciel-m: var(--mk-ciel-m, #bcd9f5);
    --bio-lilas: var(--mk-lilas, #eee8fd);
    --bio-lilas-m: var(--mk-lilas-m, #d4c8f7);
    --bio-teinte: var(--bio-menthe);  /* famille de la bande où l'on se trouve (menthe par défaut) */
    --bio-teinte-m: var(--bio-menthe-m);
    --bio-violet: #6b3fa0;
    --bio-bleu: #245a8d;
    --bio-or: #9a6b12;
    --bio-hero: #e5f0de;
    --bio-hero-2: #d6e7cc;
    background: var(--bio-fond);
    color: var(--bio-texte);
    font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1rem;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}
.bio-cours[data-bio-theme="alimentation"] { --bio-hero: #fbeedb; --bio-hero-2: #f5dfbf; }
.bio-cours[data-bio-theme="cellule"] { --bio-hero: #dff1e8; --bio-hero-2: #c7e6d6; }
.bio-cours[data-bio-theme="adn"] { --bio-hero: #e4ecf8; --bio-hero-2: #cfdcf1; }
.bio-cours[data-bio-theme="evolution"] { --bio-hero: #eef0dc; --bio-hero-2: #dde3c1; }
.bio-cours[data-bio-theme="immunite"] { --bio-hero: #e6eef9; --bio-hero-2: #d2e0f3; }
.bio-cours[data-bio-theme="sang"] { --bio-hero: #fbe6e8; --bio-hero-2: #f4cfd4; }

.bio-cours *, .bio-cours *::before, .bio-cours *::after { box-sizing: border-box; }
.bio-cours main { display: block; padding-bottom: 2.5rem; }
.bio-cours img, .bio-cours svg { max-width: 100%; }

/* ---------- Mise en page ---------- */
.bio-col { max-width: 44rem; margin: 0 auto; padding: 0 16px; }
.bio-large { max-width: 64rem; margin: 0 auto; padding: 0 16px; }
.bio-section { padding: 3.6rem 0 .8rem; scroll-margin-top: 16px; }
.bio-section + .bio-section { padding-top: 2.8rem; }
.bio-separateur { height: 1px; background: var(--bio-bord); max-width: 44rem; margin: 2.6rem auto 0; }

/* ---------- Bandes pastel (passe couleur) ----------
   Une partie du cours = une bande, en alternant menthe et citron. Les sections occupent déjà toute la
   largeur : on garde le fond de .mk-bande sans son débordement (ombre et clip-path inutiles ici).
   Dans une bande, les cartes restent blanches et les petits éléments prennent la famille de la bande. */
.bio-cours .bio-section.mk-bande { background: var(--bio-teinte); box-shadow: none; clip-path: none; padding: 3rem 0 3.2rem; }
.bio-cours .mk-bande[data-teinte="menthe"] { --bio-teinte: var(--bio-menthe); --bio-teinte-m: var(--bio-menthe-m); --bio-bord: #c6e6d2; --bio-bord-2: #a9d8bb; }
.bio-cours .mk-bande[data-teinte="citron"] { --bio-teinte: var(--bio-citron); --bio-teinte-m: var(--bio-citron-m); --bio-bord: #f1e0a0; --bio-bord-2: #e6cd72; }
/* la première bande passe sous les coins arrondis de l'en-tête */
.bio-cours .bio-hero { z-index: 1; }
.bio-cours main > .bio-section.mk-bande:first-child { margin-top: -30px; padding-top: calc(3rem + 30px); }

/* ---------- Typographie ---------- */
.bio-kicker { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bio-vert); margin: 0 0 .6rem; }
/* intitulé d'une partie (« Notion 3 · Les acteurs ») : pastille dans le ton moyen de sa bande */
.bio-section > .bio-col > .bio-kicker:first-child { display: table; background: var(--bio-teinte-m); color: var(--bio-vert-fonce); border-radius: 999px; padding: .36rem .8rem .32rem; margin-bottom: .9rem; letter-spacing: .12em; }
.bio-h1 { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-optical-sizing: auto; font-size: clamp(2.3rem, 9.4vw, 3.8rem); line-height: 1.02; font-weight: 700; letter-spacing: -.02em; color: var(--bio-encre); margin: 0 0 .9rem; }
.bio-h2 { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-optical-sizing: auto; font-size: clamp(1.6rem, 6vw, 2.35rem); line-height: 1.1; font-weight: 700; letter-spacing: -.012em; color: var(--bio-encre); margin: 0 0 .8rem; }
.bio-h3 { font-size: 1.16rem; font-weight: 800; color: var(--bio-encre); margin: 0 0 .55rem; line-height: 1.28; }
.bio-lead { font-size: 1.08rem; line-height: 1.64; color: var(--bio-texte); margin: 0 0 1rem; }
.bio-p { line-height: 1.68; margin: 0 0 .9rem; }
.bio-petit { font-size: .86rem; line-height: 1.55; color: var(--bio-doux); margin: .6rem 0 0; }
.bio-cours b, .bio-cours strong { color: var(--bio-encre); font-weight: 700; }
.bio-cours em { font-style: italic; }
.bio-cours sub, .bio-cours sup { line-height: 0; }
.bio-cours main a { color: var(--bio-vert); text-underline-offset: 3px; }
.bio-cours main .mk-sources a { color: inherit; }
.bio-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.bio-nowrap { white-space: nowrap; }

/* ---------- En-tête de fiche (jamais de <header> : fiche-features.js le masque au défilement) ---------- */
.bio-hero { background: var(--bio-hero); padding: 5.2rem 0 2.3rem; border-radius: 0 0 30px 30px; position: relative; overflow: clip; }
.bio-hero-emblem { display: block; width: 116px; height: auto; margin: 0 0 1rem; }
.bio-hero .bio-lead { font-size: 1.13rem; max-width: 36rem; }
.bio-objectifs { background: var(--bio-surface); border: 1px solid var(--bio-bord); border-radius: 18px; padding: 1rem 1.1rem .75rem; margin-top: 1.1rem; }
.bio-objectifs-titre { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bio-vert); margin: 0 0 .5rem; }
.bio-objectifs ul { list-style: none; margin: 0; padding: 0; }
.bio-objectifs li { position: relative; padding-left: 1.35rem; margin: 0 0 .5rem; line-height: 1.52; font-size: .98rem; }
.bio-objectifs li::before { content: ''; position: absolute; left: .08rem; top: .5em; width: .55rem; height: .55rem; border-radius: 50%; border: 2px solid var(--bio-feuille); background: var(--bio-menthe); }
.bio-saut { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; margin-top: .8rem; padding: 0 .2rem; color: var(--bio-vert-fonce); font-weight: 800; font-size: .95rem; text-decoration: underline; text-underline-offset: 4px; }
.bio-saut svg { flex: none; }
.bio-sommaire { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.bio-sommaire a { display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .72); border: 1px solid var(--bio-bord); color: var(--bio-encre); font-weight: 700; font-size: .84rem; text-decoration: none; }
.bio-sommaire a:hover { background: #fff; }

/* ---------- Cartes et encadrés ---------- */
.bio-carte { background: var(--bio-surface); border: 1px solid var(--bio-bord); border-radius: 20px; padding: 1.2rem 1.1rem 1.05rem; margin: 0 0 1rem; }
@media (min-width: 768px) { .bio-carte { padding: 1.5rem 1.65rem 1.3rem; } }
.bio-carte > :last-child { margin-bottom: 0; }
.bio-tag { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--bio-vert-fonce); background: var(--bio-teinte); border-radius: .45rem; padding: .22rem .55rem; margin-bottom: .6rem; }
.bio-duo { display: grid; gap: .65rem; margin: .5rem 0 .9rem; }
@media (min-width: 640px) { .bio-duo { grid-template-columns: 1fr 1fr; } }
.bio-duo > div { background: var(--bio-surface); border: 1px solid var(--bio-bord); border-radius: 14px; padding: .85rem .95rem; }
.bio-duo > div > b:first-child { display: block; margin-bottom: .25rem; color: var(--bio-encre); }
.bio-duo > div > b:first-child + br { display: none; }
.bio-duo p { margin: 0; line-height: 1.55; font-size: .97rem; }
/* Encarts au code couleur commun du site (couleurs.css) : définition ciel, repère lilas, piège rose, à retenir menthe */
.bio-def { background: var(--bio-ciel); border: 1.5px solid var(--bio-ciel-m); border-radius: 16px; padding: .9rem 1rem; line-height: 1.6; font-size: .98rem; margin: .9rem 0; }
.bio-def > b:first-child { display: block; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--mk-ciel-f, #1d4ed8); margin-bottom: .25rem; }
.bio-note { background: var(--bio-lilas); border: 1.5px solid var(--bio-lilas-m); border-radius: 16px; padding: .9rem 1rem; line-height: 1.6; font-size: .97rem; margin: .9rem 0 0; }
.bio-note > b:first-child { display: block; color: var(--mk-lilas-f, #6d28d9); margin-bottom: .2rem; }
.bio-piege { background: var(--bio-rose); border: 1.5px solid var(--bio-rose-m); border-radius: 16px; padding: .85rem 1rem; line-height: 1.6; font-size: .97rem; margin: 0 0 .7rem; }
.bio-piege > b:first-child { display: block; color: var(--mk-rose-f, #be185d); margin-bottom: .2rem; }
.bio-retenir { background: var(--bio-menthe); border: 1.5px solid var(--bio-menthe-m); }
.bio-retenir > b:first-child { color: var(--bio-vert-fonce); }
.bio-formule { text-align: center; background: var(--bio-menthe); border: 1.5px solid var(--bio-menthe-m); border-radius: 14px; padding: .75rem .8rem; margin: .9rem 0; font-weight: 700; color: var(--bio-encre); line-height: 1.6; }
.bio-formule small { display: block; font-weight: 500; color: var(--bio-doux); font-size: .85rem; }
.mk-bande[data-teinte="menthe"] .bio-formule, .mk-bande[data-teinte="menthe"] .bio-retenir { background: var(--bio-surface); }
.bio-liste { list-style: none; margin: 0 0 .8rem; padding: 0; }
.bio-liste li { position: relative; padding-left: 1.25rem; margin: 0 0 .6rem; line-height: 1.6; }
.bio-liste li::before { content: ''; position: absolute; left: .1rem; top: .62em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--bio-feuille); }
.bio-etapes { counter-reset: bioetape; list-style: none; padding: 0; margin: .5rem 0 .9rem; }
.bio-etapes li { counter-increment: bioetape; position: relative; padding: .05rem 0 .7rem 2.3rem; line-height: 1.58; }
.bio-etapes li::before { content: counter(bioetape); position: absolute; left: 0; top: 0; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--bio-vert); color: #fff; font-weight: 800; font-size: .82rem; display: grid; place-items: center; }
.bio-tableau-wrap { border: 1px solid var(--bio-bord); border-radius: 16px; overflow-x: auto; margin: .7rem 0 .5rem; background: #fff; }
.bio-tableau { width: 100%; border-collapse: collapse; font-size: .93rem; }
.bio-tableau caption { text-align: left; font-weight: 700; color: var(--bio-encre); padding: .7rem .75rem .2rem; font-size: .9rem; }
.bio-tableau th { text-align: left; background: var(--bio-teinte); color: var(--bio-vert-fonce); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: .55rem .7rem; }
.bio-tableau td, .bio-tableau tbody th { padding: .55rem .7rem; border-top: 1px solid var(--bio-bord); vertical-align: top; line-height: 1.45; }
.bio-tableau tbody th { text-transform: none; letter-spacing: 0; font-size: .93rem; color: var(--bio-encre); background: transparent; }
.bio-oui { color: var(--bio-vert); font-weight: 700; }
.bio-non { color: var(--bio-framboise); font-weight: 700; }
.bio-frise { list-style: none; margin: .4rem 0 .6rem; padding: 0 0 0 1.1rem; border-left: 2px solid var(--bio-bord-2); }
.bio-frise li { position: relative; padding: 0 0 1.15rem 1rem; }
.bio-frise li::before { content: ''; position: absolute; left: -1.48rem; top: .28rem; width: 13px; height: 13px; border-radius: 50%; background: var(--bio-surface); border: 3px solid var(--bio-feuille); }
.bio-frise-date { display: block; font-weight: 800; color: var(--bio-vert); font-size: .92rem; }
.bio-frise p { margin: .2rem 0 0; line-height: 1.58; }
.bio-chiffre { display: flex; gap: .9rem; align-items: baseline; padding: .75rem 0; border-top: 1px solid var(--bio-bord); }
.bio-chiffre:first-child { border-top: 0; }
.bio-chiffre-n { flex: none; min-width: 5.6rem; font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.55rem; color: var(--bio-vert); line-height: 1.1; }
.bio-chiffre p { margin: 0; line-height: 1.5; }
.bio-plus { border: 1px solid var(--bio-bord); border-radius: 16px; background: var(--bio-surface); margin: 1rem 0; }
.bio-plus > summary { cursor: pointer; list-style: none; padding: .85rem 1rem; font-weight: 800; color: var(--bio-encre); display: flex; align-items: center; gap: .6rem; min-height: 48px; }
.bio-plus > summary::-webkit-details-marker { display: none; }
.bio-plus > summary::before { content: '+'; flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--bio-menthe); color: var(--bio-vert); font-weight: 800; }
.bio-plus[open] > summary::before { content: '−'; }
.bio-plus > summary small { font-weight: 600; color: var(--bio-doux); }
.bio-plus-corps { padding: 0 1rem 1rem; line-height: 1.62; }
.bio-plus:focus-within { border-color: var(--bio-bord-2); }

/* ---------- Scènes collées (mk-pin) ---------- */
.bio-pin { --mk-pin-couleur: var(--bio-vert); --mk-pin-haut: 44px; margin-top: .4rem; }
.bio-pin .mk-pin-scene { padding: 0 12px; }
.bio-scene { position: relative; background: var(--bio-surface); border: 1px solid var(--bio-bord); border-radius: 20px; padding: .8rem .8rem .85rem; max-width: 36rem; margin: 0 auto; box-shadow: 0 16px 36px -30px rgba(29, 51, 40, .55); }
.bio-scene-tete { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin: 0 .15rem .35rem; min-height: 1.6rem; }
.bio-scene-titre { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--bio-doux); }
.bio-scene-etat { font-size: .8rem; font-weight: 800; color: var(--bio-vert-fonce); background: var(--bio-teinte-m); border-radius: 999px; padding: .2rem .65rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bio-scene > svg { display: block; width: 100%; height: auto; max-height: 58vh; overflow: visible; }
/* panneau pastel derrière le schéma (chaque fiche choisit sa teinte avec --bio-panneau) */
.bio-scene > svg.bio-panneau, .bio-cours .mk-scrolly-graphic > svg.bio-panneau { background: var(--bio-panneau, var(--bio-teinte)); border-radius: 14px; }
.bio-scene-legende { text-align: center; margin: .45rem .2rem 0; line-height: 1.45; font-size: .96rem; color: var(--bio-texte); min-height: 4.4em; }
.bio-scene-legende b { color: var(--bio-encre); }
.bio-scene .bio-fixe-1 { min-height: 1.5em; }
.bio-scene .bio-fixe-2 { min-height: 3em; }
.bio-scene .bio-fixe-3 { min-height: 4.5em; }
.bio-pin .mk-pin-indice { color: var(--bio-doux); }
.bio-lecture { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .9rem; margin: .35rem 0 0; font-size: .9rem; color: var(--bio-doux); font-variant-numeric: tabular-nums; }
.bio-lecture b { color: var(--bio-encre); font-weight: 800; }
.bio-lecture > span { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.bio-lecture svg { display: inline-block; flex: none; }
.bio-pastilles { display: flex; flex-wrap: wrap; gap: .38rem; justify-content: center; margin-top: .6rem; }
.bio-pastilles.bio-defile { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; margin: .6rem -.8rem 0; padding: 2px .8rem 4px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 .8rem, #000 calc(100% - .8rem), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 .8rem, #000 calc(100% - .8rem), transparent 100%); }
.bio-pastilles.bio-defile::-webkit-scrollbar { display: none; }
.bio-pastilles.bio-defile .bio-pastille { flex: none; }
@media (min-width: 768px) {
    .bio-pastilles.bio-defile { flex-wrap: wrap; overflow: visible; justify-content: center; margin: .6rem 0 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
}
.bio-pastille { min-height: 40px; padding: .4rem .8rem; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--c, #2b5b44) 38%, transparent); background: #fff; color: var(--c, #2b5b44); font: 700 .82rem/1.1 'Outfit', system-ui, sans-serif; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.bio-pastille[aria-pressed="true"] { background: var(--c, #2b5b44); border-color: var(--c, #2b5b44); color: #fff; }
.bio-pastille:focus-visible, .bio-bouton:focus-visible, .bio-option:focus-visible, .bio-jeton:focus-visible, .bio-bac:focus-visible, .bio-quiz-option:focus-visible, .bio-plus > summary:focus-visible, .bio-saut:focus-visible, .bio-sommaire a:focus-visible, .bio-champ:focus-visible { outline: 3px solid var(--bio-encre); outline-offset: 2px; }
html.mk-reduced .bio-cours * { scroll-behavior: auto !important; }

/* ---------- Séquences défilées (mk-scrolly) ----------
   Le moteur colle le schéma et une légende (texte de l'étape en fondu, points d'étape) :
   légende sous le schéma sur téléphone, à droite sur grand écran. Cartes courtes : 2 à 4 lignes. */
.bio-cours .mk-scrolly { --mk-scrolly-top: 46px; --mk-pin-couleur: var(--bio-vert); margin: 1rem auto 0; }
.bio-cours .mk-scrolly-graphic { background: var(--bio-surface); border: 1px solid var(--bio-bord); border-radius: 20px; padding: 6px; }
.bio-cours .mk-scrolly-graphic > svg { max-height: 100%; }
.bio-cours .mk-step-card { border-color: var(--bio-bord); border-radius: 18px; box-shadow: 0 12px 30px -24px rgba(29, 51, 40, .5); color: var(--bio-texte); }
.bio-cours .mk-scrolly-texte .mk-step-card { font-size: .98rem; line-height: 1.5; }
.bio-cours .mk-step-card p { margin: 0; }
.bio-cours .mk-step-card p + p { margin-top: .5rem; }
.bio-cours .mk-step-card b:first-child { color: var(--bio-vert-fonce); }
@media (min-width: 900px) { .bio-cours .mk-scrolly { --mk-scrolly-top: 56px; } }

/* ---------- Boutons ---------- */
.bio-bouton { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 46px; padding: .6rem 1.25rem; border-radius: 999px; border: 0; background: var(--bio-vert); color: #fff; font: 800 .98rem/1.1 'Outfit', system-ui, sans-serif; cursor: pointer; text-decoration: none; }
.bio-bouton:hover { background: var(--bio-vert-fonce); }
.bio-bouton[disabled] { opacity: .45; cursor: default; }
.bio-bouton-doux { background: var(--bio-menthe); color: var(--bio-vert-fonce); }
.bio-bouton-doux:hover { background: #d3eadc; }
.bio-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }

/* ---------- Exercices ----------
   Code commun : exercice = citron. Cartes de question blanches, options et zones de dépôt pastel,
   bonne réponse menthe, erreur rose, bouton principal dans le vert forêt de la matière. */
.bio-exo { background: var(--bio-citron); border: 1.5px solid var(--bio-citron-m); border-radius: 20px; padding: 1.1rem 1rem 1rem; margin: 1.5rem 0 1rem; }
@media (min-width: 768px) { .bio-exo { padding: 1.4rem 1.5rem 1.2rem; } }
.bio-exo .bio-kicker { color: var(--bio-citron-texte); }
.bio-exo-consigne { margin: 0 0 .9rem; line-height: 1.55; color: var(--bio-texte); }
.bio-q { background: var(--bio-surface); border-radius: 16px; padding: .9rem .9rem .8rem; margin: 0 0 .7rem; }
.bio-q-texte { font-weight: 700; color: var(--bio-encre); line-height: 1.5; margin: 0 0 .65rem; }
.bio-q-texte small { font-weight: 600; color: var(--bio-doux); }
.bio-q-options { display: flex; flex-wrap: wrap; gap: .45rem; }
.bio-option { min-height: 44px; padding: .5rem .95rem; border-radius: 12px; border: 1.5px solid var(--bio-citron-m); background: var(--bio-citron); color: var(--bio-encre); font: 700 .95rem/1.25 'Outfit', system-ui, sans-serif; cursor: pointer; text-align: left; transition: background .15s ease, border-color .15s ease; }
.bio-option:hover:not([disabled]) { border-color: var(--bio-citron-texte); }
.bio-option.is-juste { background: var(--bio-menthe); border-color: #2f7d4f; color: #184d2e; }
.bio-option.is-faux { background: var(--bio-rose); border-color: var(--bio-framboise); color: #7c1d2e; }
.bio-option[disabled] { cursor: default; }
.bio-retour { margin: .6rem 0 0; font-size: .93rem; line-height: 1.55; border-radius: 12px; }
.bio-retour:empty { display: none; }
.bio-retour.is-juste { background: var(--bio-menthe); color: #184d2e; padding: .6rem .75rem; }
.bio-retour.is-faux { background: var(--bio-rose); color: #7c1d2e; padding: .6rem .75rem; }
.bio-trou { display: inline-block; min-width: 4.2em; border-bottom: 2px dashed #d9b84a; margin: 0 .15em; text-align: center; color: var(--bio-citron-texte); }
/* tri */
.bio-tri { background: var(--bio-surface); border-radius: 16px; padding: .8rem; }
.bio-bacs { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.bio-bacs.bio-bacs-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .bio-bacs.bio-bacs-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bio-bac { border: 2px dashed #e3c65c; border-radius: 14px; padding: .55rem .6rem .6rem; min-height: 96px; background: #fffbea; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.bio-bac.is-pret { border-color: var(--bio-citron-texte); }
.bio-bac.is-survol { background: var(--bio-citron); border-style: solid; }
.bio-bac-titre { display: block; font-weight: 800; color: var(--bio-encre); font-size: .95rem; line-height: 1.25; }
.bio-bac-aide { display: block; font-size: .8rem; color: var(--bio-doux); margin-top: .1rem; line-height: 1.3; }
.bio-bac-zone { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.bio-bac-zone .bio-jeton { width: 100%; font-size: .86rem; min-height: 0; padding: .4rem .6rem; }
@media (max-width: 639px) { .bio-tri-long .bio-bacs { grid-template-columns: 1fr; } .bio-tri-long .bio-bac { min-height: 74px; } }
.bio-reserve { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; min-height: 46px; }
.bio-jeton { min-height: 42px; padding: .45rem .8rem; border-radius: 14px; border: 1.5px solid var(--bio-citron-m); background: var(--bio-citron); color: var(--bio-encre); font: 700 .9rem/1.2 'Outfit', system-ui, sans-serif; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; text-align: left; }
.bio-jeton[aria-pressed="true"] { background: var(--bio-vert); border-color: var(--bio-vert); color: #fff; }
.bio-jeton.is-place { background: var(--bio-menthe); border-color: #2f7d4f; color: #184d2e; cursor: default; }
.bio-jeton.is-tire { opacity: .35; }
.bio-jeton.is-secoue { animation: bio-secoue .35s ease; }
.bio-fantome { position: fixed; z-index: 10000; pointer-events: none; opacity: .92; box-shadow: 0 10px 26px -10px rgba(29, 51, 40, .45); }
@keyframes bio-secoue { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
html.mk-reduced .bio-jeton.is-secoue { animation: none; }
/* remise en ordre */
.bio-ordre { background: var(--bio-surface); border-radius: 16px; padding: .85rem; margin: 0 0 .7rem; }
.bio-ordre-titre { font-weight: 700; color: var(--bio-encre); margin: 0 0 .6rem; line-height: 1.45; }
.bio-ordre-ligne { list-style: none; counter-reset: bioordre; margin: 0 0 .6rem; padding: .5rem; border: 2px dashed #e3c65c; border-radius: 14px; min-height: 58px; display: flex; flex-direction: column; gap: .35rem; background: #fffbea; }
.bio-ordre-ligne:empty::before { content: attr(data-vide); color: var(--bio-doux); font-size: .9rem; padding: .5rem .3rem; }
.bio-ordre-ligne .bio-jeton { counter-increment: bioordre; width: 100%; border-radius: 12px; display: flex; gap: .55rem; align-items: flex-start; }
.bio-ordre-ligne .bio-jeton::before { content: counter(bioordre); flex: none; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--bio-vert); color: #fff; font-size: .78rem; font-weight: 800; }
.bio-ordre-reserve { display: flex; flex-direction: column; gap: .4rem; }
.bio-ordre-reserve .bio-jeton { width: 100%; border-radius: 12px; cursor: pointer; }
.bio-ordre.is-juste .bio-ordre-ligne { border-color: #2f7d4f; border-style: solid; background: var(--bio-menthe); }
/* réponse chiffrée */
.bio-nombre { background: var(--bio-surface); border-radius: 16px; padding: .9rem; margin: 0 0 .7rem; }
.bio-nombre-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.bio-champ { width: 7.5rem; min-height: 46px; padding: .45rem .7rem; border-radius: 12px; border: 1.5px solid #e3c65c; font: 700 1.05rem/1.2 'Outfit', system-ui, sans-serif; color: var(--bio-encre); background: #fffbea; }
.bio-unite { font-weight: 700; color: var(--bio-doux); }
.bio-exo-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .6rem; }
.bio-exo-bilan { margin: 0; font-weight: 700; color: var(--bio-citron-texte); font-size: .92rem; }
.bio-exo-chat .mk-chat { margin-bottom: 0; }

/* ---------- Récapitulatif ---------- */
.bio-recap { list-style: none; margin: 0; padding: 0; counter-reset: biorecap; }
.bio-recap li { counter-increment: biorecap; display: grid; grid-template-columns: 2rem 1fr; gap: .5rem; padding: .7rem 0; border-top: 1px solid var(--bio-bord); line-height: 1.55; }
.bio-recap li:first-child { border-top: 0; }
.bio-recap li::before { content: counter(biorecap, decimal-leading-zero); font-family: 'Fraunces', Georgia, serif; font-weight: 700; color: var(--bio-vert); font-size: .95rem; line-height: 1; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--bio-teinte); margin-top: -.15rem; }

/* ---------- Quiz ---------- */
.bio-quiz { background: var(--bio-surface); border: 1px solid var(--bio-bord); border-radius: 22px; padding: 1.3rem 1.1rem; }
@media (min-width: 768px) { .bio-quiz { padding: 1.7rem 1.8rem; } }
.bio-quiz-depart { text-align: center; padding: .6rem 0 .4rem; }
.bio-quiz-depart p { line-height: 1.55; margin: 0 auto 1rem; max-width: 30rem; }
.bio-quiz-haut { display: flex; justify-content: space-between; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bio-doux); }
.bio-quiz-barre { height: 6px; background: var(--bio-fond-2); border-radius: 999px; overflow: hidden; margin: .5rem 0 1.1rem; }
.bio-quiz-barre i { display: block; height: 100%; width: 0; background: var(--bio-feuille); transition: width .3s ease; }
.bio-quiz-q { font-weight: 800; color: var(--bio-encre); font-size: 1.1rem; line-height: 1.42; margin: 0 0 .9rem; }
.bio-quiz-option { display: block; width: 100%; text-align: left; min-height: 50px; padding: .75rem .95rem; border: 2px solid var(--bio-citron-m); border-radius: 14px; background: #fffbea; color: var(--bio-texte); font: 600 .97rem/1.4 'Outfit', system-ui, sans-serif; margin: 0 0 .55rem; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.bio-quiz-option:hover:not([disabled]) { border-color: #d9b84a; background: var(--bio-citron); }
.bio-quiz-option.correct { border-color: #2f7d4f; background: var(--bio-menthe); color: #184d2e; }
.bio-quiz-option.wrong { border-color: var(--bio-framboise); background: var(--bio-rose); color: #7c1d2e; }
.bio-quiz-option[disabled] { cursor: default; }
.bio-quiz-fb { font-size: .94rem; line-height: 1.55; border-radius: 14px; margin-top: .3rem; }
.bio-quiz-fb:empty { display: none; }
.bio-quiz-fb.is-juste { background: var(--bio-menthe); color: #184d2e; padding: .7rem .9rem; }
.bio-quiz-fb.is-faux { background: var(--bio-rose); color: #7c1d2e; padding: .7rem .9rem; }
.bio-quiz-fin { text-align: center; }
.bio-quiz-score { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 3.2rem; line-height: 1; color: var(--bio-vert); margin: .3rem 0 .4rem; }
.bio-quiz-fin p { margin: 0 0 .6rem; line-height: 1.5; }

/* ---------- Petits jeux ---------- */
.bio-jeu { background: var(--bio-surface); border: 1px solid var(--bio-bord); border-radius: 20px; padding: 1rem; margin: 1.2rem 0; }
.bio-jeu-haut { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 800; color: var(--bio-doux); font-variant-numeric: tabular-nums; }

/* ---------- Pied de fiche ---------- */
.bio-cours .mk-sources { color: var(--bio-texte); }
.bio-cours .mk-sources-liste { list-style: decimal; }
.bio-cours .capsule-arrow { animation: none; line-height: 0; }
.bio-cours .capsule-arrow svg { display: inline-block; }
.bio-cours .mk-chat { --mk-chat-bord: #d5e0cb; }
.bio-cours [hidden] { display: none !important; }
.bio-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Glossaire (termes cliquables, voir glossaire.js) ---------- */
.bio-cours .term { color: var(--bio-vert-fonce); border-bottom-color: var(--bio-feuille); }

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