@charset "UTF-8";
#zoneArticleInfoContenant { /*zone contenant les infos detaillées d'un article (quand clic sur +info)*/
	text-align:left;
}
#zoneArticleInfoContenu .txtBloc { /* pour +info (en +) */
	font-size:0.9em;
    line-height: 1.3em;/*mars2019*/
}
.unTableau .txtBloc { /* pour +info (en +) */
	font-size:1em; margin: 0 2px;
}
.unTableau .txtBloc span { /* pour +info (en +) */
	font-size:0.8em; vertical-align: text-bottom;
}


.articles li.article
, .articles li.offre
,.articles li.SS
{
    list-style-type:none;
}

.articles li.article { /* bloc affichant un article*/
	padding:4px;
	background-color: #DDD;
	position: relative; /* permet de placer son contenu (ex: les boutons) en absolute */
	-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;

	float: left; display: block;
	/*height: 10px; quasi-idem que dans #listeArticles a*/
	overflow: hidden;
	width: 302px;	height: 167px;  /*si modif ici, alors modifier aussi dans body#pageLA.pageArticlesRCH .articles li.article.articleActif.dansBandeau */
	text-align: left;
	/*line-height: 1em; reduit interligne legende (en plus de ci-dessous)*/
	margin: 3px 3px; /*petite marge vide entre chaque bloc d'article*/
	border: 2px solid transparent;

    /*mai2018 : bloc + proche et rectangulaire :*/
    margin: 1px 0 0 1px;
    border-radius: 0px;
}
.articles li.article.nosReco { /* article de Nos Recommandations (2x2) - 03/12/2024 */
  width: 604px; /* 302x2 */
  height: 334px; /* 167x2 */
  margin: 1px 1px 1px 1px; /*marge de 1 px tout autour pour doubler celle-ci*/
}
.accueil .articles li.article { /*idem mais poru page accueil*/
	/*height: 122px;*/height: auto;/*moins haut car pas de prix sur accueil*/
}
.articles li.article:hover { /* changement d'apparence au survol */
	/*background-color: #bfedfb !important;*/ /* #bfedfb = bleu ciel clair (ex: survol article) */
    /*background-color: #e5f7fb !important;*/ /*mai2018 : si zoom au survol article (bleu encore + clair)*/
	/*border-color: #00b9f0  !important;*/
}
.articles li.offre { /*sept2014: ex: offre Demoniac*/
	width: 99%; /* width:100%; */
	/* max-height: 300px; */
	/*height: 100%;*//*OFF mai2018: pas utile et passe par-dessus sous-section choix lentilles couleur*/clear: both;

	padding: 0px;/* padding-right: 13px; */
	/* background-color: red  !important; */
	/*background-color: initial !important;*/
	background-color: #000 !important;/*fond noir pour demoniac*/
	box-shadow:none !important;
	border-width: 0px;
	float: none;/*evite espace en-dessous si moins haut qu'un bloc article (car autre article en bout avec largeur a 0 mais toujours existant)*/
	text-align:center;

    opacity: 0.9;
    /*animation:*/
    /*transition: opacity 0.3s , transform 0.3s ease-out ;*/
}
.articles li.offre:hover
{	opacity: 1; /*pour opacifier au survol si transparent car indispo normalement*/
    /*transform: rotate(-0.5deg) ;*/
  /*transform: scale(1.01);*//*zomm au durvol amis pas ok, car si bandeau ne fait rien au clic, l'effet grossissant fait croire que ça va faire quelque-chose => pas bien*/
}

/*2e type offre (ex: revendeur queen, demoniac :*/
.articles li.offre.typeRevendeur
{   background-color:initial !important;
    padding: 1em 0;
}
.articles li.offre.typeRevendeur .zoneClic {
   /*ex: background-image: url('/images/commun/fond-Demoniac-01.jpg?20180529');*/
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 900px;
   /* min-width: 611px;  OFF 28/07/2021 correction pour support mobile (évite erreur Google)*/
    padding: 1em 0.5em;
    display: inline-block;
    color: #FFF;
    transition: transform 0.2s;
}
.articles li.offre.typeRevendeur .zoneClic .txt1 {
    font-size: 1.2em;
    line-height: 1.2em;
}
.articles li.offre.typeRevendeur .zoneClic .siteWeb
{   transition: font-size 0.4s;
    display: block;
    font-weight: bold;
}

.articles li.offre.typeRevendeur .zoneClic .txtMentions {
    font-size: 0.8em;
    padding-top: 0.6em;
}
.articles li.offre.typeRevendeur:hover
{	opacity: 1;
    cursor: default;
}
.articles li.offre.typeRevendeur .zoneClic:hover
{   cursor: pointer;
    transform: rotate(-0.5deg) ;
}
.articles li.offre.typeRevendeur .zoneClic:hover .siteWeb
{    font-size: 1.30em;
}

.zoneClic.rotationLegereAuSurvol {
  background-color:initial !important;
  display: inline-block;
  transition: transform 0.2s;
  padding: 0;
}
.zoneClic.rotationLegereAuSurvol:hover {
  transform: rotate(-0.5deg) ;
}



.articles li.selecteurLentillesLCR
, .articles li.selecteur_choixPackArticles
{

    /*flex:*/
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    /*aligment horizontal écartement avec marge aux extremites. element seuls sur derniere ligne : centré mais peuvent être assez éloigné l'un de l'autre*/
    /*aligment horizontal écartement entre element toujorus idem, element seuls sur derniere ligne : centré masi pas trop éloigné l'un de l'autre*/
    /*justify-content: safe center;*/
    flex-wrap: wrap;
    /*permet aux element du contenu d'aller a la ligne*/
    line-height: 0em;
    /*sinon marge en bas de bloc (changer alors interligne pour zone info)*/
    width: 100%;/*aout2020: pour zone choixPackArticles pleine largeur*/
    /*pour animation*/
    transition-property: width , font-size;
    transition-duration: 0.15s;
    float: left;/*evite de laisser une zone vide quand à 0% de large*/
    XXXpadding: 0 8%;
    margin-top: 10px; /*marge au-dessus pour pouvoir zoomer le bloc un peu + sans passer par dessus éléments qui sont au-dessus*/
    margin-bottom: 10px; /*marge en-dessous pour pouvoir zoomer le bloc un peu + sans passer par dessus éléments qui sont en-dessous*/
}
body.pageArticlesLCR .articles li.selecteurLentillesLCR
, body.pageArticlesLCR .articles li.selecteur_choixPackArticles
{
    /* si on décide de ne pas masquer la zone des sous-section une fois choisi une sous-section (sinon adapter script clicSousSection et clicSousSection2 pour ne pas défiler).
    Mis dans cette classe spéciale car il faut bien que les SS soient masquée si autre section de lentille.
    Donc, cette classe est de plus haut niveau et prendra le dessus sur la calsse  .articles li.selecteurLentillesLCR.articleInactif  (donc pas besoin de mettre !important ici)
    */
    width: 100%;
    height: auto;
    /*padding: 0 8%;*/
    font-size: initial;
    margin-top: 10px; /*marge au-dessus pour pouvoir zoomer le bloc un peu + sans passer par dessus éléments qui sont au-dessus*/
    margin-bottom: 10px; /*marge en-dessous pour pouvoir zoomer le bloc un peu + sans passer par dessus éléments qui sont en-dessous*/

}

