@charset "UTF-8";
/**
 *    Ideal resolution: 1280 * 960 pixels
 */
    *   {
      /* pour maîtriser width et flex-basis */
        box-sizing: border-box;
    }
    html    {
        display: flex;
        /* correction bug IE de min-height non appliqué à body */
        flex-direction: column;
        /*overflow: auto ; /* auto; */ 
        overflow-y: auto;
    }   
    div {
	 /*background-color:#FFFFFF;*/  
    }
    ul {
	list-style:none;
    }
    /**/
    body {
        /* crée un contexte flex pour ses enfants */
        display: flex;
        /* affichage vertical */
        flex-direction: column;
        /*toute la hauteur du viewport*/
        min-height: 100vh;
		/*overflow:hidden;*/
    }
	/* configuration du header */
    header {
        display:flex;
        flex-wrap: wrap;
        width : 80vw;
        max-width : 80vw;
        margin:1em auto;
	}	  
    header > .logo {
	display : flex;
        justify-content: center;
        align-items: center;
	width : 60vw;
	max-width:60vw;
        /*border: 1px solid white;*/
    }
    header > .logo > img {
        display: flex;
        /*border: 1px solid red;*/
        width : calc(60vw - 0.5em);
        max-width : calc(60vw - 0.5em);
    }
    header > div {
	display:flex;
	width : 20vw;
        flex-wrap: wrap;
	/*flex-direction :  column*/
	/*justify-content:  /**center; /* alignement selon le flex-direction */
 	/*align-items: flex-end;  /* alignement transversal axe secondaire */
        /*border : 1px solid white;*/
    }
    header > div > .b2bLogged {
        display:flex;
        width :20vw;
        max-width :20vw;
        flex-direction: column;
        align-items: flex-end;
    }
    
    header > div > .b2bLogin {
        display: flex;
        order : 1;
        margin-top: 0.5em;
        width:20vw;
        min-width: 20vw;
        min-height :5vw;
        justify-content:space-around; /*center*/
        align-items: center;
        border : 1px solid black;
        background-color: rgba(0,0,0,0.2);
	border-radius: 6px;
    }
    header > div > .b2bLogin > div {
        display:flex;
        width:14vw;
        justify-content: center;
        font-size: 1.4em;
        /*border : 1px solid white;*/
    }
     
    header > div > .b2bLogin > a {
        display : flex; 
        width:7vw;
     }    
   
    header > div > .b2bLogin > a > img {
        max-width: 5vw;
        padding: 0.5em;
       /*border : 1px solid white;*/
    }
       
    .b2bLogged > .iconRow {
        display : flex;
        width :20vw;
        max-width :20vw;
        justify-content: space-around; /* space-evenly;*/
    }
    .b2bLogged > .iconRow > a > img {
        display :flex;
        width : 3.5vw;
    }
    .b2bLogged > .countItems,.b2bLogged > .countTotal  {
        display: flex;
        width :20vw;
        justify-content: center;
    }
    header > div > .flag {
        display : flex;
        width:20vw;
        flex-direction: row;
        justify-content: space-around;
        /*border: 1px solid white;*/
    }
    header > div > .flagFr  {
        display : flex;
        order :2;
        width:10vw;
        max-width:10vw;   
        justify-content: center;
        align-items:center;
    }
    header > div > .flagEn  {
        display : flex;
        order :3;
        width:10vw;
        max-width:10vw;
        justify-content: center;
        align-items:center;
    }
    header > div > .flagFr > a > img, header > div > .flagEn > a > img {
        display : block;
        width : 3vw;
        max-width:3vw;
    }
    header > div > .socialLink > a > img {
	display : block;
        width: 3vw;
    }
    /**********  configuration du menu *****************/
    .menuUp {
	display: flex;
	width : 80vw;
        justify-content: space-between;
        margin : 0.5em auto;
        /*border : 1px solid black;*/
    }
    .banner {
	display: flex;
	width : 100vw;
        max-width : 100vw;
	height: 40vw;
    }
    .banner img {
        width : 100vw;
        max-width : 100vw;
    }
    /* bloc de contenu pour par index, result, sauf product */
    .wrapper {
    display: flex;
    flex: 1 1 auto ; /* 1 1 auto */   
    flex-direction: row;
    width : calc(80vw - 2px);
    min-height: 0;
    margin:auto;
    }
     /* message de recherche invalide */
    .dispMessage {
    display : flex;
    width: 60vw;
    padding : 3em 8em;
    }
    /* *************************** page resultats ******************** */
    .content {
        display: flex;
        flex-flow: row wrap;
        width: 60vw;
        justify-content:flex-start;
        align-content : flex-start;/* aligne vers le haut les items. */
    }
    .content-item {
        display: flex; /* : block IE fix */
        flex-direction: column;
        /*calcul de la largeur de chaque item en fonction du nombre d'image */
        width: calc(60vw * 1 / 3 - 1em );
        height : calc(23vw + 4.3em); 
        margin:0.5em 0 0.5em 0.7em;
        box-shadow: 0 4px 4px black;
    }
    .content-item > a > .urlImg {
        display: flex;
	flex : 1;
	max-width: calc(60vw * 1 / 3 - 1em );
	height:20vw;
	justify-content: center;
	align-items: center;
	padding : 0px;
	margin:0px;
    }
    .content-item > a > .urlImg > img {
	display:block;
	/*width: 16vw;*/
	max-width:16vw;
        max-height:18vw;
	min-height:0px;
	min-width:0px;
        /*border:1px solid red;*/
    }
    .content-item > a > .ref {	  
	display:flex;
	justify-content: flex-start;
	align-items: center;
	padding-left : 1em;
	height : 1.8em;
	border-top:#333333 solid 1px;
    }
    .content-item > a > .lib {
	display:flex;
	height : 2.5em;
	justify-content: center;
	align-items: center;
	text-align:center;
	padding : 0em 0.5em;
    }
    .content-item > .pps {
	display:flex;
        /*width: calc(60vw * 1 / 3 - 1em );*/
	/*flex:1;*/
	flex-direction: row ;
        justify-content: center;
	/*height :3vw;*/
    }
    .content-item > .pps > .prix {
	display: flex;
	height :3vw;
	align-items: center;
        padding-left:0.2em;
	/*justify-content: center;*/
    }
    .content-item > .pps > .panier {
	display: flex;
	flex : 1;
	height :3vw;
	justify-content: center;
	align-items: center;
    }
    .content-item > .pps > .panier > a > img {
        display : block;
	max-height : 2.6vw;
    }
    .content-item > .pps > .stock {
        display: flex;
	/*flex:1;*/
	height :3vw;
	justify-content: center;
	align-items: center;
    }
    .content-item > .pps > .stock > img {
        display: block;
	max-height :3vw;
    }
    /* ************************* affichage des url pages ************** */
    .pagination {
	display:flex;
        flex:1;
        width : 60vw;
	justify-content: center; /*alignement selon l'axe principal */
        padding: 1em;
	/*align-items: center;*/
	/*border : green solid 1px;*/
    }
    .pagination > a, .pagination > span {
        padding : 0 0.3em;
    }
    
    /* **************** affichage du noresult ******************* */
    .content-message {
        display: flex;
        justify-content : center;
        align-items : flex-start ;
        padding : 0.5em;
        margin:0.5em 2em;
        width: 56vw;
        /*font: normal 18px/1.5 "Fira Sans", "Helvetica Neue", sans-serif;*/       
    }
    .content-message > p {
        padding : 2em 5em;
        color : white;
    }
    /* *********************** page article ou produit ***************** */
    .wrap {
    /* crée un contexte flex pour ses enfants */
        display: flex;
     	/*flex: 1 1 auto ;*/
        flex:1;
	width : 100vw;
        /*min-height: 0;*/
	/*min-height:60vw;*/
        margin:auto;
	border : 1px solid black;
    }
    /********* partie gauche contenant la photo principale et les vignettes ...  ********/
    .wrapleft {
	 display : flex;
	 flex-direction: column;
	 justify-content:space-around ; /* center ; /* affichage de la photo au centre */
	 width : 50vw;
	 min-height:44vw;
	 }
    .wrapleft > .mainImg {
	display:flex;
	min-height: 44vw;	
	justify-content: center;
	align-items: center;
	/*border : blue solid 1px;*/
    }
    .wrapleft > .mainImg > img {
	display:block;
	max-height: 32vw;
        max-width: 48vw;
	min-height:0vw;
	min-width:0vw;
        
	/*border : red solid 1px;*/
    }
    .wrapleft > .thumbImg {
	display:flex;
	max-width:50vw; 
        max-height: 5vw;
	min-height:0vw;
	border-top : black solid 1px;
	color:#FFFFFF;
	justify-content : center;
	align-items: center;
    }
    .wrapleft > .thumbImg > img {
        display:flex;
        max-width: 5vw;
        max-height : 10vw;
        min-height: 0vw;
        margin : 1em;
        /*border : red 1px solid;*/
    }   
    /********* partie droite contenant libelle, reference, etc....  ********/
    .wrapright {
	 display : flex;
	 flex-wrap:wrap;
	 align-content : flex-start;
	 width : 50vw;
    }
    .wrapright > .back-link {
        display : flex;
        max-width : 5vw;
        justify-content: center;
	align-items: center;
        /*background-color :#00FF99;*/
    }
    .wrapright > .back-link > a > img {
        /*display : flex;*/
        max-width : 3vw;
    }
    .wrapright > .libelle {
	display:flex;
	/*flex-direction: row;*/
	width:45vw;
	justify-content: center;
	align-items: center;
	padding: 1em;
    }
    .wrapright > .col1 {
	display : flex;
	/*flex : 1;*/
	flex-direction : column;
	align-content : flex-start;
	/*width : 35vw;*/
	max-width:35vw;
	border-right : 1px solid black;
	}
    .wrapright > .col1 > .desc {
	display:flex;
	flex-direction : column ;
        width :35vw;
	max-width:35vw;
	justify-content: center;
	padding : 0em 1em;
    }
    /* affichage de la référence dans un encadrement rouge */
    .wrapright > .col2 {
	display : flex;
	width : calc(15vw - 1em);
	max-width:calc(15vw - 1em);
	flex-flow : row wrap;
        align-content: flex-start;
        justify-content: space-around;
    }
    .wrapright > .col2 > .long-element {
        display:flex;
        width: 15vw;
        justify-content: center;
        align-items:flex-start;
        /*border : 1px solid red;*/
    }
    .wrapright > .col2 > .long-element > p:nth-last-of-type {
        border-bottom :  1px solid black;
    }        
    .wrapright > .col2 > .long-element> p {
        display: flex;
        width: 11vw;
        justify-content: center;
    }
    .wrapright > .col2 > .short-element {
        display: flex;
        max-width:8vw;
        align-items: center;
        justify-content: center;
        /*border: green 1px solid;*/
    }
    .wrapright > .col2 > .short-element > a > img {
        width:5vw;
        max-width:5vw;
        /*border: green 1px solid;*/
    }
    .wrapright > .col2 > .short-element> .stock {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-weight: bold;
    }
 
    .wrapright > .col2 > .short-element> .stock > img {
        display:block;
        max-width: 5vw;
    }

