/* =========================================================================
   Révisions — feuille de style unique, mobile first.
   Polices hébergées localement (OFL) : aucun appel externe.
   ========================================================================= */

@font-face {
  font-family: "Jakarta";
  src: url("/fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
}
@font-face {
  font-family: "Bricolage";
  src: url("/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
}

/* ---------- Jetons : sombre par défaut ---------- */
:root {
  color-scheme: dark;
  --bg: #0f0c1f;
  --bg-2: #171331;
  --carte: #1c1736;
  --carte-2: #251f45;
  --ligne: rgba(255, 255, 255, .09);
  --tx: #f4f2ff;
  --mu: #aea8d3;
  --ombre: 0 10px 30px -12px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .25);
  --ombre-forte: 0 22px 50px -18px rgba(0, 0, 0, .8);
  --rouge: #ff5d6c; --orange: #ffa53d; --vert: #2fd889;
  --sur-p: #fff;
  --r-s: 12px; --r: 20px; --r-l: 28px;
  --tab-h: 70px;
  --f-texte: "Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-titre: "Bricolage", "Jakarta", system-ui, sans-serif;
  --vite: .18s cubic-bezier(.2, .8, .2, 1);
  --doux: .45s cubic-bezier(.2, .8, .2, 1);

  /* Palette Électrique : violet électrique, turquoise, corail */
  --p: #7350ff; --p-2: #5a35f0; --p-clair: #a996ff;
  --acc: #22d3c5; --chaud: #ff7a66;
}
[data-palette="lagon"]   { --p: #0a7896; --p-2: #0a6a8a; --p-clair: #5fd0ea; --acc: #a3e635; --chaud: #ff9f43; }
[data-palette="soleil"]  { --p: #cf3d24; --p-2: #b8361f; --p-clair: #ff9a7a; --acc: #ffc83d; --chaud: #9b7bff; }
[data-palette="menthe"]  { --p: #0d7e5a; --p-2: #0b6e50; --p-clair: #4ee0a8; --acc: #48c3ff; --chaud: #ff8a4c; }

/* ---------- Mode clair, selon le réglage du téléphone ---------- */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f4f2ff; --bg-2: #ebe7ff;
    --carte: #ffffff; --carte-2: #f3f0ff;
    --ligne: rgba(30, 20, 80, .1);
    --tx: #1a1538; --mu: #5b5680;
    --ombre: 0 10px 28px -14px rgba(40, 25, 110, .35), 0 1px 3px rgba(40, 25, 110, .08);
    --ombre-forte: 0 24px 50px -20px rgba(40, 25, 110, .45);
    --rouge: #d61f3a; --orange: #b35600; --vert: #0c7a46;
    --p-clair: #5a35f0; --acc: #0d8f86; --chaud: #d9452f;
  }
  [data-palette="lagon"]  { --p-clair: #0a6a8a; --acc: #4d7c0f; --chaud: #c2410c; }
  [data-palette="soleil"] { --p-clair: #b8361f; --acc: #a16207; --chaud: #6d4aff; }
  [data-palette="menthe"] { --p-clair: #0b6e50; --acc: #0369a1; --chaud: #c2410c; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100dvh;
  font: 500 1rem/1.5 var(--f-texte); color: var(--tx);
  background:
    radial-gradient(60rem 30rem at 110% -10%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%),
    radial-gradient(50rem 30rem at -20% 0%, color-mix(in srgb, var(--p) 30%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  padding-bottom: calc(var(--tab-h) + 24px + env(safe-area-inset-bottom));
}
body.role-parent, body.anonyme { padding-bottom: 32px; }
h1, h2, h3, h4 { font-family: var(--f-titre); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(1.7rem, 6vw, 2.2rem); margin: .2rem 0 1.1rem; }
h2 { font-size: 1.18rem; margin-bottom: .8rem; display: flex; align-items: center; gap: .5rem; }
h3 { font-size: 1.02rem; }
a { color: var(--p-clair); text-decoration: none; font-weight: 650; }
p { margin: .4rem 0; }
.muted { color: var(--mu); font-size: .92rem; font-weight: 500; }
.err { color: var(--rouge); }
.ic { width: 22px; height: 22px; flex: none; }
mark { background: color-mix(in srgb, var(--acc) 40%, transparent); color: inherit; border-radius: 4px; padding: 0 .15em; }
:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

main { max-width: 760px; margin: 0 auto; padding: 8px 16px 24px; }

/* ---------- Barre du haut (mobile) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px 16px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
.marque { display: flex; align-items: center; gap: .55rem; color: var(--tx); font: 800 1.2rem var(--f-titre); }
.marque img { border-radius: 10px; box-shadow: 0 6px 16px -6px var(--p); }
.topbar-actions { display: flex; gap: 4px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  color: var(--tx); background: transparent; border: 0; padding: 0; cursor: pointer;
  transition: background var(--vite), transform var(--vite);
}
.icon-btn:hover { background: var(--carte-2); }
.icon-btn:active { transform: scale(.9); }

/* ---------- Onglets en bas (mobile) / menu latéral (tablette) ---------- */
.onglets {
  position: fixed; z-index: 30; left: 10px; right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  height: var(--tab-h);
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;
  padding: 6px; border-radius: 24px;
  background: color-mix(in srgb, var(--carte) 86%, transparent);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid var(--ligne); box-shadow: var(--ombre-forte);
}
.onglets > .marque, .onglets-pied { display: none; }
.onglets > a:not(.marque) {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; border-radius: 18px; color: var(--mu); font-size: .72rem; font-weight: 700;
  transition: color var(--vite), transform var(--vite);
}
.onglets > a:not(.marque):active { transform: scale(.92); }
.onglets > a.actif { color: var(--sur-p); }
.onglets > a.actif::before {
  content: ""; position: absolute; inset: 2px 6px; z-index: -1; border-radius: 16px;
  background: linear-gradient(135deg, var(--p), var(--p-2));
  box-shadow: 0 8px 20px -8px var(--p);
  animation: pop .35s cubic-bezier(.3, 1.6, .5, 1);
}

@media (min-width: 768px) {
  body.role-eleve { padding: 0 0 0 248px; }
  body.role-eleve .topbar { display: none; }
  .onglets {
    top: 16px; bottom: 16px; left: 16px; right: auto; width: 216px; height: auto;
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    padding: 18px 12px; border-radius: var(--r-l);
  }
  .onglets > .marque { display: flex; padding: 4px 10px 18px; }
  .onglets > a:not(.marque) { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 14px; font-size: .98rem; min-height: 52px; }
  .onglets-pied { display: flex; gap: 6px; margin-top: auto; padding: 0 6px; }
  main { padding: 28px 28px 40px; }
}

/* ---------- Sélecteur de thème ---------- */
.palettes {
  margin: 0; inset: auto; top: 64px; right: 12px; position: fixed;
  width: min(300px, calc(100vw - 24px)); padding: 16px; border: 1px solid var(--ligne);
  border-radius: var(--r); background: var(--carte); color: var(--tx); box-shadow: var(--ombre-forte);
}
.palettes:popover-open { animation: monte .25s ease-out; }
@media (min-width: 768px) { .palettes { top: auto; right: auto; bottom: 90px; left: 24px; } }
.palettes-titre { font: 700 1rem var(--f-titre); margin: 0 0 10px; }
.palettes-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.palettes-liste button {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 10px;
  border-radius: 14px; border: 2px solid var(--ligne); background: var(--carte-2); color: var(--tx); font: 700 .9rem var(--f-texte); cursor: pointer;
}
.palettes-liste button[aria-pressed="true"] { border-color: var(--p-clair); }
.pastille { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.pal-electrique { background: conic-gradient(#7350ff 0 50%, #22d3c5 0 75%, #ff7a66 0); }
.pal-lagon      { background: conic-gradient(#0a7896 0 50%, #a3e635 0 75%, #ff9f43 0); }
.pal-soleil     { background: conic-gradient(#cf3d24 0 50%, #ffc83d 0 75%, #9b7bff 0); }
.pal-menthe     { background: conic-gradient(#0d7e5a 0 50%, #48c3ff 0 75%, #ff8a4c 0); }

/* ---------- Cartes ---------- */
.card {
  position: relative; background: var(--carte); border: 1px solid var(--ligne);
  border-radius: var(--r-l); padding: 20px; margin-bottom: 16px; box-shadow: var(--ombre);
}
.card.plat { box-shadow: none; background: var(--carte-2); }
main > * { animation: apparait .5s cubic-bezier(.2, .8, .2, 1) both; }
main > *:nth-child(2) { animation-delay: .05s; } main > *:nth-child(3) { animation-delay: .1s; }
main > *:nth-child(4) { animation-delay: .15s; } main > *:nth-child(5) { animation-delay: .2s; }
main > *:nth-child(n+6) { animation-delay: .25s; }

.entete-page { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 1rem; }
.entete-page h1 { margin: 0; }
.retour { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--mu); }

/* Messages flash en toast */
.flash {
  position: fixed; z-index: 60; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top));
  max-width: 520px; margin: 0 auto !important; padding: 14px 18px 14px 52px !important;
  background: var(--carte) !important; border: 1px solid var(--ligne); border-radius: 18px;
  box-shadow: var(--ombre-forte); font-weight: 700; animation: toast 4.5s ease forwards !important;
}
.flash::before {
  content: "✓"; position: absolute; left: 14px; top: 50%; translate: 0 -50%;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--vert); color: #06210f; font-weight: 900;
}
.flash.err::before { content: "!"; background: var(--rouge); color: #fff; }
.flash.err { color: var(--tx); animation-duration: 7s !important; }

/* ---------- Formulaires ---------- */
input, select, textarea {
  font: 600 1rem var(--f-texte); color: var(--tx);
  min-height: 48px; padding: 12px 14px; width: 100%; min-width: 0;
  background: var(--carte-2); border: 2px solid transparent; border-radius: 14px;
  transition: border-color var(--vite), background var(--vite);
}
textarea { line-height: 1.5; min-height: 200px; }
input::placeholder, textarea::placeholder { color: var(--mu); opacity: .85; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--p-clair); background: var(--carte); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mu) 50%), linear-gradient(135deg, var(--mu) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
input[type=color] { width: 48px; height: 48px; padding: 4px; flex: none; cursor: pointer; }
input[type=checkbox] { width: 26px; height: 26px; min-height: 0; accent-color: var(--p); flex: none; }
input[type=file] { padding: 10px; }
input[type=file]::file-selector-button { font: 700 .9rem var(--f-texte); border: 0; border-radius: 10px; padding: 8px 12px; margin-right: 10px; background: var(--p); color: #fff; }
label { display: flex; flex-direction: column; gap: 6px; font-size: .92rem; font-weight: 700; color: var(--mu); }
label:has(> input[type=checkbox]) { flex-direction: row; align-items: center; gap: 12px; color: var(--tx); min-height: 44px; cursor: pointer; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row > input, .row > select { flex: 1 1 140px; }
.row.grow { flex: 1; }
.stack { display: flex; flex-direction: column; gap: 12px; }

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border: 0; border-radius: 16px; cursor: pointer;
  font: 750 1rem var(--f-texte); color: var(--sur-p); text-decoration: none;
  background: linear-gradient(135deg, var(--p), var(--p-2));
  box-shadow: 0 10px 22px -12px var(--p);
  transition: transform var(--vite), box-shadow var(--vite), filter var(--vite);
}
button:hover, .btn:hover { filter: brightness(1.08); }
button:active, .btn:active { transform: scale(.96); }
button:disabled { opacity: .45; cursor: default; transform: none; filter: grayscale(.4); }
button.ghost, .btn.ghost { background: transparent; color: var(--mu); box-shadow: none; padding: 0 12px; }
button.ghost:hover { background: var(--carte-2); color: var(--tx); }
button.danger { background: transparent; color: var(--rouge); box-shadow: none; }
button.secondaire, .btn.secondaire { background: var(--carte-2); color: var(--tx); box-shadow: none; }
.btn-large { width: 100%; min-height: 58px; font-size: 1.08rem; border-radius: 20px; }

/* Puces de choix (matières, minutes) : boutons radio stylés */
.puces { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; margin: 0 -2px; scroll-snap-type: x proximity; }
.puces::-webkit-scrollbar { display: none; }
.puces.wrap { flex-wrap: wrap; overflow: visible; }
.puce { position: relative; flex: none; scroll-snap-align: start; }
.puce input { position: absolute; opacity: 0; pointer-events: none; }
.puce span, a.puce {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  font: 700 .92rem var(--f-texte); color: var(--tx); white-space: nowrap; cursor: pointer;
  background: color-mix(in srgb, var(--m, var(--p)) 16%, var(--carte-2));
  border: 2px solid transparent; transition: transform var(--vite), background var(--vite), border-color var(--vite);
}
.puce span:active, a.puce:active { transform: scale(.94); }
.puce input:checked + span, a.puce.actif {
  background: color-mix(in srgb, var(--m, var(--p)) 78%, #000); color: #fff; border-color: color-mix(in srgb, #fff 35%, var(--m, var(--p)));
  box-shadow: 0 8px 18px -10px var(--m, var(--p));
}
.puce input:focus-visible + span { outline: 3px solid var(--acc); outline-offset: 2px; }

/* Étiquette matière */
.tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  font: 750 .78rem var(--f-texte); letter-spacing: .01em;
  background: color-mix(in srgb, var(--m) 22%, transparent);
  color: color-mix(in srgb, var(--m) 50%, var(--tx));
}
.avatar {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 15px; font-size: 1.4rem;
  background: linear-gradient(145deg, color-mix(in srgb, var(--m) 70%, #fff 0%), color-mix(in srgb, var(--m) 60%, #000));
  box-shadow: 0 8px 18px -10px var(--m), inset 0 1px 0 rgba(255,255,255,.25);
}

/* Listes en cartes colorées par matière */
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.item {
  --m: var(--p);
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--m) 14%, var(--carte)), var(--carte) 65%);
  border: 1px solid color-mix(in srgb, var(--m) 22%, var(--ligne)); border-radius: var(--r);
  transition: transform var(--vite), box-shadow var(--vite);
}
a.item { color: var(--tx); }
a.item:active, .item.tap:active { transform: scale(.98); }
.item-corps { flex: 1; min-width: 0; }
.item-titre { font-weight: 750; display: block; overflow-wrap: anywhere; }
.item .right { text-align: right; white-space: nowrap; }
.list li:not(.item) { display: block; }
[hidden] { display: none !important; }

/* Pastille J-x */
.jx {
  display: inline-grid; place-items: center; min-width: 54px; height: 44px; padding: 0 10px; border-radius: 14px;
  font: 800 1rem var(--f-titre); color: #fff;
}
.jx.rouge { background: linear-gradient(135deg, #e0243f, #b81530); box-shadow: 0 8px 18px -8px #ff4f6a; }
.jx.orange { background: linear-gradient(135deg, #bb5600, #a34800); box-shadow: 0 8px 18px -8px #ff9d2e; }
.jx.vert { background: linear-gradient(135deg, #0d8049, #0a6a3d); box-shadow: 0 8px 18px -8px #1fbf74; }
.jx.passe { background: var(--carte-2); color: var(--mu); box-shadow: none; }
.jx.rouge { animation: pulse 2s ease-in-out infinite; }

/* ---------- Accueil ---------- */
.salut { margin-bottom: 18px; }
.salut h1 { margin: 0; }
.salut .muted { font-size: 1rem; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.stat { margin: 0; padding: 16px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.stat .big { font: 800 2.4rem/1 var(--f-titre); letter-spacing: -.03em; }
.stat .muted { font-weight: 700; }
.stat-serie { background: linear-gradient(150deg, color-mix(in srgb, var(--chaud) 30%, var(--carte)), var(--carte) 70%); }
.stat-minutes { background: linear-gradient(150deg, color-mix(in srgb, var(--acc) 26%, var(--carte)), var(--carte) 70%); }
.stat-haut { display: flex; align-items: flex-end; gap: 6px; }
.flamme { width: 46px; height: 54px; margin: -6px -4px 0 -6px; transform-origin: 50% 90%; animation: flamme 1.3s ease-in-out infinite alternate; filter: drop-shadow(0 4px 10px rgba(255, 110, 50, .55)); }
.flamme .f2 { transform-origin: 50% 90%; animation: flamme-int .9s ease-in-out infinite alternate; }
.flamme.eteinte { animation: none; filter: grayscale(1) opacity(.4); }
.barre { height: 8px; border-radius: 99px; background: var(--carte-2); overflow: hidden; margin-top: 10px; }
.barre span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--acc), var(--p-clair)); transform-origin: left; animation: remplit 1s .3s cubic-bezier(.2,.8,.2,1) both; }

.prochaine {
  --m: var(--p); --u: var(--vert);
  overflow: hidden; padding: 22px;
  background:
    radial-gradient(22rem 14rem at 100% 0%, color-mix(in srgb, var(--m) 45%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--m) 22%, var(--carte)), var(--carte));
  border-color: color-mix(in srgb, var(--m) 35%, var(--ligne));
}
.prochaine.rouge { --u: var(--rouge); } .prochaine.orange { --u: var(--orange); }
.prochaine-etiquette { font: 800 .78rem var(--f-texte); text-transform: uppercase; letter-spacing: .12em; color: var(--mu); }
.prochaine-corps { display: flex; align-items: center; gap: 18px; margin-top: 10px; }
.anneau { position: relative; width: 112px; height: 112px; flex: none; }
.anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anneau circle { fill: none; stroke-width: 10; }
.anneau .fond { stroke: color-mix(in srgb, var(--u) 18%, transparent); }
.anneau .val { stroke: var(--u); stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: var(--off, 289); animation: anneau 1.2s .2s cubic-bezier(.2,.8,.2,1) both; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--u) 60%, transparent)); }
.anneau-txt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.anneau-txt b { font: 800 2.3rem/1 var(--f-titre); color: var(--u); letter-spacing: -.03em; }
.anneau-txt small { font-weight: 800; font-size: .72rem; color: var(--mu); text-transform: uppercase; letter-spacing: .08em; }
.prochaine h2 { font-size: 1.4rem; margin: 4px 0 2px; display: block; }
.compte { font: 800 1.02rem var(--f-titre); color: var(--u); font-variant-numeric: tabular-nums; }
.alertes { display: flex; flex-direction: column; gap: 8px; }
.alerte { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--u) 13%, var(--carte-2)); font-weight: 650; font-size: .94rem; }
.alerte.rouge { --u: var(--rouge); } .alerte.orange { --u: var(--orange); } .alerte.vert { --u: var(--vert); }
.alerte b { color: var(--u); white-space: nowrap; min-width: 2.6em; font-family: var(--f-titre); }
.ia-discret { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: var(--carte-2); color: var(--mu); font-size: .86rem; font-weight: 650; margin-bottom: 16px; }
.ia-discret .barre { flex: 1; margin: 0; height: 6px; }
.revise h2 { margin-bottom: 4px; }
.minutes-rapides { display: flex; gap: 8px; flex-wrap: wrap; }
.minutes-rapides button { min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--carte-2); color: var(--tx); box-shadow: none; font-size: .92rem; }
.minutes-rapides button.actif { background: var(--acc); color: #062a27; }
.minutes-champ { display: flex; align-items: center; gap: 10px; }
.minutes-champ input { width: 96px; flex: none; text-align: center; font-size: 1.15rem; }

/* ---------- Bouton flottant + feuille du bas ---------- */
.fab {
  position: fixed; z-index: 25; right: 18px; bottom: calc(var(--tab-h) + 26px + env(safe-area-inset-bottom));
  width: 62px; height: 62px; padding: 0; border-radius: 22px; box-shadow: 0 16px 30px -10px var(--p);
}
.fab .ic { width: 28px; height: 28px; }
@media (min-width: 768px) { .fab { bottom: 28px; right: 28px; } }
dialog.feuille {
  margin: auto 0 0; width: 100%; max-width: 100%; max-height: 92dvh; border: 0; padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
  background: var(--carte); color: var(--tx); border-radius: 30px 30px 0 0; box-shadow: var(--ombre-forte);
}
dialog.feuille[open] { animation: feuille .38s cubic-bezier(.2,.9,.25,1); }
dialog.feuille::backdrop { background: rgba(5, 3, 15, .55); backdrop-filter: blur(4px); }
dialog.feuille .poignee { width: 44px; height: 5px; border-radius: 9px; background: var(--ligne); margin: 0 auto 14px; display: block; border: 0; padding: 0; min-height: 0; box-shadow: none; }
.feuille-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.feuille-tete h2 { margin: 0; }
@media (min-width: 768px) { dialog.feuille { margin: auto; max-width: 540px; border-radius: 30px; } }

/* ---------- Leçons ---------- */
.capture {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 150px; padding: 18px; border-radius: 22px; cursor: pointer; text-align: center;
  border: 2px dashed color-mix(in srgb, var(--p-clair) 55%, transparent);
  background: color-mix(in srgb, var(--p) 10%, var(--carte-2)); color: var(--tx); font-size: 1rem;
  transition: background var(--vite), transform var(--vite);
}
.capture:active { transform: scale(.98); }
.capture .ic { width: 40px; height: 40px; color: var(--p-clair); }
.capture input[type=file] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.capture:has(input:focus-visible) { outline: 3px solid var(--acc); }
.capture-nom { font-size: .85rem; color: var(--mu); font-weight: 600; overflow-wrap: anywhere; }
.apercu { display: block; width: 100%; max-height: 300px; object-fit: contain; border-radius: 18px; background: var(--carte-2); }
.miniature { display: block; width: 100%; max-height: 320px; object-fit: contain; border-radius: 18px; background: var(--carte-2); }
.statut { text-align: center; }
.recherche { display: flex; gap: 8px; }
.recherche input { flex: 1; }
.recherche button { width: 48px; padding: 0; flex: none; }
.groupe-titre { font: 800 .8rem var(--f-texte); text-transform: uppercase; letter-spacing: .1em; color: var(--mu); margin: 18px 0 8px; }

.lecon-tete {
  --m: var(--p);
  padding: 22px; margin-bottom: 16px; border-radius: var(--r-l); overflow: hidden; position: relative;
  background: linear-gradient(140deg, color-mix(in srgb, var(--m) 55%, var(--carte)), color-mix(in srgb, var(--m) 18%, var(--carte)));
  border: 1px solid color-mix(in srgb, var(--m) 40%, var(--ligne));
}
.lecon-tete::after { content: attr(data-emoji); position: absolute; right: -6px; bottom: -22px; font-size: 7rem; opacity: .22; transform: rotate(-12deg); pointer-events: none; }
.lecon-tete h1 { margin: 8px 0 4px; }
.lecon-tete .muted { color: color-mix(in srgb, var(--tx) 75%, transparent); }

.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.tuiles form { margin: 0; }
.tuile {
  --t: var(--p);
  width: 100%; min-height: 112px; flex-direction: column; align-items: flex-start; justify-content: space-between;
  padding: 14px 16px; border-radius: 22px; text-align: left; font-size: 1.02rem; line-height: 1.2;
  background: linear-gradient(145deg, var(--t), color-mix(in srgb, var(--t) 70%, #000));
  box-shadow: 0 14px 26px -14px var(--t);
}
.tuile .ic { width: 30px; height: 30px; padding: 6px; box-sizing: content-box; border-radius: 12px; background: rgba(255,255,255,.18); }
.tuile small { display: block; font-weight: 600; font-size: .78rem; opacity: .85; margin-top: 2px; }
.tuile-resume { --t: #6d4aff; } .tuile-fiche { --t: #0a7f99; } .tuile-flashcards { --t: #c2410c; } .tuile-quiz { --t: #0f7a55; }
.badge-ia {
  display: inline-block; margin: 0 0 12px; padding: 6px 12px; border-radius: 14px;
  font-size: .8rem; font-weight: 700; color: var(--p-clair); background: color-mix(in srgb, var(--p) 16%, transparent);
}
.md { font-weight: 500; }
.md h3, .md h4 { margin: 1.1rem 0 .4rem; font-size: 1.05rem; color: var(--p-clair); }
.md ul, .md ol { padding-left: 1.3rem; margin: .4rem 0; }
.md li { margin: .25rem 0; }
.md li::marker { color: var(--acc); }
.md strong { color: color-mix(in srgb, var(--acc) 35%, var(--tx)); }
.ia { scroll-margin-top: 80px; }
.page { padding: 14px 0; border-top: 1px solid var(--ligne); }
.page:first-of-type { border-top: 0; padding-top: 0; }
.page h3 { margin-bottom: 10px; }
details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 750; color: var(--p-clair); }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "›"; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: var(--carte-2); transition: transform var(--vite); }
details[open] > summary::before { transform: rotate(90deg); }

/* Flashcards : paquet qu'on fait glisser, carte qui se retourne */
.deck { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 14px; margin: 0 -4px; scrollbar-width: none; }
.deck::-webkit-scrollbar { display: none; }
.fc { flex: 0 0 100%; scroll-snap-align: center; perspective: 1200px; min-height: 260px; background: none; box-shadow: none; padding: 0; border-radius: 26px; color: var(--tx); text-align: center; cursor: pointer; }
.fc:active { transform: none; }
.fc-in { position: relative; display: grid; width: 100%; height: 100%; min-height: 260px; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, 1.3, .5, 1); }
.fc.retournee .fc-in { transform: rotateY(180deg); }
.fc-face {
  grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; border-radius: 26px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  font: 700 1.15rem/1.4 var(--f-texte);
}
.fc-recto { background: linear-gradient(150deg, var(--p), var(--p-2)); color: #fff; box-shadow: 0 18px 34px -16px var(--p); }
.fc-verso { background: var(--carte-2); border: 2px solid color-mix(in srgb, var(--acc) 50%, transparent); transform: rotateY(180deg); font-weight: 600; font-size: 1.05rem; justify-content: flex-start; text-align: left; align-items: stretch; }
.fc-verso > small, .fc-verso > strong { text-align: center; }
.fc:not(.retournee) .fc-verso { pointer-events: none; }
.fc-face small { font: 800 .7rem var(--f-texte); text-transform: uppercase; letter-spacing: .14em; opacity: .75; }
.deck-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.deck-compteur { font: 800 1rem var(--f-titre); color: var(--mu); font-variant-numeric: tabular-nums; }
.deck-nav button { width: 48px; padding: 0; }
.deck-points { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; margin: 4px 0 10px; }
.deck-points i { width: 7px; height: 7px; border-radius: 9px; background: var(--ligne); transition: width var(--vite), background var(--vite); }
.deck-points i.on { width: 22px; background: var(--acc); }

/* Quiz */
.quiz { list-style: none; padding: 0; margin: 0; counter-reset: q; display: flex; flex-direction: column; gap: 14px; }
.quiz > li { counter-increment: q; padding: 16px; border-radius: 22px; background: var(--carte-2); }
.quiz > li > p:first-child::before { content: counter(q); display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 8px; border-radius: 10px; background: var(--p); color: #fff; font: 800 .9rem var(--f-titre); vertical-align: middle; }
.choix {
  position: relative; flex-direction: row; align-items: center; gap: 12px; min-height: 52px; margin-top: 8px; padding: 10px 14px;
  border-radius: 16px; background: var(--carte); border: 2px solid var(--ligne); color: var(--tx); font-size: 1rem; font-weight: 650; cursor: pointer;
  transition: transform var(--vite), border-color var(--vite), background var(--vite);
}
.choix:active { transform: scale(.98); }
.choix input { appearance: none; width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid var(--mu); background: transparent; flex: none; }
.choix input:checked { border: 7px solid var(--p-clair); }
.choix.bon { background: color-mix(in srgb, var(--vert) 20%, var(--carte)); border-color: var(--vert); animation: bon .45s; }
.choix.faux { background: color-mix(in srgb, var(--rouge) 18%, var(--carte)); border-color: var(--rouge); animation: tremble .4s; }
.choix.bon::after { content: "✓"; margin-left: auto; color: var(--vert); font-weight: 900; font-size: 1.2rem; }
.choix.faux::after { content: "✗"; margin-left: auto; color: var(--rouge); font-weight: 900; font-size: 1.2rem; }
.quiz.verrou .repondu .choix { pointer-events: none; }
.quiz-score { display: none; margin-top: 16px; padding: 18px; text-align: center; border-radius: 22px; background: linear-gradient(135deg, var(--p), var(--p-2)); color: #fff; font: 800 1.3rem var(--f-titre); }
.quiz-score.visible { display: block; animation: pop .5s cubic-bezier(.3,1.6,.5,1); }

/* ---------- Matières ---------- */
.matiere { --m: var(--p); padding: 14px; }
.matiere form.grow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.matiere form.grow input[type=text] { flex: 1 1 140px; }

/* ---------- Connexion ---------- */
.login { max-width: 420px; margin: 8vh auto 0; text-align: center; padding: 28px 22px; }
.login-logo { width: 84px; height: 84px; border-radius: 26px; margin: -6px auto 14px; display: block; box-shadow: 0 18px 40px -14px var(--p); animation: flotte 4s ease-in-out infinite; }
.login form { display: flex; flex-direction: column; gap: 14px; text-align: left; margin-top: 18px; }
.login button { min-height: 56px; }

/* ---------- Écran de chargement IA ---------- */
.chargement { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.chargement[hidden] { display: none; }
.chargement-boite { width: min(340px, 100%); text-align: center; animation: pop .4s cubic-bezier(.3,1.5,.5,1); }
.orbite { position: relative; width: 132px; height: 132px; margin: 0 auto 22px; }
.orbite span { position: absolute; inset: 0; border-radius: 50%; border: 4px solid transparent; }
.orbite span:nth-child(1) { border-top-color: var(--p-clair); animation: tourne 1.1s linear infinite; }
.orbite span:nth-child(2) { inset: 16px; border-right-color: var(--acc); animation: tourne 1.6s linear infinite reverse; }
.orbite span:nth-child(3) { inset: 32px; border-bottom-color: var(--chaud); animation: tourne 2.1s linear infinite; }
.orbite i { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; font-style: normal; animation: pulse 1.4s ease-in-out infinite; }
.chargement-titre { font: 800 1.3rem var(--f-titre); margin: 0 0 6px; }
.chargement-astuce { color: var(--mu); min-height: 3em; transition: opacity .3s; }
.chargement-barre { height: 6px; border-radius: 9px; background: var(--carte-2); overflow: hidden; margin-top: 14px; }
.chargement-barre span { display: block; height: 100%; width: 40%; border-radius: inherit; background: linear-gradient(90deg, var(--p-clair), var(--acc)); animation: glisse 1.4s ease-in-out infinite; }

/* Confettis */
.confettis { position: fixed; inset: 0; z-index: 90; pointer-events: none; }

/* ---------- Animations ---------- */
@keyframes apparait { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes pop { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes monte { from { opacity: 0; transform: translateY(8px); } }
@keyframes feuille { from { transform: translateY(100%); } }
@keyframes toast { 0% { opacity: 0; transform: translateY(-20px); } 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-20px); visibility: hidden; } }
@keyframes flamme { 0% { transform: scale(1) rotate(-3deg); } 100% { transform: scale(1.08, 1.12) rotate(3deg); } }
@keyframes flamme-int { 0% { transform: scale(.92); } 100% { transform: scale(1.06, 1.12); } }
@keyframes remplit { from { transform: scaleX(0); } }
@keyframes anneau { from { stroke-dashoffset: 289; } }
@keyframes pulse { 50% { transform: scale(1.06); } }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes glisse { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@keyframes bon { 40% { transform: scale(1.03); } }
@keyframes tremble { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes flotte { 50% { transform: translateY(-6px) rotate(-3deg); } }

/* Transitions entre pages (navigateurs compatibles) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .2s ease-in both vt-sort; }
::view-transition-new(root) { animation: .3s cubic-bezier(.2,.8,.2,1) both vt-entre; }
@keyframes vt-sort { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-entre { from { opacity: 0; transform: translateY(10px); } }
.onglets { view-transition-name: onglets; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .flash { animation: none !important; }
  .fc-in { transform: none !important; }
  .fc .fc-verso { transform: none; opacity: 0; }
  .fc.retournee .fc-verso { opacity: 1; }
  .fc.retournee .fc-recto { opacity: 0; }
  @view-transition { navigation: none; }
}
.encourage { display: block; margin-top: 6px; color: var(--chaud); font-weight: 700; }

/* Explications des cartes et du quiz : idée, exemple ludique, règle, astuce, extrait de la leçon */
.explic { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; font-size: .95rem; font-weight: 550; text-align: left; cursor: auto; }
.ex { margin: 0; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--p) 10%, var(--carte)); line-height: 1.45; }
.ex b { display: block; font: 800 .74rem var(--f-texte); text-transform: uppercase; letter-spacing: .08em; color: var(--p-clair); margin-bottom: 2px; }
.ex-jeu { background: color-mix(in srgb, var(--acc) 14%, var(--carte)); }
.ex-jeu b { color: var(--acc); }
.ex-autre { border-left: 4px solid var(--acc); }
.ex-regle { background: var(--carte); border: 2px solid color-mix(in srgb, var(--p-clair) 45%, transparent); }
.ex-astuce { background: color-mix(in srgb, var(--chaud) 14%, var(--carte)); }
.ex-astuce b { color: var(--chaud); }
.ex-doute { background: color-mix(in srgb, var(--orange) 16%, var(--carte)); }
.ex-doute b { color: var(--orange); }
.ex-source summary { font-size: .92rem; }
.ex-source blockquote { margin: 4px 0 0; padding: 10px 12px; border-left: 4px solid var(--p-clair); border-radius: 0 12px 12px 0; background: var(--carte); font-style: italic; color: var(--mu); }
.ex-autrement button { width: 100%; min-height: 46px; font-size: .95rem; background: transparent; color: var(--acc); border: 2px solid color-mix(in srgb, var(--acc) 60%, transparent); }
.tag-plus { display: inline-block; align-self: center; margin-bottom: 6px; padding: 4px 10px; border-radius: 999px; font: 800 .74rem var(--f-texte); background: color-mix(in srgb, var(--chaud) 25%, transparent); color: color-mix(in srgb, var(--chaud) 55%, var(--tx)); }
.fc-recto .tag-plus { background: rgba(255,255,255,.2); color: #fff; }
.correction .pourquoi { margin: 4px 0 8px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--rouge) 14%, var(--carte)); font-weight: 650; }
.correction .bonne { margin: 4px 0 8px; }