/* ============================================================
   FAQ-PAGE.CSS — Styles dédiés à la page /faq
   All In Communication
============================================================ */

/* ── Hero FAQ ─────────────────────────────────────────────────────────────── */
.faq-hero {
  padding: 7rem 1.5rem 3rem;
  background: var(--blanc);
  text-align: center;
}

.faq-hero__interieur {
  max-width: 860px;
  margin: 0 auto;
}

.faq-hero .fil-ariane {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.faq-hero .fil-ariane__liste {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.faq-hero__titre {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--noir);
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}

.faq-hero__sous-titre {
  font-size: 1.05rem;
  color: #5a6a85;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

/* ── Filtres catégories — même design que réalisations ──────────────────── */
.faq-hero__categories {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  justify-content: center;
}

.faq-cat {
  font-family: var(--police);
  font-weight: 500;
  font-size: 0.875rem;
  color: #718096;
  background: var(--blanc);
  border: 1.5px solid var(--gris-bord);
  border-radius: var(--rayon-pill);
  padding: 0.45rem 1.1rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  display: inline-block;
}

.faq-cat--bleu:hover   { background: var(--bleu-01);  color: var(--blanc); border-color: var(--bleu-01);  font-weight: 600; }
.faq-cat--rouge:hover  { background: var(--rouge-01); color: var(--blanc); border-color: var(--rouge-01); font-weight: 600; }
.faq-cat--vert:hover   { background: var(--vert-01);  color: var(--blanc); border-color: var(--vert-01);  font-weight: 600; }
.faq-cat--jaune:hover  { background: var(--jaune-01); color: var(--noir);  border-color: var(--jaune-01); font-weight: 600; }
.faq-cat--violet:hover { background: #BA7AEB;         color: var(--blanc); border-color: #BA7AEB;         font-weight: 600; }

/* ── Badge catégorie dans section ────────────────────────────────────────── */
.faq__cat-badge {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.faq__cat-badge--bleu   { background: var(--bleu-03);  color: var(--bleu-01);  }
.faq__cat-badge--rouge  { background: var(--rouge-03); color: var(--rouge-01); }
.faq__cat-badge--vert   { background: var(--vert-03);  color: var(--vert-01);  }
.faq__cat-badge--jaune  { background: var(--jaune-03); color: #b08300;         }
.faq__cat-badge--violet { background: #F8F2FD;         color: #BA7AEB;         }

/* ── Sections FAQ — fond blanc uniforme ──────────────────────────────────── */
.faq--bleu        { background: var(--blanc); }
.faq--bleu-clair  { background: var(--blanc); }
.faq--rouge-clair { background: var(--blanc); }
.faq--vert-clair  { background: var(--blanc); }
.faq--jaune-clair { background: var(--blanc); }
.faq--violet-clair{ background: var(--blanc); }

/* ── Icône accordéon : bonne couleur selon type d'item ───────────────────── */
.faq__item--rouge.est-ouvert  .faq__icone { background: var(--rouge-01) !important; border-color: var(--rouge-01) !important; }
.faq__item--vert.est-ouvert   .faq__icone { background: var(--vert-01)  !important; border-color: var(--vert-01)  !important; }
.faq__item--jaune.est-ouvert  .faq__icone { background: var(--jaune-01) !important; border-color: var(--jaune-01) !important; }
.faq__item--violet.est-ouvert .faq__icone { background: #BA7AEB         !important; border-color: #BA7AEB         !important; }

/* ── Bordure + fond question ouverte par couleur ─────────────────────────── */
.faq__item--rouge.est-ouvert  { border-color: var(--rouge-01) !important; background: var(--rouge-03) !important; }
.faq__item--vert.est-ouvert   { border-color: var(--vert-01)  !important; background: var(--vert-03)  !important; }
.faq__item--jaune.est-ouvert  { border-color: var(--jaune-01) !important; background: var(--jaune-03) !important; }
.faq__item--violet.est-ouvert { border-color: #BA7AEB         !important; background: #F8F2FD         !important; }

.faq__item--rouge.est-ouvert  .faq__question,
.faq__item--vert.est-ouvert   .faq__question,
.faq__item--jaune.est-ouvert  .faq__question,
.faq__item--violet.est-ouvert .faq__question { background: transparent !important; }

/* ── Badge titre couleur violet ──────────────────────────────────────────── */
.badge-titre--violet {
  background: #BA7AEB;
  color: #fff;
  border-radius: 6px;
  padding: 0 0.25em;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Masquer tout le hero (fil d'ariane, titre, sous-titre, filtres) sur mobile */
  .faq-hero {
    display: none;
  }
}