:root {
  --impro-ink: #17141f;
  --impro-muted: #70687d;
  --impro-paper: #f6f2f8;
  --impro-soft: #ebe4f2;
  --impro-coral: #ff5f7e;
  --impro-teal: #18a6a6;
  --impro-gold: #d9a441;
  --impro-plum: #4c245f;
  --impro-mauve: #8f5cc2;
  --impro-violet: #6d3bff;
  --impro-night: #14111b;
  --impro-line: rgba(23, 20, 31, .14);
}

body {
  background:
    radial-gradient(circle at 12% 8%, rgba(143, 92, 194, .22), transparent 24rem),
    radial-gradient(circle at 90% 18%, rgba(109, 59, 255, .16), transparent 22rem),
    linear-gradient(90deg, rgba(23,20,31,.05) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(0deg, rgba(23,20,31,.035) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--impro-paper);
  color: var(--impro-ink);
  font-family: "Inter", "Montserrat", "Avenir Next", "Segoe UI", Arial, sans-serif;
}

#header {
  backdrop-filter: blur(14px);
  background: rgba(20, 17, 27, .9);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

#header p a,
#nav a {
  letter-spacing: 0;
}

#banner {
  animation: improGradientDrift 18s ease-in-out infinite alternate;
  background:
    radial-gradient(circle at 22% 20%, rgba(143,92,194,.5), transparent 19rem),
    radial-gradient(circle at 80% 18%, rgba(109,59,255,.38), transparent 20rem),
    linear-gradient(120deg, rgba(20,17,27,.3), rgba(76,36,95,.58), rgba(20,17,27,.82)),
    url("../../IMG/jpg/masque.jpg") center / cover no-repeat;
  background-size: 130% 130%, 130% 130%, 220% 220%, cover;
  min-height: 72vh;
  overflow: hidden;
  position: relative;
}

#banner::before,
#banner::after {
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  content: "";
  position: absolute;
  transform: rotate(-18deg);
}

#banner::before {
  height: 320px;
  left: -110px;
  top: 18%;
  width: 520px;
}

#banner::after {
  bottom: 8%;
  height: 180px;
  right: -70px;
  width: 300px;
}

#banner .inner {
  max-width: 940px;
}

#banner h1,
article#main header.main h1 {
  letter-spacing: 0;
  text-transform: none;
}

#banner h1 {
  font-size: clamp(2.4rem, 5vw, 5.2rem);
  font-weight: 850;
  line-height: 1.02;
  text-shadow: 0 8px 34px rgba(0,0,0,.34);
}

#suite .spotlight {
  animation: improGradientDrift 20s ease-in-out infinite alternate;
  background: linear-gradient(135deg, rgba(20,17,27,.98), rgba(76,36,95,.94), rgba(31,27,37,.98));
  background-size: 220% 220%;
  position: relative;
}

#suite .spotlight::before {
  animation: improColorRun 9s linear infinite;
  background: linear-gradient(90deg, var(--impro-violet), var(--impro-mauve), var(--impro-coral), var(--impro-teal));
  background-size: 220% 100%;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

#suite .spotlight .content {
  padding: 4rem 4.5rem;
}

#suite .spotlight h2 {
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.8rem);
  letter-spacing: 0;
  text-transform: none;
}

#suite .spotlight p {
  color: rgba(255,255,255,.82);
  font-size: 1.05rem;
}

#suite .spotlight a {
  border-bottom-color: rgba(255,255,255,.35);
}

.wrapper.style5 {
  background: transparent;
}

.wrapper.style5 > .inner {
  max-width: 1080px;
}

article#main header.main {
  animation: improGradientDrift 18s ease-in-out infinite alternate;
  background:
    radial-gradient(circle at 20% 18%, rgba(143,92,194,.46), transparent 18rem),
    radial-gradient(circle at 82% 38%, rgba(109,59,255,.28), transparent 19rem),
    linear-gradient(135deg, rgba(20,17,27,.38), rgba(76,36,95,.82), rgba(143,92,194,.62)),
    url("../../IMG/jpg/masque.jpg") center / cover no-repeat;
  background-size: 130% 130%, 130% 130%, 220% 220%, cover;
  overflow: hidden;
  padding: 7.5rem 2rem 5.5rem;
  position: relative;
}

