/* Themes */

html {
  --arrierePlan : #FFFFFF;
  --bouton : #65082D;
  --boutonActif: #3e051c;
  --boutonSurvol: #540726;
  --caseIdentique : #c3adc2;
  --caseSelectionnee : #8C4662;
  --grille : #65082D;
  --menuUtilisateur : #65082D;
  --ombrePopup : #686868;
  --ombrePrincipal : #B18395;
  --onglet : #ced0ec;
  --ongletActif : #8F95D3;
  --ongletActifSurvol : #6973C5;
  --ongletSurvol : #B3B6E1;
  --score : #dd2a2a;
  --sectionArrierePlan : #e3e4f4;
  --sectionArrierePlanSombre: #e3e4f4;
  --svgDefaut : #270211;
  --svgMenu : #FFFFFF;
  --texteBouton : #FFFFFF;
  --texteCaseModifiee : #8C4662;
  --texteMenu : #FFFFFF;
  --texteNormal : #270211;
  --texteScore : #FFFFFF;
  --texteErreur: #ff0000;
  transition: all 0.3s;
}

html.sombre {
  --arrierePlan: #12060B;
  --bouton : #7a8ca7;
  --boutonActif: #3b434e;
  --boutonSurvol: #535f70;
  --caseIdentique: #4D1E33;
  --caseSelectionnee: #702841;
  --grille : #7a8ca7;
  --menuUtilisateur : #7a8ca7;
  --ombrePopup : #272727;
  --ombrePrincipal: #6973C5;
  --onglet: #5F649E;
  --ongletActif: #9FA5E6;
  --ongletActifSurvol: #AEB4FF;
  --ongletSurvol: #7F85C4;
  --score : #ab1717;
  --sectionArrierePlan: #3F4268;
  --sectionArrierePlanSombre: #2C2E49;
  --svgDefaut : #F5F5F5;
  --svgMenu : #F5F5F5;
  --texteBouton : #F5F5F5;
  --texteCaseModifiee : #b65678;
  --texteMenu : #F5F5F5;
  --texteNormal: #F5F5F5;
  --texteScore : #F5F5F5;
  --texteErreur: #ff0000;
  transition: all 0.3s;
}

/* Polices */

@font-face {
  font-family: "Berlin";
  font-weight: 400;
  src: url("../fonts/berlin-sans-fb-demi/BRLNSDB.TTF") format("truetype");
}

@font-face {
  font-family: "OpenDyslexic";
  font-weight: 400;
  src: url("../fonts/open_dyslexic/OpenDyslexic-Regular.otf") format("opentype");
}

/* --------------------------------------------------  RESET CSS  --------------------------------------------------*/

/* enlever les marges naturelles + reset du body/html */
html,
body,
header {
  margin: 0 auto;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* tous les élements, et pseudo-éléments héritent de la valeur de box-sizing du parent */
*,
*:before,
*:after {
  box-sizing: inherit;
}

h1, h2, h3, h4, h5, h6, p, a {
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  font-family: "Berlin";
}


/* enlever le style des listes */
ul,
ol {
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* corriger l’affichage des images */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

p {
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------  GENERAL  --------------------------------------------------*/

/* Principal */

* {
  font-family: "inter";
  font-size: 18px;
  cursor: default;
  user-select: none;
}

.horizontal {
  flex-direction: row;
}

.vertical {
    flex-direction: column;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100dvh - 100px);
  padding: 10px 0px;
  margin: 60px auto 40px auto;
  background-color: var(--arrierePlan);
}

#conteneur_principal {
  position: relative;
  display: flex;
  align-self: center;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
}

sup {
  line-height: 0px;
}

section {
  display: flex;
  flex-direction: column;
  width: calc(100vw - 50px);
  padding: 20px;
  margin: 0px 25px;
  border-radius: 20px;
  background-color: var(--sectionArrierePlan);
  max-width: 100%;
}

svg {
  fill: var(--svgDefaut);
}

/* Texte */

a, a:visited:not(.bouton) {
  text-decoration: none;
  color: var(--texteNormal);
  cursor: pointer;
}

p {
  margin: 0;
  padding: 0;
  color: var(--texteNormal);
  cursor: inherit;
}

h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: bold;
  text-align: center;
}

h2 {
  font-size: clamp(1.5rem, 3.75vw, 1.6rem);
  text-align: center;
}

h3 {
  font-size: clamp(1.25rem, 3.125vw, 1.333rem);
  text-align: center;
}

h1, h2, h3, label {
  color: var(--texteNormal);
}

/* Images */

img, svg, path {
  cursor: inherit;
}

/* Tableaux */

td {
  color: var(--texteNormal);
}

/* Boutons */

.boutonPrincipal {
  background-color: var(--bouton);
  color: var(--texteBouton);
  font-size: clamp(1rem, 2.34vw, 1.33rem);
  font-weight: bold;
  text-align: center;
  box-shadow: 0px 4px 4px 0px var(--ombrePopup);
  transition: all 0.5s ease;
}

.boutonPrincipal:hover {
  background-color: var(--boutonSurvol)
}

.boutonPrincipal:active {
  background-color: var(--boutonActif);
  transition: filter 0.1s ease;
}

.boutonLarge {
  display: block;
  height: 40px;
  line-height: 40px;
  min-width: 240px;
  padding: 0px 15px;
}

.boutonDefaut {
  height: 40px;
  line-height: 40px;
  min-width: 140px;
  padding: 0px 15px;
}

/* Onglets */

.onglets {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
}

.onglets>p {
  height: 40px;
  line-height: 40px;
  width: 100%;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.onglet_actif {
  color: var(--arrierePlan);
  background-color: var(--ongletActif);
  border-radius: 10px;
  transition: all 0.5s ease;
}

.onglet_actif:hover {
  background-color: var(--ongletActifSurvol);
}

.onglets>p:not(.onglet_actif) {
  background-color: var(--onglet);
  border-radius: 10px;
  transition: all 0.5s ease;
  cursor: pointer;
}

.onglets>p:not(.onglet_actif):hover {
  background-color: var(--ongletSurvol);
}

/* Formulaires */

select, input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  height: 40px;
  font-size: 14px;
  padding: 0px 10px;
  border: 2px solid var(--texteNormal);
  border-radius: 5px;
  margin-top: 11px;
  cursor: text;
  background-color: var(--arrierePlan);
  color: var(--texteNormal);
}

select {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path fill="%23000000" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px top 9px;
  cursor: default;
  appearance:none;
  -moz-appearance:none; /* Firefox */
  -webkit-appearance:none; /* Safari et Chrome */
}

.sombre select {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path fill="%23f5f5f5" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
}

