/* =============================================================================
   DHIKR — feuille de style propre à l'application
   assets/design/design-system.css  →  ../style.css  →  ce fichier.

   Elle ne contient QUE ce qui est propre à Dhikr. L'en-tête (.topbar,
   .icon-btn, .brand-logo), le bouton « Applications » (.ac-apps), le groupe
   d'actions (.ac-actions), le lien d'évitement (.ac-skip) et le pied de page
   compact (.ac-footer-compact) viennent du design system et de la feuille
   racine : aucun n'est redéclaré ici, aucun token non plus.

   Préfixe : .dk-
   ========================================================================== */

/* Facteur d'échelle du texte arabe (Paramètres → Taille du texte).
   Il n'agit QUE sur le contenu : le compteur et les boutons ne bougent pas. */
:root { --dk-arabic-scale: 1; }

/* Or lisible.
   L'or de marque (--accent-2) reste l'or ornemental du design system ; mais
   dès qu'il porte du TEXTE (titre de sourate, mention de répétitions), il lui
   faut une déclinaison qui passe le contraste sur fond clair. Variable locale
   à l'app : aucun token du design system n'est redéclaré.
     sombre : #C9A24B sur #0A0C0E → 8,2:1  (AAA)
     clair  : #7A5F18 sur #F6F3EA → 5,4:1  (AA) — l'or ornemental n'y
              atteindrait que 2,2:1 */
:root { --dk-gold-text: var(--accent-2); }
[data-theme="light"] { --dk-gold-text: #7A5F18; }

/* -----------------------------------------------------------------------------
   ALIGNEMENT DES TEXTES — une seule règle, appliquée partout
   -----------------------------------------------------------------------------
   Un bloc qu'on LIT s'aligne du côté où sa langue commence : le français à
   gauche, l'arabe à droite. Le centrage oblige l'œil à rechercher le début de
   chaque ligne — sur un dhikr de six lignes, c'est six recherches par lecture.

   Restent centrés, et seulement eux, les éléments qu'on ne lit pas ligne à
   ligne : le titre de la page d'accueil, l'écran de fin, et le compteur.
   -------------------------------------------------------------------------- */

.dk-body { background-image: var(--halo); background-repeat: no-repeat; background-position: top center; }

/* -------------------------------------------------------------------------
   EN-TÊTE — seuls les ajustements propres à Dhikr
   ---------------------------------------------------------------------- */
.dk-topbar { padding-block: 12px; }
.dk-topbar .topbar__brand { margin-inline-end: auto; }
.dk-back[hidden] { display: none; }

/* Sur les écrans internes de l'application, la flèche de retour s'ajoute aux
   trois commandes de droite. Sous 430 px, le logotype (128 px au minimum) ne
   tient plus sur la même ligne et l'en-tête passait à deux rangées, mangeant
   240 px de hauteur. La marque s'efface alors : le retour et les commandes
   priment, et l'identité reste portée par le panneau Applications et le pied
   de page. Sur l'accueil de l'app, où il n'y a pas de flèche, elle reste. */
@media (max-width: 430px) {
  .dk-topbar { gap: 8px; padding-inline: 14px; flex-wrap: nowrap; }
  .dk-topbar--inner .topbar__brand { display: none; }
  .dk-topbar .topbar__actions { gap: 6px; margin-inline-start: auto; }
}

/* -------------------------------------------------------------------------
   ÉCRANS — largeur de lecture confortable, jamais pleine largeur
   ---------------------------------------------------------------------- */
.dk-screen {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: clamp(16px, 5vw, 32px);
  padding-block: clamp(24px, 5vw, 48px) clamp(32px, 6vw, 64px);
}
.dk-screen[hidden] { display: none; }

/* -------------------------------------------------------------------------
   ACCUEIL
   ---------------------------------------------------------------------- */
.dk-home__intro { text-align: center; margin-bottom: var(--sp-8); }
.dk-home__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0;
}
.dk-home__subtitle { margin: var(--sp-2) 0 0; color: var(--text-secondary); font-size: var(--fs-md); }

.dk-cards { display: grid; gap: var(--sp-4); }
@media (min-width: 680px) { .dk-cards { grid-template-columns: 1fr 1fr; } }

