/* ============================================================
   L'ATELIER VIVANT — hub portfolio, charte Brand Bible
   Crème · encre · or sourd · tricolore · serif éditorial.
   Réutilise assets/bb.css ; ce bloc = composants du hub.
   ============================================================ */
.lueur{position:fixed;width:440px;height:440px;border-radius:50%;pointer-events:none;z-index:2;
  background:radial-gradient(circle,color-mix(in srgb,var(--bb-or) 22%,transparent),transparent 66%);
  transform:translate(-50%,-50%);transition:opacity .5s var(--ease);opacity:0;mix-blend-mode:multiply}
#poussiere{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.6}

/* barre voix + ambiance */
.navtools{display:flex;align-items:center;gap:14px}
.vbtn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bb-gris);
  background:none;border:1px solid var(--hair);border-radius:999px;padding:9px 15px;transition:.4s var(--ease)}
.vbtn:hover{color:var(--ink);border-color:var(--hair-or)}
.vbtn.on{color:var(--bb-noir);border-color:transparent;background:var(--bb-or)}
.vbtn .wv{display:inline-flex;gap:2px;align-items:flex-end;height:12px}
.vbtn .wv i{width:2.5px;height:5px;background:currentColor;border-radius:2px;display:block;transition:height .2s}
.vbtn.on .wv i{animation:wv 1s ease-in-out infinite}
.vbtn.on .wv i:nth-child(2){animation-delay:.14s}.vbtn.on .wv i:nth-child(3){animation-delay:.28s}.vbtn.on .wv i:nth-child(4){animation-delay:.42s}
@keyframes wv{0%,100%{height:4px}50%{height:12px}}
@media(max-width:820px){.nav-links a:not(.brandlink){display:none}.navtools .lbl{display:none}}

/* ————— HERO ————— */
.hero{padding:clamp(52px,9vh,110px) 0 40px}
.hero-grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,4vw,54px);align-items:center}
@media(max-width:760px){.hero-grid{grid-template-columns:1fr;gap:26px}}
.avatar{position:relative;width:132px;height:132px;flex:none}
.avatar .ring{position:absolute;inset:-9px;border-radius:50%;padding:2px;
  background:conic-gradient(from 210deg,var(--bb-bleu),var(--bb-or) 40%,var(--bb-rouge) 68%,var(--bb-or));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
  opacity:.9;animation:spin 22s linear infinite}
@media(prefers-reduced-motion:reduce){.avatar .ring{animation:none}}
.avatar .face{position:absolute;inset:0;border-radius:50%;background:var(--bb-creme-chaude);
  border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:500;font-size:2.7rem;color:var(--bb-noir-doux)}
.avatar .live{position:absolute;bottom:7px;right:7px;width:19px;height:19px;border-radius:50%;
  background:var(--bb-vert);border:3px solid var(--paper);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--bb-vert) 55%,transparent);animation:pulse 2.6s infinite}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.3rem);line-height:.98;margin:.28em 0 0}
.hero h1 em{font-style:italic;color:var(--bb-bordeaux)}
.speech{margin-top:26px;max-width:660px;background:color-mix(in srgb,var(--bb-creme-chaude) 55%,var(--paper));
  border:1px solid var(--hair);border-radius:3px;padding:18px 22px;position:relative;min-height:88px}
.speech::before{content:"";position:absolute;top:-8px;left:34px;width:14px;height:14px;rotate:45deg;
  background:color-mix(in srgb,var(--bb-creme-chaude) 55%,var(--paper));border-left:1px solid var(--hair);border-top:1px solid var(--hair)}
