:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  /* Palette Smappen (comme smappen-data) : encre violette, neutres teintés de violet. */
  --bg: #f4f2f8;
  --text: #1f1735;
  --text-2: rgba(31, 23, 53, 0.68);
  --text-3: rgba(31, 23, 53, 0.58);
  --glass: rgba(255, 255, 255, 0.38);
  --glass-hi: rgba(255, 255, 255, 0.62);
  --glass-rim: rgba(255, 255, 255, 0.85);
  --glass-spec: rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.55);
  --hairline: rgba(58, 49, 82, 0.13);
  --fill: rgba(31, 23, 53, 0.06);
  --fill-2: rgba(31, 23, 53, 0.1);
  --accent: #7944c0;
  --accent-text: #ffffff;
  --accent-ring: rgba(121, 68, 192, 0.2);
  --haze: #ddd0ef;
  --green: #34c759;
  --green-text: #1d7a36;
  --red: #df5460;
  --orange: #e8a03a;
  --yellow: #ffcc00;
  --teal: #1fa89f;
  /* Les congés : le jaune de l'agenda « Congés » de Google Agenda, avec un texte foncé (render.js aussi). */
  --leave: #e8c547;
  --leave-text: #2b2200;
  --shadow: 0 1.25rem 3rem -1rem rgba(31, 23, 53, 0.3), 0 0.25rem 0.75rem -0.25rem rgba(31, 23, 53, 0.12);
  --radius: 18px;

  /* --- Design system ------------------------------------------------------------------
     Espacements sur une grille de 4 ; rayons concentriques (un élément dans un autre a le
     rayon de son parent moins l'écart qui les sépare) ; typographie à la manière d'Apple. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --r-xs: 6px; /* touches, petites étiquettes */
  --r-sm: 10px; /* éléments de menu, pastilles */
  --r-md: 12px; /* boutons, champs, segments */
  --r-lg: 16px; /* cartes, fiches, vignettes */
  --r-xl: 20px; /* notifications, minimap, zoom */
  --r-2xl: 28px; /* panneaux et fenêtres */
  --r-pill: 999px;
  --fs-caption: 11px;
  --fs-footnote: 12px;
  --fs-sub: 13px;
  --fs-body: 14px;
  --fs-callout: 15px;
  --fs-headline: 17px;
  --fs-title: 20px;
  --fs-title-lg: 24px; /* grands titres des jeux (phrase à dessiner…) */
  --fs-display: 30px; /* chronos et grands chiffres */
  /* Durées : un appui se sent tout de suite, ce qui arrive prend son temps, ce qui part file. */
  --dur-press: 90ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 380ms;
  --dur-sheet: 500ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  /* Mise en page : marge des bords de l'écran, écart entre éléments flottants. */
  --edge: 16px;
  --gap: 12px;
  --panel-w: 392px;
  --dock-h: 64px;
  --mini-w: 232px;
  --panel-hi: rgba(255, 255, 255, 0.78);
  --panel-lo: rgba(255, 255, 255, 0.62);

  /* Mouvements d'Apple : la courbe des feuilles d'iOS pour ce qui glisse, un ressort pour ce qui grandit. */
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #120e1d;
  --text: #f4f1fa;
  --text-2: rgba(244, 241, 250, 0.7);
  --text-3: rgba(244, 241, 250, 0.6);
  --glass: rgba(28, 22, 46, 0.45);
  --glass-hi: rgba(72, 60, 104, 0.5);
  --glass-rim: rgba(255, 255, 255, 0.22);
  --glass-spec: rgba(255, 255, 255, 0.14);
  --glass-strong: rgba(36, 29, 58, 0.84);
  --glass-border: rgba(255, 255, 255, 0.14);
  --hairline: rgba(255, 255, 255, 0.1);
  --fill: rgba(172, 141, 224, 0.13);
  --fill-2: rgba(172, 141, 224, 0.22);
  --accent: #9466d6;
  --accent-ring: rgba(172, 141, 224, 0.28);
  --green-text: #5ad27a;
  --haze: #4a3a6e;
  --shadow: 0 1.25rem 3rem -1rem rgba(0, 0, 0, 0.6), 0 0.25rem 0.75rem -0.25rem rgba(0, 0, 0, 0.35);
  --panel-hi: rgba(44, 36, 70, 0.86);
  --panel-lo: rgba(30, 24, 50, 0.8);
  color-scheme: dark;
}

/* Bascule du thème en cours de journée (Réglages → Apparence, « selon le jour ») : un fondu lent. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.9s;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

[hidden] {
  display: none !important;
}

::selection {
  background: var(--haze);
}
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

/* Verre « Liquid Glass » : flou + saturation, reflet spéculaire en haut à gauche,
   liseré lumineux à l'intérieur des bords. */
.glass {
  background: linear-gradient(145deg, var(--glass-hi), var(--glass));
  -webkit-backdrop-filter: var(--glass-blur, blur(26px) saturate(190%) brightness(1.04));
  backdrop-filter: var(--glass-blur, blur(26px) saturate(190%) brightness(1.04));
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 var(--glass-rim),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 22px rgba(255, 255, 255, 0.07),
    var(--shadow);
  isolation: isolate;
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(130% 70% at 18% -10%, var(--glass-spec), transparent 55%);
  z-index: -1;
}
/* Sans l'effet verre (Réglages → Apparence, theme.js) : des panneaux pleins, de la même teinte, et
   plus aucun flou nulle part. Étude du 04/11 : le flou doublait le travail de la carte graphique.
   Chaque flou de fond passe par var(--glass-blur, <son flou>), et --glass-blur vaut none ici (une
   règle sur * et *::before, essayée d'abord, doublait le calcul des styles quand on marchait).
   Pleins tout à fait, comme « Réduire la transparence » du Mac : sans flou, le moindre pourcent de
   carte qui passait encore s'y voyait, net. Ce qui comptait sur le flou pour rester lisible
   s'opacifie près de sa règle (vue réunion, noms des caméras, coin du feu, bandeaux des jeux). */
:root[data-glass="off"] {
  --glass-blur: none;
  --glass: rgb(246, 244, 250);
  --glass-hi: rgb(255, 255, 255);
  --glass-strong: rgb(255, 255, 255);
  --panel-hi: rgb(255, 255, 255);
  --panel-lo: rgb(248, 246, 251);
}
:root[data-theme="dark"][data-glass="off"] {
  --glass: rgb(30, 24, 49);
  --glass-hi: rgb(52, 43, 78);
  --glass-strong: rgb(38, 31, 61);
  --panel-hi: rgb(46, 38, 72);
  --panel-lo: rgb(32, 26, 52);
}

kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 0.35em;
  margin: 0 0.1em;
  border-radius: var(--r-xs);
  background: var(--fill);
  border: 1px solid var(--hairline);
  font: 600 11px/1.6 var(--font);
  text-align: center;
}

/* --- Boutons et champs --------------------------------------------------- */

.btn {
  border: 0;
  border-radius: var(--r-md);
  padding: 9px 16px;
  background: var(--fill);
  font-weight: 600;
  font-size: var(--fs-body);
  cursor: pointer;
  transition: transform var(--dur-slow) var(--ease-spring), background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.btn:hover {
  background: var(--fill-2);
}
/* Un appui s'enfonce tout de suite ; au relâché, le bouton revient sur un ressort. */
.btn:active,
.chip:active,
.round-btn:active,
.zoom button:active,
.floor-item:active {
  transform: scale(0.96);
  transition-duration: var(--dur-press);
  transition-timing-function: var(--ease-out);
}
.btn.primary {
  background: var(--accent);
  color: var(--accent-text);
}
.btn.primary:hover {
  filter: brightness(1.08);
}
.btn.danger {
  color: var(--red);
}
.btn.large {
  padding: 14px 18px;
  font-size: 16px;
  border-radius: var(--r-md);
}
.btn.small {
  padding: 6px 10px;
  font-size: var(--fs-sub);
  border-radius: var(--r-sm);
}
.btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-sub);
  color: var(--text-2);
  font-weight: 500;
}
.field input,
.field select,
.field textarea,
.input {
  width: 100%;
  border: 1px solid var(--hairline);
  background: var(--glass-strong);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: var(--fs-callout);
  color: var(--text);
  outline: none;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.field textarea {
  resize: vertical;
  min-height: 90px;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hint-text {
  margin: 0;
  font-size: var(--fs-sub);
  color: var(--text-3);
  line-height: 1.5;
}
/* Connexion avec Google : le bouton suit la charte de Google (fond clair, « G » en couleurs). */
.btn.google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: #1f1f1f;
  box-shadow: inset 0 0 0 1px rgba(31, 23, 53, 0.18);
}
.btn.google-btn:hover {
  background: #f7f8fa;
}
.google-mark {
  flex: none;
}
/* Accueil : connecté (adresse, changer de compte), ou bouton de connexion avec son explication. */
.join-account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--fill, rgba(120, 120, 128, 0.12));
}
.join-account.stacked {
  flex-direction: column;
  align-items: stretch;
  background: none;
  padding: 0;
}
.join-account .grow {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.account-email {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}
/* Connexion obligatoire, pas encore connecté : l'accueil réduit au bouton de connexion. */
.join.signin .join-card {
  width: min(440px, 100%);
}
.signin-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.signin-lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}
.signin-panel .google-btn {
  padding: 13px 18px;
  font-size: 15px;
}
.join.signin .credits {
  margin-top: 18px;
  text-align: center;
}

/* Identifiant Smapville (Réglages > Profil) : lisible, sélectionnable, copiable. */
.identity-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.identity-id {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border-radius: var(--r-sm, 10px);
  background: var(--fill, rgba(120, 120, 128, 0.12));
  font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace;
  overflow-wrap: anywhere;
  user-select: all;
}

.segmented {
  display: flex;
  padding: 2px;
  border-radius: var(--r-sm);
  background: var(--fill);
  gap: 2px;
}
.segmented button {
  flex: 1;
  border: 0;
  background: transparent;
  border-radius: var(--r-sm);
  padding: 6px 8px;
  font-size: var(--fs-sub);
  font-weight: 600;
  cursor: pointer;
  color: var(--text-2);
  position: relative;
  white-space: nowrap;
}
.segmented button.active {
  background: var(--glass-strong);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.switch {
  position: relative;
  width: 44px;
  height: 26px;
  flex: none;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch span {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: var(--fill-2);
  transition: background var(--dur-base) var(--ease-out);
  cursor: pointer;
}
.switch span::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  transition: transform var(--dur-slow) var(--ease-spring), width var(--dur-base) var(--ease-out);
}
.switch input:checked + span {
  background: var(--green);
}
.switch input:checked + span::after {
  transform: translateX(18px);
}
.switch:active span::after {
  width: 28px;
}
.switch:active input:checked + span::after {
  transform: translateX(12px);
}
/* L'interrupteur se voit au clavier comme les boutons. */
.switch input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.badge {
  animation: badge-pop var(--dur-slow) var(--ease-spring) backwards;
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  pointer-events: none;
}

/* --- Accueil -------------------------------------------------------------- */

.join {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
  background: radial-gradient(1200px 600px at 10% -10%, #9db4ff 0%, transparent 60%), radial-gradient(900px 600px at 110% 110%, #ffcf8a 0%, transparent 55%),
    linear-gradient(160deg, #dfe6ff, #f6efe6);
}
:root[data-theme="dark"] .join {
  background: radial-gradient(1200px 600px at 10% -10%, #253a85 0%, transparent 60%), radial-gradient(900px 600px at 110% 110%, #6a3f12 0%, transparent 55%),
    linear-gradient(160deg, #11131c, #191512);
}
.join-card {
  width: min(920px, 100%);
  border-radius: var(--r-2xl);
  padding: 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.brand h1 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.02em;
}
.brand p {
  margin: 2px 0 0;
  color: var(--text-2);
  font-size: var(--fs-body);
}
.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  box-shadow: 0 6px 16px rgba(110, 74, 43, 0.22);
}
.join-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
}
@media (max-width: 760px) {
  .join-grid {
    grid-template-columns: 1fr;
  }
}
.preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.preview-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #1d2030;
}
.preview-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.preview-off {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-bottom: 56px;
  color: #c7cbe0;
  font-size: var(--fs-sub);
  background: linear-gradient(160deg, #2a2f48, #1b1e2e);
}
.preview-toggles {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
.round-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: var(--glass-blur, blur(16px));
  backdrop-filter: var(--glass-blur, blur(16px));
  color: #fff;
  cursor: pointer;
}
.round-btn.off {
  background: var(--red);
}
.round-btn svg {
  width: 20px;
  height: 20px;
}
.meter {
  height: 6px;
  border-radius: 3px;
  background: var(--fill);
  overflow: hidden;
}
.meter div {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--green), #a8e063);
  transition: width 0.08s linear;
}
.identity {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.avatar-editor {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--text);
}
.avatar-editor canvas {
  width: 96px;
  height: 96px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--fill), transparent);
  border: 1px solid var(--hairline);
}
.swatch-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.swatch-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.swatch-row > span {
  width: 64px;
  font-size: var(--fs-footnote);
  color: var(--text-3);
  font-weight: 500;
}
.swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  padding: 0;
}
.swatch.active {
  border-color: var(--accent);
}
.chip {
  border: 0;
  border-radius: var(--r-sm);
  padding: 3px 8px;
  font-size: var(--fs-footnote);
  background: var(--fill);
  cursor: pointer;
  transition: transform var(--dur-slow) var(--ease-spring), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chip.active {
  background: var(--accent);
  color: #fff;
}

/* --- Bureau ----------------------------------------------------------------- */

.app {
  position: fixed;
  inset: 0;
  /* Panneau ouvert : la carte lui fait de la place (comme dans smappen-data), et tout ce qui
     flotte se recentre dans ce qui reste, avec la même courbe que le panneau. */
  --panel-space: 0px;
  --mini-space: calc(var(--edge) + var(--mini-w) + var(--gap));
  --dock-w: 540px;
  --stage-center: calc((100% - var(--panel-space)) / 2);
  /* Le dock reste centré sur la carte visible, sauf s'il touchait la minimap. */
  --dock-left: max(var(--stage-center), calc(var(--mini-space) + var(--dock-w) / 2));
  --slide: var(--dur-sheet) var(--ease-sheet);
}
.app.has-panel {
  --panel-space: calc(var(--panel-w) + var(--gap));
}
.app.mini-collapsed {
  --mini-space: calc(var(--edge) + 44px + var(--gap));
}
.app.mini-hidden .minimap {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}
#world {
  position: absolute;
  inset: 0;
  display: block;
  cursor: default;
}
/* Affichage 3D, ou carte 2D dessinée par la carte graphique (WebGPU, WebGL) : la scène sous la
   toile 2D, qui garde les clics, les étiquettes et les bulles. */
.world3d,
.world-gpu {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
#world.pointer {
  cursor: pointer;
}

