/* ============================================================
   DAKARMOTOS — JETONS DE DESIGN
   Repris à l'identique du prototype de référence (Dev A), converti
   en CSS pur : le prototype utilise la syntaxe Tailwind v4
   (@theme inline, @custom-variant, @apply), qui ne fonctionne que
   compilée par Tailwind. Ici, mêmes variables, mêmes classes,
   sans dépendance à un outil de build.
   ============================================================ */

:root {
  /* ---------- FAMILLES ---------- */
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Barlow Condensed', 'DM Sans', sans-serif;

  /* ---------- ÉCHELLE TYPOGRAPHIQUE ---------- */
  --type-display: 3.25rem;
  --type-title: 2.25rem;
  --type-heading: 1.75rem;
  --type-subheading: 1.25rem;
  --type-lead: 1.0625rem;
  --type-body: 1rem;
  --type-small: 0.875rem;
  --type-micro: 0.75rem;

  --type-display-mobile: 2.125rem;
  --type-title-mobile: 1.75rem;
  --type-heading-mobile: 1.375rem;

  --leading-tight: 1.02;
  --leading-snug: 1.22;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-display: -0.015em;
  --tracking-caps: 0.16em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* ---------- COULEURS ---------- */
  --dark: #063B69;
  --dark-2: #0E4E85;
  --dark-line: rgba(255, 255, 255, 0.14);
  --blue-light: #7CC0F0;
  --red-light: #FF8A93;

  --ink: #101012;
  --ink-2: #2E2E33;
  --ink-3: #6A6A72;
  --ink-4: #9B9BA3;
  --rule: #E4E4E7;
  --rule-strong: #C9C9CF;
  --surface-sunken: #F1F1F3;
  --surface: #FAFAFB;
  --surface-raised: #FFFFFF;

  --red: #E31E2F;
  --red-hover: #C2101D;
  --red-ink: #C2101D;
  --red-soft: #FDECEC;
  --red-on: #FFFFFF;

  --blue: #00579E;
  --blue-deep: #063B69;
  --blue-soft: #E8F1F9;
  --blue-on: #FFFFFF;

  --ok: #0E7A46;
  --ok-soft: #E6F2EC;
  --warn: #8A5A00;
  --warn-soft: #FBF1DC;
  --danger: #B3121C;
  --danger-soft: #FDECEC;

  --whatsapp: #25D366;
  --whatsapp-hover: #1BA94F;

  /* ---------- RAYONS ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* ---------- OMBRES ---------- */
  --shadow-raised: 0 1px 2px rgba(16, 16, 18, 0.06);
  --shadow-lifted: 0 6px 20px rgba(16, 16, 18, 0.1);
  --shadow-overlay: 0 12px 40px rgba(16, 16, 18, 0.22);

  /* ---------- ESPACEMENT (base 4) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ---------- GABARIT ---------- */
  --tap: 44px;
  --tap-lg: 52px;
  --shell: 1240px;
  --topbar-h: 64px;
  --bottombar-h: 60px;
  --bottombar-offset: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px));

  /* Anciennes variables du squelette du thème — conservées pour
     compatibilité avec header.php / footer.php existants, tant
     qu'ils n'ont pas été reconstruits à l'identique du prototype. */
  --dkm-noir: var(--ink);
  --dkm-gris-fonce: var(--ink-2);
  --dkm-gris: var(--ink-3);
  --dkm-gris-clair: var(--rule);
  --dkm-blanc: #ffffff;
  --dkm-fond: var(--surface);
  --dkm-fond-doux: var(--surface-sunken);
  --dkm-accent: var(--red);
  --dkm-accent-fonce: var(--red-hover);
  --dkm-texte: var(--ink);
  --dkm-texte-doux: var(--ink-3);
  --dkm-bordure: var(--rule);
  --dkm-police: var(--font-body);
  --dkm-police-titre: var(--font-body);
  --dkm-taille-base: var(--type-body);
  --dkm-hauteur-ligne: var(--leading-normal);
  --dkm-esp-xs: var(--space-1);
  --dkm-esp-sm: var(--space-2);
  --dkm-esp-md: var(--space-4);
  --dkm-esp-lg: var(--space-5);
  --dkm-esp-xl: var(--space-6);
  --dkm-esp-2xl: var(--space-8);
  --dkm-largeur-max: var(--shell);
  --dkm-gouttiere: var(--space-4);
  --dkm-rayon: var(--r-md);
  --dkm-ombre: var(--shadow-raised);
  --dkm-transition: 160ms ease;
}

@media (min-width: 768px) {
  :root { --bottombar-offset: 0px; --dkm-gouttiere: var(--space-6); }
}

/* ============================================================
   RÉINITIALISATION
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

.dkm-nav__liste, .dkm-nav__liste .sub-menu, .dkm-pied__liste, .dkm-widget ul {
  margin: 0; padding: 0; list-style: none;
}

img, picture, video { max-width: 100%; height: auto; display: block; }

input, button, textarea, select { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

* { border-color: var(--rule); }

/* ============================================================
   BASE
   ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-normal);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

h1 { font-size: var(--type-title-mobile); }
h2 { font-size: var(--type-heading-mobile); }
h3 { font-size: var(--type-subheading); }
h4 { font-size: var(--type-body); }

@media (min-width: 768px) {
  h1 { font-size: var(--type-title); }
  h2 { font-size: var(--type-heading); }
}

p { margin-bottom: var(--space-4); }

a { color: var(--red-ink); text-decoration: none; transition: color 160ms ease; }
a:hover { color: var(--red-hover); }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: var(--r-pill); }
::selection { background: var(--red); color: var(--red-on); }

/* ============================================================
   CLASSES DE COMPOSITION — reprises à l'identique du prototype
   ============================================================ */

/* ---------- Typographie par rôle ---------- */
.t-display {
  font-family: var(--font-display);
  font-size: var(--type-display-mobile);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
@media (min-width: 768px) { .t-display { font-size: var(--type-display); } }

.t-title {
  font-family: var(--font-display);
  font-size: var(--type-title-mobile);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
@media (min-width: 768px) { .t-title { font-size: var(--type-title); } }

.t-heading {
  font-family: var(--font-display);
  font-size: var(--type-heading-mobile);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
@media (min-width: 768px) { .t-heading { font-size: var(--type-heading); } }

.t-subheading {
  font-family: var(--font-display);
  font-size: var(--type-subheading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  text-transform: uppercase;
}

.t-lead { font-size: var(--type-lead); line-height: var(--leading-relaxed); color: var(--ink-3); }
.t-body { font-size: var(--type-body); line-height: var(--leading-normal); }
.t-small { font-size: var(--type-small); line-height: var(--leading-normal); }
.t-micro { font-size: var(--type-micro); line-height: var(--leading-normal); }

.t-label {
  font-family: var(--font-body);
  font-size: var(--type-small);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}
.t-label-lg {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: 1.3;
  display: block;
}

.t-price {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.t-num { font-variant-numeric: tabular-nums; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 var(--space-4);
  border-radius: var(--r-md);
  font-size: var(--type-small);
  font-weight: var(--weight-bold);
  line-height: 1;
  text-align: center;
  border: none;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  cursor: pointer;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-lg { min-height: var(--tap-lg); font-size: var(--type-body); padding: 0 var(--space-5); }
.btn-small { min-height: 32px; font-size: var(--type-micro); padding: 0 var(--space-3); gap: var(--space-1); }
.btn-block { width: 100%; }

.btn-red { background: var(--red); color: var(--red-on); }
.btn-red:hover:not(:disabled) { background: var(--red-hover); color: var(--red-on); }

.btn-dark { background: var(--dark); color: #FFFFFF; }
.btn-dark:hover:not(:disabled) { background: var(--dark-2); color: #FFFFFF; }

.btn-outline {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--rule-strong);
}
.btn-outline:hover:not(:disabled) {
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1.5px var(--ink);
  color: var(--ink);
}

.btn-outline-red {
  background: transparent;
  color: var(--red-ink);
  box-shadow: inset 0 0 0 1.5px var(--red);
}
.btn-outline-red:hover:not(:disabled) { background: var(--red-soft); color: var(--red-ink); }

.btn-blue { background: var(--blue); color: var(--blue-on); }
.btn-blue:hover:not(:disabled) { background: var(--blue-deep); color: var(--blue-on); }

.btn-ok { background: var(--ok); color: #FFFFFF; }
.btn-ok:hover:not(:disabled) { background: #0B5E37; color: #FFFFFF; }

.btn-whatsapp { background: var(--whatsapp); color: #FFFFFF; }
.btn-whatsapp:hover:not(:disabled) { background: var(--whatsapp-hover); color: #FFFFFF; }

.btn:disabled, .btn[aria-disabled='true'] {
  background: var(--surface-sunken);
  color: var(--ink-4);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  font-size: var(--type-small);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink);
  transition: color 160ms ease;
}
.link-arrow:hover { color: var(--red-ink); }
.link-arrow-light { color: #FFFFFF; }
.link-arrow-light:hover { color: var(--red); }

/* ---------- Champs ---------- */
.field {
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-3);
  background: var(--surface-raised);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--r-md);
  font-size: var(--type-body);
  color: var(--ink);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field::placeholder { color: var(--ink-4); }
.field:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }

.field-label {
  display: block;
  font-size: var(--type-small);
  font-weight: var(--weight-bold);
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.field-hint { font-size: var(--type-micro); color: var(--ink-3); margin-top: var(--space-1); }
.field-error { font-size: var(--type-micro); color: var(--danger); margin-top: var(--space-1); font-weight: 700; }
.field[aria-invalid="true"] { border-color: var(--danger); }

/* ---------- Surfaces ---------- */
.panel { background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.panel-flat { background: var(--surface-sunken); border-radius: var(--r-lg); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px var(--space-2);
  border-radius: var(--r-sm);
  font-size: var(--type-micro);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
  white-space: nowrap;
}
.badge-red { background: var(--red); color: var(--red-on); }
.badge-dark { background: var(--dark); color: #FFFFFF; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-blue { background: var(--blue-soft); color: var(--blue); }
.badge-neutral { background: var(--surface-sunken); color: var(--ink-3); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }

/* Variante pour fond sombre — bandeau du Catalogue.
   Toutes les autres variantes posent un fond plein pensé pour du papier
   clair ; sur le noir de l'univers vitrine, aucune ne tient. Celle-ci
   fonctionne à l'inverse : pas de fond, un contour et du texte clairs.

   📌 Les couleurs sont exprimées en blanc translucide plutôt qu'en gris
   fixe. Le bandeau du Catalogue est noir aujourd'hui, mais la pastille
   reste lisible sur n'importe quel fond sombre — et se pose sur une
   photo sans devoir être redéfinie. */
.badge-outline-light {
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* ---------- Encarts ---------- */
.note {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  font-size: var(--type-small);
  line-height: var(--leading-normal);
  border-left: 3px solid;
}
.note-ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ink-2); }
.note-info { background: var(--blue-soft); border-color: var(--blue); color: var(--ink-2); }
.note-neutral { background: var(--surface-sunken); border-color: var(--rule-strong); color: var(--ink-2); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.note-danger { background: var(--danger-soft); border-color: var(--danger); color: var(--ink-2); }
.note-warn { background: var(--warn-soft); border-color: var(--warn); color: var(--ink-2); }

.text-ok { color: var(--ok); }
.text-warn { color: var(--warn); }
.text-danger { color: var(--danger); }

/* ---------- Gabarit ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 768px) { .shell { padding-inline: var(--space-6); } }
.shell-narrow { width: 100%; max-width: 46rem; margin-inline: auto; padding-inline: var(--space-4); }
.shell-form { width: 100%; max-width: 28rem; margin-inline: auto; padding-inline: var(--space-4); }

.rule-red::before, .rule-blue::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  margin-right: var(--space-3);
  vertical-align: middle;
}
.rule-red::before { background: var(--red); }
.rule-blue::before { background: var(--blue-light); }

.bracket-red { position: relative; }
.bracket-red::before, .bracket-red::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid var(--red);
  pointer-events: none;
}
.bracket-red::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.bracket-red::after { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }

.ghost-number {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--rule-strong);
}
.ghost-number-light { -webkit-text-stroke-color: rgba(255, 255, 255, 0.22); }

.text-red { color: var(--red); }
.text-red-ink { color: var(--red-ink); }
.text-blue { color: var(--blue); }
.text-blue-light { color: var(--blue-light); }
.text-ink-2 { color: var(--ink-2); }
.text-ink-3 { color: var(--ink-3); }
.text-ink-4 { color: var(--ink-4); }
.bg-dark { background: var(--dark); }
.bg-surface { background: var(--surface); }
.bg-surface-raised { background: var(--surface-raised); }
.bg-surface-sunken { background: var(--surface-sunken); }
.text-white { color: #FFFFFF; }

/* ============================================================
   ANIMATIONS — mêmes courbes que le prototype
   ============================================================ */
@keyframes dkm-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes dkm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dkm-slide-left {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: none; }
}
@keyframes dkm-slide-right {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes dkm-zoom {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: none; }
}

.reveal { opacity: 0; }
.reveal-in { animation: dkm-rise 620ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.reveal-in-fade { animation: dkm-fade 700ms ease both; }
.reveal-in-left { animation: dkm-slide-left 700ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.reveal-in-right { animation: dkm-slide-right 700ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.reveal-in-zoom { animation: dkm-zoom 800ms cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ============================================================
   SQUELETTE DU THÈME — en-tête, navigation, pied de page
   Fidèle à Layout.tsx / Footer.tsx / WhatsAppFab.tsx du prototype :
     · barre du haut  → logo · nav desktop · recherche · panier/compte
     · barre du bas   → 4 onglets, mobile uniquement
     · bouton WhatsApp flottant, sur tous les écrans
   ============================================================ */

.dkm-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--ink); color: #fff;
}
.dkm-skip-link:focus { left: 0; color: #fff; }

.dkm-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.dkm-icone { display: block; flex-shrink: 0; }

/* ---------- Bandeau d'annonce (message fixe, fondu en boucle) ---------- */
/*
 * ⚠️ Vérifié en direct sur galsenfit.com (13/08), puis reprécisé par le
 * client : le « va-et-vient » ne désigne pas un déplacement horizontal du
 * texte, mais son apparition/disparition — le message reste immobile,
 * centré, et s'efface puis revient en fondu, en boucle.
 */
.dkm-bandeau-annonce {
  background: var(--red);
  padding-block: var(--space-2);
}
.dkm-bandeau-annonce__piste {
  display: flex;
  justify-content: center;
}
.dkm-bandeau-annonce__texte {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  white-space: nowrap;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
  animation: dkm-va-et-vient-bandeau 3s ease-in-out infinite;
}
@keyframes dkm-va-et-vient-bandeau {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dkm-bandeau-annonce__texte { animation: none; }
}

/* ---------- Barre du haut ---------- */

.dkm-entete {
  background: rgba(250, 250, 251, 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 50;
}
.admin-bar .dkm-entete { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .dkm-entete { top: 46px; } }

.dkm-entete__barre {
  display: flex; align-items: center; gap: var(--space-4);
  height: var(--topbar-h);
}

/* En-tête du tunnel de paiement : logo + sortie, rien d'autre. */
.dkm-entete--tunnel .dkm-entete__barre { justify-content: space-between; }

.dkm-entete__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.custom-logo-link img { max-height: 44px; width: auto; }

/* Sur mobile (< 640px) : le pilote seul. Le nom complet réapparaît
   au-delà — fidèle au comportement du composant Logo du prototype. */
.dkm-entete__logo-pilote--large { display: none; align-items: center; gap: 0.625rem; }
@media (min-width: 640px) {
  .dkm-entete__logo-pilote--compact { display: none; }
  .dkm-entete__logo-pilote--large { display: inline-flex; }
}
.dkm-entete__logo-nom {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.01em;
}
.dkm-entete__logo-nom-dakar,
.dkm-entete__logo-nom-motos { display: block; font-size: 1.25rem; }
@media (min-width: 768px) {
  .dkm-entete__logo-nom-dakar,
  .dkm-entete__logo-nom-motos { font-size: 1.375rem; }
}
.dkm-entete__logo-nom-dakar { color: var(--blue); }
.dkm-entete__logo-nom-motos { color: var(--red); }

.dkm-entete__droite { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
@media (min-width: 768px) { .dkm-entete__droite { gap: var(--space-4); } }

/* Nav desktop — masquée en dessous de 900px, la barre du bas prend le relais. */
.dkm-entete__nav { display: none; }
@media (min-width: 900px) { .dkm-entete__nav { display: flex; align-items: center; } }

.dkm-entete__nav-lien {
  position: relative;
  display: flex; align-items: center;
  height: var(--topbar-h);
  padding-inline: var(--space-3);
  font-size: var(--type-small); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-3);
  transition: color 160ms ease;
}
.dkm-entete__nav-lien:hover { color: var(--red-ink); }

/* Entrée active en rouge, et non en encre comme la maquette.
   Le trait rouge sous le libellé suffisait en théorie ; à l'usage, sur
   une barre où toutes les entrées sont en capitales grasses, il se
   remarque mal. La couleur double l'indice.

   📌 Écart assumé avec `Layout.tsx`, qui garde l'actif en `text-ink`.
   Pour revenir à la maquette : remplacer `--red-ink` par `--ink`. */
.dkm-entete__nav-lien.est-actif { color: var(--red-ink); }
.dkm-entete__nav-lien.est-actif::after {
  content: ''; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 0;
  height: 3px; background: var(--red);
}

/* Recherche — Shop / Catalogue uniquement */
.dkm-entete__recherche-desktop { display: none; width: 14rem; }
@media (min-width: 1024px) { .dkm-entete__recherche-desktop { display: block; } }
@media (min-width: 1280px) { .dkm-entete__recherche-desktop { width: 18rem; } }

.dkm-entete__recherche-mobile { padding: 0.625rem var(--space-4); border-top: 1px solid var(--rule); }
@media (min-width: 1024px) { .dkm-entete__recherche-mobile { display: none; } }

.dkm-recherche { position: relative; width: 100%; }
.dkm-recherche__icone { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--ink-4); pointer-events: none; }
.dkm-recherche__champ {
  width: 100%; min-height: var(--tap); padding: 0 var(--space-4) 0 2.25rem;
  background: var(--surface-sunken); border: 1.5px solid transparent; border-radius: var(--r-md);
  font-size: var(--type-small); color: var(--ink);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.dkm-recherche__champ::placeholder { color: var(--ink-4); }
.dkm-recherche__champ:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); background: var(--surface-raised); }
.dkm-recherche__champ::-webkit-search-cancel-button { display: none; }
.dkm-recherche__effacer {
  position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  background: none; border: 0; border-radius: var(--r-md); color: var(--ink-3); cursor: pointer;
}
.dkm-recherche__effacer:hover { color: var(--ink); }

/* Panier / compte */
.dkm-entete__actions { display: flex; align-items: center; gap: var(--space-1); }
.dkm-icon-btn {
  position: relative; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-md);
  color: var(--ink); transition: background-color 160ms ease, color 160ms ease;
}
.dkm-icon-btn:hover { background: var(--surface-sunken); color: var(--ink); }
.dkm-icon-btn.est-actif { background: var(--red-soft); color: var(--red-ink); }
/* [hidden] doit gagner sur la classe : sans les deux règles [hidden]
   ci-dessous, l'attribut HTML "hidden" natif est écrasé par nos
   display:grid, et badge/pastille restent visibles en permanence même
   quand le JS pose `hidden = true` (même bug que
   .dkm-confirmation-contact, corrigé le 07/08/2026). */
.dkm-icon-btn__badge {
  position: absolute; right: -1px; top: -1px;
  display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: var(--r-pill); background: var(--red); color: var(--red-on);
  font-size: 11px; font-weight: 700; line-height: 1;
}
.dkm-icon-btn__badge[hidden] { display: none; }
.dkm-icon-btn__pastille {
  position: absolute; right: 6px; top: 6px; width: 8px; height: 8px;
  border-radius: var(--r-pill); background: var(--ok);
  box-shadow: 0 0 0 2px var(--surface-raised);
}
.dkm-icon-btn__pastille[hidden] { display: none; }

/* Menu compte — écrans métier (Lot 6, Sprint 3). Uniquement affiché aux
   comptes livreur/gestionnaire ; un client ordinaire garde le lien
   simple ci-dessus, inchangé. */
.dkm-compte-menu { position: relative; }
.dkm-compte-menu__panneau {
  position: absolute; right: 0; top: calc(100% + var(--space-2));
  min-width: 14rem; padding: var(--space-2);
  background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  display: flex; flex-direction: column; gap: 2px;
  z-index: 40;
}
.dkm-compte-menu__lien {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--r-md);
  color: var(--ink); text-decoration: none; font-size: var(--type-small); font-weight: 600;
  transition: background-color 160ms ease;
}
/* 🔴 TROISIÈME OCCURRENCE DU MÊME PIÈGE — corrigé le 24/08.
   Le panneau porte `display: flex`, qui ÉCRASE l'attribut HTML `hidden` : la
   feuille de style de l'agent utilisateur ne pose `display: none` sur
   `[hidden]` qu'avec une spécificité nulle, donc n'importe quelle règle
   d'auteur gagne. Le menu compte restait donc ouvert EN PERMANENCE, avec
   « Se déconnecter » affiché sur toutes les pages, alors que le JavaScript
   posait bien `panneau.hidden = true` (voir initMenuCompte() dans main.js).

   ⚠️ C'est exactement le défaut déjà corrigé sur .dkm-confirmation-contact
   (07/08) puis sur .dkm-icon-btn__badge et __pastille — les commentaires
   trente lignes plus haut le décrivent mot pour mot. Il est reparu ici parce
   que la règle de garde se pose à la main, une par une.

   📌 Règle générale à retenir : toute classe qui déclare un `display` sur un
   élément que le JavaScript masque par `hidden` DOIT poser son garde-fou. */
.dkm-compte-menu__panneau[hidden] { display: none; }

.dkm-compte-menu__lien:hover { background: var(--surface-sunken); }
.dkm-compte-menu__lien--deconnexion {
  color: var(--red-ink); margin-top: 2px; padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
}

.dkm-contenu { flex: 1 0 auto; padding-block: var(--space-5); }
@media (min-width: 768px) { .dkm-contenu { padding-block: var(--space-6); } }

/* ---------- Pied de page ---------- */

.dkm-pied {
  flex-shrink: 0; margin-top: var(--space-8);
  background: var(--dark); color: rgba(255,255,255,0.7);
}
.dkm-pied a { color: #fff; }
.dkm-pied a:hover { color: var(--blue-light); }

.dkm-pied__reassurance { border-bottom: 1px solid var(--dark-line); }
.dkm-pied__reassurance-grille { display: grid; gap: var(--space-4); grid-template-columns: 1fr; padding-block: var(--space-5); }
@media (min-width: 700px) { .dkm-pied__reassurance-grille { grid-template-columns: repeat(3, 1fr); } }
.dkm-pied__reassurance-item { display: flex; align-items: center; gap: var(--space-3); }
.dkm-pied__reassurance-icone {
  display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px;
  border-radius: var(--r-md); background: var(--blue); color: #fff;
}

.dkm-pied__corps { padding-block: var(--space-7); }
.dkm-pied__grille { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 768px) { .dkm-pied__grille { grid-template-columns: repeat(4, 1fr); } }

.dkm-pied__liste-nav,
.dkm-pied__liste-coordonnees,
.dkm-pied__liste-horaires { display: flex; flex-direction: column; gap: var(--space-3); }
.dkm-pied__liste-nav a { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--type-small); color: rgba(255,255,255,0.7); }
.dkm-pied__liste-nav a:hover { color: #fff; }
.dkm-pied__liste-nav-icone { color: var(--blue-light); flex-shrink: 0; }
.dkm-pied__liste-coordonnees li { display: flex; align-items: flex-start; gap: 0.625rem; font-size: var(--type-small); color: rgba(255,255,255,0.7); }
.dkm-pied__liste-coordonnees li > span:first-child,
.dkm-pied__liste-horaires li > span:first-child { color: var(--blue-light); flex-shrink: 0; margin-top: 2px; }
.dkm-pied__liste-coordonnees a { font-size: var(--type-small); color: rgba(255,255,255,0.7); }
.dkm-pied__liste-coordonnees a:hover { color: #fff; }
.dkm-pied__liste-horaires li { display: flex; align-items: flex-start; gap: 0.625rem; font-size: var(--type-small); }
.dkm-pied__jour { display: block; }
.dkm-pied__heure { display: block; font-weight: 700; color: rgba(255,255,255,0.9); }

.dkm-pied__bas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--dark-line);
}

/* ---------- Barre du bas (mobile) — fidèle à Layout.tsx ---------- */

.dkm-nav-bas-espace { height: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { .dkm-nav-bas-espace { display: none; } }

.dkm-nav-bas {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  display: flex;
  border-top: 1px solid var(--rule); background: var(--surface-raised);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 900px) { .dkm-nav-bas { display: none; } }

.dkm-nav-bas__item {
  position: relative;
  display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
  height: var(--bottombar-h);
  color: var(--ink-3);
}
.dkm-nav-bas__item span { font-size: 11px; font-weight: 700; line-height: 1; }
.dkm-nav-bas__item.est-actif { color: var(--red-ink); }
.dkm-nav-bas__item.est-actif::before {
  content: ''; position: absolute; left: var(--space-4); right: var(--space-4); top: 0;
  height: 3px; background: var(--red);
}

/* ---------- Bouton WhatsApp flottant — fidèle à WhatsAppFab.tsx ---------- */

@keyframes dkm-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.dkm-whatsapp-fab {
  position: fixed; right: var(--space-3); z-index: 70;
  /* Marge relevée (1.25rem au lieu de 0.75rem) : sur mobile, le bouton
     restait visuellement trop collé à la barre d'onglets du bas. */
  bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px) + 1.25rem);
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2);
}
@media (min-width: 900px) {
  .dkm-whatsapp-fab { right: var(--space-6); bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem); }
}
/* Tunnel : pas de barre du bas, donc pas de décalage à réserver. */
.dkm-whatsapp-fab--tunnel { bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem); }

.dkm-whatsapp-fab__remonter {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 0; border-radius: var(--r-md); background: var(--dark); color: #fff;
  box-shadow: var(--shadow-lifted); cursor: pointer; transition: background-color 160ms ease;
}
.dkm-whatsapp-fab__remonter:hover { background: var(--red); }

/* Bouton réduit sur mobile (46px au lieu de 56px, icône et texte plus
   petits) : trop imposant à côté de la barre d'onglets sur petit écran.
   Redimensionné à sa taille d'origine à partir de 900px. */
.dkm-whatsapp-fab__bouton {
  display: flex; align-items: center; gap: var(--space-2);
  height: 46px; padding-inline: var(--space-3); border-radius: var(--r-pill);
  background: var(--whatsapp); color: #fff; box-shadow: var(--shadow-lifted);
  animation: dkm-pulse-ring 2.4s ease-out infinite;
  transition: background-color 160ms ease;
}
.dkm-whatsapp-fab__bouton svg { width: 18px; height: 18px; flex-shrink: 0; }
.dkm-whatsapp-fab__bouton:hover { background: var(--whatsapp-hover); color: #fff; }
.dkm-whatsapp-fab__texte {
  overflow: hidden; white-space: nowrap; max-width: 11rem;
  font-size: 0.8125rem; font-weight: 700;
  transition: max-width 300ms ease, opacity 300ms ease;
}
.dkm-whatsapp-fab.est-reduit .dkm-whatsapp-fab__texte { max-width: 0; opacity: 0; }

@media (min-width: 900px) {
  .dkm-whatsapp-fab__remonter { width: 44px; height: 44px; }
  .dkm-whatsapp-fab__bouton { gap: var(--space-3); height: 56px; padding-inline: var(--space-4); }
  .dkm-whatsapp-fab__bouton svg { width: 24px; height: 24px; }
  .dkm-whatsapp-fab__texte { max-width: 15rem; font-size: var(--type-small); }
}

/* ============================================================
   PAGE D'ACCUEIL — front-page.php
   Classes exactes du prototype (t-display, btn-red, shell, etc.)
   ============================================================ */

.dkm-hero { position: relative; isolation: isolate; overflow: hidden; background: #fff; }
/* object-fit: contain (plutôt que cover) — la photo est un cliché produit
   détouré sur fond blanc, pas une photo d'ambiance plein cadre : on évite
   ainsi de rogner la moto, le fond blanc se fond naturellement dans le
   voile ci-dessous. */
.dkm-hero__fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right center; }
.dkm-hero__voile {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.9) 38%, rgba(255,255,255,0.35) 66%, rgba(255,255,255,0.05) 100%);
}
.dkm-hero__inner { position: relative; padding-block: var(--space-8); }
@media (min-width: 768px) { .dkm-hero__inner { padding-block: var(--space-8) calc(var(--space-8) + var(--space-4)); } }
.dkm-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.dkm-hero__chiffres {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
  max-width: 32rem; margin-top: var(--space-7);
  border-top: 1px solid var(--rule-strong); padding-top: var(--space-5);
}
.dkm-hero__chiffres dt { font-size: 1.75rem; line-height: 1; color: var(--blue); }
.dkm-hero__chiffres dd { margin-top: var(--space-2); color: var(--ink-3); }

.dkm-atouts { padding-block: var(--space-8); background: var(--surface-raised); border-block: 1px solid var(--rule); }
.dkm-atouts__grille { display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: 1fr; margin-top: var(--space-6); }
@media (min-width: 600px) { .dkm-atouts__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dkm-atouts__grille { grid-template-columns: repeat(4, 1fr); } }
.dkm-atout { border-top: 2px solid var(--blue); padding-top: var(--space-4); }
.dkm-atout .dkm-icone { color: var(--blue); }
.dkm-atout h3 { margin-top: var(--space-4); }
.dkm-atout p { margin-top: var(--space-2); color: var(--ink-3); }

.dkm-produits, .dkm-motos-vedettes { padding-block: var(--space-8); }
.dkm-motos-vedettes { background: var(--surface); }
.dkm-produits__entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.dkm-produits__entete h2 { margin: 0; }
.dkm-produits__pied { margin-top: var(--space-6); text-align: center; }
.dkm-produits__grille { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .dkm-produits__grille { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }

.dkm-carte-produit { background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.dkm-carte-produit__lien { color: inherit; display: block; padding: var(--space-3); }
.dkm-carte-produit__lien:hover { color: inherit; }
.dkm-carte-produit__image { margin-bottom: var(--space-3); border-radius: var(--r-md); overflow: hidden; background: var(--surface-sunken); }
.dkm-carte-produit__image img { aspect-ratio: 1/1; object-fit: cover; }
.dkm-carte-produit__nom { margin: 0 0 0.25rem; font-family: var(--font-body); text-transform: none; font-size: var(--type-small); font-weight: 700; }
.dkm-carte-produit__prix { margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--red-ink); }
.dkm-carte-produit .btn { margin: 0 var(--space-3) var(--space-3); width: calc(100% - var(--space-3) * 2); }

.dkm-motos-vedettes__grille { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 700px) { .dkm-motos-vedettes__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .dkm-motos-vedettes__grille { grid-template-columns: repeat(3, 1fr); } }

.dkm-carte-moto { background: var(--surface-raised); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--rule); }
.dkm-carte-moto__image { position: relative; display: block; background: var(--surface-sunken); }
.dkm-carte-moto__image img { aspect-ratio: 4/3; object-fit: cover; }
.dkm-carte-moto__corps { padding: var(--space-4); }
.dkm-carte-moto__corps h3 { margin-top: 0; }
.dkm-carte-moto__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }

/* ---------- Carrousel "Nos motos vedettes" — fidèle à Accueil.tsx ---------- */

.dkm-vedette-carousel { overflow: hidden; border-radius: var(--r-lg); background: var(--dark); }
.dkm-vedette-carousel__grille { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .dkm-vedette-carousel__grille { grid-template-columns: repeat(2, 1fr); } }

.dkm-vedette-carousel__panneau {
  display: none; flex-direction: column; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-6); background: var(--red); color: #fff;
}
.dkm-vedette-carousel__panneau.est-actif { display: flex; }
@media (min-width: 768px) { .dkm-vedette-carousel__panneau { padding: var(--space-7) var(--space-8); } }

.dkm-vedette-carousel__caracteristiques {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4);
  margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,0.25);
}
.dkm-vedette-carousel__caracteristiques dt { font-size: var(--type-micro); color: rgba(255,255,255,0.7); }
.dkm-vedette-carousel__caracteristiques dd { margin-top: 0.125rem; font-weight: 700; }

.dkm-vedette-carousel__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }

.dkm-vedette-carousel__nav { display: flex; align-items: center; gap: var(--space-2); }
.dkm-vedette-carousel__nav-bouton {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md);
  background: none; border: 1px solid rgba(255,255,255,0.4); color: #fff; cursor: pointer;
  transition: background-color 160ms ease;
}
.dkm-vedette-carousel__nav-bouton:hover { background: rgba(255,255,255,0.15); }

