feat: harmonisation charte OKI dark/light, command bar, local-first stats & SEO

app/src/lib/components/WikiFiche.svelte

@@ -110,36 +110,46 @@
 
 <style>
 	.panneau {
-		border-radius: var(--oki-radius);
+		border-radius: var(--radius-md);
 		padding: 1.1rem 1.25rem;
 		box-shadow: var(--oki-ombre);
 	}
 
 	.chargement {
-		background: var(--oki-blanc);
-		color: var(--oki-encre-doux);
+		background: var(--noir-profond);
+		color: var(--muted);
 		text-align: center;
+		border: 1px solid var(--line);
 	}
 
-	/* Cas A : vert doux, apaisé */
+	/* Cas A : fiche existante — liseré vert OKI */
 	.cas-a {
-		background: var(--oki-vert-doux);
-		border: 1.5px solid var(--oki-vert-clair);
+		background: var(--card-bg);
+		border: 1px solid var(--line);
+		border-left: 4px solid var(--vert-oki);
+		color: var(--blanc-creme);
 	}
 
 	.cas-a h2 {
 		margin: 0 0 0.3rem;
-		font-size: 1.2rem;
+		font-size: 1.25rem;
 	}
 
 	.cas-a h2 a {
-		color: var(--oki-vert);
+		color: var(--blanc-creme);
+		text-decoration: none;
+	}
+
+	.cas-a h2 a:hover {
+		color: var(--or-oki);
+		text-decoration: underline;
 	}
 
 	.cas-a .ton {
 		margin: 0 0 0.6rem;
 		font-weight: 600;
-		color: var(--oki-vert-clair);
+		color: var(--vert-oki);
+		font-size: 0.9rem;
 	}
 
 	.cas-a img {
@@ -147,28 +157,40 @@
 		width: 96px;
 		height: auto;
 		margin: 0 0 0.5rem 0.8rem;
-		border-radius: var(--oki-radius-petit);
+		border-radius: var(--radius-sm);
+		border: 1px solid var(--line);
 	}
 
 	.cas-a .extrait {
 		margin: 0 0 0.6rem;
+		line-height: 1.55;
+		color: var(--blanc-creme);
 	}
 
 	.lien-wiki {
-		color: var(--oki-bleu);
-		font-weight: 650;
+		color: var(--or-oki);
+		font-weight: 700;
+		text-decoration: none;
+		display: inline-block;
+		margin-top: 0.3rem;
 	}
 
-	/* Cas B : teinte sable/orangée distincte, icône spécifique */
+	.lien-wiki:hover {
+		text-decoration: underline;
+	}
+
+	/* Cas B : lacune documentaire — liseré or OKI, teinte distincte */
 	.cas-b {
 		background: var(--oki-lacune-fond);
-		border: 2px solid var(--oki-lacune-bord);
+		border: 1.5px solid var(--or-oki);
+		border-left: 5px solid var(--or-oki);
+		color: var(--blanc-creme);
 	}
 
 	.cas-b h2 {
 		margin: 0 0 0.5rem;
 		font-size: 1.25rem;
-		color: #8a5a00;
+		color: var(--or-oki);
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
@@ -180,23 +202,40 @@
 		justify-content: center;
 		width: 1.6rem;
 		height: 1.6rem;
-		border: 2.5px dashed var(--oki-lacune-bord);
+		border: 2px dashed var(--or-oki);
 		border-radius: 50%;
 		font-size: 1rem;
+		color: var(--or-oki);
 	}
 
 	.cas-b .texte {
 		margin: 0 0 0.9rem;
-		font-size: 1.02rem;
+		font-size: 0.98rem;
+		line-height: 1.55;
+		color: var(--blanc-creme);
 	}
 
 	.btn-cta {
-		background: var(--oki-lacune-bord);
-		color: #fff;
+		background: var(--or-oki);
+		color: #0d0d0d;
+		font-weight: 700;
+		font-family: var(--font-display);
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
+		padding: 0.65rem 1.1rem;
+		border-radius: var(--radius-sm);
+		text-decoration: none;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+	}
+
+	:global(html.light-theme) .btn-cta {
+		color: #ffffff;
 	}
 
 	.btn-cta:hover {
-		background: #b98a2f;
+		background: var(--or-clair);
 	}
 
 	.ctas {
@@ -207,18 +246,28 @@
 	}
 
 	.lien-wikidata {
-		color: var(--oki-bleu);
+		color: var(--or-oki);
 		font-weight: 650;
+		text-decoration: none;
+	}
+
+	.lien-wikidata:hover {
+		text-decoration: underline;
 	}
 
 	.guide {
 		margin: 0.8rem 0 0;
 		font-size: 0.88rem;
-		color: var(--oki-encre-doux);
+		color: var(--muted);
 	}
 
 	.guide a {
-		color: var(--oki-bleu);
+		color: var(--or-oki);
 		font-weight: 600;
+		text-decoration: none;
+	}
+
+	.guide a:hover {
+		text-decoration: underline;
 	}
 </style>