:root {
  color-scheme: light dark;
  --font: 'Anta', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  --couleur-theme-composantes: 0, 70, 128;
  --couleur-theme: rgb(var(--couleur-theme-composantes));
  --couleur-theme-bg-dark: color-mix(in srgb, var(--couleur-theme) 20%, black);  
  --couleur-theme-bg-light: color-mix(in srgb, var(--couleur-theme) 20%, white);
  --couleur-theme-texte-dark: var(--couleur-theme-bg-light);
  --couleur-theme-texte-light: var(--couleur-theme-bg-dark);
  --couleur-bordure: var(--couleur-theme);
  --couleur-bouton: var(--couleur-theme);
  --couleur-fond-input: rgba(var(--couleur-theme-composantes), 0.5);
  --couleur-accentuation: rgba(var(--couleur-theme-composantes), 0.2);
  --couleur-bg:    light-dark(var(--couleur-theme-bg-light),    var(--couleur-theme-bg-dark));
  --couleur-texte: light-dark(var(--couleur-theme-texte-light), var(--couleur-theme-texte-dark));  
  --hauteur-equipe: 60px;
  --largeur-equipe: 150px;
  --ecart-equipe: 50px;  
  --largeur-ecran: 50;
  --hauteur-ecran: 100;
  --bordure-de-texte-epaisseur: 1px;
  --bordure-de-texte: calc(-1 * var(--bordure-de-texte-epaisseur))  0   black, 
                      var(--bordure-de-texte-epaisseur)             0   black, 
                      0 calc(-1 * var(--bordure-de-texte-epaisseur))    black, 
                      0 var(--bordure-de-texte-epaisseur)               black;
}

@media only screen and (min-width: 600px) {
  :root {
    --taille-police: clamp(1rem, 1vw, 2rem);
  }
}

@media only screen and (max-width: 600px) {
  :root {
    --taille-police: clamp(1rem, 2.5vw, 2rem);
  }

  ul {
    padding-inline-start: 20px;
  }
}


body {
  font-size: var(--taille-police);
  margin: 0;
  padding: 0;
  background-color: var(--couleur-bg);
  font-family: var(--font) !important;
  text-rendering: optimizelegibility;
  color: var(--couleur-texte);
}

.theme-defaut {
  color-scheme: light dark;  
  --equipe-arrondi: 0px;
  --lien-arrondi:   0px;  

  #finales {
    .vainqueur::before,
    .vainqueur::after {
      background-color: light-dark(var(--couleur-theme-texte-light), var(--couleur-theme-texte-dark));
    }
  }


}

.theme-bubar {
  --url-logo: url('../img/BubarDartsLogo.png');
  --couleur-jaune-bubar: rgb(216, 255, 80);
  --font: "Anton SC", sans-serif;
  --couleur-theme: black;
  --couleur-bg: black;
  --couleur-bordure: white;
  --couleur-theme-texte-dark: white;
  --equipe-arrondi: 4px;
  --lien-arrondi: 8px;
  font-weight: 400;


  #logo {
    z-index: -1;
    width: inherit;
    height: 30vh;
    background-image: var(--url-logo), var(--url-logo);
    background-position: left top, right top;
    background-repeat: no-repeat, no-repeat;
    background-size: contain, contain;
  }

  #bandeau {
    color: white;
  }

  #presentation {

    .debut,
    .regles div:nth-child(even) {
      color: var(--couleur-jaune-bubar);
    }
  }

  #poules {

    #classement>div:nth-child(even) h1,
    #classement>div:nth-child(even) li:nth-of-type(even) *,
    #classement>div:nth-child(odd) li:nth-of-type(odd) *,
    .match i {
      color: var(--couleur-jaune-bubar);
    }

    #classement>div>div,
    #matchs>div {
      background-color: rgba(0, 0, 0, 0.8);
      border: solid 1px var(--couleur-jaune-bubar);
      border-radius: 8px;
    }

    &.par-support .matchs-supports {
      .cellule-grille {
        background-color: rgba(0, 0, 0, 0.8);
        border-color: var(--couleur-jaune-bubar);
      }

      .col-libelles .cellule-grille {
        background: none;
        border-color: transparent;
      }

      .entete,
      .libelle {
        color: var(--couleur-jaune-bubar);
      }
    }

    /* .match, */
    .equipe {
      font-size: 3vh;
      text-transform: capitalize;
    }
  }

  #finales {

    .lien,
    .lien::before {
      border-color: var(--couleur-jaune-bubar);
    }

    .vainqueur::before,
    .vainqueur::after {
      background-color: var(--couleur-jaune-bubar);
    }

    .nomEquipe {
      color: var(--couleur-jaune-bubar);
    }
  }
}

