/* ============================================================================
   3etapes-single.css — Habillage élégant « marque » des pages À CORRECTION UNIQUE
   (catégorie C du nettoyage des dossiers 3etapes).
   ----------------------------------------------------------------------------
   But : donner à ces pages (un seul bouton de correction) un design cohérent
   avec les vraies pages « trois étapes » du site — fond marque indigo→violet,
   carte blanche, bouton et bloc de correction soignés — SANS toucher au contenu
   mathématique ni au mécanisme de révélation.

   RÈGLES DE SÛRETÉ :
   - ne JAMAIS fixer `display` sur .solution/.correction (le JS gère show/hide) ;
   - cible les VARIANTES de classes rencontrées (.solution|.correction, etc.) ;
   - !important pour surpasser les <style> inline plats des pages ;
   - RTL conservé, math en LTR conservé (on ne touche pas aux <span dir="ltr">).
   À charger APRÈS le <style> inline de la page.
   ============================================================================ */

:root{
  --se-p:#667eea; --se-p2:#764ba2; --se-accent:#f093fb;
  --se-ink:#2c3e50; --se-muted:#64748b; --se-ok:#16a34a; --se-ok-bg:#f4fbf5;
}

body{
  background:linear-gradient(135deg,#f5f7ff 0%,#eef1fb 100%)!important;   /* clair : lisible partout, même sans carte */
  font-family:'Cairo','Segoe UI',Tahoma,sans-serif!important;
  color:var(--se-ink)!important; margin:0!important; padding:20px!important; min-height:100vh!important;
}

/* Carte principale — variantes de wrapper rencontrées (.container/.page/.wrapper) */
.container,.page,.wrapper,main.page,.exercice-wrap{
  max-width:960px!important; margin:24px auto!important; background:#fff!important;
  border-radius:20px!important; padding:30px!important;
  box-shadow:0 10px 34px rgba(102,126,234,.14)!important; border:1px solid #e7e9f7!important;
}

/* Titre */
h1{
  color:var(--se-p)!important; text-align:center!important; font-weight:800!important;
  border-bottom:3px solid var(--se-p)!important; padding-bottom:12px!important; margin:0 0 26px!important;
}

/* Énoncé / bloc exercice */
.exercise,.exercice{
  background:#f8f9ff!important; border:1px solid #e7e9f7!important;
  border-inline-start:5px solid var(--se-p)!important; border-radius:16px!important;
  padding:22px!important; margin:0 0 24px!important;
}
.exercise-title,.exercice-title{ color:var(--se-p2)!important; font-weight:800!important; font-size:1.15em!important; margin-bottom:14px!important; }
.problem,.question,.given-data,.enonce{
  background:#fff!important; border:1px solid #eef0fb!important; border-radius:12px!important;
  padding:16px!important; margin:0 0 14px!important;
}
.indication{ background:#f3f0fb!important; border:1px solid #e2dcf5!important; border-inline-start:4px solid var(--se-accent)!important; border-radius:12px!important; padding:14px!important; }

/* Bouton de correction (unique) — par CLASSE (variantes) ET par COMPORTEMENT
   (onclick qui révèle une correction/solution : attrape les <button> sans classe). */
.correction-button,.solution-toggle,.btn-correction,.btn-solution,.show-correction,.toggle-correction,
button[onclick*="orrection" i],button[onclick*="olution" i],button[onclick*="toggleSol" i],
button[onclick*="showSol" i],button[onclick*="showCorr" i],button[onclick*="afficherC" i],
button[onclick*="voirCorr" i],button[onclick*="revealCorr" i],button[onclick*="montreCorr" i],
button[onclick*="corrige" i],button[onclick*="toggleCorr" i]{
  display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:8px!important;
  background:linear-gradient(135deg,var(--se-p),var(--se-p2))!important; color:#fff!important;
  border:none!important; padding:12px 26px!important; border-radius:12px!important; cursor:pointer!important;
  font-family:inherit!important; font-size:1em!important; font-weight:700!important; width:auto!important;
  box-shadow:0 6px 18px rgba(118,75,162,.35)!important; transition:transform .2s ease,box-shadow .2s ease!important; margin:12px 6px!important;
}
.correction-button:hover,.solution-toggle:hover,.btn-correction:hover,
button[onclick*="orrection" i]:hover,button[onclick*="olution" i]:hover,button[onclick*="toggleSol" i]:hover,
button[onclick*="showSol" i]:hover,button[onclick*="corrige" i]:hover,button[onclick*="toggleCorr" i]:hover{
  transform:translateY(-2px)!important; background:linear-gradient(135deg,#5a6fe0,#6a4193)!important; box-shadow:0 10px 26px rgba(118,75,162,.45)!important;
}

/* Bloc de correction révélé — vert « succès » soigné (on NE fixe PAS display) */
.correction,.solution{
  border:1px solid #cdeccd!important; border-inline-start:5px solid var(--se-ok)!important;
  background:var(--se-ok-bg)!important; border-radius:14px!important; padding:20px!important; margin-top:16px!important;
  color:var(--se-ink)!important;
}
.step-title{ color:var(--se-p2)!important; font-weight:800!important; }
.step{ color:var(--se-p2)!important; font-weight:700!important; }   /* sûr : span inline OU div */
.calculation{ background:#f3f0fb!important; border:1px solid #e2dcf5!important; border-radius:10px!important; direction:ltr; }
.result,.final-answer,.final-result{
  background:#fff7cc!important; border:1px solid #ffe58a!important; border-radius:10px!important;
  color:var(--se-ink)!important; font-weight:800!important; text-align:center!important; padding:12px!important; margin:12px 0!important;
}

/* Mobile */
@media (max-width:600px){
  body{ padding:10px!important; }
  .container{ padding:18px!important; border-radius:14px!important; }
}