NSY — Cabinet de conseil technique & création web propulsée par l'IA

# NSY — Cabinet de conseil technique & création web propulsée par l'IA

[![Site](https://img.shields.io/badge/site-www.nsy.fr-00E5FF)](https://www.nsy.fr)
[![Hébergement](https://img.shields.io/badge/h%C3%A9bergement-Infomaniak-1AB7EA)](https://www.infomaniak.com)

🇫🇷 **Français** · [🇬🇧 English](README.en.md)

Site **multi-pages bilingue (FR/EN)** pour **NSY** (*New Software Yard*), société indépendante fondée par Cédric Barme en 2018. Positionnement double : missions techniques senior pour la finance / assurance, et création de sites web propulsés par l'IA pour les PME/ETI en transition.

## Direction artistique

Design **"Cyber Cabinet"** — palette navy profond + cyan électrique + accent orange du logo. Typographie : Space Grotesk (display) + Manrope (corps) + JetBrains Mono (annotations).

| Couleur | Hex | Usage |
|---|---|---|
| `--bg-1` | `#0A0F1C` | Fond principal |
| `--accent` | `#00E5FF` | Cyan électrique — CTA, liens actifs, glow, wireframe 3D |
| `--warm` | `#F08A2C` | Orange du logo — points d'accent rares |
| `--fg-0` / `--fg-1` / `--fg-2` | `#F2F6FF` → `#8993AF` | Échelle de gris-bleu du texte |

## Stack

- **Front** : HTML5 + CSS3 + JavaScript vanilla — zéro framework, zéro bundler
- **Back (formulaire)** : PHP + [PHPMailer](https://github.com/PHPMailer/PHPMailer) sur SMTP Infomaniak, anti-bot [Cloudflare Turnstile](https://www.cloudflare.com/products/turnstile/)
- **3D temps réel** : [`<model-viewer>`](https://modelviewer.dev/) 4.2.0 (Three.js sous le capot) pour le wireframe interactif
- **Pipeline 3D (build-time)** : Blender 4.x headless + [glTF-Transform](https://gltf-transform.dev/) + Draco — voir [§ Pipeline wireframe](#pipeline-wireframe-3d)
- **Google Fonts** : Space Grotesk, Manrope, JetBrains Mono
- **CSS custom properties** + `@property` pour les transitions interpolables (CTA banner gradient)

## Structure du site

Site **multi-pages** (une page par rubrique du menu) — l'accueil est une **landing** qui renvoie vers les pages dédiées.

| Page | URL FR ↔ EN | Contenu |
|---|---|---|
| **Accueil** | `index.html` ↔ `index-en.html` | Landing : hero + marquee + **news du journal** (→ Journal, avec vignette animée) + aperçu des 2 offres (→ Services) + teaser profil (→ À propos) + références + bandeau CTA (→ Contact) |
| **Services** | `services.html` ↔ `services-en.html` | 2 cartes détaillées (conseil / web IA) + méthode (4 étapes) + valeurs + aperçu 3D (→ Conception 3D) |
| **Journal** | `blog.html` ↔ `blog-en.html` (EN : « Insights ») | Retours d'expérience (articles bilingues, flux RSS `feed.xml`/`feed-en.xml`) ; teaser des 5 derniers articles sur l'accueil (le plus récent en premier) ; boutons « Lire sur LinkedIn / Facebook » en fin d'article vers les posts publiés |
| **Réalisations** | `realisations.html` ↔ `portfolio.html` | **Trois sites, trois rôles** — Le Cerf Thym (le client, avec son avis 5/5 sourcé), PRV Concept (le laboratoire, avec un bloc de transparence : le fondateur de NSY préside l'association) et NSY lui-même (la démonstration, code public). Vidéos de parcours intégrées (YouTube), puis un bloc **« Ordres de grandeur »** : des fourchettes indicatives en € HT **par type de projet**, jamais par client |
| **À propos** | `a-propos.html` ↔ `about.html` | Profil Cédric Barme (bouton « Me suivre sur LinkedIn »), signaux, parcours, **récit « Pourquoi NSY existe »**, principes |
| **Pourquoi NSY ?** | `pourquoi-nsy.html` ↔ `why-nsy.html` | La philosophie : interlocuteur unique, modèle « en prise directe », partenariat ESN (grands comptes), 3 clients max — FAQPage JSON-LD, liée depuis le footer et À propos |
| **Contact** | `contact.html` ↔ `contact-en.html` | Formulaire (PHP) + canaux directs + demande de faisabilité |
| **Conception 3D** | `conception-3d.html` ↔ `3d-design.html` | Modèle wireframe Renault interactif + animation YouTube (démonstrateurs 3D) |

Le formulaire de contact reste servi par `contact.php` (inchangé). La nav du haut a **6 liens** (Accueil, Journal, Services, Réalisations, À propos, Contact) ; Conception 3D et FAQ sont accessibles depuis le footer.

Pages annexes : **FAQ** `faq.html` / `faq-en.html`, **8 paires de pages piliers** (expertises & offres, vague 2 GEO), **articles du journal** (4 : « SEO vs GEO », « Un chatbot IA branché sur un forum », « Créer son site avec l'IA en un week-end », « Des téraoctets au mégaoctet » — vignettes animées), **5 pages villes** en paires FR/EN (Orléans · Tours · Paris · Lyon · Bordeaux) + **consultant technique Paris**, **offre refonte** `refonte-site-internet.html` / `website-redesign.html`, **questionnaire de faisabilité** `faisabilite.html` / `feasibility.html` (parcours **création ou refonte**), pages légales — **64 pages** au total.

## Bilingue (FR / EN)

Une page HTML par langue (pas de build, SEO propre), avec slugs **réellement traduits** :

| FR | EN |
|---|---|
| `index.html` (`/`) | `index-en.html` |
| `mentions-legales.html` | `legal-notice.html` |
| `confidentialite.html` | `privacy.html` |
| `rea

... (truncated)