/* 
Theme Name: Europ Net Intra
Author: Solis Rea
Version: 1.0.4
*/

/* FONTS Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+
========================================================================== */
/* manrope-300 Light  */
@font-face{font-display:swap;font-family:'Manrope';font-style:normal;font-weight:300;src: url('../fonts/manrope-v20-latin-300.woff2') format('woff2')}
/* manrope-400 Regular */
@font-face{font-display:swap;font-family:'Manrope';font-style:normal;font-weight:400;src: url('../fonts/manrope-v20-latin-regular.woff2') format('woff2')}
/* manrope-500 - Medium */
@font-face{font-display:swap;font-family:'Manrope';font-style:normal;font-weight:500;src: url('../fonts/manrope-v20-latin-500.woff2') format('woff2')}
/* manrope-600 - SemiBold */
@font-face{font-display:swap;font-family:'Manrope';font-style:normal;font-weight:600;src: url('../fonts/manrope-v20-latin-600.woff2') format('woff2')}
/* manrope-700 - Bold */
@font-face{font-display:swap;font-family:'Manrope';font-style:normal;font-weight:700;src: url('../fonts/manrope-v20-latin-700.woff2') format('woff2')}
/* manrope-800 - Extra-Bold */
@font-face{font-display:swap;font-family:'Manrope';font-style:normal;font-weight:800;src: url('../fonts/manrope-v20-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";
	
	/* Fluide Font Size */
	/* @link https://utopia.fyi/clamp/calculator/?a=480,1280,18%E2%80%9420 */
	--fs-20-18: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
	--fs-15-14: clamp(0.875rem, 0.8375rem + 0.125vw, 0.9375rem);
	--fs-14-13: clamp(0.8125rem, 0.775rem + 0.125vw, 0.875rem);
	
	/* Espacement facteur 480/14 > 1280/16 */
	/* https://utopia.fyi/space/calculator?c=480,14,1.2,1280,16,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
	--space-4: clamp(0.25rem, 0.25rem + 0vw, 0.25rem);
	--space-8: clamp(0.4375rem, 0.4rem + 0.125vw, 0.5rem);
	--space-12: clamp(0.6875rem, 0.65rem + 0.125vw, 0.75rem);
	--space-16: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
	--space-24: clamp(1.3125rem, 1.2rem + 0.375vw, 1.5rem);
	--space-32: clamp(1.75rem, 1.6rem + 0.5vw, 2rem);
	--space-48: clamp(2.625rem, 2.4rem + 0.75vw, 3rem);
	--space-64: clamp(3.5rem, 3.2rem + 1vw, 4rem);
	--space-96: clamp(5.25rem, 4.8rem + 1.5vw, 6rem);
	/* !!! ATTENTION !!! dans le montage des HTML toutes les valeurs d'espacement ne sont pas toujours fluides, il existe aussi des valeurs simples et fixes. */

	/* Couleurs */
	--colNoirMat:rgb(32, 32, 39); 			/* #202027 Ex: Toutes les UI et trait de tableaux, typos... */ 
	--colNoirMid:rgb(42, 41, 48); 			/* #2A2930 Ex: Fond des CTA ou Header */
	--colFolder:rgb(240, 160, 0); 			/* #F0A000 Ex: Uniquement pour les Folders en arborescence */
	--colOr:rgb(199, 141, 15); 				/* #C78D0F Ex: Ui Hover des BTN, Lignes unies dans les tableaux */
	--colBeigeOdd:rgb(246, 246, 246); 		/* #F6F6F6 Ex: en tableau une ligne sur 2 > odd */
	--colBeigeOddHover:rgb(238, 233, 227); 	/* #EEE9E3 Ex: en tableau ligne hover */
	--colBlancFond:rgb(252, 252, 252); 		/* #FCFCFC Ex: Couleur du fond des pages, sauf Login */
	--colBlanc:rgb(255, 255, 255); 			/* #FFFFFF Ex: Typo de BTN hover, Even ligne Tableaux, Typo des libellés en tableau de données */

	/* flex unitaire pour une grille 8 avec un gap --space-16 dans le premier niveau de la balise MAIN
	   Si vous êtes déjà dans une grille flex, cela fonctionne, mais les valeurs ne seront pas celles attendues */
	--rowA1: calc( (100% - (11 * var(--space-16)) ) / 12 );
	--rowA2: calc( (var(--rowA1) * 2) + (var(--space-16) * 1));
	--rowA3: calc( (var(--rowA1) * 3) + (var(--space-16) * 2));
	--rowA4: calc( (var(--rowA1) * 4) + (var(--space-16) * 3));
	--rowA5: calc( (var(--rowA1) * 5) + (var(--space-16) * 4));
	--rowA6: calc( (var(--rowA1) * 6) + (var(--space-16) * 5));
	--rowA7: calc( (var(--rowA1) * 7) + (var(--space-16) * 6));
	--rowA8: calc( (var(--rowA1) * 8) + (var(--space-16) * 7));
	--rowA9: calc( (var(--rowA1) * 9) + (var(--space-16) * 8));
	--rowA10: calc( (var(--rowA1) * 10) + (var(--space-16) * 9));
	--rowA11: calc( (var(--rowA1) * 11) + (var(--space-16) * 10));
	--rowA12: 100%;

	/* Autres */
	--transitionBtn: color 0.3s ease, background-color 0.3s ease;

	/* Animations */
	/*--colShapesLog:rgb(52, 43, 40);*/ 		/* #342B28 Ex: Toutes les formes des l'anim de login */
	--colShapesLog:rgb(68, 48, 10);
	--colShapesFooter:rgb(238, 233, 227);	/* #EEE9E3 Ex: Toutes les formes du footer */
}


/* BASE
========================================================================== */
html,body{height:100%}
body{display:flex;flex-flow:column nowrap;line-height:normal;background-color:var(--colBlancFond);color:var(--colNoirMid);font-size:var(--fs-14-13);font-family:'Manrope';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(--colNoirMat);color:var(--colBlanc);text-shadow:none}
a[href^=tel],a[href^=sms]{color:inherit;cursor:default;text-decoration:none}
img{text-align:center;font-size:10px;line-height:1;font-weight:400}
.ripple{background-position:center center;background-repeat:no-repeat;background-image:url('../img/svg/ui-ripple.svg');background-size:40px 40px}
noscript{position:fixed;z-index:9999;display:flex;justify-content:center;align-items:center;top:0;left:0;right:0;bottom:0;text-align:center;background:var(--colNoirMat);overflow:hidden}
noscript p{width:300px;padding:var(--space-24);text-transform:uppercase;font-size:var(--fs-16-15);text-align:center;color:var(--colBlanc)}
h1,h2,h3,h4,h5{text-wrap:balance}


/* LOGIN
========================================================================== */
body#europnetlog{overflow:hidden}
.fondLogVnoir{position:relative;width:100vw;height:100vh;height:100dvh;background-color:var(--colNoirMat)}
.fondLogVblanc{position:relative;width:100vw;height:100vh;height:100dvh;background-color:var(--colBlanc)}
	main#blocLog{width:100%;max-width:341px;height:100%;max-height:513px;margin-top:2px;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);background-color:var(--colNoirMid)}

	.flexLog{display:flex;flex-flow:column nowrap;align-items:center;height:100%}
		.logLogo{flex:0 0 200px;align-content:center}
			.logLogo img{display:block;height:90px;width:auto}
		.logIntro{flex:0 0 auto;width:100%;color:var(--colBlanc);font-size:12px;padding:var(--space-24) 22%;text-align:center}
		.logForm{flex:1 1 auto;width:100%;align-content:center}
			.blocLogInput{width:calc(100% - 100px);margin:0 auto;padding-bottom:var(--space-24)}
				.blocLogInput input[type="text"],.blocLogInput input[type="password"]{width:100%;font-size:14px;color:var(--colBlanc);padding:3px;border:0;border-bottom:1px solid var(--colBlanc)}
				.blocLogInput input::placeholder{font-size:13px;color:var(--colBlanc)}
			.blocLogSubmit{width:100%;margin:0 auto;padding:var(--space-8) 0 var(--space-16) 0}
				.blocLogSubmit input[type="submit"]{display:block;margin:0 auto;padding:10px 24px;background-color:var(--colNoirMat);color:var(--colBlanc);text-transform:uppercase;font-size:16px;font-weight:500;transition:var(--transitionBtn)}
				.blocLogSubmit input[type="submit"]:hover{background-color:var(--colShapesLog);color:var(--colBlanc);transition:var(--transitionBtn)}

		.logForgot{flex:0 0 auto;width:100%;padding:8px}
			.logForgot a{display:block;font-size:12px;color:var(--colBlanc);padding:8px;text-align:center}
			.logForgot a:hover{text-decoration:underline}

/* AnimLogin */
.boxs{width:601px;height:771px;font-size:0;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);overflow:hidden}
.boxs .box{position:relative;display:inline-block;width:43px;height:43px;border:2px solid var(--colNoirMat);overflow:hidden}
.boxs .box > span{position:absolute;background-color:var(--colShapesLog)}
.boxs .box > span.carre{width:39px;height:39px}
.boxs .box > span.rond{width:39px;height:39px;border-radius:50%}
.boxs .box > span.coin{transform-origin:top left;width:60px;height:60px;transform:rotate(-45deg)}
.boxs .box > span.sphere{width:39px;height:39px;top:18px;border-radius:50%}
.boxs .box > span.vide{width:39px;height:39px;background-color:var(--colNoirMat)}



