:root {
  /* Historical names kept to avoid a 4500-line rename: --forest = brand navy,
     --coral = brand gold accent. See CLAUDE.md pivot notes. */
  --ink: #061b57;
  --muted: #536684;
  --paper: #f6faff;
  --panel: #ffffff;
  --line: #d8e6f8;
  --forest: #08266f;
  --forest-2: #0759b8;
  --coral: #ffb21c;
  --gold: #ffd43b;
  --gold-ink: #8a5a00;
  --focus-ring: #ffd95c;
  --sky: #e9f3ff;
  --shadow: 0 24px 60px rgba(6, 27, 87, 0.16);

}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 212, 59, 0.18), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(233, 243, 255, 0.86)),
    var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1000;
  transform: translateY(-160%);
  padding: 10px 14px;
  border: 2px solid var(--focus-ring);
  background: #ffffff;
  color: var(--ink);
  font-weight: 850;
  box-shadow: var(--shadow);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

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

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(360px, 0.72fr);
  min-height: 92vh;
}

.prize-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 92vh;
  overflow: hidden;
  padding: 28px clamp(24px, 5vw, 68px) 32px;
  color: var(--ink);
  background:
    radial-gradient(circle at 84% 18%, rgba(255, 212, 59, 0.28), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.99) 0%, rgba(246, 250, 255, 0.96) 52%, rgba(221, 237, 255, 0.92) 100%),
    var(--paper);
}

.prize-stage::after {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: 42vw;
  height: 100%;
  background: linear-gradient(135deg, rgba(7, 89, 184, 0.12), rgba(255, 212, 59, 0.22));
  pointer-events: none;
}

.top-nav,
.room-header,
.section-title,
.quantity-row,
.terms-actions {
  display: flex;
  align-items: center;
}

.brand-logo-img {
  display: block;
  height: 76px;
  width: auto;
  object-fit: contain;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
}

/* ---- GagneLots wordmark (inline SVG, no raster asset) ---------------- */
.brand-logo-svg {
  display: block;
  overflow: visible;
}

.brand-logo-word {
  font-family: inherit;
  font-weight: 900;
  font-size: 50px;
  letter-spacing: -0.01em;
  fill: #ffffff;
  stroke: var(--forest);
  stroke-width: 5px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

.brand-logo-o-ring {
  fill: var(--gold-ink);
}

.brand-logo-o-fill {
  fill: var(--gold);
  stroke: var(--forest);
  stroke-width: 2.5px;
}

.brand-logo-o-mark {
  font-family: inherit;
  font-weight: 900;
  font-size: 34px;
  fill: var(--forest);
}

.brand-logo-star {
  fill: var(--gold);
  stroke: var(--gold-ink);
  stroke-width: 0.5px;
}

/* Large hero variant: replaces a big text headline on the homepage. Sized
   mobile-first (small viewport gets a modest clamp, min-width queries below
   scale it up for tablet/desktop) so it never overflows a phone screen. */
.brand-logo-hero {
  width: clamp(260px, 92vw, 360px);
  height: auto;
}

.hero-logo-heading {
  margin: 10px 0 4px;
  line-height: 0;
}

.hero-logo-heading .brand-lockup {
  display: block;
}

.top-nav {
  gap: clamp(14px, 3vw, 34px);
  color: var(--forest);
  font-size: 0.92rem;
  position: relative;
}

.top-nav .nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 34px);
}

.top-nav a {
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
}

.top-nav a:hover {
  border-color: currentColor;
}

/* Hamburger button - hidden on desktop, revealed at the mobile breakpoint
   further down. Positioned above nav-links so it stays reachable when the
   drawer is closed AND when it slides open. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(6, 27, 87, 0.28);
  background: rgba(255, 255, 255, 0.72);
  color: var(--forest);
  border-radius: 6px;
  cursor: pointer;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: #ffffff;
  outline: none;
}

.nav-toggle .hamburger,
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 180ms ease, opacity 180ms ease;
}

.nav-toggle .hamburger {
  position: relative;
}

.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle .hamburger::before {
  top: -7px;
}

.nav-toggle .hamburger::after {
  top: 7px;
}

/* Open state: morph the three bars into an X. */
.nav-toggle[aria-expanded="true"] .hamburger {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .hamburger::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .hamburger::after {
  top: 0;
  transform: rotate(-45deg);
}

.hero-feature {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(300px, 0.92fr) minmax(320px, 1.08fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(44px, 8vw, 96px) 0 clamp(28px, 5vw, 54px);
}

.eyebrow,
.panel-kicker {
  margin: 0 0 10px;
  color: var(--gold-ink);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.prize-stage .eyebrow {
  color: var(--gold-ink);
}

.hero-cta {
  min-width: 220px;
  background: var(--coral);
}

.hero-cta:hover {
  background: #f28b00;
}

.ghost-cta {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 22px;
  border: 1px solid rgba(6, 27, 87, 0.35);
  color: var(--forest);
  font-weight: 800;
}

.ghost-cta:hover {
  background: rgba(6, 27, 87, 0.06);
}

.ghost-cta.light {
  border-color: rgba(255, 255, 255, 0.6);
}

.hero-prize-card {
  display: grid;
  grid-template-rows: minmax(260px, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(6, 27, 87, 0.12);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(6, 27, 87, 0.18);
}

.hero-prize-photo {
  display: grid;
  place-items: center;
  min-height: clamp(280px, 38vw, 480px);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(7, 89, 184, 0.08), rgba(255, 212, 59, 0.18));
}

.hero-prize-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-prize-body {
  padding: clamp(20px, 3vw, 30px);
}

.hero-prize-body h2 {
  margin: 4px 0 10px;
  color: var(--ink);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 880;
  line-height: 1.08;
}

.hero-prize-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.hero-prize-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0 0;
  border: 1px solid var(--line);
  background: var(--line);
}

.hero-prize-facts div {
  padding: 12px 14px;
  background: #ffffff;
}

.hero-prize-facts dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.hero-prize-facts dd {
  margin: 5px 0 0;
  color: var(--forest);
  font-weight: 900;
}

.access-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 92vh;
  padding: clamp(20px, 4vw, 48px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 255, 0.84)), var(--panel);
  border-left: 1px solid rgba(16, 20, 43, 0.12);
}

.panel-tabs {
  position: absolute;
  top: 28px;
  right: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 172px;
  padding: 4px;
  border: 1px solid var(--line);
  background: #f1eee6;
}

.tab {
  min-height: 36px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 750;
}

.tab.is-active {
  background: var(--ink);
  color: #ffffff;
}

.screen {
  display: none;
  width: min(100%, 430px);
  margin-inline: auto;
}

.screen.is-visible {
  display: block;
}

.login-orbit {
  position: relative;
  width: 138px;
  height: 138px;
  margin: 0 0 34px;
}

.login-orbit::before,
.login-orbit span {
  position: absolute;
  border-radius: 50%;
}

.login-orbit::before {
  content: "";
  inset: 22px;
  background: linear-gradient(135deg, rgba(255, 178, 28, 0.9), rgba(255, 212, 59, 0.88)), #ffb21c;
  box-shadow: var(--shadow);
}

.login-orbit span {
  inset: calc(var(--ring, 0) * 14px);
  border: 1px solid rgba(8, 38, 111, 0.22);
  animation: pulse 4s ease-in-out infinite;
}

.login-orbit span:nth-child(1) {
  --ring: 0;
}

.login-orbit span:nth-child(2) {
  --ring: 1;
  animation-delay: 0.35s;
}

.login-orbit span:nth-child(3) {
  --ring: 2;
  animation-delay: 0.7s;
}

.access-panel h2,
.participant-room h2,
.drawer-panel h2 {
  font-size: clamp(2.1rem, 5vw, 4.4rem);
  font-weight: 840;
}

.auth-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 26px 0 0;
  padding: 4px;
  border: 1px solid var(--line);
  background: #f1eee6;
}

.auth-mode {
  min-height: 42px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 800;
}

.auth-mode.is-active {
  background: var(--forest);
  color: #ffffff;
}

.auth-form {
  display: none;
}

.auth-form.is-active {
  display: grid;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.link-button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--forest-2);
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover {
  color: var(--coral);
}

