fix conflict

src/app/activity-cards/activity-cards.component.css

-a:hover {
-    text-decoration: none;
-    background-color:#c8563a;
-    transition: 0.7s;
-    color: black;
 
+.show{
+    opacity: 1!important;
+    transition-property: opacity!important;
+    transition-duration: 0.5s!important;
 }
 
-a {
-    text-decoration: none;
-    color: black;
-
+.hide{
+    pointer-events: none!important;
+    opacity: 0!important;
+    transition-property: opacity!important;
+    transition-duration: 0.15s!important;
 }
 

src/app/activity-cards/activity-cards.component.html

-<app-listactivity #listactivity></app-listactivity>
-<div class="d-flex justify-content-center p-3 mt-4">
+<div class="show" id="stage">
+<div class="d-flex justify-content-center">
     <h1>Activités près de chez vous</h1>
 </div>
 <div class="container">
@@ -29,3 +29,4 @@
     </a>
     </div>
 </div>
+</div>
\ No newline at end of file

src/app/app.module.ts

@@ -29,6 +29,7 @@ import { StageDetailComponent } from './stage-detail/stage-detail.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
+
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/change-page/change-page.component.css

@@ -47,6 +47,7 @@
     transition-duration: 0.5s;
     transition-duration: cubic-bezier(.02,1,1,.98);
     border: 0px;
+    
 }
 .bordertest2{
     height: 100vh;
@@ -63,3 +64,18 @@
     transition-duration: 0.3s;
     border: 0px;
 }
+
+.show{
+    opacity: 1!important;
+    transition-property: opacity!important;
+    transition-duration: 0.5s!important;
+}
+
+.hide{
+    pointer-events: none!important;
+    opacity: 0!important;
+    transition-property: opacity!important;
+    transition-duration: 0.15s!important;
+}
+
+

src/app/change-page/change-page.component.html

 
     <div class="background">
+
     <app-stage-accordion class="border" id="border" (click)="changeclass()"></app-stage-accordion>
+
     <app-activity-cards class="border2" id="border2" (click)="changeclass()"></app-activity-cards>
+       
     </div>

src/app/change-page/change-page.component.ts

@@ -9,12 +9,23 @@ import { Component } from '@angular/core';
 export class ChangePageComponent {
   changeclass(): void {
     var b1 = document.getElementById("border")  
+    var accordion = document.getElementById("accordion")  
+    var stage = document.getElementById("stage")  
+    console.log(stage)
+    console.log(accordion)
     if(b1 != null)
     {
       var b2 = document.getElementById("border2")
       if(b1.matches(":hover")) {
         if(b2 != null){
           if(b1.className == "border"){
+            if(accordion != null){
+              if(stage){
+                accordion.className = "show"
+                stage.className = "hide"
+              }
+              
+            }
             b1.className="bordertest"
             b2.className="bordertest2"}
           }
@@ -22,6 +33,13 @@ export class ChangePageComponent {
       if(b2 != null){
         if(b2.matches(":hover")) {     
           if(b1.className == "bordertest"){
+            if(accordion != null){
+              if(stage){
+                accordion.className = "hide"
+                stage.className = "show"
+              }
+              
+            }
             b1.className="border"
             b2.className="border2"}
           }

src/app/detail-activity/detail-activity.component.css

+.show{
+    opacity: 1!important;
+    transition-property: opacity!important;
+    transition-duration: 0.5s!important;
+}
+
+.hide{
+    pointer-events: none!important;
+    opacity: 0!important;
+    transition-property: opacity!important;
+    transition-duration: 0.15s!important;
+}
\ No newline at end of file

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

+.show{
+    opacity: 1!important;
+    transition-property: opacity!important;
+    transition-duration: 0.5s!important;
+}
+
+.hide{
+    pointer-events: none!important;
+    opacity: 0!important;
+    transition-property: opacity!important;
+    transition-duration: 0.15s!important;
+}
+
+.hide:hover{
+    pointer-events: none!important;
+    opacity: 0.5!important;
+    transition-property: opacity!important;
+    transition-duration: 0.15s!important;
+}
\ No newline at end of file

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

-<div class="w-100 h-100 p-5">
+<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="accordion-item" *ngFor="let stage of stages">
@@ -16,3 +17,4 @@
         </div>
     </div>
 </div>
+</div>
\ No newline at end of file