/*  fin page product  */

/* menu latéral avec les différents onglets */
    .menuLat {
	display:flex;
	flex : 1; /* 0 0 auto;*/
	flex-direction : column;
	flex-wrap: wrap;
	width: 20vw; 
		/*padding : 0.5em;*/
	justify-content:flex-start;
        align-items: center;
                
      }
    .menuLat .adv-item {
	display : flex;
        flex : 0 0 auto;
	width:calc(20vw - 1em ); 
	margin: 0.5em;
    }
    .menuLat .adv-item a img  {
	width:calc(20vw - 1em );
	border : black solid 1px;
	border-radius: 6px;
    }
	/* fin menu Lateral */
	/* menu pied de page */
    footer {
	display : flex;
	/*flex-direction : row ;*/
	justify-content : center ;
	align-items : center ;
	width : 100vw;
	/*max-height: 10vh; /*12vh;*/		
	margin:auto;
    }
    footer > div {
        display:flex;
	flex-direction : row ;
    }
    footer > div >  .footerMenuList {
	display:flex;
	align-items : center ; /* centrage vertical */
	justify-content : center ; /* centrage horiz */
	width : 20vw; 
	height:50px;
	border-right : white solid 1px;
    }
    footer > div > .footerMenuList:last-child { 
	border-right : none;
    }
    /* ------------------------ page loading ---------------------------------*/    
    #loader
    {
	position:absolute;
	top:100px;
	width:1008px;
	height :800px;
	z-index: 10;
	visibility: hidden;
	text-align:center;
    }
    .LoadInf
    {
	border:#666666 20px solid;
    }
    .vide
    {
	filter :alpha(opacity=80);
	opacity:0.8;
	background-color:#000000;
	z-index:11;
    }
    
