/* Lexi — charte Law Right : bleu nuit #100b46, bordeaux #80074b, or #e9a825 */

/* ---------- Bandeau d'accueil, en tete de page ---------- */
.lexi-hero{
  --lx-navy:#100b46; --lx-deep:#09062f; --lx-wine:#80074b;
  --lx-gold:#e9a825; --lx-gold-l:#f1bf2d;
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--lx-navy) 0%,var(--lx-deep) 62%,#170d3d 100%);
  color:#fff;border-radius:22px;margin:22px auto 0;max-width:1140px;
  box-shadow:0 18px 48px rgba(16,11,70,.28);
  display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  padding:26px 30px;
}
.lexi-hero::after{
  content:"";position:absolute;inset:auto -60px -120px auto;width:320px;height:320px;
  background:radial-gradient(circle,rgba(233,168,37,.22),transparent 68%);pointer-events:none
}
.lexi-hero-fig{
  width:138px;height:138px;object-fit:contain;flex:none;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.42));
  animation:lexi-float 5.5s ease-in-out infinite;position:relative;z-index:1
}
.lexi-hero-body{position:relative;z-index:1;min-width:0}
.lexi-hero .lexi-name{
  margin:0;font-size:1.42rem;font-weight:700;letter-spacing:-.01em;line-height:1.15
}
.lexi-hero .lexi-role{
  margin:3px 0 0;font-size:.79rem;color:var(--lx-gold-l);
  letter-spacing:.04em;text-transform:lowercase
}
.lexi-hero .lexi-q{
  margin:13px 0 0;font-size:1.06rem;line-height:1.5;color:#eae7ff;max-width:60ch
}
.lexi-hero .lexi-q b{color:#fff;font-weight:600}
.lexi-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px}
.lexi-chips button{
  font:inherit;font-size:.88rem;font-weight:500;cursor:pointer;
  background:rgba(255,255,255,.09);color:#fff;
  border:1.5px solid rgba(233,168,37,.42);
  padding:9px 15px;border-radius:999px;line-height:1.35;
  transition:background .16s cubic-bezier(.2,.8,.3,1),border-color .16s,transform .16s
}
.lexi-chips button:hover{
  background:var(--lx-gold);color:var(--lx-navy);
  border-color:var(--lx-gold);transform:translateY(-2px)
}
.lexi-hero .lexi-disc{
  margin:14px 0 0;font-size:.73rem;color:rgba(255,255,255,.6);line-height:1.45
}
.lexi-hero-x{
  position:absolute;top:12px;right:16px;z-index:2;
  border:0;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;
  font-size:1.25rem;line-height:1;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;transition:background .15s
}
.lexi-hero-x:hover{background:var(--lx-wine)}
@media(max-width:720px){
  .lexi-hero{grid-template-columns:1fr;text-align:center;padding:24px 20px;gap:14px;margin-top:16px}
  .lexi-hero-fig{width:104px;height:104px;margin:0 auto}
  .lexi-hero .lexi-q{margin-left:auto;margin-right:auto}
  .lexi-chips{justify-content:center}
}

