/*********
 * FONTS *
 *********/

@font-face {
	font-family: Simplon;
	src: url(fonts/SimplonNorm-Light.woff);
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: Simplon;
	src: url(fonts/SimplonNorm-LightItalic.woff);
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: Simplon;
	src: url(fonts/SimplonNorm-Medium.woff);
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: Simplon;
	src: url(fonts/SimplonNorm-MediumItalic.woff);
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: SimplonXL;
	src: url(fonts/SimplonNorm-Light-XL.woff);
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: SimplonXL;
	src: url(fonts/SimplonNorm-LightItalic-XL.woff);
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: SimplonXL;
	src: url(fonts/SimplonNorm-Medium-XL.woff);
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: SimplonXL;
	src: url(fonts/SimplonNorm-MediumItalic-XL.woff);
	font-weight: bold;
	font-style: italic;
}

/*****************
 * HTML ELEMENTS *
 *****************/

body
{
	color: #000;
	margin:0;

	font-family: Simplon, HelveticaNeueW01-45Ligh, Helvetica, Arial, SansSerif;
	font-size: 11pt;
	line-height: 1.3em;
	text-align: left;

	/* Do not allow iOS to resize smaller texts (so proportions are kept at all times) */
	-webkit-text-size-adjust: 100%;
	
	/* Might not be used by the Simplon font (?) */
	text-rendering: optimizeLegibility;
	-moz-font-feature-settings: "kern";
	-moz-font-feature-settings: "kern=1";
	-ms-font-feature-settings: "kern";
	-o-font-feature-settings: "kern";
	-webkit-font-feature-settings: "kern";
	font-feature-settings: "kern";
	-webkit-font-feature-settings: "liga" 1;
	-o-font-feature-settings: "liga" 1;
	-moz-font-feature-settings: "liga" 1;
	-moz-font-feature-settings: "liga=1";
	-ms-font-feature-settings: "liga" 1;
	font-feature-settings: "liga" 1;
}

@media screen and (max-width: 639px)
{ 
  	body
  	{
  		font-size: 12pt;
  	}
}

p
{
	margin-top: 0em;
	margin-bottom: 1em;
}

img
{
	text-decoration: none;
	border:none;
	margin-bottom: 1em;
}

table
{ 
	text-align: left; 
	border-collapse:collapse;
}

td
{
	vertical-align: top;
}

p + ul 
{ 
	margin-top: -1em;
}

ul
{
	/* See margin 0 note in h1 below */
	margin: 0px;
	margin-left: -2em;
	margin-bottom: 1em;
}

ul li
{
	list-style: none;
	text-indent: -0.4em;
}

ul li:before
{
	content: "-";

	position: relative;
	left: -0.3em;
}

@media screen and (max-width: 639px)
{
	ul
	{
		margin-left: -2.2em;
	}

	ul li
	{
		text-indent: 0em;
	}
}

blockquote
{ 
	margin: 0px;
	margin-left: 0.9em;
	margin-right: 0.9em;
}

.editheader
{
	margin-bottom: 1em;
	font-style: italic;
}

#editzone
{
	margin-bottom: 2em;
}

#editzone input
{
	margin-bottom: 1em;
}

#editzone form textarea
{
	width: 100%;
	min-height: 350px;
	max-height: 650px;
	margin-bottom: 1em;
}

#editzone [type="text"]
{
	width: 100%;
}


{
	width: 100%;
}

/* pre, del et ins are used mainly in the diff window of sofawiki */

pre
{
	background: white;
	border: 1px #737373 solid;

	padding: 9px;
	
	font-family: Helvetica, Sans-Serif;
	font-size: 0.9em;
	text-align: left;

	overflow: auto;
}

del
{
	background: #eed5d7;

	padding: 0.3em;

	text-decoration: none;
}

ins
{
	background: #d4e8ce;

	padding: 0.3em;

	text-decoration: none;
}

input,
textarea
{
	background: white;
	border: 1px #737373 solid;

	font-family: Helvetica, Arial, SansSerif;
	font-weight: lighter;
	font-size: 0.95em;
	line-height: 1.25em;
}

input[type=submit]
{
	font-family: Simplon, HelveticaNeueW01-45Ligh, Helvetica, Arial, SansSerif;
	font-size: 1em;
}

b,
strong
{
	font-weight: bold;
}

i,
em
{
	font-weight: normal;
	font-style: italic;
}

