html {

}

body {
    font-family: 'Oxygen', Arial, sans-serif; font-size: 18px;
}

.container { 
    position: relative; z-index: 10; 
}

main {
    position: relative; text-align: justify; color: $color-standard-text;
    @include media("<=sm") { text-align: left; }
}

.contenu {
    padding: 0 70px 40px 90px; text-align: justify;
    @include media("<=md") { padding: 0px 30px 40px 30px; }
    @include media("<=sm") { text-align: left; }
}

article {
    p { margin-bottom: 20px; }
    [class*='col-'] p:last-child, td p:last-child {
        margin-bottom: 0;
    }
    ul { padding-bottom: 10px; list-style: none; }
    ol { padding-bottom: 10px; }
    ul li {
        &::before {
            content: "•"; color: $color-standard-text; display: block; position: relative; max-width: 0; max-height: 0; float: left; margin-left: -20px; font-size: 25px; line-height: 25px;
        }
    }
    ul li li {
        &::before {
            content: "-"; line-height: 20px;
        }
    }
    ol li, ul li { margin: 0 0 10px 0; }
    ul ul, ul ol, ol ul, ol ol {
        margin: 10px 0 0 0;
    }
    img { display: block; height: auto; max-width: 100%; }
    iframe { border: 0; }
    a, a:visited {
        text-decoration:underline; color: #285b94; text-decoration:underline; color: #285b94; hyphens: auto; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; cursor: pointer;
    }
    a:hover, a:visited:hover {
        text-decoration:none; color: #285b94;
    }
}


a { outline: none; }
:focus { -moz-outline-style: none; }





/*------------------------------------------------------------------
    #Headers
------------------------------------------------------------------*/

.h1, .h2, .h3, h1, h2, h3 {
  margin-top: 40px; margin-bottom: 10px;
}

h1, .h1 {
    font-size: 2.4em; line-height: 1.2em; font-weight: normal; text-align: left; margin-bottom: 40px;
    @include media("<=sm-small") { font-size: 1.8em; }
}

h2, .h2 {
    font-size: 1.6em; line-height: 1.2em; font-weight: normal; text-align:left; margin-bottom: 40px;
    @include media("<=sm-small") { font-size: 1.4em; }
}

h3, .h3 {
    font-size: 1.4em; line-height: 1.2em; font-weight: normal; text-align: left; margin-bottom: 20px; color: $color-primary;
    @include media("<=sm-small") { font-size: 1.2em; }
}

h4, .h4 {
    font-size: 1em; line-height: 1.3em; font-weight: bold; color: #C56135; text-align: left; margin-bottom: 20px;
}

h5, .h5 {
    font-size: 1em; font-weight: bold; color: #C56135; text-align: left; margin-bottom: 20px;
}

article h1:first-of-type, section h1:first-of-type, section h2:first-of-type, hr + h1, h1 + h2, hr + h2 { 
    margin-top: 0; 
}


.photo-top {
    position: relative; overflow: hidden; background-color: $color-primary; /*background-attachment: fixed;*/ background-position: center top; /*background-size: cover;*/ background-repeat: no-repeat;
    @include media("<sm") { background-size: inherit; background-attachment: scroll }
    .container {
        @include media("<sm") { height: 300px; }
        @include media(">=sm") { height: 450px; }
        @include media(">=lg") { height: 640px; }
    }
    h1 {
        color: #fff; text-shadow: 1px 1px 5px rgba(0,0,0,0.5); position: absolute; left: 15px; bottom: 40px; margin: 0;
        @include media(">=sm") {
            &::after {
                content: ""; position: absolute; top: -50px; right: -75px; width: 100px; height: 70px; background: url(/images/logo-seul.png) no-repeat left top; background-size: cover;
            }
        }
        @include media(">=lg") { left: 80px; }
        @include media("<=lg") { left: 0px; }
        @include media("<=md") { left: 30px; }
        @include media("<=sm") { left: 15px; }
    }
}


/* Slideshow Header */

.header-slideshow-container {
    .triangle-bleu, .triangle-rouge {
        background-size: 80%;
        @include media("<=md") { background-size: 95%; }
    }
}


