/* ============================================================================
   PERLES DES INVENTAIRES — feuille de style commune
   ----------------------------------------------------------------------------
   La mise en page est celle de `inventaire_IR_complet.html`, relevée dans son
   propre CSS et non imitée de mémoire : bandeau sombre à filet doré, barre de
   pastilles chiffrées, barre latérale À DROITE groupée par catégorie, cartes
   d'accueil, puis un bloc par catégorie qui s'ouvre au clic.

   Sa palette est reprise telle quelle — et il se trouve que ses cinq couleurs
   de catégories correspondent exactement aux cinq rôles pédagogiques d'une
   perle. On ne les a donc pas choisies : on les a reconnues.
       --c1 bleu    → à toi (l'exercice)
       --c2 sarcelle→ le juste (l'exemple traité)
       --c3 violet  → la méthode et la règle
       --c4 ambre   → le piège
       --c5 grenat  → la faute

   UN SEUL endroit pour tout cela. Mesuré le 08/08/2026 : 39 générateurs
   portaient le même bug de mise en page, et 67 fichiers employaient 76 noms
   de couleurs pour 90 valeurs.

   Aucune police, aucun script, aucune image venue du réseau.
   ============================================================================ */

:root{
  /* — repris de inventaire_IR_complet.html, à l'identique — */
  --paper:#f8f7f3;
  --card:#ffffff;
  --ink:#111827;
  --muted:#6b7280;
  --border:#ddd5bb;

  --c1:#1d4ed8;  --c1l:#eff6ff;  --c1b:#bfdbfe;   /* à toi      */
  --c2:#0d6e6e;  --c2l:#f0fdfa;  --c2b:#99f6e4;   /* le juste   */
  --c3:#7c3aed;  --c3l:#f5f3ff;  --c3b:#ddd6fe;   /* la méthode */
  --c4:#b45309;  --c4l:#fffbeb;  --c4b:#fde68a;   /* le piège   */
  --c5:#be185d;  --c5l:#fdf2f8;  --c5b:#fbcfe8;   /* la faute   */

  --shadow-sm:0 2px 8px rgba(17,24,39,.07);
  --shadow-md:0 6px 24px rgba(17,24,39,.10);
  --radius:14px;

  /* — POLICES LOCALES —
     Le modèle appelle Cairo, Amiri et Scheherazade New depuis Google Fonts.
     Elles ne sont pas dans le dépôt : en file://, par double-clic, elles ne
     chargent jamais. Pile système, donc. Le jour où elles seront déposées
     dans assets/, il n'y a que ces trois lignes à changer. */
  --titre:"Sakkal Majalla","Traditional Arabic","Arabic Typesetting","Times New Roman",serif;
  --texte:"Segoe UI","Sakkal Majalla",Tahoma,Arial,sans-serif;
  --calcul:"Cambria Math","Segoe UI Symbol",Consolas,"Courier New",monospace;
}

/* — LE FILET DU NIVEAU —
   Le modèle a un filet doré. On garde le principe et on change la teinte selon
   le niveau : un élève sait d'un coup d'œil où il est, sans que la page change
   d'identité. */
