/* =============================================================
   ENTETE.CSS — Mimba-Educ : l'en-tête commun à toutes les pages
   version 1.2 — 2026-10-27 (1.1 : le bouton et la fenêtre des outils suivent le thème du site ; 1.2 : outils en icônes seulement, nom au survol ; boutons en contour fin, plus de fond plein)
     - le logo rond rouge (img/logo-mimba.svg) ;
     - tout à droite : le bouton « Outils pédagogiques » et le drapeau (img/drapeau-tunisie.svg) ;
     - la fenêtre flottante des outils (js/entete.js, dossier OUTILS/).
   Pour changer le logo, le drapeau ou leur place : seulement ce fichier, les deux images et js/entete.js.
   ============================================================= */

/* ── le logo ── */
.brand-logo{width:42px!important;height:42px!important;padding:0!important;background:none!important;border-radius:50%!important;box-shadow:none!important;
  filter:drop-shadow(0 4px 10px rgba(225,29,72,.35));animation:mbEntree .7s cubic-bezier(.34,1.56,.64,1) both;transition:transform .35s cubic-bezier(.34,1.56,.64,1),filter .3s}
.brand-logo img{width:100%!important;height:100%!important;border-radius:50%!important;object-fit:contain;display:block}
a.brand:hover .brand-logo{transform:rotate(-8deg) scale(1.08);filter:drop-shadow(0 6px 16px rgba(225,29,72,.55))}
.logo-wrap:has(img[src$="logo-mimba.svg"]){background:none!important;box-shadow:0 4px 10px rgba(225,29,72,.3)!important;padding:0!important}
.logo-wrap img[src$="logo-mimba.svg"]{width:100%!important;height:100%!important;border-radius:50%;background:none}
@keyframes mbEntree{from{opacity:0;transform:scale(.4) rotate(-40deg)}}

