/* Page Tarifs V5, dans l'esprit de la page Pricing de Foreplay : en-tête sombre
 * et cartes de formules, feuille claire pour le comparatif ligne à ligne, puis
 * comparatif concurrents, questions et bannière de fin. S'appuie sur
 * site-vitrine-v5.css (jetons --uv-*, .plan, .plan-cta, .faq-v5). */

/* ── En-tête et formules ─────────────────────────────────────────────── */
.tp-hero{position:relative;padding:clamp(8.5rem,13vw,11rem) 0 clamp(4rem,7vw,5.5rem);background:var(--uv-card);color:var(--uv-text);overflow:hidden}
.tp-hero::before{content:"";position:absolute;inset:-30% 0 auto;height:44rem;background:radial-gradient(50% 55% at 50% 30%,oklch(.45 .12 255/.35),transparent 70%);pointer-events:none}
.tp-hero>.shell{position:relative}
.tp-hero .v5-head{margin-bottom:2rem}
.tp-hero h1{font-size:clamp(2.4rem,5vw,4rem);font-weight:600;line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.tp-hero .v5-head>p:not(.eyebrow){max-width:34rem}
.tp-hero .plan-period{margin-bottom:2.5rem}
.tp-hero .plans{grid-template-columns:repeat(3,minmax(0,1fr))}

.tp-extra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem}
.tp-extra-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.5rem 2rem;padding:1.6rem 1.6rem 1.7rem;border:1px solid var(--uv-line);border-radius:1.1rem;background:var(--uv-card)}
.tp-extra-copy{display:flex;flex-direction:column}
.tp-extra-card h3{margin-top:.35rem;font-size:1.375rem;letter-spacing:-.02em}
.tp-extra-copy>p:not(.plan-website-kicker){margin-top:.5rem;font-size:.9375rem;line-height:1.55;color:var(--uv-muted)}
.tp-extra-offer{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;margin-top:auto;padding-top:1.4rem}
.tp-extra-offer strong{font-size:1.75rem;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tp-extra-offer strong small{font-size:.8125rem;font-weight:400;letter-spacing:0;color:var(--uv-muted)}
.tp-extra-list{display:grid;align-content:start;gap:.7rem;margin:0;padding:1.1rem 0 0;border-top:1px solid var(--uv-line);list-style:none;font-size:.9375rem;color:var(--uv-text)}
.tp-extra-list li{display:flex;gap:.6rem;align-items:flex-start;line-height:1.4}
.tp-extra-list .plan-check{flex:none;margin-top:.1rem}

.tp-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 2.2rem;margin:3rem 0 0;padding:0;list-style:none;font-size:.9375rem;color:var(--uv-muted)}
.tp-facts li{display:flex;align-items:center;gap:.55rem}
.tp-facts svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tp-facts svg.fact-flag{width:1.25rem;height:.85rem;border-radius:2px;stroke:none}
.tp-hero .plan-notes{margin-top:1.4rem}

/* ── Comparatif des formules : feuille claire, en-tête collant ─────────── */
.tp-matrix{padding:0 clamp(.5rem,1.2vw,1rem);background:var(--uv-card)}
.tp-sheet{padding:clamp(4.5rem,8vw,6.5rem) 0 clamp(4rem,7vw,5.5rem);border-radius:clamp(1.4rem,3vw,2.2rem);background:var(--surface-raised);color:var(--text)}
.tp-matrix .v5-head{margin-bottom:2.5rem}
.tp-matrix .v5-head .eyebrow{color:var(--text-muted)}
/* position:relative : les libellés sr-only des cellules restent dans la zone qui défile. */
.tp-table-wrap{position:relative;max-width:64rem;margin:0 auto}
.tp-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:.9375rem}
.tp-table col:first-child,.tp-table thead th:first-child{width:34%}
.tp-table thead th{position:sticky;top:5.25rem;z-index:2;padding:1rem .5rem .9rem;background:var(--surface-raised);border-bottom:1px solid var(--line);vertical-align:bottom;text-align:center}
.tp-table thead th.tp-corner{text-align:left;font-size:.8125rem;font-weight:400;line-height:1.45;color:var(--text-muted)}
.tp-th-name{display:block;margin-bottom:.6rem;font-size:1rem;font-weight:600;letter-spacing:-.01em}
.tp-th-cta{display:inline-flex;align-items:center;justify-content:center;min-height:2.1rem;padding:.35rem .9rem;border:1px solid var(--line);border-radius:.55rem;background:var(--surface-raised);color:var(--text);font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background-color .2s,border-color .2s}
.tp-th-cta:hover{background:var(--surface-sunken)}
.tp-th-cta.is-featured{border-color:transparent;background:var(--text);color:var(--surface-raised)}
.tp-th-cta.is-featured:hover{background:color-mix(in oklch,var(--text) 85%,var(--surface-raised))}
.tp-th-cta:focus-visible,.tp-table-wrap:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.tp-table td.is-featured{background:color-mix(in oklch,var(--tone-brand-soft) 45%,var(--surface-raised))}
.tp-table thead th.is-featured{background:color-mix(in oklch,var(--tone-brand-soft) 45%,var(--surface-raised))}

