/*
 * Babel Jam — page kakemonos
 * Design: page d’accueil mobile éditoriale, autonome et non référencée dans la navigation.
 * Scope strict: toutes les règles sont préfixées par .bj-kakemonos.
 */

.bj-kakemonos {
  --bj-deep: #171239;
  --bj-purple: #5f459c;
  --bj-coral: #f05a28;
  --bj-pink: #f7b2c7;
  --bj-cream: #fffaf3;
  min-height: 100vh;
  overflow: hidden;
  color: var(--bj-deep);
  font-family: "Open Sans", Arial, sans-serif;
  background: var(--bj-cream);
}

.bj-kakemonos *,
.bj-kakemonos *::before,
.bj-kakemonos *::after { box-sizing: border-box; }

.bj-kakemonos__hero {
  position: relative;
  overflow: hidden;
  padding: 1.35rem 1.25rem 3rem;
  color: #fff;
  background: linear-gradient(135deg, var(--bj-deep) 0%, #2c1d60 58%, #5f459c 100%);
}

.bj-kakemonos__hero::before,
.bj-kakemonos__hero::after {
  position: absolute;
  content: "";
  pointer-events: none;
  border-radius: 50%;
}

.bj-kakemonos__hero::before {
  top: 4rem;
  right: -4.5rem;
  width: 15rem;
  height: 15rem;
  background: rgba(240, 90, 40, 0.34);
  box-shadow: 0 0 0 1.35rem rgba(240, 90, 40, 0.11), 0 0 0 4rem rgba(240, 90, 40, 0.06);
}

.bj-kakemonos__hero::after {
  bottom: -6rem;
  left: -5rem;
  width: 14rem;
  height: 14rem;
  border: 1px solid rgba(247, 178, 199, 0.36);
}

.bj-kakemonos__top,
.bj-kakemonos__hero-copy,
.bj-kakemonos__content { position: relative; z-index: 1; max-width: 47rem; margin-right: auto; margin-left: auto; }

.bj-kakemonos__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bj-kakemonos__logo { display: block; width: 4.4rem; height: auto; padding: 0.42rem; background: #fff; border-radius: 0.65rem; }
.bj-kakemonos__tag { margin: 0; color: var(--bj-pink); font-family: Poppins, sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-align: right; text-transform: uppercase; }
.bj-kakemonos__hero-copy { padding-top: 4.75rem; }
.bj-kakemonos__eyebrow { margin: 0 0 0.85rem; color: var(--bj-pink); font-family: Poppins, sans-serif; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.bj-kakemonos h1 { max-width: 20rem; margin: 0; font-family: Poppins, sans-serif; font-size: clamp(2.4rem, 11vw, 4.35rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.06em; }
.bj-kakemonos h1 em { color: var(--bj-pink); font-family: Caveat, cursive; font-size: 1.15em; font-style: normal; letter-spacing: -0.025em; }
.bj-kakemonos__lead { max-width: 31rem; margin: 1.2rem 0 0; color: #eee9fa; font-size: 1.02rem; line-height: 1.7; }

.bj-kakemonos__content { padding: 1.55rem 1.25rem 2.8rem; }
.bj-kakemonos__date { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: -2.65rem; padding: 0.7rem 1rem; color: var(--bj-deep); font-family: Poppins, sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.035em; background: #fff; border-radius: 0.75rem; box-shadow: 0 0.8rem 2rem rgba(23, 18, 57, 0.13); }
.bj-kakemonos__date::before { width: 0.72rem; height: 0.72rem; content: ""; background: var(--bj-coral); border-radius: 50%; }
.bj-kakemonos__statement { margin: 2.2rem 0 1.65rem; font-family: Poppins, sans-serif; font-size: clamp(1.28rem, 4.8vw, 1.7rem); font-weight: 700; line-height: 1.22; letter-spacing: -0.035em; }
.bj-kakemonos__statement span { color: var(--bj-purple); }

.bj-kakemonos__actions { display: grid; gap: 0.8rem; }
.bj-kakemonos__action { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.7rem; padding: 0.85rem 1rem 0.85rem 1.15rem; color: var(--bj-deep); text-decoration: none; background: #fff; border: 1px solid #ebe1f0; border-radius: 0.85rem; box-shadow: 0 0.55rem 1.2rem rgba(23, 18, 57, 0.06); transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.bj-kakemonos__action:hover { box-shadow: 0 0.8rem 1.5rem rgba(23, 18, 57, 0.13); transform: translateY(-0.15rem); }
.bj-kakemonos__action:active { transform: scale(0.985); }
.bj-kakemonos__action:focus-visible { outline: 3px solid var(--bj-coral); outline-offset: 3px; }
.bj-kakemonos__action-title { display: block; font-family: Poppins, sans-serif; font-size: 1rem; font-weight: 700; line-height: 1.2; }
.bj-kakemonos__action-detail { display: block; margin-top: 0.18rem; color: #615b74; font-size: 0.78rem; line-height: 1.35; }
.bj-kakemonos__arrow { display: grid; width: 2.15rem; height: 2.15rem; flex: 0 0 auto; place-items: center; color: #fff; font-size: 1.35rem; background: var(--bj-purple); border-radius: 50%; }
.bj-kakemonos__action--coral .bj-kakemonos__arrow { background: var(--bj-coral); }
.bj-kakemonos__note { margin: 1.75rem 0 0; color: #706980; font-size: 0.76rem; line-height: 1.55; text-align: center; }

@media (min-width: 700px) {
  .bj-kakemonos__hero { padding: 1.6rem 2rem 4rem; }
  .bj-kakemonos__content { padding: 1.75rem 2rem 3.5rem; }
  .bj-kakemonos__hero-copy { padding-top: 5.5rem; }
  .bj-kakemonos__actions { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .bj-kakemonos * { transition-duration: 0.01ms !important; }
}