html, body {
	font-size:13px;
}
body {
	/*font-family: 'hk_grotesk', Arial, Helvetica, sans-serif;*/
	/*font-family: 'basier_square', Arial, Helvetica, sans-serif;*/
	font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
	/*font-family: 'Integral CF', Arial, Helvetica, sans-serif;*/
	background-color:var(--bgcolor);
	color:var(--color);
	margin: 0; padding: 0;
    width:100%; height:100%;
    overflow-x:hidden;
}
body, input, button, select { 
	font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size:1rem;
}

*, *:before, *:after { box-sizing: border-box; outline:none; }
a { color:var(--color); text-decoration: underline; }
a:hover { text-decoration: underline; }
nav ul, .files-list ul { padding:0; margin:0; }
nav li, .files-list li { padding:0; list-style: none; }
img { width:100%; }
.pointer { cursor:pointer; }

:root {
	--bgcolor:rgb(255, 94, 67); 	--color:rgb(255, 210, 199);		--low-color:rgba(255, 210, 199, .65);
	--family-bgcolor:	var(--color); 		--family-color:	var(--bgcolor);
	--wiki-bgcolor:		var(--color); 		--wiki-color:	var(--bgcolor);
	--fiche-bgcolor:	var(--low-color); 	--fiche-color:	var(--bgcolor);
	--read-bgcolor:		var(--color); 		--read-color:	var(--bgcolor);

	--side-margin: 3rem;
	--footerH: 10rem;

	--fiches-start-x: 18vw;
	--fiches-start-y: 88px;
	--fiches-step: 47px;
	--fiche-w: 650px; /* max-width, avant c'était 750px*/;
	--family-w: 900px;
}

main { /*width:96%; max-width:1100px;*/ }

#templates { display:none; }
#favicon-color { color:var(--favicon-color); }

#loader { /*margin-top:2rem;*/ /*display:none;*/
	position:fixed; left:0; bottom:0; 
	width:100%; height:100vh; z-index:1;
	/*width:100%; max-width:900px; */ height:15px; 
	/*background:url('../img/ray.gif') repeat; */	
	/* from https://cssloaders.github.io/ largement modifié */
	background-image: linear-gradient(-45deg, var(--color) 25%, transparent 25%, transparent 50%, var(--color) 50%, var(--color) 75%, transparent 75%, transparent);
	font-size: 25px; /*font-size: 30px;*/
	background-size: 1em 1em; animation: barStripe .7s linear infinite;
}
@keyframes barStripe { 0% { background-position: 0 0; } 100% { background-position: 2em 0; } }


header { background-color: var(--bgcolor); }
header * { margin:0; }

header.main-title { 
	position:fixed; left:0; top:0; width:100%; z-index:1000;
	padding: 1rem var(--side-margin) .75rem calc(4.2rem + var(--side-margin)) ;
	border-bottom:solid 2px var(--color); 
	/*margin-bottom:2.5rem; /*padding-bottom:.65rem; /*position: relative;*/
	/*padding-left:4.2rem;*/ }
header.main-title h1 { text-transform: uppercase; font-weight:900; font-size:1.8rem;
	display:inline-block; }
header.main-title h2 { display:inline-block; margin-left:.5rem; font-size:1.3rem; }
header.main-title h3 { font-size:11px; font-weight:600; 
	text-transform: uppercase; color:var(--low-color); }

header.main-title:before { content:''; width:3.4rem; height:2.7rem;
	background:var(--color); position: absolute; left:var(--side-margin); top:18px;
	clip-path: polygon(0 0, 0 100%, 100% 100%, 100% .8rem, calc(100% - .8rem) 0); 
}
header .btn-logout { position: absolute; right:var(--side-margin); top:15px; }

header.main-title li { margin:0; padding:0; list-style:none; }

header.main-title .layout-bar { margin:0; padding:0; position:relative;
	position:absolute; left:0; bottom:0; width:100%; }
header.main-title .layout-bar li { /* poignée plus large */	
	position:absolute; left:0; top:-1rem;	
	width:3rem; height:3rem; /*background-color:rgba(255,255,255,.05);*/ }
header.main-title .layout-bar li:after { /* repère visible */
	content:'▼'; display:block; font-size:.9rem;
	/*width:.5rem; height:1rem; background-color: var(--color);*/
	position:relative; left:-4px; }
header.main-title .layout-bar li.below:after { content:'▲'; top:14px; }

header.main-title .action-bar {
	display:flex; flex-wrap:wrap; align-items:center;
	position:absolute; right:var(--side-margin); top:17px; /*bottom:.5rem;*/ }