.login-form {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

.login-form label {
  display: block;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.login-form input:not([type="checkbox"]),
.login-form select {
  display: block;
  width: 100%;
  margin-top: 9px;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #ffffff;
  color: var(--ink);
  padding: 0 16px;
  outline: 0;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.login-form select {
  padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 24px, calc(100% - 14px) 24px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.login-form input:focus,
.login-form select:focus {
  border-color: var(--forest-2);
  box-shadow: 0 0 0 4px rgba(7, 89, 184, 0.14);
}

.login-form input.is-mismatch {
  border-color: var(--coral);
}

.login-form input:user-invalid,
.login-form select:user-invalid {
  border-color: var(--coral);
}

.grid-phone {
  display: grid;
  grid-template-columns: minmax(120px, 0.45fr) 1fr;
  gap: 14px;
}

.field-help {
  margin: -8px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.address-autocomplete-field {
  position: relative;
}

.input-uppercase {
  text-transform: uppercase;
}

.address-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin: 2px 0 0;
  padding: 4px 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  max-height: 220px;
  overflow-y: auto;
}

.address-suggestions li {
  padding: 10px 14px;
  color: var(--ink);
  font-size: 0.92rem;
  cursor: pointer;
}

.address-suggestions li:hover,
.address-suggestions li:focus-visible {
  background: var(--sky);
}

.form-section-title {
  margin: 12px 0 -4px;
  color: var(--forest);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.form-section-title:first-child {
  margin-top: 0;
}

.form-error {
  min-height: 20px;
  margin: 0;
  /* Deliberately NOT var(--coral): that variable is the brand gold accent
     now, and a validation error needs to read as an alert, not a highlight. */
  color: #b34a35;
  font-size: 0.9rem;
  font-weight: 750;
}

.form-success {
  margin: 0 0 22px;
  padding: 14px 16px;
  background: rgba(7, 89, 184, 0.12);
  border-left: 4px solid var(--forest-2);
  color: var(--forest);
  font-weight: 750;
  line-height: 1.5;
}

/* Mobile-only / desktop-only visibility toggles.
   `!important` on BOTH sides of each side of the media query so :
   - base rules override same-specificity `.nav-group { display:
     inline-flex }` and `.nav-logout { display: none }` on desktop,
   - the mobile media query can then flip the same properties back,
     which requires `!important` again since we set it in base. */
.nav-mobile-only { display: none !important; }
.nav-desktop-only { display: inline-flex !important; }

/* ============================================================
   Desktop account dropdown : Mon compte ▼
   One collapsible button on the right of the top-nav holds all
   account-related entries (personal space, language, logout).
   ============================================================ */
.account {
  position: relative;
  align-items: center;
  flex-shrink: 0;
}
.account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 140ms, border-color 140ms;
  white-space: nowrap;
}
.account-trigger .user-icon {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.65);
}
.account-trigger:hover .user-icon,
.account-trigger[aria-expanded="true"] .user-icon {
  color: currentColor;
}
.account-trigger-label {
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-trigger:hover,
.account-trigger:focus-visible,
.account-trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  outline: none;
}
.account-caret {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}
.account-trigger[aria-expanded="true"] .account-caret {
  transform: translateY(2px) rotate(-135deg);
}

.account-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  min-width: 240px;
  margin: 0;
  padding: 6px 0;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.account.is-expanded > .account-panel {
  display: block;
}

/* Entries inside the dropdown panel (links + logout button). Same
   visual DNA, different container. */
.account-panel > a,
.account-panel-logout > button {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  font-size: 0.94rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.account-panel > a:hover,
.account-panel-logout > button:hover {
  background: rgba(255, 255, 255, 0.06);
}
.account-panel > a[aria-current="page"] {
  color: var(--gold, #ffd43b);
  font-weight: 700;
}

.account-panel-divider {
  height: 1px;
  margin: 6px 0;
  background: rgba(255, 255, 255, 0.09);
  border: 0;
}

/* Language section inside the desktop dropdown : same collapsible
   `.nav-group` pattern as the mobile drawer, restyled to fit the
   narrower panel. Click the row to expand ; icon flips + <-> x. */
.account-panel .nav-group {
  display: block;
  margin: 0;
  padding: 0;
}
.account-panel .nav-group > .nav-group-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
}
.account-panel .nav-group > .nav-group-toggle:hover,
.account-panel .nav-group > .nav-group-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
.account-panel .nav-group > .nav-group-toggle .nav-group-label {
  font-size: inherit;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
}
.account-panel .nav-group > .nav-group-toggle .nav-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1;
}
.account-panel .nav-group > .nav-group-toggle .nav-group-icon::before {
  content: "+";
}
.account-panel .nav-group > .nav-group-toggle[aria-expanded="true"] .nav-group-icon::before {
  content: "\00D7";
  font-size: 1.4rem;
}
.account-panel .nav-group > .nav-group-list {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  background: rgba(0, 0, 0, 0.2);
}
.account-panel .nav-group.is-expanded > .nav-group-list {
  display: block;
}
.account-panel .nav-group > .nav-group-list li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.account-panel .nav-group > .nav-group-list a {
  display: block;
  padding: 8px 16px 8px 30px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  text-decoration: none;
}
.account-panel .nav-group > .nav-group-list a:hover {
  background: rgba(255, 255, 255, 0.06);
}
.account-panel .nav-group > .nav-group-list a[aria-current="true"] {
  color: var(--gold, #ffd43b);
  font-weight: 700;
}

/* --- Nested nav-group inside the desktop dropdown (Level 2) -------
   Used for "Mon compte" nested under "Tableau de bord" or
   "Administration". One more indent step to encode depth. */
.account-panel .nav-group .nav-group-list li .nav-group > .nav-group-toggle {
  padding-left: 30px;
  background: rgba(255, 255, 255, 0.02);
}
.account-panel .nav-group .nav-group-list li .nav-group > .nav-group-list a {
  padding-left: 44px;
}
.account-panel .nav-group .nav-group-list li .nav-group > .nav-group-list a[aria-current="true"] {
  padding-left: 44px;
}
.account-panel .nav-group .nav-group-list li .nav-group > .nav-group-list {
  background: rgba(0, 0, 0, 0.25);
}

/* Logout form inside the desktop dropdown. Since v1.0.3 the form is
   rendered by the shared nav.php $renderSection with class `.nav-logout`
   (was `.account-panel-logout` before). The button gets a warm-red tint
   to distinguish it from the neutral links above. */
.account-panel > .nav-logout,
.account-panel-logout {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.account-panel > .nav-logout > button,
.account-panel-logout > button {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  color: rgba(255, 180, 180, 0.95);
  font: inherit;
  font-size: 0.94rem;
  text-align: left;
  cursor: pointer;
}
.account-panel > .nav-logout > button:hover,
.account-panel-logout > button:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Section break between public and account regions inside the top-nav.
   On desktop it's a thin vertical bar; on mobile it becomes a labelled
   row (see the mobile @media further down). */
.nav-break {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.22);
  margin: 0 4px;
  vertical-align: middle;
}
.nav-break .nav-section-label { display: none; }

/* Nav group : collapsible submenu section reusable inside any drawer.
   Used today by the language picker (see partials/lang_switcher.php).

   Desktop  : toggle is hidden, list is displayed inline just like the
              surrounding nav links. Behaves like a plain inline group.
   Mobile   : header becomes a big tappable row (12x16 padding, like
              the other drawer entries) that toggles an accordion of
              indented children. Icon flips + <-> x by aria-expanded.

   Adding another collapsible group later is just : wrap the group in
   `<div class="nav-group">`, give it a `.nav-group-toggle` + `.nav-group-list`.
*/
.nav-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nav-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: default;         /* not interactive on desktop */
  pointer-events: none;
}
.nav-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.nav-group-icon {
  display: none;           /* hidden on desktop */
}
.nav-group-list {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-group-list a {
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  color: inherit;
  font-size: 0.92rem;
  text-decoration: none;
}
.nav-group-list a:hover {
  border-bottom-color: currentColor;
}
.nav-group-list a[aria-current="true"] {
  color: var(--gold, #ffd43b);
  font-weight: 800;
}

/* Address autocomplete overlay (Base Adresse Nationale) */
.autocomplete-shell {
  position: relative;
  display: block;
  margin-top: 9px;
}

.autocomplete-shell > input {
  margin-top: 0;
}

.autocomplete-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  max-height: 260px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 12px 24px rgba(16, 20, 43, 0.14);
}

.autocomplete-suggestions[hidden] {
  display: none;
}

.autocomplete-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}

.autocomplete-item:last-child {
  border-bottom: 0;
}

.autocomplete-item:hover,
.autocomplete-item:focus {
  background: rgba(7, 89, 184, 0.08);
  outline: none;
}



.required {
  color: var(--coral);
  font-weight: 850;
  margin-left: 2px;
}

.form-required-note {
  margin: -12px 0 4px;
  color: var(--muted);
  font-size: 0.84rem;
}

.verify-help {
  margin: 0 0 20px;
  color: var(--muted);
  line-height: 1.6;
}

.verify-simulate {
  display: grid;
  gap: 14px;
  padding: 18px;
  margin: 6px 0 8px;
  border: 1px dashed var(--line);
  background: rgba(255, 212, 59, 0.06);
}

.uc-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.uc-checklist li {
  position: relative;
  padding-left: 22px;
  color: var(--ink);
  line-height: 1.55;
  font-size: 0.94rem;
}

.uc-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
}

.consent-line,
.switch-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.consent-line input,
.switch-line input {
  width: 18px;
  height: 18px;
  accent-color: var(--forest);
}

.primary-action,
.secondary-action,
.icon-button,
.close-button {
  border: 0;
  color: #ffffff;
  background: linear-gradient(135deg, var(--forest), var(--forest-2));
  font-weight: 800;
}

.primary-action,
.secondary-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 18px;
}

.primary-action:hover,
.secondary-action:hover,
.icon-button:hover,
.close-button:hover {
  background: linear-gradient(135deg, var(--forest-2), var(--forest));
}

.primary-action:disabled {
  cursor: not-allowed;
  background: #aab0ab;
}

.mini-house {
  position: relative;
  width: min(100%, 280px);
  height: 210px;
  margin: 36px 0 26px;
  background: linear-gradient(180deg, transparent 46%, #d9e8ea 46%);
}

.mini-roof {
  position: absolute;
  left: 22px;
  top: 30px;
  width: 210px;
  height: 110px;
  transform: skewY(-13deg);
  background: var(--coral);
}

.mini-body {
  position: absolute;
  left: 48px;
  bottom: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 190px;
  height: 112px;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.mini-body span {
  background: linear-gradient(135deg, var(--sky), #fff);
}

.muted,
.terms-summary,
.terms-auto,
.reserve-note {
  color: var(--muted);
  line-height: 1.6;
}

.participant-room {
  padding: clamp(36px, 6vw, 74px) clamp(18px, 5vw, 68px) clamp(48px, 7vw, 86px);
}

.room-header {
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}

.participant-room h2 {
  color: var(--ink);
  font-size: clamp(2.4rem, 6vw, 5.6rem);
}

.status-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-weight: 760;
}

.status-pill span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--coral);
}

.status-pill.is-live span {
  background: var(--forest-2);
}

.room-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 18px;
}

.ticket-builder,
.prize-detail-panel,
.terms-gate {
  min-height: 460px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 40px rgba(16, 20, 43, 0.08);
}

.section-title {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.section-title h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
}

.quantity-row {
  display: grid;
  grid-template-columns: 54px minmax(86px, 1fr) 54px;
  gap: 10px;
  margin-bottom: 22px;
}

.icon-button {
  width: 54px;
  height: 54px;
  font-size: 1.45rem;
}

.quantity-row output {
  display: grid;
  min-height: 54px;
  place-items: center;
  border: 1px solid var(--line);
  background: #ffffff;
  font-size: 1.35rem;
  font-weight: 850;
}

.price-lines {
  display: grid;
  gap: 1px;
  margin: 0 0 24px;
  background: var(--line);
  border: 1px solid var(--line);
}

.price-lines div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 54px;
  padding: 0 16px;
  background: #ffffff;
}

.price-lines dd {
  margin: 0;
  font-weight: 850;
}

.ticket-strip {
  display: grid;
  gap: 10px;
}

.reserve-action {
  width: 100%;
  margin-top: 18px;
}

.reserve-note {
  min-height: 42px;
  margin: 14px 0 0;
  font-size: 0.92rem;
}

.ticket {
  display: grid;
  grid-template-columns: 78px 1fr 48px;
  min-height: 62px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at left 31px, transparent 0 10px, #ffffff 10px),
    linear-gradient(90deg, #ffffff, #ffffff);
  overflow: hidden;
}

.ticket strong,
.ticket span,
.ticket em {
  display: grid;
  place-items: center;
}

.ticket strong {
  background: var(--forest);
  color: #fff;
  font-size: 0.9rem;
}

.ticket span {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 850;
}

.ticket em {
  color: var(--coral);
  font-style: normal;
  font-weight: 850;
}

.prize-detail-panel {
  overflow: hidden;
}

.lot-visual {
  position: relative;
  height: 170px;
  margin-bottom: 22px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(217, 232, 234, 0.72), rgba(246, 250, 255, 0.34)),
    linear-gradient(135deg, #d9e8ea, #557b61);
}

.lot-visual::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42px;
  background: #557b61;
}

.lot-roof {
  position: absolute;
  left: 50%;
  top: 34px;
  width: 190px;
  height: 96px;
  transform: translateX(-50%) skewY(-12deg);
  background: var(--coral);
}

.lot-house {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 0.7fr;
  gap: 10px;
  width: 220px;
  height: 88px;
  padding: 16px;
  transform: translateX(-50%);
  border: 1px solid var(--line);
  background: var(--panel);
}

.lot-house span {
  background: linear-gradient(135deg, var(--sky), #fff);
}

.lot-house i {
  background: var(--forest);
}

.lot-intro {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.6;
}

.lot-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0 0 18px;
  border: 1px solid var(--line);
  background: var(--line);
}

.lot-specs div {
  min-height: 74px;
  padding: 14px;
  background: #ffffff;
}

.lot-specs dd {
  margin: 8px 0 0;
  font-weight: 850;
}

.lot-highlights {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink);
}

.lot-highlights li {
  padding-left: 18px;
  border-left: 4px solid var(--gold);
  line-height: 1.45;
}

.read-meter {
  height: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #ffffff;
}

.read-meter span {
  display: block;
  width: 22%;
  height: 100%;
  background: linear-gradient(90deg, var(--coral), var(--gold), var(--forest-2));
  transition: width 0.35s ease;
}

.terms-actions {
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
}

.terms-auto {
  min-height: 24px;
  margin: 12px 0 0;
  font-size: 0.92rem;
  font-weight: 750;
}

.secondary-action {
  min-width: 120px;
  justify-content: center;
  background: var(--forest);
}

.switch-line {
  min-height: 56px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink);
  font-weight: 800;
}

.switch-line input:disabled {
  cursor: default;
}

.terms-drawer {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 560px);
  pointer-events: none;
  visibility: hidden;
}

.terms-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}

.drawer-backdrop {
  background: rgba(16, 20, 43, 0.42);
  opacity: 0;
  transition: opacity 0.24s ease;
}

.terms-drawer.is-open .drawer-backdrop {
  opacity: 1;
}

.drawer-panel {
  position: relative;
  height: 100vh;
  padding: clamp(24px, 4vw, 42px);
  overflow: auto;
  background: var(--panel);
  box-shadow: -30px 0 70px rgba(16, 20, 43, 0.2);
  transform: translateX(100%);
  transition: transform 0.28s ease;
}

.terms-drawer.is-open .drawer-panel {
  transform: translateX(0);
}

.close-button {
  position: absolute;
  top: 22px;
  right: 22px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  font-size: 1.05rem;
}

.terms-copy {
  display: grid;
  gap: 18px;
  max-height: 54vh;
  margin: 28px 0 20px;
  padding-right: 10px;
  overflow: auto;
  outline: 0;
}

.terms-copy section {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.terms-copy h3 {
  margin: 0 0 8px;
  color: var(--forest);
  font-size: 1rem;
}

.terms-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.drawer-accept {
  width: 100%;
}

.lot-discover {
  padding: clamp(64px, 9vw, 112px) clamp(18px, 5vw, 68px);
  background: var(--paper);
}

.lot-discover-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
}

.lot-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #cfe1e4 0 56%, #b9c8a5 56%);
  box-shadow: var(--shadow);
}

