/* Cameroun Bar Awards — Premium UI/UX Redesign */

@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');

:root {
  --bg: #010101;
  --bg-soft: #0a0a0a;
  --brown: #1a1512;
  --brown-2: #2a201b;
  --surface: rgba(20, 20, 20, 0.7);
  --surface-solid: #141414;
  --surface-light: rgba(255, 255, 255, 0.04);
  --gold: #dfb36a;
  --gold-bright: #f5d08e;
  --gold-pale: #fbf0d8;
  --orange: #ff9d42;
  --cream: #f4efe6;
  --white: #ffffff;
  --muted: #a69f96;
  /* #736d67 tombait à 4,0:1 sur le fond noir : sous le seuil AA 4,5:1, alors
     que ce ton porte le fil d'Ariane, les compteurs et les notes de la modale
     de vote. Remonté à 5,0:1 sans changer de famille chromatique. */
  --muted-2: #827b73;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.15);
  --danger: #e25c5e;
  --success: #6bb679;
  --display: "Playfair Display", Georgia, serif;
  --body: "Albert Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Alias employés par les blocs « OVERRIDES » en fin de fichier. Ils n'avaient
     jamais été déclarés : chaque `var()` était invalide au calcul, donc la
     déclaration entière était abandonnée. Conséquences observées — bordure des
     cartes catégorie absente (le shorthand `border` retombait sur `none`),
     titres en sans au lieu du display, descriptions héritant du cream au lieu
     du gris, anneau doré de l'avatar de succès invisible. */
  --accent: #dfb36a;
  --gold-base: #dfb36a;
  --gold-dark: rgba(223, 179, 106, 0.28);
  --black: #010101;
  --black-alt: #0a0a0a;
  --grey: #a69f96;
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Albert Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --shadow: 0 32px 100px rgba(0, 0, 0, 0.8);
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.4);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shell: 1200px;
  --header-height: 72px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 20px);
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--cream);
  background: var(--bg);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: none;
}

body::-webkit-scrollbar {
  display: none;
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  content: "";
}

body::before {
  /* Remove chaotic stars, add subtle grain noise */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.04;
}

body::after {
  z-index: -1;
  background: radial-gradient(circle at 50% -10%, rgba(223, 179, 106, 0.08), transparent 50%),
              radial-gradient(circle at 80% 60%, rgba(223, 179, 106, 0.03), transparent 40%);
}

body.nav-open,
body.modal-open {
  overflow: hidden;
}

::selection {
  color: #090704;
  background: var(--gold-bright);
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
select,
input[type="file"],
input[type="radio"],
input[type="range"] {
  cursor: pointer;
}

button {
  border: 0;
}

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

h1,
h2,
h3,
p,
dl,
dd,
ol,
ul,
fieldset {
  margin-top: 0;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 3px solid rgba(255, 221, 85, 0.9);
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

.sr-only {
  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;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
  padding: 10px 14px;
  color: #080604;
  background: var(--gold-bright);
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-160%);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.skip-link:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.shell {
  width: min(calc(100% - 32px), var(--shell));
  margin-inline: auto;
}

.section-label,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
}

.section-label::before {
  width: 16px;
  height: 1px;
  background: currentColor;
  content: "";
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(223, 179, 106, 0.4);
  animation: pulseDot 2s infinite;
}

.button {
  position: relative;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.1;
  transition: transform 0.2s var(--ease), border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0) scale(0.98);
}

.button-primary {
  color: #000;
  background: linear-gradient(135deg, #dfb36a, #fbf0d8, #c49646);
  border: none;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(223, 179, 106, 0.4);
}

.button-primary:hover {
  filter: brightness(1.15);
  box-shadow: 0 6px 20px rgba(223, 179, 106, 0.6);
  color: #000;
  transform: translateY(-2px);
}

.button-outline {
  color: var(--gold-bright);
  background: rgba(223, 179, 106, 0.05);
  border-color: rgba(223, 179, 106, 0.4);
  backdrop-filter: blur(12px);
}

.button-outline:hover {
  color: #000;
  background: linear-gradient(135deg, #dfb36a, #fbf0d8, #c49646);
  border-color: transparent;
}

.button-quiet {
  min-height: 44px;
  padding-inline: 8px;
  color: var(--muted);
  background: transparent;
}

.button-quiet:hover {
  color: var(--gold-bright);
}

.button-large {
  min-height: 58px;
  padding-inline: 26px;
}

.button-block {
  width: 100%;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  height: var(--header-height);
  background: rgba(1, 1, 1, 0.6);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.header-inner {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
}

.brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  width: 70px;
  height: 64px;
  align-items: center;
  justify-content: flex-start;
}

.brand img {
  width: 72px;
  max-width: none;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.36)) contrast(1.2);
  mix-blend-mode: screen;
}

.main-nav {
  position: fixed;
  top: var(--header-height);
  right: 0;
  left: 0;
  display: grid;
  gap: 4px;
  padding: 24px 20px 30px;
  visibility: hidden;
  opacity: 0;
  background: rgba(6, 5, 4, 0.98);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  transform: translateY(-18px);
  transition: opacity 0.25s ease, transform 0.25s var(--ease), visibility 0.25s;
}

.nav-open .main-nav {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.main-nav a {
  padding: 13px 14px;
  color: var(--muted);
  border-radius: 12px;
  font-size: 0.96rem;
  font-weight: 720;
  transition: color 0.2s ease, background 0.2s ease;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--white);
  background: rgba(255, 221, 85, 0.07);
}

.main-nav a[aria-current="page"]::after {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 9px;
  vertical-align: middle;
  background: var(--gold-bright);
  border-radius: 50%;
  content: "";
}

.nav-toggle {
  position: relative;
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 50%;
}

.nav-toggle span:not(.sr-only) {
  position: absolute;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.25s var(--ease);
}

.nav-toggle span:nth-of-type(2) {
  transform: translateY(-4px);
}

.nav-toggle span:nth-of-type(3) {
  transform: translateY(4px);
}

.nav-open .nav-toggle span:nth-of-type(2) {
  transform: rotate(45deg);
}

.nav-open .nav-toggle span:nth-of-type(3) {
  transform: rotate(-45deg);
}

.external-link,
.header-vote-button {
  display: none;
}

/* Home hero */
.hero-section {
  position: relative;
  display: flex;
  min-height: calc(90svh - var(--header-height));
  align-items: center;
  padding: 80px 0 120px;
  overflow: hidden;
}

.hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  gap: 60px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .hero-layout {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

.hero-copy h1 {
  margin: 0 0 24px;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.hero-copy h1 em,
.section-heading h2 em {
  color: var(--gold-pale);
  font-style: italic;
  font-weight: 400;
}

.hero-lead {
  max-width: 500px;
  margin-bottom: 40px;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.6;
  font-weight: 300;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 48px;
}

.hero-kpis {
  display: flex;
  gap: 40px;
  margin: 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.hero-kpis div {
  position: relative;
}

.hero-kpis dt {
  color: var(--white);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
}

.hero-kpis dd {
  margin: 8px 0 0;
  color: var(--muted-2);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hero-art {
  position: relative;
  width: 100%;
  max-width: 540px;
  justify-self: center;
}

.hero-art > img {
  position: relative;
  z-index: 2;
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.hero-orbit {
  display: none;
}

.float-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  color: var(--gold-pale);
  background: rgba(1, 1, 1, 0.8);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.float-chip-one {
  top: 10%;
  right: -5%;
  animation: chipFloat 6s ease-in-out infinite;
}

.float-chip-two {
  bottom: 10%;
  left: -5%;
  animation: chipFloat 7s 1s ease-in-out infinite reverse;
}

.scroll-cue {
  position: absolute;
  bottom: 24px;
  left: 50%;
  display: none;
  align-items: center;
  gap: 12px;
  color: var(--muted-2);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.scroll-cue i {
  position: relative;
  width: 24px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}

.scroll-cue i::after {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 3px;
  height: 7px;
  background: var(--gold-bright);
  border-radius: 999px;
  content: "";
  transform: translateX(-50%);
  animation: scrollDot 2s infinite;
}

/* Categories */
.categories-section {
  position: relative;
  padding: 94px 0 108px;
  overflow: hidden;
}

.categories-section::before {
  position: absolute;
  top: 18%;
  left: 50%;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(255, 164, 0, 0.13), transparent 69%);
  border-radius: 50%;
  content: "";
  transform: translateX(-50%);
}

.section-heading {
  position: relative;
  z-index: 1;
}

.section-heading.centered {
  max-width: 820px;
  margin: 0 auto 52px;
  text-align: center;
}

.section-heading.centered .section-label {
  justify-content: center;
}

.section-heading h2,
.experience-copy h2,
.profile-about h2,
.more-nominees h2,
.studio-intro h1 {
  margin: 0;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.section-heading > p {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 1.1rem;
  font-weight: 300;
}

.category-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.category-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.category-card {
  position: relative;
  display: flex;
  min-height: 160px;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  overflow: hidden;
  color: var(--cream);
  background: var(--surface-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
  transition: transform 0.3s var(--ease), border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.category-card::after {
  position: absolute;
  right: 20px;
  bottom: 20px;
  color: var(--gold-pale);
  content: "→";
  font-size: 1.1rem;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.3s ease, transform 0.3s var(--ease);
}

.category-card:hover {
  z-index: 3;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(223, 179, 106, 0.3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  transform: translateY(-4px);
}

.category-card:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.category-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.category-number {
  color: var(--muted-2);
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.12em;
}

.category-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #100b03;
  background: linear-gradient(135deg, #ffe76c, #f4a600);
  border-radius: 50%;
  font-size: 0.94rem;
  box-shadow: 0 8px 24px rgba(246, 170, 0, 0.2);
}

.category-card h3 {
  position: relative;
  z-index: 1;
  max-width: 14ch;
  margin: 24px 24px 0 0;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(1.05rem, 3.8vw, 1.32rem);
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: uppercase;
}

.category-center {
  position: relative;
  display: grid;
  width: min(100%, 330px);
  aspect-ratio: 1;
  place-items: center;
  justify-self: center;
  order: -1;
}

.category-center img {
  position: relative;
  z-index: 3;
  width: 88%;
  filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.42));
  animation: logoFloat 5.8s var(--ease) infinite;
}

.logo-halo {
  position: absolute;
  inset: 5%;
  background: radial-gradient(circle, rgba(255, 190, 34, 0.2), transparent 68%);
  border-radius: 50%;
  filter: blur(4px);
}

.logo-ring {
  position: absolute;
  border: 1px solid rgba(255, 221, 85, 0.2);
  border-radius: 50%;
}

.logo-ring-one {
  inset: 3%;
  animation: orbitSpin 28s linear infinite;
}

.logo-ring-one::before,
.logo-ring-two::before {
  position: absolute;
  top: 4%;
  left: 18%;
  width: 8px;
  height: 8px;
  background: var(--gold-bright);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(255, 220, 75, 0.75);
  content: "";
}

.logo-ring-two {
  inset: 14%;
  border-style: dashed;
  opacity: 0.65;
  animation: orbitSpin 20s linear infinite reverse;
}

.category-center-heart {
  position: absolute;
  right: 9%;
  bottom: 13%;
  z-index: 4;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #100b03;
  background: var(--gold-bright);
  border: 5px solid rgba(7, 6, 4, 0.85);
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.36);
  animation: heartBeat 2.4s infinite;
}

.section-action {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

/* Experience */
.experience-section {
  padding: 24px 0 100px;
}

.experience-card {
  position: relative;
  display: grid;
  gap: 32px;
  padding: 34px 26px;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(255, 210, 52, 0.09), transparent 34%),
    rgba(13, 10, 7, 0.82);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow-soft);
}

.experience-card::after {
  position: absolute;
  top: -100px;
  right: -90px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 145, 0, 0.2), transparent 68%);
  content: "";
}

.experience-copy {
  position: relative;
  z-index: 1;
}

.experience-copy h2 {
  font-size: clamp(2.1rem, 8.5vw, 3.2rem);
}

.experience-steps {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.experience-steps li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 0 12px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.experience-steps li:last-child {
  border-bottom: 0;
}

.experience-steps span {
  grid-row: 1 / span 2;
  color: var(--gold-bright);
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 900;
}

.experience-steps strong {
  color: var(--white);
  font-size: 1rem;
}

.experience-steps small {
  color: var(--muted-2);
  font-size: 0.78rem;
}

.experience-card > .button {
  position: relative;
  z-index: 1;
  align-self: center;
}

/* Footer */
.site-footer {
  position: relative;
  padding: 32px 0 calc(26px + env(safe-area-inset-bottom));
  background: rgba(4, 4, 3, 0.74);
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.footer-inner {
  display: grid;
  gap: 18px;
  align-items: center;
  text-align: center;
}

.footer-logo {
  display: inline-flex;
  width: 74px;
  justify-self: center;
}

.footer-logo img {
  display: block;
  width: auto;
  height: 60px;
  mix-blend-mode: screen;
  filter: contrast(1.1);
}

.footer-inner p {
  max-width: 390px;
  margin: 0 auto;
  color: var(--muted-2);
  font-size: 0.82rem;
}

.footer-inner nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
}

.footer-inner nav a {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 720;
}

.footer-inner nav a:hover {
  color: var(--gold-bright);
}

.footer-inner small {
  color: #777168;
  font-size: 0.72rem;
}

/* Shared inner-page elements */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted-2);
  font-size: 0.74rem;
  font-weight: 680;
}

.breadcrumb a:hover {
  color: var(--gold-bright);
}

.breadcrumb span[aria-hidden="true"] {
  opacity: 0.5;
}

/* Nominees page */
.nominees-hero {
  position: relative;
  padding: 38px 0 28px;
  overflow: hidden;
}

.nominees-hero::after {
  position: absolute;
  top: -220px;
  right: -120px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(255, 153, 0, 0.19), transparent 70%);
  border-radius: 50%;
  content: "";
}

/* `align-items: end` collait la tuile de catégorie au bas d'une rangée de
   186 px : elle se retrouvait à hauteur de la description, à côté de rien.
   Alignée en haut, elle accompagne le sur-titre et le titre. */
.nominees-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 16px;
  align-items: start;
  max-width: 900px;
  margin-top: 34px;
}