.dkm-vedette-carousel__visuels { position: relative; aspect-ratio: 4 / 3; }
@media (min-width: 1024px) { .dkm-vedette-carousel__visuels { aspect-ratio: auto; } }
.dkm-vedette-carousel__image { position: absolute; inset: 0; display: none; }
.dkm-vedette-carousel__image.est-actif { display: block; }
.dkm-vedette-carousel__image img { width: 100%; height: 100%; object-fit: cover; }
.dkm-vedette-carousel__image .badge { position: absolute; right: var(--space-4); top: var(--space-4); }

.dkm-reassurance { padding-block: var(--space-8); background: var(--dark); color: #fff; }
.dkm-reassurance__grille { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 700px) { .dkm-reassurance__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dkm-reassurance__grille { grid-template-columns: repeat(4, 1fr); } }
.dkm-reassurance__item h3 { margin-top: var(--space-2); margin-bottom: var(--space-1); color: #fff; }
.dkm-reassurance__item p { margin: 0; color: rgba(255,255,255,0.6); }

/* ============================================================
   SECTIONS SUPPLÉMENTAIRES ACCUEIL — Univers, Indispensables,
   Vidéo, Marques (fidèles à Accueil.tsx)
   ============================================================ */

/* --- Univers des motos / Accessoires intro (texte + image) --- */

.dkm-univers,
.dkm-accessoires-intro {
	padding-block: var(--space-8);
}

.dkm-univers__grille {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 900px) {
	.dkm-univers__grille {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-7);
	}
	.dkm-univers__grille--inverse > div:first-child { order: 2; }
	.dkm-univers__grille--inverse > div:last-child { order: 1; }
}

.dkm-accessoires-intro { background: var(--surface-sunken); }

/* Cadre blanc autour de la photo produit (fond blanc) pour un rendu
   "carte" propre plutôt qu'un détourage flottant sur le fond sunken. */
.dkm-accessoires-intro__cadre {
	background: #fff;
	border-radius: var(--r-lg);
	padding: var(--space-5);
	display: flex;
	align-items: center;
	justify-content: center;
}
.dkm-accessoires-intro__cadre img { border-radius: var(--r-md) !important; }

/* --- Les indispensables (fond sombre) --- */

.dkm-indispensables {
	padding-block: var(--space-8);
	background: var(--dark);
	color: #fff;
}

.dkm-indispensables .t-title { color: #fff; }

.dkm-indispensables__grille {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
	align-items: center;
	margin-top: var(--space-7);
}

@media (min-width: 900px) {
	.dkm-indispensables__grille {
		grid-template-columns: 1fr auto 1fr;
		gap: var(--space-6);
	}
}

.dkm-indispensables__colonne {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.dkm-indispensables__colonne li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
}

@media (min-width: 900px) {
	.dkm-indispensables__colonne--droite li {
		flex-direction: row-reverse;
		text-align: right;
	}
}

.dkm-indispensables__colonne h3 { color: #fff; }

.dkm-indispensables__image {
	order: -1;
	max-width: 260px;
	margin-inline: auto;
}

@media (min-width: 900px) {
	.dkm-indispensables__image { order: 0; }
}

/* --- Vidéo / Adrénaline --- */

.dkm-video {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--dark);
}

.dkm-video__fond {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
}

.dkm-video__voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(95deg, rgba(6,59,105,0.95) 0%, rgba(6,59,105,0.75) 45%, rgba(6,59,105,0.3) 100%);
}

.dkm-video__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-6);
	padding-block: var(--space-8);
}

@media (min-width: 900px) {
	.dkm-video__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.dkm-video__bouton {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	color: #fff;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
}

.dkm-video__play {
	display: grid;
	place-items: center;
	width: 80px;
	height: 80px;
	border-radius: var(--r-pill);
	border: 2px solid rgba(255,255,255,0.5);
	font-size: 1.5rem;
	transition: background 200ms ease, border-color 200ms ease;
}

.dkm-video__bouton:hover .dkm-video__play {
	background: var(--red);
	border-color: var(--red);
}

/* ---------- Modale vidéo ---------- */

.dkm-video-modal {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: grid;
	place-items: center;
	background: rgba(0,0,0,0.85);
	padding: var(--space-4);
}
.dkm-video-modal[hidden] { display: none; }

.dkm-video-modal__fermer {
	position: absolute;
	right: var(--space-4);
	top: var(--space-4);
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: var(--r-md);
	background: rgba(255,255,255,0.1);
	color: #fff;
	cursor: pointer;
}
.dkm-video-modal__fermer:hover { background: rgba(255,255,255,0.2); }

.dkm-video-modal__corps {
	width: 100%;
	max-width: 48rem;
	aspect-ratio: 16 / 9;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: #000;
}

.dkm-video-modal__lecteur { display: block; width: 100%; height: 100%; }

/* --- Marques partenaires --- */

.dkm-marques {
	padding-block: var(--space-7);
	background: var(--surface-sunken);
	border-bottom: 1px solid var(--rule);
}

.dkm-marques__grille {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(2, 1fr);
	margin-top: var(--space-6);
	list-style: none;
	padding: 0;
}

@media (min-width: 600px) {
	.dkm-marques__grille { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
	.dkm-marques__grille { grid-template-columns: repeat(5, 1fr); }
}

.dkm-marques__item {
	display: grid;
	place-items: center;
	height: 96px;
	padding-inline: var(--space-3);
	background: var(--surface-raised);
	border-radius: var(--r-md);
	font-family: var(--font-display);
	font-size: 1.0625rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ink-3);
	transition: color 160ms ease;
}

.dkm-marques__item:hover { color: var(--red-ink); }

.dkm-marques__logo {
	max-width: 90%;
	max-height: 64px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter 160ms ease, opacity 160ms ease;
}

.dkm-marques__item:hover .dkm-marques__logo { filter: grayscale(0); opacity: 1; }

/* ============================================================
   CARTE PRODUIT V2 — fidèle à ProductCard.tsx
   ============================================================ */

.dkm-carte-produit-v2 {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--r-lg);
	border: 1px solid var(--rule);
	background: var(--surface-raised);
	transition: box-shadow 300ms ease;
}
.dkm-carte-produit-v2:hover { box-shadow: var(--shadow-lifted); }

/* Lien diffusé — toute la carte est cliquable (image comprise), pas
   seulement le titre. z-index le plus bas : rien d'autre n'est
   interactif dans la carte, pas de conflit de clic à gérer. */
.dkm-carte-produit-v2__lien-diffuse {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.dkm-carte-produit-v2__image {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--surface-sunken);
}
.dkm-carte-produit-v2__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}
.dkm-carte-produit-v2:hover .dkm-carte-produit-v2__image img { transform: scale(1.05); }

.dkm-carte-produit-v2__corps {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.375rem;
	padding: var(--space-3);
}

.dkm-carte-produit-v2__pied {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-2);
	margin-top: auto;
	padding-top: 0.625rem;
}

.dkm-bouton-rond {
	position: relative;
	z-index: 2; /* au-dessus du lien diffusé (z-index: 1) de la carte produit — sinon il intercepte le clic. */
	width: 44px;
	height: 44px;
	min-height: 44px;
	padding: 0;
	border-radius: var(--r-pill);
	font-size: 1.25rem;
	line-height: 1;
	flex-shrink: 0;
}

/* ============================================================
   PAGE CATALOGUE — fidèle à Catalogue.tsx / VehicleCard.tsx /
   UniverseHeader.tsx / FilterSheet.tsx / EmptyState.tsx
   ============================================================ */

.dkm-univers-header--sombre { background: var(--dark); }

.dkm-catalogue__mise-en-page {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}
@media (min-width: 900px) {
	.dkm-catalogue__mise-en-page { flex-direction: row; align-items: flex-start; }
}

