# AUXIOMA Web Agency — Silo SEO, contenu éditorial & expérience Three.js 2026

> Cahier éditorial SEO / Google Search 2026 + direction UX/UI Three.js  
> Version : octobre 2026 — refonte complète avec expérience 3D  
> Objectif : construire un site d'agence web utile aux prospects, techniquement compréhensible par Google et suffisamment riche en expérience réelle pour être exploitable dans la recherche classique comme dans les fonctionnalités génératives de Google.

---

## 1. Principes éditoriaux Google 2026 appliqués à tout le site

Ce document ne cherche pas à fabriquer une page pour chaque mot-clé. Chaque URL doit correspondre à un **besoin utilisateur distinct**, disposer d'une valeur propre et pouvoir exister même si Google n'existait pas.

### Règles communes

- Contenu **people-first** : écrire d'abord pour le prospect, pas pour répéter une requête.
- Apporter de l'expérience : choix techniques, arbitrages, limites, erreurs fréquentes, méthodologie, cas concrets.
- Une intention principale par page afin d'éviter la cannibalisation.
- Un `title` et un `H1` descriptifs, sans surpromesse.
- Employer naturellement le vocabulaire réellement utilisé par les clients.
- Utiliser de vrais liens HTML crawlables et des ancres descriptives.
- Relier pages mères, pages filles, expertises et réalisations lorsqu'un lien aide réellement le visiteur.
- Ajouter auteur/relecteur, présentation de l'agence et éléments vérifiables d'expertise lorsque pertinents.
- Illustrations originales : captures de projets, schémas d'architecture, extraits d'interfaces, vidéos de démonstration.
- Mobile, HTTPS, absence d'interstitiels intrusifs et bonnes performances.
- Viser de bons Core Web Vitals sans transformer le score en objectif éditorial.
- Données structurées uniquement lorsqu'elles correspondent au contenu visible.
- `Organization` au niveau de l'agence, `BreadcrumbList` dans la navigation hiérarchique, `LocalBusiness` uniquement si les informations locales réelles le justifient, `Article` pour les véritables articles.
- Les FAQ peuvent aider l'utilisateur, mais ne sont pas créées pour obtenir un rich result FAQ : Google a retiré cette fonctionnalité de Search en mai 2026.
- Ne pas produire automatiquement des dizaines de pages quasi identiques par ville, technologie ou variante de mot-clé.
- Pour AI Overviews / AI Mode : privilégier informations originales, expérience, démonstrations, précision, images/vidéos pertinentes et réponses suffisamment autonomes pour être comprises hors contexte.

### Gabarit SEO commun

Chaque page publiée devra prévoir :

- `title` unique ;
- meta description unique orientée clic (sans promesse de classement) ;
- un seul sujet principal clairement identifiable ;
- H1 descriptif ;
- introduction répondant rapidement à l'intention ;
- sections H2/H3 réellement utiles ;
- preuves / expérience / exemples ;
- CTA adapté au niveau de maturité du prospect ;
- liens internes contextuels ;
- fil d'Ariane ;
- images avec texte alternatif descriptif lorsqu'elles apportent une information ;
- canonical cohérente ;
- indexabilité vérifiée ;
- date de mise à jour lorsque celle-ci est utile au lecteur.

---

# 1 bis. Direction artistique et architecture Three.js globale

## Principe : un site 3D, mais jamais un site enfermé dans un canvas

L'identité AUXIOMA repose sur une **scène WebGL/Three.js présente sur l'ensemble du site**. La 3D n'est cependant pas utilisée pour remplacer les titres, paragraphes, liens, formulaires ou boutons. Le document HTML conserve toute l'information utile ; le canvas apporte profondeur, mouvement, continuité et narration.

Cette séparation répond à trois objectifs : rendre le contenu immédiatement lisible, préserver l'accessibilité et éviter de rendre l'exploration/indexation dépendante de l'exécution de la scène 3D.

## Univers visuel AUXIOMA

L'univers graphique représente un **réseau numérique vivant en construction** :

- grille spatiale profonde ;
- nœuds de données ;
- lignes et flux lumineux ;
- volumes architecturaux abstraits ;
- particules fines ;
- interfaces holographiques ;
- fragments de code abstraits, jamais utilisés comme texte essentiel ;
- transitions de caméra qui relient les pages entre elles.

Le design doit évoquer une agence technologique haut de gamme et non un jeu vidéo. Le mouvement sert à expliquer le sujet de la page.

## Architecture technique recommandée

```text
src/
├── three/
│   ├── Experience.js
│   ├── Renderer.js
│   ├── Camera.js
│   ├── World.js
│   ├── AssetManager.js
│   ├── PerformanceManager.js
│   ├── MotionPreferences.js
│   ├── TransitionManager.js
│   ├── components/
│   │   ├── DataNodes.js
│   │   ├── FlowLines.js
│   │   ├── Hologram.js
│   │   ├── ParticleField.js
│   │   └── GridFloor.js
│   └── scenes/
│       ├── HomeScene.js
│       ├── ServicesScene.js
│       ├── ExpertiseScene.js
│       ├── SeoScene.js
│       ├── CaseStudyScene.js
│       ├── AgencyScene.js
│       └── ResourcesScene.js
├── page-config/
│   └── three-pages.js
└── app.js
```

Une seule base Three.js est partagée. Chaque route charge une **configuration de scène** et uniquement les assets nécessaires. On évite ainsi de copier un moteur complet dans chaque template.

## Structure HTML obligatoire

```html
<body data-three-scene="symfony">
  <canvas id="webgl" aria-hidden="true"></canvas>

  <header>...</header>

  <main id="main-content">
    <section class="hero">
      <h1>...</h1>
      <p>...</p>
      <a href="/contact/" class="btn">Parler de votre projet</a>
    </section>

    <section>...</section>
  </main>

  <footer>...</footer>
</body>
```

Le canvas est décoratif du point de vue de l'accessibilité. Les informations nécessaires à la compréhension de la page restent dans le DOM.

## Moteur commun

```js
import * as THREE from 'three';

export class Experience {
  constructor(canvas, config) {
    this.canvas = canvas;
    this.config = config;
    this.reducedMotion = window.matchMedia(
      '(prefers-reduced-motion: reduce)'
    ).matches;

    this.scene = new THREE.Scene();

    this.camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      0.1,
      100
    );

    this.renderer = new THREE.WebGLRenderer({
      canvas,
      antialias: window.devicePixelRatio <= 1.5,
      alpha: true,
      powerPreference: 'high-performance'
    });

    this.renderer.setPixelRatio(
      Math.min(window.devicePixelRatio, config.maxDpr ?? 1.5)
    );

    this.renderer.setSize(window.innerWidth, window.innerHeight, false);

    this.initScene();
    this.bindEvents();

    if (!this.reducedMotion) this.tick();
    else this.renderStaticFrame();
  }

  initScene() {
    this.config.mount?.(this);
  }

  bindEvents() {
    window.addEventListener('resize', () => this.resize(), { passive: true });

    document.addEventListener('visibilitychange', () => {
      this.paused = document.hidden;
    });

    window.addEventListener('pointermove', (event) => {
      if (this.reducedMotion) return;
      this.pointerX = event.clientX / window.innerWidth - 0.5;
      this.pointerY = event.clientY / window.innerHeight - 0.5;
    }, { passive: true });
  }

  resize() {
    this.camera.aspect = window.innerWidth / window.innerHeight;
    this.camera.updateProjectionMatrix();
    this.renderer.setSize(window.innerWidth, window.innerHeight, false);
  }

  renderStaticFrame() {
    this.renderer.render(this.scene, this.camera);
  }

  tick() {
    if (!this.paused) {
      this.config.update?.(this);
      this.renderer.render(this.scene, this.camera);
    }
    requestAnimationFrame(() => this.tick());
  }
}
```

## Pilotage par page

```js
const sceneName = document.body.dataset.threeScene;

const module = await import(
  `./three/scenes/${sceneName}.js`
);

const canvas = document.querySelector('#webgl');

if (canvas && 'WebGLRenderingContext' in window) {
  new Experience(canvas, module.config);
}
```

En production, les noms de modules doivent être résolus par un mapping explicite du bundler plutôt que construits sans contrôle.

## Storytelling au scroll

Le scroll ne bloque jamais le document. Les sections HTML pilotent seulement l'état de la scène :

```js
const sections = document.querySelectorAll('[data-scene-step]');

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      window.dispatchEvent(new CustomEvent('scene:step', {
        detail: entry.target.dataset.sceneStep
      }));
    }
  }
}, { threshold: 0.45 });

sections.forEach(section => observer.observe(section));
```

On préfère `IntersectionObserver` et des transformations GPU à des calculs lourds exécutés à chaque événement `scroll`.

## Règles UX Three.js

1. Le premier écran doit être compréhensible avant que la 3D soit chargée.
2. Aucun CTA important ne dépend d'un objet 3D cliquable.
3. Le pointeur provoque une réaction légère, jamais une caméra incontrôlable.
4. Le scroll reste natif.
5. Les transitions ne retardent pas la navigation.
6. Les textes ne sont jamais dessinés exclusivement dans WebGL.
7. La 3D doit expliquer le thème de la page.
8. Une animation ne se rejoue pas agressivement à chaque retour dans le viewport.
9. Sur mobile, interaction tactile simple et quantité de particules réduite.
10. `prefers-reduced-motion` produit une composition quasi statique.

## Budget de performance 3D

Objectifs internes de conception, à valider sur appareils réels :

