/*

Bleu clair : #00a3b4;

Bleu foncé : #203365;

Jaune : #ffd503;

*/



html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video

{

	margin: 0;

	padding: 0;

	border: 0;

	font-size: 100%;

	font: inherit;

	vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, main, menu, nav, section

{

	display: block;

}



*:after,

*:before {

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  -o-box-sizing: border-box;

  -ms-box-sizing: border-box;

  box-sizing: border-box;

}



audio,

canvas,

video {

  display: -moz-inline-stack;

  display: inline-block;

  *vertical-align: auto;

  zoom: 1;

  *display: inline;

}



table {

	border-collapse: collapse;

	border-spacing: 0;

}



b, strong {

  font-weight: bold;

}



i

{

font-style: italic;

}



a img {

  border: none;

}



ol, ul {

margin: 10px 0 10px 20px;

}



button,

input,

select,

textarea {

  font-family: inherit;

  font-size: 100%;

  margin: 0;

}



textarea {

  overflow: auto;

  vertical-align: top;

  height: 140px;

  resize: none;

}



sub

{

vertical-align: sub;

font-size: 90%; 

line-height: 100%; 

}



sup

{

vertical-align: super;

font-size: 90%;

line-height: 100%; 

} 



.clear {

  clear: both;

  display: block;

  overflow: hidden;

  visibility: hidden;

  width: 0;

  height: 0;

  margin: 0;

  padding: 0;

}



html {

  font-family: sans-serif;

  -ms-text-size-adjust: 100%;

  -webkit-text-size-adjust: 100%;

  line-height: 1;

  font-size: 62.5%;

}



body {

  font-size: 16px;

  font-size: 1.6rem;

  line-height: 140%;

  font-weight: 300;

  font-family: "Open Sans", sans-serif;

  text-align: justify;

  background: #ffffff;

}



/*-----------*/



a

{

color: #00a3b4;

}



a:hover

{

color: #000;

}



hr

{

border: none;

border-bottom: solid 1px #ccc;

}



a,

.transition

{

-moz-transition: all .3s ease-in-out;

-o-transition: all .3s ease-in-out;

-webkit-transition: all .3s ease-in-out;

transition: all .3s ease-in-out;

}



#header

{

position: relative;

color: #00a3b4;

background: #00a3b4;

height: 50px;

border-bottom: solid 10px #fff;

}



#header a

{

text-decoration: none;

}



.headerLogo

{

padding: 0;

position: absolute;

z-index: 20;

top: 0;

width: 150px;

max-width: 13%;

}



.headerLogo img.logo

{

	max-width: 100%;

	vertical-align: middle;

	margin: 0 0 0 40px;

	position: relative;

}



#miniMenu

{

display: none;

}



/* ------------------------------------ Bandeau right block --------------------------*/



#header .right-block

{

float: right;

padding: 0 10px;

}



#searchModuleForm

{

display: block;

width: 250px;

height: 25px;

padding: 6px 10px 4px 10px;

background: #fff;

font-size: 14px;

font-size: 1.6rem;

margin: 8px auto 0 auto;

border-radius: 6px;

float: right;

}



#searchModuleForm #searchModuleField

{

border: none;

background: transparent;

height: 14px;

padding: 4px;

margin: 0;

width: 210px;

}



#searchModuleForm #searchModuleField:focus

{

outline: none;

}



#searchModuleForm input[type=submit]

{

border: none;

height: 22px;

width: 28px;

background: transparent url(../charte/loupe.png) center center no-repeat;

float: right;

font-size: 0.1px;

font-size: 0;

}



#searchModuleForm label

{

position: absolute;

top: -500px;

}





.contenu .searchResult

{

color: #000;

text-decoration: none;

display: block;

padding: 10px;

}



.contenu .searchResult:hover

{

color: #000;

background: #eee;

}



.contenu .searchResult h3, .contenu .searchResult:hover h3

{

color: #00a3b4;

margin-top: 0;

padding: 0;

}



#reseauxSociaux

{

margin: 8px 20px 0 0;

position: relative;

display: table;

}



#reseauxSociaux span

{

padding: 0;

display: table-cell;

text-align: center;

}



#reseauxSociaux a

{

padding: 0;

text-align: center;

}



#reseauxSociaux img

{

background: #eee;

width: 35px;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

display: inline-block;margin: 0 5px;

}



#reseauxSociaux a:hover img

{

background: #ffd503;

}



/*----*/



#diaporama

{

	width: 100%;

	padding-top: 20%;

	background: url(../charte/bandeaux/bandeau.jpg?k2) no-repeat;

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

	position: relative;

}



/* ------------------------------------ ShortcutMenu --------------------------*/





#shortcutMenu

{

margin: 0;

padding: 0 0 0 15%;

position: absolute;

z-index: 10;

top: -30px;

left: 50%;

transform: translateX(-50%);

width: 1200px;

max-width: 100%;

text-align: left;

pointer-events: none;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  -o-box-sizing: border-box;

  -ms-box-sizing: border-box;

  box-sizing: border-box;

}



#shortcutMenu li

{

display: inline-block;

width: 100px;

height: 100px;

margin: 0 1.5% 0 1.5%;

padding: 0;

pointer-events: auto;

}



#shortcutMenu li a

{

display: block;

width: 100%;

height: 100%;

background-color: #ffd503;

background-repeat: no-repeat;

background-position: center bottom;

background-size:cover;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

overflow: hidden;

}



#shortcutMenu li a:hover

{

background-color: #f7941e;

background-position: center top;

}



#shortcutMenu li a span

{

position: absolute;

top: -500px;

}





#icoActus a

{

background-image: url(../charte/icones/actus.png);

}



#icoServices a

{

background-image: url(../charte/icones/services.png);

}



#icodemarches a

{

background-image: url(../charte/icones/demarches.png);

}



#icoLiens a

{

background-image: url(../charte/icones/liens.png);

}



#icoCovid a

{

background-image: url(../charte/icones/covid.png);

}



#icoSaisonEstivale a

{

background-image: url(../charte/icones/saison-estivale.png);

}



/* ------------------------------------ Menu --------------------------*/



#menu

{

text-align: center;

margin: 0;

background: #00a3b4;

position: sticky;

top: 0;

z-index: 100;

}



#menu ul 

{

margin: 0;

padding: 0;

display: inline-block;

list-style: none;

}



#menu ul.rootMenuUl

{

margin: 0;

padding: 0;

display: inline-block;

text-align: left;

position: relative;

z-index: 1;

color: #fff;

font-size: 17px;

font-size: 1.7rem;

}



#menu ul.rootMenuUl.hiddenBtn

{

	display: none;

}



#menu ul.rootMenuUl .rootMenuBtb

{

	text-transform: uppercase;

}



#menu ul.rootMenuUl .rootMenuBtb > span:before,

#menu ul.rootMenuUl .rootMenuBtb > a:before

{

  /*content: '\2714';*/

  content: '';

  position: absolute;

  top: -16px;

  left: 50%;

  margin-left: -12px;

  font-size: 16px;

  -moz-transition: all .5s ease-in-out;

  -o-transition: all .5s ease-in-out;

  -webkit-transition: all .5s ease-in-out;

  transition: all .3s ease-in-out;

  pointer-events: none;

  line-height: 1.3;

  width: 24px;

  height: 24px;

  border-radius: 50%;

  text-align: center;

  border: solid 2px #fff!important;

}



#menu ul.rootMenuUl .rootMenuBtb.sticked > span:before,

#menu ul.rootMenuUl .rootMenuBtb.sticked > a:before,

#menu ul.rootMenuUl .rootMenuBtb > span.opened:before,

#menu ul.rootMenuUl .rootMenuBtb > a.opened:before

{

  top: 2px;

  font-size: 0px;

  width: 0;

  height: 0;

  border-color: transparent!important;

  line-height: 0;

  margin-left: 0;

  opacity: 0;

}



#menu ul.rootMenuUl a,

#menu ul.rootMenuUl span

{

color: #fff;

display: block;

margin: 0;

padding: 15px;

cursor: pointer;

font-weight: bolder;

background: transparent url(../charte/fleche-menu.png) center 50px no-repeat;

height: 20px;

cursor: pointer;

text-decoration: none;

}



#menu ul.rootMenuUl span.opened

{

background-position: bottom center!important;

}



#menu ul.rootMenuUl:hover .rootMenuBtb

{

background-color: rgba(0, 0, 0, .2);

}





#menu ul.rootMenuUl li

{

display: block;

padding: 0;

}



#menu ul.subMenuUl

{

	display: block;

	padding: 0;

	overflow: hidden;

	color: #000;

	background: #fff;

	height: 0;

	text-transform: none;

}



#menu ul.subMenuUl a,

#menu ul.subMenuUl span

{

	color: #222;

	padding: 4px 7px 8px 7px;

	background: transparent;

	border: none;

	white-space: nowrap;

	font-size: 14px;

	font-size: 1.4rem;

	cursor: pointer;

}



#menu ul.subMenuUl li

{

	border-top: solid 1px rgba(255, 255, 255, .2);

	display: block;

	text-align: center;

}



#menu ul.subMenuUl.subMenuUl1

{

	display: block;

	position: absolute;

	top: 50px;

	left: 0;

}



#menu ul.subMenuUl.subMenuUl1 a,

#menu ul.subMenuUl.subMenuUl1 span

{

	background: rgba(255, 255, 255, .6);

}



#menu ul.subMenuUl1 li:first-child

{

	border-top: none;

}



#menu ul.subMenuUl2,

#menu ul.subMenuUl2 a,

#menu ul.subMenuUl2 span

{

	color: #555;

	background: rgba(255, 255, 255, .4);

	font-size: 14px;

	font-size: 1.4rem;

}



#menu ul.subMenuUl3,

#menu ul.subMenuUl3 a,

#menu ul.subMenuUl3 span

{

	background: rgba(255, 255, 255, .4);

	font-size: 14px;

	font-size: 1.4rem;

}



#menu ul.subMenuUl4,

#menu ul.subMenuUl4 a,

#menu ul.subMenuUl4 span

{

	background: rgba(255, 255, 255, .4);

	font-size: 13px;

font-size: 1.3rem;

}



#menu ul.subMenuUl5,

#menu ul.subMenuUl5 a,

#menu ul.subMenuUl5 span

{

	background: #fff;

	font-size: 12px;

	font-size: 1.2rem;

}



/*--------------------------------- COULEURS RUBRIQUE ---------------------------*/



body.rub2 #menu,

body.rub2 #colRubMenu.rubMenu li a:hover,

#menu ul.rootMenuUl2 .rootMenuBtb span:before,

#menu ul.rootMenuUl2 .rootMenuBtb a:before,

#menu .rootMenuUl2 ul.subMenuUl.subMenuUl1,

#menu .rootMenuUl2 li a:hover,

#menu .rootMenuUl2 li span:hover,

#menu ul.rootMenuUl2:hover .rootMenuBtb,

body.rub2 .rubActu .titre,

body.rub2 .rubMenu h2,

body.rub2 .pignose-calendar .pignose-calendar-top,

body.rub2 #newsletterRegisterForm input[type=submit]

{

background-color: #00a3b4;

border-color: #00a3b4;

color: #fff;

}

body.rub2 h1,

body.rub2 a,

body.rub2 .rubMenu .subMenuBtb,

body.rub2 #rightLeftCol .serviceRattache h4

{

	color: #00a3b4;

}



body.rub6 #menu,

body.rub6 #colRubMenu.rubMenu li a:hover,

#menu ul.rootMenuUl6 .rootMenuBtb span:before,

#menu ul.rootMenuUl6 .rootMenuBtb a:before,

#menu .rootMenuUl6 ul.subMenuUl.subMenuUl1,

#menu .rootMenuUl6 li a:hover,

#menu .rootMenuUl6 li span:hover,

#menu ul.rootMenuUl6:hover .rootMenuBtb,

body.rub6 .rubActu .titre,

body.rub6 .rubMenu h2,

body.rub6 .pignose-calendar .pignose-calendar-top,

body.rub6 #newsletterRegisterForm input[type=submit]

{

background-color: #ee2b4e;

border-color: #ee2b4e;

color: #fff;

}

body.rub6 h1,

body.rub6 a,

body.rub6 .rubMenu .subMenuBtb,

body.rub6 #rightLeftCol .serviceRattache h4

{

	color: #ee2b4e;

}



body.rub7 #menu,

body.rub7 #colRubMenu.rubMenu li a:hover,

#menu ul.rootMenuUl7 .rootMenuBtb span:before,

#menu ul.rootMenuUl7 .rootMenuBtb a:before,

#menu .rootMenuUl7 ul.subMenuUl.subMenuUl1,

#menu .rootMenuUl7 li a:hover,

#menu .rootMenuUl7 li span:hover,

#menu ul.rootMenuUl7:hover .rootMenuBtb,

body.rub7 .rubActu .titre,

body.rub7 .rubMenu h2,

body.rub7 .pignose-calendar .pignose-calendar-top,

body.rub7 #newsletterRegisterForm input[type=submit]

{

background-color: #f9a33f;

border-color: #f9a33f;

color: #fff;

}

body.rub7 h1,

body.rub7 a,

body.rub7 .rubMenu .subMenuBtb,

body.rub7 #rightLeftCol .serviceRattache h4

{

	color: #f9a33f;

}



body.rub13 #menu,

body.rub13 #colRubMenu.rubMenu li a:hover,

#menu ul.rootMenuUl13 .rootMenuBtb span:before,

#menu ul.rootMenuUl13 .rootMenuBtb a:before,

#menu .rootMenuUl13 ul.subMenuUl.subMenuUl1,

#menu .rootMenuUl13 li a:hover,

#menu .rootMenuUl13 li span:hover,

#menu ul.rootMenuUl13:hover .rootMenuBtb,

body.rub13 .rubActu .titre,

body.rub13 .rubMenu h2,

body.rub13 .pignose-calendar .pignose-calendar-top,

body.rub13 #newsletterRegisterForm input[type=submit]

{

background-color: #23408f;

border-color: #23408f;

color: #fff;

}

body.rub13 h1,

body.rub13 a,

body.rub13 .rubMenu .subMenuBtb,

body.rub13 #rightLeftCol .serviceRattache h4

{

	color: #23408f;

}



body.rub40 #menu,

body.rub40 #colRubMenu.rubMenu li a:hover,

#menu ul.rootMenuUl40 .rootMenuBtb span:before,

#menu ul.rootMenuUl40 .rootMenuBtb a:before,

#menu .rootMenuUl40 ul.subMenuUl.subMenuUl1,

#menu .rootMenuUl40 li a:hover,

#menu .rootMenuUl40 li span:hover,

#menu ul.rootMenuUl40:hover .rootMenuBtb,

body.rub40 .rubActu .titre,

body.rub40 .rubMenu h2,

body.rub40 .pignose-calendar .pignose-calendar-top,

body.rub40 #newsletterRegisterForm input[type=submit]

{

background-color: #8dc63f;

border-color: #8dc63f;

color: #fff;

}

body.rub40 h1,

body.rub40 a,

body.rub40 .rubMenu .subMenuBtb,

body.rub40 #rightLeftCol .serviceRattache h4

{

	color: #8dc63f;

}



body.rub73 #menu,

body.rub73 #colRubMenu.rubMenu li a:hover,

#menu ul.rootMenuUl73 .rootMenuBtb span:before,

#menu ul.rootMenuUl73 .rootMenuBtb a:before,

#menu .rootMenuUl73 ul.subMenuUl.subMenuUl1,

#menu .rootMenuUl73 li a:hover,

#menu .rootMenuUl73 li span:hover,

#menu ul.rootMenuUl73:hover .rootMenuBtb,

body.rub73 .rubActu .titre,

body.rub73 .rubMenu h2,

body.rub73 .pignose-calendar .pignose-calendar-top,

body.rub73 #newsletterRegisterForm input[type=submit]

{

background-color: #b03eba;

border-color: #b03eba;

color: #fff;

}

body.rub73 h1,

body.rub73 a,

body.rub73 .rubMenu .subMenuBtb,

body.rub73 #rightLeftCol .serviceRattache h4

{

	color: #b03eba;

}


body.rub85 #menu,

body.rub85 #colRubMenu.rubMenu li a:hover,

#menu ul.rootMenuUl85 .rootMenuBtb span:before,

#menu ul.rootMenuUl85 .rootMenuBtb a:before,

#menu .rootMenuUl85 ul.subMenuUl.subMenuUl1,

#menu .rootMenuUl85 li a:hover,

#menu .rootMenuUl85 li span:hover,

#menu ul.rootMenuUl85:hover .rootMenuBtb,

body.rub85 .rubActu .titre,

body.rub85 .rubMenu h2,

body.rub85 .pignose-calendar .pignose-calendar-top,

body.rub85 #newsletterRegisterForm input[type=submit]

{

background-color: #226D68;

border-color: #226D68;

color: #fff;

}

body.rub85 h1,

body.rub85 a,

body.rub85 .rubMenu .subMenuBtb,

body.rub85 #rightLeftCol .serviceRattache h4

{

	color: #226D68;

}



body #menu ul.rootMenuUl2 .rootMenuBtb > span.opened,

body.rub0 #menu ul.rootMenuUl2 .rootMenuBtb > span.opened,

body.rub2 #menu ul.rootMenuUl2 .rootMenuBtb > span.opened,

body.rub6 #menu ul.rootMenuUl6 .rootMenuBtb > span.opened,

body.rub7 #menu ul.rootMenuUl7 .rootMenuBtb > span.opened,

body.rub13 #menu ul.rootMenuUl13 .rootMenuBtb > span.opened,

body.rub40 #menu ul.rootMenuUl40 .rootMenuBtb > span.opened,

body.rub73 #menu ul.rootMenuUl73 .rootMenuBtb > span.opened

{

background-color: rgba(0, 0, 0, .2)!important;

}



body #diaporama

{

background-image: url(../charte/bandeaux/bandeau.jpg?m2);

}



body.rub2 #diaporama

{

background-image: url(../charte/bandeaux/bandeau2.jpg?2);

}



body.rub6 #diaporama

{

background-image: url(../charte/bandeaux/bandeau6.jpg);

}



body.rub7 #diaporama

{

background-image: url(../charte/bandeaux/bandeau7.jpg);

}



body.rub13 #diaporama

{

background-image: url(../charte/bandeaux/bandeau13.jpg);

}



body.rub40 #diaporama

{

background-image: url(../charte/bandeaux/bandeau40.jpg?f);

}



/* ------------------------------------ Main --------------------------*/



.main

{

margin: 0 auto;

width: 1200px;

max-width: 100%;

position: relative;

padding: 0;

background: #fff;

}



/*-------- rightLeftCol --------*/



#rightLeftCol

{

float: left;

width: 280px;

padding: 15px;float: left;

}



#rightLeftCol.isIndex

{

display: none;

}



#rightLeftCol hr

{

border-bottom: solid 1px #ccc;

margin: 20px 0;

}



#rightLeftCol a

{

text-decoration: none;

}



#rightLeftCol > a > img

{

margin: 0 0 15px 0;

}



#rightLeftCol > a:last-child > img

{

margin: 0;

}



/* ----------------- services ----------------*/ 



#rightLeftCol .serviceRattache

{

margin-top: -5px;

font-size: 13px;

font-size: 1.5rem;

text-align: left;

}



#rightLeftCol .serviceRattache h4

{

margin: 0;

padding: 0;

font-weight: bolder;

font-size: 23px;

font-size: 2.3rem;

text-align: center;

color: #00a3b4;

}



#rightLeftCol .serviceRattache p

{

margin: 10px 0;

padding: 0;

text-align: center;

}



#rightLeftCol .serviceRattache .horaires

{

display: inline-block;

text-align: left;

font-size: 13px;

padding-top: 10px;

line-height: 17px;

}



#rightLeftCol .serviceRattache .serviceFacebook

{

	display: block;

	color: #3b579d;

	text-align: center;

	font-weight: bolder;

	padding-top: 5px;

	margin-bottom: -5px;

}



#rightLeftCol .serviceRattache .serviceFacebook img

{

	vertical-align: middle;

	margin: -4px 7px 0 0;

}



/* ---------------- rubMenu -------------*/ 



.rubMenu

{

background: #bbb;

margin: 0 0 15px 0;

text-align: left;

list-style: none;

text-align: center;

}



.rubMenu > div

{

background: rgba(255, 255, 255, 0.4);

}





.rubMenu h2

{

margin: 0;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

font-weight: bolder;

padding: 10px 5px;

font-size: 18px;

font-size: 1.8rem;

color: #fff;

text-align: center;

}



.rubMenu ul, .rubMenu li

{

margin: 0;

padding: 0;

}



.rubMenu ul

{

list-style: none;

background: rgba(255, 255, 255, 0.4);

}



.rubMenu li.subMenuBtb

{

color: #000;

font-weight: bolder;

font-size: 17px;

font-size: 1.7rem;

padding: 8px 0 0 0;

/*background: #ddd;*/

}



.rubMenu ul.subMenuUl

{

	margin-top: 8px;

}



.rubMenu li a

{

color: #000;

font-weight: normal;

font-size: 14px;

font-size: 1.4rem;

display: block;

padding: 8px 5px;

}



.rubMenu li a:hover

{

color: #000;

}



.rubMenu li

{

border-top: solid 1px #fff;

}



#bottomRubMenu

{

display: none;

}



/* ----------- rubActu ----------*/ 



.rubActu .titre

{

	text-align: left;

	background: #00a3b4;

	color: #fff;

	padding: 10px 5px;

	display: block;

	font-weight: normal;

	white-space: nowrap;

	overflow: hidden;

	text-overflow: ellipsis;

}



.rubActu:hover .titre

{

	background: #333!important;

}



.rubActu .img

{

	overflow: hidden;

	margin: 0!important;

	display: block;

	width: 100%;

	position: relative;

}



.rubActu img

{

	margin: 0!important;

	display: block;

	width: 100%;

}



.rubActu:hover img

{

   -webkit-transform: scale(1.1,1.1);

   -moz-transform: scale(1.1,1.1);

   -o-transform: scale(1.1,1.1);

   -ms-transform: scale(1.1,1.1);

   transform: scale(1.1,1.1);

   -webkit-filter: grayscale(100%); /* Pour les navigateurs Chrome, Safari, Opera */

filter: grayscale(100%); /* Firefox */

}



.rubActu .img .imgCover

{

position: absolute;

width: 100%;

height: 100%;

background: #203365;

display: block;

opacity: 0;

z-index: 1;

}



.rubActu:hover .img .imgCover

{

opacity: 0.6;

}



.rubActu .img .savoirPlus

{

position: absolute;

z-index: 3;

padding: 0 15px;

border-left: solid 3px #fff;

color: #fff;

left: 50%;

top: 50%;

width: 100px;

margin-left: -50px;

margin-top: -20px;

font-weight: bold;

transform: translateY(40px);

opacity: 0;

}





.rubActu:hover .img .savoirPlus

{

transform: translateY(0);

opacity: 1;

}



.rubActu .resume

{

	text-align: left;

	background: #eee;

	color: #000;

	padding: 5px;

	margin: 0;

	display: block;

	font-weight: normal;

	white-space: nowrap;

	overflow: hidden;

	text-overflow: ellipsis;

}



.rubActu:hover .resume

{

	background: #ffd503;

}



.rubActu  .savoirPlus,

.rubActu  .imgCover,

.rubActu .titre,

.rubActu img,

.rubActu .resume

{

-moz-transition: all .3s ease-in-out;

-o-transition: all .3s ease-in-out;

-webkit-transition: all .3s ease-in-out;

transition: all .3s ease-in-out;

}



/* --------- newsLetterModule -------------*/





#newsletterRegisterForm

{

display: block;

margin: 0;

font-size: 16px;

font-size: 1.6rem;

padding: 30px 0 0 0;

text-align: left;

font-weight: bolder;

background: transparent url(../charte/newsletter-form.png) center 0 no-repeat;

}



#newsletterRegisterForm #emailForNewsletter

{

border: none;

background: #eee;

height: 14px;

padding: 8px;

margin: 10px 0 0 0;

width: 224px;

font-size: 14px;

font-size: 1.4rem;

}



#newsletterRegisterForm input[type=submit]

{

border: none;

height: 30px;

width: 40px;

background: #00a3b4;

float: right;

color: #fff;

margin: 10px 0 0 0;

cursor: pointer;

}



#newsletterRegisterForm input[type=submit]:hover

{

background: #333!important;

}



#newsletterRegisterForm label

{

position: absolute;

top: -1000px;

left: -1000px;

}



/* --------------------- Contenu ----------------*/



.contenu

{

	padding: 15px 15px 15px 330px;

	/*float: right;*/

	width: 100%;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  -o-box-sizing: border-box;

  -ms-box-sizing: border-box;

  box-sizing: border-box;

}



.contenu.isIndex

{

padding: 15px;

width: 100%;

float: none;

}



#ariane

{

font-size: 14px;

font-size: 1.4rem;

color: #666;

}



#ariane a

{

color: #000;

}



.contenu.isIndex h1,

.contenu.isIndex h2

{

padding: 5px 10px;

margin: 50px 0 0 0;

font-size: 40px;

font-size: 4rem;

color: #bbb;

/*background: #00a3b4;*/

border-top: solid 2px #eee;

border-left: solid 2px #eee;

}



.contenu h1, .contenu h2, .contenu h3, .contenu h4, .contenu h5

{

margin: 10px 0;

font-weight: bolder;

text-align: left;

}



.contenu h1

{

font-size: 35px;

font-size: 3.5rem;

color: #00a3b4;

line-height: 37px;

}



.contenu h2

{

font-size: 32px;

font-size: 3.2rem;

color: #aaa;

line-height: 34px;

}



.contenu h3

{

font-size: 18px;

font-size: 1.8rem;

color: #00a3b4;

}



.contenu h4

{

font-size: 16px;

font-size: 1.6rem;

}



.contenu a

{

color: #00a3b4;

text-decoration: underline;

}



.contenu img

{

max-width: 100%;

}



.contenu img[style] {

	max-width: 50%;

  /*float: none!important;*/

}



.contenu img.right {

	max-width: 50%;

	float: right;

	margin-left: 15px;

}



.contenu img.left {

	max-width: 50%;

	float: left;

	margin-right: 15px;

}



.contenu .lastModifDate

{

font-size: 13px;

font-size: 1.3rem;

text-align: right;

}



/*----- vidéos -----*/



.contenu .videoContainer

{

position:relative;

padding-bottom:56.25%;

padding-top:30px;

height:0;

overflow:hidden;

margin-bottom: 15px;

z-index: 0;

}





.contenu .videoContainer div,

.contenu .videoContainer iframe,

.contenu .videoContainer object,

.contenu .videoContainer embed,

.contenu .videoContainer video

{

width:100%!important;

height:100%!important;

position:absolute;

top:0;

left:0;

z-index: 0;

background: #000;

}



/*----- reseaux -----*/



#socialNetworkBar

{

clear: both;

padding: 15px 0 0 0;

}



#socialNetworkBar div

{

float: right;

margin: 0 0 0 10px;

}

/*

.ButtonBase__ButtonContainer-sc-6hgm97-3:after

{

	content: 'Afficher plus';

}



.ButtonBase__Inner-sc-6hgm97-4

{

	display: none;

}



.Text__Control-sc-6taaia-2,

.euzPai

{

	color: transparent;

}



.Text__Control-sc-6taaia-2:after,

.euzPai:after

{

	content: 'Afficher la suite';

	color: #000;

	position: absolute;

	left: 15px;

	bottom: -5px;

}



.dVKArQ + .Text__Control-sc-6taaia-2:after,

.dVKArQ + .euzPai:after

{

	content: 'Afficher la suite';

}

*/

/* ------------------------------------ Footer --------------------------*/



#footer #footerContent a

{

text-decoration: none;

color: #fff;

}



#footer #footerContent  a:hover

{

color: #ffd503;

}





#footer #footerContent

{

background:#333;

padding-bottom: 15px;

}





#footer #footerContent #footerAdresse

{

background:#00a3b4;

font-size: 14px;

font-size: 1.4rem;

color: #fff;

text-align: center;

margin: 0px 0;

padding: 15px 15px;

}



#footer #footerContent #footerMenu

{

width: 1200px;

max-width: 100%;

margin: 0 auto;

list-style: none;

}



#footer #footerContent #footerMenu li

{

display: inline;

margin: 0;

padding: 0;

}



#footer #footerContent #footerMenu li a

{

border-right: solid 1px #999;

padding: 2px 10px;

font-weight: bolder;

font-size: 14px;

font-size: 1.4rem;

display: inline-block;

}



#footer #footerContent #footerMenu li:first-child a

{

border-left: solid 1px #999;

margin-left: 15px;

}



#footer #footerContent #bottomFooter

{

width: 1200px;

max-width: 100%;

margin: 15px auto;

font-size: 13px;

font-size: 1.3rem;

}



#footer #footerContent #bottomFooter #signature

{

float: left;

margin-left: 15px;

}



#footer #footerContent #bottomFooter #mentions

{

float: right;

margin-right: 15px;

}



/* --------- table .table ---------------*/



table.table

{

width: 100%;

}



table.table tr td

{

border-collapse: collapse;

border: solid 1px #000;

padding: 3px;

text-align: center;

}



/*------ Liste .linksList ------*/





ul.linksList

{

	padding: 0;

	margin: 0;

	border-top: solid 1px #ddd;

}



ul.linksList li

{

	list-style: none;

	background: #f6f6f6 url(../charte/puce.png) no-repeat 5px 8px;

	border-bottom: solid 1px #ddd;

	/*padding: 10px 0 10px 40px;*/

	margin: 0;

	-moz-transition: all .3s ease-in-out;

	-o-transition: all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

	transition: all .3s ease-in-out;

}



ul.linksList li:hover

{

	background-color: #eee;

}



ul.linksList li > a

{

	display: block;

	padding: 12px 30px 12px 45px;

	color: #000;

	background: url(../charte/fleche-lien.png) no-repeat right 10px center;

	font-weight: bolder;

	text-decoration: none;

	text-align: left;

}



ul.linksList li > a:hover

{

	color: #00a3b4;

}



/* ------------------------------------ Accueil --------------------------*/



.contenu.isIndex h1,

.contenu.isIndex h2

{

padding: 20px 13px;

margin: 50px 0 0 0;

font-size: 40px;

font-size: 4rem;

color: #bbb;

border-top: solid 2px #eee;

border-left: solid 2px #eee;

}



#accueilActu

{

position:relative;

width: 100%;

margin: 0 0 0 0;

padding: 0;

}



#accueilActu .accueilActuBlock

{

width: 47%;

float: left;

margin: 10px 0;

border-bottom: solid 2px #ddd;

position:relative;

background: #fafafa;

}



#accueilActu #accueilActusDiaporama

{

width: 47%;

float: right;

margin: 10px 0;

position:relative;

}



#accueilActu #accueilActusDiaporama .accueilActuBlock

{

width: 100%;

margin: 0;

border-bottom: solid 2px #ddd;

position:relative;

}



#accueilActu .accueilActuBlock:hover

{

border-color: #00a3b4!important;

}



#accueilActu .accueilActuBlock a

{

	display: block;

	padding: 0 0 15px 0;

	text-decoration: none;

}



#accueilActu .imgContainer

{

overflow: hidden;

position: relative;

}



#accueilActu .accueilActuBlock

{

-moz-transition: border-bottom .3s ease-in-out;

-o-transition: border-bottom .3s ease-in-out;

-webkit-transition: border-bottom .3s ease-in-out;

transition: border-bottom .3s ease-in-out;

}



#accueilActu .accueilActuBlock .borderTop,

#accueilActu .accueilActuBlock .savoirPlus,

#accueilActu .imgContainer .imgCover,

#accueilActu .imgContainer img

{

-moz-transition: all .3s ease-in-out;

-o-transition: all .3s ease-in-out;

-webkit-transition: all .3s ease-in-out;

transition: all .3s ease-in-out;

}



#accueilActu .accueilActuBlock .borderTop

{

position: absolute;

top: 0;

height: 2px;

width: 0;

background: #00a3b4;

}



#accueilActu .accueilActuBlock:hover .borderTop

{

   width: 100%;

}



#accueilActu .imgContainer img

{

width: 100%;

display: block;

}





#accueilActu .accueilActuBlock:hover img

{

   -webkit-transform: scale(1.1,1.1);

   -moz-transform: scale(1.1,1.1);

   -o-transform: scale(1.1,1.1);

   -ms-transform: scale(1.1,1.1);

   transform: scale(1.1,1.1);

   -webkit-filter: grayscale(100%); /* Pour les navigateurs Chrome, Safari, Opera */

filter: grayscale(100%); /* Firefox */

}



#accueilActu .imgContainer .savoirPlus

{

position: absolute;

z-index: 3;

padding: 0 15px;

border-left: solid 3px #fff;

color: #fff;

left: 50%;

top: 50%;

width: 100px;

margin-left: -50px;

margin-top: -20px;

font-weight: bold;

transform: translateY(40px);

opacity: 0;

}





#accueilActu .accueilActuBlock:hover .savoirPlus

{

transform: translateY(0);

opacity: 1;

}



#accueilActu .imgContainer .imgCover

{

position: absolute;

width: 100%;

height: 100%;

background: #203365;

display: block;

opacity: 0;

z-index: 1;

}



#accueilActu .accueilActuBlock:hover .imgCover

{

opacity: 0.6;

}



#accueilActu .accueilActuBlock span.titre

{

	font-weight: bolder;

	margin:0;

	color:#203365;

	font-size:12px;

	padding: 15px 3% 15px 3%;

	font-size: 16px;

	font-size: 2rem;

	width:94%;

	white-space: nowrap;

	overflow: hidden;

	text-overflow: ellipsis;

	display: block;

	text-align: center;

}

#accueilActu .accueilActuBlock span.resume

{

	margin:0;

	color:#000;

	font-size: 14px;

	font-size: 1.4rem;

	padding:10px 2% 0 2%;

	width: 96%;

	height: 75px;

	display: block;

	overflow: hidden;

	--max-lines: 2;

	position: relative;

	max-height: 40px;

	max-height: calc(var(--lh) * var(--max-lines));

	overflow: hidden;

	padding-right: 1rem; /* espace pour ellipsis */

	--lh: 1.9rem;

	line-height: var(--lh);

}



#accueilActu .accueilActuBlock span.resume::before

{

position: absolute;

content: "...";

bottom: 0;

right: 0;

}



#accueilActu .accueilActuBlock span.resume::after

{

content: "";

position: absolute;

right: 0;

width: 1rem;

height: 1rem;

background: white;

}



/*------ agendaBlock ---*/



#agendaBlock

{

	display: table;

	width: 100%;

	/*margin-bottom: 50px;*/

	margin: 30px 0 0 0;

}



#agendaBlock > div

{

	width: 30%;

	vertical-align: middle;

	padding: 0 2%;

	display: table-cell;

}



#agendaBlock #accueilCalendar

{

	padding: 0;

}



#agendaBlock #accueilCalendar .calendar .pignose-calendar

{

	margin: 0;

}



#agendaBlock #accueilAgenda

{

	padding: 0 1%;

	

}



#agendaBlock #accueilAgenda .agendaTitleDiv

{

	padding: 0;

	background: #f5f5f5;

	margin: 2px 0;

	font-size: 14px;

	font-size: 1.4rem;

}



#agendaBlock #accueilAgenda .agendaTitleDiv a

{

	text-decoration: none;

	color: #000;

	display: block;

	padding: 10px;

	height: 60px;

}



#agendaBlock #accueilAgenda .agendaTitleDiv a:hover

{

	background: #ddd;

}





#agendaBlock #accueilAgenda .agendaTitleDiv h3

{

	color: #203365;

	white-space: nowrap;

	overflow: hidden;

	text-overflow: ellipsis;

	margin: 6px 0 3px 0;

	max-width: 270px;

}



#agendaBlock #accueilAgenda .agendaTitleDiv span

{

	white-space: nowrap;

	overflow: hidden;

	text-overflow: ellipsis;

	display: block;

}



#agendaBlock #accueilAgenda .agendaTitleDiv img

{

	float: left;

	margin: -10px 10px 0 -10px;

}



#agendaBlock #accueilAgendaRight

{

	padding: 0;

}



#agendaBlock #accueilAgendaRight a

{

	text-decoration: none;

}



.netillus-meteo

{

  text-align: center;

  width: 40%;

  line-height: 16px;

  float: left;

}



.netillus-meteo .jour p

{

  text-align: center;

  margin: 0;

  font-weight: 500;



}



.netillus-meteo .jour

{

  width: 100px;

  margin: 0 auto 7px auto;

  border-bottom: solid 1px #ddd;

}





.netillus-meteo .climacon_component-stroke

{

  fill: #00a3b4;

  stroke-width: 0%;

  stroke: black;

}



.netillus-meteo .climacon_component-fill

{

  fill: #00a3b4;

  stroke-width: 0%;

  stroke: black;

}



.netillus-meteo span

{

	display: block;

	margin: 0 0 7px 0;

}



.netillus-meteo a

{

  text-decoration: none;

  font-weight: bolder;

  font-size: 14px;

  color: #666;

}



.netillus-meteo a:hover

{

  color: #00a3b4;

}



.netillus-meteo svg

{

	width: 100%!important;

	height: auto!important;

}



#agendaBlock .appliDiv

{

	float: right;

	width: 60%;

	text-align: center;

	font-weight: bolder;

}



#agendaBlock .appliDiv img

{

	display: block;

	margin: 0 auto 10px auto;

}



/*---- C'est pratique ----*/



#pratiqueBlock

{

	display: table;

	width: 100%;

	/*margin-bottom: 50px;*/

	margin: 30px 0 0 0;

  font-size: 14px;

  font-size: 1.4rem;

}



#pratiqueBlock a

{

	text-decoration: none;

}



#pratiqueBlock h3

{

	font-size: 20px;

	font-size: 2.0rem;

	margin: 0 0 30px 0;

}



#pratiqueBlock > div

{

	width: 33%;

	vertical-align: top;

	padding: 0 2%;

	display: table-cell;

	/*border: solid 1px #f00;*/

}



#pratiqueBlock #pratiqueDemarches

{

	

}



#pratiqueBlock #pratiqueDemarches ul

{

	padding: 0;

	margin: 0;

	border-top: solid 1px #ddd;

}



#pratiqueBlock #pratiqueDemarches ul li

{

	list-style: none;

	background: #f6f6f6 url(../charte/puce.png) no-repeat 5px 8px;

	border-bottom: solid 1px #ddd;

	/*padding: 10px 0 10px 40px;*/

	margin: 0;

	-moz-transition: all .3s ease-in-out;

	-o-transition: all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

	transition: all .3s ease-in-out;

}



#pratiqueBlock #pratiqueDemarches ul li:hover

{

	background-color: #eee;

}



#pratiqueBlock #pratiqueDemarches ul li a

{

	display: block;

	padding: 12px 30px 12px 45px;

	color: #000;

	background: url(../charte/fleche-lien.png) no-repeat right 10px center;

	font-weight: bolder;

	text-align: left;

}



#pratiqueBlock #pratiqueDemarches ul li a:hover

{

	color: #00a3b4;

}



#pratiqueBlock #pratiqueLiens

{

	line-height: 130%;

	padding: 0;

}



#pratiqueBlock #pratiqueLiens .tr

{

	display: table;

	width: 100%;

	

}



#pratiqueBlock #pratiqueLiens .tr > div

{

	display: table-cell;

	width: 33%;

	text-align: center;

	padding: 0 3px 15px 3px;

}



#pratiqueBlock #pratiqueLiens .tr > div  a

{

	font-weight: bolder;

	color: #00a3b4;

	text-transform: uppercase;

	word-break: break-word;

}



#pratiqueBlock #pratiqueLiens .tr > div  a:hover

{

	color: #000;

}



#pratiqueBlock #pratiqueLiens .tr > div a  img

{

	border-radius: 50%;

	-moz-transition: all .3s ease-in-out;

	-o-transition: all .3s ease-in-out;

	-webkit-transition: all .3s ease-in-out;

	transition: all .3s ease-in-out;

	display: block;

	margin: 5px auto;

}



#pratiqueBlock #pratiqueLiens .tr > div a:hover img

{

	background: #ffd503;

}



#pratiqueBlock #pratiqueRight

{

	padding: 0;

	vertical-align: top;

	display: table-cell;width: 30%;

}



#pratiqueBlock #pratiqueRight .pratiqueRightTable

{

	vertical-align: top;

	display: table;

	padding: 0;

	width: 100%;

}



#pratiqueBlock #pratiqueRight .pratiqueRightCell

{

	vertical-align: top;

	display: table-cell;

	padding: 0 10px;

	text-align: center;

}



#pratiqueBlock #pratiqueRight .pratiqueRightCell:first-child

{

	width: 60%!important;

}



#pratiqueBlock #pratiqueRight .pratiqueRightCell:last-child

{

	width: 40%!important;

}



#pratiqueBlock #pratiqueRight h4

{

	margin: 0 0 40px 0;

	font-size: 20px;

	font-size: 2.0rem;

	text-align: center;

	color: #00a3b4;

}



#pratiqueBlock #pratiqueRight a

{

	display: inline-block;

	margin: 0 auto;

}



#pratiqueBlock #pratiqueRight img

{

	margin: 0 auto;

	display: block;

	max-height: 250px;

}



/*--------- parallaxImg-----*/



#parallaxImg

{

width: 100%;

padding: 0;

margin: 50px 0 0 0;

position: relative;

height: 500px;

text-align: left;

background: transparent url(../charte/villeneuve.jpg) center center no-repeat;

background-size: cover;

background-attachment: fixed;

}



/*---- accueilSocialBlock ----*/



#accueilSocialBlock

{

	width: 100%;

	margin: 30px 0 50px 0;

	/*border-top: solid 2px #ddd;

	padding-top: 50px;*/

}



#accueilSocialBlock #fbBlock

{

	width: 500px;

	max-width: 49%;

	float: left;

	height: 500px;

}



#accueilSocialBlock #twitterBlock

{

	width: 500px;

	max-width: 49%;

	height: 500px;

	overflow-y: scroll;

	float: right;

}



/* ------------------------------------ Actu --------------------------*/ 



.contenu .actuBlock

{

width: 48%;

margin: 0 1% 20px 1%;

float: left;

border-bottom: solid 1px #c6b8b2;

padding-bottom: 5px;

}



.contenu .actuBlock .imgContainer

{

overflow: hidden;

position: relative;

}





.contenu .actuBlock a

{

text-decoration: none;

}



.contenu .actuBlock img

{

width: 100%;

height: auto;

}



.contenu .actuBlock h2

{

font-size: 19px;

font-size: 1.9rem;

margin: 0;

padding: 0;

color: #000;

font-weight: normal;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

width: 100%;

}



.contenu .actuBlock:hover h2

{



}



.contenu .actuBlock:hover img

{

   -webkit-transform: scale(1.1,1.1);

   -moz-transform: scale(1.1,1.1);

   -o-transform: scale(1.1,1.1);

   -ms-transform: scale(1.1,1.1);

   transform: scale(1.1,1.1);

   -webkit-filter: grayscale(100%); /* Pour les navigateurs Chrome, Safari, Opera */

filter: grayscale(100%); /* Firefox */

}



.contenu .actuBlock .savoirPlus

{

position: absolute;

z-index: 3;

padding: 0 15px;

border-left: solid 3px #fff;

color: #fff;

left: 50%;

top: 50%;

width: 100px;

margin-left: -50px;

margin-top: -20px;

font-weight: bold;

transform: translateY(40px);

opacity: 0;

}





.contenu .actuBlock:hover .savoirPlus

{

transform: translateY(0);

opacity: 1;

}



.contenu .actuBlock .imgCover

{

position: absolute;

width: 100%;

height: 100%;

background: #203365;

display: block;

opacity: 0;

z-index: 1;

}



.contenu .actuBlock:hover .imgCover

{

opacity: 0.6;

}



.contenu .actuBlock .savoirPlus,

.contenu .actuBlock .imgCover,

.contenu .actuBlock img

{

-moz-transition: all .3s ease-in-out;

-o-transition: all .3s ease-in-out;

-webkit-transition: all .3s ease-in-out;

transition: all .3s ease-in-out;

}



/* ------------------------------------ Services --------------------------*/



.servicesListDiv .serviceDiv

{

height: 0;

overflow: hidden;

background: #eee;

padding: 0 15px;

}



.servicesListDiv .serviceDiv .serviceMapSpan

{

display: block;

text-align: right;

}



.servicesListDiv .serviceMap

{

position:relative;

padding-bottom:56.25%;

padding-top:0px;

height:0;



overflow:hidden;

margin-bottom: 0px;

z-index: 0;

}





.servicesListDiv .serviceMap iframe,

.servicesListDiv .serviceMap object,

.servicesListDiv .serviceMap embed



{

width:100%;



height:100%;

position:absolute;

top:0;



left:0;

z-index: 0;

}



/* ------------------------------------ UL accordeon --------------------------*/



.accordeonUl .accordeonDiv

{

height: 0;

overflow: hidden;

background: #eee;

padding: 0 15px;

}



/*--------------------------------- Contact ---------------------------------*/



#mailForm

{

margin: 40px 0 0 0;

padding: 0;

}



#mailForm #inputTextDiv

{

width: 47%;

margin: 0 1%;

float: left;

text-align: right;

}



#mailForm #inputTextDiv input[type=text]

{

width: 220px;

display: inline-block;

margin: 0 0 5px 0;

border: solid 1px #ccc;

}



#mailForm #inputTextDiv label

{

display: inline-block;

}



#mailForm #messageArea

{

width: 47%;

margin: 0 1% 0px 1%;

height: 170px;

border: solid 1px #ccc;

}



#mailForm #messageArea_label

{

display: none;

}



#mailForm input[type=submit]

{

width: 80px;

margin: 15px auto 0 auto;

display: block;



}



#mailForm #champsObl

{

font-size: 12px;

font-size: 1.2rem;

font-style: italic;

clear: both;

padding-top: 20px;

}



.erreur

{

color: #cc0000;

text-align: center;

font-weight: bolder;

}



/*-- captcha --*/



.captchaDiv

{

	display: table;

	margin: 10px auto;

	text-align: center;

	border-top: solid 1px #00a3b4;

	border-bottom: solid 1px #00a3b4;

}



.captchaDiv b

{

	display: inline-block;

	margin-top: 10px;

	font-style: italic;

}



.captchaDiv input[type=text]

{

	margin-bottom: 10px!important;

}



#captchaInput

{ 

width: 2.5em; 

margin: 0 20px 0 5px;

} 



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



.calendarInAgenda

{

display: none;

}

.calendarInAgenda .icon-arrow-left span,

.calendarInAgenda .icon-arrow-right span,

.calendar .icon-arrow-left span,

.calendar .icon-arrow-right span

{

	color: transparent;

}



/* ------ AssosSearchModule ------*/







#assokeywordsearch input[type=text]

{

border: none;

background: transparent;

height: 14px;

padding: 4px;

margin: 0;

width: 180px;

border: solid 1px #ccc;

color: #666;

}



#assokeywordsearch input[type=submit]

{

border: none;

height: 22px;

width: 28px;

background: transparent url(../charte/loupe.png) center center no-repeat;

}



.requieredForForm

{

	height: 0!important;

	overflow: hidden;

	padding: 0;

	visibility: hidden;

	display: none;

}

/* ------------------------ MUR RESEAUX ---------------------- */



/*CardLayout__Container-sc-1degoda-6 CardContainer-sc-pr3shd-0 jHWZvE dSHFAl*/



.CardLayout__Container-sc-1degoda-6

{

	background: #f6f6f6!important;

}



/*############################### < 1300 ####################################*/



@media screen and (min-width: 1px) and (max-width: 1300px)

{



#shortcutMenu

{

padding: 0 0 0 18%;

}



#shortcutMenu li

{

position: relative;

width: 8%;

height: 0;

padding-top: 8%;

}



#shortcutMenu li a

{

position: absolute;

top: 0%;

}

	

}



/*############################### < 1020 ####################################*/



@media screen and (min-width: 1px) and (max-width: 1020px)

{

	

#header

{

	position: fixed;

	width: 100%;

	z-index: 10;

	top: 0;

	/*box-shadow: 0 0 8px rgba(60, 60, 59, .4);*/

}



#miniMenu

{

position: fixed;

display: block;

border: none;

color: #000;

top: 3px;

right: 0;

z-index: 50;

}



#miniMenu ul

{

display: inline-block;

width: auto;

margin: 0;

padding: 0;

}



#miniMenu li

{

width: auto;

display: inline-block;

float: left;

margin: 0;

text-align: center;

cursor: pointer;

padding: 0 8px;

font-weight: bolder;

}



#miniMenu .miniMenuBtn

{

display: inline-block;

width: auto;

margin: 0 auto;

text-align: center;

padding-top: 10px;

overflow: hidden;

}



#miniMenu .miniMenuBtn span span

{

position: absolute;

top: -500px;

}



#miniMenu .menuPicto

{

display: inline-block;

position: relative;

width: 25px;

height: 25px;

margin-right: 6px;

}



#miniMenu .menuPicto.menuPictoMenu

{

background: transparent url("../charte/menu-btn.png") 0 0 no-repeat;

}



#miniMenu .menuPicto.menuPictoSearch

{

display: inline-block;

background: transparent url("../charte/search-btn.png") 0 0 no-repeat;

}



#miniMenu .miniBtn

{

display: inline-block;

position: relative;

float: right;

text-transform: uppercase;

font-size: 12px;

padding-top: 3px;

color: #000;

}



/*--*/



#reseauxSociaux

{

margin: 8px 80px 0 0;

}



#searchModuleForm

{

position: absolute;

bottom: 0;

left: 0;

width: 100%;

border: none;

height: 0;

overflow: hidden;

-moz-transition: all .3s ease-in-out;

-o-transition: all .3s ease-in-out;

-webkit-transition: all .3s ease-in-out;

transition: height .3s ease-in-out, bottom .3s ease-in-out;

background: #eee;

border-radius: 0;

padding: 0 0 0 20%;

z-index: 20;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  -o-box-sizing: border-box;

  -ms-box-sizing: border-box;

  box-sizing: border-box;

}



#searchModuleForm.opened

{

height:42px;

bottom: -42px;

padding-bottom: 2px 0;

}



#searchModuleForm #searchModuleField

{

width: 85%;

height: 22px;

font-size: 14px;

font-size: 1.4rem;

margin-top: 5px;

}



#searchModuleForm.opened #searchModuleField

{



}



#searchModuleForm input[type=submit]

{

width: 10%;

height: 30px;

float: right;

margin-top: 5px;

}



#diaporama

{

	clear: both;

	position: relative;

	top: 16px;

	margin-top: 45px;

}



#shortcutMenu

{

top: 10px;

z-index: 2;

padding: 0;

text-align: center;

}



/*------ menu --------*/



body #menu

{

	background-color: #00a3b4!important;

}



#menu {

position: fixed !important;

left: -100%;

top: 0;

width: 100%;

height: 100%;

display: block;

margin: 0 !important;

padding: 100px 10px 0  10px !important;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

-o-box-sizing: border-box;

-ms-box-sizing: border-box;

box-sizing: border-box;

z-index: 100;

overflow: auto!important;

}



#menu ul.rootMenuUl .rootMenuBtb > span:before,

#menu ul.rootMenuUl .rootMenuBtb > a:before

{

  content: '';

  display: none;

}



#menu .rootMenuUl a:hover,

#menu .rootMenuUl span:hover

{

background-color: rgba(255, 255, 255, .5)!important;

}



#menu .rootMenuBtb > span.opened,

#menu .rootMenuBtb > a:hover,

#menu .rootMenuBtb > span:hover

{

background-color: rgba(0, 0, 0, .2)!important;

}



#menu ul.rootMenuUl:hover .rootMenuBtb

{

background-color: transparent!important;

background: none!important;

}



#menu ul.hiddenBtn

{

display: block!important;

}



#menu ul, #menu li

{

padding: 0;

margin: 0;

display: block;

width: 100%;

text-align: center;

position: relative;

}







#menu .rootMenuBtb a,

#menu .rootMenuBtb span

{

border: none!important;

border-bottom: solid 1px #fff!important;

background-image: none!important;

}



#menu #menuDiv ul.rootMenuUl:first-child

{

border-top: solid 1px #fff!important;

}





#menu ul.rootMenuUl

{

display: block;

}



#menu ul.subMenuUl a,

#menu ul.subMenuUl span

{

	white-space: nowrap;

	overflow: hidden;

	text-overflow: ellipsis;

}



#menu .rootMenuUl ul.subMenuUl.subMenuUl1

{

background-color: #00a3b4!important;

}



#menu ul.subMenuUl.subMenuUl1

{

	display: block;

	position: relative;

	top: 0;

	left: 0;

	padding: 0;

	/*margin: -5px 0 0 0;*/

}



#menu ul.subMenuUl.subMenuUl1.opened

{

	/*margin: 0 0 -5px 0;*/

}



#menu ul.subMenuUl.subMenuUl1 a,

#menu ul.subMenuUl.subMenuUl1 span

{

	padding: 12px 5px;

	margin-bottom: -1px;

}



#menu ul.subMenuUl.subMenuUl1 a:hover,

#menu ul.subMenuUl.subMenuUl1 span:hover

{

color: #000;

}



#rightLeftCol

{

display: none;

}



#bottomRubMenu

{

display: block;

margin-bottom: 0;

}



#bottomRubMenu div

{

-webkit-columns: 3;

-moz-columns: 3;

columns: 3;

-webkit-column-gap: 0;

-moz-column-gap: 0;

column-gap: 1px;

-webkit-column-rule: 1px solid #ccc;

-moz-column-rule: 1px solid #ccc;

column-rule: 1px solid #ccc;

width: 100%;



}



#bottomRubMenu a

{

text-decoration: none;

}



.contenu

{

padding: 15px!important;

width: auto;

float: none;

}



#accueilActu .accueilActuBlock

{

width: 100%;

float: none;

}



#accueilActu #accueilActusDiaporama

{

width: 100%;

float: none;

}



#agendaBlock

{

	display: block;

}



#agendaBlock #accueilCalendar

{

	float: left;

	width: 48%;

}



#agendaBlock #accueilAgenda

{

	float: right;

	width: 50%;

	padding: 0;

}



#agendaBlock #accueilAgenda .agendaTitleDiv h3

{

	max-width: none;

}



#agendaBlock #accueilAgendaRight

{

	display: inline-block;

	margin: 40px auto 0 auto;

	width: 100%;

}



#agendaBlock #accueilAgendaRight img

{

	display: block;

	margin: 0 auto;

}



#pratiqueBlock

{

	display: block;

}



#pratiqueBlock #pratiqueDemarches

{

	float: left;

	width: 48%;

	padding: 0;

}



#pratiqueBlock #pratiqueLiens

{

	float: right;

	width: 50%;

	padding: 0;

}



#pratiqueBlock #pratiqueRight

{

	display: inline-block;

	margin: 40px auto 0 auto;

	width: 100%;

	clear: both;

}



#mailForm #inputTextDiv input[type=text]

{

width: 60%;

}



.calendarInAgenda

{

display: block;

}



#parallaxImg

{

height: 200px;

}



}



