@font-face {
	font-family: "PoppinsRegular";
	src: url("/webfonts/poppins-latin-400-normal.woff2") format("opentype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "PoppinsSemiBold";
	src: url("/webfonts/poppins-latin-600-normal.woff2") format("opentype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "CalSans";
	src: url("/webfonts/CalSans-Regular.woff2") format("opentype");
	font-weight: normal;
	font-style: normal;
}

:root {
  --sto-color: #82c27e;
  --sme-color: #f0cf65;
  --fra-color: #205b68;
}

* {
	/*color: #3d3d3b;*/
	color: #555555;
	font-family: PoppinsRegular;
	font-size: 15px;
	outline: none !important;
	text-rendering: optimizeLegibility;
}

*:focus {
	box-shadow: none !important;
}

main > .container-xl {
  padding: 10px 15px 50px 15px;
}

.row-cols-md-7 > * {
  flex: 0 0 auto;
  width: 14.28%;
}

.row-cols-8 > * {
  flex: 0 0 auto;
  width: 12.5%;
}

.navbar {
	backdrop-filter: blur(6px);
	background-color: rgba(255, 255, 255, .92);
	padding: 0px;
	transition: all 0.15s linear;
}

.navbar.active {
	background-color: rgba(255, 255, 255, .92);
	box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

.navbar-infos {
	background-color: #f4f3f3;
}

.navbar-infos * {
	font-size: 12px;
	padding-bottom: 2px;
	padding-top: 2px;
}

.navbar-infos img {
	height: 25px;
	width: auto;
}

.navbar-brand {
	margin-right: 0px;
}

.navbar-brand img {
	height: 25px;
	margin: 10px 0px;
	width: auto;
}

.navbar .btn {
	margin: 0px 0px 0px 10px;
	padding: .2rem .6rem;
}

.navbar .btn * {
	color: inherit;
}

.navbar .btn-search {
	background-color: #f4f3f4;
	border: 1px solid #aaaaaa;
	border-radius: 4px;
	letter-spacing: 0em !important;
}

.navbar .btn-default {
	border-radius: 4px;
	letter-spacing: 0em !important;
}

.navbar .btn-default.active {
	background-color: var(--sto-color);
	border: 1px solid var(--sto-color);
	color: #ffffff;
}

.navbar .btn-panier {
	border: 0px;
	border-radius: 4px;
	margin: 0px 0px 0px 0px !important;
	position: relative;
}

.navbar .btn-panier .badge {
	background-color: var(--sto-color);
	border-radius: 50%;
	color: #ffffff;
	display: inline-block;
  font-size: 9px;
  height: 17px;
  padding: 4px 5px;
  position: absolute;
  right: 20px;
  top: 0px;
  width: 17px;
}

.navbar .btn i {
	color: inherit;
}

@media (min-width: 768px) {

	.navbar-brand img {
		height: 60px;
		margin: 10px 0px;
	}
	
	.navbar .btn {
		margin: 0px 0px 0px 20px;
		padding: .475rem 1.2rem;
	}

}

#navbar {
	border-top: 1px solid #cbcaca;
}

.navbar-nav {
	padding: 25px 0px 20px 0px;
}

.navbar-nav .nav-item {
	margin-right: 25px;
	min-width: 150px;
}

.navbar-nav .dropdown-menu {
	background-color: transparent;
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  border: 0;
  border-radius: 0;
	min-width: 150px;
}

@media (min-width: 576px) {

  .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }

}

/*
.dropdown:hover .dropdown-menu {
  display: block;
}
*/

.dropdown-menu[data-bs-popper] {
  top: 100%;
}

.dropdown-toggle::after {
  display: none;
}

/* stock */

.nav-sto a.nav-link {
	background-color: var(--sto-color);
	border: 1px solid var(--sto-color);
	color: #ffffff;
	padding: 0.25rem 0;
	text-align: center;
}

/*
.nav-sto a.dropdown-menu li {
	background-color: rgba(255, 255, 255, .1);
	margin-bottom: 0px;
}
*/

.nav-sto a.dropdown-item {
	background-color: #508a69;
	color: #ffffff;
	display: inline-block;
	font-size: 13px;
	margin-top: 1px;
	padding: 0.25rem 0;
	text-align: center;
}

.nav-sto a.dropdown-item:hover {
	background-color: #90bf84;
}

/* sur mesure */

.nav-sme a.nav-link {
	background-color: var(--sme-color);
	border: 1px solid var(--sme-color);
	color: #ffffff;
	padding: 0.25rem 0;
	text-align: center;
}

.nav-sme a.dropdown-item {
	background-color: #efc044;
	color: #ffffff;
	display: inline-block;
	font-size: 13px;
	margin-top: 1px;
	padding: 0.25rem 0;
	text-align: center;
}

.nav-sme a.dropdown-item:hover {
	background-color: #f0cf65;
}

/* france */

.nav-fra a.nav-link {
	background-color: #ffffff;
	border: 1px solid #e1e1e1;
	padding: 0.25rem 0;
	text-align: center;
}

.nav-fra .dropdown-menu {
  min-width: 100%;
}

.nav-fra a.dropdown-item {
	background-color: #ffffff;
	border: 1px solid #e1e1e1;
	display: inline-block;
	font-size: 13px;
	margin-top: 1px;
	padding: 0.25rem 0;
	text-align: center;
}

.nav-fra a.dropdown-item:hover {
	background-color: #fafafa;
}

/* marketing */

.nav-mkg a.nav-link {
	text-align: center;
}

.nav-mkg a.dropdown-item {
	background-color: #ffffff;
	border: 1px solid #e1e1e1;
	display: inline-block;
	font-size: 13px;
	margin-top: 2px;
	padding: 0.25rem 0;
	text-align: center;
}


/* ----- boutons ----- */

.btn,
.btn:hover {
	border-radius: 4px;
	font-family: CalSans;
	font-size: .950rem;
	letter-spacing: 0.07em;
	padding: .475rem 1.2rem;
	text-decoration: none;
	transition: all 0.15s linear;
}

.btn-default {
	background-color: #3b3b3a;
	color: #ffffff;
	font-size: .950rem;
	/*margin-top: 30px;*/
}

.btn-default:hover {
	background-color: #ffffff;
	border: 1px solid #3b3b3a;
	color: #3b3b3a;
	font-size: .950rem;
	/*margin-top: 30px;*/
}

.btn-sto {
	background-color: var(--sto-color);
	color: #ffffff;
}

.btn-sto:hover {
	background-color: #ffffff;
	border: 1px solid var(--sto-color);
	color: var(--sto-color);
}

.btn-sme {
	background-color: #f0cf65;
	color: #ffffff;
}

.btn-sme:hover {
	background-color: #ffffff;
	border: 1px solid #f0cf65;
	color: #f0cf65;
}

.btn-fra1 {
	background-color: #205B68;
	color: #ffffff;
}

.btn-fra1:hover {
	background-color: #ffffff;
	border: 1px solid #205B68;
	color: #205B68;
}

.btn-fra2 {
	background-color: #ab1923;
	color: #ffffff;
}

.btn-fra2:hover {
	background-color: #ffffff;
	border: 1px solid #ab1923;
	color: #ab1923;
}

.btn-primary {
	background-color: var(--sto-color);
	border: 1px solid var(--sto-color);
	color: #ffffff;
	font-family: CalSans;
}

.btn-primary:hover {
	background-color: #ffffff;
	border: 1px solid var(--sto-color);
	color: var(--sto-color);
	font-family: CalSans;
}

.btn-outline-primary {
	background-color: #ffffff;
	border: 1px solid var(--sto-color);
	color: var(--sto-color);
	font-family: CalSans;
}

.btn-outline-primary:hover {
	background-color: var(--sto-color);
	border: 1px solid var(--sto-color);
	color: #ffffff;
	font-family: CalSans;
}

.mt-4 {
  margin-top: 2.5rem !important;
}


/* ----- textes ----- */

h1 {
	font-family: CalSans;
	font-size: 55px;
	margin: 0px 0px 30px 0px;
}

h1.sto,
h2.sto,
h3.sto,
p.sto {
	color: var(--sto-color);
}

h1.sme,
h2.sme,
h3.sme,
p.sme {
	color: var(--sme-color);
}

h1.fra,
h2.fra,
h3.fra,
p.fra {
	color: var(--fra-color);
}

h3 span.sto {
	color: var(--sto-color);
	font-family: inherit;
	font-size: inherit;
}

h2 {
	font-family: CalSans;
	font-size: 40px;
	margin-bottom: 30px;
	margin-top: 30px;
	position: relative;
}

h2 span.tag {
	background-color: #aaaaaa;
	bottom: -20px;
	border-radius: 4px;
	color: #ffffff;
	font-size: 16px;
	padding: 2px 5px;
	position: absolute;
	left: 50%;
  transform: translate(-50%, 0) skew(-1turn, -3deg);
}

h3 {
	font-family: CalSans;
	font-size: 40px;
	margin-bottom: 20px;
	margin-top: 30px;
	position: relative;
}

img + h3 {
	margin-top: 20px;
}

h4 {
	font-family: CalSans;
	font-size: 30px;
	margin-bottom: 15px;
	margin-top: 30px;
	position: relative;
}

h5 {
	font-family: CalSans;
	font-size: 20px;
	margin-bottom: 10px;
	margin-top: 20px;
	position: relative;
}


@media (min-width: 768px) {

	h1 {
		font-size: 85px;
		margin: 0px 0px 30px 0px;
	}
	
	h2 {
		font-size: 60px;
		margin: 0px 0px 30px 0px;
	}

}

p.intro {
	font-family: PoppinsSemiBold;
	font-size: 18px;
	line-height: 1.2;
}

strong {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
}

sub,
sub {
	color: inherit;
	font-weight: bold;
}

main a {
	color: var(--sto-color);
	cursor: pointer;
	text-decoration: none;
	text-underline-offset: 0.25em;
}

main a:hover {
	color: #90bf84;
	text-decoration: underline;
}


/* ----- accueil ----- */

.slide.sto {
	background-color: var(--sto-color);
	height: 100%;
	padding: 15px 30px 30px 30px;
	width: 100%;
}

.slide.sme {
	background-color: var(--sme-color);
	height: 100%;
	padding: 15px 30px 30px 30px;
	width: 100%;
}

.slide.fra {
	background-color: var(--fra-color);
	height: 100%;
	padding: 15px 30px 30px 30px;
	width: 100%;
}

.slide h2 {
	color: #ffffff;
	font-size: 45px;
	line-height: 1;
	margin-bottom: 40px;
	margin-top: 30px;
}

.slide p {
	color: #ffffff;
	margin: 0px;
}

.slide .btn-default {
	background-color: #3b3b3a;
	border-radius: 0px;
	color: #ffffff;
	font-size: .875rem;
	margin-top: 30px;
}

.slide .btn-default:hover {
	background-color: #ffffff;
	border: 1px solid #3b3b3a;
	color: #3b3b3a;
	font-size: .875rem;
	margin-top: 30px;
}

@media (min-width: 768px) {

	.slide h2 {
		color: #ffffff;
		font-size: 50px;
		line-height: 1;
		margin-bottom: 20px;
		margin-top: 20px;
	}

}

@media (min-width: 1280px) {

	.slide.sto {
		background-color: var(--sto-color);
		height: 100%;
		padding: 30px 60px;
		width: 100%;
	}
	
	.slide.sme {
		background-color: var(--sme-color);
		height: 100%;
		padding: 30px 60px;
		width: 100%;
	}
	
	.slide.fra {
		background-color: var(--fra-color);
		height: 100%;
		padding: 30px 60px;
		width: 100%;
	}

	.slide h2 {
		color: #ffffff;
		font-size: 70px;
		line-height: 1;
		margin-bottom: 40px;
		margin-top: 30px;
	}

}

.promo .bloc {
	position: relative;
}

.promo .bloc h2 {
	color: #ffffff;
	font-family: CalSans;
	font-size: 50px;
	left: 30px;
	line-height: 1;
	margin: 0px;
	position: absolute;
	top: 30px;
}

.promo .bloc p {
	bottom: 30px;
	color: #ffffff;
	font-family: CalSans;
	font-size: 20px;
	left: 30px;
	line-height: 1;
	margin-bottom: 0px;
	position: absolute;
}

@media (min-width: 768px) {

	.promo .bloc h2 {
		color: #ffffff;
		font-family: CalSans;
		font-size: 70px;
		left: 30px;
		line-height: 1;
		margin: 0px;
		position: absolute;
		top: 30px;
	}
	
	.promo .bloc p {
		bottom: 30px;
		color: #ffffff;
		font-family: CalSans;
		font-size: 25px;
		left: 30px;
		line-height: 1;
		margin-bottom: 0px;
		position: absolute;
	}

}

.home-engagements {
	background-image: url('/images/home-engagements.jpg');
	background-position: center center;
	background-size: cover;
}

.home-engagements .row .col-12 div {
	padding: 40px;
}

.home-engagements h2 {
	color: #ffffff;
	font-family: CalSans;
	font-size: 45px;
	line-height: .8;
	margin: 0px;
}

.home-engagements p {
	color: #ffffff;
	margin: 0px;
}

@media (min-width: 768px) {

	.home-engagements h2 {
		font-size: 80px;
		line-height: .8;
		margin: 0px;
	}

}

.home-french {
	background-color: #f4f3f4;
}

.home-french h2 {
	color: #82c391;
	font-family: CalSans;
	font-size: 45px;
	line-height: .9;
	margin: 40px 0px 40px 40px;
}

.home-french h2 .bleu {
	color: #205b68;
	font-family: inherit;
	font-size: inherit;
}

.home-french h2 .rouge {
	color: #ab1923;
	font-family: inherit;
	font-size: inherit;
}

@media (min-width: 768px) {

	.home-french h2 {
		color: #82c391;
		font-family: CalSans;
		font-size: 80px;
		line-height: .9;
		margin: 40px 0px 40px 40px;
	}

}


/* ----- texte ----- */

.texte {
	padding: 0px 60px;
}

hr {
	margin: 1.5rem 0;
}


/* ----- alertes ----- */

.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}