- initialiser le canvas après le HTML critique ;
- ne pas faire dépendre le LCP d'une texture 3D ;
- DPR maximum recommandé : `1.5`, voire `1` sur appareils modestes ;
- limiter le nombre de draw calls ;
- instancing pour les objets répétés ;
- géométries réutilisées ;
- textures WebP/AVIF/KTX2 lorsque pertinentes ;
- Draco/Meshopt pour les modèles compressibles ;
- aucune vidéo 4K en texture d'arrière-plan ;
- suspendre/réduire le rendu lorsque l'onglet est caché ;
- libérer textures, matériaux et géométries inutilisés avec `dispose()`;
- charger les scènes secondaires à la demande ;
- profiler GPU et CPU sur mobile, pas uniquement sur une machine de développement.

## Accessibilité

Three.js constitue une amélioration progressive. Sans WebGL ou sans JavaScript, l'utilisateur doit conserver :

- navigation ;
- titres ;
- contenu ;
- formulaires ;
- liens ;
- appels à l'action ;
- informations essentielles.

Le canvas décoratif utilise `aria-hidden="true"`. Toute information visuelle significative est également exprimée en HTML.

## SEO / Google 2026

La stratégie 3D reste subordonnée au contenu. Les pages sont rendues avec leur contenu principal dans le HTML ; les liens importants utilisent de vrais `<a href="">`; la navigation n'attend pas WebGL.

La documentation Google 2026 rappelle que JavaScript est traitable par Google mais rend le SEO plus complexe. Elle recommande également une bonne expérience globale, un affichage adapté aux appareils, une faible latence et un contenu principal facile à distinguer.

Pour les fonctionnalités génératives, aucune couche spéciale « GEO » n'est ajoutée au canvas. La valeur provient du contenu original, de l'expérience démontrable, des médias utiles et de la structure technique claire.


---

# 2. SILO — SERVICES

URL mère : `/services/`

## Page mère — Services web

**Title :** Agence web : création, développement et maintenance | AUXIOMA  
**H1 :** Des services web conçus autour de votre activité

Un projet web ne commence pas par le choix d'un framework. Il commence par une question beaucoup plus concrète : que doit permettre le futur outil ? Présenter une entreprise, vendre, automatiser un processus, connecter plusieurs logiciels, remplacer un ancien back-office ou faire évoluer une plateforme devenue difficile à maintenir ?

AUXIOMA aborde le développement sous cet angle. Nous transformons un besoin métier en architecture, puis l'architecture en produit exploitable. Cela peut prendre la forme d'un site institutionnel rapide, d'une boutique e-commerce, d'une application métier, d'un SaaS ou d'une API reliant plusieurs systèmes.

### Une réponse différente selon le projet

Nous ne proposons pas le même socle à une PME qui souhaite présenter ses services et à une entreprise qui doit traiter plusieurs milliers d'enregistrements, gérer des droits utilisateurs et synchroniser des données externes. Le volume, la durée de vie prévue, l'équipe qui maintiendra le projet et les contraintes de sécurité changent la décision technique.

Notre travail consiste aussi à savoir **ne pas complexifier** un projet. Un développement sur mesure n'est pertinent que lorsqu'il apporte quelque chose qu'une solution existante ne fournit pas correctement.

### Nos principaux domaines d'intervention

- création et refonte de sites professionnels ;
- e-commerce ;
- applications web et plateformes métier ;
- SaaS ;
- API et intégrations ;
- back-offices et CRM spécifiques ;
- maintenance, migration, sécurité et performances.

**Maillage recommandé :** toutes les pages filles du silo + `/expertises/` + `/realisations/`.

---


### Expérience Three.js — Digital Foundry

**Concept visuel.** Un noyau architectural central assemble progressivement des modules représentant site, e-commerce, SaaS, API et maintenance.

**Narration et interaction.** La caméra avance lentement entre les modules ; chaque bloc éditorial active la branche correspondante.

**UX / conversion.** CTA : le réseau se stabilise et converge vers un point unique, symbolisant le cadrage du projet. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'page-m-re-services-web',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Création de site internet

**URL :** `/services/creation-site-internet/`  
**Title :** Création de site internet professionnel | AUXIOMA  
**H1 :** Créer un site qui explique votre métier avant de chercher à impressionner

Une page d'accueil spectaculaire ne compense jamais une offre incompréhensible. Lors de la création d'un site, notre première tâche est donc de hiérarchiser l'information : qui êtes-vous, à qui vous adressez-vous, quel problème résolvez-vous et quelle action attendez-vous du visiteur ?

Cette approche influence directement l'arborescence, les contenus, les composants et le référencement. Elle évite les sites constitués d'une succession de blocs esthétiques sans véritable parcours.

### Concevoir avant de développer

Nous définissons les pages indispensables et les relations entre elles avant l'intégration. Les services majeurs disposent d'un espace suffisant pour être expliqués ; les sujets secondaires restent secondaires. Cette hiérarchie sert à la fois le visiteur, le maillage interne et la compréhension du site par les moteurs de recherche.

Le développement intervient ensuite avec une attention particulière portée au HTML sémantique, au responsive, à l'accessibilité, aux performances, aux formulaires et aux éléments qui devront être administrables.

### Un site pensé pour continuer à évoluer

Nous évitons autant que possible les architectures qui rendent chaque modification risquée. Navigation, composants, contenus et données doivent pouvoir évoluer sans reconstruire le projet à chaque nouvelle offre.

**CTA :** Parlez-nous de votre activité et de ce que le futur site doit réellement accomplir.  
**Liens :** site vitrine, refonte, développement sur mesure, SEO technique, Core Web Vitals.

---


### Expérience Three.js — Structure émergente

**Concept visuel.** Des plans, grilles et composants abstraits s'assemblent depuis une trame vide jusqu'à former une interface.

**Narration et interaction.** Le scroll passe du wireframe spatial à une structure complète ; le pointeur déplace très légèrement les couches.

**UX / conversion.** CTA : l'architecture devient nette et calme afin de laisser la priorité au formulaire/contact. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'cr-ation-de-site-internet',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Site vitrine

**URL :** `/services/site-vitrine/`  
**Title :** Site vitrine professionnel rapide et évolutif | AUXIOMA  
**H1 :** Un site vitrine n'a rien d'une simple carte de visite

Le terme « site vitrine » donne parfois l'impression d'un petit projet. Pourtant, pour beaucoup d'entreprises, ces quelques pages constituent le premier commercial disponible vingt-quatre heures sur vingt-quatre.

Nous travaillons donc chaque page comme une étape d'une conversation. La page d'accueil donne le cadre. Les pages services répondent aux besoins précis. Les réalisations apportent la preuve. La présentation de l'entreprise crée de la confiance. Le contact réduit les obstacles au passage à l'action.

### Peu de pages, mais aucune page vide de sens

Nous préférons six pages solides à trente pages artificielles créées pour couvrir des expressions SEO. Une prestation importante mérite son propre contenu lorsqu'elle répond à une intention différente. Une variante de vocabulaire ne justifie pas à elle seule une nouvelle URL.

### Le socle technique compte

Même un site relativement simple doit charger rapidement, être utilisable sur mobile, protéger correctement ses formulaires et permettre aux moteurs de découvrir ses pages. Le travail invisible compte autant que la maquette.

**CTA :** Construisons un site court, clair et capable de générer de vrais contacts.

---


### Expérience Three.js — Signal clair

**Concept visuel.** Quelques panneaux 3D seulement, très lisibles, reliés comme les étapes d'un parcours commercial.

**Narration et interaction.** Chaque section éclaire un panneau : accueil, service, preuve, contact.

**UX / conversion.** Mobile : panneaux remplacés par trois volumes simples et aucun effet de profondeur agressif. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'site-vitrine',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Site professionnel

**URL :** `/services/site-professionnel/`  
**Title :** Développement de site professionnel pour entreprise | AUXIOMA  
**H1 :** Votre site doit pouvoir soutenir votre organisation, pas seulement votre communication

Lorsqu'un site devient un outil quotidien, les attentes changent. Espaces privés, documents, formulaires complexes, droits d'accès, connexion à un CRM, catalogue ou flux de données font rapidement disparaître la frontière entre « site internet » et « application ».

Nous commençons par cartographier les utilisateurs et les actions qu'ils doivent réaliser. Cette méthode permet d'éviter les interfaces pensées uniquement du point de vue de l'administrateur.

### Prévoir les usages réels

Un collaborateur sur ordinateur, un client depuis son téléphone et un administrateur qui traite cent demandes n'ont pas le même besoin. Les parcours, contrôles et informations doivent être adaptés à ces situations.

La qualité d'un site professionnel se mesure souvent à des détails peu visibles : messages d'erreur compréhensibles, historique fiable, permissions cohérentes, recherche efficace et opérations répétitives réduites au minimum.

**Liens :** application web, back-office, API, Symfony.

---


### Expérience Three.js — Operational Grid

**Concept visuel.** Une matrice de postes, documents et flux représente plusieurs utilisateurs travaillant sur le même système.

**Narration et interaction.** Les flux changent selon les sections utilisateurs, données et administration.

**UX / conversion.** Le CTA rassemble les flux vers un tableau de contrôle central. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'site-professionnel',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Refonte de site internet

**URL :** `/services/refonte-site-internet/`  
**Title :** Refonte de site internet sans repartir à l'aveugle | AUXIOMA  
**H1 :** Refaire un site sans jeter ce qui fonctionne déjà

Une refonte réussie ne consiste pas à remplacer un ancien design par un nouveau. Avant toute modification, il faut savoir ce qui produit des visites, quelles pages obtiennent des liens, quelles URL sont indexées et quelles fonctionnalités sont réellement utilisées.

Supprimer cette connaissance au moment de la refonte peut coûter plus cher que l'ancien site.

### Nous commençons par l'existant

L'audit porte sur la structure, les URL, les contenus, les performances, les dépendances techniques et les données à conserver. Les redirections sont préparées avant la mise en production. Les anciennes URL utiles ne disparaissent pas simplement parce que le nouveau menu est différent.

