:root {
	--cb-hue:240;	
	--cb-sat:95%;
	--cb-lit:15%;
	--cb-hue-mod:0;
  --color:hsl(260, 95%, 15%);
	--color-name1:hsl(calc(var(--cb-hue) + var(--cb-hue-mod) + 30 )/* 240*/ , 100%, 50%); 
	--color-name2:hsl(calc(var(--cb-hue) + var(--cb-hue-mod) + 30 )/* 240*/ , 75%, 75%); 
	--color-main-title:hsl(calc(var(--cb-hue) + var(--cb-hue-mod) - 170 ) /*60*/, 75%, 90%);
	--color-subtitle:hsl(calc(var(--cb-hue) + var(--cb-hue-mod) - 190) /*40*/, 50%, 60%);
	--color-subtitle_:hsl(240, 75%, 75%);
	--color-bg1:hsl(calc(var(--cb-hue) + var(--cb-hue-mod) - 0) /*210*/, 40%, 15%);
	--color-bg2:hsl(calc(var(--cb-hue) + var(--cb-hue-mod) - 30) /*190*/, 20%, 55%);
	--color-sub:hsl(calc(var(--cb-hue) + var(--cb-hue-mod) - 30) /*210*/, 70%, 30%);
	--color-sub_b:hsl(calc(var(--cb-hue) + var(--cb-hue-mod) - 10) /*230*/, 90%, 60%);
	--color-side-strong:hsl(calc(var(--cb-hue) + var(--cb-hue-mod) - 200) /*40*/, 90%, 60%);
	
	--color-main-bg:hsla(0, 0%, 90%, 0.50);
	--color-main-header:hsl(210, 45%, 90%);
	--color-main-label:hsl(210, 45%, 40%);
	--color-main-soc:hsl(0, 46%, 40%);
	--color-work:hsl(calc(var(--cb-hue) + var(--cb-hue-mod) - 190) /*50*/, 80%, 94%);
	--color-tech:hsl(120, 50%, 40%);
	--color-tech_a:hsla(120, 50%, 40%, 20%);
	--color-func:hsl(345, 85%, 50%);
	--color-subline-hov:hsla(calc(var(--cb-hue) + var(--cb-hue-mod) - 180) /*60*/, 30%, 70%, .2);
	--color-details:hsla(0, 0%, 90%, 0.80);
	--color-sub-disp:hsla(0, 0%, 90%, 0.2);

	--color-gauge-bg:hsl(calc(var(--cb-hue) + var(--cb-hue-mod) + 180) /*50*/, 35%, 80%);
	--color-gauge-sh: hsla(0, 70%, 25%, 0.5);
	--color-gauge:hsl(calc(var(--cb-hue) + var(--cb-hue-mod) - 30) /*210*/ , 90%, 15%);
	--color-gauge-legend:hsl(calc(var(--cb-hue) + var(--cb-hue-mod) + 30) /*270*/, 90%, 20%);

	--zoom-mod:1;
	--print-mod:1;
	--size-mod:calc(var(--zoom-mod) * var(--print-mod) );
	--fs-CV:calc(var(--size-mod) * 16px);
	--fs-title:calc(var(--size-mod) * 22px);
	--fs-subtitle:calc(var(--size-mod) * 20px);	
	--fs-header:calc(var(--size-mod) * 18px);	
	--fs-gauge:calc(var(--size-mod) * 13px);
	--fs-gauge-lg:calc(var(--size-mod) * 12px);
	--fs-CV:calc(var(--size-mod) * 80%);
	--fs-title:calc(var(--size-mod) * 150%);
	--fs-subtitle:calc(var(--size-mod) * 110%);	
	--fs-cat:calc(var(--size-mod) * 120%);
	--fs-header:calc(var(--size-mod) * 115%);
	--fs-gauge:calc(var(--size-mod) * 80%);
	--fs-gauge-lg:calc(var(--size-mod) * 70%);	
}