/* ----- filtres ----- */

.filtres {
	background-color: #f4f3f4;
	margin-bottom: 25px;
	padding: 15px;
	/*
  flex-direction: column;
  align-self: flex-start;
  position: sticky;
  overflow-y: auto;
  max-height: calc(-200px + 100vh);
	*/
}

.filtres h3 {
	font-size: 35px;
	margin: 0px 0px 0px 0px;
}

.filtres h4 {
	border-radius: 5px;
	color: #ffffff;
	font-size: 18px;
	margin: 20px 0px 10px 0px;
	padding: 8px 10px;
}

.filtres.sto h4 {
	background-color: var(--sto-color);
}

.filtres.sme h4 {
	background-color: var(--sme-color);
}

.filtres.fra h4 {
	background-color: var(--fra-color);
}

.filtres label span {
	border: 1px solid #dddddd;
  border-radius: 50%;
  display: inline-block;
  height: 16px;
  margin: 0px 5px 0px 0px;
  width: 16px;
}


/* ----- tags ----- */

span.tag {
	background-color: #90bf84;
	border-radius: 4px;
	color: #ffffff;
	display: inline-block;
	font-size: 16px;
	margin-bottom: 20px;
	padding: 2px 7px;
  transform: skew(-1turn, -3deg);
}

