diff --git a/content/mentions_legales.html b/content/mentions_legales.html
index 65795cc..e8a1877 100644
--- a/content/mentions_legales.html
+++ b/content/mentions_legales.html
@@ -1 +1,6 @@
-<INCLURE{fond=inclure/mentions_legales}>
+<section class="container section-top section-bottom">
+	<div class="cadre-blanc">
+		<INCLURE{fond=inclure/mentions_legales}>
+	</div>
+</section>
+
diff --git a/css/_sq_balint.scss b/css/_sq_balint.scss
index e24cc0f..1d91236 100644
--- a/css/_sq_balint.scss
+++ b/css/_sq_balint.scss
@@ -132,12 +132,17 @@ body{
 	padding: 1rem 2rem;
 	background-color: $fond-menu;
 	transition: all 1s;
-	.nav-link{
+	.nav-item:not(.active):hover{
+		background: rgba(255,255,255,0.2);
+	}
+	.nav-link, .dropdown-item{
 		color: $light;
 		font-weight: 500;
 		font-family: 'Cabin', sans-serif;
 		font-size: 1.2rem;
-		transition: all 1s ease;
+		text-align: center;
+		padding: 0.3rem 0;
+		transition: height 1s ease;
 	}
 	.navbar-brand{
 		width: 200px;
@@ -146,7 +151,7 @@ body{
 			transition: all 1s ease;
 		}
 	} 
-	.active a{
+	.active a.nav-link{
 		color: $page-active;
 	}
 	.navbar-toggler {
@@ -157,20 +162,64 @@ body{
 		color: $light;
 	}
 	&.reduit{
-		padding: 0.2rem 2rem;
-		.nav-link{
-			padding: 0.2rem 0.5rem;
-		}
 		.navbar-brand{
 			width: 150px;
 		}	
 	}
+	.dropdown-menu{
+		background: $fond-menu;
+		border-radius: 0 0 0.2rem 0.2rem;
+		border: none;
+		border-top: solid 1px $light;
+	}
+	.dropdown-item:focus, .dropdown-item:hover{
+		background: rgba(255,255,255,0.2);
+		color: white;
+	}
+	@include media-breakpoint-up(xl){
+		padding: 0 2rem;
+		height: 5rem;
+		.container{
+			height: 100%;
+		}
+		&.reduit{
+			height: 3rem;
+			padding: 0 2rem;
+			.nav-link{
+				padding: 0.2rem 0.5rem;
+			}
+		}
+		.nav-link{
+			padding: 0.5rem;
+			height: 100%;
+			display: flex;
+			align-items: center;
+		}
+		.dropdown-menu{
+			margin-top: 0;
+		}
+	}
 }
 
-#liste-deroulante ul{
-	list-style-type: none;
+#liste-deroulante{
+	ul{
+		list-style-type: none;
+	}
+	@include media-breakpoint-up(xl){
+		height: 100%;
+		ul{
+			height: 100%;
+			align-items: center;
+			li{
+				height: 100%;
+				display: flex;
+				align-items: center;
+			}
+		}
+	}
 }
 
+
 /**********************************************************************/
 /**************************** PAGE ACCUEIL ****************************/
 /**********************************************************************/
@@ -508,21 +557,11 @@ body{
 		height: auto;
 	}
 
-	.lien_cc svg {
-		width: 30px;
-		height: 30px;
-		vertical-align: middle;
+	.generator img:hover{
+		opacity:0.6;
 	}
-	.nav { padding-left: 0; }
-	.nav li { display: block;  }
-	.nav li:not(.generator) a { display: block; }
-
-	@include media-breakpoint-up(sm) {
-		.nav li { display: inline-block !important; }
-		.nav li:not(.generator) a { display: inline; }
-		.nav li.separ { border: none; }
-		//.nav li.separ:not(:first-of-type)::before { content: " | "; }
-		.generator { /*position: absolute; top: 1rem; right: 0; max-width: 200px;*/ float: right; }
+	.pages-footer li:hover a{
+		color: $dark;
 	}
 }
 
@@ -535,7 +574,6 @@ body{
 	a, .grille a{
 		color: black;
 	}
-
 }
 
 /**********************************************************************/
@@ -685,20 +723,16 @@ body{
 		margin-left: 0;
 		padding: 0.5rem;
 	}
-	.btn_login{
-		background-color: $couleur-liens;
-		color: #333;
-		&:hover{
-			color: black;
-			background-color: rgb(255, 153, 0);
-		}
-	} 
 }
 
 .btn.bouton-login{
 	background: $couleur-liens;
 	border-radius: 0.2rem;
 	color: #333 !important;
+	&:hover{
+		color: black;
+		background-color: $page-active;
+	}
 }
 
 
diff --git a/css/mon_site.css b/css/mon_site.css
index c2ddbd4..2e4b659 100644
--- a/css/mon_site.css
+++ b/css/mon_site.css
@@ -12010,13 +12010,19 @@ body {
   transition: all 1s;
 }
 
-#menu-principal .nav-link {
+#menu-principal .nav-item:not(.active):hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+#menu-principal .nav-link, #menu-principal .dropdown-item {
   color: #f8f9fa;
   font-weight: 500;
   font-family: 'Cabin', sans-serif;
   font-size: 1.2rem;
-  -webkit-transition: all 1s ease;
-  transition: all 1s ease;
+  text-align: center;
+  padding: 0.3rem 0;
+  -webkit-transition: height 1s ease;
+  transition: height 1s ease;
 }
 
 #menu-principal .navbar-brand {
@@ -12030,7 +12036,7 @@ body {
   transition: all 1s ease;
 }
 
-#menu-principal .active a {
+#menu-principal .active a.nav-link {
   color: #ffb284;
 }
 