### Une refonte est aussi l'occasion de simplifier

C'est souvent le bon moment pour supprimer des extensions inutiles, consolider plusieurs pages faibles, revoir les formulaires et réduire le JavaScript ou les ressources qui n'apportent rien au visiteur.

**CTA :** Faites auditer l'existant avant de décider ce qui doit être remplacé.

---


### Expérience Three.js — Legacy → New

**Concept visuel.** Une ancienne structure fragmentée est scannée puis reconstruite sans casser ses connexions utiles.

**Narration et interaction.** Au scroll, les nœuds conservés restent lumineux, les éléments obsolètes se dissolvent et les redirections sont figurées par des arcs.

**UX / conversion.** Transition visuelle sans flash ni blocage de scroll. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'refonte-de-site-internet',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Développement web sur mesure

**URL :** `/services/developpement-web-sur-mesure/`  
**Title :** Développement web sur mesure PHP, JS et Python | AUXIOMA  
**H1 :** Le sur-mesure commence là où le standard devient une contrainte

Un logiciel standard est souvent la meilleure solution lorsqu'il couvre correctement le besoin. Nous recommandons le développement spécifique lorsqu'un processus métier, une volumétrie, une intégration ou une règle de gestion ne rentre plus proprement dans le cadre d'un produit existant.

Le travail ne consiste alors pas à empiler des fonctionnalités. Il faut traduire des règles parfois implicites en comportements prévisibles.

### Du métier vers le code

Nous identifions les objets métier, leurs états, leurs relations et les droits associés. Cette étape réduit les exceptions dispersées dans le code et prépare une architecture qui reste compréhensible lorsque le projet grandit.

Selon le contexte, le socle peut associer PHP/Symfony, JavaScript, Python, SQL, moteur de recherche et services externes. La technologie reste un moyen ; la stabilité du modèle métier est l'objectif.

### Construire pour la maintenance

Logs, migrations, tests, gestion des erreurs, documentation des intégrations et stratégie de déploiement sont intégrés à la réflexion. Un développement qui fonctionne aujourd'hui mais que personne ne peut modifier demain est une dette, pas un actif.

**Liens :** Symfony, PHP, JavaScript, Python, API, plateforme métier.

---


### Expérience Three.js — Custom Engine

**Concept visuel.** Un moteur abstrait se construit autour de règles métier matérialisées par des nœuds et contraintes.

**Narration et interaction.** Les connexions ne se créent que lorsque la section correspondante entre dans le viewport.

**UX / conversion.** L'expérience doit donner une impression d'ingénierie, pas de décor cyberpunk gratuit. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'd-veloppement-web-sur-mesure',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## E-commerce

**URL :** `/services/ecommerce/`  
**Title :** Création et développement e-commerce | AUXIOMA  
**H1 :** Un e-commerce se construit autour du catalogue et de la commande

La page d'accueil est rarement la partie la plus difficile d'une boutique. Les vraies contraintes apparaissent dans les déclinaisons, stocks, prix, promotions, transporteurs, taxes, paiements, retours et synchronisations.

Nous commençons donc par comprendre le cycle d'une commande et la structure du catalogue avant de choisir ou modifier la solution technique.

### Ne pas transformer le catalogue en problème SEO

Filtres, tris et paramètres peuvent générer un nombre considérable d'URL. Nous déterminons quelles vues doivent réellement être accessibles aux moteurs et lesquelles servent uniquement à l'utilisateur.

Les catégories importantes reçoivent un contenu propre et utile ; les fiches produits évitent autant que possible les descriptions copiées des fournisseurs.

### Performance et conversion vont ensemble

Images, scripts tiers, modules et outils marketing peuvent alourdir très rapidement une boutique. Nous cherchons le compromis entre fonctionnalités commerciales, mesure et rapidité réelle sur mobile.

**Liens :** PrestaShop, WooCommerce, performance, SEO technique.

---


### Expérience Three.js — Commerce Flow

**Concept visuel.** Produits abstraits, panier, paiement, stock et expédition forment un circuit tridimensionnel.

**Narration et interaction.** Le scroll fait suivre une commande depuis le catalogue jusqu'à l'expédition.

**UX / conversion.** Aucun faux bouton 3D : les actions commerciales restent en HTML. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'e-commerce',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## PrestaShop

**URL :** `/services/prestashop/`  
**Title :** Agence PrestaShop : création, migration et développement | AUXIOMA  
**H1 :** Faire évoluer PrestaShop sans transformer chaque mise à jour en risque

PrestaShop est efficace lorsqu'on respecte son architecture. Les difficultés commencent généralement après plusieurs années de modules accumulés, de surcharges anciennes et de modifications directes qui rendent les mises à niveau imprévisibles.

Notre intervention peut porter sur une création, une migration, un module spécifique, une correction de performance ou la remise à plat d'une boutique existante.

### Diagnostiquer avant d'ajouter

Face à un dysfonctionnement, ajouter un nouveau module est rarement notre premier réflexe. Nous vérifions les overrides, hooks, requêtes, tâches planifiées, logs, thème et interactions entre modules.

Cette méthode permet de traiter la cause plutôt que de masquer le symptôme.

### Catalogue, indexation et données

Les boutiques volumineuses demandent également une stratégie sur les catégories, variantes, produits indisponibles, redirections et facettes. Les décisions SEO sont prises avec le fonctionnement réel du catalogue, pas séparément.

**Liens :** e-commerce, PHP, optimisation des performances, migration.

---


### Expérience Three.js — Commerce Core

**Concept visuel.** Un cœur e-commerce est entouré de modules/hook abstraits qui viennent se connecter proprement.

**Narration et interaction.** Les modules inutiles s'éloignent lorsque le texte parle de diagnostic ; le noyau reste stable.

**UX / conversion.** Limiter fortement les objets sur mobile. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'prestashop',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## WooCommerce

**URL :** `/services/woocommerce/`  
**Title :** Développement WooCommerce pour boutiques WordPress | AUXIOMA  
**H1 :** Garder WooCommerce simple même lorsque la boutique grandit

WooCommerce permet de démarrer rapidement, mais sa souplesse encourage parfois une accumulation d'extensions. À mesure que le catalogue et le trafic augmentent, cette facilité initiale peut devenir un problème de maintenance.

Nous cherchons d'abord à réduire les dépendances inutiles. Une fonctionnalité légère et spécifique peut être préférable à une extension généraliste chargée de dizaines de fonctions non utilisées.

La base WordPress, le thème, le cache, les tâches CRON, la base de données et les appels externes sont examinés ensemble lorsqu'un problème de performance apparaît.

**CTA :** Faites analyser la boutique avant d'empiler une nouvelle extension.

---


### Expérience Three.js — Plugin Orbit

**Concept visuel.** Un noyau WordPress est entouré d'extensions ; la narration montre la différence entre écosystème maîtrisé et accumulation.

**Narration et interaction.** Au scroll, les extensions non nécessaires disparaissent pour rendre le système plus léger.

**UX / conversion.** Animation lente et pédagogique. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'woocommerce',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Application web

**URL :** `/services/application-web/`  
**Title :** Développement d'application web métier | AUXIOMA  
**H1 :** Une application web doit faire gagner des gestes, pas en ajouter

Dans un outil métier, quelques secondes perdues sur une action répétée des centaines de fois deviennent rapidement des heures. Nous observons donc les opérations fréquentes avant de dessiner les écrans.

Recherche, filtres, raccourcis, actions groupées, états et historique sont pensés en fonction du travail quotidien.

### Le modèle de données avant l'interface

Une interface élégante construite sur un modèle fragile finit toujours par révéler ses limites. Nous clarifions les relations et règles de gestion avant de multiplier les écrans.

Cette discipline facilite ensuite les API, exports, tableaux de bord et automatisations.

**Liens :** plateforme métier, back-office, Symfony, API.

---


### Expérience Three.js — Workflow Space

**Concept visuel.** Des cartes métier se déplacent entre plusieurs états dans un espace organisé.

**Narration et interaction.** Filtres, recherche et actions groupées sont représentés par des transformations ordonnées.

**UX / conversion.** Interaction pointer : parallaxe légère seulement. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'application-web',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Plateforme métier

**URL :** `/services/plateforme-metier/`  
**Title :** Plateforme métier sur mesure pour entreprises | AUXIOMA  
**H1 :** Transformer un processus métier en plateforme fiable

Une plateforme métier concentre souvent des règles qui vivaient auparavant dans des fichiers, des e-mails et la mémoire des collaborateurs. Le premier enjeu est de rendre ces règles explicites.

Nous documentons les rôles, statuts, transitions, validations et exceptions. Cette cartographie devient la colonne vertébrale du produit.

Les interfaces sont ensuite organisées autour des décisions que chaque rôle doit prendre. Un utilisateur ne devrait pas traverser cinq écrans pour découvrir qu'une information manque.

**CTA :** Montrez-nous votre processus actuel, même s'il repose encore sur Excel et des e-mails.

---


### Expérience Three.js — Process Graph

**Concept visuel.** Un graphe d'états métier évolue au fil du parcours.

**Narration et interaction.** Chaque section active rôles, transitions et validations.

**UX / conversion.** Le graphe reste lisible et réduit sur mobile. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'plateforme-m-tier',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## SaaS

**URL :** `/services/saas/`  
**Title :** Développement SaaS : architecture et produit web | AUXIOMA  
**H1 :** Construire un SaaS qui peut accueillir son centième client comme le premier

Un SaaS ne se résume pas à une application accompagnée d'un paiement mensuel. Il faut penser isolation des données, droits, onboarding, facturation, limites d'usage, journalisation et support.

Nous distinguons très tôt ce qui appartient au compte, à l'organisation, à l'utilisateur et à l'abonnement. Une mauvaise séparation à ce niveau devient coûteuse lorsque le produit grandit.

