.relative {
  position: relative;
}
.tetris {
  position: absolute;
  z-index:15;
}
.tetris-tl {
  top: 0;
  left: 0;
  transform: translateY(-50%);
}
.tetris-tr {
  top: 0;
  right: 0;
  transform: translateY(-50%);
}
.tetris-bl {
  bottom: 0;
  left: 0;
  transform: translateY(50%);
}
.tetris-br {
  bottom: 0;
  right: 0;
  transform: translateY(50%);
}
.tetris > div{
  width: 100%;
  height: 50%;
}
.tetris-row{
  display:flex;
}
.tetris-row.tetris-br,
.tetris-row.tetris-tr {
  transform: translateX(50%);
}
.tetris-row > div{
  width: 50%;
  height: 100%;
}
.tetris > .white,
.tetris > .blanc{
  background-color: var(--white-color);
}
.tetris > .grenat{
  background-color: var(--accent-color);
}
.tetris > .pink,
.tetris > .rose{
  background-color: var(--rose);
}
.tetris > .orange{
  background-color: var(--orange);
}
.tetris > .green,
.tetris > .vert{
  background-color: var(--vert);
}
.tetris > .blue,
.tetris > .bleu{
  background-color: var(--bleu);
}
.tetris > .corail{
  background-color: var(--corail);
}
.tetris > .yellow,
.tetris > .jaune{
  background-color: var(--jaune);
}

/* Tetris configurable */
.tetris > .custom-color{
  background-color: var(--vert);
}
.tetris-vert .tetris .custom-color{
  background-color: var(--vert);
}
.tetris-orange .tetris .custom-color{
  background-color: var(--orange);
}
.tetris-jaune .tetris .custom-color{
  background-color: var(--jaune);
}
.tetris-bleu .tetris .custom-color{
  background-color: var(--bleu);
}
.tetris-corail .tetris .custom-color{
  background-color: var(--corail);
}
.tetris-rose .tetris .custom-color{
  background-color: var(--rose);
}
.tetris-blanc .tetris .custom-color{
  background-color: var(--white-color);
}
.tetris-grenat .tetris .custom-color{
  background-color: var(--accent-color);
}

.tetris > .neutral-color{
  background-color: var(--white-color);
}
.section-grenat .tetris > .neutral-color{
  background-color: var(--accent-color);
}
.section-rose .tetris > .neutral-color{
  background-color: var(--rose);
}
.section-orange .tetris > .neutral-color{
  background-color: var(--orange);
}
.section-vert .tetris > .neutral-color{
  background-color: var(--vert);
}
.section-bleu .tetris > .neutral-color{
  background-color: var(--bleu);
}
.section-corail .tetris > .neutral-color{
  background-color: var(--corail);
}
.section-jaune .tetris > .neutral-color{
  background-color: var(--jaune);
}


/* HP */
.tetris-hp-w{
  width: 285px;
  height:100px;
}
.tetris-hp-w > div {
  height: 100%;
}
.tetris-hp-w2{
  width: 350px;
  height: 40px;
}
@media screen and (max-width: 991px) {
  .tetris-hp-w{
    display: none;
  }
  .tetris-hp-w2{
    width: 160px;
    height: 70px;
    flex-direction: column-reverse;
    transform: translateY(-50%) !important;
    left:0;
    right:auto;
  }
  .tetris-hp-w2 > div {
    width: 100%;
    height: 50%;
  }
}


/* Text image */
.tetris-text-image-w{
  width: 250px;
  max-width: 40%;
  height:80px;
}

/* Média - figure */
.tetris-figure-s{
  width: 60px;
  height: 120px;
}

/* Hero header */
.tetris-hero-header-h{
  width:50px;
  height: 130px;
}
.tetris-hero-header-no-img{
  width:50px;
  height: 100px;
}

@media (max-width:992px) {
  .tetris-hero-header-h,
  .tetris-hero-header-no-img{
    display: none;
  }
}

/* Editorial teaser */
.tetris-editorial-teaser-s{
  width:50px;
  height:100px;
}

/* Programme page */
.tetris-programme-s{
  width:110px;
  height:50px;
}