/* UI 
========================================================================== */
/* Formulaires */
.blocInput{}
.blocSubmit{}
.blocInput input:invalid, .blocSubmit input:invalid{border-bottom:1px solid var(--colOrBtn)}

button{width:100%;border:1px solid var(--colNoirMat);padding:4px 8px;font-weight:700;font-size:14px}
select{width:100%;border:1px solid var(--colNoirMat);padding:4px 8px;font-weight:500}

/* Paragraphes */
p,.paragraphe{display:block;line-height:1.2;padding-bottom:var(--space-16)}
p strong{font-style:normal;font-weight:700}
p a{text-decoration:underline}
/* Séparateurs */
.separateur{width:100%;padding:2px 0;margin-bottom:var(--space-16);background-image:url(../img/separateur.png);background-repeat:repeat-x;background-position:left center}
.separateur span{border:6px solid var(--colBlanc)}

/* Call to Action */
.cta{display:inline-flex;flex-flow:column nowrap;justify-content:center;align-items:center}
.cta a{flex:0 0 auto;padding:8px 16px;white-space:nowrap;text-transform:uppercase;transition:var(--transitionAll)}
.cta.t16 a{font-size:15px;text-transform:uppercase;font-weight:700}
.cta.t14 a{font-size:13px;text-transform:uppercase;font-weight:700}
.cta.colNoir a{border:2px solid var(--colNoirMat);background-color:var(--colNoirMat);color:var(--colBlanc)}
.cta.colOr a{border:2px solid var(--colOr);background-color:var(--colOr);color:var(--colBlanc)}
.cta.colNoir a:hover{border:2px solid var(--colNoirMat);background-color:var(--colBlanc);color:var(--colNoirMat)}
.cta.colOr a:hover{border:2px solid var(--colOr);background-color:var(--colBlanc);color:var(--colOr)}
.cta a:hover{transition:var(--transitionAll)}
.cta.alone{display:inline-flex;align-items:flex-start;margin:0 6px 6px 0}
.cta.centered{display:flex;align-items:center;margin:0}