.lot-photo-sky {
  position: absolute;
  inset: 0 0 44% 0;
  background: linear-gradient(180deg, #e6f0f1, #c9dee0);
}

.lot-photo-sun {
  position: absolute;
  width: 96px;
  height: 96px;
  top: 12%;
  right: 14%;
  border-radius: 50%;
  background: radial-gradient(circle, #f4d894 0 36%, rgba(244, 216, 148, 0.12) 70%, transparent 80%);
}

.lot-photo-ground {
  position: absolute;
  inset: 56% 0 0 0;
  background: linear-gradient(180deg, #b9c8a5, #8aa57f);
}

.lot-photo-house {
  position: absolute;
  left: 52%;
  bottom: 14%;
  width: 58%;
  transform: translateX(-50%);
}

.lp-roof {
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 64px solid var(--coral);
  width: 100%;
  box-sizing: border-box;
  border-bottom-width: 56px;
  margin: 0 auto;
}

.lp-facade {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px 18px 26px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-top: 0;
}

.lp-window {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #d9e8ea, #fff);
  border: 1px solid var(--line);
}

.lp-door {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 22%;
  height: 38%;
  transform: translateX(-50%);
  background: var(--forest);
}

.lp-terrace {
  height: 14px;
  margin-top: -1px;
  background: #d9c9a8;
  border: 1px solid var(--line);
  border-top: 0;
}

.lot-photo-tree {
  position: absolute;
  left: 10%;
  bottom: 16%;
  width: 70px;
}

.lot-photo-tree span {
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #5b8a64, #2f5a3b);
}

.lot-photo-tree i {
  display: block;
  width: 8px;
  height: 28px;
  margin: -6px auto 0;
  background: #3b2a1d;
}

.lot-photo-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  display: grid;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  font-size: 0.82rem;
}

.lot-photo-tag span {
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
}

.lot-photo-tag strong {
  color: var(--ink);
  font-size: 0.96rem;
}

.lot-text h2 {
  margin: 6px 0 16px;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  font-weight: 840;
  line-height: 1.04;
  color: var(--ink);
}

.lot-lede {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.7;
}

.lot-text .lot-highlights {
  display: grid;
  gap: 12px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.lot-text .lot-highlights li {
  padding-left: 18px;
  border-left: 4px solid var(--gold);
  line-height: 1.55;
  color: var(--ink);
}

.lot-text .lot-highlights strong {
  font-weight: 850;
  margin-right: 4px;
}

.lot-quote {
  padding: 22px 24px;
  border-left: 3px solid var(--coral);
  background: rgba(255, 178, 28, 0.06);
}

.lot-quote p {
  margin: 0;
  color: var(--ink);
  font-style: italic;
  line-height: 1.6;
}

.lot-stats {
  padding: clamp(56px, 8vw, 96px) clamp(18px, 5vw, 68px);
  background: linear-gradient(180deg, rgba(217, 232, 234, 0.55), rgba(246, 250, 255, 0.9));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.lot-stats-head {
  max-width: 1240px;
  margin: 0 auto 32px;
  text-align: center;
}

.lot-stats-head h2 {
  margin: 6px 0 0;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  font-weight: 840;
  color: var(--ink);
}

.lot-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: 1240px;
  margin: 0 auto;
}

.stat-card {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 26px 22px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 14px 32px rgba(16, 20, 43, 0.06);
  overflow: hidden;
}

.stat-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--forest);
}

.stat-value::before {
  background: var(--coral);
}

.stat-ticket::before {
  background: var(--gold);
}

.stat-draw::before {
  background: var(--forest-2);
}

.stat-countdown::before {
  background: linear-gradient(90deg, var(--coral), var(--gold), var(--forest-2));
}

.stat-kicker {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stat-figure {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 850;
  color: var(--ink);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.stat-card small {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.stat-countdown .stat-figure {
  color: var(--coral);
}

.lot-map {
  padding: clamp(56px, 8vw, 96px) clamp(18px, 5vw, 68px);
  background: var(--paper);
}

.lot-map-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(280px, 0.9fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: stretch;
  max-width: 1240px;
  margin: 0 auto;
}

.lot-map-card {
  position: relative;
  min-height: 380px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.lot-map-card iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  border: 0;
  filter: saturate(0.92) contrast(0.96);
}

.lot-map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 48px;
  transform: translate(-50%, -90%);
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(16, 20, 43, 0.35));
}

.lot-map-pin::before {
  content: "";
  position: absolute;
  inset: 0 0 12px 0;
  background: var(--coral);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.lot-map-pin span {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  transform: translateX(-50%);
}

.lot-map-info h2 {
  margin: 6px 0 14px;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 840;
  color: var(--ink);
  line-height: 1.05;
}

.lot-map-lede {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.65;
}

.lot-map-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0 0 18px;
  border: 1px solid var(--line);
  background: var(--line);
}

.lot-map-specs div {
  padding: 14px 16px;
  background: #ffffff;
}

.lot-map-specs dt {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lot-map-specs dd {
  margin: 6px 0 0;
  color: var(--ink);
  font-weight: 850;
}

.lot-map-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.why-participate {
  padding: clamp(64px, 9vw, 112px) clamp(18px, 5vw, 68px);
  background: var(--paper);
}

.why-head {
  max-width: 1240px;
  margin: 0 auto 36px;
  text-align: center;
}

.why-head h2 {
  margin: 6px 0 0;
  font-size: clamp(2rem, 3.8vw, 2.8rem);
  font-weight: 840;
  color: var(--ink);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
}

.why-card {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 32px 28px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 16px 36px rgba(16, 20, 43, 0.07);
}

.why-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--coral));
}

.why-num {
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.why-card h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 840;
  color: var(--ink);
  line-height: 1.15;
}

.why-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.page-espace {
  background: var(--paper);
}

.espace-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px clamp(18px, 5vw, 68px);
  color: #fffef9;
  background: linear-gradient(135deg, #061b57, #08266f 58%, #0759b8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.espace-header .brand-logo-img {
  height: 52px;
}

.espace-header .top-nav {
  flex: 1;
  justify-content: flex-end;
  color: rgba(255, 255, 255, 0.84);
}

.ghost-action {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #ffffff;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.ghost-action:hover {
  background: rgba(255, 255, 255, 0.12);
}

.login-hint {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.site-footer {
  padding: clamp(40px, 6vw, 72px) clamp(18px, 5vw, 68px) clamp(24px, 3vw, 36px);
  color: rgba(255, 255, 255, 0.86);
  background:
    radial-gradient(circle at 88% 0%, rgba(255, 212, 59, 0.14), transparent 34%),
    linear-gradient(180deg, #061b57, #071f64 52%, #04133d);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(160px, 1fr));
  gap: clamp(24px, 4vw, 56px);
  padding-bottom: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-brand {
  display: grid;
  gap: 14px;
  align-content: start;
}

.footer-mark {
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.08);
}

.footer-tagline {
  margin: 4px 0 0;
  font-size: 1.4rem;
  font-weight: 840;
  color: #ffffff;
}

.footer-blurb {
  margin: 0;
  max-width: 32ch;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.55;
  font-size: 0.94rem;
}

.footer-col {
  display: grid;
  gap: 12px;
  align-content: start;
}

.footer-title {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.footer-col a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.94rem;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  width: max-content;
}

.footer-col a:hover {
  color: #ffffff;
  border-color: currentColor;
}

.footer-muted {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.88rem;
  line-height: 1.5;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: clamp(18px, 2vw, 24px);
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.7);
}

.footer-bottom p {
  margin: 0;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.86;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.46;
  }
}

