@layer modules{
/* ── Module Render Hdplio (DH.render) : toolbar, modal appareils, mockups, 3D ──
   Modes : .rv-full (studio) · .rv-compact (Copilote) · .rv-mini (Espace Live). */
.rv{display:flex;flex-direction:column;gap:var(--sp-10);position:relative}
.rv [hidden]{display:none!important}   /* l'attribut hidden doit gagner sur les display des règles ci-dessous */
.rv-full{height:70vh;min-height:480px}
.rv-compact{flex:1;min-height:0;height:100%}
.rv-mini{height:100%;gap:0}
.rv-host{display:flex;flex-direction:column;height:100%}

/* ── Toolbar 3 zones : appareil | adresse | actions ── */
.rv-bar{display:flex;align-items:center;gap:var(--sp-6);height:36px;flex:none;
  border-radius:var(--radius);padding:0 var(--sp-4)}
.rv-zone{display:flex;align-items:center;gap:var(--sp-2);flex:none;min-width:0}
.rv-acts{margin-left:auto}
.rv-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:none;background:transparent;color:var(--mut);border-radius:var(--radius-sm);font-size:var(--fs-base);cursor:pointer;padding:0}
.rv-ic:hover{background:var(--chrome-bg);color:var(--chrome-ink)}
.rv-ic:disabled{opacity:.35;cursor:not-allowed}
.rv-ic svg.ic{width:15px;height:15px}
/* ── Même langue que la pilule de l'en-tête d'accueil (.view-toggle, 03-layout.css) ──
   Le GROUPE porte la teinte d'accent (il dit « ce rail est actif ») et le segment courant
   reçoit une pastille CLAIRE surélevée (elle dit « vous êtes ici »). Deux informations, deux
   traitements. L'ancien segment actif était un aplat d'accent plein : il criait plus fort que
   le rendu qu'il commande, et il employait la couleur pour dire une simple position. */
.rv-seg{display:inline-flex;flex:none;align-items:center;background:var(--chrome-bg);border:0;
  border-radius:var(--radius);padding:var(--sp-2);gap:var(--sp-2)}
.rv-seg-b{border:none;background:transparent;color:var(--chrome-ink);font-size:var(--fs-sm);font-weight:var(--fw-label);
  padding:var(--sp-4) var(--sp-10);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;
  transition:background .12s,color .12s}
.rv-seg-b:hover{background:var(--card)}
.rv-seg-b.on{background:var(--on-solid);color:var(--accent);box-shadow:var(--shadow-sm)}
.rv-seg-b.on:hover{background:var(--on-solid)}
/* Sélecteur d'appareil et pilule d'environnement : même famille que le groupe de vues, sans
   filet. Un cadre par contrôle, c'était quatre bordures pour une seule barre. */
.rv-devbtn{display:inline-flex;align-items:center;gap:var(--sp-6);max-width:200px;border:0;
  background:var(--chrome-bg);color:var(--chrome-ink);font-size:var(--fs-sm);font-weight:var(--fw-label);
  padding:var(--sp-6) var(--sp-10);border-radius:var(--radius);cursor:pointer;transition:background .12s}
.rv-devbtn:hover{background:color-mix(in srgb,var(--accent) 18%,var(--card))}
.rv-devbtn svg.ic{width:13px;height:13px;color:var(--mut);flex:none}
.rv-devic{display:inline-flex;flex:none}.rv-devic svg.ic{width:14px;height:14px;color:var(--accent)}
.rv-devlbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-zbtn{flex:none;border:none;background:transparent;color:var(--mut);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;
  padding:var(--sp-4) var(--sp-6);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap}
.rv-zbtn:hover{background:var(--chrome-bg);color:var(--chrome-ink)}
/* barre d'adresse centrale (omnibox) */
.rv-addr{flex:1;min-width:60px;display:flex;align-items:center;gap:0;background:var(--chrome-bg);
  border:0;border-radius:var(--radius);padding:0 var(--sp-8);height:30px;overflow:hidden}
