body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 16px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
#FlexContainer1
{
   display: flex;
   position: relative;
   min-height: 100vh;
   padding: 10px 10px 10px 10px;
   flex-direction: column;
   flex-wrap: nowrap;
   justify-content: space-around;
   align-items: center;
   align-content: center;
   margin: 0;
   box-sizing: border-box;
   font-size: 0;
}
#FlexContainerNav
{
   display: flex;
   width: 100%;
   position: relative;
   height: 72px;
   padding: 10px 10px 10px 10px;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-around;
   align-items: center;
   align-content: center;
   margin: 0;
   box-sizing: border-box;
   font-size: 0;
}
#MediaPlayer1
{
   box-sizing: border-box;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   border: 0px solid #DEE2E6;
   border-radius: 0px;
}
#wb_MediaPlayer1
{
   flex-grow: 0;
   flex-shrink: 0;
   align-self: auto;
}
#FlexContainer2
{
   display: flex;
   position: relative;
   padding: 0;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-around;
   align-items: center;
   align-content: flex-start;
   margin: 0;
   background-color: #FFFFFF;
   background-image: none;
   border: 0px solid #DEE2E6;
   border-radius: 0px;
   box-sizing: border-box;
   font-size: 0;
}
#wb_Image2
{
   height: 100%;
   margin: 0;
   flex-grow: 0;
   flex-shrink: 0;
   align-self: auto;
   vertical-align: top;
}
#Image2
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 5px 5px 5px 5px;
   display: inline-block;
   width: 100%;
   height: 100%;
   object-fit: contain;
}
#Button1
{
   box-sizing: border-box;
   line-height: 32px;
   text-decoration: none;
   vertical-align: top;
   border: 1px solid #0D6EFD;
   border-radius: 11px;
   background-color: #FFFFFF;
   background-image: none;
   color: #4169E1;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 19px;
   padding: 1px 6px 1px 6px;
   text-align: center;
   flex-grow: 0;
   flex-shrink: 0;
   align-self: auto;
   -webkit-appearance: none;
   margin: 0;
}
#Button1:focus
{
   outline: 0;
}
#wb_Image3
{
   margin: 0;
   flex-grow: 0;
   flex-shrink: 0;
   align-self: auto;
   vertical-align: top;
}
#Image3
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   display: inline-block;
   width: 109px;
   height: auto;
}
/* ============================================================================ */
/* ✅ INTRO — CSS IMBATTABLE (vidéo = plein viewport - nav)                      */
/* ============================================================================ */

:root{
  --vh: 1vh;         /* mis à jour par ton polyfill */
  --nav-h: 0px;      /* mis à jour par ton JS */
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #000; color: #111;                 /* fond noir pour éviter les bandes blanches */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ------------------------------ */
/* Zone vidéo (fond NOIR)         */
/* ------------------------------ */
#FlexContainer1{
  position: relative !important;
  width: 100% !important;
  height: calc((var(--vh) * 100) - var(--nav-h, 92px)) !important;
  min-height: calc((var(--vh) * 100) - var(--nav-h, 92px)) !important;
  background: #000 !important;

  /* ⬇️ centrer le player */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: auto !important; /* scroll si besoin */

  /* ✅ évite que le haut de l’image soit mangé par la barre/encoche */
  padding-top: max(env(safe-area-inset-top), 24px) !important;

  padding-right: 0 !important;               /* pas de gouttières latérales */
  padding-left: 0 !important;
  padding-bottom: calc(12px + var(--nav-h, 92px) + env(safe-area-inset-bottom));
}

/* WWB force width/height inline → on neutralise */
#wb_MediaPlayer1{
  position: static !important;
  width: 100% !important;
  height: 100% !important;          /* le wrapper occupe toute la hauteur dispo */
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;          /* centrer l’élément vidéo dedans */
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;             /* 🔥 supprime la marge interne qui rétrécissait la vidéo */
}

