/* Page d'accueil : hero + grille de fonctionnalités */

.hero { position: relative; padding-block: var(--space-7) var(--space-6); overflow: hidden; }
.hero__inner {
  display: grid; align-items: center; gap: var(--space-6);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: min(680px, calc(100vh - var(--nav-h) - 40px));
}
.hero__copy { display: grid; gap: var(--space-5); justify-items: start; }
.hero__title { font-size: clamp(2.3rem, 1.3rem + 4vw, 4.4rem); line-height: 1.02; letter-spacing: -.005em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__stats {
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  margin-top: var(--space-2); padding-top: var(--space-5);
  border-top: 1px dashed var(--border-strong);
}
.hero__stats dd { margin: 0; }
.hero__stats .stat { display: flex; flex-direction: column-reverse; gap: 6px; }
/* chiffres sur écran LCD */
.hero__stats .stat__value {
  padding: 4px 10px 2px;
  background: radial-gradient(120% 140% at 50% 0%, #10346b 0%, #071533 60%, #040b1f 100%);
  border: 2px solid; border-color: var(--win-lo) var(--win-hi) var(--win-hi) var(--win-lo);
  font-family: var(--font-mono); font-weight: 400; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); letter-spacing: .04em;
  color: #7df9ff; text-shadow: 0 0 8px rgba(125, 249, 255, .75);
  background-image:
    repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    radial-gradient(120% 140% at 50% 0%, #10346b 0%, #071533 60%, #040b1f 100%);
}
.hero__stats .stat__label { font-family: var(--font-pixel); font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; }

.hero__visual { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 0.85; }
.hero__orbit {
  position: absolute; inset: 6% 4%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(255, 62, 165, .35), transparent 70%),
    conic-gradient(from 0deg, rgba(57,225,255,.0), rgba(57,225,255,.35), rgba(255,62,165,.5), rgba(255,198,26,.25), rgba(57,225,255,.0));
  filter: blur(28px);
  animation: orbit-spin 18s linear infinite;
}
.hero__visual::before {
  content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 60px rgba(179, 136, 255, .18);
}
.hero__visual::after {
  content: ""; position: absolute; width: 98%; aspect-ratio: 2.4 / 1; border-radius: 50%;
  border: 1px dashed rgba(57, 225, 255, .35);
  transform: rotate(-12deg);
  animation: orbit-wobble 9s var(--ease) infinite alternate;
}
.hero__logo {
  position: relative; z-index: 1; width: 112%; max-width: none; height: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)) drop-shadow(0 0 30px rgba(255, 62, 165, .25));
  animation: float 6s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(1deg); } }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes orbit-wobble { to { transform: rotate(-4deg) scale(1.04); } }

/* Étincelles Y2K (étoile 4 branches) */
.sparkle {
  position: absolute; z-index: 2; width: 26px; aspect-ratio: 1;
  background: #fff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px var(--accent));
  animation: twinkle 2.8s ease-in-out infinite;
}
.sparkle--1 { top: 14%; left: 12%; }
.sparkle--2 { top: 20%; right: 8%; width: 18px; animation-delay: .9s; }
.sparkle--3 { bottom: 16%; right: 22%; width: 22px; animation-delay: 1.7s; }
@keyframes twinkle { 0%, 100% { transform: scale(.35) rotate(0); opacity: .3; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hero__logo, .hero__orbit, .hero__visual::after, .sparkle { animation: none; }
}

@media (max-width: 900px) {
  .hero { padding-top: var(--space-5); }
  .hero__inner { grid-template-columns: 1fr; min-height: 0; gap: var(--space-4); }
  .hero__visual { order: -1; max-width: 520px; width: 100%; margin-inline: auto; aspect-ratio: 1.5 / 1; }
  .hero__logo { width: 100%; }
}
@media (max-width: 480px) {
  .hero__stats { gap: var(--space-5); }
  .hero__actions .btn { flex: 1 1 100%; }
}

/* Radio */
.radio { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-7); align-items: center; }
.radio__copy { display: grid; gap: var(--space-4); }
.radio__keys { font-size: .9rem; }
kbd {
  display: inline-block; padding: 1px 8px; border-radius: 6px;
  border: 1px solid var(--border-strong); border-bottom-width: 2px;
  background: var(--surface); font-family: var(--font-mono); font-size: 1rem; color: var(--text);
}
@media (max-width: 900px) { .radio { grid-template-columns: 1fr; gap: var(--space-5); } }

/* Fonctionnalités */
.features { display: grid; gap: var(--space-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

.feature {
  --pad: var(--space-5);
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--pad);
  min-height: 250px;
  border: 2px solid; border-color: var(--win-hi) var(--win-lo) var(--win-lo) var(--win-hi);
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, rgba(26, 16, 48, .95), rgba(18, 10, 36, .95));
  box-shadow: 0 0 0 1px #000, var(--hard-shadow);
  text-decoration: none; color: var(--text);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.feature .window-bar { background: var(--win-title-idle); margin-bottom: var(--space-2); transition: filter 180ms var(--ease); }
.feature::before { /* halo au survol */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(400px circle at 0% 30%, rgba(255, 62, 165, .2), transparent 60%);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
/* survol : la fenêtre passe au premier plan (barre active) */
.feature:hover, .feature:focus-visible { transform: translate(-2px, -3px); box-shadow: 0 0 0 1px #000, 8px 9px 0 rgba(0,0,0,.55), 0 0 26px rgba(255, 62, 165, .35); }
.feature:hover .window-bar, .feature:focus-visible .window-bar { background: var(--win-title); }
.feature:hover::before, .feature:focus-visible::before { opacity: 1; }
.feature__index { font-family: var(--font-pixel); font-size: .75rem; color: var(--accent); letter-spacing: .1em; }
.feature__index::before { content: "C:\\WAYBE\\"; color: var(--text-muted); }
.feature h3 { font-size: 1.3rem; }
.feature p { color: var(--text-muted); font-size: .9rem; }
.feature__cta {
  margin-top: auto; align-self: flex-start;
  padding: 4px 12px; border: 1px solid #1a0b2c; border-radius: 4px;
  background: var(--silver); color: #23123a;
  box-shadow: inset -1px -2px 0 rgba(120, 95, 170, .35), inset 1px 1px 0 #fff, 0 2px 0 rgba(0,0,0,.45);
  font-family: var(--font-ui); font-weight: 700; font-size: .82rem;
}
.feature__cta span { display: inline-block; transition: transform var(--dur) var(--ease); }
.feature:hover .feature__cta span { transform: translateX(4px); }