span.tag.sto {
	background-color: var(--sto-color);
}

span.tag.sme {
	background-color: var(--sme-color);
}

span.tag.new {
	background-color: #3c3c3b;
}


/* ----- familles ----- */

.produit {
	margin-bottom: 35px;
	position: relative;
}

.produit a img {
	border: 1px solid #d4d4d4;
	margin-bottom: 10px;
	transition: all 0.15s linear;
	width: 100%;
}

.produit a:hover img {
	border: 1px solid #90bf84;
}

.produit .ref {
	font-family: CalSans;
	font-size: 20px;
}

.produit .nom {
	color: #706f6f;
}

.produit .coul {
	color: #706f6f;
}

.coul span {
	border: 1px solid #dddddd;
  border-radius: 50%;
  display: inline-block;
  height: 18px;
  margin: 3px 3px 0px 0px;
  width: 18px;
}

.produit .prix {
	color: #706f6f;
}

.produit .prix a {
	color: #706f6f;
	text-decoration: underline;
}

.produit .stock.oui {
	color: var(--sto-color);
}

.produit .stock.non {
	color: #d82222;
}

.produit .stock.oui span {
	background-color: #81c17d;
  border-radius: 50%;
  display: inline-block;
  height: 11px;
  margin: 0px 5px 0px 0px;
  width: 11px;
}

