/* ===========================================================
   RÉVISE TON ECOM — charte Pen'UP 2026
   Palette : ambre #f8b133 · jaune #ffd313 · bleu #3f60aa
            corail #e94d44 · rouge #cd2a24 · crème #fff8ea
   Fontes : Urbanist (texte) + Londrina Solid (titres)
   =========================================================== */

:root{
  --ambre:#f8b133; --jaune:#ffd313; --bleu:#3f60aa; --corail:#e94d44;
  --rouge:#cd2a24; --creme:#fff8ea;
  --bleu-d:#2c4880; --ink:#22305a; --muted:#6b7795;
  --card:#ffffff; --line:#e7e2d4;
  --shadow:0 10px 30px -12px rgba(34,48,90,.28);
  --shadow-sm:0 4px 14px -6px rgba(34,48,90,.22);
  --r:18px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:'Urbanist',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 12% -8%, #fef3d6 0, transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, #e7eefb 0, transparent 55%),
    var(--creme);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Header ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px clamp(16px,4vw,40px);
  max-width:1080px;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand-logo{
  font-size:30px;width:54px;height:54px;flex:0 0 54px;
  display:grid;place-items:center;border-radius:16px;
  background:linear-gradient(135deg,var(--bleu),var(--bleu-d));
  box-shadow:var(--shadow-sm);
}
.brand-txt{min-width:0}
.brand-txt h1{
  font-family:'Londrina Solid',cursive;font-weight:900;
  font-size:clamp(24px,4.4vw,34px);line-height:.95;margin:0;letter-spacing:.5px;
  color:var(--bleu);
}
.brand-txt h1 span{color:var(--corail)}
.brand-txt p{margin:3px 0 0;font-size:12.5px;color:var(--muted);font-weight:600}

.topstats{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.stat{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:8px 12px;text-align:center;box-shadow:var(--shadow-sm);min-width:64px;
}
.stat b{display:block;font-size:18px;font-weight:800;color:var(--bleu);line-height:1}
.stat small{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px}

/* ---------- Tabs ---------- */
.tabs{
  position:sticky;top:0;z-index:30;
  display:flex;gap:6px;justify-content:center;
  padding:10px clamp(12px,4vw,40px);
  max-width:1080px;margin:0 auto;
  backdrop-filter:blur(8px);
}
.tab{
  font-family:'Urbanist';font-weight:800;font-size:15px;cursor:pointer;
  border:none;background:transparent;color:var(--muted);
  padding:10px 18px;border-radius:999px;transition:.18s;
}
.tab:hover{color:var(--bleu)}
.tab.active{background:var(--bleu);color:#fff;box-shadow:var(--shadow-sm)}

/* ---------- Chapter filter ---------- */
.chapfilter{
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  padding:4px clamp(12px,4vw,40px) 6px;max-width:1080px;margin:0 auto;
}
.chip{
  font-family:'Urbanist';font-weight:700;font-size:13.5px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);
  padding:7px 15px;border-radius:999px;transition:.16s;
}
.chip:hover{border-color:var(--bleu)}
.chip.active{background:var(--jaune);border-color:var(--ambre);color:#5a4408}

/* ---------- Layout ---------- */
main{max-width:1080px;margin:0 auto;padding:14px clamp(14px,4vw,40px) 60px}
.view{display:none;animation:fade .25s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Cours / glossaire ---------- */
.search-wrap{margin:6px 0 16px}
#search{
  width:100%;font-family:'Urbanist';font-size:16px;font-weight:600;
  padding:13px 18px;border-radius:14px;border:1.5px solid var(--line);
  background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm);outline:none;
}
#search:focus{border-color:var(--bleu)}

.chap-head{
  font-family:'Londrina Solid';font-weight:900;font-size:22px;
  margin:22px 0 12px;color:var(--bleu);display:flex;align-items:center;gap:10px;
}
.chap-head .ct{font-family:'Urbanist';font-size:12px;font-weight:700;color:var(--muted);
  background:var(--card);border:1px solid var(--line);padding:3px 9px;border-radius:999px}

.term-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:12px;box-shadow:var(--shadow-sm);overflow:hidden;
}
.term-head{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:15px 18px;user-select:none;
}
.term-head .tnum{
  flex:0 0 30px;height:30px;display:grid;place-items:center;border-radius:9px;
  font-weight:800;font-size:13px;color:#fff;background:var(--bleu);
}
.term-card.meta .tnum{background:var(--corail)}
.term-card.copy .tnum{background:var(--ambre);color:#5a4408}
.term-card.cro .tnum{background:#36b37e}
.term-head h3{margin:0;font-size:16.5px;font-weight:800;flex:1;line-height:1.2}
.term-head .caret{color:var(--muted);font-size:13px;transition:.2s;flex:0 0 auto}
.term-card.open .caret{transform:rotate(180deg)}
.term-body{display:none;padding:0 18px 18px;border-top:1px solid var(--line)}
.term-card.open .term-body{display:block;animation:fade .2s}
.term-body .aka{font-size:12.5px;color:var(--muted);font-weight:700;margin:12px 0 0}

.field{margin-top:13px}
.field .lab{
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:var(--bleu);display:flex;align-items:center;gap:6px;margin-bottom:4px;
}
.field .val{font-size:14.5px;line-height:1.5;white-space:pre-line}
.field.formula .val{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;
  background:#f4f1e6;border:1px solid var(--line);border-radius:10px;padding:10px 12px;
}
.field.example .val{background:#eef3fc;border-left:3px solid var(--bleu);padding:9px 12px;border-radius:0 8px 8px 0}
.field.piege .lab{color:var(--rouge)}
.field.piege .val{background:#fdeceb;border-left:3px solid var(--corail);padding:9px 12px;border-radius:0 8px 8px 0}
.field.benchmark .lab{color:#8a6d10}
.field.benchmark .val{background:#fff6da;border-left:3px solid var(--ambre);padding:9px 12px;border-radius:0 8px 8px 0}
.empty{text-align:center;color:var(--muted);padding:40px;font-weight:600}

/* ---------- Révision (Anki) ---------- */
.srs-header{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:6px 0 18px;
}
.srs-pill{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:8px 14px;font-weight:800;font-size:14px;box-shadow:var(--shadow-sm);
  display:flex;align-items:center;gap:7px;
}
.srs-pill .dot{width:9px;height:9px;border-radius:50%}
.srs-pill.new .dot{background:var(--bleu)}
.srs-pill.due .dot{background:var(--corail)}
.srs-pill.done .dot{background:#36b37e}

.srs-stage{display:flex;justify-content:center;perspective:1600px;margin-bottom:18px}
.flashcard{
  width:100%;max-width:600px;min-height:330px;cursor:pointer;
  transition:transform .15s;outline:none;
}
.flashcard:active{transform:scale(.992)}
.flashcard:focus-visible{box-shadow:0 0 0 3px rgba(63,96,170,.4);border-radius:24px}
.fc-inner{
  position:relative;width:100%;min-height:330px;
  transition:transform .55s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d;
}
.flashcard.flipped .fc-inner{transform:rotateY(180deg)}
.fc-face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:24px;padding:30px;display:flex;flex-direction:column;
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.fc-front{
  align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(160deg,#fff,#fbf6e8);
}
.fc-badge{
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;
  padding:5px 12px;border-radius:999px;margin-bottom:18px;
}
.fc-badge.ecom{background:#e4ecfb;color:var(--bleu)}
.fc-badge.meta{background:#fce3e1;color:var(--rouge)}
.fc-badge.copy{background:#fdeecb;color:#8a6d10}
.fc-badge.cro{background:#dff3e9;color:#1c6e49}
.fc-front h2{
  font-family:'Londrina Solid';font-weight:900;font-size:clamp(22px,4.6vw,30px);
  margin:0;color:var(--ink);line-height:1.12;
}
.fc-hint{margin-top:22px;font-size:12.5px;color:var(--muted);font-weight:600}
.fc-back{
  transform:rotateY(180deg);background:var(--card);overflow:hidden;
}
.fc-back-scroll{overflow-y:auto;max-height:64vh;padding-right:4px}
.fc-back h3{font-family:'Urbanist';font-size:18px;font-weight:800;margin:0 0 2px;color:var(--bleu)}

.srs-controls{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;max-width:600px;margin:0 auto}
.rate{
  flex:1 1 120px;font-family:'Urbanist';font-weight:800;font-size:14px;cursor:pointer;
  border:none;border-radius:14px;padding:14px 8px;color:#fff;transition:.15s;
  display:flex;flex-direction:column;gap:2px;align-items:center;box-shadow:var(--shadow-sm);
}
.rate small{font-size:10.5px;font-weight:700;opacity:.85}
.rate:hover{transform:translateY(-2px)}
.rate.again{background:var(--rouge)}
.rate.hard{background:var(--ambre);color:#5a4408}
.rate.good{background:var(--bleu)}
.rate.easy{background:#36b37e}
.srs-controls .reveal-btn{
  flex:1 1 100%;background:var(--jaune);color:#5a4408;
}

.srs-done{text-align:center;padding:40px 20px}
.srs-done .big{font-size:54px}
.srs-done h2{font-family:'Londrina Solid';font-size:28px;color:var(--bleu);margin:10px 0 6px}
.srs-done p{color:var(--muted);font-weight:600;max-width:440px;margin:0 auto 18px}

/* ---------- Buttons ---------- */
.btn-primary{
  font-family:'Urbanist';font-weight:800;font-size:15px;cursor:pointer;
  border:none;border-radius:14px;padding:14px 26px;color:#fff;
  background:linear-gradient(135deg,var(--bleu),var(--bleu-d));
  box-shadow:var(--shadow-sm);transition:.15s;
}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{
  font-family:'Urbanist';font-weight:700;font-size:13.5px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);
  padding:10px 18px;border-radius:12px;transition:.15s;
}
.btn-ghost:hover{border-color:var(--bleu);color:var(--bleu)}

/* ---------- Quiz ---------- */
.quiz-setup{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:30px;text-align:center;max-width:560px;margin:14px auto;
}
.quiz-setup h2{font-family:'Londrina Solid';font-size:30px;color:var(--bleu);margin:0 0 6px}
.quiz-setup p{color:var(--muted);font-weight:600;margin:0 0 22px}
.qz-label{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:10px}
.qz-counts{display:flex;gap:8px;justify-content:center;margin-bottom:24px}
.qcount{min-width:64px}

.quiz-play{max-width:600px;margin:14px auto}
.qz-progress{height:8px;background:var(--line);border-radius:999px;overflow:hidden;margin-bottom:12px}
#qz-bar{height:100%;width:0;background:linear-gradient(90deg,var(--ambre),var(--jaune));transition:.3s}
.qz-meta{display:flex;justify-content:space-between;font-weight:800;font-size:13px;color:var(--muted);margin-bottom:14px}
#qz-score{color:var(--bleu)}
.qz-question{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:22px;margin-bottom:14px;
}
.qz-question .qz-kind{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--corail);margin-bottom:8px}
.qz-question .qz-text{font-size:17px;font-weight:700;line-height:1.45;white-space:pre-line}
.qz-options{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.qz-opt{
  text-align:left;font-family:'Urbanist';font-weight:600;font-size:14.5px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);
  padding:13px 16px;border-radius:13px;transition:.13s;line-height:1.35;
}
.qz-opt:hover{border-color:var(--bleu)}
.qz-opt.correct{background:#e7f7ef;border-color:#36b37e;color:#1c6e49}
.qz-opt.wrong{background:#fdeceb;border-color:var(--corail);color:var(--rouge)}
.qz-opt.disabled{cursor:default;pointer-events:none}
.qz-opt .mark{font-weight:800;margin-right:8px}

.quiz-end{text-align:center;padding:34px 20px;max-width:560px;margin:0 auto}
.quiz-end .big{font-size:58px}
.quiz-end h2{font-family:'Londrina Solid';font-size:30px;color:var(--bleu);margin:8px 0}
.quiz-end .scoreline{font-size:20px;font-weight:800;margin-bottom:8px}
.quiz-end p{color:var(--muted);font-weight:600;margin-bottom:20px}

/* ---------- Footer ---------- */
.foot{
  text-align:center;padding:26px 20px 36px;color:var(--muted);
  font-size:11.5px;font-weight:600;max-width:760px;margin:0 auto;line-height:1.5;
}

@media (max-width:560px){
  .topstats{display:none}
  .fc-face{padding:22px}
  .rate{flex:1 1 46%}
}