/* --- RESET & BASES --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg-dark: #1a1a1a;
    --text-white: #ffffff;
}

body, html {
    height: 100%;
    overscroll-behavior: none;
    font-family: 'Montserrat', sans-serif;
    color: var(--text-white);
    
    /* FOND UNI (Anthracite Mat) */
    background-color: var(--bg-dark);
    
    overflow: hidden;
}

/* --- GLOBE 3D ARRIÈRE-PLAN --- */
#globe-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Derrière le contenu */
    opacity: 0.4; /* Subtil pour ne pas gêner la lecture */
    pointer-events: none;
}

/* --- CONTENU CENTRAL --- */
.landing-container {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative;
    z-index: 10; /* Devant le globe */
}

/* --- LOGO --- */
.main-logo {
    width: clamp(200px, 50vw, 400px);
    height: auto;
    margin-bottom: clamp(20px, 5vh, 40px);
    filter: brightness(0) invert(1);
    pointer-events: none;
    will-change: transform;
    animation: float 6s ease-in-out infinite;
}

/* --- TITRE --- */
.company-name {
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 700;
    letter-spacing: clamp(1px, 0.5vw, 2px);
    margin-bottom: clamp(30px, 6vh, 50px);
    text-shadow: 0 4px 15px rgba(0,0,0,0.8);
    text-align: center;
}

/* --- BOUTON MAGNÉTIQUE --- */
.magnetic-btn {
    display: inline-block;
    padding: 16px 45px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    transition: background 0.3s ease, border-color 0.3s ease;
    
    min-width: 200px;
    text-align: center;
    touch-action: manipulation; 
}

@media (hover: hover) {
    .magnetic-btn:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.9);
    }
}

.btn-text { display: block; pointer-events: none; }

/* --- FOOTER --- */
footer {
    position: absolute;
    bottom: 30px; /* Un peu plus haut */
    padding-bottom: env(safe-area-inset-bottom);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px; /* Espace entre la flèche et le cadenas */
    z-index: 20;
}

/* Style partagé pour les icônes du footer (Cadenas & Flèche) */
.footer-icon {
    color: rgba(255, 255, 255, 0.2);
    width: 24px;
    height: 24px;
    padding: 10px;
    box-sizing: content-box;
    transition: all 0.3s ease;
    -webkit-touch-callout: none;
    user-select: none;
    cursor: pointer;
}

@media (hover: hover) {
    .footer-icon:hover { 
        color: #ffffff; 
        transform: scale(1.2); 
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@media (max-height: 500px) and (orientation: landscape) {
    .landing-container { padding: 10px; }
    .main-logo { width: 150px; margin-bottom: 10px; }
    .company-name { margin-bottom: 20px; font-size: 1.8rem; }
    footer { position: static; margin-top: 20px; }
}