:root { --charbon: #2c3638; --papier: #f7f6f4; --ratio: 1456/2333; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { overflow: hidden; }
/* la page ne défile jamais : l'ombre déborde, on la coupe aux bords de l'écran */
body { position: fixed; inset: 0; width: 100%; height: 100%; }
body {
  font-family: "Century Gothic", "Gotham", "Avenir Next", Montserrat, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
svg { display: block; }
.nom { margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .62em; padding-left: .62em; white-space: nowrap; }
.barre { position: fixed; left: 50%; width: min(26.6vw, 340px); min-width: 110px; height: 0; background: var(--charbon); transform: translateX(-50%); animation: barre 2.6s cubic-bezier(.3, .1, .2, 1) .3s forwards; }
.barre.haut { top: 0; }
.barre.bas { bottom: 0; }
@keyframes barre { to { height: clamp(8px, 1.3vh, 14px); } }
body { background: linear-gradient(100deg, #fbfaf8 0%, var(--papier) 50%, #efece7 100%); color: var(--charbon); display: grid; place-items: center; }
.centre { display: grid; justify-items: center; gap: clamp(1.8rem, 5vh, 3.2rem); }
.objet { position: relative; height: min(34vh, 380px); height: min(34dvh, 380px); aspect-ratio: var(--ratio); }
.logo, .ombre { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo { fill: var(--charbon); opacity: 0; animation: murmurer 4s ease-out 1.4s forwards; }
/* le soleil se déplace : l'ombre du monogramme pivote lentement sur le papier */
.ombre { fill: rgba(44, 54, 56, .17); filter: blur(4px); transform-origin: 50% 100%; opacity: 0;
  transform: skewX(-46deg) scaleY(.8);
  animation: murmurer 5s ease-out 3s forwards, soleil 46s ease-in-out 3s infinite alternate; }
.nom { font-size: clamp(.8rem, 2.4vw, 1.25rem); opacity: 0; animation: murmurer 3.4s ease-out 4.2s forwards; }
@keyframes murmurer { to { opacity: 1; } }
@keyframes soleil { from { transform: skewX(-46deg) scaleY(.8); } to { transform: skewX(40deg) scaleY(.74); } }
@media (prefers-reduced-motion: reduce) {
  .barre, .logo, .ombre, .nom { animation: none; }
  .barre { height: clamp(8px, 1.3vh, 14px); } .logo, .ombre, .nom { opacity: 1; }
}