@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
/*========================================================*/
/* Général
/*========================================================*/
body {
	padding:  0;
	margin:  0;
	padding-top: 80px;
	padding-bottom: 30px;
		font-family:  Tahoma, 'Open Sans', sans-serif;
	color:  #0f1941;
	background-color:  #ffffff;
}
.container-fluid.fond-vert,
.container.fond-vert {
	background-color: #6ba5b4;
	color: #f7f5f0;
}
.container-fluid.fond-indigo,
.container.fond-indigo {
	background-color: #0f1941;
	color: #f7f5f0;
}
.container-fluid.fond-bleu,
.container.fond-bleu {
	background-color: #2175d9;
	color: #f7f5f0;
}
.container-fluid.fond-jaune,
.container.fond-jaune {
	background-color: #fbb511;
	color: #f7f5f0;
}
.container-fluid.fond-rouge,
.container.fond-rouge {
	background-color: #e74536;
	color: #f7f5f0;
}
.container-fluid.fond-blanc,
.container.fond-blanc {
	background-color: #f7f5f0;
	color: #fbb511;
}
.container-fluid.fond-bleuclair,
.container.fond-bleuclair {
	background-color: #99c5fa;
	color: #0f1941;
}
.container-fluid.fond-blanc,
.container.fond-blanc {
	background-color: #ffffff;
	color: #552374;
}
.container-fluid.fond-violet,
.container.fond-violet {
	background-color: #552374;
	color: #ffffff;
}
.container-fluid.fond-fushia,
.container.fond-fushia {
	background-color: #b80e80;
	color: #ffffff;
}
.container-fluid.fond-cyan,
.container.fond-cyan {
	background-color: #00d7ff;
	color: #0f1941;
}
.text-vert {
	color: #6ba5b4; !important
}
.text-indigo {
	color: #0f1941; !important
}
.text-bleu {
	color: #2175d9; !important
}
.text-jaune {
	color: #fbb511; !important
}
.text-rouge {
	color: #e74536; !important
}
.text-blanc {
	color: #f7f5f0; !important
}
.text-bleuclair {
	color: #99c5fa; !important
}
.text-blanc {
	color: #ffffff; !important
}
.text-violet {
	color: #552374; !important
}
.text-fushia {
	color: #b80e80; !important
}
.text-cyan {
	color: #00d7ff; !important
}
.btn-vert,
.bg-vert {
	background-color: #6ba5b4;
	color: #f7f5f0;
}
.btn-vert::hover {
	color: #f7f5f0;
}
.btn-indigo,
.bg-indigo {
	background-color: #0f1941;
	color: #f7f5f0;
}
.btn-indigo::hover {
	color: #f7f5f0;
}
.btn-bleu,
.bg-bleu {
	background-color: #2175d9;
	color: #f7f5f0;
}
.btn-bleu::hover {
	color: #f7f5f0;
}
.btn-jaune,
.bg-jaune {
	background-color: #fbb511;
	color: #f7f5f0;
}
.btn-jaune::hover {
	color: #f7f5f0;
}
.btn-rouge,
.bg-rouge {
	background-color: #e74536;
	color: #f7f5f0;
}
.btn-rouge::hover {
	color: #f7f5f0;
}
.btn-blanc,
.bg-blanc {
	background-color: #f7f5f0;
	color: #fbb511;
}
.btn-blanc::hover {
	color: #fbb511;
}
.btn-bleuclair,
.bg-bleuclair {
	background-color: #99c5fa;
	color: #0f1941;
}
.btn-bleuclair::hover {
	color: #0f1941;
}
.btn-blanc,
.bg-blanc {
	background-color: #ffffff;
	color: #552374;
}
.btn-blanc::hover {
	color: #552374;
}
.btn-violet,
.bg-violet {
	background-color: #552374;
	color: #ffffff;
}
.btn-violet::hover {
	color: #ffffff;
}
.btn-fushia,
.bg-fushia {
	background-color: #b80e80;
	color: #ffffff;
}
.btn-fushia::hover {
	color: #ffffff;
}
.btn-cyan,
.bg-cyan {
	background-color: #00d7ff;
	color: #0f1941;
}
.btn-cyan::hover {
	color: #0f1941;
}
.btn-outline-vert {
	border-color: #6ba5b4;
	color: #6ba5b4;
}
.btn-outline-indigo {
	border-color: #0f1941;
	color: #0f1941;
}
.btn-outline-bleu {
	border-color: #2175d9;
	color: #2175d9;
}
.btn-outline-jaune {
	border-color: #fbb511;
	color: #fbb511;
}
.btn-outline-rouge {
	border-color: #e74536;
	color: #e74536;
}
.btn-outline-blanc {
	border-color: #f7f5f0;
	color: #f7f5f0;
}
.btn-outline-bleuclair {
	border-color: #99c5fa;
	color: #99c5fa;
}
.btn-outline-blanc {
	border-color: #ffffff;
	color: #ffffff;
}
.btn-outline-violet {
	border-color: #552374;
	color: #552374;
}
.btn-outline-fushia {
	border-color: #b80e80;
	color: #b80e80;
}
.btn-outline-cyan {
	border-color: #00d7ff;
	color: #00d7ff;
}
.border-vert {
	border-color: #6ba5b4 !important;
}
.border-indigo {
	border-color: #0f1941 !important;
}
.border-bleu {
	border-color: #2175d9 !important;
}
.border-jaune {
	border-color: #fbb511 !important;
}
.border-rouge {
	border-color: #e74536 !important;
}
.border-blanc {
	border-color: #f7f5f0 !important;
}
.border-bleuclair {
	border-color: #99c5fa !important;
}
.border-blanc {
	border-color: #ffffff !important;
}
.border-violet {
	border-color: #552374 !important;
}
.border-fushia {
	border-color: #b80e80 !important;
}
.border-cyan {
	border-color: #00d7ff !important;
}
.alert-vert {
	background-color: rgba(107,165,180,0.3);
}
.alert-indigo {
	background-color: rgba(15,25,65,0.3);
}
.alert-bleu {
	background-color: rgba(33,117,217,0.3);
}
.alert-jaune {
	background-color: rgba(251,181,17,0.3);
}
.alert-rouge {
	background-color: rgba(231,69,54,0.3);
}
.alert-blanc {
	background-color: rgba(247,245,240,0.3);
}
.alert-bleuclair {
	background-color: rgba(153,197,250,0.3);
}
.alert-blanc {
	background-color: rgba(255,255,255,0.3);
}
.alert-violet {
	background-color: rgba(85,35,116,0.3);
}
.alert-fushia {
	background-color: rgba(184,14,128,0.3);
}
.alert-cyan {
	background-color: rgba(0,215,255,0.3);
}
a {
	text-decoration:  none;
	color:  #2175d9;
}
#content {
	
}
.small * {
	font-size:  .8em;
	line-height:  1em;
}
.x-small {
	font-size:  .7em;
	line-height:  1em;
}
.slogan {
	font-size:  3em;
}
.text-condensed {
	line-height:  1em;
}

