/* ============================================================================
 * Chrome de la présentation : barre du haut, scène, navigation, panneaux.
 *
 * Toutes les couleurs sont des jetons. Les changer ici change toute la
 * présentation, chrome et diapositives. Sources : charte graphique 2025
 * (encre #1E293B, bleus #2B87FF / #1867BE, accents rose / vert / violet /
 * jaune), site octomine.com (Funnel Display, Funnel Sans, DM Serif Display
 * pour les mots d'accent) et l'interface de la plateforme (Roboto, smileys).
 * ========================================================================== */

:root {
  --stage: #E6EAF2;
  --slide-a: #EEF3FC;
  --slide-b: #EFEBF9;
  --slide-dark: #1E293B; /* le fond des pages sombres (tone: 'dark'), dans les deux thèmes */
  --surface: #FFFFFF;
  --surface-2: #F6F8FC;
  --surface-3: #EDF1F8;
  --ink: #1E293B;
  --ink-2: #475569;
  --ink-3: #7B879B;
  --line: #E1E6EF;
  --line-2: #ECEFF5;
  --rail: #C9D1DE;
  --empty: #E6EAF1;

  /* Charte 2025 : bleus de texte et de commande. */
  --brand: #2B87FF;
  --brand-deep: #1867BE;
  --brand-ink: #1867BE;
  --brand-line: rgba(43, 135, 255, .5);
  --brand-soft: rgba(43, 135, 255, .09);
  --on-brand: #FFFFFF;
  --focus: rgba(43, 135, 255, .45);

  /* Charte 2025 : couleurs d'accentuation (fond clair), en aplat doux et en encre. */
  --blue-soft: #DCE9FF;    --blue-ink: #1867BE;
  --green-soft: #D8F3E1;   --green-ink: #1F8A4C;   --green: #4ECA78;
  --pink-soft: #FCDDEA;    --pink-ink: #B8336B;    --pink: #F25B98;
  --violet-soft: #E3DFFF;  --violet-ink: #4F3DD6;  --violet: #8676FF;
  --yellow-soft: #FCF4C2;  --yellow-ink: #7A6200;  --yellow: #F8E520;
  --mark: #FDF6B5;         /* surligneur */
  --em-a: #2B87FF;         /* mot d'accent : dégradé bleu → violet */
  --em-b: #8676FF;
  --ia-a: #4F8BFF;         /* badge Octomine IA */
  --ia-b: #8B5CF6;

  /* Smileys des échelles (1 à 7 ; une échelle à 6 utilise 1, 2, 3, 5, 6, 7). */
  --s1: #E5514E; --s2: #F1802D; --s3: #F5B12F; --s4: #F5C836; --s5: #F5D53A; --s6: #87CE49; --s7: #2DB559;

  /* Bandes de score (météo, grille) : aplat fort, aplat doux, encre. */
  --good: #6CC36A;  --good-soft: #E2F5E6;  --good-ink: #1E8A45;
  --fair: #F5C04A;  --fair-soft: #FDF1D4;  --fair-ink: #9A6A06;
  --poor: #F29A4A;  --poor-soft: #FDE6D3;  --poor-ink: #B85314;
  --bad: #E86B67;   --bad-soft: #FBE0DF;   --bad-ink: #C23A36;

  /* Groupes de répondants (corrélations) : bas = rouge, haut = vert. */
  --low: #C23A36;
  --low-soft: rgba(229, 81, 78, .07);
  --low-line: rgba(229, 81, 78, .28);
  --high: #1E8A45;
  --high-soft: rgba(45, 181, 89, .08);
  --high-line: rgba(45, 181, 89, .28);

  --series: #8090A8;
  --series-base: #D7DEE8;
  --heat-lo: #EEF2F7;
  --heat-hi: #3A4A63;
  --heat-ink-lo: #1E293B;
  --heat-ink-hi: #FFFFFF;

  --qc-ground: #FAF7F0;    /* fond des écrans de questionnaire */
  --logo-ground: #FFFFFF;  /* fond des logos clients : blanc dans les deux thèmes, les logos sont faits pour lui */
  /* L'affiche imprimée (exemple de support de collecte) : du papier, identique dans les deux thèmes. */
  --poster-sky: #A9CBFF;
  --poster-mist: #EAF2FF;
  --poster-ink: #1E293B;
  --poster-ink-2: #3B4A63;
  /* L'e-mail d'invitation (exemple) : l'écran d'une messagerie, identique dans les deux thèmes. */
  --mail-alert: #FCE9E7;
  --mail-alert-ink: #D9534F;
  --mail-button: #2F8CF5;
  --mail-link: #1D4ED8;
  --mail-skeleton: #E6EAF0;
  --warn: #B45309;
  --phone: #1B2434;

  --shadow-slide: 0 1px 2px rgba(16, 24, 40, .05), 0 24px 60px -30px rgba(16, 24, 40, .30);
  --shadow-cell: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -16px rgba(16, 24, 40, .18);
  --shadow-pop: 0 16px 44px -12px rgba(16, 24, 40, .26), 0 2px 8px rgba(16, 24, 40, .06);

  --font: 'Funnel Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Funnel Display', 'Funnel Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-accent: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-app: 'Roboto', 'Helvetica Neue', Arial, sans-serif;   /* l'interface de la plateforme */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --stage: #0B1019;
    --slide-a: #1E293B;
    --slide-b: #221F3D;
    --surface: #27344B;
    --surface-2: #2B3953;
    --surface-3: #34435F;
    --ink: #FCFAF0;
    --ink-2: #C3CBD8;
    --ink-3: #8D99AD;
    --line: #3A4862;
    --line-2: #313E56;
    --rail: #4B5A76;
    --empty: #3A4760;
    --brand: #4C9BFF;
    --brand-deep: #2B87FF;
    --brand-ink: #8CC0FF;
    --brand-line: rgba(76, 155, 255, .55);
    --brand-soft: rgba(76, 155, 255, .14);
    --on-brand: #06111F;
    --focus: rgba(76, 155, 255, .55);
    --blue-soft: rgba(76, 155, 255, .18);   --blue-ink: #A9CFFF;
    --green-soft: rgba(78, 202, 120, .18);  --green-ink: #C4EDD2;
    --pink-soft: rgba(242, 91, 152, .18);   --pink-ink: #FBC8DD;
    --violet-soft: rgba(134, 118, 255, .22);--violet-ink: #CBC4FF;
    --yellow-soft: rgba(248, 229, 32, .16); --yellow-ink: #FDF6B5;
    --mark: rgba(253, 246, 181, .22);
    --em-a: #6FB1FF;
    --em-b: #B3A8FF;
    --good-soft: rgba(108, 195, 106, .18); --good-ink: #9BE3A8;
    --fair-soft: rgba(245, 192, 74, .18);  --fair-ink: #F9D98A;
    --poor-soft: rgba(242, 154, 74, .18);  --poor-ink: #F7BC86;
    --bad-soft: rgba(232, 107, 103, .18);  --bad-ink: #F4A3A0;
    --low: #F4A3A0;
    --low-soft: rgba(229, 81, 78, .12);
    --low-line: rgba(229, 81, 78, .4);
    --high: #9BE3A8;
    --high-soft: rgba(45, 181, 89, .12);
    --high-line: rgba(45, 181, 89, .4);
    --series: #8C9DB7;
    --series-base: #33425C;
    --heat-lo: #1C2740;
    --heat-hi: #B8C6DB;
    --heat-ink-lo: #FCFAF0;
    --heat-ink-hi: #0A0F19;
    --qc-ground: #1E293B;
    --warn: #F4B35E;
    --phone: #05080E;
    --shadow-slide: 0 1px 2px rgba(0, 0, 0, .4), 0 24px 60px -30px rgba(0, 0, 0, .75);
    --shadow-cell: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -16px rgba(0, 0, 0, .6);
    --shadow-pop: 0 16px 44px -12px rgba(0, 0, 0, .65), 0 2px 8px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --stage: #0B1019;
  --slide-a: #1E293B;
  --slide-b: #221F3D;
  --surface: #27344B;
  --surface-2: #2B3953;
  --surface-3: #34435F;
  --ink: #FCFAF0;
  --ink-2: #C3CBD8;
  --ink-3: #8D99AD;
  --line: #3A4862;
  --line-2: #313E56;
  --rail: #4B5A76;
  --empty: #3A4760;
  --brand: #4C9BFF;
  --brand-deep: #2B87FF;
  --brand-ink: #8CC0FF;
  --brand-line: rgba(76, 155, 255, .55);
  --brand-soft: rgba(76, 155, 255, .14);
  --on-brand: #06111F;
  --focus: rgba(76, 155, 255, .55);
  --blue-soft: rgba(76, 155, 255, .18);   --blue-ink: #A9CFFF;
  --green-soft: rgba(78, 202, 120, .18);  --green-ink: #C4EDD2;
  --pink-soft: rgba(242, 91, 152, .18);   --pink-ink: #FBC8DD;
  --violet-soft: rgba(134, 118, 255, .22);--violet-ink: #CBC4FF;
  --yellow-soft: rgba(248, 229, 32, .16); --yellow-ink: #FDF6B5;
  --mark: rgba(253, 246, 181, .22);
  --em-a: #6FB1FF;
  --em-b: #B3A8FF;
  --good-soft: rgba(108, 195, 106, .18); --good-ink: #9BE3A8;
  --fair-soft: rgba(245, 192, 74, .18);  --fair-ink: #F9D98A;
  --poor-soft: rgba(242, 154, 74, .18);  --poor-ink: #F7BC86;
  --bad-soft: rgba(232, 107, 103, .18);  --bad-ink: #F4A3A0;
  --low: #F4A3A0;
  --low-soft: rgba(229, 81, 78, .12);
  --low-line: rgba(229, 81, 78, .4);
  --high: #9BE3A8;
  --high-soft: rgba(45, 181, 89, .12);
  --high-line: rgba(45, 181, 89, .4);
  --series: #8C9DB7;
  --series-base: #33425C;
  --heat-lo: #1C2740;
  --heat-hi: #B8C6DB;
  --heat-ink-lo: #FCFAF0;
  --heat-ink-hi: #0A0F19;
  --qc-ground: #1E293B;
  --warn: #F4B35E;
  --phone: #05080E;
  --shadow-slide: 0 1px 2px rgba(0, 0, 0, .4), 0 24px 60px -30px rgba(0, 0, 0, .75);
  --shadow-cell: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -16px rgba(0, 0, 0, .6);
  --shadow-pop: 0 16px 44px -12px rgba(0, 0, 0, .65), 0 2px 8px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--stage);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font: inherit; color: inherit; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.ic { flex: none; display: block; }
