/*==========================================================
    CJJD VIRTUAL TOUR ENGINE
    SIEGE CJJD ASBL
==========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

:root{

    --primary:#0B2E63;

    --secondary:#184A9C;

    --gold:#D4AF37;

    --dark:#091321;

    --light:#F4F7FB;

    --text:#EEF3FA;

    --transition:.45s ease;

}

html{

    scroll-behavior:smooth;

}

body{

    overflow:hidden;

    background:#091321;

    color:white;

    font-family:"Segoe UI",sans-serif;

}

/*==========================================================
LOADER
==========================================================*/

#tourLoader{

    position:fixed;

    inset:0;

    z-index:5000;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    background:#091321;

}

.loaderBackground{

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at center,

    rgba(212,175,55,.12),

    transparent 65%),

    linear-gradient(135deg,#07101d,#102848);

}

.loaderBackground::before{

    content:"";

    position:absolute;

    inset:-40%;

    background:

    repeating-linear-gradient(

        -45deg,

        transparent,

        transparent 120px,

        rgba(255,255,255,.025) 121px,

        transparent 123px

    );

    animation:gridMove 26s linear infinite;

}

.loaderContent{

    position:relative;

    z-index:2;

    width:min(520px,92%);

    text-align:center;

}

.loaderContent img{

    width:120px;

    margin:auto;

    border-radius:50%;

    box-shadow:

    0 0 40px rgba(212,175,55,.25);

}

.loaderContent h1{

    margin-top:35px;

    font-size:3rem;

    letter-spacing:1px;

}

.loaderContent p{

    margin-top:18px;

    color:#cfd8e8;

    line-height:1.8;

}

.loaderBar{

    margin-top:45px;

    width:100%;

    height:10px;

    border-radius:999px;

    background:rgba(255,255,255,.08);

    overflow:hidden;

}

.loaderBar span{

    display:block;

    width:0;

    height:100%;

    border-radius:999px;

    background:

    linear-gradient(

        90deg,

        #D4AF37,

        #fff4b2,

        #D4AF37

    );

    animation:

    loaderProgress 3.8s linear forwards;

}

/*==========================================================
INTRO
==========================================================*/

#introScene{

    position:relative;

    width:100vw;

    height:100vh;

    overflow:hidden;

}

.introBackground{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    animation:

    slowZoom 22s linear infinite alternate;

}

.introVideoOverlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(0,0,0,.25),

        rgba(0,0,0,.55)

    );

}

.introGradient{

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle at center,

        transparent,

        rgba(9,19,33,.88)

    );

}

.introCenter{

    position:relative;

    z-index:5;

    width:min(900px,90%);

    margin:auto;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.introBadge{

    display:inline-flex;

    width:max-content;

    padding:10px 22px;

    border-radius:999px;

    background:rgba(212,175,55,.16);

    border:1px solid rgba(212,175,55,.35);

    color:#fff;

    letter-spacing:2px;

    backdrop-filter:blur(12px);

}

.introCenter h1{

    margin-top:28px;

    font-size:4.6rem;

    line-height:1.12;

    max-width:900px;

    text-shadow:

    0 10px 40px rgba(0,0,0,.45);

}

.introCenter p{

    margin-top:28px;

    max-width:760px;

    line-height:2;

    color:#e7edf8;

    font-size:1.08rem;

}

#enterTour{

    margin-top:45px;

    width:max-content;

    border:none;

    cursor:pointer;

    padding:18px 34px;

    border-radius:999px;

    background:linear-gradient(

        135deg,

        #D4AF37,

        #f8dd73

    );

    color:#091321;

    font-weight:700;

    font-size:1rem;

    transition:var(--transition);

    box-shadow:

    0 18px 45px rgba(212,175,55,.35);

}

#enterTour:hover{

    transform:

        translateY(-6px)

        scale(1.04);

    box-shadow:

    0 28px 60px rgba(212,175,55,.55);

}

.scrollInvitation{

    position:absolute;

    left:50%;

    bottom:45px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

    color:white;

    animation:

    bounce 2s infinite;

}
/*==========================================================
VIRTUAL TOUR
==========================================================*/

#virtualTour{

    position:fixed;

    inset:0;

    display:grid;

    grid-template-columns:minmax(0,1fr) 470px;

    background:#091321;

    opacity:0;

    visibility:hidden;

    transition:

        opacity .8s,

        visibility .8s;

}

#virtualTour.active{

    opacity:1;

    visibility:visible;

}

/*==========================================================
SCENE
==========================================================*/

.sceneContainer{

    position:relative;

    overflow:hidden;

    perspective:2200px;

    background:#050c16;

}

.sceneImageContainer{

    position:absolute;

    inset:0;

    overflow:hidden;

}