@media (max-width: 1120px) {
  .app-shell,
  .room-grid {
    grid-template-columns: 1fr;
  }

  .access-panel {
    min-height: auto;
    padding-top: 94px;
    border-left: 0;
  }

  .screen {
    width: min(100%, 640px);
  }

  .lot-discover-grid,
  .lot-map-grid {
    grid-template-columns: 1fr;
  }

  .lot-stats-grid,
  .social-proof-inner,
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .app-shell {
    min-height: auto;
  }

  .prize-stage {
    min-height: 92vh;
    padding: 20px 18px 22px;
  }

  .brand-row,
  .room-header,
  .terms-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  /* --- Mobile / desktop visibility switch -------------------------
     `!important` on both sides so we override the base's own
     `!important` from the other direction. */
  .nav-mobile-only { display: block !important; }
  .nav-desktop-only { display: none !important; }

  /* User row at the top of the "account" section in the mobile drawer.
     Shows the icon + name as a small identity marker before the flat
     list of actions. Not clickable (aria-hidden). */
  .top-nav .nav-links > .nav-user-row {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0;
    min-height: 52px;
    padding: 0 18px;
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    font-weight: 650;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .top-nav .nav-links > .nav-user-row .user-icon {
    flex-shrink: 0;
    color: var(--gold, #ffd43b);
  }

  /* Section break inside the mobile drawer. It is only a divider, not a
     menu row, so the actionable entries keep one uniform rhythm. */
  .top-nav .nav-links > .nav-break {
    display: block;
    width: auto;
    height: 1px;
    margin: 4px 0 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.09);
    border: 0;
    vertical-align: baseline;
  }
  .top-nav .nav-links > .nav-break.nav-break-first {
    border-top: 0;   /* no border above the very first section */
  }
  .top-nav .nav-links > .nav-break .nav-section-label {
    display: none;
  }

  /* ==================================================================
     MOBILE MENU - ONE DESIGN SYSTEM
     ------------------------------------------------------------------
     Every menu entry (top-level link, group toggle, sub-item, logout
     button) reuses the SAME base : padding, borders, colors, font size,
     hover state. The only visual difference between a parent and a
     child is the extra left indent on children. The active state is
     always signalled the same way : gold rail on the left (3 px), text
     unchanged.

     Tokens are inline (not CSS variables) because @media declarations
     can't put custom-properties on :root cleanly here - grep-replace on
     the numbers if you want a different scale. Sizes match one another
     so this block reads top-down without cross-references.
     ================================================================== */

  /* -- Hamburger row : same for public brand-row and admin/espace ---- */
  .top-nav {
    width: auto;
    justify-content: flex-end;
    gap: 10px;
  }
  .nav-toggle { display: inline-flex; }

  /* -- Drawer panel (opens absolute under the hamburger row) --------- */
  .top-nav .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 100;
    margin: 0;
    padding: 0;
    background: var(--ink);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    list-style: none;
  }
  .top-nav.is-open .nav-links {
    display: block;   /* natural document flow, no flex tricks */
  }

  /* -- Unified entry base : every top-level item + group toggle + logout
     button share these exact properties. Compound selector so specificity
     wins over the base desktop rules (.top-nav a etc.). */
  .top-nav .nav-links a,
  .top-nav .nav-links .nav-group-toggle,
  .top-nav .nav-links > .nav-logout > button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 52px;
    box-sizing: border-box;
    padding: 0 18px 0 15px;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;   /* reserved for active rail */
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.92);
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  /* -- Hover state : same for every entry ---------------------------- */
  .top-nav .nav-links a:hover,
  .top-nav .nav-links .nav-group-toggle:hover,
  .top-nav .nav-links > .nav-logout > button:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  /* -- Active state : gold rail on the left. Same treatment for a
     parent nav link (aria-current="page") and a sub-item (aria-current
     ="true"). The text does not jump because the transparent border was
     already reserving 3 px. */
  .top-nav .nav-links a[aria-current="page"],
  .top-nav .nav-links a[aria-current="true"] {
    background: rgba(255, 255, 255, 0.04);
    border-left-color: var(--gold, #ffd43b);
  }

  /* -- Group : collapsible section --------------------------------- */
  .top-nav .nav-links .nav-group {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .top-nav .nav-links .nav-group-toggle {
    justify-content: space-between;
    gap: 12px;
    pointer-events: auto;   /* on desktop it's disabled, here we re-enable */
  }
  .top-nav .nav-links .nav-group-toggle .nav-group-label {
    /* Reset the small-uppercase-muted label style from the desktop base
       - on mobile the label reads as a full menu entry. */
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: inherit;
  }
  .top-nav .nav-links .nav-group-toggle .nav-group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    flex: 0 0 24px;
  }
  .top-nav .nav-links .nav-group-toggle .nav-group-icon::before {
    content: "+";
  }
  .top-nav .nav-links .nav-group-toggle[aria-expanded="true"] .nav-group-icon::before {
    content: "\00D7";       /* × (multiplication sign) */
    font-size: 1.5rem;
  }

  /* -- Sub-list (children of a group) ------------------------------- */
  .top-nav .nav-links .nav-group-list {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    background: rgba(0, 0, 0, 0.2);   /* subtle inset to mark hierarchy */
  }
  .top-nav .nav-links .nav-group.is-expanded > .nav-group-list {
    display: block;
  }
  .top-nav .nav-links .nav-group-list li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* Sub-items inherit the unified entry style above, add left indent. */
  .top-nav .nav-links .nav-group > .nav-group-list a,
  .top-nav .nav-links .nav-group > .nav-group-list .nav-group-toggle {
    padding-left: 37px;     /* base 40 indent - 3px border for alignment */
  }

  /* Level 2 (nested nav-group) : "Mon compte" inside "Tableau de bord".
     Toggle keeps a slightly indented look, children go one step deeper. */
  .top-nav .nav-links > .nav-group > .nav-group-list li .nav-group > .nav-group-toggle {
    padding-left: 37px;
    background: rgba(0, 0, 0, 0.14);
    font-weight: 500;
  }
  .top-nav .nav-links > .nav-group > .nav-group-list li .nav-group > .nav-group-list {
    background: rgba(0, 0, 0, 0.3);
  }
  .top-nav .nav-links > .nav-group > .nav-group-list li .nav-group > .nav-group-list a {
    padding-left: 55px;
  }
  .top-nav .nav-links > .nav-group > .nav-group-list li .nav-group > .nav-group-list a[aria-current="true"] {
    padding-left: 55px;
  }

  /* -- Logout wrapper : no styling on the form itself, the button
     inside owns the row. */
  .top-nav .nav-links > .nav-logout {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* -- Kill the trailing border on the very last row of the drawer so
     it doesn't cut against the rounded corner. Works whether the last
     child is a plain link, a nav-group (last list item), or the logout
     form (its button). */
  .top-nav .nav-links > :last-child > :last-child,
  .top-nav .nav-links > :last-child,
  .top-nav .nav-links > :last-child > .nav-group-list > li:last-child > a {
    border-bottom: 0;
  }

  /* -- Public site (.brand-row) : mirror the espace-header layout so
     both surfaces have a single compact "brand + hamburger" row 1 and
     a controls row 2 (just lang-switcher on the public site). The
     drawer anchors to the parent .brand-row so it always spans the
     full header width.

     z-index note: `.prize-stage` has `overflow: hidden` and the base
     stylesheet gives `.brand-row`, `.hero-copy` and `.prize-facts` all
     `z-index: 1` inside it. Same-value siblings fall back to document
     order, so `.hero-copy` (rendered later) was painting on top of the
     drawer. Bumping `.brand-row` to a higher z-index inside its
     stacking context fixes it. */
  .brand-row {
    /* Override the earlier `flex-direction: column` for landing pages. */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 30;
  }

  .brand-row .brand-lockup {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Same rationale as the private header: burger on the far right of
     row 1, language switcher between brand and burger. */
  .brand-row .top-nav {
    order: 2;
    flex: 0 0 auto;
    width: auto;
    justify-content: flex-end;
    position: static;   /* let drawer anchor to .brand-row */
  }

  .brand-row .top-nav .nav-links {
    left: 0;
    right: 0;
    top: calc(100% + 6px);  /* below the full brand-row */
  }

  .hero-copy {
    padding: 0;
  }

  .hero-feature {
    grid-template-columns: 1fr;
    padding: 36px 0 24px;
  }

  .hero-prize-card {
    grid-template-rows: minmax(220px, auto) auto;
  }

  .hero-prize-photo {
    min-height: 240px;
  }

  .hero-copy h1 {
    font-size: clamp(3rem, 16vw, 4.6rem);
  }

  .brand-logo-img {
    height: 58px;
  }

  .prize-facts {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .prize-facts article {
    min-height: 86px;
  }

  .panel-tabs {
    top: 18px;
    right: 18px;
    left: 18px;
  }

  .participant-room {
    padding-inline: 14px;
  }

  .ticket-builder,
  .prize-detail-panel,
  .terms-gate {
    min-height: auto;
  }

  .ticket {
    grid-template-columns: 64px 1fr 42px;
  }

  .terms-drawer {
    grid-template-columns: 1fr;
  }

  .drawer-backdrop {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Private/admin header mobile layout - compact 2-row header:
        Row 1 : brand-lockup (grows) + hamburger button (right)
        Row 2 : lang-switcher + logout form
     The drawer is positioned absolutely against the HEADER (not the
     nav), so it always spans the full header width regardless of how
     wide the hamburger button itself is. */
  .espace-header {
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    position: relative;
  }

  .espace-header .brand-lockup {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Order on row 1: brand (0), lang-switcher (1), hamburger button (2)
     so the burger sits at the far right - the pattern every mobile
     user is trained on. Logout wraps to row 2 alone, right-aligned. */
  .espace-header .top-nav {
    order: 2;
    flex: 0 0 auto;
    width: auto;
    justify-content: flex-end;
    position: static;      /* let the drawer anchor to .espace-header */
  }

  /* On mobile the "logout" moves inside the burger drawer (see .nav-logout
     below). Hide the outer form to avoid showing it twice. */
  .espace-header .logout-form {
    display: none;
  }

  /* Anchor the drawer inside the espace-header at 16px from each edge so
     it visually aligns with the header's own padding. The public
     brand-row does the same at 0 (it already has padding from its
     parent .prize-stage). */
  .espace-header .top-nav .nav-links {
    left: 16px;
    right: 16px;
    top: calc(100% + 6px);
  }

  .lot-stats-grid,
  .social-proof-inner,
  .why-grid {
    grid-template-columns: 1fr;
  }

  .lot-map-card,
  .lot-map-card iframe {
    min-height: 280px;
  }

  .grid-2,
  .grid-phone {
    grid-template-columns: 1fr;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .prize-card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .prize-card-actions .primary-action,
  .prize-card-actions .secondary-action {
    justify-content: center;
    width: 100%;
  }

  .hero-cta,
  .ghost-cta,
  .final-cta-button {
    width: 100%;
    justify-content: center;
  }

  /* -------- Admin: mobile-specific tweaks ---------------------------
     The tables themselves are made scroll-safe via .table-scroll above
     regardless of viewport. Here we compact the surrounding chrome so
     the admin experience stays usable on a phone. */
  .admin-shell {
    padding: 24px 14px 32px;
  }
  .admin-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .admin-topbar h1 {
    font-size: 1.6rem;
  }
  .admin-topbar .primary-action {
    align-self: flex-start;
  }
  /* The photo grid caps at 180px min-width which barely fits on a
     narrow phone (343px content - 14px gap = one column max). Give it
     more breathing room by dropping the min-width slightly. */
  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }
  /* Photo card captions were pretty compact on desktop; the tap
     targets need to be at least 44px on mobile per iOS guidelines. */
  .photo-choice {
    min-height: 32px;
  }
}

@media (max-width: 1120px) and (min-width: 701px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Header-specific tablet breakpoint. The full desktop navigation starts
   wrapping before the global 700px mobile breakpoint, which makes the logo
   feel misplaced in the header. Switch only the header chrome to the drawer
   pattern here; page layouts keep their regular tablet rules. */
@media (max-width: 900px) and (min-width: 701px) {
  .espace-header {
    flex-wrap: nowrap;
    gap: 16px;
    position: relative;
  }

  .espace-header .brand-lockup {
    flex: 0 1 auto;
    max-width: calc(100% - 60px);
  }

  .espace-header .brand-logo-img {
    width: clamp(188px, 28vw, 208px);
    height: auto;
  }

  .espace-header .top-nav {
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
    position: static;
  }

  .espace-header .nav-mobile-only { display: block !important; }
  .espace-header .nav-desktop-only { display: none !important; }
  .espace-header .nav-toggle { display: inline-flex; }

  .espace-header .top-nav .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: clamp(18px, 5vw, 68px);
    right: clamp(18px, 5vw, 68px);
    z-index: 100;
    margin: 0;
    padding: 0;
    background: var(--ink);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    list-style: none;
  }

  .espace-header .top-nav.is-open .nav-links {
    display: block;
  }

  .espace-header .top-nav .nav-links > .nav-user-row {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0;
    min-height: 52px;
    padding: 0 18px;
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    font-weight: 650;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .espace-header .top-nav .nav-links > .nav-user-row .user-icon {
    flex-shrink: 0;
    color: var(--gold, #ffd43b);
  }

  .espace-header .top-nav .nav-links > .nav-break {
    display: block;
    width: auto;
    height: 1px;
    margin: 4px 0 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.09);
    border: 0;
  }

  .espace-header .top-nav .nav-links > .nav-break .nav-section-label {
    display: none;
  }

  .espace-header .top-nav .nav-links a,
  .espace-header .top-nav .nav-links .nav-group-toggle,
  .espace-header .top-nav .nav-links > .nav-logout > button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 52px;
    box-sizing: border-box;
    padding: 0 18px 0 15px;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.92);
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .espace-header .top-nav .nav-links a:hover,
  .espace-header .top-nav .nav-links .nav-group-toggle:hover,
  .espace-header .top-nav .nav-links > .nav-logout > button:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  .espace-header .top-nav .nav-links a[aria-current="page"],
  .espace-header .top-nav .nav-links a[aria-current="true"] {
    background: rgba(255, 255, 255, 0.04);
    border-left-color: var(--gold, #ffd43b);
  }

  .espace-header .top-nav .nav-links .nav-group {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .espace-header .top-nav .nav-links .nav-group-toggle {
    justify-content: space-between;
    gap: 12px;
    pointer-events: auto;
  }

  .espace-header .top-nav .nav-links .nav-group-toggle .nav-group-label {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: inherit;
  }

  .espace-header .top-nav .nav-links .nav-group-toggle .nav-group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    flex: 0 0 24px;
  }

  .espace-header .top-nav .nav-links .nav-group-toggle .nav-group-icon::before {
    content: "+";
  }

  .espace-header .top-nav .nav-links .nav-group-toggle[aria-expanded="true"] .nav-group-icon::before {
    content: "\00D7";
    font-size: 1.5rem;
  }

  .espace-header .top-nav .nav-links .nav-group-list {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    background: rgba(0, 0, 0, 0.2);
  }

  .espace-header .top-nav .nav-links .nav-group.is-expanded > .nav-group-list {
    display: block;
  }

  .espace-header .top-nav .nav-links .nav-group-list li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .espace-header .top-nav .nav-links .nav-group > .nav-group-list a,
  .espace-header .top-nav .nav-links .nav-group > .nav-group-list .nav-group-toggle {
    padding-left: 37px;
  }

  .espace-header .top-nav .nav-links > .nav-group > .nav-group-list li .nav-group > .nav-group-toggle {
    padding-left: 37px;
    background: rgba(0, 0, 0, 0.14);
    font-weight: 500;
  }

  .espace-header .top-nav .nav-links > .nav-group > .nav-group-list li .nav-group > .nav-group-list {
    background: rgba(0, 0, 0, 0.3);
  }

  .espace-header .top-nav .nav-links > .nav-group > .nav-group-list li .nav-group > .nav-group-list a,
  .espace-header .top-nav .nav-links > .nav-group > .nav-group-list li .nav-group > .nav-group-list a[aria-current="true"] {
    padding-left: 55px;
  }

  .espace-header .top-nav .nav-links > .nav-logout {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .espace-header .top-nav .nav-links > :last-child > :last-child,
  .espace-header .top-nav .nav-links > :last-child,
  .espace-header .top-nav .nav-links > :last-child > .nav-group-list > li:last-child > a {
    border-bottom: 0;
  }
}

@media (max-width: 700px) {
  .espace-header .brand-lockup,
  .brand-row .brand-lockup {
    flex: 0 1 auto;
    max-width: calc(100% - 56px);
  }

  .espace-header .brand-logo-img,
  .brand-row .brand-logo-img {
    width: clamp(166px, 55vw, 208px);
    height: auto;
  }

  .espace-header .top-nav,
  .brand-row .top-nav {
    margin-left: auto;
  }
}

:root {
  --hero-image: none; /* no Quizora hero photo yet - flat gradient instead */
}

.page-info {
  background: var(--paper);
}

.info-page {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 48px) clamp(64px, 9vw, 120px);
}

.info-page h1 {
  margin: 6px 0 40px;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 840;
  line-height: 1.05;
  color: var(--ink);
}

.info-block {
  padding: 28px 0;
  border-top: 1px solid var(--line);
}

.info-block:last-child {
  border-bottom: 1px solid var(--line);
}

.info-block h2 {
  margin: 0 0 12px;
  font-size: 1.3rem;
  font-weight: 840;
  color: var(--forest);
}

.info-block p,
.info-block li {
  margin: 0 0 10px;
  color: var(--ink);
  line-height: 1.65;
}

.info-block ol,
.info-block ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.info-lede {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.6;
}

/* ---- Sponsoring / affiliation disclosures ------------------------------
   Both are separate revenue models from AdSense; each carries its own
   explicit label so nothing reads as undisclosed advertising. ---------- */
.sponsor-disclosure {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.9rem;
}

.sponsor-disclosure a {
  font-weight: 700;
}

.affiliate-link {
  margin-top: 14px;
}

.affiliate-disclosure {
  margin-top: 6px;
}

.sponsored-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(7, 89, 184, 0.1);
  color: var(--forest-2);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sponsored-badge--onbrand {
  align-self: flex-start;
  background: var(--gold);
  color: var(--gold-ink);
}

.info-callout {
  margin-top: 12px;
  padding: 24px 24px 24px 22px;
  border-top: 0;
  border-left: 4px solid var(--coral);
  background: rgba(255, 178, 28, 0.06);
}

.info-callout h2 {
  color: var(--coral);
}

.info-callout a {
  color: var(--forest-2);
  font-weight: 800;
  text-decoration: underline;
}

.legal-status-callout {
  border-left-color: var(--gold-ink);
  background: rgba(184, 134, 11, 0.1);
}

.legal-status-callout h2 {
  color: var(--gold-ink);
}

.cgv-article {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(16, 20, 43, 0.08);
}

.cgv-article:first-of-type {
  margin-top: 24px;
}

.cgv-article h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 850;
  color: var(--forest);
  letter-spacing: 0.01em;
}

.cgv-article p {
  margin: 0 0 10px;
  color: var(--ink);
  line-height: 1.65;
}

.cgv-article a {
  color: var(--forest-2);
  font-weight: 800;
  text-decoration: underline;
}


.journey {
  display: grid;
  gap: 20px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: journey;
}

.journey > li {
  position: relative;
  padding: 20px 22px 22px 66px;
  background: #ffffff;
  border: 1px solid var(--line);
  counter-increment: journey;
}

.journey > li::before {
  content: counter(journey, decimal-leading-zero);
  position: absolute;
  top: 20px;
  left: 22px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--forest);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.journey-step {
  margin: 0 0 6px;
  color: var(--forest);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.journey > li p:not(.journey-step) {
  margin: 0;
  color: var(--ink);
  line-height: 1.6;
}

.vendeur-header {
  background: linear-gradient(135deg, #061b57, #08266f 58%, #0759b8);
}

.vendeur-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 10vw, 120px) clamp(20px, 5vw, 68px);
  color: #ffffff;
  background:
    radial-gradient(circle at 15% 25%, rgba(255, 212, 59, 0.28), transparent 60%),
    radial-gradient(circle at 85% 75%, rgba(255, 178, 28, 0.25), transparent 55%),
    linear-gradient(180deg, #08266f, #061b57);
}

.vendeur-hero-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.vendeur-hero-inner .eyebrow {
  color: var(--gold);
}

.vendeur-hero-inner h1 {
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-weight: 840;
  line-height: 1.05;
}

.vendeur-lead {
  margin: 26px auto 32px;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1.02rem, 1.6vw, 1.24rem);
  line-height: 1.6;
}

.vendeur-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.vendeur-primary {
  min-width: 240px;
  background: var(--coral);
}

.vendeur-primary:hover {
  background: #f28b00;
}

.vendeur-page {
  padding-top: clamp(40px, 6vw, 72px);
}

.page-auth {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 178, 28, 0.14), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(255, 212, 59, 0.12), transparent 60%),
    var(--paper);
}

.auth-shell {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: clamp(40px, 8vw, 80px) clamp(16px, 5vw, 48px) clamp(48px, 8vw, 96px);
}

.auth-card {
  box-sizing: border-box;
  width: min(100%, 460px);
  padding: clamp(28px, 4vw, 44px);
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(16, 20, 43, 0.12);
}

.auth-card-wide {
  width: min(100%, 560px);
}

.auth-card h1 {
  margin: 0 0 12px;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 850;
  line-height: 1.05;
  color: var(--ink);
}

.auth-card .login-orbit {
  margin: 0 0 22px;
}

.auth-lede {
  margin: 0 0 24px;
  color: var(--muted);
  line-height: 1.6;
}

.auth-alt {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
  font-size: 0.94rem;
}

.auth-alt a {
  color: var(--forest-2);
  font-weight: 800;
  text-decoration: underline;
}

.auth-alt a:hover {
  color: var(--coral);
}

@media (max-width: 700px) {
  .auth-card,
  .auth-card-wide {
    width: 100%;
    max-width: calc(100vw - 40px);
  }
}

.consent-line a {
  color: var(--forest-2);
  font-weight: 800;
  text-decoration: underline;
}

.lot-photo-link {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #cfe1e4;
  box-shadow: var(--shadow);
  text-decoration: none;
}

.lot-photo-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.lot-photo-link:hover img {
  transform: scale(1.03);
}

.lot-photo-link .lot-photo-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  display: grid;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  font-size: 0.82rem;
}

.lot-photo-tag span {
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
}

.lot-photo-tag strong {
  color: var(--ink);
  font-size: 0.96rem;
}

.lot-photo-cta {
  position: absolute;
  bottom: 16px;
  right: 16px;
  padding: 10px 16px;
  background: var(--ink);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.lot-photo-link:hover .lot-photo-cta {
  background: var(--coral);
}

.page-annonce {
  background: #f4f2ec;
}

.annonce {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 32px) clamp(16px, 4vw, 40px) clamp(48px, 7vw, 84px);
}

.annonce-breadcrumb {
  display: flex;
  gap: 8px;
  padding: 8px 0 20px;
  color: var(--muted);
  font-size: 0.86rem;
}

.annonce-breadcrumb a {
  color: var(--forest-2);
}

.annonce-breadcrumb a:hover {
  text-decoration: underline;
}

.annonce-gallery {
  position: relative;
  background: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.annonce-hero {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #061b57;
}

.annonce-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.annonce-thumbs {
  padding: 10px 14px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.annonce-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  gap: 24px;
  margin-top: 24px;
}

.annonce-main,
.annonce-card {
  padding: clamp(20px, 3vw, 32px);
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px rgba(16, 20, 43, 0.06);
}

.annonce-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 10px;
}

.annonce-price strong {
  color: var(--coral);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 850;
}

.annonce-price span {
  color: var(--muted);
  font-size: 0.9rem;
}

.annonce-title {
  margin: 0 0 6px;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 840;
  line-height: 1.15;
  color: var(--ink);
}

.annonce-loc {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 1rem;
}

.annonce-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  background: var(--line);
}

.annonce-facts li {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  background: #ffffff;
}

.annonce-facts span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.annonce-facts strong {
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 850;
}

.annonce-section {
  padding: 24px 0;
  border-top: 1px solid var(--line);
}

.annonce-section h2 {
  margin: 0 0 12px;
  font-size: 1.2rem;
  font-weight: 840;
  color: var(--forest);
}

.annonce-section p {
  margin: 0 0 10px;
  color: var(--ink);
  line-height: 1.65;
}

.annonce-equip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 16px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.annonce-equip li {
  padding-left: 18px;
  border-left: 3px solid var(--gold);
  color: var(--ink);
}

.annonce-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  min-width: 260px;
  min-height: 52px;
  margin-top: 8px;
  padding: 0 18px;
  background: var(--ink);
  color: #ffffff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.annonce-cta:hover {
  background: var(--forest);
}

