body { max-width: 800px; margin-right: auto; margin-left: auto; margin-top: 1%; margin-bottom: 1%; background-color: #ffffff; background: url(util/beige031.jpg); } 

a:link { color: #0000cc; }
a:active { color: #cccccc; }
a:visited { color: #cc00cc; }
a:hover { color: #ff0000; background: #66ff00; }
a.nodec { text-decoration: none; }

span.back, a.back:link { display: inline-block; background: url(util/atm4.gif) no-repeat; color: #ffff00; width: 190px; height: 39px; padding-top: 0.4em; text-align: center; 
text-decoration: none; letter-spacing: 0; font-family: verdana, arial, universe, sans-serif; font-weight: normal; font-size: 13pt; }
a.back:active { color: #cccccc; }
a.back:visited { color: #ffffff; }
a.back:hover { color: #ff0000; }

h1 { text-align: center; font-size: 30pt; font-weight: normal; color: #000066; margin-top: 0em; margin-bottom: 0.5em; font-family: Georgia, Century, Times new roman, Garamond, serif; } 
h2 { text-align: center; font-size: 20pt; font-weight: normal; color: #000066; margin-top: 0em; margin-bottom: 0.5em; font-family: verdana, helvetica, sans-serif; } 
h3 { font-size: 10pt; font-weight: bold; color: #000000; margin-top: 1em; margin-bottom: 0.5em; font-family: verdana, helvetica, sans-serif; text-align: justify; }
h4 { text-align: left; font-size: 12pt; font-weight: bold; color: #000066; margin-top: 1em; margin-bottom: 0em; font-family: verdana, helvetica, sans-serif; }
h5 { text-align: center; font-size: 12pt; font-weight: normal; color: #000066; margin-top: 0em; margin-bottom: 1em; font-family: verdana, helvetica, sans-serif; }

img.posleft { height: 280px; border: 0; margin-bottom: 0.8em; margin-left: 0; margin-right: 2%; margin-top: 0; float: left; }
img.posleft, img.posmeriaudeau { width: 200px; }
img.posleft, img.posmeriaudeau, img.posbregnier { border: 0; margin-bottom: 0.8em; margin-left: 0; margin-right: 2%; margin-top: 0; float: left; }
img.posleft { height: 280px; }
img.posmeriaudeau { height: 212px; }
img.posdl3 { max-width: 276px; max-height: 300px; float: right; margin-left: 0.4em; margin-right: -1.6em; }
img.bas { margin-bottom: -0.4em; text-decoration: none; }
img.posbregnier { width: 240px; height: 245px; }
img.posright, img.posbof { width: 150px; height: 220px; border: 0; margin-bottom: 0; margin-top: 0; }
img.posright {float: right; margin-right: 0; margin-left: 2%; }
img.posbof { float: left; margin-right: 2%; margin-left: 0; }

p, ul, li { font-size: 11pt; font-weight: normal; color: #000000; margin-top: 0em; margin-bottom: 1.5em; line-height: 1.5em; font-family: verdana, helvetica, sans-serif; text-align: justify; }
ul.retour { text-align: center; margin-right: auto; margin-left: auto; }
li.retour { margin-bottom: 0.5em; list-style-type:none; text-align: center; }
p.back { margin-right: auto; margin-left: auto; background: url(util/atm4.gif) no-repeat; color: #ffff00; width: 190px; height: 39px; padding-top: 0.4em; text-align: center; 
text-decoration: underline; letter-spacing: 0; font-family: verdana, arial, universe, sans-serif; font-weight: bold; font-size: 13pt; }
div.blanc { background: #ffffff; padding: 1.6em; max-width: 600px; margin: 0 auto; }

p.center { text-align: center; } 
p.gauche { text-align: left; } 
p.right { text-align: right; font-size: 12pt; font-family: Times new Roman, serif; }
p.signal { text-align: center; line-height: 20px; margin-top: 2em; }
p.droite { text-align: right; margin-bottom: 2em; }
p.blu  { color: #000099; text-align: center; margin-bottom: 0.4em; }
span.blu { color: #0000ff; font-weight: bold; }
span.fin { font-weight: normal; }
a.fin { font-weight: normal; font-style: italic; letter-spacing: 0em; text-decoration: none; } 
a.fin2 { font-weight: normal; font-style: normal; letter-spacing: 0em; text-decoration: underline; } 

@media (max-width: 460px) { 

div.breakcond { clear: both; } 
img.posleft, img.posmeriaudeau, img.posbregnier, img.posright, img.posbof, img.posdl3 { display: block; margin-right: auto; margin-left: auto; float: none; }
img.posbof { margin-bottom: 1em; }
img.posdl3 { width: 100%; max-width: 276px; max-height: 300px; margin: 0 auto; }
}

@media (max-width: 640px) {
p.left { text-align: left; }
div.breakmid { clear: both; } 
 /* 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;
 }
}

/* La touche finale : réduire de façon harmonieuse toutes les tailles de polices en orientation paysage (car bugguée sur les périphériques iPhone et iPad).*/

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