/* ==========================================================
   UNIPAY — PUB.HTML RESPONSIVE ENGINE
   Fichier dédié uniquement à pub.html
   ----------------------------------------------------------
   Objectif :
   - ne pas perturber les autres pages ;
   - ne pas recalculer brutalement les dispositions existantes ;
   - conserver les CSS de pub.html comme référence ;
   - adapter les blocs par échelle contrôlée selon l’écran ;
   - neutraliser seulement les conflits mobiles évidents.
   ----------------------------------------------------------
   À charger APRÈS tous les CSS existants de pub.html :
   <link href="css/pub-responsive.css" rel="stylesheet">
========================================================== */

html.unipay-pub-responsive,
html.unipay-pub-responsive body {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
}

/* Variables pilotées par pub-responsive.js */
html.unipay-pub-responsive {
  --pub-vw: 100vw;
  --pub-vh: 100vh;
  --pub-safe-left: 80px;
  --pub-safe-top: 48px;
  --pub-safe-bottom: 96px;
  --pub-gutter: 16px;
  --pub-scale: 1;
  --pub-modal-scale: 1;
}

/* Le body reste dans la logique originale de pub.html */
html.unipay-pub-responsive body {
  position: relative;
  background-color: var(--bg-dark, #050510);
  overscroll-behavior: none;
}

/* ==========================================================
   1) CADRE DE PAGE PUB.HTML
   On cible uniquement pub.html via la classe injectée par JS.
========================================================== */

html.unipay-pub-responsive body.unipay-pub-page .page-scope {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* Header réel de pub.html */
html.unipay-pub-responsive body.unipay-pub-page .hologram-header {
  left: var(--pub-safe-left);
  top: 0;
  width: calc(100vw - var(--pub-safe-left));
  height: var(--pub-safe-top);
  min-height: var(--pub-safe-top);
  max-height: var(--pub-safe-top);
  overflow: hidden;
  z-index: 1000;
}

/* Titre : réduction par taille, sans casser animation */
html.unipay-pub-responsive body.unipay-pub-page .flux-title {
  max-width: calc(100vw - var(--pub-safe-left) - 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(0.86rem, 2.2vw, 1.5rem);
  letter-spacing: clamp(1px, 0.7vw, 5px);
}

/* Interface principale éventuelle de pub.css */
html.unipay-pub-responsive body.unipay-pub-page .main-interface {
  left: var(--pub-safe-left);
  top: var(--pub-safe-top);
  right: 0;
  bottom: var(--pub-safe-bottom);
  width: calc(100vw - var(--pub-safe-left));
  height: calc(100vh - var(--pub-safe-top) - var(--pub-safe-bottom));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--pub-gutter);
}

/* ==========================================================
   2) GRILLES NEWS PUB.HTML
   Principe : la grille conserve son modèle desktop.
   Sur petit écran, on agrandit virtuellement le canvas puis
   on applique transform: scale().
   Résultat : les objets gardent leurs positions relatives.
========================================================== */

html.unipay-pub-responsive body.unipay-pub-page .news-container {
  left: var(--pub-safe-left);
  top: var(--pub-safe-top);
  width: calc((100vw - var(--pub-safe-left) - var(--pub-gutter)) / var(--pub-scale));
  height: calc((100vh - var(--pub-safe-top) - var(--pub-safe-bottom)) / var(--pub-scale));
  padding: calc(10px / var(--pub-scale));
  gap: calc(15px / var(--pub-scale));
  transform: scale(var(--pub-scale));
  transform-origin: top left;
  overflow: visible;
  will-change: transform;
}

/* Les layouts existants restent la référence */
html.unipay-pub-responsive body.unipay-pub-page .news-container.layout-initial,
html.unipay-pub-responsive body.unipay-pub-page .news-container.layout-focus-1,
html.unipay-pub-responsive body.unipay-pub-page .news-container.layout-focus-3,
html.unipay-pub-responsive body.unipay-pub-page .news-container.layout-panorama {
  min-width: 0;
  min-height: 0;
}

/* Cartes : conservation design, seulement lisibilité */
html.unipay-pub-responsive body.unipay-pub-page .news-section {
  min-width: 0;
  min-height: 0;
  contain: layout paint;
}

html.unipay-pub-responsive body.unipay-pub-page .news-title {
  font-size: clamp(0.95rem, 1.2vw, 1.25rem);
}

html.unipay-pub-responsive body.unipay-pub-page .news-desc {
  font-size: clamp(0.72rem, 0.95vw, 0.88rem);
}

/* ==========================================================
   3) SIDEBAR ET BOTTOMBAR
   On ne redessine pas ces barres : on ajuste seulement les
   zones de sécurité que pub.html utilise comme référence.
========================================================== */

html.unipay-pub-responsive body.unipay-pub-page .fut-sidebar {
  max-width: var(--pub-safe-left);
  z-index: 1200;
}

html.unipay-pub-responsive body.unipay-pub-page .bottom-bar,
html.unipay-pub-responsive body.unipay-pub-page .fut-bottombar,
html.unipay-pub-responsive body.unipay-pub-page #bottomBar,
html.unipay-pub-responsive body.unipay-pub-page .bottombar-clean {
  z-index: 1250;
}

/* ==========================================================
   4) TRIGGER CYBER ET MODALE
========================================================== */

html.unipay-pub-responsive body.unipay-pub-page .cyber-trigger {
  top: clamp(8px, 2vh, 20px);
  right: clamp(8px, 2vw, 20px);
  transform: scale(var(--pub-modal-scale));
  transform-origin: top right;
  z-index: 1350;
}

/* Overlay sans modifier son comportement JS */
html.unipay-pub-responsive body.unipay-pub-page .modal-overlay {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
}

/* Modale cyber : même design, canvas réduit si écran étroit */
html.unipay-pub-responsive body.unipay-pub-page .cyber-modal {
  width: min(900px, calc((100vw - 24px) / var(--pub-modal-scale)));
  max-width: calc((100vw - 24px) / var(--pub-modal-scale));
  transform: scale(var(--pub-modal-scale));
  transform-origin: center center;
}

html.unipay-pub-responsive body.unipay-pub-page .modal-overlay.active .cyber-modal {
  height: min(400px, calc((100vh - 40px) / var(--pub-modal-scale)));
}

/* Modales internes/immersives créées par publication.js */
html.unipay-pub-responsive body.unipay-pub-page .unipay-immersive-panel,
html.unipay-pub-responsive body.unipay-pub-page .modal-hologram,
html.unipay-pub-responsive body.unipay-pub-page .live-modal {
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
}

/* ==========================================================
   5) CORRECTION DU CONFLIT CHAT.CSS
   pub.html charge chat.css. On neutralise seulement ce qui
   peut envahir pub.html, sans toucher à chat.html.
========================================================== */

html.unipay-pub-responsive body.unipay-pub-page .news-container,
html.unipay-pub-responsive body.unipay-pub-page .news-section,
html.unipay-pub-responsive body.unipay-pub-page .cyber-modal,
html.unipay-pub-responsive body.unipay-pub-page .cyber-trigger {
  box-sizing: border-box;
}

/* Évite que des règles globales de chat.css imposent une largeur aux médias */
html.unipay-pub-responsive body.unipay-pub-page .news-section img.bg-img {
  width: 100%;
  height: 100%;
  max-width: none;
}

/* ==========================================================
   6) TABLETTE
========================================================== */

@media (max-width: 1024px) {
  html.unipay-pub-responsive {
    --pub-safe-left: 68px;
    --pub-safe-top: 50px;
    --pub-safe-bottom: 92px;
    --pub-gutter: 12px;
    --pub-scale: 0.88;
    --pub-modal-scale: 0.92;
  }

  html.unipay-pub-responsive body.unipay-pub-page .news-section {
    padding: 16px;
  }
}

/* ==========================================================
   7) MOBILE
   Toujours par échelle : on ne transforme pas la grille en
   colonne, sauf cas ultra étroit dans la section suivante.
========================================================== */

@media (max-width: 720px) {
  html.unipay-pub-responsive {
    --pub-safe-left: 54px;
    --pub-safe-top: 50px;
    --pub-safe-bottom: 88px;
    --pub-gutter: 8px;
    --pub-scale: 0.68;
    --pub-modal-scale: 0.82;
  }

  html.unipay-pub-responsive body.unipay-pub-page .hologram-header {
    background: rgba(0, 0, 0, 0.82);
  }

  html.unipay-pub-responsive body.unipay-pub-page .news-section {
    padding: 14px;
  }

  html.unipay-pub-responsive body.unipay-pub-page .cyber-dashboard,
  html.unipay-pub-responsive body.unipay-pub-page .dashboard-controls {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================
   8) TRÈS PETIT MOBILE
   À moins de 430px, la grille 3 colonnes devient illisible.
   On garde l’idée d’échelle, mais on augmente le canvas virtuel.
========================================================== */

@media (max-width: 430px) {
  html.unipay-pub-responsive {
    --pub-safe-left: 46px;
    --pub-safe-top: 48px;
    --pub-safe-bottom: 84px;
    --pub-gutter: 6px;
    --pub-scale: 0.56;
    --pub-modal-scale: 0.74;
  }

  html.unipay-pub-responsive body.unipay-pub-page .flux-title {
    font-size: 0.78rem;
    letter-spacing: 1px;
  }

  html.unipay-pub-responsive body.unipay-pub-page .news-title {
    font-size: 0.9rem;
  }

  html.unipay-pub-responsive body.unipay-pub-page .news-desc {
    font-size: 0.7rem;
  }

  html.unipay-pub-responsive body.unipay-pub-page .cyber-trigger {
    width: 78px;
    height: 112px;
  }
}

/* ==========================================================
   9) MODE PAYSAGE MOBILE
========================================================== */

@media (max-height: 520px) and (orientation: landscape) {
  html.unipay-pub-responsive {
    --pub-safe-top: 44px;
    --pub-safe-bottom: 56px;
    --pub-scale: 0.72;
    --pub-modal-scale: 0.72;
  }

  html.unipay-pub-responsive body.unipay-pub-page .hologram-header {
    height: var(--pub-safe-top);
    min-height: var(--pub-safe-top);
  }

  html.unipay-pub-responsive body.unipay-pub-page .flux-title {
    font-size: 0.82rem;
  }

  html.unipay-pub-responsive body.unipay-pub-page .cyber-trigger {
    width: 76px;
    height: 86px;
  }
}

/* ==========================================================
   10) ACCESSIBILITÉ / PERFORMANCE MOBILE
========================================================== */

@media (prefers-reduced-motion: reduce) {
  html.unipay-pub-responsive body.unipay-pub-page .news-section,
  html.unipay-pub-responsive body.unipay-pub-page .flux-title .word,
  html.unipay-pub-responsive body.unipay-pub-page .cyber-trigger .orbit-1,
  html.unipay-pub-responsive body.unipay-pub-page .cyber-trigger .orbit-2 {
    animation-duration: 0.001ms;
    animation-iteration-count: 1;
  }
}

/*
 * Desktop-mode override (Assistant)
 *
 * Neutralise la réduction responsive de pub.html en fixant
 * l'échelle à 1 et en ajustant la marge de sécurité à gauche
 * pour tenir compte de la largeur agrandie de la barre latérale.
 * Cela garantit qu'au moins deux blocs de cinq objets restent
 * visibles dans la zone active et que la version mobile est
 * désactivée.
 */

@media (min-width: 1025px) {
  html.unipay-pub-responsive {
    --pub-scale: 1 !important;
    --pub-modal-scale: 1 !important;
    /* largeur de la barre latérale agrandie (82px) */
    --pub-safe-left: 82px !important;
  }
}
/* 20260805 — PUB mobile portrait zoom arrière final.
   Chargé en toute fin de pub-responsive.css pour gagner sur les anciennes
   règles de canvas virtuel et de carrousel. */
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-interface-mobile,.pub-device-mobile){
  --pub-scale:1 !important;
  --pub-modal-scale:1 !important;
  --pub-safe-left:clamp(46px, var(--unipay-leftbar-measured, 48px), 54px) !important;
  --pub-safe-top:48px !important;
  --pub-safe-bottom:clamp(72px, var(--unipay-bottombar-measured, 76px), 88px) !important;
  --pub-mobile-scene-top:8px;
  --pub-mobile-scene-right:var(--pub-safe-left);
  --pub-mobile-scene-width:calc(100vw - var(--pub-safe-left) - var(--pub-mobile-scene-right));
  --pub-mobile-card-height:clamp(360px, calc((100dvh - var(--unipay-content-top-reserve, 96px) - var(--pub-safe-bottom) - 58px) / 3), 520px);
  --pub-mobile-step:calc(var(--pub-mobile-card-height) + 14px);
}

html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body,
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page{
  width:100vw !important;
  min-width:0 !important;
  max-width:100vw !important;
  overflow-x:hidden !important;
}

html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page :is(
  #newsGrid.news-container,#newsGrid-2.news-container,#newsGrid-3.news-container,
  #newsGrid-4.news-container,#newsGrid-5.news-container,#newsGrid-6.news-container,
  #newsGrid-7.news-container,#newsGrid-8.news-container,#newsGrid-9.news-container,
  #newsGrid-10.news-container
){
  position:absolute !important;
  left:var(--pub-safe-left) !important;
  right:auto !important;
  top:var(--pub-mobile-scene-top) !important;
  width:var(--pub-mobile-scene-width) !important;
  max-width:var(--pub-mobile-scene-width) !important;
  height:var(--pub-mobile-card-height) !important;
  min-height:360px !important;
  max-height:520px !important;
  display:grid !important;
  gap:8px !important;
  padding:7px !important;
  overflow:hidden !important;
  overflow-x:hidden !important;
  overflow-y:hidden !important;
  scroll-snap-type:none !important;
  scroll-padding-inline:0 !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:auto !important;
  transform:none !important;
  transform-origin:top left !important;
  zoom:1 !important;
  contain:layout paint !important;
  box-sizing:border-box !important;
  will-change:auto !important;
}

html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page #newsGrid.news-container{top:var(--pub-mobile-scene-top) !important;}
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page #newsGrid-2.news-container{top:calc(var(--pub-mobile-scene-top) + var(--pub-mobile-step)) !important;}
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page #newsGrid-3.news-container{top:calc(var(--pub-mobile-scene-top) + (var(--pub-mobile-step) * 2)) !important;}
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page #newsGrid-4.news-container{top:calc(var(--pub-mobile-scene-top) + (var(--pub-mobile-step) * 3)) !important;}
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page #newsGrid-5.news-container{top:calc(var(--pub-mobile-scene-top) + (var(--pub-mobile-step) * 4)) !important;}
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page #newsGrid-6.news-container{top:calc(var(--pub-mobile-scene-top) + (var(--pub-mobile-step) * 5)) !important;}
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page #newsGrid-7.news-container{top:calc(var(--pub-mobile-scene-top) + (var(--pub-mobile-step) * 6)) !important;}
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page #newsGrid-8.news-container{top:calc(var(--pub-mobile-scene-top) + (var(--pub-mobile-step) * 7)) !important;}
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page #newsGrid-9.news-container{top:calc(var(--pub-mobile-scene-top) + (var(--pub-mobile-step) * 8)) !important;}
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page #newsGrid-10.news-container{top:calc(var(--pub-mobile-scene-top) + (var(--pub-mobile-step) * 9)) !important;}

html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page :is(
  #newsGrid.news-container,#newsGrid-2.news-container,#newsGrid-3.news-container,
  #newsGrid-4.news-container,#newsGrid-5.news-container,#newsGrid-6.news-container,
  #newsGrid-7.news-container,#newsGrid-8.news-container,#newsGrid-9.news-container,
  #newsGrid-10.news-container
) > .news-section{
  flex:initial !important;
  flex-basis:auto !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  padding:clamp(6px, 1.8vw, 10px) !important;
  scroll-snap-align:none !important;
  transform:none !important;
  overflow:hidden !important;
  aspect-ratio:auto !important;
  box-sizing:border-box !important;
}

html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .section-1{grid-area:sec1 !important;}
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .section-2{grid-area:sec2 !important;}
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .section-3{grid-area:sec3 !important;}
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .section-4{grid-area:sec4 !important;}
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .section-5{grid-area:sec5 !important;}

html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .news-container.layout-initial{
  grid-template-columns:minmax(0, .95fr) minmax(0, 1.15fr) minmax(0, .95fr) !important;
  grid-template-rows:repeat(2, minmax(0, 1fr)) !important;
  grid-template-areas:"sec1 sec3 sec4" "sec2 sec3 sec5" !important;
}

html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .news-container.layout-focus-1{
  grid-template-columns:minmax(0, 1.25fr) minmax(0, .9fr) minmax(0, .9fr) !important;
  grid-template-rows:repeat(2, minmax(0, 1fr)) !important;
  grid-template-areas:"sec1 sec3 sec4" "sec1 sec2 sec5" !important;
}

html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .news-container.layout-focus-3{
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.25fr) minmax(0, .9fr) !important;
  grid-template-rows:repeat(2, minmax(0, 1fr)) !important;
  grid-template-areas:"sec1 sec3 sec4" "sec2 sec3 sec5" !important;
}

html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .news-container.layout-panorama{
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  grid-template-rows:minmax(0, 1fr) !important;
  grid-template-areas:"sec1 sec2 sec3 sec4 sec5" !important;
}

html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .news-container.layout-tower{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows:minmax(0, .85fr) minmax(0, 1.3fr) minmax(0, .85fr) !important;
  grid-template-areas:"sec1 sec4" "sec3 sec3" "sec2 sec5" !important;
}

html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .news-container.layout-mosaic{
  grid-template-columns:minmax(0, 1.15fr) minmax(0, .9fr) minmax(0, 1fr) !important;
  grid-template-rows:repeat(2, minmax(0, 1fr)) !important;
  grid-template-areas:"sec1 sec2 sec5" "sec3 sec4 sec5" !important;
}

html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .news-container.layout-cross{
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .9fr) !important;
  grid-template-rows:repeat(3, minmax(0, 1fr)) !important;
  grid-template-areas:"sec1 sec3 sec2" "sec4 sec3 sec5" "sec4 sec3 sec5" !important;
}