.produit .stock.non span {
	background-color: #d82222;
  border-radius: 50%;
  display: inline-block;
  height: 12px;
  margin: 0px 5px 0px 0px;
  width: 12px;
}

.produit span.tag {
	font-size: 13px;
	left: 23px;
	padding: 2px 7px;
	position: absolute;
	top: 15px;
}


/* ----- produits ----- */

.fiche {
	margin-top: 30px;
}

.carousel.produit .carousel-indicators {
	background-color: #ffffff;
	margin: 10px 0px 10px 0px;
  position: absolute;
  width: 100%;
}

.fiche .vignettes {
	/*overflow-y: scroll;*/
	margin-bottom: 30px;
}

.fiche .vignettes img {
	border: 1px solid #d4d4d4;
	/*margin-bottom: 20px;*/
	width: 100%;
} 

.fiche .zoom img {
	border: 1px solid #d4d4d4;
	margin-bottom: 10px;
	width: 100%;
} 

.fiche span.tag.sto {
	font-size: 16px;
	margin-bottom: 20px;
	padding: 2px 5px;
}

.fiche h2 {
	font-family: CalSans;
	font-size: 30px;
	margin: 0px;
}

.fiche h1 {
	color: #3d3d3b;
	font-family: CalSans;
	font-size: 30px;
	margin: 0px 0px 15px 0px;
}


/* ----- caracteristiques ----- */

.caracteristiques {
	margin: 2rem 0px 1.5rem 0px;
}

