/* apostrophe droite : Sorts Mill Goudy la dessine courbe, on la prend dans une police système à empattements */
@font-face { font-family: "Apostrophe droite"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Times"); unicode-range: U+0027; }

:root {
  --white: #ffffff;
  --font-title: "Apostrophe droite", "Sorts Mill Goudy", Georgia, serif;   /* (essai ; avant : High Tower Text, sauvegardé) */
  --font: "Jost", system-ui, sans-serif;
  --p: 0;                       /* progression de la scène, 0 → 1, pilotée par main.js */
}

*, *::before, *::after { box-sizing: border-box; }

a, button { -webkit-tap-highlight-color: transparent; }   /* pas de fond au toucher sur téléphone */
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #050506;
  color: var(--white);
  font-family: var(--font);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---------- arrière-plan ---------- */

.ground {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  display: block;
}

/* ---------- scène ---------- */

.stage {
  position: relative;
  height: 340vh;
}

.stage__view {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.brand {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
  z-index: 1;
  opacity: calc(1 - var(--p) * 5);
}

.brand__name {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2.75rem, 8vw, 7rem);
  line-height: 1;
  color: var(--white);
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}

/* quand le sol WebGL peint le titre, le texte HTML devient transparent */
.brand.is-painted .brand__name,
.brand.is-painted .brand__tag { color: transparent; text-shadow: none; }

.brand__tag {
  margin: 1.3em 0 0;
  font-size: clamp(.72rem, 1.1vw, .9rem);
  font-weight: 400;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  padding-left: .42em;
}

.scroll-hint {
  position: absolute;
  left: 50%; bottom: 28px;
  translate: -50% 0;
  font-size: .75rem;
  letter-spacing: .3em;
  text-decoration: none;
  color: rgba(255,255,255,.7);
  padding-bottom: 34px;
  opacity: calc(1 - var(--p) * 6);
  z-index: 1;
}
.scroll-hint::after {
  content: "";
  position: absolute; left: 50%; bottom: 0;
  width: 1px; height: 26px;
  background: currentColor;
  animation: drip 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes drip {
  0%   { transform: scaleY(0); opacity: 1; }
  60%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- feuilles ---------- */

.flock { position: absolute; inset: 0; z-index: 2; }

.fly {
  position: absolute;
  left: 0; top: 0;
  width: var(--w);
  aspect-ratio: var(--a);
  margin-left: calc(var(--w) / -2);
  margin-top: calc(var(--w) / var(--a) / -2);
  text-decoration: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s ease;
}
.fly.is-ready { opacity: 1; }
.arrive-sky .fly { transition-duration: .25s; }   /* arrivée directe dans le ciel : apparition rapide */
.in-sky a.fly .fly__inner { pointer-events: auto; cursor: pointer; }

.fly__shadow,
.fly__paper {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}

/* deux ombres pré-calculées : contact (posée au sol) et portée (en l'air) */
.fly__shadow canvas {
  position: absolute;
  opacity: 0;
  inset: calc(var(--w) * -.12);
  width: calc(100% + var(--w) * .24);
  height: calc(100% + var(--w) * .24);
}

.fly__paper { transform-style: preserve-3d; }

.fly__inner {
  position: relative;
  width: 100%; height: 100%;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.fly__inner canvas { display: block; width: 100%; height: 100%; }
.fly__wet { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; }
.fly__fold { position: absolute; inset: 0; pointer-events: none; }   /* version pliée, affichée au sol */

/* en vol : la feuille souple (bandes emboîtées) remplace la feuille posée */
.fly__bend { position: absolute; inset: 0; perspective: 900px; transform-style: preserve-3d; pointer-events: none; display: none; }
.fly__strip { position: absolute; top: 0; height: 100%; transform-style: preserve-3d; transform-origin: left center; }
.fly__strip canvas { position: absolute; inset: 0; width: calc(100% + 1px); height: 100%; }
.fly__strip-wet { opacity: var(--wet, 0); }
.fly__strip-shade { position: absolute; inset: 0; pointer-events: none; }
.fly__strip:not(:has(.fly__strip)) > canvas { width: 100%; }   /* la dernière bande ne déborde pas du papier */
.fly__strip-line { opacity: var(--line, 0); }
.is-flying .fly__bend { display: block; }
/* feuille pliée sur la bordure : elle se déplie d'abord (charnière), puis devient souple */
.fly__hinge { position: absolute; inset: 0; perspective: 2200px; transform-style: preserve-3d; pointer-events: none; display: none; }
.fly__hinge-part, .fly__hinge-flap { position: absolute; inset: 0; transform-style: preserve-3d; }
.fly__hinge-part canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.is-hinging .fly__hinge { display: block; }
.is-hinging .fly__bend { display: none; }
.is-flying .fly__inner > canvas:not(.fly__fold) { visibility: hidden; }

/* la surface de l'eau, au-dessus des papiers noyés */
.water-over {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 3;
  pointer-events: none;
}

   /* assombrit en gardant la teinte du papier */

.in-sky a.fly:hover .fly__inner,
.in-sky a.fly:focus-visible .fly__inner { transform: translateY(-6px) scale(1.04); }
a.fly:focus-visible { outline: none; }

.fly__label {
  position: absolute;
  left: 0; right: 0; top: 100%;
  margin-top: 14px;
  text-align: center;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #fff;   /* nom du projet au survol, lisible sur le ciel du soir */
  opacity: 0;
  transition: opacity .4s;
}
.in-sky a.fly:hover .fly__label,
.in-sky a.fly:focus-visible .fly__label { opacity: calc(var(--p) * 2 - 1); }

/* ---------- fin ---------- */

.end-anchor { position: absolute; bottom: 0; }

/* à propos / contact : apparaissent en bas du ciel, une fois les projets arrivés */
.end__nav {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  opacity: clamp(0, calc((var(--p) - .8) * 8), 1);
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  padding: clamp(24px, 5vw, 64px);
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  font-weight: 400;
  letter-spacing: .08em;
  color: rgba(0, 0, 0, .8);   /* noir à 80 % */
}
.end__nav button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0 0 4px; cursor: pointer; }
.end__nav a, .end__nav button {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size .5s;
  padding-bottom: 4px;
}
.end__nav a:hover, .end__nav button:hover { background-size: 100% 1px; }
.in-sky .end__nav a, .in-sky .end__nav button { pointer-events: auto; }   /* seuls les liens captent la souris : le bas des feuilles reste survolable */
.in-sky .scroll-hint { pointer-events: none; }
/* la feuille survolée passe devant les autres, avec son nom */
.in-sky a.fly:hover, .in-sky a.fly:focus-visible { z-index: 999 !important; }

@media (max-width: 700px) {
  .fly { --w: 34vw !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- vers une page projet : la feuille vient à soi ---------- */

/* fondu entre pages (Chrome, Edge, Safari récents) — activé en ligne dans index.html */
::view-transition-old(root) { animation: .45s ease both vt-out; }
::view-transition-new(root) { animation: .55s .15s ease both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* au clic, les autres feuilles s'éloignent et pâlissent */
.leaving .fly:not(.is-chosen), .leaving .end__nav { transition: opacity .15s ease; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- panneaux à propos / contact ---------- */
.panel {
  position: fixed;
  left: 50%; bottom: clamp(70px, 12vh, 120px);
  translate: -50% 0;
  z-index: 1000;
  width: min(560px, calc(100vw - 32px));
  padding: clamp(24px, 4vw, 40px);
  background: rgba(20, 18, 28, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: #f1eee9;
  border-radius: 4px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
  animation: panel-in .35s ease both;
}
.panel[hidden] { display: none; }
@keyframes panel-in { from { opacity: 0; translate: -50% 12px; } }
.panel h2 { margin: 0 0 .7em; font-family: var(--font-title); font-weight: 400; font-size: 1.8rem; }
.panel p { margin: 0 0 .9em; line-height: 1.65; color: rgba(241, 238, 233, .82); }
.panel em { color: #f1eee9; }
.panel__mail { color: #f1eee9; font-size: 1.15rem; text-decoration: none; border-bottom: 1px solid rgba(241, 238, 233, .4); }
.panel__mail:hover { border-bottom-color: #f1eee9; }
.panel__close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: 0; color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; opacity: .7;
}
.panel__close:hover { opacity: 1; }