html.unipay-page-publication{
  --up-active-h: calc(var(--unipay-vh, 1vh) * 100);
}

html.unipay-page-publication body{
  max-width:100vw;
}

html.unipay-page-publication .modal-overlay{
  max-height:var(--up-active-h) !important;
}

html.unipay-page-publication .modal-box,
html.unipay-page-publication .gallery-panel{
  max-height:calc(var(--up-active-h) - 24px) !important;
  overflow:auto !important;
}

html.unipay-page-publication.unipay-phone-portrait body{
  height:auto !important;
  min-height:var(--up-active-h) !important;
  overflow:auto !important;
}

html.unipay-page-publication.unipay-phone-portrait .app-container{
  width:100vw !important;
  min-height:var(--up-active-h) !important;
  height:auto !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto auto auto !important;
  gap:8px !important;
  padding:8px !important;
}

html.unipay-page-publication.unipay-phone-portrait .reserved-top,
html.unipay-page-publication.unipay-phone-portrait .reserved-left{
  display:none !important;
}

html.unipay-page-publication.unipay-phone-portrait .tools-panel,
html.unipay-page-publication.unipay-phone-portrait .workspace,
html.unipay-page-publication.unipay-phone-portrait .config-panel,
html.unipay-page-publication.unipay-phone-portrait .bottom-panel{
  grid-column:1 !important;
  grid-row:auto !important;
  min-width:0 !important;
  max-width:100% !important;
}

html.unipay-page-publication.unipay-phone-portrait .tools-panel,
html.unipay-page-publication.unipay-phone-portrait .config-panel{
  max-height:42vh !important;
}

html.unipay-page-publication.unipay-phone-portrait .workspace{
  min-height:min(64vh, 620px) !important;
}

html.unipay-page-publication.unipay-phone-portrait .canvas-scroll-area{
  overflow:auto !important;
  min-height:0 !important;
}

html.unipay-page-publication.unipay-phone-portrait .futuristic-card{
  width:min(82vw, 320px) !important;
  height:auto !important;
  aspect-ratio:9 / 16 !important;
  max-height:58vh !important;
}

html.unipay-page-publication.unipay-phone-portrait .bottom-panel{
  min-height:150px !important;
  max-height:34vh !important;
}

html.unipay-page-publication.unipay-phone-landscape .app-container,
html.unipay-page-publication.unipay-tablet-landscape .app-container{
  grid-template-columns:58px minmax(180px, 250px) minmax(0, 1fr) minmax(210px, 280px) !important;
  grid-template-rows:16px minmax(0, 1fr) 126px !important;
  height:var(--up-active-h) !important;
}

html.unipay-page-publication.unipay-phone-landscape .reserved-left,
html.unipay-page-publication.unipay-tablet-landscape .reserved-left{
  grid-column:1 !important;
}

html.unipay-page-publication.unipay-phone-landscape .tools-panel,
html.unipay-page-publication.unipay-tablet-landscape .tools-panel{
  grid-column:2 !important;
}

html.unipay-page-publication.unipay-phone-landscape .workspace,
html.unipay-page-publication.unipay-tablet-landscape .workspace{
  grid-column:3 !important;
}

html.unipay-page-publication.unipay-phone-landscape .config-panel,
html.unipay-page-publication.unipay-tablet-landscape .config-panel{
  grid-column:4 !important;
}

html.unipay-page-publication.unipay-phone-landscape .bottom-panel,
html.unipay-page-publication.unipay-tablet-landscape .bottom-panel{
  grid-column:2 / -1 !important;
}

html.unipay-page-publication.unipay-phone-landscape .futuristic-card{
  width:auto !important;
  height:min(calc(var(--up-active-h) - 190px), 420px) !important;
  aspect-ratio:9 / 16 !important;
}

/* =========================================================
   CORRECTIF 20260613 — ZOOM PORTRAIT 30% PAR PAGE
   Objectif : zoom arrière visuel de la partie principale et des
   panneaux de modales externes, sans appliquer de transform/zoom
   aux barres supérieures, latérales ou inférieures.
   ========================================================= */
