/* Polices incluses */
/* http://typographisme.net/post/Bonnes-pratiques-pour-les-d%C3%A9clarations-@font-face */
@font-face {
	font-family:		'Shark Random Funnyness 2';
	src:				url('fonts/srf2.gz.eot');
	src:				url('fonts/srf2.gz.eot?') format('embedded-opentype'),
						url('fonts/srf2.woff') format('woff'),
						url('fonts/srf2.gz.ttf') format('truetype'),
						url('fonts/srf2.gz.svg#SharkRandomFunnyness2Regular') format('svg');
	font-weight:		normal;
	font-style:			normal;
}

@font-face {
	font-family:		'TeX Gyre Bonum';
	src:				url('fonts/texgyrebonum-regular.gz.eot');
	src:				url('fonts/texgyrebonum-regular.gz.eot?') format('embedded-opentype'),
						url('fonts/texgyrebonum-regular.woff') format('woff'),
						url('fonts/texgyrebonum-regular.gz.ttf') format('truetype'),
						url('fonts/texgyrebonum-regular.gz.svg#TeXGyreBonumRegular') format('svg');
	font-weight:		normal;
	font-style:			normal;
}

@font-face {
	font-family:		'TeX Gyre Bonum';
	src:				url('fonts/texgyrebonum-bold.gz.eot');
	src:				url('fonts/texgyrebonum-bold.gz.eot?') format('embedded-opentype'),
						url('fonts/texgyrebonum-bold.woff') format('woff'),
						url('fonts/texgyrebonum-bold.gz.ttf') format('truetype'),
						url('fonts/texgyrebonum-bold.gz.svg#TeXGyreBonumBold') format('svg');
	font-weight:		bold;
	font-style:			normal;
}

@font-face {
	font-family:		'TeX Gyre Bonum';
	src:				url('fonts/texgyrebonum-italic.gz.eot');
	src:				url('fonts/texgyrebonum-italic.gz.eot?') format('embedded-opentype'),
						url('fonts/texgyrebonum-italic.woff') format('woff'),
						url('fonts/texgyrebonum-italic.gz.ttf') format('truetype'),
						url('fonts/texgyrebonum-italic.gz.svg#TeXGyreBonumItalic') format('svg');
	font-weight:		normal;
	font-style:			italic;
}

@font-face {
	font-family:		'TeX Gyre Bonum';
	src:				url('fonts/texgyrebonum-bolditalic.gz.eot');
	src:				url('fonts/texgyrebonum-bolditalic.gz.eot?') format('embedded-opentype'),
						url('fonts/texgyrebonum-bolditalic.woff') format('woff'),
						url('fonts/texgyrebonum-bolditalic.gz.ttf') format('truetype'),
						url('fonts/texgyrebonum-bolditalic.gz.svg#TeXGyreBonumBoldItalic') format('svg');
	font-weight:		bold;
	font-style:			italic;
}

@font-face {
	font-family:		'Rochester';
	src:				url('fonts/rochester-regular.gz.eot');
	src:				url('fonts/rochester-regular.gz.eot?') format('embedded-opentype'),
						url('fonts/rochester-regular.woff') format('woff'),
						url('fonts/rochester-regular.gz.ttf') format('truetype'),
						url('fonts/rochester-regular.gz.svg#RochesterRegular') format('svg');
	font-weight:		normal;
	font-style:			normal;
}

@font-face {
	font-family:		'icomoon';
	src:				url(fonts/mediapart-icon.woff2) format("woff2"),
						url(fonts/mediapart-icon.woff) format("woff");
	font-weight:		400;
	font-style:			normal
}

/* Définitions de feuilles de styles ASPERANSA */
body {
	background-color:	#fefece;
	background-image:	url(/pict/suntile.jpg);
	background-attachment: fixed;
	font-family:		"Bookman Old Style", "Book Antiqua", "URW Bookman L", Georgia, "Times New Roman", Times, serif;
	font-size:			13pt;
	-webkit-hyphens:	auto;
	-moz-hyphens:		auto;
	-ms-hyphens:		auto;
	-o-hyphens:			auto;
	hyphens:			auto;
	margin:				3em 3%;
	position:			relative;
	text-align:			justify;
}

div.menu_l {
	text-align:			left;
	float:				left;
	width:				240px;
	padding:			1em 0.5em 1em 0;
	margin:				1em 1em 1em 0;
	border:				medium outset #eee;
	border-color:		#f8f8f8 #808080 #808080 #f8f8f8;
}

div.menu_l li {
	padding:			0 0 0.16em 0.2em;
}

