/******************************
***********TOOLS**********************
*************************************/
html {
    font-size: 62.5%;
}

*{
    box-sizing: border-box;
}

:root{
    --principalColor:#ededed;
    --secondColor:#037d9d;
}

/***********************************
******GENERALITES*******************
***********************************/

body{

    width:100%;
    background-color: var(--principalColor);
    font-family: 'Source Sans Pro', sans-serif;
    background-color: white;
    font-size: 16px;
}

/* On donne les proprietes aux differents titres */
h1{
    background-color: rgba(255, 255, 255, 0.795);
    padding:0.5em;
    color:#db0059;
    white-space: nowrap;
    margin: auto 10%;
    font-size: 20px;
}

h1, h2, h3{
    font-family: 'Mali', cursive;
}

h2{
    text-align: center;
}

.partie2 h3{
    color:#db0059;
}

h3{
   color:var(--secondColor);
   margin: 0;
}

.footer h3{
    padding:1em;
    color:white;
    text-align:center;
}

/* On donne les proprietes des liens du header  */
nav a {
    padding: 0.5em 1.5em;
    margin-left: 1em;
    font-size: 2rem;
    color: black;
    text-decoration:none;
}

nav a:hover {
    background-color: silver;
    color: black;
    border-left: 3px solid blue;
    border-bottom: 3px solid blue;
}

/* On donne les proprietes des liens du footer et de la licence */
.licence a {
    text-decoration: none;
    color: #DD5735;
    font-size: 1.2em;
    padding: 0.5em;
    color: white;
}

.reseaux a {
    text-decoration:none;
    color:white;
    padding:1em;
    text-align:center;
    font-size:25px;
}

footer,
a:hover {
    color: white;
    background-color: #db0059;
}

/******************************
**** MAIN LAYOUT **************
******************************/

/**********
HEADER     
**********/

/* On donne une largeur max au header  */
.wrapper {
    max-width: 1500px;
    margin: 0 auto;
}

/* On definit la police du header  */
header {
    padding: 1em;
    font-family: 'Mali', cursive;
}

/* On definit le menu du header  */
header nav {
    align-items: center;
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

/* One enleve les puces et on rajoute d'autres proprietes au ul  */
header ul {
    display: flex;
    list-style: none;
    font-size: 24px;
    line-height:2;
    text-align:center;
    flex-wrap: wrap;
    flex-direction: column;

}

.logo strong {
    margin-left: 0.5em;
    font-weight: normal;
}
/*****************
MAIN
*****************/

/****
TITRE
****/

/* On mets une image de fond a l'intro dans le main  */
.intro{

    background-image: url(../images/banner1.jpg);
    background-position: center;
    text-align: center;
    height: 200px;
    display: flex;
    background-size: cover;
    justify-content: center;

}

/* On definit ce qui contient les diff articles et titres */
.container{

    background-color: white;
    margin-left: auto;
    margin-right: auto;
}

/****
CITATION
****/

/* On definit les proprietes de la citation et de la source  */
blockquote{
    background-color:var(--principalColor);
    border-bottom: 2px solid var(--secondColor);
    border-left:2px solid var(--secondColor);
    padding:1em;
    text-align: center;
    font-style: italic;
    font-weight: bold;
    font-family: 'Mali', cursive;
}
cite{
    display: inline-block;
    font-style: normal;
    padding-top: 1em;
}

/*****
SECTION
******/

/* On met toutes les section en flexbox */
section{
    display: flex;
    flex-direction: column;
}

/* On definit toute les caracteristique des images des sections   */
section img{
    width: 100%;
    text-align: center;
    margin-top: 1em;
}

/* On definit toutes les proprietes des articles en general */
article{
    background-color: var(--principalColor);
    padding: 1em;
    margin: 1em;
}

/* On met en forme le boutton lire la suite  */
.lirelasuite{
    padding:1em;
    background-color: #1d1e3d;
    color:white;
    text-align: center;
    text-decoration: none;
    float:right;
}


/* On definit les couleurs et la taille du font awesome */
.fa-calendar-days{
    color:#037d9d;
    text-align:center;
    font-size:25px;
}

.fa-microphone{
    color:#db0059;
    font-size:24px;
    text-align:center;
}

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

footer {
    background-color: #db0059;
    border-top-left-radius: 2em;
    display: flex;
    justify-content: center;
}

/* On definit la troisieme section  */
.partie3 {
    display: flex;
    flex-direction:column;
    justify-content: center;
}

/* On met en forme le formulaire  */
.formulaire {
    border-left: 1px solid white;
    border-bottom: 1px solid white;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding:1em;
    
}

.partie3 article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 1em;
    background-color: #db0059;
    color:white;
}


/*******
FORMULAIRE
*******/

/* On definit les formes du titre du formulaire */
legend{
    color:white;
    padding:1em;
}

/* On definit la couleur du input  */
#email{
    background-color: rgb(255 255 255 / 85%);
    padding:1em;
}

/* On definit la couleur du texte a l'interieur de l'input  */
::placeholder{
    color:#db0059;
}

/* On definit le boutton du formulaire  */
button {
    background-color: white;
    color: #db0059;
    text-decoration: none;
    padding: 0.4em;
    margin-top: 1em;
}

/*****
LICENCE
******/


.licence {
    background-color: #444;
    padding: 1em;
    text-align: center;
}

.licence p {
    color: white;
}