: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;
}

/* --- HOME PAGE REDESIGN --- */
.home-main {
    min-height: 100dvh;
    /* use dynamic viewport height */
    background-image: url('assets/fond_metro.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* Ancre le guichet en bas */
    padding: 0 40px;
    box-sizing: border-box;
    overflow: auto;
    /* Allow scroll so browser UI can hide */
}

.wall-container {
    display: flex;
    align-items: stretch;
    /* Permet le centrage individuel */
    justify-content: center;
    gap: 5vw;
    width: 100%;
    max-width: 1600px;
    height: 100vh;
}

/* Keyframes fadeInWall supprimées */

.guichet-wrapper {
    flex: 1.4;
    display: flex;
    justify-content: flex-end;
    align-self: flex-end;
    /* Ancré en bas */
    transition: flex 1.2s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.8s ease;
}

.guichet-svg {
    width: 100%;
    max-width: min(900px, 130dvh);
    /* Larger guichet, proportional to height */
    height: auto;
    display: block;
    /* Remove whitespace below image */
    filter: drop-shadow(0px -5px 20px rgba(0, 0, 0, 0.2));
}

.guichet-container {
    position: relative;
    width: 100%;
    /* Keep it proportional below its max width, but also ensure it doesn't grow taller than 95% of the viewport height */
    max-width: min(900px, 130dvh);
    display: flex;
}

.affiches-container {
    position: absolute;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: flex-start;
}

.pane-left {
    left: 14.5%;
    top: 33%;
    width: 16%;
}

.pane-right {
    left: 65.5%;
    top: 33%;
    width: 16%;
    align-items: center;
}

.col-left,
.col-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Space between affiches stacked vertically */
}

/* Maintain proportional column spacing */
.pane-left .col-left {
    width: 54%;
}

.pane-left .col-right {
    width: 44%;
}

.pane-right .col-left {
    width: 49%;
}

.pane-right .col-right {
    width: 49%;
}

.cv-link-overlay {
    position: absolute;
    left: 84.5%;
    top: 53.5%;
    width: 14%;
    height: 16%;
    display: block;
    cursor: pointer;
    z-index: 50;
    text-decoration: none;
    transition: background-color 0.2s ease, backdrop-filter 0.2s ease;
    border-radius: 8px;
}



.affiche {
    display: block;
    width: 100%;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s ease;
    text-decoration: none;
    position: relative;
    line-height: 0;
    /* Ensures 0px gap at the baseline of the images */
}

.affiche:hover {
    transform: scale(1.05);
    z-index: 10;
}

@media (max-width: 1024px) {
    .affiche:hover {
        transform: none;
        z-index: auto;
    }
}

.affiche img {
    width: 100%;
    height: auto;
    /* Preserve natural aspect ratio without extra stretch */
    object-fit: contain;
    display: block;
}

#custom-tooltip {
    position: fixed;
    pointer-events: none;
    background: #2D3476;
    color: white;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 0.5rem;
    font-family: Arial, sans-serif;
    white-space: nowrap;
    opacity: 0;
    z-index: 9999;
    /* transition removed to follow cursor smoothly */
}

.affiche-1 {
    grid-area: affiche1;
    align-self: start;
}

.affiche-2 {
    grid-area: affiche2;
    align-self: start;
}

.affiche-3 {
    grid-area: affiche3;
    align-self: start;
}

.affiche-4 {
    grid-area: affiche4;
    align-self: start;
}

.affiche-5 {
    grid-area: affiche5;
    align-self: start;
}

.affiche-6 {
    grid-area: affiche6;
    align-self: start;
}

.info-sommaire-banner {
    display: block;
    width: 100%;
    margin-bottom: 20px;
}

.map-container-inner {
    width: 100%;
    display: flex;
    justify-content: center;
}

.map-wrapper {
    flex: 0.6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: center;
    cursor: pointer;
    transition: flex 1.2s cubic-bezier(0.7, 0, 0.3, 1);
    position: relative;
}

.map-container-inner svg {
    transition: transform 0.4s ease, filter 0.3s ease;
}

.map-container-inner:hover svg {
    transform: scale(1.05) rotate(1deg);
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
}

/* Animation "Devant le plan" (Sommaire) */
.zoom-effect .guichet-wrapper {
    flex: 0;
    opacity: 0;
    pointer-events: none;
    margin: 0;
}

.zoom-effect .wall-container {
    transition: transform 1.2s cubic-bezier(0.7, 0, 0.3, 1);
    transform: scale(1);
    /* Centrage automatique car guichet a 0 de largeur */
    gap: 0;
}