.tp-group th{padding:2.2rem .25rem .8rem;border-bottom:1px solid var(--line);text-align:left}
.tp-group span{display:flex;align-items:center;gap:.7rem;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em}
.tp-group img{width:2.25rem;height:2.25rem;margin:-.2rem 0;object-fit:contain;filter:drop-shadow(0 4px 8px oklch(0 0 0/.18))}
.tp-group span.tp-group-ico{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:.6rem;background:var(--surface-inverse)}
.tp-group-ico svg{width:1.15rem;height:1.15rem;fill:none;stroke:var(--text-inverse);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tp-table tbody tr:not(.tp-group) th,.tp-table tbody td{padding:.85rem .5rem;border-bottom:1px solid var(--line-subtle)}
.tp-table tbody tr:not(.tp-group) th{padding-left:.25rem;font-weight:500;text-align:left;line-height:1.4}
.tp-table tbody th small{display:block;margin-top:.15rem;font-size:.8125rem;font-weight:400;color:var(--text-muted)}
.tp-table tbody td{text-align:center;color:var(--text);font-variant-numeric:tabular-nums}
.tp-table tbody tr:not(.tp-group):hover>*{background:var(--surface-sunken)}
.tp-table .plan-check{display:inline-block;width:1.15rem;height:1.15rem;vertical-align:middle;fill:none;stroke:var(--text);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tp-none{color:var(--text-muted)}

.tp-custom{display:grid;justify-items:center;gap:.5rem;margin-top:3.5rem;text-align:center}
.tp-custom h3{font-size:1.5rem;letter-spacing:-.02em}
.tp-custom p{color:var(--text-muted)}
.tp-custom .plan-cta{margin-top:.8rem;width:auto;background:var(--text);color:var(--surface-raised);border-color:transparent}

/* Sur cette page, le comparatif concurrents suit la feuille claire. */
.tarifs-v5 .compare-section{padding-top:clamp(5rem,9vw,7rem)}

/* ── Adaptations ─────────────────────────────────────────────────────── */
@media(max-width:1100px){
  .tp-extra{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:900px){
  .tp-hero .plans{grid-template-columns:minmax(0,1fr);max-width:30rem;margin-inline:auto}
  .tp-extra{max-width:30rem;margin-inline:auto}
  .tp-extra-card{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  /* Le tableau défile de côté ; la colonne des lignes reste visible. */
  .tp-table-wrap{overflow-x:auto;margin-inline:calc(var(--gutter,1rem)*-1);padding-inline:var(--gutter,1rem)}
  .tp-table{min-width:40rem}
  .tp-table thead th{position:static}
  .tp-table col:first-child,.tp-table thead th:first-child{width:11rem}
  .tp-table tbody tr:not(.tp-group) th,.tp-table thead th.tp-corner{position:sticky;left:0;z-index:1;background:var(--surface-raised)}
  .tp-group th{position:static}
  .tp-group span{position:sticky;left:0;width:max-content}
  .tp-facts{justify-content:flex-start;flex-direction:column;align-items:flex-start;max-width:30rem;margin-inline:auto}
}
@media(prefers-reduced-motion:reduce){.tp-th-cta{transition:none}}