/* Module autonome : Triboulet répond dans la marge droite sans recouvrir le cadre principal. */
.triboulet-oracle {
  position:fixed;
  top:252px;
  right:18px;
  z-index:28;
  width:min(360px, calc((100vw - 1040px) / 2 - 30px));
  min-width:218px;
  color:#fff2e9;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.triboulet-oracle::before {
  content:"";
  position:absolute;
  top:78px;
  left:-36px;
  width:36px;
  height:1px;
  background:linear-gradient(90deg,rgba(255,71,40,0),rgba(255,105,68,.78));
  box-shadow:0 0 9px rgba(255,54,34,.68);
}

.triboulet-oracle__face-frame {
  position:relative;
  width:126px;
  margin:0 auto -23px;
  z-index:2;
  pointer-events:none;
}

.triboulet-oracle__face {
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
  filter:drop-shadow(0 0 8px rgba(255,36,52,.24));
}

.triboulet-oracle__face .t-line,
.triboulet-oracle__face .t-hot,
.triboulet-oracle__face .t-soft,
.triboulet-oracle__face .t-bell,
.triboulet-oracle__face .t-mouth-shape,
.triboulet-oracle__face .t-spark {
  vector-effect:non-scaling-stroke;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.triboulet-oracle__face .t-line {
  stroke:#ff4a2f;
  stroke-width:2.5;
  filter:url(#tribouletGlow);
}

.triboulet-oracle__face .t-hot {
  stroke:#ffb18d;
  stroke-width:1.35;
  filter:url(#tribouletGlowSoft);
}

.triboulet-oracle__face .t-soft {
  stroke:#ffe1d4;
  stroke-width:1.65;
  filter:url(#tribouletGlowSoft);
}

.triboulet-oracle__face .t-bell {
  stroke:#ff9b65;
  stroke-width:1.8;
  fill:rgba(255,113,70,.10);
  filter:url(#tribouletGlowSoft);
}

.triboulet-oracle__face .t-spark {
  stroke:#ff9a76;
  stroke-width:2;
  filter:url(#tribouletGlow);
}

.triboulet-oracle__face .t-mouth-shape {
  stroke:#ffe7dc;
  stroke-width:1.75;
  fill:rgba(255,71,53,.17);
  filter:url(#tribouletGlowSoft);
  opacity:0;
}

.triboulet-oracle__face .t-mouth-closed { opacity:1; }
.triboulet-oracle.is-speaking .t-mouth-closed { opacity:0; }
.triboulet-oracle.is-speaking[data-mouth="a"] .t-mouth-a,
.triboulet-oracle.is-speaking[data-mouth="e"] .t-mouth-e,
.triboulet-oracle.is-speaking[data-mouth="i"] .t-mouth-i,
.triboulet-oracle.is-speaking[data-mouth="o"] .t-mouth-o,
.triboulet-oracle.is-speaking[data-mouth="u"] .t-mouth-u { opacity:1; }

.triboulet-oracle.is-speaking .t-brow-left {
  animation:tribouletBrowLeft .38s steps(2,end) infinite;
  transform-origin:72px 102px;
}
.triboulet-oracle.is-speaking .t-brow-right {
  animation:tribouletBrowRight .44s steps(2,end) infinite;
  transform-origin:148px 102px;
}

@keyframes tribouletBrowLeft {
  0%,100% { transform:rotate(0deg); }
  50% { transform:rotate(-5deg); }
}
@keyframes tribouletBrowRight {
  0%,100% { transform:rotate(0deg); }
  50% { transform:rotate(5deg); }
}

.triboulet-oracle__box {
  position:relative;
  padding:34px 12px 12px;
  border:1px solid rgba(255,116,67,.42);
  background:
    linear-gradient(135deg,rgba(105,0,31,.14),transparent 38%),
    linear-gradient(180deg,rgba(16,3,7,.97),rgba(5,1,3,.99));
  box-shadow:
    0 16px 32px rgba(0,0,0,.42),
    0 0 24px rgba(221,0,47,.09),
    inset 0 0 0 1px rgba(255,235,218,.035);
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
}

.triboulet-oracle__box::before {
  content:"";
  position:absolute;
  inset:5px;
  pointer-events:none;
  border:1px solid rgba(255,222,202,.07);
  clip-path:inherit;
}

.triboulet-oracle__title {
  position:relative;
  z-index:1;
  margin:0 0 8px;
  color:#ffb58d;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.19em;
  text-align:center;
  text-transform:uppercase;
}

.triboulet-oracle__answer {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:94px;
  margin:0 0 9px;
  padding:12px;
  border:1px solid rgba(255,119,77,.22);
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),
    radial-gradient(circle at 50% 0,rgba(255,52,48,.09),transparent 68%),
    rgba(11,2,5,.93);
  color:#fff0e8;
  font-size:clamp(.78rem,1.05vw,.94rem);
  font-weight:750;
  line-height:1.35;
  letter-spacing:.035em;
  text-align:center;
  text-transform:uppercase;
  overflow-wrap:anywhere;
  box-shadow:inset 0 0 18px rgba(255,39,52,.035);
}

.triboulet-oracle__phonemes {
  position:relative;
  z-index:1;
  min-height:22px;
  margin:0 0 8px;
  color:#d98968;
  font-size:.55rem;
  font-weight:800;
  letter-spacing:.18em;
  text-align:center;
  text-transform:uppercase;
}

.triboulet-oracle.is-speaking .triboulet-oracle__phonemes {
  color:#ffd1b9;
  text-shadow:0 0 8px rgba(255,87,58,.5);
}

.triboulet-oracle__form {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 45px;
  gap:7px;
}

.triboulet-oracle__input,
.triboulet-oracle__send {
  height:42px;
  border-radius:0;
  font:inherit;
}

.triboulet-oracle__input {
  min-width:0;
  padding:0 11px;
  border:1px solid rgba(255,129,81,.30);
  background:rgba(12,2,5,.96);
  color:#fff4ed;
  font-size:.82rem;
}

.triboulet-oracle__input::placeholder { color:#916f62; }

.triboulet-oracle__send {
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,143,96,.40);
  background:linear-gradient(180deg,rgba(121,17,34,.97),rgba(66,6,16,.99));
  color:#fff2e9;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,222,204,.08);
}

.triboulet-oracle__send svg {
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.triboulet-oracle__send:hover { filter:brightness(1.14); }
.triboulet-oracle__input:focus,
.triboulet-oracle__send:focus-visible {
  outline:2px solid #ffe0c9;
  outline-offset:2px;
}

@media (max-width:1540px) {
  .triboulet-oracle {
    position:relative;
    top:auto;
    right:auto;
    width:min(500px,calc(100% - 28px));
    min-width:0;
    margin:0 auto 34px;
  }
  .triboulet-oracle::before { display:none; }
}

@media (max-width:620px) {
  .triboulet-oracle {
    width:min(430px,calc(100% - 14px));
    margin-bottom:22px;
  }
  .triboulet-oracle__face-frame { width:108px; }
  .triboulet-oracle__box { padding-top:30px; }
  .triboulet-oracle__answer { min-height:82px; }
}

@media (prefers-reduced-motion:reduce) {
  .triboulet-oracle.is-speaking .t-brow-left,
  .triboulet-oracle.is-speaking .t-brow-right { animation:none; }
}