/*
	racoon-style.css
	Création: 12/10/2019
	Modification: 24/12/2019
	Description: Style pour le Thème
	Camille FRONTON
*/

/*
	Exemples: 
		https://www.lije-creative.com/bases-apprendre-responsive-web-design 
		http://sdz.tdct.org/sdz/adapter-son-site-au-format-mobile-avec-css3.html 
		https://www.webmaster-lyon.fr/rendre-son-site-responsive-design.html 
		
	Dans '/css'
*/
body, button, input,
select, textarea{
	font-family: "Helvetica Neue", Helvetica, Arial, Sans-serif;
	font-size:11pt;
}
h1{
	font-size:1.5em;
	font-weight:bold;
}
h2{
	font-size:1.5em;
}
h3{
	font-size:1.3em;
}
h4{
	font-size: 1em;
}
h5{
	font-size: 0.8em;
}
ol,ul{
	margin:0px;
	padding:0px;
}

img{
	display:block;
	margin:0 auto;
}
img{
	max-width:100%;
	height:auto;
}
.inline-text-box {
  width: 50%;
}
hr{
	border-top:2px solid #d6dbe8;
}

/*------------------ Les Menus -------------------------*/
ol,ul{
	margin:0px;
	padding:0px;
}
li{
	list-style:none;
}
a{
	text-decoration:none;
	transition:background 0.5s;
	-webkit-transition:background 0.5s;
	-moz-transition:background 0.5s;
}
.menu ul{
	margin:0px;
	padding:0px;
}
/*--------------------- En-tête du site --------------------------*/
.header {
	background: #377bb5;
}
.racoon-tete-gauche{
	width:50%;
	float:left;
}
.racoon-tete-droite{
	width:50%;
	float:right;
}
.container{
	background-color:#eeefff;
	width:90%;
	margin:0 auto 0 auto;
}
.container-menu{
	background: #377bb5;
}
.racoon-tete-title{
	font-weight:bold;
}
.racoon-tete-title a{
	font-weight:bold;
	text-decoration:none;
	transition:background 0.5s;
	-webkit-transition:background 0.5s;
	-moz-transition:background 0.5s;
}
.racoon-tete-title a:hover{
	font-weight:bold;
	background-color:#5d60ab;
	color:#eeefff;
}


/**/
.zoneRSS{
	width:80%;
	margin-left:auto;
	margin-right:auto;
	padding:0.3em;
	background-color:#ecf3ce;
}
.liens-flux{
	padding:0.7em;
	background-color:#e7ecd5;
}


/*--------------- Navigation supérieure -----------------------*/
#navigation-principale li {
	position: relative;
	display: inline-block;
	padding: 10px;
	font-weight: bold;
}
#navigation-principale li a {
	color: #fff;
	text-decoration:none;
	padding:5px;
	transition:background 0.5s;
	-webkit-transition:background 0.5s;
	-moz-transition:background 0.5s;
}
#navigation-principale li a:hover{
	background-color:#aedaff;
	color:#495a68;
}

#navigation-secondaire ul li{
	margin:0px;
}
#navigation-secondaire li{
	display:inline-block;
	padding:5px;
	font-weight:bold;
}
#navigation-secondaire li a{
	color:#555;
	font-size:12px;
	text-decoration:none;
	padding:5px;
	transition:background 0.5s;
	-webkit-transition:background 0.5s;
	-moz-transition:background 0.5s;
}
#navigation-secondaire li a:hover{
	background-color:#8f94de;
	color:#fff;
}

.racoon-menu-prieres{
	background-color:#dfdfe8;
	
}
#navigation-prieres ul li{
	margin:0px;
}
#navigation-prieres li{
	display:inline-block;
	padding:5px;
	font-weight:bold;
}
#navigation-prieres li a{
	color:#555;
	font-size:12px;
	text-decoration:none;
	padding:5px;
	transition:background 0.5s;
	-webkit-transition:background 0.5s;
	-moz-transition:background 0.5s;
}
#navigation-prieres li a:hover{
	background-color:#c7c7d5;
	color:#fff;
}

.racoon-ephemeride{
	font-size:9pt;
	background-color:#dfdfe8;
	color:#818187;
	padding:0.6em;
	
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius:3px
}

/*------------------- Barre latérale --------------------------*/
.racoon-sidebar {
	position: relative; 
	float: right; 
	width: 250px;
    color: #676888; 
	font-size: 80%; 
	border-left: solid 1px #bdcef6; 
}

/*---------- Modèle bloc ----------*/
#contenant-blocs-racoon{
	position:relative;
	width:95%;
	margin-left:auto;
	margin-right:auto;
}
.blocs-racoon{
	float:left;
	width:25%;
	height:35%;
	padding:0.3em;
	background-color:#bdcef6;
}
/*---------------------------------*/
.racoonArticle{
	padding:5px 20px;
	border-radius:10px;
	box-shadow: 0px 1px 3px rgba(96,138,164,0.5);
	margin-bottom:1.8em;
}
.racoonThumbnail{
	float: left;
	margin-right: 0.4em;
	padding: 5px 10px;
}
.racoon-contenu{
	background-color:#e8e9ff;
	margin-bottom:0.4em;
	margin-top:0.4em;
	margin-left:1.5em;
	padding:0.6em;
	border:1px solid #c3c4d9;
}
.racoon-post{
	background-color:#e8e9ff;
	margin-bottom:0.4em;
	padding:0.6em;
	border:1px solid #c3c4d9;
}
.racoon-post-title{
	font-weight:bold;
	color:#1a21b1;
}
.racoon-post-title a:hover{
	background-color:#4d53d7;
	color:#edeeff;
	text-decoration:none;
}