header.main-title .action-bar li {
	border:solid 1px var(--color); text-transform: uppercase; 
	font-size:9px; font-weight:700; padding:0.1rem 0.25rem;
	cursor:pointer; margin:0 0 0 .5rem; 
	transition-duration:.3s; }
header.main-title .action-bar li:hover { background-color: var(--color);
	color:var(--bgcolor); }

/*header.main-title .layout-bar li.family-end:after { left:-3.5rem; }*/

#dump { padding-top:8rem; min-height: calc(100vh - var(--footerH)); }


#login_form {}
#login_form form { text-transform: uppercase; 
	background:var(--fiche-bgcolor); color:var(--fiche-color); 
	padding:1.5rem 18rem 1.5rem 1.5rem; display:inline-block;
	clip-path: polygon(2rem 0, calc(100% - 2rem) 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%, 0 2rem);
}
#login_form h1 { font-size:1.8rem; font-weight:800; }
#login_form p {}
#login_form label { display:block; }
#login_form input { display:block; }
#login_form input.text-field { margin-bottom:.5rem; }
#login_form input.button {}



footer { /*margin-top:8rem; */ height:var(--footerH);
	padding:0 var(--side-margin) var(--side-margin);
	/*border-bottom:solid 2px var(--color);*/ position:relative; }
footer { font-size:11px; font-weight:600; text-transform:uppercase; }
footer ul { padding-left:0; margin:0; 
	height:100%; /* aligner en bas ↓ */
	display:flex; flex-direction: column; justify-content: flex-end; }
footer li { list-style:none; user-select:none; }
footer { display:flex; flex-wrap: wrap; }
footer .col { width:25%; min-width:185px; position:relative; }
footer .col:last-child { text-align:right; }
footer .link { cursor:pointer; }
footer .link.underline { text-decoration: underline; }
footer .link:hover { text-decoration: underline; }

#pixbar { position:absolute; left:0; bottom:21px; }
#pixbar canvas { display:block; }



section { margin-bottom:2.5rem; }
section header, section header ul { display:flex; flex-wrap: wrap; }
section header { justify-content: space-between; }
section header li { margin:0 0 0 .3rem; cursor:pointer; }
section.fiche .container {}
section.family0 header nav .btn-close { display:none; }

section header { margin-bottom: .5rem; position: relative; max-width:900px; }
section header h1 { text-transform: uppercase; 
	font-weight:900; font-size:1.7rem; position: relative;
	padding-left:2.15rem; }
section header h1:before { content:''; width:20px; height:16px;
	background:var(--color); position: absolute; left:0; top:5px; }
section:first-child header h1:before { display:none; }
section header nav { position: absolute; bottom:5px; right:0; }
section header nav li { text-transform: uppercase; 
	font-weight:600; font-size:11px; }
section.family header nav { bottom:7px; }
section.family header nav li.btn-close { height:1em; font-size:1.2em; }



/* ///////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////              FAMILY               //////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////// */

section.family { max-width:var(--family-w); position: relative; 
	padding:0 var(--side-margin) 1.1rem var(--side-margin); }

section.family:after, section.fiche:after { content:''; 
	width:var(--side-margin); height:2px; background:var(--color);
	position: absolute; left:0; bottom:0; transition-duration:.3s; }
section.family:hover:after, section.fiche:hover:after { width:20%; }

section.family .children { display:flex; flex-wrap: wrap; }
section.family .children article { margin:0 .65rem .65rem 0;
	text-transform: uppercase; font-size:12px; font-weight:400;
	letter-spacing:.05em; }


section.family article { cursor:pointer; position: relative;
	transition-duration:.3s;	
	padding:.45rem .7rem .35rem .7rem; }

	/* LINK BTN */
section.family article.link-btn {
	padding-left:0; padding-right:0; margin-left:.3rem; margin-right:.9rem; }
section.family article.link-btn:after { content:''; position: absolute;
	width:1.5rem; height:1px; left:0; bottom:.2rem; transition-duration:.3s;
	background-color: var(--color); }
section.family article.link-btn:hover:after { width:100%; }

	/* FICHE BTN */
section.family article.fiche-btn { 
	background:var(--fiche-bgcolor); color:var(--fiche-color);
	padding-right:1.6rem;
	clip-path: polygon(0 0, 0 100%, 100% 100%, 
		100% .7rem, calc(100% - .7rem) 0); }
section.family article.fiche-btn:hover { 
	background:var(--fiche-color); color:var(--fiche-bgcolor); }

	/* WIKI BTN */
