/* Roseval — nouvelle page d'accueil (autonome, aucune dépendance au style du site) */

.home-skip { position: fixed; top: 12px; left: 12px; z-index: 20; padding: 12px 18px; background: #e0c5ff; color: #16131e; transform: translateY(-160%); }
.home-skip:focus { transform: translateY(0); }
.roseval-page :is(a, button):focus-visible { outline: 2px solid var(--roseval-lilac); outline-offset: 5px; }
.home-footer-links { display: flex; flex-wrap: wrap; gap: 16px 24px; padding-bottom: 32px; font-size: 12px; line-height: 1.6; color: var(--roseval-soft); }
.home-footer-links button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.home-footer-links :is(a, button):hover { text-decoration: underline; text-underline-offset: 4px; }

:root {
  --background: oklch(0.14 0.008 285);
  --foreground: oklch(0.97 0.007 285);
  --primary: oklch(0.81 0.112 299);
  --primary-foreground: oklch(0.16 0.012 285);
  --muted-foreground: oklch(0.72 0.017 285);
  --roseval-line: oklch(0.36 0.017 290);
  --roseval-lilac: oklch(0.81 0.112 299);
  --roseval-soft: oklch(0.72 0.017 285);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0;
}

img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, p { margin: 0; }

.roseval-page .page-width { width: min(100% - 72px, 1200px); margin-inline: auto; }
.roseval-page em { font-style: normal; color: var(--roseval-lilac); }
.roseval-page .wordmark { font-size: 25px; line-height: 1; font-weight: 750; letter-spacing: -1.5px; white-space: nowrap; }
.roseval-page .wordmark span { color: var(--roseval-lilac); }

.site-header { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(100% - 72px, 1200px); margin: auto; border-bottom: 1px solid var(--roseval-line); position: relative; z-index: 5; }
.header-note, .eyebrow, .opening-bottom, .section-index, .image-caption, .visual-kicker, .plus-caption, .site-footer, .choice-number { font-size: 10px; font-weight: 700; letter-spacing: 1.8px; }
.header-note { color: var(--muted-foreground); font-size: 9px; }
.roseval-page .header-contact { color: var(--foreground); font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; }
.roseval-page .header-contact svg { color: var(--roseval-lilac); margin-left: 12px; width: 16px; height: 16px; }

.opening { position: relative; min-height: min(730px, 84vh); display: flex; flex-direction: column; justify-content: center; isolation: isolate; border-bottom: 1px solid var(--roseval-line); }
.opening-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--background) 28%, color-mix(in oklab, var(--background) 90%, transparent) 44%, transparent 78%), linear-gradient(0deg, var(--background), transparent 24%, transparent 75%, var(--background)); pointer-events: none; }
.opening-content { padding-top: 50px; padding-bottom: 85px; }
.eyebrow { color: var(--roseval-lilac); display: flex; align-items: center; gap: 9px; }
.signal-dot { width: 5px; height: 5px; border-radius: 50%; background: oklch(0.9 0.13 108); display: inline-block; box-shadow: 0 0 12px oklch(0.9 0.13 108 / 50%); }
.opening h1 { font-size: clamp(58px, 6.5vw, 108px); max-width: 900px; line-height: 1.02; font-weight: 650; margin: 35px 0 30px; letter-spacing: -2px; }
.opening h1 .period { color: var(--roseval-lilac); }
.opening-copy { max-width: 450px; font-size: 17px; line-height: 1.7; color: var(--muted-foreground); }
.opening-actions { display: flex; gap: 28px; align-items: center; margin-top: 36px; flex-wrap: wrap; }
.roseval-page .main-button { display: inline-flex; align-items: center; background: var(--primary); color: var(--primary-foreground); height: 48px; padding: 0 19px; font-weight: 700; border-radius: 4px; font-size: 13px; }
.roseval-page .main-button:hover { background: color-mix(in oklab, var(--primary) 88%, var(--foreground)); }
.roseval-page .main-button svg { margin-left: 12px; width: 16px; height: 16px; }
.text-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--roseval-line); padding-bottom: 6px; }
.text-link svg { width: 15px; height: 15px; color: var(--roseval-lilac); }
.opening-bottom { position: absolute; bottom: 25px; left: 0; right: 0; display: flex; justify-content: space-between; color: var(--muted-foreground); font-size: 9px; }

.marquee { border-bottom: 1px solid var(--roseval-line); overflow: hidden; color: var(--roseval-soft); }
.marquee div { white-space: nowrap; display: flex; align-items: center; justify-content: space-around; gap: 65px; min-width: 1400px; height: 62px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; }
.marquee svg { width: 19px; height: 19px; color: var(--roseval-lilac); flex: none; }

.journey-intro { padding-block: 112px 90px; display: flex; justify-content: space-between; gap: 80px; align-items: end; }
.journey-intro h2, .orientation h2 { font-size: clamp(42px, 5vw, 68px); line-height: 1.05; font-weight: 650; margin-top: 18px; letter-spacing: -1px; }
.journey-intro > p { max-width: 370px; color: var(--muted-foreground); font-size: 15px; line-height: 1.8; margin-bottom: 3px; }

