/* FONTS Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ Opera 23+
========================================================================== */
@font-face {
	font-display: swap;
	font-family: 'Dosis';
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/dosis-v27-latin-600.woff2') format('woff2'), url('../fonts/dosis-v27-latin-600.woff') format('woff')
}

@font-face {
	font-display: swap;
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), url('../fonts/roboto-v30-latin-regular.woff') format('woff')
}

@font-face {
	font-display: swap;
	font-family: 'RobotoMed';
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/roboto-v30-latin-500.woff2') format('woff2'), url('../fonts/roboto-v30-latin-500.woff') format('woff')
}

@font-face {
	font-display: swap;
	font-family: 'RobotoSemi';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/roboto-v30-latin-700.woff2') format('woff2'), url('../fonts/roboto-v30-latin-700.woff') format('woff')
}


/* WARNING Old Bro
========================================================================== */
.browserupgrade {
	margin: 0.2em 0;
	background: #ccc;
	color: #C7C7CF;
	padding: 0.2em 0
}

	.browserupgrade a {
		text-decoration: underline;
		cursor: pointer;
		color: #555555
	}

/* UPLOAD
========================================================================== */
.fileUpload {
	position: relative;
	overflow: hidden;
	margin: 10px;
	padding: 20px;
}

.fileUpload input.upload {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
}

/* BASE
========================================================================== */
html, body {
	font-size: 62.5%
}

body {
	font-size: 1.3rem;
	line-height: 1.46em;
	color: #C7C7CF;
	font-family: 'Roboto', sans-serif;
	font-weight: 400
}

a {
	text-decoration: none;
	cursor: pointer;
	color: inherit
}

	a:hover, a:active, a:focus {
		outline: 0;
		outline: none;
		text-decoration: none;
		color: inherit
	}

::selection {
	background: rgba(222,222,222,0);
	color: inherit;
	text-shadow: none
}

::-moz-selection {
	background: rgba(222,222,222,0);
	color: inherit;
	text-shadow: none
}

.boxShadow {
	box-shadow: 0 5px 5px 0 rgba(2,2,2,.2)
}

.boxShadowFooter {
	box-shadow: 0 -5px 5px 0 rgba(2,2,2,.2)
}

hr {
	display: block;
	position: relative;
	width: 24px;
	height: 4px;
	background: #4A4A4A;
	border: none;
	border-radius: 2px;
	margin: 5px 0 10px 0
}

	hr.hrlog {
		margin: 20px auto 0 auto;
		background: #fff
	}

	hr.hrdialogue {
		display: block;
		position: relative;
		width: 98%;
		height: 2px;
		background: #8A8A8A;
		border: none;
		margin: 10px auto
	}

h4 {
	font-size: 1.8rem;
	position: relative;
	display: block;
	border-bottom: 1px dashed #4A4A4A;
	margin: 0 auto 20px auto;
	padding: 0 10px 10px 10px;
	background: #f0f1f2;
	text-align: center;
	font-family: 'Dosis';
	font-style: normal;
	font-weight: 600
}

.grisBleu {
	color: #CFCFCF
}

.grisBeige {
	color: #F0F1F2
}

.bleuFond {
	color: #4A4A4A
}

.bleuCanard {
	color: #8A8A8A
}

.petrole {
	color: #C7C7CF
}

.complementaire {
	color: #6A6A6A
}

.bkgenCours {
	background-color: #9A9A9A
}

.bkgenAttente {
	background-color: #555555
}

.bkgplanif {
	background-color: #777777
}

.bkgrefuse {
	background-color: #707070
}

.bkgcloture {
	background-color: #5E5E5E
}

.bkgenTermine {
	background-color: #A0A0A0
}

.bkgenReclaTermine {
	background-color: #B0B0B0
}

.bkgetat {
	background-color: #555
}

.bkgrecla {
	background-color: #555555
}


/* Body */
.dualBkg {
	background-image: url('../img/trameFond01.png');
	background-position: center center;
	background-repeat: repeat-y;
	background-size: contain
}

/* LOGIN  */
main.mainLog {
	position: relative;
	width: 100%;
	max-width: 1024px;
	min-height: 100vh;
	margin: 0 auto;
	padding: 20px 10px;
	background: linear-gradient(90deg, rgba(145, 145, 145,1) 1%, rgba(255,255,255,1) 99%)
}

.trameLog {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100vh;
	background-image: url('../img/trame.png');
	background-position: center center;
	background-repeat: repeat-y;
	background-size: cover
}