section.family article.wiki-btn { 
	background-color: var(--color); color:var(--bgcolor); 
	background-color: var(--wiki-bgcolor); color:var(--wiki-color); 
	padding-left:2.4rem; padding-right:1.6rem;	

	/* coins hau-gauche et haut-droit*/
	/*clip-path: polygon(.7rem 0, calc(100% - .7rem) 0, 100% .7rem, 100% 100%, 0 100%, 0 .7rem);*/
	/* coin haut-gauche et bas-droite */
	/*clip-path: polygon(.7rem 0, calc(100% - .7rem) 0, 100% 0, 100% calc(100% - .7rem), calc(100% - .7rem) 100%, 0 100%, 0 .7rem);*/
	/* coin bas-gauche et haut-droite */
	clip-path: polygon(0 0, calc(100% - .7rem) 0, 100% .7rem, 100% 100%, .7rem 100%, 0 calc(100% - .7rem));
	/* coin haut-droit */
	/*clip-path: polygon(0 0, 0 100%, 100% 100%, 100% .7rem, calc(100% - .7rem) 0);*/ }
section.family article.wiki-btn:hover { 
	background:var(--wiki-bgcolor); color:var(--wiki-color); }
section.family article.wiki-btn:before { content:'≡'; margin-right:.5rem;
position: absolute; left:1.1rem; top:.15rem;
	font-size:1.4em; font-weight:400; }

	/* FAMILY BTN */
section.family article.family-btn { 
	background-color: var(--family-bgcolor); color:var(--family-color);
	padding-right:1.6rem;
	clip-path: polygon(0 0, 0 100%, 100% 100%, 100% .7rem, calc(100% - .7rem) 0);
	/*clip-path: polygon(0 0, .7rem 0, calc(100% - .7rem) 0, 100% .7rem, 100% 100%, 0 100%, 0 .7rem); */
}
section.family article.family-btn:hover { 
	background:var(--family-color); color:var(--family-bgcolor); 	
	/*clip-path: polygon(.7rem 0, .7rem 0, calc(100% - .7rem) 0, 100% 0, 100% 100%, 0 100%, 0 .7rem); }*/
}




/* ///////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////               FICHE               //////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////// */

section.fiche { /*position: relative; /*padding-bottom: 1.1rem;*/
	position: absolute; z-index:1; left: var(--fiches-start-x); top: var(--fiches-start-y);
	width: 76vw; max-width: var(--fiche-w); 
	resize:both; overflow:hidden; /* overflow requis pour resize */
	border: solid 1px var(--bgcolor); /*background-color: var(--color); */
	/*clip-path: polygon(0 0, 100% 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%, 0 2rem);*/
	/*clip-path: polygon(0 0, calc(100% - 3.75rem) 0, 100% 3.75rem, 100% 100%, 0 100%);*/
}
.fix-fiches section.fiche { position:fixed; }

section.fiche .container { max-width:900px; position: relative;
	max-height:calc(100vh - 18rem); overflow:auto; padding-bottom: 1.25rem;
	background-color:var(--read-bgcolor); }

section.fiche header { position:relative;
  color: var(--bgcolor); background-color:var(--color);
  padding: .9rem 1.25rem; margin:0;
  border-bottom: solid 1px var(--bgcolor);
}
section.fiche header h1 { width:calc(100% - 8rem); line-height:1em; }
section.fiche header h1::before {
  /* background: var(--color); */ top:3px;
  background: var(--bgcolor);
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% .25em, calc(100% - .25em) 0);
}
section.fiche header nav { top: 14px; right: 1rem; }
section.fiche header nav li { transition-duration: .3s;
	border:solid 1px var(--bgcolor); padding:0.25em 0.75em 0.25em;
	line-height:1em; margin:0 0 0 -1px; font-weight:600; }
section.fiche header nav li:hover { background-color: var(--bgcolor); color:var(--color); }
section.fiche header .handle { position:absolute; left:0; top:0; 
	width:calc(100% - 13rem); height:100%; /*background:red;*/ }

section.fiche .container .texte {
	font-size:1.1rem; line-height:1.3rem; font-weight:300; letter-spacing:0.01rem;
	max-width:800px; overflow-x:auto;
	background:var(--read-bgcolor); color:var(--read-color);
	padding:1rem 1.25rem .5rem 1.25rem; margin: 0;
	/*clip-path: polygon(2rem 0, calc(100% - 2rem) 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%, 0 2rem);*/
	clip-path: polygon(0 0, 100% 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%, 0 2rem);
}
section.fiche .container .texte div { border:none; padding:0; }
section.fiche .container .texte ul {}
section.fiche .container .texte li {}
section.fiche .container .texte :is(p,div) { margin:0 0 .75rem 0; }
section.fiche .container .texte a { text-decoration: underline; color:var(--read-color); }
section.fiche .container .texte b { font-weight:600; }

