@font-face {
  font-family: "birchstd";
  src: url("../fonts/BirchStd.otf");
}

@font-face {
  font-family: "cooper";
  src: url("../fonts/Cooper[wght].woff2") format("woff2");
  font-weight: 100 900; /* Plage complète des poids */
}

@font-face {
  font-family: "bevan";
  src: url("../fonts/Bevan-Regular.ttf");
}

@font-face {
  font-family: "roboto-slab";
  src: url("../fonts/RobotoSlab-VariableFont_wght.ttf");
}

@font-face {
  font-family: "roboto-condensed";
  src: url("../fonts/RobotoCondensed-VariableFont_wght.ttf");
}

@font-face {
  font-family: "zen-antique";
  src: url("../fonts/ZenAntique-Regular.ttf");
}

:root {
  --color-white: rgb(230, 230, 230);
  --color-white-hover: rgba(230, 230, 230, 0.8);
  --color-green: rgb(0, 80, 0);
  --color-dark-green: rgb(0, 60, 0);
  --color-light-green: rgb(0, 130, 0);
  --color-light-green: rgb(0, 130, 0);
  --color-pale-green: rgb(37, 253, 37);
  --color-red: rgb(100, 0, 0);
  --color-gold: rgb(255, 215, 0);
  --color-orange: rgb(220, 100, 0);
  --color-blue: rgb(0, 75, 255);
  --color-purple: rgb(130, 0, 255);
  --color-grey: rgb(40, 40, 40);
  --color-light-grey: rgb(140, 140, 140);
  --custom-white: var(--color-white);
  --custom-white-hover: var(--color-white-hover);
  --custom-green: var(--color-green);
  --custom-green-hover: var(--color-green);
  --custom-red: var(--color-red);
  --custom-red-hover: var(--color-red);

  --shade-gradient: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 15%,
    rgba(0, 0, 0, 0.3) 20%,
    rgba(0, 0, 0, 0.2) 25%,
    rgba(0, 0, 0, 0.2) 75%,
    rgba(0, 0, 0, 0.3) 80%,
    rgba(0, 0, 0, 0.4) 85%,
    rgba(0, 0, 0, 0.8) 100%
  );
  --shade-gradient-hover: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.7) 15%,
    rgba(0, 0, 0, 0.6) 20%,
    rgba(0, 0, 0, 0.5) 25%,
    rgba(0, 0, 0, 0.5) 75%,
    rgba(0, 0, 0, 0.6) 80%,
    rgba(0, 0, 0, 0.7) 85%,
    rgba(0, 0, 0, 1) 100%
  );

  --gradient-green: var(--shade-gradient), linear-gradient(var(--color-green), var(--color-green));
  --gradient-green-hover:
    var(--shade-gradient-hover), linear-gradient(var(--color-green), var(--color-green));
  --gradient-light-green:
    var(--shade-gradient), linear-gradient(var(--color-light-green), var(--color-light-green));
  --gradient-light-green-hover:
    var(--shade-gradient-hover), linear-gradient(var(--color-light-green), var(--color-light-green));
  --gradient-red: var(--shade-gradient), linear-gradient(var(--color-red), var(--color-red));
  --gradient-red-hover:
    var(--shade-gradient-hover), linear-gradient(var(--color-red), var(--color-red));
  --gradient-gold: var(--shade-gradient), linear-gradient(var(--color-gold), var(--color-gold));
  --gradient-gold-hover:
    var(--shade-gradient-hover), linear-gradient(var(--color-gold), var(--color-gold));
  --gradient-orange:
    var(--shade-gradient), linear-gradient(var(--color-orange), var(--color-orange));
  --gradient-orange-hover:
    var(--shade-gradient-hover), linear-gradient(var(--color-orange), var(--color-orange));
  --gradient-blue: var(--shade-gradient), linear-gradient(var(--color-blue), var(--color-blue));
  --gradient-blue-hover:
    var(--shade-gradient-hover), linear-gradient(var(--color-blue), var(--color-blue));
  --gradient-purple:
    var(--shade-gradient), linear-gradient(var(--color-purple), var(--color-purple));
  --gradient-purple-hover:
    var(--shade-gradient-hover), linear-gradient(var(--color-purple), var(--color-purple));
  --gradient-grey: var(--shade-gradient), linear-gradient(var(--color-grey), var(--color-grey));
  --gradient-grey-hover:
    var(--shade-gradient-hover), linear-gradient(var(--color-grey), var(--color-grey));

  --view-gap: clamp(0.28rem, 0.8dvw, 0.55rem);
  --view-header-height: clamp(1.05rem, 1.6dvw, 1.3rem);
  --view-header-padding-x: clamp(0.6rem, 1.4dvw, 0.9rem);
  --view-header-bg: rgba(0, 12, 0, 0.88);
  --view-border-color: rgba(255, 215, 0, 0.4);
  --view-radius: 0.35rem;
  --panel-bg-start: rgba(10, 35, 10, 0.9);
  --panel-bg-end: rgba(6, 18, 6, 0.95);
  --panel-border-color: rgba(255, 215, 0, 0.16);
  --panel-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.45);
  --scrollbar-width: clamp(0.45rem, 0.8dvw, 0.6rem);
  --scrollbar-track: rgba(24, 40, 24, 0.42);
  --scrollbar-thumb: rgba(255, 215, 0, 0.55);
  --scrollbar-thumb-hover: rgba(255, 215, 0, 0.75);

  --ui-text-xs: clamp(0.7rem, 1.2dvw, 0.9rem);
  --ui-text-sm: clamp(0.8rem, 1.4dvw, 1rem);
  --ui-text-md: clamp(0.95rem, 1.8dvw, 1.2rem);
  --ui-text-lg: clamp(1.1rem, 2.4dvw, 1.5rem);
  --ui-text-xl: clamp(1.35rem, 3.2dvw, 1.85rem);
}

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-decoration: none;
  box-sizing: border-box;
}