.theme-bubar.noel {
  --url-logo: url('../img/BubarDartsLogo_noel.png');
}

.theme-bier-market {
  --url-logo: url('../img/Logo_BM.png');
  --couleur-rouge-bm-compo: 156, 73, 87;
  --couleur-bleu-bm-compo: 0, 141, 151;
  --couleur-rouge-clair-bm-compo: 199, 67, 80;
  --couleur-gris-bm: rgb(41, 39, 46);
  --font: "Antonio", sans-serif;
  --couleur-theme: rgb(var(--couleur-bleu-bm-compo));
  --couleur-theme-bg-dark: var(--couleur-gris-bm);
  --couleur-bordure: white;
  --couleur-theme-texte-dark: white;
  --equipe-arrondi: 0px;
  --lien-arrondi:   0px;
  --couleur-bg: var(--couleur-gris-bm);
  --couleur-texte: white;
  font-weight: 400;
  text-shadow: var(--bordure-de-texte);
  /*  font-style: normal;   */

  #logo {

    z-index: -1;
    width: 100vw;
    height: 30vh;
    background-image: var(--url-logo), var(--url-logo);
    background-position: left top, right top;
    background-repeat: no-repeat, no-repeat;
    background-size: contain, contain;
  }

  #bandeau {
    #bandeau-message {
      display: flex;
      flex-direction: row;
      color: rgb(var(--couleur-rouge-clair-bm-compo)) !important;
    }

    #bandeau-img {
      z-index: -1;
      width: 30vh;
      background-image: url('../img/flechette_theo.png');
      background-position: left top;
      background-repeat: no-repeat;
      background-size: contain;
      display: block;
    }

  }


  #poules {

    #classement>div:nth-child(even) h1,
    #classement>div:nth-child(even) li:nth-of-type(even) *,
    #classement>div:nth-child(odd) li:nth-of-type(odd) *,
    .match i {
      color: rgb(255, 255, 255);
    }

    #classement>div>div,
    #matchs>div {
      background-color: rgba(var(--couleur-bleu-bm-compo), 0.2);
      border: solid 1px white;
    }

    .col-matchs .entete {
      color: rgb(var(--couleur-rouge-clair-bm-compo)) !important;
    }

    &.par-support .matchs-supports {
      .cellule-grille {
        background-color: rgba(var(--couleur-bleu-bm-compo), 0.2);
        border-color: white;
      }

      .col-libelles .cellule-grille {
        background: none;
        border-color: transparent;
      }

      .entete,
      .libelle {
        color: rgb(var(--couleur-rouge-clair-bm-compo)) !important;
      }
    }

    /* .match, */
    .equipe {
      font-size: 3vh;
      text-transform: capitalize;
    }
  }

  #finales {

    .lien,
    .lien::before {
      border-color: rgb(var(--couleur-rouge-clair-bm-compo));
    }

    .vainqueur::before,
    .vainqueur::after {
      background-color: rgb(var(--couleur-rouge-clair-bm-compo));
    }

    .nomEquipe,
    .vainqueur {
      color: rgb(var(--couleur-rouge-clair-bm-compo));
      text-transform: capitalize;
    }

    .equipe,
    .vainqueur {
      border-color: rgb(var(--couleur-bleu-bm-compo));
    }
  }

  #podium {
    .marche {
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05), rgba(var(--couleur-bleu-bm-compo), 0.842) 15% 85%, rgba(0, 0, 0, 0.05));
    }
  }
}