html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .news-container.layout-stream{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows:repeat(3, minmax(0, 1fr)) !important;
  grid-template-areas:"sec1 sec2" "sec3 sec4" "sec5 sec5" !important;
}

/* Dernière autorité mobile : dimensions issues de visualViewport, sans
   plancher historique de 360 px qui débordait sur les téléphones courts. */
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait){
  --pub-vw:var(--unipay-vv-width, 100vw);
  --pub-vh:var(--unipay-vv-height, 100vh);
  --pub-mobile-card-height:clamp(180px, calc((var(--unipay-vv-height, 100dvh) - var(--unipay-content-top-reserve, 96px) - var(--pub-safe-bottom, 88px) - 58px) / 3), 520px);
  --up-pub-mobile-card-height:var(--pub-mobile-card-height) !important;
}
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .news-container{
  min-height:180px !important;
}

html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .news-title{
  font-size:clamp(.68rem, 2.5vw, .9rem) !important;
  line-height:1.1 !important;
  letter-spacing:.01em !important;
  overflow-wrap:anywhere !important;
}

html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .news-desc{
  font-size:clamp(.56rem, 1.95vw, .74rem) !important;
  line-height:1.22 !important;
  overflow:hidden !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow-wrap:anywhere !important;
}

html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .content-wrap{
  gap:2px !important;
  transform:none !important;
  min-height:0 !important;
}