#sceneImage{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

        opacity .55s,

        transform 8s linear,

        filter .5s;

    filter:

        brightness(.95)

        contrast(1.02)

        saturate(1.05);

}

.sceneContainer:hover #sceneImage{

    transform:scale(1.06);

}

/*==========================================================
LUMIERE
==========================================================*/

.sceneLight{

    position:absolute;

    width:900px;

    height:900px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(212,175,55,.12),

        transparent 72%

    );

    filter:blur(35px);

    pointer-events:none;

    animation:

    ambientLight 10s ease-in-out infinite;

}

/*==========================================================
PARTICULES
==========================================================*/

.sceneParticles{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.sceneParticles::before,

.sceneParticles::after{

    content:"";

    position:absolute;

    inset:-40%;

    background-image:

        radial-gradient(

            rgba(255,255,255,.22) 1px,

            transparent 1px

        );

    background-size:120px 120px;

    animation:

        particlesMove 45s linear infinite;

    opacity:.22;

}

.sceneParticles::after{

    animation-direction:reverse;

    animation-duration:65s;

    opacity:.12;

}

/*==========================================================
DEGRADE
==========================================================*/

.sceneContainer::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        to right,

        transparent,

        transparent 72%,

        rgba(9,19,33,.55),

        rgba(9,19,33,.96)

    );

    pointer-events:none;

}

/*==========================================================
HOTSPOTS
==========================================================*/

#hotspots{

    position:absolute;

    inset:0;

    z-index:40;

}

.hotspot{

    position:absolute;

    display:flex;

    align-items:center;

    justify-content:center;

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:#fff;

    background:rgba(11,46,99,.85);

    backdrop-filter:blur(12px);

    border:2px solid rgba(212,175,55,.65);

    box-shadow:
        0 0 20px rgba(212,175,55,.35);

    transition:all .35s ease;

    z-index:100;

}

.hotspot i{

    font-size:1.15rem;

    color:#D4AF37;

}

.hotspot:hover{

    transform:translate(-50%,-50%) scale(1.15);

    box-shadow:
        0 0 35px rgba(212,175,55,.8);

}

.hotspot:hover{

    transform:

        scale(1.15);

}

.hotspot::before{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:50%;

    border:2px solid rgba(212,175,55,.45);

    animation:

    hotspotPulse 2.2s infinite;

}

/*==========================================================
PANNEAU
==========================================================*/

.informationPanel{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:30px;

    padding:55px;

    background:

    linear-gradient(

        180deg,

        #0d1f36,

        #091321

    );

    overflow-y:auto;

}

.informationPanel::-webkit-scrollbar{

    width:8px;

}

.informationPanel::-webkit-scrollbar-thumb{

    background:#D4AF37;

    border-radius:999px;

}

/*==========================================================
ENTETE
==========================================================*/

.panelHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.panelHeader span{

    color:#D4AF37;

    font-size:.85rem;

    letter-spacing:2px;

}

.currentRoom{

    padding:8px 18px;

    border-radius:999px;

    background:rgba(255,255,255,.08);

}

/*==========================================================
TEXTES
==========================================================*/

#roomTitle{

    font-size:3.8rem;

    line-height:1.1;

}

#roomSubtitle{

    color:#D4AF37;

    font-size:1.4rem;

}

#roomDescription{

    color:#d8e2f3;

    line-height:2;

}

/*==========================================================
FICHES
==========================================================*/

.roomInformations{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.infoCard{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.06);

    border-radius:18px;

    padding:18px;

    backdrop-filter:blur(15px);

    transition:.35s;

}

.infoCard:hover{

    transform:translateY(-6px);

    border-color:#D4AF37;

}

.infoCard small{

    display:block;

    color:#b6c6dd;

    margin-bottom:8px;

}

.infoCard strong{

    font-size:1.05rem;

}
/*==========================================================
TIMELINE
==========================================================*/

.tourTimeline{

    margin-top:10px;

    display:flex;

    flex-direction:column;

    gap:20px;

}

.timelineHeader{

    display:flex;

    align-items:center;

    justify-content:space-between;

    color:#D4AF37;

    letter-spacing:2px;

    font-size:.82rem;

}

#timelineContainer{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.timelineItem{

    position:relative;

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px 18px;

    border-radius:18px;

    cursor:pointer;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.05);

    transition:.35s;

}

.timelineItem:hover{

    transform:translateX(8px);

    border-color:rgba(212,175,55,.45);

    background:rgba(212,175,55,.08);

}

.timelineItem.active{

    background:linear-gradient(
        135deg,
        rgba(212,175,55,.22),
        rgba(255,255,255,.06)
    );

    border-color:#D4AF37;

}

.timelineNumber{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#D4AF37;

    color:#091321;

    font-weight:700;

    flex-shrink:0;

}

