/* ==========================================================================
   Deckstock : Design system « Pro Comptoir » · components.css
   Composants réutilisables, classes en français préfixées « dk- ».
   Mobile-first · points de rupture : 320 (base) / 768 / 1280.
   Dépend de tokens.css (+ fonts.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Focus visible global (accessibilité AA)
   -------------------------------------------------------------------------- */
.dk-btn:focus-visible,
.dk-nav__lien:focus-visible,
.dk-modale__fermer:focus-visible,
.dk-toast__fermer:focus-visible,
a.dk-lien:focus-visible {
  outline: 2px solid var(--anneau);
  outline-offset: 2px;
}

/* ==========================================================================
   dk-btn : boutons
   Variantes : --primaire (CTA ambre plein) · --secondaire · --discret · --danger
   Tailles   : --petit · (défaut) · --grand
   ========================================================================== */
.dk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  height: 44px;
  padding: 0 var(--esp-4);
  border: 1px solid transparent;
  border-radius: var(--rayon);
  font-family: var(--police-ui);
  font-size: var(--taille-15);
  font-weight: var(--graisse-demi);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--transition-rapide),
              border-color var(--transition-rapide),
              color var(--transition-rapide),
              box-shadow var(--transition-rapide),
              transform var(--transition-rapide);
}
.dk-btn:active { transform: translateY(1px); }
.dk-btn:disabled,
.dk-btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}
.dk-btn svg { width: 18px; height: 18px; flex: none; }

/* Primaire : ambre plein, texte Encre (contraste AA 6,2:1) */
.dk-btn--primaire {
  background-color: var(--accent);
  color: var(--sur-accent);
  box-shadow: var(--ombre-1);
}
.dk-btn--primaire:hover { background-color: var(--accent-survol); }

/* Secondaire : surface bordée */
.dk-btn--secondaire {
  background-color: var(--surface);
  color: var(--texte);
  border-color: var(--bordure-forte);
}
.dk-btn--secondaire:hover {
  background-color: var(--survol);
  border-color: var(--texte-secondaire);
}

/* Discret : sans fond, pour actions tertiaires */
.dk-btn--discret {
  background-color: transparent;
  color: var(--texte-secondaire);
}
.dk-btn--discret:hover {
  background-color: var(--survol);
  color: var(--texte);
}

/* Danger : suppressions, actions destructrices */
.dk-btn--danger {
  background-color: var(--danger-cta);
  color: #FFFFFF;
}
.dk-btn--danger:hover { background-color: #A82429; }

/* Tailles */
.dk-btn--petit {
  height: 34px;
  padding: 0 var(--esp-3);
  border-radius: var(--rayon-petit);
  font-size: var(--taille-13);
}
.dk-btn--petit svg { width: 15px; height: 15px; }
.dk-btn--grand {
  height: 54px;
  padding: 0 var(--esp-5);
  font-size: var(--taille-17);
}
.dk-btn--grand svg { width: 22px; height: 22px; }

/* Bouton pleine largeur (écrans de scan mobile) */
.dk-btn--bloc { width: 100%; }

/* ==========================================================================
   dk-carte : carte de contenu
   ========================================================================== */
.dk-carte {
  background-color: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-1);
  padding: var(--esp-4);
}
.dk-carte__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-4);
}
.dk-carte__titre {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--taille-17);
  font-weight: var(--graisse-grasse);
  line-height: var(--interligne-serre);
  color: var(--texte);
}
.dk-carte__sous-titre {
  margin: 2px 0 0;
  font-size: var(--taille-13);
  color: var(--texte-secondaire);
}
.dk-carte__pied {
  margin-top: var(--esp-4);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--bordure);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--esp-2);
}
@media (min-width: 768px) {
  .dk-carte { padding: var(--esp-5); }
}

/* ==========================================================================
   dk-champ : champ de formulaire (input / select / textarea)
   Structure : .dk-champ > __libelle + __saisie + __aide / __erreur
   État erreur : .dk-champ--erreur
   ========================================================================== */
