/* ==========================================================================
   FASESIF — Page-specific styles
   ========================================================================== */

.pillar-card { position: relative; overflow: hidden; }

/* ---- Hero background treatments --------------------------------------------
   No photography assets are bundled with this template. Each hero uses a
   layered radial/linear gradient in the brand's burnt-sienna / gold palette
   to suggest warm ballroom lighting (chandeliers, candle-lit tables) without
   relying on external images. Swap the `background` declaration for a real
   photo (e.g. background: url('assets/img/hero-gala.jpg') center/cover;)
   whenever venue photography is available.
------------------------------------------------------------------------- */

.hero {
  background-color: #2b1608;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(255, 224, 133, 0.35), transparent 40%),
    radial-gradient(circle at 80% 10%, rgba(255, 224, 133, 0.22), transparent 35%),
    radial-gradient(circle at 50% 100%, rgba(149, 74, 0, 0.55), transparent 60%),
    linear-gradient(160deg, #3a1e0c 0%, #201005 60%, #150b04 100%);
}

.hero--home {
  background-image:
    radial-gradient(circle at 15% 12%, rgba(255, 224, 133, 0.4), transparent 38%),
    radial-gradient(circle at 85% 8%, rgba(255, 224, 133, 0.28), transparent 32%),
    radial-gradient(circle at 50% 105%, rgba(149, 74, 0, 0.6), transparent 55%),
    linear-gradient(160deg, #3d2010 0%, #22110a 55%, #150c07 100%);
}

/* Real photo, when present, sits behind the dark overlay (.hero::before)
   and in front of the CSS gradient fallback above. Drop a file at
   assets/img/hero-accueil.jpg — no other change needed. If the file is
   missing, the <img> removes itself on error and the gradient shows through. */
.hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero--candidature {
  background-image:
    radial-gradient(circle at 25% 20%, rgba(196, 160, 40, 0.3), transparent 40%),
    radial-gradient(circle at 75% 15%, rgba(255, 224, 133, 0.2), transparent 35%),
    linear-gradient(180deg, rgba(28,18,10,0.2) 0%, rgba(20,13,7,0.85) 100%),
    linear-gradient(160deg, #442411 0%, #24120a 60%, #150b04 100%);
}

/* CTA band on homepage */
.cta-band {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-container) 100%);
  border-radius: var(--radius-xl);
  padding: 48px var(--card-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .cta-band { flex-direction: column; text-align: center; padding: 36px var(--card-padding-mobile); }
}

/* ---- Essence du Gala (homepage) ---- */

.essence-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  align-items: stretch;
}

@media (max-width: 720px) {
  .essence-top-grid { grid-template-columns: 1fr; }
}

.essence-criteres { position: relative; overflow: hidden; }

.essence-programme { padding: var(--card-padding); }

@media (max-width: 720px) { .essence-programme { padding: var(--card-padding-mobile); } }

.programme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

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

.programme-list { display: flex; flex-direction: column; gap: 20px; }

.programme-item { display: flex; align-items: flex-start; gap: 16px; }

.programme-item__number {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-lowest);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
}

.programme-photo {
  border-radius: var(--radius-lg);
  min-height: 320px;
  height: 100%;
  overflow: hidden;
  background-color: #2b1608;
  background-image:
    radial-gradient(circle at 25% 15%, rgba(255, 224, 133, 0.32), transparent 42%),
    radial-gradient(circle at 80% 75%, rgba(196, 160, 40, 0.28), transparent 45%),
    linear-gradient(150deg, #422410 0%, #23120a 100%);
}

/* Real photo, when present, covers the gradient fallback above.
   Drop a file at assets/img/programme-diner.jpg — no other change needed. */
.programme-photo img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}

@media (max-width: 860px) { .programme-photo img { min-height: 240px; } }

@media (max-width: 860px) { .programme-photo { min-height: 240px; } }

/* ---- Category picker (candidature.html) ---- */

.category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}

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

.category-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.category-card__number {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-outline);
  letter-spacing: 0.05em;
}

.category-card__title {
  margin-top: 10px;
  margin-bottom: 14px;
  font-size: 24px;
}

.category-card__desc {
  color: var(--color-on-surface-variant);
  margin-bottom: 20px;
}

