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

/* ===== STYLE A: MAUVE COSMIQUE ===== */
.mauve-cosmic-background {
    position: relative;
    background: linear-gradient(to right, #2e1a47, #4b2d73) !important;
    overflow: hidden;
  }
  
  /* Particules d'étoiles */
  .mauve-cosmic-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 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);
    z-index: 0;
  }
  
  /* Nébuleuse */
  .mauve-cosmic-background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(147, 112, 219, 0.3) 0%, transparent 50%),
      radial-gradient(circle at 70% 50%, rgba(138, 43, 226, 0.3) 0%, transparent 50%);
    filter: blur(30px);
    z-index: 0;
  }
  
  /* ===== STYLE B: BLEU OCÉANIQUE PROFOND ===== */
  .deep-ocean-background {
    position: relative;
    background: linear-gradient(to bottom, #0a192f, #172a45) !important;
    overflow: hidden;
  }
  
  /* Vagues */
  .deep-ocean-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 20px,
      rgba(100, 255, 218, 0.03) 20px,
      rgba(100, 255, 218, 0.03) 40px
    );
    z-index: 0;
  }
  
  /* Bulles */
  .deep-ocean-background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(
        circle at 20% 30%,
        rgba(100, 255, 218, 0.1) 0%,
        rgba(100, 255, 218, 0.1) 3px,
        transparent 3px
      ), radial-gradient(circle at 40% 70%, rgba(100, 255, 218, 0.1) 0%, rgba(100, 255, 218, 0.1) 2px, transparent 2px),
      radial-gradient(circle at 60% 20%, rgba(100, 255, 218, 0.1) 0%, rgba(100, 255, 218, 0.1) 4px, transparent 4px),
      radial-gradient(circle at 80% 50%, rgba(100, 255, 218, 0.1) 0%, rgba(100, 255, 218, 0.1) 2px, transparent 2px);
    z-index: 0;
  }
  
  /* ===== STYLE C: GRIS INDUSTRIEL ===== */
  .industrial-gray-background {
    position: relative;
    background: linear-gradient(to right, #2c3e50, #34495e) !important;
    overflow: hidden;
  }
  
  /* Motif de grille */
  .industrial-gray-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 40px 40px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    z-index: 0;
  }
  
  /* Rivets métalliques */
  .industrial-gray-background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(
        circle at 20% 20%,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.1) 3px,
        transparent 3px
      ), radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 3px, transparent 3px),
      radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 3px, transparent 3px),
      radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 3px, transparent 3px);
    z-index: 0;
  }
  
  /* ===== STYLE D: JAUNE DORÉ ROYAL ===== */
  .golden-royal-background {
    position: relative;
    background: linear-gradient(to bottom, #5d4037, #3e2723) !important;
    overflow: hidden;
  }
  
  /* Motif doré */
  .golden-royal-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(
      45deg,
      rgba(255, 215, 0, 0.05) 0px,
      rgba(255, 215, 0, 0.05) 2px,
      transparent 2px,
      transparent 4px
    );
    z-index: 0;
  }
  
  /* Éclat doré */
  .golden-royal-background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255, 215, 0, 0.15) 0%, transparent 50%),
      radial-gradient(circle at 70% 50%, rgba(255, 215, 0, 0.15) 0%, transparent 50%);
    filter: blur(20px);
    z-index: 0;
  }
  
  /* ===== STYLE E: VERT FORÊT MYSTIQUE ===== */
  .mystic-forest-background {
    position: relative;
    background: linear-gradient(to bottom, #1b5e20, #2e7d32) !important;
    overflow: hidden;
  }
  
  /* Motif de feuilles */
  .mystic-forest-background::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='100' height='100' viewBox='0 0 100 100'%3E%3Cpath fill='%23ffffff' fill-opacity='0.05' d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z'%3E%3C/path%3E%3C/svg%3E");
    z-index: 0;
  }
  
  /* Brume forestière */
  .mystic-forest-background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(76, 175, 80, 0.2) 0%, transparent 50%),
      radial-gradient(circle at 70% 50%, rgba(76, 175, 80, 0.2) 0%, transparent 50%);
    filter: blur(30px);
    z-index: 0;
  }
  
  /* ===== STYLE F: BICOLORE VIOLET-VERT ===== */
  .bicolor-purple-green-background {
    position: relative;
    background: linear-gradient(135deg, #2e1a47 0%, #2e1a47 50%, #1b5e20 50%, #1b5e20 100%) !important;
    overflow: hidden;
  }
  
  /* Texture de bruit */
  .bicolor-purple-green-background::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.05;
    z-index: 0;
  }
  
  /* Ligne de séparation brillante */
  .bicolor-purple-green-background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      135deg,
      transparent 49.5%,
      rgba(255, 255, 255, 0.2) 49.5%,
      rgba(255, 255, 255, 0.2) 50.5%,
      transparent 50.5%
    );
    z-index: 0;
  }
  
  /* ===== STYLE G: BICOLORE BLEU-MARRON ===== */
  .bicolor-blue-brown-background {
    position: relative;
    background: linear-gradient(to right, #0a192f 0%, #0a192f 50%, #5d4037 50%, #5d4037 100%) !important;
    overflow: hidden;
  }
  
  /* Texture de bruit */
  .bicolor-blue-brown-background::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.05;
    z-index: 0;
  }
  
  /* Ligne de séparation brillante */
  .bicolor-blue-brown-background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      to right,
      transparent 49.5%,
      rgba(255, 255, 255, 0.2) 49.5%,
      rgba(255, 255, 255, 0.2) 50.5%,
      transparent 50.5%
    );
    z-index: 0;
  }
  
  /* ===== STYLE H: BICOLORE GRIS-JAUNE ===== */
  .bicolor-gray-gold-background {
    position: relative;
    background: linear-gradient(45deg, #2c3e50 0%, #2c3e50 50%, #5d4037 50%, #5d4037 100%) !important;
    overflow: hidden;
  }
  
  /* Texture de bruit */
  .bicolor-gray-gold-background::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.05;
    z-index: 0;
  }
  
  /* Ligne de séparation brillante et accents dorés */
  .bicolor-gray-gold-background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        45deg,
        transparent 49.5%,
        rgba(255, 215, 0, 0.3) 49.5%,
        rgba(255, 215, 0, 0.3) 50.5%,
        transparent 50.5%
      ), radial-gradient(circle at 75% 75%, rgba(255, 215, 0, 0.15) 0%, transparent 30%);
    z-index: 0;
  }
  
  /* ===== STYLE I: BICOLORE VERT-VIOLET HORIZONTAL ===== */
  .bicolor-green-purple-horizontal-background {
    position: relative;
    background: linear-gradient(to bottom, #1b5e20 0%, #1b5e20 50%, #2e1a47 50%, #2e1a47 100%) !important;
    overflow: hidden;
  }
  
  /* Texture de bruit */
  .bicolor-green-purple-horizontal-background::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.05;
    z-index: 0;
  }
  
  /* Ligne de séparation brillante */
  .bicolor-green-purple-horizontal-background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      to bottom,
      transparent 49.5%,
      rgba(255, 255, 255, 0.2) 49.5%,
      rgba(255, 255, 255, 0.2) 50.5%,
      transparent 50.5%
    );
    z-index: 0;
  }
  
  /* ===== STYLE J: BICOLORE BLEU-VERT DIAGONAL INVERSÉ ===== */
  .bicolor-blue-green-diagonal-background {
    position: relative;
    background: linear-gradient(-135deg, #0a192f 0%, #0a192f 50%, #1b5e20 50%, #1b5e20 100%) !important;
    overflow: hidden;
  }
  
  /* Texture de bruit */
  .bicolor-blue-green-diagonal-background::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.05;
    z-index: 0;
  }
  
  /* Ligne de séparation brillante */
  .bicolor-blue-green-diagonal-background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      -135deg,
      transparent 49.5%,
      rgba(255, 255, 255, 0.2) 49.5%,
      rgba(255, 255, 255, 0.2) 50.5%,
      transparent 50.5%
    );
    z-index: 0;
  }
  
  /* Assurez-vous que le contenu reste visible au-dessus des arrière-plans */
  .mauve-cosmic-background > *,
  .deep-ocean-background > *,
  .industrial-gray-background > *,
  .golden-royal-background > *,
  .mystic-forest-background > *,
  .bicolor-purple-green-background > *,
  .bicolor-blue-brown-background > *,
  .bicolor-gray-gold-background > *,
  .bicolor-green-purple-horizontal-background > *,
  .bicolor-blue-green-diagonal-background > * {
    position: relative;
    z-index: 2;
  }