/* ═══════════════════════════════════════════════════════════════════
   ❓ FAQ-PREMIUM.CSS — Page faq.html, layer visuel premium (v1)
   ═══════════════════════════════════════════════════════════════════
   - Layer ADDITIF au-dessus de css/faq.css (ne le réécrit pas).
   - Scopé à body.faq-page : zéro fuite sur les autres pages.
   - PALETTE STRICTE style.css. Aucune nouvelle couleur.

   ⚠️  PRÉSERVATION LOGIQUE OBLIGATOIRE :
     - .faq-answer { max-height: 0 → 500px } transition : INTOUCHÉE.
     - .faq-question.active i { transform: rotate(180deg) } : INTOUCHÉ.
     - .faq-category-btn.active (filtre) : on style visuellement uniquement.
     - .faq-section { display: block/none } (set par JS filters) : INTOUCHÉ.
     - Aucune modification des hooks .faq-question, .faq-answer,
       .faq-category-btn[data-category], .faq-section[data-category].
   ═══════════════════════════════════════════════════════════════════ */

body.faq-page {
  /* ── Surfaces ── */
  --fq-surface: var(--white, #FFFFFF);
  --fq-surface-alt: var(--light-bg, #F8F9FA);
  --fq-surface-card: #FFFFFF;

  /* ── Texte adaptatif 4 niveaux ── */
  --fq-ink-strong: #0B1218;
  --fq-ink: var(--dark-color, #2C3E50);
  --fq-ink-soft: #3F4E58;
  --fq-muted: var(--gray, #7F8C8D);

  /* ── Bordures & ombres ── */
  --fq-border: rgba(44, 62, 80, 0.09);
  --fq-border-strong: rgba(44, 62, 80, 0.16);
  --fq-shadow: 0 18px 38px -22px rgba(44, 62, 80, 0.22);
  --fq-shadow-hover: 0 26px 50px -22px rgba(44, 62, 80, 0.30);
  --fq-shadow-glow: 0 22px 44px -20px rgba(46, 204, 113, 0.35);

  /* ── Dégradés & halos (palette stricte) ── */
  --fq-grad: linear-gradient(135deg, #2ECC71 0%, #27AE60 45%, #D4A82E 100%);
  --fq-grad-soft: linear-gradient(135deg, rgba(46,204,113,0.18) 0%, rgba(212,168,46,0.13) 100%);
  --fq-halo-primary: rgba(46, 204, 113, 0.20);
  --fq-halo-secondary: rgba(212, 168, 46, 0.15);
  --fq-halo-primary-soft: rgba(46, 204, 113, 0.08);
  --fq-halo-secondary-soft: rgba(212, 168, 46, 0.05);

  /* Rythme */
  --fq-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fq-dur: 280ms;
  --fq-radius: 14px;
  --fq-radius-lg: 20px;
  --fq-gutter: clamp(1.25rem, 3vw, 2rem);
}

body.dark-mode.faq-page {
  --fq-surface: var(--bg-primary, #0A0A0A);
  --fq-surface-alt: var(--bg-secondary, #121212);
  --fq-surface-card: var(--bg-card, #1E1E1E);

  --fq-ink-strong: #FFFFFF;
  --fq-ink: var(--text-primary, #FFFFFF);
  --fq-ink-soft: #D7DEDB;
  --fq-muted: var(--text-secondary, #B8B8B8);

  --fq-border: rgba(255, 255, 255, 0.08);
  --fq-border-strong: rgba(255, 255, 255, 0.14);
  --fq-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.65);
  --fq-shadow-hover: 0 28px 52px -20px rgba(0, 0, 0, 0.75);
  --fq-shadow-glow: 0 22px 44px -20px rgba(46, 204, 113, 0.28);

  --fq-halo-primary: rgba(46, 204, 113, 0.26);
  --fq-halo-secondary: rgba(212, 168, 46, 0.18);
  --fq-halo-primary-soft: rgba(46, 204, 113, 0.11);
  --fq-halo-secondary-soft: rgba(212, 168, 46, 0.07);
}

body.faq-page {
  color: var(--fq-ink);
  background: var(--fq-surface);
}

/* ═════════════════════════════════════════════════════════════════
   PAGE + ATMOSPHÈRE — halos subtils en arrière-plan du container
   pour casser le blanc plat en light mode, parité dark.
   ═════════════════════════════════════════════════════════════════ */
body.faq-page .faq-page,
body.faq-page main.faq-page {
  position: relative;
  isolation: isolate;
  /* PUBLIC-FREEZE-12 #4 — header alignement : padding-top réduit pour
     aligner la hauteur du H1 sur les autres pages confiance
     (returns/about/shipping ≈ 34-48px, contact 40-64px). Ancien :
     clamp(3rem, 6vw, 5rem) → 48-80px, trop décalé. */
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
body.faq-page .faq-page::before,
body.faq-page main.faq-page::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 38% at 18% 8%, var(--fq-halo-primary-soft), transparent 72%),
    radial-gradient(50% 34% at 85% 85%, var(--fq-halo-secondary-soft), transparent 72%);
  pointer-events: none;
}

/* ═════════════════════════════════════════════════════════════════
   H1 — titre premium, gradient palette style.css
   Conserve la disposition (inline-style text-align: center) mais
   upgrade typo et couleurs via surcharge de spécificité.
   ═════════════════════════════════════════════════════════════════ */
body.faq-page .faq-page h1 {
  font-size: clamp(2rem, 4.8vw, 3.2rem) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 1rem !important;
  text-align: center !important;
  /* Dégradé signature palette style.css — cohérent avec les autres pages */
  background: var(--fq-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
@supports not (-webkit-background-clip: text) {
  body.faq-page .faq-page h1 {
    color: #27AE60 !important;
    -webkit-text-fill-color: initial;
    background: none;
  }
}

/* ═════════════════════════════════════════════════════════════════
   INTRO — ink-soft + lien primary
   ═════════════════════════════════════════════════════════════════ */
body.faq-page .faq-intro {
  color: var(--fq-ink-soft) !important;
  font-size: clamp(1rem, 1.35vw, 1.12rem) !important;
  line-height: 1.65 !important;
  max-width: 62ch;
  margin: 0 auto clamp(2rem, 4vw, 3rem) !important;
  text-align: center;
}
body.faq-page .faq-intro a {
  color: #2ECC71 !important;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(46, 204, 113, 0.35);
  transition: color var(--fq-dur) var(--fq-ease),
              border-color var(--fq-dur) var(--fq-ease);
}
body.faq-page .faq-intro a:hover {
  color: #27AE60 !important;
  border-bottom-color: #27AE60;
}
body.dark-mode.faq-page .faq-intro a {
  color: #3DDC84 !important;
  border-bottom-color: rgba(61, 220, 132, 0.35);
}

/* ═════════════════════════════════════════════════════════════════
   CATÉGORIES — grille pills premium
   La STRUCTURE reste : un conteneur .faq-categories avec des boutons
   .faq-category-btn contenant <i><br>texte. On style seulement.
   ═════════════════════════════════════════════════════════════════ */
body.faq-page .faq-categories {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: clamp(0.65rem, 1.4vw, 0.95rem) !important;
  max-width: 820px;
  margin: 0 auto clamp(2.5rem, 5vw, 3.8rem) !important;
  padding: 0.65rem;
  background: var(--fq-surface-card);
  border: 1px solid var(--fq-border);
  border-radius: var(--fq-radius-lg);
  box-shadow: var(--fq-shadow);
}
body.dark-mode.faq-page .faq-categories {
  background: var(--fq-surface-card);
  border-color: var(--fq-border-strong);
}

body.faq-page .faq-category-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  padding: 0.95rem 0.6rem !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--fq-radius) !important;
  color: var(--fq-ink-soft) !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: transform var(--fq-dur) var(--fq-ease),
              background var(--fq-dur) var(--fq-ease),
              border-color var(--fq-dur) var(--fq-ease),
              color var(--fq-dur) var(--fq-ease),
              box-shadow var(--fq-dur) var(--fq-ease) !important;
  min-height: 76px;
  line-height: 1.25 !important;
  text-align: center !important;
}
body.faq-page .faq-category-btn i {
  font-size: 1.25rem !important;
  color: #2ECC71 !important;
  transition: color var(--fq-dur) var(--fq-ease),
              transform var(--fq-dur) var(--fq-ease);
  margin-bottom: 0.15rem;
}
body.dark-mode.faq-page .faq-category-btn {
  color: var(--fq-ink-soft) !important;
}
body.dark-mode.faq-page .faq-category-btn i {
  color: #3DDC84 !important;
}

body.faq-page .faq-category-btn:hover {
  background: var(--fq-surface-alt) !important;
  border-color: var(--fq-border-strong) !important;
  color: var(--fq-ink) !important;
  transform: translateY(-2px);
}
body.dark-mode.faq-page .faq-category-btn:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}
body.faq-page .faq-category-btn:hover i {
  transform: scale(1.08);
}

/* Active state — gradient signature + glow (preserve la classe .active) */
body.faq-page .faq-category-btn.active {
  background: var(--fq-grad) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  box-shadow: var(--fq-shadow-glow) !important;
  transform: translateY(-2px);
}
body.faq-page .faq-category-btn.active i {
  color: #FFFFFF !important;
}
body.dark-mode.faq-page .faq-category-btn.active {
  color: #0A0A0A !important;
  box-shadow: 0 18px 38px -14px rgba(46, 204, 113, 0.45) !important;
}
body.dark-mode.faq-page .faq-category-btn.active i {
  color: #0A0A0A !important;
}

/* ═════════════════════════════════════════════════════════════════
   SECTIONS FAQ — titre h2 avec icône en halo
   ═════════════════════════════════════════════════════════════════ */
body.faq-page .faq-section {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
body.faq-page .faq-section h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem) !important;
  font-weight: 800 !important;
  color: var(--fq-ink) !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 1.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}
body.faq-page .faq-section h2 i {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  font-size: 1.05rem;
  color: #2ECC71;
  background: var(--fq-grad-soft);
  box-shadow: inset 0 0 0 1px rgba(46, 204, 113, 0.22);
  flex-shrink: 0;
}
body.dark-mode.faq-page .faq-section h2 i {
  color: #3DDC84;
  box-shadow: inset 0 0 0 1px rgba(46, 204, 113, 0.30);
}

/* ═════════════════════════════════════════════════════════════════
   ITEMS FAQ — card premium (fond dégradé vertical subtil en light)
   ═════════════════════════════════════════════════════════════════ */
body.faq-page .faq-item {
  background:
    linear-gradient(180deg, var(--fq-surface-card) 0%, rgba(46, 204, 113, 0.025) 100%) !important;
  border: 1px solid var(--fq-border) !important;
  border-radius: var(--fq-radius) !important;
  margin-bottom: 0.85rem !important;
  overflow: hidden;
  box-shadow: 0 10px 24px -18px rgba(44, 62, 80, 0.22) !important;
  transition: border-color var(--fq-dur) var(--fq-ease),
              box-shadow var(--fq-dur) var(--fq-ease);
}
body.dark-mode.faq-page .faq-item {
  background: var(--fq-surface-card) !important;
  border-color: var(--fq-border-strong) !important;
  box-shadow: 0 12px 26px -18px rgba(0, 0, 0, 0.6) !important;
}
body.faq-page .faq-item:hover {
  border-color: var(--fq-border-strong) !important;
  box-shadow: 0 16px 30px -18px rgba(44, 62, 80, 0.3) !important;
}
/* Si l'item contient une question active, on ajoute un glow subtil pour
   signaler qu'il est ouvert — propre aux yeux, invisible à la logique. */
body.faq-page .faq-item:has(.faq-question.active) {
  border-color: rgba(46, 204, 113, 0.35) !important;
  box-shadow: var(--fq-shadow-glow) !important;
}

/* ═════════════════════════════════════════════════════════════════
   QUESTION — en-tête cliquable
   (ne pas toucher à .active ni à la rotation du chevron qui sont déjà
   gérés par le faq.css existant)
   ═════════════════════════════════════════════════════════════════ */
body.faq-page .faq-question {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1.1rem 1.35rem !important;
  cursor: pointer;
  gap: 1rem !important;
  transition: background var(--fq-dur) var(--fq-ease);
}
body.faq-page .faq-question:hover {
  background: var(--fq-halo-primary-soft);
}
body.dark-mode.faq-page .faq-question:hover {
  background: rgba(255, 255, 255, 0.03);
}

body.faq-page .faq-question h3 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--fq-ink) !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  letter-spacing: -0.005em;
}

/* Chevron — on garde la rotation hérité, on ajoute juste un cercle subtle */
body.faq-page .faq-question i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 0.78rem !important;
  color: #2ECC71 !important;
  background: var(--fq-halo-primary-soft);
  flex-shrink: 0;
  /* NE PAS surcharger la transition 0.3s de faq.css — elle est fine comme ça */
}
body.faq-page .faq-question.active i {
  background: var(--fq-grad);
  color: #FFFFFF !important;
}
body.dark-mode.faq-page .faq-question i {
  color: #3DDC84 !important;
}
body.dark-mode.faq-page .faq-question.active i {
  color: #0A0A0A !important;
}

/* ═════════════════════════════════════════════════════════════════
   ANSWER — typographie éditoriale
   ⚠️  NE PAS TOUCHER : max-height (0 ↔ 500px) ni overflow: hidden
   ni transition max-height — gérés par faq.css existant pour l'accordéon.
   On ne style que le CONTENU (.faq-answer-content).
   ═════════════════════════════════════════════════════════════════ */
body.faq-page .faq-answer-content {
  padding: 0.25rem 1.35rem 1.35rem !important;
  color: var(--fq-ink-soft) !important;
  line-height: 1.7 !important;
  border-top: 1px dashed var(--fq-border) !important;
  margin-top: 0.1rem;
}
body.dark-mode.faq-page .faq-answer-content {
  color: var(--fq-ink-soft) !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}
body.faq-page .faq-answer-content p {
  margin: 0.75rem 0 !important;
  font-size: 0.95rem;
}
body.faq-page .faq-answer-content p:first-child { margin-top: 1rem !important; }
body.faq-page .faq-answer-content p:last-child { margin-bottom: 0 !important; }

body.faq-page .faq-answer-content ol,
body.faq-page .faq-answer-content ul {
  margin: 0.5rem 0 !important;
  padding-left: 1.5rem !important;
  font-size: 0.95rem;
}
body.faq-page .faq-answer-content li {
  margin-bottom: 0.35rem;
  line-height: 1.65;
}
body.faq-page .faq-answer-content li::marker {
  color: #2ECC71;
}
body.dark-mode.faq-page .faq-answer-content li::marker {
  color: #3DDC84;
}
body.faq-page .faq-answer-content strong {
  color: var(--fq-ink);
  font-weight: 700;
}
body.faq-page .faq-answer-content a {
  color: #2ECC71 !important;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(46, 204, 113, 0.35);
  transition: color var(--fq-dur) var(--fq-ease),
              border-color var(--fq-dur) var(--fq-ease);
}
body.faq-page .faq-answer-content a:hover {
  color: #27AE60 !important;
  border-bottom-color: #27AE60;
}
body.dark-mode.faq-page .faq-answer-content a {
  color: #3DDC84 !important;
  border-bottom-color: rgba(61, 220, 132, 0.35);
}

/* ═════════════════════════════════════════════════════════════════
   BLOC CTA FINAL "Vous ne trouvez pas votre réponse ?"
   Disposition (place + ordre) préservée. Refonte visuelle pure.
   ═════════════════════════════════════════════════════════════════ */
body.faq-page .faq-still-question {
  position: relative;
  isolation: isolate;
  /* Fond neutre avec halos (remplace l'ancien gradient primary→secondary plein) */
  background: var(--fq-surface-card) !important;
  color: var(--fq-ink) !important;
  padding: clamp(2.2rem, 4.5vw, 3rem) clamp(1.5rem, 3vw, 2.2rem) !important;
  border: 1px solid var(--fq-border) !important;
  border-radius: var(--fq-radius-lg) !important;
  text-align: center !important;
  margin-top: clamp(2.5rem, 5vw, 3.5rem) !important;
  overflow: hidden;
  box-shadow: var(--fq-shadow) !important;
}
body.dark-mode.faq-page .faq-still-question {
  background: var(--fq-surface-card) !important;
  border-color: var(--fq-border-strong) !important;
}
/* Signature bar gradient top */
body.faq-page .faq-still-question::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--fq-grad);
}
/* Halos atmosphériques en arrière */
body.faq-page .faq-still-question::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 55% at 15% 25%, var(--fq-halo-primary-soft), transparent 72%),
    radial-gradient(50% 50% at 85% 75%, var(--fq-halo-secondary-soft), transparent 72%);
  pointer-events: none;
}

