/* =========================================
   1. POLICES & VARIABLES GLOBALES
   ========================================= */
@font-face { font-family: 'ArticulatCF-Bold';   src: url('Police/ArticulatCF-Bold.ttf')      format('truetype'); font-display: swap; }
@font-face { font-family: 'ArticulatCF-DBold';  src: url('Police/ArticulatCF-Demi-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'ArticulatCF-Normal'; src: url('Police/ArticulatCF-Normal.ttf')    format('truetype'); font-display: swap; }
@font-face { font-family: 'ArticulatCF-Medium'; src: url('Police/ArticulatCF-Medium.ttf')    format('truetype'); font-display: swap; }

:root {
    --space-global:  clamp(15px, 1vw, 20px);
    --font-h1:       clamp(1.5rem, 2.5vw, 3rem);
    --font-h4:       clamp(1.2rem, 1.8vw, 2rem);
    --font-h6:       clamp(0.8rem, 1vw, 1.2rem);
    --font-p:        clamp(0.7rem, 1vw, 0.9rem);
    --svg-menu:      clamp(120px, 10vw, 190px);
    --svg-rs:        clamp(35px, 3.1vw, 70px);
}

/* =========================================
   2. RESET & STRUCTURE DE BASE
   ========================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    overscroll-behavior: none;
    background-color: white;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'ArticulatCF-Bold', sans-serif;
    text-transform: uppercase;
    background-color: white;
    color: black;
    overflow-x: hidden;
    width: 100%;
    min-height: 100vh;
}

section { position: relative; width: 100%; margin: 0 auto; }

img, video {
    display: block;
    object-fit: cover;
    max-width: 100%;
}

a { color: inherit; text-decoration: none; font-family: inherit; }

/* =========================================
   3. TYPOGRAPHIE
   ========================================= */
p, h4, h6, #saveZone p { font-weight: normal; text-transform: none; }
h4 { font-size: var(--font-h4); font-family: 'ArticulatCF-DBold', sans-serif; margin: 0; text-align: left; text-transform: uppercase; }
h5 { font-family: 'ArticulatCF-Medium', sans-serif; font-size: clamp(0.9rem, 5vw, 2rem); margin: 0; word-wrap: break-word; }
h6 { font-size: var(--font-h6); font-family: 'ArticulatCF-Medium', sans-serif; margin: 0; text-align: left; text-transform: uppercase; }

/* =========================================
   4. SCROLLBAR
   ========================================= */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #555; }
* { scrollbar-width: thin; scrollbar-color: #333 #000; }

/* =========================================
   5. LOADER
   ========================================= */
#loader {
    position: fixed;
    inset: 0;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    will-change: opacity;
}

#loader-percentage { color: #000; font-size: 2.5rem; font-family: sans-serif; }

.loader-hidden {
    opacity: 0;
    transition: opacity 0.8s ease-out;
    pointer-events: none;
}

/* =========================================
   6. LABEL PROJET (HOVER 3D)
   Suit le curseur via JS, affiché au survol d'une carte pointcloud
   ========================================= */
#project-label {
    position: fixed;
    pointer-events: none;
    z-index: 10001;
    color: #fff;
    mix-blend-mode: difference;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: var(--font-h4);
    opacity: 0;
    transition: opacity 0.2s ease;
    transform: translate(-50%, -40px);
    white-space: nowrap;
}

/* =========================================
   7. COPYRIGHT
   ========================================= */
#saveZone p {
    font-family: 'ArticulatCF-Normal', sans-serif;
    font-size: var(--font-p);
    margin: 0;
    padding-bottom: 10px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 9999;
    pointer-events: none;
    color: white;
    mix-blend-mode: difference;
}

/* =========================================
   8. MENU & BOUTONS
   ========================================= */
.menu {
    position: fixed;
    top: var(--space-global);
    right: var(--space-global);
    display: flex;
    gap: var(--space-global);
    z-index: 9999;
}

#back { position: fixed; top: var(--space-global); left: var(--space-global); z-index: 1000; }

.svg, .svgRond, .svg-btn-projet {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--svg-menu);
    transition: filter 0.4s ease;
}
.svgRond { width: var(--svg-rs); }