html,
body {
  font-family: "roboto-slab", "Times New Roman", Times, serif;
  height: 100%;
  overflow: hidden;
  background-color: rgb(20, 20, 20);
}

.btn-base {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.25rem, 0.6dvh, 0.45rem) clamp(0.3rem, 0.8dvw, 0.5rem);
  width: 100%;
  font-family: "cooper", Georgia, "Times New Roman", Times, serif;
  font-weight: 800;
  font-size: clamp(0.9rem, 1.6dvw, 1.3rem); /* Augmenté : 1.1 → 1.3rem */
  letter-spacing: -0.03em;
  text-shadow:
    1px 1px 0px black,
    -1px 1px 0px black,
    1px -1px 0px black,
    -1px -1px 0px black;
  color: var(--custom-white);
  white-space: nowrap;
  background-color: var(--custom-green);
  border: 0.05rem solid #222;
  border-radius: 0.4rem;
  cursor: pointer;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    background 0.1s ease;

  /* Dégradé vertical pour effet bombé très progressif */
  background-image: var(--gradient-green);
  /* Ombre douce pour donner du relief */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2),
    0 -1px 0 rgba(255, 255, 255, 0.4),
    1px 0 0 rgba(255, 255, 255, 0.2),
    -1px 0 0 rgba(255, 255, 255, 0.2);
}

.btn-nav,
.nav-select,
.nav-status {
  width: 100%;
}

.nav-status {
  cursor: default;
}

.nav-select {
  min-width: 3.5rem;
  text-align: center;
}

.btn-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.05rem 0.05rem 0.08rem;
  width: 100%;
  border: 0.1rem solid rgb(50, 50, 50);
  background-color: rgb(0, 0, 0);
  border-radius: 0.4rem;
  cursor: pointer;
}

.btn-base:not(.nav-status):not(.nav-select):not(.admin-menu-btn):not(:disabled):hover {
  color: var(--custom-white-hover);
  background-image: var(--gradient-green-hover);
  transform: scaleX(0.995) scaleY(0.96) translateY(0px);
}

.nav-select:hover {
  color: var(--custom-white-hover);
  background-image: var(--gradient-green-hover);
  transform: none;
}

#user-interface select.nav-select:hover,
#user-interface-table select.nav-select:hover,
#nav-main select.nav-select:hover,
#select-club-dropdown:hover,
[data-language-selector]:hover {
  transform: none;
}

/* Classe pour griser un bouton désactivé - SAUF le bouton timebank */
#user-interface .btn-disabled,
#user-interface button:disabled:not(#btn-timebank):not(.action-btn),
#user-interface-table .btn-disabled,
#user-interface-table button:disabled:not(#btn-timebank):not(.action-btn) {
  background: #888; /* Gris neutre */
  color: #eee; /* Texte plus clair */
  cursor: default; /* flèche */
  opacity: 0.8; /* Légère transparence */
  pointer-events: none; /* Empêche tout clic */
  box-shadow: none; /* Pas d'effet relief */
  border: 0.1rem solid #032300; /* Bordure grise */
}
#user-interface select:disabled,
#user-interface-table select:disabled {
  background: #888;
  color: #eee;
  cursor: not-allowed;
  opacity: 0.8;
  pointer-events: none;
  box-shadow: none;
  border: 0.1rem solid #032300;
}

/* NOTE: Les styles .form-btn-container, .btn-submit, .btn-cancel sont définis dans modals.css
   pour centraliser tous les styles de modales. Ne pas dupliquer ici. */

#user-interface .hidden,
#user-interface-table .hidden,
.hidden {
  display: none !important;
}

/* Styles des formulaires déplacés dans modals.css */

