/***************************************** personnalisation *******************************/
body {background-color:#f9f9f9; font-size:90%}
a {color:#663399; text-decoration:none; }

#tete {float:left; width:100%; background:#eceef3 url(images/tete-1.gif) repeat-y right top}
#logo {margin:12px 12px 0 12px}
#zone-titre h3 {margin-top:36px; margin-left:16px; font-size:1.5em; line-height:115%; color:#888; font-family:"Trebuchet MS", Verdana, Arial, sans-serif}

/** Grille de base **/
#maitre {background-color:#fff; background:#fff url(images/col-d-1.gif) repeat-y right top; border-right:2px solid #ccc ;border-left:2px solid #ccc}
#droite .int {padding-left:0; padding-right:0;} 
#pied {border:none; background-color:#d1e2d0; padding:6px 0 }
#pied .int {}
#pied p {margin:0 12px; font-size:0.8em; text-align:center; color:#999}

/** menu vertical **/
#menu-vertical {padding:0; margin:0; background:#5aa456}
#menu-vertical h2 {position:absolute; top:-5000px; text-indent:-5000px; background:none; margin:0; padding:0; font-size:1px; color:#fff}
#menu-vertical a {
	color:#fff;
	text-transform:uppercase;
	font-size:1em;
	display:block; 
	height:120%;
	background: #83b680 url(images/fleche-se.gif) no-repeat 6px 8px ; 
	padding-left:20px;
	border:none;
}
#menu-vertical a:hover {text-decoration:underline}
#menu-vertical a.actif, #menu-vertical a:hover.actif {text-decoration:underline}

#menu-vertical ul {margin:0; padding:0; }
#menu-vertical li {margin:0; padding:0; border-bottom:1px solid #fff}


/** bloc recherche **/
#recherche {margin:0; padding:12px 0; background:url(images/recherche-1.gif) no-repeat }
#recherche form {border:none; }

/* style contenu **/
#contenu h4 {color:#003366; font-size:1.2em; }
#contenu img {margin:0 24px}
p.encart {padding:12px; background:#f8f8f8; border-top:4px solid #6c96c6}

.list-liens li {list-style-image: url(images/fleche-se-1.gif);}
.list-liens a:hover {text-decoration:underline;}

/** annonce colonne droite **/
.annonce {margin:0; margin-bottom:8px; background: url(images/annonce-1.gif) no-repeat}
.annonce h5 {font-size:1em; margin:0; padding:8px; text-align:center; color:#6579AA;}
.annonce p {padding:4px 6px; margin:0; text-align:center}
.annonce img {border:1px solid #ccc; padding:4px; background:#fff}
.annonce a:hover {text-decoration:underline}

/** annonces **/
.banniere-top {background:#f9f9f9; width:760px; margin:0 auto; padding:10px 0; border-bottom:2px solid #ccc}



/* ==================================================================
   PIED DE PAGE SUR TROIS COLONNES

   Ce site portait une ou plusieurs barres laterales a largeur fixe :
   sur telephone, elles poussaient le contenu hors de l'ecran. Leur
   contenu est desormais dans le pied de page, reparti sur trois
   colonnes qui se replient l'une sous l'autre quand la place manque.
   ================================================================== */

*, *::before, *::after { box-sizing: border-box; }
img, iframe, video, table { max-width: 100%; }
img { height: auto; }

.pied-3col {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0 28px;
	clear: both;
}
.pied-col {
	flex: 1 1 240px;
	min-width: 0;
}
.pied-col > *:first-child { margin-top: 0; }

/* la colonne de contenu reprend toute la largeur */
#gauche {
	float: none;
	width: auto;
	margin-left: 0;
	margin-right: 0;
}

/* les conteneurs gardent leur largeur, sans la subir */
#gauche {
	width: auto;
	max-width: 760px;
}
#maitre {
	width: auto;
	max-width: 760px;
}

/* le pied ajoute aux pages qui n'en avaient pas */
.pied-ajoute {
	width: auto;
	max-width: 760px;
	margin: 24px auto 0 auto;
	padding: 18px 10px;
	clear: both;
}

@media screen and (max-width: 760px) {
	.pied-col { flex: 1 1 100%; }
}

/* Les colonnes suivent le cadre du site.
   Posees dans le pied, elles en prenaient toute la largeur, jusqu'au
   bord de la fenetre, tandis que le reste de la page tient dans un
   cadre centre. On leur donne ce meme cadre. */
.pied-3col {
	width: 760px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Le texte respire sur les cotes.
   La barre laterale partie, la colonne prend toute la
   largeur : sans marge a elle, son texte bute contre le
   cadre. Elle n'avait ici que 0 px. */
#gauche {
	padding-left: 28px;
	padding-right: 28px;
}

/* Les blocs restes larges de force.
   La passe responsive n'avait desserre que les conteneurs
   menant au texte. Ceux-ci gardaient leur largeur fixe, et
   un seul suffit a faire deborder la page sur telephone. */
.banniere-top {
	max-width: 100%;
}
.pub-large {
	max-width: 100%;
}


/* ------------------------------------------------------------------
   corps de texte lisible

   Le gabarit posait un corps de 90%, trop petit pour une lecture sur
   telephone, ou 16 px est la valeur attendue. Le texte courant est
   remonte a 16 px avec un interligne de 1,55.

   Les titres, les menus et les pieds de page ne sont pas touches : ils
   sont dimensionnes en pourcentage dans des blocs a hauteur fixe, les
   agrandir deplacerait la mise en page.
   ------------------------------------------------------------------ */

p, li, dd, dt, blockquote, label {
	font-size: 16px;
	line-height: 1.55;
}

nav p, nav li, .menu p, .menu li, #menu p, #menu li, #mnu p, #mnu li,
.nav p, .nav li, #nav p, #nav li, .navigation p, .navigation li,
#navigation p, #navigation li, .header p, .header li, #header p,
#header li, #hdr p, #hdr li, .footer p, .footer li, #footer p,
#footer li, #ftr p, #ftr li, .breadcrumb p, .breadcrumb li {
	font-size: inherit;
	line-height: inherit;
}