/*
Theme Name: Sûr Sûr
Author: Gymnase Studio Web
Description: Theme custom pour Sûr Sûr — Supplément de discernement
Version: 1.0.0
Text Domain: sursur
*/

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  overflow: hidden;
  font-family: 'Sofia Sans Semi Condensed', sans-serif;
  background: #00335f;
  color: #fff;
}
.motion-toggle,
button.motion-toggle {
  position: absolute !important;
  top: 50% !important;
  right: 86px !important;
  left: auto !important;
  transform: translateY(-50%);
  width: 29px !important;
  height: 27px !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 2 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  color: #8DF4F8;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), margin-top 1.5s ease-in-out;
}
.motion-toggle:hover  { transform: translateY(-50%) scale(1.12); }
.motion-toggle:active { transform: translateY(-50%) scale(0.95); }
.motion-toggle.is-raised { margin-top: -40px !important; }
.motion-toggle:focus-visible {
  outline: 3px solid #fff172;
  outline-offset: 4px;
  border-radius: 6px;
}
.motion-toggle__stack {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.motion-toggle__pause,
.motion-toggle__play {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: 50% 50%;
}
.motion-toggle__pause { opacity: 1;  transform: scale(1)   rotate(0deg); }
.motion-toggle__play  { opacity: 0;  transform: scale(0.6) rotate(-90deg); }
html.motion-paused .motion-toggle__pause { opacity: 0; transform: scale(0.6) rotate(90deg); }
html.motion-paused .motion-toggle__play  { opacity: 1; transform: scale(1)   rotate(0deg); }
html.motion-paused *,
html.motion-paused *::before,
html.motion-paused *::after {
  animation-play-state: paused !important;
}
html.motion-paused .marquee-track,
html.motion-paused .nouveau-star,
html.motion-paused .arrow-btn svg,
html.motion-paused .noise-overlay,
html.motion-paused .scroll-hint { animation: none !important; }

@media (max-width: 767.98px) {
  .motion-toggle,
  button.motion-toggle {
    right: auto !important;
    left: 5vw !important;
    width: clamp(26px, 8vw, 36px) !important;
    height: clamp(24px, 7.5vw, 34px) !important;
  }
  .motion-toggle:hover,
  .motion-toggle:active { transform: translateY(-50%) scale(1); }
}
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999;
  background: #fff172;
  color: #130535;
  padding: 12px 24px;
  font-family: 'Sofia Sans Semi Condensed', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  white-space: nowrap;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #fff172;
  outline-offset: 2px;
}

*:focus-visible {
  outline: 3px solid #fff172;
  outline-offset: 3px;
}
a:focus-visible,
button:focus-visible {
  outline: 3px solid #fff172;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none !important; }
  .noise-overlay { animation: none !important; }
  .nouveau-star { animation: none !important; }
  .arrow-btn svg { animation: none !important; }
  .page-loader { display: none !important; }
  .snap-container { scroll-snap-type: none !important; }
}
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #00335f;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}
.page-loader.loaded {
  opacity: 0;
  pointer-events: none;
}
.page-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
.loader-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.loader-count {
  font-family: 'League Gothic', sans-serif;
  font-weight: 100;
  font-size: clamp(60px, 9vw, 127px);
  line-height: 0.95;
  letter-spacing: -3.8px;
  color: #26f4ff;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  text-shadow: 0 0 48px rgba(38, 244, 255, 0.40);
}
.loader-count #loader-percent {
  display: inline-block;
  min-width: 3ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.loader-count .loader-sign {
  margin-left: 0.04em;
}
.loader-bar {
  width: min(280px, 58vw);
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 2px;
  overflow: hidden;
}
.loader-bar__fill {
  display: block;
  height: 100%;
  width: 0;
  background: #26f4ff;
  box-shadow: 0 0 12px rgba(38, 244, 255, 0.70);
}
.noise-overlay {
  position: fixed;
  inset: -100%;
  width: 300%;
  height: 300%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.45;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  animation: grainShift 0.5s steps(4) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-5%, -10%); }
  50%  { transform: translate(8%, 3%); }
  75%  { transform: translate(-3%, 7%); }
  100% { transform: translate(5%, -5%); }
}

/* LITE MODE (low-power devices, set via html.lite in hero.js): drop the
   GPU-heavy effects — full-screen grain + mix-blend-mode, per-card grain blend,
   cloud blur — and show only two candies (the other two videos aren't loaded). */
html.lite .noise-overlay { display: none !important; }
html.lite .page-loader::before { display: none !important; }
html.lite .carousel-card::after { display: none !important; }
html.lite .cloud { filter: none !important; }
html.lite #candy-2,
html.lite #candy-3 { display: none !important; }
/* Lite mode keeps only the top-left candy + candy-4; make the top-left one ~4×
   bigger as a hero feature. Capped by vh/vw so it can't overflow the screen. */
html.lite #candy-1 {
  width:  min(230px, 23vh, 50vw) !important;
  height: min(244px, 24.4vh, 53vw) !important;
}