.racoon-post-meta{
	height:30px;
	padding:4px;
}
.racoon-post-dateArticle{
	width:70px;
	height:70px;
	float:right;
	padding:2px;
}
.racoon-post-ladate1{
	text-align:center;
	font-size:15px;
	font-weight:bold;
	color:#414144;  
	background-color:#bfc0d4;
	display:block;
}
.racoon-post-ladate2{
	text-align:center;
	font-size:11px;
	background-color:#dfdfe8;
	display:block;
}

.racoon-description{
	font-style:italic;
	font-size:80%;
}

/*-------------- Agenda --------------*/

.calendar_wrap table{
	border:none;
	border-collapse:separate;
	border-spacing:1px;
}
.calendar_wrap table th{
	background-color:#11467A;
	color:white;
	padding:5px;
	border-top:1px solid #f5f3e7;
	border-left:1px solid #f5f3e7;
	border-right:1px solid #dbd7c3;
	border-bottom:1px solid #dbd7c3;
}
.calendar_wrap table td{
	background-color:#efecdd;
	padding:5px;
	border-top:1px solid #f5f3e7;
	border-left:1px solid #f5f3e7;
	border-right:1px solid #dbd7c3;
	border-bottom:1px solid #dbd7c3;
}
#wp-calendar tbody td{
	text-align:center;
}
#wp-calendar tbody td#today{
	color:#f7fa11;
	background-color:#1d8693;
	font-weight:bold;
}
#wp-calendar tfoot td a,
#wp-calendar tbody td a{
	display:block;
	color:white;
	background-color:blue;
	padding:1px;
	text-decoration:none;
}
#wp-calendar tfoot td a:hover,
#wp-calendar tbody td a:hover{
	display:block;
	color:blue;
	background-color:yellow;
	padding:1px;
}

/*-------- Zone Edito -------*/
.racoon-content{
	padding: 2em;
	margin:0px;
}
.racoon-header-widget{
	margin-top: 1em;
	margin-bottom: 0.7em;
	padding: 2em;
	background-color: white;
	box-shadow: 2px 2px 10px #3379ae;
}
.racoon-header-widget .zoneGauche{
	float:left;
	width:48%;
}
.racoon-header-widget .zoneDroite{
	float:right;
	width:48%;
	margin-right:2em;
}
.racoon-header-widget .zoneDroite{
	
}
.racoon-widget{
	/*width:45%;
	float:left;*/
}	
.racoon-title{
	margin-bottom: 1em;
	text-transform: capitalize;
}
.racoon-title a{
	text-decoration:none;
	font-weight:bold;
}

#ConteneurM1{
	width:90%;
	margin-left:auto;
	margin-right:auto;
}
#ConteneurM1 h2,
#ConteneurM1 h4{
	text-align:center;
}
#ConteneurM1 h3{
	text-align:center;
	font-size:12pt;
	font-style:italic;
	font-weight:normal;
}
.styleConteneurM1{
	padding:12px;
	background-color: #e9f4fd;
}
#editoJour{
	
}
.styleEdito{
	width: 100%;
	float:left;
}

.letitreEdito{
	font-family: inherit;
	font-size: 14pt;
	font-weight: bold;
	background-color: #d0f4d5;
	color: #937420;
	border: 0px;
	border-left: 2px solid #6e8875;
	padding-left: 3px;
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 4px;
	margin-left:auto;
	margin-right:auto;
	width:80%;
	text-align:center;
}
/*----------- Zone de gestion du menu Procyon (Panneau Admin) --------------------------*/
#zoneItemMenu{
	width:90%; 
	padding:1.2em; 
	margin-left:auto;
	margin-right:auto;
}
.styleZoneItemMenu{
	color: #0f28a7;
	background-color:#eff0f6;
}

@media screen and (max-width:768px) and (max-width:800px){
	#zoneItemMenu{
		width:100%; 
		padding:0.8em; 
		margin:0px;
	}
	.styleEdito{
		width: 100%;
		float:none;
	}
}


.zone-gestion-edito{
	background-color:#dbe2ff;
	padding:1em;
}
.zone-gestion-edito .ajoutGauche{
	float:left; 
	width:25%;
	background-color:#e3f8da;
	padding:0.3em;
	
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	
	box-shadow:10px 8px 15px #7a9f80;
}
.zone-gestion-edito .ajoutDroite{
	float:left; 
	margin-left:1.5em;
	width:70%;
}
.zone-gestion-edito .ajoutDroite .bornelesTitres{
	margin-top: 0.3em;
	padding: 0.5em; 
}
.zone-gestion-edito .ajoutDroite .lesTitres{
	/*text-align:right;*/
	font-weight:bold;
}
.zone-gestion-edito .ajoutDroite .borneUtilisation{
	width:20%;
	margin-left: 20em;
	margin-right: auto;
	margin-top: 1em;
	border-top: 1px dotted #9297ac;
	border-bottom:1px dotted #9297ac;
}
.zone-gestion-edito .ajoutDroite .borneEnregistrer{
	margin-left: 20em;
	margin-right: auto;
	margin-top: 1em;
}
.zone-gestion-edito .ajoutDroite .borneEnregistrer>input{cursor:pointer;}
.zone-gestion-edito .ajoutDroite .borneInfosAuteur{
	margin-top:0.3em;
	padding:0.5em;
	border-bottom:1px dashed #9297ac;
}
.zone-gestion-edito .ajoutDroite .borneContenu{
	width:90%;
	height:auto;
}
.zone-gestion-edito .ajoutDroite .borneContenu table{
	width: 100%;
	clear: both;
}
.zone-gestion-edito .ajoutDroite .marqueImportante{
	color:red;
	font-size:200%;
}
.afficheliensEditos{
	margin-top:1.5em;
	margin-bottom:1.5em;
	text-align:center;
}

