/* ════════════════════════════════════════════════════════════════════
 *  VITRINE — jetons et mise en page communs (ex-page d'accueil marketing)
 * ════════════════════════════════════════════════════════════════════
 *  L'ancienne page « home » n'existe plus (/home sert la landing depuis le
 *  13/10/2026) : ce fichier ne garde que ce que les pages vitrine utilisent
 *  (Tarifs, Créateurs, Comment ça marche, Extension, À propos, Presse, Aide,
 *  Nouveautés) : jetons --hm-*, conteneur, titres, puce, boutons, équipe,
 *  appel final. Ses blocs propres (vidéo, plateformes, accordéon, citation…)
 *  sont partis avec elle.
 *  Repères d'origine, pris sur la maquette Framer du porteur (bureau 1440 px) :
 *   - gouttières 64 px → conteneur 1312 px ; fond de page #EDEDED, hero #FAFAFA
 *   - barre du haut 79 px ; liens 16/24 500 gris #666 ; bouton noir r10 pad 16/22
 *   - h1 68/68 gras, -0,03em ; h2 56/56 ; h3 cartes 40/44 ; h4 accordéon 24/26
 *   - corps 18/27 500, gris #666 ; puces des cartes noires 18/27 blanc
 *   - vidéo 1312×738 r16 ; cartes noires 632×545 r16 pad 48 ; équipe 1200×479 r32
 *  Titres : Noto Sans (police du DS) à la place de Mabry Pro (licence
 *  propriétaire du gabarit Framer) ; corps : Noto Sans (celle du produit).
 *  Page toujours CLAIRE : pas de thème sombre sur la vitrine.
 * ════════════════════════════════════════════════════════════════════ */


body.home {
  /* Jetons = ceux du design system (feed-ds.css / atelier.css), rien d'inventé. */
  --hm-bg: var(--md-sys-color-surface-container-low);      /* fond de page */
  --hm-hero: var(--md-sys-color-surface);    /* sections claires */
  --hm-card: var(--md-sys-color-surface);    /* cartes claires */
  --hm-ink: var(--md-sys-color-on-surface);
  --hm-ink-2: var(--md-sys-color-on-surface-strong);
  --hm-muted: var(--md-sys-color-on-surface-variant);
  --hm-line: var(--md-sys-color-outline);
  --hm-brand: var(--md-sys-color-primary);
  --hm-black: var(--md-sys-color-inverse-surface);     /* cartes sombres = rôle inverse (Black du DS) */
  --hm-head: "Noto Sans", ui-sans-serif, system-ui, sans-serif;
  --hm-body: "Noto Sans", ui-sans-serif, system-ui, sans-serif;
  --hm-ease: cubic-bezier(.2, .7, .2, 1);
  --hm-r: var(--md-sys-shape-corner-medium);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.home { margin: 0; background: var(--hm-bg); color: var(--hm-ink); font-family: var(--hm-body); font: var(--md-sys-typescale-body-large);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--hm-head); font-weight: 700; letter-spacing: -0.02em; }

.hm-wrap { width: min(1312px, 100% - 128px); margin: 0 auto; }

/* ── Textes ─────────────────────────────────────────────────────── */
.hm-h1 { font: var(--md-sys-typescale-display-large); letter-spacing: -.03em; text-align: center; max-width: 1040px; margin: 0 auto; text-wrap: balance; }
.hm-h2 { font: var(--md-sys-typescale-display-medium); letter-spacing: -.025em; text-wrap: balance; }
.hm-h2--center { text-align: center; margin: 0 auto; max-width: 900px; }
.hm-h2 em { font-style: italic; }
.hm-lead { font: var(--md-sys-typescale-body-large); color: var(--hm-muted); text-align: center; max-width: 1120px; margin: 24px auto 0; }
.hm-sub { font: var(--md-sys-typescale-body-large); color: var(--hm-muted); text-align: center; max-width: 600px; margin: 24px auto 0; }
.hm-eyebrow-line { display: flex; justify-content: center; align-items: center; gap: 10px; font: var(--md-sys-typescale-label-large); font-weight: 500; text-align: center; color: var(--hm-ink); margin-bottom: 28px; }
.hm-eyebrow-line::before, .hm-eyebrow-line::after { content: ""; width: 22px; height: 1px; background: color-mix(in srgb, var(--md-sys-color-on-surface) 25%, transparent); }
.hm-chip { font: var(--md-sys-typescale-label-large); display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--md-sys-shape-corner-small); background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline); font-weight: 500; letter-spacing: -0.01em; color: var(--hm-ink); }

/* ── Boutons du haut de page ────────────────────────────────────── */
.hm-hero-btns { display: flex; justify-content: center; gap: 14px; margin-top: 44px; }

/* ── Équipe ─────────────────────────────────────────────────────── */
.hm-team { padding: 0 0 128px; }
.hm-team-card { display: grid; grid-template-columns: 1fr 528px; gap: 48px; align-items: center; width: min(1200px, 100% - 128px); margin: 0 auto; padding: 48px; border-radius: var(--hm-r); background: var(--hm-card); }
.hm-team-txt .hm-h2 { margin: 24px 0; font: var(--md-sys-typescale-display-medium); text-wrap: initial; }
.hm-team-txt p { font: var(--md-sys-typescale-body-large); color: var(--hm-ink-2); }
.hm-team-img { width: 528px; height: 383px; object-fit: cover; border-radius: 12px; }

/* ── Appel final ────────────────────────────────────────────────── */
.hm-cta-card { width: min(1072px, 100% - 128px); margin: 0 auto; padding: 80px 48px; border-radius: var(--hm-r); background: var(--md-sys-color-surface); text-align: center; }
.hm-cta-card .hm-eyebrow-line { margin-bottom: 16px; }
.hm-cta-card .hm-hero-btns { margin-top: 36px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Écrans plus petits (tablette / mobile) ─────────────────────── */
@media (max-width: 1240px) {
  .hm-team-card { grid-template-columns: 1fr; }
  .hm-team-img { width: 100%; height: auto; aspect-ratio: 528 / 383; }
}
@media (max-width: 900px) {
  .hm-wrap, .hm-team-card, .hm-cta-card { width: min(1312px, 100% - 48px); }
  .hm-h1 { font: var(--md-sys-typescale-display-medium); }
  .hm-h2 { font: var(--md-sys-typescale-display-small); }
  .hm-hero-btns { flex-direction: column; align-items: center; }
  .hm-team-card, .hm-cta-card { padding: 28px; border-radius: 20px; }
}

/* Vitrine : le <main> est pleine largeur (pas la gouttière des pages de texte du DS). */
body.ds-solo.home > main { padding: 0; }