/* Cloche de suivi : composant autonome, à gauche du bookmark. */
.ts-hero-copy > .studio-follow-bell, .td-photo-frame > .studio-follow-bell { position:absolute; top:0; right:75px; z-index:3; display:block; width:50px; height:50px; margin:0; padding:0; border:0; background:transparent; cursor:pointer; }
.studio-follow-bell__button { position:relative; display:block; width:50px; height:50px; margin:0; padding:0; border:0; background:transparent; cursor:pointer; opacity:.8; }
.studio-follow-bell__shape { position:absolute; top:0; left:8px; width:34px; transform:translateY(-42px); transition:translate .2s ease; pointer-events:none; }
.studio-follow-bell__swing { display:block; width:100%; height:auto; overflow:visible; transform-origin:50% 0; }
.studio-follow-bell__body,.studio-follow-bell__clapper { fill:#999894; transition:fill .25s ease; }
.studio-follow-bell__loop { stroke:#999894; transition:stroke .25s ease; }
.studio-follow-bell[data-following="true"] .studio-follow-bell__shape { transform:translateY(-25px); }
.studio-follow-bell[data-following="true"] .studio-follow-bell__body,.studio-follow-bell[data-following="true"] .studio-follow-bell__clapper { fill:var(--st-accent, #d84040); }
.studio-follow-bell[data-following="true"] .studio-follow-bell__loop { stroke:var(--st-accent, #d84040); }
@media(hover:hover){.studio-follow-bell:hover .studio-follow-bell__shape { translate:0 4px; }}
.studio-follow-bell:focus-visible { outline:2px solid var(--st-accent, #d84040); outline-offset:-2px; }
.studio-follow-bell.is-peeking .studio-follow-bell__shape { animation:studio-follow-peek 1.1s ease-in-out; }
.studio-follow-bell.is-adding .studio-follow-bell__shape { animation:studio-follow-fall .45s ease-out; }
.studio-follow-bell.is-removing .studio-follow-bell__shape { animation:studio-follow-rise .4s ease-in-out; }
.studio-follow-bell.is-adding .studio-follow-bell__swing { animation:studio-follow-ring 1s ease-out; }
@keyframes studio-follow-peek { 0%,100%{transform:translateY(-42px)} 40%{transform:translateY(-20px)} 55%{transform:translateY(-23px)} }
@keyframes studio-follow-fall { 0%{transform:translateY(-42px)} 70%{transform:translateY(-11px)} 100%{transform:translateY(-25px)} }
@keyframes studio-follow-rise { 0%{transform:translateY(-25px)} 30%{transform:translateY(-11px)} 100%{transform:translateY(-42px)} }
@keyframes studio-follow-ring { 0%,100%{transform:rotate(0)} 20%{transform:rotate(14deg)} 40%{transform:rotate(-10deg)} 60%{transform:rotate(6deg)} 80%{transform:rotate(-3deg)} }
@media(prefers-reduced-motion:reduce){.studio-follow-bell__shape,.studio-follow-bell__swing { animation:none!important; transition:none!important; }}

/* La cloche et le bookmark partagent le cadre du tatouage. */
.td-photo-frame { position:relative; }
.td-photo-frame > .studio-follow-bell { right:75px; }