/* =========================================================
   Revisly — tableau de bord (thème sombre)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

:root{
  --surface-page:#202020;
  --surface-rail:#1a1a1a;
  --surface-card:#252525;
  --surface-soft:#1c1c1c;
  --surface-soft-hover:#242424;
  --surface-border:#3a3a3a;
  --surface-line:#2e2e2e;

  --ink-primary:#f0f0f0;
  --ink-secondary:#c7c7c7;
  --ink-tertiary:#8a8a8a;

  --sky:#1a7ab8;
  --sky-hover:#2189c9;
  --sky-border:#12557f;
  --sky-tint:rgba(26,122,184,.16);
  --sky-soft:#6cb4e4;

  --moss:#4ea35a;
  --daisy:#c9a227;
  --blush:#cf5647;

  /* surfaces secondaires : redéfinies en bloc par le thème clair */
  --surface-hover:#282828;
  --surface-icon:#2a2a2a;
  --surface-reponse:#22303a;
  --track:#2e2e2e;
  --border-fort:#4a4a4a;
  --topbar-bg:rgba(32,32,32,.88);

  --ink-mute:#8a8a8a;
  --ink-ok:#9fd8a8;
  --ink-ko:#e79a90;
  --ink-warn:#e2c96b;
  --ink-reponse:#e6f2fb;

  --radius:12px;
}

/* ---------- thème clair ---------- */
:root[data-theme="clair"]{
  --surface-page:#f5f5f4;
  --surface-rail:#ffffff;
  --surface-card:#ffffff;
  --surface-soft:#f2f2f0;
  --surface-soft-hover:#eaeae7;
  --surface-border:#e2e1de;
  --surface-line:#ececea;

  --ink-primary:#252525;
  --ink-secondary:#5b5955;
  --ink-tertiary:#8b8985;

  --sky-tint:rgba(26,122,184,.12);
  --sky-soft:#166ea6;

  --moss:#3f8a4a;
  --daisy:#96771a;
  --blush:#b8453a;

  --surface-hover:#f7f7f6;
  --surface-icon:#f0f0ee;
  --surface-reponse:#eaf3fa;
  --track:#e4e3e0;
  --border-fort:#cfcecb;
  --topbar-bg:rgba(245,245,244,.88);

  --ink-mute:#9b9995;
  --ink-ok:#2f7a3c;
  --ink-ko:#a83b30;
  --ink-warn:#8a6d10;
  --ink-reponse:#1c3a4e;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--surface-page);
  color:var(--ink-primary);
  font-family:"Figtree","Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
svg{display:block}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

/* ---------- ossature ---------- */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}

.side{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;gap:22px;
  padding:20px 14px;
  background:var(--surface-rail);border-right:.8px solid var(--surface-border);
}
.brand{display:flex;align-items:center;gap:9px;padding:0 8px;font-size:19px;font-weight:700;letter-spacing:-.01em}
.brand svg{width:24px;height:24px;flex:none}

.nav{display:flex;flex-direction:column;gap:2px}
.nav a{
  display:flex;align-items:center;gap:11px;
  padding:9px 10px;border-radius:10px;
  font-size:.9375rem;color:var(--ink-secondary);
  transition:background .15s,color .15s;
}
.nav a svg{width:18px;height:18px;flex:none}
.nav a .count{margin-left:auto;font-size:.75rem;color:var(--ink-tertiary)}
.nav a:hover{background:var(--surface-soft-hover);color:var(--ink-primary)}
.nav a.on{background:var(--sky-tint);color:var(--ink-primary)}
.nav a.on svg{color:var(--sky-soft)}

