/* DebridTap : composants de la charte « Jeton », préfixe dtk- (kit). Ne lit que les jetons
   de tokens.css. Une page compose ces classes ; elle n'en réinvente pas l'aspect.
   Règles d'usage et exemples : brands/dt/DESIGN.md, rendu : design/specimen.php. */

/* ---- Base ---- */
.dtk-page {
  margin: 0; background: var(--dt-page); color: var(--dt-ink);
  font: var(--dt-weight-body) var(--dt-fs-body)/var(--dt-lh-body) var(--dt-font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.dtk-page *, .dtk-page *::before, .dtk-page *::after { box-sizing: border-box; }
/* :where() : un lien ordinaire hérite de la couleur, sans l'emporter sur .dtk-btn (bouton en lien). */
.dtk-page :where(a) { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.dtk-page :where(a):hover { color: var(--dt-action-text); }
.dtk-page :focus-visible { outline: 3px solid var(--dt-focus); outline-offset: 3px; }
.dtk-wrap { max-width: calc(var(--dt-content) + 2 * var(--dt-gutter)); margin: 0 auto; padding: 0 var(--dt-gutter); }
.dtk-prose { max-width: var(--dt-prose); }
.dtk-section { padding: var(--dt-space-7) 0; }
.dtk-band { background: var(--dt-zone); }
.dtk-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Typographie : Bungee pour titres, prix et chiffres forts ; Nunito pour tout le reste ---- */
.dtk-hero-title, .dtk-h1, .dtk-h2 { font-family: var(--dt-font-display); font-weight: 400; line-height: var(--dt-lh-title); overflow-wrap: anywhere; }
.dtk-hero-title { margin: 0 0 var(--dt-space-5); font-size: var(--dt-fs-hero); }
.dtk-h1 { margin: 0 0 var(--dt-space-5); font-size: var(--dt-fs-h1); line-height: 1.02; }
.dtk-h2 { margin: 0 0 var(--dt-space-3); font-size: var(--dt-fs-h2); line-height: 1.1; }
.dtk-h3 { margin: 0 0 var(--dt-space-2); font: var(--dt-weight-label) var(--dt-fs-h3)/1.25 var(--dt-font-body); }
.dtk-lead { margin: 0 0 var(--dt-space-5); max-width: 36em; font-size: var(--dt-fs-lead); line-height: var(--dt-lh-body); }
.dtk-muted { color: var(--dt-ink-soft); }
.dtk-num { font-variant-numeric: tabular-nums; }
.dtk-strong { font-weight: var(--dt-weight-label); }
.dtk-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--dt-space-2) var(--dt-space-5); margin: 0 0 var(--dt-space-5); }
.dtk-section-head > * { margin: 0; }
.dtk-section-head p { font-size: var(--dt-fs-label); font-weight: var(--dt-weight-strong); }

/* Pastille de texte (« Most picked »). dtk-eyebrow en est l'ancien nom, gardé : jamais en capitales. */
.dtk-tag, .dtk-eyebrow {
  display: inline-block; margin: 0; padding: 3px 14px; border: var(--dt-stroke-thin) solid var(--dt-line);
  border-radius: var(--dt-radius-pill); background: var(--dt-sun); color: var(--dt-sun-ink);
  font: var(--dt-weight-label) var(--dt-fs-small)/1.4 var(--dt-font-body);
}

/* ---- Logo : tête du jeton + debridtap en Bungee ---- */
.dtk-logo { display: inline-flex; align-items: center; gap: 14px; color: var(--dt-ink); text-decoration: none; }
.dtk-page a.dtk-logo:hover { color: var(--dt-ink); }
.dtk-logo-word { font: 400 26px/1 var(--dt-font-display); }
.dtk-logo--small { gap: 10px; }
.dtk-logo--small .dtk-logo-word { font-size: 18px; }
.dtk-mark { flex: none; display: block; }

/* ---- Boutons : trait d'encre, verbe d'action, jamais de flèche ajoutée ---- */
.dtk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dt-space-2);
  min-height: 46px; padding: 0 22px; border: var(--dt-stroke) solid var(--dt-line); border-radius: var(--dt-radius-xs);
  background: var(--dt-action); color: var(--dt-action-ink); cursor: pointer; text-decoration: none;
  font: var(--dt-weight-label) var(--dt-fs-body)/1.1 var(--dt-font-body); text-align: center;
  transition: background-color var(--dt-dur-short) var(--dt-ease-out), transform var(--dt-dur-micro) var(--dt-ease-out), box-shadow var(--dt-dur-micro) var(--dt-ease-out);
}
.dtk-page a.dtk-btn:hover, .dtk-btn:hover { background: var(--dt-action-hover); color: var(--dt-action-ink); }
.dtk-btn--ok { background: var(--dt-action); }
.dtk-btn--sun { background: var(--dt-sun); color: var(--dt-sun-ink); }
.dtk-page a.dtk-btn--sun:hover, .dtk-btn--sun:hover { background: var(--dt-sun); color: var(--dt-sun-ink); }
.dtk-btn--ghost { background: var(--dt-surface); color: var(--dt-ink); }
.dtk-page a.dtk-btn--ghost:hover, .dtk-btn--ghost:hover { background: var(--dt-zone); color: var(--dt-ink); }
.dtk-btn--soft { border-color: var(--dt-action-text); background: var(--dt-surface); color: var(--dt-action-text); }
.dtk-page a.dtk-btn--soft:hover, .dtk-btn--soft:hover { background: var(--dt-zone); color: var(--dt-action-text); }
.dtk-btn--pill { border-radius: var(--dt-radius-pill); }
.dtk-btn--lift { box-shadow: var(--dt-lift); }
.dtk-btn--lift:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--dt-lift-color); }
.dtk-btn--big { min-height: 68px; padding: 0 30px; border-width: var(--dt-stroke-bold); border-radius: var(--dt-radius-md); font: 400 19px/1 var(--dt-font-display); }
.dtk-btn--block { width: 100%; }
.dtk-btn[disabled], .dtk-btn[aria-disabled="true"] { background: var(--dt-disabled); color: var(--dt-disabled-ink); border-color: var(--dt-line); box-shadow: none; cursor: not-allowed; transform: none; }

