/* ===========================================================================
   Bloc FAQ : questions fréquentes visibles + balisage FAQPage
   Chargé uniquement sur les pages qui définissent $page_faq (voir head.php).

   Le bloc s'appuie sur les règles existantes du site : il est rendu dans
   <section class="one"> avec un .container Bootstrap, donc il a exactement la
   même largeur et les mêmes marges que les autres sections. Les titres et les
   paragraphes héritent de « section h2 » et « section p » (Ubuntu / Roboto,
   #02182B). Ce fichier n'ajoute que ce qui manque : l'accordéon.

   Palette du site : #02182B (bleu nuit), #A31621 (rouge).
   Sans JavaScript : <details>/<summary> natifs.
   =========================================================================== */

.faq-section {
  background-color: #f4f6f8;
}

/* Chapeau sous le titre de section : même famille que les paragraphes du site,
   mais centré comme les titres de section et sans justification. */
.faq-section .faq-intro {
  font-family: Roboto, sans-serif;
  font-size: 15px;
  line-height: 21px;
  color: #02182B;
  text-align: center;
  opacity: .75;
  margin: 0 auto 30px;
  max-width: 640px;
}

/* Pas de contour : les questions se détachent par le fond blanc seul. */
.faq-item {
  background: #fff;
  border-radius: 6px;
}

.faq-item + .faq-item {
  margin-top: 10px;
}

.faq-item > summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 18px 56px 18px 22px;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
  color: #02182B;
  transition: color .3s ease-in-out;
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item > summary:hover { color: #A31621; }

.faq-item > summary:focus-visible {
  outline: 3px solid #A31621;
  outline-offset: 2px;
}

/* Pastille ronde + chevron, dans l'esprit des cercles .box3 / .icon du site. */
.faq-item > summary::before {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #A31621;
  transition: background-color .3s ease-in-out;
}

.faq-item > summary::after {
  content: "";
  position: absolute;
  right: 27px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-75%) rotate(45deg);
  transition: transform .3s ease-in-out;
}

.faq-item[open] > summary { color: #A31621; }
.faq-item[open] > summary::before { background-color: #02182B; }
.faq-item[open] > summary::after { transform: translateY(-25%) rotate(-135deg); }

.faq-answer {
  padding: 0 22px 20px;
}

/* Hérite de « section p » (Roboto 15px, justifié, #02182B) : on ne surcharge
   que l'interligne, un peu plus aéré pour de la lecture en accordéon. */
.faq-answer p {
  line-height: 24px;
  margin: 0;
}

@media only screen and (max-width: 768px) {
  .faq-item > summary {
    font-size: 17px;
    line-height: 22px;
    padding: 15px 50px 15px 16px;
  }
  .faq-answer { padding: 0 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item > summary,
  .faq-item > summary::before,
  .faq-item > summary::after { transition: none; }
}