/* ========================================================================== */
/* BB2020 — PWA smartphone : installation obligatoire + paysage obligatoire  */
/* ========================================================================== */

.bb-pwa-gate{
  display:none;
}

body.bb-pwa-install-required,
body.bb-pwa-rotate-required{
  overflow:hidden !important;
  overscroll-behavior:none !important;
  touch-action:none !important;
}

body.bb-pwa-install-required #bb-pwa-install-gate,
body.bb-pwa-rotate-required #bb-pwa-rotate-gate{
  position:fixed;
  inset:0;
  z-index:2147483646;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100vw;
  height:100dvh;
  min-height:100vh;
  padding:max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  overflow:auto;
  color:#fff1c1;
  background:
    radial-gradient(circle at 50% 12%, rgba(154,91,31,.28), transparent 34%),
    linear-gradient(rgba(0,0,0,.74),rgba(0,0,0,.94)),
    url('../assets/style3/background_stone_wall.png') center/cover fixed;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y !important;
}

.bb-pwa-gate-panel{
  box-sizing:border-box;
  width:min(620px,100%);
  margin:auto;
  padding:24px clamp(18px,5vw,42px) 26px;
  text-align:center;
  border:1px solid rgba(233,183,78,.72);
  border-radius:10px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.05),transparent 26%),
    rgba(10,8,6,.96);
  box-shadow:
    0 0 0 3px rgba(0,0,0,.72),
    inset 0 0 32px rgba(0,0,0,.72),
    0 24px 70px rgba(0,0,0,.75);
}

.bb-pwa-app-icon{
  display:block;
  width:104px;
  height:104px;
  margin:0 auto 13px;
  border-radius:22px;
  box-shadow:0 9px 24px rgba(0,0,0,.58),0 0 0 1px rgba(235,188,87,.62);
}

.bb-pwa-kicker{
  margin:0 0 7px;
  color:#d8ad56;
  font-size:11px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:2.6px;
  text-transform:uppercase;
}

.bb-pwa-gate h2{
  margin:0 0 13px !important;
  padding:0 !important;
  color:#ffe08a !important;
  font-family:Georgia,'Times New Roman',serif !important;
  font-size:clamp(28px,7vw,46px) !important;
  line-height:1.05 !important;
  letter-spacing:.5px !important;
  text-transform:uppercase;
  text-shadow:0 2px 0 #3b0c04,0 0 16px rgba(255,210,100,.15);
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}

.bb-pwa-lead{
  max-width:490px;
  margin:0 auto 18px;
  color:#f3e5b9;
  font-size:15px;
  line-height:1.5;
}

