/* =======================================================================
   style.css — Epsilon Pro : "Epure"
   Identite visuelle : fond sombre neutre, couleurs mates, zero degrade,
   zero lueur coloree — la profondeur vient de bordures fines de 1px.
   Chaque theme reste sobre ; les seuls "dessins" sont des tracés
   geometriques discrets (axes, courbes) en currentColor a tres faible opacite.
   ======================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

/* ---------------- Palette par defaut (theme-ardoise, noir et blanc) ---------------- */
:root{
  --fond:#111111; --fond2:#161616; --card:#1b1b1b; --card2:#222222;
  --bord:#333333; --texte:#eeeeee; --muted:#8a8a8a;
  --accent:#e8e8e8; --accent2:#a3a3a3; --or:#e8e8e8;
  --on-accent:#111111;
  --ok:#6b9c6e; --ko:#b45c50;
  --radius:10px; --radius-sm:6px;
  --font-titre:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-corps:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,'SF Mono',Consolas,monospace;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 4px 14px rgba(0,0,0,.4);
  --shadow-lg:0 16px 40px rgba(0,0,0,.5);
}

/* ---------------- Variantes de theme (boutique) ---------------- */
body.theme-nuit{ --fond:#0d1015; --fond2:#12161d; --card:#161b23; --card2:#1c222c; --bord:#2a3140; --texte:#e5e8ee; --muted:#818a9c; --accent:#5b84b0; --accent2:#b0895b; --on-accent:#0d1015; }
body.theme-parchemin{ --fond:#efe9d8; --fond2:#e8e0c9; --card:#f7f2e4; --card2:#efe7d2; --bord:#d3c6a0; --texte:#2b2513; --muted:#7a6f52; --accent:#8a6a1f; --accent2:#4f6b52; --on-accent:#f9f5e9; }
body.theme-jade{ --fond:#0d1613; --fond2:#121e19; --card:#16241e; --card2:#1c2e26; --bord:#2c4438; --texte:#e2ece6; --muted:#7f9a8c; --accent:#4a9074; --accent2:#a88a4a; --on-accent:#0d1613; }
body.theme-bordeaux{ --fond:#160d0e; --fond2:#1e1113; --card:#261518; --card2:#301a1e; --bord:#4a2529; --texte:#ecdfe0; --muted:#a08084; --accent:#a3505a; --accent2:#a8894a; --on-accent:#160d0e; }
body.theme-indigo{ --fond:#0e0d17; --fond2:#14131f; --card:#191826; --card2:#201f30; --bord:#332f4a; --texte:#e4e2ec; --muted:#8983a0; --accent:#6c63a0; --accent2:#a8894a; --on-accent:#f2f0f7; }
body.theme-cuivre{ --fond:#160f08; --fond2:#1e150a; --card:#261b0e; --card2:#302212; --bord:#4a341c; --texte:#ecdfd0; --muted:#a08c6c; --accent:#b06f3d; --accent2:#5c8f7c; --on-accent:#160f08; }
body.theme-graphite{ --fond:#121212; --fond2:#171717; --card:#1c1c1c; --card2:#232323; --bord:#333333; --texte:#e6e6e6; --muted:#8a8a8a; --accent:#8a8271; --accent2:#6d7d8a; --on-accent:#121212; }
body.theme-or{ --fond:#100d05; --fond2:#161208; --card:#1c160b; --card2:#241d0f; --bord:#3d331c; --texte:#ece4d2; --muted:#a3937a; --accent:#b8923f; --accent2:#8a8a8a; --on-accent:#100d05; }

/* ---------------- Fonds d ecran (motif discret derriere le contenu) --- */
body.wp-uni{ background-image:none; }
body.wp-nuit-etoilee{ background-image:radial-gradient(1px 1px at 20% 30%,color-mix(in srgb, var(--texte) 30%, transparent) 0,transparent 60%),radial-gradient(1px 1px at 70% 20%,color-mix(in srgb, var(--texte) 25%, transparent) 0,transparent 60%),radial-gradient(1px 1px at 45% 65%,color-mix(in srgb, var(--texte) 22%, transparent) 0,transparent 60%),radial-gradient(1px 1px at 85% 75%,color-mix(in srgb, var(--texte) 25%, transparent) 0,transparent 60%),radial-gradient(1px 1px at 10% 85%,color-mix(in srgb, var(--texte) 22%, transparent) 0,transparent 60%); background-attachment:fixed; }
body.wp-grille{ background-image:linear-gradient(var(--bord) 1px,transparent 1px),linear-gradient(90deg,var(--bord) 1px,transparent 1px); background-size:32px 32px; background-attachment:fixed; }
body.wp-formules{ background-image:repeating-linear-gradient(45deg,transparent 0 60px,var(--card2) 60px 61px); background-attachment:fixed; }
body.wp-parchemin{ background-image:linear-gradient(180deg,transparent,rgba(0,0,0,.04)); background-attachment:fixed; }
body.wp-bibliotheque{ background-image:repeating-linear-gradient(90deg,var(--card) 0 40px,var(--card2) 40px 80px); background-attachment:fixed; }
body.wp-cosmos{ background-image:none; }
body.wp-tableau{ background-image:radial-gradient(1px 1px at 30% 40%,color-mix(in srgb, var(--texte) 18%, transparent) 0,transparent 60%),radial-gradient(1px 1px at 60% 20%,color-mix(in srgb, var(--texte) 18%, transparent) 0,transparent 60%); background-attachment:fixed; }
body.wp-aurore{ background-image:none; }
body.wp-or{ background-image:none; }

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--fond); color:var(--texte); font-family:var(--font-corps);
  min-height:100vh; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--font-titre); font-weight:600; margin:0 0 .5em; color:var(--texte); text-wrap:balance; letter-spacing:-.01em; }
h1{ font-size:1.7rem; font-weight:600; } h2{ font-size:1.2rem; } h3{ font-size:1.02rem; font-weight:600; }
p{ margin:0 0 .8em; }
a{ color:var(--accent); }
.hidden{ display:none !important; }
.muted{ color:var(--muted); font-size:.92rem; display:flex; align-items:center; gap:6px; }
button{ font-family:inherit; cursor:pointer; }
input{ font-family:inherit; }
::selection{ background:var(--accent); color:var(--on-accent); }
:focus-visible{ outline:1.5px solid var(--accent); outline-offset:2px; }
.icone{ display:inline-block; vertical-align:-4px; flex-shrink:0; }

/* Transition sobre du contenu principal a chaque changement de page */
.page-anim{ animation:pageApparait .2s ease; }
@keyframes pageApparait{ from{ opacity:0; } to{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; scroll-behavior:auto !important; }
}

/* ---------------- Boutons ---------------- */
.btn{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--bord); background:var(--card2); color:var(--texte); border-radius:var(--radius-sm); padding:9px 16px; font-size:.92rem; font-weight:500; transition:border-color .18s ease, background .18s ease; }
.btn:hover{ border-color:var(--accent); background:var(--card); }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); border:1px solid var(--accent); color:var(--on-accent); font-weight:600; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-secondaire{ background:transparent; }
.btn-lien{ background:none; border:none; color:var(--muted); padding:6px 0; font-weight:500; transition:color .18s ease; }
.btn-lien:hover{ color:var(--texte); }
.btn-large{ width:100%; padding:13px; font-size:1rem; justify-content:center; }
.btn-equipe{ background:var(--ok); border:1px solid var(--ok); color:#0b140c; }
.btn:disabled{ opacity:.45; cursor:default; }

/* ---------------- Ecran d authentification ---------------- */
#auth{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:48px 24px; position:relative; overflow:hidden; background:var(--fond); }
.auth-motif{ position:absolute; top:50%; left:8%; width:min(760px,90vw); height:auto; transform:translateY(-50%); fill:none; stroke:var(--texte); stroke-width:1; opacity:.05; pointer-events:none; }
.auth-layout{ position:relative; z-index:1; width:100%; max-width:1080px; display:grid; grid-template-columns:1.15fr .85fr; gap:72px; align-items:center; }

.auth-pitch{ padding:8px 0; }
.auth-pitch .auth-brand{ display:flex; align-items:center; gap:9px; margin-bottom:32px; font-family:var(--font-titre); font-weight:600; font-size:1.05rem; color:var(--muted); letter-spacing:.01em; }
.auth-logo{ font-family:var(--font-titre); font-style:italic; font-weight:700; font-size:1.5rem; color:var(--accent); line-height:1; }
.auth-titre{ font-size:clamp(2.1rem,3.6vw,3.25rem); line-height:1.08; letter-spacing:-.025em; font-weight:700; margin:0 0 20px; }
.auth-baseline{ color:var(--muted); font-size:1.05rem; line-height:1.6; max-width:44ch; margin:0 0 36px; }
.auth-stats{ display:flex; gap:36px; }
.auth-stats div{ display:flex; flex-direction:column; gap:3px; }
.auth-stats b{ font-family:var(--font-mono); font-size:1.7rem; font-weight:600; letter-spacing:-.02em; }
.auth-stats span{ font-size:.76rem; color:var(--muted); }

.auth-carte{ position:relative; background:var(--card); border:1px solid var(--bord); border-radius:var(--radius); padding:32px 30px; width:100%; box-shadow:var(--shadow-lg); }
.auth-onglets{ display:flex; gap:6px; margin-bottom:22px; background:var(--fond2); border:1px solid var(--bord); border-radius:var(--radius-sm); padding:3px; }
.auth-onglets button{ flex:1; background:none; border:none; padding:8px; border-radius:4px; color:var(--muted); font-weight:600; font-size:.9rem; transition:background .18s ease, color .18s ease; }
.auth-onglets button.active{ background:var(--accent); color:var(--on-accent); }
.auth-form label{ display:block; margin-bottom:14px; font-size:.83rem; color:var(--muted); }
.auth-form input{ display:block; width:100%; margin-top:6px; padding:10px 12px; background:var(--fond2); border:1px solid var(--bord); border-radius:var(--radius-sm); color:var(--texte); font-size:1rem; transition:border-color .18s ease; }
.auth-form input:focus{ outline:none; border-color:var(--accent); }
.form-msg{ min-height:1.2em; color:var(--ko); font-size:.86rem; margin:4px 0 12px; display:flex; align-items:center; gap:6px; }
.form-msg.ok{ color:var(--ok); }
@media (max-width:860px){
  .auth-motif{ display:none; }
  .auth-layout{ grid-template-columns:1fr; gap:34px; max-width:440px; }
  .auth-pitch{ text-align:center; padding:0; }
  .auth-pitch .auth-brand{ justify-content:center; }
  .auth-baseline{ margin-left:auto; margin-right:auto; }
  .auth-stats{ justify-content:center; }
}
.form-label{ font-size:.83rem; color:var(--muted); margin:14px 0 8px; }
.signup-niveaux{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:6px; }
.signup-niveaux button{ background:var(--fond2); border:1px solid var(--bord); border-radius:var(--radius-sm); padding:7px 12px; color:var(--texte); font-size:.83rem; transition:border-color .18s ease; }
.signup-niveaux button.sel{ border-color:var(--niv-c,var(--accent)); color:var(--niv-c,var(--accent)); }
.signup-avatars{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:6px; }
.signup-avatars button{ width:42px; height:42px; font-size:1.2rem; background:var(--fond2); border:1px solid var(--bord); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:border-color .18s ease; }
.signup-avatars button.sel{ border-color:var(--accent); color:var(--accent); }
.known-users{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; align-items:center; }
.known-lbl{ font-size:.76rem; color:var(--muted); width:100%; }
.known-users button{ background:var(--fond2); border:1px solid var(--bord); border-radius:20px; padding:5px 12px; font-size:.8rem; color:var(--texte); }

/* ---------------- Coquille applicative ---------------- */
#app{ min-height:100vh; display:flex; flex-direction:column; }
#topbar{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:12px 20px; background:var(--fond2); border-bottom:1px solid var(--bord); position:sticky; top:0; z-index:20; }
.tb-brand{ display:flex; align-items:center; gap:8px; font-family:var(--font-titre); font-weight:700; }
.tb-logo{ font-size:1.4rem; font-style:italic; color:var(--accent); }
.tb-niveaux{ display:flex; gap:6px; flex-wrap:wrap; flex:1; }
.niv-btn{ display:inline-flex; align-items:center; gap:6px; background:var(--fond); border:1px solid var(--bord); color:var(--muted); border-radius:20px; padding:6px 12px; font-size:.8rem; font-weight:600; transition:border-color .18s ease, color .18s ease; }
.niv-btn.actif{ border-color:var(--niv-c,var(--accent)); color:var(--niv-c,var(--accent)); }
.tb-joueur{ display:flex; align-items:center; gap:14px; }
.tb-rang{ display:flex; align-items:center; gap:6px; font-size:.83rem; font-weight:600; white-space:nowrap; color:var(--muted); }
.tb-xp{ width:110px; }
.tb-pieces{ display:flex; align-items:center; gap:5px; font-weight:600; font-family:var(--font-mono); color:var(--or); white-space:nowrap; }
.tb-avatar{ width:36px; height:36px; border-radius:50%; border:1px solid var(--bord); font-size:1.05rem; display:flex; align-items:center; justify-content:center; background:var(--card); transition:border-color .18s ease; }
.tb-avatar:hover{ border-color:var(--accent); }

#navbar{ display:flex; gap:2px; padding:6px 20px; background:var(--fond2); border-bottom:1px solid var(--bord); overflow-x:auto; position:sticky; top:63px; z-index:19; }
.nav-btn{ display:flex; align-items:center; gap:7px; background:none; border:none; color:var(--muted); padding:9px 14px; border-radius:var(--radius-sm); font-weight:500; font-size:.88rem; white-space:nowrap; transition:background .18s ease, color .18s ease; }
.nav-btn:hover{ color:var(--texte); }
.nav-btn.actif{ background:var(--card2); color:var(--accent); font-weight:600; }

#main{ flex:1; max-width:1080px; width:100%; margin:0 auto; padding:24px 20px 60px; }

/* ---------------- Cartes et grilles ---------------- */
.carte{ background:var(--card); border:1px solid var(--bord); border-radius:var(--radius); padding:20px; margin-bottom:16px; }
.grille-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
.grille-cartes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-bottom:18px; }
.stat-carte{ text-align:center; margin-bottom:0; }
.stat-val{ font-size:1.7rem; font-weight:600; font-family:var(--font-mono); color:var(--accent); font-variant-numeric:tabular-nums; }
.stat-lbl{ display:flex; align-items:center; justify-content:center; gap:5px; color:var(--muted); font-size:.83rem; margin-top:4px; }

.hero{ position:relative; overflow:hidden; background:var(--card); border:1px solid var(--bord); border-radius:var(--radius); padding:26px; margin-bottom:18px; }
.hero-motif{ position:absolute; right:-10px; bottom:-16px; width:340px; height:auto; max-width:52%; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; color:var(--hero-c,var(--accent)); opacity:.14; pointer-events:none; }
.hero-motif circle{ fill:currentColor; stroke:none; }
.hero>*:not(.hero-motif){ position:relative; }
.hero-sub{ color:var(--muted); }

.barre{ display:flex; align-items:center; gap:8px; }
.barre-fond{ flex:1; height:6px; background:var(--fond2); border-radius:3px; overflow:hidden; }
.barre-remplie{ height:100%; border-radius:3px; transition:width .3s; }
.barre-txt{ font-size:.76rem; color:var(--muted); font-family:var(--font-mono); white-space:nowrap; min-width:38px; text-align:right; }

.liste-chapitres{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px; }
.chap-mini{ text-align:left; background:var(--card2); border:1px solid var(--bord); border-radius:var(--radius-sm); padding:11px 13px; color:var(--texte); font-size:.9rem; font-weight:500; display:flex; flex-direction:column; gap:8px; transition:border-color .18s ease; }
button.chap-mini:hover{ border-color:var(--accent); }

.section-titre{ margin-top:8px; }

/* ---------------- Cartes chapitre / mode ---------------- */
.carte-chapitre{ text-align:left; display:flex; flex-direction:column; gap:5px; transition:border-color .18s ease, transform .18s ease; }
.carte-chapitre:hover{ border-color:var(--accent); transform:translateY(-1px); }
.cc-icon{ font-size:1.5rem; font-family:var(--font-titre); color:var(--accent); }
.cc-nom{ font-weight:600; }
.cc-dom{ color:var(--muted); font-size:.78rem; }

.carte-mode{ text-align:left; display:flex; flex-direction:column; gap:5px; border-top:2px solid var(--mode-c,var(--accent)); transition:border-color .18s ease, transform .18s ease; }
.carte-mode:hover{ transform:translateY(-1px); }
.cm-icon{ color:var(--mode-c,var(--accent)); }
.cm-icon .icone{ vertical-align:middle; }
.cm-nom{ font-weight:600; }
.cm-tag{ display:inline-block; background:var(--fond2); border:1px solid var(--bord); border-radius:20px; padding:2px 10px; font-size:.72rem; color:var(--muted); width:fit-content; font-family:var(--font-mono); }
.cm-desc{ color:var(--muted); font-size:.84rem; margin:4px 0 0; }
.carte-examen{ grid-column:1 / -1; }

/* ---------------- Page cours / lecon ---------------- */
.accroche{ font-size:1.02rem; color:var(--muted); font-style:italic; border-left:2px solid var(--accent); padding-left:15px; }
.lecon-bloc h2{ display:flex; align-items:center; gap:9px; }
.vocab{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin:0; }
.vocab dt{ font-weight:700; color:var(--accent2); }
.vocab dd{ margin:2px 0 0; color:var(--muted); font-size:.9rem; }
.section-cours{ margin-bottom:16px; }
.section-cours h3{ color:var(--accent2); }
.section-cours ul{ padding-left:22px; }
.exemple{ background:var(--card2); border:1px solid var(--bord); border-radius:var(--radius-sm); padding:14px; margin-bottom:12px; }
.exemple .enonce{ font-weight:600; }
.exemple .reponse-finale{ font-weight:700; color:var(--ok); margin:8px 0 0; }
.methode{ padding-left:22px; }
.demonstration{ background:var(--card2); border:1px solid var(--bord); border-left:3px solid var(--or); border-radius:var(--radius-sm); padding:16px; margin-bottom:14px; }
.demonstration .preuve{ padding-left:22px; }
.demonstration .preuve li{ margin-bottom:8px; }
.demonstration .conclusion{ font-weight:600; color:var(--or); margin-top:10px; }
.astuces li,.pieges li,.conseils li{ margin-bottom:6px; }
.pieges{ color:var(--ko); }
.videos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; }
.video-carte{ display:flex; align-items:flex-start; gap:8px; flex-direction:column; background:var(--card2); border:1px solid var(--bord); border-radius:var(--radius-sm); padding:12px 14px; text-decoration:none; color:var(--texte); transition:border-color .18s ease; }
.video-carte:hover{ border-color:var(--accent); }
.video-carte span{ color:var(--muted); font-size:.8rem; }
.recap{ font-weight:600; background:var(--card2); padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--bord); }
.lecon-actions{ text-align:center; margin-top:10px; }

/* ---------------- Partie (jeu) ---------------- */
.partie-entete{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.partie-titre{ display:flex; align-items:center; gap:8px; font-weight:600; }
.partie-info{ display:flex; gap:16px; font-weight:600; font-family:var(--font-mono); }
.partie-info span{ display:flex; align-items:center; gap:5px; }
.vies{ color:var(--ko); }
.question-carte{ background:var(--card); border:1px solid var(--bord); border-radius:var(--radius); padding:26px; }
.q-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.q-tag{ background:var(--fond2); border:1px solid var(--bord); color:var(--muted); border-radius:20px; padding:4px 12px; font-size:.76rem; font-weight:600; }
.q-tag.q-niveau{ color:var(--accent2); }
.q-sub{ display:flex; align-items:center; gap:6px; background:var(--card2); border:1px solid var(--bord); border-radius:var(--radius-sm); padding:10px 12px; font-size:.86rem; color:var(--muted); }
.q-prompt{ font-size:1.2rem; font-weight:500; margin:10px 0 20px; line-height:1.55; }

.answer-box{ display:flex; gap:10px; margin-bottom:14px; }
.answer-box input{ flex:1; padding:13px 15px; font-size:1.1rem; background:var(--fond2); border:1px solid var(--bord); border-radius:var(--radius-sm); color:var(--texte); caret-color:var(--accent); font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.answer-box input:focus{ outline:none; border-color:var(--accent); }
.clavier{ display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.touche{ background:var(--card2); border:1px solid var(--bord); border-radius:var(--radius-sm); padding:13px 0; font-size:1rem; font-weight:500; color:var(--texte); font-family:var(--font-mono); transition:border-color .1s ease; }
.touche:hover{ border-color:var(--accent); }
.touche:active{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.touche-del{ color:var(--ko); }

.qcm-choix{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
.qcm-btn{ background:var(--card2); border:1px solid var(--bord); border-radius:var(--radius-sm); padding:15px; font-size:.98rem; font-weight:500; color:var(--texte); text-align:left; transition:border-color .18s ease; }
.qcm-btn:hover{ border-color:var(--accent); }

.feedback{ margin-top:18px; border-radius:var(--radius-sm); padding:16px; border:1px solid var(--bord); }
.feedback-ok{ background:var(--card2); border-color:var(--ok); }
.feedback-ko{ background:var(--card2); border-color:var(--ko); }
.fb-titre{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:1.05rem; }
.fb-gain{ display:flex; align-items:center; gap:5px; color:var(--or); font-weight:700; font-family:var(--font-mono); }
.fb-explain{ color:var(--muted); }

/* ---------------- Bilan ---------------- */
.bilan-carte{ max-width:700px; margin:0 auto; text-align:center; }
.bilan-carte h1{ display:flex; align-items:center; justify-content:center; gap:9px; }
.bilan-score{ font-size:2.4rem; font-weight:600; font-family:var(--font-mono); margin:10px 0 20px; color:var(--accent); }
.bilan-score span{ font-size:1.05rem; color:var(--muted); }
.bilan-raisons{ text-align:left; color:var(--muted); font-size:.9rem; }
.bilan-montee{ display:flex; align-items:center; justify-content:center; gap:8px; background:var(--card2); border:1px solid var(--accent); color:var(--texte); border-radius:var(--radius-sm); padding:12px; font-weight:600; margin:14px 0; }
.bilan-succes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin:14px 0; }
.bilan-journal{ text-align:left; margin:20px 0; }
.journal-item{ padding:10px; border-left:2px solid var(--bord); margin-bottom:8px; }
.journal-item.ok{ border-color:var(--ok); }
.journal-item.ko{ border-color:var(--ko); }
.ji-rep{ font-size:.85rem; color:var(--muted); }
.bilan-actions{ display:flex; gap:12px; justify-content:center; margin-top:14px; }

/* ---------------- Boutique ---------------- */
.cat-onglets{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.cat-btn{ display:inline-flex; align-items:center; gap:6px; background:var(--card2); border:1px solid var(--bord); border-radius:20px; padding:7px 14px; color:var(--muted); font-size:.85rem; font-weight:600; transition:border-color .18s ease, color .18s ease; }
.cat-btn.actif{ border-color:var(--accent); color:var(--accent); }
.grille-boutique{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.item-carte{ background:var(--card); border:1px solid var(--bord); border-radius:var(--radius); padding:14px; text-align:center; display:flex; flex-direction:column; gap:10px; align-items:center; transition:border-color .18s ease; }
.item-carte:hover{ border-color:var(--accent); }
.item-carte.equipe{ border-color:var(--ok); }
.item-apercu{ width:100%; height:56px; border-radius:var(--radius-sm); border:1px solid var(--bord); }
.item-emoji{ display:flex; align-items:center; justify-content:center; font-size:1.7rem; font-family:var(--font-titre); background:var(--fond2); }
.item-titre{ display:flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:600; background:var(--fond2); padding:0 8px; }
.item-swatch{ background:var(--fond2); }
.item-nom{ font-weight:600; font-size:.88rem; }
.item-rank{ display:flex; align-items:center; gap:5px; font-size:.76rem; color:var(--muted); }

/* ---------------- Profil ---------------- */
.profil-carte{ text-align:center; }
.profil-banniere{ height:96px; border-radius:var(--radius-sm); border:1px solid var(--bord); display:flex; align-items:center; justify-content:center; margin-bottom:-36px; }
.profil-avatar{ width:72px; height:72px; border-radius:50%; border:2px solid var(--bord); display:flex; align-items:center; justify-content:center; font-size:1.8rem; font-family:var(--font-titre); background:var(--card); }
.profil-titre{ margin-top:42px; font-weight:600; color:var(--accent2); }
.profil-rang{ display:flex; align-items:center; justify-content:center; gap:7px; font-weight:600; }
.grille-succes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.succes-badge{ display:flex; align-items:flex-start; gap:8px; background:var(--card2); border:1px solid var(--or); border-radius:var(--radius-sm); padding:12px; font-size:.85rem; flex-direction:column; }
.succes-badge span{ color:var(--muted); font-size:.76rem; }
.succes-badge.verrouille{ opacity:.4; border-color:var(--bord); }

/* ---------------- Toasts ---------------- */
#toasts{ position:fixed; bottom:20px; right:20px; z-index:100; display:flex; flex-direction:column; gap:10px; max-width:340px; }
.toast{ display:flex; align-items:center; gap:7px; background:var(--card2); border:1px solid var(--bord); border-radius:var(--radius-sm); padding:12px 16px; box-shadow:var(--shadow-md); opacity:0; transform:translateY(6px); transition:opacity .2s, transform .2s; font-size:.88rem; }
.toast.show{ opacity:1; transform:translateY(0); }
.toast-gold{ border-color:var(--or); }
.toast-erreur{ border-color:var(--ko); }
.toast-info{ border-color:var(--accent); }

/* ---------------- KaTeX : coherence avec le theme ---------------- */
.katex{ color:inherit; font-size:1.03em; }

/* ---------------- Outils flottants (calculatrice / notes / aide) ---------------- */
#outils-flottants{ position:fixed; right:20px; bottom:20px; display:flex; flex-direction:column; gap:9px; z-index:90; }
.outil-fab{ width:48px; height:48px; border-radius:50%; background:var(--accent); border:1px solid var(--accent); color:var(--on-accent); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); transition:filter .18s ease; }
.outil-fab:hover{ filter:brightness(1.08); }
.outil-fab:active{ transform:translateY(1px); }

/* ---------------- Fenetre modale generique ---------------- */
.modal-fond{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:200; padding:20px; }
.modal-boite{ background:var(--card); border:1px solid var(--bord); border-radius:var(--radius); max-width:560px; width:100%; max-height:88vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); }
.modal-entete{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--bord); flex-shrink:0; }
.modal-entete h2{ display:flex; align-items:center; gap:8px; margin:0; font-size:1.1rem; }
.modal-fermer{ background:var(--fond2); border:1px solid var(--bord); border-radius:50%; width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:var(--muted); flex-shrink:0; transition:color .18s ease, border-color .18s ease; }
.modal-fermer:hover{ color:var(--ko); border-color:var(--ko); }
.modal-corps{ padding:20px; overflow-y:auto; }

/* ---------------- Calculatrice ---------------- */
.calc-affichage{ background:var(--fond2); border:1px solid var(--bord); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:14px; text-align:right; }
.calc-mode{ font-size:.7rem; color:var(--muted); text-align:left; margin-bottom:6px; letter-spacing:.03em; font-family:var(--font-mono); }
.calc-ecran{ font-family:var(--font-mono); font-size:1.6rem; font-weight:500; word-break:break-all; font-variant-numeric:tabular-nums; min-height:1.3em; }
.calc-msg-erreur{ display:flex; align-items:center; gap:5px; color:var(--ko); font-size:.76rem; text-align:left; margin-top:8px; }
.calc-affichage.calc-erreur{ border-color:var(--ko); }
.calc-affichage.calc-erreur .calc-ecran{ color:var(--ko); }
.calc-rangee{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.calc-btn{ border:1px solid var(--bord); background:var(--card2); color:var(--texte); border-radius:5px; padding:9px 4px; font-size:.86rem; font-weight:500; font-family:var(--font-mono); transition:border-color .1s ease; }
.calc-btn:hover{ border-color:var(--accent); }
.calc-btn:active{ transform:translateY(1px); }
.calc-btn-mode, .calc-btn-mem{ flex:1; min-width:58px; font-size:.74rem; color:var(--muted); }
.calc-btn-sci{ flex:1; min-width:50px; font-size:.8rem; color:var(--accent2); }
.calc-grille{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.calc-btn-chiffre{ font-size:1.1rem; }
.calc-btn-op{ color:var(--accent2); font-size:1.1rem; }
.calc-btn-egal{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-size:1.1rem; }
.calc-btn-clear{ color:var(--ko); }

/* ---------------- Notes ---------------- */
.notes-actions{ margin-bottom:14px; }
.notes-liste{ display:flex; flex-direction:column; gap:10px; }
.note-carte{ text-align:left; background:var(--card2); border:1px solid var(--bord); border-radius:var(--radius-sm); padding:12px 14px; transition:border-color .18s ease; }
.note-carte:hover{ border-color:var(--accent); }
.note-titre{ font-weight:600; }
.note-apercu{ color:var(--muted); font-size:.85rem; margin:4px 0; white-space:pre-wrap; }
.note-date{ font-size:.72rem; color:var(--muted); font-family:var(--font-mono); }
.note-editeur{ display:flex; flex-direction:column; gap:10px; }
.note-titre-input{ font-size:1.05rem; font-weight:600; background:var(--fond2); border:1px solid var(--bord); border-radius:var(--radius-sm); padding:10px 12px; color:var(--texte); }
.note-titre-input:focus, .note-contenu-input:focus{ outline:none; border-color:var(--accent); }
.note-contenu-input{ min-height:220px; background:var(--fond2); border:1px solid var(--bord); border-radius:var(--radius-sm); padding:12px; color:var(--texte); font-family:inherit; font-size:.95rem; resize:vertical; line-height:1.6; }
.note-editeur-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.note-sauve-info{ font-size:.78rem; }
.note-danger{ color:var(--ko); border-color:var(--ko); }

/* ---------------- Aide ---------------- */
.aide-contenu{ display:flex; flex-direction:column; gap:18px; }
.aide-section h3{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.aide-section p{ color:var(--muted); margin:0; line-height:1.6; }
.aide-section code{ background:var(--fond2); border:1px solid var(--bord); padding:1px 6px; border-radius:4px; font-size:.88em; font-family:var(--font-mono); color:var(--accent2); }

/* ---------------- Geometrie (outil interactif) ---------------- */
.page-title{ display:flex; align-items:center; gap:10px; }
.geo-toolbar{ display:flex; flex-wrap:wrap; gap:6px; margin:14px 0; }
.geo-outil-btn{ display:inline-flex; align-items:center; gap:6px; background:var(--card2); border:1px solid var(--bord); border-radius:var(--radius-sm); padding:8px 13px; font-size:.85rem; color:var(--muted); transition:border-color .18s ease, color .18s ease; }
.geo-outil-btn:hover{ color:var(--texte); }
.geo-outil-btn.active{ border-color:var(--accent); color:var(--accent); }
.geo-fonctions-bar{ display:flex; gap:8px; margin-bottom:10px; }
.geo-fonctions-bar input{ flex:1; padding:9px 12px; background:var(--fond2); border:1px solid var(--bord); border-radius:var(--radius-sm); color:var(--texte); font-family:var(--font-mono); }
.geo-fonctions-bar input:focus{ outline:none; border-color:var(--accent); }
.geo-fonctions-liste{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.geo-fonction-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--card2); border:1px solid var(--bord); border-radius:20px; padding:4px 10px; font-size:.82rem; font-family:var(--font-mono); }
.geo-fonction-chip i{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.geo-fonction-chip button{ background:none; border:none; color:var(--muted); display:flex; }
.geo-consigne{ color:var(--muted); font-size:.86rem; }
.geo-canvas-wrap{ background:var(--card); border:1px solid var(--bord); border-radius:var(--radius); overflow:hidden; }
.geo-svg{ width:100%; height:420px; display:block; }
.geo-aide{ display:flex; align-items:flex-start; gap:7px; color:var(--muted); font-size:.85rem; margin-top:10px; }

/* ---------------- Responsive / mobile ---------------- */
@media (max-width:720px){
  #topbar{ padding:10px 12px; gap:10px; }
  .tb-xp{ display:none; }
  .tb-niveaux{ order:3; width:100%; }
  #navbar{ padding:6px 10px; top:auto; }
  .nav-btn{ padding:9px 10px; font-size:.8rem; }
  #main{ padding:16px 12px 50px; }
  .q-prompt{ font-size:1.05rem; }
  .touche{ padding:15px 0; font-size:1.05rem; }
  .clavier{ grid-template-columns:repeat(5,1fr); gap:6px; }
  .answer-box input{ font-size:16px; }
  h1{ font-size:1.35rem; }
  .carte{ padding:16px; }
  .hero-motif{ width:220px; opacity:.1; }
  #outils-flottants{ right:14px; bottom:14px; gap:8px; }
  .outil-fab{ width:44px; height:44px; }
  .modal-boite{ max-height:92vh; }
  .modal-corps{ padding:14px; }
  .calc-ecran{ font-size:1.3rem; }
  .calc-btn{ padding:11px 4px; font-size:.8rem; }
  .calc-btn-chiffre, .calc-btn-op, .calc-btn-egal{ font-size:1.02rem; }
  .note-contenu-input{ min-height:160px; }
  .geo-svg{ height:300px; }
}