.dk-card {
  display: flex; flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  text-align: start;
}
.dk-card__head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.dk-card__glyph {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--dk-gold-text);
  background: var(--surface);
  border: 1px solid var(--border-gold);
}
.dk-card__glyph svg { width: 21px; height: 21px; }
.dk-card__title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1.25; }
/* Le titre arabe file à l'opposé du titre français, sur la même ligne.
   Marge PHYSIQUE : `margin-inline-start` se résout à droite sur un élément
   dir="rtl", il poussait donc du mauvais côté. La carte, elle, reste en LTR. */
.dk-card__arabic {
  margin: 0 0 0 auto;
  font-family: var(--dk-ar-font, var(--font-display));
  font-size: 1.2rem; line-height: 1.6;
  text-align: right;
  color: var(--dk-gold-text);
}
.dk-card__meta { margin: 0; color: var(--text-secondary); font-size: var(--fs-sm); }
.dk-card__timing {
  margin: 0;
  font-family: var(--dk-ar-font, var(--font-display));
  font-size: 1rem; line-height: 1.8;
  text-align: right;
  color: var(--text-secondary);
}
.dk-card__resume { margin: 0; font-size: var(--fs-sm); color: var(--accent); font-weight: var(--fw-medium); }
.dk-card__resume[hidden] { display: none; }
.dk-card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.dk-card__actions .ds-btn { flex: 1 1 auto; }
.dk-card__actions .ds-btn[hidden] { display: none; }

.dk-home__source {
  margin: var(--sp-8) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* -------------------------------------------------------------------------
   RÉCITATION — composition « content first »
   -------------------------------------------------------------------------
   RÉPARTITION DE L'ÉCRAN (iPhone 390 × 844)
     en-tête du site        76 px
     bandeau de session     ~92 px   titre · progression · réinitialiser
     TEXTE DU DHIKR         ~600 px  ← ce qu'on vient lire
     barre de commandes     76 px    ← une ligne, atteignable au pouce

   Le texte prend la place dont il a besoin ; les commandes prennent seulement
   celle qui leur est nécessaire. Aucune hauteur n'est forcée sur le texte :
   un dhikr long fait défiler la page, il n'est jamais rétréci.
   ---------------------------------------------------------------------- */
.dk-session {
  min-height: calc(100svh - var(--dk-topbar-h, 76px));
  padding-bottom: calc(var(--dk-bar-h, 76px) + var(--sp-6));
  /* Deux rangées : le bandeau reste en haut, la lecture occupe tout le reste
     et s'y centre. Sur un dhikr court, le titre ne descend donc pas au milieu
     de l'écran ; sur un dhikr long, la rangée grandit et la page défile. */
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--sp-5);
}
/* Le texte commence en haut : on lit de haut en bas, et un dhikr court ne doit
   pas obliger l'œil à descendre au milieu de l'écran pour le trouver. */
.dk-read { align-self: start; }

/* — Bandeau de session : compact, il ne fait qu'informer — */
.dk-session__top { text-align: start; }
/* Les deux titres se font face : ils tiennent sur une ligne au lieu de deux. */
.dk-session__titles {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
}
.dk-session__title { margin: 0; font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.dk-session__ar {
  margin: 0;
  text-align: right;
  font-family: var(--dk-ar-font, var(--font-display));
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--dk-gold-text);
}

/* — Filet de progression, collé au bas de l'en-tête —
   Il ne consomme aucune ligne de contenu : c'est la place que lui donne déjà
   /coran-app/ (.coran-progress) et le kit d'en-tête. */
.dk-progress {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--surface-strong);
}
.dk-progress[hidden] { display: none; }
.dk-progress__fill {
  display: block; height: 100%; width: 0%;
  background: var(--edge-gradient);
  transition: width var(--dur-base) var(--ease-out);
}

/* — Ligne d'état : la position, seule commande visible pendant la lecture — */
.dk-meta { display: flex; justify-content: flex-start; margin-top: var(--sp-3); }