input[type="submit"] {
  border: transparent;
  margin: 15px auto 0px auto;
}

label {
  font-weight: bold;
}

form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 30px;
}

form p {
  text-align: left;
}

hr {
  border-top: 1px solid var(--texteNormal);
  width: 80%;
  margin: 30px auto;
}

.formulaire a {
  text-align: center;
}

.formulaire a:last-child {
  margin-top: 15px;
}

.formulaire h1 {
  font-size: 32px;
}

/* Chargement grille */

.chargement {
  display: none;
  min-width: calc(clamp(351px, calc(100vw - clamp(20px, 5vw, 40px)), 720px) * 0.4);
  min-height: calc(clamp(351px, calc(100vw - clamp(20px, 5vw, 40px)), 720px) * 0.4);
  aspect-ratio: 1;
  padding: 10px;
  border-radius: 50%;
  box-sizing: border-box;
  position: absolute;
  mask: conic-gradient(#000 0 0) content-box exclude,conic-gradient(#000 0 0);
  filter: blur(12px);
  margin: 10px auto auto auto;
  top: calc(clamp(351px, calc(100vw - clamp(20px, 5vw, 40px)), 720px) * 0.3);
  left: calc(clamp(351px, calc(100vw - clamp(20px, 5vw, 40px)), 720px) * 0.3);
}

.chargement:before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(#0000 35%, var(--texteCaseModifiee),#0000 65%);
  animation: frame 0.35s linear infinite;
}

@keyframes frame {
  to {rotate: 1turn}
}

/* Chargement salles */

.chargement-petit {
  min-width: 62px;
  min-height: 62px;
  aspect-ratio: 1;
  padding: 10px;
  border-radius: 50%;
  box-sizing: border-box;
  position: absolute;
  mask: conic-gradient(#000 0 0) content-box exclude,conic-gradient(#000 0 0);
  filter: blur(12px);
  margin: 10px auto auto auto;
  top: 47px;
  left: calc(50% - 31px);
}

.chargement-petit:before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(#0000 35%, var(--texteCaseModifiee),#0000 65%);
  animation: frame 0.35s linear infinite;
}

/* Erreurs */

form .formulaire_erreur {
  border-color: var(--texteErreur);
  color: var(--texteErreur);
}

/* ------------------------------------------------  ACCESSIBILITE  ------------------------------------------------*/

.dyslexique *, .dyslexique h1, .dyslexique h2, .dyslexique #regles h2, .dyslexique h3 {
  font-family:"OpenDyslexic";
  font-size-adjust: 0.4;
}

/* ----------------------------------------------  MOBILE (<= 575px)  ----------------------------------------------*/

/* Header */

header {
  position: fixed;
  display: flex;
  overflow: visible;
  justify-content: center;
  width: 100%;
  background-color: var(--arrierePlan);
  box-shadow: 0px 4px 4px var(--ombrePrincipal);
  z-index: 4;
}

header>div {
  display: flex;
  justify-content: space-between;
  justify-self: center;
  align-items: center;
  padding: 0px 25px;
  width: 100vw;
  max-width: 1200px;
  height: 60px;
  background-color: var(--arrierePlan);
}

nav {
  display: none;
}

.logo {
  width: 95px;
}

#utilisateur {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

#utilisateur svg {
  width: 49px;
  height: 49px;
  min-width: 49px;
  min-height: 49px;
}

#menu_burger {
  margin-left: 5px;
}

#menu_burger > input[type = "checkbox"] {
  position: absolute;
  width: 49px;
  height: 49px;
  margin: 0px;
  opacity: 0;
  cursor: pointer;
}

#menu_burger > input[type = "checkbox"]:checked~.menu_burger {
  display: flex;
}

.menu_burger {
  position: fixed;
  display: none;
  flex-direction: column;
  left: 0px;
  top: 60px;
  min-width: 100vw;
  background-color: var(--arrierePlan);
  padding: 0px 25px;
  box-shadow: inset 0px 4px 4px var(--ombrePrincipal), 0px 4px 4px var(--ombrePrincipal);
  z-index: 3;
}

.menu_burger a {
  height: 55px;
  line-height: 55px;
  font-size: 24px;
  text-align: center;
  border-bottom: 1px solid var(--sectionArrierePlan);
}

.menu_burger p {
  height: 55px;
  line-height: 55px;
  font-size: 24px;
}

.menu_burger a.menu_burger_sans_bord, .menu_burger a:last-child {
  border-bottom: none;
}

.menu_burger>div:first-of-type {
  border-top: 1px solid var(--texteNormal);
}

#menu_utilisateur {
  display: none;
}

.switch {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--sectionArrierePlan);
}

.switch p {
  width: 215px;
}

.switch_input {
  display: none;
}

.switch_label {
  display: inline-block;
  height: 36px;
  width: 90px;
  margin: 0px 10px;
  background-color: var(--texteNormal);
  position: relative;
  transition: all 0.3s;
  border-radius: 18px;
  cursor: pointer;
}

.switch_label:after {
  content: "";
  height: 26px;
  width: 26px;
  background-color: var(--arrierePlan);
  position: absolute;
  top: 5px;
  left: 5px;
  transition: all 0.3s;
  border-radius: 50%;
}

.switch_input:checked+.switch_label:after {
  transform: translateX(54px);
}

/* Accueil */

#accueil_haut {
  margin-bottom: 30px;
}

#accueil_haut>img {
  display: none;
}

#accueil_haut img {
  width: min(41vw, 268px);
  height: min(41vw, 268px);
  margin: 0px auto;
}

#accueil_haut>div, #accueil_bas {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#boutons_centre {
  display: none;
}

#boutons_haut {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-self: center;
  margin: 30px 0px;
}

/* Connexion / Inscription */

#conteneur_principal>img {
  display: none;
}

.formulaire img {
  display: none;
}

input[type="checkbox"] {
  height: 20px;
  width: 20px;
  cursor: pointer;
}

.conditions {
  display: flex;
  flex-direction: column;
}

.conditions div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.conditions label, .conditions a {
  font-size: 15px;
}

/* Profil */

#infos_compte {
  margin: 10px auto 0px auto;
  max-width: 400px;
}

#infos_compte>div:first-child {
  display: none;
}

#infos_compte>div:nth-child(2) p {
  line-height: 25px;
  text-align: center;
}

#infos_compte>div:last-child {
  display: flex;
  justify-content: space-around;
}

#infos_compte>div:last-child svg {
  width: 40px;
  height: 40px;
  min-width: 40px;
  max-width: 40px;
  fill: var(--texteBouton);
}

#infos_compte>div>p:nth-child(odd) {
  font-weight: bold;
}