.zoom-effect .map-wrapper {
    flex: 1;
    cursor: default;
    align-self: center;
}

.zoom-effect .info-sommaire-banner,
.zoom-effect .contact-panel-wrapper {
    display: none !important;
}

.zoom-effect .map-container-inner {
    background-color: transparent;
    padding: 0;
    max-width: none;
    margin-top: 0;
    margin-bottom: 0;
}

.zoom-effect .map-container-inner:hover svg,
.zoom-effect .map-container-inner svg {
    transform: none;
    filter: none;
    /* Fits map to screen comfortably without Safari collapsing */
    width: 90vw !important;
    height: auto !important;
    max-width: 1200px !important;
    max-height: 85dvh !important;
    margin: 0 auto;
    /* Désactive le hover une fois zoomé */
}

@media (max-width: 1024px) {
    .zoom-effect .home-main {
        align-items: flex-start;
        /* Permet le scroll vertical aisé */
        padding: 0 10px;
    }

    .zoom-effect .wall-container {
        height: auto;
        min-height: 100vh;
        padding-top: 100px;
        padding-bottom: 50px;
    }

    .zoom-effect .map-container-inner svg {
        width: 100% !important;
        height: auto !important;
        min-height: 60vh !important;
        max-width: none !important;
        max-height: none !important;
        /* Le plan peut maintenant s'étendre au maximum ! */
    }
}

.zoom-effect .home-main {
    background-color: #fffdf4;
    transition: background-color 1s ease;
}

/* On peut imaginer un bouton "Retour" qui apparaîtrait après le zoom */
.back-from-zoom {
    position: fixed;
    top: 30px;
    left: 30px;
    background: #183292;
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease 1s;
    z-index: 2000;
}

.zoom-effect .back-from-zoom {
    opacity: 1;
    pointer-events: auto;
}

.metro-map-svg {
    width: 100%;
    max-width: 600px;
    /* Taille plus raisonnable */
    height: auto;
}

/* Removed 1024px stacking block per user request, keep horizontal */



.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;

    /* Firefox Fallback */
    scrollbar-width: thin;
    scrollbar-color: #37ad9f transparent;
    /* Metro color thumb, transparent track */
}

/* --- Train Scrollbar for horizontal scrolling --- */
.project-body::-webkit-scrollbar {
    height: 35px;
    /* Height of the scrollbar (rail) */
}

.project-body::-webkit-scrollbar-track {
    background: transparent;
    /* Rail base background */
}