body.faq-page .faq-still-question h3 {
  font-size: clamp(1.2rem, 2.4vw, 1.6rem) !important;
  font-weight: 800 !important;
  color: var(--fq-ink) !important;
  margin: 0 0 0.55rem !important;
  letter-spacing: -0.01em !important;
}
body.faq-page .faq-still-question p {
  color: var(--fq-ink-soft) !important;
  font-size: 0.98rem !important;
  margin: 0 auto 1.5rem !important;
  max-width: 52ch;
  line-height: 1.55 !important;
}
/* Le lien "Nous contacter" devient un vrai CTA pilule premium */
body.faq-page .faq-still-question a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  padding: 0.85rem 1.6rem !important;
  border-radius: 999px !important;
  background: var(--fq-grad) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: var(--fq-shadow-glow) !important;
  transition: transform var(--fq-dur) var(--fq-ease),
              box-shadow var(--fq-dur) var(--fq-ease) !important;
}
body.faq-page .faq-still-question a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 26px 46px -14px rgba(46, 204, 113, 0.55) !important;
}
body.dark-mode.faq-page .faq-still-question a {
  color: #0A0A0A !important;
}

/* ═════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.faq-page .faq-categories {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding: 0.5rem;
    gap: 0.5rem !important;
  }
  body.faq-page .faq-category-btn {
    min-height: 68px;
    font-size: 0.72rem !important;
    padding: 0.7rem 0.4rem !important;
  }
  body.faq-page .faq-category-btn i {
    font-size: 1.1rem !important;
  }
  body.faq-page .faq-question {
    padding: 0.95rem 1.1rem !important;
  }
  body.faq-page .faq-question h3 {
    font-size: 0.94rem !important;
  }
  body.faq-page .faq-answer-content {
    padding: 0.15rem 1.1rem 1.1rem !important;
  }
}
@media (max-width: 480px) {
  body.faq-page .faq-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.faq-page .faq-still-question a {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.faq-page .faq-category-btn,
  body.faq-page .faq-item,
  body.faq-page .faq-question,
  body.faq-page .faq-still-question a {
    transition: none !important;
  }
  body.faq-page .faq-category-btn:hover,
  body.faq-page .faq-category-btn.active,
  body.faq-page .faq-still-question a:hover {
    transform: none !important;
  }
  body.faq-page .faq-category-btn:hover i {
    transform: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════════
   PUBLIC-FREEZE-14 #3 — Hero compact desktop (supersede FREEZE-13)
   Mesures navigateur post-FREEZE-13 (1912px) :
     h1FontSize 40px / mainPaddingTop 36px / categoriesTop 302.9px
   Mesures cibles FREEZE-14 :
     h1FontSize 32-34px / mainPaddingTop 20-24px / categoriesTop ~230-250px
   Gain attendu : ~50-60px de hauteur cumulée avant le 1er bloc question.
   Mobile <768px conserve les valeurs premium d'origine (clamp en pixels min).
   Scope strict : body.faq-page uniquement.
   ═════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  body.faq-page .faq-page,
  body.faq-page main.faq-page {
    padding-top: clamp(1rem, 2vw, 1.5rem) !important;        /* 16-24px */
  }
  body.faq-page .faq-page h1 {
    font-size: clamp(1.75rem, 2.8vw, 2.125rem) !important;   /* 28-34px */
    margin: 0 0 0.5rem !important;                            /* 8px */
    line-height: 1.05 !important;
  }
  body.faq-page .faq-intro {
    margin: 0 auto clamp(0.9rem, 1.8vw, 1.25rem) !important; /* 14.4-20px */
    font-size: clamp(0.95rem, 1.1vw, 1.05rem) !important;    /* 15.2-16.8px */
    line-height: 1.45 !important;
  }
  body.faq-page .faq-categories {
    margin: 0 auto clamp(1.25rem, 2vw, 1.75rem) !important;  /* 20-28px */
  }
  /* HTML utilise .faq-category-btn (pas .faq-category-tab). On réduit le padding
     vertical pour resserrer la barre de catégories. */
  body.faq-page .faq-category-btn {
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
    min-height: 68px;
  }
}

