body {
  font-family: Arial, sans-serif;
  background: #444;
  color: white;
  margin: 0;
  padding: 20px;
}

h2 {
  margin-bottom: 15px;
}

#timeline {
  height: 600px;
  border: 2px solid #222;
  border-radius: 6px;
  background: #333;
}

.vis-item {
  color: white !important;
  border: 1px solid black !important;
  border-radius: 4px !important;
  font-size: 13px;
  padding: 3px 6px;
}

/* Collections US */
.darkred {
  background-color: darkred !important;
}

.vis-item.vis-range.era-golden.vis-readonly,
.vis-item.vis-range.era-silver.vis-readonly,
.vis-item.vis-range.era-bronze.vis-readonly,
.vis-item.vis-range.era-modern.vis-readonly,
.vis-item.vis-range.era-renaissance.vis-readonly,
.vis-item.vis-range.era-rebirth.vis-readonly,
.vis-item.vis-range.era-infinite.vis-readonly,
.vis-item.vis-range.era-dawn.vis-readonly {
  height: 5px !important;
  border: 0px !important;
}

/* Éditeurs FR */
.blue { background-color: royalblue !important; }
.green { background-color: seagreen !important; }
.purple { background-color: darkmagenta !important; }
.orange { background-color: darkorange !important; }

/* Axe de temps en blanc */
.vis-time-axis .vis-text {
  color: white !important;
}

.vis-panel.vis-background,
.vis-panel.vis-center {
  background: #555 !important;
}

/* Légende */
.legend {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.legend span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.legend-box {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid #111;
}

/* Barre de recherche */
#search {
  margin: 15px 0;
  padding: 6px 10px;
  font-size: 16px;
  border-radius: 6px;
  border: none;
  width: 300px;
}

.vis-labelset .vis-label {
  display: none !important;
}

.vis-labelset .vis-group {
  border-bottom: 1px solid #888 !important;
}

/* Epoques DC */
.era-golden {
  background-color: #f1c40f !important;
  color: black !important;
  opacity: 0.8;
}

.era-silver {
  background-color: #bdc3c7 !important;
  color: black !important;
  opacity: 0.8;
}
.era-bronze {
  background-color: #d35400 !important;
  color: white !important;
  opacity: 0.8;
}
.era-modern {
  background-color: #2c3e50 !important;
  color: white !important;
  opacity: 0.8;
}
.era-renaissance {
  background-color: #27ae60 !important;
  color: white !important;
  opacity: 0.8;
}
.era-rebirth {
  background-color: #8e44ad !important;
  color: white !important;
  opacity: 0.8;
}
.era-infinite {
  background-color: #16a085 !important;
  color: white !important;
  opacity: 0.8;
}
.era-dawn {
  background-color: #e67e22 !important;
  color: white !important;
  opacity: 0.8;
}

/* === MODAL === */
#comicFormModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

#comicFormModal form {
  background: #2c2c2c;
  padding: 20px 30px;
  border-radius: 8px;
  width: 400px;
  color: white;
  box-shadow: 0 4px 15px rgba(0,0,0,0.8);
}

#comicFormModal h3 {
  margin-top: 0;
  margin-bottom: 15px;
  text-align: center;
  color: #f0f0f0;
}

#comicForm label {
  display: block;
  margin: 10px 0;
}

#comicForm input,
#comicForm select {
  width: 100%;
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #555;
  margin-top: 5px;
  background: #444;
  color: white;
}

#comicForm button {
  margin-top: 15px;
  padding: 8px 15px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}

#comicForm button[type="submit"] {
  background: seagreen;
  color: white;
}

#comicForm #cancelForm {
  background: darkred;
  color: white;
  margin-left: 10px;
}

/* === TABLEAU === */
#comicsTable {
  width: 100%;
  margin-top: 15px;
  border-collapse: collapse;
  background: #2c2c2c;
  border-radius: 6px;
  overflow: hidden;
}

#comicsTable th, #comicsTable td {
  padding: 10px;
  text-align: left;
}

#comicsTable th {
  background: #444;
  color: #eee;
}

#comicsTable tr:nth-child(even) {
  background: #3a3a3a;
}

#comicsTable tr:hover {
  background: #505050;
}

#comicsTable button {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

#comicsTable button:hover {
  opacity: 0.8;
}

#comicsTable button.delete {
  background: darkred;
  color: white;
}

#comicsTable button.edit {
  background: royalblue;
  color: white;
}

/* Animation apparition / disparition */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes modalFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

#comicFormModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: none; /* cachée par défaut */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

#comicFormModal.show {
  display: flex !important;
  animation: modalFadeIn 0.3s ease-out forwards;
}

#comicFormModal.hide {
  display: flex !important;
  animation: modalFadeOut 0.3s ease-in forwards;
}