/* -------------- Commun à toutes les pages -------------- */

/* Page de couverture */
body > header {
    position: relative;
    width: 375px;
    height: 900px;
}


/* image collée en haut */
body > header > figure > img {
    display: inline;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

/* titre page de couverture */
body > header > h1 {
    font-size: 45px;
}


/* logo DATA RUNNER en haut à gauche */
body > header > a > img:first-child {
    display: inline;
    padding-left: 30px;
    padding-top: 30px;
}

/* flèche en bas de l'image */
body > header > img:last-of-type {
    display: inline;
    position: absolute;
    top: 768px;
    left: 170px;
}

/* position de la légende de l'image de couverture */
body > header > figure > figcaption {
    position: absolute;
    top: 850px;
    left: 4%;
}

.menu > ul {
    margin-top: 0;
}

/* marge pour le contenu */
body > article {
    padding-left: 12px;
    padding-right: 12px;
}

/* article en position relative */
article {
    position: relative;
}

/* header en position relative */
header {
    position: relative;
}

body {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}


/* -------------- MISE EN PAGE DE LA PAGE D'ACCUEIL -------------- */


/* titre */
.titre_index {
    font-family: "Kanit", sans-serif;
    position: absolute;
    top: 454px;
    left: 41px;
    background-color: rgba(2, 30, 115, 0.7);
    background-size: 53px 100px;
    font-size: 2.8rem;
    padding-right: 25px;
    padding-bottom: 116px;
    padding-top: 15px;
    margin-right: -2px;
    padding-left: 15px;
}

/* tagline */
body > header > h4 {
    font-family: "Hind Madurai Light", sans-serif;
    color: white;
    position: absolute;
    top: 525px;
    left: 28px;
    padding-left: 30px;
}

/* introduction en position relative + taille */
.introduction {
    position: relative;
    height: 815px;
}

/* position de l'image dans l'introduction */
.introduction > figure > img {
    display: block;
    position: absolute;
    top: 295px;
    left: 0;
    padding: 1rem;
}

/* position du rectangle orange */
.rectangle_orange {
    position: absolute;
    top: 344px;
    left: 0;
    z-index: 1;
}

/* mise en exergue */
.introduction > p:last-of-type {
    font-size: 1.2rem;
    display: block;
    position: absolute;
    background-color: white;
    width: 208px;
    top: 482px;
    left: 96px;
    padding: 1rem;
}


/* l'article vignette en position relative */
.vignettes_articles {
    position: relative;
}

/* position de la légende de l'image dans introdution*/
.introduction > figure > figcaption {
    position: absolute;
    top: 785px;
    left: 4%;
}

/* titre des article */
.article_1 > h2, .article_2 > h2, .article_3 > h2 {
    text-decoration: overline;
    text-decoration-color: #FAC79B;
    font-size: 1.8rem;
    color: #021E73;
    border-radius: 10px;
    margin-top: 50px;
}

/* boutons pour les vignettes */
.button {
    font-size: 1.2rem;
    background-color: #344B8F;
    border: none;
    color: white;
    padding: 15px;
    padding-bottom: 30px;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    border-radius: 0.3rem;
}

/* position de la vignette de l'article 1 */
.article_1 > a > img {
    position: absolute;
    top: 138px;
    left:289px;
    border: solid;
    border-color: white;
    border-radius: 0.3rem;
}

/* position de la vignette de l'article 2 */
.article_2 > a > img {
    position: absolute;
    top: 340px;
    left:289px;
    border: solid;
    border-color: white;
    border-radius: 0.3rem;
}

/* position de la vignette de l'article 3 */
.article_3 > a > img {
    position: absolute;
    top: 565px;
    left:289px;
    border: solid;
    border-color: white;
    border-radius: 0.3rem;
}

/* marge entre l'article et le footer */
article {
    margin-bottom: 4rem;
}







/* -------------- MISE EN PAGE DE LA PAGE UN FUTUR ALARMANT -------------- */

/* titre */
.titre_un_futur_alarmant > h1 {
    font-size: 3rem;
    padding-left: 30px;
    font-family: "Kanit", sans serif;
}

/* position du titre */
.titre_un_futur_alarmant > h1:first-child {
    margin:0;
    padding-top: 160px;
}

/* Synopsis en position relative */
.Synopsis {
    position: relative;
}

/* marges pour l'image dans le synopsis */
.Synopsis > figure > img {
    margin-top: 60px;
}

/* position d'un rectangle qui décore l'image du synopsys */
.rectangle_1_synopsis {
    position: absolute;
    left: 15px;
    top: 350px;
    z-index: -1;
}

/* position d'un rectangle qui décore l'image du synopsys */
.rectangle_2_synopsis {
    position: absolute;
    left: 261px;
    top: 560px;
}

/* position de la légende de l'image du synopsis */
body > article > div.Synopsis > figure:nth-child(4) > figcaption {
    padding-top: 60px;
    margin-left: -40px;
    margin-right: -40px;
    margin-bottom: 50px;
}

/* position des images du synopsis */
body > article > div.Synopsis > figure:nth-child(9) > img {
    position: absolute;
    top: 1271px;
    left: 140px;
}

/* position des images du synopsis */
body > article > div.Synopsis > figure:nth-child(10) > img {
    position: absolute;
    top: 1461px;
    left: 60px;
    z-index: -1;
}

/* position d'un rectangle qui décore les images du synopsys */
body > article > div.Synopsis > img.rectangle_3_synopsis {
    position: absolute;
    top: 1441px;
    left: 104px;
    width: 139px;
    height: 180px;
    z-index: -1;
}

/* position de la légende */
body > article > div.Synopsis > figure:nth-child(9) > figcaption {
    padding-top: 388px;
    margin-left: -40px;
    margin-right: -40px;
}

/* position de la légende */
body > article > div.Synopsis > figure:nth-child(10) > figcaption {
    margin-left: -40px;
    margin-right: -40px;
    margin-bottom: 50px;
}

/* bouton lien vers trailer */
body > article > div.Synopsis > p:nth-child(12) > a {
    font-size: 1.2rem;
    background-color: #344B8F;
    border: none;
    color: white;
    padding: 10px;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    margin: 22px 2px;
    border-radius: 0.2rem;
}

.un_parallele_avec_notre_societe {
    position: relative;
}

/* position images du parallele avec notre société */
body > article > div.un_parallele_avec_notre_societe > figure:nth-child(4) > img {
    position: absolute;
    top: 735px;
    left: 25px;
}

/* position images du parallele avec notre société */
body > article > div.un_parallele_avec_notre_societe > figure:nth-child(5) > img {
    position: absolute;
    top: 870px;
    left: 25px;
}

/* position images du parallele avec notre société */
body > article > div.un_parallele_avec_notre_societe > figure:nth-child(6) > img {
    position: absolute;
    top: 870px;
    left: 158px;
}

/* position de la légende */
body > article > div.un_parallele_avec_notre_societe > figure:nth-child(4) > figcaption {
    padding-top: 305px;
    margin-left: -40px;
    margin-right: -40px;
}

/* position de la légende */
body > article > div.un_parallele_avec_notre_societe > figure:nth-child(5) > figcaption {
    margin-left: -40px;
    margin-right: -40px;
}

/* position de la légende */
body > article > div.un_parallele_avec_notre_societe > figure:nth-child(6) > figcaption {
    margin-left: -40px;
    margin-right: -40px;
    margin-bottom: 50px;
}


/* --------------------------------COURROUSEL --------------------------------*/

body > article > div.un_parallele_avec_notre_societe > div.galerie > section > ul > li:nth-child(n) > img {
    max-width: 100%;
    height: auto;

}

.carousel {
    color: #021E73;
    padding: 10px 0;
}

ul.carousel-items {
    list-style: none;
    padding: 20px 0;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}

li.carousel-items {
    flex: 1 0 220px;
    margin-right: 20px;
    scroll-snap-align: center;
}

::-webkit-scrollbar {
    height: 2px;
}

::-webkit-scrollbar-track {
    background-color: #FAC79B;
}

::-webkit-scrollbar-thumb {
    background-color: #021E73;
}


/* Boutons pour changer de pages */
.boutons_navigation > a:nth-child(1),
.boutons_navigation > a:nth-child(2) {
    font-family: "Hind Madurai Regular", sans-serif;
    font-size: 1rem;
    background-color: #344B8F;
    border: none;
    color: white;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    margin: 22px 2px;
    border-radius: 0.5rem;
    padding-bottom: 8px;
    padding-top: 8px;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 50px;
    margin-bottom: 0;
}

/* position à droite pour le bouton article suivant */
.boutons_navigation > a:nth-child(2) {
    float: right;
}



/* -------------- MISE EN PAGE DE LA PAGE LA POLLUTION DE L'OMBRE -------------- */

/* titre */
.titre_ > h1 {
    font-size: 3rem;
    padding-left: 30px;
    font-family: "Kanit", sans serif;
}

/* position du titre */
.titre_un_futur_alarmant > h1:first-child {
    margin:0;
    padding-top: 160px;
}

/* Synopsis en position relative */
.Les_data_center {
    position: relative;
}


/* les img en position absolute */
.Les.data.centers > figure > img {
    position: absolute;
}

/* positionnement des images */
body > article > div.Les.data.centers > figure:nth-child(6) > img:nth-child(1) {
    top: 870px;
    left: 13px;
}

body > article > div.Les.data.centers > figure:nth-child(6) > img:nth-child(2) {
    top: 1024px;
    left: 13px;
}

body > article > div.Les.data.centers > figure:nth-child(6) > img:nth-child(3) {
    top: 1024px;
    left: 233px;
}

/* positionnement de la légende */
body > article > div.Les.data.centers > figure:nth-child(6) > figcaption {
    padding-top: 305px;
    margin-left: -40px;
    margin-right: -40px;
    margin-bottom: 50px;
}


body > article > div.Les.data.centers > figure:nth-child(9) > img {
    top: 1760px;
    left: 0;
    z-index: -1;
}

body > article > div.Les.data.centers > figure:nth-child(9) > figcaption {
    padding-top: 166px;
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -78px;
}

body > article > div.mise_en_exergue {
    padding-left: 20px;
    padding-right: 20px;
    background-color: white;
    padding-top: 50px;
}

body > article > div.une_surdimension > h3 {
    margin-top: 80px;
}

.une_surdimension {
    position: relative;
}

.une_surdimension > figure:nth-child(6) > img {
    position: absolute;
    top: 1250px;
    left: 60px;
}

/* positionnement de la légende */
.une_surdimension > figure:nth-child(6) > figcaption {
    padding-top: 405px;
    margin-left: -40px;
    margin-right: -40px;
    margin-bottom: 50px;
}

/* positionnement des images */
.une_surdimension > figure:nth-child(8) > img:nth-child(1) {
    position: absolute;
    top: 2350px;
    left: 180px;
}

.une_surdimension > figure:nth-child(8) > img:nth-child(2) {
    position: absolute;
    top: 2422px;
    left: 10px;
}

/* positionnement du rectangle */
.rectangle_bleu {
    position: absolute;
    top: 2564px;
    left: 226px;
}

/* positionnement de la légende */
.une_surdimension > figure:nth-child(8) > figcaption {
    padding-top: 340px;
    margin-left: -40px;
    margin-right: -40px;
    margin-bottom: 50px;
}

/* bouton pour la source */
.une_surdimension > a {
    font-family: "Hind Madurai Regular", sans-serif;
    font-size: 1.2rem;
    background-color: #344B8F;
    border: none;
    color: white;
    padding: 10px;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    margin: 22px 2px;
    border-radius: 0.2rem;
}

/* marge entre le texte et l'image */
.le_cloud > figure > img {
    margin-top: 30px;
}

/* positionnement de la légende */
.le_cloud > figure > figcaption {
    padding-top: 40px;
    margin-left: -40px;
    margin-right: -40px;
    margin-bottom: 50px;
}

/* style pour les boutons de navigations */
.boutons_navigation > p:nth-child(1) > a,
.boutons_navigation > p:nth-child(2) > a{
    font-family: "Hind Madurai Regular", sans-serif;
    font-size: 1rem;
    background-color: #344B8F;
    border: none;
    color: white;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    margin: 22px 2px;
    border-radius: 0.5rem;
    padding-bottom: 8px;
    padding-top: 8px;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 50px;
    margin-bottom: 0;
}

/* bouton de navigation collé à droite */
.boutons_navigation > p:nth-child(2) > a {
    float: right;
}

body > article > div.boutons_navigation {
    display: block;
}



/* -------------- MISE EN PAGE DE LA PAGE LA POLLUTION DE L'OMBRE -------------- */


/* titre */
.titre_les_cles_d_un_changement > h1 {
    font-size: 3rem;
    padding-left: 30px;
    font-family: "Kanit", sans serif;
}

/* position du titre */
.titre_les_cles_d_un_changement > h1:first-child {
    margin:0;
    padding-top: 160px;
}

/* marge entre l'image et le texte */
.le_free_cooling > figure:nth-child(3) > img {
    margin-top: 30px;
}

/* positionnement de la légende */
.le_free_cooling > figure:nth-child(3) > figcaption {
    padding-top: 50px;
    margin-left: -40px;
    margin-right: -40px;
    margin-bottom: 50px;
}

/* boutons pour en savoir plus */
.le_free_cooling > a {
    font-family: "Hind Madurai Regular", sans-serif;
    font-size: 1.2rem;
    background-color: #344B8F;
    border: none;
    color: white;
    padding: 10px;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    margin: 22px 2px;
    border-radius: 0.2rem;
}

/* div le free cooling en position relative */
.le_free_cooling > figure {
 position: relative;
}

/* images en position absolute */
.le_free_cooling > figure:nth-child(7) > img,
.le_free_cooling > figure:nth-child(8) > img,
.le_free_cooling > figure:nth-child(9) > img {
    position: absolute;
}

/* positionnement des images */
.le_free_cooling > figure:nth-child(7) > img {
    top: 20px;
    left: -40px;
}

.le_free_cooling > figure:nth-child(8) > img {
    top: -190px;
    left: -40px;
}

.le_free_cooling > figure:nth-child(9) > img {
    top: -242px;
    left: 150px;
}

/* positionnement des légendes */
.le_free_cooling > figure:nth-child(7) > figcaption {
    padding-top: 327px;
    margin-left: -40px;
    margin-right: -40px;
}

.le_free_cooling > figure:nth-child(8) > figcaption,
.le_free_cooling > figure:nth-child(9) > figcaption {
    margin-left: -40px;
    margin-right: -40px;
}

/* marge entre les légendes et le texte */
.le_free_cooling > p:nth-child(10) {
    margin-top: 50px;
}

/* bouton voir */
.recycler_la_chaleur > p:nth-child(3) > a {
    font-family: "Hind Madurai Regular", sans-serif;
    font-size: 1.2rem;
    background-color: #344B8F;
    border: none;
    color: white;
    padding: 10px;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    margin: 22px 2px;
    border-radius: 0.2rem;
}

/* bloc le role de l'utilisateur en position relative */
.le_role_de_l_utilisateur {
    position: relative;
}

/* les images en position absolute */
.le_role_de_l_utilisateur > figure:nth-child(3) > img,
.le_role_de_l_utilisateur > figure:nth-child(4) > img,
.le_role_de_l_utilisateur > figure:nth-child(5) > img {
    position: absolute;
}

/* positionnement des images */
.le_role_de_l_utilisateur > figure:nth-child(3) > img {
    top: 280px;
    left: 195px;
}

.le_role_de_l_utilisateur > figure:nth-child(4) > img {
    z-index: -1;
    top: 365px;
    left: 96px;
}

.le_role_de_l_utilisateur > figure:nth-child(5) > img {
    top: 401px;
    left: 35px;
}

/* positionnement des légendes */
.le_role_de_l_utilisateur > figure:nth-child(3) > figcaption {
    padding-top: 280px;
    margin-left: -40px;
    margin-right: -40px;
}

.le_role_de_l_utilisateur > figure:nth-child(4) > figcaption,
.le_role_de_l_utilisateur > figure:nth-child(5) > figcaption {
    margin-left: -40px;
    margin-right: -40px;
}

/* bouton de la liste d'actions à faire */
.le_role_de_l_utilisateur > p:nth-child(10) > a {
    font-family: "Hind Madurai Regular", sans-serif;
    font-size: 1.2rem;
    background-color: #344B8F;
    border: none;
    color: white;
    padding: 10px;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    margin: 22px 2px;
    border-radius: 0.2rem;
}

/* video interview */
.interview > video {
    margin-top: 20px;
}


/* -------------- MISE EN PAGE DE LA PAGE CONTACT -------------- */

/* fond de la page */
body.page-contact {
    width: 375px;
    position: static;
    height:0;
    background-color: #99A5C7;
}

/* pour pouvoir positionnent le logo MMI et le menu */
body.page-contact > header {
    width: 375px;
    position: static;
    height:0;
}

/* bloc contact */
body.page-contact > main > div.contact {
    background-color: white;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 150px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 1px;
    padding-bottom: 20px;
}


/* logo DATA RUNNER en haut à gauche */
body.page-contact > header > img {
    display: inline;
    position: absolute;
    top: 40px;
    left: 15px;
}

/* police et décoration du titre du bloc contact */
.contact > h3 {
    font-family: "Hind Madurai Light", sans-serif;
    font-size: 2rem;
    color: black;
}

/* zones de textes */
button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.20;
    margin: 0;
    width: 250px;
    display: block;
    margin-top: 17px;
    margin-bottom: 10px;
}

