/* =========================================================
 * teacher_toggle.css
 * Toggle prof↔élève dans le header + bandeau view-as-student.
 * BEM. Variables CSS du projet (--alt, --line, --text, --muted,
 * --fr-blue, --fr-red).
 * ========================================================= */

/* ─── Header auth wrapper : aligne le toggle et le user-menu ──
 * Sans cette règle, les enfants du .header-auth (inline-flex pour
 * .teacher-toggle, inline pour .user-menu) s'alignent par baseline,
 * ce qui décale le bouton Docent verticalement par rapport à l'avatar.
 * En mobile la media query @1100px pose position:fixed mais le
 * display:flex/align-items:center reste valide (un seul enfant
 * apparent en pratique). */
.header-auth {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ─── Toggle dans le header ──────────────────────────────── */

.teacher-toggle {
  display: inline-flex;
  align-items: center;
  /* margin-right géré par .header-auth { gap } maintenant. */
}

.teacher-toggle__form {
  margin: 0;
  padding: 0;
}

/* État "Docent" (défaut, prof en vue normale) : rouge GrammaLab.
 * Point d'entrée important — doit attirer l'attention du prof. */
.teacher-toggle__button {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .75rem;
  border: 1px solid var(--fr-red);
  border-radius: 999px;
  background: var(--fr-red);
  color: #fff;
  font-size: .85rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease,
              transform .1s ease;
}

.teacher-toggle__button:hover {
  background: #d9362b;
  border-color: #d9362b;
}

.teacher-toggle__button:active {
  background: #b82e25;
  border-color: #b82e25;
  transform: scale(.98);
}

.teacher-toggle__button:focus-visible {
  outline: 2px solid var(--fr-blue);
  outline-offset: 2px;
}

.teacher-toggle__button i {
  width: 14px;
  height: 14px;
}

/* État "view as student" — accent ambre, plus visible */
.teacher-toggle__button--student {
  background: #fff4d6;
  border-color: #f0c969;
  color: #5a4314;
}

.teacher-toggle__button--student:hover {
  background: #ffe9b0;
  border-color: #e8b94a;
}

.teacher-toggle__button--student:active {
  background: #f8db90;
}

/* ─── Bandeau view-as-student ────────────────────────────── */

.view-as-student-banner {
  background: #fff8e1;
  border-bottom: 1px solid #f0c969;
  color: #5a4314;
  padding: .55rem 1rem;
  text-align: center;
  font-size: .9rem;
}

.view-as-student-banner__inner {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.view-as-student-banner__form {
  display: inline;
  margin: 0;
}

.view-as-student-banner__link {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  font-size: inherit;
  cursor: pointer;
}

.view-as-student-banner__link:hover {
  color: #382a0c;
}