kbd {
  display: inline-block;
  min-width: 20px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--ink-2);
  font: 700 11px/1.4 var(--font);
  text-align: center;
}

/* ---------- mise en page de l'application ---------- */

.dk-app {
  position: relative;
  height: 100%;
  display: grid;
  /* Une seule colonne, de la largeur de l'écran : un contenu trop large (l'en-tête sur une
     tablette debout) ne l'élargit pas, et la page garde sa taille. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.dk-bar {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 10px 16px 6px;
}
.dk-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  margin-left: -6px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  cursor: pointer;
}
.dk-brand img { height: 28px; width: auto; display: block; }
.dk-where {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
  overflow: hidden;
}
.dk-where__ch {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dk-where__sl {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  color: var(--ink-2);
}
.dk-bar__actions { display: flex; gap: 8px; margin-left: auto; }

/* Commandes du chrome : au trait bleu, pleines quand actives (charte). */
.dk-cbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--brand-line);
  border-radius: 8px;
  background: transparent;
  color: var(--brand-ink);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.dk-cbtn:hover { background: var(--brand-soft); border-color: var(--brand); }
.dk-cbtn[aria-expanded="true"],
.dk-cbtn[aria-pressed="true"],
.dk-cbtn--solid {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
.dk-cbtn--solid:hover { background: var(--brand); filter: brightness(1.06); }
.dk-cbtn--icon { width: 36px; padding: 0; }
.dk-cbtn--quiet { border-color: transparent; color: var(--ink-2); }
.dk-cbtn--quiet:hover { border-color: var(--line); background: var(--surface-2); }
.dk-cbtn--quiet[aria-pressed="true"] { background: var(--surface-3); border-color: var(--line); color: var(--ink); }
.dk-cbtn--sm { height: 30px; min-width: 30px; }
.dk-cbtn:disabled { opacity: .35; cursor: default; background: transparent; filter: none; }
.dk-cbtn--solid:disabled { background: var(--brand); }
.dk-cbtn:focus-visible,
.dk-brand:focus-visible,
.dk-progress__tick:focus-visible,
.dk-toc button:focus-visible,
.dk-qp button:focus-visible,
.dk-notes button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
/* Le choix de la langue, en haut à droite : un menu, à l'habit des commandes. */
.dk-lang {
  height: 36px;
  padding: 0 26px 0 10px;
  border: 1px solid var(--brand-line);
  border-radius: 8px;
  background: transparent;
  color: var(--brand-ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.dk-lang:hover { background-color: var(--brand-soft); border-color: var(--brand); }
/* Le chevron du menu, dessiné aux couleurs du thème. */
.dk-langbox { position: relative; display: inline-flex; }
.dk-langbox::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 11px;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-right: 1.6px solid var(--ink-3);
  border-bottom: 1.6px solid var(--ink-3);
  transform: rotate(45deg);
  pointer-events: none;
}
.dk-lang:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.dk-lang option { color: var(--ink); background: var(--surface); }
/* « Demander une démo » : le libellé court sur un écran étroit. */
.dk-cta__short { display: none; }
.dk-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.dk-count[data-zero] { background: var(--surface-3); color: var(--ink-2); }
[aria-expanded="true"] > .dk-count { background: var(--on-brand); color: var(--brand-ink); }

/* ---------- scène : la diapositive mise à l'échelle ---------- */

.dk-stage {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 4px 16px 6px;
  touch-action: pan-y;
}
.dk-frame {
  position: relative;
  width: calc(1280px * var(--s, .5));
  height: calc(720px * var(--s, .5));
}
.dk-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 720px;
  transform: scale(var(--s, .5));
  transform-origin: 0 0;
}
.dk-app:not(.is-ready) .dk-frame { opacity: 0; }
.dk-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  font-weight: 650;
}
.dk-app.is-ready .dk-loading { display: none; }

.slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 56px 72px 76px;
  border-radius: 14px;
  background: linear-gradient(150deg, var(--slide-a), var(--slide-b));
  box-shadow: var(--shadow-slide);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.5;
}
.slide__body { position: relative; height: 100%; }
.slide__foot {
  position: absolute;
  left: 72px;
  right: 72px;
  bottom: 26px;
  /* Logo à gauche, copyright au centre de la page, numéro à droite. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  font-size: 13px;
  color: var(--ink-3);
}
.slide__brand { grid-column: 1; justify-self: start; font-weight: 800; letter-spacing: -0.01em; color: var(--ink-2); }
/* Le logo s'aligne sur la ligne de base du texte voisin par celle de ses lettres
   (45 px sur 64 dans l'image) : les tentacules du poulpe descendent comme un jambage. */
.slide__brand img { height: 18px; width: auto; display: block; margin-bottom: calc(18px * -19 / 64); }
.slide__copy { grid-column: 2; font-size: 12px; }
.slide__where { grid-column: 3; justify-self: end; font-variant-numeric: tabular-nums; }

.slide.is-in-next { animation: slide-in-next .4s cubic-bezier(.2, .7, .2, 1); }
.slide.is-in-prev { animation: slide-in-prev .4s cubic-bezier(.2, .7, .2, 1); }
@keyframes slide-in-next { from { opacity: 0; transform: translateX(28px); } }
@keyframes slide-in-prev { from { opacity: 0; transform: translateX(-28px); } }

.dk-rotate-tip { display: none; }

/* ---------- navigation du bas ---------- */

.dk-nav {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px 12px;
}
.dk-progress {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dk-progress__ch { display: flex; gap: 3px; flex: var(--n, 1) 1 0; min-width: 0; }
.dk-progress__tick {
  position: relative;
  flex: 1 1 0;
  min-width: 6px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  cursor: pointer;
}
.dk-progress__tick::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 4px;
  border-radius: 2px;
  background: var(--rail);
  transition: background-color .2s, top .2s, height .2s;
}
.dk-progress__tick.is-done::before { background: var(--ink-3); }
.dk-progress__tick.is-current::before { top: 9px; height: 6px; border-radius: 3px; background: var(--brand); }
.dk-counter {
  min-width: 58px;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
/* Les étapes de la page : un segment chacune, qui se remplit pendant la lecture automatique.
   Sans étapes, une seule barre, montrée pendant la lecture seulement. */
.dk-pips { display: inline-flex; gap: 3px; width: 92px; }
.dk-pips i { position: relative; flex: 1 1 0; height: 4px; overflow: hidden; border-radius: 2px; background: var(--rail); background: color-mix(in srgb, var(--ink-3) 30%, transparent); }
.dk-pips b { position: absolute; inset: 0; background: var(--brand); transform: scaleX(0); transform-origin: left center; }
.dk-app:not(.is-auto) .dk-pips.is-bar { visibility: hidden; }
/* Lecture automatique : l'icône en bleu pendant la lecture ; la vitesse à côté. */
.dk-play.is-on, .dk-voice.is-on { color: var(--brand); }
/* La lecture reprend seule : un anneau se remplit autour de ▶ (engine/deck.js, holdOff). */
.dk-play { position: relative; overflow: visible; }
.dk-play__ring { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); transform: rotate(-90deg); pointer-events: none; }
.dk-play__ring circle { fill: none; stroke-width: 2.5; }
.dk-play__track { stroke: var(--line); }
.dk-play__arc { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation-name: dk-play-ring; animation-timing-function: linear; animation-fill-mode: both; }
@keyframes dk-play-ring { to { stroke-dashoffset: 0; } }
.dk-voice:disabled { opacity: .45; cursor: not-allowed; } /* Demo : pas de voix */
/* La voix bloquée par le navigateur (pas encore de clic) : une bulle invite à cliquer. */
.dk-voice { position: relative; }
.dk-voice.is-blocked { color: var(--brand); animation: dk-voice-call 1.6s ease-in-out infinite; }
.dk-voice.is-blocked::after {
  content: attr(data-hint);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--surface);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-cell);
  pointer-events: none;
}
@keyframes dk-voice-call { 50% { box-shadow: 0 0 0 5px var(--brand-soft); } }
.dk-speed { min-width: 44px; padding: 0 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
/* Le menu des vitesses, au-dessus du bouton : ouvert au survol ou au clic. */
.dk-speedbox { position: relative; display: flex; }
.dk-speedmenu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  min-width: 84px;
  display: flex;
  flex-direction: column;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-slide);
}
/* Le pont invisible entre le bouton et le menu : la souris y passe sans le refermer. */
.dk-speedmenu::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
.dk-speedmenu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: left;
  cursor: pointer;
}
.dk-speedmenu button:hover, .dk-speedmenu button:focus-visible { background: var(--surface-2); color: var(--ink); }
.dk-speedmenu button[aria-checked="true"] { color: var(--brand-ink); }
.dk-nav__tools { display: flex; gap: 2px; margin-left: 4px; }
/* Entre « Revenir au début » et « Précédent » : un trait, pour ne pas les confondre. */
.dk-nav__sep { flex: none; width: 1px; height: 22px; background: color-mix(in srgb, var(--ink-3) 50%, transparent); }

