From 7c58e50c11674b635a1f2194fa298b566a205bd7 Mon Sep 17 00:00:00 2001
From: Anthony GAEREMYNCK <1@anthony.sh>
Date: Fri, 31 Jul 2026 15:59:39 +0200
Subject: [PATCH] feat(frontend): use flag icons in the language switcher

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 frontend/src/components/LanguageSwitcher.jsx | 5 +++--
 frontend/src/styles/layout.css               | 6 ++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/LanguageSwitcher.jsx b/frontend/src/components/LanguageSwitcher.jsx
index cb31381..f823d2f 100644
--- a/frontend/src/components/LanguageSwitcher.jsx
+++ b/frontend/src/components/LanguageSwitcher.jsx
@@ -6,10 +6,11 @@ export function LanguageSwitcher() {
   const { t } = useTranslation();
   const otherLang = lang === 'fr' ? 'en' : 'fr';
   const label = otherLang === 'en' ? t('nav.switchToEnglish') : t('nav.switchToFrench');
+  const flagCode = otherLang === 'en' ? 'gb' : 'fr';
 
   return (
-    <Link to={`/${otherLang}/`} className="language-switcher">
-      {label}
+    <Link to={`/${otherLang}/`} className="language-switcher" aria-label={label} title={label}>
+      <span className={`fi fi-${flagCode}`} aria-hidden="true" />
     </Link>
   );
 }
diff --git a/frontend/src/styles/layout.css b/frontend/src/styles/layout.css
index 8ef8008..4f32b24 100644
--- a/frontend/src/styles/layout.css
+++ b/frontend/src/styles/layout.css
@@ -28,6 +28,12 @@
   padding: 0 0.5rem;
 }
 
+.language-switcher .fi {
+  font-size: 1.35rem;
+  border-radius: 3px;
+  box-shadow: 0 0 0 1px var(--color-border);
+}
+
 .theme-toggle {
   background: none;
   border: 1px solid var(--color-border);