body {
font-size: 0.8rem; font-family: Arial, Helvetica, sans-serif;
margin:0;
}

a:link, a:visited { color: #00F; text-decoration: none }
a:active, a:hover { color: #00F; text-decoration: underline }

a[href$=".pdf"]:after, a[href$=".pdf"]:after, a[href$=":PDF"]:after { content: url(/medias/doc_pdf.png); padding: 5px }

hr { clear:both; background: rgb(200,200,200); height: 1px; border:0 }

#bande { width:100%; height:285px; background-image:url("/medias/bande.jpg"); background-repeat: no-repeat; background-position:center; background-size:cover; position:absolute; top:0; z-index:-10 }

/* corps du document */
#site { 
	margin: 15px auto;
	width: 1261px;
	position: relative;
	background-color: transparent;
}

#site::before {
	content: " ";
	position: absolute;
	width:360px;
	height:351px;
	left:-175px;
	background-image: url(/medias/terreban.png);
	z-index:-5;
}

#corps { text-align: center; width: 925px; float: left; padding: 0 10px 2% 10px; background-color: rgb(255, 255, 255); margin-top:5px; box-shadow: 0 0 5px rgb(150,150,150) }
#page { padding-top:5px }

/* menu du haut */
#pubtop { float:right;color:rgb(200,200,200);overflow:hidden }
#bandeau { height: 200px; }

.pubannonce { border:1px dotted rgb(220,220,220); width:300px; height:300px; text-align:center; color:rgb(150,150,150); margin:1% auto; }

#npi { 
font-size:3.8rem;
font-family: "Arial Black", Arial;
font-weight: 900;
text-shadow: 2px 0 0 rgb(255,255,255), -2px 0 0 rgb(255,255,255), 0 2px 0 rgb(255,255,255), 0 -2px 0 rgb(255,255,255), 1px 1px rgb(255,255,255), -1px -1px 0 rgb(255,255,255), 1px -1px 0 rgb(255,255,255), -1px 1px 0 rgb(255,255,255);
position:absolute;
top:50px;
}
#npi a:link, #npi a:visited, #npi a:active, #npi a:hover { text-decoration:none; color:rgb(0,50,150); }

#login { position: absolute; right: 0; top: 120px; border-radius:3px; padding: 5px; background-color: rgba(0, 0, 0,0.3); color:rgb(255,255,255); border: 1px dotted rgb(150,150,150) }
#login input { height:20px; color:rgb(100,100,100)}
#login input[type="submit"] { background-color: rgb(74, 139, 245); color:rgb(255,255,255); font-weight:bold; height:24px; border: 1px solid rgb(48, 121, 237); border-radius:2px }
#login input[type="submit"]:hover { background-color: rgb(66, 134, 244); border: 1px solid rgb(47, 91, 183) }
#login > table {width:100%}
#login a:link, #login a:visited { text-decoration: none; color: rgb(255,255,255) }
#login a:hover, #login a:active { text-decoration: underline; color: rgb(255,255,255) }

#outils { clear:both; width: 100%; table-layout:fixed; height:80px; border-radius: 0 0 5px 5px; padding-top:5px }
#outils tr { vertical-align:top }
#fil { width:540px; font-style:italic;line-height:30px; padding-left:5px; float:right; border-top:1px solid rgb(150,150,150) }
.gros { text-align:center; font-size:1.2em;font-weight:bold }
/* moteur de recherche */
#moteur { float:right; padding-left:5px; width:320px }
#recherche { line-height:32px; float:right; }

.icon-share { width:30px; height:30px }

/* menu */
#nav { z-index:10; position:relative; text-align:center }
#menu { margin: 0; padding: 0; position:relative; display:flex; justify-content: space-around; background: linear-gradient(#039, #538ED5); }
#menu > li { list-style: none; font-weight: bold; line-height: 40px; height:40px; flex:1 }
#menu > li a { text-decoration: none; color: rgb(255,255,255); font-size: 16px; display:block }
#menu > li:hover { background:rgb(150,200,50) }

