/* Les bijoux d'Amina — palette + app shell
   Palette ported 1:1 from the design system (shared.jsx JEWEL). */
:root {
  --ivoire: #FBF4EA;
  --ivoire-deep: #F4E8D6;
  --rose: #F3A9BE;
  --rose-deep: #E58AA3;
  --lilas: #CDB8E8;
  --peche: #F6C9A8;
  --or: #C7A24B;
  --or-light: #E4C879;
  --or-deep: #A8842F;
  --cire: #9E3329;
  --cire-deep: #7C2620;
  --encre: #2B3A5B;
  --encre-soft: rgba(43, 58, 91, 0.62);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Nunito', system-ui, sans-serif;
  --script: 'Pinyon Script', cursive;

  --col: 430px; /* mobile column cap on larger screens */
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }

html, body {
  margin: 0;
  height: 100%;
  background: #ece8e1;
  font-family: var(--sans);
  color: var(--encre);
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── App shell : a single mobile column.
   On a phone it fills the viewport; on a larger screen it caps to a
   phone-sized device frame, centered — still a real navigable app. ── */
#app {
  position: relative;
  width: 100%;
  max-width: var(--col);
  height: 100dvh;
  max-height: 900px;
  margin: auto;
  background: var(--ivoire);
  overflow: hidden;
  box-shadow: 0 0 60px rgba(43, 58, 91, 0.16);
}
@media (min-height: 920px) {
  #app { border-radius: 30px; }
}

/* Each route screen fills the column; scroll happens inside. */
.screen {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.screen--fixed { overflow: hidden; } /* home: no scroll, fills height */

/* Route transition */
.screen { animation: fade .28s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Screens render full column width (design's fixed 390 → fluid). */
[data-screen] { width: 100% !important; }
[data-screen="home"] { height: 100% !important; }

.screen input:focus { border-color: var(--or) !important; }

/* ── /pub : ad creatives page (outside main nav) ── */
.pub {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #2b2b2f;
  color: #fff;
}
.pub__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  position: sticky;
  top: 0;
  background: rgba(20, 20, 22, 0.86);
  backdrop-filter: blur(6px);
  z-index: 2;
}
.pub__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 20px;
  cursor: pointer;
}
.pub__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
}
.pub__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 24px 16px 48px;
}
.pub__item { text-align: center; }
.pub__label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 10px;
}
/* Posters are fixed 1080×1920 export artboards — scale to column width. */
.pub__poster {
  width: min(360px, 86vw);
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.pub__poster > div { transform-origin: top left; }