@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Edu+QLD+Beginner:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Domine:wght@400..700&family=Edu+QLD+Beginner:wght@400..700&display=swap');


*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body
{
    background-color: beige;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.container
{
    z-index: 99;
    margin: 0 auto;
    max-width: 1160px;
    background-color: #fff;
    
    position: relative;

}
.container .header
{
    height: auto;
    position: relative;
}
.header .entete
{
    background-color: rgba(137, 10, 10, 0.8);
    height: auto;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}



/* debut liste deroulante */


.entete .logo 
{
   text-decoration: none;
   background-color: #fff;
   padding: 0px 10px;
   box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.4);
   border-radius: 8px;  
}

.logo ul::after
{
    content: "";
    display: table;
    clear: both;
}

.logo ul li
{
    list-style-type: none;

}

.logo ul a
{
    display: block;
    text-decoration: none;
    color: black;
    border-bottom: 2px solid transparent;
    padding: 6px 0;
    
}

.logo i.fas
{
    position: relative;
    margin-right: 10px;
}

/* .logo ul a:hover
{
    color: orange;
   border-bottom: 2px solid gold;

} */


.logo .sous
{
    display: none;
    box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.5);
    color: #000;
    position: absolute;
    width: 15%;
    z-index: 1;
    background-color: #fff;
}

.logo .sous li a
{
    color: #fff;
    border-bottom: 2px solid gold;
    background-color: rgba(108, 95, 234, 0.7);
    padding: 5px;
}

.logo .sous li a:hover
{
    color: #fff;
    border-bottom: 2px solid gold;
    background-color:#31344b;
    padding: 5px;
}

.logo > ul li:hover .sous
{
  display: block;
}
.logo li
{
    float: none;
    width: 100%;
    text-align: left;
}

/* .sous a:hover
{
    border-bottom: none;
    background-color: rgba(200, 200, 200, 1);
} */

.deroulant > a::after
{
    content: "▼";
    font-size: 12px;
    position: relative;
    margin-left: 8px;
}
/* .entete .logo a
{
   text-decoration: none;
   background-color: #fff;
   padding: 8px;
   box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.4);
   border-radius: 8px;  
}

.entete .logo a i
{
    position: relative;
    margin-right: 12px;
    padding: 6px;
    text-align: center;
    border-radius: 50px;
}

.entete .logo a:hover
{ 
   color: #fff; 
   background-color:#31344b; 
   
}

.logo ul.megamenu
{
    display: none;
} */


/* fin liste deroulante */

.header .entete .reseau_sociaux
{
  height: auto;
  position: relative;
  margin: 2px;
  
}
.reseau_sociaux ul a
{
   text-decoration: none;
   display: inline-block;
   border: 2px solid #fff;
   /* padding: 6px; */
   margin-left: 8px;
   color: #fff;
   border-radius: 50%;
   cursor: pointer;
   height: 35px;
   width: 35px;
   border-radius: 50%;
   text-align: center;
   line-height: 40px;
   
}
.reseau_sociaux ul a i
{
   font-size: 20px;
   padding: 6px;
    text-align: center;

}
.reseau_sociaux ul a li
{
   list-style-type: none;
   display: flex;
   align-items: center;
   justify-content: center;

}

.entete .boutonmenu
{
    display: none;
}

#check
{
    display: none;
}

.header .entete .slide_info P
{
   overflow: hidden;
   color: #fff;
   font-family: "Cinzel", serif;
}

.entete .slide_info p.animation-text span
{
    display: inline-block;
    font-size: 20px;
    display: none;

}
.entete .slide_info p.animation-text span
{
    display: inline-block;
    font-size: 20px;
    display: none;
}
.entete .slide_info p.animation-text span.text-in
{
    display: block;
    animation: textIn .5s ease;
}

.entete .slide_info p.animation-text span.text-out
{
    animation: textOut .5s ease;
}

@keyframes textIn
{
    0%{
        transform: translateY(100%);
    }
    100%{
        transform: translateY(0%);
    }
    
}
@keyframes textOut
{
    0%{
        transform: translateY(0%);
    }
    100%{
        transform: translateY(-100%);
    }
    
}


.header .navbar
{
    background-color: rgba(108, 95, 234, 0.7);
}
.navbar 
{
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
   
}


.navbar a
{
  text-decoration: none;
  margin: 2px 6px;
  padding: 8px;
  
  font-family: "Domine", serif;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
}

.navbar a:hover
{
 
  background-color:#31344b;
  border-radius: 10px

}

 .side_bar
{
    display: none;
} 


