:root {
    --bg: #111318;
    --accent-red: #DA291C;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    height: 100%;
    background: transparent; /* was #000 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    overflow: hidden;
}

.stage-wrap {
    position: fixed;
    inset: 0;
    overflow: hidden;
}

/* Full-bleed 16:9 stage (cover-fit), matches PowerPoint's 12192000 x 6858000 EMU canvas */
.stage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw; /* 100vw * 9/16 */
    min-height: 100vh;
    min-width: 177.78vh; /* 100vh * 16/9 */
    transform: translate(-50%, -50%);
    background: #000;
    overflow: hidden;
    cursor: default;
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s linear;
}

    .slide.active {
        opacity: 1;
        visibility: visible;
    }

.layer {
    position: absolute;
    opacity: 0;
}

    .layer.static {
        opacity: 1;
    }

    .layer img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: fill;
    }

.crop {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

    .crop img {
        position: absolute;
        width: 100%;
        height: 100%;
    }

/* ===================== SLIDE 1 layout (EMU -> %) ===================== */
#s1-bg {
    left: 0.0414%;
    top: 0%;
    width: 99.955%;
    height: 100%;
}

#s1-flip {
    left: 0.0207%;
    top: 0%;
    width: 99.955%;
    height: 100%;
}

#s1-mid-a {
    left: 38.128%;
    top: 0%;
    width: 61.850%;
    height: 100%;
}

#s1-mid-b {
    left: 0%;
    top: 0%;
    width: 38.131%;
    height: 100%;
}

#s1-wide {
    left: 0.0207%;
    top: 0%;
    width: 81.230%;
    height: 100%;
}

#s1-title {
    left: 38.3%;
    top: 42.1%;
    width: 41.9%;
    height: 17.2%;
    overflow: hidden;
}

.title-reveal {
    position: absolute;
    inset: 0;
    overflow: hidden;
    clip-path: inset(0 100% 0 0);
}

    #s1-title h1 {
        margin: 0;
        width: 100%;
        height: 100%;
        color: #fff;
        font-family: Cambria, "Times New Roman", serif;
        font-weight: 700;
        font-size: 2.55vw;
        line-height: 1.18;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }

    #s1-title .dot {
    color: var(--accent-red);
    }

/* crop insets: image cropped via srcRect, expressed as oversized/offset inner img */
#s1-mid-a-crop img {
    width: 161.61%;
    left: -61.61%;
    height: 100%;
    top: 0;
}

#s1-mid-b-crop img {
    width: 262.19%;
    left: 0%;
    height: 100%;
    top: 0;
}

/* s1-wide (image4.png) is itself cropped (srcRect r=18737%) -> wrap in crop too */
#s1-wide {
    overflow: hidden;
}

    #s1-wide img {
        position: absolute;
        width: 123.06%;
        left: 0;
        height: 100%;
        top: 0;
    }

/* ===================== SLIDE 2 & 3 layout ===================== */
#s2-bg, #s3-bg {
    left: 0.0207%;
    top: 0%;
    width: 99.955%;
    height: 100%;
}

#s2-overlay, #s3-overlay {
    left: 0.0207%;
    top: 10.185%;
    width: 99.955%;
    height: 89.815%;
}

#s2-overlay-crop img, #s3-overlay-crop img {
    width: 100%;
    left: 0;
    height: 111.34%;
    top: -11.34%;
}

/* ===================== ANIMATIONS ===================== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes flipSpin {
    0% {
        opacity: 1;
        transform: rotate(0deg);
    }

    100% {
        opacity: 1;
        transform: rotate(180deg);
    }
}

@keyframes instantShow {
    from {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}

@keyframes wipeInLeft {
    0% {
        opacity: 1;
        transform: translateX(-50%);
    }

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

@keyframes flyInTop {
    0% {
        opacity: 1;
        transform: translateY(-50%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes flyInBottom {
    0% {
        opacity: 1;
        transform: translateY(150%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes flyInUp150 {
    0% {
        opacity: 1;
        transform: translateY(150%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes exitDown150 {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 1;
        transform: translateY(150%);
    }
}

@keyframes revealLeftRight {
    0% {
        clip-path: inset(0 100% 0 0);
    }

    100% {
        clip-path: inset(0 0 0 0);
    }
}

.slide.active #s1-bg {
    animation: fadeIn 2s ease 0s forwards;
}

.slide.active #s1-flip {
    animation: flipSpin 5s ease-in-out 2s forwards;
}

.slide.active #s1-mid-a {
    animation: instantShow 10ms linear 7s forwards;
}

.slide.active #s1-mid-b {
    animation: instantShow 10ms linear 7s forwards;
}

.slide.active #s1-wide {
    animation: wipeInLeft 3.8s ease-out 7s forwards;
}

.slide.active #s1-title .title-reveal {
    animation: revealLeftRight 1.2s ease-out 7s forwards;
}

/* État final de l'accueil si l'utilisateur clique pendant l'introduction */
body.intro-skipped #slide-1.active #s1-bg,
body.intro-skipped #slide-1.active #s1-mid-a,
body.intro-skipped #slide-1.active #s1-mid-b,
body.intro-skipped #slide-1.active #s1-wide {
    animation: none !important;
    opacity: 1 !important;
    transform: translateX(0) translateY(0) !important;
}

