/* Ponts applicatifs : le langage visuel est conservé dans assets/j06/. */
[hidden] { display: none !important; }
/* Le conteneur est une frontière de navigation, pas un élément de mise en page. */
[data-navigation-page] {
  display: contents;
}

/* Les routes secondaires restent sous le dock et les notifications. */
[data-navigation-overlay-host] {
  position: fixed;
  z-index: 12006;
  inset: 0;
  display: grid;
  min-width: 0;
  min-height: 0;
  isolation: isolate;
  overflow: hidden;
  pointer-events: none;
}

[data-navigation-overlay-host]:empty {
  display: none;
}

[data-navigation-overlay-host] > [data-navigation-overlay] {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: grid;
  overflow-x: hidden;
  overflow-y: auto;
  place-items: start center;
  padding: clamp(1.5rem, 5vh, 3rem) clamp(0.75rem, 3vw, 2rem) calc(var(--j04-dock-height, 4.5rem) + 1rem);
  pointer-events: auto;
  animation: navigation-overlay-in 150ms ease-out both;
  overscroll-behavior: contain;
}

[data-navigation-overlay][data-navigation-overlay-mode="fallback"] {
  position: fixed;
  z-index: 12006;
  inset: 0;
  display: grid;
  min-width: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  place-items: start center;
  padding: clamp(1.5rem, 5vh, 3rem) clamp(0.75rem, 3vw, 2rem) calc(var(--j04-dock-height, 4.5rem) + 1rem);
  animation: navigation-overlay-in 150ms ease-out both;
  overscroll-behavior: contain;
}

[data-navigation-overlay-backdrop] {
  position: fixed;
  z-index: -1;
  inset: 0;
  background: rgba(10, 12, 15, 0.48);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

[data-navigation-overlay-host] [data-navigation-overlay] dialog[open],
[data-navigation-overlay-host] dialog[open][data-navigation-overlay] {
  position: relative;
  inset: auto;
  z-index: 1;
  margin: 0;
  transform: none;
}

[data-navigation-overlay][data-navigation-overlay-mode="fallback"] dialog[open] {
  position: relative;
  inset: auto;
  z-index: 1;
  margin: 0;
  transform: none;
}

body.app-overlay-open .app-shell,
body.app-overlay-open [data-side-menu],
body.app-overlay-open [data-side-menu-toggle] {
  filter: blur(5px) brightness(0.62);
  transition: filter 150ms ease-out;
}

body.app-overlay-open [data-side-menu],
body.app-overlay-open [data-side-menu-toggle] {
  z-index: 12005;
  pointer-events: none;
}

/* Une pile globale immuable, sous la barre des tâches et sa marque. */
#toast-region.toast-region {
  position: fixed;
  z-index: 12039;
  display: flex;
  top: auto !important;
  right: 5px !important;
  bottom: 5px !important;
  left: auto !important;
  width: auto;
  max-width: calc(100vw - 10px);
  align-items: flex-end;
  flex-direction: column;
  gap: 0.28rem;
  margin: 0;
  pointer-events: none;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body:has(.taskbar) #toast-region.toast-region {
  bottom: calc(var(--j04-dock-height, 3.75rem) + 5px) !important;
}

/* Repli sans Popover API : les notifications du player restent au-dessus de son overlay. */
body.player-open #toast-region.toast-region {
  z-index: 13010;
  bottom: 5px !important;
}

#toast-region .toast__close {
  top: 50%;
  transform: translateY(-50%);
}

#toast-region.toast-region[popover] {
  height: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: inherit;
}

.taskbar {
  z-index: 12040;
}

.taskbar__fullscreen-toggle {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: calc(0.625rem + 10.75rem + var(--space-2));
  width: var(--control-h);
  min-width: var(--control-h);
  height: var(--control-h);
  min-height: var(--control-h);
  border-color: transparent;
  background: transparent;
  color: var(--color-text-secondary);
  transform: translateY(-50%);
}

.taskbar__fullscreen-toggle[aria-pressed="true"] {
  border-color: transparent;
  background: transparent;
  color: var(--color-text);
}

