:root{
  --paper:#e9e1c9;
  --paper-dark:#d9cca4;
  --paper-shadow:#b9a877;
  --ink:#211d16;
  --ink-soft:#4a4234;
  --oxblood:#7a2020;
  --oxblood-dark:#5c1717;
  --navy:#232f38;
  --brass:#a9843f;
  --good:#2f5233;
  --radius:2px;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  min-height:100vh;
  background:var(--navy);
  background-image:
    radial-gradient(ellipse at top, rgba(255,255,255,0.04), transparent 60%),
    linear-gradient(180deg,#1c262d,#182026 60%,#141b20);
  color:var(--ink);
  font-family:'Libre Baskerville', Georgia, serif;
  -webkit-font-smoothing:antialiased;
}

.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0.05;
  z-index:50;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.hidden{display:none !important;}

.screen{
  min-height:100vh;
  display: vertical;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
}

/* ============ Bureau / dossier accueil & fin ============ */
.desk{width:100%; max-width:560px;}

.folder-stack{position:relative;}

.folder-back{
  position:absolute;
  top:14px; left:10px; right:-10px;
  height:100%;
  background:var(--paper-dark);
  border-radius:var(--radius);
  transform:rotate(1.3deg);
  box-shadow:0 20px 40px rgba(0,0,0,0.45);
}

.folder{
  position:relative;
  background:var(--paper);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.015) 0px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at 20% 0%, rgba(0,0,0,0.06), transparent 55%);
  border-radius:var(--radius);
  padding:56px 40px 44px;
  box-shadow:0 24px 50px rgba(0,0,0,0.5);
  text-align:center;
  transform:rotate(-0.6deg);
}

.folder-tab{
  position:absolute;
  top:-22px; left:28px;
  background:var(--paper-dark);
  color:var(--ink-soft);
  font-family:'Special Elite', monospace;
  font-size:12px;
  letter-spacing:2px;
  padding:7px 16px 5px;
  border-radius:2px 2px 0 0;
  box-shadow:0 -2px 4px rgba(0,0,0,0.15) inset;
}

.stamp{
  position:absolute;
  top:34px; right:28px;
  border:3px solid var(--oxblood);
  color:var(--oxblood);
  font-family:'Special Elite', monospace;
  font-size:13px;
  letter-spacing:2px;
  padding:6px 12px;
  transform:rotate(9deg);
  opacity:0.85;
  border-radius:3px;
  mix-blend-mode:multiply;
}

.case-title{
  font-family:'Special Elite', monospace;
  font-size:clamp(24px,5vw,32px);
  margin:0 0 10px;
  letter-spacing:1px;
  color:var(--ink);
}

.case-sub{
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.6;
  margin:0 0 28px;
  font-style:italic;
}

.meta-line{
  font-family:'Courier Prime', monospace;
  font-size:12px;
  color:var(--ink-soft);
  letter-spacing:1px;
  margin-bottom:26px;
  text-transform:uppercase;
}

.fine-print{
  margin-top:26px;
  font-family:'Courier Prime', monospace;
  font-size:11.5px;
  line-height:1.7;
  color:var(--ink-soft);
  opacity:0.75;
  border-top:1px dashed var(--paper-shadow);
  padding-top:18px;
}

.btn-stamp{
  font-family:'Special Elite', monospace;
  font-size:15px;
  letter-spacing:1.5px;
  background:var(--oxblood);
  color:var(--paper);
  border:none;
  padding:14px 30px;
  border-radius:2px;
  cursor:pointer;
  box-shadow:0 6px 0 var(--oxblood-dark), 0 10px 16px rgba(0,0,0,0.35);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn-stamp:hover{transform:translateY(-2px);}
.btn-stamp:active{
  transform:translateY(3px);
  box-shadow:0 3px 0 var(--oxblood-dark), 0 4px 8px rgba(0,0,0,0.3);
}

/* ============ Écran quiz ============ */
#screen-quiz{align-items:flex-start; padding-top:90px;}

.quiz-header{
  max-width:640px;
  margin:0 auto 18px;
  width:100%;
}

.quiz-header-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-family:'Courier Prime', monospace;
  color:var(--paper);
  font-size:13px;
  letter-spacing:1.5px;
  margin-bottom:10px;
  padding:0 4px;
}

.case-number{opacity:0.9;}
.score-tally{color:#d8b774; font-weight:700;}

.progress-track{
  height:6px;
  background:rgba(255,255,255,0.12);
  border-radius:4px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--oxblood), #a83c3c);
  transition:width .4s ease;
}

/* ============ Rail de progression verticale (mobile) ============ */
.progress-rail{
  position:fixed;
  top:0; left:0; bottom:0;
  width:10px;
  background:rgba(255,255,255,0.1);
  z-index:40;
  display:none; /* activé uniquement en media query mobile */
}
.progress-rail-fill{
  position:absolute;
  bottom:0; left:0; right:0;
  height:0%;
  background:linear-gradient(180deg, #a83c3c, var(--oxblood));
  transition:height .4s ease;
  box-shadow:0 0 10px rgba(122,32,32,0.6);
}

.dossier-card{
  max-width:640px;
  margin:0 auto;
  background:var(--paper);
  background-image:radial-gradient(ellipse at 15% 0%, rgba(0,0,0,0.05), transparent 55%);
  border-radius:var(--radius);
  padding:36px 34px 34px;
  box-shadow:0 24px 50px rgba(0,0,0,0.5);
  position:relative;
  animation:cardIn .35s ease;
}

@keyframes cardIn{
  from{opacity:0; transform:translateY(14px) rotate(0.4deg);}
  to{opacity:1; transform:translateY(0) rotate(0deg);}
}

.category-tag{
  display:inline-block;
  font-family:'Courier Prime', monospace;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--paper);
  background:var(--navy);
  padding:5px 12px;
  border-radius:2px;
  margin-bottom:20px;
}

