*{
    margin: 0 auto;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    max-width: 1080px;

}
ul{
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-decoration: none;
    list-style: none;
    
}

a{
    color: black;

    font-size: 30px;
}
a:hover{
    color: rgb(255, 255, 255);
}

nav{
    background-color: rgb(255, 0, 0);
    padding: 20px;
}

footer{
    background-color: rgb(255, 0, 0);
    padding: 20px;
}

.footerp{
    display: flex;
    justify-content: space-between;
}
.fond{
    display: flex;
    justify-content:center;
    height: 500px;

}


.duo{
    display: flex;
    padding: 10px;
    height: 500px;
}
.titre{
    display: flex;
    justify-content: center;
    background-color: rgb(255, 255, 255);
    margin: 10px;
}

p{
    display: flex;
    font-size: 25px;
   
    
}

.divp{
    background-color: rgb(173, 187, 255);
    padding: 30px;
    margin: 20px;
    border-radius: 20px;
}

header img{
    height: 60px;
    padding-right: 10px;
}
.objet{
    display: flex;
    width: 100%;
    gap: 10px;
}
.gadget{
    display: flex;
    height: 200px;
    padding-left: 20px;
    padding-bottom: 20px;

}

.grandgadget{
    display: flex;
    flex-direction: row;
}

.gadget p{
    display: none;
    margin-left: 20px;
    align-content: center;
}
.gadget:hover p{
    display: block;
}


.grandskate{
    display: flex;
    flex-direction: row;
}

.skate p{
    display: none;
    margin-left: 20px;
    align-content: center;
}
.skate:hover p{
    display: block;
}

.skate{
    display: flex;
    height: 200px;
    padding-left: 20px;
    padding-bottom: 20px;

}

.grandfoot{
    display: flex;
    flex-direction: row;
}

.gadgetfoot{
    display: flex;
    height: 200px;
    padding-left: 20px;
    padding-bottom: 20px;

}
.gadgetfoot p{
    display: none;
    margin-left: 20px;
    align-content: center;
}
.gadgetfoot:hover p{
    display: block;
}

.grandtalkie{
    display: flex;
    flex-direction: row;
}

.talkie{
    display: flex;
    height: 200px;
    padding-left: 20px;
    padding-bottom: 20px;

}
.talkie p{
    display: none;
    margin-left: 20px;
    align-content: center;
}
.talkie:hover p{
    display: block;
}

.personnage{
    display: flex;
    width: 100%;
    gap: 10px;
}
.protagoniste{
    display: flex;
    height: 200px;
    padding-left: 20px;
    padding-bottom: 60px;
    
}

.grandprotagoniste{
    display: flex;
    flex-direction: row;
    
}

.protagoniste p {
    display: none;
    margin-left: 20px;
    align-content: center;
}
 
.protagoniste:hover p{
    display: block;
    
}

.ami{
    display: flex;
    height: 200px;
    padding-left: 20px;
    padding-bottom: 170px;
}

.grandami{
    display: flex;
    flex-direction: row;

}


.ami p{
    display: none;
    margin-left: 20px;
    align-content: center;
} 

.ami:hover p{
    display: block;
}

.autreami{
    display: flex;
    height: 200px;
    padding-left: 20px;
    padding-bottom: 20px;

}

.grandautreami{
    display: flex;
    flex-direction: row;
}

.autreami p{
    display: none;
    margin-left: 20px;
    align-content: center;
}
.autreami:hover p{
    display: block;
}
.granddetectiveboys{
    display: flex;
    flex-direction: row;
}
.grandefamille{
    display: flex;
    flex-direction: row;
}
.famille{
    display: flex;
    height: 200px;
    padding-left: 20px;
    padding-bottom: 60px;
}
.famille p{
    display: none;
    margin-left: 20px;
    align-content: center;
}

.famille:hover p{
    display: block;
}


.detectiveboys{
    display: flex;
    height: 200px;
    padding-left: 20px;
    padding-bottom: 10px;
    
}

.detectiveboys p{
    display: none;
    margin-left: 20px;
    align-content: center;
}

.detectiveboys:hover p{
    display: block;
}
.police{
    display: flex;
    height: 200px;
    padding-left: 20px;
    padding-bottom: 20px;

}

.grandpolice{
    display: flex;
    flex-direction: row;
}

.police p{
    display: none;
    margin-left: 20px;
    align-content: center;
}
.police:hover p{
    display: block;
}
.fbi{
    display: flex;
    height: 200px;
    padding-left: 20px;
    padding-bottom: 20px;

}

.grandfbi{
    display: flex;
    flex-direction: row;
}

.fbi p{
    display: none;
    margin-left: 20px;
    align-content: center;
}
.fbi:hover p{
    display: block;
}
.autrepolice{
    display: flex;
    height: 200px;
    padding-left: 20px;
    padding-bottom: 20px;

}

.grandautrepolice{
    display: flex;
    flex-direction: row;
}

.autrepolice p{
    display: none;
    margin-left: 20px;
    align-content: center;
}
.autrepolice:hover p{
    display: block;
}

.cia{
    display: flex;
    height: 200px;
    padding-left: 20px;
    padding-bottom: 20px;
}

.grandcia{
    display: flex;
    flex-direction: row;

}


.cia p{
    display: none;
    margin-left: 20px;
    align-content: center;
} 

.cia:hover p{
    display: block;
}

.boss{
    display: flex;
    height: 200px;
    padding-left: 20px;
    padding-bottom: 20px;
}

