/* Page /tarifs — overrides minimaux.
 * Le gros du design vient de : style.css (base), forms.css (.audit-hero),
 * expertises.css (.expertises-content, .expertises-cases, .expertises-faq),
 * partners.css (.partners-cta-final). Ici on n'ajoute que ce qui est unique
 * à /tarifs. */

/* Aligne toute la page sur la même max-width que le hero pour un visuel cohérent.
 * Sans ça, le hero (.audit-hero, max-width 880px) flotte centré et étroit, tandis
 * que le contenu suivant occupe 1480px par défaut — résultat : titres pas alignés. */
.tarifs-page .audit-hero .container,
.tarifs-page .expertises-content .container,
.tarifs-page .partners-content .container,
.tarifs-page .tarifs-pricing-wrap .container {
  max-width: 1100px;
}

/* .expertises-main est conçu pour vivre à droite d'une TOC sidebar dans un grid
 * 2 colonnes (max-width 760px, pas de margin auto). Sur /tarifs il n'y a pas de
 * TOC : on lui donne 100% pour qu'il prenne toute la largeur du container parent. */
.tarifs-page .expertises-main {
  max-width: 100%;
  margin: 0 auto;
}

/* Wrapper du composant Pricing réutilisé depuis la home — espacement cohérent
 * avec les autres sections .expertises-cases qui suivent. */
.tarifs-pricing-wrap {
  margin: 0 0 80px;
  scroll-margin-top: 110px;
}
/* La section #prix de la home a déjà des paddings — on les neutralise ici
 * pour que le rythme vertical reste cohérent avec les autres blocs de /tarifs. */
.tarifs-pricing-wrap #prix.section {
  padding: 0;
}
/* Cache le H2 du composant Pricing sur /tarifs (le H1 de la page suffit, sinon
 * on a deux titres énormes qui se télescopent visuellement). */
.tarifs-pricing-wrap .sect-head {
  display: none;
}

/* Bloc Garantie ROI — utilise .expertises-cases mais avec un fond accent
 * pour le mettre en avant (= la promesse différenciante du site). */
.tarifs-roi {
  position: relative;
  padding: 48px 40px;
  border-radius: 24px;
  background:
    radial-gradient(800px 400px at 15% 0%, rgba(var(--violet-rgb), 0.10), transparent 60%),
    radial-gradient(700px 350px at 85% 100%, rgba(var(--cyan-rgb), 0.08), transparent 60%),
    var(--surface);
  border: 1px solid var(--line);
  margin: 0 0 96px;
  scroll-margin-top: 110px;
}
.theme-light .tarifs-roi {
  background:
    radial-gradient(800px 400px at 15% 0%, rgba(var(--violet-rgb), 0.05), transparent 60%),
    radial-gradient(700px 350px at 85% 100%, rgba(var(--cyan-rgb), 0.04), transparent 60%),
    rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.06);
}
.tarifs-roi .expertises-cases-title,
.tarifs-roi .expertises-cases-lead {
  max-width: 60ch;
}
.tarifs-roi-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 14px;
  max-width: 720px;
}
.tarifs-roi-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--sans);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: var(--ink);
}
.tarifs-roi-list li svg {
  color: var(--cyan);
  flex-shrink: 0;
  margin-top: 4px;
}

/* Sur le bloc "Comment on chiffre" — les cards sont plus simples que les
 * cas (pas de bullets), on aligne le texte au top */
.tarifs-content .expertises-case h3 + p {
  margin-top: 0;
}

/* Responsive — repli déjà géré par expertises.css, on ajuste juste le ROI card */
@media (max-width: 760px) {
  .tarifs-roi {
    padding: 32px 24px;
  }
}