ferrovia-infogare/src/pages/afficheurs/classiques/quais/ClassiquesArriveesQuais.css

body, html {
  margin: 0;
  padding: 0;
  background-color: #116938;
  overflow: hidden;
}

/* =========================================================
   CONTAINER (1920x1080)
   ========================================================= */
.aff-classique-quai-arr__container {
  position: relative;
  width: 1920px;
  height: 1080px;
  background-color: #116938;
  color: #ffffff;
  font-family: 'Achemine', 'Avenir', 'Helvetica Neue', Arial, sans-serif;
  overflow: hidden;
  box-sizing: border-box;
}

/* =========================================================
   LEFT PANEL (BLANC - Conforme Image 2)
   ========================================================= */
.aff-classique-quai-arr__left {
  position: absolute;
  top: 0;
  left: 0;
  width: 672px;
  bottom: 85px;
  background-color: #ffffff;
  box-sizing: border-box;
  padding: 42px 48px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 2;
}

.aff-classique-quai-arr__left--tgv {
  bottom: 240px !important;
  padding: 32px 48px 20px 48px !important;
}

/* Logo Dynamique (TER Bleu / Opérateur) */
.aff-classique-quai-arr__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 24px;
  z-index: 3;
}

.aff-classique-quai-arr__brand-logo {
  height: 50px;
  max-width: 220px;
  object-fit: contain;
  display: block;
}

.aff-classique-quai-arr__sncf-voyageurs {
  font-size: 14px;
  font-weight: 800;
  color: #116938;
  letter-spacing: 2px;
  margin-top: 4px;
}

/* Ligne Heure + Statut */
.aff-classique-quai-arr__time-row {
  display: flex;
  align-items: baseline;
  min-height: 100px;
  margin-bottom: 8px;
  z-index: 3;
}

.aff-classique-quai-arr__time {
  color: #116938;
  font-weight: 700;
  font-size: 105px;
  line-height: 0.92;
  letter-spacing: -1px;
}

.aff-classique-quai-arr__status {
  color: #116938;
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  margin-left: 20px;
}