#infos_compte p {
  text-align: left;
}

#statistiques {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 15px;
  min-height: calc(100vh - 367px);
}

#statistiques table {
  text-align: center;
  width: min(1120px, calc(100vw - 80px))
}

#statistiques td, #statistiques tr {
  cursor: auto;
  width: 20%;
  height: 54px;
}

#statistiques_solo {
  display: flex;
}

#statistiques_cooperatif, #statistiques_competitif {
  display: none;
}

.statistiques {
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 10px;
  background-color: var(--sectionArrierePlanSombre);
  border-radius: 10px;
}

.statistiques h3 {
  margin-bottom: 10px;
  font-size: clamp(1.5rem, 3.75vw, 1.6rem);
}

.statistiques p {
  font-size: clamp(1rem, 2.125vw, 1.333rem);
}

.statistiques>p:first-child {
  font-weight: bold;
  margin-bottom: 10px;
}

.statistiques_mode {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
}

.statistiques_mode p:nth-child(odd) {
  font-weight: bold;
}

.statistiques_mode>div p {
  text-align: center;
}

.statistiques_mode>div p:first-child {
  line-height: 25px;
  height: 25px;
}

.statistiques_mode>div p:last-child {
  line-height: 40px;
  height: 40px;
}

.statistiques_mode div {
  width: 50%;
}

.statistiques_mode div:last-child {
  flex-grow: 2;
}

.onglets_stats {
  margin-top: 10px;
  max-width: 840px;
}

.score_principal {
  border-radius: 25px;
  background-color: var(--score);
  color: var(--texteScore);
  padding: 0 10px;
}

.score_large {
  line-height: 25px;
  min-width: 100px;
  text-align: center;
}

.dernieres_parties_mobile {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 100%;
}

.dernieres_parties, .dernieres_parties_mobile p {
  text-align: center;
}

.dernieres_parties_mobile p {
  font-weight: bold;
  margin: 10px 0px 5px 0px;
}

.dernieres_parties_mobile div {
  display: flex;
}

.dernieres_parties_mobile div>div {
  flex-direction: column;
  width: 33%;
}

.dernieres_parties_mobile div p {
  margin: 0px;
  font-weight: normal;
}

.aucune_partie {
  margin: auto 0px;
  height: 30px;
}

.dernieres_parties_mobile div.aucune_partie p {
  width: 100%;
}

.dernieres_parties {
  display: none;
}

/* Jeu solo */

#titre_jeu {
  text-align: center;
}

#menu_partie {
  position: absolute;
  display: none;
  transform: translateX(-50%);
  top: unset;
  bottom: 45px;
}

.boutons_difficulte {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}

.boutons_difficulte button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  background-color: var(--caseIdentique);
  width: 80px;
  height: 80px;
  transition: all 0.5s ease;
}

.boutons_difficulte button svg {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
}

.boutons_difficulte button:hover {
  background-color: var(--ombrePrincipal);
}

.boutons_difficulte button:active {
  background-color: var(--caseSelectionnee);
  transition: all 0.1s ease;
}

#conteneur_jeu {
  filter: opacity(0.40);
  justify-content: space-between;
}

.grille {
  position: relative;
  margin-top: 10px;
  border-radius: clamp(10px, 2vw, 20px);
  border: 6px solid var(--grille);
  border-spacing: 0px;
  min-width: clamp(351px, calc(100vw - clamp(20px, 5vw, 40px)), 720px);
  min-height: clamp(351px, calc(100vw - clamp(20px, 5vw, 40px)), 720px);
}

#grille {
  font-weight: bold;
}

#grille p {
  font-size: clamp(1rem, 5vw, 2rem);
}

#grille ul {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  top: 5%;
  left: 5%;
  width: 95%;
  height: 95%;
}

#grille li {
  width: 30%;
  height: 30%;
  font-weight: lighter;
  font-size: clamp(10px, 3.2vw, 20px);
  line-height: clamp(10px, 3.2vw, 20px);
}

.grille td {
  position: relative;
  height: 35px;
  width: 35px;
  border: 1px solid var(--grille);
  text-align: center;
}

.grille td:focus{
  outline: none;
}

.grille tr:nth-child(4) td {
  border-top: 4px solid var(--grille);
}

.grille tr:nth-child(6) td {
  border-bottom: 4px solid var(--grille);
}

.grille tr:first-child td:first-child {
  border-radius: clamp(5px, 1vw, 10px) 0 0 0;
}

.grille tr:first-child td:last-child {
  border-radius:  0 clamp(5px, 1vw, 10px) 0 0;
}

.grille tr:last-child td:first-child {
  border-radius:  0 0 0 clamp(5px, 1vw, 10px);
}

.grille tr:last-child td:last-child {
  border-radius:  0 0 clamp(5px, 1vw, 10px) 0;
}

.grille tr td:nth-child(4) {
  border-left: 4px solid var(--grille);
}

.grille tr td:nth-child(6) {
  border-right: 4px solid var(--grille);
}

.grille tr:first-child td {
  border-top: none;
}

.grille tr:last-child td {
  border-bottom: none;
}

.grille tr td:first-child {
  border-left: none;
}

.grille tr td:last-child {
  border-right: none;
}

.celluleBleue {
  background-color: var(--sectionArrierePlan);
}

.selected {
  background-color: var(--caseIdentique) !important;
}

.selected_highlight, .selected_highlight p {
  background-color: var(--caseSelectionnee) !important;
  color: var(--arrierePlan);
}

.selected_highlight:not(.celluleFixe) {
  font-weight: normal;
}

.boutons_haut {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.boutons_ronds {
  display: flex;
  align-items: center;
  gap: 5px;
  width: clamp(180px, 40vw, 250px);
}

.boutons_ronds>button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(50px, 10vw, 65px);
  height: clamp(50px, 10vw, 65px);
  border-radius: 50%;
}

#bouton_pause_play {
  display: none;
}

.boutons_ronds svg {
  width: clamp(30px, 10vw, 37px);
  height: clamp(30px, 10vw, 37px);
  min-width: clamp(30px, 10vw, 37px);
  min-height: clamp(30px, 10vw, 37px);
}

#pave_numerique {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
  width: calc(3*(clamp(35px, 10vw, 90px)) + 10px);
  height: calc(3*(clamp(35px, 10vw, 90px)) + 10px);
}

#pave_numerique button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(35px, 10vw, 90px);
  height: clamp(35px, 10vw, 90px);
  max-width: 80px;
  max-height: 80px;
  font-size: clamp(1rem, 5vw, 2rem);
  gap: 2px;
}

#interface_de_jeu {
    margin-top: 10px;
}