article#main header.main::before {
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 45% 55% 60% 40%;
  content: "";
  height: 260px;
  left: 8%;
  position: absolute;
  top: 5.5rem;
  transform: rotate(18deg);
  width: 260px;
}

article#main header.main h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  font-weight: 850;
  margin: 0 auto;
  max-width: 980px;
  text-shadow: 0 3px 22px rgba(0,0,0,.22);
}

article#main .arbo {
  color: rgba(255,255,255,.84);
  margin-top: 1.25rem;
}

article#main .arbo a {
  color: #fff;
}

.texte {
  font-size: 1.04rem;
  line-height: 1.75;
}

.texte h2.spip {
  color: var(--impro-ink);
  font-size: clamp(1.55rem, 2.7vw, 2.35rem);
  font-weight: 820;
  letter-spacing: 0;
  margin: 3.2rem 0 1.1rem;
  position: relative;
  text-transform: none;
}

.texte h2.spip:first-child {
  margin-top: 0;
}

.texte h2.spip::after {
  animation: improColorRun 10s linear infinite;
  background: linear-gradient(90deg, var(--impro-violet), var(--impro-mauve), var(--impro-coral), transparent);
  background-size: 220% 100%;
  border-radius: 999px;
  content: "";
  display: block;
  height: 4px;
  margin-top: .45rem;
  width: min(150px, 48vw);
}

.ux-hero {
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(246,242,248,.92)),
    linear-gradient(90deg, rgba(23,20,31,.05) 1px, transparent 1px) 0 0 / 28px 28px;
  border: 1px solid var(--impro-line);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(36,33,43,.14);
  display: grid;
  gap: 1.4rem;
  margin: -5.5rem 0 2.5rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  position: relative;
  z-index: 2;
}

.ux-hero-action {
  overflow: hidden;
}

.ux-hero-action::before {
  animation: improColorRun 8s linear infinite;
  background: linear-gradient(90deg, var(--impro-violet), var(--impro-mauve), var(--impro-coral), var(--impro-teal));
  background-size: 260% 100%;
  border-radius: 999px;
  content: "";
  height: 9px;
  left: clamp(1.4rem, 3vw, 2.4rem);
  position: absolute;
  right: clamp(1.4rem, 3vw, 2.4rem);
  top: 0;
}

.ux-hero-action::after {
  animation: improFloat 9s ease-in-out infinite alternate;
  background: radial-gradient(circle, rgba(143,92,194,.26), transparent 62%);
  content: "";
  height: 220px;
  position: absolute;
  right: -70px;
  top: -90px;
  width: 220px;
  z-index: -1;
}

.ux-kicker {
  align-self: start;
  background: rgba(143,92,194,.12);
  border: 1px solid rgba(143,92,194,.28);
  border-radius: 999px;
  color: var(--impro-plum);
  display: inline-flex;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  margin: 0;
  padding: .35rem .65rem;
  text-transform: uppercase;
}

.ux-lead {
  color: var(--impro-ink);
  font-size: clamp(1.18rem, 2vw, 1.55rem);
  line-height: 1.45;
  margin: 0;
}

.ux-reassurance {
  color: var(--impro-muted);
  font-size: .95rem;
  margin: -.3rem 0 0;
}

.ux-cta-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

.ux-button,
.texte a.spip_out[href*="atelierbrooklyn.fr"] {
  background: linear-gradient(135deg, var(--impro-violet), var(--impro-mauve), var(--impro-coral));
  background-size: 220% 220%;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(109, 59, 255, .2);
  color: #fff !important;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  line-height: 1.2;
  overflow: hidden;
  padding: .95rem 1.15rem;
  position: relative;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.ux-button::after,
.texte a.spip_out[href*="atelierbrooklyn.fr"]::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  content: "";
  height: 100%;
  left: -70%;
  position: absolute;
  top: 0;
  transform: skewX(-18deg);
  width: 48%;
}

