@font-face
{
    font-family : "Panthera" ;
    src : url("polices/PantheraRegular-MVZ9J.ttf") ;
}

@font-face
{
    font-family : "Beyno" ;
    src : url("polices/BEYNO.otf") format("otf") , url("polices/BEYNO.ttf") format("truetype") ;
}

@font-face
{
    font-family : "Wakanda forever" ;
    src : url("polices/WakandaForever-Regular.ttf") ;
}

@font-face
{
    font-family : "Cantarell" ;
    src : url("polices/Cantarell-Regular.ttf") ;
}

html
{
    scroll-behavior : smooth ;
}

h1
{
    font-family : "Panthera" ;
    font-size : 68px ;
    font-weight : 400 ;
    color : #9E91B7 ;
}

h2
{
    font-family : "Beyno" ;
    font-size : 32px ;
    font-weight : 400 ;
    color : #9E91B7 ;
}

*
{
    margin : 0 ;
    padding : 0 ;
}

body
{
    background : url("Illustrations_Logo/All_pages/arrière_plan.png") no-repeat ;
    color : white ;
    font-family : "Cantarell" ;
    font-weight : 400 ;
    font-size : 16px ;
}


/* ************************************************ HEADER ************************************************ */


header
{
    /* border : 1px solid orange ; */
    display : flex ;
    justify-content : space-between ;
    align-items : center ;
    width : 85% ;
    margin : 1% auto ;
}

nav
{
    /* border : 1px solid red ; */
    width : 35% ;
}

nav ul
{
    /* border : 1px solid green ; */
    display : flex ;
    justify-content : space-between ;
    flex-wrap : wrap ;
}

nav ul li
{
    list-style-type : none ;
}

nav ul li a
{
    color : white ; 
    text-decoration : none ;
    font-family : "Beyno" ;
}


/* ************************************************* LOGO FIXE ******************************************** */

#logo_fixe
{
    /* border : 1px solid darkgoldenrod ; */
    width : 7% ;
    height : 70% ;
    display : flex ;
    justify-content : center ;
    position : fixed ;
    top : 0 ;
}

#logo_fixe a
{
    text-decoration : none ;
}

#trait1
{
    border : 2px solid #9E91B7 ;
    margin-right : 5% ;
    height : 94.5% ;
}

#trait2 #ligne
{
    border : 2px solid #9E91B7 ;
    height : 60% ;
}

#trait2
{
    display : flex ;
    flex-direction : column ;
    align-items : center ;
}

#trait2 #logo_ligne
{
    display : flex ;
    flex-direction : column ;
    justify-content : space-evenly ;
    height : 40% ;
    /* border : 1px solid forestgreen ; */
}


/* ********************************************** HERO HEADER ********************************************* */


#hero_header
{
    height : 85vh ;
    /* width : 73% ; */
    background-image : url("Illustrations_Logo/Accueil/Pantherhome1..png") ;
    background-size : contain ;
    background-repeat : no-repeat ;
    background-position : 620px 50px ;
    margin : -3% auto ;
    border : 1px solid transparent ;
}

#intro
{
    border : 1px solid transparent ;
    width : 55% ;
    margin-top: 12% ;
    margin-left : 11% ;
}

#intro p
{
    width : 60% ;
    text-align : justify ;
    margin : 0 ;
    /* border : 1px solid orchid ; */
}

#intro a
{
    color : white ;
    /* text-decoration : none ; */
}


/* ******************************************** DIAPO ************************************************* */


#diapo
{
    /* border : 1px solid royalblue ; */
    display : flex ;
    /* flex-wrap : wrap ; */
    justify-content : space-between ;
    background-color : #021740 ;
    /* width : 100% ; */
    margin-left : 5% ;
}

#diapo div
{
    /* border : 1px solid firebrick ; */
    width : 18vw ;
    height : 40vh ;
}

#diapo img
{
    width : 100% ;
    height : 100% ;
}

#diapo .texte_diapo 
{
   width : 30vw ;
}

#diapo .texte_diapo h2
{
    margin-bottom : 0 ;
}

