:root
{
	--achille: #9B6;
	--achille-high: #EFD;
	--focus:#48C;
	--theme: #48C;
	--second: #894;
	--grey: RGBA(0,0,0,.5);
	--ugrey: #F0F4F8;
	--input: #E8ECEF;
	--bgcolor: #FFF;
	--black: #246;
	--white: #FFF;
	--line: RGBA(0,0,0,.075);
	--alpha: RGBA(0,0,0,.3); /* léger, nom user */
	--radius:1em;
}



/*	LEFT */

BODY
{	display:block;
	/* font-size:1.1em; */
	color:var(--black);	
	display:flex; flex-direction:column;
	background-color:var(--bg-color);
	margin:0 auto 0 auto;
	max-width:1200px;
}

* { box-sizing:border-box; }

/*
@media only screen and (max-width: 1700px) { OUTPUT { font-size:1.1em; } }
@media only screen and (max-width: 1400px) { OUTPUT { font-size:1.0em; } }
*/

/*
::backdrop, html, OUTPUT:backdrop, OUTPUT, *:fullscreen
{	background-color:#FFF !important;
	z-index:-1;
}
*/

/*	LEFT */

BODY>HEADER
{	display:flex;
	border-bottom:1px solid var(--line);
	padding:1em 0 1em 0;
	justify-content:space-between;
	flex-grow:0;
	/* flex-wrap:wrap; */
}

BODY>HEADER>DIV
{	display:flex; flex-direction:column; justify-content: center; 
	padding-left:2em;
}

BODY>HEADER H1
{ 	margin:0; padding:0;  font-size:200%;
	color:var(--achille); letter-spacing:.1em; font-weight:bold;
	font-family:"Quicksand";
}

BODY>HEADER H1>B
{ 	display:inline-block; text-align:center; background-color:var(--achille); color:#FFF;
	border-radius:100%; width:1.3em; height:1.3em; padding-left:.1em; margin-right:.1em;
}

BODY>HEADER H4
{ 	color:var(--grey); font-weight:normal; margin:0; color:var(--achille);
	font-size:110%; 
}

BODY>HEADER>DIV.user
{	display:flex;
	flex-direction:row;
}

DIV.user H2, DIV.user H3
{	font-size:90%; font-weight:normal;
	text-transform:capitalize;
}


/* A */

P>A
{ 	display:inline-block; color:inherit; margin:0; white-space:nowrap; text-shadow:none; padding-right:1em;
	font-weight:inherit;
}

P>A>I
{ 	text-align:center; display:inline-block; border-radius:100%; color:var(--black);
	width:1.5em; padding:.4em .1em .4em .1em; line-height:1em; margin-right:.5em;
	border:1px solid var(--ugrey);
}

P>A:hover>I,P>A.selected>I
{ 	background-color:var(--ugrey); border-color:transparent;
}


/*	MENU */

MENU
{ 	line-height:1.5em; padding:0em; flex-grow:5; 
	display:flex; flex-direction:row; justify-content: center;
	font-size:110%;
	flex-grow:0; /*font-weight:bold;*/
	flex-wrap: wrap; 
}


MENU>P { display:block; padding:.5em; margin:0; text-align:left; }
MENU P>A { margin:0; padding:0; }
MENU P>A>I { border-color:transparent; padding:0; }

/*
MENU>P>SPAN { padding-left:1em; color:var(--alpha); font-weight:bold;  }
MENU>P I { color:inherit; margin-right:.5em; }

MENU>P>A { display:block; color:var(--theme); }
MENU>P>A { color:inherit; font-weight:bold; margin:0; white-space:nowrap; text-shadow:none;  }
MENU>P>A { border-radius:1.5em; line-height:1em; padding:.25em; padding-left:.5em; }

MENU>P>A>I { text-align:center; display:inline-block; border-radius:100%; background-color:var(--grey); color:#FFF; }
MENU>P>A>I { background-color:transparent; color:inherit; width:1.5em; padding:.4em .1em .4em .1em; line-height:1em; }
*/



/*	Crédits */

BODY>FOOTER
{ 	flex-grow:0; font-size:80%; 
	color:var(--grey); margin-bottom:2em;
	padding:2em;
	display:flex; align-items:center;
	justify-content: space-between;
}

BODY>FOOTER>NAV /* contact */
{ 	padding-left:3em;  
	flex-shrink:1;
}

/* PAGE */

MAIN
{ 	flex-basis: 0; flex-grow: 10;
	display:flex; flex-direction:column; /*justify-content:space-around;	*/
}


