@media (max-width: 640px) {

 /* passer tous les éléments de largeur fixe en largeur automatique */
 body, element1, element2 {
   width: auto;
   margin: 0;
   padding: 0;
 }

 /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
 img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
   max-width: 100%;
 }
/* conserver le ratio des images et empêcher les débordements de boîtes dûs aux border ou padding */
 img {
   height: auto; width: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }

 /* gestion des mots longs */
 textarea, table, td, th, code, pre, samp {
   word-wrap: break-word; /* passage à la ligne forcé */
   -webkit-hyphens: auto; /* césure propre */
   -moz-hyphens: auto;
   hyphens: auto;
 }
 code, pre, samp {
   white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
 }

 /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
 element1, element2 {
   float: none;
   width: auto;
 }

 /* masquer les éléments superflus */
 .hide_mobile {
   display: none !important;
 }

 /* Un message personnalisé */
 body:before {
   content: "Version mobile du site";
   display: block;
   color: #777;
   text-align: center;
   font-style: italic;
 }
}

@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
  }
}

:link
{
    TEXT-DECORATION: none
}
:visited
{
    TEXT-DECORATION: none
}
H1
{
    FONT-WEIGHT: 400;
    FONT-SIZE: 1em
}
H2
{
    FONT-WEIGHT: 400;
    FONT-SIZE: 1em
}
H3
{
    FONT-WEIGHT: 400;
    FONT-SIZE: 1em
}
H4
{
    FONT-WEIGHT: 400;
    FONT-SIZE: 1em
}
H5
{
    FONT-WEIGHT: 400;
    FONT-SIZE: 1em
}
H6
{
    FONT-WEIGHT: 400;
    FONT-SIZE: 1em
}
PRE
{
    FONT-WEIGHT: 400;
    FONT-SIZE: 1em
}
CODE
{
    FONT-WEIGHT: 400;
    FONT-SIZE: 1em
}
UL
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
OL
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
LI
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
H1
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
H2
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
H3
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
H4
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
H5
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
H6
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
PRE
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
FORM
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
BODY
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
HTML
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
P
{
    TEXT-ALIGN: justify;
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
BLOCKQUOTE
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
FIELDSET
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
INPUT
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
A IMG
{
    BORDER-RIGHT: medium none;
    BORDER-TOP: medium none;
    BORDER-LEFT: medium none;
    BORDER-BOTTOM: medium none
}
:link IMG
{
    BORDER-RIGHT: medium none;
    BORDER-TOP: medium none;
    BORDER-LEFT: medium none;
    BORDER-BOTTOM: medium none
}
:visited IMG
{
    BORDER-RIGHT: medium none;
    BORDER-TOP: medium none;
    BORDER-LEFT: medium none;
    BORDER-BOTTOM: medium none
}
.clear
{
    CLEAR: both
}
BODY
{
    FONT-SIZE: 14px;
    BACKGROUND: url(../images/headerbg.png) #ffffff repeat-x left top;
    COLOR: #222;
    FONT-FAMILY: arial, "lucida Grande", verdana, helvetica, sans-serif;
    TEXT-ALIGN: center
}
BODY, .wrapper
{
    MARGIN-LEFT: auto;
    WIDTH: 950px;
    MARGIN-RIGHT: auto
}
#header
{
    POSITION: relative;
    HEIGHT: 200px;
    TEXT-ALIGN: left
}
#header .logo
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 45px;
    LEFT: 0px;
    COLOR: #fff;
    FONT-FAMILY: arial;
    POSITION: absolute;
    TOP: 28px
}
#header .tagline
{
    FONT-SIZE: 18px;
    LEFT: 0px;
    COLOR: #ccc;
    FONT-FAMILY: georgia;
    POSITION: absolute;
    TOP: 78px
}
#header #nav
{
    BORDER-TOP: #2f5677;
    FONT-SIZE: 13px;
    BACKGROUND: #132430;
    LEFT: 0px;
    TEXT-TRANSFORM: uppercase;
    COLOR: #fff;
    LIST-STYLE-TYPE: none;
    POSITION: absolute;
    TOP: 130px
}
#header #nav LI
{
    BORDER-RIGHT: #1e3a4e 1px solid;
    FLOAT: left
}
#header #nav LI:first-child
{
    BORDER-LEFT: #1e3a4e 1px solid
}
#header #nav LI A
{
    PADDING-RIGHT: 20px;
    PADDING-LEFT: 20px;
    PADDING-BOTTOM: 13px;
    COLOR: #fff;
    LINE-HEIGHT: 40px;
    PADDING-TOP: 13px
}
#header #nav LI.current A
{
    BACKGROUND: url(../images/navbg.png) repeat-x left top
}
#header #nav LI A:hover
{
    BACKGROUND: url(../images/navbg.png) repeat-x left top
}
#bodycontent
{
    FLOAT: left;
    WIDTH: 580px;
    TEXT-ALIGN: left
}
#bodycontent .post
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 25px;
    PADDING-TOP: 0px
}
#bodycontent .post H1
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    FONT-SIZE: 30px;
    PADDING-BOTTOM: 15px;
    MARGIN: 0px 0px 15px;
    COLOR: #000;
    LINE-HEIGHT: 36px;
    PADDING-TOP: 0px;
    BORDER-BOTTOM: #ccc 1px dotted;
    FONT-FAMILY: georgia
}
#bodycontent .post P
{
    MARGIN: 0px 0px 18px;
    LINE-HEIGHT: 20px
}
#bodycontent .post UL
{
    MARGIN: 0px 0px 18px 25px;
    LINE-HEIGHT: 20px
}
#bodycontent .post OL
{
    MARGIN: 0px 0px 18px 25px;
    LINE-HEIGHT: 20px
}
#bodycontent .post UL UL
{
    MARGIN: 0px 0px 0px 25px
}
#bodycontent .post OL UL
{
    MARGIN: 0px 0px 0px 25px
}
#bodycontent .post UL OL
{
    MARGIN: 0px 0px 0px 25px
}
#bodycontent .post OL OL
{
    MARGIN: 0px 0px 0px 25px
}
#bodycontent .post BLOCKQUOTE
{
    FONT-SIZE: 13px;
    MARGIN: 0px 0px 18px 30px;
    COLOR: #666;
    LINE-HEIGHT: 19px;
    FONT-STYLE: italic
}
#bodycontent .post CODE
{
    BORDER-RIGHT: #eee 1px solid;
    PADDING-RIGHT: 2px;
    BORDER-TOP: #eee 1px solid;
    PADDING-LEFT: 2px;
    FONT-SIZE: 11px;
    BACKGROUND: #fafafa;
    PADDING-BOTTOM: 2px;
    BORDER-LEFT: #eee 1px solid;
    COLOR: #666;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #eee 1px solid
}
#bodycontent .post PRE CODE
{
    BORDER-RIGHT: #eee 1px solid;
    PADDING-RIGHT: 8px;
    BORDER-TOP: #eee 1px solid;
    DISPLAY: block;
    PADDING-LEFT: 8px;
    FONT-SIZE: 11px;
    BACKGROUND: #fafafa;
    MARGIN-BOTTOM: 18px;
    PADDING-BOTTOM: 8px;
    BORDER-LEFT: #eee 1px solid;
    COLOR: #666;
    PADDING-TOP: 8px;
    BORDER-BOTTOM: #eee 1px solid
}
#bodycontent .post H2
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    FONT-WEIGHT: bold;
    FONT-SIZE: 18px;
    PADDING-BOTTOM: 8px;
    PADDING-TOP: 8px
}
#bodycontent .post H3
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    FONT-WEIGHT: bold;
    FONT-SIZE: 16px;
    PADDING-BOTTOM: 8px;
    PADDING-TOP: 8px
}
#bodycontent .post H4
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    FONT-WEIGHT: bold;
    FONT-SIZE: 14px;
    PADDING-BOTTOM: 8px;
    PADDING-TOP: 8px
}
#bodycontent .post A:link
{
    COLOR: #009865;
    TEXT-DECORATION: none
}
#bodycontent .post A:visited
{
    COLOR: #009865;
    TEXT-DECORATION: none
}
#bodycontent .post A:hover
{
    COLOR: #009865;
    TEXT-DECORATION: underline
}
#bodycontent .post .meta
{
    BORDER-RIGHT: #ccc 1px dotted;
    PADDING-RIGHT: 8px;
    BORDER-TOP: #ccc 1px dotted;
    MARGIN-TOP: 20px;
    PADDING-LEFT: 8px;
    FONT-SIZE: 12px;
    BACKGROUND: #f9f9f9;
    PADDING-BOTTOM: 8px;
    BORDER-LEFT: #ccc 1px dotted;
    COLOR: #555;
    LINE-HEIGHT: 18px;
    PADDING-TOP: 8px;
    BORDER-BOTTOM: #ccc 1px dotted
}
#sidebar
{
    FONT-SIZE: 13px;
    FLOAT: right;
    WIDTH: 320px;
    TEXT-ALIGN: left
}
#sidebar .featured
{
    PADDING-RIGHT: 20px;
    PADDING-LEFT: 20px;
    BACKGROUND: url(../images/aboutbg.png) #000 repeat-x left top;
    PADDING-BOTTOM: 20px;
    MARGIN: 0px 0px 30px;
    COLOR: #eee;
    LINE-HEIGHT: 20px;
    PADDING-TOP: 20px;
    FONT-FAMILY: arial
}
#sidebar .featured H2
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    FONT-SIZE: 24px;
    PADDING-BOTTOM: 15px;
    MARGIN: 0px 0px 20px;
    COLOR: #fff;
    LINE-HEIGHT: 24px;
    PADDING-TOP: 0px;
    BORDER-BOTTOM: #213f54 1px dotted;
    FONT-FAMILY: georgia
}
#sidebar .featured P
{
    MARGIN: 0px 0px 17px
}
#sidebar A:link
{
    COLOR: #009865;
    TEXT-DECORATION: none
}
#sidebar A:visited
{
    COLOR: #009865;
    TEXT-DECORATION: none
}
#sidebar A:hover
{
    COLOR: #009865;
    TEXT-DECORATION: underline
}
#sidebar .featured A:link
{
    COLOR: #009865;
    TEXT-DECORATION: none
}
#sidebar .featured A:visited
{
    COLOR: #009865;
    TEXT-DECORATION: none
}
#sidebar .featured A:hover
{
    COLOR: #009865;
    TEXT-DECORATION: underline
}
#sidebar UL
{
    MARGIN: 0px 0px 18px 30px
}
#sidebar OL
{
    MARGIN: 0px 0px 18px 30px
}
.legal
{
    FONT-SIZE: 12px;
	PADDING-TOP: 20px;
    COLOR: #8080A0;
}
#footer
{
    PADDING-RIGHT: 0px;
    BORDER-TOP: #ccc 1px solid;
    PADDING-LEFT: 0px;
    FONT-SIZE: 12px;
    PADDING-BOTTOM: 20px;
    COLOR: #666;
    LINE-HEIGHT: 18px;
    PADDING-TOP: 10px;
    TEXT-ALIGN: left
}
#footer P.left-footer
{
    FLOAT: left;
    WIDTH: 450px;
    TEXT-ALIGN: left
}
#footer P.right-footer
{
    FLOAT: right;
    WIDTH: 450px;
    TEXT-ALIGN: right
}
#footer A:link
{
    COLOR: #009865;
    TEXT-DECORATION: underline
}
#footer A:visited
{
    COLOR: #009865;
    TEXT-DECORATION: underline
}
#footer A:hover
{
    COLOR: #009865;
    TEXT-DECORATION: none
}

