.skip-link { position: absolute; left: -9999px; top: 0; background: var(--couleur-nuit); color: var(--couleur-brume); padding: var(--space-sm) var(--space-md); z-index: 1000; } .skip-link:focus { left: var(--space-sm); top: var(--space-sm); } /* display:contents : #emergency-bar-slot ne contient que le bandeau (44px replié) — sans ça, un parent exactement de la hauteur de son enfant sticky ne laisse aucune marge pour "coller" (le sticky reste borné par la boîte de son parent direct) et le bandeau se contentait de défiler normalement, jamais réellement collé. En le retirant de l'arbre de boîtes (les enfants restent rendus), .emergency-bar devient l'enfant direct de , qui s'étend sur toute la page — marge de gauche pour rester collé jusqu'en bas. */ #emergency-bar-slot { display: contents; } /* En-tête (charte §2 : --couleur-nuit réservée entre autres à l'en-tête). Passage à un fond sombre : tout le texte et les composants enfants (titre, sous-titre, nav, menu déroulant, icône Effacer mes traces) doivent donc être réaffirmés en clair — voir plus bas, ils héritaient jusqu'ici des couleurs pensées pour un fond clair. Sticky à lui seul (charte v12 §7) : le bandeau urgence n'est PLUS dans le même wrapper sticky — il ne doit coller en haut qu'une fois replié (voir .emergency-bar dans components.css), pas en permanence comme avant. */ .site-header { position: sticky; top: 0; z-index: 51; background: var(--couleur-nuit); border-bottom: 1px solid var(--couleur-nuit); padding: var(--space-sm) var(--space-md); } .site-header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; /* Espace vertical minimal quand la ligne passe sous le sous-titre (charte §7) — évite que le menu de navigation semble collé au sous-titre d'intro. */ gap: var(--marge-nav-sous-titre) var(--space-sm); /* Centrage indépendant du contenu (#app) — décision finale charte v12 §7 : le gutter partagé (v10) donnait un rendu disproportionné sur grand écran. Le header, plus large (contient toute la nav), n'a donc plus vocation à démarrer au même bord gauche que le contenu, volontairement plus étroit pour la lisibilité. */ max-width: var(--largeur-header-max); margin: 0 auto; } .site-brand { display: flex; flex-direction: column; gap: 0.15rem; } /* Logo compact "sentier" + titre (charte v8 §6) */ .site-header-brand { display: flex; align-items: center; gap: 12px; } .logo-header { width: 28px; height: 28px; flex-shrink: 0; } .site-title { font-family: var(--font-titre); font-weight: 600; font-size: 20px; color: var(--couleur-brume); } .site-tagline { /* Masqué en permanence sur mobile (media query fixe, pas de logique liée au scroll) pour que l'en-tête collant reste compact sur petit écran — voir @media (min-width: 768px) plus bas pour l'affichage desktop. */ display: none; font-size: 16px; /* charte v19, 2026-07-23 : politique 16px minimum */ color: rgba(241, 240, 235, 0.75); /* brume atténuée — lisible sur fond nuit */ max-width: 32rem; } .site-nav { display: flex; align-items: center; /* Espacement fluide (charte v12 §7) : se resserre jusqu'à ~900px pour que les libellés tiennent sur une ligne sans retour à la ligne cassé, avant bascule en menu compact. */ gap: clamp(0.5rem, 1.8vw, var(--space-md)); /* Taille fixée à 16px (charte v19, 2026-07-23, politique 16px minimum) — remplace le clamp(0.8125rem, 1.4vw, ...) qui descendait jusqu'à 13px pour gagner de la place à l'approche de 900px. Ce texte réduit était le mécanisme qui évitait le retour à la ligne ; sans lui, la zone ~900-1024px (nav + menu + séparateur + bouton Effacer mes traces) est à revérifier — voir vérification post-correctif. */ font-size: 16px; color: var(--couleur-brume); flex-wrap: nowrap; } .site-nav-links { display: flex; align-items: center; gap: inherit; } /* Combinateur d'enfant direct (>) — n'affecte QUE les liens de premier niveau du header (plat >=900px et "Fil d'actualité" desktop), pas les du menu déroulant "Accès direct aux rubriques" imbriqué dedans (.quick-access-item), qui doivent rester sombres sur leur propre panneau blanc flottant. */ .site-nav > a, .site-nav-links > a { padding: var(--space-xs); color: var(--couleur-brume); white-space: nowrap; } .site-nav > a:hover, .site-nav > a:focus-visible, .site-nav-links > a:hover, .site-nav-links > a:focus-visible { text-decoration: underline; } /* Menu compact (<900px, charte v12 §7) : remplace la ligne à plat par un

