:root{
  --bg:#060605;
  --ink:#f4f0e6;
  --ink-soft:#cfc8b7;
  --muted:#9a927f;
  --gold:#d6a642;
  --gold-bright:#f4d27e;
  --gold-dim:rgba(214,166,66,.34);
  --glass:rgba(32,25,16,.48);
  --glass-deep:rgba(12,10,8,.72);
  --line:rgba(244,210,126,.33);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-flow:cubic-bezier(.22,.78,.22,1);
}

html,body{background:var(--bg)!important;}
body{
  color:var(--ink)!important;
  background:
    radial-gradient(ellipse 65% 58% at 52% 44%,rgba(113,75,17,.28),transparent 61%),
    radial-gradient(ellipse 38% 48% at 83% 41%,rgba(179,123,20,.14),transparent 68%),
    #060605!important;
}
body::before{
  content:"";position:fixed;inset:-20%;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 14%,rgba(221,169,62,.055) 20%,transparent 27%,transparent 46%,rgba(255,202,98,.07) 53%,transparent 61%,transparent 78%,rgba(213,159,51,.045) 85%,transparent 91%),
    radial-gradient(circle at 16% 66%,rgba(255,205,100,.22) 0 1px,transparent 2px),
    radial-gradient(circle at 82% 27%,rgba(255,211,113,.2) 0 1.5px,transparent 3px),
    radial-gradient(circle at 68% 81%,rgba(255,211,113,.18) 0 1px,transparent 2px);
  background-size:auto,170px 170px,260px 260px,220px 220px;
  opacity:.8;animation:ambientSweep 14s ease-in-out infinite alternate;
}
body::after{
  content:"";position:fixed;inset:-18%;z-index:0;pointer-events:none;overflow:hidden;
  /* flou pré-rendu : les bandes ont des bords déjà adoucis (avant :
     filter:blur(18px) recalculé sur un calque plein écran animé) */
  background:
    linear-gradient(90deg,transparent 4.5%,rgba(246,184,61,.008) 8%,rgba(246,184,61,.02) 11%,rgba(246,184,61,.022) 13%,rgba(246,184,61,.008) 16%,transparent 19.5%,
      transparent 36.5%,rgba(246,193,76,.028) 40.5%,rgba(246,193,76,.07) 44%,rgba(246,193,76,.072) 46%,rgba(246,193,76,.028) 49.5%,transparent 53.5%,
      transparent 68.5%,rgba(246,184,61,.013) 72.5%,rgba(246,184,61,.034) 76%,rgba(246,184,61,.035) 78%,rgba(246,184,61,.013) 81.5%,transparent 85.5%),
    radial-gradient(ellipse 23% 76% at 51% 42%,rgba(255,196,67,.13),rgba(255,196,67,.05) 45%,transparent 74%);
  mix-blend-mode:screen;animation:lightColumns 10s ease-in-out infinite alternate;
}
@keyframes ambientSweep{to{transform:translate3d(1.5%,-.8%,0) scale(1.03)}}
@keyframes lightColumns{0%{transform:translateX(-1.5%) scaleX(.98);opacity:.56}100%{transform:translateX(2.2%) scaleX(1.06);opacity:.94}}

.ambient{background:transparent!important;overflow:hidden;z-index:0!important;}
.ambient::before{display:none;}
.ambient::after{
  content:"";position:absolute;inset:0;opacity:.8;pointer-events:none;
  background:url('/chat-3d-bg.svg') center/cover no-repeat;
  mix-blend-mode:screen;filter:drop-shadow(0 0 8px rgba(214,166,66,.18));opacity:.48;
  animation:contoursDrift 18s var(--ease-flow) infinite alternate;
}
@keyframes contoursDrift{to{transform:translate3d(-1.3%,1.4%,0) scale(1.05);opacity:1}}

three-d-stage{
  z-index:1!important;opacity:1!important;mix-blend-mode:screen;
  filter:drop-shadow(0 0 46px rgba(237,184,64,.36)) saturate(1.18);
  transform:translate3d(var(--stage-parallax-x,0px),var(--stage-parallax-y,0px),0);
  transition:transform 1.1s var(--ease-flow);
}
three-d-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 57% 51%,transparent 0 13%,rgba(5,5,4,.08) 48%,rgba(5,5,4,.38) 100%);}

#doors{z-index:30!important;}
.screen{z-index:3!important;transition:opacity .65s var(--ease-out),transform .65s var(--ease-out)!important;}

