/* ============================================================================
   PAGE TARIFS (/tarifs, views/landing/tarifs.php)

   Servie APRÈS landing.css : les tokens `--lp-*` et les composants (`.lp-plan`,
   `.lp-faq`, `.lp-btn`…) viennent de là, ce fichier n'ajoute que le comparatif.
   ========================================================================= */
.tf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tf-head { padding-block: 56px 0; }
.tf-head .lp-head { max-width: 46rem; }
.tf-hero { background: linear-gradient(180deg, var(--lp-paper) 0%, var(--lp-mist) 100%); padding-bottom: 8px; }
.tf-plans { background: var(--lp-mist); padding-block: 0 var(--lp-section-y); }
.tf-plans .lp-price-switch { margin-top: 0; }
.tf-plans .lp-plans { margin-top: 40px; }
.tf-plans .lp-plan__flag { top: 0; }

.tf-cmp { padding-block: var(--lp-section-y); background: var(--lp-paper); }
.tf-cmp__head { max-width: 46rem; margin-bottom: 32px; }
.tf-cmp__head > * + * { margin-top: 12px; }
.tf-cmp__scroll {
  position: relative;
  overflow-x: auto; border: 1px solid var(--lp-line); border-radius: var(--lp-r-xl);
  background: var(--lp-paper);
}
.tf-cmp__scroll:focus-visible { outline: 3px solid var(--lp-coral-ink); outline-offset: 2px; }
.tf-cmp table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-size: var(--lp-fs-sm); font-variant-numeric: tabular-nums; }
.tf-cmp th, .tf-cmp td { padding: 12px 16px; border-bottom: 1px solid var(--lp-line); text-align: center; vertical-align: middle; color: var(--lp-ink-2); }
.tf-cmp thead th { background: var(--lp-paper); vertical-align: bottom; padding-block: 20px 14px; border-bottom: 1px solid var(--lp-line-strong); }
.tf-cmp tbody th[scope="row"] { text-align: left; font-weight: 500; color: var(--lp-ink); }
.tf-cmp thead th:first-child, .tf-cmp tbody th[scope="row"] {
  position: sticky; left: 0; background: var(--lp-paper); z-index: var(--tf-z-col); text-align: left;
  min-width: 190px; box-shadow: 1px 0 0 var(--lp-line);
}
.tf-cmp .tf-pname { display: block; font-family: var(--lp-font-display); font-size: var(--lp-fs-h4); font-weight: 800; color: var(--lp-ink); }
.tf-cmp .tf-pprice { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--lp-ink-3); }
.tf-cmp .tf-flag { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: var(--lp-coral-wash); color: var(--lp-coral-ink); font-size: var(--lp-fs-label); font-weight: 700; }
.tf-cmp .is-featured { background: var(--lp-coral-wash); }
.tf-cmp thead th.is-featured { box-shadow: inset 0 3px 0 var(--lp-coral-ink); }
.tf-cmp tbody tr.tf-group th[scope="row"] {
  position: sticky; left: 0; background: var(--lp-mist); text-align: left; font-weight: 800;
  font-family: var(--lp-font-display); font-size: var(--lp-fs-sm); font-weight: 800; color: var(--lp-ink);
  padding-block: 10px; border-bottom: 1px solid var(--lp-line);
}
.tf-cmp tbody tr.tf-group td { background: var(--lp-mist); border-bottom: 1px solid var(--lp-line); }
.tf-gname { display: none; }
.tf-cmp__frame { position: relative; --tf-z-col: 2; --tf-z-fade: 3; }
.tf-cmp tbody tr:last-child th, .tf-cmp tbody tr:last-child td { border-bottom: 0; }
.tf-yes { display: inline-grid; place-items: center; color: var(--lp-ok-ink); }
.tf-yes svg { width: 20px; height: 20px; }
.tf-no { color: var(--lp-ink-3); }
.tf-cmp .tf-note { margin-top: 12px; font-size: var(--lp-fs-sm); color: var(--lp-ink-3); }

.tf-faq { background: var(--lp-mist); }

@media (max-width: 767px) {
  .tf-cmp table { min-width: 640px; }
  .tf-cmp thead th:first-child, .tf-cmp tbody th[scope="row"] { min-width: 150px; max-width: 150px; font-size: 14px; padding-inline: 12px; }
  .tf-cmp th, .tf-cmp td { padding: 10px 12px; }
}

/* Téléphone : chaque ligne de groupe répète les noms d'offres au-dessus de ses
   colonnes (un thead ne colle pas dans un conteneur à défilement horizontal) ;
   deux colonnes d'offre tiennent exactement dans la fenêtre, un fondu signale la suite. */
@media (max-width: 600px) {
  .tf-cmp table { min-width: 570px; }
  .tf-cmp thead th:first-child, .tf-cmp tbody th[scope="row"] { min-width: 130px; max-width: 130px; width: 130px; }
  .tf-cmp th, .tf-cmp td { padding: 10px 8px; }
  .tf-gname { display: block; font-size: 12px; font-weight: 700; color: var(--lp-ink); line-height: 1.2; }
  .tf-cmp tbody tr.tf-group th[scope="row"], .tf-cmp tbody tr.tf-group td { padding-block: 8px; }
  .tf-cmp tbody tr.tf-group td.is-featured { background: var(--lp-coral-wash); }
  .tf-cmp__frame::after { content: ""; position: absolute; top: 1px; bottom: 1px; right: 1px; width: 22px; border-radius: 0 var(--lp-r-xl) var(--lp-r-xl) 0; background: linear-gradient(90deg, rgba(255,255,255,0), var(--lp-paper) 85%); pointer-events: none; z-index: var(--tf-z-fade); }
}