/* Table of Content
==================================================
    #Reset & Basics
    #Variables
    #Fonction utilitaires
    #Basic Styles
        #Header
        #Main
        #Contact
        #Footer
    #Medias queries
*/

/****************************************** #Reset & Basics (Inspired by E. Meyers)****************************************** */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0;
    font-size: 100%;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { /* HTML5 display-role reset for older browsers */
    display: block; }
body {
    line-height: 1; }
ol, ul {
    list-style: none; }
blockquote, q {
    quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none; }
table {
    border-collapse: collapse;
    border-spacing: 0; }

/*******************************************  #Variables****************************************** */
/*Couleurs*/
@darkColor : #111304;
@midColor : #E0E0E0;
@lightColor : #fff;
@black: #000;

@14px: 0.875em;

/*******************************************  #Polices****************************************** */
@font-face {
    font-family: 'OpenSans';
    src: url('OpenSans-Regular-webfont.eot');
    src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-Regular-webfont.ttf') format('truetype'), url('OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: 400;   
    font-style: normal;
}
@font-face {
    font-family: 'OpenSans';
    src: url('OpenSans-Semibold-webfont.eot');
    src: url('OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-Semibold-webfont.ttf') format('truetype'), url('OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
    font-weight: 600;    
    font-style: normal;
}
@font-face {
    font-family: 'OpenSans';
    src: url('OpenSans-Bold-webfont.eot');
    src: url('OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-Bold-webfont.ttf') format('truetype'), url('OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
    font-weight: 700;
    font-style: normal;
}

/*******************************************  #Utilitaires ****************************************** */

.box-sizing () {
    box-sizing: border-box !important; -moz-box-sizing: border-box !important; -webkit-box-sizing: border-box !important;
}

.background-gradient (@color1, @color2) {
    background: @color1; /* Old browsers */
    background: -moz-linear-gradient(top, @color1 0%, @color2 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@color1), color-stop(100%,@color2)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, @color1 0%,@color2 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, @color1 0%,@color2 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, @color1 0%,@color2 100%); /* IE10+ */
    background: linear-gradient(to bottom, @color1 0%,@color2 100%); /* W3C */
}

.easing () {
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -ms-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out;
}

/*******************************************  #Basic Styles****************************************** */
body {
    background: center top url('../img/bg_header.jpg') no-repeat #120E0B;
    color: #fff;
    font: 100% "Open Sans", Helvetica, Arial, sans-serif;
    position:relative;
    text-align: center;
    width: 100%;
}

h1, h2, h3, h4 {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
}
    

a {
    text-decoration: none;
}

.clear {
    clear: both;
}
.inner {        /*Grille intérieure*/
    margin: 0 auto;
    overflow: hidden;
    width: 960px;
}

.energy-star{
    height:auto;
    position:absolute;
    right:60px;
    top:40px;
    width:80px;
}
/*******************************************  #Header ****************************************** */
header {
    color: @lightColor;
    min-height: 860px;


    img {
        margin: 95px 0 80px;
    }

    h2, p {
        margin: 0 auto;
        text-shadow: 0px 2px 2px rgba(0, 0, 0, 1); /*Angle 90 deg*/
        width: 450px;
    }

    h2 {
        font-size: 2.1875em;
        line-height: 1.285714285714286em;
    }

    p {
        font-weight: 600;
        line-height: 1.3125em;
        padding: 48px 0;
    }

    a {
        color: #fff;
        border: 1px solid rgb(231, 231, 232); /* The Fallback */
        border: 1px solid rgba(231, 231, 232, 0.8);
        display: block;
        .easing();
        font-size: @14px;
        font-weight: 700;
        margin: 0 auto;
        padding: 18px 20px;
        text-transform: uppercase;
        width: 140px;

        &:hover {
            background: rgb(255, 255, 255);
            background: rgba(255, 255, 255, 0.1);
        }
    }
}


/*******************************************  #Main Section ****************************************** */
section#main {
    background-color: #9fbc3b;
    .background-gradient(#a0bd3b, #55863a);
    color: #222;

    h1, h3 {
        text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
    }
    img {
        background: 0 0 url('../img/bg_window.png') no-repeat;
        float: left;
        left: -50px;
        height: auto;
        padding: 35px 35px 20px 100px;
        position: relative;    
    }
    p {
        font-weight: 600;
        line-height: 1.333333333333333em;
    }

    .inner{
        overflow: visible;
    }
    
    div#window-description {
        float: right;
        margin-top: 90px;
        width: 62%; /*58.33333333333333%; /*560px*/

        h1 {
            font-size: 1.75em;
            margin-bottom: 40px;
        }
        p {
            font-size: 1.125em;
        }
    }

    div#window-quality {
        clear: both;
        overflow: hidden;
        padding: 40px 0;

        div {
            border-right: 1px solid rgb(238, 238, 238); /* The Fallback */
            border-right: 1px solid rgba(238, 238, 238, 0.4);
            .box-sizing();
            float: left;
            min-height: 205px;                
            padding: 0 10px;
            width: 25%;

            &:last-child {
                border: none;
            }

            h3 {
                line-height: 185px;
                font-size: 1.5em;
            }
            p {
                display: none;
                font-size: @14px;
                margin-top: 25px;
            }
        }  
    }
}

