stage-accordion : architecture

src/app/stage-accordion/stage-accordion.component.html

 <div>
     <div class="hide" id="accordion">
-    <h2 class="text-center color-bis mb-5">Trouvez le stage de vos rêves</h2>
-    <div class="accordion" id="accordionExample">
+        <div class="container p-5">
+            <style>
+                    #titreStage{
+                        color:bisque;
+                    }
+            </style>
+            <h2 id="titreStage" class="text-center color-bis mb-5">Trouvez le stage de vos rêves</h2>
+            <div class="accordion accordion-flush" id="accordionExample">
                 <div class="accordion-item" *ngFor="let stage of stages">
-            <h2 class="accordion-header" id="heading{{stage.id}}">
-                <button class="accordion-button" type="button" data-bs-toggle="collapse" [attr.data-bs-target]="'#collapse' + stage.id" aria-expanded="true" [attr.data-aria-controls]="'collapse' + stage.id">
-                    {{stage.titre}}
-                </button>
-            </h2>
-            <div id="collapse{{stage.id}}" class="accordion-collapse collapse" [attr.data.aria-labelledby]="'heading' + stage.id"
-                data-bs-parent="#accordionExample">
-                <div class="accordion-body">
-                    {{stage.description}}
-                </div>
-            </div>
+                    <app-stage-detail [stage]="stage" />
                 </div>
             </div>
         </div>