.articles .selecteurLentillesLCR .blocNouveau { /*masqué par défaut. ce bloc nouveau (au-dessus de l'encart des Desìo) sinon reste une bout du bloc vers filtre si on va dan sautre section : bizarre*/
    position: absolute; transform: rotate(-7deg) ; font-size: 1em; margin-left:-15px; margin-top:-27px; z-index: 9999; box-shadow: 0px 0px 18px rgba(182, 91, 22, 1); text-transform: uppercase;
    display:none; /*masqué par défaut*/
}
.pageArticlesLCR .articles li.selecteurLentillesLCR .blocNouveau {
    display:inline-block;/*affiché si section Lentille de couleur*/
}
.pageArticlesLCR .articles li.selecteurLentillesLCR .blocNouveau.sur1reLettre {
  font-size: 0.7em;
  margin-left: 10px;
  margin-top: -7px;
}
.articles .selecteurLentillesLCR .SS
, .articles .selecteur_choixPackArticles .SS
{
    white-space: normal;
    line-height: 1em;
    /*padding: 6px;*/
    background-color: #444;
    background-repeat: no-repeat;
    /*width: 24%;    /*margin: 4px 4px;*/
    width: 19.7%;    /*margin: 4px 4px;*/
    /*min-width: 150px;*/
    max-width: 250px;
    /*min-width:150px;*/
    padding-top:17px;

    /*overflow: hidden;*/ /*évite que le zoom sur logo ne déborde du bloc*/ /*mais empeche d'avoir picto nouveau qui déborde*/
    position: relative; /*permet de pouvoir postionner des blocs de texte en bas (ex: Demoniac)*/

    /*pour animer bloc SS au survol du bloc*/
    transition-property: transform;
    transition-duration: 0.7s;


    /*au cas où flex pas ok :*/
    min-height: 250px;
    float: left;
}
.articles .selecteurLentillesLCR .SS {
  min-width: 124px;
}
/*correction pour choixPackArticles :*/
.articles .selecteur_choixPackArticles .SS
{
  width: initial;
  background-color: initial;
  max-width: 400px;
  min-height: initial;
  flex: auto;
  padding : 8px;
}
.articles .selecteur_choixPackArticles .SS > div {
  background-image: linear-gradient(20deg, rgba(2, 93, 123, 70%) 0%, rgba(2, 93, 123, 0) 100%);  /*linear-gradient(45deg, #025d7b 0%, rgba(2, 93, 123, 0) 100%);*/
  /*rq: rgba(2, 93, 123, 100%) = #025d7b (bleu sombre)*/
  background-color: #000;
  color: #FFF;
  min-height: initial;
  padding : 8px;
  height: 100%; /*pour occuper même hauteur que autres blocs*/

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  justify-content: space-evenly;

  text-align: center;

  border-radius: 5px;
  /*
  background-image: url('/images/commun/SousSection-Dm.jpg?20180612');
  background-position: bottom left;
  background-size: cover;
  */

  /*mai2021 : si visuel image de fond*/
  /*background-image: url('/images/pack/_1_pack.jpg');*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.articles .selecteur_choixPackArticles .SS:hover > div {
  background-color: #025d7b !important;
  color: #FFF !important;
}
.articles .selecteur_choixPackArticles .SS:hover > div.contourLumineux {
  box-shadow: 0px 0px 10px 5px #FFCC00; /*agrandi contour lumineu*/
}
.articles .selecteur_choixPackArticles:hover .SS > div {
  opacity:1 !important;
}
.articles li.selecteurLentillesLCR .description
{
    padding-left: 1em; padding-right: 1em;
    line-height:1.3em;
}
.articles li.selecteur_choixPackArticles .titre
{
  font-size:1.4em;
  line-height:1.2em;
  margin: 0;
  text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.35), 0px 0px 7px rgba(0, 0, 0, 0.35);
}
.articles li.selecteur_choixPackArticles .description
{
  padding-top: 0.5em;
  font-size:0.8em;
  line-height:1.3em;
  margin: 0;
  text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.6), 0px 0px 7px rgba(0, 0, 0, 0.6);
}

.articles li.selecteurLentillesLCR .SS2 /*ex: bloc QODC dans bloc Queen's */
{
    overflow: hidden; /*évite que le zoom sur visuel ne déborde du bloc SS2*/
    margin-top: 1px;
    line-height: 0;
}
.articles li.selecteurLentillesLCR .SS2 img /*ex: image de ces blocs*/
, .articles li.selecteurLentillesLCR .logo
, .articles li.selecteurLentillesLCR .texte
{   /*animation zoom image*/
    transition-property:		transform ;
    transition-duration:		0.7s ;
}
.articles li.selecteurLentillesLCR .SS:hover /*ex: zoom du bloc SS*/
, .articles li.selecteur_choixPackArticles .SS:hover
{   transform: scale(1.02); /*très légèrement zommé pour montrer que c'est tout cliquable*/
}
.articles li.selecteurLentillesLCR .SS:hover .logo /*ex: zoom du logo au survol du bloc entier*/
{   transform: scale(1.09);
}
.articles li.selecteurLentillesLCR .SS2:hover img /*ex: image de ces blocs*/
{   transform: scale(1.09);
}
.articles li.selecteurLentillesLCR .SS2:hover .texte /*ex: certains textes de ces blocs (ceux à agrandir au survol)*/
{   transform: scale(1.22);
}



/* bandeau Cantor Cosmetic - 11/2022 */
    .articles .selecteurLentillesLCR .SS.encartCantor {
      background-color:#FFF;
      color:#000;
      padding-top:3px;
      width: 100%; max-width: initial; width: 99.7%;
      margin-top: 3px;
      min-height: 100px;
    }
    .encartCantor .partieTitre {
      flex: 1;
      padding: 10px 20px
    }
    .encartCantor .partieTitre .logo {
      width: 100%;
      max-width: 400px;
      height: auto;
      padding: 0px 0px;
    }
    .articles li.selecteurLentillesLCR .encartCantor.SS:hover .logo {
      transform: scale(1.03); /*zoom reduit pour éviter débordement*/
    }
    .encartCantor .partieTitre .description {
      text-align: center;
      margin:0; margin-top:1em
    }

    .encartCantor .partieVisuels {
      flex: 2;
    }
    .encartCantor .zone_infoLentille {
      text-align: center;
      /*flex: 1;  OFF pour eviter que tous ait meme largeur peu importe si 1, 2 ou visuels*/
      margin: auto; /*permet centrage vertical (!! le parent doit avoir pleine hauteur 100%)*/
    }
    .encartCantor .titreVisuel {
      font-size: 0.7em;
      color: #AAA;
      margin-bottom: 0px;
    }
    .encartCantor .visuelLentille {
      width: 70px; /*idem labelNumero*/
      height: 70px;
      display: inline-block;
      background-image: url("/images/lentille-cantor-cosmetic-spherique-aqua-1-c194_2.jpg?i20220919");
      background-size: 76px;
      background-position: center;
      border-radius: 100px;
      background-repeat: no-repeat;
      transform: scale(1);
        /* pour rester en 1er plan (un bug fait qu'un objet utilisant transform passe en 1er plan, même si avant dans le html !) */
    }
    .encartCantor .zone_labelNumero {
      line-height: 0.7em;
    }
    .encartCantor .labelNumero {
      width: 70px; /*idem visuelLentille*/
      display: inline-block;
      font-size: 0.7em;
      color: #AAA;
    }
    .encartCantor .superposerAuPrecedent {
      margin-left: -40px;
    }
    .encartCantor .visuelLentille.reduit1 {
      transform: scale(0.95);
        /* car les lentilles qui sont derrières donnent l'illusion d'être plus grosses que celle de devant ! */
    }
    .encartCantor .visuelLentille.reduit2 {
      transform: scale(0.90);
    }

  /* rapproche les visuels entre eux */
    @media (max-width: 984px) {
      .encartCantor .superposerAuPrecedent {
        margin-left: -40px;
      }

      .encartCantor .visuelLentille {
        width: 60px; /*idem labelNumero*/
        height: 60px;
        background-size: 66px;
      }
      .encartCantor .labelNumero {
        width: 60px; /*idem visuelLentille*/
      }

    }

  /* reduit partie titre en augmentant la partieVisuels */
    @media (max-width: 850px) {
      .encartCantor .superposerAuPrecedent {
        margin-left: -45px;
      }

      .encartCantor .partieVisuels {
        flex: 3;
      }
    }

  /* + reduit dimensions visuel/texte si écran trop étroit */
    @media (max-width: 725px) {
      .encartCantor .superposerAuPrecedent {
        margin-left: -20px;
      }

      .encartCantor .partieVisuels {
        flex: 2;
      }

      .encartCantor .visuelLentille {
        width: 30px; /*idem labelNumero*/
        height: 30px;
        background-size: 33px;
      }
      .encartCantor .labelNumero {
        width: 30px; /*idem visuelLentille*/
      }
    }

