static/alpes-maritimes-2022/_custom.scss

@@ -186,37 +186,43 @@ h3, .h3 {
 }
 
 // logo & site title
-#logo.has-logo{
-	flex-grow: 1;
-	a {
-		display: flex;
-		&::before {
-			margin-right: 0;
-			@media ($min-desktop-viewport) {
-				width: 136px;
-				height: 150px;
-			}
-		}
+.header--cd06-link {
+	margin-right: 0;
+	width: nth($header-logo-size, 1);
+	height: nth($header-logo-size, 2);
+	@media ($min-desktop-viewport) {
+		width: 136px;
+		height: 150px;
 	}
 }
-.site-title {
-	font-size: 18rem / $base-font;
-	color: black;
+#logo.has-logo {
+	flex-grow: 1;
 	font-weight: 700;
 	align-self: center;
 	margin: $nav-item-padding;
+	font-size: 18rem / $base-font;
 	@media ($min-desktop-viewport) {
 		font-size: 24rem / $base-font;
 		align-self: end;
 		border-left: 1px solid #000;
 		padding-left: 0.75rem;
 	}
+	a {
+		color: black;
+		&::before {
+			content: none;
+		}
+		&:hover {
+			text-decoration: none;
+		}
+	}
 }
 // Top links
 #toplinks {
 	text-align: left;
+	z-index: 110;
 	@media ($min-desktop-viewport) {
-		transform: translateY(-$top-gray-line-height);
+		margin-top: -$top-gray-line-height;
 	}
 	@media ($max-mobile-viewport) {
 		position: relative;
@@ -262,8 +268,15 @@ h3, .h3 {
 		}
 		display: none;
 	}
-	.toplinks--togglable-btn.toggled + .logged-in {
-		display: block;
+	.toplinks--panel-mask {
+		@include mask(-1);
+		background-color: transparent;
+	}
+	.toplinks--togglable-btn.toggled {
+		+ .logged-in,
+		~ .toplinks--panel-mask {
+			display: block;
+		}
 	}
 }
 // Nav
@@ -521,6 +534,14 @@ div.textcell {
 		}
 	}
 }
+.pk-cell-center-title {
+	.gru-content &.cell > div h2:first-child {
+		border-bottom: none;
+		&::before {
+			content: none;
+		}
+	}
+}
 
 // Custom cell class
 .gray-cell {

templates/variants/alpes-maritimes-2022/combo/page_template.html

@@ -0,0 +1,8 @@
+{% extends "combo/page_template.html" %}
+
+{% block header-title %}
+  <a class="header--cd06-link" href="https://www.departement06.fr/" target="_blank" title="Département des Alpes Maritimes (nouvelle fenêtre)">
+    <img alt="Département des Alpes Maritimes" src="{{site_base}}/assets/header:logo">
+  </a>
+  {{ block.super }}
+{% endblock %}

templates/variants/alpes-maritimes-2022/includes/user-info.html

@@ -2,16 +2,24 @@
 
 {% block user-info %}
   {% if user.is_authenticated %}
-    <div class="toplinks--toggled-wrapper togglable">
+    <div class="toplinks--toggled-wrapper">
       <button aria-label="{% include "includes/user-info-user-name.html" %}" class="toplinks--togglable-btn togglable">
         <svg class="toplinks-icon">
-          <use href="/static/{{css_variant}}/img/toplinks-icon.svg#icon" />
+          <use href="{{site_base}}/static/{{css_variant}}/img/toplinks-icon.svg#icon" />
         </svg>
         <span class="desktop-only">
           {% include "includes/user-info-user-name.html" %}
         </span>
       </button>
       {{ block.super }}
+      <div class="toplinks--panel-mask"></div>
+      <script>
+        const toplinksBtn = document.querySelector('.toplinks--togglable-btn')
+        const toplinksMask = document.querySelector('.toplinks--panel-mask')
+        toplinksMask.addEventListener('click', function(){
+          toplinksBtn.click()
+        });
+      </script>
     </div>
   {% else %}
     {{ block.super }}
@@ -21,7 +29,7 @@
 {% block user-info-login-label %}
   <span aria-label="{{ block.super }}">
     <svg class="toplinks-icon">
-      <use href="static/{{css_variant}}/img/toplinks-icon.svg#icon" />
+      <use href="{{site_base}}/static/{{css_variant}}/img/toplinks-icon.svg#icon" />
     </svg>
     <span class="desktop-only">
       {{ block.super }}