/*@import url('https://fonts.googleapis.com/css?family=Libre+Franklin:100,200,300,400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,700&display=swap');*/

@import url('https://fonts.googleapis.com/css?family=Zilla+Slab:600,600i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Kanit:900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,700&display=swap');

@font-face {
	font-family: 'GothamRoundedBook';
	src: url('../medias/fonts/gothamroundedbook.woff2') format('woff2'),
			 url('../medias/fonts/gothamroundedbook.woff') format('woff'),
			 url('../medias/fonts/gothamroundedbook.ttf') format('truetype');
}
@font-face {
	font-family: 'GothamRoundedLight';
	src: url('../medias/fonts/gothamroundedlight.woff2') format('woff2'),
			 url('../medias/fonts/gothamroundedlight.woff') format('woff'),
			 url('../medias/fonts/gothamroundedlight.ttf') format('truetype');
}


/* GLOBAL VARS */
:root{
	/* colors */
	--hover-orange: rgba(255, 115, 0, 0.9);
	--light-brown: rgba(128, 116, 108, 1);
	--lighter-brown: rgba(237, 235, 230, 1);
	--lighter-brown2: rgba(198, 192, 176, 1);
	--lightest-brown: rgba(252, 251, 250, 1);
	--dark-brown: rgba(73, 60, 51, 1);
	--darker-brown: rgba(39, 37, 36, 1);
	--darker-blue: rgba(10, 50, 78, 1);
	--dark-blue: rgba(0, 62, 86, 1);
	--deep-blue: rgba(0, 102, 153, 1);
	--deep-blue-alpha: rgba(0, 102, 153, 0.5);
	--light-blue: rgba(51, 175, 232, 1);
	--lighter-blue: rgba(136, 221, 255, 1);
	--deep-red: rgba(186, 35, 42, 1);
	--light-red: rgba(255, 76, 76, 1);
	--deep-orange: rgba(240, 103, 48, 1);
	--light-orange: rgba(255, 147, 38, 1);
	--nodefield-gradient-alpha: 0.1;
	--footer-height: 40vh;
	--pathbar-link-width: 10px;
	
	/* animations durations */
	--nav-item-animation-duration: 0.2s;
	--btn-anim-duration: 0.2s;
	--btn-anim-arrow-duration: 0.1s;
	
	/*btn anim border*/
	--btn-anim-border: 1px;
	
	/*parallax*/
	--parallax-visible-height: 20rem;
}


/* @media screen and (max-width: 576px) and (orientation: portrait){ */
@media screen and (max-width: 576px){
	:root{
		--footer-height: 100vh;
		--parallax-visible-height: 10rem;
	}
}
/* FIN GLOBAL VARS */


/* GLOBAL HTML TAGS */

html{
	
}
body{
	/* font-family: 'GothamRoundedLight', sans-serif; */
	font-family: 'Rubik', sans-serif;
	font-size: 0.8rem;
	text-rendering: optimizeLegibility;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}
header{
	
}
main{}

h1{
	/* font-family: 'GothamRoundedBook', sans-serif; */
	font-family: 'Rubik', sans-serif;
	font-size: 4rem;
	line-height: 4rem;
	/* font-family: 'Kanit', sans-serif; */
	/* font-size: 5rem; */
	/* line-height: 5rem; */
	font-weight: 300;
	text-transform: uppercase;
	color: var(--darker-blue);
	padding: 0;
	margin: 0;
}



h2{
	font-family: 'Zilla Slab', serif;
	font-style: italic;
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--darker-blue);
}

h3{
	font-family: 'Zilla Slab', serif;
	font-style: italic;
	font-size: 1.2rem;
	/* font-weight: 700; */
	color: var(--dark-brown);
}

h5{
	font-family: 'GothamRoundedBook', sans-serif;
	font-weight: 700;
}

p{
	font-weight: 400;
	line-height: 1.5rem;
	color: var(--dark-brown);
	margin-bottom: 5rem;
	text-align: justify;
	text-align-last: left;
}

article{
	
}

section{
	position: relative;
	z-index: 5;
	padding-bottom: 5rem;
}

/* section:last-child{ */
	/* position: relative; */
	/* z-index: 1; */
	/* margin-bottom: var(--footer-height); */
	/* -webkit-box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.75); */
	/* -moz-box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.75); */
	/* box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.75); */
/* } */

footer{
	position: fixed;
	bottom: 0;
	z-index: -10;
	color: #FFF;
}
video{
	display: block;
}

a:hover{
	text-decoration: none;
}

button:focus{
	outline: none !important;
}

.form-control::-webkit-input-placeholder{ /* WebKit, Blink, Edge */
	color:    var(--light-brown);
}
.form-control:-moz-placeholder { /*Mozilla Firefox 4 to 18 */
	color:    var(--light-brown);
	opacity:  1;
}
.form-control::-moz-placeholder{ /* Mozilla Firefox 19+ */
	color:    var(--light-brown);
	opacity:  1;
}
.form-control:-ms-input-placeholder { /*Internet Explorer 10-11 */ 
	color:    var(--light-brown);
}
.form-control::-ms-input-placeholder{ /* Microsoft Edge */
	color:    var(--light-brown);
}

.form-control::placeholder{ /* Most modern browsers support this now. */
	color:    var(--light-brown);
}


input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
	-webkit-box-shadow: 0 0 0 1000px white inset !important;
	-webkit-text-fill-color: var(--dark-brown) !important;
	transition: background-color 5000s ease-in-out 0s;
}

label{
	/* font-weight: 700; */
	color: var(--dark-brown);
}

/* CSS Created by CSS CHECKBOX */
/**********************************/
/**** www.CSScheckbox.com *********/

/*general styles for all CSS Checkboxes*/
label {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

input[type=checkbox].css-checkbox {
	position: absolute; 
	overflow: hidden; 
	clip: rect(0 0 0 0); 
	height:1px; 
	width:1px; 
	margin:-1px; 
	padding:0;
	border:0;
}

input[type=checkbox].css-checkbox + label.css-label {
	padding-left:20px;
	height:15px; 
	display:inline-block;
	line-height:15px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size:15px;
	vertical-align:middle;
	cursor:pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
	background-position: 0 -15px;
}

.css-label{
	background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png);
}