/* FIN bandeau Cantor Cosmetic - 11/2022 */





.articles li.article.articleActif {
	/*width: 290px;*/
}
.articles li.article.articleInactif {
	width: 0px;
	padding: 4px 0px; margin: 3px 0px; border-width: 2px 0px;
    height: 0;
    padding: 0;
    margin: 0;
    border-width: 0;
}

.articles li.offre.articleInactif {
	height:0;
	padding: 0; margin: 0; border-width: 0;
	display: none; /*evite decalage dans FF*/
}
.articles li.selecteurLentillesLCR.articleInactif {
	/*display: none; /*evite decalage dans FF*/
    width: 0px;
    height: 0px;
    font-size: 0em;
    padding: 0;
    margin: 0;
    overflow: hidden; /*sinon reste des élements visibles*/
}
.modeTableau .articles li.article.articleActif {
	/*display: table-row;*/
}
.modeTableau .articles li.article.articleInactif {
	display: none;
}
.modeTarifs .articles li.article.articleInactif {
	display: table-row;
}
.articles li.article.indisponible
, .articles li.article.indisponibleVenteEnLigne /*fev2013*/
{ /*si article pas totalement visible car visible que par CVE*/
	opacity: 0.45;
}
.mode_OPHTA .articles li.article.OPHTA_cde_non /*dec2016: pour que ophta voit mieux les articles qu'il peut commander*/
, .mode_OPHTA .articles li .ophta_btn_enteteListeA.OPHTA_cde_non /*dec2016: meme transparence pour bouton pour ophta*/
{	opacity: 0.55; /*moins translucide que CVE*/
}
.modeTarifs .articles li.article.indisponible
, .modeTarifs .articles li.article.indisponibleVenteEnLigne /*fev2013*/
{ /*si article pas totalement visible car visible que par CVE*/
	opacity: 1;
}


.articles .ophta_btn_enteteListeA  /*dec2016: pour que ophta avec legende spéciale en titre*/
{
	display: inline-block;
	background-color: #FFF;
	border-radius: 4px;
	padding: 13px 15px;
	margin: 2px 3px;
	width:607px;
}

#zoneArticleInfoContenu { /*si +info*/
	font-size: 0.9em; line-height: 1.4em;
}

#zoneArticleInfoContenu p { /*si paragraphe (ex: bloc pack client a la ligne)*/
	margin-top: 0;
	margin-bottom: 5px;
}


ul.articles {
	margin: 0px; padding: 0px; /*enleve espacement par defaut d'une liste*/
	display: inline-block;
	min-width: 310px;/*1 colonne mini*/ /*617px; 2 colonnes*/ /*pour avoir au moins 2 articles cote a cote sur support a largeur reduite (iPhone, iPad)*/
	width: 100%;/*dec2016: pour image offre a 100%*/
}
.articles .article div:first-child { /* le 1er div (image + prix) */
	/*background-color: gray;*/
	width: 115px;
	/*overflow: hidden;*//*pour que le prix ne deborde pas sur les infos a droite*//*juin2015: desactver pour usutement deborder : si prix avec remise => + long pas grave si parfois passe sur description*/
	white-space: nowrap; /*chaque prix sur une ligne (si trop long => prix tronque)*/
}
.articles .article.nosReco div:first-child { /* article de Nos Recommandations (2x2) - 03/12/2024 */
  OFF_max-width: 230px;
  OFF_max-height: 230px;
  width: 100%;
  OFF_height: 100%;
  font-size: 2em;
}
.articles .article .illustration { /* l'image de l'article*/
	width:110px; height:110px;
	-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
	vertical-align: top; /*evite bug qui laisse espace sous image (ex: en mode tableau) (on peut utiliser top ou autre) */

    /*zoom image*/
    transition-property: transform;
    transition-duration: 1s;
}
.articles .article.nosReco .illustration { /* article de Nos Recommandations (2x2) - 03/12/2024 */
  width: 220px;
  height: 220px;
}
#zoneArticleInfoContenu .illustration { /* l'image de l'article dans +info*/
	width:200px; height:200px;
	-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
	vertical-align: top; /*evite bug qui laisse espace sous image (ex: en mode tableau) (on peut utiliser top ou autre) */
}

/*adapte position centrage zoom selon article : */
.modePhoto .articles li.article.avecZoom.Ozia .illustration {
    /*transform-origin: 41px 42px; v1*/
    transform-origin: 68px 34px; /*v2*/
}
.modePhoto .articles li.article.avecZoom.Queens .illustration {
    transform-origin: 55px 22px;
}
.modePhoto .articles li.article.avecZoom.Desio .illustration {
    transform-origin: 34px 30px;
}
/*adapte puissance zoom selon article : */
.modePhoto .articles li.article.avecZoom.Ozia:hover .illustration {
    transform: scale(1.4) ;
}
.modePhoto .articles li.article.avecZoom.Queens:hover .illustration {
    transform: scale(1.2) ;
}
.modePhoto .articles li.article.avecZoom.Desio:hover .illustration {
    transform: scale(1.4) ;
}

.modePhoto .articles li.article.avecZoom span.zoneIll {
    overflow: hidden;
    width: 110px;
    height: 110px;
    display: block;
    border-radius:2px;/*disparait pendant zoom donc mis très léger poru pas que ça se voit trop*/
    transition-property:		width, height, margin-top, margin-left, border-radius ;
    transition-duration:		0.6s  ;
}
  .modePhoto .articles li.article.avecZoom.Ozia:hover span.zoneIll
, .modePhoto .articles li.article.avecZoom.Queens:hover span.zoneIll
, .modePhoto .articles li.article.avecZoom.Desio:hover span.zoneIll
{ /*contenant illustration pour zoomer sans déborder*/
    width: 114px;
    height: 118px;
    margin-top: -4px;
    margin-left: -4px;
}


/*DEBUT bandeSeparateurArticles :*/
.articles li.bandeSeparateurArticles.bandeInactive {
	width: 0px;
    height: 0;
    display: inline;
}
.articles li.bandeSeparateurArticles.bandeInactive > div
, .selecteur_choixPackArticles .SS.packInactif {
	display:none;
}
body#pageLA.pageArticlesRCH li.bandeSeparateurArticles { /*si pour résultat de recherche*/
    /*dans resultat de recherche, pour laisser retours à la ligne (à la pllce des bande de séparation) dans le résultat d'une recherche, sans pour autant afficher ces bandeau de séparation.
    Si je veux les articles tous bout à bout, enlever list-item (car mis auparavant en inline-block) : */
    display: list-item;
}

