diff --git a/src/app/components/opCommercial/envoyer-carte/envoyer-carte.component.html b/src/app/components/opCommercial/envoyer-carte/envoyer-carte.component.html
index 33ec043..b5cb29d 100644
--- a/src/app/components/opCommercial/envoyer-carte/envoyer-carte.component.html
+++ b/src/app/components/opCommercial/envoyer-carte/envoyer-carte.component.html
@@ -72,27 +72,21 @@
           et indiquez que vous aves lu notre Politique d'utilisation des
           données, y compris notre Utilisation des cookies.
         </label>
-        <div class="col-md-12 subCard1 card" id="subCard1">
-          <img src="{{cartePar.carteTemplate.downloadURL}}" id="image1" crossorigin="anonymous" class="img-fluid mx-auto d-block flex-center card-img-overlay" alt="Responsive image">
-          <div class="view">
-            <div class="mask pattern-6">
-              <div class="row firstRow">
-                <div class="col-md-6 flex-center card-block cardPart1"><p class="white-text info-text font-bold">{{commercant.commercialName}}</p></div>
-                <div class="col-md-6 flex-center card-block card-image mb-1 cardPart2 image2" [ngStyle]="{ 'background-image': 'url(' + commercant.image.downloadURL + ')'}">
-
-                </div>
-              </div>
-              <div class="row secondRow">
-                <div class="col-md-6 flex-center cardPart3 flex-column">
-                  <p class="white-text info-text font-bold">{{cartePar.name}}</p>
-                </div>
-                <div class="col-md-6 flex-center cardPart4"><p class="white-text info-text font-bold">{{parrain.familyname}} {{parrain.firstname}}</p></div>
-              </div>
-              <div class="col-md-12 text-center" id="dateFin">
-                <label class="white-text info-text font-bold">Valable jusqu'au: {{cartePar.dateFin | date:'dd/MM/yyyy'}}</label>
-              </div>
+        <div class="col-md-6 d-flex flex-column" id="subCard1">
+          <img src="{{cartePar.carteTemplate.downloadURL}}" id="image1" class="img-fluid mx-auto d-block flex-center card-img-overlay" alt="Responsive image">
+          <div class="subCard1-row d-flex flex-row">
+            <div class="merchant-name d-flex flex-center"><p class="white-text info-text font-bold">{{commercant.commercialName}}</p></div>
+            <div class="merchant-logo" [ngStyle]="{ 'background-image': 'url(' + commercant.image.downloadURL + ')'}">
+
             </div>
           </div>
+          <div class="subCard1-row d-flex flex-row">
+            <div class="operation-data flex-center"><p class="white-text info-text font-bold">{{cartePar.name}}</p></div>
+            <div class="operation-id flex-center"><p class="white-text info-text font-bold">{{cartePar.parrainCarte.familyname}} {{cartePar.parrainCarte.firstname}}</p></div>
+          </div>
+          <!--<div class="col-md-12 text-center" id="dateFin">
+            <label class="white-text info-text font-bold">Valable jusqu'au: {{cartePar.dateFin | date:'dd/MM/yyyy'}}</label>
+          </div>-->
         </div>
         <div class="card-footer" style="margin-top:5%">
           <div *ngIf="carteEnvoieEncours">
@@ -168,27 +162,25 @@
           et indiquez que vous aves lu notre Politique d'utilisation des
           données, y compris notre Utilisation des cookies.
         </label>
