/* ==========================================================================
   PLANET MODS - RESPONSIVE V1
   ========================================================================== */

:root {
  --pm-fixed-header-height:66px;
  --pm-content-gutter:clamp(12px,3vw,32px);
  --pm-content-max:1600px;
}

html {
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  scroll-padding-top:calc(var(--pm-fixed-header-height) + 18px);
}

html *,
html *::before,
html *::after {
  box-sizing:border-box;
}

body {
  width:100%;
  min-width:320px;
  max-width:100%;
  min-height:100dvh;
  padding-top:var(--pm-fixed-header-height) !important;
  overflow-x:hidden !important;
}

img,
picture,
svg,
video,
canvas,
iframe {
  max-width:100%;
}

img,
picture,
video,
canvas {
  height:auto;
}

input,
select,
textarea,
button {
  max-width:100%;
  font:inherit;
}

html body .container-central {
  width:min(100%,var(--pm-content-max)) !important;
  max-width:var(--pm-content-max) !important;
  min-width:0 !important;
  margin-right:auto !important;
  margin-left:auto !important;
  padding-right:var(--pm-content-gutter) !important;
  padding-left:var(--pm-content-gutter) !important;
  padding-bottom:clamp(42px,7vw,100px) !important;
}

html body #content {
  width:100%;
  min-width:0;
  max-width:100%;
  margin-top:clamp(18px,3vw,40px) !important;
}

html body .pm-site-header .pm-site-header__inner {
  max-width:1500px !important;
}

html body .pm-site-header .search-form,
html body .pm-site-header .search-bar-wrapper {
  min-width:0 !important;
}

html body .pm-site-header .pm-language-dropdown {
  max-width:calc(100vw - 20px) !important;
}

html body .carousel-wrapper.pm-header-carousel-gap {
  margin-top:20px !important;
}

html body .carousel-wrapper {
  width:min(760px,calc(100% - (var(--pm-content-gutter) * 2))) !important;
  max-width:min(760px,calc(100% - (var(--pm-content-gutter) * 2))) !important;
  min-width:0;
  margin-right:auto !important;
  margin-left:auto !important;
}

html body .scroll-container {
  width:100% !important;
  max-width:100%;
  padding:1rem clamp(8px,2vw,18px) !important;
  scroll-snap-type:x proximity;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}

html body .scroll-container > a {
  flex:0 0 auto;
  scroll-snap-align:center;
}

html body .carousel-img {
  width:clamp(72px,8vw,90px) !important;
  height:clamp(104px,11.5vw,130px) !important;
  flex:0 0 auto !important;
}

html body .carousel-arrow.left {
  left:-20px !important;
}

html body .carousel-arrow.right {
  right:-20px !important;
}

html body .overlay-text {
  width:calc(100% - (var(--pm-content-gutter) * 2)) !important;
  max-width:1200px;
  top:calc(var(--pm-fixed-header-height) + 8px) !important;
  padding-inline:0 !important;
  overflow:hidden;
  font-size:clamp(1.45rem,4vw,4rem) !important;
}

html body .container_ariane {
  position:relative !important;
  inset:auto !important;
  width:min(100%,var(--pm-content-max)) !important;
  max-width:var(--pm-content-max) !important;
  margin:6px auto 0 !important;
  padding:0 var(--pm-content-gutter) !important;
  color:var(--ariane-color) !important;
  font-size:.8rem !important;
  text-align:left !important;
  white-space:normal !important;
  z-index:2 !important;
}

html body .hero-featured,
html body .hero-featured.hero-compact {
  width:100%;
  max-width:100%;
}

html body .hero-featured .hero-content {
  max-width:min(720px,calc(100% - 28px));
}

html body .mods-grid,
html body .dlc-slider,
html body .dlc-swiper {
  width:100%;
  max-width:100%;
  min-width:0;
}

html body .mods-grid .small-card,
html body .mods-grid .basic-card {
  width:100% !important;
  max-width:360px !important;
  margin-right:auto !important;
  margin-left:auto !important;
}

html body .dlc-swiper .swiper-wrapper {
  display:flex !important;
  width:auto;
  min-width:100%;
  max-width:none !important;
  align-items:stretch;
}

html body .dlc-swiper .swiper-slide {
  display:flex !important;
  min-width:0;
  max-width:none !important;
  justify-content:center;
}

