/* /editeur — l'éditeur de page perso (assets/editor.js). * * Direction (demande de la cliente) : enlever plutôt qu'ajouter. Un panneau * flottant et arrondi comme les pastilles de verre du site, écriture douce * (casse normale, graisses moyennes), beaucoup d'air, un seul geste par * réglage. Le noir franc est réservé à « Publier ». La page de l'artiste * occupe le reste, sur un plan neutre. * Barre et lecteur du site masqués : on édite, on n'écoute pas. * Chargée par toutes les pages (Barba ne recharge pas le ). */ html:has([data-barba-namespace="editor"]) .gx-top, html:has([data-barba-namespace="editor"]) .gx-dock { display: none !important; } html:has([data-barba-namespace="editor"]) { overflow: hidden; } .editor { --ink: #16161a; --ink-2: rgba(22, 22, 26, 0.56); --ink-3: rgba(22, 22, 26, 0.1); --soft: rgba(22, 22, 26, 0.05); --paper: #faf9f6; --blue: #0a84ff; --warn: #c0462c; --good: #2f8a55; --grot: "Archivo Sillon", "Helvetica Neue", Arial, sans-serif; --ease: cubic-bezier(0.34, 1.36, 0.5, 1); position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: 22rem minmax(0, 1fr); gap: 0.75rem; padding: 0.75rem; background: #e6e4df; color: var(--ink); font-family: var(--grot); font-stretch: 96%; } .editor *, .editor *::before, .editor *::after { box-sizing: border-box; } :where(.editor) :where(h1, h2, p, ul, figure) { margin: 0; } :where(.editor) :where(ul) { padding: 0; list-style: none; } :where(.editor) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } .editor h2 { font-family: var(--grot); letter-spacing: 0; } .editor [hidden] { display: none !important; } .editor svg { width: 1.125rem; height: 1.125rem; flex: none; } /* ---- Panneau flottant ---- */ .ed-panel { display: flex; flex-direction: column; min-height: 0; border-radius: 1.5rem; background: var(--paper); box-shadow: 0 1rem 2.5rem -1.25rem rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.04); overflow: hidden; } .ed-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1.25rem 1.25rem 0.5rem; } .ed-panel__body { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem 1.5rem 2.5rem; overscroll-behavior: contain; } .ed-switch { flex: 1; max-width: 11rem; } .ed-switch .ed-input { padding: 0.5rem 0.75rem; font-size: 0.875rem; } /* Pastille de retour : bien visible, en haut à gauche. */ .ed-pill { display: inline-flex !important; align-items: center; gap: 0.375rem; padding: 0.5625rem 1rem 0.5625rem 0.75rem !important; border-radius: 999px; background: #fff !important; box-shadow: 0 0.125rem 0.5rem -0.125rem rgba(0, 0, 0, 0.18), 0 0 0 1px var(--ink-3); color: var(--ink) !important; font: 600 0.9375rem/1 var(--grot) !important; text-decoration: none; transition: transform 0.3s var(--ease), box-shadow 0.2s; } .ed-pill:hover { box-shadow: 0 0.25rem 0.875rem -0.25rem rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(22, 22, 26, 0.2); } .ed-pill:active { transform: scale(0.97); } .ed-pill:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* ---- Accueil du panneau : une phrase, la liste ---- */ .ed-lead { padding: 0.25rem 0 0.5rem; font: 500 1.125rem/1.4 var(--grot); color: var(--ink); } .ed-hint { font: 450 0.9375rem/1.5 var(--grot); color: var(--ink-2); } .ed-hint--warn { color: var(--warn); } .ed-group { padding-top: 1.75rem; } .ed-group__title { padding: 0 0.75rem 0.5rem; font: 500 0.8125rem/1 var(--grot); color: var(--ink-2); } .ed-list { display: grid; gap: 0.25rem; margin: 0 !important; padding: 0 !important; } .ed-list li { margin: 0; padding: 0; } .ed-item { display: flex !important; align-items: center; justify-content: space-between; width: 100%; padding: 0.75rem 0.75rem !important; border-radius: 0.875rem; font: 500 1rem/1.25 var(--grot) !important; text-align: left; transition: background-color 0.15s; } .ed-item:hover { background: var(--soft) !important; } .ed-item:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; } .ed-item__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--blue); } /* ---- Réglages d'un élément ---- */ .ed-insp__title { padding-bottom: 1.25rem; font: 600 1.75rem/1.1 var(--grot); letter-spacing: -0.01em; } .ed-field { margin-top: 2rem; } .ed-label { display: flex; justify-content: space-between; margin-bottom: 0.75rem; font: 500 0.875rem/1 var(--grot); color: var(--ink-2); } .ed-label output { color: var(--ink); font-variant-numeric: tabular-nums; } .ed-note { margin-top: 0.75rem; font: 450 0.875rem/1.45 var(--grot); color: var(--ink-2); } .ed-note[data-kind="warn"] { color: var(--warn); } .ed-note[data-kind="ok"] { color: var(--good); } .ed-input { width: 100%; padding: 0.875rem 1rem; border: 0; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px var(--ink-3); color: var(--ink); font: 450 1rem/1.5 var(--grot); outline: none; transition: box-shadow 0.2s; } .ed-input:focus { box-shadow: 0 0 0 2px var(--ink); } .ed-input::placeholder { color: rgba(22, 22, 26, 0.35); } .ed-textarea { resize: vertical; min-height: 5rem; } /* Polices : chaque bouton écrit dans sa police. */ .ed-fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .ed-font { padding: 0.875rem 0.75rem !important; border-radius: 1rem; background: #fff !important; box-shadow: 0 0 0 1px var(--ink-3); font-size: 1rem !important; line-height: 1.1 !important; transition: box-shadow 0.2s; } .ed-font:hover { box-shadow: 0 0 0 1px rgba(22, 22, 26, 0.3); } .ed-font[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); } .ed-font:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* Curseur : un rail fin et doux, une pastille blanche. */ .ed-range { width: 100%; height: 1.75rem; margin: 0; background: none; cursor: pointer; appearance: none; -webkit-appearance: none; } .ed-range::-webkit-slider-runnable-track { height: 0.25rem; border-radius: 999px; background: rgba(22, 22, 26, 0.12); } .ed-range::-moz-range-track { height: 0.25rem; border-radius: 999px; background: rgba(22, 22, 26, 0.12); } .ed-range::-webkit-slider-thumb { -webkit-appearance: none; width: 1.375rem; height: 1.375rem; margin-top: -0.5625rem; border-radius: 50%; background: #fff; box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25), 0 0 0 1px var(--ink-3); } .ed-range::-moz-range-thumb { width: 1.375rem; height: 1.375rem; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25), 0 0 0 1px var(--ink-3); } .ed-range:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 999px; } /* Groupes de boutons (aperçu, alignement) */ .ed-seg { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: 999px; background: var(--soft); } .ed-seg button { display: grid !important; place-items: center; width: 2.75rem; height: 2.25rem; border-radius: 999px; color: var(--ink-2) !important; transition: background-color 0.2s, color 0.2s; } .ed-seg button:hover { color: var(--ink) !important; } .ed-seg button[aria-pressed="true"] { background: #fff !important; color: var(--ink) !important; box-shadow: 0 0.125rem 0.5rem -0.125rem rgba(0, 0, 0, 0.2); } .ed-seg button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; } /* Photo : on glisse dessus pour cadrer ; « Remplacer » posé sur l'image. */ .ed-photo { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 1.25rem; background: #fff; box-shadow: 0 0 0 1px var(--ink-3); cursor: crosshair; touch-action: none; user-select: none; } .ed-photo img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .ed-photo__point { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 1.5rem; height: 1.5rem; margin: -0.75rem 0 0 -0.75rem; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3); transition: transform 0.25s var(--ease); } .ed-photo[data-dragging] .ed-photo__point { transform: scale(1.3); } .ed-photo__replace { position: absolute; right: 0.75rem; bottom: 0.75rem; padding: 0.5625rem 1rem; border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0.25rem 0.75rem -0.25rem rgba(0, 0, 0, 0.35); font: 600 0.875rem/1 var(--grot); cursor: pointer; } .ed-photo__replace:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; } .ed-reset { display: inline-flex !important; align-items: center; gap: 0.5rem; margin-top: 2.5rem; color: var(--ink-2) !important; font: 500 0.9375rem/1 var(--grot) !important; transition: color 0.2s; } .ed-reset:hover { color: var(--warn) !important; } /* ---- Scène ---- */ .ed-stage { position: relative; display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; min-height: 0; } .ed-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; } .ed-toolbar .ed-seg { background: rgba(255, 255, 255, 0.7); } .ed-tools { display: flex; align-items: center; gap: 0.375rem; } .ed-icon { display: grid !important; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--ink) !important; transition: background-color 0.2s, opacity 0.2s; } .ed-icon:hover:not(:disabled) { background: rgba(255, 255, 255, 0.8) !important; } .ed-icon:disabled { opacity: 0.3; cursor: default; } .ed-icon:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; } /* État d'enregistrement : un point et un mot. */ .ed-save { display: inline-flex; align-items: center; gap: 0.4375rem; margin: 0 0.5rem 0 0.25rem; font: 500 0.875rem/1 var(--grot); color: var(--ink-2); } .ed-save i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: transparent; transition: background-color 0.3s; } .ed-save[data-state="pending"] i { background: #d8a13a; } .ed-save[data-state="saving"] i { background: #d8a13a; animation: ed-blink 1s ease-in-out infinite; } .ed-save[data-state="saved"] i { background: var(--good); } .ed-save[data-state="error"] { color: var(--warn); } .ed-save[data-state="error"] i { background: var(--warn); } @keyframes ed-blink { 50% { opacity: 0.3; } } .ed-publish { padding: 0.75rem 1.375rem !important; border-radius: 999px; background: var(--ink) !important; color: #fff !important; font: 600 0.9375rem/1 var(--grot) !important; transition: transform 0.3s var(--ease), background-color 0.2s; } .ed-publish:active:not(:disabled) { transform: scale(0.97); } .ed-publish:disabled { background: rgba(255, 255, 255, 0.7) !important; color: var(--ink-2) !important; cursor: default; } .ed-publish:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .ed-frame { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 1.5rem; background: rgba(255, 255, 255, 0.35); } .ed-frame iframe { position: absolute; border: 0; border-radius: 0.75rem; background: #fff; transform-origin: 0 0; box-shadow: 0 1.5rem 3rem -1.75rem rgba(0, 0, 0, 0.45); } .ed-frame[data-device="mobile"] iframe { border-radius: 2.5rem; box-shadow: 0 0 0 0.5rem #1b1b1f, 0 2rem 3rem -1rem rgba(0, 0, 0, 0.45); } .editor[data-state="loading"] .ed-frame::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.75rem; height: 1.75rem; margin: -0.875rem 0 0 -0.875rem; border-radius: 50%; border: 2px solid var(--ink-3); border-top-color: var(--ink); animation: ed-spin 0.9s linear infinite; } @keyframes ed-spin { to { rotate: 360deg; } } .ed-toast { position: absolute; left: 50%; bottom: 1.5rem; max-width: min(32rem, calc(100% - 2rem)); padding: 0.875rem 1.25rem; border-radius: 1rem; background: var(--ink); color: #fff; font: 500 0.9375rem/1.4 var(--grot); box-shadow: 0 1rem 2rem -1rem rgba(0, 0, 0, 0.5); translate: -50% 0; animation: ed-rise 0.4s var(--ease); } .ed-toast[data-kind="warn"] { background: var(--warn); } @keyframes ed-rise { from { opacity: 0; translate: -50% 0.75rem; } } /* ---- Écran étroit : l'aperçu passe dessous ---- */ @media (max-width: 900px) { html:has([data-barba-namespace="editor"]) { overflow: auto; } .editor { position: static; display: flex; flex-direction: column; min-height: 100svh; } .ed-panel__body { overflow: visible; } .ed-stage { min-height: 80svh; } } @media (prefers-reduced-motion: reduce) { .ed-save[data-state="saving"] i, .editor[data-state="loading"] .ed-frame::after, .ed-toast { animation: none; } } /* ---- Couronne de disques ---- */ .ed-note--first { margin: -0.5rem 0 1.25rem; } .ed-discs { display: grid; gap: 0.375rem; margin: 0 0 0.75rem !important; padding: 0 !important; list-style: none; } .ed-disc { display: grid; grid-template-columns: 1.25rem 3.25rem minmax(0, 1fr) auto; grid-template-areas: "n img text x" "n img fmt x"; align-items: center; gap: 0.375rem 0.625rem; padding: 0.5rem 0.5rem 0.5rem 0.625rem; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px var(--ink-3); } .ed-disc__n { grid-area: n; font: 600 0.8125rem/1 var(--grot); color: var(--blue); text-align: center; } .ed-disc__img { grid-area: img; width: 3.25rem; height: 3.25rem; object-fit: contain; } .ed-disc__text { grid-area: text; display: grid; gap: 0.1875rem; min-width: 0; align-self: end; } .ed-disc__fmt { grid-area: fmt; justify-self: start; align-self: start; } .ed-disc .ed-x { grid-area: x; } .ed-disc__text span, .ed-pick span span { overflow: hidden; font: 600 0.9375rem/1.15 var(--grot); text-overflow: ellipsis; white-space: nowrap; } .ed-disc__text small, .ed-pick small { overflow: hidden; font: 450 0.8125rem/1.2 var(--grot); color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; } .ed-seg--tiny { padding: 0.1875rem; } .ed-seg--tiny button { width: auto; height: 1.75rem; padding: 0 0.625rem !important; font: 600 0.75rem/1 var(--grot) !important; } .ed-x { display: grid !important; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--ink-2) !important; } .ed-x:hover { background: var(--soft) !important; color: var(--warn) !important; } .ed-x svg { width: 1rem; height: 1rem; } .ed-count { margin: 0.25rem 0 1rem; font: 450 0.8125rem/1.4 var(--grot); color: var(--ink-2); } .ed-add { display: flex !important; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.9375rem !important; border-radius: 1rem; border: 1.5px dashed rgba(10, 132, 255, 0.55) !important; background: rgba(10, 132, 255, 0.05) !important; color: var(--blue) !important; font: 600 1rem/1 var(--grot) !important; transition: background-color 0.2s; } .ed-add:hover:not(:disabled) { background: rgba(10, 132, 255, 0.1) !important; } .ed-add:disabled { border-color: var(--ink-3) !important; background: none !important; color: var(--ink-2) !important; cursor: default; } .ed-add:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .ed-picker { display: grid; gap: 0.75rem; } .ed-picker__list { display: grid; gap: 0.25rem; max-height: 22rem; overflow-y: auto; margin: 0 !important; padding: 0 !important; list-style: none; overscroll-behavior: contain; } .ed-picker__list li { margin: 0; } .ed-pick { display: grid !important; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; gap: 0.75rem; width: 100%; padding: 0.5rem !important; border-radius: 0.875rem; text-align: left; } .ed-pick:hover { background: var(--soft) !important; } .ed-pick:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; } .ed-pick img { width: 2.75rem; height: 2.75rem; border-radius: 0.5rem; object-fit: cover; } .ed-pick > span { display: grid; gap: 0.1875rem; min-width: 0; } .ed-reset--plain { margin-top: 0.25rem; justify-self: start; } /* Interrupteur */ .ed-toggle { display: flex !important; align-items: center; gap: 0.75rem; margin-top: 1.75rem; font: 500 0.9375rem/1.3 var(--grot) !important; text-align: left; } .ed-toggle__track { position: relative; flex: none; width: 2.75rem; height: 1.625rem; border-radius: 999px; background: rgba(22, 22, 26, 0.16); transition: background-color 0.25s; } .ed-toggle__track i { position: absolute; left: 0.1875rem; top: 0.1875rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #fff; box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.25); transition: translate 0.3s var(--ease); } .ed-toggle[aria-checked="true"] .ed-toggle__track { background: var(--good); } .ed-toggle[aria-checked="true"] .ed-toggle__track i { translate: 1.125rem 0; } .ed-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 0.5rem; } /* ---- Liste en accordéon : parties → sous-parties → éléments ---- * Tout est replié au départ. Dépliage à ressort (grille 0fr → 1fr, comme * les blocs de /login). Au retour d'un élément, son chemin se déplie et sa * ligne s'allume un instant (.is-last). */ .ed-tree { display: grid; gap: 0.375rem; margin-top: 1.25rem; } .ed-acc { border-radius: 1.125rem; transition: background-color 0.3s; } .ed-acc[data-open]:not(.ed-acc--sub) { background: rgba(255, 255, 255, 0.75); box-shadow: 0 0 0 1px var(--ink-3); } .ed-acc__head { display: flex !important; align-items: center; gap: 0.625rem; width: 100%; padding: 0.9375rem 1rem !important; border-radius: 1.125rem; text-align: left; transition: background-color 0.15s; } .ed-acc__head:hover { background: var(--soft) !important; } .ed-acc__head:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; } .ed-acc__name { flex: 1; font: 600 1.0625rem/1.2 var(--grot); } .ed-acc__mod { display: grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 0.375rem; border-radius: 999px; background: rgba(10, 132, 255, 0.12); color: var(--blue); font: 600 0.75rem/1 var(--grot); } .ed-acc__chev { width: 1rem !important; height: 1rem !important; color: var(--ink-2); transition: rotate 0.45s var(--ease); } .ed-acc[data-open] > .ed-acc__head .ed-acc__chev { rotate: 90deg; } .ed-acc__body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.45s var(--ease), opacity 0.25s; } .ed-acc[data-open] > .ed-acc__body { grid-template-rows: 1fr; opacity: 1; } .ed-acc__inner { min-height: 0; overflow: hidden; } .ed-acc:not(.ed-acc--sub) > .ed-acc__body > .ed-acc__inner { padding: 0 0.375rem; } .ed-acc:not(.ed-acc--sub)[data-open] > .ed-acc__body > .ed-acc__inner { padding-bottom: 0.375rem; } .ed-acc__inner .ed-item { padding-left: 1rem !important; } /* Sous-partie : un cran plus discrète, filet à gauche. */ .ed-acc--sub { margin: 0.125rem 0 0.125rem 0.625rem; border-left: 1.5px solid var(--ink-3); border-radius: 0 0.875rem 0.875rem 0; } .ed-acc--sub > .ed-acc__head { padding: 0.75rem 0.75rem !important; border-radius: 0 0.875rem 0.875rem 0; } .ed-acc--sub .ed-acc__name { font-size: 1rem; font-weight: 500; } .ed-acc--sub .ed-item { padding-left: 1.25rem !important; font-size: 0.9375rem !important; } /* D'où l'on revient. */ .ed-item.is-last { animation: ed-last 2.4s ease-out; } .ed-item.is-last::before { content: ""; width: 0.25rem; height: 1.125rem; margin-right: 0.5rem; border-radius: 999px; background: var(--blue); } .ed-item.is-last { justify-content: flex-start !important; } .ed-item.is-last .ed-item__dot { margin-left: auto; } @keyframes ed-last { 0%, 35% { background: rgba(10, 132, 255, 0.14); } 100% { background: transparent; } } /* Fil d'Ariane au-dessus du titre d'un élément. */ .ed-crumb { margin-bottom: 0.375rem; font: 500 0.875rem/1.3 var(--grot); color: var(--ink-2); } .ed-crumb + .ed-insp__title { padding-top: 0; } @media (prefers-reduced-motion: reduce) { .ed-acc__body, .ed-acc__chev { transition: none; } .ed-item.is-last { animation: none; } } /* ---- Plan de la couronne : les 14 places à leur vraie position ---- */ .ed-map { position: relative; /* Les disques débordent du cadre, comme sur la vraie page : pas de rognage, de la marge autour. */ margin: 0.5rem 0.75rem 1.5rem; border-radius: 1.25rem; background: #fff; box-shadow: 0 0 0 1px var(--ink-3); } .ed-map__text { position: absolute; display: grid; place-items: center; border-radius: 0.5rem; background: rgba(22, 22, 26, 0.04); font: 500 0.6875rem/1 var(--grot); color: rgba(22, 22, 26, 0.35); } .ed-spot { position: absolute; display: grid !important; place-items: center; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; transition: scale 0.3s var(--ease), box-shadow 0.2s, background-color 0.2s; } .ed-spot[data-state="free"] { border: 1.5px dashed rgba(22, 22, 26, 0.22) !important; background: rgba(22, 22, 26, 0.02) !important; } .ed-spot[data-state="free"]:hover { border-color: var(--blue) !important; background: rgba(10, 132, 255, 0.08) !important; } .ed-spot__plus { font: 300 1.125rem/1 var(--grot); color: rgba(22, 22, 26, 0.35); } .ed-spot[data-state="free"]:hover .ed-spot__plus { color: var(--blue); } .ed-spot img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; } .ed-spot__n { position: absolute; left: -2px; top: -2px; display: grid; place-items: center; min-width: 1.125rem; height: 1.125rem; border-radius: 999px; background: var(--blue); color: #fff; font: 600 0.625rem/1 var(--grot); } .ed-spot[data-state="mine"]:hover { scale: 1.06; } .ed-spot:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* Place mobile : petit point sous le disque. */ .ed-spot[data-mobile]::after { content: ""; position: absolute; bottom: -0.4375rem; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: rgba(22, 22, 26, 0.45); } /* Déplacement en cours : le disque choisi se soulève, les places attendent. */ .ed-spot[data-moving] { scale: 1.12; box-shadow: 0 0 0 3px var(--blue), 0 0.5rem 1rem -0.25rem rgba(0, 0, 0, 0.35); z-index: 1; } .ed-map[data-moving] .ed-spot:not([data-moving]) { animation: ed-wait 1.6s ease-in-out infinite; } @keyframes ed-wait { 50% { box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.25); } } .ed-map__hint { margin: 0 0 0.25rem; } .ed-legend { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; font: 450 0.8125rem/1 var(--grot); color: var(--ink-2); } .ed-legend i { width: 0.25rem; height: 0.25rem; border-radius: 50%; background: rgba(22, 22, 26, 0.45); } @media (prefers-reduced-motion: reduce) { .ed-map[data-moving] .ed-spot { animation: none; } }