/* Fenêtre de connexion (élève et enseignant) : un seul cadre pour les deux. Couleurs : variables d'arcadia.css. */
dialog.fc { width: min(400px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 16px 18px; background: var(--carte); color: var(--encre); border: var(--trait-fort) solid var(--encre); border-radius: var(--rayon-petit); box-shadow: 4px 4px 0 var(--ombre-dure); }
dialog.fc::backdrop { background: rgba(0, 0, 0, 0.55); }
.fc-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.fc-onglets { display: flex; gap: 8px; }
.fc-onglet { font: inherit; font-weight: 700; font-size: 0.9rem; padding: 4px 12px; background: var(--fond); color: var(--encre); border: 2px solid var(--encre); border-radius: var(--rayon-petit); cursor: pointer; }
.fc-onglet[aria-pressed="true"] { background: var(--selection); }
.fc-fermer { font: inherit; font-size: 1.4rem; line-height: 1; width: 34px; height: 34px; background: none; color: var(--encre); border: 2px solid var(--encre); border-radius: var(--rayon-petit); cursor: pointer; }
.fc-titre { font-size: 1.4rem; margin: 0 0 6px; }
.fc-aide { margin: 12px 0 0; font-size: 0.9rem; color: var(--discret); }
dialog.fc .p-form { display: grid; gap: 12px; }
dialog.fc .p-form label { display: grid; gap: 4px; font-weight: 600; font-size: 0.9rem; }
dialog.fc .p-form input { font: inherit; font-size: 1.15rem; padding: 8px 10px; border: 1.5px solid var(--trait); border-radius: 8px; background: var(--fond); color: var(--encre); }
dialog.fc .p-form input:focus { border-color: var(--accent, var(--encre)); outline: none; }
dialog.fc input[name=code] { letter-spacing: 0.3em; }
dialog.fc .p-erreur { color: var(--faux); margin: 0; }
dialog.fc .btn.principal { padding: 10px 20px; font: inherit; font-weight: 700; cursor: pointer; }
.fc-bascule { margin: 14px 0 0; text-align: center; font-size: 0.92rem; }
.fc-bascule p { margin: 6px 0 0; }
.fc-lien { font: inherit; padding: 0; background: none; border: 0; color: LinkText; text-decoration: underline; cursor: pointer; }
.fc .c-credits { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--trait); display: flex; align-items: center; gap: 12px; }
.fc .c-credits p { margin: 0; font-size: 0.82rem; color: var(--discret); }
/* Dragon qui respire, tourné vers la droite ; masque : bout de queue de l'image voisine. Sans l'image : rien. */
.c-dragon { flex: none; width: 64px; height: 64px; background: url("/prive/dragon/attente.png") 0 0 / 1024px 64px no-repeat; image-rendering: pixelated; animation: c-dragon 2.4s steps(16) infinite; clip-path: var(--dragon-masque); }
@keyframes c-dragon { to { background-position: -1024px 0; } }
@media (prefers-reduced-motion: reduce) { .c-dragon { animation: none; } }