/* ---- Champ de lien : le champ et son bouton côte à côte, le lien reste toujours dans le champ ---- */
.dtk-field { display: flex; gap: 10px; }
.dtk-field input, .dtk-field textarea, .dtk-input {
  flex: 1; min-width: 0; min-height: 56px; padding: 0 16px;
  border: var(--dt-stroke) solid var(--dt-line); border-radius: var(--dt-radius-sm);
  background: var(--dt-surface); color: var(--dt-ink);
  font: 600 var(--dt-fs-body)/1.3 var(--dt-font-body);
}
.dtk-field textarea { padding: 14px 16px; resize: vertical; }
.dtk-field input::placeholder, .dtk-field textarea::placeholder, .dtk-input::placeholder { color: var(--dt-ink-soft); font-weight: 400; opacity: 1; }
.dtk-field input:focus-visible, .dtk-field textarea:focus-visible, .dtk-input:focus-visible { outline: 3px solid var(--dt-focus); outline-offset: 2px; }
.dtk-field input:disabled, .dtk-input:disabled { background: var(--dt-zone); }
.dtk-field .dtk-btn { min-height: 56px; border-radius: var(--dt-radius-sm); }
.dtk-field--hero { gap: 12px; }
.dtk-field--hero input { min-height: 68px; padding: 0 22px; border-width: var(--dt-stroke-bold); border-radius: var(--dt-radius-md); font-size: 18px; }
.dtk-field--hero .dtk-btn { min-height: 68px; border-radius: var(--dt-radius-md); }
.dtk-hint { margin: var(--dt-space-2) 0 0; font-size: var(--dt-fs-small); color: var(--dt-ink-soft); }

/* Champs de compte : libellé toujours visible, erreur dite en mots sous le champ */
.dtk-label { display: block; margin: 0 0 6px; font: var(--dt-weight-label) var(--dt-fs-label)/1.3 var(--dt-font-body); }
.dtk-input { width: 100%; }
.dtk-input[aria-invalid="true"] { border-width: var(--dt-stroke-bold); border-style: dashed; }
.dtk-error { display: flex; gap: 6px; align-items: flex-start; margin: var(--dt-space-2) 0 0; font-size: var(--dt-fs-small); font-weight: var(--dt-weight-label); }
.dtk-error > svg { flex: none; margin-top: 2px; }

/* ---- Bloc héros : îlot cobalt au trait d'encre, la mascotte en grand ---- */
.dtk-hero {
  --dt-focus: var(--dt-sun);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--dt-space-5);
  padding: var(--dt-space-7) var(--dt-space-6) var(--dt-space-7) 76px;
  background: var(--dt-hero); color: var(--dt-action-ink);
  border: var(--dt-stroke-bold) solid var(--dt-lift-color); border-radius: var(--dt-radius-2xl); overflow: hidden;
}
.dtk-hero .dtk-lead, .dtk-hero .dtk-hint { color: var(--dt-action-ink-soft); }
.dtk-hero .dtk-label { color: var(--dt-action-ink); }
.dtk-hero .dtk-field input { border-color: var(--dt-lift-color); }
.dtk-hero-art { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--dt-hero-halo); }

/* ---- Cartes et bandeaux ---- */
.dtk-card {
  display: flex; flex-direction: column; gap: var(--dt-space-3); padding: var(--dt-space-5) 20px 20px 28px;
  background: var(--dt-surface); border: var(--dt-stroke-bold) solid var(--dt-line); border-radius: var(--dt-radius-xl);
}
.dtk-card--lift { box-shadow: 0 8px 0 var(--dt-lift-color); }
.dtk-strip {
  display: flex; align-items: center; gap: var(--dt-space-5); padding: var(--dt-space-3) 44px var(--dt-space-3) var(--dt-space-5);
  background: var(--dt-surface); border: var(--dt-stroke) solid var(--dt-line); border-radius: 56px;
}

/* ---- Mascotte (dt_mascot()) : couleurs lues dans les jetons, découpe claire en sombre ---- */
.dtk-mascot { display: block; flex: none; max-width: 100%; height: auto; overflow: visible; filter: var(--dt-mascot-cut); }
.dtm-f-coin { fill: var(--dt-mascot-coin); }
.dtm-f-edge { fill: var(--dt-mascot-edge); }
.dtm-f-cheek { fill: var(--dt-mascot-cheek); }
.dtm-f-line { fill: var(--dt-mascot-line); }
.dtm-f-white { fill: var(--dt-mascot-white); }
.dtm-f-accent { fill: var(--dt-mascot-accent); }
.dtm-f-pale { fill: var(--dt-mascot-pale); }
.dtm-f-accent-deep { fill: var(--dt-mascot-accent-deep); }
.dtm-s-line { stroke: var(--dt-mascot-line); }
.dtm-s-ring { stroke: var(--dt-mascot-ring); }
.dtm-s-white { stroke: var(--dt-mascot-white); }
.dtm-s-accent { stroke: var(--dt-mascot-accent); }
.dtm-s-edge { stroke: var(--dt-mascot-edge); }
.dtk-coin, .dtk-stack { display: inline-block; flex: none; vertical-align: middle; }
.dtk-stack { filter: var(--dt-mascot-cut); }
.dt-icon { flex: none; }
.dt-icon .dt-icon-coin { fill: var(--dt-mascot-coin); }

