:root {
  --bg: #0b1220;
  --panel: #0f172a;
  --muted: #94a3b8;
  --text: #e5e7eb;
  --card: #111827;
  --border: rgba(148, 163, 184, 0.25);
  --accent: #60a5fa;
  --danger: #ef4444;

  /* Barres fixes bas d’écran (valeurs “best effort”) */
  --bottom-nav-h: 72px;
  --adbar-h: 72px;
  --actions-h: 112px;

  /* Hauteur du bandeau mobile (dock). Par défaut = nav + pub (ancien comportement). */
  --dock-h: calc(var(--bottom-nav-h) + var(--adbar-h));

  /* Configurable percents for suggested card layout (fractions, e.g. 0.25 = 25%) */
  --suggested-logo-pct: 0.25;
  --suggested-barcode-pct: 0.40;
}

/* Mobile (portrait + paysage): dock compact et priorise le code-barres */
@media (max-width: 900px) {
  :root {
    /* Le bandeau (pub + bouton) ne doit pas dépasser ~20% de hauteur */
    --dock-h: min(20vh, 88px);
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  :root {
    /* Laisser un bandeau rouge en bas en paysage */
    --suggested-barcode-bottom-gap: clamp(12px, 8vh, 88px);
  }
  :root {
    /* En paysage la hauteur utile est faible: on met le code-barres en avant */
    --suggested-logo-pct: 0.05;
    --suggested-barcode-pct: 0.90;

    /* Les actions ne doivent plus réserver une grosse zone fixe */
    --actions-h: 0px;
    /* On retire le dock pour laisser la carte en plein écran */
    --dock-h: 0px;
  }
}

/* Thème clair (Système) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f8fafc;
    --panel: #ffffff;
    --muted: #475569;
    --text: #0f172a;
    --card: #ffffff;
    --border: rgba(15, 23, 42, 0.2);
    --accent: #2563eb;
    --danger: #ef4444;
  }
}

/* Thème clair forcé */
:root[data-theme="light"] {
  --bg: #f8fafc;
  --panel: #ffffff;
  --muted: #475569;
  --text: #0f172a;
  --card: #ffffff;
  --border: rgba(15, 23, 42, 0.2);
  --accent: #2563eb;
  --danger: #ef4444;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

.topbar-actions {
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
  align-items: center;
}

.brand-link {
  text-decoration: none;
  color: inherit;
}

.brand-link:active { opacity: 0.9; }

.brand-title { font-weight: 700; font-size: 16px; line-height: 1; }
.brand-subtitle { color: var(--muted); font-size: 12px; margin-top: 2px; }

.icon-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  padding: 8px 10px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-btn-grid {
  width: 44px;
  height: 44px;
  padding: 0;
  font-weight: 800;
}

.icon-btn-round {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.25);
}

.icon {
  display: block;
}

.kofi-icon {
  width: 18px;
  height: 18px;
  display: block;
}

/* A11y/UX: focus visible + curseurs desktop */
:where(button, [role="button"], a, input, select, textarea):focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.9);
  outline-offset: 2px;
}

:where(.btn, .icon-btn, .fab, .card, .link, .file-btn) { cursor: pointer; }

.app { padding: 12px 12px calc(var(--dock-h) + var(--actions-h) + 24px); }

.view { max-width: 720px; margin: 0 auto; }
.hidden { display: none !important; }

.toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-bottom: 12px;
}
.toolbar-right {
  display: grid;
  grid-auto-flow: column;
  gap: 10px;
  align-items: center;
}
.seg {
  display: grid;
  grid-auto-flow: column;
  gap: 6px;
}
.seg-btn {
  padding: 10px 10px;
  border-radius: 10px;
  min-width: 42px;
}
@media (max-width: 520px) {
  .toolbar { grid-template-columns: 1fr; }
  .toolbar-right { grid-auto-flow: row; justify-items: stretch; }
  .seg { justify-content: space-between; }
}

.input, .textarea, select {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 12px 12px;
  border-radius: 12px;
  outline: none;
}

.textarea { resize: vertical; }

.btn {
  border: 1px solid var(--border);
  background: var(--accent);
  color: #0b1220;
  font-weight: 700;
  padding: 12px 14px;
  border-radius: 12px;
}

.btn-secondary {
  background: rgba(2, 6, 23, 0.25);
  color: var(--text);
}

.btn-danger {
  background: var(--danger);
  color: #0b1220;
  border-color: rgba(239, 68, 68, 0.5);
}

