/* Killian Palin · portfolio, version sombre */
:root {
  --bg: #0b0b0b;
  --surface: #161616;
  --surface-2: #1f1f1f;
  --ink: #ecebe7;
  --muted: #a3a29e;
  --marker: #ff6a2c;      /* croix de tracking du plateau, seul accent */

  --font: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --step-note: 15px;
  --step-text: 17px;
  --step-lead: clamp(1.375rem, 1.1rem + 1vw, 2.25rem);
  --step-sec: clamp(2.5rem, 1.6rem + 4vw, 5.5rem);
  --step-display: clamp(2rem, 3.3vw, 4rem);

  --m: clamp(16px, 2.2vw, 32px);
  --gap: clamp(120px, 14vw, 200px);
  --r: 20px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--step-text); line-height: 1.5; letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; margin: 0; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--marker); outline-offset: 3px; }
.skip { position: absolute; left: var(--m); top: -100px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; }
.skip:focus { top: var(--m); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 500;
  padding: 14px 22px; border: 0; border-radius: 999px; cursor: pointer;
  transition: transform .35s var(--ease-out), background-color .25s;
}
.btn:hover { background: #fff; }
.btn:active { transform: scale(.97); }
.btn-small { padding: 9px 16px; font-size: 15px; }

/* ---------- Barre ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px var(--m); font-size: 15px;
  transition: transform .5s var(--ease-out), background-color .3s;
}
.bar.is-hidden { transform: translateY(-110%); }
.bar.is-solid { background: var(--bg); }
.wordmark { font-weight: 600; letter-spacing: -0.02em; text-decoration: none; font-size: 17px; }
.bar nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.bar nav a:not(.btn) { text-decoration: none; color: var(--muted); transition: color .25s; }
.bar nav a:not(.btn):hover { color: var(--ink); }

/* ---------- Hero ---------- */
.hero-wrap { position: relative; height: 230svh; }
.hero { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; }
.hero-frame {
  position: absolute; inset: 0; overflow: hidden; background: #1a1a1a;
  will-change: transform, border-radius;
}
.hero-still, .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero-canvas { opacity: 0; transition: opacity .4s; }
.has-frames .hero-canvas { opacity: 1; }
.hero-title {
  position: absolute; left: var(--m); right: var(--m); top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; align-items: flex-end; gap: .04em;
  font-size: var(--step-display); line-height: 1; color: var(--ink); text-align: right;
}
.half { display: block; will-change: transform; }
.half-r { text-align: right; }
.mask { display: block; overflow: hidden; padding-bottom: .08em; }
.mask > span { display: block; transform: translateY(105%); transition: transform .8s var(--ease-out); }
.is-loaded .mask > span { transform: none; }
.is-loaded .half-r .mask > span { transition-delay: .08s; }
.hero-lede {
  position: absolute; left: var(--m); bottom: 32px; max-width: 30ch; font-weight: 500;
  opacity: 0; transform: translateY(16px); transition: opacity .7s .3s, transform .7s .3s var(--ease-out);
}
.hero-hint {
  position: absolute; right: var(--m); bottom: 32px; font-size: var(--step-note); color: var(--muted);
  opacity: 0; transition: opacity .6s .5s;
}
.is-loaded .hero-lede { opacity: 1; transform: none; }
.is-loaded .hero-hint { opacity: 1; }
.hero-hint.is-done { opacity: 0 !important; }

/* ---------- Projets : cadres flottants ---------- */
.work { padding: var(--gap) var(--m) 0; }
.work-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 64px; }
.work-head h2 { font-size: var(--step-sec); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: var(--surface); border: 0; border-radius: 999px; padding: 10px 18px; min-height: 44px; cursor: pointer;
  font-size: var(--step-note); font-weight: 500; color: var(--muted);
  transition: background-color .25s, color .25s, transform .3s var(--ease-out);
}
.chip span { font-variant-numeric: tabular-nums; opacity: .82; }
.chip:hover { color: var(--ink); background: var(--surface-2); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 40px); align-items: start; }
.col { display: grid; gap: clamp(20px, 2.4vw, 40px); will-change: transform; }
.col:nth-child(2) { padding-top: 140px; }
.col:nth-child(3) { padding-top: 60px; }

.card {
  --rx: 0deg; --ry: 0deg; --s: 1;
  position: relative; display: block; width: 100%; padding: 0; border: 0; text-align: left; cursor: pointer;
  background: var(--surface); border-radius: var(--r); overflow: hidden; color: var(--ink);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s));
  transition: transform .5s var(--ease-out), background-color .3s;
  animation: float 7s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes float { 50% { translate: 0 -8px; } }
