/* --- 1. BASE ET SCALING FIXE --- */
:root {
    --bg-color: #FFFFFF;
    --text-main: #000000;      
    --text-muted: #888888;     
}

html {
    font-size: 15px; 
    scroll-behavior: smooth;
}

body {
    background-color: #FFFFFF;
    color: var(--text-main);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0; padding: 0;
    width: 100%; 
    height: auto;
    min-width: 1280px; /* Sécurité Desktop */
    overflow-x: hidden; 
    overflow-y: hidden; /* Lock desktop par défaut */
    position: relative;
}

body.locked { overflow: hidden; height: 100vh; }
body.unlocked { overflow-y: auto; height: auto; }

* { box-sizing: border-box; cursor: default; }
a, a *, button, button * { cursor: pointer; } 

/* GRAIN - DÉSACTIVÉ POUR FOND BLANC */
.noise-overlay {
    display: none;
}

/* TRAIL (DESKTOP SEULEMENT) */
#trail-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* --- 3. CONTENEUR HOME (DESKTOP) --- */
#home-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100vh; 
    z-index: 10; pointer-events: none; 
}
#home-container > * { pointer-events: auto; }

/* TITRE */
.title-block { position: absolute; top: 4rem; left: 4rem; z-index: 10; }
.title-block h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }

/* PROJETS (DESKTOP) */
.main-stage {
    position: absolute; top: 50%; left: 40%; transform: translate(-50%, -50%);
    z-index: 20; display: flex; flex-direction: column; min-width: 25rem;
}
.manifesto { font-family: "Courier New", Courier, monospace; font-size: 1.2rem; margin-bottom: 4rem; line-height: 1.4; max-width: 30rem; }
.projects { display: flex; flex-direction: column; gap: 0; }

.project-link {
    display: flex; flex-direction: column; 
    text-decoration: none; color: var(--text-main); 
    transition: all 0.3s ease;
    position: relative;
    scroll-margin-top: 20px; 
}

.project-header {
    display: grid; grid-template-columns: 3rem 1fr; align-items: center; gap: 1rem; 
    padding: 1.5rem 0; width: 100%;
}