### Commencer avec le bon niveau de complexité

Tout n'a pas besoin d'une architecture distribuée. Nous préférons une base solide, observable et testable à une architecture spectaculaire impossible à exploiter par une petite équipe.

**Liens :** Symfony, API, plateforme métier, back-office.

---


### Expérience Three.js — Tenant Universe

**Concept visuel.** Plusieurs espaces clients gravitent autour d'un noyau commun tout en restant visuellement isolés.

**Narration et interaction.** Onboarding, droits, abonnement et logs apparaissent par couches.

**UX / conversion.** Le mouvement ralentit fortement pendant les blocs de lecture longs. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'saas',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## API et intégrations

**URL :** `/services/api-integrations/`  
**Title :** Développement API et intégration de services | AUXIOMA  
**H1 :** Faire communiquer les systèmes sans perdre le contrôle des données

Une API réussie ne se juge pas uniquement lorsque tout fonctionne. Elle se juge surtout lorsque le service distant ralentit, renvoie deux fois le même événement ou devient indisponible.

Nous prévoyons authentification, validation, idempotence, reprise, logs et gestion des erreurs selon la criticité du flux.

### Une intégration doit être observable

Il doit être possible de répondre à des questions simples : qu'avons-nous envoyé ? qu'avons-nous reçu ? quand ? pourquoi l'opération a-t-elle échoué ? peut-elle être rejouée sans créer de doublon ?

Ces informations réduisent considérablement le temps de diagnostic en production.

**Liens :** développement sur mesure, Symfony, Python, SaaS.

---


### Expérience Three.js — Data Streams

**Concept visuel.** Plusieurs systèmes sont reliés par des flux de données animés avec accusés de réception visuels.

**Narration et interaction.** Des paquets circulent ; erreurs et retry sont illustrés sans texte dans le canvas.

**UX / conversion.** Utiliser courbes et instancing plutôt que des centaines de meshes indépendants. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'api-et-int-grations',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Back-office et CRM sur mesure

**URL :** `/services/back-office-crm/`  
**Title :** Back-office et CRM métier sur mesure | AUXIOMA  
**H1 :** Un back-office est un poste de travail, pas une version moins jolie du site

Le public utilise parfois un site quelques minutes. L'équipe interne peut rester plusieurs heures dans son back-office. Cette différence change complètement les priorités.

Nous privilégions densité utile, filtres persistants, recherche, raccourcis, actions groupées, historique et réduction du nombre de clics.

Les permissions sont définies par rôle et par action, plutôt que cachées uniquement dans l'interface.

**CTA :** Identifions les opérations qui prennent aujourd'hui le plus de temps à votre équipe.

---


### Expérience Three.js — Control Room

**Concept visuel.** Une console abstraite en perspective organise listes, filtres et états.

**Narration et interaction.** Le scroll réduit progressivement le nombre d'actions nécessaires pour symboliser l'efficacité.

**UX / conversion.** Aucun faux champ interactif dans WebGL. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'back-office-et-crm-sur-mesure',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Maintenance web

**URL :** `/services/maintenance-web/`  
**Title :** Maintenance de site et application web | AUXIOMA  
**H1 :** Maintenir, c'est empêcher les petits problèmes de devenir des urgences

Une maintenance sérieuse ne consiste pas uniquement à appliquer des mises à jour. Elle comprend la surveillance des erreurs, des sauvegardes vérifiables, le suivi des dépendances et la capacité à revenir rapidement à un état stable.

Nous distinguons maintenance corrective, préventive et évolutive afin que chaque intervention ait un objectif clair.

Avant une modification sensible, nous évaluons son impact sur les données, le référencement, les intégrations et le déploiement.

---


### Expérience Three.js — Pulse Monitor

**Concept visuel.** Le système 3D respire doucement ; sauvegardes, logs et dépendances sont représentés par des pulsations.

**Narration et interaction.** Une anomalie ponctuelle est détectée puis isolée au fil du contenu.

**UX / conversion.** Animation discrète afin de renforcer la sensation de stabilité. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'maintenance-web',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Optimisation des performances

**URL :** `/services/performance-web/`  
**Title :** Optimisation des performances web et temps de chargement | AUXIOMA  
**H1 :** Accélérer le site là où l'utilisateur attend réellement

Une note de laboratoire ne raconte pas toute l'histoire. Nous combinons mesures synthétiques, données de terrain lorsqu'elles existent et observation de la chaîne technique.

Une image principale trop lourde, une requête SQL lente, un script tiers ou un cache mal configuré ne se corrigent pas de la même façon.

Nous cherchons la cause dominante avant d'appliquer des optimisations génériques.

**Liens :** Core Web Vitals, maintenance, JavaScript, e-commerce.

---


### Expérience Three.js — Latency Tunnel

**Concept visuel.** Un flux initialement encombré devient progressivement fluide.

**Narration et interaction.** Le nombre de particules parasites diminue et la caméra gagne en fluidité au fil du scroll.

**UX / conversion.** Ironie interdite : l'effet performance doit lui-même être extrêmement léger. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'optimisation-des-performances',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Core Web Vitals

**URL :** `/services/core-web-vitals/`  
**Title :** Optimisation Core Web Vitals : LCP, INP et CLS | AUXIOMA  
**H1 :** Améliorer LCP, INP et CLS sans optimiser un chiffre pour lui-même

Les Core Web Vitals fournissent un langage commun pour parler de chargement, réactivité et stabilité visuelle. Ils sont utiles lorsqu'ils conduisent à une meilleure expérience réelle.

Pour le LCP, nous analysons notamment la ressource principale, le chemin réseau et le rendu. Pour l'INP, nous cherchons les traitements qui bloquent l'interaction. Pour le CLS, nous identifions les éléments dont les dimensions ou la position changent après affichage.

L'objectif reste un site agréable et prévisible, pas un score parfait obtenu au prix de fonctionnalités utiles.

---


### Expérience Three.js — Vitals Lab

**Concept visuel.** Trois phénomènes visuels représentent LCP, INP et CLS : apparition, réaction, stabilité.

**Narration et interaction.** Chaque métrique possède un état visuel distinct activé par sa section.

**UX / conversion.** Pas de simulation qui provoque réellement du CLS ou bloque le thread principal. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'core-web-vitals',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Sécurité web

**URL :** `/services/securite-web/`  
**Title :** Sécurité des sites et applications web | AUXIOMA  
**H1 :** Réduire la surface d'attaque avant de multiplier les outils de sécurité

La sécurité commence souvent par des décisions ordinaires : dépendances maintenues, permissions minimales, secrets hors du dépôt, validation des entrées, sauvegardes, HTTPS et accès d'administration protégés.

Nous examinons aussi les conséquences d'un incident. Une sauvegarde existe-t-elle réellement ? Peut-elle être restaurée ? Les journaux permettront-ils de comprendre ce qui s'est passé ?

La sécurité n'est jamais absolue. Le travail consiste à réduire les risques et à préparer la réaction.

---


### Expérience Three.js — Defensive Layers

**Concept visuel.** Plusieurs couches translucides protègent un noyau de données.

**Narration et interaction.** Permissions, secrets, validation et sauvegarde apparaissent comme des couches successives.

**UX / conversion.** Pas d'esthétique alarmiste ; priorité à la maîtrise. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 's-curit-web',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Migration et mise à niveau

**URL :** `/services/migration-web/`  
**Title :** Migration et mise à niveau de sites et applications | AUXIOMA  
**H1 :** Migrer sans découvrir les dépendances le jour de la bascule

Changer de serveur, de version majeure, de framework ou de CMS implique rarement un simple copier-coller.

Nous inventorions versions, extensions, tâches planifiées, DNS, certificats, stockage, e-mails, intégrations et contraintes de base de données avant la bascule.

Lorsque les URL changent, la migration inclut également une stratégie de redirections et des contrôles d'indexation.

---


### Expérience Three.js — Bridge Migration

**Concept visuel.** Les données traversent progressivement d'une architecture ancienne vers une nouvelle.

**Narration et interaction.** Les connexions critiques restent actives pendant la transition.

**UX / conversion.** Le CTA apparaît une fois le pont stabilisé. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'migration-et-mise-niveau',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

# 3. SILO — EXPERTISES

URL mère : `/expertises/`

## Page mère — Expertises techniques

**Title :** Technologies web : PHP, Symfony, JavaScript, Python | AUXIOMA  
**H1 :** Choisir une technologie pour ses contraintes, pas pour sa popularité

Une stack technique est une série de compromis. Vitesse de développement, maturité de l'écosystème, disponibilité des compétences, hébergement, performances et durée de vie du projet doivent être considérés ensemble.

AUXIOMA intervient principalement sur des environnements PHP, Symfony, JavaScript, Python, SQL, PrestaShop et WordPress, ainsi que sur les composants d'infrastructure nécessaires à leur exploitation.

Cette rubrique n'est pas un catalogue de logos. Chaque expertise explique dans quels contextes nous l'utilisons, ce qu'elle résout bien et où se trouvent ses limites.

---


### Expérience Three.js — Technology Constellation

**Concept visuel.** PHP, JS, Python, données et infrastructure sont symbolisés par familles de nœuds, sans logos géants.

**Narration et interaction.** Le scroll rapproche la famille technique liée au contenu.

**UX / conversion.** Une seule constellation chargée, matériaux partagés. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'page-m-re-expertises-techniques',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## PHP

**URL :** `/expertises/php/`  
**Title :** Développement PHP professionnel et applications métier | AUXIOMA  
**H1 :** PHP reste un excellent outil lorsqu'il est traité comme une plateforme moderne

Le PHP actuel n'a plus grand-chose à voir avec les scripts dispersés qui ont forgé une partie de sa réputation. Typage, gestionnaire de dépendances, tests, analyse statique et frameworks matures permettent de construire des applications durables.

