/* --- AVANT -------------------------------------------------- */
/* .faq details { padding: 1rem 1.25rem; … } */

/* --- APRÈS -------------------------------------------------- */
.faq details {
  width: 100%;
  margin-bottom: 1.25rem;
  border: 1px solid var(--neon);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  transition: background 0.25s ease;
  /* plus de padding ici */
  cursor: pointer;
}

.faq details[open] {
  background: rgba(255, 255, 255, 0.07);
}

/* Le <summary> occupe toute la carte : */
.faq summary {
  
  list-style: none;          /* supprime la flèche native */
  display: flex;             /* garde votre mise en page */
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;

}
  /* On garde le style de votre classe .neon-subtitle …                 */
/* … et on ajoute simplement ces deux effets de fondu :               */
h2.neon-subtitle {
  cursor: pointer;
}
.fade-out {
  
  opacity: 0;
  transition: opacity 300ms ease-out;
}
.fade-in {
  
  opacity: 1;
  transition: opacity 500ms ease-in;
}

















            details.faq-item {
  margin: clamp(1rem, 2vw, 2rem) 0;
  border: 1px solid #29c4d8;
  border-radius: 1rem;
  padding: clamp(1rem, 2vw, 2rem);
  background: rgba(41, 196, 216, 0.05);
  transition: all 0.3s ease;
}

details.faq-item[open] {
  background: rgba(41, 196, 216, 0.1);
}

details.faq-item summary {
  cursor: pointer;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: bold;
  color: #29c4d8;
  list-style: none;
}

details.faq-item p {
  margin-top: 1rem;
  line-height: 1.6;
  font-size: clamp(1rem, 2vw, 1.2rem);
}










 .modal {
              display: none;  
  position: fixed;
  top: 0;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  overflow: auto;
}

.modal.visible {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background: #fff;
  padding: clamp(1rem, 4vw, 2rem);
  max-width: 80%;
  border-radius: 1rem;
  color: #000;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

.modal-content h3 {
    color: #333;
  margin-top: 0;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
}

.modal-close {
  margin-top: 1.5rem;
  background-color: #29c4d8;
  border: none;
  padding: 0.5rem 1.5rem;
  font-size: clamp(1rem, 2vw, 1.1rem);
  border-radius: 2rem;
  cursor: pointer;
  color: white;
  transition: background-color 0.3s ease;
}

.modal-close:hover {
  background-color: #1aa8b5;
}

.modal-trigger {
  background: none;
  border: none;
  color:rgb(255, 255, 255);
  font-weight: bold;
  cursor: pointer;
  font-size: 1em;
  padding: 4px;
}






/* 1. On transforme le <summary> en conteneur flex */
.faq-item summary{
  display: flex;
  justify-content: space-between; /* pousse l’icône à droite */
  align-items: flex-start;        /* centre verticalement (mettez center si vous voulez) */
  cursor: pointer;
  padding-right: .8rem;           /* petite marge après l’icône */
}

/* 2. On utilise ::after plutôt que ::before */
.faq-item summary::after{
  content: "✚";                   /* signe par défaut */
  font-weight: 700;
  min-width: 1.2rem;              /* évite les décalages quand le texte s’élargit */
  text-align: right;
  transition: transform .25s;
}

/* 3. Quand <details> est ouvert, on change le contenu */
.faq-item[open] summary::after{
  content: "⚊";                   /* signe ouvert */
}