/* ============================================================
   FOC STUDIO — PAGE FIRE UP
   Sections propres à la page :
   - Hero (fond feu + vidéo flammes, titres système)
   - C'est pour toi si…        (fond rose, liste à flèches feu)
   - L'offre / tes objectifs   (fond feu, grille de 6 cartes)
   - Le tarif                  (fond rose, checklist + 2 boîtes prix)
   - Ils ont sauté le pas      (fond noir, témoignages dédiés)
   - FAQ                       (fond feu, accordéon natif)
   - Alors, chaud patate ?     (fond rose, CTA final)
   (Titres = système global base.css · cartes = primitive .card)
   ============================================================ */

/* Helpers couleur (base.css n'a que .text-feu / .text-white). */
.text-noir { color: var(--noir); }
.text-noir-bold { font-weight: 700; }

/* ============================================================
   1. HERO (fond feu + vidéo flammes)
   ------------------------------------------------------------
   Fond rouge feu, vidéo « étincelles » en surimpression, voile
   feu en dégradé côté contenu pour garder le texte NOIR lisible
   (même identité noir-sur-feu que le Devil's Touch). Titres =
   système global (title-seo + title-hero).
   ============================================================ */
.fu-hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  background: var(--feu);
  overflow: hidden;
  padding: clamp(8rem, 13vw, 12rem) var(--gutter) var(--section-pad);
}

/* Vidéo plein cadre derrière le contenu. */
.fu-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.fu-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Les étincelles « brûlent » sur le feu (lumières qui s'ajoutent) :
     screen garde le rouge de marque tout en laissant vibrer le feu. */
  mix-blend-mode: screen;
}
/* Voile feu en dégradé : dense côté gauche (contenu) → transparent à
   droite (la vidéo respire). Garantit la lisibilité du texte noir. */
.fu-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(255, 54, 0, 0.92) 0%,
    rgba(255, 54, 0, 0.78) 42%,
    rgba(255, 54, 0, 0.30) 78%,
    rgba(255, 54, 0, 0.12) 100%
  );
}

.fu-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}
.fu-hero__seo { color: var(--noir); }

/* .fu-hero__title hérite de .title-hero — on n'ajuste QUE couleur + marge. */
.fu-hero__title {
  color: var(--noir);
  max-width: 18ch;
  margin: clamp(0.5rem, 1.5vw, 1rem) 0 clamp(1.25rem, 2.5vw, 2rem);
}
.fu-hero__title .text-noir { color: var(--noir); }

.fu-hero__tagline {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--noir);
  line-height: 1.4;
  max-width: 620px;
  text-wrap: balance;
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
}
.fu-hero__claim {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--noir);
  margin-bottom: var(--title-gap);
}

/* Réserve la hauteur du CTA → pas de saut de mise en page quand le bouton
   « décolle » et s'arrime (CTA jumpy = .jump-cta, voir base.css + jump-btn.js). */
.fu-hero__cta { display: flex; min-height: 3.4rem; }

/* ============================================================
   2. C'EST POUR TOI SI… (fond rose) — liste à flèches feu
   Reprise À L'IDENTIQUE de diagnostic / devils-touch (.diag-pourtoi).
   ============================================================ */
.fu-pourtoi {
  background: var(--rose);
  padding: var(--section-pad) var(--gutter);
  min-height: 65vh;
  align-content: center;
}
.fu-pourtoi-inner { max-width: var(--max-width); margin: 0 auto; }
.fu-pourtoi-title { color: var(--noir); margin-bottom: var(--title-gap); }

.fu-pourtoi-list {
  list-style: none;
  max-width: 920px;
}
.fu-pourtoi-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(10, 10, 10, 0.18);
}
.fu-pourtoi-arrow {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.25;
  color: var(--feu);
}
.fu-pourtoi-desc {
  font-family: var(--font-body);
  color: var(--noir);
  line-height: 1.1;
  text-wrap-style: balance;
  display: block;
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  font-weight: 600;
}

/* ============================================================
   3. L'OFFRE — au service de tes objectifs (fond feu)
   Grille de 6 cartes (.card--ghost-light), 3 colonnes.
   ============================================================ */
