@import url(./variables.css);

body, h1, button, p, a {
    margin: 0;
    padding: 0;
    font-family: var(--accent-font);
  }
  
  body {
    background: var(--background-color);
    color: #fff;
    font-size: 16px;
  }

  
  .faq-container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
  }
  
  .faq-title {
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 2em;
    color: white;
    text-align: left; /* Si vous voulez aligner à gauche */
  }

  .faq-description {
    margin-bottom: 40px; 
  }
  
  .faq-category h2 {
    color: #fff;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  
  .faq-item {
    margin: 10px 0;
  }
  
  .faq-question-btn {
    width: 100%;
    background: none;
    border: none;
    padding: 10px;
    color: #fff;
    cursor: pointer;
    border-bottom: 1px solid #cd0c75;
    text-align: left; /* Alignement du texte à gauche */
    position: relative; /* Nécessaire pour la position absolue de la flèche */
    font-size: 1.2em;
    overflow: hidden; /* Assure que la flèche reste dans les limites du bouton */
  }
  
  .faq-arrow {
    position: absolute;
    right: 10px; /* Position à droite avec un espace de 10px */
    top: 50%; /* Positionne à mi-hauteur du bouton */
    transform: translateY(-50%); /* Centre la flèche verticalement */
    color: #fff;
    transition: transform 0.3s ease; /* Animation douce pour la rotation */
  }
  
  /* Lorsque la réponse est active, la flèche tourne */
  .faq-item.active .faq-question-btn .faq-arrow {
    transform: translateY(-50%) rotate(180deg); /* Ajoute la rotation à la transformation existante */
  }
  
  .faq-answer {
    display: none; /* Cache par défaut */
    padding: 10px;
    border-bottom: 1px solid #cd0c75;
  }
  
  /* Style pour afficher la réponse */
  .faq-item.active .faq-answer {
    display: block;
  }
  
  .faq-contact p {
    text-align: center;
    margin-top: 20px;
  }
  
  .faq-contact a {
    color: #cd0c75;
    text-decoration: none;
  }
  
  .faq-contact a:hover {
    text-decoration: underline;
  }