.rv-addr:focus-within{box-shadow:var(--focus)}
.rv-addr-host{flex:none;max-width:38%;color:var(--mut2);font-size:var(--fs-sm);font-family:var(--font-mono);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-addr-in{flex:1;min-width:40px;border:none;background:transparent;color:var(--txt);
  font-family:var(--font-mono);font-size:var(--fs-sm);padding:0 0 0 var(--sp-2);outline:none}
@media(max-width:860px){
  .rv-devbtn .rv-devlbl{display:none}
  .rv-zbtn,.rv-bar [data-act="rotate"],.rv-bar [data-act="shot"],.rv-bar [data-act="fs"]{display:none}
}
/* mini : barre flottante discrète au-dessus de l'iframe */
.rv-bar-mini{position:absolute;top:6px;right:6px;z-index:3;height:auto;padding:var(--sp-2);gap:var(--sp-2);
  background:color-mix(in srgb,var(--card2) 86%,transparent);backdrop-filter:blur(6px);border-radius:var(--radius);opacity:0;transition:opacity .15s}
.rv-mini:hover .rv-bar-mini{opacity:1}

/* ── librairie de captures v2 ── */
.rv-shots{position:absolute;z-index:40;width:340px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--elev-2);display:flex;flex-direction:column;overflow:hidden;max-height:520px}

/* titre + fermer */
.rv-shots-h{display:flex;flex-direction:column;padding:var(--sp-8) var(--sp-8) 0;border-bottom:1px solid var(--line);background:var(--card2);flex:none;gap:var(--sp-6)}
.rv-shots-htop{display:flex;align-items:center;gap:var(--sp-4)}
.rv-shots-htop b{flex:1;font-size:var(--fs-sm);font-weight:var(--fw-strong)}
.rv-shots-htop .rv-ic{width:24px;height:24px}

/* ligne capture : toggle mode + bouton go */
.rv-shots-capture-row{display:flex;align-items:center;gap:var(--sp-6);padding-bottom:var(--sp-8)}
.rv-shots-modes{display:flex;gap:var(--sp-2);background:var(--line);border-radius:var(--radius);padding:var(--sp-2);flex:1}
.rv-shots-mode{flex:1;border:none;background:transparent;color:var(--mut);padding:var(--sp-4) var(--sp-6);border-radius:var(--radius-sm);
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--sp-4);font-size:var(--fs-xs);transition:background .12s,color .12s}
.rv-shots-mode span{display:none}
.rv-shots-mode:hover{background:var(--card);color:var(--txt)}
.rv-shots-mode.on{background:var(--accent);color:var(--on-solid)}
.rv-shots-mode.on span{display:inline}
.rv-shots-mode svg.ic{width:13px;height:13px;flex:none}
.rv-shots-go{flex:none;border:none;background:var(--accent);color:var(--on-solid);border-radius:var(--radius);
  padding:var(--sp-6) var(--sp-12);cursor:pointer;font-size:var(--fs-sm);font-weight:var(--fw-strong);display:flex;align-items:center;gap:var(--sp-4)}
.rv-shots-go:hover{filter:brightness(1.08)}
.rv-shots-go svg.ic{width:13px;height:13px}

/* ligne sélection */
.rv-shots-sel-row{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) 0 var(--sp-8);border-top:1px solid var(--line2);margin:0 -8px;padding-left:var(--sp-8);padding-right:var(--sp-8)}
.rv-shots-sel-copy{flex:1;display:flex;align-items:center;gap:var(--sp-4);border:none;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);
  border-radius:var(--radius-sm);padding:var(--sp-4) var(--sp-8);cursor:pointer;font-size:var(--fs-xs);font-weight:var(--fw-strong)}
.rv-shots-sel-copy:hover{background:color-mix(in srgb,var(--accent) 24%,transparent)}
.rv-shots-sel-copy svg.ic{width:13px;height:13px}
.rv-shots-sel-del,.rv-shots-sel-clr{width:28px;height:28px;font-size:var(--fs-base);border:none;background:transparent;
  color:var(--mut);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center}
