/* =========================================================
   Livret du Citoyen — Révision ludique
   AF-CRIA 36
   ========================================================= */

:root{
  --ink:#1c2440;
  --ink-soft:#2f3a63;
  --paper:#f6f1e4;
  --paper-dark:#eae2cc;
  --paper-line:#d8cdaa;
  --rouge:#a83a2e;
  --bleu:#2d4a7a;
  --or:#b3893f;
  --or-light:#e4c98a;
  --vert:#3f7d5c;
  --ecru-text:#3a3120;
  --shadow:0 10px 30px rgba(28,36,64,.18);
  --shadow-sm:0 4px 12px rgba(28,36,64,.14);
  --radius:14px;
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'Courier New',ui-monospace,monospace;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ecru-text);
  background:
    radial-gradient(1200px 600px at 10% -10%, #26315c 0%, transparent 60%),
    radial-gradient(1000px 500px at 110% 0%, #3a2a2a 0%, transparent 55%),
    var(--ink);
  min-height:100%;
  -webkit-font-smoothing:antialiased;
}

button{font-family:inherit;}
a{color:inherit;}

/* ---------- App shell (the "livret") ---------- */
#app-shell{
  max-width:880px;
  margin:0 auto;
  min-height:100vh;
  background:var(--paper);
  box-shadow:0 0 60px rgba(0,0,0,.45);
  position:relative;
  display:flex;
  flex-direction:column;
}

/* ribbon header */
.livret-header{
  background:
    linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 100%);
  color:var(--paper);
  padding:22px 24px 18px;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
}
.livret-header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:6px;
  background:repeating-linear-gradient(90deg, var(--bleu) 0 12px, var(--paper) 12px 16px, var(--rouge) 16px 28px, var(--paper) 28px 32px);
  opacity:.9;
}
.header-row{display:flex; align-items:center; gap:14px;}
.crest{
  width:40px;height:40px;flex-shrink:0;
}
.header-titles{flex:1; min-width:0;}
.eyebrow{
  font-family:var(--mono);
  letter-spacing:.14em;
  font-size:11px;
  text-transform:uppercase;
  color:var(--or-light);
  margin:0 0 3px;
}
.h-title{
  font-family:var(--serif);
  font-size:22px;
  margin:0;
  font-weight:700;
  letter-spacing:.01em;
}
.back-btn{
  background:none;border:1px solid rgba(246,241,228,.35);
  color:var(--paper);
  border-radius:999px;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  transition:background .15s, transform .15s;
}
.back-btn:hover{background:rgba(246,241,228,.15); transform:translateX(-2px);}
.back-btn svg{width:18px;height:18px;}

.stamp-mini{
  width:34px;height:34px;flex-shrink:0;
  opacity:.9;
}

/* ---------- Main scroll area ---------- */
#view{
  flex:1;
  padding:22px 22px 90px;
  position:relative;
}

/* ---------- Cover / Home ---------- */
.cover{
  text-align:center;
  padding:18px 6px 8px;
}
.cover-crest{width:90px;height:90px;margin:0 auto 14px;}
.cover-eyebrow{
  font-family:var(--mono);
  letter-spacing:.18em;
  font-size:12px;
  text-transform:uppercase;
  color:var(--bleu);
}
.cover-title{
  font-family:var(--serif);
  font-size:34px;
  margin:6px 0 2px;
  color:var(--ink);
  line-height:1.1;
}
.cover-sub{
  font-size:15px;
  color:#6b6350;
  margin:0 0 20px;
}
.progress-band{
  display:flex; justify-content:center; align-items:center; gap:8px;
  margin:6px 0 24px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-soft);
}
.progress-track{
  height:6px; width:160px; border-radius:99px;
  background:var(--paper-dark);
  overflow:hidden;
  border:1px solid var(--paper-line);
}
.progress-fill{height:100%; background:linear-gradient(90deg,var(--bleu),var(--vert)); border-radius:99px;}

