/* Digital signage — grille plein viewport */
:root {
  --signage-bg: #143d28;
  --signage-green: #2f8a57;
  --signage-green-dark: #1f6b43;
  --signage-disabled: #c8d4cc;
  --signage-text: #fff8ef;
  --signage-banner-h: clamp(3rem, 8vh, 5rem);
  --signage-mobile-cell: 2.25rem;
  --signage-line-size: clamp(.7rem, 1.8vmin, .95rem);
  --font: "Plus Jakarta Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  background: var(--signage-bg);
  color: var(--signage-text);
}
.tabular-nums { font-variant-numeric: tabular-nums; }

.signage {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100vw;
}

.signage-grid-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: .35rem;
}

.signage-grid-wrap.edge-top { border-top: 4px solid #f6dcae; }
.signage-grid-wrap.edge-bottom { border-bottom: 4px solid #f6dcae; }
.signage-grid-wrap.edge-left { border-left: 4px solid #f6dcae; }
.signage-grid-wrap.edge-right { border-right: 4px solid #f6dcae; }

.signage-countdown {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-content: center;
  gap: .75rem;
  text-align: center;
  background: rgba(10, 40, 24, .92);
  padding: 1rem;
}
.signage-countdown[hidden] { display: none !important; }
.signage-countdown-label {
  font-size: clamp(1rem, 3vmin, 1.5rem);
  font-weight: 600;
  opacity: .85;
}
.signage-countdown-time {
  font-weight: 800;
  font-size: clamp(1.75rem, 6vmin, 3.5rem);
  letter-spacing: .02em;
  color: #f6dcae;
}

.signage-grid {
  display: grid;
  gap: 1px;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.2);
}

.signage-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--signage-green-dark);
  min-width: 0;
  min-height: 0;
  transition: background .25s, color .25s;
}

.signage-cell.is-taken {
  background: var(--signage-green);
  color: #fff;
}

.signage-cell.is-disabled {
  background: var(--signage-disabled);
  color: transparent;
  pointer-events: none;
}

.signage-cell.is-disabled .signage-num { visibility: hidden; }

.signage-num {
  font-weight: 800;
  font-size: clamp(6px, 1.1vmin, 14px);
  line-height: 1;
}

.signage-banner {
  flex: none;
  height: var(--signage-banner-h);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .75rem;
  padding: 0 1rem;
  background: #0a2818;
  border-top: 2px solid rgba(255,255,255,.12);
}

.signage-banner-line--main {
  display: flex;
  flex: 1;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}

.signage-banner-line--credit {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .15rem;
  flex: none;
  max-width: 38%;
}

.signage-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex: none;
  min-width: 0;
}

.signage-org-logo {
  height: clamp(1.75rem, 4.5vh, 2.75rem);
  width: auto;
  max-width: 3.5rem;
  object-fit: contain;
  flex: none;
}

.signage-banner-label {
  font-weight: 800;
  font-size: var(--signage-line-size);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #c4e6d2;
  white-space: nowrap;
}

.signage-banner-count {
  font-weight: 800;
  font-size: var(--signage-line-size);
  color: #f6dcae;
  white-space: nowrap;
}

.signage-banner-text {
  flex: 1;
  min-width: 0;
  font-size: clamp(.8rem, 2vmin, 1.25rem);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.signage-banner-text.is-idle { opacity: .7; }
.signage-banner-text.is-flash { animation: bannerPulse .6s ease; }

@keyframes bannerPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.02); color: #f6dcae; }
  100% { transform: scale(1); }
}

.signage-credit-label {
  font-size: clamp(.5rem, 1.2vmin, .65rem);
  color: rgba(196, 230, 210, .75);
  white-space: nowrap;
}

.signage-credit-logo {
  height: clamp(1rem, 2.5vh, 1.35rem);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 640px) {
  :root {
    --signage-banner-mobile-h: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }

  html, body {
    overflow: hidden;
    height: 100%;
    height: 100dvh;
  }

  .signage {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    width: 100%;
  }

  /* Zone dédiée au quadrillage — seul conteneur scrollable */
  .signage-grid-wrap {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
  }

  .signage-grid {
    width: max-content;
    height: max-content;
    min-width: 100%;
    grid-template-columns: repeat(var(--signage-cols, 40), var(--signage-mobile-cell)) !important;
    grid-template-rows: repeat(var(--signage-rows, 25), var(--signage-mobile-cell)) !important;
  }

  .signage-cell {
    width: var(--signage-mobile-cell);
    height: var(--signage-mobile-cell);
    min-width: var(--signage-mobile-cell);
    min-height: var(--signage-mobile-cell);
  }

  .signage-num {
    font-size: .7rem;
  }

  /* Bandeau toujours visible en bas */
  .signage-banner {
    flex: 0 0 var(--signage-banner-mobile-h);
    flex-shrink: 0;
    flex-direction: column;
    justify-content: center;
    height: var(--signage-banner-mobile-h);
    min-height: var(--signage-banner-mobile-h);
    padding: .45rem .75rem calc(.45rem + env(safe-area-inset-bottom, 0px));
    gap: .3rem;
    align-items: center;
    text-align: center;
  }

  .signage-banner-line--main {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    flex: none;
    width: 100%;
    gap: .45rem;
  }

  .signage-brand {
    justify-content: center;
    gap: .4rem;
  }

  .signage-banner-text {
    flex: none;
    width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    font-size: var(--signage-line-size);
  }

  .signage-banner-line--credit {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    max-width: none;
    width: 100%;
  }

  .signage-credit-label {
    font-size: var(--signage-line-size);
    color: rgba(196, 230, 210, .85);
  }

  .signage-credit-logo {
    height: var(--signage-line-size);
    max-width: none;
  }
}