/* =============================================================
   ENTETE.CSS — Mimba-Educ : l'en-tête commun à toutes les pages
   version 1.5 — 2026-11-02 (1.5 : la partie gauche (drapeau, logo, Mimba-Educ, Fondateur Mohamed Bouhadida) la même sur toutes les pages ; 1.4 : drapeau à gauche, bouton à trois traits à droite, menu latéral, voir en bas ; 1.3 : 1.3 : nouveau logo, calligraphie rouge sans fond : plus d'arrondi ni de cercle autour ; 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/s-entete.js, dossier OUTILS/).
   Pour changer le logo, le drapeau ou leur place : seulement ce fichier, les deux images et js/s-entete.js.
   ============================================================= */

/* ── le logo ── */
.brand-logo{width:46px!important;height:46px!important;padding:0!important;background:none!important;border-radius:0!important;box-shadow:none!important;
  filter:drop-shadow(0 0 6px rgba(236,25,33,.45)) drop-shadow(0 3px 8px rgba(0,0,0,.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:0!important;object-fit:contain;display:block}
a.brand:hover .brand-logo{transform:rotate(-8deg) scale(1.08);filter:drop-shadow(0 0 10px rgba(236,25,33,.75))}
.logo-wrap:has(img[src$="logo-mimba.svg"]){background:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important;filter:drop-shadow(0 0 6px rgba(236,25,33,.45))}
.logo-wrap img[src$="logo-mimba.svg"]{width:100%!important;height:100%!important;border-radius:0;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}}

/* ═══════════ 1.4 (2026-11-02) : drapeau à gauche, bouton à trois traits à droite, MENU LATÉRAL (js/s-entete.js 1.7) ═══════════ */
header.mb-h > .mb-drapeau{margin-right:10px}
header.mb-h #menuBtn{display:none!important}                 /* l'ancien bouton Sommaire / Menu : remplacé par le menu latéral */
header.mb-h .mb-droite{margin-left:6px}
header.mb-h > nav.auth{margin-left:auto}                     /* page Bienvenue : les boutons restent à droite */
/* ── 1.5 : LA PARTIE GAUCHE, LA MÊME SUR TOUTES LES PAGES (ordinateur et téléphone) :
   drapeau, logo collé au drapeau, « Mimba-Educ » et dessous « Fondateur Mohamed Bouhadida » en écriture fine ── */
header.mb-h > .mb-drapeau{margin-right:-4px}
header.mb-h .brand-logo{width:37px!important;height:37px!important}
header.mb-h.smb-header > .logo{width:37px!important;height:37px!important;flex:none}
header.mb-h .brand{min-width:0;gap:7px}
header.mb-h .brand-txt,header.mb-h .brand-name{display:block!important}
header.mb-h .brand-name,header.mb-h.smb-header .site-name{font-size:15px!important;font-weight:900!important;line-height:1.15;letter-spacing:.01em;white-space:nowrap}
header.mb-h.smb-header .site-name{color:var(--text,#0f172a)}
header.mb-h.smb-header .site-name b{background:linear-gradient(90deg,var(--accent,#0ea5e9),var(--violet,#a78bfa));-webkit-background-clip:text;background-clip:text;color:transparent}
header.mb-h.smb-header > .site{display:block!important;margin-left:0}
header.mb-h .brand-sub,header.mb-h .site-author{display:none!important}
header.mb-h .mb-fond{display:block!important;margin-top:1px;font-size:10.5px;font-weight:300;font-style:normal;letter-spacing:.02em;line-height:1.2;white-space:nowrap;
  color:var(--text-sub,var(--muted,#94a3b8))!important;-webkit-text-fill-color:currentColor;background:none!important}
/* cours, séries, plan : le nom et la ligne du fondateur l'un sous l'autre, à droite du logo */
header.mb-h a.brand:not(:has(.brand-txt)){display:grid!important;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:7px;row-gap:0!important;align-items:center;align-content:center}
header.mb-h a.brand:not(:has(.brand-txt)) > .brand-logo{grid-row:1 / span 2}
header.mb-h a.brand:not(:has(.brand-txt)) > .brand-name{grid-column:2;align-self:end}
header.mb-h a.brand:not(:has(.brand-txt)) > .mb-fond{grid-column:2;align-self:start}
header.mb-h a.brand:not(:has(.brand-txt)) > .mbc{grid-column:3;grid-row:1 / span 2}
.mb-fond{display:none}
.mb-menu-btn{position:relative;flex:0 0 auto;width:42px;height:42px;margin-left:10px;padding:0;border-radius:12px;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  color:var(--text,#e6edf3);background:rgba(127,140,160,.1);border:1px solid color-mix(in srgb,var(--accent,#38bdf8) 40%,transparent);transition:background .2s,border-color .2s,transform .12s}
.mb-menu-btn:hover{border-color:var(--accent,#38bdf8);background:color-mix(in srgb,var(--accent,#38bdf8) 14%,transparent)}
.mb-menu-btn:active{transform:scale(.94)}
.mb-menu-btn span{display:block;width:20px;height:2.4px;border-radius:2px;background:currentColor;transition:transform .3s cubic-bezier(.34,1.4,.64,1),opacity .2s}
.mb-menu-btn.on span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
.mb-menu-btn.on span:nth-child(2){opacity:0;transform:scaleX(.2)}
.mb-menu-btn.on span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}
.mb-menu-btn:focus-visible{outline:2px solid var(--accent,#38bdf8);outline-offset:2px}
/* nombre de visiteurs : ordinateur seulement */
@media(max-width:700px){
  .mbc{display:none!important}
  header.mb-h{gap:8px}
  header.mb-h > .mb-drapeau{width:46px;height:34px}
  header.mb-h .mb-menu-btn{margin-left:auto}
  header.mb-h .tb-title{display:none!important}
  /* tout le reste est dans le menu (déplacé par js/s-entete.js) */
  html.mbp-pret header.mb-h > :not(.mb-drapeau):not(.brand):not(.logo):not(.site):not(.mb-menu-btn):not(style):not(script){display:none!important}
  /* la ligne du chapitre et la barre ne sont plus sous l'en-tête : le contenu remonte */
  html.mbp-deplace body .layout{padding-top:calc(var(--topbar,62px) + 14px)!important}
  html.mbp-deplace body .progress-bar-wrap{top:var(--topbar,62px)!important}
  html.mbp-deplace.mbb-tp .page-header{margin-top:0}
}

/* le voile et le menu */
.mbp-voile{position:fixed;inset:0;z-index:9150;background:rgba(2,6,23,.42);opacity:0;pointer-events:none;transition:opacity .22s ease-out}
.mbp-voile.on{opacity:1;pointer-events:auto}
.mbp-voile.mbp-fermeture{transition:opacity .5s ease-in}
.mbp{position:fixed;top:0;right:0;bottom:0;z-index:9200;width:min(370px,88vw);display:flex;flex-direction:column;overflow:hidden;
  color:var(--text,#e6edf3);background:rgba(13,20,38,.84);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border-left:1px solid color-mix(in srgb,var(--accent,#38bdf8) 35%,transparent);box-shadow:-24px 0 60px -20px rgba(0,0,0,.6);
  font-family:var(--font,'Segoe UI Variable','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif);
  transform:translateX(105%);visibility:hidden;transition:transform .22s cubic-bezier(.22,1.25,.4,1),visibility 0s .22s}
.mbp.on{transform:none;visibility:visible;transition:transform .22s cubic-bezier(.22,1.25,.4,1),visibility 0s}
.mbp.mbp-fermeture{transition:transform .5s cubic-bezier(.55,0,.75,.4),visibility 0s .5s}
.mbp.mbp-vite,.mbp-voile.mbp-vite{transition-duration:.16s}
.mbp.mbp-glisse{transition:none}
.mbp.mbp-clair{color:#0f172a;background:rgba(255,255,255,.86);border-left-color:rgba(15,23,42,.14);box-shadow:-24px 0 60px -24px rgba(15,23,42,.45)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){.mbp{background:rgba(13,20,38,.97)}.mbp.mbp-clair{background:rgba(255,255,255,.98)}}
.mbp-tete{flex:none;display:flex;align-items:center;gap:8px;padding:12px 12px 10px 18px;border-bottom:1px solid rgba(127,140,160,.22)}
.mbp-titre{flex:1;font-size:16px;font-weight:900;letter-spacing:.02em}
.mbp-x,.mbp-ret{flex:none;height:38px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:11px;cursor:pointer;color:inherit;
  background:rgba(127,140,160,.1);border:1px solid rgba(127,140,160,.3);font-family:inherit;font-size:13.5px;font-weight:800}
.mbp-x{width:38px;padding:0}
.mbp-ret{padding:0 12px 0 8px}
.mbp-ret[hidden]{display:none}
.mbp-x:hover,.mbp-ret:hover{border-color:var(--accent,#38bdf8)}
.mbp-corps{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 14px 28px}
.mbp-z{margin:12px 0 0}
.mbp-z.mbp-acc{margin-top:14px}
.mbp-z[hidden],.mbp-vue[hidden],.mbp-sous[hidden]{display:none}
.mbp-z h3{margin:0 0 8px 4px;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--accent,#38bdf8)}
.mbp.mbp-clair .mbp-z h3{color:var(--accent,#0e7490)}
.mbp-liste{display:flex;flex-direction:column;gap:6px}
/* chaque bouton : une grande ligne, icône + nom */
.mbp .mbp-it,.mbp .mbp-it-w > a,.mbp .mbp-it-w > button,.mbp .mbp-it-w > .pop-wrap > button{display:flex!important;align-items:center;justify-content:flex-start;gap:12px!important;width:100%!important;height:auto!important;min-height:48px;
  margin:0!important;padding:10px 14px!important;border-radius:14px!important;cursor:pointer;text-align:left;text-decoration:none;white-space:normal;
  color:inherit!important;background:rgba(127,140,160,.09)!important;border:1px solid rgba(127,140,160,.22)!important;box-shadow:none!important;
  font-family:inherit!important;font-size:15px!important;font-weight:700!important;line-height:1.25!important;font-style:normal!important;letter-spacing:0!important;transition:background .15s,border-color .15s,transform .1s}
.mbp .mbp-it:hover,.mbp .mbp-it-w > a:hover,.mbp .mbp-it-w > button:hover,.mbp .mbp-it-w > .pop-wrap > button:hover{border-color:var(--accent,#38bdf8)!important;background:color-mix(in srgb,var(--accent,#38bdf8) 13%,transparent)!important}
.mbp .mbp-it:active,.mbp .mbp-it-w > a:active,.mbp .mbp-it-w > button:active{transform:scale(.98)}
.mbp .mbp-it svg,.mbp .mbp-it-w svg{flex:none;width:21px!important;height:21px!important;color:var(--accent,#38bdf8)}
.mbp .mbp-it-w .lbl,.mbp .mbp-it-w .mbp-nom,.mbp .mbp-it-w .lbl-theme{display:inline!important;font-size:inherit!important}
.mbp .mbp-it-w .ico{flex:none}
.mbp .mbp-danger{color:#ef4444!important}
.mbp .mbp-it > span,.mbp .mbp-it-w > a > span,.mbp .mbp-it-w > button > span,.mbp .mbp-it-w > .pop-wrap > button > span{font:inherit!important;color:inherit}   /* même écriture pour toutes les lignes */
.mbp .mbp-it-w .pop-wrap{position:relative;width:100%}
.mbp .mbp-it-w .pop{position:static!important;width:auto!important;max-width:none!important;margin-top:8px;transform:none!important}
.mbp .mbp-it-w .mb-outils-btn .lbl{display:inline!important}
/* la ligne du chapitre et des exercices */
.mbp .mbp-it-w > .tbn{position:static!important;display:flex!important;flex-direction:column;align-items:stretch;gap:8px;height:auto!important;padding:0!important;margin:0!important;
  background:none!important;border:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;max-width:none!important}
.mbp .tbn .sb-box{display:flex!important;width:100%!important;max-width:none!important;height:46px!important;border-radius:14px!important}
.mbp .tbn .sb-nom{font-size:14px!important;white-space:normal;line-height:1.2}
.mbp .tbn .sb-ar{width:40px!important}
.mbp .tbn .sb-nums{flex:1;justify-content:center}
.mbp .tbn .sb-num{min-width:34px!important;font-size:14px!important}
/* la barre « Correction courte / détaillée » et « Narration » */
.mbp .mbp-it-w > #mbBarre{position:static!important;transform:none!important;top:auto!important;margin:0!important;display:flex!important;flex-direction:column;align-items:stretch;gap:8px;
  padding:0!important;background:none!important;border:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:0!important}
.mbp #mbBarre .mbb-seg{display:flex;width:100%}
.mbp #mbBarre .mbb-seg button{flex:1;padding:10px 8px;font-size:14px}
.mbp #mbBarre .mbb-l{display:inline!important}.mbp #mbBarre .mbb-c{display:none!important}
.mbp #mbBarre .mbb-nar{justify-content:center;padding:10px 12px;font-size:14px}
.mbp #mbBarre .mbb-nar span{display:inline!important}
.mbp #mbBarre .mbb-nar[hidden]{display:none!important}
/* les chapitres (js/s-raccourci.js) dans le menu */
.mbp .mbp-rac .rc-ong{padding:4px 0 0}
.mbp .mbp-rac .rc-liste{padding:6px 0 10px;border-top-color:rgba(127,140,160,.25)}
.mbp .mbp-rac .rc-ch{margin:0;padding:9px 8px}
.mbp .mbp-rac .rc-ch .n{font-size:14px}
.mbp .mbp-rac .rc-ch a{padding:6px 11px}
/* les boutons arrivent en cascade */
.mbp-cas{animation:mbpCas .34s cubic-bezier(.22,1.2,.4,1) both}
@keyframes mbpCas{from{opacity:0;transform:translateX(26px)}}
@media(prefers-reduced-motion:reduce){.mbp,.mbp.on,.mbp.mbp-fermeture,.mbp-voile{transition-duration:.01s!important}.mbp-cas{animation:none}.mb-menu-btn span{transition:none}}
@media print{.mb-menu-btn,.mbp,.mbp-voile{display:none!important}}