.speech .who{font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bb-gris);margin-bottom:8px;display:flex;align-items:center;gap:9px}
.speech .who .spk{display:none;align-items:flex-end;gap:2px;height:10px}
.speech .who .spk i{width:2.5px;background:var(--bb-or);border-radius:2px;display:block;height:4px;animation:wv 1s ease-in-out infinite}
.speech .who .spk i:nth-child(2){animation-delay:.15s}.speech .who .spk i:nth-child(3){animation-delay:.3s}
body.speaking .speech .who .spk{display:inline-flex}
#say{font-size:1.08rem;color:color-mix(in srgb,var(--ink) 88%,var(--paper));min-height:1.6em;font-weight:300}
#say .cur{display:inline-block;width:1.5px;height:1.05em;background:var(--bb-or);margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.asks{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.ask{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--bb-gris);cursor:pointer;
  background:none;border:1px solid var(--hair);border-radius:999px;padding:9px 15px;transition:.4s var(--ease)}
.ask:hover{color:var(--ink);border-color:var(--hair-or);transform:translateY(-1px)}
.ask.sur{color:var(--bb-bordeaux);border-color:color-mix(in srgb,var(--bb-bordeaux) 34%,transparent)}
.ask.sur:hover{background:color-mix(in srgb,var(--bb-bordeaux) 7%,transparent)}
/* invitation voix — mise en avant dans le hero */
.voix-invite{display:inline-flex;align-items:center;gap:11px;margin-top:22px;cursor:pointer;text-align:left;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--bb-noir-doux);
  background:color-mix(in srgb,var(--bb-or) 13%,var(--paper));border:1px solid var(--hair-or);
  padding:12px 20px;border-radius:999px;transition:.4s var(--ease)}
.voix-invite:hover{background:color-mix(in srgb,var(--bb-or) 22%,var(--paper));transform:translateY(-1px)}
.voix-invite svg{width:17px;height:17px;color:var(--bb-or);flex:none}
.voix-invite.on{background:var(--bb-or);border-color:transparent;color:var(--bb-noir)}
.voix-invite.on svg{color:var(--bb-noir)}
@media(max-width:520px){.voix-invite{width:100%;justify-content:center;text-align:center}}

/* ————— STATS ————— */
.stats{display:flex;gap:clamp(28px,6vw,68px);flex-wrap:wrap;margin-top:52px;padding-top:34px;border-top:1px solid var(--hair)}
.stat b{font-family:var(--serif);font-size:2.5rem;font-weight:500;line-height:1;display:block;color:var(--ink)}
.stat span{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bb-gris)}

/* ————— section heads ————— */
.sec{padding:clamp(50px,8vh,92px) 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.sec-head h2{font-size:clamp(2rem,4vw,3.1rem)}
.sec-head .lede{margin-top:14px}
.sec-head .count{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--bb-gris);
  border:1px solid var(--hair);border-radius:999px;padding:5px 13px;white-space:nowrap}

/* ————— L'ÉCOSYSTÈME (Brand Bible + agents) ————— */
.eco{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bb-creme-chaude) 40%,transparent) 30%,color-mix(in srgb,var(--bb-creme-chaude) 40%,transparent) 70%,transparent)}
.eco-bible{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(26px,4vw,60px);align-items:center;margin-bottom:52px}
@media(max-width:820px){.eco-bible{grid-template-columns:1fr;gap:28px}}
.eco-bible .txt h3{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:16px}
.eco-bible .txt h3 em{font-style:italic;color:var(--bb-bordeaux)}
.eco-bible .txt p{color:color-mix(in srgb,var(--ink) 78%,var(--paper));max-width:52ch;margin-bottom:22px}
.bible-card{position:relative;border:1px solid var(--hair);border-radius:4px;overflow:hidden;
  background:var(--bb-noir-doux);aspect-ratio:16/10;display:flex;align-items:flex-end;
  box-shadow:0 30px 60px -40px color-mix(in srgb,var(--bb-noir) 60%,transparent)}
.bible-card .glyphs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:24px;
  font-family:var(--serif);font-size:clamp(2rem,5vw,3.4rem);color:color-mix(in srgb,var(--bb-or) 62%,transparent);opacity:.6}
.bible-card .cap{position:relative;z-index:2;padding:22px 24px;width:100%;
  background:linear-gradient(0deg,color-mix(in srgb,var(--bb-noir) 82%,transparent),transparent);
  color:var(--bb-creme);font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase}