/* Un seul geste, au moment d'un résultat : il saute (lien réussi) ou revient en courant (raté). */
@keyframes dtk-hop { 0% { transform: translateY(0); } 40% { transform: translateY(-9%); } 70% { transform: translateY(0); } 85% { transform: translateY(-2%); } 100% { transform: translateY(0); } }
@keyframes dtk-return { from { opacity: 0; transform: translateX(18%); } to { opacity: 1; transform: none; } }
@keyframes dtk-appear { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
.dtk-result .dtk-mascot { animation: dtk-appear var(--dt-dur-medium) var(--dt-ease-out) both; }
.dtk-result .dtk-mascot--happy { animation: dtk-hop var(--dt-dur-mascot) var(--dt-ease-out) both; }
.dtk-result .dtk-mascot--returning { animation: dtk-return var(--dt-dur-mascot) var(--dt-ease-spring) both; }
@media (prefers-reduced-motion: reduce) { .dtk-result .dtk-mascot { animation: none; } }

/* ---- Panneau de résultat : cadre d'encre, zone pâle, la mascotte à gauche, les faits à droite ---- */
.dtk-result {
  display: flex; flex-direction: column; gap: 18px; padding: 22px;
  background: var(--dt-surface); border: var(--dt-stroke) solid var(--dt-line); border-radius: var(--dt-radius-lg);
}
.dtk-result-zone {
  display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); align-items: center; gap: var(--dt-space-2);
  padding: 14px 22px 14px 6px; background: var(--dt-zone); border-radius: 18px;
}
.dtk-result-figure { display: grid; place-items: center; }
.dtk-result-body { display: flex; flex-direction: column; gap: var(--dt-space-4); min-width: 0; }
.dtk-result-title { margin: 0; font: var(--dt-weight-label) 21px/1.25 var(--dt-font-body); overflow-wrap: anywhere; }
.dtk-result-text { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.4; }
.dtk-result-file { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dtk-result-file > div { min-width: 0; }
.dtk-result-file p { margin: 0; overflow-wrap: anywhere; }
.dtk-result-meta { display: flex; flex-direction: column; gap: var(--dt-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--dt-fs-small); font-weight: var(--dt-weight-strong); }
.dtk-result-meta li { display: flex; align-items: center; gap: var(--dt-space-2); }
.dtk-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.dtk-cost-ok { color: var(--dt-state-ok); }
.dtk-cost-ko { color: var(--dt-state-ko); }

/* Barre de préparation */
.dtk-progress { height: 18px; border: var(--dt-stroke) solid var(--dt-line); border-radius: 9px; background: var(--dt-surface); overflow: hidden; }
.dtk-progress-bar { height: 100%; background: var(--dt-state-wait); border-right: var(--dt-stroke) solid var(--dt-line); transition: width var(--dt-dur-medium) var(--dt-ease-out); }

/* ---- Bulle : la mascotte parle ---- */
.dtk-bubble {
  position: relative; display: inline-block; max-width: 28em; margin: 0 0 14px; padding: 12px 18px;
  background: var(--dt-surface); border: var(--dt-stroke) solid var(--dt-line); border-radius: var(--dt-radius-md);
  font-weight: var(--dt-weight-strong);
}
.dtk-bubble::before, .dtk-bubble::after { content: ""; position: absolute; left: 28px; width: 0; height: 0; border-style: solid; }
.dtk-bubble::before { bottom: -17px; border-width: 17px 14px 0 0; border-color: var(--dt-line) transparent transparent transparent; }
.dtk-bubble::after { bottom: -11px; left: 31px; border-width: 11px 9px 0 0; border-color: var(--dt-surface) transparent transparent transparent; }

/* ---- Ligne de lien traité (historique, liste de liens) ---- */
.dtk-rline {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--dt-space-3); align-items: center;
  padding: 12px 0; border-bottom: var(--dt-stroke-thin) solid var(--dt-zone); font-weight: 600;
}
.dtk-rline-host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtk-rline-cost { font-family: var(--dt-font-display); font-variant-numeric: tabular-nums; color: var(--dt-state-ok); }
.dtk-rline--ko .dtk-rline-cost { color: var(--dt-state-ko); }
@keyframes dtk-slide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dtk-rline--new { animation: dtk-slide var(--dt-dur-medium) var(--dt-ease-out) both; }

/* ---- Statuts : mots courts en minuscules, jamais en capitales ---- */
.dtk-status { display: inline-block; padding: 2px 12px; border: var(--dt-stroke-thin) solid var(--dt-line); border-radius: var(--dt-radius-pill); font: var(--dt-weight-label) 14px/1.4 var(--dt-font-body); }
.dtk-status--ok { background: var(--dt-action); color: var(--dt-action-ink); }
.dtk-status--ko { background: var(--dt-surface); color: var(--dt-state-ko); }
.dtk-status--wait { background: var(--dt-zone); color: var(--dt-action-text); }

/* ---- Solde : pastille avec son jeton, toujours « N credits » en toutes lettres ---- */
.dtk-balance {
  display: inline-flex; align-items: center; gap: var(--dt-space-2); min-height: 36px; padding: 0 14px 0 8px;
  border: var(--dt-stroke) solid var(--dt-line); border-radius: 18px; background: var(--dt-surface);
  color: var(--dt-ink); font: var(--dt-weight-label) var(--dt-fs-small)/1 var(--dt-font-body); font-variant-numeric: tabular-nums; text-decoration: none;
}
.dtk-balance--empty { border-style: dashed; }
.dtk-balance, .dtk-status, .dtk-tag { white-space: nowrap; }

/* ---- Étapes : trois arrêts sur un chemin en pointillé ---- */
.dtk-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dt-space-5); margin: 0; padding: 0; list-style: none; text-align: center; }
.dtk-steps::before { content: ""; position: absolute; top: 38px; left: 8%; right: 8%; border-top: 4px dotted var(--dt-line); }
.dtk-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dtk-step p { margin: 0; max-width: 320px; }
.dtk-step-num {
  display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: var(--dt-space-2);
  border: var(--dt-stroke-bold) solid var(--dt-line); border-radius: 50%; background: var(--dt-surface); color: var(--dt-action-text);
}
.dtk-step--paid .dtk-step-num { background: var(--dt-mascot-coin); color: var(--dt-mascot-line); box-shadow: 3px 3px 0 var(--dt-mascot-edge); }
/* Quatre arrêts (chemins d'un crédit) : même chemin, un coût en Bungee sous le titre */
.dtk-steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dtk-steps--four::before { left: 10%; right: 10%; }
.dtk-step-cost { margin: 0 0 var(--dt-space-1); font: 400 19px/1.15 var(--dt-font-display); }