div.menu_r {
	text-align:			left;
	float:				right;
	width:				240px;
	padding:			1em 1em 1em 0;
	margin:				1em 0 1em 1em;
	border:				medium outset #eee;
	border-color:		#f8f8f8 #808080 #808080 #f8f8f8;
}

.float_l {
	float:				left;
	padding:			0.2em 1em 0.3em 0;
	text-align:			left;
}

.float_r {
	float:				right;
	padding:			0.2em 0 0.3em 1em;
	text-align:			right;
}
@media screen and (max-width: 480px) {
	/* Ajustements smartphones */
	.float_l,.float_r {
		float:			none;
		max-width:		100%;
		padding-left:	0;
		padding-right:	0;
		text-align:		center;
	}
}

.outset {
	border:				medium outset #eee;
	border-color:		#f8f8f8 #808080 #808080 #f8f8f8;
}
.inset {
	border:				medium inset #eee;
	border-color:		#808080 #f8f8f8 #f8f8f8 #808080;
}
p.float_l, p.float_r {
	text-indent:		0 !important;
}
p.photo {
	clear:				both;
	margin:				24px auto;
	text-align:			center;
	text-indent:		0;
}

@media screen and (max-width: 480px) {
	ul {
		padding-left:	10px;
	}
	ul > li
	{
		margin-left:	16px;
	}
}

ul > li {
	list-style:			square outside url(/pict/sunbul1a.gif);
	margin-top:			0.5em;
	margin-bottom:		0.5em;
	padding-left:		12px;
}

