CSS : simplification media et css

index.html

@@ -38,14 +38,16 @@
                 Email : c.pasteuravocate@gmail.com
             </div>
         </div>
-        <a href="index.html" class="logo">
+        <div class="logo">
+            <a href="index.html">
                 <img src="assets/img/logo.png" alt="Logo - Charline Pasteur Avocate">
-            Charline Pasteur, Avocate
+                <span>Charline Pasteur, Avocate</span>
             </a>
             <input class="menu-btn" type="checkbox" id="menu-btn" />
             <label class="menu-icon" for="menu-btn">
                 <span class="navicon"></span>
             </label>
+        </div>
         <nav class="nav-wrapper" aria-label="Menu principal">
             <ul class="menu" id="menuXL">
                 <li><a href="index.html">Accueil</a></li>
@@ -64,7 +66,7 @@
                 <li><a href="droit_etrangers.html">Droit des étrangers</a></li>
                 <li class="dropdown">
                     <input type="checkbox" id="toggle-more-L" class="toggle-submenu">
-                    <label for="toggle-more-L">Autre ▼</label>
+                    <label for="toggle-more-L">Autre ⏷</label>
                     <ul class="submenu">
                         <li><a href="honoraires.html">Honoraires</a></li>
                         <li><a href="contact.html">Contact</a></li>
@@ -78,7 +80,7 @@
                 <li><a href="droit_education.html">Droit de l'éducation</a></li>
                 <li class="dropdown">
                     <input type="checkbox" id="toggle-more-M" class="toggle-submenu">
-                    <label for="toggle-more-M">Autre ▼</label>
+                    <label for="toggle-more-M">Autre ⏷</label>
                     <ul class="submenu">
                         <li><a href="droit_etrangers.html">Droit des étrangers</a></li>
                         <li><a href="honoraires.html">Honoraires</a></li>
@@ -92,7 +94,7 @@
                 <li><a href="droit_penal_mineur.html">Droit pénal des mineurs</a></li>
                 <li class="dropdown">
                     <input type="checkbox" id="toggle-more-S" class="toggle-submenu">
-                    <label for="toggle-more-S">Autre ▼</label>
+                    <label for="toggle-more-S">Autre ⏷</label>
                     <ul class="submenu">
                         <li><a href="droit_education.html">Droit de l'éducation</a></li>
                         <li><a href="droit_etrangers.html">Droit des étrangers</a></li>

navigation.css

@@ -15,37 +15,14 @@
   z-index: 100;
   font-size: 11px;
 }
-
 .header {
     background-color: #F9E7DB;
     position: fixed;
     width: 100%;
     z-index: 3;
     align-items: center;
-    display: block;
+    display : flex;
 }
-
-.header ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.header li {
-    display: block;
-    padding: 0.5rem;
-    border-right: 1px solid #F9E7DB;
-    text-decoration: none;
-    
-}
-
-.header li a {
-  position: relative;
-  text-decoration: none;
-  color: inherit;
-  padding-bottom: 4px; /* pour éviter que la ligne touche le texte */
-}
-
 .header li a::after {
   content: "";
   position: absolute;
@@ -56,73 +33,58 @@
   background-color: #CC4331;
   transition: width 0.3s ease;
 }