.rv-shots-sel-del:hover{background:color-mix(in srgb,#e44 18%,transparent);color:#e44}
.rv-shots-sel-clr:hover{background:var(--line2);color:var(--txt)}
.rv-shots-sel-del svg.ic{width:13px;height:13px}

/* body + dossiers + grille */
.rv-shots-body{flex:1;overflow-y:auto;padding:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-2)}
.rv-shots-empty{padding:var(--sp-28) var(--sp-12);text-align:center;font-size:var(--fs-sm);color:var(--mut);white-space:pre-line;line-height:1.6}

/* en-tête dossier */
.rv-shots-folder-h{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-8) var(--sp-4) var(--sp-4);font-size:var(--fs-xs);font-weight:var(--fw-strong);
  color:var(--mut2);text-transform:uppercase;letter-spacing:.04em}
.rv-shots-folder-h:first-child{padding-top:var(--sp-2)}
.rv-shots-folder-h svg.ic{width:12px;height:12px;color:var(--accent)}
.rv-shots-folder-lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-shots-folder-c{font-size:var(--fs-2xs);background:var(--line2);border-radius:var(--radius);padding:0 var(--sp-4);color:var(--mut)}

.rv-shots-g{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.rv-shots-item{position:relative;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/10;background:var(--bg2);cursor:pointer;transition:outline .1s}
.rv-shots-item img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.rv-shots-item.sel{outline:2px solid var(--accent);outline-offset:1px}
.rv-shots-check{position:absolute;top:4px;left:4px;background:var(--accent);color:var(--on-solid);border-radius:50%;
  width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.rv-shots-check svg.ic{width:10px;height:10px}
.rv-shots-foot{position:absolute;inset:auto 0 0;background:linear-gradient(transparent,rgba(0,0,0,.74));
  padding:var(--sp-4) var(--sp-4) var(--sp-4);display:none;align-items:center;gap:var(--sp-2)}
.rv-shots-item:hover .rv-shots-foot{display:flex}
.rv-shots-lbl{font-size:var(--fs-2xs);color:var(--on-solid);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85}
.rv-shots-btn{background:rgba(255,255,255,.18);border:none;color:var(--on-solid);border-radius:var(--radius-sm);
  padding:var(--sp-2) var(--sp-4);cursor:pointer;display:flex;align-items:center}
.rv-shots-btn svg.ic{width:11px;height:11px}
.rv-shots-btn:hover{background:rgba(255,255,255,.32)}
.rv-shots-del:hover{background:rgba(220,50,50,.75)}

/* ── Spinner capture + loader inline ── */
@keyframes rv-spin{to{transform:rotate(360deg)}}
.rv-shots-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);
  border-top-color:currentColor;border-radius:50%;animation:rv-spin .65s linear infinite;flex:none}
.rv-shots-go .rv-shots-spinner{border-top-color:var(--on-solid);border-color:rgba(255,255,255,.3)}
.rv-shots-capturing{display:flex;align-items:center;justify-content:center;gap:var(--sp-8);
  padding:var(--sp-18) var(--sp-12);font-size:var(--fs-sm);color:var(--mut);animation:rv-fade-in .2s}
.rv-shots-capturing--top{padding:var(--sp-8) var(--sp-12);background:color-mix(in srgb,var(--accent) 8%,transparent);
  border-radius:var(--radius);margin-bottom:var(--sp-4);color:var(--accent);font-size:var(--fs-xs)}
