/* ===================================================================== website/shared/state-machine.css --------------------------------------------------------------------- Styles partagés pour le "Mon cristal" link (top-right) et les attributs data-state émis par la state-machine. Volontairement scopé minimal : - Le link `Mon cristal` se pose à gauche de `.top-right-pill` existant. - Aucune override globale ; on s'appuie sur les vars CSS définies dans les feuilles de dimension-* (--text-secondary / --text-primary). ===================================================================== */ :root { /* Fallback si la feuille hôte ne déclare pas --txt-outline */ --txt-outline-fallback: 0 0 1px rgba(0,0,0,0.95), 0 0 3px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.65), 0 2px 4px rgba(0,0,0,0.5); } /* --- Lien "Mon cristal" — top-right, à gauche de la pill 3D/2D ---- */ .mon-cristal-link { position: fixed; top: max(1rem, env(safe-area-inset-top)); /* La pill `.top-right-pill` est ancrée à right:1rem. On la positionne à gauche d'elle avec un offset confortable. Calcul approximatif : pill = ~92px large + 1rem padding right + gap. */ right: calc(max(1rem, env(safe-area-inset-right)) + 110px); z-index: 100; height: 32px; display: inline-flex; align-items: center; font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-weight: 400; font-size: 15px; letter-spacing: 0.01em; color: var(--text-secondary, #a0958c); text-decoration: none; text-shadow: var(--txt-outline, var(--txt-outline-fallback)); opacity: 0.75; cursor: pointer; user-select: none; transition: opacity 200ms cubic-bezier(0.16,1,0.3,1), color 200ms cubic-bezier(0.16,1,0.3,1); } .mon-cristal-link:hover, .mon-cristal-link:focus-visible { color: var(--text-primary, #f0e8e0); opacity: 1; outline: none; } @media (max-width: 480px) { .mon-cristal-link { font-size: 13px; /* Sur petit écran, la pill est plus compacte → on resserre l'offset */ right: calc(max(1rem, env(safe-area-inset-right)) + 92px); } } /* Caché tant qu'on n'a pas franchi le seuil (INTRO) — la state-machine stamp `data-state="..."` sur . */ body[data-state="INTRO"] .mon-cristal-link { opacity: 0; pointer-events: none; } /* --- Micro-shake feedback pour swipe interdit -------------------- */ @keyframes pep-state-shake { 0%, 100% { transform: translate3d(0,0,0); } 20% { transform: translate3d(-4px, 0, 0); } 40% { transform: translate3d(3px, 0, 0); } 60% { transform: translate3d(-2px, 0, 0); } 80% { transform: translate3d(2px, 0, 0); } } body.pep-shake-x #cristal-stage, body.pep-shake-x #cristal-canvas { animation: pep-state-shake 280ms cubic-bezier(0.36,0.07,0.19,0.97); }