/*specific classes related to Checkbox skins*/
/* .depressed-lite-small{background-image:url(http://csscheckbox.com/checkboxes/depressed-lite-small.png);} */
/* .elegant{background-image:url(http://csscheckbox.com/checkboxes/elegant.png);} */
/* .depressed{background-image:url(http://csscheckbox.com/checkboxes/depressed.png);} */
/* .chrome-style{background-image:url(http://csscheckbox.com/checkboxes/chrome-style.png);} */
.web-two-style{background-image:url(http://csscheckbox.com/checkboxes/web-two-style.png);}
/* .vlad{background-image:url(http://csscheckbox.com/checkboxes/vlad.png);} */
/* .klaus{background-image:url(http://csscheckbox.com/checkboxes/klaus.png);} */

input[type=checkbox].css-checkbox.med + label.css-label.med {
	padding-left:22px;
	height:17px; 
	display:inline-block;
	line-height:17px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size:15px;
	vertical-align:middle;
	cursor:pointer;
}

input[type=checkbox].css-checkbox.med:checked + label.css-label.med {
	background-position: 0 -17px;
}
input[type=checkbox].css-checkbox.sme + label.css-label.sme {
	padding-left:22px;
	height:16px; 
	display:inline-block;
	line-height:16px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size:15px;
	vertical-align:middle;
	cursor:pointer;
}

input[type=checkbox].css-checkbox.sme:checked + label.css-label.sme{
	background-position: 0 -16px;
}
input[type=checkbox].css-checkbox.lrg + label.css-label.lrg {
	padding-left:22px;
    height:20px; 
	display:inline-block;
	line-height:20px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size:15px;
	vertical-align:middle;
    cursor:pointer;
}

input[type=checkbox].css-checkbox.lrg:checked + label.css-label.lrg{
	background-position: 0 -20px;
}





/* FIN GLOBAL HTML TAGS */

.preload-screen{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: white;
	z-index: 1500;
}


.preload-screen > .preload-anim
{
	position: relative;
	top: 50%;
	left: 50%;
	width: 150px;
	height: 300px;
	transform: translateX(-50%) translateY(-50%);
}
.preload-screen > .preload-anim > .preload-logo{
	background-image: url("../medias/img/new-logo-preloader.gif");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 150px;
	height: 64px;
	margin-bottom: 1rem;
	
}

.preload-screen > .preload-anim > div.spinner {
	position: relative;
	border: 0.2rem solid var(--lighter-brown); /* Light grey */
	border-top: 0.2rem solid var(--deep-orange); /* Blue */
	border-radius: 50%;
	width: 2.5rem;
	height: 2.5rem;
	left: 50%;
	transform: translateX(-50%);
	animation: spinner-rotating 1s linear infinite;
}



@-webkit-keyframes spinner-rotating {
	from {
		-webkit-transform: rotate(0deg);
		-o-transform: translateX(-50%) rotate(0deg);
		transform: translateX(-50%) rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
		-o-transform: translateX(-50%) rotate(360deg);
		transform: translateX(-50%) rotate(360deg);
	}
}





.mid-screen-intersect{
	position: fixed;
	/* top: 50%; */
	width: 100%;
	height: 1px;
	visibility: visible;
	background-color: rgba(255, 0, 0, 0.5);
	z-index: 10000;
}

.huge{
	font-size: 6rem;
	line-height: 6rem;
	font-weight: 700;
}
@media screen and (max-width: 576px){
	.huge{
	font-size: 2rem;
	line-height: 2rem;
	}
}

.title-center{
	text-align: center;
}

.highlight{
	color: var(--deep-orange);
}

.highlight-red{
	color: var(--deep-red);
}

.highlight-blue{
	color: var(--deep-blue);
}

.black{
	color: black;
}

.subtitle{
	font-family: 'Rubik', sans-serif;
	font-size: 2rem;
	font-style: normal;
	text-transform: uppercase;
}

@media screen and (max-width: 576px){
	h1{
		font-size: 2.5rem;
		line-height: 2.5rem;
	}
	h2{
		font-family: 'Zilla Slab', serif;
		font-style: italic;
		font-size: 1.8rem;
		font-weight: 700;
		color: var(--dark-brown);
	}

	h3{
		font-family: 'Zilla Slab', serif;
		font-style: italic;
		font-size: 1.2rem;
		/* font-weight: 700; */
		color: var(--dark-brown);
	}

	h5{
		font-family: 'GothamRoundedBook', sans-serif;
		font-weight: 700;
	}

	p{
		margin-bottom: 3rem;
		line-height: 1rem;
	}

	.subtitle{
		font-size: 1.2rem;
	}
}


/* USER MENU */

/*nécessaire pour faire passer le menu déroulant par dessus le header qui a un z-index: 1020*/
.user-menu .dropdown-menu{
	z-index: 1021;
}
.user-menu{
	padding-right: 0;
	background-color: rgba(108, 117, 125, 1);
}

/* TODO attention, peut etre n'appliquer que pour les boutons du user menu */
.my-btn,
.btn-group-sm>.my-btn,
.dropdown-menu{
	border-radius: 0;
	font-size: 0.8rem;
}


.ddl-icon{
	position: absolute;
	height: 16px;
	right: 20px;
	margin-top: 5px;
}

.selected-ddl-icon{
	height: 16px;
	margin: -4px 5px 0 5px;
}

/* FIN USER MENU */


/* NAV */


nav{
	background-color: #FFF !important;
}

/* Déplacement vers le bas de la div contenant le menu pour aligner le soulignage sur la ligne de base de la nav */
/* Attention à corriger pour la version collapse => le trait est trop bas */
div.navbar-collapse{
	margin-bottom: -0.8rem;
}
.navbar{
	padding-top: 1rem;
	padding-bottom: 1rem;
	align-items: flex-end;
}

/* logo ds la navbar */
.navbar-brand{
	padding: 0;
}

.nav-item-underline{
	position: relative;
	display: block;
	line-height: 0px;
	padding: 0;
	margin: 0;
	width: 0px;
	height: 1px;
	top: 5px;
	background-color: var(--deep-orange);
	transition: all 0.2s ease-out;
}

.navbar-light .navbar-nav .nav-link{
	color: var(--dark-brown);
	font-weight: 300;
}


/* Changement de couleur du texte */
.navbar-light .navbar-nav .nav-item:not(.active) .nav-link:hover,
.navbar-light .navbar-nav .nav-item:not(.active) .nav-link:focus{
	animation: nav-item-hover var(--nav-item-animation-duration);
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

/* .navbar-light .navbar-nav .nav-item:not(.active) .nav-link:not(:hover), */
.navbar-light .navbar-nav .nav-item:not(.active) .nav-link:not(:hover){
	animation: nav-item-out var(--nav-item-animation-duration);
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}


/* Animation du underline */
/* Il faut cibler les elements specifiquement (par leur id) sinon il y a conflit dans l'affectation des classes */
/* => un element est not(.active) et :hover tandis que l'autre n'est pas :hover (le troisieme est forcément selectionné) */

.navbar-light .navbar-nav #nav-item-0:not(.active) .nav-link:hover + .nav-item-underline,
.navbar-light .navbar-nav #nav-item-0:not(.active) .nav-link:focus + .nav-item-underline,
.navbar-light .navbar-nav #nav-item-1:not(.active) .nav-link:hover + .nav-item-underline,
.navbar-light .navbar-nav #nav-item-1:not(.active) .nav-link:focus + .nav-item-underline,
.navbar-light .navbar-nav #nav-item-2:not(.active) .nav-link:hover + .nav-item-underline,
.navbar-light .navbar-nav #nav-item-2:not(.active) .nav-link:focus + .nav-item-underline,
.navbar-light .navbar-nav #nav-item-3:not(.active) .nav-link:hover + .nav-item-underline,
.navbar-light .navbar-nav #nav-item-3:not(.active) .nav-link:focus + .nav-item-underline{
	/* animation: nav-item-underline-hover var(--nav-item-animation-duration); */
	/* animation-timing-function: ease-out; */
	/* animation-fill-mode: forwards; */
	margin-left: 0;
	width: 100%;
}

.navbar-light .navbar-nav .nav-item:not(.active) .nav-link:not(:hover) + .nav-item-underline,
.navbar-light .navbar-nav .nav-item:not(.active) .nav-link:not(:focus) + .nav-item-underline{
	/* animation: nav-item-underline-out var(--nav-item-animation-duration); */
	/* animation-timing-function: ease-out; */
	/* animation-fill-mode: forwards; */
	margin-left: 50%;
	width: 0%
}


.navbar-light .navbar-nav .active>.nav-link{
	color: var(--deep-orange);
}

/* a virer peut etre si pb avec l'animation */
.navbar-light .navbar-nav .active>.nav-item-underline{
	width: 100%;
}

.navbar-toggler{
	border: none;
	border-radius: 0;
	padding: 0;
}

.navbar-light .navbar-toggler-icon{
	/* background-color: rgba(255, 0, 0, 0.5); */
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M0 8h30M0 18h30M0 28h30'/%3e%3c/svg%3e");
}


/* FIN NAV */


/* CONTENT */
.content-wrapper{
	height: auto; /*indispensable pour le fonctionnement de .sticky-top*/
	font-size: 1rem;
}

@media screen and (max-width: 576px){
	.content-wrapper{
		font-size: 0.8rem;
	}
}




/* card buttons */



.card-button-wrapper:hover .card-border{
	bottom: 0;
}

.card-button-wrapper:hover .card-border > span{
	animation-name: card-tab-arrow-anim;
	animation-delay: 0.2s;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}


.card-button-wrapper:hover > #publi-s-card-button{
	-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 102, 153, 0.2);
	-moz-box-shadow: 0px 0px 4px 2px rgba(0, 102, 153,0.2);
	box-shadow: 0px 0px 4px 2px rgba(0, 102, 153,0.2);
}
.card-button-wrapper:hover > #publi-l-card-button{
	-webkit-box-shadow: 0px 0px 4px 2px rgba(240, 103, 48, 0.2);
	-moz-box-shadow: 0px 0px 4px 2px rgba(240, 103, 48,0.2);
	box-shadow: 0px 0px 4px 2px rgba(240, 103, 48,0.2);
}
.card-button-wrapper:hover > #publi-a-card-button{
	-webkit-box-shadow: 0px 0px 4px 2px rgba(186, 35, 42, 0.2);
	-moz-box-shadow: 0px 0px 4px 2px rgba(186, 35, 42,0.2);
	box-shadow: 0px 0px 4px 2px rgba(186, 35, 42,0.2);
}