/* Le chat reste en premier plan et le fond 3D passe derrière le verre. */
#app{
  width:100%;align-items:center!important;justify-content:flex-start!important;
  padding:clamp(20px,4.4vh,56px) 0 0!important;padding-top:clamp(20px,4.4svh,56px)!important;
  /* paysage : le contenu ne passe pas sous l'encoche (0 sur ordinateur) */
  padding-left:env(safe-area-inset-left)!important;padding-right:env(safe-area-inset-right)!important;
  opacity:0;transform:translateY(16px);
}
#app.scene-ready{animation:sceneArrive 1s var(--ease-out) .12s forwards;}
@keyframes sceneArrive{to{opacity:1;transform:none}}

#app .greeting{
  width:min(1290px,90vw);margin:0 0 12px!important;gap:10px!important;
  align-items:center!important;opacity:.95;animation:headerFloat 5.5s ease-in-out infinite;
}
#app .greeting h1{margin:0!important;font-size:clamp(14px,1.25vw,18px)!important;letter-spacing:.04em!important;font-weight:500!important;text-transform:uppercase;}
#app .greeting h1 b{color:var(--gold-bright)!important;font-style:italic!important;font-weight:600!important;}
#app .spark{width:18px!important;height:18px!important;color:var(--gold-bright)!important;filter:drop-shadow(0 0 12px rgba(234,186,69,.7));animation:sparkPulse 3.8s ease-in-out infinite;}
@keyframes headerFloat{50%{transform:translateY(-3px)}}
/* la lueur ne s'anime plus (drop-shadow fixe) : l'étincelle grandit et tourne */
@keyframes sparkPulse{50%{transform:rotate(14deg) scale(1.16)}}

.chat-utilities{
  width:min(1290px,90vw)!important;order:2;margin:6px 0 0!important;
  justify-content:flex-end!important;pointer-events:none;position:relative;z-index:5;
}
.chat-utilities-left{gap:8px!important;}
.service-status,.watch-film-trigger,.new-order-global{pointer-events:auto;}
.service-status{color:rgba(232,224,201,.72)!important;font-size:10px!important;letter-spacing:.06em!important;text-transform:uppercase;}
.service-status::before{box-shadow:0 0 12px currentColor!important;}
.watch-film-trigger,.new-order-global{
  border-color:rgba(244,210,126,.28)!important;background:rgba(39,29,15,.62)!important;
  color:#d7c48f!important;transition:color .16s ease,border-color .16s ease,background .16s ease;
  box-shadow:inset 0 1px 0 rgba(255,233,180,.13),0 8px 22px rgba(0,0,0,.16)!important;
}
.watch-film-trigger:hover,.new-order-global:hover{color:var(--gold-bright)!important;border-color:var(--gold)!important;background:rgba(77,52,14,.45)!important;}