/* ---------- panneaux : sommaire, questions ---------- */

.dk-pop {
  position: absolute;
  top: calc(100% - 2px);
  right: 16px;
  z-index: 60;
  width: min(440px, calc(100vw - 32px));
  max-height: min(74vh, 660px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  color: var(--ink);
}
.dk-pop__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 8px;
}
.dk-pop__meta { font-size: 12.5px; color: var(--ink-3); }
.dk-pop__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 10px 12px 8px;
  margin-top: 4px;
  border-top: 1px solid var(--line-2);
  font-size: 12px;
  color: var(--ink-3);
}
.dk-pop__foot span { display: inline-flex; align-items: center; gap: 4px; }
.dk-kicker {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ink-3);
}

.dk-toc__list, .dk-toc__slides { list-style: none; margin: 0; padding: 0; }
.dk-toc__ch + .dk-toc__ch { border-top: 1px solid var(--line-2); }
.dk-toc__chbtn {
  width: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 1px 10px;
  align-items: baseline;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  text-align: left;
  cursor: pointer;
}
.dk-toc__chbtn:hover, .dk-toc__sl:hover { background: var(--surface-2); }
.dk-toc__num { font-weight: 800; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dk-toc__title { font-size: 15px; font-weight: 700; }
.dk-toc__range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.dk-toc__check { display: none; color: var(--brand-ink); }
.dk-toc__sub { grid-column: 2 / -1; font-size: 13px; color: var(--ink-2); }
.dk-toc__ch.is-current .dk-toc__num { color: var(--brand-ink); }
.dk-toc__ch.is-current .dk-toc__check { display: block; }
.dk-toc__slides { padding: 0 0 8px; }
.dk-toc__sl {
  width: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  padding: 6px 12px;
  border: 0;
  border-radius: 6px;
  background: none;
  text-align: left;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
}
.dk-toc__n { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dk-toc__sl.is-current { background: var(--brand-soft); color: var(--brand-ink); font-weight: 650; }
.dk-toc__sl.is-current .dk-toc__n { color: var(--brand-ink); }

.dk-qp__form { display: flex; gap: 8px; padding: 2px 12px 10px; }
.dk-qp__form input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--rail);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
}
.dk-qp__form input:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--brand); }
.dk-qp__list { list-style: none; margin: 0; padding: 0 4px 6px; }
.dk-qp__item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 30px;
  gap: 10px;
  align-items: start;
  padding: 8px;
  border-radius: 8px;
}
.dk-qp__item + .dk-qp__item { border-top: 1px solid var(--line-2); }
.dk-qp__check {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--rail);
  border-radius: 50%;
  background: none;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-2);
  cursor: pointer;
}
.dk-qp__item.is-done .dk-qp__check { background: var(--ink-2); border-color: var(--ink-2); color: var(--surface); }
.dk-qp__item.is-done .dk-qp__text { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.dk-qp__text { padding-top: 3px; font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.dk-qp__rm {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
}
.dk-qp__rm:hover { background: var(--surface-2); color: var(--ink); }
.dk-qp__empty { padding: 6px 8px 10px; font-size: 13.5px; color: var(--ink-2); }

/* ---------- notes de présentation : une colonne à gauche de la page ---------- */

.dk-notes {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 18px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-cell);
  font-size: 14px;
}
/* La page se réduit pour lui laisser la place (voir fit() dans deck.js), et s'aligne sur son haut. */
.dk-app.has-notes .dk-stage {
  grid-template-columns: clamp(260px, 28vw, 380px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
}
.dk-app.has-notes .dk-notes { grid-column: 1; grid-row: 1; align-self: stretch; }
.dk-app.has-notes .dk-frame { grid-column: 2; grid-row: 1; justify-self: center; }
.dk-app.has-notes .dk-rotate-tip { display: none; }
.dk-app.is-fs.has-notes .dk-stage { padding: 60px 16px 62px; }
/* Écran étroit et en hauteur (téléphone, tablette debout) : les notes sous la page. */
@media (max-width: 899px) and (orientation: portrait) {
  .dk-app.has-notes .dk-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); row-gap: 10px; }
  .dk-app.has-notes .dk-frame { grid-column: 1; grid-row: 1; }
  .dk-app.has-notes .dk-notes { grid-column: 1; grid-row: 2; }
}
.dk-notes__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 -18px;
  padding: 12px 18px 10px;
  border-bottom: 1px solid var(--line-2);
  background: var(--surface);
}
.dk-notes__head .dk-kicker { margin-right: auto; }
.dk-chrono {
  margin-right: 4px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.dk-chrono.is-over { color: var(--warn); }
.dk-notes h4 {
  margin: 12px 0 3px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dk-notes p { margin: 0; line-height: 1.5; white-space: pre-line; }
.dk-notes code { font-size: 12.5px; color: var(--ink-2); }
.dk-notes__title {
  margin: 0 auto 0 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dk-notes__head + .dk-notes__text,
.dk-notes__head + .dk-notes__empty { margin-top: 14px; }
.dk-notes__text { display: flex; flex-direction: column; gap: 8px; line-height: 1.5; color: var(--ink-2); }
.dk-notes .dk-notes__key { margin-bottom: 8px; font-size: 15px; font-weight: 650; line-height: 1.4; color: var(--ink); }
.dk-notes .dk-notes__key:last-child { margin-bottom: 0; }
/* Message clé seul dans son étape : l'espace passe sous le bloc, le surlignage reste équilibré. */
.dk-notes__step:has(> .dk-notes__key:only-child) { margin-bottom: 2px; }
/* Le passage de l'étape à l'écran : trait bleu à gauche, fond bleu très léger. Les marges
   négatives compensent le retrait : le texte ne bouge pas quand le bloc s'allume. */
.dk-notes__step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: -6px -10px -6px -12px;
  padding: 6px 10px 6px 12px;
  border-radius: 0;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.dk-notes__step.is-now { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
/* Le passage d'une démonstration au curseur en cours : fond et barre au dégradé des titres ;
   les couleurs de la barre défilent doucement, pour dire qu'une action se joue à l'écran. */
.dk-notes__step { position: relative; }
.dk-notes__step.is-now.is-action {
  border-radius: 0;
  background: linear-gradient(120deg, color-mix(in srgb, var(--em-a) 16%, transparent), color-mix(in srgb, var(--em-b) 16%, transparent));
  box-shadow: none;
}
.dk-notes__step.is-action::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--em-a), var(--em-b), var(--em-a), var(--em-b));
  background-size: 100% 300%;
  animation: dk-action-flow 3s linear infinite;
}
@keyframes dk-action-flow { to { background-position: 0 100%; } } /* une période du dégradé : la boucle ne saute pas */
/* Chaque passage mène à son étape, au clic : la main, et un fond léger au survol. */
.dk-notes__text [data-go] { cursor: pointer; }
.dk-notes__step[data-go]:not(.is-now):hover { background: var(--surface-2); }
.dk-notes__text strong { font-weight: 700; color: var(--ink); }
.dk-notes__text h5 {
  margin: 4px 0 -4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.dk-notes__text ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.dk-notes__text li::marker { color: var(--brand); }
.dk-notes__cue {
  padding: 6px 10px;
  border-left: 3px solid var(--brand-line);
  border-radius: 0 6px 6px 0;
  background: var(--surface-2);
  font-size: 13px;
  font-style: italic;
}
/* Transition, indice ou astuce (ligne commençant par 💡) : plus petit, plus clair, en italique. */
.dk-notes__tip { display: flex; align-items: baseline; gap: 7px; padding-top: 6px; font-size: 13px; font-style: italic; color: var(--ink-3); }
.dk-notes__tip-ic { flex: none; font-size: 12px; opacity: .65; }
.dk-notes__empty { color: var(--ink-3); }
.dk-notes__foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.dk-linkbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.dk-linkbtn.is-armed { color: var(--warn); font-weight: 700; }

/* ---------- plein écran : le chrome s'efface quand la souris se repose ---------- */

.dk-app.is-fs { grid-template-rows: minmax(0, 1fr); }
.dk-app.is-fs .dk-stage { grid-row: 1; padding: 0; }
.dk-app.is-fs .dk-bar,
.dk-app.is-fs .dk-nav {
  position: absolute;
  left: 0;
  right: 0;
  background: color-mix(in srgb, var(--stage) 90%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: opacity .3s;
}
.dk-app.is-fs .dk-bar { top: 0; }
.dk-app.is-fs .dk-nav { bottom: 0; }
.dk-app.is-fs.is-idle .dk-bar,
.dk-app.is-fs.is-idle .dk-nav { opacity: 0; pointer-events: none; }
.dk-app.is-fs.is-idle { cursor: none; }
.dk-app.is-fs .slide { border-radius: 0; box-shadow: none; }

/* ---------- écrans étroits ---------- */

@media (max-width: 720px) {
  .dk-where, .dk-progress, .dk-cbtn__label { display: none; }
  .dk-nav { justify-content: flex-end; gap: 8px; }
  .dk-counter { margin-right: auto; text-align: left; }
  /* Téléphone : la lecture automatique garde sa vitesse mémorisée, sans le bouton. */
  .dk-speedbox { display: none; }
}
@media (max-width: 480px) {
  .dk-nav { gap: 6px; padding-left: 10px; padding-right: 10px; }
  /* Téléphone : l'interrupteur prend la place du plein écran (que l'iPhone ne propose pas). */
  #dk-btn-fs { display: none; }
  .dk-counter { min-width: 0; }
  .dk-pips { width: 44px; }
  #dk-btn-first, .dk-nav__sep { display: none; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .dk-rotate-tip {
    display: block;
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 12px;
    margin: 0;
    text-align: center;
    font-size: 13px;
    color: var(--ink-2);
  }
}

/* ---------- vue mobile : téléphone debout (deck.js, MOBILE) ----------
   En haut, le logo et les boutons, qui flottent sur la page (elle passe dessous) ; en bas, la
   barre de navigation (avec la vitesse).
   Entre les deux : la page, recomposée en colonne sur 360 px (les 3/4), puis les notes (le
   quart du bas). La page et les notes défilent seules pendant la lecture ; le doigt sur
   l'écran la suspend. Chaque diapositive donne sa mise en page mobile (mobile.css). */

/* L'en-tête flotte sur la page : le logo et les boutons, sur un voile dégradé (presque opaque en
   haut, transparent en bas) ; la page monte jusqu'en haut de l'écran et passe dessous en
   défilant. Le voile laisse passer le doigt ; les boutons, non. */
.dk-app[data-layout="mobile"] { grid-template-rows: minmax(0, 1fr) auto; }
.dk-app[data-layout="mobile"] .dk-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  min-height: 0;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 20px 22px; /* 20 px : aligné sur le contenu de la page */
  gap: 8px;
  --hdr-bg: var(--slide-a); /* la couleur du haut de la page à l'écran */
  background: linear-gradient(180deg, color-mix(in srgb, var(--hdr-bg) 97%, transparent) 0%, color-mix(in srgb, var(--hdr-bg) 88%, transparent) 55%, transparent 100%);
  pointer-events: none;
}
.dk-app[data-layout="mobile"] .dk-bar > * { pointer-events: auto; }
/* Sur une page sombre (data-tone, posé par deck.js), le voile est sombre et le logo blanc. */
.dk-app[data-layout="mobile"][data-tone="dark"] .dk-bar { --hdr-bg: var(--slide-dark); }
.dk-app[data-layout="mobile"][data-tone="dark"] .dk-brand img { filter: brightness(0) invert(1); }
/* La première page porte son logo, à côté de la devise : celui de l'en-tête s'efface (sa place
   reste, les boutons ne bougent pas). */
.dk-app[data-layout="mobile"][data-first] .dk-brand { visibility: hidden; }
.dk-app[data-layout="mobile"] .dk-brand img { height: 26px; }
.dk-app[data-layout="mobile"] #dk-btn-notes,
.dk-app[data-layout="mobile"] .dk-where { display: none; }
.dk-app[data-layout="mobile"] .dk-bar__actions { gap: 4px; }
.dk-app[data-layout="mobile"] .dk-stage {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 3fr) minmax(0, 1fr);
  row-gap: 8px;
  place-items: stretch;
  padding: 2px 8px 2px;
}
.dk-app[data-layout="mobile"] .dk-frame { grid-row: 1; grid-column: 1; width: 100%; height: 100%; min-height: 0; }
.dk-app[data-layout="mobile"] .dk-canvas { left: var(--mx, 0px); width: 360px; height: var(--mh, 480px); }
.dk-app[data-layout="mobile"] .dk-rotate-tip { display: none; }