#diapo .texte_diapo h2
{
    padding : 10% 8% 0 8% ;
}

#diapo .texte_diapo p
{
    text-align : justify ;
    padding : 0 8% 10% 8% ;
    font-size : 14px ;
}

#div_decale
{
    margin-left : 1% ;
}

#diapo a
{
    color : white ;
}


/* ************************************************* MAIN *********************************************** */


#div_principale
{
    display : flex ; 
    /* flex-wrap : wrap ; */
    justify-content : space-between ;
    width : 85% ;
    margin : auto ;
    /* border : 1px solid #9E91B7 ; */
}

#div_principale #div1
{
    /* border : 1px solid red ; */
    width : 60% ;
    text-align : justify ;
}

#div_principale #div2
{
    display : flex ;
    flex-direction : column ;
    justify-content : center ;
    align-items : center ;
    width : 30% ;
}

#justicier
{
    margin-top : 170% ;
}

#div_principale #div2 aside
{
    display : flex ;
    flex-direction : column ;
    justify-content : space-between ;
    align-items : center ;
}

#div_principale #div2 aside #div_aside
{
    background-color : white ;
    color : black ;
    font-size : 13px ;
    padding : 200px 0 100px 0 ;
    border-radius : 10px ;
    margin-top : -55% ;
    z-index : 1 ;
}

#image_aside
{
    /* border : 1px solid green ; */
    width : 250px ;
    height : 350px ;
}

#image_aside img
{
    width : 100% ;
    height : 100% ;
}

aside figure figcaption
{
    color : black ;
    font-weight : 600 ;
    text-align : center ;
    font-size : 22px ;
}

aside figure
{
    z-index : 2 ;
}

#container_div_aside
{
    width : 90% ;
    margin : auto ;
    line-height : 2 ;
    /* border : 1px solid violet ; */
}

#div_presentation
{
    display : flex ;
    justify-content : space-between ;
    margin-top : 8% ;
}

#div_presentation span 
{
    background-color : #3D2DA6 ;
    color : white ;
    padding : 2% 3% ;
    border-radius : 5px ;
}

aside .bold
{
    font-weight : bold ;
}

/* ************************************************** FORMULAIRE ******************************************* */


#formulaire
{
    background-image : url("Illustrations_Logo/Accueil/Pantherhome7.png") ;
    background-size : cover ;
    background-repeat : no-repeat ;
    height : 100vh ;
}