.theme-bier-market.noel {
  --url-logo: url('../img/Logo_BM_noel.png');
}

h1,
h2,
h3,
h4 {
  font-family: var(--font) !important;
}

h1 {
  font-size: calc(var(--taille-police) * 2);
}

h2 {
  font-size: calc(var(--taille-police) * 1.75);
}

h3 {
  font-size: calc(var(--taille-police) * 1.5);
}

h4 {
  font-size: calc(var(--taille-police) * 1.25);
}

iframe {
  border: solid 1px var(--couleur-bordure);
}

th,
button.w3-btn,
button.w3-btn i {
  background-color: var(--couleur-bouton);
  color: var(--couleur-theme-texte-dark);
}

button[refto] {
  border-top: var(--couleur-bordure) 3px solid;
  margin-top: var(--taille-police);
  font-size: calc(var(--taille-police) * 2);
}

.surlignage {
  color: greenyellow;
}

.bordure-texte {
  text-shadow: var(--bordure-de-texte);
}


.interrupteur {
  --code-icone-fa: "";
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  .boite {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;

    input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .glissiere {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: solid 1px #abadaf;
      background-color: rgb(171 173 175);
      -webkit-transition: .4s;
      transition: .4s;
    }

    .glissiere:before {
      position: absolute;
      font-family: FontAwesome !important;
      color: rgb(171 173 175);
      content: var(--code-icone-fa);
      height: 26px;
      width: 26px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }

    input:checked+.glissiere {
      background-color: rgb(0 120 212);
      border-color: #7ab8e7;
    }

    input:focus+.glissiere {
      box-shadow: 0 0 1px rgb(0 120 212);
    }

    input:checked+.glissiere:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
      color: rgb(0 120 212);
    }

    .glissiere.round {
      border-radius: 34px;
    }

    .glissiere.round:before {
      border-radius: 50%;
    }
  }
}


.w3-button:hover,
.w3-btn:hover {
  filter: opacity(0.5);
}

button[refto]::after {
  font-family: FontAwesome;
  margin-left: 8px;
  content: '\f107';
}

button[refto]:has(+ div.w3-hide)::after {
  content: '\f106';
}

option:disabled {
  color: grey;
}

#poules [class*="w3-card"],
.ecran [class*="w3-card"] {
  background-color: var(--couleur-accentuation);
}

#poules {
  .equipe:hover {
    cursor: pointer;
    text-decoration: underline;
  }

  .equipe:has(input):hover {
    cursor: default;
    text-decoration: none;
  }

  .equipe:hover .btn-edition {
    opacity: 1;
  }

  .equipe{
    display: flex;
    flex-wrap: nowrap;

    .nomEquipe {
      display:block;
      flex: 1 1 auto;
      min-width: 0;
      overflow-x: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-transform: capitalize;
    }

    .palmares {
      flex: 0 0 auto;
      white-space: nowrap;
    }
  }
}

#vagues {
  tr>td:nth-child(n+2) {
    border-left: var(--couleur-bordure) 1px solid;
  }

  tr:nth-child(odd) {
    background-color: var(--couleur-accentuation);
  }

  tr:has(td:first-child:hover),
  td:hover {
    background-color: rgba(var(--couleur-theme-composantes), 0.5);
    ;
    cursor: pointer;
  }

  .w3-table td {
    vertical-align: text-bottom;
    text-align: center;
  }

  td:not(.termine) div:first-child span {
    display: none;
  }

  td.termine div:first-child span {
    display: flex;
  }

  td.termine {
    opacity: 0.5;
  }

  /* Partie saisie d'une cellule de match */
  td div:nth-child(2) {
    display: none;
  }

  td.en-cours div:nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: center;

    input[type=number] {
      max-width: 30%;
    }
  }

  td.en-cours div:nth-child(2) * {
    margin-right: 2px;
  }

  td div:nth-child(2) label>i {
    font-size: 2rem;
    cursor: pointer;
    transition: color 0.3s ease;
    color: gray;
  }

  td div:nth-child(2) input:checked+label>i {
    color: gold;
  }

}

