/* ==========================================
   CONTENU PRINCIPAL
   Zone qui entoure la liste des questions/réponses
========================================== */
.page-content {
  padding: 60px 0;
}


/* ==========================================
   ÉLÉMENTS FAQ (accordéon questions / réponses)
========================================== */

/* Carte conteneur d'une question + sa réponse */
.faq-item {
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 15px;   /* Espace vertical entre chaque question */
  overflow: hidden;       /* Cache la réponse quand elle est fermée */
  transition: 0.3s;
}

.faq-item:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); /* Ombre renforcée au survol */
}

/* Ligne cliquable — affiche la question et le "+" */
.faq-question {
  padding: 20px;
  cursor: pointer;           /* Curseur main pour indiquer le clic possible */
  font-weight: 800;
  color: var(--terre-cuite);
  display: flex;
  justify-content: space-between; /* Question à gauche, "+" à droite */
  align-items: center;
  user-select: none;         /* Empêche la sélection du texte au clic */
}

/* Icône "+" à droite de la question */
.faq-question span {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--vert-sauge);
  transition: 0.3s;          /* Animation de rotation vers "×" */
}

/* Réponse cachée par défaut (hauteur 0) */
.faq-answer {
  padding: 0 20px;
  max-height: 0;             /* Fermé par défaut — main.js ajoute la classe .active */
  overflow: hidden;
  color: var(--gris);
  transition: max-height 0.3s ease, padding 0.3s ease; /* Animation fluide d'ouverture */
}

/* État ouvert : .active est ajoutée dynamiquement par main.js au clic */
.faq-item.active .faq-answer {
  max-height: 500px;         /* Hauteur maximale lors de l'ouverture */
  padding: 0 20px 20px 20px;
}

/* Rotation du "+" en "×" quand la question est ouverte */
.faq-item.active .faq-question span {
  transform: rotate(45deg);
}


/* ==========================================
   RESPONSIVE — MOBILES (max-width: 768px)
========================================== */
@media (max-width: 768px) {
  .page-header { padding: 40px 0; }
  .page-header h2 { font-size: 1.8rem; }
  .page-header p { font-size: 1rem; }
  .page-content { padding: 40px 0; }
  .faq-question { padding: 16px; font-size: 0.95rem; }
  .faq-question span { font-size: 1.3rem; }
  .faq-answer { font-size: 0.9rem; }
}

/* ==========================================
   RESPONSIVE — PETITS MOBILES (max-width: 480px)
========================================== */
@media (max-width: 480px) {
  .container { width: 90%; }
  .page-header { padding: 30px 0; }
  .page-header h2 { font-size: 1.5rem; }
  .page-header p { font-size: 0.9rem; }
  .page-content { padding: 30px 0; }
  .faq-question { padding: 14px; font-size: 0.9rem; }
  .faq-question span { font-size: 1.2rem; }
  .faq-answer { font-size: 0.85rem; padding: 0 14px; }
  .faq-item.active .faq-answer { padding: 0 14px 14px 14px; }
}

/* ==========================================
   RESPONSIVE — TRÈS PETITS MOBILES (max-width: 400px)
========================================== */
@media (max-width: 400px) {
  .page-header h2 { font-size: 1.3rem; }
  .page-header p { font-size: 0.85rem; }
  .faq-question { padding: 12px; font-size: 0.85rem; }
  .faq-answer { font-size: 0.8rem; }
}