/* Réinitialisation et styles de base */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
      background: linear-gradient(135deg, #f4f9f4 0%, #e8f5e9 100%);
      font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      flex-direction: column;
      overflow: hidden;
      position: relative;
    }

    /* Arrière-plan avec éléments naturels animés */
    .nature-background {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: -1;
      overflow: hidden;
    }

    .leaf {
      position: absolute;
      background-color: #4CAF50;
      opacity: 0.15;
      border-radius: 50% 0 50% 50%;
      animation: float 20s infinite linear;
    }

    .leaf:nth-child(1) {
      width: 60px;
      height: 60px;
      top: 10%;
      left: 5%;
      animation-delay: 0s;
      background-color: #2E7D32;
    }

    .leaf:nth-child(2) {
      width: 40px;
      height: 40px;
      top: 20%;
      right: 10%;
      animation-delay: 5s;
      animation-duration: 25s;
      background-color: #66BB6A;
    }

    .leaf:nth-child(3) {
      width: 80px;
      height: 80px;
      bottom: 15%;
      left: 15%;
      animation-delay: 10s;
      animation-duration: 30s;
      background-color: #388E3C;
    }

    .leaf:nth-child(4) {
      width: 50px;
      height: 50px;
      bottom: 25%;
      right: 20%;
      animation-delay: 15s;
      animation-duration: 20s;
      background-color: #81C784;
    }

    @keyframes float {
      0% {
        transform: translateY(0) rotate(0deg);
      }
      25% {
        transform: translateY(-20px) rotate(90deg);
      }
      50% {
        transform: translateY(-40px) rotate(180deg);
      }
      75% {
        transform: translateY(-20px) rotate(270deg);
      }
      100% {
        transform: translateY(0) rotate(360deg);
      }
    }

    /* Conteneur principal */
    .loader-container {
      text-align: center;
      max-width: 600px;
      padding: 40px;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 24px;
      box-shadow: 0 20px 40px rgba(46, 125, 50, 0.1);
      backdrop-filter: blur(10px);
      position: relative;
      overflow: hidden;
      z-index: 1;
      transition: transform 0.3s ease;
    }

    .loader-container:hover {
      transform: translateY(-5px);
    }

    /* Effet de bordure écologique */
    .loader-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: linear-gradient(90deg, #2E7D32, #4CAF50, #81C784, #4CAF50, #2E7D32);
      background-size: 200% 100%;
      animation: gradientFlow 3s infinite linear;
    }

    @keyframes gradientFlow {
      0% {
        background-position: 200% 0;
      }
      100% {
        background-position: -200% 0;
      }
    }

    /* Titre principal */
    h1 {
      font-family: 'Montserrat', sans-serif;
      font-size: 2.8rem;
      color: #1B5E20;
      margin-bottom: 30px;
      position: relative;
      padding-bottom: 15px;
    }

    h1::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 120px;
      height: 4px;
      background: linear-gradient(90deg, #2E7D32, #4CAF50);
      border-radius: 2px;
    }

    /* Logo */
    .logo-container {
      margin-bottom: 30px;
      position: relative;
    }

    .logo {
      width: 160px;
      height: 160px;
      border-radius: 50%;
      object-fit: cover;
      border: 5px solid transparent;
      background: linear-gradient(45deg, #2E7D32, #4CAF50, #81C784) border-box;
      padding: 5px;
      animation: logoPulse 2s infinite ease-in-out;
      box-shadow: 0 10px 20px rgba(46, 125, 50, 0.2);
    }

    @keyframes logoPulse {
      0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 20px rgba(46, 125, 50, 0.2);
      }
      50% {
        transform: scale(1.05);
        box-shadow: 0 15px 30px rgba(46, 125, 50, 0.3);
      }
    }

    /* Animation de chargement moderne */
    .loading-animation {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 30px;
      height: 10px;
    }

    .loading-bar {
      width: 100%;
      height: 10px;
      background-color: #E8F5E9;
      border-radius: 5px;
      overflow: hidden;
      position: relative;
      box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .loading-progress {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #2E7D32, #4CAF50, #81C784);
      border-radius: 5px;
      animation: loading 3s ease-in-out forwards;
      position: relative;
    }

    .loading-progress::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
      animation: shimmer 2s infinite;
    }

    @keyframes loading {
      0% {
        width: 0%;
      }
      70% {
        width: 85%;
      }
      100% {
        width: 100%;
      }
    }

    @keyframes shimmer {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(100%);
      }
    }

    /* Texte de chargement */
    .loader-text {
      font-size: 1.3rem;
      color: #2E7D32;
      margin-bottom: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .loader-text::before {
      content: "🌱";
      font-size: 1.5rem;
      animation: leafWiggle 1.5s infinite ease-in-out;
    }

    @keyframes leafWiggle {
      0%, 100% {
        transform: rotate(-10deg);
      }
      50% {
        transform: rotate(10deg);
      }
    }

    /* Message écologique */
    .eco-message {
      font-size: 1rem;
      color: #555;
      font-style: italic;
      margin-top: 25px;
      padding: 15px;
      background-color: rgba(129, 199, 132, 0.1);
      border-radius: 12px;
      border-left: 4px solid #4CAF50;
    }

    /* Responsive design */
    @media (max-width: 768px) {
      .loader-container {
        margin: 20px;
        padding: 30px;
      }

      h1 {
        font-size: 2.2rem;
      }

      .logo {
        width: 130px;
        height: 130px;
      }

      .loader-text {
        font-size: 1.1rem;
      }
    }

    @media (max-width: 480px) {
      .loader-container {
        padding: 25px;
      }

      h1 {
        font-size: 1.8rem;
      }

      .logo {
        width: 110px;
        height: 110px;
      }
    }