@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&family=Patua+One&display=swap');

HTML {
  height: 100%;
  width: 100%;
  font-size: 100%;
  margin: 0;
  padding: 0;	
}

BODY{
	position:relative;
	width: 100%;
	padding: 0;	
	margin: 0;
	font-size: 62.5%;	
	color:black;
	background-color:white;
	line-height:1.1;
    font-family: 'arial', sans-serif;
	}
*{
box-sizing: border-box;
}
img{
max-width:100%;
}
td{line-height:1.2;
}
.print{
	display:none;
	}	
@media print { 
	.print
	{
		display: block;
	}

	.noprint
	{
		display: none;
	}
}
.nettoyeur{
clear:both;
}

HEADER{
	position:relative;
	width:100%;
	padding:10px 0 1px 0;
	max-width:1500px;
	margin:0 auto;
background:#007cae;
}

.centrer{
	position:relative;
	width:100%;
	max-width:1200px;
	margin:0 auto 0 auto;
}

main.homepage, main
{
	position:relative;
	width:100%;
	max-width:1500px;
padding: 30px 50px;
	margin:0 auto;	
}

#zone
{
	position:relative;
	float:left;
	width:70%;
	padding:30px;
}


#container_colonne
{
	position:relative;
	float:left;
	width:30%;
	padding:40px 0 0 20px;
}

#filariane
{
	width: 100%;
	padding:0 0 30px 0;
	text-align:left;;
}
A.arianne
{
	font-size: 0.8rem;
	color: black;
	text-decoration:none;
  font-weight:normal;
}

FOOTER
{
	width:100%;
	background:#252023;
	color:white;
	padding:15px;
	font-size:1.2rem;
}
FOOTER div:first-child
{
text-align:center;
}
FOOTER div:first-child img
{
border-radius:50px;
}
FOOTER .quatrecolonnes{
padding:30px;
}

FOOTER H3
{
	color:white;
	font-size: 1.2rem;
	text-transform:uppercase;
	margin:0 0 20px 0;
	text-decoration:none;
}

FOOTER A
{
	font-size: 0.8rem;
	color: white;
	text-decoration: underline;
}
section.menu_pied{
background:#343433;
text-align:center;
padding: 15px;
}
section.menu_pied li{
display:inline-block;
}
section.menu_pied li a{
font-size: 1rem;
color: white;
text-decoration: none;
padding: 10px;
}
.sprite {
  display: block;
  width: 36px;
  height: 28px;
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
  background-image: url('/squelettes/images/sprite.png');
  background-position: -33px -55px;
}
.twitter {
  background-position: -68px -55px;
}
.youtube {
  background-position: -140px -57px;
}
.insta {
  background-position: -180px -57px;
}
.rss {
  background-position: -102px -55px;
}
A.rezo{
display:inline-block;
background:white;
padding:12px;
margin:10px;
}
.bandeaurezo{
right: 350px;
  position: absolute;
  top: 16px;
}
.bandeaurezo A.rezo {
  display: inline-block;
  background: transparent;
  padding: 9px;
  margin: 0px;
  }
/* ==============================================
     MENUS
=================================================*/
.logo{
	display:block;
	margin:0 30px 20px 30px;
	width: 130px;
}
.slogan{
color: white;
  font-size: 1.7rem;
  line-height: 1.3;
  display: block;
  position: absolute;
  top: -20px;
  right: 30px;
}
NAV.principal{
	display:block;
	background:#1d385f;
padding: 0;
  margin: 0 auto;
  text-align: center;
}
NAV.principal div{
width: 1030px;
margin:0 auto;
}
NAV.principal LI{
	display:inline-block;
	position:relative;
	margin:0;
	}
	
NAV.principal LI A{	
	display:inline-block;
padding: 10px;
	font-size:1.1rem;
	text-decoration:none;
	text-align:center;
	color:white;
	border-right:1px solid #007cae;
}


A.lienmenu{	
	display:inline-block;
	height:20px;
	margin-top:13px;
	padding:3px 15px;
	font-weight:normal;
	font-size:0.8rem;
	text-decoration:none;
	text-transform:uppercase;
	border-right:1px solid #c8d19e;
	color:black;
	
}
NAV LI A:hover{
	text-decoration:none;
	background:#f2f2f2;
	color:black;
}

