/* ==========================================================================
   Pixel War — pixel_war.php
   Vocabulaire du site : fond sombre, liseré orange, titres en capitales espacées
   (Chakra Petch), texte en IBM Plex Mono. Tout est préfixé .pw- : rien ne déteint
   sur le reste du site.

   Desktop : toile à gauche, colonne de panneaux à droite (palette, joueurs, chat).
   Mobile (≤ 767.98px, même seuil que la Guerre du Clic) : bannière et footer retirés,
   header réduit à une fine bande, toile plein écran, dock d'action et barre d'onglets
   en bas ; les panneaux deviennent des tiroirs.
   ========================================================================== */

.pw-page {
  --pw-accent: #fa6d00;
  --pw-panel: rgba(10, 12, 16, 0.84);
  --pw-line: rgba(250, 109, 0, 0.35);
  --pw-text: #d6d6dc;
  --pw-muted: #8d8d97;
  /* Hauteur maximale de la toile en desktop. Sa largeur en découle : la zone a toujours les
     proportions de la toile (--pw-ratio, largeur / hauteur, posé par la page et tenu à jour
     par pw_app.js quand la toile s'agrandit). */
  --pw-stage-h: clamp(420px, 76vh, 820px);
  --pw-canvas-h: var(--pw-stage-h);
  --pw-ratio: 1;
}
/* En timelapse, ses commandes s'ajoutent sous la toile : elle leur cède la place pour que
   l'ensemble tienne toujours dans l'écran. */
body.pw-page.pw-is-timelapse { --pw-canvas-h: calc(var(--pw-stage-h) - 72px); }

/* Le ciel étoilé du bandeau vient avant le titre dans le DOM : sans contexte de
   superposition, il se peint par-dessus (même remède que signal.php). */
.pw-bandeau { position: relative; }

.pw-page .tf-section.pw-section { padding: 36px 0 70px !important; }

/* --- Mise en page --------------------------------------------------------- */

.pw-app {
  display: grid;
  /* La colonne de la toile a la largeur qui donne à la zone les proportions de la toile,
     sans dépasser la hauteur voulue ni pousser les panneaux hors du conteneur. */
  grid-template-columns: min(calc(100% - 392px), calc(var(--pw-canvas-h) * var(--pw-ratio))) 372px;
  justify-content: center;
  gap: 20px;
}

.pw-stage {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* La colonne prend la hauteur de la toile, pas celle de son contenu : height 0 +
   min-height 100 % la cale sur la rangée de la grille, et c'est le chat qui défile. */
.pw-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 0;
  min-height: 100%;
  /* Le thème borne tous les <aside> (280 px, marge haute de 30 px) : la colonne les annule
     pour occuper toute sa piste et s'aligner sur le haut de la toile. */
  max-width: none;
  margin-top: 0;
  /* Filet de sécurité : si l'écran est si bas que les panneaux ne tiennent plus, la
     colonne défile plutôt que de descendre sous la toile. L'axe horizontal est fermé
     explicitement : laissé en « auto » (ce qu'implique overflow-y), Firefox y posait une
     barre qui volait sa hauteur au contenu. */
  overflow-x: hidden;
  overflow-y: auto;
}
.pw-side > .pw-sheet[data-sheet="place"] { flex: none; }

/* --- Barre d'outils ------------------------------------------------------- */

