@charset "UTF-8";
@font-face {
  font-family: Gotham;
  src: url(../fonts/Gotham/gotham-medium.ttf) format("truetype"), url(../fonts/Gotham/gotham-black.otf) format("opentype"); }
@font-face {
  font-family: "Noto Sans";
  src: url(../fonts/Noto_Sans/static/NotoSans-Medium.ttf) format("truetype"); }
@font-face {
  font-family: "Heebo";
  src: url(../fonts/Heebo/static/Heebo-Medium.ttf) format("truetype"); }
/* Font Le rest des sites 
-----------------------------------------------------------*/
/* Font MK2 
-----------------------------------------------------------*/
/* Color Theme
-----------------------------------------------------------*/
/* Header 
-----------------------------------------------------------*/
/* Menu Mobile 
-----------------------------------------------------------*/
/* Color burger btn */
/* bg color overlay */
/* bg color menu nav */
/*  color link menu nav */
/* HOVER color link menu nav */
/* color close menu mobile  */
/* Main
// ----------------------------------------------------------- */
main {
  font-family: "Noto Sans"; }

/* Slide
// ----------------------------------------------------------- */
/* Reservation
// ----------------------------------------------------------- */
/* bg color generale*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0; }

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none; }

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */ }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible; }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline; }

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto; }

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block; }

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item; }

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none; }

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none; }

/* fade-in-upwards */
@-webkit-keyframes fade-in-upwards {
  from {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@keyframes fade-in-upwards {
  from {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
.fade-in-upwards {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-name: fade-in-upwards;
  animation-name: fade-in-upwards; }

.zdblock_shop_container .container-shop .main_level_shop .menu_title {
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  box-shadow: 0px -8px 25px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  font-size: 3em;
  color: #fff;
  margin: 0 auto;
  line-height: 1.2;
  font-weight: 400;
  padding: 20px 0;
  text-transform: capitalize;
  font-family: "Heebo"; }

.zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container, .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-total-pay {
  display: flex;
  justify-content: space-between;
  column-gap: 2rem;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  font-size: 1rem;
  line-height: 1.25rem;
  padding: 20px; }

.zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .name-level, .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-total-pay .total_pay {
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
  column-gap: 4px;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 700; }
  @media screen and (max-width: 768px) {
    .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .name-level, .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-total-pay .total_pay {
      font-size: 1em; } }

@media screen and (max-width: 768px) {
  .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container, .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-total-pay {
    padding: 0 1em; } }
/*

OFFICIAL DESIGN SYSTEM BREAKPOINTS

MIN   MAX     NAME
----  ------  -------------
0     699     mobile
700   959     tablet
960   1284    laptop
1285  1599    desktop
1600  1919    large_desktop
1920  ∞       wide

*/
:root {
  /* Colors Web Site
-----------------------------------------------------------*/
  --primary-color: #d22b2b;
  --secondary-color: #d2d2d2;
  /* Body
-----------------------------------------------------------*/
  /* Body
-----------------------------------------------------------*/
  --bg-color: #141414;
  /* Header
-----------------------------------------------------------*/
  --header-height: 80px;
  --bg-header: #fff;
  --header-color: var(--secondary-color);
  --bg-header-scroll: transparent;
  --border-bottom-header-scroll: #ececec;
  --text-shadow-cart: none;
  --bg-circle-cart-shopping: var(--primary-color);
  --bg-return-to-perfs: var(--primary-color);
  --color-menu-mobile: var(--secondary-color);
  --bg-color-btn-newsletter: var(--primary-color);
  /*  Main
-----------------------------------------------------------*/
  --padding-main: 80px;
  /*  Slide
-----------------------------------------------------------*/
  --height-slideShow: calc(100vh - 100px);
  --bg-color-btn-Play: var(--primary-color);
  /*  Recherche Film
-----------------------------------------------------------*/
  --border-input-color: #c7c7c7;
  /*  Tabs
-----------------------------------------------------------*/
  --bg-color-tabs: #474747;
  --bg-color-tabs-hover: var(--primary-color);
  --color-tabs-hover: #fff;
  --border-color-tabs-focus: var(--primary-color);
  --color-tabs-focus: #fff;
  --color-arrow-tabs-focus: var(--primary-color);
  /*  Fiche Film
-----------------------------------------------------------*/
  --bg-color-tag-is-new: var(--primary-color);
  --color-border-is-new-before: #42235a;
  --color-tag-is-new: #fff;
  --max-width-content-grid: 1000px;
  --bg-color-card-front-face: #2f2f2f;
  --color-card-front-face: #d2d2d2;
  --color-genre: #777;
  --color-interdiction: #777;
  --box-shadow-card-movie: none;
  --bg-color-btn-perf-hover: var(--primary-color);
  /*  Reservation
-----------------------------------------------------------*/
  --bg-date-selected: var(--primary-color);
  --border-color-liste-date: var(--primary-color);
  --color-title-h2-showtimes: var(--secondary-color);
  --before-pic-background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.8) 0,
    transparent 40%,
    transparent 75%,
    rgba(0, 0, 0, 0.8)
  );
  --color-level-and-price: #3c4043;
  --top-interdiction: -12px;
  --right-interdiction: 0px;
  /*  Shopping
-----------------------------------------------------------*/
  --color-title-level: var(--secondary-color);
  --color-pay-with-card: var(--secondary-color);
  --color-secure-payment: #767676;
  --bg-container-pay-card: #f3f4f5;
  /*  Concessions and Payment
-----------------------------------------------------------*/
  --bg-color-btn-total: var(--primary-color);
  --color-bg-confirm-commande: var(--primary-color);
  /*  addToCard.scss
-----------------------------------------------------------*/
  --color-border-btn-add-to-card: var(--primary-color);
  --color-btn-add-to-card: var(--primary-color);
  --bg-btn-add-to-card: transparent;
  /*  _cart.scss
-----------------------------------------------------------*/
  --color-bg-btn-add-another-movie: var(--primary-color);
  --color-bnt-validate-the-basket: var(--primary-color);
  /*  Footer
-----------------------------------------------------------*/
  --bg-color-footer: #191919;
  --color-link-hover: #ffffff21;
  --color-footer: grey;
  --bg-color-before: var(--bg-color); }

*,
:after,
:before {
  box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; }

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

html {
  min-height: 100%; }

body {
  font-size: 100%;
  font-family: "Heebo";
  color: #faf9f7;
  min-height: 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  background-image: var(--bg-color);
  background: var(--bg-color); }

/* width */
::-webkit-scrollbar {
  width: 2px; }

a {
  cursor: pointer; }

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px; }

/* Handle */
::-webkit-scrollbar-thumb {
  background: #f3f3f3;
  border-radius: 10px; }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #000; }

img {
  display: inline-block;
  vertical-align: middle; }

ul,
ol,
dl {
  margin: 0;
  padding: 0; }

ul,
ol {
  list-style: none; }

a {
  line-height: inherit;
  text-decoration: none; }
  a:hover {
    text-decoration: none; }
  a img {
    border: 0; }

button {
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-block;
  font-family: "Heebo";
  padding: 0;
  text-decoration: none;
  vertical-align: middle;
  color: inherit; }

input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: transparent; }

.loader-wrapper-zerd {
  display: block;
  min-height: 100%;
  background-color: black;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: auto;
  z-index: 999999;
  visibility: visible; }
  .loader-wrapper-zerd .loadZerd {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 200px;
    width: 200px;
    justify-content: center;
    align-items: center;
    flex-direction: column; }
    .loader-wrapper-zerd .loadZerd .anime_loader {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      height: 50px;
      width: 50px;
      margin: -25px 0 0 -25px; }
      .loader-wrapper-zerd .loadZerd .anime_loader span {
        position: absolute;
        display: block;
        bottom: 10px;
        width: 9px;
        height: 5px;
        background: rgba(0, 0, 0, 0.25);
        -webkit-animation: anime_loader 1.5s infinite ease-in-out;
        animation: anime_loader 1.5s infinite ease-in-out; }
        .loader-wrapper-zerd .loadZerd .anime_loader span:nth-child(2) {
          left: 11px;
          -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
        .loader-wrapper-zerd .loadZerd .anime_loader span:nth-child(3) {
          left: 22px;
          -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }
        .loader-wrapper-zerd .loadZerd .anime_loader span:nth-child(4) {
          left: 33px;
          -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s; }
        .loader-wrapper-zerd .loadZerd .anime_loader span:nth-child(5) {
          left: 44px;
          -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s; }
    .loader-wrapper-zerd .loadZerd img {
      width: 100%;
      height: auto;
      display: block; }

/**===== Anime Loader =====*/
@keyframes anime_loader {
  0% {
    height: 5px;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    background: rgba(0, 0, 0, 0.25); }
  25% {
    height: 30px;
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
    background: red; }
  50% {
    height: 5px;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    background: rgba(0, 0, 0, 0.25); }
  100% {
    height: 5px;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    background: rgba(0, 0, 0, 0.25); } }
@-webkit-keyframes anime_loader {
  0% {
    height: 5px;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    background: rgba(0, 0, 0, 0.25); }
  25% {
    height: 30px;
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
    background: red; }
  50% {
    height: 5px;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    background: rgba(0, 0, 0, 0.25); }
  100% {
    height: 5px;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    background: rgba(0, 0, 0, 0.25); } }
/** END of anime_loader */
.video_slide {
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  margin: auto;
  bottom: 0;
  height: 100vh;
  padding-bottom: 56.25%;
  /*padding-bottom: 56.25%: The 16:9 aspect ratio corresponds to a height that is 56.25% of the width. "Zerd Horizon"*/ }
  .video_slide::after {
    content: "";
    display: block;
    background: linear-gradient(77deg, rgba(0, 0, 0, 0.9), transparent 85%);
    bottom: 0;
    left: 0;
    opacity: 1;
    position: absolute;
    right: 26.09%;
    top: 0;
    transition: opacity 0.5s;
    z-index: 0; }
  .video_slide::before {
    content: "";
    display: block;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0);
    background-image: none; }
  .video_slide .masque_videos {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto; }
    .video_slide .masque_videos .slide__iframe {
      border: 0;
      display: block;
      height: 100%;
      width: 100%;
      background: transparent; }
  @media screen and (max-width: 768px) {
    .video_slide {
      display: none; } }

.info_movie_zerd {
  bottom: 1em;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: absolute;
  width: 100%;
  max-width: 760px;
  min-width: 620px;
  z-index: 100;
  margin: 0;
  color: #ffffff;
  font-size: 1em;
  padding: 0 1em 1em 5em; }
  @media only screen and (min-width: 769px) and (max-width: 959px) {
    .info_movie_zerd {
      max-width: 50%; } }
  @media screen and (max-width: 768px) {
    .info_movie_zerd {
      max-width: 100%;
      padding: 0 1rem 1rem;
      justify-content: flex-start;
      min-width: 0;
      bottom: 2em; } }
  .info_movie_zerd .slide__title {
    position: relative;
    font-size: 3.5em;
    margin: 0;
    cursor: default;
    line-height: 1;
    color: #ffffff;
    margin: 0;
    text-transform: capitalize;
    font-weight: 400;
    font-family: "Heebo";
    line-height: 1;
    /* Annuler les styles de h2 et h1-h6 */
    text-align: inherit;
    border-bottom: none;
    padding-bottom: 0;
    text-shadow: none;
    color: #ffffff; }
    @media (max-width: 1600px) {
      .info_movie_zerd .slide__title {
        font-size: 2.5em; } }
    @media screen and (max-width: 768px) {
      .info_movie_zerd .slide__title {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 1.125em;
        font-weight: 900;
        text-transform: uppercase;
        line-height: 22px; } }
  .info_movie_zerd .slide__desc {
    display: flex;
    flex-direction: column;
    position: relative;
    font-size: 1.2em;
    margin: 0 0 1em 0;
    cursor: default;
    text-align: center;
    text-align: left;
    font-family: "Noto Sans"; }
    @media screen and (max-width: 768px) {
      .info_movie_zerd .slide__desc {
        margin: 0.5em 0;
        row-gap: 0.2em; } }
    .info_movie_zerd .slide__desc .slide__badges-info-movie {
      display: flex;
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      position: relative;
      text-size-adjust: 100%;
      width: 100%;
      letter-spacing: 0.25px;
      margin: 2em 0; }
      @media screen and (max-width: 768px) {
        .info_movie_zerd .slide__desc .slide__badges-info-movie {
          margin: 0.5em 0; } }
      .info_movie_zerd .slide__desc .slide__badges-info-movie .slide__badges-rating, .info_movie_zerd .slide__desc .slide__badges-info-movie .slide__badges-duration {
        border: rgba(255, 255, 255, 0.5) solid; }
      .info_movie_zerd .slide__desc .slide__badges-info-movie > * {
        margin-right: 4px; }
      .info_movie_zerd .slide__desc .slide__badges-info-movie .slide__badges-rating {
        border-width: 0 0 0 1px;
        padding-left: 5px; }
      .info_movie_zerd .slide__desc .slide__badges-info-movie .slide__badges-duration {
        border-width: 0 1px;
        padding: 0 5px; }
      @media screen and (max-width: 768px) {
        .info_movie_zerd .slide__desc .slide__badges-info-movie {
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          font-size: 0.63em;
          color: var(--color-small-desc);
          margin: 0;
          text-transform: capitalize;
          line-height: 1; } }
    .info_movie_zerd .slide__desc .slide__actors, .info_movie_zerd .slide__desc .slide__direction {
      font-size: 14px;
      line-height: 20px;
      margin: 0.5em 0.5em 0.5em 0;
      word-break: break-word; }
    @media screen and (max-width: 768px) {
      .info_movie_zerd .slide__desc .slide__actors {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        color: var(--color-small-desc);
        margin: 0;
        line-height: normal;
        font-size: 0.65em; } }
    @media screen and (max-width: 768px) {
      .info_movie_zerd .slide__desc .slide__direction {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        color: var(--color-small-desc);
        margin: 0;
        line-height: normal;
        font-size: 0.65em; } }
    .info_movie_zerd .slide__desc .synopsis-slide .synopsis-movie-slide {
      font-size: 1.18em;
      letter-spacing: 0.25px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      font-weight: 400;
      line-height: normal;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.45); }
      @media (max-width: 1600px) {
        .info_movie_zerd .slide__desc .synopsis-slide .synopsis-movie-slide {
          font-size: 1.125em; } }
      @media screen and (max-width: 768px) {
        .info_movie_zerd .slide__desc .synopsis-slide .synopsis-movie-slide {
          -webkit-line-clamp: 4;
          -webkit-box-orient: vertical;
          color: var(--color-synopsis-mobile);
          display: -webkit-box;
          font-size: 0.65em;
          margin: 0;
          max-height: 32px;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 100%; } }
  .info_movie_zerd .slide__link {
    align-items: center;
    cursor: pointer;
    display: flex;
    outline: none;
    padding: 0; }
    .info_movie_zerd .slide__link a:first-child {
      margin-right: 15px; }
      @media screen and (max-width: 768px) {
        .info_movie_zerd .slide__link a:first-child {
          min-width: 45px;
          max-width: 45px;
          min-height: 45px;
          max-height: 45px; } }
    .info_movie_zerd .slide__link .slide__link_watch-trailer, .info_movie_zerd .slide__link .slide__link-resa {
      color: #fff;
      will-change: transform;
      transition: transform 0.3s ease; }
      .info_movie_zerd .slide__link .slide__link_watch-trailer:hover, .info_movie_zerd .slide__link .slide__link-resa:hover {
        transform: scale(1.06); }
    .info_movie_zerd .slide__link .slide__link_watch-trailer {
      border-radius: 50%;
      display: flex;
      background-color: var(--bg-color-btn-Play);
      padding: 16px;
      box-sizing: inherit;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 60px;
      min-height: 60px;
      font-size: 1.5rem; }
    .info_movie_zerd .slide__link .slide__link_hide-trailer {
      display: none; }
    .info_movie_zerd .slide__link .slide__link-resa {
      font-size: 1.2em;
      text-align: center;
      display: flex;
      background: 0 0;
      padding: 1rem 2.5rem;
      border-radius: 1rem;
      font-weight: 600;
      letter-spacing: 0.25px;
      user-select: none;
      cursor: pointer;
      border: 2px solid #ffffff;
      border-image-width: 6;
      border-image-outset: 3;
      grid-gap: 4px;
      font-family: "Heebo"; }
      @media screen and (max-width: 768px) {
        .info_movie_zerd .slide__link .slide__link-resa {
          padding: 8px 12px;
          font-size: 1em;
          width: 121px;
          border-width: 1px; } }

.sound_button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  overflow: visible;
  text-align: inherit;
  position: absolute;
  z-index: 4;
  bottom: 4em;
  right: 10px;
  color: inherit;
  transition: all 0.3s ease-in-out;
  background-color: #ffffff00;
  width: 52px;
  height: 52px;
  color: #d3d3d3;
  visibility: visible;
  font-size: 2.5em; }
  @media screen and (max-width: 768px) {
    .sound_button {
      display: none; } }

@media (max-width: 519px) {
  #productCarousel .f-carousel__slide {
    background-color: var(--bg-color-slide); }

  #productCarousel .f-carousel__slide img {
    top: 0;
    left: 0;
    position: absolute;
    height: 480px;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, black), color-stop(0.35, black), color-stop(0.5, black), color-stop(0.65, black), color-stop(0.85, rgba(0, 0, 0, 0.6)), color-stop(1, transparent)); } }
.container-scroll-down {
  position: absolute;
  width: 24px;
  height: 24px;
  left: 50%;
  bottom: 90px;
  z-index: 2;
  cursor: pointer; }

@media screen and (max-width: 768px) {
  .container-scroll-down {
    display: none; } }
.chevron {
  position: absolute;
  width: 24px;
  height: 5px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite; }

.chevron:first-child {
  animation: move 3s ease-out 1s infinite; }

.chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite; }

.chevron:before,
.chevron:after {
  content: " ";
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #fff; }

.chevron:before {
  left: 0;
  transform: skew(0deg, 30deg); }

.chevron:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg); }

@keyframes move {
  25% {
    opacity: 1; }
  33% {
    opacity: 1;
    transform: translateY(30px); }
  67% {
    opacity: 1;
    transform: translateY(40px); }
  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5); } }
.text {
  display: block;
  margin-top: 75px;
  margin-left: -50px;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-size: 1em;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.25;
  animation: pulseSlide 2s linear alternate infinite; }

@keyframes pulseSlide {
  to {
    opacity: 1; } }
#productContainer {
  --product-view-height: var(--height-slideShow);
  position: relative;
  background: #1b1b1b;
  /* --my-transition-duration: 1s; */ }
  @media screen and (max-width: 700px) {
    #productContainer {
      --product-view-height: 100%;
      height: calc(100vh - 320px); } }
  #productContainer .f-thumbs.is-classic.is-vertical {
    height: var(--product-view-height, 100%); }
  #productContainer .f-carousel {
    --f-button-width: 50px;
    --f-button-height: 50px;
    --f-button-svg-width: 24px;
    --f-button-svg-height: 24px;
    --f-button-svg-stroke-width: 2.5;
    --f-button-color: #ffffff;
    --f-button-border-radius: 50%;
    --f-button-shadow: none;
    /* 0 6px 12px -2px rgb(50 50 93 / 25%),
    0 3px 7px -3px rgb(0 0 0 / 30%)*/
    --f-button-hover-color: #000;
    --f-button-bg: rgba(11, 19, 34, 0.4);
    --f-button-hover-bg: #ffffff;
    --f-button-active-bg: #f0f0f0; }

/*
    Thumbnails
  */
.f-thumbs.is-classic {
  --f-thumb-width: 76px;
  --f-thumb-height: 114px;
  --f-thumb-gap: 0.5rem;
  --f-thumb-opacity: 1;
  --f-thumb-selected-opacity: 0.2;
  --f-button-color: #0d0c22;
  --f-button-hover-color: #ff3520;
  --f-button-bg: #fff;
  --f-button-hover-bg: #fff;
  --f-button-active-bg: #fff;
  bottom: 0;
  position: absolute;
  right: 5px; }
  .f-thumbs.is-classic .f-thumbs__slide__img {
    object-fit: cover;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 0.25em;
    aspect-ratio: auto 76 / 114; }
  .f-thumbs.is-classic .f-carousel__nav .f-button[disabled] {
    display: none; }

/*
    Main carousel
  */
#productCarousel {
  --f-carousel-spacing: 0;
  --f-button-width: 48px;
  --f-button-height: 48px;
  --f-button-border-radius: 0;
  --f-button-color: #0d0c22;
  --f-button-hover-color: #ff3520;
  --f-button-bg: #fff;
  --f-button-hover-bg: #fff;
  --f-button-active-bg: #fff;
  --f-button-svg-width: 28px;
  --f-button-svg-height: 28px;
  --f-button-svg-stroke-width: 1;
  --f-button-svg-filter: none;
  --f-transition-duration: var(--my-transition-duration);
  height: var(--product-view-height); }
  #productCarousel .f-carousel__dots {
    color: #f0f0f0;
    bottom: 1em; }
  #productCarousel .f-carousel__slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }
    #productCarousel .f-carousel__slide:after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0, transparent 40%, transparent 75%, rgba(0, 0, 0, 0.3));
      background: linear-gradient(0deg, #181818, transparent 50%);
      background-size: cover;
      z-index: 3; }
    #productCarousel .f-carousel__slide::before {
      content: "";
      display: block;
      background: linear-gradient(77deg, rgba(0, 0, 0, 0.3), transparent 85%);
      bottom: 0;
      left: 0;
      opacity: 1;
      position: absolute;
      right: 40.09%;
      top: 0;
      z-index: 3;
      transition: opacity 0.5s; }
    @media screen and (max-width: 768px) {
      #productCarousel .f-carousel__slide::before {
        right: 0; }
      #productCarousel .f-carousel__slide:after {
        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0, transparent 40%, transparent 75%, rgba(0, 0, 0, 0.3)); } }
    #productCarousel .f-carousel__slide img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
      @media screen and (max-width: 768px) {
        #productCarousel .f-carousel__slide img {
          width: 100%;
          height: 100%;
          object-fit: cover; } }
    #productCarousel .f-carousel__slide .img_events_pc {
      display: block;
      object-fit: initial; }
      @media screen and (max-width: 768px) {
        #productCarousel .f-carousel__slide .img_events_pc {
          display: none; } }
    #productCarousel .f-carousel__slide .img_events_mobile {
      display: none; }
      @media screen and (max-width: 768px) {
        #productCarousel .f-carousel__slide .img_events_mobile {
          display: block;
          object-fit: initial;
          height: 85%; } }
  #productCarousel .f-carousel__nav {
    opacity: 0;
    transition: opacity 0.15s; }
    @media screen and (max-width: 700px) {
      #productCarousel .f-carousel__nav {
        display: none; } }

