.front-banner {
    display: grid;
    grid-template-columns: 55% 45%; /* On préfère le Grid pour la sémantique */
    min-height: 25rem;
    position: relative;
    background-color: #ffffff;
    margin-bottom: 5rem;
}

.front-banner-image-wrapper {
    flex: 0 0 55%; /* On garde tes proportions */
    position: relative;
    z-index: 1;    
    filter: drop-shadow(6px 0 4px rgba(0, 0, 0, 0.3));
}

.front-banner-image-container {
    width: 100%;
    height: 100%;
    min-height: 320px;
    overflow: hidden;
    /* Ta découpe exacte */
    clip-path: polygon(0 0, 100% 0, calc(100% - 4rem) 100%, 0 100%);
}

.front-banner-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease; /* Petit bonus pour le hover */
}

/* Effet optionnel : zoom léger sur l'image au survol de la bannière */
.front-banner:hover .front-banner-img {
    transform: scale(1.05);
}

.front-banner-content {
    display: flex;
    align-items: flex-end;
    padding: 3rem 2rem 1rem 5rem;
}

.front-title-shadow-container {
    position: absolute;
    top: 3rem;
    left: 55%;
    transform: translateX(-40%);
    z-index: 10;
    filter: drop-shadow(6px 0 4px rgba(0, 0, 0, 0.3));
}

.front-title-wrapper {
    /* On déplace les styles de positionnement sur le parent shadow */
    background-color: #dcdcde;
    clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
    padding: 1.2rem 45px 1.2rem 25px; /* Un peu plus d'air pour le H1 large */
}

.front-title-box h1 {
    font-family: 'Outfit', sans-serif;
    color: #111;
    text-transform: uppercase;
    font-size: clamp(1.8rem, 6vw, 4.2rem); /* On booste un peu le min/ideal */
    font-weight: 900; /* Style Agglo : très gras */
    margin: 0;
    line-height: 1.1;
}