.container .profil_banner
{
    background-color: #fff;
    height: auto;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    border: 1px solid #ccc;
    border-radius: 15px;
    margin-top: 8px;
    padding-top: 5px;
    



}

.profil_banner .profil img
{
    height: 200px;
    width: 200px;
  border-radius: 50%;
  
}

.profil_banner .profil .description_profil
{
 text-align: center;
 font-family: "Domine", serif;
  
}

p.abonne_video
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    padding: 8px;
    font-weight: 500;
    font-size: 12px;

}

.profil_banner .banner img
{
    height: 260px;
    width: 800px;
    border-radius: 15px;
    box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.5);
}




.container .principale
{
  width: 100%;
  margin-top: 15px;
  background-color: #ccc;
  padding: 15px;
  
}

.container .principale .publication
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

}

.container .principale iframe
{
    height: 250px;
    width: 360px;
    border: 2px solid #ccc;
    border-radius: 25px;
    box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.4);
    margin-bottom: 10px;
    
}
/*responsive */


@media only screen and (max-width: 1040px) 
{

    .profil_banner .banner img
        {
            z-index: 99;
            height: 220px;
            width: 600px;
            
        }


        
       

        .profil_banner .profil img
        {
           position: relative;
            left: 20px;
            height: 150px;
            width: 150px; 
    
        } 
       

       .profil_banner .description_profil
        {
            text-align: center;
        } 
        .abonne_video .video
        {
            padding-left: 20px;
        }
        .logo .sous
        {
            display: none;
            box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.5);
            color: #000;
            position: absolute;
            width: 20%;
            z-index: 999;
            background-color: #fff;
        }

}

@media only screen and (max-width: 850px) 
{

    .profil_banner .banner img
        {
            height: 180px;
            width: 500px;
            
        }

        .profil_banner .profil img
        {
            
            position: relative;
            left: 30px;
            height: 130px;
            width: 130px; 
    
        } 
        .abonne_video .video
        {
            padding-left: 20px;
        }
        .logo .sous
        {
            display: none;
            box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.5);
            color: #000;
            position: absolute;
            width: 20%;
            z-index: 999;
            background-color: #fff;
        }

        /* .profil_banner .description_profil
        {
           
            margin-left: 15px;
            padding: 15px; 
            border: 1px solid #ccc;
            border-radius: 20px;
            box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.4);
    
        } */

}

@media only screen and (max-width: 770px)
{
    .container .principale iframe
    {
        height: 200px;
        width: 300px;
        /* border: 2px solid #ccc;
        border-radius: 25px;
        box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.4);
        margin-bottom: 10px; */
        
    }
    .logo .sous
    {
        display: none;
        box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.5);
        color: #000;
        position: absolute;
        width: 25%;
        z-index: 999;
        background-color: #fff;
    }
}




@media only screen and (max-width: 730px) 
{

    .profil_banner .banner img
        {
            height: 180px;
            width: 380px;
            
        }
        .logo .sous
        {
            display: none;
            box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.5);
            color: #000;
            position: absolute;
            width: 25%;
            z-index: 999;
            background-color: #fff;
        }

        .profil_banner .profil img
        {
            height: 100px;
            width: 100px; 
    
        } 
        .abonne_video .video
        {
            padding-left: 20px;
        }

        /* .profil_banner .description_profil
        {
           
            margin-left: 15px;
            padding: 15px; 
            border: 1px solid #ccc;
            border-radius: 20px;
            box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.4);
    
        } */

}

@media only screen and (max-width: 656px)
{
    .container .principale iframe
    {
        height: 200px;
        width: 300px;
        /* border: 2px solid #ccc;
        border-radius: 25px;
        box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.4);
        margin-bottom: 10px; */
        
    }

    .publication .publier iframe
            {
                
                width: 100%;
                /* border: 2px solid #ccc;
                border-radius: 25px;
                box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.4);
                margin-bottom: 10px; */
                
            }
}