html.unipay-page-publication.unipay-phone-portrait.unipay-native-fullscreen{
  --up-page-zoom-30:.70;
  --up-page-zoom-expand:142.857%;
  --up-page-modal-expand:136vw;
  --up-page-active-left:var(--unipay-content-left-reserve, calc(var(--unipay-leftbar-measured, 54px) + 10px));
  --up-page-active-bottom:var(--unipay-content-bottom-reserve, calc(var(--unipay-bottombar-measured, 72px) + 14px));
}

html.unipay-page-publication.unipay-phone-portrait.unipay-native-fullscreen .page-scope > main{
  transform-origin:top left !important;
  width:var(--up-page-zoom-expand) !important;
  max-width:var(--up-page-zoom-expand) !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  will-change:transform;
}

@supports (zoom:1){
  html.unipay-page-publication.unipay-phone-portrait.unipay-native-fullscreen .page-scope > main{
    zoom:1 !important;
    transform:scale(var(--up-page-zoom-30)) !important;
  }
}

@supports not (zoom:1){
  html.unipay-page-publication.unipay-phone-portrait.unipay-native-fullscreen .page-scope > main{
    zoom:1 !important;
    transform:scale(var(--up-page-zoom-30)) !important;
  }
}

html.unipay-page-publication.unipay-phone-portrait.unipay-native-fullscreen .conv-dialog{
  transform-origin:top left !important;
  width:min(var(--up-page-modal-expand), 1320px) !important;
  max-width:min(var(--up-page-modal-expand), 1320px) !important;
  max-height:120vh !important;
  overflow:auto !important;
  box-sizing:border-box !important;
  will-change:transform;
}

@supports (zoom:1){
  html.unipay-page-publication.unipay-phone-portrait.unipay-native-fullscreen .conv-dialog{
    zoom:1 !important;
    transform:scale(var(--up-page-zoom-30)) !important;
  }
}

@supports not (zoom:1){
  html.unipay-page-publication.unipay-phone-portrait.unipay-native-fullscreen .conv-dialog{
    zoom:1 !important;
    transform:scale(var(--up-page-zoom-30)) !important;
  }
}

html.unipay-page-publication.unipay-phone-portrait.unipay-native-fullscreen .app-container{
  overflow:visible !important;
}

/* =========================================================
   CORRECTIF 20260613B — ZOOM NON AUTOMATIQUE
   - mode mobile portrait normal : aucune réduction visuelle forcée ;
   - mode plein écran mobile portrait : zoom 30% uniquement dans la zone active ;
   - barres supérieure, latérale et inférieure conservées hors zoom.
   ========================================================= */
html.unipay-page-publication.unipay-phone-portrait:not(.unipay-native-fullscreen){
  --up-page-zoom-30:1;
  --up-page-zoom-expand:100%;
  --up-page-modal-expand:100vw;
}
html.unipay-page-publication.unipay-phone-portrait:not(.unipay-native-fullscreen) .page-scope > main{
  zoom:1 !important;
  transform:none !important;
  will-change:auto !important;
}
html.unipay-page-publication.unipay-phone-portrait.unipay-native-fullscreen{
  --up-page-zoom-30:.70;
  --up-page-zoom-expand:128vw;
  --up-page-modal-expand:128vw;
  --up-page-active-left:var(--unipay-content-left-reserve, calc(var(--unipay-leftbar-measured, 54px) + 10px));
  --up-page-active-top:var(--unipay-content-top-reserve, calc(var(--unipay-topbar-measured, 76px) + 10px));
  --up-page-active-bottom:var(--unipay-content-bottom-reserve, calc(var(--unipay-bottombar-measured, 72px) + 14px));
}
html.unipay-page-publication.unipay-phone-portrait.unipay-native-fullscreen .page-scope > main{
  zoom:1 !important;
  transform-origin:top left !important;
  transform:scale(var(--up-page-zoom-30)) !important;
  width:var(--up-page-zoom-expand) !important;
  max-width:none !important;
}

/* 20260806 mobile stability: apply phone geometry by viewport too, not only
   when the orientation router has already added phone classes. */
