/*
  ============================================================
  HOME 9MM — SECTIONS 6 à 9 (la suite de la home)
  ------------------------------------------------------------
  Sections :
    6. La preuve / transparence
    7. La différence 9MM
    8. FAQ
    9. CTA final + newsletter

  Ce fichier COMPLÈTE home.css : il réutilise au max les classes
  déjà définies (.home, .home-container, .home-section-title,
  .home-section-head, .home-section-subtitle, .home-btn…) et
  n'ajoute QUE les classes propres aux 4 nouvelles sections.

  Le :root (tokens couleurs/polices) est déclaré dans la page
  qui charge ce fichier (home-suite.html) : on ne le redéclare PAS.
  Mobile-first. Toutes les classes restent préfixées "home-".

  Rappel des tokens disponibles :
    --bg #000000  --surface #0c0c14  --card #12121c  --border #1e1e2a
    --white #fff  --muted #8888a0
    --body #ff1717 (rouge)  --mind #36d9bb (cyan)
    --glow-body rgba(255,23,23,.4)  --glow-mind rgba(54,217,187,.4)
    --font-display 'Russo One'  --font-body 'Chakra Petch'
  ============================================================
*/

/* ============================================================
   UTILITAIRE — Reveal au scroll (apparition douce)
   ------------------------------------------------------------
   RÈGLE a11y/SEO (reprise de la spec spirale) : l'état CACHÉ
   n'est JAMAIS posé en CSS. Le JS ajoute la classe .is-armed
   sur .home (quand il a pris la main) → SEULEMENT à ce moment
   les .home-reveal partent en transparence, puis remontent
   quand .is-in arrive. Sans JS : tout reste visible.
   ============================================================ */
.home.is-armed .home-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.home.is-armed .home-reveal.is-in {
  opacity: 1;
  transform: none;
}
/* petit décalage en cascade pour les éléments d'une même grille */
.home.is-armed .home-reveal[data-delay="1"] { transition-delay: 0.06s; }
.home.is-armed .home-reveal[data-delay="2"] { transition-delay: 0.12s; }
.home.is-armed .home-reveal[data-delay="3"] { transition-delay: 0.18s; }
.home.is-armed .home-reveal[data-delay="4"] { transition-delay: 0.24s; }
.home.is-armed .home-reveal[data-delay="5"] { transition-delay: 0.30s; }


/* =========================================================
   SECTION 6 — LA PREUVE / TRANSPARENCE
   Fond noir, 6 cartes de preuve sobres en grille.
   ========================================================= */
.home-proof {
  padding: 100px 0;
  background: var(--bg);
}

/* Grille des preuves : 1 colonne en mobile, 2 puis 3 en desktop (media query) */
.home-proof-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 8px;
}

/* Une preuve = carte légère : pictogramme + titre + 1 ligne */
.home-proof-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 24px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.home-proof-item:hover {
  border-color: #2a2a3a;
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -28px rgba(255, 255, 255, 0.18);
}

/* Pictogramme dans une pastille carrée arrondie (glyphes neutres) */
.home-proof-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), transparent);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--white);
}

.home-proof-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  margin: 0 0 8px;
  color: var(--white);
}

.home-proof-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}


/* =========================================================
   SECTION 7 — LA DIFFÉRENCE 9MM
   Deux blocs : (A) « ce que tu veux → ce que fait 9MM »
   puis (B) comparaison BODY vs MIND en 2 cartes accentuées.
   ========================================================= */
.home-diff {
  padding: 100px 0;
  background: var(--surface);   /* variation de fond pour séparer de la preuve */
}

/* ---- Bloc A : liste « ce que tu veux → ce que fait 9MM » ---- */
.home-want {
  display: grid;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto 64px;
}

/* Une ligne : à gauche le besoin, à droite la réponse 9MM */
.home-want-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px;
}

.home-want-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}
/* petit tiret/flèche d'accent devant le besoin */
.home-want-label::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 1px;
  background: linear-gradient(90deg, var(--body), var(--mind));
}

.home-want-value {
  color: var(--white);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.45;
}

/* ---- Bloc B : titres internes des sous-blocs ---- */
.home-diff-subhead {
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 24px;
}

/* ---- Bloc B : comparaison BODY vs MIND (2 cartes) ---- */
.home-vs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
}

.home-vs-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 26px 30px;
  overflow: hidden;
}
/* accents par gamme (même logique que home.css) */
.home-vs-card--body {
  border-color: rgba(255, 23, 23, 0.35);
  box-shadow: 0 18px 50px -24px var(--glow-body);
}
.home-vs-card--mind {
  border-color: rgba(54, 217, 187, 0.35);
  box-shadow: 0 18px 50px -24px var(--glow-mind);
}

/* En-tête de carte : pastille gamme + nom */
.home-vs-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.home-vs-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.home-vs-card--body .home-vs-dot { background: var(--body); box-shadow: 0 0 14px var(--glow-body); }
.home-vs-card--mind .home-vs-dot { background: var(--mind); box-shadow: 0 0 14px var(--glow-mind); }

