/* ROOT VARIABLES */
:root {
	--BG:#000000;
	--ACCENT:#4B0082;
	--ACCENT-HOVER:rgba(75,0,130,0.25);

	--HEADER-PADDING:1.2rem;
	--FOOTER-GAP:1.2rem;

	--MAX-WIDTH:900px;

	--H1-LANDING:3.25rem;
	--H2-LANDING:1.75rem;
	--LANDING-GAP:1.5rem;

	--TWO-COL-GAP:4rem;
	--COLUMN-MIN-WIDTH:320px;
	--STRIPE-WRAPPER-MAX:400px;
}

/* RESET */
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* GLOBAL */
html, body {
  background:var(--BG);
  font-family:"BBH Sans Bogle", sans-serif;
  color:var(--ACCENT);
  line-height:1.4;
  overflow-x:hidden;
  overflow-y:hidden;   /* ZERO GHOST SCROLL */
}

/* GLOBAL TEXT */
h1, h2, p {
  text-align:center;
  margin-bottom:1rem;
}

/* LINKS */
a {
  color:var(--ACCENT);
  text-decoration:none;
  transition:color 0.25s ease;
}
a:hover {
  color:var(--ACCENT-HOVER);
}

/* HEADER */
#site-header {
  position:sticky;
  top:0;
  width:100%;
  text-align:center;
  padding:1rem 0 0.5rem 0;
  border-bottom:4px solid var(--ACCENT);
  background:var(--BG);
  box-shadow:0 3px 12px rgba(75,0,130,0.25);
  z-index:9999;
}
#site-header h1 {
  margin:0;
  width:100%;
}
#site-header h1 a {
  display:block;
  width:100%;
  padding:0.4rem 0;
}

/* MAIN */
main {
  height:calc(100vh - 170px);
  max-width:var(--MAX-WIDTH);
  margin:0 auto;
  padding:1.25rem 2rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden; /* ZERO SCROLL GLOBAL */
}

/* LANDING */
#landing {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--LANDING-GAP);
}

/* LANDING TITLE */
#landing h1 {
  font-size:var(--H1-LANDING);
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
}

/* LANDING BUTTON */
#landing h2 {
  font-size:var(--H2-LANDING);
}
#landing h2 a {
  display:inline-block;
  padding:0.4rem 1.25rem;
  border:2px solid var(--ACCENT);
  text-transform:uppercase;
  letter-spacing:0.5px;
  transition:all 0.25s ease;
}
#landing h2 a:hover {
  background:var(--ACCENT);
  color:#000000;
}

/* TWO COLUMNS */
.two-columns {
  display:flex;
  justify-content:center;
  gap:var(--TWO-COL-GAP);
  flex-wrap:nowrap;
}
.two-columns > div {
  min-width:var(--COLUMN-MIN-WIDTH);
  max-width:var(--STRIPE-WRAPPER-MAX);
}

/* SECTIONS WIDTH */
#about, #cancel, #contact,
#legal, #privacy, #refund,
#success, #terms {
  margin:0 auto;
  padding:2rem;
}

#about { max-width:700px; }
#cancel { max-width:600px; }
#contact { max-width:650px; }
#legal { max-width:650px; }
#privacy { max-width:600px; }
#refund { max-width:600px; }
#success { max-width:600px; }
#terms { max-width:700px; }

/* FOOTER */
footer {
  position:sticky;
  bottom:0;
  width:100%;
  text-align:center;
  padding:0.5rem 0 1rem 0;
  border-top:4px solid var(--ACCENT);
  background:var(--BG);
  box-shadow:0 -3px 12px rgba(75,0,130,0.25);
  z-index:9998;
}
footer a {
  text-decoration:none !important;
}

/* FOOTER — SOCIAL UNDER */
#footer-social-bottom {
  margin-top:0.75rem;
  padding-bottom:0.75rem;
  display:flex;
  justify-content:center;
  align-items:center;   /* ALIGNEMENT PERFECT HORIZONTAL */
  gap:1.5rem;
}

/* ALIGNEMENT PERFECT + PROPORTIONS FIXES */
#footer-social-bottom img {
  width:auto;
  object-fit:contain;
  display:block;
}

/* IG & KICK (CARRÉS) */
#footer-social-bottom .icon-ig,
#footer-social-bottom .icon-kick {
  height:26px;
}

/* MYM (RECTANGLE) — ALIGNEMENT OPTIQUE */
#footer-social-bottom .icon-mym {
  height:12.6875px;
  width:auto;
}

/* MOBILE */
@media (max-width:600px) {

  main {
    height:calc(100vh - 150px);
    padding:1rem 0.75rem;
    overflow:hidden;   /* ZERO SCROLL MOBILE */
  }

  /* HIDE COPYRIGHT LINE ON MOBILE */
  footer p {
    display:none;
  }

  #landing h1 { font-size:2.4rem; }
  #landing h2 { font-size:1.4rem; }

  .two-columns {
    flex-wrap:wrap;
    gap:2rem;
  }

  /* SOCIAL ICONS MOBILE — SAME SIZES AS DESKTOP (100%) */
  #footer-social-bottom {
    gap:1.2rem;
  }

  #footer-social-bottom .icon-ig,
  #footer-social-bottom .icon-kick {
    height:26px;
  }

  #footer-social-bottom .icon-mym {
    height:11.6875px;
  }
}


/* STRIPE CARDS */
.card {
  border:2px solid var(--ACCENT);
  padding:1.5rem;
  border-radius:0;
  display:flex;
  justify-content:center;
  align-items:center;
  background:var(--BG);
  width:100%;
}

/* FIX WIDTH STRIPE WIDGET */
.card stripe-buy-button {
  width:100%;
  max-width:var(--STRIPE-WRAPPER-MAX);
}

/* MOBILE */
@media (max-width:600px) {

  main {
    height:calc(100vh - 150px);
    padding:1rem 0.75rem;
    overflow:hidden;   /* ZERO SCROLL MOBILE GLOBAL */
  }

  /* HIDE COPYRIGHT LINE ON MOBILE */
  footer p {
    display:none;
  }

  #landing h1 { font-size:2.4rem; }
  #landing h2 { font-size:1.4rem; }

  .two-columns {
    flex-wrap:wrap;
    gap:2rem;
  }

  /* SOCIAL ICONS MOBILE — SAME SIZES AS DESKTOP (100%) */
  #footer-social-bottom {
    gap:1.2rem;
  }

  #footer-social-bottom .icon-ig,
  #footer-social-bottom .icon-kick {
    height:26px;
  }

  #footer-social-bottom .icon-mym {
    height:11.6875px;
  }

  /* MAROQUINERIE — ENABLE SCROLL */
  .ALLOW-SCROLL {
    overflow-y:auto !important;
  }
  main#maroquinerie {
    overflow-y:auto !important;
  }

  /* CARDS MOBILE */
  .card {
    padding:1rem;
  }
}
