@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');

:root {
    --text-massive: 280px; 
    --text-h2: 56px;
    --text-nav: 32px;
    --text-p: 18px;
    
    --grid-margin: 80px;
    
    --color-bg: #EAEAEA;
    --color-ink: #050505;
    
    --cursor-prepresse: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="8" fill="none" stroke="%23050505" stroke-width="1.5"/><line x1="16" y1="0" x2="16" y2="32" stroke="%23050505" stroke-width="1.5"/><line x1="0" y1="16" x2="32" y2="16" stroke="%23050505" stroke-width="1.5"/></svg>') 16 16, crosshair;
}

/* --- RESET --- */

* {
    font-optical-sizing: auto;
    box-sizing: border-box; 
}

html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: var(--color-bg);
    color: var(--color-ink);
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    
    user-select: none; 
    -webkit-user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    cursor: var(--cursor-prepresse);
}

a, .nav-link, button {
    cursor: var(--cursor-prepresse);
}

body.is-dragging {
    cursor: move; 
}

/* --- CANVAS INFINI --- */

.canvas {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1);
    will-change: transform;
}

/* --- TYPOGRAPHIE --- */

h1, h2, p, a { margin: 0; text-decoration: none; color: inherit; }

.global-link {
    font-size: 16px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 40px;
    letter-spacing: 0.05em;
    padding: 8px 16px;
}

.massive-text {
    font-size: var(--text-massive);
    font-weight: 900;
    letter-spacing: -0.04em; 
    border-bottom: 6px solid var(--color-ink);
    padding-bottom: 40px;
    margin-bottom: 15px; 
    line-height: 0.82;
}

.massive-text [data-char="T"] + [data-char="Y"] {
    margin-left: -0.00em; 
}

.massive-text [data-char="Y"] + [data-char="P"] {
    margin-left: -0.01em;
}

.massive-text [data-char="P"] + [data-char="A"] {
    margin-left: -0.10em;
}

.massive-text [data-char="A"] + [data-char="C"] {
    margin-left: -0.07em;
}

.massive-text [data-char="P"] + [data-char="O"] {
    margin-left: -0.00em;
}

.massive-text [data-char="O"] + [data-char="."] {
    margin-left: -0.04em;
}

.massive-text [data-char="C"] + [data-char="E"] {
    margin-left: -0.00em;
}

.massive-text [data-char="T"] {
    margin-left: -0.01em; 
}

h2 {
    font-size: var(--text-h2);
    font-weight: 900;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
    line-height: 1;
}

p {
    font-size: var(--text-p);
    font-weight: 400;
    text-transform: none;
    width: 480px; 
    line-height: 1.4;
    letter-spacing: 0.01em;
    user-select: text;
    -webkit-user-select: text;
}

.section-home p { text-transform: uppercase; }

.large-contact {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    width: auto;
}

/* --- STRUCTURES FIXES --- */

section {
    position: absolute;
}

.section-home {
    top: 0;
    left: 0;
    width: 1600px; 
    height: 900px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--grid-margin);
}

.pos-top { 
    top: -500px; 
    left: var(--grid-margin); 
    width: 500px;
}

/* --- CONTENUS HORIZONTAUX --- */

.pos-right { 
    top: 117px; 
    left: 1400px; 
    width: 500px;
}

.pos-far-right-1 {
    top: 605px;
    left: 2000px;
    width: 550px;
}

.pos-far-right-2 {
    top: 280px;
    left: 2600px;
    width: 500px;
}

.pos-far-right-3 {
    top: 370px;
    left: 3200px;
    width: 550px;
}

.pos-bottom-left { 
    top: 1000px; 
    left: var(--grid-margin); 
    width: 500px;
}

/* --- NAVIGATION --- */

.nav-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    font-size: var(--text-nav);
    font-weight: 900;
    letter-spacing: -0.01em;
}

.nav-column {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-link {
    cursor: pointer;
    transition: opacity 0.2s;
}

.nav-link:hover { opacity: 0.5; }

.back-link {
    font-size: 12px;
    font-weight: 700;
    display: block;
    margin-bottom: 30px;
    letter-spacing: 0.05em;
}

.next-link {
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
    margin-top: 40px; 
    letter-spacing: 0.05em;
    padding-bottom: 4px;
}

.rules {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.05em;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--color-ink);
    padding-top: 20px;
    width: 100%;
}

.typo-list div {
    font-size: 24px;
    font-weight: 700;
    border-top: 1px solid rgba(5, 5, 5, 0.2); 
    padding: 16px 0;
}

.typo-list div:last-child {
    border-bottom: 1px solid rgba(5, 5, 5, 0.2); 
}

/* ==========================================================================
   7. ANIMATION ORGANIQUE DU TITRE (GÉRÉE PAR JAVASCRIPT)
   ========================================================================== */

