@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:380px;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:inline}   /* les trois modes se lisent (une icône de liste et des ciseaux ne disaient rien, 2026-10-21) */
.rv-shots-mode:hover{background:var(--card);color:var(--txt)}
.rv-shots-mode.on{background:var(--accent);color:var(--on-solid)}
.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;object-position:top;display:block;pointer-events:none}   /* le haut de la page, pas son milieu */
/* La case de sélection, au survol (Cmd+clic restait à deviner) ; cochée, elle reste. */
.rv-shots-pick{position:absolute;top:4px;left:4px;width:18px;height:18px;border-radius:var(--radius-xs);border:1px solid var(--on-solid);background:rgba(0,0,0,.45);color:transparent;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;z-index:2}
.rv-shots-pick svg.ic{width:11px;height:11px}
.rv-shots-item:hover .rv-shots-pick{display:flex}
.rv-shots-item.sel .rv-shots-pick{display: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:disabled{opacity:.4;cursor:not-allowed}   /* un site en ligne, hors app de bureau : il ne s'affiche pas dans un cadre */
.rv-env-item:disabled:hover{background:transparent}
.rv-env-hint{font-size:var(--fs-2xs);color:var(--mut2);padding:var(--sp-4) var(--sp-8) var(--sp-2);border-top:1px solid var(--line2);margin-top:var(--sp-2);line-height:var(--lh-normal)}
.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-menu-zoom{min-width:150px}
.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 webview{width:100%;height:100%;border:none;background:var(--paper);display:flex}   /* le navigateur intégré de l'app de bureau (site en ligne) */
.rv-frame.loading::before{content:'';position:absolute;inset:0;background:color-mix(in srgb,var(--bg2) 65%,transparent);z-index:1}   /* le voile suit le thème (blanc en sombre avant le 2026-10-21) */
.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}

/* ── Les appareils réels (CDC_APPSTUDIO_MODIF D5, L7, 2026-11-05) : le châssis est dessiné en SVG (rvChassis, 32-render.js),
   sous l'écran et au-dessus de lui (île, perforation, encoche) ; le montage ne porte plus de fond ni d'ombre à lui. Les
   matières sont des couleurs réelles, les mêmes dans les deux thèmes (un iPhone ne change pas de couleur la nuit) ; seuls le
   liseré qui détache l'appareil du fond et son ombre suivent le thème (N20, écrits deux fois). Trois teintes par matière
   (c clair, m moyen, s sombre) pour le dégradé de la tranche. */
:root{ --rv-titane-c:#dcd7cd; --rv-titane-m:#b4aea3; --rv-titane-s:#7a756c; --rv-alu-c:#e6e8ec; --rv-alu-m:#c4c8ce; --rv-alu-s:#8a8e95;
  --rv-graphite-c:#63666d; --rv-graphite-m:#3b3d42; --rv-graphite-s:#222326; --rv-onyx-c:#55575e; --rv-onyx-m:#2e3035; --rv-onyx-s:#17181b;
  --rv-bleu-c:#a9c8ec; --rv-bleu-m:#76a3d9; --rv-bleu-s:#4f7db6; --rv-noir-c:#34353a; --rv-noir-m:#18191c; --rv-noir-s:#0c0c0e;
  --rv-verre:#0a0b0d; --rv-verre-blanc:#f4f4f2; --rv-ile:#000; --rv-objectif:#1b2234; --rv-grille:#2c2e34; --rv-action:#f2661c;
  --rv-bracelet-c:#535862; --rv-bracelet-s:#2d3138; --rv-reflet:#fff;
  --rv-lisere:rgba(0,0,0,.30); --rv-ombre-appareil:drop-shadow(0 14px 24px rgba(0,0,0,.22)) drop-shadow(0 2px 5px rgba(0,0,0,.16)); }
