﻿/* flexslider (base) */
.slides, .slides > li, .flex-control-nav, .flex-direction-nav {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align:left;
}
.flexslider { 
    position: relative;
    z-index: 2; 
}
.flex-viewport { 
    max-height: 2000px; 
    transition: all 1s ease;
}
.loading .flex-viewport { 
    max-height: 300px;
}
.flexslider .slides > li { 
    position: relative; 
    display: none; 
    -webkit-backface-visibility: hidden; 
}
.flexslider .slides img { 
    width: 100%;
    max-width: none;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.no-js .flexslider .slides > li:first-child { 
    display: block;
}
.flex-direction-nav .flex-prev {
    left: -0.5rem;
}
.flex-direction-nav a {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.375rem;
    height: 4.375rem;
    border-radius:50%;
    margin: -3.638rem 0 0;
    position: absolute;
    top: 50%;
    z-index: 10;
    overflow: hidden;
    opacity: 1;
    cursor: pointer;
    background-color: var(--blanc);
    filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.1));
    text-shadow: none !important;
}
.flex-direction-nav a span.fleche {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;   
}
.flex-direction-nav a span.fleche i {
    font-size: 1.3rem;
}
.flex-direction-nav .flex-next {
    right: -0.5rem;
    text-align: right;
}
.flex-direction-nav .icon-fleche_menu_gauche:before, .flex-direction-nav .icon-fleche_menu_droite:before {
    color: var(--accent);
}
.flex-direction-nav .icon-fleche_menu_gauche { 
    transform: rotate(180deg); 
}
.flex-direction-nav .icon-fleche_menu_gauche:before { 
    content: "\e903";
}
.flex-direction-nav a:hover {
    background-color: var(--accent);
}
.flex-direction-nav a:hover .icon-fleche_menu_gauche:before, .flex-direction-nav a:hover .icon-fleche_menu_droite:before {
    color: var(--blanc);
}



/* flexslider (carrousel principal) */
.carrousel-principal { 
    padding-right:5.625rem;
    background-color: var(--secondary);
}
.carrousel-principal figcaption {
    position: absolute;
    max-width:50%;
    left: 4rem;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    text-transform: uppercase;
    color: var(--blanc);
}
.carrousel-principal figcaption.gauche {
    left: 4rem;
}
.carrousel-principal figcaption.droite {
    left: inherit;
    right:4rem;
}
.carrousel-principal figcaption h2 {
    color: var(--blanc);
    font-weight: 900;
    margin-top: 0;
    margin-bottom: 4rem;
}
.carrousel-principal figcaption .btn {
    font-size: 1.25rem; 
}
.carrousel-principal .flex-control-nav {
    position: absolute;
    z-index: 5;
    width: 5.625rem;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
}
.carrousel-principal .flex-control-nav li {
    position: relative;
    padding: 0.25em;
}
.carrousel-principal .flex-control-nav a {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--rose-champagne);
    cursor: pointer;
    text-indent: -999em;
    border-radius: 50%;
    margin: 0 auto;
}
.carrousel-principal .flex-control-nav a:not(.flex-active):hover {
    background-color: var(--blanc);
}
.carrousel-principal .flex-control-nav .flex-active {
    background-color: var(--abricot);
    cursor: default;
}
.carrousel-principal .flex-control-nav a:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
span.bas {
    top: 75%;
    transform: translateY(-75%);
}


/* carrousel actualités liste */
.actualites-infos-wrapper { 
    position: relative;
}
.actualites-infos p { 
    margin-right: 4rem !important;
    margin-left: 4rem !important;
}
.carrousel-actualites { 
    min-height: 270px;
    margin: 0 0 1.45rem;
}
.carrousel-actualites .flex-viewport { 
    flex: 1 1 100%; 
    margin: 0;
}
.carrousel-actualites .slides { 
    height: calc(100% - 1.45rem); 
}
.carrousel-actualites .slides > li { 
    box-sizing: content-box;
    height:100%;
}
.carrousel-actualites .slides > li span { 
    display: flex;
    align-items: stretch;
    padding:0 1.45rem 0;
    height:100%;
}
.carrousel-actualites .slides > li span:hover a { 
    background-color: var(--blanc);
    box-shadow: var(--ombre);
}
.carrousel-actualites .flex-direction-nav { 
    display: flex; 
}
.carrousel-actualites .flex-nav-prev, .carrousel-actualites .flex-nav-next { 
    margin-right: 1.25em; 
}
.carrousel-actualites .flex-disabled { 
    pointer-events: none; 
    opacity: 0; 
}
.actualites-slide { 
    box-sizing: border-box; 
    display: block; 
    position: relative; 
    z-index: 2; 
    width: 100%; 
    height:100%;
    padding:0 0 2rem;
    color: var(--primary);
    transition: box-shadow 0.3s ease;
}
.actualites-slide figcaption { 
    position: relative;
    padding: 1.5rem; 
    line-height: 1.1;
}
.actualites-slide h3 { 
    line-height: 2.188rem;
    font-weight: 400 !important;
    color: var(--primary); 
}
.actualites-slide .date { 
    position: relative;
    display: block;
    font-weight: 400;
    color: var(--accent); 
    font-style: normal;
    padding-left:2rem;
    margin: 0;
}
.actualites-slide .date .icon-calendrier {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* général */
section.container-wrapper {
    padding-left: 0;
    padding-right: 0;
}
section#contenu .sandbox {
    padding-bottom: 0;
}
.home #contenu .row { 
    text-align: center;
}
.home #contenu .row h3 { 
    font-weight: 700;
}
.home #contenu .row h2 { 
    margin: 0 0 1.5rem;
    color: var(--primary); 
}