/* Colonne filtres : visible seulement desktop (le panneau mobile
   plein écran prend le relais en dessous de 900px). */
.dkm-catalogue__filtres--desktop { display: none; }
@media (min-width: 900px) {
	.dkm-catalogue__filtres--desktop {
		display: block;
		flex-shrink: 0;
		width: 224px;
		position: sticky;
		top: calc(var(--topbar-h) + var(--space-4));
	}
}

.dkm-catalogue__filtres-entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-4);
}

.dkm-filtre-groupe { margin: 0 0 var(--space-6); border: 0; padding: 0; }
.dkm-filtre-groupe:last-child { margin-bottom: 0; }

.dkm-filtre-puces { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Puce — couleur active dépend de l'univers : sombre pour Catalogue,
   rouge pour Shop (voir carte-produit-v2 pour le Shop). */
.dkm-puce {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding: 0 0.75rem;
	border-radius: var(--r-md);
	font-size: var(--type-small);
	font-weight: 700;
	color: var(--ink-2);
	background: var(--surface-raised);
	box-shadow: inset 0 0 0 1px var(--rule-strong);
	transition: background-color 160ms ease, color 160ms ease;
}
.dkm-puce:hover { background: var(--surface-sunken); color: var(--ink-2); }
.dkm-puce--catalogue.dkm-puce--active {
	background: var(--dark);
	color: #fff;
	box-shadow: none;
}
.dkm-puce--catalogue.dkm-puce--active:hover { background: var(--dark); color: #fff; }

/* --- Zone résultats --- */

.dkm-catalogue__resultats { flex: 1; min-width: 0; }

.dkm-catalogue__resultats-entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.dkm-bouton-filtres-mobile { display: inline-flex; }
@media (min-width: 900px) { .dkm-bouton-filtres-mobile { display: none; } }

.dkm-pastille {
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	margin-left: 0.375rem;
	padding: 0 0.25rem;
	border-radius: var(--r-pill);
	background: var(--red);
	color: var(--red-on);
	font-size: 11px;
	font-weight: 700;
}

.dkm-catalogue__grille {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
}
@media (min-width: 640px) { .dkm-catalogue__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .dkm-catalogue__grille { grid-template-columns: repeat(3, 1fr); } }

/* --- État vide, fidèle à EmptyState.tsx --- */

.dkm-etat-vide {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-block: var(--space-8);
}

.dkm-etat-vide__icone {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: var(--r-pill);
	background: var(--surface-sunken);
	color: var(--ink-3);
	font-size: 1.5rem;
}

/* --- Carte véhicule --- */

.dkm-carte-vehicule {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--r-lg);
	background: var(--dark);
	color: #fff;
	box-shadow: var(--shadow-raised);
	transition: box-shadow 300ms ease;
}
.dkm-carte-vehicule:hover { box-shadow: var(--shadow-lifted); }

.dkm-carte-vehicule__image {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--surface-sunken);
}
.dkm-carte-vehicule__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}
.dkm-carte-vehicule:hover .dkm-carte-vehicule__image img { transform: scale(1.05); }

.dkm-badge-image { position: absolute; background: rgba(0,0,0,0.45); }
.dkm-badge-image--haut-gauche { left: var(--space-3); top: var(--space-3); }
.dkm-badge-image--bas-droite { right: var(--space-3); bottom: var(--space-3); }

.dkm-carte-vehicule__corps {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-4);
}

.dkm-carte-vehicule__pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	border-top: 1px solid var(--dark-line);
	padding-top: var(--space-3);
}

.dkm-carte-vehicule__actions { display: flex; gap: var(--space-2); }

/* ============================================================
   PANNEAU DE FILTRES MOBILE — fidèle à FilterSheet.tsx
   ============================================================ */

.dkm-filter-sheet {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 200;
	flex-direction: column;
	background: var(--surface);
}
.dkm-filter-sheet.est-ouvert { display: flex; }
@media (min-width: 900px) { .dkm-filter-sheet { display: none !important; } }

.dkm-filter-sheet__entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	height: var(--topbar-h);
	padding-inline: var(--space-4);
	border-bottom: 1px solid var(--rule);
	background: var(--surface-raised);
}

.dkm-filter-sheet__fermer {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	border-radius: var(--r-md);
	color: var(--ink);
	font-size: 1.1rem;
	cursor: pointer;
}
.dkm-filter-sheet__fermer:hover { background: var(--surface-sunken); }

.dkm-filter-sheet__corps {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-5) var(--space-4);
}

.dkm-filter-sheet__pied {
	display: flex;
	gap: var(--space-2);
	flex-shrink: 0;
	padding: var(--space-4);
	border-top: 1px solid var(--rule);
	background: var(--surface-raised);
	padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   PAGE SHOP — complète catalogue.css (réutilise puces, filter-sheet,
   état vide déjà définis)
   ============================================================ */

.dkm-univers-header--claire { background: var(--surface-raised); }

/* Puce Shop : active en rouge (vs sombre pour Catalogue) */
.dkm-puce--shop.dkm-puce--active {
	background: var(--red);
	color: var(--red-on);
	box-shadow: none;
}
.dkm-puce--shop.dkm-puce--active:hover { background: var(--red); color: var(--red-on); }

.dkm-produits__grille--shop {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .dkm-produits__grille--shop { gap: var(--space-5); } }
@media (min-width: 1024px) { .dkm-produits__grille--shop { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .dkm-produits__grille--shop { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   PAGE CONTACT — fidèle à Contact.tsx
   ============================================================ */

.dkm-bandeau-whatsapp {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	max-width: 36rem;
	margin-top: var(--space-5);
	padding: var(--space-4);
	border-radius: var(--r-lg);
	background: var(--whatsapp);
	color: #fff;
	transition: background 160ms ease;
}
.dkm-bandeau-whatsapp:hover { background: var(--whatsapp-hover); color: #fff; }
.dkm-bandeau-whatsapp__icone { font-size: 1.5rem; flex-shrink: 0; }

.dkm-contact__grille {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
	margin-top: var(--space-6);
}
@media (min-width: 768px) {
	.dkm-contact__grille { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
}

.dkm-contact__coordonnees { display: flex; flex-direction: column; gap: var(--space-6); }

.dkm-contact__liste { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.dkm-contact__liste li { display: flex; gap: var(--space-3); align-items: flex-start; }

.dkm-contact__icone {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: var(--r-md);
	background: var(--surface-sunken);
	font-size: 1rem;
}

.dkm-contact__plan { border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.dkm-contact__plan-vignette {
	aspect-ratio: 16 / 9;
	display: grid;
	place-items: center;
	background: var(--surface-sunken);
}
.dkm-contact__plan-carte {
	text-align: center;
	background: var(--surface-raised);
	border-radius: var(--r-md);
	padding: var(--space-4);
	box-shadow: var(--shadow-raised);
}
.dkm-contact__plan-lien {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--tap);
	border-top: 1px solid var(--rule);
	background: var(--surface-raised);
	font-size: var(--type-small);
	font-weight: 700;
	color: var(--ink);
}
.dkm-contact__plan-lien:hover { background: var(--surface-sunken); color: var(--ink); }

/* --- Confirmation --- */

.dkm-confirmation-contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--space-7) var(--space-4);
}
.dkm-confirmation-contact__icone {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: var(--r-pill);
	background: var(--ok-soft);
	color: var(--ok);
	font-size: 1.75rem;
}

/* ============================================================
   PAGE CONTACT — fidèle à Contact.tsx
   ============================================================ */

.dkm-bandeau-whatsapp {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	max-width: 36rem;
	margin-top: var(--space-5);
	padding: var(--space-4);
	border-radius: var(--r-lg);
	background: var(--whatsapp);
	color: #fff;
	transition: background 160ms ease;
}
.dkm-bandeau-whatsapp:hover { background: var(--whatsapp-hover); color: #fff; }
.dkm-bandeau-whatsapp__icone { font-size: 1.5rem; flex-shrink: 0; }

.dkm-contact__grille {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
	margin-top: var(--space-6);
}
@media (min-width: 768px) {
	.dkm-contact__grille { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
}

.dkm-contact__coordonnees { display: flex; flex-direction: column; gap: var(--space-6); }

.dkm-contact__liste { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.dkm-contact__liste li { display: flex; gap: var(--space-3); align-items: flex-start; }

.dkm-contact__icone {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: var(--r-md);
	background: var(--surface-sunken);
	font-size: 1rem;
}

.dkm-contact__plan { border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.dkm-contact__plan-vignette {
	aspect-ratio: 16 / 9;
	display: grid;
	place-items: center;
	background: var(--surface-sunken);
}
.dkm-contact__plan-carte {
	text-align: center;
	background: var(--surface-raised);
	border-radius: var(--r-md);
	padding: var(--space-4);
	box-shadow: var(--shadow-raised);
}
.dkm-contact__plan-lien {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--tap);
	border-top: 1px solid var(--rule);
	background: var(--surface-raised);
	font-size: var(--type-small);
	font-weight: 700;
	color: var(--ink);
}
.dkm-contact__plan-lien:hover { background: var(--surface-sunken); color: var(--ink); }

/* --- Confirmation ---
   [hidden] doit gagner sur la classe : sans cette règle, l'attribut
   HTML "hidden" natif est écrasé par notre display:flex ci-dessous,
   et le bloc de confirmation reste visible en permanence, avant
   même tout envoi du formulaire. Bug corrigé le 07/08/2026. */

.dkm-confirmation-contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--space-7) var(--space-4);
}
.dkm-confirmation-contact[hidden] {
	display: none;
}
.dkm-confirmation-contact__icone {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: var(--r-pill);
	background: var(--ok-soft);
	color: var(--ok);
	font-size: 1.75rem;
}

/* ============================================================
   STYLE DES CHAMPS CONTACT FORM 7 — pour correspondre à .field/.btn
   Le formulaire réel est généré par CF7, dont le HTML n'est pas sous
   notre contrôle direct : on cible ses classes standards.
   ============================================================ */

.wpcf7-form p { margin-bottom: var(--space-4); }

.wpcf7-form label {
	display: block;
	font-size: var(--type-small);
	font-weight: 700;
	color: var(--ink);
	margin-bottom: var(--space-2);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="email"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	min-height: var(--tap);
	padding: var(--space-3);
	background: var(--surface-raised);
	border: 1.5px solid var(--rule-strong);
	border-radius: var(--r-md);
	font-size: var(--type-body);
	font-family: var(--font-body);
	color: var(--ink);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
.wpcf7-form textarea { min-height: 120px; resize: vertical; }

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--red);
	box-shadow: 0 0 0 3px var(--red-soft);
}

.wpcf7-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--tap-lg);
	padding: 0 var(--space-5);
	border: none;
	border-radius: var(--r-md);
	background: var(--red);
	color: var(--red-on);
	font-size: var(--type-body);
	font-weight: 700;
	cursor: pointer;
	transition: background 160ms ease;
}
.wpcf7-form input[type="submit"]:hover { background: var(--red-hover); }
.wpcf7-form input[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }

.wpcf7-not-valid-tip {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--type-micro);
	color: var(--danger);
	font-weight: 600;
}

.wpcf7-response-output {
	margin-top: var(--space-4);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--r-md);
	border: 1px solid var(--rule);
	font-size: var(--type-small);
}

/* Le message de succès textuel par défaut de CF7 est masqué : notre
   bloc de confirmation personnalisé (déclenché en JS) prend le relais. */
.wpcf7-mail-sent-ok { display: none; }

/* ============================================================
   FICHE PRODUIT — fidèle à FicheMoto.tsx / FicheAccessoire.tsx /
   ImageGallery.tsx du prototype
   ============================================================ */

/* ---------- Fil d'Ariane d'univers ---------- */

.dkm-universe-breadcrumb--sombre { background: var(--dark); color: #fff; }
.dkm-universe-breadcrumb--claire { background: var(--surface-raised); border-bottom: 1px solid var(--rule); }
.dkm-universe-breadcrumb__inner { display: flex; align-items: center; height: 48px; }
.dkm-universe-breadcrumb__lien {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: var(--type-small); font-weight: 700; color: rgba(255,255,255,0.6);
  transition: color 160ms ease;
}
.dkm-universe-breadcrumb__lien:hover { color: #fff; }
.dkm-universe-breadcrumb__lien--sombre { color: var(--ink-3); }
.dkm-universe-breadcrumb__lien--sombre:hover { color: var(--ink); }

/* ---------- Mise en page générale ---------- */

.dkm-fiche { padding-block: var(--space-6); }
@media (min-width: 768px) { .dkm-fiche { padding-block: var(--space-7); } }

.dkm-fiche__grille { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 768px) { .dkm-fiche__grille { grid-template-columns: repeat(2, 1fr); gap: var(--space-7); } }

.dkm-fiche__contenu { display: flex; flex-direction: column; gap: var(--space-5); }

.dkm-fiche__badges { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: var(--space-3); }

.dkm-fiche__section { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--rule); }
.dkm-fiche__description { margin-top: var(--space-3); max-width: 42rem; color: var(--ink-2); line-height: var(--leading-relaxed); }
.dkm-fiche__description p:last-child { margin-bottom: 0; }

.dkm-fiche__associes-grille { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 600px) { .dkm-fiche__associes-grille { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Galerie — fidèle à ImageGallery.tsx ---------- */

.dkm-galerie { display: flex; flex-direction: column; gap: var(--space-2); }

.dkm-galerie__cadre { position: relative; }
.dkm-galerie__piste {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  border-radius: var(--r-lg); background: var(--surface-sunken);
  scrollbar-width: none;
}
.dkm-galerie__piste::-webkit-scrollbar { display: none; }
.dkm-galerie__diapo { flex: 0 0 100%; scroll-snap-align: center; }
.dkm-galerie--paysage .dkm-galerie__diapo { aspect-ratio: 4 / 3; }
.dkm-galerie--carre .dkm-galerie__diapo { aspect-ratio: 1 / 1; }
.dkm-galerie__diapo img { width: 100%; height: 100%; object-fit: cover; }

.dkm-galerie__compteur {
  position: absolute; right: var(--space-2); bottom: var(--space-2);
  background: rgba(255,255,255,0.92);
}

.dkm-galerie__vignettes { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.dkm-galerie__vignettes::-webkit-scrollbar { display: none; }
.dkm-galerie__vignette {
  flex: 0 0 auto; width: 80px; height: 56px; overflow-hidden; border-radius: var(--r-sm);
  box-shadow: 0 0 0 1px var(--rule-strong); opacity: 0.7; transition: opacity 160ms ease, box-shadow 160ms ease;
  padding: 0; border: 0; cursor: pointer;
}
.dkm-galerie__vignette:hover { opacity: 1; }
.dkm-galerie__vignette.est-actif { opacity: 1; box-shadow: 0 0 0 2px var(--red); }
.dkm-galerie__vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Encart tarif (véhicules) ---------- */

.dkm-tarif-box { border-radius: var(--r-lg); background: var(--dark); color: #fff; padding: var(--space-5); }
.dkm-tarif-box__eyebrow { display: flex; align-items: center; gap: var(--space-2); color: var(--blue-light); }
.dkm-tarif-box__actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); }

.dkm-fiche__disponibilite { display: flex; align-items: flex-start; gap: 0.625rem; font-size: var(--type-small); }
.dkm-fiche__disponibilite-icone { flex-shrink: 0; margin-top: 1px; }

.dkm-fiche__puces { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Tableau caractéristiques ---------- */

.dkm-tableau-caracteristiques { overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--rule); }
.dkm-tableau-caracteristiques table { width: 100%; border-collapse: collapse; }
.dkm-tableau-caracteristiques tr.est-impaire { background: var(--surface-sunken); }
.dkm-tableau-caracteristiques tr:not(.est-impaire) { background: var(--surface-raised); }
.dkm-tableau-caracteristiques th {
  width: 50%; padding: var(--space-3) var(--space-4); text-align: left;
  font-size: var(--type-small); font-weight: 500; color: var(--ink-3);
}
.dkm-tableau-caracteristiques td { padding: var(--space-3) var(--space-4); font-size: var(--type-small); font-weight: 700; }

/* ---------- Fiche accessoire ---------- */

.dkm-fiche__stock { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-small); }

.dkm-fiche__ajout { display: flex; flex-direction: column; gap: var(--space-3); }
.dkm-fiche__quantite { display: flex; align-items: center; gap: var(--space-4); }

.dkm-stepper { display: inline-flex; align-items: center; border: 1px solid var(--rule-strong); border-radius: var(--r-md); background: var(--surface-raised); }
.dkm-stepper__bouton {
  display: grid; place-items: center; width: 44px; height: 44px;
  background: none; border: 0; color: var(--ink); cursor: pointer;
}
.dkm-stepper__bouton:disabled { color: var(--ink-4); cursor: not-allowed; }
.dkm-stepper__champ {
  width: 2.5rem; height: 44px; border: 0; text-align: center; font-weight: 700; background: none;
  -moz-appearance: textfield;
}
.dkm-stepper__champ::-webkit-inner-spin-button,
.dkm-stepper__champ::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Variante compacte — steppers générés en JS pour habiller input.qty du
   panier WooCommerce (assets/js/main.js, initPanierWC). */
[data-dkm-stepper-wc] .dkm-stepper__bouton { width: 36px; height: 36px; font-size: 1.1rem; line-height: 1; font-weight: 700; }
[data-dkm-stepper-wc] .dkm-stepper__champ { height: 36px; width: 2.25rem; }

.dkm-fiche__deja-panier { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }

.dkm-fiche__reassurance { display: flex; flex-direction: column; gap: var(--space-2); margin-top: 0; padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.dkm-fiche__reassurance li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-small); color: var(--ink-2); }
.dkm-fiche__reassurance-icone-red { color: var(--red); }

/* ============================================================
   WOOCOMMERCE — PANIER / PAIEMENT / MON COMPTE
   Habille le balisage réel de WooCommerce (classes par défaut) avec
   le design system du prototype, plutôt que de reconstruire ces
   gabarits : coupons, expédition (livraison par quartier du plugin
   dkmotos-core) et passerelles de paiement restent pleinement
   fonctionnels. Fidèle à Panier.tsx / Tunnel.tsx dans l'esprit —
   même palette, mêmes boutons/panels — pas un clone pixel du tunnel
   en 3 écrans du prototype (compte/codes promo/zones fictifs).
   ============================================================ */

.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	list-style: none;
	margin: 0 0 var(--space-5);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--r-md);
	font-size: var(--type-small);
	line-height: var(--leading-normal);
	border-left: 3px solid;
	background: var(--blue-soft);
	border-color: var(--blue);
	color: var(--ink-2);
}
.woocommerce-message { background: var(--ok-soft); border-color: var(--ok); }
.woocommerce-error { background: var(--danger-soft); border-color: var(--danger); }
.woocommerce-message a.button,
.woocommerce-error a.button { margin-left: auto; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

/* Boutons WooCommerce génériques (coupon, update cart, place order...) :
   repris de .btn sans dépendre de la classe elle-même. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order,
.woocommerce-page a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--tap);
	padding: 0 var(--space-4);
	border: none;
	border-radius: var(--r-md);
	background: var(--red);
	color: var(--red-on);
	font-size: var(--type-small);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 160ms ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover { background: var(--red-hover); color: var(--red-on); }
.woocommerce a.button.wc-backward,
.woocommerce #coupon_code + button.button {
	background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rule-strong);
}
.woocommerce a.button.wc-backward:hover { background: var(--surface-sunken); color: var(--ink); }

/* ---------- Panier ---------- */

.woocommerce-cart .dkm-article__titre,
.woocommerce-checkout .dkm-article__titre,
.woocommerce-account .dkm-article__titre { margin-bottom: var(--space-5); }

.woocommerce-cart-form table.shop_table,
table.cart { width: 100%; border-collapse: collapse; }
.woocommerce-cart-form table.shop_table thead { display: none; }
.woocommerce-cart-form table.shop_table tr,
table.cart tr {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	grid-template-areas: "vignette nom prix" "vignette quantite quantite" "vignette retirer retirer";
	gap: 0.375rem var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	margin-bottom: var(--space-3);
	background: var(--surface-raised);
}
@media (min-width: 640px) {
	.woocommerce-cart-form table.shop_table tr,
	table.cart tr { grid-template-columns: 80px 1fr auto auto; grid-template-areas: "vignette nom quantite prix" "vignette nom retirer retirer"; align-items: center; }
}
.woocommerce-cart-form table.shop_table td,
table.cart td { border: 0; padding: 0; }

td.product-remove { grid-area: retirer; justify-self: end; }
td.product-thumbnail { grid-area: vignette; }
td.product-thumbnail img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-sunken); }
td.product-name { grid-area: nom; font-size: var(--type-small); font-weight: 700; color: var(--ink); min-width: 0; }
td.product-name a { color: var(--ink); }
td.product-name .variation { margin-top: 0.25rem; font-size: var(--type-micro); color: var(--ink-3); }
td.product-price { grid-area: prix; font-family: var(--font-display); font-weight: 700; color: var(--red-ink); justify-self: end; }
td.product-subtotal { display: none; } /* le prix unitaire (product-price) suffit, fidèle à la carte du prototype */
td.product-quantity { grid-area: quantite; }