.afficheliensEditos .lelien{
	color:#bfd4e3;
	font-size:10pt; 
	background-color:#398e8b; 
	text-decoration:none; 
	border:1px solid #9e7cc8; 
	padding-left:5px; 
	padding-right:5px;
	cursor:pointer;
	border-radius: 45%;
	display: inline-block;
}
.afficheliensEditos .lelien:hover{
	color:#fbfdff;
	font-size:10pt; 
	background-color:#404b9a; 
	text-decoration:none; 
	border:1px solid #6d489b; 
	padding-left:5px; 
	padding-right:5px;
	cursor:pointer;
	border-radius: 45%;
	display: inline-block;
}
.afficheliensEditos .sansLien{
	color:#d4dee5; 
	background-color:#85bfbd; 
	text-decoration:none; 
	border:1px solid #9e7cc8; 
	padding-left:5px;
	padding-right:5px;
	border-radius: 45%;
	display: inline-block;
}
.afficheliensEditos .sansLien:hover{
	color:#657580; 
	background-color:#b9dbda; 
	text-decoration:none; 
	border:1px solid #9e7cc8; 
	padding-left:5px;
	padding-right:5px;
	border-radius: 45%;
	display: inline-block;
}


@media screen and (max-width:768px) and (max-width:800px) {
	.zone-gestion-edito .ajoutGauche,
	.zone-gestion-edito .ajoutDroite{
		float:none;
		width:90%;
		margin:0px;
	}
	.zone-gestion-edito .ajoutDroite .borneUtilisation,
	.zone-gestion-edito .ajoutDroite .borneEnregistrer{
		margin-left:0em;
		margin-right: 0em;
		margin-top:0.4em;
		width: 100%;
	}
	.zone-gestion-edito .ajoutDroite .borneContenu{
		width:90%;
		height:200px;
	}
}

/*--------------------------------------------------*/
.zone-gestion-flashs{
	background-color:#dbe2ff;
	padding:1em;
}
.zone-gestion-flashs .ajoutGauche{
	float:left; 
	width:25%;
	background-color:#e3f8da;
	padding:0.3em;
	
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	
	box-shadow:10px 8px 15px #7a9f80;
}
.zone-gestion-flashs .ajoutDroite{
	float:left; 
	margin-left:1.5em;
	width:70%;
}
.zone-gestion-flashs .ajoutDroite .borneEnregistrer{
	margin-left:25em;
	margin-top:1em;
}
.zone-gestion-flashs .ajoutDroite .borneEnregistrer>input{cursor:pointer;}
.zone-gestion-flashs .ajoutDroite .borneInfosAuteur{
	margin-top:0.3em;
	padding:0.5em;
	border-bottom:1px dashed #9297ac;
}
.zone-gestion-flashs .ajoutDroite h4.zoneSaisie{
	font-weight:bold;
	margin-left:1.5em;
	text-decoration:underline;
}

@media screen and (max-width:768px) and (max-width:800px) {
	.zone-gestion-flashs .ajoutGauche,
	.zone-gestion-flashs .ajoutDroite{
		float:none;
		width:90%;
		margin:0px;
	}
	.zone-gestion-flashs .ajoutDroite .borneUtilisation,
	.zone-gestion-flashs .ajoutDroite .borneEnregistrer{
		margin-left:0em;
		margin-right: 0em;
		margin-top:0.4em;
		width:100%;
	}
	.zone-gestion-flashs .ajoutDroite .borneContenu{
		width:90%;
		height:200px;
	}
}

