/* ----- Mise en forme globale ----- */

body {
    font-family: 'InterRegular', Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    margin: 0;
    background: #f5f5f5;
    color: #333;
}

header {
    background: linear-gradient(135deg, #4a90e2, #50c878);
    color: white;
    padding: 2rem 1rem;
    text-align: center;
}
header h1 {
  margin: 0;
  font-size: 2.5rem;
  font-family: 'RabbidHighwaySignIVRegular', Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
}
header p  { margin-top: .5rem; font-size: 1.2rem; }

/* ----- Menu d’icônes ----- */
.menu {
    display: flex;
    justify-content: center;
    gap: 2rem;
    background: #fff;
    padding: 1rem 0;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
.menu img {
    width: 64px;
    height: 64px;
    cursor: pointer;
    opacity: .6;
    transition: opacity .2s;
}
.menu img.active,
.menu img:hover { opacity: 1; }

/* ----- Conteneur des volets ----- */
.panels {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
}
.panel {
    display: none;               /* caché par défaut */
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    animation: fadeIn .3s ease-out forwards;
}
.panel.active { display: block; }

.panel h2 {
    margin-top: 0;
    color: #4a90e2;
}
.panel ul {
    margin: .5rem 0 1rem;
    padding-left: 1.2rem;
}
.download-btn {
  position: relative;
  display: inline-block;
  background-color: #50c57d;
  color: #fff;
  text-decoration: none;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  font-weight: bold;
  overflow: hidden;
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

/* Glow au survol */
.download-btn:hover {
  box-shadow: 0 0 12px rgba(75, 145, 223, 0.6), 0 0 24px rgba(80, 197, 125, 0.4);
}

/* Glow intensifié au clic */
.download-btn:active {
  box-shadow: 0 0 20px rgba(75, 145, 223, 0.8), 0 0 40px rgba(80, 197, 125, 0.6);
}

/* Pseudo-élément pour le dégradé animé */
.download-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -200%;
  width: 400%;
  height: 100%;
  background: linear-gradient(115deg, #50c57d, #4b91df, #50c57d, #4b91df, #50c57d);
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: slideGradient 2s linear infinite;
  z-index: 0;
}

/* Activation du dégradé au survol */
.download-btn:hover::before {
  opacity: 1;
}

/* Texte au-dessus du dégradé */
.download-btn span {
  position: relative;
  z-index: 1;
}

/* Animation fluide du dégradé */
@keyframes slideGradient {
  0% { transform: translateX(0); }
  100% { transform: translateX(50%); }
}