.ux-button:hover,
.texte a.spip_out[href*="atelierbrooklyn.fr"]:hover {
  box-shadow: 0 16px 30px rgba(109, 59, 255, .28);
  transform: translateY(-2px);
}

.ux-button:hover::after,
.texte a.spip_out[href*="atelierbrooklyn.fr"]:hover::after {
  animation: improShine .72s ease;
}

.ux-button-pulse {
  animation: improPulse 2.8s ease-in-out infinite, improGradientDrift 7s ease-in-out infinite alternate;
}

.ux-button.secondary {
  background: rgba(255,255,255,.9);
  border: 1px solid var(--impro-line);
  box-shadow: none;
  color: var(--impro-ink) !important;
}

.ux-facts,
.ux-levels,
.ux-faq,
.ux-steps {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 2rem 0;
}

.ux-photo-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1.25fr 1fr 1fr;
  margin: 2.2rem 0;
}

.ux-photo-grid figure {
  background: rgba(20,17,27,.92);
  border: 1px solid rgba(143,92,194,.25);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(20,17,27,.16);
  margin: 0;
  min-height: 260px;
  overflow: hidden;
  position: relative;
}

.ux-photo-grid figure:first-child {
  grid-row: span 2;
}

.ux-photo-grid img {
  display: block;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .6s ease, filter .6s ease;
  width: 100%;
}

.ux-photo-grid figure:hover img {
  filter: saturate(1.08) contrast(1.03);
  transform: scale(1.06);
}

.ux-photo-grid figcaption {
  background: linear-gradient(90deg, rgba(20,17,27,.92), rgba(76,36,95,.72));
  bottom: 0;
  color: #fff;
  font-size: .9rem;
  font-weight: 800;
  left: 0;
  letter-spacing: 0;
  padding: .7rem .85rem;
  position: absolute;
  right: 0;
}

.ux-card,
.ux-level,
.ux-faq-item,
.ux-map-panel,
.texte > p,
.ux-steps > div {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--impro-line);
  border-radius: 8px;
}

.ux-card,
.ux-level,
.ux-faq-item,
.ux-steps > div {
  padding: 1.15rem;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ux-card:hover,
.ux-level:hover,
.ux-faq-item:hover,
.ux-steps > div:hover {
  border-color: rgba(143,92,194,.36);
  box-shadow: 0 16px 36px rgba(76,36,95,.13);
  transform: translateY(-3px);
}

.ux-card::before,
.ux-faq-item::before {
  background: var(--impro-mauve);
  border-radius: 999px;
  content: "";
  height: .55rem;
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: .55rem;
}

.ux-card:nth-child(2)::before,
.ux-faq-item:nth-child(2n)::before {
  background: var(--impro-violet);
}

.ux-card:nth-child(3)::before,
.ux-faq-item:nth-child(3n)::before {
  background: var(--impro-coral);
}

.ux-card strong,
.ux-level strong,
.ux-faq-item strong {
  color: var(--impro-ink);
  display: block;
  font-size: 1.05rem;
  margin-bottom: .35rem;
}

.ux-card span,
.ux-level p,
.ux-faq-item p {
  color: var(--impro-muted);
  margin: 0;
}

.ux-level:first-child {
  border-top: 5px solid var(--impro-violet);
}

.ux-level:last-child {
  border-top: 5px solid var(--impro-mauve);
}

.ux-map-panel {
  box-shadow: 0 22px 50px rgba(36,33,43,.12);
  overflow: hidden;
}

.ux-map-copy {
  padding: 1.2rem 1.2rem 0;
}

.ux-map-copy p {
  color: var(--impro-muted);
  margin: .3rem 0 1rem;
}

.ux-map {
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  min-height: 320px;
  width: 100%;
}

.ux-band {
  background:
    linear-gradient(135deg, rgba(143,92,194,.13), rgba(109,59,255,.09), rgba(255,95,126,.1)),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.42) 0 7px, transparent 7px 16px);
  border: 1px solid var(--impro-line);
  border-radius: 8px;
  margin: 2.2rem 0;
  padding: clamp(1.2rem, 3vw, 2rem);
}