.formLog {
	display: block;
	position: absolute;
	width: 280px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

	.formLog img.logo {
		display: block;
		width: 100%;
		max-width: 190px;
		height: auto;
		margin: 0 auto
	}


/* FORMS */
/* Blocs Input */
.blocInput {
	padding: 20px 0
}

.flexInput {
	position: relative;
	display: block;
	width: 100%;
	margin: 1px auto;
	border: 1px solid #8A8A8A;
	border-radius: 10px;
	background: #ffffff
}

/* Ajouter le input=[type="file"] */
input[type="text"], input[type="password"], input[type="date"], input[type="date"], input[type="time"], input[type="file"] {
	width: 100%;
	height: 48px;
	font-size: 1.4rem;
	font-family: 'RobotoMed';
	font-weight: 500;
	border: none;
	background: transparent;
	padding: 10px 20px;
	color: #555
}
/* le reste du code pour l'upload image est plus bas */



.flexMiniLabel {
	opacity: 0;
	background-color: #8A8A8A;
	border-radius: 5px;
	color: #fff;
	font-size: 1.2rem;
	text-transform: uppercase;
	line-height: 1;
	padding: 5px 10px;
	height: 22px;
	left: 10px;
	position: absolute;
	top: -28px;
	transform: translateY(0);
	transition: all 0.3s
}

.input:focus ~ .flexMiniLabel, .input:not(:placeholder-shown) ~ .flexMiniLabel {
	transform: translateY(16px);
	opacity: 1
}

.flexholder {
	position: absolute;
	top: 16px;
	left: 20px;
	color: #999;
	font-size: 1.6rem;
	font-family: 'RobotoMed';
	font-weight: 500;
	line-height: 16px;
	text-transform: uppercase;
	pointer-events: none;
	transform-origin: 0 50%;
	transition: transform 0.3s, color 0.3s
}

.input:focus ~ .flexholder, .input:not(:placeholder-shown) ~ .flexholder {
	transform: translateY(-20px) translateX(10px) scale(0.5);
	z-index: -1
}

.input:not(:placeholder-shown) ~ .flexholder {
	color: #ffffff
}

.input:focus ~ .flexholder {
	color: #ffffff
}

.labelFixe {
	background-color: #8A8A8A;
	border-radius: 5px;
	color: #fff;
	font-size: 1.2rem;
	text-transform: uppercase;
	line-height: 1;
	padding: 5px 10px;
	height: 22px;
	left: 10px;
	position: absolute;
	top: -12px
}

.labelFixeOK {
	background: #D9F2D9 !important;
	color: #2E7D32;
}

.flexretour {
	display: flex;
	flex-flow: row nowrap;
	padding: 1px 0
}

	.flexretour span {
		flex: 1 1 auto;
		font-size: 1.2rem;
		line-height: 14px;
		padding: 0 20px
	}

		.flexretour span strong {
			font-family: 'RobotoSemi';
			font-weight: 700
		}

		.flexretour span.login {
			color: #ffffff
		}

		.flexretour span.erreur {
			color: #555555
		}

		.flexretour span.correction {
			color: #777777
		}

		.flexretour span.information {
			color: #44474b
		}

		.flexretour span.validation {
			color: #808080
		}

.blocSubmit {
	padding: 20px 0
}

.flexSubmit {
	display: block;
	width: 100%;
	margin: 1px auto;
	border: 1px solid #C7C7CF;
	border-radius: 10px;
	background: #C7C7CF;
	transition: all 0.3s
}

.formButton {
	width: 100%;
	height: 48px;
	font-size: 1.8rem;
	text-align: center;
	overflow: hidden;
	position: relative;
	transition: all 0.3s;
	text-transform: uppercase;
	border: none;
	background: transparent;
	padding: 10px 20px;
	font-family: 'RobotoMed';
	font-weight: 500;
	color: #fff
}

.flexSubmit:hover {
	background: #6A6A6A;
	border: 1px solid #6A6A6A
}

.flexretourSubmit {
	display: flex;
	flex-flow: row nowrap;
	margin-bottom: 14px
}

	.flexretourSubmit span strong {
		font-family: 'RobotoSemi';
		font-weight: 700
	}

	.flexretourSubmit span {
		flex: 1 1 auto;
		background: #fff;
		padding: 10px;
		border: 4px dashed #C7C7CF;
		border-radius: 10px;
		text-align: center;
		overflow: hidden
	}

.blocDouble {
	display: flex;
	gap: 20px;
	flex-flow: row nowrap
}

	.blocDouble li {
		flex: 0 1 50%
	}

.flexSelect {
	position: relative;
	display: block;
	width: 100%;
	margin: 1px auto;
	border: 1px solid #8A8A8A;
	border-radius: 10px;
	background: #ffffff
}

	.flexSelect select {
		width: calc(100% - 20px);
		height: 48px;
		font-size: 1.4rem;
		font-family: 'RobotoMed';
		font-weight: 500;
		border: none;
		background: transparent;
		padding: 10px 20px;
		color: #555
	}

	.flexSelect option {
		padding: 2px 0
	}

	.flexSelect .listeCheck {
		margin-top: 18px;
	}
		.flexSelect .listeCheck input[type="checkbox"] {
			margin: 0;
			vertical-align: middle;
		}

		.flexSelect .listeCheck label {
			margin-left: 8px;
			vertical-align: middle;
			color: #555;
		}
.blocDetailType {
	position: relative;
	margin: 20px 0;
	padding: 24px 18px 14px 18px;
	border: 1px solid #8A8A8A;
	border-radius: 10px;
	background: #fff;
}

.titreDetailType {
	position: absolute;
	top: -12px;
	left: 10px;
	background: #D9F2D9;
	color: #2E7D32;
	border-radius: 5px;
	padding: 5px 10px;
	font-size: 1.2rem;
	text-transform: uppercase;
	font-family: 'RobotoMed';
}

.listeDetailType {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

	.listeDetailType input[type="checkbox"] {
		display: none;
	}

	.listeDetailType label {
		display: inline-block;
		padding: 10px 16px;
		border: 1px solid #C7C7CF;
		border-radius: 999px;
		background: #F7F7F7;
		color: #555;
		font-size: 1.4rem;
		font-family: 'RobotoMed';
		cursor: pointer;
	}

	.listeDetailType input[type="checkbox"]:checked + label {
		background: #D9F2D9;
		border-color: #7BC67E;
		color: #2E7D32;
	}

.flexCheckCards {
	padding: 24px 16px 14px 16px;
}
.blocLigneDevis {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	margin-bottom: 25px;
}

.devisItem {
	flex: 1;
	margin: 0;
}

.dateItem {
	width: 190px;
	margin: 0;
}

	.devisItem .input,
	.dateItem .input {
		width: 100%;
		box-sizing: border-box;
	}
	.blocDates {
	display: flex;
	gap: 20px;
	margin-bottom: 25px;
}

@media screen and (max-width: 600px) {
	.blocLigneDevis {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

		.blocLigneDevis .blocInput,
		.blocLigneDevis .devisItem,
		.blocLigneDevis .dateItem {
			width: 100%;
		}

		.blocLigneDevis input {
			width: 100%;
			box-sizing: border-box;
		}
}
#TXTMarbriersChoisis {
	white-space: pre-line;
}
.clientSearchWrapper {
	cursor: pointer;
}

.clientSearchBox {
	width: 100%;
	min-height: 48px;
	padding: 10px 20px;
	border: none;
	border-radius: 10px;
	background: transparent;
	box-sizing: border-box;
}
	.clientSearchBox span {
		display: block;
		font-size: 16px;
		font-weight: 600;
		color: #222;
	}

	.clientSearchBox small {
		display: block;
		margin-top: 4px;
		font-size: 13px;
		color: #666;
	}

.modalClient {
	display: none;
	position: fixed;
	z-index: 999999;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background: #fff;
}

.modalClientContent {
	width: 100%;
	height: 100%;
	background: #fff;
}

.modalHeaderClient {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
	background: #fff;
	border-bottom: 1px solid #ddd;
}

	.modalHeaderClient button {
		width: 44px;
		height: 44px;
		border: none;
		background: #f1f1f1;
		border-radius: 50%;
		font-size: 24px;
		color: #222;
	}

	.modalHeaderClient input {
		flex: 1;
		height: 44px;
		padding: 0 12px;
		border: 1px solid #aaa;
		border-radius: 8px;
		background: #fff;
		color: #222;
		font-size: 16px;
	}

.resultatsClients {
	height: calc(100vh - 69px);
	overflow-y: auto;
	background: #fff;
}

.clientResultat {
	padding: 14px 16px;
	border-bottom: 1px solid #eee;
	background: #fff;
}

	.clientResultat strong {
		display: block;
		color: #222;
		font-size: 16px;
	}

	.clientResultat span {
		display: block;
		margin-top: 4px;
		color: #666;
		font-size: 13px;
	}

.aideRecherche {
	padding: 16px;
	color: #777;
}


	.blocDateItem .flexInput {
		width: 100%;
	}

	.blocDateItem .input {
		width: 100%;
		box-sizing: border-box;
	}
	
	.listeCards {
	width: 100%;
}

	.listeCards tbody {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.listeCards tr,
	.listeCards td {
		display: block;
	}

	.listeCards input[type="checkbox"] {
		display: none;
	}

	.listeCards label {
		display: inline-block;
		padding: 10px 16px;
		border: 1px solid #C7C7CF;
		border-radius: 999px;
		background: #F7F7F7;
		color: #555;
		font-size: 1.4rem;
		font-family: 'RobotoMed';
		font-weight: 500;
		cursor: pointer;
		transition: all .2s ease;
	}

	.listeCards input[type="checkbox"]:checked + label {
		background: #D9F2D9;
		border-color: #7BC67E;
		color: #2E7D32;
	}

		.listeCards input[type="checkbox"] + label.selectionDetail,
		.listeCards label.selectionDetail,
		.listeCards input[type="checkbox"]:not(:checked) + label.selectionDetail,
		.listeCards input[type="checkbox"]:checked + label.selectionDetail {
			background: #D9F2D9 !important;
			border-color: #7BC67E !important;
			color: #2E7D32 !important;
		}

.boutonsValidation {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin: 35px 0;
}

.btnAction {
	min-width: 180px;
	height: 46px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	font-size: 1.6rem;
	font-family: 'RobotoMed';
	text-transform: uppercase;
	color: #fff;
	transition: .2s;
}

.btnAnnuler {
	background: #8A8A8A;
}

	.btnAnnuler:hover {
		background: #6A6A6A;
	}

.btnValider {
	background: #D9F2D9;
	border: 1px solid #7BC67E;
	color: #2E7D32;
}

	.btnValider:hover {
		background: #C8EBC8;
	}

.blocSignatures {
	display: flex;
	gap: 25px;
	margin-top: 30px;
}

.blocSignature {
	position: relative;
	flex: 1;
	padding: 28px 18px 18px 18px;
	border: 1px solid #8A8A8A;
	border-radius: 10px;
	background: #fff;
}

.titreSignature {
	position: absolute;
	top: -12px;
	left: 10px;
	background: #D9F2D9;
	color: #2E7D32;
	border-radius: 5px;
	padding: 5px 10px;
	font-size: 1.2rem;
	text-transform: uppercase;
	font-family: 'RobotoMed';
}

.zoneSignature {
	text-align: center;
	margin-top: 15px;
	padding: 10px;
	border: 1px dashed #8A8A8A;
	border-radius: 10px;
	background: #fff;
}

.messageSignatureOK {
	display: block;
	color: #2E7D32;
	font-family: 'RobotoMed';
	margin-bottom: 10px;
}
.blocRecapSignature {
	position: relative;
	margin: 30px 0;
	padding: 28px 18px 18px 18px;
	border: 1px solid #8A8A8A;
	border-radius: 10px;
	background: #fff;
	color: #303030;
	font-size: 1.4rem;
}

	.blocRecapSignature p {
		margin: 8px 0;
	}

.listePrestationsSignature {
	margin: 8px 0 0 20px;
	color: #303030;
	font-family: 'RobotoMed';
}
.titrePrestation {
	margin-top: 12px;
	font-family: 'RobotoMed';
	font-size: 1.5rem;
	color: #2E7D32;
	font-weight: bold;
}

.lignePrestation {
	margin-left: 20px;
	margin-bottom: 3px;
	color: #444;
	font-size: 1.35rem;
}

@media screen and (max-width: 768px) {
	.blocSignatures {
		flex-direction: column;
	}
}
.listeBons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

.carteBon {
	position: relative;
	padding: 14px 18px;
	border: 1px solid #8A8A8A;
	border-radius: 10px;
	background: #fff;
	color: #303030;
}

.bonHeader {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: flex-start;
}

.bonInfos {
	flex: 1;
}

.bonNumero {
	font-family: 'RobotoSemi';
	font-size: 1.7rem;
	color: #2E7D32;
	line-height: 1.2;
}

.bonClient {
	font-family: 'RobotoMed';
	font-size: 1.35rem;
	color: #303030;
	font-weight: normal;
}

.bonDates {
	font-family: 'RobotoMed';
	font-size: 1.25rem;
	color: #555;
	white-space: nowrap;
	padding-top: 2px;
}

.bonFooter {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	margin-top: 10px;
}

.bonStatuts {
	display: flex;
	gap: 8px;
	margin: 0;
}
.inputMemo {
	width: 100%;
	min-height: 120px;
	font-size: 1.4rem;
	font-family: 'RobotoMed';
	font-weight: 500;
	border: none;
	background: transparent;
	padding: 20px;
	color: #555;
	resize: vertical;
	box-sizing: border-box;
}

.badgeSignature {
	display: inline-block;
	padding: 5px 10px;
	border-radius: 999px;
	font-family: 'RobotoMed';
	font-size: 1.1rem;
	text-transform: uppercase;
}

.badgeOK {
	background: #D9F2D9;
	border: 1px solid #7BC67E;
	color: #2E7D32;
}

.badgeKO {
	background: #F7F7F7;
	border: 1px solid #C7C7CF;
	color: #777;
}

.bonActions {
	display: flex;
	gap: 8px;
	margin: 0;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.btnListe {
	display: inline-block;
	min-width: 90px;
	padding: 8px 12px;
	border-radius: 8px;
	font-family: 'RobotoMed';
	font-size: 1.15rem;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	border: none;
	line-height: 1.2;
}

.btnSigner {
	background: #8A8A8A;
	color: #fff;
}

.btnModifier {
	background: #C7C7CF;
	color: #fff;
}

.btnPhoto {
	background: #C7C7CF;
	color: #fff;
}

.btnPdf {
	background: #D9F2D9;
	border: 1px solid #7BC67E;
	color: #2E7D32;
}

@media screen and (max-width: 640px) {
	.bonHeader,
	.bonFooter {
		flex-direction: column;
		align-items: flex-start;
	}

	.bonDates {
		white-space: normal;
	}

	.bonActions {
		justify-content: flex-start;
	}
}

.blocRecherche {
	position: relative;
	margin: 25px 0 20px 0;
	border: 1px solid #8A8A8A;
	border-radius: 10px;
	background: #fff;
}

	.blocRecherche .input {
		width: 100%;
		height: 48px;
		padding: 10px 20px;
		border: none;
		background: transparent;
		color: #555;
		font-size: 1.4rem;
		font-family: 'RobotoMed';
		box-sizing: border-box;
	}

		.blocRecherche .input:focus {
			outline: none;
		}

	.blocRecherche .labelFixe {
		top: -12px;
		left: 10px;
	}
textarea {
	width: 100%;
	height: 160px;
	font-size: 1.4rem;
	font-family: 'RobotoMed';
	font-weight: 500;
	border: none;
	background: transparent;
	padding: 15px 20px 10px 20px;
	color: #C7C7CF
}

.flexRadio {
	display: flex;
	gap: 20px;
	flex-flow: row wrap;
	padding: 20px 0
}

	.flexRadio li {
		flex: 0 1 calc(50% - 10px);
		padding: 0 10px
	}

.spanradio {
	display: table;
	width: 100%
}

	.spanradio input[type="radio"] {
		display: table-cell;
		vertical-align: baseline;
		width: 30px;
		padding: 0
	}

	.spanradio label {
		display: table-cell;
		width: 100%;
		vertical-align: baseline;
		cursor: pointer
	}

.flexListeRadio {
	display: flex;
	flex-flow: row wrap;
	padding: 20px 10px
}

	.flexListeRadio li {
		flex: 0 0 100%;
		padding: 10px
	}

		.flexListeRadio li:nth-child(even) {
			background: #f0f1f2
		}

.listeradio {
	display: table;
	width: 100%
}

	.listeradio input[type="radio"] {
		display: table-cell;
		width: 30px;
		padding: 0;
		vertical-align: baseline
	}

	.listeradio label {
		display: table-cell;
		width: 100%;
		vertical-align: baseline;
		cursor: pointer
	}

		.listeradio label h3 {
			display: block;
			text-transform: uppercase;
			font-size: 1.4rem;
			font-family: 'RobotoMed';
			font-weight: 500
		}

		.listeradio label p {
			display: block;
			padding: 2px 0
		}

		.listeradio label strong {
			font-family: 'RobotoMed';
			font-weight: 500;
		}

.blocInputLog, .blocSubmitLog {
	padding: 10px 0
}

.appDemande, .appReclame, .appSuivre {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 30px;
	padding-right: 30px
}




/* HEADER */
header {
	width: 100%;
	height: 100px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999
}

nav {
	display: flex;
	flex-flow: row nowrap;
	width: 100%;
	max-width: 1024px;
	align-items: center;
	margin: 0 auto;
	height: 100px;
	background: linear-gradient(90deg, #BFC0C8 1%, #D7D8DE 99%)
}

.menuHeader {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.deconnexion {
	flex: 0 0 60px;
	padding: 0 11px 0 10px
}

	.deconnexion img {
		display: block;
		height: 34px
	}

	.deconnexion a {
		float: right;
		display: inline-block;
		padding: 10px
	}

		.deconnexion a:hover {
			color: #777777
		}

.titre {
	flex: 1 1 auto;
	text-align: center;
	font-size: 2.2rem;
	color: black;
}

.identite {
	flex: 0 0 80px;
	padding: 0 10px 0 21px
}

	.identite a {
		display: inline-block
	}

	.identite img {
		display: block;
		height: 50px
	}

/* WRAPPER */
main {
	position: relative;
	width: 100%;
	max-width: 1024px;
	min-height: 100vh;
	margin: 0 auto;
	padding: 80px 21px;
	background: #f0f1f2
}

/* Bloc Intro, Titres et Textes */
.blocIntro {
	padding: 50px 0 0 0
}

	.blocIntro h1 {
		display: block;
		font-size: 2.2rem;
		line-height: 1.15;
		text-transform: uppercase;
		font-family: 'Dosis';
		font-weight: 600
	}

	.blocIntro h2 {
		display: block;
		font-size: 1.8rem;
		line-height: 1.15;
		text-transform: uppercase;
		font-family: 'Dosis';
		font-weight: 600
	}

	.blocIntro p {
		display: block;
		padding-bottom: 10px
	}

		.blocIntro p a {
			font-family: 'RobotoMed';
			font-weight: 500
		}

		.blocIntro p strong {
			font-family: 'RobotoSemi';
			font-weight: 700
		}

.messageErreur {
	display: block;
	margin: 0 30px 20px 30px;
	padding: 12px 15px;
	border-radius: 8px;
	background: #FDECEC;
	border: 1px solid #E57373;
	color: #C62828;
	font-family: 'RobotoMed';
	font-size: 1.4rem;
}

.imgintexte {
	max-height: 16px
}

.listeTexte {
	padding: 0
}

	.listeTexte li {
		display: block;
		padding: 0 0 2px 7px;
		text-indent: -7px
	}

		.listeTexte li strong {
			font-family: 'RobotoSemi';
			font-weight: 700
		}

/*  Home Choix */
.blocChoix {
	padding: 20px 0 0 0
}

.flexiChoix {
	display: flex;
	flex-flow: row wrap
}

	.flexiChoix li {
		flex: 0 0 50%;
		padding: 10px
	}

		.flexiChoix li a {
			display: block
		}

			.flexiChoix li a img {
				display: block;
				width: 100%;
				max-width: 200px;
				height: auto;
				margin: 0 auto
			}

.margeurTitre {
	display: flex;
	flex-flow: row nowrap;
	text-transform: uppercase;
	padding-top: 10px;
	max-width: 220px;
	margin: 0 auto;
	font-family: 'Dosis';
	font-weight: 600;
	font-size: 1.8rem;
	line-height: 1.2222em
}

	.margeurTitre li.arrow {
		flex: 0 0 40px;
		padding: 0;
		text-align: right;
		font-size: 3.0rem;
		color: #4A4A4A
	}

	.margeurTitre li.pushTitre {
		flex: 1 1 auto;
		padding: 5px 10px;
		color: #8A8A8A
	}


.flexiChoixFull {
	display: flex;
	flex-flow: row wrap
}

	.flexiChoixFull li {
		flex: 0 0 100%;
		padding: 10px
	}

		.flexiChoixFull li a {
			display: block
		}

			.flexiChoixFull li a img {
				display: block;
				width: 100%;
				max-width: 200px;
				height: auto;
				margin: 0 auto
			}

.infoSuivi {
	display: flex;
	flex-flow: row wrap;
	max-width: 800px;
	justify-content: space-evenly;
	margin: 0 auto;
	padding: 20px 0;
	align-content: center
}

	.infoSuivi > li {
		flex: 0 1 12%;
		padding: 8px;
		text-align: center
	}

.bulleSuivi {
	display: block;
	width: 65px;
	height: 65px;
	margin: 0 auto 5px auto;
	text-align: center;
	line-height: 2.4;
	color: #ffffff;
	font-size: 3.0rem;
	font-family: 'RobotoSemi';
	font-weight: 700;
	border-radius: 50%
}

/* RECAP DEMANDES coté CLIENTS */
.blocRecap {
	padding: 20px 0 40px 0
}

.flexRecap {
	position: relative;
	display: block;
	width: 100%;
	margin: 1px auto;
	border: 1px solid #8A8A8A;
	border-radius: 10px;
	background: #ffffff
}

.listeRecap {
	padding: 20px
}

	.listeRecap li {
		border: none;
		border-top: 5px solid #fff;
		border-bottom: 5px solid #fff
	}

		.listeRecap li:nth-child(even) {
			background: #f0f1f2
		}

.labelFixe.labelDate {
	height: 30px;
	width: auto;
	padding: 9px 20px;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	margin: 0 auto;
	font-size: 1.5rem;
	line-height: 1;
	font-family: 'RobotoSemi';
	font-weight: 700
}

.recapitulatif {
	display: flex;
	gap: 10px;
	flex-flow: row nowrap
}

.recapEtat {
	flex: 0 0 30px;
	padding: 10px 5px
}

	.recapEtat span {
		display: block;
		white-space: nowrap;
		writing-mode: sideways-lr;
		text-transform: uppercase;
		color: #fff;
		font-family: 'RobotoMed';
		font-weight: 500
	}

.therecap {
	flex: 0 1 100%;
	padding: 10px
}

.therecaplibre {
	flex: 0 1 100%;
	padding: 3px 10px 3px 10px;
	background-color: #F2F2F2
}

.therecap span {
	display: block;
	font-style: italic;
	font-size: 1.2rem;
	font-family: 'RobotoMed';
	font-weight: 500;
	color: #aaa
}

.therecap p {
	display: block
}

.recapSite {
	padding: 10px 0 0 0;
	font-size: 1.4rem;
	font-family: 'RobotoSemi';
	font-weight: 700;
	text-transform: uppercase
}

.recapLocal {
	padding: 0 0 10px 0;
	font-size: 1.3rem;
	font-family: 'RobotoMed';
	font-weight: 500
}

.recapDate {
	padding: 5px 0 0 0;
	font-size: 1.6rem;
	color: #6A6A6A;
	font-family: 'RobotoSemi';
	font-weight: 700;
	text-transform: uppercase
}

.callInspector {
	flex: 0 0 50px;
	border-left: 10px solid #fff
}

	.callInspector a {
		display: block;
		padding: 10px 10px 0 10px
	}

		.callInspector a img {
			display: block;
			max-width: 30px
		}

			.callInspector a img.newChat {
				animation: 0.8s ease-out 0s infinite alternate-reverse blinkMe
			}

@keyframes blinkMe {
	from {
		transform: scale(0.75);
		opacity: 0.5
	}

	to {
		transform: scale(1);
		opacity: 1
	}
}

/* RECAP DEMANDES coté INSPECTEURS */
.listeRecapIns {
	padding: 20px
}

	.listeRecapIns > li {
		border: none;
		border-top: 15px solid #fff;
		border-bottom: 5px solid #fff
	}

.listeRecapInsMsgLibre {
	padding: 15px
}

.listeRecapInssMsgLibre > li {
	border: none;
	border-top: 5px solid #fff;
	border-bottom: 5px solid #fff;
}

.labelFixe.labelDate {
	height: 30px;
	width: auto;
	padding: 9px 20px;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	margin: 0 auto;
	font-size: 1.5rem;
	line-height: 1;
	font-family: 'RobotoSemi';
	font-weight: 700
}

.recapitulatifIns {
	display: flex;
	gap: 0 10px;
	flex-flow: row wrap
}

.recapitulatifmsglibre {
	display: flex;
	gap: 2px;
	flex-flow: row nowrap
}

.recapSitemsglibre {
	font-size: 1.4rem;
	font-family: 'RobotoSemi';
	font-weight: 700;
	text-transform: uppercase
}

.recapEtatIns {
	flex: 0 0 30px;
	padding: 10px 5px
}

	.recapEtatIns span {
		display: block;
		white-space: nowrap;
		writing-mode: sideways-lr;
		text-transform: uppercase;
		color: #fff;
		font-family: 'RobotoMed';
		font-weight: 500
	}

.therecapIns {
	flex: 0 1 calc(100% - 40px);
	padding: 10px 10px 20px 10px
}

	.therecapIns span {
		display: block;
		font-style: italic;
		font-size: 1.2rem;
		font-family: 'RobotoMed';
		font-weight: 500;
		color: #aaa
	}

	.therecapIns p {
		display: block
	}

.recapSiteIns {
	padding: 0;
	font-size: 1.6rem;
	font-family: 'RobotoSemi';
	font-weight: 700;
	text-transform: uppercase
}

.recapLocalIns {
	padding: 0 0 10px 0;
	font-size: 1.4rem;
	font-family: 'RobotoMed';
	font-weight: 500
}

.recapDateIns {
	padding-top: 5px;
	font-size: 1.6rem;
	color: #6A6A6A;
	font-family: 'RobotoSemi';
	font-weight: 700;
	text-transform: uppercase
}

.recapDemandeur strong {
	font-family: 'RobotoSemi';
	font-weight: 700;
	text-transform: uppercase
}

.tools {
	flex: 0 0 100%;
	padding-left: 35px;
	background: #eaeaea
}

	.tools a {
		display: inline-block;
		padding: 10px;
		text-align: center;
		margin: 0 auto
	}

		.tools a img {
			display: block;
			max-width: 50px
		}

			.tools a img.newChat {
				animation: 0.8s ease-out 0s infinite alternate-reverse blinkMe
			}

		.tools a.changeStat {
			float: right;
			padding-right: 20px
		}

@keyframes blinkMe {
	from {
		transform: scale(0.75);
		opacity: 0.5
	}

	to {
		transform: scale(1);
		opacity: 1
	}
}

/*  Changement */
.toolsStat {
	width: 100%;
	padding: 10px 35px;
	background: #eaeaea
}

.toolsChange {
	display: flex;
	justify-content: center;
	flex-flow: row wrap
}

	.toolsChange li {
		flex: 1 1 20%;
		padding: 10px
	}


.toolsChangerecla {
	display: flex;
	justify-content: center;
	flex-flow: row wrap
}

	.toolsChangerecla li {
		flex: 1 1 40%;
		padding: 10px
	}

.spanradioChange {
	display: flex;
	flex-flow: row nowrap;
	width: 100%;
	padding: 10px
}

	.spanradioChange strong {
		flex: 0 0 20px;
		padding: 3px 5px 5px 5px
	}

	.spanradioChange label {
		flex: 0 1 100%;
		padding: 5px;
		white-space: nowrap;
		font-size: 1.4rem;
		font-family: 'RobotoMed';
		font-weight: 500;
		color: #fff;
		width: 100%;
		vertical-align: baseline;
		cursor: pointer;
		text-transform: uppercase
	}

.listeHistorique {
	display: flex;
	flex-flow: row wrap;
	padding: 20px
}

	.listeHistorique li {
		flex: 0 0 100%;
		margin-bottom: 5px;
		padding: 5px 20px;
		border-left: 4px solid #ddd;
		border-bottom: 1px solid #ddd;
	}

		.listeHistorique li strong {
			font-family: 'RobotoSemi';
			line-height: 2.2;
			font-weight: 700;
			text-transform: uppercase
		}

		.listeHistorique li span {
			display: inline-block;
			padding: 5px 10px;
			color: #fff
		}



/* DIALOGUE */
.bulleDialogue {
	display: flex;
	flex-flow: column wrap;
	gap: 20px;
	padding: 20px 20px 10px 20px
}

	.bulleDialogue li {
		max-width: 75%;
		position: relative;
		word-wrap: break-word
	}

		.bulleDialogue li .bubulle {
			display: inline-block;
			box-shadow: 0 5px 5px 0 rgba(2,2,2,.2);
			font-size: 1.4rem;
			padding: 10px 20px 20px 20px;
			border-radius: 10px;
			background: #f0f1f2
		}

		.bulleDialogue li:nth-child(even) {
			align-self: flex-end
		}

span.inbulle {
	display: block;
	padding-bottom: 5px;
	font-size: 1.1rem;
	color: #555;
	text-decoration: underline
}

	span.inbulle strong {
		color: #000;
		font-family: 'RobotoMed';
		font-weight: 500
	}

.bulleDialogue li:nth-child(even) span.inbulle {
	text-align: right
}

.inspectorPrez {
	padding: 30px 0 0 0;
	text-align: center;
	font-size: 1.3rem
}

	.inspectorPrez strong {
		font-family: 'RobotoMed';
		font-weight: 500
	}

.blocDiag {
	padding: 20px 0
}

.flexEcriture {
	padding: 10px 20px 20px 20px
}

.bulleEcrire {
	box-shadow: inset 2px 2px 6px rgba(2,2,2,.2);
	font-size: 1.4rem;
	padding: 10px;
	border-radius: 10px;
	background: #f0f1f2
}

	.bulleEcrire textarea {
		width: 100%;
		height: 160px;
		resize: none;
		outline: none;
		font-size: 1.4rem;
		font-family: 'RobotoMed';
		font-weight: 500;
		border: none;
		background: transparent;
		padding: 15px 20px 10px 20px;
		color: #C7C7CF
	}

.submitDialogue {
	width: 100%;
	margin: 1px auto;
	border: 1px solid #C7C7CF;
	border-radius: 10px;
	background: #C7C7CF;
	transition: all 0.3s
}

	.submitDialogue:hover {
		background: #6A6A6A;
		border: 1px solid #6A6A6A
	}

/* /////////////////////////////////// */
/* NOUVEAU CODE 3  */
/* /////////////////////////////////// */
.blocUpload {
	padding: 20px 0 0 0
}

.labUpload {
	display: block;
	padding: 5px 20px;
	font-size: 1.4rem;
	font-family: 'RobotoMed';
	font-weight: 500
}

input[type="file"] {
	margin-top: 10px
}

/* Grille basique, avec petite déformation pour les images en paysage */
.grilleUpload {
	display: flex;
	flex-flow: row wrap;
	padding: 10px
}

	.grilleUpload li {
		flex: 0 0 auto;
		max-width: 33.333333%;
		overflow: hidden;
		position: relative;
		padding: 10px
	}

		.grilleUpload li img {
			display: block;
			object-fit: cover;
			width: 100%;
			height: 100%
		}

.controleUpload {
	position: absolute;
	bottom: 10px;
	left: 10px;
	width: calc(100% - 20px);
	padding: 5px;
	background-color: rgba(90,90,90,0.8)
}

	.controleUpload button {
		display: inline-block
	}

		.controleUpload button img {
			display: block;
			width: 30px;
			height: auto
		}

button.deletUpload {
	float: right
}

/* /////////////////////////////////// */
/* NOUVEAU CODE 2  */
/* /////////////////////////////////// */
.submitConf {
	width: 100%;
	margin: 1px auto;
	border-radius: 10px;
	transition: all 0.3s
}

	.submitConf:hover {
		background: #6A6A6A
	}

.formMiniButton {
	height: 36px;
	font-size: 1.5rem;
	text-align: center;
	overflow: hidden;
	position: relative;
	transition: all 0.3s;
	text-transform: uppercase;
	border: none;
	background: transparent;
	padding: 10px 20px;
	font-family: 'RobotoMed';
	font-weight: 500;
	color: #fff
}


/* /////////////////////////////////// */
/* NOUVEAU CODE  */
/* /////////////////////////////////// */

/* /////////////////////////////////// */
/* NOUVEAU CODE  */
/* /////////////////////////////////// */

/* Confirmation / Erreur */
.blocConfirmation {
	padding: 20px 20px 10px 20px;
	width: 100%;
	max-width: 600px;
	position: absolute;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.bravoImage {
	display: block;
	width: 100%;
	max-width: 160px;
	height: auto;
	margin: 0 auto
}

.blocConfirmation h1 {
	display: block;
	padding-top: 20px;
	font-size: 2.4rem;
	line-height: 1.15;
	text-transform: uppercase;
	font-family: 'Dosis';
	font-weight: 600
}

.blocConfirmation p {
	display: block;
	padding-bottom: 10px
}

.blocConfirmation hr {
	margin: 20px auto 10px auto
}

.cta {
	padding: 10px 10px 0 10px
}

	.cta a {
		display: inline-block;
		min-width: 60px;
		width: auto;
		padding: 10px 20px;
		margin: 1px auto;
		text-transform: uppercase;
		text-align: center;
		border: 1px solid #4A4A4A;
		color: #fff;
		font-family: 'RobotoMed';
		font-weight: 500;
		border-radius: 10px;
		background: #4A4A4A;
		transition: all 0.3s
	}

		.cta a:hover {
			background: #6A6A6A;
			border: 1px solid #6A6A6A
		}

.dualbtn {
	display: flex;
	flex-flow: row nowrap;
	margin: 0 auto;
	justify-content: center
}

	.dualbtn li {
		flex: 0 0 auto;
		padding: 10px
	}
/* variante de couleurs */
.cta.varcouleur01 a {
	border: 1px solid #A0A0A0;
	background: #A0A0A0
}

.cta.varcouleur01:hover a {
	border: 1px solid #6A6A6A;
	background: #6A6A6A
}

.cta.varcouleur02 a {
	border: 1px solid #555555;
	background: #555555
}

.cta.varcouleur02:hover a {
	border: 1px solid #6A6A6A;
	background: #6A6A6A
}

/* /////////////////////////////////// */
/* FIN NOUVEAU CODE  */
/* /////////////////////////////////// */



/* FOOTER */
.miss {
	display: block;
	padding: 10px;
	font-size: 1.2rem;
	text-align: center;
	color: #ddd;
	text-decoration: underline;
	font-family: 'RobotoMed';
	font-weight: 500
}

footer {
	width: 100%;
	height: 100px;
	position: fixed;
	bottom: 0;
	left: 0
}

.navFooter {
	width: 100%;
	max-width: 1024px;
	height: 100px;
	margin: 0 auto;
	background: linear-gradient(90deg, rgba(44,44,44,1) 1%, rgba(138,138,138,1) 99%)
}

.sousNav {
	display: flex;
	gap: 10px;
	max-width: 800px;
	flex-flow: row nowrap;
	padding: 0 21px;
	margin: 0 auto
}

	.sousNav li {
		flex: 1 1 auto;
		text-align: center;
		padding-top: 10px
	}

		.sousNav li a {
			display: block;
			padding: 10px;
			font-size: 11px;
			font-family: 'RobotoMed';
			font-weight: 500;
			text-transform: uppercase;
			color: #ffffff
		}

		.sousNav li img {
			display: block;
			height: 36px;
			margin: 0 auto
		}

		.sousNav li.actif a {
			padding: 0px 10px 0 10px
		}

		.sousNav li.actif img {
			height: 41px
		}

.sousNavPrez {
	display: flex;
	gap: 10px;
	max-width: 800px;
	flex-flow: row nowrap;
	padding: 0 21px 20px 21px;
	margin: 0 auto
}

	.sousNavPrez li {
		flex: 1 1 auto;
		text-align: center;
		padding: 20px 0;
		font-family: 'RobotoSemi';
		font-weight: 700;
		font-size: 1.8rem
	}

/* BON VETEMENTS
========================================================================== */
/* ============================================================
   BON VETEMENTS
   ============================================================ */

#demander .appDemande {
	color: #303030
}

/* TYPES */
#demander .typeVetements label {
	background: #fff !important;
	border: 1px solid #b5b8be !important;
	color: #303030 !important;
	font-weight: 600;
}

#demander .typeVetements input[type="checkbox"]:checked + label {
	background: #d9f2d9 !important;
	border-color: #7bc67e !important;
	color: #176c1c !important;
}

#demander .typeVetements label.selectionDetail {
	background: #d9f2d9 !important;
	border-color: #49a84f !important;
	color: #176c1c !important;
}

/* MODELE */
#demander .modeleVetement {
	display: block;
	margin: 12px 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid #aaa;
	border-radius: 10px;
	background: #fff;
	color: #303030;
}

	#demander .modeleVetement.selectionne {
		border: 2px solid #49a84f;
	}

#demander .modeleEntete {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 10px 14px;
	border: 0;
	background: #eee;
	color: #303030;
	text-align: left;
	font-family: 'RobotoMed',sans-serif;
	font-size: 15px;
	cursor: pointer;
}