.remove {
	display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md);
	color: var(--ink-3) !important; text-decoration: none !important; font-size: 0;
	transition: background-color 160ms ease, color 160ms ease;
}
.dkm-confirmation__echec { text-align: center; }

/* ---------------------------------------------------------------------
   COMMANDE — choix retrait / livraison

   Deux cartes à bordure épaisse, d'après l'étape 2 de Tunnel.tsx. La
   bordure passe en rouge sur l'option retenue : c'est le seul indice
   visuel, il doit donc être franc.

   Le bouton radio natif est masqué mais reste focusable — c'est lui qui
   porte l'état pour le clavier et les lecteurs d'écran. On dessine le
   focus sur la carte via :focus-within, sinon la navigation au clavier
   se fait à l'aveugle.
   ------------------------------------------------------------------ */
.dkm-remise__titre { display: block; margin-bottom: var(--space-3); }

.dkm-remise__choix {
  display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none;
}
@media (min-width: 640px) {
  .dkm-remise__choix { grid-template-columns: 1fr 1fr; }
}

.dkm-remise__option label {
  display: flex; gap: var(--space-3); align-items: flex-start;
  height: 100%; padding: var(--space-4);
  border: 2px solid var(--rule); border-radius: var(--r-md);
  background: var(--surface-raised);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.dkm-remise__option label:hover { border-color: var(--rule-strong, var(--ink-3)); }

.dkm-remise__option.est-actif label {
  border-color: var(--red);
  background: var(--red-soft);
}

.dkm-remise__option:focus-within label {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Masqué à l'œil, pas à l'assistance technique : ni display:none ni
   visibility:hidden, qui retireraient le champ de l'ordre de tabulation. */
.dkm-remise__radio {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.dkm-remise__icone { flex-shrink: 0; margin-top: 2px; color: var(--ink-3); line-height: 0; }
.dkm-remise__option.est-actif .dkm-remise__icone { color: var(--red-ink); }

.dkm-remise__corps { display: block; }
.dkm-remise__entete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.dkm-remise__note { display: block; margin-top: 4px; }

.dkm-remise__conditions {
  margin-top: var(--space-4); padding: var(--space-4);
  background: var(--surface-sunken); border-radius: var(--r-md);
}
.dkm-remise__conditions p { margin: 0 0 var(--space-2); }
.dkm-remise__conditions ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 6px; }
.dkm-remise__conditions li { color: var(--ink-2); }

.dkm-remise__vide { color: var(--ink-3); margin: 0; }

/* La cellule du tableau des totaux : on lui rend une largeur pleine, le
   choix de remise n'est pas une ligne de prix. */
tr.dkm-remise > th { display: block; width: 100%; padding-block: var(--space-4); font-weight: 400; }
.remove:hover { background: var(--danger-soft); color: var(--danger) !important; }
.remove .dkm-icone { display: block; }

.quantity { display: inline-flex; }
.quantity .qty {
	width: 3.5rem; min-height: 40px; text-align: center; border: 1px solid var(--rule-strong);
	border-radius: var(--r-md); font-weight: 700; background: var(--surface-raised); color: var(--ink);
}

.actions {
	display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
	margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--rule);
}
.actions .coupon { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.actions .coupon label { display: none; }
.actions #coupon_code {
	min-height: var(--tap); padding: 0 var(--space-3); border: 1.5px solid var(--rule-strong);
	border-radius: var(--r-md); font-size: var(--type-body); background: var(--surface-raised); color: var(--ink);
}
.actions #coupon_code:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.actions > button[name="update_cart"] { background: var(--dark); }
.actions > button[name="update_cart"]:hover { background: var(--dark-2); }

.cart-collaterals { margin-top: var(--space-6); }
.cart-collaterals .cart_totals { max-width: 100%; padding: var(--space-4); border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface-raised); }
.cart_totals h2 { margin-bottom: var(--space-2); }
.cart_totals table { width: 100%; border-collapse: collapse; }
.cart_totals table th,
.cart_totals table td { padding: var(--space-2) 0; border-top: 1px solid var(--rule); font-size: var(--type-small); text-align: left; }
.cart_totals table tr:first-child th,
.cart_totals table tr:first-child td { border-top: 0; }
.cart_totals table th { font-weight: 400; color: var(--ink-3); }
.cart_totals table td { text-align: right; font-variant-numeric: tabular-nums; }
.cart_totals .order-total th,
.cart_totals .order-total td { padding-top: var(--space-3); font-weight: 700; font-size: var(--type-body); }
.cart_totals .order-total .amount { font-family: var(--font-display); font-size: 1.25rem; }
.cart_totals .woocommerce-shipping-totals select { margin-top: var(--space-2); }

.wc-proceed-to-checkout { margin-top: var(--space-4); }
.wc-proceed-to-checkout a.checkout-button {
	display: flex; width: 100%; min-height: var(--tap-lg); font-size: var(--type-body);
}

.dkm-etat-vide-panier { padding-block: var(--space-6); }

/* ---------- Paiement (checkout) ---------- */

.woocommerce-checkout #customer_details { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 900px) { .woocommerce-checkout #customer_details { grid-template-columns: 1fr 1fr; gap: var(--space-7); } }

.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading,
#ship-to-different-address { font-family: var(--font-display); font-size: var(--type-heading-mobile); font-weight: 700; text-transform: uppercase; margin-bottom: var(--space-4); }

.form-row { margin-bottom: var(--space-4); }
.form-row label {
	display: block; margin-bottom: var(--space-2); font-size: var(--type-small); font-weight: 700; color: var(--ink);
}
.form-row .required { color: var(--red-ink); text-decoration: none; }
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="password"],
.form-row select,
.form-row textarea {
	width: 100%; min-height: var(--tap); padding: var(--space-3); background: var(--surface-raised);
	border: 1.5px solid var(--rule-strong); border-radius: var(--r-md); font-size: var(--type-body); color: var(--ink);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.form-row .select2-container { width: 100% !important; }
.form-row.woocommerce-invalid input,
.form-row.woocommerce-invalid select { border-color: var(--danger); }
.form-row .woocommerce-input-wrapper .description { margin-top: var(--space-1); font-size: var(--type-micro); color: var(--ink-3); }

#ship-to-different-address { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
#ship-to-different-address label { margin: 0; }

.woocommerce-additional-fields { margin-top: var(--space-6); }

/* Récapitulatif de commande — imite le panel dépliable du prototype */
#order_review { margin-top: var(--space-7); }
@media (min-width: 900px) { #order_review { position: sticky; top: calc(var(--topbar-h) + var(--space-4)); } }
#order_review_heading { margin-top: 0; }
table.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; padding: var(--space-4); border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface-raised); }
table.woocommerce-checkout-review-order-table thead { display: none; }
table.woocommerce-checkout-review-order-table th,
table.woocommerce-checkout-review-order-table td { padding: var(--space-2) var(--space-4); border-top: 1px solid var(--rule); font-size: var(--type-small); text-align: left; }
table.woocommerce-checkout-review-order-table tbody tr:first-child th,
table.woocommerce-checkout-review-order-table tbody tr:first-child td { border-top: 0; }
table.woocommerce-checkout-review-order-table td { text-align: right; }
table.woocommerce-checkout-review-order-table tfoot th { font-weight: 400; color: var(--ink-3); }
table.woocommerce-checkout-review-order-table tfoot td { text-align: right; font-variant-numeric: tabular-nums; }
table.woocommerce-checkout-review-order-table .order-total th,
table.woocommerce-checkout-review-order-table .order-total td { font-weight: 700; font-size: var(--type-body); padding-top: var(--space-3); }

/* Moyens de paiement — imite les cartes radio du prototype */
#payment { margin-top: var(--space-5); border-radius: var(--r-lg); background: var(--surface-sunken); }
ul.wc_payment_methods { list-style: none; margin: 0; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
li.wc_payment_method {
	border: 2px solid var(--rule); border-radius: var(--r-md); background: var(--surface-raised);
	padding: var(--space-3); transition: border-color 160ms ease, background-color 160ms ease;
}
li.wc_payment_method:has(input:checked) { border-color: var(--red); background: var(--red-soft); }
li.wc_payment_method input.input-radio { margin-right: var(--space-2); accent-color: var(--red); }
li.wc_payment_method label { font-weight: 700; font-size: var(--type-small); }
.payment_box {
	margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--r-sm);
	background: var(--surface-sunken); font-size: var(--type-small); color: var(--ink-2);
}
.payment_box::before { display: none; }

/* Méthode de retrait/livraison — même traitement « carte » que les
   moyens de paiement juste au-dessus, pour rester cohérent : c'est le
   même type de choix (radio unique) au même endroit de l'écran. */
.woocommerce-shipping-totals ul#shipping_method {
	list-style: none; margin: var(--space-2) 0 0; padding: 0;
	display: flex; flex-direction: column; gap: var(--space-2);
}
.woocommerce-shipping-totals ul#shipping_method li {
	border: 2px solid var(--rule); border-radius: var(--r-md); background: var(--surface-raised);
	padding: var(--space-3); transition: border-color 160ms ease, background-color 160ms ease;
}
.woocommerce-shipping-totals ul#shipping_method li:has(input:checked) { border-color: var(--red); background: var(--red-soft); }
.woocommerce-shipping-totals ul#shipping_method input[type="radio"] { margin-right: var(--space-2); accent-color: var(--red); }
.woocommerce-shipping-totals ul#shipping_method label { font-weight: 700; font-size: var(--type-small); }

.woocommerce-terms-and-conditions-wrapper { margin-top: var(--space-4); font-size: var(--type-small); }

#place_order { width: 100%; min-height: var(--tap-lg); font-size: var(--type-body); margin-top: var(--space-4); }

/* ---------- Mon compte ---------- */

.woocommerce-account .woocommerce {
	display: flex; flex-direction: column; gap: var(--space-6);
}
@media (min-width: 768px) { .woocommerce-account .woocommerce { flex-direction: row; align-items: flex-start; } }

nav.woocommerce-MyAccount-navigation { flex-shrink: 0; width: 100%; }
@media (min-width: 768px) { nav.woocommerce-MyAccount-navigation { width: 220px; } }
nav.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; overflow-x: auto; border-bottom: 1px solid var(--rule); }
@media (min-width: 768px) { nav.woocommerce-MyAccount-navigation ul { flex-direction: column; border-bottom: 0; gap: 0; } }
nav.woocommerce-MyAccount-navigation li { flex-shrink: 0; }
nav.woocommerce-MyAccount-navigation a {
	display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-3);
	font-size: var(--type-small); font-weight: 700; color: var(--ink-3); white-space: nowrap;
	border-bottom: 3px solid transparent;
}
@media (min-width: 768px) { nav.woocommerce-MyAccount-navigation a { border-bottom: 0; border-radius: var(--r-md); } }
nav.woocommerce-MyAccount-navigation li.is-active a { color: var(--red-ink); border-bottom-color: var(--red); }
@media (min-width: 768px) { nav.woocommerce-MyAccount-navigation li.is-active a { background: var(--red-soft); } }
nav.woocommerce-MyAccount-navigation a:hover { color: var(--red-ink); }

.woocommerce-MyAccount-content { flex: 1; min-width: 0; }
.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }

table.woocommerce-orders-table,
table.shop_table_responsive { width: 100%; border-collapse: collapse; }
table.woocommerce-orders-table thead { display: none; }
table.woocommerce-orders-table tr {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2);
	padding: var(--space-4); border: 1px solid var(--rule); border-radius: var(--r-lg); margin-bottom: var(--space-3);
}
table.woocommerce-orders-table td { border: 0; padding: 0; font-size: var(--type-small); }
table.woocommerce-orders-table td::before { display: none; }
mark.order-status {
	display: inline-flex; align-items: center; padding: 4px var(--space-2); border-radius: var(--r-sm);
	font-size: var(--type-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: none;
}
mark.order-status > span { background: var(--surface-sunken); color: var(--ink-3); padding: 4px var(--space-2); border-radius: var(--r-sm); }
.status-completed mark.order-status > span { background: var(--ok-soft); color: var(--ok); }
.status-processing mark.order-status > span { background: var(--red-soft); color: var(--red-ink); }
table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button { min-height: 36px; padding: 0 var(--space-3); font-size: var(--type-micro); }

.woocommerce-order-details,
.woocommerce-customer-details,
.woocommerce-address-fields,
.woocommerce-EditAccountForm { margin-top: var(--space-5); }
.woocommerce-order-details table.shop_table,
.woocommerce-table--order-details { width: 100%; border-collapse: collapse; border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.woocommerce-order-details table.shop_table th,
.woocommerce-order-details table.shop_table td,
.woocommerce-table--order-details th,
.woocommerce-table--order-details td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--rule); font-size: var(--type-small); text-align: left; }

.woocommerce-address-fields__field-wrapper { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }

.woocommerce-Addresses { display: grid; gap: var(--space-5); grid-template-columns: 1fr; margin-top: var(--space-5); }
@media (min-width: 640px) { .woocommerce-Addresses { grid-template-columns: repeat(2, 1fr); } }
.woocommerce-Address { padding: var(--space-4); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.woocommerce-Address-title h3 { margin: 0; }
address { font-style: normal; font-size: var(--type-small); color: var(--ink-2); line-height: var(--leading-relaxed); }

/* Connexion / inscription — deux colonnes fidèles au prototype */
.woocommerce-account .u-columns { display: grid; gap: var(--space-7); grid-template-columns: 1fr; }
@media (min-width: 768px) { .woocommerce-account .u-columns { grid-template-columns: 1fr 1fr; } }
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 { min-width: 0; }
.woocommerce-form-login h2,
.woocommerce-form-register h2 { font-family: var(--font-display); font-size: var(--type-heading-mobile); font-weight: 700; text-transform: uppercase; margin-bottom: var(--space-4); }
.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row { margin-bottom: var(--space-4); }
.woocommerce-form-login .button,
.woocommerce-form-register .button { width: 100%; min-height: var(--tap-lg); font-size: var(--type-body); }
.woocommerce-form-login__rememberme { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-small); margin: 0; }
.woocommerce-LostPassword { margin-top: var(--space-3); font-size: var(--type-small); }

/* ---------- Confirmation de commande (woocommerce/checkout/thankyou.php) ---------- */

.dkm-confirmation { padding-block: var(--space-8); }
.dkm-confirmation__corps { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; }
.dkm-confirmation__icone {
	display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-pill);
	background: var(--ok-soft); color: var(--ok);
}
.dkm-confirmation__message { margin-top: var(--space-2); color: var(--ink-2); }
.dkm-confirmation__numero {
	width: 100%; border-radius: var(--r-lg); background: var(--dark); padding: var(--space-5) var(--space-4);
	text-align: center; margin: 0;
}
.dkm-confirmation__numero-valeur { display: block; margin-top: 0.375rem; font-size: 1.75rem; letter-spacing: 0.08em; color: #fff; }
.dkm-confirmation__actions { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }

/* ---------- En-tête "Mon espace" (woocommerce/myaccount/my-account.php) ---------- */

.dkm-compte-entete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-2); }
.dkm-compte-entete__identite { display: flex; align-items: center; gap: var(--space-3); }
.dkm-compte-entete__avatar {
	display: grid; place-items: center; width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--r-pill);
	background: var(--dark); color: #fff; font-size: 1.125rem; font-weight: 700;
}
.dkm-compte-entete__telephone { margin-top: 2px; color: var(--ink-3); }

/* ============================================================
   PANIER & TUNNEL — reproduction fidèle de Panier.tsx / Tunnel.tsx
   (assets/js/dkm-store.js + dkm-panier.js + dkm-tunnel.js).
   Panier et commande gérés en JS/localStorage, indépendants du panier
   WooCommerce natif — voir la note en tête de ces fichiers JS.
   ============================================================ */

.dkm-panier__titre-compte { font-weight: 400; color: var(--ink-3); }

.dkm-panier__grille { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
@media (min-width: 1024px) { .dkm-panier__grille { grid-template-columns: 1fr 23rem; gap: var(--space-8); align-items: start; } }

.dkm-panier__lignes { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }

.dkm-ligne-panier { display: flex; gap: var(--space-3); padding: var(--space-3); }
.dkm-ligne-panier__image { width: 80px; height: 80px; flex-shrink: 0; border-radius: var(--r-sm); background: var(--surface-sunken); object-fit: cover; }
.dkm-ligne-panier__corps { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.dkm-ligne-panier__nom { text-align: left; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.dkm-ligne-panier__nom:hover { text-decoration: underline; }
.dkm-ligne-panier__prix { color: var(--red-ink); font-size: 1.0625rem; }
.dkm-ligne-panier__pied { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-1); }
.dkm-ligne-panier__stock-max { font-size: var(--type-micro); color: var(--warn); margin: 2px 0 0; }
.dkm-ligne-panier__retirer {
	display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; align-self: flex-start;
	border-radius: var(--r-md); color: var(--ink-3); background: none; border: 0; cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}
.dkm-ligne-panier__retirer:hover { background: var(--danger-soft); color: var(--danger); }

.dkm-qte { display: inline-flex; align-items: center; border: 1px solid var(--rule-strong); border-radius: var(--r-md); }
.dkm-qte__bouton { display: grid; place-items: center; width: 40px; height: 40px; background: none; border: 0; color: var(--ink); cursor: pointer; }
.dkm-qte__bouton:disabled { color: var(--ink-4); cursor: not-allowed; }
.dkm-qte__valeur { width: 2rem; text-align: center; font-weight: 700; }

/* Quantité qui vient de changer (mise à jour optimiste déjà affichée) —
   une seule pulsation, pas de boucle : elle marque l'instant du
   changement, elle ne doit pas laisser croire que le chiffre continue
   de bouger. */
.dkm-qte__valeur--anime { animation: dkm-qte-pulse 420ms ease-out; }
@keyframes dkm-qte-pulse {
	0%   { transform: scale(1.35); color: var(--red-ink); }
	100% { transform: scale(1); color: inherit; }
}

/* ------------------------------------------------------------------
   États de chargement — squelettes et spinner, partagés Panier/Tunnel.

   📌 Volontairement PAS de voile général (opacity + pointer-events sur
   tout le conteneur) : les mises à jour du panier sont optimistes,
   l'écran doit rester lisible et manipulable pendant l'envoi. Seuls les
   boutons concernés se désactivent (voir dkm-panier.js / dkm-tunnel.js),
   et un petit spinner signale que quelque chose est en vol.
   ------------------------------------------------------------------ */

.dkm-squelette {
	display: block; border-radius: var(--r-sm); background: var(--surface-sunken);
	background-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
	background-size: 200% 100%; animation: dkm-scintillement 1.4s ease-in-out infinite;
	height: 0.875rem;
}
@keyframes dkm-scintillement {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.dkm-squelette-ligne { display: flex; gap: var(--space-3); padding: var(--space-3); }
.dkm-squelette-ligne__image { width: 80px; height: 80px; flex-shrink: 0; border-radius: var(--r-sm); }
.dkm-squelette-ligne__texte { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); justify-content: center; }
.dkm-squelette-ligne__texte span:nth-child(1) { width: 40%; }
.dkm-squelette-ligne__texte span:nth-child(2) { width: 65%; }
.dkm-squelette-ligne__texte span:nth-child(3) { width: 30%; }
.dkm-squelette-panel { height: 16rem; border-radius: var(--r-md); }

.dkm-spinner {
	display: inline-block; width: 1rem; height: 1rem; vertical-align: -0.15em;
	border: 2px solid var(--rule-strong); border-top-color: var(--red); border-radius: 50%;
	animation: dkm-rotation 700ms linear infinite;
}
@keyframes dkm-rotation { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.dkm-squelette, .dkm-spinner, .dkm-qte__valeur--anime { animation: none; }
}

.dkm-mode-remise { margin-top: var(--space-4); }
.dkm-mode-remise__grille { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .dkm-mode-remise__grille { grid-template-columns: 1fr 1fr; } }
.dkm-mode-remise__option {
	display: flex; gap: var(--space-3); padding: var(--space-4); border: 2px solid var(--rule); border-radius: var(--r-md);
	background: var(--surface-raised); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease;
}
.dkm-mode-remise__option:hover { border-color: var(--rule-strong); }
.dkm-mode-remise__option.est-actif { border-color: var(--red); background: var(--red-soft); }
.dkm-mode-remise__option input { position: absolute; opacity: 0; pointer-events: none; }
.dkm-mode-remise__icone { flex-shrink: 0; margin-top: 2px; color: var(--ink-3); }
.dkm-mode-remise__option.est-actif .dkm-mode-remise__icone { color: var(--red-ink); }
.dkm-mode-remise__titre-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.dkm-mode-remise__detail { display: block; margin-top: 4px; font-size: var(--type-micro); color: var(--ink-3); }

.dkm-promo__ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--r-md); background: var(--ok-soft); }
.dkm-promo__retirer { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); background: none; border: 0; color: var(--ink-3); cursor: pointer; }
.dkm-promo__retirer:hover { color: var(--danger); }
.dkm-promo__form { display: flex; gap: var(--space-2); }
.dkm-promo__form .field { text-transform: uppercase; }

