/* --------------------------------------------------------------

   layout.css + animation
   ->Disposition des blocs principaux cf grid.css

-------------------------------------------------------------- */


/* Elements principaux
------------------------------------------ */
html,body {
    min-height: 100vh;
    overflow-x: hidden;
  }
body > label, body > input {
	display:none;
}
* {
/*   outline: 1px dotted var(--primaryColor50); */
}
input#aside-checkbox, input#formTab, input#mapTab, input#searchTab,input#overlay-checkbox, input#asideOverlay, label.header-label { 
	display: none; 
}
#contenu {
}
#nav {
/* 	z-index: 10; */
}
.main {
	z-index:5;
	padding-bottom: 5em;
}
.main>.container{
	padding-top:0 ;/* 5vw */
	min-height:70vh;
}

article div , header, details {
	padding: var(--container_padding);
}
article div:not(fullWidth) , details {
	max-width:  var(--MaxWidthContainerSize);
	margin: 0 auto;
}
#canvas_container .chapo {
	position: absolute;
}

article .chapo p {
	margin-bottom:0;
}
article span.chapo {
	display:block;
	padding: 0;
}
.rubDescriptif {
	margin-top:-20px;
}
header {
/* 	padding-top: calc(var(--container_padding)* 4); */
}
header>.container>.titre {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	z-index: 2;
	margin-bottom: -46px;
	margin-top: -20px;
}
header>.container>.titre .rotateTitel{
	margin-left: -5px;
	z-index: 7;
	font-size: 300%;
}
header>.container>.titre .rotateTitel::first-letter {
    padding-left: 0em;
    }
header>.container>.titre svg {
/*
	width:270px;*/
	max-height:330px;
	opacity:1;
	

}
header>.container>.titre .on svg  {
	fill: var(--white-100);
	}
header>.container>.titre .on svg:hover  {
	fill: var(--white-100);
	stroke: var(--white-100);
	}
header>.container>.titre>.svg_wrapper {
	z-index: 6;
	min-width: 270px;
	min-height:220px;
	}
/* ----preventing layout shifts---- */
header>.container>.titre>.svg_wrapper svg {
height:200px;
	}
#aside {
	opacity:0;/* IMPORTANT animation */
	padding:0;
	border-right: 3px solid var(--primaryColor);
	hyphens: auto;
	/* Grid fallback */
	position: absolute;
	z-index:-1;
	top:0;
	left:0;
	width:375px;/* iPhone SE */
/* 	mix-blend-mode: multiply; */
	box-shadow: 4px -3px 1em 3px var(--basicShadow);
}
.overlay_header {
	position : -webkit-sticky;
	position: sticky;
	top: 0;
	overflow: hidden;
}

#nb1, #nb2, #nb3, #nb2, #nb5, #nb6, #nb7, #nb8, #nb9, #nb10 {
	margin-top: -200px;
  padding-top: 200px;
}
.asideTabs_header, .overlay_header, #nav {
	padding: calc(var(--basicSvgSize) / 3 ) calc(var(--basicSvgSize) / 2 ) 0 calc(var(--basicSvgSize) / 4 ); /* align nav aside + main */
	}
/* Grid fallback */
.asideTabs_header {
		display:table;
		width: 100%;
		}
.asideTabs_header label {
	text-align: center;
	border-radius: 0.5em 0.5em 0 0;
	/* Grid fallback */
	display: table-cell;
}
.asideTab.form .phone, .asideTab.form .mail{
	margin:1em 0 0 1em;
}
.asideTabs_container .asideTab {
	padding: calc( var(--basic-padding) * 0.55 + 1vw);
}
.asideTabs_container>div {
	display:none;
}
.form {
}
.map {
}
.asideTab.map dl{
	margin: 0.4em 0 0em 0.4em;
	
}
.asideTab.map input {
	display: inline;
}
.search{
}
.close {
	text-align: center;
	margin-left:15px;
}
.home ul {
	margin-bottom: 0.5em;
}
#vignette  {
	position: fixed;
    left: 0;
    top:10vh;
    width: auto;
    text-align: center;
    z-index: 100;
    background-color: var(--white-90);
    overflow: visible;
    padding: 0.5em 0.2em 0.5em 0em;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    border-color: var(--bulleBorderColor);
    border-width: var(--bulleBorderWidth) var(--bulleBorderWidth) var(--bulleBorderWidth) 0em;
    border-style: solid;
    transition: padding 0.3s ease-in-out;
    writing-mode: vertical-rl;
    box-sizing: border-box: 
}