.aff-classique-quai-arr__status-alt {
  font-weight: 700;
  font-size: 68px;
  line-height: 1;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.aff-classique-quai-arr__status--suppressed {
  color: #d32f2f !important;
}

.aff-classique-quai-arr__status--delayed {
  color: #f5a623 !important;
}

/* Grande Destination / Gare Terminus */
.aff-classique-quai-arr__destination {
  color: #116938;
  font-weight: 700;
  font-size: 82px;
  line-height: 1.05;
  margin-top: 14px;
  margin-bottom: 14px;
  z-index: 3;
  word-break: break-word;
}

.aff-classique-quai-arr__destination--multi {
  font-size: 52px !important;
  margin-top: 6px !important;
  margin-bottom: 4px !important;
}

/* Services PMR, Vélo, Bar */
.aff-classique-quai-arr__services {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: auto;
  margin-bottom: 8px;
  z-index: 4;
}

/* Info Train (Type + Numéro) */
.aff-classique-quai-arr__train-info {
  display: flex;
  align-items: baseline;
  z-index: 3;
}

.aff-classique-quai-arr__train-type {
  color: #116938;
  font-weight: 700;
  font-size: 38px;
  letter-spacing: 0.5px;
}

.aff-classique-quai-arr__train-number {
  color: #7e859b;
  font-weight: 400;
  font-size: 38px;
  letter-spacing: 0.5px;
  margin-left: 12px;
}

/* Filigrane Vertical "arrivée" géant (orienté bas vers haut) */
.aff-classique-quai-arr__watermark {
  position: absolute;
  right: -5px;
  bottom: 20px;
  width: 0;
  height: 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.aff-classique-quai-arr__watermark span {
  display: inline-block;
  transform: rotate(-90deg);
  transform-origin: 0 100%;
  font-size: 168px;
  font-weight: 700;
  color: #d5e5d8;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* =========================================================
   RIGHT PANEL (VERT FORÊT - Conforme Image 2)
   ========================================================= */
.aff-classique-quai-arr__right {
  position: absolute;
  top: 0;
  left: 672px;
  right: 0;
  bottom: 85px;
  background-color: #116938;
  box-sizing: border-box;
  padding: 42px 0 20px 42px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.aff-classique-quai-arr__right--tgv {
  bottom: 240px !important;
}

.aff-classique-quai-arr__stops-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.aff-classique-quai-arr__stops-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.aff-classique-quai-arr__stop-item {
  display: flex;
  align-items: center;
  position: relative;
  min-height: 56px;
  padding-left: 65px;
}

/* Rail vertical vert sauge (#5c8b6b) */
.aff-classique-quai-arr__stop-item::before {
  content: '';
  position: absolute;
  left: 20px;
  width: 28px;
  background-color: #5c8b6b;
  top: -15px;
  bottom: -15px;
  z-index: 1;
}

/* Le rail monte jusqu'en haut au 1er arrêt */
.aff-classique-quai-arr__stop-item:first-child::before {
  top: -600px;
}

/* Le dernier arrêt n'a pas de rail qui continue en dessous */
.aff-classique-quai-arr__stop-item:last-child::before {
  display: none;
}

/* Pastille Jaune (#ffe500 / #fbec22) */
.aff-classique-quai-arr__bullet {
  position: absolute;
  left: 24px;
  width: 20px;
  height: 20px;
  background-color: #ffe500;
  border-radius: 50%;
  z-index: 4;
}

/* Nom de la station */
.aff-classique-quai-arr__stop-name {
  font-size: 42px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  letter-spacing: 0.5px;
  z-index: 4;
}

/* Gare terminus / mise en avant */
.aff-classique-quai-arr__stop-item--dest {
  font-weight: 700;
}

.aff-classique-quai-arr__stop-item--dest .aff-classique-quai-arr__stop-name {
  background-color: #5c8b6b;
  padding: 8px 32px 8px 65px;
  margin-left: -65px;
  border-radius: 6px;
  position: relative;
  z-index: 3;
  display: inline-block;
  font-weight: 700;
  font-size: 44px;
}

/* =========================================================
   FOURCHE / BIFURCATION DESSERTE TGV (Conforme Image 2)
   ========================================================= */
.aff-classique-quai-arr__fork-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.aff-classique-quai-arr__fork-split-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 100px;
  padding-left: 65px;
  margin-top: 4px;
}

/* Rail courbe violet (#5c538f) */
.aff-classique-quai-arr__fork-curve-rail {
  position: absolute;
  left: 20px;
  top: -15px;
  width: 125px;
  height: 80px;
  border-left: 28px solid #5c538f;
  border-bottom: 28px solid #5c538f;
  border-bottom-left-radius: 35px;
  z-index: 1;
  pointer-events: none;
}

/* Branche droite */
.aff-classique-quai-arr__fork-branch-right {
  display: flex;
  flex-direction: column;
  margin-left: 115px;
  margin-top: 10px;
  z-index: 3;
}

/* Libellé "voitures 11 à 18" */
.aff-classique-quai-arr__fork-coaches-label {
  color: #f5a623;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

/* Boîte terminus branche droite */
.aff-classique-quai-arr__fork-terminus-box {
  background-color: #5c538f;
  padding: 8px 30px 8px 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.aff-classique-quai-arr__fork-terminus-name {
  color: #ffffff;
  font-size: 44px;
  font-weight: 700;
  white-space: nowrap;
}

/* =========================================================
   FOOTER & HORLOGE (Conforme Image 2)
   ========================================================= */
.aff-classique-quai-arr__footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1920px;
  height: 85px;
  background-color: #116938;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 35px;
  z-index: 20;
}

.aff-classique-quai-arr__footer-track {
  font-size: 34px;
  font-weight: 700;
  color: #ffffff;
  font-style: italic;
  letter-spacing: 0.5px;
}

.aff-classique-quai-arr__footer-clock {
  display: flex;
  align-items: center;
}

.aff-classique-quai-arr__clock {
  background-color: #00337f;
  border: 2.5px solid #ffffff;
  padding: 4px 16px;
  border-radius: 3px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
}

.aff-classique-quai-arr__clock-hm {
  color: #ffffff;
}

.aff-classique-quai-arr__clock-s {
  color: #ff8c00;
  margin-left: 2px;
}