/* 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;
}

/* Pages legales: un texte long se lit mieux avec des reperes clairs. */
.prose .legal-version {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 999px;
  display: inline-block;
  padding: 4px 11px;
  margin-bottom: 26px;
}
.prose > div + div {
  border-top: 1px solid var(--border-soft);
  padding-top: 26px;
  margin-top: 26px;
}
.prose h2 {
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}
.prose > div + div h2 {
  margin-top: 0;
}
.prose p:last-child,
.prose ul:last-child {
  margin-bottom: 0;
}

/* Plan comparison matrix + dual CTAs */
.plan-ctas{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.plan-ctas .btn{width:100%;text-align:center}
.plan-matrix{overflow:hidden;font-family:var(--font)}
.plan-matrix h3{font-family:var(--font);letter-spacing:-0.01em}
.plan-matrix__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.plan-matrix__table{
  width:100%;
  min-width:640px;
  table-layout:fixed;
  border-collapse:collapse;
  font-family:var(--font);
  font-size:0.95rem;
  line-height:1.45;
  color:var(--text,#14161a);
}
.plan-matrix__table col.feature{width:40%}
.plan-matrix__table col.plan{width:15%}
.plan-matrix__table th,
.plan-matrix__table td{
  padding:12px 14px;
  border-bottom:1px solid var(--border,#e5e7ec);
  text-align:center;
  vertical-align:middle;
  font-family:inherit;
  white-space:normal;
}
.plan-matrix__table th[scope=row]{
  text-align:left;
  font-weight:500;
  color:var(--text,#14161a);
  font-family:inherit;
}
.plan-matrix__table thead th{
  font-family:inherit;
  font-size:0.72rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--text-faint,#8a91a0);
  font-weight:650;
  background:var(--surface-2,#f6f7f9);
}
.plan-matrix__table tbody tr:hover td,
.plan-matrix__table tbody tr:hover th[scope=row]{
  background:rgba(20,22,26,0.02);
}
.plan-matrix__yes span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  background:#14161a;
  color:#fff;
  font-size:0.72rem;
  font-weight:700;
  line-height:1;
  font-family:inherit;
}
.plan-matrix__no span{
  color:var(--text-faint,#8a91a0);
  font-family:inherit;
}
@media (max-width:720px){
  .plan-matrix__table{font-size:0.86rem}
  .plan-matrix__table th,
  .plan-matrix__table td{padding:10px 8px}
}