WIP accueil : la voûte abrite les trois points (boîte à outils en tête), titre centré en deux lignes

Une clé i18n par ligne du titre (fr, en, es), jamais de <br> dans une chaîne.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/routes/+page.svelte

@@ -1,17 +1,28 @@
 <script lang="ts">
+  // The welcome (Yvv, 2026-11-02): the keystone arch, large enough to shelter the three points of
+  // the leitmotiv, the toolbox first; then the title, centred, broken after « possible ».
+  import sign from '$lib/assets/cle-de-voute.svg?raw';
   import GroupChoice from '$lib/components/GroupChoice.svelte';
   import { t } from '$lib/i18n/index.svelte';
   import { session } from '$lib/session.svelte';
+
+  const LEITMOTIV = ['home.leitmotiv.tools', 'home.leitmotiv.context', 'home.leitmotiv.process'] as const;
 </script>
 
 <div class="home">
   <header class="intro">
-    <h1>{t('home.title')}</h1>
-    <ul class="leitmotiv">
-      <li>{t('home.leitmotiv.context')}</li>
-      <li>{t('home.leitmotiv.process')}</li>
-      <li>{t('home.leitmotiv.tools')}</li>
-    </ul>
+    <div class="vault">
+      <span class="sign" aria-hidden="true">{@html sign}</span>
+      <ul class="leitmotiv">
+        {#each LEITMOTIV as key, i (key)}
+          <li style:--i={i}>{t(key)}</li>
+        {/each}
+      </ul>
+    </div>
+    <h1>
+      <span class="line">{t('home.title.line1')}</span>
+      <span class="line">{t('home.title.line2')}</span>
+    </h1>
   </header>
 
   {#if session.me}
@@ -28,56 +39,122 @@
   .home {
     max-width: 44rem;
     margin: 0 auto;
-    padding: clamp(3rem, 10vh, 6.5rem) clamp(1.2rem, 5vw, 3.5rem) 5rem;
+    padding: clamp(2rem, 7vh, 4.5rem) clamp(1.2rem, 5vw, 3.5rem) 5rem;
     display: grid;
     gap: clamp(2.4rem, 6vh, 3.6rem);
   }
-  .intro h1 {
-    font-family: var(--font-text);
-    font-weight: 500;
-    font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
-    letter-spacing: -0.015em;
-    line-height: 1.08;
-    font-variation-settings: 'opsz' 72;
-    max-width: 15ch;
-    text-wrap: balance;
+
+  /* The arch, drawn by the sign of the logo (stones in the ink of the mood, the keystone in
+     `--cle`), never tilted. Its box is the stone itself: 92 units wide (the base slab, x from
+     −46 to 46) and 59 high (y from −40, the top of the keystone, to 19, under the slab); the SVG's
+     own 3-unit margin spills out on every side. On a phone the arch reaches into the side padding,
+     0.75rem short of the screen's edges, so that the opening keeps as much room as it can. */
+  .vault {
+    --w: min(34rem, 100vw - 1.5rem);
+    container-type: inline-size;
+    position: relative;
+    width: var(--w);
+    margin-inline: calc(50% - var(--w) / 2);
+    aspect-ratio: 92 / 59;
+    color: var(--ink);
   }
-  /* The leitmotiv: three lines, each set on a small stone of the keystone's colour. */
+  .sign {
+    position: absolute;
+    inset: calc(-300% / 59) calc(-300% / 92);
+  }
+  .sign :global(svg) {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  /* The light under the vault: the opening (x from −18.5 to 18.5, from the keystone down to the
+     slab), its top a half circle, washed with the keystone's colour. */
+  .vault::before {
+    content: '';
+    position: absolute;
+    inset: calc(2150% / 59) calc(2750% / 92) calc(340% / 59);
+    border-radius: 50% 50% 0 0 / 54.25% 54.25% 0 0;
+    background: radial-gradient(
+      ellipse 75% 62% at 50% 60%,
+      color-mix(in srgb, var(--cle) 12%, transparent),
+      transparent
+    );
+  }
+
+  /* The three points, sheltered: centred in the opening (x from −19 to 19, a block centred on
+     y = −1), one line each. The type follows the arch (cqi): the longest line of the three
+     languages, 10.8 em, holds in the 38 units of the opening with room to spare. */
   .leitmotiv {
-    list-style: none;
-    margin: 1.4rem 0 0;
+    position: absolute;
+    inset-inline: calc(2700% / 92);
+    top: calc(3900% / 59);
+    translate: 0 -50%;
+    margin: 0;
     padding: 0;
+    list-style: none;
     display: grid;
-    gap: 0.2rem;
+    justify-items: center;
+    gap: 0.2em;
     font-family: var(--font-text);
     font-style: italic;
-    font-size: clamp(1.12rem, 1rem + 0.55vw, 1.4rem);
-    line-height: 1.45;
+    font-size: 3.55cqi;
+    line-height: 1.3;
     color: var(--ink-soft);
+    white-space: nowrap;
+    text-align: center;
   }
-  .leitmotiv li {
-    display: flex;
-    align-items: baseline;
-    gap: 0.7rem;
+
+  .intro h1 {
+    margin-top: clamp(1.4rem, 4vh, 2.4rem);
+    font-family: var(--font-text);
+    font-weight: 500;
+    font-size: min(3.3rem, 8.6vw);
+    letter-spacing: -0.015em;
+    line-height: 1.1;
+    font-variation-settings: 'opsz' 72;
+    text-align: center;
   }
-  .leitmotiv li::before {
-    content: '';
-    flex: none;
-    width: 0.62em;
-    height: 0.34em;
-    border-radius: 0.1em;
-    background: var(--cle);
-    opacity: 0.75;
-    translate: 0 -0.12em;
+  .line {
+    display: block;
+    text-wrap: balance;
   }
+
   .enter {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 0.6rem 1.2rem;
+    display: grid;
+    justify-items: center;
+    gap: 0.8rem;
+    text-align: center;
+  }
+  .enter .btn {
+    min-height: 2.75rem;
+    padding-inline: 1.4rem;
   }
   .enter p {
     font-size: 0.9rem;
     max-width: 34ch;
   }
+
+  /* The keystone sets the arch, then the three points come under it. */
+  @media (prefers-reduced-motion: no-preference) {
+    .sign :global(path[fill^='var(--cle']) {
+      transform-box: fill-box;
+      animation: settle 0.7s var(--ease) 0.1s backwards;
+    }
+    .leitmotiv li {
+      animation: appear 0.6s var(--ease) backwards;
+      animation-delay: calc(0.55s + var(--i) * 0.12s);
+    }
+  }
+  @keyframes settle {
+    from {
+      transform: translateY(-40%);
+      opacity: 0;
+    }
+  }
+  @keyframes appear {
+    from {
+      transform: translateY(0.4em);
+      opacity: 0;
+    }
+  }
 </style>