body {overflow-x:hidden;}

#homeNav { /* outline:1px dotted pink; */
 position:absolute;left:50%;bottom:25px;transform:translateX(-50%);z-index:6;
 /* position:absolute; right:61px; bottom:25px; z-index:6; */
}
#homeNav a {
 white-space:nowrap;
 font-size:15px;
 font-weight:bold;
}
#homeNav a.bInp {margin:0 5px;}

.hasDrop {position:relative;}

.hasDrop ul.DropMe {
 list-style-type:none;
 margin:0;
 padding:5px 5px 4px;	overflow:hidden;
}
.hasDrop ul.DropMe li {
 padding:6px 13px;	margin:0 0 1px;
 border-radius:5px;
 text-align:left;
}
.hasDrop ul.DropMe li:hover, .hasDrop ul.DropMe li:focus {
 background:var(--tabsHigh); text-shadow:1px 1px 0 var(--tabsBack);
}
.hasDrop ul.DropMe li.actif {
 background:var(--tabsBack);
}

.hasDrop .DropMe {
 visibility:hidden;
 color:var(--buttonText);background:var(--buttonBack);
 box-shadow:1px 2px var(--tabsBack);
 font-size:15px;width:auto;white-space:nowrap;border-radius:6px;padding:4px 7px;position:absolute;left:50%;top:99%;top:calc(100% - 4px);transform:translateX(-50%);z-index:2;
}

.hasDrop:hover .DropMe, .hasDrop:focus .DropMe {
 visibility:visible;
}




/* --- #Articles LIST --- */

#Articles.list {	/*	outline:1px dotted red; */
 margin-bottom:99px;
}

#Articles.list .anArt {
 display:grid;
 grid-template-columns:auto 1fr;
 grid-template-rows:auto 1fr;
 grid-column-gap:0px;
 grid-row-gap:0px;
 margin:5px auto 20px;
 border:1px solid var(--tabsBord);
 border-radius:7px;
 background-color:transparent;
 box-shadow:1px 1px 3px var(--tabsBack);
 color:var(--bodyText);
 animation: 1s listIntoView;
 animation-timeline: view(block 66% 0%);
}

#Articles.list .anArt {

 .col { padding:7px 9px; }
 
 .image {	/* background:red;  */
  grid-area: 1 / 1 / 3 / 2;
  width:140px; height:140px;
  padding:6px;
 }
 .title {
  grid-area: 1 / 2 / 2 / 3;
 }
 .title * {
  display:inline-block; vertical-align:middle;
 }
 .title b {
  margin:0 13px 0 0;
 }
 .title i {
  font-size:85%; color:var(--bodyHalf);
 }
 .contx {
  grid-area: 2 / 2 / 3 / 3;		/* background:yellow;  */
 }

}

#Articles.list .anArt.ed2 {
 opacity:.75;	position:relative;
}

#Articles.list .anArt.ed2 b.sold {
 font-size:14px; letter-spacing:2px; font-weight:600;	text-shadow:2px 2px 1px var(--alertBack) !important;
 position:absolute; top:40px; right:-9px; z-index:2;
 background:var(--alertBack); background:var(--alertBagr); color:var(--alertText);
 padding:5px 9px; transform:rotate(15deg); box-shadow:1px 1px 2px var(--tabsBack); border-radius:3px 0 0 3px;
}

#Articles.list .anArt.ed2 b.sold:before {
 content:'';width:1px;height:1px;
 border-style:solid;        
 border-width:10px 9px 10px 0px;
 border-color:transparent transparent var(--alertBack) transparent;	opacity:.7;
 position:absolute; z-index:1;
 right:2px; top:-21px; transform:skew(15deg, 0deg);
}

#Articles.list .anArt .contx .price {
 display:inline-block;width:auto;padding:4px 9px;margin:-3px 0 0;
 border:1px solid var(--tabsBord);
 border-radius:5px;
 background:var(--tabsHigh); color:var(--linkText);
}

#Articles.list .anArt .contx .price.strike {
  position:relative;margin-right:13px !important;
  &:before {
    position:absolute;
    content:'';
    left:0;
    top:45%;
    right:0;
    border-top:2px solid;
    border-color:rgba(245,0,0,.8);
    -webkit-transform:skewY(-10deg);
    -moz-transform:skewY(-10deg);
    transform:skewY(-10deg);
	color:rgba(245,0,0,.8);
  }
  &:after {
	position:absolute;
	left:100%;
	top:50%;
	border:solid transparent;
	content:'';
	height:0;
	width:0;
	pointer-events:none;
	border-color:rgba(79,84,88, 0);
	border-left-color:inherit;
	border-width:9px;
	margin-top:-9px;
 }
}


