/* Tarifs — sections propres à la page. Le style commun est dans papier.css. */

/* fil d'Ariane (même rendu que les autres pages) */
.ap-crumb { display: flex; gap: 8px; font-size: 14px; color: var(--ink-3); }
.ap-crumb a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.ap-crumb a:hover { color: var(--red); }

/* ——— en-tête ——— */
.tf-hero { padding: clamp(24px, 3.5vw, 48px) 0 clamp(56px, 7vw, 96px); }
.tf-hero-g { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 16px clamp(32px, 5vw, 72px); align-items: end; }
.tf-hero h1 { font-size: clamp(32px, 3.9vw, 52px); line-height: 1.1; }
.tf-hero h1 span { display: block; }
.tf-hero h1 em { font-style: normal; color: var(--red); }
.tf-lede { max-width: 42ch; font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.6; color: var(--ink-2); }

/* ——— trois façons de compter (onglets) ——— */
.tf-modes { margin-top: clamp(28px, 3.5vw, 44px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tf-modes button { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 2px 16px; align-items: center; padding: 18px 20px; border: 1px solid var(--line); border-radius: 20px; background: #fff; color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: border-color 0.2s, box-shadow 0.3s, transform 0.3s var(--ease); }
.tf-modes button:hover { transform: translateY(-2px); border-color: #d9cfbf; }
.tf-modes button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.tf-modes button[aria-selected="true"] { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 22px 40px -30px rgba(178, 58, 54, 0.6); }
/* petite pointe vers la grille, sous l'onglet choisi */
.tf-modes button[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; border-right: 1px solid var(--red); border-bottom: 1px solid var(--red); background: #fff; transform: translateX(-50%) rotate(45deg); box-shadow: 1px 1px 0 var(--red); }
.tf-zi { grid-row: 1 / -1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; border: 1.5px solid var(--red); font-family: var(--cjk); font-weight: 700; line-height: 1; color: var(--red); transition: background 0.25s, color 0.25s, transform 0.35s var(--ease); }
.tf-zi[data-n="2"] { font-size: 20px; }
.tf-zi[data-n="3"] { font-size: 15px; }
.tf-modes button[aria-selected="true"] .tf-zi { background: var(--red); color: var(--paper); transform: rotate(-6deg); }
.tf-modes b { font-size: 17px; line-height: 1.3; }
.tf-modes small { font-size: 13.5px; color: var(--ink-3); }
.tf-des { font-size: 13.5px; color: var(--ink-3); }
.tf-des strong { font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ——— grille tarifaire et colonne de côté ——— */
.tf-g { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.8fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.tf-feuille { position: relative; overflow: clip; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: 6px 6px 18px 18px; background: #fffdf8; box-shadow: 0 30px 60px -44px rgba(29, 28, 27, 0.55); }
.tf-feuille:focus { outline: none; }
.tf-fh { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1.5px dashed var(--line); }
.tf-fh-t { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }
.tf-fh h2 { margin-top: 6px; font-size: clamp(22px, 2.2vw, 28px); }
.tf-fh-u { flex: none; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.tf-opt { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }

/* lignes : nom ……… prix, comme une grille imprimée */
.tf-l { list-style: none; margin: 14px 0 0; padding: 0; }
.tf-l li { border-bottom: 1px solid var(--paper-3); animation: tf-in 0.4s var(--ease) both; animation-delay: calc(var(--i) * 35ms); }
@keyframes tf-in { from { opacity: 0; transform: translateY(8px); } }
.tf-l a { display: grid; grid-template-columns: auto minmax(16px, 1fr) auto auto; align-items: baseline; column-gap: 12px; margin: 0 -12px; padding: 14px 12px; border-radius: 10px; color: var(--ink); transition: background 0.2s; }
.tf-l a:hover, .tf-l a:focus-visible { background: var(--paper); color: var(--ink); }
.tf-l a:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.tf-n { font-size: 16.5px; font-weight: 600; }
.tf-d { grid-column: 1 / 3; grid-row: 2; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.tf-pt { align-self: end; margin-bottom: 7px; border-bottom: 2px dotted #d6ccbb; }
.tf-p { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.tf-p strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.tf-p small { font-size: 13px; color: var(--ink-3); }
.tf-go { font-weight: 700; color: #c9bfae; transition: color 0.2s, transform 0.3s var(--ease); }
.tf-l a:hover .tf-go, .tf-l a:focus-visible .tf-go { color: var(--red); transform: translateX(4px); }
.tf-l strong.roule { color: var(--red-dk); transition: color 0.6s; }

.tf-ff { margin-top: 20px; padding-right: 120px; display: grid; gap: 8px; font-size: 14px; color: var(--ink-2); }
.tf-ff p:first-child { font-weight: 600; color: var(--ink); }
.tf-sceau { position: absolute; right: 24px; bottom: 18px; width: 88px; mix-blend-mode: multiply; opacity: 0; transform: scale(1.7) rotate(-22deg); pointer-events: none; }
.tf-feuille.tamponne .tf-sceau { animation: bon-tampon 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.25) forwards; }

.tf-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.6vw, 30px); border-radius: 22px; background: var(--ink); color: #fff; }
.tf-side .ac-eyebrow { color: #f0b9b3; }
.tf-inc { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tf-inc li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, 0.88); animation: tf-in 0.4s var(--ease) both; animation-delay: calc(var(--i) * 50ms); }
.tf-inc i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--red); color: #fff; }
.tf-side-p { margin-top: 6px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: 14.5px; color: rgba(255, 255, 255, 0.78); }
.tf-side .btn { justify-content: center; }
.tf-side-t { font-size: 14px; color: rgba(255, 255, 255, 0.7); }
.tf-side-t a { font-weight: 700; color: #fff; }

@media (max-width: 1000px) {
  .tf-g { grid-template-columns: minmax(0, 1fr); }
  .tf-side { position: static; }
}
@media (max-width: 760px) {
  .tf-hero-g { grid-template-columns: minmax(0, 1fr); }
  .tf-modes { gap: 8px; }
  .tf-modes button { display: flex; flex-direction: column; align-items: flex-start; padding: 14px 12px; gap: 4px; }
  .tf-des { margin-top: auto; padding-top: 4px; }
  .tf-zi { grid-row: auto; width: 42px; height: 42px; margin-bottom: 6px; }
  .tf-zi[data-n="2"] { font-size: 16px; }
  .tf-zi[data-n="3"] { font-size: 12px; }
  .tf-modes b { font-size: 14.5px; }
  .tf-modes small { display: none; }
  .tf-des strong { font-size: 16px; }
}
@media (max-width: 640px) {
  .tf-opt .pc-seg { display: flex; width: 100%; }
  .tf-opt .pc-seg label { flex: 1; text-align: center; padding-inline: 8px; }
  .tf-p strong { font-size: 20px; }
  .tf-n { font-size: 15.5px; }
  .tf-l a { column-gap: 8px; }
  .tf-ff { padding-right: 0; padding-bottom: 84px; }
  .tf-sceau { width: 72px; }
}
/* « moins d'animations » (voir papier.js) */
.calme .tf-l li, .calme .tf-inc li { animation: none; }
.calme .tf-feuille.tamponne .tf-sceau { animation: none; opacity: 0.85; transform: rotate(-10deg); }