#interface_de_jeu>div:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
  height: calc(3*(clamp(35px, 10vw, 90px)) + 10px);
}

#interface_de_jeu>div:last-child {
  position: relative;
  text-align: center;
}

#bouton_jeu {
  width: 250px;
  height: 40px;
  line-height: 40px;
}

td, #pave_numerique button, .boutons_difficulte button {
  pointer-events: all;
  cursor: pointer;
}

td:not(.celluleFixe, .selected_highlight) p {
  color: var(--texteCaseModifiee);
  font-weight:normal;
}

td:not(.celluleFixe, .selected_highlight) li {
  color: var(--texteCaseModifiee);
}

.boutonPave {
  text-align: center;
  background-color: var(--sectionArrierePlan);
  box-shadow: 0px 2px 2px 0px var(--ombrePopup);
  transition: filter 0.5s ease;
  border-radius: 10px;
}

.boutonPave:hover {
  filter: brightness(0.94);
}

.score_global {
  font-weight: bold;
}

.score_global_valeur {
  font-size:50px;
  line-height: 80px;
}

.score_golbal_evolution {
  font-size: 32px;
}

.victoire {
  color: green;
}

.defaite {
  color: var(--score);
}

/* Salon */

#salon_instructions {
  margin: 10px auto;
  text-align: center;
  max-width: 725px
}

#salon {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#salles {
  position: relative;
  margin-top: 15px;
  align-items: center;
  min-height: 123px;
}

#salles h2 {
  margin-bottom: 10px;
}

#salles .score_petit {
  font-size: 16px;
  text-align: center;
  width: 60px;
  height: 22px;
  line-height: 22px;
}

#salles .erreur_liste_salles {
  display: none;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.erreur_liste_salles p {
  text-align: center;
}

.salle {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-self: center;
  width: 100%;
  max-width: 400px;
}

.salle p {
  height: 24px;
  line-height: 24px;
}

.salle>div {
  width: 100%;
  margin: 2px 0px;
}

.salle>div>div {
  display: flex;
  gap: 10px;
}

.salle>div>div p:first-child {
  width: 100px;
}

.salle a {
  min-width: 110px;
  margin: auto 0px;
}

#liste_salles {
  display: none;
  flex-direction: column;
}

#liste_salles p {
  text-align: center;
}

#salles_cooperatif, #salles_competitif {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#salles_competitif {
  display: none;
}

.message_salles {
  justify-content: center;
  height: 50px;
}

.onglets_salles {
  flex-direction: row;
  margin-bottom: 10px;
}

/* Multijoueur */

#infos_multijoueur {
  display: flex;
  justify-content: space-between;
  margin: 0px auto;
  max-width: 400px;
}

#infos_multijoueur p {
  font-size: 16px;
}

#infos_multijoueur>div {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

#infos_multijoueur>div:first-child {
  justify-content: flex-start;
  padding-left:25px;
}

#infos_multijoueur>div:last-child {
  justify-content: flex-end;
  padding-right:25px;
}

#infos_multijoueur>div:first-child:hover #joueur_1, #infos_multijoueur>div:last-child:hover #joueur_2 {
  display: flex;
  flex-direction: column;
  text-align: center;
}

#infos_multijoueur svg {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}

#infos_multijoueur>div>img {
  position: absolute;
}

#infos_multijoueur>div>img:first-child {
  left: 0px;
}

#infos_multijoueur>div>img:last-child {
  right: 0px;
  transform: scaleX(-1);
}

#infos_multijoueur .info_joueur_gauche {
  left: calc(10px);
}

#infos_multijoueur .info_joueur_droite {
  left: auto;
  right: calc(10px);
}

#infos_multijoueur .info_joueur_gauche>svg {
  left: calc(15% - 20px);
}

#infos_multijoueur .info_joueur_droite>svg {
  left: calc(85% - 20px);
}

.score_petit {
  height: 22px;
  line-height: 22px;
  width: 50px;
  text-align: right;
}

.score_petit_droite {
  text-align: left;
}

#joueurs {
  display: flex;
  justify-content: center;
  gap: 20%;
}

#joueurs>div>div {
  position: relative;
}

#joueurs img, #joueurs svg {
  margin: auto;
}

 #joueurs svg {
  width: 70px;
  height: 70px;
  min-width: 70px;
  min-height: 70px;
 }

#joueurs>div>div>img {
  position: absolute;
  left: 50%;
  top: 50%;
  display: none;
}

/* Classements */

#classements {
  margin-top: 10px;
}

#classements section {
  min-height: min(680px, calc(100dvh - 230px));
}

#classements>section:not(:first-child), #classements_cooperatif, #classements_competitif {
  display: none;
}

#classements>section:first-child {
  max-width: 360px;
}

.onglets_classements {
  flex-direction: row;
  margin-bottom: 10px;
}

.onglets_classements p svg {
  margin: 2px auto;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}

.top_3 {
  position: relative;
  text-align: center;
  min-height: 184px;
  background-color: var(--onglet);
  border-radius: 15px;
}

.top_3>div {
  position: relative;
  width: 95px;
}

.info_joueur {
  position: absolute;
  display: none;
  width: 250px;
  padding: 20px;
  background-color: var(--menuUtilisateur);
  box-shadow: 0px 4px 4px 0px var(--ombrePopup);
  border-radius: 15px;
  z-index: 2;
}

.info_joueur p {
  text-align: unset;
  color: var(--texteMenu);
}

.info_joueur h3 {
  text-align: center;
  color: var(--texteMenu);
}

.info_joueur_haut {
  left: calc(50% - 125px);
  bottom: calc(100% + 15px);
  z-index: 4;
}

.info_joueur_bas {
  left: calc(50% - 125px);
  top: calc(100% + 15px);
}

.info_joueur_gauche {
  left: calc(-15px);
}

.info_joueur_droite {
  left: auto;
  right: calc(-15px);
}

.info_joueur>div {
  display: flex;
  justify-content: space-between;
  text-align: left;
  margin-top: 10px;
}

.info_joueur>div>div:last-child {
  text-align: right;
}