/*	MAIN */

ARTICLE
{	border-radius:var(--radius);
	display:flex; gap:1em; color:var(--black);
	margin-bottom:1em;
	background-color:transparent;
	padding:1em;
	flex-wrap:wrap;
}

ARTICLE.article IMG { margin:auto; display:block; max-height:35em; }

ARTICLE.review>DIV { flex-basis:100%; }

ARTICLE.second>DIV { flex-basis:40%; }

ARTICLE.responsive>DIV { flex-basis:0; flex-grow:1; }


ARTICLE>DIV
{	padding:1em; border-radius:var(--radius);
	flex-grow:1; color:var(--black);	
	min-width:25%;
	min-width:20em;
}

ARTICLE.links>DIV
{	min-width:10%;
	min-width:10em;
}

ARTICLE>LABEL /* titre flottant */
{	color:var(--grey); display:block; flex-basis:100%; 
}

MAIN>LABEL /* titre flottant rogue */
{	color:var(--achille); display:block; flex-grow:0; padding-left:2em;
}

/*	Page uniquement */

MAIN>ARTICLE
{	animation: fadein ease .5s; animation-iteration-count:1; animation-fill-mode:forwards;
}



/* peut être un sous div */
ARTICLE>DIV.alt
{	background-color:var(--ugrey);	
	padding:1em; border-radius:var(--radius);
}

ARTICLE>DIV.focus_qcm
{	background-color:var(--achille-high);	
} 

	ARTICLE>DIV.alt P
	{ 	display:inline-block; border:1px solid var(--line); padding:.5em 1em .5em .5em; border-radius:2em; color:var(--black);
		background-color:var(--white);
	}

	ARTICLE>DIV.alt I { background-color:var(--white); border-color:transparent; }
	ARTICLE>DIV.alt A:hover { color:var(--theme); }

ARTICLE>DIV>DIV
{	background-color:var(--ugrey); border-radius:var(--radius);
	padding:1em; margin-bottom:1em;
}

ARTICLE>DIV>DIV I { padding:0; width:1em; border:1px solid var(--white); }
ARTICLE>DIV>DIV A:hover>I { background-color:var(--white); }

