/* Variables perso */
:root {
  --main-bg: #0b1020;
  --main-accent: #1b130c;
  --second-accent: #232224;
}

/* Exemple : override bulma */
.hero.is-primary {
  background: linear-gradient(135deg, var(--main-accent), #8e5bff);
}

.tabs li.is-active a {
  background-color: var(--main-accent);
  color: rgb(241, 142, 60);
  border-color: var(--main-accent);
}

.tabs li a {
  background-color: var(--second-accent);
  color: rgb(241, 142, 60);
  border-color: var(--second-accent);
}

.hero.banner {
  width: 100%; /* pleine largeur */
  height: 400px; /* hauteur fixe */
  background-image: url('https://cryptoria-escape-game.netlify.app/images/banière2.png');
  background-repeat: no-repeat;
  background-size: 100% 100%; /* 👉 étire l’image pour remplir exactement */
}
/*-------------------------------------------------- DONJONS -----------------------------------------------------------------------*/

/*Partie pour les cartes de donjons*/
/* Miniatures centrées + styles */
.thumbs {
  display: flex;
  justify-content: center; /* centrage horizontal */
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  flex-wrap: wrap;
}

.thumb {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.thumb img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    outline-color 0.15s ease;
}
.thumb:hover img {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.thumb.is-active img {
  outline: 3px solid #6e28d9; /* couleur d’accent */
  outline-offset: 2px;
}

/* Carte : petit effet hover */
.donjon-card {
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.donjon-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

/* Modale plus grande */
.modal-card.modal-wide {
  width: 95vw; /* plus large que la modale par défaut */
  max-width: 1200px; /* limite max sur grand écran */
}
/*--------------------------------------------------------- ROADMAP --------------------------------------------------------------------------*/

.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, max-content));
  justify-content: center; /* centre les éléments si la ligne est incomplète */
  gap: 1.5rem;
  margin-top: 2rem;
  align-items: start; /* empêche d’égaliser la hauteur */
}

.roadmap-item {
  background: #1f1f2e;
  border: 2px solid rgb(241, 142, 60);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.4);
  color: #e8e8f0;
  transform: rotate(var(--tilt));
  transition: transform 0.2s ease;
  width: fit-content; /* s’adapte au contenu */
  max-width: 350px; /* limite pour éviter les blocs trop larges */
  min-width: 280px; /* limite pour éviter les blocs trop petits */
}

.roadmap-item:hover {
  transform: scale(1.05) rotate(0deg);
}

.roadmap-item h3 {
  margin-bottom: 0.5rem;
  color: #8e5bff;
}

/* Effet "post-its aléatoires" */
.roadmap-item:nth-child(odd) {
  --tilt: -4deg;
}
.roadmap-item:nth-child(even) {
  --tilt: 2deg;
}
.roadmap-item:nth-child(3n) {
  --tilt: -1.5deg;
}
.roadmap-item:nth-child(4n) {
  --tilt: 3deg;
}

/*----------------------------------STYLE FOND BOUTON .... ---------------------*/
/* Fond global sombre */
html,
body {
  background-color: #121212;
  color: #e0e0e0;
}

/* Titres et textes forts */
h1,
h2,
h3,
h4,
h5,
h6,
.title,
.subtitle,
strong,
label {
  color: #ffffff !important; /* forcer blanc */
}

/* Sections, boxes, cards, roadmap */
.section,
.box,
.card {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
}

/* Inputs et textareas */
.input,
.textarea,
.select select {
  background-color: #2a2a2a !important;
  color: #f0f0f0 !important;
  border: 1px solid #3a3a3a !important;
}

/* Placeholder clair aussi */
.input::placeholder,
.textarea::placeholder {
  color: #aaa !important;
}

/* Boutons */
.button {
  background-color: #2a2a2a;
  color: #f0f0f0 !important;
  border: 1px solid #3a3a3a;
}

.button.is-primary {
  background-color: #5865f2; /* style Discord */
  color: #fff !important;
  border: none;
}

.button.is-light {
  background-color: #3a3a3a;
  color: #ccc !important;
  border: none;
}

/* Modale en dark mode */
.modal-card {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
  border-radius: 8px;
  border: 1px solid #2a2a2a;
}

/* En-tête et pied de la modale */
.modal-card-head,
.modal-card-foot {
  background-color: #232224 !important;
  color: #fff !important;
  border: none;
}

/* Corps de la modale */
.modal-card-body {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
}

/* Titres dans la modale */
.modal-card-title {
  color: #ffffff !important;
}

/*----------------- CARTE COM ---------------------------*/
/* Boutons spécifiques par réseau */

/* Discord */
.button.is-discord {
  background-color: #5865f2 !important;
  color: #fff !important;
  border: none;
}
.button.is-discord:hover {
  background-color: #4752c4 !important;
}

/* Instagram */
.button.is-instagram {
  background-color: #e4405f !important;
  color: #fff !important;
  border: none;
}
.button.is-instagram:hover {
  background-color: #b8344c !important;
}

/* TikTok */
.button.is-tiktok {
  background-color: #23d8d2 !important;
  color: #fff !important;
  border: none;
}
.button.is-tiktok:hover {
  background-color: #1cb4af !important;
}

/* Cartes réseaux simplifiées */

/* Discord */
.social-card.discord {
  border: 2px solid #5865f2;
}
.social-card.discord .icon i {
  color: #5865f2;
}

/* Instagram */
.social-card.instagram {
  border: 2px solid #e4405f;
}
.social-card.instagram .icon i {
  color: #e4405f;
}

/* TikTok */
.social-card.tiktok {
  border: 2px solid #25f4ee;
}
.social-card.tiktok .icon i {
  color: #25f4ee;
}

/* Onglet Don - mettre les box en dark mode */
#tab8 .box {
  background-color: #1e1e1e;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 1.5rem;
  color: #e0e0e0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#tab8 .box:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

/* Footer sombre */
.footer {
  background: #1b1b1f;
  color: #e0e0e0;
  padding: 2rem 1rem;
  border-top: 1px solid #2a2a2a;
}

/* Boutons du footer */
.footer .button {
  background-color: #1e1e1e !important;
  color: #fff !important;
  border: 1px solid #2a2a2a;
  transition: background 0.25s ease, transform 0.2s ease;
}

.footer .button:hover {
  background-color: #2a2a2a !important;
  transform: translateY(-3px);
}