Affiner la mise en page du footer global

themes/2026/assets/css/base.css

@@ -4,6 +4,7 @@ html {
 }
 
 body {
+    --page-gutter: var(--space-4);
     font-family: var(--font-body);
     font-size: var(--font-size-body);
     line-height: 1.7;
@@ -14,21 +15,25 @@ body {
         color-mix(in srgb, var(--color-background-wash) 4%, var(--color-background-deep)) 100%
     );
     color: var(--color-text);
-    padding: var(--space-4);
+    padding: var(--page-gutter);
 }
 
 body > header,
-body > main,
+body > main {
-body > footer {
     width: min(100%, var(--max-width));
     margin-inline: auto;
 }
 
-body > main,
+body > main {
-body > footer {
     margin-bottom: var(--space-6);
 }
 
+body > footer {
+    width: auto;
+    margin-inline: calc(var(--page-gutter) * -1);
+    margin-bottom: calc(var(--page-gutter) * -1);
+}
+
 body > main {
     display: grid;
     grid-template-columns: minmax(0, 1fr);

themes/2026/assets/css/footer.css

@@ -3,11 +3,14 @@ body > footer {
     --color-footer-muted: #95a4b8;
     --color-footer-soft: #8796aa;
     display: grid;
-    gap: var(--space-2);
+    grid-template-columns: minmax(15rem, 16rem) minmax(0, 42rem);
+    justify-content: center;
+    align-items: stretch;
+    gap: var(--space-4) var(--space-5);
     border-top: 0;
     padding: var(--space-3) var(--space-3) var(--space-4);
     background: var(--color-footer-background);
-    text-align: center;
+    text-align: left;
 }
 
 body > footer > * {
@@ -24,39 +27,108 @@ body > footer h2 {
 
 body > footer > nav {
     margin-top: 0;
+    display: grid;
+    align-content: center;
+    line-height: normal;
+}
+
+body > footer > section {
+    display: grid;
+    align-content: center;
+    justify-items: center;
+    gap: var(--space-2);
+    text-align: center;
+}
+
+body > footer > section > img {
+    display: block;
+}
+
+body > footer > section > strong {
+    font-family: var(--font-heading);
+    font-size: 1.2rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    color: var(--color-footer-text);
+}
+
+body > footer > section > p {
+    margin-top: 0;
+    color: var(--color-footer-soft);
+    font-size: 0.8rem;
+    line-height: 1.45;
+}
+
+body > footer > section > p:first-of-type {
+    color: var(--color-footer-text);
+    font-size: 1rem;
+}
+
+body > footer > section > p a {
+    color: var(--color-footer-text);
+    text-decoration: none;
+}
+
+body > footer > section > p a:is(:hover, :focus-visible) {
+    color: var(--color-link-hover);
+    text-decoration: underline;
 }
 
 body > footer > nav > ul {
     list-style: none;
     display: grid;
     grid-template-columns: 1fr;
-    gap: 0.35rem;
+    gap: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding: 0;
 }
 
 body > footer > nav > ul > li {
+    display: grid;
+    grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr);
+    align-items: first baseline;
+    gap: var(--space-1) var(--space-4);
+    padding-block: 0.35rem;
+}
+
+body > footer > nav h2 {
+    grid-column: 1;
     display: flex;
-    flex-wrap: wrap;
+    justify-content: flex-end;
-    align-items: baseline;
+    text-align: right;
-    justify-content: center;
+    line-height: 1.25;
-    gap: 0.15rem 0.65rem;
+}
-    padding-top: 0;
+
+body > footer > nav > ul > li > div {
+    grid-column: 2;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 0;
 }
 
 body > footer > nav h2 a,
 body > footer > nav h2 span {
+    display: inline-block;
     text-decoration: none;
     color: var(--color-footer-muted);
     font-size: 0.78rem;
+    line-height: 1.25;
+    text-align: inherit;
 }
 
 body > footer > nav ul ul {
     list-style: none;
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
+    justify-content: flex-start;
-    row-gap: 0.15rem;
+    row-gap: 0.1rem;
     column-gap: 0;
     margin-top: 0;
+    margin-bottom: 0;
+    padding: 0;
 }
 
 body > footer > nav ul ul a,
@@ -82,80 +154,3 @@ body > footer > nav ul ul > li + li::before {
     margin-inline: 0.45rem;
     color: var(--color-border-strong);
 }
-
-body > footer > section:nth-of-type(1) {
-    margin-top: 0;
-}
-
-body > footer > section:nth-of-type(1) > dl {
-    margin-top: 0.2rem;
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 0;
-}
-
-body > footer > section:nth-of-type(1) > dl > div {
-    margin-top: 0;
-    border-left: 0;
-    padding-left: 0;
-    text-align: center;
-}
-
-body > footer > section:nth-of-type(1) dt {
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    font-size: 0.72rem;
-    color: var(--color-footer-soft);
-}
-
-body > footer > section:nth-of-type(1) dd {
-    margin-top: 0.2rem;
-    color: var(--color-footer-text);
-    font-size: 0.88rem;
-    line-height: 1.3;
-}
-
-body > footer > section:nth-of-type(1) dd > a {
-    color: inherit;
-    text-decoration: none;
-}
-
-body > footer > section:nth-of-type(1) dd > a:is(:hover, :focus-visible) {
-    color: var(--color-link-hover);
-    text-decoration: underline;
-}
-
-body > footer > section:nth-of-type(1) dd > time {
-    display: block;
-    margin-top: 0.2rem;
-    color: var(--color-footer-soft);
-    font-size: 0.72rem;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-}
-
-body > footer > p {
-    margin-top: var(--space-1);
-    border-top: 1px solid var(--color-border);
-    padding-top: var(--space-2);
-    color: var(--color-footer-soft);
-    font-size: 0.8rem;
-}
-
-body > footer > p > span {
-    display: block;
-}
-
-body > footer > p > span + span {
-    margin-top: 0.25rem;
-}
-
-body > footer > p a {
-    color: var(--color-footer-text);
-    text-decoration: none;
-}
-
-body > footer > p a:is(:hover, :focus-visible) {
-    color: var(--color-link-hover);
-    text-decoration: underline;
-}

themes/2026/assets/css/responsive.css

@@ -112,20 +112,13 @@
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 
-    body > footer > section:nth-of-type(1) > dl {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
 }
 
 @media (max-width: 800px) {
     body {
         font-size: var(--font-size-body-mobile);
-        padding: var(--space-3);
+        --page-gutter: var(--space-3);
-    }
+        padding: var(--page-gutter);
-
-    body > main,
-    body > footer {
-        margin-bottom: var(--space-5);
     }
 
     body > header > section.site-stats > ul {
@@ -325,25 +318,10 @@
     }
 
     body > footer {
+        grid-template-columns: 1fr;
         padding-top: var(--space-3);
         padding-inline: var(--space-1);
-        gap: var(--space-2);
+        gap: var(--space-4);
-    }
-
-    body > footer > section:nth-of-type(1) > dl {
-        grid-template-columns: 1fr;
-    }
-
-    body > footer > section:nth-of-type(1) > dl > div {
-        border-left: 0;
-        border-top: 1px solid var(--color-border);
-        padding-left: 0;
-        padding-top: var(--space-1);
-    }
-
-    body > footer > section:nth-of-type(1) > dl > div:first-child {
-        border-top: 0;
-        padding-top: 0;
     }
 
 }
@@ -351,7 +329,8 @@
 @media (max-width: 480px) {
     body {
         font-size: 1.0625rem;
-        padding: var(--space-2);
+        --page-gutter: var(--space-2);
+        padding: var(--page-gutter);
     }
 
     body > header > section:first-of-type > a {
@@ -430,6 +409,25 @@
         max-width: 100%;
     }
 
+    body > footer > nav > ul > li {
+        grid-template-columns: 1fr;
+        align-items: start;
+    }
+
+    body > footer > nav h2,
+    body > footer > nav h2 a,
+    body > footer > nav h2 span {
+        text-align: left;
+    }
+
+    body > footer > nav > ul > li > div {
+        grid-column: 1;
+    }
+
+    body > footer > nav ul ul {
+        flex-wrap: wrap;
+    }
+
     body > main.home-main > section.home-rubrics > div > article > header {
         align-items: flex-start;
         flex-direction: column;

themes/2026/layouts/_partials/footer.html

@@ -1,4 +1,19 @@
+{{- $site := .Site -}}
+{{- $logoPath := $site.Params.logo | default "logo-large.png" -}}
+{{- $logo := resources.GetMatch $logoPath -}}
 <footer>
+  <section aria-label="Informations du site">
+    {{- with $logo -}}
+    <img src="{{ .RelPermalink }}" alt="" width="{{ .Width }}" height="{{ .Height }}">
+    {{- else -}}
+    <strong>{{ $site.Title }}</strong>
+    {{- end -}}
+    <p>{{ $site.Copyright | safeHTML }}</p>
+    <p>
+      Sauf mention contraire, l'intégralité du contenu de ce site est disponible sous licence
+      <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.fr" title="Consulter la licence Creative Commons CC BY-NC-ND 4.0">CC BY-NC-ND</a>.
+    </p>
+  </section>
   <nav aria-label="Navigation principale">
     <ul>
       {{- range site.Menus.main -}}
@@ -10,28 +25,28 @@
           <span>{{ .Name }}</span>
           {{- end -}}
         </h2>
-        {{- if gt (len .Children) 0 -}}
+        {{- $children := .Children -}}
+        {{- if gt (len $children) 0 -}}
+        <div>
+          {{- range $index, $child := $children -}}
+          {{- if eq (mod $index 5) 0 -}}
           <ul>
-          {{- range .Children -}}
+          {{- end -}}
             <li>
-            {{- if .PageRef -}}
+              {{- if $child.PageRef -}}
-            <a href="{{ .PageRef }}" title="{{ .Title }}">{{ .Name }}</a>
+              <a href="{{ $child.PageRef }}" title="{{ $child.Title }}">{{ $child.Name }}</a>
               {{- else -}}
-            <span title="{{ .Title }}">{{ .Name }}</span>
+              <span title="{{ $child.Title }}">{{ $child.Name }}</span>
               {{- end -}}
             </li>
-          {{- end -}}
+          {{- if or (eq (mod (add $index 1) 5) 0) (eq (add $index 1) (len $children)) -}}
           </ul>
           {{- end -}}
+          {{- end -}}
+        </div>
+        {{- end -}}
       </li>
       {{- end -}}
     </ul>
   </nav>
-  <p>
-    <span>{{ .Site.Copyright | safeHTML }}</span>
-    <span>
-      Sauf mention contraire, l'intégralité du contenu de ce site est disponible sous licence
-      <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.fr" title="Consulter la licence Creative Commons CC BY-NC-ND 4.0">CC BY-NC-ND</a>.
-    </span>
-  </p>
 </footer>