/* ============================================================
   FAQ ACCORDION - PRODUCTION STYLESHEET
   ------------------------------------------------------------
   Fusion des feuilles de style des phases 2 à 5 (layout, design,
   responsive, motion) en un seul fichier organisé comme un
   mini design system. Le rendu est strictement identique à la
   version multi-fichiers précédente ; seule l'organisation du
   code a changé (voir le rapport de Phase 6 pour le détail des
   optimisations).
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   Toute valeur réutilisée (couleur, taille, espacement, rayon,
   ombre, durée) est centralisée ici. Aucune valeur "magique"
   ne doit apparaître ailleurs dans ce fichier sans raison
   ponctuelle (ex. un point de rupture responsive précis).
   ============================================================ */

.faq {
  /* - Couleurs : surfaces - */

  /* - Couleurs : texte - */

  --color-border: color-mix(in srgb, var(--color-wood) 20%, var(--color-cream));
  --color-text-muted: color-mix(in srgb, var(--color-ink) 68%, var(--color-cream));

  /* - Typographie - */

  --fs-title: 56px;
  --fs-question: 18px;
  --fs-answer: 15px;

  --lh-tight: 1.15;    /* titre */
  --lh-snug: 1.4;      /* question */
  --lh-relaxed: 1.65;  /* réponse */

  /* - Espacements (échelle 4px) - */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* - Ombres - */
  --shadow-card: 0 1px 4px rgba(30, 20, 10, 0.05);
  --shadow-card-hover: 0 3px 10px rgba(30, 20, 10, 0.05);

  /* - Mouvement - */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 180ms;
  --duration-base: 240ms;
  --duration-accordion: 320ms;
  --duration-reveal: 500ms;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */

/* ============================================================
   3. LAYOUT
   Géométrie du composant : conteneurs, empilement, alignements.
   ============================================================ */

.faq {
  width: 100%;
  background-color: var(--color-paper);
  font-family: var(--font-sans);
  /* Même rythme vertical que les autres sections ; le padding du bas
     empêche la dernière question de toucher la section CTA. */
  padding-block: var(--section-padding-y);
}

.faq__container {
  max-width: 1010px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  display: flex;
  flex-direction: column;
}

.faq__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: 0 clamp(32px, 5vw, 56px);
}

.faq__title {
  margin-top: var(--space-6);
  max-width: 720px; /* largeur naturelle du titre sur la maquette */
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.faq__item {
  width: 100%;
}

.faq__item-heading {
  display: flex; /* le <h3> ne fait qu'envelopper le bouton */
}

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
  min-height: 44px; /* zone tactile minimale (WCAG 2.5.5) */
  padding: var(--space-10) var(--space-12);
  text-align: left;
}

.faq__question {
  flex: 1 1 auto; /* occupe l'espace disponible sans repousser l'icône */
}

.faq__icon {
  position: relative;
  flex-shrink: 0;
  display: block;
  width: 24px;
  height: 24px;
}

.faq__panel-inner {
  padding: var(--space-2) var(--space-12) var(--space-12);
  overflow: hidden;
  min-height: 0;
}

.faq__answer {
  max-width: 640px;
}

/* ============================================================
   4. COMPOSANTS VISUELS
   Couleurs, typographie, rayons, ombres et forme du chevron.
   ============================================================ */

.faq__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-ember);
}

.faq__title {
  font-family: var(--font-serif);
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--color-forest);
}

.faq__item {
  background-color: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

.faq__question {
  font-size: var(--fs-question);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--color-ink);
}

.faq__answer {
  font-size: var(--fs-answer);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

/* Chevron : un carré avec deux bordures visibles, pivoté à 45°,
   dessine une flèche sans image ni police d'icônes. */
.faq__icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-ink);
  border-bottom: 2px solid var(--color-ink);
  transform: translate(-50%, -60%) rotate(-45deg); /* ">" fermé */
  transition: transform var(--duration-fast) var(--ease-standard);
}

/* ============================================================
   5. ÉTATS & MICRO-INTERACTIONS
   ============================================================ */

/* --- Accordéon : ouverture/fermeture ------------------------
   Technique grid-template-rows 0fr → 1fr : seule approche CSS
   capable d'animer vers une hauteur de contenu variable. Le
   padding vit sur .faq__panel-inner (§3) pour ne jamais
   apparaître pendant que le panneau est réduit à 0fr.
   L'attribut `hidden` est ajouté/retiré par script.js juste
   avant/après la transition (contenu réellement retiré du DOM
   accessible quand fermé, pas seulement masqué visuellement). */

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-accordion) var(--ease-emphasized);
}

.faq__panel.is-open {
  grid-template-rows: 1fr;
}

.faq__trigger[aria-expanded="true"] .faq__icon::before {
  transform: translate(-50%, -40%) rotate(135deg); /* "^" ouvert */
}

