/* Codylia : animations et effets d'interaction, communs à toutes les pages.
   Règle générale : tout est visible par défaut. Les états masqués ne s'appliquent que sous « .js »
   (classe posée par boot.js), et sont neutralisés quand l'utilisateur préfère moins d'animations.
   Seuls transform, opacity, filter et clip-path sont animés. */

/* Rang d'un élément dans une séquence (titre mot à mot, cartes, listes en cascade) */
:where(.split, .stagger, .seq) > :nth-child(1) { --i: 0; }
:where(.split, .stagger, .seq) > :nth-child(2) { --i: 1; }
:where(.split, .stagger, .seq) > :nth-child(3) { --i: 2; }
:where(.split, .stagger, .seq) > :nth-child(4) { --i: 3; }
:where(.split, .stagger, .seq) > :nth-child(5) { --i: 4; }
:where(.split, .stagger, .seq) > :nth-child(6) { --i: 5; }
:where(.split, .stagger, .seq) > :nth-child(7) { --i: 6; }
:where(.split, .stagger, .seq) > :nth-child(8) { --i: 7; }
:where(.split, .stagger, .seq) > :nth-child(9) { --i: 8; }
:where(.split, .stagger, .seq) > :nth-child(10) { --i: 9; }
:where(.split, .stagger, .seq) > :nth-child(n + 11) { --i: 10; }

/* Fond : trame de points très discrète et halo lent derrière les en-têtes de page */
body { background-image: radial-gradient(rgba(143, 184, 255, 0.075) 1px, transparent 1px); background-size: 28px 28px; }
.hero, .page-head, .prose-page__head, .notfound, .cta { position: relative; isolation: isolate; }
.hero::before, .page-head::before, .cta::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 0; width: min(64rem, 120vw); aspect-ratio: 1.6;
  translate: -50% -42%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(79, 140, 255, 0.26), transparent);
  animation: drift 18s ease-in-out infinite alternate;
}
.page-head { overflow: hidden; }
.page-head::before { opacity: 0.7; }
.cta { overflow: hidden; }
.cta::before { top: 100%; translate: -50% -55%; }
@keyframes drift { from { transform: translate3d(-7%, 3%, 0) scale(0.94); } to { transform: translate3d(7%, -3%, 0) scale(1.08); } }

/* Barre de progression de lecture */
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* En-tête : se floute et se condense une fois la page entamée */
.site-header { transition: background-color 300ms, border-color 300ms; }
.site-header.is-scrolled { background: rgba(10, 16, 36, 0.74); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.site-header .logo__svg { transform-origin: left center; transition: transform 300ms var(--ease); }
.site-header.is-scrolled .logo__svg { transform: scale(0.88); }
.nav a:not(.nav__cta) { position: relative; }
.nav a:not(.nav__cta)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.35rem; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease); }
.nav a:not(.nav__cta):hover::after, .nav a[aria-current='page']::after { transform: scaleX(1); }