[data-niveau="7"]{ --filet:#0e7490; --filet-clair:#7dd3e8; }
[data-niveau="8"]{ --filet:#c9a84c; --filet-clair:#f0d080; }
[data-niveau="9"]{ --filet:#a21caf; --filet-clair:#f0abfc; }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--texte); font-size:16px; line-height:1.7;
  background:var(--paper); color:var(--ink); direction:rtl;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--c3);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}

/* Tout calcul reste lu de GAUCHE À DROITE et isolé du contexte arabe.
   Sans unicode-bidi:isolate, « (−7)+(+4) = −3 » se retourne à l'affichage. */
.calc{
  font-family:var(--calcul); direction:ltr; unicode-bidi:isolate;
  display:inline-block; font-size:1.03em;
}

/* Le LaTeX rendu par MathJax. Même précaution : dans une page arabe, une
   formule doit rester lue de gauche à droite et coupée du contexte bidi. */
.tex{direction:ltr;unicode-bidi:isolate;display:inline-block}
mjx-container{direction:ltr!important;unicode-bidi:isolate}
mjx-container[display]{margin:.4em 0!important}
/* tant que MathJax n'a pas fini, on ne montre pas les \( \) crus */
.tex:not(:has(mjx-container)){opacity:.55}

/* ══ BANDEAU ══ */
.site-header{
  background:var(--ink); color:#fff;
  padding:24px 40px 20px; border-bottom:4px solid var(--filet);
}
.site-header h1{
  font-family:var(--titre); font-size:27px; color:var(--filet-clair);
  margin:0 0 4px; font-weight:700;
}
.site-header p{font-size:13.5px;opacity:.62;margin:0;max-width:78ch}
.site-header .source{
  font-size:12px;opacity:.42;margin:10px 0 0;
  direction:ltr;unicode-bidi:isolate;font-family:var(--calcul);
}
.retours{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.retours a{
  font-size:12.5px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  padding:5px 13px;border-radius:999px;
}
.retours a:hover{background:rgba(255,255,255,.22);text-decoration:none}

/* ══ BARRE DE PASTILLES ══ */
.stats-bar{
  display:flex;gap:14px;flex-wrap:wrap;
  padding:16px 40px;background:#fff;border-bottom:1px solid var(--border);
}
.stat-pill{
  display:flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:999px;
  font-size:13px;font-weight:600;border:1px solid var(--border);
}
.stat-pill .n{font-size:20px;font-weight:900;direction:ltr;unicode-bidi:isolate}

/* ══ MISE EN PAGE ══
   display:flex + RTL place le premier enfant à DROITE. Surtout PAS de
   row-reverse : c'est la règle qui renvoyait la barre à gauche dans 39
   générateurs, mesuré au getBoundingClientRect. */
.layout{display:flex;min-height:calc(100vh - 190px)}

/* ══ BARRE LATÉRALE — à droite ══ */
.sidebar{
  width:280px;min-width:250px;background:#fff;
  border-left:1px solid var(--border);      /* le filet est du côté INTERNE */
  padding:20px 14px;flex-shrink:0;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sidebar-title{
  font-family:var(--titre);font-size:15.5px;font-weight:700;color:var(--muted);
  letter-spacing:.5px;margin-bottom:14px;padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.nav-group{margin-bottom:18px}
.nav-group-label{
  font-size:11.5px;font-weight:700;letter-spacing:.6px;
  padding:4px 10px;border-radius:6px;margin-bottom:6px;display:block;
}
.nav-btn{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 12px;border:1px solid transparent;border-radius:9px;
  background:transparent;font-size:13.5px;font-weight:600;cursor:pointer;
  text-align:start;transition:background .14s,border-color .14s;
}
.nav-btn:hover{background:var(--paper);border-color:var(--border)}
.nav-btn.active{border-color:currentColor;font-weight:700}
.nav-btn .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:currentColor}
.nav-btn .badge{
  margin-inline-start:auto;font-size:11px;padding:2px 8px;border-radius:999px;
  font-weight:700;flex-shrink:0;direction:ltr;unicode-bidi:isolate;
}
.nav-btn .nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cat-1{color:var(--c1)} .cat-1 .badge{background:var(--c1l);color:var(--c1)} .nav-btn.active.cat-1{background:var(--c1l)}
.cat-2{color:var(--c2)} .cat-2 .badge{background:var(--c2l);color:var(--c2)} .nav-btn.active.cat-2{background:var(--c2l)}
.cat-3{color:var(--c3)} .cat-3 .badge{background:var(--c3l);color:var(--c3)} .nav-btn.active.cat-3{background:var(--c3l)}
.cat-4{color:var(--c4)} .cat-4 .badge{background:var(--c4l);color:var(--c4)} .nav-btn.active.cat-4{background:var(--c4l)}
.cat-5{color:var(--c5)} .cat-5 .badge{background:var(--c5l);color:var(--c5)} .nav-btn.active.cat-5{background:var(--c5l)}
.nav-group-label.cat-1{background:var(--c1l)} .nav-group-label.cat-2{background:var(--c2l)}
.nav-group-label.cat-3{background:var(--c3l)} .nav-group-label.cat-4{background:var(--c4l)}
.nav-group-label.cat-5{background:var(--c5l)}

.show-all-btn{
  padding:8px 18px;border:1.5px solid var(--border);border-radius:8px;
  background:#fff;font-size:13px;cursor:pointer;transition:all .15s;
  margin-top:6px;width:100%;
}
.show-all-btn:hover{background:var(--paper);border-color:#aaa}
.show-all-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.score{
  margin-top:14px;padding-top:12px;border-top:1px dashed var(--border);
  font-size:13px;color:var(--muted);
}
.score b{color:var(--c2);direction:ltr;unicode-bidi:isolate}

/* ══ CONTENU ══ */
.main{flex:1;padding:28px 36px 60px;min-width:0}

.intro-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;margin-bottom:26px;
}
.intro-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;display:flex;flex-direction:column;align-items:flex-start;
  gap:4px;box-shadow:var(--shadow-sm);cursor:pointer;text-align:start;
  transition:transform .16s,box-shadow .16s;
}
.intro-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.intro-card .ic-num{font-size:28px;font-weight:900;direction:ltr;unicode-bidi:isolate}
.intro-card .ic-label{font-size:12.5px;color:var(--muted)}
.consigne{color:var(--muted);font-size:14px;text-align:center;margin:26px 0}

/* Un bloc par catégorie — caché tant qu'on ne l'a pas choisi, comme le modèle */
.section-block{display:none;margin-bottom:32px}
.section-block.visible{display:block}
.section-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.section-icon{
  width:40px;height:40px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
}
.section-header h2{font-family:var(--titre);font-size:21px;font-weight:700;margin:0}
.section-header .compte{font-size:12.5px;color:var(--muted);margin-inline-start:auto}

/* ══ FICHE ══ */
.fiche{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow-sm);
}
.fiche-tete{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.fiche-tete h3{font-family:var(--titre);font-size:18px;margin:0;font-weight:700}
.code{
  font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:6px;
  background:var(--paper);color:var(--muted);border:1px solid var(--border);
  direction:ltr;unicode-bidi:isolate;
}
.etiq{font-size:11.5px;padding:2px 9px;border-radius:6px;background:var(--paper);
      color:var(--muted);border:1px solid var(--border)}

/* les blocs à sens fixe — un rôle, une couleur, partout la même */
.bloc{border-radius:10px;padding:11px 14px;margin:9px 0;border:1px solid}
.bloc .quoi{font-size:12px;font-weight:700;display:block;margin-bottom:5px;opacity:.92}
.bloc .corps-bloc{color:var(--ink);font-size:15.5px}
.bloc.regle  {background:var(--c3l);border-color:var(--c3b);color:var(--c3)}
.bloc.exemple{background:var(--c2l);border-color:var(--c2b);color:var(--c2)}
.bloc.faux   {background:var(--c5l);border-color:var(--c5b);color:var(--c5)}
.bloc.piege  {background:var(--c4l);border-color:var(--c4b);color:var(--c4)}
.bloc.atoi   {background:var(--c1l);border-color:var(--c1b);color:var(--c1)}

/* une étape par ligne : le séparateur ⁂ de la source devient un retour */
.etape{display:block;padding:2px 0}
.etape + .etape{border-top:1px dotted rgba(0,0,0,.09);margin-top:3px;padding-top:5px}

/* ══ « À TOI » ══ */
.atoi-ligne{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.atoi input{
  font-family:var(--calcul);font-size:16px;direction:ltr;text-align:left;
  padding:8px 12px;border:1.5px solid var(--c1b);border-radius:9px;
  background:#fff;color:var(--ink);min-width:150px;
}
.atoi input:focus{outline:none;border-color:var(--c1);box-shadow:0 0 0 3px rgba(29,78,216,.14)}
.btn{
  font-size:14px;font-weight:600;cursor:pointer;padding:8px 16px;
  border-radius:9px;border:1px solid transparent;background:var(--c3);color:#fff;
  transition:filter .15s;
}
.btn:hover{filter:brightness(1.09)}
.btn.calme{background:#fff;color:var(--muted);border-color:var(--border)}
.btn.calme:hover{border-color:var(--c3);color:var(--c3);filter:none}
.btn:disabled{opacity:.42;cursor:default;filter:none}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* l'aide graduée — un indice à la fois, jamais les deux d'un coup */
.indice{
  margin-top:8px;padding:9px 13px;border-radius:9px;
  background:#fff;border:1px dashed var(--c1b);color:var(--ink);font-size:15px;
}
.indice .quoi{display:block;font-size:11.5px;font-weight:700;color:var(--c1);margin-bottom:3px}

.verdict{font-size:14.5px;font-weight:600}
.verdict.bon{color:var(--c2)}
.verdict.pasencore{color:var(--c4)}

/* la correction reste FERMÉE tant que l'élève n'a pas cherché */
.correction[hidden]{display:none}
.correction{
  margin-top:10px;padding:11px 14px;border-radius:10px;
  background:var(--c3l);border:1px solid var(--c3b);
}
.correction .quoi{color:var(--c3);font-weight:700;font-size:12px;display:block;margin-bottom:5px}
.correction .cause{color:var(--c5);font-size:14px;margin-top:7px}
.correction .plan{
  margin-top:9px;padding-top:9px;border-top:1px dashed var(--c3b);
  font-size:14.5px;color:var(--ink);
}
.correction .plan b{color:var(--c3)}
.renvoi{margin-top:8px;font-size:13px;color:var(--muted)}

/* ══ PIED ══ */
footer{
  border-top:1px solid var(--border);padding:20px 40px 40px;
  text-align:center;font-size:13px;color:var(--muted);background:#fff;
}
.sans-js{
  margin:20px 40px;padding:14px 20px;background:var(--c4l);
  border:1px solid var(--c4b);border-inline-start:4px solid var(--c4);
  border-radius:10px;color:var(--c4);
}

@media (max-width:900px){
  .layout{flex-direction:column}
  .sidebar{position:static;width:100%;height:auto;border-left:none;
           border-bottom:1px solid var(--border)}
  .main{padding:18px 16px 40px}
  .site-header,.stats-bar,footer{padding-inline:16px}
}
@media print{
  .site-header,.sidebar,.stats-bar,.retours,.btn,.atoi-ligne,footer,.intro-grid,.consigne{display:none!important}
  .section-block{display:block!important}          /* tout s'imprime */
  .correction[hidden]{display:block!important}     /* le corrigé aussi */
  .fiche{break-inside:avoid;box-shadow:none}
  body{background:#fff}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}