.agents-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:900px){.agents-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.agents-row{grid-template-columns:1fr}}
.agent{display:block;border:1px solid var(--hair);border-radius:3px;padding:18px 18px 20px;position:relative;
  background:color-mix(in srgb,var(--paper) 60%,transparent);transition:.5s var(--ease);overflow:hidden}
.agent::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--acc);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.agent:hover{border-color:var(--hair-or);transform:translateY(-4px)}
.agent:hover::before{transform:scaleY(1)}
.agent .gl{font-family:var(--serif);font-size:1.7rem;color:var(--acc);line-height:1}
.agent .nm{font-family:var(--serif);font-size:1.28rem;margin:10px 0 3px;color:var(--ink)}
.agent .dom{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bb-gris)}
.agent .tg{font-size:.86rem;color:color-mix(in srgb,var(--ink) 72%,var(--paper));margin-top:12px;font-weight:300}
.agent .go{margin-top:14px;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bb-gris);transition:.4s}
.agent:hover .go{color:var(--ink);gap:11px}

/* ————— GRILLE PROJETS ————— */
.catblock{margin-bottom:56px}
.catblock.flash{animation:flashcat 1.6s var(--ease)}
@keyframes flashcat{0%,100%{background:transparent}28%{background:color-mix(in srgb,var(--bb-or) 8%,transparent)}}
.cathead{display:flex;align-items:baseline;gap:14px;margin-bottom:8px}
.cathead h3{font-size:clamp(1.4rem,2.6vw,1.9rem)}
.cathead .cnt{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;color:var(--bb-gris);border:1px solid var(--hair);border-radius:999px;padding:3px 10px}
.catsub{font-family:var(--sans);color:var(--bb-gris);font-size:.94rem;margin:0 0 22px;max-width:60ch}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px;perspective:1200px}
.card{position:relative;border:1px solid var(--hair);border-radius:4px;padding:0 0 20px;overflow:hidden;
  background:color-mix(in srgb,var(--paper) 55%,var(--bb-blanc));opacity:0;transform:translateY(20px);transform-style:preserve-3d;
  transition:transform .18s var(--ease-out),opacity .7s var(--ease),border-color .4s,box-shadow .4s}
.card.in{opacity:1;transform:none}
.card:hover{border-color:var(--hair-or);box-shadow:0 26px 54px -34px color-mix(in srgb,var(--bb-noir) 42%,transparent)}
.card .thumb{height:158px;background:var(--bb-creme-chaude) center top/cover no-repeat;border-bottom:1px solid var(--hair);position:relative}
.card .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,color-mix(in srgb,var(--bb-blanc) 55%,transparent))}
.card .body{padding:18px 20px 0}
.card .top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.card .tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--acc,var(--bb-gris))}
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;white-space:nowrap;border:1px solid}
.badge.live{color:var(--bb-vert);border-color:color-mix(in srgb,var(--bb-vert) 34%,transparent)}
.badge.live .d{width:6px;height:6px;border-radius:50%;background:var(--bb-vert);animation:pulse 2.4s infinite}
.badge.private{color:var(--bb-bordeaux);border-color:color-mix(in srgb,var(--bb-bordeaux) 32%,transparent)}
.badge.native{color:var(--bb-noir-doux);border-color:var(--hair-or);background:color-mix(in srgb,var(--bb-or) 8%,transparent)}
.badge.soon{color:#8a6d1e;border-color:color-mix(in srgb,var(--bb-or) 50%,transparent)}
.badge.down{color:var(--bb-rouge);border-color:color-mix(in srgb,var(--bb-rouge) 30%,transparent)}
.card h4{font-family:var(--serif);font-size:1.28rem;font-weight:500;color:var(--ink);margin-bottom:8px;line-height:1.1}
.card .pitch{font-size:.92rem;color:color-mix(in srgb,var(--ink) 74%,var(--paper));font-weight:300;margin-bottom:14px}
.tech{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.tech span{font-family:var(--mono);font-size:.62rem;color:var(--bb-gris);border:1px solid var(--hair);padding:3px 8px;border-radius:3px}
.card .row{display:flex;align-items:center;gap:10px}
.cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper);background:var(--bb-noir-doux);padding:11px 17px;border-radius:3px;transition:.35s var(--ease)}
.cta:hover{background:var(--bb-noir);gap:12px}
.cta svg{width:13px;height:13px}
.cta.ghost{color:var(--bb-gris);background:none;border:1px solid var(--hair);cursor:default}
.listen{flex:none;width:40px;height:40px;border-radius:3px;border:1px solid var(--hair);background:none;color:var(--bb-gris);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.35s var(--ease)}
.listen:hover{color:var(--ink);border-color:var(--hair-or)}
.listen svg{width:17px;height:17px}
.card::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--acc,var(--bb-or));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.card:hover::after{transform:scaleX(1)}