.rv-shots-capturing .rv-shots-spinner{border-color:var(--line);border-top-color:var(--mut)}
.rv-shots-capturing--top .rv-shots-spinner{border-color:color-mix(in srgb,var(--accent) 30%,transparent);border-top-color:var(--accent)}
@keyframes rv-fade-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* feedback inline (ok / err) */
.rv-shots-fb{font-size:var(--fs-xs);border-radius:var(--radius);padding:var(--sp-6) var(--sp-10);margin-bottom:var(--sp-4);animation:rv-fade-in .2s;font-weight:var(--fw-medium)}
.rv-shots-fb--ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.rv-shots-fb--err{background:color-mix(in srgb,var(--err) 12%,transparent);color:var(--err)}

/* ── env switcher dans la barre adresse ── */
.rv-addr-env{display:inline-flex;align-items:center;gap:var(--sp-4);border:none;background:transparent;
  color:var(--chrome-ink);font-size:var(--fs-xs);font-weight:var(--fw-label);padding:var(--sp-2) var(--sp-4);
  border-radius:var(--radius-sm);cursor:pointer;flex:none}
.rv-addr-env:hover{background:var(--card);color:var(--chrome-ink)}
.rv-addr-env svg.ic{width:11px;height:11px}
.rv-addr-envdot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--mut2)}
.rv-addr-envlbl{font-family:var(--font-mono);font-size:var(--fs-xs)}
.rv-addr-sep{color:var(--mut2);padding:0 var(--sp-1);font-size:var(--fs-md);font-family:var(--font-mono);flex:none}

/* dropdown environnements */
.rv-env-drop{position:absolute;z-index:45;min-width:200px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--elev-2);padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-1)}
.rv-env-item{display:flex;align-items:center;gap:var(--sp-6);width:100%;text-align:left;border:none;
  background:transparent;color:var(--txt);font-size:var(--fs-sm);padding:var(--sp-6) var(--sp-8);border-radius:var(--radius-sm);cursor:pointer}
.rv-env-item:hover{background:var(--line2)}
.rv-env-item.on{color:var(--accent)}
.rv-env-item.on svg.ic{color:var(--accent)}
.rv-env-item svg.ic{margin-left:auto;width:12px;height:12px}

/* ── lightbox plein écran ── */
.rv-lightbox{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rv-lb-bg{position:absolute;inset:0;background:rgba(0,0,0,.88);backdrop-filter:blur(4px);cursor:pointer}
.rv-lb-content{position:relative;display:flex;flex-direction:column;align-items:center;
  max-width:calc(100vw - 80px);max-height:calc(100vh - 80px);gap:0}
.rv-lb-img{max-width:100%;max-height:calc(100vh - 130px);border-radius:var(--radius);
  box-shadow:var(--elev-2);object-fit:contain;display:block}
.rv-lb-bar{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-8) var(--sp-10);background:rgba(30,30,36,.85);
  backdrop-filter:blur(8px);border-radius:var(--radius);margin-top:var(--sp-10);min-width:240px}
.rv-lb-info{flex:1;font-size:var(--fs-sm);color:rgba(255,255,255,.8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-lb-acts{display:flex;gap:var(--sp-2)}
.rv-lb-acts .rv-ic{color:rgba(255,255,255,.7);border-radius:var(--radius-sm)}
.rv-lb-acts .rv-ic:hover{background:rgba(255,255,255,.15);color:var(--on-solid)}

/* ── menu « ⋯ » ── */
.rv-menu{position:absolute;z-index:40;min-width:230px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--elev-2);padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-1)}
.rv-mi{display:flex;align-items:center;border:none;background:transparent;color:var(--txt);text-align:left;
  font-size:var(--fs-sm);padding:var(--sp-6) var(--sp-8);border-radius:var(--radius-sm);cursor:pointer}