.annonce-cta:disabled,
.annonce-cta[aria-disabled="true"] {
  background: #aab0ab;
  cursor: not-allowed;
}

.annonce-cta.ghost {
  background: transparent;
  color: var(--forest);
  border: 1px solid var(--forest);
}

.annonce-cta.ghost:hover {
  background: var(--forest);
  color: #ffffff;
}

.annonce-side {
  display: grid;
  gap: 16px;
  align-content: start;
}

.annonce-side-kicker {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.annonce-side-price {
  margin: 0 0 12px;
  font-size: 1rem;
  color: var(--ink);
}

.annonce-side-price strong {
  color: var(--coral);
  font-size: 1.8rem;
  font-weight: 850;
  margin-right: 6px;
}

.annonce-side-text {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.94rem;
}

.annonce-side-cta {
  width: 100%;
  margin-bottom: 12px;
}

.annonce-side-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .annonce-grid {
    grid-template-columns: 1fr;
  }
}


/* -------------------- Admin -------------------- */

.admin-header {
  background: linear-gradient(135deg, #061b57, #08266f);
}

.admin-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 5vw, 68px) clamp(48px, 7vw, 72px);
  color: var(--ink);
}

.admin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 32px;
}

.admin-topbar h1 {
  margin: 6px 0 0;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 850;
}

.admin-empty {
  padding: 40px;
  background: #ffffff;
  border: 1px dashed var(--line);
  text-align: center;
  color: var(--muted);
}

.admin-table {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--line);
  border-collapse: collapse;
  font-size: 0.94rem;
}

.admin-table thead th {
  background: rgba(16, 20, 43, 0.04);
  padding: 12px 14px;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.admin-table tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-table code {
  background: rgba(16, 20, 43, 0.06);
  padding: 2px 6px;
  font-size: 0.86em;
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--line);
}

.badge-draft {
  background: rgba(102, 115, 108, 0.12);
  color: var(--muted);
  border-color: rgba(102, 115, 108, 0.35);
}

.badge-published {
  background: rgba(7, 89, 184, 0.12);
  color: var(--forest);
  border-color: var(--forest-2);
}

.badge-closed {
  background: rgba(255, 178, 28, 0.12);
  color: var(--coral);
  border-color: var(--coral);
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}

.admin-link {
  color: var(--forest-2);
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.admin-link:hover {
  color: var(--coral);
}

.admin-link-primary {
  color: var(--forest);
}

.admin-link-warning {
  color: var(--gold);
}

.admin-link-danger {
  color: var(--coral);
}

.admin-inline-form {
  display: inline;
  margin: 0;
}

.admin-form {
  max-width: 780px;
  margin: 0 0 40px;
  padding: clamp(20px, 3vw, 32px);
  background: #ffffff;
  border: 1px solid var(--line);
}

.admin-form label {
  display: block;
}

.admin-form textarea {
  display: block;
  width: 100%;
  margin-top: 9px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #ffffff;
  font: inherit;
  min-height: 100px;
  resize: vertical;
}

.admin-form-actions {
  display: flex;
  gap: 14px;
  margin-top: 12px;
}

.admin-preformatted {
  white-space: pre-line;
}

/* ---- Prize target-entries economics calculator (admin prize form) ---- */
.admin-economics {
  margin: 10px 0 20px;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.admin-economics-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 8px 0 14px;
}
.admin-economics-breakdown div {
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: #ffffff;
}
.admin-economics-breakdown dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}
.admin-economics-breakdown dd {
  margin: 4px 0 0;
  color: var(--forest);
  font-weight: 850;
  font-size: 1.05rem;
}
.admin-economics-row-highlight {
  background: rgba(255, 212, 59, 0.18);
  font-weight: 750;
}

/* ---- Quiz question/answer editor (variable length, add/remove, no JS build step) ---- */
.admin-questions-editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 10px 0 12px;
}

.admin-question-block {
  border: 1px solid var(--line);
  background: #ffffff;
  padding: 16px;
}

.admin-question-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.admin-question-block legend {
  font-weight: 850;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--forest);
  padding: 0 4px;
}

.admin-answers-label {
  margin: 14px 0 6px;
  font-size: 0.86rem;
  color: var(--muted);
}

.admin-answer-correct-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.admin-answer-correct-picker label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
}

/* ---- Francais/English tabs (lot info + each question) ------------------ */
.locale-tabs {
  margin: 8px 0;
}