.caracteristiques img {
	margin-bottom: .5rem;
	margin-right: 15px;
	width: 65px;
}

.caracteristiques img:last-child {
	margin-right: 0px;
	width: 65px;
}


/* ----- détails ----- */

.accordion {
	border-bottom: 1px solid #dee2e6;
	border-top: 1px solid #dee2e6;
}

.accordion-button {
	color: #555555;
	font-family: PoppinsRegular;
	font-size: 1.1rem;
	font-weight: normal;
	padding: .7rem 0rem;
}

.accordion-button:not(.collapsed) {
	background-color: #ffffff;
	box-shadow: none;
	color: #555555;
}

.accordion-body {
	padding: .5rem 0rem 1rem 0rem;
}

.accordion-collapse.collapse.show {
	border: 0px;
}

.accordion #panel-stocks table td {
	vertical-align: middle;
}

.accordion #panel-stocks table td.coul span {
	display: block;
  margin: 3px 5px 3px 0px !important;
  position: relative;
}

/*
.accordion #panel-stocks table {
	border: 1px dotted #dddddd;
}

.accordion #panel-stocks table tr {
	border-top: 1px dotted #dddddd;
}
*/


/* ---------- couleurs ---------- */

.cA {
	background-color: #cccccc;
}

.cAU {
	background-color: #6d4462;
}

.cB {
	background-color: #ffffff;
}

.cBAM {
	/*background-color: #a67a4b;*/
	background-image: url('/images/bois.jpg');
	background-size: cover;
}

.cBC {
	background-color: #29aec4;
}

.cBE {
	background-color: #d3c8ae;
}

.cBL {
	background-color: #295799;
}

.cBLR {
	background-color: #3333cc;
}

.cBLT {
	background-color: #b2d0dc;
}

.cBM {
	background-color: #29235c;
}

.cBO {
	background-color: #7b1632;
}

.cBOI {
	background-image: url('/images/bois.jpg');
	background-size: cover;
}

.cCAM {
	background-color: #b1602a;
}

.cCL {
	background-color: #f8943f;
}

.cD {
	background-image: url('/images/denim.jpg');
	background-size: cover;
}

.cE {
	background-color: #f9f4e4;
}

.cG {
	background-color: #878787;
}

.cGC {
  background-color: #ffffff;
  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%);
  background-size: 3px 3px;
  background-position: 0 0, 1.5px 1.5px;
}

.cGCL {
	background-color: #cccccc;
}

.cGF {
	background-color: #666666;
}

.cK {
	background-color: #5b724c;
}

.cJ {
	background-color: #fad95e;
}

.cLI {
	background-color: #ffa8ff;
}

