
body
{
    margin:0;
    padding:60px 0 0 0;
    width:100%;
    height:100%;
    background-color: #ffffff;
	font-family:Arial;
}

.footer {
	background-color:rgba(248,249,250,0.95);
	width:100%;
	margin:0;
	text-align:center;
	padding:6px 0px;
}

.navbar {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:100;
}
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.navbar-light .navbar-toggler{
  border:none 0px transparent !important;
}

.print {
	display:none;
}

@media print
{
	.print {
		display:block;
		text-align: center;
	}
}

#NUAGE_PAGE
{
    width:calc(100vmin - 10em);
    height:calc(100vmin - 10em);
    position:relative;
    background: linear-gradient(to top left, red, rgba(255, 153, 150, 0), yellow), linear-gradient(to top right, blue, rgba(255, 153, 150, 0), green) rgba(255, 153, 150, 1);
}

.nuage-title
{
    position:absolute;
	text-align:center;
	transform: translate(-50%, -50%);

    font-weight: bold;
	font-family:Arial;
	font-size:2em;
	padding: 0.5vw 2vw;
	width:fit-content;
	border-radius:4vw;
	font-size:calc(max(min(2.4vw,21px),18px));
	margin-top:calc(min(max(-1.2vw,-10.5px),-9px));
}

.nuage-page
{
    transition: top 2s, left 2s, opacity 2s;
    /*transition-timing-function: ease-out;/**/
    transition-timing-function: cubic-bezier(.76,-0.47,0,1.68);/**/
    /*transition-timing-function: cubic-bezier(.16,-0.6,0,1.18);/**/
    position:absolute;
    transform: translate(-50%,-50%);
    cursor:pointer;
    width:max-content;
    height:max-content; 
	font-family:Arial;
	text-align:center;
}

.nuage-page.t1 {
	font-size:calc(max(min(1.2vw,12px),10px));
	margin-top:calc(min(max(-0.55vw,-6px),-5px)/2);
}
.nuage-page.t2 {
	font-size:calc(max(min(1.3vw,13px),11px));
	margin-top:calc(min(max(-0.6vw,-6.5px),-5.5px));
}
.nuage-page.t3 {
	font-size:calc(max(min(1.4vw,14px),12px));
	margin-top:calc(min(max(-0.65vw,-7px),-6px));
}
.nuage-page.t4 {
	font-size:calc(max(min(1.5vw,15px),13px));
	margin-top:calc(min(max(-0.7vw,-7.5px),-6.5px));
}
.nuage-page.t5 {
	font-size:calc(max(min(1.6vw,16px),14px));
	margin-top:calc(min(max(-0.75vw,-8px),-7px));
}
.nuage-page.t6 {
	font-size:calc(max(min(1.8vw,18px),15px));
	margin-top:calc(min(max(-0.8vw,-8.5px),-7.5px));
}
.nuage-page.t7 {
	font-size:calc(max(min(2.0vw,20px),16px));
	margin-top:calc(min(max(-0.9vw,-9px),-8px));
}
.nuage-page.t8 {
	font-size:calc(max(min(2.2vw,22px,17px)));
	margin-top:calc(min(max(-1.0vw,-9.5px,-8.5px)));
}
.nuage-page.t9 {
	font-size:calc(max(min(2.5vw,25px),18px));
	margin-top:calc(min(max(-1.0vw,-10px),-9px)/2);
}
.nuage-page.t10 {
	font-size:calc(max(min(2.8vw,28px),19px));
	margin-top:calc(min(max(-1.15vw,-10.5px),-9.5px));
}

