/* ============================================================
   programming-for-kids.css
   Page "bientôt disponible" — réutilise les tokens et classes
   de ../css/style.css (.wrap, .eyebrow, .btn, .reveal, .ring-ico...)
   ============================================================ */

.kids-hero{
  padding:150px 0 90px;
  min-height:70vh;
  display:flex;
  align-items:center;
}

.coming-soon-panel{
  max-width:640px;
}

.coming-soon-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--teal-bright);
  background:rgba(2,200,187,0.12);
  border:1px solid var(--line-bright);
  padding:7px 16px;
  border-radius:20px;
  margin-bottom:22px;
}
.coming-soon-badge .dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--teal);
  animation:pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{opacity:1;}
  50%{opacity:0.35;}
}

.kids-icon{
  width:84px;height:84px;
  border-radius:24px;
  border:2px solid var(--teal);
  background:var(--bg-card);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  margin-bottom:28px;
  box-shadow:var(--shadow-glow);
}
.kids-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.coming-soon-panel .hero-ctas{
  margin-top:34px;
}

@media (prefers-reduced-motion: reduce){
  .coming-soon-badge .dot{animation:none;}
}

@media (max-width:720px){
  .kids-hero{padding-top:120px;min-height:60vh;}
}