/*.section-bandeau-entete.section-motif::before {background-image: url(/wp-content/uploads/2023/08/qui-sommes-nous-hero.svg); width: 360px; height: 250px; bottom: 0; right: 0px;}*/
.section-bandeau-entete.motif-right-bg  {background-repeat: no-repeat; background-position: right bottom !important; background-size: contain;}

.section-bandeau-entete {background-color: var(--couleur-principale); gap: 30px; position: relative; flex-direction: column; overflow-x: clip;}
.contenu-bandeau-entete {gap: 20px; flex-direction: column; }
.contenu-bandeau-entete h1 {color:var(--couleur-tertiaire)}
.section-bandeau-entete .bloc-right img { object-fit: contain; width: 100%; height: 100%; object-position: left bottom; }

.contenu-bandeau-entete .bloc-left {color: var(--couleur-blanc);}
.p-after {position: relative;}
.p-after::after {content: url(/wp-content/uploads/2023/08/croix-motif.svg); position: absolute; bottom: -45px; right: 0;}




.social-link {margin-top: 20px; flex-wrap: wrap; gap: 20px;}
.social-link  .icon-social {border-radius: 50%; width: 40px; height: 40px; transition: all 250ms ease-in-out;}
.social-link .icon-social:hover {transform: scale(1.1);}

.social-link .icon-social:first-of-type { background-color: var(--couleur-focus);}
.social-link .icon-social:nth-child(2) { background-color: var(--couleur-rouge); }
.social-link .icon-social:last-of-type {  background-color: #B8D0F1;}
.social-link i {color: var(--couleur-blanc);}
@keyframes fadein {
    from { opacity:0; }
    to { opacity:1; }
}
@media screen and (min-width: 768px) {
      .section-bandeau-entete.motif-right-bg.appear .bloc-right img{
        opacity:0;
        animation: fadein 1s forwards;
      }
      
    .contenu-bandeau-entete {flex-direction: row;  max-height: 500px;}
    .contenu-bandeau-entete .bloc-left {width: 45%; margin-left: auto; margin: auto; padding-left: 15px; padding-right: 15px;}
    .contenu-bandeau-entete .bloc-right { width: 55%; flex: none; }
    .section-bandeau-entete.chevauche-section .bloc-left {padding-bottom: 150px;}
    .section-bandeau-entete.chevauche-section .contenu-bandeau-entete::after {display: none;}
    .p-after::after {bottom: -40px; right: -40px;}
}

@media screen and (min-width: 1920px) {
.section-bandeau-entete.motif-right-bg {background-position: right top !important; background-size: 45%;}
.contenu-bandeau-entete {max-height: 600px;}
}