:root {
  --color-accent: #f59e0b;
  --color-accent-hover: #d97706;
  --shadow-color: 79, 70, 229;
}

html {
  scroll-behavior: smooth;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

/* Focus visible cohérent, couleur accent, sur tout élément interactif */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

body {
  height: 100dvh;
  overflow: hidden;
}

.scroll-container {
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 4rem;
  overscroll-behavior-y: contain;
  opacity: 0;
  animation: fadeIn 0.3s ease-in forwards;
}

.snap-section {
  scroll-snap-align: start;
  min-height: 100dvh;
}

/* Le décalage nav (une seule fois : scroll-padding-top sur le container
   suffit, scroll-margin-top par section était redondant et doublait la
   marge à 8rem au lieu de 4rem) est géré uniquement via scroll-padding-top
   ci-dessus. Dernière section : sa hauteur pleine écran fait coïncider la
   limite physique de scroll avec le haut du footer, empêchant le snap de
   laisser cette marge nav au-dessus. On la retranche de sa hauteur pour que
   la limite de scroll et le point de snap tombent exactement au même
   endroit — footer collé sous la nav, sans espace. */
footer.snap-section {
  min-height: calc(100dvh - 4rem);
}

@keyframes fadeIn {
  to { opacity: 1; }
}

.tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background-color: #eef2ff;
  color: #4338ca;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Cartes : ombre teintée plutôt que bordure dure + ombre neutre */
.card,
.skill-card {
  box-shadow: 0 1px 2px rgba(var(--shadow-color), 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: transform 300ms ease, box-shadow 300ms ease;
}

.card:hover,
.skill-card:hover {
  box-shadow: 0 12px 24px rgba(var(--shadow-color), 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
}

.card:hover {
  transform: translateY(-4px);
}

header {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Halo décoratif chaud derrière le hero, pour casser le blanc plat.
   Le flou (blur) déborde visuellement au-delà de sa propre boîte : un
   simple `top` positif ne suffit pas à l'empêcher de remonter sous la nav,
   il faut un ancêtre avec overflow:hidden dont le bord haut est *exactement*
   celui de la nav (pas celui de la section, qui commence en haut de page).
   .hero-glow-clip fait ce clip ; .hero-glow peut ensuite déborder librement
   à l'intérieur sans jamais atteindre la zone de la nav. */
.hero-glow-clip {
  position: absolute;
  top: 4rem;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

.hero-glow {
  position: absolute;
  width: 32rem;
  height: 32rem;
  border-radius: 9999px;
  background: radial-gradient(circle, var(--color-accent) 0%, #4f46e5 60%, transparent 75%);
  opacity: 0.16;
  filter: blur(60px);
  top: -4rem;
  right: -8rem;
}

/* === Apparition au scroll === */

/* Services : slide up + stagger */
#services h2,
#services .card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
#services .card:nth-child(1) { transition-delay: 0.1s; }
#services .card:nth-child(2) { transition-delay: 0.2s; }
#services .card:nth-child(3) { transition-delay: 0.3s; }
#services.is-visible h2,
#services.is-visible .card {
  opacity: 1;
  transform: none;
}

/* Compétences : slide from left + stagger */
#competences h2,
#competences .skill-card {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
#competences .skill-card:nth-child(1) { transition-delay: 0.1s; }
#competences .skill-card:nth-child(2) { transition-delay: 0.2s; }
#competences .skill-card:nth-child(3) { transition-delay: 0.3s; }
#competences .skill-card:nth-child(4) { transition-delay: 0.4s; }
#competences.is-visible h2,
#competences.is-visible .skill-card {
  opacity: 1;
  transform: none;
}

/* La team : pure fade */
#team h2,
#team .team-photo,
#team .team-bio {
  opacity: 0;
  transition: opacity 0.7s ease;
}
#team .team-photo { transition-delay: 0.15s; }
#team .team-bio   { transition-delay: 0.3s; }
#team.is-visible h2,
#team.is-visible .team-photo,
#team.is-visible .team-bio {
  opacity: 1;
}