NAV LI UL{	
	display:none;
	top:30px;
	position:absolute;
	width:250px;
	background:#1d385f;
	z-index:5;
	padding:0;
}
NAV.principal LI UL LI{	
	margin:5px;
	float:none;
	display:block;
}
NAV.principal LI UL LI A{	
	display:block;
	border:0 none;
	padding:10px;
	font-size:1rem;
	text-align:left;
}
NAV.principal LI UL LI A:hover{
	color:#1d385f;
	background:white;
}

.menu_niveau1_actif{
background:#007cae;

}
#btmenu, #navigationsmartphone{
display:none;
}
#div_recherche{
	position:absolute;
	top:0;
	right:60px;
	height:140px;
	width:0;
	background:#f2f2f2;
	overflow:hidden;
}
.bt_don, .bt_adhesion{
position:absolute;
top:20px;
right:20px;
background:#1d385f;
font-size:1.5rem;
color:white;
padding:5px 15px;
border-radius:5px;
}
.bt_don{
right:160px;
}
.bt_don:hover, .bt_adhesion:hover{
text-decoration:none;
color:#007cae;
background:white;
}
/* ==============================================
      LISTE ARTICLES
=================================================*/

.deuxcolonnes{
display:grid;
grid-template-columns: 2fr 1fr;
column-gap:50px;
row-gap:15px;
}
.deuxcolonnes div:first-child{
padding:0 50px 0 0;
border-right:1px solid #e0e0e0;
}
.deuxcolonnes div A.lien_article:nth-child(n+2){
padding:30px 0 0 0;
border-top:1px solid #e0e0e0;
margin:30px 0 0 0;
}
.deuxcolonnes .titre {
  font-size: 1.5rem;
  font-weight: bold;
  margin:0 0 20px 0;
}
.deuxcolonnes div:first-child .titre {
  font-size: 2.1rem;
  font-weight: bold;
}
.quatrecolonnes{
display:grid;
grid-template-columns:repeat(4,1fr);
column-gap:5%;
row-gap:15px;
margin:30px 0;
}
.troiscolonnes{
display:grid;
grid-template-columns:repeat(3,1fr);
column-gap:40px;
row-gap:30px;
margin:30px 0;
}
.troiscolonnes div A:after{
content:"";
position:absolute;
height:100%;
width:1px;
top:0;
right:-20px;
background:#e0e0e0;
}
.troiscolonnes div:nth-child(3n) A:after{
display:none;
}
.troiscolonnes.partenaires div A:after{
display:none;
}
.troiscolonnes.partenaires div{
  align-self: center;
  justify-self: center;
  padding:10%;
}

.troiscolonnes.partenaires .titre{
text-align:center;
}

.titre {
  font-size: 1.1rem;
  font-weight: bold;
  margin:15px 0 20px 0;
}
.gros_titre {
  font-size: 1.4rem;
  font-weight: bold;
  margin:15px 0 20px 0;
}
.date{

padding: 20px;
border:3px solid #d37112;
border-radius:20px;
text-align:center;
font-weight:bold;
font-size:1.5rem;
color:#d37112;
}
.date span{
display:block;
font-size:3rem;
}
.datefin{
float:right;
position:relative;
}
.datefin:before{
position:absolute;
content:">";
font-size:6rem;
left: -84px;
top: 17px;
}
.voir_tout{
display: block;
text-align: right;
color: #d37112;
font-size: 1.3rem;
margin: 0 20px 30px 0;
font-weight: bold;
}

.pagination-item{
display:inline-block;
font-size: 0.8rem;
}
/* ==============================================
      PAGE ARTICLE
=================================================*/
article{
max-width:910px;
margin:0 auto;
position: relative;
}

H1{
	font-size:2.3rem;
	font-weight:normal;
	margin:20px 0 20px 0;
    font-family: 'Patua One', cursive;
	page-break-before: avoid;
}
H2{
	font-size:1.6rem;
	text-transform:uppercase;
	font-weight:normal;
	margin:20px 0 20px 0;
    font-family: 'Patua One', cursive;
	page-break-before: avoid;
}
H3,H3.spip{
    font-family: 'Patua One', cursive;
	color:#ec008d;
	font-size:1.6rem;
	text-decoration:underline;
}
H4{
font-size: 1rem;
  margin: 8px 0;
  }
