@charset "UTF-8"; /* CSS Document */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
paramètres mobile 
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/*
color:#c50a00;/*rouge
color:#79d113;/*vert clair
color:#0d7d2a;/*vert foncé
color:#ff7e0d;/*orange
color:#f5be00;/*jaune
color:#0095c9;/*cyan
color:#00338a;/*bleu foncé
color:#a5286b;/*violet
color:#6830ca;/*mauve
color:#49453F;/*gris foncé
color:#CCCDCB;/*gris clair*/

/*
surface réelle :
320x480px pour l'iPhone 3
640x960px pour l'iPhone 4
640x1136px pour l'iPhone 5
768x1024px pour l'iPad 1 et 2
1536x2048px pour l'iPad 3

la surface device-width et device-height en "pixels CSS"
320x480px pour l'iPhone 3
320x480px pour l'iPhone 4
320x568px pour l'iPhone 5
768x1024px pour l'iPad 2
768x1024px pour l'iPad 3

 viewport dépend du navigateur mobile:
Android 1, 2 et 3 : 800px
Android 4 : 980px
Opera mini : 850px
Opera mobile : 980px
Safari mobile : 980px
Internet Explorer mobile : 1024px

Pour résumer, Safari mobile sur iPhone 4 va afficher par défaut les pages web dans une fenêtre de 980px de large au sein des 320px de largeur qu'il croit avoir… bien qu'il en ait physiquement 640px.
Une image de 320px de large va, par conséquent, occuper par défaut 1/3 de la largeur de l'écran. 
*/

@media only screen and (max-width: 1024px) {
}

@media only screen and (max-width: 960px) {
}

.menu1 ul li.nomobile {
    display: none;
}