.evidence-tag{
  float:right;
  width:76px;
  height:96px;
  background:var(--paper-dark);
  border:1px solid var(--paper-shadow);
  border-radius:3px;
  margin:0 0 14px 18px;
  position:relative;
  transform:rotate(4deg);
  box-shadow:0 8px 14px rgba(0,0,0,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
}
.evidence-tag::before{
  content:"";
  position:absolute;
  top:-9px; left:50%;
  transform:translateX(-50%);
  width:26px; height:14px;
  border:2px solid var(--brass);
  border-bottom:none;
  border-radius:12px 12px 0 0;
}
.evidence-tag-hole{
  position:absolute;
  top:9px; left:50%;
  transform:translateX(-50%);
  width:6px; height:6px;
  border-radius:50%;
  background:var(--navy);
}
.evidence-icon{
  width:42px; height:42px;
  color:var(--oxblood-dark);
  margin-top:8px;
}
.evidence-icon svg{width:100%; height:100%;}

.question-text{
  font-family:'Special Elite', monospace;
  font-size:clamp(17px,3.2vw,21px);
  line-height:1.55;
  color:var(--ink);
  margin:0 0 26px;
}

.answers{
  display:flex;
  flex-direction:column;
  gap:11px;
  clear:none;
}

.answer-btn{
  text-align:left;
  font-family:'Libre Baskerville', Georgia, serif;
  font-size:15px;
  color:var(--ink);
  background:rgba(255,255,255,0.35);
  border:1.5px solid var(--paper-shadow);
  border-radius:2px;
  padding:13px 16px;
  cursor:pointer;
  display:flex;
  gap:12px;
  align-items:flex-start;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.answer-btn:hover:not(:disabled){
  background:rgba(255,255,255,0.6);
  border-color:var(--brass);
}
.answer-btn:active:not(:disabled){transform:scale(0.995);}

.answer-letter{
  font-family:'Courier Prime', monospace;
  font-weight:700;
  color:var(--ink-soft);
  min-width:18px;
}

.answer-btn:disabled{cursor:default;}
.answer-btn.correct{
  background:rgba(47,82,51,0.18);
  border-color:var(--good);
}
.answer-btn.correct .answer-letter{color:var(--good);}
.answer-btn.incorrect{
  background:rgba(122,32,32,0.14);
  border-color:var(--oxblood);
}
.answer-btn.incorrect .answer-letter{color:var(--oxblood);}
.answer-btn.dim{opacity:0.55;}

.verdict{
  margin-top:20px;
  min-height:0;
  font-family:'Special Elite', monospace;
  font-size:14px;
  letter-spacing:1px;
  text-align:center;
  opacity:0;
  transform:scale(1.3) rotate(-8deg);
  transition:opacity .2s ease, transform .2s ease;
}
.verdict.show{opacity:1; transform:scale(1) rotate(-4deg);}
.verdict.ok{color:var(--good); border:3px solid var(--good);}
.verdict.ko{color:var(--oxblood); border:3px solid var(--oxblood);}
.verdict.show{
  display:inline-block;
  padding:6px 18px;
  border-radius:3px;
}
.verdict-wrap{display:flex; justify-content:center;}

.btn-next{
  display:block;
  margin:26px auto 0;
}

/* ============ Écran résultat ============ */
.score-final{
  font-family:'Special Elite', monospace;
  font-size:64px;
  margin:6px 0 0;
  color:var(--ink);
  line-height:1;
}
.score-out-of{
  font-size:26px;
  color:var(--ink-soft);
}
.verdict-text{
  font-style:italic;
  color:var(--ink-soft);
  margin:8px 0 22px;
  font-size:15px;
}
.typed-report{
  font-family:'Courier Prime', monospace;
  font-size:12.5px;
  line-height:1.9;
  color:var(--ink-soft);
  text-align:left;
  background:rgba(0,0,0,0.035);
  border:1px dashed var(--paper-shadow);
  padding:16px 18px;
  border-radius:2px;
  margin-bottom:28px;
  max-height:160px;
  overflow-y:auto;
}
.typed-report div{margin-bottom:6px;}
.typed-report .miss{color:var(--oxblood);}

/* ============ Responsive ============ */
@media (max-width:640px){
  /* Sur mobile, la progression se lit verticalement sur le bord de l'écran :
     plus naturelle à suivre du pouce qu'une fine barre horizontale au-dessus
     d'une carte qu'on doit déjà faire défiler. */
  .progress-rail{display:block;}
  .quiz-header .progress-track{display:none;}

  #screen-quiz{padding-top:90px; padding-left:calc(16px + 10px);}
  .quiz-header{margin-bottom:14px;}
  .quiz-header-top{font-size:11.5px;}
}

@media (max-width:480px){
  .folder{padding:48px 22px 32px;}
  .dossier-card{padding:26px 20px 26px;}
  .stamp{top:20px; right:16px; font-size:11px; padding:5px 9px;}
  .evidence-tag{width:60px; height:78px; margin-left:12px;}
  .evidence-icon{width:32px; height:32px;}
}