.top_3>div:hover .info_joueur, .top_10>div:hover .info_joueur {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.info_joueur>svg {
  position: absolute;
  width: 40px;
  height: 40px;
  fill: var(--menuUtilisateur);
}

.info_joueur_haut>svg {
  left: calc(50% - 18px);
  bottom: calc(-20px);
}

.info_joueur_bas>svg {
  left: calc(50% - 20px);
  top: calc(-18px);
  transform: scaleY(-1);
}

.info_joueur_gauche>svg {
  left: calc(25% - 20px);
}

.info_joueur_droite>svg {
  left: calc(75% - 20px);
}

.info_joueur_mobile {
  position: fixed;
  flex-direction: column;
  transform: translateX(-50%) translateY(-50%);
  background-color: var(--sectionArrierePlan);
  width: calc(100vw - 50px);
  top : 50%;
  left : 50%;
  padding: 20px;
  max-width: 400px;
}

.info_joueur_mobile p {
  color: var(--texteNormal);
}

.info_joueur_mobile h3 {
  color: var(--texteNormal);
}

.info_joueur_mobile .bouton {
  width: 150px;
  margin: 10px auto 0px auto;
  justify-content: center;
}

.top_3>div>img {
  position: relative;
  margin: auto;
  z-index: 2;
}

.top_3>div:first-child {
  position: absolute;
  height: calc(62px + 28px + 28px);
  transform: translateX(-50%);
  left: 50%;
  top: 5px;
  z-index: 3;
}

.top_3>div:nth-child(2) {
  position: absolute;
  height: calc(47px + 28px + 28px);
  transform: translateX(-50%);
  left: 20%;
  bottom: 5px;
  z-index: 2;
}

.top_3>div:nth-child(3) {
  position: absolute;
  height: calc(47px + 28px + 28px);
  transform: translateX(-50%);
  left: 80%;
  bottom: 5px;
  z-index: 2;
}

.top_3>div:first-child>p:last-child {
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  top: calc(62px + 23px);
  white-space: nowrap;
}

.top_3>div:not(:first-child)>p:last-child {
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  top: calc(47px + 28px);
  white-space: nowrap;
}

.score_top {
  position: absolute;
  transform: translateX(-50%);
  height: 33px;
  line-height: 33px;
  width: 65px;
  text-align: center;
  left: 50%;
  top: calc(47px - 5px);
  z-index: 1;
}

.score_top_1 {
  top: calc(62px - 10px);
}

.score {
  height: 30px;
  line-height: 30px;
  width: 80px;
  text-align: center;
}

.top_10 {
  display: flex;
  flex-direction: column; 
  justify-content: space-between;
  margin-top: 10px;
  height: calc(min(680px, calc(100dvh - 230px)) - 234px);
}

.top_10>div {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Règles */

#regles {
  margin-top: 10px;
  min-height: min(680px, calc(100dvh - 230px));
}

#regles h2 {
  font-family: "inter";
  font-size: clamp(1.25rem, 3.125vw, 1.333rem);
  text-align: left;
  margin: 15px 0px 0px 0px;
}

#regles>div:not(:first-child) {
  margin: auto 0px;
}

#regles_generalites {
  display: flex;
  flex-direction: column;
  text-align: justify;
}

#regles_processus>div:last-child {
  display: none;
}

#regles_processus>div>div>div {
  margin-top: 15px;
}

#regles_repetez, #regles_processus {
  display: none;
  flex-direction: column;
  justify-content: space-between;
}

#regles_repetez>img, #regles_processus>div>img {
  height: min(50vw, 250px);
  width: min(50vw, 250px);
  margin: 0px auto 15px auto;
}

#regles_generalites p, #regles_repetez p, #regles_processus p {
  margin-top: 15px;
}

/* Administration */

#accueil_administration {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  gap: 15px;
}

#gestion_utilisateurs, #gestion_parties {
  margin-top: 10px;
}

#accueil_administration p, #gestion_utilisateurs p, #gestion_parties p {
  text-align: center;
}

#accueil_administration section, #gestion_utilisateurs, #gestion_parties {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#accueil_administration section>div, #gestion_utilisateurs>div, #gestion_parties>div {
  display: flex;
  margin: 0px auto;
}

#accueil_administration span, #gestion_utilisateurs span {
  font-weight: bold;
}

.administration_actions {
  position: relative;
  width: 60px;
}

#accueil_administration .actions, #gestion_utilisateurs .actions {
  position: absolute;
  display: none;
  gap: 10px;
  background-color: var(--sectionArrierePlan);
  border-radius: 15px;
  box-shadow: 0px 4px 4px 0px var(--ombrePopup);
  padding: 5px;
  top: 0px;
  left: -214px;
}

#accueil_administration svg, #gestion_utilisateurs svg {
  width: 40px;
  height: 40px;
  min-width: 40px;
  max-width: 40px;
  fill: var(--texteBouton);
}

#accueil_administration table, #gestion_utilisateurs table, #gestion_parties table {
  width: 90%;
  max-width: 90%;
  margin: 0px auto;
}

#accueil_administration tr, #gestion_utilisateurs tr, #gestion_parties tr {
  height: 70px;
}

#accueil_administration td, #accueil_administration td div,
#gestion_utilisateurs td, #gestion_utilisateurs td div,
#gestion_parties td, #gestion_parties td div {
  font-size: clamp(0.85rem, 3.125vw, 1rem);
}

#accueil_administration section table:nth-child(4), #gestion_utilisateurs table:first-child, #gestion_parties table:first-child {
  width: 100%;
  max-width: 500px;
  margin: auto;
}

#accueil_administration section table:nth-child(5), #gestion_utilisateurs table:nth-child(2), #gestion_parties table:nth-child(2) {
  display: none;
}

.boutonIcone {
    padding: 10px;
    width: 60px;
    height: 60px;
}

.boutonAdmin {
  width: 250px;
}

.joueurs {
  display: flex;
}

.joueurs img {
  width: 20px;
}

#accueil_administration td>div, #gestion_utilisateurs td>div, #gestion_parties td>div {
  display: flex;
}

#mode_solo div, #mode_cooperatif div, #mode_competitif div {
  display: flex;
  justify-content: space-between;
  width: 250px;
}

input[type="datetime-local"] {
  padding: 0px 10px;
  height: 53px;
  border: 2px solid var(--texteNormal);
  background-color: var(--arrierePlan);
  border-radius: 10px;
}

textarea {
  width: 100%;
  font-size: 14px;
  padding: 10px;
  border: 2px solid var(--texteNormal);
  border-radius: 10px;
  cursor: text;
  background-color: var(--arrierePlan);
}

#bannir_utilisateur form {
  align-items: center;
  max-width: 360px;
}

#bannir_utilisateur form>div:not(.actions-formulaire) {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Footer */

footer {
  position: fixed;
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: var(--arrierePlan);
  box-shadow: 0px 0px 4px var(--ombrePrincipal);
  z-index: 4;
  bottom: 0px;
}

footer>div {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  justify-self: center;
  padding: 0px 25px;
  width: 100vw;
  max-width: 1200px;
  height: 40px;
}

footer>div div {
  display: flex;
  gap: 10px;
}

