/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

   @media (max-width: 768px) {
    /* Header */
    .top-bar {
      flex-direction: column;
      gap: 15px;
      padding: var(--spacing-md);
    }
    
    .logo {
      gap: 15px;
    }
    
    .logo-badge {
      width: 50px;
      height: 50px;
      font-size: 24px;
    }
    
    .logo-text h1 {
      font-size: 18px;
    }
    
    /* Navigation */
    .nav-links {
      width: 100%;
      flex-direction: column;
    }
    
    /* Hero */
    .hero h2 {
      font-size: 26px;
    }
    
    .hero-buttons {
      flex-direction: column;
      width: 100%;
    }
    
    /* Grilles */
    .services-grid,
    .news-grid {
      grid-template-columns: 1fr;
    }

    .trust-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }

    .trust-grid {
      grid-template-columns: 1fr;
    }
    
    /* Composants ARG */
    .sequence-indicator {
      top: 10px;
      right: 10px;
    }
    
    .communicado-container {
      padding: 25px;
    }
  }