/* Finitions visuelles. Couche additive: aucun jeton ni composant n'est redéfini,
   seuls le rythme, l'alignement et quelques détails typographiques sont ajustés. */

/* Respiration verticale un peu plus large sur grand écran. */
@media (min-width: 1024px) {
  main > section {
    padding: 72px 0;
  }
  .hero {
    padding: 76px 0 52px;
  }
}

/* Les titres cassent leurs lignes de façon équilibrée plutôt qu'orpheline. */
h1,
h2,
.lead,
.cta p {
  text-wrap: balance;
}

/* Les ancres ne passent plus sous l'en-tête collant. */
:target {
  scroll-margin-top: 76px;
}

/* Le texte long était collé à gauche avec un vide à droite: on le centre. */
main > section > .wrap > .prose {
  margin-left: auto;
  margin-right: auto;
}
.prose h2 {
  margin-top: 38px;
}

/* Le fil d'Ariane ne doit pas répéter le titre en pleine largeur. */
.breadcrumb span:last-child {
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chiffres clés: hauteurs égales et valeur alignée en bas. */
.stats {
  align-items: stretch;
}
.stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
}
.stat b {
  order: -1;
}

/* Cartes: transition douce et état de survol cohérent avec l'application. */
.card {
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

/* Tarifs: quatre colonnes réellement alignées, prix qui ne se coupe plus. */
.plan {
  min-height: 100%;
}
.plan-price {
  font-size: clamp(1.28rem, 1.7vw, 1.72rem);
  line-height: 1.2;
}
.plan-price small {
  white-space: nowrap;
}
.plan-cap {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent);
}
.plan .btn {
  width: 100%;
  margin-top: 4px;
}
.plan.featured {
  position: relative;
}
.plan.featured::before {
  content: "Le plus choisi";
  position: absolute;
  top: -10px;
  left: 18px;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 9px;
  box-shadow: var(--shadow-sm);
}

/* Questions fréquentes centrées, comme le reste des sections de contenu. */
.faq {
  margin-left: auto;
  margin-right: auto;
}

/* Bandeau cookies plus discret, il ne barre plus le contenu. */
.cookie {
  left: 16px;
  right: auto;
  bottom: 16px;
  max-width: 420px;
  margin: 0;
  font-size: 0.84rem;
  padding: 13px 15px;
}
@media (max-width: 640px) {
  .cookie {
    right: 16px;
    max-width: none;
  }
}

/* Pied de page: les liens respirent un peu plus. */
.footer-col li {
  margin-bottom: 9px;
}