/*
  Les cartes animées de la Home V4 (PRODUIT, 10/11/2026) — se pose APRÈS boucle.css, qu'il ne remplace pas.
  Contrat : <div class="hb" data-uck-carte="merge|summarize|memo|etape-ouvrir|etape-choisir|etape-continuer"></div>
  + boucle.css + ce fichier + /assets/handoff-boucle-v4/outils.mjs.
  Reprend la scène, la carte, l'en-tête, la pastille, le curseur d'écriture et le bouton pause de la boucle
  (.hb-stage, .hb-bg, .hb-card, .hb-head, .hb-badge, .hb-caret, .hb-toggle, variables --hb-*).
  N'ajoute que ce qui est propre à chaque carte, sous le préfixe .uc-. Aucun appel hors du site.
*/

/* Marque de chargement : etapes.mjs la lit pour savoir si cette feuille est déjà posée par la page. */
:root { --uck-outils-css: 1; }

/* ---------- Scène et carte : une seule hauteur pour les six cartes, à chaque largeur ---------- */

.hb.uc .hb-stage {
  --hb-fs: clamp(15px, calc(10px + 1.45cqi), 18px);
  aspect-ratio: 6 / 5;
  border-radius: clamp(16px, 4cqi, 28px);
}
@container hb (max-width: 400px) {
  .hb.uc .hb-stage { aspect-ratio: 4 / 5; }
}

.hb.uc .hb-bg { inline-size: 100%; block-size: 100%; }
.uc-rings { transform-box: view-box; transform-origin: 930px 80px; animation: uc-turn 80s linear infinite; }
@keyframes uc-turn { to { transform: rotate(360deg); } }

.hb.uc .hb-card {
  inset-block: 5% 52px;
  inset-inline: 5%;
  inline-size: auto;
  margin: 0;
  border-radius: 1.1em;
}

.hb.uc .hb-toggle { right: 10px; bottom: 8px; inline-size: 36px; block-size: 36px; }

.uc p, .uc ul { margin: 0; }
.uc-scene { position: absolute; inset: 0; display: flex; flex-direction: column; }
.uc-body { position: relative; flex: 1; min-block-size: 0; overflow: hidden; }

.hb.uc .hb-head { padding: .62em .95em; min-block-size: 3em; gap: .6em; }
.hb.uc .hb-head-name span { font-size: max(15px, .84em); }
.uc-logo { flex: none; inline-size: 1.75em; block-size: 1.75em; display: block; }
.hb.uc .uc-pill {
  margin-inline-start: auto;
  font: 700 max(15px, .82em)/1 HBDM, sans-serif; letter-spacing: 0;
  padding: .42em .75em;
  background: var(--hb-lavender); color: var(--hb-blue);
}
/* PRODUIT 12/11/2026 (demos-teintes, demande du LEAD) : l'étiquette d'outil prend la teinte de SON outil (couleurs.json « outils »), plus aucun citron :
   le citron est réservé à la sélection. Sans data-outil : lavande et bleu, la teinte de l'espace. test/demos-teintes.mjs contrôle CSS = JSON et le rendu. */
