/* Styles d'arrière-plans stylisés pour Dofinia */

/* ===== STYLE 2: HEXAGONAL VIOLET ===== */
/* Pour la section characters-section */
.characters-section {
    position: relative;
    background: linear-gradient(to bottom right, #3a1c5a, #2a0f40) !important;
    overflow: hidden;
  }
  
  /* Motif hexagonal */
  .characters-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%239C92AC' fill-opacity='0.1' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    z-index: 0;
  }
  
  /* Lueur centrale */
  .characters-section::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background-color: #9f4ee6;
    border-radius: 50%;
    opacity: 0.2;
    filter: blur(100px);
    z-index: 0;
  }
  
  /* Ajustements pour le contenu */
  .characters-section .characters-content {
    position: relative;
    z-index: 2;
  }
  
  /* ===== STYLE 1: PARCHEMIN ANCIEN ===== */
  /* Pour la section Offre Exclusive et Campagne */
  .campaign-section {
    position: relative;
    background-color: #f0e6d2 !important;
    color: #5a4534;
    overflow: hidden;
  }
  
  /* Texture de papier */
  .campaign-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.3;
    z-index: 0;
  }
  
  /* Motifs isométriques */
  .campaign-section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    /* Bloc 1 */
    background-image: linear-gradient(45deg, rgba(230, 220, 198, 0.5) 0%, rgba(230, 220, 198, 0.5) 100%), /* Bloc 2 */
      linear-gradient(45deg, rgba(230, 220, 198, 0.5) 0%, rgba(230, 220, 198, 0.5) 100%), /* Bloc 3 */
      linear-gradient(45deg, rgba(230, 220, 198, 0.5) 0%, rgba(230, 220, 198, 0.5) 100%), /* Bloc 4 */
      linear-gradient(45deg, rgba(230, 220, 198, 0.5) 0%, rgba(230, 220, 198, 0.5) 100%), /* Bloc 5 */
      linear-gradient(45deg, rgba(230, 220, 198, 0.5) 0%, rgba(230, 220, 198, 0.5) 100%);
    background-size: 80px 40px, 80px 40px, 80px 40px, 80px 40px, 80px 40px;
    background-position: 10% 20%, 30% 50%, 70% 30%, 90% 70%, 50% 90%;
    background-repeat: no-repeat;
  }
  
  /* Plantes sur les blocs */
  .campaign-section .campaign-content::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 30%;
    left: 30%;
    background: radial-gradient(circle at center, #a4d555 30%, transparent 70%);
    z-index: 1;
    box-shadow: 5px 15px 0 -2px #a4d555, -15px 25px 0 -2px #a4d555, 25px 35px 0 -2px #a4d555;
  }
  
  /* Ajustements pour le contenu */
  .campaign-section .campaign-content {
    position: relative;
    z-index: 2;
  }
  
  /* ===== STYLE 6: FANTASY MYSTIQUE ===== */
  /* Pour la section launcher */
  .launcher-section {
    position: relative;
    background: linear-gradient(to bottom, #0f0a1a, #1a1025, #0f0a1a) !important;
    overflow: hidden;
  }
  
  /* Brume mystique */
  .launcher-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 30%, rgba(157, 113, 234, 0.15) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(157, 113, 234, 0.1) 0%, transparent 50%);
    filter: blur(20px);
    z-index: 0;
  }
  
  /* Étoiles scintillantes */
  .launcher-section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background-image: radial-gradient(
        circle at 15% 25%,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.8) 1px,
        transparent 1px
      ), radial-gradient(circle at 35% 80%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 1px, transparent 1px),
      radial-gradient(circle at 65% 10%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 2px, transparent 2px),
      radial-gradient(circle at 25% 40%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 1px, transparent 1px),
      radial-gradient(circle at 85% 75%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
      radial-gradient(circle at 45% 60%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 1px, transparent 1px),
      radial-gradient(circle at 75% 30%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 2px, transparent 2px),
      radial-gradient(circle at 10% 90%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 1px, transparent 1px);
  }
  
  /* Runes mystiques */
  .launcher-section .launcher-content::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    top: 20%;
    left: 15%;
    border: 2px solid #9d71ea;
    border-radius: 8px;
    opacity: 0.2;
    transform: rotate(15deg);
    z-index: 1;
    box-shadow: 400px 200px 0 0 #9d71ea33, 200px 300px 0 0 #9d71ea33, -100px 150px 0 0 #9d71ea33, 300px -50px 0 0
      #9d71ea33;
  }
  
  .launcher-section .launcher-content::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 20%;
    left: 15%;
    background-color: rgba(157, 113, 234, 0.5);
    border-radius: 50%;
    opacity: 0.2;
    transform: rotate(15deg);
    z-index: 1;
    box-shadow: 400px 200px 0 0 #9d71ea55, 200px 300px 0 0 #9d71ea55, -100px 150px 0 0 #9d71ea55, 300px -50px 0 0
      #9d71ea55;
  }
  
  /* Ajustements pour le contenu */
  .launcher-section .launcher-content {
    position: relative;
    z-index: 2;
  }
  
  /* Animation pour les étoiles */
  @keyframes twinkle {
    0% {
      opacity: 0.2;
    }
    100% {
      opacity: 0.8;
    }
  }
  
  .launcher-section .star {
    animation: twinkle 3s infinite alternate;
  }