/* ---- Packs : trois piles, une seule mise en avant ---- */
.dtk-packs { display: grid; grid-template-columns: 1fr 1.45fr 1fr; align-items: center; gap: var(--dt-space-5); }
.dtk-pack {
  display: flex; align-items: flex-end; gap: var(--dt-space-4); padding: 28px var(--dt-space-5);
  background: var(--dt-surface); border: var(--dt-stroke) solid var(--dt-line); border-radius: var(--dt-radius-lg);
}
.dtk-pack--pale { background: var(--dt-zone); border-radius: 30px; }
.dtk-pack--featured {
  --dt-focus: var(--dt-sun);
  align-items: center; padding: 26px; background: var(--dt-action); color: var(--dt-action-ink);
  border-width: var(--dt-stroke-bold); border-color: var(--dt-lift-color); border-radius: 40px; box-shadow: var(--dt-lift-lg);
}
.dtk-pack-art { flex: none; }
.dtk-pack-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--dt-space-1); min-width: 0; }
.dtk-pack-price { font: 400 var(--dt-fs-price)/1.05 var(--dt-font-display); font-variant-numeric: tabular-nums; }
.dtk-pack--featured .dtk-pack-price { font-size: var(--dt-fs-price-big); }
.dtk-pack-credits { font-size: 20px; font-weight: var(--dt-weight-label); }
.dtk-pack-row { display: flex; justify-content: space-between; gap: var(--dt-space-3); width: 100%; font-size: var(--dt-fs-small); }
.dtk-pack--featured .dtk-pack-row { color: var(--dt-action-ink-soft); }
.dtk-pack-tag { margin-bottom: 6px; }
.dtk-pack .dtk-btn { margin-top: var(--dt-space-3); white-space: nowrap; }

/* ---- Messages ---- */
.dtk-alert {
  display: flex; gap: var(--dt-space-3); align-items: flex-start; padding: 14px var(--dt-space-4);
  background: var(--dt-surface); border: var(--dt-stroke) solid var(--dt-line); border-radius: var(--dt-radius-sm);
}
.dtk-alert > svg { flex: none; margin-top: 2px; }
.dtk-alert b { display: block; font-weight: var(--dt-weight-label); }
.dtk-alert--ok { background: var(--dt-zone); }
.dtk-alert--ok > svg { color: var(--dt-state-ok); }
.dtk-alert--ko > svg { color: var(--dt-state-ko); }
.dtk-alert--warn { background: var(--dt-sun); color: var(--dt-sun-ink); }
/* Formulaires de compte et d'aide : un refus sur zone pâle, une réussite sur la surface, picto cobalt */
.dtk-alert--pale { background: var(--dt-zone); }
.dtk-alert--done > svg { color: var(--dt-state-ok); }
p.dtk-alert-body { margin: 0; font-weight: 600; line-height: 1.45; }
p.dtk-alert-body b { display: inline; }
p.dtk-alert-body a { font-weight: var(--dt-weight-label); }

/* ---- Séparateur « ou » entre deux façons de faire (Google, formulaire) ---- */
.dtk-or { display: flex; align-items: center; gap: 14px; margin: 0; font: var(--dt-weight-strong) var(--dt-fs-small)/1 var(--dt-font-body); }
.dtk-or::before, .dtk-or::after { content: ""; flex: 1; height: 3px; background: var(--dt-zone); }

/* ---- Parcours : trois arrêts ronds sur un chemin en pointillé (fait, en cours, à venir) ---- */
.dtk-track { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; text-align: center; font-weight: var(--dt-weight-strong); }
.dtk-track::before { content: ""; position: absolute; top: 30px; left: 6%; right: 6%; border-top: 4px dotted var(--dt-line); }
.dtk-track li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dtk-track li[aria-current] { font-weight: var(--dt-weight-label); }
.dtk-track-stop {
  display: grid; place-items: center; width: 60px; height: 60px;
  border: var(--dt-stroke-bold) solid var(--dt-line); border-radius: 50%; background: var(--dt-surface); color: var(--dt-ink);
}
.dtk-track-stop--done { color: var(--dt-action-text); }
.dtk-track-stop--now { background: var(--dt-mascot-coin); color: var(--dt-mascot-line); box-shadow: 3px 3px 0 var(--dt-mascot-edge); }
.dtk-track-stop--next { border-style: dashed; }

/* ---- Tableau de chiffres ---- */
.dtk-table { width: 100%; border-collapse: collapse; font-size: var(--dt-fs-small); }
.dtk-table th { text-align: left; font-weight: var(--dt-weight-label); padding: 10px 12px; border-bottom: var(--dt-stroke) solid var(--dt-line); }
.dtk-table td { padding: 12px; border-bottom: var(--dt-stroke-thin) solid var(--dt-zone); overflow-wrap: anywhere; }
.dtk-table-wrap { overflow-x: auto; }
.dtk-table td.dtk-num, .dtk-table th.dtk-num { text-align: right; }

/* ---- Panneau pâle au trait d'encre (404, retours de paiement, tête des textes) ---- */
.dtk-panel { background: var(--dt-zone); border: var(--dt-stroke-bold) solid var(--dt-line); border-radius: var(--dt-radius-2xl); }
.dtk-panel--soft { border: 0; border-radius: var(--dt-radius-lg); }
.dtk-panel--thin { border-width: var(--dt-stroke); border-radius: var(--dt-radius-lg); }
/* Disque derrière la mascotte, hors du héros (dans le héros : dtk-hero-art) */
.dtk-halo { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--dt-surface); }

/* ---- Relevé d'un paiement : grandes lignes séparées d'un pointillé ---- */
.dtk-tally {
  display: flex; flex-direction: column; background: var(--dt-surface); color: var(--dt-ink);
  border: var(--dt-stroke) solid var(--dt-line); border-radius: var(--dt-radius-lg); box-shadow: var(--dt-lift-sm);
}
.dtk-tally-row { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dt-space-2) var(--dt-space-4); padding: var(--dt-space-4) 26px; }
.dtk-tally-row + .dtk-tally-row { border-top: var(--dt-stroke) dashed var(--dt-line); }
.dtk-tally-label { display: inline-flex; align-items: center; gap: var(--dt-space-3); font-weight: var(--dt-weight-strong); }
.dtk-tally-big { font: 400 clamp(22px, 2.2vw, 28px)/1.1 var(--dt-font-display); font-variant-numeric: tabular-nums; }
.dtk-tally-huge { font: 400 clamp(32px, 4vw, 54px)/1.05 var(--dt-font-display); font-variant-numeric: tabular-nums; color: var(--dt-action-text); }
/* En attente (paiement en cours de confirmation) : pas d'ombre, le montant à l'encre douce */
.dtk-tally--wait { box-shadow: none; }
.dtk-tally--wait .dtk-tally-huge { color: var(--dt-ink-soft); }
.dtk-tally-stack { flex-direction: column; align-items: stretch; justify-content: flex-start; }
.dtk-tally-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--dt-space-1) var(--dt-space-3); }
.dtk-tag--wait { background: var(--dt-surface); color: var(--dt-action-text); }

