/*Css commun a toute les tailles */
/* Reset ______________________________*/
html, body {
    margin: 0;
    padding: 0;
    height: 100%;/* pour prendre 100% du browser*/
    width: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

img {
    width: 100%;
    height: auto;
}

/*_____________________________*/
div#menu nav ul { /*nav enfant de menu    */
    list-style-type: none;
    padding: 0;
    margin: 0;
}

a:link, a:visited {
    text-decoration: none;
    color: white;
}

/* Fin du commun-----------------------------------*/

/* vue smart phone ____________*/

@media screen and (max-width:480px) {   /* Taille de 480*/

    body {
        background-color: rgb(125, 125, 125);
    }
    div#menu {
        width: 100%;
        /* height:100%; utile pour les smart phone */
    }

    div#menu nav h1#logo { /* logo enfant de menu */
        text-align: center;
        font-size: 2.5em; /* 16pixel défault 1em plutot pour le texte*/
        background-color: rgba(255, 255, 255, 3);
        color: rgba(0, 0, 0, 1);
        
        margin-top: 50px; /* dans le sens des aiguilles */
        margin-right: 20px;
        margin-bottom: 250px;
        margin-left: 50px;

        margin: 100px 20px 250px 50px ; /* idem au dessus. */
        margin: 20px; /* tous le tour */

        margin: 0; /* Intialisation à 0 */
        height: 100px; /* astuce pour centrer verticalement */
        line-height: 100px; /* astuce pour centrer verticalement */
    } 

    div#menu nav ul {
        text-align: center;
        margin-bottom: 20px;
    }
    
    div#menu nav ul li {
        height: 50px;
        line-height: 50px;
    }

    div#menu nav ul li a:link, div#menu nav ul li a:visited {
        background-color: black;
        display: block; /*prend tous le block aulieu du mot*/
        transition: all 1s ease-in-out; /* transition plus douce */
        transform: rotate(360deg) scale(); /* vue différente  */
    }

    div#menu nav ul li a:hover {
        background-color: rgb(255, 255, 255);
        Color:rgb(0,0,0)
    }
    header {
        display: none;
        background-color: brown;
    }

    section#content {
        margin-bottom: 20px;
    }

    section#content article.colonne {
        padding:100px;
        text-align: center;
        margin-bottom: 20px;
    }
    section#content article.colonne img {
        width: 60px;
        height: auto;
    }

    section#content article.colonne h2 {
        color: rgb(255,255,255);
        font-size: 2em;

    }

    section#content article.colonne h3 {
        color: rgba(0,0,0,6);
        font-size: 2em;
        font-weight: normal;
    }

    section#content article.colonne p {
        font-size: 1.130em;
        line-height: 100%; /* 100 % de 1.130 */
        word-spacing: -5px;
        letter-spacing: 2px;
        
    }

    section#content article.colonne a:link, section#content article.colonne a:visited {
        background-color: royalblue;
        font-size: 1em;
        display: block ; /* transformer pour tous le blocks */
        height: 40px;
        line-height: 40px;
        width: 120px;
        margin-left: auto;
        margin-right: auto;

    }

    section#content article.colonne a:hover {
        background-color: black;

    }

    section#content article#col1 {
        background-color: chocolate;
    }

    section#content article#col2 {
        background-color:coral;
    }

    section#content article#col3 {
        background-color:darkblue;
    }

    section#content article#col4 {
        background-color:darkorange;
    }

   footer{
       height: 100px;
       line-height: 100px;
       text-align: center;
       font-weight: bold;
       font-size: .8em ;
    }
} /* Fin  smart phone ----------------- */

/* Format tablette portrait entre 481 et 768 */

@media screen and (min-width:481px) and (max-width:768px) {
    body {
        background-color: rgba(134, 4, 4, .925);
    }div#menu {
        background-color: yellow;
        width: 100%;

    }



}