/* ═════════════════════════════════════════════════════════════════
   PUBLIC-FREEZE-15 — FAQ desktop ≥1024px compact final
   Cause : FREEZE-14 (≥768px) s'applique bien mais à 1912px on mesure
   encore categoriesTop=261px et firstSectionTop=403px. Le header global
   (~76px) et le nav (~76px) ne sont pas en cause. Reste à compacter
   le hero FAQ (h1 + intro + barre catégories) et l'espace avant la
   première .faq-section.
   Mesures avant patch (1912px desktop) :
     h1FontSize 34px / mainPaddingTop 24px
     categoriesTop 260.97px / firstSectionTop 402.53px
   Cibles après patch :
     h1FontSize 30-32px / mainPaddingTop 12-18px
     categoriesTop ≈ 210-230px / firstSectionTop ≈ 315-345px
   Override naturel de FREEZE-14 par cascade (≥1024px > ≥768px en MQ
   plus spécifique au viewport ; spécificité sélecteur identique).
   Mobile <1024px (téléphone + tablette) : valeurs FREEZE-14 conservées.
   Scope strict : body.faq-page uniquement. Aucune autre page touchée.
   ═════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  body.faq-page main.faq-page {
    padding-top: clamp(0.6rem, 1.2vw, 1rem) !important;        /* 9.6-16px */
  }

  body.faq-page main.faq-page h1,
  body.faq-page .faq-page h1 {
    font-size: clamp(1.65rem, 2.1vw, 2rem) !important;          /* 26.4-32px */
    line-height: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 0.35rem !important;                           /* override inline 1rem */
  }

  body.faq-page .faq-intro {
    max-width: 680px !important;
    margin-top: 0 !important;
    margin-bottom: clamp(0.6rem, 1.1vw, 0.85rem) !important;    /* 9.6-13.6px */
    font-size: clamp(0.9rem, 0.95vw, 0.98rem) !important;       /* 14.4-15.7px */
    line-height: 1.32 !important;
  }

  body.faq-page .faq-categories {
    margin-top: 0 !important;
    margin-bottom: clamp(0.8rem, 1.2vw, 1rem) !important;       /* 12.8-16px */
  }

  body.faq-page .faq-category-btn {
    min-height: 54px !important;
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
  }

  /* DOM réel : <i><br>texte. Pas de span/strong/.icon — sélecteurs ajoutés
     pour robustesse future si la structure évolue (inertes aujourd'hui). */
  body.faq-page .faq-category-btn i,
  body.faq-page .faq-category-btn .icon,
  body.faq-page .category-icon {
    margin-bottom: 0.25rem !important;
    font-size: 1.25rem !important;
  }

  body.faq-page .faq-category-btn span,
  body.faq-page .faq-category-btn strong {
    font-size: 0.78rem !important;
    line-height: 1.1 !important;
  }

  /* DOM réel : .faq-section. .faq-category-section ajouté par robustesse. */
  body.faq-page .faq-section,
  body.faq-page .faq-category-section {
    margin-top: clamp(0.75rem, 1.2vw, 1rem) !important;         /* 12-16px */
  }

  body.faq-page .faq-section h2,
  body.faq-page .faq-category-section h2 {
    margin-top: 0 !important;
    margin-bottom: clamp(0.75rem, 1.2vw, 1rem) !important;
    font-size: clamp(1.35rem, 2vw, 1.75rem) !important;
  }
}