.dkm-recap dl { margin: 0; }
.dkm-recap__ligne { display: flex; justify-content: space-between; gap: var(--space-3); }
.dkm-recap__ligne + .dkm-recap__ligne { margin-top: var(--space-2); }
.dkm-recap__total { display: flex; align-items: baseline; justify-content: space-between; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--rule); }

.dkm-barre-mobile-panier {
	/* --bottombar-offset réserve exactement la hauteur de .dkm-nav-bas
	   (barre d'onglets fixe du bas) : sans elle, cette barre se
	   superposait à .dkm-nav-bas (bottom:0 les deux) et son bouton
	   "Commander" se retrouvait invisible, caché dessous. */
	position: fixed; inset-inline: 0; bottom: var(--bottombar-offset); z-index: 55;
	border-top: 1px solid var(--rule); background: var(--surface-raised); padding: var(--space-3);
	padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1024px) { .dkm-barre-mobile-panier { display: none; } }
.dkm-barre-mobile-panier__ligne { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-2); }
.dkm-panier__action-desktop { display: none; }
@media (min-width: 1024px) { .dkm-panier__action-desktop { display: block; } }
.dkm-panier__reserve-mobile { height: 8rem; }
@media (min-width: 1024px) { .dkm-panier__reserve-mobile { display: none; } }

/* ---------- Tunnel ---------- */

.dkm-tunnel__retour {
	display: inline-flex; align-items: center; gap: 0.375rem; margin-bottom: var(--space-5);
	background: none; border: 0; padding: 0; font-size: var(--type-small); font-weight: 700; color: var(--ink-3); cursor: pointer;
}
.dkm-tunnel__retour:hover { color: var(--ink); }

.dkm-tunnel__etapes { display: flex; align-items: flex-start; list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.dkm-tunnel__etape { display: flex; align-items: flex-start; }
.dkm-tunnel__etape--extensible { flex: 1; }
.dkm-tunnel__etape-colonne { display: flex; width: 5rem; flex-shrink: 0; flex-direction: column; align-items: center; gap: 0.375rem; }
.dkm-tunnel__etape-cercle {
	display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-pill);
	font-size: 13px; font-weight: 700; background: var(--surface-sunken); color: var(--ink-4);
}
.dkm-tunnel__etape-cercle.est-faite { background: var(--ok); color: #fff; }
.dkm-tunnel__etape-cercle.est-active { background: var(--red); color: var(--red-on); }
.dkm-tunnel__etape-libelle { text-align: center; font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--ink-3); }
.dkm-tunnel__etape-libelle.est-active { color: var(--ink); }
.dkm-tunnel__etape-trait { margin-top: 1rem; height: 2px; flex: 1; background: var(--rule); }
.dkm-tunnel__etape-trait.est-faite { background: var(--ok); }

.dkm-tunnel__resume { margin-bottom: var(--space-6); overflow: hidden; }
.dkm-tunnel__resume-bouton {
	display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-3);
	padding: var(--space-3); background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.dkm-tunnel__resume-total { display: flex; align-items: center; gap: var(--space-2); }
.dkm-tunnel__resume-chevron { color: var(--ink-3); transition: transform 160ms ease; }
.dkm-tunnel__resume-chevron.est-ouvert { transform: rotate(180deg); }
.dkm-tunnel__resume-corps { border-top: 1px solid var(--rule); padding: var(--space-3); }
.dkm-tunnel__resume-ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--type-small); }
.dkm-tunnel__resume-ligne + .dkm-tunnel__resume-ligne { margin-top: var(--space-2); }

.dkm-bascule { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.dkm-bascule__onglet {
	display: flex; min-height: var(--tap); align-items: center; justify-content: center; gap: var(--space-2);
	border: 2px solid var(--rule); border-radius: var(--r-md); background: var(--surface-raised);
	font-size: var(--type-small); font-weight: 700; color: var(--ink-3); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.dkm-bascule__onglet:hover { border-color: var(--rule-strong); }
.dkm-bascule__onglet.est-actif { border-color: var(--red); background: var(--red-soft); color: var(--red-ink); }

.dkm-tel-champ { display: flex; gap: var(--space-2); }
.dkm-tel-indicatif { display: grid; flex-shrink: 0; place-items: center; padding-inline: var(--space-3); border-radius: var(--r-md); background: var(--surface-sunken); color: var(--ink-3); font-weight: 700; }

.dkm-adresses-enregistrees { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.dkm-paiement__liste { display: flex; flex-direction: column; gap: var(--space-2); }
.dkm-paiement__option {
	display: flex; min-height: 64px; align-items: center; gap: var(--space-3); padding: var(--space-3);
	border: 2px solid var(--rule); border-radius: var(--r-md); background: var(--surface-raised); cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease;
}
.dkm-paiement__option:hover { border-color: var(--rule-strong); }
.dkm-paiement__option.est-choisi { border-color: var(--red); background: var(--red-soft); }
.dkm-paiement__option.est-indisponible { cursor: not-allowed; border-color: var(--rule); background: var(--surface-sunken); }
.dkm-paiement__option input { position: absolute; opacity: 0; pointer-events: none; }
.dkm-paiement__puce { display: grid; flex-shrink: 0; place-items: center; width: 20px; height: 20px; border-radius: var(--r-pill); border: 2px solid var(--rule-strong); }
.dkm-paiement__option.est-choisi .dkm-paiement__puce { border-color: var(--red); }
.dkm-paiement__puce-point { width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--red); }
.dkm-paiement__icone { flex-shrink: 0; color: var(--ink-2); }
.dkm-paiement__option.est-indisponible .dkm-paiement__icone { color: var(--ink-4); }
.dkm-paiement__corps { min-width: 0; flex: 1; }
.dkm-paiement__label { display: block; }
.dkm-paiement__option.est-indisponible .dkm-paiement__label { color: var(--ink-4); }
.dkm-paiement__detail { display: block; margin-top: 2px; font-size: var(--type-micro); color: var(--ink-3); }
.dkm-paiement__option.est-choisi .dkm-paiement__detail { color: var(--red-ink); }
.dkm-paiement__option.est-indisponible .dkm-paiement__detail { color: var(--warn); }

/* Confirmation brève au clic sur un bouton "Ajouter au panier" fictif
   (data-dkm-ajouter-panier, voir main.js). */
[data-dkm-ajouter-panier].est-ajoute { background: var(--ok); color: #fff; }

/* ============================================================
   MON COMPTE — reproduction fidèle de MonCompte.tsx / SuiviCommande.tsx
   (assets/js/dkm-mon-compte.js). Branché sur le même compte/commandes
   fictifs que Panier/Tunnel (dkm-store.js), pas WooCommerce.
   ============================================================ */

.dkm-compte-onglets {
	display: flex; overflow-x: auto; margin-top: var(--space-6); border-bottom: 1px solid var(--rule);
	scrollbar-width: none;
}
.dkm-compte-onglets::-webkit-scrollbar { display: none; }
.dkm-compte-onglets__item {
	position: relative; display: flex; flex-shrink: 0; align-items: center; gap: var(--space-2);
	min-height: var(--tap); padding-inline: var(--space-4); font-size: var(--type-small); font-weight: 700;
	color: var(--ink-3); background: none; border: 0; cursor: pointer; transition: color 160ms ease;
}
.dkm-compte-onglets__item:hover { color: var(--ink); }
.dkm-compte-onglets__item.est-actif { color: var(--ink); }
.dkm-compte-onglets__item.est-actif::after { content: ''; position: absolute; inset-inline: var(--space-2); bottom: 0; height: 3px; background: var(--red); }
.dkm-compte-onglets__badge {
	display: grid; place-items: center; min-width: 20px; height: 20px; padding-inline: 4px; border-radius: var(--r-pill);
	background: var(--red); color: var(--red-on); font-size: 11px;
}

.dkm-etat-vide--compact { padding-block: var(--space-6); }

/* ---------- Suivi de commande (frise) ---------- */

.dkm-suivi { overflow: hidden; }
.dkm-suivi__entete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--rule); }
.dkm-suivi__numero { margin-top: 2px; font-size: 1.25rem; letter-spacing: 0.06em; }
.dkm-suivi__total { margin-top: var(--space-2); font-size: 1.125rem; }

.dkm-suivi__frise { list-style: none; margin: 0; padding: var(--space-4); }
.dkm-suivi__etape { display: flex; gap: var(--space-3); }
.dkm-suivi__etape-colonne { display: flex; flex-direction: column; align-items: center; }
.dkm-suivi__etape-cercle {
	display: grid; flex-shrink: 0; place-items: center; width: 36px; height: 36px; border-radius: var(--r-pill);
	background: var(--surface-sunken); color: var(--ink-4);
}
.dkm-suivi__etape-cercle.est-faite { background: var(--ok); color: #fff; }
.dkm-suivi__etape-cercle.est-actuelle { background: var(--red); color: var(--red-on); }
.dkm-suivi__etape-trait { width: 2px; flex: 1; background: var(--rule); margin-top: 2px; }
.dkm-suivi__etape-trait.est-faite { background: var(--ok); }
.dkm-suivi__etape-corps { padding-top: 6px; padding-bottom: var(--space-6); }
.dkm-suivi__etape:last-child .dkm-suivi__etape-corps { padding-bottom: 0; }
.dkm-suivi__etape-libelle.est-a-venir { color: var(--ink-4); }

.dkm-suivi__pied { border-top: 1px solid var(--rule); background: var(--surface-sunken); padding: var(--space-4); }
.dkm-suivi__livreur { margin-top: var(--space-3); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); border-radius: var(--r-md); background: var(--surface-raised); padding: var(--space-3); }
.dkm-suivi__lignes { list-style: none; margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 0.375rem; }
.dkm-suivi__ligne { display: flex; justify-content: space-between; gap: var(--space-3); }

/* ---------- Historique ---------- */

.dkm-historique__item { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }

/* ---------- Adresses ---------- */

.dkm-adresse-carte { display: flex; align-items: flex-start; gap: var(--space-3); }
.dkm-adresse-carte__icone { flex-shrink: 0; margin-top: 2px; color: var(--red); }
.dkm-adresse-carte__corps { min-width: 0; flex: 1; }
.dkm-adresse-carte__supprimer {
	display: grid; flex-shrink: 0; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md);
	color: var(--ink-3); background: none; border: 0; cursor: pointer; transition: background-color 160ms ease, color 160ms ease;
}
.dkm-adresse-carte__supprimer:hover { background: var(--danger-soft); color: var(--danger); }

/* ---------------------------------------------------------------------
   NOTIFICATIONS ÉPHÉMÈRES

   Empilées en bas à droite sur desktop, en pleine largeur en bas sur
   mobile — là où le pouce est, et là où le regard revient après un clic
   sur un bouton d'ajout.

   `--bottombar-offset` les place au-dessus de la barre d'onglets, et le
   décalage supplémentaire les tient à l'écart du bouton WhatsApp, qui
   occupe déjà le coin droit.
   ------------------------------------------------------------------ */
.dkm-notices {
  position: fixed;
  z-index: 80;                 /* au-dessus de la barre du bas (50) */
  left: var(--space-3);
  right: var(--space-3);
  bottom: calc(var(--bottombar-offset) + 4.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;        /* la page reste cliquable autour */
}

@media (min-width: 768px) {
  .dkm-notices {
    left: auto;
    right: var(--space-6);
    bottom: var(--space-6);
    width: min(24rem, calc(100vw - 2 * var(--space-6)));
  }
}

.dkm-notice {
  pointer-events: auto;        /* mais le message, lui, se ferme */
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  border-left: 4px solid var(--ink-3);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lifted);
  animation: dkm-notice-entree 200ms ease-out;
}

.dkm-notice--ok { border-left-color: var(--ok); }
.dkm-notice--info { border-left-color: var(--blue); }
.dkm-notice--erreur { border-left-color: var(--red); }

.dkm-notice__texte {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--type-small);
  font-weight: 500;
  color: var(--ink);
}

