/* DebridTap : jetons de la charte « Jeton ». Seule source de valeurs visuelles de la marque.
   Valeurs relevées sur la maquette validée le 28/09/2026 (docs/debridtap/maquette-2026-09-28/).
   Règles d'usage : brands/dt/DESIGN.md. Aucune valeur en dur ailleurs sous brands/dt/. */

@font-face {
  font-family: "Bungee";
  src: url("fonts/bungee.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Fonds */
  --dt-page: #FFFFFF;            /* fond de page */
  --dt-zone: #EEF1FF;            /* zones pâles : bande de promesse, panneau de résultat */
  --dt-surface: #FFFFFF;         /* cartes, champs, bulles */

  /* Texte et trait d'encre */
  --dt-ink: #0B1446;             /* texte, traits, bordures d'encre */
  --dt-ink-soft: #414A7A;        /* aide sous un champ, légende (dérivé, 8,4:1 sur blanc) */
  --dt-line: #0B1446;            /* bordure d'encre des éléments importants */
  --dt-lift-color: #0B1446;      /* ombre pleine décalée sous les boutons et cartes forts */

  /* Action (cobalt) */
  --dt-action: #2336E6;          /* bouton principal, bloc héros, pack mis en avant */
  --dt-action-hover: #1D2FD0;
  --dt-action-ink: #FFFFFF;      /* texte sur cobalt */
  --dt-action-ink-soft: #E4E8FF; /* texte secondaire sur cobalt */
  --dt-action-text: #2336E6;     /* cobalt employé comme couleur de texte (« 1 credit », liens) */
  --dt-hero: #2336E6;            /* bloc héros cobalt */
  --dt-hero-halo: #1D2FD0;       /* disque derrière la mascotte du héros */

  /* Jeton (jaune tournesol) */
  --dt-sun: #FFD23F;             /* bouton du héros, badges, soulignement de la page courante */
  --dt-sun-ink: #0B1446;         /* texte sur jaune */

  /* États (maquette « États du formulaire ») */
  --dt-state-ok: #2336E6;        /* lien réussi : le coût « 1 credit » en cobalt */
  --dt-state-ko: #0B1446;        /* lien raté : « 0 credits » à l'encre, jamais de rouge */
  --dt-state-wait: #2336E6;      /* en préparation : barre de progression cobalt */
  --dt-disabled: #C9D0FA;        /* bouton en pause (maintenance, préparation) */
  --dt-disabled-ink: #0B1446;
  --dt-focus: #0B1446;           /* anneau de focus sur fond clair */
  --dt-share-more: #C9D0FA;      /* part « 2 crédits ou plus » d'une barre de fichiers (dtk-share) */

  /* Mascotte : même personnage dans les deux thèmes */
  --dt-mascot-coin: #FFD23F;
  --dt-mascot-edge: #E3A400;
  --dt-mascot-ring: #E3AE00;
  --dt-mascot-cheek: #F2A900;
  --dt-mascot-line: #0B1446;
  --dt-mascot-white: #FFFFFF;
  --dt-mascot-accent: #2336E6;
  --dt-mascot-pale: #EEF1FF;
  --dt-mascot-accent-deep: #1626A8; /* flanc de la tirelire de recharge (planche Recharge) */
  --dt-mascot-cut: none;         /* découpe claire autour de la silhouette, en sombre seulement */

  /* Typographie */
  --dt-font-display: "Bungee", "Arial Black", sans-serif;
  --dt-font-body: "Nunito", "Segoe UI", sans-serif;

  --dt-fs-hero: clamp(34px, 5vw, 64px);
  --dt-fs-h1: clamp(32px, 5.3vw, 76px);
  --dt-fs-h2: clamp(24px, 3vw, 44px);
  --dt-fs-h3: clamp(17px, 1.5vw, 21px);
  --dt-fs-price: clamp(30px, 3.6vw, 46px);
  --dt-fs-price-big: clamp(34px, 4.4vw, 56px);
  --dt-fs-lead: clamp(16px, 1.5vw, 21px);
  --dt-fs-label: 17px;
  --dt-fs-body: 16px;
  --dt-fs-small: 15px;

  --dt-lh-title: 1.08;
  --dt-lh-body: 1.5;

  --dt-weight-body: 400;
  --dt-weight-strong: 700;
  --dt-weight-label: 800;

  /* Espace, base 4 */
  --dt-space-1: 4px;
  --dt-space-2: 8px;
  --dt-space-3: 12px;
  --dt-space-4: 16px;
  --dt-space-5: 24px;
  --dt-space-6: 32px;
  --dt-space-7: 48px;
  --dt-space-8: 64px;
  --dt-space-9: 104px;

  /* Mise en page */
  --dt-content: 1232px;
  --dt-prose: 680px;
  --dt-gutter: 24px;

  /* Formes : coins arrondis variés selon la hiérarchie */
  --dt-radius-xs: 12px;          /* petits boutons (46 px) */
  --dt-radius-sm: 14px;          /* champ et bouton du formulaire, 56 px */
  --dt-radius-md: 20px;          /* champ du héros, 68 px */
  --dt-radius-lg: 24px;          /* cadres, packs, panneaux */
  --dt-radius-xl: 32px;          /* cartes de la promesse */
  --dt-radius-2xl: 44px;         /* bloc héros */
  --dt-radius-pill: 999px;       /* badges, boutons d'achat, solde */

  /* Trait d'encre */
  --dt-stroke-thin: 2px;         /* badges, cartes secondaires au téléphone */
  --dt-stroke: 3px;              /* champs, boutons, cadres */
  --dt-stroke-bold: 4px;         /* héros, champ du héros, cartes et pack mis en avant */

  /* Ombre pleine décalée, jamais floue */
  --dt-lift-sm: 0 4px 0 var(--dt-lift-color);
  --dt-lift: 0 6px 0 var(--dt-lift-color);
  --dt-lift-lg: 0 10px 0 var(--dt-lift-color);

  /* Mouvement */
  --dt-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dt-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dt-dur-micro: 90ms;
  --dt-dur-short: 180ms;
  --dt-dur-medium: 320ms;
  --dt-dur-mascot: 520ms;
}

/* Sombre : fond bleu nuit profond (jamais noir), cobalt et jaune éclaircis. */
:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
  --dt-page: #0A0F2E;
  --dt-zone: #121A47;
  --dt-surface: #141D52;
  --dt-ink: #EEF1FF;
  --dt-ink-soft: #C3CAF5;
  --dt-line: #AEB8F5;
  --dt-lift-color: #02051A;
  --dt-action: #4455F5;
  --dt-action-hover: #3345EE;
  --dt-action-ink: #FFFFFF;
  --dt-action-ink-soft: #EEF1FF;
  --dt-action-text: #8E9BFF;
  --dt-hero: #1A2590;
  --dt-hero-halo: #222FA8;
  --dt-sun: #FFDA5C;
  --dt-sun-ink: #0A0F2E;
  --dt-state-ok: #8E9BFF;
  --dt-state-ko: #EEF1FF;
  --dt-state-wait: #8E9BFF;
  --dt-disabled: #2A3375;
  --dt-disabled-ink: #EEF1FF;
  --dt-focus: #FFDA5C;
  --dt-share-more: #2A3375;
  --dt-mascot-cut: drop-shadow(2px 0 0 #EEF1FF) drop-shadow(-2px 0 0 #EEF1FF) drop-shadow(0 2px 0 #EEF1FF) drop-shadow(0 -2px 0 #EEF1FF);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --dt-page: #0A0F2E;
    --dt-zone: #121A47;
    --dt-surface: #141D52;
    --dt-ink: #EEF1FF;
    --dt-ink-soft: #C3CAF5;
    --dt-line: #AEB8F5;
    --dt-lift-color: #02051A;
    --dt-action: #4455F5;
    --dt-action-hover: #3345EE;
    --dt-action-ink: #FFFFFF;
    --dt-action-ink-soft: #EEF1FF;
    --dt-action-text: #8E9BFF;
  --dt-hero: #1A2590;
  --dt-hero-halo: #222FA8;
    --dt-sun: #FFDA5C;
    --dt-sun-ink: #0A0F2E;
    --dt-state-ok: #8E9BFF;
    --dt-state-ko: #EEF1FF;
    --dt-state-wait: #8E9BFF;
    --dt-disabled: #2A3375;
    --dt-disabled-ink: #EEF1FF;
    --dt-focus: #FFDA5C;
    --dt-share-more: #2A3375;
    --dt-mascot-cut: drop-shadow(2px 0 0 #EEF1FF) drop-shadow(-2px 0 0 #EEF1FF) drop-shadow(0 2px 0 #EEF1FF) drop-shadow(0 -2px 0 #EEF1FF);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dt-dur-micro: 0ms; --dt-dur-short: 0ms; --dt-dur-medium: 0ms; --dt-dur-mascot: 0ms; }
}