@charset "UTF-8";



@font-face {
    font-family: 'Gilroy-Regular';
    src: url('../fonts/Gilroy-Regular.woff2') format('woff2')
}
@font-face {
    font-family: 'Gilroy-Medium';
    src: url('../fonts/Gilroy-Medium.woff2') format('woff2')
}
@font-face {
    font-family: 'Gilroy-Bold';
    src: url('../fonts/Gilroy-Bold.woff2') format('woff2')
}
@font-face {
    font-family: 'Gilroy-ExtraBold';
    src: url('../fonts/Gilroy-ExtraBold.woff2') format('woff2')

}

body, html {
    margin:0;
    padding:0;
    height: 100%;
    color:#000000;
    font-family: Gilroy-Regular, sans-serif;
}

img {
    max-width:100%;
}


.desktop {
    display: block
}
.handheld {
    display: none
}

.space {
    display: block;
    height: 135px
}


h1 {
    font-size: 22px;
    text-align: center;
    color: #4c5c65;
    margin: 15px auto 0 auto;
    font-weight: normal;
    z-index: 2;
    position: relative
}


header {
    display: block;
    background: #fff;
    width: 100%;
    height: 138px;
    position: relative;
    z-index: 1
}
#top {
    display: block;
    margin: 20px auto 0 auto;
    position: relative;
    text-align: center
}
#top img{
    width: 247px;
}

#geoloc-icon {
    display: block;
    width: 71px;
    position: absolute;
    right: 70px;
    top: 5px;
    z-index: 2
}

.display-none-mobile{
    display: block;
}
.display-none-desktop{
    display: none;
}



#block-1 {
    display: flex;
    justify-content: space-between;
    width: 1425px;
    margin: 10px auto 0 auto;
    z-index: 2;
    position: relative;
}

#block-2 {
    display: flex;
    justify-content: space-between;
    width: 1575px;
    margin: 120px auto 0 auto;
    z-index: 2;
    position: relative;
    left:-50px;
}

.sur-titre {
    display: block;
    font-style: normal;
    font-size: 18px;
    text-transform: uppercase;
    margin: 0 0 10px 0;
    font-family: Gilroy-Bold, sans-serif;
}

.titre {
    display: block;
    font-size: 66px;
    margin-top: -20px;
    font-weight: 200
}

.txt {
    display: block;
    font-style: normal;
    font-size: 20px
}

#haut-gauche {
    display: block;
    width: 676px;
    height: 388px;
    position: relative;
    z-index: 2
}

#haut-gauche .card {
    display: block;
    width: 453px;
    height: 193px;
    color: #fff;
    background: #88B6D1;
    box-sizing: border-box;
    padding: 45px;
    position: relative;
    z-index: 3;
    margin: -38px 0 0 108px;
}


#haut-droit {
    display: block;
    width: 718px;
    height: 411px;
    position: relative;
    z-index: 2;
    margin-top: 107px
}

#haut-droit .card {
    display: block;
    width: 458px;
    height: 186px;
    color: #fff;
    background: #9C4B1C;
    box-sizing: border-box;
    padding: 14px 20px 0 28px;
    position: relative;
    z-index: 3;
    margin: -41px 0 0 149px;
}

#bas-gauche {
    display: block;
    width: 778px;
    height: 443px;
    position: relative;
    z-index: 2;
}

#bas-gauche .card {
    display: block;
    width: 455px;
    height: 190px;
    color: #fff;
    background: #4B443D;
    box-sizing: border-box;
    padding: 45px 45px 0 24px;
    position: relative;
    z-index: 3;
    margin: -37px 0 0 131px
}

#bas-droit {
    display: block;
    width: 720px;
    height: 413px;
    position: relative;
    z-index: 2;
    margin-top: 100px
}

#bas-droit .card {
    display: block;
    width: 454px;
    height: 198px;
    color: #fff;
    background: #D1CCBE;
    box-sizing: border-box;
    padding: 34px 75px 0 56px;
    position: relative;
    z-index: 3;
    margin: -41px 0 0 181px
}

