/* Pronote+ — feuille de style.
   Papier froid, encre vert-noir, un seul accent (bleu stylo). Les couleurs de
   matières viennent de PRONOTE et ne servent qu'en rubans et pastilles. */

:root {
  --paper: #F2F3EE;
  --sheet: #FFFFFF;
  --ink: #1B2420;
  --ink-2: #66706A;
  --ink-3: #9AA39C;
  --rule: #DCE0D9;
  --rule-2: #EBEDE8;
  --pen: #2447C9;
  --pen-ink: #FFFFFF;
  --now: #D42A2A;
  --bad: #B3261E;
  --warn: #8A5A00;
  --ok: #2E7D4F;
  --bad-bg: #FBEAE8;
  --warn-bg: #FBF1DC;
  --ok-bg: #E4F2EA;
  --nav-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --px-min: 1.55px;           /* hauteur d'une minute dans la règle */
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121513; --sheet: #1A1E1B; --ink: #E8EBE5; --ink-2: #9AA39C; --ink-3: #6E776F;
    --rule: #2A2F2B; --rule-2: #222623; --pen: #8DA2F5; --pen-ink: #0F1420; --now: #FF6B6B;
    --bad: #FF8A80; --warn: #E6B45A; --ok: #7BD39A; --bad-bg: #3A1F1D; --warn-bg: #3A2F14; --ok-bg: #163224;
  }
}
:root[data-theme="dark"] {
  --paper: #121513; --sheet: #1A1E1B; --ink: #E8EBE5; --ink-2: #9AA39C; --ink-3: #6E776F;
  --rule: #2A2F2B; --rule-2: #222623; --pen: #8DA2F5; --pen-ink: #0F1420; --now: #FF6B6B;
  --bad: #FF8A80; --warn: #E6B45A; --ok: #7BD39A; --bad-bg: #3A1F1D; --warn-bg: #3A2F14; --ok-bg: #163224;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.45 var(--text);
  font-variant-numeric: tabular-nums; }
a { color: var(--pen); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--pen); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-family: var(--display); font-size: 1.9rem; line-height: 1.05; letter-spacing: -.015em; }
h2 { font-size: 1rem; margin: 1.6rem 0 .5rem; display: flex; align-items: baseline; gap: .5rem; }
h2 small { font-weight: 400; color: var(--ink-2); font-size: .85rem; }
h3 { font-size: .98rem; }
p { margin: .4rem 0; }
small, .muted { color: var(--ink-2); }
.hidden { display: none !important; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 1rem 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------------------------------------------------------------- cadre */
.frame { min-height: 100vh; }
/* Sur mobile, la barre latérale ne dessine pas de boîte mais laisse ses
   enfants dans le flux : #nav (position:fixed) reste la barre du bas.
   display:contents plutôt que none, sinon le menu disparaît. */
#rail { display: contents; }
.page { max-width: 640px; margin: 0 auto; padding: 0 1rem calc(var(--nav-h) + var(--safe-b) + 1rem); }
#top { display: flex; align-items: center; gap: .6rem; padding: calc(.55rem + var(--safe-t)) 0 .3rem;
  position: sticky; top: 0; background: var(--paper); z-index: 4; }
#top .who { font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sync { font-size: .78rem; color: var(--ink-2); white-space: nowrap; }
.sync.err { color: var(--bad); }
.sync::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); margin-right: .35rem; vertical-align: 1px; }
.sync.err::before { background: var(--bad); }
.sync.busy::before { background: var(--pen); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .25; } }
button.icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
button.icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
button.icon.spin svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
main { padding-top: .2rem; }

#nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex;
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: var(--sheet); border-top: 1px solid var(--rule); }
#nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: .68rem; color: var(--ink-2); position: relative; }
#nav button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#nav button.sel { color: var(--ink); }
#nav button.sel::after { content: ""; position: absolute; top: 0; width: 28px; height: 2px; background: var(--ink); }
#nav button .dot { position: absolute; top: 9px; right: calc(50% - 16px); width: 8px; height: 8px;
  border-radius: 50%; background: var(--now); }