@media (hover: hover) {
  #productCarousel:hover .f-carousel__nav {
    opacity: 1; } }
/*
    Fancybox
  */
.fancybox__container {
  --fancybox-color: #ffffff;
  /* Close btn */
  --fancybox-bg: rgba(25, 25, 25, 0.95);
  /* bg fancy popup */
  --f-spinner-color-1: rgba(0, 0, 0, 0.1);
  --f-spinner-color-2: rgba(17, 24, 28, 0.8); }

.fancybox__toolbar,
.fancybox__nav {
  --f-button-width: 60px;
  --f-button-height: 60px;
  --f-button-border-radius: 0;
  --f-button-color: #0d0c22;
  --f-button-hover-color: #ff3520;
  --f-button-bg: #fff;
  --f-button-hover-bg: #fff;
  --f-button-active-bg: #fff;
  --f-button-svg-width: 32px;
  --f-button-svg-height: 32px;
  --f-button-svg-stroke-width: 1;
  --f-button-svg-filter: none; }

.fancybox__nav {
  --f-button-next-pos: 0;
  --f-button-prev-pos: 0; }

/* colors */
/* tab setting */
/* breakpoints */
/* selectors relative to radio inputs */
h1 {
  text-align: center;
  color: #000;
  font-weight: 300;
  padding: 40px 0 20px 0;
  margin: 0; }

.tabs {
  margin: 2rem auto;
  z-index: 0;
  position: relative;
  padding-bottom: 80px;
  border-radius: 5px; }
  @media (max-width: 768px) {
    .tabs {
      width: 100%;
      padding: 0;
      margin: 0.5em auto; } }
  .tabs input[name="tab-control"] {
    display: none; }
  .tabs .content .section-tab h2,
  .tabs ul li label {
    font-weight: 600;
    color: #000;
    text-transform: capitalize;
    letter-spacing: 0.06em;
    font-family: "Heebo"; }
  .tabs ul {
    position: relative;
    list-style-type: none;
    padding-left: 0;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 5rem;
    max-width: 1023.999999px;
    margin: 1em auto; }
    @media (max-width: 768px) {
      .tabs ul {
        height: 40px;
        margin-bottom: 12px; } }
    .tabs ul li {
      box-sizing: border-box;
      width: 250px;
      padding: 0 3px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-size: 1em; }
      @media screen and (max-width: 768px) {
        .tabs ul li {
          font-size: 0.7em;
          width: 32%; } }
      .tabs ul li label {
        background-color: var(--bg-color-tabs);
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        padding: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        white-space: nowrap;
        -webkit-touch-callout: none;
        user-select: none;
        border-radius: 100px;
        border: 2px solid transparent;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.04em; }
        .tabs ul li label br {
          display: none; }
        .tabs ul li label svg {
          fill: white;
          height: 1.2em;
          vertical-align: bottom;
          margin-right: 0.2em;
          transition: all 0.2s ease-in-out; }
        .tabs ul li label:hover, .tabs ul li label:focus, .tabs ul li label:active {
          outline: 0;
          background-color: var(--bg-color-tabs-hover);
          border: 2px solid var(--bg-color-tabs-hover); }
          .tabs ul li label:hover svg, .tabs ul li label:focus svg, .tabs ul li label:active svg {
            fill: rgba(148, 148, 148, 0.49); }
  .tabs .slider-tab {
    position: relative;
    width: 33.3333333333%;
    height: 5rem;
    background: transparent;
    border: solid 2px #fff;
    z-index: -1;
    border-radius: 5px;
    transition: all 0.4s cubic-bezier(0.38, 0.8, 0.32, 1.07); }
    @media (max-width: 768px) {
      .tabs .slider-tab {
        border-radius: 0;
        height: 3rem; } }
    .tabs .slider-tab .indicator {
      position: relative;
      top: 100%;
      border: solid #0000;
      height: 0;
      width: 0;
      pointer-events: none;
      border-top-color: #fff;
      border-width: 10px;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0 auto; }
  .tabs .content {
    color: #333; }
    .tabs .content .section-tab {
      display: none;
      -webkit-animation-duration: 0.5s;
      animation-duration: 0.5s;
      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
      -webkit-animation-name: fade-in-upwards;
      animation-name: fade-in-upwards;
      line-height: 1.4; }
  .tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {
    cursor: default;
    color: var(--color-tabs-focus);
    background-color: transparent;
    border: 2px solid var(--border-color-tabs-focus);
    position: relative;
    overflow: visible; }
    .tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label svg {
      fill: #000; }
    .tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label:after {
      content: "";
      position: absolute;
      top: 100%;
      border: solid #0000;
      height: 0;
      width: 0;
      pointer-events: none;
      border-top-color: var(--color-arrow-tabs-focus);
      border-width: 10px;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0 auto; }
  .tabs input[name="tab-control"]:nth-of-type(1):checked ~ .slider-tab {
    transform: translate(0%, -80px); }
    @media (max-width: 768px) {
      .tabs input[name="tab-control"]:nth-of-type(1):checked ~ .slider-tab {
        border-radius: 5px;
        transform: translate(0%, -59px); } }
  .tabs input[name="tab-control"]:nth-of-type(1):checked ~ .content > .section-tab:nth-child(1) {
    display: block; }
  .tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {
    cursor: default;
    color: var(--color-tabs-focus);
    background-color: transparent;
    border: 2px solid var(--border-color-tabs-focus);
    position: relative;
    overflow: visible; }
    .tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label svg {
      fill: #000; }
    .tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label:after {
      content: "";
      position: absolute;
      top: 100%;
      border: solid #0000;
      height: 0;
      width: 0;
      pointer-events: none;
      border-top-color: var(--color-arrow-tabs-focus);
      border-width: 10px;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0 auto; }
  .tabs input[name="tab-control"]:nth-of-type(2):checked ~ .slider-tab {
    transform: translate(100%, -80px); }
    @media (max-width: 768px) {
      .tabs input[name="tab-control"]:nth-of-type(2):checked ~ .slider-tab {
        border-radius: 5px;
        transform: translate(100%, -59px); } }
  .tabs input[name="tab-control"]:nth-of-type(2):checked ~ .content > .section-tab:nth-child(2) {
    display: block; }
  .tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {
    cursor: default;
    color: var(--color-tabs-focus);
    background-color: transparent;
    border: 2px solid var(--border-color-tabs-focus);
    position: relative;
    overflow: visible; }
    .tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label svg {
      fill: #000; }
    .tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label:after {
      content: "";
      position: absolute;
      top: 100%;
      border: solid #0000;
      height: 0;
      width: 0;
      pointer-events: none;
      border-top-color: var(--color-arrow-tabs-focus);
      border-width: 10px;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0 auto; }
  .tabs input[name="tab-control"]:nth-of-type(3):checked ~ .slider-tab {
    transform: translate(200%, -80px); }
    @media (max-width: 768px) {
      .tabs input[name="tab-control"]:nth-of-type(3):checked ~ .slider-tab {
        border-radius: 5px;
        transform: translate(200%, -59px); } }
  .tabs input[name="tab-control"]:nth-of-type(3):checked ~ .content > .section-tab:nth-child(3) {
    display: block; }
  @media (max-width: 750px) {
    .tabs ul li label {
      white-space: initial; }
      .tabs ul li label br {
        display: initial; }
      .tabs ul li label svg {
        height: 1.5em; } }
  @media (max-width: 768px) {
    .tabs ul li label {
      padding: 5px;
      border-radius: 5px; }
      .tabs ul li label .flaticon-cinema-6,
      .tabs ul li label .flaticon-video-camera,
      .tabs ul li label .flaticon-danse {
        display: none; } }

/* Styles des cartes de films pour l'intégration dans le système de thèmes */
/* Style global et comportement général */
* {
  box-sizing: border-box;
  user-select: none; }

html {
  scroll-behavior: smooth; }

/* Conteneur principal */
.content_affiche {
  padding: 0 15px;
  max-width: 1700px;
  margin: 0 auto; }

/* Menu d'ancrage */
.section-menu {
  display: flex;
  justify-content: center;
  margin: 15px 0;
  gap: 20px;
  position: sticky;
  top: 0;
  padding: 10px 0;
  z-index: 5; }

.menu-item {
  color: var(--movie-text-primary);
  text-decoration: none;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 20px;
  transition: background-color var(--movie-transition-speed); }

.menu-item:hover,
.menu-item.active {
  background-color: var(--movie-nav-button-bg); }

.menu-item.active {
  font-weight: bold; }

/* En-tête de section */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 32px 0 0px 0; }

.section-title {
  position: relative;
  padding-left: 15px;
  font-size: var(--movie-section-title-size);
  font-weight: bold;
  color: var(--movie-text-primary);
  border: none;
  padding-bottom: inherit;
  margin-bottom: inherit;
  text-shadow: none; }

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 80%;
  width: 4px;
  background-color: var(--movie-accent-color); }

/* Contrôles du carrousel */
.carousel-controls {
  display: flex;
  align-items: center;
  gap: 10px; }

.carousel-nav {
  display: flex;
  align-items: center;
  gap: 15px; }

.prev-button,
.next-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--movie-nav-button-bg);
  color: var(--movie-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  border: none;
  transition: background-color var(--movie-transition-speed); }

.prev-button:hover,
.next-button:hover {
  background-color: var(--movie-nav-button-hover); }

.next-button {
  background-color: var(--movie-next-button-bg); }

/* ========== GRID ET CAROUSEL LAYOUTS ========== */
/* Grille responsive optimisée */
.grid_poster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--movie-card-spacing);
  justify-content: center;
  padding: 15px 0;
  width: 100%; }

/* Carousel */
.movie-carousel {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: var(--movie-card-spacing);
  padding: 15px 0;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
  transition: opacity var(--movie-transition-speed), height var(--movie-transition-speed); }

.movie-carousel::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */ }

.movie-carousel.hidden {
  height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  padding: 0; }

/* Grille étendue */
.expanded-grid {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(var(--movie-card-width), 1fr));
  gap: var(--movie-card-spacing);
  padding: 15px 0;
  margin-top: 20px;
  animation: fadeIn var(--movie-transition-speed) ease-in-out; }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
.expanded-grid.show {
  display: grid; }

.grid-title {
  display: none;
  font-size: 18px;
  margin: 20px 0;
  color: var(--movie-text-secondary); }

.grid-title.show {
  display: block; }

/* ========== CARTES DE FILMS ========== */
/* Carte de film - Structure de base */
.grid_item {
  position: relative;
  height: var(--movie-card-height);
  width: var(--movie-card-width);
  min-width: var(--movie-card-width);
  border-radius: var(--movie-border-radius);
  transition: transform var(--movie-transition-speed) ease, box-shadow var(--movie-transition-speed) ease;
  overflow: hidden;
  box-shadow: var(--movie-box-shadow);
  /* Animation originale préservée */
  animation: fadeInUp var(--movie-animation-duration) var(--movie-animation-easing);
  animation-fill-mode: both; }

/* Animation d'entrée des cartes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/* Animation décalée pour chaque carte */
.grid_item:nth-child(1) {
  animation-delay: calc(1 * var(--movie-animation-delay-increment)); }

.grid_item:nth-child(2) {
  animation-delay: calc(2 * var(--movie-animation-delay-increment)); }

.grid_item:nth-child(3) {
  animation-delay: calc(3 * var(--movie-animation-delay-increment)); }

.grid_item:nth-child(4) {
  animation-delay: calc(4 * var(--movie-animation-delay-increment)); }

.grid_item:nth-child(5) {
  animation-delay: calc(5 * var(--movie-animation-delay-increment)); }

.grid_item:nth-child(6) {
  animation-delay: calc(6 * var(--movie-animation-delay-increment)); }

.grid_item:nth-child(7) {
  animation-delay: calc(7 * var(--movie-animation-delay-increment)); }

.grid_item:nth-child(8) {
  animation-delay: calc(8 * var(--movie-animation-delay-increment)); }

.grid_item:hover {
  transform: var(--movie-hover-transform);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); }

/* Conteneur d'affiche */
.grid_item_poster {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--movie-card-bg);
  border-radius: var(--movie-border-radius);
  overflow: hidden; }

/* Face avant */
.front-face {
  position: relative;
  width: 100%;
  height: var(--movie-card-image-height);
  display: flex;
  flex-direction: column;
  transition: all var(--movie-transition-speed) ease; }

.pic_movie {
  width: 100%;
  height: var(--movie-card-image-height);
  object-fit: cover;
  transition: all var(--movie-transition-speed) ease;
  background-position: center;
  background-size: cover;
  aspect-ratio: calc(1 / var(--movie-card-height-ratio)); }

.front_desc {
  padding: 12px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--movie-transition-speed) ease; }

.movie-title {
  color: var(--movie-text-primary);
  font-size: var(--movie-title-size);
  font-weight: var(--movie-title-weight);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.5px; }

.desc {
  color: var(--movie-text-secondary);
  font-size: var(--movie-desc-size);
  margin: 5px 0 0;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: 0.33px; }

.rating {
  align-self: flex-start; }

/* Étiquettes et badges */
.is_new {
  position: absolute;
  top: 15px;
  left: -5px;
  z-index: 10;
  background: var(--movie-tag-new-bg);
  color: var(--movie-tag-new-text);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 5px 12px;
  border-radius: 2px 2px 2px 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  line-height: 1.2;
  transition: transform var(--movie-transition-speed) ease;
  display: none; }

.is_new:before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  border-style: solid;
  border-width: 0 5px 5px 0;
  border-color: transparent var(--movie-tag-new-shadow) transparent transparent; }

.grid_item:hover .is_new {
  transform: translateX(5px) rotate(-5deg); }

/* Badge interdit -12 ans */
.badge-restriction {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: var(--movie-badge-restriction-bg);
  color: var(--movie-badge-restriction-color);
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  opacity: 0.8;
  z-index: 2; }

/* Badge Sponsorisé */
.badge-sponsored {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: var(--movie-badge-sponsored-bg);
  color: var(--movie-badge-sponsored-color);
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 3px;
  z-index: 2; }

/* Bouton bande annonce */
.grid_item .watch-trailer {
  --watch-trailer-size: 45px;
  position: absolute;
  top: 30px;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--watch-trailer-size);
  height: var(--watch-trailer-size);
  background: rgba(var(--movie-accent-color-rgb), 0.85);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all var(--movie-transition-speed) ease;
  z-index: 5;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  text-decoration: none;
  outline: none;
  border: 2px solid transparent; }

.grid_item .watch-trailer:focus {
  outline: none;
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(var(--movie-accent-color-rgb), 0.5); }

.grid_item .watch-trailer:hover {
  background: var(--movie-accent-color);
  transform: scale(1.1);
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4); }

.grid_item .watch-trailer:focus-visible {
  background: var(--movie-accent-color);
  transform: scale(1.1);
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
  border-color: #ffffff; }

.grid_item .watch-trailer i {
  font-size: 1.2rem; }

.grid_item .watch-trailer .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0; }

/* Face arrière (overlay) */
.back-side {
  --back-side-padding: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 15, 15, 0.95);
  opacity: 0;
  transform: translateY(100%);
  transition: transform var(--movie-transition-speed) cubic-bezier(0.16, 1, 0.3, 1), opacity var(--movie-transition-speed) ease;
  display: flex;
  flex-direction: column;
  padding: var(--back-side-padding);
  border-radius: var(--movie-border-radius);
  overflow: hidden;
  z-index: 2; }

.grid_item:hover .back-side {
  transform: translateY(0);
  opacity: 1; }

.grid_item:hover .pic_movie {
  filter: brightness(0.7) blur(3px); }

/* Face arrière - contenu */
.pic_movie_back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  z-index: -1;
  background-position: center;
  background-size: cover;
  transition: all var(--movie-transition-speed) ease; }

.title_info_movie {
  margin-bottom: 15px; }

.movie-title-back-side {
  --title-underline-width: 40px;
  --title-underline-height: 3px;
  color: var(--movie-text-primary);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 10px 0 10px;
  position: relative;
  padding-bottom: 8px; }

.movie-title-back-side:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--title-underline-width);
  height: var(--title-underline-height);
  background: var(--movie-accent-color); }

.title-info-movie-poster {
  --info-gap: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--info-gap);
  color: var(--movie-text-secondary);
  font-size: 0.8rem;
  margin-bottom: 10px; }

.rating-movie-poster,
.duration-movie-poster {
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px; }

.actors-movie-poster,
.director-movie-poster {
  color: var(--movie-text-secondary);
  font-size: 0.8rem;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; }

.with-movie-poster {
  color: var(--movie-text-primary);
  font-weight: 500; }

.synopsis_block {
  flex: 1;
  overflow: hidden;
  margin-bottom: 15px; }

.synopsis {
  --synopsis-line-height: 1.4;
  --synopsis-max-lines: 6;
  color: var(--movie-text-secondary);
  font-size: var(--movie-desc-size);
  line-height: var(--synopsis-line-height);
  display: -webkit-box;
  -webkit-line-clamp: var(--synopsis-max-lines);
  -webkit-box-orient: vertical;
  overflow: hidden; }

/* Bouton de performance */
.performance {
  --performance-padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--movie-accent-color);
  color: white;
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 600;
  padding: var(--performance-padding);
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--movie-transition-speed) ease;
  border: none;
  text-decoration: none; }

.performance:hover {
  background: linear-gradient(135deg, var(--movie-accent-color), var(--movie-accent-color-secondary));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--movie-accent-color-rgb), 0.4); }

/* Styles pour les appareils tactiles */
.touch-device .grid_item:hover .back-side {
  transform: translateY(100%);
  opacity: 0; }

.touch-device .grid_item.active .back-side {
  transform: translateY(0) !important;
  opacity: 1 !important; }

/* Bouton de fermeture pour mobile */
.back-side-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.9);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: background-color 0.2s ease; }

.back-side-close-btn:hover,
.back-side-close-btn:active {
  background: rgba(0, 0, 0, 0.7); }

/* ========== MEDIA QUERIES ========== */
/* Tablettes et grands écrans */
@media only screen and (max-width: 1200px) {
  .grid_poster {
    grid-template-columns: repeat(3, 1fr); }

  .expanded-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--movie-card-width), 1fr)); } }
/* Mobiles et tablettes */
@media only screen and (max-width: 768px) {
  .grid_poster {
    grid-template-columns: repeat(2, 1fr); }

  .content_affiche {
    padding: 0 10px; }

  .expanded-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--movie-card-width), 1fr)); }

  .section-menu {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 10px; }

  /* Correction pour l'interaction tactile sur mobile */
  /* Désactiver le comportement de survol sur les appareils tactiles */
  .grid_item:hover .back-side {
    transform: translateY(100%);
    opacity: 0; }

  /* Activer uniquement avec la classe .active */
  .grid_item.active .back-side {
    transform: translateY(0) !important;
    opacity: 1 !important; }

  /* Empêcher le défilement du carrousel quand une carte est active */
  .movie-carousel:has(.grid_item.active) {
    overflow: hidden; }

  /* S'assurer que le z-index est correct pour les boutons */
  .performance,
  .watch-trailer {
    position: relative;
    z-index: 5; } }
/* Mobiles spécifiques */
@media only screen and (max-width: 699px) {
  .grid_item .watch-trailer {
    width: var(--watch-trailer-size);
    height: var(--watch-trailer-size);
    top: 10px;
    right: 10px; }

  .grid_item .watch-trailer i {
    font-size: 1rem; }

  .is_new {
    font-size: 0.65rem;
    padding: 2px 8px;
    top: 8px; }

  .rating {
    font-size: 0.65rem;
    padding: 2px 8px; }

  .pic_movie {
    height: 70%; }

  .movie-title-back-side {
    font-size: 0.9rem;
    margin: 0 0 5px; }

  .actors-movie-poster,
  .director-movie-poster {
    font-size: 0.7rem;
    margin-bottom: 5px;
   -webkit-line-clamp: 1; }


  .performance {
    font-size: 0.75rem; }

  .title_info_movie {
    margin-bottom: 8px; } }
/* Très petits écrans */
@media only screen and (max-width: 480px) {
  .grid_item {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 0; }

  .view-all-button,
  .prev-button,
  .next-button {
    width: 30px;
    height: 30px; }

  .grid_item .watch-trailer {
    top: 5px;
    right: 5px; }

  .grid_item .watch-trailer i {
    font-size: 0.9rem; }

  .is_new {
    font-size: 0.6rem;
    padding: 2px 6px;
    top: 5px; }

  .movie-title {
    letter-spacing: 0; }

  .desc {
    margin: 2px 0 0; }

  .rating {
    font-size: 0.6rem;
    padding: 1px 6px;
    margin-top: 2px; }

  .front_desc {
    padding: 5px 8px; }

  .movie-title-back-side {
    font-size: 0.85rem;
    margin: 0 0 3px;
    padding-bottom: 5px; }

  /* Empêcher l'affichage des tags au survol des boutons de séance */
  .seance-speciale,
  .seance-speciale *,
  .performance,
  .performance * {
    z-index: 10 !important;
    /* Force un z-index élevé pour le bouton et ses enfants */
    position: relative;
    /* Nécessaire pour que z-index fonctionne */ }

  /* Cible spécifiquement les tags qui apparaissent au survol */
  [data-tag],
  .tag,
  .seance-tag,
  .movie-tag,
  div[id^="tags_"] {
    pointer-events: none !important;
    /* Empêche les interactions avec les tags */ }

  /* Désactiver l'affichage des tags au survol des boutons */
  .seance-speciale:hover + [data-tag],
  .seance-speciale:hover ~ [data-tag],
  .performance:hover + [data-tag],
  .performance:hover ~ [data-tag],
  .grid_item:hover [data-tag],
  .grid_item_poster:hover [data-tag] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important; } }
/* Styles modernes et neutres pour la barre de recherche et les filtres */
.search-filter-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: auto;
  gap: 15px;
  margin: 0;
  padding: 20px;
  background-color: rgba(240, 240, 240, 0.6);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: all 0.3s ease; }

.search-filter-container:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); }

/* Barre de recherche */
.search-box {
  display: flex;
  flex: 1;
  min-width: 250px;
  position: relative;
  align-items: center;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  overflow: hidden; }

.search-box:hover,
.search-box:focus-within {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px); }

.search-icon {
  position: absolute;
  left: 16px;
  color: #9e9e9e;
  font-size: 16px;
  pointer-events: none; }

#global-search {
  flex: 1;
  padding: 14px 14px 14px 45px;
  border: none;
  font-size: 16px;
  background: transparent;
  color: #424242;
  width: 100%;
  outline: none;
  transition: all 0.3s; }

#global-search::placeholder {
  color: #9e9e9e;
  opacity: 0.7; }

