# Identité graphique — Yggdrasil Indoor 2026

Site cousin de Fort Fort Lointain (fflv2) : même ossature technique (pages HTML
autonomes dans `resources/site/`, header unifié via `public/site/header.css`,
scripts `site-dynamic.js` + widget chat), mais identité propre.

## Positionnement visuel

FFL = fête médiévale **en plein air, de jour** → fond crème, teintes chaudes.
Indoor = festival **en intérieur (Eurexpo), ambiance nocturne/feutrée** → fond
bleu nuit dominant, or et cuivre en accents. Thème 2026 : **La cité des 1000
dragons** (Festum Draconum).

## Palette (extraite des couleurs globales Elementor du WordPress)

```css
:root{
  --night:#0b1e2d;   /* fond principal (bleu nuit profond) */
  --night2:#132f45;  /* sections alternées / cartes */
  --steel:#1c415f;   /* bleu intermédiaire (bordures, hovers) */
  --gold:#cfa247;    /* accent principal (or) */
  --gold-l:#e6b65c;  /* or clair (hover, titres sur sombre) */
  --copper:#c47a3a;  /* cuivre (CTA secondaires, braises) */
  --parch:#f3ead8;   /* parchemin — texte clair et rares sections claires */
  --ink:#22201d;     /* texte sur sections claires */
  --shadow:0 14px 38px rgba(4,10,16,.45);
  --maxw:1180px;
}
```

Règles : fond de page `--night`, texte courant `#dfe7ee` / `--parch`, titres
sur sombre en blanc ou `--gold-l`. Les CTA principaux utilisent `--gold`
(texte `--night`), les secondaires `--copper` ou ghost. Au plus **une** section
claire (`--parch`) par page pour respirer.

## Typographies (Google Fonts)

- Display (h1 hero) : **Cinzel Decorative** 700/900
- Titres (h2/h3) : **Cinzel** 600–900
- Texte : **Poppins** 400/500/600/700

```html
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Cinzel:wght@600;700;800;900&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
```

## Marque

- Logo : arbre Yggdrasil blanc `/img/indoor/logo-blanc.png` (dans le header,
  hauteur ~40px, remplace la couronne ♛ de FFL).
