diff --git a/.astro-i18n/generated.d.ts b/.astro-i18n/generated.d.ts
index 1750f79..0c90623 100644
--- a/.astro-i18n/generated.d.ts
+++ b/.astro-i18n/generated.d.ts
@@ -1,8 +1,8 @@
 type DefaultLangCode = "fr"
 type SupportedLangCode = "en"
 type LangCode = DefaultLangCode | SupportedLangCode
-type RouteUri = | "/articles/[slug]" | "/articles" | "/agments/[slug]" | "/agments" | "/references" | "/veille" | "/" | "/plan-du-site" 
-type RouteParams = {"/articles/[slug]": { "slug": string; }; "/articles": undefined; "/agments/[slug]": { "slug": string; }; "/agments": undefined; "/references": undefined; "/veille": undefined; "/": undefined; "/plan-du-site": undefined; }
+type RouteUri = | "/articles/[slug]" | "/articles" | "/agments/[slug]" | "/agments" | "/offres/web-classique" | "/references" | "/veille" | "/" | "/plan-du-site" 
+type RouteParams = {"/articles/[slug]": { "slug": string; }; "/articles": undefined; "/agments/[slug]": { "slug": string; }; "/agments": undefined; "/offres/web-classique": undefined; "/references": undefined; "/veille": undefined; "/": undefined; "/plan-du-site": undefined; }
 type TranslationPath = "accueil" | "tagline" | "copyright" | "contact.title" | "contact.email" | "contact.tel" | "contenuVide" | "header.skipLink" | "header.mainNav" | "header.homeLink" | "sitemap" | "prevNext.contenus" | "prevNext.precedent" | "prevNext.suivant" | "article.titre" | "article.tagline" | "article.published" | "meta.publication" | "meta.modification" | "meta.credit" | "fragments.titre" | "fragments.tagline" | "references.titre" | "references.slug" | "references.cta" | "references.tagline" | "veille.titre" | "veille.tagline" | "erreur.introuvable" | "erreur.autre" | "erreur.lienRetour" | "seo.meta.description" | "seo.article.title" | "seo.article.description" | "seo.code.title" | "seo.code.description" | "seo.references.title" | "seo.references.description" | "index.articles.pageName" | "index.articles.subtitle" | "index.fragments.pageName" | "index.fragments.subtitle" | "index.references.pageName" | "index.references.subtitle" | "index.veille.pageName" | "index.veille.subtitle" | "index.title" | "index.subtitle" | "index.quoi" | "index.comment" | "index.opensource" | "index.writing" | "index.latestProjects" | "index.latestArticles" | "index.allProjects" | "index.allArticles" | "index.latestSnippets" | "index.allSnippets" | "index.toc" | "contact.contenuVide"
 type TranslationOptions = { "accueil": {} | undefined; "tagline": {} | undefined; "copyright": {} | undefined; "contact.title": {} | undefined; "contact.email": {} | undefined; "contact.tel": {} | undefined; "contenuVide": {} | undefined; "header.skipLink": {} | undefined; "header.mainNav": {} | undefined; "header.homeLink": {} | undefined; "sitemap": {} | undefined; "prevNext.contenus": {} | undefined; "prevNext.precedent": {} | undefined; "prevNext.suivant": {} | undefined; "article.titre": {} | undefined; "article.tagline": {} | undefined; "article.published": { datetime: unknown; options: unknown; }; "meta.publication": {} | undefined; "meta.modification": {} | undefined; "meta.credit": {} | undefined; "fragments.titre": {} | undefined; "fragments.tagline": {} | undefined; "references.titre": {} | undefined; "references.slug": {} | undefined; "references.cta": {} | undefined; "references.tagline": {} | undefined; "veille.titre": {} | undefined; "veille.tagline": {} | undefined; "erreur.introuvable": {} | undefined; "erreur.autre": {} | undefined; "erreur.lienRetour": {} | undefined; "seo.meta.description": {} | undefined; "seo.article.title": {} | undefined; "seo.article.description": {} | undefined; "seo.code.title": {} | undefined; "seo.code.description": {} | undefined; "seo.references.title": {} | undefined; "seo.references.description": {} | undefined; "index.articles.pageName": {} | undefined; "index.articles.subtitle": {} | undefined; "index.fragments.pageName": {} | undefined; "index.fragments.subtitle": {} | undefined; "index.references.pageName": {} | undefined; "index.references.subtitle": {} | undefined; "index.veille.pageName": {} | undefined; "index.veille.subtitle": {} | undefined; "index.title": {} | undefined; "index.subtitle": {} | undefined; "index.quoi": {} | undefined; "index.comment": {} | undefined; "index.opensource": {} | undefined; "index.writing": {} | undefined; "index.latestProjects": {} | undefined; "index.latestArticles": {} | undefined; "index.allProjects": {} | undefined; "index.allArticles": {} | undefined; "index.latestSnippets": {} | undefined; "index.allSnippets": {} | undefined; "index.toc": {} | undefined; "contact.contenuVide": {} | undefined; }
 