#demander .modeleVetement.selectionne .modeleEntete {
	background: #d9f2d9;
	color: #176c1c;
}

#demander .modeleNom {
	flex: 1;
	color: inherit;
	font-weight: 600;
}

#demander .modeleChevron {
	display: inline-block;
	margin-left: 10px;
	color: #555;
	font-size: 20px;
	transition: transform .2s;
}

#demander .modeleVetement.ouvert .modeleChevron {
	transform: rotate(180deg);
}

#demander .modeleContenu {
	display: block;
	padding: 10px;
	background: #fff;
}

/* TAILLES */
#demander .listeTailles {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#demander .ligneTaille {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 54px;
	padding: 8px 10px;
	box-sizing: border-box;
	border: 1px solid #bbb;
	border-radius: 8px;
	background: #fff;
	color: #303030;
}

	#demander .ligneTaille.selectionnee {
		border: 2px solid #49a84f;
		background: #d9f2d9;
		color: #176c1c;
	}

#demander .tailleLibelle {
	flex: 1;
	color: #303030;
	font-size: 17px;
	font-weight: 700;
}

#demander .ligneTaille.selectionnee .tailleLibelle {
	color: #176c1c;
}

#demander .infoStock {
	margin-right: 12px;
	color: #555;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}

#demander .quantiteZone {
	display: flex;
	align-items: center;
	gap: 7px;
}

