/* Expérience publique et portail — continuité visuelle avec l'application */

.public-site {
  color: #f8f6ff;
  background:
    linear-gradient(rgba(4, 7, 18, .18), rgba(4, 7, 18, .64)),
    radial-gradient(circle at 78% 8%, rgba(111, 77, 195, .22), transparent 30%);
}

.public-nav {
  position: sticky;
  top: 16px;
  z-index: 20;
  width: min(1160px, calc(100% - 32px));
  box-sizing: border-box;
  margin: 16px auto 0;
  padding: 12px 14px 12px 20px;
  border: 1px solid rgba(232, 189, 103, .22);
  border-radius: 20px;
  background: rgba(7, 11, 25, .78) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .26);
  backdrop-filter: blur(22px);
}

.public-brand {
  color: #f3c86e !important;
  font-family: "Cinzel", Georgia, serif;
  letter-spacing: .18em;
}

.public-brand span { filter: drop-shadow(0 0 10px rgba(243,200,110,.7)); }

.public-nav > div { display: flex; align-items: center; gap: 8px; }
.public-nav a { padding: 10px 12px; border-radius: 12px; }
.public-nav a:hover { background: rgba(255,255,255,.05); }

.public-nav-login {
  min-height: 42px;
  padding: 9px 17px;
  border: 1px solid rgba(232, 189, 103, .42);
  border-radius: 13px;
  color: #17101e;
  background: linear-gradient(110deg, #f4d58b, #c69238);
  font-weight: 750;
}

.public-site main {
  width: min(1180px, calc(100% - 36px));
  margin-inline: auto;
}

.public-hero {
  min-height: min(780px, calc(100vh - 80px));
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  align-items: center;
  gap: clamp(30px, 6vw, 86px);
  padding: 72px 20px 84px;
}

.public-hero-copy { max-width: 670px; }
.experience-kicker { color: #e8bd67; letter-spacing: .23em; font-size: .76rem; font-weight: 800; }

.public-hero h1 {
  max-width: 720px;
  margin: 14px 0 24px;
  font-size: clamp(3.2rem, 7vw, 6.8rem);
  line-height: .98;
  color: #fffaf0;
  text-shadow: 0 18px 55px rgba(0,0,0,.42);
}

.public-hero-copy > p:not(.experience-kicker) {
  max-width: 650px;
  color: #c8cce0;
  font-size: clamp(1.04rem, 2vw, 1.25rem);
  line-height: 1.75;
}

.public-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 34px; }
.public-hero-actions .primary { min-height: 52px; padding-inline: 24px; }
.public-hero-actions a { color: #ead8ff; text-underline-offset: 6px; }

.public-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 34px;
  color: #9fa8c5;
  font-size: .82rem;
}

.public-hero-card {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
}

.public-card-face {
  width: min(280px, 64vw);
  aspect-ratio: 2 / 3.25;
  border: 1px solid rgba(244, 208, 127, .75) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% 32%, rgba(173, 92, 238, .26), transparent 30%),
    linear-gradient(145deg, #11182f, #050713) !important;
  box-shadow: 0 35px 90px rgba(0,0,0,.52), 0 0 0 8px rgba(232,189,103,.04), 0 0 55px rgba(157,78,221,.18) !important;
}

.public-card-face::before,
.public-card-face::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(232,189,103,.36);
  border-radius: 17px;
}

.public-card-face::after { inset: 29px; border-color: rgba(167,85,231,.3); }
.public-card-face span { color: #f0c66f !important; font-size: 5rem !important; filter: drop-shadow(0 0 22px rgba(240,198,111,.52)); }
.public-hero-card > p { color: #c6cbe0; font-style: italic; }

.public-feature-section,
.public-oracle-callout,
.public-creator-callout {
  margin: 0 auto 34px;
  padding: clamp(30px, 5vw, 64px);
  border: 1px solid rgba(232, 189, 103, .2);
  border-radius: 32px;
  background:
    radial-gradient(circle at 92% 12%, rgba(167,85,231,.13), transparent 26%),
    linear-gradient(145deg, rgba(15,23,45,.88), rgba(6,10,23,.84));
  box-shadow: 0 30px 85px rgba(0,0,0,.28);
}

.public-feature-section > h2,
.public-oracle-callout h2,
.public-creator-callout h2 {
  max-width: 760px;
  margin: 10px 0 14px;
  color: #fffaf0;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 1.08;
}

.public-section-intro { max-width: 760px; color: #b8bfd6; line-height: 1.65; }

.public-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}

.public-feature-grid article {
  min-height: 180px;
  padding: 23px;
  border: 1px solid rgba(158,174,220,.15);
  border-radius: 20px;
  background: rgba(8,13,29,.62);
  transition: translate .22s ease, border-color .22s ease;
}

.public-feature-grid article:hover { translate: 0 -4px; border-color: rgba(232,189,103,.4); }
.public-feature-grid article > span { color: #e8bd67; font-size: 1.7rem; }
.public-feature-grid h3 { margin: 17px 0 8px; color: #fff; }
.public-feature-grid p { margin: 0; color: #aeb6ce; line-height: 1.6; }

.public-oracle-callout,
.public-creator-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 34px;
}

.public-oracle-callout p,
.public-creator-callout p { max-width: 760px; color: #b8bfd6; line-height: 1.65; }
.public-oracle-callout ul { display: grid; gap: 9px; padding-left: 20px; color: #d7d9e7; }
.public-oracle-callout .soft,
.public-creator-callout .soft { min-height: 48px; white-space: nowrap; }

.public-creator-callout { grid-template-columns: auto minmax(0, 1fr) auto; }
.public-creator-symbol { display: grid; place-items: center; width: 86px; aspect-ratio: 1; border: 1px solid rgba(232,189,103,.45); border-radius: 50%; color: #e8bd67; font-size: 2.2rem; box-shadow: 0 0 42px rgba(167,85,231,.18); }

.public-footer {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 36px 20px 46px;
  color: #8f99b7;
}
.public-footer strong { color: #e8bd67; font-family: "Cinzel", Georgia, serif; letter-spacing: .12em; }

.portal { gap: 16px; max-width: 1800px; }
.sidebar { background: linear-gradient(170deg, rgba(16,24,46,.96), rgba(5,8,19,.93)) !important; }
.logo strong { color: #f3cc79; }
.portal > main > header { border-radius: 24px !important; }
.admin-chip { border-color: rgba(232,189,103,.26); }

@media (max-width: 980px) {
  .public-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 80px; }
  .public-hero-copy { margin-inline: auto; text-align: center; }
  .public-hero-actions,
  .public-trust { justify-content: center; }
  .public-hero-card { min-height: 440px; }
}

@media (max-width: 700px) {
  .public-nav { top: 8px; width: calc(100% - 16px); margin-top: 8px; padding-left: 14px; }
  .public-nav a:not(.public-brand) { display: none; }
  .public-brand { font-size: .86rem; }
  .public-site main { width: min(100% - 20px, 1180px); }
  .public-hero { padding: 62px 8px 52px; }
  .public-hero h1 { font-size: clamp(2.7rem, 15vw, 4.4rem); }
  .public-feature-section,
  .public-oracle-callout,
  .public-creator-callout { padding: 28px 20px; border-radius: 24px; }
  .public-feature-grid { grid-template-columns: 1fr; }
  .public-oracle-callout,
  .public-creator-callout { grid-template-columns: 1fr; }
  .public-creator-symbol { width: 62px; }
  .public-footer { flex-direction: column; align-items: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .public-feature-grid article { transition: none; }
}