.chatbar{
  width:min(1290px,90vw)!important;order:1;position:relative;overflow:hidden;
  padding:19px 23px 17px!important;border-radius:28px!important;
  background:linear-gradient(112deg,rgba(52,39,20,.63),rgba(15,13,10,.65) 38%,rgba(54,36,13,.43))!important;
  border:1px solid rgba(246,213,144,.46)!important;
  box-shadow:0 26px 76px rgba(0,0,0,.39),inset 0 1px 0 rgba(255,240,199,.25),inset 0 -1px 0 rgba(20,12,3,.7),0 0 0 1px rgba(148,101,27,.12)!important;
  backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%);
  transition:border-color .16s var(--ease-out),box-shadow .16s var(--ease-out),transform .32s var(--ease-out)!important;
  animation:inputArrive .85s var(--ease-out) .28s both;
}
.chatbar::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(104deg,rgba(255,235,177,.19),transparent 17%,transparent 64%,rgba(248,194,70,.14));mix-blend-mode:screen;opacity:.75;}
.chatbar::after{content:"";position:absolute;inset:-70% auto -60% -19%;width:26%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,234,167,.18),transparent);transform:rotate(17deg);animation:glassGlint 8s ease-in-out .35s infinite;}
@keyframes inputArrive{from{opacity:0;transform:translateY(-34px) scale(.975)}to{opacity:1;transform:none}}
@keyframes glassGlint{0%,15%{transform:translateX(-130%) rotate(17deg);opacity:0}30%,55%{opacity:1}75%,100%{transform:translateX(640%) rotate(17deg);opacity:0}}
.chatbar.focused{border-color:rgba(255,220,136,.9)!important;box-shadow:0 26px 76px rgba(0,0,0,.39),inset 0 1px 0 rgba(255,240,199,.3),0 0 0 3px rgba(219,169,59,.11),0 0 50px rgba(219,169,59,.18)!important;transform:translateY(-2px);}
.chatbar textarea{position:relative;z-index:1;color:var(--ink)!important;font-size:clamp(16px,1.5vw,21px)!important;line-height:1.35!important;letter-spacing:-.015em;min-height:31px!important;}
.chatbar textarea::placeholder{color:rgba(235,227,207,.67)!important;}
.chatbar .row{position:relative;z-index:1;margin-top:13px!important;}
.chatbar .left{gap:10px!important;}
.pill{
  border:1px solid rgba(246,213,144,.38)!important;color:#d9d0b8!important;
  padding:7px 15px!important;font-size:12px!important;line-height:1!important;
  background:linear-gradient(135deg,rgba(80,55,19,.55),rgba(25,20,12,.45))!important;
  box-shadow:inset 0 1px 0 rgba(255,238,194,.18),0 6px 14px rgba(0,0,0,.19)!important;
  /* pas de backdrop-filter : la pastille est posée sur la barre, qui floute déjà */
  transition:transform .16s var(--ease-out),border-color .16s ease,background .16s ease,color .16s ease!important;
}
.pill.active{border-color:rgba(250,215,134,.9)!important;color:#fff7dd!important;background:radial-gradient(circle at 26% 16%,rgba(255,229,157,.68),rgba(128,86,23,.7) 43%,rgba(51,32,11,.68))!important;box-shadow:inset 0 1px 0 rgba(255,247,212,.48),0 0 17px rgba(221,166,56,.24)!important;}
.pill:hover{border-color:rgba(250,215,134,.75)!important;transform:translateY(-1px);}
.send-btn{width:47px!important;height:47px!important;border:1px solid rgba(255,233,173,.74)!important;background:radial-gradient(circle at 31% 26%,#fff0b1,#d49b31 56%,#7f4c0d)!important;color:#180e02!important;font-size:28px!important;font-weight:300!important;line-height:1!important;box-shadow:inset 0 2px 2px rgba(255,255,230,.7),0 8px 22px rgba(0,0,0,.34),0 0 22px rgba(227,174,61,.28)!important;}
.send-btn:not(:disabled):hover{filter:brightness(1.13)!important;transform:translateY(-2px) scale(1.04)!important;}
.send-btn:disabled{opacity:.3!important;}

#thread{
  width:min(1290px,90vw)!important;order:3;position:relative;z-index:4;
  margin-top:clamp(23px,4.2vh,52px)!important;margin-top:clamp(23px,4.2svh,52px)!important;padding:0 9.5% 50px!important;gap:18px!important;
  /* hauteur : plus de calcul en dur (avant : calc(100vh - 240px)). #app est
     une colonne flex de la hauteur de l'écran ; la barre garde sa taille
     naturelle et le fil prend ce qui reste. max-height:none neutralise
     l'ancien 40vh d'index.html, que le calc écrasait jusqu'ici. */
  flex:1 1 auto;min-height:0;max-height:none!important;overflow-y:auto!important;overflow-x:visible!important;
  scroll-behavior:smooth;mask-image:linear-gradient(to bottom,transparent 0,black 9%,black 89%,transparent 100%);
}
#thread::-webkit-scrollbar{width:3px!important;}
#thread::-webkit-scrollbar-thumb{background:rgba(244,210,126,.25)!important;}
.msg{
  position:relative;max-width:min(74%,900px)!important;padding:18px 22px!important;border-radius:22px!important;
  font-size:clamp(14px,1.25vw,18px)!important;line-height:1.48!important;
  background:linear-gradient(120deg,rgba(50,37,18,.66),rgba(15,12,8,.64) 69%,rgba(85,54,13,.44))!important;
  border:1px solid rgba(244,210,126,.36)!important;color:var(--ink)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.31),inset 0 1px 0 rgba(255,239,195,.19),inset 0 -1px 0 rgba(17,10,2,.6)!important;
  transform-origin:center bottom;transition:transform .92s cubic-bezier(.18,.86,.2,1),opacity .82s var(--ease-flow)!important;
  animation:messageIn .6s var(--ease-out) both;
}
.msg::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(111deg,rgba(255,235,175,.13),transparent 19%,transparent 66%,rgba(240,180,58,.08));}
.msg-content{position:relative;z-index:1;display:block;}
.msg.bot{align-self:flex-start!important;}
.msg.user{align-self:flex-end!important;border-color:rgba(248,210,127,.52)!important;background:linear-gradient(120deg,rgba(134,88,23,.57),rgba(61,39,12,.63) 64%,rgba(29,18,7,.72))!important;box-shadow:0 18px 44px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,239,195,.22),0 0 22px rgba(212,159,48,.1)!important;}
.msg.bot b{color:var(--gold-bright)!important;font-weight:600!important;}
/* profondeur : recul + transparence (le flou de profondeur, filter:blur, est
   retiré — il était recalculé à chaque image sur des bulles qui flottent) */
