.bloc-banniere { position: relative; overflow: hidden; width: 100%; min-height: 45vh; align-items: center; padding: 2rem;}
.banniere-bg {position: absolute; inset: 0;  background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;}

.banniere-bg--desktop {display: none;}
.banniere-inner { position: relative; z-index: 1;}
.bloc-banniere h1 {margin: 0; color: #fff; text-align: center; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); }

/* Dernière ligne : inline-block pour que le SVG colle sous le texte */
.banniere-last-line {
    display: inline-block;
    position: relative;
}

/* SVG soulignement animé */
.banniere-underline {
    display: block;
    width: 100%;
    margin-top: 4px;
    overflow: visible;
}


.banniere-underline {width: 14rem; margin: 1.5rem auto 0; transform: rotate(355deg); filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.3));} 
/* L'état initial (dasharray/dashoffset) est posé par JS via getTotalLength().
   L'animation est déclenchée dès que la classe .is-ready est ajoutée. */
.banniere-underline.is-ready path,
.banniere-underline.is-ready polyline,
.banniere-underline.is-ready line {
    animation: banniere-draw 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}

@keyframes banniere-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@media (min-width: 768px) {
    .banniere-inner {padding: 2rem;}
}

@media (min-width: 1025px) {
    .home .bloc-banniere h1 {font-size: 10rem; max-width: 80rem;}
    .banniere-bg--mobile {display: none;}
    .banniere-bg--desktop {display: block;}
}

@media (min-width: 1400px) {
    .banniere-inner {padding: 4rem 2rem; max-width: 65%;}
    .bloc-banniere {min-height: 45vh; padding: 0 15rem;}
    .banniere-underline {width: 20rem;}
}