/* Vivid colors sampled from GestaSchool's existing level cards. */
:root {
  --lilac: #8b5cf6;
  --green: #22c55e;
  --aqua: #06b6d4;
  --orange: #f97316;
}

/* Keep the four original school levels, their icons and their copy. */
.school-levels {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 0;
  margin: 45px 0 42px;
  list-style: none;
}
.level {
  --level-color: var(--blue);
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 22px 18px;
  min-height: 112px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.level:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--level-color) 55%, white);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--level-color) 13%, transparent);
}
.level-ico {
  display: grid;
  place-items: center;
  flex: 0 0 49px;
  width: 49px;
  height: 49px;
  border-radius: 15px;
  color: white;
  transition: transform .5s var(--ease), box-shadow .4s;
}
.level:hover .level-ico {
  transform: perspective(250px) rotateY(-13deg) rotateZ(-5deg) translateY(-2px);
  box-shadow: 4px 5px 0 color-mix(in srgb, var(--level-color) 20%, white);
}
.level-ico svg { width: 25px; height: 25px; }
.level strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.45px; margin-bottom: 5px; }
.level small { display: block; font-size: 12px; line-height: 1.65; color: #52617a; }
.level-garderie { --level-color: #f97316; }
.level-primaire { --level-color: #22c55e; }
.level-lycee { --level-color: #8b5cf6; }
.level-garderie .level-ico { background: linear-gradient(135deg, #f59e0b, #f97316); }
.level-primaire .level-ico { background: linear-gradient(135deg, #22c55e, #10b981); }
.level-college .level-ico { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.level-lycee .level-ico { background: linear-gradient(135deg, #8b5cf6, #06b6d4); }

/* Color is concentrated around the illustrations and useful controls. */
.scene-disc {
  background: radial-gradient(ellipse at 80% 20%, #8b5cf64d, transparent 58%),
    radial-gradient(ellipse at 20% 85%, #ffd64970, transparent 52%),
    linear-gradient(135deg, #06b6d43d, #2563eb24);
}
.scene-route { stroke: var(--cyan); opacity: .85; }
.scene-mode button.active { color: white; }
.hero-scene[data-mode="connecter"] { --scene-accent: #10b981; }
.hero-scene[data-mode="connecter"] .scene-mode button.active { color: var(--ink); }
.floating-profile { border-color: #8b5cf680; }
.floating-presence { border-color: #22c55e80; }
.floating-note { background: var(--gold); box-shadow: 0 4px 0 #f59e0b38; }
.mini-stat { border-bottom-color: var(--blue); }
.mini-stat:nth-child(2) { border-bottom-color: var(--green); }
.mini-stat:nth-child(3) { border-bottom-color: var(--orange); }
.window-dots i:first-child { background: var(--orange); }
.window-dots i:nth-child(2) { background: var(--gold); }
.window-dots i:nth-child(3) { background: var(--green); }
.ribbon-dot { border-color: #22c55e33; }
.school-ribbon-copy>span:nth-of-type(2) { color: #15803d; }
.school-ribbon-copy>span:nth-of-type(3) { color: #7c3aed; }
.school-ribbon-copy>span:nth-of-type(4) { color: #c2410c; }
.feature-card { --accent-ink: var(--ink); }
.feature-card[data-module="students"],
.feature-card[data-module="schedule"],
.feature-card[data-module="grades"],
.feature-card[data-module="communication"] { --accent-ink: white; }
.feature-art {
  background: radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--accent-second) 50%, white), transparent 75%),
    color-mix(in srgb, var(--accent) 28%, white);
}
.feature-card:before { opacity: .8; width: 3px; }
.feature-number { color: #66748d; }
.feature-category { background: color-mix(in srgb, var(--accent) 22%, white); }
.feature-open { color: var(--ink); }
.feature-open>span,
.feature-card:hover .feature-open>span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 22%, white);
}
.feature-art .module-illustration { filter: drop-shadow(0 7px 6px #1117480c); }
.team-switcher button.active {
  background: var(--role-color);
  border-color: var(--role-color);
  color: var(--ink);
}
.team-switcher button[data-role="direction"].active,
.team-switcher button[data-role="secretariat"].active { color: white; }
.team-switcher button.active>span>svg { color: inherit; }
.team-content {
  background: linear-gradient(120deg, color-mix(in srgb, var(--team-accent) 21%, white), #f7faff);
}
.team-visual:after { background: var(--team-accent); }
.ai-tag { background: #8b5cf61a; border-color: var(--lilac); color: #6d28d9; }
.ai-stage:before { background: linear-gradient(130deg, #8b5cf699, #06b6d455); }
.ai-window { border-color: #8b5cf680; }
.ai-tabs button.active { color: white; background: var(--blue); border-color: var(--blue); }
.ai-tabs button[data-ai="parents"].active { color: var(--ink); background: var(--green); border-color: var(--green); }
.ai-tabs button[data-ai="paiement"].active { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.ai-sticker { background: var(--gold); border-color: var(--gold); }
.local-grid article { border-color: var(--blue); }
.local-grid article:nth-child(2) { border-color: var(--lilac); }
.local-grid article:nth-child(3) { border-color: var(--green); }
.programme-art>svg { background: var(--lilac); color: white; }
.cube-back { color: white!important; }
.cta-card { background: radial-gradient(ellipse at 100% 100%, #06b6d4cc, transparent 60%), #2563eb; }

@media (max-width: 1150px) {
  .school-levels { gap: 12px; }
  .level { padding: 18px 14px; gap: 11px; }
  .level-ico { flex-basis: 43px; width: 43px; height: 43px; border-radius: 13px; }
  .level strong { font-size: 15px; }
  .level small { font-size: 11px; }
}
@media (max-width: 900px) {
  .school-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; }
  .level { padding: 20px; min-height: 103px; }
  .level-ico { flex-basis: 49px; width: 49px; height: 49px; }
  .level strong { font-size: 17px; }
  .level small { font-size: 12px; }
}
@media (max-width: 650px) {
  .school-levels { margin-top: 35px; margin-bottom: 28px; gap: 12px; }
  .level { padding: 17px 13px; min-height: 158px; flex-direction: column; align-items: flex-start; gap: 12px; border-radius: 17px; }
  .level-ico { flex-basis: 43px; width: 43px; height: 43px; }
  .level strong { font-size: 16px; }
  .level small { font-size: 11px; }
}
.motion-paused .level:hover, .motion-paused .level:hover .level-ico { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .level, .level-ico { transition: none; }
  .level:hover, .level:hover .level-ico { transform: none; }
}