.hb.uc .uc-pill[data-outil=merge] { background: var(--uck-tool-merge-bg, #FAD3FF); color: var(--uck-tool-merge-ink, #7E2F96); }
.hb.uc .uc-pill[data-outil=summarize] { background: var(--uck-tool-summarize-bg, #B8E4FE); color: var(--uck-tool-summarize-ink, #0B5A7A); }

/* Texte qui s'écrit : la suite est réservée, transparente */
.uc-rest { color: transparent; }
.hb.uc .uc-caret { inline-size: .5em; block-size: 1.1em; }

/* ---------- Merge : trois chats glissent et se fondent en un premier message ---------- */

.uc-chats {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; gap: .55em;
  padding-inline: 1em;
}
.uc-chat {
  --uc-from: -1.6em;
  display: flex; align-items: center; gap: .6em;
  block-size: 3em; padding-inline: .7em;
  border-radius: .9em; background: #fff;
  box-shadow: inset 0 0 0 1px var(--hb-line), 0 .6em 1.2em -.8em rgba(38, 49, 83, .4);
  opacity: 0; transform: translateX(var(--uc-from));
}
.uc-chat:nth-child(2) { --uc-from: 1.6em; margin-inline-start: 1.4em; }
.uc-chat:nth-child(3) { margin-inline-start: .5em; }
.uc-chat.is-on { opacity: 1; transform: none; transition: opacity .4s ease, transform .55s cubic-bezier(.2, .8, .2, 1); }
.uc-chats.is-merging .uc-chat {
  opacity: 0;
  transform: translateY(var(--uc-to, 0)) scale(.55);
  transition: transform .6s cubic-bezier(.55, 0, .25, 1), opacity .3s ease .32s;
}
.uc-chats .uc-chat:nth-child(1) { --uc-to: 3.55em; }
.uc-chats .uc-chat:nth-child(3) { --uc-to: -3.55em; }

.uc-joint {
  position: absolute; left: 50%; top: 50%;
  inline-size: 1.2em; block-size: 1.2em; margin: -.6em 0 0 -.6em;
  border-radius: 50%; background: var(--hb-lime);
  box-shadow: 0 0 0 .3em color-mix(in srgb, var(--hb-blue) 22%, transparent);
  opacity: 0;
}
.uc-joint.is-on { animation: uc-pop .75s cubic-bezier(.2, 1.3, .3, 1) both; }
@keyframes uc-pop { 0% { opacity: 0; transform: scale(.2); } 35% { opacity: 1; transform: scale(1.35); } 100% { opacity: 0; transform: scale(2.2); } }

.uc-merged {
  position: absolute; inset: .9em 1em;
  display: flex; flex-direction: column; justify-content: center; gap: .55em;
  opacity: 0; transform: scale(.94);
}
.uc-merged.is-on { opacity: 1; transform: none; transition: opacity .4s ease, transform .55s cubic-bezier(.2, 1.1, .3, 1); }
.uc-merged-head { display: flex; align-items: center; gap: .55em; }
.uc-merged-head b { font-weight: 700; }
.uc-bubble {
  display: grid; gap: .35em;
  padding: .75em .95em;
  background: var(--hb-lavender);
  border-radius: 1.1em 1.1em .35em 1.1em;
  line-height: 1.42;
}
.uc-line-lead { font-weight: 600; }

/* ---------- Deux temps dans une carte (T3-B) : la scène de départ, puis le résultat ; elles se croisent (reprise de .hb-scene) ---------- */

.uc-phase {
  opacity: 0;
  transform: scale(.975) translateY(.6em);
  transition: opacity .22s ease, transform .4s ease;
  pointer-events: none;
}
.uc-phase.is-on {
  opacity: 1; transform: none;
  transition: opacity .42s ease .2s, transform .65s cubic-bezier(.2, .8, .2, 1) .2s;
}
/* Le document se DÉPOSE (grammaire du mouvement, §10.5) : il arrive un peu au-dessus du plan et se pose. */
.uc-phase-doc { transform: scale(1.06); transform-origin: 50% 30%; }
.uc-phase-doc.is-on { transform: none; transition: opacity .35s ease .2s, transform .7s cubic-bezier(.2, .9, .25, 1) .2s; }

/* Le titre du nouveau chat qui s'écrit (Merge) : les morceaux restent en ligne. */
.hb.uc .uc-title span { display: inline; font-size: inherit; overflow: visible; -webkit-line-clamp: none; }
.hb.uc .uc-title { min-block-size: 1.2em; }

/* Merge : le pied « Copy » sous le résultat. */
.uc-merge .uc-merged { inset-block-end: .4em; }
.uc-merged-head .uc-paste-icon { flex: none; inline-size: 1.75em; block-size: 1.75em; display: block; }

/* ---------- Summarize et Memo : une vraie longue conversation qui défile vite ---------- */

.uc-long {
  position: absolute; inset-inline: 1em; top: .9em;
  display: flex; flex-direction: column; gap: .5em;
  padding-block-end: 3.4em; /* la place du bouton de l'outil sous le dernier message */
  transform: translateY(var(--uc-scroll, 0px));
  will-change: transform;
}
.uc-long .uc-msg { opacity: 1; transform: none; font-size: .92em; }

.uc-action {
  position: absolute; right: .9em; bottom: .9em; z-index: 2;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .5em 1.05em .5em .5em; border-radius: 999px;
  background: var(--hb-blue); color: #fff;
  font: 700 max(15px, .95em)/1 HBDM, sans-serif; white-space: nowrap;
  box-shadow: 0 .8em 1.6em -.7em rgba(38, 49, 83, .75);
  opacity: 0; transform: translateY(.7em) scale(.92);
}
.uc-action-logo { flex: none; display: block; inline-size: 1.7em; block-size: 1.7em; border-radius: .5em; }
.uc-action.is-on { opacity: 1; transform: none; transition: opacity .25s ease, transform .45s cubic-bezier(.2, 1.3, .3, 1); }
.uc-action.is-pressed { transform: scale(.92); transition: transform .12s ease; }

/* Summarize : le résultat, court et lisible. */
.uc-short {
  position: absolute; inset: 1em 1.3em;
  display: flex; flex-direction: column; justify-content: center; gap: .8em;
  list-style: none; padding: 0;
  font-size: 1.08em;
}
.uc-short li {
  position: relative; padding-inline-start: 1.5em;
  line-height: 1.38;
  opacity: 0; transform: translateY(.6em);
}
.uc-short li::before {
  content: ''; position: absolute; left: .15em; top: .42em;
  inline-size: .6em; block-size: .6em; border-radius: 50%;
  background: var(--hb-lime); box-shadow: 0 0 0 2px var(--hb-blue);
}
.uc-short li.is-on { opacity: 1; transform: none; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }

/* ---------- Memo : un document, pas un chat ---------- */

.uc-doc {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; gap: .85em;
  padding: 1.15em 1.4em;
  background: #fff;
  overflow: hidden;
}
.uc-doc-title {
  display: flex; align-items: center; gap: .45em;
  margin: 0 0 .1em;
  padding-block-end: .55em;
  border-bottom: 2px solid var(--hb-lime);
  font: 700 1.3em/1.15 HBJakarta, sans-serif; letter-spacing: -.015em; color: var(--hb-ink);
}
.uc-doc-title .uc-logo { flex: none; inline-size: 1.1em; block-size: 1.1em; }
.uc-part { opacity: 0; transform: translateY(.6em); }
.uc-part.is-on { opacity: 1; transform: none; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.uc-part-h {
  display: flex; align-items: center; gap: .5em;
  margin-block-end: .3em;
  font: 700 max(15px, .92em)/1.2 HBDM, sans-serif; color: var(--hb-ink);
}
.uc-tick {
  flex: none; inline-size: 1.3em; block-size: 1.3em; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--hb-line); background: #fff; color: transparent;
}
.uc-tick svg { inline-size: .8em; block-size: .8em; }
.uc-part.is-done .uc-tick {
  background: var(--hb-lime); border-color: var(--hb-lime); color: var(--hb-ink);
  animation: uc-tick .45s cubic-bezier(.2, 1.4, .3, 1) both;
}
@keyframes uc-tick { from { transform: scale(.5); } to { transform: none; } }
.uc-part ul { list-style: none; padding: 0 0 0 1.8em; display: grid; gap: .15em; }
.uc-part li { position: relative; line-height: 1.38; color: var(--hb-ink); }
.uc-part li::before { content: '·'; position: absolute; left: -.7em; font-weight: 700; color: var(--hb-blue); }
/* Carte large : le résultat et le document prennent la place qu'on leur a rendue (un cadre de moins). */
@container hb (min-width: 401px) {
  .uc-short { font-size: 1.15em; }
  .uc-doc { font-size: 1.08em; }
}

/* ---------- Étape 1 : un chat ouvert, le U de l'extension s'allume, on clique ---------- */

/* La barre du navigateur, sobre (étapes 1 et 3) : trois points, un champ d'adresse vide, le U et la pièce de puzzle. */
.uc-browser {
  flex: none;
  display: flex; align-items: center; gap: .55em;
  padding: .5em .75em;
  background: #F3F4FA;
  border-bottom: 1px solid var(--hb-line);
}
.uc-dots { flex: none; display: flex; gap: .32em; }
.uc-dots i { inline-size: .62em; block-size: .62em; border-radius: 50%; background: #D5D9EA; }
.uc-url {
  flex: 1; min-inline-size: 0;
  display: flex; align-items: center;
  block-size: 1.9em; padding-inline: .6em;
  border-radius: 999px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--hb-line);
  color: #8A91AD;
}
.uc-url svg { inline-size: .9em; block-size: .9em; }
.uc-ext {
  flex: none;
  display: grid; place-items: center;
  inline-size: 2.1em; block-size: 2.1em; border-radius: .7em;
  transition: transform .15s ease, background-color .3s ease;
}
.uc-ext-logo { display: block; inline-size: 1.75em; block-size: 1.75em; border-radius: .5em; box-shadow: 0 .15em .4em -.1em rgba(38, 49, 83, .35); }
.uc-ext.is-lit { background: #fff; animation: uc-glow 1.8s ease-in-out infinite; }
.uc-ext.is-pressed { transform: scale(.88); }
@keyframes uc-glow {
  0%, 100% { box-shadow: 0 0 0 .16em var(--hb-blue), 0 0 0 .4em color-mix(in srgb, var(--hb-lime) 90%, transparent); }
  50% { box-shadow: 0 0 0 .16em var(--hb-blue), 0 0 0 .62em color-mix(in srgb, var(--hb-lime) 55%, transparent); }
}
.uc-puzzle {
  flex: none;
  display: grid; place-items: center;
  inline-size: 2.1em; block-size: 2.1em; border-radius: .7em;
  color: var(--hb-ink);
}
.uc-puzzle svg { inline-size: 1.6em; block-size: 1.6em; }

.uc-thread { position: relative; display: flex; flex-direction: column; gap: .5em; padding: .8em 1em; }
.uc-msg { max-inline-size: 90%; line-height: 1.4; opacity: 0; transform: translateY(.6em); }
.uc-msg.is-on { opacity: 1; transform: none; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.uc-msg-user { align-self: flex-end; background: var(--hb-lavender); border-radius: 1.1em 1.1em .35em 1.1em; padding: .5em .85em; }
.uc-msg-ai { align-self: flex-start; background: #F3F4FA; border-radius: 1.1em 1.1em 1.1em .35em; padding: .5em .85em; }

/* NOTE D'INCIDENT (BANC/EXTENSION/QUALITÉ 11/11) : le panneau couvrait la 1re bulle (« Should we test the soil before the fe… » à 1440).
   Il se pose sur l'en-tête du chat, qu'il répète (« ChatGPT · Community garden »), jamais sur le fil ; une bulle qui ne tient pas entière
   dans la fenêtre du chat est retirée (.uc-hors, posé par outils.mjs), jamais coupée. */
.uc-head-zone { position: relative; flex: none; z-index: 2; }
.uc-msg.uc-hors { visibility: hidden; }
/* Le panneau ouvert reprend le nom du chat : l'en-tête (pastille et nom) s'efface dessous, au lieu d'y paraître coupé. */
.uc-head-zone > .hb-head > * { transition: opacity .25s ease; }
.uc-head-zone:has(> .uc-panel.is-on) > .hb-head > * { opacity: 0; }
.uc-panel {
  position: absolute; top: .3em; right: .7em;
  max-inline-size: calc(100% - 1.4em);
  display: flex; align-items: center; gap: .6em;
  padding: .75em 1em .75em .8em;
  background: #fff; border-radius: 1em;
  box-shadow: 0 0 0 1px var(--hb-line), 0 1.2em 2.4em -1em rgba(38, 49, 83, .55);
  opacity: 0; transform: translateY(-.7em) scale(.95); transform-origin: 100% 0;
}
.uc-panel.is-on { opacity: 1; transform: none; transition: opacity .3s ease, transform .55s cubic-bezier(.2, 1.2, .3, 1); }
.uc-panel .uc-logo { inline-size: 2em; block-size: 2em; }

/* ---------- Étape 2 : Handoff se choisit, puis la confirmation à 1 task ---------- */

.uc-tools { list-style: none; padding: .7em .8em; display: grid; gap: .25em; }
.uc-tool {
  display: flex; align-items: center; gap: .7em;
  block-size: 2.35em; padding-inline: .8em;
  border-radius: .8em;
  font-weight: 600;
  opacity: 0; transform: translateY(.4em);
}
.uc-tool.is-on { opacity: 1; transform: none; transition: opacity .3s ease, transform .45s ease, background-color .3s ease, color .3s ease; }
.uc-tool svg { flex: none; inline-size: 1.2em; block-size: 1.2em; color: var(--hb-blue); }
.uc-check {
  margin-inline-start: auto; inline-size: 1.45em; block-size: 1.45em; border-radius: 50%;
  display: grid; place-items: center; background: var(--hb-lime);
  opacity: 0; transform: scale(.4);
}
.uc-tool .uc-check svg { inline-size: .85em; block-size: .85em; color: var(--hb-ink); }
.uc-tool.is-selected { background: var(--hb-blue); color: #fff; }
.uc-tool.is-selected > svg { color: #fff; }
.uc-tool.is-selected .uc-check { opacity: 1; transform: none; transition: opacity .3s ease, transform .45s cubic-bezier(.2, 1.4, .3, 1); }

.uc-foot {
  flex: none; display: flex; justify-content: flex-end;
  padding: .7em .9em .85em;
  border-top: 1px solid var(--hb-line);
  opacity: 0; transform: translateY(.6em);
}
.uc-foot.is-on { opacity: 1; transform: none; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.uc-confirm {
  border-radius: 999px; padding: .75em 1.3em;
  background: var(--hb-blue); color: #fff;
  font: 700 max(15px, .95em)/1 HBDM, sans-serif; white-space: nowrap;
  box-shadow: 0 .7em 1.4em -.7em rgba(68, 88, 172, .8);
  transition: transform .18s ease, background-color .25s ease, color .25s ease;
}
.uc-confirm.is-pressed { transform: scale(.94); }
.uc-confirm.is-done { background: var(--hb-lime); color: var(--hb-ink); }

/* ---------- Étape 3 : le Handoff collé dans un nouveau chat, l'IA répond ---------- */

.uc-thread-new { padding-block-end: 1em; }
.uc-paste {
  display: flex; align-items: center; gap: .6em;
  padding: .5em .8em .5em .5em;
  background: var(--hb-lavender); border-radius: 1em;
  min-inline-size: 0;
}
.uc-paste b { font-weight: 600; font-size: max(15px, .92em); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.uc-paste-icon { flex: none; inline-size: 2em; block-size: 2em; display: block; }
.uc-paste-sent { align-self: flex-end; max-inline-size: 94%; border-radius: 1em 1em .35em 1em; opacity: 0; transform: translateY(.7em); }
.uc-paste-sent.is-on { opacity: 1; transform: none; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.uc-reply { max-inline-size: 96%; line-height: 1.45; opacity: 0; }
.uc-reply.is-on { opacity: 1; transition: opacity .2s ease; }

.uc-composer { position: relative; flex: none; padding: 0 .85em .85em; }
.uc-field {
  display: flex; align-items: center; gap: .5em;
  min-block-size: 3.3em;
  padding: .4em .4em .4em .75em;
  border-radius: 1.1em; background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--hb-line);
}
.uc-field.is-focus { box-shadow: inset 0 0 0 2px var(--hb-blue), 0 0 0 .3em color-mix(in srgb, var(--hb-blue) 14%, transparent); transition: box-shadow .25s ease; }
.uc-slot { position: relative; flex: 1; min-inline-size: 0; min-block-size: 2.5em; display: flex; align-items: center; }
.uc-textcaret { inline-size: 2px; block-size: 1.2em; background: var(--hb-ink); opacity: 0; }
.uc-field.is-focus .uc-textcaret { opacity: 1; animation: uc-blink 1s steps(1) infinite; }
.uc-field.is-filled .uc-textcaret { display: none; }
@keyframes uc-blink { 50% { opacity: 0; } }
.uc-paste-field {
  position: absolute; inset-inline: 0; top: 50%; translate: 0 -50%;
  padding: .35em .6em .35em .35em;
  opacity: 0; transform: scale(.96);
}
.uc-paste-field .uc-paste-icon { inline-size: 1.75em; block-size: 1.75em; }
.uc-field.is-filled .uc-paste-field { opacity: 1; transform: none; transition: opacity .3s ease, transform .4s cubic-bezier(.2, 1.3, .3, 1); }
.uc-send {
  flex: none; inline-size: 2.4em; block-size: 2.4em; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--hb-lavender); color: var(--hb-muted);
  transition: transform .15s ease;
}
.uc-send svg { inline-size: 1.1em; block-size: 1.1em; }
.uc-field.is-filled .uc-send { background: var(--hb-ink); color: #fff; transition: background-color .25s ease, color .25s ease; }
.uc-send.is-pressed { transform: scale(.88); }
.uc-chip {
  position: absolute; left: 1.4em; bottom: calc(100% - .55em);
  display: inline-flex; align-items: center; gap: .45em;
  padding: .4em .65em .4em .45em; border-radius: .7em;
  background: var(--hb-ink); color: #fff;
  font: 600 max(15px, .8em)/1 HBDM, sans-serif; white-space: nowrap;
  box-shadow: 0 .6em 1.2em -.6em rgba(38, 49, 83, .6);
  opacity: 0; transform: translateY(.4em) scale(.9);
}
.uc-chip kbd { font: 700 1em/1 HBDM, sans-serif; background: rgba(255, 255, 255, .16); border-radius: .35em; padding: .25em .4em; }
.uc-chip.is-on { opacity: 1; transform: none; transition: opacity .2s ease, transform .35s cubic-bezier(.2, 1.4, .3, 1); }

/* Carte étroite (téléphone) : le titre du Handoff passe sur deux lignes plutôt que d'être coupé. */
@container hb (max-width: 400px) {
  .hb.uc .hb-head { padding-inline: .8em; gap: .5em; }
  .hb.uc .uc-pill { padding-inline: .6em; }
  .uc-paste b { white-space: normal; line-height: 1.22; }
  .uc-slot { min-block-size: 3.1em; }
  /* BANC 11/11 (poses de langue, rééquilibrage LEAD 11:3x UTC), défaut d'affichage seul : à 390, la pastille DE « Chats
     zusammengeführt » dépassait la carte (328 > 322 px, coupée des deux côtés) et le titre « Zusammenfassung · Gemeinschaftsgarten »
     de 4 px. La pastille se borne à la carte et passe sur deux lignes si besoin ; le titre (.hb-head-name b) coupe un mot long, avec trait d’union là où la langue le permet. Un texte qui tient
     sur une ligne (EN, FR, ES) ne bouge pas. */
  .hb.uc .hb-fresh-pill { max-inline-size: calc(100cqi - 1.5em); white-space: normal; line-height: 1.12; }
  .hb.uc .hb-head-name b { hyphens: auto; overflow-wrap: anywhere; }
}

/* ---------- Merge : le badge final « Chats merged » (Kevin, priorité 1, via LEAD 10/11 17:4x) ----------
   Le badge de la boucle Handoff (.hb-fresh, .hb-fresh-pill, .hb-burst de boucle.css : même pastille, même gerbe, même
   arrivée), posé sur le champ du nouveau chat, que le badge remplace : le champ s'efface, comme .hb-scene-new.is-won. */
.uc-scene.is-won .uc-composer { opacity: 0; transform: translateY(.4em) scale(.98); transition: opacity .3s ease, transform .4s ease; }
/* Même taille que dans la carte Handoff de la Home (15 px de base, alors que la scène Merge monte à 18 px), centré sur le champ. */
.hb.uc .uc-fresh { font-size: 15px; bottom: calc(2.5 * var(--hb-fs)); }

/* ---------- Le curseur fin, avec un anneau au clic ---------- */

.uc-cursor {
  position: absolute; left: 0; top: 0; z-index: 5;
  inline-size: 0; block-size: 0;
  opacity: 0; transition: opacity .25s ease;
  will-change: transform;
}
.uc-cursor.is-on { opacity: 1; }
.uc-cursor svg {
  position: absolute; left: -2px; top: -1px;
  inline-size: 1.6em; block-size: 1.6em;
  filter: drop-shadow(0 .15em .3em rgba(38, 49, 83, .35));
  transform-origin: 2px 1px; transition: transform .14s ease;
}
.uc-cursor.is-click svg { transform: scale(.86); }
.uc-cursor-ring {
  position: absolute; left: -1.4em; top: -1.4em;
  inline-size: 2.8em; block-size: 2.8em; border-radius: 50%;
  border: 3px solid var(--hb-blue);
  background: color-mix(in srgb, var(--hb-lime) 45%, transparent);
  opacity: 0;
}
.uc-cursor.is-click .uc-cursor-ring { animation: uc-ring .55s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes uc-ring { 0% { opacity: 0; transform: scale(.2); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }

/* ---------- Pause : tout ce qui tourne seul s'arrête aussi ---------- */

/* Train 5 (QUALITÉ 10/11 17:3x, WCAG 2.2.2) : la pause fige TOUT mouvement de la carte, pas une liste à tenir. */
.hb.uc.is-paused *, .hb.uc.is-paused *::before, .hb.uc.is-paused *::after { animation-play-state: paused !important; }

/* ---------- Mouvement réduit : l'image finale, fixe ---------- */

@media (prefers-reduced-motion: reduce) {
  .hb.uc *, .hb.uc *::before, .hb.uc *::after { transition: none !important; animation: none !important; }
  .hb.uc .hb-toggle, .uc-cursor { display: none; }
}