/* ==========================================================================
   CHARTE GRAPHIQUE FOCUS AKADEMI - BLEU PÂLE, VERT MENTHE ET BLANC
   ========================================================================== */

:root {
  /* Palette de Couleurs Principale */
  --bg-main: #f0f4f9;            /* Bleu pâle très doux */
  --bg-card: #ffffff;            /* Blanc pur */
  --primary-blue: #3b82f6;       /* Bleu clair / vif */
  --primary-soft: #e0f2fe;       /* Bleu très pâle */
  --accent-green: #10b981;      /* Vert menthe / émeraud */
  --accent-green-soft: #d1fae5;  /* Vert très doux */
  --text-main: #1e293b;          /* Anthracite lisible */
  --text-muted: #64748b;         /* Gris moyen */
  --border-color: #e2e8f0;       /* Bordure fine */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 8px 24px rgba(59, 130, 246, 0.08);

  /* Typographie */
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-display: 'Spectral', Georgia, serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.6;
}

h1, h2, h3, .logo-text {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; }

/* --- En-têtes de section (accueil, panneaux) --- */
.section-intro {
  margin: 40px 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}
.section-intro h2 { margin-bottom: 4px; }
.section-intro p { color: var(--text-muted); font-size: 0.95rem; }

.panel-header {
  margin-bottom: 24px;
}
.panel-header h2 { font-size: 1.8rem; margin-bottom: 6px; }
.panel-header p { color: var(--text-muted); }

/* LARGEUR DE LA BANDE DU PANNEAU — alignée sur celle du site le
   29 octobre 2026 (voir public/style.css). Bornée à 1100 px, elle
   laissait 410 px de vide de chaque côté sur un écran de 1920 pendant
   que `.tableau-comptes` partait en défilement horizontal : un tableau
   de comptes porte identifiant, contact, école, état et deux boutons
   de décision, et c'est la colonne de trop qui coûte, pas la place.

   Les deux feuilles portent chacune la leur et ne se chargent jamais
   ensemble : les garder d'accord se fait à la main, ici. */
.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
}

/* La gouttière des grands écrans, et elle seule — même seuil et même
   raison que sur le site : au-dessus de 1600 px près, un écran de 1366
   voyait sa bande courir d'un bord à l'autre, et une part en `vw`
   écrite sans seuil aurait repris de la place au mobile. Le panneau se
   consulte surtout sur ordinateur, mais une direction d'école le
   regarde aussi depuis une tablette. */
@media (min-width: 1200px) {
  .container {
    max-width: min(1600px, 94vw);
  }
}

/* --- Top Info Bar --- */
.top-info-bar {
  background: var(--primary-soft);
  color: #0369a1;
  padding: 10px;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 500;
  border-bottom: 1px solid #bae6fd;
}

.badge-contribution {
  background: var(--accent-green-soft);
  color: #047857;
  padding: 3px 10px;
  border-radius: 12px;
  margin-left: 10px;
  font-weight: 600;
}

/* --- Navbar --- */
.navbar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.25rem;
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-links {
  display: flex;
  gap: 8px;
}

.nav-btn {
  background: transparent;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-btn.active, .nav-btn:hover {
  background: var(--primary-soft);
  color: var(--primary-blue);
}

/* --- Boutons Stylisés --- */
.btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
}

.btn-primary {
  background: var(--primary-blue);
  color: white;
}
.btn-primary:hover { background: #2563eb; }

.btn-secondary {
  background: var(--primary-soft);
  color: var(--primary-blue);
}

.btn-green {
  background: var(--accent-green);
  color: white;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

/* --- Panneaux & Layout --- */
.main-content {
  padding: 30px 0;
}

.panel {
  display: none;
}
.panel.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- En-tête : actions de droite (à propos / agent IA) --- */
.header-actions {
  display: flex;
  gap: 10px;
}

/* --- Section d'information structurée (remplace l'ancien hero + modal) --- */
.info-section {
  background: var(--bg-card);
  padding: 32px;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  margin-bottom: 10px;
}

.info-lead {
  color: var(--text-muted);
  max-width: 68ch;
  margin-bottom: 24px;
}

.info-subsection {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}

.info-subsection h3 {
  margin-bottom: 14px;
}

.clubs-note {
  margin-top: 14px;
  color: var(--text-muted);
}

/* --- Grilles de Cartes --- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.card {
  background: var(--bg-card);
  padding: 24px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.card-green {
  border-left: 4px solid var(--accent-green);
}

/* --- Cartes de sélection d'espace (Directeur / Élève) --- */
.role-card {
  background: var(--bg-card);
  padding: 22px 26px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.role-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.role-head h3 { font-size: 1.25rem; margin: 0; }

.role-card p {
  color: var(--text-muted);
  margin-bottom: 4px;
}

.role-icon {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.role-card-blue .role-icon { background: var(--primary-soft); }
.role-card-green .role-icon { background: var(--accent-green-soft); }

.role-card-blue { border-top: 3px solid var(--primary-blue); }
.role-card-green { border-top: 3px solid var(--accent-green); }

.card-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}

/* --- Formulaire Wizard (Directeur) --- */
.stepper {
  display: flex;
  gap: 12px;
  margin: 20px 0;
}

.step {
  flex: 1;
  background: var(--bg-card);
  padding: 12px;
  text-align: center;
  border-radius: 8px;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.step.active {
  background: var(--primary-soft);
  color: var(--primary-blue);
  border-color: var(--primary-blue);
}

.wizard-form {
  background: var(--bg-card);
  padding: 28px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.wizard-step {
  display: none;
}
.wizard-step.active {
  display: block;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.form-group input, .form-group select {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  font-size: 0.95rem;
}

/* --- Curriculum Courses Grid --- */
.sub-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.sub-btn {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  cursor: pointer;
  font-weight: 500;
}

.sub-btn.active {
  background: var(--accent-green);
  color: white;
  border-color: var(--accent-green);
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.course-card {
  background: var(--bg-card);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  text-align: center;
}

.level-tag {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 6px 0 14px;
}

.btn-download {
  width: 100%;
  background: var(--primary-soft);
  color: var(--primary-blue);
  padding: 8px 0;
}

/* --- Modals & Badges --- */
.hidden { display: none !important; }

.info-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  border: 2px solid var(--primary-blue);
  margin-bottom: 20px;
}

.success-card {
  background: var(--accent-green-soft);
  padding: 24px;
  border-radius: 12px;
  text-align: center;
  margin-top: 20px;
}

.code-badge {
  font-size: 1.5rem;
  font-weight: 700;
  color: #047857;
  letter-spacing: 1px;
}

/* --- Footer --- */
.footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
  padding: 20px 0;
  margin-top: 40px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-muted);
}