/* ---------- Pastille flottante, une fois le bandeau ferme ---------- */
.lexi-wrap{position:fixed;right:22px;bottom:22px;z-index:90;font-family:inherit}
.lexi-pill{
  width:124px;height:124px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:linear-gradient(160deg,#100b46,#09062f);
  box-shadow:0 10px 32px rgba(16,11,70,.45),0 0 0 4px rgba(233,168,37,.62);
  display:grid;place-items:center;
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s
}
.lexi-pill:hover{
  transform:translateY(-4px) scale(1.04);
  box-shadow:0 14px 34px rgba(16,11,70,.48),0 0 0 3px #e9a825
}
.lexi-pill img{width:104px;height:104px;object-fit:contain;animation:lexi-float 5.5s ease-in-out infinite}
@keyframes lexi-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.lexi-panel{
  position:absolute;right:0;bottom:140px;width:min(370px,calc(100vw - 44px));
  background:#fff;color:#100b46;border-radius:18px;padding:20px 21px 16px;
  box-shadow:0 26px 64px rgba(16,11,70,.34);border:1px solid rgba(16,11,70,.12)
}
.lexi-x{
  position:absolute;top:9px;right:11px;border:0;background:0;cursor:pointer;
  font-size:1.5rem;line-height:1;color:#6b6a8a;padding:4px 7px;border-radius:8px
}
.lexi-x:hover{color:#80074b;background:rgba(128,7,75,.08)}
.lexi-head{display:flex;gap:13px;align-items:center;margin-bottom:12px}
.lexi-fig{width:66px;height:66px;object-fit:contain;flex:none}
.lexi-hello{margin:0;font-weight:700;font-size:1.08rem}
.lexi-panel .lexi-role{margin:2px 0 0;font-size:.76rem;color:#6b6a8a;line-height:1.35}
.lexi-intro{margin:0 0 14px;font-size:.92rem;line-height:1.5;color:#2a2752}
.lexi-sug{
  margin:0 0 8px;font-size:.7rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#80074b
}
.lexi-qs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.lexi-qs button{
  width:100%;text-align:left;font:inherit;font-size:.88rem;cursor:pointer;
  background:rgba(16,11,70,.05);border:1px solid rgba(16,11,70,.1);
  color:#100b46;padding:10px 12px;border-radius:10px;line-height:1.4;
  transition:background .15s,border-color .15s
}
.lexi-qs button:hover{background:rgba(233,168,37,.18);border-color:#e9a825}
.lexi-panel .lexi-disc{
  margin:14px 0 0;padding-top:11px;border-top:1px solid rgba(16,11,70,.1);
  font-size:.73rem;color:#6b6a8a;line-height:1.45
}
.lexi-pill:focus-visible,.lexi-x:focus-visible,.lexi-qs button:focus-visible,
.lexi-hero-x:focus-visible,.lexi-chips button:focus-visible{
  outline:3px solid #e9a825;outline-offset:3px
}
@media (prefers-reduced-motion:reduce){
  .lexi-pill img,.lexi-hero-fig{animation:none}
  .lexi-pill,.lexi-chips button{transition:none}
}
@media(max-width:480px){
  .lexi-wrap{right:14px;bottom:14px}
  .lexi-pill{width:96px;height:96px}
  .lexi-pill img{width:80px;height:80px}
  .lexi-fig{width:54px;height:54px}
}

/* ---------- Champ libre : poser sa question en toutes lettres ---------- */
.lexi-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.lexi-ask{
  display:flex;gap:10px;align-items:center;margin-top:14px;
  /* neutralise tout style de formulaire herite de la page hote */
  background:transparent;border:0;padding:0;box-shadow:none;border-radius:999px
}
.lexi-ask::before,.lexi-ask::after{content:none}
.lexi-ask input{
  flex:1;min-width:0;font:inherit;font-size:.95rem;
  padding:11px 15px;border-radius:999px;
  border:1.5px solid rgba(233,168,37,.42);
  background:rgba(255,255,255,.1);color:#fff;
  transition:border-color .16s,background .16s
}
.lexi-ask input::placeholder{color:rgba(255,255,255,.55)}
.lexi-ask input:focus{
  outline:0;border-color:#e9a825;background:rgba(255,255,255,.16)
}
.lexi-ask button{
  font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;flex:none;
  padding:11px 20px;border-radius:999px;border:0;
  background:#e9a825;color:#100b46;
  transition:background .16s,transform .16s
}
.lexi-ask button:hover{background:#f1bf2d;transform:translateY(-1px)}
.lexi-status{
  margin:8px 0 0;font-size:.84rem;font-style:italic;
  color:#f1bf2d;min-height:1.2em;line-height:1.4
}
.lexi-status.answer{font-style:normal;white-space:pre-line;line-height:1.55;color:#fff;max-width:80ch}

/* Le meme champ, dans le panneau blanc de la pastille */
.lexi-panel .lexi-ask{margin:0 0 13px}
.lexi-panel .lexi-ask input{
  border-color:rgba(16,11,70,.18);background:rgba(16,11,70,.04);color:#100b46;
  font-size:.9rem;padding:10px 13px
}
.lexi-panel .lexi-ask input::placeholder{color:#8a88a8}
.lexi-panel .lexi-ask input:focus{border-color:#e9a825;background:#fff}
.lexi-panel .lexi-ask button{padding:10px 16px;font-size:.86rem}
.lexi-panel .lexi-status{color:#80074b;margin:0 0 11px}
.lexi-panel .lexi-status.answer{color:#2a2752;max-height:260px;overflow:auto}

.lexi-ask input:focus-visible,.lexi-ask button:focus-visible{
  outline:3px solid #e9a825;outline-offset:3px
}
@media(max-width:560px){
  .lexi-ask{flex-direction:column;align-items:stretch}
  .lexi-ask button{width:100%}
}

/* ---------- Lui parler : dictee vocale, sur clic du visiteur ---------- */
.lexi-mic{
  flex:none;cursor:pointer;padding:0;
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  line-height:0;
  border:1.5px solid rgba(233,168,37,.42);
  background:rgba(255,255,255,.1);color:#f1bf2d;
  transition:background .16s,border-color .16s,color .16s,transform .16s
}
.lexi-mic:hover{background:rgba(233,168,37,.2);border-color:#e9a825;transform:translateY(-1px)}
.lexi-mic svg{display:block;width:20px;height:20px;flex:none}
.lexi-mic.on{
  background:#80074b;border-color:#80074b;color:#fff;
  animation:lexi-listen 1.3s ease-in-out infinite
}
@keyframes lexi-listen{
  0%,100%{box-shadow:0 0 0 0 rgba(128,7,75,.55)}
  50%{box-shadow:0 0 0 9px rgba(128,7,75,0)}
}
.lexi-panel .lexi-mic{
  width:40px;height:40px;color:#80074b;
  border-color:rgba(16,11,70,.18);background:rgba(16,11,70,.04)
}
.lexi-panel .lexi-mic:hover{background:rgba(233,168,37,.18);border-color:#e9a825}
.lexi-panel .lexi-mic.on{background:#80074b;color:#fff;border-color:#80074b}
.lexi-mic:focus-visible{outline:3px solid #e9a825;outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .lexi-mic.on{animation:none}
}