/* ── tout à droite : outils + drapeau ── */
.mb-droite{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:6px}
.mb-droite.mb-flottant{position:fixed;top:12px;right:14px;z-index:8000}
.mb-drapeau{display:block;width:44px;height:33px;flex:0 0 auto;filter:drop-shadow(0 3px 8px rgba(231,0,19,.35))}
.mb-drapeau img{width:100%;height:100%;display:block}
.mb-outils-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:999px;cursor:pointer;white-space:nowrap;
  font:800 13.5px 'Segoe UI Variable','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--text,#e6edf3);
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent,#38bdf8) 16%,transparent),color-mix(in srgb,var(--accent2,#a78bfa) 16%,transparent));border:1px solid color-mix(in srgb,var(--accent,#38bdf8) 45%,transparent);transition:background .2s,border-color .2s,transform .12s}
.mb-outils-btn:hover{border-color:var(--accent,#38bdf8);background:linear-gradient(100deg,color-mix(in srgb,var(--accent,#38bdf8) 28%,transparent),color-mix(in srgb,var(--accent2,#a78bfa) 28%,transparent))}
.mb-outils-btn:active{transform:scale(.96)}
.mb-outils-btn svg{width:18px;height:18px;flex:none}
.mb-outils-btn.on{background:transparent;color:var(--accent,#38bdf8);border-color:var(--accent,#38bdf8)}
.mb-compact .mb-outils-btn{height:34px;padding:0 10px}
.mb-compact .mb-outils-btn .lbl{display:none}
.mb-compact .mb-drapeau{width:38px;height:28px}
@media(max-width:900px){.mb-outils-btn .lbl{display:none}.mb-outils-btn{padding:0 10px}}
@media(max-width:480px){header .brand-txt,header .brand-name{display:none!important}}
@media(max-width:560px){.mb-drapeau{width:34px;height:25px}.mb-droite{gap:5px;margin-left:2px}.mb-outils-btn{height:34px;padding:0 9px}}

/* ── la fenêtre des outils ── */
#mbOutils{position:fixed;z-index:9500;right:18px;top:78px;width:440px;height:min(720px,calc(100vh - 96px));max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);
  display:flex;flex-direction:column;background:var(--surface,var(--bg2,#0e1530));color:var(--text,#e6edf3);border:1px solid color-mix(in srgb,var(--accent,#38bdf8) 45%,transparent);border-radius:16px;overflow:hidden;resize:both;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.3);font-family:'Segoe UI Variable','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;min-width:300px;min-height:300px}
#mbOutils[hidden]{display:none}
#mbOutils .mo-tete{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;background:var(--surface2,var(--bg,#111b3a));border-bottom:1px solid color-mix(in srgb,var(--accent,#38bdf8) 20%,transparent);cursor:move;user-select:none;touch-action:none}
#mbOutils .mo-tete b{flex:1;font-size:14px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mbOutils .mo-tete button{width:30px;height:30px;border-radius:9px;border:1px solid color-mix(in srgb,var(--accent,#38bdf8) 30%,transparent);background:color-mix(in srgb,var(--accent,#38bdf8) 8%,transparent);color:var(--text,#e6edf3);cursor:pointer;display:grid;place-items:center;padding:0}
#mbOutils .mo-tete button:hover{border-color:var(--accent,#38bdf8)}
#mbOutils .mo-tete svg{width:15px;height:15px}
#mbOutils .mo-liste{display:flex;flex-wrap:nowrap;gap:4px;padding:7px 10px;overflow-x:auto;border-bottom:1px solid color-mix(in srgb,var(--accent,#38bdf8) 15%,transparent);background:var(--surface,var(--bg2,#0e1530))}
#mbOutils .mo-liste button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:40px;height:34px;padding:0;border-radius:999px;cursor:pointer;font:700 12.5px inherit;font-family:inherit;color:var(--text-sub,#cbd5e1);background:rgba(127,127,127,.06);border:1px solid rgba(148,163,184,.25)}
#mbOutils .mo-liste button:hover{border-color:var(--accent,#38bdf8);color:var(--text,#fff)}
#mbOutils .mo-liste button.on{background:rgba(127,127,127,.06);color:var(--accent,#38bdf8);border-color:var(--accent,#38bdf8)}
#mbOutils .mo-liste svg{width:18px;height:18px;flex:none}
#mbOutils .mo-liste button span{display:none}
/* icones seulement, meme pour l'outil ouvert ; le nom apparait dans une bulle au survol (.mo-bulle) */
#mbOutils .mo-bulle{position:absolute;z-index:5;pointer-events:none;padding:4px 10px;border-radius:8px;white-space:nowrap;font:700 12px/1.3 inherit;font-family:inherit;
  color:#fff;background:#0f172a;border:1px solid rgba(148,163,184,.35);box-shadow:0 6px 16px rgba(0,0,0,.35);opacity:0;transform:translateY(-3px);transition:opacity .12s,transform .12s}
#mbOutils .mo-bulle.vue{opacity:1;transform:none}
#mbOutils .mo-choix{display:none;margin:8px 10px;padding:8px 10px;border-radius:10px;font:700 14px inherit;font-family:inherit;color:var(--text,#e6edf3);background:var(--surface2,var(--bg,#17234a));border:1px solid color-mix(in srgb,var(--accent,#38bdf8) 35%,transparent)}
#mbOutils iframe{flex:1;width:100%;border:0;background:#0b1020}
#mbOutils.mo-etroit .mo-liste{display:none}
#mbOutils.mo-etroit .mo-choix{display:block}
#mbOutilsMini{position:fixed;z-index:9500;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;cursor:pointer;
  font:800 13.5px 'Segoe UI',system-ui,sans-serif;color:var(--accent,#38bdf8);background:var(--surface,var(--bg2,#0e1530));border:1px solid var(--accent,#38bdf8);box-shadow:0 12px 30px -14px rgba(0,0,0,.6)}
#mbOutilsMini[hidden]{display:none}
#mbOutilsMini svg{width:17px;height:17px}
@media(max-width:700px){
  #mbOutils{left:0!important;top:0!important;right:0;bottom:0;width:100%!important;height:100%!important;max-width:none;max-height:none;border-radius:0;resize:none}
  #mbOutils .mo-tete{cursor:default}
}
@media print{.mb-droite,#mbOutils,#mbOutilsMini{display:none!important}}