/* ============================================================================
   recherche.css — la page de recherche de Devoirati.
   Reprend les jetons du design system (--dv-*). Aucune dependance externe.
   ========================================================================== */
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:1000px;margin:0 auto;padding:16px 16px 60px}

.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:14px;
    display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hd h1{margin:0;font-size:1.3rem;font-weight:800;flex:1}
.hd .retour{color:#fff;text-decoration:none;background:rgba(255,255,255,.18);
    border-radius:999px;padding:6px 14px;font-size:.85rem;font-weight:700}
.hd .retour:hover{background:rgba(255,255,255,.3)}

/* ── la barre de recherche ─────────────────────────────────────────────── */
.boite{position:sticky;top:0;z-index:20;background:var(--dv-bg,#f8f9fa);padding:8px 0 10px}
.champ{display:flex;align-items:center;gap:10px;background:var(--dv-surface,#fff);border:2px solid var(--dv-primary,#667eea);
   border-radius:999px;padding:10px 18px;box-shadow:var(--dv-shadow-md,0 6px 22px rgba(102,126,234,.16))}
.champ input{flex:1;border:0;outline:0;font-size:1.1rem;font-family:inherit;background:transparent;
   color:var(--dv-text,#333)}
.champ .loupe{font-size:1.2rem}
.champ button.vider{border:0;background:transparent;font-size:1.1rem;cursor:pointer;color:var(--dv-text-muted,#666)}

/* ── filtres ───────────────────────────────────────────────────────────── */
.filtres{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px;align-items:center}
.filtres .lbl{font-size:.8rem;color:var(--dv-text-muted,#666);font-weight:700;margin-inline-end:4px}
.jeton{border:1.5px solid var(--dv-border,#e5e7eb);background:var(--dv-surface,#fff);border-radius:999px;
   padding:5px 13px;font-size:.85rem;font-family:inherit;cursor:pointer;color:var(--dv-text-strong,#2c3e50);
   transition:all .15s}
.jeton:hover{border-color:var(--dv-primary,#667eea)}
.jeton.on{background:var(--dv-gradient-primary,linear-gradient(135deg,#667eea,#764ba2));
   color:#fff;border-color:transparent;font-weight:700}
select.jeton{padding-inline-end:26px}

/* ── resultats ─────────────────────────────────────────────────────────── */
.compte{font-size:.88rem;color:var(--dv-text-muted,#666);margin:12px 2px 8px;font-weight:700}
.grp{margin-bottom:14px}
.grp-t{font-size:.92rem;font-weight:800;color:var(--dv-primary-strong,#4c51bf);
   padding:6px 2px;border-bottom:2px solid var(--dv-border-soft,#eef2ff);margin-bottom:6px}
.res{display:block;background:var(--dv-surface,#fff);border:1px solid var(--dv-border,#e5e7eb);
   border-radius:var(--dv-radius,12px);padding:10px 14px;margin-bottom:6px;text-decoration:none;
   color:inherit;transition:all .15s}
.res:hover,.res.sel{border-color:var(--dv-primary,#667eea);
   box-shadow:var(--dv-shadow-sm,0 1px 3px rgba(0,0,0,.08));transform:translateY(-1px)}
.res .t{font-weight:700;font-size:.98rem;color:var(--dv-text-strong,#2c3e50);line-height:1.5}
.res .t mark{background:#fde047;color:inherit;border-radius:3px;padding:0 2px}
.res .m{font-size:.78rem;color:var(--dv-text-muted,#666);margin-top:3px;
   display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.badge{border-radius:999px;padding:1px 9px;font-size:.74rem;font-weight:700;white-space:nowrap}
.b-act{background:#dcfce7;color:#166534} .b-vid{background:#dbeafe;color:#1e40af}
.b-quiz{background:#fef9c3;color:#854d0e} .b-qcm{background:#fef9c3;color:#854d0e}
.b-bina{background:#ffedd5;color:#9a3412} .b-ex{background:#f3e8ff;color:#6b21a8}
.b-err{background:#fee2e2;color:#991b1b} .b-chain{background:#cffafe;color:#155e75}

.vide{background:var(--dv-surface,#fff);border:1px dashed var(--dv-border,#e5e7eb);border-radius:var(--dv-radius,12px);
   padding:20px;text-align:center;color:var(--dv-text-muted,#666)}
.plus{display:block;width:100%;margin-top:8px;padding:10px;border:1.5px dashed var(--dv-primary,#667eea);
   background:var(--dv-surface,#fff);border-radius:var(--dv-radius,12px);font-family:inherit;font-size:.9rem;
   font-weight:700;color:var(--dv-primary-strong,#4c51bf);cursor:pointer}

/* ── aide au demarrage ─────────────────────────────────────────────────── */
.depart{background:var(--dv-surface,#fff);border:1px solid var(--dv-border,#e5e7eb);border-radius:var(--dv-radius-lg,15px);
   padding:16px 18px;margin-top:10px}
.depart h2{margin:0 0 8px;font-size:1rem;color:var(--dv-text-strong,#2c3e50)}
.depart p{margin:0 0 10px;font-size:.88rem;color:var(--dv-text-muted,#666)}
.nuage{display:flex;flex-wrap:wrap;gap:6px}
.hist{font-size:.85rem}
.hist .jeton{border-style:dashed}

/* ── clair / sombre ──────────────────────────────────────────────────────────
   Les fonds de carte suivent deja `--dv-surface` du design system. Restent les
   huit pastilles de rubrique et le surlignage : leurs couleurs sont ecrites en
   dur (pastel clair + texte fonce) et ne peuvent pas s'inverser toutes seules.
   Le bloc est ecrit DEUX FOIS, comme partout dans le socle :
     · `prefers-color-scheme` + `:not([data-theme="light"])` → l'appareil sombre,
       sauf si l'eleve a explicitement demande le clair ;
     · `[data-theme="dark"]`                                 → son choix, meme
       sur un appareil clair.
   ⛔ Aucune couleur n'est definie UNIQUEMENT ici : chacune a sa version claire
   plus haut, sinon l'etat non estampille rend un theme sur le fond de l'autre.
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .res .t mark{background:#8a6d0b;color:#fff8dc}
  :root:not([data-theme="light"]) .b-act {background:#14301d;color:#9fe3b2}
  :root:not([data-theme="light"]) .b-vid {background:#12263a;color:#a9cbe6}
  :root:not([data-theme="light"]) .b-quiz,
  :root:not([data-theme="light"]) .b-qcm {background:#332b14;color:#eed79a}
  :root:not([data-theme="light"]) .b-bina{background:#33230f;color:#f0c99a}
  :root:not([data-theme="light"]) .b-ex  {background:#281a38;color:#d9bdf0}
  :root:not([data-theme="light"]) .b-err {background:#35171b;color:#f3b4ba}
  :root:not([data-theme="light"]) .b-chain{background:#12262e;color:#a9d9e6}
}
:root[data-theme="dark"] .res .t mark{background:#8a6d0b;color:#fff8dc}
:root[data-theme="dark"] .b-act {background:#14301d;color:#9fe3b2}
:root[data-theme="dark"] .b-vid {background:#12263a;color:#a9cbe6}
:root[data-theme="dark"] .b-quiz,
:root[data-theme="dark"] .b-qcm {background:#332b14;color:#eed79a}
:root[data-theme="dark"] .b-bina{background:#33230f;color:#f0c99a}
:root[data-theme="dark"] .b-ex  {background:#281a38;color:#d9bdf0}
:root[data-theme="dark"] .b-err {background:#35171b;color:#f3b4ba}
:root[data-theme="dark"] .b-chain{background:#12262e;color:#a9d9e6}