.listeFlashs{
	width:97%;
	margin-left:auto;
	margin-right:auto;
}
.listeFlashs table{width:100%;}
.listeFlashs table.lalisteFlashs{
	width:97%;
	border-spacing:0px;
	clear:both;
	margin:0px;
}
.listeFlashs table tr td{
	padding:1.2em;
	border:1px solid #7f7f7f;
	margin-bottom:0.6em;
}
.listeFlashs table tr:nth-child(even){
	border:1px solid #473131;
	background-color:#edf0ff;
}
.listeFlashs table tr:nth-child(odd){
	border:1px solid #473131;
	background-color:#dbe2ff;
}
.listeFlashs table tr td.centree{text-align:center;}
.listeFlashs table tr td.fondFlahValide1{font-weight:bold;background-color:#ace7a4;}
.listeFlashs table tr td.fondFlahValide2{background-color:#cea4e7;}
.listeFlashs table tr td.fondFlahValide3{background-color:#e7d3a4;}
.listeFlashs table tr th{padding:1.2em;background-color:#fbf4f4;}

.afficheliensFlahs{
	margin-top:1.5em;
	margin-bottom:1.5em;
	text-align:center;
}
.afficheliensFlahs .lelien{
	color:#bfd4e3;
	font-size:10pt; 
	background-color:#398e8b; 
	text-decoration:none; 
	border:1px solid #9e7cc8; 
	padding-left:5px; 
	padding-right:5px;
	cursor:pointer;
	border-radius: 45%;
	display: inline-block;
}
.afficheliensFlahs .lelien:hover{
	color:#fbfdff;
	font-size:10pt; 
	background-color:#404b9a; 
	text-decoration:none; 
	border:1px solid #6d489b; 
	padding-left:5px; 
	padding-right:5px;
	cursor:pointer;
	border-radius: 45%;
	display: inline-block;
}
.afficheliensFlahs .sansLien{
	color:#d4dee5; 
	background-color:#85bfbd; 
	text-decoration:none; 
	border:1px solid #9e7cc8; 
	padding-left:5px;
	padding-right:5px;
	border-radius: 45%;
	display: inline-block;
}
.afficheliensFlahs .sansLien:hover{
	color:#657580; 
	background-color:#b9dbda; 
	text-decoration:none; 
	border:1px solid #9e7cc8; 
	padding-left:5px;
	padding-right:5px;
	border-radius: 45%;
	display: inline-block;
}

.modifieFlash{
	width:50%;
}
@media screen and (max-width:768px)  and (max-width:800px)  {
	.listeFlashs{
		width:auto;
		margin:0px;
	}
	.listeFlashs table{
		width:auto;
	}
	.listeFlashs table.laListeFlashs{
		width:97%;
		border-spacing:0px;
		clear:both;
		margin:0px;
	}
	.listeFlashs table tr td,
	.listeFlashs table tr th{
		padding:0.4em;
	}
}
/*--------------------------------------------------*/

.listeEdito{
	width:97%;
	margin-left:auto;
	margin-right:auto;
}
.listeEdito table{width:100%;}
.listeEdito table.laListeEdito{
	width:97%;
	border-spacing:0px;
	clear:both;
	margin:0px;
}
.listeEdito table tr:nth-child(even){
	border:1px solid #473131;
	background-color:#edf0ff;
}
.listeEdito table tr:nth-child(odd){
	border:1px solid #473131;
	background-color:#dbe2ff;
}
.listeEdito table tr td{
	padding:1.2em;
	border:1px solid #7f7f7f;
	margin-bottom:0.6em;
}
.listeEdito table tr td.centree{text-align:center;}
.listeEdito table tr td.fondValidite1{font-weight:bold;background-color:#ace7a4;}
.listeEdito table tr td.fondValidite2{background-color:#cea4e7;}
.listeEdito table tr td.fondValidite3{background-color:#e7d3a4;}
.listeEdito table tr th{padding:1.2em;background-color:#fbf4f4;}

.modifieEdito{
	width:50%;
	/* margin:50px auto; */
}
.modifieEdito .edito-utilise{
	width:20%;
	float:left;
	padding:0.6em;
	border:1px dotted #b8bdc8;
}
.btnDesactive{
	color: #36425e;
	background-color:#b8bdc8;
}
@media screen and (max-width:768px)  and (max-width:800px)  {
	.listeEdito{
		width:auto;
		margin:0px;
	}
	.listeEdito table{
		width:auto;
	}
	.listeEdito table.laListeEdito{
		width:97%;
		border-spacing:0px;
		clear:both;
		margin:0px;
	}
	.listeEdito table tr td,
	.listeEdito table tr th{
		padding:0.4em;
	}
}

/*---------- Pied de page ---------------*/
.zone-pied-page{
	width:90%;
	margin-left:auto;
	margin-right:auto;
	padding:0.2em;
}
.racoon-liens-utiles{
	color:#353de3;
	text-align:center;
}
.racoon-liens-utiles h3{
	font-size:105%;
	font-weight:bold;
	text-align:center;
}
.racoon-liens-utiles table{
	width:100%;
}
.racoon-liens-utiles table th,
.racoon-liens-utiles table td{
	padding:0.5em;
	text-align:center;
	border-collapse:separate;
	border-spacing:0.4em;
}

.racoon-footer{
	background-color:#ced1ff;
	-webkit-border-radius: 1em 1em;
	border-radius: 1em 1em;
	-moz-border-radius: 1em 1em;
}
.messagePied{
	text-align:center;
	font-size:85%;
}
.contenant-pied-widget{
	width:65%;
}
.pied-infos{
	width:100%;
	padding:2em;
	color:#838388;
}
.pied-page-widget{
	float:left;
	width:45%;
	padding:0.2em;
}

/* Editorial */
.ajout-edito{
	width:90%;
	margin-left:auto;
	margin-right:auto;
	padding:1.2em;
	background-color:#e3e3e3;
	border:1px solid #747474;
}

/*-------all and ------device--- and (min-width:360px)--------------- Responsive -----------------------------------------*/
/* Smartphones */
@media (max-width: 480px) and (max-width:800px) {
	h1.racoon-tete-title{
		font-size:15pt;
	}
	.racoon-tete-gauche{
		width:100%;
		float:none;
	}
	.racoon-tete-droite{
		width:100%;
		float:none;
		text-align:center;
	}
	.container-menu{
		width:95%;
		margin-left:auto;
		margin-right:auto;
	}
	.racoon-footer{
		width:95%;
		margin-left:auto;
		margin-right:auto;
		
	}
	.zone-pied-page{
		width:100%;
		padding:0.2em;
	}
	.pied-infos{
		padding:0.2em;
		font-size:10px;
		margin-top:0.4em;
		text-align:right;
	}
	.contenant-pied-widget{
		width:65%;
	}
	.pied-page-widget{
		float:none;
		width:70%;
		margin-left:auto;
		margin-right:auto;
		padding:0.2em;
	}
	/*-------- Zone Edito -------*/
	.racoon-content{
		padding: 0.8em;
		margin:0px;
	}
	.racoon-header-widget{
		margin-top: 0.6em;
		margin-bottom: 0.4em;
		padding: 0.7em;
		background-color: white;
		box-shadow: 1px 1px 10px #3379ae;
	}
	.racoon-header-widget .zoneGauche,
	.racoon-header-widget .zoneDroite{
		float:none;
		width:100%;
	}
	.racoon-header-widget .zoneDroite{
		margin-left:0em;
		margin-top:0.5em;
	}
	.racoon-widget{
		width:100%;
		float:none;
	}	
	
	.zoneRSS{
		width:95%;
		margin-left:auto;
		margin-right:auto;
		padding:0.15em;
		background-color:#ecf3ce;
	}
	.liens-flux{
		padding:0.7em;
		background-color:#e7ecd5;
	}
	/*--------------- Navigation supérieure -----------------------*/
	#navigation-principale{
		width: 100%;
		text-align:center;
	}
	#navigation-principale li {
		padding: 5px;
		font-weight: bold;
		display:block;
	}
	#navigation-principale li a {
		color: #fff;
		text-decoration:none;
		padding:2px;
		transition:background 0.5s;
		-webkit-transition:background 0.5s;
		-moz-transition:background 0.5s;
	}
	#navigation-principale li a:hover{
		background-color:#aedaff;
		color:#495a68;
	}
	
	#navigation-secondaire ul li{
		margin:0px;
	}
	#navigation-secondaire li{
		display:block;
		padding:2px;
		font-weight:bold;
	}
	#navigation-secondaire li a{
		color:#555;
		font-size:10px;
		text-decoration:none;
		padding:2px;
		transition:background 0.5s;
		-webkit-transition:background 0.5s;
		-moz-transition:background 0.5s;
	}
	#navigation-secondaire li a:hover{
		background-color:#8f94de;
		color:#fff;
	}
	
	.racoon-menu-prieres{
		background-color:#dfdfe8;
		
	}
	#navigation-prieres ul li{
		margin:0px;
	}
	#navigation-prieres li{
		display:block;
		padding:5px;
		font-weight:bold;
	}
	#navigation-prieres li a{
		color:#555;
		font-size:12px;
		text-decoration:none;
		padding:5px;
		transition:background 0.5s;
		-webkit-transition:background 0.5s;
		-moz-transition:background 0.5s;
	}
	#navigation-prieres li a:hover{
		background-color:#c7c7d5;
		color:#fff;
	}
	
	.racoon-sidebar {
		float: none; 
		width: 100%;
		color: #676888; 
		font-size: 80%; 
		border-left: solid 1px blue; 
	}
	
}
/* Smartphones paysage & tablettes */
@media (min-width: 481px) and (max-width: 768px) and (max-width:800px){
	
}
/* Tablettes paysage & écran classique */
@media (min-width: 769px) and (max-width: 1200px) {
	
}
/* Grands écrans */
@media (min-width: 1200px) {
	
}