.label { display: block; margin: 14px 0 8px; color: var(--muted); font-size: 13px; }

.cards { display: grid; gap: 10px; }

/* Home grid modes */
.cards.cards-grid-1 { grid-template-columns: 1fr; }
.cards.cards-grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  border: 1px solid var(--border);
  background: var(--tile-bg, var(--card));
  color: var(--tile-fg, var(--text));
  border-radius: 14px;
}

/* Tuiles au format carte de fidélité (paysage) */
.wallet-card {
  padding: 12px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  aspect-ratio: 85.60 / 53.98;
  overflow: hidden;
}

.wallet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wallet-brand {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.wallet-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.12);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.wallet-logo {
  width: 78%;
  height: 78%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}

.wallet-letter {
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
}

.wallet-title {
  font-weight: 900;
  font-size: clamp(18px, 3.6vw, 44px);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.65),
    1px -1px 0 rgba(0,0,0,0.65),
    -1px 1px 0 rgba(0,0,0,0.65),
    1px 1px 0 rgba(0,0,0,0.65),
    0 6px 14px rgba(0,0,0,0.35);
}

/* Responsive title sizing per grid mode */
.cards.cards-grid-1 .wallet-title { font-size: clamp(20px, 4.6vw, 48px); }
.cards.cards-grid-2 .wallet-title { font-size: clamp(16px, 3.4vw, 32px); }

.wallet-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.tile-code-slot {
  width: clamp(220px, 78%, 520px);
  background: #ffffff;
  border-radius: 12px;
  padding: 10px 12px 8px;
  display: grid;
  justify-items: center;
  border: 1px solid rgba(17,24,39,0.35);
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}

.tile-barcode { width: 100%; height: 56px; display: block; }
.tile-qr { display: none; }

/* Suggested card: barcode height set by JS via --suggested-barcode-h */
.wallet-card.suggested-card .tile-code-slot {
  width: clamp(240px, 86%, 640px);
  height: var(--suggested-barcode-h, 140px);
  padding: 12px; /* espace autour du code-barres */
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,0.35);
  box-shadow: 0 8px 18px rgba(0,0,0,0.30);
  box-sizing: border-box;
  overflow: hidden;
}

.wallet-card.suggested-card .tile-barcode {
  height: 100%;
  width: 100%;
  display: block;
  box-sizing: border-box;
  margin: 0 auto;
}

/* Ensure barcode SVG/IMG scales to available area and doesn't overflow */
.tile-barcode svg,
.tile-barcode img {
  display: block;
  max-height: 100%;
  height: 100%;
  width: 100%;
  margin: 0 auto;
}

