/* Jalon 05 — affinage V1, menu de scopes et hiérarchie des vignettes.
   Chargé après jalon04.css afin de préserver les snapshots antérieurs. */

:root {
  --j05-side-width: min(28rem, 92vw);
}

/* Connexion et récupération : resserrer la fenêtre et affirmer le CTA choisi. */
#forgot-dialog {
  width: min(23rem, calc(100vw - 1.25rem));
  max-height: calc(100dvh - 1.25rem);
}

#forgot-dialog .dialog__header {
  padding: 0.85rem 1rem 0.72rem;
}

#forgot-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
}

#forgot-dialog .dialog__body {
  padding: 0.8rem 1rem;
}

#forgot-dialog .dialog__body > p {
  margin-block: 0 0.5rem;
  line-height: 1.45;
}

#forgot-dialog .forgot-address {
  margin-top: 0.35rem;
}

#forgot-dialog .dialog__footer {
  gap: 0.55rem;
  padding: 0.7rem 1rem 0.85rem;
}

.login-card.is-password #auth-submit.button--primary {
  border-color: #6f9bd0;
  background: #527692;
  color: #fff;
}

.toast,
.toast--auth {
  min-height: 3rem;
  align-content: center;
  align-items: center;
  padding-block: 0.58rem;
}

.toast--single-line {
  min-height: 3rem;
}

.toast--single-line .toast__title {
  align-self: center;
  line-height: 1.25;
}

.toast .toast__close,
.toast--auth .toast__close {
  top: 50%;
  right: 0.2rem;
  transform: translateY(-56%);
}

/* Fil d’Ariane : taille et comportement d’opacité de la V1. */
.project-hero {
  display: flex;
  min-height: 3.45rem;
  align-items: center;
  padding-block: 0;
}

.breadcrumb {
  min-height: 3.45rem;
  align-items: center;
  gap: 0.48rem;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1;
}

body.is-scrolled .project-hero.is-first-touch,
body.is-scrolled .project-hero:hover,
body.is-scrolled .project-hero:focus-within {
  background: rgba(30, 30, 33, 0.76);
  opacity: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Le hamburger partage un axe exact pour les deux branches du chevron. */
.side-menu-toggle {
  z-index: 12030;
}

.side-menu-open .side-menu-toggle {
  z-index: 12030;
}

.side-menu-toggle:hover .menu-glyph::before,
.side-menu-toggle:focus-visible .menu-glyph::before,
.side-menu-toggle:hover .menu-glyph::after,
.side-menu-toggle:focus-visible .menu-glyph::after {
  top: 50%;
  bottom: auto;
  left: 0;
  margin: 0;
  transform-origin: left center;
}

.side-menu-toggle:hover .menu-glyph::before,
.side-menu-toggle:focus-visible .menu-glyph::before {
  transform: translateY(-50%) rotate(-45deg);
}

.side-menu-toggle:hover .menu-glyph::after,
.side-menu-toggle:focus-visible .menu-glyph::after {
  transform: translateY(-50%) rotate(45deg);
}

/* Tiroir : scopes d’abord, affichage compact, défilement sans rail natif. */
.side-menu {
  z-index: 12005;
  width: var(--j05-side-width);
  overflow: hidden;
}

.side-menu.is-open::after {
  display: none;
  content: none;
}

.side-menu__header {
  z-index: 3;
  min-height: 3.75rem;
  justify-content: flex-start;
  padding: 0.45rem 4.15rem 0.45rem 0.7rem;
  background: rgba(255, 255, 255, 0.8);
}

.side-menu__shortcuts {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.side-menu__shortcut {
  display: inline-grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0.2rem;
  background: transparent;
  color: #25292f;
}

.side-menu__shortcut:hover,
.side-menu__shortcut:focus-visible {
  border-color: rgba(58, 78, 101, 0.2);
  background: rgba(100, 135, 185, 0.18);
}

.side-menu__content {
  position: relative;
  z-index: 2;
  display: block;
  height: calc(100dvh - 3.75rem);
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 8rem;
  scrollbar-width: none;
  overscroll-behavior: contain;
}

.side-menu__content::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.side-menu__continuity {
  position: absolute;
  z-index: 4;
  left: 0.55rem;
  bottom: calc(var(--j04-dock-height) + 0.55rem);
  display: grid;
  width: 1.55rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(33, 37, 42, 0.72);
  box-shadow: 0 0.25rem 0.9rem rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 1.25rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.4rem);
  transition: opacity 180ms ease, transform 180ms ease;
}

.side-menu__continuity.is-visible {
  opacity: 0.78;
  transform: translateY(0);
}

.side-menu__header,
.side-scope-navigation,
.side-account-navigation {
  border-bottom: var(--border-thin) solid var(--color-side-menu-divider);
}

.side-display-menu {
  border-bottom: var(--border-thin) solid var(--color-side-menu-divider);
}

.scope-panel > summary,
.side-display-menu > summary {
  min-height: 2.9rem;
  padding: 0.82rem 1rem;
  color: #272b31;
  cursor: pointer;
  font-weight: 700;
  list-style-position: inside;
}

.scope-panel.is-current > summary {
  background: rgba(91, 126, 164, 0.16);
  color: #263f58;
}

.scope-panel__actions {
  display: grid;
  gap: 0.2rem;
  padding: 0 0.65rem 0.75rem;
}

.scope-action {
  display: flex;
  min-height: 2.5rem;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: 0.18rem;
  background: rgba(255, 255, 255, 0.38);
  color: var(--color-side-menu-text);
  text-align: left;
}

.scope-action:hover,
.scope-action:focus-visible {
  background: rgba(100, 135, 185, 0.2);
}

.scope-action-disclosure > summary {
  list-style: none;
}

.scope-action-disclosure > summary::-webkit-details-marker {
  display: none;
}

.scope-action-disclosure__chevron {
  margin-left: auto;
  transition: transform var(--motion-fast) var(--ease-standard);
}

.scope-action-disclosure[open] .scope-action-disclosure__chevron {
  transform: rotate(90deg);
}

.side-display-menu__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0 0.75rem 0.9rem;
}