@media screen and (max-width:650px){
	/*
	h1.racoon-tete-title{
		font-size:15pt;
	}
	.racoon-tete-gauche{
		width:100%;
		float:none;
	}
	.racoon-tete-droite{
		width:100%;
		float:none;
		text-align:center;
	}
	.container-menu{
		width:95%;
		margin-left:auto;
		margin-right:auto;
	}
	.racoon-footer{
		width:95%;
		margin-left:auto;
		margin-right:auto;
		
	}
	.zone-pied-page{
		width:100%;
		padding:0.2em;
	}
	.pied-infos{
		padding:0.2em;
		font-size:10px;
		margin-top:0.4em;
		text-align:right;
	}
	.contenant-pied-widget{
		width:65%;
	}
	.pied-page-widget{
		float:none;
		width:70%;
		margin-left:auto;
		margin-right:auto;
		padding:0.2em;
	}
	/*-------- Zone Edito -------*/
	.racoon-content{
		padding: 0.8em;
		margin:0px;
	}
	.racoon-header-widget{
		margin-top: 0.6em;
		margin-bottom: 0.4em;
		padding: 0.7em;
		background-color: white;
		box-shadow: 1px 1px 10px #3379ae;
	}
	.racoon-header-widget .zoneGauche,
	.racoon-header-widget .zoneDroite{
		float:none;
		width:100%;
	}
	.racoon-header-widget .zoneDroite{
		margin-left:0em;
		margin-top:0.5em;
	}
	.racoon-widget{
		width:100%;
		float:none;
	}	
	
	.zoneRSS{
		width:95%;
		margin-left:auto;
		margin-right:auto;
		padding:0.15em;
		background-color:#ecf3ce;
	}
	.liens-flux{
		padding:0.7em;
		background-color:#e7ecd5;
	}
	/*--------------- Navigation supérieure -----------------------*/
	#navigation-principale{
		width: 100%;
		text-align:center;
	}
	#navigation-principale li {
		padding: 5px;
		font-weight: bold;
		display:block;
	}
	#navigation-principale li a {
		color: #fff;
		text-decoration:none;
		padding:2px;
		transition:background 0.5s;
		-webkit-transition:background 0.5s;
		-moz-transition:background 0.5s;
	}
	#navigation-principale li a:hover{
		background-color:#aedaff;
		color:#495a68;
	}
	
	#navigation-secondaire ul li{
		margin:0px;
	}
	#navigation-secondaire li{
		display:block;
		padding:2px;
		font-weight:bold;
	}
	#navigation-secondaire li a{
		color:#555;
		font-size:10px;
		text-decoration:none;
		padding:2px;
		transition:background 0.5s;
		-webkit-transition:background 0.5s;
		-moz-transition:background 0.5s;
	}
	#navigation-secondaire li a:hover{
		background-color:#8f94de;
		color:#fff;
	}
	
	.racoon-menu-prieres{
		background-color:#dfdfe8;
		
	}
	#navigation-prieres ul li{
		margin:0px;
	}
	#navigation-prieres li{
		display:block;
		padding:5px;
		font-weight:bold;
	}
	#navigation-prieres li a{
		color:#555;
		font-size:12px;
		text-decoration:none;
		padding:5px;
		transition:background 0.5s;
		-webkit-transition:background 0.5s;
		-moz-transition:background 0.5s;
	}
	#navigation-prieres li a:hover{
		background-color:#c7c7d5;
		color:#fff;
	}
	
	.racoon-sidebar {
		float: none; 
		width: 100%;
		color: #676888; 
		font-size: 80%; 
		border-left: solid 1px blue; 
	}
	
	
	.racoon-post{
		background-color:#e8e9ff;
		margin-bottom:0.2em;
		padding:0.3em;
	}
	.racoon-post-title{
		font-weight:bold;
		color:#1a21b1;
	}
	.racoon-post-title a:hover{
		background-color:#4d53d7;
		color:#edeeff;
		text-decoration:none;
	}
	
	.racoon-post-meta{
		height:15px;
		padding:2px;
	}
	.racoon-post-dateArticle{
		width:45px;
		height:35px;
		float:right;
		padding:1px;
	}
	.racoon-post-ladate1{
		text-align:center;
		font-size:12px;
		font-weight:bold;
		color:#414144;  
		background-color:#bfc0d4;
		display:block;
	}
	.racoon-post-ladate2{
		text-align:center;
		font-size:9px;
		background-color:#dfdfe8;
		display:block;
	}
	
	
}
/* and (min-width:770px)*/
@media screen and (max-width:990px){
	
	h1.racoon-tete-title{
		font-size:10pt;
	}
	.racoon-tete-gauche{
		width:100%;
		float:none;
	}
	.racoon-tete-droite{
		width:100%;
		float:none;
	}
	.container-menu{
		width:95%;
		margin-left:auto;
		margin-right:auto;
	}
	.racoon-footer{
		width:95%;
		margin-left:auto;
		margin-right:auto;
		
	}
	.zone-pied-page{
		width:100%;
		padding:0.2em;
	}
	.pied-infos{
		padding:0.2em;
		font-size:10px;
		margin-top:0.4em;
		text-align:right;
	}
	.contenant-pied-widget{
		width:65%;
	}
	.pied-page-widget{
		float:none;
		width:70%;
		margin-left:auto;
		margin-right:auto;
		padding:0.2em;
	}
	/*-------- Zone Edito -------*/
	.racoon-content{
		padding: 0.8em;
		margin:0px;
	}
	.racoon-header-widget{
		margin-top: 0.6em;
		margin-bottom: 0.4em;
		padding: 0.7em;
		background-color: white;
		box-shadow: 1px 1px 10px #3379ae;
	}
	.racoon-header-widget .zoneGauche,
	.racoon-header-widget .zoneDroite{
		float:none;
		width:95%;
		margin-left:auto;
		margin-right:auto;
	}
	.racoon-header-widget .zoneDroite{
		margin-top:0.1em;
	}
	.racoon-widget{
		width:100%;
		float:none;
	}	
	
	.zoneRSS{
		width:95%;
		margin-left:auto;
		margin-right:auto;
		padding:0.15em;
		background-color:#ecf3ce;
	}
	.liens-flux{
		padding:0.7em;
		background-color:#e7ecd5;
	}
	/*--------------- Navigation supérieure -----------------------*/
	#navigation-principale{
		width: 100%;
		text-align:center;
	}
	#navigation-principale li {
		padding: 5px;
		font-weight: bold;
		display:block;
	}
	#navigation-principale li a {
		color: #fff;
		text-decoration:none;
		font-size:11pt;
		padding:2px;
		transition:background 0.5s;
		-webkit-transition:background 0.5s;
		-moz-transition:background 0.5s;
	}
	#navigation-principale li a:hover{
		background-color:#aedaff;
		color:#495a68;
	}
	/*-------------- Navigation de bas de page --------------*/
	#navigation-secondaire ul li{
		margin:0px;
	}
	#navigation-secondaire li{
		display:block;
		padding:2px;
		font-weight:bold;
	}
	#navigation-secondaire li a{
		color:#555;
		font-size:10pt;
		text-decoration:none;
		padding:2px;
		transition:background 0.5s;
		-webkit-transition:background 0.5s;
		-moz-transition:background 0.5s;
	}
	#navigation-secondaire li a:hover{
		background-color:#8f94de;
		color:#fff;
	}
	
	.racoon-menu-prieres{
		background-color:#dfdfe8;
		
	}
	#navigation-prieres ul li{
		margin:0px;
	}
	#navigation-prieres li{
		display:block;
		padding:5px;
		font-weight:bold;
	}
	#navigation-prieres li a{
		color:#555;
		font-size:12px;
		text-decoration:none;
		padding:5px;
		transition:background 0.5s;
		-webkit-transition:background 0.5s;
		-moz-transition:background 0.5s;
	}
	#navigation-prieres li a:hover{
		background-color:#c7c7d5;
		color:#fff;
	}
	
	/*------------------ Barre latérale ---------------*/
	.racoon-sidebar {
		float: none; 
		width: 100%;
		color: #676888; 
		font-size: 80%; 
		border-left: solid 1px blue; 
	}
	
	/*------------------- Affichage des articles et pages -------------------*/
	.racoon-post{
		background-color:#e8e9ff;
		margin-bottom:0.2em;
		padding:0.3em;
	}
	.racoon-post-title{
		font-weight:bold;
		color:#1a21b1;
	}
	.racoon-post-title a:hover{
		background-color:#4d53d7;
		color:#edeeff;
		text-decoration:none;
	}
	
	.racoon-post-meta{
		height:15px;
		padding:2px;
	}
	.racoon-post-dateArticle{
		width:45px;
		height:35px;
		float:right;
		padding:1px;
	}
	.racoon-post-ladate1{
		text-align:center;
		font-size:12px;
		font-weight:bold;
		color:#414144;  
		background-color:#bfc0d4;
		display:block;
	}
	.racoon-post-ladate2{
		text-align:center;
		font-size:9px;
		background-color:#dfdfe8;
		display:block;
	}
	
}

