:root {
  --bg: #f6f5f1; --surface: #ffffff; --surface-2: #efede6; --ink: #1d2433; --ink-2: #4a5365;
  --line: #d9d5c9; --accent: #1f5f8b; --accent-ink: #ffffff; --accent-soft: #dcebf5;
  --ok: #1d6b3a; --ok-soft: #dff1e4; --warn: #8a5a00; --warn-soft: #fbefcf;
  --bad: #a1272b; --bad-soft: #f8e0e0; --info-soft: #e6ecf6;
  --font-size: 17px; --lh: 1.6; --measure: 74ch;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="contrast"]) {
    --bg: #14181f; --surface: #1c222c; --surface-2: #252c38; --ink: #e8ebf1; --ink-2: #aab3c2;
    --line: #333c4b; --accent: #7db9e8; --accent-ink: #0c1620; --accent-soft: #1d3346;
    --ok: #6fd08c; --ok-soft: #173424; --warn: #f0c05a; --warn-soft: #3a2f14;
    --bad: #ff8e92; --bad-soft: #3d1c1e; --info-soft: #1f2a3d;
  }
}
:root[data-theme="dark"] {
  --bg: #14181f; --surface: #1c222c; --surface-2: #252c38; --ink: #e8ebf1; --ink-2: #aab3c2;
  --line: #333c4b; --accent: #7db9e8; --accent-ink: #0c1620; --accent-soft: #1d3346;
  --ok: #6fd08c; --ok-soft: #173424; --warn: #f0c05a; --warn-soft: #3a2f14;
  --bad: #ff8e92; --bad-soft: #3d1c1e; --info-soft: #1f2a3d;
}
:root[data-theme="contrast"] {
  --bg: #000; --surface: #000; --surface-2: #111; --ink: #fff; --ink-2: #f0f0f0; --line: #fff;
  --accent: #ffe600; --accent-ink: #000; --accent-soft: #1a1a00; --ok: #7dff9a; --ok-soft: #002a0c;
  --warn: #ffe600; --warn-soft: #2a2400; --bad: #ff8080; --bad-soft: #330000; --info-soft: #101a2a;
}
* { box-sizing: border-box; }
html { font-size: var(--font-size); }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: var(--lh);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: .5rem 1rem; z-index: 99; }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.shell { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: 100vh; }
.nav { background: var(--surface); border-right: 1px solid var(--line); padding: 1rem .8rem; position: sticky; top: 0; height: 100vh; overflow: auto;
  display: flex; flex-direction: column; gap: .5rem; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--ink); text-decoration: none; padding: .3rem .4rem 1rem; }
.brand-mark { background: var(--accent); color: var(--accent-ink); border-radius: 8px; padding: .15rem .45rem; font-size: .9rem; }
#nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
#nav-list a { display: block; padding: .55rem .7rem; border-radius: 8px; color: var(--ink); text-decoration: none; }
#nav-list a:hover { background: var(--surface-2); }
#nav-list a[aria-current="page"] { background: var(--accent-soft); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.nav-foot { margin-top: auto; padding-top: 1rem; font-size: .85rem; color: var(--ink-2); }
.nav-tool { color: var(--ink-2); display: block; padding: .4rem .7rem; border: 1px dashed var(--line); border-radius: 8px; text-decoration: none; }
.nav-tool[aria-current="page"] { border-style: solid; color: var(--ink); }
.offline { margin: .6rem .2rem 0; }
main { padding: 1.6rem clamp(1rem, 3vw, 2.6rem) 4rem; max-width: 78rem; width: 100%; }
main:focus { outline: none; }
h1 { font-size: 1.7rem; margin: 0 0 .4rem; line-height: 1.25; }
h2 { font-size: 1.25rem; margin: 1.8rem 0 .6rem; }
h3 { font-size: 1.05rem; margin: 1.2rem 0 .4rem; }
.lead { color: var(--ink-2); max-width: var(--measure); margin: 0 0 1.2rem; }
.card { background: var(--card-bg, var(--surface)); border: 1px solid var(--card-line, var(--line)); border-radius: var(--radius); padding: 1rem 1.2rem; }
.grid { display: grid; gap: 1rem; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: .8rem; }
.muted { color: var(--ink-2); }
.small { font-size: .88rem; }
button, .btn { font: inherit; border: 1px solid var(--btn-border, var(--line)); background: var(--btn-bg, var(--surface)); color: var(--btn-ink, var(--ink)); border-radius: 8px;
  padding: .5rem .9rem; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .btn:hover { background: var(--btn-hover, var(--surface-2)); }
button.primary, .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
button.primary:hover, .btn.primary:hover { filter: brightness(1.08); }
button.big { font-size: 1.1rem; padding: .8rem 1.4rem; }
button.danger { color: var(--bad); border-color: var(--bad); }
button:disabled { opacity: .55; cursor: not-allowed; }
button.link { border: none; background: none; color: var(--accent); padding: 0; text-decoration: underline; }
a { color: var(--accent); }
input[type=text], input[type=search], input[type=number], textarea, select {
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .65rem; max-width: 100%; }
textarea { width: 100%; min-height: 5rem; }
label { display: block; font-weight: 600; margin-bottom: .2rem; }
.badge { display: inline-block; font-size: .78rem; padding: .08rem .5rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); white-space: nowrap; font-weight: 600; }
.badge.ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.badge.info { background: var(--info-soft); color: var(--accent); border-color: var(--accent); }
.notice { border-left: 4px solid var(--accent); background: var(--info-soft); padding: .7rem 1rem; border-radius: 6px; max-width: var(--measure); }
.notice.warn { border-color: var(--warn); background: var(--warn-soft); }
.notice.bad { border-color: var(--bad); background: var(--bad-soft); }
.notice.ok { border-color: var(--ok); background: var(--ok-soft); }
table { border-collapse: collapse; width: 100%; background: var(--surface); }
th, td { border-bottom: 1px solid var(--line); padding: .5rem .6rem; text-align: left; vertical-align: top; }
th { font-size: .85rem; color: var(--ink-2); font-weight: 600; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { border-bottom: 1px solid var(--line); padding: .7rem .2rem; display: flex; gap: .8rem; align-items: flex-start; justify-content: space-between; }
.list > li:last-child { border-bottom: 0; }
.item-title { font-weight: 600; }
.progress { height: .7rem; background: var(--surface-2); border-radius: 99px; overflow: hidden; border: 1px solid var(--line); }
.progress > span { display: block; height: 100%; background: var(--accent); }
.hero { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 62rem) { .hero { grid-template-columns: 1fr; } }
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin: 1rem 0; }
.tabs button[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.subject-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; cursor: pointer; }
details.subject { background: var(--card-bg, var(--surface)); border: 1px solid var(--card-line, var(--line)); border-radius: var(--radius); margin: .6rem 0; padding: .2rem 1rem; }
details.subject > summary { cursor: pointer; padding: .7rem 0; font-weight: 700; font-size: 1.1rem; }
.chap { border-top: 1px solid var(--line); padding: .6rem 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.chap .t { font-weight: 600; }
.q-stem { font-size: 1.1rem; max-width: var(--measure); white-space: pre-line; }
.choices { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .55rem; max-width: var(--measure); }
.choice { display: flex; gap: .8rem; align-items: flex-start; border: 2px solid var(--line); border-radius: 10px; padding: .7rem .9rem; cursor: pointer; background: var(--surface); }
.choice:hover { border-color: var(--accent); }
.choice input { width: 1.25rem; height: 1.25rem; margin-top: .25rem; flex: none; }
.choice .letter { font-weight: 700; min-width: 1.4rem; }
.choice.selected { border-color: var(--accent); background: var(--accent-soft); }
.choice.right { border-color: var(--ok); background: var(--ok-soft); }
.choice.wrong { border-color: var(--bad); background: var(--bad-soft); }
.choice.missed { border-style: dashed; border-color: var(--ok); }
.choice .mark { margin-left: auto; font-weight: 700; white-space: nowrap; }
.choice .why { display: block; font-size: .92rem; color: var(--ink-2); margin-top: .25rem; }
.reader { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1rem; align-items: start; }
@media (max-width: 70rem) { .reader { grid-template-columns: 1fr; } }
.pdf-pane { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem; max-height: calc(100vh - 11rem); overflow: auto; }
.pdf-page { position: relative; margin: 0 auto .8rem; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.pdf-page canvas { display: block; }
.pdf-page .pageno { position: absolute; top: 4px; right: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: .75rem; padding: 0 .4rem; border-radius: 4px; }
.textLayer { position: absolute; inset: 0; overflow: hidden; line-height: 1; opacity: .25; user-select: text; }
.textLayer span, .textLayer br { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0 0; }
.side { position: sticky; top: 1rem; display: grid; gap: .8rem; }
.docx { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.6rem; max-width: var(--measure); }
.docx img { max-width: 100%; height: auto; }
.docx table { font-size: .95rem; }
.passage { white-space: pre-wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .7rem; font-size: .92rem; max-height: 18rem; overflow: auto; }
.flip { min-height: 11rem; display: grid; place-items: center; text-align: center; font-size: 1.25rem; padding: 1.6rem; white-space: pre-line; }
.toast { position: fixed; right: 1rem; bottom: 1rem; background: var(--ink); color: var(--bg); padding: .7rem 1rem; border-radius: 8px; opacity: 0; transform: translateY(8px); transition: .2s; pointer-events: none; max-width: 28rem; z-index: 50; }
.toast.show { opacity: 1; transform: none; }
.kpi { font-size: 2rem; font-weight: 700; line-height: 1.1; }
/* (mise en page adaptative : voir la fin de la feuille) */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.side > *, .reader > * { min-width: 0; }
.side { overflow-wrap: anywhere; }
.side .badge { white-space: normal; }

/* Boutons à choix (confiance) */
button.seg { min-width: 5.5rem; }
button.seg.on, button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
button.seg.on::before, button[aria-pressed="true"].seg::before { content: "✓ "; }

/* ---- Flashcards : écriture et papier façon manuscrit (police Caveat, OFL-1.1, locale) ---- */
@font-face { font-family: "Caveat"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/vendor/fonts/caveat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/vendor/fonts/caveat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/vendor/fonts/caveat-latin-700-normal.woff2") format("woff2"); }
:root { --paper: #fffdf4; --paper-line: #cfe0f0; --paper-margin: #f0a0a0; --pen: #1b2a52; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="contrast"]) { --paper: #232a38; --paper-line: #33405a; --paper-margin: #a45a5a; --pen: #e9ecf6; } }
:root[data-theme="dark"] { --paper: #232a38; --paper-line: #33405a; --paper-margin: #a45a5a; --pen: #e9ecf6; }
:root[data-theme="contrast"] { --paper: #000; --paper-line: #444; --paper-margin: #ff8080; --pen: #fff; }
.hand { font-family: "Caveat", "Ink Free", "Segoe Print", "Bradley Hand", cursive; font-size: 1.55rem; line-height: 1.55rem; color: var(--pen); font-weight: 600; }
.paper { background-color: var(--paper);
  background-image: linear-gradient(to right, transparent 2.6rem, var(--paper-margin) 2.6rem, var(--paper-margin) calc(2.6rem + 2px), transparent calc(2.6rem + 2px)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rule, 1.55rem) - 1px), var(--paper-line) calc(var(--rule, 1.55rem) - 1px), var(--paper-line) var(--rule, 1.55rem));
  background-attachment: local; border: 1px solid var(--line); border-radius: 6px 10px 8px 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.14); padding-left: 3.3rem; }
textarea.paper { min-height: 9rem; padding-top: .2rem; padding-bottom: .2rem; resize: vertical; }
.flip.paper { position: relative; display: block; text-align: left; min-height: 12rem; padding: 1.6rem 1.4rem 1.2rem 3.3rem; transform: rotate(-.4deg); --rule: 2.2rem; font-size: 1.95rem; line-height: 2.2rem; }
.flip.paper.back { transform: rotate(.5deg); }
.flip.paper .fc-side { position: absolute; top: .4rem; right: .9rem; font-size: 1.2rem; color: var(--paper-margin); transform: rotate(3deg); font-weight: 700; }
.flip.paper::before { content: ""; position: absolute; top: -9px; left: 50%; width: 5.5rem; height: 1.3rem; transform: translateX(-50%) rotate(-2deg);
  background: rgba(240, 210, 120, .7); box-shadow: 0 1px 2px rgba(0,0,0,.18); }

/* ---- Dictée vocale ---- */
.dict-wrap { position: relative; max-width: 100%; }
.dict-wrap.block { display: block; width: 100%; }
.dict-wrap.inline { display: inline-block; }
.dict-wrap > textarea { width: 100%; padding-right: 2.6rem; }
.dict-wrap > input { padding-right: 2.6rem; width: 100%; }
button.mic { position: absolute; right: .35rem; top: .35rem; width: 2rem; height: 2rem; padding: 0; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface); color: var(--ink-2); line-height: 1; }
.dict-wrap.inline > button.mic { top: 50%; transform: translateY(-50%); }
button.mic:hover { color: var(--accent); border-color: var(--accent); }
button.mic.listening { background: var(--bad); color: #fff; border-color: var(--bad); animation: micpulse 1.2s infinite; }
@keyframes micpulse { 0% { box-shadow: 0 0 0 0 rgba(200,40,50,.5); } 70% { box-shadow: 0 0 0 .7rem rgba(200,40,50,0); } 100% { box-shadow: 0 0 0 0 rgba(200,40,50,0); } }
kbd { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 .35rem; background: var(--surface-2); font: inherit; font-size: .85em; }

/* ---- Surlignage dans le lecteur ---- */
.textLayer { opacity: 1; }
.textLayer span.hl { border-radius: 3px; mix-blend-mode: multiply; }
.hl-right, .textLayer span.hl-right { background: rgba(30, 160, 80, .42); }
.hl-wrong, .textLayer span.hl-wrong { background: rgba(220, 40, 50, .42); }
.hl-missed, .textLayer span.hl-missed { background: rgba(245, 160, 30, .45); outline: 2px dashed #d98200; }
.hl-expected, .textLayer span.hl-expected { background: rgba(30, 160, 80, .30); outline: 2px solid rgba(30, 160, 80, .8); }
.hl-checked, .textLayer span.hl-checked { background: rgba(60, 120, 220, .35); }
.hl-stem, .textLayer span.hl-stem { background: rgba(255, 215, 0, .30); }
.hl-y, .textLayer span.hl-y { background: rgba(255, 210, 0, .45); }
.hl-neutral, .textLayer span.hl-neutral { background: transparent; }
.hl-banner { margin-bottom: .8rem; display: grid; gap: .3rem; }
.hl-legend { display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--ink); border: 1px solid var(--line); }

/* =====================================================================
   Mise en page adaptative — grille de base et points de rupture
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
.shell { grid-template-columns: 1fr; }
.nav { position: sticky; top: 0; z-index: 30; height: auto; padding: .5rem .9rem; display: block; border-right: 0; border-bottom: 1px solid var(--line); }
.nav-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.nav-head .brand { padding: .2rem 0; }
.nav-toggle { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.6rem; padding: .3rem 1rem; }
.nav-toggle::before { content: "☰"; font-size: 1.2rem; line-height: 1; }
.nav-toggle[aria-expanded="true"]::before { content: "✕"; }
.nav-panel { display: none; max-height: calc(100vh - 4.2rem); overflow: auto; padding: .4rem 0 .8rem; }
.nav-panel.open { display: block; }
#nav-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 4px; }
#nav-list a { padding: .7rem .8rem; }
.nav-foot { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line); display: grid; gap: .4rem; }
main { padding: 1.1rem clamp(.9rem, 4vw, 2.6rem) 4rem; min-width: 0; }
h1 { font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.9rem); overflow-wrap: anywhere; }
h2 { font-size: clamp(1.1rem, 1rem + .6vw, 1.3rem); }
.item-title, .chap .t, .list > li, .card, td, th { overflow-wrap: anywhere; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.row > * { min-width: 0; }
.row .btn, .row button { flex: 0 1 auto; }
.list > li { flex-wrap: wrap; }
.list > li > div:first-child { flex: 1 1 14rem; min-width: 0; }
.chap { grid-template-columns: minmax(0, 1fr); }
.chap > .btn, .chap > a.btn { justify-self: start; }
.choice { min-width: 0; }
.choice > span:not(.letter):not(.mark) { min-width: 0; overflow-wrap: anywhere; }
.choice .mark { white-space: normal; text-align: right; max-width: 9rem; }
.q-stem { max-width: none; }
.choices { max-width: none; }
.flip { padding: 1rem; }
.kpi { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.hero { grid-template-columns: minmax(0, 1fr); }
.reader { grid-template-columns: minmax(0, 1fr); }
.pdf-pane { max-height: 70vh; }
.side { position: static; }
img, canvas, svg, video { max-width: 100%; }
dialog { max-width: calc(100vw - 1.5rem); }
input[type=text], input[type=search], input[type=number], select, textarea { max-width: 100%; }

@media (min-width: 40rem) {
  .row.between { flex-wrap: nowrap; }
  .chap { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
@media (min-width: 64rem) {
  .shell { grid-template-columns: 15.5rem minmax(0, 1fr); }
  .nav { height: 100vh; border-right: 1px solid var(--line); border-bottom: 0; padding: 1rem .8rem; display: flex; flex-direction: column; }
  .nav-toggle { display: none; }
  .nav-panel { display: flex; flex-direction: column; flex: 1; max-height: none; padding: 0; overflow: auto; }
  #nav-list { display: flex; flex-direction: column; gap: 2px; }
  #nav-list a { padding: .55rem .7rem; }
  .nav-foot { margin-top: auto; border-top: 0; }
  main { padding-top: 1.6rem; }
}
@media (min-width: 64rem) { .hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
@media (min-width: 70rem) { .reader { grid-template-columns: minmax(0, 1fr) 21rem; } .side { position: sticky; top: 1rem; } .pdf-pane { max-height: calc(100vh - 11rem); } }
@media (min-width: 100rem) { main { max-width: 96rem; } }
@media (max-width: 30rem) {
  button.big { width: 100%; }
  .card { padding: .85rem .9rem; }
  .row > .btn.primary.big, .row > button.primary.big { flex: 1 1 100%; }
}

/* Étiquettes longues : retour à la ligne plutôt que débordement */
.badge { white-space: normal; max-width: 100%; line-height: 1.35; text-align: left; }
.dict-wrap.inline { width: min(100%, 30rem); }
.row > .dict-wrap.inline { flex: 1 1 14rem; }

/* ---- Formulaires en grille propre ---- */
.field { display: grid; gap: .25rem; align-content: start; min-width: 0; margin-top: .6rem; }
.field > label { margin: 0; }
.field select, .field input, .field textarea { width: 100%; }
.field-grid { display: grid; gap: .2rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.btn-groups { display: grid; gap: .9rem 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.btn-group { display: flex; flex-wrap: wrap; gap: .5rem; align-content: flex-start; min-width: 0; }
.btn-group .gl { flex: 1 0 100%; font-size: .8rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-2); }

.shell { align-content: start; }

/* ---- Lecteur : panneau repliable, lecture vocale ---- */
.reader.collapsed { grid-template-columns: minmax(0, 1fr); }
.reader.collapsed .side { display: none; }
.reader-tools { margin-bottom: .6rem; }
.side-toggle { font-weight: 600; }
.voice-player { margin: 0 0 .8rem; display: grid; gap: .6rem; }
.voice-grid { display: grid; gap: .4rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); align-items: end; }
.voice-grid .field { margin-top: 0; }
.voice-grid input[type=range] { width: 100%; }
.voice-now { min-height: 2.6rem; padding: .5rem .7rem; border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 6px; font-size: 1.05rem; }
.voice-now:empty { display: none; }
label.check { display: flex; gap: .5rem; align-items: center; font-weight: 500; margin: 0; }
label.check input { width: 1.1rem; height: 1.1rem; }

/* ---- Carte à deux faces (retournement 3D) ---- */
.scene { perspective: 1400px; cursor: pointer; outline-offset: 6px; margin: 1rem auto; max-width: 46rem; }
.card3d { display: grid; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, .7, .3, 1); }
.card3d.flipped { transform: rotateY(180deg); }
.card3d .face { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: relative; min-height: 14rem; padding: 2.2rem 1.4rem 1.4rem 3.4rem;
  display: flex; flex-direction: column; justify-content: center; text-align: left; font-size: 1.7rem; line-height: 2.2rem; --rule: 2.2rem; border-radius: 8px; }
.card3d .face.back { transform: rotateY(180deg); }
.face .fc-side { position: absolute; top: .45rem; right: 1rem; font-size: 1.15rem; color: var(--paper-margin); transform: rotate(2deg); font-weight: 700; }
.face .fc-tag { position: absolute; top: .45rem; left: 3.4rem; right: 8rem; font-size: 1rem; line-height: 1.2; color: var(--ink-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.face .fc-text { white-space: pre-line; overflow-wrap: anywhere; }
.scene::before { content: ""; position: absolute; }
.stamp { align-self: flex-start; font-size: 2.2rem; font-weight: 700; letter-spacing: .08em; padding: 0 .9rem; border: 4px double currentColor; border-radius: 8px; transform: rotate(-4deg); margin-bottom: .4rem; }
.stamp.vrai { color: #1d8a47; } .stamp.faux { color: #c62828; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stamp.vrai { color: #6fd08c; } :root:not([data-theme="light"]) .stamp.faux { color: #ff8e92; } }
:root[data-theme="dark"] .stamp.vrai { color: #6fd08c; } :root[data-theme="dark"] .stamp.faux { color: #ff8e92; }
@media (prefers-reduced-motion: reduce) { .card3d { transition: none; } }
.review-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin: .8rem auto 0; max-width: 46rem; }
.review-actions > button.big { flex: 1 1 100%; }
button.rate { position: relative; flex: 1 1 8rem; display: grid; gap: .05rem; justify-items: center; padding: .6rem .5rem .8rem; min-width: 6.5rem; }
button.rate .rl { font-weight: 700; } button.rate .ri { font-size: .85rem; color: var(--ink-2); }
button.rate.primary .ri { color: var(--accent-ink); opacity: .85; }
button.rate .rk { position: absolute; top: .25rem; right: .45rem; font-size: .72rem; opacity: .6; }
button.rate.bad { border-color: var(--bad); color: var(--bad); } button.rate.ok { border-color: var(--ok); color: var(--ok); }
/* ---- Sélecteur de cartes générées ---- */
dialog.picker { width: min(60rem, 96vw); max-height: 90vh; overflow: auto; }
.pick-list { display: grid; gap: .8rem; }
.pick-item { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .7rem; background: var(--surface); }
.pick-item.done { opacity: .6; }
.pick-cols { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin-top: .4rem; }
textarea.small-card { min-height: 6rem; font-size: 1.3rem; line-height: 1.55rem; }

/* ---- Icônes du menu ---- */
.ico { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: none; }
.ico svg { width: 100%; height: 100%; }
#nav-list a { display: flex; align-items: center; gap: .75rem; }
#nav-list a[aria-current="page"] .ico { color: var(--accent); }
.nav-tool { display: flex; align-items: center; gap: .6rem; }
.nav-tool .ico { width: 1.25rem; height: 1.25rem; }

/* ---- Dictée continue : pastille et sous-titre en direct ---- */
.dict-pill { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; max-width: min(26rem, calc(100vw - 2rem)); }
.dict-pill-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem; border-radius: 999px; background: var(--surface); box-shadow: 0 2px 10px rgba(0,0,0,.25); font-weight: 600; }
.dict-pill.active .dict-pill-btn { background: var(--bad); color: #fff; border-color: var(--bad); animation: micpulse 1.4s infinite; }
.dict-live { background: var(--ink); color: var(--bg); padding: .45rem .8rem; border-radius: 10px; font-size: .95rem; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.dict-live[data-state="speaking"] { outline: 2px solid var(--accent); }
.dict-live::after { content: attr(data-engine); display: block; font-size: .72rem; opacity: .7; }
.toast { bottom: 4.6rem; }

/* ---- Haut-parleur (lecture à voix haute) : distinct du micro (dictée) ---- */
.speaker-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 2.4rem; min-height: 2.4rem; padding: .3rem .6rem; }
.speaker-btn.primary { padding: .45rem .9rem; font-weight: 600; }
.speaker-btn.speaking { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); animation: spkpulse 1.2s infinite; }
@keyframes spkpulse { 0% { box-shadow: 0 0 0 0 rgba(31,95,139,.45); } 70% { box-shadow: 0 0 0 .6rem rgba(31,95,139,0); } 100% { box-shadow: 0 0 0 0 rgba(31,95,139,0); } }
.scene { position: relative; }
.card-speaker { position: absolute; top: .5rem; left: .5rem; z-index: 3; width: 2.4rem; padding: .2rem; border-radius: 50%; }

/* ---- Fiche « recherche web » ---- */
.web-box { border: 1px dashed var(--accent); background: var(--info-soft); border-radius: 8px; padding: .7rem .9rem; margin-top: .8rem; display: grid; gap: .2rem; }
.web-list { list-style: none; margin: .2rem 0; padding: 0; display: grid; gap: .35rem; }
.web-list li { overflow-wrap: anywhere; }

/* =====================================================================
   Lecteur : cours centré, panneau tout en bas (plus de colonne latérale)
   ===================================================================== */
.reader-page { max-width: 62rem; margin-inline: auto; }
.reader { display: block !important; max-width: none; }
.reader > .side { position: static !important; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 2px solid var(--line); display: grid; gap: .8rem; }
.pdf-pane { max-height: none !important; overflow-x: auto; overflow-y: visible; }
.reader-bar { position: sticky; top: 0; z-index: 8; background: var(--bg); padding: .45rem 0; margin-bottom: .4rem; border-bottom: 1px solid var(--line); }
@media (max-width: 63.99rem) { .reader-bar { top: 3.9rem; } }
.docx { margin-inline: auto; }

/* ---- Sources d'une recherche web ---- */
.src-box { display: grid; gap: .5rem; margin-top: .3rem; }
.src-toggle { justify-self: start; font-weight: 600; }
.src-panel { display: grid; gap: .6rem; }
.src-panel[hidden] { display: none; }
.src-item { border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem; background: var(--surface); display: grid; gap: .3rem; }
.src-title { font-weight: 600; overflow-wrap: anywhere; }

/* Accueil : repères visuels et cartes d'état */
.eyebrow { display: flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.eyebrow .ico { width: 1.25rem; height: 1.25rem; }
.with-ico { display: flex; align-items: center; gap: .5rem; }
.with-ico .ico { color: var(--accent); }
a.card.stat { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: inherit; }
a.card.stat:hover { border-color: var(--accent); }
.stat-ico .ico { width: 2.4rem; height: 2.4rem; color: var(--accent); }
.stat.todo .stat-ico .ico { color: var(--accent); }
.stat-body { display: flex; flex-direction: column; }
.stat .kpi { line-height: 1.1; }
.stat-link { color: var(--accent); text-decoration: underline; margin-top: .15rem; }
/* Bibliothèque : résumé détaillé si la place le permet, sinon version courte */
.sum-short { display: none; }
@media (max-width: 760px) { .sum-full { display: none; } .sum-short { display: inline; } }

/* Icônes par type de document (bibliothèque) */
.ico.sm { width: 1.15rem; height: 1.15rem; vertical-align: -.2em; margin-right: .3rem; }
.kind-ico[data-kind="cours"] { color: var(--c01-ink, #2563eb); }
.kind-ico[data-kind="qcm"] { color: var(--c02-ink, #16a34a); }
.kind-ico[data-kind="epreuve"] { color: var(--c03-ink, #d97706); }
.kind-ico[data-kind="ed"] { color: var(--c04-ink, #9333ea); }
.kind-ico[data-kind="guide"] { color: var(--c05-ink, #0d9488); }
.kind-ico[data-kind="document"] { color: var(--c11-ink, #6b7280); }
.kind-ico[data-kind="notice"] { color: var(--c12-ink, #0284c7); }
.sum-part { white-space: nowrap; margin-right: .6rem; display: inline-block; }
.chap .t.with-ico { align-items: flex-start; }
h3.with-ico { display: flex; align-items: center; gap: .1rem; }

/* Accueil : jauges et tuiles */
.kpi-of { font-size: 1rem; font-weight: 400; color: var(--muted, #6b7280); }
.gauge { margin: .4rem 0 .6rem; }
.gauge-bar { height: .6rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.gauge-fill { height: 100%; background: var(--accent); border-radius: 999px; min-width: 2px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .6rem; margin: .6rem 0; }
.tile { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .5rem; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 10px; }
.tile-ico .ico { width: 1.6rem; height: 1.6rem; color: var(--accent); }
.tile-n { font-size: 1.3rem; font-weight: 700; line-height: 1; }
.tile-t { grid-column: 1 / -1; font-size: .8rem; color: var(--muted, #6b7280); margin-top: .15rem; }

/* Marque-page dans le lecteur */
.bm-note { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 .6rem; padding: .4rem .7rem; border: 1px dashed var(--line); border-radius: 10px; }
.bm-note .ico { width: 1.2rem; height: 1.2rem; color: var(--c13-ink, #dc2626); }
.bm-btn { display: inline-flex; align-items: center; gap: .35rem; }
.bm-btn .ico { width: 1.15rem; height: 1.15rem; color: var(--c13-ink, #dc2626); }
.bm-line { position: absolute; left: 0; right: 0; height: 0; border-top: 3px solid var(--c13, #dc2626); pointer-events: none; z-index: 4; }
.bm-tag { position: absolute; left: 6px; top: -1.45rem; background: var(--c13, #dc2626); color: var(--c13-on, #fff); font-size: .72rem; font-weight: 600; padding: .1rem .5rem; border-radius: 4px 4px 4px 0; }
.docx { position: relative; }
.bm-card { border-left: 4px solid var(--c13, #dc2626) !important; position: relative; }
.bm-card .bm-tag { position: static; display: inline-block; margin-bottom: .3rem; }

/* Pomodoro */
.pomo-pill { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.2); cursor: pointer; }
.pomo-pill[hidden] { display: none; }
.pomo-pill .ico { width: 1.2rem; height: 1.2rem; }
.pomo-pill.work { border-color: var(--c14, #dc2626); } .pomo-pill.short, .pomo-pill.long { border-color: var(--c15, #16a34a); }
.pomo-pill.paused { opacity: .85; }
.pomo-dlg { max-width: 26rem; text-align: center; }
.pomo-dlg h2 { justify-content: center; }
.pomo-time { font-size: 3.6rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; margin: .2rem 0; }
.pomo-phase { font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.pomo-phase.work { color: var(--c14-ink, #dc2626); } .pomo-phase.short, .pomo-phase.long { color: var(--c15-ink, #16a34a); }
.pomo-dots { display: flex; justify-content: center; gap: .4rem; margin: .5rem 0 .8rem; }
.pomo-dots .dot { width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid var(--line); }
.pomo-dots .dot.on { background: var(--c14, #dc2626); border-color: var(--c14, #dc2626); } .pomo-dots .dot.cur { border-color: var(--c14, #dc2626); }
.pomo-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .6rem 0; text-align: left; }
.pomo-field { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; }
.pomo-check { display: block; text-align: left; margin: .3rem 0; font-size: .9rem; }
.pomo-nav .ico { width: 1.25rem; height: 1.25rem; }

/* Vignettes de chapitres (petite image carrée tirée du cours) */
.thumb { display: none; flex: none; width: 3.6rem; height: 3.6rem; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.thumb.on { display: block; }
.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb.thumb-icon { border-color: transparent; background: #fff7eb; }
.thumb-icon img { object-fit: cover; }
.thumb-sm { width: 2.6rem; height: 2.6rem; }
.thumb-lg { width: 6rem; height: 6rem; }
.chap-main { display: flex; align-items: flex-start; gap: .7rem; min-width: 0; }
.chap-main > div { min-width: 0; }
.chap-head { display: flex; align-items: center; gap: .9rem; }
.chap-head h1, .chap-head h2 { margin: 0; }
.pomo-nav .ico { width: 1.5rem; height: 1.5rem; }

/* Écrans tactiles (iPad, tablettes) : zones de toucher confortables, texte de saisie lisible sans zoom automatique */
@media (pointer: coarse) {
  button, .btn, select, summary, #nav-list a, .nav-tool { min-height: 44px; }
  button.mic { min-width: 44px; min-height: 44px; }
  input[type=range] { min-height: 44px; }
  input[type=text], input[type=search], input[type=number], textarea, select { font-size: 16px; min-height: 44px; }
  .seg, button.seg { min-height: 44px; }
}
/* Marges de sécurité (barre d'accueil de l'iPad, encoche) */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.pomo-pill { bottom: max(1rem, env(safe-area-inset-bottom)); right: max(1rem, env(safe-area-inset-right)); }

/* ---------- Module ANKI ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.check { display: inline-flex; align-items: center; gap: .4rem; }
.ak-tabs { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: .6rem 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.ak-tab { padding: .45rem .9rem; border-radius: 999px; text-decoration: none; color: var(--ink); border: 1px solid transparent; font-weight: 500; }
.ak-tab:hover { background: var(--surface-2); }
.ak-tab[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent); font-weight: 700; }
.ak-tab-sec { color: var(--ink-2); font-size: .92rem; }
.ak-more-sep { color: var(--ink-2); padding: 0 .2rem; }
.ak-hero { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; border-left: 4px solid var(--accent); }
.ak-stats { margin-top: 1rem; }
.ak-stat { display: flex; gap: .8rem; align-items: center; }
.ak-stat .stat-ico .ico { width: 2.2rem; height: 2.2rem; color: var(--accent); }
.ak-face { min-height: 9rem; padding: 1.2rem 1.4rem; border-radius: 12px; border: 1px solid var(--line); font-size: 1.25rem; }
.ak-face .fc-text { white-space: pre-line; }
.ak-sep { border: 0; border-top: 1px dashed var(--line); margin: .9rem 0; }
.ak-expl { margin-top: .7rem; }
.ak-typed { width: 100%; margin-top: .6rem; }
.ak-meta { margin: .6rem 0 .4rem; gap: .5rem; }
.ak-second { justify-content: center; margin-top: .8rem; gap: .9rem; }
.ak-compare { margin-top: .6rem; padding: .5rem .8rem; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 6px; }
.cloze-hit { background: var(--accent-soft); color: var(--ink); padding: 0 .2em; border-radius: 4px; box-shadow: inset 0 -2px 0 var(--accent); }
.cloze-hole { background: var(--surface-2); border: 1px dashed var(--accent); padding: 0 .35em; border-radius: 4px; font-weight: 700; color: var(--accent); }
.ak-row .ak-q { font-weight: 600; margin: .4rem 0 .15rem; white-space: pre-line; }
.ak-row .ak-a { white-space: pre-line; margin-bottom: .4rem; }
.ak-row { margin: .6rem 0; }
.ak-filters { gap: .5rem; margin-bottom: .6rem; }
.ak-bulk { padding: .5rem .8rem; background: var(--accent-soft); border-radius: 8px; margin-bottom: .5rem; }
.ak-detail { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--line); }
.ak-kinds { margin-bottom: .6rem; }
.ak-quote { border-left: 4px solid var(--accent); margin: .5rem 0; padding: .4rem .8rem; background: var(--surface-2); border-radius: 0 8px 8px 0; white-space: pre-line; }
.ak-reasons { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.ak-notion { padding: .6rem 0; border-top: 1px solid var(--line); }
.ak-notion-list { margin: .4rem 0 0; padding-left: 1.1rem; }
.ak-draft { width: 100%; min-height: 14rem; }
.ak-canvas { width: 100%; max-width: 900px; border: 1px solid var(--line); border-radius: 8px; touch-action: none; background: #fff; }
.ak-passage { max-height: 22rem; overflow: auto; white-space: pre-line; }
.ak-mine { white-space: pre-line; max-height: 22rem; overflow: auto; }
.ak-checks { list-style: none; padding: 0; margin: 0 0 .4rem; }
.ak-checks li { margin: .3rem 0; }
.ak-guide li { margin: .6rem 0; }
.ak-opt { display: flex; gap: .8rem; align-items: center; text-decoration: none; color: inherit; }
.ak-opt:hover { border-color: var(--accent); }
.ak-opt .stat-ico .ico { width: 2rem; height: 2rem; color: var(--accent); }
.ak-method h3 { font-size: 1.1rem; }

/* Schémas masqués : rendu et éditeur (positions en pourcentages : alignement identique à tous les zooms) */
.occ-card { max-width: 100%; }
.occ-stage { position: relative; display: block; max-width: 100%; line-height: 0; user-select: none; -webkit-user-select: none; touch-action: none; border: 1px solid var(--line); background: #fff; }
.occ-img { width: 100%; height: auto; display: block; pointer-events: none; }
.occ-layer { position: absolute; inset: 0; }
.occ-m { position: absolute; box-sizing: border-box; }
.occ-hidden { background: #f0c24b; border: 2px solid var(--c36-ink, #8a6a00); }
.occ-target { background: #f0c24b; border: 3px solid var(--accent); box-shadow: 0 0 0 3px rgba(31,95,139,.35); display: grid; place-items: center; }
.occ-q { font: 700 1.1rem/1 system-ui; color: #1d2433; }
.occ-open { background: rgba(46,160,67,.12); border: 3px solid #2e7d32; }
.occ-title { line-height: 1.3; margin-top: .3rem; }
.occ-edit { cursor: crosshair; outline-offset: 2px; }
.occ-edit-m { background: rgba(240,194,75,.82); border: 2px solid var(--c36-ink, #8a6a00); cursor: move; }
.occ-edit-m.occ-gsel { border-color: var(--accent); }
.occ-edit-m.occ-sel { border: 2px solid var(--accent); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
.occ-n { position: absolute; left: 2px; top: 1px; font: 700 .72rem/1 system-ui; background: #1d2433; color: #fff; padding: .1rem .3rem; border-radius: 4px; pointer-events: none; }
.occ-h { position: absolute; width: .8rem; height: .8rem; background: #fff; border: 2px solid var(--accent); border-radius: 3px; box-sizing: border-box; }
.occ-h-nw { left: -.45rem; top: -.45rem; cursor: nwse-resize; } .occ-h-n { left: calc(50% - .4rem); top: -.45rem; cursor: ns-resize; } .occ-h-ne { right: -.45rem; top: -.45rem; cursor: nesw-resize; }
.occ-h-e { right: -.45rem; top: calc(50% - .4rem); cursor: ew-resize; } .occ-h-se { right: -.45rem; bottom: -.45rem; cursor: nwse-resize; } .occ-h-s { left: calc(50% - .4rem); bottom: -.45rem; cursor: ns-resize; }
.occ-h-sw { left: -.45rem; bottom: -.45rem; cursor: nesw-resize; } .occ-h-w { left: -.45rem; top: calc(50% - .4rem); cursor: ew-resize; }
.occ-crop { cursor: crosshair; }
.occ-croprect { position: absolute; border: 2px dashed var(--accent); background: rgba(31,95,139,.12); box-shadow: 0 0 0 9999px rgba(0,0,0,.35); pointer-events: none; }
.occ-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; }
.occ-left { overflow: auto; max-height: 75vh; }
@media (max-width: 62rem) { .occ-grid { grid-template-columns: 1fr; } }
.occ-target-row { display: flex; align-items: center; gap: .4rem; padding: .3rem; border: 1px solid var(--line); border-radius: 8px; margin-bottom: .3rem; cursor: pointer; }
.occ-target-row.on { border-color: var(--accent); background: var(--accent-soft); }
.occ-target-row input { flex: 1; min-width: 0; }
.occ-tn { background: #1d2433; color: #fff; border-radius: 50%; width: 1.5rem; height: 1.5rem; display: inline-grid; place-items: center; font-size: .8rem; flex: none; }
.occ-paste { border: 2px dashed var(--line); border-radius: 10px; padding: .8rem 1.2rem; color: var(--ink-2); }
.occ-paste:focus { border-color: var(--accent); }
@media (pointer: coarse) { .occ-h { width: 1.3rem; height: 1.3rem; } .occ-h-nw { left: -.7rem; top: -.7rem; } .occ-h-ne { right: -.7rem; top: -.7rem; } .occ-h-se { right: -.7rem; bottom: -.7rem; } .occ-h-sw { left: -.7rem; bottom: -.7rem; } }
.occ-target-row { flex-wrap: wrap; }
.occ-target-row input { flex: 1 1 9rem; min-width: 0; }
.occ-target-row button, .occ-target-row .small { white-space: nowrap; }
.pomo-breath { width: 5rem; height: 5rem; margin: .8rem auto .2rem; border-radius: 50%; background: var(--accent-soft); border: 3px solid var(--accent); transform: scale(.6); transition-property: transform; transition-timing-function: ease-in-out; }
.pomo-breath.in { transform: scale(1.15); } .pomo-breath.out { transform: scale(.6); }
@media (prefers-reduced-motion: reduce) { .pomo-breath { transition: none !important; } }
/* Tactile : cases à cocher et étiquettes faciles à toucher ; sélecteurs de fichiers présentés comme des boutons */
.btn input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
label.btn { position: relative; cursor: pointer; }
label.btn:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) {
  input[type=checkbox], input[type=radio] { width: 1.5rem; height: 1.5rem; }
  .check { min-height: 44px; }
}

/* Dictée : états du micro et indication à côté du champ */
.dict-hint { display: block; font-size: .82rem; color: var(--accent); margin-top: .25rem; position: static; }
button.mic.preparing { animation: micpulse 1.2s infinite; border-color: var(--accent); color: var(--accent); }

/* Menu : groupe repliable « Plus » et onglets de rubrique */
#nav-list .nav-more > summary { display: flex; align-items: center; gap: .75rem; padding: .55rem .7rem; border-radius: 8px; cursor: pointer; color: var(--ink-2); list-style: none; }
#nav-list .nav-more > summary::-webkit-details-marker { display: none; }
#nav-list .nav-more > summary::after { content: '▾'; margin-left: auto; font-size: .8em; transition: transform .15s; }
#nav-list .nav-more:not([open]) > summary::after { transform: rotate(-90deg); }
#nav-list .nav-more > summary:hover { background: var(--surface-2); }
#nav-list .nav-more > ul { list-style: none; margin: 2px 0 0 .6rem; padding: 0 0 0 .4rem; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
#nav-list .nav-more > ul a { padding: .45rem .6rem; font-size: .93em; }
.page-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1rem; border-bottom: 1px solid var(--line); }
.page-tabs a { padding: .55rem .9rem; border-radius: 8px 8px 0 0; color: var(--ink-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.page-tabs a:hover { background: var(--surface-2); }
.page-tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--accent-soft); box-shadow: inset 0 -3px 0 var(--accent); }
.page-tabs a, .ak-tab { gap: .45rem; }
.ak-tab { display: inline-flex; align-items: center; }
.page-tabs .ico, .ak-tab .ico { width: 1.15rem; height: 1.15rem; flex: none; }
.page-tabs .ico svg, .ak-tab .ico svg { width: 100%; height: 100%; }
/* Carnet d'erreurs */
.err-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem; margin: .6rem 0 1rem; }
.err-how > div { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.err-how .n { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; display: grid; place-items: center; }
.err-card .err-q { font-weight: 500; margin: .5rem 0 .2rem; }
.err-card .err-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }
.err-card details { margin-top: .4rem; }
.err-card details > summary { cursor: pointer; font-weight: 600; padding: .4rem 0; }
/* Quatrième de couverture d'un chapitre */
.blurb { margin: 1rem 0; border-left: 4px solid var(--accent); background: var(--accent-soft); }
.blurb .blurb-hook { font-size: 1.15rem; font-weight: 600; line-height: 1.35; margin: .3rem 0 .5rem; font-family: Georgia, 'Times New Roman', serif; }
.blurb .blurb-text { margin: 0 0 .6rem; line-height: 1.55; }
.blurb-gain { margin: .25rem 0 0; padding-left: 1.2rem; }
.blurb-gain li { margin: .15rem 0; }
.where .blurb-hook { font-size: 1.05rem; font-weight: 600; font-family: Georgia, 'Times New Roman', serif; }
/* Vidéos d'aide YouTube */
.yt-logo { display: inline-flex; width: 1.7rem; height: 1.2rem; flex: none; vertical-align: middle; }
.yt-logo svg { width: 100%; height: 100%; }
.videos-help { margin-top: 2rem; border: 1px solid var(--line); border-radius: 12px; padding: .4rem 1rem 1rem; background: var(--surface); }
.videos-help > summary { cursor: pointer; font-weight: 600; padding: .7rem 0; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.yt-btn { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; }
.info-btn { width: 2.2rem; height: 2.2rem; min-height: 0; border-radius: 50%; padding: 0; font-weight: 700; font-style: italic; font-family: Georgia, serif; }
.dur-step { align-items: center; margin-top: .5rem; } .card .dur-step label.small { display: flex; flex-direction: row; align-items: center; gap: .5rem; white-space: nowrap; margin: 0; } /* « ou tape : [45] min » sur UNE ligne (la règle « .card label.small » le mettait en colonne) */
.dur-big { min-width: 5rem; text-align: center; font-size: 1.4rem; }
.dur-out { font: inherit; }
/* Parties d'une page de chapitre : un bloc coloré et une icône par grande partie */
.sec { --sec: var(--c01, #2563eb); --sec-on: var(--c01-on, #fff); margin: 1.6rem 0; padding: 1rem 1.1rem 1.2rem; border: 1px solid color-mix(in srgb, var(--sec) 30%, var(--line)); border-left: 6px solid var(--sec); border-radius: 12px; background: color-mix(in srgb, var(--sec) var(--sec-tint, 5%), var(--card-bg, var(--surface))); scroll-margin-top: 1rem; }
.sec-cours { --sec: var(--c01, #2563eb); --sec-on: var(--c01-on, #fff); } .sec-qcm { --sec: var(--c02, #16a34a); --sec-on: var(--c02-on, #fff); } .sec-epreuve { --sec: var(--c03, #d97706); --sec-on: var(--c03-on, #fff); } .sec-ed { --sec: var(--c04, #9333ea); --sec-on: var(--c04-on, #fff); }
.sec-guide { --sec: var(--c05, #0d9488); --sec-on: var(--c05-on, #fff); } .sec-document { --sec: var(--c11, #6b7280); --sec-on: var(--c11-on, #fff); } .sec-notice { --sec: var(--c12, #6b7280); --sec-on: var(--c12-on, #fff); } .sec-obj { --sec: var(--c06, #7c3aed); --sec-on: var(--c06-on, #fff); } .sec-notes { --sec: var(--c07, #ca8a04); --sec-on: var(--c07-on, #fff); } .sec-video { --sec: var(--c08, #dc2626); --sec-on: var(--c08-on, #fff); }
.sec-head { display: flex; gap: .8rem; align-items: center; margin-bottom: .8rem; }
.sec-head h2 { margin: 0; font-size: 1.25rem; color: color-mix(in srgb, var(--sec) 65%, var(--ink)); }
.sec-head p { margin: .1rem 0 0; }
.sec-ico { flex: none; width: 2.8rem; height: 2.8rem; border-radius: 12px; display: grid; place-items: center; background: var(--sec); color: var(--sec-on, #fff); }
.sec-ico .ico { width: 1.6rem; height: 1.6rem; }
.sec-ico .ico svg { width: 100%; height: 100%; }
.sec-jump { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 1rem 0 0; position: sticky; top: 0; z-index: 5; padding: .5rem 0; background: var(--bg, var(--surface)); }
.sec-chip { --sec: var(--c01, #2563eb); display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--sec) 45%, var(--line)); color: color-mix(in srgb, var(--sec) 65%, var(--ink)); background: color-mix(in srgb, var(--sec) 8%, var(--surface)); font-weight: 600; }
.sec-chip .ico { width: 1.1rem; height: 1.1rem; }
.sec-chip .ico svg { width: 100%; height: 100%; }
.sec-chip.sec-cours { --sec: var(--c01, #2563eb); --sec-on: var(--c01-on, #fff); } .sec-chip.sec-qcm { --sec: var(--c02, #16a34a); --sec-on: var(--c02-on, #fff); } .sec-chip.sec-epreuve { --sec: var(--c03, #d97706); --sec-on: var(--c03-on, #fff); } .sec-chip.sec-ed { --sec: var(--c04, #9333ea); --sec-on: var(--c04-on, #fff); }
.sec-chip.sec-obj { --sec: var(--c06, #7c3aed); --sec-on: var(--c06-on, #fff); } .sec-chip.sec-notes { --sec: var(--c07, #ca8a04); --sec-on: var(--c07-on, #fff); } .sec-chip.sec-video { --sec: var(--c08, #dc2626); --sec-on: var(--c08-on, #fff); }
.sec-chip.sec-guide { --sec: var(--c05, #0d9488); --sec-on: var(--c05-on, #fff); } .sec-chip.sec-document { --sec: var(--c11, #6b7280); } .sec-chip.sec-notice { --sec: var(--c12, #6b7280); }
.videos-help.sec { --sec: var(--c08, #dc2626); --sec-on: var(--c08-on, #fff); }
.videos-help.sec > summary .ico { color: var(--sec); }
/* Compagnon (galet) */
.mascotte-widget { position: fixed; right: 12px; bottom: 12px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; pointer-events: none; max-width: min(320px, calc(100vw - 24px)); }
.mascotte-widget[hidden] { display: none; }
.mascotte-figure { position: relative; width: 110px; height: 110px; pointer-events: auto; }
.mascotte-body { width: 110px; height: 110px; padding: 0; border: 0; background: transparent; cursor: pointer; min-height: 0; border-radius: 18px; }
.mascotte-body canvas { width: 110px; height: 110px; display: block; filter: drop-shadow(0 3px 5px rgb(0 0 0 / .18)); }
.mascotte-body:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mascotte-hide { position: absolute; top: -4px; right: -4px; width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 50%; line-height: 1; font-size: 1rem; opacity: 0; transition: opacity .15s; background: var(--surface); }
.mascotte-figure:hover .mascotte-hide, .mascotte-hide:focus-visible { opacity: 1; }
@media (hover: none) { .mascotte-hide { opacity: .85; } }
.mascotte-bubble { pointer-events: auto; position: relative; background: var(--surface); color: var(--ink); border: 2px solid var(--ink-2); border-radius: 16px; padding: .6rem .8rem; font-size: .95rem; line-height: 1.4; box-shadow: 0 4px 14px rgb(0 0 0 / .15); margin-right: 18px; cursor: pointer; }
.mascotte-bubble[hidden] { display: none; }
.mascotte-bubble::after { content: ''; position: absolute; right: 30px; bottom: -11px; width: 18px; height: 18px; background: var(--surface); border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); }
.mascotte-spark { position: absolute; left: -6px; top: 4px; font-weight: 700; color: var(--c21-ink, #b45309); background: var(--c21-soft, #fff7d6); border: 1px solid var(--c21, #f0c36d); border-radius: 999px; padding: .05rem .5rem; opacity: 0; transform: translateY(6px); pointer-events: none; }
.mascotte-spark.on { animation: sparkUp 1.8s ease-out forwards; }
@keyframes sparkUp { 0% { opacity: 0; transform: translateY(8px); } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px); } }
@media (prefers-reduced-motion: reduce) { .mascotte-spark.on { animation: none; opacity: 1; transform: none; } }
@media (max-width: 600px) { .mascotte-figure, .mascotte-body, .mascotte-body canvas { width: 78px; height: 78px; } }
/* le minuteur Pomodoro ne doit pas passer sous la mascotte */
.pomo-pill { bottom: 130px; }
/* carte « résumé » dite par la mascotte */
.mascotte-card { display: flex; gap: 1.2rem; align-items: flex-start; margin: 1rem 0; background: var(--accent-soft); border-left: 4px solid var(--accent); }
.mascotte-card-side { flex: none; width: 150px; text-align: center; }
.mascotte-card-figure { width: 150px; height: 150px; display: block; }
.mascotte-card-bubble { position: relative; flex: 1; min-width: 0; background: var(--surface); border: 2px solid var(--ink-2); border-radius: 18px; padding: .8rem 1rem; }
.mascotte-card-bubble::before { content: ''; position: absolute; left: -11px; top: 56px; width: 18px; height: 18px; background: var(--surface); border-left: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); }
@media (max-width: 640px) { .mascotte-card { flex-direction: column; align-items: center; } .mascotte-card-bubble::before { left: calc(50% - 9px); top: -11px; border: 0; border-top: 2px solid var(--ink-2); border-left: 2px solid var(--ink-2); } }
/* page « Ma mascotte » */
.mascotte-stage { text-align: center; }
.mascotte-preview { width: 260px; height: 260px; max-width: 100%; }
.mascotte-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .6rem; }
.mascotte-opt { display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; text-align: left; padding: .7rem .8rem; }
.mascotte-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.mascotte-colors { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.swatch { width: 2.6rem; height: 2.6rem; min-height: 0; border-radius: 50%; border: 2px solid var(--line); padding: 0; }
.swatch.on { outline: 3px solid var(--accent); outline-offset: 2px; }
.mascotte-slot { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.mascotte-opt, .mascotte-opt strong, .mascotte-opt span { color: var(--ink); }
.mascotte-opt:disabled, .mascotte-opt:disabled * { color: var(--ink-2); }
.mascotte-opt.on, .mascotte-opt.on * { color: var(--ink); }
@media (pointer: coarse) {
  .mascotte-hide { width: 40px; height: 40px; top: -16px; right: -16px; font-size: 1.3rem; }
  .info-btn { width: 40px; height: 40px; }
}
/* Deux familles de mascottes séparées sur la page « Ma mascotte » */
.mascotte-pack { margin: 1.2rem 0; }
.mascotte-pack h3 { margin: 1rem 0 .5rem; font-size: 1rem; }
.mascotte-chars { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); margin: .8rem 0; }
.mascotte-char { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .7rem .6rem; text-align: center; color: var(--ink); }
.mascotte-char img { width: 100%; max-width: 9rem; height: auto; aspect-ratio: 1; object-fit: contain; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-radius: 12px; }
.mascotte-char.on { border-color: var(--accent); background: var(--accent-soft); outline: 2px solid var(--accent); }
.mascotte-char * { color: inherit; }
/* Mon programme */
.plan-task { display: flex; gap: .9rem; align-items: flex-start; margin: 0; }
.plan-task.pause { background: transparent; border-style: dashed; }
.plan-task.st-termine { opacity: .75; border-left: 4px solid var(--c16, #16a34a); }
.plan-task.st-partiel, .plan-task.st-a_reprendre { border-left: 4px solid var(--c17, #d97706); }
.plan-task.st-reporte { opacity: .55; }
.plan-ico { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.plan-ico .ico { width: 1.5rem; height: 1.5rem; }
.plan-ico .ico svg { width: 100%; height: 100%; }
.plan-ico[data-kind="lire"] { background: color-mix(in srgb, var(--c01, #2563eb) 14%, var(--surface)); color: var(--c01-ink, #2563eb); }
.plan-ico[data-kind="se_tester"], .plan-ico[data-kind="questions"] { background: color-mix(in srgb, var(--c02, #16a34a) 14%, var(--surface)); color: var(--c02-ink, #16a34a); }
.plan-ico[data-kind="erreurs"] { background: color-mix(in srgb, var(--c10, #dc2626) 12%, var(--surface)); color: var(--c10-ink, #dc2626); }
.plan-ico[data-kind="cartes"], .plan-ico[data-kind="cartes_chapitre"] { background: color-mix(in srgb, var(--c09, #9333ea) 14%, var(--surface)); color: var(--c09-ink, #9333ea); }
.plan-ico[data-kind="feuille_blanche"] { background: color-mix(in srgb, var(--c07, #ca8a04) 16%, var(--surface)); color: var(--c07-ink, #a16207); }
.plan-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.seg-group { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.load-ok { border-left: 4px solid var(--c16, #16a34a); } .load-serre { border-left: 4px solid var(--c17, #d97706); } .load-trop_charge { border-left: 4px solid var(--c18, #dc2626); } .load-inconnu { border-left: 4px solid var(--line); }
.prog-chapters { max-height: 14rem; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; }
.avail-row { align-items: center; }
/* Rattachement des questions */
.ql-subject { margin: 1rem 0; border: 1px solid var(--line); border-radius: 12px; padding: .3rem 1rem 1rem; background: var(--surface); }
.ql-subject > summary { cursor: pointer; padding: .7rem 0; }
.ql-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1rem; align-items: start; margin: 0; }
.ql-to { display: flex; flex-direction: column; gap: .4rem; }
.ql-to select { max-width: 100%; }
@media (max-width: 760px) { .ql-row { grid-template-columns: 1fr; } }
.ql-from, .ql-to { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { .ql-row { grid-template-columns: minmax(0, 1fr); } }
.plan-ico[data-kind="diagnostic"] { background: color-mix(in srgb, var(--c02, #0ea5e9) 14%, var(--surface)); color: var(--c02-ink, #0284c7); }
/* Mes chapitres : faits observables */
.chap-state { margin: 0; }
.facts { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin-top: .4rem; }
.fact { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; font-size: .85rem; background: var(--surface-2); border: 1px solid var(--line); }
.fact .ico { width: 1rem; height: 1rem; }
.fact .ico svg { width: 100%; height: 100%; }
.fact.on { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.fact.none { color: var(--ink-2); background: transparent; border-style: dashed; }
.fact.warn { background: color-mix(in srgb, var(--c17, #d97706) 14%, var(--surface)); border-color: var(--c17, #d97706); }
.week-day { margin: 0; }
.week-day.today { border-left: 4px solid var(--accent); }
/* Menu : séparation des outils de contrôle ; premiers pas */
#nav-list .nav-more .nav-sep { margin: .5rem 0 .1rem; padding: 0 .6rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
/* Liste cochable : vraies cases carrées, texte plus grand ; une étape faite = case pleine + texte barré */
.steps { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.steps li { display: flex; gap: .85rem; align-items: center; padding: .65rem .85rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 1.05rem; line-height: 1.35; }
.steps li a { color: var(--ink); font-weight: 600; text-decoration: none; flex: 1; }
.steps li a:hover { text-decoration: underline; }
.steps li.done { background: transparent; color: var(--ink-2); text-decoration: line-through; }
.steps .check-mark { flex: none; width: 1.7rem; height: 1.7rem; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border: 2.5px solid var(--accent); border-radius: 6px; background: var(--surface); color: var(--accent-ink); font-size: 1.15rem; font-weight: 800; line-height: 1; }
.steps li.done .check-mark { background: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Mascotte réduite (choix ou pages denses) */
.mascotte-size { position: absolute; top: -4px; left: -4px; width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 50%; line-height: 1; font-size: .85rem; opacity: 0; transition: opacity .15s; background: var(--surface); }
.mascotte-figure:hover .mascotte-size, .mascotte-size:focus-visible { opacity: 1; }
@media (hover: none) { .mascotte-size { opacity: .85; } }
@media (pointer: coarse) { .mascotte-size { width: 40px; height: 40px; top: -16px; left: -16px; } }
.mascotte-widget.compact .mascotte-figure, .mascotte-widget.compact .mascotte-body, .mascotte-widget.compact .mascotte-body canvas { width: 52px; height: 52px; }
.mascotte-widget.compact { right: 8px; bottom: 8px; }
.mascotte-widget.tiny .mascotte-figure, .mascotte-widget.tiny .mascotte-body, .mascotte-widget.tiny .mascotte-body canvas { width: 30px; height: 30px; }
.mascotte-widget.tiny { right: 6px; bottom: 6px; }
.mascotte-widget.tiny .mascotte-hide, .mascotte-widget.tiny .mascotte-size, .mascotte-widget.tiny .mascotte-edit, .mascotte-widget.tiny .mascotte-bubble, .mascotte-widget.tiny .mascotte-menu { display: none; }
.mascotte-widget.compact .mascotte-bubble { max-width: 220px; font-size: .85rem; }
.fiable-help { margin: .3rem 0 1rem; }
.fiable-help > summary { cursor: pointer; color: var(--accent); }

/* ---- Cartes : types de notes, rendu HTML des cartes, saisie de la réponse (lot 1) */
.ak-html .ak-html-body { overflow-wrap: anywhere; }
.ak-html img, .ak-html video { max-width: 100%; height: auto; }
.ak-html hr#answer { border: 0; border-top: 1px dashed var(--line); margin: .9rem 0; }
.ak-html table { border-collapse: collapse; } .ak-html td, .ak-html th { border: 1px solid var(--line); padding: .2rem .5rem; }
.ak-html .cloze { font-weight: 700; color: var(--accent); border-bottom: 2px solid var(--accent); }
.ak-html .cloze-inactive { color: inherit; }
.ak-html .ak-hint { font-size: .9rem; }
.ak-html .ak-err { color: var(--bad); font-size: .85rem; }
.ak-html .ak-tts { cursor: pointer; padding: 0 .3rem; border: 1px solid var(--line); border-radius: 6px; }
.ak-html .ak-tts:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ak-type-input { width: 100%; margin-top: .5rem; font-size: 1.1rem; }
.ak-typecmp { margin-top: .5rem; padding: .5rem .8rem; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 6px; }
.ak-typeline { font-family: ui-monospace, Consolas, monospace; font-size: 1.15rem; letter-spacing: .02em; margin: .1rem 0 .4rem; overflow-wrap: anywhere; }
.ak-typeline .ok { color: var(--ok); }
.ak-typeline .bad { color: var(--bad); background: var(--bad-soft); text-decoration: underline wavy; }
.ak-typeline .missing { color: var(--warn); background: var(--warn-soft); text-decoration: underline dotted; font-weight: 700; }
.ak-code { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: .92rem; }
.ak-field-row { padding: .4rem 0; border-top: 1px solid var(--line); }
.ak-type-row { margin: .5rem 0; }
/* ---- Cartes : éditeur riche, sons, formules (lot 8) */
.ak-rf { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ak-rf-bar { display: flex; flex-wrap: wrap; gap: .2rem; padding: .3rem; border-bottom: 1px solid var(--line); background: var(--surface-2); border-radius: 10px 10px 0 0; align-items: center; }
.ak-rf-btn { min-width: 2.2rem; padding: .2rem .4rem; } .ak-rf-btn.rec, .ak-rf-bar button.rec { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.ak-rf-color { width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--line); border-radius: 6px; }
.ak-rf-edit { font-weight: 400; min-height: 5rem; padding: .6rem .8rem; outline: none; overflow-wrap: anywhere; border-radius: 0 0 10px 10px; } .ak-rf-edit:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.ak-rf-edit img { max-width: 100%; height: auto; cursor: pointer; } .ak-rf-edit img:hover { outline: 2px dashed var(--accent); }
.ak-rf-html { width: 100%; border: 0; border-radius: 0 0 10px 10px; }
.ak-rf-img { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .4rem .6rem; border-top: 1px dashed var(--line); }
.ak-tagwrap { position: relative; } .ak-tagsug { position: absolute; z-index: 25; left: 0; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); display: grid; padding: .2rem; }
.ak-tagsug button { text-align: left; padding: .3rem .5rem; }
.ak-html .ak-sound, .ak-sound { display: inline-block; cursor: pointer; padding: 0 .45rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.ak-sound:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ak-math.katex-display, div.ak-math { overflow-x: auto; overflow-y: hidden; max-width: 100%; }

/* ---- Cartes : explorateur (lot 4) */
.ak-layout { display: grid; grid-template-columns: 16rem minmax(0, 1fr) 22rem; gap: 1rem; align-items: start; margin-top: .6rem; }
.ak-layout > .ak-panel[hidden] { display: none; }
.ak-layout:has(.ak-panel[hidden]) { grid-template-columns: 16rem minmax(0, 1fr); }
.ak-sidecol .ak-sidewrap > summary { cursor: pointer; display: none; }
.ak-side { border: 1px solid var(--line); border-radius: 10px; padding: .5rem; background: var(--surface); max-height: 75vh; overflow: auto; }
.ak-sidesec > summary { cursor: pointer; font-weight: 600; padding: .25rem 0; }
.ak-sidelist { list-style: none; margin: 0; padding: 0; }
.ak-sidebtn { text-align: left; width: 100%; padding-top: .15rem; padding-bottom: .15rem; overflow-wrap: anywhere; }
.ak-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ak-table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.ak-table th, .ak-table td { padding: .35rem .55rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; max-width: 22rem; overflow-wrap: anywhere; }
.ak-table th { position: sticky; top: 0; background: var(--surface-2); white-space: nowrap; }
.ak-sortbtn { font-weight: 600; color: inherit; }
.ak-table tr.ak-row { cursor: pointer; } .ak-table tr.ak-row:hover { background: var(--surface-2); }
.ak-table tr.ak-row.sel { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: -2px; }
.ak-table tr.ak-row.susp td { opacity: .65; } .ak-table tr.ak-row.del td { text-decoration: line-through; opacity: .6; }
.ak-table tr.ak-row:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.ak-c-sel { width: 2rem; } .ak-c-st { white-space: nowrap; width: 5rem; }
.ak-pager { margin: .6rem 0; gap: .6rem; align-items: center; }
.ak-panel { position: sticky; top: .5rem; max-height: 85vh; overflow: auto; display: grid; gap: .6rem; }
@media (max-width: 1100px) { .ak-layout, .ak-layout:has(.ak-panel[hidden]) { grid-template-columns: minmax(0, 1fr); } .ak-sidecol .ak-sidewrap > summary { display: inline-block; } .ak-panel { position: static; } .ak-side { max-height: 50vh; } }

/* ---- Cartes : drapeaux, minuteur (lot 3) */
.ak-flag { font-weight: 700; } .ak-flag.f1, .ak-flagbtn.f1 { color: #d12f2f; } .ak-flag.f2, .ak-flagbtn.f2 { color: #c96a00; } .ak-flag.f3, .ak-flagbtn.f3 { color: #1d7a3a; } .ak-flag.f4, .ak-flagbtn.f4 { color: #1f5fbf; }
.ak-flag.f5, .ak-flagbtn.f5 { color: #c2268f; } .ak-flag.f6, .ak-flagbtn.f6 { color: #0a7f85; } .ak-flag.f7, .ak-flagbtn.f7 { color: #7a3fc4; }
.ak-flagmenu { position: relative; display: inline-block; } .ak-flagmenu summary { cursor: pointer; }
.ak-flagmenu-body { position: absolute; z-index: 20; display: grid; gap: .1rem; padding: .4rem; min-width: 13rem; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.ak-timer { margin-right: .8rem; font-variant-numeric: tabular-nums; }

/* ---- Cartes : paquets hiérarchiques (lot 2) */
.ak-decks { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.ak-deck-head, .ak-deck-row { display: grid; grid-template-columns: minmax(0, 1fr) 4.2rem 5.6rem 4.4rem auto; gap: .4rem; align-items: center; padding: .45rem .7rem; }
.ak-deck-head { background: var(--surface-2); }
.ak-deck-row { border-top: 1px solid var(--line); }
.ak-deck-row:hover { background: var(--surface-2); }
.ak-deck-name { padding-left: calc(var(--depth, 0) * 1.3rem); display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; min-width: 0; }
.ak-deck-name a { font-weight: 600; overflow-wrap: anywhere; }
.ak-toggle { width: 1.5rem; min-height: 1.5rem; padding: 0; text-align: center; display: inline-block; }
.ak-decks .n { text-align: right; font-variant-numeric: tabular-nums; }
.ak-decks .n.new { color: var(--accent); font-weight: 700; } .ak-decks .n.lrn { color: var(--bad); font-weight: 700; } .ak-decks .n.rev { color: var(--ok); font-weight: 700; }
.ak-decks .n.zero { color: var(--ink-2); font-weight: 400; opacity: .7; }
.ak-deck-actions { display: flex; gap: .3rem; align-items: center; justify-content: flex-end; }
.ak-menu { position: relative; } .ak-menu summary { cursor: pointer; padding: .2rem .6rem; border: 1px solid var(--line); border-radius: 8px; list-style: none; }
.ak-menu-body { position: absolute; right: 0; z-index: 20; min-width: 15rem; display: grid; gap: .2rem; padding: .5rem; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.ak-menu-body a, .ak-menu-body button { text-align: left; padding: .35rem .5rem; }
@media (max-width: 640px) {
  .ak-deck-head, .ak-deck-row { grid-template-columns: minmax(0, 1fr) 2.6rem 2.6rem 2.6rem; }
  .ak-deck-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .ak-deck-head span:last-child { display: none; }
}
/* [hidden] doit toujours gagner sur les classes d'affichage (barre d'actions, panneau, avis) */
[hidden] { display: none !important; }
.ak-sidelist li.row { flex-wrap: nowrap; justify-content: space-between; gap: .3rem; }
/* ---- Cartes : actions en lot, informations, outils (lot 5) */
.ak-bulkbar { gap: .4rem; align-items: center; }
.ak-bulkbar .ak-menu summary { display: inline-block; }
.ak-menuitem { display: block; width: 100%; text-align: left; padding: .35rem .5rem; }
.ak-menu-body { z-index: 30; }
.ak-info { border-collapse: collapse; width: 100%; } .ak-info th { text-align: left; font-weight: 600; padding: .25rem .6rem .25rem 0; white-space: nowrap; vertical-align: top; } .ak-info td { padding: .25rem 0; }
.ak-undo { gap: .3rem; } .ak-undo button { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tr.del td { text-decoration: line-through; opacity: .6; }
/* ---- Schémas masqués : formes, couleurs réglables (lot 9) */
.occ-stage { container-type: inline-size; }
.occ-hidden { background: var(--occ-inactive, var(--c36, #f0c24b)); border: var(--occ-line, 2px) solid var(--c36-ink, #8a6a00); }
.occ-target { background: var(--occ-active, var(--c36, #f0c24b)); border: calc(var(--occ-line, 2px) + 1px) solid var(--c37, var(--accent)); }
.occ-open { background: color-mix(in srgb, var(--occ-back, var(--c16, #2e7d32)) 14%, transparent); border: calc(var(--occ-line, 2px) + 1px) solid var(--occ-back, var(--c16, #2e7d32)); }
.occ-ghost { background: transparent; border: var(--occ-line, 2px) dashed var(--c36-ink, #8a6a00); }
.occ-q { position: absolute; inset: 0; display: grid; place-items: center; }
.occ-s-ellipse { border-radius: 50%; }
.occ-m.occ-s-polygon { background: none !important; border: none !important; box-shadow: none !important; }
.occ-s-polygon svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.occ-s-polygon polygon { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.occ-hidden polygon { fill: var(--occ-inactive, var(--c36, #f0c24b)); stroke: var(--c36-ink, #8a6a00); stroke-width: var(--occ-line, 2px); }
.occ-target polygon { fill: var(--occ-active, var(--c36, #f0c24b)); stroke: var(--c37, var(--accent)); stroke-width: calc(var(--occ-line, 2px) + 1px); }
.occ-open polygon { fill: color-mix(in srgb, var(--occ-back, var(--c16, #2e7d32)) 14%, transparent); stroke: var(--occ-back, var(--c16, #2e7d32)); stroke-width: calc(var(--occ-line, 2px) + 1px); }
.occ-ghost polygon { fill: none; stroke: var(--c36-ink, #8a6a00); stroke-dasharray: 6 4; stroke-width: var(--occ-line, 2px); }
.occ-txt { display: block; width: 100%; height: 100%; overflow: hidden; line-height: 1.15; font-weight: 600; color: #1d2433; padding: 1px 3px; box-sizing: border-box; overflow-wrap: anywhere; }
.occ-open .occ-txt, .occ-ghost .occ-txt { color: var(--ink-2, #475066); font-weight: 500; }
.occ-edit-m { background: color-mix(in srgb, var(--occ-inactive, var(--c36, #f0c24b)) 82%, transparent); }
.occ-edit-m polygon { fill: color-mix(in srgb, var(--occ-inactive, var(--c36, #f0c24b)) 82%, transparent); stroke: var(--c36-ink, #8a6a00); stroke-width: 2px; }
.occ-edit-m.occ-sel polygon, .occ-edit-m.occ-gsel polygon { stroke: var(--accent); }
.occ-vh { position: absolute; width: .9rem; height: .9rem; margin: -.45rem 0 0 -.45rem; background: #fff; border: 2px solid var(--accent); border-radius: 50%; box-sizing: border-box; cursor: move; z-index: 2; }
.occ-pp { position: absolute; width: .7rem; height: .7rem; margin: -.35rem 0 0 -.35rem; background: var(--accent); border: 2px solid #fff; border-radius: 50%; pointer-events: none; z-index: 3; }
.occ-pendline { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.occ-pendline svg { width: 100%; height: 100%; display: block; }
.occ-pendline polyline { fill: rgba(31,95,139,.15); stroke: var(--accent); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-dasharray: 5 3; }
.occ-tool[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.occ-props { margin-top: .5rem; display: grid; gap: .4rem; }
.occ-props .row { flex-wrap: wrap; gap: .3rem; }
.occ-looks { margin: .6rem 0; }
.occ-col { display: inline-flex; align-items: center; gap: .4rem; }
.occ-col input { width: 2.2rem; height: 1.8rem; padding: 0; }
/* ---- Graphiques statistiques (lot 10) */
.ch-card { min-width: 0; }
.ch-svg { width: 100%; height: auto; display: block; }
.ch-svg text { fill: currentColor; font: 11px system-ui, sans-serif; }
.ch-tick { opacity: .8; }
.ch-grid { stroke: currentColor; stroke-opacity: .2; }
.ch-cum { stroke: #CC79A7; stroke-width: 2px; }
.ch-bar rect { transition: opacity .1s; } .ch-bar:hover rect, .ch-bar:focus rect { opacity: .72; } .ch-bar:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.ch-heat a:focus-visible rect { stroke: var(--accent); stroke-width: 2px; }
.ch-plot { overflow-x: auto; }
.ch-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0; padding: 0; font-size: .85rem; }
.ch-sw { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; vertical-align: -1px; }
.ch-kind { font-size: .7rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px; border: 1px solid currentColor; vertical-align: middle; }
.ch-kind-obs { color: #0072B2; } .ch-kind-est { color: #8a5a00; } .ch-kind-now { color: #4b5563; } .ch-kind-plan { color: #007a5a; }
@media (prefers-color-scheme: dark) { .ch-kind-obs { color: #56B4E9; } .ch-kind-est { color: #E69F00; } .ch-kind-now { color: #cbd5e1; } .ch-kind-plan { color: #4fd1a8; } }
.ch-kpis { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
.ch-kpis strong { font-size: 1.15rem; }
.ch-table { overflow-x: auto; max-height: 22rem; } .ch-table table { border-collapse: collapse; width: 100%; font-size: .88rem; } .ch-table th, .ch-table td { padding: .25rem .5rem; border-bottom: 1px solid var(--line); text-align: left; }
.ch-root { --ch-empty: #e5e7eb; } @media (prefers-color-scheme: dark) { .ch-root { --ch-empty: #374151; } }
/* ---- Assistant de création (« Qu'est-ce que tu veux retenir ? ») */
.ak-cases { gap: .8rem; }
.ak-case { display: block; text-decoration: none; color: inherit; border: 2px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; min-height: 5.5rem; }
.ak-case:hover, .ak-case:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.ak-case:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
.ak-tip { display: flex; flex-wrap: wrap; gap: .3rem; align-items: baseline; background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: 8px; padding: .45rem .7rem; font-size: .92rem; }
.ak-rows { display: grid; gap: .4rem; }
.ak-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ak-rown { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #1d2433; color: #fff; display: inline-grid; place-items: center; font-size: .8rem; flex: none; }
.ak-row button { min-width: 2.2rem; min-height: 2.2rem; }
.ak-pv-face { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; min-height: 3rem; overflow-wrap: anywhere; background: var(--card, #fff); }
/* ---- Parcours guidé : habitude et séances */
.habit-card { border-left: 4px solid var(--accent); }
.celebrate { background: var(--accent-soft); border-radius: 10px; padding: .6rem .8rem; } .celebrate.pop { animation: ak-pop .5s ease-out; }
@keyframes ak-pop { from { transform: scale(.96); opacity: .4; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .celebrate { animation: none; } }
.guided-session.st-termine { opacity: .75; }
/* ---- Avancement du travail (jauge avec repère à 80 %) et budget temps */
.gauge-wrap { display: inline-flex; align-items: center; gap: .4rem; flex: 1 1 8rem; min-width: 7rem; max-width: 16rem; }
.gauge { position: relative; flex: 1; height: .7rem; background: var(--line); border-radius: 999px; overflow: visible; }
.gauge-fill { height: 100%; background: var(--accent); border-radius: 999px; min-width: 2px; } .gauge-fill.ok { background: var(--c16, #2e7d32); }
.gauge-mark { position: absolute; left: 80%; top: -.2rem; bottom: -.2rem; width: 2px; background: var(--ink); opacity: .7; }
.phase-card { border-left: 4px solid var(--accent); }
.budget-dlg { max-width: 28rem; }
/* ---- Simulation chronométrée */
.sim-clock { font-weight: 700; font-variant-numeric: tabular-nums; padding: .2rem .6rem; border-radius: 999px; border: 2px solid var(--accent); }
.sim-clock.urgent { border-color: var(--c18, #b42318); color: var(--c18-ink, #b42318); }

/* ---- Bibliothèque : une seule matière mise en avant, le reste reste calme ---- */
details.subject > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .7rem; list-style: none; }
details.subject > summary::-webkit-details-marker { display: none; }
details.subject > summary::before { content: '▸'; color: var(--ink-2); transition: transform .15s; display: inline-block; width: 1rem; }
details.subject[open] > summary::before { transform: rotate(90deg); }
.subj-name { font-weight: 700; }
.subj-count { margin-left: auto; font-weight: 400; }
details.subject h3 { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin: 1rem 0 .2rem; }
.focus-tag { display: inline-block; font-size: .74rem; font-weight: 600; padding: .05rem .55rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); vertical-align: middle; margin-left: .4rem; }
summary .focus-tag { margin-left: 0; }
/* Mise en valeur : le chapitre précis qu'on vient de lire (pas toute la matière) */
details.subject.is-exam { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.chap.is-last { position: relative; overflow: hidden; border-radius: 8px; padding-inline: .5rem; margin-inline: -.5rem; background: color-mix(in srgb, var(--surface) 78%, var(--accent) 22%); }
.chap.is-last::after { content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--accent) 28%, transparent) 50%, transparent 62%); animation: lightsweep 5s ease-in-out infinite; }
@keyframes lightsweep { 0% { transform: translateX(-100%); } 24%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .chap.is-last::after { animation: none; display: none; } }
.chap-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; justify-self: end; }
.chap > .chap-actions { justify-self: end; }
@media (max-width: 40rem) { .chap > .chap-actions { justify-self: start; } }
.qcm-btn { display: inline-flex; align-items: center; gap: .35rem; }

/* ---- Lecteur : commandes de lecture toujours visibles ---- */
.vc { display: inline-flex; align-items: center; gap: .3rem; padding-left: .6rem; margin-left: .2rem; border-left: 2px solid var(--line); }
.reader-bar { gap: .4rem; }
.reader-bar .bm-btn > span:last-child, .reader-bar > button[aria-label="Créer une carte"] > span:last-child, .reader-bar > button[aria-label="Créer un schéma masqué"] > span:last-child { display: none; }
.vc button { min-width: 2.4rem; min-height: 2.4rem; padding: .25rem .55rem; }
.vc .vc-play { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.vc-pop { position: absolute; top: calc(100% + .4rem); right: 0; z-index: 12; width: min(22rem, calc(100vw - 2rem)); display: grid; gap: .6rem; padding: .9rem 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .22); }
.vc-pop[hidden] { display: none; }
.vc-pop .field { margin: 0; }
.vc-pop input[type=range] { width: 100%; }
/* ---- Fin de lecture : QCM du chapitre et schémas repérés ---- */
.end-course { margin-top: 1.6rem; }
.fig-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); margin: .6rem 0; }
.fig-card { display: grid; gap: .3rem; align-content: start; padding: .5rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; }
.fig-card:hover, .fig-card:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.fig-card img { width: 100%; height: 8rem; object-fit: contain; background: #fff; border-radius: 6px; }
.fig-cap { font-size: .8rem; color: var(--ink-2); }
.fig-go { font-size: .85rem; font-weight: 600; color: var(--accent); }
/* ---- Annotations du lecteur : outils à droite, surligneur, capture ---- */
.annot-rail { position: fixed; right: .7rem; top: 40%; z-index: 9; display: grid; gap: .4rem; padding: .4rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 6px 20px rgba(0, 0, 0, .16); }
.rail-btn { position: relative; width: 3.3rem; min-height: 3.1rem; display: grid; place-items: center; gap: .1rem; padding: .3rem .2rem; border-radius: 10px; line-height: 1; }
.rail-btn .rail-t { font-size: .64rem; }
.rail-btn.rail-eye { min-height: 2.6rem; }
.rail-btn[aria-pressed="true"].rail-only { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.rail-n { position: absolute; top: 1px; right: 1px; min-width: 1.15rem; padding: 0 .25rem; font-size: .68rem; font-weight: 700; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.rail-n:empty { display: none; }
.rail-only[aria-pressed="true"] .rail-n { background: var(--accent-ink); color: var(--accent); }
@media (max-width: 70rem) { .annot-rail { top: auto; bottom: .7rem; left: .7rem; right: auto; display: flex; } }
.uh-pop { position: fixed; z-index: 40; display: flex; align-items: center; gap: .4rem; padding: .35rem .6rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 6px 22px rgba(0, 0, 0, .25); }
.uh-pop[hidden] { display: none; }
.uh-pop-t { font-size: .78rem; color: var(--ink-2); }
.uh-sw { width: 1.8rem; height: 1.8rem; min-height: 0; padding: 0; border-radius: 50%; background: var(--c); border: 2px solid rgba(0, 0, 0, .28); }
.uh-sw.sm { width: 1.15rem; height: 1.15rem; border-width: 1px; }
.uh-sw.cur { outline: 2px solid var(--ink); outline-offset: 1px; }
.uh-del { min-height: 0; padding: .25rem .35rem; border-radius: 50%; display: grid; place-items: center; }
.uh-del svg { width: 1.1rem; height: 1.1rem; }
.uh-layer { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; z-index: 2; }
.uh-rect { position: absolute; background: var(--c); opacity: .6; border-radius: 2px; }
mark.uh { background: color-mix(in srgb, var(--c) 75%, transparent); color: #111; border-radius: 2px; padding: 0; cursor: pointer; }
.uh-hidden .uh-layer { display: none; }
.uh-hidden mark.uh { background: transparent; color: inherit; cursor: auto; }
mark.uh.uh-pulse { outline: 3px solid var(--accent); outline-offset: 2px; }
.only-uh > .pdf-pane, .only-uh > .docx, .only-uh > .stack, .only-uh > .notice, .only-uh > .end-course, .only-uh > details { display: none; }
.uh-section { margin-top: 1.6rem; }
.uh-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin: .7rem 0; }
.uh-chip.on { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.uh-dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; background: var(--c); margin-right: .35rem; border: 1px solid rgba(0, 0, 0, .35); vertical-align: -.1rem; }
.uh-list { display: grid; gap: 1.2rem; }
.uh-item { border-left: 6px solid var(--c); padding: .6rem 1rem; border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--c) 16%, var(--surface)); }
.uh-item blockquote { margin: 0; font-size: 1.05rem; }
.uh-meta { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; margin-top: .55rem; }
.uh-recolor { display: inline-flex; gap: .3rem; align-items: center; }
.cap-ov { position: fixed; inset: 0; z-index: 60; cursor: crosshair; background: rgba(10, 20, 35, .28); touch-action: none; }
.cap-box { position: fixed; border: 2px dashed #fff; outline: 2px solid var(--accent); background: rgba(255, 255, 255, .14); pointer-events: none; }
.cap-hint { position: fixed; top: .8rem; left: 50%; transform: translateX(-50%); background: var(--surface); color: var(--ink); padding: .55rem .9rem; border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); max-width: min(42rem, 92vw); font-size: .92rem; pointer-events: none; }
.cap-dlg { width: min(46rem, 94vw); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); padding: 1.2rem; }
.cap-dlg::backdrop { background: rgba(0, 0, 0, .5); }
.cap-dlg .row, .cap-dlg .stack { margin-top: .8rem; }
.cap-prev { max-height: 48vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; text-align: center; }
.cap-prev img { max-width: 100%; height: auto; }
.rail-btn { width: 3.8rem; }
.rail-btn .rail-t { font-size: .6rem; white-space: nowrap; }
/* ---- Surlignages : ordre libre et thèmes ---- */
.uh-item { display: flex; gap: .6rem; align-items: flex-start; }
.uh-body { flex: 1; min-width: 0; }
.uh-handle { cursor: grab; color: var(--ink-2); font-size: 1.3rem; line-height: 1; padding: .1rem .2rem; user-select: none; }
.uh-handle:active { cursor: grabbing; }
.uh-mv { min-height: 0; padding: .1rem .5rem; border-radius: 6px; }
.uh-theme { display: grid; gap: .9rem; padding: .7rem .9rem .9rem; border: 2px solid color-mix(in srgb, var(--c) 70%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--c) 8%, var(--surface)); }
.uh-theme-h { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.uh-theme-t { font-weight: 700; font-size: 1.1rem; background: none; border: 1px dashed transparent; padding: .1rem .4rem; text-align: left; }
.uh-theme-t:hover, .uh-theme-t:focus-visible { border-color: var(--line); }
.uh-theme-in { font-weight: 700; font-size: 1.05rem; min-width: 14rem; }
.uh-theme-b { display: grid; gap: 1rem; }
.uh-over-before { box-shadow: 0 -5px 0 0 var(--accent); }
.uh-over-after { box-shadow: 0 5px 0 0 var(--accent); }
.uh-over-in { outline: 3px dashed var(--accent); outline-offset: 3px; border-radius: 10px; }
.uh-dragging { opacity: .45; }
.uh-end { min-height: 2rem; border-radius: 10px; }
.uh-masked { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; padding: .5rem .8rem; border: 1px dashed var(--line); border-radius: 8px; }
.week .tiles { margin-top: .3rem; }
/* Icône de cours à côté du résumé « Pourquoi ouvrir ce cours » */
.blurb-icon { float: right; width: 7.5rem; height: 7.5rem; margin: 0 0 .6rem 1.2rem; border-radius: 16px; background: #fff7eb; object-fit: cover; }
@media (max-width: 40rem) { .blurb-icon { width: 5rem; height: 5rem; margin-left: .8rem; } }
/* Liens de titres et colonne « Lire » rapprochée du nom, alignée d'une version à l'autre */
.chap-link { color: inherit; text-decoration: none; }
.chap-link:hover, .chap-link:focus-visible { text-decoration: underline; color: var(--accent); }
.file-list { display: grid; grid-template-columns: max-content max-content 1fr; gap: .75rem 0; justify-content: start; }
.file-list > .card { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; }
.file-list > .card > * { grid-column: 1 / -1; }
.file-list > .card > .file-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; column-gap: 15px; align-items: center; padding: .35rem 0; border-top: 1px solid var(--line); }
.file-row > div { max-width: min(60ch, 70vw); }
@media (max-width: 40rem) { .file-list { grid-template-columns: minmax(0, 1fr); } .file-list > .card, .file-list > .card > .file-row { grid-template-columns: minmax(0, 1fr) auto; } }
.blurb-icon { width: 11.5rem; height: 11.5rem; border-radius: 20px; }
@media (max-width: 40rem) { .blurb-icon { width: 7.5rem; height: 7.5rem; } }

/* Cours (gauche) et entraînement (droite) côte à côte, trait vertical entre les deux */
.sec-duo { display: grid; grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr); align-items: start; margin: 1.6rem 0; }
.sec-duo > .sec { margin: 0; }
.duo-sep { align-self: stretch; width: 4px; margin-inline: 1.1rem; border-radius: 4px; background: var(--line); opacity: .9; }
.file-list { grid-template-columns: minmax(0, max-content) max-content 1fr; }
@media (max-width: 62rem) { .sec-duo { display: block; } .sec-duo > .sec { margin: 1.6rem 0; } .duo-sep { display: none; } }

/* Reflet lumineux ponctuel sur une section (barre « Aller à ») */
.sec.sec-sweep { position: relative; overflow: hidden; }
.sec.sec-sweep::after { content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(105deg, transparent 36%, color-mix(in srgb, var(--sec) 38%, transparent) 50%, transparent 64%); animation: secsweep 1.1s ease-in-out 1; }
@keyframes secsweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sec.sec-sweep::after { animation: none; display: none; } }

.assist { margin: .2rem 0 .5rem; } .assist summary { cursor: pointer; } .assist .list li { gap: .6rem; }

.sec { scroll-margin-top: 4.5rem; }

/* Pomodoro : ambiance sonore visible, boutons secondaires discrets */
.pomo-dlg { max-width: 27rem; }
.pomo-ghost { border-color: transparent; background: transparent; color: var(--ink-2); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }
.pomo-ghost:hover { background: var(--surface-2, rgba(0,0,0,.05)); }
.pomo-sec { gap: .2rem; margin-top: .2rem; }
.pomo-amb { margin: .9rem 0 .2rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 12px; text-align: left; }
.pomo-amb-title { font-weight: 600; margin-bottom: .5rem; }
.pomo-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.pomo-chip { border-radius: 999px; padding: .35rem .8rem; font-size: .92rem; }
.pomo-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.pomo-chip.on::before { content: '♪ '; }
.pomo-vol { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }
.pomo-vol input { flex: 1; min-width: 0; }
.pomo-vol-out { min-width: 2.8rem; text-align: right; font-variant-numeric: tabular-nums; }
.pomo-amb-state { margin-top: .4rem; }

/* Cartes : onglets importants visibles, onglets rares sous « Plus » */
.ak-more { position: relative; }
.ak-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.ak-more > summary::-webkit-details-marker { display: none; }
.ak-more.has-current > summary { background: var(--accent-soft); border-color: var(--accent); font-weight: 700; color: var(--ink); }
.ak-more-menu { position: absolute; z-index: 20; top: calc(100% + .3rem); left: 0; min-width: 14rem; display: flex; flex-direction: column; gap: .1rem; padding: .35rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.ak-more-menu .ak-tab { border-radius: 8px; }
/* Lecture à haute voix des textes longs */
.reader-corner { position: absolute; top: .5rem; right: .5rem; z-index: 2; }
.ak-help, .ak-method, .card.blurb { position: relative; }
.ak-help > h3, .ak-method > h3 { padding-right: 3rem; }
.mascotte-card-bubble > .eyebrow { padding-right: 3rem; }
.page-reader { margin: .4rem 0 .8rem; }
/* Mascotte « fantôme » au-dessus d'un bouton */
.mascotte-figure, .mascotte-bubble { transition: opacity .15s; }
.mascotte-figure.ghost, .mascotte-bubble.ghost { opacity: .3; pointer-events: none !important; }
/* Présentation du cours plus compacte */
.mascotte-card-side { width: 110px; } .mascotte-card-figure { width: 110px; height: 110px; } .mascotte-card-side .sr-hide { display: none; }
.blurb-more { margin: .3rem 0; } .blurb-more > summary { cursor: pointer; font-weight: 600; font-size: .92rem; }
.blurb-icon { width: 9.5rem; height: 9.5rem; }
.mascotte-card-bubble .blurb-text { margin: 0 0 .4rem; }

/* Onglets des cartes : assez compacts pour tenir sur une seule rangée */
.ak-tabs { gap: .15rem; } .ak-tabs > .ak-tab, .ak-more > summary.ak-tab { padding: .45rem .65rem; } .ak-more-sep { display: none; }

/* Haut-parleurs discrets : petite icône dans le coin, sans rien déplacer */
.reader-corner.speaker-btn { width: 1.9rem; height: 1.9rem; min-width: 0; min-height: 0; padding: 0; background: transparent; border-color: transparent; box-shadow: none; opacity: .5; }
.reader-corner.speaker-btn:hover, .reader-corner.speaker-btn:focus-visible, .reader-corner.speaker-btn.speaking { opacity: 1; }
.reader-corner svg { width: 1.05rem; height: 1.05rem; }
.has-reader { position: relative; }
.has-reader > .reader-corner + * { padding-right: 2rem; }
.page-reader.reader-corner { top: .2rem; right: .2rem; }
.title-link { font: inherit; }

/* Icône du cours dans la présentation : bouton « i » juste dessous, petite phrase au clic */
.blurb-fig { float: right; width: 9.5rem; margin: 0 0 .6rem 1.2rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.blurb-fig .blurb-icon { float: none; margin: 0; width: 9.5rem; height: 9.5rem; }
.blurb-fig .info-btn { flex: none; }
.blurb-icon-note { margin: 0; padding: .45rem .6rem; border-radius: 10px; background: var(--info-soft, var(--accent-soft)); text-align: center; line-height: 1.35; }
@media (max-width: 40rem) { .blurb-fig, .blurb-fig .blurb-icon { width: 7.5rem; } .blurb-fig .blurb-icon { height: 7.5rem; } }

.blurb-icon-note { width: 14rem; max-width: 55vw; margin-inline: -2.25rem; position: relative; z-index: 1; }

/* Thèmes graphiques (voir public/theme.js) : fonds et icônes en image, uniquement si le thème en fournit */
body { background-image: var(--theme-bg-page, none); }
.nav { background-image: var(--theme-bg-nav, none); }
.ico.themed img { width: 100%; height: 100%; object-fit: contain; display: block; }

.nav { background-color: var(--nav-bg, var(--surface)); }

/* ===== Univers illustré : scènes de sections (images répétables) ===== */
:root[data-scenes] .sec.scene { --s-top: var(--s-default-top, none); --s-mid: var(--s-default-mid, none); --s-bottom: var(--s-default-bottom, none); --s-cornerL: var(--s-default-cornerL, none); --s-cornerR: var(--s-default-cornerR, none); --s-topH: var(--s-default-topH, 140px); --s-botH: var(--s-default-botH, 100px); --s-cornerH: var(--s-default-cornerH, 90px); --s-sideL: var(--s-default-sideL, none); --s-sideR: var(--s-default-sideR, none); --s-sideW: var(--s-default-sideW, 0px); }
:root[data-scenes] .sec.scene.sec-cours { --s-top: var(--s-cours-top, var(--s-default-top, none)); --s-mid: var(--s-cours-mid, var(--s-default-mid, none)); --s-bottom: var(--s-cours-bottom, var(--s-default-bottom, none)); --s-cornerL: var(--s-cours-cornerL, var(--s-default-cornerL, none)); --s-cornerR: var(--s-cours-cornerR, var(--s-default-cornerR, none)); --s-topH: var(--s-cours-topH, var(--s-default-topH, 140px)); --s-botH: var(--s-cours-botH, var(--s-default-botH, 100px)); --s-cornerH: var(--s-cours-cornerH, var(--s-default-cornerH, 90px)); --s-sideL: var(--s-cours-sideL, var(--s-default-sideL, none)); --s-sideR: var(--s-cours-sideR, var(--s-default-sideR, none)); --s-sideW: var(--s-cours-sideW, var(--s-default-sideW, 0px)); }
:root[data-scenes] .sec.scene.sec-qcm { --s-top: var(--s-qcm-top, var(--s-default-top, none)); --s-mid: var(--s-qcm-mid, var(--s-default-mid, none)); --s-bottom: var(--s-qcm-bottom, var(--s-default-bottom, none)); --s-cornerL: var(--s-qcm-cornerL, var(--s-default-cornerL, none)); --s-cornerR: var(--s-qcm-cornerR, var(--s-default-cornerR, none)); --s-topH: var(--s-qcm-topH, var(--s-default-topH, 140px)); --s-botH: var(--s-qcm-botH, var(--s-default-botH, 100px)); --s-cornerH: var(--s-qcm-cornerH, var(--s-default-cornerH, 90px)); --s-sideL: var(--s-qcm-sideL, var(--s-default-sideL, none)); --s-sideR: var(--s-qcm-sideR, var(--s-default-sideR, none)); --s-sideW: var(--s-qcm-sideW, var(--s-default-sideW, 0px)); }
:root[data-scenes] .sec.scene.sec-epreuve { --s-top: var(--s-epreuve-top, var(--s-default-top, none)); --s-mid: var(--s-epreuve-mid, var(--s-default-mid, none)); --s-bottom: var(--s-epreuve-bottom, var(--s-default-bottom, none)); --s-cornerL: var(--s-epreuve-cornerL, var(--s-default-cornerL, none)); --s-cornerR: var(--s-epreuve-cornerR, var(--s-default-cornerR, none)); --s-topH: var(--s-epreuve-topH, var(--s-default-topH, 140px)); --s-botH: var(--s-epreuve-botH, var(--s-default-botH, 100px)); --s-cornerH: var(--s-epreuve-cornerH, var(--s-default-cornerH, 90px)); --s-sideL: var(--s-epreuve-sideL, var(--s-default-sideL, none)); --s-sideR: var(--s-epreuve-sideR, var(--s-default-sideR, none)); --s-sideW: var(--s-epreuve-sideW, var(--s-default-sideW, 0px)); }
:root[data-scenes] .sec.scene.sec-ed { --s-top: var(--s-ed-top, var(--s-default-top, none)); --s-mid: var(--s-ed-mid, var(--s-default-mid, none)); --s-bottom: var(--s-ed-bottom, var(--s-default-bottom, none)); --s-cornerL: var(--s-ed-cornerL, var(--s-default-cornerL, none)); --s-cornerR: var(--s-ed-cornerR, var(--s-default-cornerR, none)); --s-topH: var(--s-ed-topH, var(--s-default-topH, 140px)); --s-botH: var(--s-ed-botH, var(--s-default-botH, 100px)); --s-cornerH: var(--s-ed-cornerH, var(--s-default-cornerH, 90px)); --s-sideL: var(--s-ed-sideL, var(--s-default-sideL, none)); --s-sideR: var(--s-ed-sideR, var(--s-default-sideR, none)); --s-sideW: var(--s-ed-sideW, var(--s-default-sideW, 0px)); }
:root[data-scenes] .sec.scene.sec-guide { --s-top: var(--s-guide-top, var(--s-default-top, none)); --s-mid: var(--s-guide-mid, var(--s-default-mid, none)); --s-bottom: var(--s-guide-bottom, var(--s-default-bottom, none)); --s-cornerL: var(--s-guide-cornerL, var(--s-default-cornerL, none)); --s-cornerR: var(--s-guide-cornerR, var(--s-default-cornerR, none)); --s-topH: var(--s-guide-topH, var(--s-default-topH, 140px)); --s-botH: var(--s-guide-botH, var(--s-default-botH, 100px)); --s-cornerH: var(--s-guide-cornerH, var(--s-default-cornerH, 90px)); --s-sideL: var(--s-guide-sideL, var(--s-default-sideL, none)); --s-sideR: var(--s-guide-sideR, var(--s-default-sideR, none)); --s-sideW: var(--s-guide-sideW, var(--s-default-sideW, 0px)); }
:root[data-scenes] .sec.scene.sec-obj { --s-top: var(--s-obj-top, var(--s-default-top, none)); --s-mid: var(--s-obj-mid, var(--s-default-mid, none)); --s-bottom: var(--s-obj-bottom, var(--s-default-bottom, none)); --s-cornerL: var(--s-obj-cornerL, var(--s-default-cornerL, none)); --s-cornerR: var(--s-obj-cornerR, var(--s-default-cornerR, none)); --s-topH: var(--s-obj-topH, var(--s-default-topH, 140px)); --s-botH: var(--s-obj-botH, var(--s-default-botH, 100px)); --s-cornerH: var(--s-obj-cornerH, var(--s-default-cornerH, 90px)); --s-sideL: var(--s-obj-sideL, var(--s-default-sideL, none)); --s-sideR: var(--s-obj-sideR, var(--s-default-sideR, none)); --s-sideW: var(--s-obj-sideW, var(--s-default-sideW, 0px)); }
:root[data-scenes] .sec.scene.sec-notes { --s-top: var(--s-notes-top, var(--s-default-top, none)); --s-mid: var(--s-notes-mid, var(--s-default-mid, none)); --s-bottom: var(--s-notes-bottom, var(--s-default-bottom, none)); --s-cornerL: var(--s-notes-cornerL, var(--s-default-cornerL, none)); --s-cornerR: var(--s-notes-cornerR, var(--s-default-cornerR, none)); --s-topH: var(--s-notes-topH, var(--s-default-topH, 140px)); --s-botH: var(--s-notes-botH, var(--s-default-botH, 100px)); --s-cornerH: var(--s-notes-cornerH, var(--s-default-cornerH, 90px)); --s-sideL: var(--s-notes-sideL, var(--s-default-sideL, none)); --s-sideR: var(--s-notes-sideR, var(--s-default-sideR, none)); --s-sideW: var(--s-notes-sideW, var(--s-default-sideW, 0px)); }
:root[data-scenes] .sec.scene.sec-video { --s-top: var(--s-video-top, var(--s-default-top, none)); --s-mid: var(--s-video-mid, var(--s-default-mid, none)); --s-bottom: var(--s-video-bottom, var(--s-default-bottom, none)); --s-cornerL: var(--s-video-cornerL, var(--s-default-cornerL, none)); --s-cornerR: var(--s-video-cornerR, var(--s-default-cornerR, none)); --s-topH: var(--s-video-topH, var(--s-default-topH, 140px)); --s-botH: var(--s-video-botH, var(--s-default-botH, 100px)); --s-cornerH: var(--s-video-cornerH, var(--s-default-cornerH, 90px)); --s-sideL: var(--s-video-sideL, var(--s-default-sideL, none)); --s-sideR: var(--s-video-sideR, var(--s-default-sideR, none)); --s-sideW: var(--s-video-sideW, var(--s-default-sideW, 0px)); }
:root[data-scenes] .sec.scene { position: relative; overflow: hidden; border: 0; border-radius: 16px; padding: 0 calc(1.1rem + var(--s-sideW) * .75) calc(var(--s-botH) + .6rem);
  background-color: var(--card-bg, var(--surface));
  background-image: var(--s-cornerL), var(--s-cornerR), var(--s-sideL), var(--s-sideR), var(--s-top), var(--s-bottom), linear-gradient(var(--scene-veil, transparent), var(--scene-veil, transparent)), var(--s-mid);
  background-position: left bottom, right bottom, left top, right top, left top, left bottom, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, repeat-y, repeat-y, repeat-x, repeat-x, no-repeat, repeat;
  background-size: auto var(--s-cornerH), auto var(--s-cornerH), var(--s-sideW) auto, var(--s-sideW) auto, auto var(--s-topH), auto var(--s-botH), 100% 100%, auto; }
:root[data-scenes] .sec.scene > .sec-head { min-height: var(--s-topH); margin: 0 0 .4rem; align-items: center; }
:root[data-scenes] .sec.scene .sec-head h2 { font-family: var(--font-display, inherit); font-size: 1.5rem; line-height: 1.05; text-transform: uppercase; letter-spacing: .02em; color: var(--s-title, #fff); -webkit-text-stroke: 3px var(--s-stroke, #3b2a12); paint-order: stroke fill; }
:root[data-scenes] .sec.scene .sec-head p { font-size: .82rem; line-height: 1.25; margin-top: .2rem; color: var(--s-title, #fff); text-shadow: 0 1px 3px var(--s-stroke, #3b2a12), 0 0 2px var(--s-stroke, #3b2a12); font-weight: 600; }
:root[data-scenes] .sec-ico:has(.themed) { background: none; box-shadow: none; }
:root[data-scenes] .sec-ico .ico.themed { width: 2.8rem; height: 2.8rem; }
:root[data-scenes] .sec.scene > p.muted { background: color-mix(in srgb, var(--card-bg, var(--surface)) 88%, transparent); padding: .35rem .6rem; border-radius: 10px; }

/* ===== Univers illustré : boutons en image étirable ===== */
:root[data-btnimg] [data-skin="main"], :root[data-btnimg] [data-skin="go"] { background: none; box-shadow: none; border-style: solid; border-color: transparent; border-radius: 0; padding: .3rem .7rem; min-height: 0; font-family: var(--font-display, inherit); font-weight: 700; letter-spacing: .02em; color: var(--btn-skin-ink, #fff); -webkit-text-stroke: var(--btn-skin-strokew, 1.5px) var(--btn-skin-stroke, #5a1c0a); paint-order: stroke fill; text-decoration: none; filter: none; }
:root[data-btnimg] [data-skin="main"] { -webkit-text-stroke-color: var(--btn-main-stroke, var(--btn-skin-stroke, #5a1c0a)); border-width: var(--btn-main-border, 12px); border-image: var(--btn-main-img) var(--btn-main-slice, 24) fill / var(--btn-main-border, 12px) / 0 stretch; }
:root[data-btnimg] [data-skin="go"] { -webkit-text-stroke-color: var(--btn-go-stroke, var(--btn-skin-stroke, #5a1c0a)); border-width: var(--btn-go-border, 12px); border-image: var(--btn-go-img) var(--btn-go-slice, 24) fill / var(--btn-go-border, 12px) / 0 stretch; }
:root[data-btnimg] [data-skin]:hover:not(:disabled) { background: none; filter: brightness(1.1); }
:root[data-btnimg] [data-skin]:active:not(:disabled) { transform: translateY(1px); filter: brightness(.95); }
:root[data-btnimg] [data-skin]:disabled { opacity: .55; filter: grayscale(.4); }

/* petits écrans : pas de bandes latérales de scène (elles mangeraient la largeur du contenu) */
@media (max-width: 40rem) { :root[data-scenes] .sec.scene { --s-sideW: 0px; padding-inline: 1.1rem; } }

/* ===== Univers illustré : affiche (une image par bloc, sans répétition) ===== */
:root[data-scenes] .sec.scene[data-poster] { padding: 0; border: 0; border-radius: 16px; overflow: hidden; position: relative; background-color: var(--card-bg, var(--surface));
  background-image: var(--pd-top), var(--pd-bottom), linear-gradient(var(--scene-veil, transparent), var(--scene-veil, transparent)), var(--pd-mid); background-size: 100% auto, 100% auto, 100% 100%, 100% 100%; background-position: left top, left bottom, left top, left top; background-repeat: no-repeat; }
:root[data-scenes] .sec.scene[data-poster][data-sw="m"] { background-image: var(--pm-top), var(--pm-bottom), linear-gradient(var(--scene-veil, transparent), var(--scene-veil, transparent)), var(--pm-mid); }
:root[data-scenes] .sec.scene[data-poster] > .sec-head { position: relative; display: flex; align-items: center; gap: .8rem; padding: 0; margin: 0; min-height: 0; }
:root[data-scenes] .sec.scene[data-poster] > .sec-head::before { content: ''; flex: none; width: 0; padding-top: var(--pd-rt, 25%); }
:root[data-scenes] .sec.scene[data-poster][data-sw="m"] > .sec-head::before { padding-top: var(--pm-rt, 40%); }
:root[data-scenes] .sec.scene[data-poster] > .sec-head > .sec-ico { margin-left: 1rem; }
:root[data-scenes] .sec.scene[data-poster] > .sec-head > div:not(.sec-ico) { padding-right: 1rem; }
:root[data-scenes] .sec.scene[data-poster] > :not(.sec-head) { margin-left: 1rem; margin-right: 1rem; }
:root[data-scenes] .sec.scene[data-poster] > :first-child + * { margin-top: .5rem; }
:root[data-scenes] .sec.scene[data-poster]::after { content: ''; display: block; padding-top: var(--pd-rb, 20%); }
:root[data-scenes] .sec.scene[data-poster][data-sw="m"]::after { padding-top: var(--pm-rb, 25%); }

/* Lecteur : boutons-icônes de même taille et icônes centrées (themées ou non) */
.reader-bar { align-items: center; }
.reader-bar > button, .reader-bar > a.btn, .reader-bar > .bm-btn { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; box-sizing: border-box; }
.reader-bar > button[aria-label="Créer une carte"], .reader-bar > button[aria-label="Créer un schéma masqué"], .reader-bar > .bm-btn { width: 2.75rem; padding: 0; }
.reader-bar > button .ico, .reader-bar > .bm-btn .ico { width: 1.5rem; height: 1.5rem; flex: none; }
.rail-btn { min-height: 3.3rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; box-sizing: border-box; }

.annot-rail .rail-btn { min-height: 3.3rem; }

/* Bloc « Vidéos d'aide » (un volet <details>) : le résumé sert d'en-tête sur la bande du haut de l'affiche */
:root[data-scenes] .sec.scene[data-poster] > summary { display: flex; align-items: center; gap: .6rem; padding: 0 1rem; margin: 0; list-style: none; cursor: pointer; color: var(--s-title, #fff); font-weight: 700; text-shadow: 0 1px 3px var(--s-stroke, #3b2a12), 0 0 2px var(--s-stroke, #3b2a12); }
:root[data-scenes] .sec.scene[data-poster] > summary::-webkit-details-marker { display: none; }
:root[data-scenes] .sec.scene[data-poster] > summary::before { content: ''; flex: none; width: 0; padding-top: var(--pd-rt, 25%); }
:root[data-scenes] .sec.scene[data-poster][data-sw="m"] > summary::before { padding-top: var(--pm-rt, 40%); }

/* Police d'affichage à un seul graisse (Regular) : pas de gras simulé */
:root[data-font] [data-skin], :root[data-font] .sec.scene .sec-head h2, :root[data-font] .sec.scene[data-poster] > summary { font-weight: 400; }

/* ===== Univers illustré : bandeaux panoramiques (cartes larges de l'Accueil, titres de la Bibliothèque) ===== */
/* L'image est à droite ; un dégradé la fond dans la couleur du bloc à gauche : le texte reste toujours lisible, quelle que soit l'image */
:root[data-scenes] [data-pano] { position: relative; background-color: var(--card-bg, var(--surface)); background-repeat: no-repeat;
  background-image: linear-gradient(90deg, var(--card-bg, var(--surface)) 0%, var(--card-bg, var(--surface)) 55%, transparent 100%), var(--pn-d);
  background-size: 100% 100%, auto 100%; background-position: 0 0, right center; }
:root[data-scenes] [data-pano][data-sw="m"] { background-image: linear-gradient(180deg, var(--card-bg, var(--surface)) 0%, var(--card-bg, var(--surface)) 55%, transparent 100%), var(--pn-m); background-size: 100% 100%, 100% auto; background-position: 0 0, center bottom; }
:root[data-scenes] h2.world-banner { margin: 1.6rem 0 .6rem; padding: 1.2rem 1.2rem; min-height: 5.2rem; display: flex; align-items: center; border-radius: 14px; font-family: var(--font-display, inherit); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; color: var(--s-title, #fff); -webkit-text-stroke: 3px var(--s-stroke, #3b2a12); paint-order: stroke fill; }

/* titres de semestre : le dégradé laisse voir davantage l'image (le titre est court) */
:root[data-scenes] h2.world-banner[data-pano] { background-image: linear-gradient(90deg, var(--card-bg, var(--surface)) 0%, var(--card-bg, var(--surface)) 26%, transparent 80%), var(--pn-d); }
:root[data-scenes] h2.world-banner[data-pano][data-sw="m"] { background-image: linear-gradient(90deg, var(--card-bg, var(--surface)) 0%, var(--card-bg, var(--surface)) 30%, transparent 85%), var(--pn-m); background-size: 100% 100%, auto 100%; background-position: 0 0, right center; }

/* Bibliothèque : grande icône de type (QCM, épreuve…) à la taille de l'icône d'un cours */
.thumb.thumb-kind { --kc: var(--accent); display: grid; place-items: center; background: color-mix(in srgb, var(--kc) 14%, var(--surface)); border-color: color-mix(in srgb, var(--kc) 35%, var(--line)); }
.thumb-kind .ico { width: 2.5rem; height: 2.5rem; color: var(--kc); }
.thumb-kind .ico.themed { width: 3rem; height: 3rem; }
.thumb-kind[data-kind="qcm"] { --kc: var(--c02-ink, #16a34a); } .thumb-kind[data-kind="epreuve"] { --kc: var(--c03-ink, #d97706); }
.thumb-kind[data-kind="ed"] { --kc: var(--c04-ink, #9333ea); } .thumb-kind[data-kind="guide"] { --kc: var(--c05-ink, #0d9488); }
.thumb-kind[data-kind="document"] { --kc: var(--c11-ink, #6b7280); } .thumb-kind[data-kind="notice"] { --kc: var(--c12-ink, #0284c7); }

/* ===== Scènes : titres très gros à contour épais, panneaux clairs translucides ===== */
:root[data-scenes] .sec.scene .sec-head h2, :root[data-scenes] .sec.scene[data-poster] > summary { font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.7rem); line-height: 1; -webkit-text-stroke: .32em var(--s-stroke, #1b1b2f); paint-order: stroke fill; letter-spacing: .03em; text-shadow: 0 3px 0 var(--s-stroke, #1b1b2f); }
:root[data-scenes] .sec.scene .sec-head p { font-size: .95rem; font-weight: 700; -webkit-text-stroke: 0; text-shadow: 0 2px 0 var(--s-stroke, #1b1b2f), 0 0 4px var(--s-stroke, #1b1b2f); }
:root[data-scenes] .sec.scene .sec-ico .ico.themed { width: 3.6rem; height: 3.6rem; }
:root[data-scenes] .sec.scene .card, :root[data-scenes] .sec.scene .notice, :root[data-scenes] .sec.scene ul.list {
  --ink: var(--pl-ink); --ink-2: var(--pl-ink-2); --line: var(--pl-line); --card-line: var(--pl-line); --ok: var(--pl-ok); --ok-soft: var(--pl-ok-soft); --warn: var(--pl-warn); --warn-soft: var(--pl-warn-soft); --bad: var(--pl-bad); --bad-soft: var(--pl-bad-soft); --info-soft: var(--pl-info-soft);
  --accent: var(--pl-accent); --accent-soft: var(--pl-accent-soft); --surface: var(--pl-surface); --surface-2: var(--pl-surface-2);
  --c01-ink: var(--pl-c01-ink); --c02-ink: var(--pl-c02-ink); --c03-ink: var(--pl-c03-ink); --c04-ink: var(--pl-c04-ink); --c05-ink: var(--pl-c05-ink); --c11-ink: var(--pl-c11-ink); --c12-ink: var(--pl-c12-ink);
  color: var(--pl-ink); background: linear-gradient(180deg, rgba(255,255,255,.93), rgba(255,255,255,.80)); border-color: rgba(255,255,255,.7); box-shadow: 0 2px 10px rgba(0,0,0,.18); backdrop-filter: blur(1.5px); }
:root[data-scenes] .sec.scene .notice { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(235,242,252,.78)); }
:root[data-scenes] .sec.scene a:not(.btn) { color: var(--pl-accent); }
:root[data-scenes] .sec.scene .card .muted, :root[data-scenes] .sec.scene .card .small { color: var(--pl-ink-2); }

/* ajustements : titres longs sur 2 lignes maximum, liens de titres en encre, texte d'aide sur panneau clair */
:root[data-scenes] .sec.scene .sec-head h2, :root[data-scenes] .sec.scene[data-poster] > summary { font-size: clamp(1.45rem, 1rem + 1.5vw, 2.1rem); }
:root[data-scenes] .sec.scene a.chap-link, :root[data-scenes] .sec.scene .item-title a { color: var(--pl-ink); }
:root[data-scenes] .sec.scene > p.muted, :root[data-scenes] .sec.scene > .stack > p { background: linear-gradient(180deg, rgba(255,255,255,.93), rgba(255,255,255,.80)); color: var(--pl-ink); padding: .5rem .8rem; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
:root[data-scenes] .sec.scene > p.muted a { color: var(--pl-accent); }

/* ===== Scènes à fond clair : plus de voile sombre ; tout le texte du bloc passe aux couleurs claires du thème (encre foncée) ===== */
:root[data-scenes] .sec.scene { --scene-veil: transparent;
  --ink: var(--pl-ink); --ink-2: var(--pl-ink-2); --line: var(--pl-line); --ok: var(--pl-ok); --ok-soft: var(--pl-ok-soft); --warn: var(--pl-warn); --warn-soft: var(--pl-warn-soft); --bad: var(--pl-bad); --bad-soft: var(--pl-bad-soft); --info-soft: var(--pl-info-soft);
  --accent: var(--pl-accent); --accent-soft: var(--pl-accent-soft); --surface: var(--pl-surface); --surface-2: var(--pl-surface-2);
  --c01-ink: var(--pl-c01-ink); --c02-ink: var(--pl-c02-ink); --c03-ink: var(--pl-c03-ink); --c04-ink: var(--pl-c04-ink); --c05-ink: var(--pl-c05-ink); --c11-ink: var(--pl-c11-ink); --c12-ink: var(--pl-c12-ink);
  color: var(--pl-ink); }
:root[data-scenes] .sec.scene h3, :root[data-scenes] .sec.scene label, :root[data-scenes] .sec.scene p, :root[data-scenes] .sec.scene li { color: var(--pl-ink); }
:root[data-scenes] .sec.scene .muted, :root[data-scenes] .sec.scene .small { color: var(--pl-ink-2); }
:root[data-scenes] .sec.scene .sec-head h2, :root[data-scenes] .sec.scene .sec-head p, :root[data-scenes] .sec.scene[data-poster] > summary { color: var(--s-title, #fff); }
:root[data-scenes] .sec.scene textarea, :root[data-scenes] .sec.scene input, :root[data-scenes] .sec.scene select { background: #fff; color: var(--pl-ink); border-color: var(--pl-line); }

:root[data-scenes] .sec.scene .assist .list { background: transparent; box-shadow: none; border: 0; } :root[data-scenes] .sec.scene .assist .list li { background: rgba(255,255,255,.55); border-radius: 8px; margin-bottom: .3rem; padding: .4rem .6rem; }

/* ===== Panneaux des scènes : blanc plein là où il y a du texte, qui devient transparent vers la droite et vers le bas (on voit mieux le décor) ===== */
:root[data-scenes] .sec.scene .card, :root[data-scenes] .sec.scene .notice, :root[data-scenes] .sec.scene ul.list, :root[data-scenes] .sec.scene > p.muted {
  position: relative; isolation: isolate; background: none !important; border-color: transparent; box-shadow: none; backdrop-filter: none; }
:root[data-scenes] .sec.scene .card::before, :root[data-scenes] .sec.scene .notice::before, :root[data-scenes] .sec.scene ul.list::before, :root[data-scenes] .sec.scene > p.muted::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255,255,255,.95); border: 1px solid rgba(255,255,255,.75);
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 56%, rgba(0,0,0,.28) 100%), linear-gradient(to bottom, #000 0, #000 55%, rgba(0,0,0,.28) 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 0, #000 56%, rgba(0,0,0,.28) 100%), linear-gradient(to bottom, #000 0, #000 55%, rgba(0,0,0,.28) 100%); mask-composite: intersect; }
/* un panneau dans un panneau (carte de fichier à l'intérieur d'un bloc) ne double pas le dégradé */
:root[data-scenes] .sec.scene .card .card::before, :root[data-scenes] .sec.scene ul.list .card::before { display: none; }

/* dégradé renforcé : le coin bas-droit des panneaux est presque entièrement transparent (on voit le personnage derrière) */
:root[data-scenes] .sec.scene .card::before, :root[data-scenes] .sec.scene .notice::before, :root[data-scenes] .sec.scene ul.list::before, :root[data-scenes] .sec.scene > p.muted::before {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 42%, rgba(0,0,0,.04) 90%), linear-gradient(to bottom, #000 0, #000 45%, rgba(0,0,0,.04) 92%);
  mask-image: linear-gradient(to right, #000 0, #000 42%, rgba(0,0,0,.04) 90%), linear-gradient(to bottom, #000 0, #000 45%, rgba(0,0,0,.04) 92%); }

/* transparence totale dans le coin bas-droit des panneaux ; le panneau s'arrête avant le décor du bas (rien ne coupe le personnage) */
:root[data-scenes] .sec.scene .card::before, :root[data-scenes] .sec.scene .notice::before, :root[data-scenes] .sec.scene ul.list::before, :root[data-scenes] .sec.scene > p.muted::before {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 40%, rgba(0,0,0,0) 86%), linear-gradient(to bottom, #000 0, #000 42%, rgba(0,0,0,0) 88%);
  mask-image: linear-gradient(to right, #000 0, #000 40%, rgba(0,0,0,0) 86%), linear-gradient(to bottom, #000 0, #000 42%, rgba(0,0,0,0) 88%); }
:root[data-scenes] .sec.scene[data-poster]::after { padding-top: calc(var(--pd-rb, 20%) + 2.5%); }
:root[data-scenes] .sec.scene[data-poster][data-sw="m"]::after { padding-top: calc(var(--pm-rb, 25%) + 2.5%); }
/* grande icône de l'en-tête : un carré à la hauteur du bandeau */
:root[data-scenes] .sec.scene[data-poster] > .sec-head > .sec-ico { width: 5.4rem; height: 5.4rem; flex: none; }
:root[data-scenes] .sec.scene[data-poster] > .sec-head > .sec-ico .ico { width: 100%; height: 100%; }
:root[data-scenes] .sec.scene[data-poster] > .sec-head > .sec-ico .ico.themed { width: 5.4rem; height: 5.4rem; }

.duo-col { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; }
.duo-col > .sec { margin: 0; }
.sec-duo { align-items: start; }
@media (max-width: 62rem) { .duo-col { gap: 0; } .duo-col > .sec { margin: 1.6rem 0; } }

:root[data-scenes] .sec.scene[data-poster] > textarea, :root[data-scenes] .sec.scene[data-poster] > .stack > textarea { width: calc(100% - 2rem); box-sizing: border-box; }
:root[data-scenes] .sec.scene[data-poster] > .grid { margin-left: 1rem; margin-right: 1rem; }

/* icône d'en-tête : un carré qui prend toute la hauteur du bandeau */
:root[data-scenes] .sec.scene[data-poster] > .sec-head { align-items: stretch; }
:root[data-scenes] .sec.scene[data-poster] > .sec-head > .sec-ico { align-self: stretch; width: auto !important; height: auto !important; aspect-ratio: 1 / 1; margin: .35rem 0 .35rem 1rem; display: grid; place-items: center; }
:root[data-scenes] .sec.scene[data-poster] > .sec-head > .sec-ico .ico, :root[data-scenes] .sec.scene[data-poster] > .sec-head > .sec-ico .ico.themed { width: 100% !important; height: 100% !important; }
:root[data-scenes] .sec.scene[data-poster] > .sec-head > .sec-ico .ico img { width: 100%; height: 100%; object-fit: contain; }
:root[data-scenes] .sec.scene[data-poster] > .sec-head > div:not(.sec-ico) { align-self: center; }

/* icônes de ligne plus grandes dans les blocs de la page d'un cours (même taille que dans la Bibliothèque) */
.set-row > .thumb-kind { width: 4.2rem; height: 4.2rem; } .set-row .thumb-kind .ico { width: 3.2rem; height: 3.2rem; } .set-row .thumb-kind .ico.themed { width: 3.8rem; height: 3.8rem; }
.file-row .chap-main > .thumb { width: 4.2rem; height: 4.2rem; }

/* ===== Habillage générique des pages (titres de page et de section) ===== */
:root[data-scenes] .page-banner, :root[data-scenes] .sub-banner { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; border-radius: 14px; color: var(--s-title, #fff); font-family: var(--font-display, inherit); font-weight: 400; text-transform: uppercase; letter-spacing: .03em; -webkit-text-stroke: .28em var(--s-stroke, #1b1b2f); paint-order: stroke fill; text-shadow: 0 3px 0 var(--s-stroke, #1b1b2f); background: var(--card-bg, var(--surface)); }
:root[data-scenes] .page-banner { min-height: 6.2rem; padding: .8rem 1.4rem; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); margin-bottom: .6rem; }
:root[data-scenes] .sub-banner { min-height: 3.8rem; padding: .5rem 1.1rem; font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); margin: 1.4rem 0 .6rem; }
:root[data-scenes] .page-banner::before, :root[data-scenes] .sub-banner::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--pb-img) var(--pb-x, 100%) center / auto 100% no-repeat; filter: hue-rotate(var(--pb-hue, 0deg)) saturate(1.1); -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 22%, #000 70%); mask-image: linear-gradient(90deg, transparent 0, transparent 22%, #000 70%); }
:root[data-scenes] .page-banner .ico, :root[data-scenes] .sub-banner .ico { -webkit-text-stroke: 0; }

:root[data-scenes] .page-banner::before, :root[data-scenes] .sub-banner::before { background: var(--pb-img) var(--pb-x, 100%) center / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 18%, rgba(0,0,0,.85) 62%, #000 100%); mask-image: linear-gradient(90deg, transparent 0, transparent 18%, rgba(0,0,0,.85) 62%, #000 100%); }

/* ===== Ornements de coin et frise de bas de page ===== */
:root[data-scenes] [data-orn="1"] { position: relative; overflow: visible; }
.orn { position: absolute; z-index: 3; width: 3rem; height: 3rem; right: -.5rem; bottom: -1rem; pointer-events: none; transform: rotate(var(--orn-r, 0deg)) scaleX(var(--orn-f, 1)); filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.orn.orn-l { right: auto; left: -.5rem; }
:root:not([data-scenes]) .orn { display: none; }
.page-foot { position: relative; height: clamp(5rem, 9vw, 8rem); margin: 3rem 0 0; border-radius: 14px; overflow: hidden; }
.page-foot::before { content: ''; position: absolute; inset: 0; background: var(--pf-img) center bottom / cover no-repeat; transform: scaleX(var(--pf-flip, 1)); filter: hue-rotate(var(--pf-hue, 0deg)); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 45%); mask-image: linear-gradient(to bottom, transparent 0, #000 45%); }
:root:not([data-scenes]) .page-foot { display: none; }

/* ajustements : pas de débordement horizontal, frise lisible */
:root[data-scenes] main { overflow-x: clip; }
.orn { right: .4rem; bottom: -1rem; } .orn.orn-l { right: auto; left: .4rem; }
.page-foot { height: auto; aspect-ratio: 4 / 1; max-height: 14rem; }
.page-foot::before { background: var(--pf-img) center bottom / 100% auto no-repeat; }

.orn, .orn.orn-l { right: 1rem; left: auto; bottom: -1.5rem; width: 2.8rem; height: 2.8rem; }

/* ===== Fond de page discret (panoramique atténué, fixe) et titres de dialogues ===== */
:root[data-scenes] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--pg-img, none) center top / cover no-repeat; opacity: .12; transform: scaleX(var(--pg-flip, 1)); filter: hue-rotate(var(--pg-hue, 0deg)) blur(1px); -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.4) 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.4) 60%, transparent 100%); }
:root:not([data-scenes]) body::before { display: none; }
:root[data-scenes] dialog h2.dlg-banner { min-height: 3.4rem; margin: 0 0 .8rem; justify-content: center; text-align: center; font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); }
:root[data-scenes] dialog h2.dlg-banner::before { background-size: cover; }

:root[data-scenes] body::before { opacity: .2; }
:root[data-scenes] dialog h2.dlg-banner { width: 100%; box-sizing: border-box; }

/* fond de page plus lisible : image nette, plus visible, estompée seulement vers le bas */
:root[data-scenes] body::before { opacity: .42; filter: none; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 35%, rgba(0,0,0,.25) 100%); mask-image: linear-gradient(to bottom, #000 0, #000 35%, rgba(0,0,0,.25) 100%); }

:root[data-scenes] body::before { background-size: 100% auto; background-position: center bottom; opacity: .55; -webkit-mask-image: linear-gradient(to top, #000 0, #000 55%, transparent 100%); mask-image: linear-gradient(to top, #000 0, #000 55%, transparent 100%); }
:root[data-scenes] body { background-color: var(--bg); }

/* motif de fond fourni par le thème (BG-01) : tuile répétée, discrète ; le contenu reste sur ses cartes */
:root[data-scenes] body { background-image: var(--theme-bg-page, none); background-size: 640px auto; background-attachment: fixed; }

/* bandeaux panoramiques : l'image remplit tout le bloc ; dégradé long et doux (aucune coupure franche) ; fond de départ coloré */
:root[data-scenes] [data-pano] { background-image: linear-gradient(90deg, var(--card-bg, var(--surface)) 0%, var(--card-bg, var(--surface)) 30%, color-mix(in srgb, var(--card-bg, var(--surface)) 70%, transparent) 48%, color-mix(in srgb, var(--card-bg, var(--surface)) 30%, transparent) 66%, transparent 88%), var(--pn-d); background-size: 100% 100%, cover; background-position: 0 0, right center; }
:root[data-scenes] h2.world-banner[data-pano] { background-color: var(--c01, #5b8fd9); background-image: linear-gradient(90deg, var(--c01, #5b8fd9) 0%, var(--c01, #5b8fd9) 22%, color-mix(in srgb, var(--c01, #5b8fd9) 60%, transparent) 42%, color-mix(in srgb, var(--c01, #5b8fd9) 20%, transparent) 62%, transparent 85%), var(--pn-d); background-size: 100% 100%, cover; background-position: 0 0, right center; }
:root[data-scenes] [data-pano][data-sw="m"] { background-size: 100% 100%, cover; }

:root[data-scenes] .page-banner, :root[data-scenes] .sub-banner { background-color: var(--c01, #5b8fd9); }
:root[data-scenes] .page-banner::before, :root[data-scenes] .sub-banner::before { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 8%, rgba(0,0,0,.5) 40%, #000 80%); mask-image: linear-gradient(90deg, transparent 0, transparent 8%, rgba(0,0,0,.5) 40%, #000 80%); }

/* Bibliothèque : matières = fond briques ; quand on ouvre, la liste des chapitres passe sur le fond pièces (voile sombre pour la lisibilité) */
:root[data-scenes] details.subject { background-image: linear-gradient(rgba(22,22,40,.55), rgba(22,22,40,.55)), var(--theme-bg-subject, none); background-size: auto, 400px auto; }
:root[data-scenes] details.subject[open] { background-image: linear-gradient(rgba(22,22,40,.60), rgba(22,22,40,.60)), var(--theme-bg-subject-open, none); background-size: auto, 400px auto; }
:root[data-scenes] details.subject > summary { margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; background-image: linear-gradient(rgba(22,22,40,.45), rgba(22,22,40,.45)), var(--theme-bg-subject, none); background-size: auto, 400px auto; border-radius: var(--radius); }

:root[data-scenes] details.subject, :root[data-scenes] details.subject > summary { background-image: linear-gradient(rgba(22,22,40,.28), rgba(22,22,40,.28)), var(--theme-bg-subject, none); }
:root[data-scenes] details.subject[open] { background-image: linear-gradient(rgba(22,22,40,.42), rgba(22,22,40,.42)), var(--theme-bg-subject-open, none); }

/* ===== Couleur dominante par page (univers illustré) : menu + blocs ===== */
:root[data-scenes][data-page="accueil"] { --page-col: var(--c01, #4f86d6); }
:root[data-scenes][data-page="biblio"] { --page-col: var(--c11, #8d8a85); }
:root[data-scenes][data-page="programme"], :root[data-scenes][data-page="garage"] { --page-col: var(--c16, #37834b); }
:root[data-scenes][data-page="entrainer"] { --page-col: var(--c18, #c44840); }
:root[data-scenes][data-page="anki"] { --page-col: var(--c07, #d991b5); }
:root[data-scenes][data-page="maseance"] { --page-col: var(--c06, #b298cd); }
:root[data-scenes] main { --card-bg: color-mix(in srgb, var(--page-col, var(--surface)) 24%, var(--surface)); --card-line: color-mix(in srgb, var(--page-col, var(--line)) 55%, var(--line)); }
:root[data-scenes] #nav-list > li > a { --nv: var(--c27, #365fa2); background: color-mix(in srgb, var(--nv) 20%, transparent); border: 1px solid color-mix(in srgb, var(--nv) 40%, transparent); margin-bottom: 3px; }
:root[data-scenes] #nav-list a[href="#/accueil"] { --nv: var(--c01, #4f86d6); }
:root[data-scenes] #nav-list a[href="#/biblio"] { --nv: var(--c11, #8d8a85); background-image: linear-gradient(rgba(22,22,40,.35), rgba(22,22,40,.35)), var(--theme-bg-subject, none); background-size: auto, 220px auto; }
:root[data-scenes] #nav-list a[href="#/programme"], :root[data-scenes] #nav-list a.pomo-nav { --nv: var(--c16, #37834b); }
:root[data-scenes] #nav-list a[href="#/entrainer"] { --nv: var(--c18, #c44840); }
:root[data-scenes] #nav-list a[href="#/anki"] { --nv: var(--c07, #d991b5); }
:root[data-scenes] #nav-list a[href="#/maseance"] { --nv: var(--c06, #b298cd); }
:root[data-scenes] #nav-list a:hover { background-color: color-mix(in srgb, var(--nv) 34%, transparent); }
:root[data-scenes] #nav-list a[aria-current="page"] { background-color: color-mix(in srgb, var(--nv) 58%, transparent); box-shadow: inset 4px 0 0 var(--nv), 0 0 0 1px var(--nv); font-weight: 700; }

/* ===== Pomodoro : version « jeu » ===== */
.pomo-presets { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 .2rem; }
.pomo-presets .row { gap: .35rem; }
.pomo-presets button { padding: .3rem .7rem; font-size: .9rem; }
:root[data-scenes] .pomo-dlg { --ph: var(--c14, #526ba5); border: 3px solid var(--ph); border-radius: 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--ph) 28%, var(--surface)), var(--surface) 55%); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
:root[data-scenes] .pomo-dlg[data-phase="short"], :root[data-scenes] .pomo-dlg[data-phase="long"] { --ph: var(--c15, #37834b); }
:root[data-scenes] .pomo-dlg .pomo-time { font-family: var(--font-display, inherit); font-weight: 400; font-size: clamp(4rem, 3rem + 4vw, 5.6rem); color: #fff; -webkit-text-stroke: .1em #1b1b2f; paint-order: stroke fill; text-shadow: 0 5px 0 #1b1b2f; letter-spacing: .04em; line-height: 1; margin: .3rem 0 .6rem; }
:root[data-scenes] .pomo-dlg .pomo-phase { display: inline-block; font-family: var(--font-display, inherit); font-weight: 400; font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--ph); border: 3px solid #1b1b2f; border-radius: 999px; padding: .2rem 1rem; box-shadow: 0 3px 0 #1b1b2f; }
:root[data-scenes] .pomo-dlg .pomo-dots .dot { width: 1.25rem; height: 1.25rem; border: 2px solid #1b1b2f; background: rgba(255,255,255,.25); }
:root[data-scenes] .pomo-dlg .pomo-dots .dot.on { background: radial-gradient(circle at 35% 30%, #fff4a8, #f2b705 70%); border-color: #1b1b2f; }
:root[data-scenes] .pomo-dlg .pomo-dots .dot.cur { border-color: #fff; box-shadow: 0 0 0 2px var(--ph); }
:root[data-scenes] .pomo-dlg #pomo-start, :root[data-scenes] .pomo-dlg button.primary.big { font-size: 1.5rem; padding: .5rem 2.2rem; }
:root[data-scenes] .pomo-dlg .pomo-chip { border-width: 2px; font-family: var(--font-display, inherit); font-weight: 400; letter-spacing: .02em; background: color-mix(in srgb, var(--c17, #e4b52b) 30%, var(--surface)); }
:root[data-scenes] .pomo-dlg .pomo-chip.on { background: var(--c16, #37834b); border-color: #1b1b2f; color: #fff; }
:root[data-scenes] .pomo-dlg .pomo-amb { background: color-mix(in srgb, var(--ph) 12%, var(--surface)); border: 2px solid color-mix(in srgb, var(--ph) 45%, var(--line)); border-radius: 16px; }
:root[data-scenes] .pomo-dlg .pomo-presets button { font-family: var(--font-display, inherit); font-weight: 400; background: var(--c19, #639bbe); border-color: #1b1b2f; color: #fff; }
:root[data-scenes] .pomo-pill { font-family: var(--font-display, inherit); font-weight: 400; letter-spacing: .03em; border-width: 3px; background: color-mix(in srgb, var(--surface) 80%, var(--c14, #526ba5)); }

/* Pomodoro : plus compact (moins de défilement), bouton principal en brique */
.pomo-dlg { max-width: 30rem; max-height: 94vh; overflow: auto; }
:root[data-scenes] .pomo-dlg .pomo-time { font-size: clamp(3.4rem, 3rem + 2vw, 4.6rem); margin: .1rem 0 .4rem; }
:root[data-scenes] .pomo-dlg .pomo-chip { padding: .2rem .65rem; font-size: .85rem; }
:root[data-scenes] .pomo-dlg .pomo-amb { padding: .5rem .7rem; margin-top: .5rem; }
:root[data-scenes] .pomo-dlg .pomo-amb-state { display: none; }
:root[data-scenes] .pomo-dlg [data-skin="main"].big { font-size: 1.45rem; padding: .2rem 1.2rem; }
:root[data-scenes] #nav-list a[href="#/biblio"] { background-image: linear-gradient(rgba(22,22,40,.12), rgba(22,22,40,.12)), var(--theme-bg-subject, none); }

/* ===== Couleurs vives par page (valeurs du manifeste du thème : --pgc-* / --pgl-*) ===== */
:root[data-scenes][data-page] { --page-col: var(--pgc-accueil); --page-line: var(--pgl-accueil); }
:root[data-scenes][data-page="biblio"] { --page-col: var(--pgc-biblio); --page-line: var(--pgl-biblio); }
:root[data-scenes][data-page="programme"] { --page-col: var(--pgc-programme); --page-line: var(--pgl-programme); }
:root[data-scenes][data-page="garage"] { --page-col: var(--pgc-garage); --page-line: var(--pgl-garage); }
:root[data-scenes][data-page="entrainer"] { --page-col: var(--pgc-entrainer); --page-line: var(--pgl-entrainer); }
:root[data-scenes][data-page="anki"] { --page-col: var(--pgc-anki); --page-line: var(--pgl-anki); }
:root[data-scenes][data-page="maseance"] { --page-col: var(--pgc-maseance); --page-line: var(--pgl-maseance); }
:root[data-scenes] main { --card-bg: var(--page-col, var(--surface)); --card-line: var(--page-line, var(--line)); }
:root[data-scenes][data-page="biblio"] main { --card-bg: color-mix(in srgb, var(--page-col) 30%, var(--surface)); --card-line: color-mix(in srgb, var(--page-line) 60%, var(--line)); }
:root[data-scenes] main .card, :root[data-scenes] main .notice, :root[data-scenes] main details.card { border-width: 2px; }
/* texte foncé sur les fonds colorés clairs (vert herbe, ciel, rose Peach, lavande) */
:root[data-scenes][data-ptext="dark"]:not([data-page="biblio"]) main :is(.card, .notice, details.card) {
  --ink: var(--pl-ink); --ink-2: var(--pl-ink-2); --line: color-mix(in srgb, var(--page-line) 45%, transparent); --accent: var(--pl-accent); --accent-soft: var(--pl-accent-soft); --surface: #ffffff; --surface-2: rgba(255,255,255,.6);
  --ok: var(--pl-ok); --ok-soft: var(--pl-ok-soft); --warn: var(--pl-warn); --warn-soft: var(--pl-warn-soft); --bad: var(--pl-bad); --bad-soft: var(--pl-bad-soft); --info-soft: var(--pl-info-soft);
  color: var(--pl-ink); }
:root[data-scenes][data-ptext="dark"]:not([data-page="biblio"]) main :is(.card, .notice, details.card) :is(.muted, .small) { color: var(--pl-ink-2); }
:root[data-scenes][data-ptext="dark"]:not([data-page="biblio"]) main :is(.card, .notice) :is(h1, h2, h3, p, li, label, summary, strong) { color: var(--pl-ink); }
:root[data-scenes][data-ptext="dark"] main :is(.card, .notice) :is(input, select, textarea) { background: #fff; color: var(--pl-ink); }
/* sur le rouge vif : texte blanc, pastilles lisibles */
:root[data-scenes][data-ptext="light"] main :is(.card, .notice) { color: #fff; --ink: #fff; --ink-2: #ffe9e6; --line: rgba(255,255,255,.35); }
:root[data-scenes][data-ptext="light"] main :is(.card, .notice) :is(.muted, .small) { color: #ffe9e6; }
:root[data-scenes][data-ptext="light"] main :is(.card, .notice) :is(h1, h2, h3, p, li, label, summary, strong) { color: #fff; }
:root[data-scenes][data-ptext="light"] main .card .badge { background: rgba(255,255,255,.92); }
:root[data-scenes][data-ptext="light"] main .card .badge.ok { color: #14602c; } :root[data-scenes][data-ptext="light"] main .card .badge.warn { color: #7a4a00; } :root[data-scenes][data-ptext="light"] main .card .badge:not(.ok):not(.warn):not(.bad):not(.info) { color: #1b1b2f; }
/* emplacement du futur motif multicolore (BG-14) derrière les listes de S'entraîner */
:root[data-scenes][data-page="entrainer"] main .card.list, :root[data-scenes][data-page="entrainer"] main ul.list.card { background-image: var(--theme-bg-train, none); background-size: 420px auto; }
/* menu : couleurs vives, texte foncé sur l'entrée courante */
:root[data-scenes] #nav-list a[href="#/accueil"] { --nv: var(--pgc-accueil, #8fd3f6); }
:root[data-scenes] #nav-list a[href="#/biblio"] { --nv: var(--pgc-biblio, #8fd3f6); }
:root[data-scenes] #nav-list a[href="#/programme"], :root[data-scenes] #nav-list a.pomo-nav { --nv: var(--pgc-programme, #8ede5b); }
:root[data-scenes] #nav-list a[href="#/entrainer"] { --nv: var(--pgc-entrainer, #e83a32); }
:root[data-scenes] #nav-list a[href="#/anki"] { --nv: var(--pgc-anki, #fbc2dc); }
:root[data-scenes] #nav-list a[href="#/maseance"] { --nv: var(--pgc-maseance, #c8a8f2); }
:root[data-scenes] #nav-list > li > a { background: color-mix(in srgb, var(--nv) 38%, transparent); border: 2px solid color-mix(in srgb, var(--nv) 70%, transparent); }
:root[data-scenes] #nav-list a:hover { background-color: color-mix(in srgb, var(--nv) 60%, transparent); }
:root[data-scenes] #nav-list a[aria-current="page"] { background-color: var(--nv); color: #1b1b2f; font-weight: 700; box-shadow: 0 0 0 2px #1b1b2f; }
:root[data-scenes] #nav-list a[href="#/entrainer"][aria-current="page"] { color: #fff; }
:root[data-scenes] #nav-list a[href="#/biblio"] { background-image: linear-gradient(rgba(22,22,40,.12), rgba(22,22,40,.12)), var(--theme-bg-subject, none); }

/* Pomodoro : réglage direct des durées par flèches, police du jeu partout */
.pomo-steps { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; margin: .6rem 0 .2rem; }
.pomo-step { display: inline-flex; align-items: center; gap: .35rem; }
.pomo-step-t { font-weight: 700; font-size: .9rem; }
.pomo-step-val { min-width: 4.2rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.pomo-arrow { padding: .2rem .55rem; min-height: 0; line-height: 1.1; }
.pomo-checks { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin: .6rem 0 .2rem; }
:root[data-font] .pomo-dlg, :root[data-font] .pomo-dlg summary, :root[data-font] .pomo-dlg label, :root[data-font] .pomo-dlg .pomo-step-t, :root[data-font] .pomo-dlg .pomo-step-val, :root[data-font] .pomo-dlg .pomo-amb-title { font-family: var(--font-display, inherit); font-weight: 400; letter-spacing: .02em; }
:root[data-font] .pomo-dlg .small, :root[data-font] .pomo-dlg p { font-family: inherit; }
:root[data-scenes] .pomo-dlg .pomo-arrow[data-skin] { padding: .15rem .5rem; font-size: 1rem; }
:root[data-scenes] .pomo-dlg .pomo-step-val { color: #fff; -webkit-text-stroke: .1em #1b1b2f; paint-order: stroke fill; font-size: 1.15rem; }
:root[data-scenes] .pomo-dlg .pomo-step-t { color: var(--pl-ink, #fff); }
:root[data-scenes] .pomo-dlg { --ph: var(--pgl-pomodoro, var(--c15, #1f7a2a)); }
:root[data-scenes] .pomo-dlg .pomo-check, :root[data-scenes] .pomo-dlg summary { color: var(--ink); }

/* texte des boutons illustrés : toujours blanc, quelle que soit la couleur de la page */
:root[data-btnimg] main :is([data-skin="main"], [data-skin="go"]), :root[data-btnimg] main :is([data-skin="main"], [data-skin="go"]) *, :root[data-btnimg] dialog :is([data-skin="main"], [data-skin="go"]), :root[data-btnimg] dialog :is([data-skin="main"], [data-skin="go"]) * { color: var(--btn-skin-ink, #fff) !important; }
/* Pomodoro : fond vert herbe (travail) ou ciel (pause), texte foncé */
:root[data-scenes] .pomo-dlg { background: linear-gradient(180deg, #b4ef8f, var(--pgc-pomodoro, #8ede5b)); color: var(--pl-ink, #1d2433); --ink: var(--pl-ink, #1d2433); --ink-2: var(--pl-ink-2, #3a4256); --line: rgba(0,0,0,.25); --surface: #ffffff; }
:root[data-scenes] .pomo-dlg[data-phase="short"], :root[data-scenes] .pomo-dlg[data-phase="long"] { background: linear-gradient(180deg, #c4ecff, #8fd3f6); --ph: #2a78b8; }
:root[data-scenes] .pomo-dlg .pomo-amb { background: rgba(255,255,255,.55); }
:root[data-scenes] .pomo-dlg :is(.pomo-step-t, summary, .pomo-check, label, .pomo-amb-title, p, .small) { color: var(--pl-ink, #1d2433); }
:root[data-scenes] .pomo-dlg .pomo-chip { color: var(--pl-ink, #1d2433); background: #fff7c2; border-color: #1b1b2f; }
:root[data-scenes] .pomo-dlg .pomo-chip.on { color: #fff; }
:root[data-scenes] .pomo-dlg .pomo-vol output, :root[data-scenes] .pomo-dlg .pomo-vol-out { color: var(--pl-ink, #1d2433); }
:root[data-scenes] .pomo-dlg .pomo-time { margin: 0 0 .2rem; }
.pomo-dlg .pomo-sec { gap: .4rem; }

/* ===== Mon programme : bloc de lancement ===== */
.launch { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
.launch-main { display: flex; flex-direction: column; gap: .3rem; }
/* ===== Pomodoro : Yoshi qui travaille ou qui dort, vert Yoshi ===== */
.pomo-yoshi { display: block; height: 7.5rem; width: auto; margin: .2rem auto 0; filter: drop-shadow(0 4px 4px rgba(0,0,0,.35)); }
.pomo-yoshi.asleep { animation: yoshiz 3.2s ease-in-out infinite; }
@keyframes yoshiz { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .pomo-yoshi.asleep { animation: none; } }
:root[data-scenes] .pomo-dlg { background: linear-gradient(180deg, #a6e05a, #7cc43c); border-color: #2d6a1e; }
:root[data-scenes] .pomo-dlg[data-phase="short"], :root[data-scenes] .pomo-dlg[data-phase="long"] { background: linear-gradient(180deg, #8fd16b, #63ae3a); }
:root[data-scenes] .pomo-dlg .pomo-time { margin-top: 0; }
/* ===== Police du jeu PARTOUT (hors contenu des cours) ===== */
:root[data-font] body, :root[data-font] button, :root[data-font] input, :root[data-font] select, :root[data-font] textarea, :root[data-font] .btn { font-family: var(--font-display), system-ui, sans-serif; letter-spacing: .012em; }
:root[data-font] .docx, :root[data-font] .docx *, :root[data-font] .pdf-pane, :root[data-font] .pdf-pane *, :root[data-font] .textLayer, :root[data-font] .textLayer *, :root[data-font] .passage, :root[data-font] .ak-html, :root[data-font] .ak-html * { font-family: "Segoe UI", system-ui, sans-serif; letter-spacing: 0; }
/* hiérarchie avec une seule graisse : taille, contour et couleur */
:root[data-font] h1 { font-size: 2.1rem; -webkit-text-stroke: .08em var(--s-stroke, #1b1b2f); paint-order: stroke fill; text-shadow: 0 2px 0 var(--s-stroke, #1b1b2f); letter-spacing: .03em; }
:root[data-font] h2 { font-size: 1.55rem; letter-spacing: .02em; }
:root[data-font] h3 { font-size: 1.2rem; letter-spacing: .02em; color: var(--accent); }
:root[data-font] .sec h3, :root[data-font] [data-ptext] main .card h3 { color: inherit; }
:root[data-font] strong, :root[data-font] b, :root[data-font] .item-title, :root[data-font] summary { font-weight: 400; }
:root[data-font] .item-title, :root[data-font] summary { font-size: 1.08em; }
:root[data-font] .muted, :root[data-font] .small { letter-spacing: .01em; }
:root[data-font] .kpi { font-size: 2.6rem; -webkit-text-stroke: .05em var(--s-stroke, #1b1b2f); paint-order: stroke fill; }
:root[data-font] .badge { font-weight: 400; letter-spacing: .03em; }
:root[data-font] #nav-list a { font-size: 1.08rem; }
:root[data-font] { --lh: 1.5; }

:root[data-scenes] .pomo-dlg .pomo-ghost { color: var(--pl-ink, #1d2433); text-decoration: underline; }
.pomo-yoshi { height: 6rem; }

/* ===== Police du jeu plus fine à lire : tailles réduites, contours allégés ===== */
:root[data-font] body { font-size: 16px; }
:root[data-font] h1 { font-size: 1.9rem; -webkit-text-stroke: .035em var(--s-stroke, #1b1b2f); text-shadow: 0 1px 0 var(--s-stroke, #1b1b2f); }
:root[data-font] .kpi { font-size: 2rem; -webkit-text-stroke: 0; text-shadow: none; letter-spacing: .02em; }
:root[data-font] .page-banner, :root[data-font] .sub-banner, :root[data-font] .sec.scene .sec-head h2, :root[data-font] h2.world-banner { -webkit-text-stroke: .2em var(--s-stroke, #1b1b2f); text-shadow: 0 2px 0 var(--s-stroke, #1b1b2f); }
:root[data-font] .page-banner { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.2rem); }
:root[data-font] .sub-banner { font-size: clamp(1.15rem, .95rem + .8vw, 1.45rem); }
:root[data-font] .pomo-dlg .pomo-time { -webkit-text-stroke: .06em #1b1b2f; text-shadow: 0 3px 0 #1b1b2f; }
:root[data-font] .pomo-dlg .pomo-phase { font-size: 1rem; }
:root[data-font] [data-skin] { -webkit-text-stroke-width: 1px !important; font-size: .95rem; }
:root[data-font] .stat-label, :root[data-font] .tile-t, :root[data-font] .badge { font-size: .85rem; letter-spacing: .02em; }
/* menu : Bibliothèque (fond briques) garde un texte clair et lisible quand elle est courante */
:root[data-scenes] #nav-list a[href="#/biblio"], :root[data-scenes] #nav-list a[href="#/biblio"][aria-current="page"] { color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
:root[data-scenes] #nav-list a[href="#/biblio"][aria-current="page"] { background-color: #3f93cf; background-image: linear-gradient(rgba(22,22,40,.12), rgba(22,22,40,.12)), var(--theme-bg-subject, none); }
/* S'entraîner : motif multicolore Mario derrière les listes (voile rouge pour garder le texte lisible) */
:root[data-scenes][data-page="entrainer"] main .card:has(> .list, > li), :root[data-scenes][data-page="entrainer"] main ul.list.card, :root[data-scenes][data-page="entrainer"] main .card.list { background-image: linear-gradient(rgba(232,58,50,.55), rgba(232,58,50,.55)), var(--theme-bg-train, none); background-size: auto, 480px auto; }

:root[data-scenes][data-page="entrainer"] main .card:has(> .list, > li), :root[data-scenes][data-page="entrainer"] main ul.list.card, :root[data-scenes][data-page="entrainer"] main .card.list { background-image: linear-gradient(rgba(232,58,50,.32), rgba(232,58,50,.32)), var(--theme-bg-train, none); }

/* ===== Deux polices : Nunito (lecture, moins épaisse) pour les textes ; Lilita One (jeu) pour titres, boutons, menu, onglets, chiffres ===== */
:root[data-font] body, :root[data-font] input, :root[data-font] select, :root[data-font] textarea { font-family: var(--font-body, var(--font-display)), system-ui, sans-serif; letter-spacing: 0; font-weight: 600; }
:root[data-font] strong, :root[data-font] b, :root[data-font] .item-title, :root[data-font] .chap .t, :root[data-font] summary { font-weight: 800; }
:root[data-font] button, :root[data-font] .btn, :root[data-font] h1, :root[data-font] h2, :root[data-font] h3, :root[data-font] .page-banner, :root[data-font] .sub-banner, :root[data-font] .eyebrow, :root[data-font] .kpi, :root[data-font] .focus-tag, :root[data-font] .subj-name, :root[data-font] #nav-list a, :root[data-font] .page-tabs a, :root[data-font] .ak-tab, :root[data-font] .tile-n, :root[data-font] .pomo-dlg, :root[data-font] .pomo-pill, :root[data-font] .brand { font-family: var(--font-display), system-ui, sans-serif; letter-spacing: .015em; font-weight: 400; }
:root[data-font] .badge { font-family: var(--font-body, var(--font-display)), system-ui, sans-serif; font-weight: 800; letter-spacing: 0; }
:root[data-font] .pomo-dlg :is(p, .small, .muted) { font-family: var(--font-body, inherit), system-ui, sans-serif; font-weight: 700; }
:root[data-font] .chap .t { font-size: 1.02rem; }

:root[data-font] .chap-link, :root[data-font] .item-title a { font-family: var(--font-body, inherit), system-ui, sans-serif; font-weight: 800; }
:root[data-font] .sec.scene .item-title, :root[data-font] .sec.scene .chap-link { font-family: var(--font-body, inherit), system-ui, sans-serif; font-weight: 800; }

/* ===== Retour aux gros titres à contour épais ===== */
:root[data-font] h1 { font-size: 2.1rem; -webkit-text-stroke: .08em var(--s-stroke, #1b1b2f); text-shadow: 0 2px 0 var(--s-stroke, #1b1b2f); }
:root[data-scenes] .page-banner, :root[data-font] .page-banner { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); -webkit-text-stroke: .28em var(--s-stroke, #1b1b2f); text-shadow: 0 3px 0 var(--s-stroke, #1b1b2f); }
:root[data-scenes] .sub-banner, :root[data-font] .sub-banner { font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); -webkit-text-stroke: .28em var(--s-stroke, #1b1b2f); text-shadow: 0 3px 0 var(--s-stroke, #1b1b2f); }
:root[data-font] h2.world-banner { -webkit-text-stroke: .3em var(--s-stroke, #1b1b2f); text-shadow: 0 3px 0 var(--s-stroke, #1b1b2f); }
:root[data-font] .sec.scene .sec-head h2, :root[data-font] .sec.scene[data-poster] > summary { font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.7rem); -webkit-text-stroke: .32em var(--s-stroke, #1b1b2f); text-shadow: 0 3px 0 var(--s-stroke, #1b1b2f); }
/* ===== Boutons « Aller à » lisibles ===== */
:root[data-scenes] .sec-chip { background: var(--sec); color: #fff; border: 2px solid #1b1b2f; font-family: var(--font-display), system-ui, sans-serif; font-weight: 400; font-size: 1.05rem; letter-spacing: .02em; -webkit-text-stroke: .2em #1b1b2f; paint-order: stroke fill; padding: .3rem .8rem; }
:root[data-scenes] .sec-chip .ico { -webkit-text-stroke: 0; }
/* ===== Menu : couleurs exactes, texte contouré ===== */
:root[data-scenes] #nav-list > li > a { background: var(--nv); border: 2px solid #1b1b2f; color: #fff; -webkit-text-stroke: .22em #000; paint-order: stroke fill; letter-spacing: .02em; }
:root[data-scenes] #nav-list a:hover { background-color: var(--nv); filter: brightness(1.12); }
:root[data-scenes] #nav-list a[aria-current="page"] { background-color: var(--nv); color: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #1b1b2f; }
:root[data-scenes] #nav-list a[href="#/accueil"] { --nv: #39b2ff; } :root[data-scenes] #nav-list a[href="#/programme"], :root[data-scenes] #nav-list a.pomo-nav { --nv: #00a504; }
:root[data-scenes] #nav-list a[href="#/entrainer"], :root[data-scenes] #nav-list a[href="#/entrainer"][aria-current="page"] { --nv: #d02219; color: #ffd400; }
:root[data-scenes] #nav-list a[href="#/anki"] { --nv: #ff4dd3; }
:root[data-scenes] #nav-list a[href="#/biblio"], :root[data-scenes] #nav-list a[href="#/biblio"][aria-current="page"] { -webkit-text-stroke: 0; }
/* ===== S'entraîner : blocs rouges, titres jaunes ===== */
:root[data-scenes][data-page="entrainer"] .page-banner, :root[data-scenes][data-page="entrainer"] .sub-banner { background-color: #d02219; color: #ffd400; }
:root[data-scenes][data-page="entrainer"] main :is(h1, h2, h3, summary, .item-title, .eyebrow) { color: #ffd400; }
:root[data-scenes][data-page="entrainer"] .page-banner::before, :root[data-scenes][data-page="entrainer"] .sub-banner::before { filter: hue-rotate(150deg) saturate(1.4); opacity: .85; }
:root[data-scenes][data-page="entrainer"] main :is(.card, .notice, details.card) :is(h1, h2, h3, p, li, label, summary, strong) { color: #fff; }
:root[data-scenes][data-page="entrainer"] main :is(.card, .notice) .item-title { color: #ffd400; }
:root[data-scenes][data-page="entrainer"] main .card:has(> .list, > li), :root[data-scenes][data-page="entrainer"] main ul.list.card, :root[data-scenes][data-page="entrainer"] main .card.list { background-image: linear-gradient(rgba(208,34,25,.18), rgba(208,34,25,.18)), var(--theme-bg-train, none); background-size: auto, 960px auto; }
/* ===== Bibliothèque : bandeaux blancs avec dégradé vers l'image ===== */
:root[data-scenes][data-page="biblio"] .page-banner { background-color: #fff; }
:root[data-scenes] h2.world-banner[data-pano] { background-color: #fff; background-image: linear-gradient(90deg, #fff 0%, #fff 22%, rgba(255,255,255,.6) 42%, rgba(255,255,255,.2) 62%, transparent 85%), var(--pn-d); }
/* ===== Pomodoro : croix de fermeture ===== */
.pomo-close { position: absolute; top: .5rem; right: .5rem; z-index: 5; width: 2.2rem; height: 2.2rem; min-height: 0; padding: 0; border-radius: 50%; font-size: 1.1rem; line-height: 1; display: grid; place-items: center; background: #fff; color: #1b1b2f; border: 2px solid #1b1b2f; cursor: pointer; }
.pomo-close:hover { background: #ffd400; }

:root[data-font] .sec.scene .sec-head h2, :root[data-font] .sec.scene[data-poster] > summary { font-size: clamp(1.45rem, 1rem + 1.5vw, 2.1rem); }

/* ===== Grandes icônes : menu et titres ===== */
:root[data-scenes] #nav-list .ico { width: 2.1rem; height: 2.1rem; }
:root[data-scenes] #nav-list a { gap: .6rem; padding-top: .4rem; padding-bottom: .4rem; }
:root[data-scenes] #nav-list a { font-size: 1.25rem; }
.banner-ico { flex: none; display: inline-grid; place-items: center; margin-right: .9rem; -webkit-text-stroke: 0; text-shadow: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.banner-ico img { width: 100%; height: 100%; object-fit: contain; }
.banner-ico-lg { width: 5.2rem; height: 5.2rem; margin-left: -.5rem; }
.banner-ico-md { width: 3.4rem; height: 3.4rem; margin-left: -.3rem; }
.page-banner, .sub-banner { overflow: visible; }
:root[data-scenes] .page-banner { min-height: 6.4rem; }
:root[data-scenes] .sub-banner { min-height: 4.4rem; }
/* ===== Compromis police Mario / lisibilité : étiquettes et titres de blocs en police du jeu, texte courant en Nunito net ===== */
:root[data-font] main :is(label, strong, b, summary, .eyebrow, .item-title, h3, .tile-t, .stat-label) { font-family: var(--font-display), system-ui, sans-serif; font-weight: 400; letter-spacing: .02em; }
:root[data-font] main label, :root[data-font] main summary { font-size: 1.08rem; }
:root[data-font] main :is(.card, .notice) :is(p, li, .small, .muted, td) { font-family: var(--font-body, inherit), system-ui, sans-serif; font-weight: 700; }
/* sur fonds vifs clairs (bleu, vert, rose) : tout le texte est franchement foncé, jamais estompé */
:root[data-scenes][data-ptext="dark"]:not([data-page="biblio"]) main :is(.card, .notice, details.card) :is(.muted, .small, label, p, li, summary, strong, h3, .eyebrow, .item-title) { color: #0c1620; opacity: 1; }
:root[data-scenes][data-ptext="dark"]:not([data-page="biblio"]) main :is(.card, .notice) a:not(.btn) { color: #062a6a; font-weight: 800; }
:root[data-scenes][data-ptext="dark"]:not([data-page="biblio"]) main .launch-main .small { color: #0c1620; }
:root[data-scenes][data-ptext="dark"] main .card .badge { color: #0c1620; }

/* S'entraîner : motif agrandi */
:root[data-scenes][data-page="entrainer"] main .card:has(> .list, > li), :root[data-scenes][data-page="entrainer"] main ul.list.card, :root[data-scenes][data-page="entrainer"] main .card.list { background-size: auto, 1920px auto; }
:root[data-scenes][data-page="entrainer"] .set-row > .thumb-kind { width: 4.4rem; height: 4.4rem; align-self: center; }
:root[data-scenes][data-page="entrainer"] .set-row .thumb-kind .ico { width: 3.4rem; height: 3.4rem; }
:root[data-scenes][data-page="entrainer"] .set-row .thumb-kind .ico.themed { width: 4rem; height: 4rem; }
:root[data-scenes][data-page="entrainer"] .list > li { align-items: center; }
/* Bandeaux de page : exactement la couleur de la page (celle du menu) */
:root[data-scenes] .page-banner, :root[data-scenes] .sub-banner { background-color: var(--page-col, var(--c01, #39b2ff)); }
/* Menu : fond noir, icônes très grandes qui débordent un peu */
:root[data-scenes] .nav { background-color: #000; }
:root[data-scenes] #nav-list a { overflow: visible; min-height: 3.2rem; }
:root[data-scenes] #nav-list .ico { width: 3rem; height: 3rem; margin: -.55rem 0; flex: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
:root[data-scenes] #nav-list .ico img { width: 100%; height: 100%; }
:root[data-scenes] #nav-list .nav-more > summary .ico, :root[data-scenes] #nav-list .nav-more > ul .ico { width: 2.4rem; height: 2.4rem; margin: -.3rem 0; }
.nav { background-color: #000; }
/* Menu repliable (PC) */
#nav-fold, #nav-unfold { position: fixed; z-index: 60; min-height: 0; padding: 0; width: 2rem; height: 2.6rem; border-radius: 0 10px 10px 0; font-size: 1.3rem; line-height: 1; background: #000; color: #fff; border: 2px solid #ffd400; border-left: 0; cursor: pointer; display: none; }
#nav-fold { left: 15.5rem; top: .8rem; }
#nav-unfold { left: 0; top: .8rem; }
@media (min-width: 64rem) { #nav-fold { display: block; } .nav-collapsed #nav-fold { display: none; } .nav-collapsed #nav-unfold { display: block; }
  .nav-collapsed .shell { grid-template-columns: 0 minmax(0, 1fr); } .nav-collapsed .nav { display: none; } .nav-collapsed main { max-width: none; padding-left: 3.2rem; } }

:root[data-scenes] #nav-list a { font-size: 1.1rem; white-space: nowrap; }
:root[data-scenes] #nav-list .nav-more a { white-space: normal; line-height: 1.15; } /* sous-menu « Plus » : un nom long passe à la ligne au lieu d'être coupé par le bord du menu */

/* menu : même fond étoilé que toutes les pages ; liseré de la page courante à l'intérieur du bouton (rien n'est coupé) */
:root[data-scenes] .nav, .nav { background-color: var(--bg, #14181f); background-image: var(--theme-bg-page, none); background-size: 640px auto; }
:root[data-scenes] #nav-list a[aria-current="page"] { box-shadow: inset 0 0 0 3px #fff; }
:root[data-scenes] #nav-list { padding: 0 .35rem; }
#nav-fold, #nav-unfold { display: none !important; }

/* Personnage juste après le titre : dépasse un peu en haut du bandeau, coupé en bas */
:root[data-scenes] .page-banner:has(.banner-char) { margin-top: 1.6rem; }
.banner-char { position: relative; flex: none; align-self: stretch; width: 8.5rem; margin-left: .8rem; pointer-events: none; }
.banner-char img { position: absolute; left: 50%; bottom: -1.2rem; height: 150%; width: auto; max-width: none; transform: translateX(-50%); clip-path: inset(-100vh -100vw 1.2rem -100vw); filter: drop-shadow(0 4px 4px rgba(0,0,0,.4)); }
.page-banner::before { border-radius: inherit; }
@media (max-width: 40rem) { .banner-char { display: none; } }

/* personnages : comme la maquette — la tête dépasse nettement au-dessus du bandeau, le corps disparaît derrière son bord bas */
:root[data-scenes] .page-banner, :root[data-scenes] .page-banner:has(.banner-char) { overflow: visible; }
:root[data-scenes] .page-banner:has(.banner-char) { margin-top: 3.6rem; }
.banner-char { width: 11rem; margin-left: .4rem; }
.banner-char img { height: 200%; bottom: -50%; clip-path: inset(-100vh -100vw 25% -100vw); }

/* personnage : la boîte va exactement du haut au bas du bandeau (marges négatives = padding) et coupe tout ce qui est en dessous */
.banner-char { align-self: stretch; margin-top: -.8rem; margin-bottom: -.8rem; width: 12rem; clip-path: inset(-100vh -100vw 0 -100vw); }
.banner-char img { height: 215%; bottom: -12%; left: 50%; clip-path: none; transform: translateX(-50%); }

.banner-char img { height: 180%; bottom: -22%; }
:root[data-scenes] .page-banner:has(.banner-char) { margin-top: 2.6rem; }

/* motif facultatif par page (BGP-<page>) : posé sous un voile de la couleur de la page */
:root[data-scenes] main .card:not(.sec .card):not(.where):not([data-pano]) { background-image: var(--bgp-layer, none); background-size: 640px auto; }

/* ===== Réglages de l'éditeur de thème (--tune-*) ===== */
:root[data-scenes] button, :root[data-scenes] .btn { border-radius: var(--btn-radius, 8px); }
:root[data-scenes] .banner-char img { height: var(--tune-char-h, 180%); bottom: var(--tune-char-b, -22%); }
:root[data-scenes] #nav-list .ico { width: var(--tune-nav-icon, 3rem); height: var(--tune-nav-icon, 3rem); }
:root[data-scenes] body::before { opacity: var(--tune-bg-op, .55); }
:root[data-scenes] .sec.scene { --scene-veil-a: var(--tune-veil, 0); }
:root[data-scenes] .sec.scene .card::before, :root[data-scenes] .sec.scene .notice::before, :root[data-scenes] .sec.scene ul.list::before { opacity: var(--tune-card-a, 1); }
:root[data-scenes] .page-banner, :root[data-scenes] .sub-banner { -webkit-text-stroke-width: var(--tune-stroke, .28em); }

/* Éditeur de thème */
.te-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: .5rem 1.2rem; margin-top: .6rem; }
.te-row { display: flex; align-items: center; gap: .6rem; margin: 0; font-weight: 400; }
.te-row > span:first-child { flex: 1 1 10rem; min-width: 0; }
.te-row input[type=color] { width: 2.6rem; height: 2.2rem; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.te-row input[type=range] { flex: 1 1 8rem; } .te-hex { width: 6.4rem; font-family: ui-monospace, monospace; }
.te-bar { position: sticky; top: 0; z-index: 6; background: var(--bg); padding: .5rem 0; align-items: center; }

.te-ptable { margin-top: .6rem; display: grid; gap: .4rem; } .te-prow { display: grid; grid-template-columns: 11rem 4rem 4rem minmax(9rem, 12rem); gap: .8rem; align-items: center; } .te-prow input[type=color] { width: 3rem; height: 2.2rem; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; }
.te-row .te-hex { width: 6.6rem; }
/* éditeur de thème : textes illisibles (audit de lisibilité), en tête de page */
.te-lis { border: 2px solid #d9480f; } .te-lis-title { margin: 0; font-size: 1.1rem; }
.te-lis-list { list-style: none; margin: .6rem 0 0; padding: 0; max-height: 22rem; overflow-y: auto; display: grid; gap: .4rem; }
.te-lis-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .4rem .6rem; border: 1px solid var(--line); border-left: 4px solid #d9480f; border-radius: 8px; } .te-lis-row > div { flex: 1 1 16rem; min-width: 0; }
.te-lis-row.ok { border-left-color: #2f9e44; opacity: .75; } .te-lis-row.warn { border-left-color: #c92a2a; border-left-width: 8px; } .te-lis-scope { margin-top: .2rem; } /* la couleur du texte reste celle du thème (lisible sur son propre fond) ; seuls ⚠/✔ et la bordure changent */
.te-lis-btn { background: #d9480f; color: #fff; border-color: #d9480f; font-weight: 700; } .te-badge { font-weight: 700; }
.te-lis-crops { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; } .te-lis-shot { max-width: 100%; border: 2px solid #d9480f; border-radius: 6px; } .te-lis-act { display: grid; gap: .3rem; }
.te-lis-prop { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; padding: .4rem .5rem; border: 1px dashed var(--line); border-radius: 8px; } .te-lis-chip { padding: .3rem .7rem; border-radius: 6px; font-weight: 700; font-size: 1.15rem; } .te-lis-pbtns { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .25rem; }
.te-lis-manual { display: grid; gap: .3rem; } .te-lis-manual label { margin: 0; font-weight: 400; display: flex; align-items: center; gap: .4rem; }
.te-lis-row input[type=color] { width: 2.6rem; height: 2.2rem; padding: 0; vertical-align: middle; }


.te-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .7rem; margin-top: .6rem; }
.te-slot { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .3rem; padding: .5rem; border: 2px dashed var(--line); border-radius: 12px; cursor: pointer; text-align: center; min-height: 9rem; background: var(--surface); }
.te-slot img { width: 100%; height: 6rem; object-fit: contain; border-radius: 8px; background: repeating-conic-gradient(#8884 0% 25%, #fff2 0% 50%) 50% / 14px 14px; }
.te-slot.missing { border-color: #e4b52b; background: color-mix(in srgb, #e4b52b 12%, var(--surface)); }
.te-slot.over, .te-slot:focus-visible { border-style: solid; border-color: var(--accent); }
.te-plus { display: grid; place-items: center; width: 100%; height: 6rem; font-size: 2.4rem; color: var(--ink-2); }
.te-cutgrid { display: grid; grid-template-columns: 240px 1fr; gap: 1rem; align-items: start; margin-top: .5rem; } .te-cut { width: 240px; height: 300px; border-radius: 8px; border: 1px solid var(--line); }
@media (max-width: 40rem) { .te-cutgrid { grid-template-columns: 1fr; } }

.te-slot strong { overflow-wrap: anywhere; }

.te-slots { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.te-slot { min-height: 12rem; } .te-slot img { height: 10rem; } .te-plus { height: 10rem; }
.te-viewer { width: min(96vw, 70rem); max-height: 94vh; overflow: auto; }
.te-bigwrap { margin: .6rem 0; max-height: 70vh; overflow: auto; text-align: center; }
.te-big { max-width: 100%; max-height: 68vh; border-radius: 8px; background: repeating-conic-gradient(#8884 0% 25%, #fff2 0% 50%) 50% / 18px 18px; }
.te-big[data-bg="white"] { background: #fff; } .te-big[data-bg="black"] { background: #000; }

/* mini-fenêtre d'aperçu de l'éditeur de thème */
.pv-box { position: fixed; right: .8rem; bottom: .8rem; z-index: 70; width: var(--pv-w, 540px); background: var(--surface); border: 3px solid var(--accent); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.6); overflow: hidden; }
.pv-head { display: flex; align-items: center; gap: .4rem; padding: .3rem .5rem; background: var(--surface-2); } .pv-head strong { flex: 1; } .pv-head select { max-width: 10rem; padding: .15rem .3rem; } .pv-head button { min-height: 0; padding: .1rem .5rem; }
.pv-wrap { position: relative; width: 100%; overflow: hidden; background: #000; }
.pv-frame { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; border: 0; transform-origin: 0 0; transform: scale(var(--pv-s, .42)); pointer-events: none; }
.pv-box.pv-min .pv-wrap { display: none; }
@media (max-width: 70rem) { .pv-box { display: none; } }

.te-pages { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 .4rem; } .te-tab[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.pv-box { max-width: 46vw; }

.te-layout { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 1.2rem; align-items: start; } .te-side { position: sticky; top: .6rem; } .te-side .pv-box { position: static; width: 100%; max-width: none; }
@media (max-width: 70rem) { .te-layout { grid-template-columns: 1fr; } .te-side { display: none; } }

/* arrière-plan propre à la page (BGPAGE-<page>) sinon fond général */
:root[data-scenes] body { background-image: var(--theme-bg-page-cur, var(--theme-bg-page, none)); }

.te-slot.auto { border-style: solid; border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); } .te-slot.optional { border-style: dotted; } .te-auto { color: var(--accent); font-weight: 700; }

/* effets d'image : miroir (le dégradé de fondu suit) et teinte */
:root[data-scenes] .page-banner::before, :root[data-scenes] .sub-banner::before { transform: scaleX(var(--pb-flip, 1)); -webkit-mask-image: linear-gradient(var(--pb-dir, to right), transparent 0, transparent 8%, rgba(0,0,0,.5) 40%, #000 80%); mask-image: linear-gradient(var(--pb-dir, to right), transparent 0, transparent 8%, rgba(0,0,0,.5) 40%, #000 80%); }
.banner-char img { transform: translateX(-50%) scaleX(var(--cf, 1)); }
/* zones d'image sur les blocs : l'image occupe tout le bloc, fondue vers la couleur du bloc côté texte */
:root[data-scenes] .has-zimg { position: relative; isolation: isolate; overflow: hidden; }
:root[data-scenes] .has-zimg::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(color-mix(in srgb, var(--zvc, #000) calc(var(--zv, 0) * 100%), transparent), color-mix(in srgb, var(--zvc, #000) calc(var(--zv, 0) * 100%), transparent)), var(--zi) right center / cover no-repeat; transform: scaleX(var(--zf, 1)); filter: hue-rotate(var(--zh, 0deg)); -webkit-mask-image: linear-gradient(var(--zdir, to right), transparent 0, transparent 30%, rgba(0,0,0,.55) 55%, #000 85%); mask-image: linear-gradient(var(--zdir, to right), transparent 0, transparent 30%, rgba(0,0,0,.55) 55%, #000 85%); pointer-events: none; }

.te-fx { display: grid; gap: .3rem; width: 100%; margin-top: .3rem; text-align: left; } .te-fx input[type=range] { width: 100%; } .te-fx .row { gap: .3rem; } .te-fx button { padding: .15rem .5rem; min-height: 0; }

/* texte 2 : petits textes, légendes, pastilles (si le thème fournit une 3e police) */
:root[data-font] :is(.small, .muted, .badge, .stat-label, .tile-t, figcaption) { font-family: var(--font-body2, var(--font-body, var(--font-display))), system-ui, sans-serif; }

.te-tune { display: grid; grid-template-columns: minmax(8rem, 1.2fr) minmax(9rem, 1fr) minmax(6rem, 1.4fr) 4.5rem; gap: .5rem; align-items: center; } .te-tune select { max-width: 100%; }
.te-font { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--line); } .te-sample { font-size: 1.4rem; margin-top: .3rem; }
.te-tree { width: min(96vw, 64rem); max-height: 92vh; overflow: auto; } .te-tree-ul { list-style: none; margin: .2rem 0 .4rem; padding-left: 1.1rem; border-left: 2px solid var(--line); } .te-tree-ul > li { margin: .25rem 0; } .te-leaf { padding-left: .3rem; }
.te-tree-route { margin: .5rem 0; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 10px; } .te-tree summary { cursor: pointer; } .te-slots-one { grid-template-columns: minmax(12rem, 20rem); }

.pv-frame { pointer-events: auto !important; }
@keyframes pvflash { 0%,100% { outline-color: transparent; } 20%,80% { outline-color: #ff2d55; } }
.pv-flash { outline: 6px solid #ff2d55; outline-offset: 4px; animation: pvflash 3.5s ease-in-out 1; }

/* images de bandeau posées par l'utilisateur : aucune teinte ni saturation ajoutée par l'application */
:root[data-scenes] .page-banner.pb-own::before, :root[data-scenes] .sub-banner.pb-own::before, :root[data-scenes][data-page] .page-banner.pb-own::before, :root[data-scenes][data-page] .sub-banner.pb-own::before { filter: hue-rotate(var(--pb-hue, 0deg)); opacity: 1; }
/* ligne répétée derrière chaque ligne de liste (option « ROW ») : remplace le motif */
:root[data-scenes][data-row="line"] main ul.list.card, :root[data-scenes][data-row="line"] main .card.list { background-image: none; padding: 0; overflow: hidden; }
:root[data-scenes] .has-row { background: var(--row-img) center / 100% 100% no-repeat; border-bottom: 0; padding: .9rem 1.6rem; min-height: 3.6rem; align-items: center; }
:root[data-scenes] .chap.has-row { margin: .35rem 0; }
.te-del { margin-top: .3rem; }

:root[data-scenes][data-row="line"] main ul.list.card.has-zimg::before, :root[data-scenes][data-row="line"] main .card.list.has-zimg::before { display: none; } /* ligne répétée : l'image d'ensemble de la liste est mise de côté */

/* lignes illustrées : texte toujours lisible (blanc, titres des QCM et épreuves en jaune comme sur S'entraîner) */
:root[data-scenes] .has-row { color: #fff; --ink: #fff; --ink-2: #ffe9e6; --line: rgba(255,255,255,.35); }
:root[data-scenes] .has-row :is(.item-title, .chap-link, a.item-title, .chap-main a) { color: #fff; }
:root[data-scenes] .has-row[data-rowk="qcm"] :is(.item-title, .chap-link, a.item-title), :root[data-scenes] .has-row[data-rowk="epreuve"] :is(.item-title, .chap-link, a.item-title) { color: #ffd400; }
:root[data-scenes] .has-row :is(.muted, .small) { color: #ffe9e6; }
:root[data-scenes] .has-row .badge { background: rgba(255,255,255,.92); } :root[data-scenes] .has-row .badge.ok { color: #14602c; } :root[data-scenes] .has-row .badge.warn { color: #7a4a00; } :root[data-scenes] .has-row .badge:not(.ok):not(.warn):not(.bad):not(.info) { color: #1b1b2f; }
/* même ligne ailleurs que dans sa page : les bords se fondent dans le bloc clair, le texte reste sur la partie pleine */
:root[data-scenes] .has-row.row-fade { background: none; position: relative; isolation: isolate; padding: .9rem calc(1.2rem + var(--tune-rowfade, 0px)); margin: .35rem 0; border-bottom: 0; }
:root[data-scenes] .has-row.row-fade::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--row-img) center / 100% 100% no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--tune-rowfade, 0px), #000 calc(100% - var(--tune-rowfade, 0px)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--tune-rowfade, 0px), #000 calc(100% - var(--tune-rowfade, 0px)), transparent 100%); }

:root[data-scenes] .sec.scene .has-row :is(.item-title, .chap-link, a.item-title, .chap-main a, .item-title a) { color: #fff !important; }
:root[data-scenes] .sec.scene .has-row[data-rowk="qcm"] :is(.item-title, .chap-link, a.item-title), :root[data-scenes] .sec.scene .has-row[data-rowk="epreuve"] :is(.item-title, .chap-link, a.item-title) { color: #ffd400 !important; }
:root[data-scenes] .sec.scene .has-row :is(.muted, .small, p) { color: #ffe9e6 !important; }
/* Mobile : l'image du bloc ne couvre que l'illustration + le titre (taille proche de l'original) ; « Mon suivi », QCM et « Ouvrir » passent juste en dessous, hors du bloc. */
@media (max-width: 40rem) {
  /* Valable pour tous les thèmes et toutes les listes (cours, QCM, épreuves blanches, documents) : toute ligne illustrée dont le contenu est dans « .chap-main ». */
  :root[data-scenes] .has-row:has(> .chap-main), :root[data-scenes] .has-row.row-fade:has(> .chap-main) { background: none; padding: 0; min-height: 0; margin: .8rem 0; display: flex; flex-direction: column; align-items: stretch; gap: .5rem; }
  :root[data-scenes] .has-row.row-fade:has(> .chap-main)::before { display: none; }
  :root[data-scenes] .has-row > .chap-main { background: var(--row-img) center / 100% 100% no-repeat; padding: .8rem 1.1rem; min-height: 3.6rem; align-items: center; }
  :root[data-scenes] .has-row:has(> .chap-main) > :not(.chap-main) { padding: 0 .2rem; }
  :root[data-scenes] .has-row:has(> .chap-main) > .chap-actions { justify-self: start; }
  :root[data-scenes] .has-row:has(> .chap-main) > .row { flex-wrap: wrap; }
}

/* couleur de texte choisie dans l'éditeur sur un bloc ou une ligne (boutons et pastilles gardent la leur) */
:root[data-scenes] .has-zink, :root[data-scenes] .has-zink *:not(.badge):not(.badge *):not(.btn):not(.btn *):not(button):not(button *):not(svg *):not(img) { color: var(--zink) !important; --ink: var(--zink); --ink-2: var(--zink); }
:root[data-scenes] .has-zstroke, :root[data-scenes] .has-zstroke *:not(.badge):not(.badge *):not(.btn):not(.btn *):not(button):not(button *):not(svg *):not(img) { -webkit-text-stroke: var(--zsw) var(--zsc) !important; paint-order: stroke fill; } /* contour du texte d'un bloc (éditeur de thème : liste « illisible ») */
.te-ink { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .3rem; }

/* Couleurs des textes réglables (éditeur de thème > « Couleurs des textes ») : posées par theme.js applyPageText. Les listes de sélecteurs suivent TEXT_ROLES (theme-core.js). */
:root.pick-text main * { cursor: crosshair !important; }
:root.pick-text main :is(p, li, td, th, dd, dt, label, h1, h2, h3, h4, a, small, .muted, .small):hover { outline: 2px dashed #ff9f1a; outline-offset: 2px; }

.te-text { flex-wrap: wrap; } .te-text.te-hit { outline: 3px solid #ff9f1a; outline-offset: 3px; border-radius: 8px; }

/* contour et police par type de texte */
.te-fxline { flex: 1 1 100%; gap: 1rem; }

/* taille de police par type de texte */

/* Pomodoro v3 : ✕ toujours visible, Yoshi en grand sous le temps, Travail / Démarrer / Pause sur une ligne, accordéon */
.pomo-dlg .pomo-close { position: sticky; top: .4rem; margin: 0 0 -2.2rem auto; display: grid; z-index: 6; }
.pomo-dlg .pomo-yoshi { height: 15rem; margin: .1rem auto 0; position: relative; z-index: 1; }
.pomo-dlg .pomo-time { position: relative; z-index: 2; margin-top: -4.4rem !important; }
.pomo-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; margin: .4rem 0; }
.pomo-controls .pomo-step { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.pomo-controls .pomo-step-val { min-width: 0; font-size: 1.35rem !important; }
.pomo-step-btns { display: flex; gap: .4rem; }
.pomo-controls .pomo-arrow { width: 2.4rem; height: 2.2rem; padding: 0 !important; font-size: 1.3rem !important; line-height: 1; display: grid; place-items: center; }
.pomo-acc-row { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-top: .7rem; }
.pomo-acc-btn[aria-expanded="true"] { outline: 3px solid var(--ph, currentColor); outline-offset: 1px; }
@media (max-width: 30rem) { .pomo-controls { grid-template-columns: 1fr; } }

/* Pomodoro : nombres saisissables, Yoshi dans le menu */
.pomo-step-num { display: flex; align-items: baseline; gap: .25rem; justify-content: center; }
.pomo-controls input.pomo-step-val { width: 3.6rem; text-align: center; font: inherit; font-size: 1.35rem; font-weight: 700; background: rgba(255,255,255,.35); border: 0; border-bottom: 2px dashed currentColor; border-radius: 6px 6px 0 0; padding: .05rem .1rem; color: inherit; -moz-appearance: textfield; appearance: textfield; -webkit-text-stroke: 0; }
.pomo-controls input.pomo-step-val::-webkit-outer-spin-button, .pomo-controls input.pomo-step-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pomo-arrow { touch-action: manipulation; user-select: none; }
#nav-list .ico.yoshi img { object-fit: contain; }

/* Éditeur : sélection de bloc dans l'aperçu, aperçu plus grand */
@media (min-width: 70.01rem) { .te-layout { grid-template-columns: minmax(0, 1fr) var(--pv-col, 760px); } }
:root.pv-select main :is([data-zone-id], li[data-rowk], .page-banner) { cursor: pointer; }
.pv-hover { outline: 4px dashed #ff9f1a !important; outline-offset: -4px; }
.te-slot.te-hit { outline: 5px solid #ff9f1a; outline-offset: 4px; animation: pvflash 3.5s ease-in-out 1; }
.pv-sel[aria-pressed="false"] { opacity: .7; }

/* Frise de bas de page : image propre aux petits écrans (FOOTM-<page>) */
@media (max-width: 40rem) { .page-foot.has-mobile::before { background-image: var(--pf-img-m); } }

/* Tutoriel guidé (tutoriel.js) */
.tuto-fab { position: fixed; top: .7rem; right: .8rem; z-index: 55; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem .35rem .45rem; min-height: 0; border-radius: 999px; border: 2px solid var(--accent, #4a6cf7); background: var(--surface, #fff); color: var(--ink, #111); font-weight: 700; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
.tuto-fab:hover { background: var(--accent, #4a6cf7); color: var(--accent-ink, #fff); }
.tuto-fab-q { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent, #4a6cf7); color: var(--accent-ink, #fff); font-size: 1.05rem; line-height: 1; }
.tuto-dot { position: absolute; top: -.2rem; right: -.2rem; width: .8rem; height: .8rem; border-radius: 50%; background: #ff9f1a; border: 2px solid #fff; }
.tuto-dot[hidden] { display: none; }
@media (max-width: 40rem) { .tuto-fab { top: auto; bottom: .7rem; right: auto; left: .7rem; } .tuto-fab-t { display: none; } .tuto-fab { padding: .3rem; } }
.tuto-layer { position: fixed; inset: 0; margin: 0; padding: 0; border: 0; background: transparent; width: 100vw; height: 100vh; max-width: none; max-height: none; overflow: visible; color: var(--ink, #111); }
.tuto-layer.tuto-fallback { z-index: 100000; }
.tuto-layer::backdrop { background: transparent; }
.tuto-block { position: fixed; inset: 0; }
.tuto-spot { position: fixed; display: none; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(8, 10, 24, .66), 0 0 0 3px #ffb347 inset, 0 0 0 4px #ffb347; pointer-events: none; transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease; }
.tuto-card { position: fixed; z-index: 2; width: min(26rem, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; box-sizing: border-box; padding: .9rem 1rem 1rem; background: var(--surface, #fff); color: var(--ink, #111); border: 3px solid #ffb347; border-radius: 14px; box-shadow: 0 12px 36px rgba(0,0,0,.55); text-align: left; font-family: system-ui, sans-serif; font-weight: 400; -webkit-text-stroke: 0; text-shadow: none; text-transform: none; letter-spacing: 0; }
.tuto-card :is(h2, p, strong, button) { font-family: inherit; -webkit-text-stroke: 0; text-shadow: none; text-transform: none; letter-spacing: 0; color: inherit; }
.tuto-card h2 { margin: .1rem 0 .5rem; font-size: 1.15rem; line-height: 1.25; }
.tuto-top { display: flex; justify-content: space-between; align-items: center; }
.tuto-count { font-size: .85rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: var(--surface-2, #eee); }
.tuto-x { min-height: 0; padding: .1rem .5rem; border-radius: 8px; border: 1px solid var(--line, #888); background: transparent; cursor: pointer; }
.tuto-what { margin: 0 0 .5rem; font-size: 1.02rem; font-weight: 700; }
.tuto-part { margin: .35rem 0; font-size: .95rem; line-height: 1.45; }
.tuto-dots { display: flex; flex-wrap: wrap; gap: .25rem; margin: .7rem 0 .5rem; }
.tuto-d { width: .6rem; height: .6rem; border-radius: 50%; background: var(--line, #aaa); } .tuto-d.done { background: #7fb069; } .tuto-d.on { background: #ffb347; outline: 2px solid var(--ink, #111); }
.tuto-nav { display: flex; gap: .5rem; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.tuto-end { display: flex; gap: .5rem; flex-wrap: wrap; }
.tuto-card .tuto-next { background: #ffb347; color: #1b1b2f; border: 2px solid #1b1b2f; border-radius: 10px; padding: .45rem .9rem; font-weight: 800; cursor: pointer; }
.tuto-card .tuto-prev { background: transparent; color: inherit; border: 2px solid var(--line, #888); border-radius: 10px; padding: .45rem .8rem; cursor: pointer; }
.tuto-card .tuto-prev:disabled { opacity: .4; cursor: default; }
.tuto-card button:focus-visible { outline: 3px solid #1b6ef3; outline-offset: 2px; }
@media (max-width: 40rem) { .tuto-card { width: auto; max-height: 55vh; } }
@media (prefers-reduced-motion: reduce) { .tuto-spot { transition: none; } }
.pomo-dlg .pomo-help { position: sticky; top: .4rem; float: left; z-index: 6; width: 2.2rem; height: 2.2rem; min-height: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: #fff; color: #1b1b2f; border: 2px solid #1b1b2f; cursor: pointer; }

/* Tutoriel v2 : menu des sujets, infobulles, schémas, lecture à voix haute */
.tuto-fabbox { position: fixed; top: .7rem; right: .8rem; z-index: 55; display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.tuto-fabbox .tuto-fab { position: relative; top: auto; right: auto; }
@media (max-width: 40rem) { .tuto-fabbox { top: auto; bottom: .7rem; right: auto; left: .7rem; align-items: flex-start; flex-direction: column-reverse; } }
.tuto-menu { width: min(21rem, calc(100vw - 1.6rem)); max-height: 70vh; overflow: auto; padding: .4rem; background: var(--surface, #fff); color: var(--ink, #111); border: 2px solid var(--accent, #4a6cf7); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: .2rem; font-family: system-ui, sans-serif; font-weight: 400; text-transform: none; -webkit-text-stroke: 0; text-shadow: none; }
.tuto-menu[hidden] { display: none; }
.tuto-mi { display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: 100%; min-height: 0; padding: .45rem .6rem; border-radius: 8px; border: 1px solid transparent; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.tuto-mi:hover, .tuto-mi:focus-visible { background: var(--surface-2, #eee); border-color: var(--line, #ccc); }
.tuto-mi-all { background: var(--accent, #4a6cf7); color: var(--accent-ink, #fff); font-weight: 700; }
.tuto-mi-all:hover, .tuto-mi-all:focus-visible { background: var(--accent, #4a6cf7); filter: brightness(1.1); }
.tuto-mi small { font-weight: 400; opacity: .85; }
.tuto-mi-h { padding: .4rem .6rem .1rem; font-size: .82rem; opacity: .75; }
.tuto-mi-opt { display: flex; gap: .4rem; align-items: center; padding: .5rem .6rem .3rem; border-top: 1px solid var(--line, #ccc); margin-top: .3rem; font-size: .9rem; cursor: pointer; }
.tuto-tip { position: fixed; margin: 0; inset: auto; max-width: 18rem; padding: .5rem .65rem; border: 2px solid #ffb347; border-radius: 10px; background: var(--surface, #fff); color: var(--ink, #111); box-shadow: 0 6px 20px rgba(0,0,0,.4); display: flex; gap: .5rem; align-items: flex-start; font-family: system-ui, sans-serif; font-size: .92rem; line-height: 1.35; font-weight: 400; text-transform: none; -webkit-text-stroke: 0; text-shadow: none; letter-spacing: 0; text-align: left; }
.tuto-tip.tuto-fallback { z-index: 100001; }
.tuto-tip p { margin: 0; font-family: inherit; color: inherit; }
.tuto-tip-q { flex: none; width: 1.7rem; height: 1.7rem; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid #1b1b2f; background: #ffb347; color: #1b1b2f; font-weight: 800; cursor: pointer; display: grid; place-items: center; }
.tuto-tip-q:hover { filter: brightness(1.08); }
.tuto-say { display: inline-flex; align-items: center; gap: .25rem; min-height: 0; padding: .1rem .55rem; border-radius: 999px; border: 1px solid var(--line, #888); background: transparent; color: inherit; font: inherit; font-size: .85rem; cursor: pointer; }
.tuto-say svg { width: 1rem; height: 1rem; }
.tuto-say.on { background: #ffb347; color: #1b1b2f; }
.tuto-more { margin: .4rem 0; }
.tuto-more > summary { cursor: pointer; font-size: .9rem; font-weight: 700; padding: .2rem 0; }
.tuto-try { margin: .5rem 0; padding: .4rem .6rem; border-radius: 8px; background: #fff3d6; color: #4a3200; font-size: .92rem; }
.tuto-fig { margin: .5rem 0; padding: .5rem; border-radius: 10px; background: var(--surface-2, #f1f1f1); }
.tuto-fig small { display: block; font-size: .78rem; opacity: .85; line-height: 1.2; margin-top: .2rem; }
.tuto-fig-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr)); gap: .45rem; }
.tuto-fb { text-align: center; }
.tuto-fb-btn { display: block; padding: .35rem .3rem; border-radius: 8px; border: 2px solid #1b1b2f; color: #1b1b2f; font-weight: 800; font-size: .88rem; }
.tuto-fig-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: .3rem; }
.tuto-fl { flex: 1 1 4.5rem; text-align: center; padding: .35rem .3rem; border: 2px solid var(--line, #888); border-radius: 8px; }
.tuto-fl strong { display: block; font-size: .85rem; font-family: inherit; }
.tuto-arrow { align-self: center; font-weight: 800; opacity: .7; }
.tuto-bar { display: flex; border-radius: 8px; overflow: hidden; border: 2px solid #1b1b2f; }
.tuto-bar-i { padding: .4rem .5rem; font-size: .8rem; font-weight: 700; color: #1b1b2f; text-align: center; }
.tuto-layer.tuto-pass .tuto-block { pointer-events: none; }
.tuto-layer.tuto-pass { pointer-events: none; } .tuto-layer.tuto-pass .tuto-card { pointer-events: auto; }
.tuto-top { gap: .5rem; } .tuto-top .tuto-x { margin-left: auto; }

.tuto-uses { margin: .4rem 0; padding: .45rem .6rem; border-radius: 8px; background: var(--surface-2, #f1f1f1); font-size: .93rem; }
.tuto-uses ul { margin: .25rem 0 0; padding-left: 1.1rem; } .tuto-uses li { margin: .15rem 0; line-height: 1.35; }

/* Lecteur : le bouton Tutoriel passe en bas à gauche pour ne pas couvrir la barre du lecteur */
@media (min-width: 40.01rem) { :root[data-route="lecteur"] .tuto-fabbox, :root[data-route="ouvrir"] .tuto-fabbox { top: auto; right: auto; bottom: .8rem; left: 17.5rem; flex-direction: column-reverse; align-items: flex-start; } }

/* Sélection Claude (claude-select.js) */
.cs-pill { position: fixed; top: .7rem; right: 8.8rem; z-index: 56; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; border: 2px solid #7c5cff; background: var(--surface, #fff); color: var(--ink, #111); font: 700 .9rem system-ui, sans-serif; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.35); text-transform: none; -webkit-text-stroke: 0; text-shadow: none; letter-spacing: 0; }
.cs-pill:has(input:checked) { background: #7c5cff; color: #fff; }
.cs-pill input { width: 1.1rem; height: 1.1rem; accent-color: #fff; }
@media (max-width: 40rem) { .cs-pill { top: auto; bottom: .7rem; right: auto; left: 4.6rem; } }
.cs-panel { position: fixed; right: .8rem; bottom: .8rem; z-index: 56; width: min(24rem, calc(100vw - 1.6rem)); max-height: 60vh; overflow: auto; padding: .6rem .7rem; border: 2px solid #7c5cff; border-radius: 12px; background: var(--surface, #fff); color: var(--ink, #111); box-shadow: 0 10px 30px rgba(0,0,0,.45); font: 400 .9rem system-ui, sans-serif; text-transform: none; -webkit-text-stroke: 0; text-shadow: none; letter-spacing: 0; text-align: left; }
.cs-panel[hidden] { display: none; }
.cs-panel.cs-min .cs-hint, .cs-panel.cs-min .cs-list, .cs-panel.cs-min .cs-act, .cs-panel.cs-min .cs-file { display: none; }
.cs-panel :is(p, strong, small, button, li) { font-family: inherit; color: inherit; -webkit-text-stroke: 0; text-shadow: none; text-transform: none; }
.cs-head { display: flex; justify-content: space-between; align-items: center; }
.cs-hint { margin: .3rem 0; opacity: .85; }
.cs-list { list-style: none; margin: .3rem 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; max-height: 30vh; overflow: auto; }
.cs-list li { display: flex; justify-content: space-between; align-items: center; gap: .4rem; padding: .3rem .45rem; border-radius: 8px; background: var(--surface-2, #f1f1f1); }
.cs-li { display: flex; flex-direction: column; min-width: 0; } .cs-li strong { overflow-wrap: anywhere; font-size: .85rem; } .cs-li small { opacity: .8; font-size: .75rem; }
.cs-x { min-height: 0; padding: .05rem .45rem; border-radius: 8px; border: 1px solid var(--line, #888); background: transparent; color: inherit; cursor: pointer; }
.cs-act { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; } .cs-act button { min-height: 0; padding: .3rem .7rem; border-radius: 8px; border: 2px solid #7c5cff; background: #7c5cff; color: #fff; cursor: pointer; font-weight: 700; }
.cs-act .cs-danger { background: transparent; color: inherit; border-color: var(--line, #888); }
:root.cs-on main, :root.cs-on #nav-list { cursor: crosshair; }
:root.cs-on [data-cs-hov] { outline: 3px dashed #7c5cff !important; outline-offset: -3px; }
[data-cs] { outline: 4px solid #7c5cff !important; outline-offset: -4px; box-shadow: 0 0 0 4px rgba(124, 92, 255, .35) !important; }

/* Entrées du menu : fonds dessinés par page (NAVBG-<page>), transparents à gauche : la couleur de l'entrée reste visible et le texte lisible */
:root[data-scenes] #nav-list a[href="#/accueil"] { background-image: var(--navbg-accueil, none); }
:root[data-scenes] #nav-list a[href="#/programme"] { background-image: var(--navbg-programme, none); }
:root[data-scenes] #nav-list a[href="#/entrainer"] { background-image: var(--navbg-entrainer, none); }
:root[data-scenes] #nav-list a[href="#/anki"] { background-image: var(--navbg-anki, none); }
:root[data-scenes] #nav-list a.pomo-nav { background-image: var(--navbg-pomodoro, none); }
:root[data-scenes] #nav-list a[href="#/accueil"], :root[data-scenes] #nav-list a[href="#/programme"], :root[data-scenes] #nav-list a[href="#/entrainer"], :root[data-scenes] #nav-list a[href="#/anki"], :root[data-scenes] #nav-list a.pomo-nav { background-size: cover; background-position: right center; background-repeat: no-repeat; }

:root.pick-text :is(main, #nav-list) * { cursor: crosshair !important; }
:root.pick-text :is(main, #nav-list) :is(p, li, td, th, dd, dt, label, h1, h2, h3, h4, a, small, .muted, .small, button, span):hover { outline: 2px dashed #ff9f1a; outline-offset: 2px; }

/* Teinte par-dessus l'arrière-plan de la page (réglée dans l'éditeur de thème, page par page) */
:root[data-bgt] body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bgt-c); opacity: var(--bgt-a, 0); }

/* Logo Déclic en haut du menu */
.brand-logo { display: block; width: 100%; max-width: 13rem; height: auto; margin: 0 auto; }
.brand { justify-content: center; }

/* Mascotte « Pourquoi ouvrir ce cours » : la mascotte est posée directement sur le fond ; la bulle est blanche, façon manga, texte noir.
   Couleurs réglables dans l'éditeur de thème (--bubble-bg / --bubble-line / --bubble-ink). */
:root:root:root main .mascotte-card { background: transparent !important; border: 0 !important; box-shadow: none !important; align-items: flex-start; gap: 1.6rem; }
.mascotte-card-bubble { background: var(--bubble-bg, #ffffff) !important; color: var(--bubble-ink, #111111) !important; border: 3px solid var(--bubble-line, #111111) !important; border-radius: 30px 26px 32px 24px / 26px 32px 24px 30px; padding: 1rem 1.4rem 1.1rem; box-shadow: 5px 5px 0 color-mix(in srgb, var(--bubble-line, #111111) 38%, transparent); }
.mascotte-card-bubble::before { left: -13px; top: 54px; width: 22px; height: 22px; background: var(--bubble-bg, #ffffff) !important; border-left: 3px solid var(--bubble-line, #111111) !important; border-bottom: 3px solid var(--bubble-line, #111111) !important; border-radius: 0 0 0 6px; }
.mascotte-card-bubble :is(p, li, span, summary, div, figcaption, button) { color: var(--bubble-ink, #111111) !important; }
.mascotte-card-bubble > .eyebrow { color: var(--bubble-ink, #111111); font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; opacity: .78; margin-bottom: .1rem; }
.mascotte-card-bubble .blurb-hook { font-size: clamp(1.2rem, 1rem + 1vw, 1.65rem); font-weight: 800; line-height: 1.22; margin: .25rem 0 .7rem; color: var(--bubble-ink, #111111); }
.mascotte-card-bubble .blurb-text { font-size: 1.02rem; line-height: 1.65; margin: 0 0 .7rem; color: color-mix(in srgb, var(--bubble-ink, #111111) 90%, #ffffff) !important; }
.mascotte-card-bubble details > summary { font-weight: 800; font-size: 1rem; cursor: pointer; color: var(--bubble-ink, #111111); }
.mascotte-card-bubble .blurb-gain li { margin: .2rem 0; line-height: 1.5; }
.mascotte-card-bubble p.small.muted { color: color-mix(in srgb, var(--bubble-ink, #111111) 68%, #ffffff) !important; font-size: .82rem; border-top: 2px dotted color-mix(in srgb, var(--bubble-line, #111111) 35%, transparent); padding-top: .5rem; }
.mascotte-card .info-btn { background: #ffffff !important; color: #111111 !important; border: 3px solid #111111 !important; box-shadow: 2px 2px 0 rgba(0,0,0,.4); width: 2.4rem; height: 2.4rem; font-size: 1.15rem; opacity: 1 !important; }
.mascotte-card .blurb-icon-note { background: #fff4c7 !important; color: #111111 !important; border: 2px solid #111111; box-shadow: 3px 3px 0 rgba(0,0,0,.3); }
.mascotte-card .blurb-icon-note, .mascotte-card .blurb-icon-note * { color: #111111 !important; }
@media (max-width: 640px) { .mascotte-card-bubble { width: 100%; } .mascotte-card-bubble::before { left: calc(50% - 11px); top: -13px; border: 0 !important; border-top: 3px solid var(--bubble-line, #111111) !important; border-left: 3px solid var(--bubble-line, #111111) !important; border-radius: 6px 0 0 0; } }

/* Menu : pendant le travail, l'icône du Pomodoro montre Yoshi en gros (moitié haute de l'image, le cercle est rogné) ; quand il dort, icône d'origine */
#nav-list .ico.yoshi.work { overflow: hidden; border-radius: .7rem; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
#nav-list .ico.yoshi.work img { width: 192%; height: auto; aspect-ratio: 1 / 1; max-width: none; margin-left: -57%; margin-top: 0; object-fit: fill; }

/* Plus d espace entre le logo Déclic et le menu */
@media (min-width: 64.01rem) { .nav-head { margin-bottom: 1.6rem; } }
@media (max-width: 64rem) { .nav-head { margin-bottom: .4rem; } }

/* ===== Couleurs de page et zoom des motifs pilotés par le thème (Éditeur de thème) =====
   Ces règles reprennent les valeurs d'origine en repli : un thème qui ne règle rien garde son aspect. */
:root[data-scenes] #nav-list a[href="#/accueil"] { --nv: var(--pgc-accueil, #39b2ff); }
:root[data-scenes] #nav-list a[href="#/programme"] { --nv: var(--pgc-programme, #00a504); }
:root[data-scenes] #nav-list a.pomo-nav { --nv: var(--pgc-pomodoro, #00a504); }
:root[data-scenes] #nav-list a[href="#/anki"] { --nv: var(--pgc-anki, #ff4dd3); }
:root[data-scenes] #nav-list a[href="#/entrainer"], :root[data-scenes] #nav-list a[href="#/entrainer"][aria-current="page"] { --nv: var(--pgc-entrainer, #d02219); color: var(--pgt-entrainer, #fff); }
:root[data-scenes][data-page="entrainer"] .page-banner, :root[data-scenes][data-page="entrainer"] .sub-banner { background-color: var(--pgb-entrainer, var(--pgc-entrainer, #d02219)); color: var(--pgt-entrainer, #fff); }
:root[data-scenes][data-page="entrainer"] main :is(h1, h2, h3, summary, .item-title, .eyebrow) { color: var(--pgt-entrainer, #fff); }
:root[data-scenes][data-page="entrainer"] main :is(.card, .notice) .item-title { color: var(--pgt-entrainer, #fff); }
:root[data-scenes][data-page="entrainer"] main .card:has(> .list, > li), :root[data-scenes][data-page="entrainer"] main ul.list.card, :root[data-scenes][data-page="entrainer"] main .card.list { background-image: linear-gradient(color-mix(in srgb, var(--pgc-entrainer, #d02219) 18%, transparent), color-mix(in srgb, var(--pgc-entrainer, #d02219) 18%, transparent)), var(--theme-bg-train, none); background-size: auto, var(--tz-train, 1920px) auto; }
/* couleur du bandeau de titre (Bibliothèque : blanc par défaut) */
:root[data-scenes][data-page="accueil"] .page-banner { background-color: var(--pgb-accueil, var(--page-col, #39b2ff)); }
:root[data-scenes][data-page="programme"] .page-banner, :root[data-scenes][data-page="garage"] .page-banner { background-color: var(--pgb-programme, var(--page-col, #00a504)); }
:root[data-scenes][data-page="anki"] .page-banner { background-color: var(--pgb-anki, var(--page-col, #ff4dd3)); }
:root[data-scenes][data-page="biblio"] .page-banner { background-color: var(--pgb-biblio, #fff); }
:root[data-scenes] h2.world-banner[data-pano] { background-color: var(--pgb-biblio, #fff); background-image: linear-gradient(90deg, var(--pgb-biblio, #fff) 0%, var(--pgb-biblio, #fff) 22%, color-mix(in srgb, var(--pgb-biblio, #fff) 60%, transparent) 42%, color-mix(in srgb, var(--pgb-biblio, #fff) 20%, transparent) 62%, transparent 85%), var(--pn-d); }
/* zoom des motifs répétés (Éditeur de thème → image du motif → « Zoom du motif ») */
:root[data-scenes] body { background-size: var(--tz-bg, var(--tz-page, 640px)) auto; background-image: var(--bgfx-cur, var(--theme-bg-page-cur, var(--theme-bg-page, none))); }
:root[data-scenes] .nav, .nav { background-size: var(--tz-bg, var(--tz-page, 640px)) auto; }
:root[data-scenes] .nav { background-image: var(--bgfx, var(--theme-bg-page, none)); }
:root[data-scenes] main .card:not(.sec .card):not(.where):not([data-pano]) { background-size: var(--tz-bg, var(--tz-page, 640px)) auto; }
/* personnage de titre : taille, hauteur, position gauche-droite et coupe du bas (Éditeur → page → réglages), sans limite : 0 % de taille le fait disparaître */
:root[data-scenes] .banner-char img { height: var(--tune-char-h, 180%); bottom: var(--tune-char-b, -22%); left: calc(50% + var(--tune-char-x, 0%)); clip-path: inset(-100vh -100vw var(--tune-char-cut, 0%) -100vw); }
:root[data-scenes] details.subject, :root[data-scenes] details.subject[open], :root[data-scenes] details.subject > summary { background-size: auto, var(--tz-subject, 400px) auto; }
/* fond dessiné d'une entrée du menu : la Bibliothèque aussi */
:root[data-scenes][data-navbg-biblio] #nav-list a[href="#/biblio"] { background-image: var(--navbg-biblio); background-size: cover; background-position: right center; background-repeat: no-repeat; }

/* ===== Reflet lumineux d'une seconde sur l'entrée du menu cliquée ===== */
#nav-list a { position: relative; }
#nav-list a.nav-sweep::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .7) 50%, transparent 62%); background-size: 260% 100%; background-repeat: no-repeat; background-position: 160% 0;
  animation: nav-sweep 1s ease-out 1 both; }
@keyframes nav-sweep { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { #nav-list a.nav-sweep::after { animation: none; content: none; } }

/* ===== Fond de la fenêtre Pomodoro réglable (Éditeur → Pomodoro) : image facultative par-dessus un dégradé haut/bas ===== */
:root[data-scenes] .pomo-dlg { --pw-a: var(--pomo-work-a, color-mix(in srgb, var(--pgc-pomodoro, #7cc43c) 55%, #fff)); --pw-b: var(--pomo-work-b, color-mix(in srgb, var(--pgc-pomodoro, #7cc43c) 82%, #fff)); background-color: var(--pw-b); background-image: var(--pomo-img-work, none), linear-gradient(180deg, var(--pw-a), var(--pw-b)); background-size: cover, auto; background-position: center, center; background-repeat: no-repeat, no-repeat; border-color: var(--pomo-work-line, var(--pgl-pomodoro, #2d6a1e)); }
:root[data-scenes] .pomo-dlg[data-phase="short"], :root[data-scenes] .pomo-dlg[data-phase="long"] { --pp-a: var(--pomo-pause-a, color-mix(in srgb, var(--c15, #63ae3a) 55%, #fff)); --pp-b: var(--pomo-pause-b, color-mix(in srgb, var(--c15, #63ae3a) 82%, #fff)); background-color: var(--pp-b); background-image: var(--pomo-img-pause, none), linear-gradient(180deg, var(--pp-a), var(--pp-b)); }

/* ===== Boutons du menu : couleur, opacité de la couleur et de l'image réglables par entrée (Éditeur → page → « Bouton du menu ») ===== */
:root[data-scenes] #nav-list a[href="#/accueil"] { --nv: var(--nvc-accueil, var(--pgc-accueil, #39b2ff)); --nbo: var(--nvo-accueil, 100%); --nbi: var(--nvi-accueil, 1); }
:root[data-scenes] #nav-list a[href="#/biblio"] { --nv: var(--nvc-biblio, var(--pgc-biblio, #8fd3f6)); --nbo: var(--nvo-biblio, 100%); --nbi: var(--nvi-biblio, 1); }
:root[data-scenes] #nav-list a[href="#/programme"] { --nv: var(--nvc-programme, var(--pgc-programme, #00a504)); --nbo: var(--nvo-programme, 100%); --nbi: var(--nvi-programme, 1); }
:root[data-scenes] #nav-list a[href="#/entrainer"], :root[data-scenes] #nav-list a[href="#/entrainer"][aria-current="page"] { --nv: var(--nvc-entrainer, var(--pgc-entrainer, #d02219)); --nbo: var(--nvo-entrainer, 100%); --nbi: var(--nvi-entrainer, 1); }
:root[data-scenes] #nav-list a[href="#/anki"] { --nv: var(--nvc-anki, var(--pgc-anki, #ff4dd3)); --nbo: var(--nvo-anki, 100%); --nbi: var(--nvi-anki, 1); }
:root[data-scenes] #nav-list a.pomo-nav { --nv: var(--nvc-pomodoro, var(--pgc-pomodoro, #00a504)); --nbo: var(--nvo-pomodoro, 100%); --nbi: var(--nvi-pomodoro, 1); }
:root[data-scenes] #nav-list > li > a, :root[data-scenes] #nav-list > li > a:hover, :root[data-scenes] #nav-list > li > a[aria-current="page"] { background-color: color-mix(in srgb, var(--nv) var(--nbo, 100%), transparent); }
:root[data-scenes] #nav-list > li > a { isolation: isolate; }
:root[data-scenes] #nav-list a[href="#/accueil"] { background-image: none; }
:root[data-scenes] #nav-list a[href="#/programme"] { background-image: none; }
:root[data-scenes] #nav-list a[href="#/entrainer"] { background-image: none; }
:root[data-scenes] #nav-list a[href="#/anki"] { background-image: none; }
:root[data-scenes] #nav-list a.pomo-nav { background-image: none; }
:root[data-scenes][data-navbg-biblio] #nav-list a[href="#/biblio"], :root[data-scenes][data-navbg-biblio] #nav-list a[href="#/biblio"][aria-current="page"] { background-image: none; }
:root[data-scenes] #nav-list a[href="#/accueil"]::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: var(--nbi, 1); background: var(--navbg-accueil) right center / cover no-repeat; }
:root[data-scenes] #nav-list a[href="#/biblio"]::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: var(--nbi, 1); background: var(--navbg-biblio) right center / cover no-repeat; }
:root[data-scenes] #nav-list a[href="#/programme"]::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: var(--nbi, 1); background: var(--navbg-programme) right center / cover no-repeat; }
:root[data-scenes] #nav-list a[href="#/entrainer"]::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: var(--nbi, 1); background: var(--navbg-entrainer) right center / cover no-repeat; }
:root[data-scenes] #nav-list a[href="#/anki"]::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: var(--nbi, 1); background: var(--navbg-anki) right center / cover no-repeat; }
:root[data-scenes] #nav-list a.pomo-nav::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: var(--nbi, 1); background: var(--navbg-pomodoro) right center / cover no-repeat; }

/* ===== Police d'affichage FINE (data-fontthin) : contours de texte plafonnés, sinon ils comblent les lettres ===== */
:root[data-fontthin][data-scenes] .sec.scene .sec-head h2 { -webkit-text-stroke-width: min(3px, .075em) !important; }
:root[data-fontthin][data-scenes] h2.world-banner { -webkit-text-stroke-width: min(3px, .075em) !important; }
:root[data-fontthin][data-scenes] .sec.scene .sec-head h2, :root[data-fontthin][data-scenes] .sec.scene[data-poster] > summary { -webkit-text-stroke-width: min(.32em, .075em) !important; }
:root[data-fontthin][data-scenes] .page-banner, :root[data-fontthin][data-scenes] .sub-banner { -webkit-text-stroke-width: min(.28em, .075em) !important; }
:root[data-fontthin][data-scenes] .pomo-dlg .pomo-time { -webkit-text-stroke-width: min(.1em, .075em) !important; }
:root[data-fontthin][data-scenes] .pomo-dlg .pomo-step-val { -webkit-text-stroke-width: min(.1em, .075em) !important; }
:root[data-fontthin][data-font] h1 { -webkit-text-stroke-width: min(.08em, .075em) !important; }
:root[data-fontthin][data-font] .kpi { -webkit-text-stroke-width: min(.05em, .075em) !important; }
:root[data-fontthin][data-font] h1 { -webkit-text-stroke-width: min(.035em, .075em) !important; }
:root[data-fontthin][data-font] .page-banner, :root[data-fontthin][data-font] .sub-banner, :root[data-fontthin][data-font] .sec.scene .sec-head h2, :root[data-fontthin][data-font] h2.world-banner { -webkit-text-stroke-width: min(.2em, .075em) !important; }
:root[data-fontthin][data-font] .pomo-dlg .pomo-time { -webkit-text-stroke-width: min(.06em, .075em) !important; }
:root[data-fontthin][data-font] [data-skin] { -webkit-text-stroke-width: min(1px, .075em) !important; }
:root[data-fontthin][data-scenes] .page-banner, :root[data-fontthin][data-font] .page-banner { -webkit-text-stroke-width: min(.28em, .075em) !important; }
:root[data-fontthin][data-scenes] .sub-banner, :root[data-fontthin][data-font] .sub-banner { -webkit-text-stroke-width: min(.28em, .075em) !important; }
:root[data-fontthin][data-font] h2.world-banner { -webkit-text-stroke-width: min(.3em, .075em) !important; }
:root[data-fontthin][data-font] .sec.scene .sec-head h2, :root[data-fontthin][data-font] .sec.scene[data-poster] > summary { -webkit-text-stroke-width: min(.32em, .075em) !important; }
:root[data-fontthin][data-scenes] .sec-chip { -webkit-text-stroke-width: min(.2em, .075em) !important; }
:root[data-fontthin][data-scenes] #nav-list > li > a { -webkit-text-stroke-width: min(.22em, .075em) !important; }

/* ===== Lisibilité : contrastes vérifiés page par page (audit texte / fond réel mesuré sur capture) ===== */
/* panneaux posés sur les scènes : ils ne deviennent plus transparents sous le texte (seul le tout dernier coin s'estompe) */
:root[data-scenes] .sec.scene .card::before, :root[data-scenes] .sec.scene .notice::before, :root[data-scenes] .sec.scene ul.list::before, :root[data-scenes] .sec.scene > p.muted::before {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 78%, rgba(0,0,0,.9) 100%), linear-gradient(to bottom, #000 0, #000 78%, rgba(0,0,0,.9) 100%);
  mask-image: linear-gradient(to right, #000 0, #000 78%, rgba(0,0,0,.9) 100%), linear-gradient(to bottom, #000 0, #000 78%, rgba(0,0,0,.9) 100%); }
/* textes posés directement sur le décor d'une scène (hors panneau) : clairs, avec une ombre */
:root[data-scenes] .sec.scene :is(h3, p, .small, .muted, label, .eyebrow, summary):not(.card *):not(.notice *):not(.sec-head *):not(button):not(a):not(dialog *) { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 6px rgba(0, 0, 0, .6); opacity: 1; }
/* menu et titres de bandeaux : halo sombre autour du texte clair posé sur des images */
:root[data-scenes] #nav-list > li > a { text-shadow: 0 0 3px #000, 0 0 5px rgba(0, 0, 0, .85), 0 1px 2px #000; }
:root[data-scenes] :is(.page-banner, .sub-banner, h2.world-banner) { text-shadow: 0 2px 0 rgba(20, 16, 40, .9), 0 0 8px rgba(0, 0, 0, .75); }
/* tableaux : texte foncé sur fond clair */
:root[data-scenes] .table-wrap :is(th, td) { color: #1d2433; }
/* titre d'un cours dans une carte illustrée : pastille claire derrière le texte */
:root[data-scenes] main .chap-head h2 a.chap-link { background: rgba(255, 255, 255, .88); padding: .05rem .55rem; border-radius: 10px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* cartes à bandeau panoramique : la couleur de la carte tient plus longtemps avant l'image (le texte reste sur un fond uni) */
:root[data-scenes] [data-pano]:not(h2):not([data-sw="m"]) { background-image: linear-gradient(90deg, var(--card-bg, var(--surface)) 0%, var(--card-bg, var(--surface)) 55%, color-mix(in srgb, var(--card-bg, var(--surface)) 78%, transparent) 72%, color-mix(in srgb, var(--card-bg, var(--surface)) 35%, transparent) 90%, transparent 100%), var(--pn-d); }
/* S'entraîner : chaque ligne SANS image de ligne du thème (ROW-*) sur un panneau sombre translucide (texte clair lisible sur le jaune comme sur le bleu) ; onglets sur pastilles sombres */
:root[data-scenes][data-page="entrainer"] main :is(ul.list, .list) > li:not(.has-row) { background: rgba(18, 14, 38, .66); border-radius: 12px; margin: .3rem .4rem; padding-left: .5rem; padding-right: .5rem; }
:root[data-scenes][data-page="entrainer"] .page-tabs a { background: rgba(18, 14, 38, .78); color: #fff; border-radius: 999px; }
:root[data-scenes][data-page="entrainer"] main details.card > summary, :root[data-scenes][data-page="entrainer"] main details.card :is(.small, .muted) { text-shadow: 0 1px 3px rgba(0, 0, 0, .85); }
/* carte « Bienvenue » : le texte court sur toute la largeur, la couleur de la carte tient donc presque jusqu'à l'image */
:root[data-scenes] [data-pano="welcome"]:not([data-sw="m"]) { background-image: linear-gradient(90deg, var(--card-bg, var(--surface)) 0%, var(--card-bg, var(--surface)) 82%, color-mix(in srgb, var(--card-bg, var(--surface)) 55%, transparent) 94%, transparent 100%), var(--pn-d); }
/* police fine : les grands titres de blocs de la page d'un cours gardent une taille qui tient dans la colonne */
:root[data-fontthin][data-scenes] .sec.scene .sec-head h2, :root[data-fontthin][data-scenes] .sec.scene[data-poster] > summary { font-size: clamp(1.25rem, .9rem + 1.1vw, 1.75rem); line-height: 1.05; }

/* ===== Mini-jeu des surlignages (highlight-game.js) : trous dans le cours, étiquettes à droite, 5 cœurs ===== */
.uh-game .uh-layer { mix-blend-mode: normal; z-index: 5; }
.uh-game .uh-rect.uh-gap { pointer-events: auto; opacity: 1; cursor: copy; background: color-mix(in srgb, var(--c) 55%, #fff); border: 2px dashed rgba(20, 20, 40, .55); border-radius: 6px; box-sizing: border-box; }
.uh-game .uh-rect.uh-gap.uh-ok { pointer-events: none; opacity: .5; background: var(--c); border: 2px solid #16a34a; }
.uh-game mark.uh.uh-gap { color: transparent; background: color-mix(in srgb, var(--c) 55%, #fff); outline: 2px dashed rgba(20, 20, 40, .55); outline-offset: 0; border-radius: 6px; cursor: copy; user-select: none; -webkit-user-select: none; }
.uh-game mark.uh.uh-gap.uh-ok { color: #111; background: color-mix(in srgb, var(--c) 75%, transparent); outline: 2px solid #16a34a; cursor: default; }
.uh-game .uh-gap.uh-over { outline: 3px solid var(--accent, #2563eb); outline-offset: 1px; filter: brightness(1.08); }
.uh-game .uh-gap.uh-miss { animation: ug-miss .6s ease; }
.uh-game .uh-gap.uh-hit { animation: ug-hit .7s ease; }
@keyframes ug-miss { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); background: #fca5a5; } 40% { transform: translateX(5px); background: #fca5a5; } 60% { transform: translateX(-3px); } }
@keyframes ug-hit { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .8); } 100% { box-shadow: 0 0 0 14px rgba(22, 163, 74, 0); } }
.ug-panel { position: fixed; right: 5.6rem; top: 5rem; z-index: 30; width: min(19rem, 38vw); max-height: calc(100vh - 7rem); display: flex; flex-direction: column; gap: .4rem; padding: .7rem .8rem; background: var(--surface); color: var(--ink); border: 2px solid var(--accent, #2563eb); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.ug-head { display: flex; align-items: center; gap: .5rem; }
.ug-hearts { display: inline-flex; gap: .1rem; margin-left: auto; font-size: 1.35rem; line-height: 1; }
.ug-heart { color: #9ca3af; opacity: .5; } .ug-heart.on { color: #e11d48; opacity: 1; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.ug-x { min-height: 0; padding: .1rem .45rem; border-radius: 8px; }
.ug-help { margin: 0; } .ug-count { font-weight: 700; }
.ug-body { overflow: auto; display: grid; gap: .45rem; align-content: start; padding: .1rem; }
.ug-chip { padding: .45rem .6rem; border-radius: 10px; background: var(--surface-2, #f3f4f6); border: 1px solid var(--line); border-left: 8px solid var(--c, #fde047); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; font-size: .92rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; box-shadow: 0 2px 5px rgba(0, 0, 0, .12); }
.ug-chip.sel { outline: 3px solid var(--accent, #2563eb); }
.ug-chip.drag { opacity: .35; }
.ug-ghost { position: fixed; z-index: 60; pointer-events: none; opacity: .95; transform: rotate(-2deg) scale(1.03); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); cursor: grabbing; }
.ug-end { padding: .6rem; border-radius: 12px; display: grid; gap: .4rem; } .ug-end.win { background: #dcfce7; color: #14532d; } .ug-end.lose { background: #fee2e2; color: #7f1d1d; } .ug-end p { margin: 0; color: inherit; }
.ug-shake { animation: ug-shake .45s ease; } @keyframes ug-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.rail-btn.rail-game[aria-pressed="true"] { background: #e11d48; color: #fff; border-color: #e11d48; }
@media (max-width: 70rem) { .ug-panel { right: .7rem; left: .7rem; top: auto; bottom: 5.2rem; width: auto; max-height: 38vh; } .ug-body { grid-auto-flow: column; grid-auto-columns: minmax(10rem, 70%); overflow-x: auto; } }
@media (prefers-reduced-motion: reduce) { .uh-game .uh-gap, .ug-shake { animation: none !important; } }

/* ===== Barre d'outils du lecteur (capturer, œil, surlignages, jeu) : grosses icônes et libellés lisibles ===== */
.annot-rail { gap: .55rem; padding: .6rem; border-radius: 18px; right: .8rem; }
.annot-rail .rail-btn { width: 5.2rem; min-height: 5rem; gap: .3rem; padding: .45rem .3rem; border-radius: 14px; }
.annot-rail .rail-btn svg { width: 2.3rem; height: 2.3rem; }
.annot-rail .rail-btn .rail-t { font-size: .85rem; line-height: 1.05; letter-spacing: .01em; white-space: nowrap; }
.annot-rail .rail-btn.rail-eye { min-height: 4.2rem; }
.annot-rail .rail-n { top: 4px; right: 4px; min-width: 1.5rem; font-size: .85rem; padding: 0 .3rem; }
.ug-panel { right: 7.6rem; }
@media (max-width: 70rem) { .annot-rail { gap: .4rem; padding: .45rem; } .annot-rail .rail-btn { width: 4.4rem; min-height: 4.4rem; } .annot-rail .rail-btn svg { width: 2rem; height: 2rem; } .annot-rail .rail-btn .rail-t { font-size: .75rem; } .ug-panel { right: .7rem; } }
.ug-pick { display: flex; align-items: center; gap: .4rem; margin: 0; } .ug-pick[hidden] { display: none; } .ug-color { flex: 1; min-width: 0; }
/* libellés de la barre du lecteur : nets (pas de contour de thème), gras, plus grands */
:root:root .annot-rail .rail-btn .rail-t { -webkit-text-stroke: 0 !important; text-shadow: none !important; font-size: 1rem; font-weight: 800; letter-spacing: 0; }
:root:root .annot-rail .rail-btn { width: 5.6rem; min-height: 5.3rem; }
:root:root .annot-rail .rail-btn svg { width: 2.5rem; height: 2.5rem; }
@media (max-width: 70rem) { :root:root .annot-rail .rail-btn { width: 4.6rem; min-height: 4.6rem; } :root:root .annot-rail .rail-btn .rail-t { font-size: .82rem; } }

/* Thèmes sans personnage Pomodoro : un vide est réservé là où l'image irait, pour que le minuteur ne recouvre pas le titre */
:root[data-pomo-void] .pomo-dlg .pomo-time { margin-top: 5.5rem !important; } /* [hidden] est prioritaire : le vide est donc pris par le minuteur lui-même */
:root[data-pomo-void] .pomo-dlg { padding-bottom: 1.4rem; }

/* Mode « Personnalisé » : chaque bouton du menu garde l'aspect de l'univers choisi pour SA page (plusieurs univers côte à côte) */
:root:root #nav-list > li > a.nmx { display: flex; align-items: center; gap: .6rem; min-height: 3.2rem; overflow: visible; padding-top: .4rem; padding-bottom: .4rem; margin-bottom: 3px; font-size: var(--nm-fs, 1rem) !important; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  background: var(--nm-bg) !important; border: 2px solid var(--nm-line) !important; color: var(--nm-ink) !important; font-family: var(--nm-font, inherit) !important; -webkit-text-stroke: var(--nm-sw, 0) var(--nm-stroke, transparent); paint-order: stroke fill; text-shadow: none !important; box-shadow: none !important; }
:root:root #nav-list > li > a.nmx:hover { filter: brightness(1.12); }
:root:root #nav-list > li > a.nmx[aria-current="page"] { box-shadow: 0 0 0 2px var(--nm-bg), 0 0 0 4px var(--nm-ink) !important; }
:root:root #nav-list > li > a.nmx .ico.themed { width: 3rem; height: 3rem; margin: -.55rem 0; flex: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
:root:root #nav-list > li > a.nmx .ico.themed img { width: 100%; height: 100%; object-fit: contain; }
:root:root #nav-list > li > a.nmx .ico { color: var(--nm-ink); }
:root:root #nav-list > li > a.nmx::before { content: '' !important; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 1 !important; background: var(--nm-img, none) right center / cover no-repeat !important; }
:root:root #nav-list > li > a.nmx { -webkit-text-stroke-width: var(--nm-sw, 0) !important; }

/* ---------- Réviser mes surlignages : cartes, jeux, rappel libre, fiche (public/highlight-hub.js) ---------- */
.annot-rail { max-height: calc(100vh - 1.5rem); overflow-y: auto; }
:root:root .annot-rail { top: 50%; transform: translateY(-50%); }
@media (max-width: 70rem) { :root:root .annot-rail { top: auto; transform: none; max-width: calc(100vw - 1.4rem); overflow-x: auto; overflow-y: hidden; } }
.rv-dlg { width: min(54rem, 96vw); max-height: 92vh; overflow: auto; }
.rv-box { display: grid; gap: .7rem; }
.rv-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; position: sticky; top: -1.2rem; z-index: 2; background: var(--surface); padding: .3rem 0; }
.rv-head .rv-x { margin-left: auto; }
.rv-scope { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rv-scope select { min-width: 14rem; max-width: 100%; }
.rv-h3 { margin: .4rem 0 0; font-size: 1.05rem; }
.rv-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: .6rem; }
.rv-tile { display: grid; gap: .25rem; align-content: start; text-align: left; padding: .7rem .8rem; border-radius: 12px; min-height: 6.4rem; }
.rv-tile:disabled { opacity: .55; cursor: not-allowed; }
.rv-tile .rv-ico { font-size: 1.5rem; line-height: 1; }
.rv-tile .small { color: var(--ink-2); }
.rv-pagebar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem .7rem; border: 1px dashed var(--line); border-radius: 10px; }
.rv-pagebar button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.rv-note { margin: .2rem 0 0; }
.rv-list { display: grid; gap: .7rem; max-height: 56vh; overflow: auto; padding: .1rem; }
.rv-row { display: grid; gap: .4rem; padding: .6rem .8rem; border-left: 6px solid var(--c); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--c) 14%, var(--surface)); }
.rv-rowhead { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-weight: 600; }
.rv-row textarea, .uh-words, .rv-free { width: 100%; font: inherit; resize: vertical; }
.rv-dot { width: .8rem; height: .8rem; border-radius: 50%; background: var(--c); border: 1px solid rgba(0, 0, 0, .35); }
.rv-tag, .rv-badge { display: inline-block; font-size: .78rem; font-weight: 600; padding: .05rem .5rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); }
.rv-tag { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--ink); }
.rv-badge.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.rv-prev { margin: 0; padding: .4rem .6rem; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.rv-hole { display: inline-block; min-width: 4.5ch; border-bottom: 2px solid var(--accent); background: var(--accent-soft); border-radius: 3px; vertical-align: baseline; }
.rv-quote { margin: 0; padding: .45rem .8rem; border-left: 6px solid var(--c, var(--line)); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--c, #888) 14%, var(--surface)); }
.rv-quote.neutral { --c: var(--line); font-size: 1.1rem; }
.rv-sentence { font-size: 1.15rem; line-height: 1.9; margin: .5rem 0; }
.rv-blank { font: inherit; padding: .1rem .35rem; border-radius: 6px; border: 2px solid var(--accent); background: var(--surface); color: var(--ink); max-width: 100%; }
.rv-blank.good, .rv-choice.good, .rv-ord.good { border-color: var(--ok); background: var(--ok-soft); color: var(--ink); }
.rv-blank.bad, .rv-choice.bad, .rv-ord.bad { border-color: var(--bad); background: var(--bad-soft); color: var(--ink); }
.rv-right { color: var(--ok); font-weight: 700; }
.rv-ord.bad .rv-right { color: var(--bad); }
.rv-fb { min-height: 1.5rem; margin: .2rem 0; font-weight: 600; }
.rv-fb.good { color: var(--ok); } .rv-fb.bad { color: var(--bad); }
.rv-choices { display: grid; gap: .5rem; }
.rv-choice { text-align: left; padding: .6rem .8rem; border-radius: 10px; border: 2px solid var(--line); white-space: normal; }
.rv-hearts { display: inline-flex; gap: .1rem; font-size: 1.35rem; line-height: 1; }
.rv-order { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.rv-ord { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border: 2px solid var(--line); border-left: 8px solid var(--c); border-radius: 10px; background: var(--surface); cursor: grab; }
.rv-ord[draggable="false"] { cursor: default; }
.rv-ordtext { flex: 1; min-width: 0; }
.rv-mv { display: inline-flex; gap: .25rem; }
.rv-mv button { min-height: 0; padding: .1rem .55rem; }
.rv-end { padding: .8rem 1rem; border-radius: 12px; background: var(--info-soft); display: grid; gap: .3rem; }
.rv-end p { margin: 0; }
.rv-frame { width: 100%; height: 52vh; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.rv-legend { display: grid; gap: .5rem; }
.rv-leg { display: grid; grid-template-columns: auto 6.5rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
.rv-leg input { width: 100%; }
@media (max-width: 40rem) { .rv-leg { grid-template-columns: auto 1fr; } .rv-leg input { grid-column: 1 / -1; } }
.rv-pagelist { margin: .3rem 0; padding-left: 1.2rem; display: grid; gap: .25rem; }
.uh-mynote { margin: .45rem 0 0; padding: .4rem .6rem; border-radius: 8px; background: var(--surface); border: 1px dashed var(--line); }
.uh-words { margin-top: .5rem; }
.uh-pageflag-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.uh-pageflag { position: absolute; top: .5rem; right: .5rem; padding: .15rem .7rem; border-radius: 999px; font-size: .85rem; font-weight: 700; color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.uh-pageflag.difficile { background: #b45309; } .uh-pageflag.revoir { background: #1d4ed8; }
.uh-hidden .uh-pageflag-layer { display: block; }
@media (prefers-reduced-motion: reduce) { .rv-dlg * { animation: none !important; transition: none !important; } }
.rv-blank { display: inline-block; vertical-align: baseline; }
.rv-tile { min-height: 5.2rem; }
.rv-why { font-style: italic; color: var(--ink-2); }
.rv-guide { margin: .1rem 0 .2rem; padding: .5rem .8rem; border-radius: 10px; background: var(--info-soft); }
.rv-h3 { display: flex; align-items: center; gap: .5rem; }
.rv-step { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: .95rem; flex: none; }
.rv-step.alt { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }

/* ---------- Cartes : page de cahier toujours blanche, écriture noire et manuscrite, quel que soit le thème (public/cardstyle.js) ----------
   Chaque carte peut avoir son propre fond et sa propre écriture (petit bouton en haut à gauche) ; sans réglage : blanc et noir. */
.cs-wrap, .cs-host { position: relative; }
.cs-face { --paper: var(--cs-bg, #ffffff); --pen: var(--cs-ink, #000000); --paper-line: #cfe0f0; --paper-margin: #f0a0a0; background-color: var(--cs-bg, #ffffff); color: var(--cs-ink, #000000); }
.cs-face.cs-custom { --paper-line: color-mix(in srgb, var(--cs-ink, #000) 16%, var(--cs-bg, #fff)); --paper-margin: color-mix(in srgb, var(--cs-ink, #000) 32%, var(--cs-bg, #fff)); }
:root:root:root:root .cs-face:not(.ak-html),
:root:root:root:root .cs-face:not(.ak-html) :is(.fc-text, .fc-text *:not(.cloze-hit):not(.cloze-hole), .ak-expl, .ak-expl *, .fc-tag, .ak-sep) {
  color: var(--cs-ink, #000000) !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; letter-spacing: normal !important; text-transform: none !important;
  font-family: "Caveat", "Ink Free", "Segoe Print", "Bradley Hand", cursive !important; }
:root:root:root:root .cs-face.cs-custom.ak-html :is(.ak-html-body, .ak-html-body *:not(.cloze-hit):not(.cloze-hole)) { color: var(--cs-ink) !important; }
:root:root:root:root .cs-face .cloze-hit { background: #dcebf5 !important; color: #0c1620 !important; box-shadow: inset 0 -2px 0 #1f5f8b; }
:root:root:root:root .cs-face .cloze-hole { background: #efede6 !important; color: #1f5f8b !important; border-color: #1f5f8b !important; }
.cs-face .ak-sep { border-color: color-mix(in srgb, var(--cs-ink, #000) 30%, transparent); }
.cs-btn { position: absolute; top: .45rem; left: .45rem; z-index: 3; width: 2.1rem; height: 2.1rem; min-height: 0; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #374151; border: 1px solid #9ca3af; opacity: .8; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); cursor: pointer; }
.cs-btn:hover, .cs-btn:focus-visible, .cs-btn[aria-expanded="true"] { opacity: 1; border-color: #1f5f8b; color: #1f5f8b; }
.cs-pop { position: absolute; top: 3rem; left: .45rem; z-index: 20; width: min(23rem, calc(100% - .9rem)); display: grid; gap: .55rem; padding: .75rem .85rem; border-radius: 12px;
  background: #fff; color: #111827; border: 1px solid #9ca3af; box-shadow: 0 10px 28px rgba(0, 0, 0, .32); font: 400 .95rem/1.3 "Segoe UI", system-ui, sans-serif; text-align: left; cursor: default; transform: none; }
.cs-pop * { font-family: inherit; color: inherit; text-shadow: none; -webkit-text-stroke: 0; }
.cs-row { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.cs-lab { width: 4.6rem; font-weight: 700; }
.cs-sw { width: 1.75rem; height: 1.75rem; min-height: 0; padding: 0; border-radius: 50%; background: var(--c); border: 2px solid #6b7280; }
.cs-sw[aria-pressed="true"] { outline: 3px solid #1f5f8b; outline-offset: 2px; }
.cs-custom-in { width: 1.9rem; height: 1.9rem; padding: 0; border: 1px solid #6b7280; border-radius: 6px; background: #fff; }
.cs-sample { padding: .3rem .6rem; border: 1px solid #9ca3af; border-radius: 8px; font-size: 1.5rem; }
.cs-msg { margin: 0; min-height: 1.2rem; font-size: .88rem; } .cs-msg.warn { color: #92400e; } .cs-msg.bad { color: #b91c1c; font-weight: 600; }
.cs-reset { justify-self: start; }
@media (max-width: 40rem) { .cs-lab { width: 100%; } }
.cs-pop .cs-sample { font-family: "Caveat", "Ink Free", "Segoe Print", cursive; }
:root:root .cs-pop .cs-sw, :root:root .cs-pop .cs-sw[aria-pressed] { background: var(--c) !important; color: inherit; border: 2px solid #6b7280 !important; min-width: 0; }
:root:root .cs-pop .cs-sw[aria-pressed="true"] { outline: 3px solid #1f5f8b; outline-offset: 2px; }
:root:root .cs-pop .cs-sw::before { content: none !important; }

/* ---------- Jeux et révision : vignettes (maquettes) et exemples en 3 étapes ---------- */
.rv-tiles { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.rv-tile { display: flex; flex-direction: column; gap: .35rem; padding: .6rem .7rem .7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-height: 0; }
.rv-tile.off { opacity: .7; }
.rv-tilehead { display: flex; align-items: center; gap: .45rem; }
.rv-tilebtns { margin-top: auto; padding-top: .4rem; }
.rv-thumb { height: 8.2rem; overflow: hidden; position: relative; border-radius: 8px; border: 1px dashed var(--line); background: var(--surface-2); padding: .5rem .6rem; cursor: pointer; pointer-events: auto; }
.rv-thumb > * { zoom: .62; pointer-events: none; }
.rv-thumb::after { content: "exemple"; position: absolute; right: .4rem; bottom: .3rem; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 .45rem; }
.rv-exstep { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .7rem; align-items: start; }
.rv-exnum { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; margin-top: .1rem; }
.rv-excap { margin: 0 0 .35rem; font-weight: 600; }
.rv-exframe { padding: .7rem .8rem; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface-2); }
.rv-exframe .rv-sentence { margin: .2rem 0; }
.ex-doc { padding: .5rem .7rem; border-radius: 8px; background: var(--surface); line-height: 1.8; }
.ex-area { padding: .5rem .7rem; border: 2px solid var(--accent); border-radius: 8px; background: var(--surface); font-style: italic; min-height: 3rem; }
.ex-btn { display: inline-flex; flex-direction: column; align-items: center; padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-weight: 600; font-size: .95rem; }
.ex-btn small { font-weight: 400; color: var(--ink-2); font-size: .75rem; }
.ex-btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ex-rate { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; font-family: "Segoe UI", system-ui, sans-serif; }
.ex-ok { color: var(--ok); font-weight: 700; font-size: .9rem; } .ex-ko { color: var(--warn); font-weight: 700; font-size: .9rem; }
.ex-split { display: grid; grid-template-columns: minmax(0, 1fr) 10rem; gap: .6rem; align-items: start; }
.ex-chips { display: grid; gap: .4rem; }
.ex-gap { display: inline-block; min-width: 7.5ch; padding: 0 .4rem; border-radius: 6px; border: 2px dashed rgba(20, 20, 40, .55); background: color-mix(in srgb, #fde047 55%, #fff); color: #111; text-align: center; }
.ex-gap.over { outline: 3px solid var(--accent); } .ex-gap.ok { border: 2px solid #16a34a; background: color-mix(in srgb, #fde047 75%, transparent); }
.ex-sheet { padding: .6rem .9rem; background: #fff; color: #111; border: 1px solid #bbb; border-radius: 6px; font: 1rem/1.5 Georgia, serif; }
.ex-sheet h4 { margin: 0 0 .3rem; font: 700 .95rem sans-serif; } .ex-sheet p { margin: 0 0 .35rem; padding-left: .5rem; } .ex-sheet ol { margin: 0; }
.ex-line { display: inline-block; min-width: 9ch; border-bottom: 1px solid #000; } .ex-line sup { font: 7pt sans-serif; color: #555; }
.uh-recallbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .6rem 0; padding: .5rem .8rem; border-radius: 10px; background: var(--info-soft); border: 1px solid var(--accent); }
.uh-recallbar[hidden] { display: none; }
@media (max-width: 40rem) { .ex-split { grid-template-columns: 1fr; } .rv-tiles { grid-template-columns: 1fr; } }
.ex-gap { min-width: 8ch; min-height: 1.3em; vertical-align: middle; }

/* ---------- Barre à droite : Capturer · Surlignages (avec l'œil posé sur son coin) · Jeu ---------- */
:root:root .annot-rail { overflow: visible; max-height: none; }
.rail-pair { position: relative; display: grid; }
:root:root:root .annot-rail .rail-pair .rail-eye { position: absolute; left: -1.15rem; top: .55rem; z-index: 3; width: 2.4rem; height: 2.4rem; min-height: 0; padding: 0; margin: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); color: var(--ink); border: 2px solid var(--line); box-shadow: 0 2px 7px rgba(0, 0, 0, .4); cursor: pointer; }
.annot-rail .rail-pair .rail-eye svg { width: 1.4rem; height: 1.4rem; }
:root:root:root .annot-rail .rail-pair .rail-eye:hover, :root:root:root .annot-rail .rail-pair .rail-eye:focus-visible { border-color: var(--accent); color: var(--accent); }
:root:root:root .annot-rail .rail-pair .rail-eye[aria-pressed="false"] { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
@media (max-width: 70rem) { :root:root:root .annot-rail .rail-pair .rail-eye { left: -.7rem; top: .3rem; width: 2.1rem; height: 2.1rem; } }

/* ---------- Effets d'animation (public/fx.js) : reflets sur le bandeau à chaque page, confettis, fond en allers-retours ---------- */
.fx-opt { display: flex; align-items: flex-start; gap: .55rem; cursor: pointer; } .fx-opt input { margin-top: .3rem; flex: none; }
.fx-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2000; }
.fx-float { position: fixed; z-index: 2001; pointer-events: none; transform: translate(-50%, -50%); font: 800 1.7rem/1 "Segoe UI", system-ui, sans-serif; color: #f59e0b; text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 8px rgba(255, 255, 255, .6); animation: fx-rise 1.05s ease-out forwards; }
/* 1er reflet : une bande de lumière traverse l'illustration du bandeau, DERRIÈRE le personnage (qui passe au-dessus et n'est pas éclairé) */
.page-banner > .banner-char { z-index: 2; }
.fx-sweep { position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.fx-sweep::before { content: ""; position: absolute; top: -25%; bottom: -25%; left: 0; width: 34%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8) 50%, transparent); transform: translateX(-130%) skewX(-18deg); animation: fx-sweep-x var(--fx-sd, 950ms) ease-in-out var(--fx-sdl, 120ms) forwards; }
@keyframes fx-sweep-x { to { transform: translateX(420%) skewX(-18deg); } }
/* 2e reflet : la même lumière passe sur le personnage (sa silhouette seulement) */
.banner-char img.fx-char-glow { filter: brightness(0) invert(1) !important; pointer-events: none; opacity: .92;
  -webkit-mask-image: linear-gradient(100deg, transparent 38%, #000 50%, transparent 62%); mask-image: linear-gradient(100deg, transparent 38%, #000 50%, transparent 62%);
  -webkit-mask-size: 320% 100%; mask-size: 320% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 105% 0; mask-position: 105% 0;
  animation: fx-char-sweep var(--fx-sd, 900ms) ease-in-out var(--fx-sdl, 1000ms) both; }
@keyframes fx-char-sweep { from { -webkit-mask-position: 105% 0; mask-position: 105% 0; } to { -webkit-mask-position: -5% 0; mask-position: -5% 0; } }
/* fond : aller (vers le bas) puis retour (vers le haut), en boucle ; la tuile se répète, donc aucune coupure ; aucun redémarrage en changeant de page */
#fx-bg { position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: radial-gradient(circle at 24px 24px, color-mix(in srgb, var(--ink) 10%, transparent) 2.5px, transparent 3.5px); background-size: 96px 96px; animation: fx-drift-layer 26s ease-in-out infinite alternate; }
#fx-bg[hidden] { display: none; }
:root.fx-drift-body body { animation: fx-drift-body var(--fx-dur, 100s) ease-in-out infinite alternate; }
@keyframes fx-drift-layer { from { background-position-y: 0; } to { background-position-y: 96px; } }
@keyframes fx-drift-body { from { background-position-y: var(--fx-y0, 0px); } to { background-position-y: calc(var(--fx-y0, 0px) + var(--fx-tile-h, 640px)); } }
@keyframes fx-rise { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .fx-sweep, .fx-char-glow { display: none !important; } #fx-bg, :root.fx-drift-body body { animation: none !important; } }

/* ---------- Retours testeurs ↔ développeur (public/feedback.js) ---------- */
.fb-edition { margin: 0 0 .4rem; padding: .2rem .6rem; border-radius: 999px; font-weight: 700; text-align: center; }
.fb-edition.beta { background: #fde68a; color: #422006; } .fb-edition.dev { background: #bfdbfe; color: #0c1a3a; }
.fb-link { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.fb-count { min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: #dc2626; color: #fff; font-size: .8rem; font-weight: 700; text-align: center; } .fb-count[hidden] { display: none; }
.fb-link.has-new { outline: 2px solid #dc2626; outline-offset: 1px; }
.fb-dlg { width: min(36rem, 94vw); } .fb-dlg textarea { width: 100%; margin: .5rem 0; }
.fb-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .4rem; }
.fb-kind-opt { display: flex; gap: .5rem; align-items: flex-start; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; } .fb-kind-opt small { display: block; color: var(--ink-2); }
.fb-opt { display: flex; gap: .55rem; align-items: flex-start; cursor: pointer; } .fb-opt input { margin-top: .3rem; flex: none; }
.fb-item { display: grid; gap: .5rem; } .fb-item.nouveau { border-left: 6px solid #dc2626; } .fb-item.vu { border-left: 6px solid #f59e0b; } .fb-item.traite { border-left: 6px solid #16a34a; opacity: .85; }
.fb-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.fb-kind { padding: .05rem .6rem; border-radius: 999px; font-size: .82rem; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line); }
.fb-kind.bug, .fb-kind.erreur-auto { background: var(--bad-soft); color: var(--bad); } .fb-kind.idee { background: var(--ok-soft); color: var(--ok); } .fb-kind.incompris { background: var(--warn-soft); color: var(--warn); }
.fb-status { font-size: .8rem; font-weight: 700; } .fb-status.nouveau { color: #dc2626; } .fb-status.vu { color: #b45309; } .fb-status.traite { color: #15803d; }
.fb-msg { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-reply { padding: .5rem .8rem; border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; } .fb-reply.new { outline: 2px solid #dc2626; }
.fb-pre { max-height: 14rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; padding: .5rem; background: var(--surface-2); border-radius: 8px; }
.fb-chip { padding: .2rem .8rem; border-radius: 999px; } .fb-chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ok-t { color: var(--ok); } .warn-t { color: var(--warn); }
.fb-state { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.fb-guide { padding: .5rem .8rem; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface-2); } .fb-guide summary { cursor: pointer; font-weight: 700; } .fb-guide ol { margin: .5rem 0 0; padding-left: 1.3rem; display: grid; gap: .4rem; }
.card label.small { display: grid; gap: .25rem; }

/* ---------- Un retour en 10 secondes (version bêta) : bouton toujours visible + fenêtre minimale ---------- */
.fb-fab { position: fixed; top: .7rem; right: 9.8rem; z-index: 54; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .9rem; min-height: 0; border-radius: 999px; border: 2px solid #f59e0b; background: #fff7e0; color: #422006; font-weight: 800; cursor: pointer; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
.fb-fab:hover, .fb-fab:focus-visible { background: #f59e0b; color: #1c1100; }
@media (min-width: 40.01rem) { :root[data-route="lecteur"] .fb-fab, :root[data-route="ouvrir"] .fb-fab { top: auto; right: auto; bottom: .8rem; left: 25.5rem; } }
@media (max-width: 40rem) { .fb-fab { top: auto; right: auto; bottom: .7rem; left: 4rem; padding: .35rem .6rem; } .fb-fab-t { display: none; } }
.fb-quick { width: min(30rem, 94vw); }
.fb-ks { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .5rem; }
.fb-k { display: grid; justify-items: center; gap: .15rem; padding: .6rem .3rem; border-radius: 12px; border: 2px solid var(--line); font-weight: 700; text-align: center; line-height: 1.15; cursor: pointer; }
.fb-k.on { border-color: var(--accent); background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: 1px; }
.fb-emo { font-size: 1.7rem; line-height: 1; }
.fb-quick textarea { width: 100%; margin: 0 0 .4rem; }
.fb-link-note { margin: 0 0 .5rem; }
.fb-thanks { display: grid; justify-items: center; gap: .4rem; padding: 1.6rem .5rem; text-align: center; } .fb-thanks-e { font-size: 3rem; line-height: 1; } .fb-thanks strong { font-size: 1.4rem; }
.fb-welcome { border: 2px solid #f59e0b; }

/* Pomodoro : « Stop » (minuteur en marche) est rouge pour ne jamais se confondre avec le « Repos » */
.pomo-dlg .pomo-controls .is-stop { background: #c62828; border-color: #8e1b1b; color: #fff; }
.pomo-dlg .pomo-controls .is-stop:hover { background: #d93a3a; }

/* ---------- Accès à la bêta : écran d'accès (testeur) et page « Accès des testeurs » (développeur) ---------- */
.is-locked .nav-panel, .is-locked .nav-toggle, .is-locked .fb-fab, .is-locked .tuto-fabbox, .is-locked .mascotte-widget { display: none !important; }
.acces-wrap { display: grid; place-items: center; min-height: 70vh; padding: 1rem 0; }
.acces-lock { width: min(36rem, 100%); text-align: center; justify-items: center; padding: 1.6rem 1.4rem; }
.acces-lock h1 { margin: 0; font-size: 1.7rem; } .acces-lock p { margin: 0; } .acces-lock input { text-align: center; font-size: 1.1rem; }
.acces-lock .row { justify-content: center; } .acces-lock section.card { text-align: left; width: 100%; }
.acces-ico { font-size: 3rem; line-height: 1; }
.acces-table { display: grid; gap: .4rem; }
.acces-row { display: grid; grid-template-columns: minmax(12rem, 1.3fr) minmax(0, 2fr) auto; gap: .6rem; align-items: center; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.acces-row .danger { color: var(--bad); border-color: var(--bad); }
@media (max-width: 40rem) { .acces-row { grid-template-columns: 1fr; } }

/* Version en ligne : l'outil « Sélection Claude » est réservé au développement local */
.is-cloud .cs-ui { display: none !important; }

/* ---- Écrans d'accueil (connexion, essai terminé, questionnaire) : toujours lisibles, quel que soit le thème décoratif ---- */
.acces-lock, .onb-card { --card-bg: var(--surface); --card-line: var(--line); background: var(--surface) !important; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.acces-lock h1, .onb h1, .onb h2 { font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important; font-weight: 700 !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink) !important; paint-order: normal !important; background: none !important; padding: 0 !important; min-height: 0 !important; filter: none !important; }
.acces-lock h1 { font-size: 1.75rem; line-height: 1.25; }
.acces-lock p, .acces-lock label, .acces-lock .small, .onb p, .onb span, .onb strong, .onb dt, .onb dd { color: var(--ink); text-shadow: none; -webkit-text-stroke: 0; font-family: inherit; }
.acces-lock .muted, .onb .muted { color: var(--ink-2); }
.acces-lock input { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: .65rem .8rem; }
.acces-lock button.primary, .onb button.primary { background: var(--accent) !important; color: var(--accent-ink) !important; border: 1px solid var(--accent) !important; font-family: inherit !important; font-weight: 600 !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; text-transform: none !important; border-radius: 10px !important; }
.acces-lock .warn-t { color: var(--bad); font-weight: 600; }
.is-onboarding .nav { opacity: .55; pointer-events: none; }

.onb { display: grid; place-items: start center; padding: .5rem 0 2rem; }
.onb-card { width: min(44rem, 100%); border-radius: 16px; padding: 1.4rem 1.6rem 1.6rem; display: grid; gap: 1rem; }
.onb-welcome { text-align: center; justify-items: center; }
.onb-welcome .onb-points, .onb-welcome .onb-field { text-align: left; width: 100%; }
.onb-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; }
.onb-progress { flex: 1; height: .5rem; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.onb-progress span { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s; }
.onb-step { margin: 0; font-size: .9rem; color: var(--ink-2) !important; }
.onb-logo { font-size: 3rem; line-height: 1; }
.onb h1 { margin: 0; font-size: 1.7rem; line-height: 1.25; outline: none; }
.onb h2 { margin: 0 0 .4rem; font-size: 1.05rem; }
.onb-lead { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--ink-2) !important; max-width: 38rem; }
.onb-ask { margin: 0; font-weight: 600; }
.onb-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.onb-points li { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem .9rem; background: var(--surface-2); border-radius: 12px; }
.onb-points li div { display: grid; }
.onb-points li span:not(.onb-pt-ico) { color: var(--ink-2); font-size: .95rem; }
.onb-pt-ico { font-size: 1.5rem; line-height: 1.2; }
.onb-field { display: grid; gap: .3rem; text-align: left; }
.onb-field > span { font-size: .92rem; font-weight: 600; }
.onb input[type=text], .onb input[type=date], .onb input[type=time], .onb select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .75rem; min-height: 2.8rem; width: 100%; }
.onb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem; }
.onb-opt, .onb-chip { font: inherit; color: var(--ink) !important; background: var(--surface) !important; border: 2px solid var(--line) !important; border-radius: 12px !important; padding: .8rem 1rem !important; text-align: left; cursor: pointer; text-shadow: none !important; -webkit-text-stroke: 0 !important; text-transform: none !important; font-family: inherit !important; font-weight: 500 !important; min-height: 3rem; }
.onb-opt:hover, .onb-chip:hover { border-color: var(--accent) !important; }
.onb-opt.on, .onb-chip.on { border-color: var(--accent) !important; background: var(--accent-soft) !important; font-weight: 700 !important; box-shadow: inset 0 0 0 1px var(--accent); }
.onb-chips { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.onb-chip { text-align: center; min-width: 4.4rem; }
.onb-inline { display: inline-flex; align-items: center; gap: .4rem; }
.onb-inline input { width: auto !important; }
.onb-block { display: grid; gap: .3rem; }
.onb-subjects { display: grid; gap: .7rem; }
.onb-subject { display: grid; gap: .3rem; padding: .7rem .9rem; background: var(--surface-2); border-radius: 12px; }
.onb-evals { display: grid; gap: .5rem; }
.onb-eval { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem .9rem; background: var(--ok-soft); border-radius: 12px; }
.onb-eval div { display: grid; }
.onb-form { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; align-items: end; }
.onb-form .wide, .onb-form .onb-msg { grid-column: 1 / -1; }
.onb-msg { margin: 0; color: var(--bad) !important; min-height: 1.2em; font-weight: 600; }
.onb-recap { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.2rem; margin: 0; padding: 1rem 1.1rem; background: var(--surface-2); border-radius: 12px; text-align: left; }
.onb-recap dt { font-weight: 700; } .onb-recap dd { margin: 0; }
.onb-actions { display: flex; gap: .8rem; justify-content: flex-end; align-items: center; flex-wrap: wrap; margin-top: .4rem; }
.onb-welcome .onb-actions { justify-content: center; }
.onb-skip { text-align: right; }
.onb-later { margin-left: auto; font-size: .95rem; color: var(--ink-2) !important; }
@media (max-width: 640px) { .onb-card { padding: 1.1rem 1rem 1.3rem; } .onb-form { grid-template-columns: 1fr; } .onb-recap { grid-template-columns: 1fr; } .onb h1 { font-size: 1.4rem; } }

/* Écrans d'accueil : carte claire fixe (palette locale, indépendante du thème décoratif) et textes sans effet de contour */
.acces-lock, .onb-card { --surface: #ffffff; --surface-2: #f1efe8; --ink: #1d2433; --ink-2: #4a5365; --line: #d4d0c3; --accent: #1f5f8b; --accent-ink: #ffffff; --accent-soft: #dcebf5; --ok-soft: #e1f2e6; --bad: #a1272b; background: #ffffff !important; color: #1d2433 !important; }
.acces-lock *, .onb-card * { font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; text-transform: none !important; letter-spacing: normal !important; paint-order: normal !important; }
.acces-lock .acces-ico, .onb-logo, .onb-pt-ico { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important; }
.acces-lock button, .onb-card button { background-image: none !important; box-shadow: none !important; filter: none !important; border-radius: 10px !important; min-height: 2.8rem; padding: .6rem 1.1rem !important; font-weight: 600 !important; color: #1d2433 !important; background-color: #f1efe8 !important; border: 1px solid #c9c5b6 !important; cursor: pointer; }
.acces-lock button:hover, .onb-card button:hover { background-color: #e7e4d9 !important; }
.acces-lock button.primary, .onb-card button.primary { background-color: #1f5f8b !important; color: #ffffff !important; border-color: #1f5f8b !important; }
.acces-lock button.primary:hover, .onb-card button.primary:hover { background-color: #184d71 !important; }
.acces-lock button:disabled, .onb-card button:disabled { opacity: .45; cursor: not-allowed; }
.acces-lock button.link, .onb-card button.link { background: none !important; background-color: transparent !important; border: none !important; color: #1f5f8b !important; text-decoration: underline; font-weight: 500 !important; padding: .3rem .2rem !important; min-height: 0; }
.onb-card .onb-opt, .onb-card .onb-chip { background-color: #ffffff !important; border: 2px solid #d4d0c3 !important; font-weight: 500 !important; padding: .8rem 1rem !important; }
.onb-card .onb-opt.on, .onb-card .onb-chip.on { background-color: #dcebf5 !important; border-color: #1f5f8b !important; font-weight: 700 !important; }
.onb-card input, .onb-card select, .acces-lock input { background-color: #ffffff !important; color: #1d2433 !important; border: 1px solid #b9b5a6 !important; border-radius: 8px !important; }
.onb-card ::placeholder, .acces-lock ::placeholder { color: #6b7385 !important; opacity: 1; }
.onb-card .onb-field > span, .onb-card strong { color: #1d2433 !important; }
.onb-card .onb-lead, .onb-card .onb-step, .onb-card .muted, .onb-card .onb-points li span:not(.onb-pt-ico) { color: #4a5365 !important; }
.onb-card .onb-progress span { background: #1f5f8b !important; }
.is-onboarding .nav { opacity: .5; }

.acces-lock button, .onb-card button, .acces-lock input, .onb-card input, .onb-card select { -webkit-text-fill-color: currentColor !important; }
.acces-lock button.primary, .onb-card button.primary { color: #ffffff !important; }
.onb-card strong, .acces-lock strong { font-weight: 700 !important; }
.onb-card .mic, .acces-lock .mic, .onb-card .dict-hint { display: none !important; }
.onb-card .dict-wrap { display: block; width: 100%; }
.is-onboarding .fb-fab { display: none !important; }
.acces-lock button[data-skin], .onb-card button[data-skin] { color: #1d2433 !important; -webkit-text-fill-color: #1d2433 !important; background-color: #f1efe8 !important; background-image: none !important; border: 1px solid #c9c5b6 !important; }
.acces-lock button.primary[data-skin], .onb-card button.primary[data-skin] { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background-color: #1f5f8b !important; border-color: #1f5f8b !important; }
.acces-lock button.link[data-skin], .onb-card button.link[data-skin] { color: #1f5f8b !important; -webkit-text-fill-color: #1f5f8b !important; background-color: transparent !important; border: none !important; }
.onb-card .onb-opt[data-skin], .onb-card .onb-chip[data-skin] { background-color: #ffffff !important; border: 2px solid #d4d0c3 !important; }
.onb-card .onb-opt.on[data-skin], .onb-card .onb-chip.on[data-skin] { background-color: #dcebf5 !important; border-color: #1f5f8b !important; }
.onb-card .small, .onb-card .muted, .acces-lock .small { color: #4a5365 !important; }
:root:root .acces-lock button[data-skin], :root:root .onb-card button[data-skin] { color: #1d2433 !important; -webkit-text-fill-color: #1d2433 !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; opacity: 1; font-weight: 600 !important; background-color: #f1efe8 !important; background-image: none !important; border: 1px solid #c9c5b6 !important; }
:root:root .acces-lock button.primary[data-skin], :root:root .onb-card button.primary[data-skin] { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background-color: #1f5f8b !important; border-color: #1f5f8b !important; }
:root:root .acces-lock button.link[data-skin], :root:root .onb-card button.link[data-skin] { color: #1f5f8b !important; -webkit-text-fill-color: #1f5f8b !important; background-color: transparent !important; border: none !important; font-weight: 500 !important; }
:root:root .onb-card .onb-opt[data-skin], :root:root .onb-card .onb-chip[data-skin] { background-color: #ffffff !important; border: 2px solid #d4d0c3 !important; font-weight: 500 !important; }
:root:root .onb-card .onb-opt.on[data-skin], :root:root .onb-card .onb-chip.on[data-skin] { background-color: #dcebf5 !important; border-color: #1f5f8b !important; font-weight: 700 !important; }
:root:root .onb-card .small, :root:root .onb-card span.small { color: #4a5365 !important; -webkit-text-fill-color: #4a5365 !important; }

.login-tabs { display: flex; gap: .4rem; background: #f1efe8; padding: .25rem; border-radius: 12px; width: 100%; }
.acces-lock .login-tabs .login-tab, :root:root .acces-lock button.login-tab[data-skin] { flex: 1; background-color: transparent !important; border: none !important; color: #4a5365 !important; -webkit-text-fill-color: #4a5365 !important; min-height: 2.5rem; }
:root:root .acces-lock button.login-tab.on, :root:root .acces-lock button.login-tab.on[data-skin] { background-color: #ffffff !important; color: #1d2433 !important; -webkit-text-fill-color: #1d2433 !important; box-shadow: 0 1px 4px rgba(0,0,0,.18) !important; }
:root:root .acces-lock p, :root:root .acces-lock .small, :root:root .acces-lock .muted { color: #3a4356 !important; -webkit-text-fill-color: #3a4356 !important; }
:root:root .acces-lock p.warn-t, :root:root .acces-lock .warn-t { color: #a1272b !important; -webkit-text-fill-color: #a1272b !important; font-weight: 600; }
:root:root .acces-lock h1 { -webkit-text-fill-color: #1d2433 !important; }
:root:root .acces-lock p, :root:root .acces-lock .small { font-weight: 400 !important; line-height: 1.5; } :root:root .acces-lock .login-tabs { margin-bottom: .3rem; } :root:root .acces-lock h1 { margin: .2rem 0 .1rem; }

.prog-step { margin: 1rem 0; }
.step-n { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; flex: none; }
/* Mon programme : les encadrés d'information gardent un texte sombre lisible sur leur fond clair, quel que soit le thème */
:root:root .prog-step .notice, :root:root .prog-step .notice *, :root:root .notice[class*="load-"], :root:root .notice[class*="load-"] * { color: #1d2433 !important; -webkit-text-fill-color: #1d2433 !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; }
:root:root .prog-step .notice a, :root:root .notice[class*="load-"] a { color: #1f5f8b !important; -webkit-text-fill-color: #1f5f8b !important; }

.prog-step { margin: 1rem 0; }
.prog-step > .card { margin: 0 0 .6rem; }
/* Boutons d'état d'une tâche (Terminé / Partiel / À reprendre) : texte toujours lisible, quel que soit le thème */
:root:root .plan-task .seg, :root:root .plan-task .seg[data-skin] { color: #1d2433 !important; -webkit-text-fill-color: #1d2433 !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; background-color: #ffffff !important; background-image: none !important; font-weight: 600; }
:root:root .plan-task .seg[aria-pressed="true"] { background-color: #dcebf5 !important; box-shadow: inset 0 0 0 2px #1f5f8b; }

/* ---- Fenêtre de retour en ligne : carte claire lisible quel que soit le thème, capture cadrable, délai souhaité ---- */
.fb-cloud { --surface: #ffffff; --surface-2: #f1efe8; --ink: #1d2433; --ink-2: #4a5365; --line: #d4d0c3; --accent: #1f5f8b; --accent-ink: #ffffff; --accent-soft: #dcebf5; background: #ffffff !important; color: #1d2433 !important; width: min(36rem, 94vw); }
.fb-cloud *:not(.fb-emo):not(.fb-thanks-e) { font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; text-transform: none !important; letter-spacing: normal !important; paint-order: normal !important; }
.fb-cloud h2 { color: #1d2433 !important; -webkit-text-fill-color: #1d2433 !important; background: none !important; padding: 0 !important; min-height: 0 !important; font-size: 1.35rem; }
:root:root .fb-cloud p, :root:root .fb-cloud .small, :root:root .fb-cloud strong, :root:root .fb-cloud span { color: #1d2433 !important; -webkit-text-fill-color: #1d2433 !important; }
:root:root .fb-cloud .muted { color: #4a5365 !important; -webkit-text-fill-color: #4a5365 !important; }
:root:root .fb-cloud button, :root:root .fb-cloud button[data-skin] { background-image: none !important; box-shadow: none !important; background-color: #f1efe8 !important; color: #1d2433 !important; -webkit-text-fill-color: #1d2433 !important; border: 1px solid #c9c5b6 !important; border-radius: 10px !important; font-weight: 600; }
:root:root .fb-cloud button.primary { background-color: #1f5f8b !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border-color: #1f5f8b !important; }
:root:root .fb-cloud button.link { background: none !important; background-color: transparent !important; border: none !important; color: #1f5f8b !important; -webkit-text-fill-color: #1f5f8b !important; text-decoration: underline; font-weight: 500; }
:root:root .fb-cloud .fb-k, :root:root .fb-cloud .fb-u { background-color: #fff !important; border: 2px solid #d4d0c3 !important; }
:root:root .fb-cloud .fb-k.on, :root:root .fb-cloud .fb-u.on { background-color: #dcebf5 !important; border-color: #1f5f8b !important; }
.fb-cloud textarea { background: #fff !important; color: #1d2433 !important; border: 1px solid #b9b5a6 !important; border-radius: 8px; padding: .6rem .7rem; }
.fb-shot { display: grid; gap: .4rem; margin: .2rem 0 .6rem; }
.fb-shot .row { display: flex; gap: .5rem; flex-wrap: wrap; }
.fb-shot-prev { display: flex; gap: .8rem; align-items: center; padding: .5rem; background: #f1efe8; border-radius: 12px; }
.fb-shot-prev img { max-width: 9rem; max-height: 6rem; border-radius: 6px; border: 1px solid #c9c5b6; background: #fff; }
.fb-urg { display: grid; gap: .4rem; margin: .4rem 0; }
.fb-us { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.fb-u { display: grid; justify-items: center; gap: .1rem; padding: .6rem .3rem; text-align: center; cursor: pointer; }
.fb-u .small { font-size: .78rem; line-height: 1.2; }
.fb-auto { margin: .2rem 0 .6rem; }
@media (max-width: 34rem) { .fb-us { grid-template-columns: 1fr; } .fb-u { grid-template-columns: auto 1fr; justify-items: start; text-align: left; } }
/* ciseau : image en grand, cadre tracé au doigt ou à la souris */
.fb-crop { position: fixed; inset: 0; z-index: 3000; background: rgba(10, 12, 18, .92); display: grid; justify-items: center; align-content: center; gap: .8rem; padding: 1rem; }
.fb-crop-hint { margin: 0; color: #fff; font: 600 1rem/1.4 "Segoe UI", system-ui, sans-serif; text-align: center; max-width: 40rem; }
.fb-crop-stage { position: relative; touch-action: none; cursor: crosshair; user-select: none; }
.fb-crop-box { position: absolute; border: 2px solid #f59e0b; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); pointer-events: none; }
.fb-crop-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; align-items: center; }
.fb-crop .link { color: #fff !important; text-decoration: underline; }
.fb-crop button.primary:disabled { opacity: .45; }
/* retours reçus : délai souhaité + vignette de la capture */
.fb-extras { display: flex; gap: .8rem; align-items: flex-start; flex-wrap: wrap; }
.fb-urgbadge { padding: .1rem .6rem; border-radius: 999px; font-size: .82rem; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line); }
.fb-urgbadge.bad { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); } .fb-urgbadge.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.fb-shot-thumb img { display: block; max-width: 14rem; max-height: 9rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.fb-cloud h2::before, .fb-cloud h2::after { display: none !important; }
.fb-cloud h2 { background-image: none !important; text-align: left !important; }
.fb-shot-prev > div { display: grid; gap: .3rem; justify-items: start; }
.fb-crop-stage { overflow: hidden; border-radius: 6px; }
.fb-crop-hint, .fb-crop-actions { position: relative; z-index: 2; }
:root:root .fb-crop button, :root:root .fb-crop button[data-skin] { background-image: none !important; box-shadow: none !important; background-color: #f1efe8 !important; color: #1d2433 !important; -webkit-text-fill-color: #1d2433 !important; border: 1px solid #c9c5b6 !important; border-radius: 10px !important; font-family: "Segoe UI", system-ui, sans-serif !important; font-weight: 600; text-shadow: none !important; -webkit-text-stroke: 0 !important; }
:root:root .fb-crop button.primary { background-color: #f59e0b !important; color: #1c1100 !important; -webkit-text-fill-color: #1c1100 !important; border-color: #f59e0b !important; }
:root:root .fb-crop button.link { background: none !important; background-color: transparent !important; border: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; text-decoration: underline; }
:root:root .fb-crop .fb-crop-hint { color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; font-family: "Segoe UI", system-ui, sans-serif !important; }
/* micro de dictée : petit bouton discret dans les cartes claires (questionnaire, fenêtre de retour) ; seul l'écran de connexion n'en a pas */
:root:root .onb-card .mic, :root:root .fb-cloud .mic { display: inline-grid !important; min-height: 0 !important; width: 2rem; height: 2rem; padding: 0 !important; background: transparent !important; background-color: transparent !important; border: none !important; color: #1f5f8b !important; -webkit-text-fill-color: #1f5f8b !important; place-items: center; }
:root:root .onb-card .mic.listening, :root:root .fb-cloud .mic.listening { background-color: #fde2e2 !important; color: #a1272b !important; -webkit-text-fill-color: #a1272b !important; }

.dict-pill-row { display: flex; gap: .4rem; align-items: center; }
.dict-pill-gear { width: 2.3rem; height: 2.3rem; padding: 0 !important; border-radius: 50% !important; display: inline-grid; place-items: center; font-size: 1.1rem; background: var(--surface); box-shadow: 0 2px 10px rgba(0,0,0,.25); }

/* ⚙ du micro : discret, visible au survol / pendant la saisie (toujours visible sur écran tactile) */
.dict-wrap > textarea, .dict-wrap > input { padding-right: 4.6rem; }
button.mic-set { position: absolute; right: 2.55rem; top: .5rem; width: 1.7rem; height: 1.7rem; padding: 0; display: grid; place-items: center; border-radius: 50%; font-size: .95rem; line-height: 1; opacity: 0; transition: opacity .15s; background: transparent; border: none; color: var(--ink-2); cursor: pointer; }
.dict-wrap.inline > button.mic-set { top: 50%; transform: translateY(-50%); }
.dict-wrap:hover > button.mic-set, .dict-wrap:focus-within > button.mic-set, button.mic-set:focus-visible { opacity: .85; }
@media (hover: none) { button.mic-set { opacity: .7; } }
:root:root .acces-lock .mic-set { display: none !important; }
:root:root .onb-card .mic-set, :root:root .fb-cloud .mic-set { min-height: 0 !important; width: 1.7rem; height: 1.7rem; padding: 0 !important; background: transparent !important; background-color: transparent !important; border: none !important; color: #4a5365 !important; -webkit-text-fill-color: #4a5365 !important; }

/* mode « Éditer » (crayon) : sélection de texte à la souris → panneau police / couleur / contour / fond */
.ei-pencil { position: fixed; top: .7rem; right: 21.5rem; z-index: 56; display: inline-flex; align-items: center; gap: .15rem; padding: .35rem .8rem; border-radius: 999px; border: 2px solid #d9480f; background: var(--surface, #fff); color: var(--ink, #111); font-weight: 600; cursor: pointer; }
.ei-pencil.ei-active { background: #d9480f; color: #fff; }
.ei-btns { position: fixed; top: .7rem; right: 21.5rem; z-index: 56; display: flex; gap: .4rem; }
.ei-btns .ei-pencil { position: static; }
.ei-bar { position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: .8rem; z-index: 70; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .45rem .8rem; border-radius: 12px; border: 2px solid #d9480f; background: var(--surface, #fff); color: var(--ink, #111); box-shadow: 0 4px 18px rgba(0,0,0,.3); max-width: calc(100vw - 1.5rem); }
.ei-tools { position: fixed; z-index: 80; width: 23rem; box-sizing: border-box; max-width: calc(100vw - 1rem); display: grid; gap: .4rem; padding: .7rem .8rem; border-radius: 12px; border: 2px solid #d9480f; background: var(--surface, #fff); color: var(--ink, #111); box-shadow: 0 6px 24px rgba(0,0,0,.35); font-size: .92rem; }
.ei-tools[hidden], .ei-bar[hidden], .ei-pencil[hidden], .ei-btns[hidden] { display: none; }
.ei-title { font-size: 1rem; } .ei-row { display: flex; align-items: center; gap: .5rem; } .ei-row > select { flex: 1; min-width: 0; } .ei-lab { width: 4.6rem; flex: none; font-weight: 600; } .ei-end { justify-content: space-between; }
.ei-tools input[type=color] { width: 2.4rem; height: 2rem; padding: 0; } .ei-tools input[type=range] { flex: 1; min-width: 0; } .ei-x { padding: 0 .5rem; }
.ei-seg { display: flex; flex: 1; gap: 0; } .ei-seg button { flex: 1; padding: .3rem .2rem; border-radius: 0; margin: 0; font-size: .85rem; } .ei-seg button:first-child { border-radius: 8px 0 0 8px; } .ei-seg button:last-child { border-radius: 0 8px 8px 0; } .ei-seg button[aria-pressed="true"] { background: #d9480f; color: #fff; border-color: #d9480f; font-weight: 700; }
.ei-peek { outline: 2px dashed #d9480f !important; outline-offset: 2px !important; } .ei-scope { margin: 0; color: var(--ink-2, #555); }
.ei-out { min-width: 3.4rem; text-align: right; font-size: .85rem; } .ei-wrap { flex-wrap: wrap; } .ei-row[hidden] { display: none; }
html.ei-on main { cursor: text; } html.ei-on main ::selection { background: #ffd43b; color: #000; } .ei-dlg { max-width: 30rem; }
@media (max-width: 40rem) { .ei-btns { top: auto; bottom: 3.6rem; right: auto; left: 4.6rem; } }

/* ---- Questionnaire d'accueil : mascotte qui réagit, tableaux « ce que tes réponses remplissent », aperçu du prompt IA ---- */
.is-onboarding .mascotte-widget, body:has(.onb-card) .mascotte-widget { display: none !important; }
@keyframes onb-pop { 0% { transform: scale(.94); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes onb-rise { 0% { opacity: 0; transform: translateY(10px) scale(.8); } 20% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-38px) scale(1); } }
@keyframes onb-flash { 0% { background: #ffe08a; } 100% { background: #fff3cd; } }
.onb-sparks { font-weight: 800; font-size: .95rem; white-space: nowrap; padding: .2rem .7rem; border-radius: 99px; background: #fff3cd; color: #8a5a00 !important; }
.onb-sparks[hidden] { display: none; }
.onb-sparks.pop { animation: onb-pop .5s ease; }
.onb-progress.full { opacity: .45; }
.onb-stage { display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 8.2rem; }
.onb-figure { position: relative; flex: none; }
.onb-figure canvas { display: block; }
.onb-spark { position: absolute; top: .2rem; right: -.4rem; opacity: 0; pointer-events: none; font-weight: 800; font-size: 1.1rem; padding: .1rem .6rem; border-radius: 99px; background: #fff3cd; color: #8a5a00 !important; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.onb-spark.on { animation: onb-rise 1.5s ease-out; }
.onb-bubble { position: relative; flex: 1; margin: 0; min-height: 3.4rem; text-align: left; font-size: 1.02rem; line-height: 1.4; padding: .75rem 1rem; background: #ffffff; color: #1d2433 !important; border: 2px solid #1d2433; border-radius: 16px; }
.onb-bubble::before { content: ''; position: absolute; left: -9px; top: 1.5rem; width: 14px; height: 14px; background: #ffffff; border-left: 2px solid #1d2433; border-bottom: 2px solid #1d2433; transform: rotate(45deg); }
.onb-stage.nofig .onb-bubble::before { display: none; }
.onb-bubble.pop { animation: onb-pop .35s ease; }
.onb-meters { display: grid; gap: .45rem; width: 100%; text-align: left; }
.onb-meter { background: var(--surface-2); border-radius: 12px; padding: .5rem .75rem; transition: background .3s; }
.onb-meter.full { background: var(--ok-soft); }
.onb-meter-head { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.onb-count { font-weight: 800; color: #4a5365 !important; }
.onb-chiplist { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.onb-tick { font-size: .8rem; padding: .15rem .6rem; border-radius: 99px; border: 1px dashed #b9b5a6; background: #ffffff; color: #4a5365 !important; }
.onb-tick.on { border-style: solid; border-color: #2f7d4a; background: #e1f2e6; color: #1b5a33 !important; font-weight: 700; }
.onb-tick.pulse { animation: onb-pop .6s ease; }
.onb-feeds { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .85rem; color: #4a5365 !important; }
.onb-feed { padding: .12rem .65rem; border-radius: 99px; background: #dcebf5; color: #1f5f8b !important; font-weight: 700; }
.onb-feed.prompt { background: #f1e6fb; color: #6b2fa0 !important; }
.onb-mascots { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); width: 100%; }
.onb-tile { display: flex !important; flex-direction: column; align-items: center; gap: .3rem; text-align: center !important; padding: .6rem .4rem !important; }
.onb-tile img, .onb-tile canvas { width: 84px; height: 84px; object-fit: contain; display: block; }
.onb-tile strong { font-size: .85rem; line-height: 1.2; }
.onb-welcome h2 { text-align: left; width: 100%; }
.onb-welcome > * { max-width: 100%; }
.onb-prompt { background: var(--surface-2); border-radius: 12px; padding: .55rem .85rem; text-align: left; }
.onb-prompt summary { cursor: pointer; font-weight: 700; }
.onb-promptlines { display: grid; gap: .25rem; margin-top: .5rem; font-size: .9rem; }
.onb-promptlines .ln { margin: 0; padding: .2rem .45rem; border-radius: 6px; }
.onb-promptlines .ln.new { background: #fff3cd; animation: onb-flash 1.8s ease; }
.onb-promptlines .ln.dim { color: #4a5365 !important; font-style: italic; }
.onb-ideas { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.onb-ideas .onb-chip { min-height: 2.2rem; padding: .3rem .7rem !important; font-size: .9rem; }
.onb-card textarea { font: inherit; width: 100%; padding: .6rem .75rem; border-radius: 8px !important; background-color: #ffffff !important; color: #1d2433 !important; border: 1px solid #b9b5a6 !important; resize: vertical; }
.onb-next-part { background: #f1e6fb; border-radius: 12px; padding: .9rem 1.1rem; text-align: left; }
.onb-next-part p { margin: .3rem 0 0; }
.onb-result { background: var(--surface-2); border-radius: 12px; padding: .9rem 1.1rem; text-align: left; display: grid; gap: .5rem; }
.onb-result .onb-recap { padding: 0; background: transparent; }
@media (max-width: 640px) { .onb-stage { gap: .6rem; min-height: 6.5rem; } .onb-figure canvas { width: 92px !important; height: 92px !important; } .onb-bubble { font-size: .95rem; padding: .6rem .8rem; } }
@media (prefers-reduced-motion: reduce) { .onb-bubble.pop, .onb-tick.pulse, .onb-spark.on, .onb-sparks.pop, .onb-promptlines .ln.new { animation: none; } }
@media (max-width: 640px) { .onb-meters { gap: .35rem; } .onb-meter { padding: .4rem .6rem; } .onb-chiplist { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .1rem; } .onb-chiplist::-webkit-scrollbar { display: none; } .onb-tick { white-space: nowrap; flex: none; } }
.onb-card > *, .onb-meters, .onb-meter { min-width: 0; }
/* ---- Boutique d'Étincelles et filières « Prête / Bientôt » ---- */
.onb-price { font-size: .8rem; font-weight: 800; padding: .1rem .55rem; border-radius: 99px; background: #fff3cd; color: #8a5a00 !important; }
.onb-price.mine { background: #e1f2e6; color: #1b5a33 !important; }
.onb-wallet { margin: 0; font-weight: 600; text-align: left; width: 100%; }
.onb-fil { display: flex !important; flex-direction: column; align-items: flex-start; gap: .35rem; }
.onb-badge { font-size: .75rem; font-weight: 800; padding: .1rem .55rem; border-radius: 99px; }
.onb-badge.ready { background: #e1f2e6; color: #1b5a33 !important; }
.onb-badge.soon { background: #fff3cd; color: #8a5a00 !important; }
.onb-own { display: grid; gap: .6rem; padding: .8rem 1rem; background: var(--surface-2); border-radius: 12px; text-align: left; }
.onb-own[hidden], .onb-own .onb-field[hidden] { display: none; }
.onb-card h2 { text-align: left; }
/* ---- Étape « univers » du questionnaire : aperçu réel de l'application dans un cadre ---- */
.onb:has(.onb-wide) .onb-wide { width: min(64rem, 100%); }
.onb-themes { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.onb-themes .onb-opt .small { color: #4a5365 !important; font-weight: 400; }
.onb-colors { display: grid; gap: .6rem; padding: .8rem 1rem; background: var(--surface-2); border-radius: 12px; text-align: left; }
.onb-colors[hidden] { display: none; }
.onb-presets, .onb-pickers { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.onb-dot { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; border: 1px solid #8b8776; margin-right: .15rem; }
.onb-pickers input[type=color] { width: 2.6rem; height: 2.2rem; padding: 0; border: 1px solid #b9b5a6; border-radius: 6px; vertical-align: middle; background: #fff; }
.onb-pv { position: relative; width: 100%; overflow: hidden; border: 2px solid #1d2433; border-radius: 12px; background: #888; }
.onb-pv-frame { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; }
.wish { text-align: left; background: var(--surface-2); border-radius: 12px; padding: .8rem 1rem; }
.wish textarea { width: 100%; }
/* cadre d'aperçu : l'application sans ses bulles flottantes */
html.is-preview .tuto-fabbox, html.is-preview .fb-fab, html.is-preview .mascotte-widget, html.is-preview #tuto-nav-btn, html.is-preview .pomo-fab { display: none !important; }

/* « Je bloque sur ce cours » : quatre pistes au choix */
.bloque-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .7rem; }
.bloque-tile { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; padding: 1rem; min-height: 5rem; position: relative; transition: transform .15s, box-shadow .15s, border-color .15s; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer; }
/* Pictogramme blanc posé sur une pastille sombre fixe : lisible sur tous les thèmes, clairs ou foncés */
.bloque-ico { display: grid; place-items: center; width: 9rem; height: 9rem; max-width: 100%; flex: none; margin-bottom: .4rem; border-radius: 26px; background: #1c2030; box-shadow: inset 0 0 0 2px rgba(255,255,255,.14); }
.bloque-tile.is-spin { transform: scale(1.05); border-color: var(--c01, #f5b800); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c01, #f5b800) 45%, transparent), 0 8px 22px rgba(0,0,0,.35); }
.bloque-tile.is-win { animation: bloque-pop .7s ease; border-color: var(--c01, #f5b800); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c01, #f5b800) 60%, transparent), 0 0 32px color-mix(in srgb, var(--c01, #f5b800) 70%, transparent); }
@keyframes bloque-pop { 0% { transform: scale(1); } 35% { transform: scale(1.12) rotate(-2deg); } 65% { transform: scale(1.06) rotate(2deg); } 100% { transform: scale(1.05); } }
.bloque-spark { position: absolute; left: 50%; top: 40%; color: #ffd84a; font-size: 1.3rem; pointer-events: none; animation: bloque-fly .9s ease-out forwards; }
@keyframes bloque-fly { from { transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(.4); opacity: 1; } to { transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--d) * -1.6)) scale(1.2); opacity: 0; } }
.bloque-dice { font-weight: 700; }
.bloque-grid { position: relative; }
/* guirlande de lumières façon casino autour des cases pendant le tirage */
.bloque-grid.is-casino::before { content: ''; position: absolute; inset: -12px; border-radius: 22px; pointer-events: none; z-index: 1; border: 7px dotted #ffd84a; box-shadow: 0 0 14px #ffb300, inset 0 0 14px #ffb300; animation: bloque-bulbs .3s steps(2) infinite; }
.bloque-grid.is-jackpot::before { animation-duration: .12s; }
@keyframes bloque-bulbs { 0% { border-color: #ffd84a; } 50% { border-color: #ff5a3c; } 100% { border-color: #ffd84a; } }
.bloque-grid.is-casino .bloque-tile:not(.is-spin):not(.is-win) { filter: brightness(.72); }
.bloque-jackpot { position: absolute; left: 50%; top: 8px; transform: translateX(-50%) rotate(-4deg); z-index: 3; white-space: nowrap; padding: .15rem .7rem; border-radius: 999px; font: 900 1.05rem/1.3 system-ui, sans-serif; letter-spacing: .06em; color: #4a2b00; background: linear-gradient(#fff3a0, #ffc400); box-shadow: 0 0 0 2px #7a4a00, 0 4px 14px rgba(0,0,0,.4); animation: bloque-jp .35s ease-out, bloque-jp-glow .4s ease-in-out .35s infinite alternate; }
@keyframes bloque-jp { from { transform: translateX(-50%) scale(.2) rotate(-20deg); opacity: 0; } to { transform: translateX(-50%) scale(1) rotate(-4deg); opacity: 1; } }
@keyframes bloque-jp-glow { to { box-shadow: 0 0 0 2px #7a4a00, 0 0 22px #ffd84a; } }
.bloque-sfx { min-width: 2.4rem; }
@media (prefers-reduced-motion: reduce) { .bloque-grid.is-casino::before, .bloque-jackpot { animation: none !important; } }
.bloque-dice-ico { display: inline-block; margin-right: .4rem; transition: transform .3s; }
.bloque-dice:hover:not(:disabled) .bloque-dice-ico { animation: bloque-roll .6s ease; }
.bloque-dice:disabled .bloque-dice-ico { animation: bloque-roll .5s linear infinite; }
@keyframes bloque-roll { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bloque-tile.is-win, .bloque-dice-ico, .bloque-spark { animation: none !important; } .bloque-tile.is-spin { transform: none; } }
.bloque-ico img { width: 84%; height: 84%; object-fit: contain; display: block; }
.bloque-tile[aria-pressed="true"] { border-color: var(--c01, #2563eb); background: color-mix(in srgb, var(--c01, #2563eb) 10%, var(--surface)); }
.bloque-steps { margin: 0; padding-left: 1.3rem; }
.bloque-cta { font-weight: 600; border: 2px solid var(--c03, #d97706); }
.bloque-fab { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; padding: .7rem 1.1rem; border-radius: 999px; font-weight: 700; text-decoration: none; background: var(--c03, #d97706); color: var(--c03-on, #fff); box-shadow: 0 4px 14px rgba(0,0,0,.3); }
/* Compteur d'Étincelles (toujours visible) et ses animations de gain / dépense */
.spark-counter { position: fixed; top: 4.2rem; left: .8rem; z-index: 45; display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .75rem; border-radius: 999px; font-weight: 800; font-size: 1.05rem; text-decoration: none; color: var(--c21-ink, #92400e); background: var(--c21-soft, #fff7d6); border: 2px solid var(--c21, #f0c36d); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.spark-counter .spark-star { color: #f59e0b; }
.spark-counter.gain { animation: sparkGain 1.2s ease-out; }
.spark-counter.loss { animation: sparkLoss 1.2s ease-out; }
@keyframes sparkGain { 0% { transform: scale(1); } 15% { transform: scale(1.5) rotate(-6deg); box-shadow: 0 0 0 0 rgba(245,158,11,.8), 0 0 26px 8px rgba(245,158,11,.9); } 35% { transform: scale(1.25) rotate(4deg); } 100% { transform: scale(1); box-shadow: 0 0 0 28px rgba(245,158,11,0), 0 2px 8px rgba(0,0,0,.18); } }
@keyframes sparkLoss { 0% { transform: scale(1); } 15% { transform: scale(.82) translateX(-5px); background: #fee2e2; border-color: #dc2626; } 30% { transform: scale(1.05) translateX(5px); } 45% { transform: translateX(-3px); } 60% { transform: translateX(2px); } 100% { transform: scale(1); } }
.spark-pop { position: fixed; z-index: 120; transform: translateX(-50%); font-weight: 900; font-size: 2.6rem; pointer-events: none; text-shadow: 0 2px 0 #fff, 0 0 14px rgba(255,255,255,.9); animation: sparkPop 1.9s cubic-bezier(.2,1.4,.4,1) forwards; }
.spark-pop.gain { color: #d97706; } .spark-pop.loss { color: #dc2626; }
@keyframes sparkPop { 0% { opacity: 0; transform: translateX(-50%) scale(.2); } 20% { opacity: 1; transform: translateX(-50%) scale(1.35); } 35% { transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(40px) scale(1); } }
.spark-bit { position: fixed; z-index: 119; pointer-events: none; line-height: 1; animation: sparkBit 1.4s ease-out forwards; }
.spark-bit.gain { color: #f59e0b; } .spark-bit.loss { color: #dc2626; }
@keyframes sparkBit { 0% { opacity: 1; transform: translate(0,0) rotate(0) scale(.4); } 20% { opacity: 1; transform: translate(calc(var(--dx) * .6), calc(var(--dy) * .6)) rotate(calc(var(--rot) * .5)) scale(1.2); } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 40px)) rotate(var(--rot)) scale(.6); } }
@media (prefers-reduced-motion: reduce) { .spark-counter.gain, .spark-counter.loss { animation: none; } }
/* Confirmation d'achat d'une mascotte */
.buy-dialog { max-width: min(26rem, calc(100vw - 2rem)); border: 2px solid var(--line); border-radius: 16px; padding: 1.2rem; background: var(--surface); color: var(--ink); }
.buy-dialog[open] { display: flex; flex-direction: column; gap: .9rem; }
.buy-dialog::backdrop { background: rgba(0,0,0,.5); }
.buy-stage { display: grid; place-items: center; background: var(--bg, var(--surface)); border-radius: 12px; padding: .5rem; }
.buy-preview { width: 200px; height: 200px; }
.bloque-fab { bottom: 8.5rem; }
.is-locked .spark-counter, .is-onboarding .spark-counter, body:has(.onb-card) .spark-counter { display: none !important; }
/* Mode « à reformuler » du lecteur */
.reform-bar { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 60; width: min(46rem, calc(100vw - 1.5rem)); display: flex; flex-direction: column; gap: .6rem; padding: .8rem 1rem; border: 2px solid #e879f9; border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 6px 22px rgba(0,0,0,.35); }
.reform-bar .disabled { opacity: .55; pointer-events: none; }
.reform-mode .bloque-fab, .reform-mode .mascotte-widget { display: none !important; }
.uh-reform { white-space: nowrap; }
.bloque-choice { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-align: left; padding: .8rem 1rem; min-height: 4.5rem; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; }
.bloque-choice[aria-pressed="true"] { border-color: #e879f9; background: color-mix(in srgb, #e879f9 12%, var(--surface)); }
/* Feuille blanche : dictée et dessin en même temps */
.ak-mic.rec { background: #dc2626; border-color: #dc2626; color: #fff; animation: akRec 1.4s ease-in-out infinite; }
@keyframes akRec { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.55); } 50% { box-shadow: 0 0 0 9px rgba(220,38,38,0); } }
.ak-ink { width: 2.2rem; height: 2.2rem; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid var(--line); }
.ak-canvas { touch-action: none; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .ak-mic.rec { animation: none; } }
.ak-level { display: inline-block; width: 5rem; height: .7rem; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); } .ak-level i { display: block; height: 100%; width: 0; background: #16a34a; transition: width .08s linear; }
/* « Paint » simplifié de la feuille blanche */
.dp { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: .5rem; }
.dp-ribbon { display: flex; flex-wrap: wrap; gap: .4rem; align-items: stretch; border-bottom: 1px solid var(--line); padding-bottom: .4rem; }
.dp-group { display: flex; flex-direction: column; justify-content: space-between; gap: .2rem; padding: 0 .5rem; border-right: 1px solid var(--line); }
.dp-group:last-child { border-right: 0; }
.dp-items { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.dp-gname { text-align: center; font-size: .75rem; color: var(--muted, #6b7280); }
.dp-row { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.dp-btn { min-height: 2.3rem; padding: .2rem .55rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.dp-btn[aria-pressed="true"] { border-color: #2563eb; background: color-mix(in srgb, #2563eb 16%, var(--surface)); font-weight: 700; }
.dp-btn:disabled { opacity: .45; cursor: default; }
.dp-pal { display: flex; flex-wrap: wrap; gap: .25rem; max-width: 17rem; align-items: center; }
.dp-sw { width: 1.7rem; height: 1.7rem; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; }
.dp-color { width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.dp-num { width: 4.5rem; }
.dp-lab { display: inline-flex; gap: .3rem; align-items: center; }
.dp-textrow { background: color-mix(in srgb, #2563eb 7%, var(--surface)); border-radius: 8px; padding: .3rem .5rem; }
.dp-stage { position: relative; background: #e5e7eb; border-radius: 8px; padding: .6rem; overflow: auto; }
.dp-canvas { display: block; width: 100%; height: auto; touch-action: none; box-shadow: 0 1px 6px rgba(0,0,0,.25); background: #fff; }
.dp-text { position: absolute; margin: .6rem; padding: 0 2px; border: 1px dashed #2563eb; outline: none; resize: none; overflow: hidden; white-space: pre; z-index: 5; box-sizing: content-box; }
@media (min-width: 64rem) { .spark-counter { top: .55rem; left: 16.6rem; } } /* à droite du menu, loin des boutons fixes du coin haut droit (Tutoriel, retours) */
/* Paint : une seule ligne d'outils, feuille infinie, fond en trois boutons à la couleur de la page */
.dp-ribbon { flex-wrap: nowrap; overflow-x: auto; align-items: stretch; }
.dp-group { flex: none; padding: 0 .35rem; }
.dp-items { flex-wrap: nowrap; gap: .15rem; }
.dp-btn { min-width: 2.1rem; padding: .15rem .35rem; font-size: 1.05rem; }
.dp-pal { display: grid; grid-template-columns: repeat(7, 1.35rem); gap: .2rem; max-width: none; align-items: center; }
.dp-sw { width: 1.35rem; height: 1.35rem; }
.dp-range { width: 5rem; } .dp-out { min-width: 2.2rem; text-align: center; }
.dp-stage { padding: 0; overflow: hidden; background: #9ca3af; }
.dp-canvas { box-shadow: none; max-width: none; border: 0; border-radius: 0; }
.dp-text { min-height: 0 !important; max-height: none !important; margin: 0 !important; box-sizing: border-box; line-height: 1.25; resize: none; }
.dp-bgrow { gap: .6rem; }
.dp-bgbtn { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border: 3px solid var(--page-col, var(--c01, #2563eb)); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.dp-bgbtn:hover, .dp-bgbtn:focus-within { background: color-mix(in srgb, var(--page-col, var(--c01, #2563eb)) 20%, var(--surface)); }
.dp-bgpick { width: 1.9rem; height: 1.9rem; padding: 0; border: 2px solid var(--ink); border-radius: 6px; background: none; cursor: pointer; }
.dp-spacer { flex: 1; }
.ak-partial { margin: .2rem 0 0; padding: .35rem .6rem; border-left: 4px solid var(--page-col, var(--c01, #2563eb)); background: color-mix(in srgb, var(--page-col, var(--c01, #2563eb)) 10%, var(--surface)); font-style: italic; color: var(--ink); }
.ak-prog { width: 100%; height: .6rem; }
.dp-stage { position: relative !important; } .dp-stage > .dp-text { position: absolute !important; z-index: 5; width: auto; }
.spark-counter.in-nav { position: static; margin-left: auto; font-size: .95rem; padding: .1rem .6rem; box-shadow: none; z-index: auto; }
.ak-remote { align-self: flex-start; font-size: .95rem; padding: .4rem .9rem; } .ak-remote[aria-pressed="true"] { background: color-mix(in srgb, #16a34a 22%, var(--surface)); border-color: #16a34a; }
/* Minuteur collé à la feuille de dessin */
.ak-timer { position: absolute; top: .5rem; right: .5rem; z-index: 6; display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .5rem; border: 3px solid var(--page-col, var(--c01, #2563eb)); border-radius: 12px; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.ak-time { min-width: 3.4rem; text-align: center; font-weight: 800; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.ak-timer select { min-height: 0; padding: .1rem .2rem; }
.ak-timer.done { background: #fee2e2; border-color: #dc2626; color: #7f1d1d; animation: akDone 1s ease-in-out 4; }
@keyframes akDone { 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .ak-timer.done { animation: none; } }
/* ruban plus compact : tous les outils tiennent sur une ligne sur un écran de PC */
.dp-ribbon { gap: 0; }
.dp-group { padding: 0 .3rem; }
.dp-btn { min-width: 1.9rem; min-height: 2rem; padding: .1rem .25rem; font-size: 1rem; }
.dp-pal { grid-template-columns: repeat(7, 1.2rem); gap: .15rem; }
.dp-sw { width: 1.2rem; height: 1.2rem; }
.dp-range { width: 4rem; } .dp-out { min-width: 1.8rem; }
.dp-lab .small { font-size: .8rem; }
.dp-group { padding: 0 .2rem; } .dp-range { width: 3.2rem; } .dp-pal { grid-template-columns: repeat(7, 1.1rem); } .dp-sw { width: 1.1rem; height: 1.1rem; } .dp-color { width: 1.6rem; height: 1.6rem; }
.dp-btn { min-width: 1.7rem; padding: .1rem .15rem; } .dp-ribbon .dp-out { min-width: 1.5rem; } .dp-gname { font-size: .7rem; }
.ak-tuto { max-width: min(58rem, calc(100vw - 2rem)); width: 100%; } .ak-yt-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; } .ak-yt-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Icônes plus grosses et légendées, épaisseur du trait visible, repère de la page, minuteur au-dessus de la feuille */
.dp-ribbon { flex-wrap: wrap; row-gap: .5rem; overflow: visible; }
.dp-group { padding: 0 .35rem; }
.dp-btn { min-width: 2.6rem; min-height: 2.6rem; padding: .15rem .2rem; font-size: 1rem; }
.dp-ib { display: flex; flex-direction: column; align-items: center; gap: .1rem; line-height: 1; }
.dp-ico { display: inline-flex; width: 1.8rem; height: 1.8rem; } .dp-ico svg { width: 100%; height: 100%; }
.dp-cap { font-size: .62rem; font-weight: 700; white-space: nowrap; }
.dp-gname { font-size: .72rem; }
.dp-thick { display: inline-flex; align-items: center; justify-content: center; width: 3.4rem; height: 2.6rem; border: 1px solid var(--line); border-radius: 8px; background: #374151; }
.dp-thick i { display: block; width: 82%; height: 4px; border-radius: 99px; background: #facc15; }
.dp-sw[aria-pressed="true"] { outline: 3px solid var(--page-col, #2563eb); outline-offset: 2px; }
.dp-fillshape { display: inline-flex; align-items: center; gap: .2rem; cursor: pointer; }
.dp-mini { position: absolute; left: .5rem; bottom: .5rem; z-index: 6; width: 12rem; border: 3px solid var(--page-col, var(--c01, #2563eb)); border-radius: 10px; background: color-mix(in srgb, var(--surface) 94%, transparent); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.35); overflow: hidden; }
.dp-minih { display: flex; justify-content: space-between; align-items: center; gap: .4rem; padding: .1rem .45rem; font-size: .8rem; }
.dp-minicv { display: block; width: 100%; height: auto; cursor: crosshair; }
.dp-minitog { min-height: 0; padding: 0 .35rem; }
.ak-timer { position: static; box-shadow: none; }
/* le paint garde son propre style de boutons, quel que soit l'habillage du thème (blocs, bordures dessinées…) */
.dp .dp-btn { background: var(--surface) !important; background-image: none !important; border: 2px solid var(--line) !important; border-image: none !important; border-radius: 10px !important; color: var(--ink) !important; box-shadow: none !important; text-shadow: none !important; transform: none !important; min-width: 2.7rem; min-height: 2.9rem; padding: .2rem .25rem !important; }
.dp .dp-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--page-col, #2563eb) 14%, var(--surface)) !important; }
.dp .dp-btn[aria-pressed="true"] { border-color: var(--page-col, #2563eb) !important; background: color-mix(in srgb, var(--page-col, #2563eb) 24%, var(--surface)) !important; }
.dp .dp-btn:disabled { opacity: .4; }
.dp .dp-cap { font-family: system-ui, "Segoe UI", Arial, sans-serif !important; font-size: .72rem !important; font-weight: 700 !important; letter-spacing: 0 !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; color: var(--ink) !important; }
.dp .dp-gname { font-family: system-ui, "Segoe UI", Arial, sans-serif !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; color: var(--ink) !important; opacity: .75; }
.dp .dp-ico svg { color: var(--ink); }
.dp .dp-out { font-family: system-ui, "Segoe UI", Arial, sans-serif !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; color: var(--ink) !important; font-weight: 700; }
.dp .dp-zoom { min-width: 3rem; }
/* le paint est une « feuille d'outils » claire : couleurs fixes, lisibles sur tous les thèmes (clair ou sombre) */
.dp { background: #ffffff !important; color: #111827 !important; border-color: #cbd5e1 !important; }
.dp .dp-btn { background: #ffffff !important; color: #111827 !important; border-color: #cbd5e1 !important; }
.dp .dp-btn:hover:not(:disabled) { background: #eef2ff !important; }
.dp .dp-btn[aria-pressed="true"] { background: #dbeafe !important; border-color: #2563eb !important; }
.dp .dp-cap, .dp .dp-out, .dp .dp-gname, .dp .dp-ico svg, .dp .small, .dp strong, .dp label { color: #111827 !important; }
.dp .dp-textrow { background: #eff6ff !important; }
.dp select, .dp input[type="number"] { background: #fff !important; color: #111827 !important; border: 1px solid #94a3b8 !important; }
.dp .dp-mini, .dp .dp-minih { color: #111827 !important; } .dp .dp-mini { background: #ffffff !important; }
.ak-timer { background: #ffffff !important; color: #111827 !important; } .ak-timer select { background: #fff !important; color: #111827 !important; }
.ak-timer .dp-btn { background: #fff !important; color: #111827 !important; border: 2px solid #cbd5e1 !important; border-radius: 10px !important; box-shadow: none !important; background-image: none !important; min-height: 2.2rem; }
/* priorité renforcée (le thème colorait en blanc les boutons d'action) */
.dp .dp-btn:not(#dpx), .dp .dp-btn:not(#dpx) .dp-cap, .dp .dp-btn:not(#dpx) .dp-ico, .dp .dp-btn:not(#dpx) svg { color: #111827 !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; }
.dp .dp-btn:not(#dpx) { background: #ffffff !important; background-image: none !important; border: 2px solid #cbd5e1 !important; border-image: none !important; box-shadow: none !important; }
.dp .dp-btn[aria-pressed="true"]:not(#dpx) { background: #dbeafe !important; border-color: #2563eb !important; }
.dp .dp-btn:not(#dpx):hover:not(:disabled) { background: #eef2ff !important; }
.dp .dp-ico:not(#dpx) svg, .dp .dp-ico:not(#dpx) svg * { stroke: currentColor !important; }
.dp .dp-ico:not(#dpx) svg [fill="currentColor"] { fill: currentColor !important; }
.dp .dp-ico:not(#dpx) svg, .dp .dp-ico:not(#dpx) svg * { stroke: #111827 !important; }
.dp .dp-ico:not(#dpx) svg [fill="currentColor"] { fill: #111827 !important; }
/* une seule ligne : boutons plus compacts, pas de retour à la ligne */
.dp .dp-ribbon { flex-wrap: nowrap !important; overflow-x: auto; gap: 0; }
.dp .dp-group { flex: none; padding: 0 .3rem !important; }
.dp .dp-btn:not(#dpx) { min-width: 2.3rem; min-height: 2.7rem; padding: .12rem .18rem !important; }
.dp .dp-ico { width: 1.65rem; height: 1.65rem; }
.dp .dp-cap { font-size: .68rem !important; }
.dp .dp-thick { width: 2.8rem; height: 2.4rem; }
.dp .dp-pal { grid-template-columns: repeat(7, 1.15rem); gap: .12rem; }
.dp .dp-sw { width: 1.15rem; height: 1.15rem; }
.ai-big { font-size: 1.15rem; padding: .8rem 1.2rem; align-self: flex-start; }
.facts-btn { min-height: 0 !important; padding: .25rem .7rem !important; font-size: .9rem !important; white-space: nowrap; }
.chap > .stats-box .facts { row-gap: .35rem; }
/* Feuille de dessin à gauche, aperçu du cours à droite (mots retrouvés surlignés) */
.dp.dp-has-side:not(.dp-no-side) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 23rem); column-gap: .6rem; row-gap: .5rem; align-items: start; }
.dp.dp-has-side:not(.dp-no-side) > .dp-ribbon, .dp.dp-has-side:not(.dp-no-side) > .dp-textrow { grid-column: 1 / -1; }
.dp.dp-has-side:not(.dp-no-side) > .dp-stage, .dp.dp-has-side:not(.dp-no-side) > p, .dp.dp-has-side:not(.dp-no-side) > .dp-bgrow { grid-column: 1; }
.dp.dp-has-side:not(.dp-no-side) > .dp-side { grid-column: 2; grid-row: 3 / span 3; align-self: stretch; }
.dp-side { background: #ffffff !important; color: #111827 !important; border: 2px solid #cbd5e1; border-radius: 10px; padding: .5rem .7rem; max-height: 46rem; overflow: auto; }
.dp-side * { color: #111827 !important; font-family: system-ui, "Segoe UI", Arial, sans-serif !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; text-transform: none !important; }
.ak-course { font-size: .92rem; line-height: 1.55; white-space: pre-wrap; margin-top: .4rem; }
.ak-course h4 { margin: .8rem 0 .2rem; font-size: .75rem; opacity: .65; text-transform: uppercase !important; letter-spacing: .04em; }
.ak-course p { margin: 0; }
mark.ak-hit { background: #fde047 !important; color: #111827 !important; border-radius: 3px; padding: 0 1px; }
.ai-row { align-items: flex-start; gap: .6rem; }
.ai-others summary { cursor: pointer; padding: .45rem .6rem; }
@media (max-width: 75rem) { .dp.dp-has-side:not(.dp-no-side) { display: flex; flex-direction: column; } .dp-side { max-height: 24rem; } }
/* lignes de la grille explicites : l'aperçu du cours reste À DROITE de la feuille, même quand la ligne « texte » est masquée */
.dp.dp-has-side:not(.dp-no-side) > .dp-ribbon { grid-row: 1; }
.dp.dp-has-side:not(.dp-no-side) > .dp-textrow { grid-row: 2; }
.dp.dp-has-side:not(.dp-no-side) > .dp-stage { grid-row: 3; }
.dp.dp-has-side:not(.dp-no-side) > p { grid-row: 4; }
.dp.dp-has-side:not(.dp-no-side) > .dp-bgrow { grid-row: 5; }
.dp.dp-has-side:not(.dp-no-side) > .dp-side { grid-row: 3 / span 3; max-height: 52rem; }
.ai-part { gap: .5rem; align-items: center; } .ai-part-t { font-weight: 700; flex: 1 1 14rem; } .ai-partbox { padding: .6rem .8rem; gap: .4rem; }
/* barre « Retour » en haut de chaque page */
.nav-back { position: sticky; top: .5rem; z-index: 25; display: flex; align-items: center; gap: .6rem; width: fit-content; max-width: 100%; margin: 0 0 .6rem; padding: .25rem .6rem .25rem .25rem; border-radius: 999px; background: color-mix(in srgb, var(--surface, #fff) 92%, transparent); border: 2px solid var(--page-col, var(--c01, #2563eb)); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.nav-back .small { color: var(--ink, inherit); }
.nav-back-btn { font-weight: 800; white-space: nowrap; min-height: 2.2rem; }
.bloque-back { gap: .6rem; }
:root:has(.spark-counter:not(.in-nav)) .nav-back { margin-left: 4.8rem; } /* le compteur d'Étincelles est dans le coin : on s'écarte de lui */
/* « Retour » discret : un petit lien, pas un bandeau */
.nav-back { position: sticky; top: .3rem; z-index: 25; display: block; width: fit-content; max-width: 100%; margin: 0 0 .35rem; padding: .1rem .55rem; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--surface, #fff) 88%, transparent); box-shadow: none; }
.nav-back a { font-size: .85rem; font-weight: 700; text-decoration: none; color: var(--ink, inherit); white-space: nowrap; }
.nav-back a:hover { text-decoration: underline; }
/* flèche de retour : grosse icône, sans le mot « retour » (déjà pris par le bouton « Un retour ? » des commentaires) */
.nav-back { padding: .1rem .7rem .1rem .35rem; border: 2px solid var(--page-col, var(--c01, #2563eb)); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.nav-back a { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; }
.nav-back .nb-ico { display: inline-flex; width: 2.1rem; height: 2.1rem; align-items: center; justify-content: center; } .nav-back .nb-ico svg { width: 100%; height: 100%; }
.nav-back .nb-dest { font-weight: 600; opacity: .85; }
/* Surligneur « pas compris » : multicolore, pour qu'il ne se confonde avec aucune couleur personnelle */
.uh-rect.uh-rainbow { background: linear-gradient(90deg, rgba(248,113,113,.75), rgba(251,191,36,.75), rgba(74,222,128,.75), rgba(96,165,250,.75), rgba(192,132,252,.75)); opacity: .7; }
mark.uh.uh-rainbow { background: linear-gradient(90deg, rgba(248,113,113,.75), rgba(251,191,36,.75), rgba(74,222,128,.75), rgba(96,165,250,.75), rgba(192,132,252,.75)) !important; color: #111; }
.uh-pop .uh-reform { background: linear-gradient(90deg, rgba(248,113,113,1), rgba(251,191,36,1), rgba(74,222,128,1), rgba(96,165,250,1), rgba(192,132,252,1)) !important; color: #111 !important; font-weight: 800; border: 2px solid rgba(0,0,0,.25); white-space: nowrap; }
.ai-flag { border: 3px solid transparent !important; background: linear-gradient(var(--surface, #fff), var(--surface, #fff)) padding-box, linear-gradient(90deg, rgba(248,113,113,1), rgba(251,191,36,1), rgba(74,222,128,1), rgba(96,165,250,1), rgba(192,132,252,1)) border-box !important; }
.ai-badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 800; color: #111 !important; background: linear-gradient(90deg, rgba(248,113,113,.75), rgba(251,191,36,.75), rgba(74,222,128,.75), rgba(96,165,250,.75), rgba(192,132,252,.75)); }
.reform-list { display: flex; flex-direction: column; gap: .35rem; max-height: 16rem; overflow: auto; }
.reform-list label { display: flex; gap: .5rem; align-items: flex-start; padding: .35rem .5rem; border-radius: 8px; border: 2px solid transparent; background: linear-gradient(var(--surface, #fff), var(--surface, #fff)) padding-box, linear-gradient(90deg, rgba(248,113,113,1), rgba(251,191,36,1), rgba(74,222,128,1), rgba(96,165,250,1), rgba(192,132,252,1)) border-box; font-size: .9rem; }

/* Aperçu fidèle du cours sous la feuille blanche (PDF ou Word) avec les passages évoqués surlignés */
.cp { display: grid; gap: .45rem; margin-top: .6rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.cp-scroll { background: #e5e7eb !important; border: 2px solid #cbd5e1; border-radius: 10px; padding: .6rem; max-height: 44rem; overflow: auto; min-height: 6rem; }
:root:root:root:root:root:root:root:root .cp, :root:root:root:root:root:root:root:root .cp * { color: #111827 !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; text-transform: none !important; font-family: system-ui, "Segoe UI", Arial, sans-serif !important; }
:root:root:root:root:root:root:root:root .cp { background: #fff !important; }
/* thèmes sombres : le thème peint les tableaux en gris foncé alors que le texte du cours est noir → fond blanc (les teintes de cellules propres au document restent, elles sont en style en ligne) */
:root:root:root:root:root:root:root:root .cp .docx table, :root:root:root:root:root:root:root:root .cp .docx caption, :root:root:root:root:root:root:root:root .cp .docx thead, :root:root:root:root:root:root:root:root .cp .docx tbody { background-color: #fff !important; }
.cp-scroll .docx { background: #fff !important; margin: 0 auto; max-width: 52rem; }
:root:root:root:root:root:root:root:root .cp .textLayer mark.pv-hit, :root:root:root:root:root:root:root:root .cp .textLayer span { color: transparent !important; }
.cp-scroll .pdf-page { margin-bottom: .7rem; }
mark.pv-hit { background: rgba(250, 204, 21, .62) !important; color: inherit !important; border-radius: 3px; mix-blend-mode: multiply; padding: 0; }
mark.pv-legend { color: #111827 !important; mix-blend-mode: normal; padding: 0 .3rem; }
:root:root:root:root:root:root:root:root .cp .pageno { color: #fff !important; }
/* le bouton « Masquer » a un fond foncé dans tous les univers : texte clair (sinon foncé sur foncé) */
:root:root:root:root:root:root:root:root .cp button, :root:root:root:root:root:root:root:root .cp button * { color: #fff !important; }
:root:root:root:root:root:root:root:root .cp mark.pv-legend { background: rgba(250, 204, 21, .75) !important; }

/* La mascotte propose son aide : le bouton flottant est une bulle de dialogue au-dessus d'elle */
.bloque-fab { max-width: min(15rem, calc(100vw - 2rem)); padding: .6rem .9rem; border-radius: 18px 18px 6px 18px; font-size: .92rem; line-height: 1.25; text-align: center; }
.bloque-fab::after { content: ''; position: absolute; right: 1.6rem; bottom: -.45rem; width: .9rem; height: .9rem; background: inherit; transform: rotate(45deg); border-radius: 0 0 4px 0; z-index: -1; }
/* La mascotte pose une question vers la fin du cours */
.mascot-ask { position: fixed; right: 1rem; bottom: 9rem; z-index: 70; width: min(23rem, calc(100vw - 2rem)); display: flex; flex-direction: column; gap: .55rem; padding: .9rem 1rem; border: 2px solid var(--line); border-radius: 18px 18px 6px 18px; background: var(--surface); color: var(--ink); box-shadow: 0 8px 28px rgba(0,0,0,.35); }
.mascot-ask-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.mascot-ask-q { margin: 0; font-weight: 700; }
.mascot-ask-done { margin: 0; }
.mascot-ask textarea, .mascot-ask input[type="text"] { width: 100%; box-sizing: border-box; }
.ask-scale { display: grid; grid-template-columns: repeat(11, 1fr); gap: .2rem; }
.ask-n { padding: .45rem 0; min-width: 0; font-weight: 700; }
.ask-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ask-chip { color: #111; border: 0; border-radius: 999px; padding: .2rem .65rem; background: linear-gradient(90deg, rgba(248,113,113,.75), rgba(251,191,36,.75), rgba(74,222,128,.75), rgba(96,165,250,.75), rgba(192,132,252,.75)); }
.ob-ticks { display: flex; flex-direction: column; gap: .3rem; margin: .4rem 0; }
.ob-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ob-row.done label { text-decoration: line-through; opacity: .75; }
.ob-q { flex: none; width: 1.8rem; height: 1.8rem; padding: 0; border-radius: 50%; font-weight: 800; }
.ob-q.on { color: #111; border-color: transparent; background: linear-gradient(135deg, rgba(248,113,113,.9), rgba(251,191,36,.9), rgba(74,222,128,.9), rgba(96,165,250,.9), rgba(192,132,252,.9)); }
.reform-mode .mascot-ask { display: none; }

body:has(.mascot-ask) .bloque-fab { display: none; }

/* Termes pas compris : fond multicolore (assez sombre pour un texte blanc), texte blanc très gras */
.ask-chip, .term-chip { color: #fff; font-weight: 900; text-shadow: 0 1px 2px rgba(0,0,0,.65); background: linear-gradient(90deg, #dc2626, #d97706, #16a34a, #2563eb, #9333ea); }
.term-chip { display: inline-block; padding: .15rem .7rem; border-radius: 999px; }
.note-terme .term-def { font-weight: 600; }

/* Célébration « Ça va mieux » : logo Déclic sur un sunburst (public/celebrate.js) */
.celebrate { position: fixed; inset: 0; z-index: 99999; overflow: hidden; cursor: pointer; animation: cel-fade var(--cel-ms, 2600ms) ease both; }
.celebrate > * { position: absolute; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none; }
.cel-shade { left: 0; top: 0; translate: none; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(60, 20, 110, .72), rgba(20, 8, 50, .82)); }
.cel-rays { width: 190vmax; height: 190vmax; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 214, 64, .95) 0 6deg, rgba(255, 120, 200, 0) 6deg 12deg); -webkit-mask-image: radial-gradient(circle, #000 4%, transparent 52%); mask-image: radial-gradient(circle, #000 4%, transparent 52%); animation: cel-spin var(--cel-ms) linear both, cel-rayin 520ms cubic-bezier(.2, .9, .3, 1.2) both; }
.cel-rays2 { background: repeating-conic-gradient(from 6deg, rgba(120, 220, 255, .75) 0 3deg, rgba(0, 0, 0, 0) 3deg 24deg); animation: cel-spin-rev var(--cel-ms) linear both, cel-rayin 520ms cubic-bezier(.2, .9, .3, 1.2) both; }
.cel-glow { width: min(90vmin, 780px); height: min(90vmin, 780px); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 236, 130, .55) 38%, rgba(255, 150, 210, 0) 70%); animation: cel-pulse 650ms ease-in-out 3 both; }
.cel-ring { width: 30vmin; height: 30vmin; border-radius: 50%; border: .9vmin solid rgba(255, 255, 255, .95); animation: cel-ring 1100ms ease-out both; }
.cel-ring2 { border-color: rgba(255, 214, 64, .95); animation-delay: 220ms; }
.cel-spark { width: 2.4vmin; height: 2.4vmin; background: #ffe066; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transform: rotate(var(--a)) translateY(0) scale(0); animation: cel-spark 1500ms cubic-bezier(.1, .8, .3, 1) var(--dl) both; filter: drop-shadow(0 0 6px #fff); }
.cel-logo { width: min(74vw, 560px); height: auto; filter: drop-shadow(0 0 28px rgba(255, 255, 255, .95)) drop-shadow(0 8px 24px rgba(0, 0, 0, .55)); animation: cel-pop 900ms cubic-bezier(.2, .9, .3, 1) both; }
.cel-line { top: auto; bottom: 11vh; translate: -50% 0; width: max-content; max-width: 92vw; text-align: center; font: 800 clamp(1.2rem, 4vmin, 2.2rem) system-ui, sans-serif; color: #fff; text-shadow: 0 3px 0 #7c2d92, 0 0 18px rgba(255, 255, 255, .8); animation: cel-line 900ms ease 420ms both; }
@keyframes cel-fade { 0% { opacity: 0; } 8% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cel-spin { to { transform: rotate(80deg); } }
@keyframes cel-spin-rev { to { transform: rotate(-60deg); } }
@keyframes cel-rayin { from { scale: .1; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes cel-pulse { 0%, 100% { transform: scale(.85); opacity: .75; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes cel-ring { from { transform: scale(.2); opacity: 1; } to { transform: scale(3.6); opacity: 0; } }
@keyframes cel-spark { 0% { transform: rotate(var(--a)) translateY(0) scale(0); opacity: 1; } 60% { opacity: 1; } 100% { transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(var(--s)); opacity: 0; } }
@keyframes cel-pop { 0% { transform: scale(.15) rotate(-10deg); opacity: 0; } 38% { transform: scale(1.22) rotate(3deg); opacity: 1; } 56% { transform: scale(.94) rotate(-1.5deg); } 72% { transform: scale(1.06); } 100% { transform: scale(1) rotate(0); } }
@keyframes cel-line { from { transform: translateY(24px) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.celebrate.calm .cel-rays, .celebrate.calm .cel-rays2, .celebrate.calm .cel-glow, .celebrate.calm .cel-ring, .celebrate.calm .cel-logo, .celebrate.calm .cel-line { animation: none; }
.celebrate.calm .cel-rays { opacity: .55; } .celebrate.calm .cel-rays2, .celebrate.calm .cel-ring { display: none; }
@media (prefers-reduced-motion: reduce) { .celebrate { animation: cel-fade var(--cel-ms, 2600ms) ease both !important; } }
.cel-pill { top: auto; bottom: 3.5vh; translate: -50% 0; padding: .35em 1em; border-radius: 999px; background: linear-gradient(#ffe066, #ffb300); color: #5b2a00; font: 900 clamp(1.1rem, 3.4vmin, 2rem) system-ui, sans-serif; box-shadow: 0 4px 0 #b26a00, 0 0 24px rgba(255, 224, 102, .9); white-space: nowrap; animation: cel-pill 700ms cubic-bezier(.2, 1.4, .4, 1) 900ms both; }
.cel-pill-quiet { background: rgba(255, 255, 255, .92); color: #3b1d5c; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); font-size: clamp(.9rem, 2.4vmin, 1.3rem); white-space: normal; max-width: 90vw; text-align: center; }
@keyframes cel-pill { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.onb-sim { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin: 0 auto .75rem; max-width: 46rem; padding: .6rem .9rem; border: 2px dashed var(--ink-2); border-radius: 12px; background: var(--surface-2); color: var(--ink); font-size: .95rem; }

.acces-lock .ok-t { color: var(--ok); font-weight: 600; }

/* ---- Petits écrans (téléphone, petite tablette) : en-tête compact, éléments flottants discrets, questionnaire plus court. Aucun effet sur ordinateur (≥ 64 rem). ---- */
@media (max-width: 63.99rem) {
  .nav { padding: .3rem .8rem; }
  .nav-head .brand { padding: 0; justify-content: flex-start; }
  .nav-head .brand-logo { max-width: 6.8rem; margin: 0; }
  .nav-toggle { min-height: 2.4rem; }
  /* pendant le questionnaire, l'en-tête défile avec la page au lieu de rester collé (et transparent) par-dessus le texte */
  .is-onboarding .nav { position: static; opacity: .9; }
  /* de la place sous le contenu pour que les derniers mots passent au-dessus des boutons flottants */
  main { padding-bottom: 8rem; }
}
@media (max-width: 40rem) {
  /* Même disposition que sur ordinateur, en plus petit : police réduite (tout ce qui est en rem suit), boutons moins épais. */
  html { font-size: calc(var(--font-size) * .84); }
  button, .btn, select, summary, #nav-list a, .nav-tool, .seg, button.seg { min-height: 36px; }
  main { padding-inline: .8rem; }
  h1 { font-size: 1.3rem; } h2 { font-size: 1.05rem; } h3 { font-size: .98rem; }
  /* titres de cours : deux lignes au plus (le titre complet s'affiche en ouvrant le chapitre) */
  .chap-link, .chap-head h2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .mascotte-widget { max-width: min(14.5rem, calc(100vw - 7rem)); }
  .mascotte-bubble { font-size: .85rem; line-height: 1.3; padding: .4rem .6rem; }
  .onb-chiplist { display: none; } /* les étiquettes de « Mon programme » / « Ton prompt IA » : seule la ligne avec le compteur reste, la question monte */
  .onb-meter { padding-block: .45rem; }
  /* « Dernier ouvert » ne s'écrase plus en lettres verticales à côté du titre : il passe à la ligne */
  .chap .t.with-ico { flex-wrap: wrap; }
  .focus-tag { white-space: nowrap; flex: none; margin-left: 0; }
  /* le bouton « Éditer » de l'administrateur ne couvre plus le logo : il se place entre le logo et « Menu » */
  .ei-btns.ei-ui { top: .75rem !important; bottom: auto !important; left: 8.6rem !important; right: auto !important; } /* !important : le script place ce bouton en ligne */
}

.onb-part { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.onb-part:first-of-type { margin-top: .5rem; }
.onb-part-title { font-size: 1.15rem; margin: 0 0 .35rem; }

/* Écran tactile : pas de menu d'aperçu du système sur un appui long (l'appui long affiche l'explication du bouton). */
@media (pointer: coarse) { a, button, summary, [role=tab] { -webkit-touch-callout: none; } }

/* ---- onboarding fluide : carrousel de mascottes, Étincelles précieuses, barre du haut et bouton toujours visibles */
.onb-top { position: sticky; top: 0; z-index: 6; background: var(--surface); padding: .35rem 0; }
.onb-actions { position: sticky; bottom: 0; z-index: 6; background: var(--surface); padding: .6rem 0 .3rem; }
.onb-sparks { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: 1.4rem; font-weight: 900; line-height: 1; padding: .2rem .95rem .2rem .45rem; border-radius: 99px; cursor: pointer;
  background: linear-gradient(180deg, #fff7c2, #fde68a) !important; border: 2px solid #d97706 !important; color: #7a4a00 !important; box-shadow: 0 0 0 3px rgba(251,191,36,.35), 0 4px 14px rgba(217,119,6,.4); }
.onb-sparks .onb-gem { flex: none; filter: drop-shadow(0 0 6px rgba(251,191,36,.95)); animation: onb-gem-shine 2.6s ease-in-out infinite; }
.onb-sparks.pop { animation: onb-pop-big .65s ease; }
.onb-price { display: inline-flex; align-items: center; gap: .15rem; }
.onb-price .onb-gem { filter: drop-shadow(0 0 3px rgba(251,191,36,.9)); }
@keyframes onb-gem-shine { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(14deg) scale(1.15); } }
@keyframes onb-pop-big { 0% { transform: scale(1); } 30% { transform: scale(1.4); box-shadow: 0 0 0 10px rgba(251,191,36,.5), 0 4px 24px rgba(217,119,6,.7); } 100% { transform: scale(1); } }
.onb-gembox { display: flex; align-items: center; gap: .9rem; width: 100%; padding: .7rem .9rem; border-radius: 14px; background: #fff8dc; border: 2px solid #f0c24a; color: #4a3200 !important; text-align: left; }
.onb-gembox .onb-gem { flex: none; filter: drop-shadow(0 0 8px rgba(251,191,36,.9)); animation: onb-gem-shine 2.6s ease-in-out infinite; }
.onb-gembox p { margin: .15rem 0 0; color: #4a3200 !important; }
.onb-carwrap { position: relative; width: 100%; }
.onb-car { display: flex; gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem calc(50% - 4.9rem) .8rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.onb-car::-webkit-scrollbar { display: none; }
.onb-car .onb-slide { flex: 0 0 9.8rem; scroll-snap-align: center; transform: scale(.86); opacity: .65; transition: transform .2s, opacity .2s; padding: .7rem .4rem !important; }
.onb-car .onb-slide.on { transform: scale(1); opacity: 1; }
.onb-car .onb-slide img, .onb-car .onb-slide canvas { width: 112px; height: 112px; }
.onb-car .onb-slide strong { font-size: .95rem; }
.onb-arrow { position: absolute; top: 42%; transform: translateY(-50%); z-index: 2; width: 2.6rem; height: 2.6rem; border-radius: 50% !important; padding: 0 !important; font-size: 1.8rem !important; line-height: 1; background: #fff !important; color: #1d2433 !important; border: 2px solid #1d2433 !important; box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: pointer; }
.onb-arrow.left { left: .2rem; } .onb-arrow.right { right: .2rem; }
.onb-dots { margin: 0; text-align: center; width: 100%; }
@media (max-width: 640px) {
  .onb-meters { display: flex; gap: .5rem; } .onb-meter { flex: 1; padding: .35rem .6rem !important; } .onb-chiplist { display: none !important; }
  .onb-part-lead { display: none; }
  .onb-hs { display: flex !important; overflow-x: auto; scroll-snap-type: x proximity; gap: .6rem; padding-bottom: .4rem; }
  .onb-hs > * { flex: 0 0 12rem; scroll-snap-align: start; }
  .onb-arrow { display: none; }
  .onb-sparks { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .onb-sparks .onb-gem, .onb-gembox .onb-gem, .onb-sparks.pop { animation: none; } .onb-car .onb-slide { transition: none; } }

/* ---- Mascotte : crayon (personnaliser) en bas à gauche, menu au clic ---- */
.mascotte-edit { position: absolute; bottom: -4px; left: -4px; width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 50%; line-height: 1; font-size: .85rem; opacity: 0; transition: opacity .15s; background: var(--surface); color: #d9480f; border: 2px solid #d9480f; cursor: pointer; }
.mascotte-figure:hover .mascotte-edit, .mascotte-edit:focus-visible { opacity: 1; }
@media (hover: none) { .mascotte-edit { opacity: .9; } }
@media (pointer: coarse) { .mascotte-edit { width: 36px; height: 36px; bottom: -10px; left: -14px; } }
.mascotte-menu { pointer-events: auto; width: min(17rem, calc(100vw - 2rem)); max-height: 60vh; overflow: auto; margin-right: 6px; padding: .5rem; display: flex; flex-direction: column; gap: .25rem; background: var(--surface); color: var(--ink); border: 2px solid var(--ink-2); border-radius: 14px; box-shadow: 0 6px 22px rgb(0 0 0 / .3); }
.mascotte-menu[hidden] { display: none; }
.mascotte-menu .mm-title { font-weight: 700; padding: .15rem .35rem; }
.mascotte-menu .mm-h { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); padding: .45rem .35rem .1rem; }
.mascotte-menu .mm-note { margin: .15rem .35rem; font-size: .85rem; color: var(--ink-2); }
.mascotte-menu .mm-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; text-align: left; min-height: 36px; padding: .4rem .6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2, var(--surface)); color: var(--ink); font: inherit; font-size: .92rem; cursor: pointer; }
.mascotte-menu .mm-item:hover, .mascotte-menu .mm-item:focus-visible { border-color: var(--accent); outline: none; background: var(--accent-soft, var(--surface-2)); }
.mascotte-menu .mm-item small { color: var(--ink-2); font-weight: 400; font-size: .78rem; }
.mascotte-menu .mm-sub { display: grid; gap: .25rem; padding-left: .6rem; }
.mascotte-menu .mm-sub[hidden] { display: none; }
/* la mascotte propose le tutoriel : le bouton « ? Tutoriel » du coin ne sert plus tant qu'elle est affichée */
html.mascot-on:not(.is-onboarding):not(.is-preview):not(.reform-mode):not(.is-locked) .tuto-fabbox { display: none; }
@media (min-width: 40.01rem) { html.mascot-on:not(.is-onboarding):not(.is-preview):not(.reform-mode):not(.is-locked):not([data-route="lecteur"]):not([data-route="ouvrir"]) :is(.fb-fab, .cs-pill) { right: .8rem; } }

/* ---- carrousel infini (doigt ou souris maintenue) et petits effets de récompense discrets */
.onb-carousel { position: relative; height: 12.4rem; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.onb-carousel.grab { cursor: grabbing; }
.onb-carousel .onb-slide { position: absolute; left: 50%; top: .4rem; width: 9.4rem; padding: .7rem .4rem !important; will-change: transform; -webkit-user-drag: none; }
.onb-carousel .onb-slide img, .onb-carousel .onb-slide canvas { width: 112px; height: 112px; pointer-events: none; -webkit-user-drag: none; }
.onb-card { position: relative; }
.onb-ripple { position: fixed; z-index: 2100; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 3px solid rgba(251,191,36,.9); pointer-events: none; animation: onb-ripple .75s ease-out forwards; }
@keyframes onb-ripple { from { transform: scale(.4); opacity: .9; } to { transform: scale(7); opacity: 0; } }
.onb-glint { position: fixed; z-index: 2100; pointer-events: none; opacity: 0; animation: onb-glint 1s ease-out forwards; }
@keyframes onb-glint { 0% { opacity: 0; transform: translateY(6px) scale(.2) rotate(0); } 30% { opacity: 1; transform: translateY(-8px) scale(1.1) rotate(40deg); } 100% { opacity: 0; transform: translateY(-34px) scale(.6) rotate(90deg); } }
.onb-sweepbox { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 4; }
.onb-sweep { position: absolute; top: -20%; bottom: -20%; left: -40%; width: 35%; background: linear-gradient(100deg, transparent, rgba(255,214,102,.6) 50%, transparent); filter: blur(6px); transform: skewX(-20deg); animation: onb-sweep 1s ease-in-out forwards; }
@keyframes onb-sweep { to { left: 120%; } }
.onb-figure { isolation: isolate; }
.onb-rays { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; z-index: -1; pointer-events: none; border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255,205,80,.7) 0 7deg, transparent 7deg 22deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); animation: onb-rays 1.7s ease-out forwards; }
@keyframes onb-rays { 0% { opacity: 0; transform: scale(.5) rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15) rotate(45deg); } }

/* fenêtre « Un retour » : écriture toute simple, sans contour ni police de thème */
.fb-dlg, .fb-dlg * { -webkit-text-stroke: 0 !important; text-shadow: none !important; paint-order: normal !important; font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important; letter-spacing: normal !important; text-transform: none !important; }
.fb-dlg button, .fb-dlg .btn, .fb-dlg [data-skin] { font-weight: 500 !important; font-size: .95rem !important; }
.fb-dlg h2 { font-weight: 600 !important; }
/* … plus fort que les contours posés par le thème (theme.js) */
:root:root:root:root .fb-dlg.fb-dlg.fb-dlg *, :root:root:root:root .fb-dlg.fb-dlg.fb-dlg { -webkit-text-stroke: 0 transparent !important; -webkit-text-stroke-width: 0 !important; text-shadow: none !important; paint-order: normal !important; font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important; letter-spacing: normal !important; text-transform: none !important; }

/* QCM plus agréables à lire, quel que soit l'univers : texte un peu plus petit et normal (les polices de thème mettent tout en demi-gras), interligne resserré, blocs moins hauts.
   La police du thème est conservée ; un réglage personnel (Réglages > Confort de lecture, ou « Mon style ») l'emporte sur ces valeurs. */
.q-stem { font-size: 1.02rem; font-weight: 500; line-height: 1.5; }
.choices { gap: .45rem; }
.choice { padding: .55rem .8rem; gap: .65rem; line-height: 1.4; }
.choice > span:not(.letter):not(.mark) { font-size: .95rem; font-weight: 400; }
.choice .letter { font-size: .95rem; }
.choice .why { font-size: .86rem; font-weight: 400; }

/* Mon programme : l'état d'une tâche (Terminé / Partiel / À reprendre) est rangé derrière un petit carré blanc à gauche de « Commencer ».
   Couleurs forcées : les univers graphiques repeignent les boutons du bloc, ce carré doit rester net ; le menu s'ouvre dans <body>, au premier plan. */
:root:root .st-btn { width: 2rem; min-width: 2rem; height: 2rem; min-height: 2rem; padding: 0; border-radius: 6px; border: 2px solid #1d2433; background: #fff !important; color: #1d2433 !important; -webkit-text-fill-color: #1d2433 !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; font-size: .95rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
:root:root .st-btn:hover { background: #e9eef5 !important; }
.st-pop { position: fixed; z-index: 2000; display: grid; gap: .25rem; padding: .35rem; min-width: 10rem; border: 2px solid #1d2433; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
:root:root .st-pop button { width: 100%; text-align: left; padding: .45rem .7rem; border-radius: 6px; border: 0; background: #fff !important; color: #1d2433 !important; -webkit-text-fill-color: #1d2433 !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; font-weight: 600; cursor: pointer; }
:root:root .st-pop button:hover, :root:root .st-pop button:focus-visible { background: #dcebf5 !important; }
:root:root .st-pop button[aria-checked="true"] { background: #dcebf5 !important; box-shadow: inset 0 0 0 2px #1f5f8b; }

/* Page « Filières et cours » (administratrice) : zone de dépôt des ZIP */
.fil-drop { display: grid; gap: .3rem; justify-items: center; text-align: center; padding: 1.6rem 1rem; border: 2px dashed var(--line); border-radius: 12px; cursor: pointer; background: var(--surface); }
.fil-drop:hover, .fil-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.fil-drop.busy { opacity: .6; pointer-events: none; }

.fil-finder .row > input { flex: 1 1 12rem; min-width: 0; }
.fil-hit { padding: .55rem .7rem; border: 2px solid var(--line); border-radius: 10px; background: var(--surface); gap: .6rem; flex-wrap: wrap; }
.fil-tree { margin: .3rem 0 0; padding: .6rem .8rem; border-radius: 8px; background: var(--surface-2, #f3f3f3); color: var(--ink); white-space: pre; overflow-x: auto; font-family: ui-monospace, Consolas, monospace; }

/* Découverte guidée : carte en bas de l'écran (toujours au premier plan) et élément entouré */
.dc-card { position: fixed; z-index: 3000; left: 50%; bottom: 1rem; transform: translateX(-50%); width: min(34rem, calc(100vw - 1.5rem)); box-sizing: border-box; display: grid; gap: .45rem; padding: .85rem 1rem; border-radius: 14px; border: 2px solid #1d2433; background: #fff; color: #1d2433; box-shadow: 0 10px 30px rgba(0,0,0,.35); font-family: "Segoe UI", system-ui, sans-serif; animation: dc-in .25s ease-out; }
.dc-card * { color: inherit; -webkit-text-fill-color: currentColor; -webkit-text-stroke: 0; text-shadow: none; }
.dc-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.dc-step { font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: #5b6475; text-transform: uppercase; }
.dc-x { border: 0; background: transparent; font-size: 1.4rem; line-height: 1; padding: 0 .3rem; cursor: pointer; min-height: 0; }
.dc-bar { height: 6px; border-radius: 99px; background: #e7ebf2; overflow: hidden; } .dc-bar span { display: block; height: 100%; background: #7a4a22; transition: width .3s; }
.dc-title { font-size: 1.1rem; } .dc-text { margin: 0; font-size: .95rem; line-height: 1.45; } .dc-hint { margin: 0; font-size: .9rem; font-weight: 600; color: #7a4a22; }
.dc-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.dc-card button { background: #fff; border: 2px solid #1d2433; border-radius: 8px; padding: .4rem .8rem; font-weight: 600; cursor: pointer; }
.dc-card button.primary { background: #7a4a22; border-color: #7a4a22; color: #fff; -webkit-text-fill-color: #fff; }
.dc-focus { outline: 4px solid #e8a33c !important; outline-offset: 4px !important; border-radius: 10px; animation: dc-pulse 1.6s ease-in-out 3; scroll-margin: 6rem 0 14rem; }
@keyframes dc-pulse { 50% { outline-color: #7a4a22; } }
@keyframes dc-in { from { opacity: 0; transform: translate(-50%, 12px); } }
@media (prefers-reduced-motion: reduce) { .dc-card, .dc-focus { animation: none; } }
.dc-end { max-width: 30rem; }
body:has(.dc-card) main { padding-bottom: 14rem; } /* la carte ne cache jamais la fin de la page */

/* Version en ligne : pastille de profil en bas du menu (photo + prénom + filière) et son menu, toujours lisible quel que soit l'univers */
.nav-foot.moi-foot-on { display: block; }
.moi-row { display: flex; align-items: center; gap: .4rem; }
.moi-chip { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; padding: .4rem .55rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; position: relative; }
.moi-chip:hover, .moi-chip[aria-expanded="true"] { background: var(--surface-2); }
.moi-av { flex: none; display: inline-grid; place-items: center; border-radius: 50%; object-fit: cover; color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: .02em; font-family: "Segoe UI", system-ui, sans-serif; -webkit-text-fill-color: #fff; }
.moi-who { min-width: 0; display: grid; line-height: 1.2; }
.moi-who strong, .moi-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moi-who small { opacity: .8; }
.moi-caret { margin-left: auto; font-size: .8em; opacity: .7; }
.moi-dot { position: absolute; top: .3rem; left: 2.1rem; width: .65rem; height: .65rem; border-radius: 50%; background: #d23b3b; border: 2px solid #fff; }
.moi-pop { position: fixed; z-index: 2100; overflow: auto; box-sizing: border-box; display: grid; gap: .2rem; padding: .45rem; border: 2px solid #1d2433; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35); font-family: "Segoe UI", system-ui, sans-serif; font-size: .92rem; }
.moi-pop[hidden] { display: none; }
:root:root .moi-pop, :root:root .moi-pop * { color: #1d2433; -webkit-text-fill-color: currentColor; -webkit-text-stroke: 0; text-shadow: none; }
:root:root .moi-pop .moi-av { color: #fff; -webkit-text-fill-color: #fff; }
.moi-head { display: flex; align-items: center; gap: .7rem; padding: .5rem; border-radius: 10px; text-decoration: none; background: #f3f5f9; }
.moi-see { color: #1f5f8b !important; font-weight: 600; }
.moi-group { display: grid; gap: .1rem; padding-top: .3rem; border-top: 1px solid #e3e7ee; }
.moi-gt { margin: .15rem .5rem .1rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #5b6475 !important; }
:root:root .moi-pop .moi-item { display: flex; align-items: center; gap: .55rem; width: 100%; box-sizing: border-box; padding: .45rem .55rem; margin: 0; border: 0; border-radius: 8px; background: transparent !important; text-decoration: none; text-align: left; font: inherit; font-weight: 500; cursor: pointer; min-height: 0; box-shadow: none; }
:root:root .moi-pop .moi-item:hover, :root:root .moi-pop .moi-item:focus-visible, .moi-head:hover, .moi-head:focus-visible { background: #dcebf5 !important; outline: none; }
.moi-pop .moi-item .ico { width: 1.15rem; height: 1.15rem; flex: none; }
.moi-pop .moi-item .ico img { width: 100%; height: 100%; object-fit: contain; }
.moi-ico { width: 1.15rem; flex: none; text-align: center; }
.moi-pop .fb-count { margin-left: auto; }
.moi-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .4rem .5rem 0; border-top: 1px solid #e3e7ee; font-size: .78rem; color: #5b6475 !important; }
.moi-badge { font-weight: 600; }
:root:root .moi-pop .moi-out { width: auto; margin-left: auto; padding: .35rem .5rem; color: #a12a2a !important; }
/* page « Mon profil » */
.moi-id { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.moi-big .moi-av { font-size: 2rem; box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--line); }

/* Cartes > Aujourd'hui : plafond de nouvelles cartes réglable d'un clic */
.ak-cap { display: inline-flex; align-items: center; gap: .5rem; margin-top: .8rem; padding: .3rem .4rem .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .92rem; }
.ak-cap-n { min-width: 2ch; text-align: center; font-size: 1.05rem; }
.ak-cap .ak-cap-b { width: 2rem; height: 2rem; min-height: 0; padding: 0; border-radius: 50%; font-size: 1.1rem; line-height: 1; display: inline-grid; place-items: center; }

/* « ⓘ Provenance » : mention discrète tout en bas d'une page ou d'une question, ouverte seulement au clic */
.prov { margin: 1.4rem 0 .2rem; font-size: .8rem; color: var(--ink-2); opacity: .75; }
.prov[open], .prov:hover, .prov:focus-within { opacity: 1; }
.prov > summary { display: inline-block; cursor: pointer; list-style: none; padding: .1rem .3rem; border-radius: 6px; }
.prov > summary::-webkit-details-marker { display: none; }
.prov-body { margin-top: .3rem; padding: .5rem .7rem; border-left: 2px solid var(--line); }
.prov-body p { margin: .15rem 0; }
.card > .prov { margin-top: 1rem; }

/* Méthode des J : pastille de relecture et ses cinq points (J+1, J+3, J+7, J+14, J+30) */
.j-dots { display: inline-flex; gap: 3px; margin-left: .45rem; vertical-align: middle; }
.j-dot { width: .5rem; height: .5rem; border-radius: 50%; border: 1.5px solid currentColor; opacity: .55; box-sizing: border-box; }
.j-dot.on { background: currentColor; opacity: .9; }
.j-dot.now { border-color: #d98a1f; background: #f3c27a; opacity: 1; }
.j-row { align-items: center; gap: .5rem; }
.j-title { flex: 1 1 14rem; min-width: 0; }

/* S'entraîner : « Fabrique ton entraînement avec une IA » (types d'entraînement en tuiles) */
.train-ai > summary { cursor: pointer; }
.train-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .45rem; }
.train-tile { display: grid; gap: .15rem; text-align: left; padding: .55rem .7rem; border-radius: 10px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; }
.train-tile[aria-pressed="true"] { border-color: var(--accent, #1f5f8b); box-shadow: inset 0 0 0 1px var(--accent, #1f5f8b); }

/* Défis de la semaine et objectif commun de la promo : trois lignes compactes avec une petite barre */
.defis-card { gap: .35rem; }
.defi-row { display: grid; grid-template-columns: 1.4rem 1fr minmax(4rem, 7rem) auto; align-items: center; gap: .5rem; font-size: .92rem; }
.defi-row.promo { grid-template-columns: 1.4rem 1fr minmax(4rem, 7rem); margin-top: .2rem; padding-top: .4rem; border-top: 1px dashed var(--line); }
.defi-row.done .defi-label { opacity: .7; }
.defi-mark { text-align: center; }
.defi-bar { height: .45rem; border-radius: 99px; background: var(--surface-2, #e7ebf2); overflow: hidden; }
.defi-bar > span { display: block; height: 100%; background: var(--accent, #1f5f8b); border-radius: inherit; transition: width .4s; }
@media (max-width: 520px) { .defi-row { grid-template-columns: 1.4rem 1fr auto; } .defi-row .defi-bar { grid-column: 2 / -1; } }

/* Rang et classement */
.rank-ico { font-size: 2.4rem; line-height: 1; }
.rank-name { font-size: 1.35rem; }
.defi-rank { justify-self: start; margin-top: .2rem; font-weight: 600; text-decoration: none; }
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.board-row { display: grid; grid-template-columns: 2.6rem 1fr auto auto; align-items: center; gap: .6rem; padding: .4rem .6rem; border-radius: 8px; background: var(--surface-2, #f3f5f9); }
.board-row.me { outline: 2px solid var(--accent, #1f5f8b); }
.board-pos { font-weight: 700; text-align: center; }
.board-pts { font-weight: 700; }
@media (max-width: 520px) { .board-row { grid-template-columns: 2.2rem 1fr auto; } .board-row > .small { display: none; } }

/* Coffre de notes privées : pavé de 4 chiffres et grille de photos */
.coffre-lock { max-width: 26rem; align-items: center; text-align: center; }
.pin-pad { display: flex; gap: .6rem; justify-content: center; }
.pin-box { width: 3rem; height: 3.4rem; text-align: center; font-size: 1.6rem; border-radius: 10px; border: 2px solid var(--line); padding: 0; }
.pin-box:focus { border-color: var(--accent, #1f5f8b); outline: none; }
.coffre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.coffre-tile { aspect-ratio: 3 / 4; padding: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2, #f3f5f9); display: grid; place-items: center; cursor: zoom-in; }
.coffre-tile img { width: 100%; height: 100%; object-fit: cover; }
.coffre-view { max-width: min(96vw, 60rem); padding: .6rem; border-radius: 12px; }
.coffre-view img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto .5rem; }
.coffre-view::backdrop { background: rgba(0, 0, 0, .75); }

/* Administratrice : bandeau « l'adresse du site a changé » (Google Drive), au-dessus de tout */
.gorigin-bar { position: sticky; top: 0; z-index: 3500; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding: .6rem 1rem; background: #5b2a86; color: #fff; font: .92rem/1.4 "Segoe UI", system-ui, sans-serif; }
.gorigin-bar * { color: #fff; -webkit-text-fill-color: #fff; }
.gorigin-bar code { background: rgba(255,255,255,.15); padding: .1rem .35rem; border-radius: 4px; }
.gorigin-bar button, .gorigin-bar .btn { background: transparent; border: 1.5px solid #fff; border-radius: 8px; padding: .3rem .7rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.gorigin-bar button.primary { background: #fff; color: #5b2a86; -webkit-text-fill-color: #5b2a86; }