/* Import des polices */
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
@import url("satoshi.css"); /* Assurez-vous que ce fichier est bien présent */

/* Variables CSS */
:root {
  /* Couleurs */
  --couleur-noirVolcan: #322a22;
  --couleur-beigeVif: #f1e1b8;
  --couleur-grisFonce: #415a51;
  --couleur-jaunePeps: #e9bc40;
  --couleur-grisBleuClair: #c9e2e5;
  --couleur-blancSite: #fafff6;
  --couleur-beigeNorm: #ede0cf;

  /* Couleur d'accentuation de l'UI (dynamique via JS) */
  --ui-accent-color: var(--couleur-jaunePeps);

  /* Variables pour la texture de papier */
  --texture-papier-image: url("Imag/painted-relief-texture.jpg");
  --texture-papier-size: cover;
  --texture-papier-repeat: no-repeat;
  --texture-papier-opacity: 0.5;
  --texture-papier-blend-mode: multiply;

  /* Effets */
  --effet-backgroundBlur: blur(4px);
  --effet-innerShadow: inset -1px 1px 1.4px 0px rgba(0, 0, 0, 0.25);
  --effet-grosDropShadow: -9px 4px 11px 0px rgba(0, 0, 0, 0.25);
  --effet-miniDropShadow: -1px 1px 1.4px 0px rgba(0, 0, 0, 0.25);
}

/* ---------------------------------------------------- */
/* Styles Généraux et Réinitialisation */
/* ---------------------------------------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Satoshi-Medium", sans-serif; /* Ajout de fallback font */
  background: var(--couleur-blancSite);
  background-image: linear-gradient(
      rgba(0, 150, 255, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(0, 150, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  min-height: 100vh;
  overflow: hidden; /* Empêche le scroll du body */
  color: var(--couleur-noirVolcan);
}

p {
  color: var(--couleur-noirVolcan);
  font-family: "Satoshi-Regular", sans-serif; /* Ajout de fallback font */
}

h2 {
  color: var(--couleur-noirVolcan);
  font-family: "Satoshi-Bold", sans-serif; /* Ajout de fallback font */
}

/* ---------------------------------------------------- */
/* Conteneur Principal et Vues */
/* ---------------------------------------------------- */

.container {
  max-width: 375px; /* Format mobile */
  height: 100vh;
  margin: 0 auto;
  position: relative;
  overflow: hidden; /* Crucial pour les transitions */
}

.view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.86, 0, 0.07, 1), opacity 1s ease;
  overflow-y: auto; /* Permet le scroll à l'intérieur de la vue */
  background: #ffffff00; /* Fond transparent pour les vues */
}

/* Transitions des vues */
#home-view {
  transform: translateX(0%);
  z-index: 10;
}

#level-view {
  transform: translateX(100%);
  z-index: 20;
}

body.level-active #home-view {
  transform: translateX(-100%);
  opacity: 1;
}

body.level-active #level-view {
  transform: translateX(0%);
}

/* ---------------------------------------------------- */
/* Composants d'Interface Génériques */
/* ---------------------------------------------------- */

.header {
  position: relative;
  height: 40vh;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  color: var(--couleur-blancSite);
}

.header img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.title {
  font-family: "Satoshi-Bold", sans-serif;
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--couleur-noirVolcan);
}

.main-content {
  padding: 2rem 1.5rem;
  padding-bottom: 10vh; /* Espace en bas pour les barres de navigateur mobile */
}

.description {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* Bouton de lancement */
.launch-button {
  max-width: 90%;
  display: block;
  margin: 20px auto;
  background-color: var(
    --ui-accent-color
  ); /* Utilise la couleur d'accentuation dynamique */
  color: var(--couleur-grisFonce);
  border: none;
  padding: 15px 30px;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--effet-grosDropShadow);
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.launch-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--texture-papier-image);
  background-size: var(--texture-papier-size);
  background-repeat: var(--texture-papier-repeat);
  opacity: var(--texture-papier-opacity);
  mix-blend-mode: var(--texture-papier-blend-mode);
  pointer-events: none;
  z-index: 1;
}

.launch-button span,
.launch-button strong {
  /* Cible le texte du bouton s'il est encapsulé */
  position: relative;
  z-index: 2;
}

.launch-button:hover {
  background-color: var(--ui-accent-color);
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: var(--effet-grosDropShadow);
}

.launch-button:disabled {
  background-color: var(--couleur-grisFonce);
  color: var(--couleur-grisBleuClair);
  cursor: not-allowed;
  opacity: 0.5; /* L'opacité est gérée par le JS pour l'activation/désactivation */
  box-shadow: none;
  transform: none;
}