.universe { border-top: 1px solid var(--roseval-line); position: relative; }
.universe-inner { min-height: 640px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 8vw, 140px); align-items: center; padding-block: 92px; }
.universe-copy { position: relative; z-index: 1; }
.section-index { display: flex; align-items: center; gap: 22px; color: var(--roseval-soft); margin-bottom: 76px; }
.index-line { display: block; width: 50px; height: 1px; background: var(--roseval-line); }
.universe h2 { font-size: clamp(48px, 5vw, 73px); line-height: 1.07; font-weight: 650; margin: 22px 0 25px; letter-spacing: -1.5px; }
.universe-copy > p:not(.eyebrow) { color: var(--muted-foreground); max-width: 445px; font-size: 16px; line-height: 1.8; }
.section-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 27px 0 42px; }
.section-tags span { border: 1px solid var(--roseval-line); color: var(--roseval-soft); font-size: 11px; padding: 8px 10px; border-radius: 3px; }

.web-visual, .kits-visual, .plus-visual { height: 460px; position: relative; min-width: 0; }
.web-visual { display: flex; align-items: center; }
.image-frame { border: 1px solid var(--roseval-line); padding: 10px 10px 38px; background: oklch(0.18 0.012 290); transform: rotate(2deg); box-shadow: 22px 28px 70px oklch(0 0 0 / 28%); width: 100%; animation: visual-float 8s ease-in-out infinite; }
.image-frame img { width: 100%; height: auto; aspect-ratio: 1.4; object-fit: cover; object-position: left center; display: block; }
.image-caption { display: block; margin: 18px 8px 0; color: var(--roseval-soft); font-size: 9px; }
.visual-number { position: absolute; right: 0; bottom: -36px; color: color-mix(in oklab, var(--roseval-lilac) 15%, transparent); font-size: 155px; font-weight: 750; line-height: 1; z-index: -1; }

.universe-kits { background: oklch(0.18 0.017 290); }
.kits-visual { display: flex; align-items: center; justify-content: center; border: 1px solid var(--roseval-line); background: radial-gradient(circle at 50% 45%, oklch(0.25 0.032 293), oklch(0.17 0.015 290) 70%); overflow: hidden; }
.kits-visual img { height: 76%; width: auto; max-width: 68%; object-fit: contain; transform: rotate(-7deg); box-shadow: 16px 24px 45px oklch(0 0 0 / 38%); animation: visual-float 8.5s ease-in-out -2.8s infinite; }
.visual-kicker { position: absolute; top: 25px; left: 25px; color: var(--roseval-soft); font-size: 9px; }
.kits-stamp { position: absolute; bottom: 22px; left: 25px; font-size: 24px; font-weight: 700; letter-spacing: -1px; }
.kits-stamp span { color: var(--roseval-lilac); }
.kits-visual .visual-number { right: 15px; bottom: -10px; }

.plus-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: repeating-linear-gradient(0deg, transparent 0 26px, color-mix(in oklab, var(--roseval-line) 30%, transparent) 27px 28px); border-top: 1px solid var(--roseval-line); border-bottom: 1px solid var(--roseval-line); }
.orbit { position: absolute; border: 1px solid var(--roseval-line); border-radius: 50%; width: 420px; aspect-ratio: 1; opacity: .5; }
.orbit-two { width: 570px; }
.plus-mark { position: relative; font-size: clamp(60px, 7vw, 100px); letter-spacing: -5px; font-weight: 750; color: var(--roseval-lilac); text-shadow: 5px 5px 0 oklch(0.39 0.13 295); animation: visual-float 9s ease-in-out -4.5s infinite; }
.plus-mark span { color: var(--foreground); }
.plus-caption { position: absolute; bottom: 33px; display: flex; align-items: center; gap: 13px; color: var(--roseval-soft); font-size: 9px; }
.plus-caption svg { width: 12px; height: 12px; color: var(--roseval-lilac); }
.plus-visual .visual-number { right: 14px; bottom: -22px; }

.orientation { background: oklch(0.19 0.015 289); border-top: 1px solid var(--roseval-line); padding: 110px 0 120px; }
.orientation .page-width { display: grid; grid-template-columns: .9fr 1.1fr; gap: 9vw; }
.choice-list { border-top: 1px solid var(--roseval-line); }
.choice-list a { display: grid; grid-template-columns: 38px 1fr 22px; align-items: center; gap: 13px; min-height: 93px; border-bottom: 1px solid var(--roseval-line); font-size: 20px; font-weight: 600; transition: color .2s, padding .2s; }
.choice-list a:hover { color: var(--roseval-lilac); padding-left: 10px; }
.choice-list svg { width: 20px; height: 20px; color: var(--roseval-lilac); }
.choice-number { color: var(--roseval-soft); font-size: 10px; }

.closing { text-align: center; padding: 145px 0 155px; border-bottom: 1px solid var(--roseval-line); }
.closing .eyebrow { justify-content: center; }
.closing h2 { font-size: clamp(56px, 7vw, 96px); line-height: 1.08; font-weight: 650; margin: 30px 0 40px; letter-spacing: -2px; }

