/*** Global Settings ****/
body {font : normal 14px/1.6em 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;}
h1 { color : #7a2e40;margin: 0px 0px 10px 0px;padding-bottom : 10px;font : normal 17px Georgia, serif;border-bottom : 1px solid #efece7;}
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 : 10px;}

/*** 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 : 45px;}
.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;}

/** 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;
}

/* ======================================================================
   Responsive 2026 : contenu pleine largeur, colonne de droite (menu)
   deplacee en bas de page, repartie en 3 colonnes facon pied de page.
   ====================================================================== */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

#wrapper { width: auto; max-width: 920px; margin: 0 auto; }
#header { margin: 0; }
#bg { background-size: cover; }
#nav { padding: 10px 18px; }

/* Le contenu principal occupe toute la largeur */
#main-content { display: flex; flex-direction: column; margin: 0; }
#left-column { order: 1; width: auto; float: none; padding: 20px 26px 26px; }

/* La colonne de droite passe sous le contenu, en bande 3 colonnes */
#right-column {
	order: 2; width: auto; float: none;
	background: #f7f7f7; border-top: 3px solid #7a2e40;
	padding: 22px 26px; margin-top: 12px;
	columns: 3; column-gap: 30px;
}
#right-column > * { break-inside: avoid; -webkit-column-break-inside: avoid; }
#right-column #main-image { column-span: all; text-align: center; margin: 0 0 16px; }
#right-column .sidebar {
	width: auto; margin: 0; padding: 0; background: none;
}
#right-column .sidebar h3 { 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; }

/* Adaptation aux ecrans plus etroits */
@media (max-width: 780px){
	#right-column { columns: 2; }
	#left-column { padding: 16px 16px 20px; }
}
@media (max-width: 480px){
	#right-column { columns: 1; }
	#nav { text-align: center; }
}



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

   Le pied de page ne portait qu'une ligne de copyright. Il accueille
   desormais trois colonnes de liens internes, ramenees a une seule
   colonne sous 700 px.
   ------------------------------------------------------------------ */
#footer .footer-cols {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0 30px;
	text-align: left;
}
#footer .footer-col {
	flex: 1 1 200px;
	min-width: 0;
	box-sizing: border-box;
}
#footer .footer-title {
	margin: 0 0 6px;
	font-weight: bold;
}
#footer .footer-col ul {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}
#footer .footer-col li { margin: 0 0 4px; }
#footer .footer-legal {
	clear: both;
	margin: 10px 0 0;
	padding-top: 8px;
	border-top: 1px solid #f0e9eb;
	font-size: 11px;
}

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


/* 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;
}