Nous l'utilisons notamment pour les applications métier, APIs, back-offices, plateformes et écosystèmes e-commerce.

La qualité dépend moins du langage que de la discipline appliquée au modèle, aux dépendances et au déploiement.

---


### Expérience Three.js — Runtime Core

**Concept visuel.** Des requêtes traversent un moteur serveur abstrait et ressortent sous forme de réponses structurées.

**Narration et interaction.** Typage, dépendances et tests sont représentés par des anneaux de contrôle.

**UX / conversion.** Animation sobre. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'php',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Symfony

**URL :** `/expertises/symfony/`  
**Title :** Agence et développement Symfony | AUXIOMA  
**H1 :** Symfony pour les applications qui doivent rester compréhensibles en grandissant

Symfony est particulièrement adapté lorsque les règles métier prennent de l'importance. Son écosystème permet de structurer validation, sécurité, événements, messagerie, commandes et accès aux données sans réinventer chaque mécanisme.

Nous cherchons cependant à ne pas transformer le framework en architecture. Le domaine métier doit rester lisible et les dépendances entre composants explicites.

Sur les projets longs, cette sobriété facilite les tests, les mises à niveau et l'arrivée de nouveaux développeurs.

---


### Expérience Three.js — Component Architecture

**Concept visuel.** Services, événements, messages, sécurité et données forment une architecture modulaire.

**Narration et interaction.** Les dépendances se connectent sans spaghetti visuel ; la caméra révèle les couches successives.

**UX / conversion.** Scène signature technique AUXIOMA. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'symfony',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Laravel

**URL :** `/expertises/laravel/`  
**Title :** Développement Laravel pour applications web | AUXIOMA  
**H1 :** Laravel lorsque la vitesse de construction doit rester compatible avec une base propre

Laravel offre une expérience de développement très productive et un écosystème riche. Il convient particulièrement aux applications web qui doivent atteindre rapidement une première version fonctionnelle.

Nous conservons toutefois une séparation claire entre logique métier et commodités du framework afin d'éviter qu'un projet rapide à lancer devienne difficile à faire évoluer.

---


### Expérience Three.js — Rapid Assembly

**Concept visuel.** Des composants s'assemblent rapidement autour d'un cœur applicatif propre.

**Narration et interaction.** La vitesse initiale laisse place à une structure stabilisée pour illustrer la maintenabilité.

**UX / conversion.** Transitions courtes. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'laravel',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## JavaScript

**URL :** `/expertises/javascript/`  
**Title :** Développement JavaScript front-end et interactif | AUXIOMA  
**H1 :** Utiliser JavaScript lorsqu'il améliore l'usage, pas simplement parce qu'il est disponible

Une page n'a pas besoin d'être une application complète pour offrir une expérience moderne. Nous privilégions la quantité de JavaScript nécessaire à l'interaction réelle.

Cela réduit le coût de chargement, les problèmes d'hydratation et les comportements fragiles sur les appareils moins puissants.

Pour les interfaces complexes, JavaScript prend naturellement une place plus importante ; l'architecture est alors choisie selon la durée de vie et l'état de l'application.

---


### Expérience Three.js — Interaction Field

**Concept visuel.** Le pointeur réveille localement un réseau de composants, sans déplacer toute la scène.

**Narration et interaction.** Les sections montrent progressivement DOM, interaction et état.

**UX / conversion.** Le script de démonstration ne doit jamais dégrader l'INP. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'javascript',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## React

**URL :** `/expertises/react/`  
**Title :** Développement React pour interfaces web complexes | AUXIOMA  
**H1 :** React pour les interfaces où l'état devient un vrai problème à résoudre

React prend tout son sens lorsque de nombreux composants doivent réagir à un état partagé : tableaux de bord, éditeurs, configurateurs ou interfaces applicatives.

Nous évitons de l'imposer à des pages éditoriales qui n'en ont pas besoin. Lorsque React est retenu, découpage des composants, gestion de l'état, accessibilité et stratégie de rendu sont définis dès le départ.

---


### Expérience Three.js — State Network

**Concept visuel.** Un état central provoque des mises à jour ciblées dans plusieurs composants spatiaux.

**Narration et interaction.** Chaque changement n'anime que les nœuds concernés.

**UX / conversion.** Utiliser cette précision comme métaphore de la gestion d'état. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'react',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Vue.js

**URL :** `/expertises/vue-js/`  
**Title :** Développement Vue.js et interfaces réactives | AUXIOMA  
**H1 :** Vue.js pour ajouter de la réactivité sans perdre la lisibilité du projet

Vue.js offre un excellent compromis entre intégration progressive et application complète. Il peut enrichir quelques zones d'une interface ou porter un front-end plus conséquent.

Nous l'apprécions particulièrement lorsque l'équipe souhaite conserver une courbe d'apprentissage raisonnable et une organisation de composants explicite.

---


### Expérience Three.js — Progressive Layers

**Concept visuel.** Une interface statique reçoit progressivement des couches de réactivité.

**Narration et interaction.** La scène illustre l'adoption progressive plutôt qu'un basculement brutal.

**UX / conversion.** Très légère. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'vue-js',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Node.js

**URL :** `/expertises/node-js/`  
**Title :** Développement Node.js et services JavaScript | AUXIOMA  
**H1 :** Node.js pour les services où l'écosystème JavaScript apporte un avantage concret

Node.js est intéressant pour certains services temps réel, traitements I/O et outils partageant des compétences avec le front-end.

Nous évaluons cependant la charge CPU, l'exploitation et l'écosystème avant de l'utiliser. Employer le même langage partout n'est pas en soi une raison d'architecture.

---


### Expérience Three.js — Event Loop

**Concept visuel.** Des événements circulent autour d'une boucle centrale et déclenchent des opérations I/O.

**Narration et interaction.** Les tâches sont distribuées sans représenter une fausse architecture technique.

**UX / conversion.** Limiter les particules. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'node-js',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Three.js

**URL :** `/expertises/three-js/`  
**Title :** Expériences web 3D avec Three.js | AUXIOMA  
**H1 :** La 3D web doit créer une expérience, pas bloquer l'accès au contenu

Three.js permet de créer visualisations, configurateurs et univers interactifs directement dans le navigateur.

Une expérience 3D réussie doit cependant rester compatible avec le reste du produit. Nous séparons contenu essentiel et scène graphique, prévoyons une expérience adaptée au mobile et surveillons poids des assets, GPU et consommation énergétique.

La 3D devient alors un outil de narration ou de manipulation plutôt qu'un décor coûteux.

---


### Expérience Three.js — Infinite WebGL Studio

**Concept visuel.** La page la plus spectaculaire : profondeur, shader subtil, géométries procédurales et caméra cinématique contrôlée.

**Narration et interaction.** Le scroll traverse plusieurs espaces 3D tout en gardant les textes HTML au premier plan.

**UX / conversion.** Cette page sert de démonstrateur, mais respecte reduced-motion et le budget GPU. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'three-js',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Python

**URL :** `/expertises/python/`  
**Title :** Développement Python, automatisation et traitement de données | AUXIOMA  
**H1 :** Python pour automatiser ce qui ne mérite plus d'être fait à la main

Python est particulièrement efficace pour le traitement de données, l'automatisation, les scripts d'intégration et certains services spécialisés.

Nous l'utilisons lorsque son écosystème simplifie réellement le problème, par exemple pour transformer des flux, analyser des fichiers, orchestrer des tâches ou construire un service indépendant.

Une automatisation utile doit rester observable : logs, erreurs et résultats doivent pouvoir être contrôlés.

---


### Expérience Three.js — Automation Pipeline

**Concept visuel.** Des fichiers/données entrent dans un pipeline et ressortent transformés et classés.

**Narration et interaction.** Chaque étape du scroll active une transformation.

**UX / conversion.** Pas de code essentiel dans la scène. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'python',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## PrestaShop — expertise

**URL :** `/expertises/prestashop/`  
**Title :** Expertise technique PrestaShop et développement de modules | AUXIOMA  
**H1 :** Comprendre PrestaShop jusque dans ses hooks, modules et données

Cette page traite de la technologie, là où notre page service traite du projet e-commerce.

Notre expertise couvre modules, hooks, overrides, thèmes, commandes, catalogue, tâches CRON, imports, webservices et migrations.

Nous privilégions les extensions compatibles avec le cycle de vie de PrestaShop et limitons les modifications directes du cœur qui compliqueraient les futures mises à niveau.

---


### Expérience Three.js — Hook Map

**Concept visuel.** Le cœur PrestaShop expose visuellement hooks, modules, thème, catalogue et CRON.

**Narration et interaction.** Le visiteur comprend la topologie sans avoir besoin de lire des labels 3D.

**UX / conversion.** Les explications restent dans le DOM. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'prestashop-expertise',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## WordPress

**URL :** `/expertises/wordpress/`  
**Title :** Expertise WordPress, développement et optimisation | AUXIOMA  
**H1 :** WordPress fonctionne mieux lorsqu'on cesse de résoudre chaque besoin avec un plugin

WordPress fournit un excellent socle éditorial. Sa faiblesse apparaît surtout lorsqu'un site accumule des extensions qui se chevauchent.

Nous intervenons sur thèmes, fonctions spécifiques, performance, sécurité, indexation et nettoyage d'architectures devenues trop lourdes.

Avant d'ajouter une extension, nous vérifions si le besoin peut être résolu proprement avec les fonctions natives ou un développement limité.

---


### Expérience Three.js — Clean Stack

**Concept visuel.** Une pile WordPress encombrée se simplifie progressivement.

**Narration et interaction.** Les plugins redondants se détachent, laissant un noyau plus propre.