.w3-input,
.w3-select {
  background-color: var(--couleur-fond-input);
  border-bottom: 0px;
}

input::placeholder {
  font-style: italic;
}

.w3-radio {
  scale: 0.5;
}

.w3-card>div:first-child,
.w3-card>div:first-child i {
  background-color: var(--couleur-bouton);
  color: var(--couleur-theme-texte-dark) !important;
}

.w3-card>div:nth-child(2) {
  background-color: var(--couleur-accentuation);
}

#config div {
  overflow: hidden;
  white-space: nowrap;
}

#config-boutons {
  background-color: var(--couleur-bouton);
  color: var(--couleur-theme-texte-dark);
}

.fa {
  font-family: FontAwesome !important;
}

.btn-edition {
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.btn-suppression:hover {
  color: red;
}

.strabisme {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flexouille {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: start;

  .cols {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 6px;
  }
}


/*##################################################################################################################################*/
/* Style pour Timeline */
.timeline {
  height: 30px;
  background-color: rgba(255, 255, 255, 0.137);
  border: solid 1px rgba(255, 255, 255, 0.3);

  .progression {
    background-color: var(--couleur-bouton);
    opacity: 0.9;
    transition: width 2s ease-in-out;
  }

  .jalons {
    .jalon {
      width: 2px;
      border: solid 1px red;
      background-color: red;
    }

    .periode {
      background-color: rgba(149, 130, 255, 0.19);
      border: solid 1px rgb(0, 0, 0);
      color: rgb(0, 0, 0);
      text-align: center;
    }

    #periode-poules {
      --couleur-frise-poules: 130, 255, 130;
      background-color: rgba(var(--couleur-frise-poules), 0.19);
      border: solid 1px rgb(var(--couleur-frise-poules));
      color: rgb(var(--couleur-frise-poules));
    }

    #periode-finales {
      --couleur-frise-finales: 255, 65, 65;
      background-color: rgba(var(--couleur-frise-finales), 0.19);
      border: solid 1px rgb(var(--couleur-frise-finales));
      color: rgb(var(--couleur-frise-finales));
    }

  }
}


/*##################################################################################################################################*/
/* Style pour modale */
.w3-modal-content {
  background-color: var(--couleur-bg);
  width: 30vw;

  * {
    color: var(--couleur-texte);
  }

  header {
    background-color: var(--couleur-bouton);
  }
}

/*##################################################################################################################################*/
/* Style pour menu contextuel */
.menuContextuel {
  display: flex;
  flex-direction: column;
  font-size: medium;
  background-color: var(--couleur-bg);
  border: solid 1px var(--couleur-bordure);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  z-index: 400;

  .titre {
    padding: 5px;
    border-bottom: solid 1px var(--couleur-bordure);
  }

  .option {
    padding: 0px 5px;
    white-space: nowrap;
  }

  .option:hover {
    background-color: var(--couleur-accentuation);
  }

}

.menuContextuel:hover {
  cursor: pointer;
}

/*##################################################################################################################################*/
/* Style pour l'arbre */
:root {
  --equipe-hauteur: 20px;
  --equipe-largeur: 100px;
  --equipe-bordure-epaisseur: 1px;
  --equipe-arrondi: 2px;
  --equipe-police: 15px;
  --ecart-match: 20px;
  --match-espace: 10px;
  --ecart-equipe: 10px;
  --equipe-largeur-totale: calc(var(--equipe-largeur) + calc(var(--equipe-bordure-epaisseur) * 2));
  --lien-epaisseur: 1px;
  --lien-horizontal-longueur: calc(var(--lien-epaisseur) + calc(var(--ecart-match) / 2));
  --lien-bordure: solid var(--lien-epaisseur);
  --lien-arrondi: 4px;
}