.top-left {
  position: absolute;
  top: var(--edge);
  left: var(--edge);
  display: flex;
  gap: 8px;
  z-index: 5;
}
.where {
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font-size: var(--fs-sub);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  /* Sa largeur s'anime quand on change de pièce : le contenu ne passe jamais à la ligne, et la
     barre garde la largeur de son contenu (sans « flex: none », overflow la laisserait se réduire). */
  white-space: nowrap;
  overflow: hidden;
  flex: none;
}
.where b {
  font-weight: 700;
}
.where .sep {
  width: 1px;
  height: 14px;
  background: var(--hairline);
}
.where .muted {
  color: var(--text-2);
}
.where-btn {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin: -4px -2px;
  padding: 4px 4px 4px 9px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--fill);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.where-btn:hover {
  background: var(--fill-2);
}
.where-chev {
  display: grid;
  place-items: center;
  color: var(--text-3);
}
.where-chev svg {
  width: 15px;
  height: 15px;
}
/* Écran de téléphone : sans « Bureaux » (l'étage le dit), la barre tient avec ses deux boutons. */
@media (max-width: 480px) {
  .where:not(.compact) > b {
    display: none;
  }
}
.conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}
.conn-dot.off {
  background: var(--red);
}

/* Vignettes vidéo : un calque de tout l'écran où ui.js pose chaque vignette au pixel près (vue
   bureau : une rangée en haut ; vue réunion : en grand). D'une place à l'autre, elles glissent en
   transform (tile-motion.js) : ni la taille ni la place ne s'animent ici. */
.videos {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.tile {
  position: absolute;
  left: 0;
  top: 0;
  width: 168px;
  height: 108px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #222638;
  box-shadow: var(--shadow);
  cursor: pointer;
  pointer-events: auto;
  outline: 2.5px solid transparent;
  transition:
    opacity var(--dur-base) var(--ease-out),
    outline-color 0.15s;
}
/* Hors champ (derrière « +N », ou l'ambiance en vue réunion). */
.tile.off {
  opacity: 0;
  pointer-events: none;
}
.tile.speaking {
  outline-color: var(--green);
}
.tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tile.mirror video {
  transform: scaleX(-1);
}
.tile.screen video {
  object-fit: contain;
  background: #000;
}
.tile .tile-avatar {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #2e3350, #1d2032);
}
.tile .tile-name {
  position: absolute;
  left: 8px;
  bottom: 7px;
  max-width: calc(100% - 16px);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: var(--glass-blur, blur(10px));
  backdrop-filter: var(--glass-blur, blur(10px));
  color: #fff;
  font-size: var(--fs-footnote);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Sans l'effet verre : plus sombre, la vidéo ne s'efface plus derrière le nom. */
:root[data-glass="off"] .tile .tile-name {
  background: rgba(0, 0, 0, 0.62);
}
.tile .tile-state {
  position: absolute;
  top: 7px;
  right: 7px;
  display: flex;
  gap: 4px;
}
.tile .tile-state span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 59, 48, 0.9);
  display: grid;
  place-items: center;
  color: #fff;
}
.tile .tile-state svg {
  width: 13px;
  height: 13px;
}
.tile .tile-conn {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: var(--fs-footnote);
}

.dock {
  position: absolute;
  left: var(--dock-left);
  bottom: var(--edge);
  transform: translateX(-50%);
  transition: left var(--slide);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border-radius: var(--r-pill);
  z-index: 8;
}
.dock .sep {
  width: 1px;
  height: 28px;
  background: var(--hairline);
  margin: 0 3px;
}
.dock-btn {
  position: relative;
  height: 44px;
  min-width: 44px;
  border-radius: var(--r-md);
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  cursor: pointer;
  color: var(--text);
  transition: transform var(--dur-slow) var(--ease-spring), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.dock-btn:hover {
  background: var(--fill);
}
.dock-btn.active {
  background: var(--fill-2);
}
.dock-btn svg {
  width: 21px;
  height: 21px;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
/* La pastille du statut d'une personne porte aussi une forme (ui.js, statusDot) : une coche
   (disponible), une barre (ne pas déranger), une horloge (absent). On la lit sans les couleurs ;
   assez grande pour que la forme se voie. */
.status-dot {
  display: inline-grid;
  place-items: center;
  min-width: 12px;
  min-height: 12px;
}
.status-dot svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* (Sur le jaune, la forme en foncé : le blanc ne s'y lirait pas.) */
.status-dot[data-status="away"] svg {
  stroke: #3a2c00;
}

/* Carte personnelle : son avatar (la pastille du statut dessus), son nom, son statut ; elle
   ouvre son téléphone. En tête du dock, comme dans Gather ; sur un écran trop étroit (card-up),
   au-dessus de lui, à droite : c'est alors celle-ci, la seule hors du dock. */
.dock .dock-btn.dock-me {
  width: auto;
  max-width: 230px;
  gap: 9px;
  padding: 0 16px 0 0;
  border-radius: var(--r-pill);
  justify-content: flex-start;
  text-align: left;
  font: inherit;
}
.dock .dock-me .me-card-face canvas {
  border-radius: 50%;
}
.app:not(.card-up) .me-card,
.app.card-up .dock .dock-me,
.app.card-up .dock .me-sep {
  display: none;
}
.me-card {
  position: absolute;
  right: calc(var(--edge) + var(--panel-space));
  bottom: var(--edge);
  height: var(--dock-h);
  max-width: 240px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 0 8px;
  border-radius: var(--r-pill);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  z-index: 8;
  transition: right var(--slide), bottom var(--slide), opacity var(--dur-base) var(--ease-out), visibility var(--dur-base), transform var(--dur-slow) var(--ease-spring);
}
.me-card:active {
  transform: scale(0.96);
}
.me-card-face {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--fill);
  transition: background var(--dur-fast) var(--ease-out);
}
.me-card:hover .me-card-face,
.dock-me:hover .me-card-face {
  background: var(--fill-2);
}
.me-card-face canvas {
  border-radius: 50%;
}
.me-card-face .dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 16px;
  height: 16px;
  box-shadow: 0 0 0 2.5px var(--glass-strong);
}
.me-card-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.me-card-name b,
.me-card-name small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.me-card-name b {
  font-size: var(--fs-sub);
}
.me-card-name small {
  font-size: var(--fs-caption);
  color: var(--text-2);
}
/* Le petit téléphone de sa carte : c'est lui qui sort, et il compte ce qui y attend (messages qui
   vous concernent, réponses de Smappy). */
.me-card-phone {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: 2px;
  border-radius: 9px;
  background: var(--fill);
  color: var(--text-2);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.me-card-phone .ic,
.me-card-phone svg {
  width: 17px;
  height: 17px;
}
.me-card-phone .badge {
  top: -7px;
  right: -8px;
}
.dock-me:hover .me-card-phone,
.me-card:hover .me-card-phone {
  background: var(--fill-2);
  color: var(--text);
}
.dock-me.active .me-card-phone,
.me-card.active .me-card-phone {
  background: var(--accent);
  color: var(--accent-text);
}
/* Fenêtre étroite : l'avatar seul (le nom et le statut au survol, et pour les lecteurs d'écran),
   et le minuteur du coworking en anneau seul. */
@media (max-width: 720px) {
  .me-card {
    width: var(--dock-h);
    padding: 0;
    justify-content: center;
  }
  .dock .dock-btn.dock-me {
    width: 46px;
    padding: 0;
  }
  .me-card-name,
  .cowork-pill .cowork-pill-text {
    display: none;
  }
  .me-card-phone {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    margin: 0;
    background: none;
  }
  .me-card-phone svg {
    display: none;
  }
  /* (Plus précis que la pastille du minuteur, plus bas : l'anneau reste centré.) */
  .dock .dock-btn.cowork-pill {
    padding: 0;
  }
}
/* Plus étroite encore (layout) : la carte monte au-dessus du dock, qui prend toute la largeur ;
   ce qui flottait juste au-dessus du dock (bulle d'aide, « Vous suivez… », tableau de bord du
   kart) monte d'autant, et le zoom passe au-dessus de la carte, « Recentrer » à sa gauche. */
.app.card-up .me-card {
  bottom: calc(var(--edge) + var(--dock-h) + var(--gap));
}
.app.card-up .zoom,
.app.card-up .recenter,
.app.card-up .hint,
.app.card-up .kart-hud {
  bottom: calc(var(--edge) + 2 * (var(--dock-h) + var(--gap)));
}
.app.card-up .recenter {
  right: calc(var(--edge) + 40px + var(--gap) + var(--panel-space));
}
.app.card-up .follow-chip {
  bottom: calc(var(--edge) + 2 * (var(--dock-h) + var(--gap)) + 46px);
}
/* Panneau ouvert par-dessus : la carte s'efface, au clavier aussi (Tab ne s'y arrête plus). */
.app.panel-over.card-up .me-card {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Fiches et menus : rayon 16, marge 6 → éléments à 10 (rayons concentriques). */
.popover {
  position: fixed;
  z-index: 40;
  border-radius: var(--r-lg);
  padding: 6px;
  min-width: 220px;
  animation: pop-in var(--dur-base) var(--ease-out) backwards;
}
.popover.leaving {
  animation: pop-out var(--dur-fast) var(--ease-in) forwards;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out);
}
.menu-item:hover {
  background: var(--fill);
}
.menu-item.danger {
  color: var(--red);
}
.menu-item:disabled {
  opacity: 0.45;
  cursor: default;
}
.menu-item:disabled:hover {
  background: transparent;
}
.menu-item .check {
  margin-left: auto;
  color: var(--accent);
}
.menu-sep {
  height: 1px;
  background: var(--hairline);
  margin: 6px 4px;
}
/* Réactions, gestes et danses (fiche du bouton du dock) : les bulles et les poses en pixels LimeZu. */
.popover.emote-pop {
  width: min(372px, calc(100vw - 20px));
  padding: 8px 10px;
}
.emote-menu {
  padding: 2px 0 4px;
}
.emote-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 6px 4px;
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--text-2);
}
.emote-head small {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--text-3);
  text-align: right;
}
.emote-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}
.emote-grid.moves {
  grid-template-columns: repeat(4, 1fr);
}
.emote-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 6px 2px 6px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.emote-tile:hover,
.emote-tile:focus-visible {
  background: var(--fill);
}
.emote-tile:active {
  transform: scale(0.94);
}
.emote-tile.on {
  background: var(--accent-ring);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.emote-ic {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 22px;
  line-height: 1;
}
.emote-ic canvas,
.move-preview {
  image-rendering: pixelated;
}
.emote-hand {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: var(--orange);
  box-shadow: 0 1px 3px rgba(31, 23, 53, 0.18);
}
.emote-hand svg {
  width: 16px;
  height: 16px;
}
.emote-label {
  max-width: 100%;
  font-size: var(--fs-caption);
  line-height: 1.2;
  text-align: center;
  color: var(--text-2);
}
.emote-tile.on .emote-label {
  color: var(--text);
  font-weight: 600;
}
.emote-tile kbd {
  min-width: 0;
  padding: 0 4px;
  font-size: 9px;
  line-height: 1.5;
}
.emote-stop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--fill);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sub);
  font-weight: 600;
  cursor: pointer;
}
.emote-stop:hover {
  background: var(--fill-2);
}
@media (prefers-reduced-motion: reduce) {
  .emote-tile {
    transition: none;
  }
  .emote-tile:active {
    transform: none;
  }
}

/* Le téléphone : tout Smapville y tient. Il glisse depuis la droite de l'écran, comme un iPhone
   qu'on sort de sa poche, en verre (cadre arrondi, liseré clair, bord plus sombre à l'intérieur, île
   noire en haut). Il tient la droite : la carte et le dock se décalent (layout), le village reste
   utilisable à côté, sans voile. Son écran d'accueil (#phone-page) et l'application ouverte
   par-dessus (#panel) glissent l'un sur l'autre (ui.js, slideScreens). */
.phone-frame {
  position: absolute;
  right: var(--edge);
  top: max(var(--edge), calc(50% - 470px));
  width: var(--panel-w);
  height: min(calc(100% - 2 * var(--edge)), 940px);
  /* (Au-dessus du Décorateur, comme la fenêtre qu'il était ; il ne recouvre jamais le dock.) */
  z-index: 9;
  display: flex;
  flex-direction: column;
  border-radius: 54px;
  overflow: hidden;
  background: var(--glass-strong);
  box-shadow:
    inset 0 1px 0 var(--glass-rim),
    inset 0 0 0 7px rgba(31, 23, 53, 0.09),
    inset 0 0 0 8px rgba(255, 255, 255, 0.35),
    0 44px 90px -30px rgba(31, 23, 53, 0.55),
    0 14px 34px -14px rgba(31, 23, 53, 0.32);
  transform-origin: 100% 100%;
}
.phone-frame:focus {
  outline: none;
}
.phone-frame.arriving {
  animation: phone-in 0.36s var(--ease-out) backwards;
}
.phone-frame.leaving {
  animation: phone-out 0.2s var(--ease-in) forwards;
  pointer-events: none;
}
/* Écran étroit : le téléphone passe par-dessus la carte (jusqu'au-dessus du dock) au lieu de la
   pousser, et ce qu'il recouvrirait à moitié s'efface. */
.app.panel-over .phone-frame {
  top: var(--edge);
  bottom: calc(var(--edge) + var(--dock-h) + var(--gap));
  height: auto;
}
.app.panel-over .zoom,
.app.panel-over .recenter {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 720px) {
  .phone-frame {
    width: calc(100vw - 2 * var(--edge));
    border-radius: 44px;
  }
}
.phone-stack {
  position: relative;
  flex: 1;
  min-height: 0;
}
/* L'écran d'accueil et l'application ouverte, l'un sur l'autre. */
.phone-page,
.phone-frame .panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
@keyframes phone-in {
  from {
    opacity: 0.4;
    transform: translateX(80%) scale(0.94) rotate(4deg);
  }
}
@keyframes phone-out {
  to {
    opacity: 0;
    transform: translateX(80%) scale(0.94) rotate(4deg);
  }
}
.phone-status {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 16px 34px 0 40px;
  font-size: var(--fs-callout);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.phone-island {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 118px;
  height: 34px;
  margin-left: -59px;
  border-radius: 20px;
  background: #0b0a12;
}
.phone-signal {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
  color: var(--text-2);
}
.phone-screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.phone-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 18px 6px;
}
.phone-nav h2 {
  font-size: var(--fs-headline);
  font-weight: 600;
  text-align: center;
}
.phone-nav.large {
  grid-template-columns: 1fr auto;
  padding: 10px 22px 8px;
}
.phone-nav.large > span:first-child {
  display: none;
}
.phone-nav.large h2 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: left;
}
.phone-back,
.phone-done {
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: var(--fs-callout);
  cursor: pointer;
}
.phone-back {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: -6px;
}
.phone-done {
  justify-self: end;
  font-weight: 600;
}
.phone-chevron {
  display: grid;
  place-items: center;
}
.phone-chevron svg {
  width: 18px;
  height: 18px;
}
.phone-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 4px 18px 18px;
}
.phone-me,
.phone-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.phone-me {
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--glass-hi);
  box-shadow: inset 0 1px 0 var(--glass-rim);
}
.phone-me canvas {
  border-radius: 50%;
  background: var(--fill);
}
.phone-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.phone-label b {
  font-size: var(--fs-headline);
}
.phone-label small {
  color: var(--text-2);
  font-size: var(--fs-footnote);
}
.phone-me .phone-chevron,
.phone-row .phone-chevron {
  color: var(--text-3);
}
.phone-group {
  margin-top: 18px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--glass-hi);
  box-shadow: inset 0 1px 0 var(--glass-rim);
}
.phone-row {
  position: relative;
  padding: 11px 14px;
  font-size: var(--fs-body);
}
.phone-row + .phone-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 56px;
  right: 0;
  border-top: 1px solid var(--hairline);
}
.phone-me:hover,
.phone-row:hover {
  background-color: var(--fill);
}
.phone-ic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #ffffff;
}
.phone-ic svg {
  width: 18px;
  height: 18px;
}
/* Au clavier, l'anneau du focus se dessine dans la ligne ; la première et la dernière ligne d'un
   groupe en ont les coins arrondis, et l'anneau les suit. */
