body { max-width: 860px; margin: 0 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.cat4:link { display: block; background: url(util/atm4.gif) no-repeat; color: #ffff00; width: 190px; height: 39px; 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: 14pt; border: 0px; }

a.cat4:visited { display: block; background: url(util/atm4.gif) no-repeat; color: #eeeeee; width: 190px; height: 39px; 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: 14pt; border: 0px; } 

a.cat4:hover { text-decoration: underline; color: #ffff00; }
a.cat4:active { color: #ff00ff; text-decoration: none; } 

h1, h2, h3 { text-align: center; font-weight: normal; color: #000066; margin-top: 0em; margin-bottom: 0.5em; font-family: Georgia, Century, Times new roman, Garamond, serif; } 

h1 { font-size: 40pt; } 
h2, h3 { font-size: 24pt; } 

div.blanc { max-width: 94%; display: block; margin-left: auto; margin-right: auto; margin-top: 1em; background-color: #ffffff; padding: 0.5em; }

p { font-size: 10pt; font-weight: normal; color: #000000; margin-top: 0em; margin-bottom: 0.3em; margin-left: 0.5em; margin-right: 0.5em;
font-family: verdana, helvetica, sans-serif; text-align: justify; line-height: 18px; text-indent: 2em; }
p.right { text-align: right; font-style: italic; }
p.center { text-align: center; margin-left: 10em; margin-right: 10em; }
p.signal { text-align: center; line-height: 20px; margin-top: 2em; display: block; width: 100%; max-width: 540px; margin-left: auto; margin-right: auto; text-indent: 0; }

img.initiation1 { width: 160px; height: 236px; float: right; margin-top: -0.5em; margin-bottom: 0em; margin-left: 0.8em; margin-right: -0.5em; }
img.initiation2 { width: 122px; height: 200px; float: left; margin-top: 0em; margin-bottom: 0em; margin-left: -0.5em; margin-right: 0.8em;}
img.initiation3 { width: 147px; height: 200px; float: left; margin-top: 0.5em; margin-bottom: 0em; margin-left: -0.5em; margin-right: 0.8em;}
img.initiation4 { width: 150px; height: 219px; float: right; margin-top: 0.4em; margin-bottom: 0em; margin-left: 0.8em; margin-right: -0.5em;}
img.signal { width: 62px; height: 67px; float: right; margin-bottom: 0em; }

@media (max-width: 460px) { 

p { font-size: 11pt; line-height: 1.5em; text-align: left; text-indent: 0; } 

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

/* 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 */
 p {
   word-wrap: break-word; /* passage à la ligne forcé */
   -webkit-hyphens: auto; /* césure propre */
   -moz-hyphens: auto;
   hyphens: auto;
 }

}

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