Amélioration des boutons tablette

themes/default/assets/css/header.css

@@ -91,56 +91,65 @@ main>header {
 
     .tablet-links {
         display: flex;
+        flex-wrap: wrap;
         gap: .5rem;
 
-        >a,
-        summary {
-            width: 32px;
-            height: 32px;
-            min-width: 32px;
-            min-height: 32px;
-
-            display: flex;
+        .tablet-link {
+            display: inline-flex;
             align-items: center;
-            justify-content: center;
-
-            border-radius: 50%;
+            gap: 0.4rem;
+            padding: 0.4rem 0.8rem;
+            border-radius: 999px;
             background: var(--surface-elevated);
             color: var(--text-light);
-
-            font-size: 1rem;
             text-decoration: none;
-            border: none;
-            outline: none;
-
-            transition: background 0.2s ease, color 0.2s ease;
+            border: 1px solid transparent;
+            font-size: 0.85rem;
+            line-height: 1;
+            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
         }
 
-        >a:hover,
-        summary:hover {
+        .tablet-link:hover,
+        .tablet-link:focus-visible {
             background-color: var(--surface-elevated-hover);
             color: var(--text-white);
         }
 
-        summary {
-            list-style: none;
-            cursor: pointer;
-            padding: 0;
-            margin: 0;
+        .tablet-link:focus-visible {
+            outline: 2px solid var(--accent-blue);
+            outline-offset: 3px;
+            border-color: transparent;
         }
 
-        details[open] summary {
+        .tablet-link:focus:not(:focus-visible) {
+            outline: none;
+        }
+
+        .tablet-link-icon {
+            font-size: 1rem;
+            line-height: 1;
+        }
+
+        .tablet-menu {
+            position: relative;
+            display: inline-flex;
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+        .tablet-menu[open] .tablet-link {
             background-color: var(--border-dark);
             color: var(--text-white);
         }
 
-        /* Empêche l'effet de flèche par défaut dans WebKit */
-        summary::-webkit-details-marker {
-            display: none;
+        .tablet-menu summary {
+            list-style: none;
+            cursor: pointer;
         }
 
-        summary::marker {
-            content: "";
+        .tablet-menu summary::-webkit-details-marker,
+        .tablet-menu summary::marker {
+            display: none;
         }
     }
 

themes/default/layouts/partials/header.html

@@ -24,19 +24,28 @@
 <div class="tablet-header">
     {{ $logo := resources.GetMatch "logo-large.png" }}
     {{ with $logo.Resize "x32" }}
-    <img src="{{ .RelPermalink }}" alt="Logo réduit" class="tablet-logo" />
+    <img src="{{ .RelPermalink }}" alt="Logo du site" class="tablet-logo" />
     {{ end }}
     <span class="tablet-title">{{ .Title }}</span>
-    <div class="tablet-links">
-        <a href="/" title="Retour à la page d'accueil du site">⌂</a>
+    <div class="tablet-links" role="navigation" aria-label="Navigation rapide">
+        <a class="tablet-link" href="/" title="Retour à la page d'accueil du site">
+            <span class="tablet-link-icon" aria-hidden="true">⌂</span>
+            <span class="tablet-link-label">Accueil</span>
+        </a>
         {{ if and (.Parent) (ne .Parent.RelPermalink "/") }}
-        <a href="{{ .Parent.RelPermalink }}" title="Retour à la section parente">↰</a>
+        <a class="tablet-link" href="{{ .Parent.RelPermalink }}" title="Retour à la section {{ .Parent.LinkTitle }}">
+            <span class="tablet-link-icon" aria-hidden="true">↰</span>
+            <span class="tablet-link-label">{{ or .Parent.LinkTitle "Section" }}</span>
+        </a>
         {{ end }}
 
         {{ with .TableOfContents }}
         {{ if gt (len (plainify .)) 0 }}
-        <details id="toc" title="Table des matières">
-            <summary>☰</summary>
+        <details id="toc" class="tablet-menu" title="Table des matières">
+            <summary class="tablet-link">
+                <span class="tablet-link-icon" aria-hidden="true">☰</span>
+                <span class="tablet-link-label">Sommaire</span>
+            </summary>
             {{ . | safeHTML }}
         </details>
         {{ end }}