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

/* --- RESET & BASE --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Space Mono', monospace; line-height: 1.6; overflow-x: hidden; transition: background-color 0.3s ease, color 0.3s ease; }

/* --- THÈMES --- */
body.theme-light { background-color: #ffffff; color: #000000; }
body.theme-dark { background-color: #000000; color: #ffffff; }
body.theme-dark .db-logo, body.theme-dark .revox-video { filter: invert(1); }

/* --- NAVIGATION DESKTOP --- */
.navbar { position: fixed; top: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 30px 50px; z-index: 1000; font-size: 11px; letter-spacing: 2px; }
.logo { font-weight: 700; letter-spacing: 3px; }
.menu a, .lang-selector a { text-decoration: none; transition: 0.3s; font-weight: 700; margin-left: 20px; color: inherit; }
.lang-selector { margin-left: 40px; padding-left: 20px; border-left: 1px solid; }
.hamburger { display: none; cursor: pointer; font-weight: 700; z-index: 1001; }

/* --- CONTAINERS --- */
/* Le padding-top a été réduit à 80px (au lieu de 150px) pour coller l'image Release au texte */
.page-container { min-height: 100vh; padding: 80px 50px 100px 50px; max-width: 1200px; margin: 0 auto; }
.hero { text-align: center; } /* Centrage uniquement pour la home */
.main-title { font-size: 2.5rem; letter-spacing: 5px; margin-bottom: 10px; text-align: center; }
.subtitle { font-size: 0.8rem; letter-spacing: 3px; opacity: 0.6; margin-bottom: 40px; text-align: center; }
.manifesto { max-width: 700px; margin: 0 auto; font-size: 14px; text-align: justify; }

/* --- ASSETS --- */
.db-logo { width: 300px; height: auto; margin: 0 auto 40px auto; display: block; }
.revox-container { width: 100%; display: flex; justify-content: center; margin-top: 50px; overflow: hidden; }
.revox-video { width: 400px; height: auto; display: block; clip-path: inset(0% 2% 0% 2%); transform: scale(1.05); }

/* --- FORMULAIRE --- */
.contact-form { max-width: 600px; margin: 30px 0; display: flex; flex-direction: column; }
input, textarea { width: 100%; padding: 15px; margin-bottom: 20px; font-family: 'Space Mono'; background: transparent; border: 1px solid; color: inherit; outline: none; }

body.theme-light button { background-color: #000; color: #fff; }
body.theme-dark button { background-color: #fff; color: #000; }
button { padding: 15px 30px; border: none; cursor: pointer; font-family: 'Space Mono'; font-weight: 700; text-transform: uppercase; align-self: flex-start; }

/* --- SERVICES GRID --- */
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px; margin-top: 60px; }
.service-block { border-top: 1px solid; padding-top: 20px; }

/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 768px) {
    .navbar { padding: 20px; }
    .hamburger { display: block; }

    .menu { 
        display: none; position: fixed; top: 0; left: 0; 
        width: 100%; height: 100vh; flex-direction: column; 
        justify-content: center; align-items: center; z-index: 999;
    }
    body.theme-light .menu { background-color: #ffffff; }
    body.theme-dark .menu { background-color: #000000; }

    .menu.active { display: flex; }
    .menu a { margin: 20px 0; font-size: 18px; }
    .lang-selector { margin: 30px 0 0 0; padding: 0; border-left: none; border-top: 1px solid; padding-top: 20px; width: 150px; display: flex; justify-content: center; }

    .page-container { padding: 100px 20px 50px 20px; }
    .main-title { font-size: 1.5rem; }
    .db-logo { width: 180px; }
    .services-grid { grid-template-columns: 1fr; gap: 30px; }
    .revox-video { width: 250px; clip-path: inset(0% 6% 0% 6%); transform: scale(1.15); }
}

/* ==========================================================================
   PAGE RELEASE - ILLUSTRATION PLATINE
   ========================================================================== */
.release-visual {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px; /* Colore l'image près du texte */
    margin-bottom: 60px;
}

.release-illustration {
    width: 100%;
    max-width: 450px;
    height: auto;
    display: block;
    filter: grayscale(1);
    transition: filter 0.3s ease;
}

body.theme-dark .release-illustration {
    filter: invert(1) grayscale(1);
}

/* ==========================================================================
   PAGE ARTISTE - IMAGE & VIDEOS ROBOTS
   ========================================================================== */
.artist-profile {
    display: grid;
    grid-template-columns: 350px 1fr; 
    gap: 60px;
    align-items: start;
    margin-top: 40px;
}

.artist-media {
    width: 350px;
}

.artist-media img.artist-photo {
    width: 100% !important; 
    max-width: 350px !important; 
    height: 350px !important; 
    object-fit: cover !important; 
    object-position: center !important; 
    filter: grayscale(100%);
    border: 1px solid currentColor;
    display: block; 
}

.artist-name {
    font-size: 2.5rem;
    letter-spacing: 5px;
    margin-bottom: 30px;
    font-weight: 700;
    text-transform: uppercase;
}

.artist-bio {
    font-size: 14px;
    text-align: justify;
    line-height: 1.8;
    margin-bottom: 40px;
}

.artist-details {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid currentColor;
    padding-top: 30px;
}

.details-text {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}

.detail-item h3 {
    font-size: 10px;
    letter-spacing: 2px;
    opacity: 0.6;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.social-links a {
    text-decoration: none;
    color: inherit;
    font-weight: 700;
    transition: opacity 0.3s;
}

.social-links a:hover {
    opacity: 0.5;
}

.artist-robot {
    width: 140px !important; 
    height: auto !important;
    border: none !important;
    outline: none !important;
    filter: grayscale(1);
    mix-blend-mode: multiply; 
    margin-left: 20px; 
}

body.theme-dark .artist-robot {
    filter: invert(1) grayscale(1);
    mix-blend-mode: screen;
}

/* RESPONSIVE PAGE ARTISTE */
@media (max-width: 850px) {
    .artist-profile {
        grid-template-columns: 1fr; 
        gap: 30px;
    }
    .artist-media {
        width: 100%; 
        max-width: 280px; 
        margin: 0 auto; 
    }
    .artist-media img.artist-photo {
        max-width: 100% !important; 
        height: 280px !important; 
    }
    .artist-name {
        font-size: 1.8rem;
        text-align: center; 
    }
    .artist-robot {
        width: 80px !important; 
    }
}

/* ==========================================================================
   PAGE CONTACT - ICONS & DROPDOWN
   ========================================================================== */
.contact-socials {
    display: flex;
    flex-direction: row; 
    justify-content: center;
    align-items: center;
    gap: 40px; 
    margin-bottom: 50px;
}

.contact-socials a {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    gap: 10px; 
}

.contact-socials svg {
    width: 28px !important; 
    height: 28px !important; 
    fill: currentColor; 
    transition: opacity 0.3s;
    display: block; 
}

.social-label {
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 700;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.contact-socials a:hover svg,
.contact-socials a:hover .social-label {
    opacity: 0.4;
}

.custom-select-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

.custom-select-wrapper::after {
    content: '▼';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; 
    font-size: 12px;
    color: currentColor;
    opacity: 0.7;
}

select.contact-select {
    width: 100%;
    padding: 15px;
    margin-bottom: 0; 
    font-family: 'Space Mono', monospace;
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    outline: none;
    cursor: pointer;
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
}

body.theme-dark select.contact-select option {
    background-color: #000000;
    color: #ffffff;
}

body.theme-light select.contact-select option {
    background-color: #ffffff;
    color: #000000;
}

/* ==========================================================================
   PAGE SERVICES - ANIMATIONS DE ROBOTS (ALIGNEES ET SANS CADRE)
   ========================================================================== */
.services-animations-container {
    width: 100%;
    display: flex;
    flex-direction: row !important; 
    justify-content: center; 
    align-items: center; 
    gap: 50px; 
    margin-top: 20px; 
    margin-bottom: 40px; 
}

.service-animation {
    width: 70px !important; 
    height: auto !important;
    display: block;
    border: none !important; 
    outline: none !important; 
    box-shadow: none !important; 
    filter: grayscale(1);
    mix-blend-mode: multiply; 
}

body.theme-dark .service-animation {
    filter: invert(1) grayscale(1);
    mix-blend-mode: screen; 
}

@media (max-width: 768px) {
    .services-animations-container {
        gap: 20px !important; 
        margin-top: 10px;
        margin-bottom: 30px;
    }
    
    .service-animation {
        width: 35px !important; 
    }
}