/* info-cours.css : socle visuel des cours d'informatique en scrollytelling (informatique/*.html, plsql/, tech/).
   S'active avec la classe ic-cours sur <body>. Préfixe ic-. Rien de ce fichier ne change une fiche sans ic-cours.
   Texte en IBM Plex Sans, code en IBM Plex Mono. Aucun dégradé, aucune ombre portée.
   Propriétaire : groupe info-1 (septembre 2026). Moteur du défilement : js/scrolly.js (non modifié).

   Passe couleur (1er oct. 2026) : les trois familles de l'informatique, lues dans css/couleurs.css
   (lilas, ciel, menthe ; valeurs de secours si la feuille manque).
   - Bandes : <section class="ic-section mk-bande" data-teinte="lilas|ciel|menthe">. Dans une bande, l'accent
     (titres de partie, puces, étapes, pastilles, barre de progression) prend le ton foncé de la famille
     (--ic-acc), les surfaces son pastel (--ic-acc-p) et les bords son ton moyen (--ic-acc-m).
   - Encarts au code commun du site : définition ciel (.ic-def, .ic-defs), exercice citron (.ic-exo,
     .ic-corrige, .ic-ex), piège rose (.ic-piege), à retenir menthe (.ic-recap), repère lilas (.ic-note,
     .ic-objectifs). Sur une bande de la même famille, l'encart passe en blanc pour rester détaché.
   - Exercices : options blanches sur l'encart citron, choix en cours dans la famille de la bande,
     juste en menthe, faux en rose, bouton principal lilas foncé.
   - Contrastes vérifiés (AA, texte normal) : accent lilas 6,0:1 sur lilas, ciel 5,8:1 sur ciel, menthe
     (#047857, plus foncé que --mk-menthe-f) 4,8:1 sur menthe ; texte doux 4,7:1 sur tous les pastels ;
     titres citron #854D0E 6,2:1, rose 5,1:1. */

