:root {
  --dr-bg:        #f4f5f7;
  --dr-surface:   #ffffff;
  --dr-surface-2: #eef0f3;
  --dr-border:    #d5d9e0;
  --dr-text:      #1c2430;
  --dr-text-dim:  #61708a;
  --dr-accent:    #2f6fed;
  --dr-accent-fg: #ffffff;
  --dr-hover:     #e8eefc;
  --dr-danger:    #c0392b;
  --dr-ok:        #2e7d46;
  --dr-radius:    7px;
  --dr-mono:      ui-monospace, "SF Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --dr-sans:      system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --badge-shadow:       0 1px 2px rgba(0, 0, 0, .32), 0 3px 8px -2px rgba(0, 0, 0, .24);
  --badge-shadow-hover: 0 1px 3px rgba(0, 0, 0, .40), 0 5px 14px -3px rgba(0, 0, 0, .32);

  /* Liseret du jour courant dans le calendrier : inverse du thème (noir sur
     fond clair, blanc sur fond sombre) pour rester visible quel que soit
     l'accent ou un fond d'écran personnalisé derrière. */
  --dr-invert: #000000;
  /* Contour des cases du calendrier : --dr-border est trop clair sur fond
     blanc en thème clair (peu lisible) — plus foncé ici, sans toucher aux
     autres bordures de l'appli. */
  --dr-cal-border: #a9b0bd;
  /* Liseret de contraste autour du cadre de la semaine courante (--dr-invert) :
     l'inverse de --dr-invert, pour que le cadre ressorte quel que soit le
     fond derrière (photo, thème clair ou sombre). */
  --dr-invert-contrast: #ffffff;
}
html[data-theme="dark"] {
  --dr-bg:        #141821;
  --dr-surface:   #1c222d;
  --dr-surface-2: #232b39;
  --dr-border:    #313b4d;
  --dr-text:      #dfe6f0;
  --dr-text-dim:  #8a97ac;
  --dr-accent:    #4c8dff;
  --dr-accent-fg: #0d1117;
  --dr-hover:     #1e2636;
  --dr-danger:    #e06c5e;
  --dr-ok:        #6cc487;

  --badge-shadow:       0 1px 2px rgba(255, 255, 255, .28), 0 3px 9px -2px rgba(255, 255, 255, .18);
  --badge-shadow-hover: 0 1px 3px rgba(255, 255, 255, .40), 0 5px 15px -3px rgba(255, 255, 255, .26);

  --dr-invert: #ffffff;
  --dr-cal-border: var(--dr-border);
  --dr-invert-contrast: #000000;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font: 14px/1.5 var(--dr-sans);
  color: var(--dr-text);
  background: var(--dr-bg);
}
button { font: inherit; }

/* --- écran de connexion --- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 340px;
  background: var(--dr-surface);
  border: 1px solid var(--dr-border);
  border-radius: 10px;
  padding: 22px 24px 26px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.login-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.login-card h1 { font-size: 18px; margin: 6px 0 2px; display: flex; align-items: center; gap: 8px; }
.login-card .logo { display: inline-flex; }
.login-card .sub { color: var(--dr-text-dim); font-size: 12.5px; margin: 0 0 16px; }
.login-card label, .dr-dialog form label { display: block; font-size: 12.5px; color: var(--dr-text-dim); margin: 12px 0 5px; }
.login-card input, .dr-dialog form input[type="text"], .dr-dialog form input[type="password"], .dr-dialog form input[type="email"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--dr-border);
  border-radius: 6px;
  background: var(--dr-surface-2);
  color: var(--dr-text);
  font: inherit;
}
.login-card button[type="submit"], .dr-dialog form button[type="submit"] {
  width: 100%;
  margin-top: 16px;
  padding: 9px;
  border: 0;
  border-radius: 6px;
  background: var(--dr-accent);
  color: var(--dr-accent-fg);
  font-weight: 600;
  cursor: pointer;
}
.login-card .err, .dr-dialog form .err { color: var(--dr-danger); font-size: 12.5px; margin: 10px 0 0; }

/* --- afficher/masquer le mot de passe --- */
.pw-field { position: relative; display: block; }
.pw-field input { padding-right: 38px; }
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--dr-text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 5px;
}
.pw-toggle:hover { background: var(--dr-hover); color: var(--dr-text); }
.pw-toggle .pw-eye-closed { display: none; }
.pw-toggle[aria-pressed="true"] .pw-eye-open { display: none; }
.pw-toggle[aria-pressed="true"] .pw-eye-closed { display: inline; }

