@charset "UTF-8";
/***********************************************************************
/ Fichier ...................... : style.css
/ Type ......................... : Document CSS
/ Titre ........................ : Feuille de styles pour "Myriapode"
/ Auteure ....................... : Annabelle Nicole
/ Date de création ............. : 2021-11-01
/***********************************************************************/

body {
    width: 100%;
    margin: auto;
}

main, nav {
    font-family: "Noto Sans", sans-serif;
}

h1 {
    font-family: Oswald, sans-serif;
    font-size: 1.2em;
}

h2 {
    font-family: Oswald, sans-serif;
    font-size: 1em;
}

footer {
    font-family: 'Trebuchet MS', Arial, sans-serif;
}

/***********************************************/

/* Menu de navigation */

/***********************************************/

nav li {
    list-style-type: none;
    font-size: 70%;
    margin: 5px;
    text-align: center;
}

li>a {
    text-decoration: none;
    color: black;
}

#contact ul {
    display: flex;
    padding: 0;
}

#accueil nav {
    position: sticky;
    top: 10px;
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.8);
}

#accueil ul {
    display: flex;
    justify-content: center;
    padding: 0;
}

#contact nav {
    position: absolute;
    margin-top: 20%;
}

#equipe nav {
    position: relative;
}

nav li a:hover {
    color: rgb(80, 79, 79);
    transition: all 1.3s;
}

/***********************************************/

/* page ACCUEIL */

/***********************************************/

#accueil main {
    background-image: linear-gradient(white, rgb(185, 185, 185))
}

#accueil header img {
    width: 50%;
}

#accueil header {
    text-align: center;
}

.titreflex {
    text-align: center;
}

.titreflex>h1:hover {
    color: rgb(40, 14, 189);
    transition: all 0.5s ease-in-out 0s;
}

.accueilflex {
    display: flex;
    flex-direction: column;
}

.sectionflex {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 30px;
}

#accueil .fond-service1 {
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/service1.jpg);
    background-position: center;
    background-size: cover;
    padding: 1em;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 10%;
}

#accueil .fond-service2 {
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/service2.jpg);
    background-position: center;
    background-size: cover;
    padding: 1em;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 10%;
}

#accueil .fond-service3 {
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/service3.jpg);
    background-position: center;
    background-size: cover;
    padding: 1em;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 10%;
}

#accueil .fond-service4 {
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/service4.jpg);
    background-position: center;
    background-size: cover;
    padding: 1em;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 10%;
}

.fondtexteaccueil {
    text-align: center;
    border: 1px solid transparent;
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.7);
    margin-top: 10%;
    margin-left: 10%;
    margin-right: 10%;
    border-radius: 5px 5px 5px 5px;
    margin-bottom: 10%;
    padding: 15px;
}

.fondtexteaccueil h3 {
    color: rgb(40, 14, 189);
    font-size: 1em;
}

.fondtexteaccueil p {
    text-align: left;
    font-size: 0.8em;
    color: black;
}

.bordure {
    border: 5px solid transparent;
    border-image: url("../images/bordure_logo.png") 20 round;
    width: 70%;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 0.8em;
}

.star {
    display: grid;
    border: 1px solid black;
    padding: 15px;
    border-radius: 10px;
    background-color: white;
    margin: 10px;
}

.star>img {
    width: 50%;
    border-radius: 10px;
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    padding: 5px;
}

.star h3 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    text-align: left;
    font-size: 0.8em;
}

.star>p {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    font-size: 0.7em;
}

.fa-star {
    color: yellow;
}

/***********************************************/

/* page EQUIPE en grid */

/***********************************************/

#equipe {
    background-image: url(../images/fond-equipe.jpg);
}

.grid {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 'logo' 'menu1' 'titre' 'article' 'aside' 'footer';
}

#equipe main {
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.9);
    margin: 15px;
}

.grid1 {
    grid-area: logo;
    text-align: center;
}

.grid1 img {
    width: 50%;
}

.grid2 {
    grid-area: menu1;
}

.grid2 ul {
    padding: 0;
    justify-content: center;
}

.puce {
    display: flex;
}

.grid3 {
    grid-area: titre;
}

.grid3 h1, h2 {
    text-align: center;
}

.grid4 {
    grid-area: article;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
}

.grid5 {
    grid-area: aside;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 100px;
    border-top: 5px solid white;
}

.grid5 p {
    margin-top: 100px;
    font-size: 1em;
    font-weight: bold;
}

.grid5 h2 {
    font-size: 1.4em;
    margin-bottom: 0;
}

.grid5 img {
    width: 50%;
    padding: 10px;
    margin-top: 100px;
    box-shadow: 5px 5px 10px;
}

.grid6 {
    grid-area: footer;
    text-align: center;
}

.article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.article img {
    width: 50%;
    max-width: 350px;
}

.article h2 {
    text-shadow: -5px -8px 3px rgb(81, 81, 81);
}

.article h3 {
    color: rgb(40, 14, 189);
    font-size: 0.8em;
    margin: 0;
}

.article p {
    font-size: 0.8em;
    margin-left: 15%;
    margin-right: 15%;
    max-width: 200px;
}

/***********************************************/

/* page CONTACT en flex */

/***********************************************/

