/* DreamShared visitor surfaces. The selectors stay under .grain so the
   authenticated app keeps its own design system. */

.grain {
  --visit-night: oklch(0.135 0.035 286);
  --visit-plum: oklch(0.185 0.055 305);
  --visit-raised: oklch(0.225 0.052 303);
  --visit-ink: oklch(0.94 0.018 318);
  --visit-dim: oklch(0.76 0.035 302);
  --visit-moon: oklch(0.9 0.055 322);
  --visit-iris: oklch(0.72 0.13 316);
  --visit-sky: oklch(0.74 0.09 245);
  --visit-coral: oklch(0.72 0.12 22);
  --visit-line: oklch(0.72 0.09 316 / 0.2);
  --visit-line-soft: oklch(0.88 0.035 318 / 0.1);
  --visit-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --visit-shadow: 0 26px 70px -38px oklch(0.04 0.04 290 / 0.9);

  --night-0: var(--visit-night);
  --night-1: oklch(0.155 0.043 291);
  --night-2: var(--visit-plum);
  --night-3: var(--visit-raised);
  --cream: var(--visit-ink);
  --cream-dim: var(--visit-dim);
  --gold: var(--visit-iris);
  --gold-2: var(--visit-moon);
  --line: var(--visit-line-soft);

  position: relative;
  min-height: 100svh;
  isolation: isolate;
  color: var(--visit-ink);
  background:
    radial-gradient(65% 52% at 92% -4%, oklch(0.56 0.16 315 / 0.18), transparent 70%),
    radial-gradient(48% 42% at 4% 94%, oklch(0.55 0.14 245 / 0.14), transparent 72%),
    var(--visit-night);
}

.grain::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    radial-gradient(circle at 14% 18%, oklch(0.92 0.04 320 / 0.55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 12%, oklch(0.78 0.1 245 / 0.45) 0 1px, transparent 1.5px),
    radial-gradient(circle at 62% 76%, oklch(0.88 0.07 325 / 0.35) 0 1px, transparent 1.5px);
  background-size: 190px 190px, 270px 270px, 330px 330px;
}

.grain :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--visit-sky);
  outline-offset: 4px;
  border-radius: 8px;
}

.grain .side {
  border-right-color: var(--visit-line-soft);
  background:
    radial-gradient(110% 32% at 20% 0%, oklch(0.54 0.12 316 / 0.12), transparent 72%),
    linear-gradient(180deg, oklch(0.165 0.046 294), var(--visit-night));
  box-shadow: 18px 0 70px -54px oklch(0.68 0.13 315 / 0.5);
}

.grain .side .brand {
  min-height: 48px;
  padding: 4px 8px 12px;
}

.grain .side .brand img {
  filter: drop-shadow(0 8px 18px oklch(0.72 0.13 316 / 0.22));
}

.grain .side .grp {
  color: oklch(0.68 0.045 305);
  font-weight: 750;
  letter-spacing: 0.22em;
}

.grain .nav-i {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms var(--visit-ease);
}

.grain .nav-i svg {
  color: var(--visit-iris);
  opacity: 0.9;
}

.grain .nav-i.active {
  color: var(--visit-ink);
  border-color: var(--visit-line);
  background:
    linear-gradient(100deg, oklch(0.61 0.15 316 / 0.22), oklch(0.61 0.15 316 / 0.05));
  box-shadow:
    inset 0 1px 0 oklch(0.94 0.04 320 / 0.08),
    0 12px 34px -24px oklch(0.72 0.13 316 / 0.75);
}

.grain .nav-i.active::before {
  left: -19px;
  width: 4px;
  height: 28px;
  border-radius: 0 5px 5px 0;
  background: linear-gradient(var(--visit-sky), var(--visit-iris));
  box-shadow: 0 0 16px oklch(0.72 0.13 316 / 0.72);
}

.grain .topbar {
  border-bottom-color: var(--visit-line-soft);
  background: oklch(0.135 0.035 286 / 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
}

.grain :is(.panel, .side-card) {
  border-color: var(--visit-line-soft);
  background:
    linear-gradient(150deg, oklch(0.3 0.07 310 / 0.25), transparent 46%),
    oklch(0.19 0.045 294 / 0.72);
  box-shadow: var(--visit-shadow);
}

.grain .btn {
  position: relative;
  isolation: isolate;
  min-height: 46px;
  padding: 12px 22px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 16px;
  text-transform: none;
  letter-spacing: 0.025em;
  font-weight: 750;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 180ms var(--visit-ease),
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 220ms var(--visit-ease);
}

.grain .btn-gold {
  color: oklch(0.2 0.055 310);
  border-color: oklch(0.94 0.04 320 / 0.32);
  background:
    linear-gradient(135deg, var(--visit-moon), oklch(0.76 0.12 321) 58%, oklch(0.7 0.13 308));
  box-shadow:
    inset 0 1px 0 oklch(0.98 0.02 320 / 0.62),
    0 18px 42px -22px oklch(0.72 0.13 316 / 0.95);
}

.grain .btn-gold::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border: 1px solid oklch(0.99 0.01 320 / 0.18);
  border-radius: 14px;
  pointer-events: none;
}

