feat(#173): mapping type_code → teinte UI (sans couleur API)

Aqua/bleu/pêche/rose/lavande dérivés du type ; retrait du champ couleur.

Co-authored-by: Cursor <cursoragent@cursor.com>

backend/src/modules/cards/cards.service.spec.ts

@@ -80,7 +80,6 @@ describe('CardsService (#194)', () => {
       audience_resolver: 'couple_parents',
       response_mode: CardResponseModeType.ACCEPT_REFUSE,
       retention_days: 14,
-      couleur: 'lavender',
     });
     amChildrenRepo.findOne.mockResolvedValue({
       id: 'pl-1',
@@ -111,7 +110,6 @@ describe('CardsService (#194)', () => {
       modifie_le: new Date(),
       type: {
         titre: 'Congé AM',
-        couleur: 'lavender',
         response_mode: CardResponseModeType.ACCEPT_REFUSE,
         retention_days: 14,
       },

backend/src/modules/cards/cards.service.ts

@@ -53,9 +53,32 @@ export class CardsService {
     private readonly realtime: CardsRealtimeService,
   ) {}
 
-  async listerTypes(role: RoleType): Promise<CardType[]> {
+  async listerTypes(role: RoleType): Promise<
+    Pick<
+      CardType,
+      | 'code'
+      | 'system'
+      | 'titre'
+      | 'emitter_roles'
+      | 'recipient_roles'
+      | 'audience_resolver'
+      | 'response_mode'
+      | 'retention_days'
+    >[]
+  > {
     const all = await this.typesRepo.find({ where: { system: true } });
-    return all.filter((t) => t.emitter_roles.includes(role));
+    return all
+      .filter((t) => t.emitter_roles.includes(role))
+      .map((t) => ({
+        code: t.code,
+        system: t.system,
+        titre: t.titre,
+        emitter_roles: t.emitter_roles,
+        recipient_roles: t.recipient_roles,
+        audience_resolver: t.audience_resolver,
+        response_mode: t.response_mode,
+        retention_days: t.retention_days,
+      }));
   }
 
   async lister(
@@ -469,7 +492,6 @@ export class CardsService {
       id: card.id,
       type_code: card.type_code,
       titre: card.type?.titre ?? card.type_code,
-      couleur: card.type?.couleur ?? null,
       id_placement: card.id_placement,
       id_evenement: card.id_evenement ?? null,
       operation: card.operation,

backend/src/modules/cards/dto/cards.dto.ts

@@ -91,9 +91,6 @@ export class CarteDto {
   @ApiProperty()
   titre: string;
 
-  @ApiPropertyOptional()
-  couleur?: string | null;
-
   @ApiProperty()
   id_placement: string;
 

docs/24_DECISIONS-PROJET.md

@@ -572,14 +572,22 @@ POST /repos/jmartin/petitspas/pulls/{index}/merge
 
 ### 32. Module Absences + Cartes (séparation back / collecte)
 
-**Décision** : ✅ **Back `evenements_agenda` = vérité métier** ; **Cartes = file d’attention / collecte** (plugin isolé). Types SYSTEM (absence, congé, arrêt) indéboulonnables ; types OPTIONNELS (sondages…) plus tard. Annulation = DELETE. `expire_at` dès V1.
+**Décision** : ✅ **Back `evenements_agenda` = vérité métier / agenda** ; **Cartes = file d’attention** (plugin isolé). Types SYSTEM (absence, congé, arrêt) indéboulonnables ; types OPTIONNELS (sondages, soins enfant, école, mairie, sorties…) plus tard. Annulation = DELETE. `expire_at` dès V1.
 
 **Justification** :
 - Premier vrai module d’interaction multi-acteurs
-- Évite de stocker l’historique congés dans des bulles éphémères
-- Portabilité / généricité des cartes sans coupler le métier garde
+- Évite de stocker l’historique dans des bulles éphémères
+- Portabilité / généricité des cartes sans coupler le métier
+- **Différence avec le blog** : les cartes du fil = **événements d’agenda** (période + placement + historique) ; le blog = récit narratif du jour
 
-**Flux V1** : BDD absences → API liste/CRUD → module Cartes SYSTEM → front bulles (séparé).
+**Modèle données** :
+- Table **`evenements_agenda`** (ex-`absences_garde`, rename [#205](https://git.ptits-pas.fr/jmartin/petitspas/issues/205)) — nom volontairement ouvert
+
+**UI** : la **couleur** des bulles est un mapping **front** (`type_code` → teinte). L’API n’expose pas `couleur`.
+
+**Flux V1** : BDD agenda → API liste/CRUD → module Cartes SYSTEM → front bulles (séparé).
+
+**Réf. détail** : `docs/32_MINI-SPEC-BULLES-CARTES.md`
 
 ---
 

docs/31_MINI-SPEC-QUOTIDIEN-PARENT-AM.md

@@ -103,7 +103,7 @@ Avec données peuplées, sur au moins 2 supports :
 
 - Parent : `frontend/lib/screens/home/parent_screen/ParentDashboardScreen.dart` + `dashbord_parent/`
 - AM : `frontend/lib/screens/am/am_dashboard_screen.dart` (placeholder)
-- Cartes couleurs : `frontend/assets/cards/` (7 teintes max)
+- Cartes couleurs : `frontend/assets/cards/` (8 teintes max)
 
 ## 9. Ordre de build suggéré
 

docs/32_MINI-SPEC-BULLES-CARTES.md

@@ -0,0 +1,184 @@
+# Mini-spec · Bulles / file d’attention (#173)
+
+*Front · octobre 2026 — alignement product / API.*
+
+---
+
+## 1. Contexte / objectif
+
+Les bulles (cartes) sont la **file d’attention** du quotidien parent / AM : décisions et infos proches (congés, arrêt maladie AM, absences, soins / bobos enfant…).
+
+**Différence fondamentale avec le blog :**  
+les cartes de ce fil sont des **événements d’agenda** (période, placement, historique métier loggé).  
+Le **blog** = récit / mémoire narrative du jour (photos, texte) — pas une ligne d’agenda.
+
+Les cartes restent une **mémoire courte** de file (`purge_at` sur la bulle) ; la **source de vérité agenda** reste le back métier.
+
+Table agenda : **`evenements_agenda`** (ex-`absences_garde`, [#205](https://git.ptits-pas.fr/jmartin/petitspas/issues/205) fait) — conteneur ouvert (absences, congés, soins, école, mairie, sorties…). Les bulles notifient ; l’agenda historise.
+
+Voir aussi `31_MINI-SPEC-QUOTIDIEN-PARENT-AM.md`.
+
+Cette note formalise :
+1. Ce qui est en place côté front (#173).
+2. Le contrat API (sans couleur).
+3. La **palette UI** (front only, dérivée du `type_code`).
+4. La nouvelle famille **soins / bobo enfant** (rose) — AM → parents.
+5. Idées futures.
+
+---
+
+## 2. Contrat API
+
+Endpoint principal : `GET /api/v1/cards` (filtre couple / placement).
+
+| Champ | Rôle UI |
+|-------|---------|
+| `type_code` | Layout + libellé + **couleur / icône (mapping front)** |
+| `titre` | Fallback si `type_code` inconnu |
+| `statut` | `ouverte` · `refusee` · `traitee` |
+| `response_mode` | `none` · `ack` · `accept_refuse` |
+| `is_creator` | Masque les boutons réponse pour le créateur |
+| `payload.date_debut` / `date_fin` | Période (agenda) |
+| `payload.motif` | Texte libre / détail |
+| `last_refuse_comment` | Si `refusee` |
+| `id_absence` | Lien métier agenda (si applicable) |
+| `purge_at` | Péremption de la bulle dans la file |
+
+**Pas de champ `couleur` dans l’API.**  
+La teinte pastel est **100 % front** : table de mapping `type_code` → asset (`card_*_h.png`). Le back ne gère pas la charte graphique.
+
+**Règle front :** le destinataire peut répondre si `!is_creator && statut == ouverte && response_mode != none`.
+
+---
+
+## 3. Évolutions front déjà livrées (#173)
+
+### 3.1 Feed
+
+- Widget partagé `CartesFeed` (parent + AM).
+- Fond via widget `Carte` (9-slice horizontal) selon mapping local.
+- Actions via **modales** accepter / refuser / ack.
+- Libellés UI :
+  - `conge_am` → « Demande de congés »
+  - `arret_maladie_am` → « Arrêt maladie »
+  - `absence_enfant` (+ `_modif`) → « Notification d’absence »
+
+### 3.2 Carte **congés** (`conge_am`)
+
+| Élément | Comportement |
+|---------|----------------|
+| Fond | **Aqua** (mapping front) |
+| Encre | Pétrole `#315F63` / dates `#4A7276` |
+| Icône | Valise |
+| Période | « Du … au … » + calendrier |
+| Actions | Pilules ✓ / ✕ si `accept_refuse` |
+| Lien | « Ouvrir dans l’agenda ↗ » |
+| Opacité | Atténuée si `traitee` (sauf règle arrêt ci-dessous) |
+
+### 3.3 Arrêt maladie AM (`arret_maladie_am`)
+
+- Reste **visible / opaque** tant que `date_fin` (jour inclus) n’est pas passée, même si `traitee`.
+- Fond **bleu** (mapping front).
+
+### 3.4 Assets
+
+Teintes UI : `red` · `pink` · `peach` · `lime` · `lavender` · `green` · `blue` · `aqua`.  
+Clé = **choix front**, pas une valeur API.
+
+---
+
+## 4. Palette UI (front only — dérivée du `type_code`)
+
+| Couleur UI | Famille | Types |
+|------------|---------|--------|
+| **`aqua`** | Congés AM | `conge_am` |
+| **`blue`** | Arrêt maladie AM | `arret_maladie_am` |
+| **`peach`** | Absence enfant / info pratique | `absence_enfant`, `absence_enfant_modif` |
+| **`pink`** | Soins / bobo / problème **enfant** (AM → parents) | `soin_enfant` *(nouveau — voir §5)* |
+| **`lavender`** | Admin / divers | futurs types admin |
+
+**Principes**
+
+- Couleur = famille visuelle (lisible sans tout lire).
+- Icône précise l’événement (surtout sur rose : thermomètre, pansement, flacon…).
+- Rose = doux / rassurant, **pas** une alerte médicale forte.
+- Congés ≠ lavande (trop « admin »).
+
+---
+
+## 5. Nouvelle bulle rose — soins / bobo enfant (AM → parents)
+
+### Intention produit
+
+La nounou signale un **événement concernant l’enfant** (maladie légère, bobo, crème, température, souci du jour…) **vers les parents**.
+
+Pourquoi **pas seulement la messagerie** ?
+- C’est **loggé** dans la file d’attention.
+- C’est un **événement d’agenda** (période / jour, placement, historique).
+- Les parents peuvent **acquitter** (`ack`) sans noyer le chat.
+
+### Proposition V1 (à brancher ultérieurement)
+
+| | |
+|--|--|
+| `type_code` | `soin_enfant` (nom exact à figer) |
+| Émetteur | AM |
+| Destinataires | parents du couple / placement |
+| `response_mode` | `ack` |
+| Couleur UI | `pink` |
+| Back métier | ligne agenda liée (même esprit que `absences_garde` : période + placement + motif) ; la bulle = collecte / notification |
+| Payload | `date_debut` / `date_fin` (+ motif / sous-type optionnel : temperature, bobo, medicament…) |
+
+**Hors scope immédiat #173** : implémentation complète ; cette section fige l’intention pour le contrat types + UI.
+
+---
+
+## 6. Idées futures (hors scope)
+
+| Famille | Couleur UI | Exemples | `response_mode` |
+|---------|------------|----------|-----------------|
+| Soins (détail) | `pink` | `soin_temperature`, `soin_medicament`, `soin_bobo` — ou sous-types dans payload | `ack` |
+| Sortie | `peach` / `lavender` | `sortie_a_valider` | `accept_refuse` |
+| Admin | `lavender` | `info_admin`, `document_a_fournir` | `ack` / `none` |
+
+Variante soins : un seul fond rose ; l’icône / sous-type change.
+
+---
+
+## 7. Comportements métier à ne pas casser
+
+- Créateur : pas de boutons réponse ; éventuel « En attente de réponse ».
+- Refus : afficher `last_refuse_comment`.
+- Congé : `accept_refuse` côté destinataire.
+- Absence enfant : info / ack — pas de veto AM en V1.
+- File courte : `purge_at` ; l’**agenda** conserve l’historique métier.
+
+---
+
+## 8. Fichiers front de référence
+
+- `frontend/lib/models/carte_bulle.dart` — mapping type → libellé / icône / fond
+- `frontend/lib/widgets/quotidien/cartes_feed.dart`
+- `frontend/lib/models/card_assets.dart`
+- Assets : `frontend/assets/cards/`, `valise.png`, `btn_*_pilule.png`
+
+---
+
+## 9. Recettes
+
+- [ ] API cartes **sans** champ `couleur` (ni feed ni `/types`).
+- [ ] Front mappe `conge_am` → aqua, `arret_maladie_am` → blue, `absence_*` → peach.
+- [ ] Accept / refuse congé OK.
+- [ ] Arrêt traité + période en cours → reste visible.
+- [ ] Filtre couple / placement.
+- [ ] (Plus tard) `soin_enfant` rose AM → parents + ligne agenda.
+
+---
+
+## 10. Références
+
+- Ticket front : **#173**
+- Module cartes : **#194**
+- Quotidien : `docs/31_MINI-SPEC-QUOTIDIEN-PARENT-AM.md`
+- Décision projet : `docs/24_DECISIONS-PROJET.md` §32
+- Maquette congés : `ressources/bulle_congés.jpg`

frontend/lib/models/card_assets.dart

@@ -5,7 +5,8 @@ enum CardColorVertical {
   lime('assets/cards/card_lime.png'),
   lavender('assets/cards/card_lavender.png'),
   green('assets/cards/card_green.png'),
-  blue('assets/cards/card_blue.png');
+  blue('assets/cards/card_blue.png'),
+  aqua('assets/cards/card_aqua.png');
 
   final String path;
   const CardColorVertical(this.path);
@@ -18,8 +19,9 @@ enum CardColorHorizontal {
   lime('assets/cards/card_lime_h.png'),
   lavender('assets/cards/card_lavender_h.png'),
   green('assets/cards/card_green_h.png'),
-  blue('assets/cards/card_blue_h.png');
+  blue('assets/cards/card_blue_h.png'),
+  aqua('assets/cards/card_aqua_h.png');
 
   final String path;
   const CardColorHorizontal(this.path);
-} 
+}

frontend/lib/models/carte_bulle.dart

@@ -0,0 +1,196 @@
+import 'package:p_tits_pas/models/card_assets.dart';
+
+/// Statut d'une instance de carte (file d'attention) — contrat #194 / #173.
+enum CarteStatut {
+  ouverte('ouverte'),
+  refusee('refusee'),
+  traitee('traitee');
+
+  final String apiValue;
+  const CarteStatut(this.apiValue);
+
+  static CarteStatut fromApi(String? raw) {
+    switch (raw) {
+      case 'refusee':
+        return CarteStatut.refusee;
+      case 'traitee':
+        return CarteStatut.traitee;
+      case 'ouverte':
+      default:
+        return CarteStatut.ouverte;
+    }
+  }
+}
+
+/// Mode de réponse attendu selon le type SYSTEM.
+enum CarteResponseMode {
+  none('none'),
+  ack('ack'),
+  acceptRefuse('accept_refuse');
+
+  final String apiValue;
+  const CarteResponseMode(this.apiValue);
+
+  static CarteResponseMode fromApi(String? raw) {
+    switch (raw) {
+      case 'ack':
+        return CarteResponseMode.ack;
+      case 'accept_refuse':
+        return CarteResponseMode.acceptRefuse;
+      case 'none':
+      default:
+        return CarteResponseMode.none;
+    }
+  }
+}
+
+/// Bulle / carte de la file d'attention.
+class CarteBulle {
+  final String id;
+  final String typeCode;
+  final String titre;
+  final String idPlacement;
+  final String? idAbsence;
+  final String operation;
+  final CarteStatut statut;
+  final Map<String, dynamic> payload;
+  final DateTime? purgeAt;
+  final String? creePar;
+  final bool isCreator;
+  final CarteResponseMode responseMode;
+  final String? lastRefuseComment;
+  final DateTime? creeLe;
+  final DateTime? modifieLe;
+
+  const CarteBulle({
+    required this.id,
+    required this.typeCode,
+    required this.titre,
+    required this.idPlacement,
+    this.idAbsence,
+    this.operation = 'create',
+    required this.statut,
+    this.payload = const {},
+    this.purgeAt,
+    this.creePar,
+    this.isCreator = false,
+    this.responseMode = CarteResponseMode.none,
+    this.lastRefuseComment,
+    this.creeLe,
+    this.modifieLe,
+  });
+
+  String? get dateDebut => payload['date_debut']?.toString();
+  String? get dateFin => payload['date_fin']?.toString();
+  String? get motif => payload['motif']?.toString();
+
+  /// Libellé UI (sémantique produit) — pas le titre brut API.
+  String get titreAffiche {
+    switch (typeCode) {
+      case 'conge_am':
+        return 'Demande de congés';
+      case 'arret_maladie_am':
+        return 'Arrêt maladie';
+      case 'absence_enfant':
+      case 'absence_enfant_modif':
+        return 'Notification d’absence';
+      case 'soin_enfant':
+        return 'Soin / bobo';
+      default:
+        return titre;
+    }
+  }
+
+  bool get isArretMaladie => typeCode == 'arret_maladie_am';
+  bool get isCongeAm => typeCode == 'conge_am';
+  bool get isSoinEnfant => typeCode == 'soin_enfant';
+
+  /// Icône dessin (haut droite) selon le type de bulle.
+  String? get iconAsset {
+    switch (typeCode) {
+      case 'conge_am':
+        return 'assets/images/valise.png';
+      case 'arret_maladie_am':
+        return 'assets/images/cartes/icon_carte_maladie.png';
+      case 'absence_enfant':
+      case 'absence_enfant_modif':
+        return 'assets/images/cartes/icon_carte_absence.png';
+      // soin_enfant : icône selon sous-type payload — à brancher plus tard
+      default:
+        return null;
+    }
+  }
+
+  /// Fin de période (jour inclus). Null si dates absentes / invalides.
+  DateTime? get dateFinJour {
+    final raw = dateFin;
+    if (raw == null || raw.isEmpty) return null;
+    final dt = DateTime.tryParse(raw);
+    if (dt == null) return null;
+    return DateTime(dt.year, dt.month, dt.day);
+  }
+
+  /// Vrai tant que la date de fin n’est pas dépassée (jour courant inclus).
+  bool get periodeEncoreActive {
+    final fin = dateFinJour;
+    if (fin == null) return true;
+    final today = DateTime.now();
+    final todayDay = DateTime(today.year, today.month, today.day);
+    return !todayDay.isAfter(fin);
+  }
+
+  /// Teinte pastel UI dérivée du `type_code` (pas de `couleur` API).
+  /// Voir `docs/32_MINI-SPEC-BULLES-CARTES.md` §4.
+  CardColorHorizontal get colorFamily {
+    switch (typeCode) {
+      case 'conge_am':
+        return CardColorHorizontal.aqua;
+      case 'arret_maladie_am':
+        return CardColorHorizontal.blue;
+      case 'absence_enfant':
+      case 'absence_enfant_modif':
+        return CardColorHorizontal.peach;
+      case 'soin_enfant':
+        return CardColorHorizontal.pink;
+      default:
+        return CardColorHorizontal.lavender;
+    }
+  }
+
+  /// Asset horizontal pastel (palette `assets/cards/` uniquement).
+  String get backgroundAsset => colorFamily.path;
+
+  /// Le destinataire peut répondre (pas le créateur, carte ouverte).
+  bool get peutRepondre =>
+      !isCreator &&
+      statut == CarteStatut.ouverte &&
+      responseMode != CarteResponseMode.none;
+
+  factory CarteBulle.fromJson(Map<String, dynamic> json) {
+    final rawPayload = json['payload'];
+    return CarteBulle(
+      id: (json['id'] ?? '').toString(),
+      typeCode: (json['type_code'] ?? '').toString(),
+      titre: (json['titre'] ?? json['type_code'] ?? 'Carte').toString(),
+      idPlacement: (json['id_placement'] ?? '').toString(),
+      idAbsence: json['id_absence']?.toString(),
+      operation: (json['operation'] ?? 'create').toString(),
+      statut: CarteStatut.fromApi(json['statut']?.toString()),
+      payload: rawPayload is Map
+          ? Map<String, dynamic>.from(rawPayload)
+          : const {},
+      purgeAt: _parseDate(json['purge_at']),
+      creePar: json['cree_par']?.toString(),
+      isCreator: json['is_creator'] == true,
+      responseMode: CarteResponseMode.fromApi(json['response_mode']?.toString()),
+      lastRefuseComment: json['last_refuse_comment']?.toString(),
+      creeLe: _parseDate(json['cree_le']),
+      modifieLe: _parseDate(json['modifie_le']),
+    );
+  }
+
+  static DateTime? _parseDate(dynamic v) {
+    if (v == null) return null;
+    return DateTime.tryParse(v.toString());
+  }
+}

frontend/lib/screens/auth/parent_register_step3_screen.dart

@@ -41,6 +41,7 @@ class _ParentRegisterStep3ScreenState extends State<ParentRegisterStep3Screen> {
     CardColorVertical.red,
     CardColorVertical.green,
     CardColorVertical.blue,
+    CardColorVertical.aqua,
   ];
 
   // Garder une trace des couleurs déjà utilisées

frontend/lib/screens/home/parent_screen/ParentDashboardScreen.dart

@@ -3,14 +3,14 @@ import 'package:p_tits_pas/models/couple_garde.dart';
 import 'package:p_tits_pas/models/user.dart';
 import 'package:p_tits_pas/services/auth_service.dart';
 import 'package:p_tits_pas/services/couple_garde_service.dart';
+import 'package:p_tits_pas/widgets/quotidien/cartes_feed.dart';
 import 'package:p_tits_pas/widgets/quotidien/couple_selector_bandeau.dart';
 import 'package:p_tits_pas/widgets/quotidien/quotidien_shell.dart';
 import 'package:p_tits_pas/widgets/quotidien/quotidien_theme.dart';
 import 'package:p_tits_pas/screens/home/parent_screen/agenda_absences_stub.dart';
 
 /// Tableau de bord parent — coquille 3 colonnes quotidien (#166).
-/// Colonne gauche : sélecteur de couple enfant–nounou (#167).
-/// Métier cartes / blog / messagerie : tickets C/D/E.
+/// Colonne gauche : sélecteur de couple (#167) + feed bulles (#173).
 class ParentDashboardScreen extends StatefulWidget {
   const ParentDashboardScreen({super.key});
 
@@ -63,7 +63,6 @@ class _ParentDashboardScreenState extends State<ParentDashboardScreen> {
 
   Future<void> _selectCouple(CoupleGarde couple) async {
     if (couple.id == _selectedCoupleId) return;
-    // Optimiste : on bascule tout de suite, l'API persiste ensuite.
     setState(() => _selectedCoupleId = couple.id);
     try {
       final res = await CoupleGardeService.definirCoupleCourant(couple.id);
@@ -116,6 +115,7 @@ class _ParentDashboardScreenState extends State<ParentDashboardScreen> {
         error: _couplesError,
         onRetry: _loadCouples,
         onCoupleSelected: _selectCouple,
+        onAjouterBulle: () => _soon('Ajouter une bulle'),
       ),
       centerColumn: const QuotidienColumnPlaceholder(
         title: 'Blog',
@@ -138,7 +138,7 @@ class _ParentDashboardScreenState extends State<ParentDashboardScreen> {
   }
 }
 
-/// Colonne gauche : bandeau couple (#167) puis flux de cartes (#173 à venir).
+/// Colonne gauche : bandeau couple (#167) puis flux de cartes (#173).
 class _LeftColumn extends StatelessWidget {
   final List<CoupleGarde> couples;
   final String? selectedCoupleId;
@@ -146,6 +146,7 @@ class _LeftColumn extends StatelessWidget {
   final String? error;
   final VoidCallback onRetry;
   final ValueChanged<CoupleGarde> onCoupleSelected;
+  final VoidCallback onAjouterBulle;
 
   const _LeftColumn({
     required this.couples,
@@ -154,6 +155,7 @@ class _LeftColumn extends StatelessWidget {
     required this.error,
     required this.onRetry,
     required this.onCoupleSelected,
+    required this.onAjouterBulle,
   });
 
   @override
@@ -172,12 +174,10 @@ class _LeftColumn extends StatelessWidget {
             onCoupleSelected: onCoupleSelected,
           ),
           const SizedBox(height: 14),
-          const Expanded(
-            child: QuotidienColumnPlaceholder(
-              title: 'Cartes',
-              subtitle:
-                  'Absences, congés AM, sorties à valider\n(à brancher — ticket #173).',
-              icon: Icons.style_outlined,
+          Expanded(
+            child: CartesFeed(
+              placementId: selectedCoupleId,
+              onAjouterBulle: onAjouterBulle,
             ),
           ),
         ],

frontend/lib/services/api/api_config.dart

@@ -93,6 +93,10 @@ class ApiConfig {
   static const String conversations = '/conversations';
   static const String notifications = '/notifications';
 
+  /// File d'attention / bulles (#173 / #194).
+  static const String cards = '/cards';
+  static const String cardsStream = '/cards/stream';
+
   // Headers
   static Map<String, String> get headers => {
         'Content-Type': 'application/json',

frontend/lib/services/api/cards_service.dart

@@ -0,0 +1,87 @@
+import 'dart:convert';
+
+import 'package:http/http.dart' as http;
+import 'package:p_tits_pas/models/carte_bulle.dart';
+import 'package:p_tits_pas/services/api/api_config.dart';
+import 'package:p_tits_pas/services/api/tokenService.dart';
+
+/// Accès API Cartes (file d'attention) — tickets #173 / #194.
+/// - GET    /cards?placementId=
+/// - POST   /cards/:id/respond
+class CardsService {
+  static Future<Map<String, String>> _headers() async {
+    final token = await TokenService.getToken();
+    return token != null
+        ? ApiConfig.authHeaders(token)
+        : Map<String, String>.from(ApiConfig.headers);
+  }
+
+  static String _extractError(String body, String fallback) {
+    try {
+      final decoded = jsonDecode(body);
+      if (decoded is Map<String, dynamic>) {
+        final message = decoded['message'];
+        if (message is String && message.trim().isNotEmpty) {
+          return message;
+        }
+        if (message is Map && message['message'] is String) {
+          return message['message'] as String;
+        }
+      }
+    } catch (_) {}
+    return fallback;
+  }
+
+  /// Feed de bulles pour l'utilisateur (filtré par couple / placement).
+  static Future<List<CarteBulle>> lister({String? placementId}) async {
+    final query = <String, String>{};
+    if (placementId != null && placementId.isNotEmpty) {
+      query['placementId'] = placementId;
+    }
+    final uri = Uri.parse(
+      '${ApiConfig.baseUrl}${ApiConfig.cards}',
+    ).replace(queryParameters: query.isEmpty ? null : query);
+
+    final response = await http.get(uri, headers: await _headers());
+    if (response.statusCode != 200) {
+      throw Exception(
+        _extractError(response.body, 'Erreur chargement des cartes'),
+      );
+    }
+
+    final decoded = jsonDecode(response.body);
+    final list = (decoded is Map ? decoded['items'] as List? : null) ?? const [];
+    return list
+        .whereType<Map>()
+        .map((e) => CarteBulle.fromJson(Map<String, dynamic>.from(e)))
+        .toList();
+  }
+
+  /// Répondre : accept | refuse | ack.
+  static Future<CarteBulle> repondre({
+    required String cardId,
+    required String action,
+    String? comment,
+  }) async {
+    final response = await http.post(
+      Uri.parse(
+        '${ApiConfig.baseUrl}${ApiConfig.cards}/$cardId/respond',
+      ),
+      headers: await _headers(),
+      body: jsonEncode({
+        'action': action,
+        if (comment != null && comment.trim().isNotEmpty)
+          'comment': comment.trim(),
+      }),
+    );
+
+    if (response.statusCode != 200) {
+      throw Exception(
+        _extractError(response.body, 'Erreur lors de la réponse'),
+      );
+    }
+
+    final decoded = jsonDecode(response.body);
+    return CarteBulle.fromJson(Map<String, dynamic>.from(decoded as Map));
+  }
+}

frontend/lib/utils/reprise_mapper.dart

@@ -17,6 +17,7 @@ class RepriseMapper {
     CardColorVertical.red,
     CardColorVertical.green,
     CardColorVertical.blue,
+    CardColorVertical.aqua,
   ];
 
   static ParentData parentFromDossier(ParentDossier p) {

frontend/lib/widgets/base_form_screen.dart

@@ -185,6 +185,8 @@ class BaseFormScreen extends StatelessWidget {
         return CardColorVertical.pink.path;
       case CardColorHorizontal.red:
         return CardColorVertical.red.path;
+      case CardColorHorizontal.aqua:
+        return CardColorVertical.aqua.path;
     }
   }
 

frontend/lib/widgets/child_card_widget.dart

@@ -205,9 +205,14 @@ class _ChildCardWidgetState extends State<ChildCardWidget> {
       );
     }
 
-    final Color baseCardColorForShadow = widget.childData.cardColor == CardColorVertical.lavender 
-        ? Colors.purple.shade200 
-        : (widget.childData.cardColor == CardColorVertical.pink ? Colors.pink.shade200 : Colors.grey.shade200);
+    final Color baseCardColorForShadow =
+        widget.childData.cardColor == CardColorVertical.lavender
+            ? Colors.purple.shade200
+            : (widget.childData.cardColor == CardColorVertical.pink
+                ? Colors.pink.shade200
+                : (widget.childData.cardColor == CardColorVertical.aqua
+                    ? Colors.teal.shade200
+                    : Colors.grey.shade200));
     final double photoSide = 200.0 * (config.isMobile ? 0.8 : 1.0);
     final double editableCardWidth = config.isMobile
         ? double.infinity
@@ -340,6 +345,7 @@ class _ChildCardWidgetState extends State<ChildCardWidget> {
     
     // Mapping manuel simple
     if (widget.childData.cardColor.path.contains('lavender')) horizontalCardAsset = CardColorHorizontal.lavender.path;
+    else if (widget.childData.cardColor.path.contains('aqua')) horizontalCardAsset = CardColorHorizontal.aqua.path;
     else if (widget.childData.cardColor.path.contains('blue')) horizontalCardAsset = CardColorHorizontal.blue.path;
     else if (widget.childData.cardColor.path.contains('green')) horizontalCardAsset = CardColorHorizontal.green.path;
     else if (widget.childData.cardColor.path.contains('lime')) horizontalCardAsset = CardColorHorizontal.lime.path;

frontend/lib/widgets/personal_info_form_screen.dart

@@ -1302,6 +1302,8 @@ class _PersonalInfoFormScreenState extends State<PersonalInfoFormScreen> {
         return CardColorVertical.pink.path;
       case CardColorHorizontal.red:
         return CardColorVertical.red.path;
+      case CardColorHorizontal.aqua:
+        return CardColorVertical.aqua.path;
     }
   }
 }

frontend/lib/widgets/presentation_form_screen.dart

@@ -642,6 +642,8 @@ class _PresentationFormScreenState extends State<PresentationFormScreen> {
         return CardColorVertical.pink.path;
       case CardColorHorizontal.red:
         return CardColorVertical.red.path;
+      case CardColorHorizontal.aqua:
+        return CardColorVertical.aqua.path;
     }
   }
 }

frontend/lib/widgets/professional_info_form_screen.dart

@@ -1196,6 +1196,8 @@ class _ProfessionalInfoFormScreenState extends State<ProfessionalInfoFormScreen>
         return CardColorVertical.pink.path;
       case CardColorHorizontal.red:
         return CardColorVertical.red.path;
+      case CardColorHorizontal.aqua:
+        return CardColorVertical.aqua.path;
     }
   }
 }

frontend/lib/widgets/quotidien/carte.dart

@@ -0,0 +1,251 @@
+import 'dart:ui' as ui;
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+/// Mode d’extension du fond pastel.
+enum CarteStretch {
+  /// 9 zones (bulles / cartes content).
+  both,
+
+  /// Uniquement horizontal — bouts en demi-cercle (bandeau couple).
+  horizontal,
+}
+
+/// Fond pastel extensible (capacité par défaut des « cartes » UI).
+///
+/// Coins / bouts à taille logique fixe ; le reste s’étire selon [stretch].
+class Carte extends StatefulWidget {
+  final String assetPath;
+  final CarteStretch stretch;
+  final Rect centerSlice;
+  final double cornerWidth;
+  final double cornerHeight;
+  final Widget? child;
+  final EdgeInsetsGeometry? padding;
+  final BoxConstraints? constraints;
+  final double? width;
+  final double? height;
+
+  /// Carte / bulle content (`card_*_h.png`, ~1024×512).
+  const Carte({
+    super.key,
+    required this.assetPath,
+    this.child,
+    this.padding,
+    this.constraints,
+    this.width,
+    this.height,
+    this.stretch = CarteStretch.both,
+    this.centerSlice = const Rect.fromLTRB(160, 90, 864, 422),
+    this.cornerWidth = 56,
+    this.cornerHeight = 40,
+  });
+
+  /// Bandeau couple enfant / nounou (`bandeau_*.png`, ~1024×160).
+  /// Étirement horizontal seul pour garder les bouts ronds.
+  const Carte.bandeau({
+    super.key,
+    required this.assetPath,
+    this.child,
+    this.padding,
+    this.constraints,
+    this.width,
+    this.height,
+  })  : stretch = CarteStretch.horizontal,
+        // Demi-cercle source ≈ moitié de la hauteur (160/2 = 80).
+        centerSlice = const Rect.fromLTRB(80, 0, 944, 160),
+        cornerWidth = 45,
+        cornerHeight = 45;
+
+  @override
+  State<Carte> createState() => _CarteState();
+}
+
+class _CarteImageCache {
+  static final Map<String, Future<ui.Image>> _futures = {};
+
+  static Future<ui.Image> load(String path) {
+    return _futures.putIfAbsent(path, () async {
+      final data = await rootBundle.load(path);
+      final codec = await ui.instantiateImageCodec(
+        data.buffer.asUint8List(),
+      );
+      final frame = await codec.getNextFrame();
+      return frame.image;
+    });
+  }
+}
+
+class _CarteState extends State<Carte> {
+  ui.Image? _image;
+  String? _loadedPath;
+
+  @override
+  void initState() {
+    super.initState();
+    _load();
+  }
+
+  @override
+  void didUpdateWidget(covariant Carte oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.assetPath != widget.assetPath) {
+      _load();
+    }
+  }
+
+  Future<void> _load() async {
+    final path = widget.assetPath;
+    final image = await _CarteImageCache.load(path);
+    if (!mounted) return;
+    setState(() {
+      _image = image;
+      _loadedPath = path;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final img = _image;
+    final ready = img != null && _loadedPath == widget.assetPath;
+
+    return SizedBox(
+      width: widget.width,
+      height: widget.height,
+      child: Container(
+        constraints: widget.constraints,
+        child: CustomPaint(
+          painter: ready
+              ? _CartePainter(
+                  image: img!,
+                  stretch: widget.stretch,
+                  centerSlice: widget.centerSlice,
+                  cornerWidth: widget.cornerWidth,
+                  cornerHeight: widget.cornerHeight,
+                )
+              : null,
+          child: Padding(
+            padding: widget.padding ?? EdgeInsets.zero,
+            child: widget.child,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _CartePainter extends CustomPainter {
+  final ui.Image image;
+  final CarteStretch stretch;
+  final Rect centerSlice;
+  final double cornerWidth;
+  final double cornerHeight;
+
+  _CartePainter({
+    required this.image,
+    required this.stretch,
+    required this.centerSlice,
+    required this.cornerWidth,
+    required this.cornerHeight,
+  });
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if (size.width <= 0 || size.height <= 0) return;
+
+    final paint = Paint()..filterQuality = FilterQuality.high;
+    final srcW = image.width.toDouble();
+    final srcH = image.height.toDouble();
+
+    void draw(Rect src, Rect dst) {
+      if (src.width <= 0 || src.height <= 0) return;
+      if (dst.width <= 0 || dst.height <= 0) return;
+      canvas.drawImageRect(image, src, dst, paint);
+    }
+
+    if (stretch == CarteStretch.horizontal) {
+      // 3 bandes pleine hauteur : bout | milieu | bout (pilule).
+      // Largeur du bout = moitié de la hauteur → demi-cercle propre.
+      final tip = (size.height / 2).clamp(1.0, size.width / 2);
+      final srcTip = centerSlice.left.clamp(1.0, srcW / 2);
+      final midW = (size.width - tip * 2).clamp(0.0, size.width);
+
+      draw(
+        Rect.fromLTWH(0, 0, srcTip, srcH),
+        Rect.fromLTWH(0, 0, tip, size.height),
+      );
+      draw(
+        Rect.fromLTWH(srcTip, 0, (srcW - srcTip * 2).clamp(1.0, srcW), srcH),
+        Rect.fromLTWH(tip, 0, midW, size.height),
+      );
+      draw(
+        Rect.fromLTWH(srcW - srcTip, 0, srcTip, srcH),
+        Rect.fromLTWH(tip + midW, 0, tip, size.height),
+      );
+      return;
+    }
+
+    // 9 zones (bulles).
+    final srcLeft = centerSlice.left.clamp(0.0, srcW);
+    final srcTop = centerSlice.top.clamp(0.0, srcH);
+    final srcRight = centerSlice.right.clamp(0.0, srcW);
+    final srcBottom = centerSlice.bottom.clamp(0.0, srcH);
+
+    final srcLeftW = srcLeft;
+    final srcTopH = srcTop;
+    final srcRightW = srcW - srcRight;
+    final srcBottomH = srcH - srcBottom;
+    final srcCenterW = (srcRight - srcLeft).clamp(1.0, srcW);
+    final srcCenterH = (srcBottom - srcTop).clamp(1.0, srcH);
+
+    final dstLeftW = cornerWidth.clamp(1.0, size.width / 2);
+    final dstRightW = cornerWidth.clamp(1.0, size.width / 2);
+    final dstTopH = cornerHeight.clamp(1.0, size.height / 2);
+    final dstBottomH = cornerHeight.clamp(1.0, size.height / 2);
+    final dstCenterW =
+        (size.width - dstLeftW - dstRightW).clamp(0.0, size.width);
+    final dstCenterH =
+        (size.height - dstTopH - dstBottomH).clamp(0.0, size.height);
+
+    // Haut
+    draw(Rect.fromLTWH(0, 0, srcLeftW, srcTopH),
+        Rect.fromLTWH(0, 0, dstLeftW, dstTopH));
+    draw(Rect.fromLTWH(srcLeft, 0, srcCenterW, srcTopH),
+        Rect.fromLTWH(dstLeftW, 0, dstCenterW, dstTopH));
+    draw(Rect.fromLTWH(srcRight, 0, srcRightW, srcTopH),
+        Rect.fromLTWH(dstLeftW + dstCenterW, 0, dstRightW, dstTopH));
+
+    // Milieu
+    draw(Rect.fromLTWH(0, srcTop, srcLeftW, srcCenterH),
+        Rect.fromLTWH(0, dstTopH, dstLeftW, dstCenterH));
+    draw(Rect.fromLTWH(srcLeft, srcTop, srcCenterW, srcCenterH),
+        Rect.fromLTWH(dstLeftW, dstTopH, dstCenterW, dstCenterH));
+    draw(Rect.fromLTWH(srcRight, srcTop, srcRightW, srcCenterH),
+        Rect.fromLTWH(dstLeftW + dstCenterW, dstTopH, dstRightW, dstCenterH));
+
+    // Bas
+    draw(Rect.fromLTWH(0, srcBottom, srcLeftW, srcBottomH),
+        Rect.fromLTWH(0, dstTopH + dstCenterH, dstLeftW, dstBottomH));
+    draw(Rect.fromLTWH(srcLeft, srcBottom, srcCenterW, srcBottomH),
+        Rect.fromLTWH(dstLeftW, dstTopH + dstCenterH, dstCenterW, dstBottomH));
+    draw(
+      Rect.fromLTWH(srcRight, srcBottom, srcRightW, srcBottomH),
+      Rect.fromLTWH(
+        dstLeftW + dstCenterW,
+        dstTopH + dstCenterH,
+        dstRightW,
+        dstBottomH,
+      ),
+    );
+  }
+
+  @override
+  bool shouldRepaint(covariant _CartePainter oldDelegate) {
+    return oldDelegate.image != image ||
+        oldDelegate.stretch != stretch ||
+        oldDelegate.centerSlice != centerSlice ||
+        oldDelegate.cornerWidth != cornerWidth ||
+        oldDelegate.cornerHeight != cornerHeight;
+  }
+}

frontend/lib/widgets/quotidien/cartes_feed.dart

@@ -0,0 +1,881 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:p_tits_pas/models/carte_bulle.dart';
+import 'package:p_tits_pas/services/api/cards_service.dart';
+import 'package:p_tits_pas/widgets/quotidien/carte.dart';
+import 'package:p_tits_pas/widgets/quotidien/quotidien_theme.dart';
+
+/// Feed de bulles (file d'attention) — ticket #173.
+/// Widget partagé parent / AM ; les actions dépendent du rôle + payload API.
+class CartesFeed extends StatefulWidget {
+  final String? placementId;
+  final VoidCallback? onAjouterBulle;
+
+  const CartesFeed({
+    super.key,
+    this.placementId,
+    this.onAjouterBulle,
+  });
+
+  @override
+  State<CartesFeed> createState() => _CartesFeedState();
+}
+
+class _CartesFeedState extends State<CartesFeed> {
+  static const double _fadeExtent = 0.08;
+
+  List<CarteBulle> _items = const [];
+  bool _loading = true;
+  String? _error;
+  String? _busyCardId;
+
+  final ScrollController _scrollController = ScrollController();
+  bool _isScrollable = false;
+  bool _fadeTop = false;
+  bool _fadeBottom = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _scrollController.addListener(_syncScrollFades);
+    _load();
+  }
+
+  @override
+  void dispose() {
+    _scrollController.removeListener(_syncScrollFades);
+    _scrollController.dispose();
+    super.dispose();
+  }
+
+  @override
+  void didUpdateWidget(covariant CartesFeed oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.placementId != widget.placementId) {
+      _load();
+    }
+  }
+
+  void _syncScrollFades() {
+    if (!_scrollController.hasClients) return;
+    final position = _scrollController.position;
+    final scrollable = position.maxScrollExtent > 0.0;
+    final threshold = position.viewportDimension * _fadeExtent / 2;
+    final fadeTop = scrollable && position.pixels > threshold;
+    final fadeBottom = scrollable &&
+        position.pixels < (position.maxScrollExtent - threshold);
+    if (scrollable != _isScrollable ||
+        fadeTop != _fadeTop ||
+        fadeBottom != _fadeBottom) {
+      setState(() {
+        _isScrollable = scrollable;
+        _fadeTop = fadeTop;
+        _fadeBottom = fadeBottom;
+      });
+    }
+  }
+
+  Future<void> _load() async {
+    setState(() {
+      _loading = true;
+      _error = null;
+    });
+    try {
+      final items = await CardsService.lister(
+        placementId: widget.placementId,
+      );
+      if (!mounted) return;
+      setState(() {
+        _items = items;
+        _loading = false;
+      });
+      WidgetsBinding.instance.addPostFrameCallback((_) => _syncScrollFades());
+    } catch (e) {
+      if (!mounted) return;
+      setState(() {
+        _error = e.toString().replaceFirst('Exception: ', '');
+        _loading = false;
+      });
+    }
+  }
+
+  Future<void> _respond(
+    CarteBulle card, {
+    required String action,
+    String? comment,
+  }) async {
+    setState(() => _busyCardId = card.id);
+    try {
+      final updated = await CardsService.repondre(
+        cardId: card.id,
+        action: action,
+        comment: comment,
+      );
+      if (!mounted) return;
+      setState(() {
+        _items = [
+          for (final c in _items) if (c.id == updated.id) updated else c,
+        ];
+        _busyCardId = null;
+      });
+    } catch (e) {
+      if (!mounted) return;
+      setState(() => _busyCardId = null);
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(
+          content: Text(e.toString().replaceFirst('Exception: ', '')),
+        ),
+      );
+    }
+  }
+
+  Future<void> _onAccept(CarteBulle card) async {
+    final ok = await showDialog<bool>(
+      context: context,
+      builder: (ctx) => AlertDialog(
+        title: Text(
+          'Accepter la demande ?',
+          style: GoogleFonts.merienda(fontWeight: FontWeight.w600),
+        ),
+        content: Text(
+          'Confirmez-vous l’acceptation de « ${card.titreAffiche} » '
+          '(${_periodeCourte(card)}) ?',
+          style: GoogleFonts.merriweather(fontSize: 14, height: 1.4),
+        ),
+        actions: [
+          TextButton(
+            onPressed: () => Navigator.pop(ctx, false),
+            child: const Text('Annuler'),
+          ),
+          FilledButton(
+            onPressed: () => Navigator.pop(ctx, true),
+            child: const Text('Confirmer'),
+          ),
+        ],
+      ),
+    );
+    if (ok == true) {
+      await _respond(card, action: 'accept');
+    }
+  }
+
+  Future<void> _onAck(CarteBulle card) async {
+    final ok = await showDialog<bool>(
+      context: context,
+      builder: (ctx) => AlertDialog(
+        title: Text(
+          'Prise en compte',
+          style: GoogleFonts.merienda(fontWeight: FontWeight.w600),
+        ),
+        content: Text(
+          'Confirmez-vous avoir bien reçu cet arrêt maladie '
+          '(${_periodeCourte(card)}) ?',
+          style: GoogleFonts.merriweather(fontSize: 14, height: 1.4),
+        ),
+        actions: [
+          TextButton(
+            onPressed: () => Navigator.pop(ctx, false),
+            child: const Text('Annuler'),
+          ),
+          FilledButton(
+            onPressed: () => Navigator.pop(ctx, true),
+            child: const Text('Bien reçu'),
+          ),
+        ],
+      ),
+    );
+    if (ok == true) {
+      await _respond(card, action: 'ack');
+    }
+  }
+
+  Future<void> _onRefuse(CarteBulle card) async {
+    final controller = TextEditingController();
+    final ok = await showDialog<bool>(
+      context: context,
+      builder: (ctx) => AlertDialog(
+        title: Text(
+          'Refuser la demande',
+          style: GoogleFonts.merienda(fontWeight: FontWeight.w600),
+        ),
+        content: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Text(
+              'Indiquez le motif du refus pour « ${card.titreAffiche} ».',
+              style: GoogleFonts.merriweather(fontSize: 14, height: 1.4),
+            ),
+            const SizedBox(height: 12),
+            TextField(
+              controller: controller,
+              maxLines: 3,
+              autofocus: true,
+              decoration: const InputDecoration(
+                hintText: 'Motif du refus…',
+                border: OutlineInputBorder(),
+              ),
+            ),
+          ],
+        ),
+        actions: [
+          TextButton(
+            onPressed: () => Navigator.pop(ctx, false),
+            child: const Text('Annuler'),
+          ),
+          FilledButton(
+            onPressed: () {
+              if (controller.text.trim().isEmpty) return;
+              Navigator.pop(ctx, true);
+            },
+            child: const Text('Refuser'),
+          ),
+        ],
+      ),
+    );
+    if (ok == true && controller.text.trim().isNotEmpty) {
+      await _respond(
+        card,
+        action: 'refuse',
+        comment: controller.text.trim(),
+      );
+    }
+    controller.dispose();
+  }
+
+  static String _periodeCourte(CarteBulle card) {
+    final d = card.dateDebut;
+    final f = card.dateFin;
+    String fmt(String? iso) {
+      if (iso == null || iso.isEmpty) return '…';
+      final dt = DateTime.tryParse(iso);
+      if (dt == null) return iso;
+      return '${dt.day.toString().padLeft(2, '0')}/'
+          '${dt.month.toString().padLeft(2, '0')}/${dt.year}';
+    }
+    if (d == null && f == null) return 'période non précisée';
+    if (d != null && f != null && d == f) return fmt(d);
+    return '${fmt(d)} → ${fmt(f)}';
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        Row(
+          children: [
+            const Icon(
+              Icons.style_outlined,
+              color: QuotidienTheme.lavender,
+              size: 22,
+            ),
+            const SizedBox(width: 8),
+            Text(
+              'Cartes',
+              style: GoogleFonts.merienda(
+                fontSize: 18,
+                fontWeight: FontWeight.w600,
+                color: QuotidienTheme.ink,
+              ),
+            ),
+            const Spacer(),
+            TextButton.icon(
+              onPressed: widget.onAjouterBulle,
+              icon: const Icon(Icons.add, size: 18),
+              label: Text(
+                'Ajouter',
+                style: GoogleFonts.merriweather(fontSize: 13),
+              ),
+            ),
+          ],
+        ),
+        const SizedBox(height: 8),
+        Expanded(child: _buildBody()),
+      ],
+    );
+  }
+
+  Widget _buildBody() {
+    if (_loading) {
+      return const Center(
+        child: SizedBox(
+          width: 28,
+          height: 28,
+          child: CircularProgressIndicator(strokeWidth: 2),
+        ),
+      );
+    }
+    if (_error != null) {
+      return Center(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Text(
+              _error!,
+              textAlign: TextAlign.center,
+              style: GoogleFonts.merriweather(
+                fontSize: 13,
+                color: QuotidienTheme.ink,
+              ),
+            ),
+            const SizedBox(height: 8),
+            TextButton(onPressed: _load, child: const Text('Réessayer')),
+          ],
+        ),
+      );
+    }
+    if (_items.isEmpty) {
+      return Center(
+        child: Text(
+          'Aucune bulle pour le moment.\nLa file d’attention est vide — c’est normal.',
+          textAlign: TextAlign.center,
+          style: GoogleFonts.merriweather(
+            fontSize: 13,
+            color: QuotidienTheme.muted,
+            height: 1.4,
+          ),
+        ),
+      );
+    }
+
+    return NotificationListener<ScrollMetricsNotification>(
+      onNotification: (_) {
+        _syncScrollFades();
+        return false;
+      },
+      child: ShaderMask(
+        blendMode: BlendMode.dstIn,
+        shaderCallback: (Rect bounds) {
+          final stops = <double>[
+            0.0,
+            _fadeExtent,
+            1.0 - _fadeExtent,
+            1.0,
+          ];
+          if (!_isScrollable) {
+            return const LinearGradient(
+              begin: Alignment.topCenter,
+              end: Alignment.bottomCenter,
+              colors: <Color>[
+                Colors.black,
+                Colors.black,
+                Colors.black,
+                Colors.black,
+              ],
+              stops: [0.0, 0.08, 0.92, 1.0],
+            ).createShader(bounds);
+          }
+          final topMask = _fadeTop ? Colors.transparent : Colors.black;
+          final bottomMask = _fadeBottom ? Colors.transparent : Colors.black;
+          return LinearGradient(
+            begin: Alignment.topCenter,
+            end: Alignment.bottomCenter,
+            colors: <Color>[
+              topMask,
+              Colors.black,
+              Colors.black,
+              bottomMask,
+            ],
+            stops: stops,
+          ).createShader(bounds);
+        },
+        child: RefreshIndicator(
+          onRefresh: _load,
+          child: ListView.separated(
+            controller: _scrollController,
+            padding: const EdgeInsets.only(top: 4, bottom: 8),
+            itemCount: _items.length,
+            separatorBuilder: (_, __) => const SizedBox(height: 10),
+            itemBuilder: (context, index) {
+              final card = _items[index];
+              return _BulleTile(
+                card: card,
+                busy: _busyCardId == card.id,
+                onAccept: () => _onAccept(card),
+                onAck: () => _onAck(card),
+                onRefuse: () => _onRefuse(card),
+              );
+            },
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _BulleTile extends StatelessWidget {
+  /// Encre aqua foncé — harmonisée fond aqua / valise (pas le violet).
+  static const Color _aquaInk = Color(0xFF315F63);
+  /// Date : même famille, ~12 % plus claire.
+  static const Color _aquaDate = Color(0xFF4A7276);
+  /// Lien agenda : légère dérive bleue.
+  static const Color _aquaLink = Color(0xFF2B5868);
+
+  final CarteBulle card;
+  final bool busy;
+  final VoidCallback onAccept;
+  final VoidCallback onAck;
+  final VoidCallback onRefuse;
+
+  const _BulleTile({
+    required this.card,
+    required this.busy,
+    required this.onAccept,
+    required this.onAck,
+    required this.onRefuse,
+  });
+
+  static const _mois = [
+    'janvier',
+    'février',
+    'mars',
+    'avril',
+    'mai',
+    'juin',
+    'juillet',
+    'août',
+    'septembre',
+    'octobre',
+    'novembre',
+    'décembre',
+  ];
+
+  String _fmtLong(String? iso) {
+    if (iso == null || iso.isEmpty) return '…';
+    final dt = DateTime.tryParse(iso);
+    if (dt == null) return iso;
+    final jj = dt.day.toString().padLeft(2, '0');
+    return '$jj ${_mois[dt.month - 1]} ${dt.year}';
+  }
+
+  /// Une ligne type maquette : « Du 04 au 06 novembre 2026 ».
+  String _fmtPeriodeUneLigne() {
+    final d1 = DateTime.tryParse(card.dateDebut ?? '');
+    final d2 = DateTime.tryParse(card.dateFin ?? '');
+    if (d1 == null && d2 == null) return '';
+    if (d1 != null && d2 == null) return 'Le ${_fmtLong(card.dateDebut)}';
+    if (d1 == null && d2 != null) return 'Au ${_fmtLong(card.dateFin)}';
+    final a = d1!;
+    final b = d2!;
+    final j1 = a.day.toString().padLeft(2, '0');
+    final j2 = b.day.toString().padLeft(2, '0');
+    if (a.year == b.year && a.month == b.month && a.day == b.day) {
+      return 'Le $j1 ${_mois[a.month - 1]} ${a.year}';
+    }
+    if (a.year == b.year && a.month == b.month) {
+      return 'Du $j1 au $j2 ${_mois[a.month - 1]} ${a.year}';
+    }
+    if (a.year == b.year) {
+      return 'Du $j1 ${_mois[a.month - 1]} au $j2 ${_mois[b.month - 1]} ${a.year}';
+    }
+    return 'Du $j1 ${_mois[a.month - 1]} ${a.year} '
+        'au $j2 ${_mois[b.month - 1]} ${b.year}';
+  }
+
+  /// Arrêt maladie : reste opaque tant que la période n’est pas finie.
+  bool get _attenuee {
+    if (card.isArretMaladie && card.periodeEncoreActive) return false;
+    return card.statut == CarteStatut.traitee;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (card.isCongeAm) return _buildConge(context);
+    return _buildGeneric(context);
+  }
+
+  Widget _buildConge(BuildContext context) {
+    final periode = _fmtPeriodeUneLigne();
+
+    return Opacity(
+      opacity: _attenuee ? 0.55 : 1,
+      child: Carte(
+        assetPath: card.backgroundAsset,
+        constraints: const BoxConstraints(minHeight: 140),
+        padding: const EdgeInsets.fromLTRB(22, 18, 18, 14),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        card.titreAffiche,
+                        maxLines: 2,
+                        overflow: TextOverflow.ellipsis,
+                        style: GoogleFonts.merienda(
+                          fontSize: 18,
+                          fontWeight: FontWeight.w700,
+                          color: _aquaInk,
+                        ),
+                      ),
+                      if (periode.isNotEmpty) ...[
+                        const SizedBox(height: 10),
+                        Row(
+                          crossAxisAlignment: CrossAxisAlignment.center,
+                          children: [
+                            Image.asset(
+                              'assets/images/cartes/icon_calendrier_crayon.png',
+                              width: 28,
+                              height: 28,
+                              fit: BoxFit.contain,
+                              filterQuality: FilterQuality.high,
+                            ),
+                            const SizedBox(width: 8),
+                            Expanded(
+                              child: Text(
+                                periode,
+                                maxLines: 2,
+                                overflow: TextOverflow.ellipsis,
+                                style: GoogleFonts.merienda(
+                                  fontSize: 15,
+                                  fontWeight: FontWeight.w600,
+                                  color: _aquaDate,
+                                  height: 1.25,
+                                ),
+                              ),
+                            ),
+                          ],
+                        ),
+                      ],
+                      if (card.statut == CarteStatut.refusee) ...[
+                        const SizedBox(height: 8),
+                        Text(
+                          card.lastRefuseComment != null &&
+                                  card.lastRefuseComment!.trim().isNotEmpty
+                              ? 'Refusé — ${card.lastRefuseComment}'
+                              : 'Refusé',
+                          maxLines: 2,
+                          overflow: TextOverflow.ellipsis,
+                          style: GoogleFonts.merriweather(
+                            fontSize: 12,
+                            fontStyle: FontStyle.italic,
+                            color: _aquaInk,
+                          ),
+                        ),
+                      ] else if (card.statut == CarteStatut.ouverte &&
+                          card.isCreator) ...[
+                        const SizedBox(height: 8),
+                        Text(
+                          'En attente de réponse',
+                          style: GoogleFonts.merriweather(
+                            fontSize: 12,
+                            color: QuotidienTheme.muted,
+                          ),
+                        ),
+                      ],
+                    ],
+                  ),
+                ),
+                if (card.iconAsset != null) ...[
+                  const SizedBox(width: 8),
+                  Image.asset(
+                    card.iconAsset!,
+                    width: 72,
+                    height: 72,
+                    fit: BoxFit.contain,
+                    filterQuality: FilterQuality.high,
+                  ),
+                ],
+              ],
+            ),
+            const SizedBox(height: 10),
+            Row(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                if (card.peutRepondre)
+                  busy
+                      ? const SizedBox(
+                          width: 28,
+                          height: 28,
+                          child: CircularProgressIndicator(strokeWidth: 2),
+                        )
+                      : Row(
+                          mainAxisSize: MainAxisSize.min,
+                          children: [
+                            _PilulePeinteButton(
+                              asset:
+                                  'assets/images/cartes/btn_coche_pilule.png',
+                              tooltip: 'Accepter',
+                              onTap: onAccept,
+                            ),
+                            const SizedBox(width: 10),
+                            _PilulePeinteButton(
+                              asset:
+                                  'assets/images/cartes/btn_croix_pilule.png',
+                              tooltip: 'Refuser',
+                              onTap: onRefuse,
+                            ),
+                          ],
+                        ),
+                const Spacer(),
+                InkWell(
+                  onTap: () {
+                    ScaffoldMessenger.of(context).showSnackBar(
+                      const SnackBar(
+                        content: Text('Agenda — à venir.'),
+                        duration: Duration(seconds: 2),
+                      ),
+                    );
+                  },
+                  borderRadius: BorderRadius.circular(6),
+                  child: Padding(
+                    padding: const EdgeInsets.symmetric(
+                      horizontal: 4,
+                      vertical: 4,
+                    ),
+                    child: Text(
+                      'Ouvrir dans l’agenda ↗',
+                      style: GoogleFonts.merienda(
+                        fontSize: 13,
+                        fontWeight: FontWeight.w600,
+                        color: _aquaLink,
+                        decoration: TextDecoration.underline,
+                        decorationColor: _aquaLink,
+                      ),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildGeneric(BuildContext context) {
+    final memeJour = card.dateDebut != null &&
+        card.dateFin != null &&
+        card.dateDebut == card.dateFin;
+
+    return Opacity(
+      opacity: _attenuee ? 0.55 : 1,
+      child: Carte(
+        assetPath: card.backgroundAsset,
+        constraints: const BoxConstraints(minHeight: 120),
+        padding: const EdgeInsets.fromLTRB(22, 16, 22, 16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Row(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        card.titreAffiche,
+                        maxLines: 2,
+                        overflow: TextOverflow.ellipsis,
+                        style: GoogleFonts.merienda(
+                          fontSize: 18,
+                          fontWeight: FontWeight.w700,
+                          color: QuotidienTheme.ink,
+                        ),
+                      ),
+                      if (card.dateDebut != null || card.dateFin != null) ...[
+                        const SizedBox(height: 10),
+                        Padding(
+                          padding: const EdgeInsets.only(left: 12),
+                          child: memeJour
+                              ? Text(
+                                  'Le ${_fmtLong(card.dateDebut)}',
+                                  style: GoogleFonts.merienda(
+                                    fontSize: 17,
+                                    fontWeight: FontWeight.w600,
+                                    color: QuotidienTheme.ink,
+                                    height: 1.35,
+                                  ),
+                                )
+                              : Column(
+                                  crossAxisAlignment: CrossAxisAlignment.start,
+                                  children: [
+                                    Text(
+                                      'Du ${_fmtLong(card.dateDebut)}',
+                                      style: GoogleFonts.merienda(
+                                        fontSize: 17,
+                                        fontWeight: FontWeight.w600,
+                                        color: QuotidienTheme.ink,
+                                        height: 1.35,
+                                      ),
+                                    ),
+                                    Text(
+                                      'Au ${_fmtLong(card.dateFin)}',
+                                      style: GoogleFonts.merienda(
+                                        fontSize: 17,
+                                        fontWeight: FontWeight.w600,
+                                        color: QuotidienTheme.ink,
+                                        height: 1.35,
+                                      ),
+                                    ),
+                                  ],
+                                ),
+                        ),
+                      ],
+                    ],
+                  ),
+                ),
+                if (card.iconAsset != null) ...[
+                  const SizedBox(width: 10),
+                  Image.asset(
+                    card.iconAsset!,
+                    width: 80,
+                    height: 80,
+                    fit: BoxFit.contain,
+                    filterQuality: FilterQuality.high,
+                  ),
+                ],
+              ],
+            ),
+            if (card.statut == CarteStatut.refusee) ...[
+              const SizedBox(height: 6),
+              Text(
+                card.lastRefuseComment != null &&
+                        card.lastRefuseComment!.trim().isNotEmpty
+                    ? 'Refusé — ${card.lastRefuseComment}'
+                    : 'Refusé',
+                maxLines: 2,
+                overflow: TextOverflow.ellipsis,
+                style: GoogleFonts.merriweather(
+                  fontSize: 12,
+                  fontStyle: FontStyle.italic,
+                  color: QuotidienTheme.ink,
+                ),
+              ),
+            ] else if (card.statut == CarteStatut.ouverte &&
+                card.isCreator) ...[
+              const SizedBox(height: 6),
+              Text(
+                'En attente de réponse',
+                style: GoogleFonts.merriweather(
+                  fontSize: 12,
+                  color: QuotidienTheme.muted,
+                ),
+              ),
+            ],
+            if (card.peutRepondre) ...[
+              const SizedBox(height: 14),
+              if (busy)
+                const Center(
+                  child: SizedBox(
+                    width: 22,
+                    height: 22,
+                    child: CircularProgressIndicator(strokeWidth: 2),
+                  ),
+                )
+              else if (card.responseMode == CarteResponseMode.acceptRefuse)
+                Row(
+                  children: [
+                    Expanded(
+                      child: _ActionPill(
+                        asset: QuotidienTheme.pillTurquoiseAsset,
+                        iconAsset: 'assets/images/coche.png',
+                        tooltip: 'Accepter',
+                        onTap: onAccept,
+                      ),
+                    ),
+                    const SizedBox(width: 12),
+                    Expanded(
+                      child: _ActionPill(
+                        asset: QuotidienTheme.pillCorailAsset,
+                        iconAsset: 'assets/images/red_cross2.png',
+                        tooltip: 'Refuser',
+                        onTap: onRefuse,
+                      ),
+                    ),
+                  ],
+                )
+              else if (card.responseMode == CarteResponseMode.ack)
+                _ActionPill(
+                  asset: QuotidienTheme.pillTurquoiseAsset,
+                  iconAsset: 'assets/images/coche.png',
+                  tooltip: 'Bien reçu',
+                  onTap: onAck,
+                ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// Bouton pilule peinte (coche / croix intégrées) — carte congés.
+class _PilulePeinteButton extends StatelessWidget {
+  final String asset;
+  final String tooltip;
+  final VoidCallback onTap;
+
+  const _PilulePeinteButton({
+    required this.asset,
+    required this.tooltip,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Tooltip(
+      message: tooltip,
+      child: InkWell(
+        onTap: onTap,
+        borderRadius: BorderRadius.circular(20),
+        child: Image.asset(
+          asset,
+          height: 36,
+          fit: BoxFit.contain,
+          filterQuality: FilterQuality.high,
+        ),
+      ),
+    );
+  }
+}
+
+/// Bouton pilule dessiné (fond pastel + coche / croix).
+class _ActionPill extends StatelessWidget {
+  final String asset;
+  final String iconAsset;
+  final String tooltip;
+  final VoidCallback onTap;
+
+  const _ActionPill({
+    required this.asset,
+    required this.iconAsset,
+    required this.tooltip,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Tooltip(
+      message: tooltip,
+      child: InkWell(
+        onTap: onTap,
+        borderRadius: BorderRadius.circular(24),
+        child: SizedBox(
+          height: 40,
+          child: Stack(
+            alignment: Alignment.center,
+            children: [
+              Positioned.fill(
+                child: Image.asset(asset, fit: BoxFit.fill),
+              ),
+              Image.asset(
+                iconAsset,
+                height: 22,
+                width: 22,
+                fit: BoxFit.contain,
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

frontend/lib/widgets/quotidien/couple_selector_bandeau.dart

@@ -3,6 +3,7 @@ import 'package:google_fonts/google_fonts.dart';
 import 'package:p_tits_pas/models/couple_garde.dart';
 import 'package:p_tits_pas/services/api/api_config.dart';
 import 'package:p_tits_pas/widgets/common/auth_network_image.dart';
+import 'package:p_tits_pas/widgets/quotidien/carte.dart';
 import 'package:p_tits_pas/widgets/quotidien/quotidien_theme.dart';
 
 /// Rôle qui consulte le bandeau : côté parent (enfant | nounou) ou côté AM
@@ -174,14 +175,10 @@ class _CoupleCard extends StatelessWidget {
       );
     }
 
-    return Container(
+    return Carte.bandeau(
+      assetPath: QuotidienTheme
+          .bandeauColors[colorIndex % QuotidienTheme.bandeauColors.length],
       height: 90,
-      decoration: BoxDecoration(
-        image: DecorationImage(
-          image: AssetImage(QuotidienTheme.bandeauColors[colorIndex % QuotidienTheme.bandeauColors.length]), 
-          fit: BoxFit.fill,
-        ),
-      ),
       padding: const EdgeInsets.symmetric(horizontal: 24),
       child: Row(
         children: [
@@ -190,7 +187,8 @@ class _CoupleCard extends StatelessWidget {
               padding: const EdgeInsets.only(right: 12),
               child: _MembreTile(
                 photoUrl: couple.enfant.photoUrl,
-                name: (couple.enfant.prenom != null && couple.enfant.prenom!.isNotEmpty)
+                name: (couple.enfant.prenom != null &&
+                        couple.enfant.prenom!.isNotEmpty)
                     ? couple.enfant.prenom!
                     : couple.enfant.displayName(fallback: 'Enfant'),
                 fallbackIcon: Icons.child_care,
@@ -215,12 +213,12 @@ class _CoupleCard extends StatelessWidget {
           ),
           SizedBox(
             width: 28,
-            child: showChevron 
-              ? const Icon(
-                  Icons.keyboard_arrow_down,
-                  color: QuotidienTheme.ink,
-                )
-              : null,
+            child: showChevron
+                ? const Icon(
+                    Icons.keyboard_arrow_down,
+                    color: QuotidienTheme.ink,
+                  )
+                : null,
           ),
         ],
       ),
@@ -306,24 +304,22 @@ class _CoupleBandeauSkeleton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      height: 90,
-      decoration: BoxDecoration(
-        image: DecorationImage(
-          image: const AssetImage(QuotidienTheme.bandeauLime), // Un asset existant
-          fit: BoxFit.fill,
-          colorFilter: ColorFilter.mode(
-            Colors.white.withValues(alpha: 0.5),
-            BlendMode.lighten,
+    return ColorFiltered(
+      colorFilter: ColorFilter.mode(
+        Colors.white.withValues(alpha: 0.5),
+        BlendMode.lighten,
+      ),
+      child: Carte.bandeau(
+        assetPath: QuotidienTheme.bandeauLime,
+        height: 90,
+        child: const Center(
+          child: SizedBox(
+            width: 26,
+            height: 26,
+            child: CircularProgressIndicator(strokeWidth: 2),
           ),
         ),
       ),
-      alignment: Alignment.center,
-      child: const SizedBox(
-        width: 26,
-        height: 26,
-        child: CircularProgressIndicator(strokeWidth: 2),
-      ),
     );
   }
 }
@@ -333,14 +329,9 @@ class _CoupleBandeauEmpty extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return Carte.bandeau(
+      assetPath: QuotidienTheme.bandeauLime,
       height: 90,
-      decoration: const BoxDecoration(
-        image: DecorationImage(
-          image: AssetImage(QuotidienTheme.bandeauLime), // Un asset existant par défaut
-          fit: BoxFit.fill,
-        ),
-      ),
       padding: const EdgeInsets.symmetric(horizontal: 24),
       child: Row(
         children: [
@@ -369,38 +360,35 @@ class _CoupleBandeauError extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      height: 90,
-      decoration: BoxDecoration(
-        image: DecorationImage(
-          image: const AssetImage(QuotidienTheme.bandeauLime), // Un asset existant
-          fit: BoxFit.fill,
-          colorFilter: ColorFilter.mode(
-            QuotidienTheme.coral.withValues(alpha: 0.3),
-            BlendMode.srcATop,
-          ),
-        ),
+    return ColorFiltered(
+      colorFilter: ColorFilter.mode(
+        QuotidienTheme.coral.withValues(alpha: 0.3),
+        BlendMode.srcATop,
       ),
-      padding: const EdgeInsets.symmetric(horizontal: 24),
-      child: Row(
-        children: [
-          const Icon(Icons.error_outline, color: QuotidienTheme.ink),
-          const SizedBox(width: 12),
-          Expanded(
-            child: Text(
-              message,
-              style: GoogleFonts.merriweather(
-                fontSize: 13,
-                color: QuotidienTheme.ink,
+      child: Carte.bandeau(
+        assetPath: QuotidienTheme.bandeauLime,
+        height: 90,
+        padding: const EdgeInsets.symmetric(horizontal: 24),
+        child: Row(
+          children: [
+            const Icon(Icons.error_outline, color: QuotidienTheme.ink),
+            const SizedBox(width: 12),
+            Expanded(
+              child: Text(
+                message,
+                style: GoogleFonts.merriweather(
+                  fontSize: 13,
+                  color: QuotidienTheme.ink,
+                ),
               ),
             ),
-          ),
-          if (onRetry != null)
-            TextButton(
-              onPressed: onRetry,
-              child: const Text('Réessayer'),
-            ),
-        ],
+            if (onRetry != null)
+              TextButton(
+                onPressed: onRetry,
+                child: const Text('Réessayer'),
+              ),
+          ],
+        ),
       ),
     );
   }

frontend/lib/widgets/quotidien/quotidien_theme.dart

@@ -49,6 +49,7 @@ abstract final class QuotidienTheme {
       'assets/images/bg_turquoise_pill.png';
   static const String pillLavenderAsset =
       'assets/images/bg_lavender_pill.png';
+  static const String pillCorailAsset = 'assets/images/bg_corail_pill.png';
 
   /// Trait crayon gris (2400×28, transparent) : séparateurs bandeau / corps /
   /// footer. Version verticale (28×2400) entre les colonnes.

frontend/pubspec.yaml

@@ -50,8 +50,9 @@ flutter:
   uses-material-design: true
   
   assets:
-    - assets/images/ # Déclarer le dossier entier
-    - assets/cards/ # Nouveau dossier de cartes
+    - assets/images/
+    - assets/images/cartes/
+    - assets/cards/
     - assets/documents/
     
   fonts: