* {font-family:"Trebuchet MS", verdana, arial, helvetica, sans-serif}
body {margin:0; padding:0; text-align:center; background-color:#fff }

/***************************************** les blocs *******************************/

#maitre {width:760px; margin:0 auto; text-align:left;}

#tete {clear:both;}
#logo {float:left; margin:12px}
#zone-titre {float:left; width:350px; margin-top:12px}

#contenu {clear:both;}
#contenu .int {padding:6px; text-align:center}
#contenu .bloc {margin-bottom:12px}
#gauche {float:left; width:280px}
#milieu {float:left; width:280px}
#droite {float:right; width:190px; text-align:center }

#pied {clear:both; border-top:1px solid #ccc; padding-top:6px; text-align:center}


/** le menu vertical **/
#menu-vertical ul, #menu-vertical li {margin:0; padding:0; text-align:left; list-style-type:none} 
#menu-vertical li {margin:0 0 3px 0}
#menu-vertical a {display:block; padding:4px; text-decoration:none; border-bottom:1px solid #ccc}

/** recherche google **/
#recherche {float:right; width:190px}
#recherche {text-align:center; margin-top:6px}
#recherche a {display:block;}
#recherche form {margin:0 6px; padding-bottom:6px; }
#recherche input.champ {width:80%; font-size:0.8em; margin:0 auto 6px auto; display:block;}
#recherche input.bouton {padding:0 12px}

/** blocs pub **/
.adscences-250 {float:right; background:#fff; margin-left:10px }
.adscences-250 .int {border:1px solid #ccc; width:260px; margin-bottom:10px;}
.pub-large {text-align:center; width:760px; text-align:center; padding:6px 0}
.pub-large img {margin-top:6px}
.pub-large script {margin-top:6px}
.banniere-top {width:760px; margin:0 auto; padding:10px 0; text-align:center}

.ebay .int {width:160px; margin:auto; border:1px solid #ccc; background:#fff}

/***************************************** styles textes de bases *******************************/
img {border:none}

h1, h2, h3, h4 {font-family:Georgia, "Times New Roman", Times, serif}
h1, h2, h3, h4, p {text-align:left; margin:0 0 6px 0;}
ul {text-align:left; margin-top:0}

p {margin:0 0 6px 0;}

ul {}

.img-gauche {float:left; margin:6px 12px 6px 0}
.img-droite {float:right; margin:6px 0 6px 12px}

.txt-centre {text-align:center}
.txt-droit {text-align:right}
.txt-gauche {text-align:left}

.clear {clear:both}



/* ==================================================================
   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;
}
.pied-col {
	flex: 1 1 240px;
	min-width: 0;
}
.pied-col > *:first-child { margin-top: 0; }

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

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

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

/* 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. */
#gauche {
	max-width: 100%;
}
#maitre {
	max-width: 100%;
}
.banniere-top {
	max-width: 100%;
}
.pub-large {
	max-width: 100%;
}