/* Kit des fiches en récit des autres matières (octobre 2026) : sciences, médecine, histoire, philosophie, art,
   business, informatique, méthodes. À charger APRÈS css/recit.css, css/fr-recit.css et l'ancien kit de la matière
   (chimie-cours.css, philo-cours.css…), qui reste chargé pour les scènes, séquences, exercices et quiz repris tels quels.

   <body class="fr-recit cr-recit [cr-lettres] ANCIENNES-CLASSES-DU-BODY">
     cr-lettres : titres en Literata (histoire, philosophie, art, psychologie, méthodes) ; sinon Outfit (sciences,
     médecine, informatique, business). Les anciennes classes du body (ch-page, pc-page pc-philo, hi-body…) restent :
     elles portent les variables des blocs repris. Ce fichier neutralise ce qu'elles imposent au reste de la page.

   Polices (dans le <head>) :
     sciences  https://fonts.googleapis.com/css2?family=Outfit:wght@500;700;800;900&family=Atkinson+Hyperlegible+Next:wght@400;600;700&family=Fira+Code:wght@500;700&display=swap
     lettres   https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,600;0,7..72,700;1,7..72,500&family=Atkinson+Hyperlegible+Next:wght@400;600;700&family=Fira+Code:wght@500;700&display=swap
     (ajouter les polices de l'ancien kit si les blocs repris en ont besoin : Fraunces, Newsreader, Playfair…)

   Écrans (dans .mk-ecran) :
     .cr-etiquette     pastille en tête d'écran : « Dans la vraie vie », « Expérience », « Repère », « Cas clinique »…
     .cr-def           définition (les <strong> prennent la couleur foncée de la famille)
     svg.cr-schema     schéma encadré (viewBox 0 0 400 H, H ≤ 240 au téléphone) ; .cr-ecran-fig sur l'écran : texte à gauche
     .cr-pied          phrase sous le schéma, plus petite
     .cr-grand         grande phrase (la thèse de l'écran)
     .cr-f             formule ou loi mise en avant (.cr-f-cadre : encadrée)
     .cr-chiffre       grand nombre ou grande date + <span> légende dessous
     .cr-code          extrait de code court (≤ 10 lignes), lignes repliées, jamais de défilement horizontal
   Schémas (en plus des classes de fr-recit.css .fc .fm .ff .sm .sf .tf .tn .tl .ti) :
     .fv remplissage vif de la famille · .f2 seconde couleur vive · .tc texte en Fira Code · .tg texte en police de titre
     .cr-teinte (transparent puis vif quand data-mk-des est atteint) · .cr-halo (cadre clair qui s'allume) · .cr-part
   Ouverture : header.fr-ouverture (fr-recit.css) avec svg.cr-ouverture-fig, a.cr-saut (aller au quiz), ul.cr-programme.
   Corrigés repliables : div.cr-corriges > details.cr-corrige > summary (+ .cr-corrige-n, .cr-corrige-ouvrir) + .cr-corrige-corps */