.grandboss{
    display: flex;
    flex-direction: row;

}


.boss p{
    display: none;
    margin-left: 20px;
    align-content: center;
} 

.boss:hover p{
    display: block;
}

.haut{
    display: flex;
    height: 200px;
    padding-left: 20px;
    padding-bottom: 20px;
}

.grandhaut{
    display: flex;
    flex-direction: row;

}


.haut p{
    display: none;
    margin-left: 20px;
    align-content: center;
} 

.haut:hover p{
    display: block;
}

.membre{
    display: flex;
    height: 200px;
    padding-left: 20px;
    padding-bottom: 20px;
}

.autremembre{
    display: flex;
    flex-direction: row;

}


.membre p{
    display: none;
    margin-left: 20px;
    align-content: center;
} 

.membre:hover p{
    display: block;
}

.envoi{
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 442px;
}
.blocenvoi{
    background-color: rgb(213, 220, 255);
    border-radius: 30px;
}
form #contenu .bouton  input{
    justify-content: center;
    background-color: rgb(173, 187, 255);
    box-shadow: 10px;
    border-radius:10px;
}
#plan #espace form input{
    background-color: rgb(173, 187, 255);
    box-shadow: 10px;
    border-radius:10px;
}


.contactconan{
    display: flex;
    justify-content:center;
    height: 500px;
    padding-top: 30px;
    padding-bottom: 30px;


}

form{
    justify-content: center;
    display: flex;
    padding-top: 30px;
    
    
}


form #contenu .email{
    display: block;
    box-sizing: border-box;
    padding-top: 10px;
    
}

form #contenu .message{
    display:block;
    box-sizing: border-box;
    padding-top: 10px;
}

form #en-tête{
    display: flex;
    flex-direction: row;
    gap: 10px;
    
    
}

#forme{
    display: flex;
    flex-wrap: wrap;
    width:1000px;
    justify-content: space-between;
    
    
    
}


#forme img{
    width:215px;
    object-fit: cover;
    padding:10px;
    padding-top: 20px;
    filter: grayscale(100%);
}

#forme img:hover{
    width:215px;
    object-fit: cover;
    padding:10px;
    padding-top: 30px;
    filter: grayscale(0);
}


table {
    background-color: rgb(213, 220, 255);
}
  
thead th:nth-child(1) {
    background-color: rgb(213, 220, 255);
}

.kaitotitre{
    display: flex;
    justify-content: center;
    background-color:  rgb(173, 187, 255);
    border-radius: 20px;
    font-size: 30px;
    margin: 10px;
}

.kaito{
    display: flex;
    justify-content:center;
    border-radius: 20px;
}

.kid{
    display: flex;
    justify-content:center;
    border-radius: 20px;

}
/* PARTENAIRES --------------------------------------------------------- */


.part-content {
    padding: 50px;
}

.part-content h1 {
    margin-bottom: 30px;
}

.part-pers-g, .part-pers-d {
    border-radius: 23px;
    display: flex;
    margin-bottom: 50px;
    background-color: rgb(134, 154, 253);
    box-shadow: 0 4px 15px rgb(136, 137, 139);
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.part-pers-g:hover, .part-pers-d:hover {
    transform: scale(1.05);
}

.part-pers-g img {
    width: 250px;
    object-fit: cover;  
    border-bottom-left-radius: 23px;
    border-top-left-radius: 23px;
}

.part-pers-d img {
    width: 250px;
    object-fit: cover;  
    border-bottom-right-radius: 23px;
    border-top-right-radius: 23px;
}

.part-pers-g .part-text, .part-pers-d .part-text {
    width: 100%;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.part-pers-d .part-text {
    align-items: flex-end;
}

.part-text {
    text-align: justify ;
}

.part-text button { 
    padding: 12px 20px;
    font-size: 16px;
    color: white;
    background-color: #c81616;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.part-text button:hover { 
    background-color: #981212;
}

.part-nom {
    font-size: 25px;
    font-weight: bold;
}

.part-desc {
    font-weight: 300;
    margin-bottom: 10px;
}

.desc-groupe {
    margin-bottom: 50px;
    font-size: 16px;
    font-weight: 300;
}

.part-button-1{
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.part-button-2{
    display: flex;
    flex-direction: column; 
    align-items: center;
}

.part-button-2 p {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 18px;
}

.part-button-2 button {
    padding: 12px 20px;
    font-size: 16px;
    color: white;
    background-color: #c81616;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.part-button-2 button:hover { 
    background-color: #981212;
}

.img-margaux, .img-lauren, .img-enzo, .img-charlotte {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.2;
    pointer-events: none;
}

.img-margaux{
    background-image: url("../images/pfp/soccer.png");
    transform: rotate(336deg);
    width: 400px;
    height: 400px;
    bottom: -78px;
    right: -63px;
}
.img-lauren{
    background-image: url("../images/pfp/alnst_logo1.png");
    transform: rotate(25deg);
    width: 600px;
    height: 600px;
    bottom: -159px;
    right: 566px;
}
.img-enzo{
    background-image: url("../images/pfp/nerv.png");
    transform: rotate(336deg);
    width: 400px;
    height: 400px;
    bottom: -70px;
    right: -50px;
}
.img-charlotte{
    background-image: url("../images/pfp/conanlogo.png");
    transform: rotate(35deg);
    width: 600px;
    height: 600px;
    bottom: -188px;
    right: 546px;
}