.side-display-group {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.6rem;
  border: 1px solid rgba(53, 58, 65, 0.14);
  background: rgba(255, 255, 255, 0.34);
}

.side-display-group--wide {
  grid-column: 1 / -1;
}

.side-display-group__title {
  display: flex;
  min-height: 1.1rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  color: #4c5158;
  font-size: 0.69rem;
  text-transform: uppercase;
}

.compact-button-row,
.filter-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}

.filter-chip-grid,
.filter-chip-grid--processing {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.side-display-group .icon-button,
.display-chip {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.38rem 0.48rem;
  border: 1px solid #aeb2b8;
  border-radius: 0.18rem;
  background: rgba(255, 255, 255, 0.62);
  color: #25292f;
  font: inherit;
  font-size: 0.68rem;
}

.display-chip[aria-pressed="true"] {
  border-color: #527692;
  background: #527692;
  color: #fff;
}

.side-menu__legacy {
  display: none !important;
}

body[data-screen="projects"] #density-section {
  display: grid;
}

/* Le logo reste unique : il est déplacé dans le tiroir pendant son ouverture. */
.side-menu > .taskbar__logo {
  position: fixed;
  z-index: 1;
  right: 0.625rem;
  bottom: 0.625rem;
  display: block;
  width: 10.75rem;
  height: 5.3125rem;
  opacity: 1;
  pointer-events: none;
}

body.side-menu-open[data-screen="projects"]::after,
body.side-menu-open[data-screen="catalog"]::after {
  display: none;
  content: none;
}

.taskbar {
  z-index: 12010;
}

/* Recherche et filtre caméra dans le dock. */
.taskbar__search-tools {
  position: relative;
  gap: 0.35rem;
}

.taskbar__camera-filter-toggle {
  position: relative;
  display: inline-grid;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.25rem;
  background: rgba(22, 23, 26, 0.55);
  color: #d4d6da;
}

body[data-screen="projects"] .taskbar__camera-filter-toggle,
body[data-screen="login"] .taskbar__camera-filter-toggle {
  display: none;
}

.taskbar__camera-filter-toggle:hover,
.taskbar__camera-filter-toggle:focus-visible,
.taskbar__camera-filter-toggle[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(22, 23, 26, 0.86);
  color: #fff;
}

.taskbar__camera-filter-toggle.has-filters::after {
  position: absolute;
  top: 0.32rem;
  right: 0.32rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #77a9e5;
  content: "";
}

.camera-filter-panel {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: calc(100% + 0.55rem);
  display: grid;
  min-width: 13rem;
  gap: 0.5rem;
  padding: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(31, 33, 37, 0.94);
  box-shadow: 0 0.7rem 2rem rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  color: #fff;
}

.camera-filter-panel[hidden] {
  display: none;
}

.camera-filter-panel__title {
  font-size: 0.7rem;
  text-transform: uppercase;
}