.rv-mi:hover{background:var(--line2)}
.rv-mi.on::after{content:'✓';margin-left:auto;color:var(--accent);font-weight:var(--fw-bold)}
.rv-mh{font-size:var(--fs-2xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.05em;color:var(--mut2);padding:var(--sp-6) var(--sp-8) var(--sp-2)}
.rv-mrow{display:flex;gap:var(--sp-4);padding:0 var(--sp-6) var(--sp-4);flex-wrap:wrap}
.rv-mc{border:1px solid var(--line);background:var(--bg2);color:var(--mut);font-size:var(--fs-xs);
  padding:var(--sp-2) var(--sp-8);border-radius:var(--radius);cursor:pointer}
.rv-mc.on{background:var(--accent);border-color:var(--accent);color:var(--on-solid)}
.rv-msep{height:1px;background:var(--line);margin:var(--sp-4) var(--sp-2)}

/* ── scène ── */
.rv-stage{flex:1;position:relative;display:grid;place-items:center;overflow:auto;border:1px solid var(--line);
  border-radius:var(--radius-sm);background-color:var(--bg2);
  background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:18px 18px;padding:var(--sp-18)}
.rv-stage.sc-uni{background-image:none;background-color:color-mix(in srgb,var(--mut) 14%,var(--bg2))}
.rv-stage.sc-grad{background-image:linear-gradient(135deg,#5b6bd622,#a86bd644),
  radial-gradient(var(--line) 1px,transparent 1px)}
.rv-mini .rv-stage{border:none;border-radius:0;padding:0;background-image:none}
.rv-sizer{position:relative;width:100%;height:100%}
.rv-mock{position:relative;box-sizing:border-box}
.rv-frame{position:relative;width:100%;height:100%;background:var(--paper)}
.rv-frame.framed{border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,.28),0 0 0 1px var(--line);overflow:hidden}
.rv-frame iframe{width:100%;height:100%;border:none;background:var(--paper);display:block}
.rv-frame.loading::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.65);z-index:1}
.rv-frame.loading::after{content:'';position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
  border:3px solid rgba(120,120,140,.3);border-top-color:var(--accent);border-radius:50%;animation:rvspin .7s linear infinite;z-index:2}
@keyframes rvspin{to{transform:rotate(360deg)}}
.rv:fullscreen{background:var(--bg);padding:var(--sp-14);gap:var(--sp-10)}
.rv:fullscreen .rv-stage{border-radius:0}