.grain .btn-gold::after {
  content: "";
  position: absolute;
  top: -55%;
  left: -28%;
  width: 28%;
  height: 210%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, oklch(0.99 0.01 320 / 0.5), transparent);
  transform: translateX(-150%) rotate(18deg);
  transition: transform 240ms var(--visit-ease);
}

.grain .btn-ghost {
  color: var(--visit-moon);
  border-color: var(--visit-line);
  background: oklch(0.32 0.065 312 / 0.18);
  box-shadow: inset 0 1px 0 oklch(0.94 0.04 320 / 0.05);
}

.grain .btn-soft {
  color: var(--visit-ink);
  border-color: var(--visit-line-soft);
  border-radius: 13px;
  background: oklch(0.88 0.025 305 / 0.07);
}

.grain .btn-wa {
  color: oklch(0.92 0.035 155);
  border-color: oklch(0.72 0.12 155 / 0.36);
  background: oklch(0.52 0.13 155 / 0.18);
}

.grain :is(.iconbtn, .who-chip) {
  border-color: var(--visit-line-soft);
  background: oklch(0.88 0.025 305 / 0.055);
  box-shadow: inset 0 1px 0 oklch(0.94 0.04 320 / 0.055);
  transition:
    transform 160ms var(--visit-ease),
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms var(--visit-ease);
}

.grain .iconbtn {
  width: 44px;
  height: 44px;
}

.grain :is(.chip, .pill) {
  border-color: var(--visit-line-soft);
  background: oklch(0.88 0.025 305 / 0.045);
  transition:
    transform 160ms var(--visit-ease),
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

.grain .chip.on {
  color: oklch(0.2 0.055 310);
  border-color: transparent;
  background: linear-gradient(135deg, var(--visit-moon), var(--visit-iris));
  box-shadow: 0 12px 30px -22px oklch(0.72 0.13 316 / 0.9);
}

.grain .fab {
  min-height: 52px;
  border-radius: 18px 18px 18px 7px;
  border: 1px solid oklch(0.94 0.04 320 / 0.3);
  color: oklch(0.2 0.055 310);
  background: linear-gradient(135deg, var(--visit-moon), var(--visit-iris));
  box-shadow: 0 22px 54px -24px oklch(0.72 0.13 316 / 0.95);
  transition:
    transform 180ms var(--visit-ease),
    box-shadow 220ms var(--visit-ease);
}

.grain :is(.search, .seg, input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  border-color: var(--visit-line-soft);
}

.grain .search {
  background: oklch(0.88 0.025 305 / 0.055);
  box-shadow: inset 0 1px 0 oklch(0.94 0.04 320 / 0.045);
}

.grain .foot-brand .social a {
  border-color: var(--visit-line);
  background: oklch(0.88 0.025 305 / 0.05);
  transition:
    transform 180ms var(--visit-ease),
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .grain .nav-i:hover {
    color: var(--visit-ink);
    border-color: var(--visit-line-soft);
    background: oklch(0.88 0.025 305 / 0.06);
    transform: translateX(2px);
  }

  .grain .btn-gold:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 oklch(0.98 0.02 320 / 0.68),
      0 24px 50px -22px oklch(0.72 0.13 316 / 1);
  }

  .grain .btn-gold:hover::after {
    transform: translateX(620%) rotate(18deg);
  }

  .grain .btn-ghost:hover {
    color: var(--visit-ink);
    border-color: oklch(0.75 0.12 316 / 0.52);
    background: oklch(0.5 0.1 313 / 0.18);
    transform: translateY(-1px);
  }

  .grain .btn-soft:hover {
    border-color: oklch(0.74 0.09 245 / 0.4);
    background: oklch(0.74 0.09 245 / 0.1);
  }

  .grain :is(.iconbtn, .who-chip):hover {
    color: var(--visit-moon);
    border-color: var(--visit-line);
    background: oklch(0.54 0.1 313 / 0.16);
    box-shadow: 0 12px 28px -22px oklch(0.72 0.13 316 / 0.9);
  }

  .grain :is(.chip, .pill):hover {
    color: var(--visit-ink);
    border-color: var(--visit-line);
    background: oklch(0.54 0.1 313 / 0.12);
    transform: translateY(-1px);
  }

  .grain .fab:hover {
    transform: translateY(-3px);
    box-shadow: 0 28px 64px -24px oklch(0.72 0.13 316 / 1);
  }

  .grain .foot-brand .social a:hover {
    color: var(--visit-ink);
    border-color: var(--visit-line);
    background: oklch(0.54 0.1 313 / 0.17);
    transform: translateY(-2px);
  }
}

