/* =========================================================
  Page Valshaari — Intro, Cours, Exercices, Lexique
========================================================= */

/* Intro (article + aside) */
.vls-cols{display:grid; grid-template-columns:1.2fr .8fr; gap:24px}
@media (max-width:900px){ .vls-cols{grid-template-columns:1fr} }

#intro aside .list{list-style:none; padding:0; margin:0; display:grid; gap:12px}
#intro aside .list>li{margin:0}
#intro aside .list>.card{margin:0; padding:14px}
#intro aside .list .actions{margin-top:8px}

.note{
  border:1px dashed color-mix(in oklab, var(--accent), var(--bord) 60%);
  background:#141126; border-radius:12px; padding:10px 12px; color:var(--muted); margin-top:10px;
}

/* Alphabet & sons */
.alpha-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px; margin-top:8px;
}
.alpha-grid>div{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px 12px;
  padding:12px; border:1px solid var(--bord); border-radius:12px; background:#13111a;
}
.alpha{font-family:"IM Fell English SC", Georgia, serif; font-size:1.25rem; letter-spacing:.4px}
.pron{font-variant:small-caps; color:var(--accent-2)}
.alpha-grid small{color:var(--muted)}

/* Cours */
.course-cols{grid-template-columns:280px 1fr}
@media (max-width:1000px){ .course-cols{grid-template-columns:1fr} }

.sticky{position:sticky; top:84px}
.toc{margin:0; padding-left:1.2rem; display:grid; gap:6px}
.toc a{color:var(--txt)}
.toc a:hover{color:var(--accent-2)}

.lesson-head{
  display:flex; align-items:center; gap:12px; justify-content:space-between; flex-wrap:wrap; margin-bottom:8px;
}
.lesson-grid{display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:800px){ .lesson-grid{grid-template-columns:1fr} }
.lesson .links{margin-top:10px}
.lesson .modeles{display:grid; gap:8px; padding-left:18px}

.callout{
  margin-top:12px;
  border:1px dashed color-mix(in oklab, var(--accent), var(--bord) 60%);
  background:#141126; border-radius:12px; padding:12px; color:var(--muted);
}

.step-nav{display:flex; gap:8px; align-items:center; margin-top:14px}
.step-nav .right{margin-left:auto}

/* Lexique */
.lex-cols{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.lex-list{list-style:none; padding:0; margin:0; display:grid; gap:6px}
.lex-list li{
  padding:6px 8px; border:1px solid var(--bord); border-radius:8px; background:#12101a;
  display:flex; justify-content:space-between; align-items:center;
}
.lex-list li .val{
  color:var(--accent-2);
  font-family:"IM Fell English SC", Georgia, serif;
  font-size:1.05rem;
}
#searchLexique{
  margin-top:8px; background:#13111a; border:1px solid var(--bord); color:var(--txt);
  border-radius:10px; padding:10px 12px; width:100%;
}
#searchLexique:focus{border-color:color-mix(in oklab, var(--accent), var(--bord) 60%); box-shadow:var(--ring)}