body.intro-skipped #slide-1.active #s1-flip {
    animation: none !important;
    opacity: 1 !important;
    transform: rotate(180deg) !important;
}

body.intro-skipped #slide-1.active #s1-title .title-reveal {
    animation: none !important;
    clip-path: inset(0 0 0 0) !important;
}

.slide.active #s2-overlay {
    animation: flyInUp150 2s ease-in-out 0s forwards;
}

.slide.active #s3-overlay {
    animation: exitDown150 2s ease-in-out 0s forwards;
}

/* ===================== CHROME (nav / lang / copyright) ===================== */
/* Real HTML replacing the baked "ACCUEIL / INFORMATIONS", "FR / EN"
   and copyright pixels from the source images. Always on top; visible
   immediately on slides 2 & 3 (baked originals were static there),
   and revealed at t=11s on slide 1 (matching the original fly-in timing). */
.chrome {
    position: fixed;
    z-index: 20;
    opacity: 1;
    font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    pointer-events: none;
}

.chrome.pending {
    opacity: 0;
}

.chrome.reveal {
    opacity: 0;
}

#chrome-nav.reveal {
    animation: navSlideFromTop 1.4s cubic-bezier(0.16, 1, 0.3, 1) 11s forwards;
}

#chrome-lang.reveal {
    animation: chromeSlideFromBottom 1.4s cubic-bezier(0.16, 1, 0.3, 1) 11.5s forwards;
}

#chrome-copy.reveal {
    animation: chromeSlideFromBottom 1.4s cubic-bezier(0.16, 1, 0.3, 1) 11.5s forwards;
}

.chrome-shade.reveal {
    animation: chromeFade 2s ease-out 11s forwards;
}

@keyframes chromeFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes navSlideFromTop {
    from {
        opacity: 0;
        transform: translateY(-120%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes chromeSlideFromBottom {
    from {
        opacity: 0;
        transform: translateY(120%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#chrome-nav {
    top: 4%;
    right: 4%;
    display: flex;
    align-items: center;
    gap: 24px;
}

.nav-link {
    color: #f5f4f0;
    text-decoration: none;
    font-weight: 400;
    pointer-events: auto;
    font-size: 15px;
}

.nav-link.active {
    color: var(--accent-red);
}

.nav-dot {
    color: var(--accent-red);
}

#chrome-lang {
    bottom: 4%;
    left: 4%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lang-link {
    color: #9098a4;
    text-decoration: none;
    font-weight: 400;
    pointer-events: auto;
    font-size: 15px; 
}

.lang-link.active {
    color: var(--accent-red);
}

.lang-sep {
    color: #5b6270;
    font-weight: 300;
}

#chrome-copy {
    bottom: 4%;
    right: 4%;
    color: #c8c8c8;
    font-size: 11px;
    letter-spacing: 1px;
}

.chrome-shade {
    position: fixed;
    z-index: 14;
    pointer-events: none;
    opacity: 1;
}

.chrome-shade.pending {
    opacity: 0;
}

.chrome-shade.reveal {
    animation: chromeFade 2s ease-out 11s forwards;
}

#shade-nav {
    top: 0;
    right: 0;
    width: 45vw;
    height: 32vh;
    background: radial-gradient(ellipse at top right, rgba(8, 10, 14, 0.6) 0%, rgba(8, 10, 14, 0.28) 40%, transparent 72%);
}

#shade-lang {
    bottom: 0;
    left: 0;
    width: 45vw;
    height: 32vh;
    background: radial-gradient(ellipse at bottom left, rgba(8, 10, 14, 0.6) 0%, rgba(8, 10, 14, 0.28) 40%, transparent 72%);
}

.page-panel {
    position: fixed;
    inset: 0;
    z-index: 15;
    background: transparent;
    transform: translateY(100%);
    transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    overflow: hidden;
}

.page-panel::before {
    content: "";
    position: absolute;
    left: 0.0207%;
    top: 10.185%;
    width: 99.955%;
    height: 89.815%;
    background-image: url("assets/overlay-clean.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto 111.5%;
    transform: translateY(-11.5%);
    z-index: 0;
    pointer-events: none;
}

.page-panel.open {
    transform: translateY(0);
    pointer-events: auto;
}

.page-frame {
    position: relative;
    z-index: 1;
    background: transparent;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}