.bb-pwa-primary{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-width:min(310px,100%);
  min-height:50px !important;
  margin:0 auto 16px !important;
  padding:11px 20px !important;
  color:#fff1bd !important;
  font-size:15px !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  letter-spacing:.7px !important;
  border:1px solid #e4ad4b !important;
  border-radius:7px !important;
  background:linear-gradient(180deg,#985b20,#6a1b0d 58%,#2b0905) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 20px rgba(0,0,0,.48) !important;
  touch-action:manipulation !important;
}

.bb-pwa-primary[hidden]{
  display:none !important;
}

.bb-pwa-primary:active{
  transform:translateY(1px);
}

.bb-pwa-help,
.bb-pwa-install-state{
  max-width:500px;
  margin:0 auto 13px;
  padding:12px 14px;
  color:#e9d9a8;
  font-size:13px;
  line-height:1.5;
  text-align:left;
  border:1px solid rgba(178,127,47,.42);
  border-radius:6px;
  background:rgba(55,35,15,.42);
}

.bb-pwa-install-state{
  color:#ffe59b;
  text-align:center;
}

.bb-pwa-install-state[hidden]{
  display:none !important;
}

.bb-pwa-footnote{
  margin:13px auto 0;
  color:#b9aa81;
  font-size:12px;
  line-height:1.45;
}

.bb-pwa-rotate-panel{
  width:min(560px,100%);
}

.bb-pwa-phone-turn{
  position:relative;
  width:112px;
  height:82px;
  margin:0 auto 20px;
}

.bb-pwa-phone-turn span{
  position:absolute;
  left:27px;
  top:10px;
  width:58px;
  height:94px;
  border:4px solid #f0c66e;
  border-radius:11px;
  background:linear-gradient(180deg,#25150d,#080706);
  box-shadow:0 10px 25px rgba(0,0,0,.55);
  transform:rotate(90deg);
  transform-origin:center;
}

.bb-pwa-phone-turn span::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:6px;
  width:12px;
  height:3px;
  border-radius:3px;
  background:#f0c66e;
  transform:translateX(-50%);
}

.bb-pwa-phone-turn::before,
.bb-pwa-phone-turn::after{
  content:'';
  position:absolute;
  z-index:2;
}

.bb-pwa-phone-turn::before{
  right:0;
  top:7px;
  width:29px;
  height:29px;
  border-top:4px solid #d98939;
  border-right:4px solid #d98939;
  border-radius:0 18px 0 0;
}

.bb-pwa-phone-turn::after{
  right:0;
  top:3px;
  width:0;
  height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:13px solid #d98939;
  transform:rotate(44deg);
}

/* En PWA plein écran, respecte les encoches / zones sûres du téléphone. */
body.bb-pwa-standalone.bb-pwa-phone header{
  padding-left:max(14px, env(safe-area-inset-left)) !important;
  padding-right:max(64px, calc(52px + env(safe-area-inset-right))) !important;
}

body.bb-pwa-standalone.bb-pwa-phone .bb-mobile-menu-toggle{
  right:max(12px, env(safe-area-inset-right)) !important;
}

body.bb-pwa-standalone.bb-pwa-phone .bb-content,
body.bb-pwa-standalone.bb-pwa-phone .bb-public-shell{
  padding-left:max(var(--bb-mobile-gutter,10px), env(safe-area-inset-left)) !important;
  padding-right:max(var(--bb-mobile-gutter,10px), env(safe-area-inset-right)) !important;
  padding-bottom:max(36px, env(safe-area-inset-bottom)) !important;
}

@media (orientation:landscape) and (max-height:520px){
  body.bb-pwa-install-required #bb-pwa-install-gate,
  body.bb-pwa-rotate-required #bb-pwa-rotate-gate{
    align-items:flex-start;
  }
  .bb-pwa-gate-panel{
    padding-top:17px;
    padding-bottom:18px;
  }
  .bb-pwa-app-icon{
    width:72px;
    height:72px;
    margin-bottom:8px;
  }
  .bb-pwa-gate h2{
    font-size:28px !important;
    margin-bottom:8px !important;
  }
  .bb-pwa-lead{
    margin-bottom:11px;
    font-size:13px;
  }
  .bb-pwa-help,
  .bb-pwa-install-state{
    padding:8px 10px;
    margin-bottom:8px;
    font-size:12px;
  }
  .bb-pwa-footnote{
    margin-top:7px;
    font-size:11px;
  }
}

/* Notifications Push Cabalvision */
.bb-push-optin{
    box-sizing:border-box;
    width:min(960px,calc(100% - 24px));
    margin:12px auto;
    padding:12px 14px;
    border:1px solid rgba(191,143,72,.58);
    border-radius:10px;
    background:rgba(27,15,10,.96);
    box-shadow:0 7px 24px rgba(0,0,0,.34);
    color:#f1dfb4;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}
.bb-push-optin[hidden]{display:none!important}
.bb-push-optin strong{display:block;color:#fff1c5;margin-bottom:3px}
.bb-push-optin p{margin:0;font-size:.92rem;line-height:1.35}
.bb-push-optin button,
#bb-push-account-enable,
#bb-push-account-disable{
    white-space:nowrap;
}
.bb-push-status-ok{color:#9fe1a8}
.bb-push-status-warn{color:#ffd08a}
.bb-push-status-error{color:#ff9b8f}
@media screen and (max-width:1000px) and (pointer:coarse){
    .bb-push-optin{width:calc(100% - 16px);margin:8px auto;flex-direction:column;align-items:stretch}
    .bb-push-optin button{width:100%}
}