/* ═══════════════════════════════════════════════════════════
   Devoirati — Générateurs PDF — style.css
   Fichier fixe. Ne pas modifier.
   Les couleurs accent sont définies dans chaque [chapitre].js
   via document.documentElement.style.setProperty('--orange',...)
═══════════════════════════════════════════════════════════ */

/* ── Variables globales ── */
:root{
  --ink:#1c1c2e; --ink2:#2d2d44;
  --paper:#fefdf8; --cream:#f4f0e6; --parchment:#ede8db;
  --orange:#d4580a; --orange2:#f39c12;   /* overridées par chapitre.js */
  --orange-rgb:212,88,10;                /* overridée par chapitre.js  */
  --teal:#0a7b7e; --teal2:#1abc9c;
  --violet:#6c3483; --red:#c0392b; --green:#1a7a3e;
  --border:#d8d2c4; --border2:#c5bfb0;
  --shadow:rgba(0,0,0,.12);
  --sidebar-bg:#1c1c2e;
}

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

/* ── Base ── */
body{
  background:#ddd8cc;
  font-family:'Segoe UI','Tahoma',Arial,sans-serif;
  min-height:100vh;
  direction:rtl;
}

/* ══════════════════════════════════════
   LAYOUT
══════════════════════════════════════ */
.app{display:grid;grid-template-columns:1040px 1fr;min-height:100vh;}
@media(max-width:960px){.app{grid-template-columns:1fr;}}

/* ══════════════════════════════════════
   SIDEBAR
══════════════════════════════════════ */
.sidebar{
  background:var(--sidebar-bg);
  color:#e8e2d8;
  padding:1.2rem;
  display:flex;flex-direction:column;gap:.8rem;
  border-left:3px solid var(--orange);
  overflow-y:auto;max-height:100vh;position:sticky;top:0;
}

/* Logo / titre chapitre */
.logo{text-align:center;padding-bottom:.8rem;border-bottom:1px solid rgba(255,255,255,.1);}
.logo-badge{
  display:inline-block;background:var(--orange);color:#fff;
  font-size:.58rem;font-weight:700;padding:.2rem .7rem;
  border-radius:20px;letter-spacing:.05em;margin-bottom:.4rem;
}
.logo h1{font-size:1.05rem;font-weight:800;color:#f4f0e6;line-height:1.35;}
.logo p{font-size:.65rem;color:rgba(232,226,216,.45);margin-top:.25rem;}

/* Blocs */
.s-block{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:7px;padding:.75rem;
}
.s-title{
  font-size:.58rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--orange2);
  margin-bottom:.55rem;display:flex;align-items:center;gap:.35rem;
}
.s-title::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.06);}

/* Boutons groupe (classe/niveau) */
.btn-group{display:flex;flex-wrap:wrap;gap:.25rem;}
.sel-btn{
  border:1.5px solid rgba(255,255,255,.12);border-radius:5px;
  background:transparent;color:rgba(232,226,216,.55);
  font-family:inherit;font-size:.68rem;cursor:pointer;
  padding:.28rem .55rem;transition:all .15s;
}
.sel-btn:hover{border-color:var(--orange2);color:var(--orange2);}
.sel-btn.on{
  border-color:var(--orange);
  background:rgba(var(--orange-rgb),.2);
  color:var(--orange2);font-weight:700;
}

/* Liste de types */
.type-list{display:flex;flex-direction:column;gap:.25rem;}
.type-btn{
  border:1.5px solid rgba(255,255,255,.09);border-radius:6px;
  background:transparent;color:rgba(232,226,216,.5);
  font-family:inherit;font-size:.68rem;cursor:pointer;
  padding:.4rem .65rem;transition:all .15s;
  text-align:right;display:flex;align-items:center;gap:.4rem;
}
.type-btn:hover{border-color:var(--orange2);color:var(--orange2);}
.type-btn.on{
  border-color:var(--orange);
  background:rgba(var(--orange-rgb),.14);
  color:#f4f0e6;
}
.ticon{font-size:.85rem;min-width:18px;text-align:center;}
.tlabel{flex:1;font-size:.68rem;line-height:1.3;}
.tbadge{
  font-size:.55rem;padding:.08rem .3rem;
  border:1px solid currentColor;border-radius:3px;
  opacity:.65;white-space:nowrap;
}