**UX / conversion.** Animation courte. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'wordpress',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Infrastructure

**URL :** `/expertises/infrastructure/`  
**Title :** Infrastructure web Linux, Docker, SQL et Elasticsearch | AUXIOMA  
**H1 :** Une application fiable dépend aussi de ce qui se passe sous le code

Serveur web, PHP, base de données, cache, files de messages, stockage et moteur de recherche participent directement au comportement de l'application.

Nous traitons l'infrastructure comme une partie du système et non comme une boîte noire. Mémoire, CPU, logs, sauvegardes et capacité de restauration doivent être observables.

### Technologies courantes

Linux, Docker, MySQL/MariaDB, PostgreSQL et Elasticsearch sont utilisés selon le contexte, sans multiplier les composants lorsque le besoin ne le justifie pas.

---


### Expérience Three.js — Server Matrix

**Concept visuel.** Serveur, base SQL, cache, stockage et recherche sont reliés dans une matrice profonde.

**Narration et interaction.** La caméra descend d'une couche applicative vers l'infrastructure.

**UX / conversion.** Ne jamais afficher de données réelles ou secrets. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'infrastructure',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

# 4. SILO — SEO & VISIBILITÉ

URL mère : `/seo/`

## Page mère — SEO et visibilité

**Title :** SEO technique et visibilité Google | AUXIOMA  
**H1 :** Rendre un site compréhensible sans écrire pour un robot

Le SEO technique crée les conditions nécessaires à la découverte et à la compréhension des pages. Il ne remplace ni une offre claire ni un contenu utile.

Notre approche relie développement, architecture de l'information et mesure. Nous vérifions ce que Google peut explorer, rendre, indexer et comprendre, puis nous corrigeons les obstacles qui ont un impact réel.

Depuis 2026, Google rappelle explicitement que les fondamentaux du SEO restent ceux à appliquer pour ses expériences génératives. Nous ne construisons donc pas une couche artificielle « pour l'IA » : nous renforçons l'originalité, la précision, la structure et les preuves.

---


### Expérience Three.js — Search Graph

**Concept visuel.** Un crawler lumineux découvre progressivement un graphe de pages reliées.

**Narration et interaction.** Les pages accessibles s'illuminent ; les impasses restent en retrait.

**UX / conversion.** Le canvas illustre la structure mais les vrais liens sont HTML. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'page-m-re-seo-et-visibilit',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Référencement naturel SEO

**URL :** `/seo/referencement-naturel/`  
**Title :** Référencement naturel SEO pour sites professionnels | AUXIOMA  
**H1 :** Le référencement commence par mériter la page que l'on souhaite positionner

Avant de travailler une requête, nous vérifions si la page apporte réellement une réponse distincte. Deux pages presque identiques qui ciblent deux formulations voisines ne créent pas deux fois plus de valeur.

Le travail associe architecture, contenu, maillage, technique et analyse des résultats. Les mots-clés servent à comprendre la demande ; ils ne dictent pas une répétition mécanique dans chaque paragraphe.

### Une stratégie qui accepte de supprimer

Améliorer un site peut aussi signifier fusionner des pages faibles, rediriger des contenus obsolètes et arrêter d'indexer certaines combinaisons sans intérêt.

---


### Expérience Three.js — Relevance Map

**Concept visuel.** Des intentions de recherche convergent vers quelques pages solides plutôt que des centaines de clones.

**Narration et interaction.** Au scroll, les doublons disparaissent et les pages principales gagnent en clarté.

**UX / conversion.** Métaphore directe de la consolidation éditoriale. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'r-f-rencement-naturel-seo',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Audit SEO technique

**URL :** `/seo/audit-seo-technique/`  
**Title :** Audit SEO technique : crawl, indexation et performance | AUXIOMA  
**H1 :** Un audit SEO doit déboucher sur des décisions, pas sur 300 alertes exportées

Les outils savent détecter énormément d'anomalies. Ils ne savent pas toujours lesquelles coûtent réellement de la visibilité.

Nous classons les problèmes selon leur impact, leur étendue et leur coût de correction : blocage d'exploration, canonical incohérente, redirections, pages orphelines, erreurs serveur, duplication, rendu, performances ou données structurées.

Chaque recommandation doit être suffisamment précise pour être développée et vérifiée après correction.

---


### Expérience Three.js — Crawler Diagnostic

**Concept visuel.** Un scanner traverse l'architecture et marque visuellement redirections, orphelines et erreurs.

**Narration et interaction.** Chaque catégorie d'audit révèle une couche.

**UX / conversion.** Pas de chiffres fictifs. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'audit-seo-technique',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## SEO local

**URL :** `/seo/seo-local/`  
**Title :** SEO local pour entreprises et agences | AUXIOMA  
**H1 :** Être localement pertinent sans fabriquer une ville différente à chaque URL

Une présence locale crédible repose sur des informations cohérentes, une implantation réelle, des services clairement décrits et des preuves locales lorsque celles-ci existent.

Nous déconseillons les dizaines de pages où seul le nom de la ville change. Une page locale doit apporter des informations que le visiteur de cette zone a une raison de consulter.

Les informations d'entreprise, la fiche Google Business Profile lorsqu'elle est applicable et les données structurées doivent raconter la même réalité.

---


### Expérience Three.js — Local Signal

**Concept visuel.** Un point d'implantation réel rayonne vers une zone cohérente plutôt qu'une multitude de villes artificielles.

**Narration et interaction.** Le rayon évolue avec le contenu local.

**UX / conversion.** Pas de carte décorative trompeuse. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'seo-local',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Données structurées

**URL :** `/seo/donnees-structurees/`  
**Title :** Données structurées Schema.org et Google Search | AUXIOMA  
**H1 :** Les données structurées décrivent le contenu ; elles ne doivent pas l'inventer

JSON-LD permet d'exprimer clairement certaines informations déjà présentes sur la page. Nous utilisons les types pris en charge par Google lorsqu'ils correspondent réellement au contenu.

Pour une agence, `Organization` peut préciser l'identité de l'entreprise. `BreadcrumbList` décrit la hiérarchie. `LocalBusiness` n'est utilisé que lorsque les données locales correspondent à une implantation réelle. `Article` accompagne les véritables publications éditoriales.

Le balisage est validé avant déploiement et surveillé dans Search Console lorsqu'un rapport correspondant existe.

---


### Expérience Three.js — Knowledge Graph

**Concept visuel.** Entités et relations apparaissent sous forme de graphe propre.

**Narration et interaction.** Organization, breadcrumb et contenus se relient visuellement.

**UX / conversion.** Le JSON-LD réel reste dans le HTML, pas dans Three.js. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'donn-es-structur-es',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Google Search Console

**URL :** `/seo/google-search-console/`  
**Title :** Analyse Google Search Console et problèmes d'indexation | AUXIOMA  
**H1 :** Lire Search Console comme un diagnostic, pas comme une liste d'erreurs

Toutes les URL non indexées ne constituent pas un problème. Une redirection volontaire, une URL canonique alternative ou une page supprimée peut avoir exactement le comportement attendu.

Nous croisons les rapports avec l'intention technique du site. Une anomalie devient prioritaire lorsqu'une page importante n'est pas accessible, indexée ou interprétée comme prévu.

Les données de performance servent ensuite à identifier requêtes, pages et évolutions plutôt qu'à tirer des conclusions à partir d'une seule journée.

---


### Expérience Three.js — Search Observatory

**Concept visuel.** Courbes et pages abstraites apparaissent dans un observatoire 3D.

**Narration et interaction.** Le scroll passe de l'indexation à la performance puis au diagnostic.

**UX / conversion.** Ne pas reproduire faussement l'interface Google. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'google-search-console',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Visibilité dans les fonctionnalités IA de Google

**URL :** `/seo/visibilite-ia-google/`  
**Title :** Visibilité Google AI Overviews et AI Mode : SEO 2026 | AUXIOMA  
**H1 :** Être utile aux réponses génératives sans inventer un nouveau SEO

Google indique en 2026 que ses fonctionnalités génératives reposent toujours sur les systèmes fondamentaux de Search. Le bon réflexe n'est donc pas de bourrer les pages de phrases destinées à une IA.

Nous travaillons plutôt la matière que ces systèmes peuvent trouver utile : informations originales, expérience directe, définitions précises, exemples, comparaisons, limites et médias pertinents.

### Écrire des passages qui ont du sens seuls

Une information importante ne devrait pas dépendre de trois slogans placés plus haut. Des sections clairement titrées et des réponses explicites facilitent aussi la lecture humaine.

### Montrer plutôt que revendiquer

Dire « nous sommes experts » apporte peu. Expliquer pourquoi une migration a échoué, comment une architecture a été corrigée ou quelles contraintes ont déterminé un choix fournit une information beaucoup plus difficile à reproduire génériquement.

### Ne pas créer une usine à pages

Le query fan-out de Google peut explorer des sous-questions sans que le site possède une URL pour chaque formulation imaginable. Nous concentrons donc les contenus plutôt que de produire artificiellement des centaines de variantes.

---


### Expérience Three.js — Generative Discovery

**Concept visuel.** Une question centrale déclenche plusieurs chemins de recherche qui convergent vers des sources solides.

**Narration et interaction.** Le fan-out est illustré par des branches temporaires ; les contenus originaux restent les nœuds stables.

**UX / conversion.** Éviter toute représentation laissant croire à un accès interne aux systèmes Google. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'visibilit-dans-les-fonctionnalit-s-ia-de-google',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

# 5. SILO — RÉALISATIONS & ÉTUDES DE CAS

URL mère : `/realisations/`

## Page mère — Réalisations

**Title :** Réalisations web et études de cas | AUXIOMA  
**H1 :** Des projets racontés par leurs problèmes et leurs décisions