/*------------------------ media-queries ----------------------*/
    @media screen and (min-width: 1200px) {
    /* Decoration */
	body {
            margin: 0;
            background: #999;
            /*font-family: sans-serif, arial ;*/
            font-size:1.1em; /* 1.2*/
        }
    }
    @media screen and (max-width: 1024px) {
	/* Decoration */
	body {
        margin: 0;
        /*background:#00FF33; /*vert pomme */
        /*font-family: arial, sans-serif;*/
	font-size:0.8em;
        }
    }
    @media screen and (max-width: 960px) {
	/* Decoration */
	body {
        margin: 0;
        /*background:#00FF33;*/
        /*font-family: arial, sans-serif;*/
	font-size:0.8em;
    }
    /* configuration du header */
	header {
            width : 100vw;
            max-width : 100vw;
	}
	header > .logo {
            width : 75vw;
            max-width: 75vw;
	}
        header > .logo > img {
            width : calc(75vw - 0.5em);
            max-width : calc(75vw - 0.5em);
    }
	header > div {
            width : 25vw;
	}
         header > div > .b2bLogin, header > div > .b2bLogged { 
            width :25vw;
            max-width :25vw;
        } 
	header > div > img {
            /*width : 75vw;/*/
	}
         header > div > .flag {
            width:25vw;
        }
        header > div > .flag > a > img {
            width : 3.5vw;
            max-width: 3.5vw;
        }
        .b2bLogged > .iconRow {
            width :25vw;
            max-width :25vw;
        }
        .b2bLogged > .countItems,.b2bLogged > .countTotal  {    
            width :25vw;
        }
        
	/* config du menu */
	.menuUp {
            width :100vw;
	}
	.banner {
            background:#00FF99;
        }
        /* ******************** page resultat ***************** */	
	.content {
            width: 70vw;
        }
	.content-item {
            /*calcul de la largeur de chaque item en fonction du nombre d'image : 3 images */
            width: calc(70vw * 1 / 3 - 1em );
            height : calc(23vw + 4.3em); /*30vw;*/
            margin-bottom: 0.5em;
	}
	.content-item > a > .urlImg {
            max-width: calc(70vw * 1 / 3 - 1em ); 
            height:20vw;
	}
	.content-item > a >.urlImg > img {
            display:block;
            /*width: 20vw;*/
            max-width: 20vw ;	
	}
	.content-item > a > .ref {
            height : 1.8em;
            padding-left : 1em;
	}
	.content-item > a > .lib {
            height : 2.5em;
            padding : 0em 0.5em;
	}
	.content-item > .pps {
            height : 3vw;
	}
/* *********************** page article ou produit ***************** */
	.wrap {
            /* crée un contexte flex pour ses enfants */
            display: flex;
            /*flex : 0;*/
            flex-direction : column;
            width : 100vw;
            /*justify-content : center; /* alignement horizontal centré */
            align-items : center;
            /*align-items: center;*/
	}
/* *********************** page article ou produit ***************** */
	.wrapper {
            width : 100vw;
            /*padding:1em;*/
            min-height : 80vw;
	}
	/* page produit partie photo **/
	.wrapleft {
	 width : 80vw;
	}
	.wrapleft > .mainImg {
            width:80vw;
            min-height : 55vw;
	}
	.wrapleft > .mainImg > img {
            width:50vw;
            max-width:50vw;
            max-height: inherit;
            /*min-height:0px;
            min-width:0px;*/
	}
	.wrapleft > .thumbImg {
            width:80vw;
            max-width:80vw; /*100%*/
            max-height:10vw;
            min-height:0vw; /*10vw;*/
            border-top: 1px solid black;
	}
	.wrapleft > .thumbImg > img {
            width:8vw;
            max-width:10vw;
            min-height:0vw;
            min-width:0vw;
	}
        
	/*partie droite produit */
	.wrapright {
            display : flex;
            width : 80vw;
            border-right : 1px solid black;
            border-top :1px solid black;
            box-shadow: 0px 3px 3px black;
	}
        .wrapright > .back-link > a > img {
            width : 6vw;
            max-width : 6vw;
        }
        .wrapright > .libelle {
            width: 73vw;
            /*box-shadow: 0px 3px 3px black;*/
	}
	.wrapright > .col1 {
            display : flex;
            width : 55vw; /*calc(50vw - 5px);*/
            max-width : 55vw; /*calc(55vw - 5px);*/
	}
	.wrapright > .col1 > .desc {
            display:flex;
            /*flex:0;*/
            width: 54vw;
            max-width:54vw;
            justify-content:flex-end;
            /*align-items: center;*/
            padding : 1em;
            /*border : black solid 1px;*/
	}
        .wrapright > .col1 > .desc > p {
            /*border-right : black solid 1px;*/
	}
        .wrapright > .col2 {
            /*display : flex;*/
            width : 25vw; /* calc(26vw - 1em);*/
            max-width:25vw;
            /*flex-flow : row wrap;
            justify-content: space-around;*/
        }
        .wrapright > .col2 > .long-element {
            width: 25vw;
            /*border : 1px solid blue;*/
        } 
            .wrapright > .col2 > .long-element> p {
            width: 20vw;
        }
        .wrapright > .col2 > .short-element {
            max-width:14vw;
            /*border: 1px solid blueviolet;*/
        }
        .wrapright > .col2 > .short-element > a > img {
            width:9vw;
            max-width:9vw;
            /*border: green 1px solid;*/
        }
        .wrapright > .col2 > .short-element> .stock {
            /*display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-weight: bold;*/
        }
 
        .wrapright > .col2 > .short-element> .stock > img {
            max-width: 10vw;
        }
/* ****************** fin de la page produit ***************** */
	.menuLat {
            width:30vw; 
      	}
	.menuLat .adv-item {	
		width:calc(30vw - 1em );
        }
	.menuLat .adv-item a img {	
		width:calc(30vw - 1em );
	}
	
    }    
    
    @media screen and (max-width: 720px) {
	body {
            font-size:0.8em;
        }
	.menuUp {
            width : 100vw;
	}
	.banner {
            display :none;
	}
	/* ****************** debut de la page resultat ***************** */
	.content {
            width: 70vw;
    	}
	.content-item {
            /*calcul de la largeur de chaque item en fonction du nombre d'image : 2 images */
            width: calc(70vw * 1 / 2 - 1em );
            height : calc(42vw + 4.3em) ; /* egal a 32 + 9 */
            /*margin-right: 1em;*/
            margin-bottom: 0.5em;
	}
	.content-item > a > .urlImg {
            max-width: calc(70vw * 1 / 2 - 1em ); 
            height:38vw;
	}
	.content-item > a > .urlImg > img {
            /*width: 31vw;*/
            max-width: 34vw ;
            max-height:26vw;
	}
	.content-item > a > .ref {
            height : 1.8em;
	}
	.content-item > a > .lib {
            height : 2.5em;
            padding : 0em 0.5em;
	}
	.content-item > .pps {
            height : 4vw;
	}
        
	.content-item > .pps > .prix, .content-item > .pps > .stock,.content-item > .pps > .panier {
            height :4vw;
	}
        .content-item > .pps > .panier > a > img {
            max-height :3.5vw;
	}  
	.content-item > .pps > .stock > img {
            max-height :4vw;
	}  
	/* ****************** fin de la page produit ***************** */  
	.wrapleft > .mainImg {
            width:80vw;
            min-height : 70vw;
	}
	.wrapleft > .mainImg > img {
            width:70vw;
            max-width:70vw;
	}
	/* ****************** fin de la page resultat ***************** */
        .adv
      	{
            width:30vw; 
	/*justify-content:flex-;*/
        /*width: 30vw; /*20vw;*/
      	}
	.adv .adv-item
      	{	
            width:calc(30vw - 1em );
            height:15vw;
	}
        /* Responsive (fenêtres de moins de 640px) */
	/* le menu onglet disparait et le moteur de recherche prend la largeur de l'ecran */
	.wrapright > .libelle {
            /*background-color:#FFFF00 ; /*** vert pomme */
        }
    }
    @media screen and (max-width: 640px) {
	body {
            margin: 0;
            background: #999;
            /*font-family: arial, sans-serif;*/
            font-size:0.8em;
        }
	/* configuration du header */
	header {
            width : 100vw;
	}
        header > .logo {
            width : 100vw;
            min-width: 100vw;
	}
        header > .logo > img {
            width : 94vw;
            max-width : 94vw;
        }
	header > div {
            width : 100vw;
            flex-wrap:nowrap;
            justify-content: space-around ; 
	}
        
        
        header > div > .b2bLogin, header > div > .b2bLogged {
            /*display: none ;*/
            width :40vw;
            order:2;
            max-width :40vw;
            flex-direction: column;
            align-items: center;
            margin-top: 0px;
        }
        header > div > .b2bLogin > div  {
            min-width: 20vw;
            min-height: 10vw;
        }
        header > div > .flag {
           display :flex;
            width:100vw;
        }
        header > div > .flagFr  {
            order :1;
            width:30vw;
            max-width:30vw;   
        }
        header > div > .flagEn  {
            order :3;
            width:30vw;
            max-width:30vw;
        }
        header > div > .flagFr > a > img, header > div > .flagEn > a > img {
            width : 15vw;
            max-width: 15vw;
        }
        .b2bLogged > .iconRow {
            width :100vw;
            max-width :100vw;
            padding-top: 1em;
        }
        .b2bLogged > .iconRow > a > img {
            display :flex;
            width : 12vw;
    }
        .b2bLogged > .countItems,.b2bLogged > .countTotal  {    
            width :100vw;
        }
	/* config du menuup */
	.menuUp {
            width : 96vw; /*90vw;*/
            max-height : 46px; /*48px*/
            margin:auto;
            border : 1px solid green;
            /*background:#00FFFF; /* bleu ciel */
	}
	.wrapper {
            flex: 1 1 auto ;
            display: flex;
            flex-direction:column;
	}
	 /* ******************** page resultat*********************** */
	.content {
            width: 100vw;
	}
	.content-item {
	/*calcul de la largeur de chaque item en fonction du nombre d'image : 2 images */
            width: calc(100vw * 1 / 2 - 1em );
            height : calc(59vw + 4.3em) ;
	/*margin-right: 1em;*/
            margin-bottom: 0.5em;
        }
	.content-item > a > .urlImg {
            max-width: calc(100vw * 1 / 2 - 1em );
            height : 50vw ;
	 }
	 .content-item > a > .urlImg > img {
            max-width:44vw;
            max-height:30vw;
	 }
	.content-item > a > .ref {
            height : 1.8em;
	 }
	.content-item > a > .lib {
            height : 2.5em;
	}  
        
	.content-item > .pps,.content-item > .pps > .prix, .content-item > .pps > .stock, .content-item > .pps > .panier {
            height : 9vw;
	} 
	.content-item > .pps > .stock > img {
            display: flex;
            max-height :8vw;
	}
        .content-item > .pps > .panier {
            max-width: 28vw;
        }
        
        .content-item > .pps > .panier > a > img {
            /*display: flex;*/
            max-height: 7vw;
        }

/***********page produit **************/
	.wrapright {
            display : flex;
            flex-wrap:wrap;
            align-content : flex-start;
            /*flex-direction : column;*/
            box-shadow: 0px 3px 3px black;
	}
	.wrapright > .libelle {
            /*background-color:#00FF00 ; /*** vert pomme */
	}
	.wrapright > .col1 {
            display : flex;
            width : 80vw;
            max-width:80vw;            
	}
	.wrapright > .col1 > .desc {
            display:flex;
            width:80vw;
            max-width: 80vw;
            justify-content: center;
            padding : 1em;
	}
	.wrapright > .col2 {
            display : flex;
            /*flex: 1;*/
            width : 80vw;
            max-width:80vw;
	}
        .wrapright > .col2 > .reference {
            width:40vw;
            justify-content: center;
            align-items:flex-start;
	}
         .wrapright > .col2 > .stock {
            width:13.33vw;
        }
        .wrapright > .col2 > .stock > img {
            width : 12vw;
        }
        .wrapright > .col2 > .prixHT {
            width:13.33vw;
        }
        .wrapright > .col2 > .panier {
            width:13vw;
            max-width:13.33vw;
        }
         .wrapright > .col2 > .panier > a > img {
            width:12vw;
            max-width:12vw;
        }
        /******************* fin de la page produit ***************** */
	.menuLat {
            display:flex;
            flex: 0 0 auto;
            /*flex : 1;*/
            flex-wrap:nowrap;
            /*flex-direction : column;*/
            justify-content:flex-start;
            width:100vw; 
            align-items:center;
        }
	.menuLat .adv-item {	
            width:80vw;
	}
	.menuLat .adv-item a img {
            width:80vw;
	}
	/* config footer */
	footer {
            /*height : 16vh; /*12vh;*/
            max-height: 20vh;
	}
	footer > div {
            flex-direction : column ;
	}
	footer > div >  .footerMenuList {
            width : 40vw;
            height: 2em;
            border: none;
	}
    }  
    @media screen and (max-width: 420px) {
	/*.content {
            width: 100vw;
            flex-flow: column;
            align-content : center;
            justify-content: center;
            margin:auto;
            border : 1px solid black;
	}
	.content-item {
            /*calcul de la largeur de chaque item en fonction du nombre d'image :  1 image */
/*          width: 80vw;
            height : 100vw ;
            margin:inherit;
            margin-top : 0.5em;
            margin-bottom: 0.5em;
	}
	.content-item > a > .urlImg  {
	  width: 80vw; 
	  height: 76vw;
	  max-height:76vw ;
	}
	 .content-item > a > .urlImg > img {
            width: 74vw;
            max-width: 74vw ;
	}
        .content-item > a > .ref,  .content-item > a > .lib {
            height : 8vw;
            padding-left : 1em;
            font-size:1em;
	}
	.pps, .pps > .stock {
            height : 8vw;
	} 
	.pps > .stock > img {
            display: block;
            height :8vw;
	}*/
	 /***********page produit **************/
	/*.wrapright {
            display : flex;
            flex-direction : column;
	}*/
	.wrapright > .col1 {
            display : flex;
            /*flex : 1;
            flex-direction : column;
            align-content : flex-start;*/
            width : 80vw;
            max-width:80vw;
            border-right : 1px solid black;
            /*border:1px solid green;*/
	}
        .wrapright > .col1 > .desc {
            max-width:80vw;
        }
        .wrapright > .col2 > .short-element > a > img {
            width: 12vw; 
            max-width:12vw;
            /*border: green 1px solid;*/
        }
    }
    @media screen and (max-width: 320px) {
	

    }
