design : accueil console seul, vrai §, curseurs animés, statuts, lecteur

- accueil : la console devient l'accueil unique (variantes B/C, sélecteur
  et ancien accueil retirés) ; curseurs qui montent de l'asservissement et
  dérivent seuls, un axe mis en avant à tour de rôle, arrêt au clic,
  immobiles en prefers-reduced-motion ; « AUTONOMIE » devant chaque axe,
  leviers mis en valeur, ligne des trois autonomies en couleurs
- logo : § de Playfair Display (SIL OFL) vectorisé, composant partagé
  UiSectionSign (en-tête, page événement) + favicon.svg
- UiStatusBadge (production / développement / gestation) sur l'accueil,
  les pages d'axe et les pages projet
- liens libreDecision / SejeteralO fixés sur la prod (plus de repli localhost)
- logiciel libre : bouton v1 dans la carte projet en tête de page
- couverture du livre : recadrage corrigé (BookSection)
- texte courant en Public Sans (zéros non barrés)
- lecteur : la pastille persistante ne masque plus la navigation du
  BookPlayer ; lecture directe du MP3 (les .ogg n'existent pas : 404)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Yvv
2026-09-29 05:59:33 +02:00
co-authored by Claude Opus 5.5
parent 4d8fe4895d
commit 201cfbbb50
33 changed files with 416 additions and 2100 deletions
+212
View File
@@ -0,0 +1,212 @@
<template>
<div class="va">
<!-- Hero : the headline, and the three cursors to push -->
<section class="va-hero">
<HomeShadoks />
<div class="container-content va-hero-grid">
<div class="va-intro">
<h1 class="va-h1">
<span class="va-h1-a">{{ heading[0] }}</span>
<span class="va-h1-b">{{ heading[1] }}</span>
</h1>
<p class="va-axes">
<template v-for="(seg, i) in axesLine" :key="i">
<span v-if="seg.hue" class="va-axes-word" :style="{ '--hue': `var(${seg.hue})` }">{{ seg.text }}</span>
<template v-else>{{ seg.text }}</template>
</template>
</p>
<p class="va-means">{{ heading[4] }}</p>
<p v-if="hero.approach" class="va-approach">{{ hero.approach }}</p>
</div>
<div class="va-console">
<p class="va-console-title">{{ heading[2] }}</p>
<HomeConsole
v-model="active"
:axes="axes"
:prefix="consoleLabels?.prefix"
:top-label="consoleLabels?.top"
:bottom-label="consoleLabels?.bottom"
:stacks="bouquet?.inService"
:stacks-to="lpk?.to"
:stacks-label="lpk ? `En service chez ${lpk.name} :` : 'En service :'"
/>
</div>
</div>
</section>
<!-- Pourquoi -->
<section class="va-band">
<div class="container-content">
<HomeCitations :lines="hero.citations ?? []" />
</div>
</section>
<!-- Le format -->
<section class="va-section">
<div class="container-content">
<HomeFormat
:format="format"
:book="book"
:evenement="evenement"
:hero="hero"
@open-player="$emit('open-player')"
@open-pdf="$emit('open-pdf')"
/>
</div>
</section>
<!-- La boîte à outils -->
<section class="va-section va-section--tools">
<div class="container-content">
<h2 class="va-h2">{{ toolboxTitle }}</h2>
<HomeToolbox
:axes="axes"
:lpk="lpk"
:bouquet="bouquet"
:gratewizard="gratewizard"
anchors
@open-player="$emit('open-player')"
@open-pdf="$emit('open-pdf')"
/>
</div>
</section>
</div>
</template>
<script setup lang="ts">
import type { AxisKey } from '~/composables/useHomeData'
defineEmits<{
'open-player': []
'open-pdf': []
}>()
const { hero, axes, lpk, bouquet, evenement, book, format, gratewizard, consoleLabels, toolboxTitle } = await useHomeData()
const heading = computed<string[]>(() => hero.value.heading ?? [])
// « Autonomie numérique, économique, citoyenne. » — each axis word in its own hue
const AXIS_WORDS: Record<string, string> = {
numérique: '--axis-num',
économique: '--axis-eco',
citoyenne: '--axis-cit',
}
const axesLine = computed(() =>
(heading.value[3] ?? '')
.split(/(numérique|économique|citoyenne)/)
.filter(Boolean)
.map(text => ({ text, hue: AXIS_WORDS[text] })))
const active = ref<AxisKey>('numerique')
</script>
<style scoped>
.va-hero {
position: relative;
overflow: hidden;
padding: clamp(2.5rem, 6vw, 5rem) 1rem clamp(2.5rem, 5vw, 4rem);
}
.va-hero-grid {
position: relative;
z-index: 1;
display: grid;
gap: 2.5rem;
align-items: center;
}
@media (min-width: 1024px) {
.va-hero-grid {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 4rem;
}
}
.va-h1 {
margin: 0;
display: flex;
flex-direction: column;
font-family: var(--font-display);
letter-spacing: -0.035em;
line-height: 0.98;
}
.va-h1-a {
font-weight: 800;
font-size: clamp(2.4rem, 6.4vw, 4.6rem);
color: hsl(var(--color-text));
}
.va-h1-b {
margin-top: 0.3rem;
font-weight: 400;
font-size: clamp(1.6rem, 3.8vw, 2.7rem);
letter-spacing: -0.025em;
color: hsl(var(--color-text) / 0.55);
}
.va-axes {
margin: 1.75rem 0 0;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.3rem, 2.6vw, 1.85rem);
letter-spacing: -0.025em;
line-height: 1.15;
color: hsl(var(--color-text));
}
.va-axes-word {
color: hsl(var(--hue));
}
.va-means {
margin: 0.35rem 0 0;
font-family: var(--font-display);
font-style: italic;
font-size: 1.05rem;
color: hsl(var(--color-text) / 0.6);
}
.va-approach {
margin: 1.75rem 0 0;
max-width: 26rem;
font-size: 1rem;
line-height: 1.5;
color: hsl(var(--color-text) / 0.8);
}
.va-approach::after {
content: ' ↓';
color: hsl(var(--color-primary));
}
@media (min-width: 1024px) {
.va-approach::after { content: ' →'; }
}
.va-console-title {
margin: 0 0 0.75rem;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.1rem;
color: hsl(var(--color-accent));
}
.va-band {
padding: clamp(2.5rem, 6vw, 4.5rem) 1rem;
background: hsl(var(--color-surface) / 0.55);
}
.va-section {
padding: clamp(3rem, 7vw, 5.5rem) 1rem 0;
}
.va-h2 {
margin: 0 0 1.5rem;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.75rem, 4.2vw, 2.75rem);
letter-spacing: -0.03em;
line-height: 1.05;
color: hsl(var(--color-text));
}
</style>