html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .control-panel{
  left:var(--pub-safe-left) !important;
  right:auto !important;
  width:var(--pub-mobile-scene-width) !important;
  max-width:var(--pub-mobile-scene-width) !important;
  transform:none !important;
}

/* 20260810 — marge principale unifiée dès le pré-rendu. Les 5 objets
   restent dans leur grille dynamique ; la caméra active gagne de la largeur. */
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait){
  --pub-safe-left:20px !important;
  --pub-safe-right:20px !important;
  --pub-mobile-scene-right:20px !important;
  --pub-mobile-scene-width:calc(100vw - 40px) !important;
  --up-pub-mobile-camera-left:20px !important;
  --up-pub-mobile-camera-right:20px !important;
  --up-pub-mobile-camera-width:calc(100vw - 40px) !important;
  /* La camera des grilles porte elle-meme sa marge de 20 px. Le shell ne doit
     pas ajouter une seconde reserve sur body. */
  --unipay-content-left-reserve:0px !important;
}

/* La version ordinateur conservait une réserve fixe trop large. */
html.unipay-pub-responsive.unipay-page-pub.unipay-interface-desktop{
  --up-pub-desktop-left:clamp(32px, 4vw, 56px) !important;
  --up-pub-desktop-right:clamp(32px, 4vw, 56px) !important;
}