.locale-tabs-nav {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.locale-tabs-nav button {
  padding: 8px 14px;
  border: 1px solid transparent;
  border-bottom: none;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.locale-tabs-nav button[aria-selected="true"] {
  color: var(--forest);
  border-color: var(--line);
  background: #ffffff;
}

/* ---- Prize photo grid (upload / primary / delete) ---- */
.admin-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
  margin: 10px 0 20px;
}

.admin-photo-item {
  border: 1px solid var(--line);
  background: #ffffff;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-photo-item img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

.admin-photo-primary,
.admin-photo-delete {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
}

/* ---- Draw result inline status-change form ---- */
.admin-status-form {
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ---------- Public footer (social + contact) --------------------- */
.public-footer {
  background:
    radial-gradient(circle at 88% 0%, rgba(255, 212, 59, 0.14), transparent 34%),
    linear-gradient(180deg, #061b57 0%, #04133d 100%);
  color: rgba(255, 255, 255, 0.82);
  padding: clamp(28px, 5vw, 44px) clamp(18px, 5vw, 68px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.public-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}
.social-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.social-rail a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.88);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.social-rail a:hover,
.social-rail a:focus-visible {
  background: rgba(255, 212, 59, 0.16);
  border-color: var(--gold, #ffd43b);
  color: #ffffff;
  outline: none;
}
.social-rail svg {
  width: 20px;
  height: 20px;
}
.public-footer-contact {
  margin: 0;
  font-size: 0.95rem;
}
.public-footer-contact a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
}
.public-footer-contact a:hover {
  border-bottom-color: var(--gold, #ffd43b);
}
.public-footer-responsible {
  flex: 1 1 100%;
  max-width: 780px;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
}
.public-footer-links,
.public-footer-legal {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
  font-size: 0.85rem;
}
.public-footer-links a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  font-weight: 700;
}
.public-footer-links a:hover {
  color: rgba(255, 255, 255, 0.95);
  border-bottom-color: var(--gold, #ffd43b);
}
.public-footer-links span[aria-hidden="true"] {
  color: rgba(255, 255, 255, 0.34);
}
.public-footer-legal a,
.public-footer-legal .footer-link-button {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}
.public-footer-legal a:hover,
.public-footer-legal .footer-link-button:hover {
  color: rgba(255, 255, 255, 0.95);
  border-bottom-color: var(--gold, #ffd43b);
}
.footer-link-button {
  background: none;
  border-width: 0 0 1px;
  border-style: solid;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.public-footer-legal span[aria-hidden="true"] {
  color: rgba(255, 255, 255, 0.34);
}
.public-footer-copy {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.76);
}
.info-updated {
  margin-top: 32px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 0.86rem;
  color: rgba(0, 0, 0, 0.55);
  font-style: italic;
}
.info-table-wrap {
  overflow-x: auto;
  margin: 8px 0 12px;
}
.info-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.info-table th,
.info-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.info-table th {
  font-weight: 720;
  color: var(--forest);
  background: rgba(0, 0, 0, 0.03);
}
.info-table code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 4px;
  border-radius: 3px;
}
.public-footer-version {
  margin-left: 4px;
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
  .public-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* ---------- Drawer-embedded logout (mobile only) ----------------- */
/* Rendered inside .nav-links; on desktop we hide it (a separate
   .logout-form sibling still lives in the header for that surface).
   On mobile the outer .logout-form is hidden and this one takes over,
   so "Se deconnecter" ends up inside the burger drawer, next to the
   other links. */
.nav-logout {
  display: none;
  margin: 0;
}

.nav-logout button {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}

.nav-logout button:hover,
.nav-logout button:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

/* ---------- Signup honeypot -------------------------------------- */
/* Hidden from humans (off-screen, non-interactive) but present in the
   DOM so form scrapers still see and auto-fill it. Any value in the
   `website` field is a bot signal - see RegistrationController. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* ---------- Dashboard cards (admin + espace) --------------------- */
.admin-lede {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 1rem;
  max-width: 60ch;
}
.admin-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 24px;
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
}
.admin-back-link::before { content: "<-"; margin-right: 4px; }
.admin-back-link:hover { color: var(--ink); }

.admin-breadcrumb {
  margin: 0 0 16px;
}
.admin-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
}
.admin-breadcrumb li {
  display: flex;
  align-items: center;
}
.admin-breadcrumb li:not(:last-child)::after {
  content: "/";
  margin: 0 8px;
  color: var(--line);
}
.admin-breadcrumb a {
  color: var(--muted);
  text-decoration: underline;
}
.admin-breadcrumb a:hover {
  color: var(--ink);
}
.admin-breadcrumb span[aria-current] {
  color: var(--forest);
  font-weight: 750;
}
.dashboard-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin-top: 32px;
}
.dashboard-card {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 22px 22px 20px;
  border: 1px solid #d8e6f8;
  border-radius: 14px;
  background: #ffffff;
  color: var(--ink);
  text-decoration: none;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  overflow: hidden;
}
.dashboard-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--gold, #ffd43b) 50%, transparent 100%);
  opacity: 0;
  transition: opacity 180ms ease;
}
.dashboard-card:hover,
.dashboard-card:focus-visible {
  border-color: var(--gold, #ffd43b);
  box-shadow: 0 12px 28px rgba(16, 20, 43, 0.09);
  transform: translateY(-2px);
  outline: none;
}
.dashboard-card:hover::before,
.dashboard-card:focus-visible::before {
  opacity: 1;
}
.dashboard-card-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(255, 212, 59, 0.12);
  color: var(--gold, #ffd43b);
  transition: background 140ms ease, color 140ms ease;
}
.dashboard-card-icon svg { display: block; }
.dashboard-card:hover .dashboard-card-icon,
.dashboard-card:focus-visible .dashboard-card-icon {
  background: var(--gold, #ffd43b);
  color: #061b57;
}
.dashboard-card-body {
  min-width: 0;
}
.dashboard-card h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dashboard-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.5;
}
.dashboard-card-meta {
  margin: 8px 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(102, 115, 108, 0.85);
}
.dashboard-card-cta {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(102, 115, 108, 0.28);
  color: var(--gold, #ffd43b);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.dashboard-card-cta > span[aria-hidden] {
  transition: transform 180ms ease;
}
.dashboard-card:hover .dashboard-card-cta > span[aria-hidden],
.dashboard-card:focus-visible .dashboard-card-cta > span[aria-hidden] {
  transform: translateX(4px);
}

/* Optional accent variants for future use (e.g. warning card).
   Add class `dashboard-card--warning` in the template. */
.dashboard-card--warning .dashboard-card-icon {
  background: rgba(216, 95, 69, 0.14);
  color: #b34a35;
}
.dashboard-card--warning:hover .dashboard-card-icon {
  background: #d85f45;
  color: #ffffff;
}

.delete-warning {
  margin: 24px 0 16px;
  padding: 18px 20px;
  background: rgba(216, 95, 69, 0.08);
  border: 1px solid rgba(216, 95, 69, 0.4);
  border-radius: 10px;
  color: #7a2d1c;
}
.delete-warning p {
  margin: 0 0 8px;
  line-height: 1.55;
}
.delete-warning ul {
  margin: 0;
  padding-left: 20px;
}
.delete-warning li {
  margin-bottom: 4px;
}

.danger-action {
  background: #b34a35 !important;
  border-color: #b34a35 !important;
  color: #ffffff !important;
}
.danger-action:hover,
.danger-action:focus-visible {
  background: #952f1c !important;
  border-color: #952f1c !important;
}
.secondary-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--forest);
  text-decoration: none;
  font-weight: 640;
}
.secondary-action:hover {
  background: rgba(0, 0, 0, 0.04);
}

.two-fa-card {
  max-width: 640px;
  margin-top: 20px;
}
.two-fa-status {
  font-weight: 720;
  padding: 8px 12px;
  border-radius: 8px;
  display: inline-block;
  margin: 0 0 14px;
}
.two-fa-status--on {
  background: rgba(22, 79, 63, 0.1);
  color: var(--forest);
  border: 1px solid rgba(22, 79, 63, 0.35);
}
.two-fa-status--off {
  background: rgba(216, 95, 69, 0.1);
  color: #b34a35;
  border: 1px solid rgba(216, 95, 69, 0.4);
}
.two-fa-steps {
  padding-left: 22px;
  margin: 16px 0 20px;
}
.two-fa-steps li {
  margin-bottom: 14px;
  line-height: 1.55;
}
.two-fa-secret {
  margin: 10px 0 6px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  overflow-x: auto;
}
.two-fa-secret code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: var(--forest);
  white-space: nowrap;
}
.two-fa-qr {
  display: inline-block;
  margin: 10px 0;
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  line-height: 0;
}

/* ---------- Personal space (espace) : forms --------------------- */
.espace-forms {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-top: 32px;
}
.espace-form-card {
  background: #ffffff;
  border: 1px solid #e5e0d3;
  border-radius: 12px;
  padding: 20px 22px;
}
.espace-form-card .section-title {
  margin-bottom: 12px;
}
.espace-form-card .panel-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a5a00;
  margin: 0 0 4px;
}
.espace-form-card h3 {
  margin: 0;
  font-size: 18px;
  color: #061b57;
}
.espace-form-card input[disabled],
.espace-form-card input[readonly] {
  background: #eef5ff;
  color: #66736c;
}
.espace-form-sep {
  border: 0;
  border-top: 1px dashed #d8e6f8;
  margin: 20px 0;
}
.form-status {
  background: #eaf6ef;
  border: 1px solid #b7dcc5;
  color: #17553b;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 8px 0 12px;
  font-size: 14px;
}
.spam-notice {
  background: #fff5e2;
  border: 1px solid #f0c98a;
  color: #7a4d00;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 8px 0 12px;
  font-size: 13.5px;
  line-height: 1.5;
}

.human-check {
  display: grid;
  gap: 8px;
  margin: 18px 0 10px;
}

.human-check--silent {
  display: block;
  min-height: 0;
  margin: 0;
}

/* ---------- Admin: horizontal-scroll wrapper for wide tables ------ */
/* Wraps <table.admin-table> so on mobile the table scrolls INSIDE
   this container instead of forcing the whole page to scroll
   horizontally. Desktop just renders the table normally, so the
   wrapper is transparent. */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll > table {
  min-width: max-content; /* keep column widths natural on desktop */
}

/* ---------- Lot photo grid (admin) --------------------------------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin: 8px 0 4px;
}
.photo-card {
  margin: 0;
  border: 1px solid #d8e6f8;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}
.photo-card.is-primary {
  border-color: #ffb21c;
  box-shadow: 0 0 0 2px rgba(255, 178, 28, 0.24);
}
.photo-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.photo-card figcaption {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.photo-choice {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  cursor: pointer;
}
.photo-choice input {
  margin: 0;
}
.photo-delete span {
  color: #a63a3a;
}
.photo-upload {
  display: block;
  margin-top: 8px;
}
.photo-upload > span {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}
.photo-upload input[type="file"] {
  width: 100%;
  padding: 8px;
  border: 1px dashed rgba(7, 89, 184, 0.42);
  border-radius: 8px;
  background: #eef6ff;
}
.annonce-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 0;
}
.annonce-thumb {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #d8e6f8;
  flex-shrink: 0;
}
.annonce-thumb.is-primary {
  border-color: #ffb21c;
  box-shadow: 0 0 0 2px rgba(255, 178, 28, 0.24);
}

:where(a, button, input, select, textarea, [tabindex]:not(#main-content)):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

#main-content:focus {
  outline: none;
}

:where(.primary-action, .secondary-action, .ghost-cta, .annonce-cta, .admin-link, .dashboard-card, .account-trigger, .nav-toggle, .nav-group-toggle, .social-rail a):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* ======================================================================
   Quizora pivot: new components (ad slots, quiz/prize cards, quiz-answer
   form, result score display, tagline bar). Reuses the card visual
   language already established by .dashboard-card (radius 12-14px,
   border #d8e6f8, hover lift + gold accent line) instead of inventing a
   parallel system.
   ====================================================================== */

/* ---- Tagline bar (homepage hero only) --------------------------------- */

.tagline-bar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 14px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--forest);
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(6, 27, 87, 0.22);
}

.tagline-bar span[aria-hidden="true"] {
  color: rgba(255, 255, 255, 0.45);
}

/* ---- Ad slot placeholder ----------------------------------------------- */

.ad-slot {
  display: block;
  min-height: 120px;
  margin: 32px auto;
  max-width: 1240px;
  overflow: hidden;
  text-decoration: none;
}

.ad-slot[data-empty-label] {
  display: grid;
  place-items: center;
  padding: 18px;
  border: 2px dashed rgba(7, 89, 184, 0.34);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(233, 243, 255, 0.94));
}

.ad-slot[data-empty-label]:empty::before {
  content: attr(data-empty-label);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

.ad-slot--wide {
  width: min(calc(100% - 36px), 1240px);
}

.ad-slot--compact {
  min-height: 96px;
  max-width: 820px;
  width: 100%;
}

.ad-slot--sidebar {
  min-height: 280px;
  margin: 0;
  max-width: 100%;
  width: 100%;
}

.ad-slot--in-content {
  max-width: 820px;
  width: 100%;
}

.nudge-card .ad-slot {
  margin-bottom: 0;
}

/* ---- Quiz / prize showcase card on the home page ------------------------ */

.showcase-section {
  padding: clamp(48px, 7vw, 84px) clamp(18px, 5vw, 68px);
  background: var(--paper);
}

.showcase-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(280px, 1.1fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
}

.showcase-photo {
  display: grid;
  place-items: center;
  min-height: 260px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--forest), var(--forest-2));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.showcase-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase-photo-fallback {
  font-size: 4rem;
}

.showcase-text h2 {
  margin: 6px 0 12px;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 840;
  color: var(--ink);
  line-height: 1.08;
}

.showcase-stats {
  margin: 24px 0;
}

/* ---- Quiz / prize card grids -------------------------------------------- */

.quiz-grid,
.prize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  max-width: 1240px;
  margin: 24px auto 0;
}

.quiz-card,
.prize-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 22px;
  border: 1px solid #d8e6f8;
  border-radius: 14px;
  background: #ffffff;
  color: var(--ink);
  text-decoration: none;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  overflow: hidden;
}

.quiz-card::before,
.prize-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
  opacity: 0;
  transition: opacity 180ms ease;
}

.quiz-card:hover,
.quiz-card:focus-visible,
.prize-card:hover,
.prize-card:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 12px 28px rgba(16, 20, 43, 0.09);
  transform: translateY(-2px);
  outline: none;
}

.quiz-card:hover::before,
.quiz-card:focus-visible::before,
.prize-card:hover::before,
.prize-card:focus-visible::before {
  opacity: 1;
}

.quiz-card-kicker {
  color: var(--gold-ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.quiz-card h2,
.quiz-card h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 850;
  line-height: 1.25;
}

.quiz-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.quiz-card-meta {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.quiz-card-cta,
.prize-card-cta {
  margin-top: 6px;
  color: var(--forest-2);
  font-weight: 800;
  font-size: 0.9rem;
}

.prize-card {
  padding: 0 0 20px;
  gap: 12px;
}

.prize-card-photo {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--forest), var(--forest-2));
  font-size: 2.6rem;
}

.prize-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prize-card-body {
  display: grid;
  gap: 8px;
  padding: 0 20px;
}

.prize-card-body h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 850;
}

.prize-card-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.multi-prize-hero .hero-copy h1 {
  max-width: 14ch;
  font-size: clamp(2.8rem, 5.6vw, 5rem);
}

.multi-prize-hero {
  align-items: start;
}

.hero-prize-card-featured {
  grid-template-rows: minmax(180px, auto) auto;
}

.hero-prize-card-featured .hero-prize-photo {
  min-height: clamp(180px, 25vw, 300px);
}

.prize-showcase-section .lot-teaser-head {
  max-width: 860px;
  margin: 0 auto 26px;
  text-align: center;
}

.home-prize-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.multi-prize-card {
  align-content: start;
}

.multi-prize-card .prize-card-body {
  gap: 12px;
}

.prize-card-body h3 {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 850;
  line-height: 1.18;
}

.prize-card-body h3 a {
  color: inherit;
  text-decoration: none;
}

.prize-card-body h3 a:hover {
  color: var(--forest-2);
}

.prize-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.prize-card-actions .primary-action,
.hero-prize-link {
  min-height: 46px;
  padding-inline: 16px;
  font-size: 0.9rem;
}

.prize-teaser-facts,
.prize-card-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 4px 0;
  border: 1px solid var(--line);
  background: var(--line);
}

.prize-teaser-facts div,
.prize-card-facts div {
  padding: 10px 12px;
  background: #ffffff;
}

.prize-teaser-facts dt,
.prize-card-facts dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.prize-teaser-facts dd,
.prize-card-facts dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-weight: 850;
}

