/* Étape 2 : la carte des tournées, la liste par porte, la façade des 54 quais. C'est l'écran fort de la démo.
   Pendant l'animation, l'écran est redessiné à chaque image : tout l'état visuel vient de l'avancement, pas d'animation CSS. */
.plan__grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, 1fr); gap: 20px; align-items: start; }
.plan__carte { overflow: hidden; }

/* Carte */
.carte { display: block; width: 100%; height: auto; }
.carte__fond { fill: #f6f8f4; }
.carte__dep { font: 400 34px var(--titre); letter-spacing: 0.14em; fill: #cdd6cf; text-anchor: middle; }
.carte__fleuve { fill: none; stroke: #b5d3dc; stroke-width: 8; stroke-linecap: round; }
.carte__riviere { fill: none; stroke: #c7dee5; stroke-width: 4; stroke-linecap: round; }
.trace { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; transition: opacity 0.2s; }
.trace--semi { stroke: var(--semi); stroke-width: 7; }
.trace--p19 { stroke: var(--p19); stroke-width: 5.5; }
.trace--p12 { stroke: var(--p12); stroke-width: 5.5; }
.trace--vl { stroke: var(--vl); stroke-width: 5; }
.trace--estompee, .bout.trace--estompee { opacity: 0.16; }
.trace--choisie { stroke-width: 9; filter: drop-shadow(0 0 5px rgba(195, 240, 99, 0.95)); }
.ville { fill: #fff; stroke: var(--encre-2); stroke-width: 1.5; }
.ville__nom { font: 500 15px var(--police); fill: var(--encre-2); paint-order: stroke; stroke: #f6f8f4; stroke-width: 5px; stroke-linejoin: round; }
.bout circle { fill: #fff; stroke: var(--sapin); stroke-width: 3; }
.bout text { font: 400 25px var(--titre); fill: var(--sapin); text-anchor: middle; letter-spacing: 0.04em; paint-order: stroke; stroke: #f6f8f4; stroke-width: 6px; stroke-linejoin: round; }
.depot polygon { fill: var(--sapin); stroke: var(--anis); stroke-width: 3; }
.depot__b { font: 400 22px var(--titre); fill: #fff; text-anchor: middle; }
.depot__nom { font: 600 17px var(--police); fill: var(--sapin); paint-order: stroke; stroke: #f6f8f4; stroke-width: 5px; stroke-linejoin: round; }

/* Liste des tournées */
.plan__liste .tournees { max-height: 742px; overflow-y: auto; }
.tournees { list-style: none; margin: 0; padding: 0; }
.tournee { border-bottom: 1px solid var(--filet); }
.tournee:last-child { border-bottom: 0; }
.tournee--attente { display: flex; align-items: center; gap: 14px; padding: 12px 18px; opacity: 0.45; }
.tournee__bouton {
  width: 100%; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center;
  padding: 12px 18px; background: none; border: 0; text-align: left; cursor: pointer;
}
.tournee__bouton:hover { background: #f6f8f4; }
.tournee--choisie .tournee__bouton { background: var(--anis-voile); }
.tournee__code {
  display: grid; place-items: center; width: 50px; height: 40px; border-radius: var(--rayon-petit);
  font: 400 24px/1 var(--titre); letter-spacing: 0.03em; padding-top: 3px; color: #fff; background: var(--p19);
}
.tournee--attente .tournee__code { background: var(--filet-fort); }
.tournee__code--semi { background: var(--semi); }
.tournee__code--p12 { background: var(--p12); }
.tournee__code--vl { background: var(--vl); color: var(--encre); }
.tournee__corps { display: grid; gap: 2px; min-width: 0; }
.tournee__corps strong { font-weight: 600; font-size: 14px; }
.tournee__qui, .tournee__chiffres { font-size: 12.5px; color: var(--encre-2); }
.tournee__jauge { display: block; height: 5px; border-radius: 999px; background: var(--papier); overflow: hidden; margin: 3px 0 1px; max-width: 220px; }
.tournee__jauge i { display: block; height: 100%; background: var(--vert); }
.tournee__depart { display: grid; justify-items: end; font-size: 12px; color: var(--encre-2); }
.tournee__depart b { font: 400 22px/1 var(--titre); color: var(--sapin); letter-spacing: 0.03em; font-weight: 400; }
.pastille-trancher { grid-column: 2; justify-self: start; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--peche); color: #5c2f05; }
.tournee__detail { padding: 0 18px 14px 86px; font-size: 13px; display: grid; gap: 2px; background: var(--anis-voile); }

/* Façade des 54 quais : volets fermés, portes déchargées, portes de départ allumées */
.quais { margin-top: 20px; }
.facade { margin: 16px 18px 4px; padding: 14px 14px 0; background: var(--sapin); border-radius: var(--rayon-petit); display: grid; gap: 12px; overflow-x: auto; }
.facade__rangee { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(27, minmax(30px, 1fr)); gap: 5px; min-width: 900px; }
.porte {
  width: 100%; height: 66px; display: grid; grid-template-rows: auto 1fr; justify-items: center; align-items: start;
  padding: 4px 2px 0; border: 0; border-radius: 4px 4px 0 0; text-align: center;
}
.porte__num { font: 400 16px/1 var(--titre); letter-spacing: 0.03em; padding-top: 2px; }
.porte__code { align-self: center; font: 400 17px/1 var(--titre); letter-spacing: 0.03em; }
.porte--libre { background: repeating-linear-gradient(180deg, #2f6553 0 3px, #285a49 3px 6px); color: rgba(255, 255, 255, 0.55); }
.porte--arrivee { background: #dfe7e1; color: var(--encre-2); }
.porte--depart {
  background: color-mix(in srgb, var(--anis) calc(var(--f, 1) * 100%), #2f6553);
  color: var(--sapin); cursor: pointer; box-shadow: inset 0 -5px 0 var(--couleur, var(--p19));
}
.porte--semi { --couleur: var(--semi); }
.porte--p12 { --couleur: var(--p12); }
.porte--vl { --couleur: var(--vl); }
.porte--depart:hover { filter: brightness(1.05); }
.porte--choisie { outline: 3px solid #fff; outline-offset: -3px; }
.quais .legende i { width: 12px; height: 12px; border-radius: 2px; }
.legende__arrivee { background: #dfe7e1; box-shadow: inset 0 0 0 1px var(--filet-fort); }
.legende__depart { background: var(--anis); box-shadow: inset 0 0 0 1px var(--olive); }
.legende__libre { background: #2f6553; }

/* Reste à quai */
.restes__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.restes__liste li { display: grid; gap: 2px; padding: 14px 16px; background: var(--feuille); border: 1px solid var(--filet); border-radius: var(--rayon); font-size: 13px; }
.restes__liste strong { font-weight: 600; font-size: 14px; }

@media (max-width: 1080px) {
  .plan__grille { grid-template-columns: minmax(0, 1fr); }
  .plan__liste .tournees { max-height: none; }
}
@media (max-width: 720px) {
  .restes__liste { grid-template-columns: minmax(0, 1fr); }
  .tournee__bouton { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 12px 14px; gap: 4px 10px; }
  .tournee__code { width: 46px; }
  .tournee__detail { padding-left: 72px; }
  .facade { margin: 12px 12px 4px; }
}

/* Petit écran : la carte est réduite, ses textes sont agrandis pour rester lisibles */
@media (max-width: 720px) {
  .ville__nom { font-size: 24px; stroke-width: 7px; }
  .bout text { font-size: 38px; stroke-width: 8px; }
  .carte__dep { font-size: 44px; }
  .depot__nom { font-size: 26px; }
}