:root{
  /* same margin all around the video */
  --success1-margin-desktop: 80px;
  --success1-margin-mobile: 80px;
  /* large rounded corners for video frame */
  --success1-radius: 50px;
}

@font-face {
  font-family: 'Plaid XL';
  src:
    url('../fonts/Plaid-XL.woff2') format('woff2'),
    url('../fonts/Plaid-XL.woff') format('woff'),
    url('../fonts/Plaid-XL.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

html, body{
  height:100%;
  width:100%;
  margin:0;
  background:#000;
  overflow:hidden; /* keep the player framed without scrolling */
}

/* Hide the auto-injected header/footer/menu; keep the original fixed SVG buttons already in the pages */
header, footer, .site-nav{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
}

/* Project page top buttons: use real text (not SVG) */
nav .boutons{
  font-family: 'Plaid XL', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 800 !important;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: -1px;
  font-size: clamp(11px, 1.05vw, 16px);
  line-height: 1;
  color: #fff;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Only hide SVG once text is injected, otherwise we'd show nothing */
nav .boutons[data-text-button="1"] svg:not(.boutons-logo){
  display:none !important;
}

nav .boutons .boutons-logo{
  display:block;
  height: 32px;
  width: auto;
}

nav .boutons:hover .boutons-logo{
  opacity: 0.5;
}

/* The working player is the .video-container iframe; keep only one visual player */
.project-video{
  display:none !important;
}

/* Project title image: smaller, no extra top margin */
.morceau-groupe{
  width: 250px !important;              /* ~1.6x smaller than 400px */
  left: calc(50% - 125px) !important;   /* keep it centered */
  margin-top: 15px !important;          /* light top margin, aligned with header buttons */
}

.morceau-groupe img{
  width: 100% !important;
  height: auto !important;
}

.video-container{
  position:fixed !important;
  inset: 0 !important; /* full viewport */
  z-index: 3;
  background: transparent;
  box-sizing:border-box;
  /* override site-global "responsive video" helper + keep margin all around */
  padding: var(--success1-margin-desktop) !important;
  padding-top: calc(var(--success1-margin-desktop) + env(safe-area-inset-top, 0px)) !important;
  padding-right: calc(var(--success1-margin-desktop) + env(safe-area-inset-right, 0px)) !important;
  padding-bottom: calc(var(--success1-margin-desktop) + env(safe-area-inset-bottom, 0px)) !important;
  padding-left: calc(var(--success1-margin-desktop) + env(safe-area-inset-left, 0px)) !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

.video-container iframe,
.video-container embed,
.video-container object{
  /* override site-global absolute fullscreen iframe */
  position: static !important;
  width:100% !important;
  height:auto !important;
  max-height:100% !important;
  aspect-ratio: 16 / 9;
  border:0 !important;
  display:block;
  border-radius: var(--success1-radius);
}

/* If some pages still contain an <iframe id="player2"> etc, ensure it fills the container */
#player, #player2, .youtube-player{
  width:100% !important;
  height:100% !important;
}

/* NEXT / PREVIOUS project controls as left/right arrow text */
@media (min-width: 640px){
  #previous,
  #next{
    position:fixed !important;
    top:50% !important;
    -webkit-transform:translateY(-50%) !important;
    transform:translateY(-50%) !important;
    width:auto !important;
    height:auto !important;
    font-family:'Plaid XL', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight:800;
    font-size:22px;
    letter-spacing:0;
    color:#fff !important;
    text-decoration:none;
    z-index:4;
  }

  #previous{
    left:32px !important;
  }

  #next{
    right:32px !important;
  }
}

@media (max-width: 900px){
  .video-container{
    padding: var(--success1-margin-mobile) !important;
    padding-top: calc(var(--success1-margin-mobile) + env(safe-area-inset-top, 0px)) !important;
    padding-right: calc(var(--success1-margin-mobile) + env(safe-area-inset-right, 0px)) !important;
    padding-bottom: calc(var(--success1-margin-mobile) + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: calc(var(--success1-margin-mobile) + env(safe-area-inset-left, 0px)) !important;
  }
}