section.fiche .container .texte h1 { font-size:1.8rem; font-weight:800; letter-spacing: -0.02em; }
section.fiche .container .texte h2 { font-size:1.35rem; font-weight:800; }
section.fiche .container .texte h3 { font-size:1.15rem; }
section.fiche .container .texte h4 { font-size:1.05rem; }

section.fiche .links ul { background:none; /*var(--bgcolor);*/
	margin:1.5rem 3.75rem 0 1.25rem; padding:0;
	display:inline-block;
	/*clip-path: polygon(1.1rem 0, calc(100% - 1.1rem) 0, 100% 0, 100% calc(100% - 1.1rem), calc(100% - 1.1rem) 100%, 0 100%, 0 1.1rem); */
}
section.fiche .links li { list-style:none; font-size:1.2rem; color:var(--color);
	line-height:.9em; margin-bottom:.35rem; }
section.fiche .links li a { display:block; font-weight:800;
	text-decoration: none; color:var(--color);
	padding:.1rem 6rem .1rem 0; }
section.fiche .links li a:hover { text-decoration: underline; }

section.fiche .files { margin:0 0 0 1.25rem; }
section.fiche .files ul { padding:0; margin:1.5rem 0 1.75rem 0; }
section.fiche .files li { line-height:1.2em; list-style:none; position:relative; 
	margin:0 0 .25rem 0; padding-left:1.75em; color:var(--read-color); }
section.fiche .files li a { color:var(--bgcolor); text-decoration: none; }
section.fiche .files li a:hover { text-decoration: underline; }
section.fiche .files li:before {
  content: ''; position: absolute; background: var(--read-color);
  width: 1.15em; height: 1em; left: 0; top: 0;
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% .35em, calc(100% - .35em) 0); }

section.fiche .files .pl-dropzone { margin-top:.65rem; padding:.75rem 0 .75rem 1rem;
	/*position: relative; left:-1.25rem;*/ cursor:pointer;
	max-width:24rem; font-size:1rem; font-weight:800;
	background-color:transparent; color:var(--fiche-color);
	clip-path: polygon(0 0, 100% 0, 100% 0, 100% calc(100% - 1.1rem), calc(100% - 1.1rem) 100%, 0 100%, 0 1.1rem); 

	background-image: linear-gradient(-45deg, var(--fiche-bgcolor) 25%, transparent 25%, transparent 50%, var(--fiche-bgcolor) 50%, var(--fiche-bgcolor) 75%, transparent 75%, transparent);
	/*font-size: 30px;*/ background-size: 1em 1em;
	animation: barStripe 1s linear infinite; }

section.fiche .date {  margin:0 1.25rem; text-align: right;
	font-size:10px; font-weight:500; color:var(--bgcolor); }
section.fiche .date a { color:var(--bgcolor); text-transform: uppercase; }





/* ///////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////           UI + EDITION            //////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////// */

section.family .btn-sort.active { background-color: var(--fiche-bgcolor); color:var(--fiche-color); }
section.family .btn-del.active { background-color: var(--fiche-bgcolor); color:var(--fiche-color); }
section.editing header .btn-edit { background-color:var(--fiche-bgcolor); color:var(--fiche-color); }
section.family article.ui-sortable-handle { cursor:move; }
 /* truc cachés à part en mode édition */
section.fiche .bloc-edit { background-color: var(--bgcolor); padding:.75rem;
	margin:1.25rem 1.25rem 0 1.25rem; height:auto;
	display:flex; flex-wrap:wrap; align-items: flex-start; /*position:relative;*/ }
section.fiche .top-edition > :is(div, button){ margin-right:.75rem; }
section.fiche .top-edition label { color:var(--color); }
/*section.fiche .top-edition .idpere { margin-right:2rem; }*/
section.fiche .top-edition .public-ui{ margin-bottom:1.4rem; }
section.fiche .top-edition .save { /*position: absolute; right:15%; top:0;*/ }
section.fiche .top-edition { height:3rem; }

section.fiche .bottom-edition { justify-content: flex-end; margin-bottom:2rem;  }