.fu-offre {
  background: var(--feu);
  padding: var(--section-pad) var(--gutter);
}
.fu-offre-inner { max-width: var(--max-width); margin: 0 auto; text-align: center; }
.fu-offre-label { color: var(--noir); }
.fu-offre-title { color: var(--noir); margin-bottom: var(--title-gap); }

.fu-offre-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  text-align: left;
}
/* .fu-offre-card : structure portée par .card (voir base.css). */
.fu-offre-card-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--noir);
  margin-bottom: 0.75rem;
}
.fu-offre-card p {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  color: var(--noir);
  line-height: 1.45;
}

.fu-offre-outro {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: var(--noir);
  line-height: 1.4;
  max-width: 760px;
  margin: var(--title-gap) auto 0;
  text-align: center;
  text-wrap: balance;
}

/* ============================================================
   4. LE TARIF (fond rose) — checklist COMPACTE + 2 boîtes prix
   ============================================================ */
.fu-volet { will-change: clip-path; }

.fu-tarif {
  background: var(--rose);
  padding: var(--section-pad) var(--gutter);
}
.fu-tarif-inner { max-width: var(--max-width); margin: 0 auto; }
.fu-tarif-label { color: var(--noir); }
.fu-tarif-title { color: var(--noir); margin-bottom: var(--title-gap); }

/* Checklist resserrée : pas de filets, lignes serrées → prend peu de place
   et laisse la vedette aux 2 boîtes de prix. 2 colonnes (puces feu). */
.fu-tarif-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.3rem clamp(1.5rem, 4vw, 3rem);
  max-width: 880px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.fu-tarif-list li {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  color: var(--noir);
  line-height: 1.3;
  padding: 0.25rem 0 0.25rem 1.5rem;
  position: relative;
}
.fu-tarif-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--feu);
  font-weight: 700;
}

/* Les deux lignes de prix brutes (mise en place / abo mensuel). */
.fu-tarif-lines {
  border-top: 2px solid var(--noir);
  border-bottom: 2px solid var(--noir);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.fu-tarif-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.9rem, 1.8vw, 1.25rem) 0;
}
.fu-tarif-line + .fu-tarif-line { border-top: 1px solid rgba(10, 10, 10, 0.15); }
.fu-tarif-line dt {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: var(--noir);
  display: flex;
  flex-direction: column;
}
.fu-tarif-note {
  font-size: clamp(0.72rem, 0.9vw, 0.82rem);
  opacity: 0.65;
  margin-top: 0.15rem;
}
.fu-tarif-line dd {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--noir);
  white-space: nowrap;
}

/* Les 2 boîtes (1er mois / dès le 2ème mois) — habillage des offres :
   1er mois = contour 2px (.card--outline) · dès le 2ème = noire pleine. */
.fu-tarif-offers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}
.fu-tarif-card {
  text-align: center;
  justify-content: center;
  gap: 0.4rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.fu-tarif-card-head {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
}
.fu-tarif-card-sub {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.05vw, 1rem);
  opacity: 0.8;
  margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
}
.fu-tarif-card-price {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1;
}
.fu-tarif-card-price span {
  font-size: 0.5em;
  letter-spacing: 0;
}
/* Exposant (1ᵉʳ / 2ᵉᵐᵉ) : petit, légèrement estompé → fondu dans le titre,
   jamais plus gros que le chiffre. */
.fu-tarif-card-head sup {
  font-size: 0.5em;
  vertical-align: 0.55em;
  letter-spacing: 0;
  opacity: 0.7;
}
.fu-tarif-card--first { color: var(--noir); }
.fu-tarif-card--first .fu-tarif-card-head,
.fu-tarif-card--first .fu-tarif-card-price { color: var(--noir); }
.fu-tarif-card--next { color: var(--blanc); }
.fu-tarif-card--next .fu-tarif-card-head,
.fu-tarif-card--next .fu-tarif-card-price { color: var(--feu); }
.fu-tarif-card--next .fu-tarif-card-sub { color: var(--light-text); opacity: 1; }