/* La page : elle défile dans son cadre, sans barre de défilement ni pied de page. */
.dk-app[data-layout="mobile"] .slide {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  /* En haut, la place de l'en-tête qui flotte dessus (en px d'écran, ramenés à la page). */
  padding: calc((54px + env(safe-area-inset-top, 0px)) / var(--s, 1)) 12px 18px;
  border-radius: 12px;
  font-size: 15px;
}
.dk-app[data-layout="mobile"] .slide::-webkit-scrollbar { display: none; }
/* Le défilement vertical reste au navigateur ; le geste horizontal tourne la page (bindSwipe). */
.dk-app[data-layout="mobile"] .slide,
.dk-app[data-layout="mobile"] .dk-notes { touch-action: pan-y; }
/* Le contenu prend au moins la hauteur du cadre (un bloc peut se caler en bas). */
.dk-app[data-layout="mobile"] .slide__body { height: auto; min-height: 100%; display: flex; flex-direction: column; }
.dk-app[data-layout="mobile"] .slide__body > * { height: auto; flex: 1 0 auto; }
.dk-app[data-layout="mobile"] .slide__foot { display: none; }
/* Les briques du kit, à la taille du téléphone (une diapositive les règle dans mobile.css). */
.dk-app[data-layout="mobile"] .slide .k { font-size: 11px; letter-spacing: 1px; }
.dk-app[data-layout="mobile"] .slide .t { font-size: 24px; line-height: 1.12; }
.dk-app[data-layout="mobile"] .slide .t--xl { font-size: 30px; line-height: 1.08; }
.dk-app[data-layout="mobile"] .slide .t--md { font-size: 22px; }
.dk-app[data-layout="mobile"] .slide .head { gap: 6px; }
.dk-app[data-layout="mobile"] .slide .lead { font-size: 15px; }
.dk-app[data-layout="mobile"] .slide .split { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.dk-app[data-layout="mobile"] .slide .tone-ic { width: 38px; height: 38px; border-radius: 10px; }
.dk-app[data-layout="mobile"] .slide .bubble { font-size: 14px; padding: 10px 12px; }
.dk-app[data-layout="mobile"] .slide .chip { font-size: 12px; padding: 3px 9px; }
.dk-app[data-layout="mobile"] .slide .ia { font-size: 12.5px; padding: 4px 10px 4px 8px; }

/* Les notes : toujours là, dans le quart du bas, sans en-tête ; le haut et le bas s'estompent. */
.dk-app[data-layout="mobile"] .dk-notes {
  grid-row: 2;
  grid-column: 1;
  align-self: stretch;
  padding: 8px 14px 14px;
  border-radius: 0;
  font-size: 14px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8px, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(180deg, transparent 0, #000 8px, #000 calc(100% - 16px), transparent);
}
.dk-app[data-layout="mobile"] .dk-notes::-webkit-scrollbar { display: none; }
.dk-app[data-layout="mobile"] .dk-notes__head { display: none; }
.dk-app[data-layout="mobile"] .dk-notes__head + .dk-notes__text,
.dk-app[data-layout="mobile"] .dk-notes__head + .dk-notes__empty { margin-top: 6px; }
.dk-app[data-layout="mobile"] .dk-notes .dk-notes__key { font-size: 14.5px; }

/* La barre du bas : serrée, avec la vitesse (le thème est passé en haut). */
.dk-app[data-layout="mobile"] .dk-nav { gap: 4px; padding: 4px 8px 10px; }
.dk-app[data-layout="mobile"] .dk-speedbox { display: flex; }
.dk-app[data-layout="mobile"] .dk-speed { min-width: 40px; padding: 0 6px; }
.dk-app[data-layout="mobile"] .dk-counter { min-width: 0; margin-right: auto; font-size: 13px; white-space: nowrap; }
.dk-app[data-layout="mobile"] .dk-pips { width: 40px; margin-right: 12px; } /* de l'air avant ▶ (et son anneau de reprise) */
/* Téléphone étroit : la barre ne tient pas tout ; les points des étapes s'effacent (le passage
   en cours reste surligné dans les notes). */
@media (max-width: 400px) { .dk-app[data-layout="mobile"] .dk-pips { display: none; } }
.dk-app[data-layout="mobile"] .dk-nav .dk-cbtn--icon { width: 34px; }
/* « Recommencer », en icône seule. */
.dk-app[data-layout="mobile"] .dk-restart { width: 34px; padding: 0; }
.dk-app[data-layout="mobile"] .dk-restart .dk-cbtn__label { display: none; }
/* La bulle « Touchez l'écran… » : calée à droite, elle ne sort pas de l'écran. */
.dk-app[data-layout="mobile"] .dk-voice.is-blocked::after { left: auto; right: -84px; transform: none; }

/* ---------- indication de départ (vue mobile, app) : comment changer de page ---------- */

.dk-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 18px 10px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 90%, transparent);
  box-shadow: var(--shadow-pop);
  color: var(--surface);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity .35s ease, transform .35s ease;
}
.dk-hint.is-on { opacity: 1; transform: translate(-50%, 0); }
/* Vue mobile : centrée sur la zone de texte (engine/deck.js, showStartHint, pose top). Elle y
   reste 6 s : réduite au doigt et aux chevrons, pour que le texte se lise autour. */