/*section.fiche .bottom-edition .btn.save { position:absolute; right:0; top:0; z-index:10; }*/

section.fiche .edit-btns { }
section.fiche .edit-btns .btn { margin-left:1rem; }

section.fiche.editing {}
section.fiche.editing button { font-size:11px; font-weight:500; padding:0.25em .5em; 
	display:block; letter-spacing:0.04em; cursor:pointer;
	background-color:var(--color); border: solid 1px var(--bgcolor); color:var(--bgcolor);
	text-transform: uppercase; }
section.fiche.editing .container { border-color:red; }
section.fiche.editing .edit-only { display:flex; }
section.fiche.editing .edit-only.texte { display:block; } /* bugfix newlines à la créa */
section.fiche.editing header .handle { display:none; }
section.fiche .edit-only { display:none; }

/*section.fiche.editing .simple-uploader { margin-left:1.25rem; }*/

section.fiche.editing .medium-editor-placeholder::after { color:var(--family-color); }
/*section.fiche.editing .links li { color:var(--family-color); }*/
section.fiche.editing .links ul { min-width:50%; }
section.fiche.editing .top-edition {  }

	/* btn save fixe - noscroll	*/
section.fiche header .btn.save { display:none; }
section.fiche.editing header .btn.save { display:block;
	position:absolute; /* fixé sur le header */ z-index:1;
	right:1.25rem; bottom:-2.85rem;
}




/* ///////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////      WIKI (hérite de family)      //////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////// */

section.wiki { max-width:1041px; }
section.wiki header { max-width:none; }
section.wiki header h1 {}

section.wiki .columns { display:flex; margin-top:1.5rem; }
section.wiki .children { width:180px; margin-right:1rem;
	flex-direction: column; align-content: flex-start;
	display:block;

	text-align:right; }
section.wiki .children article { display:inline-block; min-width:60%;
	clip-path: polygon(.7rem 0, 100% 0, 100% 100%, 0 100%, 0 .7rem);
	clip-path: polygon(0 0, 100% 0, 100% 100%, .7rem 100%, 0 calc(100% - .7rem));
	padding-right:.7rem; padding-left:1.6rem; }
section.wiki .display-zone { min-height:300px; width:100%; }

section.wiki header.of-wiki {} /* le header du wiki, PAS d'une fiche du wiki */


	/* FICHE dans un wiki */
section.wiki section.fiche { position:static; width:100%; max-width:800px; resize:none; }
section.wiki section.fiche .container { max-height:none; }
section.wiki section.fiche .btn-close { display:none; }
section.wiki section.fiche {}
section.wiki section.fiche header { margin-bottom: 0rem; }
section.wiki section.fiche header h1 { 
	background:var(--family-bgcolor); color:var(--family-color);
	width:66%; position: relative;
	font-size:1.35rem; text-transform:none; font-weight:800;
	padding:.6rem 2rem .6rem 1.25rem;

	/*clip-path: polygon(.7rem 0, calc(100% - .7rem) 0, 100% .7rem, 100% 100%, 0 100%, 0 .7rem);*/
	clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 2rem, calc(100% - 2rem) 0);
}

section.wiki section.fiche:after { display:none; }

section.wiki:after { width:150px; }
section.wiki:hover:after { width:50%; }





/* ///////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////               MOBILE              //////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 950px){
	:root { --fiches-start-x: 15vw; }
}
@media screen and (max-width: 900px){
	section.fiche { position:static; width:auto; max-width:none; resize:none;
		margin-left:var(--side-margin); margin-right:var(--side-margin); }
	section.fiche .container { max-height:none; }
	header.main-title .layout-bar { display:none; }
}
@media screen and (max-width: 700px){
	.no-mobile { display:none !important; }
	:root { --side-margin: 1.25rem; }
	section.wiki .columns { display:block; margin:0; }
	section.wiki .children { width:auto; display:flex; flex-direction: row; flex-wrap:wrap; margin:0; }
	section.wiki .children article { min-width:auto; }
	section.wiki section.fiche { margin:0; }
	section.fiche::after { display: none; }
	footer .col { width:33%; min-width:auto; }
}
@media screen and (max-width: 560px){
	header.main-title .action-bar { display:none; }
	section.fiche .links ul { margin-right:1.5rem; }
	section.fiche .links li a { padding-right:0; }
}
@media screen and (max-width: 500px){
	section.fiche { margin-left:0; margin-right:0; }
	section.family.wiki { padding:0; }
	section.wiki .children { margin:0 var(--side-margin); }
	section.fiche .top-edition { height:4.5rem; }
}