/*************** Decoration *******************************/
    /*@import url(http://fonts.googleapis.com/css?family=Kalam);*/
    body {
	/*background-image:url(../images/decoration/fondTornado_400.jpg);*/
        background: url('../images/decoration/fondTornado_400.jpg') center fixed;
        /*background-size: cover;*/
	font: normal 1.15em "Fira Sans", "Helvetica Neue", sans-serif; /*normal 18px/1.5*/
	/*background-image:linear-gradient(white, black);
	background-image:linear-gradient(#f6391e, white);*/
    }
    header,
    footer {
        border-radius: 6px;
    }
    a {
        text-decoration : none;
	border: none;
	color: #FFFFFF;
    }
    header {
	  	/*background-color: rgba(0,0,0,0.1);*/
    }
    header > div > .flag {
        /* background-color :rgba(255,255,255,0.8); blanc */
        /*background-color :rgba(0,0,0,0.3);*/
        border-radius: 6px;
    }
    .menuUp {
        /*background:#0033FF;*/
    }
    .nav {
	/*background:#FF3333 ;*/
    }
    engSearch {
		/*background:#FFFF00;*/
    }
    .banner {
        background:#993300;
    }
    .wrapper {
	border-radius: 6px;
	border:rgba(0,0,0,0.2) 1px solid;
	/*background-color: rgba(0,0,0,0.6);*/
	/*background-color:#000000
	opacity : 0.85;*/
    }
    .wrapleft {
	background:#000000;
        background-color: rgba(0,0,0,0.90); 
    }
    .wrapright {
	background:#FFFFFF;
    }
    .wrapright > .col1 > .desc > p {

    }
    .wrapright > .libelle {
        font-size: 1.3em;
    }
    
    .wrapright > .col2 > .long-element >.ref {
        padding : 0.5em 1em;
	background-color: #dd0f19;
        border-radius : 4px;
	font-size: 1.3em;
	/*font-weight:bold;*/
    }
    .wrapright > .col2 > .long-element > .prix {
        padding : 0.5em 1em;
	background-color:#999;
        border-radius : 4px;
	font-size: 1.2em;
    }
    
    /* ************************* page resultat **********************/
    .content {
    }
    .content-item {
        color:#FFFFFF;
	/*background:#FFFFFF; /* noir 	#333333; /*#FF99FF;*/
	/*border:#333333 solid 1px;*/
	background-color : black; 	 
	/*background-color: rgba(0,0,0,0.85);*/
	/*background-color: rgba(245,245,245,1); /*(241,142,0, orange tornado  221,15,25 : rouge)
	/*background-color: rgba(0, 0, 255, 0.5); /* un arrière plan bleu à 50% de transparence */
	/*filter : grayscale(0.5); /*alpha(opacity=50); */
	/*-webkit-filter : grayscale(0.5);
	/*opacity:0.9;*/
	border-radius: 6px;
    }
    .content-item > a {
	color:#FFFFFF;
    }
    .content-item:hover {
	   /*background-color: rgba(0,0,0,0.9);*/
    }   
    .content-item > a > .ref, .content-item > a > .lib {
        background-color : black; 
    }
    .content-item > a > .ref {
        color:#FF3300 ;
    }
    .pps { 
	background-color :rgba(255,255,255,0.8); /* white;*/
	border-radius: 0px 0px 6px 6px;
	border:black solid 1px;
    }
     .content-item > .pps > .prix {
         color:black;
    }   
    .contentProduct, .product {
        background:#00FFCC;
    }
    .content-message {
        border : 1px black solid; 
	border-radius: 5px;
	background-color: rgba(0,0,0,0.3);
    }
    .content-message > p {
        border-radius: 5px;
	background-color: #000000;
    }
    .menuLat {
        /*background: #dd8; couleur vert clair*/
    }
    .adv-item {
        border-radius: 6px;
        background-color: rgba(0,0,0,0.3);
    }
    footer {
        background-color: rgba(0,0,0,0.90);  /* gris souris #feb; */
        color: #FFFFFF;	
    }
    /* mise en place d'un surlignement des liens du menu inferieur
        utilisation d'un gradient lineaire
    
    */
    footer > div >  .footerMenuList > a {
        background:linear-gradient(to top,rgba(255,0,0,0.5)0%, rgba(255,0,0,0.5) 10%, transparent 10.01%) no-repeat;
        background-size: 0 100%; /* 0 en largeur et 100% en hauteur */ 
        transition : background-size .3s;
        -ms-transition: background-size .3s;
    }
    footer > div >  .footerMenuList > a:hover {
        background-size: 100% 100%; /* 0 en largeur et 100% en hauteur */ 
    }
    
    
    
    
