/* ch6.2 R198 — 1st PopUp Groupe et Personnel : une seule présentation canonique. */
:root{
  --mom-first-popup-frame-width:min(94vw,520px);
  --mom-first-popup-frame-height:min(94svh,800px);
  --mom-first-popup-top-reserve:0px;
  --mom-first-popup-actions-height:40px;
  --mom-first-popup-bottom-reserve:52px;
  --mom-first-popup-action-gap:8px;
  --mom-first-popup-action-bg:#111;
  --mom-first-popup-action-border:rgba(255,255,255,.42);
  --mom-first-popup-action-fg:#fff;
}

#firstPopupCard.mom-first-popup-frame,
html.mom-personal-page #personalPopupStage.mom-first-popup-frame{
  position:relative;
  width:var(--mom-first-popup-frame-width);
  height:var(--mom-first-popup-frame-height);
  max-width:var(--mom-first-popup-frame-width);
  max-height:var(--mom-first-popup-frame-height);
  min-height:0;
  margin:0;
  padding:0;
  
  background:transparent;
  border:0;

  box-shadow:none;
  overflow:visible;
  touch-action:none;
  
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  flex:0 0 auto;
  transform-origin:center center;
}

#firstPopupCard .mom-first-popup-media-zone,
html.mom-personal-page #personalPopupStage .mom-first-popup-media-zone{
  position:absolute!important;
  z-index:2;
  top:var(--mom-first-popup-top-reserve);
  right:0;
  bottom:var(--mom-first-popup-bottom-reserve);
  left:0;
  width:100%;
  height:auto;
  min-width:0;
  max-width:100%;
  white-space:normal;
  line-height:1.08;

  min-height:0;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;

  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  
  background:transparent;

  touch-action:none;
}

#firstPopupCard .mom-first-popup-media-zone>img,
#firstPopupCard .mom-first-popup-media-zone>video,
html.mom-personal-page #personalPopupStage .mom-first-popup-media-zone>img,
html.mom-personal-page #personalPopupStage .mom-first-popup-media-zone>video{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  margin:auto;
  border:0;
  border-radius:14px;
  background:transparent;
  box-shadow:0 16px 44px rgba(0,0,0,.34);
  object-fit:contain;
  object-position:center;
}

#firstPopupCard .mom-first-popup-media-zone>#firstPopupText,
html.mom-personal-page #personalPopupStage .mom-first-popup-media-zone>.personal-popup-text{
  width:100%;
  max-height:100%;
  margin:auto;
  
  overflow:auto;
  background:color-mix(in srgb,var(--panel) 92%,transparent);
}

#firstPopupVideoLoading{
  width:100%;
  height:100%!important;
  max-height:none!important;

}

#firstPopupCard>.mom-first-popup-controls-wrap{
  position:absolute;
  z-index:20;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  margin:0;
  padding:0;
  
  pointer-events:none;
}
#firstPopupActionsRow{
  width:100%;
  margin:0;
  padding:0;
  gap:0;
  
  pointer-events:auto;
}

html.mom-personal-page #personalPopupStage>.mom-first-popup-actions{
  position:absolute;
  z-index:20;
  left:0;
  right:0;
  bottom:0;
}

.mom-first-popup-actions{
  width:100%;
  height:var(--mom-first-popup-actions-height);
  min-height:var(--mom-first-popup-actions-height);
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  gap:var(--mom-first-popup-action-gap);
  
}
#firstPopupActionsRow>.mom-first-popup-actions{
  position:static;
}

.mom-first-popup-action{
  position:relative;
  width:100%;
  min-width:0;
  height:var(--mom-first-popup-actions-height);
  min-height:var(--mom-first-popup-actions-height);
  margin:0;
  padding:4px 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  overflow:hidden;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  
  border:1px solid var(--mom-first-popup-action-border);
  border-radius:10px;
  background:var(--mom-first-popup-action-bg);
  color:var(--mom-first-popup-action-fg);
  box-shadow:none;
  font:inherit;
  font-size:11.5px;
  font-weight:750;
  line-height:1.08;
  text-align:center;
  white-space:normal;
  text-shadow:none;
  cursor:pointer;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  
  touch-action:manipulation;
}
.mom-first-popup-action:active{
  transform:scale(.97)!important;
}

.mom-first-popup-action>span[aria-hidden="true"]{
  display:none;
}
.mom-first-popup-action>span:not([aria-hidden]){
  position:static!important;
  width:100%;
  height:auto;
  min-width:0;
  max-width:100%;
  white-space:normal!important;
  overflow:visible;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  font:inherit;
  text-shadow:none;
}
.mom-first-popup-action>span:not([aria-hidden])>span{
  min-width:0;
  max-width:100%;
  white-space:normal;
  line-height:1.08;
  overflow:visible;
  text-overflow:clip;
  word-break:normal;
  overflow-wrap:normal;
}
.mom-first-popup-action svg{
  display:none;
}

#firstPopupCard>#firstPopupBand,
html.mom-personal-page #personalPopupStage .personal-popup-band{
  position:absolute;
  z-index:24;
  top:10px;
  left:42px;
  right:42px;
  bottom:auto;
  margin:0;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--text,#fff);
  font-size:13px;
  font-weight:750;
  line-height:24px;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
  pointer-events:none;
}
html.mom-personal-page #personalPopupStage .personal-popup-dots{
  position:absolute;
  z-index:24;
  top:auto;
  right:10px;
  bottom:54px;
  left:auto;
}