.msg.latest{transform:translate3d(0,0,0) rotate(0deg) scale(1)!important;opacity:1!important;z-index:5;}
.msg.depth-1{transform:translate3d(-8px,-18px,0) rotate(-.18deg) scale(.94)!important;opacity:.74!important;z-index:4;}
.msg.depth-2{transform:translate3d(10px,-46px,0) rotate(.28deg) scale(.86)!important;opacity:.44!important;z-index:3;}
.msg.depth-3{transform:translate3d(-15px,-79px,0) rotate(-.36deg) scale(.78)!important;opacity:.18!important;z-index:2;}
.msg.depth-4{transform:translate3d(18px,-108px,0) rotate(.45deg) scale(.7)!important;opacity:.04!important;z-index:1;}
/* rangée de bulles : même recul vertical que le message qui la suit (voir
   actualiserProfondeurFil) — propriété translate, qui se compose avec les
   transform propres aux bulles sans les écraser */
.ci-bloc{transition:translate .92s cubic-bezier(.18,.86,.2,1);}
.ci-bloc[data-recul="1"]{translate:0 -18px;}
.ci-bloc[data-recul="2"]{translate:0 -46px;}
.ci-bloc[data-recul="3"]{translate:0 -79px;}
.ci-bloc[data-recul="4"]{translate:0 -108px;}
.msg.flow-exit{max-height:0!important;min-height:0!important;margin:0!important;padding-top:0!important;padding-bottom:0!important;overflow:hidden!important;pointer-events:none;}
@keyframes messageIn{from{opacity:0;transform:translateY(34px) scale(.955)}65%{opacity:1}to{transform:translateY(0) scale(1)}}
@keyframes botFloat{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}45%{transform:translate3d(-1px,-5px,0) rotate(-.16deg)}72%{transform:translate3d(1px,-2px,0) rotate(.05deg)}}
@keyframes userFloat{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}48%{transform:translate3d(1px,-3px,0) rotate(.11deg)}74%{transform:translate3d(-1px,-1px,0) rotate(-.04deg)}}
@keyframes depthFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-2px,0)}}
.msg.bot.latest .msg-content{animation:botFloat 4.9s ease-in-out .24s infinite;}
.msg.user.latest .msg-content{animation:userFloat 4.15s ease-in-out .14s infinite;}
.msg.depth-1 .msg-content{animation:depthFloat 5.8s ease-in-out .18s infinite reverse;}
.msg.depth-2 .msg-content{animation:depthFloat 6.4s ease-in-out .45s infinite;}
.msg.typing{min-width:92px!important;width:92px!important;padding:16px 20px!important;}
.typing span{width:7px!important;height:7px!important;background:var(--gold-bright)!important;box-shadow:0 0 9px rgba(248,205,96,.55);}
.msg.pesee{width:min(76%,480px)!important;max-width:480px!important;background:rgba(20,16,10,.46)!important;padding:12px!important;}
.msg.pesee figure{max-width:440px!important;}
.msg.pesee figcaption{color:rgba(238,227,197,.7)!important;}
a.lien-paiement{background:linear-gradient(135deg,#f1cf70,#bd7e1c)!important;border:1px solid rgba(255,236,176,.8);color:#160d02!important;border-radius:14px!important;box-shadow:inset 0 1px 0 rgba(255,255,235,.55),0 9px 25px rgba(0,0,0,.26);}
.lien-paiement-hote{color:#d9ceb1!important;}
.new-order-action{align-self:flex-start!important;animation:messageIn .6s var(--ease-out) both;}
.new-order-action button{border-color:rgba(249,214,132,.6)!important;background:rgba(70,48,14,.53)!important;color:var(--gold-bright)!important;box-shadow:inset 0 1px 0 rgba(255,239,195,.16),0 8px 20px rgba(0,0,0,.2)!important;}

.order-summary{z-index:5!important;border-color:rgba(246,211,133,.35)!important;background:rgba(25,19,11,.9)!important;color:var(--ink)!important;box-shadow:0 16px 45px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,239,195,.15)!important;}
.order-summary .summary-head,.order-summary button{color:var(--gold-bright)!important;}
.order-summary strong{color:var(--ink)!important;}
.order-summary .summary-meta{color:#d1c6ab!important;}
.contact-email,.mentions-legales,.cgv-lien{z-index:5!important;color:rgba(235,224,195,.52)!important;}
.contact-email:hover,.mentions-legales:hover,.cgv-lien:hover{color:var(--gold-bright)!important;}

.brand-film{z-index:40!important;}
/* film ouvert : plus de flou sur le chat derrière (filter:blur plein écran) ;
   le voile du film est rendu plus dense à la place (index.html) */

@media (max-width:759px){
  #app{padding-top:clamp(18px,4vh,32px)!important;padding-top:clamp(18px,4svh,32px)!important;}
  #app .greeting{width:90vw;margin-bottom:10px!important;}
  #app .greeting h1{font-size:12px!important;}
  #app .spark{width:15px!important;height:15px!important;}
  .chatbar,#thread,.chat-utilities{width:92vw!important;}
  .chatbar{padding:16px 16px 14px!important;border-radius:23px!important;}
  .chatbar textarea{font-size:16px!important;}
  .pill{padding:6px 10px!important;font-size:10.5px!important;}
  .send-btn{width:40px!important;height:40px!important;font-size:24px!important;}
  .chat-utilities{margin-top:5px!important;justify-content:space-between!important;}
  .chat-utilities-left{gap:5px!important;}
  .service-status{display:none!important;}
  .watch-film-trigger,.new-order-global{font-size:9px!important;padding:6px 8px!important;}
  #thread{margin-top:25px!important;padding:0 1px 72px!important;gap:13px!important;}
  .msg{max-width:93%!important;padding:14px 16px!important;border-radius:18px!important;font-size:14px!important;}
  .msg.depth-2{transform:translateY(-16px) scale(.965)!important;}
  .msg.depth-3{transform:translateY(-28px) scale(.94)!important;}
  .msg.depth-4{transform:translateY(-42px) scale(.91)!important;}
  .ci-bloc[data-recul="2"]{translate:0 -16px;}
  .ci-bloc[data-recul="3"]{translate:0 -28px;}
  .ci-bloc[data-recul="4"]{translate:0 -42px;}
  .msg.pesee{width:93%!important;}
  .order-summary{display:none!important;}
  three-d-stage{opacity:.88!important;transform:translate3d(var(--stage-parallax-x,0px),var(--stage-parallax-y,0px),0) scale(1.1);}
}

@media (prefers-reduced-motion:reduce){
  body::before,.ambient::after,#app .greeting,#app .spark,.chatbar,.chatbar::after,.msg{animation:none!important;}
  #app{opacity:1!important;transform:none!important;}
  .msg.depth-1,.msg.depth-2,.msg.depth-3,.msg.depth-4{transform:none!important;opacity:1!important;}
  .ci-bloc[data-recul]{translate:none;}
}

/* Mode de fidélité : la référence fournie devient le décor vivant. Les
   contrôles et les messages restent de vrais éléments HTML au-dessus. */
body.cinematic-chat{background:#080704!important;}
body.cinematic-chat::before,body.cinematic-chat::after,body.cinematic-chat .ambient{display:none!important;}
.reference-clean-plate{
  position:fixed;inset:0;z-index:0;width:100vw;height:100vh;height:100dvh;object-fit:cover;
  background:#080704;pointer-events:none;opacity:1;
  transform:scale(1.065);transform-origin:52% 47%;
  animation:decorFloat 18s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes decorFloat{
  0%{transform:scale(1.065) translate3d(-.22%,-.15%,0)}
  52%{transform:scale(1.07) translate3d(.08%,-.32%,0)}
  100%{transform:scale(1.066) translate3d(.26%,.06%,0)}
}
body.cinematic-chat three-d-stage{display:none!important;}
body.cinematic-chat #app{padding-top:clamp(16px,2.5vh,30px)!important;padding-top:clamp(16px,2.5svh,30px)!important;}
body.cinematic-chat #app .greeting,body.cinematic-chat .chat-utilities{display:none!important;}
body.cinematic-chat .chatbar{width:min(86.5vw,1660px)!important;border-radius:31px!important;}
body.cinematic-chat .chatbar{animation:inputArrive .62s var(--ease-out) .08s both!important;}
body.cinematic-chat .chatbar::after{animation:none!important;opacity:0!important;}
body.cinematic-chat #thread{
  width:min(87.5vw,1680px)!important;margin-top:clamp(48px,6.2vh,78px)!important;margin-top:clamp(48px,6.2svh,78px)!important;
  padding:clamp(68px,8.5vh,108px) 0 64px!important;padding-top:clamp(68px,8.5svh,108px)!important;
  /* dernier message au-dessus de la barre d'accueil de l'iPhone (64 px partout ailleurs) */
  padding-bottom:max(64px, calc(env(safe-area-inset-bottom) + 30px))!important;
  mask-image:linear-gradient(to bottom,transparent 0,black 4%,black 91%,transparent 100%);
}
body.cinematic-chat .msg{max-width:min(67%,960px)!important;}
body.cinematic-chat .contact-email,body.cinematic-chat .mentions-legales,body.cinematic-chat .cgv-lien{opacity:.18;}
body.cinematic-chat .contact-email:hover,body.cinematic-chat .mentions-legales:hover,body.cinematic-chat .cgv-lien:hover{opacity:1;}
@media (max-width:759px){
  body.cinematic-chat #app{padding-top:15px!important;}
  body.cinematic-chat .chatbar{width:92vw!important;border-radius:24px!important;}
  body.cinematic-chat #thread{width:92vw!important;margin-top:42px!important;padding:68px 0 46px!important;padding-bottom:max(46px, calc(env(safe-area-inset-bottom) + 24px))!important;}
  body.cinematic-chat .msg{max-width:93%!important;}
}

/* =====================================================================
   Décor calculé (scene-verre.js) — reproduction de la vidéo de référence.
   Remplace l'image fixe : vagues dorées et étoile vivantes, sans boucle.
   ===================================================================== */
/* ---------- Mise en page : la barre respire ---------- */
body.scene-verre-active #app{padding-top:clamp(56px,11vh,140px)!important;padding-top:max(clamp(56px,11svh,140px), calc(env(safe-area-inset-top) + 12px))!important;}
body.scene-verre-active #thread{
  margin-top:clamp(28px,4.5vh,64px)!important;margin-top:clamp(28px,4.5svh,64px)!important;scrollbar-width:none;perspective:1400px;
}
body.scene-verre-active #thread::-webkit-scrollbar{display:none!important;}
/* une bulle ne rétrécit JAMAIS pour tenir dans le fil : elle défile.
   (Sans ça, les bulles s'écrasaient et le texte débordait dessous.) */
body.scene-verre-active #thread > *{flex-shrink:0!important;}

/* ---------- Verre ambré des bulles ---------- */
body.scene-verre-active .msg{
  font-size:clamp(15px,1.62vw,31px)!important;font-weight:400!important;line-height:1.5!important;color:#eadfc6!important;
  padding:clamp(16px,1.5vw,30px) clamp(18px,1.75vw,36px)!important;border-radius:clamp(18px,1.6vw,32px)!important;
  background:linear-gradient(160deg,rgba(110,74,28,.58),rgba(54,35,13,.56) 55%,rgba(88,58,21,.5))!important;
  border:1px solid rgba(238,190,104,.42)!important;
  box-shadow:0 26px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,228,170,.34),inset 0 -1px 0 rgba(30,18,4,.55),0 0 0 1px rgba(150,100,30,.12)!important;
  /* le reflet d'arrivée (::after) glisse en transform : la bulle coupe ce qui dépasse */
  overflow:hidden;
}
/* reflet qui glisse sur le verre à l'arrivée de la bulle */
body.scene-verre-active .msg::after{content:"";position:absolute;top:0;bottom:0;left:0;width:250%;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,236,190,.16) 45%,transparent 60%);
  animation:refletVerre 1.6s var(--ease-out) .25s both;}
