/* Accueil – compléments au design system (site.css). Aucune couleur hors tokens. */

/* Premier écran */
@media (min-width: 768px) { .hero { padding: var(--sp-12) 0 var(--sp-12); } }
.ms-duration { margin-bottom: 0; min-width: 0; }
.ms-months { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: var(--sp-2); }
.ms-months .chip span { width: 100%; padding: 0 4px; }
.ms-months .chip input:checked + span { padding: 0 3px; }
.ms-warning { margin: 0 0 var(--sp-2); font-size: var(--fs-small); font-weight: 600; color: var(--warning); }
.hero-more .link-arrow { margin-top: 0; }

/* Barre de quatre faits */
.facts-band .facts { padding: var(--sp-6) 0; }
.facts-band .facts-item span { max-width: 26ch; }

/* Comment ça marche */
.home-how { padding-bottom: var(--sp-12); }

/* Cartes produit (la ligne de faits est remise à plat dans site.css : .card-body .facts) */
.home-solutions .section-head { margin-bottom: var(--sp-6); }
@media (min-width: 768px) {
  /* Longueur de page (cible ≤ 4 000 px en bureau) : sections un cran plus serrées, photos 16:10 */
  .home-solutions { padding: var(--sp-16) 0; }
  .home-solutions .card-product img { aspect-ratio: 16 / 10; }
  main .band { padding: var(--sp-10) 0; }
}
.home-solutions .card-body { padding-bottom: var(--sp-5); }
/* Exemple chiffré : une phrase simple, sans badge ni gros chiffre */
.card-body p.card-rent { margin: 0 0 var(--sp-5); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); }
/* Loyers des équipements types (pages métier, complétés dans metier.css) */
.card-example { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); margin: 0 0 var(--sp-5); color: var(--ink-3); }
.card-example strong { font: 700 1.125rem/1.3 var(--font-heading); color: var(--ink); }
.card-example-base { flex-basis: 100%; font-size: var(--fs-small); line-height: var(--lh-small); }
.card-body p.card-example { margin-bottom: var(--sp-5); }
.also { margin: var(--sp-6) 0 0; color: var(--ink-3); }
.also a { font-weight: 600; }

/* Votre métier : cinq cartes (photo, ce qu'on finance, un fait sourcé), puis les chiffres clés sourcés */
.metier-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--grid-gap); list-style: none; margin: 0; padding: 0; }
.metier-cards > li { display: flex; min-width: 0; }
.metier-card { flex: 1; border: 1px solid var(--line); }
.metier-card .card-body { padding: var(--sp-5); }
.metier-card .card-body h3 { margin-bottom: var(--sp-2); }
.card-body p.metier-card-items { color: var(--ink-3); font-size: var(--fs-small); line-height: var(--lh-small); margin-bottom: var(--sp-4); }
.card-body p.metier-card-proof { color: var(--ink-2); font-size: var(--fs-small); line-height: var(--lh-small); margin: 0 0 var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.metier-card .link-arrow { margin-top: auto; }
.metier-figures { margin-top: var(--sp-10); }
.metier-figures .facts { border-top: 1px solid var(--line); }
.metier-figures-source { margin: var(--sp-3) 0 0; font-size: var(--fs-small); color: var(--ink-3); }
.metier-refs { margin-top: var(--sp-10); }
.metier-refs h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-4); }
.metier-refs-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); list-style: none; margin: 0; padding: 0; }
.metier-refs-list li { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-4); border-top: 2px solid var(--brand); }
.metier-refs-list strong { font-family: var(--font-heading); color: var(--ink); }
.metier-refs-list span { color: var(--ink-3); font-size: var(--fs-small); line-height: var(--lh-small); }
.metier-refs-list a { margin-top: auto; font-weight: 600; font-size: var(--fs-small); }

/* Passage à la souscription : un bouton, rien d'autre */
.home-start { padding: var(--sp-10) 0; }
.home-start-inner { display: flex; justify-content: center; }

/* Questions fréquentes */
@media (min-width: 768px) { .home-faq { padding: var(--sp-12) 0; } }
.home-faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-12); align-items: start; }
.home-faq-grid h2 { margin-bottom: var(--sp-4); }
.home-faq .accordion { border-top: 1px solid var(--line); }

/* Bandeau final */
.band-actions { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.band-link { background: none; border: 0; padding: var(--sp-2) 0; min-height: 44px; color: #fff; font: 600 1rem/1.3 var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.band-link:hover { text-decoration-thickness: 2px; }

@media (max-width: 1023px) {
  .home-faq-grid { gap: var(--sp-8); }
  /* Tablette : trois cartes puis deux, sans case vide */
  .metier-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .metier-cards > li { grid-column: span 2; }
  .metier-cards > li:nth-child(n+4) { grid-column: span 3; }
  .metier-card img { aspect-ratio: auto; height: 160px; }
}
@media (max-width: 767px) {
  .facts-band .facts { padding: var(--sp-6) 0; }
  .home-how { padding-bottom: var(--sp-10); }
  .home-start { padding: var(--sp-8) 0; }
  .home-start .btn { width: 100%; }
  .facts-band .facts-item strong { font-size: 1.25rem; }
  .home-how .steps li { padding: 4px 0 0 44px; }
  .home-how .steps .step-num { top: 0; }
  .home-how .steps h3 { margin-bottom: var(--sp-1); }
  .home-faq-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .home-faq-grid > div:first-child { display: flex; flex-direction: column; gap: var(--sp-2); }
  .home-faq-grid h2 { margin-bottom: 0; }
  .band-actions { width: 100%; flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .band-actions .btn { width: 100%; }
  .band-link { text-align: center; }
  .card-product img { aspect-ratio: 2 / 1; }
  .home-solutions .card-body p { margin-bottom: var(--sp-2); }
  .home-faq-grid { gap: var(--sp-3); }
  .facts-band .facts { gap: var(--sp-4); }
  .home-how .steps { gap: var(--sp-5); }
  /* Mobile : une ligne par métier, vignette à gauche */
  .metier-cards { grid-template-columns: 1fr; gap: var(--sp-3); }
  .metier-cards > li, .metier-cards > li:nth-child(n+4) { grid-column: auto; }
  .metier-card { flex-direction: row; align-items: stretch; }
  .metier-card img { width: 96px; flex: none; aspect-ratio: auto; height: auto; object-fit: cover; }
  .metier-card .card-body { padding: var(--sp-3) var(--sp-4); }
  .metier-card .card-body h3 { margin-bottom: var(--sp-1); }
  .card-body p.metier-card-items { margin-bottom: var(--sp-2); }
  .card-body p.metier-card-proof { padding-top: var(--sp-2); margin-bottom: var(--sp-2); }
  .metier-figures { margin-top: var(--sp-8); }
  .metier-refs { margin-top: var(--sp-8); }
  .metier-refs-list { grid-template-columns: 1fr; gap: var(--sp-5); }
}