.dk-hint--notes { bottom: auto; padding: 7px 14px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 78%, transparent); transform: translate(-50%, calc(-50% + 8px)); }
.dk-hint--notes.is-on { transform: translate(-50%, -50%); }
.dk-hint--notes .dk-hint__txt { display: none; }
/* Faire défiler le texte : à droite de la zone, sous le pouce ; le doigt monte et descend. */
.dk-hint--notes.dk-hint--y { left: auto; right: 12px; padding: 6px 8px; transform: translate(0, calc(-50% + 8px)); }
.dk-hint--notes.dk-hint--y.is-on { transform: translate(0, -50%); }
.dk-hint--y .dk-hint__row { flex-direction: column; gap: 0; }
.dk-hint__hand.dk-hint__hand--y { animation: dk-hint-scroll 1.6s ease-in-out infinite; } /* de haut en bas (et non le balayage) */
.dk-hint__chev--up { animation: dk-hint-up 1.6s ease-in-out infinite; }
.dk-hint__chev--dn { animation: dk-hint-dn 1.6s ease-in-out infinite; }
@keyframes dk-hint-scroll { 0%, 100% { transform: translateY(5px); } 50% { transform: translateY(-5px); } }
@keyframes dk-hint-up { 0%, 100% { transform: none; opacity: .35; } 50% { transform: translateY(-2px); opacity: 1; } }
@keyframes dk-hint-dn { 0%, 100% { transform: translateY(2px); opacity: 1; } 50% { transform: none; opacity: .35; } }
.dk-hint__row { display: flex; align-items: center; gap: 4px; }
.dk-hint__hand, .dk-hint__mouse { display: inline-flex; }
.dk-hint__chev { opacity: .65; }
/* Mobile : le doigt va et vient, les chevrons battent de chaque côté. */
.dk-hint__hand { animation: dk-hint-swipe 1.6s ease-in-out infinite; }
.dk-hint__chev--l { animation: dk-hint-l 1.6s ease-in-out infinite; }
.dk-hint__chev--r { animation: dk-hint-r 1.6s ease-in-out infinite; }
/* App : la molette de la souris descend, le chevron aussi. */
.dk-hint__wheel { animation: dk-hint-wheel 1.4s ease-in-out infinite; }
.dk-hint__chev--d { animation: dk-hint-down 1.4s ease-in-out infinite; }
@keyframes dk-hint-swipe { 0%, 100% { transform: translateX(-12px) rotate(-8deg); } 50% { transform: translateX(12px) rotate(8deg); } }
@keyframes dk-hint-l { 0%, 100% { transform: translateX(-3px); opacity: 1; } 50% { transform: none; opacity: .35; } }
@keyframes dk-hint-r { 0%, 100% { transform: none; opacity: .35; } 50% { transform: translateX(3px); opacity: 1; } }
@keyframes dk-hint-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(5px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes dk-hint-down { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }

/* ---------- app (?mode=app, écran de plus de 640 px) ----------
   En haut, le logo, la page, « Demander une démo », le thème, le sommaire ; à droite, les
   pages en rail vertical ; à gauche, le texte de l'étape en grand et la liste des étapes ;
   au centre, la page telle qu'en présentation. En bas : lecture, vitesse, voix, flèches. */

.dk-lhint { display: none; }
.dk-cta { text-decoration: none; }
.dk-app[data-layout="app"] .dk-bar { min-height: 64px; padding: 12px 24px 8px 32px; gap: 18px; }
.dk-app[data-layout="app"] #dk-btn-notes { display: none; }
.dk-app[data-layout="app"] .dk-bar__actions { align-items: center; }
/* Tablette : la place manque pour le chapitre en cours (la page le dit aussi, en tête). */
@media (max-width: 899px) { .dk-app[data-layout="app"] .dk-where { display: none; } }
.dk-app[data-layout="app"] .dk-cta { height: 40px; padding: 0 18px; border-radius: 10px; font-size: 14.5px; }
.dk-app[data-layout="app"] .dk-stage { touch-action: pinch-zoom; }
@media not all and (max-width: 899px) and (orientation: portrait) {
  /* La colonne du texte reste étroite (le texte y tient à sa taille) : la place va à la page.
     Sa largeur suit celle de la fenêtre (24vw) : quand on zoome (Ctrl +), son texte grossit
     mais elle ne prend pas plus de place à l'écran, et la page garde sa taille. */
  .dk-app[data-layout="app"] .dk-stage {
    grid-template-columns: clamp(220px, 24vw, 370px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: 32px;
    align-items: center;
    padding: 8px 60px 8px 32px;
  }
  .dk-app[data-layout="app"] .dk-notes { align-self: center; max-height: 100%; }
  .dk-app[data-layout="app"] .dk-frame { align-self: center; }
}
/* La colonne du texte : sans cadre, le texte à même la page. */
.dk-app[data-layout="app"] .dk-notes {
  padding: 4px 6px 4px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  scrollbar-width: none;
}
.dk-app[data-layout="app"] .dk-notes::-webkit-scrollbar { display: none; }
.dk-tour { display: flex; flex-direction: column; gap: 20px; }
.dk-tour.is-in { animation: dk-tour-in .5s ease both; }
.dk-tour__k { font-size: 12.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brand-ink); }
.dk-tour__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Demo (deck.js, renderFold) : le texte replié, la page prend toute la place ; le bouton « texte »
   de la barre le rouvre. */
.dk-app[data-layout="app"].is-folded .dk-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: center; }
.dk-app[data-layout="app"].is-folded .dk-frame { grid-column: 1; grid-row: 1; justify-self: center; }
/* L'écran d'accueil (avant « Écouter » / « Voir ») : ni chapitre ni texte, seulement les deux
   boutons et les flèches ; le reste vient avec la présentation. */