.card-button{
	margin-bottom: 5rem;
	-webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 4px 2px rgba(0,0,0,.1);
}

.card-button > div{
	position: relative;
	overflow: hidden;
}

.card-button.card-button-last{
	margin-bottom: 5rem;
}

@media screen and (max-width: 576px){
	.card-button{
		/* margin-bottom: 3rem; */
		margin-bottom: 1rem;
	}
}

.card-button .card-image{
	/* z-index: 2; */
}
.card-button .card-content{
	/* z-index: 3; */
}
.card-content{
	display: flex;
	flex-direction: row;
	overflow: hidden;
}

.card-button .card-border{
	position: absolute;
	bottom: -0.8rem;
	width: 100%;
	height: 1rem;
	/* border-bottom-right-radius: 4px 4px; */
	/* border-bottom-left-radius: 4px 4px; */
	-webkit-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
	/* z-index: 1; */
	overflow: hidden;
}

.card-button .card-border > span{
	background-image: url(../medias/img/icons/arrow-down-white.svg);
	background-size: contain;
	background-repeat: no-repeat;
	width: 0.9rem;
	height: 0.9rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform-origin: center;
	transform: translate(-50%, -25%);
}

@keyframes card-tab-arrow-anim{
	0%{
		top: 50%;
	}
	33%{
		top: 120%;
		visibility: hidden;
	}
	66%{
		top: -20%;
		visibility: hidden;
	}
	100%{
		top: 50%;
	}
}


.card-button .h-card-img{
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.card-button .card-body{
	background-color: white;
	padding: 0.75rem 0.25rem 1rem 0.75rem;
}



.card-button .card-body > .card-title{
	font-family: 'Zilla Slab', serif;
	font-style: italic;
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: .25rem;
}

.card-button .card-body > .card-text{
	font-size: 1rem;
	font-weight: 400;
	margin: 0;
}

.card-button .card-body > .card-text-more{
	font-size: 0.8rem;
	font-weight: 400;
	margin: 0;
}

.card-button#publi-s-card-button .card-body,
.card-button#publi-s-card-button .card-body > .card-text,
.card-button#publi-s-card-button .card-body > .card-text-more{
	color: var(--deep-blue);
}
.card-button#publi-s-card-button .h-card-img{
	background-image: url('../medias/img/card-publi-s2.jpg');
}
.card-button#publi-s-card-button .card-border{
	background-color: var(--deep-blue);
}


.card-button#publi-l-card-button .card-body,
.card-button#publi-l-card-button .card-body > .card-text,
.card-button#publi-l-card-button .card-body > .card-text-more{
	color: var(--deep-orange);
}
.card-button#publi-l-card-button .h-card-img{
	background-image: url('../medias/img/card-publi-l2.jpg');
}
.card-button#publi-l-card-button .card-border{
	background-color: var(--deep-orange);
}


.card-button#publi-a-card-button .card-body,
.card-button#publi-a-card-button .card-body > .card-text,
.card-button#publi-a-card-button .card-body > .card-text-more{
	color: var(--deep-red);
}
.card-button#publi-a-card-button .h-card-img{
	background-image: url('../medias/img/card-publi-a2.jpg');
}
.card-button#publi-a-card-button .card-border{
	background-color: var(--deep-red);
}


/* card deck */
/* CARDS */

.card-deck{
	margin-bottom: 5rem;
}

@media screen and (max-width: 576px){
	.card-deck{
		margin-bottom: 2rem;
	}
}



.card{
	border-radius: 0;
	border: none;
	width: 100%;
	top: 0;
	left: 0;

}

#card-tool.sps{
	transition: all 0.3s ease;
}

#card-role.sps{
	transition: all 0.3s 0.15s ease;
}

#card-flex.sps{
	transition: all 0.3s 0.3s ease;
}

.card.sps--abv{
	transform: translateY(5rem);
	opacity: 0;
}


.card.sps--blw{
	transform: translateY(0);
	opacity: 1;
}


.card-text{
	font-size: 0.8rem;
	line-height: 1.5rem;
}

@media screen and (max-width: 576px){
	.card-text{
		line-height: 1rem;
	}
}


.card-img-top{
	border-radius: 0;
}

.card-body{
	background-color: var(--darker-brown)
}

.card-body > h3.card-title{
	color: #FFF;
	font-weight: 400;
	margin-bottom: 1.2rem;
	font-size: 1.5rem;
}

@media screen and (max-width: 576px){
	.card-body > h3.card-title{
		font-size: 1.2rem;
	}
}

.card-body > p.card-text{
	color: white /*var(--lighter-brown)*/;
	font-weight: 100;
	margin-bottom: 0;
	text-align: justify;
	text-align-last: left;
}


.inline-link{
	font-weight: 700;
	text-align: center;
}

/* FIN CARDS */
/* H-CARDS */



.h-card-body{
	font-size: 0.8rem;
	padding: 15px;
}
.h-card-body p{
	margin-bottom: 2rem;
	line-height: 1rem;
	font-weight: 400;
	color: var(--darker-brown);
}


a.more-infos {
	display: block;
	margin-top: 1rem;
	margin-bottom: 5rem;
}
.section-solutions > div > div.row:last-child a.more-infos {
	margin-bottom: 0;
}


a.more-infos > p{
	text-align: center;
	text-align-last: center;
	margin: 0;
}


a.more-infos > p#publi-s-more-infos{
	color: var(--deep-blue);
}
a.more-infos > p#publi-l-more-infos{
	color: var(--deep-orange);
}
a.more-infos > p#publi-a-more-infos{
	color: var(--deep-red);
}

a.more-infos > p > span{
	transition: margin-left 0.1s ease-out;
}
a.more-infos:hover > p > span{
	margin-left: .5rem;
}

.h-card-img{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
#publi-s-card .h-card-img,
#publi-s-card-back .h-card-img{
	background-image: url('../medias/img/card-publi-s2.jpg');
}
#publi-l-card .h-card-img,
#publi-l-card-back .h-card-img{
	background-image: url('../medias/img/card-publi-l2.jpg');
}
#publi-a-card .h-card-img,
#publi-a-card-back .h-card-img{
	background-image: url('../medias/img/card-publi-a2.jpg');
}

.h-card-content{
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0.5rem;
}

#publi-s-card .h-card-header h2,
#publi-s-card-back .h-card-header h2,
#publi-s-card .h-card-header h3,
#publi-s-card-back .h-card-header h3{
	color: var(--deep-blue);
}


#publi-l-card .h-card-header h2,
#publi-l-card-back .h-card-header h2,
#publi-l-card .h-card-header h3,
#publi-l-card-back .h-card-header h3{
	color: var(--deep-orange);
}

#publi-a-card .h-card-header h2,
#publi-a-card-back .h-card-header h2,
#publi-a-card .h-card-header h3,
#publi-a-card-back .h-card-header h3{
	color: var(--deep-red);
}

.h-card-grid .h-card-header > h2{
	font-size: 3rem;
}

.h-card-header > h3{
	margin-bottom: 1rem;
}



.h-card-footer{
	display: flex;
	flex-direction: row;
}


.bottom-ribbon2{
	position: absolute;
	bottom: 0;
	right: 0;
	/* pour compenser le padding de la colonne */
	margin-right: -10px;
	
	/* pour compenser le margin-bottom de la h-card */
	margin-bottom: -25px; /*calc(4rem - 10px);*/
}