/* 20260810 — la scène principale occupe toute la hauteur visuelle.
   La réserve finale reste dans le flux pour que les derniers médias ne
   soient jamais masqués par la barre inférieure fixe. */
html.unipay-pub-responsive body.unipay-pub-page > .page-scope{
  height:100dvh !important;
  min-height:100dvh !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}

html.unipay-pub-responsive.unipay-page-pub body.unipay-pub-page > .page-scope > main.unipay-active-main{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  height:100dvh !important;
  min-height:100dvh !important;
  overflow:visible !important;
  padding-bottom:var(--pub-safe-bottom, 88px) !important;
  box-sizing:border-box !important;
}

html.unipay-pub-responsive body.unipay-pub-page > .page-scope > main::after{
  content:"";
  display:block;
  width:100%;
  height:var(--pub-safe-bottom, 88px);
  min-height:var(--pub-safe-bottom, 88px);
  pointer-events:none;
}

/* En l'absence d'un conteneur de défilement interne, le document reste le
   seul défilement actif, sans deuxième barre sous la barre fixe. */
html.unipay-pub-responsive.unipay-page-pub:not(:has(.unipay-primary-scroll-owner)) body.unipay-pub-page{
  overflow-x:hidden !important;
  overflow-y:auto !important;
  touch-action:pan-y !important;
  -webkit-overflow-scrolling:touch !important;
}