#firstPopupCard>#firstPopupCloseBtn{
  top:8px!important;
  right:8px!important;
  z-index:30!important;
}
html.mom-personal-page #personalPopupCloseBtn{
  position:absolute;
  z-index:10002!important;
  top:calc(50% - (var(--mom-first-popup-frame-height) / 2) + 8px)!important;
  right:calc(50% - (var(--mom-first-popup-frame-width) / 2) + 8px)!important;
  width:30px!important;
  height:30px!important;
  min-width:30px;
  min-height:30px;
  padding:5px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#fff;
}

html.mom-personal-page #personalPopupStage .personal-popup-sound-btn{
  left:12px;
  bottom:58px;
}

@media (max-width:360px){
  :root{--mom-first-popup-action-gap:6px;}
  .mom-first-popup-action{font-size:10.5px;padding-inline:5px;}
}

#firstPopupCommentBox,
#firstPopupCommentBox *{
  pointer-events:auto;
}

#firstPopupCard>#firstPopupCloseBtn{
  width:30px!important;
  height:30px!important;
  min-width:30px;
  min-height:30px;
  padding:5px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#fff;
}

#firstPopupCommentsToggleRow{
  display:none;
  height:0;
  overflow:hidden;
  padding:0;
}

#firstPopupOverlay,
#personalPopupIntro{
  align-items:center;
  justify-content:center;
  padding:0;
  
}
#firstPopupCard .mom-first-popup-media-zone>video,
html.mom-personal-page #personalPopupStage .mom-first-popup-media-zone>video{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
#firstPopupOverlay.first-popup-comments-open #firstPopupCloseBtn,
#personalPopupIntro.personal-popup-comments-open #personalPopupCloseBtn{
  visibility:hidden;
  pointer-events:none;
}

#firstPopupCommentsPanel{
  width:min(var(--mom-first-popup-frame-width),calc(100vw - 24px));
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%);
  max-width:none!important;
  max-height:min(70svh,620px);
}
#personalPopupIntro .personal-popup-comments-sheet{
  max-height:min(70svh,620px);
}
#firstPopupCard,
#personalPopupStage{
  opacity:1;
}

#firstPopupOverlay{
  position:fixed;
  inset:0;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100vw;
  height:100vh;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  
  clip-path:none;
  -webkit-clip-path:none;
  mask:none;
  -webkit-mask:none;
  contain:none;
  transform:none;
}
#firstPopupCard .mom-first-popup-media-zone{
  mask:none;
  -webkit-mask:none;
  transform:none;
}
#firstPopupCard .mom-first-popup-media-zone>#firstPopupImage{
  position:static;
  inset:auto;
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  margin:0;
  object-fit:contain;
  object-position:50% 50%;
  mask:none;
  -webkit-mask:none;
  transform:none;
  translate:none;
}

#firstPopupCard .mom-first-popup-media-zone>#firstPopupImage[hidden],
#firstPopupCard .mom-first-popup-media-zone>#firstPopupVideo[hidden],
#firstPopupCard .mom-first-popup-media-zone>#firstPopupVideoLoading[hidden]{
  display:none;
  visibility:hidden;
  pointer-events:none;
}

#firstPopupOverlay[hidden],
#firstPopupOverlay:not(.open):not(.popup-exit-running){
  display:none;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
#firstPopupOverlay[hidden] #firstPopupCard,
#firstPopupOverlay:not(.open):not(.popup-exit-running) #firstPopupCard{
  display:none;
  visibility:hidden;
  pointer-events:none;
}

html:not(.mom-personal-page) #firstPopupOverlay.open:not([hidden]){
  background:rgba(0,0,0,.035);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
html:not(.mom-personal-page) #firstPopupOverlay[hidden],
html:not(.mom-personal-page) #firstPopupOverlay:not(.open):not(.popup-exit-running){
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

#firstPopupCard.mom-first-popup-frame,
html.mom-personal-page #personalPopupStage.mom-first-popup-frame{
  border-radius:18px;
}
#firstPopupCard .mom-first-popup-media-zone,
html.mom-personal-page #personalPopupStage .mom-first-popup-media-zone{
  border-radius:18px;
  overflow:hidden!important;
  clip-path:inset(0 round 18px);
  -webkit-clip-path:inset(0 round 18px);
}
#firstPopupCard .mom-first-popup-media-zone>#firstPopupImage,
#firstPopupCard .mom-first-popup-media-zone>#firstPopupVideo,
#firstPopupCard .mom-first-popup-media-zone>#firstPopupText,
html.mom-personal-page #personalPopupStage .mom-first-popup-media-zone>img,
html.mom-personal-page #personalPopupStage .mom-first-popup-media-zone>video,
html.mom-personal-page #personalPopupStage .mom-first-popup-media-zone>.personal-popup-text{
  border-radius:18px;
  clip-path:inset(0 round 18px);
  -webkit-clip-path:inset(0 round 18px);
}
#firstPopupVideoLoading{border-radius:18px;}