.lien_groupe{
display:inline-block;
margin:10px;
padding:10px 15px;
font-size:0.9rem;
border:1px solid #007cae;
border-radius:5px;
color:black;
}
.lien_groupe:hover{
background:#007cae;
color:white;
text-decoration:none;
}
.titre_bloc{
	display:inline-block;
	font-size:1.9rem;
	font-weight:bold;
	text-transform:uppercase;
	border-bottom:4px solid black;
	margin:25px 0;
	line-height: 0.9;
}
.surtitre{
	color:#e04c50;
	font-size:1rem;
	font-weight:bold;
}

.ptitre{
	font-size:1rem;
	font-weight:bold;
}
.soustitre{
	color:#1daabb;
	font-size:1rem;
	font-weight:bold;
}

.introduction{
	padding:15px 0 25px 0;
	color:#484848;
	font-size: 1.2rem;
}
.texte{
font-size: 1.3rem;
line-height: 1.3;
}
.tag{
	display:inline-block;
	color:#d37112;
	margin:1px 1px 5px 1px;	
	font-size:0.8rem;
}
.tag_article{
	display:inline-block;
	color:#d37112;
	border:1px solid #d37112;
	padding:2px 5px;
	border-radius:10px;
	margin:5px 1px;	
	font-size:0.9rem;
}
.date_auteur{
font-size:1.2rem;
font-weight:bold;
}
.bt{
	display:inline-block;
	text-align:center;
	color:white;
	width:35px;
	height:35px;
	margin-right:2px;
	font-size:1.4rem;
	padding-top:6px;
}

.chapo{
	font-size:1.2rem;
	font-weight:bold;
	margin:30px 0;
}
.texte{

	}
A{
	color: #d37112;
	text-decoration: none;
	cursor:pointer;
}
A:hover
{
	text-decoration: underline;
	color:gray;
}
A.lien_doc{
	display:block;
	margin:3px 0;
	padding:15px;
	text-decoration: none;
	background:#f2f2f2;
	color:black;
	font-size:1.4rem;
}
A.lien_doc:hover
{
	text-decoration: none;
	background:#e0dede;
}
.sep{
display:none;
}
.lien_pagination, .on{
	display:inline-block;
	color: black;
	text-decoration: none;
	border:1px solid #d5d5d4;
	padding:13px;
	margin:0;
}


