/* Lucidian — mouvement ponctuel, interactions et états accessibles.
   Charger après les styles de section. Le faisceau signe une seule arrivée ;
   les groupes de contenu apparaissent ensemble, sans cascade de cartes. */

:root {
  --motion-reveal: 560ms;
  --motion-control: 220ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.js [data-reveal] {
  opacity: 0;
  transform: none;
  transition: opacity var(--motion-reveal) var(--motion-ease);
  transition-delay: 0ms;
  will-change: auto;
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal-stagger] > [data-reveal] { --reveal-delay: 0ms; }

/* L'ordre du hero suit la lecture : positionnement, signature, texte, action. */
.js .accroche__contenu > [data-reveal] {
  transform: translateY(var(--space-3));
  transition: opacity var(--duration-slow) var(--motion-ease), transform var(--duration-slow) var(--motion-ease);
  transition-delay: calc(var(--hero-step, 0) * 70ms);
}
.js .accroche__contenu > [data-reveal]:nth-child(2) { --hero-step: 1; }
.js .accroche__contenu > [data-reveal]:nth-child(3) { --hero-step: 2; }
.js .accroche__contenu > [data-reveal]:nth-child(4) { --hero-step: 3; }
.js .accroche__contenu > [data-reveal].is-visible { transform: none; }
.js .accroche__visuel[data-reveal] { transition-delay: 140ms; }
.js .accroche__visuel.is-visible .accroche__symbole {
  stroke-dasharray: 1200;
  animation: lucidian-sightline 1000ms var(--motion-ease) 120ms both;
}
@keyframes lucidian-sightline {
  from { stroke-dashoffset: 1200; }
  to { stroke-dashoffset: 0; }
}

/* Le focus clavier répond aux mêmes repères que le pointeur. */
.site-nav__link:focus-visible::after { transform: scaleX(1); }
.form__email-link:focus-visible { outline-color: var(--color-marine); }

@media (max-width: 1199.98px) {
  .js .site-nav {
    max-height: calc(100dvh - var(--header-h));
    overscroll-behavior: contain;
    pointer-events: none;
    transition: opacity var(--motion-control) var(--motion-ease), transform var(--motion-control) var(--motion-ease), visibility 0s var(--motion-control);
  }
  .js .site-header--compact .site-nav { max-height: calc(100dvh - var(--header-h-compact)); }
  .js .site-nav.is-open {
    pointer-events: auto;
    visibility: visible;
    transition: opacity var(--motion-control) var(--motion-ease), transform var(--motion-control) var(--motion-ease);
  }
  .js .site-header__burger[aria-expanded="true"] .icon-close {
    animation: lucidian-menu-close 180ms var(--motion-ease);
  }
}
@keyframes lucidian-menu-close {
  from { opacity: 0; transform: rotate(-15deg); }
  to { opacity: 1; transform: none; }
}

/* Le mode courriel confirme un brouillon, jamais un envoi. */
.form__email-note {
  flex-basis: 100%;
  max-width: 54ch;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.contact__formulaire .form__status--ready {
  border-color: var(--color-marine);
  background: var(--color-mist);
  color: var(--color-ink);
}
.form__email-link {
  display: inline-block;
  margin-top: var(--space-3);
  padding-block: var(--space-2);
  color: var(--color-marine);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.no-js [data-contact-form] [type="submit"] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js .accroche__contenu > [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js .site-nav { transition: none; }
  .js .accroche__visuel.is-visible .accroche__symbole,
  .js .site-header__burger[aria-expanded="true"] .icon-close { animation: none; stroke-dasharray: none; }
}

@media print {
  .js [data-reveal], .js .accroche__contenu > [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .accroche__visuel.is-visible .accroche__symbole { animation: none; stroke-dasharray: none; }
}