/* 20260818 - Grilles mobiles lisibles sans supprimer les dispositions
   dynamiques. Chaque mode garde sa hierarchie, mais n'utilise jamais plus de
   deux colonnes sur un telephone portrait. */
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-interface-mobile,.pub-device-mobile) body.unipay-pub-page .news-container{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows:repeat(3, minmax(0, 1fr)) !important;
}
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .news-container.layout-initial{
  grid-template-columns:minmax(0, .95fr) minmax(0, 1.15fr) !important;
  grid-template-rows:repeat(3, minmax(0, 1fr)) !important;
  grid-template-areas:"sec1 sec3" "sec2 sec3" "sec4 sec5" !important;
}
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .news-container.layout-focus-1{
  grid-template-columns:minmax(0, 1.35fr) minmax(0, .85fr) !important;
  grid-template-rows:repeat(3, minmax(0, 1fr)) !important;
  grid-template-areas:"sec1 sec3" "sec1 sec2" "sec4 sec5" !important;
}
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .news-container.layout-focus-3{
  grid-template-columns:minmax(0, .85fr) minmax(0, 1.35fr) !important;
  grid-template-rows:repeat(3, minmax(0, 1fr)) !important;
  grid-template-areas:"sec1 sec3" "sec2 sec3" "sec4 sec5" !important;
}
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .news-container.layout-panorama{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows:repeat(3, minmax(0, 1fr)) !important;
  grid-template-areas:"sec1 sec2" "sec3 sec3" "sec4 sec5" !important;
}
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .news-container.layout-tower{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows:minmax(0, .85fr) minmax(0, 1.3fr) minmax(0, .85fr) !important;
  grid-template-areas:"sec1 sec4" "sec3 sec3" "sec2 sec5" !important;
}
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .news-container.layout-mosaic{
  grid-template-columns:minmax(0, 1.2fr) minmax(0, .9fr) !important;
  grid-template-rows:repeat(3, minmax(0, 1fr)) !important;
  grid-template-areas:"sec1 sec2" "sec3 sec5" "sec4 sec5" !important;
}
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .news-container.layout-cross{
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.25fr) !important;
  grid-template-rows:repeat(3, minmax(0, 1fr)) !important;
  grid-template-areas:"sec1 sec3" "sec4 sec3" "sec2 sec5" !important;
}
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .news-container.layout-stream{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows:repeat(3, minmax(0, 1fr)) !important;
  grid-template-areas:"sec1 sec2" "sec3 sec4" "sec5 sec5" !important;
}