.phone-group > :first-child {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.phone-group > :last-child {
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}
.phone-group .phone-row:focus-visible,
.phone-field:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* L'écran du téléphone : titres des groupes, statut (pastille et coche), statut personnalisé, bureau. */
.phone-caption {
  margin: 22px 14px 6px;
  font-size: var(--fs-footnote);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}
.phone-caption + .phone-group {
  margin-top: 0;
}
.phone-dot .dot {
  width: 12px;
  height: 12px;
}
.phone-dot .status-dot {
  width: 18px;
  height: 18px;
}
.phone-signal .status-dot {
  width: 12px;
  height: 12px;
}
.phone-check {
  color: var(--accent);
  font-weight: 700;
}
.phone-field {
  cursor: text;
}
.phone-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: inherit;
  font: inherit;
}
.phone-row.static {
  cursor: default;
}
.phone-row.static:hover {
  background-color: transparent;
}
.phone-row.danger {
  color: var(--red);
}
/* Un chiffre sur une pastille rouge (ce qui attend dans une application). */
.phone-badge {
  display: inline-block;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* L'ascenseur : le numéro de l'étage à la place de l'icône, et les visages de qui y est. */
.floor-row .floor-level {
  background: var(--fill-2);
  color: var(--text);
  font-size: var(--fs-sub);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.floor-row.current .floor-level {
  background: var(--accent);
  color: var(--accent-text);
}
.floor-row .faces {
  display: flex;
  flex: none;
  padding-left: 6px;
}
.floor-row .faces canvas {
  width: 22px;
  height: 22px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--fill);
  box-shadow: 0 0 0 2px var(--glass-strong);
}
/* L'écran d'accueil du téléphone (ui.js, phoneHome) : il tient sur une page. En widgets, soi et
   son statut, la prochaine réunion, les derniers messages ; puis les applications en grille et le
   dock, chacune avec son nom. Les widgets sont d'un verre plus dense, aux coins de 22 px, comme
   ceux d'iOS. */
.phone-nav.home-nav h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 22px;
}
.home-scroll {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 6px;
}
.home-widget {
  min-width: 0;
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(160deg, var(--glass-hi), var(--glass));
  box-shadow:
    inset 0 1px 0 var(--glass-rim),
    0 8px 22px -14px rgba(31, 23, 53, 0.4);
}
.home-widget button {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.home-widget button:focus-visible,
.home-dock button:focus-visible,
.home-grid button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Soi : son visage et sa pastille, son nom, son statut et où l'on est ; dessous, le statut d'un appui. */
.home-me {
  display: grid;
  gap: 12px;
}
.home-me-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 0;
  border-radius: 14px;
}
.home-face {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--fill);
}
.home-face canvas {
  border-radius: 50%;
}
.home-face .status-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 2.5px var(--glass-strong);
}
.home-me-name {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.home-me-name b,
.home-me-name small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-me-name b {
  font-size: var(--fs-headline);
}
.home-me-name small {
  color: var(--text-2);
  font-size: var(--fs-footnote);
}
.home-me-top .phone-chevron {
  color: var(--text-3);
}
.home-status {
  display: flex;
  gap: 6px;
}
.home-widget .home-status button {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 8px;
  border-radius: var(--r-md);
  background: var(--fill);
  color: var(--text-2);
  font-size: var(--fs-footnote);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-slow) var(--ease-spring);
}
.home-widget .home-status button:hover {
  background: var(--fill-2);
}
.home-widget .home-status button:active {
  transform: scale(0.95);
}
.home-widget .home-status button[aria-pressed="true"] {
  background: var(--glass-strong);
  color: var(--text);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.home-status .status-dot {
  width: 16px;
  height: 16px;
}
/* L'agenda et les messages, côte à côte, à la même hauteur. */
.home-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.home-small {
  display: flex;
  flex-direction: column;
  min-height: 168px;
}
.home-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.home-head .ic,
.home-head svg {
  width: 14px;
  height: 14px;
}
.home-agenda .home-head {
  color: var(--red);
}
.home-messages .home-head {
  color: var(--accent);
}
.home-open {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  width: 100%;
  padding: 0;
  border-radius: 12px;
}
.home-messages .home-head-btn {
  flex: none;
}
.home-title {
  display: -webkit-box;
  margin-top: 8px;
  overflow: hidden;
  font-size: var(--fs-headline);
  line-height: 1.2;
  letter-spacing: -0.01em;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.home-where {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
  font-size: var(--fs-footnote);
  line-height: 1.3;
}
.home-when {
  margin-top: auto;
  padding-top: 6px;
  font-size: var(--fs-footnote);
  font-weight: 700;
}
.home-quiet {
  margin-top: 10px;
  color: var(--text-2);
  font-size: var(--fs-sub);
  line-height: 1.35;
}
.home-widget .home-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  margin-top: 8px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-text);
  font-size: var(--fs-sub);
  font-weight: 600;
  text-align: center;
  transition: transform var(--dur-slow) var(--ease-spring), filter var(--dur-fast) var(--ease-out);
}
.home-widget .home-go:hover {
  filter: brightness(1.08);
}
.home-widget .home-go:active {
  transform: scale(0.96);
}
.home-go .ic,
.home-go svg {
  width: 16px;
  height: 16px;
}
/* Une conversation : le visage (ou l'icône du groupe), le nom et son chiffre, le dernier message. */
.home-widget .home-conv {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 0;
  border-radius: 10px;
}
.home-conv-face {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fill-2);
  color: var(--text-2);
}
.home-conv-face canvas {
  border-radius: 50%;
}
.home-conv-face .ic,
.home-conv-face svg {
  width: 16px;
  height: 16px;
}
.home-conv b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sub);
}
.home-conv .phone-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  line-height: 18px;
}
.home-conv-text {
  display: -webkit-box;
  grid-column: 2 / 4;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--text-2);
  font-size: var(--fs-footnote);
  line-height: 1.25;
}
.home-conv.unread .home-conv-text {
  color: var(--text);
}
/* Les applications : une icône en dégradé de sa teinte, son nom dessous, son chiffre en haut à droite. */
.home-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 4px;
  margin-top: 2px;
}
.home-app {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}
.home-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 15px;
  color: #ffffff;
  background: linear-gradient(165deg, color-mix(in srgb, var(--tint) 74%, #ffffff), var(--tint));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 16px -10px var(--tint);
  transition: transform var(--dur-slow) var(--ease-spring), filter var(--dur-fast) var(--ease-out);
}
.home-icon .ic,
.home-icon svg {
  width: 27px;
  height: 27px;
}
/* (L'antenne du robot remonte son dessin : recentré, comme les autres à moins d'un demi-pixel.) */
.home-app[data-app="agents"] .home-icon .ic {
  transform: translateY(1px);
}
.home-app:hover .home-icon {
  filter: brightness(1.06);
}
.home-app:active .home-icon {
  transform: scale(0.9);
  filter: brightness(0.94);
}
.home-grid .home-app:focus-visible,
.home-dock .home-app:focus-visible {
  outline: none;
}
.home-app:focus-visible .home-icon {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.home-name {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.home-badge {
  position: absolute;
  top: -6px;
  right: -7px;
  box-shadow: 0 0 0 2px var(--glass-strong);
}
.home-tag {
  position: absolute;
  right: -7px;
  bottom: -5px;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--glass-strong);
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: 0 0 0 1px var(--hairline);
}
/* Le dock : les quatre de tous les jours, toujours en bas, au-dessus de la barre d'accueil. */
.home-dock {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 4px 14px 2px;
  padding: 12px 6px 10px;
  border-radius: 30px;
  background: color-mix(in srgb, var(--glass-hi) 70%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-rim);
}
@media (prefers-reduced-motion: reduce) {
  .home-icon,
  .home-widget .home-status button,
  .home-widget .home-go {
    transition: none;
  }
}
/* Dans une application, son titre en grand, comme celui de l'écran d'accueil. */
.phone-frame .panel-head {
  padding: 2px 18px 10px 22px;
}
.phone-frame .panel-title h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* La première fois : la bulle qui dit que tout est dans le téléphone (ui.js, phoneCoach). */
.coach {
  display: grid;
  gap: 8px;
  max-width: 290px;
  padding: 4px 2px 2px;
}
.coach p {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-sub);
  line-height: 1.45;
}
.coach-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}
/* « Quitter le bureau ? » : le texte, puis deux boutons comme une feuille d'action. */
.phone-note {
  margin: 14px 14px 0;
  font-size: var(--fs-sub);
  line-height: 1.45;
  color: var(--text-2);
}
.phone-action {
  justify-content: center;
  font-weight: 600;
  color: var(--accent);
}
/* La fiche des raccourcis : une ligne par raccourci, ses touches à droite (« ou » entre deux
   possibilités, « + » entre les touches d'une combinaison hors Mac) ; les jeux et les outils dans des
   groupes repliés, qui s'ouvrent d'un appui sur leur titre. */
.shortcut-row {
  gap: 10px;
  padding: 9px 14px;
}
.phone-group .shortcut-row::before {
  left: 14px;
}
.shortcut-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.shortcut-label canvas {
  flex: none;
  width: 32px;
  height: 32px;
  margin: -6px 0;
  image-rendering: pixelated;
}
.shortcut-icon svg {
  width: 18px;
  height: 18px;
  color: var(--text-2);
}
.shortcut-label .dot {
  width: 10px;
  height: 10px;
}
.shortcut-keys {
  flex: none;
  max-width: 58%;
}
.shortcut-combos {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px 6px;
}
.shortcut-combo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.shortcut-row kbd {
  min-width: 1.9em;
  margin: 0;
  padding: 1px 0.45em;
  font-size: 12px;
  box-shadow: inset 0 -1px 0 var(--hairline);
}
.shortcut-sep {
  font-size: var(--fs-caption);
  color: var(--text-3);
}
.shortcut-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  font-size: 18px;
}
.phone-group + .shortcut-footer {
  margin-top: 18px;
}
.shortcut-fold > summary {
  list-style: none;
  font-weight: 600;
}
.shortcut-fold > summary::-webkit-details-marker {
  display: none;
}
.shortcut-fold > summary .phone-chevron {
  color: var(--text-3);
  transition: transform 0.2s var(--ease-out);
}
.shortcut-fold[open] > summary .phone-chevron {
  transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
  .shortcut-fold > summary .phone-chevron {
    transition: none;
  }
}
/* Lu par les lecteurs d'écran seulement (les touches de la fiche, en toutes lettres). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.phone-home {
  flex: none;
  display: grid;
  place-items: center;
  height: 24px;
}
.phone-home::after {
  content: "";
  width: 136px;
  height: 5px;
  border-radius: 3px;
  background: var(--text);
  opacity: 0.75;
}
.phone-frame .settings-content {
  gap: 16px;
  padding-right: 18px;
}
.phone-frame .field-row {
  grid-template-columns: 1fr;
}
/* Éditeur d'avatar dans la largeur du téléphone : l'aperçu au-dessus, les onglets en entier. */
.phone-frame .avatar-editor {
  grid-template-columns: 1fr;
}
.phone-frame .avatar-preview {
  flex-direction: row;
  align-items: flex-end;
  gap: 12px;
}
.emote-pop .emote-stop {
  margin: 0 0 6px;
}

/* Zoom : dans le coin, sur la ligne du dock (la carte personnelle est dans le dock). */
.zoom {
  position: absolute;
  right: calc(var(--edge) + var(--panel-space));
  bottom: var(--edge);
  border-radius: var(--r-xl);
  transition: right var(--slide), bottom var(--slide), opacity var(--dur-base) var(--ease-out);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 5;
}
.zoom button {
  width: 38px;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 19px;
  cursor: pointer;
  transition: transform var(--dur-slow) var(--ease-spring), background var(--dur-fast) var(--ease-out);
}
.zoom button + button {
  border-top: 1px solid var(--hairline);
}
.zoom button:hover {
  background: var(--fill);
}

/* Un menu ou une fenêtre ouverts prennent la main : la bulle d'aide du monde s'efface. */
body:has(.popover:not(.leaving)) .hint,
body:has(.modal-backdrop:not(.leaving)) .hint {
  opacity: 0;
  pointer-events: none;
}
.hint {
  position: absolute;
  left: var(--dock-left);
  bottom: calc(var(--edge) + var(--dock-h) + var(--gap));
  transform: translateX(-50%);
  transition: left var(--slide), opacity var(--dur-fast) var(--ease-out);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font-size: var(--fs-sub);
  z-index: 7;
  cursor: pointer;
  user-select: none;
}
/* La bulle se touche aussi : au survol, sa touche s'allume comme un bouton. */
.hint:hover kbd {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-text);
}
.hint.hiding {
  pointer-events: none;
}

/* « Vous suivez Léa · Arrêter » : juste au-dessus de la bulle d'aide. */
.follow-chip {
  position: absolute;
  left: var(--dock-left);
  bottom: calc(var(--edge) + var(--dock-h) + var(--gap) + 46px);
  transform: translateX(-50%);
  transition: left var(--slide);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sub);
  font-weight: 600;
  animation: deco-tools-in var(--dur-fast) var(--ease-out);
}

.banner {
  position: absolute;
  top: 136px;
  left: var(--stage-center);
  transform: translateX(-50%);
  z-index: 9;
  padding: 10px 16px;
  border-radius: var(--r-md);
  background: var(--orange);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-body);
  box-shadow: var(--shadow);
}

/* --- Applications du téléphone (#panel) : Messages, Agenda, Participants… ---------- */
/* Leur barre du haut comme celle des pages du téléphone (le retour, « Terminé »), puis leur titre
   en grand et leurs boutons, puis leur contenu, qui défile. */
.panel .app-nav {
  flex: none;
}
.panel .app-nav .count {
  margin-left: 4px;
}
.panel-head {
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid var(--hairline);
}
.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-title h2 {
  margin: 0;
  font-size: var(--fs-headline);
}
.icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: var(--fill);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  flex: none;
  transition: transform var(--dur-slow) var(--ease-spring), background var(--dur-fast) var(--ease-out);
}
.icon-btn:hover {
  background: var(--fill-2);
}
/* On appuie : le bouton s'enfonce un peu, comme sur iOS. */
.icon-btn:active,
.dock-btn:active {
  transform: scale(0.9);
  transition-duration: var(--dur-press);
  transition-timing-function: var(--ease-out);
}
.icon-btn svg {
  width: 15px;
  height: 15px;
}
.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.panel-foot {
  padding: 10px;
  border-top: 1px solid var(--hairline);
}