#menu > li > ul { margin: 0; padding:0; display:none; font-size: 13px; box-shadow: 3px 3px 10px rgb(100,100,100);}
#menu > li > ul > li { list-style: none; background: rgb(80,140,210); margin: 0; line-height:30px; border-top: 1px dotted #EEE; text-align:left }
#menu > li > ul > li > a { font-size:14px; text-decoration: none; padding: 0 5px 0 5px;}
#menu > li > ul > li > a:hover, #menu li a:focus {background: rgb(255,255,255); color: rgb(0,0,255)}

#menu2 { width:100%; line-height:30px; background:rgba(240,240,240,0.9); color:rgb(0,0,0); display: flex; justify-content: space-around; }
#menu2 a:link, #menu2 a:visited { text-decoration: none; color: rgb(0,0,255); font-size:14px }
#menu2 a:hover, #menu2 a:active { text-decoration: underline; color: rgb(0,0,255); }

/* bouton like */
.like { font-size:12px; padding:2px 4px; background:rgb(240,240,240); border: 1px solid rgb(255,255,255) }

/* bouton play video */
.play { left:-40%; top:50%; width: 66px; height: 66px; position: relative; border: 3px solid rgb(255,255,255); margin: -36px 0 0 -36px; border-radius: 36px; opacity:0.7; }
.arrow { display: inline-block; border-top: 4px solid transparent; border-left: 8px solid rgb(255,255,255); border-bottom: 4px solid transparent; }
.play .arrow { top: 50%; left: 50%; position: relative; border-top-width: 14px; border-bottom-width: 14px; border-left-width: 24px; margin: -14px 0 0 -10px; }
.play:hover {opacity:1;}

/* menu de droite  */
#sky {float: right; width: 300px; margin-bottom:15px;position:relative;top:-35px }