-
+li a:hover::after {
-.header li a:hover::after {
   width: 100%;
 }
-
+li a:hover,
-.header li a:hover,
+.menu-btn:hover {
-.header .menu-btn:hover {
     background-color: #F9E7DB;
 }
-
+.logo {
-.header .logo {
+    width:100%
-    max-width: 380px;
-    text-overflow: ellipsis;
-    vertical-align: middle;
-    white-space: nowrap;
 }
-
+.logo img {
-.header .logo img {
     display: inline-block;
     max-height: 40px;
     padding: 8px 4px 8px 12px;
     vertical-align: middle;
 }
-
+nav {
-.header nav {
     margin-left: auto;
 }
-
+/* menu caché par défaut, on affiche ensuite en fonction de la taille du média*/
-/* menu caché par défaut*/
+.menu {
-nav .menu {
   list-style: none;
   padding: 0;
   margin: 0;
   display: none;
   gap: 1rem;
+  align-items: center;
 }
-
+.menu li {
-nav .menu li {
   position: relative;
   white-space: nowrap;
 }
-
-/* Sous-menu caché par défaut */
-
-/* Cacher le sous-menu par défaut */
 .dropdown {
   position: relative;
 }
-
 .dropdown .submenu {
-  position: absolute;
+  position: fixed;
-  top: 100%; /* place le sous-menu juste sous le bouton "Autre" */
+  right: 0;
-  left: 0;   /* aligne à gauche du bouton "Autre" */
-  transform: translateX(-100%); /* décale le menu vers la gauche du bouton */
-  background-color: white;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
   z-index: 10;
   display: none;
-  padding: 0;
+  padding-right: 1rem;
-  list-style: none;
+  background-color: #F9E7DB;
+}
+/* Cacher la case à cocher */
+.toggle-submenu {
+  display: none;
 }
-
 /* Afficher le sous-menu si l’input est coché */
 .toggle-submenu:checked + label + .submenu {
-  display: block;
+  display: flex;
+  flex-direction: column;
 }
-
 /* Style du label 'Autre' */
 .dropdown label {
   cursor: pointer;
@@ -131,92 +93,63 @@ nav .menu li {
   color: #333;
   background-color: transparent;
 }
-
-/* Style des items du sous-menu */
-.submenu li a {
-  display: block;
-  padding: 0.5rem;
-  text-decoration: none;
-  color: #333;
-}
-
-.submenu li a:hover {
-  background-color: #f2f2f2;
-}
-
 /* Grand écran : menu complet */
 @media (min-width: 1500px) {
   #menuXL {
     display: flex;
   }
 }
-
 /* Moyen écran */
 @media (max-width: 1499px) and (min-width: 1300px) {
   #menuL {
     display: flex;
   }
 }
-
 /* Petit écran */
 @media (max-width: 1299px) and (min-width: 1099px) {
   #menuM {
     display: flex;
   }
 }
-
 /* Mobile (burger menu géré ailleurs) */
-@media (max-width: 1100px) and (min-width: 700px){
+@media (max-width: 1100px) and (min-width: 750px){
+  .menu {
+    clear: none;
+    float: right;
+    max-height: none;    
+  }
   #menuS {
     display: flex;
   }  
 }
 
-/* Cacher la case à cocher */
+@media (max-width: 749px) {
-.toggle-submenu {
+  .header {
-  display: none;
+    display:flex
-}
+  }  
-
+  .menu {
-
-/* Afficher le sous-menu si activé */
-.toggle-submenu:checked + label + .submenu {
-  display: block;
-}
-
-/* Styles généraux */
-.dropdown {
-  position: relative;
-}
-
-.dropdown label {
-  cursor: pointer;
-  display: block;
-  padding: 0.5rem;
-}
-
-/* Pour que le sous-menu ne s'affiche que sous 'Autre' */
-.dropdown .submenu li {
-  padding: 0.5rem;
-}
-
-/* menu */
-.header .menu {
     clear: both;
     max-height: 0;
     transition: max-height .2s ease-out;
+  }
+  .menu-icon {
+    display: inline-block !important;
+  }
 }
 
-/* menu icon */
+
-.header .menu-icon {
+/* ---------------------------
+/* Menu accordéon
+/* --------------------------*/
+.menu-icon {
     cursor: pointer;
-    display: inline-block;
+    display: none;
     float: right;
     padding: 28px 20px;
     position: relative;
     user-select: none;
 }
-
+.menu-icon .navicon {
-.header .menu-icon .navicon {
     background: #333;
     display: block;
     height: 2px;
@@ -224,9 +157,8 @@ nav .menu li {
     transition: background .2s ease-out;
     width: 18px;
 }
-
+.menu-icon .navicon:before,
-.header .menu-icon .navicon:before,
+.menu-icon .navicon:after {
-.header .menu-icon .navicon:after {
     background: #333;
     content: '';
     display: block;
@@ -235,62 +167,34 @@ nav .menu li {
     transition: all .2s ease-out;
     width: 100%;
 }
-
+.menu-icon .navicon:before {
-.header .menu-icon .navicon:before {
     top: 5px;
 }
-
+.menu-icon .navicon:after {
-.header .menu-icon .navicon:after {
     top: -5px;
 }
-
+.menu-btn {
-/* menu btn */
-.header .menu-btn {
     display: none;
 }
 
-.header .menu-btn:checked~nav .menu {
+.menu-btn:checked~nav .menu {
     max-height: 240px;
 }
 
-.header .menu-btn:checked~.menu-icon .navicon {
+.menu-btn:checked~.menu-icon .navicon {
     background: transparent;
 }
 
-.header .menu-btn:checked~.menu-icon .navicon:before {
+.menu-btn:checked~.menu-icon .navicon:before {
     transform: rotate(-45deg);
 }
 
-.header .menu-btn:checked~.menu-icon .navicon:after {
+.menu-btn:checked~.menu-icon .navicon:after {
     transform: rotate(45deg);
 }
 
-.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
+.menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
-.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
+.menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
     top: 0;
 }
 
-/* Styles pour les écrans plus grand (hors téléphones) */
-@media (min-width: 48em) {
-
-  .header {
-   display: flex;
-  }
-    .header li {
-        float: left;
-    }
-
-    .header li a {
-        padding: 0.5rem;
-    }
-
-    .header .menu {
-        clear: none;
-        float: right;
-        max-height: none;
-    }
-
-    .header .menu-icon {
-        display: none;
-    }
-}

style.css

@@ -7,42 +7,40 @@ body {
   background-color: #F9E7DB;
   color: #333;
 }
-
 main {
   padding: 0 1rem;
   margin: 0 auto;
 }
-
 section {
   margin-bottom: 2rem;
 }
-
+li {
+  display: block;
+  padding: 0.5rem;
+  text-decoration: none;
+  float: left;
+}
 a {
     color: #333;
     text-decoration: none;
 }
-
 h1 {
   color: #bf9000;
   vertical-align: baseline;
   font-size: 2rem;
   text-align: center;
 }
-
 h2 {
   color: #CC4331;
   line-height: 1.2;
   text-align: center;
 }
-
 p {
   text-indent: 10px;
 }
-
 p span {
   font-weight: bold;
 }
-
 footer {
   background-color: #CC4331;
   padding: 0.7rem 1rem;