body{display:flex;justify-content:space-around;margin:0;padding:5px;}
#cv{max-width:1200px; position:relative;margin:0;min-height: 100vh; font-family: 'Montserrat', sans-serif;font-size: var(--fs-CV);letter-spacing: 0.10em;line-height: 180%;
		background:white;box-shadow:  2px 2px 4px rgba(0, 0, 0, 0.50);}
#page1{display:flex;flex-direction:row ;background:var(--color-bg1); color:white;
			background: linear-gradient(to bottom right, var(--color-bg1) 0%, var(--color-bg2));}
#pageNext{padding:0px 8px;}
	#side_bar{width:calc(var(--size-mod) * 300px);box-sizing: border-box;padding:4px;background:transparent;}
	#portrait{margin:8px; display:flex;flex-direction: column;align-items:center;}
	#nom{color:var(--color-main-title);letter-spacing: 0.15em;font-size: var(--fs-header);text-shadow: 1px 1px 2px black, 0 0 0.4em var(--color-subtitle);}
	#photo{width:calc(var(--size-mod) * 180px);border-radius:calc(var(--size-mod) * 60px);margin:calc(var(--size-mod) * 12px);
		box-shadow:  0 calc(var(--size-mod) * 25px) calc(var(--size-mod) * 20px) calc(var(--size-mod) * -10px) rgba(0, 0, 0, 80%);}
	.side_title{font-size: var(--fs-header);font-weight: bold;letter-spacing: 0.15em;margin:calc(var(--size-mod) * 16px) 0px 4px 0px;
		color:var(--color-name2);text-shadow: 1px 1px 2px black, 0 0 0.2em var(--color-name1);}
	.side_line{min-height:calc(var(--size-mod) * 28px); padding:4px;margin-bottom:1px;display:flex;align-items:center}
	.side_line:hover{background:var(--color-subline-hov);}
	.side_line_sub{background:var(--color-sub);border-style: solid; border-width:1px ; padding:0px;position: absolute;display: none;z-index: 3;}
	.side_line_sub_b{min-width:calc(var(--size-mod) * 10px);background:var(--color-sub_b);} 
	.side_line_sub_t{margin:6px;text-align:justify;}
	.side_logo{margin-right:4px;}
	.side_strong{color:var(--color-side-strong);font-weight:700;}
	.star{width:calc(var(--size-mod) * 18px);height:calc(var(--size-mod) * 18px);}
	.side_text{flex:1;}
	.side_img{max-height:calc(var(--size-mod) * 32px);width:auto;margin: 0; position: relative;}
	
			
	main{flex:1; padding:calc(var(--size-mod) * 12px) 0px 0px 20px;}
	main section {margin:5px calc(var(--size-mod) * 60px) 15px calc(var(--size-mod) *20px);}
	#header{display: flex; flex-direction: column;align-items: center;}
	main #header {margin:0px 0px calc(var(--size-mod) * 16px) 0px}
	.title{text-align: center;letter-spacing: 0.15em;margin:4px 0px 4px 0px;color:var(--color-main-title);font-size: var(--fs-title);font-weight: bold;text-shadow: 1px 1px 2px black, -1px -1px 2px white;}
	.sub_title{text-align: center;letter-spacing: 0.15em;margin:4px 0px 4px 0px;color:var(--color-subtitle);font-size: var(--fs-subtitle);text-shadow: 1px 1px 2px black, -1px -1px 2px white;}
	.sub_desc{text-align: center;font-size:var(--fs-subtitle);font-style: italic;}
	.main_group{ }
	.main_group_header{ display:flex;flex-direction:row;margin:calc(var(--size-mod) * 20px) 0px 4px 0px;}
	.main_group_title{flex:1;font-size:var(--fs-header);font-weight: bold; letter-spacing: 0.2em;
		color:var(--color-name2);text-shadow: 1px 1px 2px black;}
	.hdr_main_group_title{flex:1;font-size:var(--fs-header);letter-spacing: 0.1em;color:var(--color-main-title);text-shadow: 1px 1px 2px var(--color-name2);}
	
	.main_item{ border-width:0px ; background-color:var(--color-main-bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
		z-index: 0;padding:3px;margin: calc(var(--size-mod) * 16px) 0 6px 0;}
	.hdr_main_item{ background: unset;color:white;font-size: var(--fs-header);box-shadow: none;}
	.main_line{margin:2px 0px 2px 0px;display: flex;flex-direction: row;}
  .group_cat{text-align: center;color:gold;font-size: var(--fs-cat);border-bottom: 1px solid gold;
    margin-bottom: 6px; padding-bottom: 2px;}
	.main_label{min-width:calc(var(--size-mod) * 180px);color:var(--color-main-label);padding-left:3px;}
	.hdr_main_item .main_label{color:var(--color-side-strong);text-align:left;font-style: italic;}

	.main_header_{flex:1;display: flex;flex-direction: column;}
	.main_header{flex:1;display: flex;flex-direction: row;}
	.main_soc{font-weight: bold;color:var(--color-main-soc);}
	.main_where{color:var(--color-main-soc);}
	.main_poste{font-weight: bold;flex:1;text-align: right;}
	.main_poste_desc{text-align:justify;}
	.tech{color:var(--color-tech);}
	.func{color:var(--color-func);}
	.work_desc{padding:0px;background:var(--color-work);border-style: solid; border-width:1px ; position: absolute;display: none;z-index: 2;
		margin:0 calc(var(--size-mod) * 12px) calc(var(--size-mod) * 16) calc(var(--size-mod) * 12px);}
	.main_line_sub_b{width:1px;background:var(--color-sub-b);} 
	.main_line_sub_t{margin:6px;text-align:justify; width: 100%; display: inline;} 
	.hdr_work_desc {background-color: transparent;margin:0 0 calc(var(--size-mod) * 14px) calc(var(--size-mod) * 8px);}
	.hdr_work_desc .main_line_sub_t{background-color: transparent;}
	time{margin-left:auto;margin-right:8px; text-align: right;color: #70A0DB;}
	.print{display:none;}
	.date_diff{display:block;}
	ul{margin:0 0 0 4px;padding:0 0 0 10px;} 
	
	.sub_disp time{margin-right:8px;float:right; text-align: right;color: #70A0DB;}
	.work_desc.sub_disp {position: static;display: flex; border:none;background-color:var(--color-sub-disp);z-index:0;}
	.sub_disp .main_line_sub_b{min-width:1px;z-index:-1;}
	.sub_disp .main_line_sub_t{margin: 0px 6px; padding: 0px 0px 2px;}
	.sub_disp .date_diff+div{position:relative;top:-10px;}
	.sub_disp.blank {background: none;border:none;}
	.sub_disp.blank .main_line_sub_b {background-color: transparent;}
	.sub_disp .main_line_sub_t time {z-index: 2;width: fit-content;float: right;margin: 0 0 0 10px;padding:2px 4px;position:relative;top:-8px; background-color: var(--color-details); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);}
	
	.has_sub_line:not(.disp_details):hover{background:var(--color-subline-hov);}
	
	.skills{display:grid;grid-template-columns: 1fr calc(var(--size-mod) * 100px) 1fr calc(var(--size-mod) * 100px);
		margin:10px 10px 0  10px;align-content: stretch;}
	.skill{display:flex;flex-wrap: wrap;    align-items: baseline;justify-content: space-between;}
	.skills >*:nth-child(4n+2) {}
	.skills >*:nth-child(2n) {padding-right:5px;height: auto;}
	.skills >*:nth-child(4n+3) {border-left: 1px solid hsl(0, 0%, 75%); padding-left:5px;}
	.skills >*:nth-child(n+4) {border-top: 1px solid hsla(0, 0%, 75%, 30%);}
	.skills >*:nth-child(1) {border-top: 0px ;}
	.skills >*:nth-child(3) {border-top: 0px ;}

	.skill_label{white-space: nowrap;color:var(--color-func);padding-right:4px;}
	.techno {display:inline-block; height:fit-content; white-space: nowrap;background-color:var(--color-details);border-radius: 3px;
		padding:0px 2px;margin:0 4px 1px 0px;
		border:1px solid var(--color-tech-50);
		position: relative;
		line-height: 150%;
    color:var(--color-tech); font-size:var(--fs-gauge-lg);}

	.skillLevel {display: flex;width:calc(var(--size-mod) * 90px);}
	.skillGaugeLevel {
    position: relative;
    height: calc(var(--size-mod) * 18px);
    background: var(--color-gauge-bg);
    border-radius: 5px;
		box-shadow: 0 1px 2px var(--color-gauge-sh);
	}
	.skillGaugeLevel__gauge {
    background: var(--color-gauge);
		border: white 1px;
    border-radius: 5px;
		color: white;
    font-size: var(--fs-gauge);
    line-height: 130%;
		text-align: right;
    box-sizing: border-box;
		height: calc(100% - 2px);
		margin:1px;
		padding-right: 2px;
}

.skillLevel__legend , .techno_detail_score{
	pointer-events: none;
	transition: opacity 0.5s;
	opacity: 0;
	position: absolute;
	left: auto;
	right: 0;
	transform: translateX(0);
	bottom: calc(100% + 1px);
	background: var(--color-gauge-legend);
	box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.5);
	border-radius: 5px;
	color: white;
	font-size: var(--fs-gauge-lg);
	font-weight: 300;
	box-sizing: border-box;
	z-index: 1;
	word-break: keep-all;
	padding: 1px 4px 0 4px;
	margin-right:5px;
	min-height: calc(var(--size-mod) * 19px);
}
.side_line:hover .skillLevel__legend, .skillLevel__legend:hover ,
.skill:hover + .note .skillLevel__legend, .note:hover .skillLevel__legend  
{opacity: .9}
.skill:hover .skill_label {text-decoration:underline ; background-color: var(--color-sub-disp);}
.skill:hover + .note {background-color: var(--color-sub-disp);}
.techno:hover .techno_detail_score {opacity: .9;}


.frame-LinkGroup {padding-top: .2rem;}
.frame-Links {display: grid; grid-template-columns: 1fr 4fr; padding-bottom: .2rem; }
.frame-Links .URL{display: grid; grid-column: span 2; color:navy;text-decoration:none;text-decoration-thickness: 0.3px;text-underline-offset:3px;}

.nbp {font-size: smaller;line-height: 120%; display: flex; flex-wrap: wrap;margin-top: 4px;}
.nbp div {margin-right: 20px;}
.flexlist_v {display:flex;flex-direction:column;margin:0px 16px 0px 4px;}
.flexlist {display:flex; flex-direction:row; flex-wrap: wrap;}
.flexlist div {margin-right: 20px;}
.bold {font-weight: bold;}
.grid {display: grid;  grid-template-columns: 1fr 1fr 1fr;}
.grid_header{background: #A804;padding: 2px;}
.grid_content{background: #A801;padding: 2px;}
@page :first { margin:0 }
@page {
	size: A4;
	margin: 5mm 0;
}


	@media print 
	{
		:root {
			--print-mod:calc(210 / 318); 
			--fs-gauge:calc(var(--size-mod) * 110%);
		}
		
		body{padding:0px !important;}
		#cv{width:210mm;height:296mm;letter-spacing: 0.06em;box-shadow:none !important;}	

		.noprint{display:none;}
		.print{display:inline;}

		article, .nobreak, .work_desc {break-inside: avoid;}

		* {
			-webkit-transition: none !important;
			transition: none !important;
			orphans: unset;
			widows: unset;
			}			
	}