/*--------- Style pour le PortFolio -------------------*/
.page-portfolio{
	width:90%;
	margin:0.6em auto 0.6em auto;
}
.page-portfolio .projetfolio{
	margin:10px 50px 10px 10px;
	float:right;
	padding: 10px 10px 20px 10px;
  	border: 1px solid #bfbfbf;
  	background-color: white;
  	width:240px;
  	height:350px;
}
.page-portfolio .projetfolio:hover{
	-webkit-box-shadow: 5px 5px 8px #aaaaaa;
	-moz-box-shadow: 5px 5px 8px #aaaaaa;
	box-shadow: 5px 5px 8px #aaaaaa;
}
.page-portfolio .projetfolio .title{
	text-align:center;
}
.page-portfolio .projetfolio a{
	text-decoration:none;
	/*font-size:95%;*/
}
.page-portfolio .projetfolio a:link,
.page-portfolio .projetfolio a:visited{
	color:#ada316;
	background-color:inherit;
	padding:0.4em;
	border-radius:0.3em;
}
.page-portfolio .projetfolio a:hover{
	color:#1624ad;
	background-color:#d7d9ed;
	padding:0.4em;
	border-radius:0.3em;
	box-shadow: 5px 5px 8px #aaaaaa;
}
.page-portfolio .projetfolio-image {
	margin-left: auto;
	margin-right:auto;
	max-width:60%;
}
.page-portfolio .projetfolio-image img:hover {
	border-radius: 0;
	text-align:center;
	box-shadow:3px 3px 9px #aaa;
}
.page-portfolio .projetfolio-image a:link,
.page-portfolio .projetfolio-image a:visited{
	color:#000;
	background-color:inherit;
	padding:0;
}
.page-portfolio .projetfolio-image a:hover{
	padding:0;
}
.page-portfolio .projetfolio-work {
	display: inline-block;
	max-width: 80%;
}
.projetfolio-page{
	width:90%;
	margin-top:0.75em;
	margin-right:auto;
	margin-bottom:0.75em;
	margin-left:auto;
	padding:0.5em;
	box-shadow:2px 2px 10px #aaa;
}

