/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
	margin: 0;
	padding: 0;
	background: #FFFFFF url(images/img04.gif) repeat-x;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #7F7772;
}

h1, h2, h3 {
	margin-top: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #666666;
}

h1 {
	font-size: 197%;
}

h2 {
	font-size: 136%;
}

h3 {
	font-size: 100%;
	font-weight: bold;
}

p, ul, ol {
	margin-bottom: 1.6em;
	line-height: 180%;
}

p {
}

blockquote {
	font-style: italic;
}

ul {
}

ol {
}

a {
	color: #FFBF23;
}

a:hover {
	text-decoration: none;
}

small {
}

hr {
	display: none;
}

img {
	border: 1px solid #B2B2B2;
}

img.left {
	float: left;
	margin: 0 15px 0 0;
}

img.right {
	float: right;
	margin: 0 0 0 15px;
}

/* header */

#header {
	width: 770px;
	height: 100px;
	margin: 0 auto;
	color: #D6D6D6;
}

/* Logo */

#logo {
	float: left;
	width: 240px;
	height: 100px;
	background: #FFBF23 url(images/img01.gif) no-repeat left bottom;
}

#logo h1, #logo h2 {
	margin: 0;
	text-transform: lowercase;
	text-align: center;
}

#logo h1 {
	padding-top: 15px;
	font-size: 36px;
}

#logo h2 {
	font-size: 12px;
}

#logo a {
	text-decoration: none;
	color: #FFFFFF;
}

/* Search */

#search {
	
	width: 533px;
	padding-top: 0px;
	padding-left: 250px;

}

#search form {
	margin: 0;
	padding: 0;
}

#search fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

#search legend {
	display: none;
}

#searchinput, #searchsubmit {
	border: 1px solid #EDEBD5;
	font: bold 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #7F7772;
}

#searchinput {
	padding: 2px 5px;
	width: 198px;
	background: #FFFFFF url(images/img02.gif) repeat-x;
}

#searchsubmit {
	background: #FFFFFF url(images/img03.gif) repeat-x left bottom;
}

/* Menu */

#menu {
	width: 770px;
	height: 70px;
	margin: -30px auto 0 auto;
}

#menu ul {
	float: right;
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	float: left;
	display: block;
	height: 40px;
}

#menu li:hover {
	background: #F9F8F1;
}

#menu a {
	display: block;
	width: 60px;
	height: 35px;
	padding: 5px 20px 0 20px;
	text-align: center;
	text-decoration: none;
	text-transform: lowercase;
	font-weight: bold;
	color: #7F7772;
}

html>body #menu a {
	width: auto;
}

#menu li.active {
	background: #EDEBD5 url(images/img05.gif) no-repeat;
}

#menu li.active a {
	background:  url(images/img06.gif) no-repeat right top;
}

/* Page */

#page {
	width: 770px;
	margin: 0 auto 20px auto;
	background:  url(images/img07.gif) repeat-y 260px 0;
}

/* Content */

#content {
	float: right;
	width: 490px;
}

.title {
	padding-bottom: 5px;
	border-bottom: 1px solid #EDEBD5;
}

.twocols {
}

.twocols .col1 {
	float: left;
	width: 235px;
}

.twocols .col2 {
	float: right;
	width: 235px;
}

.list {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

.list li {
	padding-left: 10px;
	background:  url(images/img10.gif) no-repeat left center;
}

/* Sidebar */

#sidebar {
	float: left;
	width: 240px;
}

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar li {
	padding: 20px;
	background:  url(images/img11.gif) no-repeat;
}

#sidebar li ul {
}

#sidebar li li {
	padding: 5px 0;
	background:  url(images/img12.gif) repeat-x left bottom;
}

#sidebar h2 {
	border-bottom: 1px solid #EDEBD5;
	font-size: 114%;
	font-weight: bold;
}

#sidebar h3 {
	margin: 0;
}

#sidebar p {
	margin: 0;
	line-height: normal;
}

#sidebar a {
	text-decoration: none;
}

#sidebar a:hover {
	text-decoration: underline;
}

/* Footer */

#footer {
	clear: both;
	height: 100px;
	padding-top: 20px;
	background: #EDEBD5 url(images/img08.gif) repeat-x;
}

#footer p {
	margin: 0;
	text-align: center;
	font-size: 77%;
}

/** rajouté par moi **/

.alignleft, img.alignleft {
display: inline;
float: left;
margin-right: 10px;
}

.alignright, img.alignright {
display: inline;
float: right;
margin-left: 10px;
}

.aligncenter, img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignleft, img.alignright, img.aligncenter {
margin-bottom: 12px;
}



/* ==================================================================
   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 */
#content {
	float: none;
	width: auto;
	margin-left: 0;
	margin-right: 0;
}

/* les conteneurs gardent leur largeur, sans la subir */
#content {
	width: auto;
	max-width: 770px;
}
#page {
	width: auto;
	max-width: 770px;
}

/* le pied ajoute aux pages qui n'en avaient pas */
.pied-ajoute {
	width: auto;
	max-width: 770px;
	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: 770px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Le pied avait une hauteur fixe, prevue pour une seule ligne de
   mention legale : les colonnes en debordaient, et leur texte clair
   se retrouvait sur le blanc de la page. */
#footer {
	height: auto;
	min-height: 100px;
}

/* 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. */
#header {
	max-width: 100%;
}
#menu {
	max-width: 100%;
}
#search {
	max-width: 100%;
}


/* ==================================================================
   TAILLE DU TEXTE

   Le corps de texte etait a 13 px : trop petit pour une lecture
   confortable, et en dessous des 16 px attendus sur telephone.
   On le remonte a 16 px. Les elements d'en-tete et de menu,
   dimensionnes en em et souvent places dans des blocs a hauteur
   fixe, sont figes a leur taille actuelle pour ne pas bouger.
   ================================================================== */

body { font-size: 16px; line-height: 1.6; }
body, th, td, input, textarea, select { font-size: 16px; }
p, li, dd, blockquote { font-size: inherit; }
img, iframe, video, table { max-width: 100%; }
img { height: auto; }


/* ==================================================================
   TAILLE DU TEXTE DU PIED DE PAGE, 25/09/2026

   Le pied etait reduit par un pourcentage herite par tout son
   contenu, ce qui le faisait tomber sous le seuil de lisibilite,
   en particulier sur telephone. Il repasse a la taille du corps
   de texte, les liens compris.
   ================================================================== */

#footer {
	font-size: 100%;
}

#footer p,
#footer li,
#footer a,
#footer div,
#footer span,
#footer td,
.footer,
.footer p,
.footer li,
.footer a,
.footer-column,
.footer-column p,
.footer-column li,
.footer-column a,
.pied-3col,
.pied-col,
.pied-ajoute,
.pied-ajoute p,
.pied-ajoute a,
.announce,
.announce p {
	font-size: 16px;
	line-height: 1.55;
}

#footer h2,
#footer h3,
#footer h4,
.footer-column h2,
.footer-column h3,
.footer-column h4 {
	font-size: 18px;
}