Une galerie de captures ne suffit pas à montrer une expertise technique. Nos études de cas expliquent le contexte, les contraintes, les décisions et le résultat.

Chaque cas publié doit utiliser des faits que nous pouvons réellement documenter. Les chiffres ne sont ajoutés que lorsqu'ils sont vérifiables et communicables.

### Structure recommandée d'une étude de cas

1. contexte ;
2. problème initial ;
3. contraintes ;
4. diagnostic ;
5. options envisagées ;
6. solution retenue et raisons ;
7. architecture / technologies ;
8. difficultés rencontrées ;
9. résultat observable ;
10. enseignements.

Cette structure produit naturellement du contenu original issu de l'expérience, particulièrement précieux pour les visiteurs comme pour les systèmes de recherche.

---


### Expérience Three.js — Project Archive

**Concept visuel.** Les réalisations sont présentées comme des objets/projets dans un espace d'archive numérique.

**Narration et interaction.** La navigation entre cas déplace la caméra vers un projet sans remplacer les liens HTML.

**UX / conversion.** Chargement des assets de cas au survol anticipé ou à l'entrée viewport. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'page-m-re-r-alisations',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Étude de cas — Plateforme Symfony

**URL :** `/realisations/plateforme-symfony/`  
**Title :** Étude de cas : développement d'une plateforme Symfony | AUXIOMA  
**H1 :** D'une accumulation de règles métier à une plateforme Symfony structurée

> **Important :** remplacer les éléments génériques ci-dessous par les faits vérifiables du projet avant publication.

Le projet ne consistait pas à créer « quelques formulaires ». Plusieurs profils utilisaient la plateforme avec des droits différents, tandis que les objets métier changeaient d'état au fil du processus.

Nous avons commencé par représenter ces états et les transitions autorisées. Cette décision a permis de sortir une partie de la logique des contrôleurs et d'éviter que les mêmes règles soient recopiées à plusieurs endroits.

Symfony a fourni le cadre pour la sécurité, la validation, les commandes et les traitements asynchrones. La valeur du projet ne venait toutefois pas du framework lui-même : elle venait de la traduction correcte du processus métier.

**À compléter avant publication :** captures autorisées, architecture réelle, difficulté technique concrète, résultat mesurable.

---


### Expérience Three.js — Architecture Replay

**Concept visuel.** La scène rejoue les grandes étapes du projet : règles, états, architecture, résultat.

**Narration et interaction.** Chaque étape n'est activée que si les faits correspondants sont publiables.

**UX / conversion.** Pas de métriques inventées. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'tude-de-cas-plateforme-symfony',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Étude de cas — E-commerce PrestaShop

**URL :** `/realisations/ecommerce-prestashop/`  
**Title :** Étude de cas : optimisation d'un e-commerce PrestaShop | AUXIOMA  
**H1 :** Quand le catalogue devient plus complexe que la boutique

Sur une boutique qui évolue depuis plusieurs années, le problème visible — lenteur, erreurs ou indexation — est rarement isolé.

L'étude de cas doit montrer comment modules, thème, catalogue, tâches planifiées et serveur ont été analysés ensemble. Elle peut expliquer une correction d'override, une réduction des modules, une stratégie de redirections ou une optimisation du catalogue.

L'intérêt éditorial vient des arbitrages réels : ce qui a été conservé, ce qui a été supprimé et pourquoi.

**À compléter :** métriques avant/après uniquement si elles sont disponibles et fiables.

---


### Expérience Three.js — Commerce Diagnostic Replay

**Concept visuel.** Une boutique complexe est démontée visuellement puis reconstruite autour des composants conservés.

**Narration et interaction.** Les améliorations visuelles correspondent uniquement aux actions réellement documentées.

**UX / conversion.** Captures réelles en HTML/images lorsqu'autorisées. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'tude-de-cas-e-commerce-prestashop',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

# 6. SILO — AGENCE

URL mère : `/agence/`

## À propos

**URL :** `/agence/a-propos/`  
**Title :** AUXIOMA Web Agency — développement web et e-commerce  
**H1 :** Une agence web avec une culture de développeur

AUXIOMA accompagne des entreprises sur la création, la reprise et l'évolution de leurs outils web. Notre approche est volontairement technique : comprendre l'existant avant de proposer, réduire la complexité lorsqu'elle n'apporte rien et documenter les choix importants.

Nous travaillons sur des sites professionnels, boutiques e-commerce, applications métier et plateformes sur mesure.

### L'expérience doit être visible dans le travail

Une page « À propos » ne doit pas seulement aligner des années d'expérience. Elle doit permettre de vérifier qui réalise le travail, quelles technologies sont réellement maîtrisées et quels projets ont été menés.

Cette page doit donc relier naturellement les expertises, réalisations et profils professionnels publics de l'agence.

> Ajouter ici uniquement les informations d'entreprise, dates, références et certifications réellement vérifiables.

---


### Expérience Three.js — AUXIOMA Core

**Concept visuel.** Une signature 3D sobre représente l'agence comme un noyau reliant métiers, technologies et projets.

**Narration et interaction.** Le mouvement est plus institutionnel, lent et stable.

**UX / conversion.** Priorité absolue aux informations vérifiables et au contact. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'propos',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Méthodologie

**URL :** `/agence/methodologie/`  
**Title :** Notre méthode de conception et développement web | AUXIOMA  
**H1 :** Comprendre, réduire l'incertitude, puis développer

Nous commençons par les zones qui peuvent faire échouer le projet : règle métier ambiguë, dépendance externe, migration de données, volumétrie ou contrainte d'hébergement.

Une fois ces risques clarifiés, le projet est découpé en éléments testables. Les choix structurants sont documentés suffisamment tôt pour éviter qu'une décision temporaire devienne une architecture définitive.

### 1. Cadrage

Objectifs, utilisateurs, données, contraintes et critères de réussite.

### 2. Architecture

Modèle de données, responsabilités, interfaces, intégrations et sécurité.

### 3. Construction

Développement par incréments contrôlables plutôt qu'une longue période sans version utilisable.

### 4. Vérification

Tests fonctionnels, responsive, performance, erreurs, indexabilité lorsque le projet est public.

### 5. Mise en production et suivi

Déploiement préparé, sauvegarde, surveillance et plan de retour lorsque nécessaire.

---


### Expérience Three.js — Five-Step Build

**Concept visuel.** Cinq stations représentent cadrage, architecture, construction, vérification et production.

**Narration et interaction.** Le scroll fait avancer la caméra d'une station à la suivante.

**UX / conversion.** Chaque station correspond exactement au H3 HTML. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'm-thodologie',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

## Agence web Le Havre

**URL :** `/agence/agence-web-le-havre/`  
**Title :** Agence web au Havre — AUXIOMA  
**H1 :** Une agence web au Havre pour des projets qui dépassent la simple vitrine

Cette page locale doit être publiée uniquement avec les informations réelles de présence de l'agence.

AUXIOMA accompagne depuis Le Havre des entreprises qui ont besoin de créer ou faire évoluer leur présence web : site professionnel, e-commerce, développement métier, maintenance ou intervention technique.

Le fait d'être local n'empêche pas de travailler à distance. Réunions techniques, suivi et déploiements peuvent être réalisés avec des équipes situées ailleurs en France ou à l'international.

### Une page locale doit rester locale

Ajouter ici des éléments réellement propres à l'activité au Havre : adresse professionnelle publiable, zone d'intervention, projets locaux autorisés, photographies originales ou modalités de rendez-vous. Ne pas dupliquer ce texte pour Rouen, Caen, Paris ou d'autres villes sans présence et contenu spécifiques.

---


### Expérience Three.js — Local Anchor

**Concept visuel.** Une ancre géométrique localise symboliquement l'agence puis relie des projets distants.

**Narration et interaction.** La présence locale reste un point stable ; les connexions montrent la capacité de travail à distance.

**UX / conversion.** Pas de faux landmarks ni de fausse implantation. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'agence-web-le-havre',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

# 7. SILO — RESSOURCES

URL mère : `/blog/`

## Page mère — Ressources

**Title :** Ressources développement web, e-commerce et SEO | AUXIOMA  
**H1 :** Des retours techniques issus de problèmes que nous rencontrons réellement

Le blog n'a pas vocation à publier quotidiennement pour « alimenter Google ». Nous privilégions des contenus qui peuvent aider un développeur, un responsable de site ou un dirigeant à prendre une décision.

Un bon sujet peut naître d'une migration difficile, d'une erreur rencontrée en production, d'un problème d'indexation ou d'un choix d'architecture.

### Formats à privilégier

- retour d'expérience ;
- diagnostic détaillé ;
- comparaison avec critères explicites ;
- tutoriel issu d'un cas réel ;
- analyse de migration ;
- explication d'une erreur et de sa résolution ;
- mesure avant/après lorsqu'elle est reproductible.

### Ce que nous évitons

Les articles génériques du type « 10 astuces pour réussir votre site » sans expérience ni information originale. Ils apportent peu au lecteur et correspondent précisément au contenu interchangeable que Google invite à dépasser en 2026.

---


### Expérience Three.js — Knowledge Library

**Concept visuel.** Articles et retours d'expérience forment une bibliothèque spatiale légère.

**Narration et interaction.** Les catégories se regroupent au scroll sans masquer les cartes HTML.

**UX / conversion.** Les aperçus et liens restent totalement accessibles sans WebGL. Le H1, les explications, liens et CTA restent toujours dans le DOM et utilisables indépendamment de WebGL.

**Implémentation de la page.**

```js
export const config = {
  id: 'page-m-re-ressources',
  maxDpr: 1.5,
  reducedMotion: true,
  mount(experience) {
    // Réutiliser GridFloor, ParticleField et les composants communs.
    // Monter uniquement les objets nécessaires au concept de cette page.
  },
  update(experience) {
    // Mouvement subtil dépendant du temps/pointeur.
    // L'état narratif est piloté par les sections [data-scene-step].
  }
};
```