.stacked-radial {
	background: 
		radial-gradient(#face9a, rgba(255,255,255,0));
}
.stacked-radial2 {
    /* version simple
    background:
      radial-gradient(
        circle at 50% 0,
        rgba(255, 0, 0, 0.5),
        rgba(255, 0, 0, 0) 70.71%
      ),
      radial-gradient(
        circle at 6.7% 75%,
        rgba(0, 0, 255, 0.5),
        rgba(0, 0, 255, 0) 70.71%
      ),
      radial-gradient(
          circle at 93.3% 75%,
          rgba(0, 255, 0, 0.5),
          rgba(0, 255, 0, 0) 70.71%
        ) beige;
    border-radius: 50%;
    /* Version avec les couleur plus marquées*/
    background:
        radial-gradient(
            circle at 50% 0,
            rgba(255, 0, 0, 0.5),
            rgba(255, 0, 0, 0.5),
            rgba(255, 0, 0, 0) 70.71%
        ),
        radial-gradient(
            circle at 6.7% 75%,
            rgba(0, 0, 255, 0.5),
            rgba(0, 0, 255, 0.5),
            rgba(0, 0, 255, 0) 70.71%
        ),
        radial-gradient(
            circle at 93.3% 75%,
            rgba(0, 255, 0, 0.5),
            rgba(0, 255, 0, 0.5),
            rgba(0, 255, 0, 0) 70.71%
        ) beige;
    border-radius: 50%;
    width:calc(100vmin - 10em);
    height:calc(100vmin - 10em);
    position:relative;
}
  
 .nuage-tooltip {
	# background-color:rgba(255,255,255,0.95);
	# backdrop-filter: blur(6px);
	# font-family:Arial;
	# padding:0.8vw;
	# border-radius:0.8vw;
	# max-width:50%;
 }
 
 .nuage-tooltip h1{
	 font-size:calc(max(10px,min(15px,2vw)));
	 margin-top:0;
 }
 
 .nuage-tooltip p{
	 font-size:calc(max(8px,min(12px,1.5vw)));
 }
 
 #CV h1 {
	 text-align:center;
	 font-size:calc(max(1.6vw,15px));
	 #background-color:#CCC;
	 border-bottom:solid 3px #000;
	 clear:both;
	margin:calc(10px + 0.5vw);
	margin-top: 2.5em;
	#border-radius:25px;
	#margin:10px 0;
 }
 
 #CV li {
	 clear:both;
	 list-style-type:none;
	 margin-bottom:20px;
	 padding:0 0 0 20px;
 }
 
 #CV .info {
	 width:calc(80px + 9vw);
	 max-width:30%;
	 float:left;
	 clear:both;
	 padding:0;
	 margin:0 0 10px 0;
	 text-align:right;
 }
 
 #CV h2 {
	 font-size:calc(max(1.4vw,13px));
	 clear:both;
	 padding:0;
	 margin:0;
	 text-align:right;
 }
 
 #CV .info .date {
	 font-size:calc(max(1.1vw,10px));
	 font-weight:lighter;
	 text-align:right;
 }
 
 #CV .info .picto {
	 max-height:60px;
	 max-width:calc(min(60px,90%));
 }
 
 #CV .desc {
	 font-size:calc(max(1.2vw,11px));
	 border-left:solid 2px #CCC;
	 margin-left:calc(100px + 9vw);
	 padding-left:10px;
	 padding-right:calc(10px + 0.5vw);
	 margin-bottom:cacl(20px + 0.5vw);
 }
 
  #CV a.detail {
	  float:right;
	  padding:10px;
	  font-size:70%;
	  text-decoration:italic;
  }
  
  
  .page-detail {
	  width:100%;
	  max-width:1200px;
	  margin:auto;
  }
  
  .page-detail .bloc {
	position:relative;
	  margin:calc(max(5vw,40px)) 5%;
	  padding:5%;
	  border:solid 1px #DDD;
	  box-shadow:1px 1px 15px #888;
	  background-color:#FFF;
  }
  
.page-detail .bloc .spirale {
	position:absolute;
	top:-24px;left:5px;
	width:100%;
	height:50px;
	margin:0;
	 background-repeat:repeat-x;
	  background-position:50% 50%;
	  background-image:url(img/page/spirale.png);
	 opacity:0.8;
  }
  
  .page-detail .bloc h2{
	  margin-top:0;
  	  color:#3a3bb3;
  }
  
    .page-detail .bloc h2, .page-detail .bloc h3{
  	  color:#3a3bb3;
	}
	
.page-detail .bloc h3{
	  padding-top:15px;
  }
  
  .page-detail .bloc h3 img{
	  height:50px;
	  margin-top:-15px;
	  #margin-bottom:-15px;
	  margin-right:5px;
  }

.page-detail .bloc label.img{
	display:block;
}
.page-detail .bloc .photo {
	padding:2%;
	background-color:#FFF;
	border:solid 1px #DDD;
	box-shadow:1px 1px 15px #888;
	width:30%;
	height:auto;
	margin-left:3%;
	margin-bottom:3%;
	#float:right;
	transition: all 1s;
	cursor:zoom-in;
}
.photo.right {
	float:right;
}

.photo.left {
	float:left;
}
.photoP
{
	transform:rotate(5deg);
}
.photoN
{
	transform:rotate(-5deg);
}

#btnControl1, #btnControl2, #btnControl3 {
    display: none;
}

#btnControl1:checked + label > img,
#btnControl2:checked + label > img,
#btnControl3:checked + label > img {
    width: 96%;
	transform: rotate(0deg);
	cursor:zoom-out;
}

