/* Composants. Ne consomme QUE les variables de tokens.css :
   aucune couleur littérale ici, c'est vérifié par tests/test_themes.py. */

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--police-corps);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent)}

/* ---------- barre supérieure ---------- */
.topbar{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  padding:14px 26px;
  background:var(--surface);
  border-bottom:1px solid var(--rule);
}
.marque{
  font-family:var(--police-display);
  font-variation-settings:var(--display-variation);
  font-size:20px;font-weight:700;letter-spacing:-0.01em;
  text-decoration:none;color:var(--ink);
}
.marque span{color:var(--accent)}
.nav{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.nav a{
  font-family:var(--police-ui);font-size:14px;font-weight:600;
  text-decoration:none;color:var(--ink-2);
  padding:7px 14px;border-radius:var(--radius-lg);
}
.nav a:hover{background:var(--accent-soft);color:var(--accent)}
.topbar-actions{display:flex;align-items:center;gap:10px}

.btn-icone{
  font-size:17px;line-height:1;cursor:pointer;
  background:var(--accent-soft);color:var(--accent);
  border:1px solid var(--rule-2);border-radius:999px;
  width:36px;height:36px;
}
.btn-icone:hover{background:var(--accent);color:var(--paper)}
.btn-lien{
  font-family:var(--police-ui);font-size:13px;font-weight:600;
  background:none;border:none;color:var(--ink-3);cursor:pointer;padding:6px;
}
.btn-lien:hover{color:var(--accent)}

.btn{
  font-family:var(--police-ui);font-size:14px;font-weight:700;
  background:var(--accent);color:var(--paper);
  border:1px solid var(--accent);border-radius:999px;
  padding:10px 22px;cursor:pointer;
}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn-large{width:100%;padding:13px;font-size:15px;margin-top:6px}
.btn:focus-visible,.btn-icone:focus-visible,.btn-lien:focus-visible,
.nav a:focus-visible,input:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* ---------- page ---------- */
.page{max-width:1080px;margin:0 auto;padding:34px 26px 90px}

.hero{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;
  align-items:end;padding-bottom:28px;margin-bottom:34px;
  border-bottom:1px solid var(--rule);
}
@media (max-width:760px){.hero{grid-template-columns:1fr}}
.eyebrow{
  font-family:var(--police-ui);font-size:11px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 14px;
}
h1{
  font-family:var(--police-display);
  font-variation-settings:var(--display-variation);
  font-size:clamp(32px,6vw,52px);line-height:1.05;margin:0 0 12px;
  font-weight:700;letter-spacing:-0.02em;text-wrap:balance;
}
.lede{font-size:18px;color:var(--ink-2);margin:0;max-width:58ch}

.compteur{
  border:2px solid var(--accent);border-radius:var(--radius-lg);
  background:var(--accent-soft);padding:18px 24px;text-align:center;
}
.compteur-n{
  font-family:var(--police-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(40px,9vw,58px);font-weight:500;line-height:1;
  color:var(--accent);
}
.compteur-l{
  font-family:var(--police-ui);font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);
  margin-top:8px;
}
.compteur-d{font-family:var(--police-ui);font-size:12px;color:var(--ink-3);margin-top:4px}

/* ---------- modules ---------- */
.grille-modules{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;
}
.module{
  display:block;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-lg);padding:22px 24px;
}
.module:hover{border-color:var(--accent);background:var(--accent-soft)}
.module-ico{font-size:22px;color:var(--accent);display:block;margin-bottom:10px}
.module h2{
  font-family:var(--police-display);
  font-variation-settings:var(--display-variation);
  font-size:19px;margin:0 0 6px;font-weight:600;
}
.module p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.5}

/* ---------- carte et formulaire ---------- */
.carte{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-lg);padding:26px 28px;
}
.centre-ecran{
  min-height:100svh;display:flex;align-items:center;justify-content:center;padding:26px;
}
.carte-login{width:100%;max-width:380px}
.titre-login{
  font-family:var(--police-display);
  font-variation-settings:var(--display-variation);
  font-size:30px;margin:0 0 4px;text-align:center;font-weight:700;
}
.sous-titre{
  font-family:var(--police-ui);font-size:12.5px;color:var(--ink-3);
  text-align:center;margin:0 0 22px;
}
label{
  display:block;font-family:var(--police-ui);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  margin:14px 0 6px;
}
input{
  width:100%;font-family:var(--police-ui);font-size:15px;
  padding:11px 14px;border:1px solid var(--rule-2);
  border-radius:var(--radius);background:var(--paper);color:var(--ink);
}
.alerte{
  background:var(--alerte-soft);color:var(--alerte);
  border-left:3px solid var(--alerte);border-radius:var(--radius);
  padding:11px 14px;font-size:14.5px;margin:0 0 12px;
}