.p-dot { width: 0.8rem; height: 0.8rem; background-color: #000; border-radius: 50%; margin: 0 auto; }
.p-name { font-size: 3rem; font-weight: 700; letter-spacing: -0.05em; text-transform: uppercase; line-height: 0.9; }

/* SLOT POUR ACCORDÉON MOBILE */
.mobile-project-slot {
    display: none; width: 100%; overflow: hidden;
    transition: height 0.5s ease-in-out;
}

/* PANNEAU PRÉVISUALISATION (DESKTOP) */
.preview-panel {
    position: absolute; top: 50%; left: 40%; transform: translate(18rem, -50%); 
    width: 30rem; opacity: 0; pointer-events: none; 
    display: flex; flex-direction: column; z-index: 15;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.preview-panel.active { opacity: 1; transform: translate(16rem, -50%); pointer-events: auto; }

/* CONTENEUR DU DESSIN */
.viz-wrapper {
    width: 100%; height: 100%; display: flex; flex-direction: column;
}
.viz-container { width: 100%; height: 30rem; position: relative; margin-bottom: 2rem; }
.viz-canvas { width: 100%; height: 100%; display: block; }
.viz-text { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; font-size: 1.1rem; line-height: 1.4; margin-bottom: 2rem; min-height: 4rem; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 2px solid #000; padding-top: 1.5rem; gap: 1rem; }
.stat-item { display: flex; flex-direction: column; gap: 0.3rem; }
.stat-label { font-family: "Courier New", Courier, monospace; font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; }
.stat-value { font-size: 1.4rem; font-weight: 700; }

.close-viz-btn { display: none; } 

/* BOUTON LANGUE */
.lang-btn {
    position: fixed; top: 4rem; right: 4rem;
    background: #FFFFFF; border: 1px solid #000;
    color: #000; padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 700;
    cursor: pointer; z-index: 101; transition: all 0.3s ease;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none; -webkit-appearance: none; appearance: none;
}
.lang-btn:hover { background: #000; color: #FFF; }
.lang-btn:focus { outline: none; }

/* DOCK SOCIAL */
.social-dock {
    position: fixed; bottom: 3rem; right: 3rem;
    display: flex; flex-direction: column; align-items: center; gap: 1.5rem; z-index: 100;
}
.social-btn {
    display: flex; justify-content: center; align-items: center;
    border: 1px solid transparent; border-radius: 50%;
    background: #FFFFFF; position: relative; outline: none; text-decoration: none; color: var(--text-main);
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
button.social-btn { appearance: none; -webkit-appearance: none; padding: 0; margin: 0; font-family: inherit; }
/* Toutes les icônes ont la même taille */
.social-dock .social-btn { width: 4rem; height: 4rem; }
.social-dock .social-btn img,
.social-dock .social-btn svg { width: 2rem; height: 2rem; }
.ideas-icon { width: 2.2rem; height: 2.2rem; object-fit: contain; }
.social-btn:hover { border-color: #000; transform: scale(1.1); background: #FFF; }
.social-btn svg { fill: currentColor; }
.tooltip-text {
    position: absolute; right: 120%; opacity: 0; pointer-events: none;
    font-family: "Courier New", Courier, monospace; font-size: 0.8rem; letter-spacing: 0.1rem;
    transition: opacity 0.3s ease, transform 0.3s ease; transform: translateX(10px) translateY(-50%); top: 50%; white-space: nowrap; color: var(--text-main);
}
.social-btn:hover .tooltip-text { opacity: 1; transform: translateX(0) translateY(-50%); }

/* SECTION IDEAS */
#ideas-zone {
    display: none; width: 100%; min-height: 100vh; padding: 5rem 15rem; 
    position: absolute; top: 100vh; left: 0; z-index: 50;
    opacity: 0; transition: opacity 1s ease; background-color: var(--bg-color); 
}
.ideas-grid { display: grid; grid-template-columns: 20rem 1fr; gap: 8rem; }
#ideas-zone.visible { display: block; opacity: 1; }
.ideas-sidebar h2 { font-size: 4rem; font-weight: 700; letter-spacing: -0.05em; margin-bottom: 2rem; }
.ideas-list { padding-bottom: 10rem; display: flex; flex-direction: column; }

.article-card { 
    border-top: 1px solid #E5E5E5; padding: 3rem 0; 
    display: flex; flex-direction: column; gap: 1rem; 
    transition: background 0.4s ease; cursor: pointer;
}
.article-card:hover { background-color: #FAFAFA; }

.idea-meta { font-family: "Courier New", Courier, monospace; font-size: 0.9rem; color: var(--text-muted); display: flex; gap: 1rem; }
.idea-title { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.1; }

.idea-excerpt { 
    font-size: 1.2rem; line-height: 1.5; 
    max-height: 0; opacity: 0; overflow: hidden; 
    transition: max-height 0.8s ease-in-out, opacity 0.5s ease, margin-top 0.3s; 
}
.article-card:hover .idea-excerpt { max-height: 500vh; opacity: 1; margin-top: 2rem; }

/* BOUTON TOP NOIR */
.back-top-btn { 
    margin-top: 5rem; background: transparent; 
    border: 2px solid #000; color: #000; /* FORCE NOIR */
    padding: 1.5rem 3rem; font-weight: 700; font-size: 1rem; transition: 0.3s; 
}
.back-top-btn:hover { background: #000; color: #FFF; }

/* ========================================= */
/* === VERSION MOBILE ( STRICT & CLEAN ) === */
/* ========================================= */
@media (max-width: 1024px) and (hover: none) and (pointer: coarse) {
    html { font-size: 16px; }
    body { 
        min-width: 0; width: 100%; height: auto; 
        overflow-y: auto !important; /* SCROLL ACTIVÉ */
        -webkit-overflow-scrolling: touch;
        display: flex; flex-direction: column;
    }
    body.locked { overflow-y: auto !important; height: auto; position: relative; } 
    
    /* Pas de traînée sur mobile */
    #trail-canvas { display: none !important; }

    /* CONTAINER */
    #home-container { position: relative; height: auto; padding: 40px 20px 150px 20px; }
    
    /* TYPO */
    .title-block { position: relative; top: 0; left: 0; margin-bottom: 30px; }
    .title-block h1 { font-size: 2rem; }
    .main-stage { position: relative; top: 0; left: 0; transform: none; min-width: 100%; width: 100%; }
    .manifesto { font-size: 1rem; max-width: 100%; margin-bottom: 40px; line-height: 1.5; }
    
    /* PROJETS & ACCORDÉON */
    .project-link { padding: 0; border-bottom: 1px solid #eee; }
    .project-header { padding: 20px 0; grid-template-columns: 20px 1fr; }
    .p-dot { width: 8px; height: 8px; }
    .p-name { font-size: 1.5rem; }

    .mobile-project-slot {
        display: block; 
        height: 0; 
        overflow: hidden;
    }
    .mobile-project-slot.open {
        height: auto; 
        padding-bottom: 40px;
    }

    .preview-panel { display: none; } 

    /* ANIMATIONS VIZ MOBILE GRANDES */
    .viz-container { 
        height: 400px !important; /* GROSSE TAILLE FORCÉE */
        margin-bottom: 15px; 
    } 
    .viz-text { font-size: 0.95rem; margin-bottom: 15px; min-height: auto; line-height: 1.4; }
    .stat-value { font-size: 1.1rem; }
    .stat-label { font-size: 0.7rem; }
    .close-viz-btn { display: none; } 

    /* DOCK SOCIAL */
    .social-dock {
        position: fixed; bottom: 20px; right: 50%; transform: translateX(50%);
        flex-direction: row; gap: 12px;
        background: #FFFFFF; padding: 10px 20px;
        border-radius: 50px; border: 1px solid #eee;
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        width: max-content;
        align-items: center; 
        z-index: 100;
    }
    
    /* BOUTON LANGUE MOBILE */
    .lang-btn {
        position: fixed; top: 20px; right: 20px;
        padding: 8px 16px; font-size: 0.85rem;
        color: #000;
    }

    /* Toutes les icônes ont la même taille sur mobile aussi */
    .social-dock .social-btn { width: 50px; height: 50px; }
    .social-dock .social-btn img,
    .social-dock .social-btn svg { width: 24px; height: 24px; }
    .ideas-icon { width: 26px; height: 26px; object-fit: contain; }
    
    .tooltip-text { display: none; }

    /* IDEAS INTERACTION */
    #ideas-zone { padding: 20px; top: 0; position: relative; margin-top: 0; min-height: 0; } 
    .ideas-grid { grid-template-columns: 1fr; gap: 30px; }
    .ideas-sidebar h2 { font-size: 2rem; margin-bottom: 10px; }
    .ideas-list { padding-bottom: 100px; }
    .idea-title { font-size: 1.4rem; }
    .idea-excerpt { font-size: 1rem; }
    
    /* Gestion Clic Articles */
    .article-card:hover .idea-excerpt { max-height: 0; opacity: 0; margin-top: 0; }
    .article-card.active .idea-excerpt { 
        max-height: 8000px !important; 
        opacity: 1 !important; 
        margin-top: 20px !important; 
    }
    
    .back-top-btn { width: 100%; justify-content: center; }
}