diff --git a/.astro/types.d.ts b/.astro/types.d.ts
index 8c9af37..c64bb8f 100644
--- a/.astro/types.d.ts
+++ b/.astro/types.d.ts
@@ -198,7 +198,293 @@ declare module 'astro:content' {
 	>;
 
 	type ContentEntryMap = {
-		
+		"articles": {
+"en/2022.md": {
+	id: "en/2022.md";
+  slug: "en/2022";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".md"] };
+"en/2023.md": {
+	id: "en/2023.md";
+  slug: "en/2023";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".md"] };
+"en/after-effects-expressions.mdx": {
+	id: "en/after-effects-expressions.mdx";
+  slug: "en/after-effects-expressions";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".mdx"] };
+"en/faq.md": {
+	id: "en/faq.md";
+  slug: "en/faq";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".md"] };
+"en/gratuiste.md": {
+	id: "en/gratuiste.md";
+  slug: "en/gratuiste";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".md"] };
+"en/sci-hub-blocage.mdx": {
+	id: "en/sci-hub-blocage.mdx";
+  slug: "en/sci-hub-blocage";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".mdx"] };
+"en/the-day-I-jamd.mdx": {
+	id: "en/the-day-I-jamd.mdx";
+  slug: "en/the-day-i-jamd";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".mdx"] };
+"en/video-compression.mdx": {
+	id: "en/video-compression.mdx";
+  slug: "en/video-compression";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".mdx"] };
+"fr/2022.md": {
+	id: "fr/2022.md";
+  slug: "fr/2022";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".md"] };
+"fr/2023.md": {
+	id: "fr/2023.md";
+  slug: "fr/2023";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".md"] };
+"fr/after-effects-expressions.md": {
+	id: "fr/after-effects-expressions.md";
+  slug: "fr/after-effects-expressions";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".md"] };
+"fr/faq.md": {
+	id: "fr/faq.md";
+  slug: "fr/faq";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".md"] };
+"fr/gratuiste.md": {
+	id: "fr/gratuiste.md";
+  slug: "fr/gratuiste";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".md"] };
+"fr/sci-hub-blocage.mdx": {
+	id: "fr/sci-hub-blocage.mdx";
+  slug: "fr/sci-hub-blocage";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".mdx"] };
+"fr/the-day-I-jamd.mdx": {
+	id: "fr/the-day-I-jamd.mdx";
+  slug: "fr/the-day-i-jamd";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".mdx"] };
+"fr/video-compression.md": {
+	id: "fr/video-compression.md";
+  slug: "fr/video-compression";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".md"] };
+};
+"fragments": {
+"en/acme-sh-tls-cert.md": {
+	id: "en/acme-sh-tls-cert.md";
+  slug: "en/acme-sh-tls-cert";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+"en/array-vs-array.md": {
+	id: "en/array-vs-array.md";
+  slug: "en/array-vs-array";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+"en/buttons.md": {
+	id: "en/buttons.md";
+  slug: "en/buttons";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+"en/image-full.mdx": {
+	id: "en/image-full.mdx";
+  slug: "en/image-full";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".mdx"] };
+"en/nuxt-graphql-static.md": {
+	id: "en/nuxt-graphql-static.md";
+  slug: "en/nuxt-graphql-static";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+"en/super-cookies.md": {
+	id: "en/super-cookies.md";
+  slug: "en/super-cookies";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+"en/toulouse-fun.md": {
+	id: "en/toulouse-fun.md";
+  slug: "en/toulouse-fun";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+"en/visited-links.md": {
+	id: "en/visited-links.md";
+  slug: "en/visited-links";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+"fr/acme-sh-tls-cert.md": {
+	id: "fr/acme-sh-tls-cert.md";
+  slug: "fr/acme-sh-tls-cert";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+"fr/array-vs-array.md": {
+	id: "fr/array-vs-array.md";
+  slug: "fr/array-vs-array";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+"fr/buttons.mdx": {
+	id: "fr/buttons.mdx";
+  slug: "fr/buttons";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".mdx"] };
+"fr/image-full.mdx": {
+	id: "fr/image-full.mdx";
+  slug: "fr/image-full";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".mdx"] };
+"fr/nuxt-graphql-static.md": {
+	id: "fr/nuxt-graphql-static.md";
+  slug: "fr/nuxt-graphql-static";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+"fr/super-cookies.mdx": {
+	id: "fr/super-cookies.mdx";
+  slug: "fr/super-cookies";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".mdx"] };
+"fr/toulouse-fun.md": {
+	id: "fr/toulouse-fun.md";
+  slug: "fr/toulouse-fun";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+"fr/visited-links.md": {
+	id: "fr/visited-links.md";
+  slug: "fr/visited-links";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+};
+"references": {
+"en/3w.md": {
+	id: "en/3w.md";
+  slug: "en/3w";
+  body: string;
+  collection: "references";
+  data: any
+} & { render(): Render[".md"] };
+"en/natureo.md": {
+	id: "en/natureo.md";
+  slug: "en/natureo";
+  body: string;
+  collection: "references";
+  data: any
+} & { render(): Render[".md"] };
+"en/parole-expression.md": {
+	id: "en/parole-expression.md";
+  slug: "en/parole-expression";
+  body: string;
+  collection: "references";
+  data: any
+} & { render(): Render[".md"] };
+"en/rose-primaire.md": {
+	id: "en/rose-primaire.md";
+  slug: "en/rose-primaire";
+  body: string;
+  collection: "references";
+  data: any
+} & { render(): Render[".md"] };
+"fr/3w.md": {
+	id: "fr/3w.md";
+  slug: "fr/3w";
+  body: string;
+  collection: "references";
+  data: any
+} & { render(): Render[".md"] };
+"fr/natureo.md": {
+	id: "fr/natureo.md";
+  slug: "fr/natureo";
+  body: string;
+  collection: "references";
+  data: any
+} & { render(): Render[".md"] };
+"fr/parole-expression.md": {
+	id: "fr/parole-expression.md";
+  slug: "fr/parole-expression";
+  body: string;
+  collection: "references";
+  data: any
+} & { render(): Render[".md"] };
+"fr/rose-primaire.md": {
+	id: "fr/rose-primaire.md";
+  slug: "fr/rose-primaire";
+  body: string;
+  collection: "references";
+  data: any
+} & { render(): Render[".md"] };
+};
+
 	};
 
 	type DataEntryMap = {
diff --git a/src/components/CardEditorial.astro b/src/components/CardEditorial.astro
index e8f4d9b..dcdfe3d 100644
--- a/src/components/CardEditorial.astro
+++ b/src/components/CardEditorial.astro
@@ -9,35 +9,33 @@ const isReference = routeName === t("references.slug");
 ---
 
 <div class:list={["card", { "card--link": !isReference }]}>
-	<div>
-		<h3>
-			{
-				!isReference ? (
-					<a
-						class="clean-link card__link"
-						href={`${l(`/${routeName}`)}/${item.slug}`}
-					>
-						{item.data.title}
-					</a>
-				) : (
-					<span>{item.data.title}</span>
-				)
-			}
-		</h3>
-		<h4>{item.data.subtitle}</h4>
-		<ListTags list={item.data.tags} />
+	<h3>
 		{
-			isReference && (
-				<a href={item.data.url} rel="noopener noreferer">
-					{t("references.cta")}
-					<span class="sr-only"> {item.data.title}</span>
+			!isReference ? (
+				<a
+					class="clean-link card__link"
+					href={`${l(`/${routeName}`)}/${item.data.permalink}`}
+				>
+					{item.data.title}
 				</a>
+			) : (
+				<span>{item.data.title}</span>
 			)
 		}
-	</div>
+	</h3>
+	<h4>{item.data.subtitle}</h4>
+	<ListTags list={item.data.tags} />
+	{
+		isReference && (
+			<a href={item.data.url} rel="noopener noreferer">
+				{t("references.cta")}
+				<span class="sr-only"> {item.data.title}</span>
+			</a>
+		)
+	}
 </div>
 
-<style scoped>
+<style define:vars={{ permalink: item.data.permalink }}>
 	.card {
 		padding: var(--space-s-m) var(--space-xs-s);
 		position: relative;
@@ -125,6 +123,9 @@ const isReference = routeName === t("references.slug");
 		.card::after {
 			transition: opacity ease 0.2s, transform ease 0.2s;
 		}
+		.card--link {
+			view-transition-name: var(--permalink);
+		}
 		h3 a {
 			transition: color ease 0.2s;
 		}
diff --git a/src/components/EditorialContent.astro b/src/components/EditorialContent.astro
index 85adfa9..f2bd32c 100644
--- a/src/components/EditorialContent.astro
+++ b/src/components/EditorialContent.astro
@@ -1,19 +1,17 @@
 ---
-import { renderContent } from "astro-i18n";
+// import { renderContent } from "astro-i18n";
 import MetaDate from "./MetaDate.astro";
 import TOC from "./TOC.astro";
 
 const { content } = Astro.props;
-// const { Content, headings } = await content.render();
-const { html, headings } = await renderContent(Astro, content);
+const { Content, headings } = await content.render();
+// const { html, headings } = await renderContent(Astro, content);
 
 const toc = headings.map((heading) => {
 	return heading;
 });
 
-if (content.data.code) {
-	import "../styles/vendor/one-dark-pro.css";
-}
+import "../styles/vendor/one-dark-pro.css";
 ---
 
 <div class="sidebar region">
@@ -22,13 +20,17 @@ if (content.data.code) {
 		<h1>{content.data.title}</h1>
 		<p class="h3">{content.data.subtitle}</p>
 		<MetaDate item={content.data} />
-		<div class="flow content" set:html={html}>
-			<!-- <Content /> -->
-		</div>
+		<!-- <div class="flow content" set:html={html}> -->
+		<Content />
 	</article>
 </div>
 
-<style>
+<style define:vars={{ permalink: content.data.permalink }}>
+	@media (prefers-reduced-motion: no-preference) {
+		article {
+			view-transition-name: var(--permalink);
+		}
+	}
 	.sidebar {
 		--gutter: var(--space-xs-m);
 	}
diff --git a/src/components/Head.astro b/src/components/Head.astro
new file mode 100644
index 0000000..c1f07fc
--- /dev/null
+++ b/src/components/Head.astro
@@ -0,0 +1,17 @@
+---
+import { t } from "astro-i18n";
+const { pageTitle } = Astro.props;
+---
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>{pageTitle} - Nicolas Arduin</title>
+	<meta name="description" content={t("seo.meta.description")} />
+	<meta name="robots" content="index,follow." />
+	<meta name="author" content="Nicolas Arduin" />
+	<meta name="subject" content="Développement de sites web, accessibilité." />
+	<meta name="view-transition" content="same-origin" />
+</head>
diff --git a/src/components/QuickAccessCard.astro b/src/components/QuickAccessCard.astro
index bf58a72..6e4d401 100644
--- a/src/components/QuickAccessCard.astro
+++ b/src/components/QuickAccessCard.astro
@@ -34,7 +34,7 @@ const { item } = Astro.props;
 		text-align: center;
 		gap: var(--space-xs);
 		cursor: pointer;
-		background-color: var(--color-light-blue);
+		background-color: var(--color-white);
 		transform: translateY(0);
 	}
 	.card:focus-within {
diff --git a/src/content/articles/en/2022.md b/src/content/articles/en/2022.md
index 8690c06..9e22ec9 100644
--- a/src/content/articles/en/2022.md
+++ b/src/content/articles/en/2022.md
@@ -2,7 +2,7 @@
 title: Nico v2.0
 subtitle: 2022 update of many things.
 lang: en
-slug: "2022"
+permalink: "2022"
 excerpt: Changes in my services, the website and myself.
 tags: ["Freelance"]
 type: articles
diff --git a/src/content/articles/en/2023.md b/src/content/articles/en/2023.md
index 23b0c00..ea234f6 100644
--- a/src/content/articles/en/2023.md
+++ b/src/content/articles/en/2023.md
@@ -2,7 +2,7 @@
 title: Nico v2.5
 subtitle: Update 2023.
 lang: en
-slug: "2023"
+permalink: "2023"
 excerpt: New changes.
 tags: ["Freelance"]
 type: articles
diff --git a/src/content/articles/en/after-effects-expressions.mdx b/src/content/articles/en/after-effects-expressions.mdx
index 8bde8ca..ade2776 100644
--- a/src/content/articles/en/after-effects-expressions.mdx
+++ b/src/content/articles/en/after-effects-expressions.mdx
@@ -2,7 +2,7 @@
 title: After Effects Expressions
 subtitle: Animation on steroïds.
 lang: en
-slug: "after-effects-expressions"
+permalink: "after-effects-expressions"
 excerpt: Expressions in After Effects have always been blurry for me. I know they exist, I know they're powerful, I know it could save a lot of time and clean complex keyframe filled compositions but… They are hard to learn!
 tags: ["Design"]
 type: articles
diff --git a/src/content/articles/en/faq.md b/src/content/articles/en/faq.md
index c353513..ad735a4 100644
--- a/src/content/articles/en/faq.md
+++ b/src/content/articles/en/faq.md
@@ -2,7 +2,7 @@
 title: Accessibility and sobriety
 subtitle: Translation in progress, stay tuned ;)
 lang: en
-slug: "faq"
+permalink: "faq"
 draft: true
 excerpt: Why, how et and especially what.
 tags: ["Freelance"]
diff --git a/src/content/articles/en/gratuiste.md b/src/content/articles/en/gratuiste.md
index ca37270..88222a7 100644
--- a/src/content/articles/en/gratuiste.md
+++ b/src/content/articles/en/gratuiste.md
@@ -2,7 +2,7 @@
 title: Gratuiste
 subtitle: Translation in progress, stay tuned ;)
 lang: en
-slug: "gratuiste"
+permalink: "gratuiste"
 draft: true
 excerpt: Translation in progress, stay tuned ;)
 tags: ["Design", "Freelance"]
diff --git a/src/content/articles/en/sci-hub-blocage.mdx b/src/content/articles/en/sci-hub-blocage.mdx
index fd1a5d4..44332eb 100644
--- a/src/content/articles/en/sci-hub-blocage.mdx
+++ b/src/content/articles/en/sci-hub-blocage.mdx
@@ -2,7 +2,7 @@
 title: "Access blocked Sci-hub"
 subtitle: "The science of sharing."
 lang: en
-slug: "sci-hub-unblock"
+permalink: "sci-hub-unblock"
 key: "scihub"
 excerpt: "In March 2019, the Paris Regional Court ruled in favour of the publishers of scientific articles Elsevier and Springer Nature by ordering internet service providers to block access to these two websites. Here is how to access them if they are blocked in your country anyway."
 tags: ["Internet", "Science"]
diff --git a/src/content/articles/en/the-day-I-jamd.mdx b/src/content/articles/en/the-day-I-jamd.mdx
index 3366ca5..c1e1748 100644
--- a/src/content/articles/en/the-day-I-jamd.mdx
+++ b/src/content/articles/en/the-day-I-jamd.mdx
@@ -2,7 +2,7 @@
 title: The day I Jam’d
 subtitle: A story of unusual tools and fun gambles.
 lang: en
-slug: "the-day-I-jamd"
+permalink: "the-day-I-jamd"
 excerpt: Ooh, yeah! All right! We’re jammin’
 tags: ["Dev", "Jamstack"]
 type: articles
diff --git a/src/content/articles/en/video-compression.mdx b/src/content/articles/en/video-compression.mdx
index bd154dc..7dd5f60 100644
--- a/src/content/articles/en/video-compression.mdx
+++ b/src/content/articles/en/video-compression.mdx
@@ -2,7 +2,7 @@
 title: Video compression
 subtitle: Encode like you mean it.
 lang: en
-slug: "video-compression"
+permalink: "video-compression"
 excerpt: How to gain precious weight when encoding videos.
 tags: ["Design"]
 type: articles
diff --git a/src/content/articles/fr/2022.md b/src/content/articles/fr/2022.md
index 09e9d24..e16805c 100644
--- a/src/content/articles/fr/2022.md
+++ b/src/content/articles/fr/2022.md
@@ -2,7 +2,7 @@
 title: Nico v2.0
 subtitle: Mise à jour 2022 de plein de trucs.
 lang: fr
-slug: "2022"
+permalink: "2022"
 excerpt: Évolution des services, du site et de moi-même.
 tags: ["Freelance"]
 type: articles
diff --git a/src/content/articles/fr/2023.md b/src/content/articles/fr/2023.md
index c2104d0..c38f567 100644
--- a/src/content/articles/fr/2023.md
+++ b/src/content/articles/fr/2023.md
@@ -2,7 +2,7 @@
 title: Nico v2.5
 subtitle: Mise à jour 2023.
 lang: fr
-slug: "2023"
+permalink: "2023"
 excerpt: Suite des évolutions.
 tags: ["Freelance"]
 type: articles
diff --git a/src/content/articles/fr/after-effects-expressions.md b/src/content/articles/fr/after-effects-expressions.md
index e449ab1..acec5cc 100644
--- a/src/content/articles/fr/after-effects-expressions.md
+++ b/src/content/articles/fr/after-effects-expressions.md
@@ -3,7 +3,7 @@ title: After Effects Expressions
 subtitle: En cours de traduction, revenez bientôt ;)
 lang: fr
 draft: true
-slug: "after-effects-expressions"
+permalink: "after-effects-expressions"
 excerpt: En cours de traduction, revenez bientôt ;)
 tags: ["Design"]
 type: articles
diff --git a/src/content/articles/fr/faq.md b/src/content/articles/fr/faq.md
index 4c3e3f0..327b312 100644
--- a/src/content/articles/fr/faq.md
+++ b/src/content/articles/fr/faq.md
@@ -2,7 +2,7 @@
 title: Accessibilité, sobriété et F.A.Q.
 subtitle: Explications sur ma vision et mon fonctionnement.
 lang: fr
-slug: "faq"
+permalink: "faq"
 excerpt: Pourquoi, comment et surtout quèsaco.
 tags: ["Freelance"]
 type: articles
diff --git a/src/content/articles/fr/gratuiste.md b/src/content/articles/fr/gratuiste.md
index d4ba512..560e4df 100644
--- a/src/content/articles/fr/gratuiste.md
+++ b/src/content/articles/fr/gratuiste.md
@@ -2,7 +2,7 @@
 title: "Gratuiste"
 subtitle: "Ou le travail gratuit."
 lang: fr
-slug: "gratuiste"
+permalink: "gratuiste"
 excerpt: "J’ai cherché un moyen de mettre mes compétences au service d’autrui et je pense avoir trouvé: je vais travailler gratuitement pour des associations."
 tags: ["Graphisme", "Freelance"]
 type: articles
diff --git a/src/content/articles/fr/sci-hub-blocage.mdx b/src/content/articles/fr/sci-hub-blocage.mdx
index 0e5325e..bc5d5aa 100644
--- a/src/content/articles/fr/sci-hub-blocage.mdx
+++ b/src/content/articles/fr/sci-hub-blocage.mdx
@@ -2,7 +2,7 @@
 title: "Sci-hub bloqué, comment contourner"
 subtitle: "La science du partage."
 lang: fr
-slug: "sci-hub-blocage"
+permalink: "sci-hub-blocage"
 excerpt: "Le tribunal de grande instance de Paris a ordonné aux fournisseurs d’accès à internet de bloquer l’accès à sci-hub. Voici comment contourner les blocages mis en place."
 tags: ["Internet", "Science"]
 type: articles
diff --git a/src/content/articles/fr/the-day-I-jamd.mdx b/src/content/articles/fr/the-day-I-jamd.mdx
index 1990cb3..d3c3f7f 100644
--- a/src/content/articles/fr/the-day-I-jamd.mdx
+++ b/src/content/articles/fr/the-day-I-jamd.mdx
@@ -2,7 +2,7 @@
 title: The day I Jam’d
 subtitle: Des paris, des outils et du fun.
 lang: fr
-slug: "the-day-I-jamd"
+permalink: "the-day-I-jamd"
 excerpt: Ooh, yeah! All right! We’re jammin’
 tags: ["Dev", "Jamstack"]
 type: articles
diff --git a/src/content/articles/fr/video-compression.md b/src/content/articles/fr/video-compression.md
index fd70eaf..24976bc 100644
--- a/src/content/articles/fr/video-compression.md
+++ b/src/content/articles/fr/video-compression.md
@@ -3,7 +3,7 @@ title: Compression vidéo
 subtitle: En cours de traduction, revenez bientôt ;)
 lang: fr
 draft: true
-slug: "video-compression"
+permalink: "video-compression"
 excerpt: Pas encore traduit
 tags: ["Design"]
 type: articles
diff --git a/src/content/config.ts b/src/content/config.ts
index e7e5708..d300ed6 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -7,6 +7,7 @@ const articles = defineCollection({
 		lang: z.enum(["fr", "en"]),
 		tags: z.array(z.string()), // An array of strings
 		type: z.string(),
+		permalink: z.string(),
 		// Parse pubDate as a browser-standard `Date` object
 		createdAt: z.string().transform((str) => new Date(str)),
 		updatedAt: z
@@ -25,6 +26,7 @@ const fragments = defineCollection({
 		lang: z.enum(["fr", "en"]),
 		tags: z.array(z.string()), // An array of strings
 		type: z.string(),
+		permalink: z.string(),
 		// Parse pubDate as a browser-standard `Date` object
 		createdAt: z.string().transform((str) => new Date(str)),
 		updatedAt: z
@@ -42,6 +44,7 @@ const references = defineCollection({
 		subtitle: z.string(),
 		url: z.string(),
 		lang: z.enum(["fr", "en"]),
+		permalink: z.string(),
 		tags: z.array(z.string()), // An array of strings
 		// Parse pubDate as a browser-standard `Date` object
 		createdAt: z.string().transform((str) => new Date(str)),
diff --git a/src/content/fragments/en/acme-sh-tls-cert.md b/src/content/fragments/en/acme-sh-tls-cert.md
index 9f0a6c2..8d66c4a 100644
--- a/src/content/fragments/en/acme-sh-tls-cert.md
+++ b/src/content/fragments/en/acme-sh-tls-cert.md
@@ -2,7 +2,7 @@
 title: Strong TLS certificates with acme.sh
 subtitle: 384-bit of https
 lang: en
-slug: "acme-sh-tls-cert"
+permalink: "acme-sh-tls-cert"
 createdAt: "2022-06-08T14:24:06.000Z"
 excerpt: Real cert have curves.
 tags: ["security"]
diff --git a/src/content/fragments/en/array-vs-array.md b/src/content/fragments/en/array-vs-array.md
index b93ee61..2a5c593 100644
--- a/src/content/fragments/en/array-vs-array.md
+++ b/src/content/fragments/en/array-vs-array.md
@@ -2,7 +2,7 @@
 title: Filter an array against another array
 subtitle: Array vs Array.
 lang: en
-slug: "array-vs-array"
+permalink: "array-vs-array"
 createdAt: "2022-06-08T14:24:06.000Z"
 excerpt: My peak javascript
 tags: ["nuxt.js"]
diff --git a/src/content/fragments/en/buttons.md b/src/content/fragments/en/buttons.md
index a450e18..e1b6728 100644
--- a/src/content/fragments/en/buttons.md
+++ b/src/content/fragments/en/buttons.md
@@ -2,7 +2,7 @@
 title: Buttons hover
 subtitle: Simple, but nice.
 lang: en
-slug: "buttons"
+permalink: "buttons"
 draft: true
 excerpt: Easy to grab and use hover effects.
 tags: ["CSS"]
diff --git a/src/content/fragments/en/image-full.mdx b/src/content/fragments/en/image-full.mdx
index 00ec278..8574b24 100644
--- a/src/content/fragments/en/image-full.mdx
+++ b/src/content/fragments/en/image-full.mdx
@@ -3,7 +3,7 @@ title: Full width image
 subtitle: Translation in progress, stay tuned ;)
 lang: en
 draft: true
-slug: "image-full"
+permalink: "image-full"
 createdAt: "2020-09-15T09:00:00.000Z"
 updatedAt: "2022-06-08T14:24:06.000Z"
 tags: ["CSS"]
diff --git a/src/content/fragments/en/nuxt-graphql-static.md b/src/content/fragments/en/nuxt-graphql-static.md
index 4b933e4..f651e74 100644
--- a/src/content/fragments/en/nuxt-graphql-static.md
+++ b/src/content/fragments/en/nuxt-graphql-static.md
@@ -2,7 +2,7 @@
 title: Static website and GraphQL queries with Nuxt.js
 subtitle: Graphql client is king.
 lang: en
-slug: "nuxt-graphql-static"
+permalink: "nuxt-graphql-static"
 createdAt: "2022-06-08T14:24:06.000Z"
 updatedAt: "2022-09-08T13:43:33.000Z"
 excerpt: When the most used gql module doesn't work…
@@ -131,7 +131,7 @@ export default {
     const locale = app.i18n.localeProperties.iso
     const data = await $graphql.default.request(articleQuery, {
       code: locale,
-      slug: params.slug,
+      permalink: params.slug,
     })
     return { data }
   },
diff --git a/src/content/fragments/en/super-cookies.md b/src/content/fragments/en/super-cookies.md
index e26f7e4..57e075a 100644
--- a/src/content/fragments/en/super-cookies.md
+++ b/src/content/fragments/en/super-cookies.md
@@ -2,7 +2,7 @@
 title: The best cookies
 subtitle: Consentless biscuits.
 lang: en
-slug: "super-cookies"
+permalink: "super-cookies"
 createdAt: "2022-06-08T14:24:06.000Z"
 excerpt: It's a real recipe, not a joke about annoying files.
 tags: ["food"]
diff --git a/src/content/fragments/en/toulouse-fun.md b/src/content/fragments/en/toulouse-fun.md
index 45691ba..2e1729e 100644
--- a/src/content/fragments/en/toulouse-fun.md
+++ b/src/content/fragments/en/toulouse-fun.md
@@ -2,7 +2,7 @@
 title: Toulouse yourself
 subtitle: Only the bestest
 lang: en
-slug: "toulouse-fun"
+permalink: "toulouse-fun"
 excerpt: Gonna have to trust me on this ¯\_(ツ)_/¯
 tags: ["lifestyle"]
 type: snippets
diff --git a/src/content/fragments/en/visited-links.md b/src/content/fragments/en/visited-links.md
new file mode 100644
index 0000000..1e36638
--- /dev/null
+++ b/src/content/fragments/en/visited-links.md
@@ -0,0 +1,13 @@
+---
+title: Visited links and visuel aid
+subtitle: Translation in progress, stay tuned ;)
+lang: en
+draft: true
+permalink: "visited-links"
+excerpt: Petit hack CSS
+tags: ["Front-end"]
+type: snippets
+createdAt: "2023-06-06T18:34:00.000Z"
+---
+
+[Go back to available snippets](/en/snippets)
diff --git a/src/content/fragments/fr/acme-sh-tls-cert.md b/src/content/fragments/fr/acme-sh-tls-cert.md
index 2601bf6..a95bdca 100644
--- a/src/content/fragments/fr/acme-sh-tls-cert.md
+++ b/src/content/fragments/fr/acme-sh-tls-cert.md
@@ -2,7 +2,7 @@
 title: Certificates TLS robustes avec acme.sh
 subtitle: 384-bit de https
 lang: fr
-slug: "acme-sh-tls-cert"
+permalink: "acme-sh-tls-cert"
 createdAt: "2022-06-08T14:24:06.000Z"
 excerpt: La sécurité avec des courbes.
 tags: ["sécurité"]
diff --git a/src/content/fragments/fr/array-vs-array.md b/src/content/fragments/fr/array-vs-array.md
index 51155c4..dec2f1e 100644
--- a/src/content/fragments/fr/array-vs-array.md
+++ b/src/content/fragments/fr/array-vs-array.md
@@ -3,7 +3,7 @@ title: Filtrer un array avec un autre array
 subtitle: En cours de traduction.
 lang: fr
 draft: true
-slug: "array-vs-array"
+permalink: "array-vs-array"
 createdAt: "2022-06-08T14:24:06.000Z"
 excerpt: En cours de traduction.
 tags: ["nuxt.js"]
diff --git a/src/content/fragments/fr/buttons.mdx b/src/content/fragments/fr/buttons.mdx
index 360c58b..e8c8ee4 100644
--- a/src/content/fragments/fr/buttons.mdx
+++ b/src/content/fragments/fr/buttons.mdx
@@ -2,7 +2,7 @@
 title: "Effets de survol de boutons"
 subtitle: "Simples mais efficaces."
 lang: fr
-slug: "buttons"
+permalink: "buttons"
 draft: true
 excerpt: Quelques effets de survol faciles à récupérer et utiliser.
 tags: ["CSS"]
diff --git a/src/content/fragments/fr/image-full.mdx b/src/content/fragments/fr/image-full.mdx
index 52b4a3a..345eda0 100644
--- a/src/content/fragments/fr/image-full.mdx
+++ b/src/content/fragments/fr/image-full.mdx
@@ -2,7 +2,7 @@
 title: Image pleine largeur
 subtitle: Casser le conteneur.
 lang: fr
-slug: "image-full"
+permalink: "image-full"
 createdAt: "2020-09-15T09:00:00.000Z"
 updatedAt: "2022-06-08T14:24:06.000Z"
 excerpt: Faire déborder une image de son conteneur sans tout casser.
diff --git a/src/content/fragments/fr/nuxt-graphql-static.md b/src/content/fragments/fr/nuxt-graphql-static.md
index 459ccc8..b056aad 100644
--- a/src/content/fragments/fr/nuxt-graphql-static.md
+++ b/src/content/fragments/fr/nuxt-graphql-static.md
@@ -2,7 +2,7 @@
 title: Site statique et requêtes GraphQL avec Nuxt.js
 subtitle: Le client graphql est roi.
 lang: fr
-slug: "nuxt-graphql-static"
+permalink: "nuxt-graphql-static"
 createdAt: "2022-06-08T14:24:06.000Z"
 updatedAt: "2022-09-08T13:43:33.000Z"
 excerpt: Quand le module gql le plus utilisé ne fonctionne pas…
@@ -131,7 +131,7 @@ export default {
     const locale = app.i18n.localeProperties.iso
     const data = await $graphql.default.request(articleQuery, {
       code: locale,
-      slug: params.slug,
+      permalink: params.slug,
     })
     return { data }
   },
diff --git a/src/content/fragments/fr/super-cookies.mdx b/src/content/fragments/fr/super-cookies.mdx
index abb5d37..6df6819 100644
--- a/src/content/fragments/fr/super-cookies.mdx
+++ b/src/content/fragments/fr/super-cookies.mdx
@@ -2,7 +2,7 @@
 title: Les meilleurs cookies
 subtitle: Des gâteaux sans consentement.
 lang: fr
-slug: "super-cookies"
+permalink: "super-cookies"
 createdAt: "2022-06-08T14:24:06.000Z"
 excerpt: C'est vraiment une recette hein, pas une blague sur les fichiers temporaires.
 tags: ["cuisine"]
diff --git a/src/content/fragments/fr/toulouse-fun.md b/src/content/fragments/fr/toulouse-fun.md
index 0401177..2d7c212 100644
--- a/src/content/fragments/fr/toulouse-fun.md
+++ b/src/content/fragments/fr/toulouse-fun.md
@@ -3,7 +3,7 @@ title: Toulouse yourself
 subtitle: En cours de traduction.
 lang: fr
 draft: true
-slug: "toulouse-fun"
+permalink: "toulouse-fun"
 createdAt: "2022-06-22T15:34:45.000Z"
 excerpt: En cours de traduction.
 tags: ["lifestyle"]
diff --git a/src/content/fragments/fr/visited-links.md b/src/content/fragments/fr/visited-links.md
index b6214d3..1bdfc7d 100644
--- a/src/content/fragments/fr/visited-links.md
+++ b/src/content/fragments/fr/visited-links.md
@@ -3,7 +3,7 @@ title: Liens visités et indication visuelle
 subtitle: Comment différencier les liens déjà cliqués
 lang: fr
 draft: false
-slug: "visited-links"
+permalink: "visited-links"
 excerpt: Petit hack CSS
 tags: ["Front-end"]
 type: snippets
diff --git a/src/content/references/en/3w.md b/src/content/references/en/3w.md
index a50424f..51802ac 100644
--- a/src/content/references/en/3w.md
+++ b/src/content/references/en/3w.md
@@ -3,7 +3,7 @@ title: 3w
 subtitle: I wrote the doc!
 url: https://3-w.fr
 lang: en
-slug: "3w"
+permalink: "3w"
 excerpt: Développement web et compagnie.
 tags: ["Front-end", "docs"]
 createdAt: "2022-10-19T18:02:00.000Z"
diff --git a/src/content/references/en/natureo.md b/src/content/references/en/natureo.md
index 967b399..fddfee6 100644
--- a/src/content/references/en/natureo.md
+++ b/src/content/references/en/natureo.md
@@ -3,7 +3,7 @@ title: Nature en Occitanie
 subtitle: Sobriety is only natural.
 url: https://www.natureo.org/
 lang: en
-slug: "natureo"
+permalink: "natureo"
 excerpt: Développement web et compagnie.
 tags: ["Front-end", "accessibility", "sobriety", "CMS"]
 createdAt: "2023-04-19T18:02:00.000Z"
diff --git a/src/content/references/en/parole-expression.md b/src/content/references/en/parole-expression.md
index 53dfd38..ba66d1c 100644
--- a/src/content/references/en/parole-expression.md
+++ b/src/content/references/en/parole-expression.md
@@ -3,7 +3,7 @@ title: Parole Expression
 subtitle: A new website for the association.
 url: https://www.paroleexpression.fr/
 lang: en
-slug: "parole-expression"
+permalink: "parole-expression"
 excerpt: Développement web et compagnie.
 tags: ["Front-end", "sobriety", "CMS"]
 createdAt: "2022-04-19T17:11:00.000Z"
diff --git a/src/content/references/en/rose-primaire.md b/src/content/references/en/rose-primaire.md
index 1e9ed23..4e64e39 100644
--- a/src/content/references/en/rose-primaire.md
+++ b/src/content/references/en/rose-primaire.md
@@ -3,7 +3,7 @@ title: Rose Primaire
 subtitle: An agency we love.
 url: https://roseprimaire.com/
 lang: en
-slug: "rose-primaire"
+permalink: "rose-primaire"
 excerpt: Web dev and other things.
 tags: ["Front-end", "accessibility", "sobriety", "CMS"]
 createdAt: "2023-04-19T17:11:00.000Z"
diff --git a/src/content/references/fr/3w.md b/src/content/references/fr/3w.md
index 8f0e984..b668d23 100644
--- a/src/content/references/fr/3w.md
+++ b/src/content/references/fr/3w.md
@@ -3,7 +3,7 @@ title: 3w
 subtitle: J'ai fait de la doc!
 url: https://3-w.fr
 lang: fr
-slug: "3w"
+permalink: "3w"
 excerpt: Développement web et compagnie.
 tags: ["Front-end", "documentation"]
 createdAt: "2022-10-19T18:02:00.000Z"
diff --git a/src/content/references/fr/natureo.md b/src/content/references/fr/natureo.md
index 4a42a10..12a6982 100644
--- a/src/content/references/fr/natureo.md
+++ b/src/content/references/fr/natureo.md
@@ -3,7 +3,7 @@ title: Nature en Occitanie
 subtitle: La sobriété au naturel.
 url: https://www.natureo.org/
 lang: fr
-slug: "natureo"
+permalink: "natureo"
 excerpt: Développement web et compagnie.
 tags: ["Front-end", "accessibilité", "éco-conception", "CMS"]
 createdAt: "2023-04-19T18:02:00.000Z"
diff --git a/src/content/references/fr/parole-expression.md b/src/content/references/fr/parole-expression.md
index f27b522..4901492 100644
--- a/src/content/references/fr/parole-expression.md
+++ b/src/content/references/fr/parole-expression.md
@@ -3,7 +3,7 @@ title: Parole Expression
 subtitle: Un nouveau site pour l'association.
 url: https://www.paroleexpression.fr/
 lang: fr
-slug: parole-expression
+permalink: parole-expression
 excerpt: Développement web et compagnie.
 tags: ["Front-end", "éco-conception", "CMS"]
 createdAt: "2022-04-19T17:11:00.000Z"
diff --git a/src/content/references/fr/rose-primaire.md b/src/content/references/fr/rose-primaire.md
index 328687c..5e0036c 100644
--- a/src/content/references/fr/rose-primaire.md
+++ b/src/content/references/fr/rose-primaire.md
@@ -3,7 +3,7 @@ title: Rose Primaire
 subtitle: Une agence comme on l'aime.
 url: https://roseprimaire.com/
 lang: fr
-slug: "rose-primaire"
+permalink: "rose-primaire"
 excerpt: Développement web et compagnie.
 tags: ["Front-end", "accessibilité", "éco-conception", "CMS"]
 createdAt: "2023-04-19T17:11:00.000Z"
diff --git a/src/data/HP/en/01-offre.md b/src/data/HP/en/01-offre.md
index 2591f13..296cdb8 100644
--- a/src/data/HP/en/01-offre.md
+++ b/src/data/HP/en/01-offre.md
@@ -2,8 +2,6 @@
 type: section
 id: offre
 lang: en
-slug:
-createdAt:
 image: /assets/images/home/offre-1.1.svg
 order: 1
 quickTitle: My offers
diff --git a/src/data/HP/en/02-methodo.md b/src/data/HP/en/02-methodo.md
index ab44653..22aee9c 100644
--- a/src/data/HP/en/02-methodo.md
+++ b/src/data/HP/en/02-methodo.md
@@ -2,8 +2,6 @@
 type: section
 id: methodology
 lang: en
-slug:
-createdAt:
 image: /assets/images/home/methodo.svg
 order: 2
 quickTitle: My methodology
diff --git a/src/data/HP/en/03-about.md b/src/data/HP/en/03-about.md
index eecd468..0c00005 100644
--- a/src/data/HP/en/03-about.md
+++ b/src/data/HP/en/03-about.md
@@ -2,8 +2,6 @@
 type: section
 id: about
 lang: en
-slug:
-createdAt:
 image: /assets/images/home/about.svg
 order: 3
 quickTitle: Me
diff --git a/src/data/HP/fr/01.1-offre.md b/src/data/HP/fr/01.1-offre.md
index e880c74..f85cc2d 100644
--- a/src/data/HP/fr/01.1-offre.md
+++ b/src/data/HP/fr/01.1-offre.md
@@ -16,4 +16,4 @@ Cette offre est destinée à un public souhaitant **se doter d'un site web**, sa
 
 L'objectif principal de cette offre étant d'**établir une présence en ligne** pour le client. Que cette dernière ait un but informatif et/ou éditorial.
 
-<a href="/offres/web-classique" class="btn">L'offre classique en détails</a>
+<!-- <a href="/offres/web-classique" class="btn">L'offre classique en détails</a> -->
diff --git a/src/data/HP/fr/01.2-offre.md b/src/data/HP/fr/01.2-offre.md
index 84c6052..285b083 100644
--- a/src/data/HP/fr/01.2-offre.md
+++ b/src/data/HP/fr/01.2-offre.md
@@ -14,4 +14,4 @@ Lorsque le projet le nécessite, je fais appel à des partenaires talentueux par
 - [Rose Primaire](https://roseprimaire.com/) pour le conseil et l'accompagnement du projet&nbsp;;
 - [Sylvain Plantier](https://jedessinebien.com/) et/ou [Benoît Etchevery](http://ben-etche.com/) pour l'illustration et la direction artistique.
 
-<a href="/offres/accessibilite" class="btn">L'offre accessibilité en détails</a>
+<!-- <a href="/offres/accessibilite" class="btn">L'offre accessibilité en détails</a> -->
diff --git a/src/fonts/recoleta/Recoleta-Bold.woff2 b/src/fonts/recoleta/Recoleta-Bold.woff2
deleted file mode 100644
index d80c6a9..0000000
Binary files a/src/fonts/recoleta/Recoleta-Bold.woff2 and /dev/null differ
diff --git a/src/fonts/recoleta/Recoleta-SemiBold.woff2 b/src/fonts/recoleta/Recoleta-SemiBold.woff2
deleted file mode 100644
index 80d7261..0000000
Binary files a/src/fonts/recoleta/Recoleta-SemiBold.woff2 and /dev/null differ
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 69631ff..0fd0d5e 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,27 +1,18 @@
 ---
-import { t, astroI18n } from "astro-i18n";
+import { astroI18n } from "astro-i18n";
 astroI18n.init(Astro);
 
 import "../styles/style.css";
 
+import Head from "../components/Head.astro";
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 
-const { pageTitle, titleColor } = Astro.props;
+const { pageTitle } = Astro.props;
 ---
 
 <html lang={astroI18n.langCode} dir="ltr">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>{pageTitle} - Nicolas Arduin</title>
-		<meta name="description" content={t("seo.meta.description")} />
-		<meta name="robots" content="index,follow." />
-		<meta name="author" content="Nicolas Arduin" />
-		<meta name="subject" content="Développement de sites web, accessibilité." />
-	</head>
+	<Head pageTitle={pageTitle} />
 	<body>
 		<div class="wrapper">
 			<Header />
diff --git a/src/pages/articles/[slug].astro b/src/pages/articles/[slug].astro
index 35fb9ee..5abbf57 100644
--- a/src/pages/articles/[slug].astro
+++ b/src/pages/articles/[slug].astro
@@ -11,7 +11,7 @@ export const getStaticPaths = createStaticPaths(async ({ langCode }) => {
 		return data.lang === langCode;
 	});
 	return articles.map((article) => ({
-		params: { slug: article.slug },
+		params: { slug: article.data.permalink },
 		props: { article },
 	}));
 }, import.meta.url);
diff --git a/src/pages/en/rss.xml.js b/src/pages/en/rss.xml.js
index 21ab665..993ae71 100644
--- a/src/pages/en/rss.xml.js
+++ b/src/pages/en/rss.xml.js
@@ -26,7 +26,7 @@ export async function get(context) {
 			lang: post.data.lang,
 			// Compute RSS link from post `slug`
 			// This example assumes all posts are rendered as `/blog/[slug]` routes
-			link: `/en/${post.data.type}/${post.slug}/`,
+			link: `/en/${post.data.type}/${post.data.permalink}/`,
 		})),
 		// (optional) inject custom xml
 		customData: `<language>en-us</language>`,
diff --git a/src/pages/fragments/[slug].astro b/src/pages/fragments/[slug].astro
index 4512251..792516c 100644
--- a/src/pages/fragments/[slug].astro
+++ b/src/pages/fragments/[slug].astro
@@ -11,7 +11,7 @@ export const getStaticPaths = createStaticPaths(async ({ langCode }) => {
 		return data.lang === langCode;
 	});
 	return snippets.map((snippet) => ({
-		params: { slug: snippet.slug },
+		params: { slug: snippet.data.permalink },
 		props: { snippet },
 	}));
 }, import.meta.url);
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8dc6661..bae2acc 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,13 +3,10 @@
 import { l, t, astroI18n } from "astro-i18n";
 astroI18n.init(Astro);
 
-import { getEntry } from "astro:content";
-
 // import stuff
 import BaseLayout from "../layouts/BaseLayout.astro";
 import QuickAccessCard from "../components/QuickAccessCard.astro";
 import ListCards from "../components/ListCards.astro";
-import CardEditorial from "../components/CardEditorial.astro";
 
 const pageTitle = t("accueil");
 
@@ -73,7 +70,7 @@ const localizedReferences = await getCollection("references", ({ data }) => {
 							<div class="section__reference">
 								<ListCards
 									list={localizedReferences.filter((ref) => {
-										return ref.slug === section.frontmatter.reference;
+										return ref.data.permalink === section.frontmatter.reference;
 									})}
 									routeName={t("references.slug")}
 								/>
diff --git a/src/pages/rss.xml.js b/src/pages/rss.xml.js
index 969b32c..3d32fa2 100644
--- a/src/pages/rss.xml.js
+++ b/src/pages/rss.xml.js
@@ -26,7 +26,7 @@ export async function get(context) {
 			lang: post.data.lang,
 			// Compute RSS link from post `slug`
 			// This example assumes all posts are rendered as `/blog/[slug]` routes
-			link: `/${post.data.type}/${post.slug}/`,
+			link: `/${post.data.type}/${post.data.permalink}/`,
 		})),
 		// (optional) inject custom xml
 		customData: `<language>fr-fr</language>`,
diff --git a/src/styles/global/fonts.css b/src/styles/global/fonts.css
index 8741888..0ceceda 100644
--- a/src/styles/global/fonts.css
+++ b/src/styles/global/fonts.css
@@ -19,13 +19,6 @@
 	font-style: normal;
 	font-display: swap;
 }
-@font-face {
-	font-family: "recoleta";
-	src: url("../../fonts/recoleta/Recoleta-SemiBold.woff2") format("woff2");
-	font-weight: 600;
-	font-style: normal;
-	font-display: swap;
-}
 
 /*
 * reduces Cumulative Layout Shift
diff --git a/src/styles/global/global-styles.css b/src/styles/global/global-styles.css
index 237d253..89438b7 100644
--- a/src/styles/global/global-styles.css
+++ b/src/styles/global/global-styles.css
@@ -126,9 +126,6 @@ ol:not([role="list"]) > li + li {
 	color: var(--color-blue);
 	background-color: var(--color-white);
 }
-.btn:visited {
-	color: var(--color-white);
-}
 
 button[disabled] {
 	cursor: not-allowed;
@@ -228,11 +225,3 @@ blockquote code {
 .content pre[class*="language-"] {
 	white-space: pre-wrap;
 }
-
-/* .astro-code .filename {
-	margin: 0.5rem 0;
-	display: block;
-	font-family: var(--font-code);
-	font-size: 1.4rem;
-	text-align: right;
-} */
diff --git a/src/styles/global/reset.css b/src/styles/global/reset.css
index 9f09313..89da684 100644
--- a/src/styles/global/reset.css
+++ b/src/styles/global/reset.css
@@ -123,7 +123,17 @@ a:not([class]) {
 }
 
 /* Make it clear that interactive elements are interactive */
-:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
+:where(
+		a[href],
+		area,
+		button,
+		input,
+		label[for],
+		select,
+		summary,
+		textarea,
+		[tabindex]:not([tabindex*="-"])
+	) {
 	cursor: pointer;
 	touch-action: manipulation;
 }
@@ -145,11 +155,17 @@ a:not([class]) {
 	}
 }
 :where(:not(:active)):focus-visible {
-	outline-offset: 5px;
+	outline-offset: 2px;
 }
 
 /* Make sure users can't select button text */
-:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"]),
+:where(
+		button,
+		button[type],
+		input[type="button"],
+		input[type="submit"],
+		input[type="reset"]
+	),
 :where(input[type="file"])::-webkit-file-upload-button,
 :where(input[type="file"])::file-selector-button {
 	-webkit-tap-highlight-color: transparent;
@@ -159,7 +175,13 @@ a:not([class]) {
 }
 
 /* Disabled cursor for disabled buttons */
-:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"])[disabled] {
+:where(
+		button,
+		button[type],
+		input[type="button"],
+		input[type="submit"],
+		input[type="reset"]
+	)[disabled] {
 	cursor: not-allowed;
 }
 
diff --git a/src/styles/vendor/one-dark-pro.css b/src/styles/vendor/one-dark-pro.css
index c840b55..9eba90b 100644
--- a/src/styles/vendor/one-dark-pro.css
+++ b/src/styles/vendor/one-dark-pro.css
@@ -1,5 +1,6 @@
 code[class*="language-"],
-pre[class*="language-"] {
+pre[class*="language-"],
+:not(pre) > code {
 	color: #abb2bf;
 	background: none;
 	font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
@@ -33,10 +34,13 @@ pre[class*="language-"] {
 pre[class*="language-"] {
 	background: #282c34;
 }
-:not(pre) > code[class*="language-"] {
-	padding: 0.1em;
-	border-radius: 0.3em;
+:not(pre) > code[class*="language-"],
+:not(pre) > code {
+	padding: 0.2em;
 	white-space: normal;
+	color: var(--color-dark);
+	border-radius: 0.3em;
+	background-color: var(--color-light-grey);
 }
 pre[class*="language-"]::selection,
 pre[class*="language-"] ::selection,