.bandeSeparateurArticles { /*ligne de séparation des articles pour meilleures lisibilités*/
    clear: both;
    list-style: none;
    line-height: 1.2em;
   /* overflow: hidden;*//*OFF 22/12/2021 poru permettre que le visuel du packaging sorte de la zone (au survol de celui-ci)*/
    display: inline-block; width: 100%; /*sans ça, il resterait toujours qqchose, meme quand bandeInactive*/
}
.articles li.bandeSeparateurArticles.bandeActive {
    padding-top: 12px;/*pour séparer + de la partie précédente*/
    padding-bottom:2px;
}
.selecteur_choixPackArticles .SS.packActif {
    /*padding-top: 12px;/*pour séparer + de la partie précédente*/
    /*padding-bottom:2px;*/
}
.bandeSeparateurArticles > div {
    display: block;
    clear: both;
}
.bandeSeparateurArticles .txt {
    padding: 3px;
    /*padding-left: 8px;*/

    display: inline-block;
    background-color: #999;/*si pas de degradé avec transparence : #999 = rgba(153, 153, 153, 1) */
    /*background-image: linear-gradient(to right, #999 88.24%, rgba(153, 153, 153, 0));*/
    /*au cas où dégradé non géré, je met pas du transparent mais la couelur de fond #EEE , soit :*/

    background-image: -webkit-linear-gradient(right, #999 25%, rgba(153, 153, 153, 0) 75%);
    background-image: -o-linear-gradient(right, #999 25%, rgba(153, 153, 153, 0) 75%);
    background-image: linear-gradient(to left, #999 25%, rgba(153, 153, 153, 0) 75%);



    /*padding-right: 20px;*//*si dégradé*/
    color: #FFF;

    /*bord gauche arrondi :*/
    /*border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;*/
    border-radius: 2px;
    margin-left:1px;
    padding-left: 6px; padding-right: 6px;
}
.bandeSeparateurArticles .txtBloc {
    background-color: #FFF;
    color: #777;
}
.bandeSeparateurArticles .slogan {
    font-style: italic;
    font-weight: bold;
    color: #666;
    display: inline-block;
    margin-left: 8px;
    line-height: 1.5em;
}

.visuelPackaging {
  width: initial;
  padding: 0;
  margin: 3px 3px 0px 7px;
  line-height: 1px;
  vertical-align: bottom;
  display: inline-block;
  width: 64px;  /*largeur par défaut (mais chaque image devrait avoir une largeur spécifique)*/
}
.visuelPackaging img.illustration {
  width: 80px;  /*largeur par défaut (mais chaque image devrait avoir une largeur spécifique). Rq: l'image peut dépasser du contenant (+ joli) */
/*animation au survol du packaging*/
  transition-property: transform;
  transition-duration: 1s;
  transform-origin: bottom left;
}
.visuelPackaging img.illustration:hover {
  transform: scale(1.4);
}

/*en mode tarif, pas de bandeSeparateurArticles mais se sert de certain pour separer les grandes sections */
.articles li.nouvelleSectionArticles {
  display: none;
}
.modeTarifs .articles li.nouvelleSectionArticles {
  height: 3em;
  display: table-row !important;
}

/*FIN bandeSeparateurArticles*/

/*permettra de pouvoir agrandir l'image facilement en agrandissant le parent colonneGauche*/
/*pb: si agrandi pour autre presentation sur iphone, avec cette colonne en pleine largeur et le reste dessous : agrnadira l'image (mais suffira d'ajouter code pour agrnadir l'image en elle-meem sur demande : docn ne pas mettre 100% dans css .illustration ci-après)*/
#colonneGauche {
/*width: auto; alterner entre 100% et auto
transition: width 1.5s;
max-width: auto;*/
}
#colonneGauche #zoneArticleInfoContenu .illustration { /* l'image de l'article dans +info*/
	/*width:100%; height:auto;*/
}
/*fin permettra de pouvoir agrandir l'image*/

.articles .article div:first-child + div { /* le div suivant le 1er div (info de l'article, sur la droite)*/
	position: absolute; /*ok car le parent est relative*/
	top: 4px; left: 120px;
    width: 175px; /*si modif ici, modifier aussi dans  body#pageLA.pageArticlesRCH .articles .article.dansBandeau div:first-child + div  */
	font-size: 0.8em;
	/*line-height: 1em;*/ /*permettra de controler l'interligne des elements contenus dans cet objet*/
	/*line-height: initial;*/ /*jan2107:perturbait l'interligne en mode tarifs. Et ne sembel pas utile*/ /*si pb ailleurs, il faudra mettre line-height: initial; que pour la zone de listing des lentilles*/
	/*background-color: violet;*/
}
.articles .article.nosReco div:first-child + div { /* article de Nos Recommandations (2x2) - 03/12/2024 */
  top: 10px;
  left: 250px;
  width: 335px;
  font-size: 1.6em;
  OFF_line-height: 1.8em;
}
/*.articles .article div:first-child + div span:first-child *//*la designation de l'article, dans info, son titre*/
.articles .article div:first-child + div span.titre /*la designation de l'article, dans info, son titre*/
, #zoneArticleInfoContenu div:first-child { /*titre article dans +info*/
	/*font-size: 0.9em;*/
	font-weight:bold;
	line-height: 1.2em;
}

/*picto Silicone Hydrogel / SiH - lié au titre de l'article - 14/12/2024*/
  body.style2 nav#zoneFiltre .blocFiltre button#paramSiH:before  /*libellé filtre*/
, .articles .article.SiH div:first-child + div span.titre:before  /*titre article (si classe .SiH)*/
, #zoneArticleInfoContenu div:first-child.SiH .titre:before  /*titre article dans +info (si classe .SiH)*/
, .articleParametrage form#formArticle.SiH div section h1 .titre:before /*titre sur page article (si classe .SiH)*/
{
  float: right;
  /*background-color: green;*/
  width: 32px;
  height: 16px;
  display: inline-block;
  content: "";
  background-repeat: no-repeat;
  background-image: url('/images/picto/picto-SiH.svg');
}
/*adaptations du libellé filtre id paramSiH (pour éviter que le libellé passe sur 2 lignes)*/
body.style2 nav#zoneFiltre .blocFiltre button#paramSiH:before {
  right: 3px;
  position: absolute;
}
/*adaptations si titre sur page article (si classe .SiH)*/
.articleParametrage form#formArticle.SiH div section h1 .titre:before
{
  width: 44px;
  height: 22px;
  margin-left: 5px; /*écarte du titre h1 (attention, il peut y avoir un bouton Calculateur) à coté du titre*/
}
body#pageLA.modePhoto .articles .article.SiH.nosReco div:first-child + div span.titre:before { /* article de Nos Recommandations (2x2) - titre article (si classe .SiH)*/
  width: 64px;
  height: 32px;
}
/* FIN picto Silicone Hydrogel / SiH */


#zoneArticleInfoContenu div:first-child { /*option en + pour seulement titre (pour +info)*/
	font-size:1.3em; margin-bottom: 8px;
}
#zoneArticleInfoContenu div +table { /*partie contenant photo + description + prix (pour +info)*/
	width:100%; /*pour occuper toute la largeur de la zone (meme si description trop courte ou inexistante)*/
}
.articles .article .description {
	font-size: 0.8em; line-height: 1.2em;
	color:#777;
	/*display:inline-block; peut se coller a droite des type de packaging au lieu d'aller a la ligne*/display: block;
}
.articles .article .description strong { /*mars2017*/
	color:#333;
}
.articles .article .description .blocFlashy /*mars2017*//*texte speciaux de la description courte*/
, #zoneArticleInfoContenu .blocFlashy /*juin2017*//*texte speciaux de la description longue*/
{
	background-color: rgb(234, 234, 48);
	border: 2px solid rgb(234, 234, 48);
	padding: 0px 2px;
	color:#000;
	font-size: 1.1em;
	font-weight:bold;
	line-height: 1.2em;
	display: inline-block;
	margin-top:3px;
	margin-bottom:2px;
	border-radius: 3px;
}

body.articleParametrage .description { /*description de la page de parametrage d'un article*/
	margin-top: 10px;
	margin-bottom:10px;
	color: #777;
	font-size: 0.9em;
	line-height: 1.2em;

	/*max-height:6.5em;
	overflow: hidden;*/
}


.articles .article div:first-child span.zonePrix_1 /*les info de prix*//*juin2015: mieux cible avec .zonePrix_1 (HT)*/
, .articles .article div:first-child span.zonePrix_2 /*et _2 (TTC)*/
, .articles .article div:first-child span.zonePrix_3 /*et _3 (TTC perso)*/
{
	font-size: 0.55em;/*juin2015:+0.04)*/ display:block; /*pour les mettre l'un sous l'autre*/
	line-height:1.7em;/*si texte + gros, le prix HT reste lisible*/
}
.articles .article div:first-child strong { /*les nombres des prix en valeur*/
	font-weight:bold;
	font-size:1.4em; /*on grossi le nombre du prix*/
}