.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.plan{
  background:var(--surface-soft);border:.8px solid var(--surface-border);
  border-radius:var(--radius);padding:14px;
}
.plan b{display:block;font-size:.875rem}
.plan p{margin-top:4px;font-size:.75rem;color:var(--ink-tertiary)}
.plan .meter{height:5px;border-radius:999px;background:var(--track);overflow:hidden;margin-top:10px}
.plan .meter i{display:block;height:100%;background:var(--sky);border-radius:999px}
.plan a{display:inline-block;margin-top:10px;font-size:.8125rem;color:var(--sky-soft)}
.plan a:hover{text-decoration:underline}

.nav-reglages{
  display:flex;align-items:center;gap:11px;
  padding:9px 10px;border-radius:10px;
  font-size:.9375rem;color:var(--ink-secondary);
  transition:background .15s,color .15s;
}
.nav-reglages svg{width:18px;height:18px;flex:none}
.nav-reglages:hover{background:var(--surface-soft-hover);color:var(--ink-primary)}
body[data-view="parametres"] .nav-reglages{background:var(--sky-tint);color:var(--ink-primary)}
body[data-view="parametres"] .nav-reglages svg{color:var(--sky-soft)}

.me{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;width:100%;text-align:left}
.me:hover{background:var(--surface-soft-hover)}
.avatar{
  flex:none;width:32px;height:32px;border-radius:999px;background:var(--sky);
  display:flex;align-items:center;justify-content:center;
  font-size:.8125rem;font-weight:700;color:#fff;
}
.me .who{min-width:0}
.me .who b{display:block;font-size:.875rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me .who span{display:block;font-size:.75rem;color:var(--ink-tertiary)}

/* ---------- barre du haut ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:16px;
  padding:14px 28px;
  background:var(--topbar-bg);backdrop-filter:blur(10px);
  border-bottom:.8px solid var(--surface-border);
}
.search{
  /* min-width:0 : sans lui le champ refuse de passer sous sa largeur
     intrinsèque et pousse la barre du haut hors de l’écran */
  flex:1;min-width:0;max-width:460px;display:flex;align-items:center;gap:9px;
  background:var(--surface-soft);border:.8px solid var(--surface-border);
  border-radius:999px;padding:8px 14px;
  transition:border-color .18s,box-shadow .18s;
}
.search:focus-within{border-color:var(--sky);box-shadow:0 0 0 3px rgba(26,122,184,.22)}
.search svg{width:16px;height:16px;color:var(--ink-tertiary);flex:none}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink-primary);font:inherit;font-size:.875rem}
.search input::placeholder{color:var(--ink-tertiary)}
.topbar-right{flex:none;margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{
  width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:var(--surface-soft);border:.8px solid var(--surface-border);color:var(--ink-secondary);
  transition:color .15s,background .15s;
}
.icon-btn:hover{color:var(--ink-primary);background:var(--surface-soft-hover)}
.icon-btn svg{width:17px;height:17px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 16px;border-radius:10px;font-size:.9375rem;font-weight:500;white-space:nowrap;
  transition:background .16s,transform .12s;
}
.btn svg{width:16px;height:16px}
.btn-accent{background:var(--sky);border:.8px solid var(--sky-border);color:#fff}
.btn-accent:hover{background:var(--sky-hover)}
.btn-ghost{background:var(--surface-soft);border:.8px solid var(--surface-border);color:var(--ink-primary)}
.btn-ghost:hover{background:var(--surface-soft-hover)}
.btn:active{transform:translateY(1px)}

/* ---------- contenu ---------- */
.content{padding:26px 28px 60px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.col{display:flex;flex-direction:column;gap:22px;min-width:0}

.greet h1{font-size:1.75rem;font-weight:700;letter-spacing:-.02em}
.greet p{margin-top:6px;font-size:.9375rem;color:var(--ink-secondary)}

.card{background:var(--surface-card);border:.8px solid var(--surface-border);border-radius:16px;padding:20px}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.card-head h2{font-size:1.0625rem;font-weight:600}
.card-head a{font-size:.8125rem;color:var(--ink-tertiary)}
.card-head a:hover{color:var(--ink-primary);text-decoration:underline}

/* statistiques */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{background:var(--surface-card);border:.8px solid var(--surface-border);border-radius:14px;padding:14px 16px}
.stat .k{font-size:.75rem;color:var(--ink-tertiary);display:flex;align-items:center;gap:6px}
.stat .k svg{width:13px;height:13px}
.stat .v{margin-top:6px;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .d{margin-top:2px;font-size:.75rem;color:var(--moss)}
.stat .d.flat{color:var(--ink-tertiary)}

/* zone d'import */
.drop{
  border:1.6px dashed var(--border-fort);border-radius:14px;padding:26px 20px;text-align:center;
  background:var(--surface-soft);transition:border-color .18s,background .18s;
}
.drop.over{border-color:var(--sky);background:var(--sky-tint)}
.drop .types{display:flex;justify-content:center;gap:10px;margin-bottom:14px}
.drop .types span{
  width:40px;height:40px;border-radius:11px;background:var(--surface-icon);border:.8px solid var(--surface-border);
  display:flex;align-items:center;justify-content:center;
}
.drop .types svg{width:20px;height:20px}
.drop b{display:block;font-size:.9375rem;font-weight:600}
.drop p{margin-top:4px;font-size:.8125rem;color:var(--ink-tertiary)}
.drop .pick{margin-top:14px}

/* listes de documents */
.docs{display:flex;flex-direction:column;gap:8px}
.doc{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:12px 14px;border-radius:12px;background:var(--surface-soft);
  border:.8px solid transparent;transition:border-color .15s,background .15s;
}
.doc:hover{background:var(--surface-soft-hover);border-color:var(--surface-border)}
.doc .ic{
  flex:none;width:36px;height:36px;border-radius:10px;background:var(--surface-icon);
  display:flex;align-items:center;justify-content:center;
}
.doc .ic svg{width:19px;height:19px}
.doc .body{min-width:0}
.doc .nm{display:block;font-size:.9375rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc .mt{margin-top:3px;font-size:.75rem;color:var(--ink-tertiary);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.doc .tag{border:.8px solid var(--surface-border);border-radius:999px;padding:1px 8px;font-size:.6875rem}
.doc .prog{display:block;margin-top:8px;height:4px;border-radius:999px;background:var(--track);overflow:hidden}
.doc .prog i{display:block;height:100%;background:var(--sky);border-radius:999px;transition:width .5s ease}
.doc .pct{font-size:.75rem;color:var(--ink-tertiary);font-variant-numeric:tabular-nums}
.doc.new{animation:pop .4s ease}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}}

/* activités */
.acts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.act{
  background:var(--surface-soft);border:.8px solid var(--surface-border);border-radius:14px;
  padding:16px;text-align:left;transition:border-color .15s,background .15s;
  display:block;color:inherit;text-decoration:none;
}
.act:hover{background:var(--surface-soft-hover);border-color:var(--border-fort)}
.act .em{font-size:1.25rem;line-height:1}
.act b{display:block;margin-top:10px;font-size:.9375rem;font-weight:600}
.act span{display:block;margin-top:2px;font-size:.75rem;color:var(--ink-tertiary)}

/* colonne de droite */
.streak{text-align:center}
.ring{position:relative;width:132px;height:132px;margin:4px auto 0}
.ring svg{width:132px;height:132px;transform:rotate(-90deg)}
.ring .track{stroke:var(--track)}
.ring .fill{stroke:var(--sky);stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1)}
.ring .mid{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.ring .mid b{font-size:1.75rem;font-weight:700;letter-spacing:-.02em;line-height:1}
.ring .mid span{margin-top:2px;font-size:.6875rem;color:var(--ink-tertiary)}
.streak p{margin-top:12px;font-size:.8125rem;color:var(--ink-secondary)}
.week{display:flex;justify-content:center;gap:6px;margin-top:14px}
.week i{
  width:24px;height:24px;border-radius:999px;background:var(--surface-icon);border:1px solid var(--surface-border);
  display:flex;align-items:center;justify-content:center;font-style:normal;font-size:.6875rem;color:var(--ink-tertiary);
}
.week i.on{background:var(--sky);border-color:var(--sky);color:#fff}
.week i.today{border-color:var(--sky-soft);color:var(--sky-soft)}

.revs{display:flex;flex-direction:column;gap:8px}
.rev{
  width:100%;text-align:left;display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:11px;background:var(--surface-soft);
  border:.8px solid transparent;transition:background .15s,border-color .15s;
}
.rev:hover{background:var(--surface-soft-hover);border-color:var(--surface-border)}
.rev .sq{flex:none;width:8px;height:8px;border-radius:3px}
.rev .lb{font-size:.875rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rev .n{margin-left:auto;font-size:.75rem;color:var(--ink-tertiary);font-variant-numeric:tabular-nums}
.rev-empty{font-size:.8125rem;color:var(--ink-tertiary)}

.demander{display:flex;align-items:center;gap:8px;margin-top:4px}
.demander input{
  flex:1;min-width:0;padding:9px 12px;border-radius:10px;font:inherit;font-size:.8125rem;
  background:var(--surface-soft);border:.8px solid var(--surface-border);color:var(--ink-primary);
}
.demander input:focus{outline:none;border-color:var(--sky)}
.demander input::placeholder{color:var(--ink-tertiary)}
.demander button{
  flex:none;width:34px;height:34px;border-radius:10px;background:var(--sky);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.demander button svg{width:16px;height:16px}
.demander button:hover{filter:brightness(1.08)}
.demander-note{margin-top:9px;font-size:.75rem;color:var(--ink-tertiary)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.tipbox{background:var(--sky-tint);border:.8px solid var(--sky-border);border-radius:16px;padding:18px}
.tipbox b{font-size:.9375rem}
.tipbox p{margin-top:6px;font-size:.8125rem;color:var(--ink-secondary)}
.tipbox .btn{margin-top:14px}

/* message flottant */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);
  background:var(--surface-card);border:.8px solid var(--surface-border);
  border-radius:999px;padding:10px 18px;font-size:.875rem;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

.empty{padding:22px;text-align:center;font-size:.875rem;color:var(--ink-tertiary)}

/* =========================================================
   Éléments partagés par les pages de contenu
   (mes notes, flashcards, quiz…)
   ========================================================= */

/* `.col{display:flex}` l'emporterait sinon sur l'attribut hidden */
[hidden]{display:none !important}

.content.single{grid-template-columns:minmax(0,1fr)}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.page-head h1{font-size:1.75rem;font-weight:700;letter-spacing:-.02em}
.page-head p{margin-top:6px;font-size:.9375rem;color:var(--ink-secondary)}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:7px 13px;border-radius:999px;font-size:.8125rem;white-space:nowrap;
  background:var(--surface-soft);border:.8px solid var(--surface-border);color:var(--ink-secondary);
  transition:background .15s,border-color .15s,color .15s;
}
.chip:hover{background:var(--surface-soft-hover);color:var(--ink-primary)}
.chip.on{background:var(--sky-tint);border-color:var(--sky);color:var(--ink-primary)}
.chip .n{margin-left:6px;font-size:.6875rem;color:var(--ink-tertiary);font-variant-numeric:tabular-nums}
.chip.on .n{color:var(--sky-soft)}

.no-result{
  grid-column:1/-1;padding:44px 20px;text-align:center;
  background:var(--surface-card);border:.8px dashed var(--surface-border);border-radius:14px;
}
.no-result b{display:block;font-size:1rem}
.no-result p{margin-top:6px;font-size:.875rem;color:var(--ink-tertiary)}
.no-result .btn{margin-top:16px}

@media (prefers-reduced-motion: reduce){
  .doc.new{animation:none}
  .ring .fill,.doc .prog i,.toast{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .content{grid-template-columns:minmax(0,1fr)}
  .acts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .app{grid-template-columns:1fr}
  /* min-width:0 est indispensable : sans lui la taille minimale automatique
     des éléments de grille empêche .side de rétrécir, son overflow-x ne sert
     à rien et c’est toute la page qui déborde sous ~375px */
  .side,.main{min-width:0}
  .side{
    position:static;height:auto;flex-direction:row;align-items:center;gap:14px;
    padding:12px 16px;border-right:0;border-bottom:.8px solid var(--surface-border);
    overflow-x:auto;
  }
  .nav{flex-direction:row;gap:4px}
  .nav a .count{display:none}
  .side-foot{margin-top:0;flex-direction:row;align-items:center;gap:10px}
  .plan{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .topbar{padding:12px 16px}
  .content{padding:20px 16px 48px}
  .greet h1{font-size:1.375rem}
  .acts{grid-template-columns:1fr}
  .nav a span.lbl{display:none}
  .topbar .btn span{display:none}
}

/* ---------- état de l'import ---------- */
.drop-etat{
  margin-top:10px;font-size:.8125rem;color:var(--sky-bold);
  font-variant-numeric:tabular-nums;
}
.drop.occupe{opacity:.75;pointer-events:none}

/* ---------- lien YouTube, sous la zone de dépôt ---------- */
.yt-rapide{
  display:flex;align-items:center;gap:10px;margin-top:12px;
  padding:6px 6px 6px 14px;border-radius:12px;
  background:var(--surface-soft);border:.8px solid var(--surface-border);
  transition:border-color .18s,box-shadow .18s;
}
.yt-rapide:focus-within{border-color:var(--sky);box-shadow:0 0 0 3px rgba(26,122,184,.22)}
.yt-rapide svg{width:22px;height:22px;flex:none}
.yt-rapide input{
  flex:1;min-width:0;background:none;border:0;outline:0;
  color:var(--ink-primary);font:inherit;font-size:.875rem;
}
.yt-rapide input::placeholder{color:var(--ink-tertiary)}
.yt-rapide .btn{padding:7px 14px;font-size:.875rem}

/* ---------- choix du cours à transformer ---------- */
/* La génération part toujours d'une note : depuis le tableau de bord,
   il faut donc d'abord en désigner une. */
.voile{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(15,23,42,.42);backdrop-filter:blur(2px);
}
.choix{
  width:100%;max-width:30rem;max-height:min(80vh,560px);
  display:flex;flex-direction:column;gap:12px;
  background:var(--surface-card);border:.8px solid var(--surface-border);
  border-radius:18px;padding:24px;box-shadow:var(--shadow-lg);
}
.choix h3{font-size:1.125rem;font-weight:650;letter-spacing:-.01em}
.choix > p{font-size:.875rem;color:var(--ink-secondary)}
.choix-liste{
  display:flex;flex-direction:column;gap:6px;
  overflow-y:auto;margin:2px -6px;padding:0 6px;
}
.choix-note{
  display:flex;flex-direction:column;gap:2px;width:100%;
  text-align:left;padding:11px 14px;border-radius:12px;cursor:pointer;
  background:var(--surface-soft);border:.8px solid var(--surface-border);
  transition:background-color .18s ease,border-color .18s ease;
}
.choix-note:hover{background:var(--sky-soft);border-color:var(--sky-ink)}
.choix-note b{font-size:.9375rem;font-weight:550}
.choix-note span{font-size:.75rem;color:var(--ink-tertiary)}
.choix-vide{font-size:.875rem;color:var(--ink-secondary);padding:8px 2px}
.choix-etat{font-size:.8125rem;color:var(--sky-bold)}
.choix[aria-busy="true"] .choix-note{opacity:.5;pointer-events:none}