* {
	box-sizing: border-box;
}
body {
	background:			rgb(63,162,252);
	background:			linear-gradient(90deg, rgba(63,162,252,0.55) 0%, rgba(255,255,255,1) 14%, rgba(255,255,255,1) 100%);
	background-repeat:	no-repeat;
	font-family:		"Roboto",sans-serif;
	font-size:			120%;
	box-sizing:			border-box;
	-webkit-hyphens:	auto;
	-moz-hyphens:		auto;
	-ms-hyphens:		auto;
	-o-hyphens:			auto;
	hyphens:			auto;
}

a {text-decoration:		none;}
a:link {color:			#f80}
a:visited {color:		#00868b}
a:hover {color:			#ff4040}

.b {font-weight:		bold}
.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}
.mt16 {margin-top:		16px !important}
.mt32 {margin-top:		32px !important}
.mb0 {margin-bottom:	0 !important}
.mb4 {margin-bottom:	4px !important}
.mb8 {margin-bottom:	8px !important}
.mb16 {margin-bottom:	16px !important}
.mb32 {margin-bottom:	32px !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;
}
hr.w50 {
	width:				50%;
	margin:				auto;
}

.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;
}
q {
	quotes:				"\00AB\00A0" "\00A0\00BB" "\201C" "\201D";
}
.sign {
	text-align:			right;
}

sup {
	line-height: 0;		/* Éviter les décalages de lignes à cause de cela */
}
p.retour {
	text-align:			center;
	font-weight:		bold;
	font-size:			120%;
	margin:				12px;
}
p.retour a {
	border:				1px solid blue;
	border-radius:		8px;
	background-color:	#dbeefe;
}

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

.pave640 {
	max-width: 640px;
	margin: auto;
	padding: 24px;
	border: 1px solid #00ccff;
	border-radius: 16px;
	text-align:justify;
}

.pave960 {
	max-width:		960px;
	margin:			auto;
	padding:		24px;
	border:			1px solid #00ccff;
	border-radius:	16px;
	text-align:		justify;
	overflow:		hidden;
}

.div960 {
	max-width:		960px;
	margin:			auto;
	text-align:		left;
	text-indent:	0;
}

.text960 {
	max-width:		960px;
	margin:			auto;
	padding:		16px 24px;
	text-align:		justify;
	text-indent:	1em;
}

.dict960 {
	max-width:		960px;
	margin:			auto;
	padding:		24px;
	text-align:		justify;
}

.dict960 dt {
	float:			left;
	padding-top:	2px;
	clear:			left;
}

.dict960 dd {
	margin-left:	4em;
}

.col2 {
	column-width:	400px;
}
.col3 {
	column-width:	240px;
}
.col2>*:first-child, .col3>*:first-child {
	margin-top:		0;
}

ul,ol {
	text-indent:		0;
}
.list_arrow {
	list-style-type:	"➢ ";
}
.list_diamond {
	list-style-type:	"❖ ";
}
.list_dash {
	list-style-type:	"– ";
}

.nouveau {
	background-color:	#ff9;
}

.annonce {
	background-color:	#fb8;
}

header {
	background-color:	#ffd966;
	max-width:			960px;
	min-height:			154px;
	margin:				auto;
	border:				1px solid black;
	border-radius:		16px;
}
header h1 {
	margin-bottom:		10px;
}
header .logo {
	width:				200px;
	float:				left;
	background-color:	white;
	margin:				4px;
	border-radius:		12px;
}
header .logo img {
	width:				100%;
}
header > p {
	font-size:			85%;
	margin-bottom:		8px;
	display:			inline-block;
	width:				calc(100% - 220px);
}

@media screen and (max-width: 750px) {
	header h1 {
		font-size:		150%;
	}
}

@media screen and (max-width: 480px) {
	header > p {
		width:			100%;
	}
}

.image_centree {
	max-width:			960px;
	margin:				auto;
	margin-top:			24px;
	margin-bottom:		24px;
}

.image_centree img {
	width:				100%;
}

table.w3c {
	/* min-width:		84%; */
	margin:				auto;
	width:				960px;
	max-width:			100%;
}

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

.float_r {
	box-sizing:			content-box;
	float:				right;
	width:				40%;
	margin-left:		16px;
	padding:			8px;
}

.float_l {
	box-sizing:			content-box;
	float:				left;
	width:				40%;
	margin-right:		16px;
	padding:			8px;
}

div.copyright {
	background-color:	#dbeefe;
	border:				1px solid blue;
	border-radius:		8px;
	width:				960px;
	max-width:			100%;
	margin:				64px auto 8px auto;
	font-style:			italic;
	font-size:			60%;
	padding:			6px;
	text-indent:		0;
	clear:				both;
}
/* 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);
	}
}

/* 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;
	}
}

@media only screen and (max-width: 639px) {
	body {
		font-size: 110%;
	}
}

@media only screen and (max-width: 479px) {
	body {
		font-size: 100%;
	}
}

@media only screen and (max-width: 359px) {
	body {
		font-size: 90%;
	}
}

@media only screen and (max-width: 319px) {
	body {
		font-size: 80%;
	}
}


@keyframes blink {
	0% {opacity: 1;}
	20% {opacity: 1;}
	50% {opacity: 0;}
	80% {opacity: 1;}
	100% {opacity: 1;}
}

.blinking-text {
	animation: blink 1s infinite;
}