@media only screen and (max-width: 600px) 
{

    .header .entete
        {
            padding: 5px;
        }
    
    .navbar
        {
        display: none;
        }
        .profil_banner

        {
            z-index: 1;
        }

        .logo .sous
        {
            display: none;
            box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.5);
            color: #000;
            position: absolute;
            width: 35%;
            z-index: 999;
            background-color: #fff;
        }

    .header .entete .reseau_sociaux
        {
        display: none;
        }

    .entete .boutonmenu
        {
            position: relative;
            flex: 1;
            display: block;
            top: -32px;
        }
        .boutonmenu label i
        {
            font-size: 20px;
        }
    .container .header
        {
            padding: 0 3px;
        }
        .slide_info p

        {
            position: relative;
            text-align: center;
            left: 15px;
        }

    .entete .slide_info p.animation-text span
        {
            
            font-size: 14px;
            
        }
    .entete .logo img
        {
        
        height: 50px;
        width: 70px;
        
        }

       /*debut responsive navbar  */

       /* .boutonmenu .side_bar
        {
            display: none;
        } */

        .side_bar
        {
            /* position: relative;
            top: 0;
            right: -300%;
            width: 100%;
            height: 100vh;
            background-color:#ccc;
            padding: 12px;
            box-shadow: -3px -3px 7px #fff,
                        3px 3px 5px #ceced1,
                    inset -3px -3px 7px #fff,
                    inset 3px 3px 5px #ceced1;
            transition: right 0.5s ease; */

       z-index: 999;
        position: fixed;
        top: 0px;
        right: -100%;
        
        height: 100vh;
        width: 60%;
        flex-direction: column;
        align-items: center;
        transition: right 0.5s linear;
        background-color: rgb(108, 95, 234);
        padding: 10px;
        box-shadow: -3px -3px 7px #fff,
                        3px 3px 5px #ceced1,
                    inset -3px -3px 7px #fff,
                    inset 3px 3px 5px #ceced1;
        
        font-family: "Domine", serif;
        font-weight: 700;
        font-size: 18px;
        }

        .side_bar .title
        {
            display: flex;
            justify-content: space-evenly;
        }

        .side_bar .title .logo
        {
            font-size: 27px;
            font-weight: 700;
            color: #31344b;
        }

        .side_bar ul
        {
            margin-top: 35px;
            list-style-type: none;
        }

        .side_bar ul a
        {
            color: #fff;
            text-decoration: none;
            display: block;
            margin-top: 12px;
            font-size: 18px;
            font-weight: 500;
            padding: 15px 25px;
            border-radius: 6px;
            box-shadow: -3px -3px 7px #fff,
                        3px 3px 5px #ceced1;
            position: relative;
        }

        .side_bar .media_icone
        {
            position: relative;
            margin-top: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: nowrap;
            
        }

        .media_icone a
        {
            
            margin: 0 5px;
            font-size: 20px;
            cursor: pointer;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            text-decoration: none;
            box-shadow: -3px -3px 7px #fff,
                        3px 3px 5px #ceced1;
            position: relative;
        }

        .media_icone a i
        {
            padding: 10px;
            text-align: center;
            color: #fff;
        }

        .side_bar ul a:hover:before,
        .media_icone a:hover:before
        {
            position: absolute;
            content: '';
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            box-shadow: inset -3px -3px 7px #fff,
                        inset 3px 3px 5px #ceced1;
        }

        label
            {
                font-size: 17px;
                color: #fff;
                box-shadow: -3px -3px 7px #fff,
                            3px 3px 5px #ceced1;
                height: 37px;
                width: 37px;
                border-radius: 50%;
                text-align: center;
                line-height: 37px;
                cursor: pointer; 
                transition: 0.3s ease;           

            }

            .bars
            {
                position: absolute;
                right: 15px;
                top: 15px;
            }

            label:hover
            {
                box-shadow: inset -3px -3px 7px #fff,
                            inset 3px 3px 5px #ceced1;
                color: #3498db;                
            }

            #check
            {
                display: none;
            }

            #check:checked ~ .side_bar
            {
                display: block;
                right: 0px;
                
            }

        /*fin responsive navbar  */

        

        .profil_banner .profil
        {
           
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            
        }

    .profil_banner .profil img
        {
            left: 0;
            height: 100px;
            width: 100px; 
    
        } 

        .profil_banner .description_profil
        {
           
            margin-left: 15px;
            padding: 23px; 
            border: 1px solid #ccc;
            border-radius: 20px;
            box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.4);
            font-size: 20px;
    
        }
        
        
        .abonne_video .video
        {
            padding-left: 20px;
        }
        
        .profil_banner .banner
        {
    
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
        }

        .profil_banner .banner img
            {
                height: 180px;
                width: 540px;

            }

            .publication .publier
            {
            
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 8px 0 ;
                
            }

            .publication .publier iframe
            {
                
                width: 100%;
                /* border: 2px solid #ccc;
                border-radius: 25px;
                box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.4);
                margin-bottom: 10px; */
                
            }

        
    
}



/*.container .principale .publication
{
    background-color: violet;
    height: 800px;
    float: left;
    width: 70%;
}

.container .principale .articles
{
    background-color: aqua;
    height: 200px;
    width: 30%;
    float: right;
    
} */