/* FONTS - Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+
========================================================================== */
@font-face{font-display:swap;font-family:'Boogaloo';font-style:normal;font-weight:400;src: url('../fonts/boogaloo-v23-latin-regular.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Assistant';font-style:normal;font-weight:400;src: url('../fonts/assistant-v22-latin-regular.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Assistant';font-style:normal;font-weight:500;src: url('../fonts/assistant-v22-latin-500.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Assistant';font-style:normal;font-weight:600;src: url('../fonts/assistant-v22-latin-600.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Assistant';font-style:normal;font-weight:700;src: url('../fonts/assistant-v22-latin-700.woff2') format('woff2')}

/* ROOT
========================================================================== */
:root {
	--system-ui: system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--f14-15: clamp(0.875rem, 0.85rem + 0.1067vw, 0.9375rem);		/* fs de 14 à 15 txt input */
  --f18-24: clamp(1.125rem, 0.9749rem + 0.6403vw, 1.5rem); 		/* fs de 18 à 24 titre */
  --f14-16: clamp(0.875rem, 0.825rem + 0.2134vw, 1rem); 			/* fs de 14 à 16 btn libe  */
  --f28-40: clamp(1.75rem, 1.4498rem + 1.2807vw, 2.5rem); 		/* fs de 28 à 40 logo  */
  --f16-20: clamp(1rem, 0.8999rem + 0.4269vw, 1.25rem); 			/* fs de 16 à 20 logo  */
 
	 --space-4: clamp(0.1875rem, 0.1625rem + 0.1067vw, 0.25rem);
  --space-8: clamp(0.4375rem, 0.4125rem + 0.1067vw, 0.5rem);
  --space-12: clamp(0.625rem, 0.575rem + 0.2134vw, 0.75rem);
  --space-16: clamp(0.8125rem, 0.7375rem + 0.3202vw, 1rem);
  --space-24: clamp(1.25rem, 1.1499rem + 0.4269vw, 1.5rem);
  --space-32: clamp(1.625rem, 1.4749rem + 0.6403vw, 2rem);
  --space-48: clamp(2.4375rem, 2.2124rem + 0.9605vw, 3rem);
  --space-64: clamp(3.25rem, 2.9498rem + 1.2807vw, 4rem);
  --space-96: clamp(4.875rem, 4.4248rem + 1.921vw, 6rem);

	--colBrun: rgb(156, 113, 63); 			/* #9C713F */
	--colBrunClair: rgb(182, 150, 111);		/* #B6966F */
	--colBeigeClair: rgb(247, 239, 226); 	/* #F7EFE2 */ 
	--colOr: rgb(233, 193, 129); 			/* #E9C181 */
	--colRouge: rgb(233, 81, 28); 			/* #E9511C */
	--colNoir: rgb(26, 26, 26); 			/* #1A1A1A */
	--colGrey: rgb(89, 89, 87); 			/* #595957 */
	--colBlancCa: rgb(250, 250, 250); 		/* #FAFAFA */
	--colBlanc: rgb(255, 255, 255); 		/* #FFF */
	--colVertOk: rgb(47, 198, 88); 			/* #2FC658 */
	--coltrame01: rgb(246, 243, 240); 
	--coltrame02: rgb(241, 238, 237); 
}

/* BASE Tube central 1312px Marges intérieur 24px
========================================================================== */
html,body{font-family:var(--system-ui)}
body{font-size:var(--f14-16);line-height:normal;color:var(--colNoir);font-family:'Assistant';font-style:normal;font-weight:400}
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}
img{display:block;text-align:center;font-size:10px;line-height:1.1}
strong{font-style:normal;font-weight:700}
.ripple{background-position:center center;background-repeat:no-repeat;background-image:url('img/svg/ripple.svg');background-size:40px 40px}
noscript{position:fixed;z-index:9998;display:flex;justify-content:center;align-items:center;top:0;left:0;right:0;bottom:0;text-align:center;background:var(--colNoir);overflow:hidden}
noscript p{width:300px;padding:var(--space24);text-transform:uppercase;font-size:var(--f14-16);text-align:center;color:var(--colBlanc)}
.fakelogo{display:inline-block;text-align:center}
.fakelogo strong{display:block;text-transform:uppercase;font-size:var(--f28-40);line-height:1;color:var(--colBrun);font-weight:normal;font-family:'Boogaloo';}
.fakelogo span{display:block;font-size:var(--f16-20);color:var(--colGrey);line-height:1}
sup{color:red}

/*INPUTFILE*/
.input-file-hidden {
	display: none;
}


/* LOGIN */
#armada-login {
  --s: 128px;
  --c1: var(--colBrunClair);
  --c2: var(--colBrun);
  --_g: var(--c1) 0%  5% ,var(--c2) 6%  15%,var(--c1) 16% 25%,var(--c2) 26% 35%,var(--c1) 36% 45%, var(--c2) 46% 55%,var(--c1) 56% 65%,var(--c2) 66% 75%,var(--c1) 76% 85%,var(--c2) 86% 95%, #0000 96%; background: radial-gradient(50% 50% at 100% 0,var(--_g)), radial-gradient(50% 50% at 0 100%,var(--_g)), radial-gradient(50% 50%,var(--_g)), radial-gradient(50% 50%,var(--_g)) calc(var(--s)/2) calc(var(--s)/2) var(--c1); background-size: var(--s) var(--s);
}
#armada-etape{
  --s: 128px; 
  --c1: var(--coltrame01); 
  --c2: var(--coltrame02); 
  --_g: var(--c1) 0%  5% ,var(--c2) 6%  15%,var(--c1) 16% 25%,var(--c2) 26% 35%,var(--c1) 36% 45%, var(--c2) 46% 55%,var(--c1) 56% 65%,var(--c2) 66% 75%,var(--c1) 76% 85%,var(--c2) 86% 95%, #0000 96%; background: radial-gradient(50% 50% at 100% 0,var(--_g)), radial-gradient(50% 50% at 0 100%,var(--_g)), radial-gradient(50% 50%,var(--_g)), radial-gradient(50% 50%,var(--_g)) calc(var(--s)/2) calc(var(--s)/2) var(--c1); background-size: var(--s) var(--s);
}
.blocCentral{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:calc(100% - var(--space-32));background-color:var(--colBlancCa);border-radius:8px;max-width:640px}
	.flexLogin{display:flex;flex-flow:column nowrap;max-width:360px;margin:0 auto;padding:var(--space-32) var(--space-32) var(--space-16) var(--space-32)}
	.loginLogo{flex:0 0 auto;text-align:center}
	.loginForm{flex:0 0 auto}
	.logandpass{padding-top:var(--space-24)}
		.logandpass .tak{padding:8px 0}
		.logandpass .tak input{width:100%;background-color:var(--colBeigeClair);font-weight:600;padding:8px var(--space-8);border:2px solid var(--colOr);border-radius:4px}
		.logandpass .tak button{width:100%;background-color:var(--colBrun);font-weight:600;color:var(--colBlancCa);text-transform:uppercase;padding:8px var(--space-8);border:2px solid var(--colOr);border-radius:4px;transition:all 0.3s ease}
		.logandpass .tak button:hover{background-color:var(--colOr);color:var(--colGrey);transition:all 0.3s ease}

	.loginOptions{flex:0 0 auto;text-align:center}
		.loginOptions a{display:inline-block;padding:var(--space-4);margin:var(--space-24) auto 0 auto;color:var(--colGrey);font-size:12px}
		.loginOptions a:hover{text-decoration:underline}


.logbutton {
	width: 100%;
	background-color: var(--colBrun);
	font-weight: 600;
	color: var(--colBlancCa);
	text-transform: uppercase;
	padding: 8px var(--space-8);
	border: 2px solid var(--colOr);
	border-radius: 4px;
	transition: all 0.3s ease
}
	.logbutton:hover {
		background-color: var(--colOr);
		color: var(--colGrey);
		transition: all 0.3s ease
	}
/* HEADER */
header{display:block;height:90px;max-width:1312px;margin:0 auto;padding:var(--space-12) var(--space-24);width:calc(100% - var(--space-32));background-color:var(--colBlanc);box-shadow: rgba(33, 35, 38, 0.2) 0px 10px 10px -10px}
	.flexheader{display:flex;height:100%;flex-flow:row nowrap;align-items:center;justify-content:space-between}
		.headLogo{flex:0 0 auto;order:1}
		.headInfo{flex:1 1 auto;order:2;padding:0 var(--space-16);text-align:center;font-family:'Boogaloo';font-size:var(--f18-24);color:var(--colGrey)}
.headDeco {
	flex: 0 0 auto;
	order: 3
}

	.headDeco a {
		display: inline-block;
		font-size: 10px;
		font-weight: 600;
		text-transform: uppercase;
		text-align: center;
		margin-left: 8px
	}

		.headDeco a:hover {
			color: var(--colBrun)
		}

		.headDeco a img {
			display: block;
			width: auto;
			height: 20px;
			margin: 0 auto 2px auto
		}

/* CONTENT */
main{display:block;min-height:calc( 100vh - (180px + var(--space-32)));max-width:1312px;margin:0 auto;width:calc(100% - var(--space-32))}

/* NAVIGATION */
.flexNav{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;gap:var(--space-12);width:100%;padding:var(--space-24) var(--space-16)}
	.navEtape,.navFiscal{flex:0 0 auto;text-transform:uppercase;text-align:center;line-height:1;font-weight:600}
	.flexNav nav{display:flex;flex-flow:row wrap;align-items:center;justify-content:flex-start;gap:var(--space-12)}
		.bulleNav{flex:0 0 auto;padding:6px var(--space-24);background-color:var(--colBlanc);color:var(--colBrun);border:2px solid var(--colOr);font-size:14px;border-radius:22px}
		.bulleNav span.navStat{display:block;font-weight:700}
		.bulleNav span.navFis{color:var(--colGrey);font-weight:700}
		.bulleNav:last-child{margin-right:0}
		.bulleNav:hover,.bulleNav.currentPage{background-color:var(--colBeigeClair)}
	
/* WRAPPER */
.wrapper{background-color:var(--colBlanc);padding:var(--space-24)}


.AspxTxt {
	width: 100%;
	background-color: var(--colBeigeClair);
	font-weight: 600;
	padding: 4px var(--space-4);
	border: 1px solid var(--colBlanc);
	border-radius: 4px
}
	.AspxTxt .dxeEditArea {
		background-color: var(--colBeigeClair) !important;
		font-weight: 600;
		padding: 4px var(--space-4);
		border: 1px solid var(--colBlanc);
		border-radius: 4px;
	}

	.AspxTxt input.dxeEditArea {
		background-color: var(--colBeigeClair) !important;
	}

/* Titrage */
.titrage{display:block;padding-bottom:var(--space-16)}
.titrage h2{display:inline-block;padding:0 var(--space-12);vertical-align:baseline;font-size:var(--f18-24);font-weight:500}
.titrage span{display:inline-block;vertical-align:baseline;font-size:var(--f14-16);font-weight:600}

/* Séparateur */
.separation{display:block;width:65%;border-top:1px solid var(--colBrun);padding-bottom:var(--space-8);margin:var(--space-24) auto 0 auto;line-height:1}

/* From ERP */
.fromERP{width:100%;padding:var(--space-24) var(--space-12);background-color:var(--colBlancCa)}
	.formDouble{display:flex;flex-flow:row nowrap;align-items:flex-start;gap:var(--space-32)}
		.col01,.col02{flex:0 0 calc( (100% - var(--space-32)) / 2 )}
			.listeInput{display:grid;grid-template-columns:150px 1fr;grid-template-rows:repeat(auto-fill, 1fr);grid-column-gap:var(--space-16);grid-row-gap:var(--space-16);font-weight:500}
				.inputactive input{width:100%;background-color:var(--colBeigeClair);font-weight:600;padding:4px var(--space-4);border:1px solid var(--colBlanc);border-radius:4px}
				.inputactive select{width:auto;background-color:var(--colBeigeClair);font-weight:600;padding:4px var(--space-4);border:1px solid var(--colBlanc);border-radius:4px}
				.inputactive input[type="date"]{width:auto}
				.inputactive input[type="time"]{width:auto}
				.inputactive textarea{width:100%;background-color:var(--colBeigeClair);font-weight:600;padding:4px var(--space-4);border:1px solid var(--colBlanc);border-radius:4px}

		.inter{display:block;padding-bottom:var(--space-24)}
		.interplus{display:block;width:96%;border-top:1px dotted #ccc;margin:var(--space-24) auto 0 auto}
		.extralife{display:block;width:100%;text-align:right;font-size:12px;font-weight:500}
		.extralife a{text-decoration:underline;color:var(--colGrey)}

/* From Client */
.fromClient,.fromInscrip,.fromParticipation,.fromDiplome{width:100%;padding:var(--space-24) var(--space-12);background-color:var(--colBlancCa)}

/* From InfoTravel */
.infoTravel{width:100%;padding:var(--space-24) var(--space-12);background-color:var(--colBeigeClair);line-height:1.2}
.formCheck{display:flex;flex-flow:row nowrap;gap:var(--space-16)}
	.check01{flex:0 0 30px;text-align:center}
		.check01 input[type="checkbox"]{padding:0 var(--space-4)}
		.check01 img{display:block;width:auto;height:31px;margin:0 auto}
	.check02{flex:1 1 auto}
		.check02 label, .check02 p{display:block;padding:0 var(--space-4)}
		.check02 p a{text-decoration:underline;font-weight:500}

/* From Date */
.fromDate{padding:var(--space-24) var(--space-16);background-color:var(--colBlancCa)}

/* From Participation */
	.staytogether{display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center;gap:var(--space-8)}
		.staytogether input[type="radio"]{width:auto}
		.staytogether label{padding:0 var(--space-4)}
		span.minilab{font-style:italic;font-size:12px}
		li.minilib{line-height:1}

/* From Ordre */
img.signature{display:block;width:100%;max-width:250px;height:auto}
.uploadGrid{display:flex;flex-flow:row nowrap;max-width:1024px;gap:var(--space-12)}

.upLib{flex:0 1 50%;padding:var(--space-8)}
.upLib h3{display:block;padding-bottom:var(--space-4);font-size:var(--f14-16);font-weight:600}
.upLib p{display:block;padding-bottom:var(--space-4);font-size:var(--f14-16)}
.upLib p span{display:block;font-style:italic;font-size:13px}
	.upLib input[type="file"].hidden-upload {
		display: none;
	}
.upLib .armadaupload{display:inline-block;width:auto;background-color:var(--colBrun);font-weight:600;color:var(--colBlancCa);text-transform:uppercase;padding:8px 12px;margin-top:var(--space-8);border:2px solid var(--colOr);border-radius:4px;transition:all 0.3s ease}
.upLib .armadaupload:hover{background-color:var(--colOr);color:var(--colGrey);transition:all 0.3s ease;cursor:pointer}

.upVignette{flex:0 1 50%;padding:var(--space-8);text-align:center}
.upVignette span{display:block;padding-bottom:var(--space-8);font-weight:600}
.upVignette img{display:block;width:100%;max-width:200px;height:auto;margin:0 auto}
.upVignette strong{display:block;padding-top:var(--space-8);font-size:12px;font-style:italic;font-weight:500;max-width:180px;margin:0 auto}

/* From Liste */
.gridListe{display:block;position:relative;width:100%;overflow:auto;overscroll-behavior:none;height:auto;padding:0}
.gridrecus{display:grid;position:relative;width:100%;grid-template-columns:100px minmax(150px, 1fr) minmax(80px, 120px) 80px 100px 50px}
	.livHeader,.livData{background-color:var(--colBlanc);border-right:1px solid var(--colBrunClair);border-bottom:1px solid var(--colBrunClair)}
	.livHeader{border-top:1px solid var(--colBrunClair)}
	.livHeader{position:sticky;top:0;z-index:1}
	.livFixed{position:sticky;left:0;border-left:1px solid var(--colBrunClair)}
	.livHeader.livFixed{z-index:2;border-left:1px solid var(--colBrunClair);background-color:var(--colBeigeClair)}
	.livData.livFixed{background-color:var(--colBeigeClair)}
	.livHeader{padding:var(--space-8) var(--space-4);text-transform:uppercase;font-size:var(--f14-15);font-weight:600}
	.livData{padding:var(--space-8);font-size:14px}
	.livData.rowDate,.livHeader.rowDate, .livHeader.rowBon{text-align:center}
	.livData.rowBon img{display:block;margin:0 auto;width:20px;height:auto}
	.livData.livFixed.cours{color:var(--colBlancCa);background-color:var(--colBrun);font-weight:600;text-align:center}
	.livData.livFixed.ok{color:var(--colBlancCa);background-color:var(--colVertOk);font-weight:600;text-align:center}
	.livData.livFixed.refu{color:var(--colBlancCa);background-color:var(--colRouge);font-weight:600;text-align:center}

/* valideForm */
.listeBtn{display:grid;grid-template-columns:150px auto 1fr;grid-template-rows:1fr;grid-column-gap:var(--space-12);grid-row-gap:var(--space-12);font-weight:500;margin-top:var(--space-4)}
.listeBtn li{padding:var(--space-12) 0}
	.listeBtn button{width:auto;background-color:var(--colBrun);font-weight:600;color:var(--colBlancCa);text-transform:uppercase;padding:8px 12px;margin:0 var(--space-12);border:2px solid var(--colOr);border-radius:4px;transition:all 0.3s ease}
	.listeBtn button:hover{background-color:var(--colOr);color:var(--colGrey);transition:all 0.3s ease}
	.listeBtn button.ann{background-color:var(--colGrey);color:var(--colBlanc)}
	.listeBtn button.ann:hover{background-color:var(--colBlanc);color:var(--colGrey)}

.btnvalid{
	width: auto;
	background-color: var(--colBrun);
	font-weight: 600;
	color: var(--colBlancCa);
	text-transform: uppercase;
	padding: 8px 12px;
	margin: 0 var(--space-12);
	border: 2px solid var(--colOr);
	border-radius: 4px;
	transition: all 0.3s ease
}

	.btnvalid:hover{
		background-color: var(--colOr);
		color: var(--colGrey);
		transition: all 0.3s ease
	}

/* Errors Returns */
.back_error{display:block;width:100%;padding:0 var(--space-8);font-size:12px;color:var(--colRouge);font-weight:600}
.msg_error{display:inline-block;width:auto;padding:4px var(--space-8);font-size:var(--f14-15);border:2px solid var(--colRouge);border-radius:4px;font-weight:600;line-height:1.2}
.msg_info{display:inline-block;width:auto;padding:4px var(--space-8);font-size:var(--f14-15);border:2px solid var(--colOr);border-radius:4px;font-weight:600;line-height:1.2}
		.msg_error h3, .msg_info h3{display:inline-block;vertical-align:top;padding:0 var(--space-4);font-weight:700}
		.msg_error p, .msg_info p{display:inline-block;vertical-align:top;padding:0 var(--space-4);width:100%;max-width:320px}
.sko{color:var(--colRouge)}
.sok{color:var(--colVertOk)}

/* FOOTER */
footer{display:block;height:90px;max-width:1312px;margin:var(--space-32) auto 0 auto;padding:var(--space-12) var(--space-24);width:calc(100% - var(--space-32));background-color:var(--colBlanc);box-shadow: rgba(33, 35, 38, 0.2) 0px -10px 10px -10px}
	.flexfooter{display:flex;height:100%;flex-flow:row nowrap;align-items:center;justify-content:center}
		.fooInfo{flex:1 1 auto;padding:0 var(--space-16);text-align:center;font-family:'Boogaloo';font-size:var(--f18-24);color:var(--colGrey)}
		.fooInfo span{display:inline-block;vertical-align:center}
		.fooInfo strong{display:inline-block;vertical-align:center}
		.fooInfo span.armada{color:var(--colBrun)}

/* MEDIA QUERIES
========================================================================== */

/* max 1024px */
@media screen and (max-width:64em){
.flexNav{flex-flow:row wrap}
.navEtape,.navFiscal{flex:0 0 100%}
}

/* max 960px BREAK MENU */
@media screen and (max-width:60em){
.formDouble{flex-flow:row wrap;align-items:flex-end;gap:var(--space-16)}
.col01,.col02{flex:0 0 100%}
.listeBtn li.valiMessage{grid-area: 2 / 1 / 3 / 4;padding-top:0}
.msg_error,.msg_info{display:block;width:100%}
.msg_error h3,.msg_info h3{display:block}
.msg_error p,.msg_info p{display:block;max-width:none}
}

/* max 768px */
@media screen and (max-width:48em){
.uploadGrid{flex-flow:row wrap;max-width:1024px;gap:var(--space-12)}
.upLib{flex:0 0 100%;padding:var(--space-8)}
.upVignette{flex:0 0 100%;padding:var(--space-8);text-align:center}
}

/* max 640px reduction marges */
@media screen and (max-width:40em){
header{padding:var(--space-12);width:100%}
	.flexheader{flex-flow:row wrap}
	.headLogo span{display:none}
	.headInfo{flex:0 0 100%;order:20;padding:0;text-align:left;font-family:'Assistant';font-weight:600;font-size:var(--f14-16)}
main{width:100%}
.flexNav{flex-flow:row nowrap;align-items:flex-start;justify-content:flex-start;padding:var(--space-24) var(--space-8)}
.navEtape,.navFiscal{flex:0 1 50%}
.bulleNav{flex:0 0 100%;padding:8px;background-color:var(--colBlanc);text-align:left;text-transform:none;border:none;color:var(--colGrey);font-size:15px;font-weight:400;border-radius:4px}
.bulleNav span.navStat{display:inline-block;vertical-align:middle;padding:0 0 0 8px}
.wrapper{padding:var(--space-16)}
footer{padding:var(--space-8);width:100%}
	.fooInfo{font-size:var(--f16-20)}
	.fooInfo span{display:block}
	.fooInfo strong{display:none}
}

/* max 540px */
@media screen and (max-width:33.75em){
.flexNav{flex-flow:row wrap;gap:0;max-width:440px;margin:16px auto}
.navEtape,.navFiscal{flex:0 0 100%}
.flexNav nav{gap:0;border-bottom:1px solid var(--colBrunClair)}
.bulleNav{border-bottom:1px solid var(--colBrunClair);border-radius:0}
	nav .bulleNav:last-child{border-bottom:none}
.bulleNav br{display:none}
.bulleNav span.navStat,.bulleNav span.navFis{float:right}
.listeInput{grid-template-columns:minmax(100px, 120px) 1fr}
.listeBtn{grid-template-columns:1px 1fr}
}

/* max 375px */
@media screen and (max-width:24em){
.flexNav{max-width:320px}
.bulleNav span.navStat{display:block;padding:0}
}