.search-button {
  background-color: #f0f0f0;
  color: #555;
  border: none;
  padding: 0 20px;
  height: 100%;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center; }

.search-button:hover {
  background-color: #e0e0e0;
  color: #333; }

/* Filtre de genre */
.filter-box {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap; }

.filter-label {
  font-weight: 500;
  color: #555;
  font-size: 15px;
  white-space: nowrap; }

.genre-filter-wrapper {
  position: relative;
  min-width: 180px; }

.genre-filter {
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: 8px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  font-size: 15px;
  color: #424242;
  cursor: pointer;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease; }

.genre-filter:hover,
.genre-filter:focus {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px); }

.select-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #9e9e9e;
  pointer-events: none;
  transition: transform 0.2s ease; }

.genre-filter:focus + .select-arrow {
  transform: translateY(-50%) rotate(180deg); }

/* Styles pour les options dans le sélecteur */
.genre-filter option {
  padding: 10px;
  color: #424242;
  background-color: #fff; }

/* Changer la couleur du texte lorsqu'un filtre est sélectionné */
.genre-filter:not([value=""]) {
  color: #333;
  font-weight: 500; }

/* Responsive pour petits écrans */
@media (max-width: 768px) {
  .search-filter-container {
    flex-direction: column;
    padding: 15px; }

  .search-box,
  .filter-box {
    width: 100%; }

  .genre-filter-wrapper {
    min-width: 100%; } }
/* En mode sombre ou avec des thèmes foncés */
.dark-theme .search-filter-container {
  background-color: rgba(45, 45, 45, 0.6); }

.dark-theme .search-box,
.dark-theme .genre-filter {
  background-color: rgba(60, 60, 60, 0.8);
  color: #e0e0e0; }

.dark-theme #global-search::placeholder,
.dark-theme .search-icon,
.dark-theme .select-arrow {
  color: #aaa; }

.dark-theme .filter-label {
  color: #e0e0e0; }

.dark-theme .search-button {
  background-color: rgba(70, 70, 70, 0.8);
  color: #e0e0e0; }

.dark-theme .search-button:hover {
  background-color: rgba(80, 80, 80, 0.9); }

/* Correction d'un problème avec le sélecteur pour les genres qui sont collés */
#genre-filter option {
  padding: 10px;
  margin: 5px 0; }

/* Animation subtile au chargement */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
.search-filter-container {
  animation: fadeIn 0.3s ease-out forwards; }

/* Animation sur focus des champs */
#global-search:focus {
  box-shadow: inset 0 0 0 2px rgba(0, 120, 255, 0.2); }

.genre-filter:focus {
  box-shadow: inset 0 0 0 2px rgba(0, 120, 255, 0.2); }

/* Améliorations responsive à ajouter à la fin de votre CSS actuel */
/* Assurez-vous d'avoir la balise viewport dans le head */
/* <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> */
/* Améliorer l'affichage des grilles en mode responsive */
@media only screen and (max-width: 768px) {
  /* Forcer 2 colonnes dans la grille étendue sur mobile */
  .expanded-grid.show {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px; }

  /* Ajuster les dimensions des cartes pour mobiles */
  .grid_item {
    width: 100%;
    min-width: auto;
    height: calc(var(--movie-card-height) * 0.8); }

  /* Améliorer la lisibilité des textes */
  .movie-title {
    font-size: 0.85rem;
    -webkit-line-clamp: 1; }

  /* Menu horizontal défilable */
  .section-menu {
    -webkit-overflow-scrolling: touch;
    padding: 10px 5px; } }
/* Ajustements pour très petits écrans */
@media only screen and (max-width: 480px) {
  /* Optimiser l'espace disponible */
  .content_affiche {
    padding: 0 8px; }

  /* Réduire la taille des titres de section */
  .section-title {
    font-size: 1.2rem;
    padding-left: 10px; }

  /* Réduire l'espace occupé par les contrôles */
  .carousel-controls {
    gap: 5px; }

  /* Ajuster la taille des boutons */
  .view-all-button,
  .prev-button,
  .next-button {
    width: 30px;
    height: 30px;
    font-size: 14px; }

  /* Optimiser l'affichage des cartes */
  .grid_item {
    height: calc(var(--movie-card-height) * 0.7); }

  /* Optimiser l'affichage de la face arrière */
  .back-side {
    padding: 12px; }

  /* Ajuster proportionnellement les contenus */
  .movie-title-back-side {
    font-size: 0.75rem;
    padding-bottom: 5px;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; }


  .synopsis {
    -webkit-line-clamp: 3;
    font-size: 0.7rem;
    line-height: 1.3; }

  .performance {
    padding: 8px;
    font-size: 0.75rem; } }
/* Optimiser le carrousel en mode tactile */
@media (max-width: 768px) {
  .movie-carousel {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; }

  .movie-carousel .grid_item {
    scroll-snap-align: start; } }
/* Autres optimisations pour mobiles */
@media only screen and (max-width: 480px) {
  /* Optimisations pour de meilleures performances */
  .grid_item {
    animation-duration: 0.3s; }

  /* Écrémer les animations trop lourdes */
  .grid_item:hover {
    transform: translateY(-3px); } }
/* Assurer que même un carrousel avec un seul film conserve les bonnes dimensions */
.movie-carousel:only-child,
.movie-carousel .grid_item:only-child {
  width: var(--movie-card-width) !important;
  min-width: var(--movie-card-width) !important;
  max-width: var(--movie-card-width) !important;
  margin: 0 !important; }

/* Ajustement spécifique pour mobile */
@media only screen and (max-width: 768px) {
  .movie-carousel .grid_item:only-child {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important; } }
/* Très petits écrans */
@media only screen and (max-width: 480px) {
  .movie-carousel .grid_item:only-child {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important; } }
/* Assurer que le carrousel avec un seul élément est centré */
.movie-carousel:has(.grid_item:only-child) {
  justify-content: flex-start !important; }

/* Modifications pour le mode mobile */
@media only screen and (max-width: 768px) {
  .section-menu {
    /* Configuration carrousel */
    justify-content: flex-start;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE et Edge */
    white-space: nowrap;
    padding: 15px 10px;
    gap: 12px;
    /* Effet de débordement sur les côtés pour indiquer qu'il y a plus d'options */
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); }

  /* Cacher la scrollbar tout en permettant le défilement */
  .section-menu::-webkit-scrollbar {
    display: none; }

  /* Style des éléments du menu en mobile */
  .menu-item {
    flex-shrink: 0;
    padding: 10px 15px;
    font-size: 0.95rem;
    position: relative;
    text-align: center;
    transition: transform 0.2s ease;
    scroll-snap-align: center; }

  /* Effet au toucher pour indiquer l'interaction */
  .menu-item:active {
    transform: scale(0.95); }

  /* Amélioration de l'indicateur actif */
  .menu-item.active {
    background-color: rgba(255, 102, 0, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }

  /* Ajouter une petite flèche pour indiquer qu'il y a plus d'éléments */
  .section-menu::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 30px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.2));
    pointer-events: none;
    z-index: 1;
    opacity: 0.5; } }
/* Ajustements pour très petits écrans */
@media only screen and (max-width: 480px) {
  .section-menu {
    padding: 12px 8px;
    gap: 8px; }

  .menu-item {
    padding: 8px 12px;
    font-size: 0.85rem; } }
/* Message vide pour les sections sans films */
.empty-message {
  width: 100%;
  padding: 30px;
  text-align: center;
  color: var(--movie-text-secondary);
  font-style: italic;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 8px; }

/* Ajouter ce CSS directement dans votre fichier HTML ou CSS */
@media (max-width: 768px) {
  /* Gestion tactile simplifiée */
  .grid_item:hover .back-side {
    /* Désactiver le hover automatique sur mobile */
    transform: translateY(100%);
    opacity: 0; }

  /* Utiliser une classe active qui sera ajoutée/supprimée par clic/tap */
  .grid_item.active .back-side {
    transform: translateY(0) !important;
    opacity: 1 !important; }

  /* Optimisation de l'affichage pour les boutons */
  .performance,
  .watch-trailer {
    position: relative;
    z-index: 5; } }
/* Style UGC pour les carrousels sur mobile */
@media only screen and (max-width: 768px) {
  /* Style général du carrousel */
  .movie-carousel {
    display: flex;
    gap: 16px;
    padding: 15px 15px 15px 15px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE et Edge */ }

  .movie-carousel::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari et Opera */ }

  /* Style des cartes similaire à UGC */
  .movie-carousel .grid_item {
    width: 160px;
    /* Largeur similaire à UGC */
    min-width: 160px;
    max-width: 160px;
    height: 240px;
    /* Proportion d'affiche ciné ~1.5 */
    margin-right: 0;
    /* Plus besoin de marge avec le gap */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    scroll-snap-align: start;
    flex-shrink: 0; }

  /* Améliorer l'affichage de l'image */
  .movie-carousel .grid_item .pic_movie {
    height: 80%;
    object-fit: cover;
    transition: transform 0.3s ease; }

  /* Améliorer la section titre */
  .movie-carousel .grid_item .front_desc {
    height: 20%;
    padding: 8px;
    background: rgba(20, 20, 40, 0.95); }

  /* Style du titre du film */
  .movie-carousel .grid_item .movie-title {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase; }

  /* Genre du film */
  .movie-carousel .grid_item .desc {
    font-size: 10px;
    opacity: 0.8; }

  /* Badges */
  .movie-carousel .grid_item .rating {
    font-size: 10px;
    padding: 2px 6px; }

  /* Espacement pour montrer la 3ème carte partiellement */
  .movie-carousel:after {
    content: "";
    display: block;
    width: 40px;
    flex-shrink: 0; }

  /* Ajuster la navigation du carrousel */
  .carousel-nav button {
    width: 36px;
    height: 36px; } }
/* Très petits écrans */
@media only screen and (max-width: 375px) {
  .movie-carousel .grid_item {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    height: 210px; } }
.advanced-filters {
  background: var(--movie-background, #18172e);
  border-radius: 8px;
  padding: 15px;
  margin: 15px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease; }

.advanced-filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer; }

.advanced-filters-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--movie-text-primary, #ffffff); }

.advanced-filters-toggle {
  background: none;
  border: none;
  color: var(--movie-text-primary, #ffffff);
  cursor: pointer;
  font-size: 1.2rem;
  transition: transform 0.3s ease; }

.advanced-filters-toggle.open {
  transform: rotate(180deg); }

.advanced-filters-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease; }

.advanced-filters-content.open {
  max-height: 500px; }

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 15px; }

.filter-group {
  flex: 1;
  min-width: 200px; }