#vignette:hover {
	padding: 0.5em 0.2em 0.5em 0.5em;
	background-color: var(--white-100);
	border-color: var(--primaryColor);
	
	}
#vignette svg {
	height: calc(var(--vignetteSize) * 0.8);
	width: auto;
}
#footer {
	z-index: 9;
}
#footer .container {
	font-size: 95%;
}
#footer h3 {
	margin-bottom: 0.2em;
}
#footer li {
	padding-left: 1.2em;
}
#footer h3::before {
	content: '\25BE'; /* 25BE 2318*/
}
#footer .container #lists {
	padding: 2.0em;
    column-rule-width: 0.1em ;
    column-rule-style: none ;
    column-count: auto;
    column-width: 13em;
    column-gap: 3em;
    column-rule: dotted 0px;
}
	/* Aside Webside Map
------------------------------------------ */
#aside details dt {
	display:inline;
}
#aside details[open] summary {
   color: var(--primaryColor);
}
#aside details[open] summary svg {
   fill: var(--primaryColor);
}
#aside details[open] summary svg:hover {
   stroke: var(--primaryColor);
}
#aside details[open] summary .on svg:hover {
   stroke: none;
}
	/* Aside Search
------------------------------------------ */
.cartouche.recherche {
	padding-top: 2em;
}
	/* Overlay
------------------------------------------ */
#overlay .titel {
	text-align: center;
}
.overlay_container {
/* 	padding : 3rem 0; */
}
#overlay {
	position: absolute;
	z-index:-1;
	opacity:0;
	top:0;
	left:0;
}
#overlay > .close_overlay {
position:fixed;
top:0;
/* background-color: var(--primaryColor25); */
background-color: var(--white-75);
width:100%;
height:100%;
z-index: -1;
}
#overlay_footer {
	display: block;
	width:100%;
	height:5em;
/* 	background-color: var(--primaryColor); */
	background: var(--footer_BckgdColor);
}


.overlay_container {
/* 	padding: 3vw calc( 1rem + 2vw ) 0 calc( 1rem + 2vw ); */
}

/* Entete et barre de navigation
------------------------------------------ */
.main-nav {
	list-style: none;
}
#header {
	overflow: visible;
}
#bulleRub {
	width:65%;
	margin-left:10%;
}
#nav ul {
	margin: 0; 
}
#nav pre {
	display: inline;
}
.main-nav a, .main-nav li {
	padding: 0em 1em 0 0;
}
.main-nav li:last-child{
	padding: 0em 0em 0 0;
}

#nav > ul > li, .home > ul > li {
	display:inline-block;
	vertical-align: middle;
	line-height:normal;
}
#nav > ul > li span {
/*     vertical-align: super; */
/*     font-size: 75%; */
    color: var(--white-100);
}

#nav > ul > li .on svg {
	fill: var(--primaryColor)
}
#header ul > li, #header ul > li svg {
	vertical-align: middle;
	line-height:normal;
	}
.home >svg::after{
	content: ' \2023';
	}
.menu{
	float:right;
	display: none;
	padding-left: 150px;
	}
/* Hoverable Dropdown
------------------------------------------ */	
.dropdown-content {
	display: none;
	z-index: 15;
	position: absolute;
	right:0;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px var(--basicShadow);
	background-color: var(--primaryColor);
	}
