ajout mode plein air v1

frontend/src/app/pages/home/home.html

@@ -23,6 +23,20 @@
             <span>▶</span>
           }
         </label>
+
+        <div class="control-group" id="pleinAirMode">
+          <label>
+            <input type="checkbox" [(ngModel)]="pleinAirMode" (change)="togglePleinAir()">
+            Mode plein air
+          </label>
+          @if (pleinAirMode) {
+            <div class="quick-actions" style="margin-top:8px; display:flex; gap:6px; flex-wrap:wrap;">
+              <button class="btn" (click)="quickCreate('traffic.contestation')">🚩 Contester</button>
+              <button class="btn" (click)="quickCreate('traffic.interruption')">⛓️ Interruption</button>
+              <button class="btn" (click)="quickCreate('traffic.wrong_way')">⛖ Détourné</button>
+            </div>
+          }
+        </div>
   
         <div class="filters-group">
           @if (showFilters) {
@@ -78,11 +92,12 @@
         <div class="control-group">
           <app-what-filter [label]="'Filtrer par type d\'événement'" [available]="availableWhatTypes" [selected]="selectedWhatFilter" (selectedChange)="selectedWhatFilter = $event; onWhatFilterChange()"></app-what-filter>
         </div>
+
   
   
-        <app-osm></app-osm>
+        <!-- <app-osm></app-osm>
   
-        <app-menu></app-menu>
+        <app-menu></app-menu> -->
         <hr>
         }
       </div>
@@ -100,7 +115,9 @@
             <li> Mettre à jour un évènement: Sélectionnez un évènement sur la carte ou dans la liste pour le modifier.</li>
           </ul>
       </div>
+      @if(!pleinAirMode){
       <app-edit-form [selected]="selected" (saved)="onSaved($event)" (created)="onCreated($event)" (deleted)="onDeleted($event)" (canceled)="onCanceled()"></app-edit-form>
+    }
     }
   
       <div id="fixed_actions">
@@ -174,6 +191,15 @@
     <button class="button toggle-options" (click)="showOptions = !showOptions">
       Options
     </button>
+    @if (toasts.length) {
+      <div class="toaster" style="position:fixed;right:16px;top:16px;display:flex;flex-direction:column;gap:8px;z-index:1000;">
+        @for (t of toasts; track t.id) {
+          <div class="toast" [class.success]="t.type==='success'" [class.error]="t.type==='error'" [class.info]="t.type==='info'" style="padding:10px 12px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.15);background:#fff;min-width:200px;">
+            {{t.message}}
+          </div>
+        }
+      </div>
+    }
     @if (theme()) {
       <div class="subtheme-bar">
         <div class="help">Thème: {{ theme() }} — Cliquez sur la carte pour définir des coordonnées puis créez un évènement du sous-thème choisi.</div>