.svg:hover, .svgRond:hover, .svg-btn-projet:hover { filter: invert(1); }

.svg img, .svgRond img, .svg-btn-projet img {
    width: 100%;
    transform: scale(1);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: center;
}
.svg:hover img, .svgRond:hover img, .svg-btn-projet:hover img { transform: scale(1.05); }

/* =========================================
   9. SECTION ACCUEIL (#home)
   ========================================= */
#home {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #fff;
}

canvas { display: block; width: 100%; height: 100%; }

#webgl-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    /* will-change géré dynamiquement par pointcloud.js :
       activé au démarrage, retiré après 2s pour libérer la mémoire GPU */
}

#instructions-3d {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%;
    text-align: center;
    top: auto;
    transform: none;
    color: #000;
    z-index: 10;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: var(--font-p);
    opacity: 0.3;
    pointer-events: none;
    margin: 0;
}

/* =========================================
   10. SECTION PROJETS (#projects)
   ========================================= */
.bulle_projet { display: flex; justify-content: center; padding: calc(var(--space-global) * 2) 0; }

.grid {
    display: grid;
    background-color: white;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
}

.item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    cursor: pointer;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease, opacity 0.5s ease;
    will-change: filter, opacity;
}

.item img {
    width: 100%; height: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.item .info-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: white;
    opacity: 0;
    transition: opacity 0.4s ease;
    padding: 20px;
}

.item:hover { z-index: 5; }
.item:hover img { transform: scale(1.5); }
.item:hover .info-text { opacity: 1; }

/* =========================================
   SCROLL DEPUIS LE POINT CLOUD
   is-scrolling est ajouté par pointcloud.js au clic sur une carte.
   Désactive visuellement le hover des GIFs pendant la descente vers l'ancre.
   Retiré après 1800ms (scroll fluide + animation C3).
   ========================================= */
.grid.is-scrolling {
    pointer-events: none !important;
}
.grid.is-scrolling .item:hover img { transform: none; }
.grid.is-scrolling .item:hover .info-text { opacity: 0; }

/* =========================================
   FOCUS MODE — ANIMATION C3 FREEZE FRAME
   Déclenché par pointcloud.js au clic sur une carte.
   Les items non-ciblés se figent, la cible fait un focus pull.
   ========================================= */
.grid.is-focus-mode .item { filter: grayscale(1) opacity(0.3); transition: all 0.7s ease; }
.grid.is-focus-mode .item.target-highlight {
    filter: none;
    animation: emerge 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes emerge {
    from { opacity: 0; transform: scale(1.05); }
    to   { opacity: 1; transform: scale(1); }
}
/* =========================================
   11. SECTION CONTACTS (#contacts)
   ========================================= */
.rs {
    display: flex;
    justify-content: space-between;
    padding: clamp(30px, 8vw, 100px) 5%;
    flex-wrap: wrap;
    gap: 20px;
}

#contactzone {
    padding: 0 var(--space-global) 50px var(--space-global);
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}

.texte_space {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.moveLetters:hover { animation: bounce 0.5s infinite; }
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

/* =========================================
   12. RESPONSIVE
   ========================================= */
@media screen and (max-width: 768px) {
    .menu { gap: 10px; }
    .rs { justify-content: space-between; gap: var(--space-global); }

    /* Deux spans dans le HTML gèrent le texte desktop/mobile
       sans hack CSS (color:transparent / font-size:0) */
    #instructions-3d .desktop-text { display: none; }
    #instructions-3d .mobile-text  { display: inline; }
}

@media screen and (min-width: 769px) {
    #instructions-3d .desktop-text { display: inline; }
    #instructions-3d .mobile-text  { display: none; }
}

@media screen and (max-width: 480px) {
    .rs { margin: calc(var(--space-global)*2) 0 calc(var(--space-global)*2) 0; }

    .menu {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        top: 15px;
        gap: 20px;
        max-width: 95vw;
        width: max-content;
        justify-content: center;
    }

    .menu .svg { width: 110px; }

    #contactzone { padding-bottom: 40px; }
}