/* Polices auto-hébergées (SIL OFL) — src/fonts/ */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/OpenSans-Variable.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2-variations");
}

/* Thème clair (défaut) */
:root {
  color-scheme: light;
  --font-ui: "Open Sans", system-ui, sans-serif;
  --font-card: "Inter", system-ui, sans-serif;
  /* Accent UI neutre — les couleurs vives restent sur les cartes */
  --brick-red: #141414;
  --brick-red-dark: #000000;
  --on-accent-fg: #ffffff;
  --brick-yellow: #ffd500;
  --bg: #ffffff;
  --ink: #141414;
  --ink-soft: #4a4a4a;
  --muted: #7a7a7a;
  --panel: #ffffff;
  --line: #f0f0f0;
  --line-strong: #141414;
  --input-bg: #ffffff;
  --row-hover: #fafafa;
  --row-selected: #f7f7f7;
  --selection-bg: transparent;
  --selection-line: transparent;
  --table-head: #fafafa;
  --thumb-bg: #f5f5f5;
  --form-control-bg: #f0f0f0;
  --form-error: #ce0000;
  --danger-line: #c45c5c;
  --danger-bg: #fff5f5;
  --toast-bg: #141414;
  --toast-fg: #ffffff;
  --card-w: 63mm;
  --card-h: 88mm;
  /* Inset du cadre logo (dos) = bordure face d’usine ; ne suit pas le réglage. */
  --card-logo-inset: 3mm;
  --card-logo-inset-tile: 1mm;
  --cols: 3;
  --rows: 3;
  --list-cols-max: 4;
}

/* Système dark (sauf si forcé light) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brick-red: #ececec;
    --brick-red-dark: #ffffff;
    --on-accent-fg: #141414;
    --bg: #121212;
    --ink: #ececec;
    --ink-soft: #b0b0b0;
    --muted: #8a8a8a;
    --panel: #121212;
    --line: #2a2a2a;
    --line-strong: #ececec;
    --input-bg: #121212;
    --row-hover: #1c1c1c;
    --row-selected: #222222;
    --selection-bg: transparent;
    --selection-line: transparent;
    --table-head: #1a1a1a;
    --thumb-bg: #2a2a2a;
    --form-control-bg: #1c1c1c;
    --form-error: #ff5555;
    --danger-line: #8a4040;
    --danger-bg: #2a1818;
    --toast-bg: #ececec;
    --toast-fg: #121212;
  }
}

/* Forcé dark */
:root[data-theme="dark"] {
  color-scheme: dark;
  --brick-red: #ececec;
  --brick-red-dark: #ffffff;
  --on-accent-fg: #141414;
  --bg: #121212;
  --ink: #ececec;
  --ink-soft: #b0b0b0;
  --muted: #8a8a8a;
  --panel: #121212;
  --line: #2a2a2a;
  --line-strong: #ececec;
  --input-bg: #121212;
  --row-hover: #1c1c1c;
  --row-selected: #222222;
  --selection-bg: transparent;
  --selection-line: transparent;
  --table-head: #1a1a1a;
  --thumb-bg: #2a2a2a;
  --form-control-bg: #1c1c1c;
  --form-error: #ff5555;
  --danger-line: #8a4040;
  --danger-bg: #2a1818;
  --toast-bg: #ececec;
  --toast-fg: #121212;
}

/* Forcé light (écrase le media query) */
:root[data-theme="light"] {
  color-scheme: light;
  --brick-red: #141414;
  --brick-red-dark: #000000;
  --on-accent-fg: #ffffff;
  --bg: #ffffff;
  --ink: #141414;
  --ink-soft: #4a4a4a;
  --muted: #7a7a7a;
  --panel: #ffffff;
  --line: #f0f0f0;
  --line-strong: #141414;
  --input-bg: #ffffff;
  --row-hover: #fafafa;
  --row-selected: #f7f7f7;
  --selection-bg: transparent;
  --selection-line: transparent;
  --table-head: #fafafa;
  --thumb-bg: #f5f5f5;
  --form-control-bg: #f0f0f0;
  --form-error: #ce0000;
  --danger-line: #c45c5c;
  --danger-bg: #fff5f5;
  --toast-bg: #141414;
  --toast-fg: #ffffff;
}

* {
  box-sizing: border-box;
}

::selection {
  background: var(--ink);
  color: var(--bg);
}

::-moz-selection {
  background: var(--ink);
  color: var(--bg);
}

html,
body {
  margin: 0;
  height: 100%;
  height: 100dvh;
  max-width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg);
}

/* Remix Icon : glyphes 24×24, jamais étirés (défaut SVG sans taille = 300×150) */
svg[viewBox="0 0 24 24"] {
  aspect-ratio: 1;
  overflow: visible;
  flex-shrink: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  border-radius: 0;
}

.app {
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1.25rem;
  max-width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior: none;
  touch-action: pan-y;
}

.app:has(> .main > .empty-view) {
  padding-bottom: 0;
}

.main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ——— Topbar sticky ——— */
.topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  gap: 0.75rem 1rem;
  align-items: center;
  padding: 0.85rem 0;
  margin: 0 -1.25rem;
  padding-inline: 1.25rem;
  background: var(--bg);
  border-bottom: none;
}