.cM {
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

.cMA {
	background-color: #684225;
}

.cN {
	background-color: #000000;
}

.cNAT {
	background-color: #eae4d3;
}

.cO {
	background-color: #ef5329;
}

.cR {
	background-color: #be1622;
}

.cRO {
	background-color: #e87ebd;
}

.cRV {
	background-color: #ff0000;
}

.cTAU {
	background-color: #9e9b8f;
}

.cTRI {
  background: linear-gradient(to right, #192f8e 33%, #eeeeee 33%, #eeeeee 67%, #e01414 0);
}

.cTUR {
	background-color: #2ea5a9;
}

.cV {
	background-color: #95c11f;
}

.cVA {
	background-color: #deeb6b;
}

.cVF {
	background-color: #1c5939;
}

.cVT {
	background-color: #aae8c7;
}

.cB-BM {
	background: linear-gradient(to right, #ffffff 0%, #ffffff 50%, #29235c 50%, #29235c 100%);
}

.cBL-B {
	background: linear-gradient(to right, #295799 0%, #295799 50%, #ffffff 50%, #ffffff 100%);
}

.cBL-G {
	background: linear-gradient(to right, #295799 0%, #295799 50%, #878787 50%, #878787 100%);
}

.cBM-R {
	background: linear-gradient(to right, #29235c 0%, #29235c 50%, #be1622 50%, #be1622 100%);
}

.cBOI-N {
	background-image: url('/images/bois-noir.jpg');
	background-size: cover;
}

.cE-BM {
	background: linear-gradient(to right, #f9f4e4 0%, #f9f4e4 50%, #29235c 50%, #29235c 100%);
}

.cR-N {
	background: linear-gradient(to right, #be1622 0%, #be1622 50%, #000000 50%, #000000 100%);
}

.cG-B {
	background: linear-gradient(to right, #878787 0%, #878787 50%, #ffffff 50%, #ffffff 100%);
}

.cG-N {
	background: linear-gradient(to right, #878787 0%, #878787 50%, #000000 50%, #000000 100%);
}

.cG-R {
	background: linear-gradient(to right, #878787 0%, #878787 50%, #be1622 50%, #be1622 100%);
}

.cG-V {
	background: linear-gradient(to right, #878787 0%, #878787 50%, #95c11f 50%, #95c11f 100%);
}

.cR-G {
	background: linear-gradient(to right, #be1622 0%, #be1622 50%, #878787 50%, #878787 100%);
}

.cV-B {
	background: linear-gradient(to right, #95c11f 0%, #95c11f 50%, #ffffff 50%, #ffffff 100%);
}

.cV-TUR {
	background: linear-gradient(to right, #95c11f 0%, #95c11f 50%, #2ea5a9 50%, #2ea5a9 100%);
}



/* ----- marquages ----- */

.emplacement .col-3 {
	font-size: 14px;
	line-height: 1.3;
}

.emplacement .image-check {
	padding-left: 0;
	position: relative;
}

.emplacement .image-check .form-check-input {
	bottom: 14px;
  border: 1px solid #cccccc;
	height: 1.5rem;
	position: absolute;
	right: 10px;
	width: 1.5rem;
	z-index: 500;
}

.emplacement:has(input:checked) img {
  border: 2px solid var(--sto-color) !important;
}

.option * {
	font-size: 14px;
	line-height: 1.3;
}

.option * i {
	color: #727070;
	font-size: 13px;
	font-style: normal;
}

.option .image-check {
	padding-left: 0;
	position: relative;
}

.option .image-check .form-check-input {
	bottom: 14px;
  border: 1px solid #cccccc;
	height: 1.5rem;
	position: absolute;
	right: 10px;
	width: 1.5rem;
	z-index: 500;
}

.option .image-check:has(input:checked) img {
  border: 2px solid var(--sto-color) !important;
}


/* ---------- devis ---------- */

.devis {
	background-color: #f4f3f4;
	margin-bottom: 50px;
	padding: 20px 10px;
}

@media (min-width: 768px) {

	.devis {
		background-color: #f4f3f4;
		margin-bottom: 50px;
		padding: 50px;
	}

}

.devis h3 {
	margin: 0px 0px 20px 0px;
}

.devis h4 {
	margin: 0px 0px 20px 0px;
}

.devis .btn-ajouter {
	background-color: #ffffff;
	border: 1px solid var(--sto-color);
	color: var(--sto-color);
	padding: .475rem .75rem;
	width: 100%;
}

.devis .btn-retirer {
	background-color: #ffffff;
	border: 1px solid var(--sto-color);
	color: var(--sto-color);
	padding: .475rem .75rem;
	width: 50%;
}

.devis #resultat {
  position: sticky;
	top: 150px;
}

.devis #resultat .detail {
	background-color: #ffffff;
	padding: 10px 15px 15px 15px;
}

.devis #resultat .detail .row + .row {
	border-top: 1px dotted #dddddd;
}

.devis #resultat .detail .row {
	padding: 2px 0px;
}

.devis #resultat .total.sto {
	background-color: var(--sto-color);
	color: #ffffff;
	padding: 10px 15px 15px 15px;
}

.devis #resultat .total.sme {
	background-color: var(--sme-color);
	color: #ffffff;
	padding: 10px 15px 15px 15px;
}

.devis #resultat .total * {
	color: #ffffff;
}

.devis .btn-creer {
	background-color: #3d3d3b;
	background-image: url('/images/btn-creer.svg');
	background-position: 8px center;
	background-size: 42px;
	background-repeat: no-repeat;
	border-bottom: 1px solid #ffffff;
	border-radius: 0px;
	color: #ffffff;
	font-family: CalSans;
	font-size: 25px;
	padding: 10px 15px 10px 15px;
	text-align: end;
	width: 100%;
}

.devis .btn-commander {
	background-color: #3d3d3b;
	background-image: url('/images/btn-ajouter.svg');
	background-position: 8px center;
	background-size: 50px;
	background-repeat: no-repeat;
	border-radius: 0px;
	color: #ffffff;
	font-family: CalSans;
	font-size: 25px;
	padding: 10px 15px 10px 15px;
	text-align: end;
	width: 100%;
}

.devis .btn-creer:hover {
	background-color: #000000;
	color: #ffffff;
}

.devis .btn-commander:hover {
	background-color: #000000;
	color: #ffffff;
}

.devis #resultat #resultatmaquette div {
	background-color: #ffffff;
	padding: 15px 15px 15px 15px;
}

.devis #resultat #resultatmaquette div img {
	height: 17px;
	width: 17px;
}

.devis #resultat .delai {
	background-color: #ffffff;
	padding: 15px 15px 15px 15px;
}


/* ---------- options sur-mesure ---------- */

h4.options-sme {
	background-color: var(--sme-color);
	color: #ffffff;
	margin: 35px 0px 20px 0px;
	padding: 7px 15px;
}


/* ---------- transfert ---------- */

.ui-effects-transfer {
	background-color: rgba(0,0,0,.1);
  border: 1px dashed black;
  z-index: 2000;
}


/* ---------- étapes commande ---------- */

.etapes {
	border-bottom: 1px solid #dddddd;
	border-top: 1px solid #dddddd;
	margin: 0px 0px 20px 0px;
	text-align: center;
}

.etapes div {
	color: #aaaaaa;
	display: inline-block;
	font-family: CalSans;
	font-size: 18px;
	line-height: 1em;
	margin: 15px 0px;
	white-space: nowrap;
}

.etapes div span {
	background-color: #cccccc;
	border-radius: 50%;
	color: #ffffff;
	display: inline-block;
	float: left;
  font-family: CalSans;
	font-size: 20px;
	height: 50px;
	line-height: 50px;
	margin: 0px 15px 0px 0px;
	text-align: center;
	width: 50px;
}

.etapes div.here,
.etapes div.here a {
	color: #444444;
}

.etapes div.here span {
	background-color: #444444;
}

.table.panier {
	margin-bottom: 0px;
}

.table.panier .btn-supprimer {
	background-color: #ffffff;
	border: 1px solid #ab1923;
	color: #ab1923;
	font-size: .750rem;
	margin-top: 5px;
	padding: .175rem .65rem;
}

.table.panier .btn-supprimer:hover {
	background-color: #ab1923;
	border: 1px solid #ab1923;
	color: #ffffff;
	font-size: .750rem;
	margin-top: 5px;
	padding: .175rem .65rem;
}


/* ----- table ----- */

.table > :not(caption) > * > * {
	color: #555555;
}

.table.etikeko {
	border: 1px solid #c3c2c3;
	margin: 2rem 0px;
}

.table.etikeko th {
	border: 1px solid #c3c2c3;
	color: #3d3d3b;
	font-family: CalSans;
	font-size: 20px;
	text-align: center;
	vertical-align: middle;
}

.table.etikeko td {
	border: 1px solid #c3c2c3;
	color: #717070;
	font-size: 18px;
	text-align: center;
	vertical-align: middle;
}

.table.etikeko td.sto {
	background-color: var(--sto-color);
	color: #ffffff;
	font-family: PoppinsSemiBold;
	font-size: 25px;
}

.table.etikeko td.sto big {
	background-color: var(--sto-color);
	color: #ffffff;
	font-size: 35px;
}

.table.etikeko td.sto * {
	color: #ffffff;
	font-family: PoppinsSemiBold;
}


/* ----- engagements ----- */

div.math {
	color: #90bf84;
	font-family: CalSans;
	font-size: 60px;
	margin: -15px 0px -15px 0px;
	text-align: center;
}


/* ----- outils marketing ----- */

.catalogue .bloc {
	position: relative;
}

.catalogue .bloc h2 {
	bottom: 80px;
	color: #ffffff;
	font-family: CalSans;
	font-size: 40px;
	left: 30px;
	line-height: 1;
	margin: 0px;
	position: absolute;
}

.catalogue .bloc p {
	bottom: 30px;
	color: #ffffff;
	font-family: CalSans;
	font-size: 25px;
	left: 30px;
	line-height: 1;
	margin-bottom: 0px;
	position: absolute;
}

@media (min-width: 768px) {

	.catalogue .bloc h2 {
		font-size: 60px;
	}

}

.tarifs .visuels {

}

.tarifs .visuels img {
  visibility: visible;
}

.tarifs .liens {
	background-color: var(--sme-color);
	padding: 15px 25px;
}

.tarifs .liens a {
	color: #ffffff;
	display: block;
	font-family: CalSans;
	font-size: 20px;
	text-decoration: none;
}

.tarifs .liens a:hover {
	color: #555555;
	text-decoration: none;
}

.tarifs .liens a i {
	color: inherit;
	font-size: inherit;
}

.tarifs .liens hr {
	border-top: 1px solid #ffffff;
	margin: 0px;
	opacity: .75;
}



/* ----- formulaires ----- */

input[type="radio"],
input[type="checkbox"] {
  accent-color: #81c17d;
}

.form-check-input {
  border: 1px solid #c6c6c6;
}

.form-check-input:checked {
  background-color: #81c17d;
  border-color: #81c17d;
}

.form-label {
  margin-bottom: .25rem;
}

.form-control {
	border: 1px solid #cccccc;
	padding: .475rem .75rem;
}

.form-select {
	border: 1px solid #cccccc;
	padding: .475rem 2.25rem .475rem .75rem;
}

.input-group-text {
	border: 1px solid #cccccc;
  font-size: .875rem;
}

.form-control::placeholder {
	color: #bbbbbb;
	opacity:1;
}

.form-switch.form-switch-md .form-check-input {
  height: 1.5rem;
  margin-right: 8px;
  width: calc(2rem + 0.75rem);
  border-radius: 3rem;
  vertical-align: baseline;
}

.form-switch.form-switch-md .form-check-label {
  margin-top: 5px;
}


/* ----- adresses ----- */

row.adresse {
  display: flex;
  flex-wrap: wrap;
}

.row.adresse > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.adresse .btn {
	text-align: right;
}


/* ----- modal ----- */

.modal-header {
	background-color: #81c17d;
	padding: .5rem 1rem;
}

.modal-title {
	color: #ffffff;
	margin: 0px;
}


/* ----- vidéos ----- */

.videos video {
	height: 100%;
  object-fit: cover;
  overflow: hidden;
}


/* ----- map ----- */

#gmap {
	border: 1px solid #d4d4d4;
  height: 500px;
  margin: 0px;
  width: 100%;
}

#gmap .gm-style-iw {
	padding: 10px !important;
}

#gmap .gm-style-iw-chr {
	display: none;
}


/* ----- compte ----- */

.compte {
	padding-left: 25px;
}

.nav-compte {
	background-color: #f4f3f3;
}

.nav-compte .nav-item a.nav-link {
  background-color: var(--sto-color);
  border-radius: 0.375rem;
  color: #ffffff;
	font-family: CalSans;
	font-size: 16px;
	margin: 25px;
	text-align: end;
}

.nav-compte .nav-item + .nav-item a.nav-link {
	margin: 0px 25px 25px 25px;
}

.nav-compte .nav-item a.nav-link.active {
  background-color: #3d3d3b;
  color: #ffffff;
}

.compte h1 {
	font-size: 45px;
	margin: -5px 0px 25px 0px;
}

.compte h2 {
	font-size: 35px;
	margin: 0px 0px 15px 0px;
}


/* ---------- dropzone ---------- */

.dropzone {
  background-color: #ffffff !important;
  border: 2px dashed #bbbbbb !important;
  height: 160px;
  margin: 0px 0px 15px 0px;
  width: 100%;
}

.dropzone.dz-clickable .dz-message {
  margin: 32px auto 0px auto !important;
}

.dropzone.dz-clickable .dz-message,
.dropzone.dz-clickable .dz-message * {
  background-color: transparent !important;
  color: #bbbbbb;
  font-size: 17px;
  font-style: italic;
}

.dropzone .dz-preview {
  margin: 0px;
}

.dropzone .dz-preview .dz-remove {
  font-size: 12px;
}


/* ----- footer ----- */

.footer {
	background-color: #f4f3f3;
}

.footer-top {
	padding: 20px 0px 30px 0px;
}

.footer-top .newsletter {
	background-color: #ffffff;
	margin: 35px 0px 15px 0px;
	padding: 5px 25px 35px 25px;
}

@media (min-width: 768px) {

	.footer-top .newsletter {
		background-color: #ffffff;
		margin: 35px 0px 15px 0px;
		padding: 5px 0px 35px 0px;
	}

}

.footer-top .newsletter h3 {
	font-family: CalSans;
	font-size: 30px;
	margin-top: 30px;
	margin-bottom: 10px;
}

.footer-top .newsletter .baseline {
	color: var(--sto-color);
	font-size: 16px;
	margin: 10px 0px;
	text-align: center;
}

.footer-top h3 {
	font-family: CalSans;
	font-size: 30px;
	margin-top: 30px;
}

.footer-top p {
	color: #72706f;
	font-size: 15px;
	margin: 1px 0px;
}

.footer-top p a {
	color: #72706f;
	text-decoration: none;
}

.footer-top p a:hover {
	color: #72706f;
	text-decoration: underline;
}

.footer-bottom {
	border-top: 1px solid #cbcaca;
	padding: 25px 0px 20px 0px;
}

.footer-bottom .logo {
	height: 25px;
}

.footer-bottom p {
	color: #72706f;
	font-size: 12px;
}

.footer-bottom p a {
	color: #72706f;
	font-size: 12px;
	text-decoration: none;
}

.footer-bottom p a:hover {
	color: #72706f;
	font-size: 12px;
	text-decoration: underline;
}