/* Psychomantic Landing Page — Thème Pastelo v2.0 */

:root {
  /* Pastelo palette */
  --pastel-orange-bg: #FFEDD5;
  --pastel-jaune-bg: #FEF9C3;
  --pastel-rose-bg: #FCE7F3;
  --pastel-violet-bg: #F2E7FF;
  --pastel-bleu-bg: #E0F2FE;
  --pastel-vert-bg: #DCFCE7;
  --pastel-rouge-bg: #FEE2E2;

  --pastel-orange-med: #FFD6A5;
  --pastel-jaune-med: #FDE68A;
  --pastel-rose-med: #FBCFE8;
  --pastel-violet-med: #DDD6FE;
  --pastel-bleu-med: #BAE6FD;
  --pastel-vert-med: #BBF7D0;
  --pastel-rouge-med: #FCA5A5;

  --pastel-violet-max: #BEABFA;
  --pastel-rose-max: #F999A8;
  --pastel-bleu-max: #70CEF9;
  --pastel-vert-max: #7DE5A5;
  --pastel-jaune-max: #F8D95A;
  --pastel-orange-max: #F9B075;

  --pastel-text-main: #1E293B;
  --pastel-text-muted: #64748B;
}

html {
  scroll-behavior: smooth;
}

body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Bande arc-en-ciel pastelo en haut */
.rainbow-stripe {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 100;
  background: repeating-linear-gradient(
    90deg,
    var(--pastel-rose-bg) 0px,
    var(--pastel-rose-bg) 60px,
    var(--pastel-violet-bg) 60px,
    var(--pastel-violet-bg) 120px,
    var(--pastel-bleu-bg) 120px,
    var(--pastel-bleu-bg) 180px,
    var(--pastel-vert-bg) 180px,
    var(--pastel-vert-bg) 240px,
    var(--pastel-orange-bg) 240px,
    var(--pastel-orange-bg) 300px,
    var(--pastel-jaune-bg) 300px,
    var(--pastel-jaune-bg) 360px
  );
}

/* Blobs pastel floutés */
.blob {
  position: absolute;
  border-radius: 3px;
  filter: blur(100px);
  opacity: 0.35;
  pointer-events: none;
}

.blob-violet {
  top: 80px;
  left: 5%;
  width: 400px;
  height: 400px;
  background-color: var(--pastel-violet-bg);
}

.blob-rose {
  top: 200px;
  right: 5%;
  width: 350px;
  height: 350px;
  background-color: var(--pastel-rose-bg);
}

.blob-bleu {
  bottom: 15%;
  left: 25%;
  width: 450px;
  height: 450px;
  background-color: var(--pastel-bleu-bg);
}

.blob-vert {
  bottom: 25%;
  right: 20%;
  width: 300px;
  height: 300px;
  background-color: var(--pastel-vert-bg);
}

.blob-jaune {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background-color: var(--pastel-jaune-bg);
  opacity: 0.2;
}

/* Cartes pastelo */
.pastel-card {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  border-radius: 3px;
  background-color: var(--card-bg, #F2E7FF);
  border: 1px solid var(--card-border, #DDD6FE);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pastel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px -10px rgba(30, 41, 59, 0.1);
}

/* Icônes orbitales */
.icon-orbit {
  width: 48px;
  height: 48px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  background-color: var(--icon-bg, #DDD6FE);
  border: 1px solid var(--icon-border, #BEABFA);
  color: var(--icon-color, #1E293B);
}

/* FAQ details pastelo */
.pastel-details {
  background-color: var(--details-bg, #FFFFFF);
  border: 1px solid var(--details-border, #DDD6FE);
  border-radius: 3px;
  overflow: hidden;
}

.pastel-details summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 1.5rem;
  font-weight: 700;
  color: var(--pastel-text-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.pastel-details summary::-webkit-details-marker {
  display: none;
}

.pastel-details summary::after {
  content: "▼";
  color: var(--pastel-violet-max);
  font-size: 0.875rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.pastel-details[open] summary::after {
  transform: rotate(180deg);
}

.pastel-details > div {
  padding: 0 1.5rem 1.25rem;
  color: var(--pastel-text-muted);
  line-height: 1.6;
}

/* Focus visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--pastel-violet-max);
  outline-offset: 2px;
}

/* Typographie */
h1, h2, h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Réduction des animations */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .blob {
    opacity: 0.2;
    filter: blur(60px);
  }
}