/* ==========================================================================
   PAGE — ACCUEIL · cree-ton-entreprise.ch
   Chargé uniquement sur la front-page (cf. inc/enqueue.php).
   S'appuie sur tokens.css + components.css.
   ========================================================================== */

/* Utilitaires partagés (.section-head, .container--narrow, .grid-3, .cta-final)
   sont désormais dans components.css (réutilisés par plusieurs gabarits). */

/* ----- HERO ----- */
.hero {
  background:
    radial-gradient(120% 120% at 100% 0%, var(--blue-50) 0%, transparent 55%),
    var(--bg-page);
  padding-block: var(--space-8) var(--space-7);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.25fr 0.9fr;
  gap: var(--space-7);
  align-items: center;
}
.hero__title { font-size: var(--fs-display); margin-block: var(--space-3) var(--space-4); }
.hero__lead { max-width: 52ch; margin-bottom: var(--space-5); }
.hero__points { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.hero__points li { position: relative; padding-left: var(--space-6); font-weight: var(--fw-semibold); color: var(--text-body); }
.hero__points li::before {
  content: ""; position: absolute; left: 0; top: 0.2em; width: 18px; height: 18px;
  background: center / 18px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231441F5' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E");
}
.hero__reassurance { margin-top: var(--space-7); }

/* .hero__form + .lead-card sont dans components.css (partagés accueil/bundle). */

@media (max-width: 860px) {
  .hero { padding-block: var(--space-7) var(--space-7); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .hero__title { font-size: var(--fs-h1); }            /* un cran sous display = plus respirable */
  .hero__lead { margin-bottom: var(--space-5); }
  .hero__points { gap: var(--space-4); margin-top: var(--space-2); }
  .hero__reassurance { margin-top: var(--space-6); }
}

/* ----- Carte structure : prix, puces, drapeau, lien d'action ----- */
.card { position: relative; display: flex; flex-direction: column; }
.card__flag { position: absolute; top: var(--space-5); right: var(--space-5); }
.card__price { font-size: var(--fs-h3); font-weight: var(--fw-black); color: var(--blue-trust); margin-bottom: var(--space-3); }
.card__price small { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); }
.card__list { list-style: none; padding: 0; margin: var(--space-4) 0; display: grid; gap: var(--space-3); }
.card__list li { position: relative; padding-left: var(--space-6); font-size: var(--fs-sm); color: var(--text-body); }
.card__list li::before {
  content: ""; position: absolute; left: 0; top: 0.15em; width: 16px; height: 16px;
  background: center / 16px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231441F5' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E");
}
.card__cta { margin-top: auto; padding-top: var(--space-5); }
.card__cta a { font-weight: var(--fw-bold); font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: var(--space-2); }
.card__cta a:hover { text-decoration: none; gap: var(--space-3); }