/* elements */

body { margin: 0 0 20px 0; text-align: center; background: #F8F8F8 }
body, td, input, select, textarea { font: normal small/1.2 "Trebuchet MS", Helvetica, Arial, sans-serif; letter-spacing: 1px }
img { display: block; border: none }
h1 { font-size: 160% }
h2 { font-size: 140% }
hr { color: #DDD; background: #DDD; height: 1px; margin: 0 }
p { margin: 10px 0 }
a { text-decoration: none; color: #2468A2; font-weight: normal }
a:hover { color: #F86A1C }


/* Id's */

#hdr, #mnu, #bdy, #ftr, #ftr_img { width: 962px; margin: auto; text-align: left; background: #FFF }

#hdr { background-image: url(front.jpg); height: 160px }
#mnu { background: #FFF url("images/bkg_mnu.gif") no-repeat bottom center; min-height: 41px  }
#bdy { margin-top: 15px; background: #FFF url("images/bkg_bdy.gif") no-repeat top center }
#ftr { background: #FFF url("images/bkg_ftr.gif") no-repeat top center; min-height: 45px }
#lft { float: left; width: 717px }
#rgt { float: right; width:180px; color: #333; font-size: 85% }


/* classes */

.inr { padding: 15px }
.clr { clear: both }
.w1 { float: left; width: 351px }
.w2 { float: left; width: 229px }
.w3 { float: left; width: 717px }
.imgfr { float: right; margin: 0 0 5px 5px }
.imgfl { float: left; margin: 0 5px 5px 0 }
.spcr { width: 15px; float: left }
.more { display: block; text-align: right; margin-top: 5px }
.pad { padding: 2px; border: 1px solid #CCC }


/* pseudos */

h1 span, h2 span { color: #2468A2; display: block }

#ftr .inr { padding-bottom: 6px }
#ftr p { margin: 3px 0 }
#hdr h1 { color: #FFF; margin: 0; padding: 10px; font-size: 280% }
#lft hr { margin: 10px 0 15px 0 }
#nws b { color: #F86A1C }

ul.menu, ul.menu li { list-style: none; margin: 0; padding: 0 }
ul.menu { position: relative; float: left }
ul.menu li { float: left; line-height: 1.3em; vertical-align: middle }
ul.menu li a { display: block; padding: 10px; text-decoration: none; color: #000; font-weight: bold }
ul.menu li a:hover { color: #2468A2 }



#atn { text-align: center; margin: 20px 0 }




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


/** 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;
}
/* 
Generic Styling, for Desktops/Laptops 
*/
table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #ddd; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

/* Responsive + colonne droite en footer 3 colonnes */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-size: 16px;
  line-height: 1.6;
}

#wrapper,
#header,
#menu,
#page,
#footer,
#content,
#container,
#wrap,
#main,
#outer,
#inner,
#back,
#top,
#bottom,
#hdr,
#mnu,
#bdy,
#ftr {
  width: calc(100% - 40px) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#header,
#hdr {
  height: auto !important;
  min-height: 105px !important;
  background-size: cover !important;
}

#logo {
  float: none !important;
  height: auto !important;
}

#logo h1 {
  float: none !important;
  line-height: 1.1 !important;
}

#menu,
#mnu {
  height: auto !important;
  min-height: 0 !important;
  background-size: 100% 100% !important;
}

#menu ul,
#mnu ul,
ul.menu {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  float: none !important;
}

#menu li,
#mnu li,
ul.menu li {
  float: none !important;
  height: auto !important;
}

#menu a,
#mnu a,
ul.menu li a {
  display: block !important;
  height: auto !important;
}

#sidebar,
#right,
#rgt,
#secondarycontent,
aside {
  display: none !important;
}

#content,
#primarycontent,
#left,
#lft,
#content2,
.article,
.post,
main,
article {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  clear: both !important;
}

.w1,
.w2,
.w3,
.s-12,
.m-12,
.l-4,
.l-6,
.l-8,
.col,
.column,
.col-left,
.col-right {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

.spcr {
  display: none !important;
}

.post .title,
.article .title {
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.25 !important;
}

img,
iframe,
object,
embed,
video {
  max-width: 100% !important;
}

img,
video {
  height: auto !important;
}

iframe {
  width: 100% !important;
}

p,
li {
  line-height: 1.65 !important;
}

h1,
h2,
h3 {
  line-height: 1.25 !important;
}

/* Footer 3 colonnes équilibrées */
#footer,
#ftr {
  clear: both !important;
  height: auto !important;
  min-height: 0 !important;
  text-align: left !important;
}

#footer .footer-right-menu,
#ftr .footer-right-menu {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: start !important;
  width: 100% !important;
  margin: 0 0 18px 0 !important;
}

#footer .footer-right-col,
#ftr .footer-right-col {
  min-width: 0 !important;
  padding: 14px !important;
}

#footer .footer-right-col p,
#footer .footer-right-col li,
#ftr .footer-right-col p,
#ftr .footer-right-col li {
  margin: 0 0 8px 0 !important;
  line-height: 1.45 !important;
}

#footer .footer-right-col img,
#ftr .footer-right-col img {
  max-width: 100% !important;
  height: auto !important;
}

#footer .footer-right-col a,
#ftr .footer-right-col a {
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  body {
    font-size: 17px !important;
    line-height: 1.65 !important;
  }

  #wrapper,
  #header,
  #menu,
  #page,
  #footer,
  #content,
  #container,
  #wrap,
  #main,
  #outer,
  #inner,
  #back,
  #top,
  #bottom,
  #hdr,
  #mnu,
  #bdy,
  #ftr {
    width: 100% !important;
    max-width: 100% !important;
  }

  #menu ul,
  #mnu ul,
  ul.menu {
    display: block !important;
  }

  #menu a,
  #mnu a,
  ul.menu li a {
    width: 100% !important;
  }

  #footer .footer-right-menu,
  #ftr .footer-right-menu {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}


/* suppression du cadre décoratif (images de fond calées sur 962px) */
#mnu, #bdy, #ftr { background-image: none !important; }
#bdy { margin-top: 20px !important; }
.inr { padding: 24px 28px !important; }
#ftr .inr { padding-top: 14px !important; padding-bottom: 14px !important; }
#lft, #rgt { padding: 0 !important; }


/* ------------------------------------------------------------------
   UN SEUL H1 PAR PAGE

   Le nom du site, dans le bandeau, etait balise en h1 et se repetait
   sur toutes les pages. Il est devenu un paragraphe : la regle qui
   portait sur le h1 du logo est reprise ici a l'identique.
   ------------------------------------------------------------------ */
p#logo,
p.logo-titre {
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}