/*  	DIVERS			*/
tt {
	font-family: monospace;
	font-size: 90%;
	color: blue;
	white-space: nowrap;
}

/*  	A PROPOS		*/
.bio {
	padding-top: 1em;
}
.bio p {
/*	font-family: Epilogue, sans-serif;	*/
/*	color: var( --foncé);	*/
	font-size: 16px;
	line-height: 1.8;
}
.bio b {
	font-weight: bold;
}

/*		TITRAILLE		*/
.apropos article > p:first-child {
	font-family: 'Cormorant Garamond', serif;
	font-size: 2.2em;
}
/*  	ASIDE		*/
aside h1 {
	text-transform: uppercase;
	display: inline-block;
	font-size: 2em;
 	padding: 0;
 	transform-origin: top left;
	transform: rotate( 270deg) translateX( -100%);
	text-align: right;
	padding-right: 0.5em;
	font-weight: 300;
}

/*		VERSIONS		*/
.versions {
	min-height: 25em;
	line-height: 1.5;
}
.versions dl {
	padding-top: 1em;
}
.versions dt {
	padding-bottom: 0.5em;
}
.versions dt i {
	font-style: italic;
}
.versions dt:before {
	content: "\25A0 ";
	width: 1em;
	display: inline-block;
}
.versions dl a {
	border-bottom: 2px solid #ccc;
}
.versions dl a:hover {
	color: maroon;
	border-bottom: 2px solid maroon;
}



/* ============== */
/*			FICHE			*/
/*		GENERIQUE		*/
q {
	width: 24%;
	display: block;
	position: absolute;
	right: 0;
	margin-top: -1em;
	font-size: 14px;
	color: var( --clr-principale );
	line-height: 25.2px;
	font-family: Epilogue, sans-serif;
	text-transform: none;
	font-weight: 400;
}
q cite {
	font-style: italic;
}
q a {
	color: #888;
}
q a:hover {
	border-bottom: 2px solid var( --clr-principale );
}

cite {
	font-style: italic;
}

/*  	ARTICLE TITLES		*/
article dl.titraille {
	clear: both;
	padding: 2em 0;
	line-height: 1em;
}
article dl.titraille dd {
	font-weight: 900;
	text-transform: uppercase;
	font-size: 13px;
	font-size: 0.78em;
	line-height: 1.2;
	padding: 1em 0 0.5em;
}
article dl.titraille dt {
	padding-left: 1em;
	font-family: 'cormorant garamond', serif;
	font-size: 35.2px;
	padding-bottom: 0.5em;
	line-height: 1.2;
	max-width: 736px;
}
article dl.titraille + p {
	font-family: 'cormorant garamond', serif;
	font-size: 35.2px;
	line-height: 52.8px;
	padding-bottom: 0.5em;
}
article li,
article p + p,
article h5 + p,
article ul + p,
article figure + p {
	line-height: 1.8;
}
article p {
	padding-bottom: 0.5em;
}
article p b {
	font-weight: 600;
}
article p small b {
	text-transform: uppercase;
}
article p i {
	font-style: italic;
}

article li a,
article p > a {
	position: relative;
	white-space: nowrap;
	color: #888;
	text-shadow: 1px 1px 0px var( --fond);
}
article li a:before,
article p > a:before {
	content: '';
	display: inline-block;
	background: var( --clr-principale );
	position: absolute;
	height: 4px;
	bottom: -2px;
	left: 0;
	width: 0%;
}
article li a:hover:before,
article p > a:hover:before {
	width: 100%;
	transition: 0.3s;
}

article ul li {
	padding-left: 1em;
	text-indent: -1em;
}
article ul li:before {
	content: "\25A0 ";
	padding-right: 0.5em;
}
article li b {
	font-weight: 700;
}