.topbar:not(:has(#topbar-search:not([hidden]))) {
  grid-template-columns: max-content 1fr;
}

.topbar:not(:has(#topbar-search:not([hidden]))) .topbar-actions {
  justify-self: end;
}

.topbar-search {
  display: flex;
  justify-content: center;
  min-width: 0;
  width: 100%;
}

.topbar-search[hidden] {
  display: none !important;
}

/* ——— Search bar (design system) ———
   Slot topbar : `.topbar-search` centre le bloc.
   Contrôle : `input.form-control` dans `.search-bar` (+ trail compteur / tri).
   Icône : `.form-control-icon` optionnelle (défaut recherche : `ri-search-line`). */
.search-bar {
  position: relative;
  width: min(100%, 28rem);
  display: flex;
  align-items: center;
  cursor: text;
}

.search-bar:focus {
  outline: none;
}

.search-bar:has(> .form-control-icon) > .form-control {
  padding-left: 2.35rem;
}

.search-bar > .form-control {
  /* place pour compteur + bouton tri */
  padding-right: 7.5rem;
}

/* Cadre focus du champ : aussi quand le tri a le focus ou le menu est ouvert */
.search-bar:has(.search-sort-btn:focus-visible) > .form-control,
.search-bar:has(.search-sort-btn[aria-expanded="true"]) > .form-control {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.search-bar > .form-control[type="search"]::-webkit-search-cancel-button {
  margin-right: 0.15rem;
}

/* Trail masqué (< 2 éléments) ou démo sans trail → padding texte normal à droite */
.search-bar--input-only > .form-control,
.search-bar:has(> .search-bar-trail[hidden]) > .form-control {
  padding-right: 0.85rem;
}

.search-bar-trail {
  position: absolute;
  /* 2px d’air en haut / à droite ; 4px en bas = 2px au-dessus du trait inset 2px */
  top: 2px;
  right: 2px;
  bottom: 4px;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  pointer-events: none;
}

.search-bar-trail[hidden] {
  display: none !important;
}

.search-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-count:empty {
  display: none;
}

/* Compteur seul : air à droite (équivalent au gap avec l’icône de tri) */
.search-count:last-child {
  padding-right: 0.35rem;
}

.search-sort {
  pointer-events: auto;
  display: flex;
  align-items: center;
  height: 100%;
  cursor: auto;
}

/* Bouton tri : carré qui remplit la hauteur utile (marges égales autour au hover) */
.search-bar .search-sort-btn.btn.sm.icon-only {
  box-sizing: border-box;
  width: auto;
  height: 100%;
  aspect-ratio: 1;
  flex-shrink: 0;
}

/* Menu tri : ancré au search-bar (comme form-select sur son trigger) */
.search-sort-menu.form-select-list {
  left: auto;
  right: -3px;
  top: calc(100% + 1px);
  z-index: 350;
  min-width: 15rem;
  width: max-content;
}

.search-sort-menu.form-select-list[hidden] {
  display: none !important;
}

/* Menu ouvert = même look que ghost hover/focus */
.btn.ghost[aria-expanded="true"] {
  background: var(--brick-red);
  color: var(--on-accent-fg);
  border-color: var(--brick-red);
}

/* Démos styleguide : fond pour voir le champ transparent */
.styleguide-search-demo {
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  background: var(--bg);
  max-width: 36rem;
}

@media (max-width: 840px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .topbar:not(:has(#topbar-search:not([hidden]))) {
    grid-template-columns: max-content 1fr;
  }

  .topbar-search {
    grid-column: 1 / -1;
    order: 3;
  }

  .topbar:not(:has(#topbar-search:not([hidden]))) .topbar-search {
    display: none !important;
  }

  /* Nouvelle carte : icône seule, comme les autres actions du header */
  #btn-new-card {
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    gap: 0;
  }

  #btn-new-card > svg {
    width: 1.45rem;
    height: 1.45rem;
  }

  #btn-new-card > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--ink);
  justify-self: start;
  width: max-content;
  padding: 0.2rem 0.45rem;
  margin: -0.2rem -0.45rem;
  border: 1px solid transparent;
  position: relative;
}

.topbar-brand:hover,
.topbar-brand:focus-visible {
  background: var(--brick-red);
  border-color: var(--brick-red);
  color: var(--on-accent-fg);
  outline: none;
}

.topbar-brand:hover .brand-name,
.topbar-brand:focus-visible .brand-name,
.topbar-brand:hover .brand-version,
.topbar-brand:focus-visible .brand-version {
  color: var(--on-accent-fg);
}

.brand-logo {
  width: 40px;
  height: auto;
  flex-shrink: 0;
  display: block;
}

/* Silhouette noire → claire en dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo {
    filter: invert(1);
  }
}

:root[data-theme="dark"] .brand-logo {
  filter: invert(1);
}

/* Hover/focus : logo contrasté sur le fond accent (comme ghost) */
.topbar-brand:hover .brand-logo,
.topbar-brand:focus-visible .brand-logo {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topbar-brand:hover .brand-logo,
  :root:not([data-theme="light"]) .topbar-brand:focus-visible .brand-logo {
    filter: none;
  }
}

:root[data-theme="dark"] .topbar-brand:hover .brand-logo,
:root[data-theme="dark"] .topbar-brand:focus-visible .brand-logo {
  filter: none;
}

.brand-text {
  display: grid;
  gap: 0.1rem;
}

.brand-name {
  font-family: var(--font-ui);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.brand-version {
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--ink-soft);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 420px) {
  .topbar-brand {
    gap: 0;
  }

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

.topbar-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.topbar-actions.is-hidden,
.btn.is-hidden {
  display: none !important;
}

/* Chargement : uniquement la marque (logo + nom + version) */
.app:has(> .main[aria-busy="true"]) .topbar-actions {
  display: none !important;
}

/* ——— Buttons (design system) ———
 * Variantes : .primary | .secondary | .ghost | .danger
 * Contenu   : texte | texte+icône | .icon-only (label .visually-hidden)
 * Disposition texte+icône : icône à gauche (défaut) | .icon-right
 * Badge     : .btn-badge (overlay, aria-hidden)
 * Taille    : (défaut) | .sm
 * Hover et :focus-visible partagent le même style (pas d’outline dédié).
 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn {
  border-radius: 0;
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  line-height: 1.2;
  background: transparent;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  position: relative;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn > svg {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  display: block;
  fill: currentColor;
}

.btn.icon-right {
  flex-direction: row-reverse;
}

.btn.icon-only {
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  gap: 0;
}

.btn.icon-only > svg {
  width: 1.2rem;
  height: 1.2rem;
}

.btn.primary {
  background: var(--brick-red);
  color: var(--on-accent-fg);
  border-color: var(--brick-red);
}

.btn.primary:hover:not(:disabled),
.btn.primary:focus-visible {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--ink);
  outline: none;
}

.btn.secondary {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink);
}

.btn.secondary:hover:not(:disabled),
.btn.secondary:focus-visible {
  border-color: var(--ink);
  outline: none;
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
}

.btn.ghost.icon-only {
  padding: 0;
}

.btn.ghost:hover:not(:disabled),
.btn.ghost:focus-visible {
  background: var(--brick-red);
  color: var(--on-accent-fg);
  border-color: var(--brick-red);
  outline: none;
}

.btn.danger {
  background: var(--panel);
  border-color: var(--danger-line);
  color: var(--danger-line);
}

.btn.danger:hover:not(:disabled),
.btn.danger:focus-visible {
  background: var(--danger-bg);
  outline: none;
}

.btn.sm {
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
}

.btn.sm > svg {
  width: 1rem;
  height: 1rem;
}

.btn.sm.icon-only {
  width: 2rem;
  height: 2rem;
  padding: 0;
}

.btn.sm.icon-only > svg {
  width: 1rem;
  height: 1rem;
}

/* Badge compteur (coin haut-droit, dépasse ~50 %) — aria-hidden ; nom accessible sur le bouton */
.btn-badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: var(--brick-red);
  color: var(--on-accent-fg);
  border-radius: 0;
  pointer-events: none;
  transform: translate(50%, -50%);
}

.btn-badge[hidden] {
  display: none !important;
}

.btn.sm > .btn-badge {
  min-width: 0.9rem;
  height: 0.9rem;
  padding: 0 0.15rem;
  font-size: 0.58rem;
}

/* Primary au repos = fond accent → badge inversé pour rester lisible */
.btn.primary > .btn-badge {
  background: var(--bg);
  color: var(--ink);
}

/* Danger : badge = bordure danger, texte clair pour le contraste */
.btn.danger > .btn-badge {
  background: var(--danger-line);
  color: #ffffff;
}

/* Primary hover : bouton s’inverse → badge repasse en accent */
.btn.primary:hover:not(:disabled) > .btn-badge,
.btn.primary:focus-visible > .btn-badge {
  background: var(--brick-red);
  color: var(--on-accent-fg);
}

/* Ghost hover : bouton passe en accent → badge inversé (secondary / danger : badge fixe) */
.btn.ghost:hover:not(:disabled) > .btn-badge,
.btn.ghost:focus-visible > .btn-badge,
.btn.ghost[aria-expanded="true"] > .btn-badge {
  background: var(--bg);
  color: var(--ink);
}

/* ——— Links (design system) ———
 * Classe : .link — contenu Markdown des modales : .md-content a
 * Taille : (défaut) | .sm
 * Disposition texte+icône : icône à gauche (défaut) | .icon-right
 * État   : (actif) | .disabled / [aria-disabled]
 * Externe : target=_blank + icône ri-external-link-fill à droite par défaut
 */
:is(a.link, .md-content a) {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  cursor: pointer;
}

:is(a.link, .md-content a):visited {
  color: var(--ink);
}

:is(a.link, .md-content a):hover,
:is(a.link, .md-content a):focus-visible {
  color: var(--ink);
  text-decoration-thickness: 2px;
}

a.link.sm {
  font-size: 0.85rem;
}

a.link:has(> svg) {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  text-decoration: none;
}

a.link:has(> svg) > span {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

a.link:has(> svg):hover > span,
a.link:has(> svg):focus-visible > span {
  text-decoration-thickness: 2px;
}

a.link.icon-right {
  flex-direction: row-reverse;
}

a.link > svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: currentColor;
  display: block;
}

a.link.disabled,
a.link[aria-disabled="true"] {
  color: var(--muted);
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}

a.link.disabled:visited,
a.link[aria-disabled="true"]:visited {
  color: var(--muted);
}

a.link.disabled:has(> svg) > span,
a.link[aria-disabled="true"]:has(> svg) > span {
  text-decoration: none;
}

.modal-header a:not(.btn),
.modal-header a:not(.btn):visited,
.modal-header a:not(.btn):hover,
.modal-header a:not(.btn):focus-visible {
  color: inherit;
}

/* ——— Tiles (design system) ———
 * Liste : ul.tile-list
 * Tuile : a.tile | button.tile (+ .disabled)
 * Titre / desc / icône gauche optionnels
 * Trait bas inset 2px --ink-soft (comme les champs, pas de biseau)
 * Hover et :focus-visible : inversion (fond ink / texte panel), pas d’outline
 * Variante : .danger (couleurs --danger-line / --danger-bg, comme les boutons)
 */
.tile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

:is(a.tile, button.tile) {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 0;
  box-shadow: inset 0 -2px 0 0 var(--ink-soft);
  box-sizing: border-box;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

a.tile:visited {
  color: var(--ink);
}

:is(a.tile, button.tile):hover,
:is(a.tile, button.tile):focus,
:is(a.tile, button.tile):focus-visible {
  background: var(--ink);
  color: var(--panel);
  border-color: var(--ink);
  box-shadow: none;
  outline: none;
}

:is(a.tile, button.tile):hover .tile-desc,
:is(a.tile, button.tile):focus .tile-desc,
:is(a.tile, button.tile):focus-visible .tile-desc {
  color: inherit;
  opacity: 0.8;
}

:is(a.tile, button.tile) > svg {
  width: 1.6rem;
  height: 1.6rem;
  aspect-ratio: 1;
  flex-shrink: 0;
  fill: currentColor;
  display: block;
}

.tile-body {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.tile-title {
  font-weight: 700;
}

.tile-desc {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--ink-soft);
}

:is(a.tile, button.tile).disabled,
:is(a.tile, button.tile)[aria-disabled="true"],
button.tile:disabled {
  color: var(--muted);
  cursor: default;
  pointer-events: none;
}

a.tile.disabled:visited,
a.tile[aria-disabled="true"]:visited {
  color: var(--muted);
}

:is(a.tile, button.tile).disabled .tile-desc,
:is(a.tile, button.tile)[aria-disabled="true"] .tile-desc,
button.tile:disabled .tile-desc {
  color: var(--muted);
}

:is(a.tile, button.tile).danger {
  color: var(--danger-line);
  box-shadow: inset 0 -2px 0 0 var(--danger-line);
}

a.tile.danger:visited {
  color: var(--danger-line);
}

:is(a.tile, button.tile).danger .tile-desc {
  color: var(--danger-line);
  opacity: 0.85;
}

:is(a.tile, button.tile).danger:hover,
:is(a.tile, button.tile).danger:focus,
:is(a.tile, button.tile).danger:focus-visible {
  background: var(--danger-bg);
  color: var(--danger-line);
  border-color: var(--danger-line);
  box-shadow: inset 0 -2px 0 0 var(--danger-line);
  outline: none;
}

:is(a.tile, button.tile).danger:hover .tile-desc,
:is(a.tile, button.tile).danger:focus .tile-desc,
:is(a.tile, button.tile).danger:focus-visible .tile-desc {
  color: inherit;
  opacity: 0.85;
}

:is(a.tile, button.tile).danger.disabled,
:is(a.tile, button.tile).danger[aria-disabled="true"],
button.tile.danger:disabled {
  color: var(--muted);
  box-shadow: inset 0 -2px 0 0 var(--muted);
}

:is(a.tile, button.tile).danger.disabled .tile-desc,
:is(a.tile, button.tile).danger[aria-disabled="true"] .tile-desc,
button.tile.danger:disabled .tile-desc {
  color: var(--muted);
  opacity: 1;
}

/* Topbar : icônes un peu plus grandes */
.topbar-actions .btn.icon-only > svg {
  width: 1.45rem;
  height: 1.45rem;
}

/* Print menu : ouvert / survol parent = même état que ghost hover/focus */
.topbar-actions .print-menu:hover .print-menu-btn:not(:disabled),
.topbar-actions .print-menu.is-open .print-menu-btn:not(:disabled),
.topbar-actions .print-menu:focus-within .print-menu-btn:not(:disabled) {
  background: var(--brick-red);
  color: var(--on-accent-fg);
  border-color: var(--brick-red);
  outline: none;
}

.topbar-actions .print-menu-btn.is-empty {
  opacity: 0.4;
}

.topbar-actions .print-menu:hover .print-menu-btn.is-empty,
.topbar-actions .print-menu.is-open .print-menu-btn.is-empty,
.topbar-actions .print-menu:focus-within .print-menu-btn.is-empty,
.topbar-actions .print-menu-btn.is-empty:hover,
.topbar-actions .print-menu-btn.is-empty:focus-visible {
  opacity: 1;
}

/* Menu impression topbar */
.print-menu[hidden] {
  display: none !important;
}

/* Badge compteur : styles via .btn-badge ; invert si menu ouvert / survol parent */
.print-menu:hover .print-menu-btn > .btn-badge,
.print-menu.is-open .print-menu-btn > .btn-badge,
.print-menu:focus-within .print-menu-btn > .btn-badge {
  background: var(--bg);
  color: var(--ink);
}

.print-menu-panel {
  --inv-bg: var(--ink);
  --inv-fg: var(--bg);
  position: absolute;
  /* Collé au bord droit des actions (bouton Paramètres) ; padding haut = pont de survol */
  top: 100%;
  right: 0;
  z-index: 320;
  width: max-content;
  min-width: 13.5rem;
  max-width: min(18rem, 85vw);
  padding: calc(0.5rem + 0.7rem) 0.7rem 0.7rem;
  display: grid;
  gap: 0.45rem;
  background: transparent;
  color: var(--inv-fg);
  border: none;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s;
}

.print-menu-panel::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background: var(--inv-bg);
  border: 1px solid var(--line-strong);
  pointer-events: none;
}

.print-menu-panel > * {
  position: relative;
  z-index: 1;
}

.print-menu:hover .print-menu-panel,
.print-menu.is-open .print-menu-panel,
.print-menu:focus-within .print-menu-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.print-menu-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.print-menu-desc {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  opacity: 0.85;
  white-space: pre-line;
}

.print-menu-desc[hidden] {
  display: none !important;
}

/* Boutons : mêmes variantes DS, tokens inversés (surface = encre de la page) */
.print-menu-panel .btn {
  width: 100%;
  --bg: var(--inv-bg);
  --ink: var(--inv-fg);
  --panel: var(--inv-bg);
  --brick-red: var(--inv-fg);
  --on-accent-fg: var(--inv-bg);
  --line: color-mix(in srgb, var(--inv-fg) 45%, var(--inv-bg));
}

.print-menu-panel .btn[hidden] {
  display: none !important;
}

/* Icônes thème (plusieurs SVG dans le même bouton) : n’afficher que le mode actif */
.btn .icon-system,
.btn .icon-sun,
.btn .icon-moon {
  display: none;
  fill: currentColor;
  stroke: none;
}

html[data-theme="light"] .btn .icon-sun,
html[data-theme="dark"] .btn .icon-moon,
html:not([data-theme]) .btn .icon-system {
  display: block;
}

/* ——— Panels / views ——— */
.panel {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0.25rem 0 1.4rem;
}

.view-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-ui);
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  font-weight: 700;
  line-height: 1.2;
}

.view-desc {
  margin: 0 0 1.25rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.section-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-ui);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  font-weight: 700;
  line-height: 1.2;
}