/* ————— FOOTER / CONTACT ————— */
.foot{padding:clamp(60px,10vh,120px) 0 40px;border-top:1px solid var(--hair);text-align:center}
.foot h2{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:18px}
.foot h2 em{font-style:italic;color:var(--bb-bordeaux)}
.foot p{color:color-mix(in srgb,var(--ink) 74%,var(--paper));max-width:56ch;margin:0 auto 30px;font-weight:300}
.mail{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;
  color:var(--paper);background:var(--bb-noir-doux);padding:15px 28px;border-radius:3px;transition:.4s var(--ease)}
.mail:hover{background:var(--bb-noir);transform:translateY(-2px)}
.mail svg{width:17px;height:17px}
.footlinks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin:44px auto 0;max-width:760px}
.footlinks a{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--bb-noir-doux);
  border-bottom:1px solid var(--hair-or);padding-bottom:2px;transition:.35s var(--ease)}
.footlinks a:hover{color:var(--bb-bordeaux);border-color:var(--bb-bordeaux)}
.foot .fin{margin-top:44px;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bb-gris)}

/* barre flottante ambiance */
#vbar{position:fixed;right:20px;bottom:20px;z-index:50;display:flex;flex-direction:column;gap:10px;align-items:flex-end;transition:opacity .6s var(--ease)}
#vbar.idle{opacity:.32}
#vbar.idle:hover{opacity:1}
.vctl{display:inline-flex;align-items:center;gap:9px;background:var(--paper);backdrop-filter:blur(10px);box-shadow:0 14px 34px -18px color-mix(in srgb,var(--bb-noir) 55%,transparent);
  border:1px solid var(--hair);color:var(--bb-gris);padding:11px 15px;border-radius:999px;cursor:pointer;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;transition:.4s var(--ease)}
.vctl:hover{color:var(--ink);border-color:var(--hair-or)}
.vctl.on{color:var(--bb-noir);background:var(--bb-or);border-color:transparent}
.vctl svg{width:15px;height:15px}
@media(max-width:760px){
  #vbar{right:14px;bottom:calc(14px + env(safe-area-inset-bottom))}
  .vctl{padding:12px}
  .vctl .lbl{display:none}
}
.ambpop{background:color-mix(in srgb,var(--paper) 95%,transparent);backdrop-filter:blur(12px);border:1px solid var(--hair);
  border-radius:4px;padding:9px;display:flex;flex-direction:column;gap:3px;min-width:186px;box-shadow:0 24px 50px -28px color-mix(in srgb,var(--bb-noir) 50%,transparent)}
.ambpop[hidden]{display:none}
.ambpop .amb-h{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bb-gris);padding:5px 9px 3px}
.amb-opt{display:flex;align-items:center;gap:10px;background:none;border:1px solid transparent;color:var(--ink);
  padding:9px 11px;border-radius:3px;cursor:pointer;font-family:var(--sans);font-size:.86rem;text-align:left;transition:.25s}
.amb-opt:hover{background:color-mix(in srgb,var(--bb-creme-chaude) 60%,transparent)}
.amb-opt.active{background:color-mix(in srgb,var(--bb-or) 15%,transparent);color:var(--bb-noir-doux);font-weight:500}
.amb-opt svg{width:15px;height:15px;color:var(--acc,var(--bb-gris))}

