misc: update footer (#23891)

static/grandlyon-cut/_custom.scss

@@ -560,20 +560,6 @@ div#toplinks {
         position: relative;
         top: -1.4em;
     }
-    &::after {
-        content: '';
-        width: 2.8em;
-        height: 2.8em;
-        display: block;
-        background: #fff;
-        position: relative;
-        top: 2.5em;
-        transform: rotate(-45deg);
-        left: calc(50% - 19em);
-        @media screen and (max-width: $mobile-limit) {
-            display: none;
-        }
-    }
     a {
         background-image: url(images/forward.png);
         background-repeat: no-repeat;
@@ -585,48 +571,59 @@ div#toplinks {
     }
 }
 
+div#footer-top, div#footer {
+	width: 95rem;
+	margin: 1rem auto;
+	font-size: 15px;
+}
+
+div#footer-top {
+	img {
+		height: 55px;
+		margin: 0 1em;
+	}
+	> div {
+		width: 49.5%;
+		display: inline-block;
+		vertical-align: top;
+	}
+	div.feder {
+		font-size: 13px;
+	}
+	@media screen and (max-width: $mobile-limit) {
+		display: none;
+	}
+}
+
 div#footer-wrapper {
-    background: url(images/footer-background.jpg) no-repeat;
-    background-size: cover;
-    @media screen and (max-width: $mobile-limit) {
-        display: none;
-    }
+	background-color: #000;
+	color: #FFFFFF;
 }
 
 div#footer {
-    margin: 3rem auto;
-    font-size: 14px;
-    text-align: center;
-    width: 60em;
-    h3 {
-        display: inline-block;
-        padding: 5px 10px;
-        margin: 6.5em 0 1em 1em;
-        font-size: 1.4rem;
-    }
-    @each $i in (simple, unique, securise) {
-        .#{$i} {
-                background: url(images/#{$i}.png) no-repeat;
-                background-size: 40%;
-                background-position: top center;
-        }
-    }
+	a {
+		color: #FFFFFF;
+	}
+	> div {
+		 width: 49.5%;
+		 display: inline-block;
+		 vertical-align: top;
+		 @media screen and (max-width: $mobile-limit) {
+			 width: 100%;
+			 display: block;
+		 }
+	}
+	a.metro {
+		display: inline-block;
+		padding-top: 2px;
+		padding-left: 34px;
+		background: url(images/footer-metropole-plus.png) no-repeat center left;
+		min-height: 22px;
+		float: right;
+	}
 }
 
-div#footnote {
-    font-size: 14px;
-    text-align: center;
-    max-width: $width;
-    margin: 10px auto;
-    text-align: center;
-    color: $link-color;
-    a {
-        text-decoration: underline;
-    }
-    p {
-        margin: 0;
-    }
-}
+
 
 #cut-nav {
     float: left;

templates/theme.html

@@ -128,49 +128,38 @@
     </div> <!-- #main-content -->
     </div> <!-- #main-content-wrapper -->
 
-   <footer>
-    {% block footer-top %}{% endblock %}
+  <footer>
+    <div id="footer-top">
+     {% block footer-top %}
+       <div class="cell textcell grid-1-2">
+         <div>
+           <p>
+             {{ global_title }} est un service de la Métropole de Lyon et ses partenaires pour simplifier l’accès à leurs services en ligne avec un seul et même compte.
+           </p>
+         </div>
+       </div>
+       <div class="cell textcell">
+         <div>
+           <img src="{{site_base}}{% static "grandlyon-cut/images/logo-europe-engage.png" %}" title="L'Europe s'engage en région Auvergne-Rhône-Alpes avec le FEDER" alt="L'Europe s'engage en région Auvergne-Rhône-Alpes avec le FEDER" />
+           <img src="{{site_base}}{% static "grandlyon-cut/images/eu-logo.png" %}" title="Union Européenne" alt="Union Européenne" />
+           <img src="{{site_base}}{% static "grandlyon-cut/images/logo-gl.png" %}" title="Grand Lyon" alt="Grand Lyon" />
+         </div>
+         <div class="feder">Cette action est cofinancée par l'Union européenne dans le cadre du Fonds Européen de Développement Régional (FEDER).</div>
+       </div>
+       {% endblock %}
+    </div>
     <div id="footer-wrapper">
     <div id="footer">
       {% block footer %}
-      <div class="textcell grid-1-3 securise desktop-only">
-        <div>
-          <h3>Sécurisé</h3>
-          <p>Effectuez vos démarches en toute <strong>sécurité</strong></p>
-        </div>
-      </div>
-
-      <div class="textcell grid-1-3 unique desktop-only">
-        <div><h3>Unique</h3>
-          <p>Accédez à vos services en ligne avec <strong>un seul compte</strong></p>
-        </div>
-      </div>
-
-      <div class="textcell grid-1-3 simple desktop-only">
-        <div>
-          <h3>Simple</h3>
-          <p><strong>Facilitez</strong> vos démarches<br /> en ligne</p>
-        </div>
-      </div>
-
-      <div class="cell textcell clear desktop-only"><div><p>&nbsp;</p><p>&nbsp;</p></div></div>
-      <div class="cell textcell desktop-only " >
-        <div><p><strong>Un seul compte pour accéder à vos services numériques<br>
-              situés sur le territoire de la Métropole de Lyon</strong>
-          </p>
-        </div>
-      </div>
+      <div class="cell textcell"><div>
+          <p><a href="/cgu/">MENTIONS LEGALES</a> | <a href="{{ help_url }}">EN SAVOIR +</a></p>
+      </div></div>
+      <div class="cell textcell"><div>
+          <p><a class="metro" href="http://www.grandlyon.com/" target="_blank" title="Accéder au site de la Métropole de Lyon (nouvelle fenêtre)">un site de la Métropole de Lyon</a></p>
+      </div></div>
       {% endblock %}
     </div>
     </div>
-    {% block footer-bottom %}
-    <div id="footnote">
-      <p>Le {{ account_label }} de territoire est un service de la Métropole de Lyon et ses partenaires <br />
-        pour simplifier l’accès à leurs services en ligne avec un seul et même {{ account_label }}.
-        <a href="{{ partners_url }}" target="_blank">En savoir+</a></p>
-      <p><a href="{{ cut_base_url }}/cgu/" target="_blank">Mentions légales</a></p>
-    </div>
-    {% endblock %}
    </footer>
    </div> <!-- #page -->
    {% if environment_label %}<span id="environment-label">{{ environment_label }}</span>{% endif %}