/* FONTS
========================================================================== */
@font-face{font-display:swap;font-family:'Manrope';font-style:normal;font-weight:300;src: url('../fonts/manrope-v19-latin-300.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Manrope';font-style:normal;font-weight:400;src: url('../fonts/manrope-v19-latin-regular.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Manrope';font-style:normal;font-weight:600;src: url('../fonts/manrope-v19-latin-600.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Manrope';font-style:normal;font-weight:800;src: url('../fonts/manrope-v19-latin-800.woff2') format('woff2')}

/* ROOT
========================================================================== */
:root {
	--system-ui: system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	/* https://utopia.fyi/type/calculator?c=375,14,1.333,1024,17,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,3xl,8 */

	--f10-12: clamp(0.6564rem, 0.5751rem + 0.3468vw, 0.7971rem);
	--f12-15: clamp(0.75rem, 0.6417rem + 0.4622vw, 0.9375rem);
	--f13-16: clamp(0.8125rem, 0.7042rem + 0.4622vw, 1rem);
	--f14-17: clamp(0.875rem, 0.7667rem + 0.4622vw, 1.0625rem);
	--f18-22: clamp(1.1664rem, 1.022rem + 0.6162vw, 1.4163rem);
	--f24-30: clamp(1.5548rem, 1.3623rem + 0.8214vw, 1.8879rem);
	--fcta: clamp(1rem, 0.9278rem + 0.3082vw, 1.125rem);

	/* https://utopia.fyi/space/calculator?c=375,14,1.333,1024,18,1.333,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,3xl,8  */

	--space4-5: clamp(0.25rem, 0.2139rem + 0.1541vw, 0.3125rem);
	--space7-9: clamp(0.4375rem, 0.3653rem + 0.3082vw, 0.5625rem);
	--space11-14: clamp(0.6875rem, 0.5792rem + 0.4622vw, 0.875rem);
	--space14-18: clamp(0.875rem, 0.7305rem + 0.6163vw, 1.125rem);
	--space21-27: clamp(1.3125rem, 1.0958rem + 0.9245vw, 1.6875rem);
	--space28-36: clamp(1.75rem, 1.4611rem + 1.2327vw, 2.25rem);
	--space42-54: clamp(2.625rem, 2.1916rem + 1.849vw, 3.375rem);
	--space56-72: clamp(3.5rem, 2.9222rem + 2.4653vw, 4.5rem);
	--space84-108: clamp(5.25rem, 4.3833rem + 3.698vw, 6.75rem);


	--colFond: rgb(239, 239, 239);
	--colVert: rgb(48, 168, 155); /* #30a89b */
	--colBleu: rgb(0, 142, 181); /* #008eb5 */
	--colBleuClair: rgb(94, 127, 177);
	--colBlanc: rgb(255, 255, 255);
	--colNoir: rgb(9, 9, 9);
	--colNoirTitre: rgb(26, 26, 26);
	--colGrisTypo: rgb(111, 111, 111);
	--colGrisTrame: rgba(111, 111, 111, 0.15);
	--colGrisCta: rgb(136, 136, 136);
	--colInput: rgb(223, 228, 237);
	--colRouge: rgb(196, 75, 30);
	--colInfo: rgb(188, 169, 64);
}

/* BASE
========================================================================== */
@-moz-document url-prefix(){html{scrollbar-width:none}}
html,body{font-family:var(--system-ui);height:100%}
body{font-size:16px;line-height:normal;color:var(--colNoir);background-color:var(--colFond);font-family:'Manrope';font-style:normal;font-weight:300;scrollbar-width:none;overflow:hidden}
body::-webkit-scrollbar{width:0px;background:transparent}
::-webkit-scrollbar{display:none}
a{cursor:pointer;color:inherit;text-decoration:none}
a:hover,a:active,a:focus{outline:0;outline:none;cursor:pointer;text-decoration:none}
::selection{background:var(--colNoir);color:var(--colBlanc);text-shadow:none}
a[href^=tel],a[href^=sms]{color:inherit;cursor:default;text-decoration:none}
strong{font-style:normal;font-weight:600}
.ripple{background-position:center center;background-repeat:no-repeat;background-image:url('../img/ripple.svg');background-size:40px 40px}
h1,h2,h3,h4{text-wrap:balance}


/* All Wrappers
========================================================================== */
.mainWrapper{display:block;position:relative;width:100%;max-width:1024px;margin:0 auto;border-left:1px solid var(--colGrisTypo);border-right:1px solid var(--colGrisTypo)}

/* CTA et Button uniformes (avec ou sans picto)
========================================================================== */
.cta{display:flex;padding:var(--space7-9) 0;gap:var(--space7-9);align-items:flex-start;justify-content:flex-start}
.cta.ctaCenter{justify-content:center} 
.cta.ctaRight{justify-content:flex-end}
	.cta a,.cta button{display:flex;padding:var(--space11-14) var(--space14-18);gap:var(--space11-14);align-items:center;border-radius:4px;transition:all 0.3s ease}
	.cta a span,.cta button span{flex:0 0 auto;text-align:center;font-size:var(--fcta);line-height:1;letter-spacing:0.04rem;white-space:preserve nowrap;font-weight:400;text-transform:uppercase}
	.cta a svg,.cta button svg{flex:0 0 auto;fill:var(--colBlanc);height:18px}
	.cta a:hover,.cta button:hover{transition:all 0.3s ease}
		.cta a.ctaGris{color:var(--colBlanc);background-color:var(--colGrisCta)}
		.cta a.ctaGris:hover{color:var(--colBlanc);background-color:var(--colBleu)}
		.cta a.ctaGris:hover svg{fill:var(--colBlanc)}
			.cta a.ctaVert,.btnVert{color:var(--colBlanc);background-color:var(--colVert)}
			.cta a.ctaVert:hover,.btnVert:hover{color:var(--colBlanc);background-color:var(--colBleu)}
			.cta a.ctaVert:hover svg,.btnVert:hover svg{fill:var(--colBlanc)}
				.cta a.ctaBleu,.btnBleu{color:var(--colBlanc);background-color:var(--colBleu)}
				.cta a.ctaBleu:hover,.btnBleu:hover{color:var(--colBlanc);background-color:var(--colVert)}
				.cta a.ctaBleu:hover svg,.btnBleu:hover svg{fill:var(--colBlanc)}
/* CTA label */
.outLabCta{display:flex;flex-flow:row nowrap;height:40px;justify-content:center;align-items:center;font-weight:600;font-size:12px;letter-spacing:0.04rem;text-transform:uppercase}
/* CTA deconnexion */
a.ctdeco{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;background-color:var(--colGrisCta);padding:var(--space7-9);border-radius:4px;transition:all 0.3s ease}
a.ctdeco svg{flex:0 0 auto;fill:var(--colBlanc);height:var(--space11-14)}
a.ctdeco span{flex:0 0 auto;text-align:center;font-size:var(--f10-12);color: var(--colBlanc);line-height:1;letter-spacing:0.04rem;white-space:preserve nowrap;font-weight:400;text-transform:uppercase}



/* ALL Forms
========================================================================== */
.tak{display:block;padding:var(--space7-9) var(--space14-18)}
	.tak input{display:block;width:90%;max-width:640px;margin:0 auto;color:var(--colGrisTypo);background-color:var(--colBlanc);font-weight:600;padding:8px;border:1px solid var(--colInput);border-radius:4px}
.back_error{display:block;width:88%;max-width:624px;margin:0 auto;padding:0 4px;font-size:12px;color:var(--colRouge);font-weight:600}
.back_message{display:block;width:98%;max-width:640px;background-color:var(--colRouge);margin:0 auto;padding:var(--space7-9);border-radius:4px;font-size:var(--f12-15);color:var(--colBlanc);font-weight:600}
.back_info{display:block;width:98%;max-width:640px;background-color:var(--colInfo);margin:0 auto;padding:var(--space7-9);border-radius:4px;font-size:var(--f12-15);color:var(--colBlanc);font-weight:600}
.opeFormUpload input[type="file"]{display:none}
.opeFormUpload .opeupload span,.opeFormUpload .opeupload svg{display:inline-block;vertical-align:middle}
.opeFormUpload .opeupload svg{margin-left:var(--space11-14);fill:var(--colBlanc);height:20px}
.opeFormUpload .opeupload{display:inline-block;width:auto;background-color:var(--colBleu);line-height:1;letter-spacing:0.04rem;white-space:preserve nowrap;font-weight:400;color:var(--colBlanc);text-transform:uppercase;padding:var(--space14-18) var(--space21-27);margin-top:var(--space7-9);border-radius:4px;transition:all 0.3s ease}
.opeFormUpload .opeupload:hover{background-color:var(--colVert);color:var(--colBlanc);transition:all 0.3s ease;cursor:pointer}

.utiFormUpload input[type="file"]{display:none}
.utiFormUpload .utiupload span,.opeFormUpload .utiupload svg{display:inline-block;vertical-align:middle}
.utiFormUpload .utiupload svg{margin-left:var(--space11-14);fill:var(--colBlanc);height:20px}
.utiFormUpload .utiupload{display:inline-block;width:auto;background-color:var(--colVert);line-height:1;letter-spacing:0.04rem;white-space:preserve nowrap;font-weight:400;color:var(--colBlanc);text-transform:uppercase;padding:var(--space14-18) var(--space21-27);margin-top:var(--space7-9);border-radius:4px;transition:all 0.3s ease}
.utiFormUpload .utiupload:hover{background-color:var(--colBleu);color:var(--colBlanc);transition:all 0.3s ease;cursor:pointer}


/* Intro
========================================================================== */
.tubeIndex, .tubeOpe{display:flex;flex-flow:column nowrap;justify-content:center;height:100vh;height:100dvh;width:100%}
.tubeTask{display:flex;flex-flow:column nowrap;justify-content:flex-start;height:100vh;height:100dvh;width:100%}
	.tubeMarge{flex:1 0 auto}
	.introLogoQooper{display:block;width:clamp(10rem, 6.7498rem + 13.8675vw, 15.625rem);height:auto;margin:0 auto var(--space28-36) auto}
	.introTexte{flex:0 0 auto;padding:0 var(--space28-36)}
		.introTexte p{display:block;padding-bottom:var(--space14-18);font-size:var(--f18-22);font-weight:300;text-align:justify}
	.introLogOpe{flex:0 0 auto;padding:var(--space14-18) 0;border-top:1px solid var(--colGrisTypo);background-color:var(--colGrisTypo);background: repeating-linear-gradient( -50deg, var(--colFond), var(--colFond) 1px, var(--colGrisTrame) 1px, var(--colGrisTrame) 4px )}
	.opeRetour{flex:0 0 auto;padding:var(--space14-18) 0;position:relative;border-top:1px solid var(--colGrisTypo);background-color:var(--colGrisTypo);background: repeating-linear-gradient( -50deg, var(--colFond), var(--colFond) 1px, var(--colGrisTrame) 1px, var(--colGrisTrame) 4px )}
	.opeRetour.listetask{padding:var(--space14-18) var(--space28-36)}



/* Operateurs
========================================================================== */
	.opeForm{display:block;margin:auto;padding:var(--space28-36) var(--space7-9)}
	.opeHeader{flex:0 0 auto;border-bottom:1px solid var(--colGrisTypo);position:relative}
		.maskDataHo{position:absolute;z-index:999;display:block;left:0;bottom:-21px;width:100%;height:20px;background:linear-gradient(180deg, rgba(223, 223, 223, 1) 0%, rgba(223, 223, 223, 1) 10%, rgba(223, 223, 223, 0) 100%)}
		.enteteOpe{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;padding:var(--space14-18)}
		.enteteOpe li{flex:0 0 auto}
		.enteteOpe li img.headerLogoQooper{display:block;width:auto;height:36px}

	.information_inPage{display:block;padding:var(--space28-36) 0}
	.info_page_ope{display:flex;align-items:center;padding:0 var(--space28-36);gap:24px;margin:0 auto;border-radius:4px;font-size:var(--f14-17);color:var(--colGrisTypo);font-weight:600}
	.info_intro_ope{display:flex;align-items:center;padding:var(--space21-27) var(--space14-18);gap:24px;background-color:var(--colBleu);margin:var(--space14-18);border-radius:4px;font-size:var(--f14-17);color:var(--colBlanc);font-weight:400}
		.imgNotifi{flex:0 0 auto;width:44px}
		.paraNotifi{flex:1 1 auto}

/* task liste
========================================================================== */
	.opeTaskList{flex:1 1 auto;overflow-x:hidden;overflow-y:auto}
	.scrollWrapper{display:block;width:100%;height:100%}
	.maskDataBas{position:absolute;z-index:999;display:block;left:0;top:-21px;width:100%;height:20px;background:linear-gradient(0deg, rgba(223, 223, 223, 1) 0%, rgba(223, 223, 223, 1) 10%, rgba(223, 223, 223, 0) 100%)}

		.opeTaskIntro{display:block;padding:var(--space28-36) 0;border-bottom:1px solid var(--colGrisTypo)}
			.opeTaskIntro p{display:block;padding:0 var(--space28-36);line-height:1.2}
			.opeTaskIntro p strong{color:var(--colBleu)}
			.opeTaskIntro .opeTitle {display:block;color:var(--colBleu);text-align:center;font-size:var(--f18-22);font-weight:700;}

		.taskListe{display:flex;flex-flow:row wrap}
		.taskListe > li{flex:0 0 100%;padding:var(--space28-36)}
		.taskListe > li:nth-child(odd){background-color:var(--colBlanc)}
			.flexListe{display:flex;flex-flow:row nowrap;align-items:flex-start;gap:24px}
				.pictoTache{flex:0 0 auto;padding-top:4px}
					.pictoTache img{display:block;max-width:60px;height:auto}
				.listeContent{flex:1 1 auto;font-size:15px;line-height:1.2}
					.listeContent h2{display:block;font-size:18px;font-weight:400;padding-bottom:4px}
					.listeContent h3{display:block;font-size:var(--f13-16);font-weight:800;text-transform:uppercase;padding-bottom:6px}
		.taskListe > li.oddless{background-color:var(--colFond);border-top:1px solid var(--colGrisTypo)}
		.taskListe span:has(.opeListImportant){position:relative;padding-left:10px}
		.taskListe .opeListImportant{position:absolute;top:4px;left:0;width:12px;height:12px;background-color:var(--colRouge);border-radius:50%;box-shadow:0 0 0 1px var(--colBlanc);z-index:2}
		.taskListe .opeListHalo{position:absolute;top:1px;left:-3px;width:18px;height:18px;background-color:var(--colRouge);border-radius:50%;opacity:0.4;z-index:1;animation:haloPulse 1.8s ease-out infinite}


/* task
========================================================================== */
	.opeTaskLoc{display:flex;flex-flow:row nowrap;gap:8px;align-items:flex-start;padding:var(--space28-36) var(--space14-18) var(--space14-18) var(--space14-18)}
		.locIco{flex:0 0 auto}
			.locIco img{display:block;width:13px;height:auto}
		.locContent{flex:0 0 auto;font-size:var(--f13-16);line-height:1.42;font-weight:200}
			.locContent h2{display:block;font-size:var(--f13-16);font-weight:600;text-transform:uppercase;padding-bottom:var(--space4-5)}
	.opeTaskLocFind{display:flex;flex-flow:row nowrap;gap:8px;align-items:flex-start;padding:var(--space14-18);border-top:1px solid var(--colGrisTypo);border-bottom:1px solid var(--colGrisTypo)}
		.findIco{flex:0 0 auto;padding-top:4px}
			.findIco img{display:block;width:13px;height:auto}
		.findContent{flex:0 0 auto;font-size:var(--f14-17);text-transform:uppercase;line-height:1.2;font-weight:800}
		.findContent img.imv{display:inline-block;vertical-align:middle;width:30px;height:auto;margin-top:6px;background-color:var(--colVert);border-radius:4px}
		.findContent img.imb{display:inline-block;vertical-align:middle;width:30px;height:auto;margin-top:6px;background-color:var(--colBleu);border-radius:4px}
		.findContent span{display:inline-block;padding:0 var(--space7-9);vertical-align:middle;margin-top:4px;font-size:var(--f13-16);font-weight:400;text-transform:none}
.oneTaskListe{display:flex;flex-flow:row wrap;padding:var(--space28-36) var(--space28-36) var(--space28-36) var(--space14-18)}
.oneTaskListe > li{flex:1 1 100%;padding:var(--space21-27) 0;border-bottom:1px solid var(--colGrisTypo)}
.oneTaskListe > li.oddless{border-bottom:none;padding-bottom:var(--space28-36)}
		.taskInList{display:flex;flex-flow:row nowrap;gap:16px;align-items:flex-start}
			.listInput{flex:0 0 13px;padding-top:20px}
			.listPicto{flex:1 1 auto}
				.flexLabel{display:flex;flex-flow:row nowrap;align-items:flex-start;gap:16px}
					.rowpicto{flex:0 0 70px}
						.rowpicto img.imv{display:block;width:100%;max-width:70px;height:auto;background-color:var(--colVert);border-radius:4px}
						.rowpicto img.imb{display:block;width:100%;max-width:70px;height:auto;background-color:var(--colBleu);border-radius:4px}
					.rowcontent{flex:1 1 auto}
						.rowcontent h2{display:block;line-height:1.2;font-weight:800}
						.rowcontent span{display:block;line-height:1.2;}
						.rowcontent p{display:block;padding-top:6px;line-height:1.2;font-weight:400;font-size:var(--f13-16)}
						.listPicto small{display: inline-block;padding:0.25em 0.6em;font-size:0.75rem;font-weight:600;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:0.25rem;background-color:var(--colRouge);}
.opeFormUpload,.utiFormUpload{padding:0 var(--space14-18)}
.okImages{display:block;position:relative;width:100%;font-size:var(--f10-12);margin:var(--space21-27) auto var(--space14-18) auto;padding:var(--space7-9) var(--space14-18);background-color:var(--colBlanc)}
	.listeOkImage{display:flex;flex-flow:row nowrap;align-items:center;gap:var(--space11-14);height:100%;overflow-y:hidden;overflow-x:auto;scroll-snap-type:x mandatory}
		.listeOkImage li{flex:0 0 auto;padding:4px 0;scroll-snap-align:start}
			.listeOkImage li img, .listeOkImgObj{display:block;width:100%;max-width:120px;height:auto;max-height:160px;object-fit:cover;border-radius:8px}
.opeThx{display:flex;flex-flow:row nowrap;padding:var(--space42-54) calc( var(--space28-36) + 8px);border-top:1px solid var(--colGrisTypo)}
.thxWrapper h2{display:block;padding-bottom:var(--space7-9);font-size:var(--f18-22);color:var(--colBleu);font-weight:800;text-transform:uppercase}


/* Utilisateur
========================================================================== */
.oneTaskListe.lessPad{display:flex;flex-flow:row wrap;padding:0 var(--space28-36) var(--space28-36) var(--space14-18)}
.libDetail{display:block;padding:var(--space21-27) 0 0 0;font-size:var(--f13-16);font-weight:600}
	.taskDetails{display:flex;flex-flow:column nowrap;gap:16px;padding:var(--space14-18) 0}
		.taskDetails li{display:flex;flex-flow:row nowrap;gap:8px;line-height:1.2;align-items:flex-start}
			.taskDetails li span{flex:0 0 auto}
			.taskDetails li label{flex:1 1 auto}
			.taskDetails li textarea{flex:0 0 100%;height:165px;padding:8px;background-color:var(--colBlanc)}
.taskListe > li:nth-child(odd) .taskDetails li textarea{background-color:var(--colFond)}
.utiThx{display:flex;flex-flow:row nowrap;padding:var(--space42-54) calc( var(--space28-36) + 8px);border-top:1px solid var(--colGrisTypo)}

.thxWrapper{flex:0 0 100%;padding:0}
	.thxWrapper h2{display:block;padding-bottom:var(--space7-9);font-size:var(--f18-22);color:var(--colNoirTitre);font-weight:800;text-transform:uppercase}
.thxWrapper .back_message{display:block;width:100%;max-width:1024px;margin:0;padding:var(--space11-14)}

/* CUSTOM
========================================================================== */
li:has(.remove-image) {
	position: relative;
}

.remove-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 0, 0, 1);
	color: #fff;
	opacity: 0;
	transition: all 0.2s ease-in-out;
}

.remove-image:hover {
	opacity: .8;
}

.w-100 {
	width: 100%;
}

.w-80 {
	width: 80%;
}

.m-auto {
	margin: 0 auto;
}

/* KEY FRAMES
========================================================================== */
@keyframes haloPulse{
	0%{transform:scale(1);opacity:0.4}
	70%{transform:scale(2);opacity:0}
	100%{transform:scale(2);opacity:0}
}

/* MEDIA QUERIES
========================================================================== */
/* max 1024px */
@media screen and (max-width:64em){
.mainWrapper{border:none}
}