#demander .btnQte {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #aaa;
	border-radius: 7px;
	background: #eee;
	color: #222;
	font-size: 22px;
	font-weight: 700;
	line-height: 38px;
	text-align: center;
	cursor: pointer;
}

	#demander .btnQte:disabled {
		opacity: .35;
		cursor: default;
	}

#demander .quantiteValeur {
	display: inline-block;
	min-width: 30px;
	color: #303030;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}

#demander .ligneTaille.selectionnee .btnQte {
	border-color: #49a84f;
	background: #c5e9c7;
	color: #176c1c;
}

#demander .ligneTaille.selectionnee .quantiteValeur {
	color: #176c1c;
}

/* RECAP */
#demander .resumeSelection {
	margin-top: 20px;
	padding: 15px;
	border: 1px solid #aaa;
	border-radius: 9px;
	background: #fff;
	color: #303030;
}

	#demander .resumeSelection > strong {
		display: block;
		margin-bottom: 10px;
		color: #222;
		font-size: 15px;
	}

#demander .resumeLigne {
	padding: 8px 0;
	border-bottom: 1px solid #ddd;
	color: #303030;
}

	#demander .resumeLigne:last-child {
		border-bottom: 0;
	}

/* POPUP RECAP MOBILE */
#demander .modalRecap {
	display: none;
	position: fixed;
	z-index: 9999999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.45);
}