.camera-filter-panel__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.camera-filter-chip {
  min-width: 2.5rem;
  min-height: 2.1rem;
  padding: 0.35rem 0.55rem;
  border: 2px solid var(--camera-color, #68737c);
  border-radius: 0.18rem;
  background: rgba(10, 11, 12, 0.82);
  color: #fff;
  font: inherit;
  font-weight: 700;
}

.camera-filter-chip[aria-pressed="true"] {
  background: var(--camera-color, #68737c);
  box-shadow: 0 0 0 1px #fff inset;
}

.camera-filter-chip.camera--a { --camera-color: #bd4040; }
.camera-filter-chip.camera--b { --camera-color: #316db7; }
.camera-filter-chip.camera--c { --camera-color: #31855c; }
.camera-filter-chip.camera--drn { --camera-color: #8868b2; }

/* Seuls les dailies conservent une progression visuelle de scrubbing. */
.project-card__scrub,
.axis-card__scrub {
  display: none !important;
}

.project-grid,
.axis-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--daily-user-min), var(--daily-responsive-max)), var(--daily-user-min)));
  justify-content: center;
}

/* Grille daily centrée par défaut, avec préférence locale réversible. */
.daily-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.daily-grid > .daily-card {
  width: min(100%, var(--daily-user-min));
  flex: 0 1 var(--daily-user-min);
}

html[data-daily-alignment="start"] .daily-grid {
  justify-content: start;
}

/* L’identifiant, la caméra et les badges retrouvent la hiérarchie V1. */
.daily-card__info {
  padding-right: 4.4rem;
}

.daily-card__title strong,
.daily-card__title .pickup {
  color: inherit;
  font-weight: 700;
}

.daily-card__title .pickup {
  padding-left: 0.18rem;
  font-size: 1em;
  vertical-align: baseline;
}

.daily-card__top {
  inset: 0.45rem 0.45rem auto auto;
  z-index: 5;
  transition: opacity var(--v1-fold), transform var(--v1-fold);
}

.daily-card__top .camera {
  min-width: 2.55rem;
  min-height: 1.55rem;
  justify-content: center;
  padding: 0.2rem 0.48rem;
  border: 2px solid var(--camera-color, #72808b);
  background: rgba(8, 9, 10, 0.82);
  box-shadow: 0 0.25rem 0.7rem rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

.daily-card__top .camera--a { --camera-color: #cf4d4d; }
.daily-card__top .camera--b { --camera-color: #4180ca; }
.daily-card__top .camera--c { --camera-color: #3d9a6d; }
.daily-card__top .camera--drn { --camera-color: #9a76c8; }

.daily-card__bottom {
  inset: auto 0.32rem 0.32rem auto;
  display: flex;
  max-width: min(70%, 10rem);
  flex-direction: column;
  align-items: flex-end;
  gap: 0.22rem;
  padding: 0;
}

.daily-card__bottom .badge {
  min-height: 1.48rem;
  max-width: 9rem;
  padding: 0.16rem 0.4rem;
  font-size: 0.71rem;
  box-shadow: 0 0.2rem 0.55rem rgba(0, 0, 0, 0.42);
}

@media (hover: hover) {
  .daily-card:hover .daily-card__top {
    opacity: 0;
    transform: translateY(-105%);
  }
}

.daily-card.is-scrubbing .daily-card__top,
.daily-card.is-pretouched .daily-card__top {
  opacity: 0;
  transform: translateY(-105%);
}

/* Jours : titre et date dédiés, labels propagés et commentaires propres au Jour. */
.axis-card__day-label {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title date"
    "badges badges";
  align-items: end;
  gap: 0.24rem 0.75rem;
  padding: 0.6rem 0.75rem;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.axis-card__day-title {
  grid-area: title;
  font-size: 1rem;
  font-weight: 700;
}

.axis-card__day-date {
  grid-area: date;
  padding: 0.16rem 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(30, 31, 34, 0.5);
  color: #d7d9dc;
  font-size: 0.68rem;
  white-space: nowrap;
}

.axis-card__day-badges {
  grid-area: badges;
  display: flex !important;
  justify-content: flex-end;
  gap: 0.22rem;
}

.axis-card__day-badges .badge {
  display: inline-flex;
  min-height: 1.35rem;
  align-items: center;
  gap: 0.2rem;
  padding: 0.12rem 0.35rem;
  font-size: 0.66rem;
}

/* Séquences : préfixe explicite et décor à droite du séparateur. */
.axis-card__sequence-id {
  font-weight: 700;
}

.axis-card__sequence-name {
  color: #fff;
  font-size: 0.8rem;
}

@media (max-width: 46rem) {
  :root {
    --j05-side-width: 100vw;
  }

  .side-display-menu__body,
  .filter-chip-grid,
  .filter-chip-grid--processing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .side-display-group--wide {
    grid-column: 1 / -1;
  }

  .camera-filter-panel {
    right: -2.8rem;
    max-width: calc(100vw - 1rem);
  }

  .breadcrumb {
    font-size: 1rem;
  }

  .daily-grid {
    display: flex;
  }

  .daily-grid > .daily-card {
    width: 100%;
    flex-basis: 100%;
  }

  .side-menu > .taskbar__logo {
    display: block;
    opacity: 1;
  }
}

@media (max-width: 28rem) {
  .side-display-menu__body {
    grid-template-columns: 1fr;
  }

  .side-display-group--wide {
    grid-column: 1;
  }

}