.section-title:has(> svg) {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.section-title > svg {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  fill: currentColor;
}

/* ——— Empty state ——— */
.empty-view {
  text-align: center;
  padding: 0.75rem 1rem;
  margin: 0;
  display: grid;
  place-content: center;
  place-items: center;
  box-sizing: border-box;
  width: 100%;
}

.empty-view[hidden] {
  display: none !important;
}

.main > .empty-view,
.main > .panel:has(> .empty-view:not([hidden])) {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.main > .panel:has(> .empty-view:not([hidden])) {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.main > .panel:has(> .empty-view:not([hidden])) > .empty-view {
  flex: 1 1 auto;
}

/* Titre + texte + tuiles : c’est ce bloc qui est centré. La brique est hors flux, au-dessus. */
.empty-view-body {
  position: relative;
  display: grid;
  gap: 0.75rem;
  justify-items: center;
}

.empty-view .brick {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 40px;
  margin: 0 0 0.75rem;
  background: var(--brick-red);
  border: 1px solid var(--line-strong);
}

.empty-view .brick::before,
.empty-view .brick::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 14px;
  height: 9px;
  background: var(--brick-red);
  border: 1px solid var(--line-strong);
  border-bottom: none;
}

.empty-view .brick::before {
  left: 8px;
}

.empty-view .brick::after {
  right: 8px;
}

/* Chargement : pulse brique + plots + points (uniquement tant que #main est busy) */
#main[aria-busy="true"] .empty-view .brick {
  animation: loading-brick-pulse 1.4s ease-in-out infinite;
}

#main[aria-busy="true"] .empty-view .brick::before,
#main[aria-busy="true"] .empty-view .brick::after {
  animation: loading-stud-blink 1.4s ease-in-out infinite;
}

#main[aria-busy="true"] .empty-view .brick::after {
  animation-delay: 0.35s;
}

.loading-dots > span {
  display: inline-block;
  animation: loading-dot 1.2s ease-in-out infinite;
  opacity: 0.2;
}

.loading-dots > span:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-dots > span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes loading-brick-pulse {
  50% {
    opacity: 0.45;
  }
}

@keyframes loading-stud-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.15;
  }
}

@keyframes loading-dot {
  0%,
  80%,
  100% {
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main[aria-busy="true"] .empty-view .brick,
  #main[aria-busy="true"] .empty-view .brick::before,
  #main[aria-busy="true"] .empty-view .brick::after,
  .loading-dots > span {
    animation: none;
    opacity: 1;
  }
}

.empty-view .view-title {
  margin: 0;
}

.empty-view p:not(.view-title) {
  margin: 0;
  max-width: 28rem;
  color: var(--ink-soft);
  white-space: pre-line;
}

.empty-view .tile-list {
  width: max-content;
  max-width: 100%;
  margin-top: 1.25rem;
  text-align: left;
}

.empty-view .tile-title,
.empty-view .tile-desc {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .empty-view .tile-list {
    width: min(100%, 28rem);
  }

  .empty-view .tile-title,
  .empty-view .tile-desc {
    white-space: normal;
  }
}

/* ——— Styleguide / pages de test ——— */
.styleguide {
  max-width: 52rem;
}

.styleguide-header {
  margin-bottom: 1.75rem;
}

.styleguide-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.styleguide-section {
  margin-bottom: 1.75rem;
}

.styleguide-section:last-child {
  margin-bottom: 0;
}

.styleguide-section-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 700;
}

