/*
POLICES
- Par défaut : Nunito (Google fonts)
- Titres et nav : Fjalla One (Google fonts)

TAILLE DES POLICES
- par défaut : 18px
- titre du site : 20px
- menu : 20px
- titre de la page d'accueil : 30px et 20px
- titre des pages intérieures : 30px
- sous-titres : 25px
- titres articles : 20px
- textes colonne de droite : 16px
- auteurs : 14px*/

/*GENERAL*/
body {
    font-family:"Nunito", sans serif;
    margin:0;
    padding:0;
    background-color:#ededed;
    font-size:18px;
    color:#414141;
    line-height:1.5em;
}
.container {
    margin:40px;
    max-width:1500px;
}
.turquoise, #titresite, h1, h2, h3, nav {
    font-family:"Fjalla One", sans serif;
    text-align:center;
}
section {
    margin:0;
    padding:0;
}
h1{
    text-transform:uppercase;
    color:#CB8606;
    font-size:30px;
}
h1::before, h1::after {
    content:" - ";
    color: #00748D;
    font-weight: bold;
}
h2 {
    color:#00748D;
    margin-top:2rem;
}
h2::before, h2::after {
    content:" - ";
    color: #CB8606;
    font-weight:bold;
}
img {
    max-width:100%;
    width:auto;
    height:auto;
    border:3px solid #00748D;
}
/*HEADER et FOOTER*/
header, footer {
    color:white;
}
.turquoise  ul {
    list-style:none;
    display:flex;
    align-items:end;
}
.turquoise a{
    text-decoration:none;
    color:white;
}

.turquoise {
    background-color: #00748D;
    font-size:20px;
    background-image:url(gallery/path.png);
    background-repeat:repeat-x;
    background-position:bottom;
    padding:1em;
}
.turquoise nav {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}
.logo {
    display:flex;
    flex-wrap:wrap;
    align-items:end;
}

#slogan {
    padding:0;
    margin:0;
}
.imglogo {
    margin:4px 8px;
}
a:hover {
    cursor:pointer;
}

/*MENU*/
header nav > *, footer nav > * {
    margin: 0 0 1em 0;
}
header ul {
    padding:0;
    justify-content:space-between;
}
header ul a {
    padding: 0.5em 1em;
    margin: 0 0.5em 2em 0.5em;
}

.colnav {
    width:60%;
}

header ul a:hover, header ul a:active {
    background-color:white;
    color:#00748D;
}
header .sectionouverte {
    background-color:white;
    color:#00748D;
}

/*SOUS HEADER*/
.ss-header {
    text-align:center;
    background-image:url(gallery/bg-header.jpg);
    background-size:cover;
    background-position:center;
    padding-top: 10em;
    padding-bottom:7em;
    margin-bottom:5rem;
}
#ss-header {
    display:flex;
    flex-direction:column;
}
#titresite {
    display:inline-block;
    margin: 0 0 0.5em 0;
    padding:0.5em 1em;
    color:white;
    background-color:#CB8606;
    text-transform:uppercase;
    font-size:30px;
    font-weight:bold;
}
#ss-titre {
    display:inline-block;
    background-color: white;
    color:#00748D;
    font-weight:bold;
    padding: 0.5em 2em ;
    font-size:20px;
}

/*ARTICLES*/
.flex {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-top:3rem;
}
.flex > * {
    flex-basis:22%;
}
article {
    margin-bottom:6em;
}
.imgpresta {
    margin-bottom:2rem;
    text-align:center;
}
.imgpresta>img {
    border: 3px solid #00748D;
}
.flex article i {
    background-color:#CB8606;
    color:white;
    padding:0.5em;
}
.center {
    text-align:center;
}

/*BOUTON EN SAVOIR PLUS*/
.button {
    text-align:center;
    font-size:18px;
    color:white;
    font-weight:bold;
    background-color:#00748D;
    border:none;
    padding: 0.7em 2em;
    margin:auto;
    display:block;
    width:70%;
}
.button:hover {
    cursor:pointer;
}

/*FOOTER*/
footer nav ul a {
    color:white;
    font-size: 1.5em;
    padding:0 0.3em;
    margin:0;
}
footer nav ul a:hover {
    color:#CB8606;
}
footer nav ul {
    margin:0;
}
footer nav {
    align-items:center;
}

/*FOOTER 3WA*/
.footer {
    padding: 2em;
	text-align: center;
	color: #fff;
	background-color: #444;
}
.footer a {
    text-decoration:none;
    color:#DD5735;
}
.footer a:hover {
	text-decoration: underline;
	color: #000;
}
.footer img {
    height:4em;
}


@media screen and (min-width:780px) and (max-width:1100px) {
    header .turquoise nav {
        flex-direction:column;
        justify-content:space-between;
    }
    header .turquoise nav > * {
        margin-top:1em;
    }
    header .turquoise .logo {
        flex-direction:column;
        align-items:center;
    }
    header .turquoise ul {
        justify-content:space-around;
    }
    .flex > * {
        flex-basis:48%;
    }
}
@media screen and (min-width:630px) and (max-width:780px) {
    header .turquoise nav {
        flex-direction:column;
        justify-content:space-between;
    }
    .turquoise nav > * {
        margin-top:1em;
    }
    .turquoise .logo {
        flex-direction:column;
        align-items:center;
    }
    .turquoise ul {
        justify-content:space-around;
        padding:0;
    }
    .flex > * {
        flex-basis:98%;
    }
    footer nav {
        flex-direction:column-reverse;
    }
}
@media screen and (max-width:630px) {
    header .turquoise nav {
        flex-direction:column;
        justify-content:space-between;
    }
    .turquoise nav > * {
        margin-top:1em;
    }
    .turquoise .logo {
        flex-direction:column;
        align-items:center;
    }
    .turquoise ul {
        justify-content:space-around;
        padding:0;
    }
    .flex > * {
        flex-basis:98%;
    }
    footer nav {
        flex-direction:column-reverse;
    }
    header .turquoise ul {
        flex-direction:column;
    }
    header nav li {
        display:block;
        margin: auto;
        width:100%;
    }
    header nav li a {
        display:block;
        margin-bottom:0;
    }
}

