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

    div#menu nav h1#logo {
        color: white;
        background-color: red;
        width: 30%;
        height:80px;
        line-height: 80px;
        text-align: center;
        float:left;
        margin: 0; 
    }

    div#menu nav ul {
        height: 80px;
        background-color: gray;
        width: 70%;
        float: left;
    }

    /* pour monter les menu plutot float */

    div#menu nav ul li {
        background-color: green;
        width: 16.666%;
        height: 80px;
        /* display: inline-block; /* test avec inline et inline block rajoute des pixel */
        float: left; /* meilleure methodes */
        text-align: center;
        line-height: 80px;
    }

    /* css pour les lien du menu */

    /* le header */

    header {
        margin-bottom: 20px;
        height: 450px;
        background-color: salmon;
        background-image: url(/images/maison.jpg);
        background-size: cover; /* image sur toute la page */
        background-position: top right; /* pour aligner l'image comme on veux */
        background-repeat:no-repeat;
        background-attachment: fixed; /* fixe l'image et reste pour les pub */

    }

    /* section      */

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

    section#content article.colonne {
        width: 28%;
        padding: 10px;
        background-color: rgba(255, 255, 255, .4);
        display: inline-block; /* mets à la suite les éléments */

    }

    section#content article.colonne img {
        width: 40%;
        height: auto;
    }

} /* Fin  du tablette */

/* ecran plus grand */

@media screen and (min-width:769px) {
    body {
        background-color: gray;
        max-width: 1280px; /* ne depasse pas cette largeur */
        margin-right: auto;
        margin-left: auto;
    }

    div#menu {
        width: 100%;

    }

    div#menu nav h1#logo {
        color: white;
        background-color: red;
        width: 150px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        margin: 0 auto 0 auto; /* centré au milieu */
    }

    div#menu nav ul {
        text-align: center;
    }

    div#menu nav li {
        float: left;
        background-color: black;
        width: 16.666%;
        height: 80px;
        line-height: 80px;
    }

    /* css pour le header */

    /* css section */
    section#content {
        margin-bottom: 20px;
        text-align: center;
        background-color: red;
      /*  height: 100px; /* utilliser clear */
    }

    section#content article.colonne {
        width: 32%;
        background-color: rgba(134, 4, 4, .925);
        float: left;
        box-sizing: border-box; /* ok avec le padding */
        padding: 1%; /* attention le padding rajoute voir box sizing */
        padding-bottom: 20px; /* pousse à l'interieur */
        margin-right: 2%;
    }

    section#content article.colonne:last-child {
        margin-right: 0; /* met le dernier à 0  */
    }

    /* technique pour faire la marge plus bas */
    section#content:after {
        content: "";
        display: block;
        clear: both; /* annule l'effet des folotantes */
    }

}