trouvetonprofile/src/app/shared/components/footer/footer.component.html

<footer class="sm:py-12 w-full bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="space-y-8">
      <!-- Séparateur décoratif (optionnel sur petit écran) -->
      <div
        class="sm:block h-px w-full bg-gradient-to-r from-transparent via-gray-300 dark:via-gray-700 to-transparent"
      ></div>

      <!-- Contenu principal du footer -->
      <div class="flex flex-col lg:flex-row justify-between items-center gap-6 lg:gap-8">
        <!-- Logo/Brand -->
        <a
          [routerLink]="['/']"
          class="flex items-center gap-2 group order-1 lg:order-none"
          aria-label="Accueil TrouveTonProfile"
        >
          <span
            class="text-xl sm:text-2xl font-semibold text-gray-900 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors"
          >
            TrouveTonProfile
          </span>
        </a>

        <!-- Liens légaux -->
        <nav class="order-2 lg:order-none" aria-label="Liens légaux">
          <ul class="flex flex-wrap justify-center items-center gap-4 sm:gap-6">
            <li>
              <a
                [routerLink]="['/conditions']"
                class="text-sm sm:text-base text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
              >
                Conditions
              </a>
            </li>
            <li class="hidden sm:block text-gray-300 dark:text-gray-700">|</li>
            <li>
              <a
                [routerLink]="['/terms']"
                class="text-sm sm:text-base text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
              >
                Termes
              </a>
            </li>
            <li class="hidden sm:block text-gray-300 dark:text-gray-700">|</li>
            <li>
              <a
                [routerLink]="['/politiques']"
                class="text-sm sm:text-base text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
              >
                Politiques
              </a>
            </li>
          </ul>
        </nav>

        <!-- Réseaux sociaux -->
        <nav class="order-3 lg:order-none" aria-label="Réseaux sociaux">
          <ul class="flex items-center gap-3 sm:gap-4">
            <li>
              <a
                href="https://linkedin.com"
                target="_blank"
                rel="noopener noreferrer"
                class="inline-flex items-center justify-center w-9 h-9 sm:w-10 sm:h-10 rounded-full border border-gray-300 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:border-indigo-500 dark:hover:border-indigo-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:scale-110 transition-all duration-200"
                aria-label="LinkedIn"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-4 h-4 sm:w-5 sm:h-5 fill-current"
                  viewBox="0 0 448 512"
                >
                  <path
                    d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"
                  />
                </svg>
              </a>
            </li>
            <li>
              <a
                href="https://facebook.com"
                target="_blank"
                rel="noopener noreferrer"
                class="inline-flex items-center justify-center w-9 h-9 sm:w-10 sm:h-10 rounded-full border border-gray-300 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:border-indigo-500 dark:hover:border-indigo-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:scale-110 transition-all duration-200"
                aria-label="Facebook"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-4 h-4 sm:w-5 sm:h-5 fill-current"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M18 2a1 1 0 0 1 .993.883L19 3v4a1 1 0 0 1-.883.993L18 8h-3v1h3a1 1 0 0 1 .991 1.131l-.02.112l-1 4a1 1 0 0 1-.858.75L17 15h-2v6a1 1 0 0 1-.883.993L14 22h-4a1 1 0 0 1-.993-.883L9 21v-6H7a1 1 0 0 1-.993-.883L6 14v-4a1 1 0 0 1 .883-.993L7 9h2V8a6 6 0 0 1 5.775-5.996L15 2z"
                  />
                </svg>
              </a>
            </li>
            <li>
              <a
                href="https://x.com"
                target="_blank"
                rel="noopener noreferrer"
                class="inline-flex items-center justify-center w-9 h-9 sm:w-10 sm:h-10 rounded-full border border-gray-300 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:border-indigo-500 dark:hover:border-indigo-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:scale-110 transition-all duration-200"
                aria-label="X (Twitter)"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-4 h-4 sm:w-5 sm:h-5 fill-current"
                  viewBox="0 0 512 512"
                >
                  <path
                    d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
                  />
                </svg>
              </a>
            </li>
          </ul>
        </nav>
      </div>

      <!-- Copyright (optionnel) -->
      <div class="pt-6 border-t border-gray-200 dark:border-gray-800">
        <p class="text-center text-xs sm:text-sm text-gray-500 dark:text-gray-500">
          © {{ currentYear }} TrouveTonProfile. Tous droits réservés.
        </p>
      </div>
    </div>
  </div>
</footer>