html[data-theme="dark"]{ --rv-lisere:rgba(255,255,255,.24); --rv-ombre-appareil:drop-shadow(0 14px 28px rgba(0,0,0,.55)) drop-shadow(0 2px 5px rgba(0,0,0,.4)); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --rv-lisere:rgba(255,255,255,.24); --rv-ombre-appareil:drop-shadow(0 14px 28px rgba(0,0,0,.55)) drop-shadow(0 2px 5px rgba(0,0,0,.4)); } }
.rv-mock.df.df-fiche{background:none;box-shadow:none;border-radius:0}
.rv-mock.df-fiche::before,.rv-mock.df-fiche::after{content:none}
.rv-mock.df-fiche .rv-frame{z-index:1;background:var(--paper)}
/* Safari ne rogne pas toujours la page d'une iframe (couche composée) par l'arrondi de son parent, ni par clip-path : un
   iPhone 15 pivoté montrait les coins carrés de la page débordant du verre (le proprio, 2026-11-05, deux captures). Un
   masque WebKit opaque force le rognage de toute la couche ; il ne change rien à ce qui est montré. Des coins peints
   par-dessus avaient été essayés (4ddd2119) : le coin carré de l'écran sort du verre et même du boîtier, il ne peut
   pas être caché par une peinture, il faut qu'il soit rogné. */
.rv-mock.df-fiche .rv-frame{-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(white,black)}
.rv-mock.df-fiche .rv-frame iframe{border-radius:inherit}
.rv-chassis{position:absolute;overflow:visible;pointer-events:none}
.rv-chassis-dessous{z-index:0;filter:var(--rv-ombre-appareil)}
.rv-chassis-dessus{z-index:3}
.rv-ecran-temoin{width:100%;height:100%;background:linear-gradient(165deg,color-mix(in srgb,var(--accent) 22%,var(--paper)),var(--paper) 55%,color-mix(in srgb,var(--accent) 10%,var(--paper)))}   /* la planche des modèles : un écran sans page */

/* ── 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 : une colonne par appareil choisi (CDC_APPSTUDIO_MODIF D4, L4, 2026-11-05) ──
   Chaque colonne est un montage de la vue simple (.rv-sizer > .rv-mock > .rv-frame, posé par poserMontage), surmonté de son
   étiquette ; la rangée défile en largeur quand les appareils ne tiennent pas (safe center : centrée quand elle tient, collée
   à gauche quand elle déborde, sans perdre son début). L'ancienne grille à deux colonnes figées (ordinateur et téléphone de
   390 px) et ses cadres « framed sc » sans classe d'appareil sont retirés. */
/* Le retrait de la rangée laisse paraître l'ombre des appareils (un conteneur qui défile rogne ce qui dépasse de lui). La
   colonne prend la largeur de son appareil ou de son étiquette, la plus grande : un téléphone réduit à 40 % coupait son nom. */
.rv-split{display:flex;align-items:flex-start;justify-content:safe center;gap:var(--sp-24);width:100%;height:100%;
  overflow:auto;box-sizing:border-box;padding:0 var(--sp-24) var(--sp-24)}