/* zone de texte plus grande pour le message */
#msg {
    line-height: 2;
}

/* police et décoration des différents champs */
body > main > div.contact > div:nth-child(n) > label {
    font-family: "Hind Madurai Light", sans-serif;
    font-size: 1rem;
    color: black;
}


/* bouton envoyer */
.button_envoyer > button {
    margin-top: 30px;
    background-color: #99A5C7;
    color: #ffffff;
    font-family: "Hind Madurai Light", sans-serif;
    font-size: 1rem;
    padding: 5px 0;
    border: none;
}

/* bloc A propos */
body > main > div.a-propos {
    background-color: white;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 45px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 1px;
    padding-bottom: 20px;
}

/* police et décoration du titre du bloc A propos */
.a-propos > h3 {
    font-family: "Hind Madurai Light", sans-serif;
    font-size: 2rem;
    color: black;
}

/* police et décoration du bloc à propos */
.a-propos > p {
    font-family: "Hind Madurai Light", sans-serif;
    font-size: 1.2rem;
    color: black;
}

/* espace entre le bloc A propos et celui des autres projets */
.autres_projets > p {
    padding-bottom: 30px;
}

/* police et décoration du titre du bloc autres projets */
.autres_projets > h3{
    font-family: "Hind Madurai Light", sans-serif;
    font-size: 2rem;
    color: black;
}