main.flex {
    display: flex;
    flex-direction: column;
}

#contact {
    background-size: 10%;
    background-repeat: no-repeat;
    background-image: url("../images/fond_ecran_image.JPG");
    background-position: 98% 1%;
}

header.flex1>img {
    max-width: 60%;
}

header.flex1 {
    display: flex;
    justify-content: center;
    position: relative;
}

.flex3 p {
    text-align: center;
    margin-top: 0;
    font-size: 0.8em;
}

.flex3 h1 {
    text-align: center;
    margin-top: 20%;
}

.mediassociaux {
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.mediassociaux>a {
    padding: 10px;
    font-size: 30px;
    width: 20px;
    height: 20px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
}

.mediassociaux>a:hover {
    opacity: 0.7;
}

.fa-facebook {
    background: #3B5998;
    color: white;
}

.fa-twitter {
    background: #55ACEE;
    color: white;
}

.fa-instagram {
    background: #125688;
    color: white;
}

footer {
    text-align: center;
}

/***********************************************/

/*Formulaire de la page CONTACT */

/***********************************************/

form {
    border: 4px solid #ffffff;
    border-radius: 10px;
    box-shadow: 5px 5px 10px rgb(80, 79, 79);
    margin: 10%;
    max-width: 250px;
}

#contact form {
    font-size: 0.7em;
}

.container {
    padding: 20px;
    background-color: #ffffff;
}

.container h3 {
    text-align: center;
}

input[type=text], input[type=submit], input[type=email] {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 10px;
}

input[type=checkbox] {
    margin-top: 16px;
}

input[type=submit] {
    background-color: rgb(40, 14, 189);
    color: white;
    border: none;
}

input[type=submit]:hover {
    opacity: 0.8;
}

.form {
    display: flex;
    justify-content: center;
}

/***********************************************/

/*changements à partir de 400px */

/***********************************************/

@media only screen and (min-width: 400px) {
    body {
        max-width: 1440px;
    }
    nav li {
        font-size: 90%;
        margin: 15px;
    }
    /***********Accueil************/
    #accueil header img {
        width: 40%;
    }
    .sectionflex {
        margin-top: 40px;
    }
    .fondtexteaccueil h3 {
        font-size: 1em;
    }
    .fondtexteaccueil p {
        font-size: 0.8em;
    }
    .titreflex h1 {
        font-size: 1.5em;
    }
    .titreflex h2 {
        font-size: 1.3em;
    }
    .star {
        margin: 60px;
    }
    .bordure {
        margin: 60px;
        width: 50%;
    }
    /***********Équipe**************/
    .grid3 h1 {
        font-size: 1.5em;
    }
    .grid3 h2 {
        font-size: 1.3em;
    }
    /***********Contact************/
    .flex3 h1 {
        margin-top: 15%;
        font-size: 1.5em;
    }
}

/***********************************************/

/*changements à partir de 800px */

/***********************************************/

@media only screen and (min-width: 800px) {
    nav li {
        font-size: 110%;
        margin: 40px;
    }
    #contact nav li {
        font-size: 110%;
        margin: 40px;
    }
    /**********Accueil************/
    #accueil header img {
        width: 30%;
    }
    .sectionflex {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin-top: 60px;
        max-width: 1700px;
    }
    .fondtexteaccueil h3 {
        font-size: 1.2em;
    }
    .fondtexteaccueil p {
        font-size: 1em;
    }
    .titreflex h1 {
        font-size: 2em;
    }
    .titreflex h2 {
        font-size: 1.7em;
    }
    .star {
        margin: 60px;
        grid-gap: 10px;
        min-height: 350px;
    }
    .star>img {
        width: 100%;
    }
    .star p {
        font-size: 1em;
    }
    .avis {
        display: grid;
        grid-template-columns: 1fr 1fr;
        max-width: 1700px;
    }
    .avis .bordure {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        margin: 0;
        margin-left: 60px;
    }
    .avis article:first-child {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    .avis article:last-child {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }
    .bordure {
        margin: 60px;
        width: 30%;
    }
    .fond-service1:first-child {
        width: 40%;
    }
    .fond-service2:nth-child(2) {
        width: 40%;
    }
    .fond-service3:nth-child(3) {
        width: 40%;
    }
    .fond-service4:nth-child(4) {
        width: 40%;
    }
    /**********Équipe***********/
    .grid3 h1 {
        font-size: 2em;
    }
    .grid3 h2 {
        font-size: 1.7em;
    }
    .article h2 {
        font-size: 1.3em;
    }
    .article h3 {
        font-size: 1em;
    }
    .article p {
        font-size: 1em;
        /* margin-left: 15%;
        margin-right: 15%; */
        max-width: 300px;
    }
    .grid4 {
        grid-area: article;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .grid5 p {
        font-size: 1.4em;
        font-weight: bold;
    }
    .grid5 h2 {
        font-size: 1.7em;
    }
    /************Contact**********/
    .flex3 h1 {
        margin-top: 15%;
        font-size: 2.1em;
    }
    .flex3 p {
        font-size: 1.2em;
    }
    .contactmedia {
        display: flex;
        flex-direction: row;
        margin-top: 100px;
        justify-content: space-around;
    }
}