.rv-col{display:flex;flex-direction:column;align-items:center;gap:var(--sp-6);flex:none;width:max-content;min-width: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-split .rv-col-h{align-self:stretch;min-width:0;text-transform:none;letter-spacing:0;font-weight:var(--fw-regular);color:var(--txt);height:var(--outils-h, 26px)}
.rv-split .rv-col-h b{font-weight:var(--fw-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rv-col-ic{display:inline-flex;flex:none;color:var(--mut)}
.rv-col-dim{color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.rv-col-act{margin-left:auto}
.rv-col-act + .rv-col-act{margin-left:0}
.rv-col-act[aria-pressed="true"]{color:var(--outils-accent, var(--accent))}
.rv-split .rv-sizer{flex:none}

/* ── vue 3D (maquettes du projet) ── */
/* minmax(0,1fr) : en « 1fr », la colonne prenait la largeur de l'appareil posé dedans et la vue débordait à droite de la
   fenêtre (capture du proprio, 2026-10-21, vue Visuels). */
.rv-3dwrap{flex:1;min-height:0;display:grid;grid-template-columns:230px minmax(0,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)}
.rv3d-ovl>.sqk{align-self:stretch;flex:1;padding:var(--sp-12)}   /* la maquette qui se charge (CDC_SQUELETTES Q3, 2026-10-28) */

/* ── 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)}
/* « Plusieurs » (L4) : une case en haut à gauche de chaque carte, cochée quand l'appareil est dans le côte à côte. */
.rvdm-coche{position:absolute;top:6px;left:7px;display:grid;place-items:center;width:16px;height:16px;box-sizing:border-box;border:1px solid var(--line);
  border-radius:var(--radius-xs);background:var(--card);color:var(--on-solid)}
.rvdm-coche.on{background:var(--accent);border-color:var(--accent)}
.rvdm-coche svg.ic{width:12px;height:12px}
.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 minmax(0,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%);
  padding:var(--sp-18)}
.rv-vis-media{width:100%;height:100%;object-fit:contain;display:block;background:#000}
/* Dans un cadre d'appareil, le visuel remplit l'écran depuis le haut, comme la capture composée (rvCompositeVisual) :
   en « contain » sur fond noir, une capture d'une autre forme laissait deux bandes noires (capture du proprio, 2026-10-21). */
.rv-vis-stage .rv-mock.df .rv-vis-media{object-fit:cover;object-position:top center}
.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:340px}
.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}

/* ── L'Aperçu en plein écran (app du Studio) : la barre flotte au-dessus du rendu, centrée, au plus 60 % de la largeur
   de l'écran (le proprio, 2026-10-21 : « le deuxième menu en mode flottant juste au-dessus du rendu de la page, max 60 %
   de la largeur de l'écran, centré »). Elle ne prend plus une rangée pleine largeur : la scène monte sous elle et garde,
   en haut, la place de la barre pour que l'appareil ne passe pas dessous. Sous 860 px, la barre reprend la largeur
   disponible (moins les marges) : à 60 %, ses commandes ne tiendraient plus. Sans ombre (le proprio, 2026-10-21 : « retire
   la box shadow de la barre flottante »), un filet suffit. Au-dessus des calques de la scène (« Pas
   d'aperçu web », z-index 5), qui la délavaient au premier banc. Panneau du Pilote et Copilote inchangés.
   EN BAS depuis CDC_APPSTUDIO_MODIF L1 (le proprio, 2026-11-03 : « la barre flottante au-dessus de l'aperçu, plutôt en
   dessous ») : elle flotte à --sp-12 du bas de la fenêtre, la scène lui garde sa place EN BAS (padding-bottom), et les
   menus qu'elle ouvre montent au lieu de descendre (rvPlacerMenu, 32-render.js). */
#dhapp .rv-full{--rv-barre-h:44px;gap:0}
#dhapp .rv-full>.rv-bar{position:absolute;z-index:6;bottom:var(--sp-12);left:50%;transform:translateX(-50%);
  box-sizing:border-box;width:60vw;max-width:calc(100% - 2 * var(--sp-16));height:var(--rv-barre-h);
  padding:0 var(--sp-6)}   /* fond, filet, rayon et ombre : la pièce .barre-flottante de 22c (CDC_APPSTUDIO_MODIF L2) */
#dhapp .rv-full>.rv-stage{padding-bottom:calc(var(--rv-barre-h) + 2 * var(--sp-12) + var(--sp-6))}
/* Visuels et 3D : la liste et la scène gardent une marge sur les trois autres bords (la liste touchait le bord gauche
   et le pied le bas de la fenêtre, capture du proprio, 2026-10-21). */
#dhapp .rv-full>.rv-3dwrap,#dhapp .rv-full>.rv-viswrap,#dhapp .rv-full>.rv-uniwrap{padding:var(--sp-12) var(--sp-12) calc(var(--rv-barre-h) + 2 * var(--sp-12))}
/* Précédent / suivant, en tête de l'adresse : plus petits que les actions, ils appartiennent au champ. */
.rv-addr .rv-nav{width:22px;height:22px;flex:none}
.rv-addr .rv-nav svg.ic{width:13px;height:13px}
.rv-addr .rv-addr-env{margin-left:var(--sp-2)}
.bsd-render .rv-addr .rv-nav{display:none}   /* le panneau du Pilote cache déjà le chemin (09-ai.css) : sans lui, précédent et suivant n'ont rien à dire */
@media(max-width:860px){ #dhapp .rv-full>.rv-bar{width:calc(100% - 2 * var(--sp-16))} }


/* ── Favoris et identifiants (2026-10-24) : l'étoile et les deux boutons au bout de l'adresse, leurs bulles, et le bandeau
   de connexion posé au-dessus de la page (le compte à rebours de 3 s). ── */
.rv-addr .rv-fav,.rv-addr [data-act="favs"],.rv-addr [data-act="ids"]{width:24px;height:24px;flex:none}
.rv-addr .rv-fav svg.ic,.rv-addr [data-act="favs"] svg.ic,.rv-addr [data-act="ids"] svg.ic{width:14px;height:14px}
.rv-addr .rv-fav.on{color:var(--warn)}
.rv-addr .rv-fav.on svg .du{fill-opacity:1}
.rv-pop{position:absolute;z-index:46;width:320px;max-width:calc(100% - 2 * var(--sp-16));max-height:60vh;overflow:auto;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--elev-2);padding:var(--sp-10);display:flex;flex-direction:column;gap:var(--sp-8)}
.rv-pop-t{font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--txt)}
.rv-pop-vide,.rv-pop-note{margin:0;font-size:var(--fs-xs);color:var(--mut);line-height:1.45}
.rv-fav-liste,.rv-id-liste{display:flex;flex-direction:column;gap:var(--sp-1)}
.rv-fav-ligne,.rv-id-ligne{display:flex;align-items:center;gap:var(--sp-4);border-radius:var(--radius-sm)}
.rv-fav-ligne:hover,.rv-id-ligne:hover{background:var(--line2)}
.rv-fav-ligne.on .rv-fav-aller b{color:var(--accent)}
.rv-fav-aller{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1);padding:var(--sp-6) var(--sp-8);border:0;background:none;
  color:var(--txt);font:inherit;text-align:left;cursor:pointer}
