/* DECIPOD Studio — V2 design layer */
:root {
  --v2-green: #57e0a0;
  --v2-violet: #bc78ed;
  --v2-ease: cubic-bezier(.22, 1, .36, 1);
}

html { scroll-behavior: smooth; }

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

section[id] {
  scroll-margin-top: 84px;
  isolation: isolate;
}

/* A more regular vertical rhythm across the complete page. */
#expertises,
#projets {
  padding-top: clamp(5.5rem, 8vw, 8rem) !important;
  padding-bottom: clamp(5.5rem, 8vw, 8rem) !important;
}

#processus > div,
#ia > div:last-child,
#contact > div {
  padding-top: clamp(5.5rem, 8vw, 8rem) !important;
  padding-bottom: clamp(5.5rem, 8vw, 8rem) !important;
}

/* Hero: clearer prism presence while keeping the copy perfectly readable. */
#accueil video {
  opacity: .76;
  filter: saturate(1.14) contrast(1.06) brightness(.86);
  transform: scale(1.035);
}

#accueil::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: min(58vw, 760px);
  aspect-ratio: 1;
  right: -12vw;
  top: 20%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 35% 38%, rgb(87 224 160 / .22), transparent 38%),
    radial-gradient(circle at 66% 64%, rgb(188 120 237 / .24), transparent 42%);
  filter: blur(64px);
  animation: v2-hero-drift 14s ease-in-out infinite alternate;
}

#accueil > div:not(.absolute) { position: relative; z-index: 2; }

@keyframes v2-hero-drift {
  from { transform: translate3d(0, -2%, 0) scale(.94); }
  to { transform: translate3d(-9%, 5%, 0) scale(1.08); }
}

/* Section labels and supporting copy: stronger hierarchy and contrast. */
.section-kicker {
  font-size: clamp(.95rem, 1.15vw, 1.15rem) !important;
  letter-spacing: .19em !important;
  line-height: 1.4;
}

.text-muted-foreground {
  color: hsl(240 6% 72%) !important;
}

section[id] p.text-base,
section[id] p.sm\:text-lg {
  line-height: 1.75 !important;
}

/* Reliable, restrained reveals. Framer's inner title spans can remain translated
   after an anchor jump; the V2 reveal belongs to the complete text block. */
section[id] h2 span {
  transform: none !important;
}

.v2-reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .8s var(--v2-ease), transform .8s var(--v2-ease);
}

.v2-reveal.v2-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Approach cards: compact, content-led proportions. */
#approche .self-start { align-self: start !important; }
#approche .self-start > div {
  min-height: 0 !important;
  padding: clamp(1.25rem, 2vw, 1.75rem) !important;
}

/* Project cards: premium but quiet interaction. */
#projets .project-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.2rem;
  transition: transform .55s var(--v2-ease), box-shadow .55s var(--v2-ease), border-color .4s ease;
}

#projets .project-card::after {
  content: "Voir le projet  ↗";
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 4;
  padding: .62rem .86rem;
  border: 1px solid rgb(255 255 255 / .2);
  border-radius: 999px;
  color: #fff;
  background: rgb(5 5 10 / .58);
  backdrop-filter: blur(12px);
  font-size: .76rem;
  letter-spacing: .06em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .45s var(--v2-ease);
}

#projets .project-card img {
  transition: transform .8s var(--v2-ease), filter .6s ease !important;
}

#projets .project-card:hover {
  transform: translateY(-7px);
  border-color: rgb(188 120 237 / .38);
  box-shadow: 0 24px 65px rgb(0 0 0 / .4), 0 0 0 1px rgb(87 224 160 / .08);
}

#projets .project-card:hover::after { opacity: 1; transform: none; }
#projets .project-card:hover img { transform: scale(1.045); filter: saturate(1.08) contrast(1.03); }

/* Process: remove the rigid block feeling and give each step a clear focus. */
#processus [class*="grid-cols-4"] > div > div {
  min-height: 240px;
  transition: transform .4s var(--v2-ease), background-color .4s ease;
}

#processus [class*="grid-cols-4"] > div > div:hover {
  transform: translateY(-5px);
  background-color: hsl(240 10% 7%);
}

/* IA: a recognisable light split, created only with the brand colours. */
#ia::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: clamp(-15rem, -7vw, -5rem);
  top: 50%;
  width: min(42vw, 580px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 42%, rgb(255 255 255 / .16) 0 2%, transparent 3%),
    conic-gradient(from 205deg, transparent 0 18%, rgb(87 224 160 / .5) 24%, rgb(188 120 237 / .5) 40%, transparent 48% 100%);
  filter: blur(5px);
  opacity: .52;
  transform: translateY(-50%);
  mask-image: radial-gradient(circle, #000 0 40%, transparent 72%);
  animation: v2-prism-orbit 18s linear infinite;
}

@keyframes v2-prism-orbit {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* Section dot navigation: larger active state plus readable tooltips. */
nav[aria-label="Sections"] a {
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease !important;
}

nav[aria-label="Sections"] a::after {
  content: attr(aria-label);
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translate(8px, -50%);
  white-space: nowrap;
  padding: .4rem .62rem;
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: .5rem;
  color: #fff;
  background: rgb(8 8 13 / .88);
  backdrop-filter: blur(10px);
  font-size: .7rem;
  letter-spacing: .06em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

nav[aria-label="Sections"] a:hover::after,
nav[aria-label="Sections"] a:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

nav[aria-label="Sections"] a[aria-current="true"] {
  transform: scale(1.32);
  box-shadow: 0 0 18px rgb(87 224 160 / .48), 0 0 28px rgb(188 120 237 / .24);
}

@media (max-width: 767px) {
  #accueil { min-height: auto !important; padding-top: 7rem !important; padding-bottom: 5rem !important; }
  #accueil::after { width: 90vw; right: -45vw; }
  #ia::before { width: 85vw; right: -55vw; opacity: .35; }
  #projets .project-card::after { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .v2-reveal { opacity: 1; transform: none; transition: none; }
  #accueil::after, #ia::before { animation: none; }
  #projets .project-card, #projets .project-card img { transition: none !important; }
}