/* commun*/
html, body {
    height: 100%;
    padding: 100%;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: arial;
}

nav#menu {
    margin-bottom: 20px;
}

/* initialisatino les ul */
nav#menu ul {
    list-style: none;
    padding: 0;
    margin: 0;

}


* {
    box-sizing: border-box; /* le padding ne fait plus déborder */
}

/* max 510px */
@media screen and (max-width:510px) {
    body {background-color: red;
    color: white;}

}




/* plus que 511px*/
@media screen and (min-width:511px) {
    body {
        background-color: rgb(195, 199, 192);
    }

    /* --- Menu --- */
    nav#menu ul li ul {
        display: none;
    }

    nav#menu ul li:hover ul {
        display: block;
    }

    nav#menu { /* permet au menu d'etre au premier plan */
        position: relative; /* obligatoire pour mettre un z-index */
        z-index: 99999; /* faire apparaitre par dessus */
    }

    nav#menu ul>li { /* 1er niveau seulement l'enfant pas les autres enfants*/
        text-align: center;
        width: 20%;
        float: left;
        height: 80px;
        line-height: 80px;
        background-color: blueviolet;
    }

    nav#menu ul li ul li { /* sous menu */
        width: 100%;
        background-color: chartreuse;
    }

    nav#menu ul li a:link {
        text-decoration: none;
        display: block;
    }

    nav#menu ul li ul li a:hover { /* affichage les survol sous menu */
        background-color: chocolate;
        /* background-image: url(); */ /* pour mettre la flèche */
    }

    nav#menu>ul:after {
        content: "";
        display: block;
        clear: both;
    }

    /* les 4 colonnes */
    section.fourcol {
        margin-bottom: 20px;
        background-color: red;
    }

    section.fourcol:after { /* clear après le tableau */
        content: "";
        display: block;
        clear: both;
    }

    section.fourcol article h2 {
        text-indent: 10px; /* 1er ligne décalée */
    }
    section.fourcol article{
        padding: 10px;
        text-align: justify;
        text-transform: capitalize;

        position: relative; /* va avec absolute */
    }

    section.fourcol article{
        width: 23%;
        margin-left: 1%;
        margin-right: 1%;
        float:left;
        border: 1px solid brown; /* trop de largeur tab tombe */
        box-sizing: border-box; /* calcul vers l'interieur Ol remonte */
    }

     section.fourcol article div {
        position: absolute; /* va avec relative du parents */
        width: 100%; /* pour centrer */
        text-align: center; /* pour centrer */
        height: 20px;
        top: -12px;
        color:white;
    }

    footer {
        background-color: yellow;
        width: 40%;
        height: 40%;
        /* positionner au centre v et h */
        position: absolute; /* sortir du parents */
        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%); /* pour mettre au centredéplace la moitié de lui m^me */
    }
}