@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&family=Caveat:wght@600;700&display=swap');

:root{
  --board: #14302A;
  --board-2: #1B3A32;
  --chalk-line: rgba(245, 241, 232, 0.08);
  --paper: #FBF7EC;
  --paper-2: #F3ECDB;
  --ink: #232920;
  --ink-soft: #5B6357;
  --gold: #E7C36B;
  --good: #5E8F6E;
  --good-bg: #E7F0E4;
  --bad: #B85450;
  --bad-bg: #F6E5E1;
  --rule: #D8CDA9;
  --site-blue: #384b5f;
  --site-blue-2: #2c3b4a;
}

.qcm-embed, .qcm-embed *{ box-sizing: border-box; }

.qcm-embed{
  margin: 0;
  background: var(--board);
  color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  background-image:
    linear-gradient(var(--chalk-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--chalk-line) 1px, transparent 1px),
    radial-gradient(ellipse at 20% 10%, var(--board-2), var(--board) 60%);
  background-size: 42px 42px, 42px 42px, 100% 100%;
  padding: 32px 0 60px;
  border-radius: 14px;
}

.wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 16px 0;
}

.masthead{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 22px;
  padding: 0 6px;
}

.masthead h1{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 28px;
  color: var(--paper);
  margin: 0;
  letter-spacing: 0.2px;
}

.masthead-right{
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.masthead .sujet{
  font-family: 'Caveat', cursive;
  font-size: 22px;
  color: var(--gold);
  transform: rotate(-3deg);
}

.timer{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 17px;
  color: var(--paper);
  background: var(--board-2);
  border: 1.5px solid #d3d3d3;
  border-radius: 20px;
  padding: 5px 14px;
  letter-spacing: 0.5px;
}

.timer .dot{
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: 7px;
  animation: pulse 1.4s ease-in-out infinite;
}

.timer.stopped .dot{ animation: none; background: var(--ink-soft); }

@keyframes pulse{
  0%, 100%{ opacity: 1; }
  50%{ opacity: 0.3; }
}

.tab-row{
  display: flex;
  gap: 6px;
  padding: 0 10px;
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.tab{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 6px 12px 8px;
  opacity: 0.55;
}

.tab.active{
  background: var(--paper);
  opacity: 1;
  color: var(--ink);
  font-weight: 600;
}

.tab.done{ opacity: 0.85; }
.tab .mark{ margin-left: 5px; }

.live-score{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--paper);
  opacity: 0.75;
  padding: 6px 10px 8px;
  margin-left: auto;
  white-space: nowrap;
}

.card{
  background: var(--paper);
  border-radius: 4px 10px 10px 10px;
  border: 1px solid var(--rule);
  box-shadow: 0 30px 60px rgba(0,0,0,0.35), 0 2px 0 rgba(0,0,0,0.05);
  padding: 34px 36px 28px;
  position: relative;
  overflow: hidden;
}

.card::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 48px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 30px,
    var(--rule) 30px, var(--rule) 31px
  );
  opacity: 0.35;
}

.qnum{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--gold);
  background: var(--board);
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
  letter-spacing: 0.5px;
}

.chapitre-tag{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 14px;
  margin-left: 6px;
}

.qtext{
  font-size: 19px;
  line-height: 1.55;
  margin: 0 0 22px 6px;
  color: var(--ink);
}

.qtext mjx-container{ font-size: 1.05em; }

.question-image{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 6px 18px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
}

.choices{
  display: grid;
  gap: 10px;
  margin-left: 6px;
}

.choice{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  padding: 13px 16px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  cursor: pointer;
  transition: border-color .15s ease, transform .1s ease, background .15s ease;
  color: var(--ink);
}

.choice:hover:not(:disabled){
  border-color: var(--gold);
  transform: translateY(-1px);
}

.choice:disabled{ cursor: default; }

.choice .letter{
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--paper-2);
  border-radius: 5px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.choice .content{ flex: 1; padding-top: 1px; }

.choice.selected{ border-color: var(--ink-soft); }

.choice.correct{ background: var(--good-bg); border-color: var(--good); }
.choice.correct .letter{ background: var(--good); color: #fff; }

.choice.incorrect{ background: var(--bad-bg); border-color: var(--bad); }
.choice.incorrect .letter{ background: var(--bad); color: #fff; }

.sign-table{
  border-collapse: collapse;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  margin-top: 2px;
}
.sign-table td{
  border: 1px solid #9a9a8f;
  padding: 3px 9px;
  text-align: center;
}
.sign-table tr:first-child td{ font-style: italic; }

.explain{
  margin: 18px 6px 0;
  background: var(--paper-2);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .3s ease, opacity .3s ease, padding .3s ease;
}
.explain.show{ max-height: 400px; opacity: 1; }
.explain .label{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 5px;
}
.explain mjx-container{ font-size: 1.02em; }

.explain-link{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--site-blue);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color .15s ease;
}
.explain-link:hover{ border-bottom-color: var(--site-blue); }

.footer-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  margin-left: 6px;
  min-height: 44px;
}

.feedback{
  font-family: 'Caveat', cursive;
  font-size: 30px;
  font-weight: 700;
  transform: rotate(-4deg);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}
.feedback.show{ opacity: 1; transform: rotate(-4deg) scale(1); }
.feedback.good{ color: var(--good); }
.feedback.bad{ color: var(--bad); }

