/*
  Handoff, la boucle — composant animé autonome (PRODUIT, 10/11/2026, v3 après les retouches de Kevin de 14:28).
  Contrat : <div class="hb" data-handoff-boucle="…"></div> + ce fichier + /assets/handoff-boucle-v4/boucle.mjs.
  Variantes animées : vitals, reprise, switch, complete, court. Images fixes : etape-chat, etape-choix, etape-nouveau.
  Aucun appel hors du site.
*/

@font-face { font-family: HBJakarta; font-weight: 700; font-display: swap; src: url('/_home-v4/assets/plus-jakarta-sans-700.ttf') format('truetype'); }
@font-face { font-family: HBDM; font-weight: 400; font-display: swap; src: url('/_home-v4/assets/dm-sans-400.ttf') format('truetype'); }
@font-face { font-family: HBDM; font-weight: 500; font-display: swap; src: url('/_home-v4/assets/dm-sans-500.ttf') format('truetype'); }
@font-face { font-family: HBDM; font-weight: 600; font-display: swap; src: url('/_home-v4/assets/dm-sans-600.ttf') format('truetype'); }
@font-face { font-family: HBDM; font-weight: 700; font-display: swap; src: url('/_home-v4/assets/dm-sans-700.ttf') format('truetype'); }
@font-face { font-family: HBMono; font-weight: 400; font-display: swap; src: url('/assets/polices/jetbrainsmono-v24-tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTOlOV.woff2') format('woff2'); }

