:root{
    --bg: #000;
    --text: #ffffff;
    --accent: #d6dbdd;   /* couleur au survol / accent initial */
    --accent-final: #ff7b72; /* couleur finale après clic */
    --font-size: 3rem;   /* taille de base du lien (ajuste ici) */
    --fade-duration: 2s;
    --click-duration: 2s;
  }

  /* reset simple */
  html,body{height:100%;margin:0;}
  body{
    background: var(--bg);
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  /* paragraphe centré */
  p.center-wrap{
    margin:0;
    padding:0 1rem;
    max-width: 900px;
    animation: fadeIn var(--fade-duration) ease both;
    /* garde la zone focusable ergonomique */
  }

  /* style du lien : grand, pas de soulignement */
  a.big-link {
  display:inline-block;
  text-decoration:none;
  color: var(--accent);
  font-size: var(--font-size);
  font-weight: 700;
  padding: .5rem 1rem;
  border-radius: .5rem;
  outline: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms ease, filter 160ms ease;
  
}


  a.big-link:hover {
  transform: translateY(-4px) scale(1.02);
  filter: brightness(1.05);
  animation: shadowColor 3s linear infinite;
}

  
  @keyframes shadowColor {
     0%   { box-shadow: 0 0 20px hsl(0, 100%, 50%), 0 0 40px hsl(0, 100%, 50%); }
  25%  { box-shadow: 0 0 20px hsl(340, 97%, 14%), 0 0 40px hsl(90, 100%, 50%); }
  50%  { box-shadow: 0 0 20px hsl(278, 61%, 14%), 0 0 40px hsl(180, 100%, 50%); }
  75%  { box-shadow: 0 0 20px hsl(270, 100%, 50%), 0 0 40px hsl(270, 100%, 50%); }
  100% { box-shadow: 0 0 20px hsl(360, 100%, 50%), 0 0 40px hsl(360, 100%, 50%); }
}

  /* animation clique : grossit, puis revient, et garde la couleur finale */
  @keyframes clickAnim {
    0%   { transform: scale(1); color: var(--accent); }
    50%  { transform: scale(1.65); color: var(--accent-final); }
    100% { transform: scale(1); color: var(--accent-final); }
  }

  /* fade-in à l'arrivée */
  @keyframes fadeIn {
    0% { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* classe appliquée au clic (déclenche l'animation) */
  a.big-link.clicked {
    animation: clickAnim 2s cubic-bezier(.2,.9,.2,1) both;
    pointer-events: none; /* évite double clic */
  }

  /* après l'animation on applique une classe "final" pour forcer la couleur si besoin */
  a.big-link.final {
    color: var(--accent-final);
    transform: scale(1);
    pointer-events: none;
  }

  /* accessibilité : si l'utilisateur préfère peu de mouvement, on supprime les animations */
  @media (prefers-reduced-motion: reduce) {
    p.center-wrap { animation: none; }
    a.big-link, a.big-link:hover { transition: none; transform: none; }
    a.big-link.clicked { animation: none; }
  }

  /* responsive : réduit la taille sur petits écrans */
  @media (max-width:480px){
    :root { --font-size: 2rem; }
  }