/* Les pages privées */
.racoon-archives{
	width:280px;
	height:400px;
	float:right;
	border:1px solid #bfbfbf;
	background-color:white;
	margin:0.5em;
	padding:0.5em;
}
.racoon-archives:hover{
	box-shadow:1px 1px 10px #aaa;
}
.racoon-archives a{
	text-decoration:none;
}
.racoon-archives-image{
	float:left;
	margin:0.3em;
}
.racoon-archives-content{
	padding:0.7em;
}
.racoon-archives-tags{
	font-size:95%;
}

/*	Panneau latéral	*/
#panneau-lateral{
	z-index: 9999;                  /* pour être au dessus des autres éléments */
	position: fixed;                /* ne suit pas le scroll de la page et sert de réfèrent */
	top: 20;                         /* position en haut */
	left: 0;                        /* à gauche */
	width: 20em;                    /* valeur de largeur pour tout le contenu */
	min-height: 100vh;              /* occupe toute la hauteur du viewport */
	transform: translateX(-100%);   /* on déplace à gauche pour ne pas interférer avec le document */
}
#panneau-lateral-input {
	position: absolute;           /* pour sortir l'élément du flux */
	left: -999em;                 /* position hors de la fenêtre */
}
#panneau-lateral-label {
	z-index: 1;                   /* on le met au dessus */
	position: absolute;           /* pour sortir l'élément du flux, il va bouger */
	top: 20;                       /* position en haut */
	left: 100%;                   /* alignement sur le bord droit du parent */
	width: 3em;                   /* dimensions respectables */
	height: 3em;
	cursor: pointer;
	text-align:center;
}
#panneau-lateral-bloc {
	z-index: 0;                   /* mise au niveau zéro */
	position: absolute;           /* pour sortir l'élément du flux, il va bouger */
	top: 20;                       /* position en haut */  
	left: 0;                      /* alignement sur bord gauche du parent */
	box-sizing: border-box;       /* modèle de boîte, plus simple à gérer */
	width: 100%;                  /* largeur 100% de son parent */
	height: 100%;                 /* hauteur 100% de son parent */
	padding: 1em;                 /* on décolle le contenu du bord */
	overflow: auto;               /* rien ne doit déborder */
}
#panneau-lateral-input:checked ~ #panneau-lateral-label {
	left: 200%;                     /* décalage vers la droite, passe de 100% à 200% */
}   
#panneau-lateral-input:checked ~ #panneau-lateral-bloc {
	transform: translateX(100%);    /* translation vers la droite de 100% */
}
#panneau-lateral-label,
#panneau-lateral-bloc {
	font-size: inherit;             /* taille font du référent */
	background: #fff;               /* il faut un fond opaque */
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	transition: all .5s;
}
#panneau-lateral-label:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	box-sizing: border-box;
	width: 1em;
	height: 1em;
	border: .5em solid currentColor;
	border-width: .5em .5em 0 0;
	color: #888;
	transition: all .5s;
	transform: translate(-50%, -50%) rotate(45deg);
}
/*	Petit effet de rotation pendant le déplacement avec la règle CSS suivante : */
#panneau-lateral-input:checked ~ #panneau-lateral-label:before {
	transform: translate(-50%, -50%) rotate(-135deg);
}


