@font-face {
    font-family: 'VRB_____';
    src: url('../fonts/VRB_____.woff2') format('woff2'),
         url('../fonts/VRB_____.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'VRBL____';
    src: url('../fonts/VRBL____.woff2') format('woff2'),
         url('../fonts/VRBL____.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'VRL_____';
    src: url('../fonts/VRL_____.woff2') format('woff2'),
         url('../fonts/VRL_____.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'VRT_____';
    src: url('../fonts/VRT_____.woff2') format('woff2'),
         url('../fonts/VRT_____.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    --blanc: rgb(255,255,255);
    --noir: rgb(50,50,50);
    --bleu: rgb(0,150,210);
    --bleu-clair: rgb(220,245,255);
    --gris: rgb(120,120,120);
    --gris-clair: rgb(200,200,200);
    --gris-fond: rgb(250, 250, 255);
    --rouge: rgb(185,0,10);
    --jaune: rgb(255,225,0);
}


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

html, body{
    font-size: 110%;
    font-family: 'VRT_____', sans-serif;
    font-weight: 600;
    scroll-behavior: smooth;
    background-color: var(--noir);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'VRB_____', sans-serif;
    color: var(--gris);
    text-align: center;
}

h1{
    text-align: center;
    font-size: 2.3rem;
}

h1 >img{
    display: inline-block;
    width: 5%;
    vertical-align: baseline;
    margin-right: 1rem;
}

h3{
    font-weight: 100;
    margin: 0;
    padding-top: .5rem;
}

ul{
    padding: 0;
}

li{
    list-style-type: none;
}

img{
    display: block;
    margin: 0 auto;
    width: 100%;
}

figure{
    display: block;
    color: var(--blanc);
    padding:0 2rem 1rem;
}

figcaption {
    font-family: 'VRB_____', sans-serif;
    color: var(--gris);
    text-align: center;
    margin-top: .5rem;
    line-height: 1.2rem;
}

hr{
    border-top: 1.5px solid var(--gris);
}

section {
    width: 100vw;
    padding: 5rem 0 3rem;
}

section > h1 > img{
    width: 60px;
}


article{
    width: 85vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding-top: 1.5rem;
}

.chapo{
    margin: 1rem auto;
    color: var(--gris);
    font-size: 1.3rem;
    text-align: center;
    max-width: 50%;
}

.encadre{
    padding: 1rem;
    /*border-radius: 1rem;*/
    margin: 1rem;
    color: var(--blanc);
    text-align: center;
    width: 350px;
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
}

.encadre > h2, .encadre > p{
    color: var(--blanc);
}

.degrade-bleu{
    background: linear-gradient(180deg,rgba(0, 96, 214, 1) 0%, rgba(10, 157, 255, 1) 100%);}

.degrade-vert{
    background: linear-gradient(180deg,rgba(0, 143, 14, 1) 0%, rgba(0, 199, 3, 1) 100%);
}

.degrade-rouge{
    background: linear-gradient(180deg,rgba(176, 0, 0, 1) 0%, rgba(250, 0, 0, 1) 100%);
}

.degrade-orange{
    background: linear-gradient(180deg,rgba(255, 94, 0, 1) 0%, rgba(255, 167, 79, 1) 100%);
}

.degrade-mauve{
	background: linear-gradient(180deg,rgba(105, 0, 158, 1) 0%, rgba(204, 0, 255, 1) 100%);
}

.degrade-gris-clair{
    background: linear-gradient(180deg,rgba(184, 203, 212,1) 0%, rgba(237, 250, 255, 1) 100%);
}

/* MENU ****************************************/

nav {
    position:fixed;
    top:0;
    right:0;
    z-index: 10;
    overflow: hidden;
    background-color: rgb(0,0,0);
    font-family: 'VRBL____', sans-serif;
    text-transform: uppercase;
    padding: 10px;
}

.menu-icon{
	
	display: none;
}

.logo img{
	display: inline-block;
	margin: 0 10px 0 0;
	width: 120px;
	verticai-align: middle;
}

.nav-links {
    list-style: none;
    display: flex;
}

.nav-links a {
    text-align: center;
    padding: 1rem;
    text-decoration: none;
    font-size: .8rem;
    color: var(--blanc);
}

.nav-links a:hover {
    background-color: var(--gris);
}

.nav-links a:active, .active{
	background-color:var(--rouge);
}


@media (max-width: 500px) {

	nav{
		background-color: rgba(0,0,0,.9);
		width: 100vw;
		min-height: 50px;
		padding: 1rem;
	}
	
    .nav-links {
        display: none;
    }
    
    .nav-links a {
		display: block;
		margin: 0 auto;
		width: 50vw;
		text-align: center;
		/*padding: .5rem;*/
		font-size: 1rem;
		color: var(--blanc);
}

    .logo img {
		display: block;
		margin: 0 auto ;
		width: 180px;
	}
  
    li {
		padding: 1rem 0 0 1rem ;
	}
	
    .menu-icon {
		width: 50px;
		height: 50px;
		float: right;
		padding: 1rem;
		cursor: pointer;
		display: block;
    }
}    

/* FOOTER ***************************************************/
footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    place-items: center;
    padding: 2rem 0;
    color: rgba(220,220,220,1);
    font-family: 'VRBL____', sans-serif;
    font-size: .9rem;
}

footer p a{
    color: rgba(220,220,220,1);
    transition: color .4s;
    text-decoration: none;
}

footer p a:hover{
    color: rgba(220,220,220,.7);
    cursor: pointer;
}