/* Base : reset, éléments, utilitaires, apparition progressive */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--anthracite); color: var(--creme); font: 400 var(--fs-body)/1.55 var(--f-titre); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s-4); top: -4rem; z-index: 10; padding: var(--s-3) var(--s-4); background: var(--creme); color: var(--anthracite); }
.skip:focus { top: var(--s-4); }

/* Apparition progressive : active seulement si JavaScript est présent (classe .js posée dans le <head>).
   Sans JS, tout est visible. data-reveal + --d (délai) pilotent l'ordre d'arrivée. */
.js [data-reveal] { opacity: 0; transform: translateY(1rem); transition: opacity var(--dur-reveal) var(--ease-out) var(--d, 0s), transform var(--dur-reveal) var(--ease-out) var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal] .cadre__img { transform: scale(1.07); transition: transform calc(var(--dur-reveal) * 1.8) var(--ease-out) var(--d, 0s); }
.js [data-reveal].is-in .cadre__img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js [data-reveal] .cadre__img { opacity: 1; transform: none; transition: none; }
}