.styleguide-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.styleguide-hint {
  margin: 0.65rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.modal-body .styleguide {
  max-width: none;
}

.modal-body .styleguide-kicker {
  margin: 0 0 1.25rem;
}

.styleguide-intro {
  margin: 0 0 1.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.styleguide-notes {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.35rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.styleguide-type-specimens {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.styleguide-type-specimen {
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 1.15rem;
  line-height: 1.35;
}

.styleguide-type-specimen-label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.styleguide-type-specimen--ui {
  font-family: var(--font-ui);
  font-weight: 500;
}

.styleguide-type-specimen--card {
  font-family: var(--font-card);
  font-weight: 500;
}

.styleguide-type-demo {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  background: var(--bg);
}

.styleguide-dialog-demo {
  border: 2px solid var(--ink);
  background: var(--panel);
}

.styleguide-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  background: var(--bg);
}

.styleguide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.styleguide-table th,
.styleguide-table td {
  padding: 0.55rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.styleguide-table th {
  font-weight: 700;
  background: var(--panel);
  white-space: nowrap;
}

.styleguide-table tr:last-child td {
  border-bottom: none;
}

.styleguide code {
  font-size: 0.85em;
}

.styleguide-fields {
  display: grid;
  gap: 0;
  max-width: 28rem;
}

.styleguide-fields .form-field {
  margin-bottom: 1rem;
}

.styleguide-fields .form-field:last-child,
.styleguide-fields .form-check-group:last-child {
  margin-bottom: 0;
}

.styleguide-fields--row {
  max-width: none;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.85rem 1rem;
}

.styleguide-fields--row .form-field {
  margin-bottom: 0;
}

/* ——— Form fields (design system) ———
 * Ordre : 1 label → 2 hint → 3 contrôle → 4 erreur (si affichée)
 * Exception checkbox : case à gauche du libellé / hint (`.form-check`).
 * Vocabulaire :
 *   bloc     → .form-field
 *   label    → .form-label (+ .form-label--required)
 *   aide     → .form-hint
 *   contrôle → .form-control (input text/number, textarea ; select → plus tard)
 *   icône    → .form-control-wrap + .form-control-icon (optionnel, gauche)
 *   erreur   → .form-error + .is-invalid / aria-invalid
 *   taille   → .sm
 * Repos : fond + trait bas (box-shadow inset). Focus : outline 2px + offset 1px (trait bas conservé ; couleur inchangée en erreur).
 */
.form-field {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.form-field[hidden] {
  display: none;
}

.field-row .form-field {
  margin-bottom: 0;
}

.form-label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.form-label--required::after {
  content: " *";
  color: var(--form-error);
}

.form-hint {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

.form-hint strong {
  font-weight: 700;
  color: var(--ink);
}

.theme-mode-switch + .form-hint {
  text-align: center;
}

.form-error {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--form-error);
  min-height: 1.2em;
}

.form-error:empty {
  margin: 0;
}

/* Icône optionnelle à gauche (text / number / textarea / search) */
.form-control-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.form-control-icon {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--ink-soft);
}

.form-control-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  fill: currentColor;
}

.form-control-wrap:has(> .form-control-icon) > .form-control {
  padding-left: 2.35rem;
}

.form-control-wrap:has(> .form-control-icon) > .form-select > .form-select-trigger {
  padding-left: 2.35rem;
}

.form-control-wrap:has(> .form-control.sm) > .form-control-icon {
  left: 0.5rem;
}

.form-control-wrap:has(> .form-control.sm) > .form-control-icon svg {
  width: 1rem;
  height: 1rem;
}

.form-control-wrap:has(> .form-control.sm) > .form-control {
  padding-left: 2rem;
}

/* Textarea : icône en haut à gauche */
.form-control-wrap:has(> textarea.form-control) > .form-control-icon {
  top: 0.7rem;
  transform: none;
}

.form-control-wrap:has(> textarea.form-control.sm) > .form-control-icon {
  top: 0.5rem;
}

/* Contrôle range : piste + valeur (output optionnel)
 * Piste et poignée sans arrondi ; focus = cadre sur la poignée seule. */
.form-range-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.form-range-row input[type="range"] {
  flex: 1;
  min-width: 0;
  margin: 0;
  height: 1.35rem;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.form-range-row input[type="range"]:focus,
.form-range-row input[type="range"]:focus-visible {
  outline: none;
}

/* —— WebKit / Blink —— */
.form-range-row input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border: none;
  border-radius: 0;
  background: var(--ink-soft);
}

.form-range-row input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7.5px;
  border: none;
  border-radius: 0;
  background: var(--brick-red);
  box-shadow: none;
}

.form-range-row input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* —— Firefox —— */
.form-range-row input[type="range"]::-moz-range-track {
  height: 3px;
  border: none;
  border-radius: 0;
  background: var(--ink-soft);
}

.form-range-row input[type="range"]::-moz-range-progress {
  height: 3px;
  border: none;
  border-radius: 0;
  background: var(--brick-red);
}

.form-range-row input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 0;
  background: var(--brick-red);
  box-shadow: none;
}

.form-range-row input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.form-range-row output {
  flex: 0 0 3.5rem;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink-soft);
  line-height: 1.35rem;
  min-height: 1.35rem;
}

.form-range-row.is-custom output {
  font-weight: 700;
}

.form-range-reset {
  flex: 0 0 1.35rem;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  padding: 0.1rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 0;
  visibility: hidden;
  pointer-events: none;
}

.form-range-row.is-custom .form-range-reset {
  visibility: visible;
  pointer-events: auto;
}

.form-range-row.sm .form-range-reset {
  flex-basis: 1.15rem;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0.075rem;
}

.form-range-reset svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.form-range-row.sm .form-range-reset svg {
  width: 1rem;
  height: 1rem;
}

.form-range-reset:hover {
  color: var(--ink);
}

.form-range-reset:focus {
  outline: none;
}

.form-range-reset:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.form-range-row:has(input:disabled) .form-range-reset {
  pointer-events: none;
}

.form-range-row.sm input[type="range"] {
  height: 1.15rem;
}

.form-range-row.sm input[type="range"]::-webkit-slider-runnable-track,
.form-range-row.sm input[type="range"]::-moz-range-track,
.form-range-row.sm input[type="range"]::-moz-range-progress {
  height: 2px;
}

.form-range-row.sm input[type="range"]::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -6px;
}

.form-range-row.sm input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
}

.form-range-row.sm output {
  flex-basis: 3rem;
  font-size: 0.8rem;
  line-height: 1.15rem;
  min-height: 1.15rem;
}

.form-range-row:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-range-row input[type="range"]:disabled {
  cursor: not-allowed;
}

/* Contrôle checkbox / radio : case (carré) ou rond à gauche, centré sur le
 * bloc libellé (+ hint). Input natif masqué ; `.form-check-ui` dessine le
 * contrôle. Checkbox : coche ri-check-fill (masque CSS). Radio (`.form-radio`) :
 * ri-radio-button-line (masque CSS ; repos = sans le disque interne).
 * Focus : cadre sur le contrôle seul. */
.form-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  cursor: pointer;
}

.form-check-text {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.form-check-ui {
  box-sizing: border-box;
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  background-color: var(--panel);
  pointer-events: none;
}

.form-check-input:focus,
.form-check-input:focus-visible {
  outline: none;
}

.form-check-ui::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--panel);
  opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.form-check:has(.form-check-input:checked) .form-check-ui {
  background-color: var(--ink);
  border-color: var(--ink);
}

.form-check:has(.form-check-input:checked) .form-check-ui::after {
  opacity: 1;
}

.form-check:has(.form-check-input:focus-visible) .form-check-ui {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.form-check:has(.form-check-input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

.form-check:has(.form-check-input[aria-readonly="true"]) {
  color: var(--ink-soft);
  cursor: default;
}

.form-check:has(.form-check-input[aria-readonly="true"]) .form-label,
.form-check:has(.form-check-input[aria-readonly="true"]) .form-hint {
  color: var(--ink-soft);
}

.form-check:has(.form-check-input[aria-readonly="true"]) .form-check-ui {
  border-color: var(--ink-soft);
}

.form-check:has(.form-check-input[aria-readonly="true"]:checked) .form-check-ui {
  background-color: var(--ink-soft);
  border-color: var(--ink-soft);
}

.form-check.sm .form-check-ui {
  flex-basis: 1.2rem;
  width: 1.2rem;
  height: 1.2rem;
}

.form-check-group {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1rem;
  padding: 0;
  border: none;
  min-inline-size: 0;
}

.form-check-group > legend.form-label {
  padding: 0;
  float: none;
  width: 100%;
}

.form-check-group > legend.form-label + .form-check-list,
.form-check-group > .form-hint + .form-check-list {
  margin-top: 0.5rem;
}

.form-check-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.form-check-list--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.65rem 1.25rem;
}

/* Radio : glyphe ri-radio-button-line (même viewBox aux deux états).
 * Repos = anneau seul (path du disque interne retiré) ; coché = glyphe complet. */
.form-radio .form-check-ui {
  --form-radio-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z'/%3E%3C/svg%3E");
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  overflow: visible;
}

.form-radio:has(.form-check-input:checked) .form-check-ui {
  --form-radio-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12C17 14.7614 14.7614 17 12 17Z'/%3E%3C/svg%3E");
  background-color: transparent;
}

.form-radio .form-check-ui::after {
  opacity: 1;
  background-color: var(--ink);
  -webkit-mask: var(--form-radio-mask) center / 110% 110% no-repeat;
  mask: var(--form-radio-mask) center / 110% 110% no-repeat;
}

.form-radio:has(.form-check-input[aria-readonly="true"]) .form-check-ui::after {
  background-color: var(--ink-soft);
}

.form-radio:has(.form-check-input[aria-readonly="true"]:checked) .form-check-ui {
  background-color: transparent;
}

/* Contrôle couleur : vrai input.form-control + pastille / clear en overlay */
.form-color {
  position: relative;
  display: block;
  width: 100%;
}

.form-color > .form-control.form-color-hex {
  /* place pour pastille ≈ hauteur input − 4px + inset 2px + gap */
  padding-left: 2.65rem;
}

.form-color:has(.form-color-clear:not([hidden])) > .form-control.form-color-hex {
  padding-right: 2.35rem;
}

.form-color > .form-control.form-color-hex.sm {
  padding-left: 2.15rem;
}

.form-color:has(.form-color-clear:not([hidden])) > .form-control.form-color-hex.sm {
  padding-right: 2rem;
}

.form-color-swatch {
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 1;
  box-sizing: border-box;
  /* 2px haut + 2px air au-dessus du trait bas inset (2px) */
  height: calc(100% - 6px);
  width: auto;
  aspect-ratio: 1;
  margin: 0;
  border: none;
  border-radius: 0;
  background-color: var(--swatch, transparent);
  background-image: none;
  cursor: pointer;
  overflow: hidden;
}

.form-color-swatch.is-empty {
  background-color: transparent;
  background-image:
    linear-gradient(45deg, var(--line) 25%, transparent 25%),
    linear-gradient(-45deg, var(--line) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--line) 75%),
    linear-gradient(-45deg, transparent 75%, var(--line) 75%);
  background-size: 6px 6px;
  background-position: 0 0, 0 3px, 3px -3px, -3px 0;
}