/* HEADER
========================================================================== */
body#europnet{background-color:var(--colBlancFond)}
.mainContent{flex:1 0 auto;padding:0 0 var(--space-32) 0}

header{display:block;width:100%;height:auto;background-color:var(--colNoirMat);overflow:hidden}
	.wrapperHeader{width:100%;max-width:1296px;margin:0 auto}
		.flexHeader{display:flex;flex-flow:row nowrap;justify-content:space-between;padding:var(--space-16);align-items:flex-end}
			.logoClient{flex:0 0 auto;margin-right:var(--space-8)}
				.logoClient img{display:block;width:auto;height:100%;max-height:70px}
			.connexion{flex:0 0 auto;margin-left:var(--space-8)}
				.logUser{display:inline-block;vertical-align:middle;font-size:var(--fs-14-13);color:var(--colBlanc);padding:2px var(--space-8);line-height:1.2}
				.logUser br{display:none}
				.logUser span{white-space:nowrap}
				.logOnOff{display:inline-block;vertical-align:middle}
					.logOnOff img{display:block;width:auto;height:100%;max-height:var(--space-24)}


/* MAIN
========================================================================== */
/* Menu */
.blocMenu{display:block;width:100%;height:auto;background-color:var(--colBlancFond);overflow:hidden}
	.wrapperMenu{width:100%;max-width:1296px;padding:var(--space-8);margin:0 auto}
		.navPrincipale{display:flex;flex-flow:row nowrap;padding:var(--space-8) 0;gap:8px;border-bottom:2px solid var(--colNoirMat)}
			.navPrincipale .navItems{flex:0 0 auto}
			.navPrincipale .navItems a{display:inline-block;padding:var(--space-8);text-transform:uppercase;font-weight:500;font-size:var(--fs-15-14);background-color:var(--colBlanc);color:var(--colNoirMat)}
			.navPrincipale .navItems.active a, .navPrincipale .navItems a:hover{background-color:var(--colNoirMat);color:var(--colBlanc);transition:var(--transitionBtn)}

