/* 1. VARIABLES DE COULEURS (MODE CLAIR PAR DÉFAUT) */
:root { 
    --text-main: #1a1a1a;
    --text-concept: #333333;
    --text-bio: #444444;
    --text-divider: #bbbbbb;
    --border-divider: #eeeeee;
    --bg-photo: #eeeeee;
    --img-invert: invert(0); /* Par défaut : pas d'inversion */
}

/* 2. VARIABLES POUR LE MODE SOMBRE */
@media (prefers-color-scheme: dark) {
    :root {
        --text-main: #f5f5f5;
        --text-concept: #e0e0e0;
        --text-bio: #cccccc;
        --text-divider: #777777;
        --border-divider: #333333;
        --bg-photo: #2a2a2a;
        --img-invert: invert(1); /* Mode sombre : inverse le logo noir en blanc */
    }
}

/* 3. APPLICATION DES VARIABLES AU CSS */
html { scroll-behavior: smooth; }
.entry-title, .page-title, .post-title, .elementor-page-title { display: none !important; }

.apropos-v3-container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; color: var(--text-main); font-family: sans-serif; }

/* Protection de l'italique contre les thèmes trop stricts */
.apropos-v3-container em, .apropos-v3-container i { font-style: italic !important; }

.header-split { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; margin-bottom: 80px; align-items: start; }

.spec-title { 
    font-size: clamp(35px, 6vw, 75px); 
    font-weight: 900; 
    text-transform: uppercase; 
    line-height: 0.85; 
    margin: 0; 
    letter-spacing: 0px; 
    color: var(--text-main);
}

.img-main-wrapper { width: 100%; aspect-ratio: 1 / 1; overflow: visible; display: flex; align-items: center; justify-content: center; position: relative; }

.img-main-wrapper img, .img-main-wrapper video { 
    max-width: 100%; max-height: 100%; object-fit: contain; 
    filter: var(--img-invert); 
    border: none !important; 
    outline: none !important; 
    background: transparent !important;
    box-shadow: none !important;
    /* Ces deux lignes forcent un rendu propre sans "trait noir" sur mobile */
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0);
}

.spec-divider { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; border-bottom: 2px solid var(--border-divider); padding-bottom: 10px; margin-bottom: 40px; display: block; color: var(--text-divider); }

.membre-row { display: grid; grid-template-columns: 280px 1fr; gap: 60px; margin-bottom: 120px; scroll-margin-top: 120px; }

/* NOMS DES ARTISTES — Canon Grotesque, plus grand */
.membre-nom {
    font-family: var(--font-titre, "Canon Grotesque", sans-serif) !important;
    font-size: clamp(38px, 4.5vw, 58px);
    font-weight: 900;
    text-transform: uppercase;
    margin: 0 0 20px 0;
    letter-spacing: 0px;
    line-height: 1;
    color: var(--text-main);
}

.membre-photo-frame { width: 280px; height: 380px; overflow: hidden; background: var(--bg-photo); }
.membre-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.concept-block { 
    margin: 100px 0; padding: 60px; 
    background: rgba(128, 128, 128, 0.05); 
    border-left: 8px solid var(--text-divider); 
}

.video-container-impolie { 
    position: relative; width: 100%; max-width: 500px; aspect-ratio: 16 / 9; 
    margin-top: 30px; background: #000; 
}
.video-container-impolie iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 900px) { 
    .apropos-v3-container { padding: 40px 10px !important; margin-top: 80px !important; }

    .header-split, .membre-row { grid-template-columns: 1fr; gap: 40px; } 
    .membre-photo-frame { margin: 0 auto; }
    .concept-block { padding: 30px; }
    .spec-title { letter-spacing: 0px; }
}