.home-vs-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.03em;
  color: var(--white);
}
.home-vs-card--body .home-vs-name { color: var(--body); }
.home-vs-card--mind .home-vs-name { color: var(--mind); }

/* Lignes attribut : libellé (clé) + valeur */
.home-vs-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.home-vs-row {
  display: grid;
  gap: 2px;
}
.home-vs-key {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-vs-val {
  color: var(--white);
  font-size: 0.98rem;
  line-height: 1.5;
}


/* =========================================================
   SECTION 8 — FAQ
   Accordéon natif <details>/<summary> (accessible, marche sans JS).
   ========================================================= */
.home-faq {
  padding: 100px 0;
  background: var(--bg);
}

.home-faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

/* Un item = <details> stylé en carte */
.home-faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.25s ease;
}
.home-faq-item[open] {
  border-color: #2a2a3a;
}

/* La question = <summary> cliquable (on retire la flèche native) */
.home-faq-q {
  list-style: none;                /* Firefox */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--white);
  user-select: none;
}
.home-faq-q::-webkit-details-marker { display: none; } /* Safari/Chrome */
.home-faq-q:focus-visible {
  outline: 2px solid var(--mind);
  outline-offset: -2px;
  border-radius: 12px;
}

/* Indicateur +/− à droite de la question */
.home-faq-sign {
  flex: 0 0 auto;
  position: relative;
  width: 18px;
  height: 18px;
}
.home-faq-sign::before,
.home-faq-sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: var(--muted);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.home-faq-sign::after { transform: translate(-50%, -50%) rotate(90deg); } /* barre verticale → forme un + */
.home-faq-item[open] .home-faq-sign::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; } /* devient − */
.home-faq-item[open] .home-faq-sign::before { background: var(--white); }

/* La réponse */
.home-faq-a {
  margin: 0;
  padding: 0 22px 22px;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.65;
}
.home-faq-a strong { color: var(--white); font-weight: 600; }


/* =========================================================
   SECTION 9 — CTA FINAL + NEWSLETTER
   ========================================================= */
.home-final {
  position: relative;
  padding: 110px 0 120px;
  background: var(--surface);
  overflow: hidden;
  text-align: center;
}

/* Lueur neutre (mélange discret rouge + cyan) derrière le bloc */
.home-final-glow {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 760px;
  height: 320px;
  background: radial-gradient(ellipse at center,
              rgba(255, 23, 23, 0.13) 0%,
              rgba(54, 217, 187, 0.10) 48%,
              transparent 72%);
  filter: blur(46px);
  pointer-events: none;
  z-index: 1;
}

.home-final-inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

.home-final-sub {
  margin: 18px auto 0;
  max-width: 520px;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Groupe de boutons (double choix BODY / MIND) */
.home-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 34px;
}

/* ---- Bloc newsletter ---- */
.home-news {
  margin: 56px auto 0;
  max-width: 540px;
  padding: 32px 28px 34px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  text-align: center;
}

.home-news-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  color: var(--white);
}

.home-news-text {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.55;
}

/* Le formulaire : champ + bouton (empilés en mobile, en ligne en desktop) */
.home-news-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.home-news-input {
  width: 100%;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.98rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.home-news-input::placeholder { color: var(--muted); }
.home-news-input:focus {
  outline: none;
  border-color: var(--mind);
  box-shadow: 0 0 0 3px rgba(54, 217, 187, 0.15);
}

/* Petit message de confirmation (proto : affiché par le JS au submit) */
.home-news-note {
  margin: 14px 0 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--mind);
}


/* =========================================================
   RESPONSIVE — DESKTOP (≥ 769px)
   Mobile-first : par défaut tout est en 1 colonne ci-dessus.
   ========================================================= */
@media (min-width: 769px) {
  /* Sections plus aérées en desktop (aligné sur home.css) */
  .home-proof,
  .home-diff,
  .home-faq {
    padding: 120px 0;
  }

  /* Preuve : 3 cartes par ligne */
  .home-proof-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  /* « Ce que tu veux → ce que fait 9MM » : 2 colonnes alignées */
  .home-want-row {
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
    gap: 24px;
    padding: 20px 26px;
  }

  /* BODY vs MIND : 2 cartes côte à côte */
  .home-vs {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  /* Newsletter : champ + bouton sur la même ligne */
  .home-news-form {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* Tablette intermédiaire : la preuve passe à 2 colonnes avant 3 */
@media (min-width: 600px) and (max-width: 768px) {
  .home-proof-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}


/* =========================================================
   ACCESSIBILITÉ — réduction des animations
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  /* on neutralise tout reveal et toute transition de mouvement */
  .home.is-armed .home-reveal,
  .home.is-armed .home-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .home-proof-item,
  .home-proof-item:hover,
  .home-faq-item,
  .home-faq-sign::before,
  .home-faq-sign::after {
    transition: none;
  }
  .home-proof-item:hover { transform: none; }
}