/* Bandeau de titre, menu et pied de page du site, communs à toutes les pages — y compris l'administration, qui ne peut pas charger style.css (dont les règles de body sont faites pour la carte plein écran). D'où cette feuille à part : ces éléments sont les mêmes partout, ils n'ont donc à être décrits qu'une fois. Même forme sur ordinateur et sur smartphone : bouton « ☰ » en tête de bandeau, titre à sa suite, et un tiroir pleine hauteur qui glisse depuis le bord gauche par-dessus le contenu. Le bandeau fermé ne coûte qu'une ligne et l'ouverture du tiroir ne décale rien — condition pour ne pas rogner le peu de hauteur disponible sur téléphone. Le bandeau est collant : sur smartphone, où la page défile, le menu reste atteignable sans remonter en haut. */ /* Échelle de l'interface. Tailles de texte, espacements et largeurs de champs sont exprimés en rem : cette seule règle commande donc la taille de tout ce qui s'affiche. La racine reste à 100 % — 1 rem vaut la taille réglée dans le navigateur (crit. 10.4), comme dans le DSFR, dont l'échelle de corps est reprise telle quelle (xs 12, sm 14, md 16 pour une racine de 16px). L'ancien ajustement grand écran (racine à 110 % sur ordinateur) est replié dans les corps eux-mêmes : l'application emploie le cran md là où elle employait sm, les libellés sm là où ils employaient xs — mêmes tailles rendues, sans détimbrer le rem. La règle est posée ici, et non dans style.css, parce que le bandeau la suppose partout où il est servi. --echelle est le grossissement choisi par le visiteur (curseur de la page Accessibilité) : un facteur posé sur par theme-init.js, qui multiplie la racine. Absent, il vaut 1. */ html { font-size: calc(100% * var(--echelle, 1)); } /* Le bandeau est le même sur toutes les pages : bouton, nom du site, accroche. Il domine le tiroir (z-index 30), de sorte que le bouton reste visible et cliquable menu ouvert, et reste collant : sur les pages défilables comme sur la carte en affichage téléphone, il ne s'échappe pas vers le haut. Le nom du site porte le h1 sur la carte, page qu'il nomme ; ailleurs c'est un lien de retour, le h1 revenant au titre de la page. */ /* L'ombre portée, et non un filet : c'est ainsi que l'en-tête DSFR (fr-header) se détache du contenu — même valeur que son --raised-shadow. */ /* L'interligne de 1.5 (le couple 16px / 24px du DSFR) est posé sur chacun des composants communs — bandeau, tiroir, pied, boîte de signalement — et non hérité : le body de la carte le laisse à « normal » quand celui des pages de contenu vaut 1.5, et ces composants, identiques partout, changeaient de hauteur d'une page à l'autre. */ .site-entete { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 0.625rem; padding: 0.375rem 0.625rem; background-color: var(--fond); box-shadow: 0 1px 3px rgba(0, 0, 18, 0.16); line-height: 1.5; } /* Nom du site en couleur de texte, comme le titre de service de l'en-tête DSFR — l'accent y est réservé aux actions. */ .site-titre { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--texte); } .site-titre a { color: inherit; text-decoration: none; } .site-titre a:hover { text-decoration: underline; } /* Accroche : disparaît sur smartphone, où la largeur est comptée. */ .site-accroche { margin: 0; font-size: 1rem; color: var(--texte-mention); } /* L'accroche cède la place : le titre et le bouton doivent tenir sur une seule ligne, quitte à n'avoir plus que le nom du site. */ @media (max-width: 640px) { .site-accroche { display: none; } } /* Le bouton ouvre le bandeau, avant le nom du site. */ .site-menu { align-self: center; } /* Dans la forme du bouton de menu de l'en-tête DSFR : glyphe couleur d'action, sans cadre ni arrondi — les boutons DSFR sont carrés. */ .menu-bouton { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: none; background-color: var(--fond); font-family: inherit; font-size: 1rem; line-height: 1; color: var(--accent); cursor: pointer; } .menu-bouton:hover { background-color: var(--fond-alt); color: var(--accent-hover); } .menu-bouton:active { color: var(--accent-active); } /* Menu ouvert : le bouton reste sous la main et montre l'état du tiroir. */ .menu-bouton.ouvert { background-color: var(--accent); color: #fff; } /* Prise de focus visible (crit. 10.7). Reprise ici de style.css, où elle vaut pour toute l'application : le bandeau est servi à des pages qui ne la chargent pas. */ .menu-bouton:focus-visible, #menu-site :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* Tiroir latéral : hors flux, ancré au bord gauche, sous le bandeau de titre et jusqu'au pied de page — plus précisément entre leurs parts visibles dans la fenêtre, publiées par SiteMenu.js. Celle du pied est nulle tant qu'une page défilable n'est pas au bout de sa course, entière sur la carte et les pages courtes ; celle du bandeau vaut sa hauteur tant qu'il est collant, et décroît jusqu'à zéro là où il s'échappe vers le haut (carte aux menus défilables) — le tiroir monte alors au ras de la fenêtre. Fermé, il est rangé à gauche de l'écran (translation) et retiré du parcours de tabulation (visibility) — la visibilité ne revenant qu'en fin de glissement à la fermeture, pour que le tiroir reste visible pendant qu'il s'en va. */ #menu-site { position: fixed; z-index: 30; top: var(--hauteur-entete, 45px); bottom: var(--hauteur-pied, 0px); left: 0; box-sizing: border-box; width: fit-content; max-width: min(21.5rem, 85vw); overflow-y: auto; /* La gouttière d'ascenseur est réservée d'office : fit-content ne la compte pas, et un menu plus haut que la fenêtre voyait l'ascenseur vertical mordre sur le contenu — la légende hypsométrique, incompressible, débordait alors de quelques pixels et faisait apparaitre un ascenseur horizontal presque inutile (ascenseurs classiques seulement ; ceux en surimpression ne prennent rien). */ scrollbar-gutter: stable; padding: 0.25rem 0 0.75rem; border-right: 1px solid var(--bordure); background-color: var(--fond); box-shadow: 2px 0 14px rgba(0, 0, 18, 0.18); line-height: 1.5; /* cf. .site-entete : jamais l'interligne de la page */ visibility: hidden; transform: translateX(-100%); transition: transform 0.25s ease, visibility 0s linear 0.25s; } #menu-site.ouvert { visibility: visible; transform: translateX(0); transition: transform 0.25s ease, visibility 0s; } /* Mouvement supprimé pour qui a demandé moins d'animations (crit. 13.8). */ @media (prefers-reduced-motion: reduce) { #menu-site, #menu-site.ouvert { transition: none; } } /* Menu permanent (data-menu-permanent) : quand la largeur le permet, le tiroir est amarré — toujours visible, à la place exacte où il s'ouvre, et le contenu lui cède la colonne au lieu d'être recouvert. Le critère est mesuré : par Disposition.js sur la carte (la carte doit rester au moins à peu près carrée), par SiteMenu.js sur les autres pages (il doit rester une largeur de lecture confortable). La colonne est réservée par un rembourrage de body large du menu (--largeur-menu, sa largeur réelle publiée par SiteMenu.js) ; le bandeau de titre et le pied de page, qui doivent rester pleine largeur au-dessus et au-dessous du menu, le compensent par une marge négative. Le tiroir lui-même ne change pas de régime : toujours fixe entre les parts visibles du bandeau et du pied, il suit le défilement comme lorsqu'il est ouvert à la main — seules disparaissent la translation et l'ombre portée (rien n'est recouvert). Le bouton « ☰ » reste affiché, en creux vert foncé (.ouvert, posé par SiteMenu.js) : volet amarré, il le replie — data-menu-replie, mémorisé, rend sa colonne à la page (d'où les :not() ci-dessous) ; volet replié, il le re-amarre. Le tiroir en superposition reste le régime des fenêtres étroites, jamais celui du volet replié à la main. */ html[data-menu-permanent]:not([data-menu-replie]) body { padding-left: var(--largeur-menu, 0px); } html[data-menu-permanent]:not([data-menu-replie]) .site-entete, html[data-menu-permanent]:not([data-menu-replie]) #site-footer { margin-left: calc(-1 * var(--largeur-menu, 0px)); } html[data-menu-permanent]:not([data-menu-replie]) #menu-site { visibility: visible; transform: none; transition: none; box-shadow: none; } /* Titres des parties du menu : en couleur de texte pleine et au cran « sm », ils dominent les liens qu'ils chapeautent — la capitale et l'espacement les distinguent d'une entrée. */ .menu-groupe { margin: 0.5rem 0.75rem 0.125rem; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texte); } /* Un filet sépare chaque partie de la précédente ; le premier titre, sous le bandeau, n'en a pas besoin. */ /* Le menu s'est enrichi (groupes Relief, Administration) : l'espacement entre groupes est resserré pour que le tiroir tienne sans défiler. */ #menu-site ul + .menu-groupe { margin-top: 0.375rem; padding-top: 0.375rem; border-top: 1px solid var(--bordure); } #menu-site ul { margin: 0; padding: 0; list-style: none; } #menu-site a { display: block; /* Rembourrage calé sur une cible tactile confortable (~2.5rem de haut) ; à gauche, le retrait renvoie les liens sous leur titre de partie. */ padding: 0.5625rem 0.75rem 0.5625rem 1.5rem; border-left: 3px solid transparent; font-size: 1rem; color: var(--texte); text-decoration: none; } /* Survol en gris, comme les liens de navigation DSFR : la teinte accent est gardée pour la sélection (page courante, listes de suggestions). */ #menu-site a:hover { background-color: var(--fond-alt); } /* Page courante : signalée par la couleur et le filet, et non par la seule couleur (crit. 10.6) — le filet gauche double l'information. */ #menu-site a[aria-current='page'] { border-left-color: var(--accent); font-weight: 700; color: var(--accent); } /* La bascule de thème : le libellé « Thème DSFR » suivi d'un interrupteur repris du composant DSFR du même nom — gélule bordée, pastille ronde qui glisse à droite, coche dans la pastille et gélule remplie d'accent à l'état coché. Une case à cocher native redessinée (Theme.js) ; les cotes en rem suivent l'échelle de texte, les filets restent en pixels. La rangée garde la forme des autres entrées (rembourrage, filet, survol). */ .menu-bascule { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5625rem 0.75rem 0.5625rem 1.5rem; border-left: 3px solid transparent; } /* Date du ciel (récompense de la chasse aux planètes, SiteMenu.js) : la rangée garde la forme des gélules ; le champ natif prend la police et les couleurs du menu, vider le champ ramène à aujourd'hui. */ .menu-date-ciel { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5625rem 0.75rem 0.5625rem 1.5rem; border-left: 3px solid transparent; } .menu-date-ciel label { font-size: 1rem; color: var(--texte); } .menu-date-ciel input { font: inherit; font-size: 0.875rem; color: var(--texte); background-color: var(--fond); border: 1px solid var(--bordure); border-radius: 0.25rem; padding: 0.125rem 0.25rem; } .menu-bascule:hover { background-color: var(--fond-alt); } .menu-bascule label { font-size: 1rem; color: var(--texte); cursor: pointer; } .menu-bascule input { appearance: none; flex: none; position: relative; width: 2.5rem; height: 1.5rem; margin: 0; border-radius: 0.75rem; box-shadow: inset 0 0 0 1px var(--accent); background: none; cursor: pointer; transition: background-color 0.2s; } .menu-bascule input:checked { background-color: var(--accent); } /* Pastille (::before) et coche (::after), superposées et déplacées d'un même mouvement ; la coche est un masque, pour prendre la couleur d'accent de la feuille de thème active. */ .menu-bascule input::before, .menu-bascule input::after { content: ''; position: absolute; top: 0; left: 0; width: 1.5rem; height: 1.5rem; transition: left 0.2s; } .menu-bascule input::before { border-radius: 50%; box-shadow: inset 0 0 0 1px var(--accent); background-color: var(--fond); } .menu-bascule input::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 15.15 18.6 6.1l1.4 1.4-10.45 10.45-4.95-4.95 1.4-1.4z'/%3E%3C/svg%3E") center / 1rem no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 15.15 18.6 6.1l1.4 1.4-10.45 10.45-4.95-4.95 1.4-1.4z'/%3E%3C/svg%3E") center / 1rem no-repeat; background-color: var(--accent); opacity: 0; } .menu-bascule input:checked::before, .menu-bascule input:checked::after { left: 1rem; } .menu-bascule input:checked::after { opacity: 1; } /* Bouton « Réinitialiser la chasse… » fermant chaque groupe de chasse (SiteMenu.js) : la forme des entrées du menu, mais au cran sm et en couleur de mention — l'action est accessoire, le dialogue de confirmation fait le garde-fou. */ .menu-reinitialiser { display: block; width: 100%; padding: 0.4375rem 0.75rem 0.4375rem 1.5rem; border: none; border-left: 3px solid transparent; background: none; font: inherit; font-size: 0.875rem; text-align: left; color: var(--texte-mention); cursor: pointer; } .menu-reinitialiser:hover { background-color: var(--fond-alt); color: var(--texte); } /* Boîte de signalement (Signalement.js), posée sur par le module : dans cette feuille car présente, comme le tiroir, sur toutes les pages. */ .signalement-dialogue { box-sizing: border-box; width: calc(100vw - 2rem); max-width: 32rem; padding: 1.25rem 1.5rem; border: 1px solid var(--bordure); background-color: var(--fond); line-height: 1.5; /* cf. .site-entete : jamais l'interligne de la page */ color: var(--texte); } .signalement-dialogue::backdrop { background-color: rgb(0 0 0 / 40%); } .signalement-dialogue h2 { margin: 0 0 0.25rem; font-size: 1.125rem; } .signalement-sous-titre { margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--texte-mention); } /* Encadré « anomalie connue », sur le fond des encadrés du thème. */ .signalement-anomalie { margin: 0 0 0.75rem; padding: 0.5rem 0.75rem; border-left: 3px solid var(--accent); background-color: var(--accent-fond); font-size: 0.875rem; } .signalement-anomalie a { color: var(--accent); } .signalement-dialogue fieldset { margin: 0 0 0.75rem; padding: 0; border: none; } .signalement-dialogue legend { padding: 0; margin-bottom: 0.25rem; font-weight: 700; } .signalement-dialogue fieldset label { display: block; padding: 0.25rem 0; } .signalement-description { display: block; margin-bottom: 0.75rem; font-weight: 700; } .signalement-description textarea { display: block; box-sizing: border-box; width: 100%; margin-top: 0.25rem; padding: 0.375rem 0.5rem; border: 1px solid var(--bordure); background-color: var(--fond-champ); font: inherit; font-weight: 400; color: var(--texte); } .signalement-technique { margin-bottom: 0.75rem; font-size: 0.875rem; } .signalement-technique summary { cursor: pointer; color: var(--texte-mention); } .signalement-technique dl { margin: 0.5rem 0 0; color: var(--texte-mention); /* Les valeurs techniques (URL, agent) ne se coupent pas d'elles-mêmes. */ overflow-wrap: anywhere; } .signalement-technique dt { font-weight: 700; } .signalement-technique dd { margin: 0 0 0.375rem; } .signalement-etat { margin: 0 0 0.5rem; font-size: 0.875rem; } .signalement-etat a { color: var(--accent); } .signalement-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } .signalement-actions button { padding: 0.5rem 1rem; border: 1px solid var(--accent); font: inherit; cursor: pointer; } .signalement-envoyer { background-color: var(--accent); color: var(--fond); } .signalement-envoyer:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); } .signalement-envoyer:disabled { opacity: 0.6; cursor: default; } .signalement-annuler { background: none; color: var(--accent); } .signalement-annuler:hover { background-color: var(--fond-alt); } .signalement-dialogue :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* Dialogue de confirmation de la réinitialisation des chasses (SiteMenu.js) : la boîte de signalement en réduction — mêmes cotes, un texte et deux boutons. */ .reinitialisation-dialogue { box-sizing: border-box; width: calc(100vw - 2rem); max-width: 26rem; padding: 1.25rem 1.5rem; border: 1px solid var(--bordure); background-color: var(--fond); line-height: 1.5; /* cf. .site-entete : jamais l'interligne de la page */ color: var(--texte); } .reinitialisation-dialogue::backdrop { background-color: rgb(0 0 0 / 40%); } .reinitialisation-dialogue h2 { margin: 0 0 0.25rem; font-size: 1.125rem; } .reinitialisation-dialogue p { margin: 0 0 0.75rem; font-size: 0.875rem; } .reinitialisation-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } .reinitialisation-actions button { padding: 0.5rem 1rem; border: 1px solid var(--accent); font: inherit; cursor: pointer; } .reinitialisation-confirmer { background-color: var(--accent); color: var(--fond); } .reinitialisation-confirmer:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); } .reinitialisation-annuler { background: none; color: var(--accent); } .reinitialisation-annuler:hover { background-color: var(--fond-alt); } .reinitialisation-dialogue :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* Pied de page : les liens d'informations légales, bâti par SiteMenu.js comme le tiroir. Sur la carte, c'est un enfant de la colonne flex de body (d'où le flex) ; sur les pages défilantes, il vient après le contenu, que la mise en page de chaque feuille pousse au bas de la fenêtre. */ /* Pied de page DSFR (fr-footer) : fond blanc et liseré supérieur de 2px à la couleur d'accent — c'est lui qui clôt la page, non un gris. */ #site-footer { flex: 0 0 auto; padding: 0.5rem 0.75rem; background-color: var(--fond); border-top: 2px solid var(--accent); font-size: 0.875rem; line-height: 1.5; /* cf. .site-entete : jamais l'interligne de la page */ color: var(--texte-mention); } #site-footer ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem 1.125rem; margin: 0; padding: 0; list-style: none; } /* Liens du bas de pied DSFR : gris de mention, soulignés au survol. */ #site-footer a { color: var(--texte-mention); text-decoration: none; } #site-footer a:hover { color: var(--texte); text-decoration: underline; } /* Réponse disponible à un signalement (Signalement.js) : seule entrée du pied en couleur d'accent — c'est une information qui attend le visiteur, pas un lien de navigation. */ #site-footer .pied-reponse { color: var(--accent); } /* Le bouton de signalement du pied prend la forme des liens qui l'entourent (c'est une action, d'où le bouton — même raison que dans le tiroir). */ .pied-signalement { padding: 0; border: none; background: none; font: inherit; color: var(--texte-mention); cursor: pointer; } .pied-signalement:hover { color: var(--texte); text-decoration: underline; } /* Légende hypsométrique du groupe Relief (SiteMenu.js) : une rangée de pavés jointifs entre les gélules Altimétrie et Bathymétrie — les paliers de couleur des deux couches et leurs planchers en kilomètres, altitudes à gauche, profondeurs à droite, « km » en bout de ligne. Les pavés, légèrement rectangulaires pour loger « −1 », « −2 »…, se partagent leurs filets (border-left retiré du suivant). Cotes en rem (elles suivent l'échelle de texte), filets en pixels. */ .menu-legende { display: flex; align-items: flex-start; padding: 0.125rem 0.75rem 0.375rem 1.5rem; border-left: 3px solid transparent; } .legende-groupe { display: flex; } /* Chaque valeur est le plancher de sa tranche : elle se cale sous la jointure droite de sa case (« 0 » sous la ligne qui sépare le vert du premier bleu — le niveau de la mer). Absolue, elle vit dans le rembourrage bas réservé par la cellule ; l'unité « km », portée par la case des abysses, suit la même règle et ferme la ligne. */ .legende-palier { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0.9375rem; padding-bottom: 0.6875rem; } /* Le filet des cases est plus soutenu que --bordure : entre deux teintes claires voisines (blancs des hauteurs, bleus des faibles profondeurs), le gris clair disparaissait. Le border-box est indispensable : en content-box, le filet déborde de la cellule et la case suivante le recouvre de son fond — la bande semblait sans jointures. */ .legende-carre { box-sizing: border-box; width: 100%; height: 0.625rem; border: 1px solid var(--desactive); } .legende-palier + .legende-palier > .legende-carre, .legende-groupe + .legende-groupe .legende-palier:first-child > .legende-carre { border-left: none; } .legende-valeur { position: absolute; bottom: 0; right: 0; transform: translateX(50%); font-size: 0.5625rem; line-height: 1; color: var(--texte-mention); }