.rv-fav-aller b{font-size:var(--fs-sm);font-weight:var(--fw-medium);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-fav-aller span{font-size:var(--fs-2xs);color:var(--mut);font-family:var(--font-mono);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-fav-act{width:24px;height:24px;flex:none;opacity:0}
.rv-fav-ligne:hover .rv-fav-act,.rv-id-ligne:hover .rv-fav-act,.rv-fav-act:focus-visible{opacity:1}
.rv-fav-nom{flex:1;margin:var(--sp-4);height:28px;font-size:var(--fs-sm)}
.rv-pop-ajout{display:inline-flex;align-items:center;gap:var(--sp-6);padding:var(--sp-6) var(--sp-8);border:0;border-radius:var(--radius-sm);background:var(--line2);
  color:var(--txt);font:inherit;font-size:var(--fs-xs);cursor:pointer}
.rv-pop-ajout svg.ic{width:13px;height:13px}
.rv-id-ligne{padding:var(--sp-4) var(--sp-6);font-size:var(--fs-xs)}
.rv-id-ou{flex:none;padding:0 var(--sp-6);border-radius:var(--radius-pill);background:var(--line2);color:var(--mut);font-size:var(--fs-2xs)}
.rv-id-ligne b{flex:1;min-width:0;font-weight:var(--fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-id-auto{display:inline-flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-2xs);color:var(--mut);cursor:pointer}
.rv-id-form{display:flex;flex-direction:column;gap:var(--sp-6);padding-top:var(--sp-8);border-top:1px solid var(--line2)}
.rv-id-form input:not([type=checkbox]),.rv-id-form select{width:100%;height:30px;font-size:var(--fs-sm)}
.rv-pop-ok{align-self:flex-end;height:28px;padding:0 var(--sp-12);border:0;border-radius:var(--radius-sm);background:var(--accent);color:var(--on-solid);
  font:inherit;font-size:var(--fs-xs);font-weight:var(--fw-medium);cursor:pointer}
.rv-pop-ok:hover{background:var(--accent-h)}
.rv-cnx{position:absolute;z-index:44;top:var(--sp-12);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:var(--sp-8);max-width:calc(100% - 2 * var(--sp-16));
  padding:var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-12);border-radius:var(--radius-pill);background:var(--card);border:1px solid var(--line);box-shadow:var(--elev-2);
  font-size:var(--fs-xs);color:var(--txt)}
.rv-cnx>span:not(.rv-cnx-n){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-cnx button{flex:none;display:inline-flex;align-items:center;gap:var(--sp-4);height:24px;padding:0 var(--sp-10);border:0;border-radius:var(--radius-pill);background:var(--line2);
  color:var(--txt);font:inherit;font-size:var(--fs-xs);cursor:pointer}
.rv-cnx button svg.ic{width:12px;height:12px}
.rv-cnx button[data-cnx="go"]{background:var(--accent);color:var(--on-solid)}
.rv-cnx .rv-cnx-x{width:24px;padding:0;justify-content:center;background:transparent;color:var(--mut)}
.rv-cnx-n{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-solid);font-weight:var(--fw-strong);
  font-variant-numeric:tabular-nums}
.rv-cnx.alerte{border-color:color-mix(in srgb,var(--warn) 50%,var(--line))}

/* ── La DA commune (CDC_DA_COMMUNE, 2026-10-24) ─────────────────────────────
   Le proprio : « et idem ici » (une seule DA, celle du Tableur et du Document, qu'il change à un endroit). Ses décisions des
   21 au 24-10 restent (la barre flotte au-dessus du rendu, centrée, au plus 60 % de l'écran, sans ombre ; Pivoter, les
   environnements grisés, précédent et suivant, l'étoile, les favoris et la clé au bout de l'adresse) : la DA les habille.
   L'accent de l'Aperçu est celui des apps (22c), posé une fois sur ses racines (la page rendue vit dans son iframe et garde
   le sien) ; les boutons ont le gabarit de .outil, les segments celui de .pied-bascule, l'adresse et l'appareil celui des
   champs de la rangée, les menus et les bulles la carte de .flottant-app ; l'adresse quitte la chasse fixe. */
.rv-full, .rv-compact, .rv-mini, .rv-menu, .rv-pop, .rv-cnx, .rv-shots{ --accent:var(--outils-accent); --accent-h:color-mix(in srgb, var(--outils-accent) 85%, var(--txt)); --accent-texte:var(--outils-accent); }
.rv-ic{ width:var(--outils-h); height:var(--outils-h); color:var(--txt); border-radius:var(--radius-sm); }
.rv-ic:hover{ background:var(--outils-survol); color:var(--txt); }
.rv-ic svg.ic{ width:var(--outils-icone); height:var(--outils-icone); }
.rv-seg{ height:26px; box-sizing:border-box; padding:0 var(--sp-2); border-radius:var(--radius-sm); background:var(--outils-champ); }
.rv-seg-b{ height:22px; padding:0 var(--sp-8); border-radius:var(--radius-xs); color:var(--mut); font-weight:var(--fw-regular); }
.rv-seg-b:hover{ background:none; color:var(--txt); }
.rv-seg-b.on, .rv-seg-b.on:hover{ background:var(--card); color:var(--txt); box-shadow:inset 0 0 0 1px var(--line); }
.rv-devbtn{ height:var(--outils-h); padding:0 var(--sp-8) 0 var(--sp-10); border:1px solid transparent; border-radius:var(--radius-sm); background:var(--outils-champ); color:var(--txt); font-weight:var(--fw-regular); }
.rv-devbtn:hover{ background:var(--outils-champ); border-color:var(--line); }
.rv-devic svg.ic{ color:var(--txt); }
.rv-zbtn{ height:var(--outils-h); color:var(--txt); font-size:var(--fs-sm); }
.rv-zbtn:hover{ background:var(--outils-survol); color:var(--txt); }
.rv-addr{ height:var(--outils-h); box-sizing:border-box; border:1px solid transparent; border-radius:var(--radius-sm); background:var(--outils-champ); }
.rv-addr:hover{ border-color:var(--line); }
.rv-addr:focus-within{ border-color:var(--outils-accent-filet); background:var(--card); box-shadow:none; }
.rv-addr-host, .rv-addr-in, .rv-fav-aller span, .rv-addr-envlbl, .rv-addr-sep{ font-family:inherit; }
.rv-addr-env:hover{ background:var(--outils-survol); color:var(--txt); }
.rv-env-drop{ border-radius:var(--radius-sm); }
.rv-env-item:hover{ background:var(--outils-survol); }
.rv-menu, .rv-pop, .rv-shots{ border-radius:var(--radius-sm); }
.rv-mi:hover, .rv-fav-ligne:hover, .rv-id-ligne:hover{ background:var(--outils-survol); }
.rv-mi.on{ background:var(--outils-accent-doux); }
.rv-mh{ font-size:var(--fs-xs); font-weight:var(--fw-strong); text-transform:none; letter-spacing:0; color:var(--mut); }
.rv-mc{ border-color:transparent; border-radius:var(--radius-sm); background:var(--outils-champ); color:var(--txt); }
.rv-mc.on{ border-color:transparent; background:var(--outils-accent-doux); color:var(--txt); }
.rv-shots-modes{ background:var(--outils-champ); border-radius:var(--radius-sm); }
.rv-shots-mode.on{ background:var(--card); color:var(--txt); box-shadow:inset 0 0 0 1px var(--line); }
/* CDC_DA_COMMUNE § 6 : les gestes posés dans l'adresse sont des petits boutons (22 px) ; les boutons des écrans d'accueil
   (.mini, 29 px) à la hauteur de la rangée. */
.rv-addr .rv-fav, .rv-addr [data-act="favs"], .rv-addr [data-act="ids"], .rv-addr .rv-nav, .rv-addr-env{ width:auto; min-width:var(--ctl-h-petit); height:var(--ctl-h-petit); }
.rv-full .mini{ height:var(--outils-h); padding-block:0; box-sizing:border-box; }
.rv-addr-env{ font-size:var(--fs-sm); font-weight:var(--fw-regular); } .rv-addr-envlbl{ font-size:var(--fs-sm); }   /* S7 : 11 px en 450 avant */
.rv-pop-ok, .rv-shots-go{ border-radius:var(--radius-sm); }

/* ── Le menu des genres (CDC_APPSTUDIO_MODIF D3, L3, 2026-11-05) : il remplace la bascule Web / Visuels / 3D. Le bouton a le
   gabarit du bouton d'appareil (un champ de la rangée, 22c), compté serré pour que la barre ne s'élargisse pas (le cahier :
   « au moins aussi étroite qu'avec la bascule ») ; la liste a la carte des menus de la barre, une ligne par genre avec son
   icône, un genre grisé dit sa raison sous son nom. .rv-seg reste : la fenêtre des appareils s'en sert (portrait, paysage). */
.rv-genre{ display:inline-flex; flex:none; }
.rv-genre-btn{ display:inline-flex; align-items:center; gap:var(--sp-4); height:var(--outils-h); box-sizing:border-box; padding:0 var(--sp-4) 0 var(--sp-6);
  border:1px solid transparent; border-radius:var(--radius-sm); background:var(--outils-champ); color:var(--txt); font:inherit; font-size:var(--fs-sm); cursor:pointer; white-space:nowrap; }
.rv-genre-btn:hover{ border-color:var(--line); }
.rv-genre-btn[aria-expanded="true"]{ border-color:var(--outils-accent-filet); }
.rv-genre-ic{ display:inline-flex; flex:none; }
.rv-genre-ic svg.ic{ width:var(--outils-icone); height:var(--outils-icone); }
.rv-genre-btn > svg.ic{ width:var(--ic-chevron); height:var(--ic-chevron); color:var(--mut); flex:none; }
.rv-genre-liste{ position:absolute; z-index:46; min-width:220px; display:flex; flex-direction:column; gap:var(--sp-1); padding:var(--sp-4);
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--elev-2); }
.rv-genre-op{ display:flex; align-items:center; gap:var(--sp-8); width:100%; box-sizing:border-box; padding:var(--sp-6) var(--sp-8); border:0; border-radius:var(--radius-sm);
  background:transparent; color:var(--txt); font:inherit; font-size:var(--fs-sm); text-align:left; cursor:pointer; }
.rv-genre-op:hover:not(.off), .rv-genre-op:focus-visible{ background:var(--outils-survol); outline:none; }
.rv-genre-op[aria-selected="true"]{ background:var(--outils-accent-doux); }
.rv-genre-op.off{ cursor:default; color:var(--mut); }
.rv-genre-op.off .rv-genre-ic{ opacity:.55; }
.rv-genre-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--sp-1); }
.rv-genre-txt b{ font-weight:var(--fw-regular); }
.rv-genre-txt small{ font-size:var(--fs-xs); color:var(--mut); white-space:normal; line-height:1.35; }
.rv-genre-coche{ display:inline-flex; flex:none; color:var(--outils-accent); }
.rv-genre-coche svg.ic{ width:var(--ic-petit); height:var(--ic-petit); }

