/* CSS modele Devoirati: erreur_medium_02.html
   Source: C:\mon-site-SAUVEGARDE-AVANT-MIGRATION\Devoirati\7eme\chapitre-11-triangles\paragraphe-04-quiz\QUIZ3\erreur_medium_02.html
   Injecte automatiquement: ne pas editer page par page. */
* { margin: 0; padding: 0; box-sizing: border-box; }
    
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      padding: 20px;
      direction: rtl;
    }
    
    .container { max-width: 900px; margin: 0 auto; }
    
    .header {
      background: white;
      border-radius: 15px;
      padding: 25px;
      margin-bottom: 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      text-align: center;
    }
    
    .header h1 { color: #667eea; font-size: 2em; margin-bottom: 10px; }
    
    .stats {
      display: flex;
      justify-content: space-around;
      gap: 15px;
      margin-top: 20px;
      flex-wrap: wrap;
    }
    
    .stat {
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: white;
      padding: 12px 24px;
      border-radius: 25px;
      font-weight: bold;
    }
    
    .quiz-card {
      background: white;
      border-radius: 15px;
      padding: 30px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }
    
    #difficultyPill {
      display: inline-block;
      background: #667eea;
      color: white;
      padding: 5px 15px;
      border-radius: 20px;
      margin-bottom: 15px;
      font-weight: bold;
    }
    
    #stemBox {
      font-size: 1.3em;
      line-height: 1.8;
      margin-bottom: 25px;
      color: #333;
      padding: 20px;
      background: #f8f9fa;
      border-radius: 10px;
      border-right: 5px solid #667eea;
    }
    
    #choicesBox {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 25px;
    }
    
    .choice {
      background: #f8f9fa;
      border: 2px solid #e0e0e0;
      border-radius: 12px;
      padding: 18px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 1.1em;
    }
    
    .choice:hover {
      background: #e8eaf6;
      border-color: #667eea;
      transform: translateX(-5px);
    }
    
    .choice.correct {
      background: #c8e6c9;
      border-color: #4caf50;
      font-weight: bold;
    }
    
    .choice.wrong {
      background: #ffcdd2;
      border-color: #f44336;
    }
    
    .choice.locked {
      cursor: not-allowed;
      opacity: 0.7;
    }
    
    #feedbackBox, #hintBox, #solutionBox {
      margin-top: 20px;
      padding: 20px;
      border-radius: 10px;
      display: none;
    }
    
    #feedbackBox.ok {
      background: #c8e6c9;
      border-right: 5px solid #4caf50;
    }
    
    #feedbackBox.bad {
      background: #ffcdd2;
      border-right: 5px solid #f44336;
    }
    
    #hintBox {
      background: #fff3cd;
      border-right: 5px solid #ffc107;
    }
    
    #solutionBox {
      background: #d1ecf1;
      border-right: 5px solid #17a2b8;
    }
    
    button {
      padding: 15px 30px;
      font-size: 1.1em;
      font-weight: bold;
      border: none;
      border-radius: 25px;
      cursor: pointer;
      transition: all 0.3s ease;
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: white;
      margin: 10px 5px;
    }
    
    button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
    }
    
    #nextQuestionBtn {
      display: none !important;
    }
    
    .xp-bar-container {
      background: #e0e0e0;
      border-radius: 10px;
      height: 20px;
      margin-top: 10px;
      overflow: hidden;
    }
    
    #xpBar {
      background: linear-gradient(90deg, #4caf50, #8bc34a);
      height: 100%;
      width: 0%;
      transition: width 0.5s ease;
    }

/* Adaptation minimale RACR -> classes du modele erreur_medium_02 */
.wrap.container{max-width:980px;margin:0 auto;padding:18px}
.top.header{text-align:center;margin-bottom:16px}
.top.header h1{margin:0 0 10px}
.top.header .badge{display:inline-flex}
.panel.quiz-card{margin-top:16px}
.lines{display:grid;gap:12px;margin-top:14px}
.line.choice{display:block;text-align:right}
.line.choice .num{font-weight:900;margin-left:8px}
.line.choice.selected{transform:translateY(-1px)}
.line.choice.correct{border-color:#22c55e}
.line.choice.safe{opacity:.82}
.feedback{display:none}
.feedback.show{display:block}
.mathbox{direction:ltr;unicode-bidi:isolate;text-align:center;overflow-x:auto}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.nav a{text-decoration:none}
@media(max-width:720px){.wrap.container{padding:10px}.nav{flex-direction:column;align-items:stretch;text-align:center}}

/* Harmonisation RACR externe */
.nav{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:12px !important;
  width:min(980px,96vw);
  margin:18px auto 0 !important;
}
.nav a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:112px;
  padding:11px 18px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#667eea,#764ba2) !important;
  color:#fff !important;
  text-decoration:none !important;
  font-weight:800 !important;
  box-shadow:0 8px 18px rgba(76,29,149,.22);
}
.nav a.disabled{
  opacity:.55 !important;
  pointer-events:none !important;
  box-shadow:none !important;
}
.nav span,.nav .badge{
  color:#111827 !important;
  background:rgba(255,255,255,.86) !important;
  border:1px solid rgba(255,255,255,.5) !important;
  border-radius:999px !important;
  padding:8px 14px !important;
  font-weight:800 !important;
}
.mathbox{
  direction:ltr;
  unicode-bidi:isolate;
  text-align:center;
  overflow-x:auto;
}
@media(max-width:720px){
  .nav{flex-direction:column !important;align-items:stretch !important;text-align:center !important}
  .nav a,.nav span,.nav .badge{width:100%}
}
/* Support des lignes creees par JavaScript dans les pages RACR */
.line{display:block;text-align:right;border:2px solid #e1e5e9;border-radius:15px;background:white;padding:18px;margin:0;cursor:pointer;transition:all .3s ease;box-shadow:0 3px 10px rgba(0,0,0,.05)}
.line:hover{border-color:#667eea;background:#f8f9ff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(102,126,234,.15)}
.line.selected{border-color:#764ba2;background:#f3ecff}
.line.correct{border-color:#28a745;background:#e8f5e8}
.line.safe{border-color:#d1d5db;background:#f9fafb;opacity:.88}
.line .num{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;margin-left:8px;border-radius:50%;background:#667eea;color:#fff;font-weight:900}
.btn{border:0;border-radius:999px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:900;padding:12px 22px;cursor:pointer;box-shadow:0 6px 18px rgba(102,126,234,.25)}
.btn.ok{background:linear-gradient(135deg,#22c55e,#16a34a)}
.feedback.show{display:block}
.good{background:#d4edda;border:1px solid #c3e6cb;color:#155724;border-radius:15px;padding:15px;margin-top:12px}
.bad{background:#f8d7da;border:1px solid #f5c6cb;color:#721c24;border-radius:15px;padding:15px;margin-top:12px}

/* RACR rebuilt pages */
.mathbox{direction:ltr;unicode-bidi:isolate;text-align:center;overflow-x:auto}
.choice.selected{background:#e8eaf6;border-color:#667eea;transform:translateX(-5px)}
.nav-bar{background:white;border-radius:15px;padding:16px 22px;margin-top:20px;box-shadow:0 10px 30px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:space-between;gap:12px}
.nav-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:white;border:none;border-radius:25px;padding:12px 24px;font-weight:bold;cursor:pointer}
.nav-btn:disabled{opacity:.35;cursor:default}
.nav-pi{font-weight:bold;color:#667eea}
@media(max-width:720px){.nav-bar{align-items:stretch;flex-direction:column;text-align:center}.nav-btn,.nav-pi{width:100%;text-align:center}}