p.energy-partner {
    color:#fff;
    font-size: 18px;
    font-weight:600;
    margin:30px 0 0 0;
    text-transform:uppercase;
    span{
        display:block;
        font-size:14px;
        font-weight:normal;
        text-transform:none;
    }
}
/*******************************************  #Contact Section ****************************************** */
section#contact {
    background: #fff;
    padding: 70px 0;

    div#contact__info, div#contact__form {
        float: left;
        width: 50%;
    }

    div#contact__info {
        & > img {
            height: auto;
            width: 97px;
            &.partner{
                height:auto;
                margin:40px 0 20px;
                width:80px;
            }

        }
        a, p {
            margin: 0 auto;
            width: 69.375%;
        }

        p#contact__info__partner {
            color: #000;
            font-weight: 600;
            line-height: 1.1875em;
            margin-top: 30px;
        }
        p#contact__info__desc {
            color: #666;
            font-size: @14px;
            line-height: 1.142857142857143em;
            margin-top: 22px;
        }
        a {
            color: #83a63b;
            display: block;
            margin-top: 25px;
        }
        p#contact__info__phone {
            color: #83a63b;
            font-size: 1.875em;
            font-weight: 700;
            margin-top: 10px;
        }
        ul {
            display: inline-block;
            margin-top: 43px;

            li {
                float: left;
                margin: 0 20px;
            }
        }
    }

    div#contact__form {

        form {
            color: #666666;

            p { 
                position: relative;
            }
            label { 
                position: absolute; 
                top: 15px; 
                left: 15px;
            }
            input {
                font-family: "Open Sans";
            }

            input[type='text'], textarea {
                background: #ebebeb;
                border: none;
                .box-sizing();
                color: #666666;
                height: 50px;
                margin-bottom: 20px;
                padding: 15px;
                width: 100%;

                &.error {
                    border: 2px solid #dd1818;
                }
            }

            textarea {
                height: 183px;
            } 

            input[type='button'], input[type='submit'], button {
                background-color: #9fbc3b;
                .background-gradient(#a0bd3b, #55863a);
                border: none;
                .box-sizing();
                color: #fff;
                float: left;
                font-size: 1.125em;
                font-weight: 700;
                height: 50px;   
                text-transform: uppercase;             
                width: 180px;

                &:hover{
                    .background-gradient(#55863a, #a0bd3b);
                }
            }

            p#error-message {
                color: #dd1818;
                float: left;
                font-size: @14px;
                padding: 5px 0 5px 30px;
                text-align: left;
                width: 50%;
            }
        }

        #contact__form__send {
            clear: both;

            p:first-child {
                color: #000;
                font-size: ;
                font-weight: 600;
                margin-top: 30px;
            }
            p:last-child {
                color: #666;
                font-size: @14px;
                margin-top: 22px;
            }
        }
    }
}