@media screen and (max-width: 1500px) {
    body {
        font: normal 1.05em "Fira Sans", "Helvetica Neue", sans-serif;
    }	
}
@media screen and (max-width: 1300px) {
    body {
        font: normal 1em "Fira Sans", "Helvetica Neue", sans-serif;
    }	
}
@media screen and (max-width: 1160px) {
    body {
        font: normal 0.95em "Fira Sans", "Helvetica Neue", sans-serif;
    }	
}
@media screen and (max-width: 1024px) {
    body {
        font: normal 0.90em "Fira Sans", "Helvetica Neue", sans-serif;
    }	
}
@media screen and (max-width: 960px) {
    body {
        background-image:url(../images/decoration/fondTornado_400.jpg);
        font: normal 0.85em "Fira Sans", "Helvetica Neue", sans-serif;
    }
}	
@media screen and (max-width: 720px) {
    body {
        font: normal 0.85em "Fira Sans", "Helvetica Neue", sans-serif;
    }
}	
@media screen and (max-width: 640px) {
    body {
        background-image:url(../images/decoration/fondTornado_400.jpg);
        font: normal 0.95em "Fira Sans", "Helvetica Neue", sans-serif;
    }
}
@media screen and (min-width: 421px) {
}
@media screen and (max-width: 420px) {
    .wrapright > .libelle {
	font-size: 1.4em;	
    } 
    .wrapright > .col2 > .reference > p {
        font-size: 1.2em;
    }
}
@media screen and (max-width: 320px) {
    .content .content-item img.article-image {
        display: none;
    }
}