<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Finassure — Bientôt de retour</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --dark:    #1a0608;
      --accent:  #c0171f;
      --accent2: #e8333b;
      --light:   #fbe8e8;
      --white:   #ffffff;
      --gray:    #a08080;
    }

    html, body {
      height: 100%;
      font-family: 'Segoe UI', system-ui, sans-serif;
      background: var(--dark);
      color: var(--white);
      overflow: hidden;
    }

    /* ── animated background ── */
    .bg {
      position: fixed; inset: 0; z-index: 0;
      background: radial-gradient(ellipse at 20% 50%, #3a0c0f 0%, transparent 60%),
                  radial-gradient(ellipse at 80% 20%, #200508 0%, transparent 55%),
                  linear-gradient(135deg, #0d0203 0%, #1a0608 100%);
    }

    .particles {
      position: fixed; inset: 0; z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }
    .particle {
      position: absolute;
      border-radius: 50%;
      background: rgba(192, 23, 31, 0.15);
      animation: float linear infinite;
    }

    @keyframes float {
      0%   { transform: translateY(110vh) scale(0); opacity: 0; }
      10%  { opacity: 1; }
      90%  { opacity: .6; }
      100% { transform: translateY(-10vh) scale(1); opacity: 0; }
    }

    /* ── layout ── */
    .wrapper {
      position: relative; z-index: 1;
      min-height: 100vh;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 2rem 1.5rem;
      text-align: center;
    }

    /* ── logo / brand ── */
    .brand {
      display: flex; align-items: center; gap: .75rem;
      margin-bottom: 3rem;
      animation: fadeDown .8s ease both;
    }

    .brand-name {
      font-size: 2rem; font-weight: 800;
      letter-spacing: .06em;
      background: linear-gradient(90deg, #fff 40%, #f08080);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }

    /* ── main card ── */
    .card {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.1);
      backdrop-filter: blur(18px);
      border-radius: 28px;
      padding: 3rem 3.5rem;
      max-width: 640px; width: 100%;
      box-shadow: 0 32px 64px rgba(0,0,0,.3);
      animation: fadeUp .9s .2s ease both;
    }

    .tag {
      display: inline-block;
      background: rgba(192,23,31,.2);
      border: 1px solid rgba(192,23,31,.5);
      color: #f08080;
      font-size: .78rem; font-weight: 600;
      letter-spacing: .12em; text-transform: uppercase;
      padding: .35rem 1rem; border-radius: 50px;
      margin-bottom: 1.6rem;
    }

    h1 {
      font-size: clamp(1.6rem, 5vw, 2.5rem);
      font-weight: 700; line-height: 1.25;
      margin-bottom: 1.2rem;
    }

    h1 span { color: #f08080; }

    .desc {
      font-size: 1rem; line-height: 1.7;
      color: rgba(255,255,255,.72);
      margin-bottom: 2.4rem;
    }

    /* ── divider ── */
    .divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
      margin: 2rem 0;
    }



    /* ── footer ── */
    .footer {
      position: relative; z-index: 1;
      margin-top: 2.5rem;
      color: rgba(255,255,255,.28);
      font-size: .78rem;
      animation: fadeUp 1s .5s ease both;
    }
    .footer a { color: rgba(255,255,255,.4); text-decoration: none; }
    .footer a:hover { color: rgba(255,255,255,.7); }


    /* ── keyframes ── */
    @keyframes fadeDown {
      from { opacity: 0; transform: translateY(-20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── responsive ── */
    @media (max-width: 520px) {
      .card { padding: 2.2rem 1.5rem; border-radius: 20px; }
      .countdown { gap: .7rem; }
      .unit { min-width: 58px; }
      .unit-val { font-size: 1.9rem; }
    }
  </style>
</head>
<body>

<div class="bg"></div>
<div class="particles" id="particles"></div>

<div class="wrapper">


  <div class="card">
    <div class="tag">🔧 En cours de refonte</div>

    <h1>Quelque chose de <span>meilleur</span><br>se prépare pour vous</h1>

    <p class="desc">
      L'espace Finassure est actuellement en cours de refonte complète afin de
      mieux vous servir. Nous travaillons activement pour vous offrir une
      expérience repensée et plus performante.<br>
      Nous nous excusons sincèrement pour ce désagrément.
    </p>

    <div class="divider"></div>


  </div>

  <div class="footer">
    &copy; 2026 Finassure — Tous droits réservés &nbsp;·&nbsp;
    <a href="mailto:contact@finassure.com">contact@finassure.com</a>
  </div>

</div>

<script>
  // ── particles ──
  const container = document.getElementById('particles');
  for (let i = 0; i < 22; i++) {
    const p = document.createElement('div');
    p.className = 'particle';
    const size = Math.random() * 80 + 20;
    p.style.cssText = `
      width:${size}px; height:${size}px;
      left:${Math.random()*100}%;
      animation-duration:${Math.random()*18+12}s;
      animation-delay:${Math.random()*-20}s;
    `;
    container.appendChild(p);
  }


</script>
</body>
</html>
