/* ========================================================================= LS COMPASS — feuille de style, jour et nuit Une seule règle compte vraiment : les deux calques occupent exactement le même carré, en `position:absolute; inset:0`. C'est ce qui met l'axe de rotation au centre. Toute règle de positionnement ajoutée sur les décale l'axe et l'aiguille part en vrille. Le thème a trois états, et le CSS les couvre tous les trois : - pas d'attribut sur → on suit le système ; - data-theme="clair" → jour forcé (le bouton) ; - data-theme="sombre" → nuit forcée (le bouton). Chaque règle de jour existe donc deux fois : une sous l'attribut, une sous prefers-color-scheme gardée par :not([data-theme]) — sans la garde, un visiteur en système clair qui force la nuit garderait le rendu de jour. ========================================================================= */ .ls-compass { --ls-compass-size: 80px; position: relative; display: inline-block; width: var(--ls-compass-size); height: var(--ls-compass-size); flex: 0 0 var(--ls-compass-size); line-height: 0; isolation: isolate; } .ls-compass__base, .ls-compass__pointer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; } /* transform-origin au centre : l'image de l'aiguille est un carré avec du vide autour, et ce vide est l'axe. Ne jamais la recadrer. */ .ls-compass__pointer { transform: rotate(0deg); transform-origin: 50% 50%; will-change: transform; } /* ── Tailles d'usage ───────────────────────────────────────────────────── À adapter. Le clamp() évite une boussole de timbre-poste sur mobile et une roue de charrette sur grand écran. */ .ls-compass--barre { --ls-compass-size: clamp(38px, 4vw, 46px); } .ls-compass--titre { --ls-compass-size: clamp(64px, 12vw, 104px); } .ls-compass--filigrane{ --ls-compass-size: min(62vw, 540px); } /* ── Jour : l'or pâle sur fond clair ───────────────────────────────────── Le PNG est le même dans les deux régimes. Sur fond clair on ferme un peu la lumière et on ouvre la saturation, pour que l'or tienne par le contraste et non par la force. */ :root[data-theme="clair"] .ls-compass { filter: brightness(.85) saturate(1.15); } @media (prefers-color-scheme: light) { :root:not([data-theme]) .ls-compass { filter: brightness(.85) saturate(1.15); } } /* ── Filigrane : la boussole géante derrière le texte ──────────────────── Fixe, centrée, sous tout le reste. De nuit, presque invisible ; de jour il faut plus d'opacité ET l'assombrir, sinon l'or se dissout dans le blanc — leçon apprise sur la proposition NX. */ .ls-compass--filigrane { position: fixed; left: 50%; top: 54%; z-index: 0; transform: translate(-50%, -50%); opacity: .055; } :root[data-theme="clair"] .ls-compass--filigrane { opacity: .14; filter: brightness(.62) saturate(1.25); } @media (prefers-color-scheme: light) { :root:not([data-theme]) .ls-compass--filigrane { opacity: .14; filter: brightness(.62) saturate(1.25); } } /* ═════════════════════════════════════════════════════════════════════════ BOUTON JOUR / NUIT Créé par ls-theme.js (ou balisé à la main avec data-ls-theme-toggle). Rond, flottant en haut à droite ; soleil la nuit, lune le jour — l'icône montre où l'on va, pas où l'on est. Les couleurs passent par des jetons avec repli, pour que le bouton tienne debout hors de tout design system. ═════════════════════════════════════════════════════════════════════════ */ :root { --lst-fond: rgba(10, 12, 17, .72); --lst-trait: rgba(206, 160, 62, .42); --lst-icone: #eed59f; --lst-top: 14px; --lst-droite: clamp(12px, 3vw, 20px); } :root[data-theme="clair"] { --lst-fond: rgba(255, 255, 255, .78); --lst-trait: rgba(139, 95, 13, .5); --lst-icone: #8b5f0d; } @media (prefers-color-scheme: light) { :root:not([data-theme]) { --lst-fond: rgba(255, 255, 255, .78); --lst-trait: rgba(139, 95, 13, .5); --lst-icone: #8b5f0d; } } .ls-theme-btn { position: fixed; top: var(--lst-top); right: var(--lst-droite); z-index: 95; width: 42px; height: 42px; padding: 0; border-radius: 999px; display: grid; place-items: center; cursor: pointer; background: var(--lst-fond); border: 1px solid var(--lst-trait); color: var(--lst-icone); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .18s ease, border-color .18s ease; } .ls-theme-btn:hover { transform: translateY(-1px); } .ls-theme-btn:focus-visible { outline: 2px solid var(--lst-icone); outline-offset: 3px; } .ls-theme-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } /* Nuit effective : on propose le soleil. Jour effectif : la lune. */ .ls-theme-btn .lst-lune { display: none; } :root[data-theme="clair"] .ls-theme-btn .lst-lune { display: block; } :root[data-theme="clair"] .ls-theme-btn .lst-soleil { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .ls-theme-btn .lst-lune { display: block; } :root:not([data-theme]) .ls-theme-btn .lst-soleil { display: none; } } /* ── Accessibilité et impression ───────────────────────────────────────── Mouvement réduit : le cadran reste, l'aiguille se fige au nord. Sur papier, ni filigrane ni bouton — le papier n'a qu'un seul régime. */ @media (prefers-reduced-motion: reduce) { .ls-compass__pointer { transform: rotate(0deg) !important; will-change: auto; } .ls-theme-btn { transition: none; } .ls-theme-btn:hover { transform: none; } } @media print { .ls-compass { filter: none !important; } .ls-compass--filigrane, .ls-theme-btn { display: none !important; } }