/* V9 : effets progressifs. Le contenu reste entièrement visible sans JavaScript. */
html.motion-disabled { scroll-behavior: auto; }
.motion-disabled *, .motion-disabled *::before, .motion-disabled *::after { animation: none !important; transition: none !important; }
.reading-progress {
  position: fixed; inset: 0 0 auto; z-index: 30; height: 3px;
  background: var(--blue); transform: scaleX(0); transform-origin: left center;
  pointer-events: none;
}
.hero__ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__ambient::before {
  content: ''; position: absolute; width: min(90vw, 70rem); aspect-ratio: 1;
  left: 50%; top: -24rem; opacity: .65;
  background: radial-gradient(ellipse, rgb(129 222 255 / 36%), transparent 66%);
  transform: translate(calc(-50% + var(--ambient-x, 0px)), var(--ambient-y, 0px));
}
.hero__ambient svg { width: 100%; height: 100%; fill: none; stroke: #70bfd3; stroke-width: 1; opacity: .23; }
.hero__ambient path:nth-child(2) { opacity: .6; }
.hero__ambient path:nth-child(3) { opacity: .4; }
.motion-enabled .hero__ambient svg { animation: ambient-enter 2600ms ease-out both; }
.motion-enabled .hero__ambient path { animation: draw-orbit 2600ms cubic-bezier(.2,.65,.3,1) both; }
.motion-enabled .hero__ambient::before { transition: transform 600ms ease-out; }
@keyframes ambient-enter { from { opacity: 0; } to { opacity: .23; } }
@keyframes draw-orbit { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }

mark[data-highlight] {
  background-color: transparent;
  background-image: linear-gradient(var(--blue), var(--blue));
  background-repeat: no-repeat; background-size: 100% 100%;
}
.is-highlighting { animation: highlight-sweep 650ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes highlight-sweep { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.is-revealing { animation-duration: 500ms; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
.portrait.is-revealing { animation-name: portrait-enter; animation-duration: 650ms; }
@keyframes portrait-enter { from { opacity: .15; transform: translateY(20px) scale(.985); } to { opacity: 1; transform: none; } }
@media (min-width: 1024px) {
  .portrait.is-revealing { animation-delay: 100ms; }
  .ai__example > .media-zoom.is-revealing { animation-delay: 100ms; }
  .ai__example--reverse > :last-child { grid-column: 1; grid-row: 1; }
}

.motion-enabled .contact__button { transition: background-color 180ms ease, box-shadow 180ms ease, transform 150ms ease; }
.motion-enabled .contact__arrow { transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
.motion-enabled a.contact__button:active { transform: scale(.985); }
.motion-enabled a.contact__button:focus-visible .contact__arrow { transform: translateX(5px); }
.motion-enabled .discover img { transition: transform 220ms ease; }
.motion-enabled .transcript summary img { transition: transform 200ms ease; }
.transcript.is-closing summary img { transform: rotate(0); }
@media (hover: hover) and (pointer: fine) {
  .motion-enabled a.contact__button:hover { box-shadow: 0 10px 32px rgb(0 0 0 / 14%); }
  .motion-enabled a.contact__button:hover .contact__arrow { transform: translateX(5px); }
  .motion-enabled .discover:hover img { transform: translateY(4px); }
  .motion-enabled .media-zoom:hover > img { transform: scale(1.018); }
}

.media-zoom {
  position: relative; display: block; width: 100%; min-width: 0; padding: 0;
  border: 0; border-radius: .5rem; background: transparent; color: var(--duck);
  text-align: inherit; cursor: zoom-in;
}
.media-zoom > img { width: 100%; }
.motion-enabled .media-zoom > img { transition: transform 300ms ease; }
.media-zoom--compositions { margin-top: 1.5rem; }
.media-zoom > .compositions { margin-top: 0; }
.media-zoom__icon {
  position: absolute; right: .75rem; bottom: .75rem; width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center; border: 1px solid rgb(20 55 59 / 12%);
  border-radius: .5rem; background: var(--cream); box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
  pointer-events: none;
}
.media-zoom__icon svg { width: 18px; height: 18px; }
.media-dialog {
  width: calc(100% - 2rem); max-width: 72rem; max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem); padding: 3.5rem 0 0;
  border: 0; background: transparent; color: var(--cream); overflow: auto;
}
.media-dialog::backdrop { background: rgb(10 30 33 / 94%); }
.media-dialog__close {
  position: absolute; right: 0; top: 0; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: .5rem;
  background: var(--cream); color: var(--duck); cursor: pointer;
}
.media-dialog__close svg { width: 22px; height: 22px; }
.media-dialog :focus-visible { outline-color: var(--blue); outline-offset: 3px; }
.media-dialog__frame { margin: 0 auto; border-radius: .5rem; overflow: hidden; }
.media-dialog__frame img {
  display: block; width: auto; height: auto; max-width: 100%;
  max-height: calc(100vh - 11rem); max-height: calc(100dvh - 11rem); margin: auto; object-fit: contain;
}
.media-dialog__frame--identity {
  position: relative; width: min(100%, calc((100vh - 11rem) * 500 / 494));
  width: min(100%, calc((100dvh - 11rem) * 500 / 494)); aspect-ratio: 500 / 494;
}
.media-dialog__frame--identity img { position: absolute; width: 100%; height: 134.95%; max-width: none; max-height: none; left: -.1%; top: -.05%; }
.media-dialog__caption { max-width: 50rem; margin: 1rem auto 0; font-size: .875rem; line-height: 1.6; text-align: center; }
.motion-enabled .media-dialog[open] .media-dialog__frame { animation: dialog-enter 200ms ease-out both; }
@keyframes dialog-enter { from { opacity: .2; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .hero__ambient svg { opacity: .14; }
  .hero__ambient::before { top: -8rem; }
  .motion-enabled .hero__ambient svg { animation-name: ambient-enter-mobile; }
  @keyframes ambient-enter-mobile { from { opacity: 0; } to { opacity: .14; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .contact__button, .contact__arrow, .discover img, .media-zoom > img { transform: none !important; }
}
@media (forced-colors: active) {
  .hero__ambient { display: none; }
  .reading-progress { background: Highlight; }
  .media-zoom__icon, .media-dialog__close { border: 1px solid ButtonText; }
  .media-dialog { background: Canvas; color: CanvasText; }
}
@media print {
  .reading-progress, .hero__ambient, .media-zoom__icon, .media-dialog { display: none !important; }
  .is-revealing, .is-highlighting { animation: none; }
}