/* Exercices — layout & états */
.exo-cols{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.exo.card{display:flex; flex-direction:column; justify-content:space-between}
.exo .list{margin-top:6px}
.exo .note{
  border:1px dashed color-mix(in oklab, var(--accent), var(--bord) 60%);
  background:#141126; border-radius:12px; padding:10px 12px; color:var(--muted); margin-top:8px;
}
blockquote{
  margin:0; padding:10px 14px; border-left:3px solid var(--accent);
  background:#17132a; border-radius:8px; color:var(--muted);
}

/* QCM / Cloze / Ordre / Vrai-Faux / Associer */
.exo .actions{ gap:8px }
.exo .mini{ font-size:.9rem; margin:.2rem 0 0 }
.exo .opt{ cursor:pointer; text-align:left }
.exo .opt.is-picked{ outline:2px solid color-mix(in oklab, var(--accent), white 20%) }
.exo .opt.is-ok{ border-color:#2e4b2a; box-shadow:0 0 0 2px rgba(154,209,123,.2) }
.exo .opt.is-ko{ border-color:#5a3a2b; box-shadow:0 0 0 2px rgba(232,157,107,.2) }

/* grille des options QCM */
.exo-qcm-grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }

/* inputs cloze */
.cloze{ width:auto; min-width:120px; display:inline-block; margin:0 4px; }
.cloze.ok{ border-color:#2e4b2a; }
.cloze.ko{ border-color:#5a3a2b; }

/* ordre des mots */
.order-bank, .order-built{
  display:flex; flex-wrap:wrap; gap:8px; padding:10px; border:1px solid var(--bord);
  border-radius:10px; background:#13111a; min-height:48px;
}
.chip.tok.used{ opacity:.5 }
.chip.built{ cursor:pointer }

/* QCM set */
.qcmset-question .opt{ cursor:pointer; text-align:left }
.qcmset-question .opt.is-picked{ outline:2px solid color-mix(in oklab, var(--accent), white 20%) }
.qcmset-question .opt.is-ok{ border-color:#2e4b2a; box-shadow:0 0 0 2px rgba(154,209,123,.2) }
.qcmset-question .opt.is-ko{ border-color:#5a3a2b; box-shadow:0 0 0 2px rgba(232,157,107,.2) }
.exo-qcm-grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }

/* Vrai/Faux */
.vf-row{ border:1px solid var(--bord); border-radius:12px; background:#13111a; padding:10px; margin:8px 0 }
.vf-buttons{ display:flex; gap:8px; margin-top:6px }
.vf-buttons .btn.alt{ background:rgba(255,255,255,.05) }
.vf-buttons .btn.is-picked{ outline:2px solid color-mix(in oklab, var(--accent), white 20%) }

/* Associer */
.match-cols{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:10px }
.match-col{ min-height:120px }
.chip.match{ padding:6px 10px; border-radius:999px; border:1px solid var(--bord); background:#141126; color:var(--muted); margin:4px; }
.chip.match.is-picked{ outline:2px solid color-mix(in oklab, var(--accent), white 20%) }
.chip.match.used{ opacity:.5 }
.match-built .pair{ display:flex; align-items:center; gap:8px; padding:8px; border:1px dashed var(--bord); border-radius:10px; background:#12101a; margin:6px 0 }
@media (max-width:800px){ .match-cols{ grid-template-columns:1fr } }

/* =========================================================
   QCM — lisibilité du texte
========================================================= */
.qcmset-question .opt {
  color: #f2f2f2;               /* texte plus clair */
  font-weight: 500;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background .2s, border .2s, color .2s;
  font-family: "Poppins", sans-serif;
  font-size: 0.95rem;
}

.qcmset-question .opt:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
}

.qcmset-question .opt.is-picked {
  background: rgba(255,215,100,0.1);
  border-color: #d6b86c;
  color: #f6e5b0;
}

.qcmset-question .opt.is-ok {
  background: rgba(90,170,90,0.15);
  border-color: #6bcf85;
  color: #aef3bc;
}

.qcmset-question .opt.is-ko {
  background: rgba(200,80,60,0.15);
  border-color: #e89d6b;
  color: #f3b8a0;
}

/* =========================================================
   Exos — spoilers (details/summary)
========================================================= */
.exo-wrap{
  margin:12px 0;
  border:1px solid var(--bord);
  border-radius:12px;
  background:#12101a;
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* retirer le triangle natif pour uniformiser */
.exo-wrap > summary { list-style:none; }
.exo-wrap > summary::-webkit-details-marker{ display:none; }

.exo-summary{
  cursor:pointer;
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  font-weight:600;
  color:var(--txt);
  background:linear-gradient(180deg,#171421,#12101a);
  border-bottom:1px solid var(--bord);
  user-select:none;
}
.exo-summary .exo-title{ font-family:"IM Fell English SC", Georgia, serif; font-size:1.05rem; }
.exo-summary .chev{ margin-left:auto; transition:transform .2s ease; opacity:.9; }

.exo-wrap[open] .exo-summary .chev{ transform:rotate(180deg); }

/* contenu : on retire juste la bordure top double et on arrondit le bas */
.exo-wrap .card.exo{
  border:0;                 /* pas de double bordure */
  border-radius:0 0 12px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.06)), var(--bloc);
}