@media (max-width: 900px) {
  html.unipay-page-publication,
  html.unipay-page-publication body,
  html.unipay-page-publication body.unipay-publication-shell{
    width:100% !important;
    max-width:100vw !important;
    min-width:0 !important;
    overflow-x:hidden !important;
  }

  html.unipay-page-publication body.unipay-publication-shell{
    height:auto !important;
    min-height:100dvh !important;
    overflow-y:auto !important;
  }

  html.unipay-page-publication .page-scope > main,
  html.unipay-page-publication main{
    width:100% !important;
    max-width:100vw !important;
    min-width:0 !important;
    transform:none !important;
    zoom:1 !important;
    overflow:visible !important;
  }

  html.unipay-page-publication .app-container{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
    width:100% !important;
    max-width:100vw !important;
    min-width:0 !important;
    height:auto !important;
    min-height:100dvh !important;
    padding:calc(var(--fut-menu-height, 74px) + 8px) 10px calc(var(--unipay-bottombar-measured, 76px) + 18px) !important;
    gap:10px !important;
    overflow:visible !important;
    transform:none !important;
  }

  html.unipay-page-publication .reserved-top,
  html.unipay-page-publication .reserved-left{
    display:none !important;
  }

  html.unipay-page-publication .tools-panel,
  html.unipay-page-publication .workspace,
  html.unipay-page-publication .config-panel,
  html.unipay-page-publication .bottom-panel{
    grid-column:auto !important;
    grid-row:auto !important;
    flex:0 0 auto !important;
    width:min(100%, calc(100vw - 20px)) !important;
    max-width:calc(100vw - 20px) !important;
    min-width:0 !important;
    height:auto !important;
    max-height:none !important;
    margin-inline:auto !important;
    overflow:visible !important;
    transform:none !important;
  }

  html.unipay-page-publication .scroll-wrapper{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    padding:12px !important;
  }

  html.unipay-page-publication .workspace{
    min-height:620px !important;
    overflow:hidden !important;
  }

  html.unipay-page-publication .canvas-scroll-area{
    width:100% !important;
    max-width:100% !important;
    min-height:560px !important;
    padding:18px 8px !important;
    overflow:hidden !important;
  }

  html.unipay-page-publication .canvas-zoom-wrapper,
  html.unipay-page-publication #zoom-wrapper{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    display:grid !important;
    place-items:center !important;
    transform-origin:top center !important;
  }

  html.unipay-page-publication .futuristic-card,
  html.unipay-page-publication #preview-card.futuristic-card{
    width:min(320px, calc(100vw - 74px)) !important;
    min-width:min(320px, calc(100vw - 74px)) !important;
    height:min(568px, calc((100vw - 74px) * 1.775)) !important;
    min-height:min(568px, calc((100vw - 74px) * 1.775)) !important;
    max-height:none !important;
    margin-inline:auto !important;
  }

  html.unipay-page-publication .control-row,
  html.unipay-page-publication .video-preview-grid,
  html.unipay-page-publication .mixer-controls,
  html.unipay-page-publication .fx-grid{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:8px !important;
    width:100% !important;
  }

  html.unipay-page-publication input,
  html.unipay-page-publication textarea,
  html.unipay-page-publication select,
  html.unipay-page-publication button{
    max-width:100% !important;
    min-width:0 !important;
  }

  html.unipay-page-publication input[type="range"]{
    width:100% !important;
  }
}


/* =========================================================
   CORRECTIF 20260613C — modales fullscreen stables
   Les panneaux restent dans la zone active calculée par le routeur.
   Le plein écran UniPay n'est pas remplacé par le fullscreen d'une modale.
   ========================================================= */
html.unipay-page-publication.unipay-phone-portrait.unipay-native-fullscreen{
  --up-page-active-left:var(--unipay-content-left-reserve, calc(var(--unipay-leftbar-measured, 54px) + 10px));
  --up-page-active-top:var(--unipay-content-top-reserve, calc(var(--unipay-topbar-measured, 76px) + 10px));
  --up-page-active-bottom:var(--unipay-content-bottom-reserve, calc(var(--unipay-bottombar-measured, 72px) + 14px));
}
html.unipay-page-publication.unipay-phone-portrait.unipay-native-fullscreen :is(.unipay-immersive-modal){
  box-sizing:border-box !important;
  max-height:calc((var(--unipay-vh, 1vh) * 100) - var(--up-page-active-top) - var(--up-page-active-bottom) - 14px) !important;
}
html.unipay-page-publication.unipay-phone-portrait.unipay-native-fullscreen :is(.unipay-immersive-panel, .conv-dialog){
  box-sizing:border-box !important;
  max-height:calc((var(--unipay-vh, 1vh) * 100) - var(--up-page-active-top) - var(--up-page-active-bottom) - 20px) !important;
  overflow:auto !important;
}

