body  { margin: 0; border-width: 0; padding: 0;
        background-color: #ffffff; color: #444444; font-family: sans-serif; }

#bandeau  { display: flex; align-items: center;
            margin: 0; padding: 1em; background-color: #dddddd; border: 0; }
#left { position: absolute; left: 0px;
        background-color: #dddddd;
        transition: all .5s ease-in; }
#menu { width: 200px;
        margin: 0; padding: 20px 0 10px 0; background-color: #dddddd;
        border-style: solid; border-width: 1px 0 0 0; border-color: #f0f0f0; }
#page { position: absolute; left: 0; right: 0;
        border-style: solid; border-color: #dddddd; border-width: 0 0 0 200px;
        padding: 10px; background-color: #ffffff;
        transition: all .5s ease-in; }
div.coin  { display: inline-block; flex: none;
            margin: 0; padding: 1em; background-color: #dddddd; }
div.titre { display: inline-block; flex: auto; text-align: center; }

div.mini_menu { text-align: center; }
div.barre { width: 4em; height: .5em; background-color: #ffbf00; margin: .5em .3em; }

@media (max-width: 830px) {
  img.titre { width: 100%; }
}

@media (max-width: 640px) {
  #bandeau { padding: 0; }
  em.slogan { font-size: smaller; }
  #left { left: -200px; }
  #page { border-style: none; border-width: 0; }
  div.coin { padding: .3em; }
  div.barre { width: 1.5em; height: .2em; margin: .2em .15em; }

 /* Règles de base pour mobile, proposées par Alsa Creations
    https://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html */

 * { box-sizing: border-box; }

 /* passer body (et tous les éléments de largeur fixe) en largeur automatique */
 body { 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 */
 img { height: auto; }

 /* gestion des mots longs */
 textarea, table, td, th, code, pre, samp {
   -webkit-hyphens: auto; /* césure propre */
   -moz-hyphens: auto;
   hyphens: auto;
   word-wrap: break-word; /* passage à la ligne forcé */ }
 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 */
 .pas_mobile { display: none !important; }

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

#bandeau a { text-decoration: none; }
#bandeau p { text-align: center; margin: 0; }

em.slogan { color: #ffbf00; }

#menu ul { margin-left: 0; padding-left: 0px; list-style-type: none; color: #666677; }
#menu li { color: #666677; font-weight: bold; text-decoration: none; }
#menu li.selection { background: linear-gradient(to right, #dddddd 0%, #ffffff 100%); }
#menu a { display:block; padding: 6px 0 4px 15px; color: #666677; font-weight: bold; text-decoration: none; }
#menu a:hover { color: #000080; }
#menu strong { padding: 0 10px 0 10px; }

table.contrat { border-collapse: collapse; border-width: 2px; border-style: solid; border-color: #dddddd; }
th.contrat { border-width: 1px; border-style: solid; border-color: #dddddd;
             padding: 2px 10px 2px 10px; text-align: left; }
td.contrat { border-width: 1px; border-style: solid; border-color: #dddddd;
             padding: 2px 10px 2px 10px; vertical-align: bottom; }
p.erreur { display: inline-block; border: solid 2px #c04040; border-radius: 8px;
           box-shadow: 4px 4px 4px #a04040; margin: 0; padding: 5px;
           background-color: #ffbf00; color: #444444; font-style: italic; }
h2, h3 { color: #999999; }
strong { color: #999999; }
img { border: 0; }
label { font-weight: bold; color: #777788; }