footer img {
  height: 30px;
}

footer a {
    font-size: 14px;
}

/* Popups */

.popup {
  position: absolute;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  gap: 10px;
  top : 50%;
  left : 50%;
  width: calc(100vw - 50px);
  max-width: 550px;
  border-radius: 15px;
  background-color: var(--sectionArrierePlan);
  box-shadow: 0px 4px 4px 0px var(--ombrePopup);
}

.popup h3 {
  font-size: clamp(1.5rem, 3.75vw, 1.6rem);
}

.popup form {
  margin-top: unset;
  gap: 10px;
}

.popup .bouton {
  margin: unset;
}

.champs_doubles>div>div:not(:first-child) {
  margin-top: 5px;
}

.popup p {
  text-align: center;
}

.onglets_popups {
  max-width: 350px;
}

.actions, .actions-formulaire {
  display: flex;
  justify-content: center;
  gap: 20px;
}

#debut_partie, #fin_partie, #modifier_compte, #supprimer_compte,
#compte_requis, #verif_joueur_pret, #abandon_autre_joueur_partie,
#abandon_debut_partie, #abandon_partie, #erreur, #erreur_salle, #erreur_serveur,
#mail_envoye, #token_invalide, #mdp_reinitialise, #supprimer_utilisateur,
#infos_utilisateur, #bannir_utilisateur, #debannir_utilisateur, #banni {
  position: fixed;
  display: flex;
  transform: translateX(-50%) translateY(-50%);
;
}

#fin_partie, #modifier_compte, #supprimer_compte, #verif_joueur_pret,
#abandon_autre_joueur_partie,#abandon_partie, #abandon_debut_partie, #erreur,
#erreur_salle, #erreur_serveur, #supprimer_utilisateur,
#infos_utilisateur, #bannir_utilisateur, #debannir_utilisateur {
  display: none;
}

#modifier_compte, #supprimer_compte {
  align-items: center;
}

#modifier_compte p, #supprimer_compte p {
  text-align: center;
}

#modifier_compte>p {
  display:none;
}

/* Mentions légales */

.sections_mentions {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 10px;
}

.sections_mentions ul, dl {
  margin: unset;
}

.sections_mentions section {
  gap: 10px;
  scroll-margin-top: 80px;
}

.sections_mentions h2 {
  margin-bottom: 10px;
}

dt {
  font-weight: bold;
}

.sections_mentions li, dd, dt {
  color: var(--texteNormal);
}

/* Settings généraux */

section p {
  text-align: justify;
}

.bouton {
  cursor: pointer;
}

button {
  border: 1px solid transparent;
}

.inactif {
  filter: opacity(0.40);
  cursor: default;
}

.bouton:not(.boutonPave) {
  border-radius: 10px;
}

.boutonProfil {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 125px;
  padding: 10px;
}

.boutonProfil p {
  color: var(--texteBouton);
}

/* Erreurs */

#section_erreur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
}

#section_erreur img {
  width: 403px;
}

/* --------------------------------  MOBILE MODE PAYSAGE ET PLUS GRAND (<= 767 px)  --------------------------------*/

@media (min-width: 576px) {

  /* Accueil */

  #boutons_haut {
    flex-direction: row;
    gap: 15px;
  }

  /* Profil */

  .statistiques_mode div {
    width: 33%;
  }

  .statistiques_mode div:last-child {
    flex-grow: 0;
  }

  /* Jeu solo */

  .boutons_difficulte button {
    width: 120px;
    height: 120px;
    justify-content: center;
  }

   #menu_partie .boutons_difficulte button {
    width: 90px;
    height: 80px;
    justify-content: center;
  }

  .score_large {
    line-height: 30px;
    min-width: 110px;
  }

  /* Salon */

  #salles .erreur_liste_salles {
    height: 62px;
  }

  #salles h2 {
    margin-bottom: 10px;
  }

  .salle>div {
    display: flex;
    justify-content: space-between;
    margin-right: 10px;
    align-items: center;
    height: 50px;
    gap: 10px;
  }

  .salle a {
    min-width: unset;
  }

  /* Multijoueur */

  #infos_multijoueur {
    max-width: 500px;
  }

  #infos_multijoueur p {
    font-size: 18px;
  }

  .score_petit {
    height: 28px;
    line-height: 28px;
    width: 60px;
  }

  /* Classements */

  .onglets.onglets_classements {
    flex-wrap: nowrap;
  }

  /* Règles */

  .onglets_regles {
    margin-bottom: 15px;
  }

  #regles_repetez>img, #regles_processus>div>img {
    height: min(50vw, 350px);
    width: min(50vw, 350px);
  }

  #regles_generalites h2:first-child, #regles_repetez p:first-child, #regles_processus p:first-child {
    margin-top: 0px;
  }

  #regles_processus>div:last-child {
    margin-top: 15px;
  }
}

/* -------------------------------------  TABLETTE ET PLUS GRAND (<= 991 px)  --------------------------------------*/

