/* ============================================================
   Revalta by Altus Conseil — design-system/sections/faq.css
   ------------------------------------------------------------
   Accordéon natif <details>/<summary>. Largeur contenue.

   Variantes — identiques au reste du système. La FAQ est souvent
   placée juste avant le CTA final, en contraste avec lui.

   Requiert : colors_and_type.css.
   ============================================================ */

/* ─── Container ────────────────────────────────────────────── */

.revalta-section-faq {
  position: relative;
  background: var(--revalta-bg);
  color: var(--revalta-fg1);
  font-family: var(--revalta-font);
  font-weight: var(--revalta-w-light);
  isolation: isolate;
  padding-block: clamp(96px, 14vh, 180px);
  padding-inline: var(--revalta-web-pad-x);
}

/* Première section de la page : compensation globale du header fixe
   (body.revalta main > :first-child, colors_and_type.css). Rien ici. */

/* Identité (28/09/2026) : en-tête à gauche (4/12), accordéon à droite (8/12). */
.revalta-section-faq-content {
  position: relative;
  z-index: 2;
  max-width: var(--revalta-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

/* ─── Header ───────────────────────────────────────────────── */

.revalta-section-faq-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: none;
}
.revalta-section-faq-eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: var(--revalta-w-medium);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--revalta-accent);
}
.revalta-section-faq-title {
  margin: 0;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: var(--revalta-w-light);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--revalta-fg1);
  text-wrap: balance;
}

/* ─── Liste accordéon ──────────────────────────────────────── */

.revalta-section-faq-list {
  display: grid;
  gap: 8px;
  border: 0;
}

/* Ligne d'accordéon — champ arrondi 16 px : blanc bordé sur papier et bleu,
   papier sans bord sur bande blanche. */
.revalta-section-faq-item {
  padding: 0 24px;
  background: var(--revalta-light);
  border: 1px solid var(--revalta-sep);
  border-radius: var(--revalta-r-field);
}
[data-revalta-band="white"] .revalta-section-faq-item { background: var(--revalta-bg); border-color: transparent; }

/* ─── Summary (question) ───────────────────────────────────── */

/* Reset du marker natif <summary>. */
.revalta-section-faq-item-question {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  font-family: var(--revalta-font);
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: var(--revalta-w-medium);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--revalta-fg1);
  -webkit-tap-highlight-color: transparent;
  /* Le summary doit garder son comportement clavier ; on évite
     outline:none — mais on déplace la cible. */
  transition: color 200ms var(--revalta-ease);
}
.revalta-section-faq-item-question::-webkit-details-marker { display: none; }
.revalta-section-faq-item-question::marker                  { display: none; content: ''; }

.revalta-section-faq-item-question:focus-visible {
  outline: 1px solid var(--revalta-fg2);
  outline-offset: 4px;
}

/* Indicateur — chevron tracé en CSS (10 px), pivote à l'ouverture (identité). */
.revalta-section-faq-item-question::after {
  content: '';
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  margin-right: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 200ms var(--revalta-ease);
}
.revalta-section-faq-item[open] > .revalta-section-faq-item-question::after {
  transform: rotate(-135deg);
}

.revalta-section-faq-item-question:hover { color: var(--revalta-fg1); }

/* ─── Answer (réponse) ─────────────────────────────────────── */

.revalta-section-faq-item-answer {
  margin: 0;
  padding: 0 0 22px;
  max-width: 70ch;
  font-size: 17px;
  font-weight: var(--revalta-w-light);
  line-height: 1.55;
  color: var(--revalta-fg2);
  text-wrap: pretty;
}

/* ─── Inverse ──────────────────────────────────────────────── */
.revalta-section-faq.revalta-section-inverse {
  background: var(--revalta-bg-inverse);
  color: var(--revalta-fg1-inverse);
}
.revalta-section-faq.revalta-section-inverse .revalta-section-faq-title    { color: var(--revalta-fg1-inverse); }
.revalta-section-faq.revalta-section-inverse .revalta-section-faq-item     { background: rgba(245, 243, 238, 0.06); border-color: var(--revalta-sep-inverse); }
.revalta-section-faq.revalta-section-inverse .revalta-section-faq-item-question  { color: var(--revalta-fg1-inverse); }
.revalta-section-faq.revalta-section-inverse .revalta-section-faq-item-answer   { color: var(--revalta-fg2-inverse); }

/* ─── Broll ────────────────────────────────────────────────── */
.revalta-section-faq[data-revalta-broll] {
  background-image: var(--revalta-broll);
  background-size: cover;
  background-position: center;
}
.revalta-section-faq[data-revalta-broll]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--revalta-veil);
  z-index: 0;
}
.revalta-section-faq.revalta-section-inverse[data-revalta-broll]::before {
  background: var(--revalta-veil-inverse);
}
.revalta-section-faq[data-revalta-broll]::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.22;
  mix-blend-mode: overlay;
  z-index: 1;
  pointer-events: none;
}

/* ─── Animation d'entrée ───────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .revalta-section-faq-header,
  .revalta-section-faq-list {
    opacity: 0;
    animation: revalta-faq-fade-in 600ms var(--revalta-ease) both;
  }
  .revalta-section-faq-header { animation-delay: 0ms; }
  .revalta-section-faq-list   { animation-delay: 120ms; }
}
@keyframes revalta-faq-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .revalta-section-faq {
    padding-block: clamp(72px, 12vh, 120px);
    padding-inline: 22px;
  }
  .revalta-section-faq-content { gap: 40px; }
  .revalta-section-faq-item { padding: 0 18px; }
  .revalta-section-faq-item-question { gap: 16px; }
}
@media (max-width: 900px) {
  .revalta-section-faq-content { grid-template-columns: minmax(0, 1fr); }
}

/* ─── Filet d'ouverture de l'en-tête (principe Openstone, Home validée) ── */
.revalta-section-faq-header{border-top:1px solid var(--revalta-sep);padding-top:28px}