/*################################ < 767 ###################################*/



@media screen and (min-width: 1px) and (max-width: 767px)

{



.contenu img.right,

.contenu img.left,

.contenu img[style]

{

	float: none!important;

	display: block;

	margin: 15px auto!important;

	max-width: 100%;

}



#searchModuleForm

{

padding: 0 0 0 22%;

}



#bottomRubMenu div

{

-webkit-columns: 2;

-moz-columns: 2;

columns: 2;

}



#agendaBlock #accueilCalendar

{

	display: block;

	float: none;

	width: 100%;

	margin-bottom: 50px;

}



#agendaBlock #accueilAgenda

{

	display: block;

	float: none;

	width: 100%;

}



#agendaBlock #accueilCalendar .calendar .pignose-calendar

{

	margin: auto;

}



#pratiqueBlock #pratiqueDemarches

{

	display: block;

	float: none;

	width: 100%;

}



#pratiqueBlock #pratiqueLiens

{

	display: block;

	float: none;

	width: 100%;

	max-width: 500px;

	margin: 40px auto;

}



#pratiqueBlock #pratiqueLiens h3

{

	text-align: center;

}



#accueilSocialBlock #fbBlock

{

	width: 500px;

	max-width: 80%;

	float: none;

	margin: 0 auto 50px auto;

}



#accueilSocialBlock #twitterBlock

{

	width: 500px;

	max-width: 80%;

	float: none;

	margin: 0 auto;

}



#mailForm #inputTextDiv

{

width: 100%;

margin: 0;

float: none;

text-align: left;

}



#mailForm #inputTextDiv input[type=text]

{

width: 98%;

margin: 0 0 5px 0;

padding: 3px 1%;

}



#mailForm #messageArea

{

width: 98%;

margin: 0;

float: none;

height: 150px;

padding: 1%;

}



#mailForm #messageArea_label

{

display: block;

}



#parallaxImg

{

display: none;

background: transparent;

}



}



