postule.html 
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Postuler - Geo Realms Craft</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
  <style>
      :root {
          --primary-color: #760202;
          --secondary-color: #2c2c2c;
          --accent-color: #9d0b28;
      }

      body {
          font-family: 'Roboto', sans-serif;
          background: #f8f9fa;
          color: #333;
          line-height: 1.6;
      }

      .hero {
          background: linear-gradient(45deg, rgba(0,0,0,0.9), rgba(0,0,0,0.7)), url('background/0.jpg');
          background-size: cover;
          background-position: center;
          min-height: 50vh;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          color: white;
          position: relative;
          overflow: hidden;
          padding: 20px;
      }

      .nav-wrapper {
          background: var(--secondary-color);
          position: sticky;
          top: 0;
          z-index: 1000;
          box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      }

      .section {
          padding: 80px 20px;
          opacity: 0;
          transform: translateY(30px);
          transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .section.visible {
          opacity: 1;
          transform: translateY(0);
      }

      .requirement-card {
          border-radius: 15px;
          padding: 30px;
          margin: 20px 0;
          background: white;
          box-shadow: 0 10px 30px rgba(0,0,0,0.08);
          border-left: 5px solid var(--accent-color);
      }

      .cta-button {
          display: inline-flex;
          align-items: center;
          padding: 16px 45px;
          background: var(--primary-color);
          color: white;
          border-radius: 50px;
          text-decoration: none;
          transition: all 0.3s ease;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 1px;
          gap: 10px;
          margin-top: 30px;
      }

      .cta-button:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 20px rgba(118, 2, 2, 0.3);
          background: var(--accent-color);
          color: white;
      }

      footer {
          background: var(--secondary-color);
          color: white;
          padding: 60px 0;
          text-align: center;
          margin-top: 80px;
      }
  </style>
</head>
<body>

<header class="hero">
  <div class="container">
    <h1 class="animate__animated animate__fadeInDown">Postuler</h1>
    <p class="animate__animated animate__fadeInUp delay-1">Rejoignez l'aventure Geo Realms Craft</p>
  </div>
</header>

<nav class="nav-wrapper">
  <div class="container">
    <ul class="right hide-on-med-and-down">
      <li><a href="index.html" class="waves-effect">Retour Ă  l'accueil</a></li>
    </ul>
  </div>
</nav>

<section class="section container">
  <div class="requirement-card animate__animated animate__fadeIn">
    <h2 class="center-align">Conditions requises</h2>

    <div class="row">
      <div class="col s12 m6">
        <h4>📋 PrĂ©requis</h4>
        <ul class="browser-default">
          <li>Avoir au minimum 18 ans</li>
          <li>Avoir un PC correct</li>
          <li>Avoir Minecraft Java</li>
          <li>Être mature et responsable</li>
        </ul>
      </div>

      <div class="col s12 m6">
        <h4>⚠ Important</h4>
        <ul class="browser-default">
          <li>Lire attentivement toutes les questions</li>
          <li>RĂ©pondre honnĂȘtement</li>
          <li>Une candidature incomplÚte sera rejetée</li>
          <li>DĂ©lai de traitement : jusqu'Ă  48 heures</li>
        </ul>
      </div>
    </div>

    <div class="center-align">
      <a href="https://docs.google.com/forms/d/e/1FAIpQLScsze3Xn7BdvFYn5RukknojyA1Bvy6aJU51p6DWzOE2iRzlbQ/viewform?usp=sf_link" target="_blank" class="cta-button">
        <svg class="icon" viewBox="0 0 24 24" style="width: 24px; height: 24px; fill: currentColor;">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
        </svg>
        Remplir le formulaire
      </a>
    </div>
  </div>
</section>

<footer>
  <div class="container">
    <p>© 2025 Geo Realms Craft - Tous droits réservés</p>
    <p>Contact : <a href="https://discord.gg/uP7cDES" class="white-text">Discord Ebony</a></p>
  </div>
</footer>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
        }
      });
    }, { threshold: 0.15 });

    document.querySelectorAll('.section').forEach(section => {
      observer.observe(section);
    });

    M.AutoInit();
  });
</script>
</body>
</html>