.gradient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
}
.gradient-layer {
  position: absolute;
  inset: 0;
}
#grad-from {
  background: linear-gradient(180deg, #00335f 30%, #0a5a7a 58%, #17899e 78%, #2cfffb 100%);
}
#grad-to {
  opacity: 0;
}
.snap-container {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  /* Native scroll-snap is OFF on every screen. */
  scroll-snap-type: none;
  -webkit-overflow-scrolling: touch;
}
.snap-section {
  width: 100%;
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* MUST be `auto`, not `none`. */
  pointer-events: auto;
}
.marquee-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 34px;
  background: #fff172;
  z-index: 1000;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.marquee-track {
  display: flex;
  white-space: nowrap;
  animation: marquee 20s linear infinite;
}
.marquee-track span {
  font-family: 'Iosevka Charon Mono', monospace;
  font-size: 18px;
  color: #130535;
  text-transform: uppercase;
  padding: 0 8px;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.site-header {
  position: fixed;
  top: 34px;
  left: 0;
  width: 100%;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 40px;
}
.site-header .logo {
  display: block;
  text-decoration: none;
  cursor: pointer;
}
.site-header .logo .logo-svg {
  display: block;
  width: 113px;
  height: auto;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.site-header .logo:hover .logo-svg {
  transform: scale(1.12);
}
.cart-icon {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: block;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cart-icon:hover {
  transform: translateY(-50%) scale(1.12);
}
.cart-icon svg {
  display: block;
}
.cloud {
  position: fixed;
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.cloud-left {
  left: max(-200px, -13.9vw);
  top: 8%;
  width: min(700px, 48.6vw);
  height: min(410px, 28.5vw);
  filter: blur(0.5px);
}
.cloud-right {
  right: max(-220px, -15.3vw);
  top: 13%;
  width: min(880px, 61.1vw);
  height: min(540px, 37.5vw);
  filter: blur(0px);
}
.cloud img { width: 100%; height: auto; }
.cloud-left img { opacity: 1; }
.cloud-right img { opacity: 1; }
.cloud-set2.cloud-left {
  left: min(80px, 5.6vw);
  top: 45%;
  width: min(500px, 34.7vw);
  height: min(300px, 20.8vw);
  filter: blur(1.4px);
}
.cloud-set2.cloud-right {
  right: max(-250px, -17.4vw);
  top: 5%;
  width: min(800px, 55.6vw);
  height: min(480px, 33.3vw);
  filter: blur(0.3px);
}
.cloud-set3.cloud-left {
  left: max(-230px, -16vw);
  top: 38%;
  width: min(760px, 52.8vw);
  height: min(450px, 31.3vw);
  filter: blur(0.3px);
}
.cloud-set3.cloud-right {
  right: max(-60px, -4.2vw);
  top: 28%;
  width: min(540px, 37.5vw);
  height: min(330px, 22.9vw);
  filter: blur(1.3px);
}
.cloud-set4.cloud-left {
  left: max(-120px, -8.3vw);
  top: 22%;
  width: min(620px, 43.1vw);
  height: min(370px, 25.7vw);
  filter: blur(0.9px);
}
.cloud-set4.cloud-right {
  right: max(-200px, -13.9vw);
  top: 16%;
  width: min(900px, 62.5vw);
  height: min(560px, 38.9vw);
  filter: blur(0px);
}
.cloud-set5.cloud-left {
  left: max(-180px, -12.5vw);
  top: 14%;
  width: min(720px, 50vw);
  height: min(430px, 29.9vw);
  filter: blur(0.4px);
}
.cloud-set5.cloud-right {
  right: max(-70px, -4.9vw);
  top: 42%;
  width: min(540px, 37.5vw);
  height: min(330px, 22.9vw);
  filter: blur(1.2px);
}
.cloud-set6.cloud-left {
  left: max(-90px, -6.3vw);
  top: 30%;
  width: min(600px, 41.7vw);
  height: min(360px, 25vw);
  filter: blur(0.9px);
}
.cloud-set6.cloud-right {
  right: max(-220px, -15.3vw);
  top: 12%;
  width: min(840px, 58.3vw);
  height: min(510px, 35.4vw);
  filter: blur(0px);
}
.bottle-container {
  position: fixed;
  z-index: 20;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -62%) rotate(-15deg);
  width: min(560px, 56vh);
  height: min(600px, 60vh);
  will-change: transform, opacity;
  transform-style: preserve-3d;
  /* Decorative only — never the target of a click. */
  pointer-events: none;
}
#pot-canvas { width: 100%; height: 100%; object-fit: contain; }
#pot-video  { width: 100%; height: 100%; object-fit: contain; display: block; }
.nouveau-badge {
  position: fixed;
  top: calc(50% - min(260px, 26vh));
  left: calc(50% + min(40px, 4vh));
  right: auto;
  z-index: 60;
  width: min(140px, 14vh);
  height: min(140px, 14vh);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Decorative — NOT a link, no click behaviour. */
  cursor: default;
  pointer-events: auto;
}
.nouveau-star {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #FFE55C;
  clip-path: polygon(
    50.00% 0.00%, 53.76% 20.24%, 62.43% 1.57%, 61.04% 22.11%,
    74.09% 6.18%, 67.63% 25.73%, 84.23% 13.55%, 73.12% 30.88%,
    92.22% 23.21%, 77.14% 37.23%, 97.55% 34.55%, 79.47% 44.38%,
    99.90% 46.86%, 79.94% 51.88%, 99.11% 59.37%, 78.53% 59.27%,
    95.24% 71.29%, 75.33% 66.07%, 88.53% 81.87%, 70.54% 71.87%,
    79.39% 90.45%, 64.45% 76.29%, 68.41% 96.49%, 57.46% 79.06%,
    56.27% 99.61%, 50.00% 80.00%, 43.73% 99.61%, 42.54% 79.06%,
    31.59% 96.49%, 35.55% 76.29%, 20.61% 90.45%, 29.46% 71.87%,
    11.47% 81.87%, 24.67% 66.07%, 4.76% 71.29%, 21.47% 59.27%,
    0.89% 59.37%, 20.06% 51.88%, 0.10% 46.86%, 20.53% 44.38%,
    2.45% 34.55%, 22.86% 37.23%, 7.78% 23.21%, 26.88% 30.88%,
    15.77% 13.55%, 32.37% 25.73%, 25.91% 6.18%, 38.96% 22.11%,
    37.57% 1.57%, 46.24% 20.24%
  );
  animation: rotateStar 20s linear infinite;
}
.nouveau-text {
  position: relative;
  z-index: 2;
  font-family: 'League Gothic', sans-serif;
  font-size: min(22px, 2.2vh);
  color: #064871;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  letter-spacing: 1px;
}
@keyframes rotateStar {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(10px); }
  50% { transform: translateY(-3px); }
  70% { transform: translateY(4px); }
  85% { transform: translateY(-1px); }
}
/* Gentle float (used by the 6-trucs + carousel "next" arrows) instead of the bounce.
   Rests at the top (0) and bobs down, so it eases at the EXTREMES (not mid-travel)
   and can be paused/resumed at rest without a jump. */
@keyframes arrowFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
.candy {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  will-change: transform, opacity;
  transform-origin: center center;
}
.candy-canvas { width: 100%; height: 100%; object-fit: contain; }
.candy-video  { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.candy-1 { width: min(115px, 11.5vh); height: min(122px, 12.2vh); top: 8%;
  left:  min(max(22vw, calc(50% - 420px)), calc(50% - min(280px,28vh) - 24px - min(115px,11.5vh))); filter: blur(0.7px); }
.candy-2 { width: min(200px, 20vh);   height: min(190px, 19vh);   top: 38%;
  left:  min(max(5vw, calc(50% - 700px)), calc(50% - min(280px,28vh) - 24px - min(200px,20vh)));    filter: blur(0.5px); }
.candy-3 { width: min(265px, 26.5vh); height: min(278px, 27.8vh); top: 3%;
  right: min(max(9vw, calc(50% - 540px)), calc(50% - min(280px,28vh) - 24px - min(265px,26.5vh))); filter: blur(0.6px); }
.candy-4 { width: min(400px, 40vh);   height: min(420px, 42vh);   top: 70%;
  right: min(max(2vw, calc(50% - 735px)), calc(50% - 351px - 24px - min(400px,40vh)));             filter: blur(0px); }
@media (min-width: 1025px) and (max-height: 649.98px) {
  .bottle-container { width: 364px; height: 390px; }
  .candy-1 { width: 75px;  height: 79px;
    left:  min(max(22vw, calc(50% - 420px)), calc(50% - 182px - 24px - 75px)); }
  .candy-2 { width: 130px; height: 124px;
    left:  min(max(5vw, calc(50% - 700px)),  calc(50% - 182px - 24px - 130px)); }
  .candy-3 { width: 172px; height: 181px;
    right: min(max(9vw, calc(50% - 540px)),  calc(50% - 182px - 24px - 172px)); }
  .candy-4 { width: 260px; height: 273px;
    right: min(max(2vw, calc(50% - 735px)),  calc(50% - 351px - 24px - 260px)); }
  .nouveau-badge { top: calc(50% - 169px); left: calc(50% + 26px); width: 91px; height: 91px; }
  .nouveau-text  { font-size: 14px; }
}
.section-text {
  position: fixed;
  z-index: 25;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform, opacity, filter;
}
.s1-layer {
  justify-content: flex-end;
  padding-bottom: 16vh;
}
.headline-wrapper {
  text-align: center;
  padding: 0 40px;
  perspective: 800px;
}
.headline {
  font-family: 'League Gothic', sans-serif;
  font-weight: 100;
  font-size: clamp(60px, 9vw, 127px);
  color: #26f4ff;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -3.8px;
}
.headline .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.1em 5px 0;
}
.headline .word-inner {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.h-char {
  display: inline-block;
  will-change: transform;
  transform-origin: center center;
}
.subtitle {
  text-align: center;
  max-width: 702px;
  margin-top: 24px;
  font-size: 24px;
  line-height: 29px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 30, 60, 0.55), 0 0 14px rgba(0, 30, 60, 0.45);
}
.subtitle .sub-line-clip {
  display: block;
  overflow: hidden;
}
.subtitle .sub-line-word {
  display: inline-block;
  will-change: transform;
}
.subtitle .sub-line-space {
  display: inline;
  white-space: pre;
}
.s2-layer { opacity: 0; }
.jujube-headline {
  font-family: 'League Gothic', sans-serif;
  font-size: clamp(80px, 12vw, 172px);
  font-weight: 100;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -2px;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0, 30, 60, 0.5), 0 0 22px rgba(0, 30, 60, 0.35);
}
.jujube-line { display: block; }
.jujube-number { color: #fff; margin-right: 0.15em; }
.jujube-word { color: #fff172; }
.s3-layer { opacity: 0; }
.benefits-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 40vh;
}
.benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.benefit-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.benefit-title {
  font-family: 'League Gothic', sans-serif;
  font-weight: 100;
  font-size: clamp(28px, 4.2vw, 48px);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 30, 60, 0.55), 0 0 18px rgba(0, 30, 60, 0.45);
}
.benefit-separator {
  font-family: 'League Gothic', sans-serif;
  font-size: 24px;
  color: #fff172;
  opacity: 0.7;
}
.s4-layer { opacity: 0; }
.logo-large {
  width: clamp(500px, 70vw, 1000px);
  height: auto;
  object-fit: contain;
}
@media (min-width: 768px) {
  .s4-layer { justify-content: flex-end; }
  .logo-large {
    width: auto;
    height: 98.25vh;
  }
}
/* z-index above the snap-container (50) so the "Découvre les trucs" reveal arrow */
.s5-layer { opacity: 0; z-index: 55; }
.reveal-headline {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: clamp(64px, 7.5vw, 108px);
  color: #fff172;
  text-transform: uppercase;
  line-height: 0.862;
  text-align: center;
  letter-spacing: 0;
}
.reveal-headline .r-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.1em 5px 0;
}
.reveal-headline .r-word-inner {
  display: inline-block;
  will-change: transform;
}
.reveal-body {
  max-width: 720px;
  margin-top: 36px;
  font-size: 22px;
  line-height: 1.6;
  color: #fff;
  text-align: center;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 30, 60, 0.55), 0 0 14px rgba(0, 30, 60, 0.45);
}
.reveal-body .rev-line-clip {
  display: block;
  overflow: hidden;
}
.reveal-body .rev-line-word {
  display: inline-block;
  will-change: transform;
}
.reveal-body .rev-line-space {
  display: inline;
  white-space: pre;
}
.arrow-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 50px;
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.3s ease;
}
.arrow-btn:hover { transform: translateY(6px); }
.arrow-btn svg {
  width: 68px;
  height: 68px;
  overflow: visible;
  animation: arrowBounce 2s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}
