/*** Global Settings ****/
body {font : normal 14px/1.8em Arial, Helvetica, sans-serif;color : #2a3845;margin : 0;padding : 0;background:#FFFFFF;}
p { margin : 0;padding : 0;}
a:visited, a:link {color : #a43b55;text-decoration : underline;background:none;}
a:hover {color : #a43b55;text-decoration : none;background:none;}
a.ex1 {color : #ffffff;text-decoration : none;}
h1 {
	color : #000102;
	margin: 0px 0px 10px 0px;
	padding-bottom : 10px;
	font : normal 17px Georgia, serif;
}
h2 {color : #7a2e40;margin : 20px 0 10px;padding-bottom : 10px;font : normal 17px Georgia, serif;border-bottom : 1px solid #efece7;}
h3 {color : #7a2e40;margin : 10px 0;padding-bottom : 10px;font : bold 14px Arial, Helvetica, sans-serif;border-bottom : 1px solid #efece7;}
ul {padding:0;margin:0 0 0 17px;list-style: square url(images/bullet.gif);}
.box {background : #f7f7f7;border : 1px solid #f0e9eb;padding : 2px;}

/*** Layout ****/
#wrapper {margin : 0 auto;width : 776px;border-left : 1px solid #f0e9eb;border-right : 1px solid #f0e9eb;}
#header {margin : 0 1px;}
#bg {height : 36px;background : url(images/bg.gif) repeat-x;}
#nav {background : #7a2e40;padding : 10px 20px;text-align : right;color : #f6dde3;}
#nav a:visited, #nav a:link {text-decoration : none;color : #f6dde3;}
#nav a:hover {text-decoration : underline;color : #f6dde3;}
#main-content {margin : 0 auto;}
#logo {margin-bottom : 15px;}
.logotxt1 {font : normal 18px Georgia, serif;color : #fa7393;margin : 10px 0 0 15px;}
.logotxt2 {font : normal 18px Georgia, serif;color : #7a2e40; }
#left-column {width : 440px;padding : 0 30px 30px;float : left;}
#right-column {width : 270px;float : right;}
.crd a:visited, .crd a:link, .crd a:hover{text-decoration : none;color : #2a3845;cursor: text;}
#footer {background : #f7f7f7;border-top : 1px solid #f0e9eb;padding : 10px 15px;clear : both;}

/*** SideBAR ***/
#main-image {text-align : center;}
.sidebar {width : 218px;margin : 0 auto;padding : 10px 25px;background : url(images/shadow.jpg) no-repeat top;}


/* ===== RESPONSIVE-2026 START : contenu pleine largeur, colonne de droite (menu) en pied sur 3 colonnes ===== */
*,*::before,*::after{box-sizing:border-box;}
img{max-width:100%;height:auto;}
#wrapper{width:auto !important;max-width:920px;margin:0 auto;}
#header{margin:0;}
#bg{background-size:cover;}
#nav{padding:10px 18px;}
#main-content{display:flex;flex-direction:column;margin:0;}
#left-column{order:1;width:auto !important;float:none !important;padding:20px 26px 26px;}
#right-column{order:2;width:auto !important;float:none !important;background:#f4f4f4;border-top:3px solid #666;
  padding:22px 26px;margin-top:12px;-webkit-columns:3;-moz-columns:3;columns:3;column-gap:30px;}
#right-column>*{break-inside:avoid;-webkit-column-break-inside:avoid;}
#right-column #main-image{-webkit-column-span:all;column-span:all;text-align:center;margin:0 0 16px;}
#right-column .sidebar{width:auto !important;margin:0;padding:0;background:none !important;}
#right-column .sidebar h3{-webkit-column-span:all;column-span:all;margin:0 0 8px;text-align:left;}
#right-column p[align="center"]{text-align:left;margin:5px 0;}
#right-column .sidebar p img{display:inline-block;}
#right-column .box{margin-top:12px;text-align:center;}
@media (max-width:780px){#right-column{-webkit-columns:2;-moz-columns:2;columns:2;} #left-column{padding:16px 16px 20px;}}
@media (max-width:480px){#right-column{-webkit-columns:1;-moz-columns:1;columns:1;} #nav{text-align:center;}}
/* ===== RESPONSIVE-2026 END ===== */


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

/* les conteneurs gardent leur largeur, sans la subir.
   #left-column ne porte plus de max-width : la colonne de droite etant
   passee en pied de page, le texte prend toute la largeur du cadre. */
#left-column {
	width: auto;
	max-width: none;
}
#wrapper {
	width: auto;
	max-width: 920px;
}

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


/* les paragraphes ne sont plus colles.
   Le gabarit pose « p { margin: 0 } », ce qui convient a ses blocs
   d'accroche mais colle les paragraphes des pages de texte. On rend la
   marge basse, sauf dans l'en-tete, le menu et le pied, ou les
   paragraphes servent d'etiquettes. */
p {
	margin-bottom: 1.05em;
}
header p,
footer p,
nav p,
.header p,
.footer p,
.navbar p,
.menu p,
.header-menu p,
.footer-menu p,
.copyright p,
.breadcrumb p,
.card-body > p:last-child,
li > p:last-child {
	margin-bottom: 0;
}


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

   Le corps de texte etait a 14 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; }