@@ -12043,22 +12049,72 @@ body {
   color: #f8f9fa;
 }
 
-#menu-principal.reduit {
-  padding: 0.2rem 2rem;
-}
-
-#menu-principal.reduit .nav-link {
-  padding: 0.2rem 0.5rem;
-}
-
 #menu-principal.reduit .navbar-brand {
   width: 150px;
 }
 
+#menu-principal .dropdown-menu {
+  background: #087f52;
+  border-radius: 0 0 0.2rem 0.2rem;
+  border: none;
+  border-top: solid 1px #f8f9fa;
+}
+
+#menu-principal .dropdown-item:focus, #menu-principal .dropdown-item:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+}
+
+@media (min-width: 1200px) {
+  #menu-principal {
+    padding: 0 2rem;
+    height: 5rem;
+  }
+  #menu-principal .container {
+    height: 100%;
+  }
+  #menu-principal.reduit {
+    height: 3rem;
+    padding: 0 2rem;
+  }
+  #menu-principal.reduit .nav-link {
+    padding: 0.2rem 0.5rem;
+  }
+  #menu-principal .nav-link {
+    padding: 0.5rem;
+    height: 100%;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-align: center;
+            align-items: center;
+  }
+  #menu-principal .dropdown-menu {
+    margin-top: 0;
+  }
+}
+
 #liste-deroulante ul {
   list-style-type: none;
 }
 
+@media (min-width: 1200px) {
+  #liste-deroulante {
+    height: 100%;
+  }
+  #liste-deroulante ul {
+    height: 100%;
+    -webkit-box-align: center;
+            align-items: center;
+  }
+  #liste-deroulante ul li {
+    height: 100%;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-align: center;
+            align-items: center;
+  }
+}
+
 /**********************************************************************/
 /**************************** PAGE ACCUEIL ****************************/
 /**********************************************************************/
@@ -12443,38 +12499,12 @@ body {
   height: auto;
 }
 
