/*** mes-styles.css - Mise en forme de la page ***/

body {
	margin: 1em;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	color: black;
	background: white;
}
p,td,th, ul, ol {
	font-size: .9em;
}
ul, ol {
	line-height: 140%;
}
h1 {
	font-size: 1.5em;
	color: #808080;
}
h2 {
	font-size: 1.2em;
	color: #666666;
}
h3 {
	font-size: 1.1em;
	color: #333333;
}
h4 {
	font-size: 1em;
}

code {
	font-size: 110%;
}

.signet > p {
	line-height: 70%;
	padding-left: 1em;
}

p#notes {
	border-bottom: 1px dotted black;
	padding-bottom: 1em;
}

p#footer {
	border-top: 1px dotted black;
	padding-top: 1em;
	font-size: 80%;
	color: #AAAAAA;
}

p#filariane {
	font-size: 80%;
	color: #FF0000;
}

.pluspetit {
	font-size: 80%;
	line-height: 80%;
}

.debug {
	font-size: 80%;
	color: #ccc;
}

table td.large, table th.large {
  padding: 4px; /* Pas de retrait autour du texte = "0". */
  border: 1px solid #ddd; /* Pas de bordure = "none". */
  /* vertical-align: top;  Valeur par défaut: "middle" */
}

@media (max-width: 624px) {

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

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

 /* 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 !important;
   width: auto !important
 }

 /* 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: right;
	font-size: 60%;
   font-style: italic;
 }
}

@media (max-width:640px) and (orientation: landscape) {
  body {
   -webkit-text-size-adjust: 70%;
  }
}