.article .OFF_pictoRenouv { /*picto de renouvellement abrégé sur article*/
    background-color: #999;
    color:#FFF;
    position: absolute ;
    right:3px;
    bottom:3px;
    width:1.4em;
    height:1.4em;
    line-height:1.5em;/*un chouille + pour mieux centrer*/
    text-align: center ;
    vertical-align: middle;
    border-radius: 2em;
    font-size: 0.7em;
    padding-left: 1px;/*pour corriger décalage si "J"*/
}
.article .txtBloc.pictoRenouv
, #zoneArticleInfoContenu .txtBloc.pictoRenouv
, #zoneFiltre .txtBloc.pictoRenouv
{
    border-radius: 2em;
    min-width: 1.35em;
    text-align: center;
    /*padding-left: 1px;
    padding-right: 1px;*/
    font-weight: bold;
    /*background-color: #999;*/background-color: #025d7b;
    margin-right:3px;
    padding-left: 2px;  padding-right: 2px;
}
#zoneArticleInfoContenu .txtBloc.pictoRenouv /*mot entier => + d'espacement*/
{
    padding-left: 6px;  padding-right: 6px;
}
/*.article .txtBloc.pictoRenouv
, #zoneFiltre .txtBloc.pictoRenouv
{
    background-color: #025d7b;
}*/
#zoneFiltre .txtBloc.pictoRenouv
{    font-size: 0.85em;
}
/*02/03/2022 adapte couleur selon renouvellement*/
  .article .txtBloc.pictoRenouv.J
, #zoneArticleInfoContenu .txtBloc.pictoRenouv.J
, #zoneFiltre .txtBloc.pictoRenouv.J
{
  background-color: #73cfec;
}
  .article .txtBloc.pictoRenouv.T
, #zoneArticleInfoContenu .txtBloc.pictoRenouv.T
, #zoneFiltre .txtBloc.pictoRenouv.T
{
  background-color: #df75ff;
}
  .article .txtBloc.pictoRenouv._6M
, #zoneArticleInfoContenu .txtBloc.pictoRenouv._6M
, #zoneFiltre .txtBloc.pictoRenouv._6M
{
  background-color: #b43aff;
}
  .article .txtBloc.pictoRenouv.A
, #zoneArticleInfoContenu .txtBloc.pictoRenouv.A
, #zoneFiltre .txtBloc.pictoRenouv.A
{
  background-color: #9b00ca;
}

.txtBloc.blocEssai {
  background-color: #BBB;
  color: #616161;
  font-weight: normal;
}

/*mai2018 : Si dans zone avec bandeau => on peut masquer certains éléments de l'article car déjà affichés dans le bandeau de séparation : (ici, on ajoute .dansBandeau)  et  body#pageLA.modePhoto   pour ne pas gêner modeTableau, modeTarif (02/03/2022 sauf si .blocNonReduit. ex: pour pack Desio qui doit toujrosu être visible normalement) */
/*rq : si l'article a une  gammeArticle (idGamme) donc depend d'un bandeau séparateur (dans fn afficherArticle)*/
body#pageLA.modePhoto.pageArticlesLCR .articles .article.dansBandeau:not(.blocNonReduit) div:first-child + div span.titre /*désignation (titre article)*/
, body#pageLA.modePhoto.pageArticlesLCR .articles .article.dansBandeau:not(.blocNonReduit) .pack /*packaging*/
, body#pageLA.modePhoto.pageArticlesLCR .articles .article.dansBandeau:not(.blocNonReduit) .description /*description article*/
{	display:none;/**/
}
body#pageLA.modePhoto.pageArticlesLCR .articles .article.dansBandeau:not(.blocNonReduit) div:first-child span.zonePrix_1 { /*prix HT repositionné :*/
    position: absolute;
    left: 120px;  top: 64px;top: 50px;
}
body#pageLA.modePhoto.pageArticlesLCR .articles .article.dansBandeau:not(.blocNonReduit) div:first-child span.zonePrix_2 { /*prix TTC repositionné :*/
    position: absolute;
    left: 120px;  top: 79px;top: 64px;
}
body#pageLA.modePhoto.pageArticlesLCR .articles .article.dansBandeau:not(.blocNonReduit) div:first-child span.zonePrix_3 { /*prix TTC perso repositionné :*/
    position: absolute;
    left: 120px;  top: 94px;top: 79px;
}
/*bloc article (+ petit) (articleActif uniquement ici, sinon re-affiche un article censé être masqué)*/
body#pageLA.modePhoto.pageArticlesLCR .articles li.article.articleActif.dansBandeau:not(.blocNonReduit) /*si lentilles couleur*/
{   height:  122px;
    width: 241px;
}
body#pageLA.modePhoto.pageArticlesLCR .articles .article.dansBandeau:not(.blocNonReduit) div:first-child + div {
    width: 117px;
}
/*aussi pour articles de la page K&D car 5 articles par catégories (largeur uniquement et sans .dansBandeau ici car tous articles)*/
body#pageLA.modePhoto.pageArticlesLKD .articles li.article:not(.nosReco).articleActif { /*si lentilles K&D*/
    width: 241px;
}
body#pageLA.modePhoto.pageArticlesLKD .articles .article:not(.nosReco) div:first-child + div {
    width: 117px;
}
/* utilisation de :not(.nosReco) pour ne pas agir sur les articles de Nos Recommandations (2x2) - 03/12/2024 */


/*coloriserNb pour page "liste articles" pour prix TTC personnalisé (pire ou mieux que prix public) */
#pageLA .sauf_prixTTCPersoMasques .valMieux {
  color: #00CA0E;
}
#pageLA .sauf_prixTTCPersoMasques .valPire {
  color: orangered;
}



/* 04/03/2022 : masque les prix,… si .prixMasques */
  body.prixMasques .articles .article .zonePrix_1 /*prix dans bloc article*/
, body.prixMasques .articles .article .zonePrix_2 /*prix dans bloc article*/
, body.prixMasques .articles .article .zonePrix_3 /*prix dans bloc article*/
, body.prixMasques #zoneArticleInfoContenu #tarifsUnitaires table /*masque prix dans popup via plus d'info*/
, body.prixMasques #zoneArticleInfoContenu #tarifsCumules table /*masque prix dans popup via plus d'info*/
, body.prixMasques .articles li.selecteur_choixPackArticles /*masque aussi les packs spéciaux*/
, body.prixMasques .articles .article .zoneBoutonsArticle a.boutonArticles /*masque aussi les btn "choisir" (évite d'afficher article avec info prix)*/
, body.prixMasques #zoneArticleInfoContenu .zoneBoutonsArticle a.boutonArticles /*masque aussi les btn "choisir" dans popup via plus d'info*/
, body.prixMasques .articles .article .description strong /*masque partie des descriptions qui pourraient potentiellement contenir des prix*/
, body.prixMasques .articles .article .description .blocFlashy /*idem pour partie flashy*/
, body.prixMasques #zoneArticleInfoContenu .blocFlashy /*idem pour partie flashy dans popup via plus d'info*/
, body.prixMasques .articles li.offre.main /*les bandeaux d'offre (avec .main pour ne pas masquer btn "esssai gratuit",…)*/
, body.prixMasques .articles li.offre.texteInfo /*idem mais cible les texteInfo*/
, body.prixMasques.mode_OPHTA .zoneTarifPopup /*pour ophta, dans popup via plus d'info, masque toute la zone prix et pack (car pas comme pour opticien donc ne peut pas cibler que les prix)*/
/*filtres Affichage des tarifs*/
, body.prixHTMasques .sauf_prixHTMasques /*masque tout objet ne devant pas s'afficher si prix HT masqués*/
, body.prixTTCPublicMasques .sauf_prixTTCPublicMasques /*idem pour prix TTC public masqués*/
, body.prixTTCPersoMasques .sauf_prixTTCPersoMasques /*idem pour prix TTC perso masqués*/
/*si filtre prixHTMasques non activé (idem + haut mais ici avec ".prixHTMasques" au lieu de ".prixMasque")*/
, body.prixHTMasques .articles .article .description strong
, body.prixHTMasques .articles .article .description .blocFlashy
, body.prixHTMasques #zoneArticleInfoContenu .blocFlashy
{
  display: none!important;
}
/*si btn "choisir" masqué donc décale btn "+ d'info" à droite*/
body.prixMasques .articles li.article .boutonArticles:first-child {
  float: none!important;
}
/*change couleur btn (mais bizarre car l'intitulé change déjà donc pas logique)*/
body.prixMasques #btn_afficherMasquerPrix a.bouton {
  /*background-color: #a49e22;*/
}
/*FIN masque les prix,… si .prixMasques */


