:root {
    /* RATP Colors */
    --ratp-blue: #183292;
    /* Dark blue for signs */
    --ratp-cyan: #009AA6;
    --ratp-yellow: #FFCD00;
    --ratp-purple: #62259D;
    --ratp-green: #6ECA97;
    --ratp-red: #E3051C;
    --ratp-brown: #704B1F;

    --ceramic-white: #f8f9fa;
    --ceramic-shadow: rgba(0, 0, 0, 0.05);

    --font-main: 'Work Sans', sans-serif;

    /* Navigation Line */
    --line-color: #000;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    background-color: var(--ceramic-white);
    color: #333;
    overflow-x: hidden;
}



/* --- SPLASH SCREEN --- */
/* --- SPLASH SCREEN: PHOTO REALISM --- */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: #000;
    overflow: hidden;
}

.station-photo {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* Zoom effect on arrival */
    transform: scale(1.2);
    animation: photoArrival 2s ease-out forwards;
}

@keyframes photoArrival {
    0% {
        transform: scale(1.2) translateX(20%);
        filter: blur(10px);
    }

    100% {
        transform: scale(1) translateX(0);
        filter: blur(0);
    }
}

/* Speed Blur Overlay */
.motion-blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0.1) 100%);
    background-size: 200% 100%;
    opacity: 0.8;
    mix-blend-mode: overlay;
    animation: speedEffect 1.5s ease-out forwards;
    pointer-events: none;
}

@keyframes speedEffect {
    0% {
        transform: translateX(0);
        opacity: 0.8;
    }

    80% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(-100%);
        opacity: 0;
        display: none;
    }
}

/* UI */
.splash-ui {
    position: absolute;
    bottom: 15%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 100;
}

.enter-button {
    background: #E3051C;
    color: white;
    font-family: inherit;
    font-size: 1.5rem;
    padding: 15px 40px;
    border: 3px solid white;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 2px;
    transition: transform 0.2s, background 0.2s;
}

.enter-button:hover {
    transform: scale(1.05);
    background: #cc0419;
}

.enter-button.hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.5s, transform 0.5s;
}

/* Transition Shutters (The Metro Doors closing on you) */
.transition-doors {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: flex;
}

.shutter {
    width: 50%;
    height: 100%;
    background: #333;
    /* Dark Metal */
    position: relative;
    transform: scaleX(0);
    /* Hidden */
    transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1);
    border: 1px solid #111;
    z-index: 200;
}

.left-shutter {
    transform-origin: left;
    border-right: 5px solid #555;
}

.right-shutter {
    transform-origin: right;
    border-left: 5px solid #555;
}

/* Active State for transition */
.transition-active .left-shutter {
    transform: scaleX(1);
}

.transition-active .right-shutter {
    transform: scaleX(1);
}

.metro-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- Header: Station Sign --- */
.station-header {
    text-align: center;
    margin-bottom: 40px;
}

.station-sign {
    display: inline-flex;
    align-items: center;
    background-color: var(--ratp-blue);
    color: white;
    padding: 10px 30px;
    border-radius: 50px;
    /* Pill shape */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border: 4px solid white;
    /* Often has a white border or just sits on white */
    outline: 4px solid var(--ratp-blue);
    /* Double border effect */
}

.circle-m {
    width: 40px;
    height: 40px;
    background: white;
    color: var(--ratp-cyan);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.5rem;
    margin-right: 15px;
    border: 2px solid var(--ratp-cyan);
    /* Logo M style */
}

.station-name {
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 2rem;
    margin: 0 20px;
}

.circle-hz {
    width: 30px;
    height: 30px;
    background: var(--ratp-yellow);
    color: #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    margin-left: 15px;
}

.sub-header {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    background: #000;
    color: #ffaa00;
    /* LED signage color */
    font-family: 'Courier New', monospace;
    /* Dot matrix style effect */
    border-radius: 5px;
}