* {
  box-sizing: border-box;
}

#configArbre {
  display: flex;
  column-gap: 20px;

  .slider {
    width: 100%;
  }
}

.arbre {
  --equipe-hauteur-totale: calc(100vh / calc(var(--phase-num) + 2));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100px;
  grid-template-columns: repeat(calc(var(--nb-colonnes)), 1fr);
  grid-template-rows: repeat(var(--phase-num) / 2, 1fr);
  row-gap: var(--match-espace);
  align-items: center;
  min-height: calc(4 * var(--equipe-hauteur-totale));
  max-width: 100vw;

  .match {
    grid-row: var(--row) /span var(--span);
    display: grid;
    height: 100%;
    width: 100%;
    flex-direction: column;
    grid-template-rows: auto auto;
    align-content: space-around;
    align-items: center;

    &:has(div.termine) {
      opacity: 0.5;
    }

    &.gauche {
      padding-left: var(--lien-horizontal-longueur);
      grid-column: var(--col) / span 1;
      grid-template-columns: auto fit-content(1px);
    }

    &.milieu {
      display: flex;
      height: 100%;
      grid-column: var(--col) / span 3;
      flex-direction: row;
      align-items: center;
      align-content: space-between;
    }

    &.droite {
      padding-right: var(--lien-horizontal-longueur);
      grid-column: calc(var(--col) + 2) / span 1;
      grid-template-columns: fit-content(1px) auto;
    }

    &.milieu .equipe {
      margin: 0 var(--lien-horizontal-longueur) 0 var(--lien-horizontal-longueur);
    }

    &.gauche .equipe {
      grid-column: 1 / span 1;
    }

    &.droite .equipe {
      grid-column: 2 / span 1;
    }

    &.en-cours .num-support::before {
      font-family: FontAwesome;
      content: '\f140';
      margin-right: 4px;
    }

    .num-support {
      display: none;
    }

    &.en-cours .num-support {
      display: block;
    }

    &.en-cours .lien {
      .num-support {
        margin-left: -48px;
      }
    }

    &.en-cours.droite .lien {
      .num-support {
        margin-left: 4px;
      }
    }

    .lien {
      display: flex;
      position: relative;
      align-items: center;
      text-overflow: clip;
      z-index: 200;
      border-top: var(--lien-bordure);
      border-bottom: var(--lien-bordure);
      border-radius: var(--lien-arrondi);
      height: calc(100% - calc(var(--equipe-hauteur-totale) - var(--lien-epaisseur)));
      width: calc(var(--lien-horizontal-longueur) + var(--lien-epaisseur));

      &::before {
        content: "";
        position: absolute;
        height: 1px;
        width: 100%;
        margin-top: 50%;
        border-top: solid 1px;
      }

    }

    &.gauche .lien {
      border-right: var(--lien-bordure);
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      grid-row: 1 / span 2;
      grid-column: 2 / span 1;

    }

    &.droite .lien {
      border-left: var(--lien-bordure);
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      grid-row: 1 / span 2;
      grid-column: 1 / span 1;
    }

    &.gauche .lien::before {
      margin-left: 100%;
    }

    &.droite .lien::before {
      margin-left: -100%;
    }
  }

  .equipe,
  .vainqueur {
    border: solid var(--equipe-bordure-epaisseur);
    border-radius: var(--equipe-arrondi);
    width: 100%;
  }

  .equipe:hover {
    background-color: rgba(var(--couleur-theme-composantes), 0.5);
    cursor: pointer;
  }

  .nomEquipe {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh / calc(var(--phase-num) + 2));
    text-align: center;
    font-size: calc(25vh / calc(var(--phase-num) + 2));
    text-transform: capitalize;

    &.termine {
      text-decoration: line-through;
    }

    &.winner {
      background-color: gold;
    }
  }

  .num-support {
    font-size: 4vh;
  }

  .vainqueur {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;

    &::before,
    &::after {
      --largeur-lien-vainqueur: calc(var(--lien-horizontal-longueur) + var(--equipe-bordure-epaisseur));
      content: "";
      position: absolute;
      width: var(--largeur-lien-vainqueur);
      height: var(--lien-epaisseur);
      background-color: var(--couleur-texte);
      z-index: -1;
    }

    &::before {
      transform: translateX(-100%);
    }

    &::after {
      margin-left: 100%;
    }

    .num-support {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, -100%);
    }
  }
}

