/* =========================================================
   POLICE GENERALE DU SITE
   ========================================================= */

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


/* =========================================================
   STYLE.CSS DEFINITIF - SITE EMMAP
   ========================================================= */


/* =========================================================
   1. REGLES GENERALES
   ========================================================= */

/* Images qui doivent s'adapter à la largeur disponible */

.image-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}


/* =========================================================
   2. BANDEAU HAUT - ORDINATEUR
   ========================================================= */

.bandeau-ordi {
    display: block;
    position: relative;
    width: 1250px;
    max-width: 100%;
}

.bandeau-ordi img {
    display: block;
    width: 100%;
    height: auto;
}


/* Zone cliquable du logo ordinateur */

.lien-logo-ordi {
    position: absolute;
    left: 2%;
    top: 3%;
    width: 20%;
    height: 94%;
    z-index: 10;
}


/* Zone cliquable téléphone ordinateur */

.lien-telephone-ordi {
    position: absolute;
    left: 28.5%;
    top: 39%;
    width: 18%;
    height: 25%;
    z-index: 10;
}


/* =========================================================
   3. BANDEAU HAUT - MOBILE
   ========================================================= */

.bandeau-mobile {
    display: none;
    position: relative;
    width: 100%;
}

.bandeau-mobile img {
    display: block;
    width: 100%;
    height: auto;
}


/* =========================================================
   4. MENU PRINCIPAL - 12 ICONES
   ========================================================= */

.navigation-icons {
    width: 1250px;
    max-width: 100%;
    margin: 0;

    display: grid;
    grid-template-columns: repeat(12, 100px);
    justify-content: center;
    gap: 4px;
}

.navigation-icons a {
    display: block;
    width: 100px;
}

.icone-navigation {
    display: block;
    width: 100px;
    height: 100px;
    border: 0;
}

/* =========================================================
   4 BIS. ICONES MATERIEL OCCASION
   ========================================================= */

.occasion-icons {
    width: 1250px;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
}

.occasion-icons a {
    display: block;
}

.icone-occasion {
    display: block;
    width: 100px;
    height: auto;
}

/* ---------------------------------------------------------
   PC
   Décalage léger de tout le groupe vers la droite
   --------------------------------------------------------- */

@media screen and (min-width: 601px) {

    .occasion-icons {
        transform: translateX(4px);
    }

}

/* ---------------------------------------------------------
   MOBILE
   6 icônes sur une ligne
   --------------------------------------------------------- */

@media screen and (max-width: 600px) {

    .occasion-icons {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(6, 60px);
        justify-content: center;
        gap: 4px;
    }

    .icone-occasion {
        width: 60px;
        height: auto;
    }

}
/* =========================================================
   5. BANDEAU BAS
   ========================================================= */

.bandeau-bas {
    width: 100%;
}

.bandeau-bas .bandeau-ordi {
    display: block;
    position: static;
    width: 1250px;
    max-width: 100%;
    height: auto;
}

.bandeau-bas .bandeau-mobile {
    display: none;
}


/* =========================================================
   6. CADRE VIDEO
   ========================================================= */

.cadre-video {
    display: inline-block;
    background-color: black;
    padding: 8px;
    box-sizing: border-box;
}

.cadre-video video {
    display: block;
    width: 800px;
    height: 600px;
}


/* =========================================================
   7. IMAGES PRODUIT GM5000
   ========================================================= */

.images-produit-gm {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

.images-produit-gm img {
    display: block;
    width: 300px;
    height: auto;
}


/* =========================================================
   8. BANDEAU GM5000
   ========================================================= */

.bandeau-gm5000 {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 20px 0;
}


/* =========================================================
   9. DOCUMENTATION
   ========================================================= */

.documentation {
    max-width: 100%;
    margin-top: 20px;
}

.documentation-titre {
    display: inline-block;
    width: 45%;
    font-size: 1.1em;
}

.documentation-pdf {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 15px;
}

.documentation-pdf a {
    display: block;
}

.documentation-pdf img {
    display: block;
    width: 135px;
    height: auto;
    border: 0;
}


/* =========================================================
   10. TELEPHONE / MOBILE
   Ecrans jusqu'à 600 px
   ========================================================= */

@media screen and (max-width: 600px) {


    /* -----------------------------------------------------
       BANDEAU HAUT
       ----------------------------------------------------- */

    .bandeau-ordi {
        display: none;
    }

    .bandeau-mobile {
        display: block;
        position: relative;
        width: 100%;
    }

    .bandeau-mobile img {
        display: block;
        width: 100%;
        height: auto;
    }


    /* -----------------------------------------------------
       LOGO MOBILE
       Bandeau 414 x 70 px
       ----------------------------------------------------- */

    .lien-logo {
        position: absolute;
        left: 10px;
        top: 3px;
        width: 75px;
        height: 60px;
        z-index: 10;
    }


    /* -----------------------------------------------------
       TELEPHONE MOBILE
       Bandeau 414 x 70 px
       ----------------------------------------------------- */

    .lien-telephone {
        position: absolute;
        left: 131px;
        top: 9px;
        width: 222px;
        height: 50px;
        z-index: 10;
    }


    /* -----------------------------------------------------
       MENU ICONES
       6 + 6
       ----------------------------------------------------- */

    .navigation-icons {
        width: 100%;
        grid-template-columns: repeat(6, 60px);
        justify-content: center;
        gap: 4px;
    }

    .navigation-icons a {
        width: 60px;
    }

    .icone-navigation {
        width: 60px;
        height: 60px;
    }


    /* -----------------------------------------------------
       BANDEAU BAS
       SUPPRIME SUR MOBILE
       ----------------------------------------------------- */

    .bandeau-bas {
        display: none;
    }


    /* -----------------------------------------------------
       VIDEO MOBILE
       ----------------------------------------------------- */

    .cadre-video {
        display: inline-block;
        width: auto;
        max-width: 100%;
        padding: 4px;
        box-sizing: border-box;
    }

    .cadre-video video {
        display: block;
        width: 360px;
        max-width: 100%;
        height: auto;
    }


    /* -----------------------------------------------------
       IMAGES GM5000
       MOBILE
       ----------------------------------------------------- */

    .images-produit-gm {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .images-produit-gm img {
        width: 65%;
        max-width: 250px;
        height: auto;
    }


    /* -----------------------------------------------------
       BANDEAU GM5000
       MOBILE
       ----------------------------------------------------- */

    .bandeau-gm5000 {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 5px auto;
    }


    /* -----------------------------------------------------
       DOCUMENTATION
       MOBILE
       ----------------------------------------------------- */

    .documentation-titre {
        display: block;
        width: 100%;
        margin-bottom: 8px;
    }

    .documentation-pdf {
        justify-content: center;
        gap: 15px;
    }

    .documentation-pdf img {
        width: 110px;
        height: auto;
    }

}