TEC : Menu sandwish sur la droite

index.html

@@ -39,16 +39,18 @@
             </div>-->
         </div>
         <div class="navigation">
-            <input class="menu-btn" type="checkbox" id="menu-btn" />
+            <div class="nav-phone">
-            <label class="menu-icon" for="menu-btn">
-                <span class="navicon"></span>
-            </label>
                 <div class="logo">
                     <a href="index.html">
                         <img src="assets/img/logo.png" alt="Logo - Charline Pasteur Avocate">
                         <span>Charline Pasteur, Avocate</span>
                     </a>
                 </div>
+            </div>
+            <input class="menu-btn" type="checkbox" id="menu-btn" />
+            <label class="menu-icon" for="menu-btn">
+                <span class="navicon"></span>
+            </label>
             <nav class="nav-wrapper" aria-label="Menu principal">
                 <!-- Grand écran : aucun sous-menu -->
                 <ul class="menu" id="menuXL">
@@ -97,45 +99,31 @@
                 <div class="texte">
                     <h2>Spécialiste droit des enfants</h2>
                     <p>Ayant obtenu mon certificat d'aptitude à la profession d'Avocat au sein de l'École de
-                        Formation
+                        Formation du Barreau à Paris, j'ai débuté mon exercice en tant qu'avocate au sein du Barreau de
-                        du
+                        Nantes en janvier 2018.
-                        Barreau à Paris, j'ai débuté mon exercice en tant qu'avocate au sein du Barreau de
-                        Nantes en
-                        janvier
-                        2018.
                         Conformément au serment que j'ai prêté, j'exerce ma profession avec dignité, humanité,
-                        probité,
+                        probité, conscience et indépendance.
-                        conscience et indépendance.
                     </p>
                     <p>Au quotidien, j'ai à cœur de mettre mes compétences au service de causes individuelles
-                        mais aussi
+                        mais aussi de causes collectives, le droit étant à mes yeux avant tout un outil au service des
-                        de
+                        droits
-                        causes collectives, le droit étant à mes yeux avant tout un outil au service des droits
                         humains.
-                        Parmi
+                        Parmi ces causes, défendre l'intérêt supérieur de l'enfant et porter leur parole m'animent
-                        ces causes, défendre l'intérêt supérieur de l'enfant et porter leur parole m'animent
                         particulièrement.
                     </p>
                     <p>La justice des mineurs étant une justice spécialisée, j'ai souhaité me former davantage à
-                        travers
+                        travers une année de formation en 2022/2023 auprès de l'Université de Bordeaux m'ayant permis
-                        une
+                        d'obtenir le Diplôme Universitaire « Protection de l'Enfance ».
-                        année de formation en 2022/2023 auprès de l'Université de Bordeaux m'ayant permis
-                        d'obtenir le
-                        Diplôme
-                        Universitaire « Protection de l'Enfance ».
                     </p>
                     <p>J'ai également obtenu le certificat de spécialisation « Droit des enfants » en décembre
-                        2024 me
+                        2024 me permettant aujourd'hui d'exercer comme avocate spécialiste.
-                        permettant aujourd'hui d'exercer comme avocate spécialiste.
                     </p>
                     <p>Je pratique ainsi les contentieux de l'assistance éducative, du droit pénal des mineurs,
-                        du droit
+                        du droit de la famille et du droit de l'éducation. J'exerce également dans le domaine du droit
-                        de la
+                        des
-                        famille et du droit de l'éducation. J'exerce également dans le domaine du droit des
                         étrangers.
                     </p>
-                    <p>Je suis membre de l'Association de Défense du droit des mineurs à Nantes et j'anime la
+                    <p>Je suis membre de l'Association de Défense du droit des mineurs à Nantes et j'anime la commission
-                        commission
                         mineure du Syndicat des Avocats de France.
                     </p>
                 </div>
@@ -170,8 +158,6 @@
                 </li>
             </ul>
         </section>
-
-
     </main>
 
     <!-- ===== PIED-DE-PAGE ===== -->

navigation.css

@@ -57,11 +57,19 @@ li a:hover::after {
 
 nav {
   margin-left: auto;
+  display: inline-flex;
+  margin-right: 1rem;
+}
+
+.nav-phone{
+  width: 100%;
+  display: flex;
+  width: 100%;
 }
 
 /* === Menus === */
 #menuXL {
-  display: inline-block;
+  display: flex;
 }
 
 /* === Menus === */
@@ -146,7 +154,7 @@ nav {
   }
 
   #menuXL {
-    transform: translateX(-100%);
+    transform: translateX(100%);
     opacity: 0;
     transition: transform 0.3s ease, opacity 0.3s ease;
     max-height: 0;
@@ -157,7 +165,7 @@ nav {
     position: fixed;
     background-color: #F9E7DB;
     top: 3.5rem;
-    left: 0;
+    right: 0;
     box-shadow: 15px 0px 10px rgba(51, 51, 51, 0.15);
   }