/********************** PAGE REALISATIONS ************************
COULEURS
- fond turquoise : #00748D
- jaune orangé : #CB8606
- fond gris clair: #f9f9f9
- texte : #414141*/
.cols {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
.mainarticles {
    width:75%;
}
#aside {
    display:flex;
    width:20%;
    font-size:16px;
    flex-direction:column;
}
#scroll {
    height:450px;
    overflow:scroll;
}
#tweets {
    line-height:1.3em;
}

/*GALLERY*/
#imgReal {
    display:grid;
    grid-template-areas:
    "bed1 lam1 dec2 dec1"
    "lam2 liv1 dec2 kit1"
    "lam2 kit3 bed2 kit2"
    "dec3 liv4 liv2 kit2"
    "off2 liv4 liv3 off1";
    grid-template-columns:repeat(4, 1fr);
    gap: 1rem;
}

/*Intégration responsive en retrofitting / desktop first
Le contenu a un maximum de 1500px de large mais les fonds de couleur de l'entête et du pied de pge font toute la largeur 
de la fenêtre du navigateur quelque soit sa taille.
Les points de rupture :
- 1100px pour tablette
-990px
- 780px pour mobile
- petits mobiles 630px
*/
@media screen and (min-width:990px) and (max-width:1100px) {
    #gallery {
        width:100%;
    }
    #aside {
        width:100%;
        flex-direction:row;
        flex-wrap:nowrap;
    }
    #temoignages {
        width:30%;
    }
}
@media screen and (min-width:780px) and (max-width:990px) {
    #imgReal {
        grid-template-areas:
        "bed1 lam1 dec2"
        "dec1 lam2 dec2"
        "liv1 lam2 kit1"
        "kit3 bed2 kit2"
        "dec3 liv4 kit2"
        "liv2 liv4 off2"
        "liv3 off1  .";
        grid-template-columns:repeat(3, 1fr);
    }
    #gallery {
        width:100%;
    }
    #aside {
        width:100%;
        flex-direction:row;
        flex-wrap:nowrap;
    }
    #temoignages {
        width:30%;
    }
}
@media screen and (min-width:630px) and (max-width:780px) {
    #imgReal {
        grid-template-areas:
        "bed1 lam1"
        "dec2 dec1"
        "dec2 lam2"
        "liv1 lam2"
        "kit1 kit3"
        "bed2 kit2"
        "dec3 kit2"
        "liv4 liv2"
        "liv4 off2"
        "liv3 off1";
        grid-template-columns:repeat(2, 1fr);
    }
    .cols {
        flex-direction:columns;
    }
    #gallery {
        width:100%;
    }
    #aside {
        width:100%;
        flex-direction:row;
        flex-wrap:wrap;
    }
    #temoignages {
        width:100%;
    }
}

@media screen and (max-width:630px) {
    #imgReal {
        display:flex;
        flex-direction:column;
    }
    #gallery h1 {
        margin:1em;
        line-height:1.5;
        margin-bottom:3rem;
    }
    #imgReal img {
        width:100%;
    }
    .cols {
        flex-direction:columns;
    }
    #gallery {
        width:100%;
    }
    #aside {
        width:100%;
        flex-direction:row;
        flex-wrap:wrap;
    }
    #temoignages {
        width:100%;
    }
}

#bed1 {
    grid-area:bed1;
}
#bed2 {
    grid-area:bed2;
}
#lam1 {
    grid-area:lam1;
}
#lam2 {
    grid-area:lam2;
}
#dec1 {
    grid-area:dec1;
}
#dec2 {
    grid-area:dec2;
}
#dec3 {
    grid-area:dec3;
}
#liv1 {
    grid-area:liv1;
}
#liv2 {
    grid-area:liv2;
}
#liv3 {
    grid-area:liv3;
}
#liv4 {
    grid-area:liv4;
}
#off1 {
    grid-area:off1;
}
#off2 {
    grid-area:off2;
}
#kit1 {
    grid-area:kit1;
}
#kit2 {
    grid-area:kit2;
}
#kit3 {
    grid-area:kit3;
}


/*ASIDE*/

.avis {
    padding-left: 40px;
    background-image:url("gallery/quote.png");
    background-repeat:no-repeat;
    background-position:top left;
}
.id {
    padding-left: 40px;
    background-image:url("gallery/client.png");
    background-repeat:no-repeat;
    background-position:top left;
    color:#00748D;
    font-weight:bold;
    font-style:italic;
}
hr {
    color:#CB8606;
    width:25%;
}
#temoignages article {
    margin:0;
}
#tweets ul {
    list-style:none;
    padding:0;
}
.tweet::before {
    content:url(gallery/circle.png);
    margin-right: 1em;
}
.tweet {
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    width:95%;
}
#aside section {
    margin-top:5em;
}
/********************** PAGE ACTUALITE ************************/
.mainarticles .actu img {
    border:none;
    float:left;
    width:500px;
    margin: 0 1em 0.5em 0;
}
.actu .button {
    width:auto;
    margin:2em 0 0 0;
    font-weight:600;
}