/*		FIGURE		*/
article figure {
	padding-top: 0.5em;
}
article figure img {
	width: 96%;
}
article figure.small {
	clear: both;
	max-width: 60%;
	float: right;
	margin-left: 0.5em;
	margin-top: 1em;
}
article figure.minus {
	clear: both;
	max-width: 35%;
	float: right;
	margin-left: 0.5em;
	margin-top: 1em;
}
article figcaption {
	color: #888;
	font-size: 14px;
	padding: 0.5em 0 0.5em 0.8em;
	margin-bottom: 1em;
	line-height: 1.4em;
}
article figcaption:before {
	content: '\22A1  ';
	margin-left: -0.8em;
	font-size: 135%;
	color: var( --foncé );
}

/*  	PLUS		*/
.ref dd,
.plus dd {
	font-weight: 900;
	text-transform: uppercase;
	font-size: 13px;
	font-size: 0.78em;
	padding: 1.78em 0 0;
	line-height: 2;
}
.ref dt,
.plus dt {
	padding-bottom: 4px;
	font-size: 90%;
	padding-left: 1em;
	text-indent: -1em;
}
.ref dt a,
.plus dt a {
	color: var( --clr-principale );
	border-bottom: 2px solid #ccc;
	margin-bottom: 3px;
	line-height: 1.2;
	display: inline-block;
	padding-left: 1em;
}
.ref dt a:hover,
.plus dt a:hover {
	color: #ccc;
}
.ref dt:before,
.plus dt:before {
	content: '\2043  ';
	font-size: 130%;
}

blockquote {
	border-left: 6px solid #ccc;
	padding-left: 0.4em;
	padding-right: 1.2em;
	margin-top: 1em;
}
blockquote li {
	padding-left: 1em;
	text-indent: -1em;
	font-size: 17px;
}


/*  	ASIDE			*/
p.étapes {
	padding-left: 1em;
	border-bottom: 1px solid var( --foncé);
	border-left: 1px solid var( --foncé);
	position: relative;
	margin-top: 6em;
	margin-bottom: 0.5em;
	padding-bottom: 1em;
}
p.étapes small {
 text-transform:uppercase; 
 display: block;
 font-weight: 700;
 font-size: 14px;
}
p.étapes:before {
	content:'';
	display: block;
	position: absolute;
	top: -2.5em;
	left: 1em;
	height: 2em;
	width: 2em;
	border-radius: 50%;
}
p.recherche:before {
	background: var( --clr-recherche );
	box-shadow: 2.5em 0 0 #eee, 5em 0 0 #eee, 7.5em 0 0 #eee;
}
p.idéation:before {
	background: #eee;
	box-shadow: 2.5em 0 0 rebeccapurple, 5em 0 0 #eee, 7.5em 0 0 #eee;	
	box-shadow: 2.5em 0 0 var( --clr-idéation ), 5em 0 0 #eee, 7.5em 0 0 #eee;	
}
p.prototypage:before {
	background: #eee;
	box-shadow: 2.5em 0 0 #eee, 5em 0 0 teal, 7.5em 0 0 #eee;
}
p.implémentation:before {
	background:#eee;
	box-shadow: 2.5em 0 0 #eee, 5em 0 0 #eee, 7.5em 0 0 var( --clr-implémentation );
}
p.recherche.idéation:before {
	background: var( --clr-recherche );
	box-shadow: 2.5em 0 0 rebeccapurple, 5em 0 0 #eee, 7.5em 0 0 #eee;
	box-shadow: 2.5em 0 0 var( --clr-idéation ), 5em 0 0 #eee, 7.5em 0 0 #eee;	
}
p.recherche.prototypage:before {
	background: var( --clr-recherche );
	box-shadow: 2.5em 0 0 #eee, 5em 0 0 teal, 7.5em 0 0 #eee;
}
p.idéation.prototypage:before {
	background: #eee;
	box-shadow: 2.5em 0 0 rebeccapurple, 5em 0 0 teal, 7.5em 0 0 #eee;
	box-shadow: 2.5em 0 0 var( --clr-idéation ), 5em 0 0 teal, 7.5em 0 0 #eee;
}
p.prototypage.implémentation:before {
	background: #eee;
	box-shadow: 2.5em 0 0 #eee, 5em 0 0 teal, 7.5em 0 0 var( --clr-implémentation );
}
p.recherche.idéation.prototypage:before {
	background: var( --clr-recherche );
	box-shadow: 2.5em 0 0 rebeccapurple, 5em 0 0 teal, 7.5em 0 0 #eee;
	box-shadow: 2.5em 0 0 var( --clr-idéation ), 5em 0 0 teal, 7.5em 0 0 #eee;
}
p.recherche.implémentation.prototypage:before {
	background: var( --clr-recherche );
	box-shadow: 2.5em 0 0 #eee, 5em 0 0 teal, 7.5em 0 0 var( --clr-implémentation );
}