.entry-progress {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.entry-progress-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.entry-progress-copy strong {
  color: var(--forest);
  font-size: 0.9rem;
}

.entry-progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(6, 27, 87, 0.12);
}

.entry-progress-track span {
  display: block;
  width: 0;
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--forest), var(--gold));
}

.entry-progress-detail {
  max-width: 520px;
  margin-top: 18px;
}

/* ---- Quiz/prize detail page: two-column layout with an ad-safe aside --- */

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
  margin-top: 12px;
}

.detail-aside {
  display: grid;
  gap: 24px;
}

.preview-notice {
  border-left-color: var(--gold);
}

.quiz-play-cta {
  min-width: 220px;
}

.prize-teaser-card {
  padding: 0 0 20px;
  border: 1px solid #d8e6f8;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

.prize-teaser-photo {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--forest), var(--forest-2));
  font-size: 2.4rem;
}

.prize-teaser-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prize-teaser-card .eyebrow,
.prize-teaser-card h2,
.prize-teaser-card p,
.prize-teaser-card .prize-teaser-facts,
.prize-teaser-card .secondary-action {
  margin-left: 20px;
  margin-right: 20px;
}

.prize-teaser-card h2 {
  margin-top: 0;
  font-size: 1.2rem;
  font-weight: 850;
}

.prize-hero-photo {
  margin: 20px 0;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.prize-hero-photo img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .detail-grid,
  .showcase-grid {
    grid-template-columns: 1fr;
  }

  .detail-aside {
    position: static;
  }
}

/* ---- Quiz answering form ------------------------------------------------ */

.quiz-answer-form {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}

.quiz-play-page .ad-slot--compact {
  margin: 28px auto;
}

.quiz-progress {
  display: grid;
  gap: 10px;
  margin: 28px 0 22px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(16, 20, 43, 0.04);
}

.quiz-progress-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 800;
}

.quiz-progress-copy strong {
  color: var(--forest);
}

.quiz-progress-meter {
  display: block;
  width: 100%;
  height: 10px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(6, 27, 87, 0.1);
  appearance: none;
}

.quiz-progress-meter::-webkit-progress-bar {
  border-radius: inherit;
  background: rgba(6, 27, 87, 0.1);
}

.quiz-progress-meter::-webkit-progress-value {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--forest), var(--gold));
}

.quiz-progress-meter::-moz-progress-bar {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--forest), var(--gold));
}

.quiz-timer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 22px;
  padding: 10px 16px;
  border: 1px solid rgba(216, 95, 69, 0.35);
  border-radius: 8px;
  background: rgba(216, 95, 69, 0.08);
  color: #b34a35;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.quiz-timer strong {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.quiz-question {
  padding: 20px;
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(16, 20, 43, 0.05);
}

.quiz-question-current {
  padding: clamp(22px, 4vw, 34px);
  border-color: rgba(6, 27, 87, 0.16);
  box-shadow: 0 20px 54px rgba(6, 27, 87, 0.09);
}

.quiz-question legend {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 6px 14px 0;
  font-size: 1.05rem;
  font-weight: 850;
  color: var(--ink);
}

.quiz-question-current legend {
  font-size: clamp(1.18rem, 2.4vw, 1.7rem);
  line-height: 1.2;
}

.quiz-question-number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--forest);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 850;
}

.quiz-answer-list {
  display: grid;
  gap: 10px;
}

.quiz-answer-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.quiz-answer-option:has(input:checked) {
  border-color: var(--gold);
  background: rgba(255, 212, 59, 0.1);
}

.quiz-answer-option input {
  flex-shrink: 0;
}

.quiz-play-submit {
  justify-self: start;
  min-width: 230px;
}

/* ---- Quiz result / score display ---------------------------------------- */

.score-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 24px 0;
  padding: 32px 24px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--forest), var(--forest-2));
  color: #ffffff;
  text-align: center;
}

.score-kicker {
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.score-figure {
  margin: 4px 0;
  font-size: clamp(3rem, 8vw, 4.5rem);
  font-weight: 900;
  line-height: 1;
}

.score-figure-total {
  font-size: 0.4em;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.7);
}

.score-caption {
  max-width: 480px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.5;
}

.score-records {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin: 10px 0;
}

.score-record {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.score-record-label {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.score-record .score-figure {
  font-size: clamp(2.2rem, 6vw, 3rem);
}

.score-figure-time {
  font-variant-numeric: tabular-nums;
}

.record-badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.entry-confirmed-card .secondary-action {
  margin-top: 12px;
}

.nudge-card {
  margin: 24px 0 0;
  padding: 24px;
  border: 1px dashed var(--line);
  background: var(--paper);
}

.nudge-card > p {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.55;
}

/* ---- Espace: winner banner + participations/winners list ---------------- */

.winner-banner {
  border-left-color: var(--gold);
  background: rgba(255, 212, 59, 0.14);
  color: var(--gold-ink);
}

.winner-banner .primary-action {
  margin-top: 10px;
}

.winners-card {
  margin-bottom: 24px;
}

.winners-list {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.winners-list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: #ffffff;
}

.winner-status {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.winner-status--selected,
.winner-status--notified {
  border-color: var(--gold);
  color: var(--gold-ink);
  background: rgba(255, 212, 59, 0.14);
}

.winner-status--confirmed {
  border-color: var(--forest-2);
  color: var(--forest);
  background: rgba(7, 89, 184, 0.1);
}

.winner-status--claimed {
  border-color: var(--forest-2);
  color: var(--forest);
  background: rgba(7, 89, 184, 0.12);
}

.winner-status--forfeited {
  border-color: #b34a35;
  color: #7a2d1c;
  background: rgba(216, 95, 69, 0.08);
}

/* ---- Mobile revenue layout ----------------------------------------------
   Mobile is the primary traffic pattern for Quizora. Keep the first ad slot
   close to the opening content, keep prize CTAs reachable, and reserve enough
   vertical room for standard mobile display ads without encouraging accidental
   clicks.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .prize-stage {
    min-height: auto;
    padding: 14px 14px 18px;
    overflow: visible;
  }

  .prize-stage::after {
    width: 100%;
    height: 46%;
    opacity: 0.7;
  }

  .brand-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .brand-row .brand-lockup {
    flex: 1 1 auto;
  }

  .brand-row .top-nav {
    order: 0;
    flex: 0 0 auto;
  }

  .brand-row .top-nav .nav-links {
    left: 0;
    right: 0;
  }

  .brand-logo-img {
    height: 50px;
  }

  .multi-prize-hero,
  .hero-feature {
    gap: 16px;
    padding: 18px 0 14px;
  }

  .tagline-bar {
    gap: 4px 8px;
    margin-bottom: 8px;
    font-size: 0.72rem;
  }

  .hero-copy h1,
  .multi-prize-hero .hero-copy h1 {
    max-width: 12ch;
    font-size: clamp(2.18rem, 12vw, 3.05rem);
    line-height: 1.02;
  }

  .hero-lead {
    margin-top: 16px;
    font-size: 0.98rem;
    line-height: 1.48;
  }

  .hero-ctas {
    gap: 10px;
    margin-top: 20px;
  }

  .hero-legal-note {
    margin-top: 12px;
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .hero-prize-card,
  .hero-prize-card-featured {
    grid-template-rows: minmax(116px, auto) auto;
    border-radius: 8px;
    box-shadow: 0 16px 44px rgba(6, 27, 87, 0.13);
  }

  .hero-prize-photo,
  .hero-prize-card-featured .hero-prize-photo {
    min-height: 116px;
  }

  .showcase-photo-fallback {
    font-size: 2.6rem;
  }

  .hero-prize-body {
    padding: 16px;
  }

  .hero-prize-body h2 {
    margin-top: 2px;
    font-size: 1.55rem;
  }

  .hero-prize-body p {
    font-size: 0.92rem;
  }

  .hero-prize-facts,
  .prize-card-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 12px;
  }

  .hero-prize-facts div,
  .prize-card-facts div {
    padding: 9px 10px;
  }

  .hero-prize-facts dt,
  .prize-card-facts dt {
    font-size: 0.62rem;
  }

  .hero-prize-facts dd,
  .prize-card-facts dd {
    font-size: 0.96rem;
  }

  .hero-prize-link {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }

  .prize-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .prize-facts article {
    min-height: 72px;
    padding: 12px 8px;
  }

  .prize-facts span {
    font-size: 0.62rem;
    line-height: 1.2;
  }

  .prize-facts strong {
    margin-top: 4px;
    font-size: 1rem;
    line-height: 1.1;
  }

  .ad-slot {
    margin: 20px auto;
  }

  .ad-slot--wide {
    width: min(calc(100% - 24px), 390px);
    min-height: 250px;
  }

  .ad-slot--in-content {
    width: min(calc(100% - 24px), 390px);
    min-height: 250px;
  }

  .ad-slot--compact {
    min-height: 112px;
  }

  .quiz-play-page .ad-slot--compact {
    margin: 18px auto;
  }

  .showcase-section {
    padding: 34px 14px;
  }

  .prize-showcase-section .lot-teaser-head {
    margin-bottom: 18px;
    text-align: left;
  }

  .prize-showcase-section .info-lede {
    font-size: 0.96rem;
    line-height: 1.55;
  }

  .home-prize-grid,
  .quiz-grid,
  .prize-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 18px;
  }

  .prize-card {
    border-radius: 8px;
  }

  .prize-card-photo {
    aspect-ratio: 16 / 10;
  }

  .prize-card-body {
    padding-inline: 16px;
  }

  .multi-prize-card .prize-card-body {
    gap: 10px;
  }

  .prize-card-body h3 {
    font-size: 1.15rem;
  }

  .entry-progress-copy {
    font-size: 0.7rem;
  }

  .prize-card-actions {
    gap: 8px;
  }

  .why-participate,
  .social-proof,
  .final-cta {
    padding-inline: 14px;
  }

  .final-cta-inner {
    padding: 28px 18px;
  }
}

/* ---- Home v2: compact hero + prize-grid-first layout ---------------------
   Replaces the old two-decker hero (logo/text repeated, one prize floated in
   an empty gradient card) with: a short intro band, then an immediate bento
   grid of every active prize as the page's visual centerpiece. Mobile-first:
   base rules target a phone; 700px/1100px queries progressively enhance.
   -------------------------------------------------------------------------- */

.hero-compact {
  position: relative;
  isolation: isolate;
  padding: clamp(18px, 3vw, 30px) clamp(16px, 5vw, 68px) clamp(28px, 4vw, 44px);
  background-color: var(--paper);
  background-image:
    linear-gradient(180deg, rgba(246, 250, 255, 0.35) 0%, rgba(246, 250, 255, 0.05) 55%, rgba(246, 250, 255, 0.1) 100%),
    radial-gradient(circle at 85% 0%, rgba(255, 212, 59, 0.22), transparent 34%);
  background-repeat: no-repeat;
  background-position: center, 85% 0%;
  background-size: auto, auto;
  border-bottom: 1px solid rgba(6, 27, 87, 0.08);
}

.hero-compact-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.hero-brand-fusion {
  display: grid;
  justify-content: center;
  justify-items: center;
  margin: 0 auto 10px;
}

.hero-brand-visual {
  display: block;
  width: min(86vw, 430px);
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 34px rgba(6, 27, 87, 0.12));
}

.hero-compact-lead {
  margin: 0 auto;
  max-width: 720px;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.5;
}

.hero-compact-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.hero-compact-ctas .hero-cta,
.hero-compact-ctas .ghost-cta {
  min-width: 0;
  width: 100%;
  justify-content: center;
}

.hero-compact-ctas .ghost-cta {
  background: rgba(255, 255, 255, 0.92);
}

.hero-compact-legal {
  display: inline-block;
  margin: 16px auto 0;
  padding: 8px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

@media (min-width: 700px) {
  .hero-compact {
    padding-top: 30px;
  }

  .hero-brand-visual {
    width: min(60vw, 500px);
  }

  .hero-compact-ctas {
    flex-direction: row;
    justify-content: center;
  }

  .hero-compact-ctas .hero-cta,
  .hero-compact-ctas .ghost-cta {
    width: auto;
  }
}

@media (min-width: 1100px) {
  .hero-compact {
    padding-top: 34px;
  }

  .hero-brand-visual {
    width: 520px;
  }
}

/* ---- Prize bento grid ------------------------------------------------- */

.prize-bento {
  padding: 32px clamp(16px, 5vw, 68px) 8px;
}

.prize-bento-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 22px;
}

.prize-bento-head h2 {
  margin: 4px 0 0;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 850;
  color: var(--forest);
}

.prize-bento-empty {
  padding: 32px;
  border: 1px dashed var(--line);
  color: var(--muted);
  text-align: center;
}

.prize-bento-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.prize-bento-ad {
  grid-column: 1 / -1;
}

.prize-bento-ad .ad-slot {
  margin: 0 auto;
}

.bento-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 10px 30px rgba(6, 27, 87, 0.08);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.bento-card:hover,
.bento-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(6, 27, 87, 0.14);
}

.bento-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 20px;
  position: relative;
}