/* ── mockups vectoriels (bezels = RV_FRAMES côté JS, style inline pour padding/radius) ── */
.rv-mock.df{background:linear-gradient(160deg,#2a2b31,#141519 62%);
  box-shadow:0 18px 50px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(0,0,0,.5);overflow:visible}
.rv-mock.df .rv-frame{overflow:hidden;border-radius:inherit}
.rv-mock.df .rv-frame{border-radius:0}
.rv-mock.df-iphone-island .rv-frame,.rv-mock.df-android-punch .rv-frame{border-radius:34px}
.rv-mock.df-iphone-chin .rv-frame{border-radius:var(--radius-xs)}
.rv-mock.df-tablet .rv-frame{border-radius:var(--radius)}
/* Dynamic Island / punch-hole (au-dessus du contenu, comme en vrai) */
.rv-mock.df-iphone-island::after{content:'';position:absolute;top:22px;left:50%;transform:translateX(-50%);
  width:108px;height:30px;border-radius:var(--radius-modal);background:#0b0b0e;z-index:3;pointer-events:none}
.rv-mock.df-iphone-island.rot::after{top:50%;left:26px;transform:translateY(-50%);width:30px;height:108px}
.rv-mock.df-android-punch::after{content:'';position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:13px;height:13px;border-radius:50%;background:#0b0b0e;z-index:3;pointer-events:none}
.rv-mock.df-iphone-chin::after{content:'';position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  width:34px;height:34px;border-radius:50%;border:2px solid #3a3b42;z-index:3;pointer-events:none}
.rv-mock.df-iphone-chin::before{content:'';position:absolute;top:22px;left:50%;transform:translateX(-50%);
  width:56px;height:7px;border-radius:var(--radius-xs);background:#3a3b42;z-index:3;pointer-events:none}
/* boutons latéraux des téléphones/tablettes */
.rv-mock.df-iphone-island .rv-frame::after{content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
/* laptop : base clavier qui déborde */
.rv-mock.df-laptop::after{content:'';position:absolute;left:-7%;bottom:0;width:114%;height:22px;
  background:linear-gradient(180deg,#2e2f36,#191a1f);border-radius:var(--radius-sm) var(--radius-sm) var(--radius) var(--radius);
  box-shadow:var(--elev-2);z-index:0}
.rv-mock.df-laptop .rv-frame{border-radius:var(--radius-sm);z-index:1}
/* moniteur / TV : pied */
.rv-mock.df-monitor::after,.rv-mock.df-tv::after{content:'';position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);
  width:30%;height:40px;background:linear-gradient(180deg,#22232a,#15161a);
  clip-path:polygon(38% 0,62% 0,100% 78%,100% 100%,0 100%,0 78%);z-index:0}
.rv-mock.df-tv::after{height:26px;width:46%;clip-path:polygon(8% 0,92% 0,100% 100%,0 100%)}
.rv-mock.df-monitor .rv-frame,.rv-mock.df-tv .rv-frame{border-radius:var(--radius-xs);z-index:1}
/* montre : couronne + bracelet */
.rv-mock.df-watch .rv-frame{border-radius:52px}
.rv-mock.df-watch::after{content:'';position:absolute;right:-7px;top:32%;width:9px;height:30px;
  border-radius:var(--radius-sm);background:linear-gradient(90deg,#3a3b42,#202127);z-index:3}
.rv-mock.df-watch::before{content:'';position:absolute;left:50%;transform:translateX(-50%);
  top:-26px;width:58%;height:calc(100% + 52px);background:linear-gradient(180deg,#26272d,#1b1c21);
  border-radius:26px;z-index:-1}
.rv-mock.df-watch-round{border-radius:50%!important}
.rv-mock.df-watch-round .rv-frame{border-radius:50%}
.rv-mock.df-watch-round::before{content:'';position:absolute;left:50%;transform:translateX(-50%);
  top:-22px;width:46%;height:calc(100% + 44px);background:linear-gradient(180deg,#26272d,#1b1c21);
  border-radius:15px;z-index:-1}
.rv-mock.df-watch-round::after{content:'';position:absolute;right:-6px;top:40%;width:8px;height:22px;
  border-radius:var(--radius-xs);background:#33343b;z-index:3}

/* ── overlays (URL absente / aperçu bloqué) ── */
.rv-ovl{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-8);text-align:center;padding:var(--sp-22);background:color-mix(in srgb,var(--bg2) 92%,transparent)}
.rv-ovl-ic svg.ic{width:30px;height:30px;color:var(--mut2)}
.rv-ovl-t{font-weight:var(--fw-strong);font-size:var(--fs-base)}
.rv-ovl-d{font-size:var(--fs-sm);color:var(--mut);max-width:380px;line-height:var(--lh-normal)}
.rv-ovl-a{display:flex;gap:var(--sp-8)}

/* ── côte à côte ── */
.rv-split{display:grid;grid-template-columns:minmax(0,1fr) 422px;gap:var(--sp-16);width:100%;height:100%}
@media(max-width:900px){ .rv-split{grid-template-columns:1fr;grid-auto-rows:1fr} }
.rv-col{display:flex;flex-direction:column;gap:var(--sp-6);min-width:0;min-height:0}
.rv-col-h{display:flex;align-items:center;gap:var(--sp-6);font-size:var(--fs-xs);font-weight:var(--fw-strong);color:var(--mut);
  text-transform:uppercase;letter-spacing:.04em;flex:none}
.rv-col-h svg.ic{width:14px;height:14px}
.rv-col .rv-frame{position:relative;flex:1;width:100%;overflow:hidden}
.rv-col.mob .rv-frame{width:390px;max-width:100%;margin:0 auto}
.rv-frame.sc iframe{position:absolute;top:0;left:0}

/* ── vue 3D (maquettes du projet) ── */
.rv-3dwrap{flex:1;min-height:0;display:grid;grid-template-columns:230px 1fr;gap:var(--sp-10)}
.rv3d-rail{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:hidden}
.rv3d-rail-h{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-8) var(--sp-10);border-bottom:1px solid var(--line);background:var(--card2)}
.rv3d-rail-h b{flex:1;font-size:var(--fs-sm)}
.rv3d-list{flex:1;overflow:auto}
.rv3d-item{display:flex;align-items:center;gap:var(--sp-6);width:100%;text-align:left;border:none;border-bottom:1px solid var(--line2);
  background:transparent;padding:var(--sp-8) var(--sp-10);cursor:pointer;border-radius:0}
.rv3d-item:hover{background:var(--line2)}
.rv3d-item.on{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.rv3d-ext{flex:none;font-size:var(--fs-2xs);font-weight:var(--fw-bold);text-transform:uppercase;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:var(--radius-sm);padding:var(--sp-1) var(--sp-4)}
.rv3d-name{flex:1;min-width:0;font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv3d-size{flex:none;font-size:var(--fs-2xs);color:var(--mut2);font-variant-numeric:tabular-nums}
.rv3d-msg{padding:var(--sp-14) var(--sp-12);font-size:var(--fs-sm);color:var(--mut);line-height:var(--lh-normal)}
.rv3d-main{display:grid;grid-template-columns:1fr;min-height:0}
.rv-3dwrap.mix .rv3d-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-10)}
.rv3d-web{display:none;flex-direction:column;gap:var(--sp-6);min-width:0;min-height:0}
.rv-3dwrap.mix .rv3d-web{display:flex}
.rv3d-web iframe{flex:1;width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper)}
.rv3d-stage{position:relative;min-height:0;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--accent) 7%,var(--bg2)),var(--bg2) 70%);overflow:hidden}
.rv3d-stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.rv3d-hint{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:var(--fs-2xs);color:var(--mut2);
  background:color-mix(in srgb,var(--bg2) 80%,transparent);padding:var(--sp-2) var(--sp-10);border-radius:var(--radius);pointer-events:none}
.rv3d-ovl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-10);
  background:color-mix(in srgb,var(--bg2) 86%,transparent);z-index:4;font-size:var(--fs-sm);color:var(--mut);text-align:center;padding:var(--sp-18)}

/* ── modal de sélection du support ── */
.rvdm{display:flex;flex-direction:column;gap:var(--sp-12);min-height:380px}
.rvdm-top{display:flex;align-items:center;gap:var(--sp-10)}
.rvdm-top input{flex:1}
.rvdm-body{display:grid;grid-template-columns:148px 1fr;gap:var(--sp-12);min-height:0}
.rvdm-cats{display:flex;flex-direction:column;gap:var(--sp-2);align-content:start}
.rvdm-cat{text-align:left;border:none;background:transparent;color:var(--mut);font-size:var(--fs-sm);font-weight:var(--fw-medium);
  padding:var(--sp-6) var(--sp-10);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap}
.rvdm-cat:hover{background:var(--line2);color:var(--txt)}
.rvdm-cat.on{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.rvdm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:var(--sp-8);
  align-content:start;max-height:46vh;overflow:auto;padding:var(--sp-2)}
.rvdm-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);border:1px solid var(--line);
  background:var(--card);border-radius:var(--radius);padding:var(--sp-12) var(--sp-8) var(--sp-8);cursor:pointer;text-align:center}
.rvdm-card:hover{border-color:var(--accent)}
.rvdm-card.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--card))}
.rvdm-card b{font-size:var(--fs-xs);font-weight:var(--fw-strong);line-height:1.25}
.rvdm-meta{font-size:var(--fs-2xs);color:var(--mut2);font-variant-numeric:tabular-nums}
.rvdm-silwrap{display:flex;align-items:center;justify-content:center;height:76px}
/* > svg : NE PAS cibler les <svg> imbriqués (viewport du rendu réel - le CSS écraserait leurs width/height) */
.rvdm-silwrap > svg{height:100%;width:auto;max-width:104px;filter:drop-shadow(0 4px 7px rgba(0,0,0,.30))}
.rvdm-fav{position:absolute;top:5px;right:7px;font-size:var(--fs-md);color:var(--mut2);cursor:pointer;line-height:var(--lh-flat)}
.rvdm-fav:hover{color:var(--warn)}
.rvdm-fav.on{color:var(--warn)}
.rvdm-free{display:flex;align-items:center;gap:var(--sp-6);border-top:1px solid var(--line);padding-top:var(--sp-10);font-size:var(--fs-sm);color:var(--mut)}
.rvdm-free input[type=number]{width:74px;padding:var(--sp-4) var(--sp-6);font-size:var(--fs-sm);text-align:center;
  font-family:var(--font-mono);background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-sm)}
