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

    .ordinateur{
        display:none;
    }
    #mobile{
        display:block;
        background:var(--degrad1);
        max-height: 85px;
    }



    

    :root { 
        --jaune: #ffcf0a;
        --brun: #2d2f2f;
        --vert: #177175;
        --degrad1: linear-gradient(90deg, rgba(21,112,118,1) 0%, rgba(67,123,95,1) 26%, rgba(159,145,49,1) 52%, rgba(255,209,12,1) 100%);	
    }
    

    html {font-size: 100%;}
    
    a{
        text-decoration: none;
    }
    
    
    .al-30{
    top: 130px;
    }
    
    /*-----------------------------------------------
    ---------------NAV----------------------------
    -----------------------------------------------*/

   
    @font-face {
     font-family: "SiemensSans-Roman",sans-serif;
     src: url("Siemens_Sans_Roman.ttf") format("truetype");
           
    }
    
    .btnI{
        background-color: black ;
        padding: 5px;
        color: white;
    }
    .btnA{
        background-color: #d89b12;
        padding: 5px;
        color: white;
    }
    
    
    h1 {
        color: white;
        margin-left: 15px;

    
    }
    .h2{
        color: white;
         background:  var(--brun);
         font-size: 20px;
        
    }
    
    
    .centvh{
        width: 100vh;
    }
    
    /*---------------Gestion du front-------------------- */
    /* --------------------------------------------------- */
    .divMobilesection{
        width: 100%;
    }
    #firstVue{
        
        position: relative;
        background-image: url(../../../medias/pictures/testVue.jpg);
        background-size: 150%;
        background-repeat: no-repeat;
        min-height: 0px;
    
    
    }
    
    #Vue_Inscription{
    
        position: relative;
        background-image: url(../../../medias/pictures/VueInscription.jpg);
        background-size: 150%;
        background-repeat: no-repeat;
        
    
    
    }
    
    #Vue_fonctionaliter{
    
        position: relative;
        background-image: url(../../../medias/pictures/Vue_fonctionaliter.jpg);
        background-size: 200%;
        background-repeat: no-repeat;

    }
    .btnCatalogue{
        display: none;
    }
    .sectionCatalogue div{
        width: 90%;
    }
    .contenerInscription{
        width: 100%;
    }
    .contenerInscription div{
        width: 90%;
    }
    .contenerInscription h2{
        width: 90%;
    }
    .contenerFonction{
        display: block;
        position: relative;
        top: 10px;
    }
    .contenerConexion{
        width: 100%;
        display: block;
    }
    .divFonctionh1{
        width: 90%;
        font-size: 15px;
    }
    .titre{ margin-bottom:10px ;}
    .secformInscription{
        width: 100%;
        flex-wrap: wrap;
    }
    .secformInscription > div{
        width: 100%;
        display: block;
    }
    .divFonctionMenu{
        width: 90%;
        font-size: 15px;
    }
    .divconnexionOrdi{
        display: none;
    }
    .connexionfirstVue{
        display: none;
    }
    .divconnexionMobile{
      
        width: 100%;
        display: block;
        position: relative;
    }
    .divconnexionMobile div{
        width: 100%;
    }

    .acrochePme{
        display: none;
    }
    #Vue_catalogue{
    
        position: relative;
        background-image: url(../../../medias/pictures/VueCatalogue.jpg);
        background-size: 150%;
        background-repeat: no-repeat;
        
        
    }
    
    .textArticle{
        background-color:rgb(105, 103, 103);
        border-radius: 4px;
        padding: 30px;
        word-wrap: break-word;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.9);
        line-height: 28px;
        font-size: 1.1em;
        word-wrap: break-word;
        margin-bottom: 20px;
        width: 100%;
    }
    .divImgMobile{
        width: 100%;
    }
    .article > .divImgMobile{
        order: 1;
    }
    .article > .textArticle{
        order: 2;
    }
    .max381{ max-height: 381px;}
    .sectionArticle{
        width: 100%;
    }
    .article{
        background: var(--brun);
        margin-bottom: 50px;
        flex-wrap: wrap;
       
    }
    .article div{
        width: 100%;
    }
    .article h2{
        color: var(--jaune);
        margin-bottom: 15px;
    }
    .article p{
        color:white;
    }
    #superieur{
        width: 100%;
        margin-bottom: -20px;
    }
    #Htabouret{
        width: 57%;
    }
    .contentBrun{
        background-color: var(--brun);
    }
    /*-----------------------------------------------
    ---------------VUE---CATALOGUE-----------
    -----------------------------------------------*/
    #catalogue h2{
    
        color:var(--jaune);
        padding:15px;
        border-top: 2px ridge #2d2f2f;
        border-bottom: 2px ridge #2d2f2f;
        margin-bottom: 60px;
    }
    
    #catalogue h3{
        background-color: var(--brun);
        color:var(--jaune);
        padding:5px;
        border-top: 2px ridge #2d2f2f;
        border-bottom: 2px ridge #2d2f2f;
        margin-bottom: 10px;
    }
    
    #catalogue p{
        background-color: #524e4e;
        color:white;
        
        min-height: 50px;
    }
    
    #catalogue div{
        margin-bottom: 50px;
        text-align: center;
    }
    #catalogue div p{
        padding: 10px;
    
    }
    
    #pAcroche{
        font-size: 1.25em;
        margin-bottom: 50px;
        padding: 20px;
    }
    
    /*-----------------------------------------------
    ---------------VUE---FONCTIONALITER-----------
    -----------------------------------------------*/
    #fonctionaliter div{
        width: 100%;
        margin-bottom: 45px;
    
    }
    #fonctionaliter h2{
        width: 100%;
        background-color: var(--brun);
        color:var(--jaune);
        padding:15px 10px;
        margin-bottom: 50px;
    }
    #fonctionaliter h3{
        background-color: var(--brun);
        color:var(--jaune);
        padding:5px;
    }
    
    #fonctionaliter p{
        background-color:  #524e4e;
        text-align: left; 
        color:white;
        padding:20px;
        min-height: 300px;
        line-height: 25px;
    }
    /*-----------------------------------------------
    ---------------VUE---INSCRIPTION-----------
    -----------------------------------------------*/
    .divHelp {
        order: 1;
    background-color: rgb(203, 211, 169);
    box-shadow: 5px 5px 10px black;
    
        
    }
    .divHelp h3{
    background-color: var(--brun);
    color: var(--jaune);
    padding: 6px 15px;
        
    }
    #watchMdp{
    color: black;
    }
    #watchMdp:hover{
    color:white;
    }
    .rgpd_user{
        background: var(--vert) ;
        padding-left: 15px;
    }
    
    /*-----------------------------------------------
    -------------VUE---CONNEXION-----------
    -----------------------------------------------*/
    
    .mdpForget{
        padding: 3px 15px;
        background-color: var(--brun);
        color: white;
    }
    .mdpForget a{
        color: white;
    }
    /*-----------------------------------------------
    ---------------NAV---PRINCIPAL-----------
    -----------------------------------------------*/
    header{
        position: fixed;
        width: 100%;
        z-index: 100;
        top: 0;
    }
   
    nav{
        overflow: hidden;
        
    }
    
    .conexionOff{
        position: relative;
    }
    
    .spanConnexion:hover{
        border-bottom: 3px ridge var(--vert);
    }
    .ulConnexion{
        position:fixed;
        top:30px;
        min-width: 160px;
        z-index: 100;
        color: darkorange;
    }
    .liConnect{
        background: var(--brun);
    }
    
    .liConnect > a{
        background: var(--brun);
        padding: 8px 15px;
        display: block;
        color: white;
        border-left:2px solid var(--vert);
    }
    .aConnect  {
        display: block;
        background:var(--vert);
        padding: 8px 15px;
        color: var(--jaune);
        font-weight: bold;
    
    
    }
    .liConnect:hover > a  {
        background: rgb(223, 185, 20);
        border-left: 6px solid var(--jaune);
        transition: 0.2s;
    }
    
    
    #logo{
        font-family: 'MAJOR MONO Display', serif;
        font-size: 36px;
        position: relative;
        text-decoration: none;
        color: white;
        z-index: 5;
    }
    .logo{
        font-size: 36px;
        text-decoration: none;
        color: white;
    }
    #burger{
        color: white;
    }
    #ulMobil{
        position: fixed;
        min-height: 900px;
        background: var(--vert);
        width: 100%;
    }
    .block{
        display: block;
    }

    .liMobil a{
        color: var(--jaune);
        display: block;
    }
    .liMobil{
        width: 100%;
        display: block;
        color: var(--jaune);
        background: var(--vert);
        padding: 15px;
        text-align: center;
    }
    .liMobil:hover{
        color: var(--jaune);
        background: var(--degrad1);
    }

    .liMobil:hover a{
        color:white;
    }
    
    .label{
        width: 180px;
        display: inline-block;
        padding-bottom: 15px;
    }
    
    #fM{
        position: absolute;
        width: 39px;
        top: 0px;
        left:-11px;
        z-index: 1;
    }
    #fMM{
        position: absolute;
        width: 17%;
        top:-220px;
        left:-15px;
        z-index: 0;
        opacity:1;
        
        
    }
    .titre{
        text-shadow: black 15px 15px 15px;
    }
    #barreL{
    min-height: 45px;
    background:  var(--brun);
    vertical-align: center;
    border-bottom: 3px ridge #666767;
    }
    
  /*   .Tampon{
        min-height: 130px;
    } */
    /*-----------------------------------
          GESTION BARRE DE RECHERCHE PRE
          VALIDATION DES DA   
    -----------------------------------*/
    #lien{
        margin-bottom: 20px;
    }
    .divLien{
        position: relative;
        margin-bottom: 44px;
        max-height: 100px;
    }
    .lien:hover{
    
        padding:1px 15px; 
        font-size: 1.25em;
        color: var(--jaune);
        background-image: url(../../../medias/pictures/toleHexa3B.png);
        transition: 0.5s;
        border-left: 15px solid var(--jaune);
        border-bottom:3px inset var(--jaune);
        margin-bottom: 19px;
    
    }
    
    .lien{
        
        padding:8px 15px; 
        font-size: 17px;
        background-color: rgba(255,255,255,0.2);
        font-weight: bold;
        color:white;
        margin-bottom: 22px;
        transition: 0.5s;
        border:1px inset var(--jaune);
    }
    .lien:hover i{
        color: white;
    }
    .lien i{
        font-size: 1.1em;
        color: var(--jaune);
    }
    #ajout_produit{
        margin-top: 25px;
        display: none; 
        width: 100%;
        height: 3em;
    }
    .inputPanier{
        height: 2em;
    }
    
    .ui-autocomplete-categorie{
        color: var(--jaune);
        background:  var(--brun);
        font-weight: bold;
        padding: 4px 0px;
    }
    .ui-menu {
       
        font-size: 0.938em;
        color: #888;
    }
    .ui-menu .ui-menu-item a {
        color: #888;
    }
    
    .ui-menu .ui-menu-item:hover a{
        display: block;
        color: #3D3D3D;
        cursor: pointer;
        background-color: lightgray;
        background-image: none;
        
    }
    /*.ui-widget-content .ui-state-hover, .ui-widget-content .ui-state-focus {
        border: 1px solid lightgray;
        background-image: none;
        background-color: lightgray;
        color: #3D3D3D;
    }*/
    /*-----------------------------------
           BODY et MAIN GENERAL    
    -----------------------------------*/
    
    body{
    
        font-family: "SiemensSans-Roman",sans-serif;
    }
    
    
    .bodyG{
        /*background-color: #c9c9c7;*/
        background-image: url(../../../medias/pictures/betonF.jpg);
        background-size: 50%;
    }
    
    #mainP{	
        min-width: 77%;
    }
    .pNewda{
    background: var(--jaune);
    }
    /*-----------------------------------
         GESTION DE La NAV DANS PROFIL
    -----------------------------------*/
    #ulProfil{
        padding: 6px 15px;
    }
    #ulProfil 	li{
        width: 20%;
        text-align: center;
    }
    #ulProfil 	li:hover a{
        margin-left: 15px;
        transition: 0.3s;
    }
    #ulProfil 	a{
        color: white;
    }
    #ulProfil 	i{
        margin-right: 5px;
    }
    
    .cursor{
        cursor: pointer;
    }
   
    .pValidTall a {color:var(--jaune);}
    .pValidTall {
        width:83%;
        margin-left: calc(100%-200px);
        background-color: var(--vert);
        padding: 20px;
        
        font-size: 1.25em;
        text-align: center;
        margin:0 auto 25px;
    
    }
    .pValidTall:hover{
        background: linear-gradient(90deg, rgba(21,112,118,1) 0%, rgba(67,123,95,1) 26%, rgba(159,145,49,1) 52%, rgba(255,209,12,1) 100%);
    
        color: white;
        justify-content: space-between;
        border-left: 17px solid var(--vert);
        transition: 0.7s;
    }
    .pValid i{
        font-size: 25px;
        color:white;
        display: none;
    }
    .pValid:hover i{
        display: block;
    }
    .pValidTall:hover a, .pValid:hover a{
        color:white;
    }
    .pValid {
        width: 22%;
        margin-left: calc(100%-200px);
        background-color: var(--vert);
        padding: 20px;
        color:var(--jaune);
        font-size: 1.25em;
        text-align: center;
        margin-left: auto;
    }
    .pValid:hover{
        background: linear-gradient(90deg, rgba(21,112,118,1) 0%, rgba(67,123,95,1) 26%, rgba(159,145,49,1) 52%, rgba(255,209,12,1) 100%);
        max-width: 23%;
        color: white;
        justify-content: space-between;
        border-left: 22px solid var(--vert);
        transition: 0.7s;
    }
    /*----------------------------------------------
    ________GESTION DESIGN DE CREATION FORMULAIRE______
    ----------------------------------------------*/
    .formInscription{order:2;}
    .newForm i {color:var(--jaune);}
    .newForm  label{
        background: linear-gradient(90deg, rgba(21,112,118,1) 0%, rgba(67,123,95,1) 26%, rgba(159,145,49,1) 52%, rgba(255,209,12,1) 100%);
        color: white;
        font-weight: 20px;
        font-weight: bold;
        width: 100%;
        display: block;
        padding: 5px 15px;
    }
    
    /*----------------------------------------------
    ________GESTION DESIGN DE MODIF FORMULAIRE APPELER____
    ----------------------------------------------*/
    .titreForm{
        color: white;
         background:  var(--brun);
         padding: 6px 15px;
         border-bottom: 3px ridge #666767;
    }
    /*GESTION DE X SORTIE FORM*/
    #times{
        font-size: 1.25em;
    }
    #times:hover{
        color: red;
        z-index: 100;
    }
    #hoverRed{
        font-size: 1.25em;
    }
    #hoverRed:hover{
        color: red;
        z-index: 100;
    }
    
    .showForm{
        display: none;
        position: absolute;
        top: 200px;
        /*background-color: rgba(255,255,255,0.4);*/
        background-color: rgba(0,0,0,0.4);
        min-width: 30%;
        z-index: 2;
    
    }
    .showForm i {color:var(--jaune);}
    .showForm  label{
        background: linear-gradient(90deg, rgba(21,112,118,1) 0%, rgba(67,123,95,1) 26%, rgba(159,145,49,1) 52%, rgba(255,209,12,1) 100%);
        color: white;
        font-weight: 20px;
        font-weight: bold;
        width: 100%;
        display: block;
        padding: 5px 15px;
    }
    .pSubmit i{
        display: none;
        font-size: 25px;
        font-weight: bold;
        color:white;
    }
    .pSubmit{
        display: none;
        background-color: var(--vert);
        padding: 20px;
        color:var(--jaune);
        font-size: 1.25em;
        cursor: pointer;
    
    }
    .submit{
        background:none;
        width: 100%;
        color:var(--jaune);
        font-size: 1.25em;
        border:none;
    }
    
    .pSubmit:hover{
        background: linear-gradient(90deg, rgba(21,112,118,1) 0%, rgba(67,123,95,1) 26%, rgba(159,145,49,1) 52%, rgba(255,209,12,1) 100%);
        width: 90%;
        color: white;
        border-left: 45px solid var(--vert);
        transition: 0.7s;
    }
    .pSubmit:hover i{
        display: block;
        color: white;
        
    }
    .pSubmit:hover .submit{
        color: white;
        
    
    }
    
    /*---------------------------------
    ----GESTION DU FOOTER-----------
    ---------------------------------*/
    #sectionFoot{
        width: 100%;
        padding-top: 25px;
        background:  var(--brun);
        border-top:  3px ridge var(--jaune); 
        min-height: 300px;
    }
    #sectionFoot h3{
        color: White;
        margin-bottom: 10px;
    }
    #sectionFoot a{
        color: slategray;
        padding: 2px 0;
    }
    #sectionFoot a:hover{
        color:var(--jaune)
    }
    
    #sectionFoot i{
        padding:0 15px 0 0;
    }
    #sectionFoot section{
       display: block;
       margin-bottom: 0;
    }
    #sectionFoot div{
        margin-bottom: 20px;
     }
    
    
    #politiqueP{
        position: absolute;
        width: 100%;
        top: auto;
        padding: 10px;
        background: linear-gradient(90deg, rgba(21,112,118,1) 0%, rgba(67,123,95,1) 26%, rgba(159,145,49,1) 52%, rgba(255,209,12,1) 100%);
    }
    #politiqueP a{
        color: white;
        text-decoration: none;
    }
    
    /*---------------------------------
    ----GESTION DES CATEGORIES-----------
    ---------------------------------*/
    .ariane a{
        color: white;
    }
    .ariane{
        background: var(--degrad1);
        padding: 10px;
        color: white;
        border-bottom: 3px ridge #666767;
    
    
    }
    .ariane i{
        margin:0 0.3em 0 0.3em;
        font-size: 25px;
        color: black;
    }
    
    .ving20{
        width: 24%;
        list-style-type: none;
        background-color: rgba(255,255,255,0.5);
        
    }
    .ving20 h5{
        background:var(--brun) ;
        padding: 5px;
        color: var(--jaune);
        
    }
    .ving20 h4{
        background:var(--brun) ;
        color: white;
        padding: 5px;
        border-bottom: 3px ridge #666767;
    }
    .ving20 p{
        background:var(--degrad1) ;
        color: white;
        padding: 5px;
        border-bottom: 3px ridge #666767;
    }
    .ving20 a{
        font-size: 0.938em;
        color: black;
    }
    
    .height70{
        height: 70px;
    }
    #choice{
        background: var(--brun);
        padding: 8px 30px;
        font-size: 1.25em;
        color: var(--jaune);
    }
    .wrap{
        width: 80%;
        margin: 0 auto;
        border: 2px solid black;
        border-radius: 6px;
        padding: 0 15px;
    }
    
    
    table{
        margin-bottom: 15px;
        text-align: center;
    }
    /* ----------------Carroussel----------- */
    .slider{
        overflow: hidden;
        background-color: var(--brun);
    }
    
    /* ----------------COMPTEUR BOOTSTRAP----------- */
    #comptage{
    padding: 0.5em;
    }
    .counter {
        background-color:#f5f5f5;
        padding: 20px 0;
        border-radius: 5px;
    }
    
    .count-title {
        font-size: 40px;
        font-weight: normal;
        margin-top: 10px;
        margin-bottom: 0;
        text-align: center;
    }
    
    .count-text {
        font-size: 13px;
        font-weight: normal;
        margin-top: 10px;
        margin-bottom: 0;
        text-align: center;
    }
    
    .fa-2x {
        margin: 0 auto;
        float: none;
        display: table;
        color: var(--jaune);
    }
    
    .col{
        position: relative;
        width:100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
        flex-basis:0;
        flex-grow:1;
        max-width: 100%;
    }
    
    .rowb{
        display: flex;
        flex-wrap: wrap;
        margin-left: -15px;
        margin-right: -15px;
    }
    .containerB{
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        margin-left: auto;
        margin-right: auto;
    }

  .divconnexionOrdi{display: none};
    
}