.card:hover, .card:focus-visible { --s: 1.02; background: var(--surface-2); }
.card-media { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin: 8px 8px 0; border-radius: calc(var(--r) - 6px); }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out), opacity .5s; }
.card-media .alt { opacity: 0; }
.card:hover .card-media img { transform: scale(1.06); }
.card:hover .card-media .alt { opacity: 1; }
.card-body { display: flex; width: 100%; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 18px 18px; }
.card-title { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.card-title b { font-weight: 600; }
.card-meta { font-size: var(--step-note); color: var(--muted); white-space: nowrap; }
.card[hidden] { display: none; }

/* ---------- À propos ---------- */
.about { padding: var(--gap) var(--m) 0; }
.about h2 { font-size: var(--step-sec); margin-bottom: 40px; }
.about-statement { font-size: var(--step-lead); line-height: 1.25; letter-spacing: -0.02em; max-width: 28ch; }
.about-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 80px; }
.about-cols h3 { font-size: 19px; letter-spacing: -0.02em; margin-bottom: 10px; }
.about-cols p { color: var(--muted); max-width: 36ch; }
.brands-title { font-size: 19px; letter-spacing: -0.02em; margin: 120px 0 28px; }
.brands { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.brands li {
  display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 0 18%;
  background: var(--surface); border-radius: calc(var(--r) - 4px);
  transition: background-color .3s, transform .5s var(--ease-out);
}
.brands li:hover { background: var(--surface-2); transform: translateY(-4px); }
.brands img { max-height: 34px; width: auto; max-width: 100%; filter: brightness(0) invert(1); opacity: .78; transition: opacity .3s; }
.brands li:hover img, .brands li:hover .wm { opacity: 1; }
.wm { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; opacity: .78; transition: opacity .3s; }
.wm-serif { font-family: Georgia, serif; font-weight: 400; letter-spacing: .02em; }

/* ---------- Contact ---------- */
.contact { padding: var(--gap) var(--m); display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 120px); align-items: start; }
.contact h2 { font-size: var(--step-sec); margin-bottom: 28px; }
.contact-lede { color: var(--muted); max-width: 34ch; }
.contact-links { margin-top: 40px; display: grid; gap: 4px; }
.contact-links a {
  display: inline-flex; gap: 10px; align-items: baseline; font-size: clamp(22px, 1.4rem + .6vw, 32px); font-weight: 500;
  letter-spacing: -0.03em; text-decoration: none; padding: 6px 0; transition: color .25s, transform .4s var(--ease-out);
}
.contact-links a span { color: var(--muted); font-size: .7em; transition: transform .4s var(--ease-out), color .25s; }
.contact-links a:hover { color: var(--marker); }
.contact-links a:hover span { transform: translate(3px, -3px); color: var(--marker); }
.contact-where { margin-top: 40px; color: var(--muted); }