.bg-text {
    display: block;
    position: absolute;
    font-size: 12vw;
    color: #f5f4ef;
    z-index: 1;
    text-transform: uppercase
}
.bg-text.top { left: 43%; margin-top: 500px; }
.bg-text.bottom { right: 35%; margin-top: -80px; }


.boxed-layout { display: block; width: 1300px; margin: 0 auto}
.info-find-store-container{
    text-align: center;
}
#usine { display: block; margin: 5px 0 0 0 }

.brandshowcase-container h2{
    color:#174955;
    text-align: center;
    text-transform: uppercase;
    font-size: 75px;
    line-height: 1;
}
.info-find-store-btn{
    background-color: #9C4B1C;
    padding: 20px 65px;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    margin-top: 60px;
    color: #fff;
    border-radius: 30px;
    font-size: 25px;
}
.brandshowcase-title1{
    font-weight: normal;
}
.brandshowcase-title2{
    font-family: Gilroy-ExtraBold, sans-serif;
}
#block-usine {
    display: block;
    width: 1104px;
    height: 235px;
    color: #fff;
    background: #174955;
    box-sizing: border-box;
    padding: 41px;
    position: relative;
    z-index: 3;
    margin: -96px 0 0 130px;
}

#pre-footer {
    display: block;
    background: #f7f7f7;
    width: 100%;
    padding: 30px 0;
    height: 208px;
    box-sizing: border-box;
    margin-top:80px;
}
#pre-footer .boxed-layout{
    width:1035px;
}
#reassurance {
    display: flex;
    justify-content: space-between;

    color: #003d4b
}
#reassurance .icon {
    display: block;
    margin: 0 auto 20px auto;
    width: 100px;
    height: 80px
}
.reassurance-item {
    width: 25%;
    text-align: center;
    font-size: 12px;
    max-width: 220px;
}
/* The second reassurance item needs a bit more width to have its title fit on one line */





footer { background: #88B6D1; padding: 20px 0}
#logo-footer { display: block; width: 132px; margin: 0 auto}

#back-top {
    width: 100%;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 35px;
}

.cta-back-top {
    background: transparent;
    color: #003d4b;
    font-size: 12px;
    margin: 0;
    text-transform: uppercase;
    border: 0;
    outline: none;
    letter-spacing: 1.3px;
    position: relative;
    overflow: visible;
    vertical-align: top;
    display: inline-block;

    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.cta-back-top::before {
    background: url("../images/icon_top.svg") no-repeat;
    content: "";
    display: block;
    position: absolute;
    top: -10px;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-left: -5px;
}

/* ==============================================================================
 * #### SLIDER ####
 * ==============================================================================*/

.cadre-slider-header { position:relative;  z-index:1; display:block; width:100%; height:auto;}

.cadre-slider { display: block; vertical-align:top; width:100%; height:auto}

#txt-slider {
    display: block;
    width: 878px;
    position: absolute;
    z-index: 2;
    top: 32px;
    left: 40px;
}

.title-home-slider {
    display: block;
    color: #fff;
    font-size: 70px;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 0 10px rgba(76,92,101,0.75);
    font-family: Gilroy-Regular, sans-serif;
}

.subtitle-home-slider {
    display: block;
    color: #fff;
    font-size: 70px;
    line-height: 1;
    text-decoration: none;
    margin-bottom: 0.6em;
    text-shadow: 0 0 10px rgba(76,92,101,0.75);
    font-family: Gilroy-ExtraBold, sans-serif;
    text-transform: uppercase;
}


.cta-home-slider {
    color:#173c49;
    width: 162px;
    height: 52px;
    padding: 20px 20px 0px 20px;
    text-align: center;
    cursor: pointer;
    position: absolute;
    bottom: 100px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 5;
    overflow: hidden;

    font-weight: 700;
    letter-spacing: 1px;
    font-size: 14px;
    background: rgba(255,255,255,0.76);
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-transition-delay: 0s;
    -webkit-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}

