/* La déco */

.decoration {
  max-width: 80%;
}

@media only all and (min-width: 90em) 
{
  .decoration {
    max-width: 50%;
  }
}

/* Contenus : association canal + ressources */
.contenu
{
  display: inline-block;
  vertical-align: top;

  width: 100%;

  margin: 0.5em;
}

.de_qualite
{
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient(to right, #00d204 0%, white 50%) 1;
}

/* Canaux */
.canal
{
  float: left;
  padding: 0.5em;
  width: 15em;

  font-size: x-large;
  font-family: sans-serif;
}

.canal-youtube
{
  display: flex;
  align-items: center;
}

/* le theme me fait chier, je mets un poids de ouf avec un sélecteur de ouf pour override :p */
#body div .canal-youtube img
{
  margin: 0;
  display: inline;
  padding: 0.5em;

  max-height: 5em; /* on limite la taille pour les images carrés */
}

.canal-chucksguide
{
  display: flex;
  align-items: center;
}

#body div .canal-chucksguide img
{
  margin: 0;
  display: inline;
  width: 10em;
}

.canal-chucksguide-text
{
  padding: 0.5em;
}

/* Ressources */
.ressource
{
  display: inline-block;

  border-style: dotted;
  border-width: 1px;

  width: 20em;
  height: 10em;
  vertical-align: middle;

  position: relative; /* pour permettre un positionnement absolute à l'intérieur */
}

.ressource .vignette /* image ou texte */
{
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;

  text-align: center;
  font-size: 5em;

  position: absolute;
  width: 100%;
  height: 90%;

  z-index: -1;
}

.ressource .vignette.site
{
  background-image: url(/icons/www-url-svgrepo-com.svg);
}

.ressource .vignette.forum
{
  background-image: url(/icons/forum-svgrepo-com.svg);
}

.ressource .vignette.planchette
{
  background-image: url(/icons/board-with-list-svgrepo-com.svg);
}

.ressource .vignette.presentation
{
  background-image: url(/icons/presentation-speech-svgrepo-com.svg);
}

.ressource .vignette.fichier
{
  background-image: url(/icons/file-1-svgrepo-com.svg);
}

.ressource .vignette.documentation
{
  background-image: url(/icons/documentation-svgrepo-com.svg);
}

.ressource .vignette.outil
{
  background-image: url(/icons/tool-svgrepo-com.svg);
}

.ressource .vignette.discord
{
  background-image: url(/icons/discord-icon-svgrepo-com.svg);
}

/* https://stackoverflow.com/questions/6071987/line-height-as-a-percentage-not-working */
.ressource .vignette:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.ressource .titre
{
  text-align: center;
  background-color: rgba(255, 255, 255, 0.85);

  position: absolute;
  bottom: 0;
  width: 100%;

  padding: 0.1em;
}

.ressource .infos
{
  text-align: right;
  background-color: rgba(255, 255, 255, 0.85);

  position: absolute;
  top: 0;
  right: 0;

  padding: 0.1em;
}

.ressource .liens
{
  text-align: left;

  position: absolute;
  top: 0;
  left: 0;

  padding: 0.1em;
}

.ressource .controles
{
  text-align: right;

  position: absolute;
  bottom: 0;
  right: 0;

  padding: 0.1em;
}

.ressource a
{
  background-color: rgba(255, 255, 255, 0.85);
}