.form-color-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
}

.form-color-native:disabled {
  cursor: not-allowed;
}

.form-color-clear {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.2rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 0;
}

.form-color-clear[hidden] {
  display: none !important;
}

.form-color:has(> .form-control.sm) .form-color-clear {
  right: 0.25rem;
  padding: 0.15rem;
}

.form-color-clear svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.form-color:has(> .form-control.sm) .form-color-clear svg {
  width: 1rem;
  height: 1rem;
}

.form-color-clear:hover {
  color: var(--ink);
}

.form-color-clear:focus {
  outline: none;
}

.form-color-clear:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.form-color:has(> .form-control:disabled) .form-color-swatch,
.form-color:has(> .form-control:disabled) .form-color-clear {
  opacity: 0.45;
  pointer-events: none;
}

/* ——— Images (design system) ———
 * Contrôle : `.form-image` (vide : fichier / URL ; image : fond optionnel + aperçu).
 * Aperçu : `.form-image-crop` (focus = glisser / molette / flèches / +−).
 * Ratio : `--form-image-aspect` (défaut 1 / 1).
 * Fond : champ `form-color` (éditeur carte) ou couleur externe (`withBackgroundColor: false`, thèmes).
 * Badges overlay : `.btn.primary.sm` (apparence, non cliquables).
 * Reset : `.btn.ghost.sm.icon-only` positionné en overlay. */
.form-image {
  display: grid;
  gap: 0.75rem;
}

.form-image-empty[hidden],
.form-image-filled[hidden] {
  display: none !important;
}

.form-image-empty-text {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
}

.form-image-empty-text strong {
  font-weight: 700;
}

.form-image-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.form-image-empty .form-error {
  margin-top: 0.35rem;
}

.form-image-empty .form-error:empty {
  display: none;
}

.form-image-filled {
  display: grid;
  gap: 0.75rem;
}

.form-image-filled > .form-field {
  margin-bottom: 0;
}

.form-image-crop {
  position: relative;
  width: 100%;
  aspect-ratio: var(--form-image-aspect, 1 / 1);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 0;
  cursor: default;
  touch-action: pan-y;
  user-select: none;
  container-type: inline-size;
}

.form-image-crop:focus,
.form-image-crop.is-editing {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  cursor: grab;
  touch-action: none;
}

.form-image-crop.is-editing:active {
  cursor: grabbing;
}

.form-image-crop-img {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  max-width: none;
  transform-origin: center center;
  pointer-events: none;
  will-change: transform;
}

.form-image-crop--logo {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}

.form-image-crop--logo .form-image-crop-img {
  position: relative;
  left: auto;
  top: auto;
  flex-shrink: 0;
  width: calc(75% * min(var(--logo-zoom, 1), 2.5));
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: translate(
    calc(var(--logo-offset-x, 0) * 100cqw),
    calc(var(--logo-offset-y, 0) * 100cqh)
  );
}

.form-image-crop-img[hidden] {
  display: none !important;
}

.form-image-crop-badges {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.35rem;
  max-width: calc(100% - 0.5rem);
  pointer-events: none;
}

.form-image-crop-badge {
  pointer-events: none;
  cursor: default;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Valeur : signe + 3 chiffres + % (`+100%`) — évite le yoyo de largeur. */
.form-image-crop-badge > span {
  display: inline-block;
  min-width: 5ch;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

@container (max-width: 17.5rem) {
  .form-image-crop-badges {
    flex-wrap: wrap;
    max-width: calc(100% - 2.5rem);
  }
}

.form-image-crop-reset {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 3;
}

.form-image-crop-reset[hidden] {
  display: none !important;
}

.form-image-crop-bar {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.5rem;
  pointer-events: none;
}

.form-image-crop-bar > .btn {
  pointer-events: auto;
}

input.form-control,
textarea.form-control,
select.form-control,
button.form-select-trigger {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: none;
  border-radius: 0;
  padding: 0.55rem 0.85rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  background-color: var(--form-control-bg);
  box-shadow: inset 0 -2px 0 0 var(--ink-soft);
  appearance: none;
}

textarea.form-control {
  resize: vertical;
  min-height: 5.5rem;
  line-height: 1.45;
}

select.form-control {
  padding-right: 2rem;
  background-color: var(--form-control-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237a7a7a'%3E%3Cpath d='m12 16l-6-6h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 1rem 1rem;
  cursor: pointer;
}

input.form-control::placeholder,
textarea.form-control::placeholder {
  color: var(--muted);
  font-weight: 400;
}

input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus,
button.form-select-trigger:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  /* Trait bas conservé sous l’encadrement */
  box-shadow: inset 0 -2px 0 0 var(--ink-soft);
}

input.form-control:disabled,
textarea.form-control:disabled,
select.form-control:disabled,
button.form-select-trigger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

input.form-control[readonly],
textarea.form-control[readonly] {
  color: var(--ink-soft);
  cursor: default;
}

input.form-control.is-invalid,
textarea.form-control.is-invalid,
select.form-control.is-invalid,
button.form-select-trigger.is-invalid,
input.form-control[aria-invalid="true"],
textarea.form-control[aria-invalid="true"],
select.form-control[aria-invalid="true"],
button.form-select-trigger[aria-invalid="true"] {
  box-shadow: inset 0 -2px 0 0 var(--form-error);
}

input.form-control.is-invalid:focus,
textarea.form-control.is-invalid:focus,
select.form-control.is-invalid:focus,
button.form-select-trigger.is-invalid:focus,
input.form-control[aria-invalid="true"]:focus,
textarea.form-control[aria-invalid="true"]:focus,
select.form-control[aria-invalid="true"]:focus,
button.form-select-trigger[aria-invalid="true"]:focus {
  /* Encadrement focus inchangé (ink) ; seul le trait bas reste en erreur */
  box-shadow: inset 0 -2px 0 0 var(--form-error);
}

input.form-control.sm,
textarea.form-control.sm,
select.form-control.sm,
button.form-select-trigger.sm {
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
}

textarea.form-control.sm {
  min-height: 4rem;
}

select.form-control.sm {
  padding-right: 1.75rem;
  background-position: right 0.4rem center;
  background-size: 0.9rem 0.9rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b0b0b0'%3E%3Cpath d='m12 16l-6-6h12z'/%3E%3C/svg%3E");
  }
}

:root[data-theme="dark"] select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b0b0b0'%3E%3Cpath d='m12 16l-6-6h12z'/%3E%3C/svg%3E");
}

/* ——— Select custom (surcouche unobtrusive) ——— */
.form-select {
  position: relative;
  display: block;
  width: 100%;
}

.form-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background-image: none !important;
}

button.form-select-trigger {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background-image: none;
  /* place pour le chevron */
  padding-right: 2.25rem;
}

button.form-select-trigger.sm {
  padding-right: 1.9rem;
}

.form-select:has(.form-select-clear:not([hidden])) button.form-select-trigger {
  padding-right: 3.65rem;
}

.form-select.sm:has(.form-select-clear:not([hidden])) button.form-select-trigger {
  padding-right: 3.15rem;
}