.dk-pos {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding-inline: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.dk-pos svg { width: 14px; height: 14px; opacity: 0.7; }
.dk-pos:hover { color: var(--text); border-color: var(--border-accent); background: var(--surface-strong); }
.dk-pos:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dk-pos[aria-expanded="true"] { color: var(--text); border-color: var(--border-accent); }

/* — La zone de lecture — */
.dk-read { max-width: 42rem; margin-inline: auto; width: 100%; }

.dk-eyebrow {
  margin: 0 0 var(--sp-4);
  text-align: start;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.dk-surah {
  margin: 0 0 var(--sp-4);
  font-family: var(--dk-ar-font, var(--font-display));
  font-size: 1.45rem;
  font-weight: var(--fw-bold);
  color: var(--dk-gold-text);
  text-align: right;
}
.dk-surah[hidden] { display: none; }

/* Le cœur de l'application. La place libérée par la barre compacte lui
   revient : un cran de plus qu'avant, interligne 2, contraste maximal. */
.dk-arabic {
  font-family: var(--dk-ar-font, var(--font-display));
  font-size: calc(clamp(1.75rem, 6.4vw, 2.5rem) * var(--dk-arabic-scale));
  line-height: 2;
  direction: rtl;
  /* Aligné à droite, comme se lit l'arabe : chaque ligne repart du même bord.
     Centré, l'œil devait retrouver le début de chaque ligne à un endroit
     différent — le défaut le plus coûteux de l'ancienne mise en page. */
  text-align: right;
  text-wrap: pretty;
  white-space: pre-line;
  color: var(--text);
  /* Empêche une dernière ligne isolée de coller au bord opposé. */
  padding-inline-start: 0.15em;
}

.dk-arabic-note {
  margin: var(--sp-5) 0 0;
  font-family: var(--dk-ar-font, var(--font-display));
  font-size: calc(1.15rem * var(--dk-arabic-scale));
  line-height: 1.8;
  text-align: right;
  color: var(--dk-gold-text);
}
.dk-arabic-note[hidden] { display: none; }

.dk-hint {
  margin: var(--sp-6) 0 0;
  text-align: start;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}
.dk-hint[hidden] { display: none; }

/* -------------------------------------------------------------------------
   BARRE DE COMMANDES — Précédent · compteur · Suivant, sur une seule ligne
   -------------------------------------------------------------------------
   Elle est FIXE en bas : à 76 px elle ne coûte presque rien à la lecture, et
   le compteur reste sous le pouce même au milieu d'un dhikr de trente lignes.
   C'est le choix B de la règle absolue : contrôle compact + zone tactile
   généreuse, plutôt que gros bouton.
   ---------------------------------------------------------------------- */
.dk-commandbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(20px);
          backdrop-filter: saturate(150%) blur(20px);
  border-top: 1px solid var(--border);
}
/* Fondu au-dessus de la barre : sans lui, la dernière ligne du dhikr se lit
   à travers le flou et donne l'impression d'un texte coupé au milieu. */
.dk-commandbar::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 100%;
  height: 32px;
  pointer-events: none;
  background: linear-gradient(to top, var(--bg), transparent);
}
@supports not (backdrop-filter: blur(1px)) { .dk-commandbar { background: var(--bg); } }
@supports not (color: color-mix(in srgb, red, blue)) { .dk-commandbar { background: var(--bg); } }
.dk-commandbar[hidden] { display: none; }

.dk-commandbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  width: 100%; max-width: 560px;
  margin-inline: auto;
  padding: var(--sp-2) clamp(12px, 4vw, 24px);
}

/* — Précédent / Suivant : compacts, en retrait du compteur — */
.dk-navbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: 1 1 0; min-width: 0;
  min-height: 52px; padding-inline: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.dk-navbtn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.dk-navbtn__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-navbtn:hover { color: var(--text); border-color: var(--border-accent); background: var(--surface-strong); }
.dk-navbtn:active { transform: scale(0.98); }
.dk-navbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dk-navbtn:disabled { opacity: 0.32; cursor: not-allowed; }

/* — Le compteur : indicateur ET action, ~64 px, la taille d'un pouce — */
.dk-count {
  position: relative;
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 64px; height: 64px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--text);
  font-family: var(--font-body);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
