/* Grille du hero, reprise du <style> de index.html. */
.hero-top-row {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}
.hero-headline {
    flex: 2 1 0%;
    min-width: 0;
}
.hero-card-1 {
    flex: 3 1 0%;
    min-width: 0;
    min-height: clamp(18.5rem, 39vw, 22rem);
}
.hero-bento-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: 132px 132px;
    gap: 1rem;
}
.hero-card-2 { grid-column: span 2; }
.hero-card-3 { grid-column: span 2; }
.hero-card-4 { grid-column: span 2; }
.hero-card-5 { grid-column: span 3; }
.hero-card-6 { grid-column: span 3; }

@media (max-width: 1024px) {
    .hero-top-row {
        flex-direction: column;
    }
    .hero-headline,
    .hero-card-1 {
        flex: none;
    }
    .hero-bento-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
    }
    .hero-card-1 { min-height: 20rem; }
    .hero-card-2, .hero-card-3, .hero-card-4,
    .hero-card-5, .hero-card-6 { grid-column: span 1; }
}
@media (max-width: 640px) {
    .hero-card-1 {
        min-height: 17rem;
    }
    .hero-bento-grid {
        grid-template-columns: 1fr;
    }
    .hero-card-2, .hero-card-3, .hero-card-4,
    .hero-card-5, .hero-card-6 { grid-column: auto; }
}