.form-select.is-open button.form-select-trigger {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.form-select-value {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.form-select-value-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-select-value.is-placeholder .form-select-value-text {
  color: var(--muted);
  font-weight: 400;
}

.form-select-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: inherit;
}

.form-select-icon[hidden] {
  display: none !important;
}

.form-select-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

.form-select.sm .form-select-icon svg {
  width: 0.95rem;
  height: 0.95rem;
}

.form-select-clear {
  position: absolute;
  right: 1.85rem;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.2rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 0;
}

.form-select.sm .form-select-clear {
  right: 1.6rem;
  padding: 0.15rem;
}

.form-select-clear[hidden] {
  display: none !important;
}

.form-select-clear svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.form-select.sm .form-select-clear svg {
  width: 1rem;
  height: 1rem;
}

.form-select-clear:hover {
  color: var(--ink);
}

.form-select-clear:focus {
  outline: none;
}

.form-select-clear:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.form-select-chevron {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.2rem;
  color: var(--ink-soft);
  line-height: 0;
  pointer-events: none;
}

.form-select.sm .form-select-chevron {
  right: 0.25rem;
  padding: 0.15rem;
}

.form-select-chevron svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  transition: transform 0.12s ease;
}

.form-select.sm .form-select-chevron svg {
  width: 1rem;
  height: 1rem;
}

.form-select.is-open .form-select-chevron svg {
  transform: rotate(180deg);
}

.form-select-list {
  position: absolute;
  z-index: 50;
  /* Aligne les bords L/R/B sur l’outline focus (2px + offset 1px) */
  left: -3px;
  right: -3px;
  top: calc(100% + 1px);
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: min(16rem, 50vh);
  overflow: auto;
  background: var(--panel);
  border: 2px solid var(--ink);
  border-top: none;
  border-radius: 0;
  box-shadow: none;
}

.form-select-list[hidden] {
  display: none !important;
}

.form-select-group {
  margin: 0;
  padding: 0.55rem 0.85rem 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}

.form-select-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.55rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
}

.form-select-option[hidden] {
  display: none !important;
}

.form-select-option-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-select.sm .form-select-option {
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
}

.form-select-option.is-selected {
  font-weight: 600;
}

.form-select-option:hover,
.form-select-option.is-active {
  background: var(--ink);
  color: var(--bg);
}

.form-select-option.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.form-select-option.is-disabled:hover,
.form-select-option.is-disabled.is-active {
  background: transparent;
  color: var(--ink);
}

.form-select.is-disabled button.form-select-trigger {
  cursor: not-allowed;
}

/* ——— Cards grid ——— */
.cards-grid {
  --list-gap-x: 1.25rem;
  /* Flex : gap fixe + lignes centrées ; max-width en px via list-layout.js */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem var(--list-gap-x);
  width: 100%;
  margin-inline: auto;
  margin-top: 0.5rem;
  box-sizing: border-box;
}

.card-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-radius: 2px;
}

.card-tile:focus,
.card-tile:focus-visible {
  outline: none;
}

.card-tile-preview,
.card-preview {
  display: block;
  width: var(--card-w);
  height: var(--card-h);
  flex-shrink: 0;
}

.card-tile-preview {
  cursor: pointer;
  position: relative;
  transform-origin: center center;
  transition: transform 0.15s ease;
}

/* Sélection impression : encadrement sur la carte seulement */
.card-tile.is-selected .card-tile-preview {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.card-tile:hover .card-tile-preview,
.card-tile:focus-visible .card-tile-preview {
  transform: scale(1.04);
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .card-tile-preview {
    transition: none;
  }
}

.card-tile-actions {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  justify-content: center;
}

.print-qty {
  display: inline-flex;
  align-items: center;
  border: none;
  background: transparent;
  min-height: 2rem;
  gap: 0;
}

.print-qty .btn[hidden] {
  display: none !important;
}

.print-qty-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0 0.35rem;
  min-width: 2.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  pointer-events: none;
  user-select: none;
}

.print-qty-count[hidden] {
  display: none !important;
}

.print-qty-count > svg {
  width: 1rem;
  height: 1rem;
  display: block;
  fill: currentColor;
  flex-shrink: 0;
}

.print-qty-num {
  line-height: 1;
}

/* ——— Modales ———
   Dimensions toujours bornées au viewport (vw / dvh), jamais à la largeur
   scrollable du document — sinon un overflow horizontal de l’app élargit la modale. */
.modal-root:empty {
  display: none;
}

#developer-demo-root .modal-backdrop,
.modal-root > .modal-backdrop ~ .modal-backdrop {
  z-index: 410;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  display: grid;
  justify-items: center;
  align-items: safe center; /* milieu par défaut ; « safe » évite de couper le haut si trop haut */
  padding: 1.25rem 1rem 2rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  background: rgba(10, 10, 10, 0.55);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

.modal-backdrop.modal-backdrop--top {
  align-items: start;
}

.modal-backdrop.modal-backdrop--middle {
  align-items: safe center;
}

.modal-backdrop.modal-backdrop--bottom {
  align-items: safe end;
}

.modal-backdrop[hidden] {
  display: none !important;
}

.modal {
  --modal-max-w: calc(100vw - 2rem);
  --modal-max-h: calc(100dvh - 2.5rem);
  --modal-width: 56rem; /* moyenne par défaut (~896px) */
  box-sizing: border-box;
  width: min(var(--modal-width), var(--modal-max-w));
  max-width: var(--modal-max-w);
  max-height: var(--modal-max-h);
  margin: 0 auto;
  background: var(--panel);
  border: 2px solid var(--ink);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.modal:focus {
  outline: none;
}

@supports not (height: 100dvh) {
  .modal {
    --modal-max-h: calc(100vh - 2.5rem);
  }
}

/* Tailles design system : petite / moyenne (défaut) / grande */
.modal.modal--sm {
  --modal-width: 40rem; /* ~640px */
}

.modal.modal--md {
  --modal-width: 56rem; /* ~896px */
}

.modal.modal--lg {
  --modal-width: 72rem; /* ~1152px */
}

/* Hauteur fixe (évite le yoyo selon le nombre de résultats) */
#themes-modal-backdrop > .modal,
#developer-modal-backdrop > .modal.is-fixed-h {
  height: var(--modal-max-h);
}

/* Outil presets : état vide / chargement centré sous la recherche (brique hors flux) */
#developer-modal-backdrop > .modal.is-fixed-h .modal-body:has(.empty-view:not([hidden])) {
  display: flex;
  flex-direction: column;
}

#developer-modal-backdrop > .modal.is-fixed-h .modal-body:has(.empty-view:not([hidden])) > .styleguide {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

#developer-modal-backdrop > .modal.is-fixed-h .empty-view:not([hidden]) {
  flex: 1 1 auto;
  min-height: 0;
}

.modal-header {
  --modal-header-inset: 0.65rem;
  --inv-bg: var(--ink);
  --inv-fg: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--modal-header-inset) var(--modal-header-inset) var(--modal-header-inset) 1.25rem;
  border-bottom: 2px solid var(--ink);
  flex-shrink: 0;
  background: var(--ink);
  color: var(--panel);
}

.modal-header .view-title {
  margin: 0;
  min-width: 0;
  font-size: 1.35rem;
  color: inherit;
}

.modal-header .view-title:has(> svg),
.modal-header .view-title:has(> a),
.modal-header .view-title:has(> .modal-title-lead) {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.modal-header .view-title:has(> a),
.modal-header .view-title:has(> .modal-title-lead) {
  --title-crumb-gap: 0.25rem;
  gap: var(--title-crumb-gap);
}

.modal-header .view-title:has(> a) > .link {
  flex-shrink: 0;
  gap: var(--title-crumb-gap);
  padding: 0.35rem var(--modal-header-inset);
  margin-right: calc(-1 * var(--modal-header-inset));
  border: 1px solid transparent;
  /* Mêmes tokens inversés que `.modal-close` (hover = primary hover) */
  --bg: var(--inv-bg);
  --ink: var(--inv-fg);
  --panel: var(--inv-bg);
  --brick-red: var(--inv-fg);
  --on-accent-fg: var(--inv-bg);
}

.modal-header .view-title:has(> a) > .link:has(> svg) {
  margin-left: calc(-1 * var(--modal-header-inset));
}

.modal-header .view-title:has(> a) > .link:hover,
.modal-header .view-title:has(> a) > .link:focus-visible {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--ink);
  outline: none;
}

.modal-header .view-title:has(> a) > .link:hover > span,
.modal-header .view-title:has(> a) > .link:focus-visible > span {
  text-decoration: none;
}