.category-symbol {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  overflow: hidden;
  color: #100b03;
  background: linear-gradient(135deg, #fff0a0, #ffbd27 60%, #e98700);
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(238, 151, 0, 0.22);
  font-size: 1.45rem;
}

/* L'image de catégorie portait des dimensions en ligne (80 px) plus grandes que
   la cellule de grille qui l'accueille (58 px) : elle débordait par le bas et
   venait chevaucher le titre. C'est la tuile qui fixe le gabarit. */
.category-symbol img {
  width: 100%;
  height: 100%;
  padding: 8px;
  object-fit: contain;
}

.nominees-heading .section-label {
  margin-bottom: 8px;
}

.nominees-heading h1 {
  margin: 0;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(2.4rem, 10vw, 3.85rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.96;
  text-transform: uppercase;
}

.nominees-heading p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* 19 catégories tiennent sur 5 400 px de large dans un conteneur de 1 200 px.
   La barre de défilement était masquée et rien n'indiquait le débordement :
   quatorze catégories étaient invisibles et indevinables. On garde le défilement
   horizontal (une barre d'onglets reste le bon repère de navigation ici) mais on
   l'annonce — barre fine visible, et dégradé sur le bord droit. */
.category-tabs-scroller {
  position: relative;
  z-index: 1;
  margin-top: 32px;
}

.category-tabs-scroller::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 10px;
  width: 56px;
  background: linear-gradient(90deg, rgba(1, 1, 1, 0), var(--bg));
  pointer-events: none;
  content: "";
}

.category-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 9px;
  padding: 2px 1px 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(223, 179, 106, 0.45) transparent;
  scroll-snap-type: x proximity;
}

.category-tabs-scroller .category-tabs {
  margin-top: 0;
}

.category-tabs::-webkit-scrollbar {
  height: 6px;
}

/* Les flèches natives de WebKit encadrent la barre de deux carrés gris. */
.category-tabs::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

.category-tabs::-webkit-scrollbar-thumb {
  background: rgba(223, 179, 106, 0.45);
  border-radius: 999px;
}

.category-tabs::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
}

.category-tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 10px 14px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 760;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.category-tab:hover,
.category-tab.is-active {
  color: #130d03;
  background: var(--gold-bright);
  border-color: var(--gold-bright);
}

.nominees-list-section {
  padding: 40px 0 100px;
}

.nominees-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}

.nominees-toolbar p {
  margin: 0;
  color: var(--muted-2);
  font-size: 0.82rem;
}

.nominees-toolbar strong {
  color: var(--cream);
}

.search-control {
  position: relative;
  display: flex;
  width: min(100%, 230px);
  align-items: center;
}

.search-control svg {
  position: absolute;
  left: 14px;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--muted-2);
  stroke-linecap: round;
  stroke-width: 2;
}

.search-control input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 42px;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  outline: 0;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.search-control input::placeholder {
  color: #777168;
}

.search-control input:focus {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line-strong);
}

.nominee-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.nominee-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(223, 179, 106, 0.15);
  border-radius: 24px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s ease, box-shadow 0.4s ease;
  opacity: 0;
  transform: translateY(20px);
}

.nominee-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.nominee-card:hover {
  border-color: rgba(223, 179, 106, 0.6);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 20px rgba(223, 179, 106, 0.2);
  transform: translateY(-8px);
}

.nominee-card-link {
  display: block;
}

.nominee-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #15100b;
}

.nominee-media::after {
  position: absolute;
  inset: 34% 0 0;
  background: linear-gradient(180deg, transparent, rgba(5, 5, 4, 0.93));
  content: "";
}

.nominee-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease), filter 0.5s ease;
}

.nominee-card:hover .nominee-media img {
  transform: scale(1.055);
}

.nominee-score-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  color: var(--white);
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(223, 179, 106, 0.4);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.8rem;
  font-weight: 800;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.nominee-score-chip i {
  color: var(--gold-bright);
}

.nominee-number-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #dfb36a, #fbf0d8, #c49646);
  color: #000;
  border-radius: 50%;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 900;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.nominee-card-content {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 24px 20px 20px;
}

.nominee-card-content > span {
  display: block;
  margin-bottom: 7px;
  color: var(--gold-bright);
  font-size: 0.67rem;
  font-weight: 790;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nominee-card h2 {
  margin: 0 0 6px;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(1.55rem, 6vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 0.98;
  text-transform: uppercase;
}

.nominee-card p {
  margin: 0;
  color: #c6beb1;
  font-size: 0.78rem;
}

.nominee-card-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  gap: 10px;
}

.btn-profile {
  background: #000;
  color: var(--white);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  transition: color 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.nominee-card:hover .btn-profile {
  color: var(--gold-bright);
}

.btn-vote {
  background: linear-gradient(135deg, #dfb36a, #fbf0d8, #c49646);
  color: #000;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease;
  box-shadow: 0 4px 10px rgba(223, 179, 106, 0.3);
}

.nominee-card:hover .btn-vote {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 15px rgba(223, 179, 106, 0.5);
}

.nominee-card:hover .nominee-card-action i {
  transform: rotate(-10deg) translateX(3px);
}

/* Enfant direct de `.nominee-grid`, l'état vide n'occupait qu'une colonne sur
   quatre : le message se retrouvait comprimé dans 282 px, à gauche d'un vide. */
.empty-state {
  grid-column: 1 / -1;
  padding: 80px 20px;
  text-align: center;
}

.empty-state > span {
  color: var(--gold-bright);
  font-size: 2.4rem;
}

.empty-state h2 {
  margin: 12px 0 14px;
  font-family: var(--display);
  font-size: 2rem;
  text-transform: uppercase;
}

.empty-state p {
  max-width: 46ch;
  margin: 0 auto 24px;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Profile page */
.profile-page {
  padding: 32px 0 96px;
}

.profile-breadcrumb {
  margin-bottom: 22px;
}

.profile-showcase {
  display: grid;
  overflow: hidden;
  background:
    linear-gradient(130deg, rgba(255, 223, 89, 0.065), transparent 38%),
    rgba(13, 10, 7, 0.86);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
}

.profile-visual {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  background: #15100b;
}

.profile-visual > img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.profile-showcase:hover .profile-visual > img {
  transform: scale(1.025);
}

.profile-visual-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 4, 3, 0.08), rgba(4, 4, 3, 0.15) 45%, rgba(4, 4, 3, 0.8));
}

.profile-category-badge,
.profile-photo-mark {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--cream);
  background: rgba(7, 6, 4, 0.72);
  border: 1px solid rgba(255, 221, 85, 0.2);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  font-size: 0.7rem;
  font-weight: 790;
}