/* ---- Suivi en trois arrêts (paiement : payé, confirmation, crédits ajoutés) ---- */
.dtk-track { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 560px; margin: 0; padding: 0; list-style: none; text-align: center; }
.dtk-track::before { content: ""; position: absolute; top: 22px; left: 16.7%; right: 16.7%; border-top: var(--dt-stroke-bold) dotted var(--dt-line); }
.dtk-track-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font: var(--dt-weight-label) var(--dt-fs-small)/1.3 var(--dt-font-body); }
.dtk-track-stop { display: grid; place-items: center; width: 44px; height: 44px; border: var(--dt-stroke) dashed var(--dt-line); border-radius: 50%; background: var(--dt-zone); color: var(--dt-ink); }
.dtk-track-step--done .dtk-track-stop { border-style: solid; background: var(--dt-action); color: var(--dt-action-ink); }
.dtk-track-step--current { color: var(--dt-action-text); }
.dtk-track-step--current .dtk-track-stop { border-style: solid; background: var(--dt-surface); color: var(--dt-action-text); }

/* ---- Jauge d'un lot : ce qui reste, en jaune de jeton ---- */
.dtk-meter { display: block; flex: 1; min-width: 80px; height: 14px; border: var(--dt-stroke-thin) solid var(--dt-line); border-radius: var(--dt-radius-pill); background: var(--dt-surface); overflow: hidden; }
.dtk-meter-bar { fill: var(--dt-sun); }

/* ---- Mouvements : picto rond, libellé et date, montant en Bungee, solde après ---- */
.dtk-entries { margin: 0; padding: 0; list-style: none; }
.dtk-entry { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--dt-space-2) var(--dt-space-4); padding: 14px 0; }
.dtk-entry + .dtk-entry { border-top: var(--dt-stroke-thin) solid var(--dt-zone); }
.dtk-entry-icon { display: grid; place-items: center; width: 38px; height: 38px; border: var(--dt-stroke-thin) solid var(--dt-line); border-radius: 50%; color: var(--dt-action-text); }
.dtk-entry-icon--ko { border-style: dashed; color: var(--dt-ink); }
.dtk-entry-body { min-width: 0; }
.dtk-entry-body b { display: block; font-weight: var(--dt-weight-label); overflow-wrap: anywhere; }
.dtk-entry-body span { font-size: 14px; color: var(--dt-ink-soft); }
.dtk-entry-amount { min-width: 3ch; text-align: right; font: 400 22px/1 var(--dt-font-display); font-variant-numeric: tabular-nums; color: var(--dt-state-ko); }
.dtk-entry-amount--plus { color: var(--dt-state-ok); }
.dtk-entry-balance { min-width: 9em; text-align: right; font-size: 14px; font-weight: 600; color: var(--dt-ink-soft); }
.dtk-entry-inline { display: none; }

/* ---- Carte en pointillé : un geste qui ne se défait pas ---- */
.dtk-card--dashed { border-style: dashed; }

/* ---- Sommaire d'un texte : arrêts ronds sur un chemin en pointillé ---- */
.dtk-toc { font-size: 14px; font-weight: var(--dt-weight-strong); }
.dtk-toc-title { margin: 0 0 var(--dt-space-3); font-weight: var(--dt-weight-label); }
.dtk-toc-list { position: relative; display: grid; gap: var(--dt-space-2); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.dtk-toc-list::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 6px; border-left: var(--dt-stroke) dotted var(--dt-line); }
.dtk-toc-list a { position: relative; display: block; padding: 2px 0 2px 26px; text-decoration: none; }
.dtk-toc-list a::before {
  content: ""; position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin-top: -7px;
  border: var(--dt-stroke) solid var(--dt-line); border-radius: 50%; background: var(--dt-surface);
}
.dtk-toc-list a[aria-current="true"] { color: var(--dt-action-text); }
.dtk-toc-list a[aria-current="true"]::before { background: var(--dt-sun); }

