/* Orvel Meet — la salle de rencontre d'Orvel (« 3050 ») */
:root{--bg:#020308;--verre:rgba(12,16,30,.62);--ligne:rgba(255,255,255,.09);--txt:#eef0fb;--doux:#8d93b4;--c1:#3ce1ff;--c2:#ff28d2;--c3:#ffb03a;--rouge:#ff3b55;
  --grad:linear-gradient(120deg,#3ce1ff,#7b5cff 40%,#ff28d2 75%,#ffb03a);--disp:'Unbounded',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font-family:var(--body);overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
[hidden]{display:none!important}
.fond{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(120% 80% at 50% 120%,#0b0620 0%,transparent 60%),var(--bg)}
.fond i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);opacity:.22;animation:derive 26s ease-in-out infinite alternate}
.fond i:nth-child(1){background:#2E7FFF;left:-20vmax;top:-25vmax}
.fond i:nth-child(2){background:#ff28d2;right:-25vmax;top:10vmax;animation-delay:-8s}
.fond i:nth-child(3){background:#3ce1ff;left:20vmax;bottom:-35vmax;opacity:.12;animation-delay:-15s}
@keyframes derive{to{transform:translate(8vmax,6vmax) scale(1.15)}}
.marque{position:relative;z-index:2;font:600 15px var(--disp);letter-spacing:.32em;display:flex;align-items:center;gap:10px}
.marque b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.point{width:11px;height:11px;border-radius:50%;background:var(--c1);box-shadow:0 0 14px var(--c1)}

/* ---------- avant d'entrer ---------- */
.avant{position:relative;z-index:1;height:100%;overflow:auto;padding:calc(22px + env(safe-area-inset-top)) 22px 30px;display:flex;flex-direction:column;gap:22px}
.avant-grille{flex:1;display:grid;grid-template-columns:1.35fr 1fr;gap:28px;align-items:center;max-width:1180px;width:100%;margin:0 auto}
.apercu{position:relative;aspect-ratio:16/10;border-radius:26px;overflow:hidden;background:#05070f;box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 1px rgba(60,225,255,.2),0 0 80px rgba(46,127,255,.15)}
.apercu video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.apercu-vide{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:12px;color:var(--doux)}
.apercu-vide img{width:110px;mix-blend-mode:screen;animation:respire 3s ease-in-out infinite}
.vu{position:absolute;left:18px;bottom:22px;width:6px;height:60px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden}
.vu i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(var(--c2),var(--c1));transition:height .08s}
.apercu-outils{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:14px}
.rond{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);transition:.2s}
.rond svg,.outil svg{width:24px;height:24px;fill:currentColor}
.rond.off,.outil.off{background:var(--rouge);border-color:transparent;box-shadow:0 0 24px rgba(255,59,85,.45)}
.avant-carte{padding:30px;border-radius:26px;background:var(--verre);backdrop-filter:blur(22px);border:1px solid var(--ligne);display:flex;flex-direction:column;gap:14px}
.sur{margin:0;font:700 12px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--c1)}
.avant-carte h1{margin:0;font:800 clamp(24px,3.4vw,36px)/1.08 var(--disp);letter-spacing:-.02em}
.sous{margin:0;color:var(--doux);font-size:14px}
.champ{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--doux)}
.champ input,.champ select{font:500 15px var(--body);color:var(--txt);background:rgba(255,255,255,.05);border:1px solid var(--ligne);border-radius:12px;padding:12px 13px;outline:0;width:100%}
.champ input:focus{border-color:rgba(60,225,255,.6);box-shadow:0 0 0 3px rgba(60,225,255,.12)}
.champ select option{background:#0b0f1c}
.appareils{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.consent{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:rgba(60,225,255,.06);border:1px solid rgba(60,225,255,.18);font-size:13px;line-height:1.45;color:#cfd3ea}
.consent img{width:34px;mix-blend-mode:screen;flex:none}
.consent p{margin:0}
.entrer{position:relative;margin-top:4px;padding:16px;border-radius:16px;background:var(--grad);color:#05060d;font:800 16px var(--body);letter-spacing:.01em;box-shadow:0 14px 40px rgba(123,92,255,.35);transition:transform .15s}
.entrer:active{transform:scale(.98)}
.entrer:disabled{opacity:.6}
.erreur{margin:0;color:#ff8a9a;font-size:13.5px;min-height:1em}
.attente{position:fixed;inset:0;z-index:5;display:grid;place-items:center;align-content:center;gap:14px;text-align:center;background:rgba(2,3,8,.86);backdrop-filter:blur(18px);padding:20px}
.attente h2{margin:0;font:700 22px var(--disp)}
.attente p{margin:0;color:var(--doux)}
.orbe-attente img{width:140px;mix-blend-mode:screen;animation:respire 2.4s ease-in-out infinite}
@keyframes respire{50%{transform:scale(1.06);filter:drop-shadow(0 0 30px rgba(60,225,255,.6))}}

/* ---------- la salle ---------- */
.salle{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
.haut{display:flex;align-items:center;gap:16px;padding:12px 18px}
.marque.petite{font-size:12.5px;letter-spacing:.26em}
.titre-salle{flex:1;min-width:0;font:600 14px var(--body);color:#cfd3ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chrono{font:700 13px var(--mono);color:var(--doux);padding:6px 10px;border-radius:99px;background:rgba(255,255,255,.05);border:1px solid var(--ligne)}
.rec{font:800 12px var(--mono);color:#fff;background:var(--rouge);padding:6px 10px;border-radius:99px;animation:clignote 1.2s infinite}
@keyframes clignote{50%{opacity:.5}}
.bandeau-notes{display:flex;align-items:center;gap:10px;margin:0 18px;padding:8px 12px;border-radius:14px;background:linear-gradient(90deg,rgba(60,225,255,.12),rgba(255,40,210,.08));border:1px solid rgba(60,225,255,.22);font-size:13px;color:#d9ddf2}
.bandeau-notes img{width:22px;mix-blend-mode:screen}
.bandeau-notes span{flex:1}
.bandeau-notes button{font:600 12px var(--body);color:var(--c1);padding:5px 9px;border-radius:9px;border:1px solid rgba(60,225,255,.3)}
.bandeau-notes.coupe{background:rgba(255,59,85,.12);border-color:rgba(255,59,85,.35)}
.scene{flex:1;min-height:0;display:flex;gap:14px;padding:14px 18px 0}
.tuiles{flex:1;min-width:0;display:grid;gap:12px;align-content:center;grid-template-columns:repeat(var(--col,2),1fr)}
.tuile{position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:#070a14;border:1px solid var(--ligne);box-shadow:0 18px 50px rgba(0,0,0,.45);transition:box-shadow .2s,border-color .2s,transform .3s}
.tuile.parle{border-color:rgba(60,225,255,.75);box-shadow:0 0 0 2px rgba(60,225,255,.35),0 0 40px rgba(60,225,255,.25)}
.tuile video{width:100%;height:100%;object-fit:cover;background:#05070f}
.tuile.moi video{transform:scaleX(-1)}
.tuile.ecran video{object-fit:contain;transform:none}
.tuile .avatar{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#141a33,#05070f)}
.tuile .avatar span{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;font:800 32px var(--disp);color:#05060d;background:var(--grad);box-shadow:0 0 40px rgba(123,92,255,.4)}
.tuile.video-on .avatar{display:none}
.etiquette{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;background:rgba(3,5,12,.66);backdrop-filter:blur(10px);font:600 13px var(--body)}
.etiquette i{font-style:normal}
.tuile .niveau{position:absolute;right:12px;top:12px;width:10px;height:10px;border-radius:50%;background:var(--c1);opacity:0;box-shadow:0 0 12px var(--c1);transition:opacity .1s}
.tuile.parle .niveau{opacity:1}
/* Orvel, présent dans la salle */
.tuile.orvel{background:radial-gradient(circle at 50% 45%,#10163a,#03040b 70%);border-color:rgba(255,40,210,.28)}
.tuile.orvel .coeur-orvel{position:absolute;inset:0;display:grid;place-items:center}
.tuile.orvel .coeur-orvel img{width:min(44%,170px);mix-blend-mode:screen;animation:respire 3.4s ease-in-out infinite}
.tuile.orvel .anneau{position:absolute;width:min(62%,240px);aspect-ratio:1;border-radius:50%;border:2px solid transparent;background:conic-gradient(from 0deg,var(--c1),#7b5cff,var(--c2),var(--c3),var(--c1)) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:tourne 7s linear infinite;opacity:.8}
.tuile.orvel.pense .anneau{animation-duration:1s}
.tuile.orvel.parle-orvel .coeur-orvel img{animation-duration:.6s}
@keyframes tourne{to{transform:rotate(360deg)}}
.tuile.orvel .bulle{position:absolute;left:12px;right:12px;top:12px;padding:10px 12px;border-radius:14px;background:rgba(3,5,12,.78);border:1px solid rgba(255,40,210,.3);font-size:13.5px;line-height:1.4;opacity:0;transform:translateY(-6px);transition:.35s;max-height:55%;overflow:auto}
.tuile.orvel .bulle.on{opacity:1;transform:none}
.tuile.orvel .etat-orvel{position:absolute;right:12px;bottom:12px;font:700 11px var(--mono);letter-spacing:.12em;color:var(--c1)}
/* vue orateur */
.tuiles.orateur{grid-template-columns:1fr;grid-template-rows:1fr auto;align-content:stretch}
.tuiles.orateur .tuile.vedette{aspect-ratio:auto;grid-column:1/-1;min-height:0}
.tuiles.orateur .rangee{display:flex;gap:10px;overflow-x:auto}
.tuiles.orateur .rangee .tuile{width:170px;flex:none}
/* panneau */
.panneau{width:360px;flex:none;display:flex;flex-direction:column;border-radius:22px;background:var(--verre);backdrop-filter:blur(22px);border:1px solid var(--ligne);overflow:hidden}
.onglets{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--ligne)}
.onglets button{flex:1;padding:9px 6px;border-radius:10px;font:600 12.5px var(--body);color:var(--doux)}
.onglets button.on{color:var(--txt);background:rgba(255,255,255,.08)}
.onglets .fermer{flex:none;width:36px;font-size:20px}
.p-contenu{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:14px;overflow:auto}
.notes h4{margin:12px 0 6px;font:700 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--c1)}
.notes h4:first-child{margin-top:0}
.notes ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.5;color:#dfe2f3}
.notes p{margin:0;font-size:14px;line-height:1.55}
.notes .vide{color:var(--doux);font-size:13.5px;line-height:1.5}
.notes .maj{margin-top:10px;font:500 11px var(--mono);color:var(--doux)}
.petit-btn{align-self:flex-start;font:600 12.5px var(--body);color:var(--c1);padding:8px 12px;border-radius:10px;border:1px solid rgba(60,225,255,.3)}
.fil{flex:1;display:flex;flex-direction:column;gap:10px;overflow:auto}
.msg{font-size:14px;line-height:1.45}
.msg b{font-size:12.5px;color:var(--c1)}
.msg.orvel b{color:var(--c2)}
.msg time{font:500 11px var(--mono);color:var(--doux);margin-left:6px}
.form-chat{display:flex;gap:8px}
.form-chat input{flex:1;font:15px var(--body);color:var(--txt);background:rgba(255,255,255,.06);border:1px solid var(--ligne);border-radius:12px;padding:11px 12px;outline:0}
.form-chat button{width:46px;border-radius:12px;background:var(--grad);color:#05060d;font-weight:800}
.astuce{margin:0;font-size:12px;color:var(--doux)}
.personne{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px}
.personne .pastille{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:800 14px var(--disp);color:#05060d;background:var(--grad);flex:none}
.personne small{color:var(--doux)}
.personne .actions{margin-left:auto;display:flex;gap:6px}
.personne .actions button{font:600 12px var(--body);padding:6px 10px;border-radius:9px;background:rgba(255,255,255,.07)}
.personne .actions .oui{background:var(--grad);color:#05060d}
/* sous-titres, réactions, avis */
.sous-titres{position:absolute;left:50%;bottom:calc(100px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(820px,calc(100% - 28px));display:flex;flex-direction:column;gap:6px;pointer-events:none;z-index:4}
.st{align-self:center;max-width:100%;padding:8px 14px;border-radius:12px;background:rgba(2,3,8,.8);backdrop-filter:blur(10px);font:500 16px/1.4 var(--body);text-align:center;animation:monte .25s}
.st b{color:var(--c1);margin-right:6px}
.st.prov{opacity:.7}
@keyframes monte{from{opacity:0;transform:translateY(8px)}}
.reactions{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.reactions span{position:absolute;bottom:90px;font-size:42px;animation:vole 3.2s ease-out forwards}
.reactions span small{display:block;font:600 11px var(--body);text-align:center;color:#fff;opacity:.8}
@keyframes vole{to{transform:translateY(-62vh) scale(1.3);opacity:0}}
.toasts{position:absolute;top:calc(64px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:8;width:min(440px,calc(100% - 28px))}
.toast{padding:12px 14px;border-radius:14px;background:rgba(8,10,22,.94);border:1px solid var(--ligne);font-size:14px;box-shadow:0 16px 40px rgba(0,0,0,.5);animation:monte .25s;display:flex;gap:10px;align-items:center}
.toast.alerte{border-color:rgba(255,176,58,.5)}
.toast button{margin-left:auto;font:700 12.5px var(--body);padding:7px 11px;border-radius:9px;background:var(--grad);color:#05060d}
/* barre d'outils */
.barre{display:flex;justify-content:center;align-items:center;gap:12px;padding:14px 14px calc(14px + env(safe-area-inset-bottom))}
.outil{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:21px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);transition:transform .12s,background .2s}
.outil:active{transform:scale(.93)}
.outil.actif{background:rgba(60,225,255,.22);border-color:rgba(60,225,255,.55)}
.outil.rouge{background:var(--rouge);width:66px;border-radius:26px;border-color:transparent}
.orvel-btn{width:62px;height:62px;background:radial-gradient(circle,#0e1230,#03040b);border:2px solid transparent;background-clip:padding-box;position:relative}
.orvel-btn::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(var(--c1),#7b5cff,var(--c2),var(--c3),var(--c1));z-index:-1;animation:tourne 6s linear infinite}
.orvel-btn img{width:40px;mix-blend-mode:screen}
.orvel-btn.ecoute::before{animation-duration:.8s}
.reac-menu{position:relative}
.reac-choix{position:absolute;bottom:62px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:6px;border-radius:16px;background:rgba(8,10,22,.95);border:1px solid var(--ligne)}
.reac-choix button{font-size:26px;padding:4px 6px;border-radius:10px}
.menu-plus{position:absolute;right:18px;bottom:calc(86px + env(safe-area-inset-bottom));z-index:9;display:flex;flex-direction:column;min-width:260px;padding:8px;border-radius:18px;background:rgba(8,10,22,.96);backdrop-filter:blur(18px);border:1px solid var(--ligne);box-shadow:0 24px 60px rgba(0,0,0,.6)}
.menu-plus button{text-align:left;padding:11px 12px;border-radius:11px;font:500 14.5px var(--body)}
.menu-plus button:hover{background:rgba(255,255,255,.07)}
.menu-plus button.actif{color:var(--c1)}
/* compte rendu */
.modale{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(2,3,8,.82);backdrop-filter:blur(14px);padding:18px}
.cr{position:relative;width:min(720px,100%);max-height:88vh;overflow:auto;padding:28px;border-radius:24px;background:#080b18;border:1px solid rgba(60,225,255,.25);box-shadow:0 30px 90px rgba(0,0,0,.7)}
.cr h2{margin:0 0 4px;font:800 24px var(--disp)}
.cr .fermer{position:absolute;right:14px;top:10px;font-size:26px}
@media (max-width:980px){.panneau{position:absolute;inset:auto 10px calc(84px + env(safe-area-inset-bottom)) 10px;width:auto;height:58vh;z-index:7}}
@media (max-width:760px){
  .avant-grille{grid-template-columns:1fr;gap:16px}
  .avant-carte{padding:20px}
  .appareils{grid-template-columns:1fr}
  .scene{padding:10px 10px 0}
  .tuiles{grid-template-columns:1fr 1fr;gap:8px}
  .tuile{border-radius:16px}
  .bandeau-notes{margin:0 10px;font-size:12px}
  .bandeau-notes span{font-size:12px}
  #coupeTous{display:none}
  .barre{gap:8px;padding:10px 8px calc(10px + env(safe-area-inset-bottom))}
  .outil{width:46px;height:46px;font-size:19px}
  .outil svg{width:21px;height:21px}
  .orvel-btn{width:54px;height:54px}
  .outil.rouge{width:56px}
  .cache-cell{display:none}
  .haut{padding:10px 12px;gap:10px}
  .titre-salle{font-size:12.5px}
  .st{font-size:14px}
}
/* Mosaïque qui tient toujours dans l'écran (lignes calculées en JS : --col / --lig) */
.tuiles.mosaique{grid-template-rows:repeat(var(--lig,1),minmax(0,1fr));align-content:stretch;height:100%}
.tuiles.mosaique .tuile{aspect-ratio:auto;height:100%;min-height:0}
.scene{min-height:0}
/* Logo d'Orvel : jamais de carré autour (bords fondus) */
img[src*="orvel-mark"]{mix-blend-mode:screen;-webkit-mask-image:radial-gradient(circle,#000 52%,transparent 71%);mask-image:radial-gradient(circle,#000 52%,transparent 71%)}
@media (max-width:760px){.tuile.orvel .etat-orvel{display:none}}