/* ******************************************************************** */
/* ****************************** MOBILE ****************************** */
/* ******************************************************************** */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: nulshock, sans-serif;
    line-height: 1.5;
    color: #ffffff;
    background: url(../images/elo/fond_long_portable-elo.jpg);
    background-size: 100%;
    background-attachment: fixed;
  }
  
  main {
    font-family: nulshock, sans-serif;
    display: flex;
    flex-direction: column;
  }
  
  /* Header */
  .header {
    padding: 2rem 1rem;
    text-align: center;
    margin-top: 5rem;
  }
  
  .header__content {
    max-width: 500px;
    margin: 0 auto;
  }
  
  .header__title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
  
  .header__subtitle {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .header__description {
    font-size: 0.9rem;
    margin-bottom: 2rem;
  }
  
  .header__cta {
    display: inline-block;
    color: #fff;
    font-weight: bold;
    font-size: 1.75rem;
    font-family: nulshock, sans-serif;
  }
  
  /* Section Paramètre Joueur */
  .parametre {
    position: relative;
  }
  
  .parametre__container {
    position: relative;
  }
  
  .parametre__badge {
    position: absolute;
    top: 15%;
    left: 3.1%;
    transform: translate(-50%, -50%);
  
    color: #fff;
  
    font-weight: bold;
    font-size: 3.2rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    text-shadow: 4px 4px 6px #000;
  }
  
  .parametre__content {
    position: relative;
    width: 100%;
    margin: 0 auto;
  }
  
  .parametre__background-svg {
    width: 100%;
    height: auto;
    display: block;
    z-index: 0;
    pointer-events: none;
  }
  
  .parametre__content--title {
    position: absolute;
    top: 15%;
    left: 60%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 4px 4px 6px #000;
    width: 75%;
  }
  
  .parametre__content--inner {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    width: 95%;
    z-index: 1;
  }
  
  .parametre__avatar {
    width: 15%;
    border-radius: 100%;
    object-fit: cover;
  }
  
  .parametre__text {
    text-align: center;
    font-family: nulshock, sans-serif;
    font-size: 0.6rem;
    text-shadow: #0000008e 2px 2px 2px;
  }
  
  .parametre__selector {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    z-index: 1;
  }
  
  .parametre__arrow {
    background: none;
    border: none;
    cursor: pointer;
    width: 46px;
    height: 32px;
    display: flex;
    justify-content: center;
    z-index: 1;
  }
  
  .parametre__star-wrapper {
    position: relative;
    width: 45%;
    text-shadow: #0000008e 2px 2px 2px;
  }
  
  .parametre__star {
    width: 100%;
    height: 100%;
  }
  
  .parametre__level-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.25rem;
    color: #fff;
    font-weight: bold;
  }
  
  .parametre__level-2 {
    position: absolute;
    top: 31%;
    left: 69%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    color: #fff;
    font-weight: bold;
  }
  
  .matchs {
    position: relative;
  }
  
  .match__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0;
  }
  
  .matchs__badge {
    color: #fff;
    font-weight: bold;
    font-size: 3.2rem;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    text-shadow: 4px 4px 6px #000;
  }
  
  .matchs__title {
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 4px 4px 6px #000;
    width: 75%;
    text-align: center;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.61),
      rgb(255 255 255 / 27%)
    );
    border-radius: 35px;
    backdrop-filter: blur(10px);
    padding: 0.5rem 1rem;
    width: 87%;
    border: solid 2px #ffffffb8;
  }
  
  .matchs__container {
    position: relative;
  }
  
  .matchs__content {
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: start;
    column-gap: 1%;
  }
  
  .matchs__background-svg {
    display: block;
  }
  
  .match__content-players {
    position: absolute;
    display: grid;
    grid-template-areas:
      "player1 player3"
      "player2 player4";
    width: 100%;
    height: 100%;
    align-items: center;
    justify-items: center;
  }
  
  .player--1 {
    grid-area: player1;
  }
  
  .player--2 {
    grid-area: player2;
  }
  
  .player--3 {
    grid-area: player3;
  }
  
  .player--4 {
    grid-area: player4;
  }
  
  .match__content-player {
    display: flex;
    align-items: center;
    width: 70%;
    column-gap: 5%;
    position: relative;
  }
  
  .match__content-player-portait {
    flex: 0.5;
  }
  
  .match__content-player-portait--img {
    border: solid 4px orangered;
    border-radius: 100%;
  }
  
  .match__content-player-star {
    position: relative;
    flex: 0.5;
  }
  
  .match__content-player-star--img {
  }
  
  .match__content-player-star--num {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.25rem;
    text-shadow: #0000008e 2px 2px 2px;
  }
  
  .match__content-player-star--num-2 {
    position: absolute;
    top: 25%;
    left: 70%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    text-shadow: #0000008e 2px 2px 2px;
  }
  
  .graphique {
    font-family: nulshock, sans-serif;
    /* flex: 0.75; */
  }
  
  .elo__left-section--3-graph {
    max-height: 12rem;
    width: 95%;
    position: relative;
  }
  
  .elo__left-section--3-graph-text {
    position: absolute;
    bottom: 7%;
    left: 15%;
    transform: translate(-50%, 50%);
    font-size: 0.8rem;
  }
  
  .resultats {
    display: flex;
    justify-content: center;
    position: relative;
    flex-direction: column;
    align-items: center;
    flex: 1.5;
  }
  
  .resultats__container {
    display: flex;
    align-items: center;
    width: 70%;
    justify-content: center;
  }
  
  .resultats__result {
    position: absolute;
    top: 50%;
    transform-origin: center;
    transform: translateY(-50%);
    font-family: nulshock;
    font-weight: bold;
    white-space: nowrap;
    border: 1px solid #fff;
    border-radius: 30px;
    padding: 0.25rem 1rem;
    backdrop-filter: blur(6px);
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.61),
      rgb(255 255 255 / 27%)
    );
  }
  
  .result-1 {
    left: -2.6rem;
    color: green;
    transform: translateY(-50%) rotate(-90deg);
    width: 8rem;
    text-align: center;
  }
  
  .result-2 {
    right: -2.6rem;
    color: red;
    transform: translateY(-50%) rotate(90deg);
    width: 8rem;
    text-align: center;
  }
  
  .resultats__terrain {
    position: relative;
    width: 100%;
  }
  
  .resultats__terrains--img-active {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  
  .resultats__terrains--img {
  }
  
  .resultats__players {
    position: absolute;
    display: grid;
    grid-template-areas:
      "joueur1 joueur3"
      "joueur2 joueur4";
    align-items: center;
    justify-items: center;
    column-gap: 20%;
    top: 5%;
    height: 88%;
  }
  
  .player-1 {
    grid-area: joueur1;
  }
  .player-2 {
    grid-area: joueur2;
  }
  .player-3 {
    grid-area: joueur3;
  }
  .player-4 {
    grid-area: joueur4;
  }
  
  .resultats__player {
    display: flex;
    justify-content: center;
    width: 70%;
    position: relative;
  }
  
  .resultats__player--gagne {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%);
    width: 150%;
    max-width: unset;
    z-index: 0;
    display: none;
  }
  
  .resultats__player--img {
    border-radius: 100%;
    border: solid 4px orangered;
    width: 70%;
    z-index: 1;
  }
  
  .resultats__player-elo {
    position: absolute;
  }
  
  .resultats__player-elo-left {
    text-shadow: #0000008e 2px 2px 2px;
    position: absolute;
    left: 85%;
  }
  
  .resultats__player-elo-right {
    text-shadow: #0000008e 2px 2px 2px;
    position: absolute;
    right: 85%;
  }
  
  .niveau-elo {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    flex: 1;
  }
  
  .niveau-elo__container {
    display: grid;
    grid-template-areas: "vide star play";
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    justify-items: center;
    width: 90%;
    height: 100%;
    position: relative;
  }
  
  .niveau-elo__star {
    position: relative;
    grid-area: star;
    z-index: 1;
  }
  
  .niveau-elo__star--img {
  }
  
  .niveau-elo__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 23%;
    top: 62%;
    transform: translate(-50%, -50%);
    z-index: 0;
    text-shadow: #0000008e 2px 2px 2px;
  }
  
  .niveau-elo__star-num-1 {
    position: absolute;
    font-size: 3rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-shadow: #000000bd 6px 6px 6px;
  }
  
  .niveau-elo__star-num-2 {
    position: absolute;
    left: 62%;
    top: 35%;
    transform: translate(-50%, -50%);
    font-size: 1.25rem;
    text-shadow: #0000008e 2px 2px 2px;
  }
  
  .niveau-elo__star-num-3 {
    left: 10%;
    top: 20%;
    transform: translate(-50%, -50%);
    position: absolute;
    font-size: 1.5rem;
    color: green;
    text-shadow: #0000008e 2px 2px 2px;
  }
  
  .niveau-elo__text-1 {
    font-size: 1.5rem;
  }
  
  .niveau-elo__text-2 {
    font-size: 3rem;
    line-height: 0.5;
  }
  
  .niveau-elo__play {
    grid-area: play;
  }
  
  .niveau-elo__play--img {
    width: 83%;
    height: auto;
  }
  
  .match__content-player-portait--active {
    position: absolute;
    top: -51%;
    left: -50%;
    width: 195%;
    max-width: unset;
    display: none;
  }
  
  .resultats__player--active {
    position: absolute;
    inset-inline-start: 19%;
    transform: translateX(-50%);
    width: 40%;
    max-width: unset;
    z-index: 2;
    top: -8%;
    display: none;
  }
  
  .match__content-player-star-wrapper-left {
    position: absolute;
    left: -30%;
    top: 10%;
    width: 100%;
    display: none;
  }
  
  .match__content-player-star-wrapper-right {
    position: absolute;
    left: 73%;
    top: 10%;
    width: 100%;
    display: none;
  }
  
  .match__content-player-star {
    width: 58%;
  }
  
  .match__content-player-star-elo-1 {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 55%;
    left: 28%;
    z-index: 2;
    text-shadow: 2px 2px 2px black;
  }
  
  .match__content-player-star-elo-2 {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 26%;
    left: 40%;
    z-index: 2;
    font-size: 12px;
    text-shadow: 2px 2px 2px black;
  }
  
  @media (min-width: 576px) {
    body {
      background: url(../images/elo/background-elo.jpg);
      background-size: cover;
      background-attachment: fixed;
    }
    .parametre__content--title {
      font-size: 1.2rem;
    }
  
    .parametre__text {
      text-align: center;
      font-family: nulshock, sans-serif;
      font-size: 1rem;
    }
  
    .matchs__title {
      font-size: 1.2rem;
    }
  
    .match-graph {
      display: flex;
      align-items: center;
    }
  
    .matchs {
      flex: 1;
    }
  
    .graphique {
      flex: 1.25;
    }
    .match__content-player-star--num {
      font-size: 1rem;
    }
  
    .match__content-player-star--num-2 {
      font-size: 0.6rem;
    }
  
    .resultats-elo {
      display: flex;
      justify-content: center;
    }
  
    .niveau-elo__star-num-2 {
      left: 65%;
      top: 30%;
    }
    .niveau-elo__star-num-1 {
      font-size: 2rem;
    }
  
    .parametre__level-1 {
      font-size: 2rem;
    }
  
    .parametre__level-2 {
      left: 65%;
      font-size: 1.25rem;
    }
  
    .niveau-elo__text-1 {
      font-size: 1rem;
    }
  
    .niveau-elo__text-2 {
      font-size: 2rem;
    }
  }
  
  .mobile-only {
    display: block;
    margin-inline: 1rem;
  }
  .desktop-only {
    display: none;
  }
  
  @media (min-width: 768px) {
    .parametre__content--title {
      font-size: 1.5rem;
    }
  
    .parametre__level-1 {
      font-size: 2.5rem;
    }
  
    .parametre__level-2 {
      left: 65%;
      font-size: 1.5rem;
    }
    .header {
      padding: 2rem 1rem;
      text-align: center;
      margin-top: 8rem;
    }
  
    .parametre__badge {
      left: 2.1%;
    }
  }
  
  @media (min-width: 992px) {
    .mobile-only {
      display: none;
    }
    .desktop-only {
      display: block;
    }
  
    h1,
    h2,
    h3,
    h4 {
      font-weight: bold;
      line-height: 1.2;
    }
  
    p {
      margin-bottom: 1rem;
      font-family: nulshock, sans-serif;
    }
  
    .container {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 1rem;
    }
  
    img {
      display: block;
      max-width: 100%;
      height: auto;
    }
  
    .elo {
      margin-top: 5rem;
      display: grid;
      grid-template-areas:
        "header header"
        "left right";
      grid-template-columns: 3fr 2fr;
      grid-template-rows: auto;
      align-self: center;
      justify-self: center;
      text-align: center;
      margin: 5rem 11rem;
    }
  
    .elo__header {
      grid-area: header;
    }
  
    .elo__left-sections {
      grid-area: left;
      display: flex;
      flex-direction: column;
      /* row-gap: 8%; */
      justify-content: space-between;
      /* height: 50rem; */
    }
  
    .parametre__content {
      position: relative;
      width: 100%;
      margin: 0 auto;
    }
    .parametre__badge {
      left: 3.1%;
    }
  
    .parametre__content--title {
      font-size: 1rem;
      top: 20%;
    }
  
    .parametre__text {
      font-size: 0.8rem;
    }
  
    .elo__left-section--2 {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 0.5rem;
    }
  
    .elo__left-section--2--content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      column-gap: 1%;
      max-height: 3rem;
    }
  
    .elo__left-section--2--text {
      position: relative;
      display: flex;
    }
  
    .elo__left-section--2--img {
      width: 100%;
    }
  
    .elo__left-section--2--title {
      position: absolute;
      left: 25%;
      text-align: start;
      top: 22%;
      font-size: 0.8rem;
      font-family: "Nulshock";
      text-shadow: 4px 4px 6px #000;
      transform: translate(-50%, -50%);
      transform-origin: center;
      top: 50%;
      left: 60%;
      width: 100%;
    }
  
    .elo__left-section--2--num {
      color: #fff;
      font-weight: bold;
      font-size: 3.2rem;
      width: 3.5rem;
      height: 100%;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      text-shadow: 4px 4px 6px #000;
    }
  
    .elo__left-section--2--play-button {
      width: 36%;
    }
  
    .elo__left-section--3 {
      position: relative;
      display: flex;
    }
  
    .elo__left-section--3-graph {
      width: 100%;
      height: 100%;
      position: relative;
      flex: 0.6;
    }
  
    .elo__left-section--3-elo {
      display: flex;
  
      flex-direction: column;
  
      align-items: center;
  
      justify-content: flex-end;
  
      position: relative;
  
      width: 30%;
    }
  
    .elo__left-section--3-elo--calc {
      position: absolute;
      font-family: "nulshock";
      font-size: 1.25rem;
      top: 17%;
      left: 20%;
      transform: translate(-50%, -50%);
      z-index: 1;
      color: red;
      text-shadow: #0000008e 2px 2px 2px;
    }
  
    .elo__left-section--3-star {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: center;
    }
  
    .elo__left-section--3-star-img {
      width: 100%;
    }
  
    .elo__left-section--3-star-elo--1 {
      position: absolute;
      font-family: "nulshock";
      font-size: 3rem;
      top: 50%;
      left: 49%;
      transform: translate(-50%, -50%);
      text-shadow: #000000bd 6px 6px 6px;
    }
  
    .elo__left-section--3-star-elo--2 {
      position: absolute;
      font-family: "nulshock";
      font-size: 1.5rem;
      top: 27%;
      left: 67%;
      transform: translate(-50%, -50%);
      text-shadow: #0000008e 2px 2px 2px;
    }
  
    .elo__left-section--3-elo--text {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      line-height: 0.8;
    }
  
    .elo__left-section--3-elo--text-1 {
      font-family: "nulshock";
      font-size: 1.5rem;
    }
  
    .elo__left-section--3-elo--text-2 {
      font-family: "nulshock";
      font-size: 3rem;
    }
  
    .elo__right-sections {
      grid-area: right;
      display: flex;
      flex-direction: column;
      row-gap: 1rem;
      position: relative;
      align-items: center;
      /* min-width: 20rem; */
      /* height: -84rem; */
    }
  
    .elo__right-section--1 {
      color: #fff;
      text-shadow: 4px 4px 6px #000;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 90%;
      justify-content: center;
    }
  
    .elo__right-section--1-img {
      width: auto;
      /* height: 86%; */
    }
  
    .elo__right-section--1-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 1;
      position: absolute;
      width: 100%;
      transform: translate(-50%, -50%);
      top: 45%;
      left: 50%;
    }
  
    .elo__right-section--1-player {
      z-index: 1;
      display: flex;
      align-items: center;
      /* justify-content: center; */
      margin: 0 0 0 1rem;
      column-gap: 5%;
    }
  
    .elo__right-section--1-player-portrait {
      width: 15%;
      border-radius: 360%;
      border: solid 4px orangered;
    }
  
    .elo__right-section--1-player-name {
      font-family: nulshock;
      font-size: 0.8rem;
      width: 150%;
      text-shadow: #0000008e 2px 2px 2px;
    }
  
    .elo__right-section--1-player-star {
      display: flex;
      justify-content: center;
      position: relative;
    }
  
    .elo__right-section--1-player-star--img {
      width: 48%;
    }
  
    .elo__right-section--1-player-star--elo {
      position: absolute;
      font-family: nulshock;
      font-size: 1rem;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-shadow: #0000008e 2px 2px 2px;
    }
  
    .elo__right-inter-section--match {
      position: absolute;
      left: 24.5%;
      top: 98%;
      font-size: 1rem;
      font-family: nulshock;
      transform: translate(-50%, -50%);
      display: none;
    }
  
    .elo__right-inter-section--num {
      position: absolute;
      top: 100%;
      left: 50%;
      font-size: 2.5rem;
  
      font-family: nulshock;
      transform: translate(-50%, -50%);
      display: none;
    }
  
    .elo__right-section--2 {
      align-items: center;
      display: flex;
      justify-content: center;
      position: relative;
      width: 90%;
    }
  
    .elo__right-section--2-img {
      width: 100%;
    }
  
    .elo__right-section--2-content {
      position: absolute;
      display: grid;
      grid-template-rows: 12% 88%;
      grid-template-areas:
        "loose win"
        "terrain terrain"
        "proba proba";
      width: 100%;
      height: 100%;
    }
  
    .elo__right-section--2-loose {
      grid-area: loose;
      font-size: 0.8rem;
      font-family: nulshock;
      color: red;
      margin-right: 15%;
      align-self: center;
      margin-top: 6px;
    }
  
    .elo__right-section--2-win {
      grid-area: win;
      font-size: 0.8rem;
      font-family: nulshock;
      color: green;
      margin-left: 15%;
      align-self: center;
      margin-top: 6px;
    }

    .elo__right-section--2-proba-container {
      grid-area: proba;
    }
  
    .elo__right-section--2-terrain {
      grid-area: terrain;
      display: grid;
      grid-template-areas:
        "joueur1 joueur3"
        "joueur2 joueur4";
      position: relative;
      /* align-items: center; */
    }
  
    .elo__right-section--2-terrain--img {
      position: absolute;
      width: 90%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  
    .elo__right-section--2-terrain-player {
      justify-self: center;
      align-self: center;
      position: relative;
      display: flex;
      justify-content: center;
      z-index: 2;
    }
  
    .elo__right-section--2-terrain-player--1 {
      grid-area: joueur1;
    }
  
    .elo__right-section--2-terrain-player--2 {
      grid-area: joueur2;
    }
  
    .elo__right-section--2-terrain-player--3 {
      grid-area: joueur3;
    }
  
    .elo__right-section--2-terrain-player--4 {
      grid-area: joueur4;
    }
  
    .elo__right-section--2-terrain-player--img {
      width: 25%;
      border-radius: 360%;
      border: solid 4px orangered;
      z-index: 1;
    }
  
    .elo__right-section--2-terrain-player--elo {
      position: absolute;
      font-size: 1rem;
      font-family: nulshock;
      text-shadow: #0000008e 2px 2px 2px;
      right: 10%;
    }
  
    .elo-right {
      right: 70% !important;
    }
  
    .common-option__selector {
      display: flex;
    }
  
    .common-option__selected {
      position: relative;
      width: 80px;
      height: 80px;
    }
  
    .common-option__selected-star {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
  
    .common-option__selected-elo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: inherit;
      font-weight: bold;
      color: #fff;
      pointer-events: none;
    }
  
    .common-option__selected-elo--1 {
      font-size: 1.5rem;
    }
  
    .common-option__selected-elo--2 {
      font-size: 0.8rem;
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(50%, -50%);
    }
  
    .common-option__button {
      border: none;
      background: none;
    }
  
    .elo__left-section--3-graph {
      min-height: 100%;
    }
  
    .graphique {
      width: 70%;
    }
  
    .elo__right-section--1-player-star--elo-2 {
      position: absolute;
      font-family: nulshock;
      font-size: 0.8rem;
      top: 25%;
      left: 60%;
      transform: translate(-50%, -50%);
      text-shadow: #0000008e 2px 2px 2px;
    }
  
    .elo__right-section--1-player-active {
      position: absolute;
      top: -28%;
      left: -8%;
      width: 30%;
    }
  
    .elo__right-section--2-terrain-player-active {
      position: absolute;
      top: -52%;
      left: 25%;
      width: 49%;
      z-index: 2;
    }
  
    .parametre__level-1 {
      font-size: 1.5rem;
    }
  
    .elo__right-section--2-terrain-player--gagne {
      position: absolute;
      top: 50%;
      left: 50%;
      transform-origin: center;
      transform: translate(-50%, -50%);
      width: 75%;
      max-width: unset;
      z-index: 0;
      display: none;
    }
  
    .elo__left-section--3-star-gif {
      position: absolute;
      transform: translate(-50%, -50%);
      top: 54%;
      left: 50%;
    }
  }
  
  @media (min-width: 1200px) {
    body {
      background: url(../images/elo/fond-elo-bureau.jpg);
      background-size: 100%;
    }
    .parametre__content--title {
      font-size: 1.25rem;
    }
  
    .parametre__level-1 {
      font-size: 2rem;
    }
  
    .parametre__level-2 {
      font-size: 1.1rem;
    }
  
    .elo__left-section--2--num {
      /* width: 40px; */
    }
  
    .elo__left-section--2--content {
      column-gap: 3%;
    }
  
    .elo__right-section--1-player-name {
      font-size: 1rem;
    }
  
    .elo__right-inter-section--match {
      font-size: 1.2rem;
    }
    .elo__left-section--3-elo--calc {
      font-size: 2rem;
    }
  
    .elo__left-section--3-star-elo--2 {
      top: 33%;
      left: 63%;
    }
  
    .elo__left-section--2--title {
      position: absolute;
      left: 25%;
      text-align: start;
      top: 22%;
      font-size: 1.1rem;
      font-family: "Nulshock";
      text-shadow: 4px 4px 6px #000;
      transform: translate(-50%, -50%);
      transform-origin: center;
      top: 50%;
      left: 60%;
      width: 100%;
    }
    .elo__right-section--1-player-star--img {
      width: 50%;
    }
  
    .elo__right-section--1-player-star--elo {
      font-size: 1.25rem;
    }
  
    .elo__right-section--1-player-star--elo-2 {
      position: absolute;
      font-family: nulshock;
      font-size: 1rem;
      top: 25%;
      left: 60%;
      transform: translate(-50%, -50%);
      text-shadow: #0000008e 2px 2px 2px;
    }
  
    .elo__right-section--1-player-active {
      position: absolute;
      top: -34%;
      left: -8%;
      width: 30%;
    }
  
    .elo__right-section--2-terrain-player-active {
      position: absolute;
      top: -52%;
      left: 25%;
      width: 49%;
    }
  
    .elo__right-section--2-terrain-player--elo {
      position: absolute;
      font-size: 1rem;
      font-family: nulshock;
      text-shadow: #0000008e 2px 2px 2px;
      right: 10%;
    }
  
    .parametre__badge {
      left: 2.5%;
    }
  }
  
  @media (min-width: 1400px) {
    .elo {
      margin-top: 5rem;
      display: grid;
      grid-template-areas:
        "header header"
        "left right";
      grid-template-columns: 3fr 2fr;
      grid-template-rows: auto;
      align-self: center;
      justify-self: center;
      text-align: center;
      margin: 5rem 15%;
    }
  
    .parametre__content--title {
      font-size: 1.5rem;
    }
    .parametre__text {
      font-size: 1.2rem;
    }
  
    .parametre__level-1 {
      font-size: 2.5rem;
    }
  
    .parametre__level-2 {
      font-size: 1.25rem;
      top: 31%;
      left: 64%;
    }
  
    .elo__left-section--2--title {
      font-size: 1.25rem;
    }
  
    .elo__left-section--2--num {
      /* width: 2rem; */
    }
  
    .elo__right-section--1-player-name {
      font-size: 1.2rem;
    }
  
    .elo__left-section--3-elo--calc {
      font-size: 2.25rem;
    }
  
    .elo__right-section--2-loose {
      font-size: 1rem;
    }
    .elo__right-section--2-win {
      font-size: 1rem;
    }
  
    .elo__left-section--2--num {
      /* min-width: 89px; */
      /* height: 79px; */
    }
  
    .parametre__badge {
      /* width: 90px; */
      /* height: 42px; */
    }
    .elo__right-section--1-player-star--elo {
      font-size: 1.5rem;
    }
    .elo__right-section--1-player-active {
      position: absolute;
      top: -36%;
      left: -8%;
      width: 30%;
    }
    .elo__right-section--2-terrain-player-active {
      position: absolute;
      top: -52%;
      left: 25%;
      width: 49%;
    }
  }
  
  @media (min-width: 1600px) {
    .elo {
      margin-top: 5rem;
      display: grid;
      grid-template-areas:
        "header header"
        "left right";
      grid-template-columns: 3fr 2fr;
      grid-template-rows: auto;
      align-self: center;
      justify-self: center;
      text-align: center;
      margin: 5rem 15%;
    }
  
    .parametre__content--title {
      font-size: 1.5rem;
    }
    .parametre__text {
      font-size: 1.2rem;
    }
  
    .parametre__badge {
      width: 50px;
      height: 50px;
    }
    .parametre__level-1 {
      font-size: 2.5rem;
    }
  
    .parametre__level-2 {
      font-size: 1.25rem;
      top: 31%;
      left: 64%;
    }
  
    .elo__right-inter-section--num {
      font-size: 3rem;
    }
  
    .elo__left-section--2--title {
      font-size: 1.5rem;
    }
    .elo__right-section--1-player-name {
      font-size: 1.2rem;
    }
  
    .elo__left-section--3-elo--calc {
      font-size: 2.25rem;
    }
  
    .elo__right-section--1-player-star--img {
      width: 55%;
    }
    .elo__right-section--2-loose {
      font-size: 1.25rem;
    }
    .elo__right-section--2-win {
      font-size: 1.25rem;
    }
  }
  
  .elo__right-section--1-player-active,
  .elo__right-section--2-terrain-player-active {
    display: none;
  }
  
  .elo-animating .elo__right-section--1-player-active,
  .elo-animating .elo__right-section--2-terrain-player-active {
    display: block;
  }
  
  .fade {
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  
  .fade--on {
    opacity: 1;
  }
  
  .fade:not(.fade--on) {
    pointer-events: none;
  }
  
  @keyframes matchsExit {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-150%);
    }
  }
  .matchs--exit {
    animation: matchsExit 1s ease-out forwards;
  }
  
  @keyframes matchsEnter {
    from {
      transform: translateY(-150%);
    }
    to {
      transform: translateY(0);
    }
  }
  .matchs--enter {
    animation: matchsEnter 0.45s ease-out forwards;
  }
  
  .star-flying {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    will-change: transform, opacity;
  }
  
  .star-flyer {
    position: absolute;
    width: 48px;
    height: auto;
    pointer-events: none;
    z-index: 9999;
    transition: top 0.45s ease-out, left 0.45s ease-out;
  }
  
  @keyframes headerUp {
    to {
      transform: translateY(-120%);
      opacity: 0;
    }
  }
  
  .matchHeader--exit {
    animation: headerUp 0.45s forwards;
  }
  .matchHeader--collapse {
    overflow: hidden;
    height: 0;
    transition: height 0.45s ease-out;
  }
  
  @keyframes headerDown {
    from {
      transform: translateY(-120%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  .matchHeader--enter {
    animation: headerDown 0.45s forwards;
  }
  
  .parametre--dim {
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .matchs--collapse {
    overflow: hidden;
    height: 0;
    transition: height 0.45s ease-out;
    transform: translateY(-150%);
    opacity: 0;
  }
  
  #mobile-main .resultats {
    transition: margin-block 0.45s ease-out;
  }
  
  .resultats {
    transition: margin-block 0.45s ease-out;
  }
  .resultats--shift {
    margin-block: 2rem;
  }
  
  .niveau-elo__star-gif {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 53%;
    left: 50%;
  }
  
  .resultats-header {
    display: flex;
    justify-content: center;
    column-gap: 1rem;
  }
  

  .elo-explanation-section {
    font-family: nulshock, Arial, sans-serif;
    margin: 2rem 15%;
    font-size: 11px;
    text-align: justify;
  }

  .elo-explanation-section h5 {
    font-size: 16px;
    margin-bottom: 1rem;
  }

  @media (min-width:768px) {
    .elo-explanation-section {
      font-size: 1rem;
    }
  
    .elo-explanation-section h5 {
      font-size: 1.5rem;
    }
  }