/* BOSCANNA — Édition inline-on-click * Styles actifs uniquement quand a la classe .be-admin-mode. * Le crayon et le contour sont injectés en pseudo-éléments / outline, * sans modifier le flux du document. */ /* ───── Indicateurs hover (mode admin actif) ───── */ body.be-admin-mode [data-edit] { position: relative; cursor: text; transition: outline-color 0.15s ease, background-color 0.15s ease; outline: 1px dashed transparent; outline-offset: 4px; border-radius: 2px; } body.be-admin-mode [data-edit]:hover { outline-color: rgba(158, 183, 58, 0.6); /* tilleul foncé semi-transparent */ background-color: rgba(232, 240, 196, 0.25); /* tilleul clair très léger */ } body.be-admin-mode [data-edit]::after { content: ""; position: absolute; top: -10px; right: -10px; width: 22px; height: 22px; border-radius: 50%; background: #121612 url("data:image/svg+xml;utf8,") center/12px no-repeat; opacity: 0; transform: scale(0.6); transition: opacity 0.15s ease, transform 0.15s ease; pointer-events: none; z-index: 10; } body.be-admin-mode [data-edit]:hover::after { opacity: 1; transform: scale(1); } /* ───── État édition active ───── */ body.be-admin-mode [data-edit][contenteditable="true"] { outline: 2px solid #9eb73a; outline-offset: 4px; background-color: rgba(232, 240, 196, 0.35); cursor: text; caret-color: #121612; } body.be-admin-mode [data-edit][contenteditable="true"]::after { opacity: 0; /* on cache le crayon pendant l'édition */ } /* ───── État sauvegarde / erreur (drapeaux temporaires) ───── */ body.be-admin-mode [data-edit][data-be-state="saving"] { outline: 2px solid #b0b0a8; } body.be-admin-mode [data-edit][data-be-state="saved"] { outline: 2px solid #9eb73a; background-color: rgba(196, 214, 90, 0.2); } body.be-admin-mode [data-edit][data-be-state="error"] { outline: 2px solid #c14545; background-color: rgba(193, 69, 69, 0.08); } /* ───── Barre flottante "Mode édition" ───── */ .be-bar { position: fixed; top: 12px; right: 12px; z-index: 9999; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 16px; background: #121612; color: #fff; border-radius: 100px; font-family: "Outfit", system-ui, sans-serif; font-size: 0.78rem; letter-spacing: 0.04em; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); user-select: none; } .be-bar__dot { width: 8px; height: 8px; border-radius: 50%; background: #c4d65a; box-shadow: 0 0 0 0 rgba(196, 214, 90, 0.7); animation: be-pulse 2s infinite; } @keyframes be-pulse { 0% { box-shadow: 0 0 0 0 rgba(196, 214, 90, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(196, 214, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(196, 214, 90, 0); } } .be-bar__quit { background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; padding: 4px 10px; border-radius: 100px; font: inherit; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .be-bar__quit:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.6); } /* ───── Toast notification ───── */ .be-toast { position: fixed; bottom: 24px; right: 24px; z-index: 9999; padding: 10px 16px; background: #121612; color: #fff; border-radius: 6px; font-family: "Outfit", system-ui, sans-serif; font-size: 0.85rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } .be-toast.be-toast--show { opacity: 1; transform: translateY(0); } .be-toast--success { background: #9eb73a; } .be-toast--error { background: #c14545; } /* ───── Responsive ───── */ @media (max-width: 720px) { .be-bar { top: auto; bottom: 12px; right: 12px; left: 12px; justify-content: center; } body.be-admin-mode [data-edit]::after { width: 18px; height: 18px; top: -8px; right: -8px; } }