/* Photos de zèbre, en bichromie à la couleur d'accent du thème (crédits : web/static/img/zebre/CREDITS.md).
   Photo grise + calque d'accent en mode « color », le tout fondu dans le fond du thème (multiply en clair, screen en sombre) et dans un masque dégradé.
   Deux emplacements seulement : la page de connexion (toujours) et le bas du menu latéral (option « Zèbre dans le menu » du profil). Aucun zèbre ailleurs. */
:root {
  --zb-melange: multiply;
  --zb-plein: #000;      /* seule compte l opacité du masque */
  --zb-opa-conn: .34;
  --zb-opa-menu: .32;
  --zb-conn-h: 62vh;
  --zb-menu-h: 190px;
  --zb-img-conn: url("/static/img/zebre/connexion.webp");
  --zb-img-menu: url("/static/img/zebre/menu.webp");
}
:root[data-theme="dark"] {
  --zb-melange: screen;
  --zb-opa-conn: .3;
  --zb-opa-menu: .28;
}

.zb-fond {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  isolation: isolate;
  pointer-events: none;
  background-size: cover;
  background-repeat: no-repeat;
  mix-blend-mode: var(--zb-melange);
}
.zb-fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  mix-blend-mode: color;
}

/* Connexion : grande photo au bas de l'écran, fondue vers le haut */
.zb-conn {
  height: var(--zb-conn-h);
  background-image: var(--zb-img-conn);
  background-position: center 70%;
  opacity: var(--zb-opa-conn);
  -webkit-mask: linear-gradient(to top, var(--zb-plein) 35%, transparent 100%);
  mask: linear-gradient(to top, var(--zb-plein) 35%, transparent 100%);
}
@media (max-width: 760px) {
  .zb-conn { --zb-conn-h: 46vh; background-position: 60% 70%; }
}

/* Menu latéral : détail de la tête, au bas de la barre, derrière les entrées. Absent tant que l'option n'est pas cochée. */
#sidebar { isolation: isolate; }
.zb-menu {
  display: none;
  z-index: -1;
  height: var(--zb-menu-h);
  background-image: var(--zb-img-menu);
  background-position: center 30%;
  opacity: var(--zb-opa-menu);
  -webkit-mask: linear-gradient(to top, var(--zb-plein) 40%, transparent 100%);
  mask: linear-gradient(to top, var(--zb-plein) 40%, transparent 100%);
}
:root[data-zebre="menu"] .zb-menu { display: block; }
#sidebar.collapsed .zb-menu { display: none; }

/* Animation à l'ouverture de la colonne (zebre_anime.js) : la photo s'efface pendant la scène puis revient ; le calque du dessin ne reçoit jamais un clic ;
   « Paramètres » devient le comptoir derrière lequel le zèbre se cache (--zb-a, de 0 à 1, posé par le script). */
.zb-menu { transition: opacity .3s ease; }
.zb-menu[data-etat="anim"] { opacity: 0; }
.zb-anime {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-zebre);
  pointer-events: none;
}
#sidebar .nav-btn.zb-comptoir {
  background: color-mix(in oklab, var(--surface2, var(--surface)) calc(var(--zb-a, 0) * 100%), transparent) !important;
  box-shadow: 0 -3px 0 color-mix(in oklab, var(--accent) calc(var(--zb-a, 0) * 45%), transparent);
}
@media (prefers-reduced-motion: reduce) { .zb-anime { display: none; } }

/* Interrupteur de Mon profil (une étiquette en ligne n'a ni largeur ni hauteur : sans cette règle il reste invisible dans l'interface Classique) */
.um-profil .toggle-switch { display: inline-block; vertical-align: middle; }