/* ============================================================
   css/barre_outil.css — eSVT
   Barre d'onglets commune aux outils (Escape Games, QCM Examen…).
   Reprend à l'identique la barre EduCORRECT (.corr-onglets de
   correcteur/css/commun.css). Autonome : fonctionne aussi sur les
   pages qui ne chargent pas style.css (qcm/qcm_examen.php).
   01/11/2026
   ============================================================ */

/* Taille et police FIXÉES (et non héritées) : la barre doit être identique
   sur les pages du site (body 14px Segoe UI, style.css) et sur les pages
   autonomes comme qcm/qcm_examen.php (16px system-ui) — sinon elle
   « grossit » d'une page à l'autre (unités em). */
.bo-barre{display:flex;align-items:center;gap:4px;margin-bottom:20px;background:#fff;border-radius:12px;padding:6px;box-shadow:0 2px 10px rgba(0,0,0,.08);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;box-sizing:border-box;font-family:'Segoe UI',Arial,sans-serif;font-size:14px;line-height:normal;text-align:left}
.bo-barre::-webkit-scrollbar{display:none}

.bo-marque{flex-shrink:0;padding:0 14px 0 8px;margin-right:6px;border-right:1px solid #e2e8f0;font-size:1.15em;font-weight:700;color:#2f5d8a;letter-spacing:.2px;white-space:nowrap;line-height:1.6}
.bo-marque b{color:#db9b38;font-weight:800}
.bo-marque-ico{margin-right:7px;font-size:.95em;font-weight:400}

/* Spécificité renforcée : neutralise les couleurs et soulignés des liens du site */
.bo-barre a.bo-onglet,
.bo-barre a.bo-onglet:visited,
.bo-barre a.bo-onglet:hover,
.bo-barre a.bo-onglet:focus{text-decoration:none}
.bo-barre a.bo-onglet{display:inline-block;padding:9px 20px;font-size:.9em;font-weight:600;color:#64748b;border-radius:8px;white-space:nowrap;flex-shrink:0;transition:all .15s;line-height:1.4}
.bo-barre a.bo-onglet:hover{color:#0f172a;background:#f8fafc}
.bo-barre a.bo-onglet.active{color:#db9b38;background:#fff7ed}
.bo-barre a.bo-onglet:focus-visible{outline:2px solid #db9b38;outline-offset:1px}

/* Pastilles : rouge = à traiter (comme EduCORRECT), grise = simple compte */
.bo-alerte{background:#ef4444;color:#fff;font-size:.75em;padding:1px 6px;border-radius:10px;margin-left:4px}
.bo-compte{background:#e2e8f0;color:#475569;font-size:.75em;padding:1px 7px;border-radius:10px;margin-left:4px}
.bo-barre a.bo-onglet.active .bo-compte{background:#fde7c4;color:#9a5b0f}

.bo-droite{margin-left:auto;flex-shrink:0;padding:0 10px;font-size:.78em;font-weight:600;color:#94a3b8;white-space:nowrap}
.bo-invite b{font-weight:700}
.bo-invite.actif b{color:#059669}
.bo-invite.inactif b{color:#dc2626}

/* LARGEUR COMMUNE DES OUTILS PROFS (01/11/2026) : 1200 px, marges 20 px.
   Chaque outil aligne son conteneur sur ces valeurs, pour que la barre soit
   identique partout (1160 px utiles) :
     Escape Games  .escape-admin (escape_admin.css)      EduEVAL  #comp-wrap, #admin-comp-wrap
     QCM Examen    .qep-wrap (qcm_examen.css)            EduGO!   .go-wrap (grand_oral.css)
     EduCORRECT    .corr-wrap (correcteur/css/commun.css)
   Pages où la barre est posée au-dessus du contenu : .bo-autonome. */
.bo-autonome{max-width:1200px;margin:0 auto;padding:20px 20px 0;box-sizing:border-box}
.bo-autonome .bo-barre{margin-bottom:0}

@media (max-width:700px){
    .bo-marque{font-size:1em;padding:0 10px 0 6px}
    .bo-barre a.bo-onglet{padding:8px 14px}
}
/* .bo-large : ancienne variante (Escape Games), identique désormais */
.bo-autonome.bo-large{max-width:1200px;padding:20px 20px 0}
/* qcm/qcm_examen.php : la carte centrée tient sous la barre sans défilement */
.qee-wrap.qee-sous-barre{min-height:calc(100vh - 70px)}

/* Bouton d'action tout à droite (ex. « Nouvelle session » de QCM Examen) */
.bo-barre .bo-action,
.bo-barre a.bo-action:visited,
.bo-barre a.bo-action:hover{text-decoration:none}
/* Charte des boutons (01/11/2026) : « Créer » = doré foncé #c8891f, survol
   #b07a1e, texte blanc (contraste ≈ 3:1) ; le doré #db9b38 reste pour les
   onglets actifs et la marque. */
.bo-barre .bo-action{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;margin-left:4px;padding:8px 16px;border:0;border-radius:8px;background:#c8891f;color:#fff;font:inherit;font-size:.88em;font-weight:700;white-space:nowrap;cursor:pointer;transition:background .15s}
.bo-barre .bo-action:hover,.bo-barre a.bo-action:hover{background:#b07a1e;color:#fff}
.bo-barre a.bo-action,.bo-barre a.bo-action:visited{color:#fff}
.bo-action-ico{display:inline-flex;align-items:center;line-height:1}
.bo-action-plus{display:block}
.bo-barre .bo-action:focus-visible{outline:2px solid #2f5d8a;outline-offset:2px}
/* Petit écran : la mention « Mode invité » s'efface pour garder le bouton visible */
/* et le bouton reste collé au bord droit pendant le défilement horizontal */
@media (max-width:700px){
    .bo-barre:has(.bo-action) .bo-invite{display:none}
    .bo-barre .bo-action{position:sticky;right:0;padding:8px 11px;box-shadow:-10px 0 8px #fff,6px 0 0 #fff}
    .bo-barre .bo-action-txt{display:none}
}