/* ---------- titres et texte courant ---------- */
h2{
  font-family:var(--police-display);
  font-variation-settings:var(--display-variation);
  font-size:22px;font-weight:600;margin:34px 0 10px;letter-spacing:-0.01em;
}
p{margin:0 0 14px;max-width:70ch}
ul,ol{margin:0 0 14px;padding-left:22px;max-width:70ch}
li{margin-bottom:7px}
.vide{color:var(--ink-3);text-align:center;padding:44px 20px}
.mono{font-family:var(--police-mono);font-variant-numeric:tabular-nums}

/* ---------- filtres ---------- */
.filtres{margin:0 0 26px}
.filtre-ligne{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.filtre-label{
  font-family:var(--police-ui);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);width:52px;
}
.pilule{
  font-family:var(--police-ui);font-size:12.5px;font-weight:600;
  text-decoration:none;color:var(--ink-2);
  border:1px solid var(--rule-2);border-radius:999px;padding:5px 13px;
}
.pilule:hover{border-color:var(--accent);color:var(--accent)}
.pilule.active{background:var(--accent);border-color:var(--accent);color:var(--paper)}

/* ---------- listes ---------- */
.liste-fiches{list-style:none;padding:0;margin:0;max-width:none}
.ligne-fiche{margin:0 0 8px}
.ligne-fiche a{
  display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:14px 18px;text-decoration:none;color:inherit;
}
.ligne-fiche a:hover{border-color:var(--accent);background:var(--accent-soft)}
.ligne-titre{flex:1;min-width:200px;font-size:17px;font-weight:600}
.ligne-bloc{font-family:var(--police-ui);font-size:12px;color:var(--ink-3)}

.etiquette{
  font-family:var(--police-ui);font-size:10px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  border:1px solid currentColor;border-radius:999px;padding:2px 9px;white-space:nowrap;
}
.niveau-1{color:var(--succes)}
.niveau-2{color:var(--accent)}
.niveau-3{color:var(--or)}
.reel{color:var(--succes)}
.inedit{color:var(--or)}
.phase{color:var(--accent)}

/* ---------- contenu de fiche ---------- */
.essentiel{
  font-size:17.5px;border-left:3px solid var(--accent);
  padding-left:16px;margin:20px 0 24px;
}
.points li,.refs li,.exemples li{font-size:16px}
.refs{list-style:none;padding-left:0}
.refs li::before{content:"\00a7 ";color:var(--accent);font-family:var(--police-mono)}
.exemples{list-style:none;padding-left:0}
.exemples li::before{content:"\2726 ";color:var(--or)}

.encart{
  border-left:3px solid var(--accent);background:var(--accent-soft);
  border-radius:var(--radius);padding:15px 18px;margin:0 0 16px;font-size:16px;
}
.encart b{
  display:block;font-family:var(--police-ui);font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;
}
.encart-alerte{border-left-color:var(--alerte);background:var(--alerte-soft)}
.encart-alerte b{color:var(--alerte)}
.encart-succes{border-left-color:var(--succes);background:var(--succes-soft)}
.encart-succes b{color:var(--succes)}
.encart-accent b{color:var(--accent)}

