# 04 — Container queries : adoption au fil de l'eau

> **Spec** : CSS container queries — tier **recommended**
> **Verdict** : 🟠 FAIL formel, **basse urgence assumée** · **Priorité : P4 / backlog**
> **Effort estimé** : néant à court terme — règle d'architecture pour les prochains composants

## Constat

- **0** `@container` / `container-type` dans le CSS du site.
- Le responsive repose intégralement sur l'approche viewport : **79 règles `@media`**, 5 `grid-template-columns`, 2 `display: grid`.
- Composants candidats : cartes services, grille du blog, blocs départements.

## Pourquoi ce n'est PAS un chantier à ouvrir maintenant

Jugement d'applicabilité honnête : la spec recommande les container queries pour que les composants s'adaptent à **l'espace qui leur est donné** plutôt qu'au viewport — décisif quand un même composant vit dans des contextes de largeur variable (sidebar, colonne, pleine page). Ici, les cartes du site sont réutilisées dans un petit nombre de slots de layout **fixes** : l'approche `@media` actuelle est fonctionnellement adéquate. Retrofitter 79 media queries sur un template fini serait un coût sans gain utilisateur mesurable.

## Règle à adopter (le vrai livrable de cette issue)

**Tout nouveau composant réutilisable se dimensionne par container query, plus jamais par media query :**

```css
.card-slot { container-type: inline-size; }

@container (width > 28rem) {
  .service-card { grid-template-columns: auto 1fr; }  /* passe en horizontal quand LA CARTE a la place */
}
```

Occasions naturelles d'introduction :

1. **L'index des communes** à créer pour le maillage interne ([SEO issue 02](../../audit-seo/issues/02-maillage-interne.md)) — nouveau composant, le faire directement en container queries.
2. Toute refonte des cartes blog/services.

Support : Baseline Widely available (tous navigateurs depuis 2023) — aucun risque de compat.

## Vérification (au fil des nouveaux composants)

- Chaque nouveau composant : redimensionner son conteneur (pas le viewport) dans DevTools → le composant s'adapte.
- Tendance : le ratio `@container` / `@media` du CSS doit monter à chaque nouveau composant livré.