pages comprendre and rejoindre reponsive mobile

src/pages/comprendre-la-cae.md

@@ -23,6 +23,7 @@ La CAE c’est aussi une société coopérative, chacun des associés qui la com
   
   ### Au démarrage
   </summary>
+  <div class="table-wrapper">
     <table>
       <thead>
         <tr>
@@ -47,6 +48,7 @@ La CAE c’est aussi une société coopérative, chacun des associés qui la com
         </tr>
       </tbody>
     </table>
+  </div>
 
   *ARE : Aide au Retour à l’Emploi
   
@@ -58,6 +60,7 @@ La CAE c’est aussi une société coopérative, chacun des associés qui la com
   
   ### Votre activité
   </summary>
+	<div class="table-wrapper">
     <table>
       <thead>
         <tr>
@@ -100,6 +103,7 @@ La CAE c’est aussi une société coopérative, chacun des associés qui la com
         </tr>
       </tbody>
     </table>
+  </div>
 
   *RCPro : Responsabilité Civile Professionnelle
 
@@ -111,6 +115,7 @@ La CAE c’est aussi une société coopérative, chacun des associés qui la com
 
   ### Vos obligations  
   </summary>
+  <div class="table-wrapper">
     <table>
       <thead>
         <tr>
@@ -141,6 +146,7 @@ La CAE c’est aussi une société coopérative, chacun des associés qui la com
         </tr>
       </tbody>
     </table>
+  </div>
 </details>
 
 <details>
@@ -148,6 +154,7 @@ La CAE c’est aussi une société coopérative, chacun des associés qui la com
 
   ### La prévoyance
   </summary>
+  <div class="table-wrapper">
     <table>
       <thead>
         <tr>
@@ -179,6 +186,7 @@ Votre activité ouvre des droits à l’ARE*</td>
         </tr>
       </tbody>
     </table>
+  </div>
 
   *ARE: Aide au Retour à l'Emploi
 

src/pages/nous-rejoindre.md

@@ -34,13 +34,14 @@ permalink: '/nous-rejoindre/index.html'
 
   <img src="/images/sailor-accomp.svg" alt="Entrepreneur en contrat CAPE" style="width: 9rem;">
 
-  Au bout d’un certain temps votre activité devient prérenne.
+  Au bout d’un certain temps votre activité devient prérenne. Deux options s'offrent à vous :
   </article>
 </section>
 <section class="process-cae split">
   <article class="process-cae__block">
 
-  <img src="/images/arrow-left.svg" alt="flèche gauche">
+  <img class="hide-mobile" src="/images/arrow-left.svg" alt="flèche gauche">
+  <p class="hide-desktop" style="font-weight: 600; align-self: center">- SOIT -</p>
   
   Vous intégrez la coopérative en tant qu'Entrepreneur salarié, bienvenue parmi nous !
   
@@ -66,10 +67,11 @@ permalink: '/nous-rejoindre/index.html'
   </article>
   <article class="process-cae__block">
 
-  <img src="/images/arrow-right.svg" alt="flèche droite">
+  <img class="hide-mobile" src="/images/arrow-right.svg" alt="flèche droite">
+  <p class="hide-desktop" style="font-weight: 600; align-self: center">- SOIT -</p>
 
   Vous créez votre propre entreprise, félicitations !
 
-  <img src="/images/small-boat.svg" alt="Petit bateau à voile" style="width: 8rem; margin-top: 4rem; margin-left: 18rem;">
+  <img class="small-boat" src="/images/small-boat.svg" alt="Petit bateau à voile">
   </article>
 </section>

src/scss/components/_form.scss

@@ -128,14 +128,12 @@ legend {
 }
 
 @media (max-width: 575.98px) {
-  .home .form-container {
+  .form-container {
     svg {
       width: 70rem;
       overflow: hidden;
     }
-  }
 
-  .form-container {
     .contact-heading {
       margin: 2rem 0;
     }

src/scss/components/_nav.scss

@@ -34,3 +34,9 @@
     }
   }
 }
+
+@media (max-width: 575.98px) {
+  .nav {
+    margin-top: 1rem;
+  }
+}

src/scss/components/_post.scss

@@ -166,6 +166,16 @@
       }
     }
 
+    .table-wrapper {
+      ~ p {
+        font-size: .875rem;
+
+        &:last-child {
+          margin-bottom: 1.5rem;
+        }
+      }
+    }
+
     table {
       margin-bottom: 1rem;
       
@@ -208,14 +218,6 @@
           background-color: var(--color-light-gray);
         }
       }
-
-      ~ p {
-        font-size: .875rem;
-
-        &:last-child {
-          margin-bottom: 1.5rem;
-        }
-      }
     }
 
     .process-cae {
@@ -295,10 +297,15 @@
         }
 
         img {
-          // width: 18rem;
           align-self: center;
           margin: 0 auto;
         }
+
+        .small-boat {
+          width: 8rem;
+          margin-top: 4rem;
+          margin-left: 18rem;
+        }
       }
     }
   }
@@ -322,3 +329,45 @@
     }
   }
 }
+
+@media (max-width: 575.98px) {
+  .post {
+    &__body {
+      h1 {
+        margin: 4rem 0;
+        font-size: 1.75rem;
+      }
+
+
+      .split-content {
+        display: block;
+      }
+
+      .table-wrapper {
+        overflow-y: auto;
+      }
+
+      table {
+        min-width: 48rem;
+      }
+
+      .process-cae{
+        
+        &.split {
+          display: block;
+
+          .process-cae__block:last-child {
+            align-items: flex-start;
+          }
+        }
+
+        &__block {
+          .small-boat {
+            margin-left: auto;
+            margin-right: auto;
+          }
+        }
+      }
+    }
+  }
+}

src/scss/global.scss

@@ -75,3 +75,4 @@ img {
 @import 'components/sponsor';
 @import 'components/skip-link';
 @import 'components/video-player';
+@import 'utilities/responsive';

src/scss/utilities/_responsive.scss

@@ -0,0 +1,11 @@
+.hide-desktop {
+  @media (min-width: 576px) {
+    display: none;
+  }
+}
+
+.hide-mobile {
+  @media (max-width: 575.98px) {
+    display: none;
+  }
+}