/* ========================================================================== SoftiField v2 - styles propres a l'application -------------------------------------------------------------------------- 1. Shell commun (js/shell.js) : grille topbar + contenu + sidebar a droite, tiroir sous 1024 px. 2. Page de connexion (login.html, maquette D1). 3. Tableau de bord (index.html, maquette D2) : carte live, panneaux glass. 4. Modulation (modulation.html) : meme carte, panneau C7 de dessin. 5. Parametres (parametres.html) : cartes C5 palette, camera, compte. 6. Champs (champs.html) : liste de cartes C6, carte, editeur de contour et import guide. 7. Administration (admin.html) : etat du systeme, comptes, nouveau compte. Dependances : tokens.css, components.css (et leaflet.css pour les sections 3, 4 et 6). ========================================================================== */ /* ========================================================================== 1. SHELL -------------------------------------------------------------------------- +------------------------------+-----------+ | topbar (fil d'Ariane, theme) | sidebar | +------------------------------+ logo | |
de la page | nav | | | compte | +------------------------------+-----------+ Le
enfant direct de occupe la zone de contenu. Tout ce que les scripts ajoutent a (modal, toast, lien de telechargement) doit etre en position fixe ou absolue, sinon la grille lui donnerait une case. ========================================================================== */ /* Fond du canevas du navigateur (rebond de defilement, zone hors ) : celui de l'application. La base de la charte pose --bg-2 sur , plus clair que --app-canvas en sombre : bande claire au rebond sur mobile. */ html { background: var(--app-canvas); } .app-shell { /* Largeur reelle de la sidebar : --sidebar-w deployee, remplacee par --sidebar-w-collapsed quand elle est retractee (plus bas). Tout ce qui depend de la colonne lit cette variable, jamais les jetons. */ --shell-sidebar-w: var(--sidebar-w); display: grid; grid-template-columns: minmax(0, 1fr) var(--shell-sidebar-w); grid-template-rows: var(--topbar-h) minmax(0, 1fr); grid-template-areas: "topbar sidebar" "main sidebar"; height: 100vh; height: 100dvh; overflow: hidden; background: var(--app-canvas); } .app-shell > main { grid-area: main; min-width: 0; min-height: 0; position: relative; overflow: auto; /* Leaflet empile ses panneaux jusqu'a z-index 1000 : isoler la page evite que la carte passe au-dessus du tiroir, des modals et des toasts. */ isolation: isolate; } /* Cible du lien d'evitement (tabindex -1) : un cadre autour de toute la carte n'apprendrait rien, le focus clavier suivant se voit deja */ .app-shell > main:focus { outline: none; } /* ---------- Topbar (C1) ---------- */ .app-topbar { grid-area: topbar; position: relative; z-index: var(--z-topbar); /* La charte montre la topbar seule, en carte : ici elle est posee bord a bord, un simple filet la separe du contenu. */ display: flex; border: none; border-bottom: 1px solid var(--sidebar-line); border-radius: 0; } .app-topbar .crumb-row { flex: 1; } .app-topbar .crumb--current { color: var(--sidebar-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-topbar__actions { display: flex; align-items: center; gap: 8px; } .app-burger { display: none; } /* ---------- Sidebar (C2) ---------- */ .app-sidebar { grid-area: sidebar; display: flex; flex-direction: column; min-height: 0; background: var(--sidebar-bg); color: var(--sidebar-text); border-left: 1px solid var(--sidebar-line); } .app-sidebar__head { height: var(--topbar-h); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--sidebar-line); } .app-sidebar__brand { display: flex; align-items: center; min-height: var(--tap); border-radius: var(--r-sm); } .app-logo { height: 40px; width: auto; } /* Theme sombre : methode de la charte (logo passe en blanc) */ [data-theme="dark"] .app-logo { filter: brightness(0) invert(1); } /* Pictogramme : colonne retractee seulement (plus bas) */ .app-logo--mark { display: none; } .app-sidebar__close, .app-sidebar__theme { display: none; } /* Bascule de theme du tiroir : a droite, contre le bouton Fermer */ .app-sidebar__theme { margin-left: auto; } /* Bascule de la sidebar (desktop), sous la tete et hors de la liste qui defile. Calee a droite (padding 10) : centre du bouton a 32 px du bord de la fenetre dans les deux etats, comme les icones de la colonne retractee. Placee dans la topbar, elle suivait le bord gauche de la colonne et quittait le pointeur a chaque clic. Chevron tourne vers le bord pour retracter, retourne pour deployer. Masquee sous 1024 px (burger). */ .app-sidebar__bascule { flex-shrink: 0; display: flex; justify-content: flex-end; padding: 8px 10px 0; } .app-sidebar-toggle { background: transparent; border-color: var(--sidebar-line); color: var(--sidebar-text); } .app-sidebar-toggle:hover { background: var(--sidebar-bg-2); } .app-sidebar-toggle svg { transition: transform 0.16s ease; } .is-sidebar-collapsed .app-sidebar-toggle svg { transform: rotate(180deg); } .app-sidebar__nav { flex: 1; min-height: 0; overflow-y: auto; /* .nav-list est dessinee en carte dans la charte ; ici elle remplit la colonne. Le padding de 8 px place le marqueur ble sur le bord exterieur. */ width: auto; border: none; border-radius: 0; background: transparent; } .app-sidebar .nav-section__label ~ .nav-section__label { margin-top: 8px; } .app-sidebar .nav-item:hover { background: var(--sidebar-bg-2); } /* DATUM : meme barre a gauche + tint leger que .nav-item.is-active (components). La barre ::before est heritee ; ici on cale juste fond et encre sur la sidebar. Vaut pour la sidebar de l'application ET la sidebar admin dediee. */ .app-sidebar .nav-item.is-active { background: var(--brand-softer); color: var(--brand-ink); } /* Pendant la bascule, la colonne passe par toutes les largeurs : le libelle est coupe au lieu de passer a la ligne, la liste ne defile pas en largeur */ .app-sidebar__nav { overflow-x: hidden; } .app-sidebar .nav-item__label { min-width: 0; overflow: hidden; white-space: nowrap; } /* Separateur de la sidebar admin, avant « Retour a l'application ». Filet net (--line-strong : --sidebar-line fait 1,2:1 en sombre), garde dans la colonne retractee (marges alignees sur les icones). */ .app-sidebar__nav .nav-sep { height: 1px; margin: 8px 12px; background: var(--line-strong); } /* Sidebar de 192 px : marges et ecart resserres pour laisser 79 px au nom (avatar 36 + deconnexion 44, bordure gauche 1). Le nom passe en 13 px et sur deux lignes au plus : un title ne s'affiche ni au doigt ni au clavier, l'identifiant doit se lire en entier dans la colonne. */ .app-sidebar__user { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 12px 4px 12px 12px; border-top: 1px solid var(--sidebar-line); } .app-sidebar__who { flex: 1; min-width: 0; display: flex; flex-direction: column; } .app-sidebar__role { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; /* --sidebar-muted : 3,8:1 sur --sidebar-bg clair */ color: var(--muted-ink); } /* Role du compte, pose par shell.js (data-role) a la place de « Compte » : badge mono sans pastille, qui tient dans les 79 px de la colonne (« OPERATEUR » : 72 px) */ .app-sidebar__role[data-role] { align-self: flex-start; margin-bottom: 2px; padding: 1px 6px; border-radius: var(--r-sm); background: var(--sidebar-bg-2); line-height: 16px; } /* --brand-ink sur --brand-soft : 5,4:1 en clair, 6:1 en sombre (tokens.css) */ .app-sidebar__role[data-role="admin"] { background: var(--brand-soft); color: var(--brand-ink); } .app-sidebar__name { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .app-sidebar__logout { background: transparent; border-color: var(--sidebar-line); color: var(--sidebar-muted); } /* Deconnexion : --danger, conformement a la charte (A3) */ .app-sidebar__logout:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); } /* ---------- Lien d'evitement (clavier) ---------- */ .skip-link { position: fixed; top: 8px; left: 8px; z-index: var(--z-toast); padding: 8px 16px; background: var(--brand-fill); color: var(--on-brand); border-radius: var(--r-md); font-weight: 600; transform: translateY(-200%); } .skip-link:focus { transform: none; } /* Toasts : au-dessus du contenu, pas sur la sidebar */ .app-shell .toasts { right: calc(var(--shell-sidebar-w) + 16px); } /* ---------- Sidebar retractee (> 1024 px) ---------- body.is-sidebar-collapsed, posee par shell.js avant l'insertion de la sidebar (etat par defaut, choix memorise) : colonne d'icones de --sidebar-w-collapsed. Sous 1024 px la classe reste posee mais ces regles ne s'appliquent pas : le tiroir garde logo, libelles et pied complets. « not all and » : complement exact du @media du tiroir, sans trou entre 1024 et 1025 px (zoom). Les libelles restent lus par les lecteurs d'ecran (texte masque visuellement, meme technique que .sr-only) et s'affichent en bulle au survol et au focus clavier. Rien ne saute a la bascule, meme au debut de la transition : la bascule garde sa place, les icones leur distance au bord gauche de la colonne et leur hauteur (titres de section de meme hauteur), l'avatar sa distance au bord. Au deploiement, logo, titres et pied deployes sont decouverts par la colonne qui s'elargit (0,16 s, overflow: hidden). */ @media not all and (max-width: 1024px) { .app-shell { transition: grid-template-columns 0.16s ease; } .app-shell .toasts { transition: right 0.16s ease; } .app-shell.is-sidebar-collapsed { --shell-sidebar-w: var(--sidebar-w-collapsed); } /* En cours de transition, logo et pied deployes depassent de la colonne encore etroite : coupes, sinon la page deborde en largeur */ .app-sidebar { overflow: hidden; } .is-sidebar-collapsed .app-sidebar__head { justify-content: center; padding: 0; } .is-sidebar-collapsed .app-sidebar__brand { min-width: var(--tap); justify-content: center; } .is-sidebar-collapsed .app-logo--full { display: none; } .is-sidebar-collapsed .app-logo--mark { display: block; } /* Entree : pilule de 47 px, padding de la colonne deployee garde (8 12). Le libelle sorti du flux ne compte plus dans le gap : l'icone est a 12 px du bord gauche et 13 px du droit, centree a 0,5 px pres, sans saut au debut de la retraction (un centrage la placerait au milieu de l'entree encore large). La barre DATUM de l'entree active (::before) est a gauche (left: 0), sur le bord interieur : elle reste visible en colonne retractee et ne pousse pas l'icone (position absolue). */ /* Icone centree dans la colonne retractee (independant de sa taille) */ .is-sidebar-collapsed .app-sidebar .nav-item { justify-content: center; padding-left: 0; padding-right: 0; } .is-sidebar-collapsed .app-sidebar .nav-item__label, .is-sidebar-collapsed .app-sidebar__who { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Titre de section : meme boite que deployee (les icones ne montent pas a la bascule), texte transparent coupe mais lu par les lecteurs d'ecran, filet de 1 px centre entre les deux groupes (marge de 8 px au-dessus, padding 8 / 4 : 4 px au-dessus du milieu de la boite). --line-strong : --sidebar-line fait 1,2:1 en sombre, le filet est le seul signe du regroupement. Le premier, sous la tete, n'a pas de filet. */ .is-sidebar-collapsed .app-sidebar .nav-section__label { position: relative; overflow: hidden; white-space: nowrap; color: transparent; } .is-sidebar-collapsed .app-sidebar .nav-section__label::after { content: ""; position: absolute; left: 4px; right: 4px; top: calc(50% - 4px); height: 1px; background: var(--line-strong); } .is-sidebar-collapsed .app-sidebar .nav-section__label:first-child::after { content: none; } /* Pied : avatar puis deconnexion, empiles et cales comme les icones (centres a 32 px du bord) : avatar a 13 px du bord gauche de la colonne, deconnexion a 9 px. L'avatar ne saute pas au debut de la retraction (12 px en deploye). */ .is-sidebar-collapsed .app-sidebar__user { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 0 12px 13px; } .is-sidebar-collapsed .app-sidebar__logout { margin-left: -4px; } /* Bulles de la colonne retractee : libelle d'une entree survolee ou focalisee au clavier, role et identifiant du compte au survol du pied, au toucher de l'avatar ou au focus de la deconnexion (un title ne s'affiche ni au doigt ni au clavier). Position fixe : la sidebar (overflow: hidden) et la liste qui defile couperaient une bulle absolue. Aucun top : position statique, centree sur l'entree (align-items) ou calee en haut du pied, a gauche de la colonne. Surface du tiroir : fond de la sidebar, --pop-line, --shadow-pop. */ .is-sidebar-collapsed .app-sidebar .nav-item:hover .nav-item__label, .is-sidebar-collapsed .app-sidebar .nav-item:focus-visible .nav-item__label, .is-sidebar-collapsed .app-sidebar__user:hover .app-sidebar__who, .is-sidebar-collapsed .app-sidebar__user:focus-within .app-sidebar__who { position: fixed; right: calc(var(--shell-sidebar-w) + 8px); z-index: var(--z-tooltip); width: auto; height: auto; margin: 0; clip: auto; overflow: visible; padding: 8px 12px; background: var(--sidebar-bg); color: var(--sidebar-text); border: 1px solid var(--pop-line); border-radius: var(--r-md); box-shadow: var(--shadow-pop); font-weight: 600; pointer-events: none; } .is-sidebar-collapsed .app-sidebar__user:hover .app-sidebar__who, .is-sidebar-collapsed .app-sidebar__user:focus-within .app-sidebar__who { max-width: 200px; white-space: normal; } } /* ---------- Tiroir <= 1024 px ---------- Meme seuil que MOBILE dans js/shell.js (qui ferme le tiroir quand on repasse au-dessus). Un seul seuil pour tout le shell. */ .app-backdrop { position: fixed; inset: 0; z-index: var(--z-backdrop); background: rgba(0, 0, 0, 0.45); animation: sf-fondu 0.12s ease-out; } @media (max-width: 1024px) { .app-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topbar" "main"; } .app-shell .toasts { right: 16px; } .app-sidebar__bascule { display: none; } .app-burger, .app-sidebar__close, .app-sidebar__theme { display: inline-flex; } .app-sidebar { grid-area: auto; position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 85vw); z-index: var(--z-drawer); /* Surface posee : en sombre, le fond --sidebar-bg se confond avec la topbar assombrie par le voile, la bordure --pop-line la detache */ border-left-color: var(--pop-line); box-shadow: var(--shadow-pop); /* visibility : tiroir ferme hors du parcours clavier et lecteur d'ecran */ transform: translateX(100%); visibility: hidden; transition: transform 0.22s ease, visibility 0s linear 0.22s; } .app-shell.is-drawer-open .app-sidebar { transform: none; visibility: visible; transition: transform 0.22s ease; } /* Tiroir de 320 px : le pied reprend l'air que la colonne de 192 px lui retire, aligne sur la tete (16 px) */ .app-sidebar__user { gap: 12px; padding: 12px 8px 12px 16px; } .app-sidebar__name { font-size: 15px; } } @media (max-width: 480px) { .app-topbar { padding: 0 16px; gap: 12px; } .app-topbar .crumb, .app-topbar .crumb-sep { display: none; } .app-topbar .crumb.crumb--current { display: block; } } @media (prefers-reduced-motion: reduce) { .app-sidebar, .app-shell.is-drawer-open .app-sidebar, .app-shell, .app-shell .toasts, .app-sidebar-toggle svg { transition: none; } .app-backdrop { animation: none; } } /* ========================================================================== 2. CONNEXION (login.html, maquette D1) Carte de 480 px centree sur un halo --brand-soft. ========================================================================== */ .login-page { min-height: 100vh; min-height: 100dvh; background: radial-gradient(circle at 25% 30%, var(--brand-soft) 0%, transparent 45%), var(--app-canvas); } .login { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 72px 16px 32px; } .login__theme { position: fixed; top: 16px; right: 16px; } .login__card { width: 100%; max-width: 480px; padding: 40px; display: flex; flex-direction: column; gap: 20px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); } .login__logo { height: 64px; width: auto; align-self: center; } .login__head { text-align: center; } .login__title { font-family: var(--display); font-size: 28px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; } .login__sub { margin-top: 8px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; /* ECART : --ink-soft et non --muted (3,8:1), comme .field__label */ color: var(--ink-soft); } .login__card .field { max-width: none; } /* Zone d'erreur : vide et masquee tant que login.js n'y ecrit rien (.show) */ .login__error { display: none; padding: 12px 16px; background: var(--danger-soft); border-left: 4px solid var(--danger); border-radius: var(--r-md); /* Texte en --ink : --danger sur sa propre teinte ne fait que 3,8:1 en clair. Le lisere et le fond portent la couleur d'erreur. */ color: var(--ink); font-size: 14px; font-weight: 600; } .login__error.show { display: block; } .login__souvenir { align-self: flex-start; font-size: 14px; } /* Bouton oeil : une icone par etat, aria-pressed porte l'etat */ .field__eye-off { display: none; } [aria-pressed="true"] > .field__eye { display: none; } [aria-pressed="true"] > .field__eye-off { display: inline-block; } @media (max-width: 480px) { .login { align-items: flex-start; } .login__card { padding: 24px 16px; } } /* ========================================================================== 3. TABLEAU DE BORD (index.html, maquette D2) -------------------------------------------------------------------------- Carte plein cadre (satellite seul) dans le
du shell, boites glass par-dessus. +--------------------------------------------------------+ | +--------------+ | | |[VIT.] [CAP] | tableau de bord | | | lat lon | | | +--------------+ [+] | | +----------------+ [-] | | | camera (ouv.) | [cam]| | +----------------+ [rec]| | | | +------------+ +---------------------------+ | | |[couche v] | | outil outil en cours | | | | legende | | [cellule][cellule] --> | | | +------------+ +---------------------------+ | | attribution | +--------------------------------------------------------+ Bas de carte (.dash-bas) en grille de trois colonnes, les deux laterales a la largeur de la legende : la boite Outils est centree sur la carte et ne peut pas atteindre la legende. Tout le bas se pose 20 px au-dessus du bord, au-dessus de l'attribution des tuiles. La box camera se place a gauche de la colonne de controles, centree sur la carte quand la hauteur le permet, sinon remontee au-dessus des boites du bas : bornes en variables (--dash-cam-haut, --dash-cam-bas), sans script. Les classes lues par js/app.js (sf-legend-*, live-cell*, open/mini, active, show, body.cam-active) sont conservees ; elles sont prefixees ici par un conteneur de la page, car app.css est aussi lu par parametres.html, dont l'apercu de legende emploie les memes classes .sf-legend-* (section 5). La carte, le zoom, les controles B9 et l'attribution (regles en .dash) servent aussi a modulation.html (
, section 4) et champs.html (section 6) ; la colonne de droite est propre au tableau de bord (.dash-controls--droite). ========================================================================== */ .app-shell > main.dash { overflow: hidden; --dash-marge: 16px; /* Modulation et Champs : bloc de controles sous le zoom Leaflet en ligne (marge 16 + 44 + 8 px d'air) */ --dash-controles-top: 68px; /* Colonne de droite du tableau de bord : demi-hauteur de la place reservee a Recentrer, pour centrer le couple visible zoom + camera */ --dash-controles-decalage: calc((var(--tap) + 8px) / 2); /* Bas des boites : au-dessus de l'attribution (14 px) avec 6 px d'air */ --dash-bas: 20px; --dash-legende-w: 296px; /* Hauteurs au plus des boites, mesurees : Tableau de bord (tuiles vitesse et cap), legende (selecteur et echelle), Outils (tete, une ligne de cellules a champ Cible et barre de defilement). Elles bornent la camera sans script. */ --dash-bord-h: 72px; --dash-legende-h: 138px; --dash-outils-h: var(--dash-legende-h); /* Legende reduite a son selecteur (echelle repliee, carte basse) : padding + cible de 44 px */ --dash-legende-min-h: 68px; /* Box camera : tete 60 px + filet + bordures (63 px), corps en 16/9. Sa largeur suit la hauteur libre entre les bornes haute et basse. */ --dash-cam-haut: var(--dash-marge); --dash-cam-bas: calc(var(--dash-bas) + var(--dash-outils-h) + 8px); --dash-mini-bas: var(--dash-cam-bas); --dash-cam-w-max: 360px; --dash-cam-w: clamp(236px, (100dvh - var(--topbar-h) - var(--dash-cam-haut) - var(--dash-cam-bas) - 63px) * 16 / 9 + 2px, var(--dash-cam-w-max)); --dash-cam-h: calc(63px + (var(--dash-cam-w) - 2px) * 9 / 16); --dash-mini-w: 184px; --dash-mini-h: calc(2px + (var(--dash-mini-w) - 2px) * 9 / 16); } /* z-index 0 : isole ceux de Leaflet (panneaux 400, controles 1000), les boites glass qui suivent n'ont qu'a valoir 1 */ .dash__map { position: absolute; inset: 0; z-index: 0; background: var(--bg-3); } /* Liste du select, champs et barres de defilement sombres dans le glass */ .dash .glass, .dash-bord, .dash-live { color-scheme: dark; } /* ---------- Controles de carte (B9) ---------- Modulation et Champs : bloc compact de 2 colonnes (variante --row de la charte) en haut a gauche, zoom puis fond de carte. Tableau de bord : colonne au centre droit (.dash-controls--droite, plus bas). */ .dash .leaflet-top.leaflet-left .leaflet-control { margin: var(--dash-marge) 0 0 var(--dash-marge); } .dash .leaflet-bar { display: flex; flex-direction: row; gap: 4px; border: none; border-radius: 0; box-shadow: none; background: transparent; } /* Zoom Leaflet dessine comme .map-btn (components.css). leaflet.css est lu avant app.css : a specificite egale, ces regles gagnent. */ .dash .leaflet-bar a { width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center; background: var(--glass-soft); border: 1px solid var(--glass-line); color: var(--glass-ink); font: 700 20px/1 var(--display); text-indent: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* Leaflet arrondit seulement les coins exterieurs de la barre, par .leaflet-touch .leaflet-bar a:first-child / :last-child (0,3,1), pose sur tout navigateur a pointer events, bureau compris : meme specificite ici. */ .dash .leaflet-bar a:first-child, .dash .leaflet-bar a:last-child { border-radius: var(--r-md); } .dash .leaflet-bar a:hover, .dash .leaflet-bar a:focus { background: var(--glass); color: var(--glass-ink); } .dash .leaflet-bar a:active { background: var(--brand-fill); border-color: var(--brand-fill); } .dash .leaflet-bar a.leaflet-disabled { background: var(--glass-soft); color: var(--glass-muted); } /* Attribution des tuiles : seul bloc de Leaflet pose a plat sur la carte, passe en glass comme les panneaux voisins (blanc et Helvetica sinon) */ .dash .leaflet-control-attribution { padding: 0 8px; background: var(--glass-soft); border-top-left-radius: var(--r-sm); color: var(--glass-muted); font-family: var(--mono); font-size: 10px; } .dash .leaflet-control-attribution a { color: var(--glass-ink-soft); } /* #map est focalisable (fleches du clavier) et remplit main.dash, qui coupe ce qui depasse. Un outline rentre ne suffit pas : il est peint sous les panneaux de Leaflet (z-index 400 a 1000). L'anneau est un calque pose au-dessus d'eux, a l'interieur de la carte. */ .dash__map:focus-visible { outline: none; } .dash__map:focus-visible::after { content: ""; position: absolute; inset: 2px; z-index: 1001; border: 2px solid var(--brand); pointer-events: none; } /* Leaflet focalise la carte par script au clic : Chrome garde :focus-visible si le focus sortait d'un champ texte. is-pointeur (pose au pointerdown, retire a la premiere touche par app.js et modulation.js) masque l'anneau. */ .dash__map.is-pointeur:focus-visible::after { display: none; } .dash-controls { position: absolute; top: var(--dash-controles-top); left: var(--dash-marge); z-index: 1; width: calc(var(--tap) * 2 + 4px); display: flex; flex-wrap: wrap; gap: 8px 4px; } .dash-controls__group { display: flex; gap: 4px; } .dash-controls .map-btn:hover { background: var(--glass); } /* Fond de carte courant (.active, pages Champs et Modulation) et camera affichee : selection = marque, en --brand-fill comme la tuile Vitesse et l'entree active voisines (icone blanche a 4,6:1 au lieu de 3,6:1 sur --brand) */ .dash-controls .map-btn.active, .dash-controls .map-btn[aria-pressed="true"] { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-brand); } .dash-controls .map-btn.active:hover, .dash-controls .map-btn[aria-pressed="true"]:hover { background: var(--brand-fill-deep); border-color: var(--brand-fill-deep); } /* Colonne du tableau de bord, contre le bord droit de la carte (donc a gauche de la sidebar, retractee ou non) : zoom Leaflet (deplace dans #dashZoom par initMap), camera, recentrer. Ce qui est centre sur la hauteur de la carte, c'est le couple VISIBLE zoom + camera : la colonne est descendue de la demi-hauteur de la place reservee a Recentrer (44 + 8 px), sinon le couple restait 26 px trop haut tant que le suivi de position etait actif, c'est-a-dire presque toujours. */ .dash-controls--droite { top: 50%; left: auto; right: var(--dash-marge); width: var(--tap); flex-direction: column; flex-wrap: nowrap; gap: 8px; transform: translateY(calc(-50% + var(--dash-controles-decalage))); } /* Carte de moins de 288 px : descendre la colonne poserait Recentrer sur l'attribution des tuiles. Elle reprend alors le centrage de la colonne entiere, place reservee comprise. */ @media (max-height: 350px) { .app-shell > main.dash { --dash-controles-decalage: 0px; } } /* Place du zoom reservee avant que Leaflet ne l'insere : la colonne ne saute pas au chargement */ .dash-controls__zoom { min-height: calc(var(--tap) * 2 + 4px); } .dash-controls--droite .leaflet-bar { flex-direction: column; } /* Recentrer : absent tant que la carte suit la position. Il apparait en couleur d'action : c'est le seul signe que le suivi est coupe. Sa place reste reservee (visibility, qui le retire aussi du parcours clavier) : zoom et camera ne bougent pas sous le doigt quand il apparait. */ .dash-recenter { visibility: hidden; } .dash-controls .dash-recenter.show { visibility: visible; background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-brand); } .dash-controls .dash-recenter.show:hover { background: var(--brand-fill-deep); border-color: var(--brand-fill-deep); } /* ---------- Marqueur GPS (divIcon .gps-marker, app.js) ---------- */ .dash .gps-marker { display: flex; align-items: center; justify-content: center; background: transparent; border: none; } .dash .gps-marker-dot { width: 22px; height: 22px; background: var(--brand-bright); border: 3px solid #FFFFFF; border-radius: 50%; /* Halo --brand-bright translucide : visible sur l'imagerie claire ou sombre */ box-shadow: 0 0 0 8px rgba(33, 150, 255, 0.25); animation: sf-gps-pulse 2s ease-in-out infinite; } @keyframes sf-gps-pulse { 0%, 100% { box-shadow: 0 0 0 8px rgba(33, 150, 255, 0.25); } 50% { box-shadow: 0 0 0 14px rgba(33, 150, 255, 0.10); } } /* ---------- Boite Tableau de bord (C7, haut-gauche) ---------- Largeur fixe : la vitesse qui passe de 9,5 a 10,5 ne fait pas bouger la boite. */ .dash-bord { position: absolute; top: var(--dash-marge); left: var(--dash-marge); z-index: 1; width: 264px; padding: 12px; gap: 8px; } /* Ecart de C7 (10 px) ramene aux multiples de 4 */ .dash-bord__stats { grid-template-columns: 1fr; gap: 8px; } /* Unite sur la tuile --brand-fill : le gris du glass y tombe sous 3:1, le blanc a 85 % sous 4,5:1 */ .dash-bord .dash-stat--brand .dash-stat__value small { color: var(--on-brand); } /* ---------- Bas de carte : legende et outils ---------- Le conteneur couvre toute la largeur : il laisse passer les gestes de carte, seules ses deux boites les captent. */ .dash-bas { position: absolute; left: var(--dash-marge); right: var(--dash-marge); bottom: var(--dash-bas); z-index: 1; display: grid; grid-template-columns: var(--dash-legende-w) minmax(0, 1fr) var(--dash-legende-w); column-gap: 8px; align-items: end; pointer-events: none; } .dash-bas > * { pointer-events: auto; } /* ---------- Legende et selecteur de couche (glass, bas-gauche) ---------- Une boite : la legende decrit la couche choisie juste au-dessus. */ .dash-legend { width: var(--dash-legende-w); display: flex; flex-direction: column; gap: 12px; padding: 12px; } .dash-layer { display: flex; align-items: center; gap: 12px; } .dash-layer__label { flex-shrink: 0; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--glass-muted); } .dash-layer__field { position: relative; display: flex; flex: 1 1 auto; min-width: 0; } .dash-layer__select { width: 100%; min-width: 0; height: var(--tap); padding: 0 40px 0 12px; -webkit-appearance: none; appearance: none; background: var(--glass-fill); border: 1px solid var(--glass-rule); border-radius: var(--r-md); color: var(--glass-ink); font-family: var(--display); font-size: 14px; font-weight: 700; text-overflow: ellipsis; cursor: pointer; } .dash-layer__select:hover { border-color: var(--glass-muted); } /* Firefox peint la liste deroulante avec le fond du select, translucide ici */ .dash-layer__select option { background: var(--glass-solid); color: var(--glass-ink); } .dash-layer__chev { position: absolute; top: 50%; right: 12px; width: 16px; height: 16px; transform: translateY(-50%); color: var(--glass-muted); pointer-events: none; } /* Echelle : information purement visuelle (aria-hidden dans index.html) */ .dash-legend__echelle { user-select: none; } .dash-legend .sf-legend-title { margin-bottom: 8px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--glass-muted); } /* 9 bandes nettes aux seuils par defaut (10/20/40/60 %), reecrites par buildLegend des que la configuration est lue. Couleurs metier en dur : elles portent l'ecart a la cible, pas la marque (22-CARTE-LIVE.md). */ .dash-legend .sf-legend-bar { height: 12px; border: 1px solid var(--glass-rule); border-radius: var(--r-sm); background: linear-gradient(to right, #e10600 0%, #e10600 20%, #ff9b00 20%, #ff9b00 30%, #ffbe00 30%, #ffbe00 40%, #ffed00 40%, #ffed00 45%, #209f00 45%, #209f00 55%, #00daff 55%, #00daff 60%, #0035ff 60%, #0035ff 70%, #6400ff 70%, #6400ff 80%, #f100ff 80%, #f100ff 100%); } /* Graduations posees sous leur borne : left en % ecrit par buildLegend, centrees, sauf les bornes d'axe alignees vers l'interieur. Les classes is-gauche / is-droite ecartent la tolerance de part et d'autre de la bande verte, is-masquee cache une paire qui en chevaucherait une autre. */ .dash-legend .sf-legend-scale { position: relative; height: 16px; margin-top: 4px; font-family: var(--mono); font-size: 10px; font-weight: 500; line-height: 16px; font-variant-numeric: tabular-nums; color: var(--glass-ink-soft); } .dash-legend .sf-legend-scale > span { position: absolute; top: 0; white-space: nowrap; transform: translateX(-50%); } .dash-legend .sf-legend-scale > :first-child, .dash-legend .sf-legend-scale > .is-droite { transform: none; } .dash-legend .sf-legend-scale > :last-child, .dash-legend .sf-legend-scale > .is-gauche { transform: translateX(-100%); } .dash-legend .sf-legend-scale > .is-masquee { visibility: hidden; } /* ---------- Box camera (glass, a gauche de la colonne de controles) ---------- Fermee : invisible (visibility retire ses boutons du parcours clavier), flux coupe par app.js ; elle apparait en fondu depuis la colonne. Ouverte : pleine taille. Reduite (.mini) : vignette sans tete qui continue de jouer ; un clic dessus la rouvre. Le