/* additionals */
cite {
  font-weight: bold;
}
dfn {
  color: #000099;
  font-weight: bold;
}
figure {
  margin-left: 0;
  margin-right: 0;
}
figure.highlight {
  padding-bottom: 4px;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 4px;
}
figure.highlight:hover {
  background: #224057;
  color: #FFFFFF;
}
#bodycontent .post figure.highlight:hover BLOCKQUOTE {
  background: #224057;
  color: #FFFFFF;
}
q {
  font-weight: bold;
}
table {
  border-collapse: collapse;
  border-style: solid;
  border-width: 1px;
}
tr.highlight:hover {
  background-color: #CBDDEB;
}
tr.underline td {
  border-bottom: 1px solid black;
}
th, td {
  padding: 2px;
}
th {
  background: #224057;
  color: #ffffff;
}
table.noborder {
  border-style: none;
}
table.verdana tr {
  font-family: MonoSpace, Verdana, Arial, Helvetica, ms sans serif, sans-serif;
  font-size: 10pt;
}
table.small td, table.small th {
  padding: 4px;
}
table.medium td, table.medium th {
  padding: 6px;
}
table.large td, table.large th {
  padding: 12px;
}
thead.scroll {
  position: sticky;
  top: 0px;
}
tbody.alternate tr:nth-child(odd) td {
  background: #EFF5F9;
}
.border {
  border-style: solid;
  border-width: 1px;
  margin: 1px;
}
.box {
  background: #224057;
  color: #ffffff;
  text-align: center;
}
.center {
  text-align: center;
}
.centerpage {
  position: relative;
}
.displaytable {
  display: table;
  width : 100%;
}
.displaycell {
  display: table-cell;
  padding: 4px;
  position: relative;
  text-align: center;
  vertical-align: middle;
}
.flash-btn {
  background: #ffff00;
  border-style: solid;
  border-width: 1px;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  padding-bottom: 4px;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 4px;
  text-align: center;
  width: 240px;
}
.left {
  text-align: left;
}
.leftside {
  float: left;
  padding-right: 10px;
}
.notif {
  position: absolute;
  top: 0;
  visibility: hidden;
  width: 100%;
}
.relative {
  position: relative;
}
.right {
  text-align: right;
}
.rightside {
  float: right;
  PADDING-LEFT: 10px;
}
.visible {
  visibility: visible;
}

/* colors */
.up {
  color: #009900;
}
.down {
  color: #FF0000;
}
.gray {
  color: gray;
}
.blue {
  color: blue;
}