.slideshow-logo {
    filter: drop-shadow(0px 0px 20px #000000); margin-top: 70px; margin-right: 100px;
    @include media("<=lg") {
        margin-top: 30px;
    }
    @include media("<=md") {
        margin-top: 0; margin-right: 100px; transform: scale(.8);
    }
}

.slideshow-text-container {
    text-align: right;
    /*@include media(">=md") {
        margin-right: 75px; 
    }
    @include media("<md") {
        margin-right: 50px; text-align: center;
    }*/
    @include media("<sm") {
        font-size: 1.5em;
    }
}

/*------------------------------------------------------------------
    /#Headers
------------------------------------------------------------------*/






/*------------------------------------------------------------------
    #Modele de pages
------------------------------------------------------------------*/

.faq {
    counter-reset: faq-counter;
}
.faq h3::before {
    counter-increment: faq-counter; content: counter(faq-counter) "- ";
}


/*------------------------------------------------------------------
    /#Modele de pages
------------------------------------------------------------------*/




/*------------------------------------------------------------------
    #Home
------------------------------------------------------------------*/

body[data-section-id="accueil"] {
    .header-slideshow-container {
        .triangle-bleu {
            height: 500px;
        }
    }
    @include media("<=sm") { 
        .ls-layer { display: none !important; }
    }
}




/*.ls-layer-text.ls-layer {
    @include media("<=md") {
        width: auto !important;
    }
}*/


/*------------------------------------------------------------------
    /#Home
------------------------------------------------------------------*/




/*------------------------------------------------------------------
    #Contact
------------------------------------------------------------------*/

#map {
    width: 100%; height: 450px;
}

.contact_form .notification_error {
    padding: 5px 10px; background-color: #8c0e01; color: #fff; margin-bottom: 20px;
}

/*------------------------------------------------------------------
    /#Contact
------------------------------------------------------------------*/



/*------------------------------------------------------------------
    #Autres
------------------------------------------------------------------*/



/* Show les Wow dans Surreal */
.is-cms .wow {
    display: block; opacity: 1; visibility: visible;
}
/*.wow {
  visibility: hidden;
}*/

.animated {
    z-index: 9;
}

/** Haut de page **/
.scrollToTop {
    cursor:pointer; position:fixed; bottom: -50px; right: -50px; opacity: 1; visibility: hidden; z-index:2000; transition: all 500ms ease-out; animation-fill-mode: forwards;
    div {
        padding: 0 0 0 10px; border: 1px solid #fff; background-color: $color-dark-grey; color: #FFF; font-size: 22px; line-height: 100px; width: 100px; transform: rotate(45deg);
    }
    span {
        transform: rotate(-45deg);
    }
    &:hover {
        transform: scale(1.125) !important;
    }
}


/** Popup lightbox, editable dans Surreal **/

#popup, #popup-container {
    max-width: 600px; margin: 0 auto; text-align: center; position: relative; font-size: 16px; color: #555555;
}
#popup .repeatable, #popup-container .repeatable {
    background-color: #fff; padding: 0; border: none;
}
#popup .mfp-close, #popup-container .mfp-close {
    right: -35px; top: -35px; color: #fff; 
    @include media("<=sm") { 
        right: -15px; top: -45px; 
    }
}
#popup img, #popup-container img {
    display: block; max-width: 100%; height: auto;
}
#popup p, #popup-container p, #popup h1, #popup-container h1, .is-cms #popup-container p, .is-cms #popup-container h1 {
    margin-bottom: 20px; padding-bottom: 0;
}
#popup .repeatable p:last-child, #popup-container .repeatable p:last-child {
    margin-bottom: 0;
}

.is-cms .introduction {
   max-width: 600px; text-align: center; margin: 50px auto 0 auto; font-size: 14px; line-height: 18px; color: #555555;
   img { max-width: 45px; display: inline; vertical-align: bottom; }
}
.is-cms #popup-container {
    padding: 40px; max-width: 680px; min-height: 200px; margin: 100px auto; height: auto;
}
.is-cms #popup-container > div {
    width: 600px; margin: 0 auto 60px auto; outline: 1px dashed #999;
}
.is-cms #popup-container > div:first-child {
    outline: 5px solid green; position: relative; 
}
.is-cms #popup-container > div:first-child::before {
    content: "POPUP ACTIF"; position: absolute; top: -40px; left: 0; width: 100%; text-align: center; color: green;
}

#no-popup {
    display: none;
}
.is-cms #no-popup {
    display: block; 
}



/*------------------------------------------------------------------
    /#Autres
------------------------------------------------------------------*/


/* Si on a un header fixe, marge pour ne pas que le anchor soit caché par le header
http://nicolasgallagher.com/jump-links-and-viewport-positioning/ */
/*h1:target, h2:target, h3:target, h4:target, h5:target,
div:target, span:target, p:target, table:target, section:target, a:target {
   position: relative; border-top: 145px solid transparent; margin-top: -145px; background-clip: padding-box;
    &::before {
        content: ""; position: absolute; top: -2px; left: 0; right: 0;
    }
}*/

/*
body[data-section-id="produits"]:not([data-page-id="produits-accueil"]) h1 {
*/