/** Shopify CDN: Minification failed

Line 1411:2 Unexpected "`"

**/
/* ==================== RESET ==================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
* {
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
p a {
  color: var(--link-color);
}

/* ==================== FONTS ==================== */

@font-face {
  font-family: 'Integral CF';
  font-weight: 400;
  src: url("https://cdn.shopify.com/s/files/1/0137/1003/2954/files/IntegralCF-Regular.woff?v=1682599507") format("woff"), url("https://cdn.shopify.com/s/files/1/0137/1003/2954/files/IntegralCF-Regular.woff2?v=1682599507") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: 'Integral CF';
  font-weight: 500;
  src:
    url("https://cdn.shopify.com/s/files/1/0137/1003/2954/files/IntegralCF-DemiBold.woff?v=1698143608") format("woff"),
    url("https://cdn.shopify.com/s/files/1/0137/1003/2954/files/IntegralCF-DemiBold.woff2?v=1698143608") format("woff2");
  font-display: swap;
}

/* ==================== VARIABLES ==================== */

:root {
  
  --color-white: #fff;
  --color-link: #3e8ecc;
  --color-gray: #7c8e9b;
  --color-gray-2: #727272;
  --color-black: #232323;

  --color-green-500: #4ade80;
      
  --heading-font-family: 'Integral CF';
  --heading-font-weight: 500;
        
  --container-width: 1300px;
  --container-medium-width: 1100px;
  --container-small-width: 800px;
      
  --text-font-size: 16px;
  --text-font-family: 'Outfit';
  --text-font-weight: 300;

  --up-font-weight: 400;

  --button-border-radius: 32px;
  --button-font-family: 'Outfit';
  
  --promo-banner-background-color: #222;
  --promo-banner-text-color: #fff;
  --promo-banner-font-family: 'Integral CF';
  --promo-banner-font-weight: 400;
  
}

/* ==================== BASE ==================== */

html,
body {
  height: 100%;
}

body {
  min-height: 100vh;
  font-size: var(--text-font-size);
  color: var(--color-black);
  font-family: var(--text-font-family);
  font-weight: 300;
}

body.OverflowHidden {
  overflow: hidden;
}

/* ==================== NIGHT SHIFT ==================== */

.NightMode {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* ==================== PUB ==================== */

.Pub {
  display: none !important;
}

/* ==================== MAIN ==================== */

#MainContent {
  min-height: 100%;
}

/* ==================== BACKGROUND ==================== */

.Background__White {
  background-color: var(--color-white);
  color: var(--color-black);
}

.Background__Black {
  background-color: var(--color-black);
  color: var(--color-white);
}

.Background__WhitePaper,
.Background__BlackPaper {
  background-size: 1000px;
}

.Background__Primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.Background__WhitePaper {
  background-image: url('//trou-noir-jeu.myshopify.com/cdn/shop/t/6/assets/white-paper-texture.jpg?v=32318595369443577021704876370');
}

.Background__BlackPaper {
  background-image: url('//trou-noir-jeu.myshopify.com/cdn/shop/t/6/assets/black-paper-texture.jpg?v=2488');
  position: relative;
  color: var(--color-white);
}

.Background__BlackPaper::after {
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, .65), rgba(0, 0, 0, .9), rgba(0, 0, 0, .65));
  position: absolute;
  left: 0;
  top: 0;
}

.Background__BlackPaper * {
  position: relative;
  z-index: 1;
}

/* ==================== HEADINGS ==================== */

.Heading,
.Heading__1,
.Heading__2,
.Heading__3,
.Heading__4 {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  text-transform: uppercase;
}
.Heading__1 {
  font-size: 2em;
}
.Heading__2 {
  font-size: 30px;
  line-height: 1.15em;
}
.Heading__3 {
  font-size: 26px;
}
.Heading__4 {
  font-size: 22px;
}
.Heading__5 {
  font-size: 18px;
}

@media screen and (min-width: 480px) {
  
  .Heading__1 {
    font-size: 48px;
  }
  .Heading__2 {
    font-size: 42px;
  }
  
}

@media screen and (min-width: 640px) {
  
  .Heading__1 {
    font-size: 56px;
  }
  .Heading__2 {
    font-size: 44px;
  }
  .Heading__3 {
    font-size: 36px;
  }
  .Heading__4 {
    font-size: 22px;
  }
  
}

@media screen and (min-width: 1024px) {
  
  .Heading__1 {
    font-size: 72px;
  }
  .Heading__2 {
    font-size: 56px;
  }
  .Heading__3 {
    font-size: 48px;
  }
  .Heading__4 {
    font-size: 32px;
  }
  .Heading__5 {
    font-size: 24px;
  }
  
}

/* ==================== UP ==================== */

.UpTitle {
  margin-bottom: .5em;
  font-size: 1em;
  font-family: var(--heading-font-family);
  font-weight: var(--up-font-weight);
  text-transform: uppercase;
}

.UpTitle.Primary {
  color: var(--color-primary);
}

@media screen and (min-width: 640px) {
  
  .UpTitle {
    font-size: 1.35em;
  }
  
}

@media screen and (min-width: 1024px) {
  
  .UpTitle {
    font-size: 1.75em;
  }
  
}

/* ==================== PARAGRAPHE ==================== */

.Paragraphe {
  max-width: 40em;
  margin-top: 1em;
  font-size: 18px;
  line-height: 1.5em;
}

/* ==================== BUTTONS ==================== */

.Buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 1em;
  row-gap: .5em;
}

cta-button {
  width: 100%;
}

.Buttons cta-button {
  flex: 1 1 12em;
}