.grain :is(.btn, .iconbtn, .who-chip, .chip, .fab):active {
  transform: scale(0.97);
}

@media (max-width: 720px) {
  .grain .btn {
    min-height: 48px;
    padding-inline: 19px;
  }

  .grain :is(.contact-actions, .prod-cta, .cta-row) .btn {
    width: 100%;
  }

  .grain .fab {
    min-height: 50px;
    right: 14px;
    bottom: calc(78px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .grain *,
  .grain *::before,
  .grain *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* Documents DreamShared : cadre nocturne, lecture sur papier. */
.dream-legal {
  width:min(860px,calc(100% - 48px));
  margin:0 auto;
  padding:40px 0 120px;
  color:#f6eee2;
  min-height:100svh;
}

.dream-legal-head {
  display:flex;
  align-items:flex-start;
  gap:24px;
  margin:36px 0 24px;
}

.dream-legal-mark {
  flex:0 0 56px;
  padding-top:4px;
}

.dream-legal-mark img {
  display:block;
  width:56px;
  height:auto;
}

.dream-legal-kicker {
  margin:0 0 12px;
  color:#e8c894;
  font:25px Georgia,serif;
  text-transform:none;
  letter-spacing:0;
}

.dream-legal-head h1 {
  margin:0;
  max-width:650px;
  color:#fff4e4;
  font:400 clamp(28px,4vw,40px)/1.16 Georgia,serif;
  letter-spacing:-.7px;
}

.dream-legal-date {
  margin:16px 0 0;
  color:#b8a9c3;
  font-size:13px;
}

.dream-legal-intro {
  max-width:690px;
  margin:0 0 28px;
  font-size:16px;
  line-height:1.75;
  color:#d0c4d9;
}

.dream-legal-nav {
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  padding:12px 0 24px;
}

.dream-legal-nav a {
  color:#e8c894;
  font-size:13px;
  line-height:24px;
  text-underline-offset:5px;
  padding:8px 0;
}

.dream-legal .ldoc {
  width:100%;
  margin:0;
  padding:44px 54px;
  background:#fffaf2;
  border-top:3px solid #d3b685;
  border-radius:3px;
  color:#43384b;
  overflow-wrap:anywhere;
}

.dream-legal .ldoc h2 {
  margin:38px 0 16px;
  padding-top:24px;
  border-top:1px solid #e3d9cd;
  color:#382841;
  font:400 25px/1.3 Georgia,serif;
  scroll-margin-top:24px;
}

.dream-legal .ldoc h2:first-child {
  margin-top:0;
  padding-top:0;
  border:0;
}

.dream-legal .ldoc h3 {
  margin:26px 0 12px;
  font-size:18px;
  color:#382841;
}

.dream-legal .ldoc :is(p,ul,ol) {
  margin:0 0 18px;
  font-size:16px;
  line-height:1.8;
  color:#514757;
}

.dream-legal .ldoc :is(ul,ol) {
  padding-left:22px;
}

.dream-legal .ldoc ul {
  list-style:disc;
}

.dream-legal .ldoc ol {
  list-style:decimal;
}

.dream-legal .ldoc li {
  margin:9px 0;
  padding-left:3px;
}

.dream-legal .ldoc :is(b,strong) {
  color:#382841;
  font-weight:600;
}

.dream-legal .ldoc a {
  display:inline;
  min-height:0;
  color:#6b416b;
  text-decoration:underline;
  text-underline-offset:3px;
}

.dream-legal .ldoc .legal-identity {
  font-size:13px;
  line-height:1.75;
  color:#766a79;
  padding:16px 20px;
  border-left:2px solid #d3b685;
  background:#f3ede5;
}

.dream-legal .ldoc table {
  display:block;
  max-width:100%;
  overflow-x:auto;
}

.dream-legal-end {
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:28px;
  color:#e8c894;
  font-size:14px;
}

.dream-legal-end a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:inherit;
  text-underline-offset:4px;
}

.dream-legal a:focus-visible {
  outline:2px solid #b99057;
  outline-offset:5px;
}

@media(max-width:620px) {
  .dream-legal {
    width:calc(100% - 28px);
    padding-top:20px;
  }

  .dream-legal-head {
    gap:16px;
    margin-top:24px;
  }

  .dream-legal-mark {
    flex-basis:40px;
  }

  .dream-legal-mark img {
    width:40px;
  }

  .dream-legal-kicker {
    font-size:23px;
  }

  .dream-legal .ldoc {
    padding:28px 22px;
  }

  .dream-legal .ldoc h2 {
    font-size:23px;
  }

  .dream-legal .ldoc :is(p,ul,ol) {
    font-size:15px;
    line-height:1.8;
  }

  .dream-legal .ldoc .legal-identity {
    font-size:13px;
    padding:12px 14px;
  }

  .dream-legal-nav {
    gap:6px 18px;
  }

}