:root{
  --bleu-leger: #E3ECEE;
  --bleu: #E1EAEC;
  --bleu-sombre: #ACCACF;
  --rouge: #ED1C24;
  --rouge-milieu: #FBD2D3;
  --rouge-leger: #FFFAFB;
  --gris: #fafafa;

  --padding: 3.5vw;
  --margin: 5vw;
  --megaspace: calc(var(--margin)*1.5);
  --shadow: 0 48px 48px rgba(0, 0, 0, 0.10);
  /* --shadow: 0 4px 48px 0 rgba(0, 0, 0, 0.05); */
  --round: 20px;
}

/* DESKTOP */
@media only screen and (min-width: 1600px) {
  :root{
    --padding: 40px;
    --margin: 80px;
  --megaspace: calc(var(--margin)*2);
  }
}

/* ###################################################################################################
##
## TYPO3 LAYOUTS (full, medium etc)
##
################################################################################################### */
.frame-layout-400{
  width: unset;
  margin-left: var(--negativeMarginForFull);
  margin-right: var(--negativeMarginForFull);
}

.frame-layout-100{
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.frame-layout-200{
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.frame-layout-300{
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}

.frame-layout-700{
  max-width: 1630px;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}


@media only screen and (min-width: 1000px) {
  .frame-layout-200, .frame-layout-300, .frame-layout-700{
    width: 100%;
  }
}