/*et si en mode recherche => en mode recherche, pas de bandeau => on les re-affiche : (ici, on ajoute  .pageArticlesRCH )*/
/* suite pas utile car modif ci-dessus que pour lentille de couleur
body#pageLA.modePhoto.pageArticlesRCH .articles .article.dansBandeau div:first-child + div span.titre
{    display:inline;
}
body#pageLA.modePhoto.pageArticlesRCH .articles .article.dansBandeau .pack
{    display:inline-block;
}
body#pageLA.modePhoto.pageArticlesRCH .articles .article.dansBandeau .description
{    display:block;
}
body#pageLA.modePhoto.pageArticlesRCH .articles .article.dansBandeau div:first-child span.zonePrix_1
, body#pageLA.modePhoto.pageArticlesRCH .articles .article.dansBandeau div:first-child span.zonePrix_2 {
    position: initial;
    left: initial;
    top: initial;
}
body#pageLA.modePhoto.pageArticlesRCH .articles li.article.articleActif.dansBandeau {
	width: 302px;	height: 152px;
}
body#pageLA.modePhoto.pageArticlesRCH .articles .article.dansBandeau div:first-child + div {
    width: 175px;
}
*/

/*FIN Si dans zone avec bandeau*/

/*aspect bouton*/  /*autre info, aspect des boutons mis dans fichier CSS de base*/
.articles li.article .boutonArticles:first-child { /* le 1er bouton (ex: + info)*/
	float:left;
}
.articles li.article .boutonArticles:last-child { /* le dernier (2e) bouton (ex: choisir)*/
	float:right;
}


.articles li.article .zoneBoutonsArticle { /*zone regroupant les 2 boutons*/
	position: absolute;
	right: 3px; bottom: -35px; /*trop bas donc pas visible*/ opacity: 0;
	/*background-color: green;*/
	width: 175px;
	text-align: right;
	/*display: none;*/
}
.articles li.article.nosReco .zoneBoutonsArticle { /* article de Nos Recommandations (2x2) - 03/12/2024 */
  width: 350px;
}
.articles li.article:hover .zoneBoutonsArticle { /*zone des boutons s'affichant au survol du bloc article*/
	/*background-color: red;*/
	/*display: inline-block; pas utile si pas utilisation de none avant*/
	bottom : 3px; /*pour rendre visible*/
	opacity: 1;
}

.articles li.article:hover .btnModif { /*dec2015: btn permettant de modifier article visible qu'en mode tableau*/
	opacity: 1 !important;
}

/*change tailles boutons si nosReco */
body#pageLA.modePhoto .articles li.article.nosReco .boutonArticles {  /* article de Nos Recommandations (2x2) - 03/12/2024 */
  font-size: 1.8em;
  padding: 8px 8px;
}

/*FIN bouton fiche technique*/


/*tableau tarif dans fenetre popup pour + info d'un articel (ajustement) :*/
.zoneTarifPopup {
	text-align: left;
  max-width: 310px;
}
/*body#pageLA .zoneTarifPopup*/ /*si a la page de listing des articles*/
/*, body.accueil .zoneTarifPopup { *//*ou accueil*/
.zoneTarifPopup { /*sept2015 : jsute ceci suffit amplement*/
	float: right;
}
/*FIN bouton fiche technique*/


.pourTableau
, .articles li.article.pourTableau
, .pourTarifs
, .articles li.article.pourTarifs
, .pourTableau.pictoBtn
{ /*pour imprimer les tarifs + proprement*/
	display: none;
}


/* MODE TABLEAU */
.modeTableau ul.articles { /* le tableau */
	/*background-color: red;*/
	display: table;
}
.modeTableau .articles li.article { /* les lignes du tableau */
	/*background-color: green;*/
	display: table-row;

	height: auto; width: auto; position: static; overflow: visible; float: none;
}

.modeTableau .articles .picto_prixEnBaisse { /*bloc prix en baisse*/
  margin-top: 0px;
  margin-left: 0px;

  /*réduit en taille (sinon bug : chevauche image article du dessous qui devient non cliquable)*/
  width: 40px;  height: 40px;
  background-size: 120px 60px;
}
.modeTableau .articles .article div:first-child,
.modeTableau .articles .article div:first-child + div,
.modeTableau .articles .article div,
.modeTableau .articles li.article .zoneBoutonsArticle { /* les cellules du tableau */
	/*background-color: yellow;*/
	display: table-cell;
	border-left:0px solid #FFF; /*border-bottom: 1px solid #CCC; suppr dec2014*/
	padding: 1px 12px;
	vertical-align: middle;
	font-size: 0.8em;

	width: auto; overflow: visible; white-space: inherit; position: static;

	min-width:64px; /*pour que titres spherique, torique, progressive (en mode tableau) soient pas decales a gauche si aucun article dans le titre concerne*/
}
.modeTableau .articles .article div:first-child,
.modeTableau .articles .article div:first-child +div { /*les 2 premieres colonnes (photo + designation) */
	border-left-width:0px; /* pas de bordure a gauche*/
}
  .modeTableau .articles .article .col_codeCVE /*div:nth-child(3) /*colonne des codes CVE*/
, .modeTableau .articles .article .col_packs /*div:nth-child(4) /*colonne des packs*/
, .modeTableau .articles .article .col_tarifs /*div:nth-child(5) /*colonne des prix*/
{
	white-space: nowrap; /*pour que le tarif reste en face du pack client*/
	font-size:0.7em;
}
.modeTableau .articles .article .col_delai /*colonne delai (que pour certains utilisateurs) - 27/01/2025*/
{
	/*white-space: nowrap; /*pour que le tarif reste en face du pack client*/
	font-size:0.7em;
}
.modeTableau .articles .article div:last-child { /*la derniere colonne (avec le bouton) */
	border-left-width:0px; /* pas de bordure a gauche*/
}

.modeTableau .articles li.article .zoneBoutonsArticle { /* la zone des boutons du tableau */
	right: auto;
	position: static;
	bottom: auto;
}

.modeTableau .pourTableau  /* affiche les cellules reservee au mode tableau */
, .modeTarifs .pourTarifs { /*ou mode tarif*/
	/*display: inherit;	*/
	display: initial;	 /*dec2014*/
}
/*dec2015: force display autre que initial : */
.modeTableau .pourTableau.btnModif { /*btn permettant de modifier article visible qu'en mode tableau*/
	display: inline-block;
	opacity:0.1; /*encore + discret que 0.3*/
}
.modeTableau .pourPhoto,
.modeTableau .articles .article div:first-child span.pourPhoto {
	/*background-color: red;*/
	display: none !important;  /*sept2014: ajout de !important (suite a ajout bloc offre Demoniac)*/
}

.modeTableau .articles .article .illustration { /* l'image de l'article*/
	width:40px; height:40px;
	-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
}


/* FIN MODE TABLEAU */

/*adaptation si modeTarifs (rq: est mis en + de modeTableau)*/
  .modeTarifs .articles .article .col_codeCVE /*div:nth-child(3) /*colonne code CVE*/
, .modeTarifs .articles .article .col_delai /*27/01/2025*/
, .modeTarifs .articles .article div.zoneBoutonsArticle /*div:nth-child(6) /*colonne pour btn choisir (pas utile dans ce mode)*/ /*avec div sinon d'autres classes posent pb*/
, .modeTarifs .articles li.article.indisponible /*articles visibles que par CVE. Rq: On garde ceux qui sont indisponibleVenteEnLigne*/
, .modeTarifs .pourTableau.btnModif /*btn modif article*/
{
	display:none ;
}
.modeTarifs .articles .article div { /*ligne tableau*/
	border-bottom: 1px solid #999; /*bordure plus sombre*/
}
.modeTarifs .articles .article div .illustration { /*photo article*/
	margin: 1px 0px; /*un peu moins d'espace entre chaque ligne*/
}

.modeTableau.modeTarifs .articles li.article > div { /*ligne separation tableau*/ /* .modeTableau.modeTarifs pour prendre le dessus sur cet element pour modeTableau seul défini + loin */
	border-bottom: 1px solid #999;
}

.modeTarifs .articles .article div:first-child + div span.titre /*la designation de l'article, dans info, son titre*/
{	line-height: 1.4em;
}

.modeTarifs .idemArt  /*masque les articles de même couleur*/
, .modeTarifs .blocCouleur { /*masque les info couleur*/
	display:none !important;
}

