From 4f920175fd5e366879fa5c83736f7625380c4c49 Mon Sep 17 00:00:00 2001
From: Valentin ROBIN <valentin_rbn@Valentins-MacBook-Pro-2.local>
Date: Wed, 26 Aug 2026 15:28:19 +0200
Subject: [PATCH] =?UTF-8?q?Redesign=20l'en-t=C3=AAte=20de=20la=20Corne=20d?=
 =?UTF-8?q?'Abondance,=20comme=20sur=20Icare?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le bouton Classement vivait juste au-dessus du jeu, séparé par un simple gap — pas assez pour la preview de la prochaine pièce (qui grandit vers le haut avec le palier annoncé) sur les gros paliers, d'où le chevauchement signalé. Titre et Classement passent sur une seule ligne compacte en haut de page (même style qu'Icare), avec un espacement généreux avant le jeu.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/app/corne/corne-view.tsx | 32 +++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/app/corne/corne-view.tsx b/src/app/corne/corne-view.tsx
index bb2f09c..d7cbc20 100644
--- a/src/app/corne/corne-view.tsx
+++ b/src/app/corne/corne-view.tsx
@@ -122,25 +122,27 @@ export function CorneView({
 
   return (
     <div className="mx-auto flex w-full max-w-2xl flex-col items-center gap-4 px-4 py-8">
-      <div className="text-center">
-        <h1 className="font-heading text-2xl tracking-[0.1em] text-gold-bright uppercase">
+      {/* Même en-tête compact que /icare (titre + Classement sur une seule
+          ligne) : l'ancien bouton isolé juste au-dessus du jeu pouvait se
+          faire chevaucher par la preview de la prochaine pièce sur les gros
+          paliers — ici il est tout en haut, loin du jeu, comme sur Icare. */}
+      <div className="flex w-full items-center justify-between">
+        <h1 className="font-heading text-sm tracking-[0.15em] text-gold-bright uppercase">
           La Corne d&apos;Abondance
         </h1>
-        <p className="font-serif text-sm text-marble/60 italic">
-          Fais fusionner les Citoyens jusqu&apos;au débordement.
-        </p>
+        <button
+          type="button"
+          onClick={() => setShowRanking(true)}
+          className="flex items-center gap-1.5 rounded-md border border-gold/30 px-3 py-1.5 text-xs font-medium text-marble/80 uppercase tracking-wide transition hover:bg-gold/10"
+        >
+          <IconHorn className="h-4 w-4" />
+          Classement
+        </button>
       </div>
 
-      <button
-        type="button"
-        onClick={() => setShowRanking(true)}
-        className="flex items-center gap-1.5 rounded-md border border-gold/30 px-3 py-1.5 text-xs font-medium text-marble/80 uppercase tracking-wide transition hover:bg-gold/10"
-      >
-        <IconHorn className="h-4 w-4" />
-        Classement
-      </button>
-
-      <MelonGame citizens={citizens} onStart={handleStart} onFinish={handleFinish} />
+      <div className="mt-10">
+        <MelonGame citizens={citizens} onStart={handleStart} onFinish={handleFinish} />
+      </div>
 
       {ownBestScore !== null && (
         <p className="text-center font-heading text-sm tracking-wide text-marble">