/*

p.production
  span.grouped_produit
       span.(produit logo-title)
    OR a.(produit logo-*)

*/

.production {
  text-align: center;
  margin-bottom: 0.4em;
  line-height: 2.4em;

}

.grouped_produit {
  line-height: 2.4em;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
}

.produit {
  border: 1px black solid;
  border-radius: 1em;
  padding: 0.3em;
  background-color: #EEF;
  line-height: 1.2em;
  
}


a.produit:hover {
  background-color: #CCF;
}

a.produit {
  text-decoration: none;
  color: darkblue;
  font-weight: bold;
}

span.grouped_produit .produit {
  border-radius: 0em;
  border-left: 0px;
}

span.grouped_produit .produit:first-child {
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
  border-left: 1px black solid;
}

span.grouped_produit .produit:last-child {
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
}


/* Les logos */

.logo-article, .logo-slides, .logo-code, .logo-npm, .logo-nope, .logo-www {
  background-repeat: no-repeat;
  padding-left: 2em;
}

.logo-article {
  background-image: url("../assets/logo/logo-article.svg");
  background-size: contain;
  background-position-x: 0.2em;
}

.logo-slides {
  background-image: url("../assets/logo/logo-slide.png");
  background-size: contain;
  background-position-x: 0.2em;
}

.logo-code {
  background-image: url("../assets/logo/logo-github.svg");
  background-position-y: 0.25em;
  background-size: 1.3em;
  background-position-x: 0.5em;
}

.logo-npm {
  background-image: url("../assets/logo/logo-npm.svg");
  background-size: 1.5em;
  background-position-x: 0.3em;
  background-position-y: 0.7em;
}

.logo-www {
  background-image: url("../assets/logo/logo-www.png");
  background-size: 1.6em;
  background-position-x: 0.25em;
  background-position-y: 0.25em;
}

.logo-nope {
  background-image: url("../assets/logo/logo-cross.svg");
  background-size: 1.2em;
  background-position-x: 0.5em;
  background-position-y: 0.3em;
}

.logo-title {
  background-color: #000;
  color: white;
  font-weight: bold;
}