/* =============================================================================================
   06 Tarifs
   En-tête centré, puis deux formules de même taille. Chacune ouvre sur un bandeau de même
   hauteur (« Prix fixe… », « Notre recommandation »), si bien que les noms, les prix et les
   listes des deux encarts restent alignés. La formule recommandée (Croissance) est en aplat bordeaux.
   Les puces sont des points, comme le point du « ı » du logo.
   ============================================================================================= */
.tarifs {
  --formule-flag: 44px;                                    /* hauteur du bandeau en haut des encarts */
  --formule-amount: clamp(40px, calc(1.4cqw + 32px), 52px); /* prix (40, 45, 52) */
}

.tarifs .section-lead { text-wrap: balance; }

.formules {
  max-width: 1040px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-5);
}

.formule {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper);
  color: var(--ink);
}
.formule > * { margin: 0; }

/* Bandeau : pleine largeur, en haut de l'encart */
.formule__flag {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--formule-flag);
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--card-pad);
  padding: 0 var(--card-pad);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.formule__flag-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }

.formule__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}
.formule__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: var(--ls-card);
}
.formule__pitch {
  margin-top: var(--space-2);
  color: var(--muted);
  text-wrap: pretty;
}

/* Prix */
.formule__price { margin-top: var(--space-6); }
.formule__price > * { margin: 0; }
.formule__label { font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
.formule__amount {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--formule-amount);
  line-height: 1;
  letter-spacing: -0.035em;
  word-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.formule__delay { margin-top: var(--space-3); line-height: 1.4; color: var(--muted); }
.formule__delay strong { color: var(--ink); }

/* Ce qui est livré */
.formule__more,
.formule__list { border-top: 1px solid var(--line); }
.formule__more {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  font-size: var(--fs-small);
  font-weight: 700;
}
.formule__more + .formule__list { margin-top: var(--space-3); padding-top: 0; border-top: 0; }
.formule__list {
  margin-top: var(--space-6);
  padding: var(--space-5) 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  line-height: 1.45;
  margin-bottom: var(--space-7);
}
.formule__list li {
  position: relative;
  padding-left: 20px;
  text-wrap: pretty;
}
.formule__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(0.725em - 3px);                            /* centre de la première ligne */
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc);
}
.formule__list strong { font-weight: 700; }

/* Bouton : pleine largeur, toujours en bas de l'encart */
.formule__cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}
.formule .btn-outline:focus { outline-color: var(--acc); }

/* ---- Formule recommandée : aplat bordeaux ---- */
.formule--featured {
  padding-top: var(--card-pad);
  border-color: var(--dark);
  background: var(--dark);
  color: var(--on);
  box-shadow: 0 40px 70px -44px rgb(43 10 17 / 0.6);
}
.formule--featured .formule__flag { border-bottom-color: var(--dline); color: var(--hld); }
.formule--featured .formule__flag-dot { background: var(--hld); }
.formule--featured .formule__pitch,
.formule--featured .formule__label,
.formule--featured .formule__delay { color: var(--on2); }
.formule--featured .formule__delay strong { color: var(--on); }
.formule--featured .formule__more,
.formule--featured .formule__list { border-top-color: var(--dline); }
.formule--featured .formule__more + .formule__list { border-top: 0; }
.formule--featured .formule__list li::before { background: var(--hld); }
.formule--featured .tag { border-color: var(--dline); font-weight: 700; }

/* Bouton plein clair sur l'aplat (même remplissage au survol que les autres boutons) */
.formule--featured .btn-fill { background: var(--on); color: var(--dark); }
.formule--featured .btn-fill .btn-fill__fill { background: var(--dark); }
.formule--featured .btn-fill.is-filled,
.formule--featured .btn-fill:hover { color: var(--hldi); }

/* ---- Pied : mentions ---- */
.tarifs .tarifs__foot {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-5);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}
.tarifs .tarifs__foot p { margin: 0; }

/* ---- Une colonne ---- */
@container page (max-width: 767px) {
  .formules { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: var(--space-4); }
}