.modal-header .view-title > svg {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

.modal-header .view-title > .modal-title-lead {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.modal-header .view-title .modal-title-brand {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  background-color: currentColor;
  /* Le brick remplit le viewBox (contrairement aux glyphes Remix) : inset optique */
  -webkit-mask: url("../img/brickcard-generator-logo.svg") center / 80% 80% no-repeat;
  mask: url("../img/brickcard-generator-logo.svg") center / 80% 80% no-repeat;
}

.modal-header > div {
  min-width: 0;
  flex: 1 1 auto;
}

/* Même mécanisme que le menu impression : le primary DS, tokens inversés */
.modal-header .modal-close {
  --bg: var(--inv-bg);
  --ink: var(--inv-fg);
  --panel: var(--inv-bg);
  --brick-red: var(--inv-fg);
  --on-accent-fg: var(--inv-bg);
}

.modal-body {
  padding: 1.25rem;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: none;
}

/* Chrome rend les overflow:auto tabulables ; le corps n’est pas un contrôle */
.modal-body:focus {
  outline: none;
}

.modal-body:has(> .empty-view:not([hidden])) {
  display: grid;
  place-content: center;
  place-items: center;
  overflow: visible;
}

.modal-confirm-msg {
  margin: 0;
  text-align: center;
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.85rem 1.25rem 1.1rem;
  flex-shrink: 0;
}

/* Zones d’actions : gauche = validation / sauvegarde ; droite = danger */
.modal-footer-start,
.modal-footer-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.modal-footer-end {
  margin-left: auto;
}

/* Visuel : Annuler puis action primaire à droite (éditeur : Supprimer à gauche) ;
   tabulation : primaire → Annuler → Supprimer */
.modal-footer--primary-first .modal-footer-start {
  order: 1;
}

.modal-footer--primary-first .modal-footer-end {
  order: 2;
  flex-direction: row-reverse;
}

.modal-footer .btn {
  /* Aligne les hauteurs mixte (normal + sm) sur l’axe vertical */
  align-self: center;
}

.modal-close {
  flex-shrink: 0;
}

.themes-toolbar {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 0.85rem 1.25rem;
  position: relative;
  z-index: 2;
  overflow: visible;
}

.themes-toolbar .search-bar {
  width: min(100%, 28rem);
}

.themes-section {
  margin-bottom: 1.75rem;
}

.themes-section:last-of-type {
  margin-bottom: 0;
}

.themes-section .section-title {
  text-align: center;
}

body.modal-open {
  overflow: hidden;
}

/* Écran étroit : plein écran viewport, plus d’overlay visible */
@media (max-width: 640px) {
  .modal-backdrop {
    padding: 0;
    place-items: stretch;
    overflow: hidden;
    background: var(--panel);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .modal,
  .modal.modal--sm,
  .modal.modal--md,
  .modal.modal--lg {
    --modal-max-w: 100vw;
    --modal-max-h: 100dvh;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: none;
  }

  @supports not (height: 100dvh) {
    .modal,
    .modal.modal--sm,
    .modal.modal--md,
    .modal.modal--lg {
      --modal-max-h: 100vh;
      height: 100vh;
      max-height: 100vh;
    }
  }

  /* Titre : lien de section avec icône → icône seule (texte masqué, toujours nommé) */
  .modal-header .view-title > .link:has(> svg) {
    position: relative;
  }

  .modal-header .view-title > .link:has(> svg) > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

.themes-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.25rem 1rem;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.settings-sections {
  display: grid;
  gap: 0.85rem;
}

.settings-panel {
  padding: 1rem 1.1rem;
  background: var(--bg);
}

.theme-mode-switch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0.4rem;
}

.theme-mode-switch .btn {
  width: 100%;
}

.md-content {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink);
}

.md-content > *:first-child {
  margin-top: 0;
}

.md-content > *:last-child {
  margin-bottom: 0;
}

.md-content h2,
.md-content h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 1.35rem 0 0.55rem;
  color: var(--ink);
}

.md-content h2 {
  font-size: 1.2rem;
}

.md-content h3 {
  font-size: 1.05rem;
}

.md-content p,
.md-content ul,
.md-content ol,
.md-content blockquote {
  margin: 0 0 0.9rem;
}

.md-content ul,
.md-content ol {
  padding-left: 1.25rem;
}

.md-content li + li {
  margin-top: 0.25rem;
}

.md-content strong {
  font-weight: 700;
}

.md-content code {
  font-family: var(--font-ui);
  font-size: 0.92em;
  font-weight: 600;
  padding: 0.1em 0.35em;
  background: var(--row-hover);
  border: 1px solid var(--line);
}

.md-content pre {
  margin: 0 0 0.9rem;
  padding: 0.85rem 1rem;
  overflow: auto;
  background: var(--row-hover);
  border: 1px solid var(--line);
}

.md-content pre code {
  padding: 0;
  border: 0;
  background: none;
}

.md-content blockquote {
  padding: 0.15rem 0 0.15rem 0.9rem;
  border-left: 3px solid var(--line-strong);
  color: var(--ink-soft);
}

.md-content hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 1.25rem 0;
}

.md-content img {
  max-width: 100%;
  height: auto;
}

/* ——— Editor ——— */
.editor-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(280px, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 840px) {
  .editor-layout {
    grid-template-columns: 1fr;
  }
}

input[type="text"]:not(.form-control),
input[type="number"]:not(.form-control),
textarea:not(.form-control) {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.7rem 0.85rem;
  color: var(--ink);
  background: var(--input-bg);
}

input[type="text"]:not(.form-control):focus,
input[type="number"]:not(.form-control):focus,
textarea:not(.form-control):focus {
  outline: 1px solid var(--brick-red);
  outline-offset: 1px;
}

textarea {
  resize: vertical;
  min-height: 72px;
}

/* Erreurs page / panel (hors design system form-field) */
.error {
  color: var(--form-error);
  font-size: 0.85rem;
  margin: 0.4rem 0 0;
}

.preview-wrap {
  position: sticky;
  top: 1rem;
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  align-content: start;
}

@media (max-width: 840px) {
  .preview-wrap {
    position: static;
  }
}

@media (max-width: 840px) and (min-width: 540px) {
  .preview-wrap--pair {
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    width: 100%;
  }
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.field-row-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 560px) {
  .field-row,
  .field-row-3 {
    grid-template-columns: 1fr;
  }
}

.theme-pill {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--swatch, var(--brick-red));
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.theme-tile {
  --theme-tile-w: 7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: var(--theme-tile-w);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
}

.theme-tile.is-editable {
  cursor: pointer;
}

.theme-tile:focus,
.theme-tile:focus-visible {
  outline: none;
}