/* Safari renders the outline circle/arrow as a solid yellow disc on first paint: */
.arrow-btn svg circle[stroke],
.arrow-btn svg path[stroke] {
  fill: none;
}
.arrow-label {
  font-family: 'Iosevka Charon Mono', monospace;
  font-size: 17px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
}
/* z-index above the snap-container (50) so the Élections Québec logo link is */
.s6-layer { opacity: 0; z-index: 55; }
.trucs-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: 5vh;
}
.trucs-number {
  width: min(clamp(120px, 18vw, 220px), 20vh);
  height: auto;
  object-fit: contain;
  display: block;
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}
.trucs-arrow {
  /* JS turns pointer-events on only while the 6-trucs slide is active. */
  pointer-events: none;
  /* Same gap as .trucs-credits margin-top so the logo has equal space above/below. */
  margin-top: clamp(18px, 3vh, 40px);
}
.trucs-arrow svg { width: clamp(40px, 6vh, 56px); height: clamp(40px, 6vh, 56px); }
/* These two arrows float gently up/down instead of the sharp arrowBounce. */
.trucs-arrow svg,
.carousel-next-arrow svg { animation: arrowFloat 3s cubic-bezier(0.33, 0, 0.67, 1) infinite; }
.trucs-title {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: min(clamp(120px, 16vw, 200px), 19vh);
  color: #fff;
  text-transform: uppercase;
  line-height: normal;
  letter-spacing: 0;
  margin-top: -0.27em;
}
.trucs-subtitle {
  font-family: 'Sofia Sans Condensed', sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 4.2vw, 52px);
  color: #fff172;
  font-style: normal;
  margin-top: -30px;
}
.trucs-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.1em 1px 0;
}
.trucs-word-inner {
  display: inline-block;
  will-change: transform, opacity;
}
.trucs-credits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: clamp(18px, 3vh, 40px);
}
.scroll-hint {
  position: absolute;
  bottom: clamp(20px, 4vh, 56px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  opacity: 0.85;
  animation: scrollHintBounce 2.4s ease-in-out infinite;
}
.scroll-hint__label {
  font-family: 'Iosevka Charon Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
}
.scroll-hint__chevron {
  display: block;
  width: 12px;
  height: 12px;
  border-right: 2px solid #fff172;
  border-bottom: 2px solid #fff172;
  transform: rotate(45deg);
}
@keyframes scrollHintBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}
.trucs-presented {
  font-size: 14px;
  color: #fff;
  opacity: 0.8;
}
.elections-logo {
  width: 140px;
  height: auto;
  object-fit: contain;
}
.s7-layer { opacity: 0; z-index: 60; }

.carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.carousel-scene {
  width: 300px;
  height: 460px;
  perspective: 1200px;
  position: relative;
}

.carousel-ring {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}

.carousel-card {
  --glare-x: 50%;
  --glare-y: 50%;
  --glare-opacity: 0;
  position: absolute;
  width: 260px;
  height: 430px;
  left: 50%;
  top: 50%;
  margin-left: -130px;
  margin-top: -200px;
  background: linear-gradient(180deg, #01335F 0%, #11668A 100%);
  border: 1px solid rgba(44, 255, 251, 0.15);
  border-radius: 24px;
  padding: 24px 22px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  perspective: 600px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
  /* Force text on every card to stay user-selectable / copyable. */
  -webkit-user-select: text;
          user-select: text;
}
.carousel-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    var(--glare-angle, 120deg),
    transparent 0%,
    rgba(255, 255, 255, 0.04) calc(var(--glare-pos, 50%) - 25%),
    rgba(255, 255, 255, 0.12) calc(var(--glare-pos, 50%) - 8%),
    rgba(255, 255, 255, 0.22) var(--glare-pos, 50%),
    rgba(255, 255, 255, 0.12) calc(var(--glare-pos, 50%) + 8%),
    rgba(255, 255, 255, 0.04) calc(var(--glare-pos, 50%) + 25%),
    transparent 100%
  );
  opacity: var(--glare-opacity, 0);
  z-index: 20;
  pointer-events: none;
}
.carousel-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.08;
  z-index: 19;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.carousel-card.is-active {
  filter: blur(0px) brightness(1);
  opacity: 1;
  z-index: 10;
}
.carousel-card.is-adjacent {
  filter: blur(4px) brightness(0.6);
  opacity: 0.7;
  z-index: 5;
}
.carousel-card.is-far {
  filter: blur(10px) brightness(0.35);
  opacity: 0.3;
  z-index: 1;
}
.carousel-card.is-behind {
  filter: blur(14px) brightness(0.2);
  opacity: 0;
  z-index: 0;
}

.card-badge {
  display: inline-block;
  background: rgba(0, 40, 70, 0.45);
  border: none;
  border-radius: 50px;
  padding: 10px 28px;
  font-family: 'Sofia Sans Condensed', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #2cfffb;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 20px;
}

.card-icon {
  position: relative;
  z-index: 25;
  width: 72px;
  height: 72px;
  margin-bottom: 14px;
}
.card-icon svg,
.card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-title {
  font-family: 'Sofia Sans Condensed', sans-serif;
  font-weight: 600;
  font-size: 43px;
  color: #fff;
  text-align: center;
  margin-bottom: 16px;
  line-height: 50px;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
}

.card-body {
  font-family: 'Sofia Sans Semi Condensed', sans-serif;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.88);
  text-align: left;
  /* Explicitly opt the body copy into selection so visitors can copy-paste the */
  pointer-events: auto;
  -webkit-user-select: text;
          user-select: text;
  cursor: text;
}
/* Match .card-body: the carousel parent is `pointer-events: none`, which in */
.card-title { pointer-events: auto; -webkit-user-select: text; user-select: text; cursor: text; }
.card-body em {
  font-style: italic;
  color: inherit;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 100;
  transition: transform 0.2s ease, opacity 0.2s ease;
  padding: 0;
  pointer-events: auto;
}
.carousel-arrow svg { width: 100%; height: 100%; }
.carousel-arrow:hover { transform: translateY(-50%); }
.carousel-arrow:active { transform: translateY(-50%) scale(0.95); }
.carousel-prev { left: max(20px, calc(50% - 300px)); }
.carousel-next { right: max(20px, calc(50% - 300px)); }
.carousel-progress {
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  pointer-events: auto;
}
.carousel-next-arrow {
  /* Absolutely positioned to the right of the dots so it NEVER shifts them when
     it appears — it just fades in. Centered on the dot row via translateY. */
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 0 0 16px;
  display: none;        /* shown (.is-visible) only on the last card */
  pointer-events: auto;
}
.carousel-next-arrow.is-visible { display: flex; }
.carousel-next-arrow svg { width: 34px; height: 34px; }
/* Keep the centering transform on hover/active — otherwise the generic
   .arrow-btn:hover (translateY(6px)) wipes out translateY(-50%) and the arrow
   jumps down by half its height. */