/* ---- Recharge : un pack par ligne, choisi par sa case ronde ---- */
.dtk-pack-lines { display: grid; gap: var(--dt-space-4); margin: 0; padding: 0; border: 0; min-width: 0; }
.dtk-pack-line {
  position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--dt-space-4) var(--dt-space-5);
  padding: var(--dt-space-5) 26px; cursor: pointer;
  background: var(--dt-surface); color: var(--dt-ink); border: var(--dt-stroke) solid var(--dt-line); border-radius: var(--dt-radius-lg);
}
.dtk-pack-line--pale { background: var(--dt-zone); }
.dtk-pack-line:has(input:checked) {
  --dt-focus: var(--dt-sun);
  background: var(--dt-action); color: var(--dt-action-ink); border-width: var(--dt-stroke-bold); border-color: var(--dt-lift-color); box-shadow: var(--dt-lift);
}
.dtk-pack-line:has(input:focus-visible) { outline: 3px solid var(--dt-focus); outline-offset: 4px; }
.dtk-pack-line-body { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.dtk-pack-line-name { font-size: 14px; font-weight: var(--dt-weight-strong); }
.dtk-pack-line-credits { font-size: 20px; font-weight: var(--dt-weight-label); }
.dtk-pack-line-unit { font-size: 14px; font-weight: 600; }
.dtk-pack-line-price { font: 400 var(--dt-fs-price)/1 var(--dt-font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtk-pack-line .dtk-bonus { margin-top: 6px; padding: 2px 12px; font-size: 13px; }
.dtk-pack-line--pale .dtk-bonus { background: var(--dt-sun); color: var(--dt-sun-ink); }
.dtk-pack-line .dtk-tag { position: absolute; top: -16px; left: 66px; font-size: 13px; }
.dtk-radio { display: grid; place-items: center; width: 28px; height: 28px; border: var(--dt-stroke) solid currentColor; border-radius: 50%; background: var(--dt-surface); color: var(--dt-ink); }
.dtk-radio svg { visibility: hidden; }
.dtk-pack-line:has(input:checked) .dtk-radio { background: var(--dt-sun); color: var(--dt-sun-ink); border-color: var(--dt-lift-color); }
.dtk-pack-line:has(input:checked) .dtk-radio svg { visibility: visible; }

/* Récapitulatif d'une recharge */
.dtk-summary { display: flex; flex-direction: column; gap: var(--dt-space-3); padding: var(--dt-space-5) 26px; background: var(--dt-zone); border: var(--dt-stroke) solid var(--dt-line); border-radius: var(--dt-radius-lg); }
.dtk-summary > * { margin: 0; }
.dtk-summary-rows { display: grid; gap: var(--dt-space-2); margin: 0; font-size: 14px; }
.dtk-summary-rows div { display: flex; justify-content: space-between; gap: var(--dt-space-3); }
.dtk-summary-rows dt { font-weight: 600; }
.dtk-summary-rows dd { margin: 0; font-weight: var(--dt-weight-label); font-variant-numeric: tabular-nums; text-align: right; }
.dtk-summary-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--dt-space-3); padding-top: var(--dt-space-4); border-top: var(--dt-stroke) solid var(--dt-line); font-weight: var(--dt-weight-label); }
.dtk-summary-total b { font: 400 clamp(30px, 3vw, 40px)/1 var(--dt-font-display); font-variant-numeric: tabular-nums; }
.dtk-summary-after { display: flex; align-items: center; gap: var(--dt-space-4); padding: var(--dt-space-3) var(--dt-space-4); background: var(--dt-surface); border: var(--dt-stroke) solid var(--dt-line); border-radius: var(--dt-radius-sm); font-size: 14px; font-weight: 600; }
.dtk-summary-after b { display: block; font: 400 22px/1.1 var(--dt-font-display); color: var(--dt-action-text); }

/* Packs en lecture seule (recharge fermée) : prix, crédits, prix du crédit */
.dtk-pack-minis { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dtk-pack-mini { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) auto; align-items: center; gap: var(--dt-space-4); padding: 10px var(--dt-space-4); border: var(--dt-stroke) solid var(--dt-line); border-radius: var(--dt-radius-sm); background: var(--dt-surface); font-size: 14px; font-weight: var(--dt-weight-label); }
.dtk-pack-mini b { font: 400 20px/1 var(--dt-font-display); font-variant-numeric: tabular-nums; }
.dtk-pack-mini span:last-child { font-size: 13px; font-weight: 600; text-align: right; }

/* Étiquette avec son picto (« paid ») */
.dtk-tag:has(svg), .dtk-status:has(svg) { display: inline-flex; align-items: center; gap: 6px; }

/* ---- En-tête ---- */
.dtk-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--dt-space-4); min-height: 96px; }
.dtk-nav { display: flex; align-items: center; gap: 40px; margin: 0; padding: 0; list-style: none; font: var(--dt-weight-label) var(--dt-fs-label)/1.2 var(--dt-font-body); }
.dtk-nav a { text-decoration: none; }
.dtk-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; text-decoration-color: var(--dt-sun); }

/* ---- Fil d'Ariane (fiches hébergeurs) ---- */
.dtk-crumbs { padding: var(--dt-space-1) 0 var(--dt-space-3); font-size: var(--dt-fs-small); font-weight: var(--dt-weight-strong); }
.dtk-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--dt-space-2); margin: 0; padding: 0; list-style: none; }
.dtk-crumbs li + li::before { content: "/"; margin-right: var(--dt-space-2); }
.dtk-crumbs a { color: inherit; }

/* ---- Part de fichiers en barre (dt_share_bar) : cobalt « 1 credit », pâle « 2 or more » ; la phrase dtk-share-text porte l'information ---- */
.dtk-share-text { margin: 0; font-size: var(--dt-fs-body); line-height: 1.45; }
.dtk-share-text b { font-weight: var(--dt-weight-label); }
.dtk-share { display: flex; flex-direction: column; gap: 6px; }
.dtk-share-bar { display: flex; gap: 5px; height: 22px; }
.dtk-share-part { flex: 1 1 0; min-width: 0; box-sizing: border-box; border: var(--dt-stroke) solid var(--dt-line); border-radius: 8px; }
.dtk-share-part[data-tenths="1"] { flex-grow: 1; }
.dtk-share-part[data-tenths="2"] { flex-grow: 2; }
.dtk-share-part[data-tenths="3"] { flex-grow: 3; }
.dtk-share-part[data-tenths="4"] { flex-grow: 4; }
.dtk-share-part[data-tenths="5"] { flex-grow: 5; }
.dtk-share-part[data-tenths="6"] { flex-grow: 6; }
.dtk-share-part[data-tenths="7"] { flex-grow: 7; }
.dtk-share-part[data-tenths="8"] { flex-grow: 8; }
.dtk-share-part[data-tenths="9"] { flex-grow: 9; }
.dtk-share-part[data-tenths="10"] { flex-grow: 10; }
.dtk-share-part--one, .dtk-swatch--one { background: var(--dt-action); }
.dtk-share-part--more, .dtk-swatch--more { background: var(--dt-share-more); }
.dtk-share-keys { display: flex; justify-content: space-between; gap: var(--dt-space-3); font-size: var(--dt-fs-small); font-weight: var(--dt-weight-label); line-height: 1.2; }
.dtk-share-key { display: inline-flex; align-items: center; gap: var(--dt-space-2); }
.dtk-share-key--one { color: var(--dt-action-text); }
.dtk-swatch { display: inline-block; flex: none; width: 22px; height: 14px; box-sizing: border-box; border: var(--dt-stroke-thin) solid var(--dt-line); border-radius: 4px; }
@media (max-width: 560px) {
  .dtk-share-bar { height: 24px; }
  .dtk-share-part { border-width: var(--dt-stroke-thin); }
}