/* même trajet que background-position 120 % → -60 % sur 250 % */
@keyframes refletVerre{from{transform:translateX(-72%)}to{transform:translateX(36%)}}
body.scene-verre-active .msg.bot b,body.scene-verre-active .msg .mot-or{color:#f5c457!important;font-weight:600!important;}
/* bulle client : pastille d'or brillante */
body.scene-verre-active .msg.user{
  border-radius:999px!important;padding:clamp(11px,1vw,20px) clamp(20px,1.7vw,34px)!important;
  background:linear-gradient(180deg,rgba(216,160,68,.8),rgba(150,98,30,.82) 55%,rgba(104,66,18,.86))!important;
  border:1px solid rgba(255,226,160,.72)!important;color:#fff8e6!important;
  box-shadow:0 16px 38px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,244,210,.7),inset 0 -2px 5px rgba(60,36,6,.45),0 0 28px rgba(226,170,60,.25)!important;
}
body.scene-verre-active .msg.typing{border-radius:999px!important;}

/* ---------- Flottement (référence : tout « flotte » dans le verre) ----------
   La bulle ENTIÈRE flotte (propriétés translate/rotate, indépendantes du
   transform de profondeur), pas seulement son texte. Mouvements lents,
   amplitudes faibles, décalés d'une bulle à l'autre. */