/* bloc autres projets */
.autres_projets {
    background-color: white;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 45px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 1px;
    margin-bottom: 50px;
}

/* police et décoration de la description des autres projets */
.autres_projets > p {
    font-family: "Hind Madurai Light", sans-serif;
    font-size: 1.2rem;
    color: black;
}

/* mise en place d'un tableau pour les liens vers les autres projets */
.autres_projets-a1 > div {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 30px;
}

/* police et décoration des liens vers les autres projets */
.autres_projets > div > div > a {
    color: #021E73;
    font-family: "Hind Madurai Medium", sans-serif;
    text-decoration: none;
}

/* texte à droite */
.autres_projets-a1 > div:nth-child(2n) {
    float: right;
}

/* texte à droite et justifié à droite */
.autres_projets > div > div:nth-child(2n) > a {
    float: right;
    text-align: right;
}

/* position du bouton retour */
.bouton_retour {
    width: 100%;
    text-align: center;
    margin-bottom: -140px;
    padding-top: 105px;
}

/* bouton retour à la page précédente */
.bouton_retour {
    font-family: "Hind Madurai Regular", sans-serif;
    font-size: 1rem;
    background-color: #344B8F;
    border: none;
    color: white;
    /* text-align: left; */
    text-decoration: none;
    display: inline-block;
    border-radius: 0.5rem;
    padding-bottom: 8px;
    padding-top: 8px;
    padding-left: 15px;
    padding-right: 15px;
    width: 50px;
    margin-left: 143px;
    margin-bottom: 50px;
}



