/* =============================================================================
   Camabe — la page Tarifs (25/09/2026) : site-vitrine/tarifs.php.
   Les quatre formules (Plus, Pro et Max regroupees sous « le dossier vivant »),
   le tableau des fonctions, le calculateur du prix du cabinet, les regles.
   Variables du socle seulement, jour et nuit.
   ========================================================================== */

.tf-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Les formules ------------------------------------------------------------ */
.tf-formules { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 16px; align-items: end; margin-top: 2.4rem; }
.tf-vivant { display: grid; gap: 10px; }
.tf-vivant__titre { position: relative; margin: 0; padding: 0 0 10px; color: var(--accent); font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-align: center; text-transform: uppercase; }
.tf-vivant__titre::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 10px; border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-bottom: 0; border-radius: 8px 8px 0 0; }
.tf-vivant__cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tf-formule { display: flex; flex-direction: column; height: 100%; padding: 26px 24px; border: 1px solid var(--trait); border-radius: 16px; background: var(--carte); box-shadow: var(--ombre); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; }
.tf-formule h3 { margin: 0; font-size: 1.25rem; }
.tf-formule__devise { margin: 2px 0 18px; color: var(--encre-douce); font-size: .9rem; }
.tf-vivant .tf-formule__devise { min-height: 3.4em; }
.tf-formule--repere { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), var(--ombre); }
.tf-formule--basique { background: var(--papier-creux); box-shadow: none; }
.tf-prix { display: flex; flex-direction: column; gap: 4px; margin: 0 0 18px; }
.tf-prix__valeur { font-family: var(--serif); font-size: 2.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.tf-prix__unite { color: var(--encre-douce); font-size: .8rem; line-height: 1.35; }
.tf-enveloppe { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--accent-pale); color: var(--encre); font-size: .86rem; line-height: 1.4; }
.tf-enveloppe strong { color: var(--accent); }
.tf-enveloppe--aucune { background: transparent; border: 1px dashed var(--trait-fort); color: var(--encre-douce); }
.tf-formule__pour { margin: auto 0 0; color: var(--encre-douce); font-size: .88rem; line-height: 1.5; }
.tf-note { max-width: 78ch; margin-top: 1.4rem; font-size: .88rem; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tf-formule:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(18,23,31,.05), 0 22px 48px rgba(18,23,31,.12); }
}

