# courcellematthi.eu
Site personnel et CV en ligne de Matthieu Courcelle.
Statique, sans dépendance, sans étape de compilation. Aucun framework, aucun
gestionnaire de paquets, aucun outil de build : les fichiers déposés sur le
serveur sont exactement ceux qui sont servis au navigateur.
---
## Arborescence
```
.
├── index.html Document unique, sections ancrées
├── favicon.ico Repli multi-résolutions (16/32/48)
├── favicon.svg Icône vectorielle — monogramme MC
├── robots.txt Directives d'exploration, y compris robots IA
├── sitemap.xml Plan du site
├── site.webmanifest Manifeste d'application web
├── llms.txt Résumé structuré pour agents conversationnels
├── humans.txt Crédits (convention humanstxt.org)
├── .htaccess Configuration Apache (mutualisé)
├── nginx.conf.example Configuration Nginx (serveur dédié, hors conteneur)
├── Dockerfile Image du conteneur
├── docker-compose.yaml Déploiement Coolify (mode Compose)
├── .dockerignore Exclusions du contexte de build
├── DEPLOIEMENT-COOLIFY.md Guide de mise en ligne pas à pas
├── deploy/
│ └── nginx.conf Configuration Nginx DANS le conteneur
├── .well-known/
│ └── security.txt Contact de divulgation (RFC 9116)
└── assets/
├── css/
│ ├── tokens.css Variables + ordre de cascade
│ ├── base.css Reset et éléments HTML natifs
│ ├── layout.css Conteneurs, en-tête, navigation, grilles
│ ├── components.css Blocs réutilisables (BEM)
│ ├── utilities.css Classes utilitaires
│ └── print.css Feuille d'impression (media="print")
├── js/
│ ├── main.js Point d'entrée (module ES)
│ └── modules/
│ ├── navigation.js Menu mobile, piège de focus
│ ├── scroll-spy.js Section active (IntersectionObserver)
│ ├── back-to-top.js Bouton de remontée
│ └── copy-email.js Copie de l'adresse e-mail
└── img/
├── og-image.png Bannière de partage 1200×630
├── apple-touch-icon.png Écran d'accueil iOS
├── icon-192.png PWA
├── icon-512.png PWA
├── icon-maskable-512.png PWA, zone sûre Android
├── favicon-16/32/48.png Replis
└── safari-pinned-tab.svg Onglet épinglé Safari
```
---
## Architecture CSS
### Couches en cascade
L'ordre de priorité est déclaré une seule fois, en tête de `tokens.css` :
```css
@layer tokens, base, layout, components, utilities;
```
Conséquence : une règle de `utilities` l'emporte sur une règle de `components`
même si son sélecteur est moins spécifique, et l'ordre des balises ``
dans le `` n'a aucune incidence. C'est ce qui permet de se passer
entièrement de `!important` et des sélecteurs à rallonge écrits uniquement
pour gagner un duel de spécificité.
### Pas de `@import`
Les feuilles sont liées séparément dans le ``. Un `@import` obligerait
le navigateur à télécharger et analyser le fichier parent avant de découvrir
l'existence de l'enfant : les requêtes s'enchaînent en série au lieu de
partir en parallèle. Sur cinq fichiers, l'écart est mesurable.
### Jetons de conception
Toute couleur, taille, espacement ou durée est déclarée dans `tokens.css`.
Aucune valeur littérale n'apparaît ailleurs. Changer l'identité visuelle du
site ne demande donc la modification que d'un seul fichier.
Le fichier ne contient aucun jeton inutilisé : 56 variables définies,
56 utilisées.
### Propriétés logiques
`inline-size` plutôt que `width`, `padding-block` plutôt que
`padding-top/bottom`, `inset-inline-start` plutôt que `left`. Le site est
en français, mais ces propriétés sont aujourd'hui le standard et rendent
une éventuelle version en écriture de droite à gauche triviale.
### Typographie fluide
`clamp()` sur toutes les tailles de titre. Le terme central mêle `rem` et
`vw` : le `rem` garantit que le zoom navigateur et la taille de police
système continuent d'agir (une valeur en `vw` seule casserait
l'accessibilité), le `vw` apporte la fluidité entre les points de rupture.
Résultat : une seule media query dans tout le projet, pour la bascule du
menu en mode mobile.
---
## Architecture JavaScript
### Amélioration progressive
Le site est intégralement lisible, navigable et imprimable sans JavaScript.
Aucun contenu n'est injecté par script — le HTML servi est complet. C'est ce
qui garantit l'indexation par les moteurs et la lecture par les agents
conversationnels, dont beaucoup n'exécutent pas JavaScript.
Les quatre modules n'ajoutent que du confort : repli du menu sur petit écran,
surbrillance de la section lue, bouton de remontée, copie de l'adresse.
### Modules ES natifs
`