/* =========================================================
   CORRECTIF 20260613F — PUBLICATION MOBILE STABLE
   La zone d'édition ne passe plus sous la barre latérale et le fullscreen
   mobile ne scale plus le main.
   ========================================================= */
html.unipay-page-publication.unipay-phone-portrait{
  --up-page-active-left:var(--unipay-content-left-reserve, calc(var(--unipay-leftbar-measured, 54px) + 10px));
  --up-page-active-top:var(--unipay-content-top-reserve, calc(var(--unipay-topbar-measured, 76px) + 10px));
  --up-page-active-bottom:var(--unipay-content-bottom-reserve, calc(var(--unipay-bottombar-measured, 72px) + 14px));
}
html.unipay-page-publication.unipay-phone-portrait .page-scope > main,
html.unipay-page-publication.unipay-phone-portrait.unipay-native-fullscreen .page-scope > main{
  transform:none !important;
  zoom:1 !important;
  width:auto !important;
  max-width:none !important;
  will-change:auto !important;
}
html.unipay-page-publication.unipay-phone-portrait .app-container,
html.unipay-page-publication.unipay-phone-portrait.unipay-native-fullscreen .app-container{
  width:calc(100vw - var(--up-page-active-left) - 10px) !important;
  max-width:calc(100vw - var(--up-page-active-left) - 10px) !important;
  margin-left:var(--up-page-active-left) !important;
  padding:8px !important;
  padding-bottom:calc(var(--up-page-active-bottom) + 24px) !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}