main.wrapperMainTABLEAU {
	width: 95%;
	max-width: 3800px;
	padding: var(--space-8);
	margin: 0 auto
}	
main.wrapperMain{width:100%;max-width:1296px;padding:var(--space-8);margin:0 auto}	
/* Intro de page */
	.flexContentIntro{display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:flex-start;gap:var(--space-16)}
		.validationHeure{flex:0 0 var(--rowA5);padding:var(--space-16)}

	.legendeChamp{display:block;padding:8px 0;font-size:14px;font-weight:700}
	.groupeSelector{display:flex;flex-flow:row nowrap;gap:4px;align-items:center}
		.groupeSelector .rowSelect{flex:1 0 auto}
		.groupeSelector .rowBbutton{flex:0 0 auto}
		.infosRetour{padding:var(--space-8) 0}
		.infosRetour li{padding:2px 0}
		.infosRetour li strong{font-weight:700}

/* Tableau en flex >>> Inspiré d'ECOCLEAN */

.libFlex{display:flex;flex-flow:row nowrap;border-top:1px solid var(--colNoirMat);border-right:1px solid var(--colNoirMat)}
	.libJour,.libHprev,.libHrea,.libHplus,.libHabs,.libHmotif,.libIcox,.libIcoy,.libIcoz{border-bottom:1px solid var(--colNoirMat);border-left:1px solid var(--colBlanc);background:var(--colNoirMat);color:var(--colBlanc);font-size:14px;padding:8px;line-height:1;font-weight:600;text-transform:uppercase}
	.libJour{border-left:1px solid var(--colNoirMat)}
	.libJour{flex:0 1 300px;min-width:80px}
	.libHprev{flex:0 0 120px;text-align:center}
	.libHrea{flex:0 0 120px;text-align:center}
	.libHplus{flex:0 0 120px;text-align:center}
	.libHabs{flex:0 0 120px;text-align:center}
	.libHmotif{flex:1 1 auto;text-align:center;min-width:80px}
	.libIcox{flex:0 0 42px;text-align:center;font-size:12px}
	.libIcoy{flex:0 0 42px;text-align:center;font-size:12px}
	.libIcoz{flex:0 0 42px;text-align:center;font-size:12px}

	.inpJour,.inpHprev,.inpHrea,.inpHplus,.inpHabs,.inpHmotif,.inpIcox,.inpIcoy,.inpIcoz{border-bottom:1px solid var(--colNoirMat);border-left:1px solid var(--colNoirMat);padding:2px}
	.inpJour{border-left:1px solid var(--colNoirMat)}
	.inpJour{flex:0 1 300px;min-width:80px}
	.inpHprev{flex:0 0 120px}
	.inpHrea{flex:0 0 120px}
	.inpHplus{flex:0 0 120px}
	.inpHabs{flex:0 0 120px}
	.inpHmotif{flex:1 1 auto;min-width:80px}
	.inpIcox{flex:0 0 42px}
	.inpIcoy{flex:0 0 42px}
	.inpIcoz{flex:0 0 42px}

	.tabSearch{width:100%;padding:4px 30px 4px 4px;border:1px solid var(--colNoirMat);background:url(../img/svg/ui-tabsearch.svg) no-repeat center right}
	.tabNumb{width:100%;padding:4px;border:1px solid var(--colNoirMat)}
	.tabSelect{width:100%;padding:4px;border:1px solid var(--colNoirMat)}