/* 20260820 - Le H1 reste disponible aux lecteurs d'ecran sans ajouter une
   ligne au canvas absolu historique de pub.html. */
html.unipay-page-pub .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;
}

/* Les dix cameras sont positionnees en absolu et ne contribuent donc pas a
   la hauteur du document. On reserve leur hauteur complete des le premier
   rendu, avant l'initialisation tardive des barres partagees. */
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait),
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page{
  height:auto !important;
  min-height:100dvh !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior-y:auto !important;
  touch-action:pan-y !important;
  -webkit-overflow-scrolling:touch !important;
}

html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page > .page-scope,
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page > .page-scope > main{
  height:calc(var(--pub-mobile-scene-top, 8px) + (var(--pub-mobile-step, 374px) * 9) + var(--pub-mobile-card-height, 360px) + var(--pub-safe-bottom, 88px)) !important;
  min-height:calc(var(--pub-mobile-scene-top, 8px) + (var(--pub-mobile-step, 374px) * 9) + var(--pub-mobile-card-height, 360px) + var(--pub-safe-bottom, 88px)) !important;
  max-height:none !important;
  overflow:visible !important;
  touch-action:pan-y !important;
}

/* 20260821 — gouttière mobile minimale.
   Les blocs de cinq restent dans leur grille dynamique, mais la scène
   récupère l'espace latéral perdu par les anciennes réserves de 20–54 px. */
