/* Boîte modale : sommet de l'échelle des z-index du site (999, plafond de la règle de conformité),
   au-dessus du voile de chargement (100) et du tutoriel de Lawout (900). Le bandeau des démonstrations
   reste au-dessus mais est rendu inerte tant que la boîte est ouverte. */
#lxRoot{position:fixed;inset:0;z-index:999;display:grid;place-items:center;padding:20px}
#lxRoot[hidden]{display:none}
#lxRoot:not(.is-open){pointer-events:none}

.lx-fond{
  position:absolute;inset:0;background:rgba(10,10,13,.82);
  opacity:0;transition:opacity .18s linear;
}
#lxRoot.is-open .lx-fond{opacity:1}

.lx-boite{
  position:relative;width:100%;max-width:460px;
  background:#121318;border:1px solid #2A2D35;
  padding:28px;
  font-family:Barlow,system-ui,sans-serif;color:#EDEBE6;
  opacity:0;transform:translateY(8px);
  transition:opacity .18s linear,transform .18s ease-out;
}
#lxRoot.is-open .lx-boite{opacity:1;transform:translateY(0)}

.lx-sur{
  margin:0 0 10px;font-family:'Chakra Petch',system-ui,sans-serif;font-weight:700;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#9A9DA6;
}
.lx-titre{
  margin:0 0 12px;font-family:'Chakra Petch',system-ui,sans-serif;font-weight:700;
  font-size:clamp(22px,3vw,28px);line-height:1.1;color:#EDEBE6;
}
.lx-texte{margin:0;font-size:16px;line-height:1.55;color:#EDEBE6}
.lx-cible{color:#31c7d2;overflow-wrap:anywhere}   

.lx-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.lx-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 22px;
  background:transparent;border:2px solid #EDEBE6;color:#EDEBE6;
  font-family:'Chakra Petch',system-ui,sans-serif;font-weight:700;font-size:16px;
  cursor:pointer;transition:border-color .15s linear,color .15s linear;
}
.lx-btn:hover{border-color:#9A9DA6;color:#9A9DA6}
.lx-btn:focus-visible{outline:none;box-shadow:0 2px 0 #31c7d2}
.lx-btn--go{background:#ff9a3c;border-color:#ff9a3c;color:#0A0A0D}
.lx-btn--go:hover{background:#ffad5e;border-color:#ffad5e;color:#0A0A0D}

@media (max-width:419px){
  .lx-boite{padding:22px}
  .lx-actions{flex-direction:column-reverse;align-items:stretch}
}

@media (prefers-reduced-motion:reduce){
  .lx-fond,.lx-boite{transition:none}
  .lx-boite{transform:none}
}