/* --- connexion par empreinte digitale (WebAuthn) --- */
.webauthn-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: var(--dr-text-dim);
  font-size: 12px;
}
.webauthn-divider::before, .webauthn-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--dr-border);
}
.webauthn-login-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--dr-border);
  background: var(--dr-surface-2);
  color: var(--dr-text);
  padding: 9px 14px;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.webauthn-login-btn:hover { background: var(--dr-hover); }

#webauthn-cred-list { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
#webauthn-cred-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--dr-border);
}
#webauthn-cred-list li:last-child { border-bottom: none; }
#webauthn-cred-list .wa-cred-meta { color: var(--dr-text-dim); font-size: 11.5px; }
#webauthn-cred-list .wa-cred-del {
  border: none;
  background: transparent;
  color: var(--dr-danger);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
}

.btn-ghost {
  border: 1px solid var(--dr-border);
  background: var(--dr-surface);
  color: var(--dr-text);
  border-radius: 6px;
  padding: 6px 11px;
  cursor: pointer;
}
.btn-ghost:hover { background: var(--dr-hover); }
.btn-logout {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-logout svg { display: block; width: 20px; height: 20px; }
.btn-theme {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  overflow: hidden;
}
/* --- macaron de version + infobulle --- */
.version-badge-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.version-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--dr-border);
  background: var(--dr-surface);
  box-shadow: var(--badge-shadow);
  cursor: pointer;
  padding: 0;
}
.version-badge img { display: block; }
.version-badge:hover { box-shadow: var(--badge-shadow-hover); }
.version-badge:active { transform: translateY(0); box-shadow: var(--badge-shadow); }

.version-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 190px;
  background: var(--dr-surface);
  border: 1px solid var(--dr-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  padding: 9px 12px;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .12s, transform .12s;
  z-index: 50;
}
.version-tooltip--right { left: auto; right: 0; }
.version-badge-wrap:hover .version-tooltip,
.version-badge-wrap:focus-within .version-tooltip {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.version-tooltip-title { font-weight: 700; font-size: 12.5px; display: block; }
.version-tooltip-ver { color: var(--dr-accent); font-weight: 600; display: block; }
.version-tooltip-theme { color: var(--dr-text-dim); display: block; }
.version-tooltip-hint { margin-top: 3px; font-size: 10px; color: var(--dr-text-dim); display: block; }

/* --- app (après connexion) --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--dr-surface);
  border-bottom: 1px solid var(--dr-border);
}
.topbar .spacer { flex: 1; }
.placeholder {
  max-width: 720px;
  margin: 40px auto;
  padding: 0 20px;
  color: var(--dr-text-dim);
}
.placeholder h2 { color: var(--dr-text); }

/* --- calendrier ---
   Toujours empilé : la liste des membres forme une barre pleine largeur
   entre la barre du haut et le calendrier, qui occupe lui-même toute la
   largeur de l'écran (pas de grille à deux colonnes, même sur grand écran). */
.cal-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px 40px;
}
/* --- liste des membres, dans la barre du haut (encadrés compacts) --- */
.member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.member-list--topbar { flex: 0 1 auto; }
.member-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--dr-border);
  border-radius: 20px;
  background: var(--dr-surface-2);
  font-size: 12.5px;
}
.member-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.member-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.member-role-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--dr-surface);
  color: var(--dr-text-dim);
  flex: 0 0 auto;
}
.member-role-badge--admin { color: var(--dr-accent); }