.section-label {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 8px 6px;
}
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--r-md);
}
.row:hover {
  background: var(--fill);
}
.row.clickable {
  cursor: pointer;
}
.row .grow {
  flex: 1;
  min-width: 0;
}
.row .title {
  font-size: var(--fs-body);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row .sub {
  font-size: var(--fs-footnote);
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row .sub span.txt {
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-actions {
  display: flex;
  gap: 4px;
  opacity: 0.85;
}
.row-actions .icon-btn {
  width: 28px;
  height: 28px;
}
.portrait {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--fill);
  overflow: hidden;
  flex: none;
  position: relative;
}
.portrait .dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  border: 2px solid var(--glass-strong);
  width: 16px;
  height: 16px;
}
.empty {
  text-align: center;
  color: var(--text-3);
  font-size: var(--fs-sub);
  padding: 26px 18px;
  line-height: 1.5;
}

/* Discussion */
.messages {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
}
.msg {
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.msg.mine {
  align-items: flex-end;
}
.msg .meta {
  font-size: var(--fs-caption);
  color: var(--text-3);
  margin: 6px 6px 2px;
}
.msg .bubble {
  max-width: 86%;
  padding: 8px 12px;
  border-radius: var(--r-lg);
  background: var(--glass-strong);
  font-size: var(--fs-body);
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
  border: 1px solid var(--hairline);
}
.msg.mine .bubble {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}
.composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  position: relative;
  isolation: isolate;
}
/* Complétion des @mentions : la liste au-dessus du champ. */
.mention-picker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 3;
  max-height: 232px;
  overflow-y: auto;
  padding: 4px;
  border-radius: var(--r-md);
}
.mention-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: var(--fs-sub);
  cursor: pointer;
}
.mention-choice[aria-selected="true"],
.mention-choice:hover {
  background: var(--fill-2);
}
.mention-face {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
}
.mention-online {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34c759;
}
/* Lueur de marque derrière la saisie (smappen-data) : trois taches floues, plus vives au focus. */
.composer::before {
  content: "";
  position: absolute;
  inset: -4px -2px;
  border-radius: var(--r-xl);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 50%, rgba(121, 68, 192, 0.4), transparent 60%),
    radial-gradient(circle at 80% 60%, rgba(223, 84, 96, 0.35), transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(183, 150, 234, 0.45), transparent 70%);
  filter: blur(12px);
  opacity: 0.25;
  transition: opacity 0.35s ease;
  animation: composer-glow 9s ease-in-out infinite alternate;
}
.composer:focus-within::before {
  opacity: 0.85;
}
@keyframes composer-glow {
  to {
    transform: translate(-6px, -2px);
  }
}
.composer textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--hairline);
  background: var(--glass-strong);
  border-radius: var(--r-lg);
  padding: 9px 14px;
  font-size: var(--fs-body);
  outline: none;
  max-height: 120px;
  line-height: 1.35;
}
.composer textarea:focus {
  border-color: var(--accent);
}
.composer .send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
}
.composer .send svg {
  width: 16px;
  height: 16px;
}

/* Messagerie : boîte de réception et conversation */
.head-actions {
  display: flex;
  gap: 6px;
}
.thread-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 34px;
  border-radius: var(--r-md);
  background: var(--fill);
  color: var(--text-3);
}
.search-field .ic svg {
  width: 15px;
  height: 15px;
  display: block;
}
.chat-search {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--text);
}
.chat-search::-webkit-search-cancel-button {
  cursor: pointer;
}
.conv-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--fill);
  color: var(--text-2);
  display: grid;
  place-items: center;
  flex: none;
}
.conv-icon .ic svg {
  width: 18px;
  height: 18px;
  display: block;
}
.conv-icon.live {
  background: color-mix(in srgb, var(--green) 18%, transparent);
  color: var(--green-text);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--green) 45%, transparent);
}
.conv-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.conv-line .title {
  flex: 1;
  min-width: 0;
}
.conv-time {
  font-size: var(--fs-footnote);
  color: var(--text-3);
  flex: none;
}
.conv-sub {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sub);
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row.conv.unread .conv-sub {
  color: var(--text);
  font-weight: 600;
}
.row.conv.unread .conv-time {
  color: var(--accent);
  font-weight: 600;
}
.row.current-meeting {
  background: color-mix(in srgb, var(--green) 9%, transparent);
  margin-bottom: 4px;
}
.count {
  flex: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.portrait.offline canvas {
  filter: grayscale(0.7);
  opacity: 0.75;
}
.portrait > .ic {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--text-3);
}
.thread-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.thread-head .grow {
  flex: 1;
  min-width: 0;
}
.thread-head .title {
  font-size: var(--fs-callout);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thread-head .sub {
  font-size: var(--fs-footnote);
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.icon-btn.back {
  position: relative;
}
.icon-btn.back .count {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 10px;
  padding: 0 4px;
}
.participants {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.participant {
  font-size: var(--fs-footnote);
  padding: 2px 9px 2px 8px;
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.participant::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  opacity: 0.6;
}
.participant.here {
  color: var(--text);
}
.participant.here::before {
  background: var(--green);
  opacity: 1;
}
/* Dans un groupe, ce que dit Smapville (création, arrivées, départs) : une ligne discrète. */
.messages .notice {
  display: flex;
  justify-content: center;
  margin: 8px 16px;
  text-align: center;
}
.messages .notice span {
  font-size: var(--fs-caption);
  color: var(--text-3);
  line-height: 1.35;
}
/* Nouveau groupe, ajout de personnes : les personnes choisies en pastilles, une coche par ligne. */
.pick-for {
  font-size: var(--fs-footnote);
  color: var(--text-2);
  margin-top: -4px;
}
.pick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pick-chips:empty {
  display: none;
}
.pick-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  padding: 3px 5px 3px 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-footnote);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.pick-chip:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.pick-chip .x {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
  color: var(--text-2);
}
.row.pick:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.pick-check {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: transparent;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text-3) 70%, transparent);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-slow) var(--ease-spring);
}
.pick-check .ic svg {
  width: 13px;
  height: 13px;
  display: block;
}
.row.pick.picked .pick-check {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: none;
  transform: scale(1.06);
}
.group-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.group-foot .btn {
  width: 100%;
}
.day-sep {
  display: flex;
  justify-content: center;
  margin: 10px 0 4px;
}
.day-sep span {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-3);
  background: var(--fill);
  border-radius: var(--r-sm);
  padding: 2px 9px;
}
.day-sep span::first-letter {
  text-transform: uppercase;
}
.msg .bubble a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.msg:not(.mine) .bubble a {
  color: var(--accent);
}
.thread-note {
  font-size: var(--fs-sub);
  color: var(--text-2);
  text-align: center;
  line-height: 1.45;
}
.where-chat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: var(--r-pill);
  padding: 3px 9px 3px 7px;
  margin-left: -2px;
  font: inherit;
  font-size: var(--fs-sub);
  font-weight: 600;
  color: var(--green-text);
  background: color-mix(in srgb, var(--green) 16%, transparent);
  cursor: pointer;
}
.where-chat .ic svg {
  width: 14px;
  height: 14px;
  display: block;
}
.where-chat .count {
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 10px;
  padding: 0 4px;
}

/* Agents */
.agent-card {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: var(--r-lg);
  cursor: pointer;
  align-items: flex-start;
}
.agent-card:hover {
  background: var(--fill);
}
.agent-card .portrait {
  background: linear-gradient(160deg, #fff1ea, #f6d7c9);
}
:root[data-theme="dark"] .agent-card .portrait {
  background: linear-gradient(160deg, #3b2a24, #2a1f1b);
}
.agent-card .activity {
  font-size: var(--fs-sub);
  color: var(--text-2);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-footnote);
  font-weight: 600;
  background: var(--fill);
}
.timeline {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: var(--fs-sub);
}
.timeline .ev {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 8px;
  padding: 5px 4px;
  border-radius: var(--r-sm);
}
.timeline .ev .t {
  color: var(--text-3);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
}
.timeline .ev .x {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  line-height: 1.35;
}
.timeline .ev.prompt .x {
  font-weight: 600;
}
.timeline .ev.say .x {
  color: var(--text-2);
}
.timeline .ev.notify {
  background: rgba(255, 159, 10, 0.12);
}
.timeline .ev.error {
  background: rgba(255, 59, 48, 0.1);
}
.code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-footnote);
  background: var(--fill);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  white-space: pre-wrap;
  word-break: break-all;
  user-select: all;
}
/* Machine à cash (Paramètres de l'espace) : copier l'adresse du webhook, ou en changer. */
.cash-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.kv {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 12px;
  font-size: var(--fs-sub);
}
.kv dt {
  color: var(--text-3);
}
.kv dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.quote {
  font-size: var(--fs-sub);
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--fill);
  white-space: pre-wrap;
  max-height: 200px;
  overflow: auto;
}

/* --- Modales et notifications ------------------------------------------------ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(10, 12, 20, 0.35);
  display: grid;
  place-items: center;
  padding: 20px;
  animation: fade var(--dur-base) var(--ease-out);
}
.modal {
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border-radius: var(--r-xl);
  padding: 22px;
  background: var(--glass-strong);
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: pop 0.42s var(--ease-spring) backwards;
}
.modal:focus {
  outline: none;
}
.modal-head-actions {
  display: flex;
  gap: var(--sp-2);
}
.modal.wide {
  width: min(760px, 100%);
}
.modal h2 {
  margin: 0;
  font-size: var(--fs-title);
  letter-spacing: -0.01em;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.floor-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.floor-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--glass);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.floor-item:hover {
  border-color: var(--accent);
}
.floor-item.current {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.floor-item .num {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: var(--fs-headline);
  background: var(--fill);
}
.floor-item .grow {
  flex: 1;
}
.floor-item .faces {
  display: flex;
}
.floor-item .faces canvas {
  margin-left: -8px;
  border-radius: 50%;
  border: 2px solid var(--glass-strong);
  background: var(--fill);
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-body);
}
/* Réglages « Apparence » : quatre choix, chacun avec sa ligne d'explication. */
.appearance-choices {
  display: grid;
  gap: var(--sp-2);
}
.appearance-choice {
  align-items: flex-start;
}
.appearance-choice input {
  margin-top: 3px;
}
.appearance-choice small {
  display: block;
  color: var(--text-2);
  font-size: var(--fs-sub);
  margin-top: 2px;
}
/* Réglages « Monde » : le ciel de Paris du jour, sous les interrupteurs. */
.settings-note {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--fill);
}

.toasts {
  position: absolute;
  top: var(--toasts-top, var(--edge));
  right: calc(var(--edge) + var(--panel-space));
  transition: right var(--slide), top var(--slide);
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 330px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  border-radius: var(--r-lg);
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-sub);
  line-height: 1.4;
  animation: toast-in 0.42s var(--ease-sheet) backwards;
}
.toast .grow {
  flex: 1;
  min-width: 0;
}
.toast b {
  display: block;
}
.toast .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.toast .actions .btn {
  white-space: nowrap;
}
.toast .icon {
  font-size: var(--fs-title);
  line-height: 1;
}

@keyframes fade {
  from {
    opacity: 0;
  }
}
@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}
@keyframes slide {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.98);
  }
}
@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(-0.375rem) scale(0.97);
  }
}
@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
}
@keyframes pop-out {
  to {
    opacity: 0;
    transform: scale(0.96);
  }
}
@keyframes fade-out {
  to {
    opacity: 0;
  }
}
@keyframes badge-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}
@keyframes hint-in {
  from {
    opacity: 0;
    transform: translate(-50%, 0.375rem) scale(0.98);
  }
}
@keyframes hint-out {
  to {
    opacity: 0;
    transform: translate(-50%, 0.25rem) scale(0.98);
  }
}
@keyframes tile-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
}
@keyframes tile-out {
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}
.toast.leaving {
  animation: toast-out var(--dur-fast) var(--ease-in) forwards;
}
.modal-backdrop.leaving {
  animation: fade-out var(--dur-base) var(--ease-in) forwards;
}
.modal-backdrop.leaving .modal {
  animation: pop-out var(--dur-fast) var(--ease-in) forwards;
}
.hint:not([hidden]) {
  animation: hint-in var(--dur-base) var(--ease-out) backwards;
}
.hint.hiding {
  animation: hint-out var(--dur-fast) var(--ease-in) forwards;
}
.tile {
  animation: tile-in var(--dur-slow) var(--ease-sheet) backwards;
}
.tile.leaving {
  animation: tile-out var(--dur-base) var(--ease-in) forwards;
}
/* Un panneau arrive du bord droit, comme une feuille d'iOS, et y repart plus vite. */
@keyframes sheet-in {
  from {
    opacity: 0;
    transform: translateX(1.5rem) scale(0.985);
  }
}
@keyframes drawer-out {
  to {
    opacity: 0;
    transform: translateX(1.5rem) scale(0.985);
  }
}
/* Contenu qui arrive dans ce qui vient de s'ouvrir : d'un léger flou, quelques pixels plus haut. */
@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
    filter: blur(0.25rem);
  }
}
.panel.swap > * {
  animation: appear var(--dur-slow) var(--ease-sheet) backwards;
}

/* --- Liquid Glass : finitions --------------------------------------------------- */

.where,
.toast,
.modal,
.join-card,
.agent-card,
.floor-item {
  position: relative;
}
.join-bg {
  position: fixed;
  inset: -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  object-fit: cover;
  image-rendering: pixelated;
  filter: blur(7px) saturate(1.25) brightness(0.92);
  transform: scale(1.04);
  z-index: -1;
}
.join {
  background: #1d1b2b;
  isolation: isolate;
}
.join::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(900px 520px at 15% -5%, rgba(121, 68, 192, 0.42), transparent 60%), radial-gradient(760px 480px at 105% 0%, rgba(110, 150, 240, 0.26), transparent 58%), radial-gradient(820px 520px at 100% 105%, rgba(223, 84, 96, 0.3), transparent 60%);
  pointer-events: none;
}
.join-card {
  border-radius: var(--r-2xl);
}
.dock {
  border-radius: var(--r-pill);
  padding: 8px;
}
.dock-btn {
  border-radius: 50%;
  width: 46px;
  height: 46px;
  min-width: 46px;
  padding: 0;
}
.me-chip canvas,
.portrait canvas,
.tile-avatar canvas,
.faces canvas {
  image-rendering: pixelated;
}
.tile {
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--shadow);
}
.tile .tile-name {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-sm);
}
.where {
  border-radius: var(--r-pill);
  padding: 9px 15px;
}
.zoom {
  border-radius: var(--r-xl);
}
.modal {
  border-radius: var(--r-2xl);
}
.toast {
  border-radius: var(--r-xl);
}
.segmented {
  border-radius: var(--r-md);
}
.segmented.small button {
  padding: 5px 6px;
  font-size: var(--fs-footnote);
}

/* Éditeur d'avatar */
.avatar-editor {
  grid-template-columns: 112px 1fr;
  gap: 14px;
}
.avatar-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.avatar-preview canvas {
  width: 112px;
  height: 140px;
  image-rendering: pixelated;
  border-radius: var(--r-xl);
  border: 1px solid var(--glass-border);
  background: radial-gradient(80% 60% at 50% 30%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12)), linear-gradient(160deg, #a9c4ff55, #ffd9a855);
  cursor: pointer;
}
.avatar-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.swatch-row > span {
  width: 76px;
}

/* --- Barre : menus des périphériques ------------------------------------------ */

.device-menu {
  width: 320px;
  max-height: 70vh;
  overflow: auto;
}
.menu-title {
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--text-3);
  padding: 8px 10px 4px;
}
.check-slot {
  width: 16px;
  flex: none;
  color: var(--accent);
  font-weight: 700;
}
.switch-row {
  cursor: pointer;
}
.danger-text {
  color: var(--red);
}
.no-mirror .tile.mirror video,
.no-mirror .preview-frame video {
  transform: none;
}

/* --- Bureaux ------------------------------------------------------------------- */