.cta-home-slider:hover { background: #fff}

/*Custom slider styles*/
.flexslider,
.flexslider-mobile{
    margin: 0;
    border: 0;
}
.flex-control-nav{
    bottom: 30px;
}
.flex-control-paging li a{
    background-color: #fff;
}
.flex-control-paging li a.flex-active{
    background-color: #4c5c65;
}


#slider .flexslider{ display: block }
#slider .skeleton{
    display: none;
    height: 600px;
    background-color: lightgray;
}
#slider.loading .flexslider{ visibility: hidden }
#slider.loading .skeleton{ display: block }

#slider-mobile{
    position:relative;
}
#slider-mobile .flexslider-mobile{ display: block }
#slider-mobile .skeleton{
    display: none;
    height: 600px;
    background-color: lightgray;
}
#slider-mobile.loading .flexslider-mobile{ visibility: hidden }
#slider-mobile.loading .skeleton{ display: block }

/* ==============================================================================
 * #### GEOLOC ####
 * ==============================================================================*/

#map {
    display: flex;
    height: 637px;
    width: auto;
    margin: 0 auto;
}
#stores{
    width: 33%;
    overflow-y: auto;
    background:#88B6D1;
    padding: 0 25px;
    min-width: 500px;
}
#search{
    margin-top: 20px;
}
#search label{
    font-size: 20px;

    font-weight: 400;
    margin-bottom: 10px;
    display: block;
    color: #fff;
    text-transform: uppercase;
}
#search input{
    width: 100%;
    height: 40px;
    background-image: url('../images/icon_search.svg');
    background-position: 99%;
    -webkit-background-size: 40px 40px;
    background-size: 25px 25px;
    background-repeat: no-repeat;
    padding: 0 0 0 15px;
    border: 1px #fff solid;
}

#search-results {
    width: 100%;
    box-sizing: border-box;
}

#search-results tr {
    cursor: pointer;

    font-style: normal;

    font-weight: 400;
    color: #fff;

}

#search-results tr .result-url a{
    text-decoration: underline;
}

#search-results tr:hover{
    /*background:#9be3bf;*/
}

#search-results td {
    text-align: left;
    box-sizing: border-box;
    padding: 10px 0 10px 0;
    border-bottom: 3px solid #fff;
}

.container-result-site{
    float: right;
    text-align: right;

}
.container-result{
    display: flex;
}
.container-result-img{
    width:135px;
}
.container-result-name{
    float: left;
    font-size: 14px;
    width: calc(100% - 150px);
    margin-left: 15px;
}
.container-result-name a{
    color:#fff;
}
.result-marker{
    display: inline-block;
    height: 20px;
    width: 20px;
    background-repeat: no-repeat;
    background-image: url("../images/marker_list_default.png");
}
.selected .result-marker{
    background-image: url("../images/marker_list_highlighted.png");
}
.result-phone{
    display: inline-block;
    font-size: 18px;
    margin: 0 0 5px 0;
}
.result-phone a{
    color: inherit;
    text-decoration: none;
}

.result-name{
    margin-bottom: 5px;
    font-size: 16px;
    font-family: Gilroy-Bold, sans-serif;
    text-transform: uppercase;
    display:flex;

}
.result-url{
    width: 100%;
}
.result-url a{
    font-size: 12px;
    color: #4d5d66;
    text-decoration: none;
}
.result-links{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top:22px;
}
.result-rs{
    display: inline-block;

}
.result-itineraire{
    display: inline-block;
}

#search-results tr .button-go-map {
    background-color: #fff;
    padding: 8px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    display: inline-block;
    margin-top: 10px;
    color: #9C4B1C;
    font-family: Gilroy-Medium, sans-serif;
}

#map-container{
    width: 66%;
}

.leaflet-popup-content-wrapper{
    border-radius: 15px;
}

.leaflet-popup-content {
    margin:0;
    width: 710px!important;
}

.popup-container{
    color: #4d5d66;
    width: 710px;
    margin: 0;
    display: flex;
    height: 304px;
}