/* Zone tactile portée à 80 px sans grossir d'un pixel à l'écran. */
.dk-count::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.dk-count:active { transform: scale(0.94); }
.dk-count:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* Anneau de progression du dhikr en cours : ce qui reste à réciter, lisible
   d'un coup d'œil, sans occuper la moindre ligne supplémentaire.
   --dk-ring est écrit par app.js (0 → 100). */
.dk-count__ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--dk-ring, 100) * 1%), var(--surface-strong) 0);
  -webkit-mask: radial-gradient(circle, transparent 0 61%, #000 61.5%);
          mask: radial-gradient(circle, transparent 0 61%, #000 61.5%);
  transition: background var(--dur-fast) var(--ease-out);
}
.dk-count__value {
  position: relative;
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
/* Trois chiffres (100) doivent tenir dans 64 px : on resserre. */
.dk-count__value.is-wide { font-size: 1.15rem; letter-spacing: -0.04em; }

/* Décrémentation : reprise d'opacité de 120 ms, rien d'autre. */
.dk-count.is-ticking .dk-count__value { animation: dk-tick 120ms var(--ease-out); }
@keyframes dk-tick { from { opacity: 0.45; } to { opacity: 1; } }

/* Dhikr achevé : l'anneau se referme en émeraude pleine, le temps du passage. */
.dk-count.is-complete { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent); }
.dk-count.is-complete .dk-count__value { color: var(--accent); }

/* -------------------------------------------------------------------------
   FIN DE SESSION
   ---------------------------------------------------------------------- */
.dk-done { text-align: center; padding-top: clamp(40px, 12vh, 96px); }
.dk-done__arabic {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 11vw, 3.6rem);
  line-height: 1.6;
  color: var(--dk-gold-text);
}
.dk-done__rule { margin: var(--sp-8) auto; max-width: 200px; }
.dk-done__title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.dk-done__meta { margin: var(--sp-2) 0 0; color: var(--text-secondary); font-size: var(--fs-base); }
.dk-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-8); }

/* -------------------------------------------------------------------------
   PARAMÈTRES
   ---------------------------------------------------------------------- */