body.scene-verre-active .msg-content{animation:none!important;}
body.scene-verre-active .msg{animation:messageIn .7s var(--ease-out) both,flotte 6.2s ease-in-out .7s infinite!important;}
body.scene-verre-active .msg.user{animation:messageIn .55s var(--ease-out) both,flotteClient 5.4s ease-in-out .55s infinite!important;}
body.scene-verre-active .msg:nth-last-child(2){animation-delay:0s,-1.9s!important;}
body.scene-verre-active .msg:nth-last-child(3){animation-delay:0s,-3.4s!important;}
body.scene-verre-active .msg:nth-last-child(4){animation-delay:0s,-4.6s!important;}
@keyframes flotte{
  0%,100%{translate:0 0;rotate:x 0deg}
  30%{translate:0 -6px;rotate:x 1.6deg}
  65%{translate:2px -2px;rotate:x -.8deg}
}
@keyframes flotteClient{
  0%,100%{translate:0 0;rotate:y 0deg}
  40%{translate:-2px -5px;rotate:y -2deg}
  75%{translate:1px -1px;rotate:y 1deg}
}
body.scene-verre-active .chatbar{animation:inputArrive .8s var(--ease-out) .1s both,flotteBarre 8s ease-in-out 1s infinite!important;}
@keyframes flotteBarre{0%,100%{translate:0 0}50%{translate:0 -4px}}