.popup-img{
    width: 285px;
    height: 304px;
    border-radius: 15px 0 0 15px;
    background-position: center;
}
.popup-content {
    padding-left: 15px;
    width: calc(100% - 285px);
    box-sizing: border-box;
    padding-top:20px;
    position: relative;
    font-size: 21px;
}
.popup-content a {
    color:#4d5d66;
}
.leaflet-popup{
    width: 710px;
}
.popup-container .name{
    font-size: 39px;
    line-height: 1;
    text-transform: uppercase;
    font-family: Gilroy-ExtraBold, sans-serif;
}

.popup-container .street,.popup-container .city{
    font-size: 21px;
    text-transform: capitalize;
}
.popup-rs{
    margin-top: 14px;
    display: inline-block;
}
.popup-container .phone a{
    font-size: 21px;
    color: inherit;
    text-decoration: none;
}

.popup-container .url a{
    font-size: 14px;
    color: #4d5d66;
    text-decoration: underline;
}
.popup-content a.popup-button-go-map{
    background-color: #9C4B1C;
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 10px;
    color: #fff;
    border-radius: 30px;
    position: absolute;
    right: 20px;
    bottom: 10px;
    font-size: 16px;
    width: 258px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 48px;
}

.store-name {
    text-transform: uppercase;
    font-size: 14px;
    font-family: Gilroy-Bold, sans-serif;
    padding-right:5px;
    width: calc(100% - 15px);
}

.store-address, .store-phone {
    font-size: 14px;
    margin: 4px 0 6px 0;
}
.store-address a{
    color:#fff;
}

.storelist-container{
    background: #4B443D;
    color: #fff;
    margin-top:10px;
    padding: 10px 28px 40px 28px;
}
.storelist-container h2{
    margin:0;
    font-weight: normal;
}
#store-container-mobile{
    display:none;
}
#store-container-desktop{
    display:flex;
}
.stores-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 colonnes par défaut */
    gap: 25px;

    padding: 20px 25px;
    color: white;
}
.stores-container-inner{
    display: flex;
    justify-content: space-between;
    width: 33.33%;
    gap: 25px;
}
/* Responsive : Tablette (4 colonnes) */
@media (max-width: 1024px) {
    .stores-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Responsive : Mobile (2 colonnes) */
@media (max-width: 768px) {
    .stores-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

.store-item {
    padding: 5px 0 5px 0;
    position: relative;
    text-align: left;
    flex: 1 1 calc(20% - 20px);
    min-width: 200px;
    border-bottom: 2px solid #fff;
}


.store-row{
    position: relative;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}
.store-arrow{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15px;
    cursor: pointer;
}
.store-row-hidden{
    display:none;
}
.stores-container{
    display: flex;
}
.storelist-bloc{
    width:calc(100% - 50px);
}

.infos-container h2{
    text-align: center;
    text-transform: uppercase;
    color:#9C4B1C;
    font-size: 68px;
    margin: 54px 0 69px 0;
    line-height: 1;
}

.title2-infos{
    font-family: Gilroy-Bold, sans-serif;
}


/* ==============================================================================
 * #### LOCKDOWN DISCLAIMER####
 * ==============================================================================*/
.lockdown-disclaimer {
    display: none;
}

*[data-on-lockdown="true"] .lockdown-disclaimer{
    display: inline-block;
    margin-top: 1rem;
    color: #0088A0;
    font-size: 16px;
}


/* ==============================================================================
 * #### LOCALE-SPECIFIC STYLES ####
 * ==============================================================================*/

[data-locale="da_DK"] h1{
    line-height: 1;
    padding: 20px 0;
}

[data-locale="de_CH"] h1{
    line-height: 1;
    padding: 20px 0;
}
[data-locale="de_CH"] .titre{
    font-size: 53px;
}

[data-locale="de_DE"] h1{
    line-height: 1;
    padding: 20px 0;
}
[data-locale="de_DE"] .titre{
    font-size: 53px;
}