.massive-text .char {
    display: inline-block;
    transition: transform 4s cubic-bezier(0.76, 0, 0.24, 1);
    will-change: transform;
    
    transform: translate(0px, 0px) rotate(0deg);
}

.massive-text.is-scattered .char {
    transform: translate(var(--rx), var(--ry)) rotate(var(--rrot));
}

/* ==========================================================================
   8. APLAT NOIR (OVERLAY ARCHIVES EN 2/3)
   ========================================================================== */

.archive-link {
    cursor: var(--cursor-prepresse);
    transition: color 0.2s;
}
.archive-link:hover {
    color: rgba(5, 5, 5, 0.4);
}

.archive-overlay {
    position: fixed;
    /* Ancrage dans le coin inférieur droit */
    bottom: 0;
    right: 0;
    /* Occupe mathématiquement 2/3 de l'espace de l'écran */
    width: 66.66vw;
    height: 90vh;
    
    background-color: var(--color-ink);
    color: var(--color-bg);
    z-index: 100;
    
    /* Le tiroir sort toujours du bas de l'écran (100% de sa propre hauteur) */
    transform: translateY(100%);
    transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
    
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--grid-margin);
}

.archive-overlay.is-active {
    transform: translateY(0);
}

.archive-content {
    display: flex;
    flex-wrap: wrap;
    gap: 80px;
    width: 100%;
    max-width: 1600px;
}

.archive-image-placeholder {
    /* Largeur de base légèrement réduite pour le format 2/3 */
    flex: 1 1 300px;
    /* Hauteur ajustée proportionnellement au nouveau cadre */
    height: 40vh;
    border: 1px solid rgba(234, 234, 234, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    letter-spacing: 0.1em;
    color: rgba(234, 234, 234, 0.5);
}

.archive-text {
    flex: 1 1 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.archive-text h2 {
    color: var(--color-bg);
}
 
/* --- CROIX DE FERMETURE --- */

.close-btn {
    position: absolute;
    top: 40px;
    right: 40px;
    background: none;
    border: none;
    color: var(--color-bg);
    font-size: 48px;
    font-weight: 100;
    cursor: var(--cursor-prepresse);
    padding: 0;
    line-height: 1;
    transition: transform 0.3s;
}

.close-btn:hover {
    transform: rotate(90deg);
}

/* --- SÉCURITÉ DE SURFACE --- */

body.overlay-open .canvas {
    pointer-events: none;
}

.archive-overlay {
    pointer-events: auto;
}

.contact-intro {
    font-size: var(--text-p);
    font-weight: 400;
    text-transform: none; /* Conserve les minuscules pour le texte de labeur */
    line-height: 1.5;
    letter-spacing: 0.01em;
    margin-bottom: 40px; /* Crée l'espace nécessaire avant le bloc e-mail */
    width: 480px; /* Aligné sur la largeur de colonne de tes autres contenus */
}

/* ==========================================================================
   9. RESPONSIVE & MOBILE BREAKPOINT
   ========================================================================== */

/* Masqué par défaut sur ordinateur */
.mobile-warning {
    display: none;
}

@media (max-width: 768px) {
    /* 1. Blocage physique du scroll tactile (Overwhelm total du touch/bounce) */
    html, body {
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        touch-action: none !important; /* Désactive les gestes natifs de scroll/zoom de l'OS */
        -webkit-overflow-scrolling: auto; /* Supprime le défilement élastique iOS */
    }

    /* 2. Fixation du Canvas */
    .canvas {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        transform: translate(0, 0) scale(1) !important;
        pointer-events: none !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }

    /* 3. Centrage de la zone d'accueil */
    .section-home {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-top: 15vh !important;
    }

    /* Masquage des éléments secondaires */
    .section-home header > a,
    .section-home .nav-grid,
    .section-home .rules,
    section:not(.section-home),
    .archive-overlay {
        display: none !important;
    }

    /* 4. LE TITRE MONUMENTAL MOBILE */
    .massive-text {
        font-size: 26vw !important;
        font-weight: 900;
        line-height: 0.85 !important;
        letter-spacing: -0.05em !important;
        text-align: center !important;
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        white-space: nowrap;
    }

    /* Contrôle de l'explosion des lettres pour qu'elles restent dans le cadre du téléphone */
    .massive-text.is-scattered .char {
        transform: translate(calc(var(--rx) * 0.15), calc(var(--ry) * 0.15)) rotate(var(--rrot)) !important;
    }

    /* 5. Message d'information en bas d'écran */
    .mobile-warning {
        display: flex !important;
        position: fixed !important;
        bottom: 80px;
        left: 0;
        width: 100%;
        justify-content: center;
        z-index: 1000;
        padding: 0 30px;
    }

    .warning-message {
        font-size: 12px;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        max-width: 280px;
    }
}