/* ============================================================================
   basic_exam.css — Devoirati
   Habillage de la zone "أستعد للفرض" (préparation au devoir)
   ----------------------------------------------------------------------------
   Réutilise EXACTEMENT les mêmes classes que basic.css.
   Les pages générées avec ce CSS ont une identité visuelle distincte :
   vert forêt sobre, ambiance "mode devoir", rupture nette avec la zone
   d'apprentissage (qui reste en violet/bleu via basic.css).

   Palette de verts (sobre, calibrée par rôle) :
     #0f4a30  vert très foncé   → titres principaux
     #1a5f3f  vert forêt        → dominante (nav, bandeaux, accents)
     #2d8a5f  vert moyen        → progression, actions secondaires
     #4a7c5f  vert doux         → bordures discrètes
     #dde9e0  vert très pâle    → fonds de badges
     #e8efe9  vert clair        → fonds secondaires
     #f5faf6  vert presque blanc → fonds très discrets
   Codes pédagogiques préservés (NE PAS modifier) :
     #22c55e  vert succès       → ERC validé
     #ef4444  rouge erreur      → ERC faux
     #a0a0a0  gris neutre       → ERC fini
   ============================================================================ */


/* ─────────────────────────────────────────────────────────────────────────────
   1. Base
   ───────────────────────────────────────────────────────────────────────────── */

*{margin:0;padding:0;box-sizing:border-box;}

body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  background:#1a5f3f;
  min-height:100vh;padding:20px;direction:rtl;}


/* ─────────────────────────────────────────────────────────────────────────────
   2. Navigation supérieure
   ───────────────────────────────────────────────────────────────────────────── */