.timelineTexts{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.timelineTexts strong{

    font-size:1rem;

}

.timelineTexts span{

    color:#c7d3e6;

    font-size:.9rem;

}

/*==========================================================
MINI MAP
==========================================================*/

#miniMap{

    position:fixed;

    left:35px;

    bottom:35px;

    width:300px;

    z-index:300;

    border-radius:26px;

    overflow:hidden;

    backdrop-filter:blur(22px);

    background:rgba(8,18,32,.78);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:

    0 25px 60px rgba(0,0,0,.35);

}

.miniMapHeader{

    display:flex;

    align-items:center;

    gap:12px;

    padding:20px;

    color:#D4AF37;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.miniRooms{

    display:flex;

    flex-direction:column;

    padding:15px;

    gap:10px;

}

.miniRoom{

    border:none;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px;

    border-radius:15px;

    background:transparent;

    color:white;

    transition:.35s;

}

.miniRoom span{

    width:34px;

    height:34px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.08);

    transition:.35s;

}

.miniRoom:hover{

    background:rgba(255,255,255,.08);

}

.miniRoom.active{

    background:rgba(212,175,55,.15);

}

.miniRoom.active span{

    background:#D4AF37;

    color:#091321;

}

/*==========================================================
BOUTONS FLOTTANTS
==========================================================*/

#fullscreenButton,

#homeButton{

    position:fixed;

    right:35px;

    width:62px;

    height:62px;

    border:none;

    cursor:pointer;

    border-radius:50%;

    color:white;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

    transition:.35s;

    z-index:450;

}

#fullscreenButton{

    bottom:120px;

}

#homeButton{

    bottom:40px;

}

#fullscreenButton:hover,

#homeButton:hover{

    background:#D4AF37;

    color:#091321;

    transform:translateY(-6px);

}

/*==========================================================
TRANSITION
==========================================================*/

#roomTransition{

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:0;

    z-index:999;

}

#roomTransition.active{

    opacity:1;

}

.transitionCircle{

    position:absolute;

    left:50%;

    top:50%;

    width:0;

    height:0;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(212,175,55,.35),

        rgba(9,19,33,.98)

    );

}

#roomTransition.active .transitionCircle{

    animation:roomTransition .9s ease;

}

/*==========================================================
AMBIENT LIGHT
==========================================================*/

#ambientLight{

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

    radial-gradient(

        circle at var(--mouseX,50%) var(--mouseY,50%),

        rgba(212,175,55,.10),

        transparent 35%

    );

    mix-blend-mode:screen;

    transition:.15s;

    z-index:20;

}

/*==========================================================
CURSEUR
==========================================================*/

#cursorGlow{

    position:fixed;

    width:26px;

    height:26px;

    border-radius:50%;

    pointer-events:none;

    background:#D4AF37;

    filter:blur(12px);

    opacity:.45;

    transform:translate(-50%,-50%);

    z-index:9999;

}

/*==========================================================
AIDE
==========================================================*/

#tourHelp{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.72);

    backdrop-filter:blur(12px);

    z-index:500;

}

.helpCard{

    width:min(600px,92%);

    padding:45px;

    border-radius:24px;

    background:linear-gradient(
        180deg,
        #102848,
        #091321
    );

    text-align:center;

    box-shadow:0 30px 70px rgba(0,0,0,.45);

}

.helpCard h3{

    font-size:2rem;

    margin-bottom:20px;

}

.helpCard p{

    color:#d5dfef;

    line-height:2;

    margin-bottom:35px;

}

#closeHelp{

    border:none;

    cursor:pointer;

    padding:16px 34px;

    border-radius:999px;

    background:#D4AF37;

    color:#091321;

    font-weight:700;

    transition:.35s;

}

#closeHelp:hover{

    transform:translateY(-5px);

}
/*==========================================================
ANIMATIONS
==========================================================*/

@keyframes loaderProgress{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}

@keyframes slowZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.12);

    }

}

@keyframes ambientLight{

    0%{

        transform:
            translate(-50%,-50%)
            scale(1);

        opacity:.55;

    }

    50%{

        transform:
            translate(-50%,-50%)
            scale(1.18);

        opacity:.95;

    }

    100%{

        transform:
            translate(-50%,-50%)
            scale(1);

        opacity:.55;

    }

}

@keyframes hotspotPulse{

    0%{

        transform:scale(.85);

        opacity:1;

    }

    100%{

        transform:scale(1.65);

        opacity:0;

    }

}

@keyframes particlesMove{

    from{

        transform:

            translateY(0)

            rotate(0deg);

    }

    to{

        transform:

            translateY(-250px)

            rotate(360deg);

    }

}

@keyframes gridMove{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(250px);

    }

}

@keyframes roomTransition{

    0%{

        width:0;

        height:0;

        opacity:0;

    }

    40%{

        width:450px;

        height:450px;

        opacity:1;

    }

    100%{

        width:2600px;

        height:2600px;

        opacity:0;

    }

}

