/* Paris T’aime V2 — univers-detail.css
   Page univers-detail : charge les composants univers.
   Règle couleur : bleu nuit + rouge profond, jamais halo gris/blanc.
*/

@import url("components/pt-univers-hero.css");
@import url("components/pt-univers-story.css");
@import url("components/pt-univers-video-rail.css");

.pt-univers-detail {
  --pt-univers-red: #661919;
  --pt-univers-red-hover: #7a2020;
  --pt-univers-bg: #05070c;
  --pt-univers-bg-2: #080d16;
  --pt-univers-bg-3: #0b1220;
  --pt-univers-text: #f4eee1;
  --pt-univers-muted: rgba(244, 238, 225, .62);
  --pt-univers-line: rgba(242, 235, 221, .13);
  --pt-univers-radius: 3px;

  min-height: 100vh;
  overflow-x: hidden;
  color: var(--pt-univers-text);
  background:
    radial-gradient(circle at 12% 0%, rgba(102, 25, 25, .18), transparent 28rem),
    linear-gradient(180deg, #05070c 0%, #080d16 48%, #05070c 100%);
}

.pt-univers-detail *,
.pt-univers-detail *::before,
.pt-univers-detail *::after {
  box-sizing: border-box;
}

.pt-univers-detail a {
  color: inherit;
  text-decoration: none;
}

.pt-univers-detail img {
  display: block;
  max-width: 100%;
}

.pt-univers-detail__missing {
  width: min(1480px, calc(100% - clamp(32px, 7vw, 116px)));
  min-height: 70vh;
  display: grid;
  align-content: center;
  gap: 18px;
  margin: 0 auto;
  padding: 90px 0;
}

.pt-univers-detail__missing h1 {
  max-width: 840px;
  margin: 0;
  color: var(--pt-univers-text);
  font-family: var(--pt-serif, Georgia, serif);
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: .9;
  letter-spacing: -.07em;
}

.pt-univers-detail__eyebrow {
  margin: 0;
  color: var(--pt-univers-red);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Page univers — vitrine partageable / backlink / action sociale */
.pt-univers-detail__vitrine {
  width: min(1480px, calc(100% - clamp(32px, 7vw, 116px)));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
  gap: clamp(22px, 4vw, 58px);
  align-items: stretch;
  margin: 0 auto clamp(82px, 10vw, 140px);
  padding: clamp(28px, 4.4vw, 58px);
  border: 1px solid var(--pt-univers-line);
  border-radius: 3px;
  background:
    radial-gradient(circle at 0% 0%, rgba(102, 25, 25, .18), transparent 24rem),
    linear-gradient(145deg, rgba(8, 13, 22, .96), rgba(3, 4, 6, .98));
}

.pt-univers-detail__vitrine-copy {
  display: grid;
  align-content: center;
  gap: 18px;
  min-width: 0;
}

.pt-univers-detail__vitrine-copy h2 {
  max-width: 920px;
  margin: 0;
  color: var(--pt-univers-text);
  font-family: var(--pt-serif, Georgia, serif);
  font-size: clamp(2.5rem, 5.4vw, 6.3rem);
  font-weight: 850;
  letter-spacing: -.06em;
  line-height: .9;
}

.pt-univers-detail__vitrine-copy p {
  max-width: 760px;
  margin: 0;
  color: var(--pt-univers-muted);
  font-family: var(--pt-sans, Inter, system-ui, sans-serif);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.72;
}

.pt-univers-detail__vitrine-card {
  display: grid;
  gap: 18px;
  align-content: start;
  min-width: 0;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid rgba(242, 235, 221, .13);
  border-radius: 3px;
  background: rgba(3, 4, 6, .58);
}

.pt-univers-detail__vitrine-card dl {
  display: grid;
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(242, 235, 221, .10);
  border-radius: 3px;
  background: rgba(242, 235, 221, .08);
}

.pt-univers-detail__vitrine-card dl div {
  display: grid;
  grid-template-columns: minmax(110px, .48fr) minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px;
  background: rgba(5, 10, 17, .94);
}

.pt-univers-detail__vitrine-card dt {
  color: rgba(244, 238, 225, .46);
  font-family: var(--pt-sans, Inter, system-ui, sans-serif);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pt-univers-detail__vitrine-card dd {
  min-width: 0;
  margin: 0;
  color: var(--pt-univers-text);
  font-family: var(--pt-sans, Inter, system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.45;
}

.pt-univers-detail__share-url {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(242, 235, 221, .11);
  border-radius: 3px;
  background: rgba(255, 246, 230, .035);
}

.pt-univers-detail__share-url span {
  color: rgba(244, 238, 225, .46);
  font-family: var(--pt-sans, Inter, system-ui, sans-serif);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pt-univers-detail__share-url code {
  min-width: 0;
  display: block;
  overflow-wrap: anywhere;
  color: rgba(244, 238, 225, .72);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
}

.pt-univers-detail__vitrine-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pt-univers-detail__vitrine-actions a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  border: 1px solid rgba(242, 235, 221, .14);
  border-radius: 3px;
  background: rgba(102, 25, 25, .72);
  color: var(--pt-univers-text);
  font-family: var(--pt-sans, Inter, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.pt-univers-detail__vitrine-actions a:nth-child(n+2) {
  background: transparent;
}

.pt-univers-detail__vitrine-actions a:hover {
  transform: translateY(-1px);
  border-color: rgba(242, 235, 221, .26);
  background: rgba(122, 32, 32, .82);
}

@media (max-width: 920px) {
  .pt-univers-detail__vitrine {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .pt-univers-detail__vitrine {
    width: min(100% - 22px, 1480px);
    padding: 20px;
    margin-bottom: 76px;
  }

  .pt-univers-detail__vitrine-card dl div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .pt-univers-detail__vitrine-actions a {
    width: 100%;
  }
}