/* Abri Piscine .fr — design system (palette Blue Note, Newsreader + Figtree) */
:root {
  --navy: #1D3557;
  --navy-deep: #142A47;
  --water: #49A3EE;
  --sky: #9DC3E6;
  --paper: #F0F6FC;
  --ink: #31435C;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Figtree', system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

.font-display { font-family: 'Newsreader', Georgia, serif; }

/* Hero : cascade d'entrée */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-rise { animation: rise-in .8s cubic-bezier(.2,.7,.3,1) both; }
.hero-rise-1 { animation-delay: .05s; }
.hero-rise-2 { animation-delay: .2s; }
.hero-rise-3 { animation-delay: .35s; }
.hero-rise-4 { animation-delay: .5s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-rise { animation: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Apparition au scroll */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Navigation : dropdown desktop + état actif */
@media (min-width: 1024px) {
  .nav-drop:hover .drop-menu,
  .nav-drop:focus-within .drop-menu { display: block; }
}
[aria-current="page"] { color: var(--sky); }
[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 2px;
  background: var(--water);
  border-radius: 1px;
}

/* Cartes produit & articles : hover image + flèche */
.zoom-img img { transition: transform .5s ease; }
.zoom-img:hover img { transform: scale(1.04); }
.card-arrow { transition: transform .3s ease; }
a:hover .card-arrow, a:focus-visible .card-arrow { transform: translateX(6px); }

/* Focus visible cohérent */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--water);
  outline-offset: 2px;
}

/* Grandes statistiques éditoriales */
.stat-number {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 600;
  line-height: 1;
  color: var(--navy);
}

/* Encadré normatif */
.callout {
  border-left: 4px solid var(--water);
  background: #E4EFF9;
}