/* ---------- plan ---------- */
.barre{
  height:10px;background:var(--surface-2);border:1px solid var(--rule);
  border-radius:999px;overflow:hidden;margin:0 0 8px;
}
.barre i{display:block;height:100%;background:var(--accent)}
.barre-legende{font-family:var(--police-ui);font-size:12.5px;color:var(--ink-3);margin:0 0 26px}
.semaine{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-lg);margin:0 0 12px;overflow:hidden;
}
.semaine-courante{border-color:var(--accent);border-width:2px}
.semaine-tete{display:flex;gap:14px;align-items:center;padding:14px 20px;flex-wrap:wrap}
.semaine-n{font-family:var(--police-mono);font-size:12px;color:var(--ink-3);width:32px}
.semaine-titre{flex:1;min-width:160px}
.semaine-titre b{display:block;font-size:17px}
.semaine-titre span{font-family:var(--police-ui);font-size:12px;color:var(--ink-3)}
.taches{list-style:none;margin:0;padding:0 20px 16px 66px;max-width:none}
@media (max-width:620px){.taches{padding-left:20px}}
.taches label{
  display:flex;gap:11px;align-items:flex-start;font-size:15.5px;
  padding:6px 0;cursor:pointer;text-transform:none;letter-spacing:0;
  font-family:var(--police-corps);font-weight:400;color:var(--ink);margin:0;
}
.taches input{width:17px;height:17px;margin:4px 0 0;accent-color:var(--accent);flex:none}
.taches label.faite{color:var(--ink-3);text-decoration:line-through}

/* ---------- journal ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:0 0 24px}
.stat{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:15px 17px}
.stat-v{
  font-family:var(--police-mono);font-variant-numeric:tabular-nums;
  font-size:26px;font-weight:500;line-height:1;color:var(--accent);margin-bottom:6px;
}
.stat-l{font-family:var(--police-ui);font-size:11px;color:var(--ink-3);line-height:1.35}
.grille-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
select{
  width:100%;font-family:var(--police-ui);font-size:15px;padding:11px 14px;
  border:1px solid var(--rule-2);border-radius:var(--radius);
  background:var(--paper);color:var(--ink);
}
.table-scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
th{
  font-family:var(--police-ui);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);text-align:left;padding:11px 14px;
  background:var(--surface-2);border-bottom:1px solid var(--rule-2);
}
td{padding:11px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
.hors-temps{color:var(--alerte);font-weight:600}

/* ---------- plan detaille d'un sujet ---------- */
.plan-detail{
  background:var(--surface-2);border:1px solid var(--rule);
  border-radius:var(--radius);padding:16px 20px;margin:0 0 18px;
}
.plan-i{font-weight:600;font-size:16.5px;margin:14px 0 5px}
.plan-i:first-child{margin-top:0}
.plan-a{margin:0 0 4px;padding-left:22px;font-size:15.5px;color:var(--ink-2)}

/* ---------- revision ---------- */
.carte-revision{
  background:var(--surface);border:1px solid var(--rule-2);
  border-radius:var(--radius-lg);margin:0 0 14px;min-height:230px;
  display:flex;flex-direction:column;overflow:hidden;
}
.carte-tete{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 22px;border-bottom:1px solid var(--rule);flex-wrap:wrap;
}
.carte-question{
  flex:1;display:flex;align-items:center;padding:30px 26px;
  font-size:21px;line-height:1.45;text-wrap:balance;
}
.carte-reponse{
  border-top:1px dashed var(--rule-2);background:var(--surface-2);
  padding:22px 26px;font-size:17px;line-height:1.6;
}
.carte-reponse b{color:var(--accent)}
.indice{
  font-family:var(--police-ui);font-size:12.5px;color:var(--ink-3);
  text-align:center;margin:10px 0 0;
}
.notes{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:0}
@media (max-width:560px){.notes{grid-template-columns:repeat(2,1fr)}}
.note{
  font-family:var(--police-ui);font-size:14px;font-weight:700;
  padding:14px 8px;cursor:pointer;line-height:1.3;
  background:transparent;border:1px solid var(--rule-2);
  border-radius:var(--radius);color:var(--ink-2);
}
.note span{
  display:block;font-family:var(--police-mono);font-size:11px;
  font-weight:400;color:var(--ink-3);margin-top:4px;
}
.note-1{color:var(--alerte);border-color:var(--alerte)}
.note-1:hover{background:var(--alerte-soft)}
.note-2{color:var(--or);border-color:var(--or)}
.note-2:hover{background:var(--or-soft)}
.note-3{color:var(--accent);border-color:var(--accent)}
.note-3:hover{background:var(--accent-soft)}
.note-4{color:var(--succes);border-color:var(--succes)}
.note-4:hover{background:var(--succes-soft)}
.note:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}