.pw-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pw-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 12px/1 "Chakra Petch", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pw-muted);
}
.pw-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5b5b66;
}
.pw-status[data-state="live"] { color: #bff3d5; }
.pw-status[data-state="live"] .pw-status__dot {
  background: #3ddc84;
  box-shadow: 0 0 8px #3ddc84;
  animation: pw-pulse 2.4s ease-in-out infinite;
}
.pw-status[data-state="poll"] .pw-status__dot { background: #ffb000; }
.pw-status[data-state="offline"] { color: #ffb4b6; }
.pw-status[data-state="offline"] .pw-status__dot { background: #e5484d; }

@keyframes pw-pulse {
  50% { opacity: 0.35; }
}

.pw-coords {
  min-width: 90px;
  font: 13px/1 "IBM Plex Mono", monospace;
  color: var(--pw-text);
  font-variant-numeric: tabular-nums;
}

.pw-toolbar__actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pw-tool,
.pw-tl__speed,
.pw-tl__exit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 12, 16, 0.7);
  color: var(--pw-text);
  font: 600 12px/1 "Chakra Petch", system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.pw-tool:hover,
.pw-tool:focus-visible,
.pw-tl__speed:hover,
.pw-tl__exit:hover {
  border-color: var(--pw-accent);
  color: #fff;
  background: rgba(250, 109, 0, 0.12);
}
body.pw-is-timelapse .pw-tool[data-pw-action="timelapse"],
.pw-tl__speed.is-active {
  border-color: var(--pw-accent);
  color: #fff;
  background: rgba(250, 109, 0, 0.22);
}

/* --- Toile ---------------------------------------------------------------- */

.pw-canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: var(--pw-ratio);
  overflow: hidden;
  /* Un liseré qui ne prend pas de place : une bordure rognerait la zone et fausserait ses
     proportions. */
  box-shadow: 0 0 0 1px var(--pw-line);
  background: #05060a;
  user-select: none;
  -webkit-user-select: none;
}
#pw-canvas {
  position: relative;
  z-index: 1;
  display: block;
  cursor: crosshair;
}

/* Ciel étoilé derrière la toile : le moteur du bandeau du site, avec les mêmes nuées.
   Il ne se montre qu'en mobile, où la toile entière laisse du vide autour d'elle. Ailleurs
   la toile couvre toute la zone : il reste masqué, et son moteur, qui ne tourne que tant
   que son hôte est visible, reste à l'arrêt. */
.pw-sky { display: none; }

.pw-tooltip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  padding: 5px 9px;
  background: rgba(8, 10, 18, 0.92);
  border: 1px solid rgba(250, 109, 0, 0.4);
  color: var(--pw-text);
  font: 12px/1.35 "IBM Plex Mono", monospace;
  white-space: nowrap;
  pointer-events: none;
}

.pw-toast {
  position: absolute;
  left: 50%;
  top: 14px;
  z-index: 4;
  transform: translateX(-50%);
  max-width: calc(100% - 24px);
  padding: 8px 14px;
  background: rgba(8, 10, 18, 0.95);
  border: 1px solid var(--pw-accent);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  color: #fff;
  font: 600 13px/1.35 "Chakra Petch", system-ui, sans-serif;
  letter-spacing: 0.03em;
  text-align: center;
  pointer-events: none;
}

.pw-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 6, 10, 0.55);
  pointer-events: none;
}
.pw-overlay__box {
  padding: 18px 24px;
  background: var(--pw-panel);
  border: 1px solid var(--pw-line);
  border-left: 3px solid var(--pw-accent);
  color: var(--pw-text);
  font: 14px/1.5 "IBM Plex Mono", monospace;
  text-align: center;
}
.pw-kicker {
  margin-bottom: 10px;
  font: 600 12px/1 "Chakra Petch", system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pw-accent);
}
.pw-countdown {
  font: 700 34px/1 "Chakra Petch", system-ui, sans-serif;
  letter-spacing: 0.06em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* --- Timelapse ------------------------------------------------------------ */


.pw-timelapse {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 12px;
  background: var(--pw-panel);
  border: 1px solid var(--pw-line);
}
.pw-tl__play {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--pw-accent);
  background: rgba(250, 109, 0, 0.15);
  color: #fff;
  cursor: pointer;
}
.pw-tl__play:disabled { opacity: 0.4; cursor: default; }
.pw-tl__play .fa-pause,
.pw-tl__play.is-playing .fa-play { display: none; }
.pw-tl__play.is-playing .fa-pause { display: inline-block; }
.pw-tl__range {
  flex: 1 1 200px;
  min-width: 0;
  accent-color: var(--pw-accent);
}
.pw-tl__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 128px;
  font: 12px/1.3 "IBM Plex Mono", monospace;
  color: var(--pw-muted);
  font-variant-numeric: tabular-nums;
}
.pw-tl__date { color: var(--pw-text); }
.pw-tl__speeds { display: flex; gap: 4px; }
.pw-tl__speed { height: 32px; padding: 0 8px; letter-spacing: 0; }
.pw-tl__exit .fa-circle { color: #e5484d; font-size: 9px; }
.pw-tl__empty {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
  color: var(--pw-muted);
}

/* --- Panneaux ------------------------------------------------------------- */

.pw-panel {
  padding: 14px 16px;
  background: var(--pw-panel);
  border: 1px solid var(--pw-line);
  border-left: 3px solid var(--pw-accent);
}
.pw-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.pw-panel__title {
  margin: 0;
  font: 600 13px/1 "Chakra Petch", system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pw-accent);
}
.pw-count {
  display: inline-block;
  min-width: 22px;
  margin-left: 6px;
  padding: 3px 6px;
  background: rgba(250, 109, 0, 0.18);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0;
  text-align: center;
}
.pw-sheet__close { display: none; }