sup
{ 
	position: relative;
	font-size: 0.6em;
	bottom: -0.1em;
}

sub
{ 
	position: relative;
	font-size: 0.6em;
	bottom: 0.1em;
}

details
{
	cursor: pointer;
}

a,
a:link,
a:visited,
a:active
{
	color: #000;
}

a.invalid
{
	color: #ff7373;
}

hr
{
	clear:both;

	color: #000;
	background-color: #000;

	border: 0;
	width: 100%;
	height: 1px;

	position: relative;
	left: 0px;

	margin: 0px;
	margin-top: 1em;
}

h1
{
	font-family: SimplonXL, HelveticaNeueW01-45Ligh, Helvetica, Arial, SansSerif;
	font-weight: bold;
	font-size: 1.8em;
	line-height: 1.2em;
	page-break-after:avoid;
	
	/* Note : margin 0 disrupts the normal new line to <br> parsing
	after the element, but to ensure maximum flexibility this was adopted.
	In order to override that behaviour, either to remove a bottom margin
	when present like in h1, h2 and ul, or to add a gap when there is
	none like in h3 and h4, you can use the following templates :

	{{nogap}} : removes extra line
	{{nl}} : adds extra line

	*/
	margin: 0px;
	margin-bottom: 0.5em;
}

h1 sup 
{	
	/* (Use exemple, film title : 36 miles^2) */
	font-size: 0.6em;
	bottom: 0em;
}

h2
{
	font-family: SimplonXL, HelveticaNeueW01-45Ligh, Helvetica, Arial, SansSerif;
	font-weight: normal;
	font-size: 1.8em;
	line-height: 1.1em;
	page-break-after:avoid;

	/* See margin 0 note in h1 */
	margin: 0px;
	margin-bottom: 0.5em;
}

h3
{
	font-family: Simplon, HelveticaNeueW01-45Ligh, Helvetica, Arial, SansSerif;
	font-size: 1.25em;
	font-weight: bold;
	page-break-after:avoid;

	/* See margin 0 note in h1 */
	margin: 0px;
}

h4
{
	font-family: Simplon, HelveticaNeueW01-75Bold, Helvetica, Arial, SansSerif;
	font-weight: bold;
	page-break-after:avoid;

	/* See margin 0 note in h1 */
	margin: 0px;
}

h4 a:active
{ 
	font-weight: 700;
}

/***********************
 * NAMED HTML ELEMENTS *
 ***********************/

/* Home */

div.alaffiche
{
	width: 100%;
	margin-bottom: 1em;
}

div.alaffiche a
{
	font-weight: bold;
	text-decoration: none;
}

div.alaffiche img
{
	width: 100%;
	margin-bottom: 0em;
}

div.alaffiche6x
{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 1em;
	justify-content: space-between;
}

div.affiche2x
{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 1em;
	justify-content: space-between;
}

div.affiche2x img
{
	margin-bottom: 0em;
}

div.affiche2x > div > p
{
	margin-bottom: 0;
}

@media screen and (max-width: 799px)
{
	div.alaffiche6x > div
	{
		width: calc(50% - 0.7em);
	}
}

@media screen and (min-width: 800px), print
{
	div.alaffiche6x > div
	{
		width: calc(33% - 1em);
	}
}

@media screen and (max-width: 639px)
{
	div.affiche2x > div
	{
		width: 100%;
	}

	div.affiche2x > div:first-child
	{
		margin-bottom: 1em;
	}
}

@media screen and (min-width: 640px), print
{
	div.affiche2x > div
	{
		width: calc(50% - 0.7em);
	}
}

div.alaffiche1 img,
div.alaffiche2 img,
div.alaffiche3 img,
div.alaffiche4 img,
div.alaffiche5 img,
div.alaffiche6 img
{
	margin-bottom: 0em;
}

div.nouvellesetsorties
{
	display: flex;
	flex-wrap: wrap;
	margin-top: 2em;
	margin-bottom: 3em;
	justify-content: space-between;
}

div.alaffichenouvelles
{
	width: calc(66% - 1em)
}

div.alaffichesorties
{
	width: calc(34% - 1em)
}

div.alaffichesorties > div
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

@media screen and (max-width: 799px)
{
	div.nouvellesetsorties
	{
		flex-direction: column;
	}

	div.alaffichenouvelles
	{
		width: 100%;
		order: 2;
		margin-top: 1em;
	}

	div.alaffichesorties
	{
		width: 100%;
	}

	div.alaffichesorties > div
	{
		flex-direction: row;
	}

	div.alaffichesorties > div > div
	{
		width: calc(50% - 0.7em);
	}
}

