/* PALETTE CLAIRE  */
:root {
  --bg: #ffffff;
  --bg-hover: #f2f2ff;
  --stashor: #66348a;
  --events: #d0d0e3;
  --txt : black;

  /* leagues*/
  --heure: #a774cc;
  --win : #51b651;

}

/* PALETTE SOMBRE */
.dark {
  --bg: #2c173c;
  --bg-hover: #844ead;
  --stashor: #492563;
  --events: #5f5f81;
  --txt : white;
  
  /* leagues*/
  --heure: #8358a1;
  --win : #32b432;
}



/* Bouton de thème */
#theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 200ms, color 200ms, border-color 200ms;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  box-shadow: var(--shadow);
}
#theme-toggle:active { transform: translateY(1px); }

body{
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    background: var(--bg);
    color: var(--txt);
}

.flex-three{
    display: flex;
    flex-wrap: wrap;
}

.events{
    background-color: var(--events);
    max-width: 700px;
    width: 80vw;
    margin: 10px 0px;
    
}

.events > div:nth-child(1) {
  flex: 0 0 30%;
}

.events > div:nth-child(2) {
  flex: 0 0 40%;
}
.events > div:nth-child(3) {
  flex: 0 0 30%;
}

@media (max-width: 600px) {
    .events{
      width: 95vw;
    }
    .tab-container{
      width: 95vw;
    }
    .score{
      font-size: 14px;
    }
    .heure{
      font-size: 14px;
    }
}


.flex-three > div{
    flex: 0 0 33.3333%;
}

.all-events{
  display: flex;
  justify-content: center;
}

.tournoi{
    text-align: right;
}

.score{
  text-align: center;
}

.menu{
    background-color: var(--stashor);
    display: flex;
    justify-content: space-between;
}

.menu > div, .menu > div > a{
      align-items: center;
      text-decoration: none;
}

#theme-toggle{
  text-align: center;
}

.menu h1{
    margin: 0px;
    color: white;
}

.menu-logo{
    height: 80px;
    width: 80px;
    padding: 10px;
}

header{
    width: 100vw;
    height: 100px;
}

.flex{
    display: flex;
}

footer{
  width: 100vw;
  color: white;
}

footer > div {
  width: 90vw;
}

footer a{
  color: white;
  text-decoration: underline;
}

footer a:hover{
  color: #6c63ff;
}

.heure{
    margin: 5px;
    padding: 5px;
    background-color: var(--heure);
}

.center{
    text-align: center;
}

.team-win{
    background-color: var(--win);
} 
.team-left{
  text-align: right;
}
/* Fake select */

.fake-select {
  position: relative;
  width: 200px;
  font-family: sans-serif;
  margin-bottom: 20px;
}

.selected {
  background: var(--bg);
  border: 1px solid var(--bg-hover);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: all 0.25s;
  user-select: none;
}

.options {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--bg-hover);
  border-radius: 12px;
  margin-top: 5px;
  list-style: none;
  padding: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);

  max-height: 150px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;

  opacity: 0;
  transform: scaleY(0.95);
  transform-origin: top;
  transition: all 0.2s ease;
  z-index: 9999;
  pointer-events: none;
}

.fake-select.open .options {
  opacity: 1;
  transform: scaleY(1);
  pointer-events: auto;
}

.options li {
  padding: 10px 14px;
  transition: background 0.2s;
  user-select: none;
}

.options li:hover {
  background: var(--bg-hover);
  cursor: pointer;
}

.options::-webkit-scrollbar {
  width: 6px;
}

.options::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

/* Menu hamburger */

.nav a {
  margin: 0 10px;
  text-decoration: none;
  color: #333;
}
.nav a:hover { color: #6c63ff; }

.nav > div{
  padding:5px;
  margin:0px
}

.tab-container{
  width: 80vw;
  max-width: 700px ;
}
.tab{
  display: inline;
  padding: 5px;
  margin: 2px;
  border-radius: 2px;
  background-color: var(--stashor);
  cursor: pointer;
}

.tab.active{
  background-color: var(--bg-hover);

}
/* HAMBURGER 3 BARRES */
/* TODO debugger : enlever la position fixed*/
.hamburger {
  position: fixed;
  top:25px;
  right: 5px;

  display: block;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 24px;
  border: none;
  cursor: pointer;
  padding: 15px;
  border-radius: 5px;
  background-color: var(--stashor);

  z-index: 200;
}
@media (min-width: 600px) {
  .hamburger {
    display: none;
  }
}
.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background: white;
  border-radius: 3px;
  transition: all 0.3s ease;
  
}

/* Animation en croix quand menu ouvert */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(7.5px, 7.5px);
  background-color: white;
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7.5px, -7.5px);
  background-color: white;
}

/* MENU MOBILE */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 70%;
  height: 100%;
  background: var(--stashor);
  box-shadow: -4px 0 12px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  padding: 60px 20px;
  transition: right 0.3s ease;
  z-index: 100;
}

.mobile-menu a {
  padding: 10px 0;
  text-decoration: none;
  color: white;
  font-size: 1.1rem;
}

.mobile-menu a:hover { color: #6c63ff; }

.mobile-menu.open { right: 0; }

/* RESPONSIVE */
@media (max-width: 600px) {
  .nav { display: none; }
  .hamburger { display: flex; }
}

/* Index */
.index-logo{
  height: 300px;
  width: 300px;
}

.index-title{
  font-size: 60px;
  margin-bottom: 0px;
  margin-top: 10px;
}
.container{
  display: flex;
  justify-content: center;
}

.stats-container{
  display: flex;
  justify-content: center;
  margin-top: 30px;
  font-size: 24px;
}

.stats-container div{
  margin: 0 20px;
  text-align: center;
}