html.unipay-page-publication.unipay-phone-portrait .tools-panel,
html.unipay-page-publication.unipay-phone-portrait .workspace,
html.unipay-page-publication.unipay-phone-portrait .config-panel,
html.unipay-page-publication.unipay-phone-portrait .bottom-panel{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
html.unipay-page-publication.unipay-phone-portrait .tools-panel *,
html.unipay-page-publication.unipay-phone-portrait .workspace *,
html.unipay-page-publication.unipay-phone-portrait .config-panel *,
html.unipay-page-publication.unipay-phone-portrait .bottom-panel *{
  box-sizing:border-box !important;
  max-width:100% !important;
}
html.unipay-page-publication.unipay-phone-portrait input[type="range"],
html.unipay-page-publication.unipay-phone-portrait .slider,
html.unipay-page-publication.unipay-phone-portrait .control-row{
  max-width:100% !important;
  min-width:0 !important;
}
html.unipay-page-publication.unipay-phone-portrait .control-row,
html.unipay-page-publication.unipay-phone-portrait .editor-row{
  display:grid !important;
  grid-template-columns:minmax(58px,.42fr) minmax(0,1fr) !important;
  gap:8px !important;
  align-items:center !important;
}
html.unipay-page-publication.unipay-phone-portrait .futuristic-card{
  width:min(100%, 260px) !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}


/* =========================================================
   CORRECTIF 20260616B — DIMENSIONS HARMONISÉES PUBLICATION
   Cette page garde sa dynamique locale, mais expose ses limites
   au moteur central .unipay-active-main.
========================================================= */
html.unipay-page-publication{
  --unipay-page-max-w:1500px;
  --unipay-page-pad-x:clamp(8px,1vw,16px);
}
html.unipay-page-publication.unipay-interface-mobile.unipay-portrait{
  --unipay-page-pad-x:clamp(7px,2.4vw,12px);
}

/* 20260810 — le mode ordinateur ne doit pas couper la zone d'édition.
   Le document devient l'unique propriétaire du scroll quand le contenu
   dépasse la hauteur visible ; les panneaux internes gardent leurs scrolls
   dédiés uniquement lorsqu'ils sont eux-mêmes des contrôles. */
html.unipay-page-publication.unipay-interface-desktop body.unipay-publication-shell{
  height:auto !important;
  min-height:100dvh !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}
html.unipay-page-publication.unipay-interface-desktop .page-scope > main,
html.unipay-page-publication.unipay-interface-desktop .unipay-active-main{
  height:auto !important;
  max-height:none !important;
  overflow-x:hidden !important;
  overflow-y:visible !important;
}
html.unipay-page-publication.unipay-interface-desktop .app-container{
  height:auto !important;
  min-height:calc(100dvh - var(--unipay-topbar-measured, 64px)) !important;
  overflow:visible !important;
}
html.unipay-page-publication.unipay-interface-mobile.unipay-landscape{
  --unipay-page-pad-x:clamp(8px,1.5vw,16px);
}


/* =========================================================
   CORRECTIF 20260616C — POSITION ACTIVE FINALE PUBLICATION
   Chargé après les anciennes règles locales pour neutraliser
   les largeurs/marges contradictoires uniquement sur le conteneur
   marqué par le routeur. Les grilles internes de la page restent locales.
========================================================= */
html.unipay-page-publication.unipay-interface-desktop .unipay-active-main{
  box-sizing:border-box !important;
  width:min(100%, calc(100vw - var(--unipay-safe-left, 0px) - var(--unipay-safe-right, 0px))) !important;
  max-width:min(var(--unipay-page-max-w, 1480px), calc(100vw - var(--unipay-safe-left, 0px) - var(--unipay-safe-right, 0px))) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:var(--unipay-page-pad-x) !important;
  padding-right:var(--unipay-page-pad-x) !important;
  padding-bottom:max(var(--unipay-active-bottom, 88px), var(--unipay-page-pad-y, 12px)) !important;
  overflow-x:hidden !important;
}
html.unipay-page-publication.unipay-interface-desktop.unipay-desktop-on-mobile .unipay-active-main{
  width:min(100%, var(--unipay-desktop-layout-w, 1280px)) !important;
  max-width:min(var(--unipay-page-max-w, 1480px), var(--unipay-desktop-layout-w, 1280px)) !important;
}
html.unipay-page-publication.unipay-interface-mobile:not(.unipay-native-fullscreen) .unipay-active-main{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:var(--unipay-page-pad-x) !important;
  padding-right:var(--unipay-page-pad-x) !important;
  padding-bottom:var(--unipay-page-pad-y, 12px) !important;
  overflow-x:hidden !important;
  transform:none !important;
  zoom:1 !important;
}
html.unipay-page-publication.unipay-interface-mobile:not(.unipay-native-fullscreen) .unipay-active-main > *{
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* 20260820 - Le titre reste semantique sans creer une marge visuelle.
   Sur mobile, le document porte le geste vertical. */
html.unipay-page-publication .unipay-visually-hidden-page-title{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media (max-width:900px){
  html.unipay-page-publication,
  html.unipay-page-publication body,
  html.unipay-page-publication body.unipay-publication-shell,
  html.unipay-page-publication body > .page-scope,
  html.unipay-page-publication .page-scope > main,
  html.unipay-page-publication .unipay-active-main{
    height:auto !important;
    min-height:100dvh !important;
    max-height:none !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
    overscroll-behavior-y:auto !important;
    touch-action:pan-y !important;
  }

  html.unipay-page-publication body.unipay-publication-shell{
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  html.unipay-page-publication .app-container,
  html.unipay-page-publication.unipay-phone-portrait .app-container,
  html.unipay-page-publication.unipay-phone-portrait.unipay-native-fullscreen .app-container{
    width:100% !important;
    max-width:100% !important;
    min-height:100dvh !important;
    margin:0 !important;
    /* Le main est deja positionne sous la barre haute par la geometrie
       partagee. Ne pas reserver une seconde fois sa hauteur ici. */
    padding:8px 10px calc(var(--unipay-bottombar-measured, 64px) + 24px) !important;
    overflow:visible !important;
    transform:none !important;
    touch-action:pan-y !important;
  }
}