@keyframes bounce{

    0%{

        transform:

            translateX(-50%)

            translateY(0);

    }

    50%{

        transform:

            translateX(-50%)

            translateY(12px);

    }

    100%{

        transform:

            translateX(-50%)

            translateY(0);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:

            translateY(35px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:

            translateX(45px);

    }

    to{

        opacity:1;

        transform:

            translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:

            translateX(-45px);

    }

    to{

        opacity:1;

        transform:

            translateX(0);

    }

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes glow{

    0%{

        box-shadow:

        0 0 18px rgba(212,175,55,.15);

    }

    50%{

        box-shadow:

        0 0 42px rgba(212,175,55,.55);

    }

    100%{

        box-shadow:

        0 0 18px rgba(212,175,55,.15);

    }

}

/*==========================================================
EFFETS
==========================================================*/

.hotspot{

    animation:

        floating 3.5s ease-in-out infinite,

        glow 2.5s infinite;

}

.infoCard{

    animation:

        fadeUp .8s ease both;

}

.timelineItem{

    animation:

        fadeRight .6s ease both;

}

.miniRoom{

    animation:

        fadeLeft .6s ease both;

}

.helpCard{

    animation:

        fadeUp .8s ease;

}

/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:1400px){

    #virtualTour{

        grid-template-columns:1fr 400px;

    }

    .informationPanel{

        padding:40px;

    }

    #roomTitle{

        font-size:3rem;

    }

}

@media(max-width:1100px){

    #virtualTour{

        display:flex;

        flex-direction:column;

    }

    .sceneContainer{

        height:55vh;

    }

    .informationPanel{

        height:45vh;

    }

    #miniMap{

        width:260px;

        bottom:20px;

        left:20px;

    }

}

@media(max-width:768px){

    .introCenter h1{

        font-size:2.5rem;

    }

    .introCenter p{

        font-size:.95rem;

        line-height:1.8;

    }

    #roomTitle{

        font-size:2.1rem;

    }

    .roomInformations{

        grid-template-columns:1fr;

    }

    #miniMap{

        width:220px;

    }

    .informationPanel{

        padding:25px;

    }

}

@media(max-width:600px){

    #fullscreenButton,

    #homeButton{

        width:52px;

        height:52px;

    }

    #miniMap{

        position:relative;

        width:100%;

        left:auto;

        bottom:auto;

        border-radius:0;

    }

    .sceneContainer{

        height:45vh;

    }

    .informationPanel{

        height:55vh;

    }

}
/*==========================================================
HOTSPOT TOOLTIP
==========================================================*/

#hotspotTooltip{

    position:absolute;

    z-index:99999;

    opacity:0;

    pointer-events:none;

    padding:10px 18px;

    border-radius:12px;

    background:rgba(9,19,33,.94);

    color:#fff;

    font-size:.85rem;

    white-space:nowrap;

    border:1px solid rgba(212,175,55,.35);

    backdrop-filter:blur(10px);

    transition:opacity .25s;

}

/*==========================================================
POUSSIERES
==========================================================*/

#floatingDust{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;

}

.dust{

    position:absolute;

    width:4px;

    height:4px;

    border-radius:50%;

    background:rgba(255,255,255,.35);

    animation:floatingDust linear infinite;

}

@keyframes floatingDust{

    from{

        transform:translateY(0);

        opacity:0;

    }

    15%{

        opacity:1;

    }

    85%{

        opacity:1;

    }

    to{

        transform:translateY(-220px);

        opacity:0;

    }

}
/*======================================================
POPUP
======================================================*/

#roomPopup{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:99999;

}

#roomPopup.active{

    opacity:1;

    visibility:visible;

}

.popupWindow{

    width:min(500px,92%);

    background:#102848;

    border-radius:22px;

    padding:35px;

    position:relative;

    border:1px solid rgba(212,175,55,.35);

    box-shadow:

        0 30px 80px rgba(0,0,0,.45);

    animation:fadeUp .35s;

}

.popupWindow h2{

    color:#D4AF37;

    margin-bottom:18px;

}

.popupWindow p{

    line-height:1.9;

    color:#d7e2f4;

}

#closePopup{

    position:absolute;

    right:18px;

    top:18px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:rgba(255,255,255,.08);

    color:white;

    transition:.3s;

}

#closePopup:hover{

    background:#D4AF37;

    color:#091321;

}
.innovation-node{

    text-decoration:none;

    cursor:pointer;

    color:#fff;

    transition:
        transform .35s,
        box-shadow .35s,
        background .35s;

}

.innovation-node:hover{

    transform:translateY(-8px) scale(1.08);

    box-shadow:0 18px 45px rgba(0,0,0,.35);

}

.innovation-node:active{

    transform:scale(.96);

}