nav.nav_cyril 
{
    margin: auto;
    width: 50%;
    height: 50px;
    background: #48435C;
}
 
nav.nav_cyril .main_pages 
{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

nav.nav_cyril .main_pages a 
{
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    text-decoration: none;
    font-family: Arial, sans-serif;
    color: white;
}
 
nav.nav_cyril a:hover 
{
    background: #5A5766
}

nav.nav_cyril label, #toggle
{
    display: none;
}
 
@media all and (max-width: 991px)
{
    nav.nav_cyril
    {
        height: 60px;
    }
	nav.nav_cyril .main_pages 
    {
        display: none;
        flex-direction: column;
        background: #48435C;
        height: 220px;
    }
 
    nav.nav_cyril .main_pages a {
        width: 50%;
    }
 
    nav.nav_cyril label 
    {
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        font-size: 40px;
        color: white;
        cursor: pointer;
    }
 
    #toggle:checked + .main_pages {
        display: flex;
    }
}



*,
*::before,
*::after{

box-sizing: border-box
}
	
div.demo input[type="radio"]{

position:absolute;
left:-9999px

}	
	
.demo{
display:grid;
grid-template-areas:
"label article"
"label article"
"label article"
"label article";
background-color:#f2f2f2;
border:1px solid rgba(85, 85, 85, 0.15);
border-radius: .5rem;
box-shadow: 4px 4px 15px rgba(200,200,200,1);
overflow:hidden;	
}	
	
	
div.demo .article{

padding:1rem;
grid-area:article;
will-change: opacity;
transition: opacity 400ms;
z-index:9999;
}
	
div.demo input[type="radio"]{position:absolute;left:-100vw}
div.demo input[type="button"]{background: #5a5766;}
	
div.demo input[type="radio"]+label{
cursor: pointer;
text-align:center;
padding: 1rem 2rem;
background-color: #eaeaea;
transition: background-color 250ms;
font-size:calc(14px + .25vw);

}
	
	
div.demo input[type="radio"]:checked+label	{background-color:unset}
	

div.demo label:hover {
	
background-color: #dddddd;
}
	
div.demo #tab-1:checked ~ .article:not(:nth-of-type(1)),
div.demo #tab-2:checked ~ .article:not(:nth-of-type(2)),
div.demo #tab-3:checked ~ .article:not(:nth-of-type(3)),
div.demo #tab-4:checked ~ .article:not(:nth-of-type(4)) {opacity: 0;z-index:0}

	
@media (min-width:62.75rem){
	
.demo{
	
grid-template-areas:
"label label label label"
"article article article article"

	
	} 
	
div.demo input[type="radio"]:not(:checked)+label{
	
border-bottom:1px solid #d8d8d8;
	
	}
div.demo input[type="radio"]+label:not(:last-of-type) {
	
border-right:1px solid #d8d8d8;
	
	}
	
	}
#section{max-width:1400px;height:auto;clear:both}
#section2{max-width:1400px;height:auto;clear:both}
.col{width:100%;}
.col:first-child{margin-left:0}
.un{
float:left;
width:65%;
margin-right:15px;
margin-bottom:20px;
}
.deux{
width:32%;
position-relative:top:0px;
float:right;
top:0px;
}
tbody tr:nth-child(odd) {
  background-color: #fafafa;
}

tbody tr:nth-child(even) {
  background-color: #ffffff;
}