.spip_documents, .spip_documents_center, .spip_doc_titre, .spip_doc_descriptif {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

/*  PAGE */

.bouton,.pbouton, .bouton_noir{
    display:inline-block;
	background: white;
	border:1px solid black;
	color:black;
	font-size:1rem;
    padding:10px 15px;
	font-weight:bold;
	text-decoration:none;
	cursor:pointer;
	text-transform:uppercase;
	margin:5px;
	border-radius: 5px;
	#-moz-border-radius: 3px;
	#-webkit-border-radius: 3px;
}
.bouton_noir{
    display:inline-block;
	background: black;
	border:1px solid black;
	color:white;
	}
.bouton:hover,.pbouton:hover{
    background: white;
	color:black;
	border:1px solid black;
	text-decoration:none;
}
.pbouton{
	font-size:0.8rem;
    padding:0 6px 3px 6px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;	
	}

A.lien_rubrique
{
	display:block;
	padding:25px ;
	margin:30px 0;
	font-size: 1rem;
	color: black;
	text-decoration: none;
	font-weight: normal;
	-moz-box-shadow: 10px 10px 20px 0px rgb(0,0,0,0.2);
	-webkit-box-shadow: 10px 10px 20px 0px rgb(0,0,0,0.2);
	-o-box-shadow: 10px 10px 20px 0px rgb(0,0,0,0.2);
	box-shadow: 10px 10px 20px 0px rgb(0,0,0,0.2);
	filter:progid:DXImageTransform.Microsoft.Shadow(color=rgb(0,0,0,0.2), Direction=134, Strength=20);	
}

A.lien_article, .lien_article
{
    display:block;
	position:relative;
	margin-top:10px;
	color:black;
	cursor:pointer;
}
A.lien_article:hover
{
text-decoration:none;

}

.illustration{
	float:left;
	margin-right:30px;
	width:220px;
	text-align:center;
	height:140px;
	overflow:hidden;	
}
.illustrationv2{
	width:100%;
	text-align:center;
	height:160px;
	overflow:hidden;
	margin-bottom:10px;
}
.illustrationv{
	width:100%;
	text-align:center;
	height:115px;
	overflow:hidden;
}
.illustrationh{
	width:115px;
	float:left;
	text-align:center;
	height:80px;
	overflow:hidden;
	margin-right:15px;
}

table{
	border:0 none;
	font-size:1.1rem;
}

TD.entete {
	height:40px;
	background-color:#ececea;
	color:#7f2d6b;
	text-align:center;
	text-transform:uppercase;
	border:0 none;
}

TD {
	color:#626162;
}

tr > * + *  {
	border-left:0 none;
}

TR:hover{
	background-color:#ececea;
}

A.bt_menu{
	display:inline-block;
	background-color:#08709c;
	color:white;
	padding:3px 6px;
	font-size:0.8rem;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;	
	margin:1px;
	text-align:center;
	border:1px solid transparent;
}
A.bt_menu:hover{
	border:1px solid #08709c;
	color:#08709c;
	background-color:white;
	text-decoration:none;
}
.cs_blocs{
	margin:15px 0 35px 0 !important;
}

.blocs_titre{
	display:block;
	position:relative;
	background:#ec921a;
	color:white;
	text-align:left;
	padding: 16px 2%;
	margin: 5px 0;
	font-size:1.2rem;
}
.blocs_titre A{
	color:black;
}
.blocs_titre:hover{
	background:#C0C0C0;
}

.blocs_titre A:hover{
	text-decoration:none;
}
.blocs_destination{
	display:block;
	padding:10px;
	border:1px solid #F0F0F0;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;	
}	
/* FORMULAIRE */
.reponse_ok{
	padding:3px;
	margin:20px 3px;
	background:#d1fcd1;
	color:#01b801;
	border:1px solid #01b801;
	border-left:4px solid #01b801;
}
.erreur{
	display:block;
	padding:3px;
	margin:3px 3px 10px 3px;
	font-size:0.8rem;
	background:#fdd4d4;
	color:#fa1717;
	border:1px solid #fa1717;
	border-left:4px solid #fa1717;
}
FIELDSET{
	background-color:#F0F0F0;
	border:0 none;
	margin: 20px 0;
}

LABEL{
width: 100%;
  font-weight: bold;
font-size: 1.3rem;
  padding: 18px 10px 0px 0;
  display: block;
}

LEGEND{
font-weight:bold;
font-size:18px;
}

input[type="radio"], input[type="checkbox"]{
float:left;
}
input[type="text"] ,input[type="email"] , SELECT{
	border: 1px solid #C0C0C0;
	color: black;
	background-color: white;
	height: 39px;
	padding: 0 0 0 8px;
	font-size: 15px;
	margin:2px;
    width: 100%;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;	

}

.selectmenu SELECT{
	 background: transparent;
	width: 120%;
	padding: 0;
	line-height: 1;
	border: 0;
	border-radius: 0;
	height: 39px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;  
}
div.selectmenu{
	display:inline-block;
	position:relative;
	margin:4px;
	padding:0;
	width: 300px;
	max-width:100%;
	height: 39px;
	overflow: hidden;
	background: url(/images/fleche_select.png) no-repeat 100% center white;
	border:1px solid #ec008d;
}

TEXTAREA{
border: 1px solid #C0C0C0;
color: black;
padding: 8px;
font-size: 13px;
margin:2px;
width:90%;
height:200px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

input[type="submit"],input[type="button"], button, .bouton3, A.lien_bouton {
    position:relative;
	background-color: #007cae;
	color:white;
	font-size:1.2rem;
    padding: 7px 15px;
	font-weight:normal;
	cursor:pointer;
	text-transform:uppercase;
	border-radius: 5px;
	border:0 none;
}
.decale{
	top:-19px;
	}
input[type="image"] {
    padding:0;
	height:auto;
}

.erreur{
text-indent:20px;
font-size:0.8rem;
color:red;
font-weight:bold;
}

.erreur:before
{
content:url(/images/attention.png);
} 


/* Logos, documents et images */
img { margin: 0px; padding: 0px; border: none;height: auto; }

.spip_logos { margin: 0px; padding: 0px; border: none; }

.spip_doc_titre {
	font-size: 11px;
	font-weight: normal;
}

/* max-width pour faibles résolutions */

@media screen and (max-width: 1200px) {
	.logo {
	width: 90px;
	}

	.slogan {
  color: white;
  font-size: 1.5rem;
  line-height: 1.3;
  display: block;
  position: absolute;
  top: 43px;
  right: 30px;
	}
	.bt_don, .bt_adhesion {
  top: 13px;
  font-size: 1.2rem;
	}
}
@media screen and (max-width: 1000px) {
	#btmenu{
	display: block;
    position: absolute;
left: 17px;
    top: 28px;
    text-align: center;
    color: black;
    font-size: 1rem;
    line-height: 0.8;
	}
	#btmenu img{
	width:40px;
	}
	.logo {
	margin: 0 30px 20px 80px;	
	}
	#navigationprincipale{display:none;
	}
	NAV#navigationsmartphone LI {
	  padding:0 0 30px 10px;
	}	
	NAV#navigationsmartphone LI {
	  display: block;
	  border:none;
	  margin: 0;
	  font-size:1.8rem;
	}	
	
	NAV#navigationsmartphone LI A{
	  display: block;
	  border:none;
	  padding:15px 0 0 15px;
	  text-align:left;
	  font-size: 1.4rem;
	}  	  	
	#navigationsmartphone .cadre_menu{
	display:block;
	width: 100%;
	position: relative;
    top: 0;
    margin: 7px 0 10px 0;
	}
	#navigationsmartphone .cadre_menu li{
	margin:0 0 0 30px;
	padding:0 0 0 15px;
	border-left:1px solid #007cae;
	}
	#navigationsmartphone .cadre_menu li a{
	padding:10px;
	font-size: 1rem;
	}	
}


