/*******************************************************
***********     STRUCTURE   /    VARIABLES     **********
*******************************************************/
:root{
    --main-radius: 5px;
    --main-padding: 5px;
    --bgcolor: rgb(72, 72, 102);
}

*, ::before, ::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    background-color: var(--bgcolor);
}

#container{
    border-radius: var(--main-radius);
    padding: var(--main-padding);
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-gap: 0.2em;
    grid-template-columns: 1fr minmax(100px, 0.2fr);
    grid-template-rows: 0.2fr 1fr 0.1fr;
    grid-template-areas: 
        "header nav"
        "main nav"
        "footer nav";
}

@media only screen and (max-width: 550px)
{
    #container{
        grid-template-columns: 1fr;
        grid-template-rows: 0.5fr 0.2fr 1fr 0.1fr;
        grid-template-areas: 
            "header"
            "nav"
            "main"
            "footer";
    }
}

/***********************************************************
********************    HEADER      **********************
***********************************************************/
header{
    grid-area: header;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: var(--bgcolor);
}

#now{
    background-color: var(--bgcolor);
    color: white;
    font-weight: 600;
    border: 1px solid white;
}


/***********************************************************
********************    NAV          **********************
***********************************************************/
nav{
    grid-area: nav;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: var(--bgcolor);
    box-shadow: 18px 10px 5px red;
    border
    overflow: hidden;
}

#logo {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

}

#logo img{
    width: 120px;
    border: 1px solid black;
}

#menu{
    display: flex;
    flex-direction: column;
    align-items: cenrter;
    justify-content: center;
    padding-top: 30px;
    overflow: hidden;
}

#menu li{
    margin: 30px;
}

#menu ul{
    list-style-type: none;
    margin-bottom: 20px;
}

#menu a{
    text-decoration: none;
    background-color: white;
    padding: 5px;
    margin-bottom: 30px;
    border-radius: 5px;
}

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

footer{
    grid-area: footer;
    background-color: var(--bgcolor);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: white;
    overflow: hidden;

}

footer a{
    text-decoration: none;
    color: white;
}

footer a:visited{
    color: white;
}

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

main{
    grid-area: main;
    background-color: var(--bgcolor);
    overflow: hidden;
}

article{
    color: white;
    overflow: hidden;

}

#accueil{
    display: flex;
}

#logigrammes{
    display: none;
}

#photos{
    display: none;
}

#consignes{
    display: none;
}

#garde{
    display: none;
}

#indicateurs{
    display: none;
}

#espaceop{
    display: none;
}

#prisedappels{
    display: none;
}

#continuite{
    display: none;
}

#usher{
    display: none;
    justify-content: center;
    align-items: center;
}


/***********************************************************
********************   BLOB MENU      **********************
***********************************************************/

#container-menu{
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#btn-menu{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: white;
    background-image: url("./img/18.png");
    background-size: cover;
    background-repeat: no-repeat;
    border: 1px solid red;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    cursor: pointer;
}

.icone{
    width: 40%;
}

.blob {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#blob1 {
    background-color: rgb(255, 255, 255);
    z-index:1; 
    border: 1px solid red;
    transition: all 0.2s 0.1s ease-in-out;
}

#blob2 {
    background-color: rgb(255, 255, 255);
    border: 1px solid red;
    z-index:1; 
    transition: all 0.2s 0.2s ease-in-out;

}

#blob3 {
    background-color: rgb(255, 255, 255);
    z-index:1; 
    border: 1px solid red;
    transition: all 0.2s 0.3s ease-in-out;

}

#blob4 {
    background-color: rgb(255, 255, 255);
    border: 1px solid red;
    z-index:1;
    transition: all 0.2s 0.4s ease-in-out;
 
}

#blob5 {
    background-color: rgb(255, 255, 255);
    border: 1px solid red;
    z-index:1;
    transition: all 0.2s 0.5s ease-in-out;

}

#blob6 {
    background-color: rgb(255, 255, 255);
    border: 1px solid red;
    z-index:1;
    transition: all 0.2s 0.6s ease-in-out;
 
}

#blob7 {
    background-color: rgb(255, 255, 255);
    border: 1px solid red;
    z-index:1;
    transition: all 0.2s 0.7s ease-in-out;
 
}

#blob8 {
    background-color: rgb(255, 255, 255);
    border: 1px solid red;
    z-index:1;
    transition: all 0.2s 0.8s ease-in-out;
 
}

/*************** animation *****************/ 

#container-menu.active #blob1{
    left: 100%;
}

#container-menu.active #blob2{
    top: 85%;
    left: 85%
}

#container-menu.active #blob3{
    top: 100%;
}

#container-menu.active #blob4{
    left: 15%;
    top: 85%;
}

#container-menu.active #blob5{
    left: 0%;
    top: 50%;
}

#container-menu.active #blob6{
    left: 15%;
    top: 15%;
}

#container-menu.active #blob7{
    left: 50%;
    top: 0%;
}

#container-menu.active #blob8{
    left: 85%;
    top: 15%;
}



/************************************************************/
/**************         USHER               *****************/
/************************************************************/

#usher{
    width: 150px;
    height: 200px;
    background-image: url(./img/ddsis.png);
    background-repeat: no-repeat;
    background-size: cover;
    animation-direction: alternate-reverse;
    animation-name: usher;
    animation-direction:alternate-reverse;
    animation-iteration-count: infinite;
    animation-duration: 6s;
}

@keyframes usher {
    from {
      margin-left: 100%;
    }
  
    to {
      margin-left: 0%;
    }
  }




  /*****************************************************************************************/
  /***************                 SLIDER                                   ***************/
  /****************************************************************************************/








.slider-css-target{

overflow-x: hidden;
max-width: 600px;
margin: auto;

	
	}

.slider-css-target ul{

margin: 1rem .5rem;
/*reset ul*/
padding: 0;
list-style-type:none;
/*reset ul*/
display:flex;
justify-content: space-between;
gap:.5rem
	}


	
	
.slider-css-target ul li a{display:block}


	
.slider-css-target ul li img{

display: block;
max-width: 100%;
width: 120px;
height: 100%;
max-height: 80px;
border: 2px solid white;
box-shadow:0 0 5px rgba(0, 0, 0, 0.3)
	
	}

.slider-css-target-images{
	
display: flex;
width: 400%;
will-change: transform;
transition: transform .4s ease-in-out
	
	}

.slider-css-target-images img {
	
display:block;
width:100%;
height:auto;
/*aspect-ratio:3/2;
object-fit: cover;*/


	
	}
#votre_id2:target ~ .slider-css-target .slider-css-target-images{
	
	transform:translate3d(-25%,0,0)
	
	}

#votre_id3:target ~ .slider-css-target .slider-css-target-images{
	
	transform:translate3d(-50%,0,0)
	
	}

#votre_id4:target ~ .slider-css-target .slider-css-target-images{
	
	transform:translate3d(-75%,0,0)
	
	}


.description{

background-color:#dbdbdb;
flex:0 1 100%;
overflow:hidden;

}