.tooltip-inner {
    background-color: #2175d9;
    box-shadow: 0px 0px 4px black;
    opacity: 1 !important;
}
.tooltip.bs-tooltip-right .tooltip-arrow::before {
    border-right-color: #2175d9 !important;
}
.tooltip.bs-tooltip-left .tooltip-arrow::before {
    border-left-color: #2175d9 !important;
}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #2175d9 !important;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #2175d9 !important;
}

/*========================================================*/
/* NavBar
/*========================================================*/
.navbar-randstad {
	background-color:  #6ba5b4;
	padding-top:  20px;
	padding-bottom:  0;
}
.navbar-randstad .navbar-brand{
	margin-top:  -7px;
}
a.nav-link {
	color:  #ffffff;
	opacity:  0.6;
	padding-top:  16px;
	padding-bottom:  10px;
}
a.nav-link.active {
	opacity:  1;
	border-bottom:  white solid 2px;
}
a.nav-link.focus {
	color:  #fbb511 !important;
	border-bottom: #fbb511 solid 1px;
}
a.cat-link {
	color:  #ffffff;
	opacity:  0.6;
	font-size:  .9em;
	text-decoration:  none;
}
a.cat-link.active {
	opacity:  1;
}
a.nav-link:visited,
a.nav-link:hover,
a.cat-link:visited,
a.cat-link:hover {
	 color:  #ffffff;
	 opacity:  0.6;
}
a.nav-link:hover,
a.cat-link:hover {
	 opacity:  1;
}

.id-mention {
	width: 300px;
	height: 20px;
	font-size: .7em;
	color: #f7f5f0;
	opacity: .6;
}
/*========================================================*/
/* Alerts
/*========================================================*/
.top-word {
	font-size:  3em;
	font-weight:  normal;
	line-height:  1em;
}
.top-icone {
	font-size: 8em;
	margin: 0;
	line-height: 1em;
	position:  relative;
	top:  -20px;
}
.top-icone-no-search {
	font-size: 2em;
	margin: 0;
	line-height: 1em;
}
.alert {
	padding:  7px 10px;
	text-align:  center;
	line-height:  1em;
}
.alert.alert-dismissible {
	padding:  7px 10px;
}
#top-alerts {
	position: absolute;
	top: 0;
	left:  0;
	width: 100%;
	height: 50px;
	z-index: 1100;
	display:  none;
}
#top-alerts .alert {
	display: inline-block;
	margin: 10px auto;
	left:  50%;
	transform:translateX(-50%);
}
.alert-dismissible .btn-close {
	background: none;
	padding:  0px;
	margin-top:  -8px;
	margin-right:  -8px;
	color:  darkred;
}