.brand, .rail-foot { display: none; }

/* --------------------------------------------------------- ordinateur */
@media (min-width: 900px) {
  .frame { display: grid; grid-template-columns: 220px 1fr; }
  #rail { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
    padding: 1.4rem 1rem; border-right: 1px solid var(--rule); background: var(--paper); }
  .brand { display: block; font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin: 0 .5rem 1.4rem; }
  .brand b { color: var(--pen); font-weight: 700; }
  #nav { position: static; display: block; height: auto; padding: 0; background: none; border: 0; }
  #nav button { flex-direction: row; justify-content: flex-start; gap: .7rem; width: 100%; padding: .55rem .6rem;
    border-radius: 8px; font-size: .95rem; margin-bottom: 2px; }
  #nav button.sel { background: var(--sheet); border: 1px solid var(--rule); }
  #nav button.sel::after { display: none; }
  #nav button .dot { position: static; margin-left: auto; }
  .rail-foot { display: block; margin-top: auto; font-size: .82rem; color: var(--ink-2); padding: 0 .6rem; }
  .page { max-width: 880px; padding: 0 2.2rem 3rem; }
  #top .who { display: none; }
}

/* -------------------------------------------------------------- textes */
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: .6rem 0 .8rem; }
.hero .sub { color: var(--ink-2); margin: .25rem 0 0; font-size: .95rem; }
.big-num { font-family: var(--display); font-size: 2.2rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.facts { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: .2rem 0 .4rem; }
.fact { min-width: 5.5rem; }
.fact b { display: block; font-family: var(--display); font-size: 1.55rem; font-weight: 600; line-height: 1.1; }
.fact small { font-size: .78rem; }
.note { padding: .7rem .9rem; border-radius: 8px; background: var(--sheet); border: 1px solid var(--rule); margin: .5rem 0; }
.note.bad { background: var(--bad-bg); border-color: transparent; }
.note.warn { background: var(--warn-bg); border-color: transparent; }
.note.ok { background: var(--ok-bg); border-color: transparent; }
.empty { color: var(--ink-2); padding: 1rem 0; }
.tag { display: inline-block; font-size: .72rem; padding: .05rem .45rem; border-radius: 4px; color: var(--ink-2);
  background: var(--rule-2); margin-right: .25rem; vertical-align: middle; white-space: nowrap; }
.tag.bad { color: var(--bad); background: var(--bad-bg); }
.tag.warn { color: var(--warn); background: var(--warn-bg); }
.tag.ok { color: var(--ok); background: var(--ok-bg); }
.tag.pen { color: var(--pen); background: color-mix(in srgb, var(--pen) 12%, transparent); }
.dot-c { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .4rem; vertical-align: 0; background: var(--rule); }

/* --------------------------------------------------------------- listes */
.list { border-top: 1px solid var(--rule); }
.row { display: flex; gap: .75rem; align-items: flex-start; padding: .65rem 0; border-bottom: 1px solid var(--rule); width: 100%; text-align: left; }
.row.link { cursor: pointer; }
.row.link:hover { background: color-mix(in srgb, var(--sheet) 60%, transparent); }
.row .ribbon { width: 4px; align-self: stretch; border-radius: 2px; background: var(--rule); flex: none; }
.row .grow { flex: 1; min-width: 0; }
.row .t { font-weight: 600; }
.row .m { color: var(--ink-2); font-size: .88rem; }
.row .r { text-align: right; flex: none; color: var(--ink-2); font-size: .85rem; }
.row.dim { opacity: .55; }
.row.done .t, .row.done .m { text-decoration: line-through; color: var(--ink-3); }
.row input[type=checkbox] { width: 22px; height: 22px; margin: .05rem 0 0; accent-color: var(--ok); flex: none; }
.dayhead { font-family: var(--display); font-size: 1.05rem; font-weight: 600; margin: 1.3rem 0 .2rem; display: flex; gap: .6rem; align-items: baseline; }
.dayhead small { font-family: var(--text); font-weight: 400; }
.dayhead.soon { color: var(--warn); }
.dayhead.late { color: var(--bad); }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* --------------------------------------------------------- boutons, formulaires */
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border-radius: 8px;
  border: 1px solid var(--ink); background: var(--sheet); color: var(--ink); font-size: .93rem; margin: .2rem .35rem .2rem 0; }
