/* --- 1. RESET COMPLET DU MAIN --- */
/* On cible précisément pour écraser toutes les règles globales */
body > main.puzzle-main {
  /* POSITIONNEMENT : On transforme le main en une boîte flexible centrée */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* Centre horizontalement (Gauche/Droite) */
  justify-content: center !important; /* Centre verticalement (Haut/Bas) */

  /* TAILLE : On force le plein écran */
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100vh !important; /* Toute la hauteur de l'écran */

  /* NETTOYAGE : On vire les marges parasites */
  margin: 0 !important;
  padding: 80px 20px !important; /* Juste de l'espace pour le header en haut */
  box-sizing: border-box !important; /* Empêche le padding d'agrandir la boîte */
}

/* --- 2. LE TITRE --- */
.intro-text {
  text-align: center !important;
  margin-bottom: 2rem !important;
  width: 100%; /* S'assure que le texte prend toute la largeur pour se centrer */
}

.intro-text h2 {
  color: #fff;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* --- 3. LA GROSSE BOÎTE (SPLIT CONTAINER) --- */
.split-container {
  /* TAILLE */
  width: 100% !important;
  max-width: 1400px !important; /* Largeur max imposante */
  height: 60vh !important; /* Hauteur relative à l'écran (60%) */
  min-height: 500px !important; /* Sécurité pour petits écrans */

  /* STYLE */
  display: flex;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);

  /* On s'assure qu'elle ne déborde pas */
  margin: 0 !important;
}

/* ... La suite (à partir de .split-card) ne change pas ... */

/* ... La suite (à partir de .split-card) ne change pas ... */

/* ... Le reste du CSS (à partir de .split-card) reste identique ... */

/* --- LES DEUX BLOCS --- */
.split-card {
  position: relative;
  flex: 1; /* 50% chacun au départ */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition:
    flex 0.4s ease,
    background 0.4s ease; /* Animation fluide */
  padding: 2rem;
  text-align: center;
}

/* --- BLOC GAUCHE : INTERACTIF --- */
.split-card.interactive {
  background: linear-gradient(180deg, #1e2024 0%, #18191c 100%);

  /* C'est CETTE ligne qu'on change : */
  /* On passe du gris (#383c44) au bleu cyan du thème (#00d9f6) */
  /* J'ai mis 2px pour que la séparation soit bien nette */
  border-right: 2px solid #00d9f6;
}

.split-card.interactive:hover {
  flex: 1.3; /* S'agrandit un peu */
  background: linear-gradient(180deg, #24272e 0%, #1e2024 100%);
}

.split-card.interactive .icon-wrapper {
  background: rgba(0, 217, 246, 0.1);
  color: #00d9f6;
  box-shadow: 0 0 15px rgba(0, 217, 246, 0.1);
}

.split-card.interactive:hover .icon-wrapper {
  transform: scale(1.1) rotate(-5deg);
  background: rgba(0, 217, 246, 0.2);
}

/* --- BLOC DROITE : VISUALISATION --- */
.split-card.visualization {
  background: linear-gradient(180deg, #1e2024 0%, #18191c 100%);
}

.split-card.visualization:hover {
  flex: 1.3; /* S'agrandit un peu */
  background: linear-gradient(180deg, #24272e 0%, #1e2024 100%);
}

/* Pour le bloc de droite, on utilise une couleur différente (ex: Orange ou Violet) */
.split-card.visualization .icon-wrapper {
  background: rgba(255, 159, 0, 0.1);
  color: #ff9f00; /* Orange du thème */
  box-shadow: 0 0 15px rgba(255, 159, 0, 0.1);
}

.split-card.visualization:hover .icon-wrapper {
  transform: scale(1.1) rotate(5deg);
  background: rgba(255, 159, 0, 0.2);
}

/* --- ÉLÉMENTS INTERNES --- */
.icon-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.split-card h3 {
  color: #fff;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.split-card p {
  color: #b9bbbe;
  max-width: 350px;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.mode-tag {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: 0.3s;
}

.split-card:hover .mode-tag {
  background: #fff;
  color: #000;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
  .split-container {
    flex-direction: column;
    height: auto;
  }

  .split-card {
    padding: 3rem 1rem;
    border-right: none;
    border-bottom: 1px solid #383c44;
  }

  .split-card:last-child {
    border-bottom: none;
  }

  /* On désactive l'effet d'agrandissement sur mobile */
  .split-card:hover {
    flex: 1;
  }
}