.ux-band-warm {
  background: linear-gradient(135deg, rgba(143,92,194,.16), rgba(255,95,126,.12));
}

.ux-band p:last-child {
  margin-bottom: 0;
}

.ux-steps span {
  align-items: center;
  background: linear-gradient(135deg, var(--impro-violet), var(--impro-plum));
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-weight: 800;
  height: 2.15rem;
  justify-content: center;
  margin-bottom: .8rem;
  width: 2.15rem;
}

.ux-steps strong {
  display: block;
  font-size: 1.08rem;
}

.ux-steps p {
  color: var(--impro-muted);
  margin: .35rem 0 0;
}

.ux-quote {
  align-items: center;
  animation: improGradientDrift 16s ease-in-out infinite alternate;
  background:
    radial-gradient(circle at 10% 20%, rgba(143,92,194,.34), transparent 14rem),
    radial-gradient(circle at 90% 80%, rgba(255,95,126,.18), transparent 12rem),
    linear-gradient(135deg, var(--impro-night), var(--impro-plum));
  background-size: 160% 160%;
  border-radius: 8px;
  color: #fff;
  display: flex;
  gap: 1.2rem;
  justify-content: space-between;
  margin: 2.2rem 0;
  padding: clamp(1.2rem, 3vw, 2rem);
}

.ux-quote p {
  font-size: 1.15rem;
  margin: 0;
}

.ux-final-cta {
  border-color: rgba(143,92,194,.28);
  box-shadow: 0 20px 48px rgba(109,59,255,.13);
}

.texte > p {
  padding: 1rem 1.1rem;
}

.texte .spip_document {
  border-radius: 8px;
  overflow: hidden;
}

.liste.articles,
.liste.rubriques {
  margin-top: 2.5rem;
}

#footer {
  animation: improGradientDrift 24s ease-in-out infinite alternate;
  background: linear-gradient(135deg, var(--impro-night), #30243a, #1f1b25);
  background-size: 220% 220%;
}

@keyframes improPulse {
  0%, 100% {
    box-shadow: 0 12px 24px rgba(109, 59, 255, .2);
  }
  50% {
    box-shadow: 0 18px 38px rgba(143, 92, 194, .36);
  }
}

@keyframes improShine {
  from {
    left: -70%;
  }
  to {
    left: 120%;
  }
}

@keyframes improGradientDrift {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

@keyframes improColorRun {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 220% 50%;
  }
}

@keyframes improFloat {
  from {
    transform: translate3d(0,0,0) rotate(0deg);
  }
  to {
    transform: translate3d(-24px,18px,0) rotate(8deg);
  }
}

@media (max-width: 860px) {
  #suite .spotlight .content {
    padding: 2rem;
  }

  .ux-facts,
  .ux-levels,
  .ux-faq,
  .ux-steps,
  .ux-photo-grid {
    grid-template-columns: 1fr;
  }

  .ux-photo-grid figure:first-child {
    grid-row: auto;
  }

  .ux-quote {
    align-items: stretch;
    flex-direction: column;
  }

  .ux-hero {
    margin-top: -3.5rem;
  }

  article#main header.main {
    padding: 6rem 1.2rem 4rem;
  }
}

@media (max-width: 520px) {
  .ux-cta-row {
    align-items: stretch;
    flex-direction: column;
  }

  .ux-button,
  .texte a.spip_out[href*="atelierbrooklyn.fr"] {
    width: 100%;
  }
}

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