.dk-champ {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dk-champ__libelle {
  font-size: var(--taille-13);
  font-weight: var(--graisse-moyenne);
  color: var(--texte);
}
.dk-champ__libelle abbr[title] {
  color: var(--danger-texte);
  text-decoration: none;
}
.dk-champ__saisie {
  width: 100%;
  height: 44px;
  padding: 0 var(--esp-3);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-petit);
  background-color: var(--surface);
  color: var(--texte);
  font-family: var(--police-ui);
  font-size: var(--taille-15);
  transition: border-color var(--transition-rapide),
              box-shadow var(--transition-rapide);
}
.dk-champ__saisie::placeholder { color: var(--texte-secondaire); opacity: 0.8; }
.dk-champ__saisie:focus,
.dk-champ__saisie:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
.dk-champ__saisie:disabled {
  background-color: var(--surface-2);
  color: var(--texte-secondaire);
  cursor: not-allowed;
}
textarea.dk-champ__saisie {
  height: auto;
  min-height: 96px;
  padding: var(--esp-2) var(--esp-3);
  resize: vertical;
  line-height: var(--interligne-normal);
}
select.dk-champ__saisie {
  appearance: none;
  padding-right: var(--esp-6);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6785' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--esp-3) center;
}
[data-theme="sombre"] select.dk-champ__saisie {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AA8C7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.dk-champ__aide {
  font-size: var(--taille-12);
  color: var(--texte-secondaire);
}
.dk-champ__erreur {
  display: none;
  font-size: var(--taille-12);
  font-weight: var(--graisse-moyenne);
  color: var(--danger-texte);
}
.dk-champ--erreur .dk-champ__saisie {
  border-color: var(--danger);
}
.dk-champ--erreur .dk-champ__saisie:focus,
.dk-champ--erreur .dk-champ__saisie:focus-visible {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent);
}
.dk-champ--erreur .dk-champ__erreur { display: block; }
.dk-champ--erreur .dk-champ__aide { display: none; }

/* ==========================================================================
   dk-table : tableau dense d'inventaire
   En-tête collant · lignes survolées · chiffres tabulaires alignés à droite
   Envelopper dans .dk-table-conteneur pour le défilement.
   ========================================================================== */
.dk-table-conteneur {
  overflow: auto;
  background-color: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  max-height: 70vh;
}
.dk-table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--taille-14);
}
.dk-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--surface-2);
  padding: 10px var(--esp-3);
  border-bottom: 1px solid var(--bordure);
  text-align: left;
  font-size: var(--taille-12);
  font-weight: var(--graisse-demi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texte-secondaire);
  white-space: nowrap;
}
.dk-table td {
  padding: 9px var(--esp-3);
  border-bottom: 1px solid var(--bordure);
  color: var(--texte);
  vertical-align: middle;
}
.dk-table tbody tr:last-child td { border-bottom: none; }
.dk-table tbody tr {
  transition: background-color var(--transition-rapide);
}
.dk-table tbody tr:hover td { background-color: var(--survol); }

/* Cellules numériques : à droite + chiffres tabulaires */
.dk-table .dk-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.dk-table .dk-num--positif { color: var(--succes-texte); font-weight: var(--graisse-demi); }
.dk-table .dk-num--negatif { color: var(--danger-texte); font-weight: var(--graisse-demi); }

/* Ligne d'article principal (nom du produit) */
.dk-table__produit {
  font-weight: var(--graisse-moyenne);
}
.dk-table__reference {
  display: block;
  font-size: var(--taille-12);
  color: var(--texte-secondaire);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   dk-badge : badge d'état générique
   ========================================================================== */
.dk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--rayon-rond);
  background-color: var(--surface-2);
  color: var(--texte-secondaire);
  font-size: var(--taille-12);
  font-weight: var(--graisse-demi);
  line-height: 1;
  white-space: nowrap;
}
.dk-badge--succes    { background-color: var(--succes-pale);    color: var(--succes-texte); }
.dk-badge--attention { background-color: var(--attention-pale); color: var(--attention-texte); }
.dk-badge--danger    { background-color: var(--danger-pale);    color: var(--danger-texte); }
.dk-badge--info      { background-color: var(--info-pale);      color: var(--info-texte); }

/* ==========================================================================
   dk-puce-jeu : puce colorée par jeu (TCG)
   Une classe par jeu : pokemon · yugioh · magic · onepiece · lorcana ·
   naruto · dragonball · autre
   ========================================================================== */