:root {
    --mk-recit-titre: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cr-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
    --cr-encre: #2A2333;
    --cr-doux: #5B5466;
    --cr-surface: #FFFDF8;
}
body.cr-lettres { --mk-recit-titre: 'Literata', Georgia, 'Times New Roman', serif; }
[data-famille="citron"] { --fam-v: #F2B705; }
[data-famille="peche"]  { --fam-v: #F28C4B; }
[data-famille="rose"]   { --fam-v: #E9739B; }
[data-famille="lilas"]  { --fam-v: #9B7FE6; }
[data-famille="ciel"]   { --fam-v: #5B9DEB; }
[data-famille="menthe"] { --fam-v: #45B97C; }

/* ── Ce que les anciens kits imposent à toute la page ───────────────────────── */
html body.fr-recit.cr-recit {
    margin: 0;
    padding: 0;
    min-height: 0;
    background: var(--mk-creme, #FFF8EE);
    color: var(--cr-encre);
    font-family: var(--fr-texte);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
body.cr-recit main { display: block; max-width: none; margin: 0; padding: 0; }
body.cr-recit main > section.mk-chapitre { background: var(--mk-fond-c); display: flow-root; } /* les marges des blocs repris restent dans le chapitre */
/* Un chapitre qui ne porte qu'une colonne (quiz, exercices) : de l'air en haut et en bas */
.cr-recit .mk-chapitre > .fr-colonne:only-child { padding-top: 40px; padding-bottom: 72px; }
.cr-recit .mk-chapitre > .fr-colonne:last-child { padding-bottom: 56px; }
.cr-recit .fr-ouverture h1, .cr-recit .mk-ecran h2, .cr-recit .mk-ecran h3, .cr-recit .fr-quiz h2, .cr-recit .fr-intro-scene h3 {
    font-family: var(--mk-recit-titre);
    color: inherit;
}
.cr-recit .mk-ecran h2 { font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.35em; }
.cr-recit .mk-ecran p { margin: 0 0 0.6em; }
.cr-recit .mk-ecran p:last-child { margin-bottom: 0; }
.cr-recit .mk-ecran strong, .cr-recit .mk-ecran b { color: var(--fam-f, var(--mk-fond-a, inherit)); font-weight: 700; }
.cr-recit .mk-ecran[data-style="accroche"], .cr-recit .mk-accroche { font-weight: 800; letter-spacing: -0.025em; }
.cr-lettres .mk-ecran[data-style="accroche"], .cr-lettres .mk-accroche { font-weight: 700; letter-spacing: -0.01em; }
.cr-recit .mk-ecran a { color: var(--mk-fond-a, inherit); font-weight: 700; }
/* Listes simples dans un écran (la remise à zéro de Tailwind retire puces et retraits) */
.cr-recit .mk-ecran ul:not([class]), .cr-recit .mk-ecran ol:not([class]) { margin: 0 0 0.6em; padding-left: 1.25em; text-align: left; }
.cr-recit .mk-ecran ul:not([class]) { list-style: disc; }
.cr-recit .mk-ecran ol:not([class]) { list-style: decimal; }
.cr-recit .mk-ecran ul:not([class]) > li + li, .cr-recit .mk-ecran ol:not([class]) > li + li { margin-top: 0.3em; }
.cr-recit .mk-ecran li::marker { color: var(--fam-f, var(--mk-fond-a)); font-weight: 700; }
.cr-recit svg text { font-family: var(--fr-texte); }

/* ── Ouverture ─────────────────────────────────────────────────────────────── */
.cr-recit .fr-ouverture h1 { font-weight: 900; letter-spacing: -0.03em; line-height: 0.95; }
.cr-lettres .fr-ouverture h1 { font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.cr-ouverture-fig { display: block; width: min(76vw, 17rem); height: auto; margin: 4px auto 0; }
.cr-saut {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--mk-fond-a, #9A3412) 30%, transparent); background: var(--cr-surface);
    color: var(--mk-fond-a, #9A3412); font-weight: 700; text-decoration: none;
}
.cr-saut svg { flex: none; width: 18px; height: 18px; }
.cr-saut:focus-visible { outline: 3px solid var(--mk-fond-a, #9A3412); outline-offset: 2px; }
.cr-programme { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; text-align: left; }
.cr-programme li { position: relative; padding-left: 1.6em; font-size: 0.95em; line-height: 1.4; }
.cr-programme li > span:first-child { position: absolute; left: 0; top: 0; font-family: var(--mk-recit-titre); font-weight: 800; color: var(--mk-fond-a, #9A3412); }

/* ── Écrans ───────────────────────────────────────────────────────────────── */
.cr-etiquette {
    display: inline-block;
    margin: 0 0 10px !important;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--fam-f, var(--mk-fond-a, #9A3412));
    color: #fff;
    font-size: 0.74em;
    font-weight: 700;
    line-height: 1.3;
}
.cr-ecran-fig { text-align: left; }
.cr-schema, .cr-recit .mk-ecran .cr-schema {
    display: block;
    width: 100%;
    max-width: 30rem;
    height: auto;
    margin: 0 0 12px;
    background: var(--cr-surface);
    border: 1.5px solid var(--fam-m, rgba(42, 35, 51, 0.14));
    border-radius: 18px;
}
.cr-recit .mk-ecran .cr-def { margin: 0 0 8px; font-size: 0.92em; line-height: 1.45; }
.cr-recit .mk-ecran .cr-pied { margin: 0; font-size: 0.88em; line-height: 1.45; color: var(--cr-doux); }
.cr-recit [data-fond="encre"] .mk-ecran .cr-pied { color: rgba(246, 241, 231, 0.82); }
/* Chapitre sur fond nuit (data-fond="encre") : gras et étiquettes en jaune clair, lisibles sur le bleu nuit */
.cr-recit [data-fond="encre"] .mk-ecran strong, .cr-recit [data-fond="encre"] .mk-ecran b { color: #FBE38E; }
.cr-recit [data-fond="encre"] .cr-etiquette { background: #FBE38E; color: #1E2A45; }
.cr-recit [data-fond="encre"] .cr-schema { border-color: rgba(246, 241, 231, 0.3); }
.cr-recit .mk-ecran .cr-grand { font-family: var(--mk-recit-titre); font-size: 1.32em; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.4em; }
.cr-lettres .mk-ecran .cr-grand { font-weight: 700; letter-spacing: -0.01em; }
.cr-recit .cr-f {
    margin: 0.2em 0 0.6em;
    text-align: center;
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.cr-recit .cr-f-cadre { background: var(--fam-c, var(--mk-citron)); border: 1.5px solid var(--fam-m, var(--mk-citron-m)); border-radius: 14px; padding: 8px 12px; color: var(--cr-encre); }
.cr-recit .cr-f small { display: block; margin-top: 4px; font-size: 0.78em; font-weight: 600; color: var(--cr-doux); }
.cr-chiffre { display: block; margin: 0 0 0.3em; font-family: var(--mk-recit-titre); font-size: clamp(2.6rem, 1.6rem + 6vw, 4.4rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; color: var(--fam-f, var(--mk-fond-a)); font-variant-numeric: lining-nums; }
.cr-lettres .cr-chiffre { font-weight: 700; }
.cr-chiffre + span, .cr-chiffre-legende { display: block; font-size: 0.92em; color: var(--cr-doux); margin-bottom: 0.6em; }
.cr-code {
    box-sizing: border-box;
    margin: 0.3em 0 0.7em;
    padding: 10px 12px;
    border-radius: 14px;
    background: #221B2E;
    color: #F4EFE6;
    font: 500 0.8em/1.5 var(--cr-mono);
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    tab-size: 2;
}
.cr-code .k { color: #F9A8D4; } .cr-code .s { color: #A7F3D0; } .cr-code .c { color: #A39CB2; font-style: italic; } .cr-code .n { color: #FCD34D; } .cr-code .f { color: #93C5FD; }

/* Schémas */
.cr-recit .fv { fill: var(--fam-v, #F2B705); }
.cr-recit .f2 { fill: var(--cr-v2, #E9739B); }
.cr-recit .si { stroke: var(--cr-encre); }
.cr-recit svg .tc { font-family: var(--cr-mono); font-weight: 700; }
.cr-recit svg .tg { font-family: var(--mk-recit-titre); font-weight: 800; }
.cr-recit .cr-part { fill: #fff; transition: fill 0.35s ease; }
.cr-recit .cr-part.est-la { fill: var(--fam-v, #F2B705); }
.cr-recit .cr-teinte { fill: transparent; transition: fill 0.35s ease; }
.cr-recit .cr-teinte.est-la { fill: var(--fam-v, #F2B705); }
.cr-recit .cr-halo { fill: transparent; stroke: transparent; stroke-width: 2; transition: fill 0.35s ease, stroke 0.35s ease; }
.cr-recit .cr-halo.est-la { fill: var(--fam-c, #FFF4CC); stroke: var(--fam-f, #854D0E); }
.cr-halo-texte { paint-order: stroke; stroke: var(--cr-surface); stroke-width: 4px; stroke-linejoin: round; }

/* ── Blocs repris de l'ancien kit (scènes, séquences, exercices) ─────────────── */
.cr-recit .fr-colonne { position: relative; }
.cr-recit .mk-pin { --mk-pin-couleur: var(--mk-fond-a, #9A3412); }
.cr-recit .mk-scrolly { --mk-card-border: color-mix(in srgb, var(--mk-fond-a, #9A3412) 26%, transparent); --mk-card-bg: var(--cr-surface); }
.cr-recit .mk-scrolly .mk-step-card { border-radius: 16px; box-shadow: none; }
.cr-recit .mk-scrolly .mk-step-card b, .cr-recit .mk-scrolly .mk-step-card strong { color: var(--mk-fond-a, #9A3412); }

/* Cartes d'un défilé avec un schéma ; liens vers d'autres fiches en pastilles de 44 px */
.cr-recit .mk-defile .mk-carte .cr-schema { margin: 10px 0 0; }
.cr-liens { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0 !important; }
.cr-liens a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--mk-fond-a, #166534) 30%, transparent); background: #FFFDF8; color: var(--mk-fond-a, #166534); font-weight: 700; text-decoration: none; }

/* Ancien kit de philosophie, psychologie et méthodes (css/philo-cours.css) : ses blocs repris lisent les teintes
   --pc-* ; elles suivent ici la famille du chapitre (le kit ne connaissait que pêche, lilas et citron). */
.mk-chapitre[data-famille="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); }
.mk-chapitre[data-famille="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); }
.mk-chapitre[data-famille="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); }
.mk-chapitre[data-famille="menthe"] { --pc-fond: var(--pc-menthe); --pc-moyen: var(--pc-menthe-m); --pc-fonce: var(--pc-menthe-f); --pc-nuit: #14532d; --pc-vif: #15803D; --pc-fond2: var(--pc-citron); --pc-moyen2: var(--pc-citron-m); --pc-fonce2: var(--pc-citron-f); --pc-nuit2: var(--pc-citron-n); }
.mk-chapitre[data-famille="ciel"] { --pc-fond: var(--pc-ciel); --pc-moyen: var(--pc-ciel-m); --pc-fonce: var(--pc-ciel-f); --pc-nuit: #1e3a8a; --pc-vif: #1D4ED8; --pc-fond2: var(--pc-lilas); --pc-moyen2: var(--pc-lilas-m); --pc-fonce2: var(--pc-lilas-f); --pc-nuit2: var(--pc-lilas-n); }
.mk-chapitre[data-famille="rose"] { --pc-fond: var(--pc-rose); --pc-moyen: var(--pc-rose-m); --pc-fonce: var(--pc-rose-f); --pc-nuit: #831843; --pc-vif: #BE185D; --pc-fond2: var(--pc-peche); --pc-moyen2: var(--pc-peche-m); --pc-fonce2: var(--pc-peche-f); --pc-nuit2: var(--pc-peche-n); }

/* Ancien kit de physique et d'astronomie (css/physique-cours.css) : exercices sur fond clair, à la couleur du
   chapitre (leur fond lilas disparaissait sur un chapitre lilas), colonnes sans retrait dans une .fr-colonne */
.cr-recit .fr-colonne .ph-col { padding: 0; }
.cr-recit .fr-colonne > .ph-section { padding-top: 0; }
.cr-recit .ph-exo { background: var(--cr-surface); border: 1.5px solid color-mix(in srgb, var(--mk-fond-a, #6D28D9) 24%, transparent); }
.cr-recit .ph-exo[style] { background: var(--cr-surface) !important; }
.cr-recit .ph-exo .ph-q, .cr-recit .ph-exo .ph-corrige { background: color-mix(in srgb, var(--mk-fond-c, #FFF8EE) 55%, #fff); }
/* Formule longue : un cran plus petite pour tenir sur une ligne au téléphone */
.cr-recit .mk-ecran .cr-f-serre { font-size: 0.96em; }
/* Un morceau de formule ou de nombre qui ne doit pas être coupé en fin de ligne */
.cr-nw { white-space: nowrap; }

/* Exercices corrigés : on cherche, puis on ouvre le corrigé */
.cr-corriges { box-sizing: border-box; max-width: 40rem; margin: 36px auto; padding: 0 22px; }
.cr-corriges h3 { margin: 0 0 6px; font-family: var(--mk-recit-titre); font-size: 1.3rem; font-weight: 800; }
.cr-corriges > p { margin: 0 0 14px; color: var(--cr-doux); line-height: 1.5; }
.cr-corrige { background: var(--cr-surface); border: 1.5px solid color-mix(in srgb, var(--mk-fond-a, #9A3412) 28%, transparent); border-radius: 16px; margin-bottom: 10px; overflow: hidden; }
.cr-corrige summary { cursor: pointer; list-style: none; padding: 14px 16px; font-weight: 700; line-height: 1.5; }
.cr-corrige summary::-webkit-details-marker { display: none; }
.cr-corrige summary:focus-visible { outline: 3px solid var(--mk-fond-a, #9A3412); outline-offset: -3px; border-radius: 16px; }
.cr-corrige-n { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-right: 0.5rem; border-radius: 8px; background: var(--mk-fond-a, #9A3412); color: #fff; font-size: 0.9rem; }
.cr-corrige-ouvrir { display: block; margin-top: 4px; font-size: 0.88rem; font-weight: 600; color: var(--mk-fond-a, #9A3412); }
.cr-corrige[open] .cr-corrige-ouvrir { display: none; }
.cr-corrige-corps { padding: 12px 16px 14px; border-top: 1.5px dashed color-mix(in srgb, var(--mk-fond-a, #9A3412) 28%, transparent); line-height: 1.65; }
.cr-corrige-corps strong { color: var(--mk-fond-a, #9A3412); }

/* Quiz : en sciences la question peut porter un calcul, elle reste droite */
.cr-recit:not(.cr-lettres) .fr-quiz-q { font-family: var(--fr-texte); font-style: normal; font-weight: 700; font-size: 1.25rem; }
.cr-recit .fr-quiz h2 { font-weight: 800; letter-spacing: -0.02em; }

/* Renvois aux sources entre crochets : un petit « 2 » collé à un mot se lirait comme un exposant */
.cr-recit sup.mk-ref a::before { content: '['; }
.cr-recit sup.mk-ref a::after { content: ']'; }

@media (prefers-reduced-motion: reduce) {
    .cr-recit .cr-part, .cr-recit .cr-teinte, .cr-recit .cr-halo { transition: none; }
}

/* Le kit informatique garde le code en ligne sur une seule ligne : dans un récit, il revient à la ligne plutôt que
   de dépasser la largeur du téléphone */
.cr-recit.ic-cours .mk-ecran :not(pre) > code, .cr-recit.ic-cours .mk-pile :not(pre) > code,
.cr-recit.ic-cours .mk-fil :not(pre) > code, .cr-recit.ic-cours .mk-carte :not(pre) > code { white-space: normal; overflow-wrap: anywhere; }