.chapter-list{
  display:flex; flex-direction:column; gap:12px;
  text-align:left;
}
.chapter-card{
  background:#fffdf7;
  border:1px solid var(--paper-line);
  border-radius:var(--radius);
  padding:14px 14px;
  display:flex; align-items:center; gap:14px;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .12s, box-shadow .12s;
  position:relative;
}
.chapter-card:hover{transform:translateY(-2px); box-shadow:var(--shadow);}
.chapter-card:active{transform:translateY(0px) scale(.99);}
.chapter-num{
  font-family:var(--serif);
  font-size:26px;
  color:var(--paper-line);
  width:38px;
  flex-shrink:0;
  text-align:center;
}
.chapter-icon{
  width:44px;height:44px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;
  background:var(--paper-dark);
}
.chapter-icon svg{width:26px;height:26px;}
.chapter-info{flex:1; min-width:0;}
.chapter-info h3{margin:0 0 2px; font-family:var(--serif); font-size:17px; color:var(--ink);}
.chapter-info p{margin:0; font-size:12.5px; color:#7a7259;}
.chapter-stamp{
  width:40px;height:40px;flex-shrink:0;
  opacity:.18;
  transition:opacity .2s, transform .2s;
}
.chapter-card.mastered .chapter-stamp{opacity:1; transform:rotate(-8deg) scale(1);}

.footer-credit{
  text-align:center;
  font-size:11px;
  color:#8a8168;
  margin-top:26px;
  font-family:var(--mono);
  letter-spacing:.03em;
}

/* ---------- Chapter page ---------- */
.chapter-hero{
  text-align:center;
  margin-bottom:18px;
}
.chapter-hero .chapter-icon{margin:0 auto 10px; width:56px;height:56px;}
.chapter-hero .chapter-icon svg{width:32px;height:32px;}
.chapter-hero h2{font-family:var(--serif); font-size:24px; margin:0 0 4px; color:var(--ink);}
.chapter-hero .sub{color:#7a7259; font-size:13.5px; margin:0 0 12px;}
.chapter-summary{
  background:var(--paper-dark);
  border-left:4px solid var(--or);
  padding:12px 14px;
  border-radius:6px;
  font-size:13.5px;
  line-height:1.55;
  color:var(--ecru-text);
}

.mode-tabs{
  display:flex; gap:8px;
  margin:18px 0 16px;
  flex-wrap:wrap;
}
.mode-tab{
  flex:1;
  min-width:120px;
  border:1px solid var(--paper-line);
  background:#fffdf7;
  border-radius:10px;
  padding:10px 8px;
  text-align:center;
  cursor:pointer;
  font-size:12.5px;
  color:var(--ink-soft);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  transition:background .15s, border-color .15s, transform .1s;
}
.mode-tab svg{width:20px;height:20px;}
.mode-tab .best{font-family:var(--mono); font-size:10.5px; color:var(--or);}
.mode-tab:hover{transform:translateY(-1px); border-color:var(--or);}
.mode-tab.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.mode-tab.active .best{color:var(--or-light);}

/* ---------- Flashcards ---------- */
.fc-wrap{display:flex; flex-direction:column; align-items:center; gap:16px;}
.fc-progress{font-family:var(--mono); font-size:12px; color:var(--ink-soft);}
.flip-card{
  width:100%; max-width:460px; height:230px;
  perspective:1200px;
  cursor:pointer;
}
.flip-inner{
  position:relative; width:100%; height:100%;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
  transform-style:preserve-3d;
}
.flip-card.flipped .flip-inner{transform:rotateY(180deg);}
.flip-face{
  position:absolute; inset:0;
  border-radius:16px;
  backface-visibility:hidden;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:26px;
  box-shadow:var(--shadow);
  border:1px solid var(--paper-line);
}
.flip-front{
  background:#fffdf7;
  color:var(--ink);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.35;
}
.flip-front::before{
  content:"?";
  position:absolute; top:12px; left:16px;
  font-family:var(--mono); font-size:12px; color:var(--paper-line);
}
.flip-back{
  background:var(--ink);
  color:var(--paper);
  transform:rotateY(180deg);
  font-size:16px;
  line-height:1.5;
}
.flip-back::before{
  content:"réponse";
  position:absolute; top:12px; left:16px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--or-light);
}
.fc-hint{font-size:12px; color:#8a8168;}
.fc-controls{display:flex; gap:10px;}

/* ---------- QCM ---------- */
.qcm-wrap{display:flex; flex-direction:column; gap:16px;}
.qcm-progress{font-family:var(--mono); font-size:12px; color:var(--ink-soft); text-align:center;}
.qcm-question{
  font-family:var(--serif); font-size:18px; color:var(--ink);
  text-align:center; line-height:1.4; margin:0;
}
.qcm-options{display:flex; flex-direction:column; gap:10px;}
.qcm-opt{
  text-align:left;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--paper-line);
  background:#fffdf7;
  cursor:pointer;
  font-size:14px;
  display:flex; align-items:center; gap:10px;
  transition:all .15s;
}
.qcm-opt .letter{
  width:24px;height:24px;border-radius:50%;
  background:var(--paper-dark);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono); font-size:11px; flex-shrink:0;
}
.qcm-opt:hover:not(.locked){border-color:var(--bleu);}
.qcm-opt.correct{background:#e7f3ec; border-color:var(--vert); color:#1f5138;}
.qcm-opt.correct .letter{background:var(--vert); color:#fff;}
.qcm-opt.wrong{background:#fbe9e7; border-color:var(--rouge); color:#7a2a20;}
.qcm-opt.wrong .letter{background:var(--rouge); color:#fff;}
.qcm-opt.locked{cursor:default;}

/* ---------- Matching game ---------- */
.match-wrap{display:flex; flex-direction:column; gap:14px;}
.match-progress{font-family:var(--mono); font-size:12px; color:var(--ink-soft); text-align:center;}
.match-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 16px;}
.match-item{
  padding:12px 10px;
  border-radius:10px;
  border:1px solid var(--paper-line);
  background:#fffdf7;
  cursor:pointer;
  font-size:13px;
  line-height:1.35;
  text-align:left;
  transition:all .15s;
  min-height:44px;
  display:flex; align-items:center;
}
.match-item.selected{border-color:var(--bleu); box-shadow:0 0 0 2px rgba(45,74,122,.25);}
.match-item.solved{background:#e7f3ec; border-color:var(--vert); color:#1f5138; cursor:default;}
.match-item.shake{animation:shake .4s;}
@keyframes shake{
  10%,90%{transform:translateX(-2px);}
  20%,80%{transform:translateX(4px);}
  30%,50%,70%{transform:translateX(-7px);}
  40%,60%{transform:translateX(7px);}
}

/* ---------- Timeline / Frise game ---------- */
.timeline-wrap{display:flex; flex-direction:column; gap:14px;}
.timeline-instructions{
  font-size:13px; color:var(--ink-soft); text-align:center;
  background:var(--paper-dark); padding:10px 12px; border-radius:8px;
}
.timeline-track{
  position:relative;
  min-height:60px;
  border-left:3px solid var(--or);
  padding-left:16px;
  display:flex; flex-direction:column; gap:8px;
}
.timeline-slot{
  min-height:44px;
  border:1px dashed var(--paper-line);
  border-radius:8px;
  display:flex; align-items:center; padding:0 10px;
  font-size:12.5px; color:#a89f83;
  position:relative;
}
.timeline-slot::before{
  content:"";
  position:absolute; left:-22px; top:50%; transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%; background:var(--or);
}
.timeline-slot.filled{
  border-style:solid; background:#fffdf7; color:var(--ecru-text); border-color:var(--paper-line);
}
.timeline-slot.correct{border-color:var(--vert); background:#e7f3ec;}
.timeline-slot.wrong{border-color:var(--rouge); background:#fbe9e7;}
.timeline-pool{
  display:flex; flex-wrap:wrap; gap:8px;
  padding-top:6px; border-top:1px dashed var(--paper-line);
}
.timeline-chip{
  padding:8px 12px;
  border-radius:999px;
  background:var(--ink);
  color:var(--paper);
  font-size:12.5px;
  cursor:pointer;
  border:none;
}
.timeline-chip:hover{background:var(--bleu);}

/* ---------- Results / stamp moment ---------- */
.result-wrap{
  text-align:center;
  padding:28px 10px 10px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.result-stamp{width:120px;height:120px;}
.result-stamp.animate{animation:stampIn .55s cubic-bezier(.2,1.4,.4,1);}
@keyframes stampIn{
  0%{transform:scale(2.4) rotate(-18deg); opacity:0;}
  60%{transform:scale(.92) rotate(-8deg); opacity:1;}
  100%{transform:scale(1) rotate(-8deg); opacity:1;}
}
.result-score{font-family:var(--serif); font-size:26px; color:var(--ink); margin:0;}
.result-msg{font-size:13.5px; color:#7a7259; max-width:340px;}

/* ---------- Buttons ---------- */
.btn{
  border:none; border-radius:10px;
  padding:11px 20px;
  font-size:14px; font-weight:600;
  cursor:pointer;
  transition:transform .12s, opacity .12s;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary:hover{background:var(--ink-soft);}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--paper-line);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}

/* ---------- Install banner ---------- */
#install-banner{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
  max-width:520px; width:calc(100% - 32px);
  background:var(--ink); color:var(--paper);
  border-radius:12px;
  padding:12px 14px;
  display:none;
  align-items:center; gap:12px;
  box-shadow:var(--shadow);
  z-index:50;
}
#install-banner.show{display:flex;}
#install-banner p{margin:0; font-size:12.5px; flex:1;}
#install-banner button{flex-shrink:0;}
#install-close{background:none;border:none;color:var(--paper); opacity:.6; cursor:pointer; font-size:16px; padding:4px;}

/* ---------- Toast ---------- */
#toast{
  position:fixed; left:50%; top:16px; transform:translate(-50%,-140%);
  background:var(--ink); color:var(--paper);
  padding:10px 16px; border-radius:10px; font-size:13px;
  z-index:60; box-shadow:var(--shadow);
  transition:transform .3s ease;
}
#toast.show{transform:translate(-50%,0);}

@media (max-width:480px){
  .match-grid{grid-template-columns:1fr;}
  .cover-title{font-size:28px;}
  .h-title{font-size:19px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

@media (min-width:900px){
  body{padding:24px 0;}
  #app-shell{min-height:calc(100vh - 48px); border-radius:18px; overflow:hidden;}
}