#demander .modalRecapContent {
	position: absolute;
	right: 10px;
	bottom: 10px;
	left: 10px;
	max-height: 80vh;
	overflow: auto;
	border-radius: 12px;
	background: #fff;
	color: #303030;
}

#demander .modalRecapHeader {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px;
	border-bottom: 1px solid #ccc;
	background: #fff;
	color: #222;
	font-size: 17px;
	font-weight: 700;
}

	#demander .modalRecapHeader button {
		width: 40px;
		height: 40px;
		border: 0;
		border-radius: 50%;
		background: #eee;
		color: #222;
		font-size: 20px;
	}

#demander .modalRecapListe {
	padding: 10px 15px 20px;
}

#demander .barreValidationMobile {
	display: none;
}

/* MOBILE */
@media screen and (max-width:600px) {

	#demander main {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	#demander .appDemande {
		padding-left: 0 !important;
		padding-right: 0 !important;
		padding-bottom: 85px !important;
	}

	#demander .blocInput {
		padding: 12px 0 !important;
	}

	#demander .flexCheckCards {
		padding: 20px 10px 10px;
	}

	#demander .listeCards tbody {
		gap: 6px;
	}

	#demander .listeCards label {
		padding: 8px 11px !important;
		font-size: 13px !important;
	}

	#demander .modeleVetement {
		margin: 8px 0;
	}

	#demander .modeleEntete {
		min-height: 48px;
		padding: 9px 11px;
		font-size: 14px;
	}

	#demander .modeleContenu {
		display: none;
		padding: 7px;
	}

	#demander .modeleVetement.ouvert .modeleContenu {
		display: block;
	}

	#demander .ligneTaille {
		min-height: 50px;
		padding: 6px 7px;
	}

	#demander .tailleLibelle {
		font-size: 16px;
	}

	#demander .infoStock {
		margin-right: 6px;
		font-size: 11px;
	}

	#demander .btnQte {
		width: 38px;
		height: 38px;
		font-size: 21px;
		line-height: 36px;
	}

	#demander .resumeSelection,
	#demander .boutonsValidation {
		display: none;
	}

	#demander .barreValidationMobile {
		position: fixed;
		z-index: 99999;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		min-height: 64px;
		padding: 8px 10px;
		gap: 7px;
		border-top: 1px solid #aaa;
		background: #fff;
		box-shadow: 0 -3px 10px rgba(0,0,0,.18);
	}

	#demander .barreTotal {
		flex: 1;
		color: #303030;
		font-size: 13px;
		font-weight: 700;
	}

	#demander .btnMobileVoir,
	#demander .btnMobileContinuer {
		height: 44px;
		padding: 0 13px;
		border-radius: 8px;
		font-family: 'RobotoMed',sans-serif;
		font-size: 13px;
		font-weight: 500;
	}

	#demander .btnMobileVoir {
		border: 1px solid #777;
		background: #fff;
		color: #303030;
	}

	#demander .btnMobileContinuer {
		border: 1px solid #49a84f;
		background: #d9f2d9;
		color: #176c1c;
	}
}