.profile-category-badge {
  top: 18px;
  left: 18px;
  padding: 8px 12px;
  color: #100b03;
  background: var(--gold-bright);
  border-color: transparent;
}

.profile-photo-mark {
  bottom: 18px;
  left: 18px;
  padding: 8px 12px;
}

.profile-photo-mark span {
  color: var(--gold-bright);
}

.profile-intro {
  background: transparent;

  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 24px 38px;
}

.profile-kind {
  margin-bottom: 13px;
  color: var(--gold-bright);
  font-size: 0.72rem;
  font-weight: 840;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.profile-intro h1 {
  margin: 0;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(2.7rem, 11vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.92;
  text-transform: uppercase;
}

.profile-subtitle {
  margin: 12px 0 0;
  color: var(--gold-pale);
  font-size: 0.92rem;
  font-weight: 750;
}

.profile-tagline {
  max-width: 470px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 3vw, 1.14rem);
  line-height: 1.65;
}

/* Deux colonnes figées laissaient une moitié vide depuis que le rang a été
   retiré : la seule statistique restante flottait sur la gauche. */
.profile-score-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, auto));
  gap: 0;
  margin: 30px 0;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.profile-score-row > div + div {
  padding-left: 22px;
  border-left: 1px solid var(--line);
}

.profile-score-row span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted-2);
  font-size: 0.69rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-score-row strong {
  color: var(--white);
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
}

.profile-score-row i {
  color: var(--gold-bright);
  font-style: normal;
}

.profile-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 11px;
}

.micro-note {
  margin: 15px 0 0;
  color: var(--muted-2);
  font-size: 0.73rem;
}

.profile-details {
  display: grid;
  gap: 34px;
  padding: 82px 0 30px;
}

.profile-about {
  max-width: 600px;
}

.profile-about h2 {
  font-size: clamp(2.1rem, 8vw, 3rem);
}

.profile-about > p {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

.strength-grid {
  display: grid;
  gap: 14px;
}

.strength-card {
  position: relative;
  min-height: 170px;
  padding: 32px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 221, 85, 0.12);
  border-radius: 22px;
  transition: transform 0.3s var(--ease), background 0.3s ease, border-color 0.3s ease;
}

.strength-card::after {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 130px;
  height: 130px;
  background: radial-gradient(circle, rgba(255, 175, 0, 0.14), transparent 70%);
  content: "";
}

.strength-card:hover {
  background: rgba(255, 221, 85, 0.055);
  border-color: var(--line-strong);
  transform: translateY(-4px);
}

.strength-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-bottom: 30px;
  color: #120c03;
  background: var(--gold-bright);
  border-radius: 14px;
  font-size: 1.05rem;
}

.strength-card h3 {
  margin: 0 0 8px;
  color: var(--white);
  font-size: 1rem;
}

.strength-card p {
  margin: 0;
  color: var(--muted-2);
  font-size: 0.82rem;
  line-height: 1.6;
}

/* 4. Nominees list & grid */
.nominees-list-section {
  position: relative;
  padding: 0 0 120px;
}
.nominees-list-section::before {
  content: "";
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 400px;
  background: linear-gradient(180deg, rgba(223, 179, 106, 0.05), transparent);
  pointer-events: none;
}

.nominees-toolbar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}

.more-nominees h2 {
  font-size: clamp(2rem, 7vw, 2.8rem);
}

.mini-nominee-grid {
  display: grid;
  gap: 14px;
}

.mini-nominee-card {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 18px;
  transition: transform 0.28s var(--ease), border-color 0.28s ease, background 0.28s ease;
}

.mini-nominee-card:hover {
  background: rgba(255, 221, 85, 0.055);
  border-color: var(--line-strong);
  transform: translateY(-3px);
}

.mini-nominee-card img {
  width: 92px;
  height: 82px;
  object-fit: cover;
  border-radius: 12px;
}

.mini-nominee-card strong {
  display: block;
  color: var(--white);
  font-family: var(--display);
  font-size: 1.2rem;
  line-height: 1;
  text-transform: uppercase;
}

.mini-nominee-card span {
  display: block;
  margin-top: 5px;
  color: var(--muted-2);
  font-size: 0.72rem;
}

.mini-nominee-card i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #110b03;
  background: var(--gold-bright);
  border-radius: 50%;
  font-style: normal;
}

.header-vote-button {
  color: #100b03;
  background: var(--gold-bright);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 850;
}

.mobile-vote-bar {
  position: fixed;
  right: 14px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: 14px;
  z-index: 60;
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  color: #000;
  background: linear-gradient(135deg, #dfb36a, #fbf0d8, #c49646);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(223, 179, 106, 0.4);
  font-weight: 700;
  font-size: 0.82rem;
  font-weight: 760;
}

.mobile-vote-bar strong {
  display: block;
  max-width: 205px;
  overflow: hidden;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-vote-bar i {
  display: inline-flex;
  font-style: normal;
}

.profile-footer {
  padding-bottom: calc(94px + env(safe-area-inset-bottom));
}

/* Modal foundations */
.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 16px;
  visibility: hidden;
  opacity: 0;
  background: rgba(2, 2, 2, 0.78);
  backdrop-filter: blur(16px);
  transition: opacity 0.25s ease, visibility 0.25s;
}

.modal-layer.is-open {
  visibility: visible;
  opacity: 1;
}

.dialog {
  position: relative;
  width: min(100%, 560px);
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  background: rgba(12, 11, 9, 0.65);
  backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(223, 179, 106, 0.2);
  border-radius: 28px;
  box-shadow: var(--shadow);
  transform: translateY(28px) scale(0.98);
  transition: transform 0.3s var(--ease);
  scrollbar-width: thin;
}

.modal-layer.is-open .dialog {
  transform: translateY(0) scale(1);
}

.dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 50%;
  font-size: 1.35rem;
}

.dialog-close:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.09);
}

/* Compact vote dialog */
.vote-dialog {
  padding: 24px 20px 20px;
}

.vote-candidate {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 14px;
  align-items: center;
  padding-right: 48px;
}

.vote-candidate img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  background: #1a130c;
  border: 1px solid rgba(255, 221, 85, 0.34);
  border-radius: 50%;
}

.vote-candidate h2 {
  margin: 0;
  color: var(--white);
  font-size: 1.12rem;
  font-weight: 820;
  line-height: 1.15;
}

.vote-candidate p {
  margin: 5px 0 0;
  color: var(--muted-2);
  font-size: 0.78rem;
}

.vote-instruction {
  margin: 26px 0 14px;
  color: var(--muted);
  font-size: 0.83rem;
}

