:root {
	--cb-hue:240;	
	--cb-sat:100%;
	--cb-lit:50%;
	--cb-hue-mod:0;

	--color-name1:hsl(calc(var(--cb-hue) + var(--cb-hue-mod)),var(--cb-sat),var(--cb-lit)); /* hsl(240, 100%, 50%); */
	--color-name2:hsl(calc(var(--cb-hue) + var(--cb-hue-mod)),var(--cb-sat),calc(var(--cb-lit) - 25%)); /* hsl(240, 100%, 25%); */
	--color-main-title:hsl(calc(var(--cb-hue) + var(--cb-hue-mod) - 50 ) /*190*/, 75%, 50%);
	--color-subtitle:hsl(calc(var(--cb-hue)+var(--cb-hue-mod) - 160) /*80*/, 40%, 40%);
	--color-bg1:hsl(calc(var(--cb-hue) + var(--cb-hue-mod) - 30) /*210*/, 60%, 65%);
	--color-bg2:hsl(calc(var(--cb-hue) + var(--cb-hue-mod) - 50) /*190*/, 50%, 90%);
	--color-sub:hsl(210, 100%, 90%);
	--color-sub_b:hsl(206, 55%, 80%);
	--color-side-strong:hsl(calc(var(--cb-hue) + var(--cb-hue-mod) - 200) /*40*/, 90%, 60%);
	
	--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(55, 100%, 90%, 0.60);
	--color-sub-b:hsl(30, 50%, 90%);
	--color-details:hsla(0, 0%, 95%, 60%);
	--color-sub-disp:hsla(0, 0%, 80%, 0.3);

	--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) * 80%);
	--fs-title:calc(var(--size-mod) * 150%);
	--fs-subtitle:calc(var(--size-mod) * 130%);	
	--fs-cat:calc(var(--size-mod) * 120%);	
	--fs-header:calc(var(--size-mod) * 110%);
	--fs-gauge:calc(var(--size-mod) * 70%);
	--fs-gauge-lg:calc(var(--size-mod) * 70%);
}

.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 calc(var(--size-mod) * 16px) 0px 4px;}
.flexlist {display:flex; flex-direction:row; flex-wrap: wrap;}
.flexlist * {margin-right: 20px;}
.bold {font-weight: bold;}

body{display:flex;justify-content:space-around;margin:0;padding:5px;}
#cv{position:relative;margin:0;min-height: 100vh; max-width:1200px;font-family: Arial;font-size: var(--fs-CV);letter-spacing: 0.06em;
	background:white;box-shadow:  2px 2px 4px rgba(0, 0, 0, 0.50);}	
#page1{display:flex;flex-direction:row;}
	#side_bar{width:calc(var(--size-mod) * 240px);min-height:100vh;box-sizing: border-box;padding:4px;background:var(--color-bg1);
	background: linear-gradient(to bottom right, var(--color-bg1) 0%, var(--color-bg2));}
	#portrait{margin:8px; display:flex;flex-direction: column;align-items:center;}
	#nom{color:white;letter-spacing: 0.1em;font-size: var(--fs-header);text-shadow: 1px 1px 2px black, 0 0 1em var(--color-name1), 0 0 0.2em var(--color-name2);}
	#photo{width:calc(var(--size-mod) * 150px);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 white, 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{padding:calc(var(--size-mod) * 12px) 0px 0px 20px;}
	main section {padding:0px calc(var(--size-mod) * 10px) 0px calc(var(--size-mod) * 4px);}
	#header{display: flex; flex-direction: column;align-items: center;}
	.title{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{letter-spacing: 0.15em;margin:4px 0px calc(var(--size-mod) * 16px) 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-CV);font-style: italic;}
	.main_group{ display:flex;flex-direction: column;}
	.main_group_header, .hdr_main_group_header{ display:flex;flex-direction:row;margin:calc(var(--size-mod) * 16px) 0px 4px 0px;}
	.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);}
	.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);}
  .group_cat{text-align: center;color:gold;font-size: var(--fs-cat);border-bottom: 1px solid gold;
    margin-bottom: 6px; padding-bottom: 2px;}
  .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) * 4px) 0 calc(var(--size-mod) * 6px) 0;}
	.hdr_main_item{ background: unset;font-size: var(--fs-header);box-shadow: none;margin-bottom:6px;}
	.hdr_main_item:hover{background-color: transparent;}
	.main_line{margin:2px 0px 2px 0px;display: flex;flex-direction: row;}
	.main_label, hdr_main_item, .main_label_grd{min-width:calc(var(--size-mod) * 180px);color:var(--color-main-label);padding-left:3px;}
  .main_label_grd{min-width:0;width: min(17.5vw,calc(var(--size-mod) * 180px));}
	.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);}
	.has_sub_line:hover{background:var(--color-subline-hov);}
	.work_desc, .hdr_work_desc {position: static;display: flex; border:none;background-color:var(--color-sub-disp);margin-bottom: calc(var(--size-mod) * 6px);}
	.main_line_sub_b{width:10px;background:var(--color-sub-b);} 
	.disp_details + .work_desc .main_line_sub_b {width:1px;}
	.main_line_sub_t{margin:2px;text-align:justify; width: 100%;
		 display: inline-block;} 
	.date_diff{margin-left:auto;margin-right:8px; text-align: right;color: #70A0DB;display: block;}
	.print{display:none;}
	ul{margin:0 0 0 4px;padding:0 0 0 20px;} 

	.grid {display: grid;  grid-template-columns: 1fr 1fr 1fr;}
.grid_header{background: #A804;padding: 2px;}
.grid_content{background: #A801;padding: 2px;}

	.disp_details:hover{background:hsl(0, 0%, 90%); }
	.disp_details{ border-width:0px ; background-color:var(--color-details); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);z-index: 0;margin: calc(var(--size-mod) * 16px) 0 0 0;}
	.disp_details:first-child {margin:0;}
	.sub_hover {padding:0px;background:var(--color-work);border-style: solid; border-width:1px ; position: absolute;display: none;z-index: 2;}
	.no_border{box-shadow: none;}
	
	.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 {opacity: .5}
	
#page2{padding:calc(var(--size-mod) * 12px) 0px 0px 20px;}
.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;}

@page :first { margin:0 }
@page {
	size: A4;
	margin: 5mm 0;
}
@media screen (max-width: 1000px) 
{
	#cv{max-width:95vw;}
}
	@media print 
	{
		:root {--print-mod:calc(210 / 318); }

		body{padding:0px !important;}
		#cv{width:210mm;height:296mm;letter-spacing: 0.06em;box-shadow:none !important;}	

		main{padding:0;}
		.sub_title{margin: 0px 0px calc(var(--size-mod) * 8px) 0px;}
    .main_item{box-shadow: none;margin: calc(var(--size-mod) * 10px) 0px calc(var(--size-mod) * 6px) 0px;padding: 1px 3px;border-top: 1px;}
		.main_group_header {margin: calc(var(--size-mod) * 16px) 0px calc(var(--size-mod) * 4px) 0px;}
		main section{padding:0 2px;}
		.main_group {display: block;}
		article, .nobreak, .work_desc {--break-inside: avoid;}
		.disp_details {background:none;}
		.work_desc {background:hsla(0,0,0,5%);}
		.noprint{display:none;}
		.print{display:inline;}

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