.rowFlex{display:flex;flex-flow:row nowrap;border-top:1px solid var(--colBlanc);border-right:1px solid var(--colNoirMat);font-weight:500}
	.rowJour,.rowHprev,.rowHrea,.rowHplus,.rowHabs,.rowHmotif,.rowIcox,.rowIcoy,.rowIcoz{border-bottom:1px solid var(--colNoirMat);border-left:1px solid var(--colNoirMat);padding:8px 4px}
	.rowJour{flex:0 1 300px;min-width:80px;text-overflow:ellipsis}
	.rowJour.weekend{color:var(--colOr)}
	.rowHprev{flex:0 0 120px;text-align:right;font-weight:700}
	.rowHrea{flex:0 0 120px;text-align:right;font-weight:700}
	.rowHplus{flex:0 0 120px;text-align:right;font-weight:700}
	.rowHabs{flex:0 0 120px;text-align:right;font-weight:700}
	.rowHmotif{flex:1 1 auto;min-width:80px;text-overflow:ellipsis}
	.rowIcox{flex:0 0 42px;text-align:center;padding:6px 4px 2px 4px}
		.rowIcox img{display:block;margin:0 auto;width:22px;height:auto}
	.rowIcoy{flex:0 0 42px;text-align:center;padding:6px 4px 2px 4px}
		.rowIcoy img{display:block;margin:0 auto;width:22px;height:auto}
	.rowIcoz{flex:0 0 42px;text-align:center;padding:6px 4px 2px 4px}
		.rowIcoz img{display:block;margin:0 auto;width:22px;height:auto}


