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

:root { --fz: 1; }

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', 'Helvetica Neue', Calibri, Arial, sans-serif;
}

.presentation {
    width: 100vw; height: 100vh;
    position: relative;
    background: linear-gradient(-45deg, #0d1117, #141828, #0f1520, #1a2035, #0d1117);
    background-size: 400% 400%;
    animation: bgPulse 8s ease infinite;
}

@keyframes bgPulse {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

#bg-canvas {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}

.halo {
    position: fixed;
    width: 800px; height: 800px;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,89,255,0.14) 0%, rgba(30,60,180,0.04) 50%, transparent 70%);
    animation: haloBreath 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes haloBreath {
    0%, 100% { transform: translate(-50%,-50%) scale(1);    opacity: 0.6; }
    50%       { transform: translate(-50%,-50%) scale(1.45); opacity: 1; }
}

.halo2 {
    position: fixed;
    width: 400px; height: 400px;
    left: 20%; top: 70%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(60,120,255,0.08) 0%, transparent 70%);
    animation: haloFloat 9s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.halo3 {
    position: fixed;
    width: 300px; height: 300px;
    left: 80%; top: 20%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(100,160,255,0.07) 0%, transparent 70%);
    animation: haloFloat 12s ease-in-out infinite reverse;
    pointer-events: none;
    z-index: 0;
}

@keyframes haloFloat {
    0%, 100% { transform: translate(0, 0) scale(1);   opacity: 0.5; }
    33%       { transform: translate(30px, -20px) scale(1.2); opacity: 0.9; }
    66%       { transform: translate(-20px, 15px) scale(0.85); opacity: 0.6; }
}

.slide {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.slide.active { display: flex; }

/* ── SLIDE 1 ── */
.s1-content {
    position: relative;
    z-index: 2;
    text-align: center;
    animation: fadeUp .9s ease both;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.s1-title {
    font-size: calc(clamp(3.5rem, 4.8vw, 5.5rem) * var(--fz));
    font-weight: 300;
    color: #f0f4ff;
    letter-spacing: -0.01em;
    margin-bottom: 2rem;
}
.s1-title span {
    color: #5b9bff;
    font-weight: 700;
}

.s1-subtitle {
    font-size: calc(clamp(1.2rem, 1.4vw, 1.8rem) * var(--fz));
    font-weight: 500;
    color: rgba(139,149,168,0.85);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.s1-badge {
    display: inline-block;
    margin-top: 2.4rem;
    background: rgba(91,155,255,.1);
    color: #5b9bff;
    font-size: clamp(10px, 1vw, 13px);
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 6px 20px;
    border-radius: 20px;
    border: 1px solid rgba(91,155,255,.3);
}

/* ── SLIDES 2-4 CARD ── */
.slide-content {
    position: relative;
    z-index: 2;
    width: 85%;
    height: 76%;
    background: rgba(26, 31, 46, 0.82);
    border: 1px solid rgba(91,155,255,0.18);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    box-shadow: 0 0 60px rgba(0,89,255,0.12), 0 8px 40px rgba(0,0,0,0.5);
    padding: 3.5rem 4.5rem;
    display: flex;
    flex-direction: column;
    animation: fadeUp .7s ease both;
}

/* Scénario */
.scenario-text {
    font-size: calc(clamp(1.8rem, 1.65vw, 2.4rem) * var(--fz));
    color: #e8edf5;
    line-height: 1.7;
}
.scenario-text p + p { margin-top: 1rem; }

.good-luck {
    margin-top: 2rem;
    font-size: calc(clamp(1.4rem, 1.6vw, 2rem) * var(--fz));
    font-weight: 800;
    color: #5b9bff;
    letter-spacing: 0.05em;
}

/* Débriefing */
.debrief-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.debrief-title {
    font-size: calc(clamp(3.5rem, 3vw, 5rem) * var(--fz));
    font-weight: 300;
    color: #5b9bff;
    letter-spacing: 0.04em;
}

/* PSIS */
.psis-wrap {
    font-size: calc(clamp(1.3rem, 1.05vw, 1.7rem) * var(--fz));
    color: #d0d8e8;
    line-height: 2;
}
.psis-section {
    font-weight: 700;
    color: #5b9bff;
    text-decoration: underline;
    text-decoration-color: rgba(91,155,255,0.4);
}
.psis-block { margin-bottom: 0.3rem; }
.gap-top    { margin-top: 1rem; }
.psis-row   { margin: 0; }
.psis-row strong { color: #7eb8ff; }

/* Hint navigation */
.hint {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: rgba(139,149,168,0.35);
    letter-spacing: 1px;
    z-index: 10;
    pointer-events: none;
}

/* ── MODE CLAIR ── */
@keyframes bgPulseLight {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
}

body.theme-light .presentation {
    background: linear-gradient(-45deg, #eef2ff, #f0f9ff, #f5f0ff, #eef8f4) !important;
    background-size: 400% 400% !important;
    animation: bgPulseLight 16s ease infinite !important;
}

body.theme-light .halo {
    background: radial-gradient(circle, rgba(99,102,241,0.10) 0%, rgba(79,70,229,0.03) 50%, transparent 70%);
}
body.theme-light .halo2 {
    background: radial-gradient(circle, rgba(99,102,241,0.06) 0%, transparent 70%);
}
body.theme-light .halo3 {
    background: radial-gradient(circle, rgba(129,140,248,0.05) 0%, transparent 70%);
}

body.theme-light .s1-title      { color: #1e293b; }
body.theme-light .s1-title span { color: #4f46e5; }
body.theme-light .s1-subtitle   { color: rgba(71,85,105,0.85); }
body.theme-light .s1-badge {
    background: rgba(79,70,229,.1);
    color: #4f46e5;
    border-color: rgba(79,70,229,.3);
}

body.theme-light .slide-content {
    background: rgba(248,250,252,0.85);
    border-color: rgba(99,102,241,0.18);
    box-shadow: 0 0 60px rgba(99,102,241,0.08), 0 8px 40px rgba(0,0,0,0.10);
}

body.theme-light .scenario-text { color: #1e293b; }
body.theme-light .good-luck     { color: #4f46e5; }
body.theme-light .debrief-title { color: #4f46e5; }

body.theme-light .psis-wrap        { color: #334155; }
body.theme-light .psis-section     { color: #4f46e5; text-decoration-color: rgba(79,70,229,0.4); }
body.theme-light .psis-row strong  { color: #6366f1; }

body.theme-light .hint { color: rgba(71,85,105,0.35); }