/* --- GRILLE MASONRY (ORDRE CHRONO + SANS TROUS) --- */
.masonry-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 30px;
    row-gap: 0; /* Important : le JS va gérer l'espace vertical */
    grid-auto-rows: 1px; /* La magie : on découpe la grille en tranches de 1 pixel */
    align-items: start;
    width: 100%;
}

.masonry-item {
    width: 100%;
    /* La hauteur sera injectée dynamiquement par le script */
}

.art-card {
    background: #ffffff !important;
    color: #000000 !important;
    border: 4px solid black;
    box-shadow: 10px 10px 0px #000;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.art-card:hover {
    transform: translate(-5px, -5px);
    box-shadow: 15px 15px 0px var(--comedia-pink);
}

.art-card img {
    width: 100%;
    height: auto; /* Photo ENTIÈRE (Format Portrait respecté) */
    display: block;
    max-height: none;
    border-bottom: 4px solid black;
}

.no-photo {
    padding: 50px 20px;
    background: #f8f8f8;
    color: #ccc;
    text-align: center;
    border-bottom: 4px solid black;
}

.art-body { padding: 30px; }

.art-body h2 {
    font-family: 'Oswald';
    text-transform: uppercase;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.art-content-text {
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    text-align: justify;
    white-space: pre-line; /* Plein texte sans coupure */
}

.art-meta {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 2px solid #000;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--comedia-pink);
    display: flex;
    justify-content: space-between;
}

.btn-back {
    background: white; color: black; border: 3px solid black;
    padding: 15px 40px; font-weight: 900; text-transform: uppercase;
    text-decoration: none; box-shadow: 5px 5px 0px var(--comedia-pink);
    display: inline-block; transition: 0.2s;
}
.btn-back:hover { background: black; color: white; transform: translate(-3px, 3px); }
.hero-title {transform: scale(0.9);}
/* --- RESPONSIVE 3 -> 2 -> 1 --- */
/* --- RESPONSIVE 3 -> 2 -> 1 --- */
/* --- RESPONSIVE 3 -> 2 -> 1 --- */
@media (max-width: 1200px) {
    /* Le navigateur passe sur 2 colonnes, toujours de gauche à droite */
    .masonry-row { 
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* --- ADAPTATION TABLETTE ET MOBILE (< 900px) --- */
@media (max-width: 900px) {
    .hero-title { 
        padding: 20px; 
        transform: none; 
        width: 95%; 
        font-size: 2.2rem; 
    }
    
    .hero-section {
        height: 35vh;
    }
    
    .stage-blur-zone { 
        width: 100%; 
        left: 0; 
        right: 0; 
        margin: 0; 
        padding: 40px 0; 
    }

    /* Le navigateur passe sur 1 seule colonne centrale */
    .masonry-row { 
        grid-template-columns: 1fr; 
        max-width: 600px; 
        margin: 0 auto; 
    }
}



/* --- OPTIMISATION PETITS MOBILES (< 500px) --- */
@media (max-width: 500px) {
    .hero-title { font-size: 1.6rem; padding: 15px; }
    .art-body { padding: 20px; }
    .art-body h2 { font-size: 1.5rem; }
}