.cards.cards-grid-1 .wallet-card .tile-code-slot,
.cards.cards-grid-2 .wallet-card .tile-code-slot,
.cards.cards-grid-2 .wallet-card .tile-code-slot {
  /* Remove the white rounded rectangle in list and grid views */
  width: 100%;
  height: 100%;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cards.cards-grid-1 .wallet-card .tile-barcode,
.cards.cards-grid-2 .wallet-card .tile-barcode,
.cards.cards-grid-2 .wallet-card .tile-barcode {
  height: 95%;
  width: 100%;
  display: block;
  background: transparent !important;
}
.cards.cards-grid-1 .wallet-card .wallet-mark.large,
.cards.cards-grid-1 .wallet-card .wallet-mark {
  width: var(--suggested-logo-sz, 72px);
  height: var(--suggested-logo-sz, 72px);
}
.cards.cards-grid-1 .wallet-card .wallet-mark.large .wallet-logo,
.cards.cards-grid-1 .wallet-card .wallet-mark .wallet-logo {
  width: 100%;
  height: calc(100% * var(--suggested-logo-inner-h, 1));
  object-fit: contain;
}

.wallet-bottom {
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
}

.wallet-code-text {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  opacity: 1;
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-height: 28px;
}

/* Carte suggérée: un peu plus grande */
.suggested #suggestedCard .wallet-card { padding: 14px; }

/* Large logo for suggested card */
.wallet-mark.large { width: var(--suggested-logo-sz, 72px); height: var(--suggested-logo-sz, 72px); border-radius: 16px; }

.wallet-card.suggested-card .wallet-mark.large .wallet-logo {
  width: 100%;
  height: calc(100% * var(--suggested-logo-inner-h, 1));
  object-fit: contain;
}

/* Mobile portrait: optimize suggested card spacing (sizes come from JS via CSS vars) */
@media (max-width: 520px) and (orientation: portrait) {
  .wallet-card.suggested-card .tile-code-slot {
    padding: 12px;
  }

  .wallet-card.suggested-card .wallet-title {
    font-size: clamp(16px, 4.2vw, 28px);
  }
}

/* Mobile landscape: compact header/footer, bigger barcode */
@media (max-width: 900px) and (orientation: landscape) {
  /* Home paysage: carte suggérée en plein écran, sans UI superflue */
  .topbar,
  #view-home .toolbar,
  #view-home #cardsList,
  #view-home .suggested-title,
  #view-home .suggested-actions {
    display: none !important;
  }

  #view-home {
    position: fixed;
    inset: 0;
    max-width: none;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  #view-home #suggestedWrap {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    height: 100%;
  }

  #view-home #suggestedCard,
  #view-home #suggestedCard .wallet-card.suggested-card {
    width: 100vw;
    height: 100vh;
    max-width: none;
    aspect-ratio: auto;
    border-radius: 0;
    margin: 0;
  }

  #view-home #suggestedCard .wallet-card.suggested-card {
    padding: 10px 12px;
    box-sizing: border-box;
  }

  #view-home #suggestedCard .wallet-card.suggested-card .wallet-top {
    margin-bottom: 2px;
  }

  #view-home #suggestedCard .wallet-card.suggested-card .wallet-mark.large {
    width: 48px;
    height: 48px;
  }

  #view-home #suggestedCard .wallet-card.suggested-card .wallet-bottom {
    display: none;
  }

  #view-home #suggestedCard .wallet-card.suggested-card .wallet-mid {
    flex: 1 1 auto;
    align-self: stretch;
    padding-bottom: var(--suggested-barcode-bottom-gap);
  }

  #view-home #suggestedCard .wallet-card.suggested-card .tile-code-slot {
    height: calc(100% - var(--suggested-barcode-bottom-gap)) !important;
    max-height: none;
  }

  #view-home #suggestedCard .wallet-card.suggested-card .wallet-top {
    justify-content: center;
  }

  #view-home #suggestedCard .wallet-card.suggested-card .wallet-brand {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 6px;
  }

  #view-home #suggestedCard .wallet-card.suggested-card .wallet-title {
    display: none;
  }

  #view-home #suggestedCard .wallet-card.suggested-card .wallet-mark.large {
    width: 60px;
    height: 60px;
    border-radius: 14px;
  }

  #view-home #suggestedCard .wallet-card.suggested-card .tile-code-slot {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #view-home #suggestedCard .wallet-card.suggested-card .wallet-bottom {
    justify-content: center;
  }

  #view-home #suggestedCard .wallet-card.suggested-card .wallet-code-text {
    font-size: 18px;
    padding: 6px 12px;
    background: transparent;
    color: var(--text);
    text-shadow: none;
  }

  .mobile-dock {
    height: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .dock-ad {
    display: none;
  }

  .dock-menu-btn {
    right: 12px;
    bottom: 12px;
  }

  .wallet-card {
    padding: 10px;
    gap: 8px;
  }

  .wallet-title {
    font-size: clamp(14px, 2.8vw, 24px);
  }

  .wallet-code-text {
    font-size: 11px;
    padding: 4px 8px;
    max-height: 22px;
  }

  .wallet-card.suggested-card .tile-code-slot {
    padding: 2px;
  }

  .wallet-card.suggested-card .tile-barcode {
    height: 95%;
  }
}

/* Logo size per grid mode */
.cards.cards-grid-1 .wallet-mark { width: 84px; height: 84px; border-radius: 18px; }
.cards.cards-grid-2 .wallet-mark { width: 64px; height: 64px; border-radius: 14px; }
.cards.cards-grid-1 .wallet-logo { width: 78%; height: 78%; }
.cards.cards-grid-2 .wallet-logo { width: 74%; height: 74%; }

/* Suggested card action button */
.suggested-actions {
  position: absolute;
  right: 12px;
  bottom: 12px;
}

/* Small tiles adjustments */
.wallet-mid.small { height: 8px; }
.wallet-code-text.small { font-size: 12px; padding: 6px 10px; opacity: 0.9; background: rgba(0,0,0,0.28); }


.suggested {
  border: 1px dashed rgba(96, 165, 250, 0.6);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
  background: rgba(96, 165, 250, 0.08);
}

/* Positioning anchor so suggested-action can be placed at bottom-right of the suggested area */
.suggested { position: relative; }