/* Boutons de retour fixes */
.back-button {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem; /* Positionné en haut à droite */
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  color: var(--couleur-grisFonce);
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.back-button:hover {
  transform: scale(1.1);
}

/* ---------------------------------------------------- */
/* Styles Spécifiques à la Sélection de Mode */
/* ---------------------------------------------------- */

.mode-selection {
  margin-bottom: 3rem;
}

.mode-title {
  font-size: 1.4rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1.5rem;
}

.mode-options {
  display: flex;
  flex-direction: column; /* Pour un empilement vertical sur mobile */
  gap: 1rem;
}

.mode-option {
  position: relative;
  background-color: var(--couleur-blancSite);
  border-radius: 16px;
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--effet-miniDropShadow);
  overflow: hidden;
  color: var(--couleur-noirVolcan);
}

.mode-option::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--texture-papier-image);
  background-size: var(--texture-papier-size);
  background-repeat: var(--texture-papier-repeat);
  opacity: var(--texture-papier-opacity);
  mix-blend-mode: var(--texture-papier-blend-mode);
  pointer-events: none;
  z-index: 1;
}

.mode-option > * {
  position: relative;
  z-index: 2;
}

.mode-option:hover {
  background-color: var(
    --ui-accent-color
  ); /* Utilise la couleur d'accentuation dynamique */
  border-color: var(--ui-accent-color);
  transform: translateY(-4px);
  box-shadow: var(--effet-grosDropShadow);
}

.mode-option.selected {
  background-color: var(
    --ui-accent-color
  ); /* Utilise la couleur d'accentuation dynamique */
  box-shadow: var(--effet-grosDropShadow);
  backdrop-filter: var(--effet-backgroundBlur);
}

.mode-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
}

.mode-name {
  font-size: 1.1rem;
  font-weight: 600;
}

.mode-description {
  font-size: 0.85rem;
  color: var(--couleur-grisFonce);
}

/* ---------------------------------------------------- */
/* Styles Spécifiques aux Cartes de Niveaux (Home View) */
/* ---------------------------------------------------- */

.levels-section {
  margin-bottom: 3rem;
}

.level-card {
  background: var(--couleur-grisBleuClair);
  position: relative;
  height: 120px;
  margin-bottom: 1.5rem;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--effet-miniDropShadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.level-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--effet-grosDropShadow);
}

.level-card .level-title {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--couleur-noirVolcan);
  z-index: 2;
}

.level-card .level-stickers {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;
}

/* Styles pour les images de sticker (communs à toutes les instances de .sticker) */
.sticker {
  position: absolute;
  transition: transform 0.3s ease, filter 0.3s ease;
  width: 60px; /* Taille par défaut pour les stickers */
  height: 60px;
  object-fit: contain;
  filter: drop-shadow(-1px 1px 1px rgba(0, 0, 0, 0.23)); /* Ombre par défaut */
}

/* Styles pour les stickers dans la vue de détail du niveau (plus grands) */
#level-detail-stickers-header .sticker {
  width: 110px;
  height: 110px;
  filter: drop-shadow(
    -1px 1px 1px rgba(0, 0, 0, 0.23)
  ); /* Ombre plus prononcée pour les grands stickers */
}

.level-card:hover .sticker {
  transform: scale(1.2) rotate(10deg);
}

/* ---------------------------------------------------- */
/* Styles Spécifiques à la Vue de Détail du Niveau */
/* ---------------------------------------------------- */

.level-header {
  position: relative;
  height: 200px;
  background: linear-gradient(
    45deg,
    rgba(var(--level-color-1-rgb), 0.3),
    rgba(var(--level-color-2-rgb), 0.1)
  );
  border-radius: 16px;
  margin: 1rem;
  overflow: hidden;
}

.level-header .level-title {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--couleur-noirVolcan);
  z-index: 2;
}

.level-description {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--couleur-grisFonce);
  margin-bottom: 2.5rem;
  text-align: justify;
}

.creators-section {
  margin-bottom: 3rem;
}

.creators-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--couleur-noirVolcan);
  margin-bottom: 1rem;
  text-align: center;
}

.creators-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}

.creator-pill {
  background: var(--ui-accent-color);
  color: var(--couleur-blancSite);
  box-shadow: var(--effet-innerShadow);
  padding: 0.6rem 1.2rem;
  border-radius: 25px;
  font-size: 0.85rem;
}