.taskbar__fullscreen-toggle:hover,
.taskbar__fullscreen-toggle:focus-visible {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.taskbar__fullscreen-toggle:active {
  transform: translateY(calc(-50% + 1px));
}

@media (max-width: 36.25rem) {
  .taskbar__fullscreen-toggle {
    right: var(--space-3);
  }
}

/* Sélection commune aux vignettes Daily, Jour et Séquence. Une couche réelle
   évite les collisions avec les pseudo-éléments historiques des cartes. */
[data-project-days-screen] [data-media-card][data-media-selected="true"] {
  border-color: transparent;
  outline: 3px solid #6482b4;
  outline-offset: -3px;
  box-shadow: none;
}

[data-project-days-screen] .media-card__selection-overlay {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: none;
  border: 0;
  background: rgba(77, 112, 164, 0.24);
  box-shadow: inset 0 0 0 3px #6482b4;
  pointer-events: none;
}

[data-project-days-screen] [data-media-card][data-media-selected="true"] > .media-card__selection-overlay {
  display: block;
}

/* Cartes dailies : rendu et mouvements de la référence V1. */
[data-project-days-screen] .daily-card {
  overflow: visible;
}

[data-project-days-screen] .daily-card__media {
  overflow: hidden;
}

[data-project-days-screen] .daily-card__info {
  min-height: 0;
  padding: 10px var(--daily-card-camera-clearance) 10px 22px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: opacity 250ms ease, transform 250ms ease, padding 250ms ease;
}

[data-project-days-screen] .daily-card__title,
[data-project-days-screen] .daily-card__title strong {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

[data-project-days-screen] .daily-card__top .camera {
  margin-right: 17px;
}

/* Les titres Jour/Séquence reprennent la même police et la même disparition
   vers le haut que le bandeau des dailies. */
[data-project-days-screen] .axis-card__label,
[data-project-days-screen] .axis-card__day-title,
[data-project-days-screen] .axis-card__sequence-id,
[data-project-days-screen] .axis-card__sequence-name {
  font-family: var(--font-ui);
  font-weight: 400;
}

[data-project-days-screen] .axis-card__day-title,
[data-project-days-screen] .axis-card__sequence-id {
  font-size: 20px;
}

@media (hover: hover) {
  [data-project-days-screen] .axis-card:hover .axis-card__label {
    opacity: 0;
    transform: translateY(-102%);
  }
}

[data-project-days-screen] .axis-card.is-scrubbing .axis-card__label,
[data-project-days-screen] .axis-card.is-pretouched .axis-card__label {
  opacity: 0;
  transform: translateY(-102%);
}

[data-project-days-screen] .daily-card__top,
[data-project-days-screen] .daily-card__bottom {
  transition: opacity 250ms ease;
}

@media (hover: hover) {
  [data-project-days-screen] .daily-card:hover .daily-card__top,
  [data-project-days-screen] .daily-card:hover .daily-card__bottom {
    opacity: 0;
  }
}

[data-project-days-screen] .daily-card.is-scrubbing .daily-card__top,
[data-project-days-screen] .daily-card.is-scrubbing .daily-card__bottom {
  opacity: 0;
}

[data-project-days-screen] .daily-card__scrub {
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--v1-blue) var(--scrub-left, 0%), rgba(255, 255, 255, 0.28) var(--scrub-left, 0%));
}

[data-project-days-screen] .daily-card__scrub-time {
  position: absolute;
  z-index: 8;
  top: calc(100% + 0.3rem);
  bottom: auto;
  left: clamp(1.75rem, var(--scrub-left, 50%), calc(100% - 1.75rem));
  padding: 0.2rem 0.35rem;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-family: var(--font-timecode);
  font-size: 0.68rem;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 120ms linear;
  white-space: nowrap;
}

[data-project-days-screen] .daily-card.is-scrubbing > .daily-card__scrub-time {
  opacity: 1;
}

[data-catalogue-scrub-card] [data-temporal-poster] {
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 600% 1000%;
}

.catalogue-card__scrub {
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--v1-blue) var(--scrub-left, 0%), rgba(255, 255, 255, 0.28) var(--scrub-left, 0%));
  opacity: 0;
  pointer-events: none;
}

[data-catalogue-scrub-card].is-scrubbing .catalogue-card__scrub {
  opacity: 1;
}

/* Séparateurs Séquence / Plan fidèles aux repères de la V1. */
[data-project-days-screen] .daily-section__heading--sequence.day-sequence-divider {
  display: block;
  min-height: 0;
  margin: 0 18px;
  padding: 0 0 25px;
  border: 0;
  border-top: 1px dashed #fff;
}

[data-project-days-screen] .daily-section__heading--sequence.day-sequence-divider .day-sequence-divider__heading {
  position: relative;
  top: -0.65em;
  display: table;
  width: auto;
  margin: 0 0 -0.65em 50px;
  padding: 0 0.1rem;
  background: #1e1e21;
  color: #fff;
  font-family: var(--font-ui);
  font-size: medium;
  line-height: 1.25;
  white-space: normal;
}

[data-project-days-screen] .daily-section__heading--sequence.day-sequence-divider .day-sequence-divider__summary {
  display: block;
  max-width: none;
  margin: 0 30px 10px 0;
  color: #6e6e77;
  font-family: var(--font-ui);
  font-size: smaller;
  line-height: 1.25;
  text-align: right;
}

[data-project-days-screen] .daily-section__heading--plan {
  position: relative;
  min-height: 3.15rem;
  padding: 1.1rem 0 0;
}

[data-project-days-screen] .daily-section__heading--plan::before {
  position: absolute;
  top: 2.3rem;
  right: 20px;
  left: 20px;
  border-top: 2px solid #333338;
  content: "";
}

[data-project-days-screen] .daily-section__heading--plan h3 {
  position: relative;
  z-index: 1;
  display: table;
  margin: 0 35px;
  padding: 0 8px;
  background: #1e1e21;
  color: #333338;
  font-family: var(--font-ui);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}