#user-interface {
  /* Conteneur principal - simule viewport avec largeur max pour lisibilité */
  width: min(1050px, 100dvw); /* max 1050px sur grand écran, 100% sur mobile */
  height: 100dvh; /* Espace réel sans barres de navigateur */
  /* SUPPRIMÉ min-height: 640px qui forçait scroll sur petits écrans */

  margin: 0 auto;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: stretch; /* Étire les éléments */
  gap: 0.3rem;
  align-items: center;
  border: 0.15rem solid var(--custom-white);
  border-radius: 0.6rem;
  padding: 0.2rem;
  overflow: hidden;
  background-color: rgb(0, 0, 0);
}

#nav-main,
#nav-admin,
#nav-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%; /* Prend toute la largeur du parent (#user-interface) */
  gap: clamp(0.2rem, 0.5dvw, 0.4rem); /* Gap légèrement responsive */
  padding: clamp(0.25rem, 0.5dvh, 0.4rem);
  border: 0.1rem solid var(--custom-white);
  border-radius: 0.4rem;
  background: radial-gradient(ellipse, rgb(15, 15, 15), rgb(0, 5, 0));
}

/* Menu déroulant Admin/Owner */
#admin-menu-container {
  position: relative;
  display: inline-block;
}

/* CRITICAL: S'assurer que .hidden surcharge le display */
#admin-menu-container.hidden {
  display: none;
}

.admin-menu-btn {
  background-color: var(--custom-red);
  background-image: var(--gradient-red);
}

.admin-menu-btn:hover {
  background-color: var(--custom-red);
  background-image: var(--gradient-red);
  transform: none;
}

.admin-dropdown {
  position: absolute;
  top: 110%;
  right: 0;
  background-color: rgb(30, 30, 30);
  border: 0.15rem solid var(--custom-white);
  border-radius: 0.4rem;
  z-index: 1000;
  min-width: 180px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.admin-dropdown button:not(.hidden) {
  display: block;
  width: 100%;
  padding: 0.6rem 1rem;
  text-align: left;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(230, 230, 230, 0.2);
  color: var(--custom-white);
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease;
  transform: none;
}

.admin-dropdown button:last-child {
  border-bottom: none;
}

.admin-dropdown button:not(.hidden):hover {
  background-color: rgba(230, 230, 230, 0.1);
  transform: none;
}

/* Uniformiser le style des boutons et sélecteurs dans les nav */
.btn-nav,
.nav-select {
  padding-inline: clamp(0.35rem, 0.8dvw, 0.6rem); /* Padding horizontal responsive */
  padding-block: clamp(0.25rem, 0.6dvh, 0.45rem); /* Hauteur uniforme */
  font-size: clamp(0.9rem, 1.6dvw, 1.3rem); /* Augmenté : cohérent avec global */
  height: auto; /* Permet au padding de définir la hauteur */
  min-height: fit-content;
}

#main-container {
  /* Conteneur principal flexible - prend l'espace restant */
  position: relative;
  display: flex;
  flex: 1 1 auto; /* Prend l'espace restant disponible */
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly; /* Contenu collé en haut */
  width: 100%; /* Prend toute la largeur du parent */
  min-height: 0;
  overflow-y: auto; /* Scroll vertical autorisé */
  overflow-x: hidden; /* Pas de scroll horizontal */
  background-color: rgb(25, 25, 25);
  border: 0.1rem solid var(--custom-white);
  border-radius: 0.5rem;
  background-image: radial-gradient(ellipse, rgb(0, 60, 0), rgb(0, 0, 0));
}

#footer-main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* Prend toute la largeur du parent */
  /* height supprimé - laisse padding définir la hauteur */
  padding: clamp(0.6rem, 1.2dvh, 1rem);
  background-color: rgb(25, 25, 25);
  border: 0.1rem solid white;
  border-radius: 0.4rem;
  background-image: radial-gradient(ellipse, rgb(0, 60, 0), rgb(0, 0, 0));
}

#footer-main a {
  display: inline-block;
  width: auto;
  padding: 0.3rem 0.45rem;
  margin: 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: normal;
  color: #b8b8b8;
  background: rgba(10, 10, 10, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.35rem;
  text-shadow: none;
  box-shadow: none;
  text-decoration: none;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

#footer-main a:hover {
  color: var(--custom-white-hover);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Checkbox formulaires */
.inline-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0.3em 0;
}
.inline-checkbox input[type="checkbox"] {
  width: 1.2em;
  height: 1.2em;
  margin: 0;
}
.inline-checkbox label {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

/* Radio buttons formulaires */
.inline-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-right: 1.2em;
  margin-bottom: 0.3em;
}
.inline-radio input[type="radio"] {
  width: 1.1em;
  height: 1.1em;
  margin: 0;
  cursor: pointer;
}
.inline-radio label {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

/* Bot remove controls styling */
.bot-remove-controls {
  display: flex;
  gap: 0.5em;
  margin-top: 0.5em;
}

#bot-select-remove {
  width: calc(70% - 0.25em);
  padding: 0.5em;
  font-size: 1rem;
  background-color: white;
  color: #000;
  border: 1px solid #ccc;
  border-radius: 0.3em;
  cursor: pointer;
  height: 2.5em;
}