/* `repeat(5, 1fr)` était calé sur cinq packs. Il y en a sept en base : les deux
   derniers tombaient seuls sur une deuxième ligne, à moitié vide. `auto-fit`
   répartit ce que la base contient, quel que soit le nombre de formules. */
.heart-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
}

.heart-option {
  position: relative;
  min-width: 0;
}

.heart-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.heart-option span {
  display: grid;
  min-height: 74px;
  place-items: center;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 17px;
  font-size: 1.25rem;
  font-weight: 900;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease);
}

/* Le prix était affiché en 8 px à 70 % d'opacité — c'est pourtant la donnée sur
   laquelle se prend la décision dans un tunnel payant. Remonté à 12 px, au-dessus
   du plancher de lisibilité mobile. */
.heart-option span small {
  display: block;
  margin-top: 4px;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  opacity: 0.82;
  white-space: nowrap;
}

.heart-option:hover span {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.heart-option input:checked + span {
  color: #000;
  background: linear-gradient(135deg, #dfb36a, #fbf0d8, #c49646);
  border-color: transparent;
  box-shadow: 0 10px 30px rgba(223, 179, 106, 0.4);
}

.heart-option input:checked + span i {
  color: #e60000;
}

.heart-option span i {
  font-style: normal;
  font-size: 0.9em;
  margin-left: 2px;
}

.heart-option input:disabled + span {
  cursor: not-allowed;
  opacity: 0.35;
}

.custom-vote-field {
  margin-top: 13px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 16px;
}

.custom-vote-field > label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
}

.custom-vote-field > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-vote-field input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  color: var(--white);
  background: #080705;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  font-weight: 820;
}

.custom-vote-field > div span {
  color: var(--gold-bright);
  font-size: 0.75rem;
  font-weight: 820;
}

.custom-vote-field small {
  display: block;
  margin-top: 7px;
  color: var(--muted-2);
  font-size: 0.66rem;
}

.vote-confirm {
  width: 100%;
  min-height: 58px;
  margin-top: 20px;
  color: #000;
  background: linear-gradient(135deg, #dfb36a, #fbf0d8, #c49646);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(223, 179, 106, 0.4);
  font-size: 1rem;
  font-weight: 900;
  transition: transform 0.22s var(--ease), box-shadow 0.22s ease, opacity 0.22s ease;
}

.vote-confirm:hover {
  filter: brightness(1.15);
  box-shadow: 0 14px 40px rgba(223, 179, 106, 0.6);
  transform: translateY(-2px);
}

.vote-confirm:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.vote-cancel {
  display: block;
  margin: 14px auto 0;
  padding: 6px 12px;
  color: var(--muted);
  background: transparent;
  font-weight: 740;
}

.vote-cancel:hover {
  color: var(--white);
}

/* Success */
.success-dialog {
  padding: 42px 24px 24px;
  text-align: center;
}

.success-candidate-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}

.success-candidate-img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--accent);
  box-shadow: 0 10px 30px rgba(223, 179, 106, 0.4);
  animation: successPop 0.6s var(--ease);
}

.success-kicker {
  color: var(--gold-bright);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.success-dialog h2 {
  margin: 8px 0 12px;
  color: var(--white);
  font-family: var(--display);
  font-size: 2.5rem;
  line-height: 0.95;
  text-transform: uppercase;
}

.success-dialog p {
  margin: 0 auto 26px;
  color: var(--muted);
  font-size: 0.9rem;
}

.success-dialog .button + .button {
  margin-top: 7px;
}

/* Share card builder */
.share-layer {
  align-items: center;
}

.share-dialog {
  width: min(100%, 1080px);
  padding: 28px 20px 22px;
}

.share-heading {
  padding-right: 44px;
}

.share-heading h2 {
  margin: 0;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(2.2rem, 8vw, 3.2rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.share-heading p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.share-builder {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}

.share-preview-wrap {
  display: grid;
  min-height: 360px;
  place-items: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 22px;
}

.share-preview-wrap canvas {
  width: min(100%, 380px);
  height: auto;
  background: #0a0704;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}

.share-controls {
  display: grid;
  align-content: start;
  gap: 16px;
}

.upload-button {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 15px 13px 18px;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 221, 85, 0.34);
  border-radius: 16px;
  font-size: 0.84rem;
  font-weight: 780;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.upload-button:hover {
  background: rgba(255, 221, 85, 0.075);
  border-color: rgba(255, 221, 85, 0.58);
}

.upload-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.upload-button i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #110b03;
  background: var(--gold-bright);
  border-radius: 50%;
  font-style: normal;
  font-size: 1rem;
}

.text-field {
  display: grid;
  gap: 8px;
}

.text-field > span,
.text-field > legend,
.format-switch legend,
.studio-ratios legend {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
}

.text-field small {
  color: var(--muted-2);
  font-weight: 550;
}

.text-field input,
.text-field select {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  outline: 0;
}

.text-field input:focus,
.text-field select:focus {
  border-color: var(--line-strong);
}

.format-switch,
.studio-ratios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0;
  border: 0;
}

.format-switch legend,
.studio-ratios legend {
  grid-column: 1 / -1;
  margin-bottom: 2px;
}

.format-switch label,
.studio-ratios label {
  position: relative;
}

.format-switch input,
.studio-ratios input {
  position: absolute;
  opacity: 0;
}

.format-switch label span,
.studio-ratios label span {
  display: grid;
  min-height: 44px;
  place-items: center;
  padding: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  font-size: 0.73rem;
  font-weight: 760;
}

.format-switch input:checked + span,
.studio-ratios input:checked + span {
  color: #100b03;
  background: var(--gold-bright);
  border-color: var(--gold-bright);
}

.share-actions {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

/* Cropper */
.crop-layer {
  align-items: center;
}

.crop-dialog {
  width: min(100%, 720px);
  padding: 26px 18px 20px;
}

.crop-heading {
  padding-right: 42px;
}

.crop-heading h2 {
  margin: 0;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(2rem, 8vw, 2.8rem);
  line-height: 0.96;
  text-transform: uppercase;
}

.crop-heading p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.crop-canvas-wrap {
  position: relative;
  display: grid;
  max-height: 56svh;
  place-items: center;
  margin-top: 18px;
  overflow: hidden;
  background: #020201;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
}

.crop-canvas-wrap canvas {
  width: auto;
  max-width: 100%;
  max-height: 56svh;
  touch-action: none;
  user-select: none;
}

.crop-guide {
  position: absolute;
  inset: 9px;
  pointer-events: none;
  border: 1px solid rgba(255, 239, 161, 0.55);
  border-radius: 12px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.08);
}

.zoom-control {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}

.zoom-control span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
}

.zoom-control input {
  width: 100%;
  accent-color: var(--gold-bright);
}

.crop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

/* Studio */
.studio-header-inner {
  grid-template-columns: auto 1fr auto;
}

.studio-header-title {
  display: grid;
  margin-left: 6px;
}

.studio-header-title strong {
  color: var(--white);
  font-size: 0.86rem;
}

.studio-header-title span {
  color: var(--muted-2);
  font-size: 0.64rem;
}

.studio-page {
  min-height: calc(100svh - var(--header-height));
  padding: 54px 0 96px;
}

.studio-intro {
  max-width: 780px;
  margin-bottom: 34px;
}

.studio-intro h1 {
  font-size: clamp(2.6rem, 10vw, 4rem);
}

.studio-intro p {
  max-width: 560px;
  margin: 18px 0 0;
  color: var(--muted);
}

.studio-workspace {
  display: grid;
  gap: 22px;
  padding: 18px;
  background: rgba(13, 10, 7, 0.82);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
}

.studio-controls {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 8px;
}

.studio-ratios {
  grid-template-columns: repeat(3, 1fr);
}

.upload-button-large {
  min-height: 68px;
}

.studio-actions {
  display: grid;
  gap: 8px;
}

.studio-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.studio-note {
  margin: 0;
  padding-top: 15px;
  color: var(--muted-2);
  border-top: 1px solid rgba(255, 255, 255, 0.065);
  font-size: 0.7rem;
  line-height: 1.6;
}

.studio-preview-panel {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 480px;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 177, 0, 0.12), transparent 44%),
    rgba(255, 255, 255, 0.018);
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 22px;
}