/*========================================================*/
/* Cards
/*========================================================*/
.card,
.card-body {
	background-color: #ffffff;
}
#cards-content.inactive {
	min-height: 185px;
	height: 185px;
	overflow: hidden;
	padding-left: 20px;
	margin-left:  -20px;
}
#cards-content.active {
	height: auto;
}
#cards-cache {
	position: relative;
	width:  calc(100% + 15px);
	height:  10px;
	top:  -185px;
	left:  -15px;
	padding:  0;
}
#cards-cache-inner {
	width:  100%;
	padding:  0;
	height:  185px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7f5f0+0,f7f5f0+100&0+0,1+85 */
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 85%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 85%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fbb511', endColorstr='##ffffff',GradientType=0 ); /* IE6-9 */
	border-bottom:  silver solid 1px;
	text-align:  center;
	padding-top:  140px;
	font-size:  1.5em;
}
/*========================================================*/
/* Buttons
/*========================================================*/
.btn-group-xs > .btn, .btn-xs {
  padding: .25rem .4rem;
  font-size: .875rem;
  line-height: .5;
  border-radius: .2rem;
}

/*========================================================*/
/* Carousel
/*========================================================*/
.carousel-control-next, .carousel-control-prev {
	pointer-events: none;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
	pointer-events: auto;
}
/*========================================================*/
/* JConfirm
/*========================================================*/
.jconfirm.jconfirm-supervan .jconfirm-bg {
	background-color: rgba(33,117,217,0.90);
}
.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content {
	line-height:  1em;
} 
/*========================================================*/
/* Steps
/*========================================================*/
.fond-etapes {
	background-color: #00d7ff;
}

.step {

}
.step.active {
	background-image:  url('../img/caret-bottom.png');
	background-position:  top center;
	background-repeat: no-repeat;
	background-size:  40px 20px;
}
.step .libelle {
	font-size:  1.6em;
	margin-top:  20px;
}
.step .description {
	color:  #0f1941;
	font-size:  .8em;
}

.step.active .libelle,
.step.active .description,
.step.complete .libelle,
.step.comlete .description,
.step.disabled .libelle,
.step.disabled .description {
	color:  #0f1941;
}
.step.disabled .libelle,
.step.disabled .description {
	opacity:  .5;
}

/*========================================================*/
/* Produits
/*========================================================*/
.square-cell {
	margin: 10px;
}
.square-cell:before{
    content: "";
    display: block;
    padding-top: 80%;
}
.square-cell2:before{
    content: "";
    display: block;
    padding-top: 45%;
}

.square {
	width:  100%;
	background-size: contain;
	background-repeat:  no-repeat;
	background-position:  center;
	padding:  0;
	margin:  0;
}
.square.cover {
	background-size: cover;
}
.square:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}
.conditionnement {
	text-align:  left;
	font-size:  .9em;
	line-height:  1.3em;
	min-height:  50px;
	margin:  0;
	margin-top:  5px;
	opacity:  .8;
}

.option_liste {
	text-align: left;
	min-height: 85px;
}

/*========================================================*/
/* Quick Cart
/*========================================================*/
#quick-cart {
	position: fixed;
	right:  0;
	top:  0;
	width:  250px;
	max-width:  25vw;
	height:  calc(100vh - 32px);
	background:  #ffffff;
	padding:  10px;
	overflow-x: hidden;
	overflow-y: auto;
	z-index:  1500;
}
#offcanvasPanier {
	width:  350px;
}

/*========================================================*/
/* Conversations
/*========================================================*/
.conversation .stamp,
.conversation .card-body,
.conversation textarea {
	font-size:  .8em;
	line-height:  1em;
}
.conversation .stamp {
	margin-bottom:  3px;
}
.conversation .card,
.conversation .card-body {
	border-radius:  10px;
}
.conversation .card-body {
	padding:  10px;
}


/*========================================================*/
/* Footer
/*========================================================*/
#footer {
	left:  0;
}
#footer .logos {
	opacity: .5
}
#footer .logos:hover {
	opacity: 1
}