@media screen and (min-width: 800px), print
{
	div.alaffichesorties > div > div
	{
		width: 100%;
	}
}

/* Used by youtube and vimeo embeds; Using those two styles,
 * the aspect ratio can be set responsively */

div.youtube,
div.spot
{
	display: inline-block;
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
}

div.youtube > iframe,
div.spot > iframe
{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

div.spotcontainer
{
	display: flex;
	justify-content: space-between;
	margin-bottom: 1em;
}

div.spotlabel > div > p
{
	margin-bottom: 0;
}

@media screen and (max-width: 799px)
{
	div.spotcontainer
	{
		flex-wrap: wrap;
	}

	div.spotvideo
	{
		width: 100%;
		margin-bottom: 1em;
	}

	div.spotlabel
	{
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	div.spotlabel > div
	{
		width: calc(50% - 0.7em);
	}
}

@media screen and (min-width: 800px), print
{
	div.spotvideo
	{
		width: calc(66% - 1em);
	}

	div.spotlabel
	{
		width: calc(34% - 1em);
	}

	div.spotlabel > div:first-child
	{
		margin-bottom: 1em;
	}
}

/* Used on the page detailling
 * the featured films in the spot */

div.spotfilm
{
	display: flex;
	justify-content: space-between;
}

img.spotfilm
{
	width: 100%;
}

@media screen and (max-width:799px) 
{
	div.spotfilm
	{
		flex-wrap: wrap;
	}

	div.spotfilm1,
	div.spotfilm2
	{
		width: 100%;
	}

	img.spotfilm
	{
		margin-bottom: 1em;
	}
}

@media screen and (min-width: 800px), print
{
	div.spotfilm1
	{
		width: calc(34% - 1em);
	}

	div.spotfilm2
	{
		width: calc(66% - 1em);
	}
}

/* News */

span.nouvelle
{
	font-size: 1.3em;
	font-weight: bold;
	page-break-after:avoid;
}

span.nouvelle a
{
	text-decoration: none;
}

span.nouvelle a:hover
{
	text-decoration: underline;
}

div.nouvelleimagecontainer
{
	margin-bottom: 1em;
}

div.nouvelleimage
{
	display: flex;
	justify-content: space-between;
	margin-top: 0.7em;
}

div.nouvelleimage1 > img
{
	width: 100%;
}

img.imageborder
{
	border: 1px solid #000;
	box-sizing: border-box;
}

@media screen and (max-width: 799px)
{
	div.nouvelleimage
	{
		flex-wrap: wrap;
	}

	div.nouvelleimage1
	{
		width: 100%;
		margin-bottom: 1em;
	}

	div.nouvelleimage2
	{
		width: 100%;
	}
}

@media screen and (min-width: 800px), print
{
	div.nouvelleimage1
	{
		width: calc(34% - 1em);
	}

	div.nouvelleimage2
	{
		width: calc(66% - 1em);
	}
}

div.archivesnouvelles
{
	word-spacing: 0.2em;
	max-width: 880px;
	padding-right: 10%;
}

@media screen and (max-width: 639px)
{
	div.archivesnouvelles
	{
		word-spacing: 0.1em;
	}
}

/* Film */

div.film
{
	display: flex;
	justify-content: space-between;
}

@media screen and (max-width: 799px)
{
	div.film
	{
		flex-direction: column;
	}

	div.film > div
	{
		width: 100%;
	}

	div.film > div:first-child
	{
		margin-bottom: 1em;
	}
}

@media screen and (min-width: 800px), print
{
	div.film
	{
		margin-bottom: 1em;
	}

	div.film > div
	{
		width: calc(50% - 0.7em);
	}
}

/* Agenda */

div.agenda
{
	display: flex;
	justify-content: space-between;
}

@media screen and (max-width: 799px)
{
	div.agenda
	{
		flex-direction: column;
	}

	div.agenda > div
	{
		width: 100%;
	}

	div.agenda > div > p:first-child
	{
		margin-bottom: 0;
	}

	div.agenda > div:first-child
	{
		margin-top: 1em;
		margin-bottom: 1em;
		order: 2;
	}
}

@media screen and (min-width: 800px), print
{
	div.agenda
	{
		margin-bottom: 1em;
	}

	div.agenda > div
	{
		width: calc(50% - 0.7em);
	}
}

/* Liens */

div.liens
{
	display: flex;
	justify-content: space-between;
}

@media screen and (max-width: 799px)
{
	div.liens
	{
		flex-direction: column;
	}

	div.liens > div
	{
		width: 100%;
	}

	div.liens > div > p:first-child
	{
		margin-bottom: 0;
	}
}

@media screen and (min-width: 800px), print
{
	div.liens
	{
		margin-bottom: 1em;
	}

	div.liens > div
	{
		width: calc(50% - 0.7em);
	}
}

/* Contact */

div.contacts
{
	display: flex;
	justify-content: space-between;
	margin-top: 1em;
}

div.contacts > div > p
{
	margin-bottom: 0;
}

@media screen and (max-width: 799px)
{
	div.contacts
	{
		flex-direction: column;
	}

	div.contacts > div
	{
		width: 100%;
	}

	div.contacts > div > p:first-child
	{
		margin-bottom: 0;
	}

	div.contacts > div:first-child
	{
		margin-bottom: 1em;
	}
}

@media screen and (min-width: 800px), print
{
	div.contacts1
	{
		width: calc(34% - 1em);
	}

	div.contacts2
	{
		width: calc(66% - 1em);
	}
}

div.googlemap
{
	display: inline-block;
	position: relative;
	width:100%;
	height:0;
	padding-bottom: 50%;
}

div.googlemap > iframe
{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;

	border:0;
	margin:0;
}

/* Resultats */

div.resultats
{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

div.resultats > div > p:first-child
{
	margin-bottom: 0;
}

@media screen and (max-width:499px)
{
	div.resultats > div
	{
		width: 100%;
	}
}

@media screen and (min-width:500px) and (max-width:869px)
{
	div.resultats > div
	{
		width: calc(50% - 1em);
	}
}

@media screen and (min-width: 870px), print
{
	div.resultats > div
	{
		width: calc(33% - 0.7em);
	}
}

/* Span found is used in search results */

span.found 
{
	background: #d4e8ce;
}

div.menuseparation
{
	display: none;
}

@media screen and (max-width: 639px)
{
	div.menuseparation
	{
		display: block;
	}
}

sup.alinea
{
	position: relative;
	font-size: 0.75em;
	top:0.35em;
	left:-1em;
	margin-right: -0.65em;
}

span.espacelarge
{
	word-spacing: 0.2em;
}

@media screen and (min-width: 940px), print
{
	span.espacelarge
	{
		word-spacing: 0.8em;
	}
}

/* Used in yearly financing report */

table.outlinetable
{
	max-width: 100%;
}

table.outlinetable td
{
	border: 1px black solid;
	padding: 0.5em;
}

/* Linked files icons */

a.sw-pdf 
{
	padding-right: 2em;
	background: url('../files/pdf-icon.gif') no-repeat center right;
	background-size: 1.5em;
}

a.sw-xlsx 
{
	padding-right: 2em;
	background: url('../files/excel-icon.gif') no-repeat center right;
	background-size: 1.5em;
}

a.sw-xls 
{
	padding-right: 2em;
	background: url('../files/excel-icon.gif') no-repeat center right;
	background-size: 1.5em;
}

a.sw-docx 
{
	padding-right: 2em;
	background: url('../files/word-icon.gif') no-repeat center right;
	background-size: 1.5em;
}

a.sw-doc
{
	padding-right: 2em;
	background: url('../files/word-icon.gif') no-repeat center right;
	background-size: 1.5em;
}

a.sw-zip
{
	padding-right: 2em;
	background: url('../files/zip-icon.gif') no-repeat center right;
	background-size: 1.5em;
}

/* Used in sofa wiki admin errors, above the search box */

span.error 
{
	color: red;
}

/* Can be used to counter the auto margin-bottom of headings and uls */

div.nogap
{
	margin-top: -1em;
}

/* Used on manual page */ 

div.example
{
	padding: 3%;
	background: #DDD;
	margin-bottom: -0.8em;
}

/******************
 * NAMED ELEMENTS *
 ******************/

@media screen and (min-width: 640px), print
{ 
	#main
	{
		width: 100%;
	}

	#menumobile
	{
		display: none;
	}
}

@media screen and (min-width: 940px), print
{ 
	#main
	{
		width: 880px;
		max-width: 880px;
		margin: 0px auto 0;
	}
}

#search
{
	position: relative;
	width: 95%;
	left: -2px;
} 

#search form input
{
	color: #000;

	border: 1px #737373 solid;

	font-family: Simplon, HelveticaNeueW01-45Ligh, Helvetica, Arial, SansSerif;
	font-size: 1em;

	width: 100%;
}

#maincontent
{
	width: 100%;
}

#main
{
	display: flex;
	padding-top: 33px;
}

#menu
{
	margin-right: 33px;
	width: 200px;
	min-width: 200px;
}

#menu a
{
	text-decoration: none;
}

#menu hr
{
	margin-top: 0;
}

#menumobile
{
	display: none;
	cursor: pointer;
	margin-top: 10px;
	width: 40px;
}

#toplogolinks
{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	height: 40px;
	margin-top: 13px;
	margin-bottom: 47px;
	width:100%;
}

#toplogolinks a img
{
	height: 40px;
}

#logo
{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	margin-bottom: 13px;
}

#logo a
{
	width: 100%;
}

#logoimg
{
	width:100%;
}

#intranet
{
	font-size: 8px;
	text-align: right;
	width: 100%;
}

#intranet a
{
	color: #aaa;
}

#devlabel
{
	color:red;
	width:100%;
}

.formulairesnav
{
	box-sizing: border-box;
	border: 1px solid gray;
	background: lightgray;
	padding: 10px;
}

.greenlinkcontainer
{
	position: relative;
}

.greenlink
{
	position: absolute;
	width:40px;
}

.greenlink > img
{
	position: absolute;
	width: 40px;
}


@media screen and (max-width: 639px) 
{ 
	#main
	{
		flex-direction: column;
	}

	#logo
	{
		margin-bottom: 0;
	}

	#logoimg
	{
		width:225px;
	}

	#toplogolinks
	{
		height: 25px;
		margin-bottom: 0;
	}

	#toplogolinks a img
	{
		height: 25px;
	}

	#greenmanifesto
	{
		display: none;
	}

	#menu
	{
		width:100%;
		margin-right: auto;
		font-size: 1.25em;
		line-height: 1.2em;
	}

	#menumobile
	{
		display: block;
	}

	#menutogglablecontent
	{
		display: none;
	}

	#search
	{
		margin-bottom: 0.5em;
	}

	#devlabel
	{
		font-size: 100%;
	}
}

@media screen and (min-width: 640px), print
{
	#content 
	{
		top:138px;
	}
}

@media screen and (max-width: 939px)
{ 
	#main{
		width: auto;
		padding-left: 20px;	
		padding-right: 20px;
	}
}

/* Page title/name (swParsedName) */

#contenttitle
{
	margin-bottom: 0.5em;
}

/* Contains social media */

#footer 
{  
	text-align: right;
	margin-top: 1em;
}

#retweet{
	position: relative;
	top: 0.1em;
	height: 1em;
}

#fbshare{
	position: relative;
	top: 0.1em;
	height: 1.2em;
}

