* 
{
    font-family: "Arial Unicode MS", FreeSans, Verdana, Charcoal, Geneva, "Luxi Sans", Arial, "Helvetica", sans-serif;
}

div.haut ul
{
    text-align:center;
    list-style-type: none;  
}

div.haut ul li
{
    text-align: center;  
    display:inline-block;
}

div.haut ul li a
{
    color:OliveDrab;
    font-weight:bold;
    margin:1em;
    text-decoration:none;
}

div.haut ul li a:hover
{
    color:OrangeRed;
}

h1 {
    text-align:center;
    text-shadow: 2px 2px 2px gray;
}

h1 a {
    text-decoration:none;
    color:black;
}

h3 {
    color:white;
    display:block;
    background:OrangeRed;
    -moz-box-shadow: 0px 4px 6px gray;
    -moz-border-radius: 3px;
    box-shadow: 0px 4px 6px gray;
    border-radius: 3px;
    -webkit-box-shadow: 0px 4px 6px gray;
    -webkit-border-radius: 3px;
    padding:5px;
}

div.maison
{
    background:AntiqueWhite;
    border:1px dashed;
    padding:0.8em;
    margin-bottom:0.8em;
}

div.question
{
    background:AntiqueWhite;
    border:1px dashed;
    padding:0.8em;
    margin-bottom:0.8em;
}

div.postit
{
    position:absolute;
    right:3em;
    background:#fefabc;
    margin:2em;
    padding:2em;
    width:15em;
    -moz-box-shadow: 0px 4px 6px gray;
    -webkit-box-shadow: 0px 4px 6px gray;
    box-shadow: 0px 4px 6px gray;
    -moz-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -moz-transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg);
    z-index:100;
}

div.postit:hover 
{
    opacity:0;
}


ul 
{
    list-style-position:inside;
}

h4
{
    margin-top:0;
}

iframe {
    border:none;
    width:100%;
    height:600px;
}

@media (max-width: 640px) {

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

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

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