.desk-thumb {
  width: 68px;
  height: 64px;
  image-rendering: pixelated;
  border-radius: var(--r-md);
  background: var(--fill);
  flex: none;
}
.desk-editor {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 700px) {
  .desk-editor {
    grid-template-columns: 1fr;
  }
}
.desk-stage {
  border-radius: var(--r-xl);
  padding: 12px;
  background: radial-gradient(80% 60% at 50% 40%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.15)), repeating-linear-gradient(0deg, #e9bf8c 0 8px, #e2b47f 8px 9px);
  border: 1px solid var(--glass-border);
}
.desk-preview {
  width: 196px;
  height: 184px;
  image-rendering: pixelated;
  display: block;
}
/* Sans bureau : l'espace vide, cerné de pointillés comme sur la carte ; les réglages du bureau attendent son retour. */
.desk-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 196px;
  height: 184px;
  box-sizing: border-box;
  border: 1.5px dashed rgba(255, 255, 255, 0.95);
  border-radius: var(--r-lg);
  color: #6b4f33;
  font-size: var(--fs-footnote);
  text-align: center;
}
.desk-empty b {
  font-size: var(--fs-sub);
}
.desk-empty .ic {
  width: 22px;
  height: 22px;
  margin-bottom: 2px;
}
.desk-preview[hidden],
.desk-empty[hidden] {
  display: none;
}
.swatch-row.off {
  opacity: 0.4;
}
.swatch-row.off .chip {
  cursor: default;
}

/* --- Jeux (fenêtres : jeux.css) --------------------------------------------------- */

.activity-status {
  text-align: center;
  font-size: var(--fs-body);
  color: var(--text-2);
}

/* --- Terminal Hermes ------------------------------------------------------------ */

.modal.terminal-modal {
  width: min(920px, 100%);
  height: min(720px, calc(100vh - 40px));
  padding: 16px;
  gap: 10px;
  background: linear-gradient(160deg, rgba(28, 26, 40, 0.86), rgba(14, 14, 22, 0.9));
  color: #e8e6f3;
  border-color: rgba(255, 255, 255, 0.12);
}
.term-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.term-head .icon-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.term-title {
  font-size: var(--fs-headline);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.term-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--fs-sub);
  color: rgba(232, 230, 243, 0.65);
  margin-top: 3px;
}
.term-sub .status-pill {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.term-model {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-footnote);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  background: rgba(233, 185, 73, 0.18);
  color: #f5d27a;
}
.term-screen {
  flex: 1;
  overflow-y: auto;
  border-radius: var(--r-lg);
  padding: 12px 14px;
  background: rgba(6, 7, 12, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-sub);
  line-height: 1.5;
}
.ln {
  display: grid;
  grid-template-columns: 40px 16px 1fr;
  gap: 6px;
  padding: 2px 0;
}
.ln .t {
  color: rgba(255, 255, 255, 0.28);
  font-size: var(--fs-caption);
}
.ln .x {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ln.user .p,
.ln.user .x {
  color: #7fd3ff;
}
.ln.user.pending {
  opacity: 0.55;
}
.ln.assistant .p {
  color: #f5d27a;
}
.ln.assistant .x {
  color: #f4f2fb;
}
.ln.tool .p,
.ln.tool b {
  color: #ffb86b;
}
.ln.tool .x {
  color: rgba(255, 220, 180, 0.75);
}
.ln.result .p,
.ln.result .x {
  color: rgba(200, 205, 220, 0.6);
}
.ln.result.long .x {
  cursor: pointer;
}
.ln.notice .p,
.ln.notice .x {
  color: #c9a7ff;
}
.ln.cursor .x {
  color: rgba(245, 210, 122, 0.8);
}
.blink {
  animation: blink 1s steps(2) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.term-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.term-chips.disabled {
  opacity: 0.35;
  pointer-events: none;
}
.term-chip {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  color: #e8e6f3;
  border-radius: var(--r-sm);
  padding: 5px 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-footnote);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-slow) var(--ease-spring);
}
.term-chip:hover {
  background: rgba(255, 255, 255, 0.15);
}
.term-chip:active {
  transform: scale(0.95);
  transition-duration: var(--dur-press);
  transition-timing-function: var(--ease-out);
}
.term-chip.danger {
  border-color: rgba(255, 69, 58, 0.5);
  color: #ff8a80;
}
.term-prompt {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
/* La saisie active s'entoure de la couleur d'Hermes. */
.term-prompt:focus-within {
  box-shadow: inset 0 0 0 1px rgba(233, 185, 73, 0.6), 0 0 0 3px rgba(233, 185, 73, 0.16);
}
.term-prompt .p {
  color: #7fd3ff;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  padding-bottom: 7px;
}
.term-input {
  flex: 1;
  resize: none;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-sub);
  line-height: 1.45;
  padding: 6px 0;
  outline: none;
  max-height: 140px;
}
.term-input:disabled {
  opacity: 0.4;
}
.term-prompt .send {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: #e9b949;
  color: #1c1a28;
  display: grid;
  place-items: center;
  cursor: pointer;
  /* Éteint tant qu'il n'y a rien à envoyer, comme dans Messages. */
  opacity: 0.4;
  transform: scale(0.92);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-slow) var(--ease-spring), filter var(--dur-fast) var(--ease-out);
}
.term-prompt .send.ready {
  opacity: 1;
  transform: none;
}
.term-prompt .send.ready:hover {
  filter: brightness(1.08);
}
.term-prompt .send:active {
  transform: scale(0.88);
  transition-duration: var(--dur-press);
}
/* Une ligne qui arrive dans le journal : quelques pixels plus bas, en fondu. */
.ln.fresh {
  animation: rise var(--dur-base) var(--ease-out) backwards;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.375rem);
  }
}
/* Confirmation intégrée (askConfirm) */
.confirm-pop {
  width: 280px;
  padding: var(--sp-2);
}
.confirm-pop p {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sub);
  line-height: 1.45;
}
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}
.btn.danger-fill {
  background: var(--red);
  color: #fff;
}
.btn.danger-fill:hover {
  filter: brightness(1.06);
}
.term-prompt .send svg {
  width: 15px;
  height: 15px;
}
.term-readonly {
  font-size: var(--fs-sub);
  color: #ffd38a;
  background: rgba(255, 159, 10, 0.12);
  border-radius: var(--r-sm);
  padding: 7px 10px;
}
.term-readonly {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.term-readonly[hidden] {
  display: none !important;
}
.term-readonly .btn {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  flex: none;
}

/* --- Icônes ------------------------------------------------------------------------ */

.ic {
  display: inline-flex;
  width: 1.1em;
  height: 1.1em;
  flex: none;
}
.ic svg {
  width: 100%;
  height: 100%;
}
.with-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.menu-ic {
  display: inline-flex;
  width: 20px;
  justify-content: center;
  color: var(--text-2);
}
.menu-ic .ic {
  width: 17px;
  height: 17px;
}
.danger-text .menu-ic {
  color: var(--red);
}
.hand-ic {
  display: inline-flex;
  margin-left: 6px;
  color: var(--orange);
  vertical-align: -2px;
}
.toast-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.toast-icon .ic {
  width: 16px;
  height: 16px;
}

/* --- Carte : minimap, recentrage, glisser ------------------------------------------- */

#world.grabbing {
  cursor: grabbing;
}
.minimap {
  position: absolute;
  left: var(--edge);
  bottom: var(--edge);
  width: var(--mini-w);
  height: 156px;
  border-radius: var(--r-xl);
  padding: 6px;
  z-index: 5;
  transform-origin: bottom left;
  transition: width var(--dur-slow) var(--ease-sheet), height var(--dur-slow) var(--ease-sheet), padding var(--dur-slow) var(--ease-sheet), border-radius var(--dur-slow) var(--ease-sheet), opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.minimap canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--r-xl) - 6px);
  cursor: pointer;
  background: #e7efe3;
}
.minimap-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.75);
  color: #3a3550;
  box-shadow: 0 2px 6px rgba(20, 24, 40, 0.15);
  transition: top var(--dur-slow) var(--ease-sheet), right var(--dur-slow) var(--ease-sheet), width var(--dur-slow) var(--ease-sheet), height var(--dur-slow) var(--ease-sheet), box-shadow var(--dur-base) var(--ease-out);
}
.minimap-toggle svg {
  width: 15px;
  height: 15px;
}
/* Repliée : un rond, et son bouton le remplit (l'icône au centre, tout le rond la rouvre). */
.minimap.collapsed {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
}
.minimap.collapsed canvas {
  display: none;
}
.minimap.collapsed .minimap-toggle {
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  box-shadow: none;
}
/* « Recentrer » : au-dessus du zoom (ses deux boutons font 72 px), hors du couloir du dock. */
.recenter {
  position: absolute;
  right: calc(var(--edge) + var(--panel-space));
  bottom: calc(var(--edge) + 72px + var(--gap));
  transition: right var(--slide), bottom var(--slide), opacity var(--dur-base) var(--ease-out);
  height: 40px;
  border-radius: var(--r-pill);
  padding: 0 14px 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--fs-sub);
  cursor: pointer;
  z-index: 5;
  color: var(--text);
}
/* Le bouton « Recentrer » arrive quand on a déplacé la carte à la main. */
.recenter:not([hidden]) {
  animation: pop-in var(--dur-base) var(--ease-out) backwards;
}
.recenter svg {
  width: 17px;
  height: 17px;
  color: var(--accent);
}

/* --- Éditeur d'avatar : onglets et vignettes ---------------------------------------- */

.look-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 3px;
  border-radius: var(--r-md);
  background: var(--fill);
  scrollbar-width: none;
}
.look-tabs::-webkit-scrollbar {
  display: none;
}
.look-tabs button {
  flex: none;
  border: 0;
  background: transparent;
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: var(--fs-sub);
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
}
.look-tabs button.active {
  background: var(--glass-strong);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.look-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 2px;
}
.look-label {
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: 5px;
}
.look-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 6px;
}
.look-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 2px 4px;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  background: var(--glass-strong);
  cursor: pointer;
  font-size: 10.5px;
  color: var(--text-2);
  line-height: 1.1;
}
.look-thumb canvas {
  border-radius: var(--r-sm);
  background: linear-gradient(160deg, rgba(160, 180, 255, 0.25), rgba(255, 210, 160, 0.25));
}
.look-thumb span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.look-thumb:hover {
  border-color: var(--hairline);
}
.look-thumb.active {
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.look-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.look-swatches .swatch {
  width: 24px;
  height: 24px;
}

/* Crédit des graphismes (licence LimeZu) */
.credits {
  margin: 4px 0 0;
  font-size: var(--fs-caption);
  color: var(--text-3, rgba(60, 60, 67, 0.6));
  text-align: right;
}
.credits a {
  color: inherit;
}

/* Pluie de billets de la machine à cash */
.money-curtain {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 60;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.money-curtain.out {
  opacity: 0;
}

/* Fiches de la carte (clic simple) : objets, salles, bureaux. */
.card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--fill);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--accent);
}
.card-icon .ic svg {
  width: 19px;
  height: 19px;
}
.row .sub.card-time .ic svg,
.card-where .ic svg {
  width: 13px;
  height: 13px;
}
/* En congés, dans une fiche : une pastille jaune, la couleur des congés dans Google Agenda. */
.card-leave {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: var(--r-pill);
  background: var(--leave);
  color: var(--leave-text);
  font-size: var(--fs-footnote);
  font-weight: 600;
}
.card-leave .ic svg {
  width: 13px;
  height: 13px;
}
.card-where {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 8px 4px;
  font-size: var(--fs-footnote);
  color: var(--text-2);
}
.card-lines {
  margin: 4px 8px 6px;
  font-size: var(--fs-sub);
  line-height: 1.6;
  color: var(--text-2);
}
.card-people {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 6px 8px 6px;
}
.card-person {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-footnote);
  max-width: 116px;
}
.card-person span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-person .portrait {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
}

/* Réglages en sections, comme les préférences de Gather. */
.modal.settings-modal {
  width: min(880px, 100%);
  height: min(640px, calc(100vh - 40px));
  padding: 0;
  overflow: hidden;
}
.settings-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  height: 100%;
  min-height: 0;
}
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 22px 12px;
  background: var(--fill);
  border-right: 1px solid var(--hairline);
}
.settings-nav-title {
  font-size: var(--fs-sub);
  font-weight: 600;
  color: var(--text-2);
  padding: 0 10px 10px;
}
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--fs-body);
  text-align: left;
  cursor: pointer;
}
.settings-nav-item .ic svg {
  width: 18px;
  height: 18px;
}
.settings-nav-item:hover {
  background: rgba(127, 127, 127, 0.12);
}
.settings-nav-item.active {
  background: var(--accent);
  color: #ffffff;
}
.settings-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px;
  min-height: 0;
  overflow: hidden;
}
.settings-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-right: 4px;
}
.settings-content h3 {
  margin: 6px 0 0;
  font-size: var(--fs-footnote);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}
/* Étiquette « Expérimental » d'un réglage (la 3D, dans Réglages › Affichage). */
/* Heure du village (Réglages › Monde, administrateurs) : curseur, heure affichée, retour à l'heure réelle. */
.village-clock-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.village-clock-row input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
}
.village-clock-time {
  min-width: 42px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.tag-experimental {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: var(--fs-caption);
  font-weight: 600;
  vertical-align: 1px;
}
/* Paramètres de l'espace › Membres (admins) : la liste défile seule, l'interrupteur « Admin » à
   droite de chaque personne, figé (estompé) pour les fondateurs et le dernier admin. */
.members-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.members-count {
  font-weight: 400;
  color: var(--text-3);
}
/* La recherche garde l'allure de celle des panneaux (pas celle des champs de .field) ; l'anneau
   du focus entoure toute la pastille. */
.members .search-field .chat-search {
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.members .search-field:focus-within {
  box-shadow: 0 0 0 4px var(--accent-ring);
}
.members-list {
  display: flex;
  flex-direction: column;
  max-height: min(360px, 50vh);
  overflow-y: auto;
  margin: 0 -8px;
  color: var(--text);
}
.members-list > .muted,
.members-none {
  margin: 0;
  padding: 7px 0;
}
.row.member .title .tag-experimental {
  margin-left: 6px;
}
.member-admin {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  color: var(--text-2);
  font-size: var(--fs-sub);
  cursor: pointer;
}
.member-admin:has(input:disabled) {
  cursor: default;
}
.member-admin .switch input:disabled + span {
  opacity: 0.5;
  cursor: default;
}
@media (max-width: 480px) {
  .member-admin-text {
    display: none;
  }
}
/* « ⋯ » d'un membre (retirer l'accès, libérer son bureau) : discret jusqu'au survol ; sa place
   reste gardée sur sa propre ligne, pour que les interrupteurs restent alignés. */
.member-more,
.member-more-slot {
  width: 28px;
  height: 28px;
  flex: none;
}
.icon-btn.member-more {
  background: transparent;
  color: var(--text-2);
}
.icon-btn.member-more:hover {
  background: var(--fill-2);
}
.icon-btn.member-more:disabled {
  opacity: 0.45;
  cursor: default;
}
.member-menu-why {
  margin: 0 10px 6px 38px;
  font-size: var(--fs-footnote);
  color: var(--text-3);
}
/* Accès retiré : à part, en bas de la liste, sous son titre ; le nom estompé comme le portrait. */
.members-blocked .section-label {
  padding: 14px 8px 4px;
}
.row.member.blocked .title {
  color: var(--text-2);
}
.row.member.blocked .btn.small {
  flex: none;
}
.settings-row small,
.calendar-settings .muted,
/* Réglages « Affichage » : les lignes espacées comme sur les autres pages du téléphone. */
.display-settings {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.display-settings .muted {
  display: block;
  color: var(--text-2);
  font-size: var(--fs-sub);
  margin-top: 2px;
}
.radio-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body);
  cursor: pointer;
}
.radio-row input {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}
/* Réglages de l'agenda : des groupes comme ceux du téléphone, chacun sous son titre, avec sa note. */
.calendar-settings {
  display: flex;
  flex-direction: column;
}
.calendar-settings > .agenda-caption:first-child {
  margin-top: 10px;
}
.agenda-connect {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
}
.agenda-connect p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.45;
}
.agenda-connect small {
  font-size: var(--fs-footnote);
  line-height: 1.4;
  color: var(--text-2);
}
.agenda-connect ol {
  margin: 0;
  padding-left: 20px;
  font-size: var(--fs-sub);
  line-height: 1.6;
  color: var(--text-2);
}
.agenda-connect a {
  color: var(--accent);
}
.agenda-connect .calendar-form {
  align-self: stretch;
}
.agenda-connect .calendar-status.error {
  margin-top: 0;
}
.calendar-form {
  display: flex;
  gap: 8px;
}
.calendar-form input {
  flex: 1;
  min-width: 0;
}
.calendar-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sub);
  color: var(--green);
}
.calendar-status.error {
  color: var(--red);
  margin-top: 8px;
}
.calendar-status .ic svg {
  width: 16px;
  height: 16px;
}
.calendar-list,
.card-agenda {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}
.card-agenda {
  margin: 6px 6px 4px;
}
.calendar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  background: var(--fill);
  font-size: var(--fs-sub);
}
.calendar-item.now {
  background: rgba(94, 92, 230, 0.14);
}
.calendar-time {
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  white-space: nowrap;
}
.calendar-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.calendar-item .btn .ic svg,
.calendar-item .icon-btn .ic svg {
  width: 14px;
  height: 14px;
}
.calendar-item .btn.small {
  display: flex;
  align-items: center;
  gap: 4px;
}
.calendar-item .icon-btn {
  width: 26px;
  height: 26px;
}