natif — pas de JS, clavier/lecteur d'écran gratuits via la sémantique

. */ .site-nav-compact { display: none; position: relative; } .site-nav-compact summary { list-style: none; cursor: pointer; padding: var(--space-xs); min-height: var(--tap-target); display: inline-flex; align-items: center; color: var(--couleur-brume); } .site-nav-compact summary::-webkit-details-marker { display: none; } .site-nav-compact summary::after { content: "▾"; margin-left: 0.3rem; font-size: 0.75em; } .site-nav-compact[open] summary::after { content: "▴"; } .site-nav-compact-panel { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 14rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: var(--space-xs); display: flex; flex-direction: column; } .site-nav-compact-panel a { padding: var(--space-sm); min-height: var(--tap-target); display: flex; align-items: center; color: var(--couleur-nuit); border-radius: var(--radius); } .site-nav-compact-panel a:hover, .site-nav-compact-panel a:focus-visible { background: var(--color-bg); outline: none; } @media (max-width: 899px) { .site-nav-links, .site-nav-fil-desktop { display: none; } .site-nav-compact { display: block; } } /* Libellé "Effacer mes traces" visible à côté de l'icône dès que la place le permet (charte v18, 2026-07-23) — même seuil que la bascule nav complète/menu compact ci-dessus, pour n'avoir qu'un seul point de complexité dans le header plutôt que d'en ajouter un second. Le bouton passe de carré (icône seule, .clear-trace-btn ci-dessus) à largeur libre + padding horizontal pour laisser respirer le texte. Sélecteur qualifié .site-nav (comme la réaffirmation de couleur juste au-dessus) : components.css charge APRÈS layout.css dans index.html, donc un sélecteur de même spécificité ici serait silencieusement écrasé par components.css quelle que soit la media query — piège rencontré en vérification. */ @media (min-width: 900px) { .site-nav .clear-trace-label { display: inline; } .site-nav .clear-trace-btn { min-width: 0; padding: 0 var(--space-sm); } } /* Le déclencheur du menu et l'icône "Effacer mes traces" sont pensés pour un fond clair par défaut (utilisés aussi, potentiellement, hors en-tête) — réaffirmés en clair ici puisqu'ils vivent dans l'en-tête sombre. */ .site-nav .quick-access-trigger, .site-nav .clear-trace-btn { color: var(--couleur-brume); } .site-nav .clear-trace-btn:hover, .site-nav .clear-trace-btn:focus-visible { color: var(--couleur-nuit); background: var(--couleur-brume); } /* Contenu principal. Largeur fixe 640px, centrée indépendamment du header (charte v12 §7 — décision finale : revient sur le gutter partagé v10, disproportionné sur grand écran ; le header, plus large, et le contenu, volontairement resserré pour la lisibilité, n'ont plus vocation à partager le même bord gauche). Sur un écran courant (jusqu'à ~1100px), les deux se lisent comme quasi alignés ; sur très grand écran, l'écart est un compromis assumé. */ #app { max-width: var(--largeur-contenu-max); margin: 0 auto; padding: var(--space-md); padding-bottom: var(--space-xl); } #app:focus { outline: none; } /* Pied de page — même traitement que l'en-tête (charte §2 : header et footer sont un seul niveau d'ancrage, --couleur-nuit) : enveloppe pleine largeur (.site-footer) + contenu centré à l'intérieur (.site-footer-inner), pas une boîte centrée isolée. */ .site-footer { background: var(--couleur-nuit); color: var(--couleur-brume); padding: var(--space-md); } .site-footer-inner { max-width: var(--largeur-header-max); margin: 0 auto; } @media (min-width: 768px) { :root { --font-size-base: 1.0625rem; } #app { padding: var(--space-lg); } .site-tagline { display: block; } }