/*
- grouper les icônes dans un css-sprite ?
- mettre des faux-columns sur le .liensinternes, parce que c'est nécessaire sur mobile avec de longs titres de films
- voir que faire avec les figures, il y en a sur index.php et sur librairies.php; j'alourdis innécessairement le code en mette section.culture figure ?
- changez les classes FR NLFR NL en minuscules, mais ça nécessite bcp de changements dans le code php
CONVENTIONS
- largeur des images : 300px
- nécessaire d'avoir des section.texte ?

*/

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 400;
  src: local('Dosis Regular'), local('Dosis-Regular'), url(https://fonts.gstatic.com/s/dosis/v4/4hYyXH_8WmbBLamf6WjLwg.woff2) format('woff2'), url(https://fonts.gstatic.com/s/dosis/v4/xIAtSaglM8LZOYdGmG1JqQ.woff) format('woff');
}

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;} * { box-sizing:border-box; }
 
/*_______________________________________________________________________________________________________________*/
html	{ font-family: 'Dosis', Georgia, serif; font-size:100%; color:black; line-height:1.5rem; 
	background-color:transparent; }
body	{ line-height:1.5rem; background-color:hsla(117, 29%, 86%, 1); border:1px solid black; position:relative; } 

/*______________________éléments individuels_____________________________________________________________________*/
h1, h2	{ text-align:center; font-weight:bold; color:hsla(117, 29%, 86%, 1) ; }
h1	{ position:relative; font-size:2rem; line-height:140%; text-shadow:0 1px black; text-decoration:none; padding:0 2rem; margin:2rem 0; }
h2	{ position:relative; font-size:1.2rem; 
	background:linear-gradient(to right, hsla(117, 69%, 21%, 1) 0%, hsla(117, 69%, 16%, 1) 20%, hsla(117, 69%, 16%, 1)80%, 
	hsla(117, 69%, 21%, 1) 100%); margin-top:3rem;  } /*voir footer pour mise en forme*/
h2:first-of-type	{ margin-top:0; }
h2 a:after	{ content:""; } /*pour éviter la fléchette quand je mets une ancre (a id)*/
h3	{ font-weight:900; text-shadow:2px 2px 2px black; position:relative; padding-bottom:1rem; }

strong	{ font-weight:bold; font-style:italic; }

a:link	{ display:inline-block; color:inherit; text-decoration:underline; padding:1px; }
a:visited	{ color:inherit; }
a:active	{ position:relative; top:-1px; }
a:after	{ content:url('../images/siteexterne.svg'); display:inline-block; margin-left:0.5rem; }
a[href*="@"]:after, section.culture a[href*="@"]:after
	{ content:url('../images/courriel.svg'); display:inline-block; margin-left:0.5rem; }
li	{ position:relative; }
table	{ width:100%; border-radius:6px; border-collapse:collapse; table-layout:fixed; vertical-align:top !important; }
th	{text-align:left; border-bottom:2px solid black; }



/*______________________header___________________________________________________________________________________*/
header	{ background-color:inherit; position: relative; }
header nav	{ position:relative; }
/* pour mettre gand.gent en évidence sur la page */


header ul	{ background-color:hsla(0,0%,0%,0); text-align:right; 
	position:absolute; top:0; margin-left:3.5rem;  }
header li	{ display:inline-block; vertical-align:bottom; color:black; font-weight:bold; padding:0.5rem 0 0 0.6rem; }
header a:link	{ 
	display:block; background-color:hsla(117, 29%, 86%,0.4); text-decoration:none; border:1px solid hsla(117, 29%, 86%,0.7); border-radius:50%; height:3rem; width:3rem; 
	text-align:center; font-weight:bold; color:hsla(90,0%,20%,0.8) ; font-size:60%; line-height:2.5rem; 
	}
header a:after	{ content:""; }	/* pour éviter la flèche après le lien*/



/*______________________footer___________________________________________________________________________________*/
footer ul	{ border:3px solid black; }
footer ul li	{display:inline-block; width:33%; vertical-align:top; text-align:center; border-left:3px solid black; }
footer ul li:first-of-type
	{border-left:0; }
footer a:link:after	{content:""; }