.top-nav{background:white;padding:12px 20px;border-radius:15px;margin-bottom:20px;
  box-shadow:0 4px 6px rgba(0,0,0,.12);display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

.nav-link{padding:8px 18px;background:#1a5f3f;color:white;
  text-decoration:none;border-radius:8px;font-weight:bold;font-size:.9em;transition:all .3s;}

.nav-link:hover{background:#0f4a30;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.2);}


/* ─────────────────────────────────────────────────────────────────────────────
   3. Indicateur de score (Ulysse)
   ───────────────────────────────────────────────────────────────────────────── */

.ulysse-container{position:fixed;top:20px;right:20px;
  background:#1a5f3f;border-radius:12px;
  padding:8px 15px;box-shadow:0 3px 10px rgba(0,0,0,.2);z-index:999;color:white;font-weight:bold;}


/* ─────────────────────────────────────────────────────────────────────────────
   4. Avatar Fahmi (présent en mode devoir, bordure verte au lieu de violette)
   ───────────────────────────────────────────────────────────────────────────── */

.agent-avatar{position:fixed;bottom:30px;left:30px;z-index:1000;animation:float 3s ease-in-out infinite;}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.avatar-image{font-size:2.5em;background:white;border-radius:50%;width:72px;height:72px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 20px rgba(0,0,0,.3);cursor:pointer;border:4px solid #1a5f3f;}

.avatar-speech{position:absolute;bottom:82px;left:-20px;background:white;
  padding:13px 18px;border-radius:14px;box-shadow:0 5px 20px rgba(0,0,0,.2);
  max-width:270px;display:none;font-size:.88em;border:2px solid #1a5f3f;line-height:1.6;}

.avatar-speech.show{display:block;}


/* ─────────────────────────────────────────────────────────────────────────────
   5. Container principal
   ───────────────────────────────────────────────────────────────────────────── */

.container{max-width:900px;margin:0 auto;background:white;border-radius:20px;
  padding:32px;box-shadow:0 10px 30px rgba(0,0,0,.25);}


/* ─────────────────────────────────────────────────────────────────────────────
   6. Titres et sous-titres
   ───────────────────────────────────────────────────────────────────────────── */

.page-title{text-align:center;color:#0f4a30;font-size:2em;margin-bottom:6px;font-weight:800;}

.page-subtitle{text-align:center;color:#5a6b62;margin-bottom:18px;}


/* ─────────────────────────────────────────────────────────────────────────────
   7. Badges d'information
   ───────────────────────────────────────────────────────────────────────────── */

.page-info-bar{display:flex;justify-content:center;gap:12px;margin-bottom:18px;flex-wrap:wrap;}

.info-badge{padding:5px 14px;border-radius:20px;font-size:.8em;font-weight:700;}

/* Badge classe (السابعة أساسي) — vert très pâle */
.badge-class{background:#e8efe9;color:#0f4a30;border:1px solid #c5d6cb;}

/* Badge opération (MIX-MIX) — vert pâle plus appuyé */
.badge-op{background:#dde9e0;color:#1a5f3f;border:1px solid #b8cdc0;}

/* Badge niveau (سهل) — accent moutarde discret pour distinguer du reste */
.badge-lvl{background:#f5efde;color:#7a5f10;border:1px solid #d8c98a;}


/* ─────────────────────────────────────────────────────────────────────────────
   8. Boîte vidéo (apaisée pour le mode devoir)
   Remplace l'ancien dégradé rose-rouge par un vert sobre.
   ───────────────────────────────────────────────────────────────────────────── */

.video-box{text-align:center;background:#e8efe9;
  border:1px solid #b8cdc0;
  padding:18px 22px;border-radius:15px;margin:16px 0;}

.video-box h3{color:#0f4a30;margin-bottom:10px;}

.video-btn{padding:10px 20px;background:#1a5f3f;color:white;border:none;border-radius:10px;
  font-size:.95em;font-weight:bold;cursor:pointer;transition:background .2s;}

.video-btn:hover{background:#0f4a30;}


/* ─────────────────────────────────────────────────────────────────────────────
   9. Barre de progression
   ───────────────────────────────────────────────────────────────────────────── */

.progress-container{margin-bottom:20px;}

.progress-bar-outer{background:#e8efe9;height:26px;border-radius:13px;overflow:hidden;margin-bottom:6px;}

.progress-bar-inner{background:#2d8a5f;height:100%;width:0%;
  transition:width .5s;display:flex;align-items:center;justify-content:center;
  color:white;font-weight:bold;font-size:.85em;}

.progress-text{text-align:center;color:#5a6b62;font-size:.88em;}


/* ─────────────────────────────────────────────────────────────────────────────
   10. Bandeau de section
   ───────────────────────────────────────────────────────────────────────────── */

.section-title{background:#1a5f3f;color:white;
  padding:12px 20px;border-radius:12px;margin-bottom:16px;font-size:1.2em;font-weight:bold;text-align:center;}


/* ─────────────────────────────────────────────────────────────────────────────
   11. Barre de modes (manuel / automatique)
   ───────────────────────────────────────────────────────────────────────────── */

.mode-bar{display:flex;justify-content:center;gap:10px;margin-bottom:18px;}

.mode-btn{padding:9px 22px;border-radius:20px;border:2px solid #1a5f3f;background:white;
  color:#1a5f3f;font-weight:bold;cursor:pointer;font-size:.9em;transition:all .2s;}

.mode-btn.active{background:#1a5f3f;color:white;}


/* ─────────────────────────────────────────────────────────────────────────────
   12. Zone manuelle (saisie d'exercices)
   ───────────────────────────────────────────────────────────────────────────── */

.manual-zone{display:none;background:#f5faf6;border-radius:14px;padding:20px;margin-bottom:18px;}

.manual-zone.show{display:block;}

.manual-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  direction:ltr;justify-content:center;margin-bottom:14px;}

.frac-inp{display:inline-flex;flex-direction:column;align-items:center;gap:4px;}

.frac-inp input{width:72px;padding:8px;border:2px solid #1a5f3f;border-radius:8px;
  text-align:center;font-size:1.1em;}

.frac-sep{width:76px;height:2px;background:#333;}

.op-select{padding:8px 12px;border:2px solid #1a5f3f;border-radius:8px;font-size:1.1em;background:white;}

.btn-add-exo{padding:9px 20px;background:#1a5f3f;color:white;
  border:none;border-radius:10px;font-size:.88em;font-weight:bold;cursor:pointer;transition:background .2s;}

.btn-add-exo:hover{background:#0f4a30;}

.manual-list{list-style:none;}

.manual-item{display:flex;align-items:center;justify-content:space-between;background:white;
  padding:10px 16px;border-radius:10px;margin-bottom:8px;
  border-right:4px solid #1a5f3f;font-size:1.05em;direction:ltr;}

.manual-item .del-btn{background:none;border:none;color:#dc3545;font-size:1.2em;cursor:pointer;}

.btn-launch{width:100%;padding:12px;background:#2d8a5f;color:white;
  border:none;border-radius:12px;font-size:1em;font-weight:800;cursor:pointer;
  margin-top:10px;transition:background .2s;}

.btn-launch:hover{background:#1a5f3f;}


/* ─────────────────────────────────────────────────────────────────────────────
   13. Zone d'exercices et succès final
   ───────────────────────────────────────────────────────────────────────────── */

.exo-zone{margin-bottom:10px;}

.final-success{display:none;text-align:center;padding:32px;
  background:#1a5f3f;color:white;border-radius:20px;margin-top:22px;}

.final-success.show{display:block;}

.final-success h2{font-size:2em;margin-bottom:12px;}


/* ─────────────────────────────────────────────────────────────────────────────
   14. Pagination (précédente / suivante)
   ───────────────────────────────────────────────────────────────────────────── */

.nav-pages{display:flex;justify-content:space-between;align-items:center;
  margin-top:22px;padding-top:18px;border-top:2px solid #e8efe9;}

.btn-nav{padding:10px 22px;border:none;border-radius:10px;font-size:.9em;font-weight:bold;cursor:pointer;}

.btn-prev{background:#e8efe9;color:#0f4a30;}

.btn-next{background:#1a5f3f;color:white;transition:background .2s;}

.btn-next:hover{background:#0f4a30;}

.btn-nav:disabled{opacity:.4;cursor:not-allowed;}

.page-indicator{font-size:.9em;color:#5a6b62;font-weight:bold;}


/* ─────────────────────────────────────────────────────────────────────────────
   15. Modale vidéo (rendue sobre, fond plus neutre)
   ───────────────────────────────────────────────────────────────────────────── */

.video-modal{display:none;position:fixed;inset:0;background:rgba(15,74,48,.85);
  z-index:9998;align-items:center;justify-content:center;}

.video-modal.show{display:flex;}

.video-modal-box{background:#1a2520;border-radius:16px;padding:18px;width:90%;max-width:680px;}

.video-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}

.video-modal-title{color:white;font-weight:bold;}

.video-modal-close{width:30px;height:30px;background:rgba(255,255,255,.15);
  border:none;color:white;border-radius:50%;cursor:pointer;}

.video-frame-wrap{position:relative;padding-bottom:56.25%;height:0;border-radius:10px;overflow:hidden;}

.video-frame-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}

.no-video{background:#2d3530;border-radius:10px;padding:40px;text-align:center;color:#aaa;}


/* ─────────────────────────────────────────────────────────────────────────────
   16. Cartes ERC (bordure colorée selon l'état)
   IMPORTANT : les couleurs des états (ok/faux/fini) sont PRÉSERVÉES.
   Ce sont les codes pédagogiques universels (vert=succès, rouge=erreur).
   Seul l'état "neutre" passe en vert forêt pour rester dans la palette.
   ───────────────────────────────────────────────────────────────────────────── */

.erc{border-right:5px solid #1a5f3f!important;margin-bottom:12px;}
.erc.erc-ok{border-right-color:#22c55e!important;}
.erc.erc-faux{border-right-color:#ef4444!important;}
.erc.erc-fini{border-right-color:#a0a0a0!important;}


/* ============================================================================
   RESPONSIVE
   Les media queries sont strictement identiques à basic.css en structure.
   Seules les couleurs ont changé là où c'était nécessaire.
   ============================================================================ */


/* ─────────────────────────────────────────────────────────────────────────────
   Tablette (≤ 1024px)
   ───────────────────────────────────────────────────────────────────────────── */

@media(max-width:1024px){
  .container{padding:24px;}
  .top-nav{padding:10px 14px;gap:10px;}
  .ulysse-container{top:14px;right:14px;}
}


/* ─────────────────────────────────────────────────────────────────────────────
   Mobile (≤ 768px)
   ───────────────────────────────────────────────────────────────────────────── */

@media(max-width:768px){
  body{padding:12px;}
  .container{padding:16px;border-radius:16px;}
  .page-title{font-size:1.5em;line-height:1.4;}
  .page-subtitle{font-size:.95em;line-height:1.6;}
  .top-nav{padding:10px 12px;gap:8px;}
  .nav-link{padding:8px 14px;font-size:.85em;}
  .page-info-bar{gap:8px;}
  .info-badge{font-size:.76em;padding:5px 12px;}
  .mode-bar{flex-wrap:wrap;gap:8px;}
  .mode-btn{padding:8px 16px;font-size:.85em;}
  .manual-zone{padding:14px;}
  .manual-form{gap:6px;}
  .frac-inp input{width:62px;padding:7px;font-size:1em;}
  .frac-sep{width:64px;}
  .manual-item{padding:9px 12px;font-size:.95em;}
  .btn-launch,.btn-add-exo,.btn-print,.btn-exercises,.video-btn{min-height:44px;}
  .nav-pages{gap:10px;flex-wrap:wrap;}
  .btn-nav{padding:9px 16px;font-size:.85em;}
  .video-modal-box{width:94%;padding:14px;}
  .ulysse-container{position:static;margin:0 auto 12px;display:table;}
  .agent-avatar{bottom:18px;left:18px;}
  .avatar-image{width:60px;height:60px;font-size:2em;}
  .avatar-speech{max-width:220px;left:-10px;bottom:70px;font-size:.82em;padding:10px 12px;}
}


/* ─────────────────────────────────────────────────────────────────────────────
   Petit mobile (≤ 480px)
   ───────────────────────────────────────────────────────────────────────────── */

@media(max-width:480px){
  body{padding:8px;}
  .container{padding:12px;border-radius:14px;}
  .top-nav{padding:8px;gap:6px;}
  .nav-link{width:100%;text-align:center;font-size:.82em;padding:10px 12px;}
  .page-title{font-size:1.25em;}
  .page-subtitle{font-size:.88em;}
  .section-title{font-size:1em;padding:10px 12px;}
  .manual-zone{padding:10px;}
  .manual-form{flex-direction:column;align-items:center;}
  .frac-inp input{width:58px;font-size:.95em;}
  .frac-sep{width:60px;}
  .op-select{font-size:1em;width:100%;max-width:220px;}
  .btn-add-exo{width:100%;}
  .manual-item{font-size:.9em;padding:8px 10px;}
  .nav-pages{flex-direction:column;align-items:stretch;}
  .btn-nav{width:100%;}
  .page-indicator{text-align:center;width:100%;}
  .video-box{padding:14px 12px;}
  .video-box h3{font-size:1em;line-height:1.5;}
  .video-btn{width:100%;}
  .agent-avatar{bottom:12px;left:12px;}
  .avatar-image{width:54px;height:54px;font-size:1.8em;border-width:3px;}
  .avatar-speech{max-width:180px;left:0;bottom:62px;font-size:.78em;padding:8px 10px;}
}

/* ============================================================================
   FIN basic_exam.css
   ============================================================================ */