Migration vers architecture Svelte + Kirby inspirée de design-to-pack

- Mise en place de Svelte 4 avec Vite pour le frontend (SPA)
- Simplification des templates PHP (header/footer minimalistes)
- Création de templates JSON pour API (home, about, expertise, portfolio, jouer, game, blog, article, project)
- Ajout d'un controller de site pour définir genericData globalement
- Structure des stores Svelte (page, navigation, locale, site)
- Router avec navaid pour navigation SPA et interception des liens
- Composants layout (Header, Footer, Cursor) et vues de base
- Build Vite vers assets/dist/ (index.js/css)
- Header PHP détecte assets/dist pour basculer dev/prod

Architecture fonctionnelle de base établie, à améliorer et compléter.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/views/About.svelte

@@ -0,0 +1,177 @@
+<script>
+  import { fade } from 'svelte/transition'
+
+  export let data
+
+  $: intro = data?.intro || {}
+  $: mission = data?.mission || {}
+  $: manifesto = data?.manifesto || {}
+  $: team = data?.team || {}
+</script>
+
+<div class="about" transition:fade>
+  <section class="about__intro">
+    <h1>{intro.title || data?.title}</h1>
+    {#if intro.text}
+      <p class="about__intro-text">{@html intro.text}</p>
+    {/if}
+  </section>
+
+  {#if mission.text}
+    <section class="about__section">
+      <h2>{mission.title}</h2>
+      <div class="about__section-content">
+        {@html mission.text}
+      </div>
+    </section>
+  {/if}
+
+  {#if manifesto.text}
+    <section class="about__section">
+      <h2>{manifesto.title}</h2>
+      <div class="about__section-content">
+        {@html manifesto.text}
+      </div>
+    </section>
+  {/if}
+
+  {#if team.members && team.members.length > 0}
+    <section class="about__team">
+      <h2>{team.title}</h2>
+
+      <div class="about__team-grid">
+        {#each team.members as member}
+          <article class="team-card">
+            {#if member.photo}
+              <div class="team-card__photo">
+                <img src={member.photo} alt={member.name} />
+              </div>
+            {/if}
+
+            <div class="team-card__info">
+              <h3>{member.name}</h3>
+              <p class="team-card__role">{member.role}</p>
+
+              {#if member.bio}
+                <p class="team-card__bio">{member.bio}</p>
+              {/if}
+            </div>
+          </article>
+        {/each}
+      </div>
+    </section>
+  {/if}
+</div>
+
+<style>
+  .about {
+    min-height: 100vh;
+    padding: 8rem 2rem 4rem;
+    color: #fff;
+  }
+
+  .about__intro {
+    max-width: 1200px;
+    margin: 0 auto 6rem;
+    text-align: center;
+  }
+
+  .about__intro h1 {
+    font-size: clamp(2.5rem, 6vw, 5rem);
+    margin-bottom: 2rem;
+  }
+
+  .about__intro-text {
+    font-size: clamp(1.1rem, 2vw, 1.5rem);
+    opacity: 0.9;
+    max-width: 900px;
+    margin: 0 auto;
+  }
+
+  .about__section {
+    max-width: 1200px;
+    margin: 4rem auto;
+  }
+
+  .about__section h2 {
+    font-size: clamp(2rem, 4vw, 3rem);
+    margin-bottom: 2rem;
+    color: #04fea0;
+  }
+
+  .about__section-content {
+    line-height: 1.8;
+    opacity: 0.9;
+  }
+
+  .about__team {
+    max-width: 1400px;
+    margin: 6rem auto 0;
+  }
+
+  .about__team h2 {
+    font-size: clamp(2rem, 4vw, 3rem);
+    margin-bottom: 3rem;
+    text-align: center;
+    color: #04fea0;
+  }
+
+  .about__team-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 2rem;
+  }
+
+  .team-card {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 2rem;
+    border-radius: 8px;
+    transition: transform 0.3s, border-color 0.3s;
+  }
+
+  .team-card:hover {
+    transform: translateY(-5px);
+    border-color: #04fea0;
+  }
+
+  .team-card__photo {
+    margin-bottom: 1.5rem;
+  }
+
+  .team-card__photo img {
+    width: 100%;
+    height: 250px;
+    object-fit: cover;
+    border-radius: 4px;
+  }
+
+  .team-card h3 {
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .team-card__role {
+    color: #04fea0;
+    font-size: 0.9rem;
+    margin-bottom: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .team-card__bio {
+    font-size: 0.95rem;
+    line-height: 1.6;
+    opacity: 0.8;
+  }
+
+  @media (max-width: 768px) {
+    .about {
+      padding: 6rem 1rem 3rem;
+    }
+
+    .about__team-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>