.category-card__block-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 10px;
  margin-top: 18px;
}

.reward-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.reward-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: rgba(196, 160, 40, 0.14);
  border: 1px solid rgba(196, 160, 40, 0.35);
  color: var(--color-on-tertiary-container);
  font-size: 13px;
  font-weight: 500;
}

.category-card__footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.category-deadline {
  font-size: 13px;
  color: var(--color-outline);
}

.category-intro-banner {
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.category-intro-banner__icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
}

/* ---- Category-specific wizard page: back link + eyebrow ---- */

.category-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-on-surface-variant);
  margin-bottom: 20px;
}

.category-back-link svg { width: 14px; height: 14px; }

.info-block {
  margin-bottom: 28px;
}

.info-block__title {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  margin-bottom: 14px;
}

/* ---- À propos page ---- */

.about-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--gutter);
  align-items: stretch;
}

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

.about-photo {
  border-radius: var(--radius-xl);
  height: 380px;
  margin-top: var(--gutter);
  overflow: hidden;
  background-color: #2b1608;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255, 224, 133, 0.3), transparent 40%),
    radial-gradient(circle at 75% 60%, rgba(0, 109, 64, 0.25), transparent 45%),
    linear-gradient(150deg, #3d2010 0%, #201005 100%);
}

/* Real photo, when present, covers the gradient fallback above.
   Drop a file at assets/img/about-gala.jpg — no other change needed. */
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.event-tag-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

.prize-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: start;
}

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

.laureate-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  background: var(--color-surface-container-lowest);
}

.laureate-card + .laureate-card { margin-top: 12px; }

.laureate-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  background: linear-gradient(150deg, var(--color-primary-container), var(--color-tertiary-container));
}

.faq-wrap {
  border: 1px dashed var(--color-outline-variant);
  border-radius: var(--radius-xl);
  padding: 48px var(--card-padding);
  background-image: radial-gradient(var(--color-outline-variant) 1px, transparent 1px);
  background-size: 16px 16px;
}

@media (max-width: 640px) { .faq-wrap { padding: 32px var(--card-padding-mobile); } }

/* ---- Candidature landing (simple form) ---- */

.candidature-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}

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

.criteria-list { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }

.criteria-item { display: flex; align-items: flex-start; gap: 12px; }

.criteria-item svg {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
  color: var(--color-secondary);
}

.upload-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }

@media (max-width: 560px) { .upload-row { grid-template-columns: 1fr; } }

/* ---- Contact page ---- */

.contact-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--gutter);
  align-items: start;
}

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

.contact-item { display: flex; gap: 16px; margin-bottom: 28px; }

.contact-item__icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
  display: flex; align-items: center; justify-content: center;
}

.contact-item__icon svg { width: 20px; height: 20px; }

.contact-item__label { color: var(--color-primary); margin-bottom: 4px; }

.map-panel {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-outline-variant);
  height: 340px;
  background-color: var(--color-surface-container-low);
  background-image:
    linear-gradient(var(--color-outline-variant) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-outline-variant) 1px, transparent 1px);
  background-size: 36px 36px;
}

.map-pin {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  max-width: 340px;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-md);
}

/* ---- Wizard (multi-step candidature) ---- */

.wizard-header {
  text-align: center;
  padding-block: 56px 0;
}

.wizard-shell {
  max-width: 700px;
  margin: 0 auto;
  padding-bottom: 96px;
}

.wizard-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--color-outline-variant);
}

.wizard-help {
  text-align: center;
  color: var(--color-outline);
  padding-bottom: 64px;
}

/* ---- Success screen ---- */

.success-shell {
  max-width: 640px;
  margin: 0 auto;
  padding-block: 72px;
  text-align: center;
}

.success-icon {
  width: 96px; height: 96px;
  border-radius: var(--radius-xl);
  background: var(--color-surface-container-highest);
  margin: 0 auto 32px;
  display: flex; align-items: center; justify-content: center;
}

.success-icon svg { width: 44px; height: 44px; color: var(--color-secondary); }

.next-steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
  text-align: left;
}

@media (max-width: 620px) { .next-steps-grid { grid-template-columns: 1fr; } }

.next-step-card {
  background: var(--color-surface-container-low);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.next-step-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.next-step-card__icon svg { width: 20px; height: 20px; }