/* --- Panneau Agenda (revu le 30/10) -------------------------------------------------
   La date du jour en tête, les congés (repliés : les visages et les noms), les réunions en
   cartes, les salles en liste : des groupes en verre, comme dans le téléphone. */
.agenda-body {
  padding: 4px 14px 18px;
}
.agenda-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.agenda-day {
  padding: 10px 2px 2px;
}
.agenda-kicker {
  font-size: var(--fs-footnote);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.agenda-date {
  margin-top: 2px;
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.agenda-sub {
  margin-top: 3px;
  font-size: var(--fs-sub);
  color: var(--text-2);
}
.agenda-caption {
  margin: 22px 14px 6px;
  font-size: var(--fs-footnote);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}
.agenda-foot {
  margin: 6px 14px 0;
  font-size: var(--fs-footnote);
  line-height: 1.45;
  color: var(--text-2);
}
.agenda-quiet {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 2px 0;
  font-size: var(--fs-sub);
  color: var(--text-2);
}
.agenda-section .agenda-quiet {
  margin: 0 14px;
}
.agenda-quiet .ic svg {
  width: 15px;
  height: 15px;
}
/* Un groupe : des lignes séparées par un filet, comme dans le téléphone (phone-group). */
.agenda-group,
.agenda-leave,
.agenda-card,
.agenda-empty {
  border-radius: 18px;
  background: var(--glass-hi);
  box-shadow: inset 0 1px 0 var(--glass-rim);
}
.agenda-group {
  overflow: hidden;
}
.agenda-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--fs-body);
  text-align: left;
}
.agenda-row + .agenda-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 0;
  border-top: 1px solid var(--hairline);
}
button.agenda-row,
label.agenda-row {
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
button.agenda-row:hover,
label.agenda-row:hover {
  background: var(--fill);
}
button.agenda-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.agenda-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.agenda-row-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-weight: 600;
}
.agenda-row-main small {
  font-size: var(--fs-footnote);
  line-height: 1.35;
  color: var(--text-2);
}
.agenda-row-main small.error {
  color: var(--red);
}
.agenda-row-aside {
  flex: none;
  font-size: var(--fs-sub);
  color: var(--text-2);
}
.agenda-row-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--green);
  color: #ffffff;
}
.agenda-row-ic.alert {
  background: var(--red);
}
.agenda-row-ic svg {
  width: 18px;
  height: 18px;
}
.agenda-danger {
  justify-content: center;
  color: var(--red);
  font-weight: 600;
}
/* Quand une réunion commence : la coche du choix retenu (le bouton radio est dessous). */
.agenda-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.agenda-choice:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.agenda-check {
  display: grid;
  color: var(--accent);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-slow) var(--ease-spring);
}
.agenda-check .ic svg {
  width: 18px;
  height: 18px;
}
.agenda-choice input:checked ~ .agenda-check {
  opacity: 1;
  transform: none;
}
.agenda-switch .smart-status {
  margin-left: 0;
  font-weight: 500;
}

/* En congés aujourd'hui : replié, les visages et les noms ; déplié, jusqu'à quand pour chacun. */
.agenda-leave {
  margin-top: 14px;
  overflow: hidden;
}
.agenda-leave > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  list-style: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.agenda-leave > summary::-webkit-details-marker {
  display: none;
}
.agenda-leave > summary:hover {
  background: var(--fill);
}
.agenda-leave-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.agenda-leave-text b {
  font-size: var(--fs-body);
}
.agenda-leave-who {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sub);
  color: var(--text-2);
}
.agenda-faces {
  display: flex;
  flex: none;
}
.agenda-faces canvas,
.agenda-face canvas {
  display: block;
  border-radius: 50%;
  background: var(--fill-2);
}
.agenda-faces > * {
  box-shadow: 0 0 0 2px var(--glass-rim);
}
.agenda-faces > * + * {
  margin-left: -8px;
}
/* Un collègue de l'agenda des congés qui n'est pas dans Smapville : son initiale. */
.agenda-initial {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: var(--haze);
  color: var(--accent);
  font-weight: 700;
}
.agenda-chevron {
  display: grid;
  color: var(--text-3);
  transform: rotate(180deg);
  transition: transform var(--dur-base) var(--ease-sheet);
}
.agenda-chevron svg {
  width: 16px;
  height: 16px;
}
.agenda-leave[open] .agenda-chevron {
  transform: none;
}
.agenda-leave .agenda-group {
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  background: none;
  box-shadow: none;
  animation: agenda-unfold var(--dur-base) var(--ease-out);
}
@keyframes agenda-unfold {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* Une réunion : un filet (violet pendant la réunion), l'heure, le titre, la salle et la visio,
   puis les boutons (visio en jaune, salle ▾), sur toute la largeur de la carte. */
.agenda-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agenda-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 12px 24px;
}
/* Le filet de la réunion, comme dans Calendrier d'Apple. */
.agenda-card::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 11px;
  width: 3px;
  border-radius: 2px;
  background: var(--haze);
}
.agenda-card.live {
  background: color-mix(in srgb, var(--accent) 12%, var(--glass-hi));
}
.agenda-card.live::before {
  background: var(--accent);
}
.agenda-when {
  flex: none;
  width: 42px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-sub);
  font-variant-numeric: tabular-nums;
}
.agenda-when b {
  font-weight: 600;
}
.agenda-when span {
  color: var(--text-3);
}
.agenda-when.small {
  width: 40px;
  font-size: var(--fs-footnote);
}
.agenda-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 20px;
}
.agenda-card-time {
  font-size: var(--fs-sub);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.agenda-card-title {
  margin: 0;
  font-size: var(--fs-callout);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.agenda-badge {
  flex: none;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: var(--fill-2);
  color: var(--text);
}
.agenda-badge.live {
  background: var(--accent);
  color: var(--accent-text);
}
.agenda-badge.soon {
  background: color-mix(in srgb, var(--orange) 24%, transparent);
}
.agenda-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: var(--fs-footnote);
  color: var(--text-2);
}
.agenda-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.agenda-meta .ic svg {
  width: 13px;
  height: 13px;
}
.agenda-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.agenda-actions .btn.small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.agenda-actions .ic svg {
  width: 14px;
  height: 14px;
}
/* La salle d'une réunion : y aller, et ▾ pour en changer (comme micro ▾ dans le dock). */
.agenda-split {
  display: inline-flex;
  gap: 1px;
}
.agenda-split > .btn.small:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.agenda-split > .agenda-split-more {
  padding: 6px 7px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.agenda-split-more svg {
  display: block;
  width: 13px;
  height: 13px;
  transform: rotate(180deg);
}
/* Finie avant l'heure (fin-reunion.js) : en retrait, le titre barré. */
.agenda-card.ended {
  opacity: 0.72;
}
.agenda-card.ended .agenda-card-title {
  text-decoration: line-through;
}
.agenda-card.ended::before {
  background: var(--fill-2);
}
/* Une salle réservée : la ligne y emmène. */
.agenda-room .agenda-row-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agenda-row-go {
  display: grid;
  color: var(--text-3);
}
.agenda-row-go svg {
  width: 16px;
  height: 16px;
}
/* Agenda illisible (accès retiré, Google qui ne répond pas) : le dire, et réessayer. */
.agenda-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--red) 12%, transparent);
  font-size: var(--fs-sub);
}
.agenda-alert > .ic {
  color: var(--red);
}
.agenda-alert > span {
  flex: 1;
  min-width: 0;
}
/* Pas d'agenda relié : l'inviter à le faire. */
.agenda-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 22px 18px;
  text-align: center;
}
.agenda-empty-ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--accent);
  color: var(--accent-text);
}
.agenda-empty-ic svg {
  width: 24px;
  height: 24px;
}
.agenda-empty b {
  font-size: var(--fs-headline);
}
.agenda-empty p {
  margin: 0 0 6px;
  font-size: var(--fs-sub);
  line-height: 1.45;
  color: var(--text-2);
}
/* « Actualiser » dans le menu « ⋯ » : l'heure de la dernière lecture, au bout. */
.menu-note {
  margin-left: auto;
  padding-left: 12px;
  font-size: var(--fs-footnote);
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
.agenda-note {
  margin: 0;
  font-size: var(--fs-footnote);
  color: var(--text-2);
}
/* « Rejoindre » la visio : jaune, texte foncé, en clair comme en sombre. */
.btn.meet,
.btn.meet:hover {
  background: var(--yellow);
  color: #1f1735;
}
.btn.meet:hover {
  filter: brightness(1.06);
}
/* Choisir la salle d'une réunion : les salles par étage, libres ou prises. */
.room-chooser {
  width: 300px;
}
.room-choices {
  max-height: min(52vh, 420px);
  overflow-y: auto;
  margin: 2px 0 4px;
}
.room-group .section-label {
  margin: 8px 10px 2px;
}
.room-choice .grow {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-state {
  font-size: var(--fs-footnote);
  color: var(--green, #34c759);
  white-space: nowrap;
}
.room-choice.taken .room-state {
  color: var(--text-2);
}
.room-choice.current .room-state {
  color: var(--accent);
  font-weight: 600;
}
.room-chooser .agenda-note {
  padding: 0 10px;
}
.room-status:empty {
  display: none;
}
.field-row.three {
  grid-template-columns: 1.4fr 1fr 1fr;
}
.modal-actions.left {
  justify-content: flex-start;
  margin-top: 12px;
}
@media (max-width: 720px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .settings-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 12px;
  }
  .settings-nav-title {
    display: none;
  }
}

/* Éditeur de carte (builder) : barre du haut, outils à gauche, propriétés à droite. */
body.editing #dock,
body.editing #me-card,
body.editing #videos,
body.editing #meeting-bg,
body.editing #view-switch,
body.editing #hint,
body.editing #where,
body.editing #toasts:empty {
  display: none;
}
.editor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}
.editor > * {
  pointer-events: auto;
}
.editor-top {
  position: absolute;
  top: var(--edge);
  left: calc((100% - var(--panel-space)) / 2);
  transform: translateX(-50%);
  animation: drop-in var(--dur-slow) var(--ease-sheet) backwards;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 16px;
  border-radius: var(--r-lg);
}
.editor-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 10px;
  font-size: var(--fs-body);
  white-space: nowrap;
}
.editor-title .ic svg {
  width: 18px;
  height: 18px;
}
.editor-top .icon-btn .ic svg {
  width: 17px;
  height: 17px;
}
.editor-top .icon-btn.flip .ic {
  transform: scaleX(-1);
}
.editor-top .icon-btn:disabled {
  opacity: 0.35;
}
.editor-tools {
  position: absolute;
  top: 50%;
  left: var(--edge);
  transform: translateY(-50%);
  animation: slide-from-left var(--dur-slow) var(--ease-sheet) backwards;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: var(--r-lg);
}
/* Au survol (ou au clavier), la barre des outils se déplie et montre le nom et la touche de chaque
   outil (.side-label), repliés le reste du temps. */
.side-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: max-width 0.22s ease, opacity 0.15s ease;
}
.side-label kbd {
  font: inherit;
  font-size: var(--fs-caption);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  background: rgba(127, 127, 127, 0.18);
  color: var(--text-2);
}
.editor-tool {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 0;
  font: inherit;
  font-size: var(--fs-body);
  cursor: pointer;
  transition: gap 0.3s var(--ease-sheet), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-slow) var(--ease-spring);
}
.editor-tools:hover .editor-tool,
.editor-tools:focus-within .editor-tool {
  gap: 12px;
}
.editor-tools:hover .side-label,
.editor-tools:focus-within .side-label {
  max-width: 260px;
  opacity: 1;
}
.editor-tool.active .side-label kbd {
  background: rgba(255, 255, 255, 0.22);
  color: inherit;
}
.editor-tool:active {
  transform: scale(0.9);
  transition-duration: var(--dur-press);
  transition-timing-function: var(--ease-out);
}
.editor-tool .ic svg {
  width: 19px;
  height: 19px;
}
.editor-tool:hover {
  background: rgba(127, 127, 127, 0.14);
}
.editor-tool.active {
  background: var(--accent);
  color: #ffffff;
}
.editor-side {
  position: absolute;
  top: calc(var(--edge) + 48px + var(--gap));
  right: var(--edge);
  bottom: var(--edge);
  width: 300px;
  animation: sheet-in var(--dur-sheet) var(--ease-sheet) backwards;
  overflow: auto;
  padding: 16px;
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.editor-side h3 {
  margin: 4px 0 0;
  font-size: var(--fs-footnote);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}
.editor-side .muted {
  margin: 0;
  font-size: var(--fs-sub);
  line-height: 1.5;
  color: var(--text-2);
}
.editor-swatches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.editor-swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--fs-sub);
  text-align: left;
  cursor: pointer;
}
.editor-swatch span {
  width: 16px;
  height: 16px;
  border-radius: var(--r-xs);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  flex: none;
}
.editor-swatch.active,
.editor-row.active,
.editor-decor-cell.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.editor-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.editor-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--fill);
  color: inherit;
  font: inherit;
  font-size: var(--fs-sub);
  text-align: left;
  cursor: pointer;
}
.editor-row .ic svg {
  width: 16px;
  height: 16px;
}
.editor-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-sub);
  color: var(--text-2);
}
.editor-field.check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: inherit;
}
.editor-field input[type="number"],
.editor-field input[type="text"],
.editor-field select,
.editor-side input[type="search"] {
  width: 100%;
}
.editor-field input[type="color"] {
  width: 48px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
}
.editor-grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.editor-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 220px;
  overflow: auto;
}
.editor-chips .chip {
  font-size: var(--fs-footnote);
}
.editor-decor {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 6px;
  max-height: 260px;
  overflow: auto;
}
.editor-decor-cell {
  aspect-ratio: 1;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--fill);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