#btn-remove-bot {
  width: calc(30% - 0.25em);
  padding: 0.5em;
  font-size: 1rem;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
  height: 2.5em;
}

#btn-remove-bot:hover:not(:disabled) {
  background-color: #c82333;
}

#btn-remove-bot:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Apparence du select désactivé */
#bot-select-remove:disabled {
  background-color: #f5f5f5;
  color: #666;
  cursor: not-allowed;
}

.empty-message {
  text-align: center;
  color: #999;
  font-style: italic;
  padding: 1em 0;
}

#add-bot-section,
#bot-list-section {
  margin-bottom: 1.5em;
}

#add-bot-section h4,
#bot-list-section h4 {
  margin-bottom: 0.5em;
  font-size: 1rem;
  font-weight: 600;
}

#bot-type-select-modal {
  width: 100%;
  padding: 0.5em;
  font-size: 1rem;
  border-radius: 0.3em;
  border: 1px solid #ccc;
  background-color: white;
  cursor: pointer;
  height: 2.5em;
}

/* DÉBUT DES SLIDERS */
.slider-row {
  display: flex;
  align-items: center;
  gap: 0.7rem; /* Espace entre la valeur et le slider */
  margin-bottom: 0.5rem;
}

.slider-row span {
  min-width: 2.5em;
  text-align: right;
  font-family: "cooper", Georgia, serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--custom-green);
  background: var(--custom-white);
  border-radius: 0.3rem;
  padding: 0.1em 0.4em;
  border: 1px solid #aaa;
}

/* Le slider ne prend plus toute la largeur, pour laisser la place à la valeur */
.slider-row input[type="range"] {
  width: 100%;
  margin-left: 0.2em;
  /* SUPPRIME max-width pour que le slider prenne toute la largeur disponible */
  /* max-width: 180px; */
  flex: 1 1 auto;
  min-width: 0;
}

:where(input[type="range"]) {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.2rem;
  background: #ddd;
  outline: none;
}

:where(input[type="range"]):hover {
  opacity: 1;
}

:where(input[type="range"])::-webkit-slider-runnable-track {
  background: rgb(69, 69, 69);
  height: 0.4rem;
  border-radius: 0.5rem;
  margin: 0.4rem;
}

:where(input[type="range"])::-moz-range-track {
  background: #535353;
  height: 0.4rem;
  border-radius: 0.5rem;
  margin: 0.4rem;
}

:where(input[type="range"])::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.6rem;
  height: 1.6rem;
  background: var(--custom-green);
  border-radius: 50%;
  cursor: grab;
  border: 0.1rem solid black;
  margin-top: -0.6rem;
}

:where(input[type="range"])::-moz-range-thumb {
  width: 1.6rem;
  height: 1.6rem;
  background: var(--custom-green);
  border-radius: 50%;
  cursor: grab;
  border: 0.1rem solid black;
  margin-top: -0.6rem;
}

/* Grise le slider et la valeur si auto start désactivé */
.auto-start-disabled {
  opacity: 0.5;
  pointer-events: none;
}
/* FIN DES SLIDERS */

/* AJOUT ICI : Empêche la sélection de texte et le curseur texte sur tout le body et le main */
/* Explication débutant : on interdit la sélection de texte et le curseur texte sur tout le corps de la page, sauf dans les champs de formulaire */

body,
main,
#main-container,
#user-interface,
#header-index,
#site-name-index {
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
  user-select: none; /* Empêche la sélection de texte */
  caret-color: transparent; /* Masque le curseur texte clignotant */
  outline: none; /* Supprime la bordure focus */
  cursor: default; /* Force la flèche */
}

/* On autorise la sélection et le curseur texte UNIQUEMENT dans les champs de formulaire
   Remarque: on EXCLUT les <button> ici pour conserver `cursor: pointer` défini plus haut. */
:where(input, textarea, select, label) {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
  caret-color: auto;
  cursor: auto;
}

/* ===============================
   Language Selector Styles
   =============================== */
#language-selector-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tous les sélecteurs de langue (id + data-attribute pour compatibilité) */
#language-selector,
[data-language-selector] {
  width: auto;
  min-width: 3.5rem;
}

/* Options styling for dropdown menu */
#language-selector option,
[data-language-selector] option {
  background-color: rgb(20, 20, 20);
  color: var(--custom-white);
  padding: 0.3rem;
}