/* Grille formats */
.fmt-grid{display:grid;grid-template-columns:1fr 1fr;gap:.25rem;}
.fmt-btn{
  border:1.5px solid rgba(255,255,255,.09);border-radius:6px;
  background:transparent;color:rgba(232,226,216,.5);
  font-family:inherit;font-size:.65rem;cursor:pointer;
  padding:.38rem .4rem;transition:all .15s;
  text-align:center;line-height:1.35;
}
.fmt-btn:hover{border-color:var(--teal2);color:var(--teal2);}
.fmt-btn.on{border-color:var(--teal2);background:rgba(26,188,156,.12);color:var(--teal2);}

/* Inputs numériques */
.num-row{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.68rem;color:rgba(232,226,216,.55);
}
.num-inp{
  width:52px;background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.1);border-radius:5px;
  color:#f4f0e6;font-family:inherit;font-size:.8rem;
  padding:.28rem .35rem;text-align:center;outline:none;direction:ltr;
}
.num-inp:focus{border-color:var(--orange);}

/* Inputs texte */
input[type=text].txt-inp{
  width:100%;background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.1);border-radius:5px;
  color:#f4f0e6;font-family:inherit;font-size:.7rem;
  padding:.35rem .5rem;outline:none;margin-top:.25rem;text-align:right;
}
.txt-inp:focus{border-color:var(--orange);}

