@font-face{font-family:'recit'; src:url('img/LCALLIG.TTF');}
@font-face{font-family:'micross'; src:url('img/micross.ttf');}

section h1, section h2, header h1, header p, #articles h2 a, aside h2, nav a li{font-family:micross, georgia;}
*{margin:0px; padding:0px; font-family:century, verdana;}

#corpus{max-width:1100px; margin:auto;}

a{text-decoration:none; color:black;}

header{max-width:100%; height:300px; background:url('img/background.jpg') center; background-size:cover;}
header #position-titre{width:100%; text-align:center;  padding-top:170px;}
header #titre{background:rgba(0,0,0,0.7); height:100px; padding:30px 0px;}
header h1{color:deepskyblue; text-transform:uppercase; font-weight:normal;}
header p{color:white; padding:10px;}

nav{text-transform:uppercase; background:lightgray;}
	nav label, nav input{display:none;}
	nav li{display:inline-block; list-style-type:none; padding:10px 20px;}
	nav li a{display:block; width:100%; margin:auto;}
	nav li:hover{background:white; background:url('img/line.jpg') bottom repeat-x;}
		nav li:hover a{color:deepskyblue;}
	
section{padding-top:20px; min-height:350px; margin-bottom:25px;}	
	section h2{margin:20px 0px 10px 0px;}
	
	article{width:690px; display:inline-block; padding:25px;}
		article h1{text-align:center; margin-bottom:20px; text-transform:uppercase; font-size:1.5em;}
		article h3{margin-top:1em;}
		article img, aside img{max-width:100%;}
		article a{font-style:italic; color:rgb(70,70,70);}
		article p{padding:10px 0px; text-align:justify;}
		article p a:hover{background:url('img/line.jpg') bottom repeat-x;}

	#articles{width:690px; padding:25px 15px;}
		section, aside{display:inline-block;}		
		
	.bloc{width:100%; margin:auto; margin-bottom:20px;}
		.bloc img, .bloc .droite{display:inline-block; vertical-align:top;}
			.bloc img{width:240px;}
			.bloc img:hover{filter:opacity(80%);}
			.bloc h2{margin-bottom:10px;}
				.bloc h2 a{color:deepskyblue;}
				.bloc h2:hover a{text-decoration:underline;}

		
		
		.sources{text-decoration:underline;}
		.sharethis-inline-share-buttons{margin-top:20px;}
		#rs{margin-bottom:-40px;}
		.signature{padding:10px 0px; text-align:right; font-style:italic; margin-top:30px;}
		.signature img{width:65px; border-radius:50%; float:right; margin:0px 0px 10px 10px; box-shadow:1px 2px 3px rgb(30,30,30);}
		
	.droite{width:400px; display:inline-block; padding:0px 20px; position:relative; height:240px;}
	
	#infos{display:inline-block; color:dimgrey; font-size:0.7em; width:100%;}
		.auteur{float:right; margin-bottom:-10px;}
	
	.next{background:deepskyblue; position:absolute; bottom:0px; padding:4px 12px; text-transform:uppercase; font-size:0.9em;}
		.next a{color:white;}
		.next:hover a{text-decoration:underline;}
	
	
	#touslesarticles p span{color:dimgrey;}
		#touslesarticles img{width:50px; margin-right:10px; margin-bottom:-15px;}
	
	.articulos{text-align:center;}
		.articulos div, .articulos div, .articulos div img, .articulos a{display:inline-block; margin:0px; padding:0px;}
		.articulos div{width:200px;	height:250px; background:blue; margin-top:20px; vertical-align:top; background:white;}
		.articulos img{width:200px;}
		.articulos p{margin-top:-4px; padding:3px; text-align:left;}
		
	#allarticles  span{color:dimgrey;}
		#allarticles p{padding-left:5px;}
		#allarticles img{width:75px;}
		
	aside{float:right; width:300px; margin:30px 0px 0px 30px;}
		aside h2{background:lightgray; border-top:5px solid rgb(220,30,30); color:rgb{230,230,230}; padding:10px; font-size:1.2em; text-transform:uppercase;}
		aside p{padding:10px  15px;}
			aside p:hover{background:url('img/line-upred.jpg') left repeat-y;}
			aside p:hover a{color:deepskyblue;}
			
	#auteurs div{display:inline-block; vertical-align:top; width:45%; margin:20px 10px 20px 0px;}
	#auteurs h2{font-weight:normal; background:url('img/line-up.jpg') repeat-y left; padding-left:10px; font-size:1.15em;}
	#auteurs p{text-align:left;}
		#auteurs img{width:150px;}
		#auteurs a{color:dodgerblue;}
		
	#dessins img{display:inline-block; width:190px; height:190px; margin:10px; padding:0px; vertical-align:top; z-index:1;}
	/*#dessins img:hover{filter:opacity(80%);}*/
	/*#dessins p{background:; background:url('img/adoxa.png') no-repeat bottom; background-size:contain;}
	.adoxa{background:blue; background-size:contain; z-index:9; width:190px; height:190px;} */
	#dessins p img{display:inline-block; width:190px; height:190px; margin:0px;}
	
	.diapo{display:flex; flex-wrap:wrap; justify-content:center;}
		.diapo img{margin:0px 5px;}
	.imgc{display:block; max-width:100%; margin:10px auto;}
	.imgd{float:right; margin-left:15px; border-radius:5px;}
	.imgg{float:left; margin-right:15px; border-radius:5px;}
	
	.red{color:rgb(220,30,30); font-weight:bold;}
	.blue{color:dodgerblue; font-weight:bold;}
	.green{color:green; font-weight:bold;}
	.middle{text-align:center; font-style:italic; font-size:0.95em; margin-top:-10px; color:dimgrey;}

	.recit{font-family:recit;}
	.underline{text-decoration:underline;}
	
	.plandusite{}
	
	footer{text-align:center; padding:30px 0px; background:rgba(30,30,30,0.3);}
	footer p{font-size:0.8em;}
	footer p a{color:dimgrey;}
	footer p a:hover{color:white;}

	
	
				/* VERSION MOBILE */
				
	@media screen and (max-width:1024px)
	{
	aside{float:none; width:100%; margin:0px;}
	
	}
	@media screen and (max-width:640px)
	{
		
		iframe{max-width:100%;}
		
	section{min-height:auto;}
	
	article{width:100%; display:inline-block; padding:0px;}
	article h1, article h2, article p{padding:5px 10px;}
	#articles{width:100%; padding:0px;}

		#auteurs {text-align:center;}
		#auteurs div{margin:20px 50px 20px 20px; text-align:left; width:80%;}

	.bloc{width:100%; margin:auto; margin-bottom:50px;}
		.droite{text-align:left;}
		.bloc .droite{width:90%;}
			.bloc img{width:95%; margin-left:2%;}
			.bloc img:hover{filter:opacity(80%);}
			.bloc h2{ margin-bottom:10px;}

	.droite{width:350px; display:inline-block; padding:0px 20px; position:relative; height:240px;}

	#rs{margin:0px 0px -40px 10px;}

	#dessins{text-align:center;}
	#dessins a {background:red; margin:5px;}
	/*#dessins a:hover img{display:none;}*/
	#dessins img{max-width:100%; margin:0px;}


		nav span input:not(:checked) ~ ul { max-height:0; overflow:hidden; transition:0.2s;}
		nav span input:checked ~ ul {max-height:25em; transition:0.2s;}
			
		nav input:not(:checked) ~ p { max-height:0; overflow:hidden; transition:0.2s;}
		nav input:checked ~ p {max-height:25em; transition:0.2s;}

		nav label {display:block; position:static; padding:10px 0px; margin:auto; font-size:1.5em; text-align:center; color:white; transition:0.2s;}
			nav label:before {display:block; background-color:transparent; cursor:hand; }
			nav input:checked + label {-webkit-transform: scale(.8); transform: scale(.8); transition:0.1s;}
	
	}
	
	
				/* POPIN POUR LES DESSINS */
	
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html, button, input, select, textarea {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body {
	margin: 0;
}
.website-content {
	max-width: 980px;
	padding: 20px;
	margin: 0 auto;
}

.smart-popin {
    position: fixed;
    left: 0; right: 0;
    top: 0; bottom: 0;
    background-color: rgba(0,0,0,0.5);
}
.smart-popin .sp-body {
    background-color: #ffffff;
    padding: 2em;
    -webkit-box-shadow: 0 3px 5px 1px rgba(0,0,0,0.25);
    box-shadow: 0 3px 5px 1px rgba(0,0,0,0.25);
}

.smart-popin .sp-table {
    display: table;
    height: 100%;
    width: 100%;
}
.smart-popin .sp-cell {
    display: table-cell;
    vertical-align: middle;
    padding: 10px;
}

.smart-popin .sp-body {
    background-color: #ffffff;
    padding: 2em;
    -webkit-box-shadow: 0 3px 5px 1px rgba(0,0,0,0.25);
    box-shadow: 0 3px 5px 1px rgba(0,0,0,0.25);

    max-width: 50%;
    min-width: 300px;

    margin: 0 auto;
}

.smart-popin {
    position: fixed;
    left: 0; right: 0;
    top: 0; bottom: 0;
    background-color: rgba(0,0,0,0.5);

    overflow: auto;
}

.smart-popin {
    position: fixed;
    left: 0; right: 0;
    top: 0; bottom: 0;
    background-color: rgba(0,0,0,0.5);
    overflow: auto;

    opacity: 0;
    visibility: hidden;
}

.smart-popin {
    position: fixed;
    left: 0; right: 0;
    top: 0; bottom: 0;
    background-color: rgba(0,0,0,0.5);
    overflow: auto;

    opacity: 0;
    visibility: hidden;

    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.smart-popin:target {
    opacity: 1;
    visibility: visible;
}

/*à partir de là, le scroll ne fonctionnait plus dans le code de base, alors j'ai retiré le 'absolute' et laissé vide position:''; juste en-dessous, ce qui a résolu le problème (en fait non)*/
.smart-popin .sp-back {
    position:absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
    display: block;
}
.smart-popin .sp-close {
    position: absolute;
    top: 0;
    right: 0;

    width: 36px;
    height: 36px;

    text-align: center;
    line-height: 36px;
    font-size: 1.6em;
    color: #000000;
    font-weight: 900;
    text-decoration: none;
}