/* DESKTOP */

@media screen and (min-width: 601px) {
	.modeleChevron {
		display: none;
	}

	.modeleEntete {
		cursor: default;
	}

	.modeleContenu {
		display: block !important;
	}
}


/* MEDIA QUERIES
========================================================================== */
/* max 1024px */
@media screen and (max-width:64em) {
	header {
		background: #666666
	}
}


/* max 960px */
@media screen and (max-width:60em) {
	header {
		background: #777777
	}
}


/* max 800px */
@media screen and (max-width:50em) {
	header {
		background: #888888
	}
}


/* max 768px */
@media screen and (max-width:48em) {
	header {
		background: #808080
	}
}


/* max 640px */
@media screen and (max-width:40em) {
	header {
		background: #999999
	}

	.appDemande, .appReclame, .appSuivre {
		padding: 30px 0
	}

	.blocInput, .blocSubmit, .blocRecap {
		padding: 20px 0
	}

	.blocRecap {
		margin-bottom: 20px
	}


	/* Grille img */
	.grilleUpload li {
		max-width: 50%
	}

	.controleUpload button img {
		width: 25px
	}
}



/* max 512px */
@media screen and (max-width:32em) {
	header {
		background: #707070
	}

	header, nav {
		height: 80px
	}

	.deconnexion {
		padding: 0 0 0 10px
	}

	.identite {
		padding: 0 10px 0 10px
	}

		.identite img {
			height: 40px
		}

	main.mainLog {
		padding: 20px 10px
	}

	main {
		padding: 60px 10px
	}

	.flexiChoix li {
		flex: 0 0 100%
	}

		.flexiChoix li img {
			max-width: 170px
		}

	.infoSuivi {
		max-width: 512px
	}

		.infoSuivi li {
			flex: 0 0 25%;
			padding: 10px
		}

	.blocDouble {
		gap: unset;
		flex-flow: row wrap
	}

		.blocDouble.forDate {
			gap: 10px;
			flex-flow: row nowrap
		}

		.blocDouble li {
			flex: 0 0 100%
		}

	.flexRadio li {
		flex: 0 0 100%
	}

	.blocRecap {
		padding: 0 0 20px 0
	}

	.listeRecap, .listeRecapIns {
		padding: 20px 10px
	}

	.recapitulatif {
		display: flex;
		flex-flow: row nowrap
	}

	.recapEtat {
		border-right: 5px solid #fff
	}

	.therecap {
		flex: 0 1 100%;
		padding: 10px 0
	}

	.recapSite {
		padding: 0 0 10px 5px;
		font-size: 1.4rem;
		font-family: 'RobotoSemi';
		font-weight: 700;
		text-transform: uppercase
	}

	.recapLocal {
		padding: 0 0 0 5px;
		font-size: 1.4rem;
		font-family: 'RobotoMed';
		font-weight: 500
	}

	.recapCat {
		padding: 0 0 0 5px
	}

	.recapObs {
		width: calc(100% + 45px);
		padding: 5px 0 5px 5px
	}

	.recapObsIns {
		width: 100%;
		padding: 5px 0 0 5px
	}

	.recapObsDialogue {
		width: 100%;
		padding: 5px 0 5px 5px
	}

	.callInspector {
		flex: 0 0 50px;
		border-left: 5px solid transparent
	}

	.callInspectorLibre {
		flex: 0 0 20px;
		border-left: 5px solid transparent
	}

	.bulleDialogue {
		padding: 20px 10px 10px 10px
	}

	.flexEcriture {
		padding: 10px 10px 20px 10px
	}


	.sousNav, .sousNavPrez {
		padding: 0 10px 20px 10px
	}
}

