/* ══════════════════════════════════════════════════════════════════
   GROOMLY — la page des tarifs
   Refaite le 16 septembre 2026, dans le meme registre que l'accueil :
   LE TABLEAU DE SERVICE. Des filets, des chiffres tabulaires, une
   couleur pour l'action et une pour ce qui est acquis.

   ══ CE QUI A CHANGE ══════════════════════════════════════════════

   1. PLUS DE HERO SOMBRE. La page s'ouvrait sur un bandeau nuit avec
      des nappes derivantes, une trame et un projecteur qui suivait le
      pointeur. Une page de prix n'a pas besoin d'atmosphere : elle a
      besoin qu'on lise les chiffres. Le haut de page est maintenant
      le meme que sur l'accueil — papier, filet, titre.

   2. LES SIX PALIERS ETAIENT SIX CARTES. Six rectangles identiques
      « titre + surface + prix » : le gabarit le plus courant du web,
      et le pire pour comparer des montants, parce que les prix ne
      sont jamais alignes. C'est un bareme : c'est donc un tableau,
      avec une colonne de prix a droite, cadree au chiffre.

   3. LE BOUTON MENAIT A L'APP STORE. Sur une page de prix, l'action
      suivante n'est pas d'installer un logiciel : c'est de reserver.
      Le calculateur envoie vers /reserver, ou le meme calcul est
      refait, avec l'adresse et la date.

   Les identifiants tr-* et la classe .tr-l sont ceux qu'attend
   tarificateur.js. Ne pas les renommer sans relire le script.
   ══════════════════════════════════════════════════════════════════ */

.tf {
  --tf-encre:    #0d0d10;
  --tf-encre-2:  #3f3f46;
  --tf-gris:     #65656e;
  --tf-gris-2:   #9a9aa3;
  --tf-filet:    #e4e4e7;
  --tf-filet-f:  #d4d4d8;
  --tf-papier:   #ffffff;
  --tf-bande:    #f6f6f4;
  --tf-nuit:     #12141c;
  --tf-rose:     #e11d48;
  --tf-rose-2:   #be123c;
  --tf-vert:     #0b6b5b;
  --tf-vert-2:   #08594b;
  --tf-vert-pale:#eef6f3;
  --tf-sortie:   cubic-bezier(.16, 1, .3, 1);
  --tf-max:      1160px;
}

body.tf-page { background: var(--tf-papier); color: var(--tf-encre); }
.tf ::selection { background: #fff1f3; color: var(--tf-encre); }

.tf-env { width: 100%; max-width: var(--tf-max); margin: 0 auto; padding: 0 24px; }
.tf b, .tf th, .tf td { font-variant-numeric: tabular-nums; }

.tf-micro {
  margin: 0; font-size: .7rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--tf-gris-2);
}
.tf-h2 {
  margin: 14px 0 0;
  font-size: clamp(1.7rem, 1.15rem + 1.9vw, 2.4rem);
  line-height: 1.14; font-weight: 800; letter-spacing: -.035em;
  color: var(--tf-encre); max-width: 22ch;
}
.tf-intro { margin: 16px 0 0; font-size: 1.02rem; line-height: 1.62; color: var(--tf-gris); max-width: 62ch; }

.tf-sect { padding: 72px 0; border-top: 1px solid var(--tf-filet); }
.tf-sect-bande { background: var(--tf-bande); }
@media (min-width: 900px) { .tf-sect { padding: 96px 0; } }

/* ── Les boutons ───────────────────────────────────────────────── */
.tf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border: 1px solid transparent; border-radius: 10px;
  font: inherit; font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  cursor: pointer; text-decoration: none;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.tf-btn svg { width: 18px; height: 18px; flex: none; }
