templates/acceuil/index.html.twig line 1

  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>AVA-Service | Plateforme d'Investissement Crypto</title>
  7.     
  8.     <!-- Bootstrap 5 -->
  9.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  10.     <!-- Font Awesome -->
  11.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  12.     <!-- Google Fonts - Space Grotesk pour un look moderne -->
  13.     <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  14.     
  15.     <link rel="shortcut icon" href="{{ asset('img/favicon.ico') }}" type="image/x-icon">
  16.     
  17.     <style>
  18.         * {
  19.             margin: 0;
  20.             padding: 0;
  21.             box-sizing: border-box;
  22.         }
  23.         
  24.         :root {
  25.             --primary: #00d4ff;
  26.             --secondary: #7b61ff;
  27.             --accent: #ff6b35;
  28.             --success: #00ff88;
  29.             --dark: #0a0e27;
  30.             --dark-card: #131a3a;
  31.             --dark-hover: #1a2342;
  32.             --text-light: #a8b2d1;
  33.             --text-white: #ffffff;
  34.         }
  35.         
  36.         body {
  37.             font-family: 'Space Grotesk', sans-serif;
  38.             background: var(--dark);
  39.             color: var(--text-white);
  40.             overflow-x: hidden;
  41.             line-height: 1.6;
  42.         }
  43.         
  44.         /* Animated Background */
  45.         .animated-bg {
  46.             position: fixed;
  47.             top: 0;
  48.             left: 0;
  49.             width: 100%;
  50.             height: 100%;
  51.             z-index: -1;
  52.             background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0f1528 100%);
  53.             overflow: hidden;
  54.         }
  55.         
  56.         .animated-bg::before {
  57.             content: '';
  58.             position: absolute;
  59.             width: 500px;
  60.             height: 500px;
  61.             background: radial-gradient(circle, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
  62.             border-radius: 50%;
  63.             top: -250px;
  64.             left: -250px;
  65.             animation: float 20s infinite ease-in-out;
  66.         }
  67.         
  68.         .animated-bg::after {
  69.             content: '';
  70.             position: absolute;
  71.             width: 400px;
  72.             height: 400px;
  73.             background: radial-gradient(circle, rgba(123, 97, 255, 0.1) 0%, transparent 70%);
  74.             border-radius: 50%;
  75.             bottom: -200px;
  76.             right: -200px;
  77.             animation: float 25s infinite ease-in-out reverse;
  78.         }
  79.         
  80.         @keyframes float {
  81.             0%, 100% { transform: translate(0, 0) rotate(0deg); }
  82.             33% { transform: translate(30px, -30px) rotate(120deg); }
  83.             66% { transform: translate(-20px, 20px) rotate(240deg); }
  84.         }
  85.         
  86.         /* Navbar */
  87.         .navbar-modern {
  88.             background: rgba(10, 14, 39, 0.8);
  89.             backdrop-filter: blur(20px);
  90.             border-bottom: 1px solid rgba(0, 212, 255, 0.1);
  91.             padding: 1rem 0;
  92.             position: fixed;
  93.             width: 100%;
  94.             top: 0;
  95.             z-index: 1000;
  96.             transition: all 0.3s;
  97.         }
  98.         
  99.         .navbar-modern.scrolled {
  100.             background: rgba(10, 14, 39, 0.95);
  101.             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  102.         }
  103.         
  104.         .navbar-brand img {
  105.             height: 45px;
  106.             filter: brightness(1.2);
  107.         }
  108.         
  109.         .nav-link-custom {
  110.             color: var(--text-light) !important;
  111.             font-weight: 500;
  112.             margin: 0 1rem;
  113.             position: relative;
  114.             transition: color 0.3s;
  115.         }
  116.         
  117.         .nav-link-custom::after {
  118.             content: '';
  119.             position: absolute;
  120.             bottom: -5px;
  121.             left: 0;
  122.             width: 0;
  123.             height: 2px;
  124.             background: var(--primary);
  125.             transition: width 0.3s;
  126.         }
  127.         
  128.         .nav-link-custom:hover {
  129.             color: var(--primary) !important;
  130.         }
  131.         
  132.         .nav-link-custom:hover::after {
  133.             width: 100%;
  134.         }
  135.         
  136.         .btn-neon {
  137.             background: linear-gradient(135deg, var(--primary), var(--secondary));
  138.             border: none;
  139.             padding: 0.7rem 2rem;
  140.             border-radius: 50px;
  141.             color: white;
  142.             font-weight: 600;
  143.             text-transform: uppercase;
  144.             letter-spacing: 1px;
  145.             position: relative;
  146.             overflow: hidden;
  147.             transition: all 0.3s;
  148.             box-shadow: 0 5px 20px rgba(0, 212, 255, 0.3);
  149.         }
  150.         
  151.         .btn-neon::before {
  152.             content: '';
  153.             position: absolute;
  154.             top: 50%;
  155.             left: 50%;
  156.             width: 0;
  157.             height: 0;
  158.             border-radius: 50%;
  159.             background: rgba(255, 255, 255, 0.2);
  160.             transform: translate(-50%, -50%);
  161.             transition: width 0.6s, height 0.6s;
  162.         }
  163.         
  164.         .btn-neon:hover::before {
  165.             width: 300px;
  166.             height: 300px;
  167.         }
  168.         
  169.         .btn-neon:hover {
  170.             transform: translateY(-3px);
  171.             box-shadow: 0 10px 30px rgba(0, 212, 255, 0.5);
  172.             color: white;
  173.         }
  174.         
  175.         /* Hero Section */
  176.         .hero-modern {
  177.             min-height: 100vh;
  178.             display: flex;
  179.             align-items: center;
  180.             padding-top: 100px;
  181.             position: relative;
  182.         }
  183.         
  184.         .hero-title {
  185.             font-size: 4rem;
  186.             font-weight: 700;
  187.             background: linear-gradient(135deg, var(--primary), var(--secondary), var(--success));
  188.             -webkit-background-clip: text;
  189.             -webkit-text-fill-color: transparent;
  190.             background-clip: text;
  191.             margin-bottom: 1.5rem;
  192.             line-height: 1.2;
  193.         }
  194.         
  195.         .hero-subtitle {
  196.             font-size: 1.3rem;
  197.             color: var(--text-light);
  198.             margin-bottom: 2rem;
  199.             line-height: 1.8;
  200.         }
  201.         
  202.         .gradient-text {
  203.             background: linear-gradient(135deg, var(--primary), var(--secondary));
  204.             -webkit-background-clip: text;
  205.             -webkit-text-fill-color: transparent;
  206.             background-clip: text;
  207.         }
  208.         
  209.         /* Stats Cards */
  210.         .stat-card {
  211.             background: var(--dark-card);
  212.             border: 1px solid rgba(0, 212, 255, 0.1);
  213.             border-radius: 20px;
  214.             padding: 2rem;
  215.             text-align: center;
  216.             transition: all 0.3s;
  217.             position: relative;
  218.             overflow: hidden;
  219.         }
  220.         
  221.         .stat-card::before {
  222.             content: '';
  223.             position: absolute;
  224.             top: 0;
  225.             left: -100%;
  226.             width: 100%;
  227.             height: 100%;
  228.             background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.1), transparent);
  229.             transition: left 0.5s;
  230.         }
  231.         
  232.         .stat-card:hover::before {
  233.             left: 100%;
  234.         }
  235.         
  236.         .stat-card:hover {
  237.             transform: translateY(-10px);
  238.             border-color: var(--primary);
  239.             box-shadow: 0 20px 40px rgba(0, 212, 255, 0.2);
  240.         }
  241.         
  242.         .stat-icon {
  243.             width: 60px;
  244.             height: 60px;
  245.             background: linear-gradient(135deg, var(--primary), var(--secondary));
  246.             border-radius: 15px;
  247.             display: flex;
  248.             align-items: center;
  249.             justify-content: center;
  250.             margin: 0 auto 1rem;
  251.             font-size: 1.5rem;
  252.         }
  253.         
  254.         /* Crypto Pack Cards */
  255.         .pack-card-modern {
  256.             background: var(--dark-card);
  257.             border: 2px solid rgba(0, 212, 255, 0.2);
  258.             border-radius: 25px;
  259.             overflow: hidden;
  260.             transition: all 0.4s;
  261.             position: relative;
  262.             margin-bottom: 2rem;
  263.         }
  264.         
  265.         .pack-card-modern::before {
  266.             content: '';
  267.             position: absolute;
  268.             top: 0;
  269.             left: 0;
  270.             right: 0;
  271.             height: 5px;
  272.             background: linear-gradient(90deg, var(--primary), var(--secondary), var(--success));
  273.         }
  274.         
  275.         .pack-card-modern:hover {
  276.             transform: translateY(-15px) scale(1.02);
  277.             border-color: var(--primary);
  278.             box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
  279.         }
  280.         
  281.         .pack-header-modern {
  282.             background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(123, 97, 255, 0.1));
  283.             padding: 2rem;
  284.             text-align: center;
  285.             position: relative;
  286.         }
  287.         
  288.         .promo-badge {
  289.             position: absolute;
  290.             top: 15px;
  291.             right: 15px;
  292.             background: var(--accent);
  293.             color: white;
  294.             padding: 0.5rem 1rem;
  295.             border-radius: 50px;
  296.             font-size: 0.75rem;
  297.             font-weight: 700;
  298.             text-transform: uppercase;
  299.             letter-spacing: 1px;
  300.             box-shadow: 0 5px 15px rgba(255, 107, 53, 0.4);
  301.             animation: pulse 2s infinite;
  302.         }
  303.         
  304.         @keyframes pulse {
  305.             0%, 100% { transform: scale(1); }
  306.             50% { transform: scale(1.05); }
  307.         }
  308.         
  309.         .pack-price-modern {
  310.             font-size: 3rem;
  311.             font-weight: 800;
  312.             background: linear-gradient(135deg, var(--primary), var(--success));
  313.             -webkit-background-clip: text;
  314.             -webkit-text-fill-color: transparent;
  315.             margin: 1rem 0;
  316.         }
  317.         
  318.         .pack-body-modern {
  319.             padding: 2rem;
  320.         }
  321.         
  322.         .gain-badge {
  323.             display: inline-block;
  324.             background: linear-gradient(135deg, var(--success), #00cc70);
  325.             color: white;
  326.             padding: 0.8rem 2rem;
  327.             border-radius: 50px;
  328.             font-size: 1.2rem;
  329.             font-weight: 700;
  330.             margin: 1rem 0;
  331.             box-shadow: 0 5px 20px rgba(0, 255, 136, 0.3);
  332.         }
  333.         
  334.         .btn-invest-modern {
  335.             width: 100%;
  336.             background: linear-gradient(135deg, var(--primary), var(--secondary));
  337.             border: none;
  338.             color: white;
  339.             padding: 1.2rem;
  340.             border-radius: 50px;
  341.             font-weight: 700;
  342.             font-size: 1.1rem;
  343.             text-transform: uppercase;
  344.             letter-spacing: 2px;
  345.             transition: all 0.3s;
  346.             position: relative;
  347.             overflow: hidden;
  348.         }
  349.         
  350.         .btn-invest-modern::after {
  351.             content: '→';
  352.             position: absolute;
  353.             right: -30px;
  354.             transition: right 0.3s;
  355.         }
  356.         
  357.         .btn-invest-modern:hover::after {
  358.             right: 20px;
  359.         }
  360.         
  361.         .btn-invest-modern:hover {
  362.             transform: scale(1.05);
  363.             box-shadow: 0 15px 40px rgba(0, 212, 255, 0.5);
  364.             color: white;
  365.         }
  366.         
  367.         /* Section Titles */
  368.         .section-title-modern {
  369.             font-size: 3rem;
  370.             font-weight: 700;
  371.             text-align: center;
  372.             margin-bottom: 1rem;
  373.         }
  374.         
  375.         .section-subtitle {
  376.             text-align: center;
  377.             color: var(--text-light);
  378.             font-size: 1.2rem;
  379.             margin-bottom: 4rem;
  380.         }
  381.         
  382.         /* About Section */
  383.         .about-card {
  384.             background: var(--dark-card);
  385.             border-radius: 25px;
  386.             padding: 3rem;
  387.             border: 1px solid rgba(0, 212, 255, 0.1);
  388.             transition: all 0.3s;
  389.         }
  390.         
  391.         .about-card:hover {
  392.             border-color: var(--primary);
  393.             box-shadow: 0 20px 50px rgba(0, 212, 255, 0.2);
  394.         }
  395.         
  396.         /* Testimonial Cards - Taille réduite */
  397.         #AvisClients .about-card {
  398.             padding: 1.25rem;
  399.             border-radius: 15px;
  400.         }
  401.         
  402.         #AvisClients .stat-icon {
  403.             width: 40px;
  404.             height: 40px;
  405.             font-size: 1rem;
  406.             margin: 0;
  407.         }
  408.         
  409.         #AvisClients h5 {
  410.             font-size: 0.95rem;
  411.             margin-bottom: 0.25rem !important;
  412.         }
  413.         
  414.         #AvisClients .text-light.small {
  415.             font-size: 0.75rem;
  416.             margin-bottom: 0.5rem !important;
  417.         }
  418.         
  419.         #AvisClients .mb-3 {
  420.             margin-bottom: 0.5rem !important;
  421.         }
  422.         
  423.         #AvisClients .fas.fa-star {
  424.             font-size: 0.85rem;
  425.             margin-right: 0.15rem;
  426.         }
  427.         
  428.         #AvisClients .about-card p {
  429.             font-size: 0.875rem;
  430.             line-height: 1.5;
  431.         }
  432.         
  433.         #AvisClients .row.g-4 {
  434.             --bs-gutter-y: 1rem;
  435.             --bs-gutter-x: 1rem;
  436.         }
  437.         
  438.         /* Footer */
  439.         .footer-modern {
  440.             background: var(--dark-card);
  441.             border-top: 1px solid rgba(0, 212, 255, 0.1);
  442.             padding: 3rem 0;
  443.             margin-top: 5rem;
  444.         }
  445.         
  446.         .social-link {
  447.             display: inline-flex;
  448.             align-items: center;
  449.             justify-content: center;
  450.             width: 50px;
  451.             height: 50px;
  452.             background: var(--dark-card);
  453.             border: 1px solid rgba(0, 212, 255, 0.2);
  454.             border-radius: 50%;
  455.             color: var(--primary);
  456.             text-decoration: none;
  457.             margin: 0 0.5rem;
  458.             transition: all 0.3s;
  459.         }
  460.         
  461.         .social-link:hover {
  462.             background: var(--primary);
  463.             color: white;
  464.             transform: translateY(-5px);
  465.             box-shadow: 0 10px 25px rgba(0, 212, 255, 0.4);
  466.         }
  467.         
  468.         /* Scroll Animations */
  469.         .fade-in {
  470.             opacity: 0;
  471.             transform: translateY(30px);
  472.             transition: all 0.8s;
  473.         }
  474.         
  475.         .fade-in.visible {
  476.             opacity: 1;
  477.             transform: translateY(0);
  478.         }
  479.         
  480.         /* Contact Bar */
  481.         .contact-bar {
  482.             background: var(--dark-card);
  483.             border-bottom: 1px solid rgba(0, 212, 255, 0.1);
  484.             padding: 1rem 0;
  485.             margin-top: 80px;
  486.         }
  487.         
  488.         /* Levels Section - Nouveau design en onglets */
  489.         .levels-tabs-container {
  490.             max-width: 900px;
  491.             margin: 0 auto;
  492.         }
  493.         
  494.         .levels-tab-nav {
  495.             display: flex;
  496.             justify-content: center;
  497.             gap: 1rem;
  498.             margin-bottom: 2rem;
  499.             flex-wrap: wrap;
  500.         }
  501.         
  502.         .levels-tab-button {
  503.             background: var(--dark-card);
  504.             border: 2px solid rgba(0, 212, 255, 0.3);
  505.             border-radius: 15px;
  506.             padding: 1rem 2.5rem;
  507.             color: var(--text-light);
  508.             cursor: pointer;
  509.             transition: all 0.3s;
  510.             font-weight: 600;
  511.             font-size: 1.1rem;
  512.             position: relative;
  513.             overflow: hidden;
  514.         }
  515.         
  516.         .levels-tab-button::before {
  517.             content: '';
  518.             position: absolute;
  519.             top: 0;
  520.             left: -100%;
  521.             width: 100%;
  522.             height: 100%;
  523.             background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.2), transparent);
  524.             transition: left 0.5s;
  525.         }
  526.         
  527.         .levels-tab-button:hover::before {
  528.             left: 100%;
  529.         }
  530.         
  531.         .levels-tab-button:hover {
  532.             border-color: var(--primary);
  533.             color: var(--primary);
  534.             transform: translateY(-3px);
  535.         }
  536.         
  537.         .levels-tab-button.active {
  538.             background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(123, 97, 255, 0.2));
  539.             border-color: var(--primary);
  540.             color: var(--primary);
  541.             box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
  542.         }
  543.         
  544.         .levels-tab-content {
  545.             display: none;
  546.             animation: fadeIn 0.5s;
  547.         }
  548.         
  549.         .levels-tab-content.active {
  550.             display: block;
  551.         }
  552.         
  553.         @keyframes fadeIn {
  554.             from {
  555.                 opacity: 0;
  556.                 transform: translateY(20px);
  557.             }
  558.             to {
  559.                 opacity: 1;
  560.                 transform: translateY(0);
  561.             }
  562.         }
  563.         
  564.         .level-card-new {
  565.             background: var(--dark-card);
  566.             border: 2px solid rgba(0, 212, 255, 0.2);
  567.             border-radius: 20px;
  568.             padding: 2.5rem;
  569.             transition: all 0.3s;
  570.             position: relative;
  571.             overflow: hidden;
  572.         }
  573.         
  574.         .level-card-new::before {
  575.             content: '';
  576.             position: absolute;
  577.             top: 0;
  578.             left: 0;
  579.             right: 0;
  580.             height: 4px;
  581.             background: linear-gradient(90deg, var(--primary), var(--secondary));
  582.         }
  583.         
  584.         .level-card-new.featured::before {
  585.             background: linear-gradient(90deg, var(--primary), var(--secondary), var(--success));
  586.             height: 5px;
  587.         }
  588.         
  589.         .level-card-new:hover {
  590.             border-color: var(--primary);
  591.             box-shadow: 0 20px 50px rgba(0, 212, 255, 0.25);
  592.             transform: translateY(-5px);
  593.         }
  594.         
  595.         .level-header-new {
  596.             text-align: center;
  597.             margin-bottom: 2rem;
  598.         }
  599.         
  600.         .level-badge-new {
  601.             display: inline-block;
  602.             background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(123, 97, 255, 0.2));
  603.             border: 1px solid rgba(0, 212, 255, 0.3);
  604.             border-radius: 50px;
  605.             padding: 0.5rem 1.5rem;
  606.             font-size: 0.85rem;
  607.             color: var(--primary);
  608.             margin-bottom: 1rem;
  609.             font-weight: 600;
  610.         }
  611.         
  612.         .level-title-new {
  613.             font-size: 2rem;
  614.             font-weight: 700;
  615.             margin-bottom: 0.5rem;
  616.             background: linear-gradient(135deg, var(--primary), var(--secondary));
  617.             -webkit-background-clip: text;
  618.             -webkit-text-fill-color: transparent;
  619.             background-clip: text;
  620.         }
  621.         
  622.         .level-benefit-new {
  623.             font-size: 1.1rem;
  624.             color: var(--text-light);
  625.             margin-bottom: 2rem;
  626.         }
  627.         
  628.         .level-packs-list {
  629.             list-style: none;
  630.             padding: 0;
  631.             margin: 0 0 2rem 0;
  632.         }
  633.         
  634.         .level-packs-list li {
  635.             display: flex;
  636.             align-items: center;
  637.             padding: 1rem;
  638.             margin-bottom: 0.75rem;
  639.             background: rgba(0, 212, 255, 0.05);
  640.             border-radius: 10px;
  641.             border-left: 3px solid var(--success);
  642.             transition: all 0.3s;
  643.         }
  644.         
  645.         .level-packs-list li:hover {
  646.             background: rgba(0, 212, 255, 0.1);
  647.             transform: translateX(5px);
  648.         }
  649.         
  650.         .level-packs-list li i {
  651.             color: var(--success);
  652.             margin-right: 1rem;
  653.             font-size: 1.1rem;
  654.         }
  655.         
  656.         .level-packs-list li span {
  657.             flex: 1;
  658.         }
  659.         
  660.         .level-cta-button {
  661.             width: 100%;
  662.             padding: 1rem 2rem;
  663.             background: linear-gradient(135deg, var(--primary), var(--secondary));
  664.             border: none;
  665.             border-radius: 50px;
  666.             color: white;
  667.             font-weight: 600;
  668.             font-size: 1rem;
  669.             text-transform: uppercase;
  670.             letter-spacing: 1px;
  671.             transition: all 0.3s;
  672.             text-decoration: none;
  673.             display: block;
  674.             text-align: center;
  675.         }
  676.         
  677.         .level-cta-button:hover {
  678.             transform: translateY(-3px);
  679.             box-shadow: 0 15px 35px rgba(0, 212, 255, 0.4);
  680.             color: white;
  681.         }
  682.         
  683.         .level-cta-button.outline {
  684.             background: transparent;
  685.             border: 2px solid var(--primary);
  686.             color: var(--primary);
  687.         }
  688.         
  689.         .level-cta-button.outline:hover {
  690.             background: var(--primary);
  691.             color: white;
  692.         }
  693.         
  694.         /* Responsive */
  695.         @media (max-width: 768px) {
  696.             .hero-title {
  697.                 font-size: 2.5rem;
  698.             }
  699.             
  700.             .section-title-modern {
  701.                 font-size: 2rem;
  702.             }
  703.             
  704.             .level-card-modern.featured {
  705.                 transform: scale(1);
  706.             }
  707.         }
  708.         
  709.         /* Toast Notifications */
  710.         .toast-container-custom {
  711.             position: fixed;
  712.             top: 30px;
  713.             right: 30px;
  714.             z-index: 9999;
  715.             display: flex;
  716.             flex-direction: column;
  717.             gap: 1rem;
  718.             max-width: 350px;
  719.         }
  720.         
  721.         .toast-notification {
  722.             background: var(--dark-card);
  723.             border: 2px solid rgba(0, 212, 255, 0.3);
  724.             border-radius: 15px;
  725.             padding: 1.2rem;
  726.             box-shadow: 0 10px 40px rgba(0, 212, 255, 0.3);
  727.             animation: slideInTop 0.5s ease-out;
  728.             position: relative;
  729.             overflow: hidden;
  730.             backdrop-filter: blur(10px);
  731.         }
  732.         
  733.         .toast-notification::before {
  734.             content: '';
  735.             position: absolute;
  736.             top: 0;
  737.             left: 0;
  738.             width: 4px;
  739.             height: 100%;
  740.             background: linear-gradient(180deg, var(--primary), var(--success));
  741.         }
  742.         
  743.         @keyframes slideInTop {
  744.             from {
  745.                 transform: translateY(-100px);
  746.                 opacity: 0;
  747.             }
  748.             to {
  749.                 transform: translateY(0);
  750.                 opacity: 1;
  751.             }
  752.         }
  753.         
  754.         @keyframes slideOutTop {
  755.             from {
  756.                 transform: translateY(0);
  757.                 opacity: 1;
  758.             }
  759.             to {
  760.                 transform: translateY(-100px);
  761.                 opacity: 0;
  762.             }
  763.         }
  764.         
  765.         .toast-notification.hide {
  766.             animation: slideOutTop 0.5s ease-out forwards;
  767.         }
  768.         
  769.         .toast-header-custom {
  770.             display: flex;
  771.             align-items: center;
  772.             gap: 0.75rem;
  773.             margin-bottom: 0.75rem;
  774.         }
  775.         
  776.         .toast-icon {
  777.             width: 40px;
  778.             height: 40px;
  779.             background: linear-gradient(135deg, var(--primary), var(--secondary));
  780.             border-radius: 50%;
  781.             display: flex;
  782.             align-items: center;
  783.             justify-content: center;
  784.             color: white;
  785.             font-size: 1.2rem;
  786.             flex-shrink: 0;
  787.         }
  788.         
  789.         .toast-content {
  790.             flex: 1;
  791.         }
  792.         
  793.         .toast-title {
  794.             color: var(--primary);
  795.             font-weight: 600;
  796.             font-size: 0.9rem;
  797.             margin-bottom: 0.25rem;
  798.             display: flex;
  799.             align-items: center;
  800.             gap: 0.5rem;
  801.         }
  802.         
  803.         .toast-message {
  804.             color: var(--text-light);
  805.             font-size: 0.85rem;
  806.             line-height: 1.4;
  807.         }
  808.         
  809.         .toast-amount {
  810.             color: var(--success);
  811.             font-weight: 700;
  812.             font-size: 1rem;
  813.             margin-top: 0.5rem;
  814.             display: flex;
  815.             align-items: center;
  816.             gap: 0.5rem;
  817.         }
  818.         
  819.         .toast-close {
  820.             position: absolute;
  821.             top: 10px;
  822.             right: 10px;
  823.             background: transparent;
  824.             border: none;
  825.             color: var(--text-light);
  826.             cursor: pointer;
  827.             font-size: 1.2rem;
  828.             opacity: 0.7;
  829.             transition: all 0.3s;
  830.             padding: 0.25rem;
  831.             line-height: 1;
  832.         }
  833.         
  834.         .toast-close:hover {
  835.             opacity: 1;
  836.             color: var(--primary);
  837.             transform: rotate(90deg);
  838.         }
  839.         
  840.         /* Responsive pour les toasts */
  841.         @media (max-width: 576px) {
  842.             .toast-container-custom {
  843.                 top: 15px;
  844.                 right: 10px;
  845.                 left: 10px;
  846.                 max-width: 100%;
  847.                 gap: 0.75rem;
  848.             }
  849.             
  850.             .toast-notification {
  851.                 padding: 0.9rem;
  852.                 border-radius: 12px;
  853.             }
  854.             
  855.             .toast-icon {
  856.                 width: 32px;
  857.                 height: 32px;
  858.                 font-size: 1rem;
  859.             }
  860.             
  861.             .toast-title {
  862.                 font-size: 0.8rem;
  863.             }
  864.             
  865.             .toast-message {
  866.                 font-size: 0.75rem;
  867.             }
  868.             
  869.             .toast-amount {
  870.                 font-size: 0.9rem;
  871.                 margin-top: 0.4rem;
  872.             }
  873.             
  874.             .toast-close {
  875.                 top: 8px;
  876.                 right: 8px;
  877.                 font-size: 1rem;
  878.             }
  879.         }
  880.         
  881.         /* Back to Top */
  882.         .back-to-top {
  883.             position: fixed;
  884.             bottom: 30px;
  885.             right: 30px;
  886.             width: 50px;
  887.             height: 50px;
  888.             background: linear-gradient(135deg, var(--primary), var(--secondary));
  889.             border-radius: 50%;
  890.             display: flex;
  891.             align-items: center;
  892.             justify-content: center;
  893.             color: white;
  894.             text-decoration: none;
  895.             box-shadow: 0 5px 20px rgba(0, 212, 255, 0.4);
  896.             transition: all 0.3s;
  897.             z-index: 1000;
  898.             opacity: 0;
  899.             pointer-events: none;
  900.         }
  901.         
  902.         .back-to-top.visible {
  903.             opacity: 1;
  904.             pointer-events: all;
  905.         }
  906.         
  907.         .back-to-top:hover {
  908.             transform: translateY(-5px);
  909.             box-shadow: 0 10px 30px rgba(0, 212, 255, 0.6);
  910.         }
  911.     </style>
  912. </head>
  913. <body>
  914.     <div class="animated-bg"></div>
  915.     
  916.     <!-- Navbar -->
  917.     <nav class="navbar navbar-expand-lg navbar-modern" id="navbar">
  918.         <div class="container">
  919.             <a class="navbar-brand" href="{{ path('app_acceuil') }}">
  920.                 <img src="{{ asset('logo.png') }}" alt="AVA-Service">
  921.             </a>
  922.             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" style="border: 1px solid var(--primary);">
  923.                 <span class="navbar-toggler-icon" style="filter: invert(1);"></span>
  924.             </button>
  925.             <div class="collapse navbar-collapse" id="navbarNav">
  926.                 <ul class="navbar-nav ms-auto align-items-center">
  927.                     <li class="nav-item"><a class="nav-link nav-link-custom" href="{{ path('app_acceuil') }}">Accueil</a></li>
  928.                     <li class="nav-item"><a class="nav-link nav-link-custom" href="#Apropos">À propos</a></li>
  929.                     <li class="nav-item"><a class="nav-link nav-link-custom" href="#Activites">Activités</a></li>
  930.                     <li class="nav-item"><a class="nav-link nav-link-custom" href="#promotion">Promotions</a></li>
  931.                     <li class="nav-item"><a class="nav-link nav-link-custom" href="#AvisClients">Avis Clients</a></li>
  932.                     <li class="nav-item"><a class="nav-link nav-link-custom" href="#Niveaux">Niveaux</a></li>
  933.                     <li class="nav-item ms-3">
  934.                         <a href="{{ path('app_login') }}" class="btn btn-outline-light btn-sm rounded-pill px-3">Connexion</a>
  935.                     </li>
  936.                     <li class="nav-item ms-2">
  937.                         <a href="{{ path('app_register') }}" class="btn btn-neon btn-sm">Inscription</a>
  938.                     </li>
  939.                 </ul>
  940.             </div>
  941.         </div>
  942.     </nav>
  944.     <!-- Contact Bar -->
  945.     <div class="contact-bar">
  946.         <div class="container">
  947.             <div class="row align-items-center">
  948.                 <div class="col-md-8">
  949.                     <p class="mb-0 text-light">
  950.                         <i class="fas fa-shield-alt text-primary me-2"></i>
  951.                         Transparence et sécurité : Nous accordons une grande importance à la transparence et à la sécurité de vos investissements.
  952.                     </p>
  953.                 </div>
  954.                 <div class="col-md-4 text-md-end text-center mt-3 mt-md-0">
  955.                     {% if paramettre|length > 0 %}
  956.                         <a href="{{ paramettre[0].type }}" class="social-link" target="_blank">
  957.                             <i class="fab fa-whatsapp"></i>
  958.                         </a>
  959.                         {% if paramettre|length > 1 %}
  960.                             <a href="{{ paramettre[1].type }}" class="social-link" target="_blank">
  961.                                 <i class="fab fa-telegram"></i>
  962.                             </a>
  963.                         {% endif %}
  964.                         {% if paramettre|length > 2 %}
  965.                             <a href="tel:{{ paramettre[2].type }}" class="social-link">
  966.                                 <i class="fas fa-phone"></i>
  967.                             </a>
  968.                             <span class="text-light ms-2">{{ paramettre[2].type }}</span>
  969.                         {% endif %}
  970.                     {% endif %}
  971.                 </div>
  972.             </div>
  973.         </div>
  974.     </div>
  976.     <!-- Hero Section -->
  977.     <section class="hero-modern">
  978.         <div class="container">
  979.             <div class="row align-items-center">
  980.                 <div class="col-lg-6 fade-in">
  981.                     <h1 class="hero-title">UNE IDÉE RÉVOLUTIONNAIRE</h1>
  982.                     <p class="hero-subtitle">
  983.                         Changez votre vie avec notre plateforme d'investissement crypto. 
  984.                         Rejoignez des milliers d'investisseurs qui génèrent des profits quotidiens.
  985.                     </p>
  986.                     <div class="d-flex gap-3 flex-wrap">
  987.                         <a href="{{ path('app_register') }}" class="btn btn-neon">
  988.                             <i class="fas fa-rocket me-2"></i>Commencer maintenant
  989.                         </a>
  990.                         <a href="#promotion" class="btn btn-outline-light rounded-pill px-4">
  991.                             Voir les offres
  992.                         </a>
  993.                     </div>
  994.                     <div class="row g-4 mt-5">
  995.                         <div class="col-4">
  996.                             <div class="text-center">
  997.                                 <h3 class="gradient-text mb-0">2.1K+</h3>
  998.                                 <p class="text-light small mb-0">Actifs</p>
  999.                             </div>
  1000.                         </div>
  1001.                         <div class="col-4">
  1002.                             <div class="text-center">
  1003.                                 <h3 class="gradient-text mb-0">100$</h3>
  1004.                                 <p class="text-light small mb-0">Minimum</p>
  1005.                             </div>
  1006.                         </div>
  1007.                         <div class="col-4">
  1008.                             <div class="text-center">
  1009.                                 <h3 class="gradient-text mb-0">0%</h3>
  1010.                                 <p class="text-light small mb-0">Commission</p>
  1011.                             </div>
  1012.                         </div>
  1013.                     </div>
  1014.                 </div>
  1015.                 <div class="col-lg-6 text-center fade-in">
  1016.                     <img src="{{ asset('img1.webp') }}" alt="Crypto Trading" class="img-fluid rounded-4" style="max-height: 500px; box-shadow: 0 30px 60px rgba(0, 212, 255, 0.2);">
  1017.                 </div>
  1018.             </div>
  1019.         </div>
  1020.     </section>
  1022.     <!-- Features Section -->
  1023.     <section class="py-5">
  1024.         <div class="container">
  1025.             <div class="row g-4">
  1026.                 <div class="col-md-6 col-lg-3">
  1027.                     <div class="stat-card">
  1028.                         <div class="stat-icon">
  1029.                             <i class="fas fa-chart-line"></i>
  1030.                         </div>
  1031.                         <h5 class="text-white mb-2">Outils d'analyse</h5>
  1032.                         <p class="text-light mb-0 small">Gratuits et professionnels</p>
  1033.                     </div>
  1034.                 </div>
  1035.                 <div class="col-md-6 col-lg-3">
  1036.                     <div class="stat-card">
  1037.                         <div class="stat-icon">
  1038.                             <i class="fas fa-bolt"></i>
  1039.                         </div>
  1040.                         <h5 class="text-white mb-2">Exécution rapide</h5>
  1041.                         <p class="text-light mb-0 small">0 commission</p>
  1042.                     </div>
  1043.                 </div>
  1044.                 <div class="col-md-6 col-lg-3">
  1045.                     <div class="stat-card">
  1046.                         <div class="stat-icon">
  1047.                             <i class="fas fa-dollar-sign"></i>
  1048.                         </div>
  1049.                         <h5 class="text-white mb-2">Dépôt minimum</h5>
  1050.                         <p class="text-light mb-0 small">Seulement 100$</p>
  1051.                     </div>
  1052.                 </div>
  1053.                 <div class="col-md-6 col-lg-3">
  1054.                     <div class="stat-card">
  1055.                         <div class="stat-icon">
  1056.                             <i class="fas fa-coins"></i>
  1057.                         </div>
  1058.                         <h5 class="text-white mb-2">2100+ actifs</h5>
  1059.                         <p class="text-light mb-0 small">Crypto & Forex</p>
  1060.                     </div>
  1061.                 </div>
  1062.             </div>
  1063.         </div>
  1064.     </section>
  1066.     <!-- About Section -->
  1067.     <section class="py-5" id="Apropos">
  1068.         <div class="container">
  1069.             <div class="row align-items-center">
  1070.                 <div class="col-lg-6 mb-5 mb-lg-0">
  1071.                     <h2 class="section-title-modern text-start">
  1072.                         C'est Quoi <span class="gradient-text">AVA-Service ?</span>
  1073.                     </h2>
  1074.                     <p class="text-light lead mb-4">
  1075.                         Fxpro est une plateforme révolutionnaire ayant pour objectif de regrouper des personnes dans des business rentables et pouvant en dégager des profits.
  1076.                     </p>
  1077.                     <p class="text-light mb-4">
  1078.                         Les créateurs de cette plateforme ont eu l'idée de regrouper les personnes dans des niveaux appelés "Level" en fonction de leur contribution. Dans chaque niveau, toute personne membre obtient des bonus générés par les activités.
  1079.                     </p>
  1080.                     <div class="row g-3">
  1081.                         <div class="col-md-4">
  1082.                             <div class="about-card text-center">
  1083.                                 <i class="fas fa-server fa-3x gradient-text mb-3"></i>
  1084.                                 <h6 class="text-white">Minage Crypto</h6>
  1085.                             </div>
  1086.                         </div>
  1087.                         <div class="col-md-4">
  1088.                             <div class="about-card text-center">
  1089.                                 <i class="fas fa-chart-candlestick fa-3x gradient-text mb-3"></i>
  1090.                                 <h6 class="text-white">Trading Crypto</h6>
  1091.                             </div>
  1092.                         </div>
  1093.                         <div class="col-md-4">
  1094.                             <div class="about-card text-center">
  1095.                                 <i class="fas fa-exchange-alt fa-3x gradient-text mb-3"></i>
  1096.                                 <h6 class="text-white">Échange Crypto</h6>
  1097.                             </div>
  1098.                         </div>
  1099.                     </div>
  1100.                 </div>
  1101.                 <div class="col-lg-6">
  1102.                     <div class="about-card">
  1103.                         <img src="{{ asset('img1.webp') }}" alt="About" class="img-fluid rounded-4 mb-3">
  1104.                         <p class="text-light mb-0">
  1105.                             <i class="fas fa-check-circle text-success me-2"></i>
  1106.                             Gagnez de l'argent en ligne grâce à notre plateforme.
  1107.                             <a href="{{ path('app_register') }}" class="badge bg-primary ms-2">S'inscrire</a>
  1108.                         </p>
  1109.                     </div>
  1110.                 </div>
  1111.             </div>
  1112.         </div>
  1113.     </section>
  1115.     <!-- Activities Section -->
  1116.     <section class="py-5 bg-dark" id="Activites" style="background: var(--dark-card);">
  1117.         <div class="container">
  1118.             <h2 class="section-title-modern mb-5">Nos <span class="gradient-text">Activités</span></h2>
  1119.             <div class="row g-4">
  1120.                 <div class="col-md-4">
  1121.                     <div class="about-card h-100">
  1122.                         <div class="stat-icon mb-3">
  1123.                             <i class="fas fa-server"></i>
  1124.                         </div>
  1125.                         <h4 class="text-white mb-3">Minage Crypto Monnaie</h4>
  1126.                         <p class="text-light">
  1127.                             Le minage est l'activité qui consiste, à l'aide de matériel informatique, à enregistrer des transactions sur une blockchain en les rendant immuables. Nous utilisons des machines ASICs spécialisées et des énergies renouvelables pour maximiser les rendements.
  1128.                         </p>
  1129.                     </div>
  1130.                 </div>
  1131.                 <div class="col-md-4">
  1132.                     <div class="about-card h-100">
  1133.                         <div class="stat-icon mb-3">
  1134.                             <i class="fas fa-chart-area"></i>
  1135.                         </div>
  1136.                         <h4 class="text-white mb-3">Trading</h4>
  1137.                         <p class="text-light">
  1138.                             Le trading consiste à vendre et acheter des titres sur les marchés boursiers. Fxpro travaille avec plusieurs traders expérimentés en ligne qui travaillent sans relâche jour et nuit pour générer des profits maximaux.
  1139.                         </p>
  1140.                     </div>
  1141.                 </div>
  1142.                 <div class="col-md-4">
  1143.                     <div class="about-card h-100">
  1144.                         <div class="stat-icon mb-3">
  1145.                             <i class="fas fa-exchange-alt"></i>
  1146.                         </div>
  1147.                         <h4 class="text-white mb-3">Échange</h4>
  1148.                         <p class="text-light">
  1149.                             Cette activité consiste à acheter des Crypto monnaie à bas prix et de le revendre avec un pourcentage de gain. Nous opérons dans des pays où l'utilisation de ces monnaies n'est pas encore accessible.
  1150.                         </p>
  1151.                     </div>
  1152.                 </div>
  1153.             </div>
  1154.         </div>
  1155.     </section>
  1157.     <!-- Promotions Section -->
  1158.     <section class="py-5" id="promotion">
  1159.         <div class="container">
  1160.             <h2 class="section-title-modern">Promotions</h2>
  1161.             <p class="section-subtitle">
  1162.                 Offre Spéciale : Maximisez vos Investissements avec nos Packs !
  1163.             </p>
  1164.             <p class="text-center text-light mb-5">
  1165.                 Cher investisseur, vous cherchez à réaliser des investissements rentables et sécurisés ? 
  1166.                 Ne cherchez pas plus loin ! Nos Packs sont conçus spécialement pour vous offrir une opportunité exceptionnelle.
  1167.             </p>
  1168.             
  1169.             <div class="row g-4 justify-content-center">
  1170.                 {% for item in promotion %}
  1171.                 <div class="col-md-6 col-lg-4">
  1172.                     <div class="pack-card-modern">
  1173.                         <span class="promo-badge">PROMOTION</span>
  1174.                         <div class="pack-header-modern">
  1175.                             <div class="pack-price-modern">{{ item.montantPack }}$</div>
  1176.                             <p class="text-light mb-0">Pack d'investissement</p>
  1177.                         </div>
  1178.                         <div class="pack-body-modern text-center">
  1179.                             <div class="gain-badge">
  1180.                                 Gain: {{ item.gainPack }}$
  1181.                             </div>
  1182.                             <p class="text-light mb-4">
  1183.                                 ✨ Pour ce pack, vous avez 100% de bénéfices garantis !
  1184.                             </p>
  1185.                             <a href="{{ path('app_dashboard') }}" class="btn btn-invest-modern">
  1186.                                 Investir maintenant
  1187.                             </a>
  1188.                         </div>
  1189.                     </div>
  1190.                 </div>
  1191.                 {% endfor %}
  1192.             </div>
  1193.             
  1194.             <div class="row mt-5">
  1195.                 <div class="col-lg-8 mx-auto">
  1196.                     <div class="about-card text-center">
  1197.                         <span class="badge bg-primary mb-3">Commencer maintenant</span>
  1198.                         <p class="text-light mb-4">Le client doit être conscient du fait que l'entreprise a été critiquée pour son adipiscing.</p>
  1199.                         <a href="{{ path('app_register') }}" class="btn btn-neon">Adhérer maintenant!</a>
  1200.                     </div>
  1201.                     <div class="row g-4 mt-3">
  1202.                         <div class="col-md-4 text-center">
  1203.                             <i class="fas fa-headset fa-2x gradient-text mb-3"></i>
  1204.                             <p class="text-light small mb-0 fw-bold text-uppercase">Assistance Primée</p>
  1205.                         </div>
  1206.                         <div class="col-md-4 text-center">
  1207.                             <i class="fas fa-university fa-2x gradient-text mb-3"></i>
  1208.                             <p class="text-light small mb-0 fw-bold text-uppercase">Regulated by the FCA,UK</p>
  1209.                         </div>
  1210.                         <div class="col-md-4 text-center">
  1211.                             <i class="fas fa-history fa-2x gradient-text mb-3"></i>
  1212.                             <p class="text-light small mb-0 fw-bold text-uppercase">30 Ans D'expérience</p>
  1213.                         </div>
  1214.                     </div>
  1215.                 </div>
  1216.             </div>
  1217.         </div>
  1218.     </section>
  1220.    
  1222.     <!-- Levels Section - Nouveau design en onglets -->
  1223.     <section class="py-5" id="Niveaux" style="background: linear-gradient(135deg, rgba(0, 212, 255, 0.03), rgba(123, 97, 255, 0.03));">
  1224.         <div class="container">
  1225.             <div class="text-center mb-5">
  1226.                 <h2 class="section-title-modern">Nos <span class="gradient-text">Niveaux</span> d'investissements</h2>
  1227.                 <p class="section-subtitle">Choisissez le niveau qui correspond à vos objectifs</p>
  1228.             </div>
  1229.             
  1230.             <div class="levels-tabs-container">
  1231.                 <!-- Navigation des onglets -->
  1232.                 <div class="levels-tab-nav">
  1233.                     <button class="levels-tab-button active" onclick="switchLevel('classic')" id="tab-classic">
  1234.                         <i class="fas fa-star me-2"></i>Classic ELEVEL
  1235.                     </button>
  1236.                     <button class="levels-tab-button" onclick="switchLevel('platinum')" id="tab-platinum">
  1237.                         <i class="fas fa-crown me-2"></i>Platinum ELEVEL
  1238.                     </button>
  1239.                 </div>
  1240.                 
  1241.                 <!-- Contenu Classic -->
  1242.                 <div class="levels-tab-content active" id="content-classic">
  1243.                     <div class="level-card-new">
  1244.                         <div class="level-header-new">
  1245.                             <span class="level-badge-new">Investissement Minimum USD 200</span>
  1246.                             <h2 class="level-title-new">Classic ELEVEL</h2>
  1247.                             <p class="level-benefit-new">Bénéficier des <strong class="gradient-text">100%</strong> de votre investissement</p>
  1248.                         </div>
  1249.                         
  1250.                         <ul class="level-packs-list">
  1251.                             {% for item in pack1 %}
  1252.                                 <li>
  1253.                                     <i class="fas fa-check-circle"></i>
  1254.                                     <span class="text-white">
  1255.                                         <strong>Pack de {{ item.montantPack }}$</strong> 
  1256.                                         <span class="text-success ms-2">→ Gain de {{ item.gainPack }}$</span>
  1257.                                     </span>
  1258.                                 </li>
  1259.                             {% endfor %}
  1260.                         </ul>
  1261.                         
  1262.                         <a href="{{ path('app_register') }}" class="level-cta-button outline">
  1263.                             Ouvrir un compte <i class="fas fa-arrow-right ms-2"></i>
  1264.                         </a>
  1265.                     </div>
  1266.                 </div>
  1267.                 
  1268.                 <!-- Contenu Platinum -->
  1269.                 <div class="levels-tab-content" id="content-platinum">
  1270.                     <div class="level-card-new featured">
  1271.                         <div class="level-header-new">
  1272.                             <span class="level-badge-new" style="background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(123, 97, 255, 0.3)); border-color: var(--primary);">Investissement Minimum USD 500</span>
  1273.                             <h2 class="level-title-new">Platinum ELEVEL</h2>
  1274.                             <p class="level-benefit-new">Bénéficier des <strong class="gradient-text">130%</strong> de votre investissement</p>
  1275.                         </div>
  1276.                         
  1277.                         <ul class="level-packs-list">
  1278.                             {% for item in pack2 %}
  1279.                                 <li>
  1280.                                     <i class="fas fa-check-circle"></i>
  1281.                                     <span class="text-white">
  1282.                                         <strong>Pack de {{ item.montantPack }}$</strong> 
  1283.                                         <span class="text-success ms-2">→ Gain de {{ item.gainPack }}$</span>
  1284.                                     </span>
  1285.                                 </li>
  1286.                             {% endfor %}
  1287.                         </ul>
  1288.                         
  1289.                         <a href="{{ path('app_register') }}" class="level-cta-button">
  1290.                             Ouvrir un compte <i class="fas fa-arrow-right ms-2"></i>
  1291.                         </a>
  1292.                     </div>
  1293.                 </div>
  1294.             </div>
  1295.         </div>
  1296.     </section>
  1297.     
  1298.     <script>
  1299.         function switchLevel(level) {
  1300.             // Désactiver tous les onglets
  1301.             document.querySelectorAll('.levels-tab-button').forEach(btn => {
  1302.                 btn.classList.remove('active');
  1303.             });
  1304.             document.querySelectorAll('.levels-tab-content').forEach(content => {
  1305.                 content.classList.remove('active');
  1306.             });
  1307.             
  1308.             // Activer l'onglet sélectionné
  1309.             document.getElementById('tab-' + level).classList.add('active');
  1310.             document.getElementById('content-' + level).classList.add('active');
  1311.         }
  1312.     </script>
  1314.      <!-- Testimonials Section -->
  1315.     <section class="py-4" id="AvisClients" style="background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(123, 97, 255, 0.05));">
  1316.         <div class="container">
  1317.             <div class="text-center mb-4">
  1318.                 <h2 class="section-title-modern">Avis de nos <span class="gradient-text">Clients</span></h2>
  1319.                 <p class="section-subtitle">Découvrez ce que nos investisseurs disent de notre plateforme</p>
  1320.             </div>
  1321.             
  1322.             <div class="row g-3">
  1323.                 <div class="col-md-6 col-lg-4">
  1324.                     <div class="about-card h-100">
  1325.                         <div class="d-flex align-items-center mb-2">
  1326.                             <div class="stat-icon me-2" style="width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary), var(--secondary));">
  1327.                                 <i class="fas fa-user"></i>
  1328.                             </div>
  1329.                             <div>
  1330.                                 <h5 class="text-white mb-0" style="font-size: 0.95rem;">Jean Dupont</h5>
  1331.                                 <p class="text-light small mb-0" style="font-size: 0.75rem;">Investisseur depuis 2023</p>
  1332.                             </div>
  1333.                         </div>
  1334.                         <div class="mb-2">
  1335.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1336.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1337.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1338.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1339.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1340.                         </div>
  1341.                         <p class="text-light mb-0" style="font-size: 0.875rem; line-height: 1.5;">
  1342.                             "Plateforme exceptionnelle ! Les rendements sont réguliers et le service client réactif. J'ai pu doubler mon investissement initial en seulement 3 mois."
  1343.                         </p>
  1344.                     </div>
  1345.                 </div>
  1346.                 
  1347.                 <div class="col-md-6 col-lg-4">
  1348.                     <div class="about-card h-100">
  1349.                         <div class="d-flex align-items-center mb-2">
  1350.                             <div class="stat-icon me-2" style="width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary), var(--secondary));">
  1351.                                 <i class="fas fa-user"></i>
  1352.                             </div>
  1353.                             <div>
  1354.                                 <h5 class="text-white mb-0" style="font-size: 0.95rem;">Marie Martin</h5>
  1355.                                 <p class="text-light small mb-0" style="font-size: 0.75rem;">Investisseur Premium</p>
  1356.                             </div>
  1357.                         </div>
  1358.                         <div class="mb-2">
  1359.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1360.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1361.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1362.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1363.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1364.                         </div>
  1365.                         <p class="text-light mb-0" style="font-size: 0.875rem; line-height: 1.5;">
  1366.                             "Je suis impressionnée par la transparence et la sécurité de la plateforme. Les packs d'investissement sont clairs et les gains arrivent comme prévu. Je recommande à 100% !"
  1367.                         </p>
  1368.                     </div>
  1369.                 </div>
  1370.                 
  1371.                 <div class="col-md-6 col-lg-4">
  1372.                     <div class="about-card h-100">
  1373.                         <div class="d-flex align-items-center mb-2">
  1374.                             <div class="stat-icon me-2" style="width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary), var(--secondary));">
  1375.                                 <i class="fas fa-user"></i>
  1376.                             </div>
  1377.                             <div>
  1378.                                 <h5 class="text-white mb-0" style="font-size: 0.95rem;">Pierre Dubois</h5>
  1379.                                 <p class="text-light small mb-0" style="font-size: 0.75rem;">Trader Expert</p>
  1380.                             </div>
  1381.                         </div>
  1382.                         <div class="mb-2">
  1383.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1384.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1385.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1386.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1387.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1388.                         </div>
  1389.                         <p class="text-light mb-0" style="font-size: 0.875rem; line-height: 1.5;">
  1390.                             "En tant que trader professionnel, j'apprécie la qualité des outils d'analyse et l'exécution rapide des ordres. Une plateforme sérieuse qui tient ses engagements."
  1391.                         </p>
  1392.                     </div>
  1393.                 </div>
  1394.                 
  1395.                 <div class="col-md-6 col-lg-4">
  1396.                     <div class="about-card h-100">
  1397.                         <div class="d-flex align-items-center mb-2">
  1398.                             <div class="stat-icon me-2" style="width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary), var(--secondary));">
  1399.                                 <i class="fas fa-user"></i>
  1400.                             </div>
  1401.                             <div>
  1402.                                 <h5 class="text-white mb-0" style="font-size: 0.95rem;">Sophie Bernard</h5>
  1403.                                 <p class="text-light small mb-0" style="font-size: 0.75rem;">Investisseur Actif</p>
  1404.                             </div>
  1405.                         </div>
  1406.                         <div class="mb-2">
  1407.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1408.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1409.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1410.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1411.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1412.                         </div>
  1413.                         <p class="text-light mb-0" style="font-size: 0.875rem; line-height: 1.5;">
  1414.                             "J'ai testé plusieurs plateformes, AVA-Service est de loin la meilleure. L'interface est intuitive, les packs sont rentables et le support est disponible 24/7."
  1415.                         </p>
  1416.                     </div>
  1417.                 </div>
  1418.                 
  1419.                 <div class="col-md-6 col-lg-4">
  1420.                     <div class="about-card h-100">
  1421.                         <div class="d-flex align-items-center mb-2">
  1422.                             <div class="stat-icon me-2" style="width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary), var(--secondary));">
  1423.                                 <i class="fas fa-user"></i>
  1424.                             </div>
  1425.                             <div>
  1426.                                 <h5 class="text-white mb-0" style="font-size: 0.95rem;">Thomas Leroy</h5>
  1427.                                 <p class="text-light small mb-0" style="font-size: 0.75rem;">Nouvel Investisseur</p>
  1428.                             </div>
  1429.                         </div>
  1430.                         <div class="mb-2">
  1431.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1432.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1433.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1434.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1435.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1436.                         </div>
  1437.                         <p class="text-light mb-0" style="font-size: 0.875rem; line-height: 1.5;">
  1438.                             "Débutant en crypto, j'ai été accompagné pas à pas. La plateforme est simple à utiliser et les gains arrivent rapidement. Parfait pour commencer !"
  1439.                         </p>
  1440.                     </div>
  1441.                 </div>
  1442.                 
  1443.                 <div class="col-md-6 col-lg-4">
  1444.                     <div class="about-card h-100">
  1445.                         <div class="d-flex align-items-center mb-2">
  1446.                             <div class="stat-icon me-2" style="width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary), var(--secondary));">
  1447.                                 <i class="fas fa-user"></i>
  1448.                             </div>
  1449.                             <div>
  1450.                                 <h5 class="text-white mb-0" style="font-size: 0.95rem;">Claire Moreau</h5>
  1451.                                 <p class="text-light small mb-0" style="font-size: 0.75rem;">Investisseur Platinum</p>
  1452.                             </div>
  1453.                         </div>
  1454.                         <div class="mb-2">
  1455.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1456.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1457.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1458.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1459.                             <i class="fas fa-star text-warning" style="font-size: 0.85rem;"></i>
  1460.                         </div>
  1461.                         <p class="text-light mb-0" style="font-size: 0.875rem; line-height: 1.5;">
  1462.                             "Plateforme révolutionnaire ! Les rendements sont au-delà de mes attentes. J'ai déjà réinvesti mes gains dans plusieurs packs. Merci AVA-Service !"
  1463.                         </p>
  1464.                     </div>
  1465.                 </div>
  1466.             </div>
  1467.             
  1468.             <div class="text-center mt-4">
  1469.                 <div class="row g-3 justify-content-center">
  1470.                     <div class="col-auto">
  1471.                         <div class="about-card text-center px-4 py-3">
  1472.                             <h3 class="gradient-text mb-0" style="font-size: 1.5rem;">4.9/5</h3>
  1473.                             <p class="text-light small mb-0" style="font-size: 0.875rem;">Note moyenne</p>
  1474.                         </div>
  1475.                     </div>
  1476.                     <div class="col-auto">
  1477.                         <div class="about-card text-center px-4 py-3">
  1478.                             <h3 class="gradient-text mb-0" style="font-size: 1.5rem;">12K+</h3>
  1479.                             <p class="text-light small mb-0" style="font-size: 0.875rem;">Clients satisfaits</p>
  1480.                         </div>
  1481.                     </div>
  1482.                     <div class="col-auto">
  1483.                         <div class="about-card text-center px-4 py-3">
  1484.                             <h3 class="gradient-text mb-0" style="font-size: 1.5rem;">98%</h3>
  1485.                             <p class="text-light small mb-0" style="font-size: 0.875rem;">Satisfaction</p>
  1486.                         </div>
  1487.                     </div>
  1488.                 </div>
  1489.             </div>
  1490.         </div>
  1491.     </section>
  1493.     <!-- Footer -->
  1494.     <footer class="footer-modern">
  1495.         <div class="container">
  1496.             <div class="row align-items-center">
  1497.                 <div class="col-md-6">
  1498.                     <h5 class="text-white mb-3">AVA-Service</h5>
  1499.                     <p class="text-light mb-0">Plateforme d'investissement crypto moderne et sécurisée</p>
  1500.                 </div>
  1501.                 <div class="col-md-6 text-md-end text-center mt-3 mt-md-0">
  1502.                     <p class="text-light mb-0">&copy; {{ "now"|date("Y") }} AVA-Service. Tous droits réservés.</p>
  1503.                 </div>
  1504.             </div>
  1505.         </div>
  1506.     </footer>
  1508.     <!-- Toast Notifications Container -->
  1509.     <div class="toast-container-custom" id="toastContainer"></div>
  1511.     <!-- Back to Top -->
  1512.     <a href="#" class="back-to-top" id="backToTop">
  1513.         <i class="fas fa-arrow-up"></i>
  1514.     </a>
  1516.     <!-- Bootstrap JS -->
  1517.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  1518.     
  1519.     <script>
  1520.         // Navbar scroll effect
  1521.         window.addEventListener('scroll', function() {
  1522.             const navbar = document.getElementById('navbar');
  1523.             const backToTop = document.getElementById('backToTop');
  1524.             
  1525.             if (window.scrollY > 50) {
  1526.                 navbar.classList.add('scrolled');
  1527.                 backToTop.classList.add('visible');
  1528.             } else {
  1529.                 navbar.classList.remove('scrolled');
  1530.                 backToTop.classList.remove('visible');
  1531.             }
  1532.         });
  1533.         
  1534.         // Fade in animation on scroll
  1535.         const observerOptions = {
  1536.             threshold: 0.1,
  1537.             rootMargin: '0px 0px -50px 0px'
  1538.         };
  1539.         
  1540.         const observer = new IntersectionObserver(function(entries) {
  1541.             entries.forEach(entry => {
  1542.                 if (entry.isIntersecting) {
  1543.                     entry.target.classList.add('visible');
  1544.                 }
  1545.             });
  1546.         }, observerOptions);
  1547.         
  1548.         document.querySelectorAll('.fade-in').forEach(el => {
  1549.             observer.observe(el);
  1550.         });
  1551.         
  1552.         // Smooth scroll
  1553.         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  1554.             anchor.addEventListener('click', function (e) {
  1555.                 e.preventDefault();
  1556.                 const target = document.querySelector(this.getAttribute('href'));
  1557.                 if (target) {
  1558.                     target.scrollIntoView({ behavior: 'smooth', block: 'start' });
  1559.                 }
  1560.             });
  1561.         });
  1562.         
  1563.         // Back to top
  1564.         document.getElementById('backToTop').addEventListener('click', function(e) {
  1565.             e.preventDefault();
  1566.             window.scrollTo({ top: 0, behavior: 'smooth' });
  1567.         });
  1568.         
  1569.         // Système de notifications toast pour les retraits
  1570.         class WithdrawalNotificationSystem {
  1571.             constructor() {
  1572.                 this.container = document.getElementById('toastContainer');
  1573.                 this.clientList = this.generateClientList(300);
  1574.                 this.displayedClients = this.loadDisplayedClients();
  1575.                 this.notificationInterval = null;
  1576.                 this.currentInterval = 5000; // 5 secondes par défaut
  1577.                 this.clientCount = 0;
  1578.                 this.phase = 'default'; // 'default', 'fast', 'slow', 'paused'
  1579.                 this.pauseTimeout = null;
  1580.                 this.isPaused = false;
  1581.                 
  1582.                 this.start();
  1583.             }
  1584.             
  1585.             generateClientList(count) {
  1586.                 const firstNames = ['Jean', 'Marie', 'Pierre', 'Sophie', 'Thomas', 'Claire', 'Marc', 'Julie', 'David', 'Sarah', 'Nicolas', 'Emma', 'Laurent', 'Camille', 'Antoine', 'Laura', 'Julien', 'Marine', 'Paul', 'Amélie', 'Maxime', 'Céline', 'Alexandre', 'Élodie', 'Vincent', 'Charlotte', 'Romain', 'Audrey', 'Cédric', 'Mathilde', 'Fabien', 'Pauline', 'Guillaume', 'Justine', 'Baptiste', 'Clémence', 'Quentin', 'Léa', 'Hugo', 'Manon', 'Louis', 'Léonie', 'Rémi', 'Émilie', 'Anthony', 'Margot', 'Matthieu', 'Lucie', 'Florian', 'Morgane', 'Benjamin', 'Chloé', 'Thibaut', 'Anaïs', 'Jérémy', 'Océane', 'Adrien', 'Éva', 'Sébastien', 'Lisa', 'Christophe', 'Inès', 'Stéphane', 'Léna', 'Olivier', 'Zoé', 'Bruno', 'Julia', 'Damien', 'Élise', 'François', 'Lola', 'Grégoire', 'Aurélie', 'Yann', 'Stéphanie', 'Éric', 'Caroline', 'Sylvain', 'Bérénice', 'Mickaël', 'Valérie', 'Arnaud', 'Coralie', 'Ludovic', 'Fanny', 'Grégory', 'Émilienne', 'Renaud', 'Daphné', 'Valentin', 'Éléonore', 'Kévin', 'Ophélie', 'Cyril', 'Noémie', 'Raphaël', 'Éloïse'];
  1587.                 const lastNames = ['Dupont', 'Martin', 'Bernard', 'Dubois', 'Thomas', 'Richard', 'Petit', 'Robert', 'Durand', 'Leroy', 'Moreau', 'Simon', 'Laurent', 'Lefebvre', 'Michel', 'Garcia', 'David', 'Bertrand', 'Roux', 'Vincent', 'Fournier', 'Morel', 'Girard', 'André', 'Lefevre', 'Mercier', 'Dupuis', 'Lambert', 'Bonnet', 'François', 'Martinez', 'Legrand', 'Garnier', 'Faure', 'Rousseau', 'Blanc', 'Guerin', 'Muller', 'Henry', 'Roussel', 'Nicolas', 'Perrin', 'Morin', 'Mathieu', 'Clement', 'Gauthier', 'Dumont', 'Lopez', 'Fontaine', 'Chevalier', 'Robin', 'Masson', 'Sanchez', 'Gerard', 'Nguyen', 'Boyer', 'Denis', 'Lemaire', 'Dufour', 'Meyer', 'Perez', 'Gautier', 'Jean', 'Dufour', 'Lucas', 'Blanchard', 'Marie', 'Barbier', 'Brun', 'Dumas', 'Brunet', 'Schmitt', 'Leroux', 'Colin', 'Fernandez', 'Pierre', 'Renard', 'Arnaud', 'Rolland', 'Carpentier', 'Sanz', 'Meunier', 'Aubert', 'Gonzalez', 'Leclerc', 'Caron', 'Olivier', 'Rodriguez', 'Da silva', 'Hubert', 'Louis', 'Charles', 'Guillot', 'Riviere', 'Le gall', 'Guillaume', 'Adam', 'Rey', 'Moulin', 'Gonzales', 'Berger', 'Lecomte', 'Menard', 'Fleury', 'Fabre', 'Cousin', 'Alexandre', 'Marty'];
  1588.                 
  1589.                 const clients = [];
  1590.                 for (let i = 0; i < count; i++) {
  1591.                     const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
  1592.                     const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
  1593.                     const amount = (Math.random() * 5000 + 500).toFixed(2); // Entre 500$ et 5500$
  1594.                     clients.push({
  1595.                         id: i + 1,
  1596.                         name: `${firstName} ${lastName}`,
  1597.                         amount: parseFloat(amount),
  1598.                         country: ['🇫🇷', '🇧🇪', '🇨🇦', '🇨🇭', '🇱🇺', '🇲🇦', '🇹🇳', '🇩🇿', '🇸🇳'][Math.floor(Math.random() * 9)]
  1599.                     });
  1600.                 }
  1601.                 return clients;
  1602.             }
  1603.             
  1604.             loadDisplayedClients() {
  1605.                 const stored = localStorage.getItem('displayedWithdrawals');
  1606.                 return stored ? JSON.parse(stored) : [];
  1607.             }
  1608.             
  1609.             saveDisplayedClients() {
  1610.                 localStorage.setItem('displayedWithdrawals', JSON.stringify(this.displayedClients));
  1611.             }
  1612.             
  1613.             getRandomClient() {
  1614.                 // Filtrer les clients déjà affichés
  1615.                 const availableClients = this.clientList.filter(client => 
  1616.                     !this.displayedClients.includes(client.id)
  1617.                 );
  1618.                 
  1619.                 // Si tous les clients ont été affichés, réinitialiser
  1620.                 if (availableClients.length === 0) {
  1621.                     this.displayedClients = [];
  1622.                     return this.clientList[Math.floor(Math.random() * this.clientList.length)];
  1623.                 }
  1624.                 
  1625.                 const client = availableClients[Math.floor(Math.random() * availableClients.length)];
  1626.                 this.displayedClients.push(client.id);
  1627.                 
  1628.                 // Limiter à 300 clients dans l'historique
  1629.                 if (this.displayedClients.length > 300) {
  1630.                     this.displayedClients = this.displayedClients.slice(-300);
  1631.                 }
  1632.                 
  1633.                 this.saveDisplayedClients();
  1634.                 return client;
  1635.             }
  1636.             
  1637.             createToast(client) {
  1638.                 const toast = document.createElement('div');
  1639.                 toast.className = 'toast-notification';
  1640.                 
  1641.                 const randomAmount = (Math.random() * 5000 + 500).toFixed(2);
  1642.                 const amount = client.amount || randomAmount;
  1643.                 
  1644.                 toast.innerHTML = `
  1645.                     <button class="toast-close" onclick="this.parentElement.classList.add('hide'); setTimeout(() => this.parentElement.remove(), 500);">
  1646.                         <i class="fas fa-times"></i>
  1647.                     </button>
  1648.                     <div class="toast-header-custom">
  1649.                         <div class="toast-icon">
  1650.                             <i class="fas fa-coins"></i>
  1651.                         </div>
  1652.                         <div class="toast-content">
  1653.                             <div class="toast-title">
  1654.                                 <i class="fas fa-check-circle"></i>
  1655.                                 Retrait effectué
  1656.                             </div>
  1657.                             <div class="toast-message">
  1658.                                 ${client.country} <strong>${client.name}</strong> vient de retirer
  1659.                             </div>
  1660.                             <div class="toast-amount">
  1661.                                 <i class="fas fa-dollar-sign"></i>
  1662.                                 ${amount}$
  1663.                             </div>
  1664.                         </div>
  1665.                     </div>
  1666.                 `;
  1667.                 
  1668.                 this.container.appendChild(toast);
  1669.                 
  1670.                 // Auto-remove après 5 secondes
  1671.                 setTimeout(() => {
  1672.                     toast.classList.add('hide');
  1673.                     setTimeout(() => toast.remove(), 500);
  1674.                 }, 5000);
  1675.             }
  1676.             
  1677.             showNotification() {
  1678.                 if (this.isPaused) return;
  1679.                 
  1680.                 const client = this.getRandomClient();
  1681.                 this.createToast(client);
  1682.                 this.clientCount++;
  1683.                 
  1684.                 // Gérer les phases selon la logique demandée
  1685.                 if (this.phase === 'default' && this.clientCount >= 10) {
  1686.                     // Après 10 clients avec 5 secondes, passer à 10 secondes
  1687.                     this.phase = 'fast';
  1688.                     this.currentInterval = 10000; // 10 secondes
  1689.                     this.clientCount = 0;
  1690.                     this.updateInterval();
  1691.                 } else if (this.phase === 'fast' && this.clientCount >= 5) {
  1692.                     // Après 5 clients avec 10 secondes, passer à 30 secondes
  1693.                     this.phase = 'slow';
  1694.                     this.currentInterval = 30000; // 30 secondes
  1695.                     this.clientCount = 0;
  1696.                     this.updateInterval();
  1697.                 } else if (this.phase === 'slow' && this.clientCount >= 10) {
  1698.                     // Après plusieurs clients avec 30 secondes, pause
  1699.                     this.phase = 'paused';
  1700.                     this.isPaused = true;
  1701.                     this.clientCount = 0;
  1702.                     this.clearInterval();
  1703.                     
  1704.                     // Reprendre après 10 minutes avec la phase rapide
  1705.                     this.pauseTimeout = setTimeout(() => {
  1706.                         this.phase = 'fast';
  1707.                         this.isPaused = false;
  1708.                         this.currentInterval = 10000; // 10 secondes
  1709.                         this.clientCount = 0;
  1710.                         this.updateInterval();
  1711.                         this.showNotification(); // Afficher immédiatement une notification
  1712.                     }, 600000); // 10 minutes = 600000ms
  1713.                 }
  1714.             }
  1715.             
  1716.             updateInterval() {
  1717.                 this.clearInterval();
  1718.                 if (!this.isPaused) {
  1719.                     this.notificationInterval = setInterval(() => {
  1720.                         this.showNotification();
  1721.                     }, this.currentInterval);
  1722.                 }
  1723.             }
  1724.             
  1725.             clearInterval() {
  1726.                 if (this.notificationInterval) {
  1727.                     clearInterval(this.notificationInterval);
  1728.                     this.notificationInterval = null;
  1729.                 }
  1730.             }
  1731.             
  1732.             start() {
  1733.                 // Phase par défaut : 5 secondes pour 10 clients
  1734.                 this.phase = 'default';
  1735.                 this.currentInterval = 5000; // 5 secondes
  1736.                 this.clientCount = 0;
  1737.                 this.isPaused = false;
  1738.                 
  1739.                 // Afficher une notification après 2 secondes
  1740.                 setTimeout(() => this.showNotification(), 2000);
  1741.                 
  1742.                 // Puis continuer avec l'intervalle de 5 secondes
  1743.                 this.updateInterval();
  1744.             }
  1745.         }
  1746.         
  1747.         // Démarrer le système de notifications au chargement de la page
  1748.         document.addEventListener('DOMContentLoaded', function() {
  1749.             const notificationSystem = new WithdrawalNotificationSystem();
  1750.         });
  1751.     </script>
  1752. </body>
  1753. </html>