/* Mini-games pedagogiques actionbritish
   - .cq       : carrousel question/reponse
   - .ca-quiz2 : quiz vrai/faux
   - .ca-wf    : mots meles
   - .ab-audio-block / .ab-speak-btn : audio TTS en-GB
   Charte : brand-blue #0F2C67, brand-green #059669, gris #F8F9FA */

/* ========== CARROUSEL .cq ========== */
.cq{
  background:#F0F9FF;
  border:1px solid #BAE6FD;
  border-radius:14px;
  padding:22px 24px;
  margin:28px 0;
}
.cq .cq-viewer{min-height:120px;display:flex;flex-direction:column;justify-content:center;gap:10px;}
.cq .cq-q{font-size:17px;font-weight:700;color:#0F2C67;line-height:1.4;}
.cq .cq-a{font-size:15px;color:#1e293b;background:#ECFDF5;border-left:4px solid #059669;padding:12px 14px;border-radius:8px;line-height:1.5;}
.cq .cq-ctrls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap;}
.cq .cq-ctrls button{background:white;border:1px solid #cbd5e1;border-radius:8px;padding:8px 14px;font-weight:600;color:#0F2C67;cursor:pointer;font-size:14px;transition:all .2s;}
.cq .cq-ctrls button:hover{background:#0F2C67;color:white;border-color:#0F2C67;}
.cq .cq-ctrls .cq-reveal{background:#059669;color:white;border-color:#059669;}
.cq .cq-ctrls .cq-reveal:hover{background:#047857;}
.cq .cq-counter{font-size:13px;color:#64748b;font-weight:600;}

/* ========== QUIZ VRAI/FAUX .ca-quiz2 ========== */
.ca-quiz2{
  background:#FEFCE8;
  border:1px solid #FDE68A;
  border-radius:14px;
  padding:22px 24px;
  margin:28px 0;
}
.ca-quiz2 .ca-quiz2-score{
  background:#0F2C67;color:white;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;
  display:inline-block;margin-bottom:14px;
}
.ca-quiz2 .ca-q{background:white;border-radius:10px;padding:14px 16px;margin-bottom:12px;border:1px solid #e2e8f0;}
.ca-quiz2 .ca-q p{margin:0 0 10px 0;font-weight:500;color:#1e293b;line-height:1.5;}
.ca-quiz2 .ca-q-opts{display:flex;gap:10px;}
.ca-quiz2 .ca-q-opts button{flex:1;padding:10px 14px;border-radius:8px;border:1px solid #cbd5e1;background:white;font-weight:600;cursor:pointer;font-size:14px;transition:all .2s;color:#0F2C67;}
.ca-quiz2 .ca-q-opts button:hover:not(:disabled){background:#0F2C67;color:white;border-color:#0F2C67;}
.ca-quiz2 .ca-q-opts button.ok{background:#059669;color:white;border-color:#059669;}
.ca-quiz2 .ca-q-opts button.ko{background:#DC2626;color:white;border-color:#DC2626;}
.ca-quiz2 .ca-q-opts button:disabled{opacity:.75;cursor:not-allowed;}
.ca-quiz2 .ca-q-fb{margin-top:10px;font-size:13px;color:#475569;line-height:1.5;}

/* ========== MOTS MELES .ca-wf ========== */
.ca-wf{
  background:#F5F3FF;
  border:1px solid #DDD6FE;
  border-radius:14px;
  padding:22px;
  margin:28px 0;
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:20px;
}
.ca-wf-grid{
  display:grid;
  grid-template-columns:repeat(var(--ca-wf-size,12),1fr);
  gap:2px;
  user-select:none;
  background:white;
  padding:8px;
  border-radius:10px;
}
.ca-wf-cell{
  aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  background:#F8FAFC;color:#0F2C67;font-weight:700;font-size:14px;
  border-radius:4px;cursor:pointer;transition:background .15s;
}
.ca-wf-cell.sel{background:#BAE6FD;color:#0F2C67;}
.ca-wf-cell.found{background:#059669;color:white;}
.ca-wf-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;}
.ca-wf-list li{
  background:white;color:#0F2C67;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;
  border:1px solid #DDD6FE;
}
.ca-wf-list li.found{background:#059669;color:white;border-color:#059669;text-decoration:line-through;opacity:.8;}

/* ========== AUDIO TTS ========== */
.ab-speak-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:#ECFDF5;border:1px solid #A7F3D0;color:#047857;
  padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;
  transition:all .15s;vertical-align:middle;
}
.ab-speak-btn:hover{background:#059669;color:white;border-color:#059669;}
.ab-speak-btn svg{flex-shrink:0;}

.ab-audio-block{
  background:#0E294B;color:white;border-radius:14px;padding:24px 26px;margin:32px 0;
}
.ab-audio-block h3{color:white;margin:0 0 8px 0;font-size:20px;font-weight:700;}
.ab-audio-block p{color:rgba(255,255,255,.85);margin:0 0 14px 0;}
.ab-audio-block .ab-audio-controls{margin-bottom:14px;}
.ab-audio-block .ab-speak-all{background:white;color:#0E294B;border-color:white;font-weight:700;padding:8px 16px;}
.ab-audio-block .ab-speak-all:hover{background:#ECFDF5;}
.ab-audio-list{list-style:decimal;padding-left:22px;margin:0;color:white;}
.ab-audio-list li{margin-bottom:10px;line-height:1.5;}
.ab-audio-list .ab-en{font-weight:700;}
.ab-audio-list .ab-fr{color:rgba(255,255,255,.75);font-style:italic;}
.ab-audio-list .ab-speak-btn{margin-left:8px;background:rgba(255,255,255,.15);color:white;border-color:rgba(255,255,255,.3);}
.ab-audio-list .ab-speak-btn:hover{background:white;color:#0E294B;}

/* Responsive */
@media (max-width:768px){
  .ca-wf{grid-template-columns:1fr;}
  .ca-wf-cell{font-size:12px;}
  .cq .cq-q{font-size:16px;}
  .ab-audio-block{padding:20px;}
}