/*FIN adaptation si modeTarifs*/


.tableau p {
	display: table-cell;
	padding: 10px;
	background-color:#996699;
	vertical-align:middle;
	border-left:2px solid #FF9966;
}
.tableau p:first-child {
	border-left-width:0px;
}

.tableau XXX {
	display: table-row;
	border-collapse:separate;
}




.zoneBoutonsArticle {   /* animation */
	-webkit-transition-property:opacity	, color	, background-color	, bottom ; /*, width, padding, margin;*/
	-moz-transition-property:	opacity	, color	, background-color	, bottom ;
	-ms-transition-property:	opacity	, color	, background-color	, bottom ;
	-o-transition-property:		opacity	, color	, background-color	, bottom ;
	transition-property:		opacity	, color	, background-color	, bottom ;

	-webkit-transition-duration:0.7s	, 0.5s	, 1s				, 0.2s ; /*1 delai pour tous ou 1 delai pour chaque property */
	-moz-transition-duration:	0.7s	, 0.5s	, 1s				, 0.2s ;
	-ms-transition-duration:	0.7s	, 0.5s	, 1s				, 0.2s ;
	-o-transition-duration:		0.7s	, 0.5s	, 1s				, 0.2s ;
	transition-duration:		0.7s	, 0.5s	, 1s				, 0.2s ;
}

/*mai2015*/
/*non visible par defaut*/
  #mentionPhotosNonContractuelles
, .visibiliteSelonSectionArticle
{
	display:none;
}
/*visible que pour partie lentilles couleur*/
  body.pageArticlesLCR #mentionPhotosNonContractuelles
, body.pageArticlesLCR .visibiliteSelonSectionArticle
{
	display:block;
}

/*mars2017*/
#mentionCredit { /*non visible par defaut*/
	display:none;
}
body.pageArticlesMDD #mentionCredit { /*visible que pour partie MDD*/
	display:block;
}

/*visuelInfo (ex : MDD)*/
#visuelInfo {
	text-align: left; margin-top: 50px;
	margin-left: 3px; margin-right: 10px;/*poru etre + aligne sur bloc article*/
	line-height: 0;/*evite marge en bas*/
}
#visuelInfo .illustration {
	width: 100%;
	max-width: 1239px; /*l'image fait en vrai 1226px (1239 - 10-3 (marges de viseulInfo)) (*/
	min-width: 611px;
	height: auto;
	border-radius: 5px;
}


/* ** ** ** TEST AUTRE STYLE **** * * ** * */
body#pageLA.style2 > div.blocMax.adaptations { /*1er bloc max (page liste articles)*/
	text-align:left;/*pour coller articles sur la gauche : utile si moins de 4 articles affiches*/
	max-width:1388px;/*pour avoir 4 articles en largeur*/
}

body.accueil.style2 > div.blocMax.adaptations {
	max-width:1194px;/*limite largeur (idem dimensions grande image page accueil)*/
}

body.style2 > section { /*bloc avec les lentilles (liste articles)*/
	max-width: 1388px !important;
	display:inline-block;/*permet centrage*/
	margin:0;  padding:0;  padding-left:149px;/*=width de zonefiltre*/
	/*margin-left:5px;*/ width:100%; /*pour avoir le resultat recherche toujours sur la gauche (si < 4 resultat ou mode tableau)*/
	min-height:600px;/*evite que pied de page remonte trop haut*/
}
body.style2 nav#zoneFiltre { /*bloc avec filtres recherche pour liste articles*/
	width:149px;  margin-top:3px;
	position:absolute;
	/*mai2014: suppr suite a utilisation zone-bloc
	background-color:#FFF;
	box-shadow: 1px 1px 2px rgba(150, 150, 150, 0.25);
	-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;*/
}

body.style2 nav#zoneFiltre.elementFixe { /*zoneFiltre page liste articles*/
	position:fixed;  top:0px;
}

body.style2 nav#zoneFiltre .blocFiltre button { /**/
	width:100%;
	margin-bottom: 1px;
    text-align: left;
}
body.style2 nav#zoneFiltre div.blocFiltre > div.titreGroupeFiltre {
	padding-bottom:0;
	width:100%;
}
.titreGroupeFiltre.critereActif { /*sept2015: si filtre regroupant pls filtres actif (ex: demoniac). Suite a contour et fond de couleur des sou-filtres*/
	border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;
}
body.style2 nav#zoneFiltre .groupeFiltre {
	width:100%;
	display: block;/*evite lignes vides*/
}
body.style2 nav#zoneFiltre div.blocFiltre .groupeFiltre > button.critereActif:not(.filtreInvisible) + .sousGroupeFiltre { /*pour mettre marge sous un sous-critere visible (ex: les queens, sous trilogy)*//*enlever .critereActif si je veux un espace au-dessus de Demoniac, mais ca fera un espace tout le temps. a voir)*/
	margin-bottom:3px;
	/*sept2015: Suite a contour et fond de couleur des sou-filtres*/
	/*background-color: rgba(164, 158, 34, 0.18);suppr aout2018 pour pas avoir de lignes de séparation*/  border-radius: 2px;
	border-top-left-radius: 0px; border-top-right-radius: 0px;
	border: 1px solid #a49e22;  border-top-width: 0px;
	padding-top:1px; margin-top:-1px; /*ajuste esapcement avec filtre principale juste avant*/
}
.blocFiltre button.nomSousGroupeFiltre { /*sept2015: (pour ne pas avoir de bords arrondis si dans sous-groupe si le groupe maitre a un cadre car + joli) (ex: Demoniac) Suite a contour et fond de couleur des sou-filtres*/
	border-radius: 0px;
}
body.style2 nav#zoneFiltre div.blocFiltre div.doubleColonnes { /*zone a double colonnes (2 criteres cote a cote)*/
	/*width:auto;*/
}
body.style2 nav#zoneFiltre div.blocFiltre.doubleColonnes button { /*bouton d'une zone a double colonnes (2 criteres cote a cote)*/
	width:64px; margin-right: 1px;
}
body.style2 nav#zoneFiltre div.blocFiltre.doubleColonnes button:nth-child(odd) { /*les impairs (en colonne de droite)*/
	margin-right: 0px;
}
body.style2 nav#zoneFiltre div.blocFiltre.doubleColonnes button#paramDeguisement { /* bouton deguisement qui est tres grand)*/
	width:100%; margin-right: 0px;
}

body.style2 .articles li.article
{
	background-color: #FFF;
	/*box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);*/ /*legere ombre pour leger relief*/
	/*box-shadow: 1px 1px 2px rgba(150, 150, 150, 0.25);*/ /*legere ombre pour faire ressortir ces blocs articles*//*idem fieldset ul (comme blocs classiques de paramatrage par ex)*/
}
body.modePhoto.style2 .articles li.article:hover
{
    background-color: #fff!important;/*nov2019: au cas ou fond était avec légère transparence lors de période speciale*/
	border-color: transparent !important;
	/*box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);*//*ombre tout autour (fait ressortir aussi le bleu du fond)*/
	/*opacity: 0.8;*/ /*pour opacifier au survol si transparent car indispo normalement*/

    /*mai2018 : si zoom au survol article (bleu encore + clair)*/
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);/*ombre tout autour (fait ressortir aussi le bleu du fond)*/
    transform: scale(1.07) ;
    z-index: 1000;  /*au moins car en âge d'accueil, le produit star est à 99*/
    opacity: 1;
}


/*en mode tableau*/
/*.modeTableau .articles .article div:first-child,
.modeTableau .articles .article div:first-child + div,
.modeTableau .articles .article div,
.modeTableau .articles li.article .zoneBoutonsArticle {  les cellules du tableau
	border-bottom: 1px solid #EEE;
}*/
.modeTableau .articles li.article > div { /*ligne separation tableau*/
	border-bottom: 1px solid #EEE;
}
.modeTableau .articles li.article {
	box-shadow: none !important;
}
.modeTableau ul.articles {
	margin-top:3px;  margin-left: 3px;
}