/* Titres révélés mot à mot, puis le reste de l'en-tête en cascade */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.05em 0.16em; margin: 0 -0.05em -0.16em; }
.split .w > span { display: inline-block; animation: word-in 800ms var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes word-in { from { opacity: 0; transform: translateY(105%) rotate(4deg); } to { opacity: 1; transform: none; } }
.hero .wrap > h1.split, .hero .wrap > .hero__cards { animation: none; }
.hero .lead { animation-delay: 480ms; }
.hero .actions { animation-delay: 580ms; }
.page-head .kicker, .prose-page__head .kicker, .notfound__code { animation: up 600ms var(--ease) both; }
.page-head .lead, .prose-page__head .lead, .notfound .lead { animation: up 700ms var(--ease) 380ms both; }
.prose-page__head .meta, .notfound .actions { animation: up 700ms var(--ease) 480ms both; }
.hero__cards > li, .seq > * { animation: card-in 750ms var(--ease) both; animation-delay: calc(640ms + var(--i, 0) * 85ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(26px) scale(0.97); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* Apparitions au défilement : bloc seul (.reveal) ou enfants en cascade (.stagger) */
.reveal, .stagger > * { transition: opacity 750ms var(--ease), transform 750ms var(--ease), filter 750ms var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal:not(.is-visible), .js .stagger:not(.is-visible) > * { opacity: 0; transform: translateY(30px); filter: blur(8px); }
.js .reveal[data-reveal='left']:not(.is-visible) { transform: translateX(-40px); }
.js .reveal[data-reveal='right']:not(.is-visible) { transform: translateX(40px); }
.js .reveal[data-reveal='scale']:not(.is-visible) { transform: scale(0.93); }

/* Cartes « projecteur » : une lueur suit le curseur, la bordure s'éclaire au même endroit */
.spot { position: relative; isolation: isolate; }
.spot::before, .spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 350ms; }
.spot::before { z-index: -1; background: radial-gradient(26rem circle at var(--mx, 50%) var(--my, 50%), rgba(79, 140, 255, 0.2), transparent 62%); }
.spot::after {
  inset: -1px; padding: 1px; background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 50%), rgba(143, 184, 255, 0.95), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.spot:hover::before, .spot:hover::after, .spot:focus-visible::before, .spot:focus-visible::after { opacity: 1; }
.card .card__more span { display: inline-block; transition: transform 250ms var(--ease); }
.card:hover .card__more span { transform: translateX(5px); }

/* Bouton légèrement aimanté par le curseur (variables posées par motion.js) */
.button { transform: translate(var(--bx, 0), var(--by, 0)); transition: background-color 150ms, translate 150ms var(--ease), transform 250ms var(--ease); }

/* Vitrine CRM : la fenêtre se redresse avec le défilement, les onglets montrent leur progression */
.js .section--crm .stage {
  animation: none; will-change: transform;
  transform: perspective(1400px) rotateX(calc((1 - var(--t, 1)) * 20deg)) scale(calc(0.88 + var(--t, 1) * 0.12));
  opacity: calc(0.4 + var(--t, 1) * 0.6);
}
.crm__tab { position: relative; overflow: hidden; }
.crm__tab::after { content: ''; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.3rem; height: 2px; border-radius: 2px; background: var(--accent-light); transform: scaleX(0); transform-origin: left; }
.crm__tab[aria-selected='true']::after { transform: scaleX(1); }
.crm.is-auto .crm__tab[aria-selected='true']::after { animation: tab-progress 7000ms linear both; }
.crm.is-auto.is-paused .crm__tab[aria-selected='true']::after { animation-play-state: paused; }
@keyframes tab-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.shot.is-active { animation: shot-swap 500ms var(--ease); }
@keyframes shot-swap { from { opacity: 0; transform: scale(1.025); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* Étapes d'un projet : le trait se dessine avec le défilement, chaque pastille s'allume à son passage */
.steps { list-style: none; position: relative; display: grid; gap: 2rem; padding-left: 3.5rem; }
.steps::before, .steps::after { content: ''; position: absolute; left: 1.05rem; top: 0.5rem; bottom: 0.5rem; width: 2px; border-radius: 2px; background: var(--line); }
.steps::after { background: var(--accent); transform-origin: top; transform: scaleY(var(--line-p, 1)); }
.step { position: relative; }
.step__n {
  position: absolute; left: -3.5rem; top: -0.15rem; z-index: 1; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 0.95rem; background: var(--accent); color: var(--accent-ink); border: 2px solid var(--accent);
  transition: background-color 400ms, color 400ms, border-color 400ms, transform 500ms var(--ease);
}
.step h3 { margin-bottom: 0.3rem; }
.step p { color: var(--muted); max-width: 34em; }
.step__body { transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.js .step:not(.is-on) .step__n { background: var(--card); color: var(--muted); border-color: var(--line); transform: scale(0.82); }
.js .step:not(.is-on) .step__body { opacity: 0.32; transform: translateX(14px); }
.notes { list-style: none; display: grid; gap: 1rem; margin-top: 2.5rem; }
.notes li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.3rem; }
.notes h3 { font-size: 1.02rem; margin-bottom: 0.25rem; }
.notes p { color: var(--muted); font-size: 0.95rem; }

/* Contact : le soulignement de l'adresse se trace à l'apparition */
.cta__mail a, .contact__mail a { position: relative; display: inline-block; text-decoration: none; }
.cta__mail a::after, .contact__mail a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -0.1em; height: 3px; border-radius: 2px; background: var(--accent); transform-origin: left; transition: transform 900ms var(--ease) 350ms; }
.js .reveal:not(.is-visible) .cta__mail a::after, .js .reveal:not(.is-visible) .contact__mail a::after { transform: scaleX(0); }
.avatar { transition: transform 500ms var(--ease), box-shadow 500ms; }
.avatar:hover { transform: scale(1.05) rotate(-2deg); box-shadow: 0 0 0 6px rgba(79, 140, 255, 0.18); }

/* Page Services : sommaire collant dont l'entrée active suit la lecture */
.toc { position: sticky; top: var(--header-h, 4.5rem); z-index: 30; margin-bottom: 1.5rem; padding-block: 0.6rem; background: rgba(10, 16, 36, 0.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.toc ul { list-style: none; display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; }
.toc ul::-webkit-scrollbar { display: none; }
.toc a { display: block; white-space: nowrap; text-decoration: none; font-size: 0.9rem; font-weight: 600; color: var(--muted); padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid var(--line); transition: color 200ms, background-color 200ms, border-color 200ms, transform 250ms var(--ease); }
.toc a:hover { color: var(--text); border-color: var(--accent); }
.toc a.is-current { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: scale(1.04); }
.service { transition: opacity 750ms var(--ease), transform 750ms var(--ease), filter 750ms var(--ease), border-color 300ms; }
.service:target { border-color: var(--accent); }

@media (min-width: 46rem) {
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 34rem) {
  .js .reveal[data-reveal='left']:not(.is-visible), .js .reveal[data-reveal='right']:not(.is-visible) { transform: translateY(30px); }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal:not(.is-visible), .js .stagger:not(.is-visible) > *, .js .step:not(.is-on) .step__body { opacity: 1; transform: none; filter: none; }
  .js .section--crm .stage { transform: none; opacity: 1; }
  .button { transform: none; }
}