.studio-preview-frame {
  position: relative;
  width: min(100%, 430px);
  overflow: hidden;
  background: #15100b;
  border: 1px solid rgba(255, 221, 85, 0.26);
  border-radius: 24px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.4);
  transition: aspect-ratio 0.3s var(--ease);
}

.studio-preview-frame.is-portrait {
  aspect-ratio: 4 / 5;
}

.studio-preview-frame.is-landscape {
  width: min(100%, 560px);
  aspect-ratio: 16 / 10;
}

.studio-preview-frame.is-square {
  aspect-ratio: 1;
}

.studio-preview-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-preview-overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 80px 22px 20px;
  background: linear-gradient(180deg, transparent, rgba(5, 5, 4, 0.93));
}

.studio-preview-overlay span {
  display: block;
  color: var(--gold-bright);
  font-size: 0.67rem;
  font-weight: 780;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.studio-preview-overlay strong {
  display: block;
  margin-top: 5px;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.studio-preview-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--muted-2);
  font-size: 0.72rem;
}

.studio-preview-status i {
  width: 7px;
  height: 7px;
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(135, 210, 149, 0.5);
}

/* Toast */
.toast {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 600;
  max-width: min(360px, calc(100% - 32px));
  padding: 12px 16px;
  visibility: hidden;
  color: var(--cream);
  opacity: 0;
  background: rgba(13, 10, 7, 0.94);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(16px);
  font-size: 0.78rem;
  transform: translateY(16px);
  transition: opacity 0.24s ease, transform 0.24s var(--ease), visibility 0.24s;
}

.toast.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------------
   Retour de paiement (/vote_retour, /vote_echec)
   ------------------------------------------------------------------
   Ces deux pages étaient rendues dans la charte claire du site syndical,
   au milieu d'un tunnel entièrement noir et or : le visiteur changeait de
   site juste après avoir payé. Elles rejoignent la charte des Awards ici.
   Les couleurs d'état viennent des jetons, pas de valeurs pensées pour un
   fond blanc — le bouton de secours de l'ancienne version était en
   #1a365d sur un dégradé #1a365d, soit un contraste de 1,0:1.            */

.vote-outcome {
  display: grid;
  min-height: calc(100svh - var(--header-height) - 120px);
  place-items: center;
  padding: 72px 0 96px;
}

.vote-outcome-panel {
  width: min(100%, 560px);
  margin-inline: auto;
  padding: 44px 32px 36px;
  text-align: center;
  background:
    linear-gradient(150deg, rgba(255, 223, 89, 0.05), transparent 42%),
    rgba(13, 10, 7, 0.86);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
}

.vote-outcome-mark {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  margin: 0 auto 22px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 2rem;
  line-height: 1;
}

.vote-outcome[data-state="credite"] .vote-outcome-mark {
  color: var(--success);
  background: rgba(107, 182, 121, 0.12);
  animation: successPop 0.6s var(--ease);
}

.vote-outcome[data-state="echoue"] .vote-outcome-mark {
  color: var(--danger);
  background: rgba(226, 92, 94, 0.12);
}

.vote-outcome[data-state="attente"] .vote-outcome-mark {
  color: var(--gold-bright);
  background: rgba(223, 179, 106, 0.12);
}

.vote-outcome[data-state="inconnu"] .vote-outcome-mark {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
}

.vote-outcome h1 {
  margin: 0 0 14px;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.vote-outcome-lead {
  margin: 0 auto 10px;
  max-width: 42ch;
  color: var(--cream);
  font-size: 1.05rem;
}

.vote-outcome-lead strong {
  color: var(--gold-bright);
}

.vote-outcome-note {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--muted);
  font-size: 0.9rem;
}

.vote-outcome-total {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  padding: 10px 18px;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.86rem;
}

.vote-outcome-total strong {
  color: var(--white);
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
}

.vote-outcome-total i {
  color: var(--gold-bright);
  font-style: normal;
}

.vote-outcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}

.vote-outcome-actions .button {
  flex: 1 1 200px;
}

@media (max-width: 479px) {
  .vote-outcome-panel {
    padding: 34px 22px 28px;
  }

  .vote-outcome-actions .button {
    flex: 1 1 100%;
  }
}

/* Reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animations */
@keyframes starDrift {
  to { background-position: 120px 760px; }
}

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 221, 85, 0.48); }
  50% { box-shadow: 0 0 0 8px rgba(255, 221, 85, 0); }
}

@keyframes heroFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.5deg); }
  50% { transform: translate3d(0, -13px, 0) rotate(0.6deg); }
}

@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes orbitSpin {
  to { transform: rotate(360deg); }
}

@keyframes scrollDot {
  0% { opacity: 0; transform: translate(-50%, 0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 14px); }
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50% { transform: translateY(-12px) rotate(0.6deg); }
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.12); }
  24% { transform: scale(1); }
}