.btn:hover { text-decoration: none; background: var(--rule-2); }
.btn.pen { background: var(--pen); border-color: var(--pen); color: var(--pen-ink); }
.btn.pen:hover { filter: brightness(1.08); }
.btn.bad { border-color: var(--bad); color: var(--bad); }
.btn.sm { padding: .3rem .65rem; font-size: .85rem; }
.btn:disabled { opacity: .5; cursor: default; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; margin: .3rem 0; }
.seg button { padding: .35rem .75rem; font-size: .88rem; color: var(--ink-2); }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button.sel { background: var(--ink); color: var(--paper); }
.chips { display: flex; gap: .4rem; overflow-x: auto; padding: .2rem 0 .4rem; scrollbar-width: none; }
.chips button { padding: .32rem .8rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--sheet); white-space: nowrap; font-size: .88rem; color: var(--ink-2); }
.chips button.sel { background: var(--ink); color: var(--paper); border-color: var(--ink); }
input[type=text], input[type=search], textarea, select, input[type=datetime-local], input[type=color] {
  font: inherit; color: var(--ink); background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; padding: .5rem .65rem; width: 100%; }
textarea { min-height: 6rem; resize: vertical; }
input[type=color] { width: 44px; height: 32px; padding: 2px; }
label.field { display: block; margin: .6rem 0; font-size: .9rem; color: var(--ink-2); }
label.field > * { margin-top: .25rem; }
.switch { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.switch .grow { flex: 1; }
.switch input { width: 20px; height: 20px; accent-color: var(--pen); }
.switch small { display: block; }

/* ------------------------------------------------------- règle du jour */
.weeknav { display: flex; align-items: center; gap: .4rem; margin: .3rem 0 .4rem; }
.weeknav .title { flex: 1; font-weight: 600; }
.weeknav .title small { display: block; font-weight: 400; color: var(--ink-2); }
.weeknav button.icon { border: 1px solid var(--rule); border-radius: 8px; width: 34px; height: 34px; }
.weeknav button.icon:disabled { opacity: .35; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: .5rem; }
.days button { padding: .3rem 0 .25rem; border-radius: 8px; font-size: .72rem; color: var(--ink-2); line-height: 1.15; border: 1px solid transparent; position: relative; }
.days button b { display: block; font-family: var(--display); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.days button.off b { color: var(--ink-3); }
.days button.today { border-color: var(--rule); }
.days button.sel { background: var(--ink); color: var(--paper); }
.days button.sel b { color: var(--paper); }
.days button i { display: block; height: 4px; margin: 3px auto 0; width: 60%; border-radius: 2px; background: transparent; }
.days button i.l1 { background: var(--ink-3); }
.days button i.l2 { background: var(--warn); }
.days button i.l3 { background: var(--bad); }
.days button.sel i { background: var(--paper); }

.ruler { position: relative; margin: .3rem 0 0; padding-left: 3rem; }
.ruler .hour { position: absolute; left: 0; right: 0; border-top: 1px solid var(--rule-2); font-size: .72rem; color: var(--ink-3); }
.ruler .hour span { position: absolute; left: 0; top: -.6em; background: var(--paper); padding-right: .3rem; }
.ruler .now { position: absolute; left: 2.4rem; right: 0; border-top: 2px solid var(--now); z-index: 2; pointer-events: none; }
.ruler .now::before { content: ""; position: absolute; left: -5px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--now); }
.ruler .now span { position: absolute; left: -2.4rem; top: -.65em; font-size: .72rem; color: var(--now); font-weight: 600; background: var(--paper); padding-right: .3rem; }
.block { position: absolute; left: 3rem; right: 0; background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px;
  padding: .35rem .55rem .35rem .8rem; overflow: hidden; text-align: left; font-size: .9rem; line-height: 1.25; cursor: pointer; display: block; }
.block::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c, var(--rule)); }
.block:hover { border-color: var(--ink-3); }
.block .t { font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block .m { color: var(--ink-2); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.block .tags { position: absolute; right: .4rem; top: .3rem; }
.block.canceled { background: repeating-linear-gradient(135deg, var(--sheet) 0 6px, var(--rule-2) 6px 8px); }
.block.canceled .t { text-decoration: line-through; color: var(--ink-2); }
.block.past { opacity: .55; }
.block.now { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.block.short { padding-top: .1rem; padding-bottom: .1rem; }
.block.short .m { display: none; }
.block.changed { outline: 2px solid var(--pen); outline-offset: -2px; }
.ruler.compact { padding-left: 0; }
.ruler.compact .block { left: 0; padding: .15rem .3rem .15rem .5rem; font-size: .76rem; border-radius: 5px; }
.ruler.compact .block::before { width: 3px; }
.ruler.compact .hour { display: none; }
.ruler.compact .now { left: 0; }
.ruler.compact .now span, .ruler.compact .now::before { display: none; }
.week { display: grid; grid-template-columns: 2.6rem repeat(var(--cols, 5), 1fr); gap: 4px; margin-top: .4rem; }
.week .axis { position: relative; }
.week .axis span { position: absolute; left: 0; font-size: .7rem; color: var(--ink-3); transform: translateY(-50%); }
.week .col h3 { font-size: .8rem; font-weight: 500; color: var(--ink-2); text-align: center; margin-bottom: .2rem; }
.week .col h3 b { font-family: var(--display); font-size: 1.05rem; color: var(--ink); font-weight: 600; display: block; }
.week .col.today h3 b { color: var(--pen); }
.week-tools { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: .3rem 0; }

/* -------------------------------------------------------------- notes */
.avgs { display: flex; gap: 1.5rem; margin: .3rem 0 .8rem; }
.avgs div b { display: block; font-family: var(--display); font-size: 2rem; font-weight: 600; line-height: 1; }
.avgs div small { font-size: .8rem; }
.grade-v { width: 3.9rem; flex: none; text-align: center; font-weight: 600; font-size: 1.02rem; padding: .25rem 0; border-radius: 6px; background: var(--rule-2); }
.grade-v small { display: block; font-weight: 400; font-size: .68rem; color: var(--ink-2); }
.grade-v.good { color: var(--ok); background: var(--ok-bg); }
.grade-v.bad { color: var(--bad); background: var(--bad-bg); }
.meter { height: 6px; background: var(--rule-2); border-radius: 3px; position: relative; overflow: visible; margin-top: .35rem; }
.meter i { position: absolute; top: 0; bottom: 0; left: 0; background: var(--c, var(--ink)); border-radius: 3px; }
.meter b { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--ink-2); }
.chart { width: 100%; height: auto; display: block; margin: .3rem 0; overflow: visible; }
.chart .grid { stroke: var(--rule); stroke-width: 1; }
.chart .axis-t { fill: var(--ink-3); font-size: 11px; }
.chart .line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.cls { stroke: var(--ink-3); stroke-dasharray: 4 4; }
.chart .pt { fill: var(--sheet); stroke: var(--ink); stroke-width: 2; }
.chart .pt.cls { stroke: var(--ink-3); }
.chart .hit { fill: transparent; }
.chart .cross { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .tip { fill: var(--ink); font-size: 12px; }
.legend { display: flex; gap: 1rem; font-size: .82rem; color: var(--ink-2); }
.legend i { display: inline-block; width: 18px; height: 2px; background: var(--ink); vertical-align: middle; margin-right: .3rem; }
.legend i.cls { background: repeating-linear-gradient(90deg, var(--ink-3) 0 4px, transparent 4px 8px); }
.skill { display: inline-block; padding: .15rem .5rem; border-radius: 4px; font-size: .8rem; margin: .15rem .25rem .15rem 0; background: var(--rule-2); }
.skill.l4 { background: var(--ok-bg); color: var(--ok); }
.skill.l3 { background: #E9F0DD; color: #4F6B1E; }
.skill.l2 { background: var(--warn-bg); color: var(--warn); }
.skill.l1 { background: var(--bad-bg); color: var(--bad); }
.sim { background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; padding: .8rem .9rem; margin-top: .6rem; }
.sim .res { font-family: var(--display); font-size: 1.4rem; font-weight: 600; }

/* --------------------------------------------------------------- feuille */
.sheet { position: fixed; inset: 0; z-index: 20; }
.sheet-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.sheet-body { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow: auto; background: var(--paper);
  border-radius: 16px 16px 0 0; padding: .4rem 1.1rem calc(1.2rem + var(--safe-b)); transform: translateY(0); }
.sheet-grip { width: 38px; height: 4px; border-radius: 2px; background: var(--rule); margin: .3rem auto .9rem; }
.sheet h2:first-of-type { margin-top: 0; }
@media (min-width: 900px) {
  .sheet-body { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(640px, 92vw);
    max-height: 86vh; border-radius: 14px; padding: 1.2rem 1.4rem; }
  .sheet-grip { display: none; }
}
.sheet-title { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: .6rem; }
.sheet-title .ribbon { width: 5px; align-self: stretch; border-radius: 3px; background: var(--c, var(--rule)); }
.sheet-title h2 { font-family: var(--display); font-size: 1.4rem; margin: 0; }
.kv { display: grid; grid-template-columns: 7rem 1fr; gap: .25rem .6rem; font-size: .93rem; margin: .5rem 0; }
.kv span:nth-child(odd) { color: var(--ink-2); }

/* ------------------------------------------------------------ messages */
.thread { border-top: 1px solid var(--rule); }
.msg { padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.msg .from { font-weight: 600; font-size: .9rem; }
.msg .when { color: var(--ink-2); font-size: .8rem; margin-left: .5rem; }
.msg .body { white-space: pre-wrap; margin-top: .25rem; overflow-wrap: anywhere; }
.msg.mine { background: var(--sheet); margin: 0 -1.1rem; padding-left: 1.1rem; padding-right: 1.1rem; border-left: 3px solid var(--pen); }
.info-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.menu-day ul { margin: .2rem 0 .5rem; padding-left: 1.1rem; }

/* ------------------------------------------------------------ divers */
.url { font-size: .85rem; overflow-wrap: anywhere; display: block; padding: .5rem .6rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: 6px; margin: .3rem 0 .5rem; }
.code { font-family: var(--display); font-size: 2rem; letter-spacing: .25em; font-weight: 600; }
.onboard { text-align: center; padding: 3rem 1rem; }
.onboard h1 { font-size: 2.6rem; }
.onboard h1 b { color: var(--pen); }
.onboard p { color: var(--ink-2); max-width: 26rem; margin: .8rem auto 1.4rem; }
.swatches { display: flex; flex-wrap: wrap; gap: .4rem .8rem; }
.swatches label { display: flex; align-items: center; gap: .4rem; font-size: .88rem; }
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + 12px); transform: translateX(-50%);
  background: var(--ink); color: var(--paper); padding: .55rem .9rem; border-radius: 8px; font-size: .9rem; z-index: 30; max-width: 90vw; }
@media (min-width: 900px) { .toast { bottom: 24px; } }