/* ============================================================
   MonEduCoach - Barre de navigation commune à toutes les pages
   Ce fichier est chargé après style.css sur chaque page.
   ============================================================ */

:root{
  --mec-violet:#4f46e5;
  --mec-violet-clair:#6d28d9;
  --mec-texte:#1e1b4b;
  --mec-gris:#64748b;
  --mec-bordure:#e2e8f0;
}

/* La barre remplace l'ancien en-tête : on neutralise ses styles */
header.barre{
  position:sticky; top:0; z-index:40;
  background:#fff; border-bottom:1px solid var(--mec-bordure);
  display:flex; align-items:center; gap:22px;
  padding:12px max(3vw,18px);
  min-height:auto;
}

.marque{display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0}
.marque-logo{
  width:46px; height:46px; border-radius:14px; flex-shrink:0;
  background:linear-gradient(135deg,var(--mec-violet),var(--mec-violet-clair));
  display:grid; place-items:center; font-size:1.35rem;
}
.marque-texte{line-height:1.25}
.marque-nom{font-weight:800; font-size:1.12rem; color:var(--mec-texte); display:block}
.marque-sous{font-size:.75rem; color:var(--mec-gris); display:block}

.onglets{
  display:flex; align-items:center; gap:3px; margin:0 auto;
  background:#f1f5f9; border-radius:99px; padding:5px;
}
.onglet{
  display:flex; align-items:center; gap:6px;
  padding:9px 15px; border-radius:99px; text-decoration:none;
  font-weight:700; font-size:.89rem; color:#475569; white-space:nowrap;
}
.onglet:hover{color:var(--mec-violet)}
.onglet.actif{background:#fff; color:var(--mec-violet); box-shadow:0 1px 3px rgba(15,23,42,.12)}

.actions-barre{display:flex; align-items:center; gap:12px; flex-shrink:0}
.lien-connexion{text-decoration:none; font-weight:700; color:var(--mec-texte); font-size:.93rem}
.bouton-cta{
  background:linear-gradient(135deg,var(--mec-violet),var(--mec-violet-clair));
  color:#fff; text-decoration:none; font-weight:800; font-size:.92rem;
  padding:11px 20px; border-radius:99px; white-space:nowrap;
  box-shadow:0 6px 18px rgba(79,70,229,.30);
}
.bouton-dys{
  border:1px solid #cbd5e1; background:#fff; color:#475569;
  font:inherit; font-weight:700; font-size:.86rem;
  padding:9px 15px; border-radius:99px; cursor:pointer;
}
.bouton-dys:hover{border-color:var(--mec-violet); color:var(--mec-violet)}

.burger{display:none; border:0; background:none; font-size:1.6rem; color:var(--mec-texte); cursor:pointer}

/* ---------- Adaptation aux petits écrans ---------- */
@media(max-width:1180px){
  .onglets{gap:0}
  .onglet{padding:9px 11px; font-size:.84rem}
  .lien-connexion{display:none}
}
@media(max-width:1000px){
  .burger{display:block}
  .onglets{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:4px;
    margin:0; padding:12px; border-radius:0;
    background:#fff; border-bottom:1px solid var(--mec-bordure);
    box-shadow:0 12px 26px rgba(15,23,42,.10);
  }
  .onglets.ouvert{display:flex}
  .onglet{justify-content:flex-start; padding:13px 16px; font-size:.95rem}
}
@media(max-width:640px){
  .marque-sous{display:none}
  .bouton-cta{padding:10px 15px; font-size:.86rem}
  .bouton-dys{display:none}
}