/* MA BASE */
:root {
    --bg-color: #080808; --text-color: #ececec; --white-pure: #ffffff;
    --meta-color: #888888; --accent-color: #FFE600; 
    --font-mono: 'Space Mono', monospace; --font-title: 'Oswald', sans-serif; --font-body: 'Inter', sans-serif;
}

body, html { margin: 0; padding: 0; width: 100%; min-height: 100vh; background-color: var(--bg-color); color: var(--text-color); overflow-x: hidden; }
.garden-body { padding-top: max(100px, 12vh); cursor: url('../note/img/cursor-default.svg') 15 15, auto; }

/* Curseurs Accessibles */
a, button, .filter-btn, .modal-close, #prev-btn, #next-btn, .back-home-btn, .garden-item { cursor: url('../note/img/cursor-pointer.svg') 15 15, pointer !important; }
p, span, h1, h2, h3, .cartel-title, .cartel-desc { cursor: url('../note/img/cursor-text.svg') 15 15, text; }

/* MENU ET FILTRE */
   /* LES ITEMS INTERACTIFS */
#glcanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* POUR LE METTRE DERIERE */
    pointer-events: none; /* ON CLIQUE QAUND MÊME */
}


body, .garden-body {
    background-color: transparent !important;
}

.garden-header { 
    position: fixed; top: 0; left: 0; width: 100%; 
    padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 4vw, 2rem); 
    background: linear-gradient(to bottom, var(--bg-color) 85%, transparent); 
    z-index: 1000; display: flex; justify-content: center; align-items: center; 
    pointer-events: none; 
}

.garden-filters, .back-home-btn { pointer-events: auto; }

.back-home-btn { 
    position: absolute; left: clamp(1rem, 4vw, 2rem); top: 50%; transform: translateY(-50%);
    text-decoration: none; color: var(--meta-color); font-size: clamp(0.6rem, 1vw, 0.7rem); 
    border: 1px solid #333; padding: 0.5rem 1rem; transition: all 0.3s ease; background-color: var(--bg-color); 
}
.back-home-btn:hover { border-color: var(--accent-color); color: var(--accent-color); }

.garden-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.filter-btn { 
    background: none; border: 1px solid #333; color: var(--meta-color); padding: 0.4rem 0.8rem; 
    font-family: var(--font-mono); font-size: clamp(0.6rem, 1vw, 0.65rem); text-transform: uppercase; transition: all 0.3s ease; 
}
.filter-btn.active, .filter-btn:hover { border-color: var(--accent-color); color: var(--accent-color); }

/* LA GRILLE DU JARDIN */
.garden-container { width: 100%; max-width: 1800px; margin: 0 auto; }
.garden-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(15px, 2vw, 25px); padding: 0 clamp(1rem, 4vw, 2rem) 5rem clamp(1rem, 4vw, 2rem); 
}
.garden-item.image-stack .item-content > *:not(:first-child) {
    display: none; 
}

.garden-item { background-color: #080808; border: 1px solid #333; display: flex; flex-direction: column; transition: border-color 0.3s ease, transform 0.3s ease; height: 100%; }
.garden-item:hover { border-color: var(--white-pure); transform: translateY(-2px); }

.item-content { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background-color: #000; display: flex; align-items: center; justify-content: center; position: relative; }

/* LES VIDEOS FONT LA MÊME TAILLE QUE LES IMAGES  */
.item-content img, .item-content video { width: 100%; height: 100%; object-fit: cover; display: block; }
.garden-item.inspiration .item-content video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* POUR EVITER DE DÉFORMER LE VISUELS*/
}

/* LE TEXTES DANS LE POP UP */
.text-box { 
    padding: clamp(1.2rem, 4vw, 2rem); /* PETITES MARGES A L'INTÉRIEUR*/
    text-align: center; /* ON CENTRE LE TEXTE */
    background-color: #0a0a0a; 
    display: flex;
    align-items: center;
    justify-content: center; 
    overflow: hidden;
}

.text-box p { 
    /* ON EVITE LE DEBORDEMENT AVEC UN MARGE INTERNE AUSSI */
    font-size: clamp(0.7rem, 0.9vw, 0.8rem); 
    line-height: 1.4; 
    color: var(--white-pure); 
    margin: 0;
    max-width: 100%; /* POUR RESPECTER LE CADRE IMPOSER */
}

.item-meta { padding: 12px 15px; display: flex; justify-content: space-between; border-top: 1px solid #333; font-size: clamp(0.6rem, 1vw, 0.65rem); color: var(--meta-color); background-color: #111; margin-top: auto; }
.item-meta .type { color: var(--accent-color); font-weight: bold; }
.hidden-cartel-data { display: none; }

/* 
   TAILLE DES ITEMS DU TYPE IMAGES ECT
    */
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.95); justify-content: center; align-items: center; }
.modal.show { display: flex; }


.modal-window { 
    width: clamp(90vw, 95vw, 1200px); 
    height: clamp(85vh, 90vh, 800px); 
    background-color: #080808; display: flex; flex-direction: column; border: 1px solid #333; 
}