.tf-btn-plein { background: var(--tf-rose); color: #fff; }
.tf-btn-plein:hover { background: var(--tf-rose-2); }
.tf-btn-ligne { background: var(--tf-papier); color: var(--tf-encre); border-color: var(--tf-filet-f); }
.tf-btn-ligne:hover { border-color: var(--tf-encre); }
.tf-btn-blanc { background: #fff; color: var(--tf-nuit); }
.tf-btn-blanc:hover { background: #ededf0; }
.tf-btn:focus-visible { outline: 2px solid var(--tf-rose); outline-offset: 3px; }

/* ── Le haut de page ───────────────────────────────────────────── */
.tf-haut { padding: 44px 0 56px; }
@media (min-width: 900px) { .tf-haut { padding: 60px 0 72px; } }
.tf-fil { margin: 0 0 20px; font-size: .82rem; color: var(--tf-gris-2); }
.tf-fil a { color: var(--tf-gris); text-decoration: none; }
.tf-fil a:hover { color: var(--tf-encre); text-decoration: underline; text-underline-offset: 3px; }
.tf-h1 {
  margin: 0;
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.3rem);
  line-height: 1.05; font-weight: 800; letter-spacing: -.045em;
  color: var(--tf-encre); max-width: 16ch;
}
.tf-h1 em { font-style: normal; color: var(--tf-gris); }
.tf-sous { margin: 22px 0 0; font-size: 1.08rem; line-height: 1.6; color: var(--tf-encre-2); max-width: 54ch; }

.tf-faits { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 0; max-width: 620px; }
.tf-fait {
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 0; border-top: 1px solid var(--tf-filet);
  font-size: .95rem; line-height: 1.5; color: var(--tf-encre-2);
}
.tf-fait:last-child { border-bottom: 1px solid var(--tf-filet); }
.tf-fait b { color: var(--tf-encre); font-weight: 700; }
.tf-fait svg { width: 15px; height: 15px; flex: none; color: var(--tf-vert); transform: translateY(2px); }

/* ══ LE CALCULATEUR ════════════════════════════════════════════════ */
.tf-outil {
  margin-top: 40px;
  border: 1px solid var(--tf-filet-f); border-radius: 14px;
  overflow: hidden; background: var(--tf-papier);
}
.tf-ecran {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 20px 24px; background: var(--tf-bande);
  border-bottom: 1px solid var(--tf-filet);
}
.tf-quoi { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--tf-gris-2); }
.tf-total { margin: 5px 0 0; font-size: 2.4rem; line-height: 1; font-weight: 800;
  letter-spacing: -.05em; color: var(--tf-encre); }
.tf-duree { margin: 0; font-size: .88rem; color: var(--tf-gris); }
.tf-devis { margin: 10px 0 0; flex-basis: 100%; font-size: .82rem; line-height: 1.5; color: var(--tf-gris); }
.tf-devis[hidden] { display: none; }

.tf-champ { padding: 22px 24px; border-bottom: 1px solid var(--tf-filet); }
.tf-champ:last-of-type { border-bottom: 0; }
.tf-champ-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tf-legende {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--tf-gris-2);
}
.tf-valeur { font-size: 1.5rem; font-weight: 800; letter-spacing: -.04em; color: var(--tf-encre); }
.tf-valeur small { font-size: .9rem; font-weight: 700; color: var(--tf-gris); }

/* Le curseur : une regle. Poignee de 28 px — en dessous, on la rate
   au pouce. */
.tf-curseur {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; margin: 18px 0 0; background: none; cursor: pointer;
}
.tf-curseur::-webkit-slider-runnable-track { height: 3px; border-radius: 99px; background: var(--tf-filet); }
.tf-curseur::-moz-range-track { height: 3px; border-radius: 99px; background: var(--tf-filet); }
.tf-curseur::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -12.5px;
  border-radius: 9px; background: var(--tf-encre); border: 0;
  box-shadow: 0 2px 6px -2px rgba(13,13,16,.5);
}
.tf-curseur::-moz-range-thumb { width: 28px; height: 28px; border-radius: 9px; background: var(--tf-encre); border: 0; }
.tf-curseur:focus-visible { outline: 2px solid var(--tf-rose); outline-offset: 4px; border-radius: 10px; }
.tf-bornes { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 8px; font-size: .78rem; color: var(--tf-gris-2); }
.tf-palier { font-weight: 700; color: var(--tf-encre-2); text-align: center; }

.tf-inclus-l { margin: 10px 0 0; font-size: .92rem; line-height: 1.55; color: var(--tf-gris); }
.tf-inclus-l b { color: var(--tf-vert-2); }