form
{
    background : linear-gradient(#fff , rgba(255,255,255,0.5) , rgba(255,255,255,0.1)) ;
    border-radius : 150px ;
    display : flex ;
    flex-direction : column ;
    justify-content : space-evenly ;
    align-items : center ;
    width : 55% ;
    height : 88vh ;
    margin : auto ;
    color : black ;
}

.p1_form
{
    margin-top : 5% ;
}

form #nom , form #email
{
    width : 520px ;
    height : 56px ;
    border-radius : 38px ;
    outline : none ;
    border : 1px solid rgba(0, 0, 0, 0.7) ;
    background-color: transparent ;
    padding-left : 40px ;
}

form #bouton_envoyer
{
    /* width : 174px ;
    height : 54px ; */
    border-radius : 38px ;
    border : none ;
    padding : 3% 10% ;
    color : black ;
    background-color : white ;
    /* text-align : center ;
    position : relative ;
    top : 5px ; */
    cursor : pointer ;
}

form textarea
{
    width : 480px ;
    height : 150px ;
    border-radius : 38px ;
    outline : none ;
    border : 1px solid rgba(0, 0, 0, 0.7) ;
    background-color: transparent ;
    resize : none ;
    padding : 20px 40px ;
}

#contactez_nous
{
    font-weight : bold ;
    font-size : 2em ;
}


/* ************************************************ FOOTER ********************************************** */


footer
{
    background-image : url("Illustrations_Logo/All_pages/back_footer.png") ;
    background-repeat : no-repeat ;
    display : flex ;
    justify-content : space-evenly ; 
    align-items : center ;
    height : 600px ;
}

footer #div_texte
{
    /* border : 1px solid red ; */
    /* margin-top : -13% ; */
    display : flex ;
    flex-direction : column ;
    /* align-items : center ; */
}

footer #logo_texte
{
    /* border : 1px solid palegoldenrod ; */
    display : flex ;
    justify-content : space-between ;
}

footer #logo_footer
{
    position : absolute ;
    /* bottom : 5% ; */
    left : 18% ;
    margin-top : 11% ;
}

#logo_texte
{
    display : flex ;
    flex-direction : column ;
    justify-content : space-between ;
    align-items : center ;
    height : 120px ;
    width : 600px ;
    /* border : 1px solid saddlebrown ; */
}

#div_title
{
    display : flex ;
    justify-content : space-between ;
    text-transform : uppercase ;
    width : 100% ;
    font-size : 22px ;
    /* border : 1px solid green ; */
}

#div_title h3
{
    letter-spacing : 1.2px ;
}

#reseaux_sociaux_2
{
    display : flex ;
    justify-content : space-between ;
    align-items : center ;
    width : 100% ;
}

.liens
{
    display : flex ;
    flex-direction : column ;
}

.image_reseaux_sociaux_2
{
    display : flex ;
    justify-content : space-between ;
    width : 45% ;
}

#copyright
{
    margin-top : 20% ;
    font-size : 10px ;
}

footer a
{
    text-decoration : none ;
}

.liens a
{
    color : white ;
}


/* *********************************************** ANIMATIONS ******************************************* */

.accueil 
{
    text-decoration : underline ;
    color : #9E91B7 ;
}

.wakanda:hover , .enigme:hover
{
    text-decoration : underline ;
}

#bouton_envoyer
{
    -webkit-transition : box-shadow 1s ;
    -moz-transition : box-shadow 1s ;
    -o-transition : box-shadow 1s ;
    transition : box-shadow 1s ;
}

#bouton_envoyer:hover
{
    box-shadow : 0 0 20px #021740 ;
}

#logo_ligne a:hover
{
    filter : brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(273deg) brightness(103%) contrast(103%);
}

#logo_header:hover
{
    filter : brightness(0) saturate(100%) invert(64%) sepia(4%) saturate(2115%) hue-rotate(219deg) brightness(92%) contrast(94%) ;
}

#cercles:hover + a , #cercles:hover
{
    -webkit-transition : transform 1s ease-in-out ;
    -moz-transition : transform 1s ease-in-out ;
    -o-transition : transform 1s ease-in-out ;
    transition : transform 1s ease-in-out ;
}

#cercles:hover + a , #cercles:hover 
{
    transform : scale(1.1) ;
} 

.image_reseaux_sociaux_2 a:hover
{
    transform : scale(1.1) ;
}

*
{
    animation : fadein 2s ;
}

@keyframes fadein
{
    0%{
        opacity : 0 ;
        transform : translateX(-20px) ;
    }

    100%{
        opacity : 1 ;
    }
}

.liens a:hover
{
    text-decoration : underline ;
}

#popup
{
    Background : radial-gradient(126.67% 350.28% at -21.35% 0%,#11213F 0%, #0B0B0B 39.1%, rgba(2, 23, 64, 0.837641) 94.57%,rgba(2, 23, 64, 0) 100%) ;
    width : 40% ;
    height : 200px ;
    display : flex ;
    justify-content : center ;
    align-items: center ;
    margin : auto ;
    position : relative ;
    top : -20% ;
    visibility : hidden ;
}

.content p
{
    text-align : center ;
}

a{
    text-decoration : none ;
}

.btn
{
    color : white ;
    font-size : 2em ;
    
}

.div_btn:hover
{
    background-color : red ;
}

.div_btn
{
    position : relative ;
    bottom  : 15vh ;
    left : 130% ;
    height : 1.8em ;
    width : 2em ;
    display : flex ;
    justify-content : center ;
    align-items: center ;
}

#popup:target
{
    visibility : visible ;
}