/* max 448px */
@media screen and (max-width:28em) {
	header {
		background: #AAAAAA
	}
	/* Grille img */
	.grilleUpload li {
		max-width: 100%
	}

	.dxbs-gridview {
		color: #303030;
	}

	.blocUpload input[type="file"] {
		color: #555;
	}

	/*footer*/
	footer, .navFooter {
		height: 80px
	}

	.sousNav {
		padding: 0 8px
	}

		.sousNav li a {
			padding: 10px;
			font-size: 10px
		}

		.sousNav li img {
			height: 31px
		}
}

/* max 321px */
@media screen and (max-width:20em) {
	header {
		background: #606060
	}
}

/* SIGNATURE BON */
.titreSignature {
	position: absolute;
	top: -12px;
	left: 10px;
	background: #8A8A8A;
	color: #fff;
	border-radius: 5px;
	padding: 5px 10px;
	font-size: 1.2rem;
	text-transform: uppercase;
	font-family: 'RobotoMed'
}

	.titreSignature.signatureOK {
		background: #D9F2D9;
		color: #2E7D32
	}

#demander .blocRecapSignature,
#demander .blocInput,
#demander .blocSignature {
	margin-top: 15px;
	margin-bottom: 15px
}

#demander .blocSignature {
	overflow: visible !important
}

#demander .zoneSignature {
	overflow: hidden
}

@media screen and (max-width:600px) {
	#demander .blocSignature {
		padding: 28px 8px 10px 8px
	}

		#demander .blocSignature p {
			margin: 8px 0 12px !important
		}

	#demander .zoneSignature {
		padding: 6px;
		margin-top: 10px
	}

	#demander .boutonsValidation {
		display: flex !important;
		margin: 25px 0 15px;
		gap: 10px
	}

		#demander .boutonsValidation .btnAction {
			min-width: 0;
			flex: 1;
			height: 46px;
			font-size: 14px
		}
}