/*! bloo.Cards — bloo-viewport.css v1.4 (2026-09-22) — piloté par /assets/js/bloo-viewport.js
   ─────────────────────────────────────────────────────────────────────────────
   1. COQUILLE BUREAU : mockup Samsung Galaxy S20 (écran 360×800) centré, pleine hauteur
   2. CARTE : neutralise l'ancien cadre « téléphone » in-page (≥700px) en mode mobile/fill
      → colonne centrée pleine hauteur (téléphone en paysage, fenêtres basses)
   3. MOTEUR LIQUID : facteurs d'ajustement calculés par le JS (grille, avatar, identité, hero)
   ───────────────────────────────────────────────────────────────────────────── */

/* ============ 1. COQUILLE BUREAU ============ */
html[data-bvp-shell]{ height:100%; background:var(--bvp-bg,#e7e9ef); }
html[data-bvp-shell] body{ margin:0; height:100%; overflow:hidden; background:transparent; }
.bvp-stage{
  position:fixed; inset:0; z-index:2147483000;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background-color:var(--bvp-bg,#e7e9ef);
  background-image:radial-gradient(ellipse 70% 60% at 50% 42%, var(--bvp-glow, rgba(79,70,229,.14)), transparent 70%);
}
.bvp-device{
  position:relative; flex:0 0 auto; box-sizing:border-box;
  width:calc(var(--bvp-sw,360px) + 22px); height:calc(var(--bvp-sh,800px) + 28px); /* écran (défaut 360×800) + bezels 11/14 px */
  transform:scale(var(--bvp-k,1)); transform-origin:50% 50%;
}
.bvp-phone{
  position:relative; box-sizing:border-box; width:100%; height:100%;
  padding:14px 11px; border-radius:54px;
  background:#050507;                             /* verre noir (face avant) */
  box-shadow:
    0 0 0 1.5px #55585f,                          /* tranche alu « Cosmic Gray » */
    0 0 0 3.5px #26282d,
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 36px 80px rgba(10,12,24,.40),
    0 12px 28px rgba(10,12,24,.22);
}
.bvp-screen{
  position:relative; width:var(--bvp-sw,360px); height:var(--bvp-sh,800px); overflow:hidden;
  border-radius:var(--bvp-r,42px); background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.6);
}
.bvp-iframe{ display:block; width:100%; height:100%; border:0; background:#fff; }
/* Poinçon caméra centré (Infinity-O) */
.bvp-punch{
  position:absolute; top:26px; left:50%; width:12px; height:12px; margin-left:-6px;
  border-radius:50%; background:#07080b; z-index:3; pointer-events:none;
  box-shadow:0 0 0 2px rgba(0,0,0,.4), inset 0 0 0 2.5px rgba(58,66,88,.6);
}
/* Boutons latéraux (droite : volume + marche) */
.bvp-key{ position:absolute; right:-5px; width:3px; border-radius:0 3px 3px 0; background:linear-gradient(90deg,#2a2c31,#5c6068); pointer-events:none; }
.bvp-key--vol{ top:150px; height:96px; }
.bvp-key--pwr{ top:272px; height:60px; }

/* Plein écran (fenêtre trop petite / écran de téléphone) : l'iframe devient la carte liquide */
html[data-bvp-shell][data-vp="mobile"] .bvp-stage{ background:var(--bvp-bg,#fff); }
html[data-bvp-shell][data-vp="mobile"] .bvp-device{ width:100vw; height:100vh; height:100dvh; transform:none; }
html[data-bvp-shell][data-vp="mobile"] .bvp-phone{ padding:0; border-radius:0; background:none; box-shadow:none; }
html[data-bvp-shell][data-vp="mobile"] .bvp-screen{ width:100%; height:100%; border-radius:0; box-shadow:none; }
html[data-bvp-shell][data-vp="mobile"] .bvp-punch,
html[data-bvp-shell][data-vp="mobile"] .bvp-key{ display:none; }

/* Coquille construite à la volée (carte rendue directement sur un écran de bureau) */
html[data-vp="desk-js"] body > *:not(.bvp-stage),
html[data-bvp-shell="late"] body > *:not(.bvp-stage){ display:none !important; }
html[data-bvp-shell="late"] body{ overflow:hidden !important; }
/* Redirection d'auto-réparation en cours : rien à montrer */
html[data-vp="redirect"] body{ visibility:hidden !important; }

/* ============ 2. CARTE (mode mobile / fill) ============ */
/* (v2.4.0) Le sélecteur d'appareil in-page .bloo-devsim a été retiré de card.php. */
/* L'écran de la carte ne « glisse » jamais latéralement (un élément trop large ne crée pas de défilement horizontal). */
html[data-vp] body[data-layout] .card-wrap .card-inner{ overflow-x:hidden !important; }
@media (min-width:700px){
  html[data-vp="mobile"], html[data-vp="fill"]{ background:var(--card-bg,#fff) !important; }
  html[data-vp="mobile"] body, html[data-vp="fill"] body{ padding:0 !important; display:block !important; min-height:0 !important; }
  html[data-vp="mobile"] body .card-wrap,
  html[data-vp="fill"] body .card-wrap,
  html[data-vp="mobile"] body[data-layout] .card-wrap,
  html[data-vp="fill"] body[data-layout] .card-wrap{
    width:100% !important; max-width:520px !important;
    height:100vh !important; height:100dvh !important; max-height:none !important; min-height:0 !important;
    margin:0 auto !important; padding:0 !important; border-radius:0 !important;
    background:none !important; box-shadow:none !important;
  }
  html[data-vp="mobile"] body .card-wrap::before, html[data-vp="mobile"] body .card-wrap::after,
  html[data-vp="fill"] body .card-wrap::before, html[data-vp="fill"] body .card-wrap::after{ display:none !important; }
  html[data-vp="mobile"] body .card-wrap .card-inner,
  html[data-vp="fill"] body .card-wrap .card-inner{ border-radius:0 !important; box-shadow:none !important; }
}

/* ============ 3. MOTEUR LIQUID (bloo-viewport.js → data-vp-z, --vp-zm/za/zi/hero) ============
   « :not(#bvp_) » ajoute une spécificité d'ID : ces facteurs priment sur les réglages des layouts. */
html[data-vp-z] body[data-layout]:not(#bvp_) .card-wrap .card-inner .modules-page,
html[data-vp-z] body[data-layout]:not(#bvp_) .card-wrap .card-inner .bento-mosaic{ zoom:var(--vp-zm,1); }
html[data-vp-z] body[data-layout]:not(#bvp_) .card-wrap .card-inner .card-avatar-frame{ zoom:var(--vp-za,1); }
html[data-vp-z] body[data-layout]:not(#bvp_) .card-wrap .card-inner .card-identity{ zoom:var(--vp-zi,1); }
html[data-vp-z][data-vp-hero] body[data-layout]:not(#bvp_) .card-wrap .card-inner .card-header{ height:var(--vp-hero) !important; min-height:0 !important; }
html[data-vp-z][data-vp-hero="0"] body[data-layout]:not(#bvp_) .card-wrap .card-inner .card-header{ display:none !important; }
/* Contenu trop haut même au plancher : la carte défile, la grille n'est plus centrée/rognée dans sa zone */
html[data-vp-fit="over"] body[data-layout]:not(#bvp_) .card-wrap .card-inner .modules-section{ flex:0 0 auto !important; justify-content:flex-start !important; overflow:visible !important; min-height:0 !important; }

/* ============ 4. AUTRES APPAREILS (v2.4.0, ?device=<id>, catalogue /assets/js/bloo-devices.js) ============ */
html[data-bvp-notch="home"] .bvp-punch{ display:none; }
html[data-bvp-notch="home"] .bvp-phone{ padding:64px 11px; }
html[data-bvp-notch="home"] .bvp-device{ height:calc(var(--bvp-sh,667px) + 128px); }
html[data-bvp-notch="island"] .bvp-punch{ width:92px; height:27px; margin-left:-46px; top:24px; border-radius:14px; }
html[data-bvp-notch="notch"] .bvp-punch{ width:150px; height:30px; margin-left:-75px; top:14px; border-radius:0 0 18px 18px; box-shadow:none; }
html[data-bvp-notch="punch-left"] .bvp-punch{ left:40px; margin-left:0; }
html[data-bvp-notch="punch-right"] .bvp-punch{ left:auto; right:40px; margin-left:0; }
html[data-bvp-notch="pill-left"] .bvp-punch{ left:34px; margin-left:0; width:34px; border-radius:7px; }
html[data-bvp-notch="waterdrop"] .bvp-punch{ top:14px; width:26px; height:18px; margin-left:-13px; border-radius:0 0 13px 13px; }