-        <div class="col-md-12 subCard1 card" id="subCard1">
-          <img src="{{cartePar.carteTemplate.downloadURL}}" id="image1" crossorigin="anonymous" class="img-fluid mx-auto d-block flex-center card-img-overlay" alt="Responsive image">
-          <div class="view">
-            <div class="mask pattern-6">
-              <div class="row firstRow">
-                <div class="col-md-6 flex-center card-block cardPart1"><p class="white-text info-text font-bold">{{commercant.commercialName}}</p></div>
-                <div class="col-md-6 flex-center card-block card-image mb-1 cardPart2 image2" [ngStyle]="{ 'background-image': 'url(' + commercant.image.downloadURL + ')'}">
-                </div>
-              </div>
-              <div class="row secondRow">
-                <div class="col-md-6 flex-center cardPart3 flex-column">
-                  <p class="white-text info-text font-bold">{{cartePar.name}}</p>
-                </div>
-                <div class="col-md-6 flex-center cardPart4"><p class="white-text info-text font-bold">{{cartePar.parrainCarte.familyname}} {{cartePar.parrainCarte.firstname}}</p></div>
-              </div>
-              <div class="col-md-12 text-center" id="dateFin">
-                <label class="white-text info-text font-bold">Valable jusqu'au: {{cartePar.dateFin | date:'dd/MM/yyyy'}}</label>
-              </div>
+
+        <div class="col-md-6 d-flex flex-column " id="subCard1">
+          <img src="{{cartePar.carteTemplate.downloadURL}}" id="image1" class="img-fluid mx-auto d-block flex-center card-img-overlay" alt="Responsive image">
+          <div class="subCard1-row d-flex flex-row">
+            <div class="merchant-name d-flex flex-center"><p class="white-text info-text font-bold">{{commercant.commercialName}}</p></div>
+            <div class="merchant-logo" [ngStyle]="{ 'background-image': 'url(' + commercant.image.downloadURL + ')'}">
+
             </div>
           </div>
+          <div class="subCard1-row d-flex flex-row">
+            <div class="operation-data flex-center"><p class="white-text info-text font-bold">{{cartePar.name}}</p></div>
+            <div class="operation-id flex-center"><p class="white-text info-text font-bold">{{cartePar.parrainCarte.familyname}} {{cartePar.parrainCarte.firstname}}</p></div>
+          </div>
+          <div class="col-md-12 text-center" id="dateFin">
+            <label class="white-text info-text font-bold">Valable jusqu'au: {{cartePar.dateFin | date:'dd/MM/yyyy'}}</label>
+          </div>
         </div>
+
+
         <div class="card-footer" style="margin-top:5%">
           <div *ngIf="carteEnvoieEncours">
             <div class="row">
diff --git a/src/app/components/opCommercial/envoyer-carte/envoyer-carte.component.scss b/src/app/components/opCommercial/envoyer-carte/envoyer-carte.component.scss
index 41266f5..13e6855 100644
--- a/src/app/components/opCommercial/envoyer-carte/envoyer-carte.component.scss
+++ b/src/app/components/opCommercial/envoyer-carte/envoyer-carte.component.scss
@@ -6,40 +6,55 @@
   padding: 5%;
 }
 
-.cardPart2 {
-  //background-color: orange;
+#subCard1 {
+  display: flex;
+  justify-content: center;
+}
+
+.subCard1-row {
+  height: 100%;
+  z-index: 3;
+}
+
+.subCard1-row div {
+  width: 100%;
+}
+
+.merchant-name p {
+  font-size: 3rem;
+}
+
+.merchant-logo {
   background-repeat: no-repeat;
-  background-size:25% auto;
+  background-size:50%;
   background-position : center;
 }
 
-
-.subCard1 {
-  height: 15rem;
-  padding: 1%;
-  background-color: white;
-  align-items: center;
-  margin: auto;
-  width: 85%;
-  padding-top: 0;
-  padding-bottom: 0;
-  font-size: 1.05rem;
-  // background-repeat: no-repeat;
-  // background-size:20% auto;
-  // background-position : center;
+#image1 {
+  z-index: 1;
+  padding: 0;
 }
 
-.view {
-  height:102%;
-  width: 103%;
+#subCard1::before {
+  content: ' ';
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: fade_out(black, 0.5);
+  left: 0;
+  top: 0;
+  z-index: 2;
 }
 
-.firstRow {
-  height: 45%;
+#subCard2Part1 {
+  padding-top: 5%;
+  display: flex;
+  flex-direction: column
 }
 
-.secondRow {
-  height: 45%;
+#subCard2Part2 {
+  padding-top: 5%;
 }
 
 #dateFin {
@@ -71,6 +86,25 @@
   }
 }
 
+@media screen and (max-width: 786px) {
+
+  .subCard1-row {
+    height: 35vw;
+    .merchant-name p {
+      font-size: 2rem;
+    }
+    .operation-data p {
+      font-size: 1rem;
+    }
+
+    .operation-id p {
+      font-size: 0.8rem;
+      font-weight: bold;
+    }
+  }
+
+}
+
 
 #footer-1, #footer-2, #footer-3 {
   display: flex;