/* --- prochaine échéance (entre la barre des membres et le calendrier) --- */
.next-slot-card {
  background: var(--dr-surface);
  border: 1px solid var(--dr-border);
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.next-slot-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--dr-text-dim);
  flex: 0 0 auto;
}
.next-slot-body { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 24px; flex: 1 1 auto; }
.next-slot-date { font-weight: 600; flex: 0 0 auto; }
.next-slot-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.next-slot-label { color: var(--dr-text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.next-slot-empty, .next-slot-name--mine {
  border: 1px dashed var(--dr-border);
  background: var(--dr-surface-2);
  color: var(--dr-text);
  border-radius: 20px;
  padding: 4px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.next-slot-empty { color: var(--dr-text-dim); font-weight: 700; }
.next-slot-empty:hover { background: var(--dr-hover); color: var(--dr-text); }
.next-slot-name--mine { border-style: solid; border-color: var(--dr-ok); color: var(--dr-ok); font-weight: 600; }
.next-slot-name--mine:hover { background: var(--dr-hover); }
.next-slot-name { font-weight: 600; }
.next-slot-empty-note { color: var(--dr-text-dim); font-weight: 700; }

.cal-main { flex: 1; min-width: 0; }
.cal-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cal-title { font-weight: 700; font-size: 16px; min-width: 160px; text-align: center; }
.cal-weekdays {
  display: grid;
  grid-template-columns: 22px repeat(7, 1fr);
  font-size: 11px;
  color: var(--dr-text-dim);
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 0 2px 6px;
}
.cal-weekdays span { text-align: center; }
.cal-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-week {
  position: relative;
  display: grid;
  grid-template-columns: 22px repeat(7, 1fr);
  gap: 6px;
}
.cal-week-num {
  align-self: start;
  justify-self: center;
  margin-top: 6px;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  /* Badge inverse du thème : fond noir/texte blanc en clair, fond
     blanc/texte noir en sombre — reste lisible dans les deux thèmes, y
     compris sur un fond d'écran personnalisé. */
  background: var(--dr-invert);
  color: var(--dr-invert-contrast);
}
/* Semaine courante mise en évidence par un cadre continu (sans toucher à la
   transparence de ses cases), les autres semaines étant rendues plus
   transparentes sur un fond d'écran personnalisé. */
.cal-week--current::before {
  content: '';
  position: absolute;
  inset: -1px -4px;
  border-radius: 11px;
  pointer-events: none;
  /* Cadre à deux liserets : la couleur inverse du thème, puis son opposé
     autour, pour rester visible sur n'importe quel fond (photo, clair, sombre). */
  box-shadow: 0 0 0 2px var(--dr-invert), 0 0 0 4px var(--dr-invert-contrast);
}
@supports (background: color-mix(in srgb, red 50%, blue)) {
  body.dr-has-bg .cal-week:not(.cal-week--current) .cal-day {
    background-color: color-mix(in srgb, var(--dr-surface) 68%, transparent);
  }
}
/* En thème sombre, +20% d'opacité sur les cases du calendrier avec fond
   d'écran perso : le fond sombre + la photo en transparence rendait les
   jours trop peu lisibles par rapport au thème clair. */
@supports (background: color-mix(in srgb, red 50%, blue)) {
  html[data-theme="dark"] body.dr-has-bg .cal-day {
    background-color: color-mix(in srgb, var(--dr-surface) 100%, transparent);
  }
  html[data-theme="dark"] body.dr-has-bg .cal-week:not(.cal-week--current) .cal-day {
    background-color: color-mix(in srgb, var(--dr-surface) 88%, transparent);
  }
}
/* Jours à venir (aujourd'hui compris) : +30% d'opacité par rapport aux
   autres cases, pour rester bien visibles/actionnables sur un fond d'écran
   personnalisé — l'emporte sur les règles de transparence ci-dessus. */
body.dr-has-bg .cal-week .cal-day.cal-day--future {
  background-color: var(--dr-surface);
}
.cal-day {
  min-height: 84px;
  background: var(--dr-surface);
  border: 1px solid var(--dr-cal-border);
  border-radius: 7px;
  padding: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  font: inherit;
  color: var(--dr-text);
}
.cal-day:hover { background: var(--dr-hover); }
.cal-day.is-outside { opacity: .35; }
/* Contour à deux tons (comme le cadre de la semaine) : un seul ton peut se
   fondre dans une zone de même couleur sur un fond d'écran personnalisé —
   les deux ensemble restent visibles quelle que soit la photo dessous. */
.cal-day.is-today {
  border: 2px solid var(--dr-invert);
  box-shadow: 0 0 0 1px var(--dr-accent) inset, 0 0 0 2px var(--dr-invert-contrast);
}
/* Saisie possible uniquement mercredi/vendredi — les autres jours sont
   grisés (niveau de gris) et non cliquables (attribut disabled natif). */
.cal-day.is-disallowed { filter: grayscale(1); opacity: .5; cursor: not-allowed; }
/* En thème sombre, l'opacité réduite ci-dessus laisse trop transparaître un
   fond d'écran perso derrière les jours non saisissables (lun/mar/jeu/sam/dim) —
   moins de transparence pour rester lisible. */
html[data-theme="dark"] .cal-day.is-disallowed { opacity: .78; }
.cal-day-num { font-size: 12px; font-weight: 600; color: var(--dr-text-dim); }
.cal-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--dr-surface-2);
  overflow: hidden;
}
.cal-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Le nom doit pouvoir rétrécir/tronquer en priorité pour que les icônes de
   fin de ligne (backup, main éditable, coche) ne soient jamais coupées par
   le overflow:hidden du chip sur une case étroite. */
.cal-chip-name { flex: 1 1 auto; min-width: 0; }
.cal-chip-dot, .cal-backup-icon, .cal-chip-editable, .cal-chip-check { flex: 0 0 auto; }
.cal-chip--backup { opacity: .75; }
/* Réserve la ligne du principal quand seul le backup est affecté, pour que
   le backup reste toujours affiché sur sa propre ligne. */
.cal-chip--placeholder { visibility: hidden; }
/* Jour passé : coche verte sur la personne ayant réellement fait le trajet,
   grisé sur l'autre (principal ou backup, selon le cas). */
.cal-chip--actual { opacity: 1; background: var(--dr-surface-2); }
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .cal-chip--actual { background: color-mix(in srgb, var(--dr-ok) 16%, var(--dr-surface-2)); }
}
.cal-chip--not-actual { opacity: .45; filter: grayscale(1); }
.cal-chip-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--dr-ok);
  color: #fff;
  flex: 0 0 auto;
}
.cal-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.cal-chip-editable { display: inline-flex; align-items: center; justify-content: center; color: var(--dr-text-dim); opacity: .6; flex: 0 0 auto; }
.cal-backup-icon { display: inline-block; opacity: .55; flex: 0 0 auto; vertical-align: middle; }
.day-slot-label .cal-backup-icon { margin-right: 3px; }
.next-slot-name .cal-backup-icon, .next-slot-name--mine .cal-backup-icon { margin-left: 4px; }