/*################################ < 600 ###################################*/



@media screen and (min-width: 1px) and (max-width: 600px)

{



/*

#reseauxSociaux

{

margin: 0;

position: absolute;

bottom: -25px;

right: 10px;

z-index: 15;

}*/



#shortcutMenu

{

display: none;

}



.contenu .actuBlock

{

width: 100%;

}



}



/*################################ < 470 ###################################*/



@media screen and (min-width: 1px) and (max-width: 470px)

{

/*	

#reseauxSociaux

{

bottom: -35px;

}*/



#searchModuleForm

{

padding: 0 0 0 25%;

}



#bottomRubMenu div

{

-webkit-columns: 1;

-moz-columns: 1;

columns: 1;

}







}

	





    /* Styles pour la Lightbox */
    #lightbox {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7); /* Fond sombre semi-transparent */
        z-index: 1000; /* S'assurer que la lightbox est au-dessus des autres éléments */
        display: none; /* Masquer par défaut */
    }
    .lightbox-content h1 {
        text-align: center;
        color: #333 !important;
        font-size: 24px;
        margin-bottom: 20px;
		font-weight: bold;
    }

    .lightbox-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Centrer la lightbox */
        background: white;
        padding: 20px;
        border-radius: 10px;
        width: 95%; /* Adaptable à la largeur */
        max-width: 95%; /* Largeur maximale */
        max-height: 90%; /* Hauteur maximale */
        overflow-y: auto; /* Défilement vertical si le contenu dépasse */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Ombre */
    }

   /* Styles pour la affichage legal */
	.containerFlex {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		max-width: 1200px;
		margin: auto;
	}
	.card {
		background: white;
		text-align: left;
		border-radius: 10px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		margin: 15px;
		padding: 20px;
		width: 300px;
		transition: transform 0.3s;
	}
	.card:hover {
		transform: scale(1.05);
	}
	.file-link {
		text-decoration: none;
		color: #0056b3;
		font-size: 18px;
		font-weight: bold;
	}
	.file-link:hover {
		text-decoration: underline;
	}
	.file-info {
		font-size: 14px;
		color: #666;
	}
	.no-documents {
		text-align: center;
		font-size: 20px;
		color: #999;
	}