.rv-x{font-size:var(--fs-xs);color:var(--mut2)}

/* ── moteur « Visuels » (cibles natives : captures/vidéos dans le bon cadre) ── */
.rv-viswrap{flex:1;min-height:0;display:grid;grid-template-columns:230px 1fr;gap:var(--sp-10)}
.rv-vis-rail{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:hidden}
.rv-vis-rail-h{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-8) var(--sp-10);border-bottom:1px solid var(--line);background:var(--card2)}
.rv-vis-rail-h b{flex:1;font-size:var(--fs-sm)}
.rv-vis-rail-h label{cursor:pointer}
.rv-vis-list{flex:1;overflow:auto}
.rv-vis-item{display:flex;align-items:center;gap:var(--sp-8);width:100%;text-align:left;border:none;border-bottom:1px solid var(--line2);
  background:transparent;padding:var(--sp-6) var(--sp-8);cursor:pointer;border-radius:0}
.rv-vis-item:hover{background:var(--line2)}
.rv-vis-item.on{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.rv-vis-th{flex:none;width:40px;height:40px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--bg2) center/cover no-repeat;display:flex;align-items:center;justify-content:center}
.rv-vis-th.rv-vis-vid svg.ic{width:16px;height:16px;color:var(--mut2)}
.rv-vis-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.rv-vis-name{font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-vis-devlbl{font-size:var(--fs-2xs);color:var(--mut2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Lot 3 - badge « aperçu natif » + états de glisser-déposer */
.rv-vis-native{display:inline-block;margin-left:var(--sp-4);padding:0 var(--sp-4);border-radius:var(--radius-sm);font-size:var(--fs-2xs);font-weight:var(--fw-strong);
  color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);vertical-align:middle}
.rv-vis-item{transition:background .12s,box-shadow .12s,opacity .12s}
.rv-vis-item.rv-drag{opacity:.45}
.rv-vis-item.rv-over{box-shadow:inset 0 2px 0 var(--accent)}
.rv-vis-main{display:flex;flex-direction:column;min-height:0;gap:var(--sp-8)}
.rv-vis-stage{flex:1;position:relative;display:grid;place-items:center;overflow:auto;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--accent) 7%,var(--bg2)),var(--bg2) 70%)}
.rv-vis-media{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.rv-vis-stage .rv-mock:not(.df) .rv-vis-media{background:transparent}
.rv-vis-foot{display:flex;align-items:center;gap:var(--sp-10);flex:none;padding:var(--sp-2)}
.rv-vis-devwrap{display:flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-sm);color:var(--mut)}
.rv-vis-devwrap svg.ic{width:15px;height:15px}
.rv-vis-devsel{font-size:var(--fs-sm);padding:var(--sp-4) var(--sp-6);background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--txt);max-width:230px}
.rv-vis-cap{flex:1;min-width:0;font-size:var(--fs-sm);color:var(--mut2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── render embarqué dans le panel Copilote / widget Live ── */
.cw-pane .rv-compact{padding:var(--sp-8)}
.vp-w-body .rv-mini{position:absolute;inset:0}

}