.editor-decor-cell canvas {
  image-rendering: pixelated;
  width: 40px;
  height: 40px;
}
.editor-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
/* L'éditeur se referme : chaque barre repart vers son bord. */
.editor.leaving .editor-top {
  animation: drop-out var(--dur-base) var(--ease-in) forwards;
}
.editor.leaving .editor-tools {
  animation: slide-to-left var(--dur-base) var(--ease-in) forwards;
}
.editor.leaving .editor-side {
  animation: drawer-out var(--dur-base) var(--ease-sheet) forwards;
}
@keyframes drop-in {
  from {
    opacity: 0;
    transform: translate(-50%, -0.75rem);
  }
}
@keyframes drop-out {
  to {
    opacity: 0;
    transform: translate(-50%, -0.75rem);
  }
}
@keyframes slide-from-left {
  from {
    opacity: 0;
    transform: translate(-0.75rem, -50%);
  }
}
@keyframes slide-to-left {
  to {
    opacity: 0;
    transform: translate(-0.75rem, -50%);
  }
}

/* --- Coworking ----------------------------------------------------------------- */

.cowork-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 6px 4px 2px;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  background: var(--fill);
}
.cowork-card .btn {
  align-self: flex-start;
}
.cowork-card.live {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.cowork-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-body);
}
.cowork-title b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cowork-type {
  flex: none;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.cowork-bar {
  display: flex;
  gap: 3px;
  height: 6px;
}
.cowork-seg {
  flex-basis: 0;
  border-radius: 3px;
  background: var(--fill-2);
  overflow: hidden;
}
.cowork-seg i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.5s linear;
}
.cowork-seg.break i {
  background: var(--teal);
}
.cowork-seg.free i {
  background: var(--text-2);
}
.cowork-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cowork-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}
.cowork-actions .btn .ic svg {
  width: 14px;
  height: 14px;
  display: block;
}
.field-error {
  margin: 0;
  font-size: var(--fs-sub);
  color: var(--red);
}

/* Pastille du minuteur dans la barre du bas */
.dock-btn.cowork-pill {
  width: auto;
  border-radius: var(--r-pill);
  padding: 0 14px 0 5px;
  gap: 8px;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.dock-btn.cowork-pill.break {
  background: color-mix(in srgb, var(--teal) 16%, transparent);
}
.dock-btn.cowork-pill.free {
  background: var(--fill);
}
.cowork-ring {
  width: 36px;
  height: 36px;
  transform: rotate(-90deg);
  flex: none;
}
.cowork-ring circle {
  fill: none;
  stroke-width: 4;
}
.cowork-ring .track {
  stroke: var(--fill-2);
}
.cowork-ring .fill {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s linear;
}
.cowork-pill.break .cowork-ring .fill {
  stroke: var(--teal);
}
.cowork-pill.free .cowork-ring .fill {
  stroke: var(--text-2);
}
.cowork-pill-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  white-space: nowrap;
}
.cowork-pill-text b {
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
}
.cowork-pill-text small {
  font-size: var(--fs-caption);
  color: var(--text-2);
}

/* --- Terrains de jeu (basket, pétanque) : voir aussi jeux.css ------------------------- */

.court-record {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sub);
  color: var(--text-2);
}
.court-record span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.court-record .ic svg {
  width: 15px;
  height: 15px;
  display: block;
  color: #e0a92e;
}

/* Changement d'étage ou de monde : un voile qui tombe vite et se lève en douceur. */
.scene-fade {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, #2a2142, #120e1d);
  animation: fade var(--dur-fast) var(--ease-in) backwards;
}
.scene-fade.out {
  animation: fade-out 400ms var(--ease-out) forwards;
}

/* --- Agenda : compte à rebours, statuts automatiques --- */
.toast-countdown {
  display: block;
  height: 3px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--fill-2);
  overflow: hidden;
}
.toast-countdown i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transform-origin: left;
  animation: toast-countdown linear forwards;
}
@keyframes toast-countdown {
  to {
    transform: scaleX(0);
  }
}
.smart-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  font-size: var(--fs-footnote);
  color: var(--text-2);
}
.smart-status .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

/* --- Conversation verrouillée : bouton de la barre du haut --- */
.where-lock .ic svg {
  width: 13px;
  height: 13px;
}
.where-lock.on {
  background: var(--accent);
  color: var(--accent-text);
}

/* --- Ambiance : qui vous entend de loin (pastilles à côté des vignettes) --- */
.tile.ambient {
  width: 44px;
  height: 44px;
  align-self: center;
  border-radius: 50%;
  opacity: 0.72;
  cursor: default;
  outline-width: 2px;
}
.tile.ambient video,
.tile.ambient .tile-name,
.tile.ambient .tile-state,
.tile.ambient .tile-conn {
  display: none;
}
.tile.ambient .tile-avatar {
  background: linear-gradient(160deg, #3a3f5e, #262a40);
}
.tile.ambient .tile-avatar canvas {
  width: 34px;
  height: 34px;
}

/* --- Plantes de bureau : la fiche --- */
.card-plant {
  margin: 8px 4px 2px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--fill);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-sub);
}
.plant-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.plant-head .ic svg {
  width: 15px;
  height: 15px;
  color: #3f9b54;
}
.plant-stage {
  padding: 1px 7px;
  border-radius: var(--r-sm);
  background: rgba(63, 155, 84, 0.16);
  color: var(--green-text);
  font-weight: 600;
  font-size: var(--fs-footnote);
}
.plant-state {
  color: var(--text-2);
  font-size: var(--fs-footnote);
}
.plant-state.thirsty,
.plant-state.wilted,
.plant-state.dormant {
  color: #2f73d9;
  font-weight: 600;
}
.plant-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--fill-2);
  overflow: hidden;
}
.plant-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #3f9b54;
}
.plant-water {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
}
.plant-drops {
  display: inline-flex;
  gap: 3px;
}
.plant-drops i {
  width: 8px;
  height: 10px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  border: 1.5px solid #5aa9ff;
  transform: rotate(180deg);
}
.plant-drops i.full {
  background: #5aa9ff;
}
.plant-log {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-2);
  font-size: var(--fs-footnote);
}
.plant-log .ic svg {
  width: 11px;
  height: 11px;
  color: #5aa9ff;
}
.plant-action {
  display: flex;
  margin-top: 2px;
}
.plant-action .btn .ic svg {
  width: 13px;
  height: 13px;
}
.plant-note {
  color: var(--text-2);
  font-size: var(--fs-footnote);
}

/* --- Messagerie : mentions, « écrit… », textes longs ---------------------------------- */
.bubble .mention {
  font-weight: 600;
  color: var(--accent);
}
.bubble .mention.me {
  padding: 0 3px;
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.msg.mine .bubble .mention {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sub .typing {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: var(--accent);
}
.sub .typing i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  animation: typing-dot 1.2s var(--ease-out) infinite;
}
.sub .typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.sub .typing i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes typing-dot {
  0%,
  60%,
  100% {
    opacity: 0.25;
    transform: none;
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
/* Une adresse ou un mot très long ne déborde pas d'une notification ni d'une bulle. */
.toast .grow,
.bubble {
  overflow-wrap: anywhere;
}

/* --- Décorateur (decorator.js) : la bibliothèque d'objets à droite, comme celui de Gather --- */
.decorator {
  position: absolute;
  top: var(--edge);
  right: var(--edge);
  bottom: var(--edge);
  z-index: 8;
  width: 340px;
  max-width: calc(100vw - 2 * var(--edge));
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  overflow: hidden;
  animation: sheet-in var(--dur-sheet) var(--ease-sheet) backwards;
  /* Une feuille posée sur la carte, comme les panneaux : verre dense (le verre fin laissait passer
     un bureau éclairé, et le texte clair du thème sombre s'y perdait). */
  background: linear-gradient(145deg, var(--panel-hi), var(--panel-lo));
}
.decorator.leaving {
  animation: drawer-out var(--dur-base) var(--ease-sheet) forwards;
}
.deco-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px 8px 18px;
}
.deco-head h2 {
  margin: 0;
  font-size: var(--fs-headline);
  font-weight: 700;
}
.deco-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin: 4px 14px 10px;
  padding: 0 12px;
  border-radius: var(--r-md);
  background: var(--fill);
  color: var(--text-3);
}
.deco-search:focus-within {
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.deco-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--text);
}
/* « Mon bureau » et les huit catégories tiennent sur une ligne, sans défilement caché. */
.deco-tabs {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 2px;
  padding: 0 10px 8px;
}
.deco-tab {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 36px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.deco-tab:hover {
  background: var(--fill);
}
.deco-tab[aria-selected="true"] {
  background: var(--fill-2);
  color: var(--text);
}
.deco-head,
.deco-search,
.deco-tabs,
.deco-hint,
.deco-foot {
  flex-shrink: 0;
}
/* La grille seule rétrécit et défile : en-tête, onglets et pied restent toujours visibles. */
.deco-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: start;
  gap: 6px;
  padding: 4px 12px 12px;
  overflow-y: auto;
}
.deco-cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 0;
  border-radius: var(--r-lg);
  background: transparent;
  cursor: grab;
  touch-action: none;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.deco-cell:hover,
.deco-cell:focus-visible {
  background: var(--fill-2);
}
.deco-cell:active {
  transform: scale(0.94);
  cursor: grabbing;
}
/* En sombre, un halo clair derrière chaque objet : les meubles foncés (chaises noires, bureau noyer)
   ne se perdent plus dans le panneau. */
:root[data-theme="dark"] .deco-cell {
  background: radial-gradient(closest-side, rgba(236, 230, 250, 0.22), rgba(236, 230, 250, 0.06));
}
:root[data-theme="dark"] .deco-cell:hover,
:root[data-theme="dark"] .deco-cell:focus-visible {
  background: radial-gradient(closest-side, rgba(236, 230, 250, 0.32), rgba(172, 141, 224, 0.24));
}
.deco-cell canvas,
.deco-float canvas {
  image-rendering: pixelated;
  pointer-events: none;
}
/* Ni bureau ni table : les objets de bureau restent visibles mais ne se posent pas. */
.deco-cell.off,
.deco-cell.off:active {
  transform: none;
  cursor: not-allowed;
}
.deco-cell.off canvas {
  opacity: 0.35;
  filter: grayscale(0.6);
}
/* Nom de l'objet, en bas de sa case (jamais coupé par le défilement de la grille). */
.deco-cell[data-tip]:hover::after,
.deco-cell[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  max-width: calc(100% - 8px);
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(28, 22, 44, 0.9);
  color: #ffffff;
  font-size: var(--fs-caption);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.deco-empty {
  grid-column: 1 / -1;
  margin: 24px 0;
  text-align: center;
  font-size: var(--fs-sub);
  color: var(--text-3);
}
.deco-note {
  grid-column: 1 / -1;
  margin: 2px 4px 4px;
  font-size: var(--fs-footnote);
  line-height: 1.45;
  color: var(--text-3);
}
/* « Mon bureau » : un élément d'origine retiré est pâli, avec un « + » pour le remettre. */
.deco-cell.is-missing canvas {
  opacity: 0.38;
  filter: grayscale(0.6);
}
.deco-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
}
.deco-badge .ic svg {
  width: 13px;
  height: 13px;
}
/* « Mon bureau » : les objets posés, en liste, pour en reprendre un (au clavier surtout). */
.deco-placed {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}
.deco-placed h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 6px 4px;
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--text-2);
}
.deco-placed h3 span {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
.deco-placed p {
  margin: 2px 6px;
  font-size: var(--fs-footnote);
  line-height: 1.45;
  color: var(--text-3);
}
.deco-placed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 10px 4px 6px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sub);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.deco-placed-item:hover,
.deco-placed-item:focus-visible {
  background: var(--fill);
}
.deco-placed-item[aria-pressed="true"] {
  background: var(--fill-2);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.deco-placed-item canvas {
  flex-shrink: 0;
  image-rendering: pixelated;
}
.deco-placed-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deco-hint {
  margin: 0;
  padding: 10px 18px;
  border-top: 1px solid var(--fill-2);
  font-size: var(--fs-footnote);
  line-height: 1.45;
  color: var(--text-3);
}
.deco-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--fill-2);
}
.deco-foot .redo svg {
  transform: scaleX(-1);
}
/* Rien à annuler ou à rétablir : grisé, mais le bouton garde le focus (aria-disabled). */
.deco-foot .icon-btn[aria-disabled="true"] {
  opacity: 0.35;
  background: var(--fill);
  cursor: default;
  transform: none;
}
.deco-usage {
  margin-left: auto;
  font-size: var(--fs-sub);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
/* Un objet de son espace glissé vers le panneau : lâché ici, il est retiré. */
.decorator.drop-remove {
  box-shadow: inset 0 0 0 2px rgba(223, 84, 96, 0.75);
}
.decorator.drop-remove .deco-hint::before {
  content: "Lâchez ici pour retirer l'objet. ";
  font-weight: 600;
  color: var(--red);
}
.deco-float {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(20, 12, 40, 0.3));
}
/* Fenêtre basse : l'aide s'efface (sauf pour dire où lâcher), la place va aux objets. */
@media (max-height: 620px) {
  .decorator:not(.drop-remove) .deco-hint {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .decorator,
  .decorator.leaving {
    animation-duration: 1ms;
  }
}

/* Barre d'outils de l'objet choisi, posée au-dessus de lui sur la carte (decorator.js). */
.deco-tools {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 300px;
  padding: 8px 10px;
  border-radius: var(--r-lg);
  animation: deco-tools-in var(--dur-fast) var(--ease-out);
}
@keyframes deco-tools-in {
  from {
    opacity: 0;
    scale: 0.94;
  }
}
.deco-tools-name {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--text-2);
}
.deco-turns,
.deco-tools-actions,
.deco-swatches,
.deco-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
.deco-turn {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.deco-turn canvas {
  image-rendering: pixelated;
  pointer-events: none;
}
.deco-turn:hover {
  background: var(--fill);
}
.deco-turn[aria-pressed="true"] {
  background: var(--fill-2);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.deco-tools .icon-btn {
  position: relative;
}
.deco-tools .icon-btn.danger {
  color: var(--red);
}
.deco-swatch {
  position: relative;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgba(20, 12, 40, 0.16);
  cursor: pointer;
}
.deco-swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--accent);
}
.deco-chip {
  border: 0;
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--fill);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-caption);
  cursor: pointer;
}
.deco-chip[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-text);
}
/* Noms des orientations, couleurs et boutons au survol (au-dessus), des catégories (en dessous). */
.deco-tools [data-tip]:hover::after,
.deco-tools [data-tip]:focus-visible::after,
.deco-tab[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  z-index: 2;
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(28, 22, 44, 0.92);
  color: #ffffff;
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}
.deco-tab {
  position: relative;
}
.deco-tab[data-tip]:hover::after {
  top: calc(100% + 4px);
  bottom: auto;
}
.deco-tab:first-child[data-tip]:hover::after {
  left: 0;
  transform: none;
}
.deco-tab:last-child[data-tip]:hover::after {
  left: auto;
  right: 0;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .deco-tools {
    animation: none;
  }
}