/*______________________section.culture__________________________________________________________________________*/
section.culture	{ margin:1rem; padding:0.5rem; background-color:hsla(90,97%,17%,1); 
	box-shadow: 5px 5px 25px hsla(117, 29%, 36%, 1), -5px -5px 25px hsla(117, 29%, 36%, 1) ; 
	border:3px solid hsla(117, 69%, 6%, 1); border:3px solid transparent; border-radius:6px; color:hsla(117, 29%, 86%, 1); }
section > p	{ margin:0; padding: 0 1rem; background-color:hsla(117, 29%, 86%, 1); border:1px solid hsla(117, 69%, 16%, 1); border-radius:2px; }
section > p:first-of-type
	{margin-top:1rem; }
section > p:last-of-type
	{margin-bottom:1rem; }
section p + p	{margin-top:0rem!important;}	
section.culture + section.culture
	{ margin-top:3rem !important; }
section.culture p	{ color:black; }
section.culture figure	{ display:block; vertical-align:top; position:relative; margin-bottom:1rem; padding-right:0.5rem; }	
section.culture figcaption
	{width:90%; }
/*section.titre p	{ display:inline-block; }*/
/*section.titre h3, section.titre img*/
/*	{ display:inline-block; width:50%; vertical-align:top ; position:relative; }	*/
/*section.titre img*/
/*	{  }*/
/*section.culture h3	{ padding-right:0.5rem; }*/
/*section.titre img	{ border-radius:6px; float:right; margin-left:.5rem; }*/
section.culture figure img
	{ border-radius:6px; width:90%; }

li.date, li.categorie, li.activite, li.lieu, li.info, li.genre, li.cinema, li.horaire, li.tickets, li.facebook
	{ position:relative; margin-top:2rem; }
li.activite, li.info	{ text-align:justify; }
li.date:before, li.categorie:before, li.activite:before, li.lieu:before, li.info:before, li.genre:before, li.cinema:before, li.horaire:before, li.tickets:before, li.facebook:before
	{ position:absolute; top:-1.5rem; width:10rem; padding-right:1rem; text-align:left; font-weight:bolder; }
li.activite:before { content:"activité : "; }
li.categorie:before { content:"catégorie : "; } 
li.date:before	{ content:"date : "; } 
li.lieu:before	{ content:"lieu : "; }
li.info:before	{ content:"info : "; }
li.genre:before	{ content:"genre :"; }
li.cinema:before	{ content:"cinéma :"; }
li.horaire:before	{ content:"horaire :"; }
li.tickets:before	{ content:"tickets :";}
li.facebook:before	{ content:"facebook :"}

p.textelong + p	{ margin-top:1rem; }
p.textelong a:link	{ padding-top:1px; }
p.textelong a:hover	{ padding-top:0; }

table.horaire	{ border:1px solid hsla(117, 29%, 86%, 1); }
table.horaire td, table.horaire tr
	{ padding-left:.5vw; }
table.horaire td	{ width:14.285714286%; overflow:hidden;  }	
table.horaire td:nth-child(-n+8)
	{ border-left:1px solid hsla(117, 29%, 86%, 1); }
table.horaire tr:nth-child(2)
	{ border-bottom:1px solid hsla(117, 29%, 86%, 1);}
span.abreviation	{ display:none; }

/*______________________section.librairie________________________________________________________________________*/
section.librairie	{ padding:2rem 2rem 0 0; } 
section.librairie section, figure.librairie
	{ display:block; margin-left:2rem; }
section.librairie section
	{ background-color:hsla(117, 40%, 36%, 1); box-shadow:0px 0px 5px black; border:0px solid black;  }
figure.librairie	{  }
figcaption a	{ display:block; }
figcaption	{ text-align:left; color:hsla(117, 69%, 16%, 1); font-weight:bold; text-shadow:1px 1px hsla(117, 29%, 86%, 1); 
margin-bottom:2rem; }
img.librairie	{ display:block; box-shadow:0px 0px 5px black; border:2px solid black; max-height:70vh; max-width:100%; 
	margin: 0 auto !important; }
section.librairie p + p	{ margin-top:1rem; }


dl.etablissments	{ width:100%; }
dt, dd	{ display:block !important; margin:0; padding:0; }
dt	{ margin-top:1rem; border-top:1px dotted darkred; padding-left:5rem; padding-top:.5rem; padding-bottom:.5rem; font-weight:bold;  }
dd	{ padding:0 1rem; }

/*______________________liensinternes____________________________________________________________________________*/
ul.liensinternes li.disparu
	{ display:none !important; }