ul > li:first-child {
	margin-top:			0;
}
ul > li > ul > li {
	list-style:			square outside url(/pict/sunbul1b.gif);
}
ul > li > ul > li > ul > li {
	list-style:			square outside url(/pict/sunbul1c.gif);
}
ul.small > li {
	list-style-image:	url(/pict/sunbul1c.gif);
}
ul.compact,ul.compact > li {
	list-style-image:	url(/pict/sunbul1c.gif);
	margin-top:			0; 
	margin-bottom:		0;
}
ul.dbl > li, ol.dbl > li {
	margin-top:			1.5em;
	margin-bottom:		1.5em;
}
ol {
	list-style-image:	none;
}
em.j {
	font-style:			normal;
	background-color:	#ffd39b;
}
a {text-decoration:		none;}
a:link {color:			#f80}
a:visited {color:		#00868b}
a:hover {color:			#ff4040}

/* Lien sans texte */
a:empty::after {
	content: "\ 3";
	font-family: icomoon;
	speak: none;
	font-size: 1em;
}

div.intro p {
	text-indent:		2em;
	margin:				2.5em auto;
}
div.text,div.std {
	margin:				50px 8%;
}

div.text960,div.std960 {
	margin:				50px auto;
	max-width:			960px;
}

div.text p, div.text960 p {
	text-indent:		2em;
}

.multicol {
	-webkit-columns:	320px auto;
	-moz-columns:		320px auto;
	columns:			320px auto;
	-webkit-column-gap:	32px;
	-moz-column-gap:	32px;
	column-gap:			32px;
}

.multicol > *:first-child {
	margin-top:			0 !important;
}

div.text div.ltr, div.text960 div.ltr {
	float:				left;
	font-size:			360%;
	line-height:		0.8em;
	width:				1em;
	height:				1em;
	font-weight:		bold;
	color:				#de4918;
}

@media screen and (max-width: 480px) {
	div.text , div.std
	{
		margin:			3em 1%;
	}
}

.mw1000 {
	max-width:			1000px;
	margin-left:		auto !important;
	margin-right:		auto !important;
}

span.ltr {
	float:				left;
	font-size:			360%;
	font-weight:		bold;
	margin:				2px;
	padding-right:		6px;
	line-height:		0.7em;
	color:				#de4918;
	position:			relative;
	top:				-2px;
}
p.ltr, p.ltr2 {
	text-indent:		0 !important;
}

.ltr2:first-letter {	/* Nouvelle lettrine */
	float:				left;
	font-size:			360%;
	line-height:		0.8em;
	padding-right:		0.1em;
	font-weight:		bold;
	color:				#de4918;
}

hr {
	text-align:			center;
}

/* Notes de bas de page */
hr.note /* ancien */, div.notes > hr, section.notes > hr, div.refs > hr, section.refs > hr {
	margin:				0 auto 12px 0;
	width:				40%;
}
div.notes > h2, section.notes > h2, div.refs > h2, section.refs > h2 {
	margin:				0 auto 12px 0;
	text-align:			left !important;
}
a[id^="rnot"]::before, .rnot::before {
	margin-left:		3px;
	content:			"(";
}
a[id^="rnot"]::after, .rnot::after {
	content:			")";
}
a[id^="rref"]::before, .rref::before {
	margin-left:		3px;
	content:			"[";
}
a[id^="rref"]::after, .rref::after {
	content:			"]";
}
div.notes, section.notes, div.refs, section.refs {
	clear:				both;
	padding-top:		64px;
}
div.notes > p, section.notes > p, div.refs > p, section.refs > p {
	position:			relative;
	font-size:			90%;
	margin:				4px 0 4px 32px;
	text-indent:		0;
}
/* (références de notes - dans le texte) */
a[id^="rnot"], .rnot, a.note /* ancien */ {
	font-weight:		bold;
	font-size:			65%;
	position:			relative;
	top:				-5px;
}
a[id^="rref"], .rref {
	font-size:			80%;
	font-weight:		bold;
}
/* (définitions de notes - en bas) */
a[id^="dnot"], a[id^="dref"], a.dnot, a.dref {
	font-size:			70%;
	font-weight:		bold;
	position:			absolute;
	left:				-32px;
	top:				2px;
}
a[id^="dnot"]::before, a.dnot::before {
	content:			"(";
}
a[id^="dnot"]::after, a.dnot::after {
	content:			")";
}
a[id^="dref"]::before, a.dref::before {
	content:			"[";
}
a[id^="dref"]::after, a.dref::after {
	content:			"]";
}
p.dblarrows::before {
	content:			"⇒ ";
}
p.dblarrows::after {
	content:			" ⇐";
}
.notes q, .refs q {
	quotes:				"\201C" "\201D" "\2006 \2018" "\2019 \2006";
}
/* Fin notes de bas de page */

/* Dernière mise à jour du site */
.lastupdate {
	font-size:			90%;
	font-style:			italic;
	margin-top:			0px;
	color:				gray;
}

.b {font-weight:		bold}
.z {color:				#de4918} /* Texte couleur "Asperansa" */
.dim {color:			#808080}
.c,h1,h2,h3,h4,h5,h6 {
	margin-left:		auto;
	margin-right:		auto;
	text-align:			center !important;
	text-indent:		0 !important;
}
.i {font-style:			italic}
.i i,i .i {font-style:	normal}
.u {text-decoration:	underline}
.s {text-decoration:	line-through}
.p {margin:				1em 0}
.mt0 {margin-top:		0 !important}
.mt4 {margin-top:		4px !important}
.mt8 {margin-top:		8px !important}
.mb0 {margin-bottom:	0 !important}
.mb4 {margin-bottom:	4px !important}
.mb8 {margin-bottom:	8px !important}
.sm90 {font-size:		90%}
.sm85 {font-size:		85%}
.sm80 {font-size:		80%}
.sm75 {font-size:		75%}
.sm70 {font-size:		70%}
.sm65 {font-size:		65%}
.sm60 {font-size:		60%}
.ti0 {text-indent:		0 !important}
.ti25 {text-indent:		0.25in}
.ti2e {text-indent:		2em}
.indt {margin-left:		1.25em}
.s110 {font-size:		110%}
.s120 {font-size:		120%}
.s150 {font-size:		150%}
.s200 {font-size:		200%}
.p0 {
	padding-top:		0;
	padding-bottom:		0;
	margin-top:			0;
	margin-bottom:		0;
}
.blink {
	text-decoration:	blink; /* Ne marche qu'avec Mozilla (Firefox, Netscape) et Opéra */
}

.cancel {
	text-decoration:	line-through;
	color:				gray;
}

.bld {
	font-weight:		bold;
	color:				#de4918;
}
.cl {clear:				left}
.cr {clear:				right}
.cb {clear:				both}

.nodisp {
	display:			none;
}
.nowr {
	white-space:		nowrap;
}
h1,h2,h3,h4,h5,h6 {
	color:				#de4918;
	page-break-after:	avoid;
}
h3 {
	font-size:			110%;
}

q {
	quotes:				"\00AB\00A0" "\00A0\00BB" "\201C" "\201D";
}

.img_caption {
	font-family:		sans-serif;
	font-size:			75%;
	text-align:			center;
	text-indent:		0 !important;
}

.pr {
	position:			relative;
}
.pa {
	position:			absolute;
}

.sttl {
	border-color:		gray;
	border-width:		0 0 1px 0;
	border-style:		dotted;
}

sup {
	vertical-align:		top;
	font-size:			75%;
}

.alr, .alr * {
	text-align:			right !important;
}
p.sign {
	text-align:			right !important;
	font-size:			14pt;
	color:				#de4918;
}
p.q {
	font-style:			italic;
}
p.r {
	color:				#000040;
	padding-left:		1em;
}

p.retour {
	text-align:			center;
	color:				#de4918;
	font-weight:		bold;
	font-size:			120%;
	margin:				12px;
}
p.retour a {
	border:				thin outset #fca;
	border-color:		#f8f8f8 #808080 #808080 #f8f8f8;
	background-color:	#ffd39b;
}

p.retour a:before, p.retour a:after {
	content:			"\00A0";
}

.question {
	font-weight:		bold;
	color:				#de4918;
}
.reponse {
	padding-left:		1.2em;
}
.reponse dt {
	text-decoration:	underline;
	color:				#de4918;
}

/* Nouveautés : */
div.calend {
	width:				80%;
	margin:				auto;
}

div.calend dt {
	font-weight:		bold;
	color:				#de4918; /* Texte couleur "Asperansa" */
}

/* Bannière : */
table.banner, div.marquee {
	background-color:	#ffd39b;
	border:				medium outset #ccc;
	border-color:		#f8f8f8 #808080 #808080 #f8f8f8;
	font-size:			80%;
	margin:				auto;
	padding:			0.2em 0.5em 0 0.5em;
	text-align:			center;
}

table.banner td.img {
	padding-right:		0.5em;
}
table.banner td.img img { /* Logo */
	float:				left;
	width:				99px;
	height:				152px;
	max-width:			none;
}
table.banner td.def {
	font-family:		Arial,Helvetica,sans-serif;
}
table.banner td.def {
	border:				none;
	padding:			0;
	padding:			0;
	margin:				0
}
table.banner td.nom {
	font-family:		"Shark Random Funnyness 2", "Comic Sans MS", cursive;
	font-size:			700%;
	letter-spacing:		8px;
	color:				#de4918;
	text-shadow:		6px 6px rgba(140,140,140,0.3);
}

/* Nouveau texte défilant, http://stackoverflow.com/questions/21233033/css3-marquee-effect#answer-21233755 */
div.marquee {
	margin:				36px auto 24px auto;
	overflow:			hidden;
	white-space:		nowrap;
	width:				75%;
}

div.marquee span {
	color:				#de4918;
	font-size:			150%;
	font-weight:		bold;
	display:			inline-block;
	padding-left:		100%;
	text-indent:		0;
	-webkit-animation:	marquee 15s linear infinite;
	-moz-animation:		marquee 15s linear infinite;
	animation:			marquee 15s linear infinite;
}

div.marquee span:hover {
	-webkit-animation-play-state:	paused;
	-moz-animation-play-state:	paused;
	animation-play-state:	paused;
}

/* Make it move */
@keyframes marquee {
	0%   {
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	100% {
		-webkit-transform: translate(-100%, 0);
		-moz-transform: translate(-100%, 0);
		transform: translate(-100%, 0);
	}
}

@media screen and (min-width: 640px) and (max-width: 800px) {
	table.banner td.nom {
		font-size:		550% !important;
		letter-spacing:	4px;
		text-shadow:	3px 3px rgba(140,140,140,0.4);
	}
}

@media screen and (min-width: 480px) and (max-width: 640px) {
	table.banner td.nom {
		font-size:		400% !important;
		letter-spacing:	1px;
		text-shadow:	2px 2px rgba(140,140,140,0.4);
	}
}

@media screen and (max-width: 480px) {
	table.banner td.nom {
		display:		none;
	}
}

table.banner em {
	color:			#de4918;
	font-style:			normal;
	font-weight:		bold;
}

table.banner td.ant {
	display:			none;
}

/* Légendes "pop-up" : */
p.lgnd {
	position:			absolute;
	text-indent:		0;
	text-align:			justify;
	margin-left:		1em;
	margin-top:			5px;
	padding:			5px;
	left:				0;
	top:				0;
	border:				medium outset #eee;
	background-image:	url(/pict/suntile.jpg);
	font-size:			80%;
	visibility:			hidden;
	color:				#de4918;
}
div.ctxt {
	position:			relative;
	margin-top:			0;
}

div.copyright {
	background-color:	#ffd39b;
	border:				medium outset #ccc;
	border-color:		#f8f8f8 #808080 #808080 #f8f8f8;
	max-width:			600px;
	width:				90%;
	margin:				auto;
	font-family:		Arial, Helvetica, sans-serif;
	font-style:			italic;
	font-size:			75%;
	padding:			10px;
	text-indent:		1em;
	clear:				both;
}

div.cadre,table.cadre {
	background-color:	#ffd39b;
	border:				medium outset #ccc;
	border-color:		#f8f8f8 #808080 #808080 #f8f8f8;
	font-family:		Arial, Helvetica, sans-serif;
	padding:			10px;
}

div.cadre p,table.cadre p {
	font-style:			italic;
	font-size:			75%;
	text-indent:		1em;
	margin:				8px auto;
	text-align:			justify;
}

.err {
	text-align:			center;
	color:				#de4918;
	font-weight:		bold;
}

table.w3c {
	min-width:			84%;
	margin:				auto;
}

table.w3c img {
	vertical-align:		top;
	border:				0;
	width:				88px;
}
table.w3c td.r {
	text-align:			right;
}

p.pps_intro {
	font-size:			75%;
	font-style:			italic;
	text-indent:		0 !important;
}

div.lettre {
	background-color:	white;
	border:				1px solid black;
	font-family:		Arial,Helvetica,sans-serif;
	width:				800px;
	margin:				auto;
}

div.lettre div.i_txt {
	padding:			48px;
}

div.lettre li {
	list-style-image:	none;
	list-style-type:	inherit;
}

/* styles spécifiques pour impression */
@media print
{
	body {
		background-color:	white;
		background-image:	none;
	}
	.noprint, div.copyright, table.banner, div.marquee, table.w3c, p.retour {
		display:			none;
	}
	div.text,div.std {
		margin:				auto;
	}

	div.lettre {
		border:				none;
		font-family:		inherit;
		width:				auto;
		padding:			24px 0;
		margin:				0;
		font-size:			90%;
		page-break-before:	always;
	}
	div.lettre div.i_txt {
		margin:				0;
		padding:			0;
	}

	.pbba {
		page-break-before:	always;
	}
}

/* Pour debugging des dimensions d'écrans, à associer avec le code JavaScript "display_size()" */
div#viewport {
	border:				1px solid rgba(0,0,0,0.3);
	bottom:				1px;
	left:				4px;
	color:				rgba(0,0,0,0.3);
	font-family:		monospace;
	padding:			0;
	position:			fixed;
	z-index:			100;
}

/* Ajoutés à partir de la page "premier autiste" */
.inframe {
	background-color:	white;
	border-radius:		8px;
	border:				1px solid gray;
	-webkit-box-sizing:	border-box;
	-moz-box-sizing:	border-box;
	box-sizing:			border-box;
	margin:				24px auto;
	max-width:			720px;
	padding:			24px;
	text-align:			left;
	text-indent:		0;
}
.img2col {
	text-align:			center;
	width:				calc(100% + 24px);
	margin:				auto -12px;
}
img, svg, figure, iframe, .img2col {
	border:				none;
	max-width:			100%;
}
.img2col>* {
	display:			inline-block;
	margin:				20px 12px !important;
	vertical-align:		middle;
}
.img2col>.ext_video {
	vertical-align:		top;
	width:				622px;
}
.credits {
	color:				gray;
	font-family:		sans-serif;
	font-size:			75%;
	font-style:			italic;
}
blockquote {
	margin-right:		0;
}

.bigquote {
	margin-left:			0.5in;
}

.bigquote > * {
	font-style:				italic;
}

.bigquote > *:first-child {
	text-indent:			0;
}

.bigquote > *:first-child:before {
	content:				"“";
	float:					left;
	margin:					0.35em 0.1em 0 0;
}

.bigquote > *:last-child:after {
	content:				"”";
	float:					right;
	margin-top:				0.1em;
	margin:					0.35em 0 0 0;
}

.bigquote > *:first-child:before,
.bigquote > *:last-child:after {
	display:				block;
	font-family:			Times,Georgia,serif;
	font-size:				5em;
	font-style:				normal;
	line-height:			0;
}

.bigquote .i, .bigquote i {
	font-style:				normal;
}

.bigquote i i, .bigquote .i i, .bigquote i .i, .bigquote .i .i {
	font-style:				italic;
}

/* Vidéos en iframe calibrées 16:9 */
/* Voir http://www.w3schools.com/howto/howto_css_aspect_ratio.asp */
.vid_container {
	margin:				36px auto;
	max-width:			100%;
	text-align:			center;
	width:				620px;
}
.vid_container > div {
	padding-top:		56.25%; /* 16:9 Aspect Ratio */
	position:			relative;
}
.vid_container > a[download] {
	font-family:		sans-serif;
	font-size:			80%;
}
.vid_container > div > iframe, .vid_container > div > embed, .vid_container > div > object {
	position:			absolute;
	top:				0;
	left:				0;
	bottom:				0;
	right:				0;
	height:				100%;
	width:				100%;
	text-align:			center;
}