/*********************** 
         FONTS 
************************/
@font-face {
    font-family: "Candal";
    src: url(../fonts/Candal-Regular.ttf);
}
@font-face {
    font-family: "Open";
    src: url(../fonts/OpenSans-Light.ttf);
}
/*********************** 
         HTML 
************************/
html {
    box-sizing:border-box;
}
body{
    font-family: Candal, Open, Arial;
    font-size:0.8em;
}
span {
   color:rgb(253,141,157); /*rose*/;
   text-align:center;
   padding-top:1em;
}
/*********************** 
         TITLES 
************************/
h1{
    font-size:3em; 
    color: #fff;
}
h2{
    font-size:1.8em; 
    padding:1em;
    border-top: 1px dashed black;
    border-left: 1px dashed black;
    border-right: 1px dashed black;
    color: rgb(3,40,51);
}
h3{
    font-size:1.2em;
    color: #fff;
    text-align:center;
    background-color:rgb(33,62,78);
    padding:1.5em;
}
/*********** ICONS **************/
.fa-cogs, .fa-chart-area, .fa-database, .fa-users, .fa-user, .fa-cloud, .fa-envelope, .fa-phone-alt, .fa-paper-plane{
    margin: 0.5em auto;
    color:rgb(253,141,157); /*rose*/
    font-size:30px;
}
/*********MENU*************/
.menu{
    display:flex;
    flex-direction:column;
    padding: 1em 0em 1em 0em;
}
/*********************** 
      HEADER - NAV 
************************/ 
.logo {
    margin-bottom:2em;
}
nav{
    padding-top: 2rem;
    display:flex;
    flex-direction: column;
    align-items: center;
}
nav a {
    text-decoration:none;
    color: rgb(3,40,51); /*noir bleuté*/

}
header svg{
    color:rgb(253,141,157); /*rose*/
    margin: 0 auto;
    font-size: 50px;
}
.background-hebergement{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding: 0em 0.8em 0em 0.8em;
    background:url("../img/background.jpg") no-repeat center;
    text-align: center;
    color: #fff;
    height: 400px;
    line-height: 2;
}
.research {
    padding:0.2em 0em 0.2em 4em;
    margin-bottom:4em;
    background-color: rgb(253,141,157);
    color: rgb(255,255,255,0.5);
}
/*********************** 
      MAIN 
************************/
main {
    max-width:80%;
    margin: 0 auto;
}
main p {
    font-family:Open;
}
section article{
    display:flex;
    flex-direction:column;
}

section article a {
    text-align:center;
    text-decoration:none;
    color:rgb(253,141,157); /*rose*/
}
.dashed {
    border: 1px dashed black;
    padding: 0.5em;
    margin-bottom: 2em;
}
.order {
    width: 98%;
    margin: 0 auto;
    padding: 1em 0em 1em 0em;
    text-align:center;
    background-color: rgb(253,141,157); /*rose*/;
    color: #fff;
    font-weight: bold;
}
article.dashed ul li{
    list-style-type: circle;
}
article.dashed:nth-child(2) { /* espace entre serveur mutualisé (h2) et le premier article > h3*/
    margin-top: 2.5em;
}
.dashed p {
    padding:0em 2em 0em 2em;
}
.price{
    color:rgb(101,102,104);
    padding:1.5em;

}
.map > iframe {
    width: 100%;
    height: 400px;
}
.pink-dashed {
    margin-top: 2em;
    border-bottom: 1px dashed rgb(253,141,157); /*rose*/
    padding-bottom:0.5em;
}
.text-center{
    text-align:center;
}
/*********************** 
         FOOTER
************************/
footer {
    margin-top:2em;
    background-color:rgb(33,62,78);
    padding-bottom: 2em;
}
footer > div {
    display:flex;
    flex-direction: column;
    text-align:center;
}
footer > div > a {
    text-decoration: none;
    color:#fff;
    padding: 2em;
}
#licence {
    display: block;
    text-align: center;
    padding: 25px;
    line-height:2;
    color: gray;
    font-family:Open;
}
#licence img {
    width: 50px;
}
#licence a {
    color:#fff;
    text-decoration:none;
}

/**************************************
           DISPLAY -> DESKTOP 
**************************************/
@media screen and (min-width: 1200px) {

/*********************** 
         NAV
************************/
nav{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    display:flex;
    flex-direction: row;
    justify-content:space-around;
    align-items: center;
}
nav:hover a{
    color:rgb(253,141,157); /*rose*/
}
nav:hover svg{
    color:#203e4d;  /* noir bleuté */
}
/*********************** 
          MAIN 
************************/

h2 {
    text-align:center;
}
section{
    display:flex;
    flex-direction:row;
}
.row {
    display:flex;
    flex-direction:row;
}
article.dashed:nth-child(2) {
    margin-top: 0em;
}
body > main:nth-child(2) > div:nth-child(1) > p:nth-child(2) {
    padding-bottom: 2em;
}
.dashed {
    margin-right: 2em;
    width: 33%;
}
.j-c{
    justify-content:center;
}
.col3 {
    margin-right: 2em;
    width: 33%;
}

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

footer > div {
    display:flex;
    flex-direction: row;
    justify-content:space-around;
}
footer > div a{
    padding:3em 2em 2em 2em;
}
}