.home.reeyFont{
	font-size: 222%;
	text-align: center;
}
.dropdown-content a, .dropdown-content label {
  padding: 0.8em 1.0em;
  display: block;
}
.menu:hover .dropdown-content {
	display: block;
	}

/* CheckBox
------------------------------------------ */

#aside-checkbox:checked ~ #contenu #aside {
	opacity:1;
	z-index:15;
	
}
/* Grid fallback */
/*
#overlay-checkbox:checked ~ #nav {
	z-index:4;
}
*/
#overlay-checkbox:checked ~ #contenu #overlay {
	z-index:5;
	opacity:1;
	transition: opacity 1s ease-in-out;
}
#overlay-checkbox:checked ~ #contenu #overlay .overlay_header {
	z-index:11;
}
/* END Grid fallback */
#aside-checkbox:checked ~ #contenu #aside {
	transition: ease-in-out 0.2s;
	animation-name: slideInLeft;
	animation-duration: 0.7s;
	animation-iteration-count: 1;
}
#aside-checkbox:not(checked)  ~ #contenu #aside {

/*
	transition: ease-in-out 0.2s;
	animation-name: slideOutLeft;
	animation-duration: 0.7s;
	animation-iteration-count: 1;
*/
}
#aside-checkbox:checked ~  #asideOverlay {
	z-index:10;
	display: block;
	height:100%;
	width:100%;
	position:fixed;
	top:0;
	left:0;
	background-color: var(--aside-overlay_BckgdColor);
}
#aside-checkbox:checked ~ #contenu #vignette {
	display: none;
}

#formTab:checked ~ #contenu  #aside .form, #mapTab:checked ~ #contenu  #aside .map, #searchTab:checked ~ #contenu  #aside .search {
	display:block;
}
/* Class meta
------------------------------------------ */
.fullWidth {
	margin:0 0 1em 0;
	padding:0;
	width:100%;
	max-width:none; 
}
.dark{
	background-color: var(--basicFontColor);
	color:var(--white-100);
}
.pushLeft {
  margin-left: auto;
}
li.search {
	padding-right:0;
}
.textBottom {
    vertical-align: text-bottom;
}
.textMiddle {
	vertical-align:-moz-middle-with-baseline;
	vertical-align:-webkit-baseline-middle;
    vertical-align: middle;
    
}
.uppercase {
	text-transform: uppercase;
}
fullWidth {
	width: 100%;
}
.overlay_header label.search  mark {
	vertical-align: super;
}
label.search  svg {
	fill:var(--primaryColor);
}
/* Class debug
------------------------------------------ */
#calcDiv {
	box-sizing: border-box;
	width:100%;
	height:auto; 
	padding:10px; 
	text-align: center;
	border-width: 0 1px 0 1px;
	border-color: var(--black-50);
	border-style: dashed;
	background-color: var(--black-05);
}

/* Gabarit d'impression
------------------------------------------ */


/* Bloc article sur deux colonnes en float
------------------------------------------ */

article .feature.bloc {
	
}

article .feature.bloc.right {
	transform: rotate(2deg);
	float:right;
	margin-right:20px;
	}
article .feature.bloc.left {
	transform: rotate(358deg);
	float:left;
	clear:both;
	margin-left:10px;
	}
article .feature.bloc {
	width:47%;
	overflow: hidden;
	}
article .feature.bloc .svg_shape svg {
	overflow: visible;
/*
	width:100%;
	height: 100%;
*/
	margin-right: -2em;
}

article .feature.bloc.shadow {
	box-shadow: 2px 5px 11px var(--basicShadow);/* rgba(0,0,0,0.65) */
	padding:2em ;
	background: url(img/binderclip.png) no-repeat 7px -12px;
	background-color: var(--white-95);
	margin:0.5em;
	border: 3px solid var(--goldColor);
    border-radius: var(--border-radius);
	}