.Button {
  width: 100%;
  background-color: var(--color-black);
  padding: 1em 1.5em;
  border-radius: var(--button-border-radius);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: var(--color-white);
  font-family: var(--button-font-family);
  font-weight: 400;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

.Button.White {
  background-color: var(--color-white);
  color: var(--color-black);
}

.Button.Primary {
  background-color: var(--color-primary);
  border: 0;
  color: var(--color-white);
}

.Button.Gray {
  background-color: #eee;
  color: var(--color-black);
}

.Button.Black {
  background-color: var(--color-black);
  color: var(--color-white);
}

.Button.Transparent {
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
  color: var(--color-black);
}

.Button.Store {
  flex: 1 1 200px;
  padding: 1.25em 1.25em;
}

.Button__Icon,
.Button svg {
  height: 1em;
  margin-right: .75em;
}

.Button__Icons {
  margin-right: 10px;
  display: flex;
  gap: 8px;
}

.Button__Icons img {
  height: 1em;
}

@media screen and (min-width: 640px) {

  .Button {
    width: auto;
    padding: 1em 1.75em;
    font-size: 16px;
  }
  
  .Button.Store {
    padding: .85em 1.75em;
  }
  
  .Button__Icon {
    height: 1.15em;
  }
  
  .Button.Store span {
    display: block;
  }
  
  .Button.Store span.Small {
    font-size: .55em;
  }
  
  .Button.Store span.Store {
    font-size: .9em;
  }

}

/* ==================== CONTAINER ==================== */

.Container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.Container {
  max-width: var(--container-width);
}

.Container.Medium {
  max-width: var(--container-medium-width);
}

.Container.Small {
  max-width: var(--container-small-width);
}

.Container.Center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.Container.Cols {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: left;
}

.Container.Cols.Gap {
  gap: 3em;
}

.Container.Cols.justify-between {
  justify-content: space-between;
}

@media screen and (min-width: 640px) {
  
  .Container.md-Center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

}

/* ==================== PADDING ==================== */

.Padding {
  padding: 3em 5%;
}

.Padding-x {
  padding: 0 5%;
}

.Padding-y {
  padding: 3em 0;
}

.Padding.no-left {
  padding-left: 0;
}

.Padding.no-right {
  padding-right: 0;
}

.Padding.no-top {
  padding-top: 0;
}

.Padding.no-bottom,
.Padding.NoBottom {
  padding-bottom: 0;
}

@media screen and (min-width: 1024px) {

  .Padding {
    padding-top: 4em;
    padding-bottom: 4em;
  }
  
  .Padding__UnderHeader {
    padding-top: 10em;
  }
  
}

/* ==================== POLICIES ==================== */

.shopify-policy__container {
  max-width: var(--container-medium-width);
  padding: 10em 5% 4em;
}

.shopify-policy__title h1,
.shopify-policy__body h2 {
  font-family: var(--heading-font-family);
}

.shopify-policy__title h1 {
  font-size: 1.75em;
  line-height: 1.35em;
  text-transform: uppercase;
  text-align: left;
}

.shopify-policy__body {
  margin-top: 3em;
  line-height: 1.75em;
}

.shopify-policy__body h2 {
  margin-top: 1.5em;
  font-size: 1.15em;
}

.shopify-policy__body p {
  margin-top: 1em;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.85em;
}

@media screen and (min-width: 640px) {
  
  .shopify-policy__title h1 {
    font-size: 2.5em;
  }
  
}

@media screen and (min-width: 1024px) {
  
  .shopify-policy__title h1 {
    font-size: 3em;
  }
  
}

/* =================== SECTION : HEADER =================== */

.MainHeader {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  color: var(--color-white);
}

.MainHeader.Transparent {
  box-shadow: none;
}

.MainHeader__Banner {
  background-color: var(--promo-banner-background-color);
  position: relative;
  font-size: .7em;
  color: var(--promo-banner-text-color);
  font-family: var(--promo-banner-font-family);
  font-weight: var(--promo-banner-font-weight);
  text-transform: uppercase;
  z-index: 1;
}

.MainHeader__BannerSlide {
  padding: .65em 0;
  text-align: center;
  line-height: 1.75em;
}

.MainHeader__BannerSlide span,
.MainHeader__BannerSlide a {
  text-decoration: underline;
}

.MainHeader__Navbar {
  background-color: var(--header-background-color);
  position: relative;
  color: var(--header-text-color);
  z-index: 1;
  transition: .3s;
  box-shadow: 0px 15px 50px 0px rgba(0, 0, 0, .1);
}

.NightMode .MainHeader__Navbar {
  background-color: #222;
  color: var(--color-white);
}

.MainHeader__Navbar.Shadow {
  box-shadow: 0 1em 6em 0 rgba(0, 0, 0, .25);
}

.MainHeader__Navbar:is(.Background__Black, .Background__Primary) a {
  color: var(--color-white);
}

.MainHeader__Navbar:is(.Background__Black, .Background__Primary) a:hover {
  color: var(--color-primary);
}

.MainHeader.Transparent .MainHeader__Navbar {
  background-color: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  transition: .3s;
}

.NightMode .MainHeader .MainHeader__Navbar a,
.MainHeader.Transparent .MainHeader__Navbar a {
  color: var(--color-white);
}

.MainHeader__Logo.Image {
  width: 12em;
  object-fit: contain;
}

.MainHeader__Logo.Text {
  font-size: 1.5em;
  color: var(--color-black);
  font-family: var(--heading-font-family);
  font-weight: 600;
  text-transform: uppercase;
}

.NightMode .MainHeader__Logo.Text,
.Background__Black .MainHeader__Logo.Text,
.Background__Primary .MainHeader__Logo.Text {
  color: var(--color-white);
}

.MainHeader__Padding {
  padding: 1em 5%;
}

.MainHeader__Container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.MainHeader__Items {
  display: flex;
  align-items: center;
  gap: 1em;
  font-family: var(--heading-font-family);
  text-transform: uppercase;
}

.MainHeader__Links {
  display: none;
  align-items: center;
  gap: 1em;
  font-size: .9em;
  font-family: var(--heading-font-family);
  font-weight: 500;
  text-transform: uppercase;
}

.MainHeader__Links a {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: var(--color-black);
  font-weight: 400;
}

.MainHeader__Links a:hover {
  color: var(--color-primary);
}

.MainHeader__CTA {
  display: none;
  align-items: center;
  gap: 1em;
}

.MainHeader .Button {
  padding: 1em 1.5em;
  box-shadow: none;
  font-size: .85em;
  transition: background-color .3s;
}

.NightMode .MainHeader .Button.Black {
  background-color: var(--color-white);
  color: var(--color-black);
}

.MainHeader .Button.Store {
  padding: 1em 2em;
  font-size: .8em;
}

.MainHeader__NightShift {
  color: var(--color-black);
}

.NightMode .MainHeader__NightShift,
.Black .MainHeader__NightShift {
  color: var(--color-white);
}

.MainHeader__NightShiftIcon {
  cursor: pointer;
}

.MainHeader__NightShiftIcon:hover {
  opacity: .5;
}

.MainHeader__NightShiftIcon:not(.Active) {
  display: none;
}

.MainHeader__NightShift svg {
  height: 1.1em;
}

.MainHeader__Burger {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
}

.MainHeader__Burger div {
  width: 22px;
  height: 2px;
  background-color: var(--color-black);
  border-radius: .5em;
  transition: .3s;
}

.NightMode .MainHeader__Burger div,
.Background__Black .MainHeader__Burger div {
  background-color: var(--color-white);
}

.MainHeader.Transparent .MainHeader__Burger div {
  background-color: var(--color-white);
}

.MainHeader__Burger div + div {
  margin-top: 5px;
}

.active .MainHeader__Burger div:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.active .MainHeader__Burger div:nth-child(2) {
  opacity: 0;
}

.active .MainHeader__Burger div:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.MainHeader__ScrollAmount {
  width: 100%;
  height: 5px;
  display: block;
}

.MainHeader__ScrollAmount div {
  width: 0%;
  height: 100%;
  background-color: var(--color-primary);
}

.MainHeaderMobile {
  width: 100%;
  height: 120vh;
  background-color: var(--color-white);
  padding-top: 107px;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-120vh);
  overflow: hidden;
}

.NightMode .MainHeaderMobile,
.Background__Black .MainHeaderMobile {
  background-color: var(--color-black);
}

.NightMode .MainHeaderMobile__Links a,
.Background__Black .MainHeaderMobile__Links a {
  color: var(--color-white);
}

.MainHeaderMobile__Links {
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  display: flex;
  flex-direction: column;
  text-transform: uppercase;
}

.MainHeaderMobile__Links.Main {
  margin-bottom: 2em;
  font-size: 1.15em;
  font-family: var(--heading-font-family);
}

.MainHeaderMobile__Links a {
  padding: 1em 5%;
  color: var(--color-black);
}

