/* Tout est *namespacé* sous .chronodius-hero pour éviter les collisions */
/* S'appuie sur tes variables existantes (thèmes light/dark/night) */

.chronodius-hero {
  position: relative;
  padding: clamp(24px, 6vw, 72px) 0 clamp(20px, 5vw, 56px);
  /* Fond type plan technique subtil, animé très légèrement */
  background:
    repeating-linear-gradient(0deg, color-mix(in oklab, var(--panel), #ffffff 8%) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, color-mix(in oklab, var(--panel), #ffffff 5%) 0 1px, transparent 1px 46px);
  animation: hero-grid-pan 40s linear infinite;
  border-bottom: 1px solid color-mix(in oklab, var(--panel), #000 35%);
}

@keyframes hero-grid-pan {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 360px 360px, 180px 180px; }
}

.chronodius-hero .hero-wrap {
  /* .wrap existe déjà, on ajoute juste un spacing vertical cohérent via la section */
}

.chronodius-hero .hero-title {
  margin: 0;
  text-align: center;
  font-family: "Audiowide", system-ui, Segoe UI, Roboto, Inter, sans-serif;
  font-size: clamp(28px, 6.5vw, 64px);
  letter-spacing: .02em;
  color: var(--fg);
}

.chronodius-hero .hero-sub {
  margin: 10px 0 22px;
  text-align: center;
  font-size: clamp(15px, 2.8vw, 20px);
  color: var(--muted);
}

.chronodius-hero .hero-cta {
  display: inline-block;
  margin: 6px auto 22px;
  padding: 12px 24px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent), #ffffff 40%); /* bleu clair */
  color: color-mix(in oklab, var(--bg), #001 10%);
  border: 2px solid color-mix(in oklab, #7a52ff, var(--accent) 20%); /* liseré violet */
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .12s ease;
}

.chronodius-hero .hero-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.24);
}

.chronodius-hero .hero-cta:active {
  transform: translateY(-1px);
  filter: brightness(1.08); /* clic → légèrement plus clair */
}

.chronodius-hero .hero-cta:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
}

.chronodius-hero .hero-sketches {
  display: grid;
  gap: clamp(12px, 2.6vw, 24px);
  margin-top: clamp(10px, 2vw, 18px);
}

/* Feuilles avec « lignes techniques » en surimpression */
.chronodius-hero .hero-sheet {
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--panel), #000 25%);
  border-radius: 14px;
  padding: clamp(10px, 2vw, 18px);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 .8px 2px rgba(0,0,0,.05),
    0 10px 30px -18px rgba(0,0,0,.35);
}

.chronodius-hero .hero-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, #cfe0ff33 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, #cfe0ff22 0 1px, transparent 1px 48px);
  pointer-events: none;
  mix-blend-mode: multiply;
}

.chronodius-hero .hero-sheet img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  background: #fff;
}

/* ————— Responsive ————— */

/* Desktop : on laisse en colonne (croquis l'un sous l'autre) pour rester fidèle à ta maquette */
@media (min-width: 980px) {
  .chronodius-hero .hero-sketches {
    max-width: 900px;
    margin-inline: auto;
  }
}

/* Mobile d'abord : tout est déjà empilé + tailles fluides via clamp() */
/* On resserre juste les paddings sur très petit écran */
@media (max-width: 420px) {
  .chronodius-hero {
    padding: 20px 0 28px;
  }
  .chronodius-hero .hero-cta {
    padding: 12px 18px;
  }
}