diff --git a/src/app/components/opCommercial/op-commercial/op-commercial.component.html b/src/app/components/opCommercial/op-commercial/op-commercial.component.html
index 407d8cd..9dadf3d 100644
--- a/src/app/components/opCommercial/op-commercial/op-commercial.component.html
+++ b/src/app/components/opCommercial/op-commercial/op-commercial.component.html
@@ -49,22 +49,18 @@
     <div *ngFor="let op of opCommData | async">
       <div class="card mainCard" *ngIf="(op.status == statutAffiche) || (statutAffiche == 'Toutes')" style="height: 100%">
         <div class="row no-margin" id="testt">
-          <div class="col-md-6 mb-1 subCard1" id="subCard1">
+          <div class="col-md-6 d-flex flex-column " id="subCard1">
             <img src="{{op.carteTemplate.downloadURL}}" id="image1" class="img-fluid mx-auto d-block flex-center card-img-overlay" alt="Responsive image">
-            <div class="view">
-              <div class="mask pattern-6">
-                <div class="row no-margin firstRow">
-                  <div class="col-md-6 flex-center card-block cardPart1"><p class="white-text info-text font-bold">{{commercant.commercialName}}</p></div>
-                  <div class="col-md-6 flex-center card-block card-image mb-1 cardPart2 image2" [ngStyle]="{ 'background-image': 'url(' + commercant.image.downloadURL + ')'}">
+            <div class="subCard1-row d-flex flex-row">
+              <div class="merchant-name d-flex flex-center"><p class="white-text info-text font-bold">{{commercant.commercialName}}</p></div>
+              <div class="merchant-logo" [ngStyle]="{ 'background-image': 'url(' + commercant.image.downloadURL + ')'}">
 
-                  </div>
-                </div>
-                <div class="row no-margin secondRow">
-                  <div class="col-md-6 flex-center cardPart3"><p class="white-text info-text font-bold">{{op.name}}</p></div>
-                  <div class="col-md-6 flex-center cardPart4"><p class="white-text info-text font-bold">{{op.uid}}</p></div>
-                </div>
               </div>
             </div>
+            <div class="subCard1-row d-flex flex-row">
+              <div class="operation-data flex-center"><p class="white-text info-text font-bold">{{op.name}}</p></div>
+              <div class="operation-id flex-center"><p class="white-text info-text font-bold">{{op.uid}}</p></div>
+            </div>
           </div>
           <div class="col-md-6 card subCard2">
             <div class="card-block row no-margin">
diff --git a/src/app/components/opCommercial/op-commercial/op-commercial.component.scss b/src/app/components/opCommercial/op-commercial/op-commercial.component.scss
index 6d3becb..05cf967 100644
--- a/src/app/components/opCommercial/op-commercial/op-commercial.component.scss
+++ b/src/app/components/opCommercial/op-commercial/op-commercial.component.scss
@@ -30,35 +30,46 @@
   font-size: 1.05rem;
 }
 
-.firstRow {
-  height: 50%;
+.subCard1-row {
+  height: 100%;
+  z-index: 3;
 }
 
-.secondRow {
-  height: 50%;
+.subCard1-row div {
+  width: 100%;
 }
 
-
-.cardPart1 {
-  //background-color: red;
+.merchant-name p {
+  font-size: 3rem;
 }
 
-.cardPart2 {
-  //background-color: orange;
+.merchant-logo {
   background-repeat: no-repeat;
-  background-size:50% auto;
+  background-size:50%;
   background-position : center;
 }
 
-
-.cardPart3 {
-  //background-color: green;
+#image1 {
+  z-index: 1;
+  padding: 0;
 }
 
-.cardPart4 {
-  //background-color: yellow;
+#subCard1::before {
+  content: ' ';
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: fade_out(black, 0.5);
+  left: 0;
+  top: 0;
+  z-index: 2;
 }
 
+
+
+
+
 #subCard2Part1 {
   padding-top: 5%;
   display: flex;
@@ -134,6 +145,25 @@
   }
 }
 
+@media screen and (max-width: 786px) {
+
+  .subCard1-row {
+    height: 35vw;
+    .merchant-name p {
+      font-size: 2rem;
+    }
+    .operation-data p {
+      font-size: 1rem;
+    }
+
+    .operation-id p {
+      font-size: 0.8rem;
+      font-weight: bold;
+    }
+  }
+
+}
+