@charset "UTF-8";
/* CSS Document */

/* *********************************************

	THE MAP // CSS
	BF 2019
	-
	
	01 . IMPORT CSS + FONTS
	02 . BASE
	03 . A PROPOS
	04 . COLLABORATIONS
	05 . CONTACT
	06 . PAGES FOOTER
	07 . GRID
	08 . GALLERY
	09 . xxxxxx
	10 . xxxxxx
	11 . xxxxxx
	12 . xxxxxx
	13 . xxxxxx
	14 . xxxxxx
	15 . xxxxxx
	
********************************************* */



/* ////////////////////////////////////////////////////////////////////////////

    01 . IMPORT CSS + FONTS

//////////////////////////////////////////////////////////////////////////// */

@import url('bootstrap-xlgrid.css');
@import url('ionicons.css');
@import url('font-awesome.css');
@import url('lightgallery.css');
@import url('chocolat.css');
@import url('flickity.css');
@import url('easy-autocomplete.css');
@import url('kenburns.css');
@import url('aos.css');
@import url('magnific-popup.css');
/**/
@import url('interface.css');
@import url('form.css');
@import url('shop.css');
/**/
@import url('dark.css');

@font-face {
    font-family: 'Sofia';
    src: url('../fonts/SofiaPro.eot');
    src: url('../fonts/SofiaPro.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SofiaPro.woff2') format('woff2'),
        url('../fonts/SofiaPro.woff') format('woff'),
        url('../fonts/SofiaPro.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sofia bold';
    src: url('../fonts/SofiaPro-Bold.eot');
    src: url('../fonts/SofiaPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SofiaPro-Bold.woff2') format('woff2'),
        url('../fonts/ofiaPro-Bold.woff') format('woff'),
        url('../fonts/SofiaPro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


:root {
    
    /* FONTS */
    --font1: "Sofia", sans-serif;
    --font2: "Sofia bold", sans-serif;
    
    /* COULEURS */
    --colorBeige: #f6f1Eb;
    --colorDark: #09090c;
    
    /* COULEUR UNDERLINE */
    --colorUnder: #ff585d;
    --colorUnderText: #fff;

    /* COULEUR PASTILLE NEW */
    --colorNew: #ffe93e;
    --colorNewText: #09090c;
    
    /* COULEUR PASTILLE PROMO */
    /*--colorPromo: #00A6A6;
    --colorPromoText: #fff;*/
    --colorPromo: #ffe93e;
    --colorPromoText: #09090c;
    
    /* COULEUR BANDEAU */
    --colorBandeau: #df5151;
    --colorBandeauText: #fff;
    
}


/* //// FIX RD OctobertV4 ////////// */


.flash-message{
    font-size: 16px
}



/* ////////////////////////////////////////////////////////////////////////////

    02 . BASE

//////////////////////////////////////////////////////////////////////////// */

body {
	font-family: var(--font1);
	font-size: 16px;
	line-height: 25px;
	color: var(--colorDark);
	overflow-x: hidden!important;
	background-color: #fff;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	opacity: 0;
}

::selection { color: #fff; }
::-moz-selection { color: #fff; }
::selection { background-color: var(--colorDark); }
::-moz-selection { background-color: var(--colorDark); }

/* LIENS */
a {
	color:var(--colorDark);
	text-decoration:none;
	/**/
	-webkit-transition:all .2s;
	-moz-transition:all .2s;
	-o-transition:all .2s;
	transition:all .2s;
}
.no-touch a:hover { color:var(--colorDark); outline:0; text-decoration:none; }
a:active, a:focus { color:var(--colorDark); outline:0; text-decoration:none; }

a.link { display:inline-block; position:relative; line-height:1.2; }

a.link:after {
	background-color: var(--colorDark);
	content: "";
	height: 1px;
	right: 0;
	position: absolute;
	bottom: -2px;
	width: 0;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.no-touch a.link:hover:after { width:100%; }

a[href^=tel]{
    color:inherit;
    text-decoration:inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
}

/* TEXTE */
br { font-size:0; line-height:0; }
strong, b { font-family: var(--font2); }

/* IMAGE */
img { position:relative; max-width:100% }

/* LISTES */
ol, ul { margin:0; padding:0; list-style:none; }

/* PARAGRAPHES */
p { margin:0 0 15px 0; padding:0; }
p:last-child { margin:0; }

/* TITRES */
h1, h2, h3, h4, h5, h6 { 
	font-family: var(--font2); 
	line-height:1;
	margin:0;
	padding:0;
}

.no-padding { padding:0; }





/* ////////////////////////////////////////////////////////////////////////////

    03 . A PROPOS

//////////////////////////////////////////////////////////////////////////// */

.section.apropos {
    padding: 100px 0 0 0;
}
.section.apropos + .globes {
    padding: 0 0 50px 0;
}
.section.apropos.bg {
    color: var(--colorDark);
	background: var(--colorBeige);
    padding: 50px 0;
}
/*.apropos .section-inner {
    max-width: inherit;
}*/

.section.apropos [class*="col-"] {
    padding: 0;
}

@media only screen and (max-width: 991px) {
    .section.apropos {
        padding: 50px 0 0 0;
    }
    .section.apropos + .globes {
        padding: 0 0 50px 0;
    }
}

/* ------------------------------------------- 
	BT PRESSE
------------------------------------------- */
.bt-presse {
    /*text-align: right;*/
}
.bt-presse a {
	font-family: var(--font1);
	outline: none !important;
	background: transparent;
	display: inline-block;
	color: inherit;
    border: var(--colorDark) 2px solid;
    border-radius: 2em;
    padding: 12px 18px 13px 18px;
    line-height: 15px;
	text-decoration: none!important;
	font-size: 15px;
	font-weight: bold;
	white-space: nowrap;
    margin-top:40px;
    text-decoration: none;
    outline: inherit;
    /**/
    -webkit-transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
    transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
}
.bt-presse a i {
    position: relative;
    top:1px;
    padding-left:15px;
}
.bt-presse a:focus {
    outline: none !important;
    text-decoration: none!important; 
    color: var(--colorDark)!important;
    background: #fff;
}
.no-touch .bt-presse a:hover { 
    color: #fff!important;
    background: var(--colorDark);
    text-decoration: none!important;
}

@media only screen and (max-width:991px) {
    /*.bt-presse { text-align: left; }*/
    .bt-presse a { margin-top:30px; }
}


/* ------------------------------------------- 
	VIDEO HOME
------------------------------------------- */
.splash {
    overflow: hidden;
    position: relative;
    display: block;
    width: 100%;
    height: calc(100vh - 90px);
}

.splash > video {
    display: block;
    position: absolute;
    z-index: -1;
    min-width: 100%;
    min-height: 100vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@media only screen and (max-width: 991px) {
    .splash {
        height: calc(100vh - 70px);
    }
}

/* ------------------------------------------- 
	VIDEO A PROPOS
------------------------------------------- */
.intro-video {
    margin: 0 auto 100px auto;
    max-width: 80%;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}
.intro-video video {
    position: relative!important;
    width: 100%!important;
    height: auto!important;
    outline: inherit!important;
    background: url('../video/poster.jpg') no-repeat;
    background-size: cover;
    transition: 1s opacity;
    min-width: inherit!important;
    min-height: inherit!important;
    left: inherit!important;
    top: inherit!important;
    transform: none;
    z-index: inherit!important;
    border-radius: 8px;
    overflow: hidden;
}
.intro-video #video-controls {
    position: absolute!important;
    bottom:9px!important;
    right: 0!important;
    z-index: 1!important;
    border-radius: 0 0 8px 0;
    overflow: hidden;
}

@media only screen and (max-width: 991px) {
    .intro-video {
        margin: 0 auto 50px auto;
        max-width: 100%;
        padding: 0 15px;
    }
}

/* CONTROLS */
#video-controls {
    position: fixed;
    bottom:0;
    z-index: 0;
    z-index: 1;
}
.controls, .controls > * {
	padding:0;
	margin:0;
}
.controls {
	overflow:hidden;
	width:100%;
	height:auto;
}
.controls[data-state=hidden] {
	display:none;
}
.controls[data-state=visible] {
	display:block;
}
.controls > * {
	float:left;
	width:auto;
	height:100%;
	margin-left:0;
	display:block;
    border-radius: 8px 0 0 0;
}
.controls > *:first-child {
	margin-left:0;
    border-radius: 0;
    border-left: rgba(0,0,0,.15) solid 1px;
}

/* PLAY + MUTE */
.controls button {
    outline: inherit;
	text-align:center;
	overflow:hidden;
	white-space:nowrap;
  	text-overflow:ellipsis;
  	border:none;
  	cursor:pointer;
  	text-indent:-99999px;
  	background:var(--colorUnder);
  	background-size:20px 20px;
  	background-repeat:no-repeat;
    background-position: center;
    width:36px;
    height:36px;
    float: right;
	position:relative;
}

.controls button:hover, .controls button:focus {
/*	opacity:0.5;*/
}
.controls button[data-state="play"] {
	background-image: url('../video/bt-play.svg');
}
.controls button[data-state="pause"] {
	background-image: url('../video/bt-pause.svg');
}
.controls button[data-state="mute"] {
	background-image: url('../video/bt-unmute.svg');	
}
.controls button[data-state="unmute"] {
	background-image: url('../video/bt-mute.svg');	
}

@media only screen and (max-width: 991px) {
    #video-controls {
        margin-right: 15px;
    }
}



/* ------------------------------------------- 
	BLOCS
------------------------------------------- */
.blocs-about {
    
}
.bloc-about {
    position:relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    margin-bottom: 75px;
}
.bloc-about:last-child {
    margin-bottom: 50px;
}

.bloc-about .bloc-image {
    width: 50%;
    order: 1;
    /**/
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment:scroll;
    background-position: center center;
}
.bloc-about .bloc-image img {
    display: block;
    width: 80%;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    /*object-fit: cover;*/
}

.bloc-about .bloc-txt {
    position:relative;
    width: 50%;
}

.bloc-about:nth-child(even) .bloc-txt {
    order: 2;
}


.bloc-about .bloc-txt .inner {
    max-width: 500px;
    margin: 0 auto;
    padding: 15px;
}
.bloc-about .bloc-txt img {
    
}
.bloc-about .bloc-txt .about-title {
    position:relative;
    font-family: var(--font2);
    font-size: 36px;
	line-height: 40px;
    margin-bottom:20px;
}
.bloc-about .bloc-txt .about-title:after {
 	font-size: 30px;
	line-height:30px;
	content: "\f462";
  	font-family: "Ionicons";
	position:relative;
	display:block;
}
.bloc-about .bloc-txt .about-title:empty {
	display:none;
}

.bloc-about .bloc-txt p {
    /*margin-bottom: 35px;*/
}
.bloc-about .bloc-txt p:last-child {
    margin-bottom: 0;
}
.bloc-about .bloc-txt p.lead {
    font-family: var(--font2);
    font-size: 30px;
	line-height: 36px;
    /*color:var(--colorDark);*/
}

.bloc-about .bloc-txt a {
    margin-top: 30px;
}

/* LIEN */
.bloc-about .bloc-txt a {
	outline: none !important;
	background: var(--colorBeige);
	display: inline-block;
	color: inherit;
	color: var(--colorDark);
    border: var(--colorDark) 1px solid;
    border-radius: 2em;
    padding: 2px 18px 0 18px;
	text-decoration: none!important;
	font-size: 14px;
    line-height: 50px;
    font-family: var(--font2);
    text-transform: uppercase;
	white-space: nowrap;
    text-decoration: none;
    outline: inherit;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 3px 12px;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border 0.2s ease-in-out;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.bloc-about .bloc-txt a:before,
.bloc-about .bloc-txt a:after {
    background: var(--colorDark);
    transition: 0.4s ease;
    content: "";
    position: absolute;
    z-index: -1;
}
.bloc-about .bloc-txt a:before {
    top: 0;
    bottom: 0;
    left: -120%;
    transform: skewX(-45deg);
    width: 100%;
}
.no-touch .bloc-about .bloc-txt a:hover:before {
    width: 240%;
}

.bloc-about .bloc-txt a i {
    position: relative;
    top: 0.025em;
    padding-left:20px;
}

.bloc-about .bloc-txt a:focus {
    outline: none !important;
    text-decoration: none!important;
    color: var(--colorDark);
	background: transparent;
    border: var(--colorDark) 1px solid;
}
.no-touch .bloc-about .bloc-txt a:hover { 
    color: #fff;
    /* background: var(--colorDark); */
    text-decoration: none!important;
    border-color: var(--colorDark);
}

@media only screen and (max-width: 991px) {
    .bloc-about {
        display: block;
        margin-bottom: 50px;
    }
    .bloc-about:last-child {
        margin-bottom: 0;
    }
    .bloc-about .bloc-image {
        width: 100%;
        /**/
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-attachment:scroll;
        background-position: center center;
    }
    .bloc-about .bloc-image img {
        display: block;
        width: calc(100% - 30px);
        height: 275px;
        margin: 0 auto;
        object-fit: cover;
    }

    .bloc-about .bloc-txt {
        position:relative;
        width: 100%;
    }
    
    .bloc-about:nth-child(even) .bloc-txt {
        order: 2;
    }
    .bloc-about .bloc-txt .inner {
        max-width: 100%;
        margin: 10px auto 0 auto;
        padding: 15px;
    }
    
    /**/
    .bloc-about .bloc-txt .about-title {
        font-size:28px;
        line-height:32px;
        margin-bottom:15px;
    }
    .bloc-about .bloc-txt:before {
        display: none;
    }
    .bloc-about .bloc-txt a {
        margin-top:10px;
    }
    .bloc-about .bloc-txt p.lead {
        font-size:26px;
        line-height:32px;
    }
}

/* ------------------------------------------- 
	MARQUEE
------------------------------------------- */
.content-marquee-wrapper {
    position: relative;
    float: left;
    z-index: 0;
    pointer-events: none;
    padding: 100px 0;
}
.content-marquee {
    font-size: 144px;
    line-height: 1;
    white-space: nowrap;
    animation: content-marquee 15s infinite linear;
    padding-left: 2vw;
    color: var(--colorUnder);
    opacity: .5;
}
.content-marquee:after {
    content: attr(data-text);
    padding-left: 2vw;
}
@keyframes content-marquee {
    0% { transform: translateX(0) }
    100% { transform: translateX(-50%) }
}

@media only screen and (max-width: 991px) {
    .content-marquee-wrapper {
        padding: 50px 0;
    }
    .content-marquee {
        font-size: 72px;
        animation: content-marquee 12s infinite linear;
    }
}





/* ////////////////////////////////////////////////////////////////////////////

    04 . COLLABORATIONS

//////////////////////////////////////////////////////////////////////////// */

.collaborations {
    
}

@media only screen and (max-width: 991px) {
    
}

/* ------------------------------------------- 
	BT COLLAB
------------------------------------------- */
.bt-collab {
    /*text-align: right;*/
}
.bt-collab a {
	font-family: var(--font1);
	outline: none !important;
	background: transparent;
	display: inline-block;
	color: inherit;
    border: var(--colorDark) 2px solid;
    border-radius: 2em;
    padding: 12px 18px 13px 18px;
    line-height: 15px;
	text-decoration: none!important;
	font-size: 15px;
	font-weight: bold;
	white-space: nowrap;
    margin-top:40px;
    text-decoration: none;
    outline: inherit;
    /**/
    -webkit-transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
    transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
}
.bt-collab a i {
    position: relative;
    top:-1px;
    padding-left:15px;
	font-size: 13px;
}

.bt-collab a:focus {
    outline: none !important;
    text-decoration: none!important; 
    color: var(--colorDark);
    background: #fff;
}
.no-touch .bt-collab a:hover { 
    color: #fff!important;
    background: var(--colorDark);
    text-decoration: none!important;
}

@media only screen and (max-width:991px) {
    /*.bt-collab { text-align: left; }*/
    .bt-collab a { margin-top:30px; }
}


/* ------------------------------------------- 
	LOGOS
------------------------------------------- */
.logos {
    background: #fff;
}

.logos-collab {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: flex-start;
}

.logos-collab li {
    width: 16.66%;
    height: 80px;
    text-align: center;
}

.logos-collab li img {
    opacity: 1;
}

.logos-collab li:nth-child(-n+6) {
    margin-bottom: 20px;
}

@media only screen and (max-width: 991px) {
    .logos-collab li {
        width: 25%;
    }
    .logos-collab li:nth-child(-n+6) {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 767px) {
    .logos-collab li {
        width: 33.33%;
    }
}





/* ////////////////////////////////////////////////////////////////////////////

    05 . CONTACT

//////////////////////////////////////////////////////////////////////////// */

.section.contact {
    
}

@media only screen and (max-width: 991px) {
    
}

.adresse {
    font-size:16px;
    line-height:21px;
    margin-bottom: 50px;
}
.adresse span {
    display: block;
    font-size:24px;
    line-height:24px;
    margin-bottom: 5px;
	font-family: var(--font2);
}





/* ////////////////////////////////////////////////////////////////////////////

    06 . PAGES FOOTER

//////////////////////////////////////////////////////////////////////////// */

.page-content {
    
}

/* TEXTE */
.page-content h2 {
    font-size:30x;
    line-height:30px;
    margin-bottom:10px;
}
.page-content h3 {
    font-size:24px;
    line-height:24px;
    margin-bottom:10px;
}
.page-content p {
    margin-bottom:20px;
}

.page-content p + h2,
.page-content p + h3 {
    margin: 50px 0 10px 0;
}

.page-highlight {
    background: #f2f2f2;
    padding:15px;
    margin-bottom:50px;
}


@media only screen and (max-width: 991px) {
    .header-page .bloc-titre h1 {
        padding:0;
        font-size:36px;
        line-height:36px;
    }
}


/* ------------------------------------------- 
	FAQ
------------------------------------------- */
.page-content.faq {
    
}

.page-content.faq [class*="row"] { margin-bottom: 40px; }
.page-content.faq [class*="row"]:last-child { margin-bottom: 0; }

.accordion {  }
.accordion:last-child { margin-bottom: 0px; }

.accordion-title {
	font-size:30px;
	line-height:32px;
    margin-bottom:20px;
	font-family: var(--font2);
}

.accordion-wrp { margin-bottom:1px; }
.accordion-wrp .question {
	font-size:18px;
	line-height:21px;
	display: block;
	position: relative;
	overflow: hidden;
	padding: 2px 40px 15px 0;
    margin-bottom:18px;
	border-bottom: #999 dotted 1px;
	/*color:#888;*/
	cursor: pointer;
	-webkit-transition: all .1s linear;
	   -moz-transition: all .1s linear;
	     -o-transition: all .1s linear;
	     	transition: all .1s linear;
}
.accordion-wrp:last-child .question {
    border-bottom: #999 dotted 1px;
}
.accordion-wrp .question i {
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -10px;
	font-size: 21px;
	line-height: 0;
	color:var(--colorDark);
	-webkit-transition: all .1s linear;
	   -moz-transition: all .1s linear;
	     -o-transition: all .1s linear;
	     	transition: all .1s linear;
}
.no-touch .accordion-wrp .question:hover { border-bottom: #999 dotted 1px; color:var(--colorDark); }
.no-touch .accordion-wrp .question:hover i { color: var(--colorDark); }
.accordion-wrp .accordion-content { 
    display: none;
    padding: 0 0 40px 0;
    font-size:16px;
    line-height: 26px;
    color: #222;
    background: #fff;
}
.accordion-wrp:last-child .accordion-content {
    padding: 0 0 10px 0;
}
.accordion-wrp.current .question { border-bottom: #999 dotted 1px; color:var(--colorDark); }
.accordion-wrp.current .question i {
	color: var(--colorDark);
	margin-top: -10px;
	-webkit-transform: rotate(180deg);
	   -moz-transform: rotate(180deg);
	   	-ms-transform: rotate(180deg);
	   	 -o-transform: rotate(180deg);
	   	 	transform: rotate(180deg);   	 	
}
.accordion-wrp.current .accordion-content { display: block; }

.accordion-content strong {  }
.accordion-content a { text-decoration: underline; }
.no-touch .accordion-content a:hover { text-decoration: none; }





/* ////////////////////////////////////////////////////////////////////////////

    07 . GRID

//////////////////////////////////////////////////////////////////////////// */

.grid {
    
}
.grid .section-inner {
    
}

.header-page-shop + .section.grid {
    padding: 0 0 50px 0;
}
@media only screen and (max-width: 991px) {
    
}



/* ------------------------------------------- 
	GRID
------------------------------------------- */
.flex {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
}
.flex:after {
    content: "";
    flex: 0 1 calc(1/2*100% - (1 - 1/2)*120px);
}
.flex .blocThumb {
    box-sizing: border-box;
    width: calc(1/2*100% - (1 - 1/2)*120px);
}
.flex .blocThumb:nth-child(even) {
    margin-top: 50px;
}

@media only screen and (max-width: 991px) {
    .flex .blocThumb{
        width: calc(1/2*100% - (1 - 1/2)*60px);
        margin-bottom: 30px;
    }
    .flex .blocThumb:nth-child(even) {
        margin-top: 0;
    }
}

@media only screen and (max-width: 767px) {
    .flex .blocThumb {
        width: calc(1/1*100% - (1 - 1/1)*30px);
        margin-bottom: 30px;
    }
    .flex .blocThumb:last-child {
        margin-bottom: 0;
    }
    .flex .blocThumb:nth-child(even) {
        margin-top: 0;
    }
}


/* ------------------------------------------- 
	GRID 3 COLS
------------------------------------------- */
.flex.col3:after {
    content: "";
    flex: 0 1 calc(1/3*100% - (1 - 1/3)*60px);
}
.flex.col3 .blocThumb {
    box-sizing: border-box;
    width: calc(1/3*100% - (1 - 1/3)*60px);
    margin-bottom: 15px;
}
.flex.col3 .blocThumb:nth-child(even) {
    margin-top: 0;
}

.header-page .flex.col3:after {
    content: "";
    flex: 0 1 calc(1/1*100% - (1 - 1/1)*0px);
}
.header-page .flex.col3 .blocThumb {
    box-sizing: border-box;
    width: calc(1/1*100% - (1 - 1/1)*0px);
}
.header-page .flex.col3 .blocThumb:nth-child(even) {
    margin-top: 0;
}

@media only screen and (max-width: 991px) {
    .flex.col3 .blocThumb {
        width: calc(1/2*100% - (1 - 1/2)*30px);
        margin-bottom: 30px;
    }
    .flex.col3 .blocThumb:nth-child(3n+2) {
        margin-top:inherit;
    }
    .header-page .flex.col3 .blocThumb {
        width: calc(1/1*100% - (1 - 1/1)*0px);
        margin-bottom: 0;
    }
    .header-page .flex.col3 .blocThumb:nth-child(3n+2) {
        margin-top:inherit;
    }
}

@media only screen and (max-width: 767px) {
    .flex.col3 .blocThumb {
        width: calc(1/2*100% - (1 - 1/2)*10px);
        margin-bottom: 0;
    }
    .header-page .flex.col3 .blocThumb {
        width: calc(1/1*100% - (1 - 1/1)*0px);
        margin-bottom: 0;
    }
}


/* ------------------------------------------- 
	GRID CARTES
------------------------------------------- */
.grid.cartes {
    padding: 100px 0 50px 0;
    background: #fff url(../img/interface/topography.svg);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment:scroll;
    background-position: center center
}

.grid.cartes .flex .blocThumb:nth-child(even) {
    margin-top: 0;
}

.grid.cartes .flex {
    align-items: center;
    padding-left: 30px;
}
.grid.cartes .flex:after {
    flex: 0 1 calc(1/2*100% - (1 - 1/2)*15px);
}
.grid.cartes .flex .blocThumb {
    width: calc(1/2*100% - (1 - 1/2)*15px);
}

.grid.cartes .flex .blocThumb .blocImage {
    border: none;
}
.grid.cartes .flex .blocThumb .blocImage img {
    cursor: pointer;
}

.grid.cartes .flex .blocThumb {
    margin-bottom: 25px;
}


.grid.cartes .about-title {
    position:relative;
    font-family: var(--font2);
    font-size: 36px;
	line-height: 40px;
    margin-bottom:20px;
}
.grid.cartes .about-title:after {
 	font-size: 30px;
	line-height:30px;
	content: "\f462";
  	font-family: "Ionicons";
	position:relative;
	display:block;
}
.grid.cartes .about-title:empty {
	display:none;
}

@media only screen and (max-width: 991px) {
    .grid.cartes .flex {
        margin-top: 50px;
        padding: 0;
    }
    .grid.cartes .flex:after {
        flex: 0 1 calc(1/1*100% - (1 - 1/1)*0px);
    }
    .grid.cartes .flex .blocThumb {
        width: calc(1/1*100% - (1 - 1/1)*0px);
    }
    .grid.cartes {
        padding: 80px 0 50px;
    }
    .grid.cartes .flex .blocThumb {
        margin-bottom: 30px;
    }
    .grid.cartes .flex .blocThumb:last-child {
        margin-bottom: 0;
    }
    .grid.cartes .about-title {
        font-size:28px;
        line-height:32px;
        margin-bottom:15px;
    }
}

.grid.cartes .flex .blocThumb .caption .inner {
    text-align:center;
    padding: 0!important;
}

.grid.cartes .flex .blocThumb .caption {
    overflow: hidden;
    position: relative;
    display:inline-block;
    z-index:1;
    width: 100%;
    margin-top: 5px;
    padding: 0;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.grid.cartes .flex .blocThumb .caption .titre {
    position: relative;
    display:block;
    font-size:26px;
    line-height:28px;
	font-weight: bold;
}
.grid.cartes .flex .blocThumb .caption .desc {
    margin-top: 6px;
	font-size: 14px;
	line-height: 15px;
}

/* ROLL */
.grid.cartes .flex .blocThumb .underline-thumb {
    width: calc(100%);
    background-image: linear-gradient(transparent calc(100% - 2px), var(--colorUnder) 2px);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.4s;
}
.no-touch .grid.cartes .flex .blocThumb a:hover .caption .underline-thumb {
    background-size: 100% 100%;
}


/* ------------------------------------------- 
	GRID COLLAB
------------------------------------------- */
.grid.collab {
    padding: 100px 0;
}
.grid.collab .section-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.grid.collab .flex .blocThumb {
    margin-bottom: 0;
    margin-top: 30px;
    cursor: pointer;
    width: 100%;
}
.grid.collab .flex .blocThumb:nth-child(1) {
    margin-top: 0;
}

.grid.collab .flex .blocThumb a {
    display: flex;
    align-content: center;
    align-items: center;
}

.grid.collab .flex .blocThumb:nth-child(even) {
    margin-left: 0%;
}
.grid.collab .flex .blocThumb:nth-child(even) .blocImage {
    order: 2;
}
.grid.collab .flex .blocThumb:nth-child(even) .caption .inner {
    text-align:right;
}
.grid.collab .flex .blocThumb:nth-child(even) .caption .desc {
    text-align:right;
}

.grid.collab .flex .blocThumb .blocImage {
    width: 65%;
}

.grid.collab .flex .blocThumb .caption {
    overflow: hidden;
    position: relative;
    display:inline-block;
    z-index:1;
    width: 100%;
    margin-top: 0;
    padding: 40px;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.grid.collab .flex .blocThumb .caption .inner {
    text-align:left;
    padding: 0!important;
}
.grid.collab .flex .blocThumb .caption .titre {
    position: relative;
    display:block;
    font-size:32px;
    line-height:32px;
	font-weight: bold;
    padding-left: 25px;
}
.grid.collab .flex .blocThumb:nth-child(even) .caption .titre {
    padding-left: 0;
    padding-right: 25px;
}
.grid.collab .flex .blocThumb .caption .titre:after {
 	font-size: 24px;
	line-height:30px;
	content: "\f3d5";
  	font-family: "Ionicons";
	position:absolute;
    top: 0;
    left: 0;
	display:inline-block;
}
.grid.collab .flex .blocThumb:nth-child(even) .caption .titre:after {
    right: 0;
    content: "\f3d6";
}
.grid.collab .flex .blocThumb .caption .desc {
    font-size:inherit;
    line-height:inherit;
    margin-top: 20px;
    color: inherit;
	font-size: 16px;
	line-height: 24px;
}

/* ROLL */
.grid.collab .flex .blocThumb .underline-thumb {
    width: calc(100%);
    background-image: linear-gradient(transparent calc(100% - 2px), var(--colorUnder) 2px);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.4s;
}
.no-touch .grid.collab .flex .blocThumb a:hover .caption .underline-thumb {
    background-size: 100% 100%;
}

@media only screen and (max-width: 767px) {
    .grid.collab {
        padding: 50px 0;
    }
    .grid.collab .flex .blocThumb {
        margin-top: 30px;
    }
    .grid.collab .flex .blocThumb a {
        display: block;
    }
    .grid.collab .flex .blocThumb .blocImage {
        display: block;
        width: 100%;
    }
    .grid.collab .flex .blocThumb .blocImage img {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }
    .grid.collab .flex .blocThumb .caption {
        order: 2;
        padding: 0;
        margin-top: 15px;
    }
    .grid.collab .flex .blocThumb:nth-child(even) .caption .inner {
        text-align:left;
    }
    .grid.collab .flex .blocThumb .caption .titre {
        font-size:30px;
        line-height:30px;
    }
    .grid.collab .flex .blocThumb:nth-child(even) .caption .titre {
        padding-left: 25px;
        padding-right: 0;
    }
    .grid.collab .flex .blocThumb .caption .titre:after {
        content: "\f3d6";
        top: -2px;
    }
    .grid.collab .flex .blocThumb:nth-child(even) .caption .titre:after {
        left: 0;
        content: "\f3d6";
    }
    .grid.collab .flex .blocThumb .caption .desc {
        margin-top: 10px;
    }
    .grid.collab .flex .blocThumb:nth-child(even) .caption .desc {
        text-align:left;
    }
}


/* ------------------------------------------- 
	THUMB
------------------------------------------- */
.blocThumb {
    position: relative;
    float:left;
    display:inline-block;
    font-size:18px;
    height:auto;
}
.blocThumb a, .blocThumb a:hover {
    text-decoration: none;
    outline: inherit;
    color: inherit !important;
}

/* IMAGE */
.blocThumb .blocImage {
    vertical-align:top!important;
    display:inline-block;
    position:relative;
    overflow:hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 8px;
    border: rgba(16,16,16, .08) solid 1px;
}
.blocImage img {
    position:relative;
    display: block!important;
    -webkit-transition: -webkit-transform .2s ease, opacity .2s;
    -moz-transition: -moz-transform .2s ease, opacity .2s;
    transition: transform .2s ease, opacity .2s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.no-touch .blocThumb a:hover .blocImage img {
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
    overflow:hidden;
    border-radius: 8px;
}


/* RIBBON */
.ribbon {
    position:absolute;
    z-index: 1;
    text-align: center;
    text-transform: uppercase;
    width:50px;
    height:50px;
    line-height: 45px;
    background: var(--colorNew);
    color: var(--colorNewText);
    border-radius: 50%;
    top:10px;
    right:10px;
    /**/
    -moz-transform: rotate(15deg) translate3d(0,0,0);
    -webkit-transform: rotate(15deg) translate3d(0,0,0);
    -o-transform: rotate(15deg) translate3d(0,0,0);
    -ms-transform: rotate(15deg) translate3d(0,0,0);
    transform: rotate(15deg) translate3d(0,0,0);
}
.ribbon span {
    font-weight: bold;
    font-size: 12px!important;
    letter-spacing: -0.025em;
    position: relative;
    top: 1px;
}
.ribbon.offre {
    background: var(--colorPromo);
    color: var(--colorPromoText);
}

.blink{
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 1.5s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 1.5s;
    animation-timing-function: linear; 
    animation-iteration-count: infinite;
}
@-moz-keyframes blinker { 0% { opacity: 1.0; } 25% { opacity: 1.0; } 50% { opacity: 0.15; } 75% { opacity: 1.0; } 100% { opacity: 1.0; } }
@-webkit-keyframes blinker { 0% { opacity: 1.0; } 25% { opacity: 1.0; } 50% { opacity: 0.15; } 75% { opacity: 1.0; } 100% { opacity: 1.0; } } 
@keyframes blinker { 0% { opacity: 1.0; } 25% { opacity: 1.0; } 50% { opacity: 0.15; } 75% { opacity: 1.0; } 100% { opacity: 1.0; } }


/* CAPTION */
.blocThumb .caption {
    overflow: hidden;
    position: relative;
    display:inline-block;
    z-index:1;
    width: 100%;
/*    margin-top: -15px;*/
    -webkit-transform: translate3d(0,-15px,0);
    -moz-transform: translate3d(0,-15px,0);
    -ms-transform: translate3d(0,-15px,0);
    -o-transform: translate3d(0,-15px,0);
    transform: translate3d(0,-15px,0);
}
.blocThumb .caption .inner {
    position: relative;
    text-align:center;
    padding:0 15px;
}
.blocThumb .caption .prix {
	font-family: var(--font1);
    font-size:24px;
    line-height:24px;
    text-decoration: none;
    display:inline-block;
    border-top: #ddd solid 1px;
    margin: 10px 0 0 0;
    padding: 10px 15% 0 15%;
}
.blocThumb .caption .prix span {
    display: block;
    font-size:12px;
    line-height:12px;
    font-style: italic;
    margin-bottom: 2px;
}
.blocThumb .caption .titre {
    position: relative;
    display:block;
    font-size:32px;
    line-height:34px;
	font-family: var(--font2);
}
.blocThumb .caption .desc {
    position: relative;
    display:block;
    /*font-size:14px;
    line-height:21px;*/
    margin-top:6px;
    /*color: #aaa;*/
}
.blocThumb .caption .taille {
    position: relative;
    display:block;
    font-size:12px;
    line-height:15px;
    color: #999;
    margin: 10px 0 0 0;
}

@media only screen and (max-width: 767px) {
    .blocThumb .caption {
        -webkit-transform: translate3d(0,-15px,0);
        -moz-transform: translate3d(0,-15px,0);
        -ms-transform: translate3d(0,-15px,0);
        -o-transform: translate3d(0,-15px,0);
        transform: translate3d(0,-15px,0);
    }
    .blocThumb .caption .titre {
        font-size:22px;
        line-height:23px;
    }
    .blocThumb .caption .prix {
        font-size:24px;
        line-height:24px;
        margin: 5px 0 0 0;
        padding: 5px 15% 0 15%;
    }
    .blocThumb .caption .taille {
        font-size:11px;
        line-height:14px;
        margin: 5px 0 0 0;
    }
    .blocThumb .ribbon {
        top: 5px;
        right: 5px;
        width:40px;
        height:40px;
        line-height: 35px;
    }
    .blocThumb .ribbon span {
        font-size:11px!important;
    }
}


/* ------------------------------------------- 
    PAGINATION
------------------------------------------- */
.pagination {
    position:relative;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    display: block;
}
.grid-pagination {
    position:relative;
    text-align: center;
    display: inline-block;
    margin: 0 auto;
    display: inline-block;
}

.grid-pagination li {
    margin: 0 2px;
    padding:25px 0 50px 0;
    float: left;
    /**/
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    width:40px;
    height:40px;
}

.grid-pagination a, .grid-pagination span {
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 16px;
    line-height:38px;
    color:var(--colorDark);
}
.grid-pagination a {
    display: block;
    float: left;
    /**/
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    width:40px;
    height:40px;
    background:#fff;
    border: var(--colorDark) solid 2px;
}
.no-touch .grid-pagination a:hover {
    background-color: var(--colorDark);
    color: #fff;
}
.grid-pagination span {
    background:transparent;
    position: relative;
    top:3px;
    padding: 0 0;
}
.grid-pagination li:first-of-type a {
    background:transparent;
    font-size: 28px;
    line-height:38px;
    position: relative;
    top:1px;
    border: none;
}
.grid-pagination .button:first-of-type a::before {
    font-family: "Ionicons";
    content: '\f2ca';
}
.grid-pagination li:last-of-type a {
    background:transparent;
    font-size: 28px;
    line-height:38px;
    position: relative;
    top:1px;
    border: none;
}
.grid-pagination .button:last-of-type a::after {
    font-family: "Ionicons";
    content: '\f30f';
}
.no-touch .grid-pagination li:last-of-type a:hover,
.no-touch .grid-pagination li:first-of-type a:hover {
    color: var(--colorDark);
    background:#fff;
}
.grid-pagination .current {
    background-color: var(--colorDark);
    color: #fff;
    pointer-events: none;
}

@media only screen and (max-width: 767px) {
    .pagination {
        padding: 0 0 0 0;
    }
    .grid-pagination li:last-of-type,
    .grid-pagination li:first-of-type { display: block; }
    .grid-pagination li{
        width:32px;
        height:32px;
        line-height:30px;
        margin: 0 1px;
    }
    .grid-pagination a, .grid-pagination span {
        width:32px;
        height:32px;
        font-size:14px;
        line-height:30px;
    }
    .grid-pagination li:first-of-type a, .grid-pagination li:last-of-type a {
        font-size: 24px;
        top:-3px;
    }
}





/* ////////////////////////////////////////////////////////////////////////////

    08 . GALLERY

//////////////////////////////////////////////////////////////////////////// */

.flex-gallery {
    
}

.flex-gallery-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    margin-bottom: 100px;
}
.flex-gallery-row:last-child {
    margin-bottom: 0;
}

.flex-gallery-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /*justify-content: center;*/
}
.flex-gallery-item.w1 {
    width: calc(1/1*100% - (1 - 1/1)*100px);
}
.flex-gallery-item.w2 {
    width: calc(1/2*100% - (1 - 1/2)*100px);
}
.flex-gallery-item.w3 {
    width: calc(1/3*100% - (1 - 1/3)*100px);
}

.flex-gallery-item img {
    width: 100%;
    height: auto;
    vertical-align: middle;
    cursor: -moz-zoom-in; 
    cursor: -webkit-zoom-in; 
    cursor: zoom-in;
    cursor: url('../img/pictos/zoom.svg') 16 16, auto;
}

@media only screen and (max-width: 767px) {
    .flex-gallery-row {
        margin-bottom: 30px;
    }
    .flex-gallery-item {
        margin-bottom: 30px;
    }
    .flex-gallery-item:last-child {
        margin-bottom: 0;
    }
    .flex-gallery-item.w1,
    .flex-gallery-item.w2,
    .flex-gallery-item.w3 {
        width: calc(1/1*100% - (1 - 1/1)*100px);
    }
}