@keyframes successPop {
  0% { opacity: 0; transform: scale(0.55) rotate(-14deg); }
  70% { transform: scale(1.08) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Téléphones : la fenêtre de vote n'a plus que ~318 px utiles, ce qui ne laisse
   que deux colonnes au gabarit de bureau — sept formules sur quatre rangées.
   Une largeur minimale plus basse en rend trois, soit 3 + 3 + 1. */
@media (max-width: 519px) {
  .heart-options {
    grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  }
}

/* Small phones */
@media (max-width: 379px) {
  .hero-copy h1 {
    font-size: 2.55rem;
  }

  .hero-actions .button {
    width: 100%;
  }

  .category-side {
    grid-template-columns: 1fr;
  }

  .category-card {
    min-height: 132px;
  }

  .heart-options {
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    gap: 5px;
  }

  .heart-option span {
    min-height: 68px;
    border-radius: 14px;
    font-size: 1.1rem;
  }
}

/* Two-column cards on wider phones */
@media (min-width: 480px) {
  .nominee-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  .mini-nominee-card {
    grid-template-columns: 78px 1fr auto;
  }

  .mini-nominee-card img {
    width: 78px;
    height: 72px;
  }
}

/* Tablet */
@media (min-width: 720px) {
  :root {
    --header-height: 84px;
  }

  .shell {
    width: min(calc(100% - 56px), var(--shell));
  }

  .hero-section {
    padding-top: 64px;
  }

  .hero-layout {
    grid-template-columns: minmax(0, 1.03fr) minmax(330px, 0.97fr);
    gap: 24px;
  }

  .hero-art {
    width: min(100%, 610px);
  }

  .hero-copy h1 {
    font-size: clamp(3.5rem, 7.6vw, 4.75rem);
  }

  .categories-section {
    padding: 118px 0 132px;
  }

  .category-stage {
    gap: 24px;
  }

  .category-side {
    gap: 16px;
  }

  .category-card {
    min-height: 160px;
    padding: 20px;
  }

  .category-center {
    width: 390px;
  }

  .experience-card {
    grid-template-columns: 0.9fr 1.2fr auto;
    align-items: center;
    gap: 38px;
    padding: 42px;
  }

  .experience-card > .button {
    white-space: nowrap;
  }

  .footer-inner {
    grid-template-columns: auto 1fr auto auto;
    gap: 28px;
    text-align: left;
  }

  .footer-logo {
    justify-self: start;
  }

  .footer-inner p {
    margin: 0;
  }

  .footer-inner nav {
    justify-content: flex-end;
  }

  .nominees-hero {
    padding: 50px 0 34px;
  }

  .nominees-heading {
    grid-template-columns: 72px 1fr;
    gap: 22px;
    margin-top: 44px;
  }

  .category-symbol {
    width: 72px;
    height: 72px;
    border-radius: 21px;
    font-size: 1.8rem;
  }

  .nominees-heading h1 {
    font-size: clamp(3.3rem, 7vw, 3.85rem);
  }

  .nominees-list-section {
    padding-top: 50px;
  }

  .nominee-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .profile-showcase {
    grid-template-columns: minmax(0, 1.12fr) minmax(330px, 0.88fr);
    min-height: 480px;
    border-radius: 34px;
  }

  .profile-visual,
  .profile-visual > img {
    min-height: 480px;
  }

  .profile-intro {
    padding: 40px 50px;
  }

  .profile-intro h1 {
    font-size: clamp(3.4rem, 6vw, 4rem);
  }

  .profile-details {
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 54px;
    padding-top: 104px;
  }

  .strength-grid {
    gap: 16px;
  }

  .section-heading-row {
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
  }

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

  .mini-nominee-card {
    grid-template-columns: 82px 1fr auto;
  }

  .mini-nominee-card img {
    width: 82px;
    height: 76px;
  }

  .mobile-vote-bar {
    display: none;
  }

  .profile-footer {
    padding-bottom: 26px;
  }

  .modal-layer {
    align-items: center;
    padding: 28px;
  }

  .vote-dialog {
    padding: 28px 28px 24px;
  }

  .share-dialog {
    padding: 34px;
  }

  .share-builder {
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
    gap: 34px;
    align-items: center;
  }

  .share-preview-wrap {
    min-height: 560px;
    padding: 24px;
  }

  .studio-workspace {
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 22px;
    padding: 22px;
  }

  .studio-controls {
    padding: 14px;
  }
}

/* Desktop */
@media (min-width: 980px) {
  .header-inner {
    grid-template-columns: 1fr auto 1fr;
  }

  .brand {
    width: 84px;
    height: 74px;
  }

  .brand img {
    width: 86px;
  }

  .nav-toggle {
    display: none;
  }

  .main-nav {
    position: static;
    display: flex;
    gap: 4px;
    justify-self: center;
    padding: 0;
    visibility: visible;
    opacity: 1;
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
  }

  .main-nav a {
    padding: 10px 14px;
    font-size: 0.84rem;
  }

  .external-link,
  .header-vote-button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    justify-self: end;
    padding: 9px 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
  }

  .external-link {
    color: var(--muted);
    background: rgba(255, 255, 255, 0.025);
    font-size: 0.77rem;
    font-weight: 760;
  }

  .external-link:hover {
    color: var(--gold-bright);
    border-color: var(--line-strong);
  }

  .header-vote-button {
    color: #100b03;
    background: var(--gold-bright);
    border-color: transparent;
    transition: transform 0.2s var(--ease), box-shadow 0.2s ease;
  }

  .header-vote-button:hover {
    box-shadow: 0 12px 30px rgba(237, 153, 0, 0.25);
    transform: translateY(-1px);
  }

  .hero-section {
    min-height: max(700px, calc(100svh - var(--header-height)));
    padding: 74px 0 104px;
  }

  .hero-layout {
    grid-template-columns: minmax(0, 1.06fr) minmax(440px, 0.94fr);
    gap: 40px;
  }

  .hero-copy h1 {
    font-size: clamp(4.15rem, 5.15vw, 4.75rem);
  }

  .scroll-cue {
    display: flex;
  }

  .category-stage {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.74fr) minmax(0, 1fr);
    gap: 26px;
    align-items: center;
  }

  .category-center {
    order: 0;
    width: 100%;
    max-width: 360px;
  }

  .category-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .category-side-left .category-card:nth-child(even) {
    transform: translateY(26px);
  }

  .category-side-right .category-card:nth-child(odd) {
    transform: translateY(26px);
  }

  .category-side-left .category-card:nth-child(even):hover,
  .category-side-right .category-card:nth-child(odd):hover {
    transform: translateY(20px);
  }

  .category-card {
    min-height: 180px;
  }

  .category-card h3 {
    font-size: clamp(1.12rem, 1.55vw, 1.36rem);
  }

  .nominee-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .profile-page {
    padding-top: 42px;
  }

  .profile-showcase {
    grid-template-columns: minmax(0, 1.18fr) minmax(380px, 0.82fr);
    min-height: 520px;
  }

  .profile-visual,
  .profile-visual > img {
    min-height: 520px;
  }

  .profile-intro {
    padding: 50px 60px;
  }

  .profile-intro h1 {
    font-size: clamp(3.8rem, 4.6vw, 4.25rem);
  }
}

