/* Couleurs communes des fiches (passe couleur du 1er oct. 2026).
   Pastels pour les fonds et les surfaces, teintes moyennes (-m) pour remplir les formes des schémas,
   teintes foncées (-f) pour le texte important et l'élément actif. Texte toujours foncé sur pastel : chaque ton foncé
   dépasse 4,5:1 sur son pastel et sur son ton moyen (vérifié le 1er oct. 2026).

   Usage :
     <section class="mk-bande" data-teinte="menthe">…</section>       bande pastel pleine largeur pour une partie du cours
     <div class="mk-encart" data-type="definition">…</div>             encart au code couleur commun
       types : definition (ciel), exemple (citron), piege (rose), retenir (menthe), repere (lilas), citation (peche)
     <mark class="mk-surligne">mot clé</mark>                          surligné au feutre pastel (data-teinte possible)
     <rect class="mk-svg-ciel" …>  <path class="mk-trait-ciel" …>      remplissage et trait des schémas
   Les kits des matières peuvent aussi lire directement les variables (--mk-ciel, --mk-ciel-m, --mk-ciel-f…). */

:root {
    --mk-rose: #FDE7EF;   --mk-rose-m: #F9C6D8;   --mk-rose-f: #A3154F;
    --mk-peche: #FFEADB;  --mk-peche-m: #FDCDAE;  --mk-peche-f: #9A3412;
    --mk-citron: #FFF4CC; --mk-citron-m: #FBE38E; --mk-citron-f: #854D0E;
    --mk-menthe: #E2F5EA; --mk-menthe-m: #B6E5C8; --mk-menthe-f: #166534;
    --mk-ciel: #E3F0FB;   --mk-ciel-m: #BCD9F5;   --mk-ciel-f: #1D4ED8;
    --mk-lilas: #EEE8FD;  --mk-lilas-m: #D4C8F7;  --mk-lilas-f: #6D28D9;
}

/* Bande pleine largeur : le fond déborde du conteneur centré sans créer de défilement horizontal
   (l'ombre étendue est rognée par clip-path ; elle ne compte pas dans la mise en page). */
.mk-bande {
    --mk-bande-fond: var(--mk-ciel);
    background: var(--mk-bande-fond);
    box-shadow: 0 0 0 100vmax var(--mk-bande-fond);
    clip-path: inset(0 -100vmax);
}
.mk-bande[data-teinte="rose"]   { --mk-bande-fond: var(--mk-rose); }
.mk-bande[data-teinte="peche"]  { --mk-bande-fond: var(--mk-peche); }
.mk-bande[data-teinte="citron"] { --mk-bande-fond: var(--mk-citron); }
.mk-bande[data-teinte="menthe"] { --mk-bande-fond: var(--mk-menthe); }
.mk-bande[data-teinte="ciel"]   { --mk-bande-fond: var(--mk-ciel); }
.mk-bande[data-teinte="lilas"]  { --mk-bande-fond: var(--mk-lilas); }

/* Encarts : le même code couleur dans toutes les fiches */
.mk-encart {
    --mk-e-fond: var(--mk-ciel); --mk-e-bord: var(--mk-ciel-m); --mk-e-titre: var(--mk-ciel-f);
    background: var(--mk-e-fond);
    border: 1.5px solid var(--mk-e-bord);
    border-radius: 16px;
    padding: 14px 16px;
}
.mk-encart > .mk-encart-titre { margin: 0 0 6px; color: var(--mk-e-titre); font-weight: 800; }
.mk-encart[data-type="definition"] { --mk-e-fond: var(--mk-ciel);   --mk-e-bord: var(--mk-ciel-m);   --mk-e-titre: var(--mk-ciel-f); }
.mk-encart[data-type="exemple"]    { --mk-e-fond: var(--mk-citron); --mk-e-bord: var(--mk-citron-m); --mk-e-titre: var(--mk-citron-f); }
.mk-encart[data-type="piege"]      { --mk-e-fond: var(--mk-rose);   --mk-e-bord: var(--mk-rose-m);   --mk-e-titre: var(--mk-rose-f); }
.mk-encart[data-type="retenir"]    { --mk-e-fond: var(--mk-menthe); --mk-e-bord: var(--mk-menthe-m); --mk-e-titre: var(--mk-menthe-f); }
.mk-encart[data-type="repere"]     { --mk-e-fond: var(--mk-lilas);  --mk-e-bord: var(--mk-lilas-m);  --mk-e-titre: var(--mk-lilas-f); }
.mk-encart[data-type="citation"]   { --mk-e-fond: var(--mk-peche);  --mk-e-bord: var(--mk-peche-m);  --mk-e-titre: var(--mk-peche-f); }

/* Mot clé surligné */
.mk-surligne {
    background: var(--mk-surligne, var(--mk-citron-m));
    color: inherit;
    padding: 0 0.16em;
    border-radius: 0.22em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.mk-surligne[data-teinte="rose"]   { --mk-surligne: var(--mk-rose-m); }
.mk-surligne[data-teinte="peche"]  { --mk-surligne: var(--mk-peche-m); }
.mk-surligne[data-teinte="menthe"] { --mk-surligne: var(--mk-menthe-m); }
.mk-surligne[data-teinte="ciel"]   { --mk-surligne: var(--mk-ciel-m); }
.mk-surligne[data-teinte="lilas"]  { --mk-surligne: var(--mk-lilas-m); }

/* Schémas SVG : formes remplies en teinte moyenne, traits en teinte foncée */
.mk-svg-rose   { fill: var(--mk-rose-m); }
.mk-svg-peche  { fill: var(--mk-peche-m); }
.mk-svg-citron { fill: var(--mk-citron-m); }
.mk-svg-menthe { fill: var(--mk-menthe-m); }
.mk-svg-ciel   { fill: var(--mk-ciel-m); }
.mk-svg-lilas  { fill: var(--mk-lilas-m); }
.mk-trait-rose   { stroke: var(--mk-rose-f); }
.mk-trait-peche  { stroke: var(--mk-peche-f); }
.mk-trait-citron { stroke: var(--mk-citron-f); }
.mk-trait-menthe { stroke: var(--mk-menthe-f); }
.mk-trait-ciel   { stroke: var(--mk-ciel-f); }
.mk-trait-lilas  { stroke: var(--mk-lilas-f); }

@media print {
    .mk-bande { box-shadow: none; clip-path: none; }
}