article .feature.bloc.right {
	margin-right:1vw;
}	
article .feature.bloc.left {
	margin-left:1vw;
}
article .feature.bloc .spip_vivus_svg {
	float:right;
	}
article .feature.bloc h2 {
	float:left;	
	text-align: center;	
	writing-mode: vertical-rl;
	margin-right: 20px;
	color: var(--black-90);
	
}
article .feature.bloc h2::first-letter {
	font-size: 150%;
	color: var(--goldColor);
}
article .feature.bloc p {
	margin-top: 20px;
	text-align: justify;
	hyphens: auto;
	}
article .feature.bloc .strich {		
	border-bottom: solid 0.17em var(--primaryColor);
	border-bottom-left-radius: 255px 3px;
	border-bottom-right-radius: 332px 6px;
	}
	
/* center Element	 */
.centeringContainer {
height: 10vh;
display: flex;
align-items: center;
justify-content: center;
}

.centeredItem {
width: auto;
margin:0;
}
.centeredText, label.centeredText {
	text-align: center;
}
.rightText {
	text-align: right;
}
.portfolio {
	width: 100%;
	transition: .5s ease;
	opacity:1;
	padding:0em 0;
	text-align: center; 
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;

/* 	background-color: var(--primaryColor); */
	}
.portfolio a {
	display: block;
	box-sizing: border-box;
	background-color: var(--black-05);
/* 	border: 1px solid var(--white-90); */
	
}
.portfolio .round img {
	border-radius : 50%;
	    border-radius: 50%;
    border: 0.5em solid var(--white-100);
    background-color: var(--white-100)
}
/*--------- Forum ------------*/
 ul.listingForum {
	 padding:0
	 }
.listingForum {
  list-style: none;
  margin: 0em;
  display: grid;
  gap: 20px;
  grid-auto-flow: dense; /* backfill gaps  */
  grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
}
.listingForum li {
  display: flex;
  flex-direction: column;
}
.listingForum .user {
  padding: 1em;
  text-align: center;
}
.listingForum .bulle {
  padding: 0em;
}
/*--------- canvas ------------*/
#canvas_container {
/* 	display: block; */
	width:100%;
	display: flex;
  justify-content: center;
}
 /* Popover */
#jpopover {
	cursor: help;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin-left: auto;
	margin-right: auto;
	/*   width: 50%; */
	max-width: 75vw;
	border: 2px solid #000;
	/*     min-height: 25vh; */
	background-color: black;
	color: white;
	font-family: monospace;
	/*     padding: 1em; */
  }

.jpopover{
	background-color: var(--black-95);
    color: var(--white-100);;
  }


@media (max-width:1201px) {
	#aside-checkbox:not(checked)  ~ #contenu #aside {
		transition: ease-in-out 0.2s;
	animation-name: slideOutLeft;
	animation-duration: 0.7s;
	animation-iteration-count: 1;}
}

@media (max-width:768px) {
	article .feature.bloc { width : 90%;}
	article .feature.bloc.left, article.feature.bloc.right { float:none; }
	header>.container>.titre {
		margin-bottom: 0;
		}
	#header_menu {
		display:none;
	}
}
@media (max-width:480px) {
	article .feature.bloc h2 { float:none; writing-mode: horizontal-tb; margin-right: 0}
	#bulleRub {
		width:90%;
		margin-left:5%;
	}
	article .feature.bloc .spip_vivus_svg { display: none;}
	}
@media (max-width:360px) {
	
}

/* MediaQueries
------------------------------------------ */
@media screen and (min-width: 1201px) {
	#aside {
		z-index: 10;/* Over main overlay */
		opacity:1;/* IMPORTANT for animation */
	}
	#aside-label-nav, #aside .close {
		display: none;
	}
	#aside-checkbox:checked ~  #asideOverlay {
		display: none;
		}
	#vignette {
		display: none;
		}
}



/* fin */