@media (min-width: 768px) {

  /* Header */

  header>div {
    padding: unset;
    margin: auto 25px;
  }

  nav {
    display: flex;
    gap: 2.2vw;
  }

  nav a {
    padding: 10px;
  }

  nav a:hover {
    background-color: var(--menuUtilisateur);
    border-radius: 10px;
  }

  #utilisateur {
    gap: 20px;
    padding: 0px 10px;;
    right: -10px;
    margin: 10px 0px;
  }

  #utilisateur:hover, #utilisateur:focus, #utilisateur:focus-within {
    background-color: var(--menuUtilisateur);
    border-radius: 10px 10px 0px 0px;
  }

  nav a:hover,nav a:visited:hover, #utilisateur:hover a, #utilisateur:focus a, #utilisateur:focus-within a {
    color: var(--texteMenu);
  }

  #utilisateur:hover svg, #utilisateur:focus svg, #utilisateur:focus-within svg {
    fill: var(--texteMenu);
  }

  #utilisateur:hover:after, #utilisateur:focus:after, #utilisateur:focus-within:after {
    content: "";
    display: block;
    position: absolute;
    width: 15px;
    height: 15px;
    background-image:radial-gradient(circle at 0% 0%, transparent 15px, var(--menuUtilisateur) 15px);
    left: -15px;
    bottom: 0px;
  }

  #utilisateur:hover #menu_utilisateur, #utilisateur:focus #menu_utilisateur, #utilisateur:focus-within #menu_utilisateur {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  #menu_burger {
    display: none;
  }

  #menu_utilisateur {
    display: none;
    position: absolute;
    gap: 7px;
    right: 0px;
    top: 49px;
    min-width: 410px;
    background-color: var(--menuUtilisateur);
    border-radius: 10px 0px 10px 10px;
    padding: 10px 10px;
  }

  #menu_utilisateur>div {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 45px;
    padding: 0px 5px;
  }

  #menu_utilisateur>div svg {
    fill: var(--svgMenu);
    margin: auto 0;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  #menu_utilisateur a, #menu_utilisateur p {
    color: var(--texteMenu);
  }

  #menu_utilisateur div:hover {
    background-color: var(--boutonSurvol);
    border-radius: 10px;
  }

  .switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: none;
    width: 100%;
  }

  .switch p {
    width: unset;
  }

  .switch_input {
    display: none;
  }

  .switch_label {
    display: inline-block;
    height: 36px;
    width: 90px;
    margin: unset;
    background-color: var(--texteNormal);
    position: relative;
    transition: all 0.3s;
    border-radius: 18px;
  }

  .switch_label:after {
    content: "";
    height: 26px;
    width: 26px;
    background-color: var(--arrierePlan);
    position: absolute;
    top: 5px;
    left: 5px;
    transition: all 0.3s;
    border-radius: 50%;
  }

  /* Profil */

  #infos_compte {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 900px;
  }

  #infos_compte>div:first-child {
    display: flex;
    line-height: 25px;
    gap: 20px;
  }

  #infos_compte>div:last-child {
    gap: 20px;
  }

  #infos_compte>div:first-child>div:first-child {
    font-weight: bold;
  }

  #infos_compte>div:nth-child(2) p {
    display: none;
  }

  .score_large {
    line-height: 35px;
    min-width: 120px;
  }

  .dernieres_parties {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    height: 210px;
    margin-top: 0px;
  }

  .dernieres_parties div {
    display: flex;
    justify-content: center;
  }

  .dernieres_parties>div:first-child p {
    font-weight: bold;
  }

  .dernieres_parties>div:not(.aucune_partie)>p {
    width: 20%;
    line-height: 35px;
    text-align: center;
  }

  .dernieres_parties_mobile {
    display: none;
  }

  /* Accueil */

  #accueil_haut img {
    display: none;
  }

  #accueil_haut>img {
    display: block;
    width: min(41vw, 268px);
    height: min(41vw, 268px);
    margin: auto;
  }

  #accueil_haut {
    flex-direction: row;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 20px;
    gap: 30px;
  }

  #accueil_haut>div:last-child {
    display: flex;
    flex-direction: column;
    text-align: justify;
    gap: 15px;
  }

  #boutons_haut {
    display: none;
  }

  #boutons_centre {
    display: flex;
    gap: 80px;
    align-self: center;
    margin-bottom: 20px;
  }

  /* Connexion / Inscription */

  #conteneur_principal {
    width: calc(100vw - 50px);
  }

  #conteneur_principal>img {
    display: block;
    margin: auto;
    width: min(35vw, 456px);
    height: min(35vw, 456px);
  }

  /* Salon */

  #salon {
    flex-direction: row;
    justify-content: center;
    align-self: center;
    width: calc(100vw - 50px);
    max-width: 1200px;
  }

  #salon section {
    margin: unset;
    width: unset;
  }

  #salon section:first-child {
    width: 33%;
  }

  #salon section:last-child {
    width: 66%;
  }

  #salon h2 {
    text-align: center;
  }

  #salon form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    margin-top: 15px;
  }

  #salon section form input[type="submit"] {
    min-width: unset;
    width: 200px;
  }

  #salon section:last-child form {
    display: flex;
    flex-direction: row;
    align-items: end;
    height: unset;
  }

  #salon section:last-child form input[type="submit"] {
    margin-top: unset;
    min-width: unset;
    width: 200px;
  }

  /* Classements */

  #classements {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    width: calc(100vw - 50px);
    max-width: 1200px;
  }

  #classements>section:first-child {
    display: none;
  }

  #classements>section:not(:first-child) {
    display: flex;
    margin: unset;
    max-width: 360px;
    padding: clamp(15px, 2vw, 30px);
  }

  #classements>section:not(:first-child)>div:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  #classements svg {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
  }

  .top_10 {
    min-height: 260px;
    height: 100%;
  }

  /* Regles */

  #regles_processus>div>div>div {
    display: none;
  }

  #regles_processus>div:last-child {
    display: flex;
    flex-direction: column;
  }

  #regles_processus>div:last-child {
    flex: 2;
  }

  #regles_processus>div:first-child {
    display: flex;
  }

  #regles_repetez, #regles_processus>div:first-child {
    flex-direction: row;
    gap: 30px;
    align-items: center;
  }

  #regles_repetez>img, #regles_processus>div>img {
    height: min(41vw, 350px);
    width: min(41vw, 350px);
    margin: auto;
  }

  /* Administration */

  #accueil_administration table, #gestion_utilisateurs table, #gestion_parties table {
    text-align: center;
  }

  #accueil_administration tr, #gestion_utilisateurs tr, #gestion_parties tr {
    height: unset;
  }

  #accueil_administration td, #gestion_utilisateurs td, #gestion_parties td {
    cursor: default;
  }

  #accueil_administration table#utilisateurs tr th:last-child, #accueil_administration table#utilisateurs tr td:last-child,
  #gestion_utilisateurs table#utilisateurs tr th:last-child, #gestion_utilisateurs table#utilisateurs tr td:last-child {
    width: 200px;
  }

  #accueil_administration section table:nth-child(4), #gestion_utilisateurs table:first-child, #gestion_parties table:first-child {
    display: none;
  }

  #accueil_administration section table:nth-child(5), #gestion_utilisateurs table:nth-child(2), #gestion_parties table:nth-child(2) {
    display: table;
  }

  .administration_actions_large {
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  .joueurs {
    display: flex;
    justify-content: center;
  }

  #mode_solo div, #mode_cooperatif div, #mode_competitif div {
    width: 350px;
  }

  /* Footer */

  footer>div {
    height: 60px;
    padding: unset;
    margin: auto 25px;
  }

  footer a {
    font-size: 18px;
  }

  footer img {
    height: unset;
  }

  /* Popups */

  .popup .boutonDefaut {
    min-width: 250px;
  }

  /* Settings généraux */

  main {
    min-height: calc(100dvh - 120px);
    margin: 60px auto 60px auto;
  }

  h2, h3 {
    text-align: left;
  }

  .bouton {
    border-radius: 15px;
  }

  .boutonDefaut {
    min-width: 280px;
  }

  .onglets {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  .onglets>p {
    width: 45%;
  }

  .formulaire {
    max-width: 350px;
    margin: 0px auto 0px 5vw;
  }
}