html body .dlc-swiper .swiper-slide > .hero-featured {
  width:90% !important;
  max-width:1350px !important;
  margin-right:auto !important;
  margin-left:auto !important;
}

@media (max-width:1399.98px) {
  .mods-grid > .tilt {
    flex-basis:calc(30% - 20px) !important;
  }

  .pm-footer__main {
    grid-template-columns:1.2fr repeat(2,minmax(160px,.7fr));
  }

  .pm-footer__main > :nth-child(4),
  .pm-footer__main > :nth-child(5) {
    margin-top:8px;
  }
}

@media (max-width:991.98px) {
  .mods-grid > .tilt {
    flex-basis:calc(50% - 20px) !important;
  }

  .pm-footer__main {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .pm-footer__brand {
    grid-column:1 / -1;
  }
}

@media (max-width:767.98px) {
  :root {
    --pm-fixed-header-height:112px;
  }

  html body .container-head {
    height:auto !important;
    min-height:96px;
    display:grid !important;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    gap:7px 10px;
    padding:8px 12px !important;
  }

  html body .pm-site-header .logo-title-wrapper {
    grid-column:1;
    grid-row:1;
    min-width:0;
    padding-left:42px !important;
    margin-left:0;
  }

  html body .pm-site-header .background-logo {
    width:38px !important;
    height:38px !important;
    left:0 !important;
    top:-4px !important;
  }

  html body .pm-site-header h1 a {
    font-size:clamp(1.02rem,5.3vw,1.25rem) !important;
  }

  html body .pm-site-header .search-bar-wrapper {
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    margin:0;
  }

  html body .pm-site-header .search-form {
    max-width:none;
    height:42px !important;
  }

  html body .pm-site-header .hamburger {
    display:block !important;
    grid-column:2;
    grid-row:1;
    align-self:center;
    justify-self:end;
    position:static;
    z-index:3;
  }

  html body .pm-site-header nav {
    position:static !important;
    grid-column:2;
    grid-row:1;
    width:0;
    height:0;
    justify-self:end;
  }

  html body .pm-site-header nav > ul {
    display:none !important;
  }

  html body .pm-site-header nav > ul.open {
    position:absolute;
    top:calc(96px + 8px);
    right:10px;
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    width:min(300px,calc(100vw - 20px));
    max-height:calc(100dvh - var(--pm-fixed-header-height) - 12px);
    padding:10px;
    overflow-y:auto;
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    background:#111;
    box-shadow:0 12px 28px rgba(0,0,0,.48);
  }

  html body .pm-site-header nav > ul > li,
  html body .pm-site-header nav > ul > li > a,
  html body .pm-site-header .pm-header-icon-button,
  html body .pm-site-header .pm-language-menu,
  html body .pm-site-header .pm-language-menu details,
  html body .pm-site-header .pm-language-menu summary {
    width:100% !important;
  }

  html body .pm-site-header .pm-language-dropdown {
    position:static !important;
    width:100% !important;
    margin-top:7px;
    box-shadow:none !important;
  }

  html body .carousel-wrapper.pm-header-carousel-gap {
    margin-top:20px !important;
  }

  html body .carousel-arrow {
    display:none !important;
  }

  html body .mods-grid > .tilt {
    flex-basis:calc(70% - 20px) !important;
  }

  .hero-overlay {
    padding:20px;
  }

  .game-logo-wrapper-2 {
    display:none;
  }

  .pm-footer__main {
    grid-template-columns:1fr !important;
  }

  .pm-footer__brand {
    grid-column:auto;
  }

  .pm-footer__inner {
    width:min(100% - 30px,1380px);
    padding-top:38px;
  }

  .pm-footer__bottom {
    flex-direction:column;
    gap:6px;
  }
}

@media (max-width:450.98px) {
  html body .mods-grid > .tilt {
    flex-basis:100% !important;
  }

  html body .mods-grid .basic-card {
    max-width:390px !important;
  }

  html body .fiche-jeu-global {
    min-width:0 !important;
    padding:1rem !important;
  }

  html body .hero-featured.hero-compact {
    height:300px;
  }

  html body .hero-overlay {
    align-items:flex-end;
    background:linear-gradient(0deg,rgba(0,0,0,.90),rgba(0,0,0,.20));
  }
}