.spark{position:fixed;top:-14px;width:5px;height:5px;border-radius:50%;z-index:70;pointer-events:none;
  background:var(--bb-or);box-shadow:0 0 8px 2px color-mix(in srgb,var(--bb-or) 60%,transparent);
  animation:fall 1.9s cubic-bezier(.3,.1,.5,1) forwards}
@keyframes fall{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(var(--h,70vh)) scale(.4);opacity:0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bb-vert) 50%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.card{opacity:1;transform:none}*{animation-duration:.001s!important}}

/* ============================================================
   MULTI-PAGES — portes de domaines (accueil) + pages domaine
   ============================================================ */
.domaines-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(342px,1fr));gap:20px}
.domaine-card{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:4px;padding:26px 26px 22px;position:relative;overflow:hidden;
  background:color-mix(in srgb,var(--paper) 55%,var(--bb-blanc));transition:transform .18s var(--ease-out),border-color .4s,box-shadow .4s,opacity .7s var(--ease);min-height:212px;opacity:0;transform:translateY(20px)}
.domaine-card.in{opacity:1;transform:none}
.domaine-card::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--acc,var(--bb-or));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.domaine-card:hover{border-color:var(--hair-or);transform:translateY(-4px);box-shadow:0 26px 54px -34px color-mix(in srgb,var(--bb-noir) 42%,transparent)}
.domaine-card:hover::after{transform:scaleX(1)}
.domaine-card .dc-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.domaine-card h3{font-family:var(--serif);font-size:1.5rem;font-weight:500;color:var(--ink);line-height:1.05}
.domaine-card .dc-count{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;color:var(--acc,var(--bb-gris));border:1px solid var(--hair);border-radius:999px;padding:3px 10px;white-space:nowrap}
.domaine-card .dc-sub{color:color-mix(in srgb,var(--ink) 72%,var(--paper));font-size:.92rem;font-weight:300;margin:12px 0 16px}
.domaine-card .dc-list{font-family:var(--mono);font-size:.67rem;letter-spacing:.01em;color:var(--bb-gris);line-height:1.85;margin-top:auto}
.domaine-card .dc-go{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bb-noir-doux);transition:.4s var(--ease)}
.domaine-card:hover .dc-go{gap:12px}
.domaine-card .dc-go svg{width:13px;height:13px}

.dom-hero{padding:clamp(44px,8vh,84px) 0 16px}
.dom-hero .count{font-family:var(--serif);font-size:clamp(3rem,7vw,5.2rem);color:color-mix(in srgb,var(--bb-or) 52%,var(--paper));line-height:1;float:right;margin-left:20px}
.dom-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0 10px;border-top:1px solid var(--hair);padding-top:34px}
.dom-nav a{display:flex;flex-direction:column;gap:5px;padding:18px 22px;border:1px solid var(--hair);border-radius:4px;transition:.4s var(--ease)}
.dom-nav a:hover{border-color:var(--hair-or);transform:translateY(-2px)}
.dom-nav .lab{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bb-gris)}
.dom-nav .to{font-family:var(--serif);font-size:1.22rem;color:var(--ink)}
.dom-nav .next{text-align:right;align-items:flex-end}
@media(max-width:600px){.dom-nav{grid-template-columns:1fr}.dom-hero .count{float:none;margin:0 0 8px}}

/* bouton voix sous l'avatar (accueil) */
.avatar-col{display:flex;flex-direction:column;align-items:center;gap:15px}
.avatar-voice{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bb-noir-doux);background:color-mix(in srgb,var(--bb-or) 14%,var(--paper));border:1px solid var(--hair-or);padding:9px 15px;border-radius:999px;transition:.4s var(--ease);white-space:nowrap}
.avatar-voice:hover{background:color-mix(in srgb,var(--bb-or) 24%,var(--paper));transform:translateY(-1px)}
.avatar-voice svg{width:15px;height:15px;color:var(--bb-or);flex:none}
.avatar-voice.on{background:var(--bb-or);border-color:transparent;color:var(--bb-noir)}
.avatar-voice.on svg{color:var(--bb-noir)}