/* --------------------------------  ORDINATEUR BUREAU ET PLUS GRAND (<= 1199 px)  ---------------------------------*/

@media (min-width: 992px) {

  /* Header */

  header a, header p {
    font-size: 24px;
  }

   .logo {
    width: 135px;
  }

  #utilisateur>img {
    width: 49px;
  }

  /* Connexion / Inscription */

  .formulaire img {
    display: block;
    width: 271px;
    margin: 0px auto 30px auto;
  }

  /* jeu solo */

  .separateur_haut {
    display: flex;
    align-items: end;
    justify-content: space-between;
    max-width: 1200px;
    width: 100%;
  }

  .large {
    min-width: calc(clamp(351px, calc(100vw - clamp(20px, 5vw, 40px) - 40vw), 720px) + 40vw);
  }

  #titre_jeu {
    text-align: left;
    align-items: start;
  }

  #conteneur_jeu {
    display: flex;
    margin: 10px 25px 0px 25px;
    width: 100%;
  }

  .grille {
    margin: unset;
    min-width: min(100dvh - 190px, clamp(351px, calc(100vw - clamp(20px, 5vw, 40px) - 40vw), 720px));
    min-height: min(100dvh - 190px, clamp(351px, calc(100vw - clamp(20px, 5vw, 40px) - 40vw), 720px));
  }

  #grille p {
    font-size: clamp(1rem, 3vw, 2rem);
  }

  #menu_partie {
    width: 40vw;
    bottom: 85px;
  }

  #interface_de_jeu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: end;
    gap: 10px;
    margin-top: unset;
    width: 40vw;
  }

  #interface_de_jeu>div {
    flex-direction: column;
    justify-content: space-around;
  }

  #interface_de_jeu>div:first-child {
    justify-content: space-between;
    height: 100%;
    margin-bottom: unset;
  }

  #interface_de_jeu>div:last-child {
    width: calc(min(100dvh - 200px, clamp(351px, calc(100vw - clamp(20px, 5vw, 40px) - 40vw), 720px)) - 206px);
    min-width: 380px;
    max-width: 400px;
  }

  .boutons_haut {
    flex-direction: row;
    justify-content:space-around;
    margin-top: unset;
  }

  .boutons_haut>div {
    width: 180px;
  }

  .boutons_ronds {
    flex-direction: column;
    width: unset;
  }

  .boutons_ronds>button {
    width: 90px;
    height: 90px;
    border-radius: 50%;
  }

  .boutons_ronds svg {
    width: 50px;
    height: 50px;
  }

  #pave_numerique {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    width: calc(min(100dvh - 200px, clamp(351px, calc(100vw - clamp(20px, 5vw, 40px) - 40vw), 720px)) - 206px);
    max-width: 400px;
    height: calc(min(100dvh - 200px, clamp(351px, calc(100vw - clamp(20px, 5vw, 40px) - 40vw), 720px)) - 206px);
    max-height: 400px;
    margin: auto;
  }

  #pave_numerique button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 30%;
    max-width: 120px;
    max-height: 120px;
    font-size: 2rem;
    margin: unset;
  }

  #bouton_jeu {
    height: 80px;
    width: 88%;
    line-height: 80px;
  }

  /* Profil */

  #modifier_compte>form>div:nth-child(3) {
    display: flex;
    flex-direction: column;
    margin: auto;
  }

  #supprimer_compte>form>div:first-child {
    display: flex;
    flex-direction: column;
    margin: auto;
  }

  .score_large {
    line-height: 40px;
    min-width: 130px;
  }

  #statistiques {
    min-height: min(544px, calc(100vh - 367px));
  }

  .statistiques_mode div {
    width: 20%;
  }

  /* Salon */

  #salon section:last-child form input[type="submit"] {
    margin-bottom: 6px;
  }

  /* Multijoueur */

  #infos_multijoueur {
    margin: unset;
    width: 40vw;
    max-width: 400px;
  }

  /* Regles */

  #regles_processus>div>div>div {
    display: flex;
    flex-direction: column;
  }

  #regles_processus>div:last-child {
    display: none;
  }

  #regles_repetez>img, #regles_processus>div>img {
    height: 400px;
    width:400px;
  }

  /* Administration */

  textarea {
    width: 360px;
  }

  /* Popups */

  .popup_large {
    min-width: 850px;
  }

  .popup input[type="text"], .popup input[type="email"], .popup input[type="password"], input[type="datetime-local"] {
    width: 360px;
  }

  .popup_large .boutonDefaut {
    min-width: 280px;
  }

  /* Settings généraux */

  select, input[type="text"], input[type="email"], input[type="password"], input[type="datetime-local"] {
    height: 53px;
    font-size: 24px;
    padding: 0px 20px;
    border-radius: 10px;
  }

  label {
    font-size: 24px;
  }

  .boutonProfil {
    width: 150px;
  }

  .onglets {
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
  }

  .onglets>p {
    width: 33%;
  }

  .formulaire {
    max-width: 435px;
    height: fit-content;
    margin: auto auto auto 5vw;
  }

  .formulaire form {
    margin: 30px auto 0px auto;
  }

  .formulaire form div {
    width: 360px;
  }

  .champs_doubles{
    display: flex;
    flex-direction: row;
    gap: 50px;
    text-align: left;
    margin: auto;
  }

  .champs_doubles>div {
    width: 360px;
  }

  select {
    background-position: right 18px top 18px;
  }

  .chargement {
    min-width: calc(min(100dvh - 190px, clamp(351px, calc(100vw - clamp(20px, 5vw, 40px) - 40vw), 720px)) * 0.6);
    min-height: calc(min(100dvh - 190px, clamp(351px, calc(100vw - clamp(20px, 5vw, 40px) - 40vw), 720px)) * 0.6);
    margin: unset;
    top: calc(min(100dvh - 190px, clamp(351px, calc(100vw - clamp(20px, 5vw, 40px) - 40vw), 720px)) * 0.2);
    left: calc(min(100dvh - 190px, clamp(351px, calc(100vw - clamp(20px, 5vw, 40px) - 40vw), 720px)) * 0.2);
  }
}

/* -----------------------------------------  GRANDS ECRANS (>= 1200 px)  ------------------------------------------*/

@media (min-width: 1200px) {

  /* Jeu solo */

   #conteneur_jeu {
    margin: 10px auto 0px auto;
  }

  #menu_partie .boutons_difficulte button {
    width: 120px;
    height: 120px;
  }

  /* Footer */

  footer {
    margin: auto;
  }

  /* Settings généraux */

  section {
    max-width: 1200px;
    margin: auto;
  }

  .formulaire {
    max-width: 520px;
  }
}