.rowFlex:nth-child(even){background:#F6F6F6}
.rowFlex:nth-child(odd){background:#fff}
.rowFlex:hover{background:#EEE9E3}

.rowSem{display:flex;flex-flow:row nowrap;font-weight:800;padding:10px 0 6px 0;border-bottom:1px solid var(--colNoirMat);align-items:center}
	.semOpen{flex:0 0 25px;padding:4px}
		.semOpen img{display:block;margin:0 auto;width:20px;height:auto}
	.semLib{flex:1 0 auto}

.rowValidation{display:flex;flex-flow:row nowrap;gap:var(--space-16);align-items:center}
	.validTempo{flex:1 1 auto}
	.validCta{flex:0 0 var(--rowA4);padding:var(--space-16);text-align:right}
	.validLink{flex:0 0 var(--rowA5);padding:var(--space-16);text-align:right}
		.listeLink{display:block}
			.listeLink li{display:block;padding:2px 0;text-align:right}
			.listeLink li a{display:inline-block;font-weight:600;padding:2px}
			.listeLink li a:hover{text-decoration:underline;background-color:#EEE9E3}


/* FOOTER 
========================================================================== */
footer{flex:0 0 86px;background-image:url(../img/fond-footer.jpg);background-repeat:repeat-x;background-position:top center}
	.paraMentions{display:block;padding:58px 0 0 0;font-size:13px;font-weight:600;text-align:center}


/* TRANSITIONS BURGER OK
========================================================================== */
.hamburger{cursor:pointer;transition-property:opacity,filter;transition-duration:0.15s;transition-timing-function:linear;font:inherit;color:inherit;text-transform:none;background-color:transparent;border:0;margin:0;overflow:visible}
.hamburger-box{width:44px;height:36px;padding:0;display:inline-block;position:relative}
.hamburger-inner{display:block;top:50%}
.hamburger-inner,.hamburger-inner::before, .hamburger-inner::after{width:36px;height:3px;background-color:var(--colEthiBleu);border-radius:1px;position:absolute;transition:transform 0.15s ease}
.hamburger-inner::before,.hamburger-inner::after{content:"";display:block}
.hamburger-inner::before{top:-10px}
.hamburger-inner::after{bottom:-10px}
.hamburger--spin-r .hamburger-inner{transition-duration: 0.3s;transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)}
.hamburger--spin-r .hamburger-inner::before{transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in}
.hamburger--spin-r .hamburger-inner::after{transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19)}
.hamburger--spin-r.is-active .hamburger-inner{transform: rotate(-225deg);transition-delay: 0.14s;transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);background-color:var(--colEthiBleu)}
.hamburger--spin-r.is-active .hamburger-inner::before{top:0;opacity:0;transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out;background-color:var(--colEthiBleu)}
.hamburger--spin-r.is-active .hamburger-inner::after{bottom:0;transform: rotate(90deg);transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);background-color:var(--colEthiBleu)}


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




/* min 1296px */
@media screen and (min-width:81em){

}

/* max 1296px */
@media screen and (max-width:81em){
/*.logoClient{background-color:deepskyblue}*/
}

/* max 1024px */
@media screen and (max-width:64em){
/*.logoClient{background-color:mediumpurple}*/
.validTempo{display:none}
.validCta, .validLink{flex:0 0 var(--rowA6)}


}

/* max 960px */
@media screen and (max-width:60em){
/*.logoClient{background-color:tomato}*/
}

/* max 800px BREAK MENU */
@media screen and (max-width:50em){
/*.logoClient{background-color:orange}*/

.validationHeure{flex:0 0 100%}
.groupeSelector{max-width:480px}
.rowValidation{flex-flow:row wrap;gap:0}
.validCta, .validLink{flex:0 0 100%}
.validCta{padding:var(--space-16) 0;text-align:right}
.validLink{padding:var(--space-16) var(--space-24);text-align:right}


}

/* max 768px BREAK connexion + break minimus space */
@media screen and (max-width:48em){
/*.logoClient{background-color:yellow}*/

/* HEADER */
.wrapperHeader{padding:0 4px}
.flexHeader{padding:var(--space-8);align-items:center}
.connexion{text-align:right;padding-right:var(--space-8)}
	.logUser br{display:initial}
	.logUser{vertical-align:bottom;padding-right:var(--space-32)}
	.logOnOff{vertical-align:bottom;padding-bottom:var(--space-8)}

}

/* max 640px */
@media screen and (max-width:40em){
/*.logoClient{background-color:yellowgreen}*/
}

/* max 480px */
@media screen and (max-width:30em){
/*.logoClient{background-color:limegreen}*/
}

/* max 375px */
@media screen and (max-width:24em){
/*.logoClient{background-color:olivedrab}*/
}