/* ============================================================
   NOTRE REFUGE — V76 APPAIRAGE QR + CODE
   ============================================================ */

.refuge76-invite-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.refuge76-invite-head>div>small{
  display:block;
  color:#976679;
  font-size:.46rem;
  font-weight:900;
  letter-spacing:.13em;
}
.refuge76-invite-head>div>strong{
  display:block;
  margin:7px 0 3px;
  color:#45343e;
  font:700 clamp(.74rem,3vw,1rem)/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.04em;
  overflow-wrap:anywhere;
}
.refuge76-invite-head>div>p{
  margin:0;
  color:#896f7b;
  font-size:.52rem;
}
.refuge76-invite-head>span{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:none;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(135deg,#b8728c,#82739d);
  font:500 1rem Georgia,serif;
}
.refuge76-qr-wrap{
  display:grid;
  gap:12px;
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(82,55,69,.09);
  border-radius:17px;
  background:#fffdfb;
  text-align:left;
}
#refuge76-invite-qr{
  width:min(238px,100%)!important;
  height:auto!important;
  aspect-ratio:1;
  justify-self:center;
  border:8px solid #fff;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(50,34,45,.08);
}
.refuge76-qr-wrap>div strong{
  display:block;
  color:#523e49;
  font-size:.64rem;
}
.refuge76-qr-wrap>div p{
  margin:4px 0 0;
  color:#89717d;
  font-size:.51rem;
  line-height:1.5;
}
.refuge76-invite-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
  margin-top:10px;
}
.refuge76-invite-actions button{
  min-height:36px;
  padding:0 11px;
  border:1px solid rgba(82,55,69,.09);
  border-radius:11px;
  color:#6d5360;
  background:#fff;
  font-size:.53rem;
  font-weight:850;
}
.refuge76-invite-actions button:first-child{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,#b66f89,#81739c);
}

/* Join screen */
.refuge76-join-choice{
  display:grid;
  gap:7px;
}
.refuge76-scan-button{
  position:relative;
  min-height:66px;
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:10px!important;
  padding:10px!important;
  overflow:hidden;
  border:1px solid rgba(82,55,69,.10)!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,#fff,#f4e8ed)!important;
  cursor:pointer;
}
.refuge76-scan-button>span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  color:#fff!important;
  background:linear-gradient(135deg,#b8708a,#81739c);
  font-size:.8rem!important;
}
.refuge76-scan-button strong{
  display:block;
  color:#533e49;
  font-size:.68rem;
}
.refuge76-scan-button small{
  display:block;
  margin-top:3px;
  color:#8c7480;
  font-size:.50rem;
  font-weight:600;
}
.refuge76-scan-button input{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}
#refuge76-qr-scan-status{
  color:#8b717e;
  font-size:.50rem;
  line-height:1.45;
}
.refuge76-or{
  position:relative;
  display:grid;
  place-items:center;
  min-height:22px;
  margin:1px 0;
}
.refuge76-or::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:rgba(82,55,69,.08);
}
.refuge76-or span{
  position:relative;
  z-index:1;
  padding:0 8px;
  color:#9a818c;
  background:#fffaf7;
  font-size:.47rem;
  font-weight:800;
}

@media(min-width:620px){
  .refuge76-qr-wrap{
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
  }
  #refuge76-invite-qr{
    justify-self:start;
  }
}