/* autre contenu */
#contenu .container-fluid.territoire { 
    position: relative;
	overflow: hidden;
    background-size: 95%;
    background-image: url(/wp-content/themes/csssh/assets/territoire.svg);
    background-repeat: no-repeat;
    background-position: 1rem 23rem;
}
.fier { 
    max-width: 78rem;
}
.fier p { 
    font-size: 2.188rem; /* 35px */ 
    line-height: 2.55rem; /* 40px */ 
}
.statistiques { 
    margin-bottom: 5rem;
}
.statistiques .odometer { 
    font-size:7.5rem;
    line-height: 0.85;
    font-weight: 800;
    color: var(--secondary); 
}
.statistiques em { 
    display: block;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--secondary);
    margin-top: 0;
    margin-bottom: 1.25rem;
}
.row.video {
    position: relative;
}
.video .detail-video { 
    max-width: 78rem;
    padding:0;
}
.row.video:before {
    content: "";
    position: absolute;
    z-index: -1;
    left:-6rem;
    top: 50%;
    height:50%;
    width: calc(100vw + 6rem); 
    background: var(--primary);
}
span.bas.apresvideo {
    position: relative;
    display: block;
    width: calc(100vw - 15px); 
    left:-3rem;
    top:inherit;
    bottom:inherit;
    right:inherit;
    background: var(--primary);
    transform: none;
}
span.bas.apresvideo .icon-fleche_bas {
    position: relative;
    margin:6rem 0 3rem -1.219rem;
    text-align: center;
}
span.bas.apresvideo .icon-fleche_bas:before {
    background-image: url('/wp-content/themes/csssh/assets/fleches_bas_video.svg');
    background-size: 39px 39px;
    background-repeat: no-repeat;
    height: 39px;
    width: 39px;
    opacity: 1;
}
span.bas.apresvideo .icon-fleche_bas:hover:before {
    opacity: 0.7;
}


/* carrière */
#carriere { overflow: hidden; }
#carriere .image {
    position: relative;
    z-index:4;
    background-color: var(--abricot);
    background-image: url(/wp-content/themes/csssh/assets/riviere_rose.png);
    background-repeat: no-repeat;
    background-size: 125% auto;
    background-position-y: 6rem;
    background-position-x: -3rem;
}
#carriere .image .image-wrapper img {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#carriere .texte {
    position: relative;
    z-index:3;
    color: var(--blanc);
    background-color: var(--secondary);
    padding:7.438rem 5.375rem 5.375rem;
}
#carriere .texte h2 {
    margin-top: 0;
    margin-bottom:2rem;
    color: var(--blanc);
}
#carriere .texte p, #carriere .texte .h4 {
    max-width:49.063rem;
    margin-left:auto;
    margin-right:auto;
    font-weight: 400;
    margin-bottom:2rem;
}
#carriere .texte .h4 {
    font-weight: 700;
}



/* media queries */

/* MIN */

@media (min-width: 75rem) { /* 1200px/16 - XL+ */
    .actualites-infos {
        position: absolute;
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
    }
    #carriere .image .image-wrapper {
        position: absolute;
        z-index: 5;
        right: -24%;
        bottom: 0;
        max-width: 59rem;
        left: 2rem;
    }
}

@media (min-width: 62rem) { /* 992px/16 - LG+ */

}


/* MAX */

@media (min-width:75rem) and (max-width:87.438rem) { /* entre 1200px et 1399px/16 - XXL- */
    .statistiques .odometer {
        font-size: 5.5rem;
    }
    #carriere .image {
        background-size: 180% auto;
        background-position-x: -13rem;
    }
    #carriere .texte {
        padding: 4.438rem 3.375rem 4.375rem;
    }
    #carriere .texte .h2 {
        font-size: 3.375rem;
        margin-bottom: 3rem;
    }
    #carriere .texte .h4 {
        font-size: 2rem;
    }
    #carriere .texte p {
        font-size: 1.5rem;
    }
}


