---
suivi: 1319
date: 2026-08-13
sujet: marche_barre_onglet_contenu
chantier: marches_compta
type: fix
statut: poussé
hash: e1cdebcd
fichiers:
  - resources/js/Pages/Marches/Show.vue
  - resources/js/Layouts/AppShell.vue
  - database/data/journal_mises_a_jour_post_2026_06_12.php
  - public/build/
  - docs/suivi/SUIVI_1319_barre_jointive_onglet_contenu.md
---

## PROMPT ENVOYÉ

Corriger #1318 en prod (nav privée) : (1) espace restant entre filet doré et barre
blanche — cause, pas compensation ; (2) `#synthese` surligne SYNTHÈSE mais affiche
le Résumé. HEAD attendu `9d3723ba`. Ne pas toucher `tabIdFromHash`, `useFormatters`,
écrans `tone="gold"`.

## SYNTHÈSE

### Fiches lues
- `#1318` LEÇON : sticky + `pt-10` = compensation ; Teleport hors main. **Conservé.**
  Le `:disabled` + `marcheSubnavHostReady` (ajouté au #1318) est la cause des deux
  défauts restants.
- `#1317` LEÇON : ne plus compenser un padding par `pt-10` / marge négative.
- `#1315` : défaut RÉSUMÉ, `#infos` → résumé — **`tabIdFromHash` non modifié.**
- `#1316` / `#1270` : Teleport dépôt = `v-if` hôte plutôt que `:disabled` tardif.

### Défaut 1 — espace (cause)
1. `resources/js/Layouts/AppShell.vue` L1995 (inchangé) : `<main class="… p-8">`
   → Tailwind `p-8` = `padding: 2rem` (top compris). Fond du parent L1042
   `background-color: #FAFAF8` (transparent sur le padding du main).
2. `resources/js/Pages/Marches/Show.vue` Teleport `#1318` :
   `:disabled="!marcheSubnavHostReady"` avec `marcheSubnavHostReady` à `false`
   jusqu’à `onMounted` → 1er paint (et tout tick où l’hôte n’est pas encore
   résolu) : barre blanche **dans** le `main`, sous les 2rem.
3. Hôte `#marche-subnav-host` (AppShell ~L1893) : `div` vide en item flex, sans
   `display` explicite → boîte + `line-height: normal` héritée possible entre
   filet doré et enfant téléporté.

**Supprimé :** `:disabled="!marcheSubnavHostReady"`, `marcheSubnavHostReady`,
`refreshMarcheSubnavHost`, `nextTick` de résolution d’hôte. Teleport en `defer`
(Vue 3.5) : pas de rendu dans le `main` si la cible manque. Hôte `class="contents"`
: plus de boîte wrapper. **Pas** de marge négative, **pas** de `pt-10`, **pas**
de changement du `p-8` du `main` (tous les autres écrans).

### Défaut 2 — onglet / contenu
`activeTab = ref('resume')` puis `tabIdFromHash()` seulement dans `onMounted`.
1er rendu = toujours RÉSUMÉ. Le même `onMounted` activait le Teleport → déplacement
DOM de la barre ; `marcheSubNavItems` (barre) prenait le hash (`synthese`), les
`v-if` des panneaux pouvaient rester sur le 1er paint (`resume`).

**Une source :** `activeTab` (déjà partagé barre + panneaux). Init
`ref(tabIdFromHash())` pour que le 1er paint soit déjà le bon hash.
`tabIdFromHash`, remap `#infos`, flash `ouvrir_onglet` : **inchangés** (corps /
conditions). `onMounted` rappelle encore `tabIdFromHash()` + listener `hashchange`.

### AppShell
Oui, uniquement `class="contents"` sur `#marche-subnav-host` (`v-if` Marches/Show).
`main.p-8` non modifié. Écrans `gold` : hôte absent, pas de changement de DOM.

### Vérification écran
À renseigner après tests (prod / nav privée). Lot non validé tant que non faits.

## DÉPLOIEMENT-TEST

```bash
git pull origin main
php artisan optimize:clear
php artisan view:clear
php artisan journal:sync
```

## LEÇON

Un Teleport `:disabled` jusqu’à `onMounted` replace la barre dans le `main.p-8`
au premier paint et peut désynchroniser barre (re-montée) / panneaux (`v-if`).
`defer` + cible déjà dans le layout parent, et `activeTab` initialisé depuis le
hash, traitent la cause. Ne pas compenser un padding par une marge négative.
`display:contents` sur un hôte Teleport évite une boîte flex parasite ; ne pas
l’appliquer à un hôte qui a besoin d’être sticky (dépôt #1270).