/* ═══════════════════════════════════════════════════════════════════
 *  VITRINE — mise en page des pages marketing intérieures
 *  (Comment ça marche, Créateurs, Tarifs, Extension, À propos, Presse,
 *  guide des plateformes). PLACEMENT SEULEMENT : les jetons (--hm-* = ceux du
 *  DS via home.css), la police (Noto Sans), les boutons (.cbtn), les puces
 *  (.chip), le rayon (12 px) viennent du design system. Rien d'inventé.
 * ═══════════════════════════════════════════════════════════════════ */

/* En-tête de page : petit surtitre, grand titre, chapeau, boutons. */
.vt-hero { background: var(--hm-hero); padding: 140px 0 72px; text-align: center; }
.vt-hero .hm-h1 { font: var(--md-sys-typescale-display-large); }
.vt-hero .hm-lead { max-width: 760px; }
.vt-hero .hm-hero-btns { margin-top: 36px; }

/* Sections */
.vt-section { padding: 96px 0; }
.vt-section--tight { padding: 64px 0; }
.vt-section--white { background: var(--hm-hero); }
.vt-section .hm-h2 { margin: 20px 0 16px; }
.vt-section .hm-h2--center { margin-left: auto; margin-right: auto; }
.vt-intro { max-width: 720px; font: var(--md-sys-typescale-body-large); color: var(--hm-muted); }
.vt-intro--center { margin: 0 auto; text-align: center; }
.vt-center { text-align: center; }

/* Grilles de cartes */
.vt-grid { display: grid; gap: 20px; margin-top: 48px; }
.vt-grid--2 { grid-template-columns: repeat(2, 1fr); }
.vt-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vt-grid--4 { grid-template-columns: repeat(4, 1fr); }
.vt-card { padding: 32px; border-radius: var(--hm-r); background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline); display: flex; flex-direction: column; gap: 12px; }
.vt-card--dark { background: var(--md-sys-color-inverse-surface); border-color: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); }
.vt-card--dark p, .vt-card--dark li { color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 78%, transparent); }
.vt-card h3 { font-family: var(--hm-head); font: var(--md-sys-typescale-headline-small); }
.vt-card p, .vt-card li { font: var(--md-sys-typescale-body-large); color: var(--hm-muted); }
.vt-card ul { margin: 4px 0 0; padding-left: 18px; }
.vt-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); font: var(--md-sys-typescale-body-large); font-weight: 700; }
.vt-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--hm-r); background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
.vt-card--dark .vt-ic { background: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 10%, transparent); color: var(--md-sys-color-inverse-on-surface); }
.vt-ic svg { width: 22px; height: 22px; }
.vt-card .cbtn { margin-top: auto; align-self: flex-start; }

/* Étapes numérotées en ligne */
.vt-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; counter-reset: etape; }
.vt-step { padding: 32px; border-radius: var(--hm-r); background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline); }
.vt-step h3 { margin: 18px 0 8px; font-family: var(--hm-head); font: var(--md-sys-typescale-headline-small); }
.vt-step p { font: var(--md-sys-typescale-body-large); color: var(--hm-muted); }
.vt-step img { border-radius: var(--hm-r); margin-top: 18px; height: auto; }   /* height : garde les proportions malgré l'attribut height */

/* Deux colonnes texte + visuel */
.vt-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.vt-split--rev > :first-child { order: 2; }
.vt-split .hm-h2 { font: var(--md-sys-typescale-display-medium); }
.vt-split p { font: var(--md-sys-typescale-body-large); color: var(--hm-muted); margin-top: 12px; }
.vt-visual { border-radius: var(--hm-r); overflow: hidden; background: var(--hm-hero); box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--md-sys-color-shadow) 35%, transparent); }
.vt-visual img { width: 100%; height: auto; }

/* Tableau comparatif (tarifs) : tableau du design system (.dstable-wrap, .dstable) ;
   ici le placement et la mise en forme d'un comparatif (texte sur plusieurs lignes). */
.vt-table-wrap { margin-top: 40px; }
.vt-table { min-width: 640px; }
.vt-table td { white-space: normal; vertical-align: top; }
.vt-table .ok { color: var(--md-sys-color-primary); font-weight: 700; }

/* Chiffres clés */
.vt-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.vt-kpi { padding: 28px 32px; border-radius: var(--hm-r); background: var(--md-sys-color-surface); }
.vt-kpi b { display: block; font-family: var(--hm-head); font: var(--md-sys-typescale-display-medium); line-height: 1; letter-spacing: -0.03em; font-weight: 600; color: var(--hm-ink); }
.vt-kpi span { display: block; margin-top: 10px; font: var(--md-sys-typescale-label-large); color: var(--hm-muted); }

/* FAQ : accordéon « carte » du design system (.accord-list, .accord--carte) ; ici le placement. */
.vt-faq { margin-top: 40px; }
.vt-faq .accord-body a { color: var(--md-sys-color-primary); }

/* Bandeau « en cours de construction » : message d'information du DS (.alert--info) ; ici le placement. */
.vt-build { margin: 32px auto 0; max-width: 760px; }

/* Liste à coches */
.vt-checks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.vt-checks li { display: flex; gap: 12px; align-items: flex-start; font: var(--md-sys-typescale-title-large); line-height: 26px; font-weight: 600; color: var(--hm-ink-2); }
.vt-checks svg { flex: none; width: 22px; height: 22px; color: var(--hm-brand); margin-top: 2px; }

/* Blocs presse : fichiers à télécharger */
.vt-files { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.vt-file { padding: 24px; border-radius: var(--hm-r); background: var(--md-sys-color-surface); text-align: center; }
.vt-file-prev { display: grid; place-items: center; height: 140px; border-radius: var(--hm-r); background: var(--hm-bg); margin-bottom: 16px; }
.vt-file-prev--dark { background: var(--md-sys-color-on-surface); }
.vt-file-prev img { height: 34px; width: auto; }
.vt-file b { display: block; font-family: var(--hm-head); font-weight: 600; font: var(--md-sys-typescale-title-large); }
.vt-file span { display: block; margin: 4px 0 14px; font: var(--md-sys-typescale-body-medium); color: var(--hm-muted); }


/* Texte courant (à propos, presse) */
.vt-prose { max-width: 760px; }
.vt-prose p { font: var(--md-sys-typescale-body-large); line-height: 28px; font-weight: 600; letter-spacing: -0.01em; color: var(--hm-ink-2); margin-top: 16px; }
.vt-prose h3 { margin-top: 40px; font-family: var(--hm-head); font: var(--md-sys-typescale-headline-medium); }
.vt-prose a { color: var(--hm-brand); }
.vt-code { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--md-sys-color-surface-container-high); font-family: Menlo, monospace; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface); }

/* Bandeau d'appel final (repris de l'accueil) */
.vt-cta { padding: 40px 0 120px; }

@media (max-width: 1000px) {
  .vt-grid--3, .vt-grid--4, .vt-steps, .vt-kpis, .vt-files { grid-template-columns: repeat(2, 1fr); }
  .vt-split { grid-template-columns: 1fr; gap: 32px; }
  .vt-split--rev > :first-child { order: 0; }
}
@media (max-width: 760px) {
  .vt-hero { padding: 100px 0 48px; }
  .vt-section { padding: 64px 0; }
  .vt-grid--2, .vt-grid--3, .vt-grid--4, .vt-steps, .vt-kpis, .vt-files { grid-template-columns: 1fr; }
  .vt-split .hm-h2 { font: var(--md-sys-typescale-display-small); }
  .vt-card { padding: 24px; }
}