.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 125px; color: var(--roseval-soft); }
.site-footer > a:last-child { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 500; letter-spacing: 0; }
.site-footer svg { width: 15px; height: 15px; color: var(--roseval-lilac); }

/* Cartes du hero */
.opening-art { position: absolute; z-index: -2; inset: 6% max(36px, calc((100vw - 1200px)/2)) 10% 56%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 12px; transform: perspective(1100px) rotateY(-8deg); }
.opening-art-item { height: 58%; min-height: 280px; border: 1px solid var(--roseval-line); border-radius: 7px; background: oklch(0.2 0.019 289); display: flex; flex-direction: column; justify-content: space-between; padding: 14px 8px 25px; box-shadow: 10px 18px 35px oklch(0 0 0 / 20%); animation: card-float 7s ease-in-out infinite; }
.opening-art-item:nth-child(2) { translate: 0 45px; animation-delay: -2.3s; animation-duration: 8s; }
.opening-art-item:nth-child(3) { translate: 0 -24px; animation-delay: -4.6s; animation-duration: 9s; }
@keyframes card-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes visual-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.opening-art-item span { color: var(--roseval-soft); font-size: 8px; font-weight: 700; letter-spacing: 1.2px; padding-left: 9px; }
.opening-art-item img { display: block; width: 100%; aspect-ratio: 1.4; object-fit: contain; }

@media (max-width: 800px) {
  .roseval-page .page-width, .site-header { width: min(100% - 40px, 1200px); }
  .header-note { display: none; }
  .site-header { height: 68px; }
  .opening { min-height: 690px; justify-content: flex-start; }
  .opening-shade { display: none; }
  .opening h1 { font-size: clamp(52px, 10vw, 76px); letter-spacing: -1px; }
  .opening-bottom span:first-child { display: none; }
  .opening-art { position: relative; z-index: 0; inset: auto; width: min(100% - 40px, 650px); height: 145px; margin: 20px auto 0; transform: none; gap: 7px; flex: none; }
  .opening-art-item { height: 116px; min-height: 0; padding: 8px 4px; }
  .opening-art-item:nth-child(2) { translate: 0 16px; }
  .opening-art-item:nth-child(3) { translate: 0 -8px; }
  .opening-art-item span { font-size: 6px; letter-spacing: 0; }
  .opening-art-item img { aspect-ratio: 1.5; }
  .opening-content { padding-top: 0; }
  .journey-intro, .orientation .page-width { display: block; }
  .journey-intro { padding-block: 85px 75px; }
  .journey-intro > p { margin-top: 25px; }
  .universe-inner { grid-template-columns: 1fr; gap: 50px; padding-block: 70px 85px; }
  .section-index { margin-bottom: 55px; }
  .web-visual { height: auto; min-height: 0; padding: 12px 8px 28px; }
  .image-frame { transform: none; animation: none; }
  .web-visual .visual-number { bottom: 0; }
  .kits-visual, .plus-visual { height: min(70vw, 470px); min-height: 320px; }
  .orientation { padding: 85px 0 100px; }
  .orientation-heading { margin-bottom: 42px; }
}

@media (max-width: 520px) {
  .roseval-page .page-width, .site-header { width: calc(100% - 36px); }
  .roseval-page .wordmark { font-size: 22px; }
  .roseval-page .header-contact { font-size: 11px; }
  .roseval-page .header-contact svg { margin-left: 0; }
  .opening { min-height: 745px; }
  .opening-art { width: calc(100% - 36px); height: 135px; margin-top: 22px; }
  .opening-art-item { height: 107px; }
  .opening-content { padding-top: 0; }
  .opening h1 { font-size: clamp(47px, 11vw, 60px); margin: 30px 0 24px; margin-top: 18px; }
  .opening-copy { font-size: 15px; }
  .opening-actions { gap: 22px; align-items: start; flex-direction: column; }
  .opening-bottom { bottom: 20px; }
  .journey-intro h2, .orientation h2 { font-size: 46px; }
  .universe h2 { font-size: clamp(45px, 10vw, 56px); }
  .universe-copy > p:not(.eyebrow) { font-size: 15px; }
  .section-index { margin-bottom: 48px; }
  .kits-visual, .plus-visual { min-height: 280px; height: 75vw; }
  .visual-number { font-size: 100px; }
  .plus-mark { font-size: 62px; letter-spacing: -3px; }
  .plus-caption { gap: 6px; font-size: 7px; }
  .choice-list a { font-size: 16px; min-height: 85px; grid-template-columns: 28px 1fr 19px; }
  .closing { padding: 105px 0 115px; }
  .closing h2 { font-size: 53px; }
  .site-footer { flex-wrap: wrap; padding-block: 35px; gap: 20px; }
  .site-footer > span { order: 3; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .choice-list a { transition: none; }
  .opening-art-item, .image-frame, .kits-visual img, .plus-mark { animation: none; }
}

/* A short, optional introduction; the homepage stays available without JavaScript. */