/*******************************************  #Footer ****************************************** */
footer {
    color: #666;
    background: #f4f4f4;
    font-size: 0.6875em;
    padding: 20px 0;

    h6 {
        text-align: center;

        a {
           color: #666; 
        }
        span {
            color: #ccc;
        }
    }
}

/*******************************************  #Media queries ****************************************** */

/*--------------------------------------------------  
*   Grossir la grille principale de 960px à 90%
*   Augmenter la hauteur minimale des DIV contenant la description des qualités 
**/
@media screen and (max-width: 1084px) {
    .inner {   
        width: 90%;
    }

    /*  #Main Section  */
    section#main {

        img {
            background: none;
            left: 0px;
            padding: 35px 0 20px 50px;
            position: relative;    
        }

        div#window-quality {

            div {
                min-height: 225px;
            }
        }
    }
}

/*--------------------------------------------------  
*  
*   Grossir la grille principale de 90% à 95%
**/
@media screen and (max-width: 950px) {
    
    .inner {   
        width: 95%;
    }

    /*  #Main Section  */
    section#main {

        div#window-quality {

            div {
                padding: 10px;

                h3 {
                    line-height: normal !important;
                    font-size: 1.5em;
                }
                p { 
                    font-size: @14px;                    
                    display: block !important;
                    /*font-size: 0.95em;          */
                    margin-top: 25px;
                }
            }
        }
    }/*fin de section#main*/

    /*  #Contact Section  */
    section#contact {

        div#contact__info {
            a, p {
                width: 80%;
            }
        }

        div#contact__form {

            form {
                
                p#error-message {
                    clear: both;
                    padding: 15px 5px 5px 0px;
                    text-align: left;
                    width: 100%;
                }
            }
        }
    }/*fin de section#contact*/
}

/*--------------------------------------------------   
*  
*   Mettre les DIV qualités de fenêtres sur deux lignes
**/
@media screen and (max-width: 780px) {
    
    /*  #Main Section  */
    section#main {
        img {
            width: 25%;
        }

        div#window-description {

            h1 {
                font-size: 1.5em;
            }
            p {
                font-size: 1em;
            }
        }

        div#window-quality {
            padding: 0 0 40px;

            div {
                margin: 10px 0;
                padding: 10px 25px;
                width: 50%;

                &:nth-child(2) {
                    border: none;
                }
                &:nth-child(3) {
                    clear: both;
                }
                
                p {
                    margin-top: 25px;
                }
            }
        }
    } /*fin de section#main*/

    /*  #Contact Section  */
    section#contact {

        div#contact__info {
            a, p {
                width: 92%;
            }
        }
    } /*fin de section#contact*/
}

/*--------------------------------------------------   
*   Centrer l'image de fenêtre dans la section MAIN
*   Faire passer le texte de description en dessous de l'image
**/
@media screen and (max-width: 670px) {
    
    /*  #Main Section  */
    section#main {
        
        img {
            float: none;
            margin: 0 auto;
            padding: 35px 0;
            position: static;
            width: 25%;
        }

        div#window-description {
            clear: both;
            float: none;
            margin-top: 0px;
            width: 100%;
        }

        div#window-quality {
            padding: 40px 0;     
        }

    } /*fin de section#main*/

    /*  #Contact Section  */
    section#contact {

        div#contact__info {
            
            p#contact__info__partner {
                margin-top: 30px;
            }
            p#contact__info__desc {
                margin-top: 22px;
            }
            a {
                margin-top: 25px;
            }
            p#contact__info__phone {
                margin-top: 10px;
            }
            ul {
                li {
                    margin: 0 20px;
                }
            }
        }
    } /*fin de section#contact*/
}

