/* CSS for TuilesProduits.ascx
-----------------------------------------*/

.tuileContainer
{
  margin: 0;
  display: flex; 
  /*grid-gap: 20px; ne fonctionne pas sur safari */
  justify-content: center;
  align-item: center;
  flex-flow: row wrap;
  background-color: #fff; 
  width: 100%; 
  box-sizing: border-box;
}

.tuileInner
{
  display: block;
  position: relative;
  color: var(--cal-text-color);
  margin: 10px; /* grid-gap ne marche pas */
  padding: 0;
  border: 0;
  box-sizing: border-box;
  background-color: #fff; 
  width: 300px;
  height: 300px;
  box-shadow: 0 1px 1px 0 rgba(60,64,67,.08),0 1px 3px 1px rgba(60,64,67,.16);
}

.tuileInner:hover { background-color: var(--cal-back-color); opacity:0.9; }

.tuileDesc  
{
  box-sizing: border-box;
  text-align: left; 
  padding: 10px; 
  width: 100%; 
}

.tuilePriceContainer
{
  position: absolute;
  left:0;
  bottom:0;
  font-size: 0.8em; 
  text-align: center; 
  padding: 5px 10px 10px 10px; 
  width: 280px;
  /*border-top: 1px solid var(--cal-text-color); */
}

.tuilePrice { font-size: 2em; font-weight: bold; }
.tuilePrice:after { font-size: 0.8em; font-weight: bold; vertical-align:top; content:'€' }

/* Centre l'image sur overflow */
.tuileImageContainer
{
  height: 150px;
  /*transform: translateY(50%);*/
  overflow: hidden;
  vertical-align:middle;
  text-align:center;
}

img.tuileImage
{
  display: block;
  width: 100%;
  /*transform: translateY(-50%);*/
}
/* Centre l'image sur overflow */

.tuileEnSavoir, .tuileProchainement { font-size: 1.5em; }
.tuileEnSavoir
{
  /*color: #fff;*/
  /*background-color: var(--cal-text-color);*/
  /*padding: 1px 5px;*/
  font-weight: bold;
}

.tuileInner a:link, .tuileInner a:visited
{
  color: var(--cal-text-color);
  font-weight: 500;
  text-decoration: none;
}

.tuileInner:hover span { color: var(--link-hover); }
/*.tuileInner:hover .tuileEnSavoir { color: #fff; background-color: var(--link-hover); }*/

.tuileInner a:active { color: var(--link-hover); }

.tuileFilter
{
  border-top: 1px solid var(--cal-selectback-color);
  /*border-bottom: 1px solid var(--cal-selectback-color);*/
  border-left: 0;
  border-right: 0;
  margin: 10px;
  padding: 10px;
  white-space: wrap;
  vertical-align: middle;
  display: inline-block;
  text-align: center;
  background-color: var(--cal-back-color);
}