ul.liensinternes	{ margin-bottom:3rem; position:relative; 
	border-left:1px solid hsla(117, 69%, 16%, 1); border-top:1px solid hsla(117, 69%, 16%, 1); 
	background-color:hsla(117, 40%, 36%, 1); }
li.liensinternes	{ width:50%; display:inline-block; vertical-align:top; 
	border-right:1px solid hsla(117, 69%, 16%, 1); border-bottom:1px solid hsla(117, 69%, 16%, 1); }

a.liensinternes	{ display:block; height:3rem; font-weight:bold; padding-left:2vw; text-decoration:underline; }
a.liensinternes:hover
	{ background-color:hsla(117, 69%, 16%, 1); border:0; border-radius:0; 
	color:hsla(117, 29%, 86%, 1); padding-left:2vw; text-decoration:none;  } /*bg-color = bg-color de section.culture */
ul.liensinternes a:after, table.avenir a.liensinternes:after	
	{ content:url('../images/flecheverslebas.svg'); display:inline-block; width:1.5rem; border:1px solid black; background-color:hsla(117, 29%, 86%, 1); border-radius:50%; position:absolute; right:0rem; bottom:0; }
 	
table.avenir	{ width:100%; margin-bottom:3rem; border-width:1px; border-collapse:collapse;
	vertical-align:top !important; background-color:hsla(117, 40%, 36%, 1); border-radius:0; }	
table.avenir td, th	{ padding-left:2px; vertical-align:top; border:0; 
	position:relative;}
table.avenir tr + tr	{ border-top-width:1px; }
table.avenir td + td	{ border-left-width:1px; }
table.avenir th + th	{ border-left-width:0px; }
table.avenir td:first-child, table.avenir th:first-child
	{ width:4.2rem;}
table.avenir th:nth-child(2)
	{ padding-left:45px; }
table.avenir td:last-child, table.avenir th:last-child
	{ width:6rem; }
table.avenir a:link	{display:block; }
table.avenir a:link:hover
	{ background-color:hsla(117, 69%, 16%, 1); border-radius:0;  }
table.avenir a.liensinternes
	{ height:auto; }
table.avenir, table.avenir td, table.avenir th, table.avenir tr
	{ border-color:hsla(117, 69%, 16%, 1); border-style:solid;  }

a.top	{ display:inline-block; width:2rem; height:2rem; border:1px solid black; border-radius:50%;
	position:absolute; text-align:center; 
	background-color:hsla(117, 29%, 86%, 1); 
	color:black; font-weight:900; text-shadow:2px 2px 2px black; font-size:100%; z-index:10; }
a.top:after	{ content: none; }
a.top:hover	{ background-color:hsla(117, 69%, 16%, 1); border-radius:50%; border:1px solid hsla(117, 69%, 16%, 1); }
h2 a.top	{ left:1.5rem; }
h3 a.top	{ top:0; right:0rem; }
		
/*______________________ul liens externes________________________________________________________________________*/	
ul.liensexternes	{ list-style-type:none;  }
ul.liensexternes li + li
	{ margin-top:0.5rem; }	
ul.liensexternes a:link	{ display:block; border:1px solid black; border-radius:6px; padding:0.5rem; }

/*______________________footer___________________________________________________________________________________*/
h2, footer, h1	{ background-color:hsla(117, 69%, 16%, 1); color:hsla(117, 69%, 86%, 1); padding:0.5rem; }
footer	{ margin-top:1rem; border-bottom:3px solid hsla(117, 69%, 16%, 1); } /* même couleur que son bg-color*/

/*______________________classes & id's___________________________________________________________________________*/
.disparu	{ display:none !important; }
.textelong	{ text-align:justify; margin:1rem 0; padding:1rem; background-color:hsla(117, 69%, 16%, .2); border:0px solid hsla(117, 69%, 16%, .2); border-radius:10px; }
.texte	{ padding:0.5rem; margin:1rem; }	 
.notabene	{ font-style:italic; }
.lienverstop:after	{ content:""; }
.FR:before, .NLFR:before, .NL:before
	{ margin-right:4px; opacity:0.5}
.NLFR:before	{ content:url(../images/flamandfrancais.png); }
.FR:before	{ content:url(../images/francais.gif)}
.NL:before	{ content:url(../images/flamand.gif)}

