/* Servio — page Tarifs : les offres, puis ce que chacune contient, ligne par ligne. */
/* Extension de home.css et de vitrine.css : mêmes jetons. Les cartes reprennent celles de l'accueil (storyboard.css). */

/* ---------- Annuel / Mensuel ---------- */
.tf-root[data-billing=annual] .tf-monthly,.tf-root[data-billing=monthly] .tf-annual{display:none}
.tf-billing{display:flex;width:fit-content;gap:4px;margin:0 auto 40px;padding:5px;border-radius:var(--pill);background:var(--paper);border:1px solid var(--line-light)}
.tf-billing button{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 24px;border-radius:var(--pill);color:var(--on-light-dim);font:650 15px var(--body);transition:background .18s,color .18s}
.tf-billing button[aria-pressed=true]{background:var(--ink-2);color:var(--on-dark)}
.tf-billing i{padding:3px 9px;border-radius:var(--pill);background:rgba(255,122,69,.16);color:var(--accent-ink);font-style:normal;font-size:12px;font-weight:700}
.tf-billing button[aria-pressed=true] i{background:var(--accent);color:#fff}

/* ---------- Les offres ---------- */
.tf-offers{padding-block:clamp(48px,5vw,72px) clamp(56px,6vw,84px)}
.tf-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.tf-plan{position:relative;display:flex;flex-direction:column;padding:30px 28px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line-light)}
.tf-plan h3{font-size:26px}
.tf-plan>p{margin-top:6px;font-size:14.5px;color:var(--on-light-dim)}
.tf-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:22px;padding-bottom:22px;border-bottom:1px solid var(--line-light)}
.tf-price b{font:800 40px var(--display);letter-spacing:-.04em}
.tf-price s{order:-1;flex-basis:100%;font-size:15px;font-weight:600;color:var(--on-light-dim)}
/* Au mois, le prix barré garde sa place : les cartes ne bougent pas d'un choix à l'autre. */
.tf-root[data-billing=monthly] .tf-price s{display:block;visibility:hidden}
.tf-price>span{flex-basis:100%;font-size:13px;color:var(--on-light-dim)}
.tf-plan.is-custom .tf-price{padding-top:29px}
.tf-plan ul{list-style:none;margin:20px 0 28px;padding:0;display:grid;gap:10px;font-size:14.5px}
.tf-plan li{position:relative;padding-left:24px}
.tf-plan li:before{content:'';position:absolute;left:3px;top:6px;width:6px;height:10px;border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.tf-plan .btn{margin-top:auto}
.tf-plan.is-main{background:var(--ink-2);color:var(--on-dark);border-color:var(--ink-2)}
.tf-plan.is-main>p,.tf-plan.is-main .tf-price :is(span,s){color:var(--on-dark-dim)}
.tf-plan.is-main .tf-price{border-color:var(--line-dark)}
.tf-plan.is-main li:before{border-color:var(--accent)}
.tf-flag{position:absolute;top:-12px;right:24px;padding:5px 12px;border-radius:var(--pill);background:var(--accent);color:#fff;font-size:12px;font-weight:700}

/* ---------- Le tableau ---------- */
/* overflow:clip arrondit les angles sans créer de zone de défilement : l'en-tête reste collé sous le menu. */
.tf-grid{border:1px solid var(--line-light);border-radius:var(--r-lg);background:var(--paper);box-shadow:0 18px 50px -30px rgba(18,38,31,.35);overflow:clip}
.tf-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.tf-table col.tf-col{width:176px}
.tf-table th,.tf-table td{padding:0;text-align:left;vertical-align:middle}
.tf-table thead th{position:sticky;top:94px;z-index:2;height:84px;background:var(--paper);border-bottom:1px solid var(--line-light);text-align:center;font-weight:400}
.tf-table thead th.tf-crit{padding-left:24px;text-align:left;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--on-light-dim)}
.tf-h-name{display:block;font:800 19px var(--display);letter-spacing:-.02em;color:var(--on-light)}
.tf-h-price{display:block;margin-top:3px;font-size:13px;color:var(--on-light-dim)}
.tf-h-price b{font-weight:700;color:var(--on-light)}
.tf-table thead th.is-main{background:var(--ink-2);border-bottom-color:var(--ink-2)}
.tf-table thead th.is-main .tf-h-name,.tf-table thead th.is-main .tf-h-price b{color:#fff}
.tf-table thead th.is-main .tf-h-price{color:var(--on-dark-dim)}
.tf-cat th{padding:13px 24px;background:var(--cream);border-top:1px solid var(--line-light);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.tf-table tbody:first-of-type .tf-cat th{border-top:0}
.tf-row th{padding:15px 24px;border-top:1px solid var(--line-light);font-size:15px;font-weight:500;line-height:1.5;color:var(--on-light)}
.tf-row th small{display:block;margin-top:3px;font-size:13px;font-weight:400;color:var(--on-light-dim)}
.tf-row td{border-top:1px solid var(--line-light);border-left:1px solid var(--line-light);text-align:center;font-size:14px;color:var(--on-light-dim)}
.tf-row td.is-main{background:#f3f5f1}
.tf-row:hover th,.tf-row:hover td{background:#fbfaf6}
.tf-row:hover td.is-main{background:#edf0ea}

/* Comprise : une coche. Non comprise : un tiret discret. Tout autre cas s'écrit en toutes lettres. */
.tf-yes{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,122,69,.16);color:var(--accent-ink);vertical-align:middle}
.tf-yes svg{width:14px;height:14px;stroke-width:2.6}
.is-main .tf-yes{background:var(--accent);color:#fff}
.tf-no{display:inline-block;width:14px;height:2px;border-radius:2px;background:#d2d6cc;vertical-align:middle}
.tf-word{font-weight:650;color:var(--on-light)}

/* Sous le tableau : l'offre sur mesure, qui n'a pas de colonne. */
.tf-custom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:22px 24px;border-top:1px solid var(--line-light);background:var(--cream)}
.tf-custom p{flex:1 1 420px;max-width:760px;font-size:15px;line-height:1.6;color:var(--on-light-dim)}
.tf-custom b{color:var(--on-light);font-weight:650}
.tf-notes{margin-top:24px;max-width:860px;color:var(--on-light-dim)}
.tf-notes a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.tf-head h2{max-width:22ch}

@media(max-width:1180px){
  .tf-plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tf-table col.tf-col{width:136px}
}
@media(max-width:760px){
  .tf-billing{margin-bottom:28px}
  .tf-plans{grid-template-columns:minmax(0,1fr);gap:16px}
  .tf-plan{padding:24px 22px}
  .tf-plan h3{font-size:23px}
  .tf-price{margin-top:16px;padding-bottom:16px}
  .tf-price b{font-size:34px}
  .tf-plan.is-custom .tf-price{padding-top:0}
  .tf-plan ul{margin:16px 0 22px;gap:8px}
  .tf-table col.tf-col{width:54px}
  .tf-table thead th{top:76px;height:58px}
  .tf-table thead th.tf-crit{padding-left:14px;font-size:10.5px}
  .tf-h-name{font:700 11px var(--body);letter-spacing:0}
  .tf-h-price{margin-top:1px;font-size:12px}
  .tf-h-price small{display:none}
  .tf-cat th{padding:11px 14px;font-size:11px}
  .tf-row th{padding:12px 8px 12px 14px;font-size:14px;line-height:1.45}
  .tf-row th small{font-size:12.5px}
  .tf-row td{font-size:10.5px}
  .tf-yes{width:22px;height:22px}
  .tf-yes svg{width:12px;height:12px}
  .tf-custom{padding:18px 14px}
  .tf-custom .btn{width:100%}
}