.suggested-actions {
  position: absolute;
  right: 18px;
  bottom: 18px;
}

.suggested-actions .suggested-edit-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

.suggested-title { font-weight: 800; margin-bottom: 8px; }

.fab {
  position: fixed;
  right: 16px;
  bottom: 92px;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--accent);
  color: #0b1220;
  font-size: 26px;
  font-weight: 900;
}

/* Mobile dock (remplace nav + pub) */
.mobile-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  /* Fallback Firefox/Android: si env() n'est pas supporté, on garde une valeur valide. */
  height: var(--dock-h);
  height: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
  padding: 10px 12px 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--panel);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.dock-ad {
  min-width: 0;
}

.dock-ad .ad-placeholder {
  height: 100%;
  min-height: 40px;
  max-height: 68px;
}

.dock-menu-btn {
  /* On force le bouton à être fixé au viewport (bas-droite), indépendamment du dock. */
  position: fixed;
  right: 12px;
  bottom: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--accent);
  color: #0b1220;
  font-size: 26px;
  font-weight: 900;
  display: grid;
  place-items: center;
  z-index: 40;
}

/* Menu repliable au-dessus du dock */
.dock-menu {
  position: fixed;
  left: 12px;
  right: 12px;
  /* Fallback Firefox/Android: ne pas dépendre uniquement de env(). */
  bottom: calc(var(--dock-h) + 12px);
  bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 35;
}

.dock-menu-inner {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 14px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Mobile paysage: supprimer totalement la barre du bas */
@media (max-width: 900px) and (orientation: landscape) {
  .mobile-dock {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
}

.ad-placeholder {
  height: 50px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 13px;
}

.view-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

/* Keep header accessible even when scrolling */
#view-detail .view-header,
#view-scan .view-header,
#view-settings .view-header {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

body.screen-bright #view-detail .view-header,
body.screen-bright #view-scan .view-header,
body.screen-bright #view-settings .view-header {
  background: #ffffff;
}
/* En mode écran lumineux, on garde le dock */
body.screen-bright .mobile-dock {
  background: #ffffff;
  border-top-color: rgba(17, 24, 39, 0.25);
}

body.screen-bright .btn-secondary {
  color: #111827;
  border-color: rgba(17, 24, 39, 0.25);
}

/* En mode clair, les boutons secondaires restent visibles */
body.screen-bright .btn-secondary {
  background: rgba(17, 24, 39, 0.04);
}

.view-title { font-weight: 800; }

.scan-wrap { display: grid; gap: 10px; }
.qr-reader { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: rgba(2, 6, 23, 0.35); }
.hint { color: var(--muted); font-size: 13px; }

.detail { display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.col { display: grid; gap: 6px; }

.code-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.35);
  padding: 12px;
  margin-top: 10px;

  /* Design: format carte bancaire */
  width: 100%;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 85.60 / 53.98;
  display: grid;
  grid-template-rows: auto 1fr;
}

/* Mobile paysage: la hauteur est limitée; on borne la taille de la carte pour garder le code visible */
@media (max-width: 900px) and (orientation: landscape) {
  .code-card {
    /* 85.60/53.98 ≈ 1.585. On borne la largeur par la hauteur dispo pour éviter que la carte “pousse” hors écran. */
    max-width: min(460px, calc((100vh - var(--dock-h) - 96px) * 1.585));
  }
}

.code-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.code-brand { font-weight: 900; }
.code-logo { color: var(--muted); font-weight: 800; display: grid; align-items: center; justify-items: end; }

.code-body { display: grid; gap: 10px; justify-items: center; }
.code-body {
  /* 1er rang = zone code (barcode/qr), 2e rang = texte */
  grid-template-rows: 1fr auto;
  align-items: center;
  min-height: 0;
}

#barcode,
#qrcode {
  grid-row: 1;
}

#codeText {
  grid-row: 2;
}

.barcode {
  width: 100%;
  height: 100%;
  max-height: 200px;
  justify-self: stretch;
  align-self: stretch;
}
.qrcode { display: none; }
.code-text { color: var(--muted); font-size: 12px; word-break: break-all; }

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 10px;

  /* Barre contextuelle fixe au-dessus de la pub */
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 720px;
  bottom: var(--dock-h);
  bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
  padding: 12px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  z-index: 30;
}