.nature {
	position: relative;
	text-indent: 2.8em;
	line-height: 3em;
}
.nature.livrable:before {
	content:'';
	display: block;
	position: absolute;
	bottom: 1em;
	left: 1em;
	height: 1.5em;
	width: 1.1em;
	background: orange;
	box-shadow: 1.3em 0 0 orange;
}
.nature.livrable:after {
	content: '';
	display: block;
	background: var( --fond);
	position: absolute;
	height: 0em;
	width: 0em;
	top: 0.9em;
	left: 2.7em;
	border: 0.4em solid darkgoldenrod;
	border-top-color: transparent;
	border-right-color: transparent;
}
.nature.test {
	text-indent: 1.5em;
	margin-top: 0.5em;
}
.nature.test:before {
	content:'';
	display: block;
	position: absolute;
	bottom: 0.8em;
	left: 1em;
	background: red;
	height: 1.5em;
	width: 1.1em;
}
.nature.test:after {
	content: '';
	display: block;
	background: var( --fond);
	background: transparent;
	position: absolute;
	height: 0.8em;
	width: 0.5em;
	top: 1em;
	left: 0.9em;
	border: 5px solid var( --fond);
	border-top-color: transparent;
	border-left-color: transparent;
	transform: rotate( 30deg);
}
.nature {
	padding-left: 1em;
	border-bottom: 1px solid var( --foncé);
	border-left: 1px solid var( --foncé);
}
.nature.cartographie {
	text-indent: 4em;
	margin-top: 0.5em;
}
.nature.cartographie:before {
	content:'';
	display: block;
	position: absolute;
	bottom: 0.8em;
	left: 1em;
	background: var( --clr-cartographie );
	height: 1.5em;
	width: 1.1em;
	transform: skew( 0, -15deg );
	box-shadow: 2.45em 0.7em 0 var( --clr-cartographie );
}
.nature.cartographie:after {
	content:'';
	display: block;
	position: absolute;
	bottom: 0.8em;
	left: 2.2em;
	background: var( --clr-cartographie );
	height: 1.5em;
	width: 1.1em;
	transform: skew( 0, 15deg );
}



/*  	HORODATAGE		*/
p#horodatage {
	color: #aaa;
	border-top: 1px solid #ccc;
	margin-top: 1em;
}

/*  	SPECIAL CASES			*/
#martec {
	border-top: solid 1px var( --foncé);
	width: 96%;
	margin: 0.5em 0;
	font-weight: 500;
}
#martec td {
	font-size: 13px;
	line-height: 1.8;
	width: 12%;
	border-bottom: solid 1px #ccc;
	padding: 1px 1px 1px 3px;
}
#martec thead td {
	text-align: center;
	font-weight: 700;
	font-size: 14px;
}
#martec td:nth-child(4) {
	border-right: 1px solid #ccc;
}
#martec tbody tr:nth-child(1) td:nth-child(2n) {
	background: #eee;
}
#martec tbody tr:last-child td {
	background: #ccc;
	border-right: 1px solid var( --fond );
}