.offer-detail-list{
	/* margin-top: 2rem; */
	margin-bottom: 0;
}

#publi-s-card .offer-detail-list,
#publi-s-card-back .offer-detail-list{
	list-style-image: url('../medias/img/check-blue.svg');
	color: var(--deep-blue);
}

#publi-l-card .offer-detail-list,
#publi-l-card-back .offer-detail-list{
	list-style-image: url('../medias/img/check-orange.svg');
	color: var(--deep-orange);
}

#publi-a-card .offer-detail-list,
#publi-a-card-back .offer-detail-list{
	list-style-image: url('../medias/img/check-red.svg');
	color: var(--deep-red);
}


.offer-detail-list > li{
	margin-bottom: 1rem;
}

.offer-detail-list > li:last-child{
	margin-bottom: 2rem;
}
.client-item{
	width: 60px;
	height: 60px;
	margin-right: 0.5rem;
	display: inline-block;
	background-image: url('https://via.placeholder.com/60');
}
.client-item2{
	width: 60px;
	height: 60px;
	margin-right: 0.5rem;
	display: inline-block;
}

/* FIN H-CARDS */

/* ROTATING BOX */


.swipe-info{
	position: absolute;
	width: calc(100% - 30px);
	height: 100%;
	background-color: rgba( 255, 255, 255, 0.75 );
	z-index: 2;
	outline: 5px solid rgba( 255, 255, 255, 0.75 );
	opacity: 0;
}




.swipe-info > svg{
	position: relative;
	width: 150px;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%);
}

.swipe-info.publi-s > svg{
	fill: var(--deep-blue);
}
.swipe-info.publi-l > svg{
	fill: var(--deep-orange);
}
.swipe-info.publi-a > svg{
	fill: var(--deep-red);
}


.swipe-info > svg > g#swipe-icon{
	transform: translateY(20px);
}

.swipe-info > svg > g#swipe-icon > #arrow-left-1{
	animation: swipe-anim-arrow-l1 2s ease-out infinite;
}
.swipe-info > svg > g#swipe-icon > #arrow-left-2{
	animation: swipe-anim-arrow-l2 2s ease-out infinite;
}


.swipe-info > svg > g > #arrow-right-1{
	animation-name: swipe-anim-arrow-r1;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}
.swipe-info > svg > g > #arrow-right-2{
	animation-name: swipe-anim-arrow-r2;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}

.swipe-info > svg > g > #small-circle{
	animation-name: swipe-anim-small-circle;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}
.swipe-info > svg > g > #big-circle{
	animation-name: swipe-anim-big-circle;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
	
}