.form { background: var(--surface); border-radius: var(--r); padding: clamp(20px, 2.4vw, 36px); display: grid; gap: 18px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* taste-skill-ignore : champ anti-spam invisible */
.types { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.types legend { padding: 0; margin-bottom: 12px; font-size: var(--step-note); color: var(--muted); }
.types label { cursor: pointer; }
.types input { position: absolute; opacity: 0; pointer-events: none; }
.types span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); font-weight: 500; font-size: var(--step-note);
  transition: background-color .25s, color .25s, transform .3s var(--ease-out);
}
.types label:hover span { color: var(--ink); }
.types input:checked + span { background: var(--ink); color: var(--bg); }
.types input:focus-visible + span { outline: 2px solid var(--marker); outline-offset: 3px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field span { font-size: var(--step-note); color: var(--muted); }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 0; border-radius: 12px;
  padding: 14px 16px; resize: vertical; transition: background-color .25s, box-shadow .25s;
}
.field input:focus, .field textarea:focus { outline: none; background: #050505; box-shadow: inset 0 0 0 2px var(--marker); } /* taste-skill-ignore : contour de focus d'un champ */
.field textarea::placeholder { color: #6a6a66; }
.form-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
.form-status { font-size: var(--step-note); color: var(--muted); }
.form-status.ok { color: var(--ink); }
.form-status.err { color: var(--marker); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Pied ---------- */
.foot { padding: 0 var(--m) 32px; overflow: hidden; }
.foot-name { font-size: 17.6vw; font-weight: 600; letter-spacing: -0.06em; line-height: .8; white-space: nowrap; margin: 0 0 0 -0.04em; color: #6a6a66; }
.foot-legal { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; font-size: 13px; color: var(--muted); }

/* ---------- Lecteur ---------- */
.film {
  width: min(1200px, calc(100vw - 2 * var(--m))); max-width: none; max-height: calc(100svh - 2 * var(--m));
  padding: 0; border: 0; border-radius: var(--r); background: var(--surface); color: var(--ink); overflow: auto;
}
.film::backdrop { background: rgba(0, 0, 0, .82); }
.film[open] { animation: film-in .5s var(--ease-out); }
@keyframes film-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.film-inner { padding: 20px; display: grid; gap: 16px; }
.film-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.film-head h2 { font-size: clamp(24px, 2.4vw, 36px); letter-spacing: -0.03em; }
.film-frame { aspect-ratio: 16 / 9; background: #000; border-radius: calc(var(--r) - 6px); overflow: hidden; }
.film-frame iframe, .film-frame video { width: 100%; height: 100%; border: 0; display: block; background: #000; object-fit: contain; }
.film-frame [hidden] { display: none; }
.film-body { display: grid; gap: 14px; align-content: start; }
.film-meta { font-size: var(--step-note); color: var(--muted); }
.film-text { max-width: 70ch; display: grid; gap: 10px; }
.film-role { margin: 0; padding-left: 1.1em; list-style: disc; display: grid; gap: 6px; max-width: 70ch; }
.film-role li::marker { color: var(--muted); }
.film-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.film-gallery img { width: 100%; height: auto; display: block; border-radius: calc(var(--r) - 8px); background: #000; }
/* formats verticaux : vidéo à gauche, texte à droite */
.film.is-vertical .film-inner { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); align-items: start; column-gap: 28px; }
.film.is-vertical .film-head { grid-column: 1 / -1; }
.film.is-vertical .film-frame { aspect-ratio: 9 / 16; }
@media (max-width: 760px) {
  .film.is-vertical .film-inner { grid-template-columns: 1fr; }
  .film.is-vertical .film-frame { width: min(100%, 420px); justify-self: center; }
  .film-gallery { grid-template-columns: 1fr; }
}

/* ---------- Curseur ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none;
  margin: 18px 0 0 18px; padding: 8px 14px; border-radius: 999px;
  background: rgba(11, 11, 11, .55); color: var(--ink);
  border: 1px solid rgba(236, 235, 231, .18);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  font-size: 13px; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
  transform: translate3d(-200px, -200px, 0); opacity: 0;
  transition: opacity .25s, translate .35s var(--ease-out); translate: 0 4px;
}
.cursor span::after { content: " ↗"; color: var(--muted); }
.cursor.is-on { opacity: 1; translate: 0 0; }
@media (hover: none) { .cursor { display: none; } }

/* ---------- Entrées ---------- */
.js .reveal, .js [data-reveal] > * { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
.js .reveal.is-in, .js [data-reveal].is-in > * { opacity: 1; transform: none; }
.js [data-reveal].is-in > *:nth-child(2) { transition-delay: .06s; }
.js [data-reveal].is-in > *:nth-child(3) { transition-delay: .12s; }
.js [data-reveal].is-in > *:nth-child(n+4) { transition-delay: .18s; }

/* ---------- Tablette ---------- */
@media (max-width: 1000px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .col:nth-child(3) { padding-top: 0; }
  .brands { grid-template-columns: repeat(4, 1fr); }
  .contact { grid-template-columns: 1fr; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 700px) {
  .bar nav a:not(.btn) { display: none; }
  .bar nav a[href="#projets"] { display: inline; }
  .hero-wrap { height: 200svh; }
  .hero-title { position: absolute; top: 76px; translate: none; display: block; font-size: 10.5vw; text-align: left; }
  .half-r { margin-top: 4px; }
  .hero-frame { top: 22%; bottom: 22%; }
  .hero-lede { font-size: 16px; max-width: none; right: var(--m); bottom: 72px; }
  .hero-hint { left: var(--m); right: auto; bottom: 28px; }
  .cards { grid-template-columns: 1fr; }
  .col:nth-child(2) { padding-top: 0; }
  .about-cols { grid-template-columns: 1fr; gap: 28px; margin-top: 48px; }
  .contact { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; }
  .brands { grid-template-columns: repeat(3, 1fr); }
  .brands img { max-height: 24px; }
  .wm { font-size: 16px; }
  .work-head { margin-bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .mask > span { transform: none; }
  .js .reveal, .js [data-reveal] > * { opacity: 1; transform: none; }
  .card { animation: none; }
}

/* Texte lu par Google et les lecteurs d'écran, invisible à l'écran */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }