/* ==========================================================================
   PriceMinister — Landing page "Septembre 2026"
   Intégration fidèle des maquettes Figma (desktop 1445px / mobile 390px)
   ========================================================================== */

:root {
  --blue: #1a1f8c;
  --orange: #ff8400;
  --cream: #fffdf2;
  --cream-2: #fefcf1;
  --cream-mobile: #f8f6ef;
  --grey-text: #b4b4b4;
  --body-text: #2a2a2a;
  --footer-bg: #fbfbfb;
  --k: 1; /* échelle du hero desktop (mise à jour en JS entre 960px et 1445px) */
  --font-display: "Tilt Warp", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--blue);
  font-family: var(--font-body);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: none; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; }

.display { font-family: var(--font-display); font-weight: 400; font-variation-settings: "XROT" 0, "YROT" 0; }
.u { text-decoration: underline; text-underline-position: from-font; text-decoration-skip-ink: none; }
.orange { color: var(--orange); }
.m-only { display: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Bandes décoratives verticales ------------------------------------------ */
.stripes { position: absolute; display: block; pointer-events: none; z-index: 0; }
.stripes img { width: 100%; height: 100%; }

/* ==========================================================================
   BLOC 1 — Accueil (hero)
   ========================================================================== */
.hero {
  position: relative;
  height: calc(599px * var(--k));
  background: var(--cream);
  overflow: hidden;
}

.hero > .stripes--left  { left: 0; top: 0; width: calc(67.773px * var(--k)); height: 100.1%; }
.hero > .stripes--right { right: -0.04%; top: -7.15%; width: calc(68.772px * var(--k)); height: 110.15%; }

.hero__stage {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1445px;
  height: 599px;
  padding: 60px 149px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  transform: translateX(-50%) scale(var(--k));
  transform-origin: top center;
  z-index: 1;
}

.hero__logo-wrap { position: relative; width: 429.986px; height: 62.149px; flex-shrink: 0; }
.hero__logo-wrap a { display: block; }
.hero__logo { width: 429.986px; height: 62.149px; }

.tagline {
  position: absolute;
  left: calc(50% - 5.12px);
  top: 75.42px;
  transform: translate(-50%, -50%) rotate(-3.57deg);
  height: 30.804px;
  padding: 10.799px 16.614px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  border: 0.831px solid var(--cream);
  border-radius: 4.984px;
  overflow: hidden;
  color: #fff;
  font-weight: 800;
  font-size: 17.25px;
  line-height: 13.292px;
  letter-spacing: 0.1725px;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero__text { width: 617px; display: flex; flex-direction: column; gap: 21.13px; flex-shrink: 0; }

.hero__title {
  width: 664.122px;
  font-size: 48.798px;
  line-height: 61.585px;
  letter-spacing: -0.3099px;
  color: var(--blue);
}

.hero__cta-group { display: flex; flex-direction: column; align-items: flex-start; gap: 7.363px; }

.hero__lead {
  width: 387.282px;
  font-size: 25.24px;
  line-height: 61.585px;
  letter-spacing: -0.3099px;
}

.btn-blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17.992px 43.695px;
  background: var(--blue);
  border-radius: 12.851px;
  color: #fff;
  font-weight: 700;
  font-size: 23.561px;
  line-height: 29.301px;
  letter-spacing: -0.1157px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-blue:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(26, 31, 140, .25); }

/* Halos flous */
.glow { position: absolute; width: 243px; height: 243px; border-radius: 50%; filter: blur(152px); pointer-events: none; }
.glow--orange { left: 94px; top: -28px; background: var(--orange); opacity: .2; }
.glow--blue { left: 766px; top: 276px; background: rgba(26, 31, 140, .2); opacity: .7; }

.hero__arrow { position: absolute; left: 433px; top: 445px; width: 48.131px; height: 51.16px; }
.hero__arrow img { width: 49px; height: 52px; }

/* Zone téléphone */
.hero__phone-area { position: absolute; left: 862px; top: 94px; width: 402.612px; height: 675.801px; }
.phone-wrap { width: 402.612px; height: 675.801px; display: flex; align-items: center; justify-content: center; }

/* ==========================================================================
   iPhone (construit en CSS d'après les calques Figma "iPhone 16 Light")
   ========================================================================== */
.phone {
  position: relative;
  flex: none;
  width: 305.073px;
  height: 635.231px;
  transform: rotate(-9.19deg);
  filter: drop-shadow(15.96px 22.344px 27.132px rgba(61, 32, 0, .5));
}

.phone__buttons { position: absolute; left: -2.43px; top: 120.57px; width: 309.928px; height: 514.658px; }
.phone__btn {
  position: absolute;
  left: 0;
  width: 4.046px;
  border-radius: 1.618px 0 0 1.618px;
  overflow: hidden;
  background:
    linear-gradient(to bottom, transparent 92%, rgba(0, 0, 0, .48) 100%),
    linear-gradient(to left, #000 0%, rgba(174, 174, 174, 0) 70%),
    linear-gradient(to bottom, rgba(0, 0, 0, .76) 0%, rgba(0, 0, 0, 0) 7%),
    #f0ece3;
}
.phone__btn::before {
  content: "";
  position: absolute; left: .81px; top: 6%; bottom: 4%; width: .809px;
  background: rgba(255, 255, 255, .8); filter: blur(.405px); border-radius: .809px;
}
.phone__btn::after {
  content: "";
  position: absolute; left: 0; top: 2%; bottom: 0; width: .809px;
  background: #61605d; filter: blur(.809px);
}
.phone__btn--1 { top: 0; height: 25.086px; }
.phone__btn--2 { top: 48.55px; height: 45.316px; }
.phone__btn--3 { top: 107.63px; height: 45.316px; }
.phone__btn--power { left: 305.88px; top: 83.35px; height: 77.684px; transform: rotate(180deg); }

.phone__frame {
  position: absolute; inset: 0;
  border-radius: 50.171px;
  background: #e7e3bf;
  overflow: hidden;
}
.phone__frame::before {
  content: ""; position: absolute; inset: 0; border-radius: 50.171px;
  border: 2.428px solid #c3c3c3; filter: blur(1.618px);
}
.phone__frame::after {
  content: ""; position: absolute; inset: 0; border-radius: 50.171px;
  border: .809px solid #524b40; filter: blur(.809px);
}
.phone__frame-inner {
  position: absolute; left: 4.05px; top: 4.05px; width: 297.79px; height: 627.948px;
  border-radius: 46.934px; border: .809px solid #fff; filter: blur(.809px);
}
.phone__frame-highlight {
  position: absolute; left: 3.24px; top: 50%; width: 298.599px; height: 628.757px; transform: translateY(-50%);
  border-radius: 46.934px; border: .324px solid #fff;
}
.phone__cut { position: absolute; background: linear-gradient(to bottom, #817e73, #c3beac); }
.phone__cut--top { left: 237.1px; top: 0; width: 4.855px; height: 3.237px; }
.phone__cut--l1 { left: 0; top: 65.55px; width: 3.237px; height: 4.855px; background: linear-gradient(to right, #817e73, #c3beac); }
.phone__cut--l2 { left: 0; top: 564.83px; width: 3.237px; height: 4.855px; background: linear-gradient(to right, #817e73, #c3beac); }
.phone__cut--bottom { left: 50.98px; top: 631.99px; width: 4.046px; height: 3.237px; background: linear-gradient(to top, #817e73, #c3beac); }
.phone__cut--r { left: 301.84px; top: 564.83px; width: 3.237px; height: 4.855px; background: linear-gradient(to left, #817e73, #c3beac); }

.phone__bezel {
  position: absolute; left: 3.24px; top: 3.24px; width: 298.599px; height: 628.757px;
  border-radius: 46.934px; background: #000100; overflow: hidden;
}
.phone__bezel::after {
  content: ""; position: absolute; inset: 0; border-radius: 46.934px;
  border: 3.237px solid #879194; filter: blur(2.832px);
}

.phone__screen {
  position: absolute; left: 9.71px; top: 9.71px; width: 285.651px; height: 615.81px;
  border-radius: 42.079px; overflow: hidden; background: var(--blue);
}
.phone__screen-logo { position: absolute; left: 59.85px; top: 193.35px; width: 149.7px; height: 101.7px;transform: rotate(9.19deg);}

.phone__dl-text {
  position: absolute; left: 144.47px; top: 305.71px; width: 237.805px; height: 20.748px;
  transform: translate(-50%, -50%) rotate(-2.59deg);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20.214px; line-height: 7.013px; letter-spacing: -.255px; text-align: center; white-space: nowrap;
}

.gauge {
  position: absolute; left: 30.06px; top: 325.22px; width: 230.774px; height: 17.457px;
  display: flex; align-items: center; justify-content: center;
}
.gauge__track {
  position: relative; flex: none; width: 230.692px; height: 7.033px; border-radius: 56.266px;
  background: rgba(255, 132, 0, .2); overflow: hidden; transform: rotate(-2.59deg);
}
.gauge__fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 128.006px; border-radius: 56.266px; background: var(--orange);
  animation: gauge-fill 5s cubic-bezier(.45, .05, .35, 1) infinite;
}
@keyframes gauge-fill {
  0%   { width: 0; }
  12%  { width: 18%; }
  35%  { width: 46%; }
  48%  { width: 55.5%; }
  72%  { width: 86%; }
  84%  { width: 100%; }
  94%  { width: 100%; opacity: 1; }
  100% { width: 100%; opacity: 0; }
}

.phone__island {
  position: absolute; left: 50%; top: 19.42px; width: 89.822px; height: 25.086px; transform: translateX(-50%);
  border-radius: 12.543px; background: #030303;
}
.phone__island::after {
  content: ""; position: absolute; right: 4.76px; top: 50%; width: 15.57px; height: 15.57px; transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 48% 44%, #393752 0 .87px, #0f0f2a .9px 2.6px, #161424 2.62px 4.33px, #0e0b0f 4.35px);
}

/* ==========================================================================
   Bandeau défilant "PriceMinister revient"
   ========================================================================== */
.marquee {
  position: relative;
  height: 29.112px;
  padding: 8.208px 0;
  background: var(--orange);
  overflow: hidden;
  z-index: 2;
}
.marquee__track {
  display: flex;
  width: max-content;
  height: 12.996px;
  animation: marquee 60s linear infinite;
  will-change: transform;
}
.marquee__group { display: flex; flex: none; }
.marquee__item {
  display: flex; align-items: center; gap: 10.944px; padding: 0 16.415px; height: 12.996px;
  color: var(--cream); font-weight: 800; font-size: 8.892px; line-height: 12.702px; letter-spacing: 1.3338px;
  text-transform: uppercase; white-space: nowrap;
}
.marquee__item span { opacity: .5; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   BLOC 2 — Jeu concours
   ========================================================================== */
.contest {
  position: relative;
  background: var(--blue);
  padding: 40px 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
  scroll-margin-top: 0;
}
.contest__inner { display: flex; gap: 15px; align-items: center; justify-content: center; width: 100%; }

.contest__intro { width: 481px; display: flex; flex-direction: column; gap: 24px; flex-shrink: 0; }
.contest__title { width: 555.989px; color: var(--cream); font-size: 45.1px; line-height: 49.61px; }
.contest__lead { width: 448.49px; color: var(--cream); font-size: 17.339px; line-height: 26.008px; transition: color .3s; }
.contest__lead strong { font-weight: 900; }
.legal-note { width: 426px; color: var(--grey-text); font-size: 12px; line-height: 17px; letter-spacing: -.09px; }
.legal-note a { color: var(--grey-text); }
.legal-note::after { content: "\200B"; display: block; line-height: 17px; }

.card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  padding: 20px 21px;
  background: rgba(255, 255, 255, .06);
  border: .5px solid rgba(255, 255, 255, .31);
  border-radius: 10px;
}

.ticket { position: relative; width: 388px; height: 118px; flex-shrink: 0; background: var(--cream-2); border-radius: 10px; }
.ticket__line { position: absolute; left: 52px; width: 204px; font-size: 26.673px; line-height: 20.67px; letter-spacing: -.0952px; }
.ticket__line--1 { top: 14.82px; color: var(--orange); }
.ticket__line--2 { top: 61.55px; color: var(--blue); }
.ticket__phone { position: absolute; left: 192px; top: -51.18px; width: 177px; height: 170px; }
.ticket__stripes-l { position: absolute; left: -1.09px; top: -.34px; width: 20px; height: 119px; }
.ticket__stripes-r { position: absolute; right: -.91px; top: -.34px; width: 16px; height: 119px; }

/* Formulaire */
.form { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.form__fields, .form__checks, .form__submit { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

.field {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 10.5px 16.5px 10.5px 18.5px;
  background: var(--cream);
  border: .5px solid var(--cream);
  border-radius: 10px;
  overflow: hidden;
  cursor: text;
  transition: border-color .2s, box-shadow .2s;
}
.field:focus-within { box-shadow: 0 0 0 2px var(--orange); }
.field.is-invalid { box-shadow: 0 0 0 2px #e5484d; }
.field__icon--mail { width: 20px; height: 20px; flex: none; }
.field__icon--phone { width: 19px; height: 19px; flex: none; }
.field input {
  flex: 1; min-width: 0; height: 17px; padding: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--font-ui); font-size: 14px; line-height: normal; color: var(--blue);
}
.field input::placeholder { color: var(--blue); opacity: 1; }

.check { width: 100%; display: flex; align-items: flex-start; gap: 8px; cursor: pointer; border-radius: 10px; }
.check--center { align-items: center; padding: 1px 0; }
.check input {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 16px; height: 16px; margin: 0;
  background: var(--cream) no-repeat center / 11px 8px;
  border: 1px solid var(--orange);
  border-radius: 3px;
  cursor: pointer;
}
.check input:checked { background-image: url("../images/icon-check.svg"); }
.check input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.check__label { width: 364px; color: var(--cream); font-size: 12px; line-height: 22px; letter-spacing: -.09px; }
.check--center .check__label { width: auto; white-space: nowrap; }

.btn-orange {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 34px;
  background: var(--orange);
  border: 0; border-radius: 10px;
  color: var(--cream);
  font-family: var(--font-body); font-weight: 700; font-size: 15px; line-height: 22.8px; letter-spacing: -.09px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: opacity .25s, transform .2s, box-shadow .2s;
}
.btn-orange:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 132, 0, .35); }
.btn-orange:disabled { opacity: .4; cursor: not-allowed; }
.form__required { width: 426px; color: var(--grey-text); font-size: 12px; line-height: 17px; letter-spacing: -.09px; }
.form__error { width: 100%; color: #ffb4b4; font-size: 12px; line-height: 17px; display: none; }
.form__error.is-visible { display: block; }

/* Confirmation (maquette "Test 8") */
.success { display: none; width: 100%; flex-direction: column; align-items: center; gap: 15px; }
.success__head { display: flex; align-items: flex-end; justify-content: center; gap: 8px; }
.success__head img { width: 22px; height: 22px; }
.success__title { color: var(--orange); font-size: 18px; line-height: normal; white-space: pre; text-align: center; }
.success__body {
  width: 426px; padding: 10px 20px; display: flex; flex-direction: column; gap: 8px; align-items: center;
  color: var(--cream-2); font-size: 15px; text-align: center;
}
.success__body p { width: 100%; }
.success__body p:first-child { font-weight: 600; line-height: 25px; }
.success__body p:last-child { line-height: 20px; }
.success__cta { width: 426px; display: flex; }
.success__cta .btn-orange { height: 41px; padding: 8px 24px; font-size: 14px; }

.contest.is-success .card { align-items: center; justify-content: center; }
.contest.is-success .form { display: none; }
.contest.is-success .success { display: flex; }
.contest.is-success .contest__lead { color: rgba(255, 253, 242, .8); }
.contest.is-success .contest__intro .legal-note { display: none; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  position: relative;
  background: var(--footer-bg);
  padding: 40px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  overflow: hidden;
}
.footer > .stripes--right { right: -.02%; width: 25.707px; top: -.44%; bottom: 2.78%; }
.footer > .stripes--left  { left: 0; width: 29.66px; top: -3.57%; bottom: 2.78%; }

.footer__barcode { position: relative; z-index: 1; display: block; width: 92.468px; height: 50.464px; }
.footer__barcode img { width: 100%; height: 100%; }
.footer__wordmark { position: relative; z-index: 1; width: 141px; height: 20.38px; }
.footer__wordmark img { width: 141px; height: 21px; }
.footer__disclaimer { position: relative; z-index: 1; width: 675px; max-width: 100%; text-align: center; font-size: 14px; line-height: 19.5px; color: var(--blue); }
.footer__links {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 16px;
  margin: 0; padding: 0; list-style: none;
  font-size: 12px; line-height: 19.5px; text-align: center; white-space: nowrap; color: var(--blue);
}
.footer__links a, .footer__links button {
  color: var(--blue); background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; text-decoration: underline; text-underline-position: from-font;
}
.footer__links a:hover, .footer__links button:hover { color: var(--orange); }
.footer__copy { position: relative; z-index: 1; font-family: var(--font-ui); font-size: 12px; line-height: 16px; color: rgba(26, 31, 140, .3); text-align: center; white-space: nowrap; }

/* ==========================================================================
   Pages légales (maquettes "Page en +")
   ========================================================================== */
.legal-header { position: relative; height: 120px; background: var(--cream); overflow: hidden; }
.legal-header > .stripes--left { left: 0; top: 0; width: 67.773px; height: 100.1%; }
.legal-header > .stripes--right { right: -.04%; top: -7.15%; width: 68.772px; height: 110.15%; }
.legal-header__logo { position: absolute; left: 50%; top: 33px; width: 315px; height: 45.529px; transform: translateX(-50%); z-index: 1; }
.legal-header__logo img { width: 315px; height: 45.529px; }
.legal-header .tagline {
  left: calc(50% - 1.27px);
  height: 22.566px; padding: 7.911px 12.171px; border-width: .609px; border-radius: 3.651px;
  font-size: 12.637px; line-height: 9.737px; letter-spacing: .1264px;
  top: 89.68px; z-index: 2;
}

.legal-title { background: var(--blue); padding: 20px 120px; }
.legal-title h1 { margin: 0; color: var(--cream); font-weight: 800; font-size: 35px; line-height: 49.61px; }

.legal-content { background: #fff; padding: 40px 86px; }
.legal-content__text {
  max-width: 1273px; margin: 0 auto;
  color: var(--body-text); font-size: 17.339px; line-height: 26.008px; white-space: pre-wrap; word-break: break-word;
}
.legal-content__text p { min-height: 26.008px; }
.legal-content__text b, .legal-content__text strong { font-weight: 700; }
.legal-content__text ol, .legal-content__text ul { margin: 0; padding-left: 26px; white-space: normal; }
.legal-content__text li { padding-left: 2px; }
.legal-content__text li > span { white-space: pre-wrap; }
.legal-content__text a:hover { color: var(--orange); }

/* ==========================================================================
   Responsive — maquette mobile (iPhone 390px), appliquée < 960px
   ========================================================================== */
@media (max-width: 959.98px) {
  .d-only { display: none !important; }
  .m-only { display: block; }

  body { background: var(--cream-mobile); }

  /* Hero */
  .hero { height: auto; background: var(--cream-mobile); }
  .hero > .stripes--left  { left: 0; top: 0; width: 18.292px; height: 100%; }
  .hero > .stripes--right { right: 0; left: auto; top: 0; width: 18.562px; height: 100%; }
  .hero__stage {
    position: relative; left: auto; top: auto; transform: none;
    width: 100%; height: auto;
    padding: 35px 40px 0;
    align-items: center; justify-content: center; gap: 34px;
  }
  .hero__logo-wrap { width: 274px; height: 62.374px; }
  .hero__logo { width: 274px; height: 39.603px; }
  .hero .tagline {
    left: calc(50% - 3.26px); top: 48.48px;
    height: 19.629px; padding: 6.882px 10.587px; border-width: .529px; border-radius: 3.176px;
    font-size: 10.993px; line-height: 8.47px; letter-spacing: .1099px;
  }
  .hero__text { width: 299px; gap: 16.309px; align-items: flex-start; }
  .hero__title { width: 296px; font-size: 34.67px; line-height: 41.5px; letter-spacing: -.2392px; text-align: center; }
  .hero__cta-group { align-items: center; justify-content: center; gap: 5.683px; width: 296px; }
  .hero__lead { width: 298.928px; font-size: 19.482px; line-height: 47.535px; letter-spacing: -.2392px; text-align: center; }
  .btn-blue { padding: 13.887px 33.726px; border-radius: 9.92px; font-size: 18.186px; line-height: 22.616px; letter-spacing: -.0893px; }
  .glow, .hero__arrow { display: none; }

  .hero__phone-area { position: relative; left: auto; top: auto; width: 384px; height: 361px; overflow: hidden; flex-shrink: 0; }
  .hero__phone-area .phone-wrap { position: absolute; left: 44.23px; top: -.06px; transform: scale(.734074); transform-origin: top left; }

  /* Jeu concours */
  .contest { padding: 28px 31px; }
  .contest__inner { flex-direction: column; align-items: stretch; gap: 36px; max-width: 460px; margin: 0 auto; }
  .contest__intro { width: 100%; gap: 24px; align-items: center; }
  .contest__title { width: auto; font-size: 35.1px; line-height: 39.6px; text-align: center; white-space: nowrap; }
  .contest__lead { width: 100%; text-align: center; color: rgba(255, 253, 242, .8); }
  .card { width: 100%; }
  .ticket { width: 100%; max-width: none; }
  .ticket__line { left: 37.5px; }
  .ticket__phone { left: auto; right: -34.5px; }
  .check__label { width: auto; flex: 1; }
  .check--center .check__label { white-space: normal; }
  .form__required, .legal-note { width: 100%; }
  .success__body, .success__cta { width: 100%; }

  /* Footer */
  .footer { min-height: 345px; }
  .footer > .stripes--right { width: 7.709px; right: -.02%; top: .38%; bottom: -1.09%; }
  .footer > .stripes--left  { width: 8.866px; top: -2.53%; bottom: -1.09%; }
  .footer__disclaimer { width: 330px; }
  .footer__links { max-width: 318px; gap: 8px 16px; align-items: center; }

  /* Pages légales */
  .legal-header > .stripes--left  { width: 18.292px; }
  .legal-header > .stripes--right { width: 18.562px; right: 0; }
  .legal-header__logo, .legal-header__logo img { width: 274px; height: 39.603px; }
  .legal-header__logo { top: 30px; }
  .legal-header .tagline {
    left: calc(50% - 3.26px); top: 78.48px;
    height: 19.629px; padding: 6.882px 10.587px; border-width: .529px; border-radius: 3.176px;
    font-size: 10.993px; line-height: 8.47px; letter-spacing: .1099px;
  }
  .legal-title { padding: 20px 31px; }
  .legal-title h1 { font-size: 28px; line-height: 39.6px; }
  .legal-content { padding: 32px 31px; }
  .legal-content__text { font-size: 15px; line-height: 23px; }
  .legal-content__text p { min-height: 23px; }
}

@media (max-width: 389.98px) {
  .hero__stage { padding-left: 24px; padding-right: 24px; }
  .contest { padding-left: 20px; padding-right: 20px; }
  .contest__title { font-size: 31px; line-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation-duration: 180s; }
  html { scroll-behavior: auto; }
}


.table-responsive {
    width: 100%;
}

.table-responsive table {
    border-collapse: collapse;
}

@media (max-width: 760px) {
	.table-responsive {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.table-responsive table {
		width: max-content;
		min-width: 100%;
	}
	
	.table-responsive table td {
		white-space: normal;
		max-width: 300px;
		overflow-wrap: anywhere;
	}
	
}