/* -------------- FOOTER -------------- */

/* footer en position relative, couleur du fond et ajustement des padding */
footer {
    background-color: #344B8F;
    position: absolute;
    padding-left: 15px;
    padding-right: 15px;
}

/*couleur blanche du nom, prénom, groupe */
.prenom_nom_groupe {
    color: white;
}

/* Pas de soulignement pour le nom, prénom, groupe */
.prenom_nom_groupe > p > a {
    color: white;
    text-decoration: none;
}

/* marge pour le nom, prénom, groupe */
.prenom_nom_groupe > p {
    margin-bottom: -20px;
}

/* pas de puces et collé au gauche */
.contact > ul {
    list-style-type: none;
    padding-left: 0;
}

/* padding pour le contact */
.contact {
    padding-top: 20px;
}

/* couleur, taille et pas de soulignement pour le contact */
.contact > p > a {
    text-decoration: none;
    font-size: 1.4rem;
    color: white;
}

/* marge pour le contact */
.contact > p {
    margin-bottom: -10px;
}

/* couleur, pas de soulignement, typo, taille typo pour les différents contacts */
.contact > ul > li > a{
    color: #FAC79B;
    text-decoration: none;
    font-family: "Hind Madurai Light", sans-serif;
    font-size: 1rem;
}

/* position logo mmi */
.MMI > a > img {
    position: absolute;
    top: 16px;
    left: 313px;
}

/* position logo instagram */
.instagram > img {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 173px;
    left: 214px;
}

/* position logo facebook */
.facebook > img {
    position: absolute;
    width:30px;
    height:30px;
    top: 182px;
    left: 273px;
}

/* position logo youtube */
.youtube > img {
    position: absolute;
    width: 40px;
    height: 28px;
    top: 183px;
    left: 318px;
}

/* couleur, typo, taille typo, padding pour la mention légale */
.mention_legale > p {
    color: white;
    font-family: "Hind Madurai Light", sans-serif;
    font-size: 0.8rem;
    padding-top: 20px;
}

/* couleur, typo, taille typo, pas de soulignement, padding pour le lien dans la mention légale */
.mention_legale > p > a {
    color: #FAC79B;
    font-family: "Hind Madurai Light", sans-serif;
    font-size: 0.8rem;
    text-decoration: none;
}