- Libellé header : `<small>Festival Yggdrasil</small><b>Indoor</b>`.
- Dates : **7 & 8 mars 2026 · Eurexpo Lyon** (Avenue Louis Blériot, Chassieu).
- Billetterie : liens avec attribut `data-billet` (URL injectée par
  `site-dynamic.js`; défaut : https://www.billetweb.fr/festival-yggdrasil-2026).

## Navigation (reprend l'arborescence du WordPress)

```
Accueil (/)
Le Royaume ▾      → /le-theme, /legende, /univers
Les Personnages ▾ → /invites, /createurs, /troupes, /trublions, /tatoueurs, /personnages, /photographes
Votre Quête ▾     → /programme, /plan, /jeu-des-clefs, /infos, /horaires
CTA « Réserver » (data-billet) + dates
```

Le menu « Pro » est injecté par `site-dynamic.js` (liens gérés au back-office).

## Pages et fichiers sources

| URL | Fichier resources/site/ | Source _scrape/content/ |
|---|---|---|
| `/` | `Site_INDOOR_2026.html` | `page--homepage.html` |
| `/le-theme` | `Le_theme_INDOOR_2026.html` | `page--le-theme-2026.html` |
| `/legende` | `Legende_INDOOR_2026.html` | `page--la-legende-du-festival.html` |
| `/univers` | `Univers_INDOOR_2026.html` | `page--les-univers-a-explorer.html` |
| `/invites` | `Invites_INDOOR_2026.html` | `page--invites-et-figures-legendaires.html` |
| `/createurs` | `Createurs_INDOOR_2026.html` | `page--les-createurs.html` |
| `/troupes` | `Troupes_INDOOR_2026.html` | `page--les-troupes-danimations.html` |
| `/trublions` | `Trublions_INDOOR_2026.html` | `page--trublions-et-groupes-de-danses-amateur.html` |
| `/tatoueurs` | `Tatoueurs_INDOOR_2026.html` | `page--les_tatoueurs.html` |
| `/personnages` | `Personnages_INDOOR_2026.html` | `page--cosplay-createurs-de-personnages.html` |
| `/photographes` | `Photographes_INDOOR_2026.html` | `page--les-photographes.html` |
| `/programme` | `Programme_INDOOR_2026.html` | `page--le-programme-des-festivites.html` |
| `/plan` | `Plan_INDOOR_2026.html` | `page--le-plan-du-royaume.html` |
| `/jeu-des-clefs` | `Jeu_des_clefs_INDOOR_2026.html` | `page--le-jeu-des-clefs.html` |
| `/infos` | `Infos_INDOOR_2026.html` | `page--infos-pratiques-et-conseils-aux-voyageurs.html` |
| `/horaires` | `Horaires_INDOOR_2026.html` | `page--portes-horaires.html` |

Pages WordPress **non reprises** : `page-d-exemple`, `home`, `home2`,
`link-in-bio`, `booking`, `classes`, `about`, `iframe-de-photographes`,
`contact` (coordonnées reprises dans `/infos` et le footer).

## Structure obligatoire de chaque page

1. `<!DOCTYPE html>` … `<head>` : title + meta description propres à la page,
   Google Fonts ci-dessus, Material Symbols, `<style>` avec les tokens `:root`
   ci-dessus puis le CSS de la page, **puis** `<link rel="stylesheet" href="/site/header.css">`.
2. Header/nav : structure identique à FFL (classes `.nav`, `.brand`, `.ddwn`,
   `.burger`, `#mnav`) avec la navigation Indoor ci-dessus — copier le bloc du
   gabarit de référence `Site_INDOOR_2026.html` et adapter les classes `active`.
3. Hero avec image d'en-tête (`/img/indoor/...`) ou dégradé nuit.
4. Sections de contenu (reprendre les textes du WordPress siphonné, en les
   resserrant si besoin ; ne rien inventer).
5. Footer commun (voir gabarit de référence) : marque + Explorer + Réserver,
   mentions `© 2026 Festival Yggdrasil · indoor.festyggdrasil.fr`.
6. Scripts en fin de body : JS inline burger/scroll (copier du gabarit), puis
   `<script src="/widget/chat-widget.js" data-api="/api/v1/chat" data-name="Yggi" defer></script>`
   et `<script src="/site/site-dynamic.js" defer></script>`.
7. La page Infos garde un conteneur `id="faq-list"` (FAQ dynamique).

## Kit éditorial « Découvrir » (`public/site/decouvrir.css`)

Inspiré des pages Découvrir de fflv2, décliné en identité Indoor. Chargé après
`header.css` (`<link rel="stylesheet" href="/site/decouvrir.css">`). Rythme
type d'une page de contenu :

1. **`ghero`** — hero pleine image : `<img class="hero-bg">` en fond +
   `.ghero-inner` (badge, `<h1>` Cinzel Decorative, phrase d'accroche, 2 CTA
   dont un `data-billet`). Voile dégradé nuit automatique (`::after`).
2. **`sec mani`** — manifeste : `.lead` (grande phrase Cinzel, `.hl` doré) +
   `.lead-sub` (sous-texte).
3. **`sec` + `.diff`** — 4 cartes valeur à icône (`.card` > `.ic .msym`, h3, p).
4. **Contenu propre de la page** (grilles, annuaire `.dir`, listes…).
5. **`qband`** — bandeau citation : `.q` (avec `.g` doré) + `<cite>`.
   ⚠️ Utiliser uniquement les textes de lore du festival (siphonnés) ou des
   accroches maison — jamais de citation littéraire externe sous copyright.
6. **`cta`** — appel final (eyebrow, h2, p, bouton `data-billet`, `.mini`).
7. **`.mobile-cta`** en fin de body — bouton billetterie collant sur mobile :
   `<div class="mobile-cta"><a class="btn btn-primary" data-billet>…</a></div>`.

Chaque hero utilise une image large copiée dans `public/img/indoor/`
(`hero-<page>.jpg`), en `loading="eager"`.

## Images

- Toutes les images utilisées sont copiées depuis `_scrape/images/` vers
  `public/img/indoor/` (jamais de hotlink vers le WordPress).
- Préférer les fichiers sans suffixe `-WxH` (originaux) mais éviter les
  fichiers > 1 Mo pour les vignettes (prendre une variante intermédiaire si
  l'original est trop lourd).