.fu-tarif-cta {
  margin-top: var(--title-gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.fu-tarif-cta-note {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  color: var(--noir);
  opacity: 0.75;
}

/* ============================================================
   5. ILS ONT SAUTÉ LE PAS (fond noir) — témoignages dédiés Fire Up
   ============================================================ */
.fu-testi {
  background: var(--noir);
  padding: var(--section-pad) var(--gutter);
  color: var(--blanc);
}
.fu-testi-inner { max-width: var(--max-width); margin: 0 auto; }
.fu-testi-label { color: var(--feu); }
.fu-testi-title { color: var(--blanc); margin-bottom: var(--title-gap); }
.fu-testi-title .text-feu { color: var(--feu); }

.fu-testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
/* .fu-testi-card : structure portée par .card (.card--ghost-dark). */
.fu-testi-card { gap: clamp(1rem, 2vw, 1.5rem); justify-content: space-between; }
.fu-testi-card blockquote {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--blanc);
  line-height: 1.45;
}
.fu-testi-card figcaption {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(0.85rem, 1.05vw, 0.95rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--feu);
}

/* ============================================================
   6. FAQ (fond feu) — accordéon natif <details>
   ============================================================ */
.fu-faq {
  background: var(--feu);
  padding: var(--section-pad) var(--gutter);
}
.fu-faq-inner { max-width: 920px; margin: 0 auto; }
.fu-faq-label { color: var(--noir); }
.fu-faq-title { color: var(--noir); margin-bottom: var(--title-gap); }

.fu-faq-list { border-top: 1px solid rgba(10, 10, 10, 0.22); }
.fu-faq-item { border-bottom: 1px solid rgba(10, 10, 10, 0.22); }
.fu-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.4rem) 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--noir);
}
.fu-faq-item summary::-webkit-details-marker { display: none; }
/* Chevron « + » → « − » à l'ouverture. */
.fu-faq-item summary::after {
  content: '+';
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.6em;
  line-height: 1;
  color: var(--noir);
  transition: transform 0.3s var(--ease-out-quart);
  flex: none;
}
.fu-faq-item[open] summary::after { content: '−'; }
.fu-faq-item summary:hover { color: rgba(10, 10, 10, 0.7); }

.fu-faq-answer {
  padding: 0 0 clamp(1rem, 2vw, 1.4rem);
  max-width: 760px;
}
.fu-faq-answer p {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  color: var(--noir);
  line-height: 1.5;
}
.fu-faq-answer p + p { margin-top: 0.75rem; }
.fu-faq-answer strong { font-weight: 700; }
/* Lien inline : noir souligné fin, sur le feu. */
.fu-faq-link {
  color: var(--noir);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
.fu-faq-link:hover { text-decoration-thickness: 3px; }

/* ============================================================
   7. ALORS, CHAUD PATATE ? — CTA final (fond rose, centré)
   ============================================================ */
.fu-final {
  background: var(--rose);
  padding: clamp(5rem, 7vw, 10rem) var(--gutter);
  text-align: center;
}
.fu-final-inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fu-final-title { color: var(--noir); margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.fu-final-title .text-feu { color: var(--feu); }
.fu-final-sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  color: var(--noir);
  line-height: 1.5;
  max-width: 560px;
  margin-bottom: var(--title-gap);
}
/* Rareté : petite note discrète sous le CTA (plus de bannière encombrante). */
.fu-final-note {
  font-family: var(--font-body);
  font-size: clamp(0.82rem, 1vw, 0.95rem);
  color: var(--noir);
  opacity: 0.65;
  line-height: 1.4;
  max-width: 420px;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .fu-offre-grid { grid-template-columns: repeat(2, 1fr); }
  .fu-testi-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .fu-offre-grid { grid-template-columns: 1fr; }
  .fu-tarif-list { grid-template-columns: 1fr; }
  .fu-tarif-offers { grid-template-columns: 1fr; }
  /* Voile feu quasi plein sur mobile (la vidéo n'a plus de « couloir » à droite). */
  .fu-hero__media::after {
    background: linear-gradient(180deg, rgba(255,54,0,0.78) 0%, rgba(255,54,0,0.62) 100%);
  }
}
@media (max-width: 600px) {
  .fu-tarif-line { flex-direction: column; gap: 0.25rem; }
  /* CTA hero pleine largeur sur mobile — SAUF une fois arrimé (pastille de coin). */
  .fu-hero__cta .btn:not(.is-docked) { width: 100%; justify-content: center; }
}