.dkm-notice__lien {
  flex-shrink: 0;
  font-size: var(--type-small);
  font-weight: 700;
  color: var(--red-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Cible tactile réelle malgré un glyphe minuscule : le bouton déborde
   sur le coin du message, sans occuper de place dans le flux. */
.dkm-notice__fermer {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.dkm-notice__fermer:hover { color: var(--ink); }

.dkm-notice.est-sortante {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms ease, transform 200ms ease;
}

@keyframes dkm-notice-entree {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Écran livreur — template-livreur.php (Lot 4 / Sprint 3)

   Consulté dehors, en plein soleil, souvent d'une seule main sur un
   scooter à l'arrêt. Trois conséquences sur ce bloc :
     1. Une seule colonne, aucune mise en page complexe — rien à
        interpréter d'un coup d'œil rapide.
     2. Contrastes plus marqués que le reste du site (fonds pleins,
        pas de gris pâle) — pour rester lisible avec un écran ébloui.
     3. Zones tactiles nettement au-dessus de --tap-lg (52px) — pensées
        pour le pouce, pas pour une souris.
   ============================================================ */

.dkm-livreur__entete {
	background: var(--dark);
	padding-block: var(--space-6) var(--space-5);
}
.dkm-livreur__eyebrow { color: rgba(255,255,255,0.72); }
.dkm-livreur__titre { color: #FFFFFF; margin-top: var(--space-2); }

.dkm-livreur__liste {
	list-style: none; margin: var(--space-5) 0 var(--space-8); padding: 0;
	display: flex; flex-direction: column; gap: var(--space-5);
}

.dkm-carte-livraison {
	padding: var(--space-4);
	border-width: 2px;
	display: flex; flex-direction: column; gap: var(--space-3);
}

.dkm-carte-livraison__entete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.dkm-carte-livraison__numero { font-size: 1.0625rem; font-weight: 800; }

.dkm-carte-livraison__client { font-size: var(--type-body); font-weight: 700; margin: 0; }

.dkm-carte-livraison__ligne { display: flex; align-items: flex-start; gap: var(--space-3); }
.dkm-carte-livraison__ligne--telephone { align-items: center; flex-wrap: wrap; }
.dkm-carte-livraison__icone { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; color: var(--ink-3); }

.dkm-carte-livraison__quartier { display: block; font-size: 1.0625rem; }
.dkm-carte-livraison__repere { display: block; font-size: var(--type-small); color: var(--ink-3); margin-top: 2px; }

.dkm-carte-livraison__telephone { font-size: 1.125rem; font-weight: 700; margin-right: auto; }
.dkm-carte-livraison__appeler {
	min-height: var(--tap-lg); padding: 0 var(--space-5); font-size: var(--type-body);
	flex-shrink: 0;
}

.dkm-carte-livraison__montant {
	display: flex; align-items: center; gap: var(--space-2);
	padding: var(--space-3); border-radius: var(--r-md);
	background: var(--red-soft); color: var(--red-ink); font-weight: 700;
}
.dkm-carte-livraison__montant .t-price { margin-left: auto; font-size: 1.25rem; }
.dkm-carte-livraison__montant--paye { background: var(--ok-soft); color: var(--ok); }

/* Actions — les deux boutons dominent visuellement la carte : c'est
   l'action qu'on cherche des yeux en premier, pas l'adresse. */
.dkm-carte-livraison__actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-1); }
.dkm-carte-livraison__bouton {
	min-height: 64px;
	width: 100%;
	font-size: 1.125rem;
	font-weight: 800;
}
.dkm-carte-livraison__bouton--livree { background: var(--ok); color: #FFFFFF; }
.dkm-carte-livraison__bouton--livree:hover:not(:disabled) { background: #0B5E37; color: #FFFFFF; }

.dkm-carte-livraison__confirmation {
	background: var(--surface-sunken); border-radius: var(--r-md);
	padding: var(--space-4); text-align: center;
	display: flex; flex-direction: column; gap: var(--space-3);
}
.dkm-carte-livraison__confirmation-actions { display: flex; flex-direction: column; gap: var(--space-3); }

.dkm-carte-livraison__statut {
	display: flex; align-items: center; gap: var(--space-2);
	padding: var(--space-4); border-radius: var(--r-md);
	font-weight: 800; font-size: 1.0625rem;
}
.dkm-carte-livraison__statut--livree { background: var(--ok-soft); color: var(--ok); }
.dkm-carte-livraison__statut--absent { background: var(--warn-soft); color: var(--warn); }

/* Carte déjà traitée : un repère de couleur sur le bord suffit — le
   contenu (adresse, téléphone) reste lisible si le livreur doit
   revérifier après coup. */
.dkm-carte-livraison.est-traitee { border-color: var(--rule-strong); }
.dkm-carte-livraison.est-livree { border-left: 6px solid var(--ok); }
.dkm-carte-livraison.est-absente { border-left: 6px solid var(--warn); }

/* Une animation qui surgit peut déclencher un malaise chez les personnes
   sensibles au mouvement. Le message reste, le déplacement disparaît. */
@media (prefers-reduced-motion: reduce) {
  .dkm-notice { animation: none; }
  .dkm-notice.est-sortante { transition: none; }
}

/* ============================================================
   Écran gestionnaire — template-gestionnaire.php
   Refonte visuelle du 24/08 — voir journal/JOURNAL-DESIGN-GESTIONNAIRE.md

   🔴 L'IDÉE DIRECTRICE : cet écran est une CONSOLE, pas une page.
   Il était bâti avec le vocabulaire du site vitrine — bandeau sombre non
   collant, titre de titraille, panneaux empilés dans le flux, contenu enfermé
   dans .shell. Conséquence mesurée avant refonte : le montant à encaisser,
   information pilote, quittait l'écran au premier coup de molette pendant que
   la recherche restait collée ; et on voyait QUATRE commandes sur quarante en
   arrivant.

   Ce qui sert en permanence est fixe et dense. Ce qui sert trois fois par jour
   sort de la voie de passage. La couleur cesse d'être décorative.

   📌 AUCUN JETON GLOBAL N'EST MODIFIÉ ICI. Ce dont l'écran a besoin en propre
   est déclaré en portée locale sur .dkm-gestionnaire, préfixé --dkm-g-*. Ces
   variables n'existent pas ailleurs : elles ne peuvent pas être choisies par
   erreur sur un autre gabarit. Catalogue, panier, tunnel et espace client ne
   sont touchés par aucune ligne de ce bloc.
   ============================================================ */

.dkm-gestionnaire {
	/* Décalage « collant » : la barre de commande se pose sous l'entête du
	   site (.dkm-entete, elle-même collante) et sous la barre d'administration
	   WordPress — le gestionnaire, lui, garde l'accès à wp-admin. */
	--dkm-sticky-haut: var(--topbar-h);

	/* ⚠️ Mesurées par dkm-gestionnaire.js. Les valeurs écrites ici ne sont
	   qu'un repli si le script ne tourne pas. Les fixer en dur ferait
	   chevaucher les barres dès qu'un statut de plus apparaît ou qu'un rang
	   d'onglets passe à la ligne. */
	--dkm-entete-h: 4.5rem;
	--dkm-barre-h: 6.5rem;

	/* Densité de ligne. 48 px place l'écran entre le « medium » (40) et le
	   standard (48) des tables métier éprouvées. Avant refonte : ~81 px, au
	   delà même du plus relâché des barèmes. */
	--dkm-g-ligne-h: 48px;

	/* Les trois états de ligne. AUCUN n'emprunte une teinte de statut :
	   c'est ce qui rendait les pastilles invisibles au survol (contraste
	   1.00 entre .badge-blue et l'ancien survol --blue-soft). */
	--dkm-g-survol: var(--surface-sunken);
	--dkm-g-selection: rgba(16, 16, 18, 0.06);
	--dkm-g-selection-barre: var(--ink);

	/* Filet de séparation. Le zébrage a été retiré : mesuré à 1.05 de
	   contraste avec la ligne blanche, il n'était pas visible — et il entrait
	   en conflit avec le survol et la sélection. */
	--dkm-g-filet: var(--rule-strong);
}
.admin-bar .dkm-gestionnaire { --dkm-sticky-haut: calc(var(--topbar-h) + 32px); }
@media screen and (max-width: 782px) {
	.admin-bar .dkm-gestionnaire { --dkm-sticky-haut: calc(var(--topbar-h) + 46px); }
}

/* --- Éléments de façade sur un écran métier ---
   🔴 Constaté en recette le 24/08 : le badge reCAPTCHA de Google flottait en
   bas à droite et recouvrait le coin du tableau — précisément là où se
   trouvent les boutons d'action. Même défaut que le bouton WhatsApp flottant
   (corrigé le 19/08), même cause : un élément pensé pour la façade se retrouve
   sur un écran interne parce qu'il est injecté globalement.

   ⚠️ MASQUAGE VISUEL UNIQUEMENT. L'extension `google-captcha` continue de
   tourner et de protéger le formulaire de contact public — on ne coupe pas un
   dispositif anti-spam pour un problème de mise en page. `visibility` plutôt
   que `display: none` : c'est ce que fait la feuille `hide_badge.css` de
   l'extension elle-même, et le badge doit rester dans le DOM (les conditions
   d'utilisation de Google demandent que la mention reste présente).

   📌 La classe `dkm-ecran-metier` est posée par dkmotos_body_class() dans
   functions.php, à partir de `is_page_template()` — jamais d'identifiant de
   page en dur. */
.dkm-ecran-metier .grecaptcha-badge { visibility: hidden; }

/* --- Largeur ---
   🔴 Le tableau travaillait dans .shell (1240 px) sur un écran de comptoir de
   1920 : 340 px de vide de chaque côté pendant que les adresses étaient
   tronquées à 16rem avec une info-bulle. Un outil qui tronque son contenu au
   milieu d'un écran à moitié vide ne peut pas paraître professionnel.

   ⚠️ Neutralisation strictement locale : `.shell` n'est touchée QU'À
   L'INTÉRIEUR de .dkm-gestionnaire. Aucun autre gabarit n'est concerné. */
.dkm-gestionnaire .shell { max-width: none; }
@media (min-width: 1024px) {
	.dkm-gestionnaire .shell { padding-inline: var(--space-6); }
}

/* ============================================================
   BARRE DE COMMANDE — l'identité et l'argent, sur une seule ligne
   ============================================================
   🔴 Avant : un bandeau de 163 px NON COLLANT portait le montant à encaisser,
   au-dessus d'une barre d'outils collante de 149 px qui portait la recherche.
   La hiérarchie déclarée (« l'argent d'abord ») et la hiérarchie réelle
   étaient inversées : le chiffre pilote disparaissait au défilement, le champ
   de recherche restait.

   Ici les deux sont collants, et le bandeau tient sur UNE ligne : 72 px au
   lieu de 163, et il ne quitte plus l'écran. */
/* 🔴 BANDEAU ROUGE — 24/08, demande de Dev A : le rouge de la charte
   (`--red`, #E31E2F), celui déjà employé en aplat sur les autres pages.

   ⚠️ CE CHANGEMENT A UNE CONSÉQUENCE QU'IL FAUT CONNAÎTRE. Le bleu nuit
   (#063B69) offrait 11.43 de contraste avec le blanc : on pouvait donc y
   hiérarchiser l'information par l'OPACITÉ — blanc à 92 %, 72 %, 62 % — et
   tout restait lisible. Le rouge de la charte n'offre que **4.67** avec le
   blanc plein : il passe AA de justesse, et toute translucidité tombe sous le
   seuil (blanc 72 % → 2.96, blanc 62 % → 2.50).

   📌 Conséquence assumée : sur ce bandeau, TOUT LE TEXTE EST BLANC PLEIN. La
   hiérarchie s'y fait désormais par la taille, la graisse et l'interlettrage
   — plus jamais par l'opacité. Ne pas réintroduire de `rgba(255,255,255,…)`
   sur du texte ici : ce serait invisible au comptoir en fin de journée. */
.dkm-gestionnaire__entete {
	position: sticky; top: var(--dkm-sticky-haut); z-index: 41;
	background: var(--red);
	padding-block: var(--space-3);
}
.dkm-gestionnaire__entete-barre {
	display: flex; align-items: center; gap: var(--space-4) var(--space-6);
	flex-wrap: wrap;
}
.dkm-gestionnaire__identite { flex: 0 0 auto; }
/* ⚠️ Blanc PLEIN, sans opacité. Un premier jet posait `opacity: .95` pour
   garder un peu de recul : mesuré à 4.33, sous le seuil AA de 4.5. Sur ce
   rouge, même 5 % de transparence font basculer. */
.dkm-gestionnaire__eyebrow { color: #FFFFFF; }
.dkm-gestionnaire__titre {
	color: #FFFFFF; margin-top: 1px;
	/* Le titre passe en corps de travail : il occupait un corps de titraille
	   (2.25 rem) sur un écran où chaque pixel vertical est disputé. */
	font-size: var(--type-subheading); line-height: 1.1;
}

/* Lien vers les demandes de contact — consulté deux fois par jour : il tient
   au bout de la barre, pas dans la voie de passage. `margin-left: auto` le
   pousse au bord opposé quel que soit le nombre de repères affichés. */
.dkm-gestionnaire__lien-contact {
	display: inline-flex; align-items: center; gap: var(--space-2);
	margin-left: auto;
	padding: var(--space-2) var(--space-3);
	/* 0.8 et non 0.45 : le contour identifie un composant d'interface, donc
	   3:1 exigé (WCAG 1.4.11). Mesuré : 0.45 → 2.38 ❌, 0.7 → 2.88 ❌,
	   0.8 → 3.38 ✅. Sur ce rouge, la marge est mince partout. */
	border: 1px solid rgba(255,255,255,0.8); border-radius: var(--r-pill);
	color: #FFFFFF; text-decoration: none;
	font-size: var(--type-small); font-weight: var(--weight-medium);
	white-space: nowrap;
	transition: background-color 160ms ease, border-color 160ms ease;
}
.dkm-gestionnaire__lien-contact:hover,
.dkm-gestionnaire__lien-contact:focus-visible {
	background: rgba(255,255,255,0.16); border-color: #FFFFFF; color: #FFFFFF;
}
.dkm-gestionnaire__badge {
	/* ⚠️ Était `background: var(--red)` : sur un bandeau désormais rouge, la
	   pastille disparaissait dans son fond (contraste 1.00). Inversée. */
	padding: 2px var(--space-2); border-radius: var(--r-pill);
	background: #FFFFFF; color: var(--red-ink);
	font-size: var(--type-micro); font-weight: 700; white-space: nowrap;
}

/* --- Repères chiffrés ---
   🔴 L'ARGENT N'A PAS DE COULEUR — IL A LA TAILLE.

   L'ambre est pris par le statut « en livraison » (voir la règle de couleur
   plus bas) : donner une teinte au montant rouvrirait exactement la collision
   qu'on vient de fermer. Le montant se distingue donc par le poids, et par
   rien d'autre — c'est le plus grand chiffre de tout l'écran, et il est le
   seul à l'être. */
.dkm-gestionnaire__reperes {
	display: flex; flex-wrap: wrap; align-items: baseline;
	gap: var(--space-3) var(--space-5);
}
.dkm-gestionnaire__repere {
	display: flex; align-items: baseline; gap: var(--space-2);
	white-space: nowrap;
}
.dkm-gestionnaire__repere-valeur {
	font-size: var(--type-lead); font-weight: 700; line-height: 1.1;
	color: #FFFFFF;
}
.dkm-gestionnaire__repere-libelle {
	font-size: var(--type-micro); color: #FFFFFF;
	text-transform: uppercase; letter-spacing: 0.06em;
}

/* Le montant à encaisser — deux fois le corps des autres repères. */
.dkm-gestionnaire__repere--argent {
	padding-right: var(--space-5);
	border-right: 1px solid rgba(255,255,255,0.45);
}
.dkm-gestionnaire__repere--argent .dkm-gestionnaire__repere-valeur {
	font-size: 1.875rem; color: #FFFFFF; letter-spacing: -0.01em;
}


/* Livraisons sans livreur.
   🔴 Était en `--red-light` sur bleu nuit (5.07). Sur un bandeau rouge, du
   rouge clair ne dit plus rien — 2.07 de contraste, et l'alerte se confondrait
   avec le fond au lieu de s'en détacher. Elle s'inverse donc : pastille
   blanche pleine, texte rouge foncé (6.20). Sur un bandeau rouge, ce qui
   alerte n'est plus la teinte, c'est le RENVERSEMENT. */
.dkm-gestionnaire__repere--alerte {
	padding: 2px var(--space-3); border-radius: var(--r-sm);
	background: #FFFFFF;
}
.dkm-gestionnaire__repere--alerte .dkm-gestionnaire__repere-valeur { color: var(--red-ink); }
.dkm-gestionnaire__repere--alerte .dkm-gestionnaire__repere-libelle { color: var(--red-ink); }

/* ============================================================
   BARRE D'OUTILS — recherche, quartier, onglets de statut
   ============================================================ */
.dkm-gestionnaire__outils {
	position: sticky; top: calc(var(--dkm-sticky-haut) + var(--dkm-entete-h)); z-index: 40;
	background: rgba(250, 250, 251, 0.97);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--rule);
	padding-block: var(--space-3);
}
/* 📌 Composition centrée — demande de Dev A du 24/08.
   L'écran étant passé en pleine largeur, une barre d'outils calée à gauche
   laissait un vide de plusieurs centaines de pixels à droite et l'ensemble
   paraissait posé de travers. Recherche, filtre et onglets forment désormais
   un bloc centré.

   ⚠️ Contrepartie connue, pour qui reprendra ce fichier : la position des
   onglets se déplace légèrement quand un statut apparaît ou disparaît du plan
   de charge, puisque la rangée se recentre. Sur un écran très utilisé, la
   mémoire du geste préfère en général un point d'ancrage fixe. Si ça gêne au
   comptoir, il suffit de repasser ces trois règles en `flex-start`. */
.dkm-gestionnaire__outils-ligne {
	display: flex; align-items: center; justify-content: center;
	gap: var(--space-3); flex-wrap: wrap;
}

.dkm-gestionnaire__recherche { position: relative; flex: 1 1 22rem; max-width: 32rem; min-width: 14rem; }
.dkm-gestionnaire__recherche-icone {
	position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%);
	color: var(--ink-3); line-height: 0; pointer-events: none;
}
.dkm-gestionnaire__recherche-champ {
	min-height: 38px; padding-block: 0;
	padding-left: 2.6rem; padding-right: 2.4rem;
	font-size: var(--type-small);
}
.dkm-gestionnaire__recherche-vider {
	position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%);
	width: 26px; height: 26px; border: 0; border-radius: var(--r-pill);
	background: var(--surface-sunken); color: var(--ink-2);
	font-size: 17px; line-height: 1; cursor: pointer;
}
.dkm-gestionnaire__recherche-vider:hover { background: var(--rule-strong); }

.dkm-gestionnaire__filtre-quartier { display: flex; align-items: center; gap: var(--space-2); }
.dkm-gestionnaire__filtre-quartier .field {
	min-width: 12rem; min-height: 38px; padding-block: 0;
	font-size: var(--type-small);
}
.dkm-gestionnaire__reinitialiser { color: var(--red-ink); font-weight: 700; white-space: nowrap; }

/* --- Onglets de statut ---
   🔴 L'onglet actif était en bleu nuit (--dark). Sur un écran où le bleu dit
   déjà « en préparation », « à livrer », « cliquable » et « ma souris est
   là », c'était le cinquième emploi de la même teinte. « Vous êtes ici »
   n'est pas un statut : l'onglet actif passe au neutre le plus fort.

   📌 En revanche chaque onglet porte UN POINT DE LA COULEUR DE SON STATUT :
   le plan de charge et le tableau parlent enfin la même langue. */
.dkm-gestionnaire__onglets {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: var(--space-1);
	margin-top: var(--space-3);
}
.dkm-gestionnaire__onglet {
	display: inline-flex; align-items: center; gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--r-md);
	color: var(--ink-2); text-decoration: none;
	font-size: var(--type-small); font-weight: var(--weight-medium);
	white-space: nowrap;
	transition: background-color 140ms ease, color 140ms ease;
}
.dkm-gestionnaire__onglet:hover { background: var(--surface-sunken); color: var(--ink); }
.dkm-gestionnaire__onglet.est-actif { background: var(--ink); color: #FFFFFF; font-weight: 700; }

/* La vue d'ensemble n'est pas un filtre de statut : c'est leur absence.
   🔴 Elle s'appelait « En cours » — comme le statut `processing`. Deux
   onglets homonymes et cliquables dans la même rangée (constat de recette du
   24/08). Le libellé est corrigé côté gabarit ; la séparation visuelle traite
   la cause de fond, qui est qu'on lisait une rangée de sept filtres alors
   qu'il y en a six plus une vue d'ensemble. */
.dkm-gestionnaire__onglet--tous { font-weight: var(--weight-bold); }
.dkm-gestionnaire__onglets-separateur {
	width: 1px; align-self: stretch; min-height: 20px;
	margin-inline: var(--space-2);
	background: var(--rule-strong); flex-shrink: 0;
}

/* Le point de statut. `currentColor` ne convient pas : il suivrait la couleur
   du texte de l'onglet, qui passe au blanc quand l'onglet est actif — le
   point perdrait justement son sens au moment où on le regarde. */
.dkm-gestionnaire__onglet-point {
	width: 8px; height: 8px; border-radius: var(--r-pill);
	flex-shrink: 0; background: var(--ink-4);
}
.dkm-gestionnaire__onglet--est-attente .dkm-gestionnaire__onglet-point { background: var(--ink-4); }
.dkm-gestionnaire__onglet--est-preparation .dkm-gestionnaire__onglet-point { background: var(--blue); }
.dkm-gestionnaire__onglet--est-livraison .dkm-gestionnaire__onglet-point { background: var(--warn); }
.dkm-gestionnaire__onglet--est-terminee .dkm-gestionnaire__onglet-point { background: var(--ok); }
.dkm-gestionnaire__onglet--est-annulee .dkm-gestionnaire__onglet-point { background: var(--red-ink); }

.dkm-gestionnaire__onglet-compte {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 1.5rem; padding: 0 5px; border-radius: var(--r-sm);
	background: var(--surface-sunken); color: var(--ink-2);
	font-size: var(--type-micro); font-weight: 700;
}
.dkm-gestionnaire__onglet.est-actif .dkm-gestionnaire__onglet-compte {
	background: rgba(255,255,255,0.22); color: #FFFFFF;
}

/* Historique — même mécanique, en retrait : on n'y va que pour retrouver une
   commande close, pas pour travailler. */
.dkm-gestionnaire__onglets--archive { margin-top: var(--space-2); }
.dkm-gestionnaire__onglets-titre {
	font-size: var(--type-micro); text-transform: uppercase; letter-spacing: 0.06em;
	/* --ink-4 échouait à 2.65 sur --surface : seul défaut de contraste
	   textuel de tout l'écran avant refonte. */
	color: var(--ink-3); font-weight: 700; margin-right: var(--space-2);
}
.dkm-gestionnaire__onglet--archive {
	font-size: var(--type-micro); color: var(--ink-3);
	padding: var(--space-1) var(--space-2);
}

/* ============================================================
   CORPS
   ============================================================
   🔴 `padding-block: var(--space-4) var(--space-10)` — --space-10 N'EXISTE
   PAS dans l'échelle, qui s'arrête à --space-8. La déclaration étant
   invalide, le navigateur la jetait EN ENTIER, y compris le --space-4 du
   haut : le corps de l'écran n'avait AUCUN rembourrage vertical, ni en haut
   ni en bas. Les panneaux touchaient la barre collante, la dernière ligne du
   tableau touchait le pied de page.

   📌 Corrigé sur place plutôt qu'en ajoutant --space-10 au :root — on ne
   crée pas un jeton global pour rattraper une faute de frappe locale.

   L'écart uniforme de 12 px entre tous les blocs devient un GROUPEMENT :
   24 px entre blocs de natures différentes, 12 px à l'intérieur d'un bloc.
   C'est ce qui fait lire une hiérarchie sans une seule couleur de plus. */
.dkm-gestionnaire__corps {
	padding-block: var(--space-5) var(--space-8);
	display: flex; flex-direction: column; gap: var(--space-5);
}

/* Avis bloquant — en tête : en bas du tableau, il n'était jamais lu, et le
   gestionnaire découvrait le problème sur une liste désactivée. */
.dkm-gestionnaire__avis {
	display: flex; align-items: flex-start; gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--warn); border-radius: var(--r-md);
	background: var(--warn-soft); color: var(--warn);
	font-size: var(--type-small);
}
.dkm-gestionnaire__avis span[aria-hidden] { line-height: 0; flex-shrink: 0; margin-top: 2px; }

/* ============================================================
   IMPRESSIONS DU JOUR — une bande, plus deux panneaux
   ============================================================
   🔴 « Feuilles de tournée » et « Liste de préparation » étaient deux
   panneaux empilés ENTRE la barre d'outils et le tableau : ~186 px de la
   zone de travail, en permanence, pour deux outils consultés deux ou trois
   fois par jour. Et le panneau des tournées grandissait D'UNE LIGNE PAR
   LIVREUR : à six livreurs, il poussait le tableau sous la ligne de
   flottaison.

   Ils tiennent désormais sur une bande d'environ 44 px, à portée sans
   occuper la voie de passage. Les boutons et l'impression sont inchangés :
   c'est leur emplacement qui change. */
.dkm-gestionnaire__impressions {
	display: flex; align-items: center; gap: var(--space-2) var(--space-3);
	flex-wrap: wrap;
	padding: var(--space-2) var(--space-3);
	background: var(--surface-sunken); border-radius: var(--r-md);
}
.dkm-gestionnaire__impressions-titre {
	font-size: var(--type-micro); font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3);
	margin: 0; margin-right: var(--space-1);
}
.dkm-gestionnaire__impressions-groupe {
	display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
/* Le compte est porté par le bouton lui-même : « Ibrahima Sarr · 4 » se lit
   d'un coup, là où le panneau demandait une ligne et une phrase. */
.dkm-gestionnaire__impressions-compte {
	font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.dkm-gestionnaire__impressions .btn:disabled .dkm-gestionnaire__impressions-compte { color: inherit; }

/* Liste des tournées imprimables. Le compte de courses est dans le libellé de
   chaque entrée (« Ibrahima Sarr — 4 courses ») : on choisit en connaissance
   de cause, sans ouvrir autre chose. */
.dkm-gestionnaire__select-tournee {
	width: auto; min-width: 14rem; min-height: 32px;
	padding: 0 var(--space-2); font-size: var(--type-micro);
}
/* Ni liste ni bouton quand rien n'est parti en livraison : on dit pourquoi,
   plutôt que d'afficher un contrôle mort. */
.dkm-gestionnaire__impressions-vide { font-size: var(--type-micro); color: var(--ink-3); }

/* Séparateur entre les deux groupes — un filet plutôt qu'un écart, pour que
   la bande se lise en deux blocs et non en une file de boutons. */
.dkm-gestionnaire__impressions-separateur {
	width: 1px; align-self: stretch; min-height: 24px;
	background: var(--rule-strong); flex-shrink: 0;
}

/* --- Barre d'action au-dessus du tableau ---
   Elle était À L'INTÉRIEUR du conteneur défilant : enfermée dans le cadre du
   tableau, et emportée hors de vue avec les colonnes sur écran étroit. */
.dkm-gestionnaire__barre-selection-actions {
	display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
.dkm-gestionnaire__barre-selection {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--space-3); flex-wrap: wrap;
	margin-bottom: calc(var(--space-5) * -1 + var(--space-3));
}
.dkm-gestionnaire__resume { color: var(--ink-2); margin: 0; font-weight: var(--weight-medium); }

/* ============================================================
   TABLEAU
   ============================================================ */
.dkm-gestionnaire__table-scroll {
	overflow-x: auto;
	border: 1px solid var(--rule); border-radius: var(--r-md);
	background: var(--surface-raised);
}

/* 📌 Au-delà de la largeur du tableau, on retire le conteneur de défilement.
   Un conteneur `overflow` capture `position: sticky` : tant qu'il était là,
   les en-têtes de colonnes ne pouvaient pas se coller au défilement de la
   page — et sur quarante lignes on ne sait plus quelle colonne on lit.

   🔴 Seuil relevé de 60rem à 80rem le 24/08. Il était calé sur une valeur qui
   n'avait plus de rapport avec la largeur réelle du tableau : au-dessus de
   960 px il n'y avait donc NI conteneur de défilement NI place suffisante, et
   le trop-plein sortait simplement de l'écran. 80rem = 1280 px, la largeur
   plancher retenue pour un poste de comptoir. */
@media (min-width: 88rem) {
	.dkm-gestionnaire__table-scroll { overflow: visible; }

	/* ⚠️ Le collant vit ICI, et seulement ici : hors de cette requête, le
	   conteneur `overflow` capture le positionnement et renvoie les en-têtes
	   en bas du tableau. Ne pas remonter cette règle au niveau du fichier. */
	.dkm-gestionnaire__table th {
		position: sticky;
		top: calc(var(--dkm-sticky-haut) + var(--dkm-entete-h) + var(--dkm-barre-h));
		z-index: 20;
	}
}

/* 🔴 `table-layout: fixed` — LE CORRECTIF DE FOND du débordement constaté en
   recette le 24/08 (colonne Actions coupée, bouton « Bon » inatteignable en
   1920 px).

   La cause n'était pas la largeur de l'écran. En `auto`, le navigateur calcule
   les colonnes à partir du CONTENU : tant que les cellules empilaient deux ou
   trois lignes, elles réclamaient peu de largeur. La refonte de la densité les
   a mises sur une seule ligne — chacune s'est donc mise à réclamer sa largeur
   entière d'un coup, et la colonne Actions, dernière servie et sans plancher,
   s'est fait écraser puis pousser hors du cadre.

   ⚠️ Ajouter `overflow-x: auto` aurait masqué le symptôme en imposant un
   défilement horizontal sur l'outil principal du gestionnaire — une régression
   d'usage, pas une correction.

   En `fixed`, ce sont les largeurs déclarées qui commandent. Le texte trop long
   est tronqué avec une info-bulle : c'est une décision de conception, alors que
   se faire pousser hors de l'écran n'en était pas une.

   `min-width: 76rem` (1216 px) = le budget de colonnes ci-dessous. En dessous
   de 1280 px, le conteneur de défilement reprend la main. */
.dkm-gestionnaire__table {
	width: 100%; min-width: 84rem;
	table-layout: fixed; border-collapse: collapse;
	background: var(--surface-raised); font-size: var(--type-small);
}

/* --- Budget de colonnes ---
   Vérifié par le calcul à 1280 / 1440 / 1920 px (voir le journal).
   Six colonnes à largeur déclarée, deux libres qui se partagent le reste :

     ☑ 40 · Commande 128 · Statut 192 · À encaisser 128 · Livreur 184 ·
     Actions 264                                   = 936 px déclarés

   🔴 Chaque largeur est calée sur le PIRE CAS de contenu de sa colonne, pas
   sur son contenu courant — c'est précisément ce calcul qui manquait et qui a
   produit le débordement. Vérifié un par un :

     Commande 128 ≥ 125 · Statut 192 ≥ 189 (« En cours de livraison ») ·
     À encaisser 128 ≥ 119 · Livreur 184 ≥ 184 · Actions 264 ≥ 257

   Client et Remise se partagent le reste, avec un plancher de 204 px chacune
   (d'où le min-width de 84rem = 1344 px posé sur la table) :

     1280 px → 204 px chacune, avec 128 px de défilement horizontal
     1440 px → 220 px chacune, aucun débordement
     1920 px → 460 px chacune, aucun débordement

   ⚠️ 1408 px est la largeur à partir de laquelle les huit colonnes tiennent
   sans défiler. En dessous, le conteneur de défilement reprend la main plutôt
   que de comprimer les colonnes jusqu'à rendre une action inatteignable — le
   défaut du 24/08. À 1280 px il reste donc ~128 px à faire défiler : c'est
   assumé et documenté, pas un oubli. Voir le journal, §8, pour l'arbitrage
   proposé si ce défilement n'est pas acceptable au comptoir.

   📌 Client et Remise sont libres parce que ce sont les DEUX SEULES dont le
   contenu se tronque sans perte d'usage — et encore, pas n'importe quelle
   moitié (voir les règles de troncature plus bas). */
.dkm-gestionnaire__col-select   { width: 40px; text-align: center; }
.dkm-gestionnaire__col-commande { width: 8rem; }
.dkm-gestionnaire__col-statut   { width: 12rem; }
.dkm-gestionnaire__col-argent   { width: 8rem; text-align: right; }
.dkm-gestionnaire__col-livreur  { width: 11.5rem; }
.dkm-gestionnaire__col-actions  { width: 16.5rem; }
.dkm-gestionnaire__table th,
.dkm-gestionnaire__table td {
	padding: var(--space-2) var(--space-3);
	text-align: left; vertical-align: middle;
}

/* 🔴 LA DENSITÉ. Le rembourrage était déjà serré ; ce qui faisait la hauteur,
   c'est que CINQ CELLULES SUR HUIT empilaient deux ou trois lignes — la
   cellule « Remise » montait seule à ~81 px, et la ligne prenait la hauteur
   de la plus haute.

   Tout passe sur une ligne, l'information secondaire en gris plus petit à
   côté de la principale. Rien n'est masqué, aucun geste nouveau : c'est une
   remise en page, pas un dépliage.

   Décompte calculé (1920×1080, barre d'administration affichée) : ~10
   commandes à l'arrivée et ~13 une fois défilé, contre 4 et 9 avant. */
.dkm-gestionnaire__table tbody td { height: var(--dkm-g-ligne-h); }

/* 🔴 EN-TÊTES EN BAS DU TABLEAU — corrigé le 24/08, constat de recette.
   Les `th` étaient `position: sticky` EN TOUTES CIRCONSTANCES, avec un
   décalage `top` d'environ 280 px (les trois barres empilées au-dessus).

   Or en dessous de 88rem, le conteneur porte `overflow-x: auto` — et la
   spécification est formelle : quand un axe vaut `visible` et l'autre non,
   `visible` est calculé en `auto`. Le conteneur devenait donc AUSSI un
   scrollport vertical, et le `top` du `th` se résolvait par rapport à LUI et
   non à la page. Un élément collant restant confiné à son bloc conteneur, un
   décalage de 280 px dans un tableau plus court poussait la ligne d'en-têtes
   vers le BAS.

   📌 Le collant n'a de sens que là où il se cale sur la page, c'est-à-dire
   là où le conteneur de défilement disparaît. Il est donc déclaré dans la
   même requête de média — et nulle part ailleurs. */
.dkm-gestionnaire__table th {
	background: var(--surface-sunken);
	font-size: var(--type-micro); font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.06em;
	/* --ink-2 plutôt que --ink-3 : la lisibilité des en-têtes se traite par
	   le contraste et la graisse, pas en agrandissant le corps — chaque
	   pixel gagné en hauteur coûte une commande visible. */
	color: var(--ink-2); white-space: nowrap;
	/* `border-collapse` fait disparaître les bordures d'une cellule
	   collante : l'ombre intérieure tient le trait à sa place. */
	box-shadow: inset 0 -1px 0 var(--rule-strong);
}

/* 🔴 LE ZÉBRAGE SORT, LE FILET ENTRE.
   `rgba(241,241,243,0.45)` sur blanc donne #F9F9FA, soit 1.05 de contraste
   avec la ligne blanche : le zébrage que le brief jugeait mal alterné
   n'alternait pas du tout, il n'était pas visible. Et il se disputait la
   place avec le survol et la sélection — trois nuances de gris à trier. */
.dkm-gestionnaire__table tbody td { border-bottom: 1px solid var(--rule); }
.dkm-gestionnaire__table tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   ORGANISATION DE LA LIGNE — 24/08, retour « trop fade »
   ============================================================
   🔴 Le reproche est fondé, et c'est ma refonte qui l'a produit. En
   nettoyant les cinq emplois du bleu (§3.1 du journal), j'ai retiré
   BEAUCOUP de couleur d'un coup : le badge de mode, le liseré de ligne, le
   téléphone en bleu, le zébrage. Chaque retrait était justifié pris
   isolément — mais leur somme a laissé une ligne presque entièrement grise,
   où seule une petite pastille portait encore une teinte.

   ⚠️ La réponse n'est PAS de remettre de la couleur décorative : on
   retomberait exactement dans le défaut d'origine. Elle est de mieux
   ORGANISER, et de rendre plus présente la seule couleur qui a un sens.

   Trois moyens, dans cet ordre d'importance :
     1. grouper les colonnes — huit colonnes, trois groupes de sens ;
     2. donner à la colonne d'argent son propre fond, pour qu'elle se lise
        comme une bande verticale et non comme une colonne parmi huit ;
     3. rendre le statut franchement visible, puisque c'est la seule
        information qui a droit à une teinte. */

/* --- 1. Trois groupes de colonnes ---
     ☑ Commande Client │ Remise Statut Livreur │ À encaisser Actions
        QUI et QUOI    │      OÙ ÇA EN EST     │  COMBIEN et QUOI FAIRE
   Un filet vertical entre les groupes, rien à l'intérieur : c'est le minimum
   qui fait lire une structure au lieu d'une suite de huit colonnes.

   📌 Ciblé par CLASSE et non par `nth-child` : une colonne insérée un jour
   décalerait tous les rangs et déplacerait silencieusement les filets et la
   bande d'argent sur les mauvaises colonnes. Chaque cellule de corps porte
   le nom de sa colonne. */
.dkm-gestionnaire__col-remise,
.dkm-gestionnaire__col-argent { border-left: 1px solid var(--rule); }

/* --- 2. La bande d'argent ---
   📌 Un fond NEUTRE, pas une teinte. L'ambre est pris par « en livraison » et
   le vert par « terminée » : colorer l'argent rouvrirait la collision qu'on
   vient de fermer. Le fond dit « cette colonne est à part » ; c'est le poids
   typographique qui dit « c'est le chiffre qui compte ».

   ⚠️ Les états de ligne (survol, sélection, refus, écriture) portent une
   spécificité plus forte et repassent donc par-dessus cette bande — c'est
   voulu : l'état de la ligne prime sur l'identité de la colonne. */
td.dkm-gestionnaire__col-argent { background: var(--surface-sunken); }
th.dkm-gestionnaire__col-argent { background: var(--rule); }

/* --- 3. Le statut, franchement ---
   La pastille était un timbre de 12 px perdu au milieu de huit colonnes. La
   cellule porte désormais l'accent de son statut sur son bord gauche : la
   colonne se lit alors verticalement, d'un seul coup d'œil, comme une frise
   de l'état du plan de charge.

   📌 C'est la SEULE couleur ajoutée par ce lot, et elle ne dit rien de
   nouveau — c'est la teinte que la pastille portait déjà, rendue lisible à
   distance. On n'a pas ajouté de couleur, on a cessé de la murmurer. */
td.dkm-gestionnaire__col-statut { box-shadow: inset 3px 0 0 var(--ink-4); }
tr[data-dkm-statut-brut="dkm-preparation"] td.dkm-gestionnaire__col-statut,
tr[data-dkm-statut-brut="dkm-prete"] td.dkm-gestionnaire__col-statut { box-shadow: inset 3px 0 0 var(--blue); }
tr[data-dkm-statut-brut="dkm-livraison"] td.dkm-gestionnaire__col-statut { box-shadow: inset 3px 0 0 var(--warn); }
tr[data-dkm-statut-brut="completed"] td.dkm-gestionnaire__col-statut { box-shadow: inset 3px 0 0 var(--ok); }
tr[data-dkm-statut-brut="cancelled"] td.dkm-gestionnaire__col-statut,
tr[data-dkm-statut-brut="refunded"] td.dkm-gestionnaire__col-statut,
tr[data-dkm-statut-brut="failed"] td.dkm-gestionnaire__col-statut { box-shadow: inset 3px 0 0 var(--red); }

/* --- 4. Le numéro de commande ---
   C'est par lui qu'on nomme une commande au téléphone : c'est le point
   d'entrée de la ligne, il mérite d'être le premier mot qu'on lit. */
.dkm-gestionnaire__numero { font-size: var(--type-body); letter-spacing: -0.01em; }

/* --- Les quatre états de ligne ---
   AUCUN n'emprunte une teinte de statut. Le survol était en --blue-soft,
   exactement le fond de .badge-blue et de la pastille « en préparation » :
   contraste 1.00, les pastilles disparaissaient au survol — c'est-à-dire
   précisément au moment où on regarde la ligne. */
.dkm-gestionnaire__table tbody tr:hover td { background: var(--dkm-g-survol); }

/* Sélectionnée. Les cases à cocher existaient, « Imprimer la sélection » les
   consommait, et RIEN ne distinguait une ligne cochée : sur douze lignes
   sélectionnées avant impression, c'était la case seule qui portait tout.
   La barre de gauche fait le travail réglementaire (~18:1, WCAG 1.4.11
   demande 3:1), le fond fait le travail de balayage. */
.dkm-gestionnaire__table tbody tr.est-selectionnee td { background: var(--dkm-g-selection); }
.dkm-gestionnaire__table tbody tr.est-selectionnee td:first-child {
	box-shadow: inset 3px 0 0 var(--dkm-g-selection-barre);
}
.dkm-gestionnaire__table tbody tr.est-selectionnee:hover td { background: rgba(16, 16, 18, 0.09); }

/* Refusée par le serveur. Persistante — un refus métier (« assignez un
   livreur avant… ») est une consigne à suivre, pas une information à
   effleurer. Elle s'affichait à 700 px du clic, en bas à droite, et
   s'effaçait toute seule ; la ligne concernée ne portait aucune marque. */
.dkm-gestionnaire__table tbody tr.est-refusee td { background: var(--red-soft); }
.dkm-gestionnaire__table tbody tr.est-refusee td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.dkm-gestionnaire__motif-refus {
	display: block; margin-top: 2px;
	font-size: var(--type-micro); font-weight: 700; color: var(--red-ink);
	white-space: normal; max-width: 18rem;
}

/* Écriture en cours. `select.disabled` donnait à la liste l'apparence grise
   du cas « aucun compte livreur n'existe » — qui est PERMANENT. Deux
   situations opposées, un seul rendu. */
.dkm-gestionnaire__table tbody tr[aria-busy="true"] td { background: var(--blue-soft); }
.dkm-gestionnaire__table tbody tr[aria-busy="true"] .field:disabled,
.dkm-gestionnaire__table tbody tr[aria-busy="true"] .btn:disabled {
	background: var(--surface-raised); color: var(--ink-3);
	box-shadow: inset 0 0 0 1.5px var(--blue); cursor: progress;
}

/* --- Troncature : quelle moitié cède, et laquelle ne cède jamais ---
   🔴 C'est la partie qui demande un arbitrage, pas une règle générique. En
   colonne de largeur fixe, quelque chose DOIT céder ; le choix de quoi est une
   décision de conception, et elle n'est pas la même d'une colonne à l'autre.

   `min-width: 0` sur le conteneur souple : sans lui, un élément flex refuse de
   passer sous la largeur de son contenu et l'ellipsis ne se déclenche jamais —
   c'est l'oubli classique, et il annule silencieusement toute la troncature. */
.dkm-gestionnaire__duo {
	display: flex; align-items: baseline; gap: var(--space-2);
	min-width: 0; overflow: hidden;
}
.dkm-gestionnaire__table td { overflow: hidden; }

/* --- Colonne « Commande » : numéro et heure sur une ligne --- */
.dkm-gestionnaire__numero { font-weight: 700; white-space: nowrap; }
.dkm-gestionnaire__date {
	margin-left: var(--space-2);
	font-size: var(--type-micro); color: var(--ink-3); white-space: nowrap;
}

/* --- Colonne « Client » ---
   ⚠️ LE NOM CÈDE, LE TÉLÉPHONE JAMAIS. Un nom tronqué reste reconnaissable et
   l'info-bulle rend l'entier. Un NUMÉRO tronqué devient un numéro faux, et il
   a l'air complet : on composerait un numéro inexistant sans soupçonner la
   coupure. Une troncature ne doit jamais produire une donnée plausible. */
.dkm-gestionnaire__client-nom {
	font-weight: 600; white-space: nowrap;
	flex: 0 1 auto; min-width: 0;
	overflow: hidden; text-overflow: ellipsis;
}
/* 🔴 Le téléphone était en --blue : le bleu disait donc aussi « cliquable »,
   en plus de « en préparation » et « à livrer ». Un lien se signale par sa
   forme — icône et soulignement — pas en empruntant la couleur d'un statut. */
.dkm-gestionnaire__client-tel {
	display: inline-flex; align-items: center; gap: 4px;
	flex: 0 0 auto;
	color: var(--ink-3); font-size: var(--type-micro);
	text-decoration: none; white-space: nowrap;
}
.dkm-gestionnaire__client-tel:hover,
.dkm-gestionnaire__client-tel:focus-visible { color: var(--ink); text-decoration: underline; }

/* --- Colonne « Remise » : on marque l'exception, pas la règle ---
   🔴 Le mode était encodé TROIS FOIS (liseré de ligne, badge coloré, texte),
   et le liseré « livraison » échouait au contraste non-textuel : 1.97 contre
   11.43 pour le liseré « retrait ». Les deux moitiés d'un même signal à six
   fois d'écart de force — et c'est le cas majoritaire qui chuchotait.

   La livraison étant le cas courant, la marquer ne distingue rien. Seul le
   RETRAIT reçoit une marque, en forme et non en teinte : la couleur reste
   réservée aux états. Effet recherché : le bord gauche de la ligne se
   libère, et revient à ce qu'il sert partout ailleurs — la sélection. */
.dkm-gestionnaire__mode {
	background: transparent; color: var(--ink);
	border: 1.5px solid var(--ink);
	flex: 0 0 auto;
}
/* ⚠️ Ici c'est L'ADRESSE qui cède, jamais le quartier : le quartier sert au
   tri des courses et se lit en balayant la colonne, l'adresse ne sert qu'au
   moment de partir — et elle part de toute façon en entier sur le bon
   imprimé que le livreur emporte. */
.dkm-gestionnaire__lieu { font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
.dkm-gestionnaire__adresse {
	flex: 0 1 auto; min-width: 0;
	color: var(--ink-3); font-size: var(--type-micro);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Colonne « À encaisser » — la colonne qui pilote la caisse ---
   L'ARGENT N'A PAS DE COULEUR, IL A LA TAILLE : 20 px / 700 contre 14 px /
   400 pour le corps de ligne. Il était à 17 px, soit trois points au-dessus
   du corps — sur la colonne qui pilote la caisse, ce n'est pas une
   hiérarchie, c'est une nuance.

   ✅ Alignement à droite et chasse tabulaire conservés, en-tête compris :
   c'est ce que demande la littérature typographique et c'était déjà juste. */
.dkm-gestionnaire__montant {
	display: block;
	font-size: var(--type-subheading); font-weight: 700; line-height: 1.15;
	white-space: nowrap; letter-spacing: -0.01em;
}
.dkm-gestionnaire__montant-note {
	display: block; font-size: var(--type-micro); color: var(--ink-3); white-space: nowrap;
}
/* Déjà réglé : AUCUN grand chiffre. L'absence de poids EST le signal — le
   vert dit « clos, rien à faire », comme pour une commande terminée. */
.dkm-gestionnaire__regle { margin-bottom: 1px; }

/* --- Colonne « Livreur » ---
   `min-width` : la liste tronquait les noms (« livreur.rece »). Un
   gestionnaire doit pouvoir lire à qui il assigne une course.
   La hauteur descend à 32 px : c'est le contrôle le plus haut de la ligne,
   c'est donc lui qui fixe la densité (32 + 8 + 8 = 48). */
/* ⚠️ `width: 100%` et non plus `min-width: 11rem`. En colonne de largeur
   déclarée, un `min-width` de 176 px dans une colonne qui en offre 160 fait
   déborder la cellule — la liste aurait poussé la colonne Actions exactement
   comme le reste. La colonne est dimensionnée POUR la liste (11.5rem), c'est
   à la liste de s'y tenir. */
.dkm-gestionnaire__select-livreur {
	min-height: 32px; width: 100%;
	font-size: var(--type-micro); padding: 0 var(--space-2);
}
.dkm-gestionnaire__sans-livreur,
.dkm-gestionnaire__livreur-fige { display: block; font-size: var(--type-micro); color: var(--ink-3); }
.dkm-gestionnaire__livreur-fige { color: var(--ink-2); font-weight: 600; }

/* --- Colonne « Actions » — celle qui a été poussée hors de l'écran ---
   🔴 Elle n'avait aucune protection : en `table-layout: auto`, dernière servie,
   elle absorbait tout le déficit de largeur des sept autres. Elle a maintenant
   sa largeur déclarée (16rem = 256 px), calculée sur le PIRE cas réel :
   « En cours de livraison » (~182 px avec son icône et ses marges) + « Bon »
   (~67 px) + l'écart de 8 px. C'est la seule colonne dimensionnée sur son
   contenu maximal plutôt que sur son contenu courant — parce que c'est la
   seule dont un débordement rend une action IMPOSSIBLE plutôt qu'illisible.

   📌 L'ordre de sacrifice reste explicite si le cas se présentait quand même :
   le libellé du bouton d'avancement cède, jamais les icônes, jamais « Bon ».
   Le `title` porte le libellé complet. */
.dkm-gestionnaire__actions {
	display: flex; gap: var(--space-2); flex-wrap: nowrap;
	white-space: nowrap; min-width: 0;
}
.dkm-gestionnaire__actions .btn { min-width: 0; overflow: hidden; }
/* Les icônes ne se compriment jamais : une icône écrasée devient illisible
   bien avant qu'un mot tronqué ne le devienne. */
.dkm-gestionnaire__actions .btn svg { flex-shrink: 0; }

/* Bouton d'avancement pendant l'écriture. L'opacité seule ne disait pas
   grand-chose ; le contour reprend celui de la ligne en attente, pour que le
   bouton et sa ligne racontent la même chose. */
.dkm-gestionnaire__bouton-statut.est-en-cours { cursor: progress; opacity: 0.75; }

.dkm-gestionnaire__aucun-resultat {
	margin: 0; padding: var(--space-6) var(--space-4);
	text-align: center; color: var(--ink-3); font-size: var(--type-small);
	background: var(--surface-raised);
}

/* ============================================================
   PASTILLES DE STATUT — la règle de couleur de l'écran
   ============================================================
   🔴 UNE TEINTE = UNE CHOSE. Avant refonte, le bleu portait CINQ
   significations sur le même écran : « en préparation », « à livrer » (mode
   de remise), « c'est un lien », « ma souris est là » et « filtre actif ».
   Rien ne pouvait s'« alterner » correctement dans ces conditions : ce
   n'était pas un problème de teintes, c'était l'absence de règle
   d'attribution.

   La couleur est désormais réservée à L'ÉTAT D'UNE COMMANDE, et à rien
   d'autre :

     gris   → en attente        rien à faire encore
     bleu   → préparation/prête l'atelier travaille
     ambre  → en livraison      c'est parti
     vert   → terminée/réglé    clos, rien à faire
     rouge  → anomalie          annulée, échouée, manque bloquant, refus

   📌 Aucune valeur de la palette globale n'est modifiée : les cinq paires
   passaient déjà AA (4.70 à 6.43). Le défaut n'a jamais été dans les
   teintes, il était dans leur attribution. */
.dkm-badge-statut {
	display: inline-flex; align-items: center; gap: var(--space-1);
	max-width: 100%;
	padding: 3px var(--space-2); border-radius: var(--r-sm);
	font-size: var(--type-micro); font-weight: 700; white-space: nowrap;
	/* Garde-fou : « En cours de livraison » est le libellé le plus long et
	   occupe presque toute la colonne. Sans `max-width`, il la débordait.
	   ⚠️ Pas d'`text-overflow: ellipsis` ici : la pastille est un conteneur
	   flex, et `text-overflow` ne s'applique pas aux éléments flex. Ce serait
	   une règle sans effet, donc un commentaire mensonger dans six mois. La
	   colonne est dimensionnée pour que le cas ne se produise pas ; ceci n'est
	   qu'un filet de sécurité. */
	overflow: hidden;
}
/* Le point rend le statut lisible SANS la couleur — impression en noir et
   blanc, daltonisme, écran fatigué de fin de journée. La teinte seule ne
   suffit jamais à porter une information. */
.dkm-badge-statut::before {
	content: ''; width: 6px; height: 6px; border-radius: var(--r-pill);
	background: currentColor; flex-shrink: 0;
}
.dkm-badge-statut--est-attente { background: var(--surface-sunken); color: var(--ink-3); }
.dkm-badge-statut--est-preparation { background: var(--blue-soft); color: var(--blue); }
.dkm-badge-statut--est-livraison { background: var(--warn-soft); color: var(--warn); }
.dkm-badge-statut--est-terminee { background: var(--ok-soft); color: var(--ok); }
.dkm-badge-statut--est-annulee { background: var(--red-soft); color: var(--red-ink); }

/* La pastille garde sa forme sur une ligne survolée ou sélectionnée : le
   contour reprend le travail que le fond ne peut plus faire seul. */
.dkm-gestionnaire__table tbody tr:hover .dkm-badge-statut,
.dkm-gestionnaire__table tbody tr.est-selectionnee .dkm-badge-statut {
	box-shadow: inset 0 0 0 1px currentColor;
}

/* --- Bon de préparation imprimable ---
   Toujours présent dans le DOM (accessible au clic « Bon »), mais rejeté
   hors écran tant qu'on ne demande pas l'impression — pas de display:none,
   qui empêcherait aussi son impression le moment venu. */
@media screen {
	.dkm-bons-impression,
	.dkm-tournees-impression,
	.dkm-preparation-impression {
		position: absolute; width: 1px; height: 1px; overflow: hidden; left: -9999px; top: auto;
	}
}

/* En-tête d'identité du bon.
   🔴 Le bon est le seul objet physique que le client garde. Sans le nom,
   l'adresse et le téléphone de la boutique, il n'a aucun moyen de rappeler,
   et rien ne prouve d'où vient le papier. */
.dkm-bon-impression__bandeau {
	display: flex; justify-content: space-between; align-items: flex-start;
	gap: 20px; padding-bottom: 8px; margin-bottom: 12px;
	border-bottom: 2px solid #000;
}
.dkm-bon-impression__marque { font-size: 16px; font-weight: 700; margin: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.dkm-bon-impression__coordonnees { font-size: 11px; color: #333; margin: 2px 0 0; }
.dkm-bon-impression__identite { text-align: right; flex-shrink: 0; }
.dkm-bon-impression__entete { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #555; margin: 0 0 2px; }
.dkm-bon-impression__numero { font-size: 20px; margin: 0; }

.dkm-bon-impression__meta { margin: 0 0 16px; font-size: 13px; }
.dkm-bon-impression__meta div { display: flex; gap: 6px; margin-bottom: 4px; }
.dkm-bon-impression__meta dt { font-weight: 700; min-width: 70px; }
.dkm-bon-impression__meta dd { margin: 0; }
.dkm-bon-impression__lignes { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 10px; }
.dkm-bon-impression__lignes th,
.dkm-bon-impression__lignes td { border: 1px solid #999; padding: 6px 8px; text-align: left; }

/* Ventilation articles / livraison. Le total inclut les frais ; sans cette
   ligne, le client qui additionne les articles ne retrouve pas le montant
   qu'on lui réclame — et la discussion se tient sur le pas de la porte. */
.dkm-bon-impression__totaux { margin: 0; font-size: 13px; }
.dkm-bon-impression__totaux div { display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 2px; }
.dkm-bon-impression__totaux dt { color: #333; }
.dkm-bon-impression__totaux dd { margin: 0; min-width: 90px; text-align: right; }
.dkm-bon-impression__total { font-weight: 700; font-size: 15px; }

/* 🔴 Montant à encaisser — encadré, isolé, nettement plus gros que le total.
   Les deux montants se disputaient l'œil à deux points d'écart (15px contre
   17px). Un livreur qui lit ce bon en marchant doit voir UN chiffre. */
.dkm-bon-impression__encaissement {
	margin-top: 12px;
	padding: 10px 12px;
	border: 3px solid #000;
	text-align: center;
}
.dkm-bon-impression__encaissement-libelle {
	display: block; font-size: 11px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.12em;
}
.dkm-bon-impression__encaissement-montant { display: block; font-size: 30px; font-weight: 700; line-height: 1.15; }

/* Rien à collecter : le cadre s'efface. Un encadré épais sur « déjà réglé »
   attirerait l'œil exactement comme une somme à réclamer. */
.dkm-bon-impression__encaissement.est-regle { border: 1px dashed #666; padding: 6px 10px; }

.dkm-bon-impression__signatures {
	margin-top: 18px;
	display: flex;
	gap: 20px;
	font-size: 12px;
}
.dkm-bon-impression__signature-bloc { flex: 1; }
.dkm-bon-impression__signature-bloc .dkm-bon-impression__champ-libelle { margin-bottom: 4px; }

/* Case de signature client (Lot C3) — un vrai espace à signer, pas une
   ligne de texte : c'est elle qui vaut accusé de réception ou de
   retrait, donc elle doit avoir la place d'une signature manuscrite. */
.dkm-bon-impression__case-signature { border: 1px solid #000; min-height: 56px; }

/* Champs remplis à l'écran avant impression. */
.dkm-bon-impression__saisie { margin-top: 14px; }
.dkm-bon-impression__champ-libelle { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.dkm-bon-impression__champ {
	min-height: 34px;
	padding: 4px 6px;
	border-bottom: 1px dotted #000;
	outline: none;
}
.dkm-bon-impression__champ--ligne { display: inline-block; min-width: 160px; min-height: 0; }
/* Consigne affichée tant que le champ est vide — elle ne s'imprime pas,
   puisqu'un champ laissé vide n'a rien à dire sur le papier. */
.dkm-bon-impression__champ:empty::before {
	content: attr(data-dkm-placeholder);
	color: var(--ink-3);
	font-style: italic;
}

/* --- Feuille de tournée imprimable (Lot C1, Sprint Lancement) ---
   Même famille visuelle que le bon de livraison ci-dessus : en-tête
   discret, tableau bordé, rien de plus que ce qu'un livreur lit en
   marchant. */
.dkm-tournee-impression__entete { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #555; margin: 0 0 4px; }
.dkm-tournee-impression__livreur { font-size: 20px; margin: 0 0 4px; }
.dkm-tournee-impression__date { font-size: 12px; color: #555; margin: 0 0 16px; }
.dkm-tournee-impression__table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dkm-tournee-impression__table th,
.dkm-tournee-impression__table td { border: 1px solid #999; padding: 6px 8px; text-align: left; vertical-align: top; }

/* Case à cocher au stylo + ligne de signature — un livreur en course ne
   remplit pas un formulaire, il coche et paraphe. */
.dkm-tournee-impression__remise { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.dkm-tournee-impression__case { width: 14px; height: 14px; border: 1px solid #000; flex-shrink: 0; }
.dkm-tournee-impression__signature { flex: 1; min-width: 60px; border-bottom: 1px solid #000; height: 14px; }

/* --- Liste de préparation imprimable (Lot C2, Sprint Lancement) ---
   Une ligne par article : plus dense que le bon ou la tournée, colonne
   de case à cocher étroite en tête pour cocher au comptoir en avançant
   dans la liste. */
.dkm-liste-preparation__entete { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #555; margin: 0 0 4px; }
.dkm-liste-preparation__date { font-size: 12px; color: #555; margin: 0 0 16px; }
.dkm-liste-preparation__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dkm-liste-preparation__table th,
.dkm-liste-preparation__table td { border: 1px solid #999; padding: 6px 8px; text-align: left; vertical-align: middle; }
.dkm-liste-preparation__col-case { width: 28px; text-align: center; }
.dkm-liste-preparation__case { display: inline-block; width: 14px; height: 14px; border: 1px solid #000; }

/* ============================================================
   IMPRESSION — le support physique du livreur
   ============================================================
   Au moment d'imprimer : tout disparaît sauf le ou les documents actifs
   (`visibility`, pas `display` — la mise en page invisible du reste ne gêne
   pas l'impression). Ni entête ni pied du site, ni barre de commande, ni
   tableau, ni filtres : uniquement le document. */

/* 🔴 Format et marges déclarés, plutôt que subis.
   Sans règle `@page`, les marges sont celles du navigateur : réglables par
   l'utilisateur, différentes d'un poste à l'autre — sur un document qu'on
   imprime cinquante fois par jour. 14 mm laisse la place d'une perforation
   sans rogner le cadre du montant. */
@page {
	size: A4;
	margin: 14mm;
}

@media print {
	body * { visibility: hidden; }

	/* 📌 Garde-fou de spécificité, posé d'avance cette fois : le JavaScript
	   masque par `hidden` les lignes de la liste de préparation hors du
	   choix courant. Aucune règle d'auteur ne pose de `display` sur ces
	   `<tr>` aujourd'hui — mais c'est exactement ce qu'on croyait des trois
	   éléments où le piège a déjà mordu. */
	.dkm-liste-preparation__table tr[hidden] { display: none; }

	/* 📌 Les rares aplats de ces documents (le cadre du montant, les cases à
	   cocher, les filets de tableau) portent de l'information. Sans cette
	   règle, ils dépendent de l'option « imprimer les couleurs d'arrière-plan »
	   du navigateur, décochée par défaut : le cadre de 3 px autour du montant
	   à encaisser disparaissait sur la moitié des postes. */
	.dkm-bon-impression-actif,
	.dkm-bon-impression-actif *,
	.dkm-tournee-impression-actif,
	.dkm-tournee-impression-actif *,
	.dkm-liste-preparation-actif,
	.dkm-liste-preparation-actif * {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* Un en-tête de tableau qui se répète en haut de chaque page : sur une
	   liste de préparation de deux pages, la seconde n'avait plus de titres
	   de colonnes. */
	.dkm-tournee-impression__table thead,
	.dkm-liste-preparation__table thead { display: table-header-group; }
	.dkm-tournee-impression__table tr,
	.dkm-liste-preparation__table tr,
	.dkm-bon-impression__lignes tr { page-break-inside: avoid; break-inside: avoid; }

	/*
	 * 🔴 Réécrit le 18/08 pour l'impression groupée.
	 *
	 * L'ancienne règle posait `position: fixed; inset: 0` sur le bon actif.
	 * Avec un seul bon, c'était juste. Avec plusieurs, ils se seraient
	 * superposés au même endroit — une seule page imprimée, les autres
	 * perdues, sans que rien ne l'indique à l'écran.
	 *
	 * Ici : les bons non sélectionnés sortent du flux (`display: none`),
	 * les autres s'enchaînent avec un saut de page.
	 */
	.dkm-bons-impression { position: absolute; top: 0; left: 0; width: 100%; }

	.dkm-bon-impression { display: none; }

	.dkm-bon-impression-actif,
	.dkm-bon-impression-actif * { visibility: visible; }

	/* Le rembourrage de 24 px a disparu : c'était un rembourrage d'écran posé
	   À L'INTÉRIEUR d'une page dont les marges étaient déjà inconnues. Les
	   marges sont maintenant celles de `@page`, en millimètres. */
	.dkm-bon-impression-actif {
		display: block;
		page-break-after: always;
		break-after: page;
	}

	/* Sans cette exception, le dernier bon produit une page blanche. */
	.dkm-bon-impression-actif.est-dernier {
		page-break-after: auto;
		break-after: auto;
	}

	/* Les pointillés guident la saisie à l'écran ; sur le papier, une ligne
	   pleine se remplit mieux au stylo. */
	.dkm-bon-impression__champ { border-bottom: 1px solid #000; }
	.dkm-bon-impression__champ:empty::before { content: ''; }

	/*
	 * 🔴 CORRIGÉ LE 24/08 — la feuille de tournée perdait ce qui dépassait.
	 *
	 * Elle posait `position: fixed; inset: 0`, au motif qu'une seule feuille
	 * s'imprime à la fois et qu'il n'y avait donc « pas de saut de page à
	 * gérer ». Le raisonnement tenait sur le nombre de documents, pas sur
	 * leur longueur : un élément en position fixe ne pagine pas, et TOUT CE
	 * QUI DÉPASSE D'UNE PAGE EST PERDU, sans le moindre avertissement.
	 *
	 * À dix courses ça passait. Le jour où ça ne passerait plus, personne ne
	 * l'aurait su — et c'est le document que le livreur emporte, la seule
	 * trace de ce qu'il doit encaisser.
	 *
	 * Même technique que les bons : hors du flux quand inactif, dans le flux
	 * normal quand actif, donc paginé par le navigateur.
	 */
	.dkm-tournees-impression,
	.dkm-preparation-impression { position: absolute; top: 0; left: 0; width: 100%; }

	.dkm-tournee-impression { display: none; }

	.dkm-tournee-impression-actif,
	.dkm-tournee-impression-actif * { visibility: visible; }

	.dkm-tournee-impression-actif { display: block; }

	/* Liste de préparation — même correctif, même motif. */
	.dkm-liste-preparation { display: none; }

	.dkm-liste-preparation-actif,
	.dkm-liste-preparation-actif * { visibility: visible; }

	.dkm-liste-preparation-actif { display: block; }
}

/* Afficher / masquer les mots de passe — voir decorerMotsDePasse() dans
   main.js. L'enveloppe est posée par JavaScript autour de chaque champ. */
.dkm-mdp { position: relative; display: block; }
.dkm-mdp .field { padding-right: 2.75rem; }
.dkm-mdp__bascule {
	position: absolute;
	top: 50%;
	right: var(--space-2);
	transform: translateY(-50%);
	background: none;
	border: 0;
	padding: 4px;
	line-height: 0;
	color: var(--ink-3);
	cursor: pointer;
}
.dkm-mdp__bascule:hover,
.dkm-mdp__bascule:focus-visible { color: var(--ink); }

/* Boutons d'avancement — la couleur annonce l'étape VISÉE, pas l'étape
   actuelle. Un gestionnaire qui traite trente commandes lit la couleur avant
   le texte : elle doit dire où il va, pas où il est.

   📌 Ce sont les MÊMES teintes que les pastilles de statut, en aplat plein :
   le bouton « En livraison » porte l'ambre que la pastille prendra une fois
   le clic passé. C'est ce qui fait qu'on apprend le code une seule fois. */
.dkm-bouton-statut--est-preparation { background: var(--blue); color: var(--blue-on); }
.dkm-bouton-statut--est-preparation:hover:not(:disabled) { background: var(--blue-deep); }
.dkm-bouton-statut--est-livraison { background: var(--warn); color: #FFFFFF; }
.dkm-bouton-statut--est-livraison:hover:not(:disabled) { filter: brightness(0.92); }
.dkm-bouton-statut--est-terminee { background: var(--ok); color: #FFFFFF; }
.dkm-bouton-statut--est-terminee:hover:not(:disabled) { background: #0B5E37; }
/* ⚠️ Était en `--dark` (bleu nuit). C'était le dernier emploi du bleu nuit
   comme couleur d'action, alors que la famille « en attente » est grise sur
   la pastille : le bouton et la pastille se contredisaient. Le neutre fort
   est la version « bouton » du gris — même famille, assez de poids pour une
   action principale. */
.dkm-bouton-statut--est-attente { background: var(--ink); color: #FFFFFF; }
.dkm-bouton-statut--est-attente:hover:not(:disabled) { background: var(--ink-2); }