/* Récit au défilement (voir js/recit.js pour le balisage). Les couleurs viennent de css/couleurs.css.
   Réglages : --mk-recit-haut (marge au-dessus des scènes collées), --mk-recit-bas (barre du bas des fiches),
   --mk-recit-titre (police des titres et accroches, posée par le kit de la matière). */

:root {
    --mk-recit-rythme: 2;   /* combien de fois plus de défilement que le réglage de base (écrans, scènes, séquences) */
    --mk-recit-haut: 8px;
    --mk-recit-bas: 62px;
    --mk-creme: #FFF8EE;
    --mk-sable: #F6ECDF;
    --mk-nuit: #1E2A45;
}

/* ── Chapitres : un fond par partie du cours ───────────────────────────────── */
.mk-chapitre {
    --mk-fond-c: var(--mk-creme);
    --mk-fond-t: #2A2333;
    --mk-fond-a: #A3154F;
    background: var(--mk-fond-c);
    color: var(--mk-fond-t);
}
[data-fond="creme"]  { --mk-fond-c: var(--mk-creme);  --mk-fond-t: #2A2333; --mk-fond-a: #9A3412; }
[data-fond="sable"]  { --mk-fond-c: var(--mk-sable);  --mk-fond-t: #2A2333; --mk-fond-a: #9A3412; }
[data-fond="rose"]   { --mk-fond-c: var(--mk-rose, #FDE7EF);   --mk-fond-t: #2E1424; --mk-fond-a: var(--mk-rose-f, #A3154F); }
[data-fond="peche"]  { --mk-fond-c: var(--mk-peche, #FFEADB);  --mk-fond-t: #2E1A10; --mk-fond-a: var(--mk-peche-f, #9A3412); }
[data-fond="citron"] { --mk-fond-c: var(--mk-citron, #FFF4CC); --mk-fond-t: #2B2410; --mk-fond-a: var(--mk-citron-f, #854D0E); }
[data-fond="menthe"] { --mk-fond-c: var(--mk-menthe, #E2F5EA); --mk-fond-t: #10291B; --mk-fond-a: var(--mk-menthe-f, #166534); }
[data-fond="ciel"]   { --mk-fond-c: var(--mk-ciel, #E3F0FB);   --mk-fond-t: #11223D; --mk-fond-a: var(--mk-ciel-f, #1D4ED8); }
[data-fond="lilas"]  { --mk-fond-c: var(--mk-lilas, #EEE8FD);  --mk-fond-t: #1F1638; --mk-fond-a: var(--mk-lilas-f, #6D28D9); }
[data-fond="encre"]  { --mk-fond-c: var(--mk-nuit);            --mk-fond-t: #F6F1E7; --mk-fond-a: #FBE38E; }

/* ── 1) Écrans de texte ────────────────────────────────────────────────────── */
/* Dans un écran, --mk-ep va de 0 à 1 pendant son passage (entrée 0 → 0,18, tenue, sortie 0,82 → 1).
   --mk-u (0 → 1 entre 0,12 et 0,62) et --mk-v (0 → 1 entre 0,4 et 0,7) servent à animer un schéma en CSS :
   transform: translateX(calc(var(--mk-u) * 40px)) ; font-size: calc(18px + var(--mk-v) * 20px)… */
.mk-ecran {
    --mk-u: clamp(0, calc((var(--mk-ep, 1) - 0.12) / 0.5), 1);
    --mk-v: clamp(0, calc((var(--mk-ep, 1) - 0.4) / 0.3), 1);
    box-sizing: border-box;
    width: min(100%, 40rem);
    margin: 0 auto;
    padding: 0 22px;
    font-size: clamp(1.25rem, 1.05rem + 1.3vw, 1.6rem);
    line-height: 1.48;
    text-wrap: pretty;
}
.mk-ecran > :first-child { margin-top: 0; }
.mk-ecran > :last-child { margin-bottom: 0; }
.mk-ecran p { margin: 0 0 0.75em; }
.mk-ecran h2 {
    margin: 0 0 0.45em;
    font-family: var(--mk-recit-titre, inherit);
    font-size: clamp(1.75rem, 1.15rem + 3.2vw, 2.7rem);
    line-height: 1.1;
    text-wrap: balance;
}
.mk-ecran h3 { margin: 0 0 0.4em; font-family: var(--mk-recit-titre, inherit); font-size: 1.15em; line-height: 1.2; }
.mk-ecran strong, .mk-ecran b { color: var(--mk-fond-a, inherit); }
.mk-ecran .mk-note { font-size: 0.78em; opacity: 0.8; }
.mk-ecran svg { display: block; max-width: 100%; height: auto; margin: 0.6em auto; }

.mk-ecran[data-style="accroche"], .mk-accroche {
    font-family: var(--mk-recit-titre, inherit);
    font-size: clamp(2rem, 1.1rem + 6.2vw, 4.1rem);
    line-height: 1.07;
    font-weight: 700;
    letter-spacing: -0.012em;
    text-align: center;
    text-wrap: balance;
}
.mk-ecran[data-style="accroche"] p { margin: 0; }

/* Scène collée : un écran à la fois, au milieu de l'écran du téléphone */
html.mk-recit-on .mk-recit { position: relative; }
html.mk-recit-on .mk-recit-scene {
    position: sticky;
    top: var(--mk-recit-haut);
    height: calc(100vh - var(--mk-recit-haut) - var(--mk-recit-bas));
    height: calc(100svh - var(--mk-recit-haut) - var(--mk-recit-bas));
    display: grid;
    align-items: center;
    justify-items: center;
}
html.mk-recit-on .mk-recit-scene > .mk-ecran {
    grid-area: 1 / 1;
    min-width: 0;   /* une longue ligne (code, formule) ne doit pas élargir la scène */
    scale: var(--mk-ecran-echelle, 1);
    will-change: opacity, transform;
}
html.mk-recit-on .mk-recit-scene > .mk-ecran:not(:first-child) { opacity: 0; }
html.mk-recit-on .mk-recit-scene > .mk-ecran:not(.est-visible) { pointer-events: none; }
/* Les mots s'allument l'un après l'autre (data-entree="mots") */
html.mk-recit-on .mk-ecran[data-entree="mots"] .mk-mot {
    opacity: clamp(0.17, calc(0.17 + (var(--mk-ep, 0) - 0.08 - var(--k, 0) * 0.55) * 7), 1);
}
html[data-lecture-audio] .mk-ecran[data-entree="mots"] .mk-mot { opacity: 1; }

.mk-recit-indice {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Sans JavaScript ou animations réduites : les écrans se lisent à la suite */
html:not(.mk-recit-on) .mk-recit > .mk-ecran { padding-top: 1.2rem; padding-bottom: 1.2rem; }

/* ── 2) Tache d'encre ─────────────────────────────────────────────────────── */
.mk-encre { position: relative; }
[data-de="creme"]  { --mk-de-c: var(--mk-creme); }
[data-de="sable"]  { --mk-de-c: var(--mk-sable); }
[data-de="rose"]   { --mk-de-c: var(--mk-rose, #FDE7EF); }
[data-de="peche"]  { --mk-de-c: var(--mk-peche, #FFEADB); }
[data-de="citron"] { --mk-de-c: var(--mk-citron, #FFF4CC); }
[data-de="menthe"] { --mk-de-c: var(--mk-menthe, #E2F5EA); }
[data-de="ciel"]   { --mk-de-c: var(--mk-ciel, #E3F0FB); }
[data-de="lilas"]  { --mk-de-c: var(--mk-lilas, #EEE8FD); }
[data-de="encre"]  { --mk-de-c: var(--mk-nuit); }
[data-vers="creme"]  { --mk-vers-c: var(--mk-creme);  --mk-vers-t: #9A3412; }
[data-vers="sable"]  { --mk-vers-c: var(--mk-sable);  --mk-vers-t: #9A3412; }
[data-vers="rose"]   { --mk-vers-c: var(--mk-rose, #FDE7EF);   --mk-vers-t: var(--mk-rose-f, #A3154F); }
[data-vers="peche"]  { --mk-vers-c: var(--mk-peche, #FFEADB);  --mk-vers-t: var(--mk-peche-f, #9A3412); }
[data-vers="citron"] { --mk-vers-c: var(--mk-citron, #FFF4CC); --mk-vers-t: var(--mk-citron-f, #854D0E); }
[data-vers="menthe"] { --mk-vers-c: var(--mk-menthe, #E2F5EA); --mk-vers-t: var(--mk-menthe-f, #166534); }
[data-vers="ciel"]   { --mk-vers-c: var(--mk-ciel, #E3F0FB);   --mk-vers-t: var(--mk-ciel-f, #1D4ED8); }
[data-vers="lilas"]  { --mk-vers-c: var(--mk-lilas, #EEE8FD);  --mk-vers-t: var(--mk-lilas-f, #6D28D9); }
[data-vers="encre"]  { --mk-vers-c: var(--mk-nuit);            --mk-vers-t: #FBE38E; }

.mk-encre-couche {
    position: relative;
    display: grid;
    place-items: center;
    padding: 3rem 22px;
    background: var(--mk-vers-c);
    color: var(--mk-vers-t);
}
html.mk-recit-on .mk-encre-couche {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    padding: 0 22px;
    overflow: hidden;
    background: var(--mk-de-c);
}
.mk-encre-tache {
    display: none;
    position: absolute;
    left: 50%;
    top: 45%;
    width: 64vmin;
    height: 64vmin;
    fill: var(--mk-vers-c);
    transform: translate(-50%, -50%) scale(0.0001);
    will-change: transform;
    pointer-events: none;
    overflow: visible;
}
html.mk-recit-on .mk-encre-tache { display: block; }
.mk-encre-goutte { transform-box: fill-box; transform-origin: center; opacity: 0; }
.mk-encre .mk-accroche { position: relative; z-index: 1; max-width: 20ch; margin: 0; color: var(--mk-vers-t); }
html.mk-recit-on .mk-encre .mk-accroche { opacity: 0; }

/* ── 3) Défilé horizontal ─────────────────────────────────────────────────── */
.mk-defile { position: relative; overflow-x: auto; }
.mk-defile-piste { display: flex; gap: 16px; width: max-content; padding: 8px 22px 16px; }
.mk-defile-piste > * { flex: none; box-sizing: border-box; width: min(78vw, 21rem); }
html.mk-recit-on .mk-defile { overflow: visible; }
html.mk-recit-on .mk-defile-scene {
    position: sticky;
    top: var(--mk-recit-haut);
    height: calc(100vh - var(--mk-recit-haut) - var(--mk-recit-bas));
    height: calc(100svh - var(--mk-recit-haut) - var(--mk-recit-bas));
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}
html.mk-recit-on .mk-defile-piste { padding: 8px 10vw; will-change: transform; }
.mk-defile-titre { margin: 0 22px 14px; font-family: var(--mk-recit-titre, inherit); font-size: clamp(1.4rem, 1rem + 2.4vw, 2.1rem); line-height: 1.15; }

/* ── 4) Pile de cartes ────────────────────────────────────────────────────── */
.mk-pile > .mk-carte, .mk-pile > .mk-pile-carte { max-width: 30rem; margin: 0 auto 16px; }
html.mk-recit-on .mk-pile { position: relative; }
html.mk-recit-on .mk-pile-scene {
    position: sticky;
    top: var(--mk-recit-haut);
    height: calc(100vh - var(--mk-recit-haut) - var(--mk-recit-bas));
    height: calc(100svh - var(--mk-recit-haut) - var(--mk-recit-bas));
    display: grid;
    place-items: center;
    overflow: hidden;
}
html.mk-recit-on .mk-pile-scene > * {
    grid-area: 1 / 1;
    min-width: 0;   /* une formule large ne doit pas élargir la pile */
    box-sizing: border-box;
    width: calc(100% - 40px);
    max-width: 30rem;
    margin: 0;
    transform-origin: 50% 0;
    will-change: transform;
}

/* Carte commune (piles, défilés, écrans) : surface claire, bord net, pas d'ombre */
.mk-carte {
    box-sizing: border-box;
    padding: 18px 20px;
    border-radius: 18px;
    background: #FFFDF8;
    border: 1.5px solid color-mix(in srgb, var(--mk-fond-a, #6D28D9) 28%, transparent);
    color: #2A2333;
    font-size: 1.02rem;
    line-height: 1.5;
}
.mk-carte > :first-child { margin-top: 0; }
.mk-carte > :last-child { margin-bottom: 0; }
.mk-carte h3 { margin: 0 0 0.35em; font-family: var(--mk-recit-titre, inherit); font-size: 1.25rem; line-height: 1.2; color: var(--mk-fond-a, inherit); }

/* ── 5) Fil de discussion ─────────────────────────────────────────────────── */
.mk-fil { max-width: 34rem; margin: 0 auto; padding: 0 18px; }
.mk-fil-toi {
    width: fit-content;
    max-width: 80%;
    margin: 10px 0 10px auto;
    padding: 10px 14px;
    border-radius: 18px 18px 4px 18px;
    background: var(--mk-fil-toi, #FFFDF8);
    border: 1.5px solid color-mix(in srgb, var(--mk-fond-a, #6D28D9) 30%, transparent);
    font-weight: 600;
    line-height: 1.45;
}
html.mk-recit-on .mk-fil { position: relative; }
html.mk-recit-on .mk-fil-scene {
    position: sticky;
    top: var(--mk-recit-haut);
    height: calc(100vh - var(--mk-recit-haut) - var(--mk-recit-bas));
    height: calc(100svh - var(--mk-recit-haut) - var(--mk-recit-bas));
    display: flex;
    flex-direction: column;
    justify-content: center;
}
html.mk-recit-on .mk-fil-msg { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.mk-recit-on .mk-fil-msg.est-la { opacity: 1; transform: none; }
.mk-fil .mk-chat { margin: 8px 0; --mk-chat-taille: 56px; }
.mk-fil .mk-chat-bulle, .mk-fil-toi { font-size: 1.08rem; }

/* ── Déclencheurs ─────────────────────────────────────────────────────────── */
html.mk-recit-on [data-mk-des] { transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.mk-recit-on [data-mk-des]:not(.est-la) { opacity: 0; transform: translate3d(0, 10px, 0); }
svg [data-mk-des] { transform-box: fill-box; transform-origin: center; }
/* .mk-pop : arrive en grandissant ; .mk-marque : reste visible, seul son style change (classe .est-la) */
html.mk-recit-on [data-mk-des].mk-pop:not(.est-la) { transform: scale(0.35); }
html.mk-recit-on [data-mk-des].mk-marque:not(.est-la) { opacity: 1; transform: none; }
[data-mk-surligne] {
    background-image: linear-gradient(var(--mk-feutre, #FBE38E), var(--mk-feutre, #FBE38E));
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 100% 0.45em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
html.mk-recit-on [data-mk-surligne] { background-size: 0% 0.45em; transition: background-size 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.mk-recit-on [data-mk-surligne].est-la { background-size: 100% 0.45em; }

@media print {
    .mk-recit-scene, .mk-defile-scene, .mk-pile-scene, .mk-fil-scene, .mk-encre-couche { position: static !important; height: auto !important; }
    .mk-encre-tache, .mk-recit-indice { display: none !important; }
    .mk-ecran, .mk-fil-msg, .mk-encre .mk-accroche, [data-mk-des] { opacity: 1 !important; transform: none !important; }
}

/* ── Séquences de scrolly.js dans une fiche en récit : même rythme que les écrans ── */
html.mk-recit-on .mk-scrolly.is-ready .mk-step { padding-top: calc(62vh * var(--mk-recit-rythme, 2)); }
html.mk-recit-on .mk-scrolly.is-ready .mk-step:first-child { padding-top: 34vh; }
html.mk-recit-on .mk-scrolly.is-ready.has-legende .mk-step { padding-top: calc(62vh * var(--mk-recit-rythme, 2) - 16vh); }
html.mk-recit-on .mk-scrolly.is-ready.has-legende .mk-step:first-child { padding-top: 0; }
@media (min-width: 900px) {
    html.mk-recit-on .mk-scrolly.is-ready .mk-step { padding-top: calc(34vh * var(--mk-recit-rythme, 2)); }
    html.mk-recit-on .mk-scrolly.is-ready .mk-step:first-child { padding-top: 22vh; }
    html.mk-recit-on .mk-scrolly.is-ready.has-legende .mk-step { padding-top: calc(50vh * var(--mk-recit-rythme, 2) - 16vh); }
    html.mk-recit-on .mk-scrolly.is-ready.has-legende .mk-step:first-child { padding-top: 0; }
}

/* ── Fond nuit (data-fond="encre") : les éléments clairs par défaut passent en clair sur foncé ── */
[data-fond="encre"] .mk-fil-toi { background: rgba(246, 241, 231, 0.08); border-color: rgba(246, 241, 231, 0.28); color: #F6F1E7; }
[data-fond="encre"] .mk-ref a { color: #FBE38E; }
[data-fond="encre"] .mk-scrolly-points span { background: rgba(246, 241, 231, 0.3); }
[data-fond="encre"] .fr-intro-scene h3 { color: #F6F1E7; }
[data-fond="encre"] .fr-intro-scene p { color: #D9D3C7; }