.dk-app.is-welcome[data-layout="app"] .dk-tour .dk-notes__text,
.dk-app.is-welcome[data-layout="app"] .dk-tour__top { display: none; }
/* Le passage de l'étape, seul et en grand ; le message clé comme un titre. */
.dk-app[data-layout="app"] .dk-notes__text { gap: 12px; font-size: 19px; line-height: 1.5; color: var(--ink-2); }
.dk-app[data-layout="app"] .dk-notes__step { display: none; margin: 0; padding: 2px 0 2px 20px; background: none; box-shadow: inset 3px 0 0 var(--brand); }
.dk-app[data-layout="app"] .dk-notes__step.is-now { display: flex; gap: 12px; background: none; animation: dk-tour-text .45s ease both; }
.dk-app[data-layout="app"] .dk-notes__step.is-now.is-action { background: none; }
.dk-app[data-layout="app"] .dk-notes .dk-notes__key { margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.18; letter-spacing: -0.015em; color: var(--ink); }
.dk-app[data-layout="app"] .dk-notes__text strong { color: var(--ink); }
.dk-app[data-layout="app"] .dk-notes__text ul { gap: 10px; padding-left: 20px; }
.dk-app[data-layout="app"] .dk-notes__text h5 { margin: 0; font-size: 12px; }
.dk-app[data-layout="app"] .dk-notes__tip { padding-top: 4px; font-size: 16px; }
.dk-app[data-layout="app"] .dk-notes.is-long .dk-notes__text { font-size: 16.5px; }
.dk-app[data-layout="app"] .dk-notes.is-long .dk-notes__key { font-size: 25px; }
/* La liste des étapes : au clic, l'étape se joue ; celle en cours se remplit. */
.dk-tour__steps { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; padding: 0; }
.dk-tour__step {
  position: relative;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 10px;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink-3);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.dk-tour__step:hover { background: var(--surface-2); color: var(--ink-2); }
.dk-tour__n { min-width: 16px; font-size: 12px; color: var(--ink-3); }
.dk-tour__step.is-done { color: var(--ink-2); }
.dk-tour__step.is-now { background: var(--brand-soft); color: var(--brand-ink); }
.dk-tour__step.is-now .dk-tour__n { color: var(--brand-ink); }
.dk-tour__step i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left center; }
.dk-tour__step:not(.is-now) i { display: none; }
/* Une longue liste (le jeu : neuf étapes) se resserre. */
.dk-tour__steps:has(> li:nth-child(8)) .dk-tour__step { padding-block: 4px; }
/* « Écouter la présentation », sur la première page. */
.dk-tour__listen {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  padding: 10px 24px 10px 10px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--em-a), var(--em-b));
  box-shadow: 0 14px 30px -14px rgba(98, 88, 246, .8);
  color: #FFFFFF;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.dk-tour__listen > .ic { box-sizing: content-box; padding: 11px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.dk-tour__listen > span { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.dk-tour__listen small { font-size: 12.5px; font-weight: 500; opacity: .88; }
.dk-tour__listen:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* Les deux visites, de la même largeur : « Voir » (sans le son), mis en avant, puis « Écouter »
   (avec la voix), en second choix (dk-tour__alt, blanc). */
.dk-tour__start { align-self: flex-start; display: inline-flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 6px; }
.dk-tour__start .dk-tour__listen { align-self: stretch; margin: 0; }
.dk-tour__alt { background: var(--surface); color: var(--brand-ink); box-shadow: inset 0 0 0 1.5px var(--brand-line), var(--shadow-cell); }
.dk-tour__alt > .ic { background: var(--brand-soft); }
/* Vue mobile de l'app : au début, les boutons de départ flottent au bas de la page (la même
   grille que la scène : 3/4 la page, 1/4 le texte). Le mode d'emploi de la zone de texte vient
   plus tard, la première fois qu'on rouvre le texte (.dk-guide). */
.dk-start {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  grid-template-rows: minmax(0, 3fr) minmax(0, 1fr);
  row-gap: 8px;
  padding: 2px 8px;
  pointer-events: none;
  animation: dk-start-in .45s ease both;
}
/* Le flou progressif de la page, sous les boutons : net en haut, de plus en plus flou vers le bas.
   Six couches, chacune deux fois plus floue que la précédente, chacune visible sur sa tranche. */