/* ---------- Bouton d'envoi : anneau d'or, centre de verre sombre ---------- */
body.scene-verre-active .send-btn{
  position:relative;border:0!important;border-radius:50%!important;color:#f6cf6c!important;
  background:
    radial-gradient(circle at 50% 46%,rgba(46,30,10,.92) 0 55%,transparent 56.5%),
    conic-gradient(from 210deg,#7a4a10,#f9dc8e,#c98d2c,#fff1c2,#a2681a,#7a4a10)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 22px rgba(232,176,64,.28),inset 0 0 0 1px rgba(255,236,180,.5)!important;
  animation:flotteBouton 4.6s ease-in-out infinite;
}
/* respiration de la lueur : l'état fort est pré-rendu ici et s'allume en opacity */
body.scene-verre-active .send-btn::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;
  box-shadow:0 4px 8px rgba(0,0,0,.18),0 0 38px rgba(240,186,72,.5),inset 0 0 0 1px rgba(255,236,180,.7);
  animation:lueurBouton 4.6s ease-in-out infinite;}
body.scene-verre-active .send-btn::before{content:"";position:absolute;inset:10% 18% 50% 18%;border-radius:50% 50% 40% 40%;
  background:linear-gradient(180deg,rgba(255,250,230,.45),transparent);pointer-events:none;}