.blink {
    animation: blinker 1.5s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/* --- Navigation: Metro Line --- */
.metro-nav {
    margin: 40px 0;
    position: sticky;
    top: 20px;
    z-index: 100;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.line-container {
    position: relative;
    padding: 20px 0;
}

.line-bar {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 8px;
    background: #333;
    transform: translateY(-50%);
    border-radius: 4px;
    z-index: 0;
}

.stations {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.station-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    cursor: pointer;
    transition: transform 0.2s;
}

.station-point:hover {
    transform: scale(1.1);
}

.dot {
    width: 20px;
    height: 20px;
    background: white;
    border: 4px solid #333;
    border-radius: 50%;
    margin-bottom: 10px;
    transition: background-color 0.3s, border-color 0.3s;
}

.station-point.active .dot {
    background: white;
    /* Filled by script normally, but let's keep it clean */
}

/* Specific Line Colors for dots when active */
.station-point[data-line="1"].active .dot {
    border-color: var(--ratp-yellow);
}

.station-point[data-line="11"].active .dot {
    border-color: var(--ratp-brown);
}

.station-point[data-line="6"].active .dot {
    border-color: var(--ratp-green);
}

.station-point[data-line="4"].active .dot {
    border-color: var(--ratp-purple);
}

.label {
    font-weight: 600;
    background: white;
    padding: 2px 8px;
    border-radius: 4px;
}

/* --- Content: Ceramic Tiles & Sections --- */
.content-tunnel {
    flex: 1;
}

.section-panel {
    min-height: 60vh;
    /* Takes up screen space */
    margin-bottom: 40px;
    padding: 40px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    /* Reveal effect */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    display: none;
    /* Hidden by default, script will show active */
}

.section-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Ceramic Tile Background CSS Pattern */
.ceramic-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, #e0e0e0 1px, transparent 1px),
        linear-gradient(to bottom, #e0e0e0 1px, transparent 1px);
    background-size: 40px 20px;
    /* Rectangular tiles */
    opacity: 0.3;
    z-index: 0;
    pointer-events: none;
}

.panel-content {
    position: relative;
    z-index: 2;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--ratp-blue);
    border-bottom: 4px solid var(--ratp-yellow);
    display: inline-block;
}

/* Navigo Pass / ID Card */
.id-card {
    display: inline-block;
    background: #e6e6e6;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-top: 30px;
    width: 300px;
}

.navigo-look {
    background: #d4d4d4;
    /* Silverish */
    padding: 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    border: 1px solid #aaa;
}

.photo-placeholder {
    width: 80px;
    height: 100px;
    background: #999;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 0.8rem;
}

.info h3 {
    margin-bottom: 5px;
    color: #4B2C79;
    /* Navigo purple-ish */
}

.info p {
    font-size: 0.9rem;
    color: #666;
}

/* Ticket Gallery */
.ticket-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
    z-index: 2;
    position: relative;
}

.ticket {
    width: 200px;
    height: 100px;
    background: #F4EEDA;
    /* Old ticket color (jaune pale) or modern white ticket */
    border: 1px solid #ccc;
    position: relative;
    padding: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    cursor: pointer;
    overflow: hidden;
}

.ticket:hover {
    transform: translateY(-5px);
}

.ticket::before {
    /* Magnetic strip */
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 15px;
    background: #333;
    transform: translateY(-50%);
    opacity: 0.2;
}

.ticket-top {
    font-size: 0.7rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 5px;
}

.ticket-title {
    font-weight: 800;
    text-align: center;
    font-size: 1.1rem;
    z-index: 2;
    position: relative;
    background: rgba(255, 255, 255, 0.8);
}

/* Contact Form */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 500px;
    position: relative;
    z-index: 2;
}

.contact-form input,
.contact-form textarea {
    padding: 15px;
    border: 2px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
    font-size: 1rem;
}

.valid-ticket {
    padding: 15px;
    background: var(--ratp-green);
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background 0.3s;
}

.valid-ticket:hover {
    background: #5db586;
}