.pw-cell-info {
  min-height: 38px;
  margin-bottom: 12px;
  font: 13px/1.45 "IBM Plex Mono", monospace;
  color: var(--pw-text);
  overflow-wrap: anywhere;
}

.pw-palette {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 5px;
  margin-bottom: 14px;
}
.pw-swatch {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--c);
  cursor: pointer;
  transition: transform 0.1s;
}
.pw-swatch:hover { transform: scale(1.1); z-index: 1; }
.pw-swatch.is-active {
  z-index: 2;
  outline: 2px solid #fff;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px var(--pw-accent);
}

/* Desktop : six rangées de douze petits carrés (la colonne de droite, élargie à 372 px, les
   loge avec leur écart de 4 px), pour que les 72 couleurs tiennent à peu près dans la
   hauteur qu'occupaient les 32. Sur un écran bas, les carrés rapetissent encore (20 px à
   650 px de haut, 24 px à partir de 800) et la colonne reste sous la toile. */
@media (min-width: 992px) {
  .pw-side .pw-palette {
    grid-template-columns: repeat(12, clamp(20px, 3vh, 24px));
    gap: 4px;
    justify-content: center;
  }
  .pw-side .pw-swatch.is-active { box-shadow: 0 0 0 3px var(--pw-accent); }
}

.pw-place {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--pw-accent);
  background: var(--pw-accent);
  color: #0a0a0a;
  font: 700 15px/1 "Chakra Petch", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: filter 0.15s, background 0.15s;
}
.pw-place:hover:not(:disabled),
.pw-place:focus-visible { filter: brightness(1.12); color: #0a0a0a; }
.pw-place:disabled {
  border-color: rgba(255, 255, 255, 0.2);
  background: transparent;
  color: var(--pw-muted);
  cursor: not-allowed;
}
.pw-place.is-cooling:disabled {
  border-color: rgba(250, 109, 0, 0.45);
  background: rgba(250, 109, 0, 0.08);
  color: #ffd9a8;
}

.pw-help {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--pw-muted);
}
.pw-cta p {
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pw-text);
}

/* Joueurs : leur hauteur naturelle, plafonnée, et c'est le chat qui prend le reste. Sur
   un écran bas, la liste cède de la place (elle défile) avant que la colonne ne dépasse la
   hauteur de la toile. */