.tf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tf-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--tf-filet); border-radius: 9px;
  font-size: .88rem; font-weight: 600; color: var(--tf-encre-2);
  cursor: pointer; transition: border-color .13s ease, background .13s ease, color .13s ease;
}
.tf-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.tf-chip:hover { border-color: var(--tf-filet-f); }
.tf-chip:has(input:checked) { border-color: var(--tf-encre); background: var(--tf-encre); color: #fff; }
.tf-chip:has(input:focus-visible) { outline: 2px solid var(--tf-rose); outline-offset: 2px; }
.tf-sup { font-weight: 700; color: var(--tf-gris-2); }
.tf-chip:has(input:checked) .tf-sup { color: rgba(255,255,255,.7); }

.tf-lits { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.tf-lits[hidden] { display: none; }
.tf-lit {
  flex: 1; min-width: 150px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 14px; min-height: 52px;
  border: 1px solid var(--tf-filet); border-radius: 9px; background: var(--tf-bande);
  font-size: .9rem; font-weight: 600; color: var(--tf-encre-2);
}
.tf-lit input {
  width: 68px; min-height: 40px; padding: 0 8px; text-align: center;
  border: 1px solid var(--tf-filet-f); border-radius: 8px; background: var(--tf-papier);
  font: inherit; font-size: 1rem; color: var(--tf-encre);
}
.tf-lit input:focus { outline: none; border-color: var(--tf-rose); }

/* Le detail, injecte par tarificateur.js sous forme de .tr-l */
.tf-recap { padding: 6px 24px 0; }
.tr-l {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 11px 0; border-bottom: 1px solid var(--tf-filet);
  font-size: .9rem; color: var(--tf-gris);
}
.tr-l:last-child { border-bottom: 0; }
.tr-l b { font-weight: 700; color: var(--tf-encre); }

.tf-pied-outil { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.tf-cta { width: 100%; }
@media (min-width: 560px) { .tf-cta { width: auto; align-self: flex-start; } }
.tf-mention { margin: 0; font-size: .78rem; line-height: 1.55; color: var(--tf-gris-2); }
/* La premiere phrase dit que le travail deja fait ne sera pas refait :
   elle doit se lire, pas se fondre dans la mention legale. */
.tf-mention b { color: var(--tf-encre); font-weight: 700; font-size: .82rem; }

/* ══ LE BAREME ═════════════════════════════════════════════════════ */
.tf-tab { width: 100%; border-collapse: collapse; margin-top: 40px; }
.tf-tab caption { text-align: left; font-size: .8rem; color: var(--tf-gris); padding-bottom: 12px; }
.tf-tab th {
  text-align: left; padding: 0 0 12px;
  font-size: .7rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--tf-gris-2);
  border-bottom: 1px solid var(--tf-encre);
}
.tf-tab th:last-child, .tf-tab td:last-child { text-align: right; }
.tf-tab td { padding: 16px 0; border-bottom: 1px solid var(--tf-filet); font-size: 1rem; color: var(--tf-encre-2); }
.tf-tab td:first-child { font-weight: 700; color: var(--tf-encre); }
.tf-tab td:nth-child(2), .tf-tab td:nth-child(3) { color: var(--tf-gris); font-size: .93rem; }
.tf-tab td:last-child { font-weight: 800; color: var(--tf-encre); font-size: 1.08rem; }
@media (max-width: 680px) {
  .tf-tab th:nth-child(2), .tf-tab td:nth-child(2) { display: none; }
}

/* ══ CE QUI EST COMPRIS ════════════════════════════════════════════ */
.tf-pieces {
  display: grid; gap: 1px; margin-top: 40px; background: var(--tf-filet);
  border-top: 1px solid var(--tf-encre); border-bottom: 1px solid var(--tf-filet);
}
@media (min-width: 620px) { .tf-pieces { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .tf-pieces { grid-template-columns: repeat(4, 1fr); } }
.tf-piece { background: var(--tf-papier); padding: 24px 22px; }
.tf-piece h3 { margin: 0; font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; }
.tf-piece p { margin: 9px 0 0; font-size: .92rem; line-height: 1.55; color: var(--tf-gris); }

/* ══ LES OPTIONS ═══════════════════════════════════════════════════ */
.tf-opts { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--tf-encre); }
.tf-opt {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 18px;
  padding: 20px 0; border-bottom: 1px solid var(--tf-filet);
}
.tf-opt b { grid-column: 1; grid-row: 1; font-size: 1.04rem; font-weight: 700; color: var(--tf-encre); }
.tf-opt-prix { grid-column: 2; grid-row: 1; font-size: 1.04rem; font-weight: 800; color: var(--tf-encre); }
.tf-opt p { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: .93rem; line-height: 1.55; color: var(--tf-gris); }
@media (min-width: 820px) {
  .tf-opt { grid-template-columns: 260px 1fr auto; }
  .tf-opt p { grid-column: 2; grid-row: 1; }
  .tf-opt-prix { grid-column: 3; grid-row: 1; }
}
.tf-note { margin: 26px 0 0; padding: 18px 20px;
  border: 1px solid var(--tf-filet); border-radius: 12px; background: var(--tf-bande);
  font-size: .88rem; line-height: 1.65; color: var(--tf-encre-2); }
.tf-note b { color: var(--tf-encre); font-weight: 700; }

/* ══ LES QUESTIONS ═════════════════════════════════════════════════ */
.tf-faq { margin-top: 40px; border-top: 1px solid var(--tf-encre); max-width: 900px; }
.tf-q { border-bottom: 1px solid var(--tf-filet); }
.tf-q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; color: var(--tf-encre);
}
.tf-q summary::-webkit-details-marker { display: none; }
.tf-q summary:focus-visible { outline: 2px solid var(--tf-rose); outline-offset: 3px; }
.tf-chev { flex: none; width: 20px; height: 20px; color: var(--tf-gris); transition: transform .18s ease; }
.tf-q[open] .tf-chev { transform: rotate(180deg); }
.tf-q > div { padding: 0 0 22px; max-width: 72ch; }
.tf-q p { margin: 0; font-size: .96rem; line-height: 1.65; color: var(--tf-gris); }
.tf-faq-plus { margin-top: 26px; font-size: .92rem; }
.tf-faq-plus a { color: var(--tf-encre); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ══ L'APPEL FINAL ═════════════════════════════════════════════════ */
.tf-fin { background: var(--tf-nuit); color: #fff; padding: 80px 0; }
.tf-fin h2 { margin: 0; font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.7rem);
  line-height: 1.1; font-weight: 800; letter-spacing: -.04em; max-width: 20ch; }
.tf-fin p { margin: 18px 0 0; font-size: 1.02rem; line-height: 1.6; color: #a8a8b2; max-width: 52ch; }
.tf-fin-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.tf-fin .tf-btn-ligne { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.tf-fin .tf-btn-ligne:hover { border-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .tf *, .tf *::before, .tf *::after { transition-duration: .01ms !important; }
}