/* En paysage mobile: ne pas bloquer l'écran avec une barre d'actions fixe */
@media (max-width: 900px) and (orientation: landscape) {
  .actions {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: none;
    padding: 0;
    background: transparent;
    border-top: none;
  }
}

@media (max-width: 520px) {
  .actions { grid-template-columns: 1fr 1fr; }
}

.toast {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--dock-h) + var(--actions-h) + 12px);
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 12px;
  color: var(--text);
  display: none;
}

.toast.show { display: block; }

.settings { display: grid; gap: 12px; }
.panel {
  border: 1px solid var(--border);
  background: rgba(17, 24, 39, 0.85);
  border-radius: 14px;
  padding: 12px;
}
.panel-title { font-weight: 900; margin-bottom: 8px; }
.muted { color: var(--muted); font-size: 13px; margin-top: 6px; }
.link { color: var(--accent); text-decoration: none; }

.switch { display: flex; align-items: center; gap: 10px; }
.switch input { width: 18px; height: 18px; }

.file-btn input { display: none; }

/* Mode "écran lumineux" (le web ne peut pas forcer la luminosité matérielle) */
body.screen-bright {
  background: #ffffff;
  color: #111827;
}
body.screen-bright .topbar { display: none; }

/* Mini map (panneau lieux) */
.mini-map {
  width: 100%;
  height: 140px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
}

.mini-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.locations-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* Champs lisibles sur fond clair */
body.screen-bright .label { color: #374151; }
body.screen-bright .muted { color: #4b5563; }
body.screen-bright .link { color: #2563eb; }

body.screen-bright .input,
body.screen-bright .textarea,
body.screen-bright select {
  background: #ffffff;
  color: #111827;
  border-color: rgba(17, 24, 39, 0.25);
}

body.screen-bright .input::placeholder,
body.screen-bright .textarea::placeholder {
  color: #6b7280;
}

body.screen-bright .panel {
  background: #ffffff;
  border-color: rgba(17, 24, 39, 0.25);
}

body.screen-bright .btn {
  color: #0b1220;
}
body.screen-bright .code-card {
  background: #ffffff;
  border-color: rgba(17, 24, 39, 0.25);
}
body.screen-bright .code-text { color: #374151; }
body.screen-bright .qrcode { display: block; }

@media print {
  body { background: #fff !important; color: #000 !important; }
  .topbar, .bottom-nav, .adbar, .toast, .fab, #view-home .toolbar, #suggestedWrap,
  #view-settings, #view-scan, .actions, .view-header, .hint, #locationsPanel { display: none !important; }

  #view-home, #view-scan, #view-settings { display: none !important; }
  #view-detail { display: block !important; padding: 0 !important; }
  #view-detail .detail > :not(#codeCard) { display: none !important; }
  #codeCard { margin: 0 auto !important; }
  .code-card { border: none !important; background: #fff !important; }
}

/* Grid card - carte compacte avec logo et nom */
.grid-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 140px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.grid-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.grid-card:active {
  transform: translateY(0);
}

.grid-card-mark {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.12);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.grid-card-mark .wallet-logo {
  width: 80%;
  height: 80%;
  object-fit: contain;
  display: block;
}

.grid-card-mark .wallet-letter {
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
}

.grid-card-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.45),
    1px -1px 0 rgba(0,0,0,0.45),
    -1px 1px 0 rgba(0,0,0,0.45),
    1px 1px 0 rgba(0,0,0,0.45);
}

/* Carte "+" pour ajouter une nouvelle carte */
.add-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  cursor: pointer;
  background: var(--card);
  border: 2px dashed var(--border);
  transition: all 0.15s ease;
}

.add-card:hover {
  border-color: var(--accent);
  background: rgba(96, 165, 250, 0.08);
  transform: translateY(-2px);
}

.add-card:active {
  transform: translateY(0);
}

.add-card-plus {
  font-size: 64px;
  font-weight: 300;
  line-height: 1;
  color: var(--accent);
  opacity: 0.8;
}

.add-card:hover .add-card-plus {
  opacity: 1;
  transform: scale(1.1);
}

/* Responsive grid cards */
.cards.cards-grid-2 .grid-card {
  min-height: 130px;
}

.cards.cards-grid-2 .grid-card-mark {
  width: 60px;
  height: 60px;
  border-radius: 14px;
}

.cards.cards-grid-2 .grid-card-title {
  font-size: 14px;
}

.cards.cards-grid-2 .add-card {
  min-height: 130px;
}

.cards.cards-grid-2 .add-card-plus {
  font-size: 52px;
}