@media (max-width: 74.938rem) { /* 1199px/16 - XL- */
    #carriere .image .image-wrapper img {
        width: 60%;
        margin: 2rem auto 0;
    }
    .statistiques .odometer {
        font-size: 4.875rem;
    }
    span.bas.apresvideo {
        left:-2rem;
    }
}


@media (max-width: 61.938rem) { /* 991px/16 - LG- */
    .carrousel-principal figcaption {
        max-width: 40%;
    }
    .carrousel-principal figcaption h2 {
        font-size: 1.8rem;
        margin-bottom:1.25rem;
    }
    .carrousel-principal figcaption .btn {
        font-size: 1rem;
    }
    #contenu .container-fluid.territoire {
        background-size: 250%;
        background-position: 34% 90%;
    }
    .img-wrapper .icon-play_video {
        font-size: 600%;
    }
    span.bas.apresvideo {
        left:-1.5rem;
    }
}

@media (max-width: 47.938rem) { /* 767px/16 - MD */
    .carrousel-principal {
        padding-right: 4.5rem;
    }
    .carrousel-principal .flex-control-nav {
        width: 4.5rem;
    }
    .carrousel-principal .flex-control-nav a {
        width: 1.25rem;
        height: 1.25rem;
    }
    .carrousel-principal figcaption {
        left: 2rem;
    }
    .carrousel-principal figcaption.gauche {
        left: 2rem;
    }
    .carrousel-principal figcaption.droite {
        right:2rem;
    }
    .carrousel-principal figcaption h2 {
        display:none;
    }
    .carrousel-principal figcaption .btn {
        font-size: 0.7rem; 
    }
    span.bas {
        top: 93%;
        transform: translateY(-93%);
    }
    .carrousel-actualites .slides > li span {
        padding: 0 0.5rem;
    }
    .flex-direction-nav a {
        width: 3.5rem;
        height: 3.5rem;
        margin: -1.75rem 0 0;
        filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.1));
    }
    .flex-direction-nav a span.fleche i {
        font-size: 1rem;
    }
    .fier p {
        font-size: 2rem;
        line-height: 2.35rem;
    }
    .statistiques {
        margin-bottom: 3rem;
    }
    span.bas.apresvideo .icon-fleche_bas {
        margin: 5rem 0 3rem;
    }
    #carriere .image {
        padding:2rem 0 0;
        background-size: 180% auto;
        background-position-y: 3rem;
        background-position-x: -13rem;
    }
    #carriere .image .image-wrapper img {
        width: 125%;
        height: auto;
        margin-left:-2rem;
    }
    #carriere .texte {
        padding: 4.5rem 2rem 4rem;
    }
}

@media (max-width: 35.938rem) { /* 575px/16 - SM- */
    .home h2 {
        font-size: 2.813rem; /* 45px */ 
    }
    .carrousel-principal {
        padding-right: 2.5rem;
    }
    .carrousel-principal figcaption {
        left: 0.938rem;
    }
    .carrousel-principal figcaption.gauche {
        left: 0.938rem;
    }
    .carrousel-principal figcaption.droite {
        right:0.938rem;
    }
    .carrousel-principal figcaption .btn {
        font-size: 0.6rem; 
    }
    .carrousel-principal .flex-control-nav a {
        width: 0.875rem;
        height: 0.875rem;
    }
    .carrousel-principal .flex-control-nav {
        width: 2.5rem;
    }
    .flex-direction-nav a {
        width: 2.813rem;
        height: 2.813rem;
        margin: -1.5rem 0 0;
    }
    .actualites-infos p {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    .actualites-slide figcaption { 
        padding: 1.5rem 0.688rem 0.688rem; 
        line-height: 1;
    }
    .actualites-slide h3 { 
        font-size: 1.219rem; 
        line-height: 1.422rem;
    }
    .actualites-slide .date { 
        position: relative;
        display: block;
        font-weight: 400;
        color: var(--accent); 
        font-style: normal;
        padding-left:1.4rem;
        margin: 0;
    }
    .fier p { 
        font-size: 1.422rem; 
        line-height: 1.625rem;
        padding-left:0.5rem;
        padding-left:0.5rem;
    }
    .statistiques {
        margin-bottom: 2rem;
    }
    .img-wrapper .icon-play_video {
        font-size: 550%;
    }
    span.bas.apresvideo .icon-fleche_bas {
        margin: 3.5rem 0 1.75rem -0.75rem;
    }
    span.bas.apresvideo .icon-fleche_bas:before {
        background-size: 24px 24px;
        height: 24px;
        width: 24px;
    }
}