/* ── Le lecteur universel (CDC_APPSTUDIO_MODIF partie U, 32b-lecteur-universel.js, 2026-11-05) : la liste du dossier à gauche
   (la forme de la 3D et des Visuels), le document lu à droite sous sa tête (nom, « Lecture seule », « Ouvrir dans <l'app> »).
   Jetons seulement : clair et sombre suivent le thème (N20). */
.rv-uniwrap{flex:1;min-height:0;display:flex}
.rv-uni{flex:1;min-height:0;min-width:0;display:grid;grid-template-columns:230px minmax(0,1fr);gap:var(--sp-10)}
.rv-uni-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.rv-uni-tete{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-6) var(--sp-10);border-bottom:1px solid var(--line);background:var(--card2);min-height:var(--outils-h)}
.rv-uni-nom{flex:1;min-width:0;font-size:var(--fs-sm);font-weight:var(--fw-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-uni-lecture{flex:none;font-size:var(--fs-2xs);color:var(--mut);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-1) var(--sp-6)}
.rv-uni-app{flex:none;gap:var(--sp-6);font-size:var(--fs-sm)}
.rv-uni-corps{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}
.rv-uni-corps>.rv3d-msg{flex:1;display:flex;flex-direction:column}
.rv-uni-note{margin:0;padding:var(--sp-8) var(--sp-12);font-size:var(--fs-sm);color:var(--mut);line-height:var(--lh-normal)}
/* Audio (L8) : la forme d'onde prend la place, la rangée d'outils dessous, les deux jauges de niveau au bout. */
.rv-son{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-12);outline:none}
.rv-son:focus-visible{box-shadow:inset 0 0 0 2px var(--outils-accent-filet)}
.rv-son-onde{flex:1;min-height:120px;width:100%;border-radius:var(--radius-sm);cursor:pointer;touch-action:none}
.rv-son-barre{padding:0;flex-wrap:wrap;row-gap:var(--sp-6)}
.rv-son-temps{font-size:var(--fs-sm);font-variant-numeric:tabular-nums;padding:0 var(--sp-6);white-space:nowrap}
.rv-son-champ{display:inline-flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-sm);color:var(--mut);padding:0 var(--sp-4)}
.rv-son-vol input{width:90px}
.rv-son-niveaux{display:inline-flex;flex-direction:column;gap:3px;margin-left:auto;width:120px}
.rv-son-niv{display:block;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.rv-son-niv i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--ok,var(--accent))}
.rv-son-niv.crete i{background:var(--err,var(--accent))}
/* Vidéo (L9) : l'image au centre sur le fond de page, la rangée d'outils dessous ; en plein écran, la boîte entière. */
.rv-vid{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-12);outline:none;background:var(--card)}
.rv-vid:focus-visible{box-shadow:inset 0 0 0 2px var(--outils-accent-filet)}
.rv-vid-scene{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:#000;border-radius:var(--radius-sm);overflow:hidden}
.rv-vid-scene video{width:100%;height:100%;object-fit:contain;display:block}   /* une petite vidéo s'agrandit à la place, sans déformer */
.rv-vid-scene canvas{height:100%;width:auto;max-width:100%;object-fit:contain;display:block}
.rv-vid-droite{margin-left:auto;display:inline-flex;gap:var(--sp-2)}
.rv-vid:fullscreen{padding:var(--sp-12);background:#000}
/* Texte (L10) : les pages du Document (21d : .edoc-vue, .edoc-corps, feuilles) sous une rangée d'outils, le plan à gauche. */
.rv-texte{flex:1;min-height:0;display:flex;flex-direction:column}
.rv-texte-barre{padding:var(--sp-4) var(--sp-10);border-bottom:1px solid var(--line)}
.rv-texte-milieu{flex:1;min-height:0;display:flex;position:relative}
.rv-texte-plan{flex:none;width:210px;overflow:auto;border-right:1px solid var(--line);padding:var(--sp-8) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-1)}
.rv-texte-titre{display:block;width:100%;text-align:left;border:0;background:none;color:var(--txt);font:inherit;font-size:var(--fs-sm);padding:var(--sp-4) var(--sp-6);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-texte-titre:hover{background:var(--outils-survol)}
.rv-texte-titre[data-niv="2"]{padding-left:var(--sp-16)}
.rv-texte-titre[data-niv="3"],.rv-texte-titre[data-niv="4"]{padding-left:var(--sp-24);color:var(--mut)}
.rv-texte-cherche{display:inline-flex;align-items:center;gap:var(--sp-4);height:var(--outils-h);padding:0 var(--sp-6);border-radius:var(--radius-sm);background:var(--outils-champ);color:var(--mut)}
.rv-texte-cherche input{border:0;background:none;color:var(--txt);font:inherit;font-size:var(--fs-sm);width:200px;outline:none}
.rv-texte .edoc-corps{cursor:text}
.rv-texte-pied{flex:none}
::highlight(rv-recherche){background-color:color-mix(in srgb,var(--outils-surligneur) 55%,transparent);color:inherit}
::highlight(rv-recherche-courant){background-color:var(--outils-surligneur);color:#000}
/* Tableau (L11) : la grille du Tableur (21-edition.css : .esh-host, .esh-main-wrap, onglets du pied), à la place qu'on lui laisse. */
.rv-tableau.esh-host{flex:1;min-height:0;height:auto}
.rv-tableau-cellule{margin-left:auto;color:var(--mut);max-width:40%;overflow:hidden;text-overflow:ellipsis}
@media(max-width:860px){ .rv-uni{grid-template-columns:1fr;grid-template-rows:minmax(90px,30%) minmax(0,1fr)} }
}