/* --- Vue réunion : les caméras en grand sur un fond voilé (comme Google Meet) --- */
.meeting-bg {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(120% 90% at 50% 0%, rgba(62, 44, 110, 0.8), rgba(16, 12, 28, 0.92));
  -webkit-backdrop-filter: var(--glass-blur, blur(22px) saturate(1.2));
  backdrop-filter: var(--glass-blur, blur(22px) saturate(1.2));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 420ms var(--ease-out),
    visibility 0s 420ms;
}
.app.meeting-view .meeting-bg {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 420ms var(--ease-out);
}
/* Sans l'effet verre : un voile plein, la carte ne se devine plus derrière les caméras. */
:root[data-glass="off"] .meeting-bg {
  background: radial-gradient(120% 90% at 50% 0%, rgb(62, 44, 110), rgb(16, 12, 28));
}
/* La carte s'efface, et ce qui sert à s'y promener avec elle. */
.app.meeting-view .minimap,
.app.meeting-view .zoom,
.app.meeting-view .recenter,
.app.meeting-view .hint,
.app.meeting-view .follow-chip {
  opacity: 0;
  pointer-events: none;
}
.app.meeting-view .tile:not(.ambient) {
  border-radius: var(--r-xl);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 1.25rem 3rem -1rem rgba(0, 0, 0, 0.55);
}
.app.meeting-view .tile.speaking {
  outline-width: 3px;
}
.tile.screen.main {
  background: rgba(0, 0, 0, 0.35);
}
.tile.screen.main video {
  background: transparent;
}
.tile.pip {
  z-index: 2;
  border-color: rgba(255, 255, 255, 0.3);
}
.tile.big .tile-name {
  left: 12px;
  bottom: 11px;
  padding: 4px 10px;
  font-size: var(--fs-sub);
}
.tile.big .tile-state {
  top: 12px;
  right: 12px;
}
/* Le visage grandit avec la vignette (×2, ×3 : le pixel art reste net) ; en route, tile-motion.js
   l'emmène de sa taille d'avant à la nouvelle. */
.tile.big .tile-avatar canvas {
  scale: 2;
}
.tile.huge .tile-avatar canvas {
  scale: 3;
}
/* Épingler : au survol en vue réunion ; épinglée, l'épingle reste. */
.tile-pin {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: var(--glass-blur, blur(10px));
  backdrop-filter: var(--glass-blur, blur(10px));
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-slow) var(--ease-spring),
    background var(--dur-fast) var(--ease-out);
}
.tile-pin svg {
  width: 15px;
  height: 15px;
}
.app.meeting-view .tile:hover .tile-pin,
.app.meeting-view .tile-pin:focus-visible,
.tile.pinned .tile-pin {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.tile.pinned .tile-pin {
  background: var(--accent);
  color: var(--accent-text);
}
.tile.big .tile-pin {
  top: 12px;
  left: 12px;
  width: 34px;
  height: 34px;
}
/* Les options de la vignette (ui.js, tileOptions) : au survol, en haut à gauche, à côté de l'épingle
   (en bas à droite, sa propre vignette en incrustation le cachait) ; ouvertes, il reste. */
.tile-more {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: var(--glass-blur, blur(10px));
  backdrop-filter: var(--glass-blur, blur(10px));
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-slow) var(--ease-spring);
}
.tile-more svg {
  width: 15px;
  height: 15px;
}
.tile:hover .tile-more,
.tile-more:focus-visible,
.tile-more[aria-expanded="true"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.app.meeting-view .tile-more,
.tile.pinned .tile-more {
  left: 44px;
}
.tile.big .tile-more {
  top: 12px;
  left: 12px;
  width: 34px;
  height: 34px;
}
.app.meeting-view .tile.big .tile-more,
.tile.big.pinned .tile-more {
  left: 54px;
}
.tile-menu {
  max-width: 280px;
}
/* La coche d'un élément de menu à cocher (menuToggle) : au bout de la ligne. */
.menu-check {
  display: inline-flex;
  width: 18px;
  margin-left: auto;
  padding-left: 12px;
  color: var(--accent);
}
.menu-check .ic {
  width: 16px;
  height: 16px;
}
.tile-menu-note {
  margin: 2px 10px 6px;
  font-size: var(--fs-footnote);
  color: var(--text-2);
}
/* Micro de salle : « Salle » après le nom, en texte (pas seulement une couleur). */
.tile-room {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.22);
  font-weight: 700;
}
.tile-room .ic {
  width: 11px;
  height: 11px;
}
/* « +N » : qui attend hors champ. */
.tile.more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  font: inherit;
  font-size: var(--fs-sub);
  font-weight: 700;
  color: #fff;
  background: linear-gradient(160deg, #3a3f5e, #262a40);
}
.tile.more.small {
  border-radius: 50%;
  font-size: var(--fs-footnote);
}
.more-faces {
  display: flex;
}
.more-faces canvas {
  width: 40px;
  height: 40px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #262a40;
  background: #2e3350;
}
.more-faces canvas:first-child {
  margin-left: 0;
}

/* --- Sélecteur de vue : bureau (la carte) ou réunion (les caméras en grand) --- */
.view-switch {
  position: absolute;
  top: var(--edge);
  right: calc(var(--edge) + var(--panel-space));
  z-index: 5;
  display: flex;
  padding: 4px;
  border-radius: var(--r-lg);
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  transition:
    right var(--slide),
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-slow) var(--ease-spring);
}
.view-switch.shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.view-switch button {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 34px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-out),
    width var(--dur-slow) var(--ease-sheet),
    padding var(--dur-slow) var(--ease-sheet),
    opacity var(--dur-base) var(--ease-out);
}
/* Une vue d'un seul endroit (ui.js, VIEWS « only ») : ailleurs, son bouton se replie. */
.view-switch button.view-off {
  width: 0;
  padding-inline: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.view-switch button[aria-checked="true"] {
  color: var(--text);
}
.view-switch button svg {
  width: 18px;
  height: 18px;
}
.view-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 40px;
  height: 34px;
  border-radius: var(--r-md);
  background: var(--glass-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 1px 4px rgba(31, 23, 53, 0.16);
  transition: translate var(--dur-slow) var(--ease-spring);
}
/* Le curseur sous la vue choisie (--view-i : son rang, ui.js). */
.view-switch .view-thumb {
  translate: calc(var(--view-i, 0) * 40px) 0;
}
@media (prefers-reduced-motion: reduce) {
  .tile,
  .view-thumb,
  .meeting-bg {
    transition: none;
  }
}

/* --- Boîte à outils des réunions (panneau « Outils ») : sondage, minuteur, tour de parole --- */
.tool-launch {
  display: grid;
  gap: 8px;
}
.tool-tile {
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 10px;
  align-items: center;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--fill);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition:
    transform var(--dur-slow) var(--ease-spring),
    background var(--dur-fast) var(--ease-out);
}
.tool-tile:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 12%, var(--fill));
}
.tool-tile:active:not(:disabled) {
  transform: scale(0.98);
}
.tool-tile:disabled {
  opacity: 0.5;
  cursor: default;
}
.tool-tile-ic {
  grid-row: span 2;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-text);
}
.tool-tile-ic svg {
  width: 19px;
  height: 19px;
  display: block;
}
.tool-tile b {
  font-size: var(--fs-body);
}
.tool-tile small {
  color: var(--text-2);
  font-size: var(--fs-footnote);
}
.tools-hint {
  margin: 0 4px 10px;
}
.tool-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.poll-draft-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.poll-draft-row .input {
  flex: 1;
}
.poll-add {
  align-self: flex-start;
}
.timer-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.timer-presets .chip {
  padding: 6px 12px;
  font-size: var(--fs-sub);
}
.tool-card {
  margin: 8px 0;
  padding: 12px;
  border-radius: var(--r-lg);
  background: var(--fill);
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: appear var(--dur-slow) var(--ease-sheet) backwards;
}
.tool-card.ended {
  opacity: 0.72;
}
.tool-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sub);
}
.tool-card-head .grow {
  flex: 1;
}
.tool-card-ic svg {
  width: 16px;
  height: 16px;
  display: block;
  color: var(--accent);
}
.tool-question {
  margin: 0;
  font-weight: 600;
  font-size: var(--fs-body);
}
.poll-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Chaque choix se remplit de sa part des votes, en glissant quand elle change. */
.poll-option {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--glass-strong);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.poll-option::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pct, 0%);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  transition: width var(--dur-sheet) var(--ease-sheet);
}
.poll-option > * {
  position: relative;
}
.poll-option.mine {
  border-color: var(--accent);
}
.poll-option.mine::before {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}
.poll-option:disabled {
  cursor: default;
}
.poll-count {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tool-time {
  font-size: var(--fs-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.tool-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--hairline);
  overflow: hidden;
}
.tool-progress i {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 250ms linear;
}
.turn-list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--fs-sub);
}
.turn-list li.done {
  color: var(--text-2);
  text-decoration: line-through;
}
.turn-list li.now {
  font-weight: 700;
  color: var(--accent);
}
/* À côté de la barre de la pièce : le temps qui reste et à qui c'est de parler. */
.tools-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font: inherit;
  font-size: var(--fs-sub);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  flex: none;
  animation: appear var(--dur-slow) var(--ease-sheet) backwards;
}
.tools-chip .ic svg {
  width: 14px;
  height: 14px;
  display: block;
}
.tools-chip-time {
  font-variant-numeric: tabular-nums;
}
.tools-chip .done {
  color: var(--red);
}
body.editing #tools-chip {
  display: none;
}

/* --- Main levée : bouton du dock, pastille des vignettes, file du panneau Outils --- */
.dock .dock-btn.raised {
  background: var(--yellow);
  color: #1f1735;
}
.tile .tile-state span.hand {
  background: var(--yellow);
  color: #1f1735;
  animation: hand-wave 1.4s var(--ease-out) 2;
  transform-origin: 50% 80%;
}
@keyframes hand-wave {
  0%,
  100% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(-14deg);
  }
  40% {
    transform: rotate(12deg);
  }
  60% {
    transform: rotate(-8deg);
  }
}
.hand-list {
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
  counter-reset: hand;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hand-list li {
  counter-increment: hand;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--yellow) 18%, var(--fill));
  font-size: var(--fs-sub);
  font-weight: 600;
}
.hand-list li::before {
  content: counter(hand);
  width: 16px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.hand-list .grow {
  flex: 1;
}
@media (prefers-reduced-motion: reduce) {
  .tile .tile-state span.hand {
    animation: none;
  }
}

/* Paramètres de l'espace › Visio (debug), pour les admins : les appels de chacun (visio-debug.js). */
.modal.visio-modal {
  width: min(1100px, 100%);
}
.vd-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.vd-toolbar .search-field {
  flex: 1 1 220px;
}
.vd-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
.vd-body section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.vd-title {
  margin: 0;
  font-size: var(--fs-callout);
}
.vd-meta {
  color: var(--text-3);
  font-size: var(--fs-sub);
  font-weight: 400;
}
.vd-small {
  margin: 0;
  font-size: var(--fs-sub);
}
.vd-error {
  margin: 0;
  color: var(--red);
  font-size: var(--fs-sub);
}
.vd-person {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--fill);
}
.vd-person > summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 10px 14px;
  cursor: pointer;
}
.vd-person-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 0 14px 12px;
}
.vd-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--glass-strong);
  border: 1px solid var(--hairline);
  min-width: 0;
}
.vd-link.sfu {
  border-left: 3px solid var(--accent);
}
.vd-link-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.vd-sub {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 10px;
  border-left: 2px solid var(--hairline);
}
.vd-sub-title {
  font-size: var(--fs-caption);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vd-conn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.vd-path {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
  user-select: text;
}
.vd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.vd-chips.inline {
  display: inline-flex;
}
.vd-chip,
.vd-badge {
  font-size: var(--fs-caption);
  line-height: 1.5;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--fill-2);
  color: var(--text-2);
  white-space: nowrap;
  user-select: text;
}
.vd-chip.idle {
  color: var(--text-3);
  background: var(--fill);
}
.vd-chip.warn,
.vd-badge.warn,
.vd-badge.wait {
  background: color-mix(in srgb, var(--orange) 22%, transparent);
  color: var(--text);
}
.vd-chip.bad,
.vd-badge.bad {
  background: color-mix(in srgb, var(--red) 22%, transparent);
  color: var(--text);
}
.vd-badge.ok {
  background: color-mix(in srgb, var(--green) 22%, transparent);
  color: var(--text);
}
@media (max-width: 600px) {
  .vd-chip,
  .vd-badge {
    white-space: normal;
  }
}

/* --- Fenêtre sans barre de titre (application de bureau, Mac et Linux : titlebar.js) ----------
   Les boutons de la fenêtre sont sur la page ; env(titlebar-area-x) est le début de l'espace libre
   à leur droite, env(titlebar-area-height) la hauteur de la barre. La bande .window-bar, en tête de
   la page, déplace la fenêtre : au-dessus de la carte, sous tout ce qui flotte (z-index 4 et plus).
   Electron additionne les zones « drag » et retranche les « no-drag », dans l'ordre du document ;
   rien qui couvre toute la fenêtre ne doit être « no-drag » (le calque des vignettes, .videos,
   l'annulerait). app-region s'hérite, et « none » y vaut « no-drag » : pour n'être ni l'un ni
   l'autre, c'est « initial ». */
.window-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(titlebar-area-height, 36px);
  z-index: 3;
  -webkit-app-region: drag;
  app-region: drag;
  /* L'ombre intérieure, toujours là ; plus profonde à l'approche (::after). */
  background: linear-gradient(to bottom, rgba(10, 12, 20, 0.3), rgba(10, 12, 20, 0.08) 60%, rgba(10, 12, 20, 0));
}
/* L'ombre de l'approche descend un peu sous la bande : là, elle ne fait que se voir (ni zone de
   déplacement, ni obstacle aux clics sur la carte). */
.window-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: linear-gradient(to bottom, rgba(10, 12, 20, 0.42), rgba(10, 12, 20, 0.14) 50%, rgba(10, 12, 20, 0));
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
  -webkit-app-region: initial;
  app-region: initial;
}
.window-bar.near::after {
  opacity: 1;
}
/* Accueil : la carte d'accueil passe devant la bande si la fenêtre est petite. */
.titlebar-overlay .join-card {
  z-index: 4;
}
/* Tout ce qui se clique reste hors de la bande. */
.titlebar-overlay :is(.top-left, .view-switch, .panel, .toasts, .modal-backdrop, .join-card, button, a, input, select, textarea, [role="button"], [role="radiogroup"], .tile) {
  -webkit-app-region: no-drag;
  app-region: no-drag;
}
/* Le lieu où l'on est passe à droite des boutons du Mac (sous Linux, ils sont à droite). */
.titlebar-overlay .top-left {
  left: max(var(--edge), calc(env(titlebar-area-x, 0px) + 4px));
}
/* Applications 0.1.0 et 0.1.1 : elles injectaient leur propre bande (html, .app ou .join ::before),
   et rendaient « no-drag » le calque des vignettes, qui couvre toute la fenêtre depuis la vue
   réunion : plus de bande du tout. La page reprend la main. */
.titlebar-overlay::before,
.titlebar-overlay .app::before,
.titlebar-overlay .join::before {
  content: none !important;
}
.titlebar-overlay .videos {
  -webkit-app-region: initial !important;
  app-region: initial !important;
}