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

/* effacer l'id */
input[id="mn"] {
    /* masquer l'input */
    display: none;
}

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

/* vue smart phone ____________*/

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

    body {
        background-color: rgb(125, 125, 125);
    }
    div#menu {
        width: 100%;
        /* height:100%; utile pour les smart phone */
        /* Postion du menu initiale */
        position: fixed;
        z-index: 9999;
        top: 0;
        left: -100%;
        transition: all .5s linear;
    }

    label[for="mn"] {
        font-size: 32px;
        display: block;
        background-color: red;
        width:40px;
        height: 40px;
        text-align: center;
        line-height: 40px;

        /* position d*/
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 99999; /* au dessu de l'autre */
    }



    label[for="mn"]+input[id="mn"]:checked+div#menu{
        /* position finale */
        left: 0;
    }

    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:501px) and (max-width:768px) {
    body {
        background-color: rgba(134, 4, 4, .925);
    }div#menu {
        background-color: yellow;
        width: 100%;
        position: fixed; /* atuce pur que le menu reste */
        z-index: 1; /* pour faire apparaitre un calc devant */


    }

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

    }

    div#slogan {
        background-color: rgba(0, 0, 0, .5);
        width: 50%;
        height: 50%;
        /* position */
        position: absolute; /* sortit du flux / sortit du parents
        /* emplacement */
        left: 50%;
        top: 50%;
        /* transform */
        transform: translate(-50%, -50%); /* revenir à l'origine */
    }

    /* 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 */
        /* type de position */
        position: relative; /* obligatoire pour les absolute après */
    }

    section#content article.colonne img { /* pour faire sortir l'image du cadre */
        width: 20%;
        height: auto;
        /* type de position et emplacement */
        position: absolute; /* sort du calc */
        top:-10%;
        left: 50%; /* pour centrer va avec transform */
        transform: translatex(-50%); /* avec left va ensemble pour tester */
    }

    section#content article.colonne a:link {
        background-color: royalblue;
        color: skyblue;
        display: block;
        width: 50%;
        height: 32px;
        line-height: 32px;
        position: absolute; /************  */
        bottom: -16px; /************  */
        left: 50%; /************  */
        transform: translatex(-50%); /************  */
        border-radius: 5px; /* arrondi les boutons */
        box-shadow: 3px 3px 3px 3px blue; /* creer une ombre */

    }

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

}