/* max-width pour faibles résolutions */
@media screen and (max-width: 800px) {
	main.homepage, main {
	  padding: 20px;
	}
	.deuxcolonnes {
	  display: block;
	}	
	.deuxcolonnes div:first-child {
	  padding: 0;
	  border-right: 0 none;
	}	
	.deuxcolonnes div:first-child .titre {
	  font-size: 1.6rem;
	  font-weight: bold;
	}	
	.quatrecolonnes {
	  grid-template-columns: repeat(2,1fr);
	  column-gap: 5%;
	  row-gap: 15px;
	}
	.troiscolonnes {
	  grid-template-columns: repeat(2,1fr);
	}	
	.troiscolonnes div:nth-child(3n) A::after {
	  display: block;
	}		
	.troiscolonnes div:nth-child(2n) A::after {
	  display: none;
	}	
	.bandeaurezo{
	display:none;
	}
}
/* max-width pour faibles résolutions */
@media screen and (max-width: 700px) {
	.slogan {
	display:none;
	}
}
@media (max-width: 550px) {
	.quatrecolonnes {
	  grid-template-columns: 1fr;
	  column-gap: 5%;
	  row-gap: 15px;
	}
	.troiscolonnes {
	  grid-template-columns: 1fr;
	}			
	.troiscolonnes div:nth-child(2n) A::after {
	  display: none;
	}	
	.illustration{
		float:none;
		width:100%;
		margin:0 0 5px 0;
		max-height:200px;
		overflow:hidden;
	}
	#div_recherche {
		right: 0;
		height: auto;	
	}
	.decale{
	top:0;
	}
	.bt_don {
	  top: 60px;
	  right: 20px;	
   }
}

@media print {
	#container_colonne, header, footer, .noprint, .pagination,#spip-admin{
	display:none;
	}
	#container, #zone{
	width:100%;
	}
	.print{
	display:block;
	}	
}


LI.editer{
list-style-type: none;
}
#colorbox, #colorbox * {
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 }
#colorbox img { height: inherit; }

.box_modalbox
{-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;

}