@import "couleurs.css";
@import "enveloppe-animations.css";
@import "polices.css";

:root {
  --env-width: 90vw;
  --env-max-width: 400px;
  --env-height: 410px;

  --lid-height: 100px;

  --dep-env-vert: calc(0.6 * var(--env-height));
  --dep-lettre-vert: calc(-0.65 * var(--env-height));
}

.env {
  position: relative;
  background-color: transparent;

  margin: auto;

  width: var(--env-width);
  max-width: var(--env-max-width);
  height: var(--env-height);
}

.env-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.env-dev,
.env-arr {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  justify-content: center;
}

.env-dev {
  background-image: url(../img/env-dev.png);
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.env-arr {
  transform: rotateY(180deg);
  /* perspective: 4000px; */
}

.env-arr {
  z-index: 1;
}

.env-dev {
  z-index: 2;
}

.env-arr-arr,
.env-arr-dev,
.lid-inner,
.lid {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.env-arr-arr {
  background-image: url(../img/env-arr-arr.png);
}

.env-arr-dev {
  display: flex;
  flex-direction: column;
}

.env-arr-dev-haut {
  background-image: url(../img/env-arr-dev.png);
  width: 100%;
  aspect-ratio: 1;
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 1;
}
.env-arr-dev-bas {
  background-image: url(../img/env-dev.png);
  background-size: cover;
  background-repeat: no-repeat;
  flex-grow: 1;
  width: 100%;
}

.env-arr-arr {
  z-index: 1;
}

.lettre {
  z-index: 2;
  opacity: 0;
}

.env-arr-dev {
  z-index: 3;
}

.lid-inner {
  z-index: 4;
}

.lid-inner {
  height: 100%;
}

.env-dev,
.env-arr,
.lid,
.lettre-dev,
.lettre-arr {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.lid {
  background-image: url(../img/lid-ext.png);
  background-size: contain;
}

.lid.int {
  transform: rotateY(180deg);
  background-image: url(../img/lid-int.png);
  background-size: contain;
}

#timbre {
  margin: 20px;
  height: 30%;
  backface-visibility: hidden;
}

.lettre {
  margin: auto;
  position: absolute;
  width: 85%;
  height: 100%;
}

.lettre-haut {
  width: 100%;
  border-radius: 50% 50% 0 0;
  aspect-ratio: 1;
  background-color: white;
}
.lettre-bas {
  width: 100%;
  background-color: white;
  flex-grow: 2;
}

.lettre-dev,
.lettre-arr {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}

.lettre-contenu {
  position: absolute;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  align-items: stretch;
  padding: 70px 20px 20px 20px;
  justify-content: space-around;
  height: 100%;
}

.lettre-dev {
  z-index: 1;
}

.lettre-arr {
  z-index: 2;
}

.lettre-contenu > * {
  margin: auto;
  text-align: center;
}

.lettre-titre-arr {
  font-size: 1.3em;
  line-height: 1.5;
  margin-top: 15px;
  margin-bottom: 0px;
}

.lettre-titre-dev {
  font-size: 1.6em;
  line-height: 1.4;
  height: 30%;
}

.lettre-contenu > h3 {
  font-family: Playfair-Italic;
  font-size: 1.5em;
  font-weight: normal;
  /* margin-top: 0px; */
}

.lettre-contenu > h2 {
  font-family: Playfair-Italic;
  font-size: 1.8em;
  font-weight: normal;
  margin-top: 0px;
}

#couple {
  height: 100%;
}

.lettre-contenu-faire {
  padding-bottom: 3px;
}

.lettre-contenu-faire > h2 {
  font-size: 1.2em;
}
.lettre-contenu-faire > .lettre-titre-arr-date {
  font-size: 1.8em;
}

.lettre-contenu-faire > h3 {
  margin-top: 10px;
}

.lettre-contenu-faire > .lettre-titre-arr {
  margin-bottom: 15px;
}

.lettre-haut-faire {
  border: 3px solid var(--couleur-eucalyptus);
  border-bottom-style: none;
}
.lettre-bas-faire {
  border: 3px solid var(--couleur-eucalyptus);
  border-top-style: none;
}