/* Maquettes dessinées en HTML. "cqw" = % de la largeur de l'écran de la maquette. */
.m-tournoi {
  height: 100%;
  background: #101A2B;
  color: #F1F4F8;
  font-family: var(--texte);
  font-size: 1.9cqw;
}

.m-tournoi .m-nav {
  display: flex;
  gap: 3cqw;
  padding: 2.4cqw 3cqw;
  background: #0A1120;
  font-weight: 500;
}

.m-tournoi .m-nav b {
  margin-right: auto;
  color: #6BC1FF;
}

.m-tournoi h4 {
  margin: 3cqw 3cqw 2cqw;
  font-family: var(--titre);
  font-size: 6cqw;
  line-height: 1;
}

.m-tableau {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1cqw 3cqw;
  padding-inline: 3cqw;
  align-items: center;
}

.m-tableau div {
  display: grid;
  gap: 1cqw;
}

.m-tableau span {
  padding: 1cqw 1.4cqw;
  background: #1C2B44;
  border-left: 0.5cqw solid #6BC1FF;
}

.m-releve {
  height: 100%;
  background: #F6F7FB;
  color: #1B2240;
  font-size: 1.8cqw;
  padding: 3cqw;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 2cqw;
}

.m-releve h4 {
  margin: 0;
  font-size: 3.2cqw;
}

.m-grille {
  display: grid;
  grid-template-columns: 7fr repeat(7, 5fr);
  gap: 0.6cqw;
}

.m-grille i {
  font-style: normal;
  display: grid;
  place-items: center;
  border-radius: 0.6cqw;
  background: #E7E9F4;
}

.m-grille i.a {
  background: #5B5BD6;
  color: #FFFFFF;
}

.m-grille i.b {
  background: #17A398;
  color: #FFFFFF;
}

.m-grille i.t {
  background: none;
  font-weight: 700;
}

.m-pain {
  height: 100%;
  background: #7A2E18;
  color: #FBE9D0;
  padding: 5cqw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  position: relative;
}

.m-pain::before {
  content: "";
  position: absolute;
  width: 62cqw;
  height: 62cqw;
  right: -10cqw;
  top: -18cqw;
  border-radius: 50%;
  background: #E9A23B;
}

.m-pain h4 {
  position: relative;
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 10cqw;
  line-height: 0.98;
}

.m-pain p {
  position: relative;
  margin-top: 2cqw;
  font-size: 2.2cqw;
}

.m-kayak {
  height: 100%;
  background: repeating-linear-gradient(176deg, #0F6E84 0 1.2cqw, #11798F 1.2cqw 2.6cqw);
  color: #FFFFFF;
  padding: 4cqw;
  box-sizing: border-box;
  display: grid;
  align-content: space-between;
}

.m-kayak h4 {
  margin: 0;
  font-family: var(--titre);
  font-size: 15cqw;
  font-weight: 900;
  line-height: 0.86;
}

.m-kayak .m-bouton {
  justify-self: start;
  padding: 1.5cqw 3cqw;
  background: #FFE14D;
  color: #06333F;
  font-weight: 700;
  font-size: 2.4cqw;
  border-radius: 5cqw;
}

.m-bons {
  height: 100%;
  background: #F2F0EA;
  color: #24261F;
  font-size: 1.9cqw;
  display: grid;
  grid-template-columns: 3fr 2fr;
}

.m-bons .g {
  padding: 3cqw;
  display: grid;
  gap: 1cqw;
  align-content: start;
}

.m-bons h4 {
  margin: 0 0 1cqw;
  font-size: 3.4cqw;
}

.m-bons .l {
  display: flex;
  justify-content: space-between;
  padding: 1.2cqw 1.5cqw;
  background: #FFFFFF;
  border-radius: 0.6cqw;
}

.m-bons .d {
  background: #2B3A2A;
  color: #E4F0D8;
  padding: 3cqw;
  display: grid;
  align-content: end;
  gap: 0.5cqw;
}

.m-bons .d b {
  font-family: var(--titre);
  font-size: 8cqw;
  line-height: 1;
}