.hb {
  --hb-blue: #4458AC;
  --hb-ink: #263153;
  --hb-lavender: #EEF0FC;
  --hb-lime: #E4EE99;
  --hb-muted: #5C6480;
  --hb-paper: #FCFCFF;
  --hb-line: color-mix(in srgb, var(--hb-blue) 14%, #fff);
  position: relative;
  display: block;
  inline-size: 100%;
  container-type: inline-size;
  container-name: hb;
  font-family: HBDM, 'DM Sans', Arial, sans-serif;
  color: var(--hb-ink);
  -webkit-font-smoothing: antialiased;
}

.hb *, .hb *::before, .hb *::after { box-sizing: border-box; }
.hb p { margin: 0; }

.hb-sr {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

/* ---------- La scène : gradient V4 et formes à nous (anneaux, U, fils qui se rejoignent) ---------- */

.hb-stage {
  --hb-fs: clamp(15px, calc(8px + 1cqi), 20px);
  position: relative;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: clamp(18px, 3cqi, 36px);
  isolation: isolate;
  font-size: var(--hb-fs);
  background:
    radial-gradient(55% 60% at 4% 96%, color-mix(in srgb, var(--hb-lime) 78%, transparent) 0%, transparent 70%),
    linear-gradient(158deg, var(--hb-lavender) 0%, color-mix(in srgb, var(--hb-blue) 26%, var(--hb-lavender)) 40%, color-mix(in srgb, var(--hb-blue) 74%, var(--hb-lavender)) 78%, color-mix(in srgb, var(--hb-blue) 70%, var(--hb-ink)) 100%);
}
.hb[data-handoff-boucle="vitals"] .hb-stage,
.hb[data-handoff-boucle="reprise"] .hb-stage,
.hb[data-handoff-boucle="switch"] .hb-stage { aspect-ratio: 4 / 3; }
.hb[data-handoff-boucle="court"] .hb-stage { aspect-ratio: 16 / 10; }

@container hb (max-width: 520px) {
  .hb-stage { aspect-ratio: 10 / 15; }
  .hb[data-handoff-boucle="vitals"] .hb-stage,
  .hb[data-handoff-boucle="reprise"] .hb-stage,
  .hb[data-handoff-boucle="switch"] .hb-stage,
  .hb[data-handoff-boucle="court"] .hb-stage { aspect-ratio: 10 / 13; }
}

.hb-bg { position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; pointer-events: none; }
.hb-bg .hb-rings { transform-box: view-box; transform-origin: 1480px 110px; animation: hb-turn 70s linear infinite; }
.hb-bg .hb-thread-line { stroke-dasharray: 14 10; animation: hb-flow 9s linear infinite; }
@keyframes hb-turn { to { transform: rotate(360deg); } }
@keyframes hb-flow { to { stroke-dashoffset: -240; } }

/* ---------- La carte blanche ---------- */

.hb-card {
  position: absolute;
  inset-block: 7% 9%;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: min(90%, 44em);
  background: #fff;
  border-radius: 1.3em;
  box-shadow: 0 0 0 .45em rgba(255, 255, 255, .38), 0 1.6em 3.6em -1.4em rgba(38, 49, 83, .45), 0 .2em .6em rgba(38, 49, 83, .08);
  overflow: hidden;
}

@container hb (max-width: 520px) {
  /* 10/11 : le bas gardait 64 px pour le bouton pause, retiré : la carte se pose au milieu de la scène. */
  .hb-card { inset-block: 4.5%; inline-size: 92%; border-radius: 1.1em; }
}

.hb-scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0;
  transform: scale(.975) translateY(.6em);
  /* Sortie rapide, entrée un peu après : les scènes se croisent sans se superposer. */
  transition: opacity .22s ease, transform .4s ease;
  pointer-events: none;
}
.hb-scene.is-on {
  opacity: 1; transform: none;
  transition: opacity .42s ease .2s, transform .65s cubic-bezier(.2, .8, .2, 1) .2s;
}
.hb-scene-doc { transform: scale(.9); transform-origin: 50% 40%; }
.hb-scene-doc.is-on { transform: none; }

.hb-head {
  flex: none;
  display: flex; align-items: center; gap: .65em;
  padding: .85em 1.15em;
  border-bottom: 1px solid var(--hb-line);
  min-block-size: 3.4em;
}
.hb-head-name { display: flex; flex-direction: column; line-height: 1.2; min-inline-size: 0; }
.hb-head-name b { font-weight: 700; font-size: 1em; }
.hb-head-name span { font-size: max(13px, .8em); color: var(--hb-muted); }
/* v3 (note de QUALITÉ, 360 px) : le titre du chat passe sur deux lignes plutôt que d'être coupé (« Community gar… »). */
.hb-head-name span { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hb-ai-dot {
  flex: none; inline-size: 1.9em; block-size: 1.9em; border-radius: 50%;
  background: var(--hb-lavender); border: 1px solid var(--hb-line);
  display: grid; place-items: center;
  font: 700 .78em/1 HBJakarta, sans-serif; color: var(--hb-muted);
  /* PRODUIT 12/11 (P2) : la pastille dit les deux lettres de l'IA (CG, CL…) ; lisibles, jamais sous 12 px. */
  font-size: max(12px, .78em); letter-spacing: -.02em;
}
/* PRODUIT 12/11/2026 (demos-teintes, demande du LEAD) : la pastille dit QUELLE IA, à sa teinte de la DA (assets/brand/systeme-v4/couleurs.json « ia »,
   clair : les démos sont posées sur des pages data-theme=light). var(--uck-ai-*) de uncook-v4.css, chargée par chaque page des démos ; le repli est la
   même valeur. test/demos-teintes.mjs contrôle CSS = JSON et le rendu. */
.hb-ai-dot[data-ia=CG] { background: var(--uck-ai-cg-bg, #DDF1E8); color: var(--uck-ai-cg-ink, #0B5E45); border-color: transparent; }
.hb-ai-dot[data-ia=CL] { background: var(--uck-ai-cl-bg, #F8E3DA); color: var(--uck-ai-cl-ink, #8E3B1E); border-color: transparent; }
.hb-ai-dot[data-ia=GE] { background: var(--uck-ai-ge-bg, #E1E9FB); color: var(--uck-ai-ge-ink, #1F47A6); border-color: transparent; }
.hb-ai-dot[data-ia=CO] { background: var(--uck-ai-co-bg, #ECE4FA); color: var(--uck-ai-co-ink, #5B2FA6); border-color: transparent; }
.hb-ai-dot[data-ia=PE] { background: var(--uck-ai-pe-bg, #DCEFF1); color: var(--uck-ai-pe-ink, #0F5D63); border-color: transparent; }
.hb-ai-dot[data-ia=MV] { background: var(--uck-ai-mv-bg, #FBEBCB); color: var(--uck-ai-mv-ink, #7A4A00); border-color: transparent; }
.hb-ai-dot[data-ia=GN] { background: var(--uck-ai-gn-bg, #E5E8EE); color: var(--uck-ai-gn-ink, #2E3A52); border-color: transparent; }
.hb-ai-dot[data-ia=AS] { background: var(--uck-ai-as-bg, #F7E1EE); color: var(--uck-ai-as-ink, #8A2560); border-color: transparent; }
.hb-logo { flex: none; inline-size: 1.9em; block-size: 1.9em; display: block; }
.hb-head .hb-wordmark { font: 700 1.05em/1 HBJakarta, sans-serif; letter-spacing: -.01em; color: var(--hb-ink); }

/* L'extension, visible par son U, et sa jauge qui passe du bleu au rouge */
.hb-ext {
  margin-inline-start: auto;
  display: flex; align-items: center; gap: .5em;
  padding: .3em .55em .3em .3em;
  border-radius: 999px;
  background: var(--hb-lavender);
  box-shadow: inset 0 0 0 1px var(--hb-line);
}
.hb-ext svg { inline-size: 1.45em; block-size: 1.45em; display: block; }
.hb-gauge-track {
  inline-size: 4.4em; block-size: .46em; border-radius: 999px;
  background: #fff; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--hb-line);
}
.hb-gauge-track i {
  display: block; block-size: 100%; inline-size: 100%;
  border-radius: inherit; background: var(--hb-blue);
  transform-origin: 0 50%;
}

/* ---------- La conversation ---------- */

.hb-body { position: relative; flex: 1; min-block-size: 0; overflow: hidden; }
.hb-fade { position: relative; flex: 1; min-block-size: 0; display: flex; flex-direction: column; transition: opacity .4s ease; }
/* v3 : en fin de tour (vitals, reprise), le contenu baisse à 30 % le temps de repartir, sans jamais laisser une carte vide. */
.hb-fade:not(.is-on) { opacity: .3; transition: opacity .28s ease; }
.hb-thread {
  position: relative;
  display: flex; flex-direction: column; gap: .7em;
  padding: 1.1em 1.15em 1.3em;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.hb-msg {
  max-inline-size: 86%;
  line-height: 1.42;
  opacity: 0; transform: translateY(.7em);
}
.hb-msg.is-on { opacity: 1; transform: none; transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.hb-msg-user {
  align-self: flex-end;
  background: var(--hb-lavender);
  border-radius: 1.1em 1.1em .35em 1.1em;
  padding: .55em .9em;
}
.hb-msg-ai { align-self: flex-start; padding: .15em .1em; color: var(--hb-ink); }

/* Le bandeau Uncook Vitals : ici sa seule PLACE dans la carte (bas du chat) et son apparition ; son dessin est le composant
   commun « BANDEAU VITALS » juste en dessous (Kevin via LEAD 10/11 17:4x : un seul composant, partout). */
.hb-vitals {
  position: absolute; inset-inline: .9em; bottom: .9em;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 .7em 1.6em -.8em rgba(38, 49, 83, .6);
  opacity: 0; transform: translateY(1.2em);
}
.hb-vitals.is-on { opacity: 1; transform: none; transition: opacity .35s ease, transform .55s cubic-bezier(.2, 1.2, .3, 1); }

/* ==== BANDEAU VITALS, composant commun (PRODUIT, 10/11 — Kevin via LEAD 17:4x : « bandeau refait ») ====================
   COPIE IDENTIQUE À L'OCTET dans site/assets/handoff-boucle-v4/boucle.css et site/assets/home-sections-v4/vitals-etats.css,
   entre les deux marqueurs « BANDEAU VITALS ». Toute retouche se fait dans les deux, dans le même commit.
   Balisage (boucle.mjs chatScene, vitals-etats.mjs gabarit) :
     <div class="… uck-bandeau"><div class="uck-bandeau-in">
       <p class="uck-bandeau-lead"><svg class="uck-bandeau-logo">…</svg><span class="uck-bandeau-texte">…</span></p>
       <span class="uck-bandeau-actions"><span class="uck-bandeau-cta">…</span><span class="uck-bandeau-later">…</span></span>
     </div></div>
   L'hôte (.hb-vitals, .ve-bandeau) ne garde que la PLACE du bandeau (position, marges, apparition) ; le dessin est ici.
   Mise en page selon la largeur du bandeau LUI-MÊME (requête de conteneur, pas l'écran) :
     · large (≥ 740 px) : une ligne, signe U, phrase, puis les deux boutons, centrés sur une même ligne médiane ;
     · sinon : la phrase (signe U en tête) au-dessus, centrée, et les deux boutons en dessous, centrés.
   Marges égales : rembourrage symétrique, groupe centré. « Not now » : bouton secondaire, texte blanc sur l'encre
   #263153 (12,8:1 calculé, mesuré au pixel dans le rapport du commit). Mots inchangés. */
.uck-bandeau {
  --ub-ink: #263153; --ub-lime: #E4EE99; --ub-lime-hover: #EEF5B5; --ub-lime-pressed: #D3DE78;
  container: uck-bandeau / inline-size;
  background: var(--ub-ink); color: #fff;
  border-radius: 14px;
  font: 500 14px/1.35 HBDM, UckVeDM, 'DM Sans', Arial, sans-serif;
  letter-spacing: .002em;
}
.uck-bandeau-in {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 12px 14px;
  text-align: center;
}
.uck-bandeau-lead { margin: 0; max-inline-size: 34em; text-wrap: balance; }
.uck-bandeau-logo {
  display: inline-block; inline-size: 20px; block-size: 20px;
  margin-inline-end: 8px; vertical-align: -5px;
}
.uck-bandeau-texte { color: #fff; }
.uck-bandeau-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.uck-bandeau-cta, .uck-bandeau-later {
  display: inline-flex; align-items: center; justify-content: center;
  block-size: 34px; padding: 0 16px;
  border-radius: 999px;
  font: 700 14px/1 HBDM, UckVeDM, 'DM Sans', Arial, sans-serif;
  white-space: nowrap;
}
.uck-bandeau-cta {
  position: relative;
  background: var(--ub-lime); color: var(--ub-ink);
  transition: transform .18s ease, box-shadow .18s ease, background-color .2s ease;
}
.uck-bandeau-cta.is-hover { background: var(--ub-lime-hover); box-shadow: 0 0 0 3px rgba(228, 238, 153, .35); }
.uck-bandeau-cta.is-pressed {
  transform: scale(.95);
  background: var(--ub-lime-pressed);
  box-shadow: inset 0 2px 5px rgba(38, 49, 83, .3), 0 0 0 4px rgba(228, 238, 153, .45);
}
.uck-bandeau-later {
  padding: 0 14px;
  color: #fff; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
}
@container uck-bandeau (max-width: 320px) {
  .uck-bandeau-in { padding: 11px 10px; }
  .uck-bandeau-lead { font-size: 13px; }
  .uck-bandeau-cta { padding: 0 12px; font-size: 13.5px; }
  .uck-bandeau-later { padding: 0 11px; font-size: 13.5px; }
}
@container uck-bandeau (min-width: 740px) {
  .uck-bandeau-in { flex-direction: row; justify-content: center; gap: 16px; padding: 9px 12px; }
  .uck-bandeau-lead { display: flex; align-items: center; max-inline-size: none; white-space: nowrap; }
  .uck-bandeau-logo { flex: none; margin-inline-end: 9px; vertical-align: 0; }
  .uck-bandeau-actions { flex: none; flex-wrap: nowrap; }
}
/* ==== fin BANDEAU VITALS ==== */

/* La feuille Uncook ouverte sur le chat (variante switch) */
.hb-sheet {
  position: absolute; inset-inline: .8em; bottom: .8em;
  padding: .8em .9em .85em;
  background: #fff; border-radius: 1em;
  box-shadow: 0 0 0 1px var(--hb-line), 0 1.2em 2.4em -1em rgba(38, 49, 83, .5);
  opacity: 0; transform: translateY(2em);
}
.hb-sheet.is-on { opacity: 1; transform: none; transition: opacity .35s ease, transform .6s cubic-bezier(.2, 1.1, .3, 1); }
.hb-sheet-head { display: flex; align-items: center; gap: .55em; margin-block-end: .55em; }
.hb-sheet-head svg { inline-size: 1.5em; block-size: 1.5em; flex: none; }
.hb-sheet-head b { font-weight: 700; }
.hb-sheet-text {
  font-family: HBMono, ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: max(14px, .78em); line-height: 1.6; color: #344256;
  border-inline-start: 2px solid #d7deff; padding-inline-start: .8em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hb-sheet-text b { color: #142238; }
.hb-sheet-foot { display: flex; justify-content: flex-end; margin-block-start: .7em; }

/* ---------- La liste d'outils d'Uncook ---------- */

.hb-picker {
  position: relative; flex: 1; min-block-size: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
}
.hb-slot {
  position: absolute; inset-inline: 1.1em; top: 50%;
  block-size: 2.9em; margin-block-start: -1.45em;
  border-radius: .9em; background: var(--hb-lavender);
  box-shadow: inset 0 0 0 1px var(--hb-line);
}
.hb-list { position: absolute; inset-inline: 1.1em; top: 0; margin: 0; padding: 0; list-style: none; }
.hb-tool {
  display: flex; align-items: center; gap: .75em;
  block-size: 2.9em; padding-inline: .9em;
  border-radius: .9em;
  font-weight: 600; font-size: 1em;
  color: var(--hb-ink);
}
.hb-tool svg { flex: none; inline-size: 1.25em; block-size: 1.25em; color: var(--hb-blue); }
.hb-tool .hb-check {
  margin-inline-start: auto; inline-size: 1.5em; block-size: 1.5em; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--hb-lime); color: var(--hb-ink);
  opacity: 0; transform: scale(.4);
}
.hb-tool .hb-check svg { color: var(--hb-ink); inline-size: .9em; block-size: .9em; }
.hb-tool.is-selected { background: var(--hb-blue); color: #fff; transition: background-color .3s ease, color .3s ease; }
.hb-tool.is-selected svg { color: #fff; }
.hb-tool.is-selected .hb-check { opacity: 1; transform: none; transition: opacity .3s ease, transform .45s cubic-bezier(.2, 1.4, .3, 1); }
.hb-tool.is-selected .hb-check svg { color: var(--hb-ink); }
.hb-tool-desc {
  flex: none; padding: .2em 1.6em 1.4em;
  min-block-size: 3.6em;
  text-align: center; color: var(--hb-muted); font-size: max(15px, .9em); line-height: 1.4;
  opacity: 0; transform: translateY(.5em);
}
.hb-tool-desc.is-on { opacity: 1; transform: none; transition: opacity .4s ease, transform .5s ease; }

/* ---------- switch : la liste des IA d'arrivée, qui défile ; le curseur y clique ---------- */

.hb-route {
  flex: none;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .3em .45em;
  padding: .95em 1.2em .2em;
  font: 700 1.08em/1.25 HBJakarta, sans-serif; letter-spacing: -.01em; color: var(--hb-ink);
}
.hb-route > span { color: var(--hb-muted); font-weight: 700; }
.hb-route-from {
  font-weight: 700; color: var(--hb-blue);
  background: var(--hb-lavender); border-radius: .5em; padding: .12em .45em;
  box-shadow: inset 0 0 0 1px var(--hb-line);
}
.hb-route-to {
  font-weight: 700; color: #fff; background: var(--hb-blue); border-radius: .5em; padding: .12em .45em;
  opacity: 0; transform: translateY(.3em) scale(.9);
}
.hb-route-to:empty { display: none; }
.hb-route-to.is-on { opacity: 1; transform: none; transition: opacity .25s ease, transform .4s cubic-bezier(.2, 1.4, .3, 1); }
.hb-scene-ais .hb-head .hb-badge { margin-inline-start: auto; }
.hb-picker-ais .hb-slot { inset-inline: 1.6em; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hb-blue) 30%, #fff); }
.hb-picker-ais .hb-list { inset-inline: 1.6em; }
.hb-ai { font-size: 1.08em; padding-inline: 1.05em; }
.hb-ai .hb-ai-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.hb-ai.is-hover { background: color-mix(in srgb, var(--hb-blue) 12%, #fff); }

/* ---------- Le Handoff, au zoom, puis Copy Handoff ---------- */

.hb-badge {
  flex: none;
  font: 600 .72em/1 HBDM, sans-serif; letter-spacing: .02em;
  background: var(--hb-lavender); color: var(--hb-blue);
  border-radius: 999px; padding: .45em .7em;
}
.hb-docview {
  position: relative; flex: 1; min-block-size: 0; overflow: hidden;
  /* Fondu en haut et en bas : une ligne qui remonte s'efface au lieu d'être coupée net. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1.1em, #000 calc(100% - 2em), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 1.1em, #000 calc(100% - 2em), transparent 100%);
}
.hb-doc {
  position: relative;
  margin: 1.1em 1.15em 0;
  padding-inline-start: 1em;
  border-inline-start: 2px solid #d7deff;
  font-family: HBMono, ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: max(15px, .9em);
  line-height: 1.65;
  color: #344256;
  transition: transform .35s ease;
}
.hb-doc-h { font-weight: 700; color: #142238; margin: 0 0 .35em; letter-spacing: .02em; }
.hb .hb-doc-h:not(:first-child) { margin-block-start: 1em; }
.hb-rest { color: transparent; }
.hb-caret {
  display: inline-block; vertical-align: -.18em;
  inline-size: .55em; block-size: 1.15em;
  margin-inline: .04em; border-radius: 2px;
  background: var(--hb-blue);
}
.hb-caret.is-idle { animation: hb-blink 1s steps(1) infinite; }
@keyframes hb-blink { 50% { opacity: 0; } }

.hb-docfoot {
  flex: none; display: flex; align-items: center; justify-content: flex-end; gap: .8em;
  padding: .85em 1.15em 1em;
  border-top: 1px solid var(--hb-line);
}
.hb-copy {
  display: inline-grid; align-items: center;
  border-radius: 999px; padding: .85em 1.5em;
  background: var(--hb-blue); color: #fff;
  font: 700 max(16px, 1.02em)/1 HBDM, sans-serif; white-space: nowrap;
  box-shadow: 0 .7em 1.4em -.7em rgba(68, 88, 172, .8);
  transition: background-color .25s ease, color .25s ease, transform .2s ease;
}
.hb-copy > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: .5em; }
.hb-copy svg { inline-size: 1.1em; block-size: 1.1em; }
.hb-copy .hb-copy-done { opacity: 0; transform: translateY(.5em); }
.hb-copy.is-done { background: var(--hb-lime); color: var(--hb-ink); transform: scale(1.04); }
.hb-copy.is-done .hb-copy-idle { opacity: 0; transform: translateY(-.5em); transition: opacity .2s ease, transform .3s ease; }
.hb-copy.is-done .hb-copy-done { opacity: 1; transform: none; transition: opacity .25s ease .08s, transform .35s cubic-bezier(.2, 1.4, .3, 1) .08s; }
.hb-sheet .hb-copy { font-size: max(15px, .92em); padding: .75em 1.3em; }

@container hb (max-width: 520px) {
  .hb-docfoot .hb-copy { inline-size: 100%; }
}

/* ---------- La nouvelle conversation : on colle, on envoie, l'IA reprend ---------- */

.hb-thread-new { padding-block-end: 4.4em; }
.hb-paste {
  display: flex; align-items: center; gap: .7em;
  padding: .6em .75em .6em .6em;
  background: var(--hb-lavender);
  border-radius: 1em;
  min-inline-size: 0;
}
.hb-thread .hb-paste {
  align-self: flex-end; max-inline-size: 88%;
  border-radius: 1em 1em .35em 1em;
  opacity: 0; transform: translateY(.7em);
}
.hb-thread .hb-paste.is-on { opacity: 1; transform: none; transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.hb-paste-icon { flex: none; inline-size: 2.2em; block-size: 2.2em; border-radius: .6em; display: block; }
.hb-paste-text { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1.3; }
.hb-paste-text b { font-weight: 600; font-size: max(15px, .92em); }
.hb-paste-text span { font-size: max(13px, .78em); color: var(--hb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-paste-open { align-items: flex-start; }
.hb-thread .hb-paste-open { max-inline-size: 94%; padding: .75em .85em .8em .7em; }
.hb-paste-open .hb-paste-text { gap: .3em; }
.hb-paste-open .hb-paste-text > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
.hb-paste-open .hb-paste-text > .hb-paste-ctx {
  -webkit-line-clamp: 4; margin-block-start: .25em; padding-inline-start: .7em;
  border-inline-start: 2px solid #d7deff;
  font-family: HBMono, ui-monospace, SFMono-Regular, Consolas, monospace; font-size: max(13px, .74em); line-height: 1.6; color: #344256;
}
.hb-paste-ctx b { color: #142238; font-weight: 700; }
@container hb (max-width: 520px) { .hb-paste-open .hb-paste-text > .hb-paste-ctx { display: none; } }
.hb-paste-more { flex: none; inline-size: 1.1em; block-size: 1.1em; color: var(--hb-muted); }
.hb-reply { max-inline-size: 92%; line-height: 1.45; opacity: 0; }
.hb-reply.is-on { opacity: 1; transition: opacity .25s ease; }

.hb-composer { position: relative; flex: none; padding: 0 1em 1em; }
.hb-scene-new.is-won .hb-composer { opacity: 0; transform: translateY(.4em) scale(.98); transition: opacity .3s ease, transform .4s ease; }
.hb-field {
  position: relative;
  display: flex; align-items: center; gap: .6em;
  min-block-size: 3.9em;
  padding: .45em .45em .45em .8em;
  border-radius: 1.1em;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--hb-line);
}
.hb-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; }
.hb-field-slot { position: relative; flex: 1; min-inline-size: 0; display: flex; align-items: center; min-block-size: 2.9em; }
.hb-textcaret { inline-size: 2px; block-size: 1.2em; background: var(--hb-ink); opacity: 0; }
.hb-field.is-focus .hb-textcaret { opacity: 1; animation: hb-blink 1s steps(1) infinite; }
.hb-field.is-filled .hb-textcaret { display: none; }
.hb-field .hb-paste { position: absolute; inset-inline: 0; top: 50%; translate: 0 -50%; padding: .4em .6em .4em .4em; opacity: 0; transform: scale(.96); }
.hb-field .hb-paste .hb-paste-icon { inline-size: 1.9em; block-size: 1.9em; }
.hb-field .hb-paste-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-field.is-filled .hb-paste { opacity: 1; transform: none; transition: opacity .3s ease, transform .4s cubic-bezier(.2, 1.3, .3, 1); }
.hb-send {
  flex: none; inline-size: 2.5em; block-size: 2.5em; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--hb-lavender); color: var(--hb-muted);
}
.hb-send svg { inline-size: 1.15em; block-size: 1.15em; }
.hb-field.is-filled .hb-send { background: var(--hb-ink); color: #fff; transition: background-color .25s ease, color .25s ease; }
.hb-send.is-pressed { transform: scale(.9); }

/* La pastille de collage, au-dessus du champ */
.hb-pastechip {
  position: absolute; left: 1.6em; bottom: calc(100% + .15em);
  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(14px, .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);
}
.hb-pastechip kbd { font: 700 1em/1 HBDM, sans-serif; background: rgba(255, 255, 255, .16); border-radius: .35em; padding: .25em .4em; }
.hb-pastechip.is-on { opacity: 1; transform: none; transition: opacity .2s ease, transform .35s cubic-bezier(.2, 1.4, .3, 1); }

.hb-fresh {
  position: absolute; z-index: 3; left: 50%;
  /* Posé sur le champ, vide une fois le message envoyé : il ne cache jamais la réponse, même dans la petite carte de la Home. */
  bottom: 2.95em;
  translate: -50% 50%;
  opacity: 0; transform: scale(.6);
}
/* v3 (Kevin, 14:28) : le badge final est plus gros et reste ≈ 2,5 s : on doit comprendre qu'on a gagné.
   Un voile clair monte derrière lui, sur le bas du fil. */
.hb-fresh::before {
  content: ''; position: absolute; z-index: 0; left: 50%; top: 50%;
  inline-size: 26em; block-size: 9em; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .96), rgba(255, 255, 255, .7) 55%, transparent);
  pointer-events: none;
}
.hb-fresh.is-on { opacity: 1; transform: none; transition: opacity .25s ease, transform .55s cubic-bezier(.2, 1.6, .35, 1); }
.hb-fresh-pill {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: .6em;
  padding: .5em 1.25em .5em .5em;
  background: var(--hb-blue); color: #fff;
  border-radius: 999px;
  font: 700 max(20px, 1.42em)/1 HBJakarta, sans-serif; letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 0 0 .22em rgba(255, 255, 255, .9), 0 1em 2em -.8em rgba(68, 88, 172, .8);
}
.hb-fresh-check {
  inline-size: 1.6em; block-size: 1.6em; border-radius: 50%;
  display: grid; place-items: center; background: var(--hb-lime); color: var(--hb-ink);
}
.hb-fresh-check svg { inline-size: .95em; block-size: .95em; }
.hb-burst { position: absolute; left: 50%; top: 50%; inline-size: 0; block-size: 0; }
.hb-burst i {
  position: absolute; left: -.28em; top: -.28em;
  inline-size: .56em; block-size: .56em; border-radius: 50%;
  background: var(--hb-lime);
  opacity: 0;
}
.hb-burst i:nth-child(even) { background: var(--hb-blue); inline-size: .42em; block-size: .42em; left: -.21em; top: -.21em; }
.hb-burst { z-index: 1; }
.hb-burst b {
  position: absolute; left: -5em; top: -1.9em; inline-size: 10em; block-size: 3.8em;
  border-radius: 999px; border: 2px solid var(--hb-blue); opacity: 0;
}
.hb-fresh.is-on .hb-burst i { animation: hb-spark .9s cubic-bezier(.15, .7, .3, 1) .12s both; }
.hb-fresh.is-on .hb-burst b { animation: hb-halo .8s ease-out .08s both; }
@keyframes hb-spark {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(1.6em) scale(.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d, 5.2em)) scale(1); }
}
@keyframes hb-halo { from { opacity: .8; transform: scale(.9); } to { opacity: 0; transform: scale(1.6); } }

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

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

/* ---------- Pause / lecture : visible au seul focus clavier ----------
   NOTE D'INCIDENT (Kevin, 10/11 16:3x, via LEAD) : le bouton pause/lecture avait été retiré du DOM. Décision LEAD 10/11 sur
   recommandation PRODUIT (WCAG 2.2.2, SKILL §10.5) : il revient pour toutes les boucles (boucle.mjs, outils.mjs), invisible
   à la souris et au toucher, et n'apparaît qu'au focus clavier. Pas de display:none ni de visibility:hidden : il reste dans
   l'ordre de tabulation et lu par les lecteurs d'écran ; opacité 0 et découpe à zéro (clip-path) le rendent invisible et
   hors d'atteinte du pointeur, sans prendre de place (absolu). Le survol n'arrête toujours rien. */
.hb-toggle {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  inline-size: 40px; block-size: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; margin: 0; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .94); color: var(--hb-ink);
  box-shadow: 0 .3em .9em -.3em rgba(38, 49, 83, .45);
  opacity: 0; clip-path: inset(50%); pointer-events: none;
}
.hb-toggle:focus-visible {
  opacity: 1; clip-path: none; pointer-events: auto;
  outline: 3px solid var(--hb-blue); outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff, 0 .3em .9em -.3em rgba(38, 49, 83, .45);
}
.hb-toggle svg { inline-size: 16px; block-size: 16px; }
.hb-toggle .hb-icon-play { display: none; }
.hb-toggle.is-play .hb-icon-play { display: block; }
.hb-toggle.is-play .hb-icon-pause { display: none; }

/* ---------- À l'arrêt (bouton, hors écran, onglet caché, carte mise de côté par sa section) ----------
   NOTE D'INCIDENT (QUALITÉ 10/11 17:3x, WCAG 2.2.2) : la liste nommée des animations à figer laissait tourner le décor
   (anneaux hb-turn, fils hb-flow) et le curseur clignotant quand la démo était en pause. À l'arrêt, TOUTE animation de la
   carte se fige, sans liste à tenir : la règle porte sur tous les descendants et leurs pseudo-éléments. */
.hb.is-paused *, .hb.is-paused *::before, .hb.is-paused *::after { animation-play-state: paused !important; }

/* ---------- Images fixes pour « How it works » : petite carte 16/10, lisible ---------- */

.hb.hb--static .hb-stage {
  --hb-fs: clamp(10.5px, 3.3cqi, 15px);
  aspect-ratio: 16 / 10;
  border-radius: clamp(12px, 3.4cqi, 22px);
}
.hb.hb--static .hb-card { inset-block: 7%; inline-size: 88%; border-radius: 1em; box-shadow: 0 0 0 .35em rgba(255, 255, 255, .38), 0 1.2em 2.4em -1.2em rgba(38, 49, 83, .45); }
.hb.hb--static *, .hb.hb--static *::before, .hb.hb--static *::after { transition: none !important; animation: none !important; }
.hb.hb--static .hb-head { padding: .6em .9em; min-block-size: 2.9em; }
.hb.hb--static .hb-thread { padding: .75em .9em; gap: .5em; }
.hb.hb--static .hb-msg-user { padding: .4em .7em; }
.hb.hb--static .hb-head-name span,
.hb.hb--static .hb-paste-text b,
.hb.hb--static .hb-tool-desc { font-size: .86em; }
.hb.hb--static .hb-paste-text span { font-size: .78em; }
.hb.hb--static .hb-tool-desc { padding-block-end: .8em; min-block-size: 0; }
.hb.hb--static .hb-composer { padding: 0 .8em .8em; }
.hb.hb--static .hb-field { min-block-size: 3.2em; }
.hb.hb--static .hb-field-slot { min-block-size: 2.4em; }
.hb.hb--static .hb-picker { -webkit-mask-image: none; mask-image: none; }
.hb.hb--static .hb-picker .hb-slot { display: none; }
.hb.hb--static .hb-list { top: .6em; }
.hb.hb--static .hb-tool { block-size: 2.5em; }
.hb.hb--static .hb-scene-new .hb-fade { justify-content: center; }
.hb.hb--static .hb-scene-new .hb-body { flex: 0 0 0; }
.hb.hb--static .hb-scene-new .hb-composer { padding-block: .8em; }
.hb.hb--static .hb-paste-text span { display: none; }
.hb.hb--static .hb-field .hb-paste-text b { white-space: normal; }

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

@media (prefers-reduced-motion: reduce) {
  .hb *, .hb *::before, .hb *::after { transition: none !important; animation: none !important; }
  .hb-toggle, .hb-cursor { display: none; } /* image finale fixe : rien à arrêter */
}

/* v3 (Kevin, 14:28) : la règle de la v2 qui GROSSISSAIT le bandeau à 20 px au-dessus de 520 px est retirée : le bandeau reste fin à toutes les
   largeurs. Le « Copy Handoff » garde sa taille lisible de la v2. En portrait, le bandeau passe sur deux rangées : la phrase, puis les boutons. */
@container hb (min-width: 521px) {
  .hb-copy { font-size: max(19px, 1.18em); }
  .hb-sheet .hb-copy { font-size: max(18px, 1.1em); }
}
@container hb (max-width: 520px) {
  .hb-vitals { inset-inline: .5em; bottom: .5em; }
  .hb-gauge-track { inline-size: 3em; }
  .hb-fresh::before { inline-size: 19em; }
}
/* 10/11 17:4x (Kevin via LEAD) : « Not now » reste à toutes les largeurs ; le composant commun BANDEAU VITALS passe ses boutons sous la phrase. */

/* ---------- complete, le hero de la Home : retouches Kevin 10/11 20:0x (via LEAD) ----------
   Le choix de l'outil : les six lignes, plus grandes, remplissent la place réservée (plus de vide au-dessus de la liste
   ni de défilement) ; Handoff s'éclaire sous le curseur, s'enfonce au clic, puis reste choisi (boucle.mjs, toolsFill).
   Rien ne change pour les autres boucles ni pour l'image fixe « etape-choix ». */
.hb.hb--remplit .hb-scene-tools .hb-picker { -webkit-mask-image: none; mask-image: none; }
.hb.hb--remplit .hb-scene-tools .hb-slot { display: none; }
.hb.hb--remplit .hb-scene-tools .hb-list {
  inset-block: .75em .35em;
  display: flex; flex-direction: column; gap: .3em;
}
.hb.hb--remplit .hb-scene-tools .hb-tool {
  flex: 1 1 0; block-size: auto; min-block-size: 0; max-block-size: 3.9em;
  font-size: 1.12em; padding-inline: 1em;
  box-shadow: inset 0 0 0 1px var(--hb-line);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, scale .18s ease;
}
.hb.hb--remplit .hb-scene-tools .hb-tool svg { inline-size: 1.3em; block-size: 1.3em; }
.hb.hb--remplit .hb-scene-tools .hb-tool.is-hover { background: color-mix(in srgb, var(--hb-blue) 12%, #fff); box-shadow: inset 0 0 0 1.5px var(--hb-blue); }
.hb.hb--remplit .hb-scene-tools .hb-tool.is-selected { box-shadow: 0 .5em 1.2em -.6em rgba(68, 88, 172, .8); }
.hb.hb--remplit .hb-scene-tools .hb-tool.is-pressed { scale: .97; }
.hb.hb--remplit .hb-scene-tools .hb-tool-desc { min-block-size: 0; padding-block: .55em 1.1em; }
/* Le Handoff tient entier dans la fenêtre (titre, texte, Copy) : entre 521 et 1100 px de scène (tablette), la scène
   du hero passe du 16/9 au 4/3 (au-delà de 1100 px de fenêtre, v3.css lui donne son 10/11 ; en portrait, 10/15). */
.hb[data-handoff-boucle="complete"] .hb-stage { aspect-ratio: 4 / 3; }
@container hb (max-width: 520px) {
  .hb[data-handoff-boucle="complete"] .hb-stage { aspect-ratio: 10 / 15; }
}