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

:root{

--nav: hsla(200, 22%, 8%, 1);
--body: hsla(85, 61%, 93%, 1);
--timberwolf: hsla(67, 8%, 80%, 1);
--footer: hsla(261, 9%, 69%, 1);
--list: rgb(229, 90, 52);
--list2: hsl(13, 77%, 45%); 
--bouton:hsl(120, 100%, 25%);
--bouton-hover:hsl(120, 100%, 30%);

--manuscrite:'Yellowtail';
--corps:'Economica';

}

.flex{
display: flex;
flex-wrap: wrap;
}


.flex_center{
justify-content: center;
align-items: center;

}

.flex_taille{
flex-grow: 1;
}

.aligner_text{
text-align: center;

}

.image_cover{
object-fit: cover;
object-position: left;


}

.taille100{
width: 100%;
}

body{
background-color: var(--body);
font-family: var(--corps);
font-size: 18px;
}

nav{
background-color: var(--nav);
height: 60px;
width: 100%;
position:fixed;
top: 0px;
}

ul{
list-style: none;
}

li{
padding-left: 10px;
padding-right: 10px;
}

.colorli1{
color: var(--list);
font-size: clamp(18px,3vw,20px);

}

.colorli2{
color: var(--list);
font-size: clamp(23px,3.6vw,28px);

}

.colorli1:hover{
color: var(--list2);

}

a{
text-decoration: none;
}

main,header{
background-color: white;
margin: auto;
padding-left: 2%;
padding-right: 2%;
border-left: dotted var(--nav) 3px;
border-right: dotted var(--nav) 3px;
width: clamp(350px, 80%, 1000px);
}

main{
min-height: 100vh;
border-bottom: dotted var(--nav) 3px;

}

header{
padding-top: 60px;
}

.onglet{
background-color: var(--timberwolf) ;
border: white solid 2px;
}

article{
padding-top:15px
}

p{
padding-left: 5px;
padding-right: 5px;
}


section{
padding-top: 15px;
}

.bouton {
background-color: var(--bouton);
border: none;
border-radius: 5px;
color: white;
margin: 10px;
padding: 10px;
text-decoration: none;
display: inline-block;
font-family:var(--manuscrite) ;
font-size: large;
cursor: pointer;
}
.bouton:hover {
background-color:var(--bouton-hover);
color: white;
}

.bouton_marge_formulaire{
margin-left: 10px;
}


.boite_avis{
box-shadow: hsla(0, 0%, 0%, 0.35) 0px 5px 15px;
text-align: center;
padding: 2%;
max-width: 85%; 
margin:auto;
background-color: hsl(0, 0%, 96%, 0.4);

}

.formulaire{
box-shadow: hsla(0, 0%, 0%, 0.35) 0px 5px 15px;
border-radius: 5px;
padding: 2%;
max-width: 85%; 
margin:auto;
background-color: hsl(0, 0%, 96%, 0.4);

}

label{
    padding-right: 8px;
}

textarea{
height: 250px;
width: 500px;
}

iframe{
width: 600px;
height: 400px;
border-radius: 30px
}


footer{
background-color: var(--footer);
text-align: center;
padding: 2%;
}

h1{
font-size: clamp(24px,3.8vw,35px);
}

h2{
font-size: clamp(22px,3.6vw,28px);
}

.titre{
    font-size: clamp(24px, 3.8vw, 35px);
}

.titre2{
    font-size: clamp(22px, 3.6vw, 28px);
}

.font_large{
font-size: clamp(22px,3.6vw,28px);
}

.manuscrite{
font-family: var(--manuscrite);
}

@media all and (max-width: 480px)
{
.device{
    display: none;
}

textarea{
    height: 180px;
    width: 200px;
}

iframe{
    width: 220px;
    height: 180px;
    border-radius: 15px
}

}

@media all and (min-width: 480px)
{
.device2{
    display: none;
}

}