.pw-sheet[data-sheet="players"] {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  max-height: 32%;
  /* Au moins deux lignes visibles, la liste défile au-delà. */
  min-height: 88px;
}
.pw-players {
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.pw-player {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font: 11px/1.3 "IBM Plex Mono", monospace;
  color: var(--pw-text);
}
.pw-player.is-aiming { cursor: pointer; }
.pw-player.is-aiming:hover,
.pw-player.is-aiming:focus-visible { background: rgba(250, 109, 0, 0.08); outline: none; }
.pw-player__dot { flex: none; width: 7px; height: 7px; }
.pw-player__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pw-player__px {
  font-size: 10px;
  color: var(--pw-muted);
  font-variant-numeric: tabular-nums;
}

/* Chat */
.pw-panel--chat {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  /* Au moins trois ou quatre messages visibles au-dessus du champ de saisie. */
  min-height: 170px;
}

/* Écran bas : l'aide sous « Poser » laisse sa place aux joueurs et au chat, et le bouton
   se resserre un peu. */
@media (min-width: 992px) and (max-height: 760px) {
  .pw-side .pw-help { display: none; }
  .pw-side .pw-place { height: 42px; }
}
.pw-chat__list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 -6px 10px;
  padding: 0 6px;
  overflow-y: auto;
}
.pw-chat__empty {
  font-size: 12px;
  line-height: 1.5;
  color: var(--pw-muted);
}
.pw-msg {
  padding: 3px 0;
  font: 13px/1.45 "IBM Plex Mono", monospace;
  color: var(--pw-text);
  overflow-wrap: anywhere;
}
.pw-msg__time { margin-right: 6px; font-size: 11px; color: #62626d; }
.pw-msg__author { margin-right: 6px; font-weight: 600; }
.pw-chat__form { display: flex; gap: 6px; }
/* Le thème habille tous les champs texte (grand padding, grande police) : on reprend
   chaque propriété, avec une spécificité qui passe devant la sienne. */
.pw-chat__form .pw-chat__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  box-shadow: none;
  background: #07080c;
  color: #fff;
  font: 13px/40px "IBM Plex Mono", monospace;
}
.pw-chat__form .pw-chat__input::placeholder { color: #6c6c77; font-size: 13px; }
.pw-chat__form .pw-chat__input:focus { outline: none; border-color: var(--pw-accent); }
.pw-chat__send {
  flex: none;
  width: 44px;
  height: 40px;
  border: 1px solid var(--pw-accent);
  background: rgba(250, 109, 0, 0.15);
  color: #fff;
  cursor: pointer;
}
.pw-chat__send:hover { background: rgba(250, 109, 0, 0.3); }

.pw-players,
.pw-chat__list,
.pw-sheet {
  scrollbar-width: thin;
  scrollbar-color: rgba(250, 109, 0, 0.45) transparent;
}

/* Réservés au mobile */
.pw-dock,
.pw-tabbar { display: none; }

/* --- Tablette : la colonne passe sous la toile ------------------------------ */

@media (min-width: 768px) and (max-width: 991.98px) {
  .pw-app { grid-template-columns: minmax(0, 1fr); }
  .pw-stage {
    justify-self: center;
    width: min(100%, calc(var(--pw-canvas-h) * var(--pw-ratio)));
  }
  .pw-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: auto;
    min-height: 0;
  }
  .pw-sheet[data-sheet="players"] { max-height: 340px; }
  .pw-panel--chat { grid-column: 1 / -1; height: 380px; }
  .pw-palette { grid-template-columns: repeat(12, minmax(0, 34px)); justify-content: center; }
  .pw-app.is-anonymous .pw-side { grid-template-columns: 1fr; }
}

/* --- Mobile ---------------------------------------------------------------- */

/* Mobile : moins de 768 px de large, et aussi les téléphones tenus à l'horizontale, qui
   dépassent cette largeur mais n'ont pas la hauteur d'une mise en page desktop. Même
   requête que MOBILE dans pw_app.js. */
