/* L'enseignant abonné (lot 4) : la carte « Créez votre première classe », l'écran du
   mode restreint d'un enseignant dont l'accès est terminé.

   Feuille propre à ce lot : style.css, personne ne la touche. Elle ne pose aucune
   couleur en dur : tout vient des variables de la charte (style.css), qui changent
   avec le thème sombre. Liée dans index.html. */

/* ── Première visite : rien à choisir dans un menu vide ───────────────────── */

.premiere-classe {
  /* Un liseré de la marque : c'est LE geste de la première visite. */
  border-top: 4px solid var(--marque);
}
.premiere-classe .grille-formulaire {
  display: grid; gap: .8rem 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  align-items: start; margin-top: .6rem;
}
.premiere-classe .grille-formulaire .barre-actions { grid-column: 1 / -1; margin-top: .2rem; }
.premiere-classe .champ .aide { display: block; color: var(--texte-doux); font-size: .85rem; margin-top: .25rem; }
.premiere-classe input, .premiere-classe select { width: 100%; }

/* Où il en est de ses plafonds (« 2 classes sur 10, 41 élèves sur 350 »). */
.plafonds { margin: .3rem 0 .8rem; }

/* ── Le mode restreint : accès terminé ────────────────────────────────────── */

.acces-termine {
  background: var(--accent-doux); border-color: var(--accent); border-left-width: 6px;
}
.acces-termine h2 { color: var(--texte); }
.acces-termine .prix-restreint { font-size: 1.05rem; }

.classe-restreinte { margin-top: 1rem; }
.classe-restreinte h3 { margin: 0 0 .5rem; font-size: 1rem; }
.liste-eleves-restreinte { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bordure); }
.eleve-restreint {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
  padding: .55rem .2rem; border-bottom: 1px solid var(--bordure);
}
.eleve-restreint .discret { margin: 0; font-size: .85rem; overflow-wrap: anywhere; }
.eleve-restreint .bouton { min-height: 2.2rem; padding: .3rem .8rem; font-size: .88rem; }

/* Un téléphone : le bouton « Télécharger… » est long, il passe à la ligne au lieu de déborder. */
@media (max-width: 640px) {
  .acces-termine .barre-actions .bouton,
  .carte .barre-actions a.bouton { white-space: normal; text-align: center; }
}