.theme-tile-face {
  box-sizing: border-box;
  width: var(--theme-tile-w);
  height: calc(var(--theme-tile-w) * 88 / 63);
  flex-shrink: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: 0.2rem;
  padding: 0.4rem 0.35rem 0.45rem;
  border: none;
  border-radius: var(--card-radius, 2mm);
  overflow: hidden;
  background: var(--theme-accent, var(--card-default-accent, #6e6e6e));
  color: var(--theme-accent-fg, #ffffff);
  font-family: var(--font-card);
  text-transform: uppercase;
  transform-origin: center center;
  transition: transform 0.15s ease;
}

.theme-tile.is-editable:hover .theme-tile-face,
.theme-tile.is-editable:focus-visible .theme-tile-face {
  transform: scale(1.04);
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .theme-tile-face {
    transition: none;
  }
}

.theme-tile-name {
  margin: 0;
  width: 100%;
  font-family: var(--font-card);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-align: center;
  color: var(--theme-accent-fg, #ffffff);
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.theme-tile-logo-wrap {
  position: relative;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.theme-tile-logo {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.theme-tile-logo-wrap--crop {
  box-sizing: border-box;
  justify-self: stretch;
  align-self: stretch;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  margin: var(--card-logo-inset-tile, 1mm);
  padding: 0;
  position: relative;
  overflow: hidden;
  container-type: size;
}

.theme-tile-logo-wrap--crop .theme-tile-logo:not(.is-brand) {
  position: static;
  left: auto;
  top: auto;
  display: block;
  flex-shrink: 0;
  width: calc(var(--theme-tile-w) * 0.75 * min(var(--logo-zoom, 1), 2.5));
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: translate(
    calc(var(--logo-offset-x, 0) * 100cqw),
    calc(var(--logo-offset-y, 0) * 100cqh)
  );
  pointer-events: none;
}

.theme-tile-logo.is-brand {
  width: 2.5rem;
  height: 2.5rem;
  max-width: 2.5rem;
  max-height: 2.5rem;
  flex-shrink: 0;
  aspect-ratio: 1;
  object-fit: contain;
  opacity: 0.9;
}

.theme-tile-count {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.nested-panel {
  margin-top: 0.5rem;
  background: var(--input-bg);
}

/*
 * Cartes physiques : accent via --card-accent (thème LEGO).
 * Face : header auto (1 ligne) · photo flexible · footer fixe.
 */
.card {
  width: var(--card-w);
  height: var(--card-h);
  background: var(--card-accent, var(--card-default-accent, #6e6e6e));
  border-radius: var(--card-radius, 2mm);
  border: var(--card-face-border-width, 3mm) solid var(--card-accent, var(--card-default-accent, #6e6e6e));
  overflow: hidden;
  display: grid;
  --card-footer-h: 20mm;
  grid-template-rows: auto minmax(0, 1fr) var(--card-footer-h);
  position: relative;
  flex-shrink: 0;
  --card-accent: var(--card-default-accent, #6e6e6e);
  --card-accent-fg: var(--card-default-accent-fg, #ffffff);
  font-family: var(--font-card);
  text-transform: uppercase;
}

.card-header {
  box-sizing: border-box;
  height: auto;
  background: var(--card-accent);
  color: var(--card-accent-fg);
  padding: 0;
  margin: 0;
  text-align: left;
  border-bottom: none;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5mm;
  overflow: visible;
  line-height: 1;
}

.card-header:has(.card-lego-set-ref:not(:empty)),
.card-header:has(.card-meta:not([hidden])) {
  border-bottom: var(--card-face-border-width, 3mm) solid
    var(--card-accent, var(--card-default-accent, #6e6e6e));
}

.card-lego-set-ref {
  font-family: var(--font-card);
  font-size: 11pt;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  margin: 0;
  padding: 0;
  color: var(--card-accent-fg);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.card-lego-set-ref:empty {
  display: none;
}

.card-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1mm;
  flex-shrink: 0;
  margin: 0 0 0 auto;
  padding: 0;
  line-height: 1;
}

.card-meta[hidden] {
  display: none !important;
}

.card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5mm;
  padding: 0;
  background: none;
  color: var(--card-accent-fg);
  line-height: 1;
  white-space: nowrap;
  border-radius: 0;
}

.card-badge[hidden] {
  display: none !important;
}

.card-badge-icon {
  width: 3.2mm;
  height: 3.2mm;
  flex-shrink: 0;
  display: block;
}

.card-badge-value {
  font-family: inherit;
  font-size: 8pt;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  padding: 0;
  margin: 0;
}

.card-photo {
  position: relative;
  overflow: hidden;
  background: var(--card-accent, var(--card-default-accent, #6e6e6e));
  z-index: 1;
  min-height: 0;
  display: grid;
  place-items: center;
}

/* Cadre photo arrondi : clippe l’image (y compris avec transform) ; coins = accent carte. */
.card-photo-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: var(--card-image-radius, 1mm);
  clip-path: inset(0 round var(--card-image-radius, 1mm));
  background: #ffffff;
}

.card-photo-frame[hidden] {
  display: none !important;
}

.card-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5mm;
  z-index: 0;
  pointer-events: none;
  color: var(--card-accent-fg, #fff);
  text-align: center;
}

.card-brand[hidden] {
  display: none !important;
}

.card-brand-logo {
  display: block;
  height: var(--card-brand-logo-h, 16mm);
  width: auto;
  max-width: 28mm;
  object-fit: contain;
  opacity: 0.9;
}

.card-brand-name {
  margin: 0;
  font-family: var(--font-card);
  font-size: 14pt;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: inherit;
  text-transform: uppercase;
}

.card-photo-img {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  max-width: none;
  transform-origin: center center;
  pointer-events: none;
}

.card-photo-img[hidden] {
  display: none !important;
}

.card-footer {
  box-sizing: border-box;
  height: var(--card-footer-h);
  min-height: var(--card-footer-h);
  max-height: var(--card-footer-h);
  background: var(--card-accent);
  color: var(--card-accent-fg);
  padding: 0 2mm;
  border-top: var(--card-face-border-width, 3mm) solid
    var(--card-accent, var(--card-default-accent, #6e6e6e));
  text-align: center;
  z-index: 1;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.card-footer .card-title {
  margin: 0;
  font-family: var(--font-card);
  font-size: 13pt;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--card-accent-fg);
  word-break: break-word;
  text-align: center;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.card-footer .card-title:empty {
  display: none;
}

.card-back {
  width: var(--card-w);
  height: var(--card-h);
  background: var(--card-accent, var(--card-default-accent, #6e6e6e));
  border-radius: var(--card-radius, 2mm);
  border: none;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  position: relative;
  flex-shrink: 0;
  color: var(--card-accent-fg, var(--card-default-accent-fg, #fff));
  text-align: center;
  padding: 0;
  --card-accent: var(--card-default-accent, #6e6e6e);
  --card-accent-fg: var(--card-default-accent-fg, #ffffff);
  --card-brand-logo-h: 16mm;
  font-family: var(--font-card);
  text-transform: uppercase;
}

.card-back .card-brand {
  grid-row: 2;
  z-index: 1;
}

.card-back .card-theme {
  grid-row: 3;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 8mm);
  pointer-events: none;
}

.card-back .card-theme[hidden] {
  display: none !important;
}

.card-back .card-theme-logo {
  display: block;
  height: auto;
  width: auto;
  max-height: 10mm;
  max-width: 36mm;
  object-fit: contain;
  background: transparent;
  border: none;
}

.card-back .card-theme-logo[hidden] {
  display: none !important;
}

.card-back--has-theme-logo {
  grid-template-rows: 1fr 1fr;
}

.card-back--has-theme-logo .card-brand {
  grid-row: 1;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.card-back--has-theme-logo .card-theme {
  grid-row: 2;
  align-self: stretch;
  justify-self: stretch;
  box-sizing: border-box;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  margin: var(--card-logo-inset, 3mm);
  padding: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}

.card-back--has-theme-logo .card-theme-logo {
  position: static;
  left: auto;
  top: auto;
  z-index: 1;
  display: block;
  flex-shrink: 0;
  width: calc(var(--card-w) * 0.75 * min(var(--logo-zoom, 1), 2.5));
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: translate(
    calc(var(--logo-offset-x, 0) * 100cqw),
    calc(var(--logo-offset-y, 0) * 100cqh)
  );
  pointer-events: none;
}

/* ——— Print layout ——— */
.print-root {
  display: none;
}

.print-sheet {
  --print-scale: 1;
  width: 210mm;
  height: 297mm;
  padding: 5mm;
  display: grid;
  grid-template-columns: repeat(var(--cols), calc(var(--card-w) * var(--print-scale)));
  grid-template-rows: repeat(var(--rows), calc(var(--card-h) * var(--print-scale)));
  gap: calc(5mm * var(--print-scale)) calc(3mm * var(--print-scale));
  justify-content: center;
  align-content: center;
  box-sizing: border-box;
  page-break-after: always;
  break-after: page;
  overflow: hidden;
  background: #fff;
}

.print-sheet:last-child {
  page-break-after: auto;
  break-after: auto;
}

.print-slot {
  width: calc(var(--card-w) * var(--print-scale));
  height: calc(var(--card-h) * var(--print-scale));
  overflow: hidden;
}

.print-slot > .card,
.print-slot > .card-back {
  transform: scale(var(--print-scale));
  transform-origin: top left;
  margin-right: calc(var(--card-w) * (var(--print-scale) - 1));
  margin-bottom: calc(var(--card-h) * (var(--print-scale) - 1));
}

.print-slot.is-empty {
  visibility: hidden;
}

@media screen {
  /* Layout hors écran pour mesurer les cartes avant impression (zoom/pan). */
  .print-root.is-preparing {
    display: block;
    position: absolute;
    left: -10000px;
    top: 0;
    width: max-content;
    height: auto;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
  }

  .print-root.is-preview {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.7);
    overflow: auto;
    overscroll-behavior: none;
    padding: 1.5rem;
  }

  .print-root.is-preview .print-sheet {
    margin: 0 auto 1rem;
    outline: 1px solid #666;
  }
}

/* ——— Toast ——— */
.toast {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  background: var(--toast-bg);
  color: var(--toast-fg);
  padding: 0.75rem 1.1rem;
  border-radius: 0;
  border: 1px solid var(--line-strong);
  font-size: 0.9rem;
  z-index: 10000;
  max-width: 22rem;
}

.toast.is-error {
  background: var(--brick-red-dark);
  color: var(--on-accent-fg);
  border-color: var(--brick-red-dark);
}

/* ——— Print media ——— */
@media print {
  @page {
    size: A4 portrait;
    margin: 0;
  }

  html,
  body {
    background: #fff !important;
    margin: 0;
    padding: 0;
    height: auto;
    overflow: visible;
    overscroll-behavior: auto;
  }

  .app {
    height: auto;
    overflow: visible;
    touch-action: auto;
  }

  /* Ne garder que les feuilles de cartes — rien d’autre (toast, UI, etc.). */
  body > *:not(.print-root) {
    display: none !important;
  }

  .print-root {
    display: block !important;
    position: static !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: auto !important;
    pointer-events: auto !important;
  }

  .print-root.is-preparing,
  .print-root.is-preview {
    /* Annuler le layout hors écran / aperçu pendant l’impression réelle */
    position: static !important;
    left: auto !important;
    opacity: 1 !important;
  }

  .print-sheet {
    margin: 0;
    outline: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .card,
  .card-back {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /*
   * Fond perdu dos : rectangle sur le slot (repère feuille, pas le
   * transform de la carte). 1 mm L/R, 2 mm H/B — scale avec la grille
   * (gap 3 mm / 5 mm).
   */
  .print-sheet--back {
    --print-bleed-x: calc(1mm * var(--print-scale));
    --print-bleed-y: calc(2mm * var(--print-scale));
    overflow: hidden;
  }

  .print-sheet--back .print-slot:not(.is-empty) {
    position: relative;
    overflow: visible;
  }

  .print-sheet--back .print-slot:not(.is-empty)::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--print-bleed-y)) calc(-1 * var(--print-bleed-x));
    background: var(--card-accent, var(--card-default-accent, #6e6e6e));
    pointer-events: none;
  }
}