body, html { margin: 0; padding: 0; background-color: #00337f; overflow: hidden; } /* ========================================================= CONTAINER (1920x1080) ========================================================= */ .aff-classique-quai-dep__container { position: relative; width: 1920px; height: 1080px; background-color: #00337f; color: #ffffff; font-family: 'Achemine', 'Avenir', 'Helvetica Neue', Arial, sans-serif; overflow: hidden; box-sizing: border-box; } /* ========================================================= LEFT PANEL (BLANC - Conforme Image 1) ========================================================= */ .aff-classique-quai-dep__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-dep__left--tgv { bottom: 240px !important; padding: 32px 48px 20px 48px !important; } /* Logo Dynamique */ .aff-classique-quai-dep__brand { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 24px; z-index: 3; } .aff-classique-quai-dep__brand-logo { height: 50px; max-width: 220px; object-fit: contain; display: block; } .aff-classique-quai-dep__sncf-voyageurs { font-size: 14px; font-weight: 800; color: #00337f; letter-spacing: 2px; margin-top: 4px; } /* Ligne Heure + Statut */ .aff-classique-quai-dep__time-row { display: flex; align-items: baseline; min-height: 100px; margin-bottom: 8px; z-index: 3; } .aff-classique-quai-dep__time { color: #00337f; font-weight: 700; font-size: 105px; line-height: 0.92; letter-spacing: -1px; } .aff-classique-quai-dep__status { color: #00337f; font-weight: 700; font-size: 32px; line-height: 1; margin-left: 20px; } .aff-classique-quai-dep__status-alt { font-weight: 700; font-size: 68px; line-height: 1; letter-spacing: -0.5px; white-space: nowrap; } .aff-classique-quai-dep__status--suppressed { color: #d32f2f !important; } .aff-classique-quai-dep__status--delayed { color: #f5a623 !important; } /* Grande Destination */ .aff-classique-quai-dep__destination { color: #00337f; 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-dep__destination--multi { font-size: 52px !important; margin-top: 6px !important; margin-bottom: 4px !important; } /* Services PMR, Vélo, Bar */ .aff-classique-quai-dep__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-dep__train-info { display: flex; align-items: baseline; z-index: 3; } .aff-classique-quai-dep__train-type { color: #00337f; font-weight: 700; font-size: 38px; letter-spacing: 0.5px; } .aff-classique-quai-dep__train-number { color: #7e859b; font-weight: 400; font-size: 38px; letter-spacing: 0.5px; margin-left: 12px; } /* Filigrane Vertical "départ" géant (orienté bas vers haut) */ .aff-classique-quai-dep__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-dep__watermark span { display: inline-block; transform: rotate(-90deg); transform-origin: 0 100%; font-size: 168px; font-weight: 700; color: #e2e8f2; line-height: 1; letter-spacing: 0.05em; white-space: nowrap; } /* ========================================================= RIGHT PANEL (BLEU NUIT - Conforme Image 1) ========================================================= */ .aff-classique-quai-dep__right { position: absolute; top: 0; left: 672px; right: 0; bottom: 85px; background-color: #00337f; box-sizing: border-box; padding: 42px 0 20px 42px; overflow: hidden; display: flex; flex-direction: column; } .aff-classique-quai-dep__right--tgv { bottom: 240px !important; } .aff-classique-quai-dep__stops-wrapper { position: relative; width: 100%; height: 100%; } .aff-classique-quai-dep__stops-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 2; } .aff-classique-quai-dep__stop-item { display: flex; align-items: center; position: relative; min-height: 56px; padding-left: 65px; } /* Rail vertical violet/indigo (#5c538f) */ .aff-classique-quai-dep__stop-item::before { content: ''; position: absolute; left: 20px; width: 28px; background-color: #5c538f; top: -15px; bottom: -15px; z-index: 1; } /* Le rail monte jusqu'en haut au 1er arrêt */ .aff-classique-quai-dep__stop-item:first-child::before { top: -600px; } /* Le dernier arrêt n'a pas de rail qui continue en dessous */ .aff-classique-quai-dep__stop-item:last-child::before { display: none; } /* Pastille Jaune (#ffe500 / #fbec22) */ .aff-classique-quai-dep__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-dep__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-dep__stop-item--dest { font-weight: 700; } .aff-classique-quai-dep__stop-item--dest .aff-classique-quai-dep__stop-name { background-color: #5c538f; 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-dep__fork-container { position: relative; display: flex; flex-direction: column; width: 100%; } .aff-classique-quai-dep__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-dep__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-dep__fork-branch-right { display: flex; flex-direction: column; margin-left: 115px; margin-top: 10px; z-index: 3; } /* Libellé "voitures 11 à 18" */ .aff-classique-quai-dep__fork-coaches-label { color: #f5a623; font-size: 22px; font-weight: 700; margin-bottom: 4px; letter-spacing: 0.5px; } /* Boîte terminus branche droite (ex: Lille Europe) */ .aff-classique-quai-dep__fork-terminus-box { background-color: #5c538f; padding: 8px 30px 8px 20px; border-radius: 6px; display: flex; align-items: center; gap: 16px; } .aff-classique-quai-dep__fork-terminus-name { color: #ffffff; font-size: 44px; font-weight: 700; white-space: nowrap; } /* ========================================================= FOOTER & HORLOGE (Conforme Image 1) ========================================================= */ .aff-classique-quai-dep__footer { position: absolute; bottom: 0; left: 0; width: 1920px; height: 85px; background-color: #00337f; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; padding: 0 35px; z-index: 20; } .aff-classique-quai-dep__footer-track { font-size: 34px; font-weight: 700; color: #ffffff; font-style: italic; letter-spacing: 0.5px; } .aff-classique-quai-dep__footer-clock { display: flex; align-items: center; } .aff-classique-quai-dep__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-dep__clock-hm { color: #ffffff; } .aff-classique-quai-dep__clock-s { color: #ff8c00; margin-left: 2px; }