@media (max-width: 767.98px), (orientation: landscape) and (max-height: 500px) {
  .pw-page {
    --pw-top: 46px;
    --pw-tab: 58px;
    --pw-dockh: 64px;
    --pw-safe: env(safe-area-inset-bottom, 0px);
  }
  body.pw-page.pw-is-timelapse { --pw-dockh: 100px; }

  /* Bannière et footer retirés : la toile occupe l'écran. */
  .pw-page .page-title-slim { display: none !important; }
  .pw-page #footer { display: none !important; }

  /* Header du site réduit à une fine bande fixe (logo = retour au site, burger = menu),
     comme la Guerre du Clic (outils/guerre-bed/v3/ui/fullscreen_mobile.css). */
  body.pw-page.header-fixed #header_main.header {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--pw-top) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: rgba(8, 10, 18, 0.96) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(250, 109, 0, 0.28);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  }
  .pw-page #header_main.header .container,
  .pw-page #header_main #site-header-inner { height: var(--pw-top); }
  .pw-page #header_main #site-header-inner { align-items: center; }
  .pw-page #header_main .header__logo { flex: 0 0 auto; }
  .pw-page #header_main .header__logo img { height: 30px !important; width: auto !important; padding: 0 !important; }
  .pw-page #wrapper { padding-top: var(--pw-top); }

  .pw-page .tf-section.pw-section { padding: 0 !important; }
  .pw-section > .container { max-width: none; padding: 0; }
  .pw-app { display: block; }
  .pw-stage { position: relative; gap: 0; width: auto; justify-self: auto; }
  .pw-only-desktop { display: none !important; }

  /* Mobile : la zone prend tout l'écran disponible, la toile la couvre (on la fait glisser). */
  .pw-canvas-wrap {
    width: auto;
    aspect-ratio: auto;
    height: calc(100vh - var(--pw-top) - var(--pw-tab) - var(--pw-dockh) - var(--pw-safe));
    height: calc(100dvh - var(--pw-top) - var(--pw-tab) - var(--pw-dockh) - var(--pw-safe));
    min-height: 200px;
    box-shadow: none;
  }

  .pw-sky {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
      radial-gradient(88% 58% at 10% 4%, rgba(250, 109, 0, 0.10) 0%, transparent 62%),
      radial-gradient(66% 52% at 88% 18%, rgba(58, 92, 190, 0.17) 0%, transparent 66%),
      radial-gradient(110% 84% at 46% 104%, rgba(120, 54, 166, 0.15) 0%, transparent 62%),
      #05060a;
  }
  .pw-sky canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.7s ease;
  }
  .pw-sky.is-ready canvas { opacity: 1; }

  /* Outils en surimpression sur la toile. */
  .pw-toolbar {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    z-index: 5;
    gap: 6px;
    pointer-events: none;
  }
  .pw-toolbar > * { pointer-events: auto; }
  .pw-status {
    padding: 7px 9px;
    background: rgba(8, 10, 18, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 10px;
  }
  .pw-coords { display: none; }
  .pw-tool { width: 40px; height: 40px; padding: 0; background: rgba(8, 10, 18, 0.85); }
  .pw-toast { top: 60px; }

  /* Les panneaux deviennent des tiroirs, ouverts depuis la barre du bas. */
  .pw-side { display: contents; }
  .pw-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--pw-tab) + var(--pw-safe));
    z-index: 1140;
    max-height: min(64vh, 520px);
    max-height: min(64dvh, 520px);
    overflow-y: auto;
    border: 0;
    border-top: 1px solid var(--pw-accent);
    background: #0a0c10;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6);
    transform: translateY(calc(100% + var(--pw-tab) + 24px));
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }
  .pw-sheet.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.22s ease;
  }
  .pw-sheet__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: -8px -8px -8px 0;
    border: 0;
    background: none;
    color: var(--pw-text);
    font-size: 26px;
    line-height: 1;
  }
  .pw-sheet[data-sheet="players"] { max-height: 50vh; max-height: 50dvh; }
  .pw-panel--chat {
    height: min(64vh, 520px);
    height: min(64dvh, 520px);
    overflow: hidden;
  }
  .pw-palette { gap: 5px; margin-bottom: 4px; }
  .pw-help { display: none; }

  /* Dock : couleur choisie, case visée, bouton Poser. */
  .pw-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--pw-tab) + var(--pw-safe));
    z-index: 1130;
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--pw-dockh);
    padding: 8px 10px;
    background: rgba(8, 10, 18, 0.97);
    border-top: 1px solid rgba(250, 109, 0, 0.35);
  }
  body.pw-is-timelapse .pw-dock { display: none; }
  .pw-dock__swatch {
    flex: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #000;
    background: var(--c, transparent);
  }
  .pw-dock__swatch.is-empty {
    background: repeating-conic-gradient(#2c2c34 0 25%, #4a4a55 0 50%) 0 0 / 12px 12px;
  }
  .pw-dock__info {
    flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font: 12px/1.35 "IBM Plex Mono", monospace;
    color: var(--pw-text);
  }
  .pw-dock .pw-place {
    flex: none;
    width: auto;
    min-width: 104px;
    height: 46px;
  }

  /* Barre d'onglets. */
  .pw-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1150;
    display: flex;
    padding-bottom: var(--pw-safe);
    background: #0b0f1a;
    border-top: 1px solid #243049;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.5);
  }
  .pw-tab {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: var(--pw-tab);
    padding: 0 2px;
    border: 0;
    background: none;
    color: #9fb0d0;
    font: 600 10px/1 "Chakra Petch", system-ui, sans-serif;
    touch-action: manipulation;
  }
  .pw-tab i { font-size: 18px; }
  .pw-tab span:not(.pw-tab__badge) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pw-tab[aria-expanded="true"],
  body.pw-is-timelapse .pw-tab[data-pw-action="timelapse"] { color: #ffd9a8; }
  .pw-tab[aria-expanded="true"]::before,
  body.pw-is-timelapse .pw-tab[data-pw-action="timelapse"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;
    height: 2px;
    background: var(--pw-accent);
    box-shadow: 0 0 8px var(--pw-accent);
  }
  .pw-tab__badge {
    position: absolute;
    top: 5px;
    left: calc(50% + 7px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #243049;
    color: #fff;
    font: 700 10px/16px "Chakra Petch", system-ui, sans-serif;
    text-align: center;
  }
  .pw-tab__badge--unread { background: var(--pw-accent); color: #0a0a0a; }

  /* Timelapse : ses commandes prennent la place du dock. */
  .pw-timelapse {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--pw-tab) + var(--pw-safe));
    z-index: 1135;
    height: var(--pw-dockh);
    gap: 6px 10px;
    padding: 8px 10px;
    border: 0;
    border-top: 1px solid var(--pw-line);
    background: rgba(8, 10, 18, 0.97);
  }
  .pw-tl__range { flex: 1 1 0; }
  .pw-tl__meta { order: 3; flex: 1 1 auto; min-width: 0; flex-direction: row; gap: 10px; font-size: 11px; }
  .pw-tl__speeds { order: 4; }
  .pw-tl__speed { height: 30px; min-width: 32px; padding: 0 6px; }
  .pw-tl__exit { height: 40px; padding: 0 10px; font-size: 11px; }
}