.dk-puce-jeu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--rayon-rond);
  font-size: var(--taille-12);
  font-weight: var(--graisse-demi);
  line-height: 1;
  white-space: nowrap;
}
.dk-puce-jeu::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
  flex: none;
}
.dk-puce-jeu--pokemon    { background-color: var(--jeu-pokemon-fond);    color: var(--jeu-pokemon-texte); }
.dk-puce-jeu--yugioh     { background-color: var(--jeu-yugioh-fond);     color: var(--jeu-yugioh-texte); }
.dk-puce-jeu--magic      { background-color: var(--jeu-magic-fond);      color: var(--jeu-magic-texte); }
.dk-puce-jeu--onepiece   { background-color: var(--jeu-onepiece-fond);   color: var(--jeu-onepiece-texte); }
.dk-puce-jeu--lorcana    { background-color: var(--jeu-lorcana-fond);    color: var(--jeu-lorcana-texte); }
.dk-puce-jeu--naruto     { background-color: var(--jeu-naruto-fond);     color: var(--jeu-naruto-texte); }
.dk-puce-jeu--dragonball { background-color: var(--jeu-dragonball-fond); color: var(--jeu-dragonball-texte); }
.dk-puce-jeu--autre      { background-color: var(--jeu-autre-fond);      color: var(--jeu-autre-texte); }

/* ==========================================================================
   dk-tuile-kpi : grande valeur + libellé + variation
   ========================================================================== */
.dk-tuile-kpi {
  background-color: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-1);
  padding: var(--esp-4) var(--esp-4) var(--esp-4);
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  min-width: 0;
}
.dk-tuile-kpi__libelle {
  font-size: var(--taille-12);
  font-weight: var(--graisse-demi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texte-secondaire);
}
.dk-tuile-kpi__valeur {
  font-family: var(--police-titre);
  font-size: var(--taille-28);
  font-weight: var(--graisse-grasse);
  line-height: var(--interligne-serre);
  color: var(--texte);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.dk-tuile-kpi__variation {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--taille-13);
  font-weight: var(--graisse-demi);
  font-variant-numeric: tabular-nums;
}
.dk-tuile-kpi__variation svg { width: 14px; height: 14px; }
.dk-tuile-kpi__variation--hausse { color: var(--succes-texte); }
.dk-tuile-kpi__variation--baisse { color: var(--danger-texte); }
.dk-tuile-kpi__variation--stable { color: var(--texte-secondaire); }
@media (min-width: 768px) {
  .dk-tuile-kpi { padding: var(--esp-5); }
  .dk-tuile-kpi__valeur { font-size: var(--taille-34); }
}

/* ==========================================================================
   dk-nav : navigation
   Mobile (défaut) : barre d'onglets fixée en bas.
   ≥ 1280 px : barre latérale fixe à gauche (240 px).
   .dk-nav--demo : version statique pour le guide de style.
   ========================================================================== */
.dk-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 6px var(--esp-2);
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  background-color: var(--surface);
  border-top: 1px solid var(--bordure);
}
.dk-nav__marque {
  display: none;
  font-family: var(--police-titre);
  font-weight: var(--graisse-grasse);
  font-size: var(--taille-20);
  letter-spacing: 0.02em;
  color: var(--texte);
  text-decoration: none;
  padding: var(--esp-2) var(--esp-3) var(--esp-4);
}
.dk-nav__marque .accent { color: var(--accent); }
.dk-nav__lien {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  border-radius: var(--rayon-petit);
  font-size: var(--taille-11);
  font-weight: var(--graisse-moyenne);
  color: var(--texte-secondaire);
  text-decoration: none;
  transition: color var(--transition-rapide),
              background-color var(--transition-rapide);
}
.dk-nav__lien svg {
  width: 22px;
  height: 22px;
  flex: none;
}
.dk-nav__lien:hover {
  color: var(--texte);
  background-color: var(--survol);
}
.dk-nav__lien--actif,
.dk-nav__lien[aria-current="page"] {
  color: var(--accent-texte);
  background-color: var(--accent-pale);
}
@media (min-width: 1280px) {
  .dk-nav {
    top: 0;
    bottom: 0;
    right: auto;
    width: 240px;
    flex-direction: column;
    align-items: stretch;
    gap: var(--esp-1);
    padding: var(--esp-5) var(--esp-3);
    border-top: none;
    border-right: 1px solid var(--bordure);
  }
  .dk-nav__marque { display: block; }
  .dk-nav__lien {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--esp-3);
    padding: 10px var(--esp-3);
    font-size: var(--taille-14);
  }
  .dk-nav__lien svg { width: 20px; height: 20px; }
}
/* Version statique pour démonstration (guide de style) */
.dk-nav--demo {
  position: static;
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
}
@media (min-width: 1280px) {
  .dk-nav--demo { width: 240px; }
}