div#avisalapopulation	{ margin:2rem 0; padding:2rem; background-color:#255203; border:2px solid darkred; border-radius:20px; text-align:center; font-family:"Courier New", Garamond, "Times New Roman"; font-size:2rem; text-shadow: 2px 0px darkred; }

div#avisalapopulation p + p
	{ margin-top:1rem; }
#pageactuelle	{ background-color:hsla(117, 69%, 16%, 1); border:3px solid hsla(117, 69%, 16%, 1); color:hsla(117, 69%, 86%, 1); }
#archive	{ display:none; }
#paysage	{ width:100%; 
	}


img.mediassociaux	{ display:inline; border:0; position:static; width:30px !important; }
header a.mediassociaux	{ display:inline !important; border:0 !important; padding:0; margin:0; position:absolute; background-color:hsla(117, 29%, 86%, 0); }
a.mediassociaux.gauche	{ left:0px; top:10px; }
a.mediassociaux.droite	{ right:0px; top:10px; }



/*_____________________media queries_____________________________________________________________________________*/



@media only screen and (min-width:54em)
{
	html	{ font-size:120%; }
	body	{ background-color:hsla(117, 69%, 16%, .2); 
		box-shadow:10px 0px 20px hsla(117, 69%, 6%, 1), 
		-10px 0px 20px hsla(117, 69%, 6%, 1), 0px 10px 20px hsla(117, 69%, 6%, 1), 0px -10px 20px 
		hsla(117, 69%, 6%, 1); }
	main	{ width:80%; margin:0 auto; padding:0; background-color:transparent; }

	h1	{ 
		background-color:hsla(117, 69%, 16%, 0); 
		color:green; 
		padding-bottom:1rem;
		   }
	h2 {	margin:3rem -12.5% !important; color:hsla(117, 29%, 86%, 1); 
		text-shadow:1px 0px black !important; }
	h2:first-of-type 	{ margin-top:0;}
	a:hover	{ border:1px solid black; border-radius:6px; padding:0; }
	h2 a:hover	{ border:1px solid transparent; }

	/*_____________________header____________________________________________________________________________________*/
	header	{ border:0; color:black; 
/*		background-color:hsla(90,97%,17%,1);*/
	 }
	header ul	{ text-align:center; }	
	header nav	{ position:static; height: 235px; 
		background-image: url("../images/gand.jpg"); background-size:cover; background-repeat:no-repeat; }
	header nav ul	{ width:100%; padding-top:2rem; padding-left:15%; padding-bottom:1rem; margin:0;}	
	header nav li	{ display:inline-block; position:relative; vertical-align:top; margin:0 auto; padding:0; padding-left:8%;  
		  border:0; background-color:transparent; 
		  }
	header li.interne	{ width:auto; }
	header nav li.interne a:link
		{ display:inline-block; height:7rem; width:7rem; margin:0 auto; padding:0; 
		border:1px solid hsla(117, 69%, 16%, .1); border-radius:50%; background-color: hsla(117, 69%, 16%, .2); font-weight:bolder; color:hsla(117, 69%, 14%, 1) ; text-shadow:1px 0px hsla(117, 69%, 14%, 1); text-align:center; line-height:6rem; color:black; font-size:inherit; 
		}
	header nav ul li.interne a:hover
		{ background-color:hsla(117, 69%, 16%, 1) !important; padding:0px; 
		border:1px solid hsla(117, 69%, 16%, 1); border-radius:50%; 
		text-shadow:1px 0px black; font-style:oblique; color:hsla(117, 69%, 86%, 1); }
	header nav li a:active	{ position:relative; left:1px; border:0px; }
	/*______________________liens internes__________________________________________________________*/
	table.avenir th:nth-child(1)
		{ width:6rem; }	
	table.avenir th:nth-child(3)
		{ width:9rem; }
	table.avenir a:link	{ border:0; padding:1px; }	
	table.avenir a.liensinternes:hover
		{ text-decoration:none; }
	a.liensinternes	{ min-height:2rem; }
	h2 a.top	{ top:0; left:2rem; }
	h3 a.top	{ top:0; left:-6.5rem; }	
		
	ul.liensinternes a:after, table.avenir a.liensinternes:after	
	{ top:5px; bottom:auto; right:1rem;  }
	ul.liensexternes a:hover{ background-color:hsla(117, 69%, 16%, 1); color:hsla(117, 29%, 86%, 1) !important; }
	header nav li a:active	{ position:relative; left:1px; border:0px; }	
	h2, footer	{ background-color:hsla(90,97%,17%,1); color:hsla(117, 29%, 86%, 1); }
	footer	{ background-color:hsla(117, 69%, 16%, 1) ; }
	footer a:link	{ padding:1px; }
	footer a:hover	{ border:1px solid black; padding:0px; }

	/*_____________________section.culture___________________________________________________________________________*/
	section.culture	{ background-color:hsla(117, 40%, 36%, 1); box-shadow:0px 0px black; margin:0; }
	section.culture:last-child
		{ margin-bottom:2rem ; }
	section.culture figure	{ width:40%; padding-top:0; }
	section.culture h3	{ width:100%; height:2rem; margin-bottom:1rem; font-size:1.2rem; color:white; position:relative; }
/*	a.top	{ position:absolute; top:0; left:-5rem; color:black; }*/
	section.culture figure, section.culture > ul
		{ display:inline-block; vertical-align:top; }
	section.culture > ul	{ width:60%; padding-left:3rem; position:relative; text-align:justify; vertical-align:top; padding-top:0; }	
	section.culture figure img
		{ display:block; border-radius:5px; width:75%; height:auto; float:none; margin:0; }
	section.culture figcaption
		{ width:75%; }
	li.date, li.categorie, li.activite, li.lieu, li.info, li.cinema, li.horaire, li.genre, li.tickets, li.facebook
		{ position:relative; padding-right:1rem; margin-top:1rem; }
	section.culture ul li:first-child
		{ padding-right:0; width:100%; margin-top:0rem; 
		/*padding-top:-2rem;*/
		 }
	li.date:before, li.categorie:before, li.activite:before, li.lieu:before, li.info:before, li.cinema:before,
	li.horaire:before, li.genre:before, li.tickets:before, li.facebook:before
		{ font-weight:bold; width:10rem; padding-right:1rem; text-align:right;
		position:absolute; top:0px; left:-12rem; }
	span.abreviation	{ display:inline; }
	
	/*______________________section.librairie________________________________________________*/
	section.librairie	{ padding-right:0; } 
	section.librairie h2	{ margin-bottom: 0rem; }
	section.librairie section, figure.librairie
		{ display:block; vertical-align:top; margin-left: 0; }
	section.librairie section
		{ padding-left:2rem;  }
	figure.librairie	{ width:60%; margin:0 auto; }
	figcaption a	{ display:block; }
	img.librairie	{ max-height:70vh; max-width:100%; margin-right:auto !important; }	

	span.br	{ display:none; }
	.texte	{ margin:0; margin-top:1rem; padding:0.5rem;
		border:0; border-radius:6px; 
		background-color:hsla(117, 40%, 36%, 1);		
		box-shadow: 5px 5px 25px hsla(117, 29%, 36%, 1), -5px -5px 25px hsla(117, 29%, 36%, 1) ; }
	#paysage	{ display:none; }	
	#pageactuelle:hover	{ font-style:normal; text-shadow:0px 0px hsla(117, 69%, 14%, 1); }
	#archive	{ display:inline-block; width:10rem; float:right; }
	
	dl.etablissements dd	{padding:0; margin:0; }
	dt	{ vertical-align:top; }
	dt, dd	{ border-top:dotted green 1px; padding-top:.5rem; }
	dt, dd	{margin:0; padding:0; }
	dt	{ float:left; width:10rem; clear:left; }
	dd	{ padding-left:11rem; clear:right; margin-bottom:2rem !important; }

	
	img.mediassociaux	{ display:inline; border:0; position:static; width:30px !important; }
	header a.mediassociaux	{ display:inline-block !important; border:0 !important; padding:0; margin:0; position:absolute; background-color:hsla(117, 29%, 86%, 0); width:30px; height:30px; }
	a.mediassociaux.gauche	{ left:30px; bottom:10px; }
	a.mediassociaux.droite	{ right:30px; bottom:10px; }
	.NLFR:before	{ content:url(../images/flamandfrancais.png); margin-right:4px; opacity:0.5}
	.FR:before	{ content:url(../images/francais.gif); margin-right:26px; opacity:0.5}
	.NL:before	{ content:url(../images/flamand.gif); margin-right:26px; opacity:0.5}

}