/* Responsive */
@media (max-width: 768px) {
    .stations {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .line-bar {
        width: 8px;
        height: 100%;
        left: 10px;
        top: 0;
        transform: none;
        right: auto;
    }

    .line-container {
        padding: 0 0 0 20px;
    }

    .station-point {
        flex-direction: row;
        gap: 15px;
    }

    .dot {
        margin-bottom: 0;
    }
}

/* Skills Map */
.network-map {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 30px;
}

.skill-line {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 20px;
}

.skill-line::before {
    /* The main line running through */
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 6px;
    background: var(--line-c, #333);
    border-radius: 3px;
    z-index: 0;
}

.skill-station {
    background: white;
    border: 3px solid var(--line-c, #333);
    border-radius: 12px;
    padding: 5px 15px;
    font-weight: bold;
    z-index: 2;
    position: relative;
    margin-right: 40px;
    /* Space between stations */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.skill-connect {
    /* Spacer to allow line to show, not strictly needed if we use margin on station, 
       but kept if we want specific connectors */
    display: none;
}


/* --- PROJECT PAGE STYLES --- */
.project-body {
    background-color: #fff;
    height: 100vh;
    overflow-y: hidden;
    /* Force horizontal scroll mainly */
    overflow-x: auto;
    display: flex;
    flex-direction: column;
}

.project-header {
    position: fixed;
    top: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    pointer-events: none;
    /* Let clicks pass to content if needed */
}

.project-header .mosaic-sign-container {
    pointer-events: auto;
}

.back-button {
    pointer-events: auto;
    position: absolute;
    left: 30px;
    background: #333;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    border: 2px solid white;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.platform-gallery {
    /* Full height to carry background everywhere */
    min-height: 100vh;
    box-sizing: border-box;
    padding-top: 180px;
    /* Space for header */
    padding-bottom: 50px;
    padding-left: 100px;
    padding-right: 100px;

    display: flex;
    align-items: center;
    gap: 60px;
    width: max-content;

    /* Background moves with content and covers full height */
    background-image: url('assets/fond_metro.jpg');
    background-size: cover;
    /* Cover the full height/width of this long element? Or auto 100%? Auto 100% is safer for a "wall" */
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: left center;
}

@media (max-width: 768px) {
    .platform-gallery {
        gap: 30px;
        padding-left: 30px;
        padding-right: 30px;
        /* Keep padding-top to align raised items with frieze */
    }
}

.gallery-item {
    height: auto;
    /* Let content dictate/center */
    display: flex;
    align-items: center;
}

.gallery-item:first-child {
    margin-right: 120px;
}

.raised-item {
    transform: translateY(-80px);
}


@font-face {
    font-family: 'Parisine Bold';
    src: url('font/Parisine Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

/* --- RATP Info Panel (Beige) --- */
.ratp-info-panel {
    /* Reverted to 10% size up (prev was ~15% larger) */
    width: 385px;
    height: 660px;
    background: #EBE0D2;
    border: 1px solid #ccc;
    font-family: 'Work Sans', sans-serif;
    /* Aproximation of Parisine */
    color: #183292;
    /* RATP Blue text */
    display: flex;
    flex-direction: column;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

/* --- Ad Billboard (Black Frame) --- */
/* --- Ad Billboard (Black Frame) --- */
.ad-billboard {
    /* Significantly larger to dominate the info panel (600px) */
    /* Base Size - Desktop */
    width: 60vw;
    max-width: 1188px;

    /* Responsive Proportionality */
    height: auto;
    aspect-ratio: 3 / 2;

    background: #111;
    padding: 15px;
    box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    position: relative;
    flex-shrink: 0;

    /* Mobile / Tablet Constraints */
    /* Ensure it fits within viewports without distortion */
}

/* Landscape Mobile/Tablet: Constrain by HEIGHT if screen is short */
@media (orientation: landscape) and (max-height: 900px) {
    .ad-billboard {
        width: auto;
        height: 75vh;
        max-width: none;
        /* Let width expand based on height */
    }
}

/* Portrait Mobile/Tablet: Constrain by WIDTH */
@media (orientation: portrait) {
    .ad-billboard {
        width: 85vw;
        height: auto;
        max-height: none;
    }
}

.ad-billboard.variant-16-9 {
    /* Override Aspect Ratio */
    aspect-ratio: 16 / 9;

    /* Re-apply logic if needed, but the main class handles sizing mostly. 
       Just ensure max-width isn't overriding aspect. */
}

.ad-frame-structure {
    width: 100%;
    height: 100%;
    background: #fff;
    position: relative;
    overflow: hidden;
    /* Metal inner rim */
    box-shadow: inset 0 0 0 2px #555;
    display: flex;
    /* Center placeholder content */
    align-items: center;
    justify-content: center;
}

.ad-glass {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Glass Reflection */
.ad-glass::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent 30%,
            rgba(255, 255, 255, 0.1) 40%,
            transparent 50%);
    pointer-events: none;
}

.placeholder-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Blue Center Panel --- */
.blue-title-panel {
    background-color: #2C3476;
    /* Darker Blue requested */
    color: white;
    /* Reduced padding */
    padding: 24px 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: 'Parisine Bold', 'Work Sans', sans-serif;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    margin: 0 20px;
    border: 2px solid white;
    min-width: auto;
    height: auto;
    flex-shrink: 0;
    border-radius: 0;
    /* Square borders requested */
}

.blue-title-panel h2 {
    font-size: 3rem;
    margin: 0;
    /* Removed margin to tighten */
    line-height: 0.9;
    /* Tighter line height */
    border: none;
    color: white;
    text-transform: none;
    /* No capitals */
    letter-spacing: 0;
    /* Reset spacing */
}

.panel-header {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 2px solid white;
}

.line-badge {
    width: 40px;
    height: 40px;
    background: #183292;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.2rem;
    border: 2px solid white;
    box-shadow: 0 0 0 2px #183292;
    /* Double ring */
    margin-right: 10px;
}

.line-number {
    width: 30px;
    height: 30px;
    background: #009AA6;
    /* Line 11ish color */
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin-right: 15px;
}

.panel-header h2 {
    font-size: 1.2rem;
    margin: 0;
    border: none;
    flex: 1;
    line-height: 1.2;
}

.arrow {
    font-size: 2rem;
    font-weight: 300;
}

.panel-body {
    padding: 30px;
    flex: 1;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.panel-body h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #183292;
}

.panel-section {
    display: flex;
    gap: 10px;
}

.bullet-point {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #009AA6;
    margin-top: 5px;
    flex-shrink: 0;
}

.panel-section h4 {
    font-size: 1rem;
    margin-bottom: 4px;
    font-weight: 700;
}

.panel-section p {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #444;
}

.panel-footer {
    padding: 10px;
    text-align: right;
    font-size: 0.7rem;
    color: #888;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}

/* --- RESPONSIVE ADJUSTMENTS & OTHERS --- */

/* 1. Force Landscape on Mobile/Tablet */
#landscape-warning {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #183292;
    /* RATP Blue */
    z-index: 99999;
    color: white;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

.rotate-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    animation: rotateDevice 2s infinite ease-in-out;
}

@keyframes rotateDevice {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(90deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* Show only on Portrait Mobile/Tablets */
@media only screen and (orientation: portrait) and (max-width: 1024px) {
    #landscape-warning {
        display: flex;
    }

    .project-body {
        overflow: hidden;
        /* Prevent scroll behind overlay */
    }
}

/* 2. Responsive Sizing for Gallery Items */
/* Goal: Maintain original sizes on desktop, scale down only if screen is smaller */

/* Element 1: Info Panel Image */
.info-panel-img {
    height: 600px;
    /* Original fixed height */
    width: auto;
    object-fit: contain;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);

    /* Responsive Cap */
    max-height: 80vh;
    max-width: 90vw;
}

/* Element 2 & 3: Billboards */
/* (Already handled by .ad-billboard media queries) */

/* Element 2.5: Blue Title Panel */
.blue-title-panel {
    /* Restore original padding logic implicitly by not overriding it with vh/vw */
    /* The base class .blue-title-panel has: padding: 24px 72px; */

    /* Only ensure it doesn't overflow */
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blue-title-panel h2 {
    /* Base class has font-size: 3rem */
    /* Scale down if viewport is small */
}

/* Element 4: Exit Sign */
.exit-sign-container {
    width: 330px;
    /* Original fixed width */
    height: auto;
    position: relative;

    /* Responsive Cap */
    max-width: 40vh;
    /* Scale based on height on landscape phones so it doesn't look huge? Or just max-width vw */
    max-width: 30vw;
}

.exit-sign-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Specific Mobile Landscape tweaks to ensure nothing is cut off vertically */
@media (max-height: 600px) and (orientation: landscape) {
    .info-panel-img {
        height: auto;
        max-height: 80vh;
    }

    .blue-title-panel {
        transform: scale(0.8);
        /* Slight zoom out to fit */
    }

    .blue-title-panel h2 {
        font-size: 2rem;
    }

    .exit-sign-container {
        width: 200px;
        /* Smaller fixed width for small screens */
    }
}