.sky_mention { text-align:center; font-size:11px; margin:2px 0 0 0; color:rgb(150,150,150) }
.sky_cadre { width: 294px; margin: 5% auto; padding:3px; border:1px solid rgb(240,240,240); border-radius:2px}
.sky_cadre > p:first-child { color: rgb(255,255,255); font-weight: bold; font-size: 1.2em; line-height: 25px; margin: 0; background: rgb(80,140,210); text-align:center }
.sky_cadre > div { text-align:center; background:rgb(240,240,240); line-height: 20px; margin-top:1% }
.sky_cadre ul { width: 100%; margin: 0; padding: 0 }
.sky_cadre li { border-top: 1px dotted rgb(240,240,240); list-style: none }
.sky_cadre li a:before { content: "\002B\00a0"; color:rgb(200,200,200) }
.sky_cadre li a { display: block; line-height: 25px; text-decoration: none; color: #000 }
.sky_cadre li a:hover, .sky_cadre li a:focus { color: #00F; background:rgb(240,240,240) }

/* réseaux sociaux sky */
#rs { display:flex; justify-content: space-around }
#rs img:hover{ box-shadow: 2px 4px 5px rgb(150,150,150) }

/* bas de page  */

.soutien { background: linear-gradient(to left, rgb(255, 255, 255), rgb(150,200,50)); font-size:1.3em;padding:1%;line-height:1.5em;font-weight:bold;clear:both;border-top:1px solid rgb(200,200,200); border-bottom:1px solid rgb(200,200,200)}
.soutien > svg {width:20px;height:20px;position:relative;top:4px;left:-5px}

footer { margin: 0 auto; text-align:center; background: rgb(80,140,210); background: linear-gradient(rgb(80,140,210),#039); font-size: 12px; color: rgb(255,255,255); padding:2px }
footer a:link, footer a:visited { color: rgb(255,255,255); text-decoration: none }
footer a:active, footer a:hover { color: rgb(255,255,255); text-decoration: underline}
#liensbas {display:flex; justify-content: center }
#liensbas a { margin:0 1% }
#renvoi_page {clear:both; line-height:20px;text-align:right }
#pub_bas { width:728px; margin: 1% auto }
#cnil { width:280px;padding:5px;background-color:rgb(245,245,245);position:fixed;bottom:0;left:10px;z-index:5; }

/* élements de formulaire  */
.fielderror { color: #F00 }
.fieldreq { color: #000 }
input[type=submit] { height: 27px; cursor: pointer }
input:focus, textarea:focus { color:#00F }
input:required { border: 1px solid orange }

#erreur { width: 99%; margin: auto; color: rgb(255,255,255); background-color: #F00; padding: 3px; text-align: center; font-weight : bold }

table {text-align: left}
a img {border:0}

/* titres */
h1 { clear: both; text-align: left; color: rgb(50,150,0); padding: 2%; font-size:1.8rem }
h2 { color: #390; border-bottom: 1px solid rgb(240,240,240); clear: both; margin: 5% 0 2% 0; font-size:1.5rem; padding-bottom: 10px; text-align: left }
h3 { color: #390; text-align: left; font-size: 1.3rem; margin-top:5%; }
h4 { font-size: 1.1rem; margin-bottom:0 }

/* sommaire dossiers */
#sommaire { display:flex; justify-content:space-between; width:100% }
#sommaire div:nth-child(1) { width:50%; text-align:left }
#sommaire ul { width: 100%; margin: 0; padding: 0; font-size:1.2em }
#sommaire li { border-top: 1px dotted rgb(240,240,240); list-style: none }
#sommaire li a:before { content: "\002B\00a0"; color:rgb(200,200,200) }
#sommaire li a { display: block; line-height: 25px; text-decoration: none; color: #000 }
#sommaire li a:hover, .sky_cadre li a:focus { color: #00F; background:rgb(240,240,240) }

/* dossiers */
.texte { text-align: justify; line-height: 1.6rem; color:rgb(50,50,50); font-size:1rem; padding: 0 5px }

/* commentaires */
.com { border-radius: 5px; margin-bottom: 10px; padding: 5px; border: 1px solid #EEE; width: 100% }
.com > img { vertical-align: middle; width:20px; height:20px }
.com tr:nth-child(2) td { border-top: 1px dotted rgb(240,240,240); padding-top:5px; word-wrap:break-word }
.com tr:nth-child(2) td img {  max-width:900px }
#com { margin-top: 5px; text-align:left; }
#comf { text-align: left; padding:1% }
.svg_fleche { width:24px;height:24px;padding-top:4px }

.rubrique { border: 1px dotted #9C3 }

.pave{ border: 1px dotted rgb(200,200,200); float:left; padding: 0 5px; margin:7px; line-height:30px; font-size:1.2em; border-radius:4px; }

/* dossiers du site et actualités principales  */
#som_rub > .actu:nth-child(odd) { margin-left:3px }
.actu { border-spacing:0; width: 450px; float: left; padding:5px; margin: 0 5px 0 10px }
.actu td {padding:0}
.actu tr:nth-child(1) { height:75px; font-size:1.5em; font-weight:bold }
.actu tr:nth-child(2) { height:180px }
.actu tr:nth-child(3) { font-size: 1em; color: rgb(190,190,190); height:30px }
.actu tr:nth-child(3) > td { padding-top:5px; height:50px; vertical-align:top }
.actu a:link, .actu a:visited { color: rgb(50,50,50); text-decoration:none } 
.actu a:active, .actu a:hover { color: rgb(0,0,255); text-decoration:none } 
.actu span { float:right }

.lienimg { display:block; width:100%; height:180px }

/* Actualités connexes */
.acon { border-spacing:0; width: 220px; float: left; padding:8px }
.acon td {padding:0}
.acon tr:nth-child(1) { height:80px; font-size:14px; font-weight:bold }
.acon tr:nth-child(2) { height:170px }
.acon tr:nth-child(3) { font-size: 12px; color: rgb(190,190,190); height:30px }
.acon tr:nth-child(3) > td { padding-top:5px; vertical-align:top }
.acon a:link, .acon a:visited { color: rgb(50,50,50); text-decoration:none } 
.acon a:active, .acon a:hover { color: rgb(0,0,255); text-decoration:none } 
.acon span { float:right }

.acon:hover { box-shadow: 0 0 10px rgb(200,200,200) }
.aconimg { display:block; width:215px; height:170px }

/* liste à puces à droite d'une image dossier */
.liste_img { list-style-position:inside; text-indent: 5px }

/* images dossiers */
.minimg { font-size: 12px; margin: 0 10px 5px 0; float: left; line-height:15px; color: rgb(100,100,100); text-align:left; max-width:450px }
.minimgr { font-size: 12px; margin: 0 0 5px 10px; float: right; line-height:15px; color: rgb(100,100,100) }
.minimg img, .minimgr img {padding-bottom: 1%; display:block }
.minimg img, .minimgr img {padding-bottom: 1%; display:block }
.image { font-size: 12px; margin: 20px auto; line-height:15px; color: rgb(100,100,100); overflow:hidden; width:900px; }
.image > img {padding-bottom: 1%; display:block;}
.image-portrait { font-size: 12px; float:left; margin:0 10px 0 0; line-height:15px; color: rgb(100,100,100); overflow:hidden }
.image-portrait > img {padding-bottom: 1%; display:block }

.legende { color: rgb(100,100,100); margin: 0 auto 20px auto; line-height: normal; padding: 2px; font-size: 0.8em }

/* en savoir plus */
#plus { text-align:left; font-size:0.8rem; border-radius:7px; border:1px solid rgb(240,240,240); width:49%; float:left; line-height:normal }
#plus p {padding:1% }
.plus { padding:2px 10px; background:rgb(240,240,240) }

/* auteurs articles */
#auteur { text-align:left; font-size:0.8rem; border-radius:7px; border:1px solid rgb(240,240,240); width:49%;float:right }
.avatar { vertical-align: middle; width:40px;height:40px;margin:1% }
#lcc {margin:0 1% 0 0; float:left}
#auteur p { padding:1% }
h5 { margin: 0 0 1% 0; font-size: 1.2em; color:rgb(255,255,255); padding-left:1%; background: linear-gradient(to left, rgb(255,255,255) 10%, rgb(80,140,210)); line-height:1.5rem }

/* photos */
#cadre-desc-photo { border: 1px solid rgb(240,240,240); padding:1%; width:98%; overflow:hidden }
#boutonajoutdesc { float:right }

/* barre grise d'options */
.options { margin: 1% auto; font-size:1em; line-height: 30px; }
.options a { padding: 5px; margin:0 5px; background:rgb(240,240,240); border:1px solid rgb(240,240,240) }
.options a:hover { text-decoration:none; border:1px solid rgb(0,0,255) } 

/* élements de navigation */
.navigation { text-align: center; line-height:32px; clear:both; font-weight:bold; font-size: 1em; padding: 2% 0}
.navigation span { padding: 4px 8px; border-radius: 4px; box-shadow: 2px 2px 2px #AAA; background-color:#EEE; margin: 5px }
.navigation a:link, .navigation a:visited { padding: 4px 8px; border-radius: 4px; box-shadow: 2px 2px 2px #AAA; margin: 5px }
.navigation a:active, .navigation a:hover { padding: 4px 8px; border-radius: 4px; text-decoration:none; box-shadow: 2px 2px 2px #AAA; background:#538ED5; color:rgb(255,255,255); margin:5px }

/* avertissement et alertes */
.avert { padding: 1%; border: 1px solid #EEE; text-align: left; color: rgb(100,100,100); font-size:0.8rem }
.avert_r { padding: 1%; border: 2px solid rgb(255,0,0); text-align: center; font-size:1em; font-weight: bold }
.avert_v { padding: 1%; border: 2px solid #9C3; font-weight: bold; text-align: center; box-shadow: 0 0 10px #9C3; border-radius:5px; font-size:1em }
.accroche {
	line-height:50px;
	border-radius:5px;
	padding: 0 5px;
	border:1px solid rgb(200,200,200);
	font-size:1.6em;
	font-weight: bold;
	text-align:center;
	width:85%;
	margin:5% auto;
	background: rgb(240,240,240);
	background: linear-gradient(rgb(255,255,255), #EEE);
	clear:both;
}
#alerte { line-height:40px;	padding: 0 5px;	text-align:center;	width:98%; margin:2% auto;	background: rgb(240,0,0);	clear:both; }
#alerte a { padding: 5px; margin:0 5px; color:rgb(255,255,255); font-size:1.4em; }

/* divers */
.spacer { clear: both }
.liste_espace li  { margin-bottom: 10px }
button {line-height:18px }

.avantages > li { 
	line-height:30px;
	border-radius:5px;
	padding: 10px 0 10px 30px !important;
	border: 1px solid rgb(200,200,200);
	background-color: rgb(255, 255, 255);
	font-size:120%;
	font-weight: bold;
	margin: 10px;
	background-position: 10px 20px !important;
	text-align:left;
	background-image: url(/medias/dispo.png) !important;
	background-repeat:no-repeat !important;
	list-style: none !important;
}

/* formulaires */
.form_entree { padding-left: 5px; font-weight: bold; background-color: rgb(240,240,240); line-height: 25px; margin-top: 25px; font-size: 1.2em; text-align:left }
.form_entree em { font-weight: normal;}
.form_champs { text-align: left; padding-left: 10px; border-left: 1px solid rgb(240,240,240); font-size: 1.2em }
.form_valide { text-align: center }

#solde { border-radius:5px; text-align:center; font-size:12px; margin: 30px auto; width: 450px; padding:10px; color:rgb(100,100,100); clear:both; box-shadow: 0 0 10px #AAA }
#solde > input { height:25px; width: 100px; margin: 2% 0  }

/* forums */
.p11 { font-size: 11px; text-align: center }
.disc { width:100%; margin-bottom:3%; border-radius: 5px; border: 1px solid rgb(200,200,200); }

/* tableau texte */
.tableau { margin: 20px auto 0 auto; text-align: left;}
.tableau caption {caption-side: bottom; font-size: 12px; color:rgb(100,100,100); line-height:15px; margin-bottom:20px; text-align: left }
.tableau th { line-height: 30px; text-align: center; font-weight: bold; font-size:1rem; background: #9C3; color:rgb(255,255,255); padding:4px }
.tableau td { padding: 2px; border-bottom: 1px solid rgb(240,240,240); height: 30px }
.tableau tr:hover { background-color:rgb(240,240,240)}
.tab-e {font-weight:bold}
.colright {text-align:right}
.colcenter {text-align:center}

/* entête impression */
#mini, #entete { display: none }

/* popup abo */
#modal { position: fixed; top:20%; left:40%; padding: 5px 20px; background: rgb(255,255,255); border-radius: 15px; box-shadow: 1px 1px 12px rgb(100,100,100); font-size:14px; z-index:15; color:rgb(0,0,0); display:none }
#close { position:absolute; width:25px; height:25px; top:-10px; right:-10px; z-index:20; color:rgb(255,255,255); background:rgb(80,140,210); line-height: 25px; font-size:15px; text-align: center; font-weight: bold; border-radius: 12px; cursor: pointer }
#close:hover { background: rgb(150,200,50) }

/* cours NTIC */
.code { font-family: "Courier New", Courier, mono; background: rgb(240,240,240); margin-left: 10px; padding: 5px; text-align:left }
.coder { font-family: "Courier New", Courier, mono; background: rgb(255,255,255); border: 1px solid rgb(240,240,240); margin-left: 10px; padding: 5px }