.filter-group label {
  display: block;
  margin-bottom: 5px;
  color: var(--movie-text-secondary, #b8b8d2);
  font-size: 0.85rem; }

.filter-select,
.filter-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--movie-border, #2c2b47);
  background: var(--movie-background-input, #252442);
  color: var(--movie-text-primary, #ffffff);
  font-size: 0.9rem;
  appearance: none; }

.filter-select-wrapper {
  position: relative; }

.filter-select-wrapper::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--movie-text-secondary, #b8b8d2);
  pointer-events: none; }

.filter-input-range {
  display: flex;
  gap: 10px;
  align-items: center; }

.filter-input-range input {
  width: calc(50% - 15px); }

.range-separator {
  color: var(--movie-text-secondary, #b8b8d2); }

.filter-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 20px; }

.filter-button {
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease; }

.filter-apply {
  background: var(--movie-primary, #6c5ce7);
  color: white; }

.filter-reset {
  background: transparent;
  border: 1px solid var(--movie-border, #2c2b47);
  color: var(--movie-text-secondary, #b8b8d2); }

.filter-button:hover {
  opacity: 0.9; }

/* Tags intelligents sur les films */
.movie-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  margin-right: 5px;
  margin-bottom: 5px; }

.tag-new {
  background: #ff9f43;
  color: #ffffff; }

.tag-recent {
  background: #2e86de;
  color: #ffffff; }

.tag-popular {
  background: #ee5253;
  color: #ffffff; }

.tag-recommended {
  background: #10ac84;
  color: #ffffff; }

.tag-last-chance {
  background: #5f27cd;
  color: #ffffff; }

/* Style pour la jauge de popularité simplifiée */
.popularity-gauge {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px; }

.popularity-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
  flex-grow: 1; }

.popularity-fill {
  height: 100%;
  background: linear-gradient(to right, #ff9f43, #ee5253);
  border-radius: 2px; }

.popularity-text {
  font-size: 0.75rem;
  color: var(--movie-text-secondary, #b8b8d2); }

/* Version mobile des filtres */
@media (max-width: 768px) {
  .filter-row {
    flex-direction: column;
    gap: 10px; }

  .filter-group {
    width: 100%; }

  .advanced-filters {
    padding: 12px; }

  .filter-actions {
    flex-direction: column;
    gap: 10px; }

  .filter-button {
    width: 100%; } }
/* Styles pour le sélecteur de salle */
.screen-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 15px 0;
  justify-content: center; }

.screen-button {
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--movie-border, #2c2b47);
  background: transparent;
  color: var(--movie-text-secondary, #b8b8d2);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease; }

.screen-button.active {
  background: var(--movie-primary, #6c5ce7);
  color: white;
  border-color: var(--movie-primary, #6c5ce7); }

.screen-button:hover:not(.active) {
  background: rgba(108, 92, 231, 0.2); }

/* Base styles - disposition commune */
.search-filters-wrapper {
  max-width: 1700px;
  margin: 0 auto 20px;
  padding: 0 15px;
  display: flex;
  gap: 15px; }

/* Styles communs pour les éléments */
.search-filter-container,
.filter-by-genre-container,
.advanced-filters {
  margin: 0 !important;
  min-width: 0;
  /* Pour éviter les débordements */ }

/* Disposition horizontale pour desktop */
@media (min-width: 992px) {
  .search-filters-wrapper {
    flex-direction: row;
    align-items: stretch; }

  .search-filter-container {
    flex: 3; }

  .filter-by-genre-container {
    flex: 1;
    display: flex;
    align-items: center; }

  .advanced-filters {
    flex: 2; }

  /* Ajustements pour le filtre par genre */
  .filter-box {
    display: flex;
    align-items: center;
    width: 100%; }

  .filter-label {
    white-space: nowrap;
    margin-right: 10px;
    font-size: 14px; }

  .genre-filter-wrapper {
    flex: 1; } }
/* Disposition en colonne pour mobile */
@media (max-width: 991px) {
  .search-filters-wrapper {
    flex-direction: column;
    gap: 10px; }

  .search-filter-container,
  .filter-by-genre-container,
  .advanced-filters {
    width: 100%; }

  /* Compacter les éléments en version mobile */
  .search-filter-container {
    padding: 10px !important; }

  .search-box {
    height: 42px; }

  #global-search {
    font-size: 14px;
    padding: 10px 10px 10px 40px !important; }

  .search-icon {
    left: 12px;
    font-size: 15px; }

  /* Optimiser le filtre par genre en mobile */
  .filter-by-genre-container {
    display: flex;
    align-items: center;
    background: rgba(40, 40, 40, 0.7);
    border-radius: 8px;
    padding: 5px 10px; }

  .filter-label {
    white-space: nowrap;
    font-size: 13px;
    color: #ccc;
    margin-right: 10px; }

  .genre-filter-wrapper {
    flex: 1; }

  .genre-filter {
    padding: 8px 12px;
    font-size: 14px;
    height: 38px; }

  /* Compacter les filtres avancés */
  .advanced-filters {
    padding: 10px !important; }

  .advanced-filters-header {
    padding: 8px 12px;
    margin-bottom: 0; }

  .advanced-filters-header h3 {
    font-size: 14px; } }
/* Optimisations supplémentaires pour très petits écrans */
@media (max-width: 480px) {
  .search-filters-wrapper {
    padding: 0 10px;
    gap: 8px; }

  .search-box,
  .genre-filter {
    height: 38px; }

  #global-search {
    font-size: 13px; }

  .filter-label {
    font-size: 12px; } }
/* Uniformiser les blocs de filtres */
.search-filter-container,
.filter-by-genre-container,
.advanced-filters {
  background-color: #2a2a2a;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); }

/* Boîte de recherche */
.search-filter-container .search-box {
  border-radius: 8px;
  overflow: hidden;
  background-color: #1e1e1e;
  border: 1px solid #444; }

/* Correction visuelle du champ "Filtrer par genre" */
.filter-by-genre-container .filter-box {
  background-color: #1e1e1e;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 8px 12px;
  width: 100%; }

.filter-by-genre-container select {
  width: 100%;
  background-color: transparent;
  color: #fff;
  border: none;
  font-size: 14px; }

/* Affichage plus net pour les filtres avancés */
.advanced-filters {
  border: 1px solid #444; }

/* Appliquer une hauteur minimum uniforme */
.search-filter-container,
.filter-by-genre-container,
.advanced-filters {
  min-height: 80px; }

/* Réduction du bouton "Appliquer les filtres" pour éviter qu’il dépasse */
.advanced-filters button {
  font-size: 14px;
  padding: 10px 15px;
  border-radius: 6px; }

.filters-ready {
  gap: 20px;
  align-items: flex-start; }

@media (max-width: 991px) {
  .filters-ready .search-filter-container,
  .filters-ready .filter-by-genre-container,
  .filters-ready .advanced-filters {
    padding: 10px;
    border-radius: 6px;
    box-shadow: none;
    margin-bottom: 10px; }

  .filters-ready .search-box {
    height: 42px;
    padding: 8px; }

  .filters-ready #global-search {
    font-size: 13px;
    padding: 8px 10px 8px 35px !important; }

  .filters-ready .search-icon {
    font-size: 14px;
    left: 10px; }

  .filters-ready .filter-by-genre-container .filter-box {
    padding: 6px 10px;
    height: auto; }

  .filters-ready .filter-label {
    font-size: 13px;
    margin-right: 8px; }

  .filters-ready .filter-by-genre-container select {
    font-size: 13px;
    padding: 6px 8px; }

  .filters-ready .advanced-filters .advanced-filters-header h3 {
    font-size: 14px; }

  .filters-ready .advanced-filters button {
    font-size: 13px;
    padding: 8px 12px; } }
@media (max-width: 480px) {
  .filters-ready {
    gap: 8px; }

  .filters-ready .search-filter-container,
  .filters-ready .filter-by-genre-container,
  .filters-ready .advanced-filters {
    padding: 8px; }

  .filters-ready .search-box,
  .filters-ready .filter-box {
    height: 38px; }

  .filters-ready #global-search {
    font-size: 12.5px;
    padding-left: 30px !important; }

  .filters-ready .filter-label {
    font-size: 12px; }

  .filters-ready .advanced-filters button {
    font-size: 12px;
    padding: 7px 10px; } }
/* Variables de thème pour changer dynamiquement selon le thème choisi */
:root {
  /* Variables qui seront réécrites dynamiquement en fonction du thème */
  --theme-primary: #6d5aff;
  /* Couleur par défaut (thème purple) */
  --theme-secondary: #ff4593;
  /* Couleur secondaire (thème purple) */
  --theme-gradient: linear-gradient(
    135deg,
    var(--theme-primary),
    var(--theme-secondary)
  );
  /* Variables spécifiques pour les horaires et séances */
  --color-title-h2-showtimes: #fff;
  --before-pic-background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.6),
    transparent 85%
  );
  --border-color-liste-date: #6d5aff;
  /* Sera remplacé par le thème */
  --bg-date-selected: var(--theme-primary);
  /* Sera remplacé par le thème */ }

/* title */
/* Container showtimes */
/*Poster movie*/
/*Date Section*/
/* bg color date mois jour ... */
/* bg color MOIS ... */
/*  color MOIS ... */
/*  color Date ... */
/*  color Day ... */
/* Horaires de reservation container */
/* Btn Reservation Section*/
/* bg btn horaire film */
/* Hover couleurtext horaires */
/* bg couleur option premiun ou autre salle special */
/* HOVER bg couleur option premiun ou autre salle special */
/* Couleur option premiun ou autre salle special */
/* HOVER Couleur option premiun ou autre salle special */
/* Couleur option 3D */
/* HOVER Couleur option 3D */
/********************************************************
*                                                        *
*          Partie Slide Synchronisation                  *
*                                                        *
*********************************************************/
.showTimes-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  row-gap: 1em;
  color: #fff;
  margin-bottom: 2em; }
  .showTimes-section .showtimes-title-zerd {
    width: 100%;
    font-weight: 500;
    font-size: 1.2rem;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    text-transform: uppercase;
    line-height: 1;
    margin: 0 auto;
    background: radial-gradient(51.39% 511.66% at 47.68% -217.91%, #ff9900 0%, #e50914 17.27%, #0e1b4f 79.44%, #000413 100%);
    border-radius: 4px;
    font-size: 3em;
    color: var(--color-title-h2-showtimes);
    line-height: 1.2;
    font-weight: 700;
    padding: 0.5em 0.5em 0.5em 0.5em;
    text-transform: capitalize;
    background: transparent; }
    @media screen and (max-width: 768px) {
      .showTimes-section .showtimes-title-zerd {
        font-size: 1.5em; } }
  .showTimes-section .flex-showTimes {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    margin: 0 auto;
    position: relative;
    width: 100%;
    max-width: 1024px;
    padding: 1em;
    box-shadow: 0 0.265rem 0.9rem 0 #ffffff1a;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 0.5em;
  /*
  Main carousel
*/
  /*
  Fancybox
*/
    /********************************************************
                                                        *
          Partie Horaires reservation                   *
                                                        *
*********************************************************/ }
    @media screen and (max-width: 768px) {
      .showTimes-section .flex-showTimes {
        padding: 0.5em;
        width: 99%;
        margin-top: 0.5em; } }
    .showTimes-section .flex-showTimes .image_movie_bg {
      bottom: 0;
      left: 0;
      opacity: 1;
      position: absolute;
      right: 26.09%;
      top: 0; }
    .showTimes-section .flex-showTimes .pic-background {
      position: absolute;
      width: 100%;
      background-size: cover;
      background-position: 50% 0;
      background-repeat: no-repeat;
      top: 0;
      right: 0;
      bottom: 0; }
      .showTimes-section .flex-showTimes .pic-background::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        z-index: 0;
        background: var(--before-pic-background); }
        @media screen and (max-width: 768px) {
          .showTimes-section .flex-showTimes .pic-background::before {
            display: none; } }
    .showTimes-section .flex-showTimes .book_showTimes {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 1440px;
      margin-bottom: 1em;
      box-sizing: border-box; }
      @media screen and (max-width: 768px) {
        .showTimes-section .flex-showTimes .book_showTimes {
          font-size: 0.85em;
          margin-bottom: 0; } }
      .showTimes-section .flex-showTimes .book_showTimes .showTimes-pic-title {
        display: flex;
        justify-content: flex-start;
        position: relative;
        width: 100%;
        column-gap: 1em; }
        @media screen and (max-width: 768px) {
          .showTimes-section .flex-showTimes .book_showTimes .showTimes-pic-title {
            column-gap: 0.5em; } }
        .showTimes-section .flex-showTimes .book_showTimes .showTimes-pic-title .pic-paly {
          display: flex;
          position: relative;
          align-items: center;
          justify-content: center; }
          .showTimes-section .flex-showTimes .book_showTimes .showTimes-pic-title .pic-paly img {
            width: 142px;
            height: 196px;
            position: relative;
            box-shadow: 0 0.5rem 1.5rem #d6d5d585;
            border-radius: 10px;
            background: linear-gradient(70deg, #515151 30%, transparent 30%), linear-gradient(30deg, #363c43 60%, #2d2d2e 60%); }
            @media screen and (max-width: 768px) {
              .showTimes-section .flex-showTimes .book_showTimes .showTimes-pic-title .pic-paly img {
                width: 100px;
                height: 136px; } }
          .showTimes-section .flex-showTimes .book_showTimes .showTimes-pic-title .pic-paly .span-play {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            z-index: 2;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background-color: var(--theme-primary);
            color: #fff;
            line-height: 0px;
            text-align: center;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
            overflow: hidden;
            box-sizing: border-box; }
            .showTimes-section .flex-showTimes .book_showTimes .showTimes-pic-title .pic-paly .span-play:hover {
              transform: scale(1.2);
              background-color: var(--theme-secondary); }
        .showTimes-section .flex-showTimes .book_showTimes .showTimes-pic-title .movie-detail-showTimes {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          flex-grow: 1;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.45);
          font-size: 0.85em; }
          .showTimes-section .flex-showTimes .book_showTimes .showTimes-pic-title .movie-detail-showTimes h3::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 5px;
            height: 24px;
            background: var(--showtimes-h3-decoration-gradient);
            border-radius: 3px; }
          .showTimes-section .flex-showTimes .book_showTimes .showTimes-pic-title .movie-detail-showTimes .movieTitle-showTimes {
            font-weight: 600;
            margin: 0;
            padding-left: 15px;
            box-sizing: border-box;
            font-size: 3em;
            text-transform: capitalize;
            font-family: "Heebo";
            letter-spacing: 0.25px;
            position: relative;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical; }
            @media screen and (max-width: 768px) {
              .showTimes-section .flex-showTimes .book_showTimes .showTimes-pic-title .movie-detail-showTimes .movieTitle-showTimes {
                font-size: 1.4em;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                width: 100%; } }
          .showTimes-section .flex-showTimes .book_showTimes .showTimes-pic-title .movie-detail-showTimes .title-info-movie-showTimes {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            position: relative;
            box-sizing: border-box;
            column-gap: 7px;
            text-size-adjust: 100%;
            font-weight: 400;
            margin: 0.5em 0.5em 0.5em 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical; }
            .showTimes-section .flex-showTimes .book_showTimes .showTimes-pic-title .movie-detail-showTimes .title-info-movie-showTimes .rating-showTimes {
              position: relative;
              box-sizing: border-box;
              padding-left: 5px;
              border-width: 0 0 0 1px; }
              .showTimes-section .flex-showTimes .book_showTimes .showTimes-pic-title .movie-detail-showTimes .title-info-movie-showTimes .rating-showTimes .span-rating-resa {
                border: 1px solid #fff;
                font-weight: 400; }
            .showTimes-section .flex-showTimes .book_showTimes .showTimes-pic-title .movie-detail-showTimes .title-info-movie-showTimes .duration-movie-showTimes {
              position: relative;
              border-width: 0 1px;
              padding: 0 5px;
              box-sizing: border-box; }
            .showTimes-section .flex-showTimes .book_showTimes .showTimes-pic-title .movie-detail-showTimes .title-info-movie-showTimes .genre-showTimes {
              position: relative;
              padding: 0;
              box-sizing: border-box;
              text-transform: capitalize; }
          .showTimes-section .flex-showTimes .book_showTimes .showTimes-pic-title .movie-detail-showTimes .director-showTimes {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.45);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical; }
          .showTimes-section .flex-showTimes .book_showTimes .showTimes-pic-title .movie-detail-showTimes .actors-showTimes {
            box-sizing: border-box;
            margin: 0.5em 0.5em 0.5em 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical; }
      .showTimes-section .flex-showTimes .book_showTimes .synopsis-showTimes {
        max-width: 950px;
        z-index: 1;
        width: 55%;
        margin: 0.5em 0.5em 0.5em 0; }
        @media screen and (max-width: 768px) {
          .showTimes-section .flex-showTimes .book_showTimes .synopsis-showTimes {
            width: 100%; } }
        .showTimes-section .flex-showTimes .book_showTimes .synopsis-showTimes .synopsis-movie-showTimes {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 4;
          -webkit-box-orient: vertical;
          transition: all 0.3s ease;
          margin: 0;
          letter-spacing: 0.25px;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.45); }
    .showTimes-section .flex-showTimes .product-container {
      display: flex;
      width: 100%;
      flex-direction: column;
      padding: 0em;
      background-color: transparent;
      position: relative; }
    .showTimes-section .flex-showTimes .product-container .f-thumbs.is-classic.is-vertical {
      height: var(--product-view-height, 100%); }
    .showTimes-section .flex-showTimes .product-container .f-carousel {
      --f-button-width: 24px;
      --f-button-height: 24px;
      --f-button-svg-width: 15px;
      --f-button-svg-height: 15px;
      --f-button-svg-stroke-width: 2.5;
      --f-button-color: #ffffff;
      --f-button-border-radius: 50%;
      --f-button-shadow: none;
    /* 0 6px 12px -2px rgb(50 50 93 / 25%),
  0 3px 7px -3px rgb(0 0 0 / 30%)*/
      --f-button-hover-color: #ffffff;
      --f-button-bg: #00000091;
      --f-button-hover-bg: var(
        --theme-primary
      );
      /* Remplacé par la couleur du thème */
      --f-button-active-bg: #000000;
      --f-button-prev-pos: 0;
      --f-button-next-pos: 0; }
    .showTimes-section .flex-showTimes .show_times_carousel {
      --f-carousel-spacing: 0;
      --f-button-width: 30px;
      --f-button-height: 30px;
      --f-button-border-radius: 0;
      --f-button-color: #0d0c22;
      --f-button-hover-color: var(
        --theme-primary
      );
      /* Remplacé par la couleur du thème */
      --f-button-bg: #fff;
      --f-button-hover-bg: #fff;
      --f-button-active-bg: #fff;
      --f-button-svg-width: 30px;
      --f-button-svg-height: 30px;
      --f-button-svg-stroke-width: 1;
      --f-button-svg-filter: none;
      --f-transition-duration: var(--my-transition-duration);
      height: var(--product-view-height);
      margin-bottom: 1rem;
      border: solid 3px var(--border-color-liste-date);
      box-sizing: border-box;
      border-radius: 10px; }
      @media screen and (max-width: 768px) {
        .showTimes-section .flex-showTimes .show_times_carousel {
          border-radius: 0; } }
      .showTimes-section .flex-showTimes .show_times_carousel .f-carousel__slide {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        min-height: 6em; }
      .showTimes-section .flex-showTimes .show_times_carousel .f-carousel__nav {
        opacity: 1;
        transition: opacity 0.15s; }
        .showTimes-section .flex-showTimes .show_times_carousel .f-carousel__nav .f-button.is-next,
        .showTimes-section .flex-showTimes .show_times_carousel .f-carousel__nav .f-button.is-prev {
          top: -50px; }
    .showTimes-section .flex-showTimes .f-button[disabled] {
      cursor: default;
      opacity: 0.3; }
    @media (hover: hover) {
      .showTimes-section .flex-showTimes .show_times_carousel:hover .f-carousel__nav {
        opacity: 1; } }
    .showTimes-section .flex-showTimes .my_navigation_date {
      --f-carousel-slide-width: 100px;
      --f-carousel-spacing: 5px; }
      .showTimes-section .flex-showTimes .my_navigation_date .f-carousel__slide {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 6em;
        background-color: rgba(255, 182, 193, 0); }
        @media screen and (max-width: 768px) {
          .showTimes-section .flex-showTimes .my_navigation_date .f-carousel__slide {
            align-items: flex-end; } }
      .showTimes-section .flex-showTimes .my_navigation_date .f-carousel__nav {
        opacity: 1;
        transition: opacity 0.2s ease-in-out; }
      .showTimes-section .flex-showTimes .my_navigation_date .f-carousel__slide.is-nav-selected {
        color: #fff;
        background: #ff362000; }
        .showTimes-section .flex-showTimes .my_navigation_date .f-carousel__slide.is-nav-selected .date-resa-navCarousel {
          width: 98%;
          height: 98%;
          transition: width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          background-color: var(--bg-date-selected);
          color: #fff; }
          @media screen and (max-width: 768px) {
            .showTimes-section .flex-showTimes .my_navigation_date .f-carousel__slide.is-nav-selected .date-resa-navCarousel {
              width: 75%;
              height: 75%;
              font-size: 14px;
              margin-bottom: 0; } }
          .showTimes-section .flex-showTimes .my_navigation_date .f-carousel__slide.is-nav-selected .date-resa-navCarousel .date-carousel {
            color: #fff;
            font-size: 2em; }
          .showTimes-section .flex-showTimes .my_navigation_date .f-carousel__slide.is-nav-selected .date-resa-navCarousel .month-carousel {
            color: #fff; }
            .showTimes-section .flex-showTimes .my_navigation_date .f-carousel__slide.is-nav-selected .date-resa-navCarousel .month-carousel .date-hidden-shotimes {
              color: transparent;
              font-size: 1px;
              display: inline-flex;
              width: 1px;
              height: 1px; }
    @media (hover: hover) {
      .showTimes-section .flex-showTimes .my_navigation_date:hover .f-carousel__nav {
        opacity: 1; } }
    .showTimes-section .flex-showTimes .fancybox__container {
      --fancybox-color: #0d0c22;
      --fancybox-bg: #fff;
      --f-spinner-color-1: rgba(0, 0, 0, 0.1);
      --f-spinner-color-2: rgba(17, 24, 28, 0.8); }
    .showTimes-section .flex-showTimes .fancybox__toolbar,
    .showTimes-section .flex-showTimes .fancybox__nav {
      --f-button-width: 60px;
      --f-button-height: 60px;
      --f-button-border-radius: 0;
      --f-button-color: #0d0c22;
      --f-button-hover-color: var(
        --theme-primary
      );
      /* Remplacé par la couleur du thème */
      --f-button-bg: #fff;
      --f-button-hover-bg: #fff;
      --f-button-active-bg: #fff;
      --f-button-svg-width: 32px;
      --f-button-svg-height: 32px;
      --f-button-svg-stroke-width: 1;
      --f-button-svg-filter: none; }
    .showTimes-section .flex-showTimes .fancybox__nav {
      --f-button-next-pos: 0;
      --f-button-prev-pos: 0; }
    .showTimes-section .flex-showTimes * {
      box-sizing: border-box;
      text-decoration: none;
      user-select: none; }
    .showTimes-section .flex-showTimes .book_showTimes .showTimes-pic-title .movie-detail-showTimes .title-info-movie-showTimes .rating-showTimes .span-rating-resa, .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book .screen-option .screen-option-1, .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book .screen-option .screen-option-2, .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book .screen-option .screen-option-3 {
      overflow: hidden;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
      line-height: 1.5;
      border-radius: 3px;
      padding: 0 0.5em;
      font-style: italic;
      box-sizing: border-box;
      font-size: 0.75em; }
    .showTimes-section .flex-showTimes .date-resa-carousel, .showTimes-section .flex-showTimes .date-resa-navCarousel {
      display: flex;
      justify-content: center;
      flex-direction: column;
      line-height: 1.1;
      width: 100%;
      text-align: center;
      color: #090a0b;
      padding: 1em;
      box-sizing: border-box; }
      @media screen and (max-width: 768px) {
        .showTimes-section .flex-showTimes .date-resa-carousel, .showTimes-section .flex-showTimes .date-resa-navCarousel {
          padding: 0.25rem; } }
    .showTimes-section .flex-showTimes .date-resa-carousel .availabilities-hours {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 0.5em;
      margin: 0;
      padding: 0;
      box-sizing: border-box; }
      @media screen and (max-width: 768px) {
        .showTimes-section .flex-showTimes .date-resa-carousel .availabilities-hours {
          column-gap: 0.25rem; } }
    .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book {
      display: flex;
      flex-direction: column;
      justify-content: center;
      pointer-events: auto;
      cursor: pointer;
      background: #f8f8f8;
      border: solid 2px transparent;
      padding: 0.5rem 1rem;
      min-width: 160px;
      min-height: 75px;
      margin: 0;
      position: relative;
      overflow: hidden;
      border-radius: 0.85rem;
      color: #fff; }
      .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book:hover {
        border: solid 2px #e7e7e7; }
      .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book .infoPerf {
        display: flex;
        flex-direction: column;
        position: relative;
        font-size: 1em;
        font-weight: 600;
        margin: auto;
        z-index: 10; }
        .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book .infoPerf .premiumSpan {
          color: #ffffff; }
        .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book .infoPerf .versionSpan,
        .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book .infoPerf .hoursSpan,
        .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book .infoPerf .town-book {
          color: #202124; }
        .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book .infoPerf .town-book {
          padding: 0.25rem;
          margin-bottom: 0.2em;
          color: #fff; }
          @media screen and (max-width: 768px) {
            .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book .infoPerf .town-book {
              padding: 0.4rem; } }
          .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book .infoPerf .town-book::before {
            background-color: var(--theme-primary);
            /* Remplacé par la couleur du thème */
            content: "";
            height: 19px;
            left: 0;
            position: absolute;
            top: 4px;
            width: 100%;
            z-index: -1;
            right: 0;
            margin: auto;
            border-radius: 4px; }
      .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book:hover .infoPerf {
        animation: MoveScaleUpInitial 0.3s forwards, MoveScaleUpEnd 0.3s forwards 0.3s; }
      .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book::before {
        position: absolute;
        content: "";
        background: #000;
        width: 120%;
        height: 0;
        padding-bottom: 130%;
        top: -74%;
        left: -10%;
        border-radius: 50%;
        transform: translate3d(0, 68%, 0) scale3d(0, 0, 0); }
        @media screen and (max-width: 768px) {
          .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book::before {
            top: -38%; } }
      .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book:hover::before {
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1); }
      .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book::after {
        position: absolute;
        top: -10px;
        left: 0;
        width: 100%;
        height: 100%;
        content: "";
        background: #000;
        transform: translate3d(0, -100%, 0);
        transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1); }
      .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book:hover::after {
        transform: translate3d(0, 0, 0);
        transition-duration: 0.05s;
        transition-delay: 0.4s;
        transition-timing-function: linear; }
@keyframes MoveScaleUpInitial {
  to {
    transform: translate3d(0, -105%, 0) scale3d(1, 2, 1);
    opacity: 0; } }
@keyframes MoveScaleUpEnd {
  from {
    transform: translate3d(0, 100%, 0) scale3d(1, 2, 1);
    opacity: 0; }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1; } }
      .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book:hover .infoPerf {
        opacity: 0;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
        -webkit-transition-delay: 0s;
        transition-delay: 0s; }
        .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book:hover .infoPerf .screen-option-3 {
          color: rgba(255, 255, 255, 0.9);
          border: 1px solid rgba(255, 255, 255, 0.9); }
        .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book:hover .infoPerf span {
          color: #fff; }
        .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book:hover .infoPerf .town-book::before {
          background-color: var(--theme-primary);
          /* Remplacé par la couleur du thème */ }
      .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book .hours_screen {
        color: #090a0b;
        font-size: 1em;
        font-weight: 800;
        letter-spacing: 0.25px;
        line-height: 1.3; }
      .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book .screen-option {
        display: flex;
        margin: 0;
        padding: 0;
        position: relative;
        list-style: none;
        justify-content: center;
        align-items: center;
        column-gap: 2px;
        box-sizing: border-box;
        font-size: 1em; }
        .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book .screen-option > li {
          margin-right: 5px; }
        .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book .screen-option .screen-option-1 {
          color: #ffffff;
          background-color: var(--theme-primary);
          /* Remplacé par la couleur du thème */
          padding: 0.25rem;
          border-radius: 10%/70%;
          font-size: 0.7em;
          letter-spacing: 0;
          font-style: normal; }
        .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book .screen-option .screen-option-2 {
          border: 1px solid rgba(47, 47, 47, 0.8);
          color: #fff;
          letter-spacing: -1px;
          font-weight: 700;
          font-size: 0.85em;
          background-color: rgba(47, 47, 47, 0.8);
          font-style: normal;
          padding: 0px 0.4em; }
        .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book .screen-option .screen-option-3d {
          color: #d088d8; }
        .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book .screen-option .screen-option-3 {
          border: 1px solid rgba(26, 25, 25, 0.5);
          color: rgba(36, 35, 36, 0.9);
          margin: 0; }
      @media screen and (max-width: 768px) {
        .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book {
          min-width: 94px;
          font-size: 0.75rem;
          padding: 0 10px;
          min-height: 65px; } }
      .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book.timed_out {
        box-shadow: inset 0 0 7px 0px rgba(0, 0, 0, 0);
        filter: grayscale(1);
        background-color: #9e9e9e;
        cursor: not-allowed;
        background-color: #bfc4cd;
        color: #9b9b9b;
        border-color: #bfc4cd;
        pointer-events: none;
        cursor: pointer;
        mix-blend-mode: difference; }
        .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book.timed_out .screen-option-1 {
          color: #aeadad; }
        .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book.timed_out .screen-option-3 {
          color: #aeadad;
          border-color: #aeadad; }
        .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book.timed_out .infoPerf {
          transform: none;
          opacity: 1; }
          .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book.timed_out .infoPerf .hoursSpan {
            color: #a59999; }
          .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book.timed_out .infoPerf .town-book {
            color: #aaa5a5; }
          .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book.timed_out .infoPerf .premiumSpan {
            color: #a59999; }
          .showTimes-section .flex-showTimes .date-resa-carousel .btn-zerd-book.timed_out .infoPerf .versionSpan {
            color: #a59999; }
    .showTimes-section .flex-showTimes .date-resa-navCarousel {
      align-items: center;
      width: 85%;
      height: 85%;
      cursor: pointer;
      background-color: #f3f3f3;
      transition: width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      cursor: pointer;
      border-radius: 0.5em; }
      @media screen and (max-width: 768px) {
        .showTimes-section .flex-showTimes .date-resa-navCarousel {
          width: 65%;
          height: 65%;
          font-size: 12px;
          margin-bottom: 4px; } }
      .showTimes-section .flex-showTimes .date-resa-navCarousel .month-carousel {
        font-size: 1em;
        width: 85%;
        color: #202124;
        padding: 0.25rem;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center; }
        .showTimes-section .flex-showTimes .date-resa-navCarousel .month-carousel .date-hidden-shotimes {
          color: transparent;
          font-size: 1px;
          display: inline-flex;
          width: 1px;
          height: 1px; }
      .showTimes-section .flex-showTimes .date-resa-navCarousel .date-carousel {
        font-size: 2em;
        font-weight: 900;
        color: #202124;
        line-height: 0.85em; }
      .showTimes-section .flex-showTimes .date-resa-navCarousel .zerdperf .day-carousel {
        font-size: 0.85em;
        color: #202124; }

/* Barre de recherche adaptée au thème */
.myInputSearchShowTimes {
  width: 100%;
  max-width: 500px;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  background-color: rgba(255, 255, 255, 0.05);
  background-position: right 15px center;
  background-repeat: no-repeat;
  color: #fff;
  font-size: 14px;
  margin: 20px auto;
  transition: all 0.3s ease;
  display: block; }

.myInputSearchShowTimes:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1); }

.myInputSearchShowTimes::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px; }

/* Optimisations pour la barre de recherche sur mobile */
@media only screen and (max-width: 480px) {
  .myInputSearchShowTimes {
    padding: 10px 15px;
    font-size: 12px;
    margin: 10px auto;
    background-position: right 10px center; } }
#zdblock_showtimes {
  background-color: var(--movie-background-dark, #121212);
  padding: 40px 0; }

/* Style titre spécifique */
.showtimes-title-zerd {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  position: relative;
  margin-bottom: 1rem !important;
  text-align: center; }

/* Style titre avec pseudo-élément décoratif */
.showtimes-title-zerd:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--theme-gradient);
  border-radius: 3px; }

.zdblock_shop_container .container-shop .main_level_shop .menu_title {
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
  margin: 1rem auto;
  padding: 0.5rem;
  color: #d22b2b; }
  @media (max-width: 768px) {
    .zdblock_shop_container .container-shop .main_level_shop .menu_title {
      font-size: 1.5rem;
      padding: 0.3rem;
      margin: 0.5rem auto; } }

.zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container, .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-total-pay {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  transition: all 0.25s ease; }
  @media (max-width: 768px) {
    .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container, .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-total-pay {
      padding: 0.75rem; } }

.zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .name-level, .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-total-pay .total_pay {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-grow: 1; }
  @media (max-width: 768px) {
    .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .name-level, .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-total-pay .total_pay {
      flex-direction: column;
      align-items: flex-start; } }

.swal2-container {
  z-index: 999999999 !important;
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.custom-swal {
  background-color: #f8d7da !important;
  color: #dc3545 !important;
  border: 1px solid #f8d7da !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
  max-width: 90% !important;
  margin: 0 auto !important; }
  @media (max-width: 768px) {
    .custom-swal {
      max-width: 95% !important; } }

.custom-title {
  color: #dc3545 !important;
  font-weight: bold;
  font-size: 1.5rem !important; }
  @media (max-width: 768px) {
    .custom-title {
      font-size: 1.25rem !important; } }

.custom-button {
  background-color: #d22b2b !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 0.75rem 1.5rem !important;
  transition: all 0.3s ease !important; }
  .custom-button:hover {
    background-color: #b22222 !important;
    transform: translateY(-2px) !important; }
  .custom-button:active {
    transform: translateY(0) !important; }

.zdblock_shop_container {
  width: 100%;
  position: relative;
  color: #333; }
  .zdblock_shop_container .container-shop {
    display: flex;
    width: 100%;
    height: 100%;
    flex-grow: 1; }
    @media (max-width: 768px) {
      .zdblock_shop_container .container-shop {
        flex-direction: column;
        width: 100%; } }
    .zdblock_shop_container .container-shop .movie_shop_infos {
      width: 23em;
      transition: all 0.5s ease;
      min-width: 23em; }
      @media (max-width: 992px) {
        .zdblock_shop_container .container-shop .movie_shop_infos {
          width: 100%;
          min-width: 0; } }
      .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: sticky;
        top: 65px;
        width: 100%;
        min-height: 100vh;
        overflow: hidden;
        background: #1c2129;
        flex-shrink: 0;
        box-sizing: border-box;
        background-position: top;
        background-size: auto 50%;
        background-repeat: no-repeat;
        font-weight: 700;
        box-shadow: 0 0.3rem 1rem 0 rgba(0, 0, 0, 0.34); }
        @media (max-width: 992px) {
          .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop {
            min-height: auto;
            max-height: 400px;
            background-size: cover;
            position: relative;
            top: 0; } }
        @media (max-width: 768px) {
          .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop {
            max-height: 336px;
            justify-content: flex-end;
            flex-direction: column-reverse;
            background-size: cover;
            box-shadow: none; } }
        .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image: linear-gradient(-180deg, rgba(28, 33, 41, 0.1), #181818 50%); }
          @media (max-width: 768px) {
            .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop::after {
              background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0, transparent 50%, transparent 75%, rgba(0, 0, 0, 0.8)); } }
        .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop .shop-details-pic {
          display: flex;
          flex-direction: row-reverse;
          justify-content: space-between;
          row-gap: 4px;
          align-items: center;
          position: relative;
          text-align: center;
          width: 100%;
          margin-top: auto;
          margin-bottom: auto; }
          .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop .shop-details-pic .details-shop-places {
            display: flex;
            flex-direction: row;
            justify-content: center;
            flex-wrap: wrap;
            flex-grow: 1;
            font-size: 0.875em;
            line-height: 1.5em;
            z-index: 1;
            box-sizing: border-box;
            font-weight: 400;
            align-items: center;
            padding: 0 16px;
            row-gap: 4px;
            overflow: hidden;
            color: #f8f8f8; }
            .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop .shop-details-pic .details-shop-places > li {
              padding: 0.25em 0;
              margin: 0; }
            .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop .shop-details-pic .details-shop-places .shop_date {
              display: flex;
              flex-direction: row;
              align-items: center;
              width: 100%;
              z-index: 2;
              column-gap: 4px;
              position: relative; }
            .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop .shop-details-pic .details-shop-places .shop_name_cine {
              display: flex;
              flex-direction: column;
              align-items: center;
              width: 100%;
              z-index: 2;
              column-gap: 4px;
              font-size: 1.5em;
              line-height: 1.5em;
              font-weight: 400;
              justify-content: center; }
              .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop .shop-details-pic .details-shop-places .shop_name_cine img {
                height: auto;
                width: 80px;
                max-width: 100%;
                transition: all 0.3s ease; }
                @media (max-width: 768px) {
                  .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop .shop-details-pic .details-shop-places .shop_name_cine img {
                    width: 60px; } }
            .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop .shop-details-pic .details-shop-places .shop_showtimes,
            .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop .shop-details-pic .details-shop-places .shop_hours {
              display: flex;
              z-index: 2;
              width: 100%;
              font-size: 1.3em;
              font-weight: 300; }
              @media (max-width: 768px) {
                .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop .shop-details-pic .details-shop-places .shop_showtimes,
                .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop .shop-details-pic .details-shop-places .shop_hours {
                  font-size: 1.1em; } }
            .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop .shop-details-pic .details-shop-places .shop_hours {
              flex-direction: row;
              align-items: center;
              column-gap: 7px;
              box-sizing: border-box;
              overflow: hidden;
              position: relative; }
          .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop .shop-details-pic .moviePosterDiv--zerd {
            width: 100%;
            position: relative;
            padding: 16px 0 16px 16px;
            display: flex;
            align-items: center;
            justify-content: center; }
            @media (max-width: 768px) {
              .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop .shop-details-pic .moviePosterDiv--zerd {
                width: 116px;
                padding: 8px; } }
            .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop .shop-details-pic .moviePosterDiv--zerd .moviePosterDiv--item {
              max-width: 155px;
              width: 100%;
              position: relative; }
              @media (max-width: 768px) {
                .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop .shop-details-pic .moviePosterDiv--zerd .moviePosterDiv--item {
                  max-width: 120px; } }
              .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop .shop-details-pic .moviePosterDiv--zerd .moviePosterDiv--item .rating_shop {
                overflow: hidden;
                text-overflow: ellipsis;
                text-transform: uppercase;
                white-space: nowrap;
                margin-left: 10px;
                line-height: 1.5;
                font-size: 10px;
                border-radius: 3px;
                padding: 0 0.5em;
                font-weight: 600;
                position: absolute;
                background: var(--bg-circle-cart-shopping, #d22b2b) !important;
                z-index: 1;
                right: var(--right-interdiction);
                top: var(--top-interdiction);
                height: 50px;
                color: #fff; }
                @media (max-width: 768px) {
                  .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop .shop-details-pic .moviePosterDiv--zerd .moviePosterDiv--item .rating_shop .moviePosterDiv--item {
                    position: relative; }
                  .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop .shop-details-pic .moviePosterDiv--zerd .moviePosterDiv--item .rating_shop .moviePosterDiv--item .rating_shop {
                    position: absolute;
                    top: 50%;
                    right: 0;
                    transform: translateY(-50%);
                    height: auto;
                    margin-left: 0;
                    padding: 6px 10px;
                    border-radius: 3px 0 0 3px;
                    font-size: 10px;
                    line-height: 1.2;
                    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.2); } }
              .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop .shop-details-pic .moviePosterDiv--zerd .moviePosterDiv--item .pic-book {
                position: relative;
                border-radius: 1em;
                box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
                z-index: 1;
                height: auto;
                width: 100%;
                max-height: 230px;
                background: linear-gradient(70deg, #515151 30%, transparent 30%), linear-gradient(30deg, #363c43 60%, #2d2d2e 60%); }
                @media (max-width: 768px) {
                  .zdblock_shop_container .container-shop .movie_shop_infos .sidebar-shop .shop-details-pic .moviePosterDiv--zerd .moviePosterDiv--item .pic-book {
                    max-height: 140px;
                    width: 95px;
                    border-radius: 0.75em; } }
    .zdblock_shop_container .container-shop .main_level_shop {
      display: flex;
      flex-direction: column;
      position: relative;
      margin: 0 auto;
      padding: 3em 0;
      transition: padding-bottom 0.3s ease-in-out;
      box-sizing: border-box;
      width: calc(100% - 7rem);
      max-width: 65rem; }
      @media (max-width: 992px) {
        .zdblock_shop_container .container-shop .main_level_shop {
          width: 100%;
          padding: 1.5em 1em; } }
      @media (max-width: 768px) {
        .zdblock_shop_container .container-shop .main_level_shop {
          flex-direction: column;
          margin: 0 auto;
          height: 100%;
          padding: 0; } }
      .zdblock_shop_container .container-shop .main_level_shop .menu_title {
        margin: 2.25em auto 0.5em auto;
        box-shadow: none;
        color: var(--color-title-level, #d22b2b); }
        @media (max-width: 992px) {
          .zdblock_shop_container .container-shop .main_level_shop .menu_title {
            margin: 0;
            padding: 20px; } }
        @media (max-width: 768px) {
          .zdblock_shop_container .container-shop .main_level_shop .menu_title {
            margin: 0.5em auto;
            padding: 0.2rem;
            font-size: 1.25rem; } }
      .zdblock_shop_container .container-shop .main_level_shop .shop_attach {
        transition: all 0.3s ease-in-out; }
        @media (max-width: 992px) {
          .zdblock_shop_container .container-shop .main_level_shop .shop_attach {
            padding: 0.3em; } }
        .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          padding: 2rem;
          margin-bottom: 1.5rem;
          background-color: white;
          box-shadow: 0 0.265rem 1.25rem 0 rgba(0, 0, 0, 0.11);
          box-sizing: border-box;
          border-radius: 0.75rem;
          font-size: 1rem;
          font-weight: 600;
          position: relative;
          margin: auto;
          color: var(--color-level-and-price, #333);
          transition: padding-bottom 0.3s ease-in-out; }
          @media (max-width: 768px) {
            .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop {
              padding: 1rem 0.75rem;
              box-shadow: none;
              border-radius: 0;
              border: solid 1px rgba(171, 171, 171, 0.95); } }
          .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .priceProof {
            font-style: italic;
            position: relative;
            text-align: left;
            flex-grow: 1;
            margin-right: auto;
            padding: 12px;
            font-size: 0.8em;
            font-weight: 400;
            width: 100%;
            border-radius: 6px;
            margin-top: 0.75em;
            color: #856404;
            background-color: #ffedd2;
            border: 1px solid #ffeeba; }
          .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop {
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 65rem;
            margin: auto;
            box-sizing: border-box;
            padding: 0;
            margin: 0;
            justify-content: center; }
            .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .subscription-card-container {
              display: flex;
              align-items: center;
              gap: 12px;
              flex-wrap: wrap; }
              @media (max-width: 768px) {
                .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .subscription-card-container {
                  flex-direction: column;
                  align-items: flex-start; } }
            .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .subscription-card-form {
              display: flex;
              align-items: center;
              gap: 8px;
              margin-bottom: 12px; }
              @media (max-width: 768px) {
                .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .subscription-card-form {
                  width: 100%; } }
            .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .input-wrapper {
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              gap: 3px;
              width: 100%; }
            .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .input-card {
              width: 200px;
              padding: 12px;
              font-size: 14px;
              border: 1px solid #ddd;
              border-radius: 6px;
              outline: none;
              transition: 0.3s; }
              @media (max-width: 768px) {
                .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .input-card {
                  width: 100%; } }
              .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .input-card:focus {
                border-color: #d22b2b;
                box-shadow: 0 0 5px rgba(210, 43, 43, 0.3); }
            .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .button-check-card {
              padding: 12px 16px;
              font-size: 14px;
              background: #d22b2b;
              color: white;
              border: none;
              border-radius: 6px;
              cursor: pointer;
              transition: 0.3s;
              height: 42px;
              white-space: nowrap; }
              .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .button-check-card:hover {
                background: #b22222;
                transform: translateY(-2px); }
              .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .button-check-card:active {
                transform: translateY(0); }
              @media (max-width: 768px) {
                .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .button-check-card {
                  height: 42px;
                  flex-shrink: 0; } }
            .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .status-message {
              font-size: 14px;
              font-weight: 600;
              display: flex;
              align-items: center;
              gap: 6px;
              padding: 12px;
              border-radius: 6px;
              width: 100%;
              max-width: 350px;
              transition: all 0.3s ease-in-out;
              opacity: 1; }
              .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .status-message.alert-success {
                color: #19692c;
                background-color: #d4edda;
                border: 1px solid #71dd8a; }
              .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .status-message.alert-warning {
                color: #995b00;
                background-color: #fff3cd;
                border: 1px solid #ffcc80; }
              .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .status-message.alert-danger {
                color: #bd2130;
                background-color: #f8d7da;
                border: 1px solid #efa2a9; }
              .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .status-message.fade-out {
                opacity: 0;
                transform: translateY(-10px); }
            .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container {
              background-color: transparent;
              border-radius: 0.75rem;
              border-left: 4px solid var(--primary, #d22b2b);
              box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
              margin-bottom: 1rem;
              transition: all 0.3s ease;
              color: #363636; }
              .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
              @media (max-width: 768px) {
                .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container {
                  column-gap: 0.5rem;
                  margin-bottom: 1em;
                  padding: 0.75rem; } }
              @media (max-width: 768px) {
                .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .name-level {
                  flex-direction: column;
                  justify-content: center;
                  align-items: flex-start;
                  font-size: 0.95em; } }
              .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .name-level .level_name {
                text-transform: capitalize;
                white-space: nowrap;
                display: flex;
                align-items: center; }
                @media (max-width: 768px) {
                  .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .name-level .level_name {
                    white-space: normal; } }
                .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .name-level .level_name .level_name-detail {
                  margin-right: 10px; }
                .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .name-level .level_name .tooltip {
                  display: inline;
                  position: relative;
                  z-index: 10; }
                  .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .name-level .level_name .tooltip .tooltip-content {
                    position: absolute;
                    z-index: 9999;
                    width: 220px;
                    left: 50%;
                    margin: 0 0 10px -110px;
                    bottom: 130%;
                    text-align: left;
                    font-size: 0.85em;
                    line-height: 1.5;
                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
                    background: #2a3035;
                    color: #fff;
                    opacity: 0;
                    visibility: hidden;
                    border-radius: 6px;
                    padding: 12px;
                    pointer-events: none;
                    transform: scale(0.8);
                    transform-origin: bottom center;
                    transition: all 0.2s ease-in-out; }
                    @media (max-width: 768px) {
                      .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .name-level .level_name .tooltip .tooltip-content {
                        width: 180px;
                        margin: 0 0 10px -90px; } }
                    .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .name-level .level_name .tooltip .tooltip-content::after {
                      content: "";
                      top: 100%;
                      left: 50%;
                      border: solid transparent;
                      height: 0;
                      width: 0;
                      position: absolute;
                      pointer-events: none;
                      border-color: transparent;
                      border-top-color: #2a3035;
                      border-width: 8px;
                      margin-left: -8px; }
                  .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .name-level .level_name .tooltip:hover .tooltip-content {
                    opacity: 1;
                    visibility: visible;
                    transform: scale(1);
                    pointer-events: auto; }
                  .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .name-level .level_name .tooltip .tooltip-item {
                    cursor: pointer;
                    display: inline-flex;
                    align-items: center;
                    font-weight: 600;
                    padding: 0;
                    color: var(--primary, #d22b2b); }
                  .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .name-level .level_name .tooltip .tooltip-text {
                    font-size: 0.9em;
                    line-height: 1.5;
                    display: block;
                    color: #fff;
                    text-wrap: wrap;
                    font-weight: 400; }
              .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .name-level .line_span {
                flex-grow: 1;
                display: block;
                height: 1px;
                width: 100%;
                margin: 0 1.5em;
                background-color: #e0e0e0; }
                @media (max-width: 768px) {
                  .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .name-level .line_span {
                    display: none; } }
              .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .name-level .price_level {
                text-align: left;
                white-space: nowrap;
                font-weight: 600; }
                @media (max-width: 768px) {
                  .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .name-level .price_level {
                    font-size: 1em;
                    font-weight: 700;
                    line-height: 1.2;
                    margin-top: 4px; } }
              .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .name-level .total_pay {
                color: var(--color-text-total-pay, #d22b2b); }
              .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .nbr_plces {
                display: flex;
                align-items: center;
                column-gap: 4px;
                box-sizing: border-box;
                background: #fff;
                padding: 0.4em 0.8em;
                border-radius: 50px;
                margin: 0;
                overflow: hidden;
                min-width: 10em;
                border: solid 2px #e0e0e0;
                transition: all 0.3s ease; }
                .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .nbr_plces:hover {
                  border-color: #c7c7c7; }
                @media (max-width: 768px) {
                  .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .nbr_plces {
                    padding: 0.3em 0.1em;
                    min-width: 121px; } }
                .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .nbr_plces .btn_round {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  position: relative;
                  color: #fff;
                  background-color: #d22b2b !important;
                  border: none;
                  font-size: 1.6rem;
                  min-height: 40px;
                  max-width: 40px;
                  max-height: 40px;
                  min-width: 40px;
                  padding: 0;
                  line-height: 0;
                  cursor: pointer;
                  border-radius: 50%;
                  transition: all 0.2s ease-in-out; }
                  .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .nbr_plces .btn_round:hover {
                    transform: scale(1.05);
                    background-color: #b22222 !important; }
                  .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .nbr_plces .btn_round:active {
                    transform: scale(0.95); }
                  @media (max-width: 768px) {
                    .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .nbr_plces .btn_round {
                      min-height: 35px;
                      max-width: 35px;
                      max-height: 35px;
                      min-width: 35px; } }
                .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .nbr_plces .button_minus {
                  background-color: #363636; }
                  .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .nbr_plces .button_minus:hover {
                    background-color: #1d1d1d; }
                .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .nbr_plces .notActive {
                  background-color: #e0e0e0;
                  border-color: #e0e0e0;
                  pointer-events: none;
                  opacity: 0.7; }
                .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .nbr_plces .input-shop {
                  user-select: none;
                  pointer-events: none;
                  -moz-appearance: textfield;
                  appearance: textfield;
                  font-weight: 700;
                  box-sizing: border-box;
                  margin: auto;
                  border-radius: 0.4rem;
                  font-size: 1.2rem;
                  text-align: center;
                  border: none;
                  width: 35px;
                  height: 35px;
                  color: #000; }
                .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-level-container .nbr_plces .input-shop_zero {
                  color: rgba(28, 33, 41, 0.33); }
            .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-total-pay {
              background-color: var(--color-bg-confirm-commande, #d22b2b) !important;
              position: fixed;
              z-index: 100;
              bottom: 0;
              right: 0;
              width: 100%;
              border-radius: 0;
              transition: all 0.3s ease;
              justify-content: space-around;
              height: 90px;
              padding: 0;
              column-gap: 0;
              box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); }
              @media (max-width: 992px) {
                .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-total-pay {
                  width: 100%; } }
              @media (max-width: 768px) {
                .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-total-pay {
                  height: auto;
                  padding: 0.5em 0;
                  flex-direction: column;
                  row-gap: 0.5em;
                  font-size: 1.125em; } }
              .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-total-pay .total_pay {
                color: #000;
                font-weight: 700;
                font-size: 1em;
                white-space: nowrap;
                flex-grow: initial;
                margin-right: auto;
                height: 100%;
                background: white;
                position: relative;
                width: 23em;
                min-width: 23em;
                justify-content: center;
                padding: 0 1.5em; }
                @media (max-width: 992px) {
                  .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-total-pay .total_pay {
                    width: 100%;
                    min-width: 0;
                    justify-content: space-between;
                    padding: 0 1em; } }
                .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-total-pay .total_pay .price_level {
                  font-size: 1.8em; }
                  @media (max-width: 768px) {
                    .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-total-pay .total_pay .price_level {
                      font-size: 1.5em; } }
                .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-total-pay .total_pay .total_price_figures {
                  font-size: 1.5em; }
                  @media (max-width: 768px) {
                    .zdblock_shop_container .container-shop .main_level_shop .shop_attach .section-shop .ul-shop .line-total-pay .total_pay .total_price_figures {
                      font-size: 1em; } }

.button-pay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  color: #fff;
  background-color: #d22b2b !important;
  box-sizing: border-box;
  row-gap: 0.25em;
  font-weight: 700;
  line-height: 1;
  transition: all 0.3s ease;
  font-size: 1.8em;
  position: relative;
  border-color: #d22b2b !important; }
  .button-pay:active {
    transform: translateY(0); }
  @media (max-width: 768px) {
    .button-pay {
      font-size: 1.2em;
      height: 55px; } }

.button-pay-valid {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 8px;
  margin: 0.75rem 0;
  cursor: pointer;
  color: #fff;
  background-color: #d22b2b !important;
  box-sizing: border-box;
  font-weight: 700;
  line-height: 1;
  border: 2px solid #d22b2b !important;
  padding: 1em 2em;
  min-width: 165px;
  transition: all 0.3s ease;
  font-size: 1.25rem; }
  .button-pay-valid:hover {
    background-color: #b22222 !important;
    transform: translateY(-2px); }
  .button-pay-valid:active {
    transform: scale(0.98);
    background-color: #931e1e !important; }
  @media (max-width: 768px) {
    .button-pay-valid {
      width: 100%;
      margin-bottom: 0.75em;
      font-size: 1.1rem; } }

.goToConcessions {
  flex-grow: 1;
  width: 100%;
  height: 100%;
  position: relative; }

#stripe-form {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 95px auto;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 80px 4em 0 4em;
  box-sizing: border-box;
  border-radius: 14px; }
  @media (max-width: 768px) {
    #stripe-form {
      padding: 1.5em 1em;
      margin: 0.5em auto 5em auto; } }
  #stripe-form h2 {
    width: 60%;
    font-size: 2em;
    margin: auto;
    color: var(--color-pay-with-card, #000) !important;
    text-align: center; }
    @media (max-width: 768px) {
      #stripe-form h2 {
        width: 100%;
        font-size: 1.4em;
        margin-bottom: 1em; } }
  #stripe-form h3 {
    width: 100%;
    font-size: 2em;
    margin: auto;
    color: #000;
    text-align: center; }
    @media (max-width: 768px) {
      #stripe-form h3 {
        font-size: 1.5em; } }
  #stripe-form p {
    color: var(--color-secure-payment, #333);
    text-align: center; }

.flex_card_number_stripe {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  margin-top: 0.5em;
  width: 100%; }

.flex_title_stripe {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  margin-top: 0.5em;
  width: 30%; }
  @media (max-width: 768px) {
    .flex_title_stripe {
      width: 100%; } }

.stripe_grid {
  display: grid;
  width: 100%;
  grid-template-columns: 30px 1fr;
  grid-auto-flow: row;
  align-items: center;
  background: #fff;
  border: 1px solid #dddfe2;
  color: #1d2129;
  height: 50px;
  line-height: 16px;
  vertical-align: middle;
  font-size: 14px;
  padding: 0px 16px;
  border-radius: 6px;
  box-sizing: border-box;
  transition: all 0.3s ease; }
  .stripe_grid:focus-within {
    border-color: #d22b2b;
    box-shadow: 0 0 0 2px rgba(210, 43, 43, 0.2); }

.flex_date_cvc_zip {
  display: flex;
  justify-content: space-between;
  gap: 15px; }
  @media (max-width: 768px) {
    .flex_date_cvc_zip {
      flex-direction: column;
      gap: 10px; } }

.logo_credit_card {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 1em 0; }

.img_logo_cards {
  display: block;
  width: 40px;
  height: auto;
  margin-bottom: 0.5em;
  transition: all 0.3s ease; }
  .img_logo_cards:hover {
    transform: scale(1.1); }

.movieTitle_shop {
  font-size: 1.5em;
  line-height: 1.1;
  font-weight: 600;
  text-align: left;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  font-family: inherit;
  margin-bottom: 0.5em; }
  @media (max-width: 768px) {
    .movieTitle_shop {
      font-size: 1.2em;
      line-height: 1;
      text-shadow: 0px 0px 4px black; } }

.movie_version_shop {
  border: 1px solid rgba(255, 255, 255, 0.4);
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  margin-left: 10px;
  line-height: 1.5;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.9);
  padding: 0 0.5em;
  font-style: italic;
  box-sizing: border-box;
  font-size: 0.75em;
  font-weight: 600;
  display: inline-block; }

.shop-img-log {
  width: 23%;
  max-height: 2.5em;
  padding-bottom: 5px;
  box-sizing: border-box; }

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(210, 43, 43, 0.4); }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(210, 43, 43, 0); }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(210, 43, 43, 0); } }
.button-cart-animate:disabled {
  opacity: 0.5;
  cursor: not-allowed; }

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0); }
  to {
    opacity: 0;
    transform: translateY(-10px); } }
.animate-fadeIn {
  animation: fadeIn 0.3s ease-in-out forwards; }

.animate-fadeOut {
  animation: fadeOut 0.3s ease-in-out forwards; }

.cta-pulse {
  animation: pulse 2s infinite; }

body[data-theme-mode="dark"] .section-shop {
  background-color: rgba(40, 40, 50, 0.9);
  color: #fff; }
body[data-theme-mode="dark"] .input-shop {
  background-color: rgba(30, 30, 40, 0.8);
  color: #fff; }
body[data-theme-mode="dark"] .stripe_grid {
  background-color: rgba(40, 40, 50, 0.9);
  color: #fff;
  border-color: rgba(100, 100, 120, 0.5); }

/* ========== STYLES CINECHEQUE ========== */
/* Section CinéChèque dans le formulaire de paiement */
.cinecheque-section {
  margin-top: 20px;
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
  border-radius: 12px;
  border: 1px solid #dee2e6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden; }

.cinecheque-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0066cc 0%, #4d94ff 100%); }

.cinecheque-section h3 {
  margin-bottom: 15px;
  color: #2c3e50;
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center; }

.cinecheque-section h3 img {
  height: 35px;
  vertical-align: middle;
  margin-right: 12px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); }

/* Formulaire CinéChèque */
#cinechequeForm {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap; }

#cinechequeForm label {
  font-weight: 600;
  color: #495057;
  font-size: 0.95rem; }

#cinechequeCode {
  padding: 10px 14px;
  border: 2px solid #e1e5eb;
  border-radius: 8px;
  font-size: 16px;
  font-family: "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: white;
  transition: all 0.3s ease;
  min-width: 160px; }

#cinechequeCode:focus {
  outline: none;
  border-color: #0066cc;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1); }

#cinechequeCode::placeholder {
  color: #adb5bd;
  font-size: 14px;
  letter-spacing: normal; }

/* Bouton de vérification */
#cinechequeForm button {
  padding: 10px 20px;
  background: linear-gradient(135deg, #0066cc 0%, #004499 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 102, 204, 0.2); }

#cinechequeForm button:hover:not(:disabled) {
  background: linear-gradient(135deg, #0052a3 0%, #003670 100%);
  box-shadow: 0 4px 8px rgba(0, 102, 204, 0.3);
  transform: translateY(-1px); }

#cinechequeForm button:disabled {
  background: #ced4da;
  cursor: not-allowed;
  box-shadow: none; }

/* Messages CinéChèque */
#cinechequeMessage {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px; }

#cinechequeMessage::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.1rem; }

#cinechequeMessage[style*="d4edda"]::before {
  content: "\f058";
  /* Check circle */
  color: #28a745; }

#cinechequeMessage[style*="f8d7da"]::before {
  content: "\f057";
  /* Times circle */
  color: #dc3545; }

/* Détails CinéChèque */
#cinechequeDetails {
  margin-top: 16px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e9ecef; }

#cinechequeDetails p {
  color: #6c757d;
  margin: 8px 0;
  font-size: 0.95rem;
  line-height: 1.5; }

#cinechequeDetails strong {
  color: #495057;
  font-weight: 600; }

/* CinéChèque dans le panier */
.cart-item__wrp .cinecheque-code {
  color: #0066cc;
  font-weight: 600;
  display: block;
  margin-top: 4px;
  font-family: "Courier New", monospace;
  font-size: 0.9rem;
  letter-spacing: 0.5px; }

/* Badge CinéChèque dans le panier */
.cart-item__wrp .level_name:has(+ .cinecheque-code) {
  position: relative; }

.cart-item__wrp .level_name:has(+ .cinecheque-code)::after {
  content: "E-Cinéchèque";
  position: absolute;
  top: -20px;
  right: -10px;
  background: linear-gradient(135deg, #0066cc, #004499);
  color: white;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }

/* Animation pour l'ajout au panier */
@keyframes cinechequeAdded {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3); }
  100% {
    transform: scale(1); } }
.cinecheque-section.added {
  animation: cinechequeAdded 0.6s ease; }

/* Responsive */
@media (max-width: 768px) {
  #cinechequeForm {
    flex-direction: column;
    align-items: stretch; }

  #cinechequeForm label {
    margin-bottom: 8px; }

  #cinechequeCode {
    width: 100%;
    margin-bottom: 12px; }

  #cinechequeForm button {
    width: 100%; }

  .cinecheque-section h3 {
    font-size: 1.1rem; }

  .cinecheque-section h3 img {
    height: 28px; } }
/* Icône CinéChèque alternative si pas de logo */
.cinecheque-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  background: linear-gradient(135deg, #0066cc, #004499);
  color: white;
  border-radius: 8px;
  font-weight: bold;
  font-size: 18px;
  margin-right: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }

.cinecheque-icon::before {
  content: "C"; }

/* Tooltip pour aide */
.cinecheque-help {
  display: inline-block;
  margin-left: 8px;
  cursor: help; }

.cinecheque-help::after {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #6c757d;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold; }

.cinecheque-help:hover::before {
  content: "Les CinéChèques sont des coupons prépayés valables dans notre réseau de cinémas";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  white-space: nowrap;
  z-index: 1000;
  margin-bottom: 5px; }

/* État de chargement */
.cinecheque-loading {
  position: relative;
  overflow: hidden; }

.cinecheque-loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
  animation: shimmer 1.5s infinite; }

@keyframes shimmer {
  100% {
    left: 100%; } }
/*
document.addEventListener('DOMContentLoaded', function() {
  // Récupérer les variables CSS et les appliquer aux éléments
  const root = document.documentElement;
  const primaryColor = getComputedStyle(root).getPropertyValue('--primary').trim() || '#d22b2b';
  const secondaryColor = getComputedStyle(root).getPropertyValue('--secondary').trim() || '#b22222';
  
  // Appliquer aux éléments qui utilisent des classes SCSS
  document.querySelectorAll('.button-pay, .button-pay-valid, .btn_round, .line-total-pay').forEach(element => {
    element.style.backgroundColor = primaryColor;
    element.style.borderColor = primaryColor;
  });
  
  document.querySelectorAll('.rating_shop').forEach(element => {
    element.style.backgroundColor = primaryColor;
  });
  
  // Appliquer les dégradés
  const gradient = getComputedStyle(root).getPropertyValue('--gradient').trim();
  if (gradient) {
    document.querySelectorAll('.theme-gradient').forEach(element => {
      element.style.background = gradient;
    });
  }
});
*/
/* General CSS */
.container-ZerdcCine {
  width: 100%;
  transition: transform 0.5s; }

/* APP CONTAINER */
.overlay-cart {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 117;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: translate3d(100%, 0, 0);
  transition: opacity 0.4s, transform 0s 0.4s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  visibility: hidden; }

body.showCart .overlay-cart {
  opacity: 0;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.4s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transform: translate3d(0, 0, 0); }

/* CART */
.cart {
  width: 480px;
  background-color: #fff;
  color: #202124;
  position: fixed;
  top: 0;
  right: -1200px;
  bottom: 0;
  display: grid;
  grid-template-rows: 70px 1fr 70px;
  transition: 0.5s;
  z-index: 99999; }
  @media only screen and (max-width: 768px) {
    .cart {
      width: 100%; } }

.add-to-cart img {
  width: 32px;
  height: 32px;
  cursor: pointer; }

.empty-bascket {
  display: flex;
  flex-direction: column;
  margin: auto;
  align-items: center;
  position: relative;
  height: 100%;
  justify-content: center;
  font-size: 1.6em; }

/**** Animate Btn ****/
/**** End Animate Btn ****/
body.showCart .cart {
  right: 0; }

.add-movie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 4px; }

#detail-close {
  position: absolute;
  top: 10px;
  right: 10px;
  margin-left: 700px;
  width: 24px;
  height: 24px;
  font-weight: 400;
  color: #202124;
  appearance: none;
  border: none;
  cursor: pointer;
  font-size: 1.5em;
  text-decoration: none;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  outline: none; }

/* body.showCart #detail-close {
  right: 0;
} */
/* cart header */
.cart-header {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  font-size: 1.5em;
  background-color: #ebebe8; }

.cart-item__wrp {
  border-radius: 1rem;
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  margin: 0;
  padding: 0.5em;
  width: 100%;
  border-color: #e9ebed;
  background-color: #f4f6f8;
  overflow: hidden;
  color: #202124;
  margin-top: 0.5em; }

/* cart items */
.cart-items {
  max-height: calc(100vh - 329px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.3em; }

/* cart item */
.cart-item {
  display: flex;
  column-gap: 4px;
  position: relative;
  width: 100%;
  /* unit price */
  /* units */ }
  @media only screen and (max-width: 768px) {
    .cart-item {
      flex-direction: column; } }
  .cart-item div {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 4px;
    width: 100%; }
  .cart-item .cart-poster {
    width: 80px; }
    .cart-item .cart-poster img {
      width: 70px;
      max-height: 97px;
      height: auto;
      border-radius: 5px;
      border: 1px solid #c4c9ce;
      background: linear-gradient(70deg, #515151 30%, transparent 30%), linear-gradient(30deg, #363c43 60%, #2d2d2e 60%); }
  .cart-item .item-info {
    -webkit-align-self: flex-start;
    align-self: flex-start;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    margin: 0;
    padding: 0.175em 0.3em;
    font-size: 1.4rem;
    color: #262626;
    align-items: flex-start; }
  .cart-item .item-info .movie_title {
    margin-bottom: 3.75px;
    font-size: 12px;
    font-weight: 600; }
  .cart-item .item-info .level_name,
  .cart-item .item-info .time-cart {
    margin-bottom: 3.75px;
    font-size: 0.44em;
    text-transform: capitalize;
    font-style: italic;
    font-weight: 600; }
  .cart-item .item-info .time-cart {
    font-weight: 200; }
  .cart-item .button--remove {
    width: 50px;
    height: 50px;
    min-width: 50px;
    padding: 0.2em;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    border-color: #eceff1;
    border-radius: 40px;
    display: flex;
    border: none;
    background: none;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    align-items: center;
    justify-content: center;
    color: #fff;
    min-height: 50px;
    font-size: 1.5em; }
    .cart-item .button--remove .button--inverted {
      color: #2b3336; }
      .cart-item .button--remove .button--inverted::before {
        box-shadow: inset 0 0 0 35px #fff; }
      .cart-item .button--remove .button--inverted:hover::before {
        box-shadow: inset 0 0 0 2px #fff; }
    .cart-item .button--remove::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      z-index: -1;
      box-shadow: inset 0 0 0 35px #2b3336;
      -webkit-transform: scale3d(0.9, 0.9, 1);
      transform: scale3d(0.9, 0.9, 1);
      -webkit-transition: box-shadow 0.3s, -webkit-transform 0.3;
      transition: box-shadow 0.3s, transform 0.3s; }
    .cart-item .button--remove:hover {
      color: #d6180b; }
    .cart-item .button--remove:hover::before {
      box-shadow: inset 0 0 0 2px #d6180b;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1); }
  .cart-item .item-info img {
    width: 75px; }
  .cart-item .unit-price {
    flex: 1;
    font-size: 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #202124;
    margin-right: 4px; }
    @media only screen and (max-width: 768px) {
      .cart-item .unit-price {
        justify-content: flex-start; } }
  .cart-item .units {
    flex: 1; }
    @media only screen and (max-width: 768px) {
      .cart-item .units {
        justify-content: flex-end; } }
  .cart-item .units .number-products-cart {
    border-radius: 0.4rem;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    height: 25px;
    width: 25px;
    margin: 0 0.2em;
    text-align: center;
    font-size: 0.85em;
    color: #202124;
    border: 0.1rem solid #cfd8dc; }
  .cart-item .units .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Sana Sans Black, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1em;
    padding: 0.5rem 3rem;
    min-height: 5rem;
    border-radius: 2.5rem;
    text-align: center;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    margin: 0;
    font-size: 1em;
    border-radius: 2rem;
    min-height: 30px;
    max-width: 30px;
    max-height: 30px;
    min-width: 30px;
    padding: 0;
    cursor: pointer; }
  .cart-item .minus {
    background-color: #2b3336;
    border: 0.1em solid #2b3336;
    color: #fff; }
  .cart-item .plus {
    background-color: #d6180b;
    border: 0.1em solid #d6180b;
    color: #fff; }

h4 {
  color: #202124;
  margin: 0; }

/* item info */
/* cart footer */
.cart-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  padding-bottom: 1em; }
  .cart-footer div {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #202124;
    padding: 15px 0;
    border-top: thin solid #e4e7ec;
    font-size: 1em; }
  .cart-footer .return-to-level-list {
    width: 100%;
    background: #edf4fe;
    cursor: pointer; }
  .cart-footer .subtotal {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 1em;
    font-size: 1em; }
  .cart-footer .checkout {
    background-color: transparent;
    color: var(--color-bnt-validate-the-basket);
    cursor: pointer;
    width: 100%;
    max-width: 288px;
    height: 48px;
    margin: 0.5em auto 0.5em auto;
    border-radius: 50px;
    border: solid 1px currentColor; }
    @media screen and (max-width: 992px) {
      .cart-footer .checkout {
        max-width: 288px;
        height: 48px; } }
  .cart-footer .add-another-movie {
    background-color: var(--color-bg-btn-add-another-movie);
    color: #f8f8f8;
    cursor: pointer;
    max-width: 288px;
    height: 48px;
    width: 100%;
    margin: 0.5em auto;
    border-radius: 50px; }
    @media screen and (max-width: 992px) {
      .cart-footer .add-another-movie {
        max-width: 288px;
        height: 48px; } }

.button-cart-animate {
  --background: var(--bg-btn-add-to-card, #202124);
  --text: var(--color-btn-add-to-card, #fff);
  --cart: var(--color-btn-add-to-card, #fff);
  --tick: var(--background);
  position: relative;
  border: none;
  background: none;
  padding: 8px 28px;
  border-radius: 8px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  background: var(--bg-btn-add-to-card);
  color: var(--color-btn-add-to-card);
  border: 1px solid var(--color-border-btn-add-to-card);
  transform: scale(var(--scale, 1));
  transition: transform 0.4s cubic-bezier(0.36, 1.01, 0.32, 1.27);
  width: 121px;
  min-width: 121px; }
  .button-cart-animate:active {
    --scale: 0.95; }
  .button-cart-animate span {
    font-size: 14px;
    font-weight: 500;
    display: block;
    position: relative;
    padding-left: 24px;
    margin-left: -8px;
    line-height: 26px;
    transform: translateY(var(--span-y, 0));
    transition: transform 0.3s ease; }
    .button-cart-animate span:before, .button-cart-animate span:after {
      content: "";
      width: var(--w, 2px);
      height: var(--h, 14px);
      border-radius: 1px;
      position: absolute;
      left: var(--l, 8px);
      top: var(--t, 6px);
      background: currentColor;
      transform: scale(0.75) rotate(var(--icon-r, 0deg)) translateY(var(--icon-y, 0));
      transition: transform 0.35s ease 0.05s; }
    .button-cart-animate span:after {
      --w: 14px;
      --h: 2px;
      --l: 2px;
      --t: 12px; }
  .button-cart-animate .cart-animate {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -13px 0 0 -18px;
    transform-origin: 12px 23px;
    transform: translateX(-120px) rotate(-18deg); }
    .button-cart-animate .cart-animate:before, .button-cart-animate .cart-animate:after {
      content: "";
      position: absolute; }
    .button-cart-animate .cart-animate:before {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      box-shadow: inset 0 0 0 2px var(--cart);
      bottom: 0;
      left: 9px;
      filter: drop-shadow(11px 0 0 var(--cart)); }
    .button-cart-animate .cart-animate:after {
      width: 16px;
      height: 9px;
      background: var(--cart);
      left: 9px;
      bottom: 7px;
      transform-origin: 50% 100%;
      transform: perspective(4px) rotateX(-6deg) scaleY(var(--fill, 0));
      transition: transform 1.2s ease var(--fill-d); }
    .button-cart-animate .cart-animate svg {
      z-index: 1;
      width: 36px;
      height: 26px;
      display: block;
      position: relative;
      fill: none;
      stroke: var(--cart);
      stroke-width: 2px;
      stroke-linecap: round;
      stroke-linejoin: round; }
      .button-cart-animate .cart-animate svg polyline:last-child {
        stroke: var(--tick);
        stroke-dasharray: 10px;
        stroke-dashoffset: var(--offset, 10px);
        transition: stroke-dashoffset 0.4s ease var(--offset-d); }
  .button-cart-animate.loading {
    --scale: 0.95;
    --span-y: -32px;
    --icon-r: 180deg;
    --fill: 1;
    --fill-d: 0.8s;
    --offset: 0;
    --offset-d: 1s; }
    .button-cart-animate.loading .cart-animate {
      animation: cart 1.5s linear forwards 0.2s; }

@keyframes cart {
  12.5% {
    transform: translateX(-60px) rotate(-18deg); }
  25%,
  45%,
  55%,
  75% {
    transform: none; }
  50% {
    transform: scale(0.9); }
  44%,
  56% {
    transform-origin: 12px 23px; }
  45%,
  55% {
    transform-origin: 50% 50%; }
  87.5% {
    transform: translateX(70px) rotate(-18deg); }
  100% {
    transform: translateX(140px) rotate(-18deg); } }
.confiserie_zerd {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  position: relative;
  flex-direction: row-reverse;
  /* Style du bouton en chargement */
  /* Animation du spinner */ }
  .confiserie_zerd .container-zerdConcessionsMovies {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 65px;
    width: 360px;
    min-height: 100vh;
    overflow: hidden;
    background: #1c2129;
    flex-shrink: 0;
    box-sizing: border-box;
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    font-weight: 700;
    box-shadow: 0 0.3rem 1rem 0 rgba(0, 0, 0, 0.34);
    position: sticky;
    top: 0; }
    @media screen and (max-width: 992px) {
      .confiserie_zerd .container-zerdConcessionsMovies {
        width: 100%;
        min-width: 100%;
        min-height: auto;
        position: relative; } }
    .confiserie_zerd .container-zerdConcessionsMovies::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to top, #181818 10%, rgba(23, 23, 23, 0.98) 20%, rgba(23, 23, 23, 0.97) 25%, rgba(23, 23, 23, 0.95) 35%, rgba(23, 23, 23, 0.94) 40%, rgba(23, 23, 23, 0.92) 45%, rgba(23, 23, 23, 0.9) 50%, rgba(23, 23, 23, 0.87) 55%, rgba(23, 23, 23, 0.82) 60%, rgba(23, 23, 23, 0.75) 65%, rgba(23, 23, 23, 0.63) 70%, rgba(23, 23, 23, 0.45) 75%, rgba(23, 23, 23, 0.27) 80%, rgba(23, 23, 23, 0.15) 85%, rgba(23, 23, 23, 0.08) 90%, rgba(23, 23, 23, 0.03) 95%, rgba(23, 23, 23, 0) 101%); }
    .confiserie_zerd .container-zerdConcessionsMovies .accordion {
      background: transparent;
      color: #effeef;
      padding: 0 0.5em 0.5em 0.5em;
      z-index: 4;
      width: 100%; }
      @media only screen and (max-width: 768px) {
        .confiserie_zerd .container-zerdConcessionsMovies .accordion {
          padding: 0.5em 0.5em 0.5em 0.5em; } }
      .confiserie_zerd .container-zerdConcessionsMovies .accordion .accordion-panel h2 {
        position: relative;
        margin: 0 auto 0.5em auto;
        border: solid 1px;
        border-radius: 5px;
        cursor: pointer;
        padding: 0.5em 1em; }
        .confiserie_zerd .container-zerdConcessionsMovies .accordion .accordion-panel h2 .accordion-trigger {
          background: transparent;
          border: none;
          font: inherit;
          font-size: 0.8em;
          color: inherit; }
          .confiserie_zerd .container-zerdConcessionsMovies .accordion .accordion-panel h2 .accordion-trigger::before {
            font-family: "Font Awesome 6 Free";
            position: absolute;
            right: 15px;
            content: "\f077";
            transition: transform 350ms; }
          .confiserie_zerd .container-zerdConcessionsMovies .accordion .accordion-panel h2 .accordion-trigger[aria-expanded="true"]::before {
            transform: rotate(180deg); }
      .confiserie_zerd .container-zerdConcessionsMovies .accordion .accordion-panel .accordion-content {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 350ms;
        transition: grid-template-rows 350ms, -ms-grid-rows 350ms; }
        .confiserie_zerd .container-zerdConcessionsMovies .accordion .accordion-panel .accordion-content ::-webkit-scrollbar {
          width: 0px; }
        .confiserie_zerd .container-zerdConcessionsMovies .accordion .accordion-panel .accordion-content[aria-hidden="true"] {
          grid-template-rows: 1fr; }
        .confiserie_zerd .container-zerdConcessionsMovies .accordion .accordion-panel .accordion-content > div {
          overflow: hidden; }
        .confiserie_zerd .container-zerdConcessionsMovies .accordion .accordion-panel .accordion-content .details_movies_concession {
          overflow: hidden;
          max-height: calc(100vh - 400px);
          overflow-y: auto;
          overflow-x: hidden; }
          .confiserie_zerd .container-zerdConcessionsMovies .accordion .accordion-panel .accordion-content .details_movies_concession .cart-item {
            display: flex;
            justify-content: space-between;
            width: 100%; }
            @media only screen and (max-width: 768px) {
              .confiserie_zerd .container-zerdConcessionsMovies .accordion .accordion-panel .accordion-content .details_movies_concession .cart-item {
                flex-direction: row; } }
            .confiserie_zerd .container-zerdConcessionsMovies .accordion .accordion-panel .accordion-content .details_movies_concession .cart-item .item-info {
              align-items: flex-start; }
            .confiserie_zerd .container-zerdConcessionsMovies .accordion .accordion-panel .accordion-content .details_movies_concession .cart-item .unit-price {
              min-width: 65px;
              justify-content: end; }
            .confiserie_zerd .container-zerdConcessionsMovies .accordion .accordion-panel .accordion-content .details_movies_concession .cart-item .units .number-products-cart {
              font-size: 1em;
              border: none; }
            .confiserie_zerd .container-zerdConcessionsMovies .accordion .accordion-panel .accordion-content .details_movies_concession .cart-item .cart-poster {
              max-width: 90px; }
              .confiserie_zerd .container-zerdConcessionsMovies .accordion .accordion-panel .accordion-content .details_movies_concession .cart-item .cart-poster img {
                width: 65px; }
    .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions {
      width: 100%;
      transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
      padding: 0 0.5em 0.5em 0.5em;
      z-index: 3; }
      @media only screen and (min-width: 769px) and (max-width: 1024px) {
        .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions {
          width: 100%; } }
      @media screen and (max-width: 768px) {
        .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions {
          width: 100%;
          min-width: 100%; } }
      .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        background: transparent;
        flex-shrink: 0;
        box-sizing: border-box;
        background-position: top;
        background-size: cover;
        background-repeat: no-repeat;
        font-weight: 700;
        box-shadow: 0 0.3rem 1rem 0 rgba(0, 0, 0, 0.34); }
        @media only screen and (min-width: 769px) and (max-width: 1024px) {
          .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop {
            background-size: auto 70%;
            justify-content: center; } }
        .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          row-gap: 3em;
          align-items: center;
          position: relative;
          text-align: center;
          width: 100%; }
          @media only screen and (min-width: 769px) and (max-width: 1024px) {
            .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic {
              margin-top: 95px; } }
          @media only screen and (max-width: 768px) {
            .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic {
              margin-top: 0; } }
          .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic .details-shop-places {
            display: flex;
            flex-direction: row;
            justify-content: center;
            flex-wrap: wrap;
            flex-grow: 1;
            font-size: 0.875em;
            line-height: 1.5em;
            padding: 0;
            z-index: 1;
            margin: 0 0.3rem;
            box-sizing: border-box;
            font-weight: 400;
            align-items: center;
            background-color: #2f2f2f;
            order: 0;
            color: white;
            border-radius: 0.25em;
            box-shadow: none;
            border-radius: 17px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            box-shadow: rgba(0, 0, 0, 0.75) 0px 3px 10px;
            overflow: hidden; }
            @media screen and (max-width: 768px) {
              .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic .details-shop-places {
                background-color: transparent;
                border: 0.125em solid white; } }
            .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic .details-shop-places > li {
              margin-bottom: 10px;
              padding: 0.25em 0; }
            .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic .details-shop-places .shop_date {
              display: flex;
              flex-direction: row;
              align-items: center;
              width: 100%;
              color: #d22b2b;
              z-index: 2;
              column-gap: 4px;
              justify-content: center;
              background-color: #2f2f2f;
              -webkit-box-pack: justify;
              padding: 1em;
              position: relative; }
              .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic .details-shop-places .shop_date:after {
                content: "";
                position: absolute;
                width: 20%;
                height: 5px;
                background: #000;
                top: 90%;
                margin: auto;
                pointer-events: none; }
              @media screen and (max-width: 768px) {
                .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic .details-shop-places .shop_date {
                  justify-content: center;
                  background-color: rgba(255, 253, 253, 0.7);
                  padding: 11px;
                  color: #202124; }
                  .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic .details-shop-places .shop_date:after {
                    width: 0%;
                    height: 0px;
                    background: transparent; } }
            .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic .details-shop-places .shop_name_cine {
              display: flex;
              flex-direction: column;
              align-items: center;
              width: 100%;
              z-index: 2;
              column-gap: 4px;
              font-size: 1.5em;
              line-height: 1.5em;
              font-weight: 400;
              justify-content: center; }
              .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic .details-shop-places .shop_name_cine img {
                height: auto;
                left: 40px;
                /* max-height: 67px; */
                top: 15px;
                width: 80px; }
            .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic .details-shop-places .shop_showtimes {
              display: flex;
              z-index: 2;
              width: 100%;
              font-size: 1.3em;
              justify-content: center;
              margin-bottom: 1em; }
            .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic .details-shop-places .shop_hours {
              display: flex;
              flex-direction: row;
              align-items: center;
              column-gap: 7px;
              z-index: 2;
              box-sizing: border-box;
              overflow: hidden;
              position: relative;
              font-size: 1.3em; }
          .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic .sidebarShop {
            order: 1;
            z-index: 3;
            position: relative;
            width: 100%;
            justify-content: center;
            align-items: center;
            display: flex;
            flex-direction: column;
            padding: 0.5em;
            background: var(--bg-color-btn-total);
            border-radius: 1em; }
            .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic .sidebarShop .detailsTickets,
            .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic .sidebarShop .detailsConcessions {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              column-gap: 1rem;
              line-height: 1.5rem;
              font-size: 1.125rem;
              position: relative;
              width: 100%;
              padding: 0em;
              box-sizing: border-box;
              letter-spacing: 0.25px;
              font-weight: 700; }
            .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic .sidebarShop .detailsTickets .totalTickets {
              margin-left: auto;
              flex-grow: 1;
              text-align: right;
              min-width: 100px;
              display: flex;
              align-items: center;
              justify-content: end; }
            .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic .sidebarShop .detailsTickets .TitleTicketssDetails {
              webkit-align-self: flex-start;
              align-self: flex-start;
              -webkit-flex: 1 1 auto;
              flex: 1 1 auto;
              width: 100%;
              display: -webkit-flex;
              display: flex;
              -webkit-flex-direction: column;
              flex-direction: column;
              margin: 0;
              padding: 0.175em 0.3em;
              align-items: flex-start; }
            .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic .sidebarShop .detailsConcessions .totalConcessions {
              margin-left: auto;
              flex-grow: 1;
              text-align: right;
              min-width: 100px;
              display: flex;
              align-items: center;
              justify-content: end; }
            .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic .sidebarShop .detailsConcessions .TitleConcessionsDetails {
              align-self: flex-start;
              -webkit-flex: 1 1 auto;
              flex: 1 1 auto;
              width: 100%;
              display: -webkit-flex;
              display: flex;
              -webkit-flex-direction: column;
              flex-direction: column;
              margin: 0;
              padding: 0.175em 0.3em;
              align-items: flex-start; }
          .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic .moviePosterDiv--zerd {
            width: 100%;
            height: 290px;
            margin: 15px 0;
            order: -1; }
            .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic .moviePosterDiv--zerd .pic-book {
              position: relative;
              border-radius: 0.25rem;
              box-shadow: 0 0.5rem 1rem rgba(245, 238, 238, 0.2);
              z-index: 1;
              height: 100%;
              width: auto; }
              @media screen and (max-width: 768px) {
                .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop .shop-details-pic .moviePosterDiv--zerd .pic-book {
                  display: none; } }
        .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image: linear-gradient(-180deg, rgba(28, 33, 41, 0.5), #1c2129 50%);
          background-image: linear-gradient(-180deg, rgba(28, 33, 41, 0.3), #181818 80%); }
        @media screen and (max-width: 768px) {
          .confiserie_zerd .container-zerdConcessionsMovies .sideBareCocessions .sidebar-shop {
            justify-content: end;
            width: 100%;
            flex-direction: column-reverse;
            min-height: 0;
            background-size: 100%;
            max-height: 352px;
            height: 100%;
            background-position: center; } }
  @media screen and (max-width: 992px) {
    .confiserie_zerd {
      flex-direction: column;
      top: 55px; } }
  .confiserie_zerd .button-loading {
    position: relative;
    pointer-events: none;
    /* Désactive le clic pendant le chargement */
    opacity: 0.7;
    /* Assombrit le bouton */ }
    .confiserie_zerd .button-loading::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      width: 1.5em;
      height: 1.5em;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-top: 3px solid #fff;
      /* Couleur du spinner */
      border-radius: 50%;
      transform: translate(-50%, -50%);
      animation: spin 1s linear infinite; }
@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg); }
  to {
    transform: translate(-50%, -50%) rotate(360deg); } }
  .confiserie_zerd .container_main_footer_conf {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100%;
    justify-content: flex-end; }
    .confiserie_zerd .container_main_footer_conf .conf-list-options-mobile {
      display: none;
      align-items: center;
      justify-content: space-between;
      text-align: right;
      padding-bottom: 10px;
      margin: 2.25em auto 0.5em auto;
      width: 100%; }
      @media screen and (max-width: 959px) {
        .confiserie_zerd .container_main_footer_conf .conf-list-options-mobile {
          display: flex;
          margin: 1em auto 0.5em auto; } }
      .confiserie_zerd .container_main_footer_conf .conf-list-options-mobile h2 {
        margin: auto;
        font-size: 3em;
        border-bottom: 1px solid grey;
        margin-left: auto; }
        @media screen and (max-width: 768px) {
          .confiserie_zerd .container_main_footer_conf .conf-list-options-mobile h2 {
            font-size: 1.5em; } }
    .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd {
      display: flex;
      justify-content: flex-end;
      position: relative;
      width: 100%;
      height: 100%; }
      @media screen and (max-width: 959px) {
        .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd {
          flex-direction: column; } }
      .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .menu_confiserie {
        position: relative;
        z-index: 2;
        height: 100%;
        padding: 20px;
        overflow: hidden;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        background-position: top;
        background-size: cover;
        background-repeat: no-repeat;
        /* background-image: url(../images/cinema.jpg); */
        height: auto;
        max-height: 600px;
        align-items: center;
        justify-content: flex-start;
        margin: 0 0 0 0.5em;
        top: 100px;
        border-right: 1px solid rgba(255, 255, 255, 0.16); }
        @media screen and (max-width: 959px) {
          .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .menu_confiserie {
            width: 100%;
            margin: 0;
            border-right: none;
            max-height: none;
            top: 0;
            position: sticky;
            z-index: 2;
            top: 63px;
            min-width: 100vw;
            /* margin: 0 0 0 -24px; */
            list-style-type: none;
            padding: 0;
            height: 100%;
            will-change: transform;
            white-space: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            -ms-overflow-style: -ms-autohiding-scrollbar;
            touch-action: pan-x;
            scrollbar-width: none;
            padding-top: 0;
            margin-top: 0;
            -ms-overflow-style: none;
            /* IE and Edge */
            scrollbar-width: none;
            /* Firefox */ }
            .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .menu_confiserie::-webkit-scrollbar-track {
              -webkit-box-shadow: none;
              background-color: #686868; }
            .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .menu_confiserie::-webkit-scrollbar {
              display: none; }
            .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .menu_confiserie::-webkit-scrollbar-thumb {
              background-color: #d46464; } }
        @media screen and (max-width: 959px) {
          .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .menu_confiserie nav {
            width: 100%; } }
        .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .menu_confiserie nav .link-list-conf {
          display: flex;
          flex-direction: column; }
          @media screen and (max-width: 959px) {
            .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .menu_confiserie nav .link-list-conf {
              flex-direction: row;
              flex-wrap: nowrap;
              height: 60px;
              align-items: center; } }
          .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .menu_confiserie nav .link-list-conf a {
            display: block;
            text-align: center;
            padding: 0.8em;
            color: #ffffff;
            cursor: pointer;
            font-size: 1.2em;
            border-bottom: 1px solid rgba(243, 243, 243, 0.16); }
            @media screen and (max-width: 959px) {
              .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .menu_confiserie nav .link-list-conf a {
                padding: 20px 10px;
                font-size: 1em;
                border: none;
                border-right: solid 1px #acacac;
                background-color: #faf9f7;
                font-weight: 600;
                color: #202124; }
                .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .menu_confiserie nav .link-list-conf a:last-child {
                  flex-grow: 1;
                  border-right: none; } }
          .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .menu_confiserie nav .link-list-conf a:hover, .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .menu_confiserie nav .link-list-conf a:visited {
            color: #ffffffa1;
            background: rgba(255, 255, 255, 0.1); }
            @media screen and (max-width: 959px) {
              .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .menu_confiserie nav .link-list-conf a:hover, .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .menu_confiserie nav .link-list-conf a:visited {
                color: #fff;
                background: #000; } }
      .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        position: relative;
        flex: 0 0 75%;
        width: 75%;
        margin: 0; }
        @media screen and (max-width: 959px) {
          .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie {
            width: 100%; } }
        .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie > header {
          width: 100%;
          flex-grow: 1;
          margin: 0 auto;
          padding: 0;
          padding: 2.875em 1.875em 1.875em; }
          .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie > header h1 {
            font-size: 2.125em;
            line-height: 1.3;
            margin: 0 0 0.6em 0;
            float: left;
            font-weight: 400; }
          .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie > header > span {
            display: block;
            position: relative;
            z-index: 9999;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5em;
            padding: 0 0 0.6em 0.1em; }
            .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie > header > span:after {
              width: 30px;
              height: 30px;
              left: -12px;
              font-size: 50%;
              top: -8px;
              font-size: 75%;
              position: relative; }
            .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie > header > span:hover:before {
              content: attr(data-content);
              text-transform: none;
              text-indent: 0;
              letter-spacing: 0;
              font-weight: 300;
              font-size: 110%;
              padding: 0.8em 1em;
              line-height: 1.2;
              text-align: left;
              left: auto;
              margin-left: 4px;
              position: absolute;
              color: #fff;
              background: #47a3da; }
          .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie > header nav {
            float: right;
            text-align: center; }
            .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie > header nav a {
              display: inline-block;
              position: relative;
              text-align: left;
              width: 2.5em;
              height: 2.5em;
              background: #fff;
              border-radius: 50%;
              margin: 0 0.1em;
              border: 4px solid #47a3da; }
              .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie > header nav a > span {
                display: none; }
              .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie > header nav a:hover {
                background: #47a3da; }
              .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie > header nav a:hover:before {
                content: attr(data-info);
                color: #47a3da;
                position: absolute;
                width: 600%;
                top: 120%;
                text-align: right;
                right: 0;
                pointer-events: none; }
              .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie > header nav a:hover:after {
                color: #fff; }
        .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie {
          display: flex; }
          .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie {
            display: flex;
            width: 100%;
            position: relative; }
            .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher {
              display: flex;
              position: relative;
              flex-direction: column;
              padding: 20px;
              /* border: 3px solid #47a3da; */
              flex-grow: 1;
              width: 100%;
              margin: 100px 0 0 0; }
              @media screen and (max-width: 959px) {
                .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher {
                  margin: 1em auto;
                  bottom: 45px; } }
              .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher #AllConcessions h2 {
                font-weight: 500;
                padding: 1rem 2rem; }
                @media screen and (max-width: 768px) {
                  .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher #AllConcessions h2 {
                    margin: 0; } }
              .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher .scroll_conf {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-content: stretch;
                align-items: flex-start;
                margin: 0 auto;
                text-align: center;
                overflow: hidden;
                user-select: none;
                list-style: none;
                transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
                position: relative;
                width: 100%;
                padding: 0;
                max-height: 600px;
                transition: all 0.3s; }
                @media screen and (max-width: 768px) {
                  .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher .scroll_conf {
                    max-height: 100%;
                    overflow: visible; } }
                .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher .scroll_conf .containerPrduct {
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;
                  position: relative;
                  width: 100%;
                  max-width: 945px;
                  margin: 0 auto; }
                .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher .scroll_conf:hover {
                  overflow: auto; }
                .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher .scroll_conf::-webkit-scrollbar-track {
                  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                  background-color: #686868; }
                .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher .scroll_conf::-webkit-scrollbar {
                  width: 2px;
                  background-color: #686868; }
                .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher .scroll_conf::-webkit-scrollbar-thumb {
                  background-color: #f5f5f5; }
              .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher ul {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                flex-wrap: wrap;
                gap: 1em;
                transition: all 0.3s;
                position: relative;
                width: 100%; }
                .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher ul:after {
                  content: "";
                  flex: auto; }
                  @media screen and (max-width: 959px) {
                    .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher ul:after {
                      content: none; } }
                .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher ul li {
                  display: flex;
                  align-items: center;
                  position: relative;
                  vertical-align: top;
                  padding: 1.5em 1.5em 2em;
                  background: #202124;
                  border-radius: 5px;
                  transition: opacity 0.5s 0.1s; }
                  .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher ul li:hover .conf-image {
                    -webkit-animation: swing 0.6s forwards;
                    animation: swing 0.6s forwards; }
              .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher.conf-view-grid ul li .picture_conf .conf-image {
                aspect-ratio: auto 110 / 110;
                width: auto;
                position: relative; }
                .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher.conf-view-grid ul li .picture_conf .conf-image::before {
                  background-color: #9c9c9c;
                  display: block;
                  height: 100%;
                  border-radius: 4px;
                  content: " ";
                  position: absolute;
                  width: 100%;
                  background-image: url(../images/no-camera.svg);
                  background-position: center;
                  background-size: 50%;
                  background-repeat: no-repeat; }
              .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher.conf-view-grid ul li > a {
                margin: 0; }
                @media screen and (max-width: 768px) {
                  .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher.conf-view-grid ul li > a {
                    width: 100%;
                    padding: 5px 10px;
                    box-sizing: border-box; } }
              .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher.conf-view-grid .conf-title {
                font-size: 1em;
                margin: 1em auto;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                text-transform: capitalize; }
                @media screen and (max-width: 768px) {
                  .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher.conf-view-grid .conf-title {
                    font-size: 0.85em; } }
              .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher.conf-view-grid .conf-details {
                display: none;
                max-width: 300px;
                min-height: 70px;
                margin: 0 auto; }
              .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher.conf-view-grid .conf-price {
                margin: 10px 0;
                font-size: 1em; }
              .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher.conf-view-list .conf-details {
                width: 40%;
                padding: 0 15px;
                overflow: hidden;
                white-space: normal;
                display: none; }
              .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher.conf-view-list li {
                padding: 10px 0;
                white-space: nowrap; }
              .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher.conf-view-list ul {
                justify-content: flex-start;
                padding: 0;
                width: 100%; }
                .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher.conf-view-list ul li {
                  width: 100%;
                  flex: 0 1 100%;
                  justify-content: space-between; }
                  .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher.conf-view-list ul li > * {
                    margin-right: 0.5rem;
                    text-transform: capitalize;
                    padding: 5px;
                    flex: 0 1 33%;
                    text-align: center;
                    max-width: 9em; }
              .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher .conf-list-options {
                display: flex;
                align-items: center;
                justify-content: space-between;
                text-align: right;
                padding-bottom: 10px;
                margin: 2.25em auto 0.5em auto;
                width: 100%; }
                @media screen and (max-width: 959px) {
                  .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher .conf-list-options {
                    margin: 0.5em auto 0.5em auto;
                    display: none; } }
                .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher .conf-list-options h2 {
                  margin: auto;
                  font-size: 3em;
                  border-bottom: 1px solid grey;
                  margin-left: auto; }
                  @media screen and (max-width: 768px) {
                    .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher .conf-list-options h2 {
                      font-size: 1.5em; } }
                .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher .conf-list-options a {
                  display: inline-block;
                  width: 40px;
                  height: 40px;
                  overflow: hidden;
                  white-space: nowrap;
                  color: #d0d0d0;
                  margin: 2px;
                  cursor: pointer; }
                  .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher .conf-list-options a:hover, .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher .conf-list-options a.conf-selected {
                    color: #000; }
                  .confiserie_zerd .container_main_footer_conf .main_menu_conf_zerd .container_confiserie .main_confiserie .content_confiserie .conf-switcher .conf-list-options a:before {
                    width: 40px;
                    height: 40px;
                    line-height: 40px;
                    font-size: 30px;
                    text-align: center;
                    display: inline-block; }

.custom-alert {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 400px;
  margin: auto; }
  .custom-alert h4 {
    font-size: 1.2em;
    font-weight: bold; }
  .custom-alert hr {
    border-top: 1px solid #f5c6cb; }
  .custom-alert p {
    margin: 5px 0;
    font-size: 14px; }
  .custom-alert .text-success {
    color: #155724;
    font-weight: bold; }

.swal2-title {
  color: #f60 !important; }

.container_zerd_conf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
  width: 100%; }

/* clearfix_confiserie Zoubir DJABRI */
.clearfix_confiserie:before,
.clearfix_confiserie:after {
  content: " ";
  display: table; }

.clearfix_confiserie:after {
  clear: both; }

.main_confiserie > header {
  width: 100%;
  flex-grow: 1;
  margin: 0 auto;
  padding: 0; }

/* .bp-icon:after {
  font-family: "bpicons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-align: center;
  color: #47a3da;
  -webkit-font-smoothing: antialiased;
}

.container_confiserie > header nav .bp-icon:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 2;
  text-indent: 0;
} */
.bp-icon-next:after {
  content: "\e000"; }

.bp-icon-drop:after {
  content: "\e001"; }

.bp-icon-archive:after {
  content: "\e002"; }

.bp-icon-about:after {
  content: "\e003"; }

.bp-icon-prev:after {
  content: "\e004"; }

/*Payzen injecte ses messages d'erreur dans un élément avec la classe kr-form-error.  masquer les messages en ajoutant une règle CSS.*/
.kr-form-error {
  display: none !important; }

.conf-switcher ul:hover {
  /* overflow-y: auto; */ }

/*
 *  STYLE Scroll Bar
 */
/*************/
.picture_conf {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  justify-content: center; }

.conf-image {
  display: block;
  margin: 0 auto;
  width: auto;
  transform-origin: 50% 100%;
  height: 70px; }

.conf-image img {
  display: inline-block;
  height: 100%;
  width: auto;
  border: none; }

.conf-title {
  margin: 0;
  padding: 0; }

.conf-price {
  color: #ffc240; }

.conf-add {
  color: #fff;
  background: rgba(67, 67, 67, 0.3);
  padding: 10px 20px;
  border-radius: 2px;
  display: inline-block;
  transition: background 0.2s;
  overflow: hidden;
  max-width: 12em; }

.conf-add:hover {
  color: #fff;
  /* background: #02639d; */ }

.conf-add:before {
  margin-right: 5px; }

/*Flaticon icon Style*/
.conf-icon-flaticon:before {
  font-family: "fontawesome";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased; }

.icon-menu-conf {
  font-size: 1.3em; }

.conf--grid:before {
  content: "\f58d"; }

.conf--miniGrid:before {
  content: "\f1d8"; }

.conf--list:before {
  content: "\f03a"; }

/* .conf-add:before {
  content: "\f055";
} */
/* Individual view mode styles */
/* Conf-view-list */
.conf-view-list ul li
.conf-view-miniGrid ul {
  justify-content: center;
  display: grid;
  grid-template-columns: repeat(var(--min-grid-columns), 1fr);
  grid-gap: 0.5em;
  /* display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13em, 1fr));

  grid-gap: 1em 1em;
  grid-auto-flow: row dense;
  justify-items: center;
  margin-top: 2em;
  overflow: hidden; */ }

.conf-view-miniGrid ul li {
  /* width: 33%;
  text-align: center;
  padding: 25px;
  margin: 20px 0 0;
  display: inline-block;
  min-height: 420px;
  vertical-align: top; */
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 12em;
  padding: 0.5em 0.5em 1em; }

.conf-view-miniGrid .conf-title {
  font-size: 1em; }

.conf-view-miniGrid .conf-details {
  max-width: 300px;
  min-height: 70px;
  margin: 0 auto;
  font-size: 0.8em;
  text-align: center;
  display: none; }

.conf-view-miniGrid .conf-price {
  margin: 10px 0;
  font-size: 1em; }

.conf-view-miniGrid .conf-image {
  height: 90px;
  margin: 0; }

.conf-view-miniGrid .conf-image img {
  max-height: 120px; }

/* List view */
@-webkit-keyframes swing {
  25% {
    -webkit-transform: rotate3d(0, 0, 1, 6deg);
    transform: rotate3d(0, 0, 1, 6deg); }
  50% {
    -webkit-transform: rotate3d(0, 0, 1, -4deg);
    transform: rotate3d(0, 0, 1, -4deg); }
  75% {
    -webkit-transform: rotate3d(0, 0, 1, 2deg);
    transform: rotate3d(0, 0, 1, 2deg); }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }
@keyframes swing {
  25% {
    -webkit-transform: rotate3d(0, 0, 1, 6deg);
    transform: rotate3d(0, 0, 1, 6deg); }
  50% {
    -webkit-transform: rotate3d(0, 0, 1, -4deg);
    transform: rotate3d(0, 0, 1, -4deg); }
  75% {
    -webkit-transform: rotate3d(0, 0, 1, 2deg);
    transform: rotate3d(0, 0, 1, 2deg); }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }
/* .conf-view-list .conf-image,
.conf-view-list .conf-title,
.conf-view-list .conf-details,
.conf-view-list .conf-price,
.conf-view-list .conf-add {
  display: inline-block;
  vertical-align: middle;
}

.conf-view-list .conf-image {
  width: 10%;
}

.conf-view-list .conf-title {
  font-size: 1.3em;
  padding: 0 10px;
  margin-left: 0.5rem;
  flex: 1 1 auto;
}

.conf-view-list .conf-price {
  font-size: 1.3em;
  width: 10%;
} */
/* .conf-view-list .conf-add {
  margin: 0 0.5rem 0 0;
} */
/* Btn increment */
.number-conf {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 4px; }

.btn-conf-round {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Sana Sans Black, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fff;
  background-color: #000;
  border: 0.1rem solid #000;
  font-size: 1.6rem;
  padding: 0.5rem 3rem;
  min-height: 5rem;
  border-radius: 2.5rem;
  text-align: center;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  margin: 0;
  min-height: 40px;
  border-radius: 2rem;
  max-width: 40px;
  max-height: 40px;
  min-width: 40px;
  padding: 0;
  line-height: 0;
  cursor: pointer; }

.btn--dark {
  color: #fff;
  background-color: #2b3336;
  border: 0.1rem solid #2b3336;
  background-color: #49595f;
  border: 0.1rem solid #49595f; }

.btn-red {
  transform: translateX(-43px);
  transition: transform 0.2s;
  font-size: 1.5em; }

/* .btn-conf-round:not(.active) {
  background-color: transparent;
  border: 2px solid rgba(28, 33, 41, 0.3);
  box-shadow: none;
  pointer-events: none;
  cursor: not-allowed;
} */
.btn--dark,
.input-qte-conf {
  transition: transform 0.3s, opacity 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
  transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
  transition: transform 0.3s, opacity 0.3s; }

.input-qte-conf {
  border-radius: 0.4rem;
  opacity: 0;
  font-size: 1.2rem;
  text-align: center;
  border: 0.1rem solid #cfd8dc;
  width: 35px;
  height: 35px;
  pointer-events: none; }

/* remove arrows/spinners from input type number */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield; }

.container_btn_confirmation {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  right: 0;
  overflow: hidden;
  height: 90px;
  bottom: 0;
  z-index: 100;
  width: 100%; }
  @media screen and (max-width: 959px) {
    .container_btn_confirmation {
      flex-direction: column-reverse; } }

.btn_confirmation_zerd {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  font-weight: 600;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: auto;
  color: #fff;
  text-decoration: none;
  background-color: #000;
  text-decoration: none;
  cursor: pointer;
  text-transform: capitalize;
  column-gap: 0.5em; }
  @media screen and (max-width: 768px) {
    .btn_confirmation_zerd {
      font-size: 1.5em; } }

.btn_confirmation_zerd:hover {
  background-color: #999;
  color: #cfd8dc; }

.TotalConcessionMovies {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  font-size: 1.125em;
  font-weight: 600;
  box-sizing: border-box;
  min-width: 360px;
  width: 360px;
  height: 100%;
  margin-left: auto;
  color: #202124;
  text-decoration: none;
  background-color: #f7f5f2;
  text-decoration: none;
  padding: 0 1em;
  font-weight: 700; }
  @media screen and (max-width: 959px) {
    .TotalConcessionMovies {
      width: 100%;
      border-top: solid 1px #eee;
      background-color: #fff;
      min-width: 0; } }
  .TotalConcessionMovies #totalPriceForAll {
    font-weight: 700;
    font-size: 1em; }

@media screen and (max-width: 66.7em) {
  .conf-view-list .conf-details {
    width: 30%; } }
@media screen and (max-width: 57em) {
  .conf-view-grid ul li {
    width: 49%; } }
@media screen and (max-width: 47.375em) {
  .conf-view-list .conf-image {
    width: 20%; }

  .conf-view-list .conf-title {
    width: auto; }

  .conf-view-list .conf-details {
    display: none;
    width: 100%;
    margin: 10px 0; }

  .conf-view-list .conf-add {
    margin: 10px; } }
@media screen and (max-width: 40.125em) {
  .conf-view-grid ul li {
    width: 100%; } }
@media screen and (max-width: 55em) {
  .container_confiserie > header h1,
  .container_confiserie > header nav {
    float: none; }

  .container_confiserie > header > span,
  .container_confiserie > header h1 {
    text-align: center; }

  .container_confiserie > header nav {
    margin: 0 auto; }

  .container_confiserie > header > span {
    text-indent: 30px; } }
@media screen and (max-width: 1622px) {
  body,
  html {
    --grid-columns: 3;
    --min-grid-columns: 4; } }
@media screen and (max-width: 1370px) {
  body,
  html {
    --min-grid-columns: 3;
    --grid-columns: 2; } }
@media screen and (max-width: 1130px) {
  body,
  html {
    --grid-columns: 1; }

  .conf-view-grid ul li {
    margin: 1em auto; } }
/*====== OPTIONS SELECTION ======*/
@font-face {
  font-family: "fontawesome";
  src: url("../fonts/fontawesome/fontawesome.eot");
  src: url("../fonts/fontawesome/fontawesome.eot?#iefix") format("embedded-opentype"), url("../fonts/fontawesome/fontawesome.woff") format("woff"), url("../fonts/fontawesome/fontawesome.ttf") format("truetype"), url("../fonts/fontawesome/fontawesome.svg#fontawesome") format("svg");
  font-weight: normal;
  font-style: normal; }
/* Main container */
.cbp-vm-switcher {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 3px solid #47a3da;
  flex-grow: 1; }

/* options/select wrapper with switch anchors */
.cbp-vm-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: right;
  padding-bottom: 10px;
  border-bottom: 3px solid #47a3da; }

.cbp-vm-options h2 {
  margin: auto; }

.cbp-vm-options a {
  display: inline-block;
  width: 40px;
  height: 40px;
  overflow: hidden;
  white-space: nowrap;
  color: #d0d0d0;
  margin: 2px; }

.cbp-vm-options a:hover,
.cbp-vm-options a.cbp-vm-selected {
  color: #47a3da; }

.cbp-vm-options a:before {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 30px;
  text-align: center;
  display: inline-block; }

/* General style of switch items' list */
.cbp-vm-switcher ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 600px;
  overflow: auto; }

.cbp-vm-switcher ul:after {
  clear: both; }

.cbp-vm-switcher ul li {
  display: flex;
  align-items: center;
  position: relative;
  justify-content: space-between;
  width: 100%; }

.cbp-vm-view-grid ul li > a {
  margin: 0; }

.cbp-vm-image {
  display: block;
  margin-right: 1.5rem; }

.cbp-vm-image img {
  display: inline-block;
  max-height: 200px;
  width: auto;
  border: none; }

.cbp-vm-title {
  margin: 0;
  padding: 0; }

.cbp-vm-price {
  color: #ffc240; }

.cbp-vm-add {
  color: #fff;
  background: #47a3da;
  padding: 10px 20px;
  border-radius: 2px;
  margin: 20px 0 0;
  display: inline-block;
  transition: background 0.2s; }

.cbp-vm-add:hover {
  color: #fff;
  background: #02639d; }

.cbp-vm-add:before {
  margin-right: 5px; }

/* Common icon styles */
.cbp-vm-icon:before {
  font-family: "fontawesome";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased; }

.cbp-vm-grid:before {
  content: "\f00a"; }

.cbp-vm-list:before {
  content: "\f00b"; }

.cbp-vm-add:before {
  content: "\f055"; }

/* Individual view mode styles */
/* Large grid view */
.cbp-vm-view-grid ul {
  text-align: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1em; }

.cbp-vm-view-grid ul li {
  /* width: 33%;
  text-align: center;
  padding: 25px;
  margin: 20px 0 0;
  display: inline-block;
  min-height: 420px;
  vertical-align: top; */
  display: flex;
  flex-direction: column; }

.cbp-vm-view-grid .cbp-vm-title {
  font-size: 2em; }

.cbp-vm-view-grid .cbp-vm-details {
  max-width: 300px;
  min-height: 70px;
  margin: 0 auto; }

.cbp-vm-view-grid .cbp-vm-price {
  margin: 10px 0;
  font-size: 1.5em; }

/* List view */
.cbp-vm-view-list li {
  padding: 20px 0;
  white-space: nowrap; }

/* .cbp-vm-view-list .cbp-vm-image,
.cbp-vm-view-list .cbp-vm-title,
.cbp-vm-view-list .cbp-vm-details,
.cbp-vm-view-list .cbp-vm-price,
.cbp-vm-view-list .cbp-vm-add {
  display: inline-block;
  vertical-align: middle;
}

.cbp-vm-view-list .cbp-vm-image {
  width: 10%;
}

.cbp-vm-view-list .cbp-vm-title {
  font-size: 1.3em;
  padding: 0 10px;
  margin-left: 0.5rem;
  flex: 1 1 auto;
}

.cbp-vm-view-list .cbp-vm-price {
  font-size: 1.3em;
  width: 10%;
} */
.cbp-vm-view-list .cbp-vm-details {
  width: 40%;
  padding: 0 15px;
  overflow: hidden;
  white-space: normal; }

.cbp-vm-view-list .cbp-vm-add {
  margin: 0 0.5rem 0 0; }

@media screen and (max-width: 66.7em) {
  .cbp-vm-view-list .cbp-vm-details {
    width: 30%; } }
@media screen and (max-width: 57em) {
  .cbp-vm-view-grid ul li {
    width: 49%; } }
@media screen and (max-width: 47.375em) {
  .cbp-vm-view-list .cbp-vm-image {
    width: 20%; }

  .cbp-vm-view-list .cbp-vm-title {
    width: auto; }

  .cbp-vm-view-list .cbp-vm-details {
    display: block;
    width: 100%;
    margin: 10px 0; }

  .cbp-vm-view-list .cbp-vm-add {
    margin: 10px; } }
@media screen and (max-width: 40.125em) {
  .cbp-vm-view-grid ul li {
    width: 100%; } }
.section-form {
  display: flex;
  flex-direction: column;
  background-color: #333 !important;
  position: relative;
  box-sizing: border-box;
  padding: 2em 2em 3em !important;
  margin: 10px auto;
  width: 100% !important;
  max-width: 1100px !important; }

.create-account-title-zerd {
  width: 100%;
  max-width: 1100px;
  height: 4em;
  font-weight: 700;
  font-size: 40px;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  text-transform: uppercase;
  font-family: "Heebo", sans-serif;
  line-height: 1;
  margin: 9px auto;
  background: linear-gradient(110deg, #900000 33%, rgba(0, 0, 0, 0) 33%), linear-gradient(110deg, #dd0000 100%, #ffc608 66%);
  color: #ffffff; }

.create-account-title-zerd h1 {
  margin-top: 41px;
  font-size: 1.2em;
  font-family: "Oswald";
  font-weight: 300; }

.form-create-account {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 5px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  height: auto;
  /*max-height: 700px;*/
  padding: 2em 2em 3em;
  background: var(--bg-container-pay-card);
  color: #202124;
  margin: auto;
  font-family: "Lato", Calibri, Arial, sans-serif;
  font-weight: 700;
  /* box-shadow: 0 0.265rem 1.25rem 0 rgb(255 255 255 / 39%);*/
  border-radius: 6px; }

.name-account,
.phone-date,
.password-form {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  max-width: 536px;
  column-gap: 10px;
  margin: 5px 0 0 0; }

.label-name,
.label-phone,
.label-date,
.label-password {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 4px;
  width: 50%; }

.group-email {
  display: flex;
  width: 100%;
  max-width: 536px;
  column-gap: 4px; }

.form-email {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin: 0.5em 0 0 0; }

.form-create-account label {
  font-size: 1.1em;
  letter-spacing: 0.25px;
  cursor: pointer; }

.form-create-account input {
  background: #ffffff;
  border: 1px solid #dddfe2;
  color: #1d2129;
  font-family: Helvetica, Arial, sans-serif;
  vertical-align: middle;
  font-size: 0.85em;
  padding: 14px 16px;
  height: 35px;
  border: 1px solid #b1b1b1;
  margin-bottom: 16px;
  width: 266px; }

/*.input-email {
    width: 100%  !important;
    max-width: 705px  !important;
}*/
.form-create-account input:focus {
  outline: none;
  border-color: #463ae6;
  box-shadow: 0 0 0 4px #d7d4fc; }

.form-create-account input:not(:focus):invalid {
  background-color: #000;
  border: 2px solid #000;
  color: #fff;
  font-weight: 700; }

@keyframes spin {
  0%,
  100% {
    transform: translate(0); }
  25% {
    transform: translateX(2%); }
  75% {
    transform: translateX(-2%); } }
/*input[type="date" i] {
	display: block;
	font-family: 'Lato', Calibri, Arial, sans-serif;
    line-height: 1.5;
    font-size: 1.4em;
    padding: 5px 10px;
    color: #4d4d4d;
    width: 100%;
    background: transparent;
    box-sizing: border-box;
    border:solid 3px #4d4d4d ;
}*/
.form-create-account input[type="date" i]:focus {
  outline: none;
  border: 3px solid #fc0; }

.btn-form-create-account {
  display: inline-block;
  position: relative;
  width: 50%;
  margin: auto;
  top: 20px;
  border: 2px solid #000;
  background-color: #000;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  padding: 15px 30px;
  font-size: 1.1em;
  font-weight: 700;
  border-radius: 2px;
  letter-spacing: 1px;
  transition: all 0.3s ease; }

.btn-form-create-account:hover {
  box-shadow: 0 0.265rem 1.25rem 0 rgba(0, 0, 0, 0.39); }

::-webkit-calendar-picker-indicator {
  display: none; }

::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #838383; }

/*

===== RESPONSIVE ====

*/
@media (max-width: 519px) {
  .form-create-account {
    padding: 0.3em 0.3em 0.4em; }

  .section-form {
    padding: 0 !important; }

  .name-account,
  .phone-date,
  .password-form {
    flex-direction: column; }

  .label-name,
  .label-phone,
  .label-date,
  .label-password {
    align-items: center;
    justify-content: center;
    width: 100%; }

  .form-email {
    align-items: center;
    justify-content: center;
    width: 100%; }

  .btn-form-create-account {
    top: 0; }

  .create-account-title-zerd {
    font-size: 20px; }

  .group-email {
    flex-direction: column; } }
.contact-section {
  display: flex;
  position: relative;
  width: 100%;
  max-width: 800px;
  max-height: 500px;
  border-radius: 8px;
  background-color: #000;
  color: #fff; }
  .contact-section .container_contact {
    position: relative;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto; }
    .contact-section .container_contact img {
      max-width: 200px;
      height: auto; }
    .contact-section .container_contact p {
      text-align: center; }
    .contact-section .container_contact h2 {
      font-size: 2.5em;
      font-weight: 500; }
    .contact-section .container_contact .contactAdress {
      font-size: 1.1em;
      font-weight: 600;
      line-height: 1.5;
      position: relative; }
  .contact-section .progCineMed {
    display: flex;
    gap: 1em;
    padding-bottom: 1em; }

#myBtn-to-top {
  display: block;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 9999;
  background-color: var(--btn-top-bg, #fff);
  color: var(--btn-top-color, #000);
  cursor: pointer;
  padding: 11px;
  border-radius: 50%;
  font-size: 1em;
  transition: background-color 0.2s, bottom 0.2s, opacity 0.2s;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  opacity: 1;
  width: 40px;
  height: 40px;
  border: none;
  outline: none; }
  #myBtn-to-top.hidden {
    bottom: -56px;
    opacity: 0; }
  #myBtn-to-top:active {
    outline: none;
    border: none;
    opacity: 0.85;
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2); }
  #myBtn-to-top:focus {
    outline: 0; }
  #myBtn-to-top:hover {
    background-color: var(--btn-top-hover-bg, #000);
    color: var(--btn-top-hover-color, #fff); }

.aProposDeNous {
  background-color: #f6f7f8;
  color: #202124;
  max-width: 1400px;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: 1200px;
  border-radius: 4px;
  font-family: "Noto Sans"; }
  .aProposDeNous h2 {
    font-size: 2.5rem;
    text-align: center;
    margin: 1em 0;
    line-height: 3.25rem;
    text-transform: uppercase;
    font-weight: 600;
    position: relative;
    font-family: "Heebo"; }
  .aProposDeNous .containeraProposDeNous {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative; }
    .aProposDeNous .containeraProposDeNous h3 {
      font-weight: 400;
      position: relative;
      font-family: "Heebo"; }
    .aProposDeNous .containeraProposDeNous p {
      line-height: 1.5; }

.mentionsLegales {
  background-color: #f6f7f8;
  color: #202124;
  max-width: 1400px;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: 1200px;
  border-radius: 4px;
  font-family: "Noto Sans"; }
  .mentionsLegales h2 {
    font-size: 2.5rem;
    text-align: center;
    margin: 1em auto;
    line-height: 3.25rem;
    text-transform: uppercase;
    font-weight: 900;
    position: relative;
    width: 100%;
    max-width: 402px;
    font-family: "Heebo"; }
  .mentionsLegales .containerMentionsLegales {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    position: relative;
    padding: 20px; }
    .mentionsLegales .containerMentionsLegales p {
      line-height: 1.5;
      font-size: 1em; }

.confidentialite {
  background-color: #f6f7f8;
  color: #202124;
  max-width: 1400px;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: 1200px;
  border-radius: 4px;
  font-family: "Noto Sans"; }
  .confidentialite h2 {
    font-size: 2.5rem;
    text-align: center;
    margin: 1em 0;
    line-height: 3.25rem;
    text-transform: uppercase;
    font-weight: 600;
    font-family: "Heebo";
    position: relative; }
    .confidentialite h2::before {
      background-color: #dab7f5fa;
      content: "";
      border-radius: 2px;
      height: 21px;
      position: absolute;
      top: 22px;
      width: 80%;
      margin: auto;
      right: 0;
      left: 0;
      z-index: -1; }
  .confidentialite .containerConfidentialite {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    position: relative;
    padding: 20px; }
    .confidentialite .containerConfidentialite h3 {
      font-size: 1.25em;
      font-family: "Heebo";
      font-weight: 400; }
    .confidentialite .containerConfidentialite p {
      line-height: 1.5;
      font-size: 1em; }

.footer_zerd {
  position: relative;
  color: #fff;
  display: flex;
  flex-direction: column;
  font-size: 1em;
  margin-top: auto;
  overflow: hidden;
  text-align: center;
  background: var(--bg-color-footer);
  padding: 65px; }
  .footer_zerd li {
    cursor: pointer; }
  .footer_zerd .footer_zerd-links,
  .footer_zerd .footer_zerd-social,
  .footer_zerd .footer_zerd-copyright {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    column-gap: 1em; }
    .footer_zerd .footer_zerd-links a,
    .footer_zerd .footer_zerd-social a,
    .footer_zerd .footer_zerd-copyright a {
      padding: 0.375rem;
      cursor: pointer;
      display: flex;
      margin: 0;
      align-items: center;
      justify-content: center;
      transition: 0.3s;
      color: var(--color-footer);
      line-height: 2.4rem;
      border-radius: 1.2rem;
      border: 0.2rem solid transparent;
      transition-property: background-color, box-shadow, border-color, color;
      transition-delay: 0ms;
      transition-duration: 200ms;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
      .footer_zerd .footer_zerd-links a:hover,
      .footer_zerd .footer_zerd-social a:hover,
      .footer_zerd .footer_zerd-copyright a:hover {
        background-color: var(--color-link-hover);
        border-color: transparent; }
  .footer_zerd .footer_zerd-social a {
    color: #fff; }
  .footer_zerd .footer_zerd-copyright {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.5); }
  .footer_zerd .footer_zerd-links {
    flex-wrap: nowrap; }

@media screen and (max-width: 700px) {
  .footer_zerd {
    padding: 0 1.2em;
    font-size: 0.85em; }
    .footer_zerd .footer_zerd-links {
      flex-direction: column;
      padding-top: 3em;
      width: 100%;
      align-items: flex-start; }
      .footer_zerd .footer_zerd-links li {
        border: none;
        padding: 20px 0;
        border-bottom: 1px solid #fff;
        text-align: left;
        position: relative;
        width: 100%; }
      .footer_zerd .footer_zerd-links a {
        justify-content: flex-start; }
    .footer_zerd .footer_zerd-copyright {
      align-items: flex-start;
      font-size: 0.75em; } }
.hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  display: none !important; }

.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  display: block !important; }

.header-default {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 10%, transparent);
  transition: background 0.3s ease-in-out; }
.header-transparent {
  background: transparent;
  transition: background 0.3s ease-in-out; }

.top-btn-show {
  display: block !important; }
.top-btn-hide {
  display: none !important; }

#cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 600px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 20px;
  font-size: 18px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-radius: 16px;
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  z-index: 99999;
  animation: fadeIn 0.8s ease-out; }
  #cookie-banner p {
    margin: 0;
    flex: 1;
    font-weight: 500;
    line-height: 1.4; }
  #cookie-banner button {
    background: #d22b2b;
    color: #fff;
    border: none;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out, background 0.3s;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); }
    #cookie-banner button:hover {
      background: #d83f3f;
      box-shadow: 0px 0px 15px rgba(210, 43, 43, 0.8); }
    #cookie-banner button:active {
      box-shadow: none; }

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px); }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0); } }

/*# sourceMappingURL=styles.css.map */