@keyframes swipe-anim-small-circle {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
@keyframes swipe-anim-big-circle {
	0% {
		opacity: 0;
		/* transform:scale(0, 0); */
	}
	40% {
		opacity: 0;
		/* transform:scale(0, 0); */
	}
	50% {
		opacity: 1;
		/* transform:scale(1, 1); */
	}
	100% {
		opacity: 1;
		/* transform:scale(1, 1); */
	}
}

@keyframes swipe-anim-arrow-l1 {
	0% {
		opacity: 0;
		transform:translate(0);
	}
	50% {
		opacity: 0;
		transform:translate(0);
	}
	100% {
		opacity: 1;
		transform:translate(-20px);
	}
}
@keyframes swipe-anim-arrow-l2 {
	0% {
		opacity: 0;
		transform:translate(0);
	}
	50% {
		opacity: 0;
		transform:translate(0);
	}
	100% {
		opacity: 1;
		transform:translate(-60px);
	}
}


@keyframes swipe-anim-arrow-r1 {
	0% {
		opacity: 0;
		transform:translate(0);
	}
	50% {
		opacity: 0;
		transform:translate(0);
	}
	100% {
		opacity: 1;
		transform:translate(20px);
	}
}
@keyframes swipe-anim-arrow-r2 {
	0% {
		opacity: 0;
		transform:translate(0);
	}
	50% {
		opacity: 0;
		transform:translate(0);
	}
	100% {
		opacity: 1;
		transform:translate(60px);
	}
}


.rotating-box-wrapper{
	/* width: 1238px; */
	/* height: 430px; */
	perspective: 1000px;
}

.rotating-box-wrapper2{
	/* width: 1238px; */
	/* height: 430px; */
	/* transform: translateZ(-620px); */
	transform-style: preserve-3d;
}

.rotating-box{
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
}

.rb-face{
	transform-style: preserve-3d;
}

.rb-front{
	position: absolute;
	background-color: white;
	/* transform: translateZ(619px); */
	webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	width: 100%;
}
.rb-back{
	width: 100%;
	position: absolute;
	/* background-color: grey; */
	/* padding: 2rem; */
	/* background-image: url('../medias/img/cube/charts.png'); */
	/* background-size: contain; */
	/* background-position: center; */
	/* background-repeat: no-repeat; */
	transform: rotateY(180deg) translateZ(619px);
	webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	/* opacity: 0; */
}

.rb-left{
	position: absolute;
	padding: 2rem;
	/* background-image: url('../medias/img/cube/left.jpg'); */
	background-position: center;
	background-repeat: no-repeat;
	/* width: 1238px; */
	/* height: 430px; */
	transform: rotateY(-90deg) translateX(-619px);
	transform-origin: left;
	webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	/* opacity: 0; */
}


.rb-right{
	position: absolute;
	/* background-color: grey; */
	padding: 2rem;
	/* background-image: url('../medias/img/cube/right.jpg'); */
	background-position: center;
	background-repeat: no-repeat;
	/* width: 1238px; */
	/* height: 430px; */
	transform: rotateY(90deg) translateX(619px);
	transform-origin: right;
	background-repeat: no-repeat;
	webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	/* opacity: 0; */
}

.rb-right > .offset-img,
.rb-left > .offset-img{
	position: absolute;
	top: 0;
	left: 0;
	/* background-color: grey; */
	padding: 2rem;
	background-size: contain;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	transform: translateZ(-200px);
	/* transform-origin: right; */
	background-repeat: no-repeat;
	webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	/* opacity: 0; */
}

.offset-img.editing{
	background-image: url('../medias/img/magazine.png');
	/* background-size: 70%; */
}

.offset-img.agency{
	background-image: url('../medias/img/multicanal-press.png');
}

.rb-top{
	position: absolute;
	/* background-color: grey; */
	padding: 2rem;
	/* background-image: url('../medias/img/cube/top.jpg'); */
	background-position: center;
	background-repeat: no-repeat;
	/* width: 1238px; */
	/* height: 430px; */
	transform: rotateX(-90deg) translateY(-215px);
	transform-origin: top;
	webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	/* opacity: 0; */
}

.rb-bottom{
	position: absolute;
	/* background-color: grey; */
	padding: 2rem;
	/* background-image: url('../medias/img/cube/bottom.jpg'); */
	background-position: center;
	background-repeat: no-repeat;
	/* width: 1238px; */
	/* height: 430px; */
	transform: rotateX(90deg) translateY(215px);
	transform-origin: bottom;
	webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	/* opacity: 0; */
}


.d3-arrow-btn{
	display: block;
	position: relative;
	top: 50%;
	left: 0;
	height: 45px;
	width: auto;
	transform: translateY(-50%);
}
.d3-arrow-btn svg{
	position: relative;
	height: 100%;
	width: auto;
	left: 0;
	transition: all 0.1s ease-out;
}
.d3-arrow-btn.left{
	text-align: right;
}

.d3-arrow-btn.publi-s svg{
	fill: var(--deep-blue);
}

.d3-arrow-btn.publi-l svg{
	fill: var(--deep-orange);
}

.d3-arrow-btn.publi-a svg{
	fill: var(--deep-red);
}

.d3-arrow-btn.right:hover svg{
	left: 1rem;
}

.d3-arrow-btn.left:hover svg{
	left: -1rem;
}


.d3-container-row{
	margin-bottom: 5rem;
}
.section-solutions > div > .d3-container-row:last-child{
	margin-bottom: 0;
}

/* FIN ROTATING BOX */


.btn-arrow{
	/* background-image: url('../medias/img/icons/arrow-right-white.svg'); */
	margin-left: 1rem;
	display: inline-block;
	/* background-size: contain; */
	/* background-repeat: no-repeat; */
	/* background-position: bottom right; */
	width: 0.8rem;
	height: 0.8rem;
	/* transition: margin-left 0.3s cubic-bezier(.54,.04,0,1.95); */
	/* -webkit-transition: margin-left 0.3s cubic-bezier(.54,.04,0,1.95); */
}

.btn-arrow svg{
	height: 100%;
	width: auto;
	top: 0;
}



/* slider */

.slider-wrapper{
	padding: 2rem 0 0 0;
	/* background-color: rgba(0, 0, 0, 0.1); */
}

.slider{
	overflow-x: hidden;
}

.slider-container{
	position: relative;
	left: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.slider-overlay{
	pointer-events: none;
	/* opacity: 0; */
	position: absolute;
	width: 100%;
	height: 100px;
	background: -moz-linear-gradient(left, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 90%);
	background: -webkit-gradient(left top, right top, color-stop(10%, rgba(255,255,255,1)), color-stop(50%, rgba(255,255,255,0)), color-stop(90%, rgba(255,255,255,1)));
	background: -webkit-linear-gradient(left, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 90%);
	background: -o-linear-gradient(left, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 90%);
	background: -ms-linear-gradient(left, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 90%);
	background: linear-gradient(to right, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 90%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
	z-index: 2;
}

.slider-item{
	flex-basis: 100px;
	flex-shrink: 0;
	filter: grayscale(1);
	margin: 0 1rem 0 1rem;
	width: 100px;
	height: 100px;
	background-color: rgba(0, 0, 0, 0);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	z-index: 1;
	transition: filter .15s ease-out;
}

@media screen and (max-width: 576px){
	.slider-item{
		flex-basis: 60px;
		flex-shrink: 0;
		margin: 0 0.5rem 0 0.5rem;
		width: 60px;
		height: 60px;
	}
}


.slider-item:hover{
	filter: grayscale(0);
}

/* fin slider */


/* nodefield */

.nodefield-wrapper{
	position: absolute;
	width: 100%;
	height: 100%;
	/* z-index: -10; */ /*je ne sais pas pourquoi le z-index etait fixé à -10*/
	margin-left: -15px;
	
}

.nodefield-wrapper > .nodefield-gradient{
	width: 100%;
	height: 100%;
	position: absolute;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+56,0.15+100 */
	background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 65%, rgba(0,0,0,var(--nodefield-gradient-alpha)) 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 65%,rgba(0,0,0,var(--nodefield-gradient-alpha)) 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 65%,rgba(0,0,0,var(--nodefield-gradient-alpha)) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#26000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/* fin nodefield */


/* cards wrapper */

.cards-wrapper{
	/* display: flex; */
	/* flex-direction: row; */
	/* white-space: nowrap; */
	overflow-x: hidden;
	width: 100%;
}

.cards-holder{
	position: relative;
	white-space: nowrap;
}
.overview-card[class*="col"]{
	display: inline-block;
	float: none;
	/* width: 100%; */
}


/* pagination offres */
ol.overview-cards-list{
	position: relative;
	padding-inline-start: 0;
	display: block;
	width: 100%;
	height: 0.5rem;
	left: 50%;
	transform: translateX(-25%);
	list-style: none;
	margin-bottom: 3rem;
}

li.pagination-dot{
	float: left;
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 100%;
	border: 1px solid var(--light-brown);
	margin: 0 0.25rem 0 0.25rem;
}

li.pagination-dot.active{
	float: left;
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 100%;
	border: none;
	background-color: var(--light-brown);
	margin: 0 0.25rem 0 0.25rem;
}
/* fin pagination offres */

/* list items */
.list-item{
	margin-bottom: 4rem;
	padding: 0 2rem 0 2rem;
}

@media screen and (max-width: 576px){
	.list-item{
		padding: 0 1rem 0 1rem;
		margin-bottom: 0;
	}
}


.list-item > .list-item-title{
	
}
.list-item > .list-item-title > .list-item-icon{
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position: center;
	width: 50px;
	height: 50px;
	border: 1px solid var(--dark-brown);
}
.list-item > .list-item-title > .list-item-underline{
	/* display: inline-block; */
	position: relative;
	top: -25px;
	left: 50px;/*50px + 15px de padding colonne bootstrap + padding list-tem*/
	width: calc(100% - 50px);/* largeur totale moins ((50px + padding colonne bootstrap x 2)+padding list-item x 2) */
	height: 1px;
	background-color: var(--dark-brown);
}
.list-item > .list-item-title > h3{
	position: relative;
	text-align: right;
	top: -50px;
	color: var(--deep-orange);
	font-size:16px;
}

@media screen and (max-width: 576px){
	.list-item > .list-item-title > h3{
		font-size: 1.1rem;
	}
}


.list-item > .list-item-content{
	position: relative;
	top: -50px;
	font-weight: 400;
	font-size: 0.8rem;
	color: var(--light-brown);
	text-align: right;
}

@media screen and (max-width: 576px){
	.list-item > .list-item-content{
		font-size: 0.7rem;
	}
}


.list-item > .list-item-content > ul{
	list-style: none;
	margin-bottom: 0;
}


.li0.sps{
	transition: all 0.3s ease;
}

.li1.sps{
	transition: all 0.3s 0.15s ease;
}

.li2.sps{
	transition: all 0.3s 0.3s ease;
}


.li0.sps--abv{
	transform: translateX(-5rem);
	opacity: 0;
}
@media screen and (max-width: 576px){
	.li0.sps--abv{
		transform: translateY(5rem);
	}
}

.li1.sps--abv{
	transform: translateY(5rem);
	opacity: 0;
}

.li2.sps--abv{
	transform: translateX(5rem);
	opacity: 0;
}
@media screen and (max-width: 576px){
	.li2.sps--abv{
		transform: translateY(5rem);
	}
}


.li0.sps--blw,
.li2.sps--blw{
	transform: translateX(0);
	opacity: 1;
}
@media screen and (max-width: 576px){
	.li0.sps--blw,
	.li2.sps--blw{
		transform: translateY(0);
	}
}

.li1.sps--blw{
	transform: translateY(0);
	opacity: 1;
}




.banner{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: white;
	height: 25rem;
	margin-bottom: 5rem;
	
	display: grid;
	grid-template-rows: repeat(5, 1fr);
	grid-template-columns: repeat(2, 1fr);
	overflow: hidden;
}

.banner.sps{
	transition: all 1.2s ease;
}

.banner.sps--abv{
	transform: translateY(5rem);
	opacity: 0;
}


.banner.sps--blw{
	transform: translateY(0);
	opacity: 1;
}


.team-work-banner{
	background-image: url('../medias/img/TEAMWORK.jpg');
}

.multicanal-banner{
	background-image: url('../medias/img/multi_channel2.jpg');
}


.corner-white{
	position: relative;
	background-color: white;
	padding: 1rem;
}

.section-single-tool .corner-white > p{
	font-size: 0.85rem;
	line-height: 1rem;
	color: var(--dark-brown);
	margin: 0;
}


@media screen and (max-width: 576px){
	.section-single-tool .corner-white > h3{
		font-size: 1rem;
	}
	.section-single-tool .corner-white > p{
		font-size: 0.7rem;
		line-height: 0.9rem;
	}
}




.bottom-right{
	grid-column-start: 2;
	grid-row-start: 4;
}

.bottom-left{
	grid-column-start: 1;
	grid-row-start: 4;
}

.section-single-tool .corner-white > ul{
	color: var(--deep-orange);
	padding-inline-start: 2rem;
	list-style-image: url('../medias/img/arrow-orange-8.svg');
	font-size: .75rem;
	margin: 0;
	line-height: 1rem;
	font-weight: 300;
	margin-bottom: 0.5rem;
}


@media screen and (max-width: 576px){
	.section-single-tool .corner-white > ul{
		padding-inline-start: 1rem;
		font-size: .6rem;
		line-height: 0.8rem;
	}
}


.bg-white{
	background-color: white;
}

.agency-background{
	background-image: url('../medias/img/publiatis_tools.jpg')
}

.network-background{
	background-image: url('../medias/img/network.jpg')
}

@media screen and (max-width: 576px) and (orientation: portrait){
	.network-background{
		background-image: url('../medias/img/network-mobile.jpg')
	}
}



/* icones */

#planning-item > .list-item-title > .list-item-icon{
	background-image: url('../medias/img/icons/list-items/calendar.svg');
}
#content-item > .list-item-title > .list-item-icon{
	background-image: url('../medias/img/icons/list-items/chat.svg');
}
#feed-item > .list-item-title > .list-item-icon{
	background-image: url('../medias/img/icons/list-items/rss.svg');
}
#workflow-item > .list-item-title > .list-item-icon{
	background-image: url('../medias/img/icons/list-items/workflow.svg');
}
#spellcheck-item > .list-item-title > .list-item-icon{
	background-image: url('../medias/img/icons/list-items/spell.svg');
}
#dam-item > .list-item-title > .list-item-icon{
	background-image: url('../medias/img/icons/list-items/gallery.svg');
}
#flat-plan-item > .list-item-title > .list-item-icon{
	background-image: url('../medias/img/icons/list-items/tasks.svg');
}
#multicanal-item > .list-item-title > .list-item-icon{
	background-image: url('../medias/img/icons/list-items/files.svg');
}
#diff-db-item > .list-item-title > .list-item-icon{
	background-image: url('../medias/img/icons/list-items/server.svg');
}
#search-item > .list-item-title > .list-item-icon{
	background-image: url('../medias/img/icons/list-items/magnifying-glass.svg');
}
#freelance-item > .list-item-title > .list-item-icon{
	background-image: url('../medias/img/icons/list-items/freelance.svg');
}
#track-item > .list-item-title > .list-item-icon{
	background-image: url('../medias/img/icons/list-items/checklist.svg');
}




