/* =========================================================================
   AXstudio — FAQ en accordéon animé
   - Ouverture/fermeture fluide (hauteur animée via grid 0fr -> 1fr)
   - Le "+" pivote en "×" à l'ouverture
   - Le texte de la réponse se révèle avec un balayage lumineux ("shimmer")
   Couleurs DA : fond #030819, texte #FFFFFF, couleur d'appel #FFE100.
   ========================================================================= */

/* Conteneur racine : par défaut un custom element est "inline", donc on le
   passe en block + 100% pour que sa largeur soit gérée par le conteneur parent. */
.ax-faq {
  display: block;
  width: 100%;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Liste sans puces */
.ax-faq-list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Un item = une question + sa réponse */
.ax-faq-item {
  --speed: 0.26s;                               /* vitesse des transitions */
  --ease: cubic-bezier(0.215, 0.61, 0.355, 1);  /* courbe douce */
  width: 100%;
  list-style: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.ax-faq-item:last-child {
  border-bottom: none;
}

/* La question = un bouton pleine largeur */
.ax-faq-question {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between; /* texte à gauche, "+" à droite */
  gap: 48px;
  padding: 32px 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: #FFFFFF;
  font-family: 'arial';
  font-size: 24px;
  font-weight: 700;
  line-height: 120%;
  text-align: left;
  user-select: none;
}
.ax-faq-label {
  flex: 1; /* le texte prend toute la place, le "+" reste à droite */
}

/* Le "+" à droite, qui pivote en "×" quand c'est ouvert */
.ax-faq-plus {
  width: 20px;
  height: 20px;
  padding: 4px;
  border-radius: 100px;
  flex-shrink: 0;
  color: #FFE100;
  opacity: 1; /* toujours visible (plus seulement au survol) */
  border: 1px solid transparent;
    background:
    linear-gradient(#030819, #030819) padding-box,
    linear-gradient(170deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.20) 25%,
      rgba(255, 255, 255, 0.04) 55%,
      rgba(255, 255, 255, 0) 100%
    ) border-box,
    linear-gradient(rgba(255, 255, 255, 0.10),
                    rgba(255, 255, 255, 0.10)) border-box;
  transition: opacity var(--speed) var(--ease),
              rotate var(--speed) var(--ease);
}
.ax-faq-item[data-open] .ax-faq-plus {
  rotate: 225deg; /* le "+" devient un "×" */
}

/* Astuce d'animation de hauteur : on anime une grille de 0fr à 1fr.
   C'est ce qui permet une ouverture fluide SANS connaître la hauteur. */
.ax-faq-content-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--speed) var(--ease);
}
.ax-faq-item[data-open] .ax-faq-content-wrap {
  grid-template-rows: 1fr;
}

/* La zone qui se déplie doit masquer le débordement pendant l'animation */
.ax-faq-content {
  overflow: hidden;
  min-height: 0;
}

/* La réponse */
.ax-faq-answer {
  padding: 0 24px 24px; /* mêmes 24px gauche/droite que la question, + 24px en bas */
  color: rgba(255, 255, 255, 0.7); /* couleur de secours (voir shimmer plus bas) */
}
.ax-faq-answer p {
  margin: 0;
  font-family: 'Arial', Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 140%;
  text-align: left;
  color: rgba(255, 255, 255, 0.7);
}

/* Le contenu glisse légèrement depuis le bas en apparaissant */
@media (prefers-reduced-motion: no-preference) {
  .ax-faq-content {
    translate: 0 1lh;
    opacity: 0.6;
    transition: translate var(--speed) var(--ease),
                opacity var(--speed) var(--ease);
  }
  .ax-faq-item[data-open] .ax-faq-content {
    translate: 0 0;
    opacity: 1;
  }

  /* ===== Effet "shimmer" LIGNE PAR LIGNE =====================================
     "display: inline" est LA clé : le dégradé s'applique alors à chaque ligne
     de texte séparément → la révélation se fait ligne par ligne.
     Le texte est peint par un dégradé découpé à la forme des lettres
     (background-clip: text), qui contient les 3 états du balayage :
       - derrière le front  : blanc opacité 0.7 (déjà révélé)
       - le front           : jaune (couleur d'appel) qui se déplace
       - devant le front    : blanc opacité 0.2 (pas encore révélé) */
  .ax-faq-answer p {
    display: inline;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg,
      rgba(255, 255, 255, 0.8) 0% 48%,   /* révélé : blanc 0.7 */
      #FFE100 50%,                        /* le front lumineux : jaune (bande fine) */
      rgba(255, 255, 255, 0.2) 52% 100%  /* pas encore révélé : blanc 0.2 */
    );
    /* 300% (au lieu de 200%) : le jaune a la place de TRAVERSER puis de SORTIR,
       il ne reste donc plus sur les dernières lettres à la fin. */
    background-size: 300% 100%;
    background-position: 100% 0;          /* fermé : tout en blanc 0.2 */
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    /* durée proportionnelle à la longueur du texte (var posée par le JS).
       Courbe qui démarre tout de suite au clic ET accélère sur la fin. */
    transition: background-position
                calc(var(--char-count, 200) / var(--cps, 50) * 1s)
                cubic-bezier(0.2, 0.5, 0.8, 0.6);
  }
  .ax-faq-item[data-open] .ax-faq-answer p {
    background-position: 0 0;             /* ouvert : le jaune traverse puis SORT */
  }
}