From df189ada9f347f90209d9bd78d1049137eebb3a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aur=C3=A9lien=20Bertrand?= <orelienbertrand@gmail.com>
Date: Sat, 24 Oct 2026 19:41:06 +0200
Subject: [PATCH] feat: add LinkedIn and GitHub icons to footer with updated
 styles

---
 src/components/Icons.astro |  3 +++
 src/layouts/Base.astro     | 11 +++++------
 src/styles/global.css      | 12 +++++++-----
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/Icons.astro b/src/components/Icons.astro
index 66387b4..75e0d95 100644
--- a/src/components/Icons.astro
+++ b/src/components/Icons.astro
@@ -7,6 +7,9 @@
   <symbol id="i-pin" viewBox="0 0 24 24"><path d="M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11Z"/><circle cx="12" cy="10" r="2.3"/></symbol>
   <symbol id="i-mail" viewBox="0 0 24 24"><rect x="3.5" y="5.5" width="17" height="13" rx="2.5"/><path d="m4.5 7.5 7.5 5.5 7.5-5.5"/></symbol>
   <symbol id="i-external" viewBox="0 0 24 24"><path d="M14 4h6v6M20 4l-8.5 8.5"/><path d="M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4"/></symbol>
+  <!-- Logos de marque (pleins, d'après Simple Icons) -->
+  <symbol id="i-linkedin" viewBox="0 0 24 24"><path fill="currentColor" stroke="none" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></symbol>
+  <symbol id="i-github" viewBox="0 0 24 24"><path fill="currentColor" stroke="none" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></symbol>
   <symbol id="i-check" viewBox="0 0 24 24"><path d="m5 12.5 4.5 4.5L19 7.5"/></symbol>
   <symbol id="i-arrow-right" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></symbol>
   <symbol id="i-arrow-left" viewBox="0 0 24 24"><path d="M19 12H5M11 6l-6 6 6 6"/></symbol>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 6c33b7b..477cc35 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -24,7 +24,6 @@ const chemin = cheminSansLangue(Astro.url);
 const versions = (Object.keys(LANGUES) as Langue[]).map((code) => ({ code, ...LANGUES[code], href: url(chemin, code) }));
 // Thèmes d'habillage (src/data/themes.json, voir THEMES.md), choisis dans le navigateur d'après la date.
 const habillages = { forcer: themes.forcer, themes: themes.themes.map(({ nom, ...t }) => t) };
-const annee = new Date().getFullYear();
 const accents = `--accent-light: ${site.couleurs.accentClair}; --accent-dark: ${site.couleurs.accentSombre};`;
 ---
 
@@ -134,11 +133,11 @@ const accents = `--accent-light: ${site.couleurs.accentClair}; --accent-dark: ${
       <slot />
 
       <footer class="footer">
-        <span>© {annee} {profil.prenom} {profil.nom}</span>
-        <nav aria-label={t.liensExternes}>
-          {profil.liens.linkedin && <a href={profil.liens.linkedin} rel="me">LinkedIn</a>}
-          {profil.liens.github && <a href={profil.liens.github} rel="me">GitHub</a>}
-          {site.piedDePage.lienCodeDuSite && <a href={site.piedDePage.lienCodeDuSite}>{t.codeDuSite}</a>}
+        <Brand />
+        <nav class="footer-links" aria-label={t.liensExternes}>
+          {profil.liens.linkedin && <a class="icon-btn glass" href={profil.liens.linkedin} rel="me" aria-label="LinkedIn" title="LinkedIn"><Icon name="linkedin" /></a>}
+          {profil.liens.github && <a class="icon-btn glass" href={profil.liens.github} rel="me" aria-label="GitHub" title="GitHub"><Icon name="github" /></a>}
+          {site.piedDePage.lienCodeDuSite && <a class="icon-btn glass" href={site.piedDePage.lienCodeDuSite} aria-label={t.codeDuSite} title={t.codeDuSite}><Icon name="code" /></a>}
         </nav>
       </footer>
     </div>
diff --git a/src/styles/global.css b/src/styles/global.css
index 9ef8097..8d9fd8a 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -527,11 +527,13 @@ html:not(.js) .lang:is(:hover, :focus-within) .lang-tip,
 .notfound h1 { font-size: 1.75rem; letter-spacing: -0.03em; }
 .notfound p { color: var(--muted); }
 
+/* Pied de page, posé sur le fond et aligné à droite : le logo, puis les liens en pastilles d'icônes. */
 .footer {
-  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem;
-  padding-block: 1.5rem 2.5rem; border-top: 1px solid var(--rule);
+  display: flex; align-items: center; justify-content: flex-end; gap: 1rem;
+  padding: 0 0.25rem; margin-bottom: max(2rem, env(safe-area-inset-bottom));
   font-size: 0.875rem; color: var(--faint);
 }
-.footer nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
-.footer a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
-.footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
+.footer-links { display: flex; gap: 0.5rem; }
+.footer-links .icon-btn { color: var(--muted); transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s var(--ease); }
+.footer-links .icon-btn:hover { color: var(--ink); background: var(--glass-strong); transform: translateY(-2px); }
+