@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

.phone_page {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(0);
  height: 100vh;
  width: 100vw;
  z-index: 5100;
}

.phone {
  width: fit-content;
  height: fit-content;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#close_phone {
  position: absolute;
  top: 10%;
  right: 40%;
}

.heure {
  position: absolute;
  top: 1%;
  left: 10%;
  transform: translateX(-50%);
  font-family: "Lato", sans-serif;
  color: #fff;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.tel {
  width: 70%;
  height: auto;
  display: block;
  position: relative;
  margin: 0;
}

.touches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  position: absolute;
  bottom: 12%;
  left: 38%;
  transform: translateX(-50%);
  width: 60%;
}

.code0 {
  grid-column-start: 2;
}

.code img {
  width: 70%;
}

.date {
  position: absolute;
  top: 10%;
  left: 7.5%;
  font-family: "Lato", sans-serif;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.date h1 {
  color: rgba(255, 255, 255, 0.82);
  font-family: Lato;
  font-size: 7rem;
  font-style: normal;
  font-weight: 400;
  margin: 0;
}

.date span {
  color: #fff;
  font-family: Lato;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 0.2rem;
}

.applis {
  display: grid;
  width: 22.5rem;
  position: absolute;
  top: 7.5%;
  left: 37.5%;
  row-gap: 2rem;
  transform: translateX(-50%);
  grid-template-areas:
    "a b c d"
    "p_diddy p_diddy e f"
    "p_diddy p_diddy g h"
    ". . i j";
}

.applis img {
  width: 70%;
}

#p_diddy {
  grid-area: p_diddy;
  width: 90%;
}

#app1 {
  grid-area: a;
}
#app2 {
  grid-area: b;
}
#app3 {
  grid-area: c;
}
#app4 {
  grid-area: d;
}
#app5 {
  grid-area: e;
}
#app6 {
  grid-area: f;
}
#app7 {
  grid-area: g;
}
#app8 {
  grid-area: h;
}
#app9 {
  grid-area: i;
}
#app10 {
  grid-area: j;
}
.password img {
  width: 2rem;
  height: 2rem;
}

.password {
  position: absolute;
  top: 30%;
  left: 20.5%;
  display: flex;
  gap: 0.5rem;
}

#black {
  color: black;
}

.RCL {
  position: absolute;
  top: 7.5%;
  left: 35%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: "Lato", sans-serif;
  padding: 0.5rem;
  gap: 1.5rem;
}

.date_billet {
  align-self: flex-end;
  text-align: end;
}

.date_billet h1 {
  font-size: 1.2rem;
  margin: 0;
}

.date_billet span {
  font-size: 1rem;
}

.texte_billet h1 {
  font-size: 1rem;
  margin: 0;
}

.texte_billet span {
  font-size: 0.8rem;
}

.billet_flex {
  align-self: stretch;
  display: flex;
  justify-content: space-between;
}

.billet_flex .right {
  text-align: right;
}

#qrcode {
  align-self: center;
}

.notif {
  position: fixed;
  left: 2.5%;
  top: 1%;
  z-index: 50;
  width: 65%;
}