@font-face {
    font-family: 'Exo';
    src: url('https://iwantviolet.fr/wp-content/uploads/2024/11/Exo-BoldItalic.woff2') format('woff2'),
        url('https://iwantviolet.fr/wp-content/uploads/2024/11/Exo-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Fira Sans Extra Condensed';
    src: url('https://iwantviolet.fr/wp-content/uploads/2024/11/FiraSansExtraCondensed-Bold.woff2') format('woff2'),
        url('https://iwantviolet.fr/wp-content/uploads/2024/11/FiraSansExtraCondensed-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('https://iwantviolet.fr/wp-content/uploads/2024/11/PlayfairDisplay-Regular.woff2') format('woff2'),
        url('https://iwantviolet.fr/wp-content/uploads/2024/11/PlayfairDisplay-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('https://iwantviolet.fr/wp-content/uploads/2024/11/FiraSans-Light.woff2') format('woff2'),
        url('https://iwantviolet.fr/wp-content/uploads/2024/11/FiraSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('https://iwantviolet.fr/wp-content/uploads/2024/11/PlayfairDisplay-Italic.woff2') format('woff2'),
        url('https://iwantviolet.fr/wp-content/uploads/2024/11/PlayfairDisplay-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Forum';
    src: url('https://iwantviolet.fr/wp-content/uploads/2024/11/Forum.woff2') format('woff2'),
        url('https://iwantviolet.fr/wp-content/uploads/2024/11/Forum.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


.neon-button {

    background-color: transparent;     /* Transparent background for neon effect */

    color: #F3E9FA;                    /* Neon text color */

    border: 3px solid rgba(0, 0, 255, 0.5);         /* Neon border */

    padding: 15px 40px;                /* Button padding */

    font-size: 18px;                   /* Text size */

    font-weight: bold;                 /* Bold text */

    border-radius: 10px;               /* Rounded corners */

    text-transform: uppercase;         /* Uppercase text */

    cursor: pointer;                   /* Pointer cursor */

    position: relative;                /* For positioning glow effects */

    transition: background-color 0.4s, color 0.4s; /* Smooth transition */

    overflow: hidden;                  /* Hide overflow for effect */
		font-family: 'Fira Sans', sans-serif;
}

/* Neon glow effect around button */

.neon-button::before,

.neon-button::after {

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    border-radius: inherit;            /* Match button shape */

    box-shadow: 0 0 10px #00ffea,      /* Glowing layers */

                0 0 20px #00ffea, 

                0 0 30px #00ffea, 

                0 0 40px #00ffea, 

                0 0 50px #00ffea, 

                0 0 60px #00ffea, 

                0 0 70px #00ffea;

    opacity: 0;

    transition: opacity 0.4s, transform 0.4s;

}

/* Glow effect on hover */

.neon-button:hover::before, 

.neon-button:hover::after {

    opacity: 1;

    transform: scale(1.1);  /* Slightly enlarges the glow */

}

/* Neon text glow on hover */

.neon-button:hover {

    color: #00ffea;

    text-shadow: 0 0 5px #00ffea, 0 0 10px #00ffea, 0 0 15px #00ffea;

}

/* Click effect to change button background */

.neon-button:active {

    background-color: #00ffea;        /* Changes background to neon color on click */

    color: #111;                      /* Darken text color for contrast */

    box-shadow: 0 0 5px #00ffea, 0 0 15px #00ffea; /* Small inner shadow */

    transition: background-color 0.2s, color 0.2s;

}

/* Effet de survol sur le texte du bouton "Menu" */
.accordion-button:hover {
  background-color: transparent; /* Changer la couleur de fond */
  color: #007bff; /* Changer la couleur du texte */
  transform: scale(1.05); /* Zoom léger sur le texte */
}

/* Si tu veux des effets d'animation sur le contenu (ex. fade in) */
.accordion-content {
  display: none;
  padding: 10px;
  background-color: transparent;
}

/*.accordion-item.active .accordion-content {
  display: block;
  animation: fadeIn 0.3s ease-in;
}*/

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

:root {
  -neon-color: #adff2f;
}

.neon-frame {
  display: inline-block; /* Adapte la taille à l'image */
  padding: 10px; /* Espace pour le cadre autour de l'image */
  border: 2px solid var(--neon-color);
  border-radius: 5px;
  box-shadow: 
    1px 0 0 var(--neon-color), 
    -1px 0 0 var(--neon-color),
    0 1px 0 var(--neon-color),
    0 -1px 0 var(--neon-color),
    0 0 5px var(--neon-color),
    0 0 10px var(--neon-color),
    0 0 15px var(--neon-color),
    0 0 25px var(--neon-color),
    0 0 50px var(--neon-color);
  animation: neon-frame-glow 2s infinite alternate;
}

.neon-image {
  display: block; /* Évite les marges non désirées */
  border-radius: 5px; /* Ajuste au cadre pour un rendu uniforme */
  width: 100%; /* Adapte au conteneur */
  height: auto; /* Garde les proportions de l'image */
}

@keyframes neon-frame-glow {
  0% {
    box-shadow: 
      1px 0 0 var(--neon-color), 
      -1px 0 0 var(--neon-color),
      0 1px 0 var(--neon-color),
      0 -1px 0 var(--neon-color),
      0 0 5px var(--neon-color),
      0 0 10px var(--neon-color),
      0 0 15px var(--neon-color),
      0 0 25px var(--neon-color);
  }
  100% {
    box-shadow: 
      1px 0 0 var(--neon-color), 
      -1px 0 0 var(--neon-color),
      0 1px 0 var(--neon-color),
      0 -1px 0 var(--neon-color),
      0 0 15px var(--neon-color),
      0 0 30px var(--neon-color),
      0 0 40px var(--neon-color),
      0 0 60px var(--neon-color);
  }
}


@keyframes buzz {
  70% {
    opacity: 0.8;
  }
}