body.scene-verre-active .send-btn:disabled{opacity:.8!important;}
body.scene-verre-active .send-btn:not(:disabled):hover{transform:scale(1.06)!important;filter:brightness(1.12)!important;}
body.scene-verre-active .send-btn:not(:disabled):active{transform:scale(.92)!important;}
@keyframes flotteBouton{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes lueurBouton{0%,100%{opacity:0}50%{opacity:1}}

/* ---------- Échelle de la référence (composition 16:9) ---------- */
@media (min-width:760px){
  body.scene-verre-active .chatbar{width:min(84vw,1560px)!important;
    padding:clamp(20px,1.7vw,36px) clamp(24px,2vw,42px) clamp(18px,1.5vw,30px)!important;border-radius:clamp(26px,2.2vw,46px)!important;}
  body.scene-verre-active #thread{width:min(85vw,1580px)!important;}
  body.scene-verre-active .chatbar textarea{font-size:clamp(16px,1.75vw,34px)!important;min-height:1.4em!important;}
  body.scene-verre-active .chatbar .row{margin-top:clamp(14px,1.4vw,26px)!important;}
  body.scene-verre-active .pill{font-size:clamp(12px,1.35vw,26px)!important;padding:.55em 1.25em!important;font-weight:500!important;
    background:linear-gradient(180deg,rgba(120,84,34,.55),rgba(60,40,15,.6))!important;border-color:rgba(255,222,150,.6)!important;color:#f3e6c6!important;
    box-shadow:inset 0 1px 0 rgba(255,240,200,.5),0 6px 14px rgba(0,0,0,.3)!important;}
  body.scene-verre-active .pill.active{background:linear-gradient(180deg,rgba(196,146,64,.82),rgba(120,80,24,.85))!important;}
  body.scene-verre-active .send-btn{width:clamp(44px,4.3vw,84px)!important;height:clamp(44px,4.3vw,84px)!important;font-size:clamp(22px,2.3vw,44px)!important;}
  body.scene-verre-active .msg.user{font-size:clamp(15px,1.75vw,33px)!important;}
}
@media (max-width:759px){
  body.scene-verre-active #app{padding-top:max(9vh, calc(env(safe-area-inset-top) + 44px))!important;padding-top:max(9svh, calc(env(safe-area-inset-top) + 44px))!important;}
  body.scene-verre-active .chatbar{width:90vw!important;padding:20px 20px 18px!important;}
  body.scene-verre-active .chatbar .row{margin-top:16px!important;}
  body.scene-verre-active .msg{font-size:15px!important;}
}
@media (prefers-reduced-motion:reduce){
  .scene-marbre,.scene-marbre::after,body.scene-verre-active .msg,body.scene-verre-active .chatbar,body.scene-verre-active .send-btn,body.scene-verre-active .send-btn::after,body.scene-verre-active .msg::after{animation:none!important;}
}

/* Même verre que le catalogue (GUIDE-DEV §3) : liseré clair en haut à
   gauche, plus chaud et plus faible en bas, lueur retenue dans l'épaisseur,
   ombre noire chaude. */
body.scene-verre-active .msg.bot,body.scene-verre-active .chatbar{
  background:linear-gradient(180deg,rgba(255,222,160,.16) 0%,rgba(210,140,50,.10) 38%,rgba(0,0,0,.30) 100%),rgba(20,12,5,.46)!important;
  border:1px solid rgba(255,214,140,.28)!important;
  box-shadow:inset 0 1.5px 0 rgba(255,244,214,.85),inset 1.5px 0 0 rgba(255,232,185,.45),inset 0 -1.5px 0 rgba(255,190,100,.45),
    inset 0 0 26px rgba(255,168,62,.34),inset 0 0 6px rgba(255,205,120,.45),0 46px 60px -26px rgba(0,0,0,.75),0 0 46px rgba(226,172,78,.14)!important;
}
/* LE seul backdrop-filter du chat : la barre de saisie. Les bulles ont un
   fond plus dense à la place. */
body.scene-verre-active .chatbar{-webkit-backdrop-filter:blur(16px) saturate(1.3) brightness(.8);backdrop-filter:blur(16px) saturate(1.3) brightness(.8);}
body.scene-verre-active .msg.bot{
  background:linear-gradient(180deg,rgba(255,222,160,.16) 0%,rgba(210,140,50,.10) 38%,rgba(0,0,0,.30) 100%),rgba(20,12,5,var(--verre-alpha))!important;
}
body.scene-verre-active .msg.bot{color:#FFF7EC!important;text-shadow:0 2px 10px rgba(0,0,0,.6)}

/* lecture de l'historique : plus de profondeur, tout est net */
body.scene-verre-active #thread.lecture .msg{transform:none!important;opacity:1!important;}
body.scene-verre-active #thread.lecture .ci-bloc{translate:none;}
/* la barre de saisie ne se fait jamais écraser par un long fil */
body.scene-verre-active .chatbar,body.scene-verre-active .chat-utilities{flex-shrink:0!important;}
body.scene-verre-active #thread{min-height:0;flex:1 1 auto;}

/* ---------- Pause des boucles d'ambiance (fluidite.js) ----------
   Seules les boucles infinies s'arrêtent ; l'entrée d'une bulle (1re
   animation de la liste) continue toujours. */
html.ambiance-pause body::before,html.ambiance-pause body::after,html.ambiance-pause .ambient::after,
html.ambiance-pause #app .greeting,html.ambiance-pause #app .spark,html.ambiance-pause .chatbar::after,
html.ambiance-pause body.scene-verre-active .send-btn,html.ambiance-pause body.scene-verre-active .send-btn::after,
html.ambiance-pause .msg-content{animation-play-state:paused!important}
html.ambiance-pause body.scene-verre-active .msg,body.scene-verre-active .msg.hors-champ,
html.ambiance-pause body.scene-verre-active .chatbar{animation-play-state:running,paused!important}

/* ---------- Clavier iOS (index.html, visualViewport) ----------
   Ni vh ni dvh ne suivent le clavier : l'écran du chat est recalé sur la
   zone réellement visible, le fil s'arrête au-dessus du clavier. */
html.clavier-ouvert #app{top:var(--vv-top,0px)!important;bottom:auto!important;height:var(--vv-h,100%)!important;}

/* ---------- Soupape (hauteur < 500 px : téléphone en paysage, très petite
   fenêtre) : la scène reste fixe, mais la colonne du chat peut défiler pour
   qu'aucun bouton ne soit jamais hors de portée ; le fil garde une hauteur
   lisible au lieu d'être écrasé à zéro. Au-dessus de 500 px : rien ne change. */
@media (max-height:499px){
  #app{overflow-y:auto!important;overscroll-behavior:contain;}
  body.scene-verre-active #thread{min-height:min(170px,45svh)!important;}
}
/* Code promo KETAMA30 : la seule pastille pleine dorée, qui pulse (doit
   battre les règles !important ci-dessus, y compris la scène de verre) */
.pill.pill-promo,body.scene-verre-active .pill.pill-promo{color:#1a1206!important;font-weight:700!important;border-color:rgba(255,226,150,.95)!important;
  background:linear-gradient(180deg,#F3D27A,#D4AC38 55%,#A97F1F)!important;box-shadow:inset 0 1px 0 rgba(255,250,225,.8),0 0 18px rgba(232,186,80,.55)!important;
  animation:pulsePromo 2.2s ease-in-out infinite}
.pill.pill-promo.actif,body.scene-verre-active .pill.pill-promo.actif{animation:none;background:rgba(51,32,11,.6)!important;color:#F3D27A!important}
@media (prefers-reduced-motion: reduce){.pill.pill-promo{animation:none}}