/* =========================================
   1. STRUCTURE & HEADERS (CORE)
   ========================================= */
.section-header-row {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 60px; padding-bottom: 20px; border-bottom: 1px solid #1a1a1a; padding-top: 2vh;
}
.header-left { max-width: 50%; }
.header-right { max-width: 40%; text-align: right; }
.header-right p { color: #999; font-size: 1.1rem; line-height: 1.6; margin-bottom: 15px; }

.section-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 5px;
    color: var(--accent, #fff); display: block; margin-bottom: 25px; font-weight: 800;
}
.link-arrow { color: var(--accent, #fff); text-transform: uppercase; font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; }
.link-arrow:hover { color: #fff; padding-right: 10px; }

/* =========================================
   2. GRID PORTFOLIO PREMIUM
   ========================================= */
.project-grid, .gallery-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap, 10px); padding-bottom: 80px;
}
.project-item { aspect-ratio: 4/5; background: #111; position: relative; overflow: hidden; }
.project-item img { width: 100%; height: 100%; transition: 0.6s ease; opacity: 0.85; object-fit: cover; }
.project-item:hover img { transform: scale(1.05); opacity: 0.5; }

.project-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 20px; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    opacity: 0; transition: 0.3s ease;
}
.project-item:hover .project-overlay { opacity: 1; }

.cat-tag {
    font-size: 9px; text-transform: uppercase; color: var(--accent, #fff);
    letter-spacing: 2px; margin-bottom: 10px; display: block; opacity: 0; transform: translateY(10px); transition: 0.4s ease;
}
.project-item:hover .cat-tag { opacity: 1; transform: translateY(0); }

/* =========================================
   3. HERO STYLE MATTHEW KLEIN (MKL)
   ========================================= */
.hero-mkl {
    position: relative;
    height: 100vh;
    background: #000;
    overflow: hidden;
}

.mkl-grid {
    display: flex; gap: 15px; height: 100%;
    opacity: 0.5; width: 110%; margin-left: -5%;
    transform: rotate(2deg);
}

.mkl-col { flex: 1; height: 100%; }

.mkl-scroll {
    display: flex; flex-direction: column; gap: 15px;
    animation: mkl-scroll-down 60s linear infinite; 
    will-change: transform;
}

/* Animations Scroll */
.mkl-col-1 .mkl-scroll { animation: mkl-scroll-up 50s linear infinite; }
.mkl-col-2 .mkl-scroll { animation: mkl-scroll-down 70s linear infinite; }

@keyframes mkl-scroll-down {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

@keyframes mkl-scroll-up {
    0% { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

.mkl-item {
    flex: 0 0 auto; height: 35vh;
    background-size: cover; background-position: center;
    border-radius: 6px; background-color: #111;
}

/* Texte Hero */
.hero-content-mkl {
    position: absolute; inset: 0; z-index: 10;
    display: flex; flex-direction: column; justify-content: center;
    padding-left: 10%; pointer-events: none;
}

.mkl-title {
    font-size: clamp(3rem, 8vw, 7rem); font-weight: 900; line-height: 0.9;
    color: #fff; text-transform: uppercase; mix-blend-mode: overlay;
}

.mkl-subtitle {
    color: #fff; font-size: 1.2rem; letter-spacing: 5px;
    text-transform: uppercase; margin-top: 20px; font-weight: 300;
}

/* =========================================
   4. INSTAGRAM SIMPLIFIÉ (HEADER + GRID 4/5)
   ========================================= */

/* --- 1. CONTENEUR GLOBAL --- */
.instagram-wrapper, .simple-insta-header {
    width: 100%;
    max-width: 750px; /* Largeur compacte */
    margin: 0 auto; /* Centrage */
}

/* --- 2. HEADER SIMPLIFIÉ --- */
.simple-insta-header {
    background-color: #000;
    border: 1px solid #1a1a1a;
    border-bottom: none; /* Collé à la grille */
    border-radius: 20px 20px 0 0; /* Arrondi haut */
    padding: 25px;
    display: flex;
    justify-content: center; /* Tout centrer */
}

.sih-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Photo Ronde */
.sih-pp {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid #222;
    object-fit: cover;
}

.sih-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Nom d'utilisateur */
.sih-username {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1;
}

/* Bouton S'abonner Rouge */
.sih-btn {
    background-color: #E03E3E;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 18px;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    transition: opacity 0.2s;
}
.sih-btn:hover { opacity: 0.9; color: #fff; }


/* --- 3. GRILLE SMASH BALLOON --- */
#sb_instagram {
    background-color: #000000 !important;
    padding: 20px 25px 30px 25px !important;
    width: 100% !important; 
    max-width: 750px !important; /* Force la largeur */
    margin: 0 auto !important;
    
    border-radius: 0 0 20px 20px !important; /* Arrondi bas */
    border: 1px solid #1a1a1a !important;
    border-top: none !important; /* Collé au header */
    box-sizing: border-box !important;
}

/* Grille 3 colonnes */
#sb_instagram #sbi_images {
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
}

#sb_instagram .sbi_item { margin: 0 !important; width: 100% !important; }

/* Images 4/5 Strict */
#sb_instagram .sbi_photo {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 8px !important;
    border: 1px solid #1a1a1a !important;
    display: block !important;
}
#sb_instagram .sbi_photo:hover { filter: brightness(1.1); border-color: #333 !important; }

/* SUPPRESSION SECURITE (Si le shortcode ne suffit pas) */
#sb_instagram .sbi_load_btn, 
#sb_instagram .sbi_follow_btn, 
#sb_instagram .sbi_header {
    display: none !important;
}

/* --- 4. MOBILE --- */
@media (max-width: 768px) {
    #sb_instagram #sbi_images {
        gap: 8px !important; /* Espace réduit sur mobile */
    }
    
    .simple-insta-header { padding: 20px; }
}
/* =========================================
   5. RESPONSIVE GLOBAL
   ========================================= */
@media (max-width: 768px) {
    /* Layout */
    .section-header-row { flex-direction: column; align-items: flex-start; gap: 30px; }
    .header-left, .header-right { max-width: 100%; text-align: left; }
    
    /* Portfolio Grid Mobile */
    .project-grid, .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 2px; padding: 0 2px 60px; }
    .project-overlay { opacity: 1; padding: 10px; } 

    /* Instagram Mobile */
    #sb_instagram { 
        max-width: 95% !important; /* Sur mobile on reprend la largeur */
        padding: 15px !important; 
    }
    #sb_instagram #sbi_images { 
        grid-template-columns: repeat(2, 1fr) !important; /* 2 colonnes Mobile */
        gap: 8px !important; 
    }
    #sb_instagram .sbi_photo { border-radius: 8px !important; }
    #sb_instagram .sbi_header { flex-direction: column; text-align: center; }
    #sb_instagram .sbi_header_img { margin: 0 auto 10px auto !important; }
}