[data-project-days-screen] .daily-section__heading h3,
[data-project-days-screen] .daily-section__heading h4 {
  margin: 0 35px;
}

[data-project-days-screen] [data-selected-sequence-label] .day-sequence-divider {
  display: none;
}

[data-media-card][data-media-selected="true"] {
  border-color: var(--color-selection-strong);
  box-shadow:
    0 0 0 2px var(--color-selection-strong),
    inset 0 0 0 999px var(--color-selection);
}

.daily-card[aria-selected="true"]::after {
  display: none;
  content: none;
}

/* Couche modale applicative partagée : les fenêtres et leur flou s'arrêtent
   au-dessus du dock, tandis que la barre des tâches et les notifications
   conservent leur niveau global. */
.app-dialog-layer {
  position: fixed;
  z-index: 12030;
  inset: 0 0 var(--j04-dock-height, 3.75rem);
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: auto;
  padding: clamp(0.75rem, 3vw, 2rem);
  isolation: isolate;
  overscroll-behavior: contain;
}

.app-dialog-layer[hidden] {
  display: none;
}

.app-dialog-layer__backdrop {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(7, 8, 10, 0.52);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.app-dialog-layer > dialog[open] {
  position: relative;
  inset: auto;
  z-index: 1;
  margin: 0;
}

.app-dialog-layer > dialog::backdrop {
  display: none;
}

@media (max-width: 42rem) {
  [data-project-days-screen] .daily-card__title,
  [data-project-days-screen] .daily-card__title strong,
  [data-project-days-screen] .axis-card__day-title,
  [data-project-days-screen] .axis-card__sequence-id {
    font-size: clamp(15px, 5.4cqw, 20px);
  }

  [data-project-days-screen] .daily-card__info {
    padding: clamp(7px, 2.7cqw, 10px) var(--daily-card-camera-clearance) clamp(7px, 2.7cqw, 10px) 22px;
  }
}

.side-menu__wordmark {
  display: none;
}

.side-menu__content {
  display: flex;
  flex-direction: column;
}

.side-account-navigation {
  flex: 0 0 auto;
}

.side-account-navigation__logout {
  margin: 0;
}

.side-account-navigation .scope-action {
  width: 100%;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.side-account-navigation .scope-action .icon {
  flex: 0 0 auto;
}

.breadcrumb__label--compact {
  display: none;
}

[data-navigation-overlay] .project-create-close,
[data-navigation-overlay] .project-create-close:hover,
[data-navigation-overlay] .project-create-close:active {
  flex: 0 0 auto;
  color: var(--color-text);
  font-size: 1.4rem;
  line-height: 1;
  text-decoration: none;
}

[data-navigation-overlay] .account-form-header {
  display: flex;
  justify-content: flex-end;
}

@keyframes navigation-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  [data-navigation-overlay-host] > [data-navigation-overlay] {
    animation: none;
  }

  [data-navigation-overlay][data-navigation-overlay-mode="fallback"] {
    animation: none;
  }

  body.app-overlay-open .app-shell,
  body.app-overlay-open [data-side-menu],
  body.app-overlay-open [data-side-menu-toggle] {
    transition: none;
  }
}

@media (max-width: 36.25rem) {
  body[data-screen="projects"]::after,
  body[data-screen="catalog"]::after,
  body.side-menu-open[data-screen="projects"]::after,
  body.side-menu-open[data-screen="catalog"]::after {
    top: 50%;
    z-index: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    background-position: center;
    transform: translate(-50%, -50%);
  }

  body[data-screen="projects"] .app-shell,
  body[data-screen="catalog"] .app-shell {
    position: relative;
    z-index: 1;
    background: transparent;
  }

  .side-menu__wordmark {
    position: absolute;
    z-index: 1;
    right: 1rem;
    bottom: calc(var(--j04-dock-height, 3.75rem) + 0.75rem);
    display: block;
    width: 9rem;
    height: 4.5rem;
    background: url("j06/assets/home_logo.svg") center / contain no-repeat;
    opacity: 0.6;
    pointer-events: none;
  }

  .breadcrumb__trail--responsive .breadcrumb__label--default {
    display: none;
  }

  .breadcrumb__trail--responsive .breadcrumb__label--compact {
    display: inline;
  }
}
[data-catalogue-scrub-card][data-poster-proximity="far"],
[data-media-card-kind="daily"][data-poster-proximity="far"] {
  visibility: hidden;
  opacity: 0;
}

[data-catalogue-scrub-card][data-poster-proximity="near"],
[data-media-card-kind="daily"][data-poster-proximity="near"] {
  visibility: visible;
  opacity: 1;
}

.axis-card[data-catalogue-scrub-card] {
  transition: opacity var(--v1-motion, 500ms);
}

@media (prefers-reduced-motion: reduce) {
  .project-card[data-catalogue-scrub-card],
  .axis-card[data-catalogue-scrub-card],
  .daily-card[data-media-card-kind="daily"] {
    transition-duration: 1ms;
  }
}