/* Toggles */
.tog-row{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.67rem;color:rgba(232,226,216,.55);padding:.18rem 0;
}
.tog{
  width:32px;height:17px;background:rgba(255,255,255,.1);
  border-radius:9px;cursor:pointer;position:relative;
  transition:background .2s;border:none;flex-shrink:0;
}
.tog::after{
  content:'';position:absolute;top:2px;right:2px;
  width:13px;height:13px;background:#888;
  border-radius:50%;transition:all .2s;
}
.tog.on{background:var(--orange);}
.tog.on::after{right:17px;background:#fff;}

/* Boutons action */
.btn-prev{
  width:100%;padding:.7rem;border:2px solid var(--teal2);
  border-radius:7px;background:transparent;color:var(--teal2);
  font-family:inherit;font-size:.82rem;font-weight:700;
  cursor:pointer;transition:all .2s;margin-top:.3rem;
}
.btn-prev:hover{background:rgba(26,188,156,.12);}
.btn-pdf{
  width:100%;padding:.75rem;border:none;border-radius:7px;margin-top:.25rem;
  background:linear-gradient(135deg,var(--orange),#9b2c2c);color:#fff;
  font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .2s;
}
.btn-pdf:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(0,0,0,.25);}
.btn-dl{
  width:100%;padding:.62rem;border:1.5px solid var(--orange);
  border-radius:7px;margin-top:.2rem;background:transparent;
  color:var(--orange2);font-family:inherit;font-size:.77rem;
  font-weight:700;cursor:pointer;transition:all .2s;
}
.btn-dl:hover{background:rgba(var(--orange-rgb),.1);}

/* ══════════════════════════════════════
   ZONE PRINCIPALE
══════════════════════════════════════ */
.main{padding:1.5rem;background:var(--cream);min-height:100vh;direction:rtl;}
.main-header{margin-bottom:1.2rem;}
.main-header h2{font-size:1.2rem;color:var(--ink);font-weight:700;}
.main-header p{font-size:.73rem;color:#999;margin-top:.2rem;}

/* État vide */
.empty{text-align:center;padding:5rem 2rem;color:#bbb;}
.empty-icon{font-size:3.5rem;display:block;margin-bottom:1rem;opacity:.4;}
.empty p{font-size:.8rem;line-height:1.8;}

/* ══════════════════════════════════════
   APERÇU PDF (simulation A4)
══════════════════════════════════════ */
.pdf-wrap{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:8px;}

.pdf-page{
  background:var(--paper);width:100%;min-height:1050px;
  padding:1.8cm 2cm;box-shadow:0 4px 24px var(--shadow);
  border-radius:2px;display:flex;flex-direction:column;
  position:relative;direction:rtl;
}
.pdf-page.corrpage{background:#f8f6ff;}

/* En-tête document */
.ph{
  display:flex;align-items:flex-start;justify-content:space-between;
  border-bottom:3px solid var(--ink);padding-bottom:.8rem;margin-bottom:.9rem;
}
.ph-left{flex:1;}
.ph-school{font-size:.6rem;color:#888;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.15rem;}
.ph-title{font-size:1rem;font-weight:800;color:var(--ink);margin-bottom:.1rem;}
.ph-sub{font-size:.72rem;color:var(--teal);font-style:italic;}
.ph-right{display:flex;flex-direction:column;align-items:flex-start;gap:.18rem;}
.badge{font-size:.58rem;font-weight:700;padding:.18rem .55rem;border-radius:3px;}
.b-class{background:var(--ink);color:#f4f0e6;}
.b-lvl{background:var(--orange);color:#fff;}
.b-pts{background:var(--cream);color:var(--ink);border:1px solid var(--border);}
.ph-pg{font-size:.6rem;color:#bbb;margin-top:.3rem;}

/* Infos élève */
.eleve-bar{
  display:flex;flex-wrap:wrap;gap:1.2rem;font-size:.72rem;color:#555;
  margin-bottom:.75rem;padding:.45rem .6rem;
  background:var(--cream);border-radius:4px;border:1px solid var(--border);
}
.eleve-bar span{display:flex;align-items:center;gap:.3rem;}
.eleve-line{display:inline-block;width:120px;border-bottom:1px solid #aaa;height:16px;vertical-align:bottom;}

/* Tableau de référence */
.crit-tbl{width:100%;border-collapse:collapse;font-size:.68rem;margin-bottom:.9rem;}
.crit-tbl thead th{background:var(--ink);color:#f4f0e6;padding:.35rem .55rem;text-align:right;font-weight:600;}
.crit-tbl td{border:1px solid var(--border);padding:.3rem .55rem;background:#fff;line-height:1.5;}
.crit-tbl tr:nth-child(even) td{background:#f8f5ee;}
.crit-d{font-family:'Courier New',monospace;font-weight:700;color:var(--orange);font-size:.82rem;}
.crit-r{color:var(--ink2);}
.crit-ex{color:#888;font-size:.62rem;font-style:italic;}

/* Barre de score */
.score-bar{
  display:flex;align-items:center;gap:.6rem;padding:.4rem .7rem;
  background:var(--cream);border:1px solid var(--border);
  border-radius:4px;margin-bottom:.75rem;
}
.score-lbl{font-size:.67rem;color:#888;white-space:nowrap;}
.score-boxes{display:flex;gap:.18rem;flex-wrap:wrap;flex:1;}
.sbox{width:16px;height:16px;border:1.5px solid var(--border2);border-radius:2px;background:#fff;}
.score-tot{font-size:.7rem;font-weight:700;color:var(--ink);white-space:nowrap;}

/* Sections d'exercices */
.exo-section{margin-bottom:.7rem;}
.sec-banner{display:flex;align-items:center;gap:.5rem;padding:.32rem .65rem;border-radius:4px;margin-bottom:.55rem;}
.sec-banner.f-vf  {background:#e8f8ee;border-right:4px solid var(--green);}
.sec-banner.f-err {background:#fde9e8;border-right:4px solid var(--red);}
.sec-banner.f-qcm {background:#ede9f8;border-right:4px solid var(--violet);}
.sec-banner.f-libre{background:#fff8e5;border-right:4px solid var(--orange);}
.sec-banner.f-manq{background:#e5f7f5;border-right:4px solid var(--teal);}
.sec-icon{font-size:.8rem;}
.sec-ttl{font-size:.72rem;font-weight:700;color:var(--ink);}
.sec-cnt{font-size:.62rem;color:#999;margin-right:auto;}

/* Exercice individuel */
.exo-item{
  margin-bottom:.6rem;padding:.55rem .7rem;
  border:1px solid var(--border);border-radius:4px;
  background:#fff;display:flex;align-items:flex-start;gap:.5rem;
}
.exo-n{font-size:.65rem;font-weight:700;color:#ccc;min-width:18px;padding-top:.1rem;text-align:center;flex-shrink:0;}
.exo-body{flex:1;}
.exo-q{font-size:.79rem;color:var(--ink);line-height:1.65;margin-bottom:.38rem;}
.exo-q .mn{font-family:'Courier New',monospace;background:#f5f2ec;padding:1px 4px;border-radius:2px;font-size:.88em;direction:ltr;display:inline-block;}

/* Format : صح / خطأ */
.vf-row{display:flex;gap:1.2rem;margin-top:.3rem;}
.vf-opt{display:flex;align-items:center;gap:.35rem;font-size:.76rem;color:var(--ink);}
.vf-circ{width:17px;height:17px;border:2px solid var(--border2);border-radius:50%;display:inline-block;background:#fff;flex-shrink:0;}

/* Format : QCM */
.qcm-grid{display:grid;grid-template-columns:1fr 1fr;gap:.28rem;margin-top:.38rem;}
.qcm-opt{display:flex;align-items:center;gap:.35rem;font-size:.74rem;color:var(--ink);}
.qcm-ltr{font-weight:700;color:var(--violet);min-width:16px;text-align:center;}
.qcm-circ{width:14px;height:14px;border:1.5px solid var(--border2);border-radius:50%;display:inline-block;background:#fff;flex-shrink:0;}

/* Format : ابحث عن الخطأ */
.err-proposed{background:#fde9e8;border:1px dashed var(--red);border-radius:3px;padding:.38rem .55rem;margin-bottom:.28rem;}
.err-tag{font-size:.58rem;color:var(--red);font-weight:700;margin-bottom:.1rem;}
.err-content{font-size:.76rem;color:var(--ink);line-height:1.5;}
.err-correct{display:flex;align-items:center;gap:.4rem;font-size:.68rem;color:#888;margin-top:.28rem;}
.err-correct-lbl{color:var(--red);font-weight:700;white-space:nowrap;}
.err-line{flex:1;border-bottom:1px solid #ccc;height:18px;}

/* Format : إجابة حرة */
.libre-zone{margin-top:.3rem;display:flex;flex-direction:column;gap:.18rem;}
.libre-ln{border-bottom:1px solid #ccc;height:19px;}

/* Format : عنصر ناقص */
.manq-display{
  font-size:1.25rem;font-family:'Courier New',monospace;font-weight:700;
  color:var(--ink);text-align:center;margin:.3rem 0;direction:ltr;letter-spacing:.08em;
}
.manq-sq{display:inline-block;width:26px;height:26px;border:2.5px solid var(--teal);border-radius:3px;background:#e5f7f5;vertical-align:middle;}
.manq-ans{display:flex;align-items:center;gap:.4rem;font-size:.7rem;color:#888;margin-top:.2rem;}
.manq-ans-line{flex:1;border-bottom:1px solid #ccc;height:18px;}

/* Tableau à compléter */
.fill-tbl{width:100%;border-collapse:collapse;font-size:.72rem;margin-top:.4rem;direction:rtl;}
.fill-tbl th{background:var(--parchment);border:1px solid var(--border);padding:.3rem .5rem;font-weight:600;color:var(--ink);}
.fill-tbl td{border:1px solid var(--border);padding:.3rem .5rem;background:#fff;min-width:55px;}

/* Indice */
.hint-box{background:#fffbe6;border-right:3px solid var(--orange2);padding:.3rem .55rem;margin-top:.38rem;border-radius:0 3px 3px 0;}
.hint-tag{font-size:.58rem;color:var(--orange);font-weight:700;margin-bottom:.08rem;}
.hint-txt{font-size:.68rem;color:#666;line-height:1.5;}

/* ══════════════════════════════════════
   PAGE CORRIGÉ
══════════════════════════════════════ */
.corr-hdr{
  background:var(--violet);color:#fff;padding:.65rem 1rem;
  display:flex;align-items:center;gap:.6rem;
  margin-bottom:.9rem;border-radius:3px;
}
.corr-badge{background:rgba(255,255,255,.2);font-size:.6rem;font-weight:700;padding:.2rem .55rem;border-radius:3px;letter-spacing:.08em;}
.corr-item{
  display:flex;align-items:flex-start;gap:.6rem;padding:.45rem .6rem;
  border:1px solid var(--border);border-radius:4px;background:#fff;margin-bottom:.42rem;
}
.corr-n{font-size:.67rem;font-weight:700;color:#ccc;min-width:20px;padding-top:.08rem;text-align:center;}
.corr-body{flex:1;}
.corr-q-excerpt{font-size:.68rem;color:#999;margin-bottom:.15rem;font-style:italic;}
.corr-rep{font-size:.78rem;color:var(--green);font-weight:700;margin-bottom:.12rem;}
.corr-just{font-size:.7rem;color:#555;line-height:1.5;}
.corr-err-note{font-size:.68rem;color:var(--red);margin-top:.1rem;}

/* Pied de page */
.page-footer{
  margin-top:auto;padding-top:.7rem;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  font-size:.58rem;color:#bbb;
}
.footer-brand{color:var(--teal);}

/* ══════════════════════════════════════
   EN-TÊTE DEVOIRATI
══════════════════════════════════════ */
.dv-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:.45rem .9rem;
  background:linear-gradient(135deg,#1c1c2e 0%,#2d2d44 60%,#0a7b7e 100%);
  border-radius:4px 4px 0 0;
  margin:-1.8cm -2cm .85rem -2cm;
  border-bottom:3px solid var(--orange);
}
.dv-logo-zone{display:flex;align-items:center;gap:.55rem;}
.dv-logo-img{
  width:38px;height:38px;object-fit:contain;border-radius:6px;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.15);padding:2px;
}
.dv-logo-fallback{
  width:38px;height:38px;border-radius:6px;
  background:linear-gradient(135deg,var(--orange),#f39c12);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:900;color:#fff;
  border:1.5px solid rgba(255,255,255,.2);font-family:'Georgia',serif;flex-shrink:0;
}
.dv-brand{display:flex;flex-direction:column;gap:1px;}
.dv-name{font-size:.82rem;font-weight:800;color:#f4f0e6;line-height:1;}
.dv-name span{color:var(--orange2);}
.dv-url{font-size:.58rem;color:rgba(244,240,230,.5);letter-spacing:.04em;direction:ltr;}
.dv-center{text-align:center;}
.dv-slogan{font-size:.68rem;color:rgba(244,240,230,.75);font-style:italic;}
.dv-tagline{font-size:.55rem;color:rgba(244,240,230,.4);margin-top:1px;}
.dv-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.dv-subject{font-size:.68rem;font-weight:700;color:var(--teal2);white-space:nowrap;}
.dv-level{font-size:.58rem;color:rgba(244,240,230,.45);}
.corrpage .dv-header{
  background:linear-gradient(135deg,#2c1654 0%,#6c3483 100%);
  border-bottom-color:var(--violet);
}

/* ══════════════════════════════════════
   OVERLAY PROGRESSION
══════════════════════════════════════ */
.prog-ov{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.65);z-index:200;
  align-items:center;justify-content:center;
}
.prog-ov.show{display:flex;}
.prog-box{
  background:var(--paper);border:2px solid var(--orange);
  border-radius:10px;padding:2rem;text-align:center;min-width:260px;direction:rtl;
}
.prog-box h3{color:var(--ink);margin-bottom:1rem;font-size:.95rem;}
.prog-track{height:7px;background:#ddd;border-radius:4px;overflow:hidden;margin-bottom:.5rem;}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--orange),#9b2c2c);transition:width .3s;}
.prog-msg{font-size:.72rem;color:#888;}

/* ══════════════════════════════════════
   IMPRESSION
══════════════════════════════════════ */
/* Format de la feuille. Sans cette regle, le navigateur imprime au format par
   defaut de sa locale — souvent Letter — et AJOUTE ses propres marges par
   dessus le padding de .pdf-page. Marge de feuille nulle, donc : les 1,2 cm
   sur 1,5 cm ci-dessous sont deja la marge voulue. */
@page{ size:A4; margin:0; }

@media print{
  .sidebar,.prog-ov,.main-header,.empty{display:none!important;}
  .main{padding:0;background:#fff;}
  .pdf-wrap{max-width:100%;}
  .pdf-page{box-shadow:none;break-after:page;padding:1.2cm 1.5cm;min-height:auto;}
  .pdf-page:last-child{break-after:auto;}
}