#Articles.list .anArt .contx .text {
 padding:11px 0 0;
}


#Articles.list .anArt .image i {
 display:block; width:128px; height:128px;
 border-radius:5px;
 background:var(--tabsBack) url(../../files/noimg.png) no-repeat center; background-size:cover;
}


@keyframes listIntoView {
 from {
  opacity:0.4;
  transform:scale(0.8);
 }
 to {
  opacity:1;
  transform:scale(1);
 }
}



/* --- #Articles GRID --- */


#Articles.grid {
 margin-bottom:99px;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 /* grid-template-rows: 1fr fit-content(20%); */
 gap:9px;
 justify-content:center;			text-align:center;
}

#Articles.grid .anArt {
 height:300px;	overflow:hidden;
 position:relative;
 border:1px solid var(--tabsBord);
 border-radius:7px;
 background-color:var(--tabsBack);
 box-shadow:1px 1px 3px var(--tabsBack);
 color:var(--bodyText);
 animation: 1s listIntoView; animation-timeline: view(block 66% 0%);
}

#Articles.grid .anArt.ed2 b.sold {
 font-size:14px; letter-spacing:2px; font-weight:600;	text-shadow:2px 2px 1px var(--alertBack) !important;
 position:absolute; bottom:33%; right:-5px; z-index:4;
 background:var(--alertBack); background:var(--alertBagr); color:var(--alertText);
 padding:5px 9px; transform:rotate(-20deg); box-shadow:1px 1px 2px var(--tabsBack); border-radius:5px;
}

#Articles.grid .anArt .image {
 width:256px; height:256px;
 position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1;
 background:var(--tabsBack) url(../../files/noimg.png) no-repeat center; background-size:cover;
}

#Articles.grid .anArt .text {	background:var(--tabsBack); background:var(--gridTback);
 width:100%; height:auto; padding:7px 9px; white-space:nowrap; overflow:hidden;
 position:absolute; left:0;
}

#Articles.grid .anArt .title * {display:inline-block;vertical-align:middle;}

#Articles.grid .anArt .title {
 top:0; z-index:2;
 border-radius:0 0 50% 50%;
 b {
  margin:0 13px 0 0;
 }
 i {
  font-size:80%;
 }
}

#Articles.grid .anArt .prix {
 bottom:0; z-index:3;
 border-radius:50% 50% 0 0;
}

#Articles.grid .anArt .prix span {}

#Articles.grid .anArt .prix .price.strike {
  position:relative;margin-right:13px !important;
  &:before {
    position:absolute;
    content:'';
    left:0;
    top:45%;
    right:0;
    border-top:2px solid;
    border-color:rgba(245,0,0,.8);
    -webkit-transform:skewY(-10deg);
    -moz-transform:skewY(-10deg);
    transform:skewY(-10deg);
	color:rgba(245,0,0,.8);
  }
  &:after {
	position:absolute;
	left:calc(100% + 4px);
	top:50%;
	border:solid transparent;
	content:'';
	height:0;
	width:0;
	pointer-events:none;
	border-color:rgba(79,84,88, 0);
	border-left-color:inherit;
	border-width:5px;
	margin-top:-5px;
 }
}


/* ----- BOTH list & grid ----- */


#Articles .anArt:hover, #Articles .anArt:focus {
 color:var(--bodyText); 
 background-color:var(--hrTabHo);
 box-shadow:1px 1px 5px var(--tabsBack);
 text-shadow:1px 1px 0 var(--bodyTitleS);
}

#Articles .anArt, .anArt:hover, #Articles .anArt:focus {
 -webkit-transition:background-color ease-in-out 200ms;
 -moz-transition:background-color ease-in-out 200ms;
 -o-transition:background-color ease-in-out 200ms;
 transition:background-color ease-in-out 200ms;
}




/* ----- responsive ----- */


@media screen and (max-width:800px) {
 #Articles.list .anArt {
  animation-timeline: view(block 33% 1%);
 }
}


/* -- print -- */

@media print {
 #Articles .anArt.ed2 {
  opacity:1 !important;
 }
 #Articles .anArt {
  animation:none !important;
  animation-timeline:none !important;
 }
}