/* ============================================================================
   stat-atelier.css — habillage commun des ateliers de statistiques (7e/8e/9e).
   Reprend le design system Devoirati (--dv-*) ; aucune dependance externe.

   REGLE BIDI, apprise a l'ecran et non negociable :
   `unicode-bidi:plaintext` deduit la direction du 1er caractere FORT. Une
   chaine comme « [10 ; 15[ » n'en contient aucun : elle heritait du RTL de la
   page et s'affichait « ]15 ; 10] », crochets miroites. Tout ce qui est
   mathematique porte donc .val => direction:ltr + unicode-bidi:isolate.
   Et JAMAIS un mot arabe dans un bloc de calcul : il bascule toute la ligne
   (« 12 <= 22 <= 27 » devenait « 27 >= 22 >= 12 »).
   ========================================================================== */

body{margin:0;background:var(--dv-bg,#f8f9fa);font-family:var(--dv-font-ar),'Cairo',sans-serif;
     color:var(--dv-text,#333)}
.wrap{max-width:900px;margin:0 auto;padding:16px}

.hd{background:var(--dv-gradient-primary,linear-gradient(135deg,#667eea,#764ba2));color:#fff;
    border-radius:var(--dv-radius-lg,15px);padding:18px 22px;margin-bottom:16px}
.hd h1{margin:0 0 4px;font-size:1.35rem;font-weight:800}
.hd p{margin:0;opacity:.9;font-size:.9rem}

.step{background:var(--dv-surface,#fff);border:1px solid var(--dv-border,#e5e7eb);
      border-radius:var(--dv-radius-lg,15px);padding:16px 18px;margin-bottom:16px;
      box-shadow:var(--dv-shadow-sm,0 1px 3px rgba(0,0,0,.08))}
.step>h2{margin:0 0 12px;font-size:1.05rem;color:var(--dv-text-strong,#2c3e50);
         display:flex;align-items:center;gap:8px}
.num{background:var(--dv-primary,#667eea);color:#fff;width:28px;height:28px;border-radius:50%;
     display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;flex:none}

table{border-collapse:collapse;width:100%;margin:10px 0;font-size:.92rem}
th,td{border:1px solid var(--dv-border,#e5e7eb);padding:7px 6px;text-align:center}
th{background:var(--dv-surface-alt,#f8f9fa);color:var(--dv-text-strong,#2c3e50);font-weight:700}
.val{font-family:var(--dv-font-mono),ui-monospace,monospace;direction:ltr;unicode-bidi:isolate}
td.hole{background:#fffbeb;color:#b45309;font-weight:700}
td.cell-in{padding:3px}
td.cell-in input{width:100%;box-sizing:border-box;border:2px solid var(--dv-border,#e5e7eb);
     border-radius:6px;padding:5px 2px;text-align:center;font-size:.92rem;
     font-family:var(--dv-font-mono),ui-monospace,monospace;direction:ltr}
td.cell-in input.good{border-color:#16a34a;background:#f0fdf4}
td.cell-in input.bad{border-color:#dc2626;background:#fef2f2}

.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.fig{background:#fff;border:1px solid var(--dv-border,#e5e7eb);
     border-radius:var(--dv-radius,12px);padding:6px;overflow-x:auto}

.ask{background:var(--dv-info-bg,#e7f3ff);border-inline-start:4px solid var(--dv-info,#0d6efd);
     border-radius:var(--dv-radius-sm,8px);padding:10px 12px;margin:10px 0}
.ask label{display:inline-flex;align-items:center;gap:6px;margin-inline-end:10px}
.ask input[type=text]{font-family:var(--dv-font-mono),ui-monospace,monospace;direction:ltr;
     text-align:center;width:120px;padding:7px 8px;border:2px solid var(--dv-border,#e5e7eb);
     border-radius:var(--dv-radius-sm,8px);font-size:1rem}
.qline{margin:8px 0}
.fb{margin-inline-start:8px;font-weight:700;font-size:.92rem}
.ok{color:var(--dv-success-text,#155724)} .ko{color:var(--dv-danger-text,#842029)}

.sol{display:none;background:var(--dv-success-bg,#d4edda);
     border-inline-start:4px solid var(--dv-success,#28a745);
     border-radius:var(--dv-radius-sm,8px);padding:12px 14px;margin-top:12px;line-height:1.9}
.sol.on{display:block}
.sol h3{margin:0 0 8px;font-size:1rem;color:var(--dv-success-text,#155724)}
.sol h4{margin:14px 0 4px;font-size:.95rem;color:var(--dv-text-strong,#2c3e50)}
/* max-width:100% est INDISPENSABLE : avec `white-space:nowrap` seul, la boite
   prenait la largeur de son contenu (830 px mesures) et debordait du cadre —
   dans une page RTL c'est le DEBUT de la ligne qui sortait de l'ecran, donc le
   premier terme du calcul. Contrainte a 100 %, le debordement devient un
   defilement interne qui commence bien a gauche. */
.calc{direction:ltr;unicode-bidi:isolate;text-align:left;
      font-family:var(--dv-font-mono),ui-monospace,monospace;background:#fff;border-radius:6px;
      padding:6px 10px;margin:6px 0;display:block;overflow-x:auto;white-space:nowrap;
      max-width:100%;box-sizing:border-box}
.piege{border-top:1px dashed #86efac;padding-top:8px;margin-top:12px}

.rule{background:var(--dv-warning-bg,#fff3cd);border-inline-start:4px solid var(--dv-warning,#ffc107);
      border-radius:var(--dv-radius-sm,8px);padding:10px 12px;margin:10px 0;font-size:.92rem;line-height:1.8}
.hint{font-size:.85rem;color:var(--dv-text-muted,#666);margin-top:6px}
.score{font-weight:800;font-size:.95rem;margin-inline-start:10px}