.dk-settings__title { margin: 0 0 var(--sp-6); font-family: var(--font-display); font-size: var(--fs-xl); }
.dk-settings__group { margin-bottom: var(--sp-4); }
.dk-settings__legend { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.dk-settings__sub {
  margin: var(--sp-6) 0 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.dk-settings__legend + .dk-settings__sub { margin-top: var(--sp-4); }
.dk-settings__hint { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.dk-choices { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.dk-choices .ds-chip { min-height: var(--tap-min); padding-inline: var(--sp-4); font-size: var(--fs-sm); }
.dk-size { gap: var(--sp-2); }
.dk-size__a { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: 1; }
.dk-settings__preview {
  margin: var(--sp-5) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-family: var(--dk-ar-font, var(--font-display));
  font-size: calc(1.6rem * var(--dk-arabic-scale));
  line-height: 1.9;
  text-align: right;
  direction: rtl;
}
.dk-settings__clear { margin-top: var(--sp-4); width: 100%; }

/* -------------------------------------------------------------------------
   ADAPTATIONS
   ---------------------------------------------------------------------- */

/* PETITS ÉCRANS — la règle : on rogne les commandes, jamais le texte arabe.
   Sous 380 px, « Précédent » et « Suivant » perdent leur libellé et deviennent
   deux cibles carrées de 52 px ; leur aria-label reste. */
@media (max-width: 380px) {
  .dk-commandbar__inner { gap: var(--sp-2); }
  .dk-navbtn { flex: 0 0 52px; padding-inline: 0; }
  .dk-navbtn__label { display: none; }
}

/* Écrans courts : le bandeau se resserre encore pour rendre au texte
   la hauteur prise par l'accessoire. */
@media (max-height: 700px) {
  .dk-session__ar { font-size: 1.05rem; }
  .dk-session { gap: var(--sp-4); }
}

/* À partir de la tablette, la barre se pose au centre et respire un peu. */
@media (min-width: 600px) {
  .dk-commandbar__inner { padding-block: var(--sp-3); gap: var(--sp-5); }
  .dk-navbtn { flex: 0 1 180px; }
  .dk-count { width: 68px; height: 68px; }
  .dk-count__value { font-size: 1.5rem; }
}
@media (min-width: 1024px) {
  .dk-arabic { font-size: calc(2.5rem * var(--dk-arabic-scale)); }
}

/* Paysage : la barre reste une ligne, le bandeau perd l'horaire. */
@media (orientation: landscape) and (max-height: 560px) {
  .dk-session__ar { display: none; }
  .dk-session { gap: var(--sp-3); }
  .dk-arabic { font-size: calc(clamp(1.5rem, 5.4vh, 2rem) * var(--dk-arabic-scale)); line-height: 1.85; }
  .dk-commandbar__inner { padding-block: 6px; }
  .dk-count { width: 56px; height: 56px; }
  .dk-count__value { font-size: 1.25rem; }
  .dk-navbtn { min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .dk-count, .dk-navbtn, .dk-progress__fill, .dk-count__ring { transition: none; }
  .dk-count.is-ticking .dk-count__value { animation: none; }
}

/* =============================================================================
   SOMMAIRE DE LA SESSION
   Il répond à un manque : sans lui, revenir au premier dhikr demandait autant
   de clics sur « Précédent » qu'il y avait d'étapes parcourues. Il réunit
   aussi les deux commandes de reprise, qui se ressemblaient trop pour cohabiter
   dans l'écran de lecture.
   ========================================================================== */
.dk-sheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; }
.dk-sheet[hidden] { display: none; }
.dk-sheet__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.dk-sheet__panel {
  position: relative;
  width: 100%; max-width: 560px;
  margin-inline: auto;
  max-height: min(80svh, 720px);
  display: flex; flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-soft);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: dk-sheet-in var(--dur-base) var(--ease-out);
}
@keyframes dk-sheet-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 640px) {
  .dk-sheet { align-items: center; padding: var(--sp-4); }
  .dk-sheet__panel { border-radius: var(--radius-lg); border-bottom: 1px solid var(--border); }
}

.dk-sheet__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
}
.dk-sheet__title { margin: 0; flex: 1 1 auto; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.dk-sheet__close {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: var(--tap-min); height: var(--tap-min);
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 50%;
  cursor: pointer;
}
.dk-sheet__close svg { width: 18px; height: 18px; }
.dk-sheet__close:hover { color: var(--text); border-color: var(--border-accent); }
.dk-sheet__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dk-sheet__actions {
  display: grid; gap: var(--sp-2);
  padding: 0 var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.dk-sheet__actions .ds-btn { justify-content: flex-start; }

.dk-sheet__list {
  margin: 0; padding: var(--sp-2) var(--sp-3) var(--sp-5);
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dk-sheet__item { width: 100%; }
.dk-sheet__btn {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center; gap: var(--sp-3);
  width: 100%; min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-3);
  text-align: start;
  color: var(--text-secondary);
  background: none; border: 0; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.dk-sheet__btn:hover { background: var(--surface); color: var(--text); }
.dk-sheet__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dk-sheet__num {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border); border-radius: 50%;
}
.dk-sheet__ar {
  font-family: var(--dk-ar-font, var(--font-display));
  font-size: 1.05rem; line-height: 1.7;
  direction: rtl; text-align: right;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dk-sheet__reps { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; opacity: 0.75; }
/* Étape en cours : émeraude pleine, comme partout ailleurs l'état actif. */
.dk-sheet__btn.is-current { background: var(--surface-strong); color: var(--text); }
.dk-sheet__btn.is-current .dk-sheet__num { color: var(--deep-black); background: var(--accent); border-color: var(--accent); }
/* Étape déjà passée : elle reste lisible, simplement en retrait. */
.dk-sheet__btn.is-done .dk-sheet__num { color: var(--accent); border-color: var(--border-accent); }

/* =============================================================================
   TOAST — le design system du site n'en fournit pas : composant local.
   ========================================================================== */
.dk-toast {
  position: fixed; left: 50%; z-index: 100;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--dk-bar-h, 24px) + 16px);
  transform: translateX(-50%) translateY(10px);
  max-width: min(92vw, 420px);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm); color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.dk-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .dk-sheet__panel { animation: none; }
  .dk-toast { transition: none; }
}