.btn-more-infos{
	display: inline-block;
	text-transform: uppercase;
	font-weight: 700;
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: 5rem;
	background-color: var(--deep-blue);
	border-radius: 0;
	color: #FFF;
	font-size: 0.8rem;
	width: 100%;
	height: 4rem;
	line-height: 4rem;
	text-align: center;
	vertical-align: middle;
	-webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.35);
	box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.35);
	/* filter: brightness(1); */
	transition: box-shadow 0.15s ease-out, background-color 0.15s ease-out;
	-webkit-transition: -webkit-box-shadow 0.15s ease-out, background-color 0.15s ease-out;
}

.more-infos-text{
	position: relative;
}

.btn-more-infos .btn-arrow{
	position: relative;
	top: 2px;
}

.btn-more-infos:hover{
	color: #FFF;
	-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.35);
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.35);
	background-color: var(--light-blue);
}


.btn-more-infos:hover .btn-arrow{
	margin-left: 1.5rem;
}


/* SECTIONS */

section.section-overview{
	margin: 0;
	padding: 0;
}

.section-title-wrapper{
	padding: 5rem 0 3rem 0;
}

@media screen and (max-width: 576px){
	.section-title-wrapper{
		padding: 3rem 0 1rem 0;
	}
}


/* SECTION NODEFIELD */
section.section-nodefield{
	padding-bottom: 0;
}
span.single-line{
	display: block;
}


/* SECTION WISH FORM */
.section-wish-form{
	/* background-color: #FFF; */
	background-color: var(--lighter-brown);
	/* pour que la drop down passe par dessus la section suivante */
	z-index: 6;
}

/* SECTION 2 */
.section-fast-simple{
	/* background-color: var(--lighter-brown); */
	background-color: white;
}


.section-fast-simple .direct-link{
	font-size: 0.9rem;
}

/* SECTION PARALLAX */
section.section-parallax{
	/* padding: var(--parallax-visible-height) 0 var(--parallax-visible-height) 0; */
	padding: var(--parallax-visible-height) 0 0 0;
}

/* SECTION SINGLE TOOL */
.section-single-tool{
	background-color: white;
}

.section-single-tool > div.bg-white{
	padding-bottom: 5rem;
}

.section-single-tool p{
	color:  var(--light-brown);
}




/* SECTION 4 */



/* SECTION 5 */

.box-elt-bg-white{
	background-color: white;
	-webkit-box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.1);
	margin-bottom: 5rem;
	padding: 15px;
}





.box-elt-bg-white > p{
	margin-bottom: 3rem;
}


.section-solutions{
	background-image: url('../medias/img/mosaic-bg-15.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	/* background-color: #FFF; */
	background-color: var(--lightest-brown);
}




/* SECTION TEST OVERFLOW (TEMP) */

.test-overflow{
	background-color: var(--lighter-brown);
}

.team-work{
	/* outline: 1rem solid rgba(255, 255, 255, .5); */
	outline-offset: -1rem;
	background-image: url('../medias/img/team.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 30% 50%;
	background-color: white;
	height: 800px;
	margin-top: -15rem;
	margin-bottom: 30px;
	padding: 1rem 0 1rem 0;
	
	display: grid;
	grid-template-rows: repeat(5, 1fr);
	/* grid-template-columns: repeat(2, 1fr); */
	grid-template-columns: 1fr 1.5fr;
	overflow: hidden;
}




.feather{
	/* outline: 1rem solid rgba(255, 255, 255, .5); */
	outline-offset: -1rem;
	background-image: url('../medias/img/feather.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-color: white;
	height: 800px;
	margin-top: -15rem;
	margin-bottom: 30px;
	/* padding: 1rem; */
	
	display: grid;
	grid-template-rows: repeat(5, 1fr);
	/* grid-template-columns: repeat(2, 1fr); */
	grid-template-columns: 1fr 1.5fr;
	overflow: hidden;
}

.feather p{
	font-size: 0.85rem;
	line-height: 1.2rem;
	color: var(--dark-brown);
	margin: 0;
}




.multicanal{
	background-image: url('../medias/img/tablet3.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: white;
	height: 25rem;
	margin-bottom: 5rem;
	/* padding: 1rem; */
	
	display: grid;
	grid-template-rows: repeat(5, 1fr);
	grid-template-columns: repeat(2, 1fr);
	overflow: hidden;
}

.multicanal h3{
	/* color: white; */
}

.multicanal p{
	font-size: .85rem;
	margin: 0;
	line-height: 1rem;
	/* color: white; */
	color: var(--dark-brown);
	font-weight: 700;
}

.multicanal ul{
	/* color: white; */
	color: var(--light-brown);
	padding-inline-start: 2rem;
	list-style-image: url('../medias/img/arrow-light-brown-8.svg');
	font-size: .8rem;
	margin: 0;
	line-height: 1rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}


.corner-darker-brown{
	border: 1px solid var(--darker-brown);
	/* background-color: var(--dark-brown); */
	background-color: rgba(73, 60, 51, 0.7);
	padding: 1rem;
}


.h-card-grid{
	border: 1px solid rgba(0, 0, 0, 0.15);
	margin: 0;
	background-color: white;
	/* transform: rotateY(-10deg); */
}



/* SECTION CONTACT */

.section-contact{
	padding: 0 0 5rem 0;
	background-color: white;
	position: relative;
	z-index: 1;
	margin-bottom: var(--footer-height);
	-webkit-box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.75);
}


/* FIN SECTIONS */


/* MODALS COMMON */

body.modal-open{
	/* overflow-y: auto; */
	/* empêche le décalage du body créé lors de l'ouverture de la modal */
	padding-right: 0px !important;
}

.modal-content{
	border: none !important;
	border-radius: 0;
}

.modal-header{
	border-radius: 0;
}



.modal-body{
	padding: 2rem 1rem 2rem 1rem;
}



div#wish-modal div.modal-content > div.modal-header h1.modal-title,
div#wish-modal div.modal-content > div.modal-header h2.modal-sub-title{
	text-align: center;
	text-align-last: center;
	color: white;
}

div#wish-modal div.modal-content > div.modal-header h2.modal-sub-title{
	font-size: 4rem;
	font-style: normal;
}


@media screen and (max-width: 576px){
	div#wish-modal div.modal-content > div.modal-header h1.modal-title{
		font-size: 1.5rem;
	}
	div#wish-modal div.modal-content > div.modal-header h2.modal-sub-title{
		font-size: 3rem;
	}
}