/* ------------------------------ */
/* PLAYER — adaptatif ratio réel  */
/* ------------------------------ */
#MediaPlayer1{
  position: static !important;
  left: auto !important; right: auto !important; top: auto !important;

  /* Base commune : on limite au viewport utile, sans déformation */
  max-width: 100vw !important;
  max-height: calc((var(--vh)*100) - var(--nav-h, 92px)) !important;

  margin: 0 auto !important;
  display: block !important;
  z-index: 1 !important;
  border: 0 !important;
  outline: none !important;
  background: #000 !important;

  object-fit: contain !important;       /* pas de crop par défaut */
  object-position: center center !important;
}

/* 🔀 On ne force PLUS de aspect-ratio ici.
   On laisse le JS ajouter .is-portrait / .is-landscape selon la vidéo chargée. */

/* Paysage → priorité à la hauteur */
#MediaPlayer1.is-landscape{
  height: 100% !important;
  width: auto !important;
}

/* Portrait → priorité à la largeur (supprime les grosses marges latérales) */
#MediaPlayer1.is-portrait{
  width: 100vw !important;
  height: auto !important;

  /* ✅ on garde un petit delta en haut pour que le titre ne soit JAMAIS rogné */
  max-height: calc((var(--vh)*100) - var(--nav-h, 92px) - 12px) !important;
}

/* Option ZÉRO bandes en portrait (légère coupe contrôlée) :
   ajoute la classe .fill côté HTML/JS si tu veux ce rendu */
#MediaPlayer1.is-portrait.fill{
  object-fit: cover !important;
}

/* ------------------------------ */
/* Nav en bas: 1 bouton centré    */
/* ------------------------------ */
#FlexContainerNav{
  position: fixed !important;
  left: 0; right: 0; bottom: 0;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) 16px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(140%) blur(4px);
  -webkit-backdrop-filter: saturate(140%) blur(4px);
  border-top: 1px solid rgba(0,0,0,0.06);
  z-index: 1000 !important;       /* au-dessus de la vidéo */
  text-align: center;
}

/* Bouton central 72px (override styles WWB) */
#wb_Image2{
  width: 72px !important;
  height: 72px !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0 !important;
  line-height: 0 !important;
}
#wb_Image2 img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  transition: transform .12s ease;
}
#wb_Image2 a:hover img{ transform: scale(1.06); }

/* (si tu réintroduis des labels plus tard) */
#wb_Text1{ justify-self: start; }
#wb_Text2{ justify-self: end; }
#wb_Text1 span, #wb_Text2 span{
  color: #00BFFF; font-weight: 600; letter-spacing: .2px; white-space: nowrap;
}

/* Divers WWB */
#FlexContainer2{ min-height: 0 !important; }

/* Responsive fin */
@media (max-width: 480px){
  #FlexContainerNav{
    gap: 10px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) 12px;
  }
  #wb_Image2{ width: 64px !important; height: 64px !important; }
  #wb_Text1 span, #wb_Text2 span{ font-size: 14px; }
}
  /* Menu flottant positionné en JS près de l'image #Image3 */
  #share-menu{
    position:absolute; display:none; min-width:220px; padding:.5rem;
    border-radius:.5rem; background:#111827; color:#e5e7eb;
    box-shadow:0 8px 28px rgba(0,0,0,.35); z-index:9999;
    font: 500 14px/1.25 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  }
  #share-menu[aria-hidden="false"]{ display:block; }
  .share-row{ display:flex; gap:.55rem; align-items:center; padding:.38rem .3rem; border-radius:.4rem; }
  .share-row a{ color:inherit; text-decoration:none; flex:1; }
  .share-row:hover{ background:#1f2937; }
  .share-icon{ width:18px; text-align:center; }
  .share-sep{ height:1px; background:#1f2937; margin:.25rem 0; }

  /* Toast “copied” */
  #share-toast{
    position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
    padding:.5rem .75rem; border-radius:.5rem; background:#0f172a; color:#e5e7eb;
    font: 600 13px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    box-shadow:0 6px 24px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .25s ease;
    z-index:10000;
  }
  #share-toast.show{ opacity:1; }