/* ---- Issues d'un lien : libellé, précision, coût en Bungee ; --ko en pointillé ---- */
.dtk-endings { display: grid; gap: var(--dt-space-3); margin: 0; padding: 0; list-style: none; }
.dtk-ending {
  display: flex; align-items: center; justify-content: space-between; gap: var(--dt-space-4); padding: var(--dt-space-4) 22px;
  background: var(--dt-surface); border: var(--dt-stroke) solid var(--dt-line); border-radius: var(--dt-radius-md);
}
.dtk-ending--ko { border-style: dashed; }
.dtk-ending-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dtk-ending-text b { font-size: var(--dt-fs-label); font-weight: var(--dt-weight-label); }
.dtk-ending-text span { color: var(--dt-ink-soft); font-weight: 600; }
.dtk-ending-cost { font: 400 clamp(19px, 1.9vw, 24px)/1.1 var(--dt-font-display); white-space: nowrap; }

/* ---- Questions et réponses : <details> natifs séparés du pointillé des étapes, la question
   ouverte en zone pâle ; jeton blanc « + » fermé, jaune « − » ouvert (le signe change, pas
   seulement la couleur). Une seule ouverte par l'attribut name, sans script. ---- */
.dtk-faq { display: flex; flex-direction: column; min-width: 0; }
.dtk-faq-item { border-top: var(--dt-stroke) dotted var(--dt-line); border-bottom: var(--dt-stroke) dotted transparent; }
.dtk-faq-item:last-child { border-bottom-color: var(--dt-line); }
.dtk-faq-item[open] { border-color: transparent; background: var(--dt-zone); border-radius: var(--dt-radius-lg); }
.dtk-faq-item[open] + .dtk-faq-item { border-top-color: transparent; }
.dtk-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px;
  list-style: none; cursor: pointer; color: var(--dt-ink); border-radius: 18px;
}
.dtk-faq-q::-webkit-details-marker { display: none; }
.dtk-faq-q::marker { content: ""; }
.dtk-page .dtk-faq-q:focus-visible { outline: var(--dt-stroke) solid var(--dt-focus); outline-offset: -6px; }
.dtk-faq-text { font-size: 19px; font-weight: 800; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.dtk-faq-toggle {
  display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; box-sizing: border-box;
  border-radius: var(--dt-radius-pill); border: var(--dt-stroke) solid var(--dt-line); background: var(--dt-surface); color: var(--dt-ink);
  transition: background-color var(--dt-dur-short) var(--dt-ease-out);
}
.dtk-faq-minus { display: none; }
.dtk-faq-item[open] .dtk-faq-toggle { background: var(--dt-sun); color: var(--dt-sun-ink); box-shadow: 0 3px 0 var(--dt-lift-color); }
.dtk-faq-item[open] .dtk-faq-plus { display: none; }
.dtk-faq-item[open] .dtk-faq-minus { display: block; }
.dtk-faq-a { margin: 0; padding: 0 24px 26px; max-width: var(--dt-prose); font-size: var(--dt-fs-label); line-height: 1.65; color: var(--dt-ink); }

/* ---- Calculateur « taille du fichier -> crédits » : champ et unité, curseur au jeton, bande des
   tranches de 5 Go (un bloc plein par crédit, chacun porte sa limite), résultat en Bungee cobalt ---- */
.dtk-calc {
  display: flex; flex-direction: column; gap: var(--dt-space-4); padding: 26px 28px 24px; min-width: 0;
  background: var(--dt-surface); color: var(--dt-ink); border: var(--dt-stroke-bold) solid var(--dt-line);
  border-radius: var(--dt-radius-lg); box-shadow: var(--dt-lift);
}
.dtk-calc .dtk-label { margin: 0; }
.dtk-calc-field {
  display: flex; align-items: center; gap: var(--dt-space-3); min-height: 60px; padding: 0 18px;
  border: var(--dt-stroke) solid var(--dt-line); border-radius: var(--dt-radius-sm); background: var(--dt-surface);
}
.dtk-calc-field:focus-within { outline: 3px solid var(--dt-focus); outline-offset: 2px; }
.dtk-calc-field input {
  flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--dt-ink);
  font: 400 30px/1.2 var(--dt-font-display); font-variant-numeric: tabular-nums;
}
.dtk-page .dtk-calc-field input:focus-visible { outline: none; }
.dtk-calc-unit { flex: none; font-size: 18px; font-weight: var(--dt-weight-label); }
.dtk-calc-slider { position: relative; height: 28px; }
.dtk-calc-track { position: absolute; top: 9px; left: 0; right: 0; height: 10px; border: var(--dt-stroke) solid var(--dt-line); border-radius: var(--dt-radius-pill); background: var(--dt-zone); overflow: hidden; }
.dtk-calc-fill { display: block; width: 0; height: 100%; background: var(--dt-action); }
.dtk-calc-range { position: absolute; inset: 0; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.dtk-calc-range::-webkit-slider-runnable-track { height: 28px; background: transparent; }
.dtk-calc-range::-moz-range-track { height: 28px; background: transparent; }
.dtk-calc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: 1px;
  border: var(--dt-stroke) solid var(--dt-line); border-radius: 50%; background: var(--dt-mascot-coin); box-shadow: 2px 2px 0 var(--dt-mascot-edge);
}
.dtk-calc-range::-moz-range-thumb { width: 20px; height: 20px; border: var(--dt-stroke) solid var(--dt-line); border-radius: 50%; background: var(--dt-mascot-coin); box-shadow: 2px 2px 0 var(--dt-mascot-edge); }
.dtk-page .dtk-calc-range:focus-visible { outline: 3px solid var(--dt-focus); outline-offset: 2px; border-radius: var(--dt-radius-pill); }
.dtk-calc-steps { display: flex; gap: 6px; margin: 0; padding: 0 0 3px; list-style: none; }
.dtk-calc-steps > li { display: flex; flex: 1 1 0; min-width: 0; }
.dtk-page a.dtk-calc-step, .dtk-calc-step {
  display: flex; flex: 1 1 0; align-items: center; justify-content: center; min-width: 0; height: 34px;
  border: var(--dt-stroke) solid var(--dt-line); border-radius: 10px; background: var(--dt-surface); color: var(--dt-ink);
  font-size: 13px; font-weight: var(--dt-weight-label); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dt-dur-micro) var(--dt-ease-out), color var(--dt-dur-micro) var(--dt-ease-out);
}
.dtk-page a.dtk-calc-step:hover { background: var(--dt-zone); color: var(--dt-action-text); }
.dtk-page a.dtk-calc-step--full, .dtk-calc-step--full { background: var(--dt-action); color: var(--dt-action-ink); }
.dtk-page a.dtk-calc-step--full:hover { background: var(--dt-action-hover); color: var(--dt-action-ink); }
.dtk-page a.dtk-calc-step[aria-current] { box-shadow: 0 3px 0 var(--dt-lift-color); }
.dtk-page a.dtk-calc-step:focus-visible { outline: 3px solid var(--dt-focus); outline-offset: 2px; }
.dtk-calc-result { display: flex; align-items: center; justify-content: space-between; gap: var(--dt-space-3); padding: 18px 20px; border-radius: 18px; background: var(--dt-zone); }
.dtk-calc-figures { display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 0; font-weight: var(--dt-weight-strong); }
.dtk-calc-credits { font: 400 clamp(30px, 3vw, 40px)/1.05 var(--dt-font-display); color: var(--dt-action-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtk-calc-coins { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }

@media (max-width: 860px) {
  :root { --dt-gutter: 16px; }
  .dtk-packs, .dtk-steps { grid-template-columns: 1fr; }
  .dtk-steps { text-align: left; }
  .dtk-steps::before { top: 0; bottom: 0; left: 37px; right: auto; border-top: 0; border-left: 4px dotted var(--dt-line); }
  .dtk-step { flex-direction: row; align-items: flex-start; gap: 14px; }
  .dtk-step-num { width: 76px; height: 76px; margin: 0; flex: none; }
  .dtk-steps--four { grid-template-columns: 1fr; }
  .dtk-steps--four::before { left: 25px; }
  .dtk-steps--four .dtk-step-num { width: 52px; height: 52px; border-width: var(--dt-stroke); }
  .dtk-steps--four .dtk-step-body { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--dt-space-3); }
  .dtk-steps--four .dtk-step-body > p:last-child { grid-column: 1 / -1; }
  .dtk-steps--four .dtk-step-cost { font-size: 15px; text-align: right; }
  .dtk-calc { padding: var(--dt-space-5) 20px 20px; }
  .dtk-calc-credits { font-size: 28px; }
  .dtk-calc-result { padding: 16px; }
  .dtk-page a.dtk-calc-step, .dtk-calc-step { height: 44px; }
  .dtk-hero { grid-template-columns: 1fr; padding: var(--dt-space-4) 20px 22px; border-radius: 28px; border-width: 0; }
  .dtk-hero-art { order: -1; justify-self: center; width: min(70%, 240px); }
  .dtk-topbar { min-height: 64px; }
  .dtk-logo { gap: 10px; }
  .dtk-logo .dtk-mark { width: 40px; height: 40px; }
  .dtk-logo-word { font-size: 20px; }
  .dtk-logo--small .dtk-mark { width: 28px; height: 28px; }
  .dtk-logo--small .dtk-logo-word { font-size: 18px; }
  .dtk-nav { gap: 20px; }
  .dtk-strip { flex-wrap: wrap; border-radius: var(--dt-radius-lg); padding: var(--dt-space-4); }
  .dtk-pack--featured { flex-direction: column; align-items: flex-start; border-radius: 26px; }
}
@media (max-width: 560px) {
  .dtk-nav { gap: 12px; }
  .dtk-calc-steps { flex-wrap: wrap; }
  .dtk-calc-steps > li { flex: 1 1 calc((100% - 12px) / 3); }
  .dtk-page a.dtk-calc-step, .dtk-calc-step { font-size: 14px; }
  .dtk-calc-result { flex-direction: column; align-items: flex-start; }
  .dtk-calc-coins { justify-content: flex-start; }
  .dtk-faq-q { padding: 16px 14px; }
  .dtk-faq-text { font-size: var(--dt-fs-label); }
  .dtk-faq-toggle { width: 36px; height: 36px; }
  .dtk-faq-toggle .dt-icon { width: 20px; height: 20px; }
  .dtk-faq-a { padding: 0 14px 18px; font-size: var(--dt-fs-body); }
  .dtk-table th, .dtk-table td { padding: 10px 6px; }
  .dtk-field, .dtk-field--hero { flex-direction: column; }
  .dtk-field .dtk-btn { width: 100%; }
  .dtk-field--hero input, .dtk-field--hero .dtk-btn { min-height: 56px; border-radius: 16px; }
  .dtk-btn--big { font-size: 18px; }
  .dtk-result { padding: 14px; }
  .dtk-result-zone { grid-template-columns: 1fr; padding: 14px; }
  .dtk-result-figure .dtk-mascot { height: 150px; width: auto; }
  .dtk-pack { flex-direction: column; align-items: stretch; }
  .dtk-pack:not(.dtk-pack--featured) .dtk-pack-art { display: none; }
  .dtk-pack .dtk-btn { width: 100%; }
  .dtk-entry { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--dt-space-2) var(--dt-space-3); }
  .dtk-entry-balance { display: none; }
  .dtk-entry-inline { display: inline; }
  .dtk-entry-icon { width: 34px; height: 34px; }
  .dtk-tally-row { padding: var(--dt-space-3) var(--dt-space-4); }
  .dtk-track-step { font-size: 14px; }
  .dtk-pack-line { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--dt-space-2) var(--dt-space-3); padding: var(--dt-space-4); }
  .dtk-pack-line .dtk-stack { display: none; }
  .dtk-pack-line .dtk-tag { left: 20px; }
  .dtk-pack-line-price { font-size: 22px; }
  .dtk-summary { padding: var(--dt-space-4); }
  .dtk-pack-mini { grid-template-columns: auto minmax(0, 1fr); }
  .dtk-pack-mini span:last-child { display: none; }
}