div#wish-modal div.modal-content#publi-a > div.modal-header{
	background-color: var(--deep-red);
}

/* div#wish-modal div.modal-content#publi-a > div.modal-header h2.modal-sub-title{ */
	/* color: white; */
/* } */


div#wish-modal div.modal-content#publi-s > div.modal-header{
	background-color: var(--deep-blue);
}
/* div#wish-modal div.modal-content#publi-s > div.modal-header h2.modal-sub-title{ */
	/* color: white; */
/* } */


div#wish-modal div.modal-content#publi-a ul.offer-detail-list{
	list-style-image: url('../medias/img/check-red.svg');
	color: var(--deep-red);
}

div#wish-modal div.modal-content#publi-s ul.offer-detail-list{
	list-style-image: url('../medias/img/check-blue.svg');
	color: var(--deep-blue);
}

div#wish-modal div.modal-content a.btn-anim{
	font-size: 1rem;
}




/* DIAGRAMS */

.diagram{
	margin: 0 auto 1rem auto;
}

p.diagram-title{
	text-align: center;
	text-align-last: center;
	margin-bottom: 0;
	font-size: 2rem;
	font-weight: 700;
}

@media screen and (max-width: 576px){
	p.diagram-title{
		font-size: 0.8rem;
		font-weight: 700;
	}
}

/* FORM */

/* wish form */
.wish-form{
	margin-top: 0.5rem;
}

.wish-form > .form-group{
	margin-bottom: 0;
}


.wish-form .bootstrap-select.form-control{
	height: 60px;
}

.bootstrap-select .dropdown-toggle .filter-option{
	height: 52px;/* 60px - (padding-top + padding-bottom du form-control-sm) */
	line-height: 52px;
}
.bootstrap-select .dropdown-toggle:focus, .bootstrap-select>select.mobile-device:focus+.dropdown-toggle{
	outline: none !important;
}


div.filter-option-inner-inner{
	padding-left: 2rem;
	color: var(--dark-brown);
}

/* fin wish form */


.form-check-inline:not(:first-child) .form-check-input{
	margin-left: 2rem;
}

#checkbox-group-label,
.form-check-label{
	color: var(--dark-brown);
}

.form-check-input.is-valid~.form-check-label, .was-validated .form-check-input:valid~.form-check-label
{
	color: var(--dark-brown);
}



.btn-light{
	background-color: white;
	border-color: var(--lighter-brown2);
	border-top: none;
	border-right: none;
	font-weight: 400;
}

.btn-light:hover,
.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show>.btn-light.dropdown-toggle{
	/* background-color: var(--lighter-brown2); */
	border-color: var(--lighter-brown2);
	background-color: white;
}

.btn-light.focus, .btn-light:focus{
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}


.bootstrap-select>.dropdown-toggle.bs-placeholder, .bootstrap-select>.dropdown-toggle.bs-placeholder:active, .bootstrap-select>.dropdown-toggle.bs-placeholder:focus, .bootstrap-select>.dropdown-toggle.bs-placeholder:hover{
	color: var(--dark-brown);
}

.dropdown-item:focus, .dropdown-item:hover{
	background-color: var(--lighter-brown);
}


.dropdown-item.active, .dropdown-item:active{
	background-color: var(--lighter-brown2);
}



.form-control{
	border-top: none;
	border-right: none;
	border-color: var(--lighter-brown2);
	color: var(--dark-brown);
	/* font-weight: 700; */
	height: 60px;
}

.form-control:focus{
	border-color: var(--lighter-brown2);
	color: var(--darker-brown);
	/* box-shadow: 0 0 0 0.2rem rgba(198, 192, 176,.25); */
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
	outline: none !important;
}


.input-group-sm > .input-group-prepend > .input-group-text{
	border-color: var(--lighter-brown2);
	background-color: var(--lighter-brown);
	color: var(--darker-brown);
	border-radius: 0;
	font-size: 1rem;
}

.input-group-sm>.custom-select, .input-group-sm>.form-control, .input-group-sm>.input-group-append>.btn, .input-group-sm>.input-group-append>.input-group-text, .input-group-sm>.input-group-prepend>.btn, .input-group-sm>.input-group-prepend>.input-group-text{
	font-size: 1rem;
}

.input-group-sm>.custom-select, .input-group-sm>.form-control, .input-group-sm>.input-group-append>.btn, .input-group-sm>.input-group-append>.input-group-text, .input-group-sm>.input-group-prepend>.btn, .input-group-sm>.input-group-prepend>.input-group-text, .form-control, .form-control-sm{
	border-radius: 0;
	font-size: 1rem;
}

.invalid-feedback{
	font-size: 0.6rem;
}


.input-group-sm > .input-group-prepend > .input-group-text.valid-input-feedback{
	border-color: rgba(40, 167, 69, 1);
	background-color: rgba(40, 167, 69, 0.3);
	color: rgba(40, 167, 69, 1);
}

.input-group-sm > .input-group-prepend > .input-group-text.invalid-input-feedback{
	border-color: rgba(220, 53, 69, 1);
	background-color: rgba(220, 53, 69, 0.3);
	color: rgba(220, 53, 69, 1);
}

.was-validated .bootstrap-select .selectpicker:invalid+.dropdown-toggle{
	border-color: rgba(220, 53, 69, 1);
	background-color: rgba(220, 53, 69, 0.3);
	color: rgba(220, 53, 69, 1);
}

.was-validated .bootstrap-select .selectpicker:valid+.dropdown-toggle{
	border-color: rgba(40, 167, 69, 1);
	background-color: rgba(40, 167, 69, 0.3);
	color: rgba(40, 167, 69, 1);
}


.section-wish-form .bootstrap-select{
	margin-bottom: 2rem;
}

/* BOUTON ANIME*/


a.btn-anim{
	display: block;
}


a.btn-anim > div.btn-body{
	width: 100%;
	height: 60px;
	line-height: 60px;
	font-weight: 300;
	/* font-size: 1.2rem; */
	text-transform: uppercase;
	
	background-color: var(--deep-blue-alpha);
	color:white;
	
	/* transition: all var(--btn-anim-duration) ease-out; */
	
	text-align: center;
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}
a.btn-anim.publi-s > div.btn-body,
a.btn-anim.publi-l > div.btn-body,
a.btn-anim.publi-a > div.btn-body{
	background-color: white;
	font-size: 0.9rem;
	font-weight: 400;
	-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.1);
	transition: all var(--btn-anim-duration) ease-out;
}

a.btn-anim.publi-s > div.btn-body{
	color: var(--deep-blue);
}

a.btn-anim.publi-l > div.btn-body{
	color: var(--deep-orange);
}

a.btn-anim.publi-a > div.btn-body{
	color: var(--deep-red);
}


a.btn-anim > div.btn-body > span{
	position: relative;
	z-index: 2;
}