/*menu*/
/*fev2015 pour desactiver car mis dans menu.css*/
fev2015body.style2 nav#zoneMenu1 { /*zone Menu en-tete*/
	border-bottom: 1px solid #025d7b;
	margin-top: 0px; padding-top:5px;
	/*margin-bottom:5px;*/

	background-image: url(../images/commun/lentille-fond-03.jpg);
	background-repeat: no-repeat;
	background-position: right -58px;
}

fev2015body.accueil.style2 nav#zoneMenu1 { /*zone Menu en-tete (que page accueil)*/
	background-image:none;  /*pas de photo dans menu car sur page d'accueil : deja grande photo*/
}

fev2015body.style2 nav ul.listeMenus > li {
	width: 9%;  min-width: 90px;  height: 62px;  /*overflow: hidden;*/  /*mai2014: adapte largeur en %*/
}

fev2015body.style2 nav ul#menuConnexion.listeMenus a
, body.style2 nav ul#menuConnexion.listeMenus > li {
	width: auto !important;  /*mai2014: adapte largeur en %*/
}





body.style2 nav#zoneMenu1 ul.listeMenus > li > a
, XXXbody.style2 .btn-group.menuAvecSousMenu > .btn
, XXXbody.style2 .btn-group.menuAvecSousMenu > .btn.cliquable > a
, body.style2 .btn-group.menuAvecSousMenu > .btn.cliquable
{ /*les menus*/
	/*font-size: 0.9em;*/
	width: 9em; width:129px;/*pour test snas modif largeur*/
	max-width: none;
	/*font-family: 'Electrolize', sans-serif;*/

	/*width: 3000px;*/  min-width: 82px; /*mai2014: adapte largeur en % (% dans <li>)*//*3000px sinon est plus petit que le <li> (en fait, sauf si table-cell semble-t-il)*/
}

/*
  body.style2.police0 nav#zoneMenu1 ul.listeMenus > li > a
, body.style2.police0 .btn-group.menuAvecSousMenu > .btn.cliquable
, body.style2.police1 nav#zoneMenu1 ul.listeMenus > li > a
, body.style2.police1 .btn-group.menuAvecSousMenu > .btn.cliquable
, body.style2.police2 nav#zoneMenu1 ul.listeMenus > li > a
, body.style2.police2 .btn-group.menuAvecSousMenu > .btn.cliquable
, body.style2.police3 nav#zoneMenu1 ul.listeMenus > li > a
, body.style2.police3 .btn-group.menuAvecSousMenu > .btn.cliquable
, body.style2.police4 nav#zoneMenu1 ul.listeMenus > li > a
, body.style2.police4 .btn-group.menuAvecSousMenu > .btn.cliquable
, body.style2.police5 nav#zoneMenu1 ul.listeMenus > li > a
, body.style2.police5 .btn-group.menuAvecSousMenu > .btn.cliquable
, body.style2.police6 nav#zoneMenu1 ul.listeMenus > li > a
, body.style2.police6 .btn-group.menuAvecSousMenu > .btn.cliquable
, body.style2.police8 nav#zoneMenu1 ul.listeMenus > li > a
, body.style2.police8 .btn-group.menuAvecSousMenu > .btn.cliquable
{
	font-size: 0.9em;
}
  body.style2.police7 nav#zoneMenu1 ul.listeMenus > li > a
, body.style2.police7 .btn-group.menuAvecSousMenu > .btn.cliquable
{
	font-size: 1em;
}
  body.style2.police0 nav#zoneMenu1 ul.listeMenus > li > a
, body.style2.police0 .btn-group.menuAvecSousMenu > .btn.cliquable
, body.style2.police0#pageLA h1 {
	font-family: 'Electrolize', sans-serif;
}
  body.style2.police1 nav#zoneMenu1 ul.listeMenus > li > a
, body.style2.police1 .btn-group.menuAvecSousMenu > .btn.cliquable
, body.style2.police1#pageLA h1 {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 400;
}
  body.style2.police2 nav#zoneMenu1 ul.listeMenus > li > a
, body.style2.police2 .btn-group.menuAvecSousMenu > .btn.cliquable
, body.style2.police2#pageLA h1 {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 300;
}
  body.style2.police3 nav#zoneMenu1 ul.listeMenus > li > a
, body.style2.police3 .btn-group.menuAvecSousMenu > .btn.cliquable
, body.style2.police3#pageLA h1 {
	font-family: 'Rambla', sans-serif;
	font-weight: 400;
}
  body.style2.police4 nav#zoneMenu1 ul.listeMenus > li > a
, body.style2.police4 .btn-group.menuAvecSousMenu > .btn.cliquable
, body.style2.police4#pageLA h1 {
	font-family: 'Dosis', sans-serif;
	font-weight: 300;
}
  body.style2.police5 nav#zoneMenu1 ul.listeMenus > li > a
, body.style2.police5 .btn-group.menuAvecSousMenu > .btn.cliquable
, body.style2.police5#pageLA h1 {
	font-family: 'Dosis', sans-serif;
	font-weight: 400;
}
  body.style2.police6 nav#zoneMenu1 ul.listeMenus > li > a
, body.style2.police6 .btn-group.menuAvecSousMenu > .btn.cliquable
, body.style2.police6#pageLA h1 {
	font-family: 'Dosis', sans-serif;
	font-weight: 500;
}
  body.style2.police7 nav#zoneMenu1 ul.listeMenus > li > a
, body.style2.police7 .btn-group.menuAvecSousMenu > .btn.cliquable
, body.style2.police7#pageLA h1 {
	font-family: 'Homenaje', sans-serif;
	font-weight: 400;
}
  body.style2.police8 nav#zoneMenu1 ul.listeMenus > li > a
, body.style2.police8 .btn-group.menuAvecSousMenu > .btn.cliquable
, body.style2.police8#pageLA h1 {
	font-family: 'Gafata', sans-serif;
	font-weight: 400;
}
*/
body.style2 .btn-group.menuAvecSousMenu /*pour menu avec sous menu*/
{
	/*width: 3000px; display: table-cell;*/ text-align: left;  width: 100%; /*mai2014: adapte largeur en % (% dans <li>)*/
}
body.style2 .btn-group.menuAvecSousMenu > .btn.cliquable /*pour menu avec sous menu*/
{
	/*width: 6.85em;*//*approximatif*/
	width:70%;  min-width:10px;
}
body.style2 .btn-group.menuAvecSousMenu > .btn.dropdown-toggle {
	width:30%;
	padding: 0px;
}


/*titre page*/
body#pageLA.style2 h1 {/*page Liste Articles*/
	display:block;
	margin-bottom: 10px;
}
/* ** ** ** FIN TEST AUTRE STYLE **** * * ** * */


/* 28/07/2021 : correction pour support mobile (évite erreur Google)*/

.articles li.offre > img { /*bandeau horizontal*/
  min-width: inherit !important; /* évite 611px attribué directement à l'objet img*/
}


@media (max-width: 500px) { /* si largeur inférieur aux largeurs du filtre à gauche + affichage un article */

  body.style2 > section { /*zone des articles*/
    padding-left: inherit; /*ne pas les décaler de 149 px*/
  }

  body.style2 nav#zoneFiltre { /*zone filtres (placé au-dessus des articles)*/
    width: 100%;
    position: inherit;
  }

  body.style2 nav#zoneFiltre.elementFixe { /*zone filtres (si fixe car défilement, reste au-dessus / en haut (ne se déplace pas avec la page)*/
    position: inherit;
  }

  body.style2 nav#zoneFiltre div.blocFiltre > div.titreGroupeFiltre { /*titre de filtre*/
    width: initial;
  }
  body.style2 nav#zoneFiltre .blocFiltre button { /*filtre base*/
    width: initial;
  }
  body.style2 nav#zoneFiltre .groupeFiltre { /*sous groupe de filtre (Ozia, Queens,...)*/
    display: inline-block;
    width: initial;
  }
    body.style2 nav#zoneFiltre div.blocFiltre.doubleColonnes button /*filtre couleur*/
  , body.style2 nav#zoneFiltre div.blocFiltre.doubleColonnes button#paramDeguisement { /*filtre couleur déguisement*/
    width: initial;
  }

}