.MainHeaderMobile__Links a + a:not(:first-child) {
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.MainHeaderMobile__Links a.Active {
  color: var(--color-primary);
}

.MainHeaderMobile__Social {
  padding: 0 5%;
  display: flex;
  gap: 1em;
}

.MainHeaderMobile__SocialIcon {
  width: 3em;
  height: 3em;
  background-color: var(--color-black);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
}

.NightMode .MainHeaderMobile__SocialIcon,
.Background__Black .MainHeaderMobile__SocialIcon {
  background-color: var(--color-white);
  color: var(--color-black);
}

.MainHeaderMobile__SocialIcon svg {
  height: 40%;
}

.MainHeaderMobile__Copyrights {
  margin-top: 3em;
  padding: 0 5%;
  font-size: .85em;
  color: var(--color-black);
  font-weight: 300;
}

@media screen and (min-width: 640px) {

  .MainHeader__Items {
    gap: 2em;
  }
  
  .MainHeader__CTA {
    display: flex;
  }

}

@media screen and (min-width: 728px) {
 
  .MainHeaderMobile__Padding {
    padding-top: 130px;
  }
  
  .MainHeader__Links.cta {
    display: flex;
  }

}

@media screen and (min-width: 1024px) {

  .MainHeader__Burger {
    display: none;
  }
  
  .MainHeader__Links {
    display: flex;
  }

}

.Section.Hero {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 4em 5% 0;
}

.Section.Hero.After {
  position: relative;
}

.Section.Hero.After::after {
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  left: 0;
  top: 0;
}

.Section.Hero.After * {
  position: relative;
  z-index: 1;
}

.Section.Hero.DoublePaddingTop {
  padding-top: 9em;
}

.Section.Hero.PaddingBottom {
  padding-bottom: 4em;
}

.Section.Hero.HasBackground {
  color: var(--color-white);
}

.Hero__UpTitle {
  font-size: 1.15em;
}

@media screen and (min-width: 640px) {
  
  .Hero__UpTitle {
    font-size: 1.5em;
  }
  
}

@media screen and (min-width: 1024px) {

  .Section.Hero {
    padding-top: 4em;
  }

  .Section.Hero.DoublePaddingTop {
    padding-top: 11em;
  }
  
  .Hero__UpTitle {
    font-size: 2em;
  }
  
}

/* =================== BASE : FOOTER =================== */

.MainFooter {
  background-color: var(--color-black);
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: var(--color-white);
}

.MainFooter__Padding {
  padding: 3em 5% 7em;
}

.MainFooter__Container {
  display: flex;
  flex-wrap: wrap;
}

.MainFooter__Header {
  flex: 1 1 150px;
  font-family: var(--heading-font-family);
}

.MainFooter__Logo {
  font-size: 2em;
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
}

.MainFooter__Tagline {
  margin-top: .5em;
  font-size: 1em;
  line-height: 1.5em;
  text-transform: uppercase;
}

.MainFooter__Languages {
  margin-top: 2em;
  display: flex;
  gap: 1em;
}

.MainFooter__Languages svg {
  width: 24px;
  height: 16px;
}

.MainFooter__LinksLists {
  flex: 1 1 600px;
  margin-top: 3em;
  display: flex;
  gap: 2em;
  flex-wrap: wrap;
}

.MainFooter__LinksHeading {
  font-family: var(--heading-font-family);
  line-height: 1.5em;
  text-transform: uppercase;
}

.MainFooter__LinksList {
  flex: 1 1 150px;
}

.MainFooter__Links {
  margin-top: 1.5em;
}

.MainFooter__LinksList li {
  margin-top: .75em;
}

.MainFooter__Links a {
  color: #b6b6b6;
}

.MainFooter__Links a:hover {
  color: #fff;
}

.MainFooterCopyrights {
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 12px;
}

.MainFooterCopyrights__Padding {
  padding: 1.5em 5%;
}

.MainFooterCopyrights__Container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.MainFooterCopyrights__Links {
  margin-top: 1em;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

@media screen and (min-width: 640px) {

  .MainFooter__Container {
    gap: 3em;
  }
  
  .MainFooter__Logo {
    font-size: 2em;
  }
  
  .MainFooter__Tagline {
    font-size: 1em;
  }

  .MainFooter__LinksLists {
    margin-top: 0;
  }
  
  .MainFooter__LinksList li {
    margin-top: 1em;
  }
  
  .MainFooterCopyrights__Links {
    margin-top: 0;
  }

}





/* =================== BLOG =================== */

.Blog__Heading {
  margin-bottom: 1em;
}

/* =================== ARTICLES =================== */

.Article {
  border-radius: 10px;
}

.Article:hover {
  background-color: inherit;
  outline: 1em solid inherit;
}

.Background__Black .Article:hover {
  background-color: transparent;
  outline: none;
}

.Article__FeaturedImage {
  height: 12em;
  border-radius: 6px;
  overflow: hidden;
}

.Article__FeaturedImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.Article__Meta {
  margin-top: 2em;
  display: flex;
  gap: 1em;
  font-size: 14px;
  color: var(--color-black);
  font-weight: 500;
  text-transform: uppercase;
}

.Background__Black .Article__Meta {
  color: var(--color-white);
}

.Background__Black .Article__Meta .Tag {
  color: var(--color-primary);
}

.Article__Meta *:is(a, p) {
  position: relative;
}

.Article__Meta a:not(:last-child)::after,
.Article__Meta p:not(:last-child)::after {
  content: '';
  width: 4px;
  height: 4px;
  background-color: var(--color-black);
  margin: -1px 5px 0;
  border-radius: 2px;
  position: absolute;
  right: -16px;
  top: 50%;
}

.Article__Meta a {
  color: #0b72ff;
}

.Article__Heading {
  margin-top: .5em;
  font-size: 20px;
  line-height: 1.35em;
}

.Article:hover .Article__Heading {
  text-decoration: underline;
}

.Article__Excerpt {
  margin-top: .75em;
  color: var(--text-color-light);
  font-weight: 300;
  line-height: 1.65em;
}

.Article__Author {
  margin-top: 1em;
  font-size: .85em;
  color: var(--color-gray);
}

/* =================== BLOG ARTICLES : CARDS =================== */

.Blog__Articles.Cards {
  display: grid;
  gap: 3em;
}

.Blog__Articles.Cards .Article__Author {
  display: none;
}

@media screen and (min-width: 640px) {

  .Blog__Articles.Cards {
    grid-template-columns: 1fr 1fr;
  }

}

@media screen and (min-width: 1024px) {

  .Blog__Articles.Cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
  
}

/* =================== BLOG ARTICLES : LINES =================== */

.Blog__Articles.Lines .Article {
  padding: 1.5em 0;
  display: flex;
  align-items: center;
  gap: 1em;
}

.Blog__Articles.Lines .Article:not(:first-child) {
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.Background__Black .Blog__Articles.Lines .Article:not(:first-child) {
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.Blog__Articles.Lines .Article__FeaturedImage {
  width: 6em;
  min-width: 6em;
  height: 6em;
}

.Blog__Articles.Lines .Article__Meta {
  margin-top: 0;
  font-size: 12px;
}

.Blog__Articles.Lines .Article__Meta .Tag:nth-child(2) {
  display: none;
}

.Blog__Articles.Lines .Article__Heading {
  font-size: 14px;
}

.Blog__Articles.Lines .Article__Excerpt {
  display: none;
}

@media screen and (min-width: 640px) {

  .Blog__Articles.Lines .Article {
    gap: 1.5em;
  }

  .Blog__Articles.Lines .Article:not(:first-child) {
    border-top: none;
  }

  .Blog__Articles.Lines .Article__FeaturedImage {
    width: 8em;
    min-width: 8em;
    height: 8em;
    border-radius: .5em;
  }

  .Blog__Articles.Lines .Article__Heading {
    font-size: 18px;
  }

  .Blog__Articles.Lines .Article__Meta .Tag:nth-child(2) {
    display: inline-bock;
  }
  
}

@media screen and (min-width: 728px) {

  .Blog__Articles.Lines {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3em;
    row-gap: 3em;
  }

}

@media screen and (min-width: 1024px) {

  .Blog__Articles.Lines .Article {
    gap: 2em;
  }

  .Blog__Articles.Lines .Article__FeaturedImage {
    border-radius: .75em;
  }

  .Blog__Articles.Lines .Article__Heading {
    font-size: 20px;
  }
  
}

/* =================== BLOG ARTICLES : FEATURED FIRST ARTICLE =================== */

.Blog__Articles.FeaturedArticle .Article {
  padding: 0px;
  border-radius: 0px;
  display: block;
}

.Blog__Articles.FeaturedArticle .Article:not(:first-child) {
  margin-top: 4em;
}

.Blog__Articles.FeaturedArticle .Article__Author {
  display: none;
}

@media screen and (min-width: 1024px) {

  .Blog__Articles.FeaturedArticle {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, 1fr);
    column-gap: 4em;
  }

  .Blog__Articles.FeaturedArticle .Article:first-child {
    grid-column: 1 / 8;
    grid-row: 1 / 4;
  }
  
  .Blog__Articles.FeaturedArticle .Article:first-child .Article__Heading {
    font-size: 2.5em;
  }

  .Blog__Articles.FeaturedArticle .Article:first-child .Article__FeaturedImage {
    height: 20em;
  }

  .Blog__Articles.FeaturedArticle .Article:first-child .Article__Author {
    display: none;
  }
  
  .Blog__Articles.FeaturedArticle .Article:not(:first-child) {
    margin-top: 0;
    grid-column: 8 / 13;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 4em;
  }
  
  .Blog__Articles.FeaturedArticle .Article:not(:first-child) .Article__FeaturedImage {
    width: 6em;
    min-width: 6em;
    height: 6em;
  }
  
  .Blog__Articles.FeaturedArticle .Article:not(:first-child) .Article__Meta {
    margin-top: 0;
    font-size: 12px;
  }
  `
  .Blog__Articles.FeaturedArticle .Article:not(:first-child) .Article__Heading {
    font-size: 14px;
  }
  
  .Blog__Articles.FeaturedArticle .Article:not(:first-child) .Article__Excerpt {
    display: none;
  }

  .Blog__Articles.FeaturedArticle .Article:not(:nth-child(2)) {
    border-top: 1px solid rgba(255, 255, 255, .1);
  }

  .Blog__Articles.FeaturedArticle .Article:not(:first-child) .Article__Excerpt {
    display: none;
  }

  .Blog__Articles.FeaturedArticle .Article:not(:first-child) .Article__FeaturedImage {
    width: 7em;
    min-width: 7em;
    height: 7em;
  }
  
}

/* =================== BLOG ARTICLE =================== */

.Section.BlogArticle {
  background-color: var(--color-white);
  color: #212326;
}

.NightMode .BlogArticle {
  background-color: var(--color-black);
  color: var(--color-white);
}

.BlogArticle__Padding {
  padding-top: 8em;
}

.BlogArticle__Container {
  display: flex;
  align-items: flex-start;
  gap: 4em;
  flex-wrap: wrap;
}

.BlogArticle__Infos {
  padding-top: 8.5em;
  padding-bottom: 0;
}

.BlogArticle__Breadcrumb {
  margin-bottom: 2em;
  padding-bottom: 2em;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em;
  font-size: .85em;
  color: var(--color-gray);
  font-weight: 300;
}

.NightMode .BlogArticle__Breadcrumb {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.BlogArticle__Breadcrumb svg {
  height: .65em;
}

.BlogArticle__Breadcrumb a {
  text-decoration: underline;
}

.BlogArticle__MainHeading {
  font-size: 2em;
  font-family: var(--heading-font-family);
  font-weight: 500;
  line-height: 1.35em;
  text-transform: uppercase;
}

.BlogArticle__Meta {
  margin-top: 1.5em;
  display: flex;
  flex-wrap: wrap;
  column-gap: 1em;
  color: var(--color-gray);
  font-weight: 300;
  line-height: 1.5em;
}

.BlogArticle__Meta p {
  position: relative;
}

.BlogArticle__Meta a {
  color: var(--color-black);
  font-weight: 500;
}

.NightMode .BlogArticle__Meta a {
  color: var(--color-white);
}

.BlogArticle__Meta p:not(:last-child)::after {
  content: '';
  width: 4px;
  height: 4px;
  background-color: var(--color-black);
  margin: -1px 5px 0;
  border-radius: 2px;
  position: absolute;
  right: -16px;
  top: 50%;
}

.BlogArticle__IntroShareIcons {
  overflow: auto;
}

.BlogArticle__ShareWrapper {
  padding: 2em 5%;
  display: flex;
  align-items: center;
  gap: 1.5em;
}

.BlogArticle__ShareSocialIcons {
  display: flex;
  align-items: center;
  gap: .5em;
}

.BlogArticle__ShareSocialIcon {
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.BlogArticle__ShareSocialIcon:hover {
  background-color: #eee;
}

.NightMode .BlogArticle__ShareSocialIcon:hover {
  background-color: #333;
}

.BlogArticle__ShareSocialIcon svg {
  height: 1.5em;
}

.BlogArticle__FeaturedImageWrapper {
  height: 16rem;
}

.BlogArticle__FeaturedImageWrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.BlogArticle__FeaturedImageAlt {
  margin-top: 1em;
  font-size: .85em;
  color: var(--color-gray);
  font-style: italic;
  text-align: center;
}

.BlogArticle__Main {
  width: 100%;
  flex: 1 1 600px;
}

.BlogArticle__Excerpt,
.BlogArticle__Content {
  padding-left: 5%;
  padding-right: 5%;
}

.BlogArticle__Content {
  padding-bottom: 2em;
  color: #212326;
}

.NightMode .BlogArticle__Content {
  color: var(--color-white);
}

.BlogArticle__Excerpt {
  padding-top: 2em;
  padding-bottom: 1em;
  font-size: 1.5em;
  font-style: italic;
  line-height: 1.75em;
}

.BlogArticle__Content *:is(h2, h3) {
  font-weight: 500;
}

.BlogArticle__Content h2 {
  margin: 2em 0 .5em;
  font-size: 1.5em;
  line-height: 1.35em;
}

.BlogArticle__Content h3 {
  margin: 2em 0 .5em;
  font-size: 1.5em;
}

.BlogArticle__Content,
.BlogArticle__Content p {
  font-size: 18px;
  font-weight: 300;
  line-height: 2em;
}

.BlogArticle__Content p:not(:first-child) {
  margin-top: 1em;
}

.BlogArticle__Content p b {
  font-weight: 600;
}

.BlogArticle__Content *:is(ul, li) {
  line-height: 1.75em;
  list-style: inherit;
}

.BlogArticle__Content ul {
  margin-top: 1em;
  padding: 0 2em;
}

.BlogArticle__Content li {
  position: relative;
}

.BlogArticle__Content ol {
  margin: 2em 0;
}

.BlogArticle__Content ol li {
  margin: 1em 0 0 1em;
  padding: 0 .5em;
}

.BlogArticle__Content table th,
.BlogArticle__Content table td {
  padding: 1em 1.5em;
  border: 1px solid #ccc;
}

.BlogArticle__Content table th,
.BlogArticle__Content table strong {
  font-weight: 500;
}

.BlogArticle__Content table p {
  margin-top: 0;
  font-size: 16px;
}

.BlogArticle__Content *:not(.BlogArticle__ContentPromo) a {
  color: var(--color-black);
  font-weight: 600;
  text-decoration: underline;
}

.BlogArticle__Content img {
  width: 80%;
  margin: 3em auto 3em;
  display: block;
  border-radius: 8px;
}

.BlogArticle__EndShareIcons {
  border-top: 1px solid rgba(0, 0, 0, .1);
  overflow: auto;
}

.NightMode .BlogArticle__EndShareIcons {
  border-color: rgba(255, 255, 255, .1);
}

@media screen and (min-width: 640px) {

  .BlogArticle__MainHeading {
    font-size: 2.5em;
  }
  
}

@media screen and (min-width: 1024px) {

  .BlogArticle__Infos {
    padding: 9em 0 0;
  }

  .BlogArticle__MainHeading {
    font-size: 3em;
  }

  .BlogArticle__ShareWrapper {
    padding-left: 0;
    padding-right: 0;
  }
  
  .BlogArticle__FeaturedImageWrapper {
    border-radius: 8px;
    overflow: hidden;
  }

  .BlogArticle__Excerpt,
  .BlogArticle__Content {
    padding-left: 0;
    padding-right: 10%;
  }
  
}

.BlogArticle__ContentPromo {
  background: linear-gradient(120deg,#22406a, #1C213E);
  margin-top: 3em;
  padding: 2em 10%;
  border-radius: 8px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 1em;
  color: #fff;
  overflow: hidden;
}
.BlogArticle__ContentPromoBox {
  width: 100%;
  max-width: 200px;
  margin-bottom: -6em !important;
  transform: rotate(-2deg);
}
.BlogArticle__ContentPromo *:is(ul, li, p) {
  margin: 0;
  padding: 0;
  list-style: none;
}
.BlogArticle__ContentPromo .BlogArticle__ContentPromoHeading,
.BlogArticle__ContentPromo .BlogArticle__ContentPromoSubHeading {
  font-weight: 600;
  text-transform: uppercase;
}
.BlogArticle__ContentPromoHeading {
  font-size: 30px !important;
  line-height: 1.25em !important;
}
.BlogArticle__ContentPromo .buttons {
  margin-top: 2em;
}
.BlogArticle__ContentPromo .Button {
  background-color: #fff;
  color: #000;
  gap: 8px;
}
.BlogArticle__ContentPromo .Button:hover {
  background-color: #eee;
}
.BlogArticle__ContentPromo .Button p {
  font-size: 16px;
  line-height: 1em;
}
.BlogArticle__ContentPromo .Button span {
  line-height: 1.25em;
  font-weight: 600;
}
.BlogArticle__ContentPromo .Button__Icon {
  width: auto;
  margin: 0;
}

@media screen and (min-width: 640px) {

  .BlogArticle__ContentPromo {
    padding: 1em 10%;
    flex-direction: row;
    gap: 4em;
  }

}

/* =================== BLOG ARTICLE : SIDE / BOTTOM PROMO =================== */

.BlogArticle__Side {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
}

.BlogArticle__Promo {
  padding: 1em 5%;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  justify-content: space-between;
  display: flex;
  align-items: center;
  gap: 1em;
  color: #fff;
}

.BlogArticle__PromoBox {
  height: 6em;
  margin-top: -2em;
  transform: rotate(-3deg);
}

.BlogArticle__PromoTextContent {
  display: flex;
  align-items: center;
  gap: 1em;
  flex-wrap: wrap;
}

.BlogArticle__PromoSubHeading {
  font-size: 10px;
  text-transform: uppercase;
}

.BlogArticle__PromoHeading {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.25em;
}

.BlogArticle__Promo .Button {
  background-color: var(--color-white);
  padding: 0.75em 1.5em;
  font-size: .75em;
  color: var(--color-black);
  font-weight: 500;
}

.BlogArticle__Promo .Button__Icon {
  height: .85em;
}

.BlogArticle__SideShareIcons {
  margin-top: 2em;
  padding-bottom: 2em;
  display: none;
  position: relative;
  overflow: auto;
}

@media screen and (min-width: 640px) {
  
  .BlogArticle__FeaturedImageWrapper {
    height: 24rem;
  }
  
  .BlogArticle__Content h2 {
    font-size: 2em;
  }
  
  .BlogArticle__Side {
    flex: 1 1 12em;
    position: sticky;
    top: 10em;
    bottom: auto;
    align-self: flex-start;
  }
  
  .BlogArticle__Promo {
    max-height: 32em;
    padding: 2em 2.5em;
    border-radius: 8px;
    gap: 3em;
    position: relative;
    overflow: hidden;
  }
  
  .BlogArticle__PromoTextContent {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .BlogArticle__PromoSubHeading {
    font-size: 18px;
  }
  
  .BlogArticle__PromoHeading {
    margin-top: 16px;
    font-size: 40px;
  }
  
  .BlogArticle__PromoBox {
    height: 100%;
    max-height: 24em;
    margin: 2em auto -6em;
  }
  
  .BlogArticle__Side .Buttons {
    margin-top: 1em;
  }
  
  .BlogArticle__Promo .Button {
    font-size: 14px;
    padding: 1em 2em;
  }

}

@media screen and (min-width: 1024px) {

  .Section.BlogArticle {
    padding: 0 5% 6em;
  }

  .BlogArticle__SideShareIcons {
    display: block;
  }

}

@media screen and (min-width: 1248px) {
  
  
  .BlogArticle__Promo {
    height: calc(100vh - 200px);
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 1em;
  }
  
  .BlogArticle__PromoBox {
    max-width: 15em;
    margin-bottom: -10em;
    transform: rotate(3deg);
    transition: .1s;
    object-fit: contain;
  }

  .BlogArticle__Promo:hover .BlogArticle__PromoBox {
    transform: rotate(4deg) translateY(-1em);
  }
  
  .BlogArticle__PromoSubHeading {
    font-size: 1em;
    font-weight: 500;
  }
  
  .BlogArticle__PromoHeading {
    margin-top: 14px;
    font-size: 28px;
  }
  
}

/* ==================== COPY LINK BUTTON ==================== */

.CopyLinkButton {
  min-width: max-content;
  min-width: 10em;
  background-color: #eee;
  border-radius: 2em;
  padding: .75em 1.25em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5em;
  font-size: .85em;
  font-weight: 500;
  cursor: pointer;
}

.CopyLinkButton:hover {
  background-color: #ddd;
}

.CopyLink p {
  white-space: nowrap;
  text-overflow: ellipsis;
}

.CopyLinkButton svg {
  height: 1em;
}

.NightMode .CopyLinkButton {
  background-color: var(--color-primary);
}


.Section.RulesVideo {
  --arrow-left: -36em;
  --arrow-right: 36em;
  --arrow-top: 2em;
  --arrow-bottom: 20em;
  
  padding: 0 5% 6em;
  position: relative;
  overflow: hidden;
}

.RulesVideo__FloatingArrow {
  width: 10em;
  position: absolute;
  transition: .2s;
}

.RulesVideo__FloatingArrow.Left.Top {
  transform: translate(var(--arrow-left), var(--arrow-top)) rotate(15deg);
}

.RulesVideo__Container:hover .RulesVideo__FloatingArrow.Left.Top {
  transform: translate(calc(var(--arrow-left) + 2em), var(--arrow-top)) rotate(17deg);
}

.RulesVideo__FloatingArrow.Left.Bottom {
  transform: translate(var(--arrow-left), var(--arrow-bottom)) rotate(-15deg);
}

.RulesVideo__Container:hover .RulesVideo__FloatingArrow.Left.Bottom {
  transform: translate(calc(var(--arrow-left) + 2em), var(--arrow-bottom)) rotate(-17deg);
}

.RulesVideo__FloatingArrow.Right.Top {
  transform: translate(var(--arrow-right), var(--arrow-top)) rotate(-15deg) rotateY(180deg);
}

.RulesVideo__Container:hover .RulesVideo__FloatingArrow.Right.Top {
  transform: translate(calc(var(--arrow-right) - 2em), var(--arrow-top)) rotate(-17deg) rotateY(180deg);
}

.RulesVideo__FloatingArrow.Right.Bottom {
  transform: translate(var(--arrow-right), var(--arrow-bottom)) rotate(15deg) rotateY(180deg);
}

.RulesVideo__Container:hover .RulesVideo__FloatingArrow.Right.Bottom {
  transform: translate(calc(var(--arrow-right) - 2em), var(--arrow-bottom)) rotate(17deg) rotateY(180deg);
}

.RulesVideo__VideoWrapper {
  width: 100%;
  border: 4px solid #fff;
  border-radius: 1em;
  overflow: hidden;
  box-shadow: 0 1em 10em 0 rgba(0, 0, 0, .25);
  transform: translateZ(0);
}

.RulesVideo__Video {
  width: 100%;
  min-height: 16em;
}

.RulesVideo__SubHeading {
  margin-top: 4em;
  font-size: .9em;
  font-family: var(--heading-font-family);
  line-height: 1.75em;
}

.RulesVideo__SubHeading a {
  color: var(--color-primary);
  text-decoration: underline;
}

@media screen and (min-width: 640px) {

  .RulesVideo__Video {
    min-height: 30em;
  }

  .RulesVideo__VideoWrapper {
    border-width: 8px;
  }

  .RulesVideo__SubHeading {
    margin-top: 3em;
    font-size: 1.5em;
  }
  
}




/* =================== SECTION : GAMES COLLECTION =================== */

.Section.GamesCollection {
  padding: 4em 5% 8em;
}

.GamesCollection__GamesWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3em;
  row-gap: 6em;
}

.GameCard.Hidden {
  display: none;
}

.GameCard:hover {
  background-color: #f9f9f9;
}

.GameCard__BoxWrapper {
  padding: 0 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.GameCard__Box {
  width: 100%;
  transition: .2s;
  cursor: pointer;
  z-index: 1;
}

.GameCard__BoxWrapper:hover .GameCard__Box {
  transform: rotate(-5deg) scale(1.1);
}

.GameCard__FloatingCard {
  width: 4em;
  background-color: #000;
  border-radius: 4px;
  position: absolute;
  transition: .2s;
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .1);
}

.GameCard__BoxWrapper:hover .GameCard__FloatingCard.Card__1 {
  transform: translate(-9em, -9em) rotate(-10deg);
}

.GameCard__BoxWrapper:hover .GameCard__FloatingCard.Card__2 {
  transform: translate(9em, -9em) rotate(10deg);
}

.GameCard__BoxWrapper:hover .GameCard__FloatingCard.Card__3 {
  transform: translate(-9em, 0em) rotate(-8deg);
}

.GameCard__BoxWrapper:hover .GameCard__FloatingCard.Card__4 {
  transform: translate(9em, 0em) rotate(8deg);
}

.GameCard__Infos {
  min-height: 4em;
  margin-top: 2em;
}

.GameCard__SubHeading {
  font-size: .65em;
  color: var(--color-primary);
  font-family: var(--heading-font-family);
}

.GameCard__Heading {
  margin-top: .25em;
  font-size: .9em;
  font-family: var(--heading-font-family);
}

.GameCard__Tagline {
  margin-top: .5em;
  font-size: .75em;
}

.GameCard__Features {
  margin-top: 1.5em;
  font-size: .5em;
  text-transform: uppercase;
  font-weight: 500;
}

.GameCard__Feature + .GameCard__Feature {
  margin-top: .75em;
}

.GameCard__Feature svg {
  height: .85em;
  margin-right: .5em;
}

.GameCard__CTA {
  margin-top: 2em;
}

.GameCard .Button {
  padding: 1em 1em;
  font-size: .65em;
}

.GameCard__CTA a {
  display: block;
}

.GameCard__CTA a + a {
  margin-top: .5em;
}

.GameCard__Footer {
  margin-top: 1.5em;
  display: flex;
  justify-content: center;
  gap: 1em;
  font-size: .65em;
  text-align: center;
}

.GameCard__StoresIcons {
  display: flex;
  justify-content: center;
  gap: 1em;
}

.GameCard__StoresIcons svg {
  height: 1em;
}

@media screen and (min-width: 640px) {

  .GamesCollection__GamesWrapper {
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 8em;
    column-gap: 4em;
  }
  
}

@media screen and (min-width: 1024px) {

  .GameCard__Heading {
    font-size: 1.5em;
  }

  .GameCard__Tagline {
    font-size: 1.15em;
  }

  .GameCard .Button {
    padding: 1.25em 1.5em;
  }
  
}

/* =================== SECTION : GAMES STORIES =================== */

.Section.CategoryStories {
  padding-top: 3em;
}

.CategoryStories__Container {
  display: flex;
  justify-content: center;
  gap: 2em;
}

.GamesColletion__Story {
  text-align: center;
  cursor: pointer;
  opacity: .75;
}

.GamesColletion__Story.Active {
  opacity: 1;
}

.GamesColletion__Story:hover .GamesColletion__StoryEmoji {
  opacity: .5;
}

.GamesColletion__StoryEmoji {
  width: 4em;
  height: 4em;
  background-color: var(--color-white);
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
}

.GamesColletion__StoryEmoji span {
  display: block;
  font-size: 1.5em;
}

.GamesColletion__StoryName {
  margin-top: .75em;
  font-size: .75rem;
  font-family: var(--heading-font-family);
}

@media screen and (min-width: 640px) {

  .GamesColletion__StoryEmoji {
    width: 4em;
    height: 4em;
  }
  
}

@media screen and (min-width: 1024px) {

  .CategoryStories__Container {
    gap: 3em;
  }

  .GamesColletion__StoryEmoji {
    width: 5em;
    height: 5em;
  }

  .GamesColletion__StoryName {
    font-size: .9rem;
  }
  
}






/* =================== QR Code =================== */

.Gift__Container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap;
  gap: 2em;
}

.GiftHero_Heading {
  text-align: center;
}

.Gift__Screen {
  padding: 0 10%;
  overflow: hidden;
}

.GiftPhone {
  width: 18.5em;
  height: 36em;
  background-image: url('//trou-noir-jeu.myshopify.com/cdn/shop/t/6/assets/gift-phone.png?v=6615848196682341381704876369');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: -10em;
  padding: 4.5% 1.1em;
}

.GiftPhone__Wrapper {
  height: 100%;
  background-color: var(--color-white);
  border-radius: 2em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.GiftPhone__Header {
  padding: 1em 5%;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: .5em;
}

.GiftPhone__Heading {
  font-size: 14px;
  font-weight: 600;
}

.GiftPhone__Status {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--color-gray);
}

.GiftPhone__Status::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--color-green-500);
  margin-right: 5px;
  border-radius: 4px;
  display: inline-block;
}

.GiftPhone__HeaderPhoto {
  width: 2em;
  height: 2em;
  background-color: var(--color-black);
  border-radius: 50%;
  overflow: hidden;
}

.GiftPhone__HeaderPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.GiftPhone__MessagesWrapper {
  padding: 5%;
  display: flex;
  flex-direction: column;
}

.GiftPhone__Message {
  width: auto;
  background-color: #eee;
  padding: .75em 1.25em;
  border-radius: 2em;
  align-self: flex-end;
  font-size: 12px;
  color: var(--color-black);
  font-weight: 500;
}

.GiftPhone__Message:not(:first-child) {
  margin-top: .5em;
}

.GiftPhone__Message.Left {
  background-color: var(--color-black);
  align-self: flex-start;
  color: var(--color-white);
}

.GiftPhone__Message.Left + .GiftPhone__Message.Right,
.GiftPhone__Message.Right + .GiftPhone__Message.Left {
  margin-top: 1em;
}

.GiftPhone__Message.Photo {
  max-width: 14em;
  padding: 0;
  border-radius: 1em;
  overflow: hidden;
}

.GiftPhone__Keyboard {
  width: 100%;
}

.Gift__TextContent {
  padding: 0 5%;
  flex: 1 1 400px;
}

.GiftStep {
  padding: 1.5em 0;
}

.GiftStep:first-child {
  padding-top: 0;
}

.GiftStep:not(:last-child) {
  border-bottom: 1px dashed rgba(0, 0, 0, .2);
}

.GiftStep__Header {
  display: flex;
  gap: 1em;
}

.GiftStep__Index {
  min-width: 30px;
  height: 30px;
  background-color: var(--color-black);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: var(--color-white);
  font-weight: 600;
}

.GiftStep__Heading {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5em;
  text-transform: uppercase;
}

.GiftStep__Paragraphe {
  margin-top: .75em;
  line-height: 1.75em;
  font-weight: 300;
}

.GiftStep__Paragraphe a {
  color: var(--text-color);
  font-weight: 500;
  text-decoration: underline;
}

.GiftStep__Stores {
  margin-top: 1em;
  display: flex;
  gap: .5em;
  flex-wrap: wrap;
  overflow: auto;
}



.GiftOtherStores {
  background-color: var(--color-black);
  color: var(--color-white);
}

.GiftOtherStores__Image {
  width: 100%;
}

.GiftOtherStores__Buttons {
  padding: 0 5% 2em;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em;
}

.GiftOtherStores__Button {
  background-color: #fff;
  padding: 1.25em 2.5em;
  color: var(--black);
  font-weight: 600;
  text-transform: uppercase;
}

@media screen and (min-width: 640px) {

  .Gift__Screen {
    padding: 0 5%;
    overflow: visible;
  }
  
  .GiftPhone {
    margin-bottom: 0;
    transform: rotate(-5deg);
  }
  
}

@media screen and (min-width: 728px) {
  
  .Section.Gift {
    padding-bottom: 6em;
  }
  
  .Gift__Container {
    align-items: center;
    flex-direction: row;
  }
  
  .GiftOtherStores__Image {
    display: none;
  }
  
  .GiftOtherStores__Buttons {
    margin-top: 2em;
    padding-bottom: 10em;
  }
  
}



/* =================== SECTION : QR CODE REDIRECTION =================== */

.Section.QRCodeRedirection {
  font-family: var(--heading-font-family);
}

.QRCodeRedirection__Heading {
  margin-bottom: 1em;
  font-size: 1.25em;
}

.QRCodeRedirection__SubHeading {
  font-size: 1.5em;
  line-height: 1.5em;
}

.QRCodeRedirection__Link {
  margin-top: 2.5em;
  text-decoration: underline;
}

@media screen and (min-width: 1024px) {

  .QRCodeRedirection__SubHeading {
    font-size: 3em;
    font-weight: 500;
  }
  
}

/* =================== SECTION : HERO BOX =================== */

.HeroBox {
  overflow: hidden;
}

.HeroBox__Wrapper {
  padding: 7em 5% 0;
  border-top: 1px solid #000;
  display: flex;
  flex-direction: column;
}

.HeroBox__BoxWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.HeroBox__Box {
  height: 24em;
  border-radius: .5em;
  box-shadow: 0px 0px 10em 0px rgba(0, 0, 0, .1);
  z-index: 4;
}

.HeroBox__Card {
  height: 12em;
  border-radius: 8px;
  position: absolute;
  will-change: transform;
}

.HeroBox__TextWrapper {
  margin-top: 2em;
}

.HeroBox__TextWrapper .Buttons {
  margin-top: 2em;
}

.HeroBox__TestimoniesWrapper {
  width: 100%;
  padding: 2em 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.HeroBox__Testimony {
  display: flex;
  align-items: center;
  text-align: center;
  font-size: .85em;
}

.HeroBox__Testimony svg {
  height: 3em;
}

@media screen and (min-width: 640px) {

  .HeroBox__Testimony {
    font-size: 1.25em;
  }

  .HeroBox__Testimony svg {
    height: 4em;
  }
  
}

.HeroBox__TestimonyContent {
  font-size: 1.1em;
  font-weight: 500;
}

.HeroBox__TestimonyAuthor {
  margin-top: .5em;
  font-size: .9em;
}

.HomeHero__Footer {
  width: 100%;
  display: none;
  position: relative;
  z-index: 5;
}

.rounded-div-wrap {
  width: 100%;
  height: 0vh;
  will-change: height;
  display: flex;
  justify-content: center;
  position: relative;
  top: 0;
  overflow: hidden;
}

.rounded-div {
  content: "";
  width: 400%;
  height: 750%;
  background: var(--primary-color);
  display: block;
  position: absolute;
  border-radius: 50%;
  z-index: 1;
}

@media screen and (min-width: 640px) {

  .HeroBox__Wrapper {
    flex-direction: column-reverse;
  }

  .HeroBox__BoxWrapper {
    margin-top: 2.5em;
    align-items: flex-end;
  }
  
  .rounded-div-wrap {
    height: 150px;
  }

  .HeroBox__Card {
    position: relative;
  }
  
  .HeroBox__Card.Left {
    margin-right: -3em;
  }
  
  .HeroBox__Card.Right {
    margin-left: -3em;
  }

  .HeroBox__Card.Right__1 {
    z-index: 2;
  }
  
  .HeroBox__Card.Right__2 {
    z-index: 1;
  }

  .HeroBox__TextWrapper {
    margin-top: 0;
  }
  
}

@media screen and (min-width: 728px) {
  

  .HeroBox__BoxWrapper {
    margin-top: 3em;
  }
  
  .HeroBox .features-list {
    display: none;
  }
  
  .HeroBox__Card {
    width: 14em;
    height: 20em;
    background-color: #eee;
    border-radius: 1em;
  }
  
  .HeroBox__Box {
    width: 20em;
    height: 42em;
    margin-bottom: -8em;
    z-index: 4;
  }
  
}

@media screen and (min-width: 1024px) {
  
  .HeroBox__Wrapper {
    padding: 10em 5% 0em;
  }

  .HeroBox__BoxWrapper {
    margin-top: 4em;
  }
  
}






.Section.NotFound {
  min-height: 100vh;
  padding: 10em 5% 2em;
  display: flex;
  justify-content: center;
  font-family: var(--heading-font-family);
}

.NotFound__Heading {
  font-size: 6em;
}

.NotFound__SubHeading {
  font-size: 1.5em;
}

.NotFound__Button {
  margin-top: 2em;
}

@media screen and (min-width: 640px) {
  
  .NotFound__Heading {
    font-size: 12em;
  }
  
  .NotFound__SubHeading {
    font-size: 3em;
  }
  
}

@media screen and (min-width: 1024px) {
  
  .NotFound__Heading {
    font-size: 20em;
  }
  
  .NotFound__SubHeading {
    font-size: 4em;
  }

  .NotFound__Button {
    margin-top: 4em;
  }
  
}

/* ==================== STORE LOCATOR ==================== */

.Shops__StoreLocator {
  padding: 0 5% 6em;
}

#stockist-widget .stockist-search-form {
  margin-bottom: 0;
}

#stockist-widget .stockist-query-entry {
  width: 100%;
  display: flex !important;
}

#stockist-widget .stockist-query-entry .stockist-search-button {
  width: 4em !important;
  height: 4em !important;
}

.Shops__StoreLocator .stockist-search-field {
  padding: 2em !important;
  border: 0 !important;
  box-shadow: 0 1em 10em 0 rgba(0, 0, 0, .1);
  font-size: .8em !important;
  font-family: var(--heading-font-family);
}

.Shops__StoreLocator .stockist-search-field:focus {
  box-shadow: 0 1em 10em 0 rgba(0, 0, 0, .25); 
}

#stockist-widget .stockist-query-entry .stockist-search-field {
  height: auto;
}

.Shops__StoreLocator .stockist-feature-bg-color {
  width: 3em !important;
  height: 3em !important;
  background-color: var(--color-black);
  margin: 0 !important;
  border-radius: 0 !important;
}

#stockist-widget .stockist-horizontal {
  background-color: #fff;
  margin-top: 0;
}

#stockist-widget .stockist-query-entry .stockist-search-button button {
  width: 100% !important;
  height: 100% !important;
}

#stockist-widget .stockist-result-list ul {
  margin-right: 0;
}

#stockist-widget .stockist-result-list ul>li {
  padding: 1.5em 0;
}

#stockist-widget .stockist-result-list ul>li.stockist-selected {
  background-color: #f9f9f9;
}

.stockist-map-inner,
.stockist-result-list {
  min-height: 28em !important;
}

#stockist-widget .stockist-list-result>div {
  padding-left: 100px;
}

#stockist-widget .stockist-list-result .stockist-result-distance {
  left: 15px;
  top: 36px;
}

.stockist-result-distance-text {
  margin-top: .5em !important;
  display: block;
}

.Shops__StoreLocator .stockist-result-name {
  font-size: .9em;
  font-family: var(--heading-font-family);
  font-weight: 400 !important;
}

.stockist-result-address {
  margin-top: .5em !important;
  padding-right: 1em !important;
  font-size: .9em;
  color: var(--color-gray);
  line-height: 1.5em;
}

.stockist-result-details a {
  color: var(--color-link);
  font-weight: 500;
  text-decoration: underline;
}

#stockist-widget .stockist-map {
  width: 100%;
  position: relative !important;
  left: auto !important;
}

@media screen and (min-width: 640px) {

  .Shops__StoreLocator .stockist-search-field {
    padding: 2.5em 2em !important;
    font-size: .9em !important;
  }
  
  .Shops__StoreLocator .stockist-feature-bg-color {
    width: 5em !important;
    height: 5em !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  
  #stockist-widget .stockist-query-entry .stockist-search-button {
    width: 5em !important;
    height: 5em !important;
  }

  #stockist-widget .stockist-result-list ul>li {
    padding: 2em 0;
  }
  
}


@media screen and (min-width: 1024px) {
  
  #stockist-widget .stockist-horizontal {
    display: flex;
    flex-direction: row !important;
  }

  #stockist-widget .stockist-horizontal .stockist-side-panel {
    flex: 1 1 32em;
    width: 100% !important;
  }

  .Shops__StoreLocator .stockist-search-field {
    padding: 1.5em 2em !important;
    font-size: 1em !important;
  }

  #stockist-widget .stockist-map {
    flex: 1 1 56em;
  }
  
}






/* ==================== POPUP OVERLAY ==================== */

.PopupOverlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .75);
  padding: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 30;
}
.PopupOverlay:not(.Active) {
  display: none;
}

.Popup {
  width: 100%;
  max-width: 56em;
  min-height: 24em;
  max-height: 90vh;
  background-color: var(--color-white);
  border-radius: 1em;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  color: var(--color-black);
  overflow: hidden;
}

.Popup.Background__Black {
  background-color: var(--color-black);
  color: var(--color-white);
}

.Popup__Close {
  width: 2.5em;
  height: 2.5em;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 1em;
  top: 1em;
  cursor: pointer;
}
.Popup__Close:hover {
  background-color: rgba(0, 0, 0, .75);
}
.Popup__Close img {
  height: 30%;
  transform: rotate(45deg);
}
.Popup .Popup__ImageContent,
.Popup .Popup__TextContent {
  flex: 1 1 16em;
}
.Popup__ImageContent img {
  width: 100%;
  height: 100%;
  max-height: 16em;
  object-fit: cover;
}
.Popup__TextContent {
  padding: 2em 5% 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.Popup__TextContent .UpTitle {
  font-size: 1.15em;
}
.Popup__Heading {
  font-size: 1.75em;
}
.Popup .Button {
  margin-top: 3em;
}

@media screen and (min-width: 640px) {
  .Popup__ImageContent img {
    max-height: none;
  }
  .Popup__TextContent {
    padding: 4em 5% 5%;
  }
  .Popup__TextContent .UpTitle {
    font-size: 1.25em;
  }
  .Popup__Heading {
    font-size: 2.25em;
  }
}





/* =================== FLYING BUTTON =================== */

.FlyingButton {
  padding: 1em 1.5em 1.2em;
  border: 1px solid var(--color-white);
  border-radius: var(--button-border-radius);
  display: flex;
  align-items: center;
  gap: .65em;
  position: fixed;
  right: 2em;
  bottom: 2em;
  font-size: 12px;
  color: var(--color-white);
  font-family: var(--heading-font-family);
  z-index: 10;
  box-shadow: 0px 1em 100px 0px rgba(0, 0, 0, .1);
  cursor: pointer;
}

.FlyingButton.Primary {
  background-color: var(--color-primary); 
}

.FlyingButton.White {
  background-color: var(--color-white); 
  color: var(--color-black);
}

.FlyingButton.Black {
  background-color: var(--color-black); 
}

.FlyingButton.Active {
  display: flex;
}

.FlyingButton svg {
  height: 1em;
  margin-bottom: -.4em;
}

@media screen and (min-width: 640px) {
  
  .FlyingButton {
    padding: 1.25em 2em 1.35em;
    border: 2px solid var(--color-white);
    right: 4em;
    bottom: 3em;
  }
  
}




/* ==================== CONTACT FORM ==================== */

.Section.ContactForm {
  padding-top: 0;
}

.ContactForm__Overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .35);
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
}

.ContactForm__Overlay.Active {
  display: block;
}

.ContactForm__Field + .ContactForm__Field {
  margin-top: 1.25em;
}

.ContactForm__Notification {
  margin-bottom: 2em;
  padding: 1.5em 1.5em 1.7em;
  border-radius: 4px;
  font-size: .85em;
  font-family: var(--heading-font-family);
}

.ContactForm__Notification.Success {
  background-color: #c7e7ca;
  color: #2d7a11;
}

.ContactForm *:is(input, textarea) {
  width: 100%;
  padding: 1.5em;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 4px;
  font-size: .85em;
  font-family: var(--heading-font-family);
  box-shadow: 0 1em 6em 0 rgba(0, 0, 0, .05);
}

.ContactForm *:is(input, textarea):focus {
  outline: 2px solid var(--color-primary);
  position: relative;
  z-index: 1;
}

.ContactForm__Button {
  margin-top: 2em;
  display: flex;
  justify-content: center;
}

.ContactForm__Button .Button {
  border: 0;
}

@media screen and (min-width: 1024px) {

  .ContactForm *:is(input, textarea) {
    font-size: 1em;
  }
  
}


/* ==================== RATINGS STARS ==================== */

.RatingStars {
  display: flex;
  gap: .25em;
}

.RatingStars.center {
  justify-content: center;
}

.RatingStars.right {
  justify-content: flex-end;
}

.RatingStars svg {
  height: 1.25em;
}