.project-body::-webkit-scrollbar-thumb {
    background-color: transparent;
    background-image: url('assets/metro.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0;
}

.project-body::-webkit-scrollbar-thumb:hover {
    background-color: transparent;
}

.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: 50px;
    padding-right: 0;
    /* Removed padding to ensure decoration goes to the edge */

    display: flex;
    align-items: center;
    gap: 38px;
    /* Reduced another 20% from 48px */
    /* Reduced 20% from 60px */
    width: max-content;
    min-width: 100vw;

    /* 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;
}

/* Fix right side background cutoff by extending the flex container with an invisible block */
.platform-gallery::after {
    content: '';
    display: block;
    width: 2vw;
    /* Minimize gap at the end */
    height: 1px;
    flex-shrink: 0;
}

/* Ensure Frieze Decoration covers full width */
.frieze-top {
    position: absolute !important;
    left: 0;
    width: 100% !important;
    height: 12px;
    background-image: url('assets/friz.png');
    background-repeat: repeat-x;
    background-size: contain;
}

/* Large Desktop Options (Base) — min-width + min-height to beat mobile rules */
@media (min-width: 1025px) and (min-height: 700px) {
    .platform-gallery {
        gap: 120px !important;
    }

    .prev-exit-sign,
    .prev-project-link .prev-exit-sign {
        height: 35vh !important;
        width: auto !important;
    }

    .info-panel-img {
        height: 445px !important;
        width: auto !important;
    }

    .exit-sign-container {
        width: 300px !important;
    }

    .exit-sign-container svg {
        height: 75px !important;
        width: auto !important;
    }

    .gallery-item img[alt="Titre Projet"],
    .gallery-item img[alt="Lien Publication"],
    .station-point {
        width: 523px !important;
        /* DESKTOP ONLY — overrides mobile max-height rules */
        max-width: 600px !important;
        height: auto !important;
    }

    .blue-title-panel {
        transform: none !important;
        /* Reset mobile scale — full size on desktop */
    }

    .changer-container {
        transform: translateY(-48vh) !important;
        margin-bottom: -48vh !important;
    }

    .changer-container svg.line-changer {
        width: 314px !important;
        /* DESKTOP ONLY */
        max-width: none !important;
        height: auto !important;
    }

    .ad-billboard {
        height: 52vh !important;
        width: auto !important;
        max-width: 90vw !important;
    }
}

/* Base sizing for Title Panel (Main Title) and Small Panel (Lien Publication) — desktop default */
.blue-title-panel-img,
.gallery-item img[alt="Titre Projet"] {
    width: 523px;
    height: auto;
    max-width: 90vw;
    display: block;
}

.gallery-item img[alt="Lien Publication"],
.station-point {
    width: 314px;
    height: auto;
    max-width: 90vw;
    display: block;
}

/* Responsive Mobile Landscape / Short Tablets (Overrides Desktop) */
@media (max-height: 900px) {
    .platform-gallery {
        gap: 79px !important;
        /* Increased another 40px from 39px per user request */
        padding-left: 30px !important;
        padding-right: 30px !important;
        padding-top: 100px !important;
        padding-bottom: 30px !important;
    }

    .ad-billboard {
        height: 80.5vh !important;
        /* Consistent large size for short windows */
        width: auto !important;
        max-width: none !important;
    }

    .gallery-item img[alt="Titre Projet"],
    .gallery-item img[alt="Lien Publication"],
    .station-point {
        height: auto !important;
        width: 28vw !important;
        /* Reduced 20% (Consistent with desktop) */
        max-width: 400px !important;
    }

    .blue-title-panel {
        transform: scale(0.58) !important;
        /* Reduced 20% (Consistent with desktop) */
        transform-origin: center;
    }

    .changer-container {
        transform: translateY(-38vh) !important;
        margin-bottom: -38vh !important;
    }

    .changer-container svg.line-changer {
        width: 17vw !important;
        /* Reduced 20% (Consistent with desktop) */
        max-width: 240px !important;
        height: auto !important;
    }

    .info-panel-img {
        height: 67vh !important;
        /* Reduced 10% from 75vh */
        width: auto !important;
    }

    .exit-sign-container {
        width: 25vw !important;
        /* Proportional reduction */
    }

    .exit-sign-container svg {
        height: 12.5vh !important;
        /* Visible reduction */
        width: auto !important;
    }

    .prev-exit-sign,
    .prev-project-link .prev-exit-sign {
        height: 35vh !important;
        /* Increased to 35% of viewport height as requested */
        width: auto !important;
    }

    /* Réduit la marge entre le dernier panneau (Exit) et le reste */
    .platform-gallery .gallery-item:last-child {
        margin-left: 20px !important;
    }

    .raised-item {
        transform: translateY(-20px) !important;
    }
}

/* === DESKTOP OVERRIDE — must come AFTER (max-height:900px) to win the cascade === */
@media (min-width: 1025px) and (min-height: 701px) {

    .blue-title-panel-img,
    .gallery-item img[alt="Titre Projet"] {
        width: 523px !important;
        height: auto !important;
        max-width: none !important;
    }

    .gallery-item img[alt="Lien Publication"],
    .station-point {
        width: 523px !important;
        /* Same width as Main Title Panel — DESKTOP */
        height: auto !important;
        max-width: none !important;
    }

    .blue-title-panel {
        transform: none !important;
    }

    .changer-container {
        transform: translateY(-48vh) !important;
        margin-bottom: -48vh !important;
    }

    .changer-container svg.line-changer {
        width: 314px !important;
        max-width: none !important;
        height: auto !important;
    }
}

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

.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;
}

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

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

@font-face {
    font-family: 'Parisine-Regular';
    src: url('font/Parisine Regular.otf') format('opentype');
    font-weight: normal;
    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 {
    /* Significantly larger to dominate the info panel (600px) */
    /* Base Size - Desktop */
    width: 62vw;
    max-width: 1224px;

    /* Responsive Proportionality */
    height: auto;
    width: auto;

    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;
    }
}

/* Billboard variants now handled by base wrapping logic */

.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 --- */
/* (Landscape warning removed to let the site naturally behave responsively in portrait) */

/* 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;
}



/* 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;
    position: relative;
    cursor: pointer;
}

/* Remove old container animation */
.exit-sign-container:hover {
    filter: brightness(1.1);
}

/* Animate only the arrows inside the SVG */
.arrow-group {
    transition: transform 0.3s ease;
    animation: arrowBounceLeft 1.5s ease-in-out infinite;
}

@keyframes arrowBounceLeft {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-10px);
    }
}

.exit-sign-container svg {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
}

/* 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 */
    }
}