html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait){
  --pub-mobile-side-gutter:clamp(8px, 1.8vw, 12px) !important;
  --pub-safe-left:var(--pub-mobile-side-gutter) !important;
  --pub-safe-right:var(--pub-mobile-side-gutter) !important;
  --pub-mobile-scene-right:var(--pub-mobile-side-gutter) !important;
  --pub-mobile-scene-width:calc(100vw - (2 * var(--pub-mobile-side-gutter))) !important;
  --up-pub-mobile-camera-left:var(--pub-mobile-side-gutter) !important;
  --up-pub-mobile-camera-right:var(--pub-mobile-side-gutter) !important;
  --up-pub-mobile-camera-width:var(--pub-mobile-scene-width) !important;
  --unipay-content-left-reserve:0px !important;
}

html.unipay-pub-responsive.unipay-page-pub:is(.unipay-phone-portrait,.unipay-interface-mobile.unipay-portrait,.pub-device-mobile.pub-orientation-portrait) body.unipay-pub-page .news-container{
  left:var(--pub-mobile-side-gutter) !important;
  width:calc(var(--unipay-global-zoom-layout-viewport-width, 100vw) - (2 * var(--pub-mobile-side-gutter))) !important;
  max-width:calc(var(--unipay-global-zoom-layout-viewport-width, 100vw) - (2 * var(--pub-mobile-side-gutter))) !important;
}