/* Diaporama : définition de l'animation sur les images */
/*.diaporama img {
	animation: fade-in-out 6s ease infinite 0s;
	opacity: 0;
}
/* définition délai des images /
.diaporama img:nth-child(1) { animation-delay: 0s;}
.diaporama img:nth-child(2) { animation-delay: 2s;}
.diaporama img:nth-child(3) { animation-delay: 4s;}
/* définition des étapes 
@keyframes fade-in-out {
	0%, 100% {
		opacity: 0;
	}
	16.67% {
		opacity: 1;
	}
	33.33% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}*/


/* and (min-height:800px)
@media screen and (min-width:1280px){
	
	h1.racoon-tete-title{
		font-size:10pt;
	}
	.racoon-tete-gauche{
		width:48%;
		float:left;
	}
	.racoon-tete-droite{
		width:48%;
		float:right;
	}
	.container-menu{
		width:95%;
		margin-left:auto;
		margin-right:auto;
	}
	.racoon-footer{
		width:95%;
		margin-left:auto;
		margin-right:auto;
		
	}
	.zone-pied-page{
		width:100%;
		padding:0.2em;
	}
	.pied-infos{
		padding:0.2em;
		font-size:10px;
		margin-top:0.4em;
		text-align:right;
	}
	.contenant-pied-widget{
		width:65%;
	}
	.pied-page-widget{
		float:left;
		width:45%;
		padding:0.2em;
	}
	/*-------- Zone Edito -------/
	.racoon-content{
		padding: 0.8em;
		margin:0px;
	}
	.racoon-header-widget{
		margin-top: 0.6em;
		margin-bottom: 0.4em;
		padding: 0.7em;
		background-color: white;
		box-shadow: 1px 1px 10px #3379ae;
	}
	.racoon-header-widget .zoneGauche,
	.racoon-header-widget .zoneDroite{
		float:left;
		width:49%;
	}
	.racoon-header-widget .zoneDroite{
		margin-left:1.6em;
		margin-top:0.6em;
	}
	.racoon-widget{
		width:100%;
		float:none;
	}	
	
	.zoneRSS{
		width:95%;
		margin-left:auto;
		margin-right:auto;
		padding:0.15em;
		background-color:#ecf3ce;
	}
	.liens-flux{
		padding:0.7em;
		background-color:#e7ecd5;
	}
	/*--------------- Navigation supérieure -----------------------/
	#navigation-principale{
		width: 100%;
	}
	#navigation-principale li {
		padding: 5px;
		font-weight: bold;
		display:inline-block;
	}
	#navigation-principale li a {
		color: #fff;
		text-decoration:none;
		padding:2px;
		transition:background 0.5s;
		-webkit-transition:background 0.5s;
		-moz-transition:background 0.5s;
	}
	#navigation-principale li a:hover{
		background-color:#aedaff;
		color:#495a68;
	}
	/*--------------- Navigation en pied de page -----------------------/
	#navigation-secondaire ul li{
		margin:0px;
	}
	#navigation-secondaire li{
		display:inline-block;
		padding:2px;
		font-weight:bold;
	}
	#navigation-secondaire li a{
		color:#555;
		font-size:10px;
		text-decoration:none;
		padding:2px;
		transition:background 0.5s;
		-webkit-transition:background 0.5s;
		-moz-transition:background 0.5s;
	}
	#navigation-secondaire li a:hover{
		background-color:#8f94de;
		color:#fff;
	}
	/*---------------- Barre latérale ----------------------------/
	.racoon-sidebar {
		position:relative;
		float: right; 
		width: 250px;
		color: #676888; 
		font-size: 80%; 
		border-left: solid 1px blue; 
	}
	
	/*----------------- Affichage des articles et pages -------------------/
	.racoon-post{
		background-color:#e8e9ff;
		margin-bottom:0.2em;
		padding:0.3em;
	}
	.racoon-post-title{
		font-weight:bold;
		color:#1a21b1;
	}
	.racoon-post-title a:hover{
		background-color:#4d53d7;
		color:#edeeff;
		text-decoration:none;
	}
	
	.racoon-post-meta{
		height:15px;
		padding:2px;
	}
	.racoon-post-dateArticle{
		width:45px;
		height:35px;
		float:right;
		padding:1px;
	}
	.racoon-post-ladate1{
		text-align:center;
		font-size:12px;
		font-weight:bold;
		color:#414144;  
		background-color:#bfc0d4;
		display:block;
	}
	.racoon-post-ladate2{
		text-align:center;
		font-size:9px;
		background-color:#dfdfe8;
		display:block;
	}

}
*/

/*----------------- Général -----------------------*/
.ombreBoite{
	box-shadow: 1px 1px 12px #555;
	-moz-box-shadow: 1px 1px 12px #555;
	-webkit-box-shadow: 1px 1px 12px #555;
}
.arrondi{
	-webkit-border-radius: 8px 8px;
	-moz-border-radius-bottomleft: 8px 8px;
	border-radius:8px 8px;
}
.arrondiFin{
	border-radius:5px 5px;
	-moz-border-radius:5px 5px;
	-webkit-border-radius:5px 5px;
}

/*----------------- le nettoyeur -----------------*/
.nettoyeur {clear:both; visibility:hidden;}