/* ---- Le tableau des fonctions ------------------------------------------------ */
.tf-table-cadre { margin-top: 2rem; overflow-x: auto; border: 1px solid var(--trait); border-radius: 14px; background: var(--carte); box-shadow: var(--ombre); }
.tf-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tf-table th, .tf-table td { padding: 12px 16px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.tf-table thead th { color: var(--encre); font-size: .85rem; font-weight: 700; text-align: center; background: var(--papier-creux); }
.tf-table tbody th { font-weight: 400; line-height: 1.45; text-align: left; }
.tf-table td { width: 13%; color: var(--accent); text-align: center; }
.tf-table td svg { width: 20px; height: 20px; vertical-align: middle; }
.tf-table .tf-col-vivant { background: color-mix(in srgb, var(--accent-pale) 45%, transparent); }
.tf-table thead .tf-col-vivant { background: color-mix(in srgb, var(--accent-pale) 80%, var(--papier-creux)); }
.tf-non { color: var(--encre-douce); }
.tf-table tbody tr:last-child th, .tf-table tbody tr:last-child td { border-bottom: 0; }
.tf-table__enveloppe th { font-weight: 600 !important; }
.tf-table__enveloppe td strong { display: block; color: var(--accent); font-size: .92rem; }
.tf-table__enveloppe td small { color: var(--encre-douce); font-size: .76rem; }

/* ---- Le calculateur ---------------------------------------------------------- */
.tf-calcul-duo { align-items: start; }
.tf-calcul { padding: 26px; border: 1px solid var(--trait); border-radius: 18px; background: var(--carte); box-shadow: var(--ombre); }
.tf-calcul__formules { margin: 0 0 20px; padding: 0; border: 0; }
.tf-segments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 4px; border-radius: 12px; background: var(--papier-creux); }
.tf-calcul__formules legend { margin-bottom: 8px; padding: 0; color: var(--encre-douce); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.tf-choix { position: relative; }
.tf-choix input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tf-choix span { display: block; padding: 9px 6px; border-radius: 9px; color: var(--encre-douce); font-size: .9rem; font-weight: 600; text-align: center; transition: background .2s ease, color .2s ease; }
.tf-choix input:checked + span { background: var(--carte); color: var(--accent); box-shadow: 0 1px 3px rgba(18,23,31,.12); }
.tf-choix input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.tf-calcul__sieges { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.tf-calcul__sieges label { font-weight: 600; }
.tf-compteur { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--trait-fort); border-radius: 12px; }
.tf-compteur button { width: 44px; height: 44px; border: 0; background: var(--papier-creux); color: var(--encre); font: inherit; font-size: 1.3rem; cursor: pointer; }
.tf-compteur button:hover { background: var(--accent-pale); color: var(--accent); }
.tf-compteur input { width: 64px; height: 44px; border: 0; border-inline: 1px solid var(--trait); background: var(--carte); color: var(--encre); font: inherit; font-size: 1.1rem; font-weight: 600; text-align: center; -moz-appearance: textfield; }
.tf-compteur input::-webkit-inner-spin-button, .tf-compteur input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tf-calcul__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; padding-top: 18px; border-top: 1px solid var(--trait); }
.tf-calcul__montant { font-family: var(--serif); font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.tf-calcul__unite { color: var(--encre-douce); }
.tf-calcul__detail { margin: 6px 0 16px; color: var(--encre-douce); font-size: .92rem; }
.tf-grille { margin-bottom: 12px; border: 1px solid var(--trait); border-radius: 12px; }
.tf-grille summary { padding: 11px 14px; color: var(--accent); font-weight: 600; cursor: pointer; }
.tf-grille[open] summary { border-bottom: 1px solid var(--trait); }
.tf-table--grille { font-size: .86rem; }
.tf-table--grille th, .tf-table--grille td { padding: 8px 10px; color: var(--encre); font-variant-numeric: tabular-nums; }
.tf-table--grille td { text-align: right; }
.tf-calcul__mention { margin: 0; color: var(--encre-douce); font-size: .8rem; }

/* ---- Les regles -------------------------------------------------------------- */
.tf-regles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 2rem; }
.tf-regles article { padding: 22px 22px 20px; border: 1px solid var(--trait); border-radius: 14px; background: var(--carte); }
.tf-regles h3 { margin: 0 0 8px; font-size: 1.05rem; }
.tf-regles p { margin: 0; color: var(--encre-douce); font-size: .92rem; line-height: 1.55; }

@media (max-width: 1000px) {
  .tf-formules { grid-template-columns: minmax(0, 1fr); }
  .tf-formule--basique { order: 2; }
  .tf-regles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .tf-vivant__cartes { grid-template-columns: minmax(0, 1fr); }
  .tf-vivant .tf-formule__devise { min-height: 0; }
  .tf-regles { grid-template-columns: minmax(0, 1fr); }
  .tf-table th, .tf-table td { padding: 10px 8px; }
  .tf-table tbody th { font-size: .84rem; }
  .tf-table td { width: auto; }
  .tf-table thead th { font-size: .74rem; }
}
/* Telephone : chaque fonction sur toute la largeur, puis ses quatre coches, chacune nommee. */
@media (max-width: 640px) {
  .tf-table--fonctions thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tf-table--fonctions tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--trait); }
  .tf-table--fonctions tbody tr:last-child { border-bottom: 0; }
  .tf-table--fonctions tbody th { grid-column: 1 / -1; padding: 12px 14px 4px; border: 0; font-size: .9rem; }
  .tf-table--fonctions tbody td { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 12px; border: 0; }
  .tf-table--fonctions tbody td::before { content: attr(data-f); color: var(--encre-douce); font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
  .tf-table--fonctions .tf-col-vivant { background: transparent; }
  .tf-table__enveloppe td strong { font-size: .84rem; }
}
@media (max-width: 480px) {
  .tf-calcul { padding: 18px; }
  .tf-segments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf-calcul__montant { font-size: 2.4rem; }
}