a.btn-anim > div.btn-body > div.btn-background{
	position: absolute;
	top: 50%;
	left: 15px;
	width: calc(100% - 30px);
	height: 0%;
	
	background-color: var(--deep-blue);
	color: white;
	transition: all var(--btn-anim-duration) ease-out;
	
	z-index: 1;
	
	text-align: center;
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

a.btn-anim.publi-s > div.btn-body > div.btn-background,
a.btn-anim.publi-l > div.btn-body > div.btn-background,
a.btn-anim.publi-a > div.btn-body > div.btn-background{
	color: white;
}
a.btn-anim.publi-s > div.btn-body > div.btn-background{
	background-color: var(--deep-blue);
}
a.btn-anim.publi-l > div.btn-body > div.btn-background{
	background-color: var(--deep-orange);
}
a.btn-anim.publi-a > div.btn-body > div.btn-background{
	background-color: var(--deep-red);
}


a.btn-anim > .btn-body > span:last-of-type{
	margin-left: 0.1rem;
	top: 1px;
	font-size: 1.2rem;
	transition: margin-left var(--btn-anim-arrow-duration) calc(var(--btn-anim-duration) * 2) ease-out;
}


a.btn-anim > span.anim-border,
a.btn-anim.publi-s > span.anim-border{
	position: absolute;
	/* display: block; */
	background-color: var(--deep-blue);
	z-index: 3;
}

a.btn-anim.publi-l > span.anim-border{
	background-color: var(--deep-orange);
}

a.btn-anim.publi-a > span.anim-border{
	background-color: var(--deep-red);
}

a.btn-anim > span.top,
a.btn-anim > span.bottom{
	width: 0;
	height: var(--btn-anim-border);
	left: 50%;
}
a.btn-anim > span.t-left,
a.btn-anim > span.t-right{
	width: var(--btn-anim-border);
	height: 0;
	top: 0;
}
a.btn-anim > span.b-left,
a.btn-anim > span.b-right{
	width: var(--btn-anim-border);
	height: 0;
	top: 100%;
}

a.btn-anim > span.top{
	top: 0;
}
a.btn-anim > span.bottom{
	bottom: 0;
}
a.btn-anim > span.t-left,
a.btn-anim > span.b-left{
	left: 15px; /* padding colonne bootstrap */
}
a.btn-anim > span.t-right,
a.btn-anim > span.b-right{
	right: 15px; /* padding colonne bootstrap */
}

/* Mouse Out */

a.btn-anim > span.top,
a.btn-anim > span.bottom{
	animation-name: btn-anim-out-tb;
	animation-delay: calc(var(--btn-anim-duration) * 2);
	animation-duration: var(--btn-anim-duration);
	animation-fill-mode: both;
}

a.btn-anim > span.t-left,
a.btn-anim > span.t-right{
	animation: btn-anim-out-tltr;
	animation-delay: var(--btn-anim-duration);
	animation-duration: var(--btn-anim-duration);
	animation-fill-mode: both;
}
a.btn-anim > span.b-left,
a.btn-anim > span.b-right{
	animation: btn-anim-out-blbr;
	animation-delay: var(--btn-anim-duration);
	animation-duration: var(--btn-anim-duration);
	animation-fill-mode: both;
}


/* Mouse Over */
a.btn-anim:hover{
	text-decoration: none;
	/* transform: scale(0.97); */
}

a.btn-anim:hover > .btn-body{
	color: white;
	transition-delay: calc(var(--btn-anim-duration) * 2);
}

a.btn-anim.publi-s:hover > .btn-body,
a.btn-anim.publi-l:hover > .btn-body,
a.btn-anim.publi-a:hover > .btn-body{
	color: white;
	-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0);
	-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0);
	box-shadow: 0px 0px 12px 0px rgba(0,0,0,0);
	transition-delay: calc(var(--btn-anim-duration) * 2);
}

a.btn-anim:hover > .btn-body > span:last-of-type{
	margin-left: 0.4rem;
	transition-delay: calc(var(--btn-anim-duration) * 3);
}

a.btn-anim:hover > div.btn-body > div.btn-background{
	top: 0;
	height: 100%;
	transition-delay: calc(var(--btn-anim-duration) * 2);
}

a.btn-anim:hover > span.top,
a.btn-anim:hover > span.bottom{
	animation: btn-anim-hover-tb;
	animation-duration: var(--btn-anim-duration);
	animation-fill-mode: forwards;
}

a.btn-anim:hover > span.t-left,
a.btn-anim:hover > span.t-right{
	animation: btn-anim-hover-tltr;
	animation-delay: var(--btn-anim-duration);
	animation-duration: var(--btn-anim-duration);
	animation-fill-mode: forwards;
}
a.btn-anim:hover > span.b-left,
a.btn-anim:hover > span.b-right{
	animation: btn-anim-hover-blbr;
	animation-delay: var(--btn-anim-duration);
	animation-duration: var(--btn-anim-duration);
	animation-fill-mode: forwards;
}


@keyframes btn-anim-hover-tb{
	to{
		width: calc(100% - 30px);
		left: 15px;
	}
}

@keyframes btn-anim-out-tb{
	from{
		width: calc( 100% - 30px); /* padding colonne bootstrap x2*/
		left: 15px;
	}
	to{
		width: 0;
		left: calc(50% + 15px);
	}
}



@keyframes btn-anim-hover-tltr{
	to{
		height: 50%;
	}
}
@keyframes btn-anim-out-tltr{
	from{
		height: 50%;
	}
	to{
		height: 0;
	}
}




@keyframes btn-anim-hover-blbr{
	to{
		height: 50%;
		top: 50%;
	}
}
@keyframes btn-anim-out-blbr{
	from{
		height: 50%;
		top: 50%;
	}
	to{
		height: 0;
		top: 100%;
	}
}

/* BOUTON ANIME*/


/* FOOTER */



.footer-wrapper{
	width: 100%;
	height: var(--footer-height);
	background-color: var(--darker-blue);
}

.address-wrapper,
.sitemap{
	padding-top: 5rem;
}

/* @media screen and (max-width: 576px) and (orientation: portrait){ */
@media screen and (max-width: 576px){
	.address-wrapper,
	.sitemap{
		padding-top: 1rem;
	}
}

ul.sitemap-link{
	list-style-type: none;
	padding-inline-start: 0;
	padding-left: 0;
}

ul.sitemap-link > li{
	padding-left: 0.5rem;
	margin-top: 0.5rem;
	font-size: 0.7rem;
}

ul.sitemap-link > li:first-child{
	margin-top: 1rem;
}


ul.sitemap-link > a,
ul.sitemap-link > li > a{
	color: white;
}

ul.sitemap-link > a:hover,
ul.sitemap-link > li > a:hover{
	color: white;
	text-decoration: underline;
}


ul.sitemap-link > li::before{
	content: '›';
	padding-right: 0.2rem;
	transition: padding-right 0.3s ease-out;
}


#map-wrapper{
	width: 100%;
	height: var(--footer-height);
	/* background-color: grey; */
}
@media screen and (max-width: 576px){
	#map-wrapper{
		width: 100%;
		height: 40vh;
		/* background-color: grey; */
	}
}

.leaflet-popup-content
{
	margin: 0.75rem;
	word-break: keep-all;
}
.leaflet-popup-content p
{
	word-break: keep-all;
	margin: 0 0 0.5rem 0;
	font-family: 'Rubik', sans-serif;
	line-height: 0.8rem;
	font-weight: 700;
}

.leaflet-container{
	font-size: 0.8rem;
}
.leaflet-popup-content-wrapper{
	border-radius: 0.2rem;
}

/*
.company-address{
	border-left: 0.2rem solid white;
	padding-left: 1rem;
}
*/

.company-address p{
	color: #FFF;
	font-size: 0.8rem;
	line-height: 1.2rem;
	font-weight: 400;
	margin-bottom: 0;
	text-align: left;
	text-align-last: left;
}
.company-address p a{
	color: #FFF;
}

.company-address p:first-child{
	font-weight: 700;
	font-size: 1rem;
}

p.legal-notice{
	position: fixed;
	bottom: 1rem;
	color: #FFF;
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 0.8rem;
	margin: 3rem 0 0 0;
}
p.legal-notice a{
	color: #FFF;
	text-decoration: none;
}
/* FIN FOOTER */



/* FIN CONTENT */

/* ANIMATIONS */
@keyframes nav-item-hover{
	0%{
		color: var(--dark-brown);
	}
	100%{
		color: var(--deep-orange);
	}
}

@keyframes nav-item-out{
	0%{
		color: var(--deep-orange);
	}
	100%{
		color: var(--dark-brown);
	}
}


@keyframes nav-item-underline-hover{
	0%{
		width: 0px;
		margin-left: 50%;
	}
	100%{
		width: 100%;
		margin-left: 0px;
	}
}

@keyframes nav-item-underline-out{
	0%{
		width: 100%;
		margin-left: 0px;
	}
	100%{
		width: 0px;
		margin-left: 50%;
	}
}

/* FIN ANIMATIONS */




/****************** TEMP!! *******************/