/* Téléphone à l'horizontale : la hauteur est comptée, chaque bande se resserre pour la
   laisser à la toile (onglets sur une ligne, dock et header plus bas, timelapse sur une
   rangée), et la palette passe sur deux rangées de 24 pour tenir dans son tiroir. */
@media (orientation: landscape) and (max-height: 500px) {
  .pw-page { --pw-top: 40px; --pw-tab: 42px; --pw-dockh: 54px; }
  body.pw-page.pw-is-timelapse { --pw-dockh: 54px; }
  .pw-page #header_main .header__logo img { height: 26px !important; }

  .pw-tab { flex-direction: row; gap: 8px; font-size: 11px; }
  .pw-tab i { font-size: 16px; }
  .pw-tab__badge { position: static; }

  .pw-dock { gap: 12px; padding: 6px 12px; }
  .pw-dock__swatch { width: 40px; height: 40px; }
  .pw-dock .pw-place { height: 40px; }

  .pw-timelapse { flex-wrap: nowrap; padding: 6px 12px; }
  .pw-tl__play { width: 36px; height: 36px; }
  .pw-tl__meta { order: 0; flex: 0 0 auto; flex-direction: column; gap: 0; }
  .pw-tl__speeds { order: 0; }
  .pw-tl__exit { height: 36px; }

  .pw-palette { grid-template-columns: repeat(24, 1fr); gap: 5px; }
  .pw-cell-info { min-height: 0; margin-bottom: 8px; }
}