@media screen and (max-width: 799px)
{
	#retweet 
	{
		top: 0.2em;
		height: 1.2em;
	}

	#fbshare{
		top: 0.3em;
		height: 1.5em;
	}
}

@media screen and (max-width: 639px)
{
	#retweet 
	{ 
		top: 0.3em;
		height: 1.4em;
	}

	#fbshare{
		top: 0.4em;
		height: 1.6em;
	}
}

#leftimage,
#rightimage
{
	position: fixed;
	top: 0px;
	width: 10px;
	height: 100%;

	background-size: cover;
	background-repeat: no-repeat;
	
	z-index: -1;
}

#leftimage
{
	left: 0px;
	background-position: right top;
}

#rightimage
{
	right: 0px;
	background-position: left top;
}	

@media screen and (max-width: 1023px)
{ 
	#leftimage,
	#rightimage
	{
		display: none;
	}
}

/* Used in many SofaWiki pages */

#editzone table
{
	width:100%;
}

#help
{
	background: lightgray;
	padding: 0.5em;
}

/* Print */

@media print
{
	#menu,
	#menumobile,
	#leftimage,
	#rightimage,
	div.youtube,
	div.spot
	{
		display: none;
	}

	#content
	{
		margin-left: 0px;
	}

	#logo
	{
		position: relative;
		margin-bottom: 1em;
	}
}