/* Vérifie mon idée — « Tableau des départs » (page d'accueil uniquement).
   Fichier séparé de styles.css pour ne charger ces règles que sur l'accueil et ne pas imposer
   d'incrémenter ?v= sur toutes les pages. Même règle de cache que styles.css : /assets/* est
   immutable (1 an), donc toute modification ici impose d'incrémenter ?v=N dans index.html.
   v=1 (15/10/2026) : création, alignée sur la charte v2 (aubergine, orange, signalétique jaune
   réservée au statut « À vérifier », chiffres en IBM Plex Mono). */

.departs {
  /* Tokens propres au tableau : déclinaisons sombres de l'aubergine (--color-ink). */
  --board-bg: #1C0A23;
  --board-row: var(--color-ink);
  --board-row-hover: var(--color-accent-b-hover);
  --board-line: #4A2D55;
  --board-text: var(--color-text-inverse);
  --board-dim: var(--color-inverse-muted);
  --board-tile: #12051A;
  /* Accent décoratif du tableau : orange (5,5:1 sur aubergine). Le jaune de vigilance reste
     réservé au statut, en aplat, comme dans le reste du site. */
  --board-accent: var(--color-accent);
}

.departs .kicker { font-family: var(--font-mono); font-weight: 600; letter-spacing: .07em; font-size: .78rem; text-transform: uppercase; color: var(--color-accent-text); margin: 0 0 var(--space-1); }
.departs h2 { max-width: 46rem; }
.departs h2 em { font-style: normal; color: var(--color-accent-text); }
.departs-lead { max-width: 44rem; margin-bottom: var(--space-4); }

.board { background: var(--board-bg); color: var(--board-text); border-radius: 8px; padding: 18px; box-shadow: 0 18px 40px rgba(42, 16, 51, .25); }
.board a { color: var(--board-text); }
.board-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0 6px 14px; border-bottom: 1px solid var(--board-line); }
.board-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .6rem; }
.board-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--board-accent); animation: board-pulse 2.4s infinite; }
@keyframes board-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 91, 31, .55); }
  70% { box-shadow: 0 0 0 9px rgba(255, 91, 31, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 91, 31, 0); }
}
.board-meta { display: flex; align-items: center; gap: .9rem; font-size: .85rem; color: var(--board-dim); }
.board-clock { font-family: var(--font-mono); font-weight: 600; color: var(--board-text); letter-spacing: .05em; }
.board-pause { background: transparent; border: 1px solid var(--board-line); color: var(--board-text); border-radius: 999px; padding: .3rem .8rem; font: inherit; font-size: .8rem; cursor: pointer; }
.board-pause:hover, .board-pause:focus-visible { border-color: var(--board-accent); outline: none; }

.board-head, .board-row { display: grid; grid-template-columns: 5.8rem 1fr 11rem 8.4rem; gap: 14px; align-items: center; }
.board-head { padding: 10px 12px 6px; font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--board-dim); }

.board-rows { list-style: none; margin: 0; padding: 0; }
.board-rows li { overflow: hidden; max-height: 12rem; transition: max-height .5s ease, opacity .4s ease, transform .5s ease; }
.board-rows li.part { max-height: 0; opacity: 0; transform: translateX(-24px); }
.board-rows li.arrive { opacity: 0; transform: translateY(10px); }

.board-row { width: 100%; text-align: left; background: var(--board-row); border: 0; border-radius: 4px; margin-top: 6px; padding: 12px; color: inherit; font: inherit; cursor: pointer; transition: background .2s; }
.board-row:hover, .board-row:focus-visible { background: var(--board-row-hover); outline: 2px solid var(--board-accent); outline-offset: 0; }
.board-row[aria-pressed="true"] { outline: 2px solid var(--board-accent); }
/* Lignes statiques du HTML, avant la prise en main par le script : pas encore cliquables. */
.board:not([data-ready]) .board-row:not(.board-votre) { cursor: default; }
.board:not([data-ready]) .board-row:not(.board-votre):hover { outline: none; background: var(--board-row); }

.flap { display: inline-flex; gap: 2px; font-family: var(--font-mono); font-weight: 600; }
.flap span { display: inline-block; min-width: 1.05em; text-align: center; background: var(--board-tile); border-radius: 2px; padding: 1px 0; position: relative; overflow: hidden; }
.flap span::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .6); }
.flap span.flip { animation: flap-flip .32s ease-in both; }
@keyframes flap-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }

.board-piste { font-size: 1.05rem; font-weight: 500; line-height: 1.4; }
.board-piste .scr { color: var(--board-accent); font-family: var(--font-mono); }
.board-voie { font-size: .85rem; color: var(--board-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Statut : même signalétique que .status-pill[data-status="a-documenter"] (jaune en aplat, encre dessus). */
.board-etat { justify-self: start; font-family: var(--font-mono); font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; background: var(--color-vigilance); color: var(--color-ink); border-radius: 0; padding: 3px 8px; white-space: nowrap; }

/* Ligne « À vous » : saisie libre de l'idée du visiteur */
.board-row.board-votre { cursor: default; background: transparent; border: 1px dashed var(--board-accent); margin-top: 12px; }
.board-row.board-votre:hover { outline: none; background: transparent; }
.board-votre .flap span { color: var(--board-accent); }
.board-votre input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--board-line); border-radius: 0; color: var(--board-text); font: inherit; font-size: 1.05rem; padding: 4px 0; }
.board-votre input::placeholder { color: var(--board-dim); opacity: 1; }
.board-votre input:focus { outline: none; border-bottom-color: var(--board-accent); }
.board-votre .btn { grid-column: 3 / 5; justify-self: end; padding: .6rem 1.1rem; white-space: nowrap; }
.board-votre .btn:focus-visible { outline: 2px solid var(--board-text); outline-offset: 2px; }
.board-erreur { margin: 6px 12px 0; font-size: .85rem; color: var(--board-accent); }

/* Panneau d'une piste sélectionnée */
.board-panel { margin-top: 14px; background: var(--color-bg); color: var(--color-ink); border-radius: var(--radius); padding: 18px 20px; display: grid; grid-template-columns: 1fr auto; gap: 1rem 1.5rem; align-items: center; }
.board-panel h3 { font-size: 1.25rem; margin: 0 0 .3rem; }
.board-panel p { margin: 0; font-size: .92rem; }
.board-panel .btn { padding: .65rem 1.2rem; }

.board-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; padding: 14px 6px 0; font-size: .82rem; color: var(--board-dim); }
.departs-note { margin-top: var(--space-2); font-size: .85rem; color: var(--color-muted); }

@media (max-width: 760px) {
  .board { padding: 12px; }
  .board-head { display: none; }
  .board-row { grid-template-columns: auto 1fr; gap: 6px 10px; }
  .board-row .board-piste { grid-column: 1 / -1; order: 3; }
  .board-row .board-voie { order: 2; }
  .board-row .board-etat { display: none; }
  .board-votre input { grid-column: 1 / -1; order: 3; }
  .board-votre .btn { grid-column: 1 / -1; justify-self: stretch; order: 4; }
  .board-panel { grid-template-columns: 1fr; }
  /* Avant la prise en main par le script (ou sans JS) : 4 lignes statiques sur mobile. */
  .board:not([data-ready]) .board-rows li:nth-child(n+5) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .board-pulse, .flap span.flip { animation: none; }
  .board-rows li { transition: none; }
}