.page-detail .titre {
	text-align:center;
}
.page-detail .titre h1 {
	background-color:#FFF;
	color:#024dcc;
	#border:solid 4px #024dcc;
	padding:1vw;
	margin:1vw 5%;
	border-radius:6px;
	box-shadow:5px 5px 15px #CCC;
}

#.page-detail .titre h1::before {
#	content:' ';
#	background-image:url(img/page/punaise_on.png);
#	background-repeat:no-repeat;
#	width:35px;
#	height:35px;
#	display:inline-block;
#	float:left;
#}
#.page-detail .titre h1::after {
#	content:' ';
#	background-image:url(img/page/punaise_on.png);
#	background-repeat:no-repeat;
#	width:35px;
#	height:35px;
#	display:inline-block;
#	float:right;
#}


.page-detail .lien {
	position:relative;
	display:inline-block;
	vertical-align:center;
	margin:10px 20px;
	box-shadow:4px 4px 10px #CCC;
	transition: box-shadow 0.3s ease-in-out;
}
  
.page-detail .lien:hover {
	box-shadow:8px 8px 15px #999;
	transition: box-shadow 0.3s ease-in-out;
}
.page-detail .lien .lib {
	height:58px;
	display:inline-block;
	vertical-align:center;
	padding:6px 20px 0 40px;
	#border:solid 4px #CCC;
	#border-radius:6px;
	font-family:Arial;
	font-size:32px;
	font-weight:bold;
	background-color:#FFF;
	z-index:0;
}
 
.page-detail .lien .right {
	display:inline-block;
    width: 0;
    height: 0;
    
    #border-top: 23px solid transparent;
    #border-bottom: 23px solid transparent;
    #border-left: 23px solid #f7df6c;
	background-image:url(img/page/trombonne2.png);
	background-repeat:no-repeat;
	background-size:80%;
	width:70px;
	height:80px;
	margin:-12px 0 0 -10px;
	
	position:absolute;
	left:0;
	top:7px;
}  

.page-detail .lien.l1 .lib {
	#background-color:#FDDFF1;
	background-color:#FAB2DE;	
	color:#3a3bb3;
}
.page-detail .lien.l1:hover .lib {
	background-color:#F557B8;
}
.page-detail .lien.l1 .right {
    border-left-color: #F557B8;
}
  
.page-detail .lien.l2 .lib {
	#background-color:#FFE9DB;
	background-color:#FEC9A9;
	color:#3a3bb3;
}
.page-detail .lien.l2:hover .lib {
    background-color: #FD8944;
}
.page-detail .lien.l2 .right {
    border-left-color: #FD8944;
}
  
.page-detail .lien.l3 .lib {
	#background-color:#F8FED9;
	background-color:#EEFDA2;
	color:#3a3bb3;
}
.page-detail .lien.l3:hover .lib {
    background-color: #D9FA35;
}
.page-detail .lien.l3 .right {
    border-left-color: #D9FA35;
}
  
.page-detail .lien.l4 .lib {
	#background-color:#E5FEDA;
	background-color:#BFFDA6;
	color:#3a3bb3;
}
.page-detail .lien.l4:hover .lib {
    background-color: #75FB3D;
}
.page-detail .lien.l4 .right {
    border-left-color: #75FB3D;
}
  
.page-detail .lien.l5 .lib {
	#background-color:#DBEEFF;
	background-color:#A8D5FF;
	color:#3a3bb3;
}
.page-detail .lien.l5:hover .lib {
    background-color: #43A4FF;
}
.page-detail .lien.l5 .right {
    border-left-color: #43A4FF;
}

.page-detail .lien .trombonne
{
	position:absolute;
	top:-7px;
	left:-10px;
	height:58px;
}
.page-detail .lien .trombonne img
{
	height:100%;
	position:absolute;
	transition: transform 0.3s ease-in-out;
}
.page-detail .lien:hover img
{
	transform:
		rotate(-30deg)
		translate(10px,-30px);
}




#CV .liste li {
	list-style-type:disc;
	margin-top:0;
	margin-bottom:0;
	padding:0;
	clear:unset;
}
  
  
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: #FFF !important;
}

.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-left-color: #FFF !important;
}

.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-right-color: #FFF !important;
}

.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-bottom-color: #FFF !important;
}

.tooltip-inner {
	color:#000 !important;
	background-color:#FFF !important;
	border-radius:8px !important;
	box-shadow:1px 1px 15px #888;
}

.tooltip{
	opacity:0.95 !important;
}

.tooltip h1{
	font-weight:bold;
}

.tooltip .dates {
	font-size:80%;
	color:#777;
	padding-bottom:0.5em;
}


h4{
	font-weight: bold;
	font-size:1.2em;
}