@media (min-width: 1180px) {
  .hero-layout {
    gap: 72px;
  }

  .category-stage {
    grid-template-columns: minmax(0, 1fr) 360px minmax(0, 1fr);
    gap: 34px;
  }

  .category-card {
    padding: 22px;
  }

  .nominee-grid {
    gap: 24px;
  }

  .studio-workspace {
    grid-template-columns: 390px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- OVERRIDES FOR NEW CATEGORY GRID & CARDS --- */
.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
  padding: 40px 0;
}

@media (min-width: 600px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(10, 10, 10, 0.8);
  border: 2px solid var(--gold-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
  padding: 0;
  height: 100%;
}

.category-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold-pale);
  box-shadow: 0 15px 35px rgba(223, 179, 106, 0.25);
}

.category-number-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #dfb36a, #fbf0d8, #c49646);
  color: #000;
  border-radius: 50%;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 900;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.category-card-image {
  width: 100%;
  height: 220px;
  background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(223, 179, 106, 0.2);
}

.category-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.category-card:hover .category-card-image img {
  transform: scale(1.08);
}

.category-card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: center;
  align-items: center;
}

/* `.category-card h3` (ancienne carte, plus haut dans le fichier) s'applique
   encore ici par descendance et impose `max-width: 14ch`, `margin-right: 24px`
   et `text-transform: uppercase`. Sur une carte de 234 px de contenu, un titre
   comme « Meilleur Agent d'Entretien Authentique Premium » tombait donc en cinq
   lignes capitales décalées de 24 px vers la gauche d'un bloc pourtant centré.
   On neutralise les trois héritages ici plutôt que de toucher l'ancienne règle,
   encore utilisée par la mise en page d'origine. */
.category-card-content h3 {
  max-width: none;
  margin: 0 0 12px;
  text-transform: none;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--white);
  line-height: 1.25;
  text-wrap: balance;
}

.category-card-content p {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--grey);
  margin-bottom: 24px;
  line-height: 1.5;
  flex-grow: 1;
}

/* La capitalisation forcée était portée par le composant : répétée sur les 19
   cartes de catégorie, elle transformait la grille en mur de capitales dorées.
   La casse revient au libellé, qui sait quand elle se justifie. */
.button-gold {
  background: linear-gradient(135deg, #dfb36a, #fbf0d8, #c49646);
  color: #000;
  font-weight: 700;
  border: none;
  letter-spacing: 0.01em;
  padding: 14px 24px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: filter 0.2s ease, transform 0.2s ease;
  text-decoration: none;
  font-size: 0.85rem;
  width: 100%;
  box-shadow: 0 4px 15px rgba(223, 179, 106, 0.3);
}

.button-gold:hover {
  filter: brightness(1.15);
  transform: scale(1.02);
  color: #000;
}

.button-gold span {
  font-size: 1.2rem;
  line-height: 1;
}

/* --- EXPERIENCE SECTION REFONTE --- */
.experience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-top: 40px;
}

@media (min-width: 768px) {
  .experience-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.experience-step-card {
  background: rgba(20, 20, 20, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(223, 179, 106, 0.2);
  border-radius: var(--radius-lg);
  padding: 40px 30px;
  position: relative;
  overflow: hidden;
  text-align: center;
  transition: transform 0.4s ease, border-color 0.4s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.experience-step-card:hover {
  transform: translateY(-10px);
  border-color: var(--gold-base);
}

.step-number-bg {
  position: absolute;
  top: -20px;
  right: -10px;
  font-size: 150px;
  font-family: var(--font-heading);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.03);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  transition: color 0.4s ease;
}

.experience-step-card:hover .step-number-bg {
  color: rgba(223, 179, 106, 0.08);
}

.step-icon {
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: rgba(223, 179, 106, 0.1);
  border-radius: 50%;
  border: 1px solid rgba(223, 179, 106, 0.3);
}

.experience-step-card h3 {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--white);
  margin-bottom: 10px;
}

.experience-step-card p {
  position: relative;
  z-index: 1;
  color: var(--grey);
  font-size: 1rem;
  margin: 0;
}

/* --- PARTNERS GRID --- */
.partners-section {
  padding: 60px 0;
  background: var(--black);
  border-top: 1px solid rgba(223, 179, 106, 0.2);
  border-bottom: 1px solid rgba(223, 179, 106, 0.2);
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: center;
  justify-items: center;
}

@media (min-width: 768px) {
  .partners-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
  }
}

/* Les logos partenaires n'ont ni la même forme ni le même fond : sans hauteur
   imposée, ils s'affichaient à 102, 250, 250 et 171 px de haut, dont un logo
   sombre invisible sur le fond noir. Une tuile de hauteur fixe, sur une plaque
   claire commune, les remet sur une ligne optique unique. */
.partner-logo {
  width: 100%;
  max-width: 250px;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Blanc pur, pas un blanc translucide : trois des quatre fichiers sources ont
     déjà un fond blanc incrusté et se détachaient sinon en rectangle dans le
     rectangle. Reste le logo à fond noir, que seule une source détourée
     réglerait — la tuile lui donne au moins un cadre commun. */
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: transform 0.3s var(--ease), box-shadow 0.3s ease;
}

.partner-logo:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}

.partner-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.placeholder-logo {
  background: #1a1a1a;
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  border: 1px dashed var(--gold-pale);
  padding: 20px;
}

.patronage-section {
  padding: 80px 0;
  text-align: center;
}

.patronage-logo-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.patronage-logo {
  width: 200px;
  height: 200px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
}

.patronage-logo:hover {
  transform: translateY(-5px);
}

.patronage-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* --- MODERNIZED FOOTER --- */
.site-footer {
  background: var(--black-alt);
  padding: 80px 0 30px;
  border-top: 1px solid rgba(223, 179, 106, 0.15);
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  margin-bottom: 60px;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
  }
}

.footer-brand p {
  color: var(--grey);
  margin: 20px 0;
  max-width: 400px;
  line-height: 1.6;
}

.footer-socials {
  display: flex;
  gap: 15px;
}

.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  transition: all 0.3s ease;
}

.footer-socials a:hover {
  background: var(--gold-base);
  color: var(--black);
  transform: translateY(-3px);
}

.footer-grid h3 {
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

.footer-grid h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 30px;
  height: 2px;
  background: var(--gold-base);
}

.footer-links nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a, .footer-legal a {
  color: var(--grey);
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-links a:hover {
  color: var(--gold-base);
  padding-left: 5px;
}

.footer-contact p {
  color: var(--grey);
  margin-bottom: 10px;
}

.footer-email {
  color: var(--gold-base);
  font-weight: 600;
}

.footer-email:hover {
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  gap: 20px;
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
  }
}

.footer-bottom small {
  color: var(--grey);
  font-size: 0.9rem;
}

.footer-legal {
  display: flex;
  gap: 20px;
  font-size: 0.9rem;
}

/* Scatter Animation */
.floating-heart {
  position: fixed;
  top: 50%;
  left: 50%;
  color: #e60000;
  font-size: 24px;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(0);
  animation: scatter 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: var(--d);
}

@keyframes scatter {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(var(--s)) rotate(var(--r));
    opacity: 0;
  }
}