-.footer .lien_cc svg {
-  width: 30px;
-  height: 30px;
-  vertical-align: middle;
+.footer .generator img:hover {
+  opacity: 0.6;
 }
 
-.footer .nav {
-  padding-left: 0;
-}
-
-.footer .nav li {
-  display: block;
-}
-
-.footer .nav li:not(.generator) a {
-  display: block;
-}
-
-@media (min-width: 576px) {
-  .footer .nav li {
-    display: inline-block !important;
-  }
-  .footer .nav li:not(.generator) a {
-    display: inline;
-  }
-  .footer .nav li.separ {
-    border: none;
-  }
-  .footer .generator {
-    /*position: absolute; top: 1rem; right: 0; max-width: 200px;*/
-    float: right;
-  }
+.footer .pages-footer li:hover a {
+  color: #595959;
 }
 
 .page_sommaire .footer-options, .page_sommaire #footer-infos {
@@ -12653,22 +12683,17 @@ body {
   padding: 0.5rem;
 }
 
-.formulaire_spip .boutons .btn_login, .boutons .btn_login {
-  background-color: #dd7f51;
-  color: #333;
-}
-
-.formulaire_spip .boutons .btn_login:hover, .boutons .btn_login:hover {
-  color: black;
-  background-color: #ff9900;
-}
-
 .btn.bouton-login {
   background: #dd7f51;
   border-radius: 0.2rem;
   color: #333 !important;
 }
 
+.btn.bouton-login:hover {
+  color: black;
+  background-color: #ffb284;
+}
+
 .formulaire_spip fieldset legend {
   background: none;
 }
diff --git a/footer/dist.html b/footer/dist.html
index 0554681..8a9ea7a 100644
--- a/footer/dist.html
+++ b/footer/dist.html
@@ -22,7 +22,7 @@
 <div class="footer-options">
 	<div class="container bordure-top">
 		<div class="grille">
-			<ul class="nav">
+			<ul class="nav pages-footer">
 				<li class="separ">
 					<a rel="contents" href="#URL_PAGE{plan}">
 						<i class="fas fa-map"></i> <:plan_site:>
@@ -45,7 +45,7 @@
 			<ul class="nav boutons-footer">
 				<li class="separ">
 					<a class="btn bouton-footer" href="[(#URL_PAGE{modifier_auteur}|parametre_url{retour,#SELF})]" title="Gérer mon compte">
-						<i class="fas fa-cog" aria-hidden="true"></i> #SESSION{nom}
+						<i class="fas fa-user" aria-hidden="true"></i> #SESSION{nom}
 					</a>
 				</li>
 				<li class="separ">
@@ -66,7 +66,7 @@
 				</li>
 				<li class="separ">
 					<a class="btn bouton-footer" href="[(#URL_PAGE{gerer_auteurs})]" title="Gérer les membres">
-						<i class="fas fa-user"></i> Gérer les membres
+						<i class="fas fa-users"></i> Gérer les membres
 					</a>
 				</li>
 			<?php
diff --git a/inclure/menu_principal.html b/inclure/menu_principal.html
index f303bbe..98847ab 100644
--- a/inclure/menu_principal.html
+++ b/inclure/menu_principal.html
@@ -18,11 +18,21 @@
 				<li class="nav-item [(#SI_PAGE{seminaires}|oui) active]">
 					<a class="nav-link" href="[(#URL_PAGE{seminaires})]">Les séminaires</a>
 				</li>
-				<li class="nav-item [(#SI_PAGE{groupes}|oui) active]">
-					<a class="nav-link" href="[(#URL_PAGE{groupes})]">Les groupes</a>
+				<li class="nav-item dropdown [(#SI_PAGE{groupes}|oui) active]">
+					<a class="nav-link dropdown-toggle" href="[(#URL_PAGE{groupes})]" id="groupesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Les groupes</a>
+					<div class="dropdown-menu" aria-labelledby="groupesDropdown">
+					<BOUCLE_menu_groupes(RUBRIQUES){id_parent = #CONFIG{balint/id_rub_groupes}}{tout}>
+						<a class="dropdown-item" href="[(#URL_PAGE{groupes}|parametre_url{id_rubrique,#ID_RUBRIQUE})]">#TITRE</a>
+					</BOUCLE_menu_groupes>
+					</div>
 				</li>
-				<li class="nav-item [(#SI_PAGE{mediatheque}|oui) active]">
-					<a class="nav-link" href="[(#URL_PAGE{mediatheque})]">Médiathèque</a>
+				<li class="nav-item dropdown [(#SI_PAGE{mediatheque}|oui) active]">
+					<a class="nav-link dropdown-toggle" href="[(#URL_PAGE{mediatheque})]" id="mediasDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Médiathèque</a>
+					<div class="dropdown-menu" aria-labelledby="mediasDropdown">
+					<BOUCLE_menu_medias(MOTS){id_groupe = #CONFIG{balint/id_mots_medias}}{par id_mot}{tout}>
+						<a class="dropdown-item" href="[(#URL_PAGE{mediatheque}|parametre_url{id_mot,#ID_MOT})]">#TITRE</a>
+					</BOUCLE_menu_medias>
+					</div>
 				</li>
 				<?php
 					if (isset($GLOBALS['visiteur_session']['id_auteur']) AND $GLOBALS['visiteur_session']['id_auteur']) {