/*--------------------------------------------------   
*   Faire passer le FORM en dessous de la DIV d'informations
*   
**/
@media screen and (max-width: 575px) {

    /*  #Header  */
    header {
        img {
            margin: 60px 0 60px;
        }
    } /*FIN de header*/

    /*  #Contact Section  */
    section#contact {
        padding: 40px 0;

        div#contact__info, div#contact__form {
            float: none;
            width: 100%;
        }

        div#contact__info {
            
            ul {
                margin-top: 25px;

                li {
                    img {
                        height: auto;
                        width: 90%;
                    }
                }
            }
        }

        div#contact__form {
            margin-top: 30px;

            form {
                margin: 0 auto;
                width: 90%;

                input[type='button'], input[type='submit'], button { 
                    float: left;
                }

                p#error-message {
                    clear: none;
                    font-size: @14px;
                    padding: 5px 0 5px 30px;
                    text-align: left;
                    width: 50%;
                }  
            }
        }
    } /*fin de section#contact*/
}

/*--------------------------------------------------   
*   Quatre qualités une en dessous de l'autre dans la section MAIN
*   Enlever l'affichage au survol, afficher instantanément les paragraphes de description
**/
@media screen and (max-width: 510px) {

    .energy-star{
        right:40px;
        top:20px;
    }

    /*  #Header  */
    header {
        
        h2, p {
            width: 100%;
        }

        h2 {
            font-size: 1.85em;
            line-height: 1.2em;
        }

    } /*FIN de header*/ 

    /*  #Main Section  */
    section#main {

        div#window-quality {
            padding: 50px 0 0 0;

            div, div:nth-child(2) {
                border: none;
                border-bottom: 1px solid rgb(238, 238, 238); /* The Fallback */
                border-bottom: 1px solid rgba(238, 238, 238, 0.2);
                clear: both; 
                margin: 10px 0;
                min-height: 170px;
                padding: 10px 25px;
                width: 100%;

                &:last-child {
                    border: none;
                }
            }
        }
    } /*FIN de section#main*/   

    /*  #Contact Section  */
    section#contact {

        div#contact__form {

            form {
                
                p#error-message {
                    clear: both;
                    padding: 15px 5px 5px 0px;
                    text-align: left;
                    width: 100%;
                }
            }
        }
    }/*fin de contact*/

    /*  #Footer  */
    footer {

        h6 {
            margin: 0 auto;
            width: 90%; 
        }
    }
}

@media screen and (max-width: 320px) {

    .energy-star{
        right:20px;
        top:20px;
    }
 
    /*  #Header  */
    header {
        img {
            margin: 35px 0 50px;
        }

        h2 {
            font-size: 1.7em;
            line-height: 1.2em;
        }

    } /*FIN de header*/

    /*  #Main Section  */
    section#main {
        img {
            padding: 25px 0;
        }

        div#window-quality {
            div {
                min-height: 205px;

                h3 {
                    line-height: normal !important;
                }
                p {
                    display: block !important;
                }
            }
        }
    } /*FIN de section#main*/   

    /*  #Contact Section  */
    section#contact {
        padding: 30px 0;

        div#contact__form {

            form {

                input[type='button'], input[type='submit'], button { 
                    width: 100%
                }
            }
        }
    }/*fin de contact*/
}

/*IE8*/
html.lt-ie9 {
    border: 1px solid blue;

    header {
        a {
            &:hover {
                background: #060604;
            }
        }
    }

    /*******************************************  #Main Section ****************************************** */
    section#main {
        div#window-quality {
            div {
                h3 {
                    line-height: normal;
                }
                p {
                    display: block;
                }
            }  
        }
    }

}/*fin de lt-ie9*/