/* Tarifs v2 — mise en page de la maquette validée */
body main.psprice.psprice { background:#fff; color:#0e1325; }

/* Hero */
body main.psprice.psprice .psprice-hero { max-width:880px; margin:0 auto; padding:72px 24px 48px; text-align:center; }
body main.psprice.psprice .psprice-hero h1 {
  font-size:clamp(36px,5vw,60px); line-height:1.04; letter-spacing:-0.035em; font-weight:800; color:#0e1325; margin:0 0 16px;
}
body main.psprice.psprice .psprice-hero p { font-size:18px; line-height:1.55; color:#5b6274; max-width:560px; margin:0 auto; }
body main.psprice.psprice .psprice-monthly { display:inline-block; margin-top:18px; font-size:13px; color:#6b7284; }

/* Cartes : toujours côte à côte */
body main.psprice.psprice .psprice-plans {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;
  max-width:1200px; margin:0 auto; padding:0 24px; align-items:stretch;
}
body main.psprice.psprice .psprice-plan {
  position:relative; display:flex; flex-direction:column; gap:20px; padding:32px;
  border:1px solid #e3e7ef; border-radius:12px; background:#fff; box-shadow:none; transform:none;
}
body main.psprice.psprice .psprice-plan h2 { font-size:20px; font-weight:700; margin:0; color:#0e1325; }
body main.psprice.psprice .psprice-plan h3 { font-size:14px; font-weight:600; margin:0; color:#0e1325; padding-top:20px; border-top:1px solid #eceff5; }
body main.psprice.psprice .psprice-intro { font-size:15px; line-height:1.5; color:#5b6274; margin:0; }
body main.psprice.psprice .psprice-amount { display:flex; align-items:baseline; gap:6px; }
body main.psprice.psprice .psprice-amount strong { font-size:52px; font-weight:800; letter-spacing:-0.04em; color:#0e1325; line-height:1; }
body main.psprice.psprice .psprice-amount span { font-size:15px; color:#5b6274; }
body main.psprice.psprice .psprice-button {
  display:flex; justify-content:center; padding:14px 18px; border-radius:8px;
  border:1px solid #cfd6e4; background:#fff; color:#0e1325; font-size:15px; font-weight:600; text-decoration:none;
}
body main.psprice.psprice .psprice-button:hover { border-color:#0e1325; }
body main.psprice.psprice .psprice-plan ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:15px; color:#2a3043; }
body main.psprice.psprice .psprice-plan li { line-height:1.45; }
body main.psprice.psprice .psprice-roadmap { display:flex; flex-direction:column; gap:12px; }
body main.psprice.psprice .psprice-planned { color:#4a5578; }

/* Pro mise en avant */
body main.psprice.psprice .psprice-plan.psprice-pro {
  background:#101a4a; border-color:#101a4a; color:#fff; box-shadow:0 24px 60px #101a4a40;
}
body main.psprice.psprice .psprice-pro h2,
body main.psprice.psprice .psprice-pro h3,
body main.psprice.psprice .psprice-pro .psprice-amount strong { color:#fff; }
body main.psprice.psprice .psprice-pro h3 { border-top-color:#ffffff26; }
body main.psprice.psprice .psprice-pro .psprice-intro,
body main.psprice.psprice .psprice-pro .psprice-amount span { color:#c3cbe6; }
body main.psprice.psprice .psprice-pro ul,
body main.psprice.psprice .psprice-pro .psprice-planned,
body main.psprice.psprice .psprice-pro li { color:#e4e8f6; }
body main.psprice.psprice .psprice-pro .psprice-button { background:#fff; border-color:#fff; color:#101a4a; font-weight:700; }
body main.psprice.psprice .psprice-ribbon {
  position:static; align-self:flex-start; margin:0 0 -8px; padding:5px 10px; border-radius:6px;
  background:#2f62ee; color:#fff; font-size:12px; font-weight:600; transform:none;
}
body main.psprice.psprice .psprice-availability { max-width:1200px; margin:24px auto 0; padding:0 24px; text-align:center; font-size:14px; color:#6b7284; }

/* Option Emails */
body main.psprice.psprice .psprice-email {
  display:flex; flex-wrap:wrap; gap:40px; align-items:center; justify-content:space-between;
  max-width:1152px; margin:96px auto 0; padding:48px; border-radius:12px; background:#f4f6fb; box-sizing:border-box;
}
body main.psprice.psprice .psprice-email-copy { flex:1 1 380px; display:flex; flex-direction:column; gap:14px; }
body main.psprice.psprice .psprice-option { font-size:13px; font-weight:700; letter-spacing:0.08em; color:#2f62ee; }
body main.psprice.psprice .psprice-email h2 { font-size:36px; line-height:1.08; letter-spacing:-0.03em; font-weight:800; margin:0; color:#0e1325; }
body main.psprice.psprice .psprice-email-calculator {
  flex:1 1 380px; display:flex; flex-direction:column; gap:18px; padding:28px;
  border-radius:12px; background:#fff; border:1px solid #e3e7ef; box-shadow:none;
}
body main.psprice.psprice #psprice-contacts {
  width:100%; min-height:44px; padding:10px 14px; border:1px solid #d6dce8; border-radius:8px;
  background:#fff; font:inherit; font-size:15px; color:#0e1325;
}
body main.psprice.psprice .psprice-email-amount strong { font-size:44px; font-weight:800; letter-spacing:-0.04em; color:#0e1325; }

/* Comparatif */
body main.psprice.psprice .psprice-compare { max-width:1200px; margin:96px auto 0; padding:0 24px; box-sizing:border-box; }
body main.psprice.psprice .psprice-compare h2 { font-size:32px; letter-spacing:-0.03em; font-weight:800; margin:0 0 28px; color:#0e1325; }
body main.psprice.psprice .psprice-table-wrap { overflow-x:auto; border:1px solid #e3e7ef; border-radius:12px; }
body main.psprice.psprice .psprice-compare table { width:100%; min-width:640px; border-collapse:collapse; font-size:15px; }
body main.psprice.psprice .psprice-compare th,
body main.psprice.psprice .psprice-compare td { padding:16px 24px; border-bottom:1px solid #eef1f6; text-align:center; color:#2a3043; }
body main.psprice.psprice .psprice-compare th:first-child,
body main.psprice.psprice .psprice-compare td:first-child { text-align:left; }
body main.psprice.psprice .psprice-compare thead th { background:#f8f9fc; font-weight:700; color:#0e1325; }
body main.psprice.psprice .psprice-compare thead small { display:block; margin-top:4px; font-weight:500; color:#6b7284; }
body main.psprice.psprice .psprice-compare tbody tr:last-child td { border-bottom:0; }

/* FAQ en accordéon */
body main.psprice.psprice .psprice-faq { max-width:820px; margin:96px auto 0; padding:0 24px; box-sizing:border-box; }
body main.psprice.psprice .psprice-faq h2 { font-size:32px; letter-spacing:-0.03em; font-weight:800; margin:0 0 24px; text-align:center; color:#0e1325; }
body main.psprice.psprice .psprice-faq details { border-bottom:1px solid #e3e7ef; background:none; border-radius:0; padding:0; margin:0; }
body main.psprice.psprice .psprice-faq details:first-of-type { border-top:1px solid #e3e7ef; }
body main.psprice.psprice .psprice-faq summary {
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 0; cursor:pointer; font-size:17px; font-weight:600; color:#0e1325;
}
body main.psprice.psprice .psprice-faq summary::-webkit-details-marker { display:none; }
body main.psprice.psprice .psprice-faq summary::after { content:"+"; font-size:22px; font-weight:400; color:#5b6274; }
body main.psprice.psprice .psprice-faq details[open] summary::after { content:"−"; }
body main.psprice.psprice .psprice-faq details p { margin:0 0 22px; font-size:16px; line-height:1.6; color:#5b6274; }

/* Téléphone : cartes côte à côte, défilement horizontal */
@media (max-width:760px) {
  body main.psprice.psprice .psprice-hero { padding:48px 20px 32px; }
  body main.psprice.psprice .psprice-plans {
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:86%;
    overflow-x:auto; scroll-snap-type:x mandatory; padding:0 20px 8px; gap:14px;
  }
  body main.psprice.psprice .psprice-plan { scroll-snap-align:start; padding:26px; }
  body main.psprice.psprice .psprice-email { margin:64px 16px 0; padding:28px 20px; }
  body main.psprice.psprice .psprice-compare,
  body main.psprice.psprice .psprice-faq { margin-top:64px; padding:0 16px; }
}

/* 4 formules + tarif personnalisé (façon Circle Plus) */
body main.psprice.psprice .psprice-plans { grid-template-columns:repeat(4,minmax(0,1fr)); max-width:1320px; }
body main.psprice.psprice .psprice-plan.psprice-custom { background:#0b0d14; border-color:#0b0d14; color:#fff; }
body main.psprice.psprice .psprice-custom h2,
body main.psprice.psprice .psprice-custom h3,
body main.psprice.psprice .psprice-custom .psprice-amount strong { color:#fff; }
body main.psprice.psprice .psprice-custom .psprice-amount strong { font-size:40px; }
body main.psprice.psprice .psprice-custom h3 { border-top-color:#ffffff26; }
body main.psprice.psprice .psprice-custom .psprice-intro,
body main.psprice.psprice .psprice-custom li { color:#c9cdd8; }
body main.psprice.psprice .psprice-custom .psprice-ribbon { background:#ffffff1f; color:#fff; }
body main.psprice.psprice .psprice-custom .psprice-button { background:#fff; border-color:#fff; color:#0b0d14; font-weight:700; }
@media (max-width:1200px) and (min-width:761px) {
  body main.psprice.psprice .psprice-plans { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ===== Tarifs premium : alignement, onglets, bascule annuelle ===== */
body main.psprice.psprice { background:linear-gradient(#f7f8fc, #fff 520px); }
body main.psprice.psprice .psprice-hero { padding-bottom:28px; }

/* Bascule Mensuel / Annuel */
body main.psprice.psprice .psprice-billing { display:flex; width:max-content; margin:0 auto 56px; padding:4px; gap:4px; border:1px solid #e3e7ef; border-radius:12px; background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.05); }
body main.psprice.psprice .psprice-billing-option { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 18px; border:0; border-radius:8px; background:transparent; color:#5b6274; font:inherit; font-size:15px; font-weight:600; cursor:pointer; }
body main.psprice.psprice .psprice-billing-option[aria-pressed="true"] { background:#0e1325; color:#fff; }
body main.psprice.psprice .psprice-save { padding:2px 8px; border-radius:6px; background:#dcfce7; color:#15803d; font-size:12px; font-weight:700; }
body main.psprice.psprice .psprice-y { display:none; }
body main.psprice.psprice.is-annual .psprice-m { display:none; }
body main.psprice.psprice.is-annual .psprice-y { display:inline; }

/* Cartes : même départ, onglet posé sur le bord */
body main.psprice.psprice .psprice-plans { gap:18px; align-items:stretch; }
body main.psprice.psprice .psprice-plan { gap:18px; padding:48px 28px 32px; border-radius:16px; border:1px solid #e6e9f0; box-shadow:0 1px 2px rgba(16,24,40,.04), 0 12px 32px rgba(16,24,40,.06); }
body main.psprice.psprice .psprice-ribbon { position:absolute; top:-1px; left:-1px; right:-1px; height:32px; margin:0; padding:0; display:flex; align-items:center; justify-content:center; border-radius:16px 16px 0 0; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
body main.psprice.psprice .psprice-plan h2 { font-size:19px; letter-spacing:-.01em; }
body main.psprice.psprice .psprice-intro { min-height:4.5em; font-size:15px; }
body main.psprice.psprice .psprice-amount { min-height:56px; align-items:flex-end; }
body main.psprice.psprice .psprice-amount strong { font-size:46px; }
body main.psprice.psprice .psprice-billed { margin:-10px 0 0; min-height:20px; font-size:13px; color:#6b7284; }
body main.psprice.psprice .psprice-button { height:48px; align-items:center; padding:0 18px; border-radius:10px; font-size:15px; transition:background .15s, border-color .15s; }
body main.psprice.psprice .psprice-plan h3 { font-size:14px; }
body main.psprice.psprice .psprice-plan ul { font-size:14px; gap:10px; }

/* Pro : carte blanche, contour bleu, seul bouton plein */
body main.psprice.psprice .psprice-plan.psprice-pro { background:#fff; color:#0e1325; border:2px solid #2f62ee; box-shadow:0 24px 56px rgba(47,98,238,.18); }
body main.psprice.psprice .psprice-pro h2,
body main.psprice.psprice .psprice-pro h3,
body main.psprice.psprice .psprice-pro .psprice-amount strong { color:#0e1325; }
body main.psprice.psprice .psprice-pro h3 { border-top-color:#eceff5; }
body main.psprice.psprice .psprice-pro .psprice-intro,
body main.psprice.psprice .psprice-pro .psprice-amount span { color:#5b6274; }
body main.psprice.psprice .psprice-pro ul,
body main.psprice.psprice .psprice-pro li,
body main.psprice.psprice .psprice-pro .psprice-planned { color:#2a3043; }
body main.psprice.psprice .psprice-pro .psprice-ribbon { background:#2f62ee; color:#fff; top:-2px; left:-2px; right:-2px; }
body main.psprice.psprice .psprice-pro .psprice-button { background:#2f62ee; border-color:#2f62ee; color:#fff; }
body main.psprice.psprice .psprice-pro .psprice-button:hover { background:#2552d0; border-color:#2552d0; }

/* Sur mesure : noir, onglet discret, coches */
body main.psprice.psprice .psprice-custom .psprice-ribbon { background:#1d2130; color:#fff; }
body main.psprice.psprice .psprice-custom .psprice-billed { color:#9aa1b4; }
body main.psprice.psprice .psprice-custom li { position:relative; padding-left:24px; }
body main.psprice.psprice .psprice-custom li::before { content:"✓"; position:absolute; left:0; color:#8ea6ff; }
body main.psprice.psprice .psprice-custom .psprice-button:hover { background:#e9ecf3; }

@media (max-width:760px) {
  body main.psprice.psprice .psprice-billing { margin-bottom:40px; }
  body main.psprice.psprice .psprice-plans { padding-top:4px; }
}

/* ===== Tarifs premium — reste de la page ===== */
body main.psprice.psprice { background:radial-gradient(1200px 560px at 50% -160px, #e6edff 0%, rgba(230,237,255,0) 72%), #fff; }
body main.psprice.psprice .psprice-hero { max-width:980px; padding:104px 24px 28px; }
body main.psprice.psprice .psprice-hero h1 { font-size:clamp(40px,6vw,72px); line-height:1.02; letter-spacing:-0.045em; }
body main.psprice.psprice .psprice-hero > div:not(.psprice-badges) { max-width:620px; margin:0 auto; font-size:19px; line-height:1.55; color:#5b6274; }
body main.psprice.psprice .psprice-badges { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:28px; }
body main.psprice.psprice .psprice-badges span { padding:7px 14px; border:1px solid #e3e7ef; border-radius:999px; background:#fff; font-size:13px; font-weight:600; color:#344054; box-shadow:0 1px 2px rgba(16,24,40,.04); }
body main.psprice.psprice .psprice-badges span:first-child { background:#eef3ff; border-color:#d6e0ff; color:#2f62ee; }
body main.psprice.psprice .psprice-availability { margin-top:28px; font-size:13px; }

/* Option Emails : bloc bleu nuit */
body main.psprice.psprice .psprice-email { margin-top:112px; padding:56px; border-radius:20px; background:#0e1325; color:#fff; box-shadow:0 30px 70px rgba(14,19,37,.25); }
body main.psprice.psprice .psprice-email h2 { color:#fff; font-size:40px; }
body main.psprice.psprice .psprice-email-copy > p { margin:0; font-size:17px; line-height:1.6; color:#c3c9d9; }
body main.psprice.psprice .psprice-option { color:#8ea6ff; }
body main.psprice.psprice .psprice-email-features { display:flex; flex-wrap:wrap; gap:8px; }
body main.psprice.psprice .psprice-email-features span { padding:8px 12px; border:1px solid #ffffff1f; border-radius:8px; background:#ffffff0f; font-size:14px; color:#e4e8f6; }
body main.psprice.psprice .psprice-email-copy > a { align-self:flex-start; color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
body main.psprice.psprice .psprice-email-calculator { border:0; border-radius:16px; background:#fff; color:#0e1325; box-shadow:0 20px 50px rgba(0,0,0,.25); }
body main.psprice.psprice .psprice-email-calculator label { font-size:15px; font-weight:600; }
body main.psprice.psprice .psprice-email-calculator p,
body main.psprice.psprice .psprice-email-calculator small { margin:0; font-size:14px; color:#5b6274; }
body main.psprice.psprice .psprice-email-calculator .psprice-button { background:#2f62ee; border-color:#2f62ee; color:#fff; }
body main.psprice.psprice .psprice-email-calculator .psprice-button:hover { background:#2552d0; }

/* Comparatif */
body main.psprice.psprice .psprice-compare { margin-top:112px; }
body main.psprice.psprice .psprice-compare h2 { font-size:40px; line-height:1.08; }
body main.psprice.psprice .psprice-compare > p { margin:-12px 0 28px; font-size:17px; color:#5b6274; }
body main.psprice.psprice .psprice-table-wrap { border-radius:16px; box-shadow:0 12px 32px rgba(16,24,40,.06); background:#fff; }
body main.psprice.psprice .psprice-compare thead th { padding:20px 24px; font-size:16px; }
body main.psprice.psprice .psprice-compare thead th:nth-child(3),
body main.psprice.psprice .psprice-compare tbody td:nth-child(3) { background:#f5f8ff; }
body main.psprice.psprice .psprice-group th { padding:14px 24px; background:#f8f9fc; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6b7284; text-align:left; }
body main.psprice.psprice .psprice-compare tbody tr:not(.psprice-group):hover th,
body main.psprice.psprice .psprice-compare tbody tr:not(.psprice-group):hover td { background:#fafbff; }
body main.psprice.psprice .psprice-compare tbody th[scope="row"] { font-weight:500; color:#0e1325; }
body main.psprice.psprice .psprice-yes { color:#15803d; font-weight:600; }
body main.psprice.psprice .psprice-yes::before { content:"✓  "; }
body main.psprice.psprice .psprice-no { color:#c0c6d4; }
body main.psprice.psprice .psprice-opt { color:#2f62ee; font-weight:600; }

/* FAQ en cartes */
body main.psprice.psprice .psprice-faq { margin-top:112px; }
body main.psprice.psprice .psprice-faq h2 { font-size:40px; }
body main.psprice.psprice .psprice-faq details,
body main.psprice.psprice .psprice-faq details:first-of-type { margin:0 0 10px; padding:0 22px; border:1px solid #e6e9f0; border-radius:12px; background:#fff; }
body main.psprice.psprice .psprice-faq details[open] { box-shadow:0 8px 24px rgba(16,24,40,.06); }
body main.psprice.psprice .psprice-faq summary { padding:20px 0; }
body main.psprice.psprice .psprice-faq summary::after { color:#2f62ee; }

@media (max-width:760px) {
  body main.psprice.psprice .psprice-hero { padding:64px 20px 20px; }
  body main.psprice.psprice .psprice-email { margin:72px 16px 0; padding:32px 22px; border-radius:16px; }
  body main.psprice.psprice .psprice-email h2,
  body main.psprice.psprice .psprice-compare h2,
  body main.psprice.psprice .psprice-faq h2 { font-size:30px; }
  body main.psprice.psprice .psprice-compare,
  body main.psprice.psprice .psprice-faq { margin-top:72px; }
}

/* Tarifs — hero épuré : titre seul, puis la bascule */
body main.psprice.psprice .psprice-hero { padding-bottom:36px; }
body main.psprice.psprice .psprice-hero h1 { margin-bottom:0; }
