body {
    margin: 0;
background-image: url(icons.png);

}


.entete {
    background-color:rgb(62, 116, 163);
    background-image: url(bandeauL.png), url(bandeauR.png);
    background-repeat: no-repeat;
    background-position-x: left, right;
    background-size: contain;
    height: 80px; 
    display: flex;
    justify-content: center; 
    

}

.bando {
    
    height: 115px;
}

.bando:hover {
    transform: scale(1.1);
    z-index: 100;
}


.main {
border-image-slice: 56 56 56 56;
border-image-width: 50px 50px 50px 50px;
border-image-repeat: stretch stretch;
border-image-source: url(cadre.png);
margin: 20px;
}

.carrou {
    position: absolute;
    top: calc(87px + 5%);
    left: 15% ;
    width: 70%;
    height: 70%;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 2rem;
    
}

.mini {
    width: 22%;  
    margin: 0.5em; 
    box-shadow: 5px 5px 5px rgba(62, 116, 163, 0.322);
    position: relative;
}

.mini:hover {
    transform: scale(1.1);
    z-index: 100;
}

.persos {
    width: 100%;
    height: 88%;
}

.pulpy {
height: 28vw;
max-height: 450px;
position: absolute;
bottom: 20px;
right: 0px;
}

.mark {
    height: 19vw;
    max-height: 300px;
    position: absolute;
    bottom: 0px;
    right: 60px;
    }

.charac3 {
    height: 15vw;
    max-height: 240px;
    position: absolute;
    bottom: 0px;
    right: 170px;
    }

.charac3:hover {
    display: none;
}

.charac4 {
    height: 32vw;
    max-height: 510px;
    position: absolute;
    bottom: 10px;
    left: 10px;
    }

.charac5 {
    height: 26vw;
    max-height: 410px;
    position: absolute;
    bottom: 15px;
    left: 60px;
    }

    .charac6 {
        height: 21vw;
        max-height: 333px;
        position: absolute;
        bottom: 10px;
        left: 190px;
        }
    
    .charac7 {
        height: 17vw;
        max-height: 265px;
        position: absolute;
        bottom: 6px;
        left: 20px;
        }