/* ═════════════════════════════════════════════════════════════════
   PUBLIC-FREEZE-16 — Suppression bande 48px au-dessus du header FAQ
   Cause exacte (prouvée) : css/faq.css L2-3 :
       .faq-page { padding: 3rem 0; min-height: 70vh; }
   La règle est trop large : elle s'applique à TOUT élément portant
   class="faq-page", c'est-à-dire au <body class="faq-page"> ET au
   <main class="faq-page"> (faq.html L43 + L153). Le body héritait
   donc de padding-top: 48px, ce que DevTools affichait sous la
   forme effective "body.faq-page.dark-mode.tu-wow-ready { padding:
   48px 0 }" (les classes affichées sont les classes effectives du
   body matchant la règle, pas une règle à 4 sélecteurs).
   Patch : neutraliser le padding-top sur body uniquement (toutes
   combinaisons dark-mode / tu-wow-ready). Le main.faq-page
   conserve son padding contrôlé par FREEZE-15 (clamp 9.6-16px).
   Le header global (~76px) et nav restent inchangés.
   ═════════════════════════════════════════════════════════════════ */
body.faq-page,
body.faq-page.dark-mode,
body.faq-page.tu-wow-ready,
body.faq-page.dark-mode.tu-wow-ready {
  padding-top: 0 !important;
}