/* --- dialogues jour / gestion des membres --- */
.day-dialog-title { margin: 0 0 4px; font-size: 16px; }
.day-slot { margin-top: 14px; }
.day-slot-label { font-size: 12px; color: var(--dr-text-dim); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 5px; }
.day-slot select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--dr-border);
  border-radius: 6px;
  background: var(--dr-surface-2);
  color: var(--dr-text);
  font: inherit;
}
.day-slot-current { font-size: 13.5px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.day-slot-current .btn-ghost { font-size: 12px; padding: 5px 9px; }

/* --- échanger principal / backup (fenêtre du jour) --- */
.day-swap-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 6px;
  border: 1px dashed var(--dr-border);
  border-radius: 6px;
  background: var(--dr-surface-2);
  color: var(--dr-text-dim);
  cursor: pointer;
}
.day-swap-btn:hover { background: var(--dr-hover); color: var(--dr-text); }
.day-empty-note { color: var(--dr-text-dim); font-size: 12.5px; }

/* --- "Trajet réalisé par" (jour passé) --- */
.actual-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.actual-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--dr-border);
  background: var(--dr-surface-2);
  color: var(--dr-text);
  padding: 6px 10px;
  border-radius: 20px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.actual-btn:hover:not([disabled]) { background: var(--dr-hover); }
.actual-btn[disabled] { opacity: .5; cursor: not-allowed; }
.actual-btn.active { border-color: var(--dr-ok); color: var(--dr-ok); font-weight: 600; }
.actual-btn.active svg { color: var(--dr-ok); }
.actual-reset { color: var(--dr-text-dim); border-style: dashed; }

.members-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--dr-border);
  flex-wrap: wrap;
}
.members-row:last-child { border-bottom: none; }
.members-row-name { flex: 1 1 140px; min-width: 0; }
.members-row-name input {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid var(--dr-border);
  border-radius: 5px;
  background: var(--dr-surface-2);
  color: var(--dr-text);
  font: inherit;
  font-size: 13px;
}
.members-row select {
  padding: 5px 7px;
  border: 1px solid var(--dr-border);
  border-radius: 5px;
  background: var(--dr-surface-2);
  color: var(--dr-text);
  font: inherit;
  font-size: 12.5px;
}
.members-row .btn-ghost { font-size: 12px; padding: 5px 9px; }
.members-row-superadmin { color: var(--dr-text-dim); font-size: 12px; font-style: italic; }

/* --- profil (photo + alias) --- */
.btn-profile {
  height: auto;
  min-height: 34px;
  padding: 3px 8px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1;
}
.btn-profile svg { display: block; flex: 0 0 auto; }
.btn-profile-name {
  font-size: 9px;
  font-weight: 600;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-avatar-row { display: flex; align-items: center; gap: 16px; }
.profile-avatar-preview {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  background: var(--dr-surface-2);
}
.profile-avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar-actions { display: flex; flex-direction: column; gap: 6px; }
.profile-avatar-upload-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-align: center; }
#profile-name-form button[type="submit"] { width: auto; padding: 7px 12px; }

