/* 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:#082C35;padding:0.2em 0}
.browserupgrade a{text-decoration:underline;cursor:pointer;color:#db0525}=
==
pload
========================================================================== */
.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:#082C35;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:#025373;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:#0388A6;border:none;margin:10px auto}
h4{font-size:1.8rem;position:relative;display:block;border-bottom:1px dashed #025373; 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:#BACBD9}
.grisBeige{color:#F0F1F2}
.bleuFond{color:#025373}
.bleuCanard{color:#0388A6}
.petrole{color:#082C35}
.complementaire{color:#EB651A}
.bkgenCours{background-color:#F29F05}
.bkgenAttente{background-color:#555555}
.bkgplanif{background-color:#198CDB}
.bkgrefuse {
	background-color: #009110
}
.bkgcloture {
	background-color: #5E4870
}
.bkgenTermine{background-color:#A2BF30}
.bkgenReclaTermine {
	background-color: #73BC6F
}
.bkgetat{background-color:#555}
.bkgrecla{background-color:#f00030}


/* 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(2,83,115,1) 1%, rgba(3,136,166,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 #0388A6;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: #082C35
}
/* le reste du code pour l'upload image est plus bas */



		.flexMiniLabel{opacity:0;background-color:#0388A6;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:#0388A6;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}
	.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:#d04428}
	.flexretour span.correction{color:#d0a628}
	.flexretour span.information{color:#44474b}
	.flexretour span.validation{color:#53d028}
.blocSubmit{padding:20px 0}
	.flexSubmit{display:block;width:100%;margin:1px auto;border:1px solid #082C35;border-radius:10px;background:#082C35;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:#EB651A;border:1px solid #EB651A}
		.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 #082C35;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 #0388A6;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:#082C35}
	.flexSelect option{padding:2px 0}
	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:#082C35}
	.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, rgba(2,83,115,1) 1%, rgba(3,136,166,1) 99%)}
		.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:#198CDB} /* !!!! a faire  */
		.identite{flex:1 1 auto;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}
.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:#025373}
	.margeurTitre li.pushTitre{flex:1 1 auto;padding:5px 10px;color:#0388A6}


.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 #0388A6;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:#EB651A;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:#EB651A;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:#082C35}
.submitDialogue{width:100%;margin:1px auto;border:1px solid #082C35;border-radius:10px;background:#082C35;transition:all 0.3s}
.submitDialogue:hover{background:#EB651A;border:1px solid #EB651A}

/* /////////////////////////////////// */
/* 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(3, 136, 166, 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: #EB651A
	}

.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 #025373;
		color: #fff;
		font-family: 'RobotoMed';
		font-weight: 500;
		border-radius: 10px;
		background: #025373;
		transition: all 0.3s
	}

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

.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 #a2bf26;
	background: #a2bf26
}

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

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

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

/* /////////////////////////////////// */
/* 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(2,83,115,1) 1%, rgba(3,136,166,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}


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

}


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

}


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

}


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

}


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

.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:purple}

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:aquamarine}
/* Grille img */
.grilleUpload li{max-width:100%}




/*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:mediumvioletred}

}