td.en-attente/*,
.match.en-attente*/ {
  background-color: rgba(255, 0, 0, 0.5);
  animation: blink 1.5s infinite alternate;
}

.termine {
  text-decoration: line-through;
}


body:has(.ecran) {
  display: flex;
  justify-content: center; /* Centre horizontalement */
  align-items: center;
}

.ecran {
  position: relative;
  align-self: center;
  height: calc(var(--hauteur-ecran) * 1vh);
  width:  calc(var(--largeur-ecran) * 1vw);

  &>div {
    height: 100%;
    width: 100%;
  }

  .logo {
    position: absolute;
    top: 0;
    left: 0;
  }

  #presentation {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;

    .titre p {
      text-align: center;
      font-size: 6vw;
      margin: 0;
    }

    .debut {
      font-size: 4vw;
    }

    .debut::before,
    .debut::after {
      font-family: FontAwesome;
      content: "\f05b";
      margin: 0 1.5em;
    }

    .regles {
      display: flex;
      margin-top: auto;
      margin-bottom: auto;
      flex-direction: column;
      max-width: 50vw;

      div {
        display: list-item;
        list-style-type: none;
        font-size: 3vw;
        white-space: pre-wrap;
      }

      div::before {
        display: inline-block;
        font-family: FontAwesome;
        content: "\f140";
        font-weight: 1;
        font-size: 2vw;
        width: 1.5em;
        margin-left: -1.5em;
      }
    }

  }

  #debut.alerte {
    color: red;
    animation: alerte 1.5s infinite alternate;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  #poules {
    position: relative;
    display: flex;
    flex-direction: column;
    
    .classement,
    .matchs {
      padding: 20px 0 20px 0;
      height: 50%;
    }

    .matchs {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }

    .col-matchs {
      position: relative;
      width: 30%;
      height: 100%;
      overflow: hidden;
    }

    .col-matchs.a-venir {
      padding: 0 !important;

      .entete {
        position: relative;
        padding: 8px 16px;
        background-color: color-mix(in srgb, var(--couleur-theme) 20%, var(--couleur-bg)) !important;
        z-index: 100;
      }

      .liste-matchs {
        padding: 8px 16px;
      }

      .liste-matchs.defilement {
        animation: defilementVertical 10s linear infinite;
      }
    }

    .liste-matchs {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .match {
      padding: 5px;
      border: solid 1px;
      border-radius: 5px;
      margin: 5px 0;
      text-align: center;
    }

    .matchs-supports {
      display: none;
    }

    &.par-support {
      .matchs {
        display: none;
      }

      .matchs-supports {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 8px;
        height: 50%;
        padding: 20px 24px 20px 0;
        overflow: hidden;
      }

      .col-support {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow: hidden;
      }

      .col-libelles {
        flex: 0 0 auto;
      }

      .cellule-grille {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 4px 10px;
        border: solid 1px var(--couleur-bordure);
        border-radius: var(--equipe-arrondi, 5px);
        background-color: var(--couleur-accentuation);
      }

      .col-libelles .cellule-grille {
        justify-content: flex-end;
        border: solid 1px transparent;
        background: none;
      }

      .cellule-grille.entete {
        flex: 0 0 auto;
        border: none;
        background: none;
        font-size: clamp(3vh, 4.5vh, 7vh);
        font-weight: bold;
      }

      .cellule-grille.libelle {
        flex: 1 1 0;
        font-size: clamp(2vh, 3vh, 5vh);
        font-weight: bold;
        text-transform: uppercase;
        text-shadow: var(--bordure-de-texte);
      }

      .cellule-grille.match {
        flex: 1 1 0;
        font-size: clamp(1.5vh, 2.4vh, 5vh);
      }

      .cellule-grille.match.libre {
        opacity: 0.5;
        font-style: italic;
      }

      .libelle-match {
        display: block;
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
        overflow: hidden;
      }
    }
  }

  #finales {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    .arbre {
      height: 100%;
      width: 100%;
    }
  }

  #podium {
    --taille-max-marche: 30vh;
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;

    .conteneur {
      position: relative;
      display: grid;
      align-items: end;
      grid-auto-flow: column;
      grid-template-columns: repeat(3, auto);
      grid-template-rows: auto;
      height: fit-content;
      width: fit-content;
      column-gap: 8px;
    }

    .colonne {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 24vw;
    }

    .nom-equipe {
      text-align: center;
      width: 100%;
      font-size: 3vw;
      text-transform: capitalize;
    }

    .colonne-1 {
      grid-column: 2;

      .nom-equipe {
        color: gold;
        text-shadow: 0px 0px 30px gold;
      }
    }

    .colonne-2 {
      grid-column: 1;

      .nom-equipe {
        color: silver;
        text-shadow: 0px 0px 30px silver;
      }
    }

    .colonne-3 {
      grid-column: 3;

      .nom-equipe {
        color: goldenrod;
        text-shadow: 0px 0px 30px goldenrod;
      }
    }

    .marche {
      width: 100%;
      height: calc(var(--taille-max-marche) / var(--numero));
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.842) 15% 85%, rgba(0, 0, 0, 0.05));
      font-size: calc(var(--taille-max-marche) / 4.5);
      text-align: center;
      text-shadow: var(--bordure-de-texte);
    }
  }

  #bandeau-message {
    animation: defilementHorizontal var(--vitesse-bandeau) linear infinite;
    text-shadow: var(--bordure-de-texte);
  }

  .neige {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 9999;

    .flocon {
      position: absolute;
      width: 3px;
      height: 3px;
      background-image: url('../img/flocon_cible.svg');
      background-size: contain;
      opacity: 1;

      animation-name: chute, oscillation;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: infinite;
    }
  }
}



