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

a:link { color: #000099; text-decoration: none; font-weight: normal; letter-spacing: 0; }
a:active { color: #cccccc; text-decoration: none; font-weight: normal; letter-spacing: 0; }
a:visited { color: #990099; text-decoration: none; font-weight: normal; letter-spacing: 0; }
a:hover { color: #ff0000; font-weight: normal; letter-spacing: 0; background: #66ff00; }

a.cat4:link { display: block; background: url(util/atm4.gif) no-repeat; color: #ffff00; width: 190px; height: 39px; padding-top: 0.4em; margin: auto; 
text-decoration: none; letter-spacing: 0.1em; font-family: verdana, arial, universe, sans-serif; font-weight: normal; font-size: 14pt; }
a.cat4:visited { color: #eeeeee; } 
a.cat4:hover { text-decoration: underline; color: #ffff00; }
a.cat4:active { color: #ff00ff; text-decoration: none; } 

h1 { text-align: left; 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; } 

img.tn { border: solid 2px; width: 195px; height: 70px; }
span.cl14 { font-size: 12pt; font-weight: normal; color: #000066; margin-top: 0em; margin-bottom: 1.5em; font-family: verdana, helvetica, sans-serif; text-align: center; }

p { font-size: 10pt; font-weight: normal; color: #000000; margin-top: 0em; margin-bottom: 0.5em; font-family: verdana, helvetica, sans-serif; text-align: justify; }
ul { display: block; max-width: 17em; margin-right: auto; margin-left: auto; margin-top: 0; }
li { font-family: verdana,sans-serif; color: #550000; font-size: 11pt; width: 90%; height:160px; margin-left: 2px; margin-right: 2px; line-height: 1.5em; 
margin-bottom: 10px; margin-top: 0; border: 5px groove #999999; list-style-type:none; text-align: center; }

li.vide { display: none; }

div.clear { clear:both; margin-bottom: 0; }

span.cat4 { display: block; background: url(util/atm4.gif) no-repeat; color: #ffff00; width: 190px; height: 39px; text-align: center; padding-left: 0.4em; padding-top: 0.4em; margin: auto; 
text-decoration: none; letter-spacing: 0.1em; font-family: verdana, arial, universe, sans-serif; font-weight: normal; font-size: 10pt; border: 0px; } 

p.center { text-align: center; } 
p.signal { text-align: center; line-height: 20px; margin-top: 2em; }
p.fin { font-family: arial, sans-serif; margin-bottom: 0em; margin-top: 0.4em; font-style: italic; } 

@media (max-width: 499px) {

 /* 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 de la page";
   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%;
  }
}