.ic-cours {
    --ic-fond: #f6f6f9;
    --ic-fond-2: #ecedf3;
    --ic-surface: #ffffff;
    --ic-bord: #e1e1ea;
    --ic-bord-2: #cfd0dc;
    --ic-encre: #0e1f19;
    --ic-texte: #33413b;
    --ic-doux: #5b6b64;
    --ic-vert: #047857;
    --ic-vert-fonce: #064e3b;
    --ic-indigo: #4338ca;
    --ic-indigo-fonce: #3730a3;
    --ic-bleu: #0369a1;
    --ic-beurre: #fef3c7;
    --ic-ambre: #92400e;
    --ic-rose: #be123c;
    --ic-rose-pale: #ffe4e6;
    --ic-editeur: #10201b;
    --ic-editeur-2: #1a2e27;
    /* Familles de l'informatique (pastel, moyen, foncé) */
    --ic-lilas: var(--mk-lilas, #EEE8FD);
    --ic-lilas-2: var(--mk-lilas-m, #D4C8F7);
    --ic-lilas-f: var(--mk-lilas-f, #6D28D9);
    --ic-ciel: var(--mk-ciel, #E3F0FB);
    --ic-ciel-2: var(--mk-ciel-m, #BCD9F5);
    --ic-ciel-f: var(--mk-ciel-f, #1D4ED8);
    --ic-menthe: var(--mk-menthe, #E2F5EA);
    --ic-menthe-2: var(--mk-menthe-m, #B6E5C8);
    --ic-menthe-f: #047857;
    /* Codes communs des encarts (exercice citron, piège rose) */
    --ic-citron: var(--mk-citron, #FFF4CC);
    --ic-citron-2: var(--mk-citron-m, #FBE38E);
    --ic-citron-t: #854D0E;
    --ic-rose-p: var(--mk-rose, #FDE7EF);
    --ic-rose-2: var(--mk-rose-m, #F9C6D8);
    --ic-rose-f: var(--mk-rose-f, #BE185D);
    /* États des exercices */
    --ic-juste-fond: var(--mk-menthe-m, #B6E5C8);
    --ic-juste-bord: #15803D;
    --ic-juste-texte: #14532d;
    --ic-faux-fond: var(--mk-rose-m, #F9C6D8);
    --ic-faux-bord: #BE185D;
    --ic-faux-texte: #881337;
    /* Accent de la partie en cours : lilas hors bande, puis celui de la bande */
    --ic-acc: var(--ic-lilas-f);
    --ic-acc-m: var(--ic-lilas-2);
    --ic-acc-p: var(--ic-lilas);
    background: var(--ic-fond);
    color: var(--ic-texte);
    font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}
.ic-cours .mk-bande[data-teinte="lilas"], .ic-cours [data-ic-teinte="lilas"] { --ic-acc: var(--ic-lilas-f); --ic-acc-m: var(--ic-lilas-2); --ic-acc-p: var(--ic-lilas); }
.ic-cours .mk-bande[data-teinte="ciel"], .ic-cours [data-ic-teinte="ciel"] { --ic-acc: var(--ic-ciel-f); --ic-acc-m: var(--ic-ciel-2); --ic-acc-p: var(--ic-ciel); }
.ic-cours .mk-bande[data-teinte="menthe"], .ic-cours [data-ic-teinte="menthe"] { --ic-acc: var(--ic-menthe-f); --ic-acc-m: var(--ic-menthe-2); --ic-acc-p: var(--ic-menthe); }
body.ic-cours { background: var(--ic-fond); min-height: 100vh; overflow-x: clip; }
.ic-cours code, .ic-cours pre, .ic-cours kbd, .ic-cours samp, .ic-mono { font-family: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; }
/* Pas de ligatures : l'élève doit voir exactement les caractères qu'il tape (!=, =>, <=). */
.ic-cours code, .ic-cours pre, .ic-mono, .ic-cours svg text, .ic-cours svg tspan { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.ic-cours svg text { font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.ic-cours svg .ic-mono, .ic-cours svg text.ic-mono, .ic-cours svg .ic-mono text, .ic-cours svg .ic-mono tspan { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* ---------- Mise en page ---------- */
.ic-col { max-width: 44rem; margin: 0 auto; padding: 0 16px; }
.ic-large { max-width: 64rem; margin: 0 auto; padding: 0 16px; }
.ic-cours main { display: block; padding-bottom: 2rem; }
.ic-section { padding: 3.2rem 0 .4rem; scroll-margin-top: 16px; }
.ic-section + .ic-section { padding-top: 2.4rem; }
/* Une partie dans une bande : de l'air en haut et en bas, bandes jointives */
.ic-cours .ic-section.mk-bande { padding-top: 2.8rem; padding-bottom: 2.2rem; }
/* Le repère des checkpoints (4 px, vide) se pose sur la fin de la partie précédente : pas de liseré entre deux bandes */
.ic-cours .fiche-checkpoint { margin-top: -4px; }

/* ---------- Typographie ---------- */
.ic-kicker { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ic-acc); margin: 0 0 .5rem; }
.ic-h1 { font-size: clamp(2.3rem, 9.2vw, 3.8rem); line-height: 1.04; font-weight: 700; letter-spacing: -.025em; color: var(--ic-encre); margin: 0 0 .9rem; }
.ic-h2 { font-size: clamp(1.55rem, 5.6vw, 2.25rem); line-height: 1.12; font-weight: 700; letter-spacing: -.018em; color: var(--ic-encre); margin: 0 0 .8rem; }
.ic-h3 { font-size: 1.16rem; font-weight: 700; color: var(--ic-encre); margin: 1.4rem 0 .5rem; line-height: 1.3; }
.ic-lead { font-size: 1.08rem; line-height: 1.65; color: var(--ic-texte); margin: 0 0 1rem; }
.ic-p { line-height: 1.7; margin: 0 0 .95rem; }
.ic-cours b, .ic-cours strong { color: var(--ic-encre); font-weight: 700; }
.ic-cours em { font-style: normal; font-weight: 600; color: var(--ic-acc); }
.ic-cours a:not([class]) { color: var(--ic-indigo); text-decoration: underline; text-underline-offset: 2px; }
/* Renvois aux sources et note des sources : css/fiche-sources.css les éclaircit par l'opacité (.7 et .65),
   trop pâle sur les bandes pastel (3,6:1) ; pleine opacité dans le kit (renvoi 6,6:1, note 4,7:1). */
.ic-cours .mk-ref a { opacity: 1; }
.ic-cours .mk-sources-note { opacity: 1; color: var(--ic-doux); }
.ic-cours :not(pre) > code {
    font-size: .88em; background: rgba(255, 255, 255, .78); color: var(--ic-encre);
    border: 1px solid var(--ic-acc-m); border-radius: 6px; padding: .06em .34em; white-space: nowrap;
}
.ic-cours .ic-p code, .ic-cours li code { white-space: normal; overflow-wrap: anywhere; }
.ic-liste { list-style: none; margin: 0 0 1rem; padding: 0; }
.ic-liste > li { position: relative; padding-left: 1.2rem; margin-bottom: .55rem; line-height: 1.65; }
.ic-liste > li::before { content: ''; position: absolute; left: .1rem; top: .66em; width: .42rem; height: .42rem; border-radius: 2px; background: var(--ic-acc); }
/* Dans une partie « pièges » (id du titre en -pieges), les puces prennent le code piège (rose) */
.ic-cours .ic-section[aria-labelledby$="-pieges"] .ic-liste > li::before { background: var(--ic-rose-f); }
.ic-etapes { list-style: none; counter-reset: ice; margin: .4rem 0 1rem; padding: 0; }
.ic-etapes > li { counter-increment: ice; position: relative; padding-left: 2.2rem; margin-bottom: .65rem; line-height: 1.62; }
.ic-etapes > li::before { content: counter(ice); position: absolute; left: 0; top: .08rem; width: 1.55rem; height: 1.55rem; border-radius: 7px; background: var(--ic-acc); color: #fff; font-weight: 700; font-size: .84rem; display: flex; align-items: center; justify-content: center; }

/* ---------- Accroche ---------- */
.ic-hero { padding-top: 3.4rem; padding-bottom: 2rem; }
.ic-hero-fig { display: block; width: 100%; max-width: 30rem; height: auto; margin: 1.2rem auto .4rem; }
.ic-objectifs { background: var(--ic-lilas); border: 1.5px solid var(--ic-lilas-2); border-radius: 14px; padding: 1rem 1.1rem; margin: 1.4rem 0 0; }
.ic-objectifs-titre { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ic-lilas-f); margin: 0 0 .55rem; }
.ic-objectifs ul { list-style: none; margin: 0; padding: 0; }
.ic-objectifs li { position: relative; padding-left: 1.2rem; margin-bottom: .45rem; line-height: 1.55; font-size: .97rem; }
.ic-objectifs li::before { content: ''; position: absolute; left: .1rem; top: .6em; width: .42rem; height: .42rem; border-radius: 2px; background: var(--ic-lilas-f); }
.ic-sommaire { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 0; padding: 0; list-style: none; }
/* chaque pastille du plan prend la couleur de la bande de sa partie (posée par info-cours.js) */
.ic-cours .ic-sommaire a { display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .8rem; border-radius: 999px; border: 1.5px solid var(--ic-acc-m); background: var(--ic-acc-p); color: var(--ic-acc); font-weight: 600; font-size: .88rem; text-decoration: none; }
.ic-cours .ic-sommaire a:hover { border-color: var(--ic-acc); }
.ic-cours .ic-sommaire a:focus-visible { outline: 3px solid var(--ic-indigo); outline-offset: 2px; }

/* ---------- Encadrés ---------- */
.ic-carte { background: var(--ic-surface); border: 1.5px solid var(--ic-acc-m); border-radius: 14px; padding: 1.1rem 1.1rem 1rem; margin: 1rem 0; }
@media (min-width: 768px) { .ic-carte { padding: 1.4rem 1.6rem 1.2rem; } }
/* définition : ciel */
.ic-def { background: var(--ic-ciel); border: 1.5px solid var(--ic-ciel-2); border-radius: 14px; padding: .9rem 1rem; margin: 1rem 0; line-height: 1.65; }
.ic-def > b:first-child, .ic-def-titre { display: block; color: var(--ic-ciel-f); font-weight: 700; margin-bottom: .2rem; }
/* exemple : citron */
.ic-ex { background: var(--ic-citron); border: 1.5px solid var(--ic-citron-2); border-radius: 14px; padding: .85rem 1rem; margin: 1rem 0; line-height: 1.65; color: var(--ic-texte); }
.ic-ex > b:first-child { color: var(--ic-citron-t); }
/* repère : lilas */
.ic-note { background: var(--ic-lilas); border: 1.5px solid var(--ic-lilas-2); border-radius: 14px; padding: .85rem 1rem; margin: 1rem 0; line-height: 1.65; color: #2a2357; }
.ic-note > b:first-child { display: block; color: var(--ic-lilas-f); margin-bottom: .15rem; }
/* piège : rose */
.ic-piege { background: var(--ic-rose-p); border: 1.5px solid var(--ic-rose-2); border-radius: 14px; padding: .85rem 1rem; margin: 0 0 .7rem; line-height: 1.62; }
.ic-piege > b:first-child { display: block; color: var(--ic-rose-f); margin-bottom: .15rem; }
.ic-piege p { margin: 0; }
.ic-deux { display: grid; gap: .8rem; }
@media (min-width: 768px) { .ic-deux { grid-template-columns: 1fr 1fr; } }
.ic-defs { display: grid; gap: .7rem; margin: 1rem 0; }
@media (min-width: 768px) { .ic-defs { grid-template-columns: 1fr 1fr; } }
.ic-defs > div { background: var(--ic-ciel); border: 1.5px solid var(--ic-ciel-2); border-radius: 12px; padding: .75rem .9rem; }
.ic-defs b { display: block; color: var(--ic-ciel-f); margin-bottom: .15rem; }
.ic-defs p { margin: 0; line-height: 1.55; font-size: .95rem; }
/* Sur une bande de la même famille, l'encart passe en blanc (il garde son bord et son titre colorés) */
.ic-cours .mk-bande[data-teinte="ciel"] .ic-def, .ic-cours .mk-bande[data-teinte="ciel"] .ic-defs > div,
.ic-cours .mk-bande[data-teinte="lilas"] .ic-note,
.ic-cours .mk-bande[data-teinte="menthe"] .ic-recap > div { background: var(--ic-surface); }

/* ---------- Tableaux ---------- */
.ic-table-wrap { overflow-x: auto; margin: .6rem 0 1.1rem; border: 1.5px solid var(--ic-acc-m); border-radius: 12px; background: var(--ic-surface); }
.ic-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ic-table th { text-align: left; background: var(--ic-acc-p); color: var(--ic-acc); font-weight: 700; padding: .55rem .7rem; border-bottom: 1.5px solid var(--ic-acc-m); }
.ic-table td { padding: .55rem .7rem; border-bottom: 1px solid var(--ic-bord); vertical-align: top; line-height: 1.5; }
.ic-table tr:last-child td { border-bottom: 0; }
.ic-table code { white-space: nowrap; }

/* ---------- Code (fond sombre conservé) ---------- */
.ic-code-bloc { margin: .7rem 0 1.1rem; border-radius: 12px; overflow: hidden; background: var(--ic-editeur); border: 1px solid #0b1713; }
.ic-code-titre { display: flex; justify-content: space-between; gap: .6rem; padding: .45rem .85rem; background: var(--ic-editeur-2); color: #9fb5ab; font: 500 .74rem/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .04em; }
.ic-code {
    margin: 0; padding: .85rem .95rem; overflow-x: auto; background: var(--ic-editeur); color: #e6efe9;
    font-size: .82rem; line-height: 1.62; white-space: pre; tab-size: 4; -webkit-overflow-scrolling: touch;
}
.ic-code-bloc > .ic-code { border-radius: 0; }
pre.ic-code:not(.ic-code-bloc pre) { border-radius: 12px; margin: .7rem 0 1.1rem; }
@media (min-width: 768px) { .ic-code { font-size: .86rem; } }
.ic-code .tk-k { color: #c4b5fd; }
.ic-code .tk-s { color: #86efac; }
.ic-code .tk-n { color: #fcd34d; }
.ic-code .tk-c { color: #8aa399; font-style: italic; }
.ic-code .tk-f { color: #7dd3fc; }
.ic-code .tk-t { color: #5eead4; }
.ic-code .tk-a { color: #fda4af; }
.ic-code .tk-m { color: #fcd34d; font-weight: 600; }
.ic-code .tk-hl { background: rgba(252, 211, 77, .16); border-radius: 3px; box-shadow: 0 0 0 2px rgba(252, 211, 77, .16); }
.ic-sortie { margin: 0; padding: .7rem .95rem; background: #0b1713; color: #b8f5cf; font: .8rem/1.55 'IBM Plex Mono', ui-monospace, monospace; white-space: pre-wrap; border-top: 1px solid #22382f; }
.ic-sortie::before { content: 'Sortie'; display: block; color: #8aa399; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .2rem; }

/* ---------- Scènes collées (mk-pin) ---------- */
.mk-pin.ic-pin { --mk-pin-couleur: var(--ic-acc); margin: .4rem 0 2.4rem; color: var(--ic-acc); }
.ic-scene { background: var(--ic-surface); border: 1.5px solid var(--ic-acc-m); border-radius: 16px; padding: .8rem .85rem .75rem; max-width: 38rem; margin: 0 auto; color: var(--ic-texte); }
.ic-scene-tete { margin: 0 0 .35rem; }
.ic-scene-kicker { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ic-acc); }
.ic-scene-titre { font-size: 1.04rem; font-weight: 700; line-height: 1.25; color: var(--ic-encre); margin: .12rem 0 0; }
.ic-fig { display: block; width: 100%; height: auto; max-height: 42vh; margin: .2rem auto 0; overflow: visible; }
.ic-lectures { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .9rem; margin: .45rem 0 0; font: 500 .9rem/1.4 'IBM Plex Mono', ui-monospace, monospace; color: var(--ic-encre); font-variant-numeric: tabular-nums; }
.ic-lectures b { color: var(--ic-acc); font-weight: 600; }
.ic-phrase { text-align: center; font-size: .92rem; line-height: 1.45; color: var(--ic-texte); margin: .35rem 0 0; min-height: 2.9em; }
.ic-phrase b { color: var(--ic-encre); }
.ic-pastilles { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: .5rem 0 0; }
.ic-pastilles button {
    min-height: 40px; padding: .3rem .8rem; border-radius: 999px; border: 1.5px solid var(--ic-acc-m);
    background: var(--ic-acc-p); color: var(--ic-acc); font: 600 .86rem/1.2 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.ic-pastilles button.ic-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.ic-pastilles button:hover { border-color: var(--ic-acc); }
.ic-pastilles button[aria-pressed="true"], .ic-pastilles button.is-on { background: var(--ic-acc); border-color: var(--ic-acc); color: #fff; }
.ic-pastilles button:focus-visible { outline: 3px solid var(--ic-indigo); outline-offset: 2px; }
@media (min-width: 900px) {
    .ic-scene--large { max-width: 60rem; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 0 1.8rem; align-items: center; padding: 1.1rem 1.3rem; }
    .ic-scene--large > .ic-scene-tete { grid-column: 1 / -1; }
    .ic-fig { max-height: 56vh; }
    .ic-scene--large .ic-phrase { font-size: .98rem; text-align: left; }
    .ic-scene--large .ic-lectures { justify-content: flex-start; }
    .ic-scene--large .ic-pastilles { justify-content: flex-start; }
}
/* Téléphone : le dessin prend presque toute la largeur (texte SVG rendu ≥ 11 px avec des corps de 12) */
@media (max-width: 599px) {
    .mk-pin-scene.ic-col { padding-left: 10px; padding-right: 10px; }
    .ic-scene { padding: .7rem .55rem .65rem; border-radius: 14px; }
}
.ic-intro { max-width: 40rem; margin: 2.2rem auto 1rem; }
.ic-intro .ic-h3 { margin-top: 0; font-size: 1.3rem; }
.ic-intro p { line-height: 1.65; margin: 0; }

/* ---------- Séquences (mk-scrolly) ---------- */
.ic-scrolly { --mk-scrolly-top: 16px; --mk-pin-couleur: var(--ic-acc); margin: 1rem auto 2.4rem; }
.ic-scrolly .mk-scrolly-graphic > svg { height: auto; max-height: 100%; background: var(--ic-surface); border: 1.5px solid var(--ic-acc-m); border-radius: 16px; }
.ic-scrolly .mk-scrolly-graphic > svg.ic-nu { background: none; border: 0; border-radius: 0; }
.ic-scrolly .mk-step-card { border: 1.5px solid var(--ic-acc-m); color: var(--ic-texte); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: .98rem; }
.ic-scrolly .mk-step-card p { margin: 0 0 .45rem; line-height: 1.58; }
.ic-scrolly .mk-step-card p:last-child { margin-bottom: 0; }
.ic-scrolly .mk-step-card b { color: var(--ic-encre); }
.ic-scrolly .mk-step-card code { font-size: .86em; }
.ic-stepn { display: table; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ic-acc); background: var(--ic-acc-p); border-radius: 999px; padding: .22rem .6rem; margin-bottom: .4rem; }
@media (min-width: 900px) { .ic-scrolly { --mk-scrolly-top: 24px; } }

/* ---------- Exercices (encart citron) ---------- */
.ic-exo { background: var(--ic-citron); border: 1.5px solid var(--ic-citron-2); border-radius: 16px; padding: 1.05rem 1rem 1rem; margin: 1.6rem 0 2.2rem; }
@media (min-width: 768px) { .ic-exo { padding: 1.4rem 1.7rem; } }
.ic-exo .ic-kicker, .ic-exo .ic-exo-compte { color: var(--ic-citron-t); }
.ic-exo-titre { font-size: 1.22rem; font-weight: 700; color: var(--ic-encre); line-height: 1.25; margin: .1rem 0 .35rem; }
.ic-exo-consigne { line-height: 1.6; margin: 0 0 .7rem; font-size: .97rem; }
.ic-exo-compte { display: block; text-align: center; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ic-acc); margin: .5rem 0 0; }
.ic-exo-q { font-weight: 600; color: var(--ic-encre); line-height: 1.55; margin: .2rem 0 .5rem; }
.ic-choix { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 .3rem; }
.ic-choix--col { flex-direction: column; }
.ic-choix button {
    min-height: 44px; padding: .5rem .95rem; border-radius: 12px; border: 1.5px solid var(--ic-citron-2);
    background: var(--ic-surface); color: var(--ic-encre); font: 500 .96rem/1.35 'IBM Plex Sans', system-ui, sans-serif;
    text-align: left; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.ic-choix button.ic-mono, .ic-choix--mono button { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .9rem; }
.ic-choix button:hover:not(:disabled) { border-color: var(--ic-acc); background: var(--ic-acc-p); }
.ic-choix button:focus-visible { outline: 3px solid var(--ic-indigo); outline-offset: 2px; }
.ic-choix button:disabled { cursor: default; }
.ic-choix button.is-juste { background: var(--ic-juste-fond); border-color: var(--ic-juste-bord); color: var(--ic-juste-texte); }
.ic-choix button.is-faux { background: var(--ic-faux-fond); border-color: var(--ic-faux-bord); color: var(--ic-faux-texte); }
.ic-detail { font-size: .94rem; line-height: 1.55; color: var(--ic-texte); min-height: 1.4em; margin: .35rem 0 0; }
.ic-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .7rem; }
.ic-btn { min-height: 44px; padding: .5rem 1.15rem; border-radius: 12px; border: 1.5px solid var(--ic-lilas-f); background: var(--ic-lilas-f); color: #fff; font: 700 .95rem/1.2 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; }
.ic-btn--clair { background: var(--ic-surface); color: var(--ic-lilas-f); }
.ic-btn:focus-visible { outline: 3px solid var(--ic-indigo); outline-offset: 2px; }
.ic-btn[hidden] { display: none; }
.ic-btn:disabled { opacity: .5; cursor: default; }
.ic-chat-zone .mk-chat { margin: .7rem 0 0; }
/* Remettre dans l'ordre */
.ic-ordre { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .4rem; }
.ic-ordre li { display: block; }
.ic-ordre button {
    width: 100%; min-height: 44px; display: flex; align-items: center; gap: .6rem; padding: .45rem .75rem; border-radius: 10px;
    border: 1.5px solid var(--ic-citron-2); background: var(--ic-surface); color: var(--ic-encre); text-align: left; cursor: pointer;
    font: 500 .9rem/1.4 'IBM Plex Mono', ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
}
.ic-ordre--texte button { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: .95rem; }
.ic-ordre .ic-rang { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 6px; background: var(--ic-citron-2); color: var(--ic-citron-t); font: 700 .78rem/1.5rem 'IBM Plex Sans', system-ui, sans-serif; text-align: center; }
.ic-ordre button.is-choisi { border-color: var(--ic-acc); background: var(--ic-acc-p); }
.ic-ordre button.is-juste { border-color: var(--ic-juste-bord); background: var(--ic-juste-fond); }
.ic-ordre button.is-faux { border-color: var(--ic-faux-bord); background: var(--ic-faux-fond); }
.ic-ordre button:focus-visible { outline: 3px solid var(--ic-indigo); outline-offset: 2px; }
/* Classer : réserve sur l'encart citron, bacs (zones de dépôt) dans la famille de la bande */
.ic-tri-reserve { display: flex; flex-wrap: wrap; gap: .45rem; min-height: 48px; padding: .5rem; border: 1.5px dashed #d9b84f; border-radius: 12px; margin: .4rem 0 .7rem; }
.ic-tri-reserve:empty::after { content: 'Tout est classé.'; color: var(--ic-doux); font-size: .9rem; align-self: center; padding: 0 .3rem; }
.ic-tri-carte {
    min-height: 40px; padding: .35rem .8rem; border-radius: 999px; border: 1.5px solid var(--ic-citron-2); background: var(--ic-surface);
    color: var(--ic-encre); font: 500 .9rem/1.3 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; touch-action: manipulation;
}
.ic-tri-carte.ic-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .86rem; }
.ic-tri-carte.is-choisi { border-color: var(--ic-acc); background: var(--ic-acc-p); }
.ic-tri-carte.is-juste { border-color: var(--ic-juste-bord); background: var(--ic-juste-fond); color: var(--ic-juste-texte); cursor: default; }
.ic-tri-carte.is-faux { animation: ic-secoue .35s ease; border-color: var(--ic-faux-bord); }
.ic-tri-carte:focus-visible, .ic-tri-bac-nom:focus-visible { outline: 3px solid var(--ic-indigo); outline-offset: 2px; }
.ic-tri-bacs { display: grid; gap: .55rem; }
@media (min-width: 640px) { .ic-tri-bacs { grid-template-columns: repeat(var(--ic-bacs, 2), minmax(0, 1fr)); } }
.ic-tri-bac { min-height: 84px; padding: .45rem; border-radius: 12px; border: 1.5px solid var(--ic-acc-m); background: var(--ic-acc-p); cursor: pointer; }
.ic-tri-bac.is-cible { border-color: var(--ic-acc); background: var(--ic-acc-m); }
.ic-tri-bac-nom { display: block; width: 100%; min-height: 40px; padding: .3rem .45rem; border: 0; border-radius: 8px; background: transparent; text-align: left; font: 700 .92rem/1.3 'IBM Plex Sans', system-ui, sans-serif; color: var(--ic-acc); cursor: pointer; }
.ic-tri-bac-liste { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 .2rem .2rem; }
.ic-tri-bac-liste .ic-tri-carte { display: inline-flex; align-items: center; min-height: 34px; }
@keyframes ic-secoue { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ---------- Corrigés (exercices : citron), récap (à retenir : menthe) ---------- */
.ic-corrige { border: 1.5px solid var(--ic-citron-2); border-radius: 12px; margin-bottom: .7rem; background: var(--ic-citron); overflow: hidden; }
.ic-corrige summary { cursor: pointer; list-style: none; padding: .85rem 1rem; font-weight: 600; color: var(--ic-encre); line-height: 1.55; }
.ic-corrige summary::-webkit-details-marker { display: none; }
.ic-corrige summary:focus-visible { outline: 3px solid var(--ic-indigo); outline-offset: -3px; border-radius: 12px; }
.ic-corrige-n { display: inline-flex; align-items: center; justify-content: center; min-width: 1.55rem; height: 1.55rem; border-radius: 7px; background: var(--ic-citron-t); color: #fff; font-size: .82rem; font-weight: 700; margin-right: .5rem; }
.ic-corrige-ouvrir { display: block; margin-top: .3rem; font-size: .8rem; font-weight: 600; color: var(--ic-citron-t); }
.ic-corrige[open] .ic-corrige-ouvrir { display: none; }
.ic-corrige-corps { padding: .75rem 1rem .95rem; border-top: 1.5px dashed var(--ic-citron-2); background: var(--ic-surface); line-height: 1.68; }
.ic-corrige-corps > :last-child { margin-bottom: 0; }
.ic-corrige-corps strong { color: var(--ic-encre); }
.ic-recap { display: grid; gap: .5rem; }
.ic-recap > div { background: var(--ic-menthe); border: 1.5px solid var(--ic-menthe-2); border-radius: 12px; padding: .6rem .85rem; }
.ic-recap span { display: block; font-weight: 700; color: var(--ic-menthe-f); font-size: .9rem; }
.ic-recap em { font-style: normal; font-weight: 400; color: var(--ic-texte); font-size: .95rem; line-height: 1.55; }

/* ---------- Quiz ---------- */
.ic-quiz { background: var(--ic-surface); border: 1.5px solid var(--ic-acc-m); border-radius: 18px; padding: 1.2rem 1rem; margin: 1rem 0 0; }
@media (min-width: 768px) { .ic-quiz { padding: 1.8rem 2rem; } }
.ic-quiz-intro { text-align: center; line-height: 1.6; margin: 0 0 1rem; }
.ic-quiz-haut { display: flex; justify-content: space-between; align-items: center; font-size: .84rem; font-weight: 600; color: var(--ic-doux); margin-bottom: .45rem; }
.ic-quiz-barre { height: 6px; border-radius: 999px; background: var(--ic-acc-p); overflow: hidden; margin-bottom: 1.1rem; }
.ic-quiz-barre > span { display: block; height: 100%; background: var(--ic-acc); border-radius: inherit; transition: width .3s ease; }
.ic-quiz-q { font-size: 1.14rem; font-weight: 700; color: var(--ic-encre); line-height: 1.4; margin: 0 0 1rem; }
.ic-quiz-opts { display: grid; gap: .55rem; }
.ic-quiz .quiz-option {
    display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 48px; text-align: left; padding: .65rem .8rem;
    border-radius: 12px; border: 1.5px solid var(--ic-acc-m); background: var(--ic-acc-p); color: var(--ic-encre);
    font: 500 .98rem/1.4 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.ic-quiz .quiz-option:hover:not(:disabled) { border-color: var(--ic-acc); }
.ic-quiz .quiz-option:focus-visible { outline: 3px solid var(--ic-indigo); outline-offset: 2px; }
.ic-quiz .quiz-option:disabled { cursor: default; }
.ic-quiz-lettre { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 7px; background: var(--ic-surface); border: 1.5px solid var(--ic-acc-m); display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; color: var(--ic-acc); }
.ic-quiz .quiz-option.correct { background: var(--ic-juste-fond); border-color: var(--ic-juste-bord); color: var(--ic-juste-texte); }
.ic-quiz .quiz-option.wrong { background: var(--ic-faux-fond); border-color: var(--ic-faux-bord); color: var(--ic-faux-texte); }
.ic-quiz-retour { margin: 1rem 0 0; padding: .8rem .95rem; border-radius: 12px; line-height: 1.58; font-size: .96rem; }
.ic-quiz-retour.is-juste { background: var(--ic-menthe); border: 1.5px solid var(--ic-menthe-2); color: var(--ic-juste-texte); }
.ic-quiz-retour.is-faux { background: var(--ic-rose-p); border: 1.5px solid var(--ic-rose-2); color: var(--ic-faux-texte); }
.ic-quiz-retour b { display: block; margin-bottom: .15rem; color: inherit; }
.ic-quiz-fin { text-align: center; }
.ic-quiz-note { font-size: 2.6rem; font-weight: 700; color: var(--ic-encre); line-height: 1.1; margin: .2rem 0; font-variant-numeric: tabular-nums; }
#global-result.ic-resultat { margin-top: 1rem; background: var(--ic-surface); border: 1.5px solid var(--ic-acc-m); border-radius: 18px; padding: 1.4rem 1rem; text-align: center; }
#global-result.ic-resultat.hidden { display: none; }

/* ---------- Sources et pied ---------- */
.ic-cours .mk-sources-liste { list-style: decimal; padding-left: 1.4rem; }
.ic-cours .mk-sources { max-width: 44rem; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
.ic-cours .mk-sources.mk-bande { margin-top: 0; margin-bottom: 0; padding-top: 2rem; padding-bottom: 2.2rem; border-top: 0; }
.ic-cours .mk-sources-liste li::marker { color: var(--ic-acc); opacity: 1; }
.ic-cours .mk-chat { max-width: 34rem; }
.ic-cours .mk-chat:not([data-ton]) { --mk-chat-bord: var(--ic-acc-m); }
.ic-chat-ouverture { margin: 1.3rem 0 0; }

/* ---------- Animations réduites ---------- */
@media (prefers-reduced-motion: reduce) {
    .ic-choix button, .ic-pastilles button, .ic-quiz .quiz-option, .ic-quiz-barre > span { transition: none; }
    .ic-tri-carte.is-faux { animation: none; }
}