.carousel-next-arrow:hover,
.carousel-next-arrow:active { transform: translateY(-50%); }
.progress-track {
  display: flex;
  gap: 6px;
  align-items: center;
}
.progress-segment {
  /* Reset native <button> chrome so the dot looks the same as it did when */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: block;
  box-sizing: content-box;
  width: 40px;
  height: 4px;
  padding: 16px 0;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.25);
  background-clip: content-box;
  -webkit-background-clip: content-box;
  transition: background-color 0.4s ease, width 0.4s ease;
}
.progress-segment.active {
  background-color: #fff172;
  width: 56px;
}
.progress-segment:focus-visible {
  outline: 3px solid #fff172;
  outline-offset: 2px;
  border-radius: 6px;
}
/* The wrapper is `pointer-events: none` BY DEFAULT so its invisible footprint */
.cta-fixed {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  pointer-events: none;
}
.cta-fixed.is-active            { pointer-events: auto; }
.cta-fixed.is-active .btn-magnetic { pointer-events: auto; }
.cta-fixed .btn-magnetic {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  cursor: pointer;
  border-radius: 50px;
  overflow: hidden;
  /* Strip every bit of native chrome */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: none;
  padding: 0;
  margin: 0;
  /* Yellow lives directly on the button (not an absolutely-positioned child). */
  background-color: #fff172;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  color: inherit;
  line-height: 1;
}
/* Safari sometimes keeps its native :hover/:active backgrounds even after */
.cta-fixed .btn-magnetic:hover,
.cta-fixed .btn-magnetic:focus,
.cta-fixed .btn-magnetic:active {
  background-color: #fff172 !important;
}
.cta-fixed .btn-magnetic:focus-visible {
  outline: 3px solid #fff172;
  outline-offset: 6px;
}
/* The yellow pill is now painted by the button's own background-color, so this */
.cta-fixed .btn-magnetic__fill {
  display: none;
}
.cta-fixed .btn-magnetic__content {
  display: flex;
}
.cta-fixed .btn-magnetic__fill {
  background-color: #fff172;
  position: absolute;
  inset: 0;
}
.cta-fixed .btn-magnetic__content {
  position: relative;
  padding: 16px 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cta-fixed .btn-magnetic__label {
  color: #130535;
  font-family: 'Iosevka Charon Mono', monospace;
  font-weight: 400;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
  white-space: nowrap;
}
.s8-layer {
  position: fixed;
  inset: 0;
  /* Above the scrollable snap-container (z-index 50) so its links are actually */
  z-index: 65;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
}
.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 600px;
  padding: 0 24px;
  /* none so the container never traps wheel-scroll; */
  pointer-events: none;
}
.footer-elections-logo {
  cursor: pointer;
}
.footer-elections-logo img {
  width: 240px;
  height: auto;
  object-fit: contain;
}
.footer-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
}
.footer-body p {
  font-family: 'Sofia Sans Semi Condensed', sans-serif;
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.footer-body a,
.footer-body a:link,
.footer-body a:visited,
.footer-body a:hover,
.footer-body a:active,
.footer-body a:focus,
.footer-body a:focus-visible {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.footer-social-label {
  font-family: 'Iosevka Charon Mono', monospace;
  font-size: 14px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.82);
  text-transform: none;
}
.footer-social-icons {
  display: flex;
  gap: 24px;
  align-items: center;
}
.social-icon {
  display: flex;
  cursor: pointer;
  width: 36px;
  height: 36px;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.8;
}
.social-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.social-icon:hover {
  transform: scale(1.15);
  opacity: 1;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .candy-1 { width: clamp(110px, 14.5vw, 150px); height: clamp(116px, 15.3vw, 158px); }
  .candy-2 { width: clamp(150px, 20vw, 210px);   height: clamp(143px, 19vw, 200px); }
  .candy-3 { width: clamp(150px, 20vw, 210px);   height: clamp(158px, 21vw, 221px); }
  .candy-4 {
    width: clamp(250px, 33vw, 345px); height: clamp(263px, 34.7vw, 363px);
    top: auto;
    bottom: 33%;
    right: -32px;
    left: auto;
  }
  .motion-toggle,
  button.motion-toggle {
    width: 41px !important;
    height: 38px !important;
  }
  .cart-icon svg { height: 38px; width: auto; }
  .carousel-scene { width: 330px; height: 580px; }
  .carousel-card  { width: 290px; height: 540px; margin-left: -145px; margin-top: -270px; }
  .card-body { font-size: 14px; line-height: 1.5; }
  .trucs-presented { font-size: 15px; }
  .trucs-title { margin-top: -0.27em; }
  .footer-body p { font-size: 19px; }
  .footer-social-label { font-size: 16px; }
  .subtitle                        { font-size: 28px; }
  .reveal-body                     { font-size: 26px; }
  .benefit-separator               { font-size: 30px; }
  .arrow-label                     { font-size: 19px; }
  .card-badge                      { font-size: 20px; }
  .marquee-track span              { font-size: 20px; }
  .cta-fixed .btn-magnetic__label  { font-size: 20px; }
}
@media (min-width: 1000px) and (max-width: 1024px) and (min-height: 1150px) {
  .headline            { font-size: 120px; }
  .subtitle            { font-size: 38px; }
  .jujube-headline     { font-size: 166px; }
  .benefit-title       { font-size: 60px; }
  .benefit-separator   { font-size: 42px; }
  .reveal-headline     { font-size: 104px; }
  .reveal-body         { font-size: 36px; }
  .trucs-title         { font-size: 216px; }
  .trucs-subtitle      { font-size: 58px; }
  .trucs-presented     { font-size: 20px; }
  .footer-body p       { font-size: 31px; }
  .footer-social-label { font-size: 25px; }
  .nouveau-text        { font-size: 26px; }
  .arrow-label         { font-size: 25px; }
  .marquee-track span  { font-size: 27px; }
  .cta-fixed .btn-magnetic__label { font-size: 27px; }
}
@media (min-width: 800px) and (max-width: 860px) and (min-height: 1000px) {
  .headline            { font-size: 96px; }
  .subtitle            { font-size: 32px; }
  .jujube-headline     { font-size: 132px; }
  .benefit-title       { font-size: 50px; }
  .benefit-separator   { font-size: 36px; }
  .reveal-headline     { font-size: 84px; }
  .reveal-body         { font-size: 32px; }
  .trucs-title         { font-size: 176px; }
  .trucs-subtitle      { font-size: 48px; }
  .trucs-presented     { font-size: 18px; }
  .footer-body p       { font-size: 27px; }
  .footer-social-label { font-size: 22px; }
  .nouveau-text        { font-size: 24px; }
  .arrow-label         { font-size: 22px; }
  .marquee-track span  { font-size: 24px; }
  .cta-fixed .btn-magnetic__label { font-size: 24px; }
  .candy-1 { top: 6%; left: 2vw; }
  .candy-2 { top: 4%; left: 20vw; }
  .candy-3 { top: 9%; right: 2vw; }
}
@media (min-width: 768px) and (max-width: 799.98px) and (orientation: portrait) {
  .candy-1 { top: 6%; left: 2vw; }
  .candy-2 { top: 4%; left: 20vw; }
  .candy-3 { top: 9%; right: 2vw; }
}
@media (max-width: 767.98px) {
  .cloud-left {
    left: max(-56vw, -230px);
    top: 12%;
    width: clamp(280px, 89vw, 520px);
    height: clamp(164px, 52vw, 300px);
  }
  .cloud-right {
    right: max(-13vw, -90px);
    top: calc(50% - 6vh);
    width: clamp(116px, 37vw, 300px);
    height: clamp(72px, 23vw, 185px);
  }
  .cloud-set2.cloud-left {
    left: 8vw;
    top: 10%;
    width: clamp(176px, 56vw, 240px);
    height: clamp(104px, 33vw, 142px);
    filter: blur(0px);
  }
  .cloud-set2.cloud-right {
    right: -13vw;
    top: calc(5% + 18vh);
    width: clamp(156px, 50vw, 212px);
    height: clamp(94px, 30vw, 128px);
    filter: blur(0.6px);
  }
  .cloud-set3.cloud-left {
    left: -15vw;
    top: clamp(30px, 7vh, 75px);
    width: clamp(210px, 66vw, 290px);
    height: clamp(126px, 40vw, 174px);
    filter: blur(0px);
  }
  .cloud-set3.cloud-right {
    right: -13vw;
    top: auto;
    bottom: calc(2% - 6vh);
    width: clamp(190px, 60vw, 260px);
    height: clamp(114px, 36vw, 156px);
    filter: blur(0px);
  }
  .cloud-set4.cloud-left {
    left: -15vw;
    top: 20%;
    width: clamp(190px, 60vw, 260px);
    height: clamp(112px, 35vw, 152px);
    filter: blur(0px);
  }
  .cloud-set4.cloud-right {
    right: -13vw;
    top: 14%;
    width: clamp(200px, 63vw, 274px);
    height: clamp(122px, 38vw, 167px);
    filter: blur(0px);
  }
  .cloud-set5.cloud-left {
    left: -15vw;
    top: 12%;
    width: clamp(200px, 62vw, 280px);
    height: clamp(120px, 38vw, 168px);
    filter: blur(0px);
  }
  .cloud-set5.cloud-right {
    right: -10vw;
    top: 42%;
    width: clamp(170px, 54vw, 230px);
    height: clamp(102px, 33vw, 138px);
    filter: blur(0.8px);
  }
  .cloud-set6.cloud-left {
    left: -12vw;
    top: 28%;
    width: clamp(190px, 60vw, 260px);
    height: clamp(114px, 36vw, 156px);
    filter: blur(0.5px);
  }
  .cloud-set6.cloud-right {
    right: -13vw;
    top: 12%;
    width: clamp(210px, 66vw, 290px);
    height: clamp(126px, 40vw, 174px);
    filter: blur(0px);
  }
  .logo-large {
    width: clamp(380px, 105vw, 600px);
  }
  .reveal-headline {
    font-size: 78px;
    line-height: 0.86;
    letter-spacing: 0;
  }
  .reveal-body {
    font-family: 'Sofia Sans Semi Condensed', sans-serif;
    font-weight: 500;
    margin-top: 24px;
    font-size: clamp(15px, 4.4vw, 21px);
    line-height: 1.3;
    letter-spacing: 0;
    max-width: 86vw;
    margin-left: auto;
    margin-right: auto;
  }
  .arrow-label {
    font-family: 'Iosevka Charon Mono', monospace;
    font-weight: 400;
    font-size: clamp(16px, 5.6vw, 22px);
    line-height: 1.36;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .s5-layer {
    justify-content: center;
    padding-bottom: 10vh;
    position: fixed;
    inset: 0;
  }
  .s5-layer .arrow-btn {
    position: absolute;
    bottom: clamp(30px, 6vh, 70px);
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
  }
  .arrow-btn svg {
    width: clamp(38px, min(12vw, 7.5dvh), 68px);
    height: clamp(38px, min(12vw, 7.5dvh), 68px);
  }
  .reveal-headline,
  .reveal-body {
    transform: translateY(0);
  }
  .trucs-content {
    margin-top: 0;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: clamp(8px, 2vh, 22px) 0;
  }
  .trucs-number {
    width: min(clamp(150px, 56vw, 300px), 22vh);
    margin-top: 0;
    margin-bottom: 0;
  }
  .trucs-title {
    font-size: min(clamp(110px, 42vw, 220px), 20vh);
    margin-top: -0.27em;
  }
  .trucs-subtitle {
    font-size: min(clamp(28px, 8vw, 48px), 5.5vh);
    margin-top: -1.5vh;
  }
  .trucs-credits {
    margin-top: clamp(10px, 2vh, 22px);
    gap: clamp(6px, 1.2vh, 14px);
  }
  .trucs-arrow { margin-top: clamp(10px, 2vh, 22px); }
  .trucs-arrow svg { width: min(clamp(36px, 11vw, 52px), 6vh); height: min(clamp(36px, 11vw, 52px), 6vh); }
  .trucs-presented {
    font-size: clamp(13px, 4vw, 18px);
  }
  .elections-logo {
    width: min(clamp(96px, 32vw, 140px), 16vh);
  }
  .carousel-arrow { display: none; }
  .carousel-wrapper {
    overflow: hidden;
    width: 100vw;
    height: 100%;
    align-items: center;
    padding-bottom: 0;
  }
  .carousel-scene {
    width: 100%;
    height: auto;
    perspective: none;
    overflow: visible;
    position: relative;
  }
  .carousel-ring {
    display: flex !important;
    flex-direction: row !important;
    transform-style: flat !important;
    gap: 16px;
    padding: 0 16px;
    width: max-content !important;
    height: auto !important;
    position: relative !important;
  }
  .carousel-card,
  .carousel-card.is-active,
  .carousel-card.is-adjacent,
  .carousel-card.is-far,
  .carousel-card.is-behind {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    width: calc(100vw - 72px) !important;
    /* Shorter than the viewport so the centered card leaves a clear gap top and */
    height: 78dvh !important;
    flex-shrink: 0 !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    inset: auto !important;
    z-index: auto !important;
  }
  .carousel-progress {
    /* A bit higher so the (taller) arrow + its float clear the wrapper's edge. */
    bottom: clamp(14px, calc(4dvh - 6px), 32px);
    /* Dots + arrow span the card width. The dots fill the row (no big empty gap
       before the arrow) and the arrow sits at the right end. */
    width: calc(100vw - 72px);
    display: flex;
    align-items: center;
    gap: 0;
  }
  /* Each line grows to fill the row equally, with only tiny gaps between them. */
  .progress-track { flex: 1; gap: 4px; }
  .progress-segment { flex: 1; width: auto; min-width: 0; padding: 12px 0; }
  .progress-segment.active { width: auto; }
  .carousel-next-arrow {
    position: static;   /* desktop puts it absolute to the right of the dots */
    transform: none;
    margin: 0;
    flex-shrink: 0;
    /* In-flow but zero-width until revealed: JS animates the width open, which
       makes the flex dots shrink to their new size SMOOTHLY (not instantly). */
    display: flex;
    width: 0;
    overflow: hidden;
    opacity: 0;
  }
  .carousel-next-arrow svg { width: 32px; height: 32px; flex-shrink: 0; }
  /* On touch, tapping triggers :hover — don't let these arrows shift down. */
  .carousel-next-arrow:hover, .carousel-next-arrow:active,
  .trucs-arrow:hover, .trucs-arrow:active { transform: none; }

  /* Card content — scale for mobile. */
  .carousel-card {
    padding: clamp(14px, 2.6dvh, 28px) clamp(18px, 5vw, 28px) clamp(16px, 2.6dvh, 30px) !important;
    justify-content: center;
  }
  /* On touch the cards are the swipe surface, so text must NOT be selectable: */
  .carousel-card,
  .carousel-card .card-title,
  .carousel-card .card-body {
    -webkit-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
  }
  /* Text sizes are the ORIGINAL values (vh) — we do NOT shrink the text to make */
  .card-badge {
    font-size: clamp(14px, min(5.2vw, 2.6vh), 24px);
    padding: clamp(5px, 1.4vh, 14px) clamp(18px, 7vw, 36px);
    margin-bottom: clamp(6px, 1.6dvh, 24px);
  }
  .card-icon {
    width: clamp(56px, min(30vw, 13dvh), 150px);
    height: clamp(56px, min(30vw, 13dvh), 150px);
    margin-bottom: clamp(2px, 0.6dvh, 8px);
    perspective: 400px;
    will-change: transform;
  }
  .card-title {
    font-family: 'Sofia Sans Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(24px, min(10vw, 5vh), 44px);
    line-height: 1.05;
    letter-spacing: 0;
    margin-bottom: clamp(8px, 2dvh, 30px);
    white-space: nowrap;
    overflow: visible;
  }
  .card-body {
    font-size: clamp(12.5px, min(4.9vw, 2.15vh), 20px);
    line-height: 1.34;
    max-width: 92%;
    margin-left: auto;
    margin-right: auto;
  }
  .benefit-title {
    font-family: 'League Gothic', sans-serif;
    font-weight: 400;
    font-size: clamp(32px, 10.7vw, 46px);
    line-height: 0.86;
    letter-spacing: 0;
  }
  .benefit-icon {
    width: clamp(36px, 11vw, 50px);
    height: clamp(36px, 11vw, 50px);
  }
  .benefits-list {
    margin-top: 30vh;
  }
  .candy-1, .candy-2 { display: none; }
  .candy-3.candy {
    width: clamp(105px, 36vw, 155px);
    height: clamp(112px, 38vw, 165px);
    top: auto;
    bottom: clamp(210px, 33vh, 310px);
    left: -10vw;
    right: auto;
    filter: blur(0px);
    z-index: 10 !important;
  }
  .candy-4 {
    width: clamp(135px, 43vw, 185px);
    height: clamp(142px, 45vw, 195px);
    bottom: auto;
    top: calc(5% + 2.4vh);
    right: calc(-12% - 5vw);
    left: auto;
    filter: blur(0px);
  }
  .bottle-container {
    top: calc(40% + 10px);
    width: min(110vw, 55dvh, 460px);
    height: min(110vw, 55dvh, 460px);
    transform: translate(-50%, -50%) rotate(-15deg);
  }
  .nouveau-badge {
    width: clamp(90px, 30vw, 130px);
    height: clamp(90px, 30vw, 130px);
    top: calc(50% - 20vw - clamp(90px, 30vw, 130px) - 40px);
    left: calc(50% + 8vw - 5vw);
  }
  .nouveau-text {
    font-size: clamp(16px, 5vw, 22px);
  }
  .subtitle {
    font-family: 'Sofia Sans Semi Condensed', sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 5.1vw, 22px);
    line-height: 1.1;
    letter-spacing: 0;
    max-width: 95vw;
    margin-top: clamp(10px, 4vw, 20px);
  }
  .headline-wrapper {
    padding: 0 3vw;
  }
  .headline {
    font-weight: 400;
    font-size: clamp(50px, 16.5vw, 67px);
    line-height: 0.92;
    letter-spacing: -0.03em;
  }
  .headline .word {
    padding: 0.1em 1px 0;
  }
  .s2-layer {
    padding-bottom: 15vh;
  }
  .jujube-headline {
    font-size: clamp(74px, 25vw, 106px);
    line-height: 0.86;
    letter-spacing: 0;
  }
  .site-header .logo .logo-svg {
    width: clamp(64px, 20vw, 90px);
  }
  .cart-icon {
    right: 5vw;
  }
  .cart-icon svg {
    width: clamp(26px, 8vw, 36px);
    height: clamp(24px, 7.5vw, 34px);
  }
  #cloud-left-1 { filter: blur(0px); }
  #cloud-right-1 { filter: blur(1.5px); }
  .cta-fixed .btn-magnetic__content {
    padding: clamp(10px, 3.5vw, 18px) clamp(22px, 7vw, 32px);
  }
  .cta-fixed .btn-magnetic__label {
    font-size: clamp(13px, 4.2vw, 18px);
  }
  .s1-layer {
    padding-bottom: 14vh;
  }
  .s8-layer {
    align-items: flex-end;
    padding-bottom: clamp(34px, 7vh, 60px);
  }
  .footer-content {
    padding-top: clamp(50px, 10vh, 90px);
    height: 100%;
    gap: 0;
    margin: auto;
    justify-content: space-between;
  }
  .footer-content .footer-elections-logo {
    flex-shrink: 0;
  }
  .footer-content .footer-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .footer-content .footer-social {
    flex-shrink: 0;
    margin-bottom: 0;
  }
  .footer-body {
    margin: auto;
    gap: clamp(10px, 2.2vh, 16px);
  }
  .footer-body p {
    font-size: clamp(16px, 4.5vw, 20px);
    line-height: 1.25;
    max-width: 72vw;
    margin-left: auto;
    margin-right: auto;
  }
  .footer-social {
    margin-top: clamp(-10px, -1vh, 0px);
  }
  .footer-social-label {
    font-size: 12px;
    letter-spacing: 1.5px;
  }
}