ARTICLE>DIV>DIV.warning { border:1px solid #804; }


ARTICLE DIV.second
{	background-color:var(--ugrey);	
	padding:1em; border-radius:var(--radius);
}

ARTICLE>DIV.tier { flex-basis:30%; }

ASIDE DIV.alt { font-size:90%; }

DIV>SPAN { display:block;  margin-bottom:.5em; }


ARTICLE DIV.small
{	font-size:80%; background-color:var(--ugrey);
	padding:0; text-align:center; opacity:.75;
}

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

/* .fixed */
MAIN>ARTICLE>DIV { flex-basis:0; flex-wrap: wrap; }
MAIN>ARTICLE>DIV.free { flex-basis:auto; }
MAIN>ARTICLE>DIV.full { flex-basis:100%; }


/* bloc focus */
ARTICLE>DIV.shadow
{	box-shadow:0 0 1em RGBA(0,0,0,.1);
	background-color:var(--white); 
}

ARTICLE>DIV.content
{	width:25%; 
	flex-shrink:0;
	flex-grow:1;
	box-sizing:border-box;
	box-shadow:0 0 1em RGBA(0,0,0,.1);
	background-color:var(--white); 
}

ARTICLE>DIV.edito
{	border:1px solid var(--achille);
}

ARTICLE>DIV.edito sup
{ 	background-color:var(--achille); color:#FFF; padding:.3em 2em .3em 2em; margin-top:-3em; border-radius:1em; 
	float:left; margin-right:1em;
	font-weight:normal; vertical-align:middle; font-size:75%;
}

/* ARTICLE>DIV.edito blockquote img { border-radius:100%; }*/

ARTICLE>DIV blockquote img { border-radius:10%; }

ARTICLE>DIV.edito blockquote::first-letter { font-size:175%; line-height:.5em;  }

ARTICLE>DIV.res
{	background-position:50% 50%;
	background-size:cover;
	background-repeat:no-repeat;
}

ARTICLE.res
{	background-size:cover;
	background-position:50% 50%;
}

ARTICLE.res:before {
	content: ' ';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0.35;
	background-image: url('../RES/ab_3.jpg');
	background-repeat: no-repeat;
	background-position:100% 50%;
	border-radius:var(--radius);
}

ARTICLE.res>DIV { position:relative; }

ARTICLE.res>DIV.alt>SPAN { font-weight:bold; /* background-color:#FFF; padding:1em; border-radius:1em; margin-left:-3em; */ }
/* ARTICLE.res>DIV.alt { text-shadow:0px 0px .5em #FFF; } */


/*	ALT */

ARTICLE.comment { font-size:90%; }
ARTICLE.comment>DIV { background-color:var(--ugrey); padding:0.5em 1em 0.5em 1em; word-break: break-word; }
ARTICLE.comment>DIV.modo { border:1px solid var(--theme); }


ARTICLE.alt { background-color:transparent; padding:0; }
ARTICLE.alt DIV { text-align:center; box-shadow:none; }

/*	MINI */
ARTICLE DIV.mini { flex-grow:0; flex-basis:25%; }
/* ARTICLE.list */ DIV.tiers { flex-basis:32%; flex-grow:0; flex-shrink:1; margin:0; }

/*	LIST */
MAIN>ARTICLE.list { flex-wrap: wrap; }
MAIN>ARTICLE.list>DIV:last-child { margin-right:2em; }

MAIN>ARTICLE.list>DIV>LABEL { color:var(--achille); margin-bottom:1em; }
MAIN>ARTICLE.list>DIV>LABEL.false { color:var(--grey); }

/*	HEader ID */
ARTICLE.header>DIV { vertical-align:middle; margin:0; align-items:center; }
ARTICLE.header>DIV>LABEL { margin:0; }

DIV>NAV
{ 	display:flex; justify-content:flex-end;
	gap:2em; align-items:center;
}

/* DIV>NAV>SUB { border-right:1px solid var(--grey); padding-right:1em; } */ 

/* ------- */




DIV.list { display:flex; }
/*
DIV.list LABEL { flex-grow:1; margin:0; }
DIV.list LABEL.mini { flex-grow:.5; flex-basis:0; }
DIV.list LEGEND { text-align:left; flex-grow:2; vertical-align:bottom; color:var(--grey); } 
*/

MAIN DIV P { margin:0 0 .5em 0; }

/*	FOCUS */
DIV.focus
{ 	background-color:var(--focus); box-shadow:0px 0px 1.5em #FFF; 
	animation: focuszoom ease 1s; animation-direction: alternate; animation-iteration-count:1;
	color:var(--white);
}

DIV.focus A>I { background-color:var(--white); }
DIV.focus A:hover>I { background-color:var(--black); color:var(--white); }

/* DIV.focus A:hover { color:var(--white); } */

/* */



/* pop - pad */

ASIDE
{ 	height:100%; transition:none .3s ease 0s; transition-property:width, opacity;
	max-width:100%;
	flex-basis:0; flex-grow:0; padding:0em; margin-bottom:2em;
	overflow:hidden; overflow-y:scroll; 
	position:fixed; top:0px; right:0px; width:0%;
	box-shadow:0px 0px 4em RGBA(0,0,0,.5);
	/* margin-top:-0.5em; */
	opacity:1; z-index:20;
	background-color:var(--white);
	pointer-events:none;
	box-sizing:border-box;
}

ASIDE>ARTICLE
{	flex-direction:column;
	padding:0;
}


/* icone fermer */

ASIDE>HEADER
{ 	background-color:var(--achille); height:4em; margin:-1em -1em 0 -1em;
	font-size:110%; 
	/* background-image:url("../RES/ab_3.jpg"); background-size:cover; background-position:50% 50%; */
}

ASIDE>HEADER>SPAN { display:block; position:absolute; top:1em; right:1em; z-index:10; }
ASIDE>HEADER>SPAN>A
{ 	border-radius:100%; background-color:transparent;
	display:block; text-align:center;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	transform:none; 
	width:2em; height:2em; padding:.25em; line-height:1em;
}

ASIDE>HEADER>SPAN>A:hover { color:var(--white); }


/* ARTICLE DIV { box-shadow:0px 0px 1em RGBA(0,0,0,.1); } */

	/* ouvert - sinon infermable */
ASIDE.selected
{ 	padding:1em; opacity:1;
	pointer-events:auto;
	max-width:100%;
	width:32em;
}

article.figures { flex-wrap:wrap; background-color:var(--line); }
article.figures>div { border:1px solid var(--line); max-width:32%; background-color:#FFF; }
IMG.thumbnail { width:100%; display:block; border:1px solid #222; }


/* QCM */ 

article.qcm A { white-space:normal; line-height:1.2em; }