.qr-code::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/qrcode_paypal.png');
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: 20vw auto;
  opacity: 1;
  z-index: 999;
}

.apercu {
  * {
    font-size: 10px !important;
  }

  #logo {
    position: fixed;
    top: 0;
    left: 0;
    background-size: contain, 0;
    opacity: 0.5;
  }

  #poules {
    width: 50vw;

    div {
      padding: 2px 2px !important;
    }
  }

}


@keyframes blink {
  from {
    background-color: rgba(255, 0, 0, 0);
  }

  to {
    background-color: rgba(255, 0, 0, 0.5);
  }
}

@keyframes fantome {
  from {
    opacity: 0.6;
  }

  to {
    opacity: 0;
  }
}

@keyframes alerte {
  from {
    color: var(--couleur-theme-texte-dark);
  }

  to {
    color: red;
  }
}

@keyframes defilementVertical {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(var(--scroll-height, 0));
  }
}

@keyframes defilementHorizontal {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes chute {
  0% {
    transform: translateY(-10vh) rotate3d(0);
  }

  100% {
    transform: translateY(100vh) rotate3d(var(--x), var(--y), var(--z), var(--tour));
  }
}

@keyframes oscillation {

  0%,
  100% {
    margin-left: 0px;
  }

  50% {
    margin-left: 15px;
  }
}