.bento-accent-1 .bento-card-top { background: linear-gradient(135deg, #0c2f8f, #164fc7); }
.bento-accent-2 .bento-card-top { background: linear-gradient(135deg, #7a4d00, #d99a1f); }
.bento-accent-3 .bento-card-top { background: linear-gradient(135deg, #0f6b55, #17a37f); }
.bento-accent-4 .bento-card-top { background: linear-gradient(135deg, #7a1f5c, #c23f8f); }

.bento-card-top.has-photo {
  padding: 0;
  height: 180px;
  overflow: hidden;
}

.bento-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bento-card-featured .bento-card-top.has-photo {
  /* `.bento-card-featured .bento-card-top` below re-adds 40px/24px padding
     at equal specificity - without repeating `padding: 0` here (this
     3-class selector wins the tie), that rule wins the cascade on source
     order and insets the photo instead of letting it fill the frame. */
  padding: 0;
  height: 260px;
}

.bento-card-badge {
  font-size: 2.4rem;
  line-height: 1;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.2));
}

.bento-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
}

.bento-card-body h3 {
  margin: 0;
  font-size: 1.24rem;
  font-weight: 850;
  line-height: 1.2;
}

.bento-card-body h3 a {
  color: var(--forest);
  text-decoration: none;
}

.bento-card-lede {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.5;
  /* Reserve the same 2-line block on every card regardless of the actual
     description length, so cards in the same row stay the same height
     whether their lede is one line or wraps to two. */
  min-height: calc(0.94rem * 1.5 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bento-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.bento-card-actions .primary-action,
.bento-card-actions .secondary-action {
  flex: 1 1 140px;
  justify-content: center;
  min-width: 0;
}

.bento-card-featured {
  box-shadow: 0 20px 50px rgba(6, 27, 87, 0.16);
}

.bento-card-featured .bento-card-top {
  padding: 40px 24px;
}

.bento-card-featured .bento-card-badge {
  font-size: 3.6rem;
}

.bento-card-featured .bento-card-body h3 {
  font-size: 1.55rem;
}

@media (min-width: 700px) {
  .prize-bento-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .prize-bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bento-card-featured {
    grid-column: span 2;
    flex-direction: row;
    /* Grid rows stretch every item to the row's tallest by default - since
       the featured card shares its row with a much shorter regular card,
       that stretched it well past its own content, leaving dead space
       below the text column. Size it to its own content instead. */
    align-self: start;
  }

  .bento-card-featured .bento-card-top {
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    width: 260px;
    flex-shrink: 0;
  }

  /* Side-by-side layout here (row, not column) - the photo column must
     match whatever height the text column actually needs instead of the
     fixed 260px used when stacked on mobile, otherwise a shorter photo
     box leaves dead space below it once the text column grows taller. */
  .bento-card-featured .bento-card-top.has-photo {
    height: auto;
    align-self: stretch;
    position: relative;
  }

  /* The <img> is taken out of flow and absolutely filled instead of being
     sized in-flow: with `height: auto` above, a percentage height on the
     image resolves against this box's own (still undetermined) height, so
     browsers fall back to the photo's intrinsic aspect ratio - a portrait
     photo then inflates this box (and the whole row) far past what
     .bento-card-body actually needs, leaving blank space under its text.
     Absolute positioning removes the image from that sizing calculation
     entirely, so the row's height comes purely from the body's content. */
  .bento-card-featured .bento-card-top.has-photo .bento-card-photo {
    position: absolute;
    inset: 0;
  }

  .bento-card-featured .bento-card-body {
    padding: 24px;
  }
}

@media (min-width: 1100px) {
  .prize-bento-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- Trust strip (replaces the old 3-huge-card "why participate") ----- */

.trust-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 28px clamp(16px, 5vw, 68px);
}

.trust-strip article {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.trust-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.trust-strip p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.trust-strip strong {
  display: block;
  margin-bottom: 2px;
  color: var(--forest);
  font-size: 0.98rem;
}

@media (min-width: 900px) {
  .trust-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- Legacy multi-prize hero (superseded by "Home v2" above, kept only
   because a couple of its selectors are still generic prize-card rules
   shared elsewhere) -------------------------------------------------------- */

.prize-stage-multi {
  min-height: auto;
  padding: 12px 14px 18px;
  overflow: visible;
  border-bottom: 1px solid rgba(6, 27, 87, 0.08);
}

.prize-stage-multi::after {
  inset: 0 0 auto;
  width: 100%;
  height: 56%;
  opacity: 0.85;
}

.prize-stage-multi .brand-row {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.prize-stage-multi .brand-logo-img {
  height: 50px;
}

.prize-stage-multi .hero-feature {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0 12px;
}

.prize-stage-multi .hero-copy {
  max-width: none;
}

.prize-stage-multi .tagline-bar {
  margin-bottom: 8px;
  font-size: 0.72rem;
}

.prize-stage-multi .hero-copy h1 {
  max-width: 12ch;
  font-size: 2.35rem;
  line-height: 1.02;
}

.prize-stage-multi .hero-lead {
  margin-top: 14px;
  font-size: 0.98rem;
  line-height: 1.5;
}

.prize-stage-multi .hero-ctas {
  gap: 10px;
  margin-top: 18px;
}

.prize-stage-multi .hero-cta,
.prize-stage-multi .ghost-cta {
  min-width: 0;
  min-height: 50px;
  padding-inline: 16px;
}

.prize-stage-multi .hero-legal-note {
  margin-top: 12px;
  font-size: 0.82rem;
  line-height: 1.45;
}

.prize-stage-multi .hero-prize-card {
  grid-template-rows: auto auto;
  border-radius: 8px;
  box-shadow: 0 16px 44px rgba(6, 27, 87, 0.13);
}

.prize-stage-multi .hero-prize-photo {
  min-height: 0;
  aspect-ratio: 16 / 10;
}

.prize-stage-multi .hero-prize-body {
  padding: 16px;
}

.prize-stage-multi .hero-prize-body h2 {
  font-size: 1.55rem;
}

.prize-stage-multi .hero-prize-facts {
  margin-top: 12px;
}

.prize-stage-multi .hero-prize-link {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

.home-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 8px;
}

.home-metrics article {
  min-height: 70px;
  padding: 11px 8px;
}

.home-metrics span {
  font-size: 0.61rem;
  line-height: 1.18;
}

.home-metrics strong {
  margin-top: 5px;
  font-size: 1rem;
  line-height: 1.1;
}

.prize-showcase-section {
  padding: 30px 14px;
}

.home-feed-head {
  display: grid;
  gap: 16px;
  max-width: 1240px;
  margin: 0 auto 18px;
  text-align: left;
}

.home-feed-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.85rem;
  font-weight: 880;
  line-height: 1.04;
}

.home-feed-head .info-lede {
  margin-top: 10px;
  font-size: 0.96rem;
  line-height: 1.55;
}

.home-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.home-shortcuts a {
  display: grid;
  gap: 4px;
  min-height: 68px;
  align-content: center;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(6, 27, 87, 0.06);
}

.home-shortcuts a:hover,
.home-shortcuts a:focus-visible {
  border-color: var(--gold);
  outline: none;
}

.home-shortcuts strong {
  color: var(--forest);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.home-shortcuts span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-prize-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 0;
}

.home-prize-grid .multi-prize-card {
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(6, 27, 87, 0.08);
}

.home-prize-grid .prize-card-photo {
  position: relative;
  aspect-ratio: 16 / 10;
}

.prize-photo-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  max-width: calc(100% - 20px);
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(6, 27, 87, 0.88);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(6, 27, 87, 0.2);
}

.home-prize-grid .prize-card-body {
  gap: 10px;
  padding: 16px;
}

.prize-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.prize-card-topline .quiz-card-kicker {
  min-width: 0;
  margin: 0;
}

.prize-card-topline > span {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 212, 59, 0.2);
  color: var(--gold-ink);
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.home-prize-grid .prize-card-body h3 {
  font-size: 1.18rem;
}

.home-prize-grid .prize-card-body p {
  font-size: 0.92rem;
}

.home-prize-grid .prize-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.home-prize-grid .prize-card-actions .primary-action,
.home-prize-grid .prize-card-actions .secondary-action {
  width: 100%;
  justify-content: center;
}

.why-participate {
  padding-inline: 14px;
}

@media (min-width: 760px) {
  .prize-stage-multi {
    padding: 22px clamp(24px, 5vw, 68px) 28px;
  }

  .prize-stage-multi .brand-logo-img {
    height: 66px;
  }

  .prize-stage-multi .hero-feature {
    grid-template-columns: minmax(300px, 0.92fr) minmax(320px, 1.08fr);
    align-items: center;
    gap: 32px;
    padding: 34px 0 24px;
  }

  .prize-stage-multi .hero-copy h1 {
    max-width: 14ch;
    font-size: 3.4rem;
  }

  .brand-logo-hero {
    width: clamp(300px, 38vw, 420px);
  }

  .prize-stage-multi .hero-prize-body {
    padding: 22px;
  }

  .prize-stage-multi .hero-prize-link {
    width: auto;
  }

  .home-metrics {
    max-width: 980px;
  }

  .home-feed-head {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.6fr);
    align-items: end;
    margin-bottom: 24px;
  }

  .home-feed-head h2 {
    font-size: 2.25rem;
  }

  .home-prize-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .home-prize-grid .prize-card-actions {
    grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
  }
}

@media (min-width: 1100px) {
  .prize-stage-multi {
    min-height: 88vh;
  }

  .prize-stage-multi .hero-feature {
    gap: clamp(42px, 6vw, 86px);
    padding: 48px 0 32px;
  }

  .prize-stage-multi .hero-copy h1 {
    font-size: 4.65rem;
  }

  .brand-logo-hero {
    width: 480px;
  }

  .prize-stage-multi .hero-lead {
    font-size: 1.2rem;
  }

  .prize-stage-multi .hero-prize-photo {
    aspect-ratio: 16 / 9;
  }

  .prize-showcase-section {
    padding: 58px clamp(24px, 5vw, 68px);
  }

  .home-prize-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .home-prize-grid .multi-prize-card:first-child {
    grid-column: span 2;
    grid-template-columns: minmax(300px, 0.9fr) minmax(320px, 1fr);
    padding-bottom: 0;
  }

  .home-prize-grid .multi-prize-card:first-child .prize-card-photo {
    min-height: 100%;
    aspect-ratio: auto;
  }

  .home-prize-grid .multi-prize-card:first-child .prize-card-body {
    align-content: center;
    padding: 24px;
  }

  .home-prize-grid .multi-prize-card:first-child .prize-card-body h3 {
    font-size: 1.65rem;
  }
}


/* ---- Communication preview (branded social card + newsletter e-mail) ---- */
.comm-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.comm-social-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  max-width: 520px;
}
.comm-social-visual {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 220px;
  padding: 22px;
  color: #ffffff;
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 212, 59, 0.28), transparent 45%),
    linear-gradient(135deg, #061b57, #0c2f8f 70%, #164fc7);
}
.comm-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.comm-brand-mark {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #8a5a00;
  background: #ffd43b;
  color: #08266f;
  font-weight: 900;
}
.comm-brand-name {
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.comm-social-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 850;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.comm-social-cta {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: #ffd43b;
  color: #061b57;
  font-size: 0.82rem;
  font-weight: 850;
}
.comm-social-meta {
  padding: 12px 16px;
  background: var(--paper);
}
.comm-social-host {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.comm-social-text {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.comm-email-card {
  max-width: 460px;
  padding: 24px;
  border: 1px solid var(--line);
  border-top: 5px solid #ffd43b;
  background: #fffdf8;
  color: #3d4a44;
  font-size: 0.9rem;
  line-height: 1.5;
}
.comm-email-card p { margin: 0 0 10px; }
.comm-email-sponsor {
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: #fbf8ef;
}
.comm-email-sponsor p:last-child { margin-bottom: 0; }
.comm-email-brand {
  color: #7a5b00;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.comm-email-title {
  color: #0a1f5c;
  font-size: 1.3rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

/* ---- Public news list (/actualites) ---- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 24px 0;
}
.news-item-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.news-item-link:hover .comm-social-card,
.news-item-link:focus-visible .comm-social-card {
  box-shadow: 0 10px 26px rgba(6, 27, 87, 0.16);
}

/* ---- Social publication network choice ---- */
.admin-networks {
  border: 0;
  margin: 12px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.admin-networks legend {
  width: 100%;
  padding: 0;
}
.admin-network-choice {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
}

/* Espace participant - "Mes participations" (one card per prize) */
.participation-list { display: grid; gap: 1rem; }
.participation-card { display: flex; gap: 1rem; align-items: flex-start; }
.participation-photo { border-radius: 8px; object-fit: cover; flex: none; }
.participation-body { flex: 1; min-width: 0; }
.participation-body h2 { margin: 0 0 .4rem; font-size: 1.15rem; }
.participation-progress { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .5rem 0; }
.participation-progress progress { width: 12rem; max-width: 100%; }
.participation-facts { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: .6rem 0; }
.participation-facts dt { font-size: .8rem; opacity: .7; }
.participation-facts dd { margin: 0; font-weight: 600; }
.participation-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 560px) { .participation-card { flex-direction: column; } }