.modal-header { height: 50px; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(1rem, 2vw, 1.5rem); font-size: 0.75rem; color: var(--meta-color); background-color: #0f0f0f; flex-shrink: 0; }
.modal-controls button { background: none; border: none; color: white; margin-left: clamp(0.5rem, 1vw, 1rem); font-size: 1.1rem; transition: color 0.3s ease; }
.modal-controls button:hover { color: var(--accent-color); }
.source-url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }

.modal-body { display: flex; flex: 1; overflow: hidden; flex-direction: row; }

.modal-view-left { flex: 3; background-color: #000; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(1rem, 3vw, 2rem); }

/* GERER LES VIDEO DANS LE POP UP */
.modal-view-left img, .modal-view-left video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* LES MINI DIAPO */
.modal-view-left.stack-content { justify-content: flex-start !important; align-items: center !important; padding: clamp(2rem, 5vw, 4rem) 0; overflow-y: scroll !important; }
.modal-view-left.stack-content img { max-height: none; width: clamp(80%, 90vw, 90%); margin-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid #222; }
.modal-view-left.stack-content video {
    width: 100%;
    height: auto;      /* FORMAT VIDEO EN GRAND */
    max-height: none;  /* MA VIDEO S'ÉTEND MEME EN SCROLL */
    margin-bottom: 2rem;
    display: block;
}

/* LES LIENS DANS LE POP UP */
#modal-source-url a {
    color: var(--meta-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

#modal-source-url a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

/* LE TEXTE ET SES ZONES */
.modal-view-left.text-box { padding: clamp(2rem, 5vw, 4rem); }

.modal-view-left.text-box p { 
    font-size: clamp(1.1rem, 2vw, 1.4rem); 
    max-width: 80%; /* ASPECT BLOC AVEC TEXTE */
    line-height: 1.5; 
    color: var(--white-pure); 
    text-align: center;
}
.modal-info-right { flex: 1; min-width: 300px; padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2rem); border-left: 1px solid #333; background-color: #0a0a0a; overflow-y: auto; }
.modal-info-right h2 { font-family: var(--font-title); font-size: clamp(1.4rem, 2vw, 1.8rem); color: var(--white-pure); text-transform: uppercase; margin-bottom: 1.5rem; line-height: 1.1; }
.modal-info-right p { font-family: var(--font-body); font-size: clamp(0.85rem, 1vw, 0.95rem); line-height: 1.6; color: var(--meta-color); }

/* POUR VOIR LE SCROLL ET SES BARRES */
.modal-view-left::-webkit-scrollbar, .modal-info-right::-webkit-scrollbar { width: 8px; }
.modal-view-left::-webkit-scrollbar-track, .modal-info-right::-webkit-scrollbar-track { background: #111; }
.modal-view-left::-webkit-scrollbar-thumb, .modal-info-right::-webkit-scrollbar-thumb { background: var(--accent-color); border-radius: 4px; border: 2px solid #111; }

/*
   RESPONSIVE ET TÉLÉPHONE
 */

@media (max-width: 1024px) {
    .garden-header { 
        flex-direction: column; 
        gap: 1rem;
        padding-top: 3.5rem; 
        padding-bottom: 1rem;
    }
    .back-home-btn { 
        position: absolute; 
        left: 50%; 
        top: 1rem; 
        transform: translateX(-50%); 
        margin-bottom: 0; 
    }
    .garden-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

@media (max-width: 768px) {
    .garden-grid { 
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
        gap: 15px; 
        padding: 0 1rem 4rem 1rem; 
    }
    
    /* --- OPTIMISATION DU MENU FILTRES POUR MOBILE --- */
    .garden-filters {
        display: flex;
        flex-wrap: nowrap; /* LES BOUTONS NE SAUTE PAS , ET NE PASSE PAS A LA LIGNE */
        overflow-x: auto; 
        width: 100%;
        justify-content: flex-start; 
        padding: 0 1rem 0.5rem 1rem;
        -webkit-overflow-scrolling: touch; 
        
        
        -ms-overflow-style: none;  /* POUR LES AUTRES NAV */
        scrollbar-width: none;  /*POUR FIREFOX */
    }
    
    /* SUR LES AUTRES ON MASQUE LA BARRE */
    .garden-filters::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        flex: 0 0 auto; /* ON EVITE D'ECRASER LES FILTRES */
        margin-right: 0.5rem; /* ON ESPACE LES BOUTONS */
        padding: 0.5rem 1rem; /* DES ZONES DE CLIQUES PLUS GROS */
        font-size: 0.7rem; 
    }
    /* ------------------------------------------------ */

    /* POP UP SUR MOBILE */
    .modal-window { width: 100vw; height: 100vh; border: none; }
    .modal-body { flex-direction: column; }
    .modal-view-left { flex: 0 0 55%; padding: 1rem; }
    .modal-info-right { flex: 0 0 45%; border-left: none; border-top: 1px solid #333; min-width: auto; }
}

@media (max-width: 480px) {
    .garden-grid { grid-template-columns: 1fr; }
}