.faq__answer {
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.faq__panel.is-open .faq__answer {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 80ms; /* laisse le panneau commencer à s'ouvrir d'abord */
}

/* --- Carte & bouton : transitions communes ------------------- */

.faq__item {
  transition:
    box-shadow var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}

.faq__trigger {
  transition: color var(--duration-fast) var(--ease-standard);
}

.faq__trigger:focus-visible {
  outline: 2px solid var(--color-ember);
  outline-offset: -2px;
  border-radius: max(0px, calc(var(--r-card) - 2px));
}

/* --- Survol : uniquement sur pointeur précis (souris/trackpad)
   Regroupé en un seul endroit pour éviter tout effet "collé"
   après un tap sur écran tactile (aucun état hover n'est même
   déclaré hors de cette condition). */

@media (hover: hover) and (pointer: fine) {
  .faq__item:hover {
    border-color: var(--color-ink);
    box-shadow: var(--shadow-card-hover);
  }

  .faq__trigger:hover .faq__question {
    color: var(--color-forest);
  }

  .faq__trigger:hover .faq__icon::before {
    transform: translate(-50%, -60%) rotate(-45deg) translateX(2px);
  }

  .faq__trigger[aria-expanded="true"]:hover .faq__icon::before {
    transform: translate(-50%, -40%) rotate(135deg) translateY(-2px);
  }
}

/* --- Tactile : retour au tap plutôt qu'un survol qui resterait
   affiché après le doigt retiré. */

@media (hover: none) {
  .faq__trigger:active {
    background-color: rgba(11, 61, 34, 0.04);
  }
}

/* --- Apparition au scroll ------------------------------------
   N'agit que si JavaScript a pu s'exécuter ET que l'utilisateur
   accepte le mouvement (classe .js posée par script.js) : sans
   elle, .reveal reste visible par défaut, jamais bloqué à
   opacity 0. */

html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--duration-reveal) var(--ease-emphasized),
    transform var(--duration-reveal) var(--ease-emphasized);
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger : chaque carte apparaît un peu après la précédente. */
html.js .faq__list .faq__item:nth-child(1) { transition-delay: 0ms; }
html.js .faq__list .faq__item:nth-child(2) { transition-delay: 90ms; }
html.js .faq__list .faq__item:nth-child(3) { transition-delay: 180ms; }
html.js .faq__list .faq__item:nth-child(4) { transition-delay: 270ms; }

/* ============================================================
   6. RESPONSIVE
   Repères analysés : ≥1600 / 1440 / 1280 / 1024 / 992 / 768 /
   576 / 390-430 / 320-375. Seuls les paliers qui appellent une
   règle réelle apparaissent ci-dessous (1440/1280 et 390-430
   ne nécessitent aucune surcharge - voir rapport Phase 4/6).
   ============================================================ */

/* --- ≥1600px : très grand écran -------------------------------
   Le conteneur (max-width: 1010px) ne bouge pas ; seule la
   respiration verticale et le titre gagnent un peu d'ampleur. */
@media (min-width: 1600px) {
  .faq__header {
    padding-block: 0 56px;
  }

  .faq {
    --fs-title: 60px;
  }
}

/* --- ≤1023px : petit laptop / grande tablette ------------------ */
@media (max-width: 1023px) {
  .faq__container {
    padding-inline: var(--space-8);
  }

  .faq__trigger {
    padding: var(--space-9) var(--space-10);
  }

  .faq__panel-inner {
    padding: var(--space-2) var(--space-10) var(--space-10);
  }
}

/* --- ≤767px : tablette -----------------------------------------
   Titre réduit, cartes plus compactes, icône ancrée en haut pour
   accompagner une question passant sur deux lignes. */
@media (max-width: 767px) {
  .faq {
    --fs-title: clamp(32px, 6vw, 40px);
    --fs-question: 17px;
    --fs-answer: 14.5px;
  }

  .faq__header {
    padding-block: 0 var(--space-10);
  }

  .faq__title {
    margin-top: var(--space-4);
  }

  .faq__list {
    gap: var(--space-4);
  }

  .faq__trigger {
    padding: var(--space-8) var(--space-8);
    align-items: flex-start;
    gap: var(--space-5);
  }

  .faq__icon {
    margin-top: 3px; /* recentre le chevron sur la 1re ligne de texte */
  }

  .faq__panel-inner {
    padding: var(--space-2) var(--space-8) var(--space-9);
  }
}

/* --- ≤575px : grand smartphone ----------------------------------
   Marges alignées sur le contenu, eyebrow resserré, rythme
   vertical compact pour un défilement naturel au pouce. */
@media (max-width: 575px) {
  .faq {
    --fs-title: clamp(26px, 7vw, 32px);
  }

  .faq__container {
    padding-inline: var(--space-5);
  }

  .faq__eyebrow {
    letter-spacing: 0.1em;
  }

  .faq__header {
    padding-block: 0 var(--space-8);
  }

  .faq__title {
    margin-top: var(--space-3);
    max-width: 100%;
  }

  .faq__list {
    gap: var(--space-3);
  }

  .faq__trigger {
    padding: var(--space-5) var(--space-5);
    gap: var(--space-4);
  }

  .faq__icon {
    width: 20px;
    height: 20px;
  }

  .faq__icon::before {
    width: 7px;
    height: 7px;
  }

  .faq__panel-inner {
    padding: 6px var(--space-5) var(--space-6);
  }

  .faq__answer {
    max-width: 100%;
  }
}

/* --- ≤374px : petit smartphone (ex. iPhone SE) ------------------- */
@media (max-width: 374px) {
  .faq {
    --fs-title: 24px;
  }

  .faq__container {
    padding-inline: var(--space-4);
  }

  .faq__eyebrow {
    letter-spacing: 0.08em;
  }

  .faq__trigger {
    padding: var(--space-4) var(--space-4);
  }

  .faq__panel-inner {
    padding: 6px var(--space-4) var(--space-5);
  }
}

/* ============================================================
   7. ACCESSIBILITÉ - MOUVEMENT RÉDUIT
   Neutralise toutes les transitions/animations pour les
   utilisateurs ayant activé cette préférence système. Les
   changements d'état restent fonctionnels, simplement instantanés.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}