@media only screen and (max-width: 640px) {
    body {
        background-color: #fff;
    }

    .wrapper_content {
        position: relative;
        margin: 0 auto;
        width: 100%;
    }

    #left {
        float: left;
        height: 100%;
        margin: 10px 0 0 0;
        position: relative;
        width: 100%;
    }

    .bloc_logo_petit {
        width: 90%;
    }

    h1 {
        font-size: 3.4em;
        line-height: 0.8em;
        margin: 0 0 5px;
    }

    h1 span {
        font-size: 0.4em;
        line-height: 1.4em;
        padding: 30px 0 10px 0px;
    }

    .navbar {
        float: left;
    }

    .btn-navbar {
        background-color: #333333;
        border: 1px solid #333333;
        border-radius: 4px;

        margin: 8px 15px;
        padding: 9px 10px;
        position: relative;


    }

    .icon-bar {
        background-color: #fff;
        border-radius: 1px;
        display: block;
        height: 2px;
        width: 22px;
    }

    .menu_box {
        float: none;
        left: 0;
        position: fixed;
        top: 0;
        z-index: 100000;
        margin-top: 0px;
        width: 100%;
    }

    #box_top {
        margin-top: 0px;
        overflow: hidden;
        position: relative;
        transition: height 0.35s ease 0s;
        display: block;
        clear: both;
    }


    .header1 {
        width: 100%;
        height: auto;
    }

    .bando_menu1, .bando_menucrea, .bando_menuandyo {
        margin: 0 auto;
        padding: 0 2%;
    }

    .bando_menu1 {
        width: 96%;
        height: auto;
        margin: 10px auto 0 auto;
        padding: 0 2%;
    }

    .bando_menucrea {
        width: 46%;
        height: auto;
        margin: 10px auto 0 auto;
        padding: 0 2%;
    }

    .bando_menumise {
        width: 46%;
        height: auto;
        margin: 10px auto 0 auto;
        padding: 0 2%;
    }

    .bando_menuandyou {
        width: 96%;
        height: auto;
        margin: 10px auto;
        padding: 0 2%;
    }

    .menuandyou {
        float: none;
        margin: 6px auto 0 auto;
    }

    .bando_menu3 {
        width: 46%;
        height: auto;
        margin: 0 auto 10px auto;
        padding: 0 2%;
        float: left;
    }

    .bando_menu4 {
        width: 46%;
        height: auto;
        margin: 10px auto;
        padding: 0 2%;
    }

    .menu1 ul li, .menu1 ul li.btn_home a {
        width: 46%;
        font-size: 16px;
        margin: 0 2% 15px 2%;
    }

    .menu1 ul li a, .menu1 ul li.btn_home a {
    }

    .menu3 {
        height: auto;
        position: relative;
        right: 20px;
        top: 0;
        width: 100%;
        z-index: 10000;
    }

    .menu3 ul > li {
        height: auto;
    }

    .menu3 ul li ul {
        top: 15px;
        width: 100%;
        position: absolute;
        z-index: 10000;
    }

    .menu3 ul li ul li a {
        margin: 0;
        padding: 8px 0;
    }

    .menu_page {
        width: 98%;
    }

    .header2 {
        height: auto;
    }

    .menu2 ul li {
        font-size: 20px;
        text-align: center;
    }

    .menu2 ul li a {
        width: 50%;
        height: 30px;
        margin: 0 auto 10px auto;
    }

    .menu2 ul li .alignagauche {
        text-align: center;
        padding-left: 0;
    }

    #backgroundmobile {
        width: 100%;
    }

    #backgroundmobile img {
        max-width: 100%;
    }

    .bando_bloc_centre {
        width: 100%;
    }

    .logo_grand, .titre_pagedegarde, .bando_color {
        height: 80px;
    }

    .bando_color {
        float: left;
        opacity: 0.9;
        width: 100%;
    }

    .logo_grand, .titre_pagedegarde {
        float: left;
        text-align: center;
        width: 50%;
    }

    .titre_pagedegarde {
        padding-top: 5px;
    }

    .titre {
        margin-bottom: 6px;
        padding: 0 4px 0 4px;
    }

    h1.home {
        font-size: 40px;
        border-bottom: 1px solid #FFFFFF;
        margin-bottom: 5px;
    }

    .filet_home {
        display: none;
    }

    h2.home {
        font-size: 14px;
    }

    .bando_bloc_menu {
        float: left;
        height: 34px;
        margin-top: 10px;
        width: 100%;
    }

    #center, #centerSousFooter {
        float: left;
        padding: 10px 0 0;
        width: 100%;
    }

    .content_home {
        margin: 10px 0 20px 0px;
        text-align: center;
    }

    .content_pagedegarde {
        width: 100%;
        margin: 0 0 60px 0;
        padding: 0px 0 0 0;
        text-align: center;
    }

    .content_pagedegarde img {
        max-width: 96%;
        margin: auto;
    }

    .logo_grand img {
        width: 100%;
        margin-top: 0px;
    }

    .bloc_menugauche {
        height: auto;
    }

    .content_sansmenu {
        margin: 0;
    }

    /* POPUP */
    .btn_retour_fiche {
        width: 50%;
        height: 30px;
        margin: auto;
        background-color: #949288;
        text-align: center;
        padding-top: 5px;
    }

    .btn_retour_fiche:hover {
        background-color: #949288;
    }

    .btn_retour_fiche a {
        font-family: 'Montserrat', sans-serif;
        color: #fff;
        font-weight: 700;
    }

    .popup_block {
        box-shadow: none;
        display: none;
        float: left;
        padding: 10px;
        position: relative;
        left: 0;
        top: 0;
    }

    .fiche_inner {
        padding: 2%;
    }

    .fiche_visuels {
        float: left;
        margin: 0 0 4% 0;
        width: 100%;
    }

    .viewer {
        height: 280px;
        width: 280px;
    }

    .viewer img {
        height: 100%;
        width: 100%;
        object-fit: contain;
    }

    .thumbs {
        list-style: none outside none;
        margin: 20px 0 0 20px;
        overflow: auto;
        padding: 0;
    }

    .thumbs a {
        display: block;
        height: 126px;
        outline: medium none;
        width: 126px;
    }

    .tablo {
        float: left;
        width: 100%;
    }

    .coloris {
        float: left;
        margin: 20px 0 0;
        width: 100%;
    }

    .coloris_vignette {
        width: 33%;
    }

    /* FORMULAIRE */
    .form_ligne {
        float: left;
        width: 100%;
        margin-bottom: 6px;
    }

    .form_libelle {
        float: left;
        width: 100%;
    }

    .form_champ {
        float: left;
        width: 100%;
    }

    .inputText {
        width: 90%;
        height: 20px;
    }

    .inputTextarea {
        width: 91%;
    }

    .form_valid {
        padding: 8px 0px 10px 0;
    }

    .form_valid img {
        width: 180px;
        margin: 4px 0px;
    }

    .numvalid {
        width: 174px;
        height: 20px;
    }

    .content_diapo, .content_diapo_carousel {
        margin: 0 0 20px 0;
    }

    .jcarousel-skin-tango .jcarousel-container-horizontal {
        padding: 10px 15px;
        width: 265px;
    }

    .jcarousel-skin-tango .jcarousel-clip-horizontal {
        height: 90px;
        width: 265px;
    }

    .jcarousel-skin-tango .jcarousel-prev-horizontal {
        left: 0px;
    }

    .jcarousel-skin-tango .jcarousel-next-horizontal {
        right: 0px;
    }

    /* xxxxxxxxxxx PAGES xxxxxxxxxxxxxxxxxx */
    #left {
        margin: 50px 32px 0 0;
    }

    img.full {
        max-width: 100%;
    }

    #center > .inner {
        padding: 0 10px;
    }

    .content_img {
        float: left;
        margin-right: 0px;
        width: 100%;
    }

    .content_img img {
        float: left;
        margin-right: 2%;
        width: 48%;
    }

    .content_text {
        float: left;
        padding: 0 0 30px;
        width: 100%;
    }

    .content_catalogue {
        float: left;
        margin: 0 0 20px;
        width: 100%;
    }

    .titre_pagedepage {
        float: left;
        height: auto;
        width: 100%;
    }

    .img-mousse {
        margin-top: 1em !important;
    }


    .pageh1 {
        font-size: 40px;
        margin: 10px 0 0;
        padding: 0;
        width: 60%;
    }

    .pageh2 {
        font-size: 14px;
        margin-bottom: 40px;
        width: 95%;
    }

    .bando_visuel {
        height: 80px;
        left: 0;
        position: absolute;
        width: 100%;
        z-index: -40;
        text-align: right

    }

    .bando_visuel img {
        width: 320px;
        height: 80px;
        text-align: right;
        right: 0;
    }

    .tablo_entete_col1c, .tablo_entete_col2c, .tablo_ligne_col1c, .tablo_ligne_col2c {
        width: 12%;
    }

    .tablo_entete_col3c, .tablo_ligne_col3c {
        width: 20%;
    }

    .tablo_entete_col4c, .tablo_entete_col5c, .tablo_entete_col6c, .tablo_ligne_col4c, .tablo_ligne_col5c, .tablo_ligne_col6c {
        width: 17%;
    }
}