.dk-start-blur { position: absolute; inset: 0; z-index: 4; border-radius: 12px; overflow: hidden; pointer-events: none; }
.dk-start-blur i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  -webkit-backdrop-filter: blur(var(--b));
  backdrop-filter: blur(var(--b));
  -webkit-mask-image: var(--m);
  mask-image: var(--m);
}
.dk-start-blur i:nth-child(1) { --b: 1px; --m: linear-gradient(180deg, transparent 48%, #000 56%, #000 64%, transparent 72%); }
.dk-start-blur i:nth-child(2) { --b: 2px; --m: linear-gradient(180deg, transparent 56%, #000 64%, #000 72%, transparent 80%); }
.dk-start-blur i:nth-child(3) { --b: 4px; --m: linear-gradient(180deg, transparent 64%, #000 72%, #000 80%, transparent 88%); }
.dk-start-blur i:nth-child(4) { --b: 7px; --m: linear-gradient(180deg, transparent 72%, #000 80%, #000 88%, transparent 96%); }
.dk-start-blur i:nth-child(5) { --b: 12px; --m: linear-gradient(180deg, transparent 80%, #000 88%, #000 100%); }
.dk-start-blur i:nth-child(6) { --b: 18px; --m: linear-gradient(180deg, transparent 88%, #000 96%); }
.dk-start__btns { align-self: end; justify-self: center; display: flex; flex-direction: column; gap: 8px; width: min(100%, 340px); padding-bottom: 18px; pointer-events: auto; }
/* Le bouton flotte sur la page : une ombre portée le détache (une ombre sombre, diffuse, et la
   lueur de son dégradé), sur une page claire comme sur une page sombre, sans voiler la page. */
.dk-start .dk-tour__listen {
  width: 100%;
  margin: 0;
  padding: 12px 20px 12px 12px;
  font-size: 17px;
  box-shadow: 0 12px 28px -6px rgba(8, 13, 30, .55), 0 18px 34px -14px rgba(98, 88, 246, .85);
}
.dk-start .dk-tour__alt { box-shadow: inset 0 0 0 1.5px var(--brand-line), 0 12px 28px -6px rgba(8, 13, 30, .45); }
.dk-start .dk-tour__listen small { font-size: 13px; }
/* La zone de texte, désignée : un cadre pointillé qui respire, son nom sur le bord (comme le
   champ « Commentaire » de la plateforme), le mode d'emploi au milieu. Le texte des notes se
   devine derrière : c'est bien lui qu'on fait défiler. */
.dk-start__zone { position: relative; display: grid; place-items: center; padding: 10px; border: 2px dashed var(--brand); border-radius: 14px; background: linear-gradient(color-mix(in srgb, var(--brand) 7%, transparent), color-mix(in srgb, var(--brand) 7%, transparent)), color-mix(in srgb, var(--stage) 86%, transparent); animation: dk-zone 2.2s ease-in-out infinite; }
.dk-start__legend { position: absolute; top: -9px; left: 14px; padding: 0 8px; border-radius: 6px; background: var(--stage); color: var(--brand-ink); font-size: 11px; font-weight: 800; letter-spacing: 1px; line-height: 16px; text-transform: uppercase; }
@keyframes dk-zone { 0%, 100% { border-color: var(--brand); } 50% { border-color: var(--brand-line); } }
/* Un petit voile derrière le mode d'emploi, aux bords fondus : il se lit, et le texte des notes
   se devine autour. */
.dk-start__how { box-sizing: border-box; width: min(100%, 320px); display: flex; flex-direction: column; gap: 8px; padding: 6px 8px; border-radius: 14px; background: color-mix(in srgb, var(--stage) 78%, transparent); box-shadow: 0 0 14px 8px color-mix(in srgb, var(--stage) 78%, transparent); color: var(--ink); font-size: 13.5px; font-weight: 650; line-height: 1.3; }
.dk-start__how p { display: flex; align-items: center; gap: 12px; margin: 0; }
.dk-start__ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 38px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); }
.dk-start__ic--y { flex-direction: column; }
@keyframes dk-start-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Le mode d'emploi, posé un instant sur le texte rouvert (deck.js, showGuide) : le même cadre
   pointillé et les mêmes gestes ; le doigt le traverse ; il s'efface en fondu. */
.dk-guide { position: absolute; z-index: 20; left: 8px; right: 8px; display: grid; pointer-events: none; animation: dk-start-in .35s ease both; transition: opacity .3s ease; }
.dk-guide > .dk-start__zone { min-height: 0; }
.dk-guide.is-out { opacity: 0; }
/* Les pages en rail vertical, à droite (le même que la barre de progression). */
.dk-app[data-layout="app"] .dk-nav { position: static; min-height: 76px; padding: 6px 24px 14px 32px; } /* la place du lecteur */
.dk-app[data-layout="app"] .dk-progress {
  position: absolute;
  z-index: 30;
  top: 50%;
  right: 16px;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 28px;
  transform: translateY(-50%);
}
.dk-app[data-layout="app"] .dk-progress__ch { flex: none; flex-direction: column; gap: 4px; }
.dk-app[data-layout="app"] .dk-progress__tick { flex: none; width: 28px; height: 22px; min-width: 0; }
.dk-app[data-layout="app"] .dk-progress__tick::before { top: 0; bottom: 0; left: 12px; right: auto; width: 4px; height: auto; }
.dk-app[data-layout="app"] .dk-progress__tick.is-current::before { top: 0; left: 11px; width: 6px; height: auto; }
/* La barre du bas : ce qui sert à présenter s'efface ; ▶ / ⏸ reste, au centre (plus bas). */
.dk-app[data-layout="app"] #dk-btn-first,
.dk-app[data-layout="app"] .dk-nav__sep,
.dk-app[data-layout="app"] #dk-btn-fs { display: none; }
.dk-app[data-layout="app"] .dk-lhint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  color: var(--ink-3);
  font-size: 13.5px;
  font-weight: 600;
  transition: color .3s ease;
}
.dk-lhint.is-ready { color: var(--brand-ink); }
.dk-lhint.is-ready .dk-lhint__ic { animation: dk-hint-down 1.2s ease-in-out infinite; }
.dk-lhint.is-end .dk-lhint__touch { visibility: hidden; }
.dk-lhint__ic { display: inline-flex; }
.dk-lhint__touch { display: inline-flex; align-items: center; gap: 10px; }
/* Avec un clavier (souris, pavé) : pas de « défiler » en bas, les flèches sont indiquées au
   départ, sous les boutons ; sur un écran tactile, l'inverse. */
@media (hover: hover) and (pointer: fine) { .dk-lhint__touch { display: none; } }
@media (hover: none), (pointer: coarse) { .dk-tour__how { display: none; } }
/* Les flèches du clavier : les quatre touches en T renversé, en gris, qui s'allument l'une
   après l'autre ; le texte à côté. */
.dk-notes .dk-tour__how { display: flex; align-items: center; gap: 14px; margin: 18px 0 0 6px; color: var(--ink-2); font-size: 13.5px; font-weight: 600; line-height: 1.2; } /* .dk-notes : passe devant l'interligne des notes */
.dk-keys { flex: none; display: grid; grid-template-columns: repeat(3, 22px); grid-template-rows: repeat(2, 18px); gap: 3px; }
.dk-key { display: grid; place-items: center; border: 1.5px solid var(--ink-3); border-radius: 5px; color: var(--ink-3); animation: dk-key 3.2s ease-in-out infinite; }
.dk-key--up { grid-column: 2; grid-row: 1; animation-delay: 2.4s; }
.dk-key--left { grid-column: 1; grid-row: 2; animation-delay: 1.6s; }
.dk-key--down { grid-column: 2; grid-row: 2; animation-delay: .8s; }
.dk-key--right { grid-column: 3; grid-row: 2; animation-delay: 0s; }
@keyframes dk-key { 0%, 18% { border-color: var(--ink-3); background: var(--ink-3); color: var(--surface); } 28%, 100% { background: transparent; } }
/* Fenêtre étroite (un petit écran, ou le zoom du navigateur) : le texte de la colonne un peu
   moins grand, pour y tenir ; zoomé, il reste plus grand à l'écran qu'à 100 %. */
@media (max-width: 1200px) {
  .dk-app[data-layout="app"] .dk-notes__text { font-size: 17px; }
  .dk-app[data-layout="app"] .dk-notes .dk-notes__key { font-size: 24px; }
  .dk-app[data-layout="app"] .dk-notes.is-long .dk-notes__text { font-size: 16px; }
  .dk-app[data-layout="app"] .dk-notes.is-long .dk-notes__key { font-size: 22px; }
}
/* Fenêtre basse (un petit écran, ou le zoom du navigateur) : les barres se resserrent, la page
   garde la hauteur. */
@media (max-height: 620px) {
  .dk-app[data-layout="app"] .dk-bar { min-height: 52px; padding-top: 6px; padding-bottom: 4px; }
  .dk-app[data-layout="app"] .dk-nav { min-height: 70px; padding-top: 2px; padding-bottom: 8px; }
  .dk-app[data-layout="app"] .dk-stage { padding-top: 4px; padding-bottom: 4px; }
}
/* Changer de page : la suivante monte, la précédente descend. */
.dk-app[data-layout="app"] .slide.is-in-next { animation: dk-tour-next .5s cubic-bezier(.2, .7, .2, 1); }
.dk-app[data-layout="app"] .slide.is-in-prev { animation: dk-tour-prev .5s cubic-bezier(.2, .7, .2, 1); }
@keyframes dk-tour-next { from { opacity: 0; transform: translateY(44px); } }
@keyframes dk-tour-prev { from { opacity: 0; transform: translateY(-44px); } }
@keyframes dk-tour-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes dk-tour-text { from { opacity: 0; transform: translateY(8px); } }
/* Vue mobile de l'app : « Démo » en haut, à la place du thème. */
.dk-app[data-layout="mobile"] .dk-cta { height: 34px; padding: 0 12px; font-size: 13px; }
.dk-app[data-layout="mobile"] .dk-cta__long { display: none; }
.dk-app[data-layout="mobile"] .dk-cta__short { display: inline; }
.dk-app[data-layout="mobile"] .dk-lang { height: 34px; padding: 0 22px 0 8px; font-size: 12.5px; }
.dk-app[data-layout="mobile"] .dk-langbox::after { right: 9px; }
.dk-app[data-layout="mobile"].is-app #dk-btn-theme { display: none; }

/* App : ▶ au centre de la barre du bas, rond et en relief (le dégradé de « Voir la
   présentation », un liseré, une ombre), comme le bouton lecture d'une app de musique.
   L'anneau de reprise (holdOff) l'entoure. Vue mobile : centré sur la barre ; grand écran (la
   barre n'est pas son repère, le rail des pages l'est) : à mi-hauteur de sa ligne de boutons.
   Placé par translate, et non dans transform : scale (survol, clic, dk-pulse) le rétrécit sur
   place, au lieu de rétrécir aussi son décalage (il remontait au clic). */
.dk-app.is-app .dk-nav .dk-play.dk-cbtn {
  --py: -50%;
  --ps: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 31;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--em-a), var(--em-b));
  box-shadow: 0 10px 22px -8px rgba(98, 88, 246, .75), 0 2px 6px rgba(16, 24, 40, .16);
  color: #FFFFFF;
  translate: -50% var(--py);
  transform: scale(var(--ps));
  transition: transform .15s ease, box-shadow .15s ease;
}
.dk-app.is-app .dk-nav .dk-play.dk-cbtn:hover {
  --ps: 1.06;
  box-shadow: 0 14px 26px -8px rgba(98, 88, 246, .85), 0 2px 6px rgba(16, 24, 40, .18);
}
.dk-app.is-app .dk-nav .dk-play.dk-cbtn:active { --ps: .96; }
.dk-app.is-app .dk-play .ic { width: 28px; height: 28px; }
.dk-app.is-app .dk-play:not(.is-on) .ic { margin-left: 3px; } /* le triangle, centré à l'œil */
.dk-app.is-app .dk-play__ring { inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); }
/* Grand écran : à mi-hauteur de la barre (76 px, marges de 6 et 14 px). */
.dk-app[data-layout="app"] .dk-nav .dk-play.dk-cbtn { --py: 50%; top: auto; bottom: 42px; } /* 14 + (76 − 6 − 14) / 2 */
@media (max-height: 620px) { .dk-app[data-layout="app"] .dk-nav .dk-play.dk-cbtn { bottom: 38px; } }
/* Vue mobile : le milieu reste au lecteur. À gauche, « Recommencer » et le compteur ; à droite, la
   vitesse et le bouton « texte ». Les points des étapes s'effacent : ⏪ et ⏩ les font. */
.dk-app.is-app[data-layout="mobile"] .dk-counter { margin-right: 0; }
.dk-app.is-app[data-layout="mobile"] .dk-pips { display: none; }
.dk-app.is-app[data-layout="mobile"] .dk-speedbox { margin-left: auto; }
/* L'écran d'accueil de l'app (avant « Voir la présentation ») : rien n'est lancé, la barre
   de lecture et le rail des pages s'effacent (leur place reste : la page ne change pas de
   taille au départ). */
.dk-app.is-app.is-welcome .dk-nav > * { visibility: hidden; }
/* Vue mobile : la barre disparaît tout à fait (la languette « Afficher le texte » aussi, deck.js) :
   la page prend toute la hauteur jusqu'au départ. */
.dk-app.is-app.is-welcome[data-layout="mobile"] .dk-nav { display: none; }

/* App : le lecteur, au centre de la barre, aux codes d'une app de musique : ⏮ ⏪ ▶ ⏩ ⏭.
   ⏪ et ⏩ : l'étape d'avant, d'après ; ⏮ et ⏭ : la page d'avant, d'après (à son début). Des
   ronds en relief (fond, liseré, ombre), plus petits que ▶, placés de part et d'autre de lui
   (--px : leur écart au centre). Ailleurs (présentation), ⏮ et ⏭ n'existent pas. */
.dk-skip { display: none; }
.dk-app.is-app .dk-nav .dk-skip { display: flex; }
.dk-app.is-app .dk-nav :where(#dk-btn-prev, #dk-btn-next, .dk-skip).dk-cbtn {
  --py: -50%;
  --ps: 1;
  position: absolute;
  left: calc(50% + var(--px, 0px));
  top: 50%;
  z-index: 31;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: 0 6px 14px -6px rgba(16, 24, 40, .35), 0 1px 2px rgba(16, 24, 40, .08);
  translate: -50% var(--py);
  transform: scale(var(--ps));
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease, opacity .15s ease;
}
.dk-app.is-app .dk-nav :where(#dk-btn-prev, #dk-btn-next, .dk-skip).dk-cbtn:hover:not(:disabled) { --ps: 1.07; color: var(--brand-ink); }
.dk-app.is-app .dk-nav :where(#dk-btn-prev, #dk-btn-next, .dk-skip).dk-cbtn:active:not(:disabled) { --ps: .95; }
.dk-app.is-app .dk-nav :where(#dk-btn-prev, #dk-btn-next, .dk-skip).dk-cbtn:disabled { opacity: .45; box-shadow: none; }
.dk-app.is-app .dk-nav #dk-btn-prev { --px: -67px; }
.dk-app.is-app .dk-nav #dk-btn-next { --px: 67px; }
.dk-app.is-app .dk-nav .dk-skip.dk-cbtn { width: 42px; height: 42px; }
.dk-app.is-app .dk-nav .dk-skip--prev { --px: -123px; }
.dk-app.is-app .dk-nav .dk-skip--next { --px: 123px; }
.dk-app.is-app .dk-nav :is(#dk-btn-prev, #dk-btn-next) .ic { width: 22px; height: 22px; }
.dk-app.is-app .dk-nav .dk-skip .ic { width: 19px; height: 19px; }
/* Grand écran : à mi-hauteur de la ligne de boutons, comme ▶. */
.dk-app[data-layout="app"] .dk-nav :where(#dk-btn-prev, #dk-btn-next, .dk-skip).dk-cbtn { --py: 50%; top: auto; bottom: 42px; }
@media (max-height: 620px) { .dk-app[data-layout="app"] .dk-nav :where(#dk-btn-prev, #dk-btn-next, .dk-skip).dk-cbtn { bottom: 38px; } }
/* Vue mobile : aussi gros que la place le permet, entre « Recommencer » et le compteur à gauche,
   la vitesse (jusqu'à « Demo ») et le bouton « texte » à droite : 198 px en tout à partir de
   375 px de large, 186 px en dessous (360 px). */
.dk-app.is-app[data-layout="mobile"] .dk-nav { padding-top: 8px; }
.dk-app.is-app[data-layout="mobile"] .dk-nav .dk-restart { width: 32px; }
.dk-app.is-app[data-layout="mobile"] .dk-speed { min-width: 32px; padding: 0 2px; font-size: 12.5px; }
.dk-app.is-app[data-layout="mobile"] .dk-nav .dk-lyrics:not([hidden]) { width: 32px; height: 32px; }
.dk-app.is-app[data-layout="mobile"] .dk-nav .dk-play.dk-cbtn { top: 26px; width: 50px; height: 50px; } /* le milieu de la ligne : 8 px de marge + 36 / 2 */
.dk-app.is-app[data-layout="mobile"] .dk-nav :where(#dk-btn-prev, #dk-btn-next, .dk-skip).dk-cbtn { top: 26px; width: 38px; height: 38px; }
.dk-app.is-app[data-layout="mobile"] .dk-nav .dk-skip.dk-cbtn { width: 32px; height: 32px; }
.dk-app.is-app[data-layout="mobile"] .dk-nav #dk-btn-prev { --px: -46px; }
.dk-app.is-app[data-layout="mobile"] .dk-nav #dk-btn-next { --px: 46px; }
.dk-app.is-app[data-layout="mobile"] .dk-nav .dk-skip--prev { --px: -83px; }
.dk-app.is-app[data-layout="mobile"] .dk-nav .dk-skip--next { --px: 83px; }
.dk-app.is-app[data-layout="mobile"] .dk-nav .dk-cbtn .ic { width: 16px; height: 16px; }
.dk-app.is-app[data-layout="mobile"] .dk-nav :is(#dk-btn-prev, #dk-btn-next) .ic { width: 19px; height: 19px; }
.dk-app.is-app[data-layout="mobile"] .dk-nav .dk-skip .ic { width: 17px; height: 17px; }
.dk-app.is-app[data-layout="mobile"] .dk-nav .dk-play .ic { width: 22px; height: 22px; }
@media (max-width: 374px) {
  .dk-app.is-app[data-layout="mobile"] .dk-nav .dk-play.dk-cbtn { width: 46px; height: 46px; }
  .dk-app.is-app[data-layout="mobile"] .dk-nav :where(#dk-btn-prev, #dk-btn-next, .dk-skip).dk-cbtn { width: 36px; height: 36px; }
  .dk-app.is-app[data-layout="mobile"] .dk-nav .dk-skip.dk-cbtn { width: 30px; height: 30px; }
  .dk-app.is-app[data-layout="mobile"] .dk-nav #dk-btn-prev { --px: -43px; }
  .dk-app.is-app[data-layout="mobile"] .dk-nav #dk-btn-next { --px: 43px; }
  .dk-app.is-app[data-layout="mobile"] .dk-nav .dk-skip--prev { --px: -78px; }
  .dk-app.is-app[data-layout="mobile"] .dk-nav .dk-skip--next { --px: 78px; }
  .dk-app.is-app[data-layout="mobile"] .dk-nav :is(#dk-btn-prev, #dk-btn-next) .ic { width: 18px; height: 18px; }
  .dk-app.is-app[data-layout="mobile"] .dk-nav .dk-play .ic { width: 21px; height: 21px; }
}
.dk-app.is-app[data-layout="mobile"] .dk-nav__tools { display: none; } /* vide ici : le thème est en haut */
/* Vue mobile (app et présentation) et app sur grand écran : le bouton « texte », à droite de la barre, comme le bouton « paroles »
   d'un lecteur de musique (deck.js, renderFold) ; enfoncé (bleu) quand le texte est affiché.
   Replié, le texte ne garde pas de rangée : la page prend la hauteur. */
.dk-lyrics { display: none; }
.dk-app[data-layout="mobile"] .dk-nav .dk-lyrics:not([hidden]),
.dk-app[data-layout="app"] .dk-nav .dk-lyrics:not([hidden]) {
  display: flex;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: 0 6px 14px -6px rgba(16, 24, 40, .35), 0 1px 2px rgba(16, 24, 40, .08);
}
.dk-app[data-layout="mobile"] .dk-nav .dk-lyrics[aria-pressed="true"],
.dk-app[data-layout="app"] .dk-nav .dk-lyrics[aria-pressed="true"] { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-ink); }
.dk-app[data-layout="mobile"].is-folded .dk-stage { grid-template-rows: minmax(0, 1fr); row-gap: 0; }
/* Un geste qui change d'étape ou de page (clavier, molette, balayage, texte qu'on fait défiler) :
   le bouton correspondant s'enfonce et s'éclaire un instant (deck.js, pulseNav). La propriété
   scale s'ajoute au transform du bouton (le lecteur de l'app se place par translate, à part). */
.dk-nav .dk-cbtn.is-pulse { animation: dk-pulse .42s ease; }
@keyframes dk-pulse {
  30% { scale: .86; border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-ink); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 20%, transparent); }
  100% { scale: 1; }
}
/* Le bouton « texte » : un rond (l'icône) ; sur grand écran, son libellé à côté, qui dit l'état. */
.dk-lyrics__ic { display: inline-flex; }
.dk-lyrics__label { display: none; }
.dk-app[data-layout="app"] .dk-nav .dk-lyrics:not([hidden]) {
  width: auto;
  height: 38px;
  margin-left: 4px;
  gap: 8px;
  padding: 0 14px 0 4px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 650;
}
.dk-app[data-layout="app"] .dk-lyrics__ic { width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); }
.dk-app[data-layout="app"] .dk-nav .dk-lyrics[aria-pressed="true"] .dk-lyrics__ic { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.dk-app[data-layout="app"] .dk-lyrics__label { display: inline; white-space: nowrap; }