.next-btn{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  background: var(--board);
  color: var(--paper);
  border: none;
  border-radius: 7px;
  padding: 11px 22px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.next-btn.show{ opacity: 1; pointer-events: auto; }
.next-btn:hover{ background: #0d221d; }

.score-screen{ text-align: center; padding: 30px 10px 10px; }
.score-screen .big{
  font-family: 'Fraunces', serif;
  font-size: 56px;
  font-weight: 700;
  color: var(--ink);
  margin: 6px 0 2px;
}
.score-screen .pct{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper-2);
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 6px;
  border: 1px solid var(--rule);
}
.score-screen .sub{
  color: var(--ink-soft);
  margin-bottom: 24px;
  font-size: 15px;
}
.time-warn{
  background: var(--paper-2);
  border-left: 3px solid var(--bad);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
  margin: 0 0 22px;
}

/* ---- Fenêtre d'alerte : temps de référence dépassé ---- */
.time-alert-overlay{
  position: fixed;
  inset: 0;
  background: rgba(20, 48, 42, 0.72);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.time-alert-box{
  background: var(--paper);
  border-radius: 14px;
  max-width: 420px;
  width: 100%;
  padding: 26px 26px 22px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  border-top: 4px solid var(--bad);
}
.time-alert-box .time-alert-icon{
  font-size: 30px;
  margin-bottom: 8px;
}
.time-alert-box h3{
  font-family: 'Fraunces', serif;
  font-size: 20px;
  margin: 0 0 10px;
  color: var(--ink);
}
.time-alert-box p{
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 20px;
}
.time-alert-box button{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  background: var(--board);
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  cursor: pointer;
}
.time-alert-box button:hover{ background: var(--board-2); }

.review-block{
  padding: 22px 0;
  border-top: 1px solid var(--rule);
  position: relative;
}
.review-block:first-of-type{ border-top: none; padding-top: 4px; }
.review-status{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  margin-left: 10px;
}
.review-status.good{ background: var(--good-bg); color: var(--good); }
.review-status.bad{ background: var(--bad-bg); color: var(--bad); }
.retry-btn, .setup-btn{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  background: var(--board);
  color: var(--paper);
  border: none;
  border-radius: 7px;
  padding: 12px 26px;
  cursor: pointer;
  font-size: 14px;
  margin: 0 6px;
}
.retry-btn:hover, .setup-btn:hover{ background: #0d221d; }
.setup-btn.ghost{
  background: transparent;
  color: var(--ink-soft);
  border: 1.5px solid var(--rule);
}
.setup-btn.ghost:hover{ background: var(--paper-2); color: var(--ink); }

/* ---- Setup screen ---- */
.setup-title{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 4px 6px;
  color: var(--ink);
}
.setup-sub{
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0 0 24px 6px;
}
.setup-section{ margin: 0 6px 26px; }
.setup-label{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-soft);
  margin-bottom: 10px;
  display: block;
}
.pill-row{ display: flex; flex-wrap: wrap; gap: 8px; }
.pill{
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: 20px;
  padding: 8px 16px;
  cursor: pointer;
  color: var(--ink);
  transition: all .15s ease;
}
.pill:hover{ border-color: var(--gold); }
.pill.active{ background: var(--board); color: var(--paper); border-color: var(--board); }
.pill:disabled{ opacity: 0.35; cursor: not-allowed; }
.pill:disabled:hover{ border-color: var(--rule); }

.chapitre-group{ margin-bottom: 14px; }
.chapitre-group-title{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 6px;
  letter-spacing: 0.4px;
}
.chapitre-list{ display: grid; gap: 6px; }
.chapitre-check{
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
  padding: 4px 2px;
}
.chapitre-check input{ width: 16px; height: 16px; accent-color: var(--good); cursor: pointer; }
.chapitre-check .count{ color: var(--ink-soft); font-size: 12px; margin-left: auto; font-family: 'IBM Plex Mono', monospace; }
.chapitre-check.disabled{ opacity: 0.45; cursor: not-allowed; }
.chapitre-check.disabled input{ cursor: not-allowed; }
.chapitre-check.disabled .count{ font-style: italic; }
.chapitre-check.select-all{
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.chapitre-check.select-all strong{ font-weight: 600; }

.chapitre-check.subchapitre-toggle{ font-weight: 600; }
.chapitre-list.sous-chapitre-list{
  margin: 2px 0 6px 25px;
  padding-left: 12px;
  border-left: 2px solid var(--rule);
  gap: 3px;
}
.sous-chapitre-item{ font-size: 13.5px; font-weight: 400; }

.num-row{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.num-input{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  font-weight: 600;
  width: 70px;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1.5px solid var(--rule);
  text-align: center;
}
.pool-note{ font-size: 13px; color: var(--ink-soft); }
.pool-note b{ color: var(--ink); }

.warn{
  color: var(--bad);
  font-size: 13px;
  margin: -14px 6px 18px;
  min-height: 16px;
}

.start-btn{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
  background: var(--board);
  color: var(--paper);
  border: none;
  border-radius: 8px;
  padding: 13px 26px;
  cursor: pointer;
  margin-left: 6px;
}
.start-btn:hover{ background: #0d221d; }
.start-btn:disabled{ opacity: 0.4; cursor: not-allowed; }

/* ---- Grands écrans : on exploite la largeur disponible ---- */
@media (min-width: 900px){
  .card{ padding: 44px 56px 40px; }
  .wrap{ padding-left: 32px; padding-right: 32px; }

  .choices{
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
  }

  .chapitre-list{
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
  }

  .qtext{ font-size: 20px; max-width: 90%; }

  .review-block .choices{ grid-template-columns: 1fr 1fr; }

  .setup-title{ font-size: 25px; }
}

@media (min-width: 1300px){
  .wrap{ max-width: 1280px; }
}

@media (max-width: 560px){
  .card{ padding: 24px 18px 22px; }
  .qtext{ font-size: 17px; margin-left: 0; }
  .choices{ margin-left: 0; }
  .footer-row{ margin-left: 0; }
  .setup-section{ margin-left: 0; margin-right: 0; }
  .setup-title, .setup-sub{ margin-left: 0; }
}