/* ═══════════════════════════════════════════════════════════════
   POLICES AUTO-HÉBERGÉES (Montserrat-K6)
   Nom distinct de 'Montserrat' pour éviter tout conflit.
   ═══════════════════════════════════════════════════════════════ */
@font-face {
    font-family: 'Montserrat-K6';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/wp-content/themes/k6studio/fonts/montserrat-v31-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat-K6';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/wp-content/themes/k6studio/fonts/montserrat-v31-latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat-K6';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/wp-content/themes/k6studio/fonts/montserrat-v31-latin-700.woff2') format('woff2');
}

/* Variables CSS pour faciliter l'appel dans les modules */
:root {
    --k6-font-family: 'Montserrat-K6', 'Montserrat', sans-serif;
    --k6-font-portfolio: 'Barlow-K6', 'Barlow', sans-serif;
}

/* Déclaration Barlow pour le Portfolio */
@font-face {
    font-family: 'Barlow-K6';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/wp-content/themes/k6studio/fonts/barlow-v13-latin-800.woff2') format('woff2');
}

/* =========================================
   3. EMPILAGE (Z-INDEX)
   VERSION: 52 - CORRECTIF DISPLAY MOBILE & ALIGNEMENT
   ========================================= */

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #433947;
    overflow: hidden;
    font-family: var(--k6-font-family);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

.wp-block-html {
    margin: 0 !important;
    padding: 0 !important;
}

/* SCENE - ASPECT RATIO 16/9 FORCÉ (Design original 1920x1080) */
.intro-scene {
    position: fixed;
    top: 0;
    left: 50%;
    /* Centré horizontalement */
    transform: translateX(-50%);
    /* Centrage parfait */
    width: 100vw;
    height: 100vh;
    z-index: 20000;
    background-color: #433947;
    overflow: hidden;
    opacity: 1 !important;
    visibility: visible !important;

    /* Force ratio 16/9 - Si fenêtre plus haute/large, ajoute bandes noires */
    aspect-ratio: 16 / 9;
    max-width: 100vw;
    max-height: 100vh;
}

/* MOBILE : Plein écran (suppression letterbox) */
@media screen and (max-width: 767px) {
    .intro-scene {
        aspect-ratio: unset !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        /* Dynamic viewport height pour Safari */
        max-width: none;
        max-height: none;
    }
}

.layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.layer svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tint {
    display: none;
}


/* AMBIANCE */
.global-atmosphere {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 40 !important;
    background-color: #3b1a42;
    mix-blend-mode: multiply;
    opacity: 0.70;
    pointer-events: none;
}

/* LAYERS */
.layer-logo,
.menu-link {
    opacity: 0;
    visibility: hidden;
}

.layer-6,
.layer-5,
.layer-4,
.layer-3 {
    z-index: 1 !important;
    opacity: 0;
    visibility: hidden;
}

.layer-2 {
    z-index: 20 !important;
    mix-blend-mode: screen;
    opacity: 0;
}

.layer-menu {
    z-index: 30 !important;
    mix-blend-mode: normal;
}

/* ═══════════════════════════════════════════════════════════════════════
   FIX SCALING TABLEAUX (CSS PUR)
   ═══════════════════════════════════════════════════════════════════════
   Problème : Le SVG du menu a le même viewBox (0 0 1933 1107) que les fonds.
   Avec slice + xMidYMid, le scale = max(W/1933, H/1107).
   Sur écrans larges, W/1933 domine → les tableaux grossissent.

   Solution : On plafonne la LARGEUR du conteneur .layer-menu à
   100vh × (1933/1107) ≈ 100vh × 1.746.  Ainsi le conteneur a TOUJOURS
   le même ratio que le viewBox, et le scale vaut TOUJOURS H/1107.
   → Les tableaux scalent avec la hauteur uniquement.
   → Les fils atteignent toujours le haut (viewBox entier visible).
   → Les fonds (layer-1 à layer-6) gardent pleine largeur, non affectés.
   ═══════════════════════════════════════════════════════════════════════ */
@media screen and (min-width: 768px) {
    .layer-menu {
        /* Plafonne la largeur au ratio du viewBox × hauteur du viewport */
        max-width: calc(100vh * 1933 / 1107);
        /* Centre horizontalement dans l'intro-scene */
        left: 50% !important;
        transform: translateX(-50%);
    }
}

.layer-fireflies-bright {
    z-index: 60 !important;
    mix-blend-mode: screen;
    opacity: 1;
    pointer-events: none;
}

.layer-fireflies-bright g {
    opacity: 0;
}

#plan1-5,
#plan1-6 {
    opacity: 0;
}

.layer-1 {
    z-index: 70 !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    pointer-events: none;
}

.layer-logo {
    z-index: 100;
    mix-blend-mode: normal;
    opacity: 0 !important;
    pointer-events: none;
}

/* MENU */
.menu-link {
    cursor: pointer;
    pointer-events: auto !important;
}

.menu-link text {
    fill: #000000 !important;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 1px;
    pointer-events: none;
}

.menu-link:hover text {
    fill: #000000 !important;
}

.anim-gris {
    transform-box: fill-box !important;
    transform-origin: 50% 50% !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transform: scale(1);
    will-change: transform;
}

.menu-link:hover .anim-gris,
.menu-link.is-active .anim-gris {
    transform: scale(0);
}

/* ANIMATIONS */
@keyframes light-breath {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 0.3;
        transform: scale(1.02);
    }
}

#ray2-1,
#ray2-2,
#ray4-1 {
    animation: light-breath 8s infinite ease-in-out;
    transform-origin: center;
    transform-box: fill-box;
}



/* LOGO RETOUR ACCUEIL */
#ui-logo-home {
    position: fixed;
    z-index: 30000;
    /* PRIORITÉ MAX */
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 75px;
    height: 75px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, transform 0.3s ease;
    pointer-events: auto !important;
}

#ui-logo-home:hover {
    transform: translateX(-50%) scale(1.1);
}

#ui-logo-home svg {
    width: 100%;
    height: auto;
    display: block;
}

@media screen and (max-width: 768px) {
    #ui-logo-home {
        bottom: auto;
        left: auto;
        right: 20px;
        top: 85px;
        transform: none;
        width: 50px;
        height: 50px;
    }

    #ui-logo-home:hover {
        transform: scale(1.1);
    }
}

.site-branding a {
    pointer-events: none !important;
    cursor: default;
}