Update index.html

index.html

@@ -51,7 +51,7 @@
     }
 
     nav {
-      background: white !important;  
+      background: var(--primary) !important;  
       padding: 1rem;
       display: flex;
       justify-content: space-between;
@@ -64,7 +64,7 @@
     }
 
     nav h1 {
-      color: black !important;  
+      color: var(--dark) !important;  
       font-size: 2rem;
       font-weight: bold;
       text-shadow: none; 
@@ -317,6 +317,12 @@
       color: var(--light); 
     }
 
+    .stat-item i {
+      font-size: 2rem; 
+      color: var(--primary);
+      margin-bottom: 0.5rem; 
+    }
+
     .stat-number {
       font-size: 2.5rem;
       font-weight: bold;
@@ -393,7 +399,7 @@
 
     .menu-toggle {
       display: none;
-      background: black;
+      background: var(--dark);
       border: none;
       color: var(--primary);
       font-size: 1.5rem;
@@ -1724,6 +1730,223 @@
       padding-left: 1rem;
     }
 
+    #install-prompt {
+      display: none;
+      position: fixed;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: var(--dark);
+      padding: 1rem;
+      border-radius: 8px;
+      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
+      z-index: 1000;
+      border: 1px solid var(--primary);
+      color: var(--light); 
+    }
+    nav h1 {
+      font-size: 2rem;
+      font-weight: bold;
+      text-shadow: none; 
+      animation: none; 
+      white-space: nowrap;
+      overflow: visible;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      max-width: calc(100% - 100px); 
+    }
+
+    @media (max-width: 1024px) {
+      nav h1 {
+        font-size: 1.8rem;
+        max-width: calc(100% - 90px);
+        color: black;
+      }
+      .nav-buttons {
+        left: 0.9rem;
+        top: 0.9rem;
+      }
+    }
+
+    @media (max-width: 768px) {
+      nav h1 {
+        font-size: 1.6rem; 
+        max-width: calc(100% - 80px);
+        color: black;
+      }
+      .nav-buttons {
+        left: 0.8rem;
+        top: 0.8rem;
+      }
+    }
+
+    @media (max-width: 480px) {
+      nav h1 {
+        font-size: 1.4rem;
+        max-width: calc(100% - 70px);
+        color: black;
+      }
+      .nav-buttons {
+        left: 0.7rem;
+        top: 0.7rem;
+      }
+    }
+
+    .theme-toggle {
+      position: fixed;
+      bottom: 20px;
+      left: 20px;
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      background: rgba(255, 230, 0, 0.1);
+      border: 1px solid var(--primary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      z-index: 1001;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+      transition: all 0.3s ease;
+      padding: 0;
+    }
+
+    .theme-toggle:hover {
+      background: rgba(255, 230, 0, 0.2);
+      transform: scale(1.1);
+    }
+
+    .theme-toggle svg {
+      width: 24px;
+      height: 24px;
+    }
+
+    .btn-back {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      background: black;
+      border: 1px solid var(--primary);
+      color: var(--primary);
+      padding: 0.3rem 0.6rem;
+      border-radius: 3px;
+      cursor: pointer;
+      z-index: 1;
+      font-size: 0.8rem;
+      width: auto;
+      height: auto;
+      line-height: 1;
+      white-space: nowrap;
+      display: block; 
+    }
+
+    [data-theme="light"] .btn-back {
+      border-color: #808080;
+    }
+
+    @media (min-width: 769px) {
+      .btn-back {
+        display: none;
+      }
+    }
+    
+    .hidden {
+      display: none;
+    }
+    
+    [data-theme="light"] .moon-icon {
+      display: none;
+    }
+    
+    [data-theme="light"] .sun-icon {
+      display: block;
+    }
+    
+    [data-theme="light"] .moon-icon {
+      stroke: #FFE600;
+    }
+    
+    .mini-form {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      max-width: 100%;
+    }
+
+    .mini-form input,
+    .mini-form select {
+      width: 100%;
+      font-size: 0.85rem;
+      padding: 0.5rem;
+      border: 1px solid var(--primary);
+      border-radius: 4px;
+      background: var(--dark);
+      color: var(--light);
+    }
+
+    .btn-inscription,
+    .btn-submit,
+    .btn-more {
+      background: var(--primary);
+      color: var(--dark);
+      border: none;
+      padding: 0.5rem;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 0.85rem;
+      width: 100%;
+      margin-top: 0.5rem;
+    }
+
+    .btn-more {
+      background: linear-gradient(145deg, rgba(255,230,0,0.05), rgba(255,230,0,0.1));
+      border: 1px solid var(--primary);
+      color: var(--primary);
+      padding: 0.5rem 1rem;
+      border-radius: 4px;
+      cursor: pointer;
+      text-decoration: none;
+      transition: background 0.3s ease;
+      animation: none;
+      box-shadow: none;
+    }
+
+    .btn-more:hover {
+      background: linear-gradient(145deg, rgba(255,230,0,0.15), rgba(255,230,0,0.2));
+      transform: none;
+    }
+
+    .social-icons {
+      display: flex;
+      gap: 1rem;
+      margin-top: 0.5rem;
+    }
+
+    .social-icons a {
+      color: var(--primary);
+      font-size: 1.2rem;
+      text-decoration: none;
+    }
+
+    nav .menu-item:nth-child(5) .submenu-content {
+      max-width: min(300px, calc(100vw - 150px));
+      white-space: normal;
+      overflow-wrap: break-word;
+    }
+
+    nav .menu-item:nth-child(5) .submenu-content p {
+      margin: 0.5rem 0;
+      font-size: 0.8rem;
+      line-height: 1.3;
+    }
+
+    nav .menu-item:nth-child(5) .submenu-content ul {
+      padding-left: 1rem;
+    }
+
     #chatbot-button {
       position: fixed;
       bottom: 20px;
@@ -2646,17 +2869,13 @@
   </style>
   <style>
     @keyframes menuSplash {
-      0% {
-        box-shadow: 0 0 0 0 rgba(255, 230, 0, 0.4);
-        transform: scale(1);
+      0% {box-shadow: 0 0 0 0 rgba(255, 230, 0, 0.4);
       }
       50% {
         box-shadow: 0 0 10px 5px rgba(255, 230, 0, 0.2); 
-        transform: scale(1.02);
       }
       100% {
         box-shadow: 0 0 0 0 rgba(255, 230, 0, 0);
-        transform: scale(1);
       }
     }
 
@@ -2987,17 +3206,25 @@
     <h2 class="section-title">Pourquoi Nous Choisir</h2>
     <div class="stats">
       <div class="stat-item">
+        <i class="fas fa-users"></i>
         <div class="stat-number">7</div>
         <div class="stat-label">Experts Dévoués</div>
       </div>
       <div class="stat-item">
+        <i class="fas fa-thumbs-up"></i>
         <div class="stat-number">100%</div>
         <div class="stat-label">Satisfaction Client</div>
       </div>
       <div class="stat-item">
+        <i class="fas fa-clock"></i>
         <div class="stat-number">24/7</div>
         <div class="stat-label">Support Client</div>
       </div>
+      <div class="stat-item">
+        <i class="fas fa-file-alt"></i>
+        <div class="stat-number">XXX</div>
+        <div class="stat-label">Inscriptions au Site</div>
+      </div>
     </div>
   </section>