/* Effet de survol sur les panneaux de sortie de la galerie */
.exit-sign-top-part,
.exit-sign-bot-part {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
    cursor: pointer;
}

.exit-sign-top-part.hovered,
.exit-sign-bot-part.hovered {
    transform: translateY(-3px) scale(1.02);
    filter: drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.3));
}

/* Panneau de retour / Retour à la ligne précédente */
.prev-sign-container {
    padding: 0;
    margin-right: -10px;
    margin-left: 1%;
    /* Reduced by 9% (from 10% to 1%) */
    display: flex;
    align-items: center;
    justify-content: center;
}

.prev-project-link {
    display: block;
    outline: none;
}

.prev-exit-sign {
    height: 30vh;
    /* Larger base size */
    width: auto;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
    cursor: pointer;
}

.prev-project-link:hover .prev-exit-sign {
    transform: scale(1.05) translateY(-5px);
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3)) brightness(1.1);
}

/* Affiche Modal (Lightbox) */
.affiche-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
    align-items: center;
    justify-content: center;
}

.affiche-modal.show {
    opacity: 1;
}

.affiche-modal-content {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
}

/* --- Panneau Contact --- */
.contact-panel-wrapper {
    margin-top: 30px;
    /* Espace sous le plan */
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
    display: flex;
    justify-content: center;
    pointer-events: auto;
    /* Rend cliquable le panneau */
}

.contact-panel-wrapper:hover {
    transform: scale(1.05);
    /* Hover effect: zoom */
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
    /* Hover effect: ombre */
}

.contact-panel-img {
    width: 250px;
    height: auto;
}

/* --- Contact Modal Modifications --- */
.contact-modal-content {
    background: #fff;
    padding: 30px 40px;
    border-radius: 15px;
    max-width: 500px;
    width: 90%;
    margin: auto;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Adjust for small height screens (landscape mobile) */
@media (max-height: 600px) {
    .contact-modal-content {
        padding: 15px 25px;
        max-height: 95vh;
        overflow-y: auto;
        transform: scale(0.95);
    }

    .contact-form {
        gap: 8px !important;
    }

    .contact-form input,
    .contact-form textarea {
        padding: 8px !important;
        font-size: 0.85rem !important;
    }

    .contact-form label {
        font-size: 0.8rem !important;
        margin-bottom: 2px !important;
    }

    .contact-form h2 {
        font-size: 1.5rem !important;
        margin-bottom: 10px !important;
    }

    .contact-modal-close {
        top: 5px;
        right: 10px;
        font-size: 24px;
    }
}

.affiche-modal.show .contact-modal-content {
    transform: scale(1);
}

.contact-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    color: #333;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.contact-modal-close:hover {
    color: #E3051C;
    /* RATP Red */
}


.affiche-modal.show .affiche-modal-content {
    transform: scale(1);
}

.affiche-modal-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #f1f1f1;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    z-index: 10001;
}

.affiche-modal-close:hover {
    color: white;
    transform: scale(1.2);
}

/* --- Door Loader Animation (Project Pages) --- */
.door-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100dvw;
    /* Use dynamic viewport width to cover real screen  */
    height: 100dvh;
    min-width: 100%;
    background-color: #1a1a1a;
    z-index: 999999;
    overflow: hidden;
    transition: visibility 0.8s, opacity 0.8s;
}

.door-loader .door-left,
.door-loader .door-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50.5%;
    /* tiny overlap to prevent gap */
    height: 100%;
    object-fit: cover;
    /* Keeps proportions and cuts off edges while doors touch perfectly in middle */
    transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.door-loader .door-left {
    left: 0;
    object-position: right center;
    /* the right edge touches the middle */
    transform: translateX(0);
}

.door-loader .door-right {
    right: 0;
    object-position: left center;
    /* the left edge touches the middle */
    transform: translateX(0);
}

/* State when doors are opened */
.door-loader.doors-open {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition-delay: 0.8s;
    /* wait for doors to open before hiding bg */
}

.door-loader.doors-open .door-left {
    transform: translateX(-100%);
}

.door-loader.doors-open .door-right {
    transform: translateX(100%);
}

/* --- 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: 9999999;
    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) {
    #landscape-warning {
        display: flex !important;
    }

    body {
        overflow: hidden !important;
        /* Prevent scroll behind overlay */
    }
}

/* Specific mobile overrides removed to allow natural viewport scaling */

/* Disable door loader animation on mobile (buggy due to viewport=1280 hack) */
@media (max-width: 768px) {
    #door-loader {
        display: none !important;
    }
}