**Mobile / accessibilité / performance.** Réduire particules, post-processing et profondeur sur petit écran. Conserver `prefers-reduced-motion`, canvas `aria-hidden`, rendu suspendu si la page n'est plus visible et chargement des assets secondaires après le contenu critique.

# 8. Maillage interne du silo

## Principe

Le maillage ne doit pas former des silos hermétiques. Une page doit lier une autre page lorsqu'elle constitue réellement l'étape suivante du raisonnement.

### Exemples

`/services/developpement-web-sur-mesure/`  
→ `/expertises/php/`  
→ `/expertises/symfony/`  
→ `/realisations/plateforme-symfony/`

`/services/ecommerce/`  
→ `/services/prestashop/`  
→ `/expertises/prestashop/`  
→ `/realisations/ecommerce-prestashop/`

`/seo/audit-seo-technique/`  
→ `/seo/google-search-console/`  
→ `/services/core-web-vitals/`  
→ article de retour d'expérience pertinent.

### Ancres

Préférer :

- `notre expertise Symfony`
- `audit SEO technique`
- `optimisation des Core Web Vitals`

plutôt que :

- `cliquez ici`
- `en savoir plus`
- une répétition artificielle du mot-clé exact à chaque lien.

---

# 9. Checklist de publication 2026

Avant de publier une page :

- [ ] L'intention est-elle différente des autres pages ?
- [ ] Le contenu apporte-t-il une information ou expérience originale ?
- [ ] Les affirmations sur AUXIOMA sont-elles vérifiables ?
- [ ] Title et H1 décrivent-ils honnêtement la page ?
- [ ] La page répond-elle rapidement au besoin avant le discours commercial ?
- [ ] Les H2/H3 facilitent-ils la lecture ?
- [ ] Les liens internes sont-ils utiles et crawlables ?
- [ ] Les images importantes sont-elles originales ou réellement utiles ?
- [ ] Le texte alternatif décrit-il l'image lorsqu'une description est nécessaire ?
- [ ] La page fonctionne-t-elle correctement sur mobile ?
- [ ] HTTPS et canonical sont-ils corrects ?
- [ ] Robots/noindex n'empêchent-ils pas involontairement l'indexation ?
- [ ] Le sitemap contient-il l'URL canonique si elle doit être indexée ?
- [ ] Les données structurées correspondent-elles exactement au contenu visible ?
- [ ] La page est-elle satisfaisante même sans trafic provenant de Google ?
- [ ] Évite-t-elle les paragraphes écrits uniquement pour placer des mots-clés ?
- [ ] Évite-t-elle de dupliquer une page pour une simple variante de requête ?
- [ ] Les éventuelles informations datées ont-elles une date de mise à jour utile ?
- [ ] Une étude de cas distingue-t-elle clairement faits réels et éléments à compléter ?

---

---

# 10. Architecture des templates et scripts de page

## Attributs de narration

Chaque page utilise le même vocabulaire HTML :

```html
<section class="hero" data-scene-step="intro">...</section>
<section data-scene-step="problem">...</section>
<section data-scene-step="solution">...</section>
<section data-scene-step="proof">...</section>
<section data-scene-step="cta">...</section>
```

Le script Three.js ne cherche jamais le contenu SEO pour le déplacer dans le canvas. Il reçoit uniquement un état narratif.

## Contrôleur de scène

```js
export class SceneStoryController {
  constructor(experience) {
    this.experience = experience;

    this.observer = new IntersectionObserver(
      entries => this.onEntries(entries),
      { threshold: [0.35, 0.55, 0.75] }
    );

    document
      .querySelectorAll('[data-scene-step]')
      .forEach(el => this.observer.observe(el));
  }

  onEntries(entries) {
    const current = entries
      .filter(entry => entry.isIntersecting)
      .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];

    if (!current) return;

    this.experience.setStep?.(
      current.target.dataset.sceneStep
    );
  }

  destroy() {
    this.observer.disconnect();
  }
}
```

## Dégradation progressive

```js
const canUseWebGL = (() => {
  try {
    const canvas = document.createElement('canvas');
    return Boolean(
      window.WebGLRenderingContext &&
      (canvas.getContext('webgl2') || canvas.getContext('webgl'))
    );
  } catch {
    return false;
  }
})();

if (!canUseWebGL) {
  document.documentElement.classList.add('no-webgl');
}
```

Le CSS `.no-webgl` fournit un fond graphique statique. Aucun message d'erreur n'est nécessaire : le site reste entièrement fonctionnel.

## Gestion du niveau de qualité

```js
function getQualityProfile() {
  const mobile = matchMedia('(max-width: 767px)').matches;
  const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
  const memory = navigator.deviceMemory ?? 4;

  if (reduced) return 'static';
  if (mobile || memory <= 4) return 'low';
  return 'high';
}
```

Ce profil n'est qu'un indice. La scène doit également pouvoir réduire dynamiquement sa qualité si le temps de frame se dégrade.

## Navigation

La navigation ne doit jamais attendre la fin d'une animation. Lorsqu'une transition visuelle entre deux pages est souhaitée, elle accompagne la navigation au lieu de la bloquer.

Si une navigation côté client est utilisée, il faut :

- mettre à jour correctement `title`, meta et canonical côté rendu serveur/build ;
- conserver des URL réelles ;
- restaurer le focus après changement de page ;
- annoncer le nouveau contenu aux technologies d'assistance ;
- nettoyer l'ancienne scène ;
- charger uniquement le module Three.js de la nouvelle route.

## CTA

Les CTA principaux utilisent toujours des éléments HTML :

```html
<a href="/contact/" class="btn btn-primary">
  Discuter de votre projet
</a>
```

Un objet 3D peut réagir au survol du bouton, mais il ne remplace pas le bouton.

## Formulaires

Les formulaires restent hors canvas. La scène peut se calmer ou se flouter légèrement pendant la saisie afin de réduire la distraction.

## Mesure

Mesurer séparément :

- LCP ;
- INP ;
- CLS ;
- poids JS initial ;
- poids des assets 3D ;
- temps CPU/GPU ;
- abandon avant interaction ;
- clics CTA ;
- conversion formulaire.

La 3D est conservée lorsqu'elle améliore la perception et l'engagement sans dégrader l'accès au contenu. Un effet qui coûte beaucoup et n'apporte rien est supprimé.

---

# 11. Checklist Three.js + Google avant mise en production

- [ ] Le H1 est visible dans le HTML sans attendre Three.js.
- [ ] Le contenu principal existe sans canvas.
- [ ] Les liens importants sont de vrais liens HTML crawlables.
- [ ] Aucun texte SEO essentiel n'est uniquement une texture ou un mesh.
- [ ] Le LCP ne dépend pas du téléchargement d'un modèle 3D.
- [ ] `prefers-reduced-motion` est respecté.
- [ ] La scène est utilisable ou neutralisée sur mobile peu puissant.
- [ ] Le canvas décoratif est `aria-hidden`.
- [ ] La navigation clavier fonctionne.
- [ ] Les CTA restent HTML.
- [ ] Les formulaires restent HTML.
- [ ] Les changements de scène n'introduisent pas de CLS.
- [ ] Les interactions Three.js ne bloquent pas le thread principal au point de dégrader l'INP.
- [ ] Les textures sont dimensionnées au besoin réel.
- [ ] Les objets répétés utilisent instancing lorsque pertinent.
- [ ] Les ressources abandonnées sont `dispose()`.
- [ ] Le rendu est réduit/suspendu lorsque l'onglet est masqué.
- [ ] Les routes secondaires chargent leurs assets à la demande.
- [ ] La page reste satisfaisante lorsque WebGL est désactivé.
- [ ] Les données structurées décrivent le contenu HTML réel.
- [ ] Les pages restent uniques et ne sont pas créées en masse pour des variantes de requêtes.
- [ ] Les études de cas utilisent uniquement des faits vérifiables.
- [ ] Search Console est contrôlée après mise en production.
- [ ] Les performances sont testées sur mobile réel, pas seulement sur desktop.


# 12. Références officielles Google consultées — octobre 2026

1. **Google Search Essentials**  
   https://developers.google.com/search/docs/essentials

2. **Creating helpful, reliable, people-first content**  
   https://developers.google.com/search/docs/fundamentals/creating-helpful-content

3. **Optimiser un site pour les fonctionnalités d'IA générative dans Google Search**  
   https://developers.google.com/search/docs/fundamentals/ai-optimization-guide?hl=fr

4. **Google Search Central — nouvelle ressource IA générative, 15 mai 2026**  
   https://developers.google.com/search/blog/2026/05/a-new-resource-for-optimizing

5. **Google Search documentation updates**  
   https://developers.google.com/search/updates

6. **Page experience / Core Web Vitals**  
   https://developers.google.com/search/docs/appearance/page-experience

7. **Search appearance et données structurées prises en charge**  
   https://developers.google.com/search/docs/appearance

8. **Organization structured data**  
   https://developers.google.com/search/docs/appearance/structured-data/organization

9. **JavaScript SEO basics**  
   https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics

10. **LocalBusiness structured data**  
   https://developers.google.com/search/docs/appearance/structured-data/local-business?hl=fr

---

## Note éditoriale importante

Ce document fournit le socle éditorial et la différenciation de ton de chaque page. Avant publication, les passages relatifs aux **réalisations, chiffres, clients, ancienneté, localisation, certifications ou résultats** doivent être remplacés ou complétés uniquement avec des informations factuelles et vérifiables d'AUXIOMA. C'est particulièrement important pour transformer ce socle en contenu d'expérience réellement unique plutôt qu'en texte institutionnel générique.