/* --- catégorie conducteur / membre (profil) --- */
.profile-category-row { display: flex; gap: 8px; }
.profile-category-btn {
  flex: 1 1 auto;
  padding: 8px;
  border: 1px solid var(--dr-border);
  border-radius: 6px;
  background: var(--dr-surface-2);
  color: var(--dr-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.profile-category-btn:hover { background: var(--dr-hover); }
.profile-category-btn.active { border-color: var(--dr-accent); color: var(--dr-accent); font-weight: 600; }

/* --- fond d'écran (perso + défaut super admin) --- */
.profile-bg-row { display: flex; align-items: center; gap: 16px; }
.profile-bg-preview {
  width: 90px;
  height: 56px;
  border-radius: 6px;
  flex: 0 0 auto;
  background: var(--dr-surface-2) center/cover no-repeat;
  border: 1px solid var(--dr-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dr-text-dim);
  font-size: 10px;
}
.profile-bg-actions { display: flex; flex-direction: column; gap: 6px; }

/* --- fond d'écran appliqué à l'application (perso, sinon défaut) --- */
body.dr-has-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@supports (background: color-mix(in srgb, red 50%, blue)) {
  body.dr-has-bg .topbar,
  body.dr-has-bg .next-slot-card,
  body.dr-has-bg .cal-day,
  body.dr-has-bg .cal-weekdays,
  body.dr-has-bg .cal-toolbar {
    background-color: color-mix(in srgb, var(--dr-surface) 88%, transparent);
  }
}
body.dr-has-bg .cal-toolbar {
  padding: 8px 10px;
  border-radius: 8px;
}

.mn-dialog, .dr-dialog {
  border: 1px solid var(--dr-border);
  background: var(--dr-surface);
  color: var(--dr-text);
}
.mn-dialog-close, .dr-dialog-close {
  position: absolute;
  top: 6px;
  right: 10px;
  border: none;
  background: transparent;
  color: var(--dr-text-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

dialog.dr-dialog { max-height: 90vh; overflow: auto; }
dialog.dr-dialog::backdrop { background: rgba(0, 0, 0, .45); }

/* --- smartphone --- */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }

  .topbar {
    flex-wrap: wrap;
    padding: 8px 10px;
    gap: 6px;
    row-gap: 8px;
  }
  .topbar .spacer { flex-basis: 100%; height: 0; order: 1; }
  .mn-clock { order: 2; }

  .cal-layout { padding: 0 10px 30px; gap: 12px; }
  .member-list { gap: 4px; }
  .member-chip { font-size: 11px; padding: 3px 8px; }
  .next-slot-card { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 12px; }
  .next-slot-body { gap: 8px 16px; }

  .cal-toolbar { flex-wrap: wrap; row-gap: 8px; }
  .cal-title { min-width: 0; flex: 1 1 auto; font-size: 14px; }
  #cal-today { flex: 0 0 auto; font-size: 12.5px; padding: 6px 8px; }

  .cal-weekdays { font-size: 9px; padding: 0 1px 4px; grid-template-columns: 14px repeat(7, 1fr); }
  .cal-grid { gap: 3px; }
  .cal-week { gap: 3px; grid-template-columns: 14px repeat(7, 1fr); }
  .cal-week-num { font-size: 8px; margin-top: 3px; padding: 0 3px; }
  .cal-day { min-height: 52px; padding: 3px 4px; gap: 2px; border-radius: 5px; }
  .cal-day-num { font-size: 10.5px; }
  .cal-chip { font-size: 9px; padding: 1px 3px; gap: 3px; border-radius: 4px; }
  .cal-chip span { max-width: 100%; }
  .cal-chip-dot { width: 6px; height: 6px; }
  .cal-backup-icon { width: 9px; height: 9px; }

  .members-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .members-row-name { flex: 1 1 auto; }
  .members-row select, .members-row .btn-ghost { width: 100%; }

  .version-tooltip { max-width: calc(100vw - 32px); }
}

/* Sur très petits écrans, les pastilles/labels des jours passés deviennent
   trop illisibles pour tenir deux lignes de chips — on masque le texte et ne
   garde que la pastille de couleur (au clic, le détail reste dans la modale). */
@media (max-width: 420px) {
  .cal-day { min-height: 56px; padding: 2px 3px; }
  .cal-day-num { font-size: 10px; }
  .cal-chip { font-size: 8.5px; padding: 1px 2px; gap: 2px; }
  .cal-chip-dot { width: 5px; height: 5px; }
}