/* ==========================================================================
   dk-toast : notification éphémère
   ========================================================================== */
.dk-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  width: fit-content;
  max-width: min(92vw, 400px);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--rayon);
  background-color: var(--toast-fond);
  color: var(--toast-texte);
  box-shadow: var(--ombre-3);
  border-left: 3px solid var(--accent);
  font-size: var(--taille-14);
  line-height: var(--interligne-normal);
}
.dk-toast--succes    { border-left-color: var(--vert-marge); }
.dk-toast--danger    { border-left-color: var(--rouge-alerte); }
.dk-toast--attention { border-left-color: var(--ambre); }
.dk-toast__icone {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.dk-toast--succes .dk-toast__icone { color: var(--vert-marge); }
.dk-toast--danger .dk-toast__icone { color: var(--rouge-alerte); }
.dk-toast--attention .dk-toast__icone { color: var(--ambre); }
.dk-toast__titre {
  display: block;
  font-weight: var(--graisse-demi);
}
.dk-toast__texte {
  display: block;
  opacity: 0.85;
  font-size: var(--taille-13);
}
.dk-toast__fermer {
  flex: none;
  margin-left: auto;
  padding: 2px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}
.dk-toast__fermer:hover { opacity: 1; }
.dk-toast__fermer svg { width: 16px; height: 16px; display: block; }

/* Conteneur d'empilement des toasts (coin bas-droit) */
.dk-toasts {
  position: fixed;
  right: var(--esp-4);
  bottom: calc(var(--esp-4) + 64px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}
@media (min-width: 1280px) {
  .dk-toasts { bottom: var(--esp-4); }
}

/* ==========================================================================
   dk-modale : boîte de dialogue
   Structure : .dk-modale-fond > .dk-modale > __entete + __corps + __pied
   .dk-modale-fond--demo : version statique pour le guide de style.
   ========================================================================== */
.dk-modale-fond {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--esp-4);
  background-color: var(--voile);
  backdrop-filter: blur(2px);
}
.dk-modale {
  width: 100%;
  max-width: 480px;
  background-color: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-3);
  display: flex;
  flex-direction: column;
  max-height: min(86vh, 640px);
}
.dk-modale__entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-5) var(--esp-5) 0;
}
.dk-modale__titre {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--taille-20);
  font-weight: var(--graisse-grasse);
  line-height: var(--interligne-serre);
  color: var(--texte);
}
.dk-modale__fermer {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -4px -6px 0 0;
  border: none;
  border-radius: var(--rayon-petit);
  background: transparent;
  color: var(--texte-secondaire);
  cursor: pointer;
  transition: background-color var(--transition-rapide), color var(--transition-rapide);
}
.dk-modale__fermer:hover { background-color: var(--survol); color: var(--texte); }
.dk-modale__fermer svg { width: 18px; height: 18px; }
.dk-modale__corps {
  padding: var(--esp-4) var(--esp-5);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  font-size: var(--taille-14);
  line-height: var(--interligne-normal);
  color: var(--texte);
}
.dk-modale__pied {
  display: flex;
  justify-content: flex-end;
  gap: var(--esp-2);
  padding: 0 var(--esp-5) var(--esp-5);
}
.dk-modale-fond--demo {
  position: static;
  border-radius: var(--rayon-grand);
}

/* ==========================================================================
   dk-vide : état vide avec pictogramme
   ========================================================================== */
.dk-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-7) var(--esp-5);
  border: 1.5px dashed var(--bordure-forte);
  border-radius: var(--rayon);
  text-align: center;
  color: var(--texte-secondaire);
}
.dk-vide__picto {
  width: 52px;
  height: 52px;
  margin-bottom: var(--esp-1);
  color: var(--texte-secondaire);
  opacity: 0.75;
}
.dk-vide__titre {
  margin: 0;
  font-size: var(--taille-15);
  font-weight: var(--graisse-demi);
  color: var(--texte);
}
.dk-vide__texte {
  margin: 0;
  font-size: var(--taille-13);
  max-width: 36ch;
}
.dk-vide .dk-btn { margin-top: var(--esp-3); }

/* ==========================================================================
   dk-alerte : bandeau d'information
   Variantes : --info · --succes · --attention · --danger
   ========================================================================== */
.dk-alerte {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid transparent;
  border-radius: var(--rayon-petit);
  font-size: var(--taille-14);
  line-height: var(--interligne-normal);
}
.dk-alerte__icone {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.dk-alerte__titre {
  display: block;
  font-weight: var(--graisse-demi);
}
.dk-alerte--info {
  background-color: var(--info-pale);
  border-color: color-mix(in srgb, var(--info) 30%, transparent);
  color: var(--info-texte);
}
.dk-alerte--succes {
  background-color: var(--succes-pale);
  border-color: color-mix(in srgb, var(--succes) 35%, transparent);
  color: var(--succes-texte);
}
.dk-alerte--attention {
  background-color: var(--attention-pale);
  border-color: color-mix(in srgb, var(--ambre) 40%, transparent);
  color: var(--attention-texte);
}
.dk-alerte--danger {
  background-color: var(--danger-pale);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--danger-texte);
}

/* ==========================================================================
   dk-interrupteur : interrupteur (toggle)
   Structure : <label class="dk-interrupteur">
                 <input type="checkbox" class="dk-interrupteur__case">
                 <span class="dk-interrupteur__piste"></span>
                 <span class="dk-interrupteur__libelle">…</span>
               </label>
   ========================================================================== */
.dk-interrupteur {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.dk-interrupteur__case {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.dk-interrupteur__piste {
  position: relative;
  flex: none;
  width: 44px;
  height: 24px;
  border-radius: var(--rayon-rond);
  background-color: var(--bordure-forte);
  transition: background-color var(--transition);
}
.dk-interrupteur__piste::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(18, 32, 58, 0.3);
  transition: transform var(--transition);
}
.dk-interrupteur__case:checked + .dk-interrupteur__piste {
  background-color: var(--accent);
}
.dk-interrupteur__case:checked + .dk-interrupteur__piste::after {
  transform: translateX(20px);
}
.dk-interrupteur__case:focus-visible + .dk-interrupteur__piste {
  outline: 2px solid var(--anneau);
  outline-offset: 2px;
}
.dk-interrupteur__case:disabled + .dk-interrupteur__piste {
  opacity: 0.5;
}
.dk-interrupteur__case:disabled ~ .dk-interrupteur__libelle {
  opacity: 0.5;
  cursor: not-allowed;
}
.dk-interrupteur__libelle {
  font-size: var(--taille-14);
  color: var(--texte);
}

/* ==========================================================================
   dk-chargement : indicateur de chargement (spinner)
   Tailles : --petit · (défaut) · --grand
   ========================================================================== */
.dk-chargement {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2.5px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: dk-rotation 0.8s linear infinite;
}
.dk-chargement--petit { width: 16px; height: 16px; border-width: 2px; }
.dk-chargement--grand { width: 36px; height: 36px; border-width: 3px; }
@keyframes dk-rotation {
  to { transform: rotate(1turn); }
}

/* Banniere de consentement (mesure publicitaire Google), cf. consent.js. */
#dk-consent{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:#12131a;color:#f4f4f6;
  padding:14px 18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  font-size:14px;box-shadow:0 -2px 16px rgba(0,0,0,.35)}
#dk-consent p{margin:0;max-width:70ch}
#dk-consent a{color:#8ab4ff}
.dk-consent-btns{